Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website kết hợp nền tảng bán sách và diễn đàn trao đổi thông tin

Nhờ vào sự kết hợp của giao diện người dùng tối ưu và quy trình thanh toán hiệu quả, doanh nghiệp có thể thu hút khách hàng và thúc đẩy doanh số bán hàng, đồng thời sử dụng dữ liệu để đá

Ý nghĩa khoa học và thực tiễn

1 Chương 1: CƠ SỞ LÝ THUYẾT

2 Chương 2: KHẢO SÁT HIỆN TRẠNG

3 Chương 3: PHÂN TÍCH THIẾT KẾ

3.6 Lược đồ quan hệ thực thể

3.7 Thiết kế giao diện và xử lý

4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ

STT Thời gian Công việc Ghi chú

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

- Thiết kế Figma cho từng trang của hệ thống

- Tìm hiểu ReactJS, React Query

- Tìm hiểu thư viện Ant Design, CoreUI

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

- Hoàn thành sơ bộ giao diện trang quản lý và người dùng

Giảng viên hướng dẫn Người viết đề cương

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

- Xây dựng các mô hình Entity, DTO, thiết lập các repository, Service

- Tạo cấu trúc dự án FrontEnd , xây dựng các component liên quan

- Xây dựng API cho các chức năng chính

- Xây dựng các giao diện cho các trang chính của webssite

- Kết nối Backend và Frontend

- Xây dựng các API bổ sung

- Bổ sung thêm giao diện cho website

- Hoàn thiện và tinh chỉnh các chức năng cho trang web

- Viết sơ bộ báo cáo

- Triển khai trang web và môi trường server, client

- Chuẩn bị bảo vệ khoá luận

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

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

5 Ý nghĩa khoa học và thực tiễn 1

1.2.4 Một số thư viện hỗ trợ được dùng 6

II Khảo sát hiện trạng 9

2.1 Website bán sách Van Lang Book 9

2.2 Website bán sách Nhà sách Phương Nam 10

2.6 Website diễn đàn Việt Nam Overnight 15

III PHÂN TÍCH THIẾT KẾ 16

3.1.3 Phần nhân viên quản lý (Manager) 17

3.1.4 Phần dành cho quản lý (Admin) 18

3.3 Đặc tả Use case (Scenario) 21

3.3.5 UC05_Cập nhật giỏ hàng 23

3.3.7 UC07_Mua hàng trong giỏ hàng 25

3.3.11 UC11_Xem trạng thái đơn hàng 28

3.3.12 UC12_Xem trang cá nhân 29

3.3.14 UC14_Chỉnh sửa bài viết 30

3.3.15 UC15_Bình luận bài viết 31

3.3.16 UC16_ Sửa thông tin cá nhân 32

3.3.17 UC17_Xem danh sách đơn hàng 33

3.3.18 UC18_Thay đổi trạng thái đơn hàng 34

3.3.19 UC19_ Thêm khuyến mãi cho sách 34

3.3.23 UC23_Quản lý người dùng 38

3.3.24 UC24_ Tạo thông báo cho người dùng 39

3.3.25 UC25_Thêm người dùng vào black list 40

3.3.26 UC26_Thêm danh mục sách 41

3.3.27 UC27_ Cập nhật danh mục sách 42

3.3.28 UC28_ Xóa danh mục sách 43

3.3.30 UC30_Quản lý bài viết trên diễn đàn 44

3.4 Lược đồ tuần tự (Sequence Diagram) 45

3.4.17 UC17_ Xem danh sách đơn hàng 53

3.4.29 UC29_Thống kê doanh thu 59

3.5 Lược đồ lớp (Class Diagram) 61

3.6 Lược đồ quan hệ thực thể (ERD) 62

3.7 Thiết kế giao diện và xử lý 62

3.7.1 Giao diện phân hệ Admin 62

3.7.1.1 Giao diện trang đăng nhập 62

3.7.1.3 Giao diện Quản lý khách hàng 64

3.7.1.4 Giao diện quản lí sách 66

3.7.1.5 Giao diện quản lý bài viết 69

3.7.2 Giao diện phân hệ khách hàng 71

3.7.2.2 Giao diện trang đăng kí 72

3.7.2.3 Giao diện quên mật khẩu 72

3.7.2.4 Giao diện xác thực mã OTP 73

3.7.2.6 Giao diện chi tiết sách 74

3.7.2.9 Giao diện danh sách sách 77

3.7.2.10 Giao diện trang danh sách sách yêu thích 78

3.7.2.11 Giao diện trang cá nhân khách hàng 79

3.7.2.12 Giao diện danh sách địa chỉ trong thông tin cá nhân 81

3.7.2.13 Giao điện đổi mật khẩu của khách hàng 82

3.7.2.14 Giao diện lịch sử mua hàng 83

3.7.2.15 Giao diện trang diễn đàn 84

IV CÀI ĐẶT VÀ KIỂM THỬ 87

1.1 Kiến thức và kỹ năng 91

PHẦN TÀI LIỆU THAM KHẢO 93

Hình 2.1: Giao diện website Van Lang Book 9

Hình 2.2: Giao diện Website Nhà sách Phương 10

Hình 2.3: Giao diện website Fahasa 11

Hình 2.4: Giao diện website Nhà sách Tiki 12

Hình 2.5: Giao diện website diễn đàn VNWriter 14

Hình 2.6: Giao diện website diễn đàn Việt Nam Overnight 15

Hình 3.2.1: Lược đồ Use case Customer - Guest 19

Hình 3.2.2: Lược đồ Use case Manager - Admin 20

Hình 3.4.1: Hình UC01_Đăng nhập 45

Hình 3.4 2: Hình UC02_Đăng ký 45

Hình 3.4.3: Hình UC03_Tìm kiếm 46

Hình 3.4.4: Hình UC04_Thêm giỏ hàng 46

Hình 3.4.5: Hình UC05_Cập nhật giỏ hàng 47

Hình 3.4.6: Hình UC06_Mua hàng nhanh 48

Hình 3.4.7: Hình UC07_Mua hàng trong giỏ hàng 48

Hình 3.4.8: Hình UC08_Quên mật khẩu 49

Hình 3.4.9: Hình UC09_Đổi mật khẩu 49

Hình 3.4.10: Hình UC10_Đăng xuất 50

Hình 3.4.11: Hình UC11_Xem trạng thái đơn hàng 50

Hình 3.4.12: Hình UC12_Xem trang cá nhân 51

Hình 3.4.13: Hình UC13_Thêm bài viết 51

Hình 3.4.14: Hình UC14_Chỉnh sửa bài viết 52

Hình 3.4.15: Hình UC15_Bình luận bài viết 52

Hình 3.4.16: Hình UC16_ Sửa thông tin cá nhân 53

Hình 3.4.17: Hình UC17_ Xem danh sách đơn hàng 53

Hình 3.4.18: Hình UC18_Thay đổi trạng thái đơn hàng 54

Hình 3.4.19: Hình UC19_ Thêm khuyến mãi cho sách 54

Hình 3.4.20: Hình UC20_Thêm sách 55

Hình 3.4.21: Hình UC21_Cập nhật sách 55

Hình 3.4 22: Hình UC22_ Xóa sách 56

Hình 3.4.23: Hình UC23_Quản lý người dùng 56

Hình 3.4.24: Hình UC24_Tạo thông báo 57

Hình 3.4.25: Hình UC25_Thêm người dùng vào black list 57

Hình 3.4.26: Hình UC26_Thêm danh mục sách 58

Hình 3.4.27: Hình UC27_ Cập nhật danh mục sách 58

Hình 3.4.28: Hình UC28_ Xóa danh mục sách 59

Hình 3.4.29: Hình UC29_Thống kê doanh thu 59

Hình 3.4 30: Hình UC30_Quản lý bài viết trên diễn đàn 60

Hình 3.5: Lược đồ lớp (Class Diagram) 61

Hình 3.6: Lược đồ quan hệ thực thể (ERD) 62

Hình 3.7.1.1: Giao diện trang đăng nhập Admin 62

Hình 3.7.1.2: Giao diện trang chủ 63

Hình 3.7.1.3: Giao diện quản lí danh sách khách hàng 64

Hình 3.7.1.4: Giao diện danh sách đơn hàng 64

Hình 3.7.1 5: Giao diện chi tiết đơn hàng 65

Hình 3.7.1.6: Giao diện Thêm sách 66

Hình 3.7.1.7: Giao diện thêm thể loại/ Tác giả 67

Hình 3.7.1.8: Giao diện danh sách sách 67

Hình 3.7.1.9: Giao diện chi tiết sách 68

Hình 3.7.1.11: Giao diện thống kê bán hàng 70

Hình 3.7.2.1: Giao diện đăng nhập của khách hàng 71

Hình 3.7.2.2: Giao diện đăng ký của khách hàng 72

Hình 3.7.2.3: Giao diện quên mật khẩu 72

Hình 3.7.2.4: Giao diện xác thực mã OTP 73

Hình 3.7.2.7: Giao diện giỏ hàng 75

Hình 3.7.2.8: Giao diện đăt hàng 76

Hình 3.7.2.11: Giao diện danh sách sách đang giảm giá 78

Hình 3.7.2.12: Giao diện trang danh sách sách yêu thích 78

Hình 3.7.2.13: Giao diện trang cá nhân khách hàng 79

Hình 3.7.2.14: Giao diện chỉnh sửa thông tin khách hàng 80

Hình 3.7.2.15: Giao diện danh sách địa chỉ trong thông tin cá nhân 81

Hình 3.7.2.16: Giao diện thêm địa chỉ mới 81

Bảng 3.7.2.17: Bảng mô tả giao diện thêm địa chỉ mới 81

Hình 3.7.2.17: Giao diện chỉnh sửa địa chỉ 82

Hình 3.7.2.18: Giao diện đổi mật khẩu 82

Hình 3.7.2.19: Giao diện lịch sử đơn hàng 83

Hình 3.7.2.20: Giao diện chi tiết đơn hàng 84

Hình 3.7.2.15 Giao diện trang diễn đàn 84

Hình 3.7.2 21: Giao diện bài viết của người dùng 86

Bảng 3.1.1: Bảng danh sách chức năng Guest 16

Bảng 3.1.2: Bảng danh sách chức năng Customer 16

Bảng 3.1.3: Bảng danh sách chức năng Manager 17

Bảng 3.3.1: Bảng đặc tả Use case Đăng nhập 21

Bảng 3.3.2: Bảng đặc tả Use case Đăng ký 21

Bảng 3.3.3: Bảng đặc tả Use case Tìm kiếm 22

Bảng 3.3.4: Bảng đặc tả Use case Thêm giỏ hàng 23

Bảng 3.3.5: Bảng đặc tả Use case Cập nhật giỏ hàng 23

Bảng 3.3.6: Bảng đặc tả Use case Mua hàng nhanh 24

Bảng 3.3.7: Bảng đặc tả Use case Mua hàng trong giỏ hàng 25

Bảng 3.3.8: Bảng đặc tả Use case Quên mật khẩu 26

Bảng 3.3.9: Bảng đặc tả Use case Đổi mật khẩu 27

Bảng 3.3.10: Bảng đặc tả Use case Đăng xuất 28

Bảng 3.3.11: Bảng đặc tả Use case Xem Trạng thái đơn hàng 28

Bảng 3.3.12: Bảng đặc tả Use case Xem trang cá nhân 29

Bảng 3.3.13: Bảng đặc tả Use case Thêm bài viết 30

Bảng 3.3.14: Bảng đặc tả Use case Chỉnh sửa bài viết 30

Bảng 3.3.15: Bảng đặc tả Use case Bình luận bài viết 31

Bảng 3.3.16: Bảng đặc tả Use case Sửa thông tin cá nhân 32

Bảng 3.3.17: Bảng đặc tả Use case Xem danh sách đơn hàng 33

Bảng 3.3.18: Bảng đặc tả Use case Thay đổi trạng thái đơn hàng 34

Bảng 3.3.19: Bảng đặc tả Use case Thêm khuyến mãi cho sách 34

Bảng 3.3.20: Bảng đặc tả Use case Thêm sách 35

Bảng 3.3.21: Bảng đặc tả Use case Cập nhật sách 36

Bảng 3.3.22: Bảng đặc tả Use case Xóa sách 37

Bảng 3.3.23: Bảng đặc tả Use case Quản lý người dùng 38

Bảng 3.3.24: Bảng đặc tả Use case Tạo thông báo cho người dùng 39

Bảng 3.3.25: Bảng đặc tả Use case Thêm vào Black List 40

Bảng 3.3.26: Bảng đặc tả Use case Thêm danh mục 41

Bảng 3.3.27: Bảng đặc tả Use case Cập nhật danh mục 42

Bảng 3.3.28: Bảng đặc tả Use case Xóa danh mục 43

Bảng 3.3.29: Bảng đặc tả Use case Thống kê doanh thu 43

Bảng 3.3.30: Bảng đặc tả Use case Quản lý bài viết 44

Bảng 3.7.1.1: Bảng mô tả giao diện trang đăng nhập Admin 63

Bảng 3.7.1.2: Bảng mô tả giao diện trang chủ 63

Bảng 3.7.1.3: Bảng mô tả giao diện quản lí danh sách khách hàng 64

Bảng 3.7.1.4: Bảng mô tả giao diện danh sách đơn hàng 65

Bảng 3.7.1.5: Bảng mô tả giao diện chi tiết đơn hàng 65

Bảng 3.7.1.6: Bảng mô tả giao diện thêm sách 66

Bảng 3.7.1.7: Bảng mô tả giao diện thêm Thể loại/ Tác giả 67

Bảng 3.7.1.8: Bảng mô tả giao diện danh sách sách 68

Bảng 3.7.1.9: Bảng mô tả giao diện quản lý bài viết 68

Bảng 3.7.1.11: Bảng mô tả giao diện thống kê bán hàng 70

Bảng 3.7.2.1: Bảng mô tả giao diện đăng nhập của khách hàng 71

Bảng 3.7.2.3: Bảng mô tả giao diện đăng ký của khách hàng 72

Bảng 3.7.2.4: Bảng mô tả giao diện quên mật khẩu 73

Bảng 3.7.2.5: Bảng mô tả giao diện xác thực mã OTP 73

Bảng 3.7.2.7: Bảng mô tả giao diện chi tiết sách 74

Bảng 3.7.2.8: Bảng mô tả giao diện giỏ hàng 75

Bảng 3.7.2 9: Bảng mô tả giao diện đăt hàng 76

Bảng 3.7.2 10: Bảng mô tả giao diện danh sách sách 77

Bảng 3.7.2 11: Bảng mô tả giao diện danh sách sách đang giảm giá 78

Bảng 3.7.2.12: Bảng mô tả giao diện trang danh sách sách yêu thích 79

Bảng 3.7.2.13: Bảng mô tả giao diện trang cá nhân khách hàng 79

Bảng 3.7.2.15: Bảng mô tả giao diện chỉnh sửa thông tin khách hàng 80

Bảng 3.7.2.16: Bảng mô tả giao diện danh sách địa chỉ trong thông tin cá nhân 81

Bảng 3.7.2.18: Bảng mô tả giao diện chỉnh sửa địa chỉ 82

Bảng 3.7.2.19: Bảng mô tả giao diện đổi mật khẩu 83

Bảng 3.7.2.20: Bảng mô tả giao diện lịch sử đơn hàng 83

Bảng 3.7.2.21: Bảng mô tả giao diện diễn đàn 84

Bảng 3.7.2.22: Bảng mô tả giao diện bình luận bài viết 85

Bảng 3.7.2.23: Bảng mô tả giao diện bài viết của người dùng 86

Bảng 4.2.3.1: Bảng mô tả kiểm thử các chức năng quản lí tài khoản 88

Bảng 4.2.3.2: Bảng mô tả kiểm thử các chức năng quản lý đơn hàng, giỏ hàng 89

Bảng 4.2.3.3: Bảng mô tả kiểm thử các chức năng quản lý sách 89

Bảng 4.2.3.4: Bảng mô tả kiểm thử các chức năng quản lý diễn dàn 89

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

Trong thời đại Công nghệ 4.0, phát triển hệ thống bán hàng trực tuyến không chỉ tiết kiệm thời gian và nguồn lực mà còn tối ưu hóa chi phí đầu tư Việc tích hợp công nghệ vào quy trình kinh doanh giúp doanh nghiệp cải thiện hiệu suất làm việc, tạo điều kiện cho phát triển dịch vụ, và nâng cao trải nghiệm người dùng

Nhờ vào sự kết hợp của giao diện người dùng tối ưu và quy trình thanh toán hiệu quả, doanh nghiệp có thể thu hút khách hàng và thúc đẩy doanh số bán hàng, đồng thời sử dụng dữ liệu để đáp ứng nhanh chóng nhu cầu thị trường và tối ưu hóa chiến lược kinh doanh Điều này không chỉ giúp củng cố vị thế cạnh tranh mà còn định hình một trải nghiệm mua sắm trực tuyến tích cực cho người tiêu dùng

2 Đối tượng nghiên cứu Đối tượng nghiên cứu gồm các đơn vị quản lí bán hàng, doanh nghiệp cung cấp dịch vụ mua sách trực tuyến và đặc biệt là phân tích người dùng cuối để hiểu rõ mong muốn và trải nghiệm của họ trong việc mua sắm trực tuyến

Thiết kế giao diện người dùng, bảo mật thông tin, tối ưu hóa quy trình mua hàng trực tuyến và phản hồi người dùng để cải thiện hệ thống

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

Phân tích và xây dựng hệ thống mua hàng trực tuyến, đáp ứng nhu cầu của khách hàng, tích hợp phương thức thanh toán trực tuyến, bảo mật thông tin người dùng Phát triển hoàn thiện các chức năng của một hệ thống thương mại bán sách

5 Ý nghĩa khoa học và thực tiễn

+ Góp phần phát triển kiến thức về công nghệ thông tin, quản lý bán hàng trực tuyến và trải nghiệm người dùng

+ Sử dụng ReactJS và Spring Boot để xây dựng một hệ thống mua bán trực tuyến hiệu quả và hiện đại

+ Tiện ích và tiết kiệm thời gian: Người tiêu dùng có thể mua sắm mọi lúc, mọi nơi mà không cần đến cửa hàng vật lý

+ Mở rộng thị trường và tăng hiệu quả bán hàng: Doanh nghiệp có thể tiếp cận nhiều khách hàng trực tuyến hơn, không bị giới hạn bởi địa lý

+ Bảo mật thông tin: Hệ thống cung cấp các phương thức thanh toán an toàn, đảm bảo bảo mật cho người dùng

Cơ sở lý thuyết

ReactJS

React (hay còn được gọi là React.js hoặc ReactJS) là một thư viện JavaScript front-end mã nguồn mở và miễn phí để xây dựng giao diện người dùng dựa trên các thành phần UI riêng lẻ Nó được phát triển và duy trì bởi Meta (trước đây là Facebook) và cộng đồng các nhà phát triển và công ty cá nhân[1]

ReactJS tập trung vào việc quản lý trạng thái và xây dựng các thành phần tái sử dụng, giúp tối ưu hóa hiệu suất và linh hoạt trong phát triển

- Dom thực tế: là biểu diễn của cấu trúc HTML thực sự trên trang web

Virtual DOM : Cơ chế tối ưu hóa hiệu suất, tạo bản sao tạm thời của DOM để cập nhật nhanh chóng và hiệu quả

+ Mỗi khi có sự thay đổi state hoặc prop React tạo ra một bản sao tạm thời của DOM hiện tại, gọi là Virtual DOM

+ React so sánh Virtual DOM mới với Virtual DOM trước đó (trạng thái trước khi có thay đổi) để xác nhận các thành phần được cập nhật

+ React so sánh từng thành phần của Virtual DOM để xác định sự khác biệt giữa chúng và tọa ra danh sách cần đồng bộ Cuối cùng sẽ cập nhật DOM thực tế với những thành phần cần thay đổi

JSX là một cú pháp mở rộng của JavaScript, giúp viết mã HTML trong JavaScript một cách dễ đọc và hiểu

Props là viết tắt của "properties" (thuộc tính) và là một cách để truyền dữ liệu từ một component cha xuống các component con

Props là không thay đổi (immutable), có nghĩa là một component con không thể thay đổi giá trị của props mà nó nhận được Được truyền dưới dạng các thuộc tính của các thẻ React trong JSX b) State:

State là dữ liệu mà một component có thể giữ và theo dõi trong quá trình thời gian chạy

State chỉ tồn tại trong các component lớp (class components), và có thể được khởi tạo trong hàm constructor

Khi state thay đổi, React sẽ tự động render lại component để hiển thị thông tin mới

Component là một khối hàm/class được xây dựng độc lập và tái sử dụng để phát triẻn ứng dụng web Thông qua componet người dùng có thể thiết kế giao diện web nhanh chóng và tiện lợi

Cung cấp các phương thức vòng đời giúp quản lý và điều khiển các sự kiện trong quá trình tồn tại của một thành phần a) Mounting

- Constructor: Phương thức khởi tạo, được gọi khi một thành phần được tạo ra, dùng để khởi tạo state và bind các phương thức

- static getDerivedStateFromProps: Phương thức tĩnh mới, được gọi khi props thay đổi trước khi rendering, dùng tính toán và trả về một object để cập nhật state

- Render: Phương thức chịu trách nhiệm trả về JSX cho giao diện của thành phần Trả về giao diện của thành phần

- componentDidMount: Phương thức được gọi sau khi thành phần được render lần đầu tiên Để thực hiện các tác vụ khởi tạo, gọi API, hoặc thiết lập các subscription b) Updating

- shouldComponentUpdate: Phương thức quyết định xem component có cần được cập nhật lại không.Để tối ưu hóa hiệu suất, tránh việc rendering không cần thiết

- static getDerivedStateFromProps: sử dụng trong cả giai đoạn Mounting và Updating

- render : Phương thức chịu trách nhiệm trả về JSX cho giao diện của thành phần

- componentDidUpdate: Phương thức được gọi sau khi cập nhật của thành phần đã được hoàn thành Để thực hiện các tác vụ sau khi cập nhật, như gọi API mới

- Unmounting: Phương thức được gọi trước khi thành phần bị hủy bỏ (unmounted) Để dọn dẹp tài nguyên, hủy đăng ký, hoặc dừng các tác vụ định kỳ c) Error Handling

- static getDerivedStateFromError: Phương thức được gọi khi có lỗi xảy ra trong một thành phần con Để cập nhật state và hiển thị một giao diện dự phòng

- componentDidCatch: Phương thức được gọi sau khi có lỗi xảy ra trong một thành phần con Để gửi log lỗi, báo cáo, hoặc thực hiện các xử lý khác liên quan đến lỗi.

SpringBoot

Spring boot là một module của Spring FrameWork cung cấp tính năng RAD phát triển nhanh ứng dụng Việc xây dựng một dự án Srping kahs phức tạp từ việc khai báo dependenccy trong pom.xml đến cấu hình XML thì với Spring boot nó được tối ưu với cấu hình đơn giản hơn [2]

- Tự Cấu Hình (Auto-Configuration): Hỗ trợ cấu hình tự động, giảm công việc cấu hình thủ công, không yêu càu xml config

- Có các tính năng của Spring Framework

- Cung cấp những tính năng phi chức năng nhúng như Tomcat, Jetty, hoặc Undertow để giảm độ phức tạp triển khai

- Quản Lý Dependency Tự Động: Sử dụng Maven hoặc Gradle để quản lý dependencies tự động

- Tạo ứng dụng động lập, có thể chạy bằng java-jar

- Có chuẩn Microservices (cloud support, config…)

- Tích hợp sẵn với Spring Data JPA

Mô hình kiến trúc MVC trong Spring Boot được xây dựng trên tính độc lập kết hợp thiết kế hướng đối tượng [3]

Tính độc lập là các layer phục vụ mục đích nhất định, khi muốn thực hiện một công việc ngoài phạm vi sẽ đưa công việc xuống các layer thấp hơn

Kiến trúc Controller – Service – Respository:

- Controller: Nhận và xử lý các yêu cầu HTTP từ client trả về View hoặc Model dưới dạng API cho View

- Service: chứa các code tính toán, xử lý nghiệp vụ Khi Controller yêu cầu, thì Service sẽ tiếp nhận và gọi các phương thức Responsitory và cho ra dữ liệu trả cho Controller Controller trả về View

- Responsitory: Tương tác với cơ sở dữ liệu, thực hiện các thao thác CRUD (Create, Read, Update, Delete) trong DB và trả cho Service

1.2.4 Một số thư viện hỗ trợ được dùng

- Spring Data JPA: hỗ trợ truy cập cơ sở dữ liệu thông qua JPA và giúp thao tác với cơ sở dữ liệu

- Spring Security: cung cấp tính năng bảo mật, xác thực và quản lsy quyền cho ứng dụng

- Spring Web: hỗ trợ phát triển ứng dụng web RestFul và MVC

- Thymeleaf: Mẫu java dựa trên XML/HTML cho việc phát triển giao diện người dùng web

- Spring Cloud: xây dựng và triển khai ứng dụng phân tán và microservices với các tính năng như cấu hình phân tán, truy vấn…

MongoDB

MongoDB là một hệ quản trị cơ sở dữ liệu (DBMS) không dựa trên mô hình quan hệ (non-relational, NoSQL), thuộc họ các cơ sở dữ liệu không chỉ sử dụng ngôn ngữ truy vấn SQL[4]

Document-Oriented: Sử dụng BSON (Binary JSON) để lưu trữ dữ liệu dưới dạng tài liệu (document), mỗi document là một bản ghi tương tự một đối tượng JSON

Distributed Architecture: Hỗ trợ kiến trúc phân tán và có thể mở rộng (scalable) với khả năng chia nhỏ cơ sở dữ liệu (sharing)

Replication: Cung cấp tính năng sap chép để tăng dộ tin cậy và khả năng phục hồi

Truy vấn linh hoạt , hỗ trợ các chỉ mục để tối ưu hóa hiệu suất truy vấn đặc biệt là trong các trường hợp truy vấn theo điều kiện

MongoDB có khả năng chia nhỏ dữ liệu, giúp mở rộng dự án mà không làm giảm hiệu suất

Xác Thực và Quyền Truy Cập: cung cấp chức năng xác thực và quyền truy cập, giúp bảo vệ cơ sở dữ liệu khỏi truy cập trái phép

TLS/SSL Encryption: Hỗ trợ mã hóa dữ liệu thông qua TLS/SSL, tăng cường tính an toàn khi truyền dữ liệu

Audit Logs: Cung cấp khả năng ghi lại các sự kiện (audit logs) để theo dõi các hoạt động trên cơ sở dữ liệu

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

Website bán sách Van Lang Book

- Đường dẫn truy cập: https://vanlang.vn/

Hình 2.1: Giao diện website Van Lang Book

+ Xem, tìm kiếm, lọc sách

+ Quản lý sách trong giỏ hàng

+ Thêm sách vào danh sách yêu thích

+ sách được phân loại chi tiết (giới tính, kiểu dáng, giá cả, màu sắc,…) + Bạn có thể tra cứu thông tin đơn hàng

+ Phương thức thanh toán đa dạng (COD, visa, ngân hàng điện tử, ví điện tử, mã QR)

+ Chưa có gợi ý kết quả tìm kiếm nào

Website bán sách Nhà sách Phương Nam

- Đường dẫn truy cập: https://nhasachphuongnam.com/vi/

Hình 2.2: Giao diện Website Nhà sách Phương

+ Xem, tìm kiếm, lọc sách

+ Thêm sách vào danh sách yêu thích

+ sách được phân loại chi tiết (giới tính, kiểu dáng, giá cả, màu sắc,…)

+ Bạn có thể tra cứu thông tin đơn hàng

+ Phương thức thanh toán đa dạng (COD, visa, ngân hàng điện tử, ví điện tử, mã QR)

+ Truy xuất dữ liệu đẩy lên web chậm khiến khách hàng phải đợi lâu

+ Truy xuất dữ liệu đẩy lên web chậm khiến khách hàng phải đợi lâu + Phần chọn mua hiện thống báo thêm vào giỏ hàng hoặc thanh toán tuy nhiên, người dùng chưa suy nghĩ xong để chọn thì hệ thống tự động thêm vào giỏ hàng mặc định khi người dùng chọn nút “chọn mua”

Website bán sách FAHASA

- Đường dẫn truy cập: https://www.fahasa.com/

Hình 2.3: Giao diện website Fahasa

+ Xem, tìm kiếm sách theo danh mục, theo tên

+ Đề cử sách nổi bật

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

+ Có các hoạt động sự kiện văn hóa, giải trí như: hội sách, triển lãm sách,

+ Danh mục sách đa dạng

+ Gợi ý đa dạng, chính xác

+ Nhiều hình thức khuyến mãi, giảm giá

+ Giao diện nhìn hơi rối

Website bán sách Tiki

- Đường dẫn truy cập: https://tiki.vn/nha-sach-tiki

Hình 2.4: Giao diện website Nhà sách Tiki

Giới thiệu chung: Tiki là sàn thương mại điện tử hàng đầu về bán lẽ, không chỉ cung cấp những sách chính hiệu,mang tới trải nghiệm mua sắm tốt và nhanh chóng đến tất cả khách hàng Tiki cung cấp đa mặt hàng trong đó có nhánh bán về sách

+ Xem, tìm kiếm sách theo danh mục, theo tên

+ Lọc sách theo đánh giá (số sao), theo giá tiền

+ Đề cử sách nổi bật

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

+ Danh mục sách đa dạng

+ Dễ thao tác dễ sử dụng

+ Tìm kiếm sách đôi khi chưa chính xác, chưa rõ ràng + Giao diện chưa bắt mắt, còn một màu, nhạt nhòa

Website diễn đàn VNWriter

- Đường dẫn truy cập: https://vnwriter.net/

Hình 2.5: Giao diện website diễn đàn VNWriter

Giới thiệu chung: Vnwriter là trang web bàn luận về sách, cung cấp thông tin sách chất lượng và khách quan Nơi bạn đọc có thể tìm kiếm và áp dụng những nội dung được tổng hợp và biên tập kỹ lưỡng vào cuộc sống và phát triển bản thân

+ Xem review sách, các đánh giá về sách

+ Tìm kiếm các loại sách nổi bật hiện nay

+ Bài viết phân tích và gợi ý với nhiều chủ đề khác

+ Có đề xuất cho người đọc

+ Có trích dẫn mang tính thu hút người đọc

+ Không có bộ lọc để phân loại tìm kiếm, còn chung chung

+ Bài viết thường riêng lẻ, không có chỗ để người đọc bình luận bài viết

Website diễn đàn Việt Nam Overnight

- Đường dẫn truy cập: https://dembuon.vn/forums/

Hình 2.6: Giao diện website diễn đàn Việt Nam Overnight

+ Tìm kiếm bài viết theo chủ đề, thể loại

+ Đa dạng chủ đề, thể loại

+ Giao diện hơi rối, hơi khó sử dụng

+ Không có công cụ tìm kiếm

PHÂN TÍCH THIẾT KẾ

Thiết kế giao diện và xử lý

- componentDidCatch: Phương thức được gọi sau khi có lỗi xảy ra trong một thành phần con Để gửi log lỗi, báo cáo, hoặc thực hiện các xử lý khác liên quan đến lỗi

CÀI ĐẶT VÀ KIỂM THỬ

Kiểm thử

- componentDidCatch: Phương thức được gọi sau khi có lỗi xảy ra trong một thành phần con Để gửi log lỗi, báo cáo, hoặc thực hiện các xử lý khác liên quan đến lỗi

Kiến thức và kỹ năng

Trải qua một quãng thời gian tìm hiểu và xây dựng hệ thống mua hàng trực tuyến đã đạt được những kết quả như sau:

- Khả năng làm việc nhóm và khả năng làm việc độc lập

- Đã nghiên cứu về công nghệ: SpringBoot Framework, ReactJS

- Đã thiết kế và xây dựng Restfull API

- Tiến hành quy trình xây dựng một dự án phần mềm.

Ưu điểm, nhược điểm

4 Đề nghị cho bảo vệ hay không? ããã

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

Giảng viên hướng dẫn (Ký, ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

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

Họ và tên Sinh viên 1: Lê Anh Kiệt MSSV 1: 20110664

Họ và tên Sinh viên 2: Nguyễn Thanh Sang MSSV 2: 20110710

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

Tên đề tài: Xây dựng website kết hợp nền tảng bán sách và diễn đàn trao đổi thông tin

Họ và tên Giáo viên phản biện: PGS TS Hoàng Văn Dũng

1 Về nội dung đề tài & khối lượng thực hiện: ããã ããã

4 Đề nghị cho bảo vệ hay không? ããã

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

Giảng viên hướng dẫn (Ký, ghi rõ họ tên)

Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất đế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 chúng em được học tập, phát triển nền tảng kiến thức và 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 sâu sắc nhất Nhờ sự giảng dạy tận tình của thầy đã giúp chúng em có những kiến thức bổ ích để áp dụng cho việc học cũng như trong thời gian đi làm sắp 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 hy 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ách của mình một cách tốt đẹp nhất

Cuối cùng nhóm em xin chân thành cảm ơn thầy Lê Văn Vinh cũng như các thầy/cô trong khoa Công nghệ Thông tin đã tạo điều kiện cho chúng em tiếp cận với kiến thức

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

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

Khoa Công nghệ Thông tin ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Lê Anh Kiệt Mã số SV: 20110664

Họ và Tên SV thực hiện 2: Nguyễn Thanh Sang Mã số SV: 20110710 Thời gian làm luận văn: Từ 08/01/2024 Đến 15/06/2024

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

Tên luận văn: Xây dựng website kết hợp nền tảng bán sách và diễn đàn trao đổi thông tin

GV hướng dẫn: TS Lê Văn Vinh

Nhiệm vụ của luận văn:

- Tìm hiểu về các công nghệ: Spring Boot, ReactJS, JSON Web Token

- Sử dụng Spring Boot để viết API cho các module trong hệ thống

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

- Sử dụng JSON Web Token để xác thực và phân quyền cho hệ thống API hoạt động hiệu quả

- Sử dụng thư viện ReactJS, Ant Design,CoreUI, React Query để thiết kế và xử lý giao diện trang web cho người dùng thao tác Đề cương viết luận văn:

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

1 Chương 1: CƠ SỞ LÝ THUYẾT

2 Chương 2: KHẢO SÁT HIỆN TRẠNG

3 Chương 3: PHÂN TÍCH THIẾT KẾ

3.6 Lược đồ quan hệ thực thể

3.7 Thiết kế giao diện và xử lý

Hướng phát triển

Với những gì đã hoàn thành và đạt được ở dự án này, trong tương lai nhóm muốn phát triển ứng dụng mạnh mẽ hơn như sau:

- Bổ sung thêm chức năng thanh toán bằng hình thức online bằng QR code

- Thêm chức năng xác thực bằng số điện thoại

- Đăng nhập với tài khoản google/facebook để người dùng thuận tiện trong việc mua hàng một cách nhanh chóng

- Xây dựng ứng dụng có thể sử dụng trên điện thoại di động Việc phát triển hệ thống trên nhiều nền tảng giúp doanh nghiệp tiếp cận với người dùng tốt hơn

PHẦN TÀI LIỆU THAM KHẢO

[1] “ReactJS”, Wieruch, R (2017) The Road to Learn React: Your Journey to Master Plain Yet Pragmatic React Js (n.p.): CreateSpace Independent

[2] “Spring Framework”, Walls, C., Breidenbach, R (2005) Spring in Action (In Action series) Hoa Kỳ: Manning

[3] “Web MVC structure”, Chapter 13 Web MVC framework

[4] “MongoDB”, Chodorow, K (2013) MongoDB: The Definitive Guide.

Tiêu đề	Xây dựng website kết hợp nền tảng bán sách và diễn đàn trao đổi thông tin
Tác giả	Lê Anh Kiệt, Nguyễn Thanh Sang
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	2024
Thành phố	Thành phố Hồ Chí Minh

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