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

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

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


1- عرض contact فالفورم قبل التعديل

فالجزء السابق شفنا كيفاش استرجعنا contact لي غادي نعدلو وباش نعدلوه غادي نزيدو fichier جديد ف views نسميوه update.handlebars فيه فورم التعديل  فكن afficher المعلومات الخاصين بل contact فالفورم.
وكنزيد ل url فين غادي تمشي les données ولي هو نفس route لي درنا قبل فقط غادي نغيروه من get ل post.
فدبا يلا ضغطت على ل icone ديال modifier ديال شي contact غادي نحصل على هاد النتيجة :



الكود ديال update.handlebars هو :

                                                    
                                                        <div class="row">
    <div class="col-md-12 mx-auto">
        <div class="card bg-danger  shadow-sm text-white rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mx-auto">
                        <h3 class="text-capitalize text-white">Modifier un contact</h3>
                        <hr>
                        <form action="/contact/edit/{{contact.id}}" method="post">
                            <div class="form-group">
                                <label for="name">Nom & Prénom</label>
                                <input type="text" name="name" class="form-control" value="{{contact.nom}}" placeholder="Nom & Prénom">
                            </div>
                            <div class="form-group">
                                <label for="tel">Téléphone</label>
                                <input type="text" name="tel" class="form-control" value="{{contact.tel}}" placeholder="Tél">
                            </div>
                            <div class="form-group">
                                <button type="submit" class="btn bg-danger border-dark text-white">Valider</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
                                                    
                                                

2- تعديل contact

فاش ندخل المعلومات فالفورم خصني نكليكي على valider لي غادي ترسل المعلومات ل route لي غادي نزيدوه ف app.js  ولي هو نفس route لي زدنا ف edit فقط كنغير من get ل post حيت هنا غادي نصيفطو les données ل la base.

فكنزيد route منبعد كنزيد la requête لي غادي تمكن من تعديل ال contact باستعمال ل id ديالو من بعد غادي نوجه المستخدم للصفحة الرئيسية.

الكود ديال 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]});            
    });
});
//update contact
app.post('/contact/edit/:id', function (req, res) {
    var sql = "UPDATE contacts SET nom = '"+req.body.name+"',tel = '"+req.body.tel+"' where id = '"+req.params.id+"' ";
    con.query(sql, function (err) {
        if (err) throw err;
        res.redirect('/');   
    });
});

//create server
app.listen(3000, function () {
  console.log('server started at port 3000')
});
                                                        
                                                    

3- حدف contact من قاعدة البيانات

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

ف app.js كنزيد route لي غادي يستقبل ل id ديال ل contact منبعد كن executer la requête لي غادي تمسح ل contact بل id ديالو من قاعدة البيانات ومنبعد كنوجه المستخدم للصفحة الرئيسية.

 الكود ديال 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]});            
    });
});
//update contact
app.post('/contact/edit/:id', function (req, res) {
    var sql = "UPDATE contacts SET nom = '"+req.body.name+"',tel = '"+req.body.tel+"' where id = '"+req.params.id+"' ";
    con.query(sql, function (err) {
        if (err) throw err;
        res.redirect('/');   
    });
});
//delete contact
app.get('/contact/delete/:id', function (req, res) {
    var sql = "DELETE from contacts where id = '"+req.params.id+"' ";
    con.query(sql, function (err) {
        if (err) throw err;
        res.redirect('/');   
    });
});
//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 لي غا...