Bài toán “Xây dựng website bán hàng” với HTML, CSS và JavaScript” mang đến cơ hội áp dụng kiến thức lập trình giao diện, xử lý logic và tối ưu trải nghiệm người dùng cho sinh viên. Dự án bao gồm các tính năng thiết yếu như đăng nhập, hiển thị sản phẩm, giỏ hàng, thanh toán, xuất dữ liệu ra Excel, cùng hiệu ứng hình ảnh sống động. Trong bài viết này sẽ giới thiệu chi tiết các bước làm của bạn.
Tổng quan bài toán
Mục tiêu: 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: Giúp giới hạn quyền truy cập, chỉ người dùng hợp lệ mới xem và mua hàng.
Các bước 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 Excel
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
