xây dựng website thương mại điện tử với spring boot và reactjs

Đối với quản trị viên Có toàn quyền trong hệ thống, có tất cả các chức năng của các người dùng và cóthêm một số chức năng: - Quản lý tài khoản: Quản trị viên có thể xem thông tin của các

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

VỚI SPRING BOOT VÀ REACTJS

KHUẤT TÙNG LÂM

Hà Nội – Năm 2024

TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ

VỚI SPRING BOOT VÀ REACTJS

KHUẤT TÙNG LÂM

Ngành đào tạo : Công nghệ thông tinNgười hướng dẫn : ThS Trương Mạnh Đạt

Hà Nội – Năm 2024

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

BẢN CAM ĐOAN

Tên tôi là: Khuất Tùng Lâm

Mã sinh viên: 20111063326 Lớp: ĐH10C9

Ngành: Công nghệ thông tin

Tôi đã thực hiện khóa luận tốt nghiệp với đề tài: Xây dựng website thươngmại điện tử với Spring boot và ReactJS

Tôi xin cam đoan đây là đề tài nghiên cứu của riêng tôi và được sự hướngdẫn của ThS.Trương Mạnh Đạt Các nội dung nghiên cứu, kết quả trong đề tài này

là trung thực và chưa được công bố dưới bất kỳ hình thức nào Nếu phát hiện có bất

kỳ hình thức gian lận nào tôi xin hoàn toàn chịu trách nhiệm trước pháp luật

Hà Nội, ngày tháng năm 2024

Trương Mạnh Đạt Khuất Tùng Lâm

LỜI CẢM ƠN

Để hoàn thành được đề tài Khóa luận tốt nghiệp này, trước hết em xin gửilời cảm ơn chân thành nhất đến các Cán bộ Giảng viên Khoa Công nghệ Thông tin,các cán bộ giảng viên trong Trường Đại học Tài nguyên Môi trường Hà Nội đã tậntình giảng dạy và truyền đạt kiến thức cho em Đồng thời em xin gửi lời cảm ơn đặcbiệt về sự chỉ dạy, hướng dẫn tận tình của ThS Trương Mạnh Đạt đã luôn tận tìnhhướng dẫn, giúp đỡ em trong suốt thời gian thực hiện Khóa luận

Em cũng xin gửi lời cảm ơn tới Khoa Công nghệ Thông tin – Trường Đại HọcTài nguyên Môi trường Hà Nội đã luôn quan tâm và tạo điều kiện giúp em hoànthành đề tài Khóa luận tốt nghiệp này Ngoài ra, em xin cảm ơn những người bạn đãgiúp đỡ và trao đổi thêm nhiều thông tin về đề tài trong quá trình thực hiện đề tàinày

Cuối cùng em vô cùng biết ơn gia đình và bạn bè, những người đã luôn luôn ởbên cạnh em, động viên, chia sẻ với em trong suốt thời gian thực đề tài Khóa luận

tốt nghiệp “Xây dựng website thương mại điện tử với Spring Boot và ReactJs”.

Do kiến thức còn hạn chế, bài báo cáo của em không tránh khỏi những sai sót.Rất mong nhận được những lời góp ý từ quý Thầy cô để Khóa luận tốt nghiệp của

em được hoàn thiện và giúp em có thêm những kinh nghiệm quý báu

Cuối cùng, em xin kính chúc các thầy cô giảng viên trường Đại học Tàinguyên và Môi trường Hà Nội nói chung, các thầy cô khoa công nghệ thông tin nói

riêng dồi dào sức khỏe và thành công trong sự nghiệp cao quý

Hà Nội, tháng năm

Sinh viên thực hiện

Khuất Tùng Lâm MỤC LỤC

BẢN CAM ĐOAN i

LỜI CẢM ƠN ii

DANH MỤC CÁC CHỮ VIẾT TẮT viii

DANH MỤC CÁC BẢNG ix

DANH MỤC HÌNH ẢNH xi

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu của đề tài 1

3 Nội dung nghiên cứu 1

4 Phương pháp nghiên cứu 2

5 Kết quả đạt được 2

6 Bố cục của Khóa luận 2

CHƯƠNG 1: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT 3

1.1 Tổng quan về hệ thống thương mại điện tử 3

1.1.1 Giới thiệu về thương mại điện tử 3

1.1.2 Lợi ích của thương mại điện tử 3

1.1.3 Các loại hình thương mại điện tử phổ biến ở Việt Nam 4

1.2 Tổng quan về Spring Framework 5

1.2.1 Giới thiệu về Spring 5

1.2.2 Giới thiệu về Spring Boot 5

1.2.3 Ưu điểm của Spring Boot 6

1.3 Tổng quan về ReactJS 6

1.3.1 Giới thiệu về ReactJS 6

1.3.2 Đặc trưng của ReactJS 6

1.3 Tổng quan về MySQL 7

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 9

2.1 Mô tả nghiệp vụ 9

2.1.1 Dành cho khách hàng 9

2.1.2 Dành cho nhà cung cấp 9

2.1.3 Dành cho quản trị viên 9

2.2 Yêu cầu hệ thống 9

2.2.1 Đối với khách hàng 9

2.2.2 Đối với nhà cung cấp 10

2.2.3 Đối với quản trị viên 11

2.3 Danh sách các Actor 11

2.4 Biểu đồ usecase tổng quát 12

2.4.1 Biểu đồ usecase phía khách hàng 12

2.4.2 Biểu đồ usecase phía nhà cung cấp 13

2.4.3 Biểu đồ usecase phía quản trị viên 14

2.5 Mô hình usecase phân rã chức năng 14

2.5.1 Usecase phân rã chức năng quản lý giỏ hàng 14

2.5.2 Usecase phân rã chức năng quản lý tài khoản 15

2.5.3 Usecase phân rã chức năng quản lý sản phẩm 15

2.5.4 Usecase phân rã chức năng quản lý bài đăng 16

2.5.5 Usecase phân rã chức năng quản lý đơn hàng 16

2.6 Kịch bản Usecase 17

2.6.1 Kịch bản chức năng đăng ký 17

2.6.2 Kịch bản chức năng đăng nhập 18

2.6.3 Kịch bản chức năng ứng tuyển nhà cung cấp 18

2.6.4 Kịch bản chức năng quản lý thông tin cá nhân 19

2.6.5 Kịch bản chức năng thanh toán 19

2.6.6 Kịch bản chức năng quản lý giỏ hàng 20

2.6.7 Kịch bản chức năng quản lý bài đăng 21

2.6.8 Kịch bản chức năng quản lý tài khoản 22

2.6.9 Kịch bản chức năng quản lý sản phẩm 24

2.6.10 Kịch bản chức năng quản lý đơn hàng 26

2.7 Biểu đồ tuần tự của hệ thống 28

2.7.1 Biểu đồ tuần tự chức năng đăng ký 28

2.7.2 Biểu đồ tuần tự chức năng đăng nhập 29

2.7.3 Biểu đồ tuần tự chức năng cập nhật thông tin cá nhân 30

2.7.4 Biểu đồ tuần tự chức năng quản lý giỏ hàng 31

2.7.5 Biểu đồ tuần tự chức năng quản lý tài khoản 34

2.7.6 Biểu đồ tuần tự chức năng quản lý bài đăng 36

2.7.7 Biểu đồ tuần tự chức năng quản lý sản phẩm 37

2.7.8 Biểu đồ tuần tự chức năng quản lý đơn hàng 40

2.8 Biểu đồ hoạt động của hệ thống 43

2.8.1 Biểu đồ hoạt động chức năng Đăng ký 43

2.8.2 Biểu đồ hoạt động chức năng Đăng nhập 44

2.8.3 Biểu đồ hoạt động chức năng cập nhật thông tin cá nhân 45

2.8.4 Biểu đồ hoạt động chức năng Quản lý giỏ hàng 46

2.8.5 Biểu đồ hoạt động chức năng quản lý tài khoản 47

2.8.6 Biểu đồ hoạt động chức năng quản lý bài đăng 48

2.8.7 Biểu đồ hoạt động quản lý sản phẩm 49

2.8.8 Biểu đồ hoạt động quản lý đơn hàng 50

2.8.9 Biểu đồ hoạt động chức năng ứng tuyển 51

2.8.10 Biểu đồ hoạt động chức năng thanh toán 52

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

2.9.1 Biểu đồ lớp 53

2.9.2 Cơ sở dữ liệu 53

2.9.3 Mô hình quan hệ thực thể 62

CHƯƠNG 3: XÂY DỰNG WEBSITE 63

3.1 Các xây dựng website 63

3.2 Giao diện dành cho người dùng 63

3.2.1 Giao diện đăng ký 63

3.2.2 Giao diện đăng nhập 64

3.2.3 Giao diện cập nhật thông tin cá nhân 65

3.2.4 Giao diện hiển thị danh sách sản phẩm được đăng bán 66

3.2.5 Giao diện hiển thị thông tin chi tiết của sản phẩm 67

3.2.6 Giao diện giỏ hàng 69

3.2.7 Giao diện hiển thị danh sách các đơn hàng đã đặt 69

3.2.8 Giao diện hiển thị thông tin chi tiết đơn hàng 70

3.2.9 Giao diện thực hiện chức năng thanh toán 71

3.3 Giao diện dành cho Nhà cung cấp 73

3.3.1 Giao diện quản lý sản phẩm của nhà cung cấp 73

3.3.2 Giao diện thêm sản phẩm 74

3.3.3 Giao diện cập nhật sản phẩm 75

3.4 Giao diện dành cho Quản trị viên 76

3.4.1 Giao diện quản lý tài khoản 76

3.4.2 Giao diện quản lý sản phẩm phía quản trị viên 77

3.4.3 Giao diện quản lý đơn hàng 78

3.4.4 Giao diện cập nhật đơn hàng 79

3.4.5 Giao diện quản lý đơn thanh toán – doanh thu 80

KẾT LUẬN VÀ KIẾN NGHỊ 81

TÀI LIỆU THAM KHẢO 83

A TÀI LIỆU TIẾNG VIỆT 83

B TÀI LIỆU TIẾNG ANH 83

DANH MỤC CÁC CHỮ VIẾT TẮT

1 CSDL Database Cơ sở dữ liệu

2 HTML Hypertext Markup

Language

Ngôn ngữ đánh dấu siêu vănbản

3 TMĐT E-commerce Thương mại điện tử

4 URL Uniform Resource

Locator Trình định vị tài nguyên thốngnhất

DANH MỤC CÁC BẢNG

Bảng 2.1: Danh sách các Actor 11

Bảng 2.2: Phân tích usecase phía khách hàng 12

Bảng 2.3: Phân tích usecase phía nhà cung cấp 13

Bảng 2.4: Phân tích usecase phía quản trị viên 14

Bảng 2.5: Kịch bản đăng ký tài khoản 17

Bảng 2.6: Kịch bản đăng nhập 18

Bảng 2.7: Kịch bản chức năng ứng tuyển 18

Bảng 2.8: Kịch bản quản lý thông tin cá nhân - cập nhật thông tin 19

Bảng 2.9: Kịch bản chức năng thanh toán 19

Bảng 2.10: Kịch bản thêm sản phẩm vào giỏ hàng 20

Bảng 2.11: Kịch bản cập nhật giỏ hàng 20

Bảng 2.12: Kịch bản xoá sản phẩm khỏi cửa hàng 21

Bảng 2.13: Kịch bản xác nhận bài đăng 21

Bảng 2.14: Kịch bản huỷ bài đăng 22

Bảng 2.15: Kịch bản cập nhật thông tin tài khoản 22

Bảng 2.16: Kịch bản xoá tài khoản 23

Bảng 2.17: Kịch bản xác nhận tài khoản 24

Bảng 2.18: Kịch bản thêm sản phẩm mới 24

Bảng 2.19: Kịch bản cập nhật thông tin sản phẩm 25

Bảng 2.20: Kịch bản xoá sản phẩm 25

Bảng 2.21: Kịch bản xem thông đơn hàng 26

Bảng 2.22: Kịch bản thêm đơn đặt hàng mới 26

Bảng 2.23: Kịch bản cập nhật đơn hàng 27

Bảng 2.24: Kịch bản huỷ đơn hàng 27

Bảng 2.25: Thiết kế dữ liệu bảng user 53

Bảng 2.26: Thiết kế dữ liệu bảng token 54

Bảng 2.27: Thiết kế dữ liệu bảng product 55

Bảng 2.28: Thiết kế dữ liệu bảng category 55

Bảng 2.29: Thiết kế dữ liệu bảng product_category 56

Bảng 2.30: Thiết kế dữ liệu bảng cart 56

Bảng 2.31: Thiết kế dữ liệu bảng cart_item 57

Bảng 2.32: Thiết kế dữ liệu bảng order 58

Bảng 2.33: Thiết kế dữ liệu bảng order_item 59

Bảng 2.34: Thiết kế dữ liệu bảng transaction 59

Bảng 2.35: Thiết kế dữ liệu bảng comment 60

Bảng 2.36: Thiết kế dữ liệu bảng image_user 60

Bảng 2.37: Thiết kế dữ liệu bảng image_product 61

Bảng 2.38: Thiết kế dữ liệu bảng product_review 61

DANH MỤC HÌNH ẢNH

Hình 1.1: Kiến trúc của Spring Framework 5

Hình 2.1: Biểu đồ usecase tổng quát phía khách hàng 12

Hình 2.2: Biểu đồ usecase tổng quát phía nhà cung cấp 13

Hình 2.3: Biểu đồ usecase tổng quát phía quản trị viên 14

Hình 2.4: Biểu đồ usecase phân rã chức năng quản lý giỏ hàng 15

Hình 2.5: Biểu đồ usecase phân rã Quản lý tài khoản 15

Hình 2.6: Biểu đồ usecase phân rã Quản lý sản phẩm 16

Hình 2.7: Biểu đồ usecase phân rã Quản lý bài đăng 16

Hình 2.8: Biểu đồ usecase phân rã Quản lý đơn hàng của khách hàng 16

Hình 2.9: Biểu đồ usecase phân rã Quản lý đơn hàng phía quản trị viên 17

Hình 2.10: Biểu đồ tuần tự chức năng đăng ký 28

Hình 2.11: Biểu đồ tuần tự chức năng đăng nhập 29

Hình 2.12: Biểu đồ tuần tự chức năng cập nhật thông tin cá nhân 30

Hình 2.13: Biểu đồ tuần tự thêm sản phẩm vào giỏ hàng 31

Hình 2.14: Biểu đồ tuần tự cập nhật giỏ hàng - cập nhật sản phẩm 32

Hình 2.15: Biểu đồ tuần tự xoá sản phẩm khỏi giỏ hàng 33

Hình 2.16: Biểu đồ tuần tự cập nhật thông tin tài khoản 34

Hình 2.17: Biểu đồ tuần tự xoá tài khoản 35

Hình 2.18: Biểu đồ tuần tự quản lý bài đăng 36

Hình 2.19: Biểu đồ tuần tự Thêm sản phẩm 37

Hình 2.20: Biểu đồ tuần tự Cập nhật sản phẩm 38

Hình 2.21: Biểu đồ tuần tự Xoá sản phẩm 39

Hình 2.22: Biểu đồ tuần tự Thêm đơn đặt hàng 40

Hình 2.23: Biểu đồ tuần tự Cập nhật đơn hàng 41

Hình 2.24: Biểu đồ tuần tự huỷ đơn hàng 42

Hình 2.25: Biểu đồ hoạt động chức năng đăng ký 43

Hình 2.26: Biểu đồ hoạt động chức năng đăng nhập 44

Hình 2.27: Biểu đồ hoạt động chức năng cập nhật thông tin cá nhân 45

Hình 2.28: Biểu đồ hoạt động chức năng quản lý giỏ hàng 46

Hình 2.29: Biểu đồ hoạt động chức năng quản lý tài khoản 47

Hình 2.30: Biểu đồ hoạt động chức năng quản lý bài đăng 48

Hình 2.31: Biểu đồ hoạt động quản lý sản phẩm 49

Hình 2.32: Biểu đồ hoạt động quản lý đơn hàng 50

Hình 2.33: Biểu đồ hoạt động chức năng ứng tuyển 51

Hình 2.34: Biểu đồ hoạt động chức năng thanh toán 52

Hình 2.35: Biểu đồ lớp 53

Hình 2.36: Mô hình quan hệ thực thể 62

Hình 3.1: Giao diện chức năng đăng ký 64

Hình 3.2: Giao diện đăng nhập 64

Hình 3.3: Giao diện trang thông tin cá nhân 65

Hình 3.4: Giao diện cập nhật thông tin cá nhân 66

Hình 3.5: Giao diện hiển thị danh sách sản phẩm được đăng bán 67

Hình 3.6: Giao diện hiển thị thông tin chi tiết sản phẩm 68

Hình 3.7: Giao diện giỏ hàng 69

Hình 3.8: Giao diện hiển thị danh sách các đơn hàng đã đặt 70

Hình 3.9: Giao hiển thị thông tin chi tiết đơn hàng 70

Hình 3.10: Giao diện hiển thị thông tin phiếu thanh toán 71

Hình 3.11: Giao diện thực hiện thanh toán cho đơn hàng 72

Hình 3.12: Thông tin đơn hàng sau khi thanh toán 72

Hình 3.13: Giao diện quản lý sản phẩm của nhà cung cấp 73

Hình 3.14: Giao diện thêm sản phẩm 74

Hình 3.15: Giao diện cập nhật sản phẩm 75

Hình 3.16: Giao diện quản lý tài khoản 76

