Bài 4: Xây dựng web với nền tảng Express (Express Framework)

Các nền tảng ứng dụng web (Web Application Frameworks)

Khái niệm "web application framework" (nền tảng hay khung ứng dụng web) là một tập hợp các công cụ, thư viện, quy tắc và mô hình thiết kế đã được xây dựng trước để giúp phát triển ứng dụng web một cách hiệu quả và có cấu trúc. Các framework này cung cấp một nền tảng để xây dựng ứng dụng web bằng cách giảm bớt công việc lặp lại và cung cấp giải pháp chuẩn để giải quyết các vấn đề phổ biến.

Một số đặc điểm quan trọng của web application framework bao gồm:

• Cấu trúc tổ chức: Framework thường định rõ cách tổ chức dự án và mã nguồn, bao gồm việc sắp xếp các tệp, thư mục, và mô hình dữ liệu. Điều này giúp dự án dễ quản lý và bảo trì.
• Quy tắc và mô hình thiết kế: Framework thường định rõ các quy tắc và mô hình thiết kế cho việc phát triển ứng dụng. Điều này bao gồm cách xử lý yêu cầu, tạo giao diện người dùng, quản lý dữ liệu, và nhiều khía cạnh khác của ứng dụng web.
• Các công cụ hỗ trợ: Framework thường đi kèm với các công cụ hỗ trợ như thư viện, mã nguồn mẫu, và tiện ích giúp giảm thời gian phát triển và tối ưu hóa hiệu suất.
• Bảo mật: Framework cung cấp cơ chế bảo mật để bảo vệ ứng dụng khỏi các lỗ hổng bảo mật phổ biến như tấn công SQL Injection, Cross-Site Scripting (XSS), và Cross-Site Request Forgery (CSRF).
• Tiêu chuẩn hóa: Framework thường tuân theo các tiêu chuẩn và quy định phát triển phổ biến như RESTful API, MVC (Model-View-Controller), và URL routing.

Ví dụ về một web application framework phổ biến là Ruby on Rails (được viết bằng ngôn ngữ Ruby) hay Express (được viết bằng ngôn ngữ Javascript).

Express.js là một framework phát triển ứng dụng web phía máy chủ (backend) được xây dựng trên nền tảng Node.js. Nó giúp đơn giản hóa quá trình xây dựng các ứng dụng web bằng cách cung cấp các tính năng mạnh mẽ và gọn nhẹ.

Express.js cho phép chúng ta xây dựng các ứng dụng web và API một cách nhanh chóng và dễ dàng. Nó tuân thủ mô hình MVC (Model-View-Controller), tách biệt các phần khác nhau của ứng dụng như xử lý yêu cầu, xử lý logic và hiển thị dữ liệu. Điều này giúp giảm độ phức tạp của ứng dụng và tăng khả năng bảo trì và mở rộng trong tương lai.

Làm quen mô hình MVC (Model - View - Controller)

Mô hình MVC (Model-View-Controller) là một kiến trúc thiết kế phổ biến trong phát triển ứng dụng web, bao gồm Express.js. Mô hình này giúp tổ chức và quản lý mã nguồn một cách hiệu quả bằng cách chia ứng dụng thành ba phần chính: Model, View và Controller.

Dưới đây là mô tả chi tiết về mô hình MVC trong Express:

• Model (M): Model đại diện cho dữ liệu và quản lý cách dữ liệu được truy cập và sử dụng trong ứng dụng. Trong Express, Model thường tương ứng với tầng dữ liệu (data layer), bao gồm các tệp và thư mục liên quan đến truy cập và quản lý cơ sở dữ liệu, các tương tác với dữ liệu như đọc, ghi, cập nhật và xóa. Model không trực tiếp tương tác với người dùng mà thay vào đó nó cung cấp các API hoặc phương thức để Controller sử dụng để truy cập dữ liệu.
• View (V): View đại diện cho giao diện người dùng và hiển thị dữ liệu cho người dùng cuối. Trong Express, View thường tương ứng với các file HTML, template engine như Handlebars, Pug, hoặc EJS được sử dụng để tạo ra các trang web động. View không nên chứa logic kinh doanh hoặc tương tác với cơ sở dữ liệu; nhiệm vụ chính của nó là hiển thị thông tin cho người dùng.
• Controller (C): Controller là thành phần trung gian giữa Model và View. Nó kiểm soát luồng dữ liệu và xử lý các yêu cầu từ người dùng. Trong Express, Controller thường là các hàm hoặc middleware được đăng ký cho các route cụ thể. Controller nhận yêu cầu từ người dùng, tương tác với Model để lấy hoặc cập nhật dữ liệu, sau đó chọn View thích hợp để hiển thị dữ liệu đó cho người dùng. Controller chịu trách nhiệm xử lý logic kinh doanh, kiểm tra quyền truy cập, và thực hiện các hoạt động xử lý yêu cầu.

