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


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