8. Project web portfolio sử dụng Node JS với dữ liệu JSON

Project web portfolio sử dụng Node JS với liệu JSON Project web portfolio sử dụng Node JS với liệu JSON (t.t) Project web portfolio sử dụng Node JS với liệu JSON (t.t) Project web portfolio sử dụng Node JS với liệu JSON (t.t) Download giao diện mẫu • Bước 1: vào trang http://www.themelock.com/ , search từ khóa wert • Bước 2: http://www.themelock.com/othertemplates/687002286-wert-html-v10minimal-unique-portfolio.html Setup Project • Bước 1: tạo khung dựa Express với engine EJS => express portfolio -e • Bước 2: cài đặt thư viện liên quan hỗ trợ EXPRESS => npm install • Bước 3: cài session => npm install express-session • Bước 4: copy giao diện mẫu vào thư mục tương ứng Project, tương tự cách làm học trước ➢File HTML -> file EJS chứa thư mục views (chứa tất giao diện) ➢Copy tập tin liên qua web mẫu vào thư mục public (css, font -> stylesheets, js -> javascripts, img -> images img -> public, plugins -> public) ➢Chuẩn hóa lại link với router tương ứng • Bước 5: xem header footer trang, giống tách gắn vào file riêng (header.ejs footer.ejs) Phân tích liệu • Mục tiêu xây dựng liệu để sau làm liệu sở liệu (mongodb) => Tập xây dựng liệu để biết cách phân tích liệu • Một sản phẩm gồm: ❖Id ❖Tiêu đề ❖Một ảnh bật ❖Nhiều ảnh sản phẩm ❖Mô tả sản phẩm ❖Khách hàng ❖Vai trò dự án ❖Danh mục ❖Link sản phẩm Phân tích liệu (t.t) Tạo liệu mẫu file JSON, mảng sản phẩm, thư mục public/images cần chứa thư mục cho ảnh tương ứng Load liệu đổ vào EJS Load liệu ✓Dùng file app.js ✓Dùng biến tên locals (mặc định file app.js) khai báo biến thuộc locals nạp liệu vào, ví dụ: app.locals.dulieu = require(‘./tendulieu.json’) Sau có liệu ta dùng forEach để truy cập in liệu EJS Load liệu đổ vào EJS (t.t) Khi click lên liên kết sản phẩm thơng tin chi tiết tương ứng Mội thẻ … tương ứng sản phẩm Khi lấy liệu JSON đổ EJS để in hình Để JQuery chạy danh mục sản phẩm Tên nơi phải giống nhau, ta click chọn phân loại (cat) hiển thị thơng tin loại router.get('/chi-tiet', function(req, res, next) { res.render('chi-tiet-san-pham'); }); Tham khảo: https://isotope.metafizzy.co/ In liệu danh mục EJS Kế tiếp ta muốn click lên liên kết sản phẩm thơng tin chi tiết tương ứng sản phẩm (lọc liệu) xem chi tiết sản phẩm mã số • localhost:3000/chi-tiet.2 => xem chi tiết sản phẩm mã số • … • Mục tiêu mong muốn hiển thị chi-tiet tên viết kèm với id nó, nên ta cần thêm thơng tin vào liệu JSON sau Thông tin “duongdanSEO” thêm vào file JSON, sau người dung click chọn xem chi tiết sản phẩm có mã số khơng localhost:3000/lap-trinh-website-fedu.1 file EJS ta tạo liên kết href="/." Và Router ta them sau router.get('/*.:idsanpham', function(req, res, next) { res.render('chi-tiet-san-pham', {idsanpham: req.param.idsanpham}); }); Tạo link SEO xử lý lỗi đường dẫn Nhờ href ta truy cập vào trang chi tiết sản phẩm tương ứng, không trang chi tiết chung chung Đổ liệu trang chi tiết Các liên kết từ trang index.ejs cho ta xem chi tiết sản phẩm tương ứng, ta truyền id sang trang chi-tiet-san-pham.ejs, bên trang chi-tiet-san-pham.ejs ta cần hiển thị thơng tin chi tiết sản phẩm đó, liệu file JSON mảng, nên ta cần duyệt mảng chọn id để hiển thị Khi bấm lên liên kết index.ejs, router index.js xử lý truyền liệu qua chi-tiet-san-pham.ejs Trang chi-tiet-san-pham.ejs nhận liệu từ file duLieuJson, sau kiểm tra xem mã sản phẩm trùng với liệu truyền từ index.ejs qua Dùng session lưu lại sản phẩm vừa xem Dùng session lưu lại sản phẩm vừa xem (t.t) • Bước 1: khai báo session, mở file app.js, require use vị trí (sau cookie được) Dùng session lưu lại sản phẩm vừa xem (t.t) • Bước 2: tạo mảng session, để người dùng xem qua sản phẩm lưu vào mảng session (thu thập liệu người dùng vào session) Ta xử lý router Mảng session lưu id mà thơi Ta tạo thêm router ds hiển thị danh sách sản phẩm xem vào ds.ejs để biết http://localhost:3000/ds Để đổ liệu sản phẩm từ session giao diện ta duyệt mảng danhsach duLieuJson, kiểm tra xem id lấy từ mảng danhsach trùng với id duLieuJson ta xuất sản phẩm .. .Project web portfolio sử dụng Node JS với liệu JSON (t.t) Project web portfolio sử dụng Node JS với liệu JSON (t.t) Project web portfolio sử dụng Node JS với liệu JSON (t.t) Download... app.locals.duLieuJson = require('./model/dulieu .json' ); Vì file dulieu .json thư mục model nên đường dẫn Tên biến duLieuJson ta tự đặt • Bước 2: vào file index.ejs *.ejs tương ứng chỉnh lại để in liệu web. .. nạp liệu vào, ví dụ: app.locals.dulieu = require(‘./tendulieu .json? ??) Sau có liệu ta dùng forEach để truy cập in liệu EJS Load liệu đổ vào EJS (t.t) • Bước 1: vào file app .js khai báo sử dụng