Hình 3.17: Giao diện quản lý sản phẩm 77

Hình 3.18: Giao diện quản lý đơn hàng 78

Hình 3.19: Giao diện cập nhật đơn hàng 79

Hình 3.20: Giao diện quản lý phiếu thanh toán 80

MỞ ĐẦU

1 Lý do chọn đề tài

Trong những năm gần đây, với sự phát triển vượt trội của khoa học kỹ thuật, đặcbiệt là công nghệ thông tin, các ứng dụng của công nghệ thông tin được áp dụngngày càng nhiều vào thực tế đã góp phần to lớn trong sự nghiệp phát triển của conngười

Cùng với sự phát triển mạnh mẽ của công nghệ thông tin, thị trường kinh doanhtrở lên ngày càng quyết liệt giữa các bên cạnh tranh nhằm thoả mãn các nhu cầu củakhách hàng một cách tốt nhất So với quá trình kinh doanh truyền thống thì

‘Thương mại điện tử’ có chi phí thấp hơn và tỉ lệ đạt hiệu quả cao hơn

Hơn thế nữa, là sự truyền tải thông tin, một lợi thế lớn của công nghệ Internet,điều này giúp khách hàng có thể tiếp nhận thông tin sản phẩm một cách nhanhchóng và thuận tiện nhất Kết hợp với bộ phận giao hàng tận nơi, là thông qua bưuđiện và ngân hàng để thanh toán, càng tăng thêm thuận lợi để loại hình này pháttriển

Do đó, em chọn đề tài “Xây dựng website thương mại điện tử với Spring Boot

và ReactJS” Website được xây dựng với định hướng giúp việc mua sắm của kháchhàng và đăng bán hàng hoá của các nhà cung cấp nhỏ lẻ một cách dễ dàng và nhanhgọn hơn, không mất thời gian và công sức

2 Mục tiêu của đề tài

 Mục tiêu chung:

 Nắm bắt được công nghệ xây dựng web bằng Spring boot và ReactJS

 Xây dựng website thương mại điện tử với Spring Boot và ReactJS

3 Nội dung nghiên cứu

 Tìm hiểu về cách thức hoạt động của hệ thống thương mại điện tử

 Tìm hiểu về các chức năng, cách thức sử dụng của website

 Xây dựng website thương mại điện tử với đầy đủ các chức năng: Hiển thị danhmục hàng, hiển thị danh sách hàng trong danh mục, hiển thị chi tiết hàng; đăng

ký thành viên, sửa thông tin cá nhân; tìm kiếm hàng; chọn hàng vào giỏ, thêmsửa xóa giỏ hàng, đặt hàng

4 Phương pháp nghiên cứu

 Phương pháp nghiên cứu lý thuyết: Tìm hiểu, thu nhập các tài liệu, thông tin liên quan đến đề tài qua các website đã biết trên mạng

 Phương pháp tổng hợp: Tổng hợp các tài liệu đã nghiên cứu và tìm hiểu để đưa ra những chức năng quan trọng và cần thiết cho phần mềm.

 Phương pháp thực nghiệm: Tiến hành thiết kế giao diện, cơ sở dữ liệu, xây dựng

và chạy thử để kiểm tra kết quả đạt được và kiểm tra lỗi.

 Phương pháp chuyên gia: Sử dụng trí tuệ các thầy cô và đồng nghiệp có trình độcao để xem xét nhận định cho sản phẩm

5 Kết quả đạt được

 Báo cáo khóa luận

 Xây dựng thành công website thương mại điện tử với Spring boot và ReactJS

6 Bố cục của Khóa luận

Khóa luận được trình bày gồm 3 chương:

 Chương 1: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT

 Chương 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

 Chương 3: XÂY DỰNG WEBSITE

CHƯƠNG 1: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về hệ thống thương mại điện tử

1.1.1 Giới thiệu về thương mại điện tử

Thương mại điện tử (E-Commerce) là hình thức kinh doanh trực tuyến sử dụng nềntảng công nghệ thông tin với sự hỗ trợ của Internet để thực hiện các giao dịch muabán, trao đổi, thanh toán trực tuyến

Thương mại điện tử (TMĐT) là xu hướng của thời đại toàn cầu hóa, đây là lĩnh vựctiềm năng để các doanh nghiệp vừa và nhỏ sinh lợi và phát triển, cơ hội cho những

ai muốn khởi nghiệp kinh doanh theo mô hình mới

Mô hình kinh doanh thương mại điện tử được xem như một trong những giải phápthúc đẩy sự phát triển của nền kinh tế quốc gia

1.1.2 Lợi ích của thương mại điện tử

a Đối với người bán

- Giúp giảm chi phí vận hành: Thay vì việc phải thuê mặt bằng, nhân viên bánhàng, nhân viên giám sát, có kho hàng lớn thì một trang thương mại điện tử đãgiúp người bán tiết kiệm được hầu hết các chi phí này

- Tiếp cận người tiêu dùng dễ dàng hơn: Nhờ có thương mại điện tử, thay vìngười tiêu dùng phải đến trực tiếp cửa hàng để xem xét sản phẩm, dịch vụ thìhoàn toàn có thể tiếp cận sản phẩm, hàng hoá trên các trang thương mại điện tử

b Đối với người mua

- Đặt mua sản phẩm dễ dàng hơn: Người tiêu dùng hoàn toàn có thể lựa chọn vàmua hàng ở bất cứ đâu chỉ cần có internet, thông qua máy tính, điện thoại…Đồng thời, người mua cũng có thể phân loại, so sánh, sắp xếp hàng hoá theo giátiền, tính năng… và đặt mua chỉ bằng một cú click chuột

- Giảm chi phí đi lại, ô nhiễm môi trường, tai nạn giao thông

- Với việc show trực tiếp giá cả, thành phần… của hàng hoá, dịch vụ trên các sànthương mại điện tử, người mua có nhiều lựa chọn hơn trong việc quyết định muahay không mua loại hàng hoá, dịch vụ mà mình có nhu cầu.

