Thêm sản phẩm vào giỏ hàngChọn loại sản phẩm muốn đặt, chọn số lượng và nhấn nút Add to cart, hệ thống thông báothêm hàng vào giỏ thành công H.2.3.1.. Thêm sản phẩm vào giỏ Click vào ico
Môi trường cài đặt hệ thống và các công cụ sử dụng
˗ Ngôn ngữ chính được sử dụng là Javascript và Typescript bên cạnh có sự hỗ trợ của các library và framework là ViteJS và SailsJS ˗ Sử dụng hệ quản trị cơ sở dữ liệu MySQL ˗ Yêu cầu các phiên bản:
Các bước cài đặt
Cài đặt cơ sở dữ liệu
Tải xuống và cài đặt MySQL từ trang chủ: https://dev.mysql.com/downloads/mysql/
Sau khi đăng nhập thành công, import file Database.sql: ˗ Bước 1 : Chọn Server → Data Import ˗ Bước 2: Chọn Import from Self-Contained File và chọn đường dẫn đến thư mục chứa file Database.sql ˗ Bước 3: Ấn Start import và Reconnect to DBMS, database tmdt xuất hiện trong danh sách schema
Cài đặt phần backend
Cài đặt Node.js và npm: ˗ Bước 1: Tải xuống và cài đặt Node.js từ trang chủ (https://nodejs.org/). ˗ Bước 2: Sau khi cài đặt xong, kiểm tra phiên bản Node.js và npm bằng cách mở
Command Prompt (hoặc PowerShell) và chạy lệnh sau: node -v npm -v
Cài đặt SailsJS: npm install sails –g
Giải nén file romand-be và mở folder bằng vscode
Cấu hình file env: tạo file env, copy và chỉnh sửa nội dung sau
MYSQL_PASS=[your mysql password]
Chạy lệnh để cài đặt các dependencies cần thiết: npm install
Khởi động server SailsJS: sails lift
Server sẽ khởi động trên http://localhost:1337.
Cài đặt phần frontend
3.1 Cài đặt website mua hàng
Giải nén file romand-fe và mở folder bằng vscode
Tạo file env tại thư mục gốc và thêm dòng sau
Chạy lệnh để cài đặt các dependencies cần thiết: npm install
Khởi động website bằng câu lệnh: npm run dev
Frontend sẽ khởi động trên http://localhost: 5173
Kiểm tra và chạy website: Mở trình duyệt web và truy cập vào http://localhost: 5173 để xem giao diện frontend của website.
3.2 Cài đặt hệ thống quản lý
Giải nén file romand-admin và mở folder bằng vscode
Tạo file env tại thư mục gốc và thêm dòng sau
Chạy lệnh để cài đặt các dependencies cần thiết: npm install
Khởi động website bằng câu lệnh: npm run dev
Frontend sẽ khởi động trên http://localhost: 5174
Kiểm tra và chạy website: Mở trình duyệt web và truy cập vào http://localhost: 5174 để xem giao diện frontend của website.
Hướng dẫn sử dụng
Tổng quan
Website bán mỹ phẩm Romand cung cấp trải nghiệm mua sắm dễ dàng và đa dạng, với các sản phẩm được thiết kế hiện đại và đa tông màu, phục vụ cho nhu cầu làm đẹp của mọi lứa tuổi Romand là thương hiệu mỹ phẩm Hàn Quốc nổi tiếng, chuyên cung cấp các sản phẩm trang điểm và chăm sóc da cao cấp.
Người dùng của website bao gồm: ˗ Khách hàng ˗ Nhân viên bán hàng ˗ Người quản trị
Khách hàng
2.1 Đăng nhập và đăng ký
Khách hàng điền đầy đủ thông tin: tài khoản, họ tên, email, số điện thoại, giới tính,mật khẩu sau đó ấn nút Created để đăng ký tài khoản Sau khi nhận thông báo tạo tài khoản thành công, chuyển sang màn hình Sign In (đăng nhập) điền username và password vừa tạo để đăng nhập vào hệ thống
2.2 Tìm kiếm và xem sản phẩm
Chọn icon tìm kiếm trên header, nhập tên từ khóa muốn tìm kiếm, giao diện hiển thị danh sách các sản phẩm có tên chứa từ khóa vừa nhập
Chọn sản phẩm muốn xem chi tiết, trang web chuyển hướng đến giao diện xem chi tiết sản phẩm
2.3 Thêm sản phẩm vào giỏ hàng
Chọn loại sản phẩm muốn đặt, chọn số lượng và nhấn nút Add to cart, hệ thống thông báo thêm hàng vào giỏ thành công
H.2.3.1 Thêm sản phẩm vào giỏ
Click vào icon giỏ hàng để xem chi tiết giỏ hàng, tại đây người dùng có thể chỉnh sửa lại số lượng sản phẩm trong giỏ hoặc xóa sản phẩm khỏi giỏ
Sau khi chọn sản phẩm trong giỏ hàng, nhấn Checkout để chuyển sang giao diện thanh toán
Chọn địa chỉ, phương thức vận chuyển, phương thức thanh toán, mã khuyến mãi sau đó
H.2.4.2 Giao diện đặt hàng thành công
2.5 Xem đơn hàng đã đặt
Xem danh sách đơn hàng đã đặt bằng cách chọn Icon Avatar → My Purchase Tại đây người dùng có thể xem tất cả đơn hàng hoặc lọc đơn hàng theo trạng thái (Processing, Delivering, Completed, Cancelled)
H.2.5.1 Danh sách hàng đã đặt
Nhấn vào Order ID để xem chi tiết đơn hàng
H.2.5.2 Chi tiết đơn hàng đã đặt
2.6 Sửa thông tin cá nhân
Người dùng chọn icon avatar trên header, chọnMy Account, hệ thống hiện giao diện thông tin người dùng Tại đây người dùng có thể sửa họ tên, giới tính, ngày sinh và ảnh đại diện
Chọn Addresses trên menu bên trái xem danh sách địa chỉ Tại đây người dùng có thể thêm, sửa, xóa địa chỉ
H.2.6.3 Giao diện thêm địa chỉ
Tại trang chi tiết sản phẩm, nhấn vào nút Write Review để viết đánh giá sản phẩm (Lưu ý: chỉ khi đã mua hàng thành công mới có thể đánh giá sản phẩm, mỗi người chỉ có thể đánh giá sản phẩm 1 lần, nếu đã đánh giá khi nhấn Write Review sẽ sửa đánh giá trước đó)
Chọn số sao bạn muốn đánh giá, thêm nhận xét, nhận xét nhắn gọn và ấn gửi
H.2.7.1 Giao diện đánh giá sản phẩm
Tại màn hình chính của website chọn icon message màu hồng ở góc phải bên dưới, 1 cửa số chứa danh sách đánh giá hệ thống hiện ra Người dùng có thể xem danh sách đánh giá, hoặc để lại nhận xét của mình và nhấn nút Send
Nhân viên bán hàng
Nhân viên điền thông tin username và password đã được cung cấp sau đó nhấn Log in để đăng nhập vào hệ thống
Có thể sử dụng thông tin sau để đăng nhập: binhtt / password456
Sau khi đăng nhập hiển thị giao diện sau
Nhân viên chọn menu quản lý sản phẩm, hệ thống hiển thị danh sách sản phẩm Tại đây nhân viên có thể tìm kiếm, thêm, sửa, xóa sản phẩm Ngoài ra có thể lọc sản phẩm theo loại hàng, sắp xếp thep giá thành, số lượng
H.3.2.1 Giao diện quản lý sản phẩm
Nhân viên nhấn vào icon edit, chuyển hướng sang trang chi tiết sản phẩm Tại đây có thể xem, sửa và xóa thông tin chung và các phân loại của sản phẩm
H.3.2.2 Chi tiết sản phẩm (thông tin chung)
H.3.2.3 Chi tiết sản phẩm (thông tin từng loại)
H.3.2.3 Sửa thông tin option của sản phẩm
Chọn menu Category Management để quản lý loại hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm loại hàng
H.3.3.1 Giao diện quản lý loại hàng
Nhấn vào nút Edit để sửa loại hàng
Chọn menu Order Management để quản lý đơn hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm đơn hàng, lọc đơn hàn theo trạng thái,…
H.3.4.1 Giao diện quản lý đơn hàng
Nhấn Detail để xem chi tiết đơn hàng
H.3.4.1 Giao diện chi tiết đơn hàng
Nhân viên chọn trạng thái của đơn hàng để cập nhật trạng thái của đơn
Chọn menu Shipping Type để quản lý phương thức giao hàng, tại đây có thể thêm, sửa, xóa, tìm kiếm phương thức giao hàng
H.3.5.1 Giao diện quản lý giao hàng
3.6 Quản lý mã khuyến mãi
Chọn menu Voucher Management để quản lý mã khuyến mãi, tại đây có thể thêm, sửa, xóa, tìm kiếm mã khuyến mãi
H.3.6.1 Giao diện quản lý mã khuyến mãi
Nhấn Edit để sửa hoặc create để thêm mã, có thể chọn 1 trong 2 loại mã là mã giảm theo giá trị và giảm theo phần trăm
3.7 Trả lời đánh giá sản phẩm
Chọn menu Product Review để quản lý đánh giá sản phẩm, tại đây có thể trả lời đánh giá sản phẩm, sửa hoặc xóa câu trả lời, lọc theo đã đánh giá hay chưa, rating, sắp xếp thep ngày đánh giá
H.3.7.1 Giao diện quản lý đánh giá sản phẩm
Quản trị
Nhà quản trị thực hiện đăng nhập giống như nhân viên bán hàng, giao diện của nhà quản trị sau khi đăng nhập
Chọn menu User Management để quản lý người dùng, tại đây có thể thêm, sửa, xóa, tìm kiếm người dùng
H.4.1.1 Giao diện quản lý người dùng
Nhấn Edit để sửa người dùng hoặc Create để thêm người dùng, có thể thêm các thông tin về họ tên đầy đủ, email, giới tính, ngày sinh Khi tạo mới người dùng, mật khẩu của người dùng được tạo tự động từ ngày sinh (DDMMYYYY) + username
Chọn menu Staff Management để quản lý nhân viên, tại đây có thể thêm, sửa, xóa, tìm kiếm nhân viên
H.4.2.1 Giao diện quản lý nhân viên
Nhấn Edit để sửa hoặc Create để thêm nhân viên, có thể thêm các thông tin về họ tên đầy đủ, email, giới tính, ngày sinh Khi tạo mới người dùng, mật khẩu của người dùng được tạo tự động từ ngày sinh (DDMMYYYY) + ‘St’
4.3 Trả lời đánh giá hệ thống
Chọn menu Website Feedback để quản lý đánh giá hệ thống, tại đây có thể trả lời đánh giá hệ thống, sửa hoặc xóa câu trả lời, lọc theo đã đánh giá hay chưa, sắp xếp thep ngày đánh giá
H.4.3.1 Giao diện quản lý đánh giá hệ thống
Nhấn vào icon edit để tạo câu trả lời hoặc sửa câu trả lời đánh giá
4.4 Xem báo cáo thống kê
Chọn menu Statistics để xem báo cáo thống kê
Thống kê theo doanh thu:
H.4.4.1 Thống kê doanh thu theo tháng
Chọn thống kê doanh thu theo ngày, sau đó chọn khoảng thời gian:
H.4.4.2 Thống kê doanh thu theo ngày