موقع إصلاح حواسيب ب express js & mysql الجزء الثاني
imadbelasri
Nodejs
NS
فهاد الجزء الثاني من موقع إصلاح حواسيب ب express js & mysql غادي نكملو الملفات لي غادي يمكنوا المستخدم باش يرسل رسالة للموقع ديالنا فهنا غادي نشوفو كيفاش نزيدو mysql للمشروع ديالنا وكيفاش نزيدو المعلومات فقاعدة البيانات.
نظرة سريعة بالفيديو
1- الملف contacts.js
كانمشي للمجلد routes فكنزيد ملف كنسميه contacts.js لي غادي يمكنا من الدهاب للملف contact.pug لي غادي نزيدوه من بعد فالملف كنعطي لإسم ديال view لي هو contact وtitle الكود ديال الملف هو:
var express = require('express');
var router = express.Router();
/* GET contact page. */
router.get('/', function(req, res) {
res.render('contact', { title: 'Nous Contacter'});
});
module.exports = router;
2- الملف contact.pug
فالمجلد views كنزيد ملف جديد سميه contact.pug فيه كاين واحد الفورم لي زدناها ب structure express ولي كتمكن المستخدم من إرسال رسالة للموقع ديالنا فالمعلومات كيمشيو ل route /send وملي كتزاد كنعرضوا رسالة نجاح ولي غادي نشوفوه من بعد الكود ديال الملف هو:
extends layout
block content
div.container
div.row
div.col-md-6.col-md-offset-3
h2.text-primary Contact
hr
- if (message)
div.alert.alert-success=message
form(method="post",action="/send")
div.form-group
label Nom & Prénom*
input.form-control(name="nom",placeholder="Entrer votre nom")
div.form-group
label Email*
input.form-control(name="email",placeholder="Entrer votre email")
div.form-group
label Message*
textarea.form-control(name="message",cols="30", rows="10",placeholder="Entrer votre message")
div.form-group
button.btn.btn-success(type="submit") Envoyer
footer
hr
p.lead.text-primary.text-center
|© DCoding2017
3- الملف app.js
فالمجلد الرئيسي ديال ل projet كاين الملف app.js فيه الكود لي كنسترجع به les routes لي حددنا index,contacts,messages منبعد كندير la connexion مع la base de données لي زدنا
فباش نزيد mysql لل projet ديالنا كنديرla commande :
cd c:\xampp\htdocs\repair-pc
منبعد:
npm install mysql
منبعد كن importer mysql ب:
var mysql = require('mysql');
منبعد كاين app.use باش كنستخدم هاد les routes لي زدنا فكنعطي الرابط والإسم ديال route منبعد عندي route /send لي كيمكني باش نسترجع القيم لي دخل المستخدم فالفورم contact ومنبعد كندير l'insertion ف la table contacts ويلا نجحت الإضافة كنرد المستخدم للصفحة contact وكنعرض رسالة النجاح والبقية فيها الكود لي كيدير la gestion des erreurs الكود ديال الملف هو :
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var contacts = require('./routes/contacts');
var messages = require('./routes/messages');
var mysql = require('mysql');
//connect to database
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'repair-pc'
});
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/contact', contacts);
app.use('/messages', messages);
//set connection
connection.connect();
global.db = connection;
//insert data
app.post('/send', function(req,res){
var query = "insert into contacts(name,email,message) values('"+req.body.nom+"','"+req.body.email+"','"+req.body.message+"')";
connection.query(query,function(error,results){
if(error)
{
throw error;
}
else
{
res.render('contact', { message: 'Message envoyé avec succés' });
}
});
});
//connection.destroy();
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
4- الملف messages.pug
فالمجلد views كنزيد ملف جديد سميه messages.pug فيه كنستقبل les messages لي جاوني من الملف messages.js فل variable contacts ولي منبعد مكنستقبلهم كنخدم ب each لي كتمكني من عرضهم فالجدول الكود ديال الملف هو:
extends layout
block content
div.container
div.row
div.col-md-12
h3.text-info
|Messages Recus
hr
table.table
thead
tr
th
|Nom & Prénom
th
|Email
th
|Message
each contact, i in contacts
tr
td=contact.name
td=contact.email
td=contact.message
footer
hr
p.lead.text-primary.text-center
|© DCoding2017
5- الملف style.css
فالمجلد public/stylesheets كنزيد ملف كنسميه style.css فيه des styles css غادي نحتاجوهم الكود ديال الملف هو :
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}