دورة nodejs للمبتدئين الدرس الرابع عشر
1- إضافة contact لقاعدة البيانات
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) {
res.render('home');
});
//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('/');
});
});
//create server
app.listen(3000, function () {
console.log('server started at port 3000')
});
2- عرض les contacts فالصفحة الرئيسية
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('/');
});
});
//create server
app.listen(3000, function () {
console.log('server started at port 3000')
});
3- عرض les contacts فالصفحة الرئيسية تتمة
<div class="row">
<div class="col-md-12">
<div class="card bg-danger shadow-sm text-white rounded-0">
<div class="card-body">
<table class="table table-hover">
<thead>
<td>Nom & Prénom</td>
<td>Tél</td>
<td>Action</td>
</thead>
<tbody>
{{#each contacts}}
<tr>
<td>{{nom}}</td>
<td>{{tel}}</td>
<td>
<a href="/contact/edit/{{id}}" class="btn btn-sm text-white"><i class="fa fa-edit"></i></a>
<a href="#" class="btn btn-sm text-white"><i class="fa fa-trash"></i></a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</div>
4- كيفاش ندير تعديل contact
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]});
});
});
//create server
app.listen(3000, function () {
console.log('server started at port 3000')
});