PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Phân tích nghiệp vụ và hệ thống
Các chức năng hỗ trợ khách hàng bao gồm: xem tin tức, xem chi tiết sản phẩm, tìm kiếm sản phẩm, thêm sản phẩm vào giỏ hàng, chỉnh sửa giỏ hàng, đặt hàng, lưu sản phẩm yêu thích, và trò chuyện trực tuyến với nhân viên bán hàng, mang lại nhiều tiện ích khi mua sắm.
Người quản trị Website đăng nhập vào hệ thống để điều hành và theo dõi hoạt động của hệ thống quản lý thông tin Họ có quyền sử dụng cấu hình, xem, xóa, sửa cơ sở dữ liệu, quản lý đơn hàng, danh mục, sản phẩm, bài viết, slider và thống kê doanh thu.
Biểu đồ luồng dữ liệu
2.2.1 Biểu đồ luồng dữ liệu mức khung cảnh
Hình 5 Biểu đồ luồng dữ liệu mức khung cảnh
2.2.2 Biểu đồ luồng dữ liệu mức đỉnh
Hình 6 Biểu đồ luồng dữ liệu mức đỉnh
2.2.3 Biểu đồ luồng dữ liệu mức dưới đỉnh
2.2.3.1 Chức năng quản lý bán hàng
Hình 7 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý bán hàng
2.2.3.2 Chức năng quản lý user
Hình 8 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý user
2.2.3.3 Chức năng quản lý sản phẩm
Hình 9 Biểu đồ luồng dữ liệu mức dưới đỉnh chức năng quản lý sản phẩm
Biểu đồ phân rã chức năng
Hình 10 Biểu đồ phân rã chức năng hệ thống
- Đăng nhập/Đăng ký thành viên
- Xem tin tức, bài viết
- Tìm kiếm, lọc sản phẩm
+ Thêm sản phẩm vào giỏ hàng
+ Xóa sản phẩm khỏi giỏ hàng
+ Thêm sản phẩm vào giỏ hàng yêu thích
+ Cập nhật giỏ hàng yêu thích
+ Xóa sản phẩm khỏi giỏ hàng yêu thích
- Tạo đơn hàng và theo dõi đơn hàng
- Cập nhật thông tin cá nhân
- Đăng nhập vào hệ thống
- Quản lý danh mục sản phẩm
+ Tìm kiếm danh mục sản phẩm
+ Thêm danh mục sản phẩm
+ Sửa danh mục sản phẩm
+ Xóa danh mục sản phẩm
- Quản lý bài viết, tin tức
+ Tìm kiếm bài viết, tin tức
+ Thêm bài viết, tin tức
+ Sửa bài viết, tin tức
+ Xóa bài viết, tin tức
- Quản lý sản phẩm, biến thể sản phẩm
+ Thêm sản phẩm, biến thể sản phẩm
+ Sửa sản phẩm, biến thể sản phẩm
+ Xóa sản phẩm, biến thể sản phẩm
- Quản lý tài khoản quản trị viên
+ Sửa thông tin tài khoản
- Quản lý mã giảm giá
+ Tìm kiếm mã giảm giá
Biểu đồ Use Case và mô tả kịch bản ca sử dụng
Hình 11 Biểu đồ Use Case
2.4.2 Mô tả kịch bản ca sử dụng
2.4.2.1.1 Mô tả kịch bản xem sản phẩm
Bảng 1 Mô tả kịch bản xem sản phẩm
- Người dùng chọn vào hình ảnh hay thông tin , giá, tên sản phẩm tại giao diện trang chủ hoặc trang danh sách sản phẩm
- Hệ thống sẽ lấy thông tin sản phẩm và chuyển hướng người dùng đến 1 trang mới hiển thị chi tiết thông tin sản phẩm
Kết quả Hiển thị chi tiết mô tả sản phẩm
2.4.2.1.2 Mô tả kịch bản tìm kiếm sách sản phẩm
Bảng 2 Mô tả kịch tìm kiếm sản phẩm
- Người dùng chọn chức năng tìm kiếm trên giao diện
- Hệ thống hiển thị 1 text box để nguời dùng nhập từ khóa tìm kiếm
- Người dùng nhập từ khóa tìm kiếm và bấm nút tìm kiếm
Hệ thống sẽ tìm kiếm các sản phẩm bằng cách kiểm tra từ khóa giống hoặc gần giống, và nếu không có sản phẩm nào phù hợp với từ khóa tìm kiếm, hệ thống sẽ thực hiện luồng sự kiện phụ 1.
- Sự kiện 1: thông báo không tìm thấy sản phầm nào phù hợp với kết quả.
Kết quả Danh sách sản phẩm người dùng muốn tìm kiếm
2.4.2.1.3 Mô tả kịch bản xem bài viết tin tức
Bảng 3 Mô tả kịch bản xem bài viết tin tức
- Người dùng click chọn vào tiêu đề hoặc hình ảnh bài viết trong trang danh sách bài viết
- Hệ thống sẽ lấy thống tin trả về và chuyển hướng đến trang chi tiết bài viết
- Người dùng xem tin tức từ kết quả trả về Kết quả Chi tiết của bài viết, tin tức
2.4.2.1.4 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng
Bảng 4 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng
Tác nhân Người dùng Điều kiện Đăng nhập vào hệ thống
- Người dùng cần dăng nhập để có thể sử dụng chức năng này
- Người dùng click vào biểu tượng giỏ hàng khi đang xem sản phẩm để thêm sản phẩm vào giỏ hàng
- Hệ thống sẽ đưa ra thông báo Thêm giỏ hàng thành công
Người dùng có thể dễ dàng cập nhật số lượng sản phẩm, phân loại sản phẩm (nếu có) hoặc xóa sản phẩm bằng cách nhấp vào biểu tượng giỏ hàng trên thanh header, hệ thống sẽ tự động chuyển hướng đến trang giỏ hàng.
- Nếu số lượng sản phẩm mà khách hàng chọn vượt quá số lượng tồn kho thì khách hàng sẽ không thể click lưu giỏ hàng
Kết quả Sản phẩm đã được thêm/cập nhật trong giỏ hàng
2.4.2.1.5 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng yêu thích
Bảng 5 Mô tả kịch bản thêm/cập nhật sản phẩm trong giỏ hàng
Tác nhân Người dùng Điều kiện Đăng nhập vào hệ thống
- Người dùng cần dăng nhập để có thể sử dụng chức năng này
- Người dùng click vào biểu tượng trái tim khi đang xem sản phẩm để thêm sản phẩm vào giỏ hàng yêu thích
- Hệ thống sẽ đưa ra thông báo Thêm giỏ hàng thành công
Người dùng có thể dễ dàng cập nhật phân loại sản phẩm, xóa sản phẩm hoặc chuyển sản phẩm vào giỏ hàng bằng cách nhấp vào biểu tượng trái tim trên thanh header Hệ thống sẽ tự động chuyển hướng đến trang giỏ hàng yêu thích, và kết quả sẽ hiển thị rằng sản phẩm đã được thêm hoặc cập nhật trong giỏ hàng yêu thích.
2.4.2.1.6 Mô tả kịch bản cập nhật thông tin cá nhân
Bảng 6 Mô tả kịch bản cập nhật thông tin cá nhân
Tác nhân Người dùng Điều kiện Đăng nhập vào hệ thống
- Người dùng cần dăng nhập để có thể sử dụng chức năng này
- Người dùng click vào biểu tượng người dùng trên thanh header, hệ thống sẽ chuyển hướng tới trang cá nhân.
- Tại tab Thông tin cá nhân, người dùng có thể xem và cập nhật thông tin cá nhân của mình
Kết quả Thông báo cập nhật thành công
2.4.2.1.7 Mô tả kịch bản xem đơn hàng cá nhân
Bảng 7 Mô tả kịch xem đơn hàng cá nhân
Tác nhân Người dùng Điều kiện Đăng nhập vào hệ thống
- Người dùng click vào biểu tượng người dùng trên thanh header, hệ thống sẽ chuyển hướng tới trang cá nhân.
Tại tab Đơn hàng của tôi, người dùng có thể xem tất cả các đơn hàng đã đặt, được phân loại theo từng trạng thái, giúp dễ dàng theo dõi kết quả danh sách đơn hàng cá nhân.
2.4.2.2.1 Mô tả kịch bản quản lý danh mục
Bảng 8 Mô tả kịch bản quản lý danh mục
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin danh mục ở form thêm bài viết
+ Hệ thống kiểm tra tính hợp lệ của thông tin nhập vào nếu các thông nhập vào đã đúng với định dạng yêu cầu thì thêm mới vào database
+ Nếu thông tin nhập vào không hợp lệ thì chuyển hướng đến luồng sự kiện phụ 1
Quản trị viên cập nhật dữ liệu theo định dạng yêu cầu Hệ thống kiểm tra tính hợp lệ của thông tin; nếu đúng định dạng, dữ liệu sẽ được cập nhật Ngược lại, nếu thông tin không hợp lệ, người dùng sẽ được chuyển hướng đến luồng sự kiện phụ 1.
+ Quản trị click chọn danh mục muốn xóa
Hệ thống sẽ xác nhận xem người dùng có chắc chắn muốn xóa danh mục hay không Nếu có, danh mục sẽ được xóa; nếu không, hệ thống sẽ chuyển hướng đến luồng sự kiện phụ 2.
- Sự kiện 1: Thông báo thông tin nhập vào không hợp lệ và yêu cầu nhập lại
- Sự kiện 2: Quay trở lại trang hiện tại Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.2 Mô tả kịch bản quản lý sản phẩm
Bảng 9 Mô tả kịch bản quản lý sản phẩm
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin sản phẩm ở form thêm sản phẩm
Hệ thống kiểm tra tính hợp lệ của thông tin nhập vào; nếu thông tin đúng định dạng, nó sẽ được thêm mới vào cơ sở dữ liệu Ngược lại, nếu thông tin không đúng định dạng, hệ thống sẽ chuyển hướng đến luồng sự kiện phụ 1.
Quản trị viên cập nhật thông tin sản phẩm, hệ thống sẽ kiểm tra tính hợp lệ của thông tin Nếu thông tin đúng định dạng, hệ thống sẽ tiến hành cập nhật; nếu không, sẽ chuyển hướng đến luồng sự kiện phụ 1.
Quản trị click vào sản phẩm cần xóa, hệ thống sẽ hiển thị thông báo xác nhận việc xóa Nếu người dùng đồng ý, sản phẩm sẽ được xóa; nếu không, hệ thống sẽ chuyển hướng đến luồng sự kiện phụ 2.
- Sự kiện phụ 1: Thông báo thông tin nhập vào không hợp lệ và yêu cầu nhập lại
- Sự kiện phụ 2: Quay trở lại trang hiện tại Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.3 Mô tả kịch bản quản lý banner
Bảng 10 Mô tả kịch bản quản lý banner
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin banner
+ Quản trị viên tiến hành sửa đổi thông tin của banner tại form cập nhật banner
+ Cập nhật sửa đổi banner
+ Xóa banner Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.4 Mô tả kịch bản quản lý mã giảm giá
Bảng 11 Mô tả kịch bản quản lý mã giảm giá
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin mã giảm giá
+ Quản trị viên tiến hành sửa đổi thông tin của mã giảm giá tại form cập nhật mã giảm giá
+ Cập nhật sửa đổi mã giảm giá
+ Chọn mã giảm giá muốn xóa
+ Xóa mã giảm giá Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.5 Mô tả kịch bản quản lý đơn hàng
Bảng 12 Mô tả kịch bản quản lý đơn hàng
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
- Quản trị viên xem danh sách các đơn hàng
- Quản trị viên cập nhật trạng thái đơn hàng
+ Đơn hàng đang xử lý sẽ được phép cập nhật trạng thái lên thành công hoặc hủy
+ Đơn hàng thành công không được cập nhật trạng thái
Kết quả Hệ thống thông báo thành công hoặc báo lỗi
2.4.2.2.6 Mô tả kịch bản quản lý người dùng
Bảng 13 Mô tả kịch bản quản lý người dùng
Tác nhân Quản trị viên Điều kiện Đăng nhập vào hệ thống quản trị
Luồng sự kiện chính Luồng sự kiện chính:
+ Quản trị viên nhập thông tin người dùng
+ Quản trị viên tiến hành sửa đổi thông tin của mã giảm giá tại form cập nhật người dùng
+ Cập nhật sửa đổi người dùng
+ Chọn người dùng muốn xóa
+ Xóa người dùngKết quả Hệ thống thông báo thành công hoặc báo lỗi
Biểu đồ tuần tự
Hình 12 Biểu đồ tuần tự xem sản phẩm
Hình 13 Biểu đồ tuần tìm kiếm sản phẩm
Hình 14 Biểu đồ tuần thêm giỏ hàng
Hình 15 Biểu đồ tuần tự xóa giỏ hàng
Hình 16 Biểu đồ tuần tự thanh toán
Hình 17 Biểu đồ tuần tự đăng nhập admin
Hình 18 Biểu đồ tuần tự duyệt đơn hàng
Phân tích cơ sở dữ liệu
2.6.1 Cấu trúc bảng cơ sở dữ liệu
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính title Varchar(255) Tiêu đề banner Text Đường dẫn ảnh banner is_active Boolean Trạng thái của banner
Created_at Datetime Thời điểm tạo banner
Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính name Varchar(255) Tiêu đề
Group_name Varchar(255) Nhóm danh mục is_active Boolean Trạng thái của danh mục
Created_at Datetime Thời điểm tạo danh mục
Updated_at Datetime Thời điểm cập nhật lần cuối
Created_by Bigint(20) Khóa ngoại (tạo bởi user nào)
Updated_by Bigint(20) Khóa ngoại (cập nhật lần cuối bởi user nào)
Bảng 16 Bảng mã giảm giá
Bài viết mô tả cấu trúc dữ liệu của một bảng mã giảm giá với các trường sau: id là khóa chính kiểu Bigint(20), name là tiêu đề kiểu Varchar(255), value là giá trị mã giảm giá kiểu Integer, condition là điều kiện áp dụng mã giảm giá (giá trị tối thiểu của đơn hàng) kiểu Integer, limit là số lần sử dụng tối đa kiểu Integer, và is_active là trạng thái của mã giảm giá kiểu Boolean.
Created_at Datetime Thời điểm tạo mã giảm giá
Updated_at Datetime Thời điểm cập nhật lần cuối
Created_by Bigint(20) Khóa ngoại (tạo bởi user nào)
Updated_by Bigint(20) Khóa ngoại (cập nhật lần cuối bởi user nào)
Tên trường Kiểu dữ liệu
Mô tả id Bigint(20) Khóa chính cnt Integer Số lượng sản phẩm
Product_id Bigint(20) Khóa ngoại (sản phẩm)
Product_variant_id Bigint(20) Khóa ngoại (biến thể sản phẩm)
Created_at Datetime Thời điểm tạo giỏ hàng
User_id Bigint(20) Khóa ngoại (tạo bởi user nào)
2.6.1.5 Bảng giỏ hàng yêu thích
Bảng 18 Bảng giỏ hàng yêu thích
Tên trường Kiểu dữ liệu
Mô tả id Bigint(20) Khóa chính
Product_id Bigint(20) Khóa ngoại (sản phẩm)
Product_variant_id Bigint(20) Khóa ngoại (biến thể sản phẩm)
Created_at Datetime Thời điểm tạo giỏ hàng yêu thích
User_id Bigint(20) Khóa ngoại (tạo bởi user nào)
Bảng 19 Bảng ảnh sản phẩm
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính title Varchar(255) Tiêu đề ảnh image Text Đường dẫn ảnh
Product_id Bigint(20) Khóa ngoại (sản phẩm)
Product_variant_id Bigint(20) Khóa ngoại (biến thể sản phẩm)
Created_at Datetime Thời điểm tạo ảnh sản phẩm
Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính name Varchar(255) Tiêu đề sản phẩm description Text Mô tả sản phẩm price Integer Giá sản phẩm
Is_Active Boolean Trạng thái sản phẩm
Discount Integer Giảm giá sản phẩm
View_cnt Integer Lượt xem sản phẩm
Sole_cnt Integer Lượt bán sản phẩm
Stock_cnt Integer Số lượng tồn kho sản phẩm
Created_by Bigint(20) Khóa ngoại (tạo bởi user nào)
Updated_by Bigint(20) Khóa ngoại (cập nhật lần cuối bởi user nào) category_id Bigint(20) Khóa ngoại (danh mục)
Created_at Datetime Thời điểm tạo ảnh sản phẩm
Updated_at Datetime Thời điểm cập nhật lần cuối
2.6.1.8 Bảng biến thể sản phẩm
Bảng 21 Bảng biến thể sản phẩm
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính name Varchar(255) Tiêu đề biến thể sản phẩm price Integer Giá biến thể sản phẩm
Is_Active Boolean Trạng thái sản phẩm
Discount Integer Giảm giá biến thể sản phẩm
Stock_cnt Integer Số lượng tồn kho sản phẩm
Created_by Bigint(20) Khóa ngoại (tạo bởi user nào)
Updated_by Bigint(20) Khóa ngoại (cập nhật lần cuối bởi user nào) Product_id Bigint(20) Khóa ngoại (sản phẩm gốc)
Created_at Datetime Thời điểm tạo ảnh sản phẩm
Updated_at Datetime Thời điểm cập nhật lần cuối
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính name Varchar(255) Tiêu đề đơn hàng
Total_price Integer Tổng giá trị đơn hàng note Text Ghi chú cho đơn hàng
Discount_id Bigint(20) Khóa ngoại (mã giảm giá) state Integer Trạng thái của đơn hàng method Integer Phương thức thanh toán address Text Địa chỉ nhận hàng
Updated_by Bigint(20) Khóa ngoại (cập nhật lần cuối bởi user nào)Customer_id Bigint(20) Khóa ngoại (Khách hàng)
Created_at Datetime Thời điểm tạo ảnh sản phẩm Updated_at Datetime Thời điểm cập nhật lần cuối
2.6.1.10 Bảng chi tiết đơn hàng
Bảng 23 Bảng chi tiết đơn hàng
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính
Sub_total Integer Tổng giá trị của chi đơn hàng Product_id Bigint(20) Khóa ngoại (sản phẩm) cnt Integer Số lượng sản phẩm
Product_variant_id Bigint(20) Khóa ngoại (biến thể sản phẩm) Oder_id Bigint(20) Khóa ngoại (Đơn hàng)
Tên trường Kiểu dữ liệu Mô tả id Bigint(20) Khóa chính passwotd Varchar(255) Mật khẩu username Varchar(255) Tên đăng nhập email Varchar(255) Email
Full_name Varchar(255) Họ và tên
Phone_number Varchar(30) Số điện thoại avatar Text Đường dẫn ảnh đại diện gender Integer Giới tính address Text Địa chỉ introduction Text Giới thiệu bản thân
Is_active Boolean Trạng thái người dùng
Created_at Datetime Thời điểm tạo
Updated_at Datetime Thời điểm cập nhật lần cuối
Is_admin Boolean Là quản trị viên
Is_customer Boolean Là khách hàng
Fcm_token Text Token của firebase
Token Text Mã token đăng nhập
2.6.3.1 Xác định các thực thể và các quan hệ giữa các thực thể
2.6.3.2 Mối quan hệ giữa các thực thể
2.6.3.2.1 Mối quan hệ has (có)
- Thực thể tham gia category (danh mục sản phẩm) và product (sản phẩm)
Một danh mục sản phẩm thì có thể có nhiều sản phẩm (quan hệ một - nhiều)
- Thực thể tham gia product (sản phẩm) và image (ảnh liên quan sản phẩm)
Một sản phẩm thì có thể có nhiều ảnh liên quan đến sản phẩm đó (quan hệ một - nhiều)
- Thực thể tham gia product (sản phẩm) và product_variant (biến thể)
Một sản phẩm thì chứa nhiều biến thể sản phẩm (quan hệ một – nhiều)
- Thực thể tham gia user (người dùng) và cart, wish (giỏ hàng, giỏ hàng yêu thích)
Một người dùng có thể có nhiều giỏ hàng và giỏ hàng yêu thích (tương ứng với mỗi sản phẩm)
- Thực thể tham gia order (đơn hàng) và discount (mã giảm giá)
Một đơn hàng chỉ có một mã giảm giá, một mã giảm giá được sử dụng trong nhiều đơn hàng (quan hệ một – nhiều)
2.6.3.2.2 Mối quan hệ contains (thuộc, chứa đựng, bao gồm)
- Thực thể tham gia product (sản phẩm) và order (đơn hàng)
Một sản phẩm thì thuộc nhiều đơn hàng, một đơn hàng có nhiều sản phẩm (quan hệ nhiều – nhiều)
Giỏ hàng và giỏ hàng yêu thích chỉ chứa một sản phẩm, thể hiện mối quan hệ một – một giữa sản phẩm và các thực thể này.
2.6.3.2.3 Mối quan hệ submit (đặt)
- Thực thể tham gia user (khách hàng) và order (đơn hàng)
Một khách hàng thì đặt nhiều đơn hàng (quan hệ một - nhiều)
THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG
Trang người dùng
Trang chủ của website bao gồm các banner hấp dẫn, thanh tìm kiếm sản phẩm, và giỏ hàng Ngoài ra, giỏ hàng yêu thích còn hiển thị danh sách các sản phẩm nổi bật và bán chạy nhất, cùng với chức năng theo dõi đơn hàng của khách hàng.
Người dùng có thể khám phá các sản phẩm nổi bật và bán chạy của cửa hàng, xem chi tiết từng sản phẩm, đọc các bài viết và tin tức liên quan đến công nghệ, cũng như thực hiện đặt hàng dễ dàng.
Trong giao diện người dùng, trang chủ
Hình 22 Sản phẩm nổi bật
Hiển thị các sản nổi bật của cửa hàng, các sản phẩm này sẽ có số lượt xem nhiều nhất được sắp xếp từ cao xuống thấp.
Trong giao diện người dùng, trang chủ của Website.
Hình 23 Sản phẩm bán chạy
Cửa hàng hiển thị danh sách các sản phẩm bán chạy nhất dựa trên số lượng đã bán, giúp người dùng dễ dàng tham khảo và tìm kiếm sản phẩm phù hợp với nhu cầu của mình.
Trong giao diện người dùng, trang chủ của Website.
Hình 24 Sản phẩm theo từng danh mục
Danh sách sản phẩm được hiển thị theo từng danh mục, cho phép người dùng dễ dàng đặt hàng và mua ngay Hệ thống hỗ trợ lọc sản phẩm theo các tiêu chí như Mới nhất, Cũ nhất, Giá tăng dần và Giá giảm dần mà không cần tải lại trang, mang lại trải nghiệm mượt mà và thoải mái cho người dùng.
Trong giao diện người dùng, trang Sản phẩm.
Sau khi khách hàng click vào các danh mục bên sidebar hoặc các tab lọc như Mới nhất,
Hệ thống sẽ cung cấp danh sách sản phẩm dựa trên tiêu chí bộ lọc mà người dùng đã chọn, bao gồm cả giá tăng dần và giá giảm dần.
Hình 25 Chi tiết sản phẩm
Chức năng này cho phép người dùng xem chi tiết về thông tin của sản phẩm và đặt hàng hoặc lưu sản phẩm vào giỏ hàng yêu thích.
Trong giao diện người dùng, trang chi tiết sản phẩm.
Hình 26 Sản phẩm cùng danh mục
Chức năng này cho phép người dùng xem các sản phẩm cùng danh mục của sản phẩm đang xem.
Trong giao diện người dùng, trang chi tiết sản phẩm.
Hình 27 Trang giỏ hàng yêu thích
Chức năng này cho phép người dùng quản lý các sản phẩm đã lưu trong giỏ hàng yêu thích của mình.
Trong giao diện người dùng, trang giỏ hàng yêu thích hiển thị các thông tin quan trọng như tên sản phẩm, ảnh sản phẩm, giá cả và phân loại sản phẩm (nếu có).
Chức năng này giúp người dùng quản lý danh sách sản phẩm yêu thích trong giỏ hàng Nếu khách hàng muốn mua ngay, họ có thể dễ dàng chuyển sản phẩm sang giỏ hàng.
Chức năng này cho phép người dùng xem và quản lý các sản phẩm đã thêm vào giỏ hàng.
Trong giao diện người dùng của trang giỏ hàng, các thông tin hiển thị bao gồm tên sản phẩm, hình ảnh sản phẩm, đơn giá, số lượng, thành tiền và phân loại sản phẩm (nếu có).
Chức năng này giúp người dùng quản lý danh sách, số lượng và phân loại sản phẩm trong giỏ hàng Khách hàng có thể dễ dàng tạo đơn hàng bằng cách nhấn nút Tạo đơn hàng để chuyển danh sách giỏ hàng đến trang tương ứng Nếu muốn lưu sản phẩm để mua sau, khách hàng chỉ cần chọn nút Yêu thích để chuyển sản phẩm sang Giỏ hàng yêu thích.
Chức năng này cho phép người dùng chọn mã giảm giá, nhập địa chỉ nhận hàng, ghi chú cho cửa hàng và tiến hành đặt hàng, với thông tin đơn hàng được gửi lên hệ thống.
Trong giao diện người dùng, trang Tạo đơn hàng.
Sau khi hoàn tất việc điền thông tin và nhấn nút đặt hàng, đơn hàng sẽ được gửi lên hệ thống Người dùng sẽ nhận thông báo "Đặt hàng thành công" và được chuyển hướng đến trang theo dõi đơn hàng trong Trang cá nhân.
Hình 31 Trang Đơn hàng của tôi
Chức năng này cho phép khách hàng có thể theo dõi thông tin về đơn hàng.
Trong giao diện người dùng, trang Đơn hàng của tôi trong Trang cá nhân.
Sau khi người chọn vào các bộ lọc trạng thái đơn hàng, hệ thống sẽ trả về thông tin của đơn hàng đó.
Hình 32 Trang Thông tin cá nhân
Chức năng này cho phép người dùng có thể xem và cập nhật các thông tin cá nhân.
Trong giao diện người dùng, trang Thông tin cá nhân.
Hình 33 Trang đổi mật khẩu
Chức năng này cho phép người dùng có thể đổi mật khẩu đăng nhập vào trang web
Trong giao diện người dùng, trang Đổi mật khẩu.
Chức năng này cho phép người dùng có thể để lại lời nhắn cho cửa hàng.
Trong giao diện người dùng, trang Liên hệ.
Sau khi người dùng hoàn tất thông tin và nhấn nút Liên hệ, hệ thống sẽ gửi thông báo đến cửa hàng Nhân viên sẽ chủ động liên lạc với khách hàng dựa trên thông tin liên hệ đã cung cấp.
Hình 35 Trang Đăng ký thành viên
Chức năng này cho phép người dùng có thể đăng ký tài khoản để sử dụng các chức năng yêu cầu phải đăng nhập.
Trong giao diện người dùng, trang Đăng ký.
Chức năng này cho phép người dùng có thể đăng nhập để sử dụng các chức năng yêu cầu phải đăng nhập.
Trong giao diện người dùng, trang Đăng nhập.
Trang quản trị
Hình 37 Đăng nhập trang quản trị
Chức năng này cho phép người quản trị Website đăng nhập vào hệ thống
Trong giao diện quản trị, trang đăng nhập.
Sau khi người dùng điền đầy đủ và chính xác thông tin về tài khoản quản trị sẽ tiến hành đăng nhập vào hệ thống.
Hình 38 Bảng điều khiển trang quản trị
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem thống kê số lượng của các module cần quản lý trong hệ thống.
Trong giao diện quản trị, trang chủ quản trị.
Hình 39 Quản lý sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về sản phẩm.
Trong giao diện quản trị, trang sản phẩm.
Người dùng có thể thực hiện các thao tác như cập nhật trạng thái sản phẩm và xóa nhiều sản phẩm cùng lúc Bên cạnh đó, họ cũng có thể sử dụng từ khóa để tìm kiếm sản phẩm một cách dễ dàng.
Hình 40 Quản lý thêm sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng thêm sản phẩm mới.
Trong giao diện quản trị, trang sản phẩm.
Khi người dùng nhấn nút Thêm mới, hệ thống sẽ hiển thị popup Thêm sản phẩm, cho phép người dùng nhập đầy đủ thông tin và hình ảnh của sản phẩm để thêm mới.
Hình 41 Quản lý sửa thông tin sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập nhật thông tin sản phẩm và biến thể sản phẩm.
Trong giao diện quản trị, trang sản phẩm.
Khi người dùng nhấp vào biểu tượng Sửa trên mỗi dòng sản phẩm, hệ thống sẽ hiển thị popup Sửa sản phẩm, cho phép người dùng xem và chỉnh sửa thông tin sản phẩm hoặc tạo mới các biến thể sản phẩm.
Hình 42 Quản lý danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về danh mục sản phẩm.
Trong giao diện quản trị, trang danh mục.
Người dùng có thể thực hiện thao tác cập nhật trạng thái cho danh mục sản phẩm và xóa nhiều danh mục cùng lúc Ngoài ra, họ cũng có thể sử dụng từ khóa để tìm kiếm danh mục sản phẩm một cách dễ dàng.
Hình 43 Quản lý thêm danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng thêm mới danh mục sản phẩm.
Trong giao diện quản trị, trang danh mục.
Khi người dùng nhấn nút Thêm mới, hệ thống sẽ hiển thị popup Thêm danh mục, cho phép người dùng nhập đầy đủ thông tin cần thiết để tạo danh mục sản phẩm mới.
Hình 44 Quản lý sửa danh mục sản phẩm
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập nhật thông tin danh mục sản phẩm.
Trong giao diện quản trị, trang danh mục.
Khi người dùng nhấp vào biểu tượng Sửa trên mỗi dòng danh mục, hệ thống sẽ hiển thị popup Sửa danh mục, cho phép người dùng xem và chỉnh sửa thông tin của danh mục sản phẩm.
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về các banner.
Trong giao diện quản trị, trang Banner.
Người dùng có thể chọn thao tác để cập nhật trạng thái của banner, xóa nhiều banner cùng lúc và sử dụng từ khóa để tìm kiếm banner một cách dễ dàng.
Hình 46 Quản lý thêm banner
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng thêm mới banner.
Trong giao diện quản trị, trang Banner.
Khi người dùng nhấn nút Thêm mới, hệ thống sẽ hiển thị popup Thêm banner, cho phép người dùng điền đầy đủ thông tin cần thiết để tạo banner mới.
Hình 47 Quản lý sửa banner
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập thông tin của banner.
Trong giao diện quản trị, trang Banner.
Khi người dùng nhấp vào biểu tượng Sửa trên mỗi dòng banner, hệ thống sẽ hiển thị popup Sửa banner, cho phép người dùng xem và chỉnh sửa thông tin của banner.
Hình 48 Quản lý mã giảm giá
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về các mã giảm giá.
Trong giao diện quản trị, trang Mã giảm giá.
Người dùng có thể dễ dàng chọn thao tác để cập nhật trạng thái mã giảm giá và xóa nhiều mã giảm giá cùng lúc Ngoài ra, họ cũng có thể sử dụng từ khóa để tìm kiếm mã giảm giá một cách nhanh chóng.
Hình 49 Quản lý thêm mã giảm giá
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người thêm mới mã giảm giá.
Trong giao diện quản trị, trang Mã giảm giá.
Khi người dùng nhấn nút Thêm mới, hệ thống sẽ hiển thị popup để thêm mã giảm giá Người dùng cần điền đầy đủ thông tin liên quan đến mã giảm giá trước khi thực hiện việc thêm mới.
Hình 50 Quản lý sửa mã giảm giá
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập nhật thông tin các mã giảm giá.
Trong giao diện quản trị, trang Mã giảm giá.
Khi người dùng nhấp vào biểu tượng Sửa trên mỗi dòng mã giảm giá, hệ thống sẽ hiển thị popup cho phép chỉnh sửa thông tin mã giảm giá.
Hình 51 Quản lý đơn hàng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về các đơn hàng.
Trong giao diện quản trị, trang thêm bài viết.
Người dùng tiến hành chọn thao tác và xóa nhiều đơn hàng cùng một lúc Và người dùng có thể có từ khóa để tìm kiếm đơn hàng.
Hình 52 Quản lý cập nhật đơn hàng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập nhật trạng thái đơn hàng.
Trong giao diện quản trị, trang thêm bài viết.
Khi người dùng nhấp vào biểu tượng Sửa trên mỗi dòng đơn hàng, hệ thống sẽ hiển thị popup Sửa đơn hàng, cho phép người dùng xem và chỉnh sửa trạng thái của đơn hàng.
Hình 53 Quản lý người dùng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và quản lý các thông tin về người dùng trong hệ thống.
Trong giao diện quản trị, trang Người dùng.
Người dùng có thể thực hiện thao tác cập nhật trạng thái và xóa nhiều tài khoản cùng lúc, đồng thời sử dụng từ khóa để tìm kiếm người dùng một cách dễ dàng.
Hình 54 Quản lý thêm người dùng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người thêm mới người dùng trong hệ thống.
Trong giao diện quản trị, trang Người dùng.
Khi người dùng nhấn nút Thêm mới, hệ thống sẽ hiển thị popup Thêm người dùng, cho phép người dùng nhập đầy đủ thông tin cần thiết để thêm mới người dùng.
Hình 55 Quản lý sửa người dùng
Người dùng sẽ phải đăng nhập vào hệ thống bằng tài khoản quản trị viên.
Trang này cho phép người dùng xem và cập nhật thông tin người dùng trong hệ thống.
Trong giao diện quản trị, trang Người dùng.
TRIỂN KHAI, KIỂM THỬ VÀ ĐÁNH GIÁ
Triển khai trang web
- Yêu cầu đối với phần cứng:
CPU từ 1.6 GHz trở lên
RAM từ 1 GB trở lên
- Yêu cầu đối với phần mềm:
Công cụ lập trình Visual Studio Code
Ngôn ngữ lập trình Python phiên bản 3.8 trở lên
Pip (1 trình quản lý gói cho Python) phiên bản 20.2 trở lên
Framework Django phiên bản 3.1 trở lên
Node.js (1 nền tảng của Javascript) phiên bản 16 trở lên
Npm (1 trình quản lý gói cho Node.js) phiên bản 8.1.3 trở lên
Vue Cli (CLI – Command Line Interface) phiên bản 4.5 trở lên
Quasar Cli phiên bản 1.2 trở lên
Heroku phiên bản 7.54 trở lên
Firebase phiên bản 10.2 trở lên
- Yêu cầu về tài khoản:
Tài khoản Google, kết nối với Firebase
Tài khoản Heroku kết nối với một tài khoản Github hoặc Gitlab
- Yêu cầu về kỹ thuật:
Triển khai phần Backend server lên Heroku app
Triển khai phần Frontend website lên Firebase hosting (máy chủ Firebase)
Kiểm thử và Đánh giá
- Website đã hoàn thành cơ bản các yêu cầu đã đặt ra của bài toán, bao gồm:
Để xây dựng một trang web hoàn chỉnh, cần hoàn thành các trang thiết yếu như: Trang chủ, trang đăng ký và đăng nhập, quản lý thông tin cá nhân, danh sách sản phẩm và chi tiết sản phẩm, giỏ hàng, cũng như quy trình đặt hàng Ngoài ra, cần thiết lập giao diện Admin để quản lý sản phẩm và đơn hàng hiệu quả.
- Người dùng đã có thể đăng ký thành viên và đăng nhập vào hệ thống.
- Khách hàng đăng nhập để sử dụng chức năng Giỏ hàng và tiến hành đặt hàng.
- Khách hàng đăng nhập có thể sử dụng chức năng giỏ hàng yêu thích để lưu sản phẩm muốn mua sau này.
- Khách hàng có thể xem và tìm kiếm sản phẩm theo Tên, Danh mục.
- Hiển thị nội dung danh mục sản phẩm và chi tiết sản phẩm.
- Người dùng đăng nhập vào hệ thống có thể quản lý thông tin cá nhân của mình, lấy lại mật khẩu nếu đã quên mật khẩu.
- Khách hàng đăng nhập vào hệ thống có thể xem và theo dõi các đơn hàng đã mua
Admin có khả năng quản lý người dùng, banner, mã giảm giá, danh mục, sản phẩm và đơn hàng thông qua trang quản trị riêng.
- Có hệ thống thông báo mỗi khi Khách hàng nhập thông tin liên hệ, đăng ký hoặc tạo đơn hàng
- Chưa có các phần chức năng liên quan đến bài viết, tin tức
- Chưa tích hợp được tính năng thanh toán online
- Tốc độ lấy dữ liệu từ server còn chậm
- Chưa có trang thống kê số liệu
