TEMPLATE ENGINE EJS

A – LÝ THUYẾ T
I – VIEW
1. View
View là phầ n hiển thị giao diện, đâ y là nơi tậ p trung cá c mã hiển thị HTML, và mộ t phầ n nhỏ
các mã CSS, Javascript (nếu có )

2. Template Engine
Template Engine cho phép chú ng ta tổ chứ c lạ i và quả n lý các thà nh phầ n trên giao diện
HTML mộ t cách khoa họ c và thuậ n tiện hơn, ngoà i ra các Template Engine cò n hỗ trợ bộ thư viện
giú p thao tác vớ i dữ liệu đượ c đẩ y từ Controller sang mộ t cách dễ dà ng và dễ nhìn . Mộ t số
Template Engine cò n hỗ trợ chú ng ta xâ y dự ng lạ i cấ u trú c HTML mộ t cách tố i giả n hơn rấ t nhiều.
Mộ t số Template Engine phổ biến đượ c sử dụ ng trong cá c dự á n củ a NodeJS

 EJS
 Pug
 Jade
 …

II – TEMPLATE ENGINE EJS

Template Engine EJS là mộ t trong số nhiều Template Engine đượ c sử dụ ng đố i vớ i các dự á n
củ a NodeJS, vớ i ưu điểm nhỏ gọ n, dễ sử dụ ng.
1. Cài đặt & sử dụng
Bước 1: cài đặ t
Code:

npm install ejs --save

Bước 2: cấu hình

Code:

// config ejs template engine

app.set("views", __dirname+"/apps/views");
app.set("view engine", "ejs");
Trong đó:

 "views": là key bắ t buộ c để định nghĩa mộ t đườ ng dẫ n đến thư mụ c chứ a các view
 __dirname+"/apps/views": xá c định đườ ng dẫ n tuyệt đố i tớ i thư mụ c views chứ a các view
(thư mụ c views đặ t tên tù y ý)
 "view engine": là key bắ t buộ c để định nghĩa mộ t kiểu Template Engine bấ t kỳ
 "ejs": định nghĩa kiểu Template Engine là EJS (có thể config vớ i các giá trị khác cho các
Template Engine khác)

Bước 3: sử dụ ng
Code:

const login = (req, res)=>{

res.render('admin/login');
}

Trong đó:

 render: phương thứ c xuấ t hiện khi cài EJS, đâ y là phương thứ c gọ i mộ t file view ejs và o
 "admin/login": đườ ng dẫ n tớ i file login view ejs (đượ c tính bắ t đầ u từ thư mụ c views do
chú ng ta đã định nghĩa ở phầ n config)

2. Cú pháp sử dụng trong EJS

Tất cả các file chỉ được gọi là Template Engine EJS và sử dụng được cú pháp EJS khi nó có
thành phần mở rộng (đuôi file) là .ejs

 Vù ng là m việc

<%
var num = 10;
%>

 Xuấ t giá trị

<%=num%>
3. Hàm Include trong EJS
Code:

<%- include("layout/header")%>

Trong đó:

 layout/header: đườ ng dẫ n tớ i file header view ejs

4. Phương thức Redirect trong EJS

Code:

function login(req, res){

res.redirect('admin/dashboard');
}

Trong đó:

 render: phương thứ c xuấ t hiện khi cài EJS, đâ y là phương thứ c gọ i mộ t file view ejs và o
 "admin/login": đườ ng dẫ n tớ i file login view ejs (đượ c tính bắ t đầ u từ thư mụ c views do
chú ng ta đã định nghĩa ở phầ n config)

5. Truyền tham số từ Controller sang View EJS

Truyền tham số từ Controller sang View thô ng qua tham số thứ hai củ a Render, tham số nà y
bắ t buộ c phải là mộ t đố i tượ ng.
Code:

const login = (req, res)=>{

res.render('admin/login', {data: 1000});

}
Trong đó:

 data: là key, sang View nó sẽ là biến data và lưu trữ giá trị 1000

III – TRUYỀ N & NHẬ N DỮ LIỆ U

1. Truyền và nhận dữ liệu bằng phương thức GET
GET là phương thứ c truyền và nhậ n dữ liệu thô ng qua việc thự c thi mộ t URL
Code:

// /test/:id

console.log(req.params);

Trong đó:

 :id: là tên tham số sẽ nhậ n giá trị đượ c truyền qua URL
 req.params: trả về mộ t đố i tượ ng chứ a các cặ p key:value (chính là tên tham số và giá trị
truyền tương ứ ng trên URL)

2. Truyền và nhận dữ liệu bằng phương thức POST

POST là phương thứ c truyền và nhậ n dữ liệu thô ng qua việc Submit Form dữ liệu
Code Config:

app.use(bodyParser.urlencoded({ extended: true }))

app.use(bodyParser.json())

Trong đó:

 bodyParser.urlencoded: phâ n tích dữ liệu đượ c gử i từ FORM

 bodyParser.json: phâ n tích dữ liệu dạ ng JSON

Code:
 // View
<form method="post" action="/test1">
<input type="text" name="email"/>
<br/>
<input type="text" name="password"/>
<br/>
<button type="submit" name="sbm">Login</button>
</form>

...

// Controller
const test1 = (req, res)=>{

console.log(req.body);
}

Trong đó:

 req.body: trả về mộ t đố i tượ ng lưu trữ tấ t cả các giá trị đượ c nhậ p và o từ form

B – THỰ C HÀ NH
I – THỰ C HÀ NH XÂ Y DỰ NG DỰ Á N TRÊ N LỚ P
1. Xây dựng chức năng Login

 Xâ y dự ng Router GET Login và Post Login

 Xâ y dự ng các phương thứ c GET Login và Post Login trong Auth Controller
 Xâ y dự ng View GET Login và Post Login
o Tổ chứ c cấ u trú c thư mụ c và file củ a giao diện admin trong cá c thư mụ c views &
public
o Đổ i định dạ ng file login.html sang login.ejs
o Định nghĩa đườ ng dẫ n tĩnh (static) đến thư mụ c public
 Viết biểu thứ c logic cho chứ c nă ng Login vớ i tài khoả n cố định
(mail:vietpro.edu.vn@gmail.com – pass:123456 )
o Đă ng nhậ p thấ t bại thô ng bá o đă ng nhậ p thấ t bại
o Đă ng nhậ p thà nh cô ng thì chuyển hướ ng tớ i trang chủ quả n trị (Dashboard)

II – CÔ NG VIỆ C VỀ NHÀ
1. Cài đặt MongoDB (bản mới nhất)
2. Cài đặt Robo 3T (bản mới nhất)