MỤC TIÊU CỦA ĐỀ TÀI
1.1 Các công nghệ sử dụng ở front–end 1.2 Các công nghệ sử dụng ở back–end Chương
2 Khảo sát hiện trạng và mô hình hóa yêu cầu
2.2 Kiến trúc chung của hệ thống
2.4 Mô hình hóa yêu cầu
Chương 3 Thiết kế phần mềm
3.3 Thiết kế cơ sở dữ liệu
Chương 4 Cài đặt và kiểm thử
STT Thời gian Công việc Ghi chú
1 13/02/2023 – 20/03/2023 Thiết kế usecase và mô hình hóa yêu cầu.
Thiết kế cơ sở dữ liệu.
Tìm hiểu về thư viện ReactJS của JavaScript.
2 21/03/2023 – 07/04/2023 Tìm hiểu về Spring Boot và Spring
Tìm hiểu về nền tảng AWS Elastic Beanstalk và AWS S3.
Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API
Tìm hiểu về SQL và MySQL để áp dụng vào lưu trữ dữ liệu người dùng của hệ thống
Tiến hành phát triển API dựa trên các kiến thức đã tìm hiểu được và các tài
Tiến hành xây dựng giao diện người dùng cho hệ thống.
Kết hợp các phần đã xây dựng lại với
5 09/05/2023 – 09/06/2023 nhau (giao diện, API, cơ sở dữ liệu).
Tìm hiểu, sửa đổi hệ thống để hoàn thiện.
6 09/06/2023 – 20/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi.
7 21/06/2023 – 10/07/2023 Viết và hoàn thiện báo cáo.
Ngày……tháng……năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 15
4 MỤC TIÊU CỦA ĐỀ TÀI 16
CHƯƠNG 1 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 18
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 24
2.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 24
2.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 33
2.2.4 Ứng dụng Spring boot vào đề tài 35
2.3 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 39
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 40
3.1 MÔ HÌNH HÓA YÊU CẦU 40
3.1.2 Đặc tả các Use case về phía Người dùng 43
3.1.3 Đặc tả Use case về phía quản trị viên 58
3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 99
3.4.1 Lược đồ thực thể kết hợp (ERD) 99
3.4.2 Chi tiết bảng dữ liệu 99
3.5.1 Màn hình giao diện phía người dùng 111
3.5.2 Màn hình giao diện phía quản trị viên 130
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 154
Bảng 1.1 Bảng yêu cầu nghiệp vụ 22
Bảng 3.1 Mô tả Use case “Đăng ký” 43
Bảng 3.2 Mô tả Use case “Đăng nhập” 44
Bảng 3.3 Mô tả Use case “Chỉnh sửa thông tin tài khoản” 45
Bảng 3.4 Mô tả Use case “Đổi mật khẩu” 46
Bảng 3.5 Mô tả Use case “Xem chi tiết thông tin của một sản phẩm” 47
Bảng 3.6 Mô tả Use case “Xem chi tiết thông tin của một sản phẩm” 47
Bảng 3.7 Mô tả Use case “Xóa sản phẩm khỏi giỏ hàng” 48
Bảng 3.8 Mô tả Use case “Thêm địa chỉ nhận hàng” 49
Bảng 3.9 Mô tả Use case “Chỉnh sửa địa chỉ nhận hàng” 50
Bảng 3.10 Mô tả Use case “Xóa địa chỉ nhận hàng” 51
Bảng 3.11 Mô tả Usecase “Xem lịch sử mua hàng” 52
Bảng 3.12 Mô tả Use case “Đặt hàng” 52
Bảng 3.13 Mô tả Use case “Hủy đơn hàng” 53
Bảng 3.14 Mô tả Use case “Tìm kiếm sản phẩm” 54
Bảng 3.15 Mô tả Use case “Tìm kiếm sản phẩm” 55
Bảng 3.16 Mô tả Use case “Tìm kiếm sản phẩm” 56
Bảng 3.17 Mô tả Use case “Áp dụng voucher cho đơn hàng” 56
Bảng 3.18 Mô tả Use case “Thêm thuộc tính kích cỡ” 58
Bảng 3.19 Mô tả Use case “Sửa thuộc tính kích cỡ” 58
Bảng 3.20 Mô tả Use case “Xóa thuộc tính kích cỡ” 59
Bảng 3.21 Mô tả Use case “Thêm thuộc tính màu sắc” 60
Bảng 3.22 Mô tả Use case “Chỉnh sửa thuộc tính màu sắc” 61
Bảng 3.23 Mô tả Use case “Xóa thuộc tính màu sắc” 62
Bảng 3.24 Mô tả Use case “Thêm sản phẩm” 62
Bảng 3.25 Mô tả Use case “Chỉnh sửa sản phẩm” 63
Bảng 3.26 Mô tả Use case “Xóa sản phẩm” 64
Bảng 3.27.Mô tả Use case “Vô hiệu hóa tài khoản User” 65
Bảng 3.28 Mô tả Use case “Thêm danh mục sản phẩm” 65
Bảng 3.29 Mô tả Use case “Chỉnh sửa danh mục sản phẩm” 66
Bảng 3.30 Mô tả Use case “Xóa danh mục sản phẩm” 67
Bảng 3.31 Mô tả Usecase “Thống kê” 68
Bảng 3.32 Mô tả Use case “Kích hoạt tài khoản người dùng” 68
Bảng 3.33 Mô tả Usecase “Xác nhận đơn hàng” 69
Bảng 3.34 Mô tả Use case “Kích hoạt đánh giá” 71
Bảng 3.35 Mô tả Use case “Thêm voucher” 72
Bảng 3.36 Mô tả Use case “Chỉnh sửa voucher” 74
Bảng 3.53 Mô tả màn hình trang chủ 113
Bảng 3.54 Mô tả giao diện đăng nhập 114
Bảng 3.55 Mô tả giao diện đăng ký 115
Bảng 3.56 Mô tả giao diện danh sách sản phẩm 116
Bảng 3.57 Mô tả giao diện chi tiết sản phẩm 117
Bảng 3.58 Mô tả giao diện chi tiết sản phẩm 118
Bảng 3.59 Mô tả giao diện lịch sử mua hàng 119
Bảng 3.60 Mô tả giao diện chi tiết đơn hàng 120
Bảng 3.61 Mô tả giao diện thêm địa chỉ 122
Bảng 3.62 Mô tả giao diện giỏ hàng 123
Bảng 3.63 Mô tả giao diện chọn địa chỉ thanh toán 124
Bảng 3.64 Mô tả giao diện thanh toán 125
Bảng 3.65 Mô tả giao diện kết quả thanh toán 126
Bảng 3.66 Mô tả giao diện điều khiển 131
Bảng 3.67 Mô tả giao diện danh sách đơn hàng 132
Bảng 3.68 Mô tả giao diện chi tiết đơn hàng 133
Bảng 3.69 Mô tả giao diện danh sách sản phẩm 134
Bảng 3.70 Mô tả giao diện chi tiết sản phẩm – 1 135
Bảng 3.71 Mô tả giao diện chi tiết sản phẩm -2 137
Bảng 3.72 Mô tả giao diện danh sách phân loại 137
Bảng 3.73 Mô tả giao diện chi tiết phân loại 139
Bảng 3.74 Mô tả giao diện thêm phân loại 140
Bảng 3.75 Mô tả giao diện màu sắc/kiểu dáng 140
Bảng 3.76 Mô tả giao diện chi tiết màu sắc 141
Bảng 3.77 Mô tả giao diện thêm màu sắc 142
Bảng 3.78 Mô tả giao diện danh sách kích cỡ 143
Bảng 3.79 Mô tả giao diện chi tiết kích cỡ 144
Bảng 3.80 Mô tả giao diện thêm kích cỡ 145
Bảng 3.81 Mô tả giao diện thống kê 146
Bảng 3.82 Mô tả giao diện danh sách người dùng 147
Bảng 3.83 Mô tả giao diện chi tiết người dùng 148
Bảng 3.84 Mô tả giao diện đăng nhập của quản trị viên 149
Bảng 3.85 Mô tả giao diện chọn màu giao diện và tab thông tin cá nhân 150
Bảng 3.86 Mô tả giao diện danh sách đánh giá sản phẩm 151
Bảng 4.1 Bảng rủi ro và kế hoạch giảm nhẹ 158
Bảng 4.2 Kết quả kiểm thử chức năng phía Người dùng 159
Bảng 4.3 Kết quả kiểm thử chức năng phía quản trị viên 162
Hình 1.1.1 Hình ảnh trang chủ của website www.yame.vn 20
Hình 2.1 Khởi tạo dự án 25
Hình 2.2 Cấu trúc của dự án (bao gồm người dùng và quản trị viên) 26
Hình 2.4 Ví dụ về các className của TailwindCSS 29
Hình 2.7 Ứng dụng Axios để gọi API và đón chặn các request 32
Hình 2.8 Hình Áp dụng RESTful API vào đề tài trong AddressController 34
Hình 2.9 JWT của một user sau khi đã đăng nhập 36
Hình 2.10 Hình Áp dụng JWT trong việc sinh ra token 37
Hình 2.11 Chi tiết hàm đăng nhập 37
Hình 2.12 Áp dụng Spring Security 38
Hình 2.13 Kiến trúc hệ thống 39
Hình 3.1 Sơ đồ usecase phía người dùng - 1 40
Hình 3.2 Sơ đồ usecase phía người dùng - 2 41
Hình 3.3 Sơ đồ Use case bên phía admin - 1 42
Hình 3.4 Sơ đồ Use case phía admin - 2 43
Hình 3.7 Sequence Chức năng “đổi mật khẩu” 76
Hình 3.8 Sequence “Thêm địa chỉ nhận hàng” 77
Hình 3.9 Sequence “Sửa địa chỉ nhận hàng” 78
Hình 3.10 Sequence “Xóa địa chỉ nhận hàng” 78
Hình 3.11 Sequence “Thêm sản phẩm vào giỏ hàng” 79
Hình 3.12 Sequence “Xóa sản phẩm khỏi giỏ hàng” 79
Hình 3.13 Sequence “Chỉnh sửa thông tin tài khoản” 80
Hình 3.15 Sequence “Thêm thuộc tính Size” 81
Hình 3.16 Sequence “Sửa thuộc tính Size” 82
Hình 3.17 Sequence “Xóa thuộc tính Size” 83
Hình 3.18 Sequence “Thêm thuộc tính màu” 84
Hình 3.19 Sequence “Thêm thuộc tính màu” 85
Hình 3.20 Sequence “Xóa thuộc tính màu” 86
Hình 3.21 Sequence “Thêm danh mục” 87
Hình 3.22 Sequence “Chỉnh sửa danh mục” 88
Hình 3.23 Sequence “Xóa danh mục” 89
Hình 3.24 Sequence "Thêm sản phẩm" 90
Hình 3.25 Sequence "Chỉnh sửa thông tin sản phẩm" 90
Hình 3.26 Sequence "Xóa sản phẩm" 91
Hình 3.27 Sequence “Xác nhận đơn hàng” 92
Hình 3.28 Sequence “Hủy đơn hàng” 93
Hình 3.32 Sơ đồ luồng cho người dùng khách (Guest) 111
Hình 3.33 Sơ đồ luồng cho người dùng (User) 112
Hình 3.34 Giao diện trang chủ 113
Hình 3.35 Giao diện đăng nhập 114
Hình 3.36 Giao diện đăng ký 115
Hình 3.37 Giao diện danh sách sản phẩm 116
Hình 3.38 Giao diện chi tiết sản phẩm 117
Hình 3.39 Giao diện thông tin cá nhân người dùng 118
Hình 3.40 Giao diện danh sách lịch sử mua hàng 119
Hình 3.41 Giao diện chi tiết đơn hàng 120
Hình 3.42 Danh sách địa chỉ 121
Hình 3.43 Mô tả giao diện danh sách địa chỉ 121
Hình 3.44 Giao diện thêm địa chỉ mới 122
Hình 3.45 Giao diện giỏ hàng 123
Hình 3.46 Giao diện chọn địa chỉ thanh toán 124
Hình 3.47 Giao diện thanh toán 125
Hình 3.48 Giao diện kết quả đặt hàng 126
Hình 3.49 Sơ đồ luồng cho bên quản trị viên 130
Hình 3.50 Giao diện bảng điều khiển 130
Hình 3.51 Giao diện danh sách đơn hàng 132
Hình 3.52 Giao diện chi tiết đơn hàng 133
Hình 3.53 Giao diện danh sách sản phẩm 134
Hình 3.54 Giao diện danh sách sản phẩm - 1 135
Hình 3.55 Giao diện chi tiết sản phẩm – 2 135
Hình 3.56 Giao diện chi tiết sản phẩm - 3 136
Hình 3.57 Giao diện chi tiết sản phẩm – 4 137
Hình 3.58 Giao diện danh sách phân loại 137
Hình 3.59 Giao diện chi tiết phân loại 138
Hình 3.60 Giao diện thêm phân loại 139
Hình 3.61 Giao diện danh sách màu sắc/kiểu dáng 140
Hình 3.62 Giao diện chi tiết màu sắc 141
Hình 3.63 Giao diện thêm màu sắc 142
Hình 3.64 Giao diện danh sách kích cỡ 143
Hình 3.65 Giao diện chi tiết kích cỡ 144
Hình 3.66 Giao diện thêm kích cỡ 145
Hình 3.67 Giao diện thống kê 146
Hình 3.68 Giao diện danh sách người dùng 147
Hình 3.69 Giao diện chi tiết người dùng 148
Hình 3.70 Giao diện trang đăng nhập của quản trị viên 149
Hình 3.71 Giao diện chỉnh giao diện và tab thông tin các nhân 150
Hình 3.72 Hình giao diện đánh giá theo sản phẩm 151
Hình 4.1 Phạm vi kiểm thử 155
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Qua đại dịch Covid-19 vì người dân có thói quen mua sắm nhiều hơn bình thường, nhờ vào đó các hộ kinh doanh nhỏ lẻ bắt đầu mọc lên nhiều hơn Đồ ăn, dịch vụ, các nhu yếu phẩm và đặc biệt là thời trang Có thể dễ hiểu thời trang là mặt hàng được ưa chuộng bởi giới trẻ họ muốn mình được đẹp.
Nhưng cũng chính vì đại dịch covid vừa qua điều kiện đi lại tới các cửa hàng lại khó khăn, nên bán hàng online lại là nước đi tối ưu của các cửa hàng Họ có thể triển khai cửa hàng của mình dưới dạng app hoặc website, dễ dàng phục cho mọi người truy cập và mua sắm Nắm bắt được nhu cầu này nên việc xây dựng một trang web có thể tận dụng được tối đa phân khúc User là điều cần thiết Vậy nên chúng em quyết định chọn đề tài “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” để mô hình hóa sản phẩm này Nhằm đem đến hiệu quả tốt nhất cho việc mua bán giữa người dùng và cửa hàng thuận lợi nhất.
Với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua bán thời trang, giúp người mua tiếp cận tới các sản phẩm đẹp, khuyến mãi tốt mà không cần phải ra cửa hàng Đồng thời giúp cho bên bán hàng quản lý các sản phẩm, thu nhập, khuyến mãi, tránh để tồn kho và các vấn đề liên quan Bên cạnh đó là các công nghệ mà chúng em sử dụng trong đề tài, cụ thể như sau:
- Sử dụng ReactJS để xây dựng một giao diện tiện dụng, dễ tương tác và hợp mắt người dùng.
- Nghiên cứu RESTful API với Spring Boot của Java để xây dựng hệ thống, hỗ trợ thao tác và truy xuất thông tin nhanh chóng và chính xác nhất
- Sử dụng MySQL để làm cơ sở dữ liệu.
- Áp dụng Spring Security của Spring Framework và JWT để ứng dụng vào việc bảo mật và phân quyền người dùng.
Trang web được xây dựng vào các chức năng theo nghiệp vụ định hướng người dùng xem và mua các sản phẩm thời trang trở nên nhanh chóng, tiện lợi Như là xem danh sách các sản phẩm, đặt hàng, chọn các mặt hàng để thêm vào giỏ hàng, chọn nơi cần giao hàng,…
Ngoài ra về phía bộ phận quản trị của cửa hàng thì có các chức năng để quản lý các sản phẩm đang tồn tại ở trong cửa hàng như chỉnh sửa các thuộc tính của sản phẩm thời trang, số lượng của các mặt hàng tại thời điểm hiện hành, quản lý các tài khoản của người dùng,…
4 MỤC TIÊU CỦA ĐỀ TÀI
- Đăng nhập và đăng ký tài khoản với email.
- Xem thông tin chi tiết sản phẩm, các biến thể sản phẩm và số lượng của biến thể đó.
- Lọc sản phẩm theo các tiêu chí về phân loại, màu sắc và kích thước có sẵn.
- Thêm sản phẩm vào giỏ hàng.
- Đặt mua các sản phẩm trong giỏ hàng.
- Quản lý địa chỉ giao hàng (thêm, sửa, xóa địa chỉ).
- Xem thông tin đơn hàng đã đặt.
- Quản lý thông tin cá nhân.
- Đặt lại mật khẩu khi quên.
- Quản lý (thêm, sửa, xóa) sản phẩm, phân loại, màu sắc, kích thước của sách.
- Quản lý (xác nhận, hủy đơn) đơn hàng của người dùng.
- Xem danh sách người dùng, vô hiệu hóa tài khoản của người dùng.
- Xem danh sách đánh giá sản phẩm, vô hiệu hóa đánh giá của người dùng.
- Thống kê doanh thu của cửa hàng bao gồm: xem thông tin doanh thu, xuất file excel (.xlsx) danh sách hóa đơn theo khoảng ngày chỉ định.
KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU
KHẢO SÁT HIỆN TRẠNG
1.1.1 Website “ROUTINE | THƯƠNG HIỆU QUẦN ÁO THỜI TRANG NAM NỮ CAO CẤP”
Hình 1.1 Hình ảnh trang chủ của website Routine
- Giao diện hiển thị các sản phẩm theo từng danh mục.
- Tìm sản phẩm theo tên.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Chat trực tiếp với cửa hàng thông qua plug-in messenger.
- Xem thông tin tài khoản.
- Có lượng mặt hàng nhiều, chức năng lọc sản phẩm chi tiết.
- Có áp dụng plug-in chat messenger.
- Chưa tối ưu được không gian hiển thị với danh sách các sản phẩm.
- Chưa tích hợp thanh toán online.
1.1.2 Website “HARDMODE – THIẾT KẾ VÀ THỜI TRANG”
Hình 1.2 Hình ảnh trang chủ của trang Hardmode
- Quản lý các mặt hàng và các danh mục sản phẩm.
- Đăng nhập, đăng ký tài khoản.
- Xác nhận đơn đặt hàng.
- Giao diện hiển thị các sản phẩm.
- Xem lịch sử đặt hàng.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Chat trực tiếp với cửa hàng thông qua plug-in messenger.
- Thiết kế đơn giản, dễ nhìn, dễ sử dụng.
- Có áp dụng plug-in chat messenger.
- Chưa tích hợp thanh toán online.
1.1.3 Website “YaMe | Mua Online Quần Áo Thời Trang Nam Nữ Giá Rẻ - YaMe.vn”
Hình 1.1.1 Hình ảnh trang chủ của website www.yame.vn
- Quản lý các mặt hàng và các danh mục sản phẩm.
- Giao diện hiển thị các sản phẩm.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Thiết kế đơn giản, dễ nhìn, dễ sử dụng, phân thành nhiều category trên sidebar.
- Ngoài nhận tại địa chỉ của mình Yame cho phép nhận hàng tại cửa hàng mà mình
- Chưa tích hợp thanh toán online.
- Chức năng thanh toán chưa tối ưu, người dùng có thể cho thông tin ảo.
- Chức năng đăng ký, đăng nhập chưa hoàn thiện.
1.1.4 Kết luận khảo sát thực trạng
Qua những dữ liệu mà nhóm chúng em đã thu thập được của 3 hệ thống web app về buôn bán sản phẩm thời trang và để phù hợp với hiện hành chúng em đã chọn cái tên đề tài là “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” bao gồm:
- Đây là trang web về thương mại nên sẽ tập trung vào trải nghiệm người dùng cũng với các tính năng quan trọng thiết yếu.
- Xây dựng với các chức năng thêm sửa xóa của các phần quản lý cho người quản trị viên.
- Về hệ thống thì đảm nhiệm tốc độ xử lý hiển thị giao diện nhanh chóng không để người dùng phải chờ đợi lâu.
- Sử dụng plugin chat Messenger từ Facebook (Meta) để có thể dễ dàng trao đổi trực tiếp với khách hàng một cách nhanh chóng.
- Sử dụng API thanh toán online bằng Momo giúp cho người dùng có thể dễ dàng thanh toán trước đơn hàng.
XÁC ĐỊNH YÊU CẦU
1.2.1.1 Yêu cầu chức năng phía người dùng
- Tìm kiếm sản phẩm theo tên.
- Xem danh sách tất cả sản phẩm.
- Xem chi tiết thông tin của một sản phẩm.
- Xem lịch sử đơn hàng đã đặt.
- Chỉnh sửa thông tin tài khoản.
- Quản lý địa chỉ giao hàng.
- Hủy đơn hàng đã đặt.
- Lấy lại mật khẩu khi người dùng đã quên mật khẩu
- Áp dụng voucher để giảm giá tiền
1.2.1.2 Yêu cầu chức năng phía quản trị viên
- Quản lý thông tin sản phẩm.
- Quản lý các danh mục.
- Quản lý tài khoản người dùng.
- Quản lý các thuộc tính sản phẩm.
- Quản lý các bình luận đánh giá sản phẩm
- Kích hoạt tài khoản người dùng.
- Vô hiệu hóa tài khoản người dùng.
- Thống kê số lượng các thành phần trong cửa hàng
1.2.1.3 Yêu cầu chức năng hệ thống
- Cung cấp chức năng phân quyền.
- Cung cấp chức năng thanh toán trực tuyến.
- Cung cấp chức năng chat trực tuyến từ plugin Messenger của Facebook.
- Thông báo mail cho người dùng khi đơn hàng được cập nhật ở trạng thái mới
Bảng 1.1 Bảng yêu cầu nghiệp vụ
STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú
1 Thêm, chỉnh sửa thông tin sản phẩm mới Lưu trữ
2 Thêm thông tin tài khoản mới Lưu trữ
3 Thêm, chỉnh sửa thông tin danh mục Lưu trữ
4 Thêm, chỉnh sửa thông tin kích cỡ Lưu trữ
5 Thêm, chỉnh sửa thông tin màu Lưu trữ
6 Thêm, chỉnh sửa voucher Lưu trữ
7 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm)
8 Xem danh sách danh mục Tra cứu (tìm kiếm)
9 Xem danh sách kích cỡ Tra cứu (tìm kiếm)
10 Xem danh sách màu Tra cứu (tìm kiếm)
11 Xem danh sách đơn hàng Tra cứu (tìm kiếm)
12 Tính doanh thu của cửa hàng Tính toán
13 Thống kê số lượng sản phẩm Kết xuất
14 Áp dụng voucher khi thanh toán Tính toán
1.2.1.4 Yêu cầu phi chức năng
- Giao diện bắt mắt, thân thiện với người dùng.
- Tốc độ xử lý và tìm kiếm nhanh chóng, chính xác.
- Có độ tin cậy cao.
- Các thông tin của người dùng phải được bảo mật và mã hóa.
- Có thể dễ dàng mở rộng quy mô hệ thống.
CƠ SỞ LÝ THUYẾT
CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END
ReactJS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook xây dựng và phát triển Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ tải nhanh và khả năng tái sử dụng mã nguồn cao Thư viện này ban đầu được phát triển và duy trì bởi Facebook nay còn được gọi với cái tên Meta, và sau đó dần được ứng dụng WhatsApp và Instagram [1]
ReactJS được dùng để viết các ứng dựng web Single Page Application (SPA).
Và nó sẽ so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước để cập nhật ít thay đổi nhất trên DOM [1]
ReactJS sử dụng cơ chế one-way data binding (luồng dữ liệu 1 chiều) Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi [1]
Các thành phần nổi bật của thư viện ReactJS:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Hơn thế nữa là JSX, một tính năng mà làm cho ReactJS thân thiện hơn Các thuộc tính trong JSX được viết theo camelCase như class thành className Mã này sẽ dịch ngược lại Js thuần túy thông qua công cụ Babel, chuẩn hóa phiên bản ES6 thành ES5 [1]
Lập trình viên có thể chia nhỏ các cấu trúc của trang web hay còn gọi là component để tái sử dụng hoặc dễ quản lý hơn trong các folder khác nhau.
Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn DOM ảo hỗ trợ rất tốt cho việc cấu trúc UI phản ứng kịp thời với trước những thay đổi nhằm tăng trải nghiệm người dùng Khi tạo ra ReactJS, các nhà thiết kế đã dự đoán đúng việc cập nhật cácHTML cũ là cực kỳ quan trọng nhưng cũng khá tốn kém chi phí Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM chính vì phát hiện ra những thay đổi trên data.
Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render.
State là thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật lại giao diện mới.
2.1.1.2 Cách khởi tạo dự án ReactJS Điều kiện khởi tạo:
Cách khởi tạo 1 dự án ReactJS khá là đơn giản ta chỉ cần chọn thư mục cần lưu và mở cmd gõ các lệnh sau: npx create-react-app react-app cd react-app npm start
Sau khi thành công trình duyệt mặc định sẽ hiển thị như hình dưới đây.
Hình 2.1 Khởi tạo dự án
2.1.1.3 Ứng dụng ReactJS vào đề tài
React có cơ chế phân chia các thành phần của trang web thành các component, nhằm để tiện tái sử dụng nhiều lần ở các trang khác nhau của website.
Sử dụng react router dom để áp dụng vào việc phân các router, đường dẫn của trang web Giúp cho cơ chế định vị trang trở nên dễ dàng hơn bao giờ hết.
Hình 2.2 Cấu trúc của dự án (bao gồm người dùng và quản trị viên)
Tailwind CSS là một utility-first CSS framework nó hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, nó cũng có điểm chung giống như Bootstrap & điểm làm nó nổi bật hơn cả đó là chúng ta có thể tùy biến phát triển CSS theo cách mà chúng ta định nghĩa ra.
Cơ chế hoạt động của Tailwind CSS là sẽ tiến hành quét hết tất cả các tệp HTML, thành phần JavaScript hoặc bất kì các template nào khác để tìm tên lớp (class name), sau đó sẽ tạo ra các kiểu CSS tương ứng với các tên lớp vừa quét được rồi ghi vào một tệp tĩnh CSS [2]
2.1.2.2 Cài đặt Tailwind CSS tích hợp trong thư viện ReactJS
Chúng ta tiến hành thực thi các câu lệnh dưới đây để tiến hành tạo project
ReactJS sử dụng Vite. npm create vite@latest my-project template react cd my-project
Bước 2: Cài đặt Tailwind CSS.
Cài đặt Tailwind CSS và các thư viện kèm theo thông qua npm, sau đó chạy lệnh init để tạo cả tailwind.config.cjs và postcss.config.cjs. Để làm điều đó ta tiến hành tạo thực thi câu lệnh dưới đây. npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Sau khi thực thi hai câu lệnh trên npx sẽ tiến hành tạo cho chúng ta 2 tệp tailwind.config.cjs và postcss.config.cjs.
Bước 3: Cấu hình đường dẫn cho template của project.
Chúng ta sẽ tiến hành thêm đường dẫn đến tất cả các tệp mẫu trong tệp tailwind.config.cjs vừa được tạo ở Bước 2 Lúc này chúng ta sẽ thêm đoạn code dưới đây vào trong tệp tailwind.config.cjs để nhận Tailwind CSS có thể nhận dạng để lấy được tất cả các tên class trong file js, ts, jsx, tsx và html trong thư mục đã được định sẵn.
{import('tailwindcss').Config} */ module.exports = { content: [
"./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],
Bước 4: Thêm chỉ thị (anotation) Tailwind vào trong tệp index.css.
Chúng ta sẽ tiến hành thêm các lệnh dưới đây vào trọng tệp index.css.
Bước 5: Bắt đầu tiến trình build. Để tiến hành build, ta thực thi câu lệnh dưới đây. npm run dev
- Sau khi build xong thì chúng ta có thể sử dụng Taildwind CSS như bình thường và hoàn tất quá trình tích hợp Tailwind CSS cùng với ReactJS.
2.1.2.3 Ứng dụng TailwindCSS vào đề tài
- Việc sử dụng Tailwind css khiến cho việc thiết kế trang web dễ dàng hơn bằng cách nhúng các thuộc tính được định nghĩa sẵn vào class của component đó Nó sẽ hỗ trợ biến các component đó có định dạng css theo như người lập trình mong muốn, mà không cần phải tạo các file css rườm rà.
- Dưới đây là ví dụ về cách triển khai các thuộc tính cho class.
Hình 2.4 Ví dụ về các className của TailwindCSS
Trong hình trên flex sẽ đại diện cho đoạn mã display: flex trong mã CSS, hay items-center sẽ đại diện cho đoạn mã align-items: center trong mã CSS.
Mọi tài liệu tham khảo về className của TailwindCSS sẽ được cập nhật tại trang chủ của TailwindCSS, https://tailwindcss.com/docs
Trong đoạn mã trên đã áp dụng tính năng config các tên lớp do người phát triển tự định nghĩa để tối ưu hơn trong việc thay đổi toàn bộ màu sắc hay các thuộc tính khác của toàn trang web khi sử dụng các tên lớp tự định nghĩa.
Axios là một thư viện HTTP Client dựa trên Promise dành cho node.js và trình duyệt Nó có tính đẳng hình (tức là cùng codebase có thể chạy trong cả trình duyệt và node.js) Ở phía server thì nó sử dụng native module http trong node.js, còn ở phía client (trình duyệt) thì nó sử dụng XMLHttpRequest [3]
2.1.3.2 Ứng dụng của Axios vào đề tài
- Tạo request từ trình duyệt bằng XMLHttpRequest.
- Tạo request từ node.js bằng http.
- Đón chặn request và response.
- Biến đổi dữ liệu request và response.
- Tự động chuyển đổi cho dữ liệu JSON.
- Hỗ trợ phía client bảo vệ chống lại XSRF.
Hình 2.7 Ứng dụng Axios để gọi API và đón chặn các request để làm mới token
Sau đây là một số cách cài đặt Axios sử dụng các câu lệnh trên command line thông qua các công cụ quản lí package.
CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END
REST: là một dạng chuyển đổi cấu trúc dữ liệu, một kiểu kiến trúc để viết API
Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy, REST gửi một yêu cầu HTTP như GET, POST, DELETE … đến một URL để xử lý dữ liệu Hoạt động dựa chủ yếu trên phương thức CRUD ( Create, Read, Update, Delete) tương đương với 4 giao thức HTTP: POST, GET, PUT, DELETE.
RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng dụng web để quản lý các tài nguyên RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến ngày nay để cho các ứng dụng khác nhau (như web, mobile) giao tiếp với nhau.
2.2.1.2 Các phương thức của RESTFUL API
REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng.
- GET (SELECT): Trả về một resource hoặc một danh sách các resource.
- POST (CREATE): Tạo mới một resource.
- PUT (UPDATE): Cập nhật thông tin cho resource.
- DELETE (DELETE): Xoá một resource
- PATCH (UPDATE): Dùng để cập nhật 1 hoặc nhiều trường cho resource Ứng dụng vào trong đề tài bằng cách xây dựng các phương thức tương ứng với các phương thức HTTP
Hình 2.8 Hình Áp dụng RESTful API vào đề tài trong AddressController
Spring Boot nằm trong hệ sinh thái của Spring Framework Nó cung cấp nền tảng tốt cho lập trình viên để lập trình ứng dụng độc lập Ngoài ra nó còn là công cụ để xây dựng các ứng dụng web và các microservice Hơn thế nữa chúng ta không cần phải cài đặt cấu hình nhiều bước rườm rà cho dự án [2]
- Các tính năng của Spring Boot
- Khởi tạo ứng dụng Spring một cách độc lập
- Có nhúng sẵn trực tiếp các server như Tomcat, Jetty, Undertow
- Cung cấp các dependency cơ bản để đơn giản hóa các cấu hình
- Tự động cấu hình thư viện Spring hay của các bên thứ ba khi khả thi
- Cung cấp các chỉ số, độ ổn định và cấu hình ngoại hóa
- Tuyệt đối không sinh them code và không yêu cầu về cấu hình XML
2.2.2.2 Các bước khởi tạo dự án Spring boot
Bước 2: Khai báo thông tin Project như loại project, ngôn ngữ code là Java, phiên bản Spring Boot, phiên bản Java,…
Bước 3: Chọn các Dependencies cần dùng.
Bước 4: Nhấn nút Generate là hoàn thành.
MySQL là 1 hệ thống quản trị về cơ sở dữ liệu với mã nguồn mở (được gọi tắt là RDBMS) và đang hoạt động theo mô hình dạng client-server [3]
- Mạnh mẽ và khả năng mở rộng
Cho phép dữ liệu được lưu trữ và truy cập trên nhiều công cụ lưu trữ
Khả năng sao chép dữ liệu và phân vùng bảng để có hiệu suất và độ bền tốt hơn Truy cập dữ liệu của mình bằng các lệnh SQL tiêu chuẩn Để bảo mật, MySQL sử dụng một đặc quyền truy cập và hệ thống mật khẩu được mã hóa cho phép xác minh dựa trên máy chủ Các máy khách MySQL có thể kết nối với Máy chủ MySQL bằng một số giao thức, bao gồm cả giao thức TCP/IP trên bất kỳ nền tảng nào [3]
2.2.4 Ứng dụng Spring boot vào đề tài
Là 1 tiêu chuẩn mở (RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào "chữ ký" của nó Phần chữ ký của JWT sẽ được mã hóa lại bằngHMAC hoặc RSA Trong đó chuỗi Token phải có 3 phần là header, phần payload và phần signature được ngăn bằng dấu “.” [4]
Người ta thường sử dụng JWT trong authentication Khi người dùng đã đăng nhập vào hệ thống thì những request tiếp theo từ phía người dùng sẽ chứa thêm mã JWT Điều này cho phép BE kiểm tra được quyền của người dùng và cấp quyền truy cập vào các url, service, các tài nguyên của hệ thống [4]
Phần Header của token sẽ chứa kiểu dữ liệu , và thuật toán sử dụng để mã hóa ra chuỗi JWT.
Phần Payload sẽ chứa các thông tin mình muốn đặt trong chuỗi Token.
Phần Signature được tạo ra bằng cách mã hóa phần header, payload kèm theo một chuỗi secret (khóa bí mật).
Hình 2.9 JWT của một user sau khi đã đăng nhập Áp dụng JWT trong việc tạo ra token, khởi tạo token và refresh token Khi người dùng tạo request tới server thì hệ thống sẽ xác thực xem token của người đó còn thời hạn không Nếu không còn thời hạn, thì request đó sẽ không được thực hiện.
Dưới đây là thể hiện cho sự sinh ra token và refresh token dựa trên các thuộc tính id, email Với loại mã hóa là HS512.
Hình 2.10 Hình Áp dụng JWT trong việc sinh ra token
Khi người dùng đăng nhập thành công thì hệ thống sẽ gọi tới hàm sinh ra token
Hình 2.11 Chi tiết hàm đăng nhập
Là một framework trong hệ sinh thái của Spring Framework, nó giúp chúng ta phân quyền và xác thực người dùng trước khi cho phép họ truy cập vào các tài nguyên của hệ thống. Ởphần này chúng ta cần quan tâm đến 2 việc đó là authentication và authorization.Với authentication thì framework sẽ cung cấp các service giúp lập trình viên dễ dàng xác thực người dùng khi người dung đăng nhập vào hệ thống Còn với authorization sau khi người dung đăng nhập xong, hệ thống sẽ xác định những chức năng hay tài nguyên nào mà người dung đó chỉ được phép sử dụng [5] Áp dụng vào trong đề tài là sử dụng lớp User Detail Service để kiểm tra tài khoản, mật khẩu của người dùng khi đăng nhập vào hệ thống Cách mà lớp User Detail Service sẽ lấy username, password và role từ payload, đồng thời truy vấn xuống database lấy password, role theo username của người dùng đó Sau đó sẽ so sánh mật khẩu, role từ database và mật khẩu, role từ payload, nếu đúng thì cho phép người dùng truy cập vào hệ thống Việc sử dụng User detail service được cung cấp từ spring framework thì giúp cho người lập trình viên tiện dụng trong việc phân quyền và bảo mật hệ thống.
Hình 2.12 Hình Áp dụng Spring Security trong việc xác thực người dùng hệ thống
KIẾN TRÚC CHUNG CỦA HỆ THỐNG
Hình 2.13 Kiến trúc hệ thống
Trong hệ thống trên, sử dụng ReactJS làm phần giao diện người dùng (front-end) và Spring Boot làm phần xử lý logic và dữ liệu (back-end), ta có một kiến trúc phân tách (client-server) giữa hai thành phần này.
Máy chủ (Server-side): o Spring Boot được sử dụng để xử lý các yêu cầu HTTP từ ReactJS và cung cấp các API (Application Programming Interface) để truy xuất và cập nhật dữ liệu dưới cơ sở dữ liệu MySQL. o Spring Boot cũng có thể kết hợp với các thư viện ORM (Object-Relational
Mapping) như Spring Data JPA để tương tác với cơ sở dữ liệu.
Máy khách (Client-side): o ReactJS được sử dụng để xây dựng giao diện người dùng tương tác trên trình duyệt. o ReactJS thực hiện các yêu cầu HTTP (sử dụng axios) đến các API được cung cấp bởi Spring Boot để truy xuất và cập nhật dữ liệu. o ReactJS cung cấp các thành phần (components) để xây dựng giao diện người dùng, quản lý trạng thái và tương tác với các API của Spring Boot.
Giao tiếp (Communication): o ReactJS và Spring Boot giao tiếp thông qua các yêu cầu HTTP (GET, POST, PUT, DELETE) và truyền dữ liệu dưới dạng JSON hoặc XML. o ReactJS gửi yêu cầu HTTP đến các API của Spring Boot để truy xuất dữ liệu từ máy chủ và cập nhật trạng thái giao diện người dùng. o Spring Boot xử lý các yêu cầu, thực hiện logic kinh doanh, và trả về phản hồi (response) dưới dạng JSON hoặc XML cho ReactJS.
THIẾT KẾ PHẦN MỀM
LƯỢC ĐỒ TUẦN TỰ
3.3 Thiết kế cơ sở dữ liệu
Chương 4 Cài đặt và kiểm thử
STT Thời gian Công việc Ghi chú
1 13/02/2023 – 20/03/2023 Thiết kế usecase và mô hình hóa yêu cầu.
Thiết kế cơ sở dữ liệu.
Tìm hiểu về thư viện ReactJS của JavaScript.
2 21/03/2023 – 07/04/2023 Tìm hiểu về Spring Boot và Spring
Tìm hiểu về nền tảng AWS Elastic Beanstalk và AWS S3.
Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API
Tìm hiểu về SQL và MySQL để áp dụng vào lưu trữ dữ liệu người dùng của hệ thống
Tiến hành phát triển API dựa trên các kiến thức đã tìm hiểu được và các tài
Tiến hành xây dựng giao diện người dùng cho hệ thống.
Kết hợp các phần đã xây dựng lại với
5 09/05/2023 – 09/06/2023 nhau (giao diện, API, cơ sở dữ liệu).
Tìm hiểu, sửa đổi hệ thống để hoàn thiện.
6 09/06/2023 – 20/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi.
7 21/06/2023 – 10/07/2023 Viết và hoàn thiện báo cáo.
Ngày……tháng……năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
(ký và ghi rõ họ tên)
LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 15
4 MỤC TIÊU CỦA ĐỀ TÀI 16
CHƯƠNG 1 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 18
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 24
2.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 24
2.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 33
2.2.4 Ứng dụng Spring boot vào đề tài 35
2.3 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 39
CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 40
3.1 MÔ HÌNH HÓA YÊU CẦU 40
3.1.2 Đặc tả các Use case về phía Người dùng 43
3.1.3 Đặc tả Use case về phía quản trị viên 58
3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 99
3.4.1 Lược đồ thực thể kết hợp (ERD) 99
3.4.2 Chi tiết bảng dữ liệu 99
3.5.1 Màn hình giao diện phía người dùng 111
3.5.2 Màn hình giao diện phía quản trị viên 130
CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 154
Bảng 1.1 Bảng yêu cầu nghiệp vụ 22
Bảng 3.1 Mô tả Use case “Đăng ký” 43
Bảng 3.2 Mô tả Use case “Đăng nhập” 44
Bảng 3.3 Mô tả Use case “Chỉnh sửa thông tin tài khoản” 45
Bảng 3.4 Mô tả Use case “Đổi mật khẩu” 46
Bảng 3.5 Mô tả Use case “Xem chi tiết thông tin của một sản phẩm” 47
Bảng 3.6 Mô tả Use case “Xem chi tiết thông tin của một sản phẩm” 47
Bảng 3.7 Mô tả Use case “Xóa sản phẩm khỏi giỏ hàng” 48
Bảng 3.8 Mô tả Use case “Thêm địa chỉ nhận hàng” 49
Bảng 3.9 Mô tả Use case “Chỉnh sửa địa chỉ nhận hàng” 50
Bảng 3.10 Mô tả Use case “Xóa địa chỉ nhận hàng” 51
Bảng 3.11 Mô tả Usecase “Xem lịch sử mua hàng” 52
Bảng 3.12 Mô tả Use case “Đặt hàng” 52
Bảng 3.13 Mô tả Use case “Hủy đơn hàng” 53
Bảng 3.14 Mô tả Use case “Tìm kiếm sản phẩm” 54
Bảng 3.15 Mô tả Use case “Tìm kiếm sản phẩm” 55
Bảng 3.16 Mô tả Use case “Tìm kiếm sản phẩm” 56
Bảng 3.17 Mô tả Use case “Áp dụng voucher cho đơn hàng” 56
Bảng 3.18 Mô tả Use case “Thêm thuộc tính kích cỡ” 58
Bảng 3.19 Mô tả Use case “Sửa thuộc tính kích cỡ” 58
Bảng 3.20 Mô tả Use case “Xóa thuộc tính kích cỡ” 59
Bảng 3.21 Mô tả Use case “Thêm thuộc tính màu sắc” 60
Bảng 3.22 Mô tả Use case “Chỉnh sửa thuộc tính màu sắc” 61
Bảng 3.23 Mô tả Use case “Xóa thuộc tính màu sắc” 62
Bảng 3.24 Mô tả Use case “Thêm sản phẩm” 62
Bảng 3.25 Mô tả Use case “Chỉnh sửa sản phẩm” 63
Bảng 3.26 Mô tả Use case “Xóa sản phẩm” 64
Bảng 3.27.Mô tả Use case “Vô hiệu hóa tài khoản User” 65
Bảng 3.28 Mô tả Use case “Thêm danh mục sản phẩm” 65
Bảng 3.29 Mô tả Use case “Chỉnh sửa danh mục sản phẩm” 66
Bảng 3.30 Mô tả Use case “Xóa danh mục sản phẩm” 67
Bảng 3.31 Mô tả Usecase “Thống kê” 68
Bảng 3.32 Mô tả Use case “Kích hoạt tài khoản người dùng” 68
Bảng 3.33 Mô tả Usecase “Xác nhận đơn hàng” 69
Bảng 3.34 Mô tả Use case “Kích hoạt đánh giá” 71
Bảng 3.35 Mô tả Use case “Thêm voucher” 72
Bảng 3.36 Mô tả Use case “Chỉnh sửa voucher” 74
Bảng 3.53 Mô tả màn hình trang chủ 113
Bảng 3.54 Mô tả giao diện đăng nhập 114
Bảng 3.55 Mô tả giao diện đăng ký 115
Bảng 3.56 Mô tả giao diện danh sách sản phẩm 116
Bảng 3.57 Mô tả giao diện chi tiết sản phẩm 117
Bảng 3.58 Mô tả giao diện chi tiết sản phẩm 118
Bảng 3.59 Mô tả giao diện lịch sử mua hàng 119
Bảng 3.60 Mô tả giao diện chi tiết đơn hàng 120
Bảng 3.61 Mô tả giao diện thêm địa chỉ 122
Bảng 3.62 Mô tả giao diện giỏ hàng 123
Bảng 3.63 Mô tả giao diện chọn địa chỉ thanh toán 124
Bảng 3.64 Mô tả giao diện thanh toán 125
Bảng 3.65 Mô tả giao diện kết quả thanh toán 126
Bảng 3.66 Mô tả giao diện điều khiển 131
Bảng 3.67 Mô tả giao diện danh sách đơn hàng 132
Bảng 3.68 Mô tả giao diện chi tiết đơn hàng 133
Bảng 3.69 Mô tả giao diện danh sách sản phẩm 134
Bảng 3.70 Mô tả giao diện chi tiết sản phẩm – 1 135
Bảng 3.71 Mô tả giao diện chi tiết sản phẩm -2 137
Bảng 3.72 Mô tả giao diện danh sách phân loại 137
Bảng 3.73 Mô tả giao diện chi tiết phân loại 139
Bảng 3.74 Mô tả giao diện thêm phân loại 140
Bảng 3.75 Mô tả giao diện màu sắc/kiểu dáng 140
Bảng 3.76 Mô tả giao diện chi tiết màu sắc 141
Bảng 3.77 Mô tả giao diện thêm màu sắc 142
Bảng 3.78 Mô tả giao diện danh sách kích cỡ 143
Bảng 3.79 Mô tả giao diện chi tiết kích cỡ 144
Bảng 3.80 Mô tả giao diện thêm kích cỡ 145
Bảng 3.81 Mô tả giao diện thống kê 146
Bảng 3.82 Mô tả giao diện danh sách người dùng 147
Bảng 3.83 Mô tả giao diện chi tiết người dùng 148
Bảng 3.84 Mô tả giao diện đăng nhập của quản trị viên 149
Bảng 3.85 Mô tả giao diện chọn màu giao diện và tab thông tin cá nhân 150
Bảng 3.86 Mô tả giao diện danh sách đánh giá sản phẩm 151
Bảng 4.1 Bảng rủi ro và kế hoạch giảm nhẹ 158
Bảng 4.2 Kết quả kiểm thử chức năng phía Người dùng 159
Bảng 4.3 Kết quả kiểm thử chức năng phía quản trị viên 162
Hình 1.1.1 Hình ảnh trang chủ của website www.yame.vn 20
Hình 2.1 Khởi tạo dự án 25
Hình 2.2 Cấu trúc của dự án (bao gồm người dùng và quản trị viên) 26
Hình 2.4 Ví dụ về các className của TailwindCSS 29
Hình 2.7 Ứng dụng Axios để gọi API và đón chặn các request 32
Hình 2.8 Hình Áp dụng RESTful API vào đề tài trong AddressController 34
Hình 2.9 JWT của một user sau khi đã đăng nhập 36
Hình 2.10 Hình Áp dụng JWT trong việc sinh ra token 37
Hình 2.11 Chi tiết hàm đăng nhập 37
Hình 2.12 Áp dụng Spring Security 38
Hình 2.13 Kiến trúc hệ thống 39
Hình 3.1 Sơ đồ usecase phía người dùng - 1 40
Hình 3.2 Sơ đồ usecase phía người dùng - 2 41
Hình 3.3 Sơ đồ Use case bên phía admin - 1 42
Hình 3.4 Sơ đồ Use case phía admin - 2 43
Hình 3.7 Sequence Chức năng “đổi mật khẩu” 76
Hình 3.8 Sequence “Thêm địa chỉ nhận hàng” 77
Hình 3.9 Sequence “Sửa địa chỉ nhận hàng” 78
Hình 3.10 Sequence “Xóa địa chỉ nhận hàng” 78
Hình 3.11 Sequence “Thêm sản phẩm vào giỏ hàng” 79
Hình 3.12 Sequence “Xóa sản phẩm khỏi giỏ hàng” 79
Hình 3.13 Sequence “Chỉnh sửa thông tin tài khoản” 80
Hình 3.15 Sequence “Thêm thuộc tính Size” 81
Hình 3.16 Sequence “Sửa thuộc tính Size” 82
Hình 3.17 Sequence “Xóa thuộc tính Size” 83
Hình 3.18 Sequence “Thêm thuộc tính màu” 84
Hình 3.19 Sequence “Thêm thuộc tính màu” 85
Hình 3.20 Sequence “Xóa thuộc tính màu” 86
Hình 3.21 Sequence “Thêm danh mục” 87
Hình 3.22 Sequence “Chỉnh sửa danh mục” 88
Hình 3.23 Sequence “Xóa danh mục” 89
Hình 3.24 Sequence "Thêm sản phẩm" 90
Hình 3.25 Sequence "Chỉnh sửa thông tin sản phẩm" 90
Hình 3.26 Sequence "Xóa sản phẩm" 91
Hình 3.27 Sequence “Xác nhận đơn hàng” 92
Hình 3.28 Sequence “Hủy đơn hàng” 93
Hình 3.32 Sơ đồ luồng cho người dùng khách (Guest) 111
Hình 3.33 Sơ đồ luồng cho người dùng (User) 112
Hình 3.34 Giao diện trang chủ 113
Hình 3.35 Giao diện đăng nhập 114
Hình 3.36 Giao diện đăng ký 115
Hình 3.37 Giao diện danh sách sản phẩm 116
Hình 3.38 Giao diện chi tiết sản phẩm 117
Hình 3.39 Giao diện thông tin cá nhân người dùng 118
Hình 3.40 Giao diện danh sách lịch sử mua hàng 119
Hình 3.41 Giao diện chi tiết đơn hàng 120
Hình 3.42 Danh sách địa chỉ 121
Hình 3.43 Mô tả giao diện danh sách địa chỉ 121
Hình 3.44 Giao diện thêm địa chỉ mới 122
Hình 3.45 Giao diện giỏ hàng 123
Hình 3.46 Giao diện chọn địa chỉ thanh toán 124
Hình 3.47 Giao diện thanh toán 125
Hình 3.48 Giao diện kết quả đặt hàng 126
Hình 3.49 Sơ đồ luồng cho bên quản trị viên 130
Hình 3.50 Giao diện bảng điều khiển 130
Hình 3.51 Giao diện danh sách đơn hàng 132
Hình 3.52 Giao diện chi tiết đơn hàng 133
Hình 3.53 Giao diện danh sách sản phẩm 134
Hình 3.54 Giao diện danh sách sản phẩm - 1 135
Hình 3.55 Giao diện chi tiết sản phẩm – 2 135
Hình 3.56 Giao diện chi tiết sản phẩm - 3 136
Hình 3.57 Giao diện chi tiết sản phẩm – 4 137
Hình 3.58 Giao diện danh sách phân loại 137
Hình 3.59 Giao diện chi tiết phân loại 138
Hình 3.60 Giao diện thêm phân loại 139
Hình 3.61 Giao diện danh sách màu sắc/kiểu dáng 140
Hình 3.62 Giao diện chi tiết màu sắc 141
Hình 3.63 Giao diện thêm màu sắc 142
Hình 3.64 Giao diện danh sách kích cỡ 143
Hình 3.65 Giao diện chi tiết kích cỡ 144
Hình 3.66 Giao diện thêm kích cỡ 145
Hình 3.67 Giao diện thống kê 146
Hình 3.68 Giao diện danh sách người dùng 147
Hình 3.69 Giao diện chi tiết người dùng 148
Hình 3.70 Giao diện trang đăng nhập của quản trị viên 149
Hình 3.71 Giao diện chỉnh giao diện và tab thông tin các nhân 150
Hình 3.72 Hình giao diện đánh giá theo sản phẩm 151
Hình 4.1 Phạm vi kiểm thử 155
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Qua đại dịch Covid-19 vì người dân có thói quen mua sắm nhiều hơn bình thường, nhờ vào đó các hộ kinh doanh nhỏ lẻ bắt đầu mọc lên nhiều hơn Đồ ăn, dịch vụ, các nhu yếu phẩm và đặc biệt là thời trang Có thể dễ hiểu thời trang là mặt hàng được ưa chuộng bởi giới trẻ họ muốn mình được đẹp.
Nhưng cũng chính vì đại dịch covid vừa qua điều kiện đi lại tới các cửa hàng lại khó khăn, nên bán hàng online lại là nước đi tối ưu của các cửa hàng Họ có thể triển khai cửa hàng của mình dưới dạng app hoặc website, dễ dàng phục cho mọi người truy cập và mua sắm Nắm bắt được nhu cầu này nên việc xây dựng một trang web có thể tận dụng được tối đa phân khúc User là điều cần thiết Vậy nên chúng em quyết định chọn đề tài “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” để mô hình hóa sản phẩm này Nhằm đem đến hiệu quả tốt nhất cho việc mua bán giữa người dùng và cửa hàng thuận lợi nhất.
Với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua bán thời trang, giúp người mua tiếp cận tới các sản phẩm đẹp, khuyến mãi tốt mà không cần phải ra cửa hàng Đồng thời giúp cho bên bán hàng quản lý các sản phẩm, thu nhập, khuyến mãi, tránh để tồn kho và các vấn đề liên quan Bên cạnh đó là các công nghệ mà chúng em sử dụng trong đề tài, cụ thể như sau:
- Sử dụng ReactJS để xây dựng một giao diện tiện dụng, dễ tương tác và hợp mắt người dùng.
- Nghiên cứu RESTful API với Spring Boot của Java để xây dựng hệ thống, hỗ trợ thao tác và truy xuất thông tin nhanh chóng và chính xác nhất
- Sử dụng MySQL để làm cơ sở dữ liệu.
- Áp dụng Spring Security của Spring Framework và JWT để ứng dụng vào việc bảo mật và phân quyền người dùng.
Trang web được xây dựng vào các chức năng theo nghiệp vụ định hướng người dùng xem và mua các sản phẩm thời trang trở nên nhanh chóng, tiện lợi Như là xem danh sách các sản phẩm, đặt hàng, chọn các mặt hàng để thêm vào giỏ hàng, chọn nơi cần giao hàng,…
Ngoài ra về phía bộ phận quản trị của cửa hàng thì có các chức năng để quản lý các sản phẩm đang tồn tại ở trong cửa hàng như chỉnh sửa các thuộc tính của sản phẩm thời trang, số lượng của các mặt hàng tại thời điểm hiện hành, quản lý các tài khoản của người dùng,…
4 MỤC TIÊU CỦA ĐỀ TÀI
- Đăng nhập và đăng ký tài khoản với email.
- Xem thông tin chi tiết sản phẩm, các biến thể sản phẩm và số lượng của biến thể đó.
- Lọc sản phẩm theo các tiêu chí về phân loại, màu sắc và kích thước có sẵn.
- Thêm sản phẩm vào giỏ hàng.
- Đặt mua các sản phẩm trong giỏ hàng.
- Quản lý địa chỉ giao hàng (thêm, sửa, xóa địa chỉ).
- Xem thông tin đơn hàng đã đặt.
- Quản lý thông tin cá nhân.
- Đặt lại mật khẩu khi quên.
- Quản lý (thêm, sửa, xóa) sản phẩm, phân loại, màu sắc, kích thước của sách.
- Quản lý (xác nhận, hủy đơn) đơn hàng của người dùng.
- Xem danh sách người dùng, vô hiệu hóa tài khoản của người dùng.
- Xem danh sách đánh giá sản phẩm, vô hiệu hóa đánh giá của người dùng.
- Thống kê doanh thu của cửa hàng bao gồm: xem thông tin doanh thu, xuất file excel (.xlsx) danh sách hóa đơn theo khoảng ngày chỉ định.
CHƯƠNG 1 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 1.1 KHẢO SÁT HIỆN TRẠNG
1.1.1 Website “ROUTINE | THƯƠNG HIỆU QUẦN ÁO THỜI TRANG NAM NỮ CAO CẤP”
Hình 1.1 Hình ảnh trang chủ của website Routine
- Giao diện hiển thị các sản phẩm theo từng danh mục.
- Tìm sản phẩm theo tên.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Chat trực tiếp với cửa hàng thông qua plug-in messenger.
- Xem thông tin tài khoản.
- Có lượng mặt hàng nhiều, chức năng lọc sản phẩm chi tiết.
- Có áp dụng plug-in chat messenger.
- Chưa tối ưu được không gian hiển thị với danh sách các sản phẩm.
- Chưa tích hợp thanh toán online.
1.1.2 Website “HARDMODE – THIẾT KẾ VÀ THỜI TRANG”
Hình 1.2 Hình ảnh trang chủ của trang Hardmode
- Quản lý các mặt hàng và các danh mục sản phẩm.
- Đăng nhập, đăng ký tài khoản.
- Xác nhận đơn đặt hàng.
- Giao diện hiển thị các sản phẩm.
- Xem lịch sử đặt hàng.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Chat trực tiếp với cửa hàng thông qua plug-in messenger.
- Thiết kế đơn giản, dễ nhìn, dễ sử dụng.
- Có áp dụng plug-in chat messenger.
- Chưa tích hợp thanh toán online.
1.1.3 Website “YaMe | Mua Online Quần Áo Thời Trang Nam Nữ Giá Rẻ - YaMe.vn”
Hình 1.1.1 Hình ảnh trang chủ của website www.yame.vn
- Quản lý các mặt hàng và các danh mục sản phẩm.
- Giao diện hiển thị các sản phẩm.
- Chức năng đặt hàng, giỏ hàng, thanh toán sản phẩm.
- Thiết kế đơn giản, dễ nhìn, dễ sử dụng, phân thành nhiều category trên sidebar.
- Ngoài nhận tại địa chỉ của mình Yame cho phép nhận hàng tại cửa hàng mà mình
- Chưa tích hợp thanh toán online.
- Chức năng thanh toán chưa tối ưu, người dùng có thể cho thông tin ảo.
- Chức năng đăng ký, đăng nhập chưa hoàn thiện.
1.1.4 Kết luận khảo sát thực trạng
Qua những dữ liệu mà nhóm chúng em đã thu thập được của 3 hệ thống web app về buôn bán sản phẩm thời trang và để phù hợp với hiện hành chúng em đã chọn cái tên đề tài là “Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS” bao gồm:
- Đây là trang web về thương mại nên sẽ tập trung vào trải nghiệm người dùng cũng với các tính năng quan trọng thiết yếu.
- Xây dựng với các chức năng thêm sửa xóa của các phần quản lý cho người quản trị viên.
- Về hệ thống thì đảm nhiệm tốc độ xử lý hiển thị giao diện nhanh chóng không để người dùng phải chờ đợi lâu.
- Sử dụng plugin chat Messenger từ Facebook (Meta) để có thể dễ dàng trao đổi trực tiếp với khách hàng một cách nhanh chóng.
- Sử dụng API thanh toán online bằng Momo giúp cho người dùng có thể dễ dàng thanh toán trước đơn hàng.
1.2.1.1 Yêu cầu chức năng phía người dùng
- Tìm kiếm sản phẩm theo tên.
- Xem danh sách tất cả sản phẩm.
- Xem chi tiết thông tin của một sản phẩm.
- Xem lịch sử đơn hàng đã đặt.
- Chỉnh sửa thông tin tài khoản.
- Quản lý địa chỉ giao hàng.
- Hủy đơn hàng đã đặt.
- Lấy lại mật khẩu khi người dùng đã quên mật khẩu
- Áp dụng voucher để giảm giá tiền
1.2.1.2 Yêu cầu chức năng phía quản trị viên
- Quản lý thông tin sản phẩm.
- Quản lý các danh mục.
- Quản lý tài khoản người dùng.
- Quản lý các thuộc tính sản phẩm.
- Quản lý các bình luận đánh giá sản phẩm
- Kích hoạt tài khoản người dùng.
- Vô hiệu hóa tài khoản người dùng.
- Thống kê số lượng các thành phần trong cửa hàng
1.2.1.3 Yêu cầu chức năng hệ thống
- Cung cấp chức năng phân quyền.
- Cung cấp chức năng thanh toán trực tuyến.
- Cung cấp chức năng chat trực tuyến từ plugin Messenger của Facebook.
- Thông báo mail cho người dùng khi đơn hàng được cập nhật ở trạng thái mới
Bảng 1.1 Bảng yêu cầu nghiệp vụ
STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú
1 Thêm, chỉnh sửa thông tin sản phẩm mới Lưu trữ
2 Thêm thông tin tài khoản mới Lưu trữ
3 Thêm, chỉnh sửa thông tin danh mục Lưu trữ
4 Thêm, chỉnh sửa thông tin kích cỡ Lưu trữ
5 Thêm, chỉnh sửa thông tin màu Lưu trữ
6 Thêm, chỉnh sửa voucher Lưu trữ
7 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm)
8 Xem danh sách danh mục Tra cứu (tìm kiếm)
9 Xem danh sách kích cỡ Tra cứu (tìm kiếm)
10 Xem danh sách màu Tra cứu (tìm kiếm)
11 Xem danh sách đơn hàng Tra cứu (tìm kiếm)
12 Tính doanh thu của cửa hàng Tính toán
13 Thống kê số lượng sản phẩm Kết xuất
14 Áp dụng voucher khi thanh toán Tính toán
1.2.1.4 Yêu cầu phi chức năng
- Giao diện bắt mắt, thân thiện với người dùng.
- Tốc độ xử lý và tìm kiếm nhanh chóng, chính xác.
- Có độ tin cậy cao.
- Các thông tin của người dùng phải được bảo mật và mã hóa.
- Có thể dễ dàng mở rộng quy mô hệ thống.
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END
ReactJS là một thư viện chứa nhiều JavaScript mã nguồn mở được Facebook xây dựng và phát triển Thư viện này được sử dụng để tạo ra các ứng dụng trang web hấp dẫn với hiệu quả cao, tốc độ tải nhanh và khả năng tái sử dụng mã nguồn cao Thư viện này ban đầu được phát triển và duy trì bởi Facebook nay còn được gọi với cái tên Meta, và sau đó dần được ứng dụng WhatsApp và Instagram [1]
ReactJS được dùng để viết các ứng dựng web Single Page Application (SPA).
Và nó sẽ so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước để cập nhật ít thay đổi nhất trên DOM [1]
ReactJS sử dụng cơ chế one-way data binding (luồng dữ liệu 1 chiều) Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi [1]
Các thành phần nổi bật của thư viện ReactJS:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Hơn thế nữa là JSX, một tính năng mà làm cho ReactJS thân thiện hơn Các thuộc tính trong JSX được viết theo camelCase như class thành className Mã này sẽ dịch ngược lại Js thuần túy thông qua công cụ Babel, chuẩn hóa phiên bản ES6 thành ES5 [1]
Lập trình viên có thể chia nhỏ các cấu trúc của trang web hay còn gọi là component để tái sử dụng hoặc dễ quản lý hơn trong các folder khác nhau.
Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn DOM ảo hỗ trợ rất tốt cho việc cấu trúc UI phản ứng kịp thời với trước những thay đổi nhằm tăng trải nghiệm người dùng Khi tạo ra ReactJS, các nhà thiết kế đã dự đoán đúng việc cập nhật cácHTML cũ là cực kỳ quan trọng nhưng cũng khá tốn kém chi phí Vì thế ý tưởng sử dụng DOM ảo giúp ReactJS biết chính xác khi nào cần render lại hoặc khi nào bỏ đi những phần tử của DOM chính vì phát hiện ra những thay đổi trên data.
Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render.
State là thể hiện trạng thái của ứng dụng, khi state thay đổi thì component đồng thời render lại để cập nhật lại giao diện mới.
2.1.1.2 Cách khởi tạo dự án ReactJS Điều kiện khởi tạo:
Cách khởi tạo 1 dự án ReactJS khá là đơn giản ta chỉ cần chọn thư mục cần lưu và mở cmd gõ các lệnh sau: npx create-react-app react-app cd react-app npm start
Sau khi thành công trình duyệt mặc định sẽ hiển thị như hình dưới đây.
Hình 2.1 Khởi tạo dự án
2.1.1.3 Ứng dụng ReactJS vào đề tài
React có cơ chế phân chia các thành phần của trang web thành các component, nhằm để tiện tái sử dụng nhiều lần ở các trang khác nhau của website.
Sử dụng react router dom để áp dụng vào việc phân các router, đường dẫn của trang web Giúp cho cơ chế định vị trang trở nên dễ dàng hơn bao giờ hết.
Hình 2.2 Cấu trúc của dự án (bao gồm người dùng và quản trị viên)
Tailwind CSS là một utility-first CSS framework nó hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, nó cũng có điểm chung giống như Bootstrap & điểm làm nó nổi bật hơn cả đó là chúng ta có thể tùy biến phát triển CSS theo cách mà chúng ta định nghĩa ra.
Cơ chế hoạt động của Tailwind CSS là sẽ tiến hành quét hết tất cả các tệp HTML, thành phần JavaScript hoặc bất kì các template nào khác để tìm tên lớp (class name), sau đó sẽ tạo ra các kiểu CSS tương ứng với các tên lớp vừa quét được rồi ghi vào một tệp tĩnh CSS [2]
2.1.2.2 Cài đặt Tailwind CSS tích hợp trong thư viện ReactJS
Chúng ta tiến hành thực thi các câu lệnh dưới đây để tiến hành tạo project
ReactJS sử dụng Vite. npm create vite@latest my-project template react cd my-project
Bước 2: Cài đặt Tailwind CSS.
LƯỢC ĐỒ LỚP
THIẾT KẾ CƠ SỞ DỮ LIỆU
3.4.1 Lược đồ thực thể kết hợp (ERD)
3.4.2 Chi tiết bảng dữ liệu
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã địa chỉ Khóa chính
2 address_line varchar Địa chỉ chi tiết
3 ward varchar Tên xã/ phường
4 district varchar Tên quận/huyện
5 province varchar Tên tỉnh/thành phố
6 ward_id varchar Mã xã/phường Mã được lấy theo
7 district_id bigint Mã quận/huyện Mã được lấy theo
8 province_id bigint Mã tỉnh/thành phố Mã được lấy theo
9 is_default bit Địa chỉ mặc định 0 - Bình thường
10 user_id bigint Mã tài khoản người dùng
11 phone varchar Số điện thoại
12 full_name varchar Họ tên đầy đủ
13 created_date datetime Thời gian tạo
14 update_date datetime Thời gian cập nhật
15 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã của giỏ hàng Khóa chính
2 user_id bigint Mã tài khoản của người dùng
3 grand_total bigint Tổng số tiền tạm tính
4 created_date datetime Thời gian tạo
5 update_date datetime Thời gian cập nhật
6 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã chi tiết giỏ hàng Khóa chính
2 variant_id bigint Mã biến thể sản phẩm
3 cart_id bigint Mã giỏ hàng
4 quantity bigint Số lượng sản phẩm
5 total bigint Tổng tiền tạm tính
6 created_date datetime Thời gian tạo
7 update_date datetime Thời gian cập nhật
8 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã phân loại/danh mục Khóa chính
2 parent_id bigint Mã của phân loại lớn
3 name varchar Tên phân loại
4 decription varchar Mô tả về loại sản phẩm
5 created_date datetime Thời gian tạo
6 update_date datetime Thời gian cập nhật
7 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã màu sắc/kiểu dáng Khóa chính
2 color varchar Tên màu sắc Do người dùng tự đặt
3 code varchar Mã màu sắc dạng hex Do người dụng tự chọn
4 created_date datetime Thời gian tạo
5 update_date datetime Thời gian cập nhật
6 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã hình ảnh Khóa chính
2 product_id bigint Mã sản phẩm
3 path varchar Đường dẫn/tên file hình ảnh
4 created_date datetime Thời gian tạo
5 update_date datetime Thời gian cập nhật
6 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã hóa đơn Khóa chính
2 user_id bigint Mã tài khoản người dùng
3 grand_total bigint Tổng tiền
PENDING - đang được xử lý
4 delivery_status varchar Trạng thái giao hàng DELIVERING - đang giao hàng COMPLETED - đã giao hàng
5 payment_status varchar Trạng thái thanh toán PENDING - chưa thanh toán
6 payment_method varchar Phương thức thanh toán
PENDING - đang đợi xử lý
IN PRORESS - đã xử lý, đợi giao hàng
7 status varchar Trạng thái đơn hàng
COMPLETED - đã hoàn thành đơn hàng CANCELLED - đã hủy
8 address_id bigint Mã địa chỉ giao hàng
9 note varchar Ghi chú thêm cho đơn hàng
10 delivery_fee bigint Phí vận chuyển được tính theo hệ thống của GHN
11 created_date datetime Thời gian tạo
12 update_date datetime Thời gian cập nhật
13 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã chi tiết hóa đơn Khóa chính
2 variant_id bigint Mã biến thể sản phẩm
3 invoice_id bigint Mã hóa đơn
4 quantity bigint Số lượng sản phẩm
5 unit_price bigint Đơn giá của sản phẩm
7 created_date datetime Thời gian tạo
8 updated_date datetime Thời gian cập nhật
9 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã sản phẩm Khóa chính
2 category_id bigint Mã phân loại sản phẩm
3 name varchar Tên/Tiêu đề sản phẩm
4 code varchar Mã hàng hóa
5 list_price bigint Giá niêm yết
6 stand_cost bigint Giá nhập
7 image varchar Đường dẫn/tên tệp hình ảnh
MALE - sản phẩm dành cho nam FEMALE - sản
8 gender varchar Giới tính sản phẩm phẩm dành cho nữ
UNISEX - sản phẩm cho cả nam và nữ
9 description text Mô tả về sản phẩm
10 created_date datetime Thời gian tạo
11 update_date datetime Thời gian cập nhật sản phẩm
12 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã vai trò Khóa chính
2 code varchar Tên vai trò
3 title varchar Mô tả về vai trò/quyền
Cash – giảm theo giá tiền
4 type varchar Loại voucher Percent – giảm theo phần trăm đơn hàng
5 discountAmount double Giá trị voucher
6 issueDate date Ngày phát hành voucher
8 expiredDate date Ngày hết hạn voucher
9 minimumAmount double Giá trị đơn hàng tối thiểu
10 maximumDiscount double Giảm trị giảm tối đa
11 description varchar Mô tả voucher
12 created_date datetime Thời gian tạo
13 update_date datetime Thời gian cập nhật
14 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã vai trò Khóa chính
2 name varchar Tên vai trò
3 description varchar Mô tả về vai trò/quyền
4 created_date datetime Thời gian tạo
5 update_date datetime Thời gian cập nhật
6 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã của kích cỡ/size Khóa chính
2 size varchar Tên kích cỡ/size
3 description varchar Mô tả về kích cỡ/size
4 created_date datetime Thời gian tạo
5 update_date datetime Thời gian cập nhật
6 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã tài khoản của người Khóa chính dùng
2 role_id bigint Mã của quyền/vai trò
3 full_name varchar Họ tên đầy đủ của người dùng
4 gender varchar Giới tính của người dùng
5 dob varchar Ngày tháng năm sinh của người dùng
6 phone varchar Số điện thoại của người dùng
7 email varchar Email của người dùng
8 password varchar Mật khẩu của người dùng
9 photo varchar dùng để hiển thị trên hệ thống
10 enable bit Trạng thái của tài khoản
11 created_date datetime Thời gian tạo
12 update_date datetime Thời gian cập nhật
13 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã biến thể sản phẩm Khóa chính
2 color_id bigint Mã màu sắc/kiểu dáng
3 size_id bigint Mã kích thước/size
4 product_id bigint Mã sản phẩm
5 image varchar Hình ảnh của biến thể sản phẩm
6 imventory bigint Số lượng sản phẩm còn lại trong kho
7 created_date datetime Thời gian tạo
8 update_date datetime Thời gian cập nhật
9 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã banner Khóa chính
2 end_date datetime Ngày kết thúc
3 start_date datetime Ngày bắt đầu
4 image varchar Đường dẫn hình ảnh
5 link_to varchar Đường dẫn đến sản phẩm
6 type varchar Loại sản phẩm
7 created_date datetime Thời gian tạo
8 update_date datetime Thời gian cập nhật
9 deleted_date datetime Thời gian xóa
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú
1 id bigint Mã banner Khóa chính
2 comment varchar Nội dung đánh giá
3 rating bigint Điểm đánh giá
4 user_id bigint Mã người dùng
6 invoice_detail_id bigint Mã chi tiết hóa đơn
7 variant_id bigint Mã biến thể sản phẩm
8 created_date datetime Thời gian tạo
9 update_date datetime Thời gian cập nhật
10 deleted_date datetime Thời gian xóa
THIẾT KẾ GIAO DIỆN
3.5.1 Màn hình giao diện phía người dùng
Sơ đồ luồng màn hình (Screen Flow) cho người dùng khách (Guest) trên trang web dành cho người dùng cuối Bao gồm các màn hình có thể truy cập không cần xác thực người dùng dưới quyền người dùng đã đăng nhập (User).
Hình 3.32 Sơ đồ luồng cho người dùng khách (Guest)
Sơ đồ luồng màn hình cho người dùng (User) trên Website dành cho người dùng cuối Bao gồm các màn hình để có thể truy cập người dùng cần phải xác thực bằng cách đăng nhập.
Hình 3.33 Sơ đồ luồng cho người dùng (User)
Hình 3.34 Giao diện trang chủ Bảng 3.53 Mô tả màn hình trang chủ
STT Tên Định dạng Mô tả
1 Giới tính Link Chuyển sang trang tất cả sản phẩm mà chỉ có sản phẩm theo giới tính đó
2 Tìm kiếm Text Nhấn để hệ thống bắt đầu tìm những sản phẩm theo thông tin người dùng đã nhập
3 Banner Hình ảnh Hình ảnh quảng cáo của trang chủ
4 Khám phá Button Người dùng nhấn vào sẽ chuyển sang trang tất cả sản phẩm
5 Đăng nhập Link Người dùng nhấn vào sẽ chuyển sang trang đăng nhập
Hình 3.35 Giao diện đăng nhập Bảng 3.54 Mô tả giao diện đăng nhập
STT Tên Định dạng Mô tả
1 Email Text Người dùng nhập số điện thoại
2 Mật Text Người dùng nhập mật khẩu khẩu
3 Đăng Button Người dùng nhấn để đăng nhập nhập
4 Đăng Button Người dùng nhấn để chuyển sang trang đăng ký ký
Hình 3.36 Giao diện đăng ký Bảng 3.55 Mô tả giao diện đăng ký
STT Tên Định dạng Mô tả
1 Họ và tên Text Người dùng nhập họ và tên
2 Email Text Người dùng nhập số điện thoại
3 Mật khẩu Text Người dùng nhập mật khẩu
4 Nhập lại mật khẩu Text Người dùng nhập lại mật khẩu
5 Đăng ký Button Người dùng nhấn để đăng ký tài khoản
3.5.1.4 Giao diện trang danh sách sản phẩm
Hình 3.37 Giao diện danh sách sản phẩm Bảng 3.56 Mô tả giao diện danh sách sản phẩm
STT Tên Định dạng Mô tả
1 Danh sách các Checkbox Người dùng chọn các danh mục danh mục
2 Danh sách màu Checkbox Người dùng chọn các màu sắc sắc
3 Các hình ảnh của Image Người dùng nhấn hình ảnh để xem hình sản phẩm ảnh rõ hơn trên hình lớn
4 Tên sản phẩm Link Người dùng nhấn để vào trang chi tiết sản phẩm của sản phẩm đó
3.5.1.5 Giao diện chi tiết sản phẩm
Hình 3.38 Giao diện chi tiết sản phẩm Bảng 3.57 Mô tả giao diện chi tiết sản phẩm
STT Tên Định dạng Mô tả
1 - Button Nhấn để số lượng sản phẩm giảm 1
2 + Button Nhấn để số lượng sản phẩm tăng 1
3 Số lượng sản Text Nhập số lượng sản phẩm muốn mua phẩm
4 Thêm vào giỏ Button Nhấn để thêm sản phẩm vào giỏ hàng hàng
5 Chọn màu Image Người dùng chọn màu
6 Chọn size Button Người dùng chọn size
7 Các hình ảnh của Image Người dùng nhấn chọn hình để hiển thị rõ sản phẩm hơn trên hình chính
3.5.1.6 Giao diện thông tin cá nhân người dùng
Hình 3.39 Giao diện thông tin cá nhân người dùng Bảng 3.58 Mô tả giao diện chi tiết sản phẩm
STT Tên Định dạng Mô tả
1 Họ và tên Text Hiện thị Họ và tên
2 Email Text Hiển thị Email
3 Số điện thoại Text Hiển thị số điện thoại
4 Ngày sinh Date Hiện thị ngày sinh
5 Giới tính ComboBox Hiển thị giới tính
6 Cập nhập thông tin Button Nhấn để cập nhật thông tin người dùng
7 Chọn hình ảnh Button Chọn hỉnh ảnh để thay đổi ảnh đại diện
8 Mật khẩu cũ Text Nhập mật khẩu cũ
9 Mật khẩu mới Text Người dùng nhập mật khẩu mới
10 Nhập lại mật khẩu Text Người dùng nhập lại mật khẩu mới mới
11 Cập nhật mật khẩu Button Khi bấm sẽ tiến hành cập nhật mật khẩu mới cho người dùng.
3.5.1.7 Giao diện lịch sử mua hàng
Hình 3.40 Giao diện danh sách lịch sử mua hàng Bảng 3.59 Mô tả giao diện lịch sử mua hàng
STT Tên Định dạng Mô tả
1 Chi tiết Button Nhấn để xem chi tiết đơn hàng
2 Xem thêm Button Nhấn để hiển thị thêm nhiều đơn hàng đã mua
3 Trạng thái Button Nhấn để hiển thị đơn hàng theo trạng thái
3.5.1.8 Giao diện chi tiết lịch sử mua hàng
Hình 3.41 Giao diện chi tiết đơn hàng Bảng 3.60 Mô tả giao diện chi tiết đơn hàng
STT Tên Định dạng Mô tả
1 Trở về Button Nhấn để trở về trang lịch sử mua hàng
3.5.1.9 Giao diện danh sách địa chỉ
Hình 3.42 Danh sách địa chỉ Hình 3.43 Mô tả giao diện danh sách địa chỉ
STT Tên Định dạng Mô tả
1 Chỉnh sửa địa chỉ Button Nhấn để chuyển sang trang chỉnh sửa địa chỉ đó
2 Xóa địa chỉ Button Nhấn để xóa địa chỉ đó
3 Xem thêm Button Nhấn để xem thêm địa chỉ đã lưu
4 Thêm địa chỉ mới Button Nhấn để chuyển sang trang thêm địa chỉ mới
3.5.1.10 Giao diện thêm địa chỉ mới
Hình 3.44 Giao diện thêm địa chỉ mới Bảng 3.61 Mô tả giao diện thêm địa chỉ
STT Tên Định dạng Mô tả
1 Tỉnh/Thành Combobox Người dùng chọn tỉnh, thành phố phố
2 Quận/Huyện Combobox Người dùng chọn quận, huyện
3 Xã/Phường Combobox Người dùng chọn xã, phường
4 Địa chỉ Text Người dùng nhập địa chỉ
5 Họ và tên Text Người dùng nhập họ và tên
6 Số điện Text Người dùng nhập số điện thoại thoại
7 Lưu Button Người dùng nhấn Lưu để lưu thông tin địa chỉ
8 Hủy Button Người dùng nhấn hủy
9 Thông tin Button Người dùng nhấn để chuyển sang trang thông tài khoản tin tài khoản
10 Lịch sử mua Button Người dùng nhấn để chuyển sang trang Lịch sử hàng mua hàng
11 Danh sách Button Người dùng nhấn để chuyển sang trang quản lý địa chỉ các địa chỉ
12 Đăng xuất Button Người dùng nhấn để chuyển đăng xuất tài khoản
Hình 3.45 Giao diện giỏ hàng Bảng 3.62 Mô tả giao diện giỏ hàng
STT Tên Định dạng Mô tả
1 - Button Nhấn để giảm số lượng là 1
2 + Button Nhấn để tăng số lượng là 1
3 Số lượng Text Nhập số lượng mong muốn sản phẩm
4 Xóa sản Button Xóa sản phẩm khỏi giỏ hàng phẩm
5 Cập nhập Button Cập nhật lại giỏ hàng sau khi thực hiện thao tác giỏ hàng chỉnh sửa số lượng
6 Thanh Button Chuyển sang trang thanh toán toán
3.5.1.12 Giao diện chọn địa chỉ thanh toán
Hình 3.46 Giao diện chọn địa chỉ thanh toán Bảng 3.63 Mô tả giao diện chọn địa chỉ thanh toán
STT Tên Định dạng Mô tả
1 Trở về giỏ hàng Button Quay lại trang giỏ hàng
2 Danh sách địa Radio Button Chọn địa chỉ trong danh sách địa chỉ chỉ
3 Giao đến địa chỉ Button Nhấn để xác nhận chọn địa chỉ đã được đã chọn chọn sẵn
4 Giao đến địa chỉ Button Nhấn để xác nhận thêm và chọn địa chỉ đã chọn mới thêm làm địa chỉ giao hàng
Hình 3.47 Giao diện thanh toán Bảng 3.64 Mô tả giao diện thanh toán
STT Tên Định dạng Mô tả
1 Phương thức vận chuyển Radio Button Chọn phương thức vận chuyển
2 Phương thức thanh toán Radio Button Chọn phương thức thanh toán
3 Ghi chú đơn hàng Text Người dùng nhập ghi chú nếu họ muốn
4 Thanh toán Button Chọn thanh toán để đặt hàng
3.5.1.14 Giao diện kết quả đặt hàng
Hình 3.48 Giao diện kết quả đặt hàng
STT Tên Định dạng Mô tả
1 Tiếp tục mua sắm Button Quay về trang chủ
Bảng 3.65 Mô tả giao diện kết quả thanh toán
3.5.1.15 Giao diện “Quên mật khẩu”
Hình 3.50 Giao diện quên mật khẩu – 1
Bảng 3.27 Mô tả giao diện quên mật khẩu - 1
STT Tên Định dạng Mô tả
1 Số điện thoại, email Text Nhập số điện thoại hoặc gmail
2 Đặt lại mật khẩu Button Nhấn nút để đặt lại mật khẩu
3 Về trang đăng nhập Button Quay lại trang đăng nhập
Hình 3.51 Giao diện quên mật khẩu -2 Bảng 3.28 Mô tả giao diện quên mật khẩu - 2
STT Tên Định dạng Mô tả
1 Mở hộp thư điện Button Chuyển đến hộp thư điện tử gmail tử
Hình 3.52 Giao diện Quên mật khẩu – 3 Bảng 3.29 Mô tả giao diện quên mật khẩu – 3
STT Tên Định dạng Mô tả
1 Mật khẩu mới Text Nhập mật khẩu mới
2 Nhập lại mật khẩu mới Text Nhập lại mật khẩu mới
3 Đặt lại mật khẩu Button Nhấn để đặt lại mật khẩu
3.5.1.16 Giao diện “Đánh giá sản phẩm”
Hình 3.52 Giao diện Quên mật khẩu – 3 Bảng 3.29 Mô tả giao diện quên mật khẩu – 3
STT Tên Định dạng Mô tả
1 Sao Button Nhập số sao đánh giá
2 Nhận xét Text Lời nhận xét của khách hàng
3 Đánh giá Button Nút để gửi lời đánh giá
3.5.2 Màn hình giao diện phía quản trị viên
Sơ đồ luồng màn hình dành cho phân quyền quản trị viên.
Hình 3.49 Sơ đồ luồng cho bên quản trị viên
3.5.2.1 Giao diện trang điều khiển
Hình 3.50 Giao diện bảng điều khiển
Bảng 3.66 Mô tả giao diện điều khiển
STT Tên Định Mô tả dạng
1 Bảng điều khiển Button Chọn để vào trang bảng điều khiển
2 Tất cả đơn hàng Button Chọn để vào trang Quản lý đơn hàng
3 Đang chờ xử lý Button Chọn để vào trang các đơn hàng đang chờ xử lý
4 Đã xử lý Button Chọn để vào trang các đơn hàng đã xử lý
5 Đã thanh toán Button Chọn để vào trang các đơn hàng đã thanh toán
6 Đã hủy Button Chọn để vào trang các đơn hàng đã hủy
7 Sản phẩm Button Chọn để chuyển qua trang Quản lý sản phẩm
8 Phân loại Button Chọn để chuyển qua trang Quản lý các danh mục
9 Màu sắc Button Chọn để chuyển qua trang Quản lý thuộc tính màu sắc
10 Kích cỡ Button Chọn để chuyển qua trang Quản lý thuộc tính kích cỡ
11 Thống kê Button Chọn để chuyển qua trang thống kê
3.5.2.2 Giao diện trang danh sách đơn hàng
Hình 3.51 Giao diện danh sách đơn hàng Bảng 3.67 Mô tả giao diện danh sách đơn hàng
STT Tên Định dạng Mô tả
1 Chi tiết Button Nhấn nút để vào trang chi tiết đơn hàng đó
2 Trở về Button Nhấn nút để quay trở về trang trước
3 Số trang Button Chọn số trang của danh sách đơn hàng
3.5.2.3 Giao diện chi tiết đơn hàng
Hình 3.52 Giao diện chi tiết đơn hàng Bảng 3.68 Mô tả giao diện chi tiết đơn hàng
STT Tên Định dạng Mô tả
1 Số trang Button Chọn số trang của danh sách sản phẩm
2 Xác nhận đơn hàng Button Xác nhận đơn hàng do người dùng đặt hàng
3 Hủy đơn hàng Button Nhấn để hủy đơn hàng
4 Chi tiết Button Chọn để xem chi tiết người dùng đó
3.5.2.4 Giao diện danh sách sản phẩm
Hình 3.53 Giao diện danh sách sản phẩm Bảng 3.69 Mô tả giao diện danh sách sản phẩm
STT Tên Định dạng Mô tả
1 Sửa Button Nhấn để chuyển qua trang sửa thông tin sản phẩm
2 Xóa Button Nhấn để xóa sản phẩm
3 Thêm sản phẩm Button Nhấn để chuyển qua trang thêm sản phẩm
3.5.2.5 Giao diện chi tiết sản phẩm
Hình 3.54 Giao diện danh sách sản phẩm - 1
Hình 3.55 Giao diện chi tiết sản phẩm – 2 Bảng 3.70 Mô tả giao diện chi tiết sản phẩm – 1
STT Tên Định dạng Mô tả
1 Tiêu đề Text Nhập tiêu đề sản phẩm
2 Loại sản phẩm Combobox Chọn loại sản phẩm
3 Giới tính Combobox Chọn loại giới tính
4 Barcode Text Nhập mã sản phẩm
5 Màu, kiểu dáng Combobox Chọn loại màu
6 Size Combobox Chọn kiểu size
7 Số lượng Text Nhập số lượng
8 Hình ảnh Image Chọn để thêm hình ảnh
9 Thêm biến thể Button Chọn để xuất hiện biến thể mới bao gồm các thuộc tính màu, size và số lượng
10 Giá nhập Text Nhập giá tiền nhập của sản phẩm
11 Giá bán Text Nhập giá bán của sản phẩm
12 Mô tả Text Nhập mô tả, ghi chú của sản phẩm đó
Hình 3.57 Giao diện chi tiết sản phẩm – 4 Bảng 3.71 Mô tả giao diện chi tiết sản phẩm -2
STT Tên Định dạng Mô tả
1 Choose File Button Upload hình ảnh từ máy tính lên
2 Hình ảnh Image Hiển thị hình ảnh chính
3 Choose Files Button Upload hình ảnh từ máy tính lên
4 Danh sách hình ảnh Image Hiển thị hình ảnh phụ của sản phẩm đó
5 Hủy Button Chọn để hủy bỏ tác vụ đang làm và trở về trang quản lý sản phẩm
6 Lưu Button Nhấn để lưu sản phẩm vào cơ sở dữ liệu
3.5.2.6 Giao diện danh sách phân loại
Hình 3.58 Giao diện danh sách phân loại
STT Tên Định dạng Mô tả
1 Sửa Button Chọn sửa để chuyển sang trang chi tiết phân loại
2 Xóa Button Chọn để xóa “phân loại”
3 Số trang Button Dùng để phân trang
4 Thêm phân loại mới Button Nhấn để mở hộp thoại thêm phân loại mới
3.5.2.7 Giao diện chi tiết phân loại
Hình 3.59 Giao diện chi tiết phân loại
Bảng 3.73 Mô tả giao diện chi tiết phân loại
STT Tên Định dạng Mô tả
1 Tên danh mục Text Nhập tên danh mục
2 Mô tả Text Nhập mô tả của danh mục đó
3 Danh mục lớn Combobox Chọn các loại danh mục lớn (nếu có)
4 Hủy Button Chọn hủy để hủy thao tác hiện thời đang làm và quay về trang quản lý danh mục
5 Lưu Button Nhấn để lưu các thông tin vào database
3.5.2.8 Giao diện thêm phân loại
Hình 3.60 Giao diện thêm phân loại
STT Tên Định dạng Mô tả
1 Tên loại Text Nhập tên phân loại
2 Mô tả Text Nhập mô tả của phân loại
3 Danh mục lớn Combobox Chọn danh mục lớn
4 Hủy Button Chọn để tắt hộp thoại
5 Lưu Button Nhấn để Lưu các thông tin vào database
Bảng 3.74 Mô tả giao diện thêm phân loại
3.5.2.9 Giao diện danh sách màu sắc
Hình 3.61 Giao diện danh sách màu sắc/kiểu dáng Bảng 3.75 Mô tả giao diện màu sắc/kiểu dáng
STT Tên Định dạng Mô tả
1 Sửa Button Chọn sửa để chuyển sang trang chi tiết màu sắc
2 Xóa Button Chọn để xóa màu đó
3 Thêm màu Button Chọn để mở hộp thoại thêm màu sản phẩm mới
3.5.2.10 Giao diện chi tiết màu sắc/kiểu dáng
Hình 3.62 Giao diện chi tiết màu sắc Bảng 3.76 Mô tả giao diện chi tiết màu sắc
STT Tên Định dạng Mô tả
1 Tên màu Text Nhập tên màu
2 Mã màu Color Chọn màu cần muốn
3 Hủy Button Nhấn để hủy thao tác hiện hành và quay lại trang quản lý màu sắc
4 Lưu Button Nhấn để lưu các thông tin vào database
3.5.2.11 Giao diện thêm màu sắc
Hình 3.63 Giao diện thêm màu sắc Bảng 3.77 Mô tả giao diện thêm màu sắc
STT Tên Định dạng Mô tả
1 Tên màu Text Nhập tên màu
2 Mã màu Text Hiển thị mã màu
3 Hình ảnh màu Color Picker Chọn màu mong muốn
4 Hủy Button Nhấn để hủy thao tác hiện hành và quay lại trang quản lý màu
5 Lưu Button Nhấn để lưu thông tin vào database
3.5.2.12 Giao diện danh sách kích cỡ
Hình 3.64 Giao diện danh sách kích cỡ Bảng 3.78 Mô tả giao diện danh sách kích cỡ
STT Tên Định dạng Mô tả
1 Sửa Button Chọn sửa để chuyển sang trang chi tiết size
2 Xóa Button Chọn để xóa size đó
3 Thêm kích cỡ mới Button Chọn để mở hộp thoại thêm size
4 Số trang Button Dùng để phân trang
3.5.2.13 Giao diện chi tiết kích cỡ
Hình 3.65 Giao diện chi tiết kích cỡ Bảng 3.79 Mô tả giao diện chi tiết kích cỡ
STT Tên Định dạng Mô tả
1 Tên size Text Nhập tên size
2 Mô tả Text Nhập mô tả
3 Hủy Button Nhấn hủy thao tác hiện hành và quay lại trang quản lý size
4 Lưu Button Nhấn để lưu thông tin vào database
3.5.2.14 Giao diện thêm kích cỡ
Hình 3.66 Giao diện thêm kích cỡ Bảng 3.80 Mô tả giao diện thêm kích cỡ
STT Tên Định dạng Mô tả
1 Tên kích cỡ Text Nhập tên kích cỡ
2 Mô tả Text Nhập mô tả
3 Hủy Button Nhấn để hủy thao tác hiện hành và quay lại trang quản lý size
4 Lưu Button Nhấn để lưu thông tin vào database
3.5.2.15 Giao diện trang thống kê
Hình 3.67 Giao diện thống kê Bảng 3.81 Mô tả giao diện thống kê
STT Tên Định dạng Mô tả
1 Doanh thu Text Tổng doanh thu của cửa hàng
2 Số người dùng Text Tổng số người dùng
3 Sản phẩm Text Tổng số sản phẩm đang hiện hữu
4 Đơn hàng Text Tổng số đơn hàng
5 Đã bán Text Tổng số đơn hàng đã bán
6 Đơn chưa xử lý Text Tổng số đơn hàng chưa xử lý
7 Đơn đã xử lý Text Tổng số đơn hàng đã xử lý
8 Đơn đã hoàn Text Tổng số đơn hàng đã hoàn thành thành
9 Đơn đã hủy Text Tổng số đơn hàng đã hủy
10 Biểu đồ thống kê Biểu đồ thống kê các đơn hàng trong 7 ngày gần nhất
11 Tổng quan đơn Biểu đồ tổng quan các đơn hàng hàng
3.5.2.16 Giao diện danh sách người dùng
Hình 3.68 Giao diện danh sách người dùng Bảng 3.82 Mô tả giao diện danh sách người dùng
STT Tên Định dạng Mô tả
1 Trạng thái Button Nhấn để vô hiệu hóa hoặc kích hoạt lại tài khoản
2 Chi tiết Button Nhấn để xem thông tin chi tiết của khách hàng
3 Số trang Button Dùng để phân trang
4 Họ và tên Text Nhập tên để tiến hành thêm thông tin bộ lọc thông tin người dùng theo họ tên.
5 Số điện thoại Text Nhập tên để tiến hành thêm thông tin bộ lọc thông tin người dùng theo số điện thoại.
6 Email Text Nhập tên để tiến hành thêm thông tin bộ lọc thông tin người dùng theo email.
7 Giới tính ComboBox Nhập tên để tiến hành thêm thông tin bộ lọc thông tin người dùng theo giới tính.
8 Hiển thị ComboBox Chọn số lượng thông tin người dùng hiển thị trên một trang.
3.5.2.17 Giao diện chi tiết người dùng
Hình 3.69 Giao diện chi tiết người dùng Bảng 3.83 Mô tả giao diện chi tiết người dùng
STT Tên Định dạng Mô tả
1 Trạng thái Button Nhấn để vô hiện hóa hoặc kích hoạt lại tài khoản
2 Cập nhập quyền Button Cập nhật quyền hạn của tài khoản
3 Trở về Button Nhấn để quay lại trang quản lý người dùng
3.5.2.18 Giao diện trang đăng nhập
Hình 3.70 Giao diện trang đăng nhập của quản trị viên Bảng 3.84 Mô tả giao diện đăng nhập của quản trị viên
STT Tên Định dạng Mô tả
1 Tên tài khoản Text Nhập tên tài khoản
2 Mật khẩu Text Nhập mật khẩu
3 Đăng nhập Button Nhấn để tiến hành đăng nhập
3.5.2.19 Thiết lập giao diện và thông tin người dùng
Hình 3.71 Giao diện chỉnh giao diện và tab thông tin các nhân Bảng 3.85 Mô tả giao diện chọn màu giao diện và tab thông tin cá nhân
STT Tên Định dạng Mô tả
1 Bánh răng Button Nhấn để hiển thị giao diện thiết lập
2 Giao diện Radio Chọn giao diện sáng hoặc tối
3 Màu giao Button Nhấn để chọn màu giao diện diện
4 Đăng xuất Button Nhấn để đăng xuất tài khoản và trở về trang đăng nhập của admin
3.5.2.20 Giao diện danh sách đánh giá
Hình 3.72 Hình giao diện đánh giá theo sản phẩm Bảng 3.86 Mô tả giao diện danh sách đánh giá sản phẩm
STT Tên Định dạng Mô tả
1 Chi tiết Button Bấm để hiển thị trang chi tiết đánh giá
Hình 3.78 Giao diện danh sách các đánh giá Bảng 3.52 Mô tả giao diện danh sách đánh giá
STT Tên Định dạng Mô tả
1 Tên khách hàng Link Vào trang thông tin của khách hàng
2 Tên sản phẩm Link Vào trang thông tin của sản phẩm
3 Số sao Hình ảnh Hiển thị số lượng sao đánh giá của khách hàng
4 Bình luận Text Hiển thị bình luận của khách hàng
5 Chi tiết Button Bấm để hiển thị trang chi tiết đánh giá
6 Số trang Button Phân trang
3.5.2.21 Giao diện chi tiết đánh giá
Hình 3.79 Giao diện chi tiết đánh giá Bảng 3.53 Mô tả giao chi tiết đánh giá
STT Tên Định dạng Mô tả
1 Vô hiệu hóa Button Vô hiệu hóa đánh giá của khách hàng
2 Sao Hình ảnh Hiển thị số sao của khách hàng
3 Tên khách hàng Link Vào trang thông tin của khách hàng
4 Tên sản phẩm Link Vào trang thông tin của sản phẩm
5 Bình luận Text Hiển thị bình luận của khách hàng
CÀI ĐẶT VÀ KIỂM THỬ
KIỂM THỬ
ƯU ĐIỂM
4 Đề nghị cho bảo vệ hay không?
TP Hồ Chí Minh, ngày tháng năm 2023
Giáo viên hướng dẫn (Ký và ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ THÔNG TIN Độc lập – Tự do – Hạnh phúc
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên sinh viên 1: Phạm Đinh Quốc Hòa
Họ và tên sinh viên 2: Trần Anh Tiến
Ngành: Công nghệ Thông tin
Tên đề tài: Xây dựng website bán quần áo sử dụng Spring Boot và
ReactJS Họ và tên Giáo viên phản biện: ThS Mai Anh Thơ NHẬN XÉT
1 Về nội dung đề tài và khối lượng thực hiện
4 Đề nghị cho bảo vệ hay không?
TP Hồ Chí Minh, ngày tháng năm 2023
Giáo viên phản biện (Ký và ghi rõ họ tên)
Lời đầu tiên, nhóm xin phép được gửi lời cảm ơn chân thành đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được trau dồi, học tập và phát triển nền tảng kiến thức vững chắc để thực hiện đề tài này.
Bên cạnh đó, nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn chân thành và sâu sắc nhất Thầy đã tận tâm hướng dẫn nhiệt tình và đưa ra những góp ý quý báu cho nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này.
Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nhiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở các công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Lê Văn Vinh đã đem đến cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc chúng em hoàn thành được đề tài Đây sẽ là hành trang vô cùng lớn của chúng em trước khi bước ra một cuộc sống mới.
Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Chúng em hi vọng nhận được sự góp ý tận tình của quý thầy (cô) qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể.
Chúng em xin chân thành cảm ơn!
Trường Đại học Sư phạm Kỹ thuật TP.HCM
Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và tên sinh viên 1: Phạm Đinh Quốc Hòa
Họ và tên sinh viên 2: Trần Anh Tiến
Thời gian làm luận văn: Từ 13/02/2023 đến 10/07/2023.
Chuyên ngành: Công nghệ phần mềm
Tên luận văn: Xây dựng website bán quần áo sử dụng Spring Boot và ReactJS Giáo viên hướng dẫn: TS Lê Văn Vinh
Nhiệm vụ của luận văn:
- Tìm hiểu về các công nghệ: ReactJS, JSON Web Token, Spring Boot.
- Sử dụng Spring Boot để xây dưng Back-end, xây dựng các API cho các module của hệ thống.
- Sử dụng MySQL làm hệ quản trị cơ sở dữ liệu để lưu trữ dữ liệu của hệ thống.
- Ứng dụng JSON Web Token để xác thực và phân quyền cho hệ thống API cho từng người dùng.
- Ứng dụng thư viện ReactJS để xây dựng và xử lý giao diện Website cho người dùng Đề cương:
1 Tính cấp thiết của đề tài
4 Mục tiêu của đề tài
1.1 Các công nghệ sử dụng ở front–end 1.2 Các công nghệ sử dụng ở back–end Chương
2 Khảo sát hiện trạng và mô hình hóa yêu cầu
2.2 Kiến trúc chung của hệ thống
2.4 Mô hình hóa yêu cầu
Chương 3 Thiết kế phần mềm
3.3 Thiết kế cơ sở dữ liệu
Chương 4 Cài đặt và kiểm thử