1.1.3 Các loại hình thương mại điện tử phổ biến ở Việt Nam

Hoạt động thương mại điện tử gồm các hình thức cơ bản sau đây:

- Website thương mại điện tử

- Website cung cấp dịch vụ thương mại điện tử gồm: Sàn giao dịch thương mạiđiện tử, website đấu giá trực tuyến, website khuyến mại trực tuyến và các loạiwebsite khác

Trong đó, tại Việt Nam, hai hình thức phổ biến là website thương mại điện tử và sàngiao dịch thương mại điện tử

a Trang web thương mại điện tử

Website thương mại điện tử là trang thông tin điện tử được thiết lập để phục vụ mộtphần hoặc toàn bộ quy trình của hoạt động mua bán hàng hóa hay cung ứng dịch vụ,

từ trưng bày giới thiệu hàng hóa, dịch vụ đến giao kết hợp đồng, cung ứng dịch vụ,thanh toán và dịch vụ sau bán hàng

b Sàn giao dịch thương mại điện tử

Sàn giao dịch Thương mại điện tử là website thương mại điện tử cho phép thươngnhân, tổ chức, cá nhân không phải chủ sở hữu website có thể tiến hành mua bánhàng hóa, dịch vụ trên đó

Việc tổ chức giao dịch trên sàn thương mại điện tử được diễn ra dưới các hình thức:

- Website cho phép người tham gia được mở các gian hàng trên đó để trưng bày,giới thiệu hàng hóa hoặc dịch vụ

- Website cho phép người tham gia được lập các website nhánh để trưng bày, giớithiệu hàng hóa hoặc dịch vụ

- Website có chuyên mục mua bán trên đó cho phép người tham gia đăng tin muabán hàng hóa và dịch vụ

Hiện nay, hình thức tạo lập website cho phép phép người tham gia được mở cácgian hàng trên đó để trưng bày, giới thiệu hàng hóa hoặc dịch vụ đang rất phổ biến.Người tham gia trưng bày, giới thiệu hàng hoá có thể phải đăng ký thành lập doanhnghiệp hoặc hộ kinh doanh theo quy định.

Tại Việt Nam, một số website về sàn giao dịch thương mại điện tử lớn là: Tiki,Shopee, Lazada, Sendo

1.2 Tổng quan về Spring Framework

1.2.1 Giới thiệu về Spring

Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệulập trình viên Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lạicode…

Spring Framework được xây dựng dựa trên hai nguyên tắc design chính là:Dependency Injection và Aspect Oriented Programming

Spring được chia làm nhiều module khác nhau, tùy theo mục đích phát triển ứngdụng mà ta dùng 1 trong các module đó

Dưới đây là kiến trúc tổng thể của Spring Framework [7]

Hình 1.1: Kiến trúc của Spring Framework

1.2.2 Giới thiệu về Spring Boot

- Spring Boot là một dự án phát triển bởi JAVA (ngôn ngữ java) trong hệ sinh tháiSpring framework Nó giúp cho các lập trình viên chúng ta đơn giản hóa quátrình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triểnbusiness cho ứng dụng [7]

- Được xây dựng trên 2 nguyên tắc design chính là: Dependency Injection vàAspect Oriented Programming

- Là một Java Platform mã nguồn mở, một giải pháp gọn nhẹ cho Java Enterprise.Với Spring Framework các nhà phát triển có thể tạo ra các mã có hiệu suất cao,

dễ kiểm thử và có thể sử dụng lại được

- Không chỉ giúp chúng ta phát triển web mà spring framework nó còn là một hệsinh thái phát triển rất nhiều nền tảng khác như cloud, mobile, app…

1.2.3 Ưu điểm của Spring Boot

 Các ưu điểm khi sử dụng Spring Boot [7]:

- Có các đặc tính của Spring Framework

- Tạo các ứng dụng độc lập, có thể chạy java-jar (cho cả java web)

- Nhúng trực tiếp Tomcat, Jetty hoặc Undertow (không cần triển khai tệp WAR)

- Các starter dependency giúp việc cấu hình Maven đơn giản hơn

- Tự động cấu hình Spring khi cần thiết

- Không sinh code cấu hình và không yêu cầu phải cấu hình bằng XML…

1.3 Tổng quan về ReactJS

1.3.1 Giới thiệu về ReactJS

ReactJS là một thư viện của javascript được phát triển bởi Facebook để phát triểncác thành phần (components) giao diện người dùng (User Interface - UI) có thể tái

sử dụng Nó được sử dụng rộng rãi để xây dựng các ứng dụng SPA (Single PageApplication) tương thích với các phiên bản trình duyệt web hiện nay [5]

1.3.2 Đặc trưng của ReactJS

a Virtual DOM

Virtual DOM là một object Javascript, môt object chứa đầy đủ thông tin cần thiết đểtạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và treethật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật [5]

b One-way data binding

ReactJS sử dụng 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àngkiểm soát và sửa lỗi Thích hợp xây dựng các ứng dụng lớn mà dữ liệu thay đổi liêntục theo thời gian [5]

- React được xây dựng xung quanh các component [5]

- Có thể sử dụng một component ở nhiều nơi với các trạng thái và thuộc tính khácnhau

- React thực hiện cập nhật component dựa trên sự thay đổi của trạng thái

- Loại component: Class component, Function component

e Props và State

- Props: Tham số được chuyển giữa các component [5]

- State: là một object lưu trữ giá trị các thuộc tính bên trong component và chỉ tồntại trong phạm vi component đó Khi thay đổi giá trị của state thì component sẽđược render lại.

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ

sử dụng Ngôn ngữ truy vấn có cấu trúc (SQL) MySQL được sử dụng cho việc bổtrợ NodeJs, PHP, Perl, và nhiều ngôn ngữ khác, làm nơi lưu trữ những thông tintrên các trang web viết bằng NodeJs, PHP hay Perl…

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG2.1 Mô tả nghiệp vụ

tin chi tiết về sản phẩm Sau đó khách hàng có thể chọn nút “Mua ngay” để đưa

sản phẩm vào giỏ hàng của mình

- Giỏ hàng thường cung cấp thêm các tuỳ chọn xoá một sản phẩm, xoá sạch giỏhàng, cập nhật số lượng đặt mua

- Ngay sau khi khách hàng có tất cả các sản phẩm cần mua, khách hàng có thể

điền các thông tin như địa chỉ đặt hàng và chọn nút “Đặt mua” để hoàn tất quá

2.1.3 Dành cho quản trị viên

Website cung cấp cho quản trị viên hệ thống giao diện dùng để quản trị các thôngtin như sản phẩm, đơn hàng, tài khoản, thống kê…

2.2 Yêu cầu hệ thống

Gồm có 3 đối tượng chính sử dụng website là: Khách hàng, Nhà cung cấp, Quản trịviên.

2.2.1 Đối với khách hàng

- Đăng ký: Khi khách hàng chưa có tài khoản đăng nhập muốn mua hàng thì cóthể thực hiện chức năng đăng ký để trở thành thành viên của website và thựchiện các chức năng mua hàng

- Xem danh sách sản phẩm: Khi người dùng truy cập vào website thì hệ thống sẽ

tự động hiển thị một số sản phẩm nổi bật Khi người dùng chọn vào một danhmục sản phẩm cụ thể nào thì tất cả sản phẩm của danh mục đó sẽ hiển thị lêngiao diện

- Xem chi tiết sản phẩm: Sau khi tìm thấy sản phẩm cần, người dùng có thể chọnvào sản phẩm để xem thông tin chi tiết của sản phẩm đó

- Tìm kiếm: Khi khách hàng cần tìm một sản phẩm nào đó thì có thể nhập thôngtin vào ô tìm kiếm để thực hiện chức năng tìm kiếm Nếu sản phẩm đó có tên tạitrong dữ liệu thì sẽ hiện thông tin sản phẩm được tìm thấy

- Đưa sản phẩm vào giỏ hàng: Sau khi khách hàng tìm thấy sản phẩm đáp ứng nhucầu của mình thì có thể chọn đưa sản phẩm vào giỏ hàng

- Cập nhật giỏ hàng: Khi người dùng đã lựa chọn một sản phẩm nhưng tìm đượcmột sản phẩm hợp lý hơn thì có thể xoá sản phẩm đã có trong giỏ hàng và chọnlại sản phẩm mới Ngoài ra, khi cần mua sản phẩm đó với một số lượng lớn thìngười dùng cũng có thể cập nhật trong giỏ hàng

- Đặt mua: Sau khi xem thông tin sản phẩm đúng với nhu cầu thì người dùng cóthể chọn đặt mua để đưa sản phẩm vào giỏ hàng

- Quản lý đơn hàng: Sau khi đặt mua mà chưa nhận được đơn hàng thì khách hàng

có thể cập nhật lại đơn hàng

- Thanh toán: Khi khách hàng chắc chắn mua sản phẩm, người dùng có thể chọnchức năng thanh toán để thực hiện xác nhận đơn hàng của mình Muốn thực hiệnthanh toán thì yêu cầu người dùng phải đăng nhập vào hệ thống

- Ứng tuyển: Khi khách hàng có nhu cầu bán sản phẩm có thể chọn chức năng

ứng tuyển.

2.2.2 Đối với nhà cung cấp

- Quản lý sản phẩm: để thực hiện chức năng quản lý thì yêu cầu nhà cung cấpphải đăng nhập vào hệ thống Trong quản lý sản phẩm có xem, thêm, sửa, xoá,đăng bán sản phẩm Chọn thao tác cần thực hiện, điền đầy đủ thông tin trongquá trình thực hiện rồi xác nhận thao tác

2.2.3 Đối với quản trị viên

Có toàn quyền trong hệ thống, có tất cả các chức năng của các người dùng và cóthêm một số chức năng:

- Quản lý tài khoản: Quản trị viên có thể xem thông tin của các thành viên đãđăng ký trong hệ thống và xác nhận hoặc huỷ xác nhận cho các thành viên ứngtuyển làm nhà cung cấp

- Quản lý bài đăng: Quản trị viên quản lý các sản phẩm được đăng bán trên hệthống

- Quản lý đơn hàng: Quản trị viên có thêm chức năng xác nhận, cập nhật tìnhtrạng đơn hàng từ khi khách hàng đặt mua đến khi nhận hàng thành công

và sử dụng các chức năng quản lý chính: Quản lý tài

Actor Chức năng

khoản, quản lý bài đăng, quản lý đơn hàng

2.4 Biểu đồ usecase tổng quát

2.4.1 Biểu đồ usecase phía khách hàng

Hình 2.2: Biểu đồ usecase tổng quát phía khách hàng Bảng 2.2: Phân tích usecase phía khách hàng

1 Đăng ký Chức năng đăng ký thành viên đối với khách

hàng chưa có tài khoản

2 Đăng nhập Chức năng để người dùng có thể truy cập vào hệ

thống và sử dụng các chức năng của hệ thống

3 Tìm kiếm Chức năng tìm kiếm sản phẩm được đăng bán

dựa theo từ khoá được nhập vào từ ô tìm kiếm

4 Xem thông tin sản phẩm Chức năng hiển thị thông tin chi tiết của sản

phẩm được đăng bán

5 Quản lý thông tin cá

nhân Chức năng để người dùng có thể cập nhật các thông tin của người dùng trên hệ thống

6 Quản lý giỏ hàng Chức năng để người dùng có thể thêm, cập nhật

và loại bỏ sản phẩm trong giỏ hàng của mình

7 Quản lý đơn hàng cá

nhân Chức năng để người dùng có thể quản lý các đơn hàng của mình

8 Thanh toán Chức năng để người dùng có thể thực hiện

thanh toán cho đơn hàng đặt mua của mình

9 Ứng tuyển Chức năng để người dùng có nhu cầu bán hàng

ứng tuyển làm nhà cung cấp và bán hàng trên hệthống

2.4.2 Biểu đồ usecase phía nhà cung cấp

Hình 2.3: Biểu đồ usecase tổng quát phía nhà cung cấp Bảng 2.3: Phân tích usecase phía nhà cung cấp

1 Đăng nhập Chức năng này giúp người dùng truy cập

vào hệ thống và sử dụng các chức năng của

hệ thống

2 Quản lý sản phẩm Chức năng này giúp nhà cung cấp có thể

quản lý lưu trữ thông sản phẩm của mình

2.4.3 Biểu đồ usecase phía quản trị viên

Hình 2.4: Biểu đồ usecase tổng quát phía quản trị viên Bảng 2.4: Phân tích usecase phía quản trị viên

1

Đăng nhập Chức năng này giúp người dùng truy cập vào hệ

thống và sử dụng các chức năng của hệ thống

2

Quản lý bài đăng Chức năng này giúp quản trị viên có thể quản lý lưu

trữ thông tin sản phẩm được đăng bán trên hệ thống.3

Quản lý tài khoản

Chức năng này giúp quản trị viên có thể quản lý lưu trữ, xác nhận thông tin tài khoản của mọi người dùng trên hệ thống

4

Quản lý đơn hàng Chức năng này giúp quản trị viên có thể quản lý

thông tin của các đơn hàng đặt mua của khách hàng

2.5 Mô hình usecase phân rã chức năng

2.5.1 Usecase phân rã chức năng quản lý giỏ hàng

Hình 2.5: Biểu đồ usecase phân rã chức năng quản lý giỏ hàng

2.5.2 Usecase phân rã chức năng quản lý tài khoản

Hình 2.6: Biểu đồ usecase phân rã Quản lý tài khoản

2.5.3 Usecase phân rã chức năng quản lý sản phẩm

Hình 2.7: Biểu đồ usecase phân rã Quản lý sản phẩm

2.5.4 Usecase phân rã chức năng quản lý bài đăng

Hình 2.8: Biểu đồ usecase phân rã Quản lý bài đăng

2.5.5 Usecase phân rã chức năng quản lý đơn hàng

Hình 2.9: Biểu đồ usecase phân rã Quản lý đơn hàng của khách hàng

Hình 2.10: Biểu đồ usecase phân rã Quản lý đơn hàng phía quản trị viên

Tiền điều kiện Khách hàng chưa có tài khoản đăng nhập

Hậu điều kiện

Mô tả Người dùng chưa có tài khoản đăng nhập thực hiện đăng ký tàikhoản.

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Click chọn chức năng đăng

ký Hiển thị form đăng ký.

Nhập đầy đủ thông tin Lấy thông tin và kiểm tra

Hiển thị kết quả đăng ký.Yêu cầu nhập lại nếu thất bại

2.6.2 Kịch bản chức năng đăng nhập

Bảng 2.6: Kịch bản đăng nhập

Tác nhân Quản trị viên, nhà cung cấp, khách hàng

Tiền điều kiện Chưa ở trạng thái đăng nhập

Hậu điều kiện

Mô tả Người dùng đăng nhập vào hệ thống để sử dụng các chức năng.

Kịch bản

Hành động của tác

Nhập thông tin tài khoản

và mật khẩu Lấy thông tin và kiểm tra

Nếu thành công thì đăng nhập vào

Hậu điều kiện

Mô tả Người dùng thực hiện huỷ đơn hàng

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn chức năng ứng tuyển Tiếp nhận yêu cầu, gửi thông

tin vào danh sách ứng tuyển cho quản trị viên

Hiển thị kết quả thực hiện

2.6.4 Kịch bản chức năng quản lý thông tin cá nhân

Bảng 2.8: Kịch bản quản lý thông tin cá nhân - cập nhật thông tin

Chức năng Quản lý thông tin cá nhân

Tác nhân Quản trị viên, nhà cung cấp, khách hàng

Tiền điều kiện Là thành viên đã đăng ký trong hệ thống và lựa chọn chức

năng cập nhật thông tin cá nhân

Hậu điều kiện

Mô tả Người dùng đăng nhập vào hệ thống và cập nhật lại một số

thông tin của mình

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Mở form cập nhật Hiển thị các thông tin của

người dùng trong hệ thống.Nhập lại các thông tin cần

sửa đổi của mình Nhận thông tin và kiểm tra.

Hiển thị thông báo kết quả cập nhật

2.6.5 Kịch bản chức năng thanh toán

Bảng 2.9: Kịch bản chức năng thanh toán

Tiền điều kiện Đơn hàng chưa thanh toán

Hậu điều kiện

Mô tả Người dùng thực hiện thanh toán cho đơn hàng đã đặt mua

của mình

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn đơn hàng cần thực hiện Hiển thị thông tin đơn hàng

được chọn

Thực hiện thanh toán Hiển thị thông tin phiếu thanh

toán

Xác nhận thanh toán Nhận thông tin và thực hiện

Hiển thị kết quả thực hiện

2.6.6 Kịch bản chức năng quản lý giỏ hàng

a Kịch bản thêm sản phẩm vào giỏ hàng

Bảng 2.10: Kịch bản thêm sản phẩm vào giỏ hàng

Chức năng Thêm sản phẩm vào giỏ hàng

Tiền điều kiện Sản phẩm được đăng bán trên hệ thống

Hậu điều kiện

Mô tả Người dùng thực hiện thêm sản phẩm vào giỏ hàng của mình

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn sản phẩm cần thêm Hiển thị thông tin chi tiết sản

phẩmThực hiện điền số lượng và

chọn nút “Mua ngay” để đưa sản phẩm vào giỏ hàng

Tiếp nhận thông tin và thực hiện

Nếu thành công thì sản phẩm xuất hiện trong giỏ hàng.Nếu không thành công thì đưa ra thông báo

Tiền điều kiện Giỏ hàng có sản phẩm

Hậu điều kiện

