Xây dựng website bán sách online sử dụng mern stack

Hệ thống tạo tài khoản thành công Luồng thay thế Ở bước 1 và 2 nếu người dùng nhập thông tin sai điều kiện thì thông tin thì hiển thị lỗi lên cho người dùng biết rằng đã bị sai.. Tiền

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

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

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

Tp Hồ Chí Minh, tháng 07/2023

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

XÂY DỰNG WEBSITE BÁN SÁCH ONLINE

Trang 2

Thành phố Hồ Chí Minh, tháng 07 năm 2023

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

KHOA CÔNG NGHỆ THÔNG TIN

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

SINH VIÊN THỰC HIỆN NGUYỄN DUY DƯƠNG – 19110342 NGUYỄN MINH NHẬT – 19110417

KHÓA 2019 - 2023

Trang 3

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

Họ và tên sinh viên 1: Nguyễn Duy Dương

Họ và tên sinh viên 2: Nguyễn Minh Nhật

MSSV 1: 19110342 MSSV 2: 19110417 Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website bán sách online sử dụng MERN Stack

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 4

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

MSSV 1: 19110342 MSSV 2: 19110417 Ngành: Công nghệ thông tin

Tên đề tài: Xây dựng website bán sách online sử dụng MERN Stack

Họ và tên Giáo viên phản biện: ThS Mai Anh Thơ

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

Giáo viên phản biện (Ký và ghi rõ họ tên)

Trang 5

1

LỜI CẢM ƠN

Lời đầu tiên, nhóm xin phép được gửi lời cảm ơn chân thành đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh đã tạo điều kiện cho nhóm chúng em được trau dồi, học tập và phát triển nền tảng kiến thức vững chắc để thực hiện đề tài này

Bên cạnh đó, nhóm chúng em xin gửi đến thầy Lê Văn Vinh lời cảm ơn chân thành

và sâu sắc nhất Thầy đã tận tâm hướng dẫn nhiệt tình và đưa ra những góp ý quý báu cho nhóm chúng em trong suốt quá trình từ lúc bắt đầu cũng như kết thúc đề tài này Nhờ có những nền tảng kiến thức chuyên ngành vững chắc cộng thêm với những kinh nhiệm và yêu cầu thực tế ngoài xã hội thông qua việc học ở trường và thực tập ở công ty Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy Lê Văn Vinh

đã đem đến cho chúng em một khối lượng kiến thức và kinh nghiệm khổng lồ về chuyên ngành và công việc trong tương lai Đặc biệt điều này đã giúp và thôi thúc chúng em hoàn thành được đề tài

Tuy nhiên lượng kiến thức là vô tận và với khả năng hạn hẹp chúng em đã rất cố gắng để hoàn thành một cách tốt nhất Chính vì vậy việc xảy ra những thiếu sót là điều khó có thể tránh khỏi Chúng em hi vọng nhận được sự góp ý tận tình của quý thầy (cô) qua đó chúng em có thể rút ra được bài học kinh nghiệm và hoàn thiện và cải thiện nâng cấp lại sản phẩm của mình một cách tốt nhất có thể

Chúng em xin chân thành cảm ơn!

Nhóm thực hiện

Nguyễn Duy Dương – 19110342 Nguyễn Minh Nhật – 19110417

Trang 6

2

Trường Đại học Sư phạm Kỹ thuật TP.HCM

Khoa Công nghệ Thông tin

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

MSSV 1: 19110342 MSSV 2: 19110417

Thời gian làm tiểu luận: từ 13/02 Đến: 09/07

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

- Ứng dụng JSON Web Token để xác thực và phân quyền cho hệ thống API cho

từng người dùng

- Ứng dụng thư viện ReactJS, Redux và thư viện React component Material UI

để xây dựng và xử lý giao diện Website cho người dùng

Đề cương viết luận văn :

Trang 7

3

PHẦN MỞ ĐẦU

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

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

3 PHẠM VI NGHIÊN CỨU

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

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

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

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

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

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

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

3.4 THIẾT KẾ GIAO DIỆN

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

Trang 8

4

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

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

2 13/03/2023 – 02/04/2023 Tìm hiểu về thư viện ReactJS, Material UI

Tìm hiểu về NodeJS, Express

