Xây dựng website bán balo sử dụng asp net core và reactjs

Và sau đó người dùng có thể theo dõi và để lại bình luận đánh giá với các sản phẩm đã mua  Website có giao diện thân thiện với người dùng và có tốc độ xử lý nhanh chóng cũng như bảo mật

Trang 1

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

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

THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP CÔNG NGHỆ THÔNG TIN

Tp Hồ Chí Minh, năm 2023

SVTH : NGUYỄN ĐỨC MẠNH PHẠM VĂN THẮNG GVHD: TS LÊ VĂN VINH

S KL01 0 8 7 4

XÂY DỰNG WEBSITE BÁN BALO

SỬ DỤNG ASP.NET CORE VÀ REACTJS

Trang 2

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

KHOA CÔNG NGHỆ THÔNG TIN

-  -

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

ĐỀ TÀI

KHÓA 2019

GIẢNG VIÊN HƯỚNG DẪN: TS LÊ VĂN VINH

SINH VIÊN THỰC HIỆN NGUYỄN ĐỨC MẠNH– 19110396 PHẠM VĂN THẮNG – 19110463

XÂY DỰNG WEBSITE BÁN BALO SỬ DỤNG

ASP.NET CORE VÀ REACTJS

Trang 3

Họ và tên sinh viên 1: Nguyễn Đức Mạnh

Họ và tên sinh viên 2: Phạm Văn Thắng

MSSV 1: 19110396 MSSV 2: 19110463 Thời gian thực hiện: Từ 13/02/2023 đến 30/06/2023

Chuyên ngành: Công nghệ phần mềm

Tên đề tài: Xây dựng website bán balo sử dụng ASP.NET Core và ReactJS

Họ và tên 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 PHẢN BIỆN

MSSV 1: 19110396 MSSV 2: 19110463 Ngành: Công nghệ Thông tin

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)

Trang 5

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

MSSV 1: 19110463 MSSV 2: 19110396 Ngành: Công nghệ Thông tin

Họ và tên Giáo viên phản biện: ThS Trương Thị Ngọc Phượng

Tp Hồ Chí Minh, ngày tháng năm 2023

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

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

Trang 6

5

LỜI CẢM ƠN

Lời mở đầu, nhóm em xin phép gửi lời cảm ơn chân thành đến 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 học tập tại một môi trường tốt để trau dồi kiến thức, phát triển

tư duy và nền móng vững chắc để thực hiện đề tài này một cách tốt nhất

Bên cạnh đó, nhóm chúng em xin gửi lời cảm ơn chân thành và sâu sắc nhất đến thầy Lê Văn Vinh Thầy luôn tận tâm giúp đỡ và đưa ra những góp ý quý giá cho nhóm chúng em phát triển tốt nhất từ lúc đăng ký đề tài cũng như lúc kết thúc tiểu luận

Nhờ những kiến thức chuyên ngành từ thầy cô cũng như những kinh nghiệm từ thực

tế ngoài xã hội thông qua thời gian học tập tại trường và thực tập ở các công ty Tất cả những điều đó đã cung cấp 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 cũng như công việc trong tương lai Đây 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

Chúng em đã cố gắng hoàn thành đề tài một cách tốt nhất, tuy nhiên vẫn còn nhiều thiếu sót khó tránh khỏi Chúng em hy vọng nhận được lời đóng góp từ quý thầy cô để qua

đó chúng em có thể rút ra được bài học kinh nghiệm và tiếp tục hoàn thiện sản phẩm của mình một cách chỉn chu và hoàn hơn tốt nhất

Nhóm thực hiện

Phạm Văn Thắng - 19110463 Nguyễn Đức Mạnh - 19110396

Trang 7

6

MỤC LỤC

LỜI CẢM ƠN 5

MỤC LỤC 6

PHẦN MỞ ĐẦU 13

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

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

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

4 Phạm vi nghiên cứu 14

5 Phân công 14

PHẦN NỘI DUNG 15

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

1.1 ReactJS 15

1.2 ASP.NET Core 15

1.3 PostgreSQL 16

1.4 Json Web Token 17

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

2.1 Khảo sát hiện trạng 18

2.2 Kết luận khảo sát 21

2.3 Kiến trúc chung của hệ thống 21

2.4 Xác định yêu cầu 21

2.5 Mô hình hóa yêu cầu 23

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ 33

3.1 Lược đồ lớp 33

3.2 Lược đồ tuần tự 34

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

3.4 Thiết kế giao diện 65

CHƯƠNG 4: CÀI ĐẶT PHẦN MỀM VÀ KIỂM THỬ 84

4.1 Cài đặt phần mềm 84

4.2 Kiểm thử 85

PHẦN KẾT LUẬN 100

1 Kết quả đạt được 100

Trang 8

7

1.1 Về lý thuyết 100

1.2 Về ứng dụng 100

1.3 Về các thành viên trong nhóm 100

2 Ưu điểm 101

3 Nhược điểm 101

TÀI LIỆU THAM KHẢO 102

Trang 9

8

DANH MỤC HÌNH ẢNH

Hình 1 Website "Saigon Swangger” 18

Hình 2 Website “balohanghieu” 19

Hình 3 Website “balocenter” 20

Hình 4 Kiến trúc chung của hệ thống 21

Hình 5 Sơ đồ use case phía khách hàng 23

Hình 6 Sơ đồ use case phía quản trị viên 24

Hình 7 Sơ đồ lớp của baloshop 33

Hình 8 Sơ đồ tuần tự Đăng nhập 34

Hình 9 Sơ đồ tuần tự Đăng ký 35

Hình 10 Sơ đồ tuần tự Cập nhật thông tin cá nhân 36

Hình 11 Sơ đồ tuần tự Xem thông tin chi tiết sản phẩm 37

Hình 12 Sơ đồ tuần tự tìm kiếm sản phẩm 38

Hình 13 Sơ đồ tuần tự Lọc sản phẩm 38

Hình 14 Sơ đồ tuần tự Thêm sản phẩm vào giỏ hàng 39

Hình 15 Sơ đồ tuần tự Xóa sản phẩm khỏi giỏ hàng 39

Hình 16 Sơ đồ tuần tự Đặt hàng 40

Hình 17 Sơ đồ tuần tự Thống kê doanh thu 41

Hình 18 Sơ đồ tuần tự Thêm sản phẩm 42

Hình 19 Sơ đồ tuần tự Cập nhật sản phẩm 43

Hình 20 Sơ đồ tuẩn tự Xóa sản phẩm 44

Hình 21 Sơ đồ tuần tự Thêm phân loại 45

Hình 22 Sơ đồ tuần tự Cập nhật phân loại 46

Hình 23 Sơ đồ tuần tự Xóa phân loại 47

Hình 24 Sơ đồ tuần tự Thêm thương hiệu 48

Hình 25 Sơ đồ tuần tự Cập nhật thương hiệu 49

Hình 26 Sơ đồ tuần tự Xóa thương hiệu 50

Hình 27 Sơ đồ tuần tự Thêm nhân viên 51

Hình 28 Sơ đồ tuần tự Cập nhật trang thái hoạt động cho nhân viên 52

Hình 29 Sơ đồ tuần tự Cập nhật trạng thái hoạt động cho khách hàng 53

Hình 30 Sơ đồ tuần tự Thêm tin tức mới 54

Hình 31 Sơ đồ tuần tự cập nhật tin tức 55

Hình 32 Sơ đồ tuần tự xóa tin tức 56

Hình 33 Sơ đồ usecase phía quản trị viên 57

Hình 34 Trang đăng ký 65

Hình 35 Trang đăng nhập 66

Hình 36 Trang chủ 67

Hình 37 Trang chi tiết sản phẩm 68

Hình 38 Trang thông tin tài khoản 69

Hình 39 Bộ lọc 70

Trang 10

9

Hình 40 Trang địa chỉ 71

Hình 41 Trang liên hệ 72

Hình 42 Trang chọn địa chỉ nhận hàng 73

Hình 43 Trang giỏ hàng 74

Hình 44 Trang thanh toán 75

Hình 45 Trang tin tức 76

Hình 46 Trang điều khiển 77

Hình 47 Trang quản lý nhân viên 79

Hình 48 Trang quản lý đơn hàng 80

Hình 49 Trang quản lý sản phẩm 81

Hình 50 Trang thêm sản phẩm 82

Hình 51 Trang thống kê doanh thu 83

Hình 52 Test case chức năng kiểm thử 85

Hình 53 Test case chức năng đăng ký 86

Hình 54 Test case giao diện trang chủ 86

Hình 55 Test case chức năng mua hàng khi chưa đăng nhập 87

Hình 56 Kiểm thử chức năng mua hàng khi đã đăng nhập 88

Hình 57 Test case chức năng xóa sản phẩm trong giỏ hàng 88

Hình 58 Test case chức năng tăng / giảm số lượng sản phẩm trong giỏ hàng 89

Hình 59 Test case chức năng mua hàng nhưng không nhập địa chỉ 90

Hình 60 Test case chức năng thanh toán đơn hàng bằng phương thức Momo 91

Hình 61 Test case chức năng xem lịch sử đơn hàng 92

Hình 62 Test case chức năng xem chi tiết sản phẩm 92

Hình 63 Test case chức năng lọc dữ liệu sản phẩm 93

Hình 64 Test case giao diện trang thống kê 94

Hình 65 Test case giao diện trang đơn hàng 94

Hình 66 Test case giao diện trang đơn hàng 95

Hình 67 Test case giao diện trang Nhân viên 95

