Xây dựng website bán quần áo sử dụng spring boot và reactjs

ĐỐI TƯỢNG NGHIÊN CỨU 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

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG WEBSITE BÁN QUẦN ÁO

SỬ DỤNG SPRING BOOT VÀ REACTJS

GVHD: TS LÊ VĂN VINH SVTH : PHẠM ĐINH QUỐC HÒA TRẦN ANH TIẾN

S K L 0 1 0 8 7 3

Tp Hồ Chí Minh, năm 2023

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

-  -

PHẠM ĐINH QUỐC HÒA – 19110365 TRẦN ANH TIẾN – 19110471

ĐỀ TÀI

XÂY DỰNG WEBSITE BÁN QUẦN ÁO SỬ DỤNG

SPRING BOOT VÀ REACTJS

KHÓA LUẬN TỐT NGHIỆP

GIẢNG VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH

KHÓA 2019 - 2023

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪ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

MSSV 1: 19110365 MSSV 2: 19110471 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 hướng dẫn: TS Lê Văn Vinh

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)

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

MSSV 1: 19110365 MSSV 2: 19110471 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ơ

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)

1

LỜI CẢM Ơ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!

Nhóm thực hiện

Phạm Đinh Quốc Hòa – 19110365 Trần Anh Tiến – 19110471

2

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

MSSV 1: 19110365 MSSV 2: 19110471 Thời gian làm luận văn: Từ 13/02/2023 đến 10/07/2023

- 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:

MỤC LỤC PHẦN MỞ ĐẦU

1 Tính cấp thiết của đề tài

2 Đối tượng nghiên cứu

3

1.1 Các công nghệ sử dụng ở front–end1.2 Các công nghệ sử dụng ở back–endChương 2.Khảo sát hiện trạng và mô hình hóa yêu cầu

3.3 Thiết kế cơ sở dữ liệu

3.4 Thiết kế giao diện

Chương 4.Cài đặt và kiểm thử

 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

4 18/04/2023 – 08/05/2023

 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 liệu

 Tiến hành xây dựng giao diện người dùng cho hệ thống

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

Ý kiến của giáo viên hướng dẫn

(ký và ghi rõ họ tên)

Ngày……tháng……năm 2023

Người viết đề cương

5

MỤC LỤC

LỜI CẢM ƠN 1

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2

MỤC LỤC 5

DANH MỤC BẢNG BIỂU 7

DANH MỤC HÌNH ẢNH 11

PHẦN MỞ ĐẦU 15

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 15

2 ĐỐI TƯỢNG NGHIÊN CỨU 15

3 PHẠM VI NGHIÊN CỨU 16

4 MỤC TIÊU CỦA ĐỀ TÀI 16

PHẦN NỘI DUNG 18

CHƯƠNG 1 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 18

1.1 KHẢO SÁT HIỆN TRẠNG 18

1.2 XÁC ĐỊNH YÊU CẦU 21

1.2.1 Yêu cầu chức năng 21

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 24

2.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT-END 24

2.1.1 Thư viện ReactJS 24

2.1.2 Tailwind CSS 26

2.1.3 Axios 31

2.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END 33

2.2.1 RESTFUL API 33

2.2.2 Spring Boot 34

2.2.3 MySQL 35

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

6

3.1 MÔ HÌNH HÓA YÊU CẦU 40

3.1.1 Lược đồ Use case 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.2 LƯỢC ĐỒ TUẦN TỰ 75

3.3 LƯỢC ĐỒ LỚP 98

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 THIẾT KẾ GIAO DIỆN 111

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

4.1 CÀI ĐẶT 154

4.1.1 Yêu cầu hệ thống 154

4.1.2 Các bước tiến hành 154

4.2 KIỂM THỬ 155

4.2.1 Kế hoạch kiểm thử 155

4.2.2 Quy trình kiểm thử 158

4.2.3 Kết quả kiểm thử 159

PHẦN KẾT LUẬN 165

1 KẾT QUẢ ĐẠT ĐƯỢC 165

2 ƯU ĐIỂM 165

3 NHƯỢC ĐIỂM 165

4 HƯỚNG PHÁT TRIỂN 165

