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

http://www.themelock.com/othertemplates/687002286-wert-html-v10-Setup Project cơ bản• Bước 1: tạo bộ khung dựa trên Express với engine là EJS => express portfolio -e • Bước 2: cài đặt cá

Project web portfolio sử dụng Node JS với

dữ liệu JSON

Project web portfolio sử dụng Node JS với

dữ liệu JSON (t.t)

Project web portfolio sử dụng Node JS với

dữ liệu JSON (t.t)

Project web portfolio sử dụng Node JS với

dữ liệu JSON (t.t)

Download giao diện mẫu

• Bước 1: vào trang http://www.themelock.com/ , và search từ khóa wert

• Bước 2: minimal-unique-portfolio.html

http://www.themelock.com/othertemplates/687002286-wert-html-v10-Setup Project cơ bản

• Bước 1: tạo bộ khung dựa trên Express với engine là EJS => express portfolio -e

• Bước 2: cài đặt các thư viện liên quan do 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 các thư mục tương ứng trong Project, tương tự cách làm trong bài học trước

➢File HTML -> file EJS chứa trong thư mục views (chứa tất cả giao diện)

➢Copy các tập tin liên qua của web mẫu vào thư mục public (css, font -> stylesheets,

js -> javascripts , img -> images hoặc img -> public, plugins -> public)

➢Chuẩn hóa lại các link với các router tương ứng

• Bước 5: xem header và footer của các trang, nếu giống nhau thì tách ra và gắn

vào file riêng (header.ejs và footer.ejs)

Load dữ liệu và đổ vào EJS

1 Load dữ liệu

✓Dùng file app.js

báo một biến thuộc locals nạp dữ liệu vào,

ví dụ: app.locals.dulieu = require(‘./tendulieu.json’)

liệu trong EJS

</ div >

</ a >

<% }) %>

Load dữ liệu và đổ vào EJS (t.t)

• Bước 1: vào file app.js khai báo và sử dụng biến từ locals

app.locals.duLieuJson = require(' /model/dulieu.json ' ) ;

Vì file dulieu.json trong thư mục model nên đường dẫn như trên

Tên biến duLieuJson do ta tự đặt

• Bước 2: vào file index.ejs hoặc *.ejs tương ứng và chỉnh lại để in dữ liệu ra web

Liên quan đến hiển thị dữ liệu

Load dữ liệu và đổ vào EJS (t.t)

Kế tiếp ta muốn khi click lên liên kết của sản phẩm thì nó sẽ hiện thông tin chi tiết tương ứng của sản phẩm đó (lọc dữ liệu)

Load dữ liệu và đổ vào EJS (t.t)

Khi click lên liên kết của sản phẩm thì sẽ hiện thông tin chi tiết tương ứng

Mội thẻ <a> …

</a> tương ứng một sản phẩm

Khi lấy được dữ liệu JSON và

đổ và EJS để in ra màn hình

Để JQuery chạy đúng danh mục sản phẩm

Tên 2 nơi này phải giống nhau, khi đó ta click chọn phân

loại (cat) thì nó sẽ hiển thị các thông tin của loại đó ra

Tham khảo: https://isotope.metafizzy.co/

res render(' chi-tiet-san-pham ');

});

< span > < %= motsanpham.title %> </ span >

< span > < %= motsanpham.cat %> </ span >

</ div >

</ a >

<% }) %>

In dữ liệu danh mục ra EJS

Kế tiếp ta muốn khi click lên liên kết của sản phẩm thì nó sẽ hiện thông tin chi tiết tương ứng của sản phẩm đó (lọc dữ liệu)

Khi ta gõ localhost:3000/chi-tiet, ta muốn chi tiết cụ thể của

sản phẩm 123 thì ta gõ localhost:3000/chi-tiet.123=> để làm

được điều này thì cần truyền tham số cho router và,

href=" /chi-tiet.<%= motsanpham.id %>

router get( ' /chi-tiet.:idsanpham ', function ( req , res , next ) {

res render( ' chi-tiet-san-pham ', { idsanpham : req param idsanpham } ) ; } ) ;

Tạo link SEO và xử lý lỗi đường dẫn

• Khi ta từ trang này bấm link qua trang chi tiết để xem các sản phẩm khi đó link trên trình duyệt

sẽ là

• localhost:3000/chi-tiet.1 => xem chi tiết sản phẩm mã số 1

• localhost:3000/chi-tiet.2 => xem chi tiết sản phẩm mã số 2

• …

• Mục tiêu mong muốn là hiển thị chi-tiet và tên bài viết kèm với id của nó, nên ta cần thêm

thông tin vào dữ liệu JSON như sau

Thông tin mới là “duongdanSEO” sẽ thêm vào file JSON, sau đó khi

người dung click chọn xem chi tiết sản phẩm có mã số 1 nó sẽ không

hiện ra là localhost:3000/lap-trinh-website-fedu.1 khi đó trong file

EJS ta tạo liên kết

href="/<%= motsanpham.duongDanSEO %>.<%= motsanpham.id %>"

Và trong Router ta them như sau

router get( ' /*.:idsanpham ', function ( req , res , next ) {

res render( ' chi-tiet-san-pham ',

{ idsanpham : req param idsanpham } ) ;

<% duLieuJson.sanpham.forEach(function(motsanpham){ %>

< a class=" ish-portfolio- < %= motsanpham.cat %> "

href=" / < %= motsanpham.duongDanSEO %> < %= motsanpham.id %> " >

< div >

< img src=" < %= motsanpham.bigImage %> " >

</ div >

< div >

Tạo link SEO và xử lý lỗi đường dẫn

Đổ dữ liệu ra trang chi tiết

Các liên kết từ trang index.ejs sẽ cho ta xem chi tiết các sản phẩm tương ứng, và ta cũng đã truyền id sang trang chi-tiet-san-pham.ejs, như vậy bên trang chi-tiet-san-pham.ejs ta cần hiển thị đúng thông tin chi tiết của sản phẩm đó, vì dữ liệu file JSON là một mảng, nên ta cần duyệt mảng và chọn đúng id để hiển thị ra

Khi bấm lên liên kết trong index.ejs , thì router trong index.js xử lý và truyền dữ liệu qua chi-tiet-san-pham.ejs

Trang chi-tiet-san-pham.ejs nhận dữ liệu từ file duLieuJson, sau đó kiểm tra xem mã sản phẩm nào trùng với dữ liệu truyền từ index.ejs qua

Dùng session lưu lại các sản phẩm vừa xem

Dùng session lưu lại các sản phẩm vừa xem (t.t)

• Bước 1: khai báo session, mở file

app.js, rồi require và use đúng vị trí

(sau cookie là được)

Dùng session lưu lại các sản phẩm vừa xem (t.t)

• Bước 2: tạo một mảng session, để khi người dùng xem qua sản phẩm nào thì lưu

vào mảng session (thu thập dữ liệu người dùng vào session) Ta xử lý tại router

Ta có thể tạo thêm router ds và hiển thị danh sách các sản phẩm đã xem vào ds.ejs để biết

Mảng session này chỉ lưu các id mà thôi

Để đổ dữ liệu các sản phẩm từ session ra giao diện ta duyệt mảng danhsach và duLieuJson,

kiểm tra xem id lấy từ mảng danhsach trùng với

id của duLieuJson thì ta xuất sản phẩm đó ra

http://localhost:3000/ds

Xử lý trùng lặp dữ liệu

• Các sản phẩm đã xem, sau khi xem lại nó vẫn lưu vào mảng session, điều này

không ổn, nên ta cần chỉnh lại router xử lý trùng lặp dữ liệu

}

// nếu sản phẩm đã xem có rồi thì không xét nữa

}