(Đồ án tốt nghiệp) xây dựng website học 2 toán tiếng anh cho học sinh cấp 01 bằng công nghệ mern stack

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

XÂY DỰNG WEBSITE HỌC 2TỐN &
TIẾNG ANH CHO HỌC SINH CẤP 01 BẰNG
CÔNG NGHỆ MERN STACK

GVHD: TS. NGUYỄN THÀNH SƠN
SVTH: TRẦN THỊ LIÊN
SVTH: NGUYỄN HỒI NAM

SKL007101

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


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

TRẦN THỊ LIÊN – 16110376
NGUYỄN HOÀI NAM – 16110393
Đề Tài:

XÂY DỰNG WEBSITE HỌC 2TOÁN &
TIẾNG ANH CHO HỌC SINH CẤP 01
BẰNG CƠNG NGHỆ MERN STACK

KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT
GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

1


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

TRẦN THỊ LIÊN – 16110376
NGUYỄN HOÀI NAM – 16110393
Đề Tài:

XÂY DỰNG WEBSITE HỌC TOÁN &
TIẾNG ANH CHO HỌC SINH CẤP 01
BẰNG CƠNG NGHỆ MERN STACK
KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT
GIÁO VIÊN HƯỚNG DẪN
TS. NGUYỄN THÀNH SƠN

KHÓA 2016 - 2020

2


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

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT

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

*******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1 : TRẦN THỊ LIÊN.

MSSV 1: 16110376

Họ và tên Sinh viên 2 : NGUYỄN HOÀI NAM

MSSV 2: 16110393

Ngành: Công nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE H ỌC TOÁN & TIẾNG ANH CHO HỌC SINH CẤP 01
BẰNG CÔNG NGHỆ MERN STACK
Họ và tên Giáo viên hướng dẫn: ………………………………………………..
NHẬN XÉT
1. Về nội dung đề tài & khối lượng thực hiện:

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

2. Ưu điểm:

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
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, ngày

tháng năm 2020

Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)

3


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

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CNTT

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

*******

*******

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

Họ và tên Sinh viên 1 : TRẦN THỊ LIÊN.
Họ và tên Sinh viên 2 : NGUYỄN HỒI NAM

MSSV 1:
16110376
MSSV 2: 16110393

Ngành: Cơng nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE H ỌC TỐN & TIẾNG ANH CHO HỌC SINH CẤP 01
BẰNG CƠNG NGHỆ MERN STACK
Họ và tên Giáo viên phản biện: ………………………………………………….
NHẬN XÉT
1. Về nội dung đề tài & 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, ngày tháng năm 2020
Giáo viên phản biện
(Ký & ghi rõ họ tên)
4


LỜI CẢM ƠN

Q trình thực hiện khóa luận tốt nghiệp là giai đoạn quan trọng nhất
trong quãng đời mỗi sinh viên. Khóa luận tốt nghiệp là tiền đề nhằm trang bị
cho chúng em những kỹ năng nghiên cứu, những kiến thức quý báu trước
khi bước vào những công việc thực tế.
Trước hết, nhóm chúng em bao gồm Trần Thị Liên và Nguyễn Hoài
Nam xin chân thành cảm ơn quý Thầy, Cơ khoa Cơng nghệ Thơng tin đã tận
tình chỉ dạy và trang bị cho chúng em những kiến thức cần thiết trong suốt
thời gian ngồi trên ghế giảng đường, làm nền tảng cho chúng em có thể hồn
thành được khóa luận này.
Chúng em xin trân trọng cảm ơn thầy Nguyễn Thành Sơn đã tận tình
giúp đỡ, định hướng cách tư duy và cách làm việc khoa học, hiệu quả. Đó là
những góp ý hết sức q báu khơng chỉ trong q trình thực hiện khóa luận
này mà cịn là hành trang tiếp bước cho chúng em trong quá trình học tập và
lập nghiệp sau này.

Và cuối cùng, xin gửi lời cảm ơn đến gia đình, bạn bè, tập thể lớp
161101, những người luôn sẵn sàng sẻ chia và giúp đỡ trong học tập và cuộc
sống. Mong rằng, chúng ta sẽ mãi mãi gắn bó với nhau.
Xin chúc những điều tốt đẹp nhất sẽ luôn đồng hành cùng mọi người.

