11. Lập trình giao diện
11.1 Commit đầu tiên
Sau các bài học về chủ đề JavaScript, các bạn đã có thể hiểu được cách viết mã trong tập tin index.js. Đã hiểu về lập trình bất đồng bộ, hàm mũi tên, hàm ẩn danh.
Chúng ta cũng đã thiết lập được môi trường lập trình ban đầu, gồm dựng web server, cài đặt một số module cần thiết (express, nodemon).
Quản lý mã nguồn là một kỹ năng cần thiết, vì vậy, nếu bạn chưa biết về nó thì có thể học các bài sau.
5. Git thực hành (5) - Các khu vực làm việc của Git (tiếp)
4. Git thực hành (4) - Các khu vực làm việc của Git
3. Git thực hành (3) - Cấu hình định danh người dùng
2. Git thực hành (2) - Tổng quan về Git
1. Git thực hành (1) - Hệ thống quản lý phiên bản
Chúng ta sẽ tạo tập tin .gitignore trong thư mục dự án (TeoShop).
Nội dung của .gitignore các bạn tự tạo ra hoặc tốt nhất là lấy nội dung ở đây: https://github.com/github/gitignore/blob/main/Node.gitignore
Thực hiện commit đầu tiên (thực hiện theo các lệnh được tô đậm sau đây, để ý thông tin hiển thị sau mỗi lệnh):
E:\TeoShop>git status
On branch master
No commits yet
Untracked files:
(use "git add
<file>..." to include in what will be committed)
.gitignore
index.js
package.json
pnpm-lock.yaml
E:\TeoShop>git add .
warning: in the working copy of 'package.json', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of
'pnpm-lock.yaml', LF will be replaced by CRLF the next time Git touches it
E:\TeoShop>git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: .gitignore
new file: index.js
new file: package.json
new file: pnpm-lock.yaml
E:\TeoShop>git commit -m
"Initialize TeoShop project with Express and Nodemon"
[master (root-commit) 7857e02]
Initialize TeoShop project with Express and Nodemon
4 files changed, 749 insertions(+)
create mode 100644 .gitignore
create mode 100644 index.js
create mode 100644 package.json
create mode 100644 pnpm-lock.yaml
E:\TeoShop>git log
commit 7857e02e34142614edc2d685102d7658c02776c6 (HEAD -> master)
Author: Nguyen Van Ti <tinv@gmail.co>
Date: Fri Mar 21 10:21:35 2025 +0700
Initialize TeoShop project with Express and Nodemon
11.2 Sử dụng Free HTML template
Free HTML Template là gì
Free HTML Template là các mẫu giao diện web được thiết kế sẵn, bao gồm HTML, CSS, và đôi khi JavaScript, được cung cấp miễn phí từ các nguồn như ThemeForest (miễn phí giới hạn), BootstrapMade, FreeHTML5.co, htmlcodex, hoặc GitHub. Chúng thường có giao diện đẹp, cấu trúc cơ bản (header, footer, sidebar), và phù hợp cho nhiều loại dự án như blog, portfolio, hoặc trang doanh nghiệp nhỏ.
Khi nào nên sử dụng Free HTML Template trong dự án
- Dự án nhỏ, thời gian gấp: template giúp tiết kiệm thời gian thiết kế giao diện từ đầu.
- Khách hàng cần prototype nhanh: dùng để trình bày ý tưởng ban đầu.
- Ngân sách thấp: phù hợp khi khách hàng không đủ chi phí thuê thiết kế riêng.
Cách sử dụng
- Tải về: chọn template từ nguồn uy tín, kiểm tra giấy phép (thường là Creative Commons hoặc MIT).
- Tùy chỉnh: điều chỉnh CSS, thay đổi nội dung (văn bản, hình ảnh), tích hợp back-end (như Node.js, PHP).
- Tối ưu: nén CSS/JS, kiểm tra responsive, đảm bảo tốc độ tải trang.
Ưu điểm khi dùng template
- Tiết kiệm thời gian.
- Giao diện chuyên nghiệp: template thường được thiết kế bởi chuyên gia, đảm bảo thẩm mỹ (ví dụ: bố cục gọn gàng, màu sắc hài hòa).
- Học hỏi: phân tích mã nguồn của template để học các kỹ thuật thiết kế.
Nhược điểm
- Giới hạn tùy chỉnh: sẽ bị thiếu một số tính năng, vì mỗi dự án của bạn sẽ có những đặc thù riêng.
- Mã nguồn dư thừa: template thường có CSS/JS không cần thiết, làm chậm trang.
- Không độc đáo: dùng template miễn phí dễ trùng lặp với web khác, gây khó cho khách hàng nếu họ muốn tạo thương hiệu riêng.
Tải HTML template
Vào trang: https://htmlcodex.com/
Chọn một template tùy ý để tải về máy. Ví dụ chọn mẫu bootstrap-ecommerce-template
Khi tải về máy template có dạng tập tin nén .zip (bootstrap-ecommerce-template.zip). Bạn giải nén > chép vào thư mục dự án (TeoShop) > đổi tên thành public.
11.3 Static files
Trong Express, static files (tập tin tĩnh) là các tập tin không thay đổi nội dung hoặc không cần xử lý logic phía server, như HTML, CSS, JavaScript, hình ảnh, font. Chúng được gửi trực tiếp cho client thông qua middleware express.static.
Các tập tin tĩnh được chứa trong một thư mục riêng (ví dụ: public).
Mục đích static files:
- Tối ưu hóa hiệu suất: việc gửi trực tiếp tập tin tĩnh từ máy chủ giúp giảm tải cho ứng dụng Express, cải thiện tốc độ tải trang.
- Tổ chức dự án: giúp cấu trúc dự án rõ ràng, dễ quản lý hơn.
- Bảo mật: chỉ cho phép truy cập các tập tin được công khai, bảo vệ các tập tin quan trọng khác.
Đọc thêm về static files ở đây: https://expressjs.com/en/starter/static-files.html
Ở phần trên, chúng ta đã đổi tên template thành public.
Chúng ta sẽ lập trình để người dùng có thể truy cập vào thư mục public.
Trong tập tin index.js thêm dòng mã:
app.use(express.static(__dirname + '/public'));
[index.js]
…
const
app = express();
const
port = process.env.PORT || 9000
//
cấu hình static files
app.use(express.static(__dirname + '/public'));
//
xu ly khi nguoi dung gui request toi web server
app.get("/", (req, res) => {
…
Nếu máy bạn chưa cài Nodemon, bạn phải khởi động lại web server, sau đó mở trình duyệt, truy cập vào web app (http://localhost:9000/) để xem kết quả.
Kết quả trên trình duyệt:
Hiểu về dòng mã: // cấu hình static files
app.use(express.static(__dirname + '/public'));
- app.use(): là phương thức của đối tượng app (ứng dụng Express), sử dụng để đăng ký middleware có tên là express.static().
- express.static(): là một middleware tích hợp sẵn trong Express, được sử dụng để gửi các tập tin tĩnh như CSS, JavaScript, hình ảnh. Nó nhận một tham số là đường dẫn đến thư mục chứa các tập tin tĩnh.
- __dirname: là một biến toàn cục trong Node.js, đại diện cho đường dẫn tuyệt đối đến thư mục chứa tập tin JavaScript hiện tại đang chạy (index.js).
- /public: là đường dẫn tương đối đến thư mục public trong thư mục dự án của bạn. Thư mục public thường được sử dụng để chứa các tập tin tĩnh.
Tóm lại, dòng mã trên sẽ trả về cho người dùng trang tĩnh (mặc định, ví dụ index.html) trong thư mục public, khi người dùng nhập đường dẫn http://localhost/9000
Chúng ta sẽ tìm hiểu về lập trình client-server và middleware ở phần tiếp theo.
11.4 Bài tập
Bài tập 11.1 Cài đặt các đoạn mã trong bài học.
Câu 11.2 Free HTML template là gì? Phát biểu nào sau đây không đúng?
A. Free HTML template là các mẫu giao diện web được thiết kế sẵn, bao gồm HTML, CSS, và đôi khi JavaScript, được cung cấp miễn phí.
B. Free HTML template thường có giao diện đẹp, cấu trúc cơ bản (header, footer, sidebar), và phù hợp cho nhiều loại dự án như blog, portfolio, hoặc trang doanh nghiệp nhỏ.
C. Sử dụng Free HTML template tốn nhiều thời gian, phù hợp cho các dự án lớn.
D. Free HTML template cho phép bạn tùy chỉnh CSS, thay đổi nội dung (văn bản, hình ảnh), tích hợp back-end (như Node.js, PHP).
Câu 11.3 Static files (tập tin tĩnh) trong Express là gì? Phát biểu nào sau đây không đúng?
A. Static files là các tập tin không thay đổi nội dung hoặc không cần xử lý logic phía server.
B. Static files được gửi trực tiếp cho client thông qua middleware express.static.
C. Mục đích của static files là tối ưu hóa hiệu suất, tổ chức dự án và bảo mật.
D. Không nên đặt các static files trong thư mục public.