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


فهاد الدرس العاشر من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا وغادي نشوفوا كيفاش نزيدو des pages لي حقيقيين عوض الطريقة لي استعملنا فالدرس السابق ولي كانت عبارة عن texte.
فباش نزيدو les pages غادي نستعملو واحد ل package لي سميتو handlebars ولي كيمكن باش نزيدو des pages html ل des apps nodejs.


1- إضافة handlebars ل app nodejs

فباش نزيد ل handlebars لل application ديالي غادي ن exécuter واحد ل commande ولي هي : 

npm install express-handlebars

منبعد ملي يسالي ل installation غادي تزيد ف dossier ديال ل projet ديالك dossier سميه views فيه زيد fichier سميه home.handlebars.
وداخل دائما ل views زيد dossier سميه layouts فيه زيد fichier سميه main.handlebars كيف كتشوف فالصورة :



منبعد  ف app.js كنسترجع ل handlebars باش نخدم بها وكنزيد الكود لي كنحدد فيه بلي غادي نخدم بل handlebars وكنحدد الصفحة الرئيسية ف main لي زدناها ف dossier layouts الكود لي زدنا هو :

                                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');

//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});
                            

2- إضافة كود الملف main

فالملف main غادي يكون هو الصفحة لي فيها روابط css و js ولي غادي يخدموا بها جميع الصفحات لي غادي نزيدو من بعد وفيه كنحدد فين غادي يتعرض لمحتوى ديال الصفحات الأخرى بالكود {{{body}}}
الكود ديال الملف هو :

                                <!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">
    <title>Node js course</title>
</head>
<body>
    {{{body}}}
</body>
</html>
                            

3- إضافة كود الملف home

فالملف home هو الملف الرئيسي ديالنا ولي هو الصفحة لي غادي تعرض أول ما ن executer le fichier فهنا زدنا فقط واحد texte للتجريب فيه bonjour منبعد غادي نزيدو كود أخر.

الكود لي زدنا هو :

                                <h1>Bonjour</h1>
                            

4- عرض الصفحة الرئيسية

فباش نعرض الصفحة الرئيسية كنزيد لكود ف app.js لي كنحدد فيه route كيف شفنا قبل ب / منبعد عكس ماشفنا فالدرس السابق خدمنا ب res.send باش عرضنا texte هنا كنخدم ب res.render لي هي ديال handlebars وكنعطي اسم الصفحة لي غادي تعرض وهنا حددناها ف home.
منبعد مكن executer le fichier 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');
});

//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});