Hình 68 Test case giao diện trang quản lý sản phẩm 96

Hình 69 Test case giao diện trang quản lý thương hiệu 97

Hình 70 Test case giao diện trang quản lý phân loại sản phẩm 98

Hình 71 Kiểm thử chức năng xác nhận đơn hàng 99

Trang 11

10

DANH MỤC BẢNG BIỂU

Bảng 1 Đặc tả usecase đăng nhập 25

Bảng 2 Đặc tả usecase đăng ký 26

Bảng 3 Đặc tả usecase chỉnh sửa thông tin cá nhân 27

Bảng 4 Đặc tả usecase xem thông tin chi tiết balo 28

Bảng 5 Đặc tả usecase tra cứu thông tin balo 28

Bảng 6 Đặc tả usecase thêm sản phẩm vào giỏ hàng 29

Bảng 7 Đặc tả usecase xóa sản phẩm khỏi giỏ hàng 29

Bảng 8 Đặc tả usecase thanh toán đơn hàng 30

Bảng 9 Đặc tả usecase thêm/ cập nhật/ xóa sản phẩm 31

Bảng 10 Đặc tả usecase thống kê 31

Bảng 11 Đặc tả usecase / cập nhật/ xóa tin tức 32

Bảng 12 Chi tiết bảng Product 58

Bảng 13 Chi tiết bảng User 58

Bảng 14 Chi tiết bảng Account 59

Bảng 15 Chi tiết bảng Invoice 59

Bảng 16 Chi tiết bảng Invoice Detail 60

Bảng 17 Chi tiết bảng Image Product 60

Bảng 18 Chi tiết bảng Product Review 60

Bảng 19 Chi tiết bảng Product Review Reaction 60

Bảng 20 Chi tiết bảng Product Review Image 61

Bảng 21 Chi tiết bảng File Upload 61

Bảng 22 Chi tiết bảng Category 61

Bảng 23 Chi tiết bảng Invoice Detail 61

Bảng 24 Chi tiết bảng Cart 62

Bảng 25 Chi tiết bảng Brand 62

Bảng 26 Chi tiết bảng Post 62

Bảng 27 Chi tiết bảng Post Image 62

Bảng 28 Chi tiết bảng Address 63

Bảng 29 Chi tiết bảng Token 63

Bảng 30 Chi tiết bảng Mail 64

Bảng 31 Chi tiết bảng MailLog 64

Bảng 32 Mô tả giao diện Trang đăng ký 65

Bảng 33 Mô tả giao diện Trang đăng nhập 66

Bảng 34 Mô tả giao diện Trang chủ 68

Bảng 35 Mô tả chi tiết Trang chi tiết sản phẩm 68

Bảng 36 Mô tả giao diện Đổi thông tin tài khoản 69

Bảng 37 Mô tả giao diện Bộ lọc 70

Bảng 38 Mô tả chi tiết Trang địa chỉ 71

Bảng 39 Mô tả chi tiết Trang liên hệ 72

Trang 12

11

Bảng 40 Mô tả chi tiết Trang chọn địa chỉ nhận hàng 73

Bảng 41 Mô tả chi tiết trang giỏ hàng 74

Bảng 42 Mô tả chi tiết Trang chọn phương thức vận chuyển và phương thức thanh toán 75

Bảng 43 Mô tả chi tiết Trang tin tức 76

Bảng 44 Mô tả chi tiết Trang chủ quản trị viên 78

Bảng 45 Mô tả chi tiết Trang quản lý nhân viên 79

Bảng 46 Mô tả chi tiết Trang quản lý đơn hàng 80

Bảng 47 Mô tả chi tiết Trang quản lý sản phẩm 81

Bảng 48 Mô tả chi tiết Form thêm sản phẩm mới 82

Bảng 49 Mô tả chi tiết Trang Thống kê doanh thu 83

Trang 13

12

KẾ HOẠCH THỰC HIỆN

1 Tuần 3 - Khảo sát hiện trạng

- Thiết kế usecase và mô hình hóa yêu cầu

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

2 Tuần 4, 5, 6, 7 - Tìm hiểu về thư viện React của Javacript

- Tìm hiểu về JSON Web Token để ứng dụng vào xác thực và phân quyền API của hệ thống

4 Tuần 12, 13, 14, 15 - Kết hợp các phần đã xây dựng lại với nhau : Giao

diện, API, cơ sở dữ liệu

- Sửa lỗi, hoàn thiện hệ thống

5 Tuần 16, 17 Kiểm thử chương trình và sửa lỗi

6 Tuần 18, 19, 20 Viết và hoàn thiện báo cáo

Trang 14

13

PHẦN MỞ ĐẦU

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

Trong bối cảnh hiện nay, với sự phát triển của công nghệ và thông tin nhanh chóng và luôn đổi mới hằng ngày Và sự ảnh hưởng của dịch Covid trong những năm vừa qua Thì internet đang trở thành xu hướng mới trong việc mua bán hàng hóa và trao đổi thông tin Và trong bối cảnh đó, nhu cầu mua sắm của khách hàng trở nên cao hơn và tiêu chuẩn mua sắm cũng phải phù hợp với yêu cầu của người dùng Đó là những vấn đề nan giải của các doanh nghiệp kinh doanh

Với ý tưởng của nhóm, thì việc xây dụng một trang web cung cấp thông tin và mua bán sản phẩm và ở đây là cung cấp và bán balo là cần thiết đối với một doanh nghiệp hay một cửa hàng buôn bán balo Với việc khách hàng có thể nhanh chóng lựa chọn sản phẩm phù hợp với nhu cầu, với giá tiền thì một trang web bán balo có thể nhanh chóng giải quyết điều đó Người dùng có thể thoải mái lựa chọn, mua sắm của mình mọi lúc và mọi nơi Cũng như về phía cung cấp có thể lựa chọn trang web

là nơi quảng bá các sản phẩm Và hơn thế nữa việc quản lý các đơn hàng và chi phí doanh thu cũng trở nên dễ dàng hơn

Việc có một ứng dụng web bán hàng sẽ tiết kiệm thời gian và nguồn lực rất nhiều đối với cả khách hàng và doanh nghiệp

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

Đề tài “Xây dụng website bán balo” sẽ bao gồm các mục tiêu sau:

 Xây dụng một website cho phép người dùng có thể tìm kiếm, xem thông tin và đặt mua các sản phẩm balo trong thời gian trực tuyến ở bắt kỳ thời điểm và thời gian nào Và sau đó người dùng có thể theo dõi và để lại bình luận đánh giá với các sản phẩm đã mua

 Website có giao diện thân thiện với người dùng và có tốc độ xử lý nhanh chóng cũng như bảo mật thông tin cho người dùng

 Xây dụng hệ thống quản lý ở phía doanh nghiệp hay cửa hàng

Trang 15

14

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

Đề tài này có mục tiêu chính đó là nghiên cứu về kiến thức quản lý thực tiễn và vận hành hệ thống kinh doanh các sản phẩm balo và các công nghệ được áp dụng để thực hiện sản phẩm đó

Trong đó với đối tượng nghiên cứu công nghệ ứng dụng nhóm sẽ nghiên cứ về RESTful API, Spring Boot, MySQL và JWT để xây dựng hệ thống các API để thực hiện thao tác truy xuất dữ liệu một cách an toàn, chính xác, bảo mật cũng như nhánh chóng nhất Cũng như nghiên cứu về ReacJS và các thư viện hỗ trợ thiết kế giao diện để thiết kế một giao diện đẹp mắt và thân thiện với người dùng

4 Phạm vi nghiên cứu

Đối với phạm vi nghiên cứu, nhóm quyết định nghiên cứu đề tài để phát triển trang web với một số tác vụ cơ bản của website bán hàng như là: xem danh sách và chi tiết các sản phẩm, tìm kiếm và lọc sản phẩm, thêm sản phẩm vào giỏ hàng, quản

lý giỏ hàng, đặt hàng và thanh toán, …

5 Phân công

Phạm Văn Thắng

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

- Xây dựng Back – End

- Vẽ Diagram

- Viết báo cáo

Nguyễn Đức Mạnh

- Thiết kế giao diện

- Xây dựng Front – End

- Vẽ Diagram

- Viết báo cáo

Trang 16

15

PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 ReactJS

1.1.1 Giới thiệu

ReacJS là một thư viện JavaScript được ra mắt vào năm 2013 ReacJS được phát triển bởi Facebook và nó được sử dụng để phát triển ứng dụng web và các ứng dụng trên nền tảng di động [1]

Điểm mạnh của ReacJS là cho phép lập trình viên viết HTML trực tiếp lên JavaScript thông qua cú pháp JSX Vậy nên lập trình viên có thể lập trình và kiểm tra kết quả thông qua việc đưa đoạn HTML vào JavaScript ReacJS cho phép người lập trình viên tạo ra các Component và có thể lồng nhiều Component vào nhau thông qua lệnh return của phương thức render Điều này có thể giúp chúng ta tổ chức code trở nên dễ dàng hơn và chúng ta có thể tái sử dụng code giảm thiểu thời gian code không cần thiết [1]

1.1.2 Ưu điểm

ReacJS cho phép việc thực hiện viết các đoạn code Javacript trở nên đễ dàng hơn nhờ sử dụng một cú pháp đặc biệt đó là JSX Người dùng có thể thực hiện nhúng các đoạn HTML và JavaScript thông qua JSX [1]

ReacJS cho phép phá vỡ những cấu trúc, cấu tạo UI phức tạp thành những Component độc lập và có thể tái sử dụng chúng ở nhiều nơi [1]

ReacJS hỗ trợ công cụ giúp việc debug code trở nên đơn giản, dễ dàng hơn

Trang 17

mà không bị ràng buộc bởi hệ điều hành

ASP.NET Core được tối ưu hóa để đạt hiệu suất tốt, đáp ứng tải lớn và có thời gian phản hồi nhanh Nó sử dụng mô hình xử lý không đồng bộ và sử dụng tài nguyên hiệu quả, giúp tăng cường khả năng mở rộng và đáp ứng nhanh chóng

ASP.NET Core cho phép lựa chọn các thành phần cần thiết cho ứng dụng thông qua mô hình module Bạn chỉ cần chọn những thành phần cần sử dụng, giúp giảm kích thước ứng dụng và tối ưu hóa việc sử dụng tài nguyên

ASP.NET Core tích hợp sẵn cơ chế Dependency Injection, giúp quản lý phụ thuộc và tạo mã dễ dàng kiểm thử và tái sử dụng DI giúp giảm sự phụ thuộc giữa các thành phần của ứng dụng, làm cho mã dễ bảo trì, mở rộng và tái sử dụng ASP.NET Core hỗ trợ phát triển cả các API và ứng dụng web Bạn có thể sử dụng nó để xây dựng các dịch vụ web RESTful và ứng dụng web đa chức năng với giao diện người dùng tương tác

Trang 18

17

PostgreSQL tuân thủ nghiêm ngặt các tiêu chuẩn SQL, bao gồm 92,

SQL-99 và SQL:2016 Điều này đảm bảo tính di động và tương thích của PostgreSQL với các ứng dụng và công nghệ khác trong môi trường phát triển

PostgreSQL có khả năng xử lý tải cao và mở rộng dễ dàng Nó hỗ trợ các cơ chế như phân vùng, replica (đa bản sao) và cluster (nhóm), cho phép bạn tăng cường hiệu suất và mở rộng hệ thống cơ sở dữ liệu của mình khi cần thiết

PostgreSQL cung cấp một loạt các tính năng phong phú, bao gồm truy vấn phức tạp, khóa ngoại (foreign key), truy vấn địa lý (spatial query), truy vấn văn bản đầy

đủ (full-text search) và nhiều hơn nữa Nó cũng hỗ trợ các ngôn ngữ lập trình phổ biến như C, C++, Java, Python, PHP và Ruby

1.4 Json Web Token

JSON Web Token (JWT) là một 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 JSON Web Token bao gồm 3 phần, được ngăn cách nhau bởi dấu chấm: header, payload, signature [5]

Trong việc Authentication, sau khi người dùng đăng nhập thành công thì mã thông báo web JSON sẽ được gửi lại về phía người dùng và mã truy cập này là bảo mật Bất cứ khi nào người dùng muốn truy cập vào tài nguyên nào thì người dùng cũng phải cung cấp JWT cho phía máy chủ Máy chủ chịu trách nhiệm kiểm tra thông tin JWT có hợp lệ hay không và trả lại dữ liệu cho người dùng nếu hợp lệ [5] Trong JWT thường chứa các dữ liệu cần thiết cho việc Authorization và vì thông tin JWT khá nhỏ (khoảng 8KB) nên khi cấu hình JWT chúng ta nên ngăn chặn không

để chúng quá lớn giúp cho việc xử lý trở nên nhanh chóng [5]

Vì JSON it dài dòng hơn XML và kích thước sau khi mã hóa cũng vậy cho nên việc sử dụng JWT trở thành một lựa chọn tốt trong thời điểm hiện nay

Trang 19

18

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA

YÊU CẦU 2.1 Khảo sát hiện trạng

2.1.1 Website "Saigon Swangger”

Link: https://saigonswagger.com

Hình 1 Website "Saigon Swangger”

- Các chức năng chính:

 Giao diện hiển thị sản phẩm theo từng danh mục

 Tìm kiếm sản phảm theo tên

 Đăng nhập, đăng ký

 Đặt hàng, giỏ hàng, thanh toán sản phẩm

 Xem thông tin tài khoản

 Xem lịch sử mua hàng

- Ưu điểm:

 Thanh toán bằng nhiều phương thức

 Giao diện đơn giản, trực quan, người mới dễ dàng sử dụng

 Mặt hàng đa dạng

Trang 20

19

- Nhược điểm:

 Không có chức năng chat trực tiếp với cửa hàng

 Trong giỏ hàng không có chức năng xóa sản phẩm

 Không có chức năng lọc sản phẩm theo yêu cầu (giá, phân loại, )

 Giao diện hiển thị sản phẩm theo từng danh mục

 Không có chức năng thanh toán online

 Không tạo tài khoản và lưu thông tin tài khoản

 Không có chức năng chat trực tiếp với cửa hàng

Trang 21

 Lọc sản phẩm

2.1.3.2 Ưu điểm:

 Có thể thanh toán bằng nhiều cách

 Giao diện đơn giản, trực quan, người mới dễ dàng sử dụng

 Mặt hàng đa dạng

 Lọc sản phẩm theo yêu cầu: thương hiệu, mức giá, …

 Có thể chat trực tiếp với của hàng

Trang 22

21

2.1.3.3 Nhược điểm: Không

2.2 Kết luận khảo sát

Qua quá trình khảo sát 3 website bán túi xách và balo được nhiều người biết đến

hiện nay, nhóm chúng em đã thống nhất lại được yêu cầu chức năng của “Website

bán balo” bao gồm:

- Website phải tập trung vào các chức năng chính như các thông tin chi tiết về sản

phẩm, lọc sản phẩm, tìm kiếm sản phẩm, quy trình đặt hàng, thanh toán

- Xây dựng các tính năng thường có như quản lý sản phẩm, thương hiệu, phân loại,

người dùng, xem thống kê doanh thu cho quản trị viên

- Xây dựng các tính năng thanh toán, đặt hàng, xem thông tin chi tiết sản phẩm, tự

quản lý tài khoản của mình cho người dùng

- Website nên có nhiều hình thức thanh toán như: thanh toán khi nhận hàng, thanh

toán online qua ngân hàng, ví điện tử, …

2.3 Kiến trúc chung của hệ thống

Hình 4 Kiến trúc chung của hệ thống

2.4 Xác định yêu cầu

2.4.1 Các tác nhân của hệ thống

Sau quá trình nghiên cứu các hệ thống có sẵn và thu thập thông tin về nhu cầu

của khách hàng Nhóm của em đã quyết định thực hiện phát triển website để phục

vụ các tác nhân chính sau đây:

- Khách vãng lai (Guest): là những người dùng truy cập sử dụng website nhưng

chưa thực hiện đăng nhập vào hệ thống hoặc chưa có tài khoản trong hệ thống

- Người dùng (User): là những người dùng đã có tài khoản và đã đăng nhập vào

hệ thống

Trang 23

22

- Nhân viên (Staff): là những người có trách nhiệm trong việc quản lý các sản phẩm của hệ thống, các đơn đặt hàng, tương tác với khách hàng theo yêu cầu của người quản trị viên

- Quản trị viên (Admin): là người có quyền hành cao nhất trong hệ thống Quản trị viên sẽ chịu trách nhiệm quản lý hệ thống

2.4.2 Yêu cầu chức năng

- Khách vãng lai (Guest):

o Xem thông tin các sản phẩm

o Tìm kiếm và lọc sản phẩm

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

o Đọc tin tức của cửa hàng

- Người dùng (User): người dùng sẽ có các chức năng như khách vãng lai và có thêm các chức năng sau:

o Đăng nhập, đăng xuất, đổi mật khẩu, quên mật khẩu

o Xem thông tin tài khoản: chỉnh sửa thông tin các nhân, xem danh sách các đơn hàng mình đã đặt (có thể hủy đơn hàng chưa giao và đánh giá sản phẩm đã mua), xem danh sách các địa chỉ của mình (thêm, sửa, xóa)

o Thêm sản phẩm vào giỏ hàng và một số chức năng trong giỏ hàng (thêm, sửa, xóa), đặt hàng và thanh toán

- Nhân viên (Staff):

o Đăng nhập, đăng xuất, đổi mật khẩu, quên mật khẩu

o Xem và chỉnh sửa thông tin các nhân

o Quản lý sản phẩm( xem, thêm, sửa, xóa, chỉnh sửa)

o Đăng tin tức mới

o Chấp nhận và hủy đơn hàng

- Quản trị viên (Admin): có các chức năng tương tự như nhân viên và có thêm các chức năng sau

o Quản lý tài khoản(xem, thêm, xóa)

o Quản lý danh mục( xem, thêm, sửa, xóa, chỉnh sửa)

o Quản lý loại sản phẩm(( xem, thêm, sửa, xóa, chỉnh sửa)

o Xem thống kê doanh thu

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

- Giao diện đơn giản, thân thiện với người dùng

- Tốc độ và khả năng xử lý của trang web được tối ưu mang lại trải nghiệm tốt cho người dùng

- Bảo mật an toàn thông tin của hệ thống và của người dùng

- Trang web dễ dàng bảo trì và cải tiến

Trang 24

23

2.5 Mô hình hóa yêu cầu

2.5.1 Lược đồ Use case

2.5.1.1 Phía người dùng( khách hàng)

Hình 5 Sơ đồ use case phía khách hàng

Trang 25

24

2.5.1.2 Phía quản trị viên( admin)

Hình 6 Sơ đồ use case phía quản trị viên

Trang 26

25

2.5.2 Đặc tả Use case

Tên Đăng nhập

Mô tả Người dùng đăng nhập vào hệ thống

Đối tượng Người dùng

Tiền điều kiện Người dùng đã được tạo tài khoản trong hệ thống

Hậu điều kiện Nếu đăng nhập thành công: Người dùng được chuyển đến trang chủ với giao diện đã đăng nhập

Nếu đăng nhập thất bai: Người dùng được yêu cầu đăng nhập lại

Luồng cơ bản

(Thành công)

Usecase được thực hiện khi người dùng truy cập vào trang đăng nhập

Hệ thống yêu cầu điền số điện thoại và mật khẩu

Người dùng thực hiện điền thông tin đăng nhập và bấm nút Đăng nhập

Hệ thống sẽ xác thực vai trò của người dùng

Hệ thống chuyển về giao diện ứng với từng vai trò của người dùng

Trang 27

26

Tên Đăng ký

Mô tả Người dùng đăng ký vào hệ thống

Tiền điều kiện Người dùng chưa có tài khoản trong hệ thống

Hậu điều kiện

Nếu đăng ký thành công: Người dùng được chuyển đến form đăng nhập

Nếu đăng nhập thất bai: Người dùng được yêu cầu đăng ký lại

(Thành công)

Usecase được thực hiện khi người dùng truy cập vào trang đăng nhập

Hệ thống yêu cầu điền số điện thoại, mật khẩu, họ và tên, email, xác nhận lại mật khẩu

Người dùng thực hiện điền đầy đủ thông tin đăng ký và bấm nút Đăng ký

Hệ thống sẽ kiểm tra sự tồn tại của email và số điện thoại

Hệ thống chuyển về giao diện đăng nhập

Trang 28

27

Tên Chỉnh sửa thông tin cá nhân

Mô tả Người dùng chọn thông tin cá nhân

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống

Hậu điều kiện

Nếu đăng ký thành công: Thông tin sẽ được lưu và hiển thị lên cho người dùng

Nếu đăng nhập thất bai: Người dùng được yêu cầu chỉnh sửa lại

(Thành công)

Usecase được thực hiện khi người dùng truy cập vào trang thông tin

cá nhân và chọn tài khoản

Hệ thống yêu cầu nhập thông tin chi tiết: Họ và tên, số điện thoại, email, địa chỉ

Người dùng thực hiện điền đầy đủ thông tin và bấm nút Lưu

Hệ thống sẽ kiểm tra sự tồn tại của email và số điện thoại

Hệ thống sẽ hiển thị lại lên cho người dùng

Hệ thống yêu cầu đăng nhập lại

Bảng 3 Đặc tả usecase chỉnh sửa thông tin cá nhân

Trang 29

28

Tên Xem thông tin chi tiết balo

Mô tả Người dùng xem tất cả thông tin của 1 balo

Tiền điều kiện Người dùng chọn 1 sản phẩm bất kỳ

Hậu điều kiện Không có

(Thành công)

Usecase được thực hiện khi người dùng chọn vào một sản phẩm bất

kỳ, hệ thống hiển thị toàn bộ thông tin của sản phẩm đó

Luồng thay thế

(Thành công) Không có

Luồng ngoại lệ

(Thất bại) Không có

Bảng 4 Đặc tả usecase xem thông tin chi tiết balo

Tên Tra cứu thông tin balo

Mô tả Người dùng tra cứu balo trong cửa hàng

Tiền điều kiện Người dùng nhập vào ô tìm kiếm balo cần tìm

(Thành công)

Usecase được thực hiện khi người dùng nhập vào ô tìm kiếm balo bất kì

Hệ thống kiểm tra sản phẩm có tồn tại không

Hiển thị sản phẩm lên giao diện

(Thất bại) Nếu sản phẩm không tồn tại, hệ thống hiện ra trang lỗi không tìm thấy sản phẩm

Bảng 5 Đặc tả usecase tra cứu thông tin balo

Trang 30

29

Tên Thêm sản phẩm vào giỏ hàng

Mô tả Người dùng thêm một sản phẩm cần mua vào giỏ hàng

Tiền điều kiện Người dùng bấm nút thêm vào giỏ

(Thành công)

Usecase được thực hiện khi người dùng bấm nút thêm sản phẩm vào giỏ, hệ thống sẽ cập nhật lại số lượng và tên sản phẩm vào giỏ hàng

Bảng 6 Đặc tả usecase thêm sản phẩm vào giỏ hàng

Tên Xóa sản phẩm khỏi giỏ hàng

Mô tả Người dùng xóa 1 sản phẩm khỏi giỏ hàng

Tiền điều kiện Người dùng chọn nút xóa sản phẩm

Trang 31

30

Tên Thanh toán đơn hàng

Mô tả Người dùng thực hiện chức năng thanh toán

Tiền điều kiện Người dùng chọn nút Thanh toán trong trang đơn hàng

(Thành công)

Usecase được thực hiện khi người dùng bấm nút Thanh toán đơn hàng

Hệ thống hiển thị trang thanh toán

Sau đó tiến hành qua các bước điền thông tin địa chỉ, chọn phương thức vận chuyển, phương thức thanh toán và yêu cầu người dùng xác nhận lại thông tin đơn hàng đó

Bảng 8 Đặc tả usecase thanh toán đơn hàng

Tên Thêm/ cập nhật/ xóa sản phẩm

Mô tả Quản trị viên tương tác lên sản phẩm như thêm sản phẩm mới, cập nhật lại thông tin hay xóa sản phẩm khỏi cửa hàng Đối tượng Quản trị viên

Tiền điều kiện Quản trị viên bấm vào nút Thêm/ Sửa/ Xóa thông tin của sản phẩm

(Thành công)

Usecase được thực hiện khi quản trị viên tương tác lên sản phẩm Nếu chọn Thêm/ Cập nhật, hệ thống sẽ hiển thị form Thêm/ Cập nhật sản phẩm mới và yêu cầu nhập tất cả thông tin về sản phẩm Nếu chọn Xóa, hệ thống sẽ loại bỏ sản phẩm và hiện lại giao diện cho quản trị viên

Trang 32

(Thất bại) Nếu Thêm/ Sửa tên sản phẩm đã tồn tại, hệ thống sẽ thông báo và yêu cầu quản trị viên nhập lại

Bảng 9 Đặc tả usecase thêm/ cập nhật/ xóa sản phẩm

Tên Thống kê

Mô tả Quản trị viên xem thống kê của toàn bộ hệ thống

Đối tượng Quản trị viên

Tiền điều kiện Quản trị viên bấm mục Bảng điều khiển

(Thành công)

Usecase được thực hiện khi quản trị viên chọn mục Bảng điều khiển trên thanh sidebar, hệ thống hiển thị toàn bộ thông tin như số lượng khách hàng, đơn hàng, sản phẩm, doanh thu lên cho quản trị viên

Trang 33

32

Tên Thêm/ cập nhật/ xóa tin tức

Mô tả Nhân viên tương tác lên tin tức như thêm tin tức mới, cập nhật lại thông tin hay xóa tin tức khỏi cửa hàng Đối tượng Nhân viên

Tiền điều kiện Nhân viên bấm vào nút Thêm/ Sửa/ Xóa tin tức

(Thành công)

Usecase được thực hiện khi nhân viên tương tác lên tin tức

Nếu chọn Thêm/ Cập nhật, hệ thống sẽ hiển thị form Thêm/ Cập nhật tin tức mới và yêu cầu nhập tất cả thông tin về tin tức Nếu chọn Xóa,

hệ thống sẽ loại bỏ tin tức và hiện lại giao diện cho nhân viên Nhân viên nhập xong sẽ bấm lưu và thông tin sẽ được cập nhật lại trên hệ thống

Trang 35

34

3.2 Lược đồ tuần tự

a) Lược đồ tuẩn tự Đăng nhập

