1. Giao diện người dùng (Frontend - Khách hàng):
-
Xác thực: Đăng ký, Đăng nhập, Đăng xuất (mã hóa mật khẩu, tạo avatar động theo tên, phân quyền).
-
Hồ sơ: Xem/sửa thông tin cá nhân và upload ảnh đại diện (Avatar).
-
Trang chủ: Slider Banner tự động, danh mục sản phẩm (scroll ngang trên mobile), danh sách sản phẩm mới, tin tức mới.
-
Sản phẩm: Trang danh sách toàn bộ sản phẩm có bộ lọc (tìm kiếm, theo danh mục, khoảng giá), phân trang. Trang chi tiết hiển thị mô tả, tăng giảm số lượng (giới hạn theo tồn kho thực tế). Trang sản phẩm theo danh mục
-
Giỏ hàng & Thanh toán: Thêm/sửa/xóa sản phẩm giỏ hàng, tính tổng tiền. Tự động điền thông tin người mua khi thanh toán, trừ tồn kho sau khi đặt hàng thành công.
-
Đơn hàng: Lịch sử đơn hàng cá nhân, xem chi tiết qua modal, thanh tiến độ trạng thái cực trực quan, cho phép hủy đơn khi ở trạng thái "Chờ xác nhận".
-
Tin tức: Trang danh sách tin tức phân trang, trang chi tiết tin tức có hiển thị tin liên quan, chức năng chia sẻ (UI).
2. Giao diện Quản trị (Backend - Admin):
-
Tổng quan (Dashboard): Thống kê số lượng khách hàng, sản phẩm, đơn hàng, tổng doanh thu. Biểu đồ tròn thể hiện tỉ lệ trạng thái đơn hàng (Chart.js), danh sách đơn hàng gần nhất.
-
Quản lý Danh mục & Banner: Thêm, sửa, xóa với Ajax/Modal ngay trên trang, tìm kiếm, phân trang, hỗ trợ upload ảnh cho banner.
-
Quản lý Sản phẩm: Thêm/sửa/xóa, quản lý giá bán, giá sale (tự động tính % giảm bên frontend), ảnh đại diện, số lượng kho, trạng thái (Ẩn/Hiện).
-
Quản lý Tin tức: Viết bài, upload ảnh, tạo URL thân thiện (Slug) tự động, quản lý trạng thái xuất bản/nháp.
-
Quản lý Đơn hàng: Xem danh sách với bộ lọc (từ khóa, trạng thái), xem chi tiết (Modal), cập nhật trạng thái đơn, in/xuất hóa đơn giao diện A4 chuyên nghiệp.
Công nghệ & UX/UI sử dụng xuyên suốt:
-
Frontend: HTML5, Tailwind CSS (chuẩn Mobile-first), JavaScript thuần.
-
Backend: PHP (PDO an toàn chống SQL Injection).
-
Database: MySQL (Cấu trúc bảng liên kết chặt chẽ).
-
Trải nghiệm người dùng: Sử dụng SweetAlert2 cho 100% các thông báo (thành công, lỗi, xác nhận xóa), các Modal siêu mượt, không cần tải lại trang ở một số tác vụ, xử lý ảnh lỗi thành ảnh placeholder (SVG). Tối ưu cuộn dọc/ngang (Custom Scrollbar). Tối ưu SEO cơ bản với hệ thống tạo Slug tự động.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
Mở tệp csdl thêm vào mysql, truy cập localhost/tên project