Mô tả Người dùng thực hiện cập nhật số lượng cần mua cho sản

phẩm của mình

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn sản phẩm cần cập nhật Hiển thị form cập nhật

Thực hiện điền thông tin Nhận thông tin và thực hiện

Hiển thị kết quả thực hiện

c Kịch bản xoá sản phẩm khỏi giỏ hàng

Bảng 2.12: Kịch bản xoá sản phẩm khỏi cửa hàng

Chức năng Xoá sản phẩm khỏi giỏ hàng

Tiền điều kiện Giỏ hàng có sản phẩm

Hậu điều kiện

Mô tả Người dùng thực hiện xoá sản phẩm không cần thiết khỏi giỏ

hàng

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn sản phẩm cần thực hiện

Hiển thị thông báo xác nhận muốn xoá hay không

Xác nhận xoá Nhận thông tin và thực hiện

Hiển thị thông báo thực hiện

2.6.7 Kịch bản chức năng quản lý bài đăng

a Kịch bản xác nhận bài đăng

Bảng 2.13: Kịch bản xác nhận bài đăng

Chức năng Xác nhận bài đăng

Tác nhân Quản trị viên

Tiền điều kiện Sản phẩm được nhà cung cấp đăng bán

Hậu điều kiện Sản phẩm được đăng bán trên hệ thống

Mô tả Quản trị viên xác nhận đăng bán sản phẩm mà nhà cung cấp

muốn đăng bán trên hệ thống

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Lựa chọn sản phẩm cần xác nhận

Hiển thị thông tin sản phẩm.Xác nhận sản phẩm Nhận thông tin và kiểm tra

Hiển thị kết quả xác nhận

b Kịch bản huỷ bài đăng

Bảng 2.14: Kịch bản huỷ bài đăng

Chức năng Huỷ bài đăng

Tác nhân Quản trị viên, Nhà cung cấp

Tiền điều kiện Sản phẩm có trong danh sách sản phẩm được đăng bán

Hậu điều kiện Sản phẩm bị huỷ xác nhận

Mô tả Quản trị viên hoặc nhà cung cấp của sản phẩm đó muốn tạm

ngừng đăng bán sản phẩm với 1 vài lý do nào đó

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Lựa chọn sản phẩm cần huỷ xác nhận

Hiển thị thông tin sản phẩm

Xác nhận huỷ bài đăng của sản phẩm

Nhận thông tin và kiểm tra

Hiển thị kết quả huỷ bài đăng

2.6.8 Kịch bản chức năng quản lý tài khoản

a Kịch bản cập nhật thông tin tài khoản

Bảng 2.15: Kịch bản cập nhật thông tin tài khoản

Chức năng Cập nhật thông tin tài khoản

Tác nhân Quản trị viên

Tiền điều kiện Tài khoản có trong cơ sở dữ liệu

Hậu điều kiện Cập nhật thông tin thành công

Mô tả Quản trị viên cập nhật thông tin cho tài khoản người dùng

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn tài khoản cần cập nhật Hiển thị form cập nhật.Nhập thông tin Nhận thông tin và kiểm tra

Hiển thị kết quả cập nhật

b Kịch bản xoá tài khoản

Bảng 2.16: Kịch bản xoá tài khoản

Chức năng Xoá tài khoản

Tác nhân Quản trị viên

Tiền điều kiện Có thông tin trong cơ sở dữ liệu

Hậu điều kiện Tài khoản không còn trong cơ sở dữ liệu

Mô tả Quản trị viên thực hiện xoá tài khoản người dùng

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn tài khoản cần xoá Hiển thị thông báo xác nhận

xoá

Chọn xác nhận xoá Nhận thông tin và thực hiện

xoá tài khoản

Hiển thị kết quả thực hiện

c Kịch bản xác nhận tài khoản

Bảng 2.17: Kịch bản xác nhận tài khoản

Chức năng Xác nhận tài khoản

Tác nhân Quản trị viên

Tiền điều kiện Có thông tin trong danh sách người dùng ứng tuyển làm nhà

cung cấp

Hậu điều kiện Tài khoản được xác nhận

Mô tả Quản trị viên xác nhận tài khoản là nhà cung cấp cho tài

khoản ứng tuyển và cấp quyền bán hàng cho tài khoản đó

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn tài khoản cần xác nhận Hiển thị thông tin của tài

khoản

Chọn xác nhận và cấp quyền bán hàng Nhận thông tin và thực hiện.

Hiển thị kết quả thực hiện

Tiền điều kiện Sản phẩm chưa có trong hệ thống

Hậu điều kiện Sản phẩm được thêm vào hệ thống

Mô tả Nhà cung cấp thực hiện thêm sản phẩm mới

Chọn chức năng thêm mới Hiển thị form thêm.

Nhập thông tin sản phẩm cẩn thêm mới

Nhận thông tin và thực hiện

Nếu thành công thì thêm dữ liệu và hiển thị thông báo thành công

Nếu không thành công thì yêu cầu nhập lại và thông báo không thành công.

Tiền điều kiện Sản phẩm có thông tin trong cơ sở dữ liệu

Hậu điều kiện Sản phẩm được cập nhật

Mô tả Nhà cung cấp thực hiện cập nhật thông tin cho sản phẩm

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn sản phẩm cần thực hiện

Hiển thị thông tin chi tiết sản phẩm

Điền thông tin cập nhật Nhận thông tin và thực hiện

Hiển thị kết quả thực hiện

Tiền điều kiện Sản phẩm có thông tin trong cơ sở dữ liệu

Hậu điều kiện Sản phẩm bị xoá ra khỏi cơ sở dữ liệu

Mô tả Nhà cung cấp thực hiện xoá sản phẩm không cần thiết

Kịch bản

Hành động của tác nhân Hành động của hệ thống

Chọn sản phẩm cần xoá Hiển thị thông tin sản phẩm

được chọn

Thực hiện xoá sản phẩm Nhận thông tin và thực hiện

Hiển thị thông báo kết quả thực hiện