موقع ب Express js framework الجزء الثاني

فهاد الجزء الثاني من موقع ب Express js framework غادي نكملو الملفات لي بقاو ولي فيهم الصفحة الرئيسية والملف contact لي غادي تكون فيه ل form فغادي نشوفو كيفاش نقادو لفورم ب express js وغادي نشوفو كيفاش نزيدو هاد les routes ونستعملوهم فالملف app.js وبالتالي فل application ديالنا.

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


1- الملف contact.jade


فالمجلد views كنزيد ملف جديد سميه contact.jade فيه كاين واحد الفورم بسيطة لي زدناها ب structure express ولي وكترسلش المعلومات فقاعدة البيانات هادشي غادي نشوفوه ف des projets منبعد هنا فقط un formulaire de contact statique الكود ديال الملف هو:

                                    
                                        extends layout

block content
  .container
    .row
       .col-md-6.col-md-offset-3
          h3.text-info Contact
          form
             div.form-group
                label Nom*
                input.form-control(type="text",placeholder="Entrez votre nom")
             div.form-group
                label Prénom*
                input.form-control(type="text",placeholder="Entrez votre prénom")
             div.form-group
                label Email*
                input.form-control(type="email",placeholder="Entrez votre email")
             div.form-group
                label Message*
                textarea.form-control(cols="30",rows="5",placeholder="Entrez votre message")
             div.form-group
                button.btn.btn-success(type="submit") Valider
                                    
                                

2- الملف index.js


 كانمشي للمجلد routes فيه الملف index.js لي فيه الكود لي كيمكن باش نحدد route لي كيدي للملف index.jade لي كاين فالمجلد views ولي هو الصفحة الرئيسية ديالنا الكود ديال الملف هو:

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

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

module.exports = router;
                                    
                                

3- الملف index.jade


فالمجلد views كاين الملف index.jade لي هو الملف ديال الصفحة الرئيسية كنزيد فيه الكود لي عبارة عن des paragraphes و des liens الكود ديال الملف هو:

                                      
                                        extends layout

block content
  .container
    h1= title
    p page #{title}
    .jumbotron
        .container
            h1 Bienvenue à notre express site.
            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?
    .row
      .col-md-4.panel
        h3.text-info.text-left Informatique
        p.lead Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque earum minima praesentium eos aliquid, est culpa dolorem suscipit ipsum sapiente et non adipisci accusamus officiis, veritatis possimus, eum id libero!
        a.btn-link(href='#') voir
      .col-md-4.panel
        h3.text-info.text-left Sport
        p.lead Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque earum minima praesentium eos aliquid, est culpa dolorem suscipit ipsum sapiente et non adipisci accusamus officiis, veritatis possimus, eum id libero!
        a.btn-link(href='#') voir
      .col-md-4.panel
        h3.text-info.text-left Transport
        p.lead Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque earum minima praesentium eos aliquid, est culpa dolorem suscipit ipsum sapiente et non adipisci accusamus officiis, veritatis possimus, eum id libero!
        a.btn-link(href='#') voir
                                      
                                    

4- الملف app.js


فالمجلد الرئيسي ديال ل projet كاين الملف app.js فيه الكود لي كنسترجع به les routes لي حددنا index,contact,about منبعد كندير app.use باش كنستخدم هاد les routes لي زدنا فكنعطي الرابط والإسم ديال route والبقية فيها الكود لي كيدير la gestion des erreurs ولبقية كي récupérer les differents composants لي كتحتاج express الكود ديال الملف هو :

                                        
                                            var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');


var index = require('./routes/index');
var about = require('./routes/about');
var contact = require('./routes/contact');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/about', about);
app.use('/contact', contact);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;
                                        
                                    

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