5


TPHCM

TIN

ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP
Họ và tên sinh viên 1: Trần Thị Liên
Họ và tên sinh viên 2: Nguyễn Hồi Nam
Ngành: Cơng nghệ thơng tin
Tên đề tài: XÂY DỰNG WEBSITE HỌC TOÁN & TIẾNG ANH CHO HỌC
SINH CẤP 01 BẰNG CÔNG NGHỆ MERN STACK
Giáo viên hướng dẫn: ……………………………….
Nhiệm vụ khóa luận:
-

Tìm hiểu và vận dụng được cơng nghệ MernStack, bao gồm tìm hiểu và vận
dụng:
+ MongoDB
+ ExpressJS
+ ReactJS
+ NodeJS

-

Xây dựng được các chức năng cơ bản của một website học tập: xem nội dung
bài học, làm kiểm tra, trao đổi, đăng nhập, đăng xuất, …

Đề cương chi tiết:
1. Phần mở đầu
1.1. Tính cấp thiết của đề tài
1.2. Mục đích của đề tài
1.3. Cách tiếp cận và phương pháp nghiên cứu
•

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


•

Phạm vi nghiên cứu

1.4. Kết quả dự kiến đạt được
2. Phần nội dung
2.1. Chương 1: Cơ sở lí thuyết
2.1.1. Tìm hiểu MernStack
•

Tìm hiểu MongoDB

•

Tìm hiểu ExpressJS

•

Tìm hiểu ReactJS

•

Tìm hiểu NodeJS

2.2. Chương 2: Khảo sát hiện trạng và xác định yêu cầu

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

Khảo sát các ứng dụng liên quan

•

Nhận xét ưu nhược điểm

•

Nêu kết luận

2.2.2. Xác định yêu cầu
•

Nhận diện tác nhân và các chức năng

•

Xác định lược đồ Usecase

•

Mơ tả usecase

2.3. Chương 3: Thiết kế phần mềm
2.3.1. Thiết kế hệ thống
2.3.2. Thiết kế dữ liệu
2.4. Chương 4: Thiết kế giao diện
2.4.1. Giao diện Admin
2.4.2. Giao diện người dùng
2.5. Chương 5: Cài đặt và kiểm thử
2.5.1. Cài đặt
7


•

Môi trường thử nghiệm và cài đặt

2.5.2. Kiểm thử
3. Phần kết luận
3.1. Những kết quả đạt được
3.2. Ưu điểm
3.3. Hạn chế
3.4. Hướng phát triển
4. Tài liệu tham khảo
KẾ HOẠCH THỰC HIỆN

STT

1

2

THỜI GIAN

03/2020

03/2020

3

15/04/2020 –
20/04/2020

4

15/04/2020 –
20/04/2020

5

20/04/2020 –
25/04/2020

6

7

8

25/04/2020 –
05/2020
05/2020 –
06/2020

05/2020 –
06/2020


8

9

10

11

12

13

14

15

16

17

18

19

05/2020 –
06/2020

05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
05/2020 –
06/2020
06/2020

27/06/2020
–

01/07/2020

20

01/07/2020
–


10/07/2020

9

21

11/07/2020
–
15/07/2020

22

16/07/2020
–
19/07/2020

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

Trần Thị Liên
TS. Nguyễn Thành Sơn

10


Mục lục
Phần 1: MỞ ĐẦU............................................................................................................................... 15
1.

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

2.

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

3.

Cách tiếp cận và phương pháp nghiên cứu........................................................................... 15

4.

Kết quả dự kiến đạt được....................................................................................................... 16

Phần 2: NỘI DUNG........................................................................................................................... 17
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT.................................................................................................. 17
1.1.

MERNSTACK..................................................................................................................... 17

1.1.1.

MernStack là gì?......................................................................................................... 17

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU..........................................21
2.1. KHẢO SÁT HIỆN TRẠNG.................................................................................................... 21
2.1.1. Tienganh123 ( )................................................................ 21
2.1.2.

Luyenthi123 ( )............................................................ 23

2.1.3.