Ví dụ minh họa:

• Khi người dùng truy cập trang /users trong ứng dụng Express, một yêu cầu GET được gửi đến server.
• Controller xử lý yêu cầu này bằng cách gọi Model để lấy danh sách người dùng từ cơ sở dữ liệu.
• Sau đó, Controller chọn View thích hợp (ví dụ: một trang web HTML) và truyền dữ liệu người dùng vào View để hiển thị danh sách người dùng cho người dùng cuối.

Mô hình MVC giúp tách biệt logic ứng dụng thành các phần riêng biệt, giúp dễ quản lý, bảo trì và mở rộng ứng dụng web.

Giới thiệu Express.js

Express.js là một framework phát triển ứng dụng web phía máy chủ (backend) được xây dựng trên nền tảng Node.js. Nó giúp đơn giản hóa quá trình xây dựng các ứng dụng web bằng cách cung cấp các tính năng mạnh mẽ và gọn nhẹ.

Express.js cho phép chúng ta xây dựng các ứng dụng web và API một cách nhanh chóng và dễ dàng. Nó tuân thủ mô hình MVC (Model-View-Controller), tách biệt các phần khác nhau của ứng dụng như xử lý yêu cầu, xử lý logic và hiển thị dữ liệu. Điều này giúp giảm độ phức tạp của ứng dụng và tăng khả năng bảo trì và mở rộng trong tương lai.

Các khái niệm cơ bản của Express.js bao gồm:

• Middleware: Middleware là các hàm được chạy trong quá trình xử lý yêu cầu. Nó có thể thực hiện các tác vụ như xử lý và phân tích yêu cầu, kiểm tra quyền truy cập và ghi lại lỗi. Express.js cho phép chúng ta tạo và sử dụng middleware một cách linh hoạt, giúp tăng tính linh hoạt và tái sử dụng code.
• Route: Express.js cho phép chúng ta xác định các route (đường dẫn) cho ứng dụng của chúng ta. Mỗi route sẽ định nghĩa một URL cụ thể và xử lý các yêu cầu tương ứng. Bằng cách sử dụng route, chúng ta có thể xác định các hành động cụ thể khi người dùng truy cập vào các đường dẫn khác nhau trên ứng dụng của chúng ta.
• Template engine: Express.js không đi kèm với một template engine mặc định, nhưng nó cho phép chúng ta sử dụng bất kỳ template engine nào chúng ta thích như EJS, Pug, Handlebars, và nhiều hơn nữa. Template engine giúp chúng ta xây dựng và hiển thị các trang web động bằng cách kết hợp dữ liệu từ máy chủ với các template được định nghĩa trước.
• Error handling: Express.js cung cấp một cách tiếp cận dễ dùng để xử lý và quản lý lỗi trong ứng dụng của chúng ta. Bằng cách sử dụng middleware và các hàm xử lý lỗi, chúng ta có thể tùy chỉnh việc xử lý lỗi theo ý muốn, bao gồm ghi log lỗi, trả về mã lỗi và thông báo tương ứng cho người dùng.

Express.js là một framework mạnh mẽ và phổ biến trong cộng đồng phát triển web. Nó giúp chúng ta xây dựng các ứng dụng web phía máy chủ một cách nhanh chóng, linh hoạt và dễ dàng mở rộng. Sau đây chúng ta sẽ tìm hiểu chi tiết về các khái niệm và thao tác trong Express.

Các khái niệm và thao tác cơ bản khi làm việc với Express.js

Tạo ứng dụng đầu tiên với Express

Route

Trong Express.js, khái niệm Route đóng vai trò quan trọng trong việc xác định cách xử lý yêu cầu HTTP từ client đến server. Một route được xác định bởi một đường dẫn (URL) và một phương thức HTTP tương ứng (GET, POST, PUT, DELETE, vv.). Khi có một yêu cầu được gửi đến server, Express.js sẽ kiểm tra các route đã được định nghĩa để tìm ra route phù hợp và thực hiện xử lý tương ứng.

Một route trong Express.js có thể được định nghĩa bằng cách sử dụng phương thức tương ứng của ứng dụng Express (get(), post(), put(), delete(), vv.). Mỗi phương thức này nhận vào hai tham số: đường dẫn và một hàm xử lý (handler) để thực hiện khi route được truy cập.

