contacts app ب express js الجزء الثاني

imadbelasri Nodejs
NS

فهاد الجزء الثاني من contacts app ب express js غادي نكملو الملفات لي بقاونا ولي غادي يمكنوا من عرض les contacts كاملين فالصفحة الرئيسية و من تنفيد les requêtes لي غادي يمكنوا من إضافة نعديل وحدف contact كما غادي نشوفو كيفاش نعرضوا contact فالفورم باش نديرو عليه التعديل.


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


1- الملف app.js

فالمجلد الرئيسي ديال ل projet ديالنا كانزيد الملف app.js فيه الكود لي كنسترجع به les modules لي غادي نحتاجو منبعد كندير la connexion مع la base de données لي زدنا
منبعد عندي les routes ديالنا فكاين / لي كيمكني باش نسترجع  les contacts من قاعدة البيانات وكنرسلهم للملف index لي غادي يعرضهم فجدول من بعد كاين add/ لي كتدي المستخدم للملف add باش كيزيد contact جديد منبعد كاين contact/add/ لي كيسترجع القيم لي دخل المستخدم فالفورم add ومنبعد كندير l'insertion ف la table contacts ويلا نجحت الإضافة كنرد المستخدم للصفحة الرئيسية منبعد كاين :id/ لي كيرجع contact بل id ديالو للملف update لي غادي يمكن من التعديل ديالو من بعد عندنا contact/update/:id/ لي كيدير التعديل ديال contact اختارو المستخدم منبعد كاين  contact/delete/:id/  لي كيمسح contact اختارو المستخدم الكود ديال الملف هو :

                                                    
                                                        var express = require("express");
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('mysql');
//port 
const port = 3000;

//app init
const app = new express();
//connect to database
var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'root',
    password : '',
    database : 'express-contacts'
});
//set connection
connection.connect();

//use body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.use(express.static(path.join(__dirname,'public')));

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

//get index page
app.get('/', (req, res) => {
    var query = "SELECT * FROM contacts";
    connection.query(query,function(error,contacts){
        if(error)
            {
                throw error;
            }
        else 
            {
                res.render('index', {contacts:contacts});
            }
        
    });
});
//get add contact form
app.get('/add', (req, res) => {
    res.render('add');
});
//add contact 
app.post('/contact/add', (req, res) => {
    var query = "insert into contacts(nom,prenom,tel) values('"+req.body.nom+"','"+req.body.prenom+"','"+req.body.tel+"')";
    connection.query(query,function(error){
        if(error)
            {
                throw error;
            }
        else 
            {
                res.redirect('/');
            }
        
    });
});
//edit form contact 
app.get('/:id', (req, res) => {
    var query = "select * from contacts where id='"+req.params.id+"'";
    connection.query(query,function(error,user){
        if(error)
            {
                throw error;
            }
        else 
            {
                res.render('update',{user:user[0]});
                console.log(user);
            }
        
    });
});
//update contact 
app.post('/contact/update/:id', (req, res) => {
    var query = "update contacts set nom='"+req.body.nom+"',prenom='"+req.body.prenom+"',tel='"+req.body.tel+"' where id='"+req.params.id+"'";
    connection.query(query,function(error){
        if(error)
            {
                throw error;
            }
        else 
            {
                res.redirect('/');
            }
        
    });
});
//delete contact 
app.delete('/contact/delete/:id', (req, res) => {
    var query = "DELETE FROM contacts where id='"+req.params.id+"'";
    connection.query(query,function(error){
        if(error)
            {
                throw error;
            }
        else 
            {
                res.send(200);
            }
        
    });
});
//start sever 
app.listen(port, () => {
    console.log(`Server started on port` + port);
});
                                                    
                                                

2- الملف views/add.ejs

فالمجلد views زيد ملف جديد سميه update.ejs فيه كندير include لل header ول footer منبعد كاين الفورم لي كتمكن من تعديل contact فالمعلومات الجديدة لي كيدخل المستخدم كتمشي ل 
route :
contact/update/:id/
ولي شفناه فالملف app.js الكود ديال الملف هو :

                                                        
                                                            <% include ../views/includes/header.ejs %>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h3>Modifier un contact</h3>
            <hr>
            <form action="/contact/update/<%= user.id%>" method="post">
                <div class="form-group">
                        <label for="nom">Nom</label>
                        <input type="text" class="form-control" name="nom" value="<%= user.nom%>">
                    </div>
                    <div class="form-group">
                        <label for="nom">Prénom</label>
                        <input type="text" class="form-control" name="prenom" value="<%= user.prenom%>">
                    </div>
                    <div class="form-group">
                        <label for="nom">Téléphone</label>
                        <input type="tel" class="form-control" name="tel" value="<%= user.tel%>">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success" type="submit">Modifier</button>
                    </div>
            </form>
        </div>
    </div>
</div>
<% include ../views/includes/footer.ejs %>
                                                        
                                                    

3- الملف views/index.ejs

فالمجلد views كنزيد ملف جديد سميه index.ejs فيه كنستقبل les contacts لي جاوني من route / فل variable contacts ولي منبعد مكنستقبلهم كنخدم ب forEach لي كتمكني من عرضهم فالجدول بالإضافة لروابط الإضافة التعديل والحدف الكود ديال الملف هو:

                                                        
                                                            <% include ../views/includes/header.ejs %>
<div class="container">
    <div class="row" style="margin-top:10px">
        <div class="col-md-12">
            <h3>Contacts</h3>
            <table class="table">
                <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Tél</th>
                    <th>Action</th>
                </tr>
                <% contacts.forEach(function(contact){%>
                    <tr>
                        <td>
                            <%= contact.nom%>
                        </td>
                        <td><%= contact.prenom%></td>
                        <td><%= contact.tel%></td>
                        <td>
                            <a href="#" data-id="<%= contact.id%>" class="btn btn-danger contacts-delete btn-xs">Supprimer</a>
                            <a href="/<%= contact.id%>" class="btn btn-warning btn-xs">Modifier</a>
                            <a href="/add" class="btn btn-primary btn-xs">Ajouter</a>
                        </td>
                    </tr>
                <% })%>
            </table>
        </div>
    </div>
</div>
<% include ../views/includes/footer.ejs %>
                                                        
                                                    

4- الملف js/script.js

فالمجلد الرئيسي كنزيد مجلد جديد كنسميه public فيه كنزيد مجلد جديد كنسميه js فيه زيد ملف جديد سميه script.js فيه الكود jquery لي كيمكن من حدف contact فهنا كنسترجع الرابط ديال la suppression ولي عطينو la classe contacts-delete فملي كيكليكي عليه المستخدم كنسترجع ل id ديال ل contact بل attribut data-id لي عطيناه منبعد ب ajax كنرسل ل id ل route /contact/delete/:id لي déjà شفناه ف app.js  الكود ديال الملف هو:

                                                        
                                                            $(document).ready(function(e){
    $('.contacts-delete').on('click',function(){
        var id = $(this).attr('data-id');
        $.ajax({
            type:'DELETE',
            url:'/contact/delete/'+id,
            success : function(response){
                alert('contact supprimé');
                window.location.href='/';
            },
            error : function(error){
                alert(error);
            }
        });
    });
});
                                                        
                                                    

دروس ذات صلة

NS

كيفاش تصاوب serveur ب nodeJs

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


NS

موقع ب Express js framework الجزء الأول

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


NS

موقع ب Express js framework الجزء الثاني

فهاد الجزء الثاني من موقع ب Express js framework غادي نكملو الملفات لي بقاو ولي فيهم الصفحة الر...


NS

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

فهاد الدرس الجديد من سلسلة nodejs غادي نصاوبو موقع إصلاح حواسيب ب express js & mysql الموقع بسيط كيق...


NS

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

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


NS

contacts app ب express js الجزء الأول

فهاد الدرس الجديد من سلسلة nodejs غادي نشوفو كيفاش نقادو une simple contacts app ب express js الدرس...


NS

contacts app ب express js الجزء الثاني

فهاد الجزء الثاني من contacts app ب express js غادي نكملو الملفات لي بقاونا ولي غادي يمكنوا من عرض l...


NS

Mern stack from scratch الجزء الأول

فهاد الدورة الجديدة لي غادي نخصصوها ل Mern Stack لي كتعني Mongodb Express React Nodejs مجموعين ف pro...


NS

Mern stack from scratch الجزء الثاني

فهاد الجزء الثاني من Mern stack from scratch غادي نزيدو les routes ديالنا من بعد غادي ندوزوا ل front...


NS

Mern stack from scratch الجزء الثالت

فهاد الجزء الثالت من Mern stack from scratch الخاص ب notes app غادي نسترجعوا les notes كاملين و...