Kết luận........................................................................................................................ 24

2.2. XÁC ĐỊNH YÊU CẦU...............................................................................................................24
2.2.1. Nhận diện tác nhân và các chức năng trong sơ đồ usecase............................................ 24
2.2.2. Lược đồ usecase................................................................................................................ 25
2.2.3. Mô tả usecase.................................................................................................................... 25
CHƯƠNG 3: THIẾT KẾ PHẦN MỀM............................................................................................ 29
3.1.

THIẾT KẾ HỆ THỐNG..................................................................................................... 29
THIẾT KẾ DỮ LIỆU...................................................................................................... 32

3.2.
3.2.1.

Mô hình ERD............................................................................................................... 32

3.2.2.

Mơ hình cơ sở dữ liệu.................................................................................................. 33

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN............................................................................................. 43
4.1.

THIẾT KẾ GIAO DIỆN ADMIN...................................................................................... 43

4.1.1.

Giao diện màn hình đăng nhập.................................................................................. 43

4.1.2.

Giao diện màn hình trang chủ Admin....................................................................... 44

4.1.3.

Giao diện quản lý........................................................................................................ 45

4.1.4.

Giao diện thêm............................................................................................................ 46

4.1.5.

Giao diện sửa............................................................................................................... 48

4.1.6.

Giao diện xóa............................................................................................................... 49

4.2.

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG.......................................................................... 50

4.2.1.

Giao diện màn hình chính.......................................................................................... 50

4.2.2.

Giao diện nội dung bài học......................................................................................... 53

4.2.3.

11
Giao diện kiểm tra.......

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ.......................................................................................
5.1. CÀI ĐẶT...............................................................................................................................


Hướng dẫn tạo project

5.1.1.
5.1.2.Tạo project react js ..................................................................................................
5.2.

KIỂM THỬ......................................................................................

PHẨN KẾT LUẬN .........................................................................................................................

1.

Những kết quả đạt được.................................................................

2.

Hạn chế ............................................................................................

3.

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

TÀI LIỆU THAM KHẢO ..............................................................................................................
HƯỚNG DẪN SỬ DỤNG...............................................................................................................

12


DANH MỤC BẢNG BIỂU
Bảng 1Nhận diện tác nhân và các chức năng trong sơ đồ usecase.................................................. 24
Bảng 2 Usecase đăng nhập................................................................................................................. 25
Bảng 3 Usecase đăng ký..................................................................................................................... 26
Bảng 4 Usecase đăng xuất.................................................................................................................. 27
Bảng 5 Usecase thêm câu hỏi............................................................................................................. 27
Bảng 6 Usecase sửa câu hỏi................................................................................................................ 27
Bảng 7 Usecase xóa câu hỏi................................................................................................................ 28
Bảng 8 ExamContentSchema............................................................................................................ 34
Bảng 9 ExamSchema.......................................................................................................................... 35
Bảng 10 LessionContentSchema....................................................................................................... 35
Bảng 11 MemberSchema................................................................................................................... 36

Bảng 12 NewsSchema......................................................................................................................... 37
Bảng 13 QuestionsSchema................................................................................................................. 38
Bảng 14 ResultSchema....................................................................................................................... 39
Bảng 15 GameSchema........................................................................................................................ 41
Bảng 16 ForumSchema...................................................................................................................... 42
Bảng 17 . Danh sách xử lý đăng nhập............................................................................................... 43
Bảng 18 Danh sách xử lý giao diện trang chủ Admin...................................................................... 44
Bảng 19 Danh sách xử lý chức năng quản lý câu hỏi....................................................................... 46
Bảng 20 Danh sách xử lý Thêm câu hỏi............................................................................................ 47
Bảng 21 Danh sách xử lý Sửa câu hỏi............................................................................................... 48
Bảng 22 Danh sách xử lý Xóa câu hỏi............................................................................................... 49
Bảng 23 Danh sách xử lý giao diện chính của người dùng.............................................................. 51
Bảng 24 Danh sách xử lý nội dung bài học....................................................................................... 54
Bảng 25 Danh sách xử lý chức năng kiểm tra.................................................................................. 56
Bảng 26 Kiểm thử............................................................................................................................... 59

13


DANH MỤC HÌNH ẢNH
Hình 1 Giao diện website tienganh123.............................................................................................. 21
Hình 2 Giao diện website Luyenthi123............................................................................................. 23
Hình 3 Lược đồ Usecase..................................................................................................................... 25
Hình 4 Sơ đồ sequence diagram đăng nhập..................................................................................... 29
Hình 5 Sơ đồ sequence diagram đăng ký.......................................................................................... 29
Hình 6 Sơ đồ sequence diagram đăng xuất....................................................................................... 30
Hình 7 Sơ đồ sequence diagram thêm câu hỏi.................................................................................. 30
Hình 8 Sơ đồ sequence diagram sửa câu hỏi.................................................................................... 31
Hình 9 Sơ đồ sequence diagram xóa câu hỏi.................................................................................... 31
Hình 10 Mơ hình ERD....................................................................................................................... 32

Hình 11 Giao diện đăng nhập Admin................................................................................................ 43
Hình 12 Giao diện trang chủ Admin................................................................................................. 44
Hình 13 Giao diện quản lý câu hỏi.................................................................................................... 45
Hình 14 Giao diện thêm câu hỏi........................................................................................................ 46
Hình 15 Giao diện sửa câu hỏi........................................................................................................... 48
Hình 16 Giao diện xóa câu hỏi........................................................................................................... 49
Hình 17 Giao diện chính của người dùng......................................................................................... 50
Hình 18 Giao diện chính của người dùng (tt)................................................................................... 50
Hình 19 Giao diện chính của người dùng (tt)................................................................................... 51
Hình 20 Giao diện nội dung bài học.................................................................................................. 53
Hình 21 Giao diện nội dung bài học (tt)............................................................................................ 53
Hình 22 Giao diện kiểm tra............................................................................................................... 54
Hình 23 Giao diện kiểm tra (tt)......................................................................................................... 55
Hình 24 Đăng nhập trang Admin...................................................................................................... 65
Hình 25 Thực hiện chức năng thêm - xóa - sửa................................................................................ 66

14


Phần 1: MỞ ĐẦU
1. Tính cấp thiết của đề tài
Trong cuộc sống tất bật hiện nay, mọi việc đều được đơn giản và tối
ưu hóa thời gian thơng qua việc ứng dụng công nghệ thông tin vào xử lý các
công việc hàng ngày. Theo thời gian, ngày càng có nhiều công nghệ mới
thuộc lĩnh vực công nghệ thông tin ra đời, và việc cập nhật, tiếp thu công
nghệ mới để tối ưu công việc là đều cấp thiết nếu không muốn bị tuột hậu so
với lượng kiến thức khổng lồ của ngành.
Bên cạnh cơng nghệ phát triển thì nhu cầu học tập online của học sinh,
sinh viên cũng ngày càng gia tăng. Các Website học tập lần lượt mọc lên như
nấm, nhưng thực tế rằng, các Website học tập được tạo nên đa số đều hướng về

các đối tượng là người lớn, học sinh cấp 02, cấp 03, sinh viên,… Nhưng đối với
thực tế hiện nay, các em cấp 01 cũng đang có nhu cầu học tập thêm rất nhiều, và
các em cũng đã được tiếp cận công nghệ từ rất sớm.

Chính vì thế mà nhóm đã chọn đề tài “Xây dựng Website học toán &
tiếng anh cho học sinh cấp 01 bằng công nghệ Mern Stack”, nhằm để học
hỏi công nghệ mới đang rất được ưa chuộng là MernStack để có thể nâng
cao kiến thức chuyên ngành và ứng dụng chúng vào thực tiễn khi ra trường,
đồng thời cung cấp cho các em học sinh cấp 01 một nơi để học tập, rèn
luyện thêm kiến thức.
2. Mục đích của đề tài

Đề tài ra đời với mục đích giúp sinh viên tổng hợp lại các kiến thức đã
tiếp thu được trong q trình học, đồng thời có cái nhìn tổng quan về lập trình.

Là cơ hội để sinh viên tìm hiểu các công nghệ mới nhất và ứng dụng
chúng vào thưc tiễn.
Xây dựng website giáo dục dành cho trẻ em, tạo sân chơi mới cho trẻ
em phát triển, học hỏi.
3. Cách tiếp cận và phương pháp nghiên cứu
•

Đối tượng nghiên cứu:
- Tìm hiểu MernStack: định nghĩa MernStack và các thành phần.
15


•

Phạm vi nghiên cứu: Với bài luận văn này, nhóm em sẽ tập trung tìm

hiểu và thực hiện các nội dung sau:
-

Tìm hiểu các nội dung, kiến thức về MernStack

-

Sau khi tìm hiểu, nhóm sẽ tập trung vận dụng những kiến thức đã
tìm hiểu để xây dựng website học tập toán và tiếng anh cho học
sinh cấp 01.

4. Kết quả dự kiến đạt được
•

Hiểu rõ kiến thức về MernStack: định nghĩa và các thành phần.

•

Xây dựng thành cơng website học tập toán và tiếng anh cho học sinh
cấp 01

16


Phần 2: NỘI DUNG
CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.1.

MERNSTACK

1.1.1. MernStack là gì?

Mern Stack là bộ combo open source các cơng nghệ liên quan đến
JavaScript: MongoDB, ExpressJS, React/React Native, NodeJS.
Mern: là viết tắt của 04 công cụ: M – MongoDB, E – ExpressJS, R –
ReactJS, N – NodeJS.
Stack: một chương trình hồn thiện khơng chỉ có code, mà cịn phải có
nền tảng hệ điều hành và những phần mềm đi kèm (web server, cơ sở dữ
liệu). Người ta gom những thứ này lại với nhau tạo thành technical stack.
❖ MongoDB:
▪

MongoDB là một cơ sở dữ liệu mã nguồn mở và là cơ sở
dữ liệu NoSQL hàng đầu, được hàng triệu người sử dụng.
MongoDB được viết bằng C++.

▪

Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt
động trên các khái niệm Collection và Document, nó cung
cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng
dễ dàng.
Một số thuật ngữ thường gặp trong MongoDB:

▪

o

Database: là một Ô chứa dữ liệu ở mức vật lý
(physical), mỗi database sẽ có nhiều collection và

được thiết lập lưu trữ ở một nơi trong máy chủ máy
tính. Một máy chủ MongoDB thường có thể tạo nhiều

cơ sở dữ liệu.
o

Collection: là nhóm các tài liệu (document), nó tương
đương với một bảng (table) trong CSDL thông thường
nên mỗi collection sẽ thuộc về một database
17


duy nhất. Tuy nhiên nó có một sực khác biệt đó là nó
khơng có ràng buộc Relationship như các hệ quản trị
CSDL khác nên việc truy xuất rất nhanh, chính vì
thế mỗi collection có thể chứa nhiều thể loại khác
nhau không giống như table trong hệ quản trị mysql
là các field cố định.
o

Document: có cấu trúc tương tự như kiểu dữ liệu
JSON, nghĩa là sẽ có các cặp (key => giá trị) nên nó
có tính năng động rất lớn. Document ta có thể hiểu
nó giống như các record dữ liệu trong MYSQL, tuy
nhiên nó có sự khác biệt là các cặp (key => value)
có thể khơng giống nhau ở mỗi document.

❖

ExpressJS:

▪

Express.js là một trong những framework phổ biến nhất
trong Node.js, nó là một framework đơn giản nhưng đủ
mạnh để giúp chúng ta tiếp cận cũng như phát triển
website dựa trên framwork này.

▪

Xây dựng trên nền tảng của Nodejs. Nó cung cấp các tính
năng mạnh mẽ để phát triển web hoặc mobile.

▪

Router là một Object (khác với Routing), nó là một
instance riêng của middleware và routes. Chính vì nó là
một instance của middleware và route nên nó có các chức
năng của cả hai. Chúng ta có thể gọi nó là một miniapplication.

▪

Các Application dùng ExpressJS làm core đều có phần
Router được tích hợp sẵn trong đó.

▪

Router hoạt động như một middleware nên chúng ta có
thể dùng nó như một arguments. Hoặc dùng nó như một
arguments cho route khác.
18

❖

ReactJS:

Hiện nay các Web Dev đang nổi lên mơ hình web single-

▪

page. Web single-page là tất cả các thao tác xử lý của
trang web đều được diễn ra trên cùng một trang. Việc này
giúp nâng cao trải nghiệm người dùng, các thao tác xử lý
của người dùng và animation,... đều được thực hiện một
cách nhanh chóng và mượt mà. So với web single-page
thì các web cũ xử lý dữ liệu khá lâu do phải phụ thuộc
khá nhiều vào khả năng xử lý của server nên thường
xuyên load trang mới hay nhưng trang nhiều logic sẽ
khiến một số chức năng không được như ý muốn và dễ
sinh ra Bug làm giảm trải nghiệm người dùng. Từ đó web
single-page ra đời và các ngôn ngữ phát triển single-page
ngày càng phát triển. Trong số đó ReactJS đang là một
thư viện mạnh nhất về phát triển single-page hiện nay.
▪

React.JS là một thư viện Javascript dùng để xây dựng
giao diện người dùng do FaceBook tạo ra.

Cho phép những nhà phát triển web tạo ra giao diện người
dung nhanh chóng. Phần Views của Reactjs thường được

hiển thị bằng việc chủ yếu dung các component mà chứa
các component cụ thể hoặc các thẻ HTML.
❖ NodeJS:
▪

▪

NodeJS là một hệ thống phần mềm được thiết kế để viết
các ứng dụng internet có khả năng mở rộng, đặc biệt là
máy chủ web. Chương trình được viết bằng JavaScript, sử
dụng kỹ thuật điều khiển theo sự kiện, nhập/ xuất không
đồng bộ để tối thiểu tổng chi phí và tối đa khả năng mở
rộng. NodeJS bao gồm có V8 JavaScript Engine của
Google, libUV và vài thư viện khác NodeJS.
19


▪

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác
nhau từ Window cho tới Linux, OSX nên đó cũng là một
lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng
JavaScript Module khác nhau giúp đơn giản hóa việc lập
trình và giảm thời gian ở mức thấp nhất. NodeJS được xây
dựng và chạy trên V8 Engine. V8 Engine dựa trên C++.
Vì vậy, cuối cùng trái tim của NodeJS chính là C++.

▪

Ý tưởng chính của NodeJS là sử dụng non – blocking,

hướng sự vào ra dữ liệu thông qua các tác vụ thời gian
thực một cách nhanh chóng. Bởi vì NodeJS có khả năng
mở rộng nhanh chóng, khả năng xử lý một số lượng lớn
các kết nối đồng thời bằng thông lượng cao. Nếu như các
ứng dụng web truyền thống, các request tajora một luồng
xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc
tài nguyên của hệ thống sẽ được sử dụng khơng hiệu quả.
Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng
luồng đơn (Single – Threaded), kết hợp với non –
blocking I/O để thực thi các request, cho phép hỗ trợ
hang chục ngàn kết nối đồng thời.

20


CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
2.1. KHẢO SÁT HIỆN TRẠNG
2.1.1. Tienganh123 ( )
❖ Các giao diện chính

Hình 1 Giao diện website tienganh123
❖ Những tính năng chính
• Đăng nhập, đăng ký
• Đăng nhập qua facebook, gmail, yahoo
• Học tập theo nội dung từng lớp
• Học tập qua video
• Học tập qua trị chơi
• Rèn luyện kỹ năng
21

• Làm kiểm tra
• Thi đấu
❖ Ưu điểm
•

Giao diện dễ thương

•

Đảm bảo đầy đủ chức năng cơ bản của một website học tập

•

Nhiều chức năng sáng tạo hỗ trợ việc học tập khơng nhàm chán

Dễ sử dụng
❖ Khuyết điểm
•
•

Giao diện dàn trãi khơng làm nổi bật được chức năng chính
của website

22


2.1.2. Luyenthi123 ( )
❖ Các giao diện chính

Hình 2 Giao diện website Luyenthi123
❖ Những tính năng chính
•

Đăng nhập, đăng ký

•

Học tập theo lớp

•

Làm kiểm tra

•

Thi đấu

•

Diễn đàn trao đổi
23