Dưới đây là một ví dụ hoàn chỉnh về việc sử dụng route trong Express.js:

Lưu đoạn mã trên thành tập tin express_route.js trong thư mục EXPRESS. Gõ lệnh: node express_route.js

Truy cập vào http://localhost:3000 trên trình duyệt:

Truy cập vào http://localhost:3000/about trên trình duyệt:

Truy cập vào http://localhost:3000/users?name=Minh trên trình duyệt:

Chú ý: Chúng ta có thể thực hiện trên Glitch tương tự ví dụ Tạo ứng dụng Express đầu tiên ở trên.

Trong ví dụ trên:

• Route đầu tiên được định nghĩa cho đường dẫn gốc /, và khi có yêu cầu GET đến đường dẫn này, server sẽ gửi phản hồi "Trang chủ" trở lại cho client.
• Route thứ hai được định nghĩa cho đường dẫn /about, và khi có yêu cầu GET đến đường dẫn này, server sẽ gửi phản hồi "Trang giới thiệu" trở lại cho client.
• Route thứ ba được định nghĩa cho đường dẫn /users, và khi có yêu cầu GET đến đường dẫn này với query parameter name, server sẽ gửi phản hồi "Xin chào, {name}" trở lại cho client.
• Route cuối cùng được sử dụng làm route mặc định, nghĩa là nếu không tìm thấy bất kỳ route phù hợp nào, server sẽ gửi phản hồi "Không tìm thấy trang" với mã lỗi 404.

Thông qua việc định nghĩa và sử dụng các route, chúng ta có thể xử lý các yêu cầu từ client tới server theo nhu cầu của ứng dụng Express của mình.

Middleware

Trong Express.js, Middleware là các hàm được chạy tuần tự trên đường đi của yêu cầu HTTP từ client tới server. Nó cho phép chúng ta thực hiện các tác vụ như xử lý yêu cầu, trung gian ghi log, kiểm tra quyền truy cập, xử lý lỗi và nhiều hơn nữa. Middleware giúp tách biệt logic xử lý thành các bước nhỏ và tái sử dụng code một cách dễ dàng. Cách sử dụng Middleware trong Express.js:

• Sử dụng phương thức app.use() để đăng ký middleware với ứng dụng Express.
• Middleware có thể là một hàm đơn giản nhận vào ba tham số: req (request), res (response) và next.
• Trong middleware, chúng ta có thể xử lý yêu cầu, thay đổi thông tin yêu cầu hoặc phản hồi, và chuyển quyền điều khiển cho middleware tiếp theo bằng cách gọi next().

Dưới đây là một ví dụ hoàn chỉnh về việc sử dụng và viết Middleware trong Express.js:

Lưu đoạn mã trên thành tập tin express_middleware.js trong thư mục EXPRESS. Gõ lệnh: node express_middleware.js

Truy cập vào http://localhost:3000 trên trình duyệt:

Chú ý: Chúng ta có thể thực hiện trên Glitch tương tự ví dụ Tạo ứng dụng Express đầu tiên ở trên.

Trong ví dụ này:

• Chúng ta import Express và tạo một ứng dụng Express bằng cách gọi express().
• Chúng ta đăng ký một Middleware sử dụng app.use() để ghi log thông tin về mỗi yêu cầu đến server. Middleware này được thực thi mỗi khi có một yêu cầu HTTP đến server. Nó in ra đường dẫn (req.url) của yêu cầu và sau đó chuyển quyền điều khiển cho Middleware tiếp theo hoặc route chính bằng cách gọi next().
• Chúng ta đăng ký một route chính sử dụng app.get() để xử lý yêu cầu GET đến đường dẫn / và gửi một phản hồi đơn giản "Chào mừng đến với ứng dụng Express!".
• Cuối cùng, chúng ta khởi động server và lắng nghe yêu cầu tại cổng 3000.

Khi chúng ta chạy ứng dụng này và truy cập địa chỉ http://localhost:3000 trong trình duyệt, chúng ta sẽ thấy rằng Middleware đã ghi log thông tin về yêu cầu đến server mỗi khi chúng ta truy cập trang. Middleware là một cách mạnh mẽ để thêm các chức năng trung gian vào ứng dụng Express của chúng ta, như xác thực, ghi log, kiểm tra quyền truy cập và nhiều công việc khác.

Template engine

