1. Giao diện Người dùng (Storefront)
Trang chủ: Trình chiếu Slider Banner, hiển thị sản phẩm mới nhất (có nhãn giảm giá, hàng mới) và tin tức nổi bật.
Sản phẩm: * Danh sách: Lọc theo danh mục, khoảng giá, tìm kiếm tên, phân trang.
Chi tiết: Hiển thị ảnh, giá khuyến mãi, trạng thái kho, chọn số lượng, hiển thị sản phẩm tương tự.
Giỏ hàng (AJAX): Thêm, sửa số lượng, xóa sản phẩm trực tiếp không cần tải lại trang. Cập nhật tổng tiền và số lượng trên icon giỏ hàng realtime.
Thanh toán: Tự động điền thông tin người dùng, đặt hàng lưu vào CSDL (hỗ trợ COD).
Quản lý Đơn hàng: * Theo dõi trạng thái đơn qua thanh tiến độ (Progress Bar) trực quan.
Xem chi tiết đơn hàng (hiển thị dạng Modal).
Cho phép khách hàng tự Hủy đơn khi đang ở trạng thái "Chờ xử lý".
Quản lý Tài khoản: Cập nhật thông tin cá nhân (Tên, SĐT, Địa chỉ), đổi mật khẩu.
Tin tức: Đọc bài viết công nghệ/hệ thống, nội dung tự động co giãn chuẩn mobile (kể cả ảnh, bảng biểu).
2. Giao diện Quản trị (Admin Panel)
Quản lý Đơn hàng: * Xem danh sách, lọc theo trạng thái và tìm kiếm.
Cập nhật trạng thái đơn (Chờ xử lý, Đang xử lý, Hoàn thành, Đã hủy).
Tính năng In hóa đơn bán hàng chuyên nghiệp.
Quản lý Sản phẩm: Thêm, sửa, xóa, upload ảnh, quản lý tồn kho, giá bán/giá gốc. Tích hợp tìm kiếm danh mục bằng thư viện Select2.
Quản lý Danh mục: Phân loại sản phẩm (Thêm/Sửa/Xóa).
Quản lý Tin tức: Viết bài và định dạng nội dung bằng CKEditor 4, hỗ trợ tính năng upload và chỉnh sửa kích thước ảnh trực tiếp từ máy tính lên khung soạn thảo.
Quản lý Banner: Cập nhật ảnh slider trang chủ kèm đường dẫn liên kết (Link).
Quản lý Người dùng: Quản lý tài khoản, phân quyền hệ thống (Admin / User).
3. Công nghệ & UX/UI
Nền tảng: Plain PHP, kết nối cơ sở dữ liệu bảo mật qua PDO (chống SQL Injection), MySQL/MariaDB.
Giao diện: Thiết kế chuẩn Mobile-First, responsive hiển thị mượt mà trên mọi kích thước màn hình (PC, Tablet, Mobile).
Trải nghiệm người dùng:
Sử dụng SweetAlert2 cho mọi thông báo (thêm, sửa, xóa, lỗi, cảnh báo) mang lại cảm giác hiện đại.
Sử dụng Modal UI (Popup) thay vì chuyển trang liên tục giúp thao tác nhanh chóng.
Menu Sidebar có thể thu gọn trên PC và dùng dạng Drawer (trượt) trên Mobile.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
import csdl, truy cập localhost/tên project
Nguồn: Topcode.vn