Tiến hành xây dựng giao diện cho hệ thống

5 09/05/2023 – 06/06/2023 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)

6 07/06/2023 – 18/06/2023 Kiểm thử chương trình và tiến hành sửa lỗi

7 19/06/2023 – 09/07/2023 Viết và hoàn thiện báo cáo

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

Người viết đề cương (Ký và ghi rõ họ tên)

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

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

Trang 9

5

MỤC LỤC

LỜI CẢM ƠN 1

MỤC LỤC 4

DANH MỤC BẢNG 7

DANH MỤC HÌNH ẢNH 10

PHẦN MỞ ĐẦU 13

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

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

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

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

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 14

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

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

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

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

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

2.1 CÁC CÔNG NGHỆ SỬ DỤNG Ở FRONT–END 40

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

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

3.1 KIẾN TRÚC CHUNG CỦA HỆ THỐNG 46

3.2 LƯỢC ĐỒ TUẦN TỰ 47

3.3 THIẾT KẾ CƠ SỞ DỮ LIỆU 69

3.4 THIẾT KẾ GIAO DIỆN 76

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

4.1 CÀI ĐẶT 99

Trang 10

6

4.2 KIỂM THỬ 99

PHẦN KẾT LUẬN 108

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

2 ƯU ĐIỂM 108

3 NHƯỢC ĐIỂM 108

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

TÀI LIỆU THAM KHẢO 109

Trang 11

7

DANH MỤC BẢNG

Bảng 1.1 Bảng yêu cầu chức năng 18

Bảng 1.2 Bảng yêu cầu phi chức năng 20

Bảng 1.3 Mô tả Use case “Đăng ký” 23

Bảng 1.4 Mô tả Use case “Đặt lại mật khẩu” 23

Bảng 1.5 Mô tả Use case “Đăng nhập” 24

Bảng 1.6 Mô tả Use case “Cập nhật thông tin tài khoản” 25

Bảng 1.7 Mô tả Use case “Đổi mật khẩu” 26

Bảng 1.8 Mô tả Use case “Xem chi tiết thông tin của một sách” 26

Bảng 1.9 Mô tả Use case “Thêm sách vào giỏ hàng” 27

Bảng 1.10 Mô tả Use case “Xóa sách khỏi giỏ hàng” 28

Bảng 1.11 Mô tả Use case “Thêm sổ địa chỉ” 28

Bảng 1.12 Mô tả Use case “Chỉnh sửa sổ địa chỉ” 29

Bảng 1.13 Mô tả Use case “Xóa địa chỉ” 30

Bảng 1.14 Mô tả Usecase “Xem lịch sử mua hàng” 31

Bảng 1.15 Mô tả Use case “Thanh toán” 31

Bảng 1.16 Mô tả Use case “Tìm kiếm sách” 32

Bảng 1.17 Mô tả Use case “Thêm danh mục” 33

Bảng 1.18 Mô tả Use case “Sửa danh mục” 33

Bảng 1.19 Mô tả Use case “Xóa danh mục” 34

Bảng 1.20 Mô tả Use case “Quản lý đơn hàng” 35

Bảng 1.21 Mô tả Use case “Thêm sách” 35

Bảng 1.22 Mô tả Use case “Chỉnh sửa sách” 36

Bảng 1.23 Mô tả Use case “Xóa sách” 37

Bảng 1.24 Mô tả Use case “Thêm sách yêu thích” 37

Trang 12

8

Bảng 1.25 Mô tả Use case “Xóa sách yêu thích” 38

Bảng 1.26 Mô tả Use case “Đánh giá” 39

Bảng 3.1 Address 69

Bảng 3.2 Order 71

Bảng 3.3 Book 71

Bảng 3.4 Category 73

Bảng 3.5 User 73

Bảng 3.6 Feedback 75

Bảng 3.7 Mô tả thanh điều hướng 78

Bảng 3.8 Mô tả giao diện trang chủ 79

Bảng 3.9 Mô tả giao diện đăng nhập 79

Bảng 3.10 Mô tả giao diện đăng ký 80

Bảng 3.11 Mô tả giao diện chi tiết sách 82

Bảng 3.12 Mô tả giao diện chi tiết sách 83

Bảng 3.13 Mô tả giao diện thông tin cá nhân người dùng 84

Bảng 3.14 Mô tả giao diện đơn hàng 85

Bảng 3.15 Mô tả giao diện thông tin đơn hàng 86

Bảng 3.16 Mô tả giao diện danh sách địa chỉ và tạo địa chỉ 87

Bảng 3.17 Mô tả giao diện sản phẩm yêu thích 87

Bảng 3.18 Mô tả giao diện giỏ hàng 88

Bảng 3.19 Mô tả giao diện thanh toán 89

Bảng 3.20 Mô tả giao diện thêm đánh giá 91

Bảng 3.21 Mô tả giao diện đăng nhập cho admin 93

Bảng 3.22 Mô tả giao diện bảng điều khiển 94

Bảng 3.23 Mô tả giao diện quản lý sản phẩm 95

Trang 13

9

Bảng 3.24 Mô tả giao diện quản lý danh mục 96

Bảng 3.25 Mô tả giao diện quản lý đơn hàng 97

Bảng 3.26 Mô tả giao diện quản lý người dùng 98

Bảng 4.1 Phạm vi kiểm thử 100

Bảng 4.2 Chiến lược kiểm thử 101

Bảng 4.3 Kết quả kiểm thử người dùng 103

Bảng 4.4 Kết quả kiểm thử quản trị viên 106

Trang 14

10

DANH MỤC HÌNH ẢNH

Hình 1.1 Hình ảnh nhà sách tiki 15

Hình 1.2 Hình ảnh trang chủ của nhà sách Fahasa 16

Hình 1.3 Hình ảnh trang chủ của nhà sách Vinabook 17

Hình 1.4 Lược đồ thực thể - quan hệ 21

Hình 1.5 Sơ đồ usecase tổng quát 22

Hình 2.1 Cơ chế hoạt động của redux 42

Hình 2.2 JWT của một user sau khi đã đăng nhập 44

Hình 3.1 Kiến trúc hệ thống 46

Hình 3.2 Sequence đăng nhập 47

Hình 3.3 Sequence “Đăng ký” 48

Hình 3.4 Sequence “Đổi lại mật khẩu” 49

Hình 3.5 Sequence Chức năng “đổi mật khẩu” 50

Hình 3.6 Sequence “Thêm địa chỉ nhận hàng” 51

Hình 3.7 Sequence “Cập nhật địa chỉ nhận hàng” 52

Hình 3.8 Sequence “Xóa địa chỉ nhận hàng” 53

Hình 3.9 Sequence “Xem thông tin sản phẩm” 54

Hình 3.10 Sequence “Thêm sách vào giỏ hàng” 55

Hình 3.11 Sequence “Xóa sách khỏi giỏ hàng” 56

Hình 3.12 Sequence “Chỉnh sửa thông tin tài khoản” 57

Hình 3.13 Sequence “Thanh toán” 58

Hình 3.14 Sequence “Thêm sản phẩm yêu thích” 59

Hình 3.15 Sequence “Xóa sản phẩm yêu thích” 60

Hình 3.16 Sequence “Đánh giá” 61

Hình 3.17 Sequence “Thêm danh mục” 62

Trang 15

11

Hình 3.18 Sequence “Cập nhật danh mục” 63

Hình 3.19 Sequence “Xóa danh mục” 64

Hình 3.20 Sequence “Thêm sách” 65

Hình 3.21 Sequence “Xóa sách” 66

Hình 3.22 Sequence “Chỉnh sửa sách” 67

Hình 3.23 Sequence “Xem thông tin người dùng” 68

Hình 3.24 Database Design 69

Hình 3.25 Sơ đồ luồng cho người dùng khách (Guest) 76

Hình 3.26 Sơ đồ luồng cho người dùng (User) 76

Hình 3.27 Thanh điều hướng khi chưa đăng nhập 78

Hình 3.28 Thanh điều hướng sau khi người dùng đăng nhập 78

Hình 3.29 Giao diện trang chủ 78

Hình 3.30 Giao diện đăng nhập 79

Hình 3.31 Giao diện đăng ký 80

Hình 3.32 Giao diện chatbox 81

Hình 3.33 Giao diện chi tiết sách 82

Hình 3.34 Giao diện chi tiết sách 83

