موقع إصلاح حواسيب ب express js & mysql الجزء الأول

imadbelasri Nodejs
NS

فهاد الدرس الجديد من سلسلة nodejs غادي نصاوبو موقع إصلاح حواسيب ب express js & mysql الموقع بسيط كيقدم الخدمات لي كيدير وفيه واحد ل contact form لي كتمكن المستخدم لي عندو مشكل فشي pc يراسل الموقع بالمشكل لي عندو فيلا ما تبعتيش الدروس السابقة ف express عاود شوفها حيت مغاديش نهضر على les bases ديال express.


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


1- إنشاء قاعدة البيانات

أول حاجة غادي نديرو غادي نزيدو قاعدة بيانات جديدة ف phpmyadmin نسميوها repair-pc فيها table وحدة contact الكود باش تزيد la table فقاعدة البيانات هو :


                                                    
                                                        --
-- Structure de la table `contacts`
--

CREATE TABLE `contacts` (
  `id` int(11) NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `message` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `contacts`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `contacts`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;COMMIT;
                                                    
                                                

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

فأول حاجة كن installer node js يلا مكانتش déjà installé من هنا الموقع ديالهم منبعد خصني ن installer express فل pc ديالي فكندير la commande suivante ف cmd : 
                                                                  cd c:\
منبعد كندير la commande :
 npm install -g express
من بعد كن installer ل express generator باش كن générer ل framework كندير لكوموند ف cmd :
                                                                 cd c:\
منبعد كندير la commande :
npm install -g express-generator
منبعد كن installer un nouveau projet express كندير لكوموند cmd :
cd c:\xampp\htdocs
منبعد كندير la commande :
express repair-pc
ف :c:\xampp\htdocs كيتزاد ل projet ديالي سميتو express-website منبعد فتحو فل ide باش خدام من بعد كنرجع ل cmd كندير commande :
cd c:\xampp\htdocs\repair-pc 
منبعد كندير ل commande :
npm install 
هاد الكوموند كتمكني باش ن installer les biblios لي عندي فالملف package.json منبعد كنمشي للملف layout.pug لي كاين فالمجلد views وهنا pug هي jade لي كانت ف les versions لقدام فهنا الملف layout.pug هو الملف الأساسي لي عندنا فيه روابط 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
        // Brand and toggle get grouped for better mobile display
        .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='#') PC Repair
        // Collect the nav links, forms, and other content for toggling
        #bs-example-navbar-collapse-1.collapse.navbar-collapse
          ul.nav.navbar-nav
            li.active
              a(href='/')
                | Accueil 
                span.sr-only (current)
            li
              a(href='/contact') Contact
            li
              a(href='/messages') Messages
    block content
                                                        
                                                    

3- الملف index.js

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

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

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

module.exports = router;
                                                        
                                                    

4- الملف index.pug

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

                                                        
                                                            extends layout

block content
  div.container
    .jumbotron
       img.thumbnail('src'='images/background.jpg',width="500",height="300")
       h3.text-info Réparer votre pc en 2 minutes.
       p.lead Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore vel, error impedit totam quas consectetur nobis possimus laboriosam nostrum hic quaerat ipsam laborum, libero sapiente blanditiis sed qui, repellendus ducimus.
    div.row
      div.col-md-3
        .well
          h3.text-danger 
            |Ecrans
          hr
          img.thumbnail('src'='images/ecrans.png',width="200",height="100")
          p.lead 
            |Ipsa deserunt molestiae recusandae animi fugit tenetur quae. Cumque, vitae libero consequuntur consequatur sequi qui nobis mollitia obcaecati quia harum unde facilis!
      div.col-md-3
        .well
          h3.text-danger 
            |Carte Mére
          hr
          img.thumbnail('src'='images/carte-mere.jpg',width="200",height="100")
          p.lead 
            |Ipsa deserunt molestiae recusandae animi fugit tenetur quae. Cumque, vitae libero consequuntur consequatur sequi qui nobis mollitia obcaecati quia harum unde facilis!
      div.col-md-3
        .well
          h3.text-danger 
            |Claviers
          hr
          img.thumbnail('src'='images/keyboard.jpg',width="200",height="100")
          p.lead 
            |Ipsa deserunt molestiae recusandae animi fugit tenetur quae. Cumque, vitae libero consequuntur consequatur sequi qui nobis mollitia obcaecati quia harum unde facilis!
      div.col-md-3
        .well
          h3.text-danger 
            |Autres Piéces
          hr
          img.thumbnail('src'='images/pieces.jpg',width="200",height="100")
          p.lead 
            |Ipsa deserunt molestiae recusandae animi fugit tenetur quae. Cumque, vitae libero consequuntur consequatur sequi qui nobis mollitia obcaecati quia harum unde facilis!
    footer
      hr
      p.lead.text-primary.text-center
        |&copy DCoding2017
                                                        
                                                    

5- الملف messages.js

كانمشي للمجلد routes كنزيد فيه ملف جديد سميه messages.js لي فيه الكود لي كيمكن باش نحدد route لي كيدي للملف messages.pug لي غادي نزيدوه منبعد فالمجلد views ولي هو الصفحة لي كيتعرضوا فيها les messages لي جاو للموقع فهنا فهاد الملف كنسترجع les messages لي عندي ف la table contacts و كيترسلو للملف messages.pug الكود ديال الملف هو:

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

/* GET home page. */
router.get('/', function(req, res,next) {
    db.query("SELECT * FROM contacts", function (err, result) {
       if (err) throw err;
       res.render('messages', { title: 'Messages Recus',contacts:result });
    });
});

module.exports = router;