Lab04 - node JS - Tài liệu tham khảo | Đại học Hoa Sen

Lab04 - node JS - Tài liệu tham khảo | Đại học Hoa Sen và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng, ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học.

Thông tin:
10 trang 1 tháng trước

Bình luận

Vui lòng đăng nhập hoặc đăng ký để gửi bình luận.

Lab04 - node JS - Tài liệu tham khảo | Đại học Hoa Sen

Lab04 - node JS - Tài liệu tham khảo | Đại học Hoa Sen và thông tin bổ ích giúp sinh viên tham khảo, ôn luyện và phục vụ nhu cầu học tập của mình cụ thể là có định hướng, ôn tập, nắm vững kiến thức môn học và làm bài tốt trong những bài kiểm tra, bài tiểu luận, bài tập kết thúc học phần, từ đó học tập tốt và có kết quả cao cũng như có thể vận dụng tốt những kiến thức mình đã học.

31 16 lượt tải Tải xuống
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
| 1/10

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