🥛 Milk Store - Website Bán Sữa Trực Tuyến

Bài tập lớn môn Lập trình Web - ĐH CMC

Dự án website bán sữa với đầy đủ chức năng: xem sản phẩm, giỏ hàng, thanh toán, voucher giảm giá.

---

📁 Cấu Trúc Dự Án

Web/
├── index.html          # Trang chủ
├── products.html       # Trang danh sách sản phẩm
├── product-detail.html # Trang chi tiết sản phẩm
├── cart.html           # Trang giỏ hàng
├── about.html          # Trang giới thiệu & thống kê
├── vouchers.html       # Trang quản lý voucher (Admin)
│
├── assets/
│   ├── css/
│   │   ├── style.css      # CSS chính (màu sắc, layout, components)
│   │   └── responsive.css # CSS responsive cho mobile/tablet
│   │
│   ├── js/
│   │   ├── app.js         # Logic chung (theme, admin, toast...)
│   │   ├── storage.js     # Xử lý localStorage (CRUD products, cart, orders)
│   │   ├── products.js    # Logic trang sản phẩm
│   │   ├── cart.js        # Logic giỏ hàng & thanh toán
│   │   ├── statistics.js  # Thống kê & biểu đồ
│   │   └── components.js  # Components dùng chung (navbar, footer)
│   │
│   └── img/               # Thư mục chứa hình ảnh sản phẩm
│
└── data/
    └── products.json      # Dữ liệu mẫu sản phẩm

---

🎯 Tính Năng Chính

👤 Khách hàng

• ✅ Xem danh sách sản phẩm
• ✅ Tìm kiếm, lọc theo danh mục
• ✅ Xem chi tiết sản phẩm
• ✅ Thêm vào giỏ hàng
• ✅ Áp dụng mã giảm giá (voucher)
• ✅ Thanh toán đơn hàng
• ✅ Xem lịch sử đơn hàng
• ✅ Chế độ sáng/tối (Dark mode)

🔐 Admin

• ✅ Thêm/sửa/xóa sản phẩm
• ✅ Import/Export dữ liệu JSON
• ✅ Quản lý voucher giảm giá
• ✅ Xem thống kê sản phẩm
• ✅ Quản lý trạng thái đơn hàng

---

🚀 Hướng Dẫn Chạy

1. Mở trực tiếp: Double-click vào index.html
2. Dùng Live Server (khuyến nghị):
   • Cài extension "Live Server" trong VS Code
   • Click chuột phải vào index.html → "Open with Live Server"

---

📝 Giải Thích Các File JS

storage.js - Quản lý dữ liệu

// Lưu trữ dữ liệu vào localStorage của trình duyệt
// - getProducts()  : Lấy danh sách sản phẩm
// - addProduct()   : Thêm sản phẩm mới
// - getCart()      : Lấy giỏ hàng
// - addToCart()    : Thêm vào giỏ
// - addOrder()     : Tạo đơn hàng
// - getVouchers()  : Lấy danh sách voucher

app.js - Tiện ích chung

// Các chức năng dùng chung toàn website
// - formatPrice()  : Format số tiền (VD: 50000 → "50.000₫")
// - toggleAdmin()  : Chuyển chế độ Admin/User
// - toggleTheme()  : Đổi giao diện sáng/tối
// - showToast()    : Hiện thông báo popup

cart.js - Giỏ hàng

// Xử lý logic trang giỏ hàng
// - renderCart()     : Hiển thị sản phẩm trong giỏ
// - updateQuantity() : Cập nhật số lượng
// - applyVoucher()   : Áp dụng mã giảm giá
// - checkout()       : Thanh toán

products.js - Sản phẩm

// Xử lý trang danh sách sản phẩm
// - loadProducts()   : Load và render sản phẩm
// - initFilters()    : Khởi tạo bộ lọc
// - openAddModal()   : Mở form thêm sản phẩm (Admin)
// - addToCart()      : Thêm vào giỏ hàng

---

💡 Cách Chỉnh Sửa

Thêm sản phẩm mới:

1. Bật chế độ Admin (click icon user)
2. Vào trang Sản phẩm
3. Click "Thêm mới"
4. Điền thông tin và lưu

Đổi màu chủ đạo:

Mở file assets/css/style.css, sửa biến CSS:

:root {
  --primary: #0984e3;      /* Màu chính */
  --secondary: #fdcb6e;    /* Màu phụ */
}

Thêm danh mục sản phẩm mới:

1. Mở app.js, thêm vào object categories
2. Mở các file HTML, thêm option vào dropdown filter

---

🛠 Công Nghệ Sử Dụng

Công nghệ	Mục đích
HTML5	Cấu trúc trang
CSS3 + CSS Variables	Styling, theme
Vanilla JavaScript	Logic, xử lý dữ liệu
Bootstrap 5	Grid system, components
Font Awesome	Icons
SweetAlert2	Popup notifications
Chart.js	Biểu đồ thống kê
LocalStorage	Lưu trữ dữ liệu

---

👨‍💻 Nhóm Thực Hiện

STT	Họ và Tên	Phân công
1	Phạm Duy An (Nhóm trưởng)	products.html, products.js, Báo cáo
2	Bùi Đào Đức Anh	index.html, app.js
3	Đỗ Tuấn Anh	product-detail.html, vouchers.html, storage.js
4	Nguyễn Quang Hiếu	cart.html, cart.js
5	Phan Văn Hiếu	about.html, statistics.js, responsive.css

• Môn học: Cơ sở Lập trình Web
• Trường: ĐH CMC
• Năm: 2026