LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 1
MC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
Biết cách t chc code v i mô hình MVC
Xây d c model ựng đượ
Xây d ng t t controller
Cài t sequelize đặ
PHN I
Bài 1 (2 điểm)
Tổ chức website sách theo mô hình MVC
1. T c controller product ch
const products = [];
exports.
getAddP
getAddP
getAddP
getAddPgetAddP
roduct
roduct
roduct
roductroduct = (req, res, next) => {
res.
render
render
render
renderrender('add-product', {
pageTitle: 'Add Product',
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 2
path: '/admin/add-product',
activeAddProduct: true
});
};
exports.
postAddP
postAddP
postAddP
postAddPpostAddP
roduct
roduct
roduct
roductroduct = ( ,req res, next) => {
products.
push
push
push
pushpush({ title: req.body.title });
res. '
redirect
redirect
redirect
redirectredirect( /' ;)
};
exports. =
getProducts
getProducts
getProducts
getProductsgetProducts (req, res, next) => {
res.
render
render
render
renderrender('shop', {
prods: products,
pageTitle: 'Shop',
path: '/',
hasProducts: products.length > 0,
activeShop: true,
});
};
2. Route cho ph n addmin
const express = ' ' ;
require
require
require
requirerequire( express )
const productsController = ' ' ;
require
require
require
requirerequire( ../controllers/products )
const router express = . ;
Router
Router
Router
RouterRouter()
// /admin/add-product => GET
router productsController getAddProduct. '
get
get
get
getget( /add-product', . );
// /admin/add-product => POST
router productsController postAddProduct. '
post
post
post
postpost( /add-product', . );
module exports router. = ;
Phần shop sinh viên dựa vào phần admin trên để xây dựng route
3. Phn server: s dng h thống route đã xây dựng bước trên
const adminRoutes = ' '
require
require
require
requirerequire( ./routes/admin );
const shopRoutes = ' ' ;
require
require
require
requirerequire( ./routes/shop )
const errorController = '
require
require
require
requirerequire( ./controllers/error');
app. '
use
use
use
useuse( /admin', adminRoutes);
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 3
app. ;
use
use
use
useuse( )shopRoutes
Kết quả:
Bài 2 (3 điểm)
Xây dựng trang Shop
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 4
Bước Tạo model product
var mysql =
requi
requi
requi
requirequi
re
re
re
rere('mysql');
var mysql db = .
createConn
createConn
createConn
createConncreateConn
ection
ection
ection
ectionection({
host: 'localhost',
// your host name
user: 'root',
// database username
password: '',
// database password
database: 'book'
//database Name
});
db.
connect
connect
connect
connectconnect(function(err) {
if (err) throw err;
console.
l
l
l
ll
og
og
og
ogog('Database is connected successfully !');
});
module exports. = db;
) }
var db=
requi
requi
requi
requirequi
re
re
re
rere( )'./database' ;
var products =[];
module
module
module
modulemodule
exports
exports
exports
exportsexports. = class
Product
Product
Product
ProductProduct {
constructor() {
}
//thêm m
t s
n ph
m
static
saveP
saveP
saveP
savePsaveP
roduct
roduct
roduct
roductroduct() {
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 5
}
//tr
v
t
t c
s
n ph
m
static
fetchAll
fetchAll
fetchAll
fetchAllfetchAll() {
let sql = `SELECT * FROM products`;
db.
query
query
query
queryquery(sql, function err( , data) {
( if err) throw err;
products data= ;
});
return products;
}
}
Bước Gọi model product tại controller product. Cập nhật phương thức getProducts như
const
Product
Product
Product
ProductProduct =
require
require
require
requirerequire('../models/product' ;)
exports. =
getProducts
getProducts
getProducts
getProductsgetProducts (req, res, next) => {
const products =
Produ
Produ
Produ
ProduProdu
ct
ct
ct
ctct. ;
fetchAll
fetchAll
fetchAll
fetchAllfetchAll()
res.
render
render
render
renderrender('shop', {
prods: products,
pageTitle: 'Shop',
path: '/',
activeShop: true,
});
Bước 3: view shop
<main align="center">
<div
class
="grid">
% for (let product of prods) { %> <
<article
class
="card product-item">
<header
class
="card__header">
<h1
class
="product__title"><%= product.nameProduct %> </h1>
</header>
<div
class
="card__image">
<img
src
="images/<%= product.images %>"
alt
="A Book">
</div>
<div
class
="card__content">
<h2
class
="product__price">$<%= product.priceProduct %> </h2>
<p
class
="product__description"><%=product.sortDescription %> </p>
</div>
<div
class
="card__actions">
<button
class
="btn">Add to Cart</button>
</div>
</article>
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 6
% } %> <
</div>
</main>
PHN II
Bài 3 (2 điểm)
Xây dựng trang thêm sản phẩm khi người dùng chuyển sang phần quản trị sản
phẩm (localhost:3000/admin)
Hướng dẫn:
Tại product thực hiện bổ sung hàm phương thức)
//thêm m
t s
n ph
m
static
saveP
saveP
saveP
savePsaveP
roduct
roduct
roduct
roductroduct(product) {
db.
query
query
query
queryquery('insert into products SET ?',product, function err data( , ) {
( if err) throw err;
return true;
) }
}
Tại controller product bổ sung hành động (hàm,phương thức) dạng post
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 7
exports.
postAddP
postAddP
postAddP
postAddPpostAddP
roduct
roduct
roduct
roductroduct = ( ,req res, next) => {
const file = req.file
let title req= . .body productName;
let price req= . .body price;
let description req body description= . . ;
let nameImage file filename= . ;
product={
nameProduct title: ,
priceProduct price: ,
sortDescription description: ,
images nameImage: ,
}
Product
Product
Product
ProductProduct.
saveProduct
saveProduct
saveProduct
saveProductsaveProduct(product);
res. ' '
redirect
redirect
redirect
redirectredirect( / );
};
Tại router của admin, bổ sung thêm route dạng post
router.
post
post
post
postpost('/add-product productImage',upload.
single
single
single
singlesingle(' '), productsController postAddProduct. );
- Kết qu khi thêm m t s n ph m m i
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 8
Bài 4 (2 điểm)
Xây d ng trang xem chi ti t s n ph ế m. i dùng ch n sKhi ngườ n ph m c n xem,
website chuyn hướng đến trang chi tiết s n ph m
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 9
Hướng dn:
Bước 1: C p nh t model product
//tìm s
n ph
m theo id
static
findById
findById
findById
findByIdfindById( )id {
products=
fetchAll
fetchAll
fetchAll
fetchAllfetchAll();
const product = products.
find
find
find
findfind(p => p.id === id);
return product;
}
Bước 2: Controler product cho trường hp load chi tiết s n ph m
//detail
exports req res next. = (
getProduct
getProduct
getProduct
getProductgetProduct , , ) => {
const prodId = req. .params productId;
product prodId=
Product
Product
Product
ProductProduct.
findById
findById
findById
findByIdfindById( );
console product.
log
log
log
loglog( );
res.
render
render
render
renderrender('product-detail', {
product: product,
pageTitle: product.nameProduct,
LAB 4:NODEJS &MYSQL
WEB503 - NODEJS & RESFUL WEB SERVICE RANG T 10
path: ' '/products
});
};
Bước 3: Route cho trường hợp người dùng chuyển xem chi tiết
router productsController getProduct. '
get
get
get
getget( /products/:productId', . );
Bước 4: Tạo liên kết trang sản phẩm – shop để xem chi tiết
<div
class
="card__actions">
<a
href
="/products/<%= product.idProduct %>"
class
="btn">Details</a>
<button
class
="btn">Add to Cart</button>
</div>
Bài 5 (1 điểm)
Sinh viên làm ti p ph n qu n tr s n ph m cho 2 thao tác còn l i: Xoá s n ph m và ế
sa s n ph m
*** Y u c u n p b i:
SV n n file ( ) bao g m c c y u c c hi hoc share th m c google drive ê ầu đã th n
trê ê n, n ng th nh cp LMS đú ời gian quy đị a gi ng vi n. KH NG N P B I COI NH
KH NG C M. ĐI
--- --- Hết

Preview text:

LAB 4:NODEJS &MYSQL MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
✓ Biết cách tổ chức code với mô hình MVC
✓ Xây dựng được model
✓ Xây dựng tốt control er ✓ Cài đặt sequelize PHẦN I Bài 1 (2 điểm)
Tổ chức website sách theo mô hình MVC
1. Tổ chức control er product const products = []; exports.ge g t e A t d A d d P d ro r d o u d c u t c = (req, res, next) => { res.re r n e d n e d r e ('add-product', { pageTitle: 'Add Product',
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 1 LAB 4:NODEJS &MYSQL path: '/admin/add-product', activeAddProduct: true }); }; exports.po p s o t s A t d A d d P d ro r d o u d c u t c = (req, res, next) => { products.pu p s u h
s ({ title: req.body.title }); res.re r d e i d r i e r c e t c ('/'); }; exports.ge g t e P t r P o r d o u d c u t c s t = (req, res, next) => { res.re r n e d n e d r e ('shop', { prods: products, pageTitle: 'Shop', path: '/' ,
hasProducts: products.length > 0, activeShop: true, }); }; 2. Route cho phần addmin const express = require ' ( express' ; )
const productsController = require('../controllers/products');
const router = express.Router( ; )
// /admin/add-product => GET router.ge g t e '
( /add-product', productsController.getAddProduct);
// /admin/add-product => POST
router.post('/add-product', productsController.postAddProduct); module.exports = router;
Phần shop sinh viên dựa vào phần admin trên để xây dựng route
3. Phần server: sử dụng hệ thống route đã xây dựng bước trên const adminRoutes = require ' ( ./routes/admin'); const shopRoutes = require ' ( ./routes/shop');
const errorController = require ' ( ./controllers/error');
app.use('/admin', adminRoutes);
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 2 LAB 4:NODEJS &MYSQL app.use( ) shopRoutes ; Kết quả: Bài 2 (3 điểm) Xây dựng trang Shop
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 3 LAB 4:NODEJS &MYSQL Bước Tạo model product var mysql = re r q e u q i u re r ('mysql'); var db = mysql.cr c e r a e t a e t C e o C n o n n ec e t c ito i n o ({
host: 'localhost', // your host name
user: 'root', // database username
password: ' , // database password
database: 'book' //database Name }); db.co c n o n n e n c e t c (function(err) { if (err) throw err; console.log
o ('Database is connected successfully !'); }); module.exports = db; }) var db=re r q e u q i u re r ('./database'); var products=[]; mo m d o u d l u e l .ex e p x o p r o t r s t = class Pr P o r d o u d c u t c t { constructor( ) { }
//thêm mt sn phm static sa s v a e v P e ro r d o u d c u t c () {
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 4 LAB 4:NODEJS &MYSQL }
//tr v tt c sn phm static fe f t e c t h c A h l A ll( ) {
let sql = `SELECT * FROM products`; db.qu q e u r e y r (sql, function(err, data) { i f (err) throw err; products=data; }); return products; } } Bước
Gọi model product tại controller product. Cập nhật phương thức getProducts như const Pr P o r d o u d c u t c = re r q e u q i u r i e r ('../models/product'); exports.ge g t e P t r P o r d o u d c u t c s t = (req, res, next) => { const products = Pr P o r d o u d ct c .fe f t e c t h c A h l A ll(); res.re r n e d n e d r e ('shop', { prods: products, pageTitle: 'Shop', path: '/' , activeShop: true, }); Bước 3: view shop
<% for (let product of prods) { %>
<%= product.nameProduct %> " alt="A Book">
$<%= product.priceProduct %>

<%=product.sortDescription %>

Add to Cart
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 5 LAB 4:NODEJS &MYSQL <% } %> PHẦN II Bài 3 (2 điểm)
Xây dựng trang thêm sản phẩm khi người dùng chuyển sang phần quản trị sản phẩm (localhost:3000/admin) Hướng dẫn: Tại
product thực hiện bổ sung hàm phương thức)
//thêm mt s n phm static sa s v a e v P e ro r d o u d c u t c (product) { db.qu q e u r e y
r ('insert into products SET ?',product, function(err, data) { i f (err) throw err; return true; }) }
Tại controller product bổ sung hành động (hàm,phương thức) dạng post
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 6 LAB 4:NODEJS &MYSQL exports.po p s o t s A t d A d d P d ro r d o u d c u t c = (req, res, next) => { const file = req.file let title=req.bod . y productName; let price=req.bod . y price;
let description=req.body.description; let nameImage=file.filename; product={ nameProduct:title, priceProduct:price, sortDescription:description, images:nameImage, } Pr P o r d o u d c u t c .sa s v a e v P e r P o r d o u d c u t c (product); res.re r d e i d r i e r c e t c ('/'); };
Tại router của admin, bổ sung thêm route dạng post router.po p s o t s ('/add-product',upload.si s n i g n l g e
l ('productImage'), productsController.postAddProduct);
- Kết quả khi thêm một sản phẩm mới
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 7 LAB 4:NODEJS &MYSQL Bài 4 (2 điểm)
Xây dựng trang xem chi tiết sản phẩm. Khi người dùng chọn sản phẩm cần xem,
website chuyển hướng đến trang chi tiết sản phẩm
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 8 LAB 4:NODEJS &MYSQL Hướng dẫn:
Bước 1: Cập nhật model product
//tìm sn phm theo id static findById(id ) { products=fetchAll();
const product = products.find(p = > p.i d === id); return product; }
Bước 2: Controler product cho trường hợp load chi tiết sản phẩm //detail
exports.getProduct = (req, res, next) => { const prodId = req.params.productId;
product=Product.findById(prodId); console.log product ( ); res.render('product-detail' , { product: product,
pageTitle: product.nameProduct,
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 9 LAB 4:NODEJS &MYSQL path: '/products' }); };
Bước 3: Route cho trường hợp người dùng chuyển xem chi tiết router.ge g t e '
( /products/:productId', productsController.getProduct);
Bước 4: Tạo liên kết trang sản phẩm – shop để xem chi tiết " class="btn">Details Add to Cart Bài 5 (1 điểm)
Sinh viên làm tiếp phần quản trị sản phẩm cho 2 thao tác còn lại: Xoá sản phẩm và sửa sản phẩm
*** Yu cu np bi:
SV nn file (hoc share th mc google drive) bao gm cc yêu cầu đã thực hiện
trên, np LMS đúng thời gian quy định ca giảng viên. KHNG NP BI COI NH KHNG C ĐIM. --- Hết - --
WEB503 - NODEJS & RESFUL WEB SERVICE TRANG 10