Website học tiếng anh

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

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

WEBSITE HỌC TIẾNG ANH

GVHD: ThS. NGUYỄN HỮU TRUNG
SVTH : NGUYỄN PHÚC NGHIÊM
ĐÀM LƯU TRUNG HIẾU

SKL011491

Tp. Hồ Chí Minh, năm 2023


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN

NGUYỄN PHÚC NGHIÊM - 19110405
ĐÀM LƯU TRUNG HIẾU - 19110363

WEBSITE HỌC TIẾNG ANH
KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
ThS. NGUYỄN HỮU TRUNG

KHÓA 2019 - 2023

ĐH SƯ PHẠM KỸ THUẬT TP.HCM

CỘNG HÒA XHCN VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

Độc lập – Tự do – Hạnh phúc

******

******

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Nguyễn Phúc Nghiêm

MSSV 1: 19110405

Họ và tên Sinh viên 2: Đàm Lưu Trung Hiếu

MSSV 2: 19110363

Chuyên ngành: Công nghệ phần mềm
Tên đề tài: Xây dựng Website học tiếng Anh.
Họ và tên giảng viên hướng dẫn: ThS. Nguyễn Hữu Trung
NHẬN XÉT
1. Về nội dung đề tài và khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay khơng?
5. Đánh giá loại:
6. Điểm:
TP. Hồ Chí Minh, tháng 7 năm 2023
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 XHCN VIỆT NAM

KHOA CÔNG NGHỆ THÔNG TIN

Độc lập – Tự do – Hạnh phúc

******

******

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1: Nguyễn Phúc Nghiêm

MSSV 1: 19110405

Họ và tên Sinh viên 2: Đàm Lưu Trung Hiếu

MSSV 2: 19110363

Chuyên ngành: Công nghệ phần mềm
Tên đề tài: Xây dựng Website học tiếng Anh.
Họ và tên giảng viên phản biện: ThS. Nguyễn Thủy An
NHẬN XÉT
1. Về nội dung đề tài và khối lượng thực hiện:

2. Ưu điểm:

3. Khuyết điểm:

4. Đề nghị cho bảo vệ hay khơng?
5. Đánh giá loại:
6. Điểm:
TP. Hồ Chí Minh, tháng 7 năm 2023
Giảng viên phản biện
(Ký & ghi rõ họ tên)


LỜI CẢM ƠN
Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành 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 nhóm chúng em được học tập, phát triển nền tảng kiến
thức sâu sắ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 Nguyễn Hữu Trung lời cảm ơn
sâu sắc nhất và rất biết ơn khi thầy đã giúp đỡ và nhận lời hướng dẫn nhóm chúng em
thực hiện luận văn tốt nghiệp của mình. Trải qua một quá trình dài học tập và thực hiện
đề tài trong thời gian qua. Thầy đã tận tâm chỉ bảo nhiệt tình nhóm chúng em trong suốt
quá trình từ lúc bắt đầu cũng như kết thúc đề tài này.

Với những kinh nghiệm chuyên môn cũng như với những kinh nghiệm thực tế
của các thầy cô. Tập thể các thầy cô Khoa Công Nghệ Thông Tin và đặc biệt thầy
Nguyễn Hữu Trung đã giúp cho chúng em tiếp thu thêm được nhiều kiến thức và kinh
nghiệm khổng lồ về chuyên ngành và thực hiện dự án nhằm giúp rất nhiều cho công việc
và học vấn trong tương lai. Đặc biệt điều này đã giúp và thôi thúc chúng em hoàn thành
được đề tài. Chúng em thật sự cảm ơn và khắc ghi những kiến thức đó. Đây sẽ là hành
trang vô cùng lớn của chúng em trước khi bước ra một cuộc sống mới.
Tuy nhiên, kiến thức lúc nào cũng là vô tận và với khả năng và chun mơn cịn
nhiều hạn chế của mình chúng em ln rất cố gắng hết sức và để hồn thành một cách
tốt nhất. Vì vậy việc xảy ra những thiếu sót của chúng em là điều khó tránh khỏi trong
quá trình học hỏi và thực hiện luận văn. Chúng em hi vọng nhận được sự thông cảm và
nhận được các góp ý tận tình và q báu của q thầy (cơ). Thơng qua đó chúng em có
thể rút ra được bài học kinh nghiệm, song với đó là hồn thiện và nâng cấp lại sản phẩm
của mình tốt hơn nữa.
Sau tất cả, một lần nữa chúng em xin gửi lời cảm ơn sâu sắc nhất đến với thầy
Nguyễn Hữu Trung và tập thể các quý thầy, cô Khoa Công Nghệ Thông Tin – Trường
Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh vì tất cả những điều thầy cơ đã
gửi gắm và chỉ dạy chúng em. Nhóm xin kính chúc các thầy cơ ln có sức khỏe thật
tốt và luôn thành công trong cuộc sống.

1


Trường ĐH Sư Phạm Kỹ Thuật TP.HCM
Khoa: Công nghệ thông tin

ĐỀ CƯƠNG LUẬN VĂN
Họ và tên sinh viên thực hiện 1: Nguyễn Phúc Nghiêm

Mã số sinh viên: 19110405

Họ và tên sinh viên thực hiện 2: Đàm Lưu Trung Hiếu

Mã số sinh viên: 19110363

Thời gian làm khóa luận tốt nghiệp: Từ ngày 25/01/2023 đến ngày 12/07/2023
Chuyên ngành: Công nghệ phần mềm
Tên đề tài: Website học tiếng Anh.
Giáo viên hướng dẫn: Th.S Nguyễn Hữu Trung
Nhiệm vụ của luận văn:
Lý thuyết:
● Spring Boot, ReactJS, MySQL, Spring Security, Three-Tier Architecture.
Thực hành:
● Sử dụng Spring Boot để cung cấp các API cho Mobile và Web Admin
● Xây dựng sản phẩm của đề tài theo các kiến trúc (Three-Tier Architecture).
● Sử dụng Spring Security để đảm bảo độ bảo mật và xác thực người dùng cho
hệ thống.
● Sử dụng ReactJS làm nền tảng để xây dựng giao diện cho sản phẩm của đề
tài.
● Sử dụng MySQL để lưu trữ database
● Xây dựng các chức năng sau cho các sản phẩm:
o Trang giáo viên:
▪ Đăng nhập, đăng ký, đăng xuất tài khoản.
▪ Quản lý tài khoản của bản thân.
▪ Học hỏi và thảo luận qua blog.
▪ Tham gia khóa học, làm bài tập.
▪ Luyện tập qua các đề và các danh sách từ ghi nhớ
o Trang học viên:
▪ Đăng nhập, đăng ký, đăng xuất tài khoản.
▪ Quản lý tài khoản người dùng.

▪ Quản lý khóa học.
▪ Quản lý bài học.
o Trang Administrator:
2


▪ Quản lý cơ sở dữ liệu.
▪ Cung cấp lịch sử mua hàng của người dùng
▪ Cung cấp tính năng phản hồi ý kiến và đánh giá cho người dùng.
▪ Thống kê lượng mua hàng và truy cập của sản phẩm.
Đề cương viết luận văn:
MỤC LỤC
PHẦN MỞ ĐẦU
1. Tính cấp thiết của đề tài
2. Mục tiêu đề tài
3. Phương pháp thực hiện
PHẦN NỘI DUNG
1. Cơ sở lý thuyết
2. Khảo sát, phân tích, thiết kế
3. Mơ hình hóa u cầu
4. Thiết kế phần mềm
5. Thiết kế giao diện xử lý
6. Cài đặt và kiểm thử ứng dụng
PHẦN KẾT LUẬN
1. Những kết quả đạt được
2. Ưu điểm và nhược điểm
3. Thuận lợi
4. Khó khăn
5. Hướng phát triển
DANH SÁCH TÀI LIỆU THAM KHẢO

KẾ HOẠCH THỰC HIỆN
STT
1

Thời gian
10/03/2023
đến

Công việc
Tổng hợp các chức năng của website
Xây dựng mơ hình dự án thơng qua các lược đồ

18/03/2023

2

19/03/2023
đến

Xây dựng database phù hợp với các chức năng
Thiết kế UI cho website

26/03/2023

3

27/03/2023

Xây dựng UI cho học sinh
Xây dựng API phục vụ các chức năng cho học sinh

đến

như: Mua khóa học, tham gia các bài học, luyện đề,
viết blog…

3


22/04/2023

6

23/04/2023
đến

7

8

Xây dựng UI cho giáo viên
Xây dựng API phục vụ các chức năng cho giáo viên

16/05/2023

như: Quản lý khóa học, quản lý bài học…

17/05/2022

Xây dựng UI cho admin

đến

Xây dựng API phục vụ các chức năng như: quản lý

11/06/2023

người dùng, quản lý giao dịch…

12/06/2023

Tiến hành kết hợp giữa Back-end và Front-end

đến
27/06/2023

9

28/06/2023
đến

Tiến hành tìm lỗi và sửa lỗi
Tiến hành viết báo cáo

09/07/2023

10

10/07/2023

Hồn thành báo cáo và hoàn chỉnh hệ thống

đến
12/07/2023

Ngày 08 tháng 03 năm 2023
Ý kiến của giáo viên hướng dẫn

Người viết đề cương

Nguyễn Hữu Trung

Nguyễn Phúc Nghiêm

4


MỤC LỤC

LỜI CẢM ƠN ..................................................................................................................1
ĐỀ CƯƠNG LUẬN VĂN...............................................................................................2
DANH SÁCH HÌNH .......................................................................................................9
DANH SÁCH BẢNG ....................................................................................................12
PHẦN MỞ ĐẦU ...........................................................................................................14
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI .........................................................................14
2. MỤC TIÊU ĐỀ TÀI ..............................................................................................14
3. PHƯƠNG PHÁP THỰC HIỆN ............................................................................14
PHẦN NỘI DUNG ........................................................................................................15
CHƯƠNG 1.CƠ SỞ LÝ THUYẾT ...........................................................................15
1.1. Spring Framework ..........................................................................................15

1.2. ReactJS ...........................................................................................................16
1.3. MySQL ...........................................................................................................17
CHƯƠNG 2. KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ ..............................................18
2.1. Phân tích hiện trạng ........................................................................................18
2.2. Khảo sát một số phần mềm.............................................................................19
2.3. Phân tích yêu cầu của dự án ...........................................................................23
2.4. Danh sách yêu cầu chức năng nghiệp vụ ........................................................23
2.5. Danh sách yêu cầu chức năng hệ thống ..........................................................25
2.6. Danh sách yêu cầu phi chức năng ..................................................................25
CHƯƠNG 3. MƠ HÌNH HĨA U CẦU ...............................................................27
3.1. Lược đồ Usecase .............................................................................................27
CHƯƠNG 4. THIẾT KẾ PHẦN MỀM.....................................................................64
4.1. Lược đồ tuần tự ...............................................................................................64
5


4.2. Lược đồ ERD ..................................................................................................76
CHƯƠNG 5. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ .................................................77
5.1. Trang chủ ........................................................................................................77
5.2. Đăng nhập .......................................................................................................78
5.3. Đăng ký ...........................................................................................................80
5.4. Chi tiết khóa học .............................................................................................82
5.5. Trang khóa học của user đã mua ....................................................................84
5.6. Trang học chi tiết ............................................................................................85
5.7. Thay đổi thông tin user ...................................................................................87
5.8. Thay đổi ảnh đại diện user ..............................................................................89
5.9. Thay đổi mật khẩu ..........................................................................................90
5.10. Khóa tài khoản ..............................................................................................92
5.11. Lịch sử mua hàng..........................................................................................93
5.12. Quên mật khẩu ..............................................................................................95

5.13. Danh sách khóa học ......................................................................................96
5.14. Chỉnh sửa thơng tin cá nhân .........................................................................97
5.15. Đổi mật khẩu.................................................................................................98
5.16. Danh sách giảng viên ....................................................................................99
5.17. Trang chủ của ứng dụng quản lý của giáo viên ..........................................100
5.18. Quản lý bài giảng theo khóa học ................................................................102
5.19. Thêm bài giảng ...........................................................................................105
5.20. Thêm bài tập theo bài giảng .......................................................................106
5.21. Chỉnh sửa bài giảng ....................................................................................107
5.22. Chỉnh sửa bài tập theo bài giảng ................................................................108
5.23. Báo cáo thống kê ........................................................................................109
5.24. Quản lý khóa học ........................................................................................111
6


5.25. Thêm khóa học ...........................................................................................112
5.26. Chỉnh sửa khóa học ....................................................................................114
5.27. Quản lý giảng viên ......................................................................................116
5.28. Danh sách blog ...........................................................................................117
5.29. Chi tiết Blog ................................................................................................118
5.30. Tạo Blog .....................................................................................................120
5.31. Tạo Flashcard..............................................................................................121
5.32. Danh sách từ vựng theo flashcard ..............................................................122
5.33. Luyện tập flashcard ....................................................................................124
5.34. Danh sách lịch sử làm bài thi ......................................................................126
5.35. Chi tiết làm bài thi ......................................................................................127
5.36. Danh sách đề thi .........................................................................................129
5.37. Chọn chi tiết phần thi..................................................................................130
5.38. Làm bài thi ..................................................................................................131
CHƯƠNG 6. CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG .........................................132

6.1. Cài đặt ...........................................................................................................132
6.2. Kiểm thử ứng dụng .......................................................................................136
PHẦN KẾT LUẬN .....................................................................................................140
1. NHỮNG KẾT QUẢ ĐẠT ĐƯỢC ......................................................................140
1.1. Về kiến thức ..................................................................................................140
1.2. Về đề tài ........................................................................................................140
1.3. Về kinh nghiệm ............................................................................................140
2. ƯU ĐIỂM VÀ NHƯỢC ĐIỂM ...........................................................................141
2.1. Ưu điểm ........................................................................................................141
2.2. Nhược điểm ..................................................................................................141
3. THUẬN LỢI ........................................................................................................141
7


4. KHÓ KHĂN ........................................................................................................141
5. HƯỚNG PHÁT TRIỂN ......................................................................................141
TÀI LIỆU THAM KHẢO ...........................................................................................143

8


DANH SÁCH HÌNH
Hình 1.1. Logo Spring Framework [1]

15

Hình 1.2 Logo ReactJS

16

Hình 1.3 Logo MySQL

17

Hình 2.1 Trang đăng nhập

19

Hình 2.2 Trang chủ

20

Hình 2.3 Trang bài học

21

Hình 2.4 Trang bài luyện tập

22

Hình 2.5 Trang quản lý tài khoản

22

Hình 3.1 Lược đồ Usecase

27

Hình 3.2 Usecase Quản lý tài khoản

28

Hình 3.3 Usecase Quản lý khóa học

29

Hình 3.4 Usecase quản lý Bài học

30

Hình 3.5 Usecase quản lý người dùng

30

Hình 3.6 Usecase Quản lý thanh tốn

31

Hình 3.7 Usecase Quản lý thanh tốn

32

Hình 4.1 Lược đồ tuần tự đăng ký

64

Hình 4.2 Lược đồ tuần tự đăng nhập

65

Hình 4.3 Lược đồ tuần tự chỉnh sửa thông tin cá nhân

66

Hình 4.4 Lược đồ tuần tự quên mật khẩu

67

Hình 4.5 Lược đồ tuần tự tạo khóa học

68

Hình 4.6 Lược đồ tuần tự tạo bài học

69

Hình 4.7 Lược đồ tuần tự tạo bài tập

70

Hình 4.8 Lược đồ tuần tự tạo đề

71

Hình 4.9 Lược đồ tuần tự luyện đề

72

Hình 4.10 Lược đồ tuần tự tạo blog

73

Hình 4.11 Lược đồ tuần tự tạo blog

74

Hình 4.12 Lược đồ tuần tự mua khóa học

75

Hình 4.13 Lược đồ ERD

76

Hình 5.1 Màn hình trang chủ

77

Hình 5.2 Màn hình trang đăng nhập

78

Hình 5.3 Màn hình trang đăng ký

80
9


Hình 5.4 Màn hình trang tìm kiếm sản phẩm

82

Hình 5.5 Màn hình danh sách khóa học của user

84

Hình 5.6 Màn hình học khóa học

86

Hình 5.7 Màn hình thay đổi thơng tin user

87

Hình 5.8 Màn hình thay đổi ảnh đại diện user

89

Hình 5.9 Màn hình thay đổi mật khẩu

90

Hình 5.10 Màn hình khóa tài khoản user

92

Hình 5.11 Màn hình lịch sử mua hàng

93

Hình 5.12 Màn hình quên mật khẩu

95

Hình 5.13 Màn hình danh sách khóa học

96

Hình 5.14 Màn hình chỉnh sửa thơng tin cá nhân

97

Hình 5.15 Màn hình đổi mật khẩu

98

Hình 5.16 Màn hình danh sách giảng viên

99

Hình 5.17 Màn hình trang chủ của ứng dụng quản lí của giáo viên

100

Hình 5.18 Màn hình quản lí bài giảng theo khóa học

103

Hình 5.19 Màn hình thêm bài giảng

105

Hình 5.20 Màn hình thêm bài tập cho bài giảng

106

Hình 5.21 Màn hình chỉnh sửa bài giảng

107

Hình 5.22 Màn hình chỉnh sửa bài tập cho bài giảng

108

Hình 5.23 Màn hình báo cáo thống kê

109

Hình 5.24 Màn hình quản lí khóa học

111

Hình 5.25 Màn hình thêm khóa học

112

Hình 5.26 Màn hình chỉnh sửa khóa học

114

Hình 5.27 Màn hình quản lí giảng viên

116

Hình 5.28 Màn hình trang danh sách blog

117

Hình 5.29 Màn hình trang chi tiết blog

119

Hình 5.30 Màn hình trang tạo blog

120

Hình 5.31 Màn hình danh sách flashcard

121

Hình 5.32 Màn hình chỉnh sửa từ vựng

122

Hình 5.33 Màn hình luyện tập flashcard

125

Hình 5.34 Màn hình danh sách lịch sử làm bài luyện thi

126

Hình 5.35 Màn hình chi tiết lịch sử làm bài luyện thi

127

10


Hình 5.36 Màn hình danh sách bài luyện thi

129

Hình 5.37 Màn hình chi tiết chọn bài luyện thi

130

Hình 5.38 Màn hình làm bài luyện thi

131

Hình 6.1 Cài đặt API

132

Hình 6.2 Màn hình trang tải Visual Studio Code

133

Hình 6.3 Tải Node.js

133

Hình 6.4 Cài trình biên dịch Visual Studio Code

134

Hình 6.5 Cài các extension cho Reactjs

134

Hình 6.6 Mở source code

135

Hình 6.7 Tải các package sử dụng trong dự án.

135

Hình 6.8 Khởi động dự án admin.

136

Hình 6.9 Khởi động dự án teacher.

136

Hình 6.10 Khởi động dự án user.

136

11


DANH SÁCH BẢNG
Bảng 2.1 Chức năng và hạn chế của FoodHub

22

Bảng 2.2 Chức năng của từng tác nhân

23

Bảng 2.3 Danh sách yêu cầu chức năng nghiệp vụ

24

Bảng 2.4 Danh sách yêu cầu chức năng hệ thống

25

Bảng 2.5 Danh sách yêu cầu phi chức năng

26

Bảng 5.1 Mơ tả màn hình trang chủ

78

Bảng 5.2 Mơ tả màn hình trang đăng nhập

79

Bảng 5.3 Mơ tả màn hình trang đăng ký

80

Bảng 5.4 Mơ tả màn hình trang tìm kiếm sản phẩm

82

Bảng 5.5 Mơ tả màn hình danh sách khóa học của user

84

Bảng 5.6 Mơ tả màn hình giỏ hàng

86

Bảng 5.7 Mơ tả màn hình thay đổi thơng tin user

87

Bảng 5.8 Mơ tả màn hình thay đổi ảnh đại diện user

89

Bảng 5.9 Mô tả màn hình thay đổi mật khẩu

90

Bảng 5.10 Mơ tả màn hình khóa tài khoản user

92

Bảng 5.11 Mơ tả màn hình lịch sử mua hàng

93

Bảng 5.12 Mơ tả màn hình qn mật khẩu

95

Bảng 5.13 Mơ tả màn hình danh sách khóa học

96

Bảng 5.14 Mơ tả màn hình chỉnh sửa thơng tin cá nhân

97

Bảng 5.15 Mơ tả màn hình đổi mật khẩu

98

Bảng 5.16 Mơ tả màn hình danh sách giảng viên

99

Bảng 5.17 Mơ tả màn hình trang chủ của ứng dụng quản lí của giáo viên

100

Bảng 5.18 Mơ tả màn hình quản lý bài giảng theo khóa học

103

Bảng 5.19 Mơ tả màn hình thêm bài giảng

105

Bảng 5.20 Mơ tả màn hình thêm bài tập cho bài giảng

106

Bảng 5.21 Mơ tả màn hình chỉnh sửa bài giảng

107

Bảng 5.22 Mơ tả màn hình chỉnh sửa bài tập cho bài giảng

108

Bảng 5.23 Mơ tả màn hình báo cáo thống kê

109

Bảng 5.24 Mơ tả màn hình quản lý khóa học

111

Bảng 5.25 Mơ tả màn hình thêm khóa học

112

Bảng 5.26 Mơ tả màn hình chỉnh sửa khóa học

114

12


Bảng 5.27 Mơ tả màn hình quản lý giảng viên

116

Bảng 5.28 Mơ tả màn hình quản lý giảng viên

117

Bảng 5.29 Mơ tả màn hình trang chi tiết blog

119

Bảng 5.30 Mơ tả màn hình trang tạo blog

120

Bảng 5.31 Mơ tả màn hình danh sách flashcard

121

Bảng 5.32 Mơ tả màn hình chỉnh sửa từ vựng

123

Bảng 5.33 Mơ tả màn hình luyện tập flashcard

125

Bảng 5.34 Mơ tả màn hình danh sách lịch sử làm bài luyện thi

126

Bảng 5.35 Mơ tả màn hình chi tiết lịch sử làm bài luyện thi

128

Bảng 5.36 Mô tả màn hình danh sách bài luyện thi

129

Bảng 5.37 Mơ tả màn hình chi tiết chi tiết chọn bài luyện thi

130

Bảng 5.38 Mơ tả màn hình làm bài luyện thi

131

Bảng 6.1 Kiểm thử các chức năng quản lý tài khoản

136

Bảng 6.2 Kiểm thử các chức năng khóa học, bài học

137

Bảng 6.3 Kiểm thử các chức năng quản lý blog, bình luận

138

Bảng 6.4 Kiểm thử các chức năng quản lý danh sách từ

138

Bảng 6.5 Kiểm thử các chức năng quản lý đề luyện tập

138

Bảng 6.6 Kiểm thử các chức năng quản lý danh mục, sản phẩm

139

PHẦN MỞ ĐẦU
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sự phát
triển vượt bậc và nhanh chóng của khoa học và cơng nghệ. Một thời đại mà ứng dụng
của công nghệ thông tin được tìm thấy ở khắp mọi nơi và chỉ cần có mạng internet đã
có thể thực hiện được hầu như mọi thứ. Vì thế chúng em đã quyết định thực hiện đề tài

“Xây dựng Website học tiếng Anh sử dụng Spring Framework và ReactJS” bởi vì
các động lực sau.
Ta có thể thấy, ở thời điểm hiện tại tình hình dịch Covid – 19 ở nước ta đang ở đã
giảm bớt phần nào nhưng việc tập trung vẫn có thể đem lại nhiều rủi ro. Bên cạnh đó,
xã hội ngày nay phát triển một cách nhanh chóng, mọi người ln bận rộn các cơng việc
cá nhân của bản thân. Vì vậy, mọi người luôn phải tranh thủ từng phút từng giây để nâng
cao bản thân. Do đó, nhóm chúng em đưa ra ý tưởng này để giúp cho mọi người có thể
bắt đầu việc học mọi lúc, mọi nơi mà phù hợp với bản thân và khơng mất chi phí và thời
13


gian đi lại. Và đồng thời website này cũng là nơi để cho người dùng có thể tìm kiếm các
khóa học đúng như mong muốn một cách dễ dàng.
2. MỤC TIÊU ĐỀ TÀI
● Xây dựng website cho học viên có thể học online, giáo viên có thể xây dựng khóa
học và dạy học online và dành cho quản trị quản trị viên quản trị cơ sở dữ liệu.
● Vận dụng thành các cơng cơng nghệ mới, ngơn ngữ lập trình hiện đại vào để xây
dựng website của đề tài.
3. PHƯƠNG PHÁP THỰC HIỆN
Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:
● Các kỹ thuật phân tích thiết kế hệ thống
● Tìm hiểu các thư viện hỗ trợ cho đề tài ở ReactJS
● Tìm hiểu về framework, ở đây là Spring Framework
Tham khảo các ứng dụng đang được sử dụng trên thị trường

14


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

1.1. Spring Framework
1.1.1. Giới thiệu về Spring Framework

Hình 1.1. Logo Spring Framework [1]

Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng
triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng
lại code… [2]
Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB;
trong suốt: hoạt động một cách trong suốt với lập trình viên).Spring là một mã nguồn
mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn.
Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là:
Dependency Injection và Aspect Oriented Programming.Những tính năng core (cốt lõi)
của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web.
Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn
dựa trên mơ hình sử dụng POJO (Plain Old Java Object)
1.1.2. Ưu điểm
● Tạo ứng dụng một cách độc lập, có thể chạy trên cả nền tảng Java Web
● Cho phép nhúng trực tiếp các web server như Jetty, Tomcat,… mà không cần
phải triển khai các file WAR.
● Cung cấp nhiều plugin
● Tối ưu hóa cơng đoạn cấu hình cho ứng dụng, khơng sinh ra code cấu hình và
nó cũng khơng u cầu người dùng phải cấu hình lại bằng XML. Từ đó, giúp
tiết kiệm thời gian viết code và tăng năng suất lao động.
15


● Có thể đóng gói ứng dụng Spring dưới dạng là file JAR và có thể dễ dàng khởi
động ứng dụng chỉ với một câu lệnh ngắn gọn, quen thuộc: java – jar,…
● Giảm thiểu thời gian phát triển code, tăng hiệu suất phát triển chung của cả dự

án.
● Dễ dàng tích hợp các mơ-đun liên quan như Spring-MVC, Spring Data, Spring
Security, Spring Cloud,v.v…
● Ngồi ra cịn có nhiều plugins để phát triển nhanh chóng bằng các cơng cụ như
Build như Maven hoặc Gradle..
1.2. ReactJS
1.2.1. Giới thiệu về ReactJS

Hình 1.2 Logo ReactJS [3]

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 ở tầng Client nữa. [4]
React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng
cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM.
1.2.2. Ưu điểm của ReactJS
Sau đây là các ưu điểm của ReactJS:
● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website
dễ dàng hơn bởi vì bạn khơng cần phải code nhiều như khi tạo trang web thuần
chỉ dùng JavaScript, HTML và nó đã cung cấp cho bạn đủ loại “đồ chơi” để bạn
có thể dùng cho nhiều trường hợp.
● Tái sử dụng các Component: Nếu bạn xây dựng các Component đủ tốt, đủ flexible
để có thể thỏa các “yêu cầu” của nhiều dự án khác nhau, bạn chỉ tốn thời gian
16