Hình 8. Sơ đồ tuần tự Đăng nhập

Trang 36

35 b) Lược đồ tuần tự đăng ký

Hình 9 Sơ đồ tuần tự Đăng ký

Trang 37

36 c) Lược đồ tuần tự Cập nhật thông tin cá nhân

Hình 10 Sơ đồ tuần tự Cập nhật thông tin cá nhân

Trang 38

37 d) Lược đồ tuần tự Xem thông tin sản phẩm

Hình 11 Sơ đồ tuần tự Xem thông tin chi tiết sản phẩm

Trang 39

38

e) Lược đồ tuần tự Tìm kiếm sản phẩm

Hình 12 Sơ đồ tuần tự tìm kiếm sản phẩm

f) Lược đồ tuần tự Lọc sản phẩm

Hình 13 Sơ đồ tuần tự Lọc sản phẩm

Trang 40

39

g) Lược đồ tuần tự Thêm sản phẩm vào giỏ hàng

Hình 14 Sơ đồ tuần tự Thêm sản phẩm vào giỏ hàng

h) Lược đồ tuần tự Xóa sản phẩm khỏi giỏ hàng

Hình 15 Sơ đồ tuần tự Xóa sản phẩm khỏi giỏ hàng

Tiêu đề	Xây Dựng Website Bán Balo Sử Dụng Asp.Net Core Và Reactjs
Tác giả	Nguyễn Đức Mạnh, Phạm Văn Thắng
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	Công Nghệ Thông Tin
Thể loại	Đồ Án Tốt Nghiệp
Năm xuất bản	2023
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	104
Dung lượng	9,83 MB