Xây Dựng Website Quản Lý Trung Tâm Anh Ngữ Sử Dụng Mean Stack.pdf

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM K THUT
THNH PH H CH MINH

ẩ1771*+,3
1*ơ1+&é1*1*+7+é1*
7,1

;ặ<'1*:(%6,7(481/ộ7581*7ặ0$1+
1*6'1*0($167$&.

*9+'1*8<17517+,91
697+7519,7%2
0669
697+2ơ191+,3
0669

SKL0 0 7 0 8 5

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


z
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ TRUNG TÂM
ANH NGỮ SỬ DỤNG MEAN STACK
SVTH : TRẦN VIẾT BẢO

MSSV : 16110017
SVTH : ĐỒN VĂN HIỆP
MSSV : 16110074
Khóa : 2016 – 2020
Ngành : CÔNG NGHỆ THÔNG TIN
GVHD : ThS. NGUYỄN TRẦN THI VĂN

TP. Hồ Chí Minh, tháng 07 năm 2020


z

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

ĐỒ ÁN TỐT NGHIỆP

XÂY DỰNG WEBSITE QUẢN LÝ TRUNG TÂM
ANH NGỮ SỬ DỤNG MEAN STACK
SVTH : TRẦN VIẾT BẢO
MSSV : 16110017
SVTH : ĐỒN VĂN HIỆP
MSSV : 16110074
Khóa : 2016 – 2020
Ngành : CÔNG NGHỆ THÔNG TIN
GVHD : ThS. NGUYỄN TRẦN THI VĂN

TP. Hồ Chí Minh, tháng 07 năm 2020

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc
----***---TP. Hồ Chí Minh, ngày … tháng … năm 2020

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP
Họ và tên sinh viên

MSSV

Lớp

Trần Viết Bảo

16110017

16110CLST2

Đồn Văn Hiệp

16110074

16110CLST2

Ngành: Cơng nghệ thơng tin
Giáo viên hướng dẫn: ThS. Nguyễn Trần Thi Văn

ĐT: 0983 11 80 25

Ngày nhận đề tài: 24/02/2020

Ngày nộp đề tài: 01/07/2020

1.
2.


3.




Tên đề tài: Xây dựng website quản lý trung tâm Anh ngữ sử dụng MEAN Stack.
Nội dung thực hiện đề tài:
Lý thuyết:
Tìm hiểu và sử dụng cơng nghệ MEAN Stack.
Nghiên cứu và sử dụng RESTful API.
Thực hành:
Phân tích các chức năng nghiệp vụ của các mơ hình trung tâm tiếng Anh.
Xây dựng các chức năng chính cho trang quản lý trung tâm.
Kiểm thử.
Báo cáo sản phẩm.
Sản phẩm:
Trang quản lí thơng tin của trung tâm Anh ngữ.
Trang giao diện trung tâm để người dùng tương tác với các khóa học.
Phần API xử lý các chức năng.
TRƯỞNG NGÀNH

GIÁO VIÊN HƯỚNG DẪN

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

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


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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1 : Trần Viết Bảo

MSSV 1: 16110017

Họ và tên Sinh viên 2 : Đoàn Văn Hiệp

MSSV 2: 16110074

Ngành: Công nghệ Thông tin.
Tên đề tài : Xây dựng website quản lý trung tâm Anh ngữ sử dụng MEAN Stack.
Họ và tên Giáo viên hướng dẫn : Th.S Nguyễn Trần Thi Vă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 : ............................... ( Bằng chữ: ................................................................................. )
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)


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

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1 : Trần Viết Bảo

MSSV 1: 16110017

Họ và tên Sinh viên 2 : Đoàn Văn Hiệp

MSSV 2: 16110074

Ngành: Công nghệ Thông tin
Tên đề tài : Xây dựng website quản lý trung tâm Anh ngữ sử dụng MEAN 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 : ............................... ( Bằng chữ: ................................................................................. )
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)


LỜI CẢM ƠN
Có thể hồn thành được đề tài khóa luận, khơng thể khơng nói đến sự hướng dẫn tận tình
của q 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. Chúng em chân thành cảm ơn.
Trước hết, chúng em tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Đăng Quang – Trưởng ngành
Công Nghệ Thông Tin, trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh và
thầy Nguyễn Trần Thi Văn – Giảng viên 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ận tình hướng dẫn, truyền đạt những kiến
thức quý báu để nhóm thực hiện trọn vẹn đề tài. Với những kiến thức, nhận xét đã giúp
chúng em chỉnh sửa, khắc phục những thiếu sót và học hỏi thêm những kiến thức thực tế.
Cuối cùng, nhóm xin kính chúc q thầy cơ có nhiều sức khỏe và thành công trong sứ
mệnh tiếp bước cho các thế hệ tiếp theo những kiến thức, kinh nghiệm quý báu.

Chúng em xin chân thành cảm ơn.
Thành phố Hồ Chí Minh, ngày 27 tháng 06 năm 2020
Trần Viết Bảo, Đoàn Văn Hiệp
.

i


TÓM TẮT ĐỒ ÁN TỐT NGHIỆP
Đề tài: Xây dựng website quản lý trung tâm Anh ngữ.
1. Các vấn đề nghiên cứu
 Tìm hiểu về Angular, Nodejs, RESTful API và Express framework.
 Mơ hình, chức năng nghiệp vụ của các trung tâm giảng dạy tiếng Anh.
 API của các bên thứ ba như Momo, CAPTCHA, Google Drive.
2. Các vấn đề cần giải quyết
 Xây dựng ứng dụng cho phép chủ sở hữu quản lý thông tin của trung tâm.
 Bảo mật về thông tin.
 Phân quyền truy cập để giảng viên, nhân viên có thể sử dụng.
 Xử lý các yêu cầu nhanh, hạn chế lỗi.
 Gửi thông báo, tài liệu cho học viên.
3. Các phương pháp giải quyết vấn đề
 Xây dựng một ứng dụng web để dễ dàng quản lý thông tin của trung tâm.
 Sử dụng JSON web token để tăng tính bảo mật
 Sử dụng MEAN Stack giúp tạo trang web nhanh và mạnh mẽ.
 Sử dụng mail server của Google để gửi mail.
4. Kết quả đạt được
 Hoành thành trang web quản lý trung tâm Anh ngữ với các chức năng quản lý
thông tin, thống kê, gửi thông báo cho học viên.
 Một trang web dành cho người dùng có thể đăng kí khóa học và tương tác với
trung tâm.

 Phân quyền chức năng cho người quản trị, giảng viên và nhân viên.
5. Kết luận
Mọi thông tin của trung tâm đều được xử lý và đưa lên trang web quản lý giúp
chủ sỡ hữu có cái nhìn về định hướng phát triển, hạn chế sự sai sót, tiết kiệm
được nhiều thời gian và cơng sức trong việc quản lý.

ii


TÓM TẮT ĐỒ ÁN BẰNG TIẾNG ANH(ABSTRACT)
1. Researches to conduct:
 Angular, Nodejs, RESTful API and Express framework.
 Models, functional operation of the English centers.
 Third party APIs like Momo, CAPTCHA, Google Drive.
2. Problems to solve:
 Building applications that allow owners to manage information of the center.
 Assigning access to lecturers and staff.
 Handling requests quickly, limiting errors.
 Sending notices and documents to students.
3. Solutions:
 Build a web application for easy management of the center's information.
 Use JSON web token for increase security.
 Use MEAN Stack helps create fast and powerful websites.
 Use Google's mail server to send mail.
4. Achivements:
 Establishment of an English center management website with information
management, statistics and notifications for students.
 A website for users to register for courses and to interact with the center.
 Decentralization functions to administrators, lecturers and staff.
5. Conclusion:

 All information of the center is processed and posted on the management website
to help owners have a view of the development orientation, limiting errors, saving
a lot of time and effort in management.

iii


MỤC LỤC
NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP ................................................................................. i
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ................................................ ii
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN .................................................. iii
LỜI CẢM ƠN ..................................................................................................................... i
TÓM TẮT ĐỒ ÁN TỐT NGHIỆP .................................................................................. ii
TÓM TẮT ĐỒ ÁN BẰNG TIẾNG ANH(ABSTRACT) ............................................... iii
MỤC LỤC ......................................................................................................................... iv
DANH MỤC CÁC CHỮ VIẾT TẮT ............................................................................. vii
DANH MỤC CÁC BẢNG BIỂU ................................................................................... viii
DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ ..................................................................... x
Chương 1: TỔNG QUAN ................................................................................................. 1
1.1 Mục tiêu đề tài ........................................................................................................... 1
1.2 Mô tả ứng dụng web ................................................................................................. 1
Chương 2: CƠ SỞ LÝ THUYẾT ..................................................................................... 2
2.1 Nền tảng phát triển ................................................................................................... 2
2.2 Thư viện sử dụng ........................................................................................................ 2
2.2 Công nghệ sử dụng ................................................................................................... 3
2.2.1 Nodejs.............................................................................................................. 3
2.2.2 Express ............................................................................................................ 3
2.2.3 MongoDB ........................................................................................................ 4
2.2.4 Angular ............................................................................................................ 4
2.2.5 Dịch vụ bên ngoài ........................................................................................... 5

Chương 3: XÁC ĐỊNH VÀ MƠ HÌNH HĨA U CẦU ............................................ 10
3.1 Yêu cầu người dùng ................................................................................................ 10
iv


3.2 Yêu cầu hệ thống ..................................................................................................... 10
3.2.1 Yêu cầu chức năng ........................................................................................ 10
3.2.2 Yêu cầu phi chức năng .................................................................................. 34
Chương 4: PHÂN TÍCH VÀ THIẾT KẾ ...................................................................... 35
4.1 Phân tích và thiết kế cơ sở dữ liệu ......................................................................... 35
4.1.1 Sơ đồ ERD..................................................................................................... 35
4.1.2 Mô tả các bảng trong database ...................................................................... 35
4.2 Phân tích và thiết kế xử lí ....................................................................................... 38
4.2.1 Kiến trúc hệ thống ......................................................................................... 39
4.2.2 Sequence diagram ......................................................................................... 40
4.3 Đặc tả API................................................................................................................ 41
4.3.1 API đăng nhập ............................................................................................... 41
4.3.2 API liên hệ ..................................................................................................... 42
4.3.3 API giảng viên ............................................................................................... 42
4.3.4 API danh sách lớp học .................................................................................. 43
4.3.5 API học viên .................................................................................................. 43
4.3.6 API khóa học ................................................................................................. 45
4.3.7 API lớp học ................................................................................................... 45
4.3.8 API lớp học phần ........................................................................................... 46
4.3.9 API phòng học ............................................................................................... 48
4.3.10

API quản trị viên ........................................................................................ 48

4.3.11

API gửi mail ............................................................................................... 49

4.3.12

API thời khóa biểu ..................................................................................... 50

4.3.13

API upload ảnh .......................................................................................... 50

4.4 Thiết kế giao diện .................................................................................................... 50
4.4.1 Ở phía người dùng khách .............................................................................. 52
4.4.2 Ở phía trang quản lý ...................................................................................... 59
Chương 5: CÀI ĐẶT VÀ KIỂM THỬ .......................................................................... 80
5.1 Cài đặt ...................................................................................................................... 82
5.1.1 Cài đặt MongoDB ......................................................................................... 82
v


5.1.2 Cài đặt NodeJS .............................................................................................. 82
5.1.3 Cài đặt frameworks ExpressJS ...................................................................... 83
5.1.4 Cài đặt Angular ............................................................................................. 84
5.2 Kế hoạch kiểm thử .................................................................................................. 86
5.2.1 Danh sách các loại kiểm thử ......................................................................... 86
5.2.2 Môi trường kiểm thử ..................................................................................... 86
5.3 Thiết kế kiểm thử .................................................................................................... 86
5.4 Trường hợp kiểm thử ............................................................................................. 86
5.4.1 Đăng nhập ..................................................................................................... 86
5.4.2 Thêm học viên ............................................................................................... 87

5.4.3 Chỉnh sửa lớp học.......................................................................................... 89
5.4.4 Chỉnh sửa thông tin cá nhân .......................................................................... 90
5.5 Kết quả kiểm thử .................................................................................................... 91
5.5.1 Kết quả tổng quan ......................................................................................... 91
5.5.2 Kết quả cụ thể theo từng test case ................................................................. 92
Chương 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .................................................. 93
6.1 Kiến thức đã tìm hiểu ............................................................................................. 93
6.2 Chức năng đã cài đặt .............................................................................................. 93
6.2.1 Trang dành cho người dùng .......................................................................... 93
6.2.2 Trang dành cho Admin và giảng viên ........................................................... 93
6.2.3 Chức năng chung của các actor ..................................................................... 93
6.3 Ưu điểm .................................................................................................................... 94
6.4 Nhược điểm.............................................................................................................. 94
6.5 Hướng phát triển..................................................................................................... 94
DANH MỤC TÀI LIỆU THAM KHẢO ....................................................................... 95

vi


DANH MỤC CÁC CHỮ VIẾT TẮT
API: Application Programming Interface.
STT: Số Thứ Tự.
HTTP: HyperText Transfer Protocol.
URL: Uniform Resource Locator.
JSON: JavaScript Object Notation.
SPAM: Stupid Pointless Annoying Messages.
RDBMS: Relational Database Management System.
SPA: Single Page Application.
NPM: Node Package Manager.
MEAN: MongoDB – Express – Angular - NodeJS

vii


DANH MỤC CÁC BẢNG BIỂU
Bảng 2.1 Phiên bản các công nghệ được sử dụng............................................................... 2
Bảng 2.2 Phiên bản các thư viện được sử dụng .................................................................. 2
Bảng 3.1 Các actor trong hệ thống. ................................................................................... 10
Bảng 3.2 Đặc tả chức năng Admin(Quản trị viên) ........................................................... 10
Bảng 3.3 Đặc tả chức năng Giảng viên ............................................................................. 11
Bảng 3.4 Đặc tả chức năng Nhân viên .............................................................................. 11
Bảng 3.5 Đặc tả chức năng Guest (Khách) ....................................................................... 12
Bảng 3.6 Đặc tả Usecase hệ thống .................................................................................... 22
Bảng 3.7 Đặc tả Usecase đăng nhập ................................................................................. 23
Bảng 3.8 Đặc tả Usecase chăm sóc khách hàng ............................................................... 23
Bảng 3.9 Đặc tả Usecase quản lý danh sách lớp học ........................................................ 24
Bảng 3.10 Đặc tả Usecase giảng viên ............................................................................... 25
Bảng 3.11 Đặc tả Usecase học viên .................................................................................. 25
Bảng 3.12 Đặc tả Usecase khóa học ................................................................................. 26
Bảng 3.13 Đặc tả Usecase lớp học .................................................................................... 27
Bảng 3.14 Đặc tả Usecase lớp học phần ........................................................................... 27
Bảng 3.15 Đặc tả Usecase phòng học ............................................................................... 28
Bảng 3.16 Đặc tả Usecase quản trị viên............................................................................ 29
Bảng 3.17 Đặc tả Usecase thông tin cá nhân .................................................................... 29
Bảng 3.18 Đặc tả Usecase thời khóa biểu ......................................................................... 30
Bảng 3.19 Đặc tả Usecase thống kê .................................................................................. 31
Bảng 3.20 Đặc tả Usecase khóa học ................................................................................. 31
Bảng 3.21 Đặc tả Usecase liên hệ ..................................................................................... 32
Bảng 4.1: Bảng Tài Khoản ................................................................................................ 35
Bảng 4.2: Bảng Quản Trị .................................................................................................. 36

Bảng 4.3 API đăng nhập ................................................................................................... 41
Bảng 4.4 API liên hệ ......................................................................................................... 42
Bảng 4.5 API giảng viên ................................................................................................... 42
Bảng 4.6 API danh sách lớp học ....................................................................................... 43
Bảng 4.7 API học viên ...................................................................................................... 43
Bảng 4.8 API khóa học ..................................................................................................... 45
Bảng 4.9 API lớp học ........................................................................................................ 45
Bảng 4.10 API lớp học phần ............................................................................................. 46
Bảng 4.11 API phòng học ................................................................................................. 48
Bảng 4.12 API quản trị viên.............................................................................................. 48
Bảng 4.13 API gửi mail .................................................................................................... 49
Bảng 4.14 API thời khóa biểu ........................................................................................... 50
Bảng 4.15 API upload ảnh ................................................................................................ 50
viii


Bảng 4.16 Đặc tả màn hình khóa học ............................................................................... 52
Bảng 4.17 Đặc tả màn hình chi tiết lớp học phần ............................................................. 53
Bảng 4.18 Đặc tả màn hình thanh tốn học phí ................................................................ 55
Bảng 4.19 Đặc tả màn hình giới thiệu giảng viên ............................................................. 56
Bảng 4.20 Đặc tả màn hình liên hệ ................................................................................... 57
Bảng 4.21 Đặc tả màn hình đăng nhập ............................................................................. 59
Bảng 4.22 Đặc tả màn hình chăm sóc khách hàng............................................................ 60
Bảng 4.23 Đặc tả màn hình danh sách lớp học ................................................................. 62
Bảng 4.24 Đặc tả màn hình quản lý học viên ................................................................... 64
Bảng 4.25 Đặc tả màn hình quản lý khóa học .................................................................. 66
Bảng 4.26 Đặc tả màn hình quản lý lớp học phần ............................................................ 67
Bảng 4.27 Đặc tả màn hình quản lý lớp học ..................................................................... 69
Bảng 4.28 Đặc tả màn hình quản lý giảng viên ................................................................ 71
Bảng 4.29 Đặc tả màn hình quản lý phịng học ................................................................ 72

Bảng 4.30 Đặc tả màn hình quản lý quản trị viên ............................................................. 73
Bảng 4.31 Đặc tả màn hình thống kê ................................................................................ 75
Bảng 4.32 Đặc tả màn hình thơng tin cá nhân .................................................................. 76
Bảng 4.33 Đặc tả màn hình thời khóa biểu ....................................................................... 77
Bảng 5.1: Các chức năng sẽ kiểm thử ............................................................................... 86
Bảng 5.2: Test case đăng nhập .......................................................................................... 86
Bảng 5.3: Test case thêm học viên .................................................................................... 88
Bảng 5.4: Test case chỉnh sửa lớp học .............................................................................. 89
Bảng 5.5: Test case chỉnh sửa thông tin cá nhân .............................................................. 90
Bảng 5.6: Kết quả test theo từng test case ........................................................................ 92

ix


DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ
Hình 2.1 Sơ đồ hoạt động thanh tốn Momo ...................................................................... 6
Hình 2.2 Sơ đồ hoạt động upload file ................................................................................. 7
Hình 2.3 Sơ đồ hoạt động reCAPTCHA ............................................................................ 8
Hình 3.1 Use case hệ thống .............................................................................................. 13
Hình 3.2 Use case đăng nhập ............................................................................................ 14
Hình 3.3 Use case chăm sóc khách hàng .......................................................................... 14
Hình 3.4 Use case quản lý danh sách lớp học................................................................... 15
Hình 3.5 Use case quản lý giảng viên ............................................................................... 15
Hình 3.6 Use case quản lý học viên ................................................................................. 16
Hình 3.7 Use case quản lý khóa học ................................................................................. 17
Hình 3.8 Use case quản lý lớp học ................................................................................... 17
Hình 3.9 Use case quản lý lớp học phần ........................................................................... 17
Hình 3.10 Use case quản lý phịng học ............................................................................. 18
Hình 3.11 Use case quản lý quản trị viên ......................................................................... 18
Hình 3.12 Use case quản lý thơng tin cá nhân .................................................................. 19

Hình 3.13 Use case thời khóa biểu ................................................................................... 19
Hình 3.14 Use case thống kê ............................................................................................ 20
Hình 3.15 Use case khóa học ............................................................................................ 20
Hình 3.16 Use case liên hệ............................................................................................... 21
Hình 4.1 Sơ đồ ERD ........................................................................................................ 35
Hình 4.2 Kiến trúc hệ thống.............................................................................................. 39
Hình 4.3 Sequence đăng nhập........................................................................................... 40
Hình 4.4 Sequence đăng kí lớp học .................................................................................. 41
Hình 4.5 Sequence liên hệ ................................................................................................ 41
Hình 4.6 Giao diện màn hình khóa học ............................................................................ 52
Hình 4.7 Giao diện màn hình chi tiết lớp học phần .......................................................... 53
Hình 4.8 Giao diện màn hình thanh tốn học phí ............................................................. 55
Hình 4.9 Giao diện màn hình giới thiệu giảng viên.......................................................... 56
Hình 4.10 Giao diện màn hình liên hệ .............................................................................. 57
Hình 4.11 Giao diện màn hình đăng nhập ........................................................................ 59
Hình 4.12 Giao diện màn hình chăm sóc khách hàng ...................................................... 60
Hình 4.13 Giao diện màn hình danh sách lớp học ............................................................ 62
Hình 4.14 Giao diện màn hình quản lý học viên .............................................................. 64
Hình 4.15 Giao diện màn hình quản lý khóa học ............................................................. 66
Hình 4.16 Giao diện màn hình quản lý lớp học phần ....................................................... 67
Hình 4.17 Giao diện màn hình quản lý lớp học ................................................................ 69
x


Hình 4.18 Giao diện màn hình quản lý giảng viên ........................................................... 70
Hình 4.19 Giao diện màn hình quản lý phịng học ........................................................... 72
Hình 4.20 Giao diện màn hình quản lý quản trị viên........................................................ 73
Hình 4.21 Giao diện màn hình thống kê ........................................................................... 75
Hình 4.22 Giao diện màn hình thơng tin cá nhân ............................................................. 76
Hình 4.23 Giao diện màn hình thời khóa biểu .................................................................. 77

Hình 5.1 Kiểm tra MongoDB trên Robo 3T ..................................................................... 82
Hình 5.2 Kiểm tra NodeJS ................................................................................................ 83
Hình 5.3 Kiểm tra NPM .................................................................................................... 83
Hình 5.4 Tiến hành cài đặt Express .................................................................................. 84
Hình 5.5 Cài đặt Express thành cơng ................................................................................ 84
Hình 5.6 Kiểm tra phiên bản Angular............................................................................... 85
Hình 5.7 Kết quả tổng quan khi kiểm thử ......................................................................... 92

xi


Chương 1: Tổng quan

1.1 Mục tiêu đề tài

1. Chương 1: TỔNG QUAN

 Quản lý tốt là nền tảng giúp doanh nghiệp thành công và bền vững. Nhưng để quản
lý thế nào cho tốt là một vấn đề lớn và tốn rất nhiều công sức, đặc biệt là trung tâm
dạy học, cụ thể là trung tâm tiếng anh. Với số lượng nhân viên, giảng viên lớn, số
lượng học viên cũng gia tăng khiến thông tin cần quản lý sẽ nhiều lên theo thời gian,
dễ gây ra những sai sót khơng đáng có, dẫn đến việc khơng thấy được những khó
khăn đang gặp phải, sai lệch về doanh số, thu chi,...
 Với thời buổi công nghệ phát triển như hiện nay, việc áp dụng khoa học công nghệ
vào việc quản lý sẽ dễ dàng và hiệu quả hơn so với việc quản lý bằng tay như trước
đây. Cho nên chúng ta cần có một phần mềm, cụ thể là một website quản lý trung
tâm Anh ngữ để có thể dễ dàng quản lý những thông tin, thực hiện các chức năng
cần thiết của một phần mềm quản lý, cũng như thống kê những thông tin quan trọng,
đặc biệt là doanh thu, để người dùng có thể dễ dàng truy cập, nắm bắt được thông
tin và đưa ra những hướng đi mới để trung tâm ngày một phát triển.

1.2 Mô tả ứng dụng web
 Với một website, người dùng có thể dễ dàng truy cập, thao tác, quản lý thông tin bất
cứ lúc nào chỉ cần có kết nối internet và thiết bị thơng minh bên cạnh. Chỉ với vài
thao tác để có thể quản lý được toàn bộ trung tâm giúp tiết kiệm được rất nhiều thời
gian, cơng sức, chi phí so với việc quản lý bằng tay như trước đây.
 Ngoài ra, website cũng xây dựng để dành cho nhân viên trong trung tâm như giảng
viên và bộ phận hỗ trợ. Giảng viên có thể xem được thời khóa biểu của mình trên
website, xem danh sách học viên trong lớp cũng như gửi mail thơng báo nếu có thay
đổi trong lịch học hay gửi thêm tài liệu qua mail cho các học viên. Nhân viên hỗ trợ
sẽ tiếp nhận các email thắc mắc của học viên và giải đáp để có thể tương tác nhiều
hơn, mang lại cảm giác thân thiện, chuyên nghiệp cho trung tâm.
Một số tính năng của ứng dụng web:






Các chức năng, nghiệp vụ cho một ứng dụng quản lý.
Phân quyền các chức năng tương ứng với các actor.
Cho phép giảng viên xem được thời khóa biểu, danh sách các học viên trong lớp.
Gửi mail đến các học viên.
Chức năng đề xuất giảng viên và phòng học.

 Cho phép học viên thanh tốn thơng qua ví điện tử Momo.
1


Chương 2: Cơ sở lý thuyết

2. Chương 2: CƠ SỞ LÝ THUYẾT
2.1 Nền tảng phát triển
Bảng 2.1 Phiên bản các công nghệ được sử dụng
Tên
Nodejs
Express
MongoDB
Angular
Momo API
Recaptcha API
Google Drive API

Phiên bản
10.15.3
V4.17.1
V4.2.1
8.3.14
V1.0.4
V2
V3

2.2 Thư viện sử dụng
Bảng 2.2 Phiên bản các thư viện được sử dụng
Tên
body-parser
cors
dotenv
express
http

jsonwebtoken
mongoose
multer
nodemailer
nodemon
password-hash
request
router
uuidv1
chart.js
jquery
jquery-ui
ng2-chart
rxjs
tslib
zone.js

Phiên bản
V1.19.0
V2.8.5
V8.2
V4.17.1
V0.0.1-security
V8.5.1
V5.9.7
V1.4.2
V6.4.8
V2.0.2
V1.2.2
V2.88.2

V1.3.5
V1.6.14
V2.9.3
V3.5.0
V1.12.1
V2.2.3
V6.5.4
V1.10.0
V0.10.2

2


Chương 2: Cơ sở lý thuyết

2.2 Công nghệ sử dụng
2.2.1

Nodejs

2.2.1.1
Tổng quan
Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript
Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách
nhanh chóng và dễ dàng mở rộng.
Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại
California, Hoa Kỳ.
Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và
hiệu năng khá cao.
Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực.

Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi
mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.
Các ứng dụng của Nodejs:
 Websocket server
 RESTful API
2.2.1.2
Ứng dụng Nodejs vào dự án
Là một web server kết nối tới cơ sở dữ liệu.
Tạo ra các API để nhận yêu cầu từ client và trả về dữ liệu theo yêu cầu của client dưới
dạng JSON.
2.2.2 Express
2.2.2.1
Tổng quan
Express là một framework dành cho Nodejs. Nó cung cấp cho chúng ta rất nhiều tính
năng mạnh mẽ trên nền tảng web cũng như trên các ứng dụng di động. Express hỗ trợ các
phương thức HTTP và middleware tạo ra một API vô cùng mạnh mẽ và dễ sử dụng.
Một số chức năng chính của Express như sau:
 Thiết lập các lớp trung gian để trả về các HTTP request.
 Định nghĩa router cho phép sử dụng với các hành động khác nhau dựa trên
phương thức HTTP và URL.
 Cho phép trả về các trang HTML hoặc JSON dựa vào các tham số.
3


Chương 2: Cơ sở lý thuyết
2.2.2.2 Ứng dụng express vào dự án
Thiết lập các HTTP request để nhận request từ client.
Router các request dựa vào HTTP method.
Trả về cho client dữ liệu dạng JSON.
2.2.3 MongoDB

2.2.3.1
Tổng quan
MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được
hàng triệu người sử dụng
MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong
document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh
Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL
hay SQL Server...) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng
khái niệm là collection thay vì bảng
So với RDBMS thì trong MongoDB collection ứng với table (bảng), cịn document(tài
liệu) sẽ ứng với row(hàng) , MongoDB sẽ dùng các document thay cho row trong RDBMS
Các collection(bộ sưu tập) trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ
liệu lưu trữ không cần tuân theo một cấu trúc nhất định
Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn
ngữ truy vấn MongoDB
2.2.3.2
Ứng dụng MongoDB vào dự án
Lưu trữ dữ liệu để backend Nodejs có thể thực hiển các thao tác truy vấn để trả về dữ
liệu cho client.
2.2.4 Angular
2.2.4.1
Tổng quan
Angular là một frameworks Javascript giúp chúng ta xây dựng ứng dụng web đầy đủ
tính năng từ phía client.
Angular lần đầu được phát hành bởi gã khổng lồ Google vào năm 2010 với phiên bản
AngularJS, sau đó đã có chỗ đứng khá vững chắc trong một thời gian dài, phiên bản
Angular 2 phát hành năm 2016 mang đến một bước chuyển mình vượt bậc, một cơng cụ
thực sự mạnh mẽ cho việc phát triển ứng dụng Web trên cả nền tảng Mobile và Desktop
4

Chương 2: Cơ sở lý thuyết
Một số ưu điểm của Angular:
 Cơ chế Two-Way Data Binding: Đây là tính năng cool nhất của Angular. Data
binding tự động và rất nhanh tức là bất cứ thay đổi nào trên view đều được tự động
cập nhật vào component class và ngược lại.
 Hỗ trợ cơ chế Routing mạnh mẽ: Angular có cơ chế routing tải trang một cách bất
đồng bộ trên cùng một trang cho phép chúng ta tạo SPA.
 Mở rộng HTML: Angular cho phép chúng ta sử dụng cấu trúc lập trình giống như
điều kiện if, vịng lặp for...để render các control.
 Thiết kế module hoá: Angular tiếp cận theo hướng thiết kế module hoá. Bạn phải
tạo các Angular Module để tổ chức tốt hơn và quản lý source code.
 Hỗ trợ làm việc với hệ thống Backend: Angular được xây dựng hỗ trợ làm việc với
backend server và thực thi bất cứ logic nào và nhận dữ liệu về.
 Cộng đồng tốt: Angular được hỗ trợ bởi Google và cộng đồng.
2.2.4.2
Ứng dụng của Angular vào dự án
Xây dựng ứng dụng web admin cho quản trị viên có thể call API từ server nodejs để lấy
dữ liệu và hiển thị cho người quản trị dễ dàng quản lý. Và một ứng dụng web cho người
dùng có thể dễ dàng đăng kí lớp học từ hệ thống.
2.2.5 Dịch vụ bên ngồi
2.2.5.1

Thanh toán Momo

2.2.5.1.1 Giới thiệu
Momo Payment Platform API là giải pháp thanh toán cho các đơn vị kinh doanh, cho
phép khách hàng sử dụng tài khoản Ví Momo để thanh tốn các dịch vụ trên nhiều nền
tảng khác nhau: Desktop Website, Mobile Website, Mobile Application, POS, Pay In Bill,
In App Momo.

5


Chương 2: Cơ sở lý thuyết
2.2.5.1.2 Sơ đồ hoạt động

Hình 2.1 Sơ đồ hoạt động thanh toán Momo
 Merchant Website: website client của hệ thống yêu cầu thanh toán Momo.
 Merchant Server: server của hệ thống.
 Momo: server Momo.
Các bước thực hiện:
 Bước 1: Client yêu cầu tạo thanh toán Momo tới server.
 Bước 2: Server yêu cầu thanh toán tới server của Momo.
 Bước 3: Server của Momo sẽ gửi trả về cho server của hệ thống một url để chuyển
hướng tới trang website Momo.
 Bước 4: Hiện mã QR thanh toán cho người dùng.
 Bước 5, 6: Người dùng quét QR thanh toán từ ứng dụng.
6


Chương 2: Cơ sở lý thuyết
 Bước 7: Chuyển về trang của client của ứng dựng, đồng thời yêu cầu thông báo tới
server của ứng dụng.
 Bước 8: Server của hệ thống xử lý kết quả.
 Bước 9: Hiển thị kết quả cho người dùng.
2.2.5.1.3 Ứng dụng vào hệ thống
Tích hợp Momo vào hệ thống đăng kí lớp học dùng để thanh tốn học phí online.
2.2.5.2

Upload file Google Drive

2.2.5.2.1 Tổng quan
Google Drive API cho phép các bạn tạo các ứng dụng tận dụng lưu trữ đám mây của
Google Drive. Bạn có thể phát triển ứng dụng của mình tích hợp với Google Drive, và tạo
các chức năng trong ứng dụng của bạn sử dụng Google Drive.
Một số tính năng của Google Drive API:





Download và Upload file lên Google Drive
Tìm kiếm file, thư mục trên Google Drive
User có thể chia sẻ file, thư mục hợp tác về nội dung trên Google Drive
Kết hợp với API Google Picker để tìm kiếm tất cả các tệp trong Google Drive, sau
đó trả lại tên tệp, URL, ngày sửa đổi cuối cùng và người dùng
 Tạo các phím tắt là các liên kết bên ngồi đến dữ liệu được lưu trữ bên ngoài
Drive, trong một kho lưu trữ dữ liệu hoặc hệ thống lưu trữ đám mây khác
 Tạo thư mục Drive chuyên dụng để lưu trữ dữ liệu của ứng dụng để ứng dụng
không thể truy cập tất cả nội dung của người dùng được lưu trữ trong Google
Drive. Xem Lưu trữ dữ liệu dành riêng cho ứng dụng
 Tích hợp với Giao diện người dùng Google Drive, là giao diện người dùng web
tiêu chuẩn của Google mà bạn có thể sử dụng để tương tác với các tệp Drive
2.2.5.2.2 Sơ đồ hoạt động

Hình 2.2 Sơ đồ hoạt động upload file
Bước 1: Client upload file lên server của hệ thống.
7

Chương 2: Cơ sở lý thuyết
Bước 2: Server hệ thống xác thực và upload file lên hệ thống của Google Drive.
Bước 3: Google trả kết quả về server hệ thống.
Bước 4: Server hệ thống trả kết quả về client.
2.2.5.2.3 Ứng dụng vào hệ thống
Ứng dụng Google Drive API để lữu trữ file ảnh cho hệ thống.
2.2.5.3

Recaptcha

2.2.5.3.1 Tổng quan
CAPTCHA là một công cụ xác thực trên website để đảm bảo rằng website của bạn
không bị SPAM bằng một công cụ tự động. Theo truyền thống captcha là một hình ảnh với
dịng các chữ khó phân tích bởi một chương trình tự động, người dùng phải nhập lại dòng
chữ giống với chữ trên hình ảnh để chứng minh họ khơng phải là cái máy.
CAPTCHA truyền thống có thể đáp ứng được yêu cầu đặt ra tuy nhiên đôi khi khá phiền
phức, các dịng chữ CAPTCHA đơi khi rất khó đọc đối với người dùng.
reCAPTCHA là một dịch vụ CAPTCHA miễn phí giúp website của bạn chống lại
SPAM, các đăng ký độc hại, hoặc các hình thức tấn cơng khác, nơi mà các chương trình
tấn cơng cố gắng che giấu bản thân tạo ra các hành vi giống con người. reCAPTCHA với
giao diện đơn giản, có thể dễ dàng thêm vào blog, forum hoặc website của bạn,…hiện tại
reCAPTCHA Google được ứng dụng phổ biến và được nhiều nhà phát triển web tin dùng.
2.2.5.3.2 Sơ đồ hoạt động

Hình 2.3 Sơ đồ hoạt động reCAPTCHA
 Bước 1: Tạo reCAPTCHA từ server của Google.
8