1. Giao diện & Trải nghiệm (UI/UX)
Thiết kế chuẩn Mobile-first, responsive hiển thị đẹp trên mọi thiết bị.
Sử dụng Tailwind CSS mang lại giao diện hiện đại, các modal, thanh cuộn, hiệu ứng hover mượt mà.
Tích hợp SweetAlert2 để thông báo (toast/popup) chuyên nghiệp, không cần alert mặc định.
2. Chức năng Người dùng (Front-end)
Trang chủ: Tích hợp Swiper slider cho banner, hiển thị danh mục, sản phẩm mới, tin tức nổi bật.
Sản phẩm & Chi tiết: Lọc sản phẩm theo khoảng giá, danh mục, tìm kiếm từ khóa. Phân trang động, tính toán phần trăm giảm giá. Chi tiết có sản phẩm tương tự và thao tác thêm giỏ hàng.
Giỏ hàng: Tính toán tổng tiền tự động, cập nhật số lượng, xóa sản phẩm, kiểm tra giới hạn tồn kho.
Thanh toán: Yêu cầu đăng nhập, tự động lấy thông tin user (tên, SĐT, địa chỉ), xử lý lưu đơn hàng (trừ tồn kho sản phẩm) và chuyển hướng thành công.
Đơn hàng của tôi: Có thanh tiến độ trạng thái cực trực quan, chức năng hủy đơn (nếu đang chờ xác nhận) và trả lại tồn kho. Nút xem nhanh chi tiết đơn bằng Modal AJAX không cần load lại trang.
Tài khoản: Bảng điều khiển (thống kê tổng đơn, hạng), cập nhật thông tin cá nhân, đổi mật khẩu an toàn (mã hóa hash).
Tin tức & Chi tiết: Bố cục tin tức nổi bật (Hero section) và danh sách phân trang. Chi tiết tin hiển thị chuẩn HTML/CSS từ CKEditor (bao gồm ảnh, bảng, format chữ).
3. Chức năng Quản trị (Admin)
Quản lý đơn hàng: Bảng danh sách đơn có phân trang, thanh tìm kiếm (theo mã, tên, SĐT) và bộ lọc theo trạng thái.
Xử lý đơn: Xem chi tiết nhanh qua Modal AJAX (thông tin khách, sản phẩm, tổng tiền), thay đổi trạng thái đơn trực tiếp.
In hóa đơn: Chức năng mở trang riêng định dạng chuẩn hóa đơn in (ẩn các nút bấm thừa, tối ưu layout in ấn).
Dự án hiện tại đã có một luồng mua sắm - quản lý khép kín, logic, an toàn (dùng PDO chống SQL Injection) và giao diện cực kỳ chỉn
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
thêm file sql vào mysql, truy cập localhost/tên project
Nguồn: Topcode.vn
