contacts app ب express js الجزء الثاني
نظرة سريعة بالفيديو
1- الملف app.js
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
<% 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
<% 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
$(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);
}
});
});
});