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


فهاد الجزء الثاني من 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);
            }
        });
    });
});
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد