contacts app ب express js الجزء الأول

فهاد الدرس الجديد من سلسلة nodejs غادي نشوفو كيفاش نقادو une simple contacts app ب express js الدرس بسيط غادي نشوفو فيه كيفاش يمكن نزيدو قاعدة البيانات من بعد غادي نديرو ل connexion ل la base وغادي نشوفو كيفاش نزيدو نعدلو أو نمسحو des contacts.

نظرة سريعة بالفيديو


1- إضافة قاعدة البيانات


أول حاجة غادي نديرو غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها express-contacts فيها table وحدة contacts الكود باش تزيد la table فقاعدة البيانات هو :

                                    
                                        --
-- Structure de la table `contacts`
--
 
CREATE TABLE `contacts` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `tel` int(11) NOT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
ALTER TABLE `contacts`
  ADD PRIMARY KEY (`id`);
 
ALTER TABLE `contacts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;COMMIT;
                                    
                                

2- الملف includes/header.ejs


فيلا شفتي الدروس السابقة هنا ماغاديش نخدمو بنفس الطريقة غادي نغيرو شوية أول حاجة كتزيد مجلد جديد ف xampp/htdocs سميه express-contacts ملي تزيدو غادي تدخل من cmd غادي تدير لكوموند :
cd c:\xampp\htdocs\express-contacts
منبعد غادي تدير هاد لكوموند باش ت installer express :
npm install express --save
منبعد غادي تدير هاد لكوموند باش ت installer mysql : 
npm install mysql --save
منبعد غادي تدير هاد لكوموند باش ت generer ل json file :
npm init
منبعد غادي تزيد مجلد جديد تسميه includes فيه غادي تزيد جوج ملفات واحد header.ejs ولاخور footer.ejs فل header.ejs كاين القائمة ديالنا وروابط ال css الكود ديال الملف هو:

                                    
                                        <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <title>Express Contact App</title>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">Express contacts app</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
                                    
                                

3- الملف includes/footer.ejs


 فل footer.ejs كاين روابط ال js لي غادي نحتاجو الكود ديال الملف هو:

                                      
                                        <script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>
                                      
                                    

4- الملف views/add.ejs


فالمجلد views زيد ملف جديد سميه add.ejs فيه كندير include لل header ول footer منبعد كاين الفورم لي كتمكن من إضافة contact جديد المعلومات لي كيدخل المستخدم كتمشي ل route contact/add/ ولي غادي نشوفوه من بعد الكود ديال الملف هو :

                                        
                                            <% include ../views/includes/header.ejs %>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3>Ajouter un contact</h3>
            <hr>
            <form action="/contact/add" method="post">
                <div class="form-group">
                    <label for="nom">Nom</label>
                    <input type="text" class="form-control" name="nom" placeholder="Nom">
                </div>
                <div class="form-group">
                    <label for="nom">Prénom</label>
                    <input type="text" class="form-control" name="prenom" placeholder="Prénom">
                </div>
                <div class="form-group">
                    <label for="nom">Téléphone</label>
                    <input type="tel" class="form-control" name="tel" placeholder="Téléphone">
                </div>
                <div class="form-group">
                    <button class="btn btn-success" type="submit">Ajouter</button>
                </div>
            </form>
        </div>
    </div>
</div>
<% include ../views/includes/footer.ejs %>
                                        
                                    

كلمات مفاتيح :