# 1. Render Dynamic View (`Template Engine`) ## 1.1. Giới thiệu `Template Engine` là một công cụ giúp chúng ta render `HTML` dựa trên dữ liệu từ `Controller`. Trong `Express`, chúng ta có thể sử dụng nhiều `Template Engine` khác nhau như `Pug`, `EJS`, `Handlebars`,... Trước tiên khi muốn sử dụng các `Template Engine` này, chúng ta chắc hẳn sẽ cần các file `tĩnh` như `CSS`, `JS`, `Image`,... để trang web của chúng ta trở nên đẹp hơn. Để sử dụng các file `tĩnh` này, chúng ta cần cấu hình `Express` để có thể truy cập vào các file `tĩnh` này. > Ví dụ ta đặt các file `css`, `js`, `img`, ... trong folder `public` thì ta cấu hình như sau: > server.js ```javascript const express = require("express"); // Nhập module express vào const app = express(); // gọi hàm express() để tạo ra 1 app express, chứa các phương thức để xử lý request, response const path = require("path"); // Nhập module path vào, dùng để xử lý đường dẫn tới file hoặc folder const rootDir = path.dirname(require.main.filename); // Lấy đường dẫn tới file chạy đầu tiên (ở đây là file server.js) app.use(express.static(path.join(rootDir, "public"))); // Dùng express.static() để trả về các file static (css, js, img, ...) cho client, ở đây ta trả về các file static trong folder public (origin/public) //... ``` ## 1.2. Sử dụng `Pug` (`Jade`) trong `Express` `Pug` (trước đây là `Jade`) là một `Template Engine` phổ biến trong `Express`. Dùng `Pug`, chúng ta có thể viết `HTML` một cách ngắn gọn và dễ đọc hơn. Ngoài ra, `Pug` còn hỗ trợ viết `JavaScript` và `CSS` trong file `Pug`. ### 1.2.1. Cài đặt `Pug` Để sử dụng `Pug` trong `Express`, chúng ta cần cài đặt package `pug` bằng lệnh sau: ```bash npm install pug ``` ### 1.2.2. Cấu hình `Pug` trong `Express` Để sử dụng `Pug` trong `Express`, chúng ta cần cấu hình `Express` để sử dụng `Pug` như sau: > File `app.js` ```javascript const express = require('express'); const app = express(); app.set('view engine', 'pug'); // Sử dụng pug làm view engine app.set('views', './views'); // Thư mục chứa các file pug ``` ### 1.2.3. Tạo file `Pug` Cấu trúc cơ bản của file `Pug` như sau: - Các thẻ `HTML` được viết trên mỗi dòng và được thụt lề để phân biệt các thẻ cha - con (Không cần viết thẻ đóng). + Ví dụ: ```pug html head title= title body h1= message ``` - Các `attribute` của thẻ được viết sau dấu `=` tách nhau bởi dấu `,` và được viết trong dấu `()` của thẻ. + Ví dụ: ```pug a(href='/', title='Home page') Home ``` - Các `class` được viết sau dấu `.` và `id` được viết sau dấu `#`. Hoặc có thể viết bên trong dấu `()` với cú pháp `id=` `class=`. + Ví dụ: ```pug .container #header h1.title Pug - template engine #content p(class="path") This is a paragraph. ``` - Các `variable` được truyền vào từ `Controller` được viết trực tiếp trong các câu điều kiện (ở trong `()`) Hoặc sau dấu `#{variable}`. + Ví dụ: ```pug p(class=(title === 'Home' ? 'active' : '')) #{title} ``` - Chúng ta còn có thể sử dụng các câu điều kiện, vòng lặp, hàm trong file `Pug`. + Ví dụ: ```pug if (title === 'Home') h1 Welcome to Home page else h1 Welcome to #{title} page ``` - Ngoài ra, chúng ta có thể tạo các `layout` để tái sử dụng trong các file `Pug` khác nhau. Các `layout con` sẽ kế thừa các `layout cha`. Và ở `layout con` chúng ta sử dụng từ khóa `block` để định nghĩa nội dung của `layout` cha. + Ví dụ: > File `./layout/layout.pug` ```pug html head block style body block content ``` > File `home.pug` ```pug extends ./layout/layout.pug block style link(rel="stylesheet", href="/css/home.css") block content h1 #{message} ``` > Có thể sử dụng từ khóa `block` để định nghĩa nội dung của `layout` và `extends` để kế thừa `layout` đó. > Chúng ta tạo một file `Pug` với tên `home.pug` trong thư mục `views` như sau: > File `views/home.pug` ```pug extends ./layout/main-layout.pug block style link(rel="stylesheet", href="/css/home.css") link(rel="stylesheet", href="/css/addProduct.css") block content main if (items.length > 0) div.grid each item in items article.card.product-item header.card__header h1.product__title #{item.name} div.card__image img(src="https://cdn.pixabay.com/photo/2016/03/31/20/51/book-1296045_960_720.png", alt="A Product") div.card__content h2.product__price #{item.price}$ p.product__description #{item.description} div.card__actions button.btn Add to Cart else div.empty h1 The Items is empty! ``` Trong file `Pug` trên, chúng ta sử dụng `title` và `message` là các biến được truyền từ `Controller` vào `View`. ### 1.2.4. Render `Pug` trong `Express - Controller` Để render `Pug` trong `Express`, chúng ta sử dụng phương thức `res.render()` như sau: > File `controllers/home.controller.js` ```javascript const express = require("express"); const route = express.Router(); route.get("/", (req, res) => { // {Render Dynamic: PUG} // res.render("home", { items: "Item 1", title: "Home", path: "/" }); // render file home.pug trong thư mục views/pug đã được set ở server.js, truyền vào đối số là một object chứa các thuộc tính cần thiết, được sử dụng trong file home.pug }); ``` ## 1.3. Sử dụng `Handlebars` trong `Express` `Handlebars` là một `Template Engine` cho phép bạn tạo các mẫu HTML động. Nó sử dụng các mẫu văn bản đơn giản được gọi là Handlebars để tạo các mẫu HTML. Handlebars được xây dựng trên Mustache và cung cấp các tính năng mạnh mẽ cho các mẫu HTML. ### 1.3.1. Cài đặt `Handlebars` Để sử dụng `Handlebars` trong `Express`, chúng ta cần cài đặt package `express-handlebars` bằng lệnh sau: ```bash $ npm install express-handlebars ``` ### 1.3.2. Cấu hình `Handlebars` trong `Express` Để sử dụng `Handlebars` trong `Express`, chúng ta cần cấu hình `Express` để sử dụng `Handlebars` như sau: > File `app.js` ```javascript const express = require('express'); const app = express(); const ExpressHdbs = require('express-handlebars'); app.engine( "hbs", ExpressHdbs.engine({ layoutsDir: "views/layout", // thư mục chứa các file layout defaultLayout: "main-layout", // file layout mặc định extname: "hbs", }) ); // cài đặt view engine là handlebars (file có đuôi .hbs), cài đặt thư mục chứa các file layout, cài đặt file layout mặc định, cài đặt đuôi file là .hbs app.set("view engine", "hbs"); // cài đặt view engine là handlebars (file có đuôi .hbs) app.set("views", "./views"); // cài đặt thư mục chứa các file handlebars ``` > Khi chúng ta đã khai báo `layout` của `Handlebars` trong `app.js`, trong chính file `Handlebars` đã khai báo đó, cần có từ khóa `{{{body}}}` để hiển thị nội dung của `layout con`. ### 1.3.3. Tạo file `Handlebars` Cấu trúc cơ bản của file `Handlebars` như sau: - Các thẻ, tag, attribute, class, id được viết giống như `HTML`. + Ví dụ: ```handlebars

``` - Các `variable` được truyền vào từ `Controller` được viết trong dấu `{{}}`. + Ví dụ: ```handlebars

``` - Các câu lệnh `logic` được viết trong dấu `{{#}}` và `{{/}}`. + Ví dụ: ```handlebars {{#if title}}

No title

{{/if}} ``` > Chúng ta tạo 2 file `Handlebars`, 1 là layout và 1 là file `Handlebars` chứa nội dung cần hiển thị với tên `home.hbs` trong thư mục `views` như sau: > File `views/layout/main-layout.hbs` ```handlebars {{title}} {{#if notFoundCSS}} {{/if}} {{#if formCSS}} {{/if}} {{#if addCSS}} {{/if}} {{#if homeCSS}} {{/if}}

{{{body}}} ``` > File `views/home.hbs` ```handlebars

The item is empty

``` ### 1.3.4. Render `Handlebars` trong `Express - Controller` Để render `Handlebars` trong `Express`, chúng ta sử dụng phương thức `res.render()` như sau: > File `controllers/home.controller.js` ```javascript const express = require("express"); const route = express.Router(); route.get("/", (req, res) => { // {Render Dynamic: Handlebars} // res.render("home", { items: "Item 1", title: "Home", path: "/" }); // render file home.hbs trong thư mục views/hbs đã được set ở server.js, truyền vào đối số là một object chứa các thuộc tính cần thiết, được sử dụng trong file home.hbs }); ``` ## 1.4. Sử dụng `EJS` trong `Express` `EJS` là một `Template Engine` cho phép bạn tạo các mẫu HTML động. Nó sử dụng các mẫu văn bản đơn giản được gọi là EJS để tạo các mẫu HTML. EJS được xây dựng trên Mustache và cung cấp các tính năng mạnh mẽ cho các mẫu HTML. ### 1.4.1. Cài đặt `EJS` Để sử dụng `EJS` trong `Express`, chúng ta cần cài đặt package `ejs` bằng lệnh sau: ```bash $ npm install ejs ``` ### 1.4.2. Cấu hình `EJS` trong `Express` Để sử dụng `EJS` trong `Express`, chúng ta cần cấu hình `Express` để sử dụng `EJS` như sau: > File `app.js` ```javascript const express = require('express'); const app = express(); app.set('view engine', 'ejs'); // cài đặt view engine là ejs (file có đuôi .ejs) app.set('views', './views'); // cài đặt thư mục chứa các file ejs ``` ### 1.4.3. Tạo file `EJS` Cấu trúc cơ bản của file `EJS` như sau: - Các thẻ, tag, attribute, class, id được viết giống như `HTML`. - Các `variable` hay `điều kiện logic` được truyền vào từ `Controller` được viết trong dấu `<%= %>`. + Ví dụ: ```ejs

<%= title %>

Home

``` - Các câu lệnh `logic` được viết trong dấu `<% %>` để hiển thị kết quả. + Ví dụ: ```ejs <% if (title === 'Home') { %>

Welcome to Home page

<% } else { %>

Welcome to <%= title %> page

<% } %> <% items.forEach(item => { %>

<%= item.name %>

<% }); %> ``` - Chúng ta có thể sử dụng các `layout` để tái sử dụng trong các file `EJS` khác nhau. Các `layout con` sẽ kế thừa các `layout cha`. Và ở `layout con` chúng ta sử dụng từ khóa `<%- include(path/to/layout.ejs) %>` để định nghĩa nội dung của `layout` cha. + Ví dụ: > File `./includes/end.ejs` ```ejs ``` > File `home.ejs` ```ejs

Home Page

<%- include('./includes/end.ejs') %> ``` > Chúng ta tạo một file `EJS` với tên `home.ejs` trong thư mục `views` như sau: > File `views/home.ejs` ```ejs <%- include('./includes/head.ejs') %> <%- include('./includes/nav.ejs') %>

<% if (items.length > 0) { %>

<% items.forEach((item) => { %>

$<%= item.price %>

<%= item.description %>

<% }) %>

<% } else { %>

The item is empty

<% } %>

<%- include('./includes/end.ejs') %> ``` ### 1.4.4. Render `EJS` trong `Express - Controller` Để render `EJS` trong `Express`, chúng ta sử dụng phương thức `res.render()` như sau: > File `controllers/home.controller.js` ```javascript const express = require("express"); const route = express.Router(); route.get("/", (req, res) => { // {Render Dynamic: EJS} // res.render("home", { items: "Item 1", title: "Home", path: "/" }); // render file home.ejs trong thư mục views/ejs đã được set ở server.js, truyền vào đối số là một object chứa các thuộc tính cần thiết, được sử dụng trong file home.ejs }); ``` # 2. Mô hình MVC (Model - View - Controller) ## 2.1. Giới thiệu Mô hình `MVC` là mô hình phân chia ứng dụng thành 3 phần chính: `Model`, `View`, `Controller`. Mỗi phần có một nhiệm vụ cụ thể như sau: 2, View: là nơi chứa các giao diện, các giao diện này thường là các giao diện hiển thị dữ liệu, các giao diện này thường được sử dụng để hiển thị dữ liệu + Các giao diện sẽ được đặt trong folder "./views/" 3, Controller: là nơi chứa các đối tượng, các đối tượng này thường là các đối tượng điều khiển, các đối tượng này thường được sử dụng để điều khiển các đối tượng Model và View + Các hàm callback xử lý request, response, middleware sẽ tách ra riêng trong "./controllers/" 4, Lưu trữ với file json + Các file json sẽ được lưu trữ trong folder "./data/" + Thể hiện trong các thư mục "./models/", "./controllers/products.js", "./data/products.json" - `Model`: Là nơi chứa các đối tượng, các đối tượng này thường là các đối tượng mô tả dữ liệu, các đối tượng này thường được sử dụng để lưu trữ dữ liệu, truy xuất dữ liệu, xử lý dữ liệu - `View`: Là nơi chứa các giao diện, các giao diện này thường là các giao diện hiển thị dữ liệu cho người dùng. - `Controller`: Là phần chịu trách nhiệm điều khiển luồng xử lý của ứng dụng, thường được sử dụng để điều khiển các đối tượng Model và View. ## 2.2. Cách hoạt động Khi người dùng gửi một yêu cầu đến ứng dụng, `Controller` sẽ nhận yêu cầu đó và xử lý nó. Sau đó, `Controller` sẽ gọi `Model` để lấy dữ liệu cần thiết, sau đó truyền dữ liệu đó cho `View` để hiển thị cho người dùng. ## 2.3. Ví dụ ### 2.3.1. Cấu trúc thư mục ``` . ├── controllers │ └── product.controller.js ├── data │ └── products.json ├── models │ └── product.model.js ├── views │ └── home.ejs |-- routes | |-- admin.js ├── app.js └── package.json ``` > File product.json ```json [] ``` > File `models/product.model.js` ```javascript const path = require("path"); const rootdir = require("../util/path"); const fs = require("fs"); // {Storing with file json} // const pathFile = path.join(rootdir, "data", "products.json"); // Tạo đường dẫn đến file json const handleFile = (callback) => { fs.readFile(pathFile, (err, fileContent) => { if (err) { callback([]); // Nếu có lỗi thì trả về mảng rỗng, nếu không trả về mảng rỗng thì toàn bộ code trong project sẽ bị lỗi, bắt buộc phải trả về kiểu mảng } else { callback(JSON.parse(fileContent)); // Nếu không có lỗi thì đẩy dữ liệu từ file vào mảng } // Đọc file json, nếu có lỗi thì trả về mảng rỗng, nếu không có lỗi thì trả về mảng đã được đẩy dữ liệu // sử dụng callback để trả về kết quả, tránh dùng return luôn vì nó sẽ trả về kết quả trước khi đọc file xong (lỗi bất đồng bộ) }); }; // const products = []; // Tạo mảng rỗng để lưu dữ liệu tạm thời class Product { // Tạo class Product constructor(data) { this.product = data; } // Tạo constructor, truyền vào data request từ người dùng save() { // products.push(this); // {Storing with file json} // handleFile((products) => { products.push(this); fs.writeFile(pathFile, JSON.stringify(products), (err) => { if (err) console.log(err); }); }); // Đọc file json, nếu không có lỗi thì đẩy dữ liệu từ file vào mảng products, sau đó đẩy dữ liệu từ người dùng vào mảng đã tạo } // Đẩy dữ liệu từ người dùng vào mảng đã tạo static fetchAll(callback) { // return products; // {Storing with file json} // handleFile(callback); } // Trả về mảng đã được đẩy dữ liệu, dùng static để có thể truy cập trực tiếp (class.function) mà không cần khởi tạo đối tượng (new) } module.exports = Product; ``` > File `app.js` ```javascript const express = require("express"); const app = express(); const bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); app.set("view engine", "ejs"); app.set("views", "./views"); const adminRoute = require("./Routes/admin"); const personRoute = require("./Routes/personal"); const notFoundRoute = require("./Routes/notFound"); const path = require("path"); const rootDir = require("./util/path.js"); app.use(express.static(path.join(rootDir, "public"))); app.use("/admin", adminRoute); app.listen(3000); ``` > File `controllers/product.controller.js` ```javascript const Product = require("../models/products"); // import model // const products = []; // Tạo mảng rỗng để lưu dữ liệu tạm thời const addProduct = (req, res) => { res.render("addProduct", { title: "Add Product", path: "/admin/add-product", }); }; // Trả về trang addProduct const postProduct = (req, res) => { const data = JSON.parse(JSON.stringify(req.body)); // products.push(data); // { Models } // const product = new Product(data); // Khởi tạo đối tượng product từ class Product cho mỗi lần request, đê lưu dữ liệu tạm thời vào vùng nhớ mới product.save(); // Đẩy dữ liệu từ người dùng vào mảng đã tạo res.redirect("/"); }; // Lấy dữ liệu từ form và đẩy vào mảng rỗng const getProduct = (req, res) => { // res.render("home", { title: "Home", items: products, path: "/" }); // { Models + Storing File } // Product.fetchAll((products) => { res.render("home", { title: "Home", items: products, path: "/" }); }); // Trả về mảng đã được đẩy dữ liệu, dùng static để có thể truy cập trực tiếp (class.function) mà không cần khởi tạo đối tượng (new) /* [ Product { data: { name: '', description: '', price: '' } } ] */ }; // Trả về trang home và hiển thị dữ liệu từ mảng rỗng module.exports = { addProduct, postProduct, getProduct, }; ``` > File `routes/admin.js` ```javascript const express = require("express"); const route = express.Router(); const controller = require("../controllers/products") // import controller route.get("/add-product", controller.addProduct); // điều hướng đến controller xư lý và trả về addProduct.ejs route.post("/add-product", controller.postProduct); // điều hướng đến controller xư lý và trả về addProduct.ejs route.get("/", controller.getProduct); // điều hướng đến controller xư lý và trả về home.ejs module.exports = route; ``` > File `views/home.ejs` ```ejs <%- include('./includes/head.ejs') %> <%- include('./includes/nav.ejs') %>

<% if (items.length > 0) { %>

<% items.forEach((item) => { %>

$<%= item.product.price %>

<%= item.product.description %>

<% }) %>

<% } else { %>

The item is empty

<% } %>

<%- include('./includes/end.ejs') %> ``` # 3. Dynamic Route ## 3.1. Giới thiệu `Dynamic Route` là một cách để tạo các route động trong `Express`. Các route động này có thể chứa các tham số được truyền vào từ `URL`. ## 3.2. Cách tạo `Dynamic Route` Để tạo `Dynamic Route` trong `Express`, chúng ta sử dụng cú pháp: - `Paramerter`: `:parameter` để tạo các tham số động trong `URL`. - `Query`: `?query=value1&query2=value2` để tạo các tham số truy vấn trong `URL`. Qua dấu `?` và các tham số được phân biệt bởi dấu `&`. Ở `Controller`, chúng ta sử dụng: - `req.params` để lấy ra 1 `object` chứa các tham số động trong `URL`. - `req.query` để lấy ra 1 `object` chứa các tham số truy vấn trong `URL`. ### 3.2.1. Ví dụ > File `app.js` ```javascript const express = require("express"); const app = express(); ... app.use("/admin", adminRoute); ... app.listen(3000); ``` > File `routes/admin.js` ```javascript const express = require("express"); const route = express.Router(); const controller = require("../controllers/products"); route.get("/edit-product/:productID", controller.getEditProduct) // Truyền vào tham số động productID ... module.exports = route; ``` > File `controllers/products.js` ```javascript const Product = require("../models/products"); const getEditProduct = (req, res) => { const productID = req.params.productID; // Lấy ra tham số động productID const page = req.query.page; // Lấy ra tham số truy vấn page console.log(productID); res.redirect("/"); }; module.exports = { getEditProduct, }; ``` > KHI TRUY CẬP VÀO URL: `http://localhost:3000/admin/edit-product/1?page=1` ROUTE SẼ CÓ `PARAMETER` LÀ `productID=1` VÀ `QUERY` LÀ `page=1`

{{title}}

{{title}}

{{title}}

No title

{{this.name}}

{{this.price}}

The item is empty

<%= title %>

Welcome to Home page

Welcome to <%= title %> page

<%= item.name %>

Home Page

<%= item.name %>

$<%= item.price %>

The item is empty

<%= item.product.name %>

$<%= item.product.price %>

The item is empty

NodeJS: Mô hình MVC, Template Engine, Render Dynamic Route