Vừa qua, nhóm sinh viên FPT Polytechnic TP HCM đã hoàn thành bài tập xây dựng website bán hàng thời trang sử dụng HTML – CSS – JAVASCRIPT.
Xây dựng website bán hàng thời trang gồm các chức năng:
- Đăng nhập người dùng
- Hiển thị sản phẩm
- Thêm sản phẩm vào giỏ hàng
- Cập nhật/xóa sản phẩm khỏi giỏ
- Thanh toán đơn hàng
- Xuất giỏ hàng ra Excel
- Liên hệ và xác thực biểu mẫu
- Hiệu ứng ảnh: gallery và slider
Cấu trúc toàn trang
HTML: Cấu trúc bố cục
- header: Tiêu đề trang
- nav: Các nút điều hướng
- main: Nội dung trang (các section: sản phẩm, giỏ hàng, thanh toán…)
- footer: Thông tin liên hệ
CSS: Giao diện
- Layout linh hoạt (responsive), phối màu đẹp mắt
- Hiệu ứng hover, transition, bo góc…
- Định nghĩa gallery, slider, bảng, form, nút…
JavaScript: Xử lý logic
- localStorage: Lưu trạng thái đăng nhập, giỏ hàng
- Tương tác người dùng: đăng nhập, thêm/xóa/đổi số lượng
- Slider ảnh, kiểm tra biểu mẫu, export Excel
Phân tích từng chức năng chính
Đăng nhập
Tại sao?
Giới hạn quyền truy cập, chỉ người dùng hợp lệ mới xem và mua hàng.
Xử lý:
- So sánh username và password
- Lưu trạng thái đăng nhập vào localStorage
- Hiện/ẩn phần giao diện dựa vào login status
Danh mục sản phẩm
Dữ liệu:
const products = [
{ id: 1, name: “Đèn pha…”, price: 120, image: “…” },
…
];
Xử lý:
- Hàm loadProducts() render sản phẩm ra bảng HTML
- Mỗi sản phẩm có nút “🛒 Thêm”
Giỏ hàng
Lưu trữ:
- Dùng localStorage.getItem(“cart”) để lưu danh sách
- Mỗi mục chứa id và qty (số lượng)
Các chức năng:
- addToCart(id): thêm sản phẩm vào giỏ
- renderCart(): hiển thị giỏ
- changeQty(id, delta): tăng/giảm số lượng
- removeFromCart(id): xoá sản phẩm
Thanh toán
renderCheckout():
- Hiển thị bảng đơn hàng
- Tính tổng tiền
- Nút thanh toán
checkout():
- Hiện thông báo thanh toán thành công
- Xoá giỏ hàng khỏi localStorage
Xuất giỏ hàng ra Exel
exportCart():
- Dùng thư viện xlsx.full.min.js
- Duyệt giỏ hàng → tạo sheet
- Gọi XLSX.writeFile để xuất file .xlsx
Tìm sản phẩm
- Chưa có logic tìm kiếm thực sự – Xây dựng hàm searchProduct()
Liên hệ và xác thực form
validateForm():
- Kiểm tra họ tên, email, nội dung
- Báo lỗi nếu thiếu hoặc sai định dạng email
Gallery & Slider ảnh
Gallery:
- Hiển thị các ảnh trong thư mục images/
Slider:
- Ảnh được thêm tự động
- Có nút điều khiển: First, Back, Next, Auto, Stop
- Tự chuyển ảnh mỗi 3 giây (setInterval)
- Dùng transform: translateX(…) để di chuyển ảnh
Các bước xây dựng ứng dụng
B1: Chức năng Đăng nhập
B2: Chức năng Slide Show
B3: Chức năng Sản phẩm
B4: Chức năng giỏ hàng
B5: Chức năng thanh toán
B6: Chức năng liên hệ
Gợi ý cải tiến
| Mục | Gợi ý cải tiến |
|---|---|
| 🔐 Đăng nhập | Thêm nhiều tài khoản, hoặc chuyển sang dùng mảng người dùng |
| 📦 Sản phẩm | Cho phép thêm, sửa, xoá sản phẩm bằng giao diện |
| 🛒 Giỏ hàng | Hiển thị số lượng hàng trong biểu tượng giỏ |
| 📤 Tìm kiếm | Hoàn thiện hàm searchProduct() để lọc sản phẩm |
| 💬 Giao diện | Dùng thư viện như Bootstrap/Tailwind cho giao diện đẹp hơn |
| 🔐 Bảo mật | Ẩn mật khẩu, giới hạn quyền khi chưa đăng nhập |
| 📊 Thống kê | Hiển thị số lượng đơn hàng, tổng thu, biểu đồ (d3.js / chart.js) |
Kết luận
Bạn đã hoàn thiện:
- Giao diện đẹp, thân thiện trên mobile
- Đầy đủ tính năng bán hàng
- Lưu trữ localStorage tiện lợi
- Có cả hiệu ứng ảnh, contact, Excel export
Đây là một dự án thực hành xuất sắc dành cho sinh viên đang học HTML – CSS – JavaScript.
Giảng viên Hà Văn Cử
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM
