موقع ب Express js framework الجزء الأول

فهاد الدرس الثاني من سلسلة nodejs غادي نشوفو كيفاش نقادو موقع بسيط بدون التعامل مع قواعد البيانات بإستعمال Express js لي هي web framework ديال node js ولي يلا بغيتي معلومات إضافية تقدر تشوف الموقع ديالهم من هنا هاد الدرس غادي يكون بسيط كبداية باش نفهمو كيفاش نخدمو بل framework فهادي نشوفو فقط كيفاش نقادو des pages statiques.

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


1- تحميل المشروع


فأول حاجة كن installer node js يلا مكانتش déjà installé من هنا الموقع ديالهم منبعد خصني ن installer express فل pc ديالي فكندير la commande suivante ف cmd : 
cd c:\ npm install -g express
من بعد كن installer ل express generator باش كن générer ل framework كندير لكوموند ف cmd :
cd c:\ npm install -g express-generator
منبعد كن installer un nouveau projet express كندير لكوموند cmd :
cd c:\ express express-website 
ف c كيتزاد ل projet ديالي سميتو express-website منبعد فتحو فل ide باش خدام من بعد كنرجع ل cmd كندير commande :
cd c:\ express-website 
منبعد كندير ل commande :
npm install 
هاد الكوموند كتمكني باش ن installer les biblios لي عندي فالملف package.json منبعد كنمشي للملف layout.jade لي كاين فالمجلد views وهنا jade بحال html. و structure ديال express مافيهاش les tags فمثلا يلا بغيت نكتب :
<p class="text">hello world.</p>
هي :
p.text hello world
فهنا الملف layout.jade هو الملف الأساسي لي عندنا فيه روابط css وjs وفيه لقائمة ديالنا فكندير عليه تغييرات باش كنزيد القائمة ديالي والروابط مع bootstrap الكود ديالو هو:

                                    
                                        doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')
  body
    nav.navbar.navbar-default
      .container-fluid
        .navbar-header
          button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1', aria-expanded='false')
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') Express Website
        #bs-example-navbar-collapse-1.collapse.navbar-collapse
          ul.nav.navbar-nav
            li(class=(title == 'Accueil' ? 'active' : '')) 
              a(href='/')
                | Accueil 
                span.sr-only (current)
            li(class=(title == 'Qui sommes-nous?' ? 'active' : '')) 
              a(href='/about') About
            li(class=(title == 'Nous Contactez' ? 'active' : '')) 
              a(href='/contact') Contact
    block content
    footer
       p.text-danger.text-center © DarijaCoding 2017
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
                                    
                                

2- الملف about.js


فباش نزيد ملف كانمشي للمجلد routes تما كنزيد les routes ديالي فكنزيد ملف كنسميه about.js فيه route /about لي غادي يمكنا من الدهاب للملف about.jade لي غادي نزيدوه من بعد فالملف كنعطي لإسم ديال route لي هو about وtitle الكود ديال الملف هو:

                                    
                                        var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('about', { title: 'Qui sommes-nous?' });
});

module.exports = router;
                                    
                                

3- الملف about.jade


هادا الملف لي فيه ل contenu ديال about فيه فقط واحد ل paragraphe فكما قلنا les tags مكاينينش وكنحدد ل contenu ديال كل class فقط ب l'espace فمثلا :
                     p.text 
   h3 hello world
   هي :    
  <p class="text"><h3>hello world.</h3></p>
الكود ديال الملف هو :

                                      
                                        extends layout

block content
  .container
    .jumbotron
        .container
            h1 Qui sommes-nous ?
            p.lead Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur repudiandae praesentium at, dolorum in voluptates dolorem maiores molestias doloribus vel ipsam eius magni illo, esse saepe sunt! Dolore, molestias eligendi?
                                      
                                    

4- الملف contact.js


 كانمشي للمجلد routes فكنزيد ملف كنسميه contact.js فيه route /contact لي غادي يمكنا من الدهاب للملف contact.jade لي غادي نزيدوه من بعد فالملف كنعطي لإسم ديال route لي هو contact وtitle الكود ديال الملف هو:

                                        
                                            var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('contact', { title: 'Nous Contactez' });
});

module.exports = router;
                                        
                                    

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