Xây dựng website bán sách điện tử (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
-----ef&ef-----

BÁO CÁO ĐỒ ÁN 1
XÂY DỰNG WEBSITE BÁN SÁCH ĐIỆN TỬ
Giảng viên hướng dẫn:

ThS. Trần Thị Hồng Yến

Sinh viên thực hiện:

Trần Lương Nguyên 19521922
Nguyễn Quốc Dũng 19521396

Thành phố Hồ Chí Minh, 10 tháng 06 năm 2022


LỜI CẢM ƠN
Chúng em xin gửi lời cảm ơn tới cơ Trần Thị Hồng Yến, người đã trực tiếp tận
tình hướng dẫn nhóm em trong suốt q trình thực hiện đồ án. Chúng em vơ cùng biết
ơn sự tận tình chỉ dẫn của cơ trong q trình nhóm thực hiện đề tài này. Bước đầu tiếp
cận các công nghệ mới, nhóm cịn nhiều thiếu sót về mặt kiến thức cũng như kinh
nghiệm thực tiễn nên không tránh khỏi nhiều sai sót. Những nhận xét, góp ý chân tình
của cơ chính là cơ sở để nhóm có thể cải tiến và hồn thiện đề tài này một cách tốt nhất.
Nếu khơng có những lời chỉ bảo tận tình của cơ thì đồ án này của nhóm rất khó để thực
hiện. Một lần nữa, chúng em chân thành cảm ơn cô.
Đề tài được nhóm thực hiện trong khoảng thời gian 3 tháng, các thành viên nhóm
lần đầu tiếp cận các cơng nghệ mới, bước đầu đi vào thực tế nên còn nhiều hạn chế về
kiến thức cũng như kinh nghiệm thực tiễn. Do vậy, chắc chắn khơng thể tránh khỏi
những sai sót, nhóm rất mong nhận được những sự chỉ bảo, ý kiến đóng góp q báu

của cơ và các bạn học cùng lớp để chúng em có thể bổ sung, cải tiến sản phẩm cũng
như nâng cao kiến thức, hoàn thiện bản thân và tích lũy thêm cho bản thân nhiều kinh
nghiệm, phục vụ tốt hơn cho công việc thực tế sau này.
Chúng em xin chân thành cảm ơn!


NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
……………………………………………………………………
Giảng viên hướng dẫn
Ths. Trần Thị Hồng Yến

ĐỀ CƯƠNG CHI TIẾT
Tên dề tài: Xây dựng website bán sách điện tử
Cán bộ hướng dẫn: Ths. Trần Thị Hồng Yến
Thời gian thực hiện: Từ ngày 21/2/2022 đến ngày 10/6/2022
Sinh viên thực hiện:
Trần Lương Nguyên - 19521922
Nguyễn Quốc Dũng - 19521396
Nội dung đề tài:
1. Giới thiệu bài toán
Hiện nay với sự phát triển vượt bâc của internet cũng như hệ thống vận tải
logictics thì các ngành nghề kinh doanh, thương mại điện tử đang ngày càng phát
triển. Các công ti, tập đoàn sẵn sàng chi lượng lớn tiền vào ngành này. Hệ thống
thương mại điện tử hiện nay có nhiều sự vượt trội hơn so với các ngành nghề
thương mại truyền thống. Chỉ với vài thao tác đơn giản trên các thiết bị thông
minh người dùng dễ dàng lựa chọn các sản phẩm mình mong muốn. chúng sẽ
được vận chuyển đến tận nhà của họ.
Khi xã hội ngày càng phát triển, nhu cầu học tập, tra cứu của con người ngày
càng được chú trọng. Nhu cầu tra cứu, tìm kiếm tài liệu là vơ cùng lớn. Với tình
hình dịch bệnh Covid-19 diễn ra hết sức phức tạp,người dân buộc phải lựa chọn
hình thức học tập và làm việc trực tuyến. Nhu cầu tìm kiếm tài liệu lại càng lớn
hơn. Hiểu được nhu cầu đó nhóm chúng em quyết định lựa chọn đề tài “Xây dựng
website bán sách điện tử” để phục vụ nhu cầu tìm kiếm và mua tài liệu, sách,
truyện của người dung.
2. Mục tiêu
Xây dựng được website bán sách điện tử với nội dung phong phú, giao diện
thân thiện, bố cục được sắp xếp hợp lí thân thiện với người dung


Xây dựng website quản trị cho nhân viên với các chức năng quản lý thông tin

đa dạng và tiện dụng
3. Phạm vi
Phạm vi môi trường: Triển khai sản phẩm trên mơi trường web
Phạm vi chức năng:
-

Đăng nhập, đăng kí tài khoản

-

Quản lí danh mục, thể loại sách

-

Quản lí sách

-

Thống kê

-

Tìm kiếm, tra cứu sách

-

Thêm đánh giá, nhận xét

-

Thêm vào giỏ hang, thanh tốn

-

Quản lí tài khoản

4. Đối tượng:
Website dành cho người dung có nhu cầu tìm kiếm, mua sách, tài liệu có bản
quyền và hỗ trợ các nhà sách tiếp cạnh đên các đối tượng người dùng trức tiếp.
5. Phương pháp thực hiện:
-

Tìm hiểu về Nodejs, expressJs, ReactJs, MongoDB, TaiwindCss

-

Khảo sát thực trạng các website bán sách đang có trên thị trường, từ đó phân
tích, xác định các u cầu cụ thể của đề tài

-

Phân tích thiết kế hệ thống và xây dựng website.

-

Tìm hiểu về thiết kế UX/UI và tiến hành thiết kế giao diện cho website

-

Xây dựng website cho người dung và nhân viên

-

Tiến hành triển khai và kiểm thử

6. Công nghệ dự kiến sử dụng:
-

Back-end: NodeJs, ExpressJs

-

DataBase: MongoDB, Cloudinary

-

Front-end: ReactJs, Redux, TaiwindCss

7. Kết quả mong đợi
-

Nắm bắt và ứng dụng được các cơng nghệ mà nhóm tìm hiểu để xây dựng hoàn
thiện sản phẩm đề tài


-

Hiểu rõ các nghiệp vụ, chức năng của một website bán sách trức tuyến

-

Ứng dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần
mềm vào việc xây dựng và triển khai website sản phẩm đề tài

-

Có thể mở rộng thêm các chức năng mới cho website sản phẩm đề tài để đáp
ứng nhu cầu mới trong tương lai.

Các tiêu chí khác:
-

Tính thẩm mỹ: Website có giao diện đẹp, dễ sử dụng, bố cục hợp lý cuốn hút
người dùng khi sử dụng.

-

Tính logic và bảo mật:
+ Đảm bảo các tính năng hoạt động ổn định, mượt mà khơng bị lỗi
+ Đảm bảo tính bảo mật về các thông tin nhạy cảm, tạo cảm giác an toàn
cho người dùng.
Kế hoạch thực hiện:

Thời gian

21/2/2022 – 28/2/2022

28/2/2022 – 7/3/2022

7/3/2022 – 14/3/2022

14/3/2022 – 21/3/2022

Nội dung
Trần Lương Nguyên

Nguyễn Quốc Dũng

Tìm hiểu đề tài, xác định các

Tìm hiểu đề tài, xác định các

chức năng của hệ thống

chức năng của hệ thống

Tìm hiểu, nghiên cứu cơng

Tìm hiểu, nghiên cứu cơng

nghệ áp dụng trong sản

nghệ áp dụng trong sản phẩm

phẩm đồ án

đồ án

Phân tích hệ thống, thiết kế

Phân tích hệ thống, thiết kế cơ

cơ sở dữ liệu

sở dữ liệu

Chỉnh sửa thiết kế cơ sở dữ

Chỉnh sửa thiết kế cơ sở dữ

liệu, phác thảo layout giao

liệu, phác thảo layout giao

diện

diện


21/3/2022 – 28/3/2022

28/3/2022 – 4/4/2022

4/3/2022 – 11/4/2022

11/4/2022 – 18/4/2022

18/4/2022 – 25/4/2022

25/4/2022 – 2/5/2022

2/5/2022 – 9/5/2022

9/5/2022 – 16/5/2022

16/5/2022 – 23/5/2022

25/5/2022 – 2/6/2022

Xây dựng chức năng đăng

Xây dựng chức năng đăng kí,

kí, đăng nhập và chỉnh sửa

đăng nhập và chỉnh sửa tài

tài khoản phía back-end

khoản phía front-end

Xây dựng chức năng thêm

Xây dựng chức năng thêm

sách phía back-end

sách phía front-end

Xây dựng chức năng tìm

Xây dựng chức năng tìm kiếm

kiếm sách phía back-end

sách phía front-end

Xây dựng chức năng giỏ

Xây dựng chức năng giỏ hàng

hàng phía back-end

phía front-end

Xây dựng chức năng mua

Xây dựng chức năng mua

hàng phía back-end

hàng phía front-end

Xây dựng chức năng đánh

Xây dựng chức năng đánh

giá, nhận xét sách phía back-

giá,nhận xét sách phía front-

end

end

Xây dựng chức năng quản lí

Xây dựng chức năng quản lí

thể loại phía back-end

thể loại phía front-end

Xây dựng chức năng quản lí

Xây dựng chức năng quản lí

tác giả phía back-end

tác giả phía front-end

Xây dựng chức năng

Xây dựng chức năng

dashboard phía back-end

dashboard phía front-end

Kiểm thử và hồn thiện báo

Kiểm thử và hoàn thiện báo

cáo

cáo


Xác nhận của CBHD

TP. HCM, ngày 21 tháng 2 năm 2022

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

Sinh viên

Trần Thị Hồng Yến

(Ký tên và ghi rõ họ tên)
Trần Lương

Nguyễn Quốc

Nguyên

Dũng

MỤC LỤC
LỜI CẢM ƠN ................................................................................................................. 2
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ........................................................ 3
ĐỀ CƯƠNG CHI TIẾT .................................................................................................. 4

MỤC LỤC ...................................................................................................................... 8
DANH MỤC BẢNG .................................................................................................... 12
DANH MỤC HÌNH ẢNH ............................................................................................ 13
Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI ......................................................................... 1
1.1

2

Giới thiệu về đề tài ............................................................................................ 1

1.1.1

Tầm quan trọng sách .................................................................................. 1

1.1.2

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

1.2

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

1.3

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

1.4

Phạm vi nghiên cứu........................................................................................... 3

1.5

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

1.6

Nhiệm vụ của đề tài .......................................................................................... 3

1.7

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

Chương 2 - CƠ SỞ LÝ THUYẾT .......................................................................... 4
2.1

Tổng quan về ReactJs ....................................................................................... 4


2.1.1

Giới thiệu .................................................................................................... 4

2.1.2

Cách hoạt động ........................................................................................... 4

2.1.3

Ưu nhược điểm ........................................................................................... 5

2.2

2.2.1

Giới thiệu .................................................................................................... 7

2.2.2

Cách sử dụng .............................................................................................. 7

2.2.3

Ưu điểm ...................................................................................................... 7

2.3

Tổng quan về Ant design .................................................................................. 8

2.3.1

Giới thiệu .................................................................................................... 8

2.3.2

Cách hoạt động ........................................................................................... 8

2.3.3

Ưu nhược điểm ........................................................................................... 8

2.4

Tổng quan về NodeJs ........................................................................................ 8

2.4.1

Giới thiệu .................................................................................................... 8

2.4.2

Khả năng sử dụng ....................................................................................... 9

2.4.3

Thành phần ................................................................................................. 9

2.4.4

Lợi ích của ................................................................................................ 10

2.4.5

Trường hợp sử dụng ................................................................................. 10

2.5

Tổng quan về ExpressJs .................................................................................. 11

2.5.1

Giới thiệu .................................................................................................. 11

2.5.2

Cấu trúc của ExpressJs ............................................................................. 11

2.5.3

Ưu nhược điểm của ExpressJs ................................................................. 12

2.6

Tổng quan về JSON Web Token .................................................................... 13

2.6.1

Giới thiệu .................................................................................................. 13

2.6.2

Cấu trúc của JWT ..................................................................................... 13

2.6.3

Trường hợp sử dụng ................................................................................. 14

2.7

3

Tổng quan về Redux Toolkit ............................................................................ 7

Tổng quan về MongoDB ................................................................................ 14

2.7.1

Giới thiệu .................................................................................................. 14

2.7.2

Một vài khái niệm cơ bản trong MongoDB ............................................. 15

2.7.3

Ưu nhược điểm ......................................................................................... 16

Chương 3 - PHÂN TÍCH THIẾT KẾ HỆ THỐNG ............................................. 17
3.1

Mơ tả yêu cầu .................................................................................................. 17


3.1.1

Yêu cầu chức năng ................................................................................... 17

3.1.2

Yêu cầu phi chức năng ............................................................................. 19

3.2

4

Kiến trúc hệ thống ........................................................................................... 20

3.2.1

Mô tả kiến trúc Front-End ........................................................................ 20

3.2.2

Mô tả kiến trúc Back-End ........................................................................ 23

Chương 4 - HIỆN THỰC HỆ THỐNG ................................................................ 25
4.1

Sơ đồ Use case ................................................................................................ 25

4.1.1

Đăng kí ..................................................................................................... 26

4.1.2

Xác thực tài khoản.................................................................................... 26

4.1.3

Đăng nhập ................................................................................................ 27

4.1.4

Quên mật khẩu ......................................................................................... 28

4.1.5

Cập nhật mật khẩu .................................................................................... 29

4.1.6

Chỉnh sửa thơng tin cá nhân ..................................................................... 29

4.1.7

Tìm kiếm sách .......................................................................................... 30

4.1.8

Thêm sách vào giỏ hàng ........................................................................... 30

4.1.9

Mua hàng .................................................................................................. 31

4.1.10

Xác thực đơn hàng ................................................................................ 31

4.1.11

Nhận xét đánh giá ................................................................................. 32

4.1.12

Quản lí đơn hàng ................................................................................... 32

4.1.13

Thêm sách mới ...................................................................................... 33

4.1.14

Nhập sách .............................................................................................. 34

4.1.15

Chỉnh sửa thông tin sách ....................................................................... 34

4.1.16

Nhập sách .............................................................................................. 35

4.1.17

Thêm thể loại mới ................................................................................. 36

4.1.18

Chỉnh sửa thông tin thể loại .................................................................. 37

4.1.19

Xóa thể loại ........................................................................................... 37

4.1.20

Thêm tác giả.......................................................................................... 39

4.1.21

Chỉnh sửa thơng tin tác giả ................................................................... 40

4.1.22

Xóa tác giả ............................................................................................ 41

4.1.23

Thêm mã giảm giá ................................................................................ 43

4.1.24

Chỉnh sửa thông tin mã giảm giá .......................................................... 43


4.1.25

Xóa thơng tin mã giảm giá.................................................................... 44

4.1.26

Xác nhận đơn hàng ............................................................................... 45

4.1.27

Hủy đơn đặt hàng .................................................................................. 46

4.1.28

Xem chi tiết đơn đặt hàng ..................................................................... 46

4.1.29

Xác thực đơn đặt hàng từ các khách hàng chưa đăng kí tài khoản....... 47

4.1.30

Báo cáo ................................................................................................. 48

4.2

4.2.1

Danh sách các đối tượng trong hệ thống .................................................. 50

4.2.2

Dữ liệu người dùng .................................................................................. 50

4.2.3

Dữ liệu sách .............................................................................................. 51

4.2.4

Dữ liệu thể loại ......................................................................................... 52

4.2.5

Dữ liệu tác giả .......................................................................................... 53

4.2.6

Dữ liệu đánh giá ....................................................................................... 54

4.2.7

Dữ liệu mã giảm giá ................................................................................. 54

4.2.8

Dữ liệu đơn hàng ...................................................................................... 55

4.3

5

Thiết kế giao diện ............................................................................................ 56

4.3.1

Giao diện của người dùng ........................................................................ 56

4.3.2

Giao diện của admin................................................................................. 66

CHƯƠNG 5 - KẾT LUẬN................................................................................... 78
5.1

Đánh giá .......................................................................................................... 78

5.1.1

Thuận lợi .................................................................................................. 78

5.1.2

Khó khăn .................................................................................................. 78

5.2

Kết quả đạt được ............................................................................................. 78

5.2.1

Ưu điểm .................................................................................................... 78

5.2.2

Nhược điểm .............................................................................................. 78

5.3
6

Thiết kế dữ liệu ............................................................................................... 49

Hướng phát triển ............................................................................................. 79

TÀI LIỆU THAM KHẢO .................................................................................... 79


DANH MỤC BẢNG
Bảng 3-1 Mô tả yêu cầu chức năng của ứng dụng ....................................................... 19
Bảng 3-2 Mô tả thành phần kiến trúc back-end ........................................................... 23
Bảng 4-1 Mô tả use case đăng kí .................................................................................. 26
Bảng 4-2 Mơ tả use case xác thực tài khoản ................................................................ 27
Bảng 4-3 Mô tả use case đăng nhập ............................................................................. 27
Bảng 4-4 Mô tả use case quên mật khẩu ...................................................................... 28
Bảng 4-5 Mô tả use case quên mật khẩu ...................................................................... 29
Bảng 4-6 Mô tả use case chỉnh sửa thông tin cá nhân.................................................. 29
Bảng 4-7 Mô tả use case tìm kiếm sách ....................................................................... 30
Bảng 4-8 Mơ tả use case thêm sách vào giỏ hàng ........................................................ 30
Bảng 4-9 Mô tả use case mua hàng .............................................................................. 31
Bảng 4-10 Mô tả use case xác nhận đơn hàng ............................................................. 32
Bảng 4-11 Mô tả use case đánh giá nhận xét ............................................................... 32
Bảng 4-12 Mơ tả use case quản lí đơn hàng ................................................................. 33
Bảng 4-13 Mô tả use case thêm sách mới .................................................................... 33
Bảng 4-13 Mô tả use case nhập sách ............................................................................ 34

Bảng 4-14 Mô tả use case cập nhật sách ...................................................................... 35
Bảng 4-13 Mơ tả use case xóa sách .............................................................................. 36
Bảng 4-15 Mơ tả use case thêm thể loại ....................................................................... 36
Bảng 4-16 Mô tả use case chỉnh sửa thể loại ............................................................... 37
Bảng 4-17 Mơ tả use case xóa mềm thể loại ................................................................ 38
Bảng 4-18 Mô tả use case khôi phục thể loại đã xóa ................................................... 38
Bảng 4-19 Mơ tả use case xóa cứng thể loại ................................................................ 39
Bảng 4-20 Mô tả use case thêm tác giả ........................................................................ 40
Bảng 4-21 Mô tả use case chỉnh sửa thông tin tác giả ................................................. 41
Bảng 4-22 Mô tả use case xóa mềm tác giả ................................................................. 41
Bảng 4-23 Mơ tả use case khơi phục tác giả đã xóa.................................................... 42
Bảng 4-24 Mơ tả use case xóa cứng tác giả ................................................................. 43
Bảng 4-25 Mô tả use case thêm mã giảm giá ............................................................... 43
Bảng 4-26 Mô tả use case chỉnh sửa thông tin mã giảm giá ........................................ 44
Bảng 4-27 Mô tả use case xóa thơng tin mã giảm giá .................................................. 45
Bảng 4-28 Mô tả use case xác nhận đơn hàng ............................................................. 45
Bảng 4-29 Mô tả use case hủy đơn hàng ...................................................................... 46
Bảng 4-30 Mô tả use case xem chi tiết đơn hàng ......................................................... 47
Bảng 4-31 Mô tả use case xác thưc đơn đặt hàng ........................................................ 47
Bảng 4-32 Mô tả use case báo cáo ............................................................................... 48
Bảng 4-33 Danh sách các đối tượng trong hệ thống .................................................... 50
Bảng 4-34 Mô tả dữ liệu người dùng ........................................................................... 51


Bảng 4-35 Mô tả dữ liệu sách ....................................................................................... 52
Bảng 4-36 Mô tả dữ liệu thể loại .................................................................................. 53
Bảng 4-37 Mô tả dữ liệu tác giả ................................................................................... 53
Bảng 4-38 Mô tả dữ liệu đánh giá ................................................................................ 54
Bảng 4-39 Mô tả giữ liệu mã giảm giá ......................................................................... 55
Bảng 4-40 Mô tả dữ liệu đơn đặt hàng ......................................................................... 56

DANH MỤC HÌNH ẢNH
Hình 2-1 Cấu trúc cơ bản của một dự án sử dụng ExpresJs ......................................... 11
Hình 3-1 Cấu trúc thư mục Frontend............................................................................ 20
Hình 3-2 Cấu trúc thư mục Pages ................................................................................. 21
Hình 3-3 Cấu trúc thư mục Component ....................................................................... 22
Hình 3-4 Cấu trúc thư mục Redux................................................................................ 23
Hình 4-1 Sơ đồ use case ............................................................................................... 25
Hình 4-2 Các đối tượng trong hệ thống ........................................................................ 49
Hình 4-3 Màn hình homepage cho user ....................................................................... 57
Hình 4-4 Màn hình homepage cho user ....................................................................... 57
Hình 4-5 Giao diện đăng kí .......................................................................................... 58
Hình 4-6 Giao diện đăng nhập...................................................................................... 58
Hình 4-7 Trang thể loại ................................................................................................ 59
Hình 4-8 Trang chi tiết sách 1 ...................................................................................... 60
Hình 4-9 Trang chi tiết sách 2 ...................................................................................... 60
Hình 4-10 Trang chi tiết sách 3 .................................................................................... 61
Hình 4-11 Trang chi tiết sách 4 .................................................................................... 61
Hình 4-12 Trang đơn hàng ........................................................................................... 62
Hình 4-13 Trang thơng tin cá nhân............................................................................... 63
Hình 4-14 Trang khơi phục mật khẩu 1........................................................................ 63
Hình 4-15 Trang khơi phục mật khẩu 2........................................................................ 64
Hình 4-16 Trang giỏ hàng ............................................................................................ 64
Hình 4-17 Màn hình thanh tốn 1................................................................................. 65
Hình 4-18 Màn hình thanh tốn 2................................................................................. 65
Hình 4-19 Trang admin 1 ............................................................................................. 66
Hình 4-20 Trang admin 2 ............................................................................................. 67
Hình 4-21 Trang thêm sách .......................................................................................... 68
Hình 4-22 Trang xem sách ........................................................................................... 68
Hình 4-23 Giao diện chỉnh sửa sách ............................................................................. 69

Hình 4-24 Trang nhập hàng .......................................................................................... 69
Hình 4-25 Giao diện form nhập sách ........................................................................... 70


Hình 4-26 Trang quản lí thể loại .................................................................................. 70
Hình 4-27 Trang quản lí tác giả .................................................................................... 71
Hình 4-28 Trang quản lí đơn hàng ............................................................................... 72
Hình 4-29 Giao diện xem chi tiết đơn hàng ................................................................. 72
Hình 4-30 Giao diện xác nhận và từ chối đơn hàng ..................................................... 73
Hình 4-31 Trang xác thực đơn hàng của khách chưa đăng kí tài khoản ...................... 74
Hình 4-32 Giao diện chi tiết đơn hàng của khách hàng chưa đăng kí tài khoản .......... 74
Hình 4-33 Giao diện xác thực đơn hàng của khách hàng chưa đăng kí tài khoản ....... 75
Hình 4-34 Trang quản lí mã khuyến mãi...................................................................... 76
Hình 4-35 Giao diện thêm mới mã khuyến mãi ........................................................... 76
Hình 4-36 Giao diện chỉnh sửa thơng tin mã khuyến mãi ............................................ 77
Hình 4-37 Giao diện xóa mã giảm giá.......................................................................... 77


Chương 1 - TỔNG QUAN VỀ ĐỀ TÀI
1.1 Giới thiệu về đề tài
1.1.1 Tầm quan trọng sách
Từ trước đến nay sự phát triển của nhân loại luôn gắn liền với sách. Sách được con
người sử dụng để lưu giữ lại những kiến thức và truyền lại cho các thế hệ sau. Sách
chứa đựng những thông tin, giá trị vật chất và tinh thần của nhân loại, chứa đựng những
tình cảm vào trong những vấn đề của cuộc sống. Mỗi cuốn sách lại là những chủ đề,
lĩnh vực khác nhau nhưng đều với mục đích hướng tới cho bạn đọc những tri thức mới,
giá trị nhân loại.
Sách chứa đựng nguồn kiến thức khổng lồ và giúp con người giao lưu với thế giới
bên ngoài, tiếp cận với nền văn minh của nhân loại, nhờ có sách mà xã hội mới có thể
phát triển được. Cho dù xã hội có phát triển tới đâu thì những giá trị to lớn mà sách đem

lại cho con người vẫn khơng thể nào xóa bỏ được.
Việc gìn giữ những giá trị lịch sử cho đời sau và là nguồn tri thức quý giá thì chỉ có
sách mới có thể đem lại cho con người được. Sách đóng vai trị tất yếu trong q trình
phát triển của xã hội loài người.
1.1.2 Lý do chọn đề tài
Hiện nay với sự phát triển vượt bâc của internet cũng như hệ thống vận tải logictics
thì các ngành nghề kinh doanh, thương mại điện tử đang ngày càng phát triển. Các cơng
ti, tập đồn sẵn sàng chi lượng lớn tiền vào ngành này. Hệ thống thương mại điện tử
hiện nay có nhiều sự vượt trội hơn so với các ngành nghề thương mại truyền thống. Chỉ
với vài thao tác đơn giản trên các thiết bị thông minh người dùng dễ dàng lựa chọn các
sản phẩm mình mong muốn. chúng sẽ được vận chuyển đến tận nhà của họ.
Đi cùng với sự phát triển của xã hội, nhu cầu về sách ngày càng lớn. Sách không chỉ
được sử dụng để phục vụ mục đích học tập và tra cứu thơng tin mà sách cịn được sử
dụng cho mục đích giải trí. Nhu cầu về sách ngày càng lớn, các hình thức kinh doanh
1


sách truyền thống càng bộc lộ nhiều điểm yếu như nguồn sách thiếu phong phú, khó
tiếp cận đối với các khách hàng ở xa. Nắm bắt được các yếu tố trên nhóm chúng em
quyết định lựa chọn để tài “Xây dựng website bán sách” để phục vụ cho nhu cầu tìm
kiếm và mua các đầu sách chính thống có bản quyền của sách hàng..
1.2 Khảo sát hiện trạng
Hiện nay trên thị trường có nhiều website bán sách online như “fahasa.com,
cachep.vn, bookbuy.vn” nhưng hầu hết các website vẫn chưa tập trung hoàn toàn vào
việc bán sách mà thường kết hợp với một vài ngành hàng khác như đồ chơi, văn phòng
phẩm. Do vậy nhóm quyết định xây dựng một website chỉ chuyên phục vụ khách hàng
tìm kiếm, mua sách.
1.3 Đối tượng nghiên cứu
Đồ án này hướng đến nghiên cứu các đối tượng sau:
❖ Các công nghệ:

o NodeJs
o ExpressJs
o JSON Web Token
o MongoDB
o Cloundinary
o ReactJs
o Redux
o Ant design
o Tailwind css
❖ Đối tượng trong phạm vi đề tài hướng đến:

o Các nhà sách mong muốn mở rộng việc kinh doanh của mình sang hình thức
online.

o Các khách hàng mong muốn tìm kiếm, tra cứu mà mua sách theo hình thức
online

2


1.4 Phạm vi nghiên cứu
Đề tài tập trung vào nghiên cứu về ứng dụng website bán sách, phục vụ việc kinh
doanh online của các nhà sách.
1.5 Phương pháp nghiên cứu
Nhóm đã sử dụng các phương pháp nghiên cứu:
-

Phương pháp đọc tài liệu.

-

Phương pháp phân tích các ứng dụng hiện có.

1.6 Nhiệm vụ của đề tài
Đề tài “Website bán sách” là một ứng dụng chạy trên nền web đáp ứng các u cầu
sau:
-

Cung cấp đầy đủ các tính năng tìm kiếm, mua bán sách cho nhiều đối tượng
khách hàng khác nhau(có hoặc chưa có tài khoản).

-

Cung cấp đầy đủ các tính năng phục vụ việc kiểm sốt, quản lí tài ngun và
hoạt động kinh doanh của nhà sách.

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

Tìm hiểu cách xây dựng ứng dụng web

-

Tìm hiểu về kiến trúc hệ thống, những công nghệ liên quan

-

Xây dựng thành công ứng dụng website bán sách

3

2

Chương 2 - CƠ SỞ LÝ THUYẾT

2.1 Tổng quan về ReactJs
2.1.1 Giới thiệu
React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu
hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến
một mơ hình MVC hồn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp
với những thư viện Javascript khác.
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những
thành phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại
được. React được sử dụng tại Facebook trong production, và instagram được viết hoàn
toàn trên React.
Một trong những điểm hấp dẫn của React là thư viện này khơng chỉ hoạt động trên
phía client, mà cịn được render trên server và có thể kết nối với nhau. React so sánh sự
thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi
nhất trên DOM.
2.1.2 Cách hoạt động
Với React, chúng ta hồn tồn có thể viết code HTML bằng Javascript. Khơng giống
như những DOM element của trình duyệt, React element là những “plain object” (đối
tượng đơn giản). React DOM giữ vai trò cập nhật DOM để phù hợp với các React
element.
❖ Cách render một element
Một ứng dụng thường chỉ có một DOM node gốc. Để render một React element vào
node gốc ta cần tuyền tất cả vào hàm ReactDOM.render().
❖ Cách cập nhật một element
Tất cả React element đều là immutable. Khi tạo ra một element, bạn không thể thay

đổi các thành phần con hoặc thuộc tính của nó. Cách duy nhất để cập nhật nó là truyền
nó vào hàm ReactDOM.render()
React sẽ so sánh element và các thành phần con của nó với cái trước đó và chỉ cập
nhật những node cần thiết lên DOM thật
4


2.1.3 Ưu nhược điểm
2.1.3.1 Ưu điểm
❖ Dễ tiếp cận
React là thư viện khá dễ tiếp cận và sử dụng. Trong mơ hình MVC (ModelView-control) thì React đảm nhận nhiệm vụ ‘V’ (View). Nó hoạt động bằng cách
kết hợp HTML và Javascript thuần, vì thế cú pháp trong React khá là dễ hiểu.
❖ Tăng tốc độ tải trang với Virtual DOM
Việc sử dụng Real DOM cấu trúc dạng tree với kích thước lớn, khi thay đổi
gía trị, cây DOM được cập nhật lại toàn bộ gây tốn thời gian và rủi ro.
Để giải quyêt vấn đề trên, React sử dụng Virual DOM (DOM ảo), mỗi khi
render thì React sẽ tạo ra một DOM ảo và lưu nó vào trong bộ nhớ, khi thay đổi
state của component thì DOM ảo sẽ được cập nhật lại và so sách với DOM ảo cũ
(được đồng bộ với DOM thật trước đó) bằng thuật tốn ‘diffing ‘, để tìm ra những
node cần thay đổi và cuối cùng cập nhật lại những node đó trên DOM thật. Vì
thế quá trình cập nhật lại cây DOM sẽ không bị gián đoạn và làm chậm phản hồi,
giúp website chạy mượt mà và nhanh hơn.
❖ Tái sử sụng dễ dàng với các Component
React giúp lập trình viên hồn tồn có thể sử dụng lại các component đã khai
báo trước đó để phát triển các ứng dụng khác nhau có cùng chứ năng. Đây là một
điểm mạnh cũng như lợi thế của ReactJS giúp các lập trình viên có thể dễ thở
hơn trong các dự án.
❖ Viết component dễ dàng với JSX
Khi nhắc đến React ta không thể bỏ qua JSX (Javascript + XML), đây là cú
pháp mở rộng gần giống XML, người dùng có thể lập trình React bằng cú pháp

của XML thay vì sử dụng Javascript mà khơng làm thay đổi ý nghĩa của
Javascript, nó giúp chúng ta dễ dàng định nghĩa và quản lý các component phức
tạp cũng như việc dễ dàng đọc hiểu được ý nghĩa của các component hơn.
❖ Thân thiện với SEO

5


Một vai trò quan trọng trong tối ưu SEOlà tốc độ tải trang. React có thể tăng
tốc dộ tải trang của ứng dụng thơng qua Virtual DOM, nên rất có hiệu quả với
việc cải thiện kết quả SEO.
Mặt khác, React có khả năng tạo ra các giao diện người dùng có thể truy cập
vào các cơng cụ tìm kiếm. Tuy nhiên React không thể cải thiện 100% khả năng
SEO của trang web, còn cần phải phụ thuộc vào các thư viện bổ sung, nội dung
trang web, định tuyến, tương tác người dùng, ….
❖ Dễ tích hợp và kiểm thử
Như đã giới thiệu ở trên, React chỉ là một thư viện giúp tạo ra giao diện người
dùng (View) nên có thể dễ dàng tích hợp vào các framework khác như Angular,
BackbooneJS, ….
React được thiết kế với việc tạo ra các component riêng lẻ, nên việc kiểm thử
UI, chức năng cũng được đơn giản hóa theo từng component. Bằng cách tích hợp
các thư viện kiểm thử như Jest, Enzyme, React Testing Library … sẽ giúp cho
việc kiểm thử dễ dàng hơn.
2.1.3.2 Nhược điểm
❖ Reactjs chỉ phục vụ cho tầng View. React chỉ là View Library nó khơng phải là
một MVC framework như những framework khác. Đây chỉ là thư viện của
Facebook giúp render ra phần view. Vì thế React sẽ khơng có phần Model và
Controller, mà phải kết hợp với các thư viện khác. React cũng sẽ khơng có 2way binding hay là Ajax.
❖ Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần phải cấu
hình lại.

❖ React khá nặng nếu so với các framework khác React có kích thước tương tương
với Angular (Khoảng 35kb so với 39kb của Angular). Trong khi đó Angular là
một framework hồn chỉnh.
❖ Khó tiếp cận cho người mới học Web.

6


2.2 Tổng quan về Redux Toolkit
2.2.1 Giới thiệu
Redux là công cụ quản lý state phổ biến nhưng có nhiều trang cãi vì redux dài
dịng và khó sử dụng. Vì để tạo ra một store hồn chỉnh thì phải qua khá nhiều bước,
tạo nhiều file với các đoạn code lặp lại khá nhiều, ngồi ra redux khơng hề xây dựng
một quy chuẩn rõ ràng cho việc viết logic, cũng như ngoài redux thì đơi khi ta cần cài
đặt thêm một số thư viện nữa như middleware, selectors... thì mới có thể viết hoàn
chỉnh logic quản lý state.
Nên là redux-toolkit (là một package) sinh để giải quyết phần lớn những vấn đề kể
trên, được phát triển bởi chính chủ reduxjs team, giúp chúng ta viết code redux nhanh
gọn, hoàn chỉnh theo một quy chuẩn thống nhất.
2.2.2 Cách sử dụng
Cài đặt redux toolkit bằng npm install @reduxjs/toolkit hoặc yarn add
@reduxjs/toolkit.

Tạo slice file:
-

Khai báo createSlice của @reduxjs/toolkit.

-

Tạo 1 initialState: vai trò là khung dữ liệu của state và giữ giá trị khởi tạo.

-

Sử dụng createSlice định nghĩa các reducer thao tác với initialState.

-

Exports ra các action là các function viết trong createSlice reducer.

Tạo file store.js, khai báo các reducer và bỏ các reducer vào rootReducer.
Sử dụng redux persist để tránh mất dữ liệu state trong redux khi refresh page.
Sử dụng các state và dispatch state bằng 2 hook của react-redux là useSelector và
useDispatch.
2.2.3 Ưu điểm
Redux toolkit giúp viết redux dễ dàng hơn, nhanh hơn và gọn hơn, có quy chuẩn rõ
ràng, dễ tiếp cận.

7


2.3 Tổng quan về Ant design
2.3.1 Giới thiệu
Ant design là tập hợp các components của React được xây dựng theo chuẩn thiết kế
của Ant UED Team. Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các
component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon,
DatePicket, …. Bên cạnh đó Ant cũng có những component riêng thú vị, như
LocaleProvider cho phép thay đổi ngôn ngữ trên toàn ứng dụng.
2.3.2 Cách hoạt động
Chỉ cần tải thư viện Ant design về bằng lệnh npm install antd là có thể sử dụng các

component của ant và có thể style lại cho nó.
2.3.3 Ưu nhược điểm
2.3.3.1 Ưu điểm
Vì là thư viện UI nên sử dụng Ant giúp chúng ta xây dựng trang giao diện nhanh
hơn rất nhiều, hơn nữa các component trong ant được hỗ trợ nhiều api nên giúp người
dùng dễ dàng styles lại theo ý muốn, đặc biệt là ui component của ant không màu mè
mà đẹp, gọn gàng, bắt mắt dễ kết hợp với bất kì thành phần ui nào trong giao diện của
chúng ta.
2.3.3.2 Nhược điểm
Ant design khá nặng, nhiều document còn tiếng trung đặc biệt là với Ant design pro
nên gây khó khăn cho lập trình viên tìm hiểu trong document.
2.4 Tổng quan về NodeJs
2.4.1 Giới thiệu
NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaSript, được xây
dựng trên V8 JavaScript engine của Chrome - V8 thực thi mã JavaScript bên ngồi trình
duyệt. Nó được tạo ra vào năm 2009 đi kèm với một lợi thế chính - NodeJS cho phép
thực hiện lập trình bất đồng bộ.
NodeJS là một nền tảng được xây dựng trên JavaScript runtime của Chrome với mục
đích xây dựng các ứng dụng mạng nhanh chóng và có thể mở rộng được một cách dễ
8


dàng hơn. NodeJS sử dụng mơ hình I/O lập trình theo sự kiện, non-blocking, do đó
nodeJS khá gọn nhẹ và hiệu quả - cơng cụ hồn hảo cho các ứng dụng chuyên sâu về
dữ liệu theo thời gian thực chạy trên các thiết bị phân tán.
NodeJS là môi trường runtime mã nguồn mở đa nền tảng, được sử dụng để phát triển
các ứng dụng mạng và ứng dụng server-side. Các ứng dụng NodeJS được viết bằng
JavaScript và có thể chạy trong NodeJS runtime trên OS X, Microsoft Windows và
Linux.
NodeJS cũng cung cấp một thư viện bao gồm rất nhiều các module JavaScript khác

nhau nhằm đơn giản hóa việc phát triển các ứng dụng web, qua đó giảm thiểu tình trạng
sử dụng quá nhiều Node.js.
2.4.2 Khả năng sử dụng
Là một nền tảng phát triển ứng dụng mạnh mẽ, Nodejs có thể thỏa mãn mọi nhu cầu
lập trình, phát triển ứng dụng. Các chun gia trong lĩnh vực lập trình, cơng nghệ khuyên
dùng Nodejs khi phát triển các ứng dụng như Websocket server, Fast File Upload Client,
Ad Server, Cloud Services, RESTful API, Any Real-time Data Application, ….
2.4.3 Thành phần
2.4.3.1 Nodejs module
Ta có thể coi một module của Node.js như một thư viện của JavaScript, là một tập
các hàm ta có thể thêm vào ứng dụng để sử dụng. Node.js có một tập các module có sẵn
mà ta có thể sử dụng mà khơng cần cài đặt. Ngồi ra ta cũng có thể tự viết các module
riêng cho mình.
2.4.3.2 Nodejs NPM
NPM là cơng cụ quản lý package cho Node.js. Sử dụng NPM cho phép chúng ta tải
các package/module của node về để sử dụng, nó đã được cài đặt khi ta cài đăt node.
2.4.3.3 Nodejs event
Node.js thích hợp cho các ứng dụng dựa trên event. Tất cả mọi hành động trên server
đều là một event. Node.js có một module có sẵn gọi là Events cho phép tạo, bắn ra, và
lắng nghe event mà ta tạo ra.

9


2.4.4 Lợi ích của
2.4.4.1 Ưu điểm
❖ Ứng dụng Nodejs phần đơng đều được viết bằng ngơn ngữ lập trình javascript –
một ngôn ngữ thông dụng, được sử dụng rộng rãi và chạy được trên nhiều trình
duyệt, nền tảng, hệ điều hành, ….
❖ Nodejs khá nhẹ nhưng lại hiệu quả nhờ vào cơ chế non-blocking I/O, chạy đa

nền tảng trên Server và dùng Event-driven.
❖ Tương thích với nhiều thiết bị. Bạn có thể chạy các ứng dụng phát triển bởi
Nodejs trên bất cứ thiết bị nào, dù là Mac, Window, Linux,…
❖ Cộng đồng Nodejs khá lớn và được cung cấp miễn phí cho người dùng.
❖ Ứng dụng NodeJS có khả năng chạy đa nền tảng, thiết bị, đồng thời đáp ứng
được yêu cầu về thời gian thực.
❖ Node.js có tốc độ cực kỳ nhanh, xử lý được nhu cầu sử dụng của lượng khách
truy cập ‘khổng lồ’ trong thời gian cực ngắn.
❖ Ứng dụng phát triển bởi Node.js có khả năng xử lý nhiều yêu cầu truy cập cùng
lúc, ‘cứu’ website của bạn khỏi nguy cơ bị ‘sập’ khi lượng truy cập quá nhiều.
2.4.4.2 Nhược điểm
❖ NodeJS còn nhiều hạn chế khi xây dựng ứng dụng nặng, tốn tài nguyên như
encoding video, convert file, decoding encryption…. Bởi vì NodeJS được viết
bằng C++ & Javascript, nên phải thơng qua thêm 1 trình biên dịch của NodeJS
do vậy sẽ tốn thời gian hơn.
❖ Thiếu sự kiểm duyệt chất lượng các module NodeJS
2.4.5 Trường hợp sử dụng
❖ Dùng chung một ngôn ngữ: NodeJS sẽ là lựa chọn chính xác để sử dụng nếu
dự án của bạn liên quan đến những thứ như MongoDB, ExpressJs, AngularJs,
BackBoneJs, ReactJs, … Điều này giúp chúng ta dễ dàng có hệ thống hồn tồn
sử dụng JavaScript.
❖ Realtime: NodeJS rất tốt cho các ứng dụng yêu cầu realtime.

10


❖ Giao thức khác http: NodeJS hỗ trợ xây dựng những ứng dụng đòi hỏi các giao
thức kết nối khác chứ khơng phải chỉ có http. Với việc hỗ trợ giao thức tcp,
nodeJS cho phép bạn có thể xây dựng bất kỳ một giao thức custom nào đó một
cách dễ dàng.

2.5 Tổng quan về ExpressJs
2.5.1 Giới thiệu
ExpressJS là một framework ứng dụng web có mã nguồn mở và miễn phí được
xây dựng trên nền tảng Node.js. ExpressJS được sử dụng để thiết kế và phát triển các
ứng dụng web một cách nhanh chóng. Để hiểu ExpressJS, người dùng chỉ cần phải
biết JavaScript, do đó nên việc xây dựng các ứng dụng web và API trở nên đơn giản
hơn đối với các lập trình viên và nhà phát triển đã thành thạo JavaScript trước đó.
2.5.2 Cấu trúc của ExpressJs
Cấu trúc cơ bản của một dự án sử dụng ExpressJs

Hình 2-1 Cấu trúc cơ bản của một dự án sử dụng ExpresJs

Vai trò các thành phần trong một dự án sử dụng ExpressJs
-

Root
+ App.js chứa các thơng tin về cấu hình, khai báo, các định nghĩa, ... để
ứng dụng của chúng ta chạy ok.
+ package.json chứa các package cho ứng dụng chạy.

11