Hình 3.35 Giao diện thông tin cá nhân người dùng 84

Hình 3.36 Giao diện danh sách lịch sử mua hàng 85

Hình 3.37 Giao diện danh sách lịch sử mua hàng 85

Hình 3.38 Giao diện danh sách địa chỉ và tạo địa chỉ 86

Hình 3.39 Giao diện sản phẩm yêu thích 87

Hình 3.40 Giao diện giỏ hàng 88

Hình 3.41 Giao diện thanh toán 89

Hình 3.42 Giao diện thanh toán online thành công 90

Trang 16

12

Hình 3.43 Giao diện thanh toán online thất bại 90

Hình 3.44 Giao diện thêm đánh giá 91

Hình 3.45 Sơ đồ luồng cho bên quản trị viên 92

Hình 3.46 Giao diện đăng nhập cho admin 93

Hình 3.47 Giao diện bảng điều khiển 94

Hình 3.48 Giao diện quản lý sản phẩm 95

Hình 3.49 Giao diện quản lý danh mục 96

Hình 3.50 Giao diện quản lý đơn hàng 97

Hình 3.51 Giao diện quản lý chi tiết đơn hàng 97

Hình 3.52 Giao diện quản lý người dùng 98

Trang 17

13

PHẦN MỞ ĐẦU

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

Đứng trước sự phát triển như vũ bão của công nghệ tin học thì việc ứng dụng những thành tựu của nó vào cuộc sống, sinh hoạt, học tập đã trở thành một việc làm quen thuộc đối với chúng ta Nhu cầu mua sắm online cũng trở lên phổ biến hơn hiện nay

Đề tài được xây dựng theo mô hình website bán hàng trực tuyến Website được thiết kế như 1 siêu thị sách mini luôn cập nhật thông tin về sách mới, sách mới xuất bản, những cuốn sách bán chạy và hơn thế nữa

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

Để thực hiện đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua sách online, giúp người mua tiếp cận tới các sản phẩm khuyến mãi tốt mà không cần phải ra cửa hàng Đồng thời giúp cho bên bán hàng quản lý các sản phẩm, thu nhập, khuyến mãi Bên cạnh đó là các công nghệ mà chúng em sử dụng trong đề tài, cụ thể như sau:

- Nghiên cứu ReactJS cùng với sử dụng Material UI để xây dựng một giao diện tiện dụng, dễ tương tác và hợp mắt người dùng để hỗ trợ xây dựng giao diện

- Nghiên cứu Restful API, NodeJS và ExpressJS để xây dựng hệ thống, hỗ trợ thao tác và truy xuất thông tin

- Sử dụng cơ sở dữ liệu NoSQL là MongoDB để làm cơ sở dữ liệu lưu trữ cho

Ngoài ra về phía bộ phận quản trị của cửa hàng thì có các chức năng để quản lý các sản phẩm sách như chỉnh sửa các thuộc tính của sách, quản lý các tài khoản của người dùng

Trang 18

14

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

Đề tài “Xây ứng dụng bán sách online sử dụng NodeJS và ReactJS” có mục tiêu cần đạt được là:

- Áp dụng được kiến thức về MongoDb, Express, NodeJS và ReactJS vào trong

đồ án

- Xây diện một website có giao diện, màu sắc thân thiện, dễ nhìn để người dùng

có thiện cảm với cửa hàng

- Hệ thống quản lý và thống kê doanh thu của việc bán hàng online

- Sử dụng JWT để phân quyền cho khách hàng và quản trị viên

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Sau khi hoàn thành đề tài, nhóm chúng em đã học hỏi được nhiều kiến thức và kỹ năng bổ ích Đồng thời cũng hỗ trợ đóng góp về đơn giản hóa việc mua hàng cho khách hàng và việc quản lý online cho người quản trị

Trang 20

16

1.1.1.2 Ưu điểm

- Giao diện bắt mắt, màu sắc hài hòa

- Chức năng lọc sách chi tiết

- Đăng nhập, đăng ký có thể bằng tài khoản Google và Facebook

- Đánh giá của người dùng

- Giao diện hiển thị các sản phẩm sách

- Đặt hàng và giao hàng tận nơi, thanh toán online

- Chức năng đặt hàng, giỏ hàng, thanh toán sách