Trong Express.js, Template engine (bộ công cụ mẫu) là một công cụ giúp chúng ta tạo ra các trang HTML động dựa trên dữ liệu được truyền vào từ ứng dụng. Template engine cho phép chúng ta kết hợp HTML tĩnh với các dữ liệu động, điều này giúp rất nhiều trong việc tạo các trang web động và tái sử dụng các thành phần giao diện.

Express.js cung cấp nhiều loại template engine khác nhau để tạo ra các trang HTML động (Tham khảo các template engine tại đây). Dưới đây là một số loại template engine phổ biến:

• Pug (trước đây là Jade): là một template engine sử dụng cú pháp đơn giản và gọn gàng dưới dạng indentations (thụt dòng) để định nghĩa HTML. Tham khảo thêm về Pug tại đây.
• EJS (Embedded JavaScript): cho phép chúng ta nhúng mã JavaScript trực tiếp vào trong template HTML.
• Handlebars: sử dụng cú pháp đơn giản và cho phép chúng ta tạo các biểu đồ, điều kiện và lặp trong template.
• Mustache: cũng là một template engine tương tự Handlebars và cho phép chúng ta định nghĩa template đơn giản.
• Nunjucks: là một template engine mạnh mẽ với nhiều tính năng như kế thừa (inheritance), biểu đồ, và sự mở rộng của biểu thức.

Mỗi loại template engine có cú pháp và tính năng riêng biệt. Lựa chọn loại nào phụ thuộc vào sở thích và nhu cầu cụ thể của chúng ta. Express cho phép chúng ta dễ dàng tích hợp bất kỳ template engine nào chúng ta chọn thông qua việc cài đặt và cấu hình phù hợp. Sau đây là minh họa cách sử dụng 2 kiểu template engine Pug và Handlebars (Sử dụng VS Code, trong Glitch tương tự các ví dụ trên).

Error handling

Error handling (xử lý lỗi) trong Express là việc quản lý và xử lý các ngoại lệ (exceptions) và lỗi trong ứng dụng Express.js. Khi một lỗi xảy ra trong quá trình xử lý yêu cầu HTTP, Express sẽ quản lý nó và chuyển nó đến middleware hoặc hàm xử lý lỗi để tạo phản hồi phù hợp cho client.

Dưới đây là một ví dụ về cách sử dụng error handling trong Express:

Lưu đoạn mã trên thành tập tin express_errorhandling.js trong thư mục EXPRESS. Để ý rằng chúng ta có yêu cầu dùng thư viện body-parser trong Express để phân tích dữ liệu từ form HTML nên chúng ta cần cài thư viện này dùng lệnh: npm install express body-parser

Gõ lệnh: node express_errorhandling.js.

Chúng ta định nghĩa một route /divide, mà khi được truy cập, kiểm tra xem giá trị dividend và divisor từ yêu cầu có hợp lệ hay không. Nếu không hợp lệ, chúng ta tạo một lỗi và chuyển nó đến middleware xử lý lỗi thông qua next(error).

Middleware xử lý lỗi được đăng ký bằng cách sử dụng app.use(). Nó nhận lỗi thông qua tham số err và tạo một phản hồi lỗi với mã trạng thái và thông báo lỗi.

Khi chúng ta truy cập /divide với divisor bằng 0 hoặc không có dividend và divisor, chúng ta sẽ nhận được phản hồi lỗi với mã trạng thái 400 Bad Request và thông báo lỗi "Invalid input". Nếu có lỗi xảy ra trong quá trình xử lý yêu cầu, Express sẽ tự động chuyển nó đến middleware xử lý lỗi.

Truy cập vào http://localhost:3000 trên trình duyệt chúng ta sẽ thấy một biểu mẫu cho phép nhập giá trị dividend và divisor

Sau khi chúng ta nhập giá trị và nhấn nút "Submit," ứng dụng sẽ kiểm tra và hiển thị kết quả hoặc thông báo lỗi tương ứng. Ví dụ nhập ô trên là 1, ô dưới là 0:

Sẽ nhận lỗi khi nhấn nút Submit:

Như vậy chúng ta đã trải qua những vấn đề cơ bản nhất trong Express như mô hình MVC, các khái niệm route, middleware, template-engines, error handling. Sau đây chúng ta sẽ kết hợp các kiến thức đã học để xây dựng một dự án website.

Dự án ứng dụng với Express và mô hình MVC

Dưới đây là một ví dụ về một dự án hoàn chỉnh sử dụng Express, mô hình MVC (Model-View-Controller), route, middleware, template engine (Pug và Handlebars), và error handling. Dự án này là một ứng dụng web đơn giản cho phép người dùng nhập hai số và thực hiện các phép toán cơ bản trên chúng (cộng, trừ, nhân, chia).