TÀI LIỆU THAM KHẢO 166

7

DANH MỤC BẢNG BIỂU

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

8

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.37 tbl_address 99

Bảng 3.38 tbl_cart 101

Bảng 3.39 tbl_cart_detail 101

Bảng 3.40 tbl_category 102

Bảng 3.41 tbl_color 102

Bảng 3.42 tbl_image 103

Bảng 3.43 tbl_invoice 103

Bảng 3.44 tbl_invoice_detail 105

Bảng 3.45 tbl_product 105

Bảng 3.46 tbl voucher 106

Bảng 3.47 tbl_role 107

Bảng 3.48 tbl_size 108

9

Bảng 3.49 tbl_user 108

Bảng 3.50 tbl_variant 109

Bảng 3.51 tbl_banner 110

Bảng 3.52 Bảng tbl_review 110

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

10

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

11

DANH MỤC HÌNH ẢNH

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.3 Tailwind CSS 26

Hình 2.4 Ví dụ về các className của TailwindCSS 29

Hình 2.5 File TailwindCSS config 30

Hình 2.6 Axios 31

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.5 Sequence “Đăng nhập” 75

Hình 3.6 Sequence “Đăng ký” 75

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

12

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.14 Sequence “Đặt hàng” 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.29 Sequence “Tìm kiếm” 94

Hình 3.30 Lược đồ lớp 98

Hình 3.31 Database Design 99

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

13

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

14

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

15

PHẦN MỞ ĐẦU

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

2 ĐỐI TƯỢNG NGHIÊN CỨU

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

16

3 PHẠM VI NGHIÊN CỨU

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

Phía người dùng

- Đă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ể đó

- Tìm kiếm sản phẩm

- 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

- Thanh toán online

- Quản lý địa chỉ giao hàng (thêm, sửa, xóa địa chỉ)

- Xem thông tin đơn hàng đã đặt

- Đánh giá sản phẩm

- Quản lý thông tin cá nhân

- Đặt lại mật khẩu khi quên

Phía quản trị viê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

17

- 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

18

PHẦN NỘI DUNG CHƯƠNG 1 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU

- 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

19

- 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

1.1.1.3 Nhược điểm

- 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”

- 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

- Lọc sản phẩm

20

1.1.2.2 Ưu điểm

- Thiết kế đơn giản, dễ nhìn, dễ sử dụng

- Có áp dụng plug-in chat messenger

1.1.2.3 Nhược điểm

- 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”

Link: https://yame.vn/

Hình 1.1.1 Hình ảnh trang chủ của website www.yame.vn

1.1.3.1 Các chức năng chính

- 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

- Lọc sản phẩm

1.1.3.2 Ưu điể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 muốn

21

1.1.3.3 Nhược điểm

- 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 XÁC ĐỊNH YÊU CẦU

1.2.1 Yêu cầu chức nă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

- Đặt hàng

- Chỉnh sửa thông tin tài khoản

- Đăng ký tài khoản

22

- Đăng nhập

- Thay đổi mật khẩu

- 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

- 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ụ

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ữ

23

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ữ

7 Xem, lọc danh sách tài khoản Tra cứu (tìm kiếm)

12 Tính doanh thu của cửa hàng Tính toán

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

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ác HTML 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

25

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:

- Node version lớn hơn 10.16

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

27

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

Bước 1: Tạo project 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

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

@tailwind base;

@tailwind components;

@tailwind utilities;

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ẽ

29

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

30

Hình 2.5 File TailwindCSS config

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

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

- Hỗ trợ Promise API

- Đón chặn request và response

- Biến đổi dữ liệu request và response

- Bãi bỏ request

- Tự động chuyển đổi cho dữ liệu JSON

- Hỗ trợ phía client bảo vệ chống lại XSRF

33

2.2 CÁC CÔNG NGHỆ SỬ DỤNG Ở BACK-END

2.2.1 RESTFUL API

2.2.1.1 Khái niệm

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

- 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 1: Truy cập trang Spring Initializer với đường dẫn http://start.spring.io/

35

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,…

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

2.2.4.1 JSON Web Token

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ằng HMAC 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]

36

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