- Lọc sách

Trang 21

17

1.1.2.2 Ưu điểm

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

- Đa dạng phương thức thanh toán

- Có chức năng đánh giá sách

- Có ngôn ngữ tiếng anh

1.1.2.3 Nhược điểm

- Chức năng tìm kiếm không có phần lọc

- Phần đánh giá không kèm được hình ảnh

Trang 22

18

1.1.3.2 Ưu điểm

- Đa dạng phương thức thanh toán

- Đăng nhập, đăng ký bằng tài khoản Google

- Cho phép thêm giỏ hàng mà không cần đăng nhập

1.1.3.3 Nhược điểm

- Chức năng tìm kiếm không có phần lọc

- Phần đánh giá không cho đính kèm hình ảnh

- Bố cục khá rời rạc

1.1.4 Kết luận khảo sát thực trạng

Qua những dữ liệu mà nhóm chúng em đã thu thập được của 3 hệ thống web nhà sách và để phù hợp với hiện hành chúng em đã chọn cái tên đề tài là “Xây ứng dụng bán sách online sử dụng NodeJS và ReactJS” bao gồm:

- Đây là trang web về thương mại nên sẽ tập trung vào trải nghiệm người dùng cũng với các tính năng quan trọng thiết yếu

- Xây dựng với các chức năng thêm sửa xóa của các phần quản lý cho người quản trị viên

- Về hệ thống thì tốc độ xử lý và hiển thị giao diện phải nhanh chóng không

để người dùng phải chờ đợi lâu

- Sử dụng chatbox để có thể dễ dàng trao đổi trực tiếp giữa quản trị viên với khách hàng một cách nhanh chóng

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

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

Bảng 1.1 Bảng yêu cầu chức năng

STT Yêu cầu nghiệp vụ Loại yêu cầu Ghi chú

1 Thêm, chỉnh sửa thông tin sách Lưu trữ

2 Thêm, chỉnh sửa thông tin tài khoản Lưu trữ

3 Thêm, chỉnh sửa thông tin danh mục Lưu trữ

4 Thêm, chỉnh sửa thông tin sách Lưu trữ

Trang 23

19

5 Thêm, chỉnh sửa đơn hàng Lưu trữ

6 Thêm, xóa sách yêu thích Lưu trữ

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

9 Xem danh sách danh mục Tra cứu (tìm kiếm)

10 Xem danh sách đơn hàng Tra cứu (tìm kiếm)

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

10 Thống kê số lượng sách Kết xuất

11 Thống kê số lượng người dùng Kết xuất

13 Phần quyền sử dụng của user và admin Phân quyền

Trang 24

20

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

Bảng 1.2 Bảng yêu cầu phi chức năng

STT Nội dung Tiêu

chuẩn Mô tả chi tiết Ghi chú

1 Giao diện thân

thiện, đơn giản

giản

2 Dễ thao tác Tiện

dụng

Các thao tác nhập xuất chỉnh sửa

đơn giản, gần gũi với người dùng Dễ thao tác

Trang 25

21

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

1.3.1 Lược đồ thực thể - quan hệ (Entity-relationship model)

Hình 1.4 Lược đồ thực thể - quan hệ

Trang 26

22

1.3.2 Lược đồ Use case tổng quát

Hình 1.5 Sơ đồ usecase tổng quát

Trang 27

23

1.3.3 Đặc tả các Use case

1.3.3.1 Use case “Đăng ký”

Bảng 1.3 Mô tả Use case “Đăng ký”

Tên Use case Đăng ký

Mô tả Người dùng đăng ký tài khoản với vai trò là “Người dùng”

Tác nhân Guest

Tiền điều kiện Không

Hậu điều kiện Thông tin tài khoản được lưu lại trong hệ thống và hiển thị thông

3 Hệ thống thông báo tạo tài khoản thành công

Luồng thay thế Ở bước 3 nếu người dùng nhập thiếu thông tin hoặc sai điều kiện

thông tin thì hiển thị lỗi lên cho người dùng biết rằng đã bị sai

Luồng mở rộng Không có

1.3.3.2 Use case “Đặt lại mật khẩu”

Bảng 1.4 Mô tả Use case “Đặt lại mật khẩu”

Tên Use case Đặt lại mật khẩu

Mô tả Người dùng đặt lại mật khẩu khi quên mật khẩu

Tác nhân Guest

Trang 28

5 Hệ thống tạo tài khoản thành công

Luồng thay thế Ở bước 1 và 2 nếu người dùng nhập thông tin sai điều kiện thì

thông tin thì hiển thị lỗi lên cho người dùng biết rằng đã bị sai

1.3.3.3 Use case “Đăng nhập”

Bảng 1.5 Mô tả Use case “Đăng nhập”

Tên Use case Đăng nhập

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

Tác nhân User

Tiền điều kiện Người dùng phải có sẵn tài khoản Tài khoản đã được phân quyền

Hậu điều kiện Người dùng được đưa đến trang chủ

Luồng sự kiện

Luồng cơ bản

(Thành công)

1 Người dùng truy cập vào website

2 Người dùng chọn chức năng đăng nhập

3 Người dùng nhập số điện thoại, mật khẩu của tài khoản

Trang 29

25

4 Hệ thống xác thực thông tin đăng nhập thành công và cho phép người dùng truy cập website

Luồng thay thế Ở bước 4 nếu thông tin không chính xác thì sẽ hiện thị thông báo

sai tài khoản hoặc mật khẩu

1.3.3.4 Use case “Cập nhật thông tin tài khoản”

Bảng 1.6 Mô tả Use case “Cập nhật thông tin tài khoản”

Tên Use case Cập nhật thông tin tài khoản

Mô tả Người dùng có thể thay đổi các thông tin cơ bản của người đó

Tác nhân User

Tiền điều kiện User sau khi đã đăng nhập

Hậu điều kiện Nếu chỉnh sửa thành công hệ thống sẽ báo Chỉnh sửa thành công

Nếu chỉnh sửa không thành công, hệ thống sẽ báo Chỉnh sửa không thành công

4 Hệ thống kiểm tra các trường thông tin và lưu lại các thông tin

5 Hệ thống hiện thị kết quả dữ liệu

Luồng thay thế Nếu người dùng nhập vào không hợp lệ Những công việc sau được

Trang 30

26

1.3.3.5 Use case “Đổi mật khẩu”

Bảng 1.7 Mô tả Use case “Đổi mật khẩu”

Tên Use case Đổi mật khẩu

Mô tả Người dùng có thể thay đổi mật khẩu của mình

Tác nhân User

Tiền điều kiện User sau khi đã đăng nhập

Hậu điều kiện Nếu chỉnh sửa thành công hệ thống sẽ báo “Đổi thành công”

Nếu chỉnh sửa không thành công, hệ thống sẽ báo “Đổi không thành công”

3 Hệ thống kiểm tra các trường thông tin và lưu lại mật khẩu mới

4 Hệ thống hiện thị kết quả đã lưu thành công

Luồng thay thế Nếu người dùng nhập vào không hợp lệ Những công việc sau được

thực hiện:

1 Hệ thống thông báo chỉnh sửa không thành công và yêu cầu người dùng nhập lại

1.3.3.6 Use case “Xem chi tiết thông tin của một sách”

Bảng 1.8 Mô tả Use case “Xem chi tiết thông tin của một sách”

Tên Use case Xem chi tiết thông tin của một sách

Mô tả Người dùng xem thông tin đầy đủ của một sách trong danh sách

các sách

Trang 31

27

Tác nhân Guest, User

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

(Thành công)

1 Người dùng nhấn chọn một sách trong danh sách các sách

2 Hệ thống truy vấn thông tin chi tiết của sách

3 Hệ thống hiện thị thông tin chi tiết của sách

Luồng thay thế Nếu sách không hợp lệ Những công việc sau được thực hiện:

1 Hệ thống thông báo không tìm thấy trang

1.3.3.7 Use case “Thêm sách vào giỏ hàng”

Bảng 1.9 Mô tả Use case “Thêm sách vào giỏ hàng”

Tên Use case Đặt hàng

Mô tả Người dùng đặt hàng những thứ mà mình muốn mua

Tác nhân User, Guest

2 Người dùng nhấn nút thêm giỏ hàng

3 Hệ thống kiểm tra thông tin sách đã chọn và thêm vào giỏ hàng

Luồng thay thế

Trang 32

28

1.3.3.8 Use case “Xóa sách khỏi giỏ hàng”

Bảng 1.10 Mô tả Use case “Xóa sách khỏi giỏ hàng”

Tên Use case Xóa sách khỏi giỏ hàng

Mô tả Người dùng xóa những sách trong giỏ hàng

Tiền điều kiện Sau khi đã đăng nhập thành công và có sách trong giỏ hàng

Hậu điều kiện Những sách sau khi xóa sẽ không còn trong giỏ hàng

(Thành công)

Usecase bắt đầu khi người dùng đang ở trang giỏ hàng

1 Hệ thống truy vấn các sách của người dùng đã thêm vào giỏ

2 Người dùng chọn nút Xóa

3 Hệ thống xóa sách đó khỏi giỏ hàng

4 Hệ thống báo xóa thành công

5 Hệ thống sẽ truy vấn lại các sách và hiển thị thông tin lên giao diện

1.3.3.9 Use case “Thêm sổ địa chỉ”

Bảng 1.11 Mô tả Use case “Thêm sổ địa chỉ”

Tên Use case Thêm sổ địa chỉ

Mô tả Người dùng thêm địa chỉ nhận hàng, một người dùng có thể có

nhiều địa chỉ nhận hàng

Tác nhân User

Trang 33

29

Tiền điều kiện Sau khi đã đăng nhập thành công

Hậu điều kiện Có địa chỉ vừa mới thêm vào trong danh sách các địa chỉ

(Thành công)

Usecase bắt đầu khi người dùng đang ở trang quản lý địa chỉ

1 Người dùng nhập các thông tin địa chỉ nhận hàng

2 Người dùng chọn nút Lưu

3 Hệ thống nhận dữ liệu và lưu vào database

1.3.3.10 Use case “Chỉnh sửa sổ địa chỉ”

Bảng 1.12 Mô tả Use case “Chỉnh sửa sổ địa chỉ”

Tên Use case Chỉnh sửa sổ địa chỉ

Mô tả Người dùng chỉnh sửa địa chỉ nhận hàng

Tác nhân User

Trang 34

30

1.3.3.11 Use case “Xóa địa chỉ”

Bảng 1.13 Mô tả Use case “Xóa địa chỉ”

Tên Use case Xóa địa chỉ

Mô tả Người dùng xóa địa chỉ

Tác nhân User

(Thành công)

Usecase bắt đầu khi người dùng đang ở trang quản lý sổ địa chỉ

1 Người dùng chọn nút xóa trên giao diện

2 Hệ thống lấy được thông tin địa chỉ

3 Hệ thống truy vấn và xóa dưới database

Trang 35

31

1.3.3.12 Use case “Xem lịch sử mua hàng”

Bảng 1.14 Mô tả Usecase “Xem lịch sử mua hàng”

Tên Use case Xem lịch sử mua hàng

Mô tả Người dùng xem lại lịch sử mua hàng mà mình đã đặt

Tác nhân User

(Thành công)

1 Người dùng chọn đơn hàng của tôi trên thanh Header

2 Hệ thống truy vấn lấy tất cả các đơn hàng của người dùng đó

3 Hệ thống trả về giao diện hiển thị tất cả đơn hàng cho người dùng

4 Người dùng nhấn nút chi tiết của một đơn hàng

5 Hệ thống truy vấn lấy thông tin chi tiết của đơn hàng đó

6 Hệ thống hiển thị thông tin lên giao diện

Luồng thay thế Nếu ở bước 3 không có đơn hàng nào thì hiển thị lên giao diện là

“Không có lịch sử mua hàng” và không có các bước tiếp theo

1.3.3.13 Usecase “Thanh toán”

Bảng 1.15 Mô tả Use case “Thanh toán”

Tên Use case Thanh toán

Mô tả Người dùng Thanh toán

Tác nhân User

Tiền điều kiện Sau khi đã đăng nhập thành công và đang ở trang giỏ hàng

Trang 36

2 Hệ thống truy vấn các địa chỉ đã có của người đó trong database

và chuyển đến trang chọn địa chỉ giao hàng

3 Người dùng chọn địa chỉ để nhận hàng

4 Người dùng chọn phương thức thanh toán

5 Hệ thống dựa vào phương thức thanh toán

6 Người dùng chọn thanh toán

7 Hệ thống kiểm tra đơn hàng, lưu đơn hàng vào database và thông báo thành công

Luồng thay thế Nếu ở bước 2 không có địa chỉ có trước thì người dùng nhập thông

tin địa chỉ mới

Đồng thời hệ thống sẽ lưu vào database địa chỉ đó luôn

1.3.3.14 Use case “Tìm kiếm sách”

Bảng 1.16 Mô tả Use case “Tìm kiếm sách”

Tên Use case Tìm kiếm sách

Mô tả Người dùng có thể tìm kiếm sách bằng tên

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

Trang 37

3 Hệ thống tạo truy vấn tìm các sách dưới database

4 Hệ thống hiển thị các sách tìm được ở trang tìm kiếm sách

Luồng thay thế Ở bước 3 nếu không tìm được sách thì hiển thị không có sách cần

tìm

1.3.3.15 Use case “Thêm danh mục”

Bảng 1.17 Mô tả Use case “Thêm danh mục”

Tên Use case Thêm danh mục

Mô tả Quản trị viên thêm danh mục

Tác nhân Admin

(Thành công)

Usecase bắt đầu khi Admin đang ở trang quản lý danh mục

1 Admin các trường của danh mục

2 Admin chọn nút Lưu

1.3.3.16 Use case “Sửa danh mục”

Bảng 1.18 Mô tả Use case “Sửa danh mục”

Tên Use case Sửa danh mục

Trang 38

34

Mô tả Sửa các thông tin của danh mục

1.3.3.17 Use case “Xóa danh mục”

Bảng 1.19 Mô tả Use case “Xóa danh mục”

Tên Use case Xóa danh mục

Mô tả Xóa danh mục

2 Hệ thống nhận dữ liệu và xóa thuộc tính đó khỏi database

3 Hệ thống thông báo xóa thành công

Trang 39

35

1.3.3.18 Use case “Quản lý đơn hàng”

Bảng 1.20 Mô tả Use case “Quản lý đơn hàng”

Tên Use case Quản lý đơn hàng

Mô tả Hủy đơn hàng hoặc xác nhận đơn hàng

2 Admin chọn xác nhận hoặc hủy đơn hàng

3 Hệ thống thông báo thay đổi trạng thái đơn thành công

1.3.3.19 Use case “Thêm sách”

Bảng 1.21 Mô tả Use case “Thêm sách”

Tên Use case Thêm sách mới

Mô tả Admin thêm 1 loại sách mới

Trang 40

36

(Thành công)

Usecase bắt đầu khi Admin đang ở trang quản lý sách

1 Admin nhập các trường của sách

2 Người dùng chọn nút Lưu

4 Hệ thống thông báo đã lưu thành công

Luồng thay thế Ở bước 2 nếu Admin có nhập sai thì sẽ xuất hiện thông báo lỗi

1.3.3.20 Use case “Chỉnh sửa sách”

Bảng 1.22 Mô tả Use case “Chỉnh sửa sách”

Tên Use case Chỉnh sửa sách

Mô tả Sửa các thông tin của 1 sách trong danh sách các sách

Tiền điều kiện Sau khi đã đăng nhập thành công và danh sách sách có sách

(Thành công)

Usecase bắt đầu khi Admin đang ở trang quản lý sách

1 Admin chọn sách trong danh sách các sách

2 Hệ thống truy vấn lấy thông tin của sách đó

3 Hệ thống hiển thị thông tin sách trên trang chi tiết chi tiết chỉnh sửa sách

4 Admin chỉnh sửa thông tin và nhấn lưu

5 Hệ thống lưu vào trong database

6 Hệ thống phản hồi chỉnh sửa thành công

Luồng thay thế Ở bước 4 nếu người dùng nhập sai thì sẽ hiện thị lỗi

Tiêu đề	Xây Dựng Website Bán Sách Online Sử Dụng MERN Stack
Tác giả	Nguyễn Duy Dương, Nguyễn Minh Nhật
Người hướng dẫn	TS. Lê Văn Vinh, ThS. Mai Anh Thơ
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ố	Thành Phố Hồ Chí Minh

Định dạng
Số trang	114
Dung lượng	7,14 MB