🖥️ Backend (Admin Dashboard)
1. Bảng điều khiển (Dashboard)
-
Tổng doanh thu.
-
Tổng số đơn hàng, số đơn đã hoàn thành, đã hủy.
-
Tổng số lượng sản phẩm, sản phẩm đã bán.
-
Số lượng người dùng, quản trị viên, người dùng đang hoạt động.
-
Biểu đồ thống kê đơn hàng.
-
Top sản phẩm được xem nhiều nhất.
2. Quản lý đơn hàng
-
Danh sách đơn hàng (mã đơn, khách hàng, số điện thoại, tổng tiền, trạng thái, ngày tạo).
-
Hành động: In đơn, Chi tiết đơn, Hủy đơn.
-
Các trạng thái đơn: Chờ xử lý, Đã giao hàng, Đã hủy.
3. Quản lý sản phẩm
-
Danh sách sản phẩm: Tên, ID, giá, ảnh, trạng thái (active).
-
Thêm mới sản phẩm.
-
Chỉnh sửa, xóa sản phẩm.
-
Xem chi tiết sản phẩm: tên, giá, giá cũ, mô tả, số lượng, lượt xem.
-
Quản lý biến thể (SKU, số lượng, thuộc tính màu sắc, size).
4. Quản lý danh mục
-
Danh sách danh mục: Nam, Nữ, Trẻ em.
-
Thêm mới, chỉnh sửa, xóa danh mục.
5. Quản lý thuộc tính
-
Quản lý thuộc tính sản phẩm (màu sắc, size…).
6. Mã giảm giá
-
Thêm mã giảm giá.
-
Danh sách mã giảm giá.
7. Người dùng
-
Danh sách người dùng.
-
Thông tin tài khoản.
8. Quản lý quảng cáo
-
Quản lý banner quảng cáo (tiêu đề, mô tả, ảnh, trạng thái on/off).
-
Thêm, chỉnh sửa, xóa banner.
🛍️ Frontend (Khách hàng)
1. Trang chủ
-
Banner quảng cáo (slideshow).
-
Hiển thị các bộ sưu tập / danh mục sản phẩm.
-
Các chương trình khuyến mãi.
2. Danh mục sản phẩm
-
Hiển thị sản phẩm theo danh mục.
-
Có filter (ví dụ: Áo polo, Áo khoác, Áo thun, Quần short).
-
Xem chi tiết sản phẩm: hình ảnh, giá, giá cũ, mô tả, biến thể (màu sắc, size).
3. Giỏ hàng & Thanh toán
-
Thêm sản phẩm vào giỏ.
-
Checkout: nhập thông tin người nhận, địa chỉ, số điện thoại, email.
-
Chọn phương thức vận chuyển (tiêu chuẩn…).
-
Chọn phương thức thanh toán:
-
Tiền mặt (COD).
-
Thẻ nội địa.
-
Thẻ quốc tế.
-
VNPay (ZaloPay, VNPayQR, Visa/Master).
4. Tài khoản khách hàng
-
Đăng nhập / Đăng ký.
-
Trang hồ sơ cá nhân.
-
Danh sách đơn hàng của khách: hiển thị trạng thái (Đã xác nhận, Chờ xử lý, Đã hủy…).
-
Cho phép hủy đơn hàng trực tiếp từ trang tài khoản.
💳 Thanh toán VNPay (FE & BE)
Frontend (FE)
-
Ở bước checkout:
-
Người dùng chọn phương thức thanh toán VNPay.
-
Khi bấm Thanh toán, hệ thống sẽ gọi API BE để tạo payment URL của VNPay.
-
FE redirect người dùng sang trang thanh toán của VNPay.
-
Sau khi thanh toán, VNPay redirect lại website (returnUrl) kèm theo trạng thái (thành công/thất bại).
Backend (BE)
-
Khi khách hàng chọn VNPay:
-
Tạo đơn hàng ở DB (trạng thái: chờ thanh toán).
-
BE gọi API của VNPay để tạo Payment URL với các tham số:
-
vnp_Amount (số tiền).
-
vnp_TxnRef (mã đơn hàng).
-
vnp_OrderInfo (nội dung thanh toán).
-
vnp_ReturnUrl (trả về sau khi thanh toán).
-
vnp_SecureHash (chữ ký xác thực).
-
Trả lại FE link VNPay.
-
Sau khi khách thanh toán:
-
VNPay gọi callback URL (IPN) để xác thực thanh toán.
-
BE kiểm tra
SecureHash → nếu hợp lệ và vnp_ResponseCode == "00" → cập nhật đơn hàng sang Đã thanh toán.
-
Nếu thất bại thì giữ trạng thái Chờ xử lý hoặc Thanh toán thất bại.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
→ Tải dự án về, move dự án vào www nếu dùng laragon, htdocs nếu dùng xampp
→ Cài đặt composer, php version > 8.2, nodejs > 18
→ Cài thư viện cho dự án chạy composer install & npm install
→ Import database đi kèm dự án
→ Chạy dự án npm run dev
→ Trang chủ localhost:5173
→ Tài khoản admin: admin@gmail.com/12312313
Nguồn: Topcode.vn
