Bài trước: Web back-end (16) - Lập trình trang web động
-----
17. Express-handlebars
17.1 Server-side template engine
Như đã đề cập, để tạo giao diện phía server (SSR) có nhiều phương pháp và công cụ. Phần này, chúng ta sẽ tìm hiểu về cách sử dụng server-side template engine.
Server-side template engine là công cụ phần mềm được sử dụng trên server để tạo ra giao diện web (HTML động) bằng cách kết hợp dữ liệu (data) với các mẫu giao diện (templates). Với các thành phần và cách hoạt động như sau:
- Mẫu giao diện (template): một tập tin chứa mã HTML, kết hợp với cú pháp đặc biệt (placeholder, vòng lặp, điều kiện) để chèn dữ liệu.
- Dữ liệu: được cung cấp từ server (từ cơ sở dữ liệu, API, hoặc xử lý logic tại backend).
- Kết xuất (rendering): template engine xử lý các template, thay thế các placeholder bằng dữ liệu thực tế, tạo ra HTML hoàn chỉnh.
- Trả về client: server gửi HTML hoàn chỉnh về trình duyệt để hiển thị.
Một ví dụ đơn giản khi sử dụng template:
- Template: <h1>Hello {{name}}</h1>
- Dữ liệu: { name: "Nguyễn Văn Tèo" }
- Kết quả HTML hoàn chỉnh: <h1>Hello Nguyễn Văn Tèo</h1>
Ưu điểm khi sử dụng template engine:
- Tạo giao diện động: hiển thị nội dung thay đổi dựa trên dữ liệu (danh sách sản phẩm, thông tin người dùng).
- Tách biệt logic xử lý và giao diện: backend xử lý dữ liệu, template engine xử lý hiển thị.
- Hỗ trợ SEO: với HTML hoàn chỉnh sẽ tốt cho công cụ tìm kiếm.
- Dễ sử dụng
- Tải nhanh lần đầu
Nhược điểm
- Không phù hợp với ứng dụng nặng về tương tác (SPA), vì cần tải lại trang khi thay đổi nội dung.
17.2 Express-handlebars
Express-handlebars là một server-side template engine được tích hợp vào framework Express để tạo ra “HTML động” từ phía server. Express-handlebars dựa trên cú pháp Mustache, cho phép bạn tạo các template với các placeholder ({{variable}}) và các cấu trúc điều khiển như vòng lặp ({{#each}}) hoặc điều kiện ({{#if}}).
Tải và cài đặt Express-handlebars
Thực chất, khi bạn tải và cài đặt Express-handlebars trong dự án, chính là bạn đang thêm gói express-handlebars vào thư mục dự án của mình và khai báo nó như một dependency trong tập tin package.json. Nhờ vậy, trong Express có thể gọi Express-handlebars để sử dụng.
Thực hiện cài đặt:
- Mở cửa sổ dòng lệnh, đảm bảo dấu nhắc lệnh đang nằm trong dự án (ví dụ TeoShop).
- Sử dụng pnpm để cài đặt
E:\TeoShop>pnpm i -s express-handlebars
- Lệnh trên sẽ tải express-handlebars từ npm registry về máy và cài đặt
- Nếu không có thông báo lỗi, nghĩa là việc cài đặt đã thành công
- Mở tập tin package.json trong dự án, mục dependencies sẽ thấy có thông tin của express-handlebars.
[package.json]
…
"dependencies":
{
"express": "^4.21.2",
"express-handlebars": "^8.0.1"
}
17.3 Sử dụng Express-handlebars trong Express
Sau khi đã cài đặt express-handlebars trong dự án, chúng ta cùng làm theo các bước sau để sử dụng:
[1] Khai báo để sử dụng gói express-handlebars
[index.js]
...
const port = process.env.PORT || 9000
// khai bao su dung express-handlebars
const expressHandlebars = require(expressHandlebars);
…
[2] Tổ chức thư mục, tập tin
Chúng ta sẽ tạo cấu trúc thư mục và tập tin cho phần giao diện như sau:
TeoShop/
├── views/
│ ├── layouts/
│ │ └── main.hbs
│ ├── partials/
│ │ ├── header.hbs
│ │ └── footer.hbs
│ ├── index.hbs
│ └── cart.hbs
└── index.js
Trong đó,
- Thư mục views: là thư mục chứa tất cả các template của ứng dụng. Express sẽ tìm kiếm các template trong thư mục này khi bạn gọi phương thức res.render().
- Thư mục layouts: chứa các layout chính (main layout - main.hbs) của ứng dụng. Main layout là một template HTML chung, là bộ khung thống nhất cho các giao diện có bố cục tương tự nhau. Ví dụ: main.hbs có thể chứa cấu trúc HTML cơ bản, header, footer. Việc sử dụng layout giúp bạn tránh việc lặp lại mã HTML trên nhiều trang.
- Thư mục partials: chứa các template con. Partial nghĩa là các thành phần con. Partials là các đoạn mã HTML có thể tái sử dụng, được nhúng vào các “view” hoặc “layout”. Ví dụ: bạn có thể tạo một partial cho header, footer, hoặc một form đăng nhập. Việc sử dụng partials giúp bạn chia nhỏ giao diện thành các thành phần nhỏ hơn, dễ quản lý hơn.
Việc tổ chức thư mục, tập tin như trên có một số ưu điểm là:
- Tách biệt logic xử lý và giao diện: giúp dễ đọc mã nguồn, dễ bảo trì và dễ mở rộng.
- Tái sử dụng mã: tránh lặp lại mã HTML, giảm thiểu lỗi và tăng tốc độ phát triển.
- Quản lý giao diện dễ dàng: cho phép bạn thay đổi giao diện một cách nhất quán trên toàn bộ ứng dụng.
Để đơn giản, trong thư mục dự án (TeoShop) chúng ta sẽ tạo thư mục và tập tin như sau:
- Tạo thư mục views
- Trong thư mục views, tạo 2 thư mục là layouts và partials
- Trong thư mục layouts, tạo tập tin main.hbs
Xem hình minh họa.
[3] Cấu hình để
sử dụng express-handlebars trong mã nguồn
Trong tập tin index.js, thêm đoạn mã sau:
const port = process.env.PORT || 9000
const expressHandlebars = require('express-handlebars');
// cau hinh de su dung express handlebars, dinh nghia engine
app.engine('hbs', expressHandlebars.engine({
// thu muc chua cac layout
layoutsDir: __dirname + '/views/layouts',
// thu muc chua cac template con
partialsDir: __dirname + '/views/partials',
// duoi cua tap tin layout
extname: 'hbs',
// tap tin layout chinh la
defaultLayout: 'main'
}));
// khai bao de su dung engine da dinh nghia
app.set('view engine', 'hbs');
// khoi dong web server
[4] Tạo các tập tin template, gồm mã HTML và cú pháp của express-handlebars
Bạn mở lại web app ở chế độ các trang tĩnh để quan sát giao diện. Bạn sẽ thấy trang HOME, PRODUCTS, PAGES, CONTACT US đều có phần header và footer giống nhau; chỉ khác nhau phần nội dung giữa trang.
Xem hình minh họa.
Vậy, trong thư
mục views/layouts chúng ta sẽ tạo main.hbs bao gồm mã nguồn của header và footer.
Cách làm:
- Trong trình duyệt, bạn mở trang http://localhost:9000/index.html
- Dùng chế độ inspect để phân tích giao diện, để biết đoạn mã nguồn nào là của phần header, của “nội dung trang con” và của footer.
- Chép toàn bộ mã nguồn của trang public\index.html vào tập tin main.hbs
- Trong main.hbs, giữ lại mã nguồn phần header và footer, cắt đi mã nguồn phần chính giữa (“nội dung trang con”) đưa vào tập tin index.hbs (bạn tạo tập tin index.hbs trong views, nếu bạn chưa tạo)
- Như vậy, nội dung của main.hbs sẽ gồm:
(lưu ý: nội dung trong {{! }} là dòng chú thích của express-handlebars)
[main.hbs]
{{! từ đầu tập tin tới dòng mã
[96] <!-- Header End -->}}
…
<!-- Header End -->
{{! thêm placeholder body }}
{{{ body }}}
{{! và từ dòng mã [518]
<!-- Footer Start --> }}
<!-- Footer Start -->
{{! tới hết tập tin. }}
…
Xem hình minh họa (tập tin main.hbs).
- Trong tập tin
main.hbs, nội dung header và footer sẽ được lặp lại trong các trang giao diện,
phần “nội dung của mỗi trang con” sẽ được “đổ” vào vùng {{{ body }}}
- Sau khi đã tạo xong được main.hbs và index.hbs, nghĩa là chúng ta đã tạo được giao diện động cho trang index. Vì vậy, chúng ta sẽ xóa tập tin index.html trong public.
- Mở trình duyệt, truy cập vào ứng dụng web http://localhost:9000/, sẽ có thông báo lỗi “Cannot GET /”. Vì chúng ta đã xóa trang index.html.
- Chúng ta lập trình đoạn mã để render ra trang index.
[index.js]
//
khai bao de su dung engine da dinh nghia
app.set('view
engine', 'hbs');
// routes va render trang index
app.get('/', (req, res) => {
res.render('index'); // se lay index.hbs do vao {{{ body }}} trong main.hbs
});
//
khoi dong web server
- Khởi động lại web server, vào lại trình duyệt, truy cập web app: http://localhost:9000/. Bạn sẽ thấy trang chủ của web app (index) xuất hiện trở lại.
17.4 Bài tập
Câu hỏi 17.1 Express-handlebars là một _________được tích hợp vào framework Express để tạo ra “HTML động” từ phía server.
A. client-side template engine
B. server-side template machine
C. server-site template engine
D. server-side template engine
Bài tập 17.2 Sử dụng được express-handlebars để tạo trang chủ cho web app.