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


فهاد الدرس الحادي عشر من دورة nodejs للمبتدئين غادي نكملو الإضافة ديال الصفحات ديالنا من بعد ما زدنا الصفحة الرئيسية فالجزء السابق.
فهاد الجزء غادي نزيدو صفحات اخرى وغادي  نحولوا ما تبقى من دروس ل application لي غادي تكون عبارة عن contacts app لي كتمكن من إضافة des contacts لقاعدة البيانات تعديلهم وايضا حذفهم.


1- تعديل الملف main.handlebars

فقبل ما نزيدو تعديلات على الملف main.handlebars غادي نديرو واحد التعديل فيلا لاحضتي كل مرة كنبغي نزيد شي حاجة فل app ديالي ضروري ما خصني نعاود ن executer le fichier app.js باش نشوف شنو زدت.
باش نحلو هاد الإشكال غادي ن installer واحد ل package سميتو nodemon ولي غادي يمكن باش نشوف اي تعديل زدتو فقط كندير تحديث للصفحة.
فباش ن installer nodemon كندير هاد الكوموند كيف شفنا قبل ف cmd :
npm install nodemon 
منبعد ما يتزاد غادي ن executer le fichier app.js عوض node لي كنا كنديرو قبل غادي نديرو nodemon كيف فالصورة :


فدبا يكفي باش ندير تحديث للصفحة باش نشوف اي حاجة زدتها.
منبعد غادي نمشي ل main.handlebars غادي نزيد روابط css وjs هنا خدمت ب bootstrap يلا مكنتيش كتعرف شنو هو شوف الدورة ديال المبتدئين ف bootstrap.
الكود لي زدنا هو :

                                <!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">
        {{{body}}}
    </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>
                            

2- إضافة القائمة

فباش نزيد القائمة لل app ديالي غادي نزيد dossier ف views سميه partials فهاد الإسم ضروري ما تزيدو هو باش ل app كتعرف بلي الملفات لي فيه غادي نديرولهم ل include.
منبعد ف partials زيد ملف جديد سميه navbar.handlebars فيه غادي تكون القائمة ديالنا.
ف structure غادي تكون على هاد الشكل :


فقلنا الملف غادي تكون فيه القائمة لي الكود ديالها هو هذا :

                                <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="#">Ajouter</a>
      </li>
    </ul>
  </div>
</nav>
                            

3- عرض القائمة في الصفحة الرئيسية

فباش نعرض القائمة فالصفحة الرئيسية غادي نرجع للملف main.handlebars وفوق {{{body}}} غادي نزيد لملف
navbar.handlebars بهذه الطريقة :
{{> navbar}}
ولي كتعني قلب على الملف ف partials وزيدو فملي غادي نزيدو الملف ونديرو تحديث للصفحة غادي نحصلو على هاد النتيجة :


 فالكود بعد التعديل هو :

                                <!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}}}
    </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>
                            

4- عرض جدول المستخدمين في الصفحة الرئيسية

فباش نعرض المستخدمين لي غادي نزيد من بعد فقاعدة البيانات غادي نزيد واحد table فالملف home.handlebars ولي غادي يكون فيها معلومات statique في انتظار ما نزيدو المعلومات الحقيقية فقاعدة البيانات.
الكود ديال الملف هو :

                                    <div class="row">
    <div class="col-md-12">
        <div class="card bg-danger  shadow-sm text-white rounded-0">
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <td>Nom & Prénom</td>
                        <td>Tél</td>
                        <td>Action</td>
                    </thead>
                    <tbody>
                        <td>Samadi samir</td>
                        <td>07889989</td>
                        <td>
                            <a href="#" class="btn btn-sm text-white"><i class="fa fa-edit"></i></a>
                            <a href="#" class="btn btn-sm text-white"><i class="fa fa-trash"></i></a>
                        </td>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>