دورة nodejs للمبتدئين الدرس الثاني عشر


فهاد  الدرس الثاني عشر من دورة nodejs للمبتدئين غادي نكملوا ل projet ديالنا غادي نزيدو la page لي غادي تكون فيها الفورم لي غادي تمكن من إضافة contact لقاعدة البيانات كما غادي نزيدو route لي غادي يمكن باش نمشي لهاد la page.


1- إضافة ل footer ل app

فغادي نزيدو ل footer ل application ديالنا لي يمكنلك تزيد فيه اي حاجة بغيتي انا زدت غير texte.
فكنمشي ل views ف partials كنزيد fichier جديد سميه footer.handlebars فيه غادي نزيد الكود لي كيمكن باش يكون عندي footer.
الكود ديال الملف هو :

                                <footer class="bg-danger text-center p-1 text-white">
    <p class="text-lead mt-2">DCoding©2018</p>
</footer>
                            

2- عرض ل footer

فباش نعرض ل footer لي زدت كنمشي ل main.handlebars وكنزيدو بنفس الطريقة لي زدت بها navbar.
فدبا يلا درت executer le fichier app.js غادي تكون عندي هاد النتيجة :



الكود ديال main.handlebars بعد التعديل :

                                <!DOCTYPE html>
<html lang="en">
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>Node js contacts app</title>
</head>
<body>
    <div class="container">
        {{>navbar}}
        {{{body}}}
        {{>footer}}
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
                            

3- إضافة فورم الإضافة

فباش نزيد فورم الإضافة غادي نزيد fichier جديد ف dossier views سميه add.handlebars فيه غادي نزيد الفورم لي غادي تمكن من إضافة des contacts لقاعدة البيانات.
الكود ديال الملف هو :

                                <div class="row">
    <div class="col-md-12 mx-auto">
        <div class="card bg-danger  shadow-sm text-white rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mx-auto">
                        <h3 class="text-capitalize text-white">Ajouter un contact</h3>
                        <hr>
                        <form action="#" method="post">
                            <div class="form-group">
                                <label for="name">Nom & Prénom</label>
                                <input type="text" name="name" class="form-control" placeholder="Nom & Prénom">
                            </div>
                            <div class="form-group">
                                <label for="tel">Téléphone</label>
                                <input type="text" name="tel" class="form-control" placeholder="Tél">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn bg-danger border-dark text-white">Valider</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                            

4- إضافة route ملف الإضافة

فباش نزيد route ديال الملف add لي كيمكن من إضافة des contacts غادي نزيد route get بنفس الطريقة لي زدنا بها route ديال الصفحة الرئيسية التغيير البسيط هو هنا زدنا add/ وحددنا ل page لي غادي تعرض ف add.
فدبا يكفي باش ندخل ل http://localhost:3000/add باش نحصل هاد النتيجة :




الكود ديال app.js بعد التعديل هو :


                                    var express = require('express')
var app = express()
//import handlebars
var exphbs  = require('express-handlebars');
//set template engine to handlebars
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

//page index
app.get('/', function (req, res) {
    res.render('home');
});
//page add contact
app.get('/add', function (req, res) {
  res.render('add');
});
//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});
                                

4- إضافة route ملف الإضافة للقائمة

آخر حاجة غادي نزيد route لي زدت فالملف navbar باش ملي يكليكي المستخدم على ajouter يتعرض الملف ديال الإضافة.

الكود ديال navbar.handlebars بعد التعديل هو :

                                    <nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  <a class="navbar-brand" href="#">Nodejs Contacts App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="/">Accueil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/add">Ajouter</a>
      </li>
    </ul>
  </div>
</nav>