Xây dựng website bán hàng thời trang sử dụng asp net core và angular

Chi tiết màn hình Quản lý danh mục sản phẩm .... Chi tiết màn hình Thêm danh mục sản phẩm .... Các đối tượng màn hình Quản lý danh mục sản phẩm .... Các đối tượng màn hình Thêm danh mục

Trang 1

VÕ HỒNG TIÊN GIANG NGUYỄN THỊ THẢO

GVHD: TS LÊ VĂN VINH SVTH:

S K L 0 0 9 4 4 3

XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG SỬ

DỤNG ASP.NET CORE VÀ ANGULAR

KHÓA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

Trang 2

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

KHOA CÔNG NGHỆ THÔNG TIN

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH

Trang 3

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

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

VÕ HỒNG TIÊN GIANG – 18110276 NGUYỄN THỊ THẢO – 18110367

Đề Tài:

XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ

ANGULAR

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN

TS LÊ VĂN VINH

Trang 4

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Võ Hồng Tiên Giang MSSV 1: 18110276

Họ và tên Sinh viên 2: Nguyễn Thị Thảo MSSV 2: 18110367

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

Tên đề tài: Xây dựng website bán hàng thời trang sử dụng ASP.NET Core và Angular

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 2022

Giáo viên hướng dẫn

(Ký & ghi rõ họ tên)

Trang 5

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

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

Tên đề tài: Xây dựng website bán hàng thời trang sử dụng ASP.NET Core và Angular

Họ và tên Giáo viên phản biện: ThS Nguyễn Hữu Trung

Giáo viên phản biện

Trang 6

LỜI CẢM ƠN

Nhóm chúng em xin chân thành cảm ơn thầy Lê Văn Vinh đã hỗ trợ, chỉ dẫn chúng

em trong quá trình thực hiện đồ án Thầy đã đưa ra những bình luận, góp ý để giúp chúng

em có thể vận dụng những kiến thức đã học để hoàn thành đồ án tốt nhất có thể

Nhóm cũng xin chân thành gửi lời cảm ơn tới thầy cô khoa Công nghệ thông tin, trường Đại học Sư phạm Kỹ thuật đã giảng dạy, cung cấp cho chúng em kiến thức để chúng em thực hiện và hoàn thành được đồ án

Một lần nữa, nhóm chúng em xin chân thành cảm ơn Chúng em mong sẽ nhận được những lời nhận xét, góp ý của thầy cô để có thể cải thiện đồ án trong tương lai Trân trọng

Nhóm sinh viên

Võ Hồng Tiên Giang Nguyễn Thị Thảo

Trang 7

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP

CÔNG NGHỆ PHẦN MỀM

Thời gian làm khóa luận: 14/02/2022 – 10/07/2022

Sử dụng ASP.NET Core để viết APIs cho các module trong hệ thống

Sử dụng SQL Server để lưu trữ dữ liệu người dùng của hệ thống

Sử dụng Json Web Token để xác thực và ủy quyền cho hệ thống APIs hoạt động tốt và hiệu quả

Sử dụng Angular làm framework để thiết kế và xử lý giao diện web cho người dùng thao tác

Sử dụng Cloudinary để lưu trữ đám mây các hình ảnh của hệ thống

Trang 8

MỤC LỤC

PHẦN MỞ ĐẦU

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

2 Mục đích của đề tài

3 Đối tượng và phạm vi nghiên cứu

4 Kết quá dự kiến đạt được

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

3.4 Thiết kế giao diện

CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ

Trang 10

- Quản lý tài khoản

- Quản lý khuyến mãi

Trang 11

Giáo viên hướng dẫn

- Thêm sản phẩm vào giỏ hàng, chỉnh sửa giỏ hàng

- Mua hàng

- Xem lịch sử đơn hàng

- Quản lý địa chỉ giao hàng

- Thêm, xóa sản phẩm yêu thích

2 Chỉnh sửa các lỗi logic, sửa giao diện người dùng thân thiện hơn, cải thiện tốc độ truy cập

7

16/06/2022-30/06/2022 1 Kiểm thử webiste và sửa lỗi nếu có

2 Hoàn thiện chương 4: Cài đặt và kiểm thử

Trang 12

MỤC LỤC

DANH MỤC HÌNH ẢNH 1

DANH MỤC BẢNG BIỂU 5

PHẦN MỞ ĐẦU 9

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

2 MỤC ĐÍCH CỦA ĐỀ TÀI 9

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU 9

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 9

PHẦN NỘI DUNG 11

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 11

1.1 ASP.NET CORE 11

1.1.1 Khái niệm 11

1.1.2 Ưu và nhược điểm 11

1.1.3 ASP.NET Core Web API 13

1.1.4 Repository và Unit Of Work pattern 14

1.2 ANGULAR 15

1.2.2 Các thành phần 15

1.2.3 Ưu và nhược điểm 16

1.3 JSON WEB TOKEN 16

1.3.2 Đặc điểm 17

1.4 CLOUDINARY 18

1.4.2 Tính năng chính 18

1.5 SQL SERVER 19

Trang 13

1.6 PAYPAL 19

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 20

2.1 KHẢO SÁT HIỆN TRẠNG 20

2.1.1 SHEIN VN 20

2.1.2 JUNO 20

2.1.3 YES24.VN 21

2.1.4 CANIFA 22

2.2 XÁC ĐỊNH YÊU CẦU 23

2.2.1 Yêu cầu chức năng 23

2.2.2 Yêu cầu phi chức năng 24

2.3 MÔ HÌNH HÓA YÊU CẦU 25

2.3.1 Lược đồ Use Case 25

2.3.2 Đặc tả Use Case 26

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 61

3.1 LƯỢC ĐỒ LỚP 61

3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 61

3.2.1 Lược đồ thực thể (ERD) 61

3.2.2 Chi tiết bảng dữ liệu 62

3.3 LƯỢC ĐỒ TUẦN TỰ 71

3.3.1 Sequence Đăng nhập 71

3.3.2 Sequence Đăng ký tài khoản 72

3.3.3 Sequence Đăng xuất 72

3.3.4 Sequence Thêm sản phẩm 73

Trang 14

3.3.5 Sequence Sửa sản phẩm 73

3.3.6 Sequence Xóa sản phẩm 74

3.3.7 Sequence Tìm kiếm sản phẩm 74

3.3.8 Sequence Lọc danh sách sản phẩm 75

3.3.9 Sequence Nhập hàng 75

3.3.10 Sequence Đổi mật khẩu 76

3.3.11 Sequence Quên mật khẩu 76

3.3.12 Sequence Thêm danh mục sản phẩm 77

3.3.13 Sequence Sửa danh mục sản phẩm 77

3.3.14 Sequence Xóa danh mục sản phẩm 78

3.3.15 Sequence Thêm khuyến mãi 78

3.3.16 Sequence Sửa khuyến mãi 79

3.3.17 Sequence Xóa khuyến mãi 79

3.3.18 Sequence Xóa tài khoản nhân viên 80

3.3.19 Sequence Khóa tài khoản 80

3.3.20 Sequence Mở khóa tài khoản 81

3.3.21 Sequence Thêm tài khoản nhân viên 81

3.3.22 Sequence Thêm sản phẩm vào giỏ hàng 82

3.3.23 Sequence Mua hàng 82

3.3.24 Sequence Xem lịch sử mua hàng 83

3.3.25 Sequence Sửa thông tin cá nhân 84

3.3.26 Sequence Thống kê doanh số 85

3.3.27 Sequence Thống kê số đơn hàng 85

3.3.28 Sequence Cập nhật trạng thái đơn hàng 86

3.3.29 Sequence Cập nhật giỏ hàng 87

3.3.30 Sequence Thêm địa chỉ giao hàng 87

Trang 15

3.3.31 Sequence Sửa địa chỉ giao hàng 88

3.3.32 Sequence Xóa địa chỉ giao hàng 88

3.3.33 Sequence Cập nhật thông tin cửa hàng 89

3.3.34 Sequence Xem chi tiết sản phẩm 89

3.3.35 Sequence Thêm khuyến mãi cho sản phẩm 90

3.3.36 Sequence Xóa khuyến mãi của sản phẩm 90

3.3.37 Sequence Thêm sản phẩm yêu thích 91

3.3.38 Sequence Xóa sản phẩm yêu thích 91

3.3.39 Sequence Đánh giá sản phẩm 92

3.4 THIẾT KẾ GIAO DIỆN 93

3.4.1 Danh sách màn hình và sơ đồ chuyển đổi 93

3.4.2 Mô tả chi tiết các màn hình 93

CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 138

4.1 CÀI ĐẶT ỨNG DỤNG 138

4.2 KIỂM THỬ ỨNG DỤNG 140

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

4.2.2 Quy trình kiểm thử 140

4.2.3 Kiểm thử ứng dụng 141

PHẦN KẾT LUẬN 152

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

2 ƯU ĐIỂM 152

3 NHƯỢC ĐIỂM 152

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

TÀI LIỆU THAM KHẢO 153

Trang 16

DANH MỤC HÌNH ẢNH

Hình 1 Minh họa cấu trúc không sử dụng và có sử dụng Repository với Unit Of

Work 14

Hình 2 Cấu trúc JSON Web Token 17

Hình 3 Trang dashboard quản lý hình ảnh của Cloudinary 18

Hình 4 Khảo sát hiện trạng website SHEIN VN 20

Hình 5 Khảo sát hiện trạng website JUNO 21

Hình 6 Khảo sát hiện trạng website YES24.VN 22

Hình 7 Khảo sát hiện trạng website CANIFA 23

Hình 8 Lược đồ Use Case Admin System 25

Hình 9 Lược đồ Use Case User System 26

Hình 10 Lược đồ lớp 61

Hình 11 Lược đồ thực thể 62

Hình 12 Sequence Đăng nhập 71

Hình 13 Sequence Đăng ký tài khoản 72

Hình 14 Sequence Đăng xuất 72

Hình 15 Sequence Thêm sản phẩm 73

Hình 16 Sequence Sửa sản phẩm 73

Hình 17 Sequence Xóa sản phẩm 74

Hình 18 Sequence Tìm kiếm sản phẩm 74

Hình 19 Sequence Lọc danh sách sản phẩm 75

Hình 20 Sequence Nhập hàng 75

Hình 21 Sequence Đổi mật khẩu 76

Hình 22 Sequence Quên mật khẩu 76

Hình 23 Sequence Thêm danh mục sản phẩm 77

Hình 24 Sequence Sửa danh mục sản phẩm 77

Hình 25 Sequence Xóa danh mục sản phẩm 78

Hình 26 Sequence Thêm khuyến mãi 78

Hình 27 Sequence Sửa khuyến mãi 79

Hình 28 Sequence Xóa khuyến mãi 79

Hình 29 Sequence Xóa tài khoản nhân viên 80

Trang 17

Hình 30 Sequence Khóa tài khoản 80

Hình 31 Sequence Mở khóa tài khoản 81

Hình 32 Sequence Thêm tài khoản nhân viên 81

Hình 33 Sequence Thêm sản phẩm vào giỏ hàng 82

Hình 34 Sequence Mua hàng 82

Hình 35 Sequence Xem lịch sử mua hàng 83

Hình 36 Sequence Sửa thông tin cá nhân 84

Hình 37 Sequence Thống kê doanh số 85

Hình 38 Sequence Thống kê số đơn hàng 85

Hình 39 Sequence Cập nhật trạng thái đơn hàng 86

Hình 40 Sequence Cập nhật giỏ hàng 87

Hình 41 Sequence Thêm địa chỉ giao hàng 87

Hình 42 Sequence Sửa địa chỉ giao hàng 88

Hình 43 Sequence Xóa địa chỉ giao hàng 88

Hình 44 Sequence Cập nhật thông tin cửa hàng 89

Hình 45 Sequence Xem chi tiết sản phẩm 89

Hình 46 Sequence Thêm khuyến mãi cho sản phẩm 90

Hình 47 Sequence Xóa khuyến mãi của sản phẩm 90

Hình 48 Sequence Thêm sản phẩm yêu thích 91

Hình 49 Sequence Xóa sản phẩm yêu thích 91

Hình 50 Sequence Đánh giá sản phẩm 92

Hình 51 Danh sách màn hình và sơ đồ chuyển đổi 93

Hình 52 Chi tiết màn hình Trang chủ 93

Hình 53 Chi tiết màn hình Đăng nhập 94

Hình 54 Chi tiết màn hình Đăng ký 95

Hình 55 Chi tiết màn hình thông tin cá nhân 96

Hình 56 Chi tiết màn hình Quản lý địa chỉ giao hàng 97

Hình 57 Chi tiết màn hình Đổi mật khẩu 98

Hình 58 Chi tiết màn hình Danh sách sản phẩm 100

Hình 59 Chi tiết màn hình Chi tiết sản phẩm 101

Hình 60 Chi tiết màn hình Giỏ hàng 102

Trang 18

Hình 62 Chi tiết màn hình Lịch sử mua hàng 105

Hình 63 Chi tiết màn hình Khuyến mãi 106

Hình 64 Chi tiết màn hình Liên hệ 107

Hình 65 Chi tiết màn hình About Us 108

Hình 66 Chi tiết màn hình Dashboard Admin (1) 109

Hình 67 Chi tiết màn hình Dashboard Admin (2) 109

Hình 68 Chi tiết màn hình Quản lý sản phẩm 111

Hình 69 Chi tiết màn hình Quản lý danh mục sản phẩm 112

Hình 70 Chi tiết màn hình Thông tin shop 113

Hình 71 Chi tiết màn hình Quản lý khuyến mãi 114

Hình 72 Chi tiết màn hình Quản lý đơn hàng 115

Hình 73 Chi tiết màn hình Quản lý nhân viên 116

Hình 74 Chi tiết màn hình Quản lý khách hàng 117

Hình 75 Chi tiết màn hình Quên mật khẩu (1) 118

Hình 76 Chi tiết màn hình Quên mật khẩu (2) 118

Hình 77 Chi tiết màn hình Chi tiết sản phẩm trong trang Admin 119

Hình 78 Chi tiết màn hình Nhập hàng 121

Hình 79 Chi tiết màn hình Thêm sản phẩm 122

Hình 80 Chi tiết màn hình Sửa sản phẩm 123

Hình 81 Chi tiết màn hình Thêm khuyến mãi 124

Hình 82 Chi tiết màn hình Sửa khuyến mãi 125

Hình 83 Chi tiết màn hình Thêm danh mục sản phẩm 126

Hình 84 Chi tiết màn hình Sửa danh mục sản phẩm 127

Hình 85 Chi tiết màn hình Xóa danh mục 128

Hình 86 Chi tiết màn hình Thêm địa chỉ giao hàng 129

Hình 87 Chi tiết màn hình Sửa địa chỉ giao hàng 130

Hình 88 Chi tiết màn hình Thêm nhân viên 131

Hình 89 Chi tiết màn hình Sửa nhân viên 132

Hình 90 Chi tiết màn hình Khóa tài khoản nhân viên 133

Hình 91 Chi tiết màn hình Đánh giá sản phẩm 134

Hình 92 Chi tiết màn hình Thêm khuyến mãi cho sản phẩm 135

Trang 19

Hình 94 Cách mở Command Prompt bằng phím tắt 138

Hình 95 Cách chạy API ở Backend 139

Hình 96 Chạy chương trình 139

Hình 97 Ảnh minh chứng kiểm thử chức năng Đăng nhập (1) 142

Hình 98 Ảnh minh chứng kiểm thử chức năng Đăng nhập (2) 143

Hình 99 Ảnh minh chứng kiểm thử chức năng Thêm sản phẩm vào giỏ (1) 144

Hình 103 Ảnh minh chứng kiểm thử chức năng Đặt hàng (1) 147

Hình 106 Ảnh minh chứng kiểm thử chức năng Thêm sản phẩm (1) 150

Trang 20

DANH MỤC BẢNG BIỂU

Bảng 1 Use Case Đăng nhập 26

Bảng 2 Use Case Đăng ký tài khoản 28

Bảng 3 Use Case Đăng xuất 29

Bảng 4 Use Case Thêm sản phẩm 30

Bảng 5 Use Case Sửa sản phẩm 31

Bảng 6 Use Case Xóa sản phẩm 32

Bảng 7 Use Case Tìm kiếm sản phẩm 33

Bảng 8 Use Case Lọc danh sách sản phẩm 33

Bảng 9 Use Case Nhập hàng 34

Bảng 10 Use Case Đổi mật khẩu 35

Bảng 11 Use Case Quên mật khẩu 36

Bảng 12 Use Case Thêm danh mục sản phẩm 37

Bảng 13 Use Case Sửa danh mục sản phẩm 38

Bảng 14 Use Case Xóa danh mục sản phẩm 38

Bảng 15 Use Case Thêm khuyến mãi 39

Bảng 16 Use Case Sửa khuyến mãi 40

Bảng 17 Use Case Xóa khuyến mãi 41

Bảng 18 Use Case Xóa tài khoản nhân viên 42

Bảng 19 Use Case Khóa tài khoản 43

Bảng 20 Use Case Mở khóa tài khoản 44

Bảng 21 Use Case Thêm tài khoản nhân viên 45

Bảng 22 Use Case Thêm sản phẩm vào giỏ hàng 46

Bảng 23 Use Case Mua hàng 47

Bảng 24 Use Case Xem lịch sử mua hàng 48

Bảng 25 Use Case Sửa thông tin cá nhân 49

Bảng 26 Use Case Thống kê doanh số 49

Bảng 27 Use Case Thống kê số đơn hàng 50

Bảng 28 Use Case Cập nhật trạng thái đơn hàng 51

Bảng 29 Use Case Cập nhật giỏ hàng 52

Bảng 30 Use Case Thêm địa chỉ giao hàng 53

Trang 21

Bảng 32 Use Case Xóa địa chỉ giao hàng 54

Bảng 33 Use Case Cập nhật thông tin cửa hàng 55

Bảng 34 Use Case Xem chi tiết sản phẩm 56

Bảng 35 Use Case Thêm Khuyến Mãi Cho Sản Phẩm 56

Bảng 36 Use Case Xóa Khuyến Mãi Của Sản Phẩm 57

Bảng 37 Use Case Thêm Sản Phẩm Yêu Thích 58

Bảng 38 Use Case Xóa Sản Phẩm Yêu Thích 59

Bảng 39 Use Case Đánh Giá Sản Phẩm 59

Bảng 40 Chi tiết bảng Account 62

Bảng 41 Chi tiết bảng Cart 63

Bảng 42 Chi tiết bảng Category 63

Bảng 43 Chi tiết bảng Color 63

Bảng 44 Chi tiết bảng DeliveryAddress 64

Bảng 45 Chi tiết bảng Image 64

Bảng 46 Chi tiết bảng Log_Product 65

Bảng 47 Chi tiết bảng Order 65

Bảng 48 Chi tiết bảng OrderDetail 66

Bảng 49 Chi tiết bảng Product 66

Bảng 50 Chi tiết bảng Product_Size_Color 67

Bảng 51 Chi tiết bảng Promotion 67

Bảng 52 Chi tiết bảng ShopInfo 68

Bảng 53 Chi tiết bảng Size 68

Bảng 54 Chi tiết bảng Staff 69

Bảng 55 Chi tiết bảng TypeAccount 69

Bảng 56 Chi tiết bảng TypeCustomer 69

Bảng 57 Chi tiết bảng Favorite 70

Bảng 58 Chi tiết bảng Review 70

Bảng 59 Các đối tượng màn hình Trang chủ 94

Bảng 60 Các đối tượng màn hình Đăng nhập 94

Bảng 61 Các đối tượng màn hình Đăng ký 95

Bảng 62 Các đối tượng màn hình Thông tin cá nhân 96

Trang 22

Bảng 64 Các đối tượng màn hình Đổi mật khẩu 99Bảng 65 Các đối tượng màn hình Danh sách sản phẩm 100Bảng 66 Các đối tượng màn hình Chi tiết sản phẩm 101Bảng 67 Các đối tượng màn hình Giỏ hàng 102Bảng 68 Các đối tượng màn hình Đặt hàng 104Bảng 69 Các đối tượng màn hình Lịch sử mua hàng 105Bảng 70 Các đối tượng màn hình Khuyến mãi 106Bảng 71 Các đối tượng màn hình Liên hệ 107Bảng 72 Các đối tượng màn hình About Us 108Bảng 73 Các đối tượng màn hình Dashboard Admin 110Bảng 74 Các đối tượng màn hình Quản lý sản phẩm 111Bảng 75 Các đối tượng màn hình Quản lý danh mục sản phẩm 112Bảng 76 Các đối tượng màn hình Thông tin shop 113Bảng 77 Các đối tượng màn hình Quản lý khuyến mãi 114Bảng 78 Các đối tượng màn hình Quản lý đơn hàng 115Bảng 79 Các đối tượng màn hình Quản lý nhân viên 116Bảng 80 Các đối tượng màn hình Quản lý khách hàng 117Bảng 81 Các đối tượng màn hình Quên mật khẩu 119Bảng 82 Các đối tượng màn hình Chi tiết sản phẩm trong trang Admin 120Bảng 83 Các đối tượng màn hình Nhập hàng 121Bảng 84 Các đối tượng màn hình Thêm sản phẩm 122Bảng 85 Các đối tượng màn hình Sửa sản phẩm 123Bảng 86 Các đối tượng màn hình Thêm khuyến mãi 124Bảng 87 Các đối tượng màn hình Thêm danh mục sản phẩm 126Bảng 88 Các đối tượng trong màn hình Sửa danh mục sản phẩm 127Bảng 89 Các đối tượng màn hình Xóa danh mục 128Bảng 90 Các đối tượng màn hình Thêm địa chỉ giao hàng 129Bảng 91 Các đối tượng màn hình Sửa địa chỉ giao hàng 130Bảng 92 Các đối tượng màn hình Thêm nhân viên 131Bảng 93 Các đối tượng màn hình Sửa nhân viên 132Bảng 94 Các đối tượng màn hình Khóa tài khoản nhân viên 133

Trang 23

Bảng 96 Các đối tượng màn hình Thêm khuyến mãi cho sản phẩm 135Bảng 97 Các đối tượng màn hình Quản lý sản phẩm yêu thích 136Bảng 98 Các bước kiểm thử chức năng Đăng nhập 141Bảng 99 Các bước kiểm thử chức năng Thêm sản phẩm vào giỏ hàng 143Bảng 100 Các bước kiểm thử chức năng Đặt hàng 146Bảng 101 Các bước kiểm thử chức năng Thêm sản phẩm 148

Trang 24

PHẦN MỞ ĐẦU

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

Trong thời đại phát triển khoa học công nghệ như hiện nay, ngoài việc kinh doanh, buôn bán truyền thống, mô hình kinh doanh, buôn bán online ngày càng phổ biến Thay

vì mất thời gian để đến cửa hàng để lựa chọn các mặt hàng thì mọi người có thể xem trực tiếp trên website của cửa hàng hay trên các trang web thương mại điện tử như Shopee, Tiki, Lazada Đồng thời so sánh được giá cả của các mặt hàng hay săn được các

mã giảm giá sản phẩm Không chỉ mang lại lợi ích của người mua, bán hàng online cũng giúp cho người bán tiết kiệm được chi phí mặt bằng, có được nguồn khách hàng lớn hơn, dễ dàng quảng bá thương hiệu

Vì những lợi ích như trên, nhóm đã quyết định chọn đề tài “Xây dựng website bán hàng thời trang sử dụng ASP.NET Core và Angular JS” để tạo nên một website bán quần áo thời trang nữ vì nhu cầu mua sắm quần áo của “phái đẹp” là rất lớn

2 MỤC ĐÍCH CỦA ĐỀ TÀI

Đề tài vừa đáp ứng được nhu cầu thị trường, vừa đáp ứng được mong muốn xây dựng được một website sau khi hoàn thành chuyên ngành Công nghệ phần mềm của nhóm

3 ĐỐI TƯỢNG VÀ PHẠM VI NGHIÊN CỨU

Đối tượng và phạm vi nghiên cứu của đồ án:

- Đối tượng nghiên cứu: gồm 2 đối tượng chính là công nghệ sử dụng (ASP.NET Core, Angular, SQL Server) và kiến thức thực tế trong việc quản lý và vận hành hệ thống bán hàng thời trang online

- Phạm vi nghiên cứu của đề tài là xây dựng các chức năng cơ bản của một hệ thống website bán hàng như quản lý sản phẩm, đơn hàng, nhân viên, thống kê, tìm kiếm sản phẩm và thanh toán

4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Kết quả dự kiến đạt được sau khi hoàn thành đồ án:

- Vận dụng được kiến thức về ASP.NET Core, Angular 8, JSON Web Token, SQL Server, Paypal vào đồ án

Trang 25

- Xây dựng được một website bán hàng trực tuyến với những tính năng: xem và đặt hàng online, quản lý sản phẩm, đơn hàng, các thông tin nhân viên, khách hàng, thống

kê được doanh số và đơn hàng theo tháng, quý, năm

Trang 26

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 ASP.NET CORE

1.1.1 Khái niệm 1

ASP.NET Core là một open-source mới và framework đa nền tảng platform) cho việc xây dựng những ứng dụng hiện tại dựa trên kết nối đám mây, giống như web apps, IoT và backend cho mobile ASP.NET Core ra đời khác phục được nhược điểm chỉ có thể chạy trên windows của NET Framework, NET Core có thể chạy được trên da nền tảng Windows, Mac, Linux

(cross-Ứng dụng ASP.NET Core có thể chạy trên NET Core hoặc trên phiên bản đầy

đủ của NET Framework Nó được thiết kế để cung cấp và tối ưu development framework cho những dụng cái mà được triển khai trên đám mây (cloud) hoặc chạy on-promise

1.1.2 Ưu và nhược điểm

Ưu và nhược điểm của ASP.NET Core:

- Ưu điểm:

+ Hỗ trợ đa nền tảng: Hiện nay đã có thể phát triển và chạy ASP.NET trên

cả Windows, Mac, và Linux Và nếu trên Windows có thể sử dụng công cụ tốt nhất Visual Studio 2015 để tạo, quản lý và gỡ lỗi các ứng dụng ASP.NET Core, thì nay trên bất kỳ nền tảng nào đều có thể sử dụng Visual Studio Code Visual Studio Code là một trình soạn thoải với các plugin có hỗ trợ để chỉnh sửa các ứng dụng ASP.NET Core

+ Nguồn mở: Mã nguồn và tài liệu ASP.NET đã được Microsoft mở tất cả

Các mã nguồn giờ đã có sẵn trong Github bạn giờ có thể tải hay thay đổi bất kỳ

mã nào mà bạn thích Nếu có bất kỳ một góp ý cải tiến gì đó, ta có thể gửi một yêu cầu đến cho Microsoft để xem xét và kết hợp.Tương tự như vậy, tất cả các tài liệu cũng là mã nguồn mở và có sẵn trong bài viết docs.asp.net Mỗi trang trên đó điều có chức năng “chỉnh sửa trang này” ở phía trên và bạn có thể chỉnh sửa các tài liệu từ Microsoft

Trang 27

+ Hỗ trợ đầy đủ cho framework: Một thông tin hữu ích là ASP.NET Core

dẫu trở thành mã nguồn mở nhưng Microsoft vẫn sẽ cung cấp hỗ trợ trong 3 năm cho mỗi bản phát hành lớn nhỏ của họ

+ Hiệu suất: Microsoft giới thiệu máy chủ mới web Kestrel chạy trong host IIS của bạn hoặc chạy sau một host process khác Kestrel hiện tại là máy chủ NET chạy nhanh nhất hiện nay

+ Hỗ trợ xây dựng bằng Dependency Injection: ASP.NET Core đã được xây dựng trong Dependency Injection Dependency Injection là một mẫu thiết kế cho phép các phụ thuộc của một class được injected như các đối tượng được yêu cầu trong ứng dụng của bạn Với ASP.NET Core, Microsoft đã cung cấp một Dependency Injection mà bạn có thể sử dụng để xác định sự phụ thuộc được đưa vào Controller, View của bạn, hoặc bất kỳ lớp học khác mà framework sẽ tạo ra cho bạn Bạn có thể bắt đầu việc cấu hình thông qua phương thức ConfigureServices trong tập tin Startup.cs

+ Một Framework duy nhất: Trong ASP.NET Core, Microsoft đã đưa tất cả

các framework vào một framework duy nhất vừa nhẹ hơn và vừa có những tính năng của MVC và WebAPI Với việc sáp nhập này của MVC và Web API, mọi thứ đơn giản hơn nhiều khi bạn không cần phải cân nhắc định tuyến khác nhau,

an toàn, hoặc các bộ lọc cho một biểu tượng controller so với MVC Controller Tất cả các lớp Controller hiện giờ có thể xử lý các yêu cầu sử dụng API Web hoặc cách tiếp cận MVC

+ MVC Helpers Tag: Với ASP.NET Core, Microsoft đã giới thiệu tag helpers để tạo ra mã phía client từ NET và làm cho nó dễ dàng hơn để tái sử dụng trong Razor markup Nó được tham chiếu trong đánh dấu phía máy chủ của bạn như thể họ là một tag HTML mà bạn được sử dụng Công cụ Razor sẽ nhận ra thẻ và thực thi các mã NET có liên quan tương ứng với nó

- Nhược điểm: Một số framework NET hiện tại không khả dụng trong phiên bản NET Core hiện tại Trên thực tế, một số framework này được sử dụng trong các phiên bản sắp tới của NET Core, một số khác thì có thể không bao giờ ra mắt Dưới đây là danh sách một số trường hợp không thể sử dụng NET Core:

Trang 28

+ ASP.NET Web Forms và ASP.NET Web Pages Chúng chỉ được hỗ trợ

và cung cấp bởi NET Framework đầy đủ Microsoft, người đã giải thích rằng

họ không có kế hoạch chuyển WebForms sang ASP.NET Core

+ Thiếu hỗ trợ thư viện của bên thứ ba.,bạn vẫn có thể gặp một số vấn đề với khả năng tương thích nếu thư viện lớp sử dụng bất kỳ API NET Framework nào không được hỗ trợ

+ Bạn không thể sử dụng các API dành riêng cho Windows trong ASP.NET Core và NET Core vì các khung này được thiết kế để độc lập hơn với hệ điều hành Ví dụ: bạn không thể sử dụng không gian tên System.Drawing hoặc làm việc với Windows Registry, đối với điều này, bạn nên sử dụng NET Framework

1.1.3 ASP.NET Core Web API

ASP.NET Core Web API giúp đáp ứng nhu cầu sử dụng đa thiết bị như mobile, web sử dụng chung một cơ sở dữ liệu thông qua tương tác gọi API giúp việc phát triển ứng dụng song song cho web và moblile thuận tiện một cách dễ dàng

Khi xây dựng Web API trong ASP.NET Core, về cơ bản bạn tiếp tục sử dụng MVC Framework với một số thay đổi về kỹ thuật Khi xây dựng hoặc sử dụng các thành phần Model như trong ứng dụng MVC Controller trong Web API chính là Controller của MVC Trong ASP.NET cổ điển, MVC và Web API là hai framework khác nhau, Trong ASP.NET Core bạn sửu dụng cùng một framework để tạo ra cả ứng dụng web truyền thống và web API

Sự khác biệt lớn nhất khi sử dụng MVC để tạo ra Web API nằm ở thành phần View của MVC giờ được thay thế bằng JSON hoặc XML Thay vì sử dụng các Razor template để sinh HTML, action trong Web API sẽ chuyển đổi dữ liệu thành chuỗi JSON hoặc XML Quá trình chuyển đổi này được gọi là Serialization

Như vậy, Web API trong ASP.NET Cỏe không phải là một framework riêng lẻ, ứng dụng Web API có thể triển khai song song bên cạch sử dụng MVC hoặc có thể xây dựng hoàn toàn độc lập Ngoài ra NET cung cấp hỗ trợ cho HTTPS Tự động tạo chứng chỉ thử nghiệm và dễ dàng nhập chứng chỉ đó để kích hoạt HTTPS cục bộ để bạn chạy

và gỡ lỗi, ứng dụng của bạn theo cách chúng được bảo mật

Trang 29

1.1.4 Repository và Unit Of Work pattern

Repository và Unit Of Work pattern nhằm tạo ra một lớp trừu tượng giữa lớp truy cập dữ liệu và lớp logic nghiệp vụ của ứng dụng Việc triển khai các pattern này có thể giúp ứng dụng tránh khỏi những thay đổi trong kho dữ liệu và có thể tạo điều kiện cho việc kiểm tra đơn vị tự động

Hình 1 Minh họa cấu trúc không sử dụng và có sử dụng Repository với Unit Of Work 2

1.1.4.1 Repository

Repository là một mẫu dùng để tạo ra một lớp abstraction trung gian giữa lớp data

và lớp business Lớp này chứa đựng phương thức thao tác mà để giao tiếp với lớp data

để phục vụ cho business từ lớp logic

2 Tom Dykstra, Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application

Trang 30

mô dự án, có thể tái sử dụng các thành phần giao diện Ngoài ra, Angular có cộng đồng hơn 1,7 triệu nhà phát triển, tác giả thư viện, nhà sáng tạo nội dung

- Selector: tên được đặt để gọi một component trong code HTML

- Template: viết trực tiếp HTML trong file TypeScript của component

- TemplateUrl: đường dẫn Url đến file HTML bên ngoài để định nghĩa HTML cho component

- Styles: viết trực tiếp CSS trong file TypeScript của component

- StyleUrls: đường dẫn Url đến file Style (CSS) bên ngoài

1.2.2.2 Data Binding

Data Binding là kỹ thuật đồng bộ dữ liệu giữa component và template

Trong Angular có 2 nhóm là: binding một chiều (One way binding) và binding hai chiều (Two way binding)

- One way binding: dữ liệu được truyền một chiều (từ component sang view hoặc ngược lại) Bind dữ liệu từ view vào component thì sử dụng Property Binding: [binding-target] = “binding-source”

Trang 31

- Two way binding: thay đổi dữ liệu từ component qua view và từ view qua component Ta sử dụng [(ngModel)] để thực hiện binding hai chiều:

1.2.3 Ưu và nhược điểm

Ưu và nhược điểm của Angular:

+ Có thể tái sử dụng các giao diện thành phần (Component)

+ Dependency Injection: cho phép người dùng viết các service đưa vào bất

cứ đâu

+ Cộng đồng rộng lớn và nhiều tài liệu về Angular

+ Angular cung cấp đa nền tảng và tương thích nhiều trình duyệt

- Nhược điểm:

+ Với một số trình duyệt có tính năng Disable Javascript thì website sẽ chỉ thấy được những trang cơ bản

+ Độ bảo mật không cao

1.3 JSON WEB TOKEN

1.3.1 Khái niệm 4

JSON Web Token là một tiêu chuẩn mở (RFC-7519) định nghĩa một cách nhỏ gọn

và khép kín cách thức truyền tin an toàn giữa các bên bằng một đối tượng JSON Thông tin này có thể được xác minh và đáng tin cậy vì nó có “chữ ký” điện tử Chữ ký của JWT

sẽ được mã hóa bằng cách sử dụng HMAC hoặc khóa công khai/bí mật bằng RSA hoặc ECDSA

Trang 32

Hình 2 Cấu trúc JSON Web Token 5

JWT gồm ba phần được phân tách bằng dấu chấm: Header, Payload, Signature

- Header: thường gồm hai phần là loại mã token (ví dụ: JWT) và chữ ký thuật toán được sử dụng (ví dụ: HMAC SHA256, RSA)

- Payload: chứa tập hợp các thông tin (Claims) được chia thành ba loại là registered, public, private

+ Registered: là tập hợp các xác nhận quyền sở hữu được xác định trước (không bắt buộc) Ví dụ: iss (nhà phát hành), exp (thời điểm hết hạn), sub (chủ đề), aud (đối tượng sử dụng)

+ Public: khóa nên được xác định theo IANA JSON Web Token Registry hoặc định nghĩa thành URI chứa không gian tên không bị trùng lặp

+ Private: phần thông tin (claims) tùy chỉnh được tạo để chia sẻ thông tin giữa các bên

- Signature: Chữ ký được tạo bằng cách mã hóa Header và Payload theo một giải thuật nào đó Giải thuật càng phức tạp thì càng tốt

Trang 33

1.4 CLOUDINARY

1.4.1 Khái niệm

Cloudinary là một cloud-based service cung cấp dịch vụ quản lý hình ảnh bao gồm tải ảnh lên, lưu trữ, thao tác và tối ưu hóa Cloudinary cung cấp các APIs và giao diện quản lý hình ảnh giúp dễ dàng tích hợp vào các trang web và ứng dụng trên di động.6

Hình 3 Trang dashboard quản lý hình ảnh của Cloudinary 1.4.2 Tính năng chính

Cloudinary có những tính năng chính sau:

- Xây dựng các URL để chuyển đổi và thao tác (thêm, xóa, gắn tag, thêm vào bộ sưu tập) với hình ảnh

- API Wrappers: Tải lên và quản lý hình ảnh

- Tải hình ảnh trực tiếp từ trình duyệt sử dụng jQuery plugin

Trang 34

1.5 SQL SERVER

1.5.1 Khái niệm 7

SQL server hay còn được gọi là Microsoft SQL Server, nó từ viết tắt của MS SQL Server Đây chính là một loại phần mềm đã được phát triển bởi Microsoft và nó được

sử dụng để có thể dễ dàng lưu trữ cho những dữ liệu dựa theo tiêu chuẩn RDBMS

Từ đó, người ta sẽ lưu trữ dữ liệu dựa vào tiêu chuẩn RDBMS và nó cũng là một trong những hệ quản trị cơ sở dữ liệu dạng quan hệ đối tượng

1.5.2 Tính năng chính

SQL hỗ trợ thực hiện đa dạng các chức năng như sau:

- Cho phép truy cập dữ liệu bên trong hệ thống quản lý cơ sở dữ liệu quan hệ, mô

- Tạo và thả cho các cơ sở dữ liệu cũng như bảng

- Tạo ra các chế độ view, các thủ tục lưu trữ và chức năng trong cơ sở dữ liệu

- Thiết lập quyền trên các bảng, view và thủ tục

1.6 PAYPAL

1.6.1 Khái niệm 8

PayPal là dịch vụ thanh toán và chuyển tiền quốc tế qua mạng Internet, thay thế cho các phương thức truyền thông sử dụng giấy tờ như thư, séc hay các lệnh chuyển tiền Trong nhiều năm liền PayPal luôn giữ vị trí top đầu trong lĩnh vực thanh toán trực tuyến và chuyển tiền qua Internet

1.6.2 Tính năng chính

PayPal giúp khách hàng thanh toán nhanh chóng tiện lợi cũng như bảo vệ khách hàng tránh khỏi các nguy cơ lừa đảo Hệ thống bảo mật tuyệt đối khiến khách hàng yên tâm hơn trong quá trình mua sắm, thanh toán mà không bị lo thông tin tài khoản ngân hàng của mình bị rò rỉ

7 ITNavi, SQL Server là gì? Mục đích của việc sử dụng SQL Server (https://itnavi.com.vn/blog/sql-server

Trang 35

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG

2.1.1 SHEIN VN

Trang chủ: https://www.shein.com.vn/

Website bán hàng thời trang của SHEIN là website có lượng truy cập khá lớn của các chị em phụ nữ, với giao diện dễ nhìn, danh mục sản phẩm đa dạng, có gợi ý các sản phẩm cho người dùng lựa chọn, tìm kiếm sản phẩm dễ dàng với bộ lọc đa năng, có thêm phần đánh giá sản phẩm để người dùng đánh giá sản phẩm một cách chân thực nhất

Hình 4 Khảo sát hiện trạng website SHEIN VN

- Ưu điểm

+ Giao diện dễ nhìn, dễ dùng, có gợi ý mua theo từng thể loại

+ Có thể thêm sản phẩm vào giỏ khi chưa đăng nhập

+ Thông tin sản phẩm thể hiện chi tiết

Trang 36

Hình 5 Khảo sát hiện trạng website JUNO

- Ưu điểm

+ Shop gợi ý sản phẩm mới, sản phẩm được quan tâm, các bộ sưu tập,.v.v + Giao diện đơn giản, sinh động Dễ sử dụng

+ Khách có thể thêm vào giỏ, mua hàng mà không cần tài khoản

+ Thành viên có tài khoản được tích điểm và hưởng ưu đãi

Trang 37

Hình 6 Khảo sát hiện trạng website YES24.VN

- Ưu điểm:

+ Trang bán hàng đa dạng các sản phẩm nhưng giao diện rất gọn, đầy đủ, không bị rối khi vào trang

+ Có mục săn khuyến mãi, mã giảm giá

+ Mục lịch sử xem sản phẩm gần đây hữu ích cho người dùng khi muốn tìm lại sản phẩm đã xem trước đó

+ Kiểm tra đơn hàng trực tiếp trên web không cần tài khoản

Trang 38

Hình 7 Khảo sát hiện trạng website CANIFA

- Ưu điểm:

+ Giao diện đơn giản, sinh động

+ Có thể thêm hàng vào giỏ không cần đăng nhập

- Nhược điểm

+ Tìm kiếm đơn giản, không hỗ trợ bộ lọc

+ Quá trình loading vào giỏ mất nhiều thời gian, không mượt mà

- Quản lý tài khoản khách hàng (Admin, Employee): Khóa tài khoản

- Quản lý tài khoản nhân viên (Admin): Thêm, sửa, xóa, xem chi tiết và khóa tài khoản

- Quản lý đơn hàng (Admin, Employee, Shipper): Cập nhật trạng thái đơn hàng

- Quản lý khuyến mãi (Admin, Employee): Thêm, sửa, xóa và tìm kiếm khuyến mãi

Trang 39

- Quản lý thông tin shop (Admin): Chỉnh sửa thông tin shop

2.2.2.2 Trang Client

Trong trang Client gồm các chức năng sau:

- Thêm sản phẩm vào giỏ hàng (Authorized User)

- Mua hàng (Authorized User)

- Xem lịch sử đơn hàng (Authorized User)

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

- Xem chi tiết, tìm kiếm và lọc sản phẩm (Admin, Employee, Shipper, Authorized User, Guest)

- Chỉnh sửa thông tin cá nhân và đổi mật khẩu (Admin, Employee, Shipper, Authorized User)

- Đăng ký (Guest)

- Đổi mật khẩu khi quên mật khẩu (Admin, Employee, Shipper, Authorized User)

- Đăng nhập (Admin, Employee, Shipper, Authorized User)

- Đăng xuất (Admin, Employee, Shipper, Authorized User)

- Thêm, xóa sản phẩm yêu thích (Authorized User)

- Đánh giá sản phẩm sau khi mua hàng (Authorized User)

2.2.2 Yêu cầu phi chức năng

- Giao diện thân thiện với người dùng

- Tốc độ xử lý các chức năng nhanh chóng

- Tốc độ tìm kiếm, sắp xếp, lọc nhanh và chính xác

Trang 40

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

2.3.1 Lược đồ Use Case

2.3.1.1 Use Case Admin System

Hình 8 Lược đồ Use Case Admin System

Tiêu đề	Xây dựng website bán hàng thời trang sử dụng ASP.NET Core và Angular
Tác giả	Võ Hồng Tiên Giang, Nguyễn Thị Thảo
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Trường đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh
Chuyên ngành	Kỹ thuật phần mềm
Thể loại	Khóa luận tốt nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	169
Dung lượng	13,18 MB