Trước khi bắt đầu, trong thư mục gốc dự án của chúng ta cần cài đặt đầy đủ các thư viện như Express, Pug, Handlebars, body-parser. Nếu chúng ta đang dùng thư mục EXPRESS thì không cần cài đặt thêm.

Giả sử chúng ta dùng thư mục EXPRESS. Trong thư mục này, tạo thư mục dự án tên my-express-app và tạo các thư mục dự án và tạo các tập tin JS theo cấu trúc sau:

Cơ chế hoạt động của Express trong cấu trúc ứng dụng của chúng ta (my-express-app) như sau:

• Tạo ứng dụng Express: Tệp app.js là nơi chúng ta tạo và cấu hình ứng dụng Express. Dòng mã const app = express(); tạo một instance của Express. Sau đó, chúng ta cấu hình ứng dụng bằng cách thêm các middleware và cài đặt cơ bản như định nghĩa template engine và xử lý lỗi.
• Middleware: Express sử dụng middleware để xử lý các yêu cầu HTTP. Trong ứng dụng của chúng ta, chúng ta đã sử dụng middleware body-parser để phân tích và trích xuất dữ liệu từ các yêu cầu POST. Chúng ta cũng đã sử dụng middleware express.static để phục vụ các tệp tĩnh như CSS từ thư mục public.
• Routing và Controllers: Thư mục controllers chứa các tệp controller, trong trường hợp này là calculatorController.js. Trong tệp này, chúng ta đã định nghĩa các route và xử lý tương ứng cho chúng bằng cách sử dụng express.Router(). Ví dụ: router.get('/', ...) xử lý yêu cầu GET đến đường dẫn gốc, router.post('/calculate', ...) xử lý yêu cầu POST đến đường dẫn /calculate.
• Models: Thư mục models chứa các tệp model, trong trường hợp này là calculatorModel.js. Model này chứa logic xử lý tính toán. Controllers sử dụng model để thực hiện các phép tính và trả về kết quả cho người dùng.
• Views và Template Engine: Thư mục views chứa các tệp template, trong trường hợp này là calculator.pug. chúng ta đã cấu hình Express để sử dụng Pug làm template engine thông qua app.set('view engine', 'pug'). Controllers sử dụng template engine để tạo ra nội dung HTML động dựa trên dữ liệu và trả về cho trình duyệt.
• Giao tiếp: Khi người dùng truy cập ứng dụng của chúng ta thông qua trình duyệt, Express nhận các yêu cầu HTTP và chuyển chúng đến các route tương ứng được định nghĩa trong controllers. Controllers sau đó tương tác với models để thực hiện các thao tác cần thiết (trong trường hợp này, tính toán) và sử dụng template engine để tạo nội dung HTML trả về cho trình duyệt.
• Phản hồi cho trình duyệt: Controllers trả về các phản hồi HTTP cho trình duyệt, bao gồm HTML được tạo bởi template engine. Trình duyệt hiển thị nội dung này cho người dùng.
• Tệp tĩnh và CSS: Thư mục public chứa các tệp tĩnh như CSS (trong trường hợp này là styles.css). Express sử dụng middleware express.static để phục vụ các tệp tĩnh này trực tiếp từ trình duyệt của người dùng.
• Lắng nghe yêu cầu: Cuối cùng, Express sử dụng app.listen để lắng nghe yêu cầu từ trình duyệt trên một cổng cụ thể (trong trường hợp này là cổng 3000). Khi một yêu cầu đến, Express xác định route tương ứng và chuyển yêu cầu đó đến controller để xử lý. Sau đó, kết quả được gửi lại cho trình duyệt.

Có thể tạm hình dung một cách trực quan:

Nội dung app.js: (Chú ý đọc kỹ các chú thích mỗi dòng mã để hiểu hơn)

Nội dung calculatorController.js: (Chú ý đọc kỹ các chú thích mỗi dòng mã để hiểu hơn)

Nội dung calculatorModel.js: (Chú ý đọc kỹ các chú thích mỗi dòng mã để hiểu hơn)

Nội dung calculator.pug: (Chú ý đọc kỹ các chú thích mỗi dòng mã để hiểu hơn)

Nội dung styles.css: (Chú ý đọc kỹ các chú thích mỗi dòng mã để hiểu hơn)

Gõ lệnh node app.js và truy cập http://localhost:3000/calculator để kiểm tra kết quả.