Trang 1

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

Đề tài:

WEBSITE THƯƠNG MẠI ĐIỆN TỬ
CHUYÊN MUA BÁN GIÀY
Giảng viên hướng dẫn :

Huỳnh Tuấn Anh

Sinh viên thực hiện:

Nguyễn Đức Chí Đạt

19521334

Nguyễn Ngọc Phúc

19520224

TP. Hồ Chí Minh, tháng 6 năm 2022


Trang 2

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 1

Đề tài:

WEBSITE THƯƠNG MẠI ĐIỆN TỬ
CHUYÊN MUA BÁN GIÀY
Giảng viên hướng dẫn :

Huỳnh Tuấn Anh

Sinh viên thực hiện:

Nguyễn Đức Chí Đạt

19521334

Nguyễn Ngọc Phúc

19520224

TP. Hồ Chí Minh, tháng 6 năm 2022


Trang 3

Lời mở đầu
Đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến tập thể quý Thầy Cô
Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô khoa

Công Nghệ Phần Mềm đã giúp cho nhóm chúng em có những kiến thức cơ bản làm nền
tảng để thực hiện đề tài này.
Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới Thầy
Huỳnh Tuấn Anh. Đã giúp nhóm chúng em hồn thành tốt báo cáo mơn học của mình.
Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận dụng những
kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những
kiến thức mới. Từ đó, nhóm chúng em vận dụng tối đa những gì đã thu thập được để
hồn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, nhóm chúng
em khơng tránh khỏi những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được
những sự góp ý từ phía các Thầy Cơ nhằm hồn thiện những kiến thức mà nhóm chúng
em đã học tập và là hành trang để nhóm chúng em thực hiện tiếp các đề tài khác trong
tương lai.
Nhóm em xin chân thành cảm ơn quý Thầy Cô!


Trang 4

NHẬN XÉT CỦA GIẢNG VIÊN
………………………………………………………………………………………………....
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………

…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………


Trang 5

Mục lục
Danh mục hình ảnh

10

Danh mục bảng biểu

12

Chương I

16


Tổng quan

1.

Lý do chọn đề tài

16

2.

Mục tiêu

17

3.

Phạm vi

17

4.

Người dùng

18

5.

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


18

Chương II Cơ sở lý thuyết & Tổng quan công nghệ

19

1.

Giới thiệu về React JS

19

2.

Giới thiệu về MongoDB

21

3.

4.

2.1.

Các đặc điểm cơ bản của MongoDB

21

2.2.


Ưu nhược điểm của MongoDB

22

2.2.1.

Ưu điểm

22

2.2.2.

Nhược điểm

24

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

Kiến trúc hệ thống

25

3.2.

Mơ hình kiến trúc hệ thống

25

Mô tả chi tiết thành phần trong hệ thống


Chương III
1.

25

Phân tích thiết kế ứng dụng

Yêu cầu nghiệp vụ

26
27
27


Trang 6

1.1.

Danh sách yêu cầu nghiệp vụ

27

1.2.

Nhập sản phẩm

28

1.2.1.


1.3.
1.3.1.

2.

Biểu mẫu 1

Lập hóa đơn bán hàng
Biểu mẫu 2

Use case
2.1.

28

28
28

29

Mơ hình Use Case

29

2.1.1.

Use case tổng quát

29


2.1.2.

Use case quản lý sản phẩm

30

2.1.3.

Use case đăng nhập

30

2.1.4.

Use case quản lý khách hàng

31

2.1.5.

Use case quản lý đơn hàng

31

2.1.6.

Use case quản lý doanh thu

32


2.1.7.

Use case mua hàng

32

2.1.8.

Use case bán hàng

33

2.1.9.

Use case quản lý tài khoản

33

2.2.

Danh sách các Actor

34

2.3.

Danh sách các Use case

35


2.3.1.

Danh sách

35

2.3.2.

Đăng nhập admin

35

2.3.3.

Đăng nhập customer

37

2.3.4.

Quản lý sản phẩm

38

2.3.5.

Thêm thơng tin

40


2.3.6.

Sửa thơng tin

42

2.3.7.

Xóa thơng tin

43

2.3.8.

Tìm kiếm thông tin

45

2.3.9.

Báo cáo doanh thu

46

2.3.10.

Quản lý khách hàng

47



Trang 7

2.3.10.1. Thêm khách hàng

47

2.3.10.2. Cập nhật thông tin khách hàng

49

2.3.11.

52

2.3.11.2. Đổi mật khẩu

54

2.3.11.3. Hiển thị danh sách sản phẩm đã theo dõi

55

2.3.11.4. Hiển thị lịch sử mua hàng, bán hàng

57

Quản lý đơn hàng


58

2.3.12.1. Tạo đơn hàng

58

Activity

61

Cập nhật sản phẩm

61

3.1.1.

Sơ đồ trạng thái

61

3.1.2.

Bảng mô tả các trạng thái

62

3.1.

3.2.


Mua hàng(Customer)

62

3.2.1.

Sơ đồ trạng thái

62

3.2.2.

Bảng mô tả các trạng thái

63

3.3.

Bán hàng ( Customer)

64

3.3.1.

Sơ đồ trạng thái

64

3.3.2.


Bảng mô tả các trạng thái

64

3.4.

4.

52

2.3.11.1. Chỉnh sửa thông tin

2.3.12.

3.

Quản lý tài khoản (Customer)

Báo cáo doanh thu

65

3.4.1.

Sơ đồ trạng thái

65

3.4.2.


Bảng mô tả các trạng thái

65

Sơ đồ lớp

67

4.1.

Sơ đồ lớp (Mức phân tích)

67

4.2.

Danh sách các lớp đối tượng và quan hệ

68

4.3.

Mô tả chi tiết từng đối tượng

68

4.3.1.

Categories


68


Trang 8

4.3.1.1. Danh sách thuộc tính

68

4.3.1.2. Danh sách các tính năng

68

4.3.2.

Products

4.3.2.1. Danh sách thuộc tính

69

4.3.2.2. Danh sách các tính năng

69

4.3.3.

Follows

70


4.3.3.1. Danh sách thuộc tính

70

4.3.3.2. Danh sách các phương thức

70

4.3.4.

Sales

71

4.3.4.1. Danh sách thuộc tính

71

4.3.4.2. Danh sách các phương thức

71

4.3.5.

Orders

72

4.3.5.1. Danh sách thuộc tính


72

4.3.5.2. Danh sách các phương thức

72

4.3.6.

Users

73

4.3.6.1. Danh sách thuộc tính

73

4.3.6.2. Danh sách các phương thức

73

4.3.7.

PortfolioItem

4.3.7.1. Danh sách thuộc tính
4.3.8.

5.


69

Authenticates

74
74
74

4.3.8.1. Danh sách thuộc tính

74

4.3.8.2. Danh sách các phương thức

75

Thiết kế CSDL

76

5.1.

Sơ đồ logic

76

5.2.

Mô tả chi tiết các thành phần trong sơ đồ logic


77

5.2.1.

User

77

5.2.2.

Admin

77

5.2.3.

Customer

78

5.2.4.

Categories

78

5.2.5.

Product


78


Trang 9

6.

5.2.6.

Orders

79

5.2.7.

Sales

79

Thiết kế giao diện

80

6.1.

Danh sách các màn hình

80

6.2.


Mơ tả chi tiết các màn hình

81

6.2.1.

Signin (Admin)

81

6.2.2.

SlideBar (Admin)

82

6.2.3.

NavBar (Admin)

83

6.2.4.

Dashboard (Admin)

84

6.2.5.


Customer (Admin)

85

6.2.6.

AddCustomer (Admin)

86

6.2.7.

FixCustomer (Admin)

87

6.2.8.

Products (Admin)

88

6.2.9.

AddProduct (Admin)

89

6.2.10.


FixProduct (Admin)

90

6.2.11.

Orders (Admin)

91

6.2.12.

Analytics (Admin)

92

6.2.13.

Login (Customer)

93

6.2.14.

Signup (Customer)

94

6.2.15.


Navbar (Customer)

95

6.2.16.

Home (Customer)

97

6.2.17.

Product (Customer)

100

6.2.18.

ProductDetail (Customer)

102

6.2.19.

ViewAsk (Customer)

104

6.2.20.


ViewBid (Customer)

105

6.2.21.

ViewSale (Customer)

106

6.2.22.

Buy select (Customer)

107

6.2.23.

Sell select (Customer)

108

6.2.24.

Address (Customer)

109

6.2.25.


Sell (Customer)

110


Trang 10

6.2.26.

Profile (Customer)

111

6.2.27.

ResetPasswrod (Customer)

112

6.2.28.

Buying Guide (Customer)

113

6.2.29.

Selling Guide (Customer)


114

6.2.30.

Following (Customer)

115

7.

Component diagram

116

8.

Deploy diagram

116

Chương IV

Tổng quan

116

1.

Kết quả


116

2.

Hạn chế

117

3.

Hướng phát triển

117

Bảng phân công công việc

118

Tài liệu tham khảo

118

Danh mục hình ảnh
Hình 1 Khả năng mở rộng Horizontal Scalability

19

Hình 3 Chi tiết thành phần trong hệ thống

21


Hình 4 Biểu mẫu nhập sản phẩm

23

Hình 5 Biểu mẫu hóa đơn bán hàng

23

Hình 8 Use case tổng qt

24

Hình 9 Use case quản lý sản phẩm

25

Hình 10 Use case đăng nhập

25

Hình 11 Use case quản lý khách hàng

26

Hình 12 Use case quản lý đơn hàng

26



Trang 11

Hình 13 Use case quản lý doanh thu

27

Hình 14 Use case mua hàng

27

Hình 15 Use case bán hàng

28

Hình 16 Use case quản lý tài khoản

28

Hình 17 Sơ đồ trạng thái cập nhật sản phẩm

56

Hình 18 Sơ đồ trạng thái mua hàng

58

Hình 19 Sơ đồ trạng thái bán hàng

59


Hình 20 Sơ đồ trạng thái báo cáo doanh thu

61

Hình 21 Sơ đồ lớp (mức phân tích)

63

Hình 22 Sơ đồ logic

72

Hình 23 Giao diện đăng nhập Admin

77

Hình 24 Giao diện thanh SlideBar

79

Hình 25 Giao diện NavBar

80

Hình 26 Giao diện trang chủ admin

81

Hình 27 Giao diện trang chủ admin


81

Hình 28 Giao diện trang chủ admin

82

Hình 29 Giao diện quản lý khách hàng

83

Hình 30 Giao diện thêm khách hàng

84

Hình 31 Giao diện cập nhật khách hàng

85

Hình 32 Giao diện Tab sản phẩm

86

Hình 33 Giao diện thêm sản phẩm

87

Hình 34 Giao diện cập nhật sản phẩm

89


Hình 35 Giao diện Tab hóa đơn

90

Hình 36 Giao diện Tab Biểu đồ

92

Hình 37 Giao diện đăng nhập khách hàng

93

Hình 38 Giao diện đăng ký khách hàng

94

Hình 39 Giao diện navbar khách hàng

95


Trang 12

Hình 40 Giao diện navbar khách hàng sau khi đăng nhập

95

Hình 41 Giao diện navbar khách hàng

95


Hình 42 Giao diện trang home

98

Hình 43 Giao diện sản phẩm

100

Hình 44 Giao diện chọn chi tiết sản phẩm

102

Hình 45 Giao diện xem giá bán hàng

104

Hình 46 Giao diện xem giá mua hàng

105

Hình 47 Giao diện xem đơn hàng

106

Hình 48 Giao diện mua hàng

107

Hình 49 Giao diện bán hàng


108

Hình 50 Giao diện địa chỉ

109

Hình 51 Giao diện tìm bán hàng

110

Hình 52 Giao diện thơng tin người dùng

111

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

112

Hình 54 Giao diện lịch sử mua hàng

113

Hình 55 Giao diện lịch sử bán hàng

114

Hình 56 Giao diện danh sách theo dõi

115


Hình 57 Component Diagram

116

Hình 58 Deploy Diagram

116

Danh mục bảng biểu
Bảng 1 Danh sách yêu cầu nghiệp vụ

22

Bảng 2 Danh sách các Actor

30

Bảng 3 Danh sách các Use Case

30

Bảng 4 Bảng đăng nhập Admin

32


Trang 13

Bảng 5 Bảng chức năng đăng nhập customer


33

Bảng 6 Chức năng đăng nhập Customer

33

Bảng 7 Chức năng quản lý sản phẩm

35

Bảng 8 Chức năng thêm thông tin

37

Bảng 9 Chức năng sửa thơng tin

38

Bảng 10 Chức năng xóa thơng tin

39

Bảng 11 Chức năng tìm kiếm thơng tin

41

Bảng 12 Chức năng báo cáo doanh thu

42


Bảng 13 Chức năng thêm khách hàng

44

Bảng 14 Chức năng cập nhật thông tin khách hàng

47

Bảng 15 Hiển thị lịch sử bán trả hàng

53

Bảng 16 Tạo đơn hàng

55

Bảng 17 Mô tả trạng thái cập nhật sản phẩm

57

Bảng 18 Mô tả trạng thái mua hàng

59

Bảng 19 Mô tả trạng thái bán hàng

60

Bảng 20 Mô tả trạng thái báo cáo doanh thu


62

Bảng 21 Danh sách các lớp đối tượng và quan hệ

64

Bảng 22 Danh sách thuộc tính của loại sản phẩm

64

Bảng 23 Danh sách tính năng của loại sản phẩm

65

Bảng 24 Danh sách thuộc tính của sản phẩm

65

Bảng 25 Danh sách các tính năng của sản phẩm

66

Bảng 26 Danh sách thuộc tính của theo dõi

66

Bảng 27 Danh sách các phương thức của theo dõi

67


Bảng 28 Danh sách thuộc tính của bán hàng

67

Bảng 29 Danh sách các phương thức của bán hàng

68

Bảng 30 Danh sách thuộc tính của đặt hàng

68

Bảng 31 Danh sách các phương thức của đặt hàng

68


Trang 14

Bảng 32 Danh sách thuộc tính của Người dùng

69

Bảng 33 Danh sách các phương thức của Người dùng

69

Bảng 34 Danh sách thuộc tính của portfolioItem


70

Bảng 35 Danh sách thuộc tính của portfolioItem

70

Bảng 36 Danh sách các phương thức của portfolioItem

71

Bảng 37 Các dữ liệu trong Sơ đồ logic

73

Bảng 38 Các thành phần của Chức vụ

73

Bảng 39 Các thành phần của Admin

74

Bảng 40 Các thành phần của Khách hàng

74

Bảng 41 Các thành phần của Loại sản phẩm

74


Bảng 42 Các thành phần của Sản phẩm

75

Bảng 43 Các thành phần của Đặt hàng

75

Bảng 44 Các thành phần của bán hàng

76

Bảng 45 Danh sách các màn hình giao diện

77

Bảng 46 Đối tượng trên màn hình Đăng nhập admin

78

Bảng 47 Danh sách biến cố và xử lý tương ứng của màn hình Đăng nhập admin

78

Bảng 48 Đối tượng trên SlideBar

80

Bảng 49 Biến cố và xử lý tương ứng trên SlideBar


80

Bảng 50 Đối tượng trên NavBar

80

Bảng 51 Biến cố và xử lý tương ứng trên NavBar

80

Bảng 52 Đối tượng trên Trang chủ

82

Bảng 53 Biến cố và xử lý tương ứng trên Trang chủ

82

Bảng 54 Đối tượng trên tab quản lý khách hàng

83

Bảng 55 Biến cố và xử lý tương ứng trên tab quản lý khách hàng

84

Bảng 56 Đối tượng trên thêm khách hàng

85


Bảng 57 Biến cố và xử lý tương ứng trên thêm khách hàng

85

Bảng 58 Đối tượng trên cập nhật khách hàng

85


Trang 15

Bảng 59 Biến cố và xử lý tương ứng trên cập nhật khách hàng

86

Bảng 60 Đối tượng trên Tab sản phẩm

87

Bảng 61 Biến cố và xử lý tương ứng trên Tab sản phẩm

87

Bảng 62 Đối tượng trên thêm sản phẩm

88

Bảng 63 Biến cố và xử lý tương ứng thêm sản phẩm

88


Bảng 64 Đối tượng trên cập nhật sản phẩm

89

Bảng 65 Biến cố và xử lý tương ứng của cập nhật sản phẩm

90

Bảng 66 Đối tượng của Tab hóa đơn

91

Bảng 67 Biến cố và xử lý tương ứng của Tab hóa đơn

91

Bảng 68 Đối tượng của Tab Biểu đồ

92

Bảng 69 Đối tượng của đăng nhập khách hàng

94

Bảng 70 Biến cố và xử lý tương ứng của đăng nhập khách hàng

94

Bảng 71 Đối tượng của đăng ký khách hàng


95

Bảng 72 Biến cố và xử lý tương ứng của đăng ký khách hàng

95

Bảng 73 Đối tượng của navbar khách hàng

96

Bảng 74 Biến cố và xử lý tương ứng của navbar khách hàng

96

Bảng 75 Đối tượng của trang home

99

Bảng 76 Biến cố và xử lý tương ứng của trang home

99

Bảng 77 Đối tượng của sản phẩm

101

Bảng 78 Biến cố và xử lý tương ứng của sản phẩm

101


Bảng 79 Đối tượng của chi tiết sản phẩm

103

Bảng 80 Biến cố và xử lý tương ứng của chi tiết sản phẩm

103

Bảng 81 Đối tượng của xem giá bán hàng

104

Bảng 82 Biến cố và xử lý tương ứng của xem giá bán hàng

105

Bảng 83 Đối tượng của xem giá mua hàng

105

Bảng 84 Biến cố và xử lý tương ứng của xem giá mua hàng

106

Bảng 85 Đối tượng của xem đơn hàng

106



Trang 16

Bảng 86 Biến cố và xử lý tương ứng của xem đơn hàng

106

Bảng 87 Đối tượng của mua hàng

107

Bảng 88 Biến cố và xử lý tương ứng của mua hàng

108

Bảng 89 Đối tượng của bán hàng

108

Bảng 90 Biến cố và xử lý tương ứng của bán hàng

109

Bảng 91 Đối tượng của địa chỉ

110

Bảng 92 Biến cố và xử lý tương ứng của địa chỉ

110


Bảng 93 Đối tượng của tìm bán hàng

111

Bảng 94 Biến cố và xử lý tương ứng của tìm bán hàng

111

Bảng 95 Đối tượng của thơng tin người dùng

111

Bảng 96 Biến cố và xử lý tương ứng của thông tin người dùng

112

Bảng 97 Đối tượng của đổi mật khẩu

112

Bảng 98 Biến cố và xử lý tương ứng của đổi mật khẩu

113

Bảng 99 Đối tượng của lịch sử mua hàng

113

Bảng 100 Biến cố và xử lý tương ứng của lịch sử mua hàng


114

Bảng 101 Đối tượng của lịch sử bán hàng

114

Bảng 102 Biến cố và xử lý tương ứng của lịch sử bán hàng

114

Bảng 103 Đối tượng của danh sách theo dõi

115

Bảng 104 Biến cố và xử lý tương ứng của danh sách theo dõi

115

Bảng 105 Phân công công việc

118

Chương I Tổng quan
1.

Lý do chọn đề tài
Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một

trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổ chức,



Trang 17

cưng như các cơng ty, cửa hàng, nó đóng vai trị hết sức quan trọng có thể tạo ra những
bước đột phá mạnh mẽ.
Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức,
cơng ty thậm chí các cá nhân, ngày nay, khơng lấy gì làm xa lạ. Đối với lĩnh vực mua
bán hàng hóa cũng trở nên ngày càng cấp thiết. Khách hàng ngày càng có nhiều nhu
cầu mua sắm và buôn bán những đồ dùng đã qua sử dụng của mình tuy nhiên để tìm
kiếm một địa điểm và giả thành hợp lý xong không phải là chuyện dễ dàng dẫn đến mất
quá nhiều công sức và thời gian mà hiệu quả lại khơng cao. Vì vậy ứng dụng cơng
nghệ vào lĩnh vực này ngày càng phổ biến. Với một vài thao tác đơn giản, nhanh
chóng, một người hoặc doanh nghiệp bất kì có thể dễ dàng quản lý mọi cơng việc mua
bán hàng hóa của mình trên mọi thiết bị.
Dựa vào kiến thức đã được học, sự cần thiết của vấn đề em đã “Xây dựng
Website mua bán giày”. Tuy việc xây dựng phần mềm cịn nhiều khó khăn và thiếu sót
nhưng đã giúp chúng em có thêm nhiều kiến thức và sự học hỏi, tạo bước phát triển
cho sau này.

2.

Mục tiêu

● Nghiên cứu tổng quan về các nghiệp vụ cửa hàng và bán hàng.
● Nghiên cứu trên cơ sở lý thuyết việc phát triển hệ thống thông tin quản lý và
thương mại điện tử Website mua bán giày.
● Xây dựng hệ thống thương mại điện tử và quản lý Website mua bán giày giúp
cho việc quản lý và bn bán trở nên đơn giản hơn.

3.


Phạm vi
Quy trình quản lý bán hàng, doanh thu và sản phẩm, đổi trả trong Website mua

bán giày. Quy trình bán hàng thơng qua website.
Các vấn đề cần giải quyết trong quá trình quản lý và bn bán trên Website mua
bán giày, ví dụ như:


Trang 18

●Nghiệp vụ bán hàng và thanh toán
●Theo dõi, quản lý lịch sử mua hàng và bán hàng, lịch sử theo dõi
của người dùng
●Thêm, xóa, sửa và tra cứu tìm kiếm thơng tin của sản phẩm
●Từ đó tiến hành xây dựng cơ sở dữ liệu và khai thác dữ liệu phục
vụ công tác quản lý và buôn bán trên website.

4.

Người dùng
Hệ thống phần mềm hướng về phía người dùng là giúp: khách hàng có địa điểm

thuận lợi để mua bán giày tiết kiệm được nhiều rủi ro, chi phí và thời gian tìm kiếm
đồng thời tạo độ tin cậy và chính xác cao.

5.

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


● Phương pháp hệ thống, phương pháp tư duy.
● Phương pháp phân tích, tổng hợp.
● Phương pháp tin học hóa bằng cơng cụ lập trình để giải quyết vấn đề.


Trang 19

Chương II

Cơ sở lý thuyết & Tổng
quan công nghệ

1. Giới thiệu về React JS
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013,
bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác
với các thành phần trên website. Một trong những điểm nổi bật nhất của ReactJS
đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới
Client.
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. Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi
đến một số khái niệm cơ bản:
-

Virtual DOM:

Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới
có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc
DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử

lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual
DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo
ra một DOM, khi dữ liệu thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree
thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ
chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent
đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm
soát cũng như sửa lỗi. Với các đặc điểm ở trên, React dùng để xây dựng các ứng


Trang 20

dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi
thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed
của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share,
comment liên tục thay đổi. Khi đó React sẽ rất hữu ích để sử dụng.
-

Giới thiệu về JSX:

JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc
điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã
Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã
tương đương viết trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với
Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy,
giống như Java, C++. Vì thế các lỗi sẽ được phát hiện ngay trong q trình biên
dịch. Ngồi ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ
dàng hơn. JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình
viên Javascripts có thể sử dụng (tham khảo tại />-

Giới thiệu về Components:


React được xây dựng xung quanh các component, chứ không dùng template như
các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những
thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều
nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có
thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng,
có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay
đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code
khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method
render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.
-

Props và State:


Trang 21

Props: giúp các component tương tác với nhau, component nhận input gọi là
props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI.
-

React Redux

Redux là một predictable state management tool cho các ứng dụng Javascript. Nó
giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi
trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy
cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy
Redux thường dùng kết hợp với React.

Các thành phần trong Redux:
-

Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app
đến Redux store. Những data này có thể là từ sự tương tác của user vs app,
API calls hoặc cũng có thể là từ form submission.

-

Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực
hiện một action và trả về một state mới. Những states này được lưu như những
objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản
hồi một action được gửi đến store.

Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux
nào. Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng
ký các listeners thông qua helper methods.

2. Giới thiệu về MongoDB
2.1. Các đặc điểm cơ bản của MongoDB
● Mỗi cơ sở dữ liệu bao gồm nhiều collection, mỗi collection lại chứa nhiều
Document. Mỗi Document có thể khác nhau về số lượng các trường dữ
liệu. Kích thước và nội dung của mỗi Document đều có thể khác nhau.


Trang 22

● Cấu trúc của Document phù hợp với việc các nhà phát triển xây dựng các
class và object bằng các ngơn ngữ lập trình tương ứng. Các nhà phát triển
sẽ thường phát biểu rằng cấu trúc của họ không có các hàng và các cột

nhưng vẫn có một cấu trúc dữ liệu rõ ràng với các cặp key-value.
● Nếu như các bạn đã biết trước về NoSQL , các hàng (hay có thể là
documents được gọi trong MongoDB) khơng cần phải định nghĩa schema.
Thay vào đó, các trường có thể được tạo linh hoạt.
● Mơ hình dữ liệu có sẵn trong MongoDB cho phép bạn biểu diễn quan hệ
phân cấp, lưu trữ các mảng, và các cấu trúc phức tạp dễ dàng hơn.

2.2. Ưu nhược điểm của MongoDB
2.2.1.Ưu điểm
Open Source:
● MongoDB là phần mềm mã nguồn mở miễn phí, có cộng đồng phát triển
rất lớn
Hiệu năng cao:
● Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn
so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS).
● Thử nghiệm cho thấy tốc độ insert, tốc độ insert của MongoDB có thể
nhanh tới gấp 100 lần so với MySQL (So sánh hiệu suất của MongoDB
với MySQL)
Tại sao MongoDB có hiệu năng cao như thế? có các lý do sau:
● MongoDB lưu dữ liệu dạng JSON, khi bạn insert nhiều đối tượng thì nó sẽ
là insert một mảng JSON gần như với trường hợp insert 1 đối tượng.
● Dữ liệu trong MongoDB khơng có sự ràng buộc lẫn nhau như trong
RDBMS, khi insert, xóa hay update nó khơng cần phải mất thời gian kiểm
tra xem có thỏa mãn các bảng liên quan như trong RDBMS.


Trang 23

● Dữ liệu trong MongoDB được đánh chỉ mục (đánh index) nên khi truy vấn
nó sẽ tìm rất nhanh.

● Khi thực hiện insert, find… MongoDB sẽ khóa các thao tác khác lại, ví dụ
khi nó thực hiện find(), trong q trình find mà có thêm thao tác insert,
update thì nó sẽ dừng hết lại để chờ find() xong đã.
Dữ liệu linh hoạt:
● MongoDB là document database, dữ liệu lưu dưới dạng JSON, khơng bị
bó buộc về số lượng field, kiểu dữ liệu… bạn có thể insert thoải mái dữ
liệu mà mình muốn.
Là Rich Query Language:
● MongoDB là một rich query language tức là nó có sẵn các method để thực
hiện create, read, update, delete dữ liệu (CRUD)
Tính sẵn có:
● MongoDB hỗ trợ replica set nhằm đảm bảo việc sao lưu và khôi phục dữ
liệu.
Khả năng mở rộng Horizontal Scalability:
● Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu
giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node
với vào cluster:


Trang 24

Hình 1 Khả năng mở rộng Horizontal Scalability

2.2.2.Nhược điểm
● MongoDB khơng có các tính chất ràng buộc như trong RDBMS –> dễ bị
làm sai dữ liệu.
● Không hỗ trợ join giống như RDBMS nên khi viết function join trong code
ta phải làm bằng tay khiến cho tốc độ truy vấn bị giảm.
● Sử dụng nhiều bộ nhớ: do dữ liệu lưu dưới dạng key-value, các collection
chỉ khác về value do đó key sẽ bị lặp lại. Khơng hỗ trợ join nên sẽ bị dữ

thừa dữ liệu (trong RDBMS thì ta chỉ cần lưu 1 bản ghi rồi các bản ghi
khác tham chiếu tới cịn trong MongoDB thì khơng).


Trang 25

● Bị giới hạn kích thước bản ghi: mỗi document khơng được có kích thước
> 16Mb và khơng mức độ các document con trong 1 document không được
> 100

3. Kiến trúc hệ thống
3.1. Kiến trúc hệ thống
● Trang web được xây dựng trên nền MERN STACK.
● Sử dụng API để kết nối với MongoDB.

3.2. Mơ hình kiến trúc hệ thống
- Kiến trúc hệ thống theo mơ hình Client – Server.
+ Tầng Client (là một máy tính (Host)): Tầng có khả năng nhận thông tin hoặc
sử dụng một dịch vụ cụ thể từ các nhà cung cấp dịch vụ (Server).
+ Tầng Sever: Tầng cung cấp các thông tin (dữ liệu) hoặc quyền truy cập vào các
dịch vụ cụ thể.

+ Tầng Web (sẽ kết nối với tầng Sever & Client): Thành phần giao diện của
chương trình tương tác với người sử dụng.