1. Khu vực Người Dùng (Frontend)
-
Sản phẩm & Danh mục: Hiển thị dạng lưới có phân trang. Bộ lọc nâng cao xử lý đa điều kiện (từ khóa, danh mục dạng cuộn dọc, thanh trượt khoảng giá kép bằng JS thuần). Trên mobile, bộ lọc thiết kế dạng Drawer vuốt thông minh.
-
Giỏ hàng: Thêm, sửa, xóa số lượng liền mạch. Giao diện giỏ hàng giới hạn hiển thị 3 sản phẩm (có thanh cuộn nếu vượt quá). Bắt buộc đăng nhập để thanh toán.
-
Thanh toán (Checkout): Tự động điền sẵn thông tin người dùng đang đăng nhập. Lưu dữ liệu bằng cơ chế PDO Transaction đảm bảo an toàn tuyệt đối. Hiệu ứng pháo hoa (Confetti) bắn lên khi đặt hàng thành công.
-
Quản lý Đơn hàng: Xem lịch sử đơn với "Thanh tiến độ giao hàng" trực quan (4 trạng thái). Có Modal chi tiết xem từng mặt hàng và chức năng "Hủy đơn" (chỉ hiện khi đơn chờ xác nhận).
-
Hồ sơ Cá nhân: Hiển thị Avatar động (theo tên) và hạng thành viên. Tính năng cập nhật thông tin giao hàng và đổi mật khẩu an toàn (xác thực mật khẩu cũ + mã hóa password_hash).
-
Tin tức: Giao diện tạp chí với Hero Section (Tin mới to bên trái, 3 tin nhỏ bên phải). Danh sách tin tự đổi bố cục ngang/dọc theo thiết bị. Chi tiết tin tự động tối ưu hiển thị (responsive) cho ảnh từ CKEditor.
2. Khu vực Quản trị (Admin Dashboard)
-
Quản lý Đơn hàng: * Danh sách hiển thị có phân trang.
-
Thanh tìm kiếm đa năng (Mã đơn, Tên, SĐT) và bộ lọc theo trạng thái.
-
Modal popup để quản trị viên xem chi tiết và chuyển đổi trạng thái đơn hàng (Chờ duyệt, Đang giao...).
-
Tích hợp nút In Hóa Đơn tạo bản in HTML chuyên nghiệp có kèm ảnh sản phẩm.
-
Quản lý Tin tức: * Thêm, sửa, xóa bài viết bằng Modal động.
-
Tích hợp trình soạn thảo văn bản CKEditor 4 hỗ trợ upload ảnh trực tiếp lên server.
-
Xử lý thông minh: Tự động xóa file ảnh vật lý trong thư mục uploads khi bài viết bị xóa hoặc thay ảnh mới (giải phóng dung lượng máy chủ). Có bẫy lỗi Exception rõ ràng nếu lỗi ghi file.
3. Công nghệ & UX/UI nổi bật
-
Thiết kế: Áp dụng triệt để Glassmorphism (bóng kính mờ), hiệu ứng Glow (sáng viền) trên nền Dark Mode hiện đại.
-
Trải nghiệm: Loại bỏ các thông báo alert xấu xí của trình duyệt, thay thế 100% bằng popup/toast của thư viện SweetAlert2.
-
Bảo mật: Toàn bộ truy vấn đều dùng Prepare Statement chống SQL Injection hoàn toàn.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn