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

منذ 5 سنوات imadbelasri Nodejs
NS

فهاد الدرس الخامس عشر من دورة 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')
});
                                                        
                                                    

دروس ذات صلة

NS

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

فهاد الدرس الأول من دورة nodejs للمبتدئين غادي نشوفوا شنو هي node js لي كتمكنا باش نخدمو ب...


NS

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

فهاد الدرس الثاني من دورة nodejs للمبتدئين غادي نشوفوا كيفاش نتعاملو مع الملفات.غادي نشوفوا كي...


NS

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

فهاد الدرس الثالت من دورة node js غادي نشوفوا كيفاش نزيدو des pages ف serveur ديالنا لي زدنا منبعد غ...


NS

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

فهاد الدرس السادس من دورة node js للمبتدئين غادي نكملو الدورة ديالنا منبعد ما شفنا كيفاش زدنا قاعدة...


NS

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

فهاد الدرس السابع من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا دبا كيفاش نسترجعوا ا...


NS

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

فهاد الدرس الثامن من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا منبعد مشفنا كيفاش نست...


NS

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

فهاد الدرس التاسع لي غادي يكون مقدمة بسيطة على واحد ل framework js لي هي express js ولي كنخدمو بها م...


NS

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

فهاد الدرس العاشر من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا وغادي نشوفوا كيفاش نزيدو des pag...


NS

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

فهاد الدرس الحادي عشر من دورة nodejs للمبتدئين غادي نكملو الإضافة ديال الصفحات ديالنا من بعد ما زدنا...


NS

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

فهاد  الدرس الثاني عشر من دورة nodejs للمبتدئين غادي نكملوا ل projet ديالنا غادي نزيدو la page لي غا...