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


فهاد الجزء الثاني من موقع إصلاح حواسيب ب express js & mysql غادي نكملو الملفات لي غادي يمكنوا المستخدم باش يرسل رسالة للموقع ديالنا فهنا غادي نشوفو كيفاش نزيدو mysql للمشروع ديالنا وكيفاش نزيدو المعلومات فقاعدة البيانات. 

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

1- الملف contacts.js

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

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

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


module.exports = router;
                            

2- الملف contact.pug

فالمجلد views كنزيد ملف جديد سميه contact.pug فيه كاين واحد الفورم لي زدناها ب structure express ولي كتمكن المستخدم من إرسال رسالة للموقع ديالنا فالمعلومات كيمشيو ل route /send وملي كتزاد كنعرضوا رسالة نجاح ولي غادي نشوفوه من بعد الكود ديال الملف هو:

                                extends layout

block content
  div.container
    div.row
      div.col-md-6.col-md-offset-3
        h2.text-primary Contact
        hr
        - if (message)
          div.alert.alert-success=message
        form(method="post",action="/send")
          div.form-group
            label Nom & Prénom* 
            input.form-control(name="nom",placeholder="Entrer votre nom")
          div.form-group
            label Email* 
            input.form-control(name="email",placeholder="Entrer votre email")
          div.form-group
            label Message* 
            textarea.form-control(name="message",cols="30", rows="10",placeholder="Entrer votre message")
          div.form-group
            button.btn.btn-success(type="submit") Envoyer
    footer
      hr
      p.lead.text-primary.text-center
        |&copy DCoding2017
                            

3- الملف app.js

فالمجلد الرئيسي ديال ل projet كاين الملف app.js فيه الكود لي كنسترجع به les routes لي حددنا index,contacts,messages منبعد كندير la connexion مع la base de données لي زدنا
فباش نزيد mysql لل projet ديالنا كنديرla commande :
cd c:\xampp\htdocs\repair-pc
منبعد:
 npm install mysql
منبعد كن importer mysql ب:
    var mysql = require('mysql');

منبعد كاين app.use باش كنستخدم هاد les routes لي زدنا فكنعطي الرابط والإسم ديال route منبعد عندي route /send لي كيمكني باش نسترجع  القيم لي دخل المستخدم فالفورم contact ومنبعد كندير l'insertion ف la table contacts ويلا نجحت الإضافة كنرد المستخدم للصفحة contact وكنعرض رسالة النجاح والبقية فيها الكود لي كيدير la gestion des erreurs الكود ديال الملف هو :

                                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 index = require('./routes/index');
var contacts = require('./routes/contacts');
var messages = require('./routes/messages');
var mysql      = require('mysql');
//connect to database
var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'repair-pc'
});

var app = express();

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

// 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('/contact', contacts);
app.use('/messages', messages);
//set connection
connection.connect();
global.db = connection;
//insert data 
app.post('/send', function(req,res){
       var query = "insert into contacts(name,email,message) values('"+req.body.nom+"','"+req.body.email+"','"+req.body.message+"')";
       connection.query(query,function(error,results){
           if(error)
               {
                   throw error;
               }
           else 
               {
                   res.render('contact', { message: 'Message envoyé avec succés' });
               }
           
       });
});
//connection.destroy();
// 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;
                            

4- الملف messages.pug

فالمجلد views كنزيد ملف جديد سميه messages.pug فيه كنستقبل les messages لي جاوني من الملف messages.js فل variable contacts ولي منبعد مكنستقبلهم كنخدم ب each لي كتمكني من عرضهم فالجدول الكود ديال الملف هو:

                                    extends layout

block content
  div.container
    div.row
      div.col-md-12 
        h3.text-info 
            |Messages Recus
        hr
        table.table
          thead
            tr
              th
                |Nom & Prénom
              th
                |Email
              th
                |Message 
            each contact, i in contacts
              tr
                td=contact.name
                td=contact.email
                td=contact.message 
    footer
      hr
      p.lead.text-primary.text-center
        |&copy DCoding2017
                                

5- الملف style.css

فالمجلد public/stylesheets كنزيد ملف كنسميه style.css فيه des styles css غادي نحتاجوهم الكود ديال الملف هو : 

                                    body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00B7FF;
}
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد