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


فهاد الدرس الخامس عشر من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا غادي نزيدو contact فقاعدة البيانات منبعد غادي نشوفوا كيفاش نعرضوا les contacts كاملين فالصفحة الرئيسية من بعد غادي نشوفوا كيفاش نسترجعوا contact قبل التعديل ديالو.


1- إضافة contact لقاعدة البيانات

من بعد ما شفنا كيفاش استرجعنا القيم لي دخل المستخدم فالفورم add كنرجع ل route add ف post ماشي get كندير la requête d'insertion ف la table contacts ويلا نجحت الإضافة كنرد المستخدم للصفحة الرئيسية.
الكود ديال app.js بعد التعديل :

                                var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('mysql');
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');
//use body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname,'public')));
// etablir la connexion
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database : "contacts"
});
con.connect(function(err) {
  if (err) throw err;
  console.log("Connecté");
});
//page index
app.get('/', function (req, res) {
    res.render('home');          
});
//page add contact
app.get('/add', function (req, res) {
  res.render('add');
});
//get form data 
app.post('/add', function (req, res) {
  //add data to database
  var query = "insert into contacts(nom,tel) values('"+req.body.name+"','"+req.body.tel+"')";
    con.query(query,function(error){
        if(error) throw error;
        res.redirect('/');   
    });
});
//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});
                            

2- عرض les contacts فالصفحة الرئيسية

ف route / لي هو الصفحة الرئيسية كنزيد la requête sql لي  كتمكني باش نسترجع  les contacts من قاعدة البيانات وكنرسلهم للملف home لي غادي يعرضهم فجدول.

الكود ديال app.js بعد التعديل هو :

                                var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('mysql');
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');
//use body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname,'public')));
// etablir la connexion
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database : "contacts"
});
con.connect(function(err) {
  if (err) throw err;
  console.log("Connecté");
});
//page index
app.get('/', function (req, res) {
    var query = "SELECT * FROM contacts";
    con.query(query,function(error,contacts){
        if(error)throw error;
        res.render('home', {contacts:contacts});          
    });
});
//page add contact
app.get('/add', function (req, res) {
  res.render('add');
});
//get form data 
app.post('/add', function (req, res) {
  //add data to database
  var query = "insert into contacts(nom,tel) values('"+req.body.name+"','"+req.body.tel+"')";
    con.query(query,function(error){
        if(error) throw error;
        res.redirect('/');   
    });
});
//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});
                            

3- عرض les contacts فالصفحة الرئيسية تتمة

كنمشي ل home.handlebars كنستقبل les contacts لي جاوني من route / فل variable contacts.

ولي منبعد مكنستقبلهم كنخدم ب each# لي هي المقابل ديال foreach ف php و لي كتمكني من عرضهم فالجدول بالإضافة لروابط التعديل والحذف. 

فيلا درنا executer le fichier app.js غادي نحصلو على هاد النتيجة :


 فهنا عندي اكثر من contact حيت زدت بزاف.

الكود ديال home.handlebars بعد التعديل هو :

                                <div class="row">
    <div class="col-md-12">
        <div class="card bg-danger  shadow-sm text-white rounded-0">
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <td>Nom & Prénom</td>
                        <td>Tél</td>
                        <td>Action</td>
                    </thead>
                    <tbody>
                        {{#each contacts}}
                        <tr>
                            <td>{{nom}}</td>
                            <td>{{tel}}</td>
                            <td>
                                <a href="/contact/edit/{{id}}" class="btn btn-sm text-white"><i class="fa fa-edit"></i></a>
                                <a href="#" class="btn btn-sm text-white"><i class="fa fa-trash"></i></a>
                            </td>
                        </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
                            

4- كيفاش ندير تعديل contact

فالصفحة الرئيسية عندنا الرابط ديال التعديل لي ملي كنضغط عليه كيوجهني لل route /contact/edit/contact-id ولي كيمكني باش نسترجع ل contact بل id ديالو ولي منبعد كنرسلوه للملف update لي غادي نزيدوه من بعد ولي غادي تكون فيه فورم التعديل فغادي نزيدو route ف app.js.
الكود ديال app.js بعد التعديل هو :

                                    var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('mysql');
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');
//use body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname,'public')));
// etablir la connexion
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database : "contacts"
});
con.connect(function(err) {
  if (err) throw err;
  console.log("Connecté");
});
//page index
app.get('/', function (req, res) {
    var query = "SELECT * FROM contacts";
    con.query(query,function(error,contacts){
        if(error)throw error;
        res.render('home', {contacts:contacts});          
    });
});
//page add contact
app.get('/add', function (req, res) {
  res.render('add');
});
//get form data 
app.post('/add', function (req, res) {
  //add data to database
  var query = "insert into contacts(nom,tel) values('"+req.body.name+"','"+req.body.tel+"')";
    con.query(query,function(error){
        if(error) throw error;
        res.redirect('/');   
    });
});
//show edit form with data 
app.get('/contact/edit/:id', function (req, res) {
    //get  contact from database
    var query = "select * from contacts where id = '"+req.params.id+"'";
    con.query(query,function(error,contact){
        if(error) throw error;
        res.render('update', {contact:contact[0]});            
    });
});
//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});