(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack

(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack(Đồ án tốt nghiệp) Xây dựng website quản lý trung tâm Anh ngữ sử dụng Mean Stack

Trang 1

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

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

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 : ĐOÀ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

Trang 2

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 : ĐOÀ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

Trang 3

LỜI CẢM ƠN

Có thể hoà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 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 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 quý 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

Trang 4

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

Trang 5

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

Trang 6

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 YÊU CẦU 10

3.1 Yêu cầu người dùng 10

Trang 7

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

Trang 8

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

Trang 9

DANH MỤC CÁC CHỮ VIẾT TẮT

API: Application Programming Interface

STT: Số Thứ Tự

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

Trang 10

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

Trang 11

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 toá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

Trang 12

DANH MỤC CÁC HÌNH ẢNH, BIỂU ĐỒ

Hình 2.1 Sơ đồ hoạt động thanh toá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 toá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

Trang 13

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

Trang 14

1 Chương 1: TỔNG QUAN

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

 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 toán thông qua ví điện tử Momo

Trang 15

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

Trang 16

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

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

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ố

Trang 17

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

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

Trang 18

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

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

In App Momo

Trang 19

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

Trang 20

 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 toán học phí online

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 ngoà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

Hình 2.2 Sơ đồ hoạt động upload file

Bước 1: Client upload file lên server của hệ thống

Trang 21

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

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

Hình 2.3 Sơ đồ hoạt động reCAPTCHA

 Bước 1: Tạo reCAPTCHA từ server của Google

Trang 22

 Bước 2: Hiển thị recaptcha lên giao diện của hệ thống

 Bước 3, 4: Gửi xác nhận lên server hệ thống

 Bước 5: Gửi yêu cầu xác nhận lên hệ thống của Google

 Bước 6: Hệ thống Google gửi kết quả về server của hệ thống

 Bước 7, 8: Server gửi kết quả về và hiển thị trên giao diện người dùng

2.2.5.3.3 Ứng dụng vào hệ thống

Áp dụng vào hệ thống trước khi gửi dữ liệu xuống server với client

Trang 23

3 Chương 3: XÁC ĐỊNH VÀ MÔ HÌNH HÓA YÊU CẦU

Bảng 3.1 Yêu cầu người dùng

1 Web Application Website có các chức năng:

- Thao tác các chức năng quản lý cơ bản như thêm, xem, sửa, xóa những thông tin của trung tâm

- Thay đổi trạng thái khóa học, học viên,…

- Thống kê doanh thu, học viên

- Xem thời khóa biểu

- Quản lý thông tin cá nhân

2 API Sever - Hỗ trợ đăng nhập với nhiều quyền khác nhau

- Hỗ trợ thanh toán thông qua cổng thanh toán Momo

- Hỗ trợ gửi mail cho học viên

3.2.1 Yêu cầu chức năng

Bảng 3.1 Các actor trong hệ thống.

1 Admin (Người quản lý) Người giữ vai trò quản lý, theo dõi thông tin, hoạt

động của website quản lý

2 Giảng viên Thầy (cô) công tác tại trung tâm, theo dõi thời khóa

biểu, sinh viên trong lớp mà giảng viên đảm nhận

3 Nhân viên Nhân viên có vai trò tiếp nhận, hỗ trợ mail thắc mắc

của người dùng, quản lí thông tin của lớp học, học viên

4 Guest (Khách) Người dùng vào trang chủ

3.2.1.2.1 Admin

Bảng 3.2 Đặc tả chức năng Admin(Quản trị viên)

1 Đăng nhập Đăng nhập bằng tài khoản có quyền admin

2 Đăng xuất Đăng xuất tài khoản khỏi hệ thống

Trang 24

3 Quản lý quản trị viên Các chức năng liên quan đến CRUD, thay đổi trạng

thái quản trị viên

4 Quản lý học viên Các chức năng liên quan đến CRUD, thay đổi trạng

thái học viên, gửi mail cho học viên

5 Quản lý lớp học phần Các chức năng liên quan đến CRUD, thay đổi trạng

thái lớp học phần

6 Quản lý giảng viên Các chức năng liên quan đến CRUD, tìm kiếm, thay

đổi trạng thái giảng viên

7 Thống kê Liệt kê doanh thu và xem số lượng học viên đăng ký

8 Quản lý phòng học Các chức năng liên quan đến CRUD, tìm kiếm, thay

đổi trạng thái phòng học

9 Quản lý khóa học Các chức năng liên quan đến CRUD, tìm kiếm, thay

đổi trạng thái khóa học

10 Quản lý lớp học Các chức năng liên quan đến CRUD, tìm kiếm, thay

đổi trạng thái lớp học

11 Xem danh sách lớp học Xem danh sách các lớp học đang được học viên đăng

kí, xem thông tin các học viên đăng ký, các chức năng liên quan đến CRUD, thay đổi trạng thái học viên, gửi mail cho học viên

12 Quản lý thông tin cá nhân Chỉnh sửa các thông tin cá nhân cơ bản, thay đổi ảnh

đại diện, đổi mật khẩu

13 Chăm sóc khách hàng Xem danh sách liên hệ để giải đáp thắc mắc

14 Báo nghỉ Chỉnh sửa lịch nghỉ của giảng viên

15 Báo bù Chỉnh sửa lịch bù của giảng viên

3.2.1.2.2 Giảng viên

Bảng 3.3 Đặc tả chức năng Giảng viên

1 Đăng nhập Đăng nhập bằng tài khoản có quyền giảng viên

3 Xem thời khóa biểu Xem thời khóa biểu

5 Xem danh sách lớp học Xem danh sách các lớp học mà giảng viên đảm nhận,

các học viên trong lớp và gửi mail cho học viên

3.2.1.2.3 Nhân viên

Bảng 3.4 Đặc tả chức năng Nhân viên

1 Đăng nhập Đăng nhập bằng tài khoản có quyền nhân viên

Trang 25

3 Chăm sóc khách hàng Xem danh sách liên hệ để giải đáp thắc mắc

5 Xem danh sách lớp học Xem danh sách các lớp học đang được học viên đăng

kí, xem thông tin các học viên đăng ký, các chức năng liên quan đến CRUD, thay đổi trạng thái học viên, gửi mail cho học viên

Xem thông tin chi tiết lớp học phần

5 Đăng ký lớp học phần Cho phép khách có thể đăng ký vào lớp học phần của

trung tâm

6 Thanh toán học phí Nếu khách có sử dụng dịch vụ ví điện tử Momo thì có

thể thanh toán hoặc có thể thanh toán trực tiếp tại trung tâm

7 Gửi mail hỗ trợ Khách có thắc mắc cần hỗ trợ có thể gửi mail để trung

giải đáp

Trang 26

3.2.1.3 Use case

3.2.1.3.1 Use case diagram

Hình 3.1 Use case hệ thống

Trang 27

3.2.1.3.1.2 Use case đăng nhập

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

Hình 3.3 Use case chăm sóc khách hàng

Trang 28

3.2.1.3.1.4 Use case quản lý danh sách lớp học

Hình 3.4 Use case quản lý danh sách lớp học

Hình 3.5 Use case quản lý giảng viên

Trang 29

3.2.1.3.1.6 Use case quản lý học viên

Hình 3.6 Use case quản lý học viên

Trang 30

Hình 3.7 Use case quản lý khóa học

Hình 3.8 Use case quản lý lớp học

Hình 3.9 Use case quản lý lớp học phần

Trang 31

3.2.1.3.1.10 Use case quản lý phòng học

Hình 3.10Use case quản lý phòng học

3.2.1.3.1.11 Use case quản lý quản trị viên

Hình 3.11 Use case quản lý quản trị viên

Trang 32

3.2.1.3.1.12 Use case quản lý thông tin cá nhân

Hình 3.12 Use case quản lý thông tin cá nhân

3.2.1.3.1.13 Use case thời khóa biểu

Hình 3.13 Use case thời khóa biểu

Trang 33

3.2.1.3.1.14 Use case thống kê

Hình 3.14 Use case thống kê

3.2.1.3.1.15 Use case khóa học

Hình 3.15 Use case khóa học

Trang 34

3.2.1.3.1.16 Use case liên hệ

Hình 3.16 Use case liên hệ

3.2.1.3.1.17 Use case báo nghỉ

Hình 3.17 Use case báo nghỉ

Trang 35

3.2.1.3.1.18 Use case báo bù

Hình 3.18 Use case báo bù

3.2.1.3.2 Đặc tả use case

Bảng 3.6 Đặc tả Usecase hệ thống

Tên usecase Usecase hệ thống

Mô tả Tổng quan hệ thống

Tác nhân Admin, Giảng viên, Nhân viên

Kích hoạt Truy cập trang web quản lý

Trang 36

3 Thực hiện chức năng cần thực hiện

4 Xác nhận đã thực hiện chức năng

Tiền điều kiện - Đã có tài khoản trên hệ thống

- Đã đăng nhập thành công

- Có kết nối internet

Hậu điều kiện - Nếu thực hiện hành động thành công, sẽ hiển thị thông báo thành công

- Nếu có lỗi, hiển thị thông báo lỗi

Bảng 3.7 Đặc tả Usecase đăng nhập

Tên usecase Usecase đăng nhập

Mô tả Chức năng đăng nhập

Kích hoạt Truy cập trang web quản lý

1 Truy cập trang quản lý

màn hình người dùng

3 Người dùng nhập tên đăng nhập và mật khẩu Sau đó nhấn vào nút “Đăng nhập”

kết quả cho người dùng

Bảng 3.8 Đặc tả Usecase chăm sóc khách hàng

Tên usecase Usecase chăm sóc khách hàng

Trang 37

Mô tả Chức năng chăm sóc khách hàng

Kích hoạt Truy cập tab “Danh sách chăm sóc khách hàng” ở trang web quản lý

1 Ở trang quản lý, chọn tab

“Danh sách chăm sóc khách hàng”

khách hàng cần chăm sóc

3 Thực hiện chức năng mong muốn và xác nhận

người dùng yêu cầu

Bảng 3.9 Đặc tả Usecase quản lý danh sách lớp học

Tên usecase Usecase quản lý danh sách lớp học

Mô tả Chức năng quản lý danh sách lớp học

Kích hoạt Truy cập tab “Danh sách lớp học” ở trang quản lý

Trang 38

Hậu điều kiện - Nếu thực hiện hành động thành công, sẽ hiển thị dữ liệu trên bảng

Bảng 3.10 Đặc tả Usecase giảng viên

Tên usecase Usecase giảng viên

Mô tả Chức năng quản lý giảng viên

Bảng 3.11 Đặc tả Usecase học viên

Tên usecase Usecase học viên

Trang 39

Mô tả Chức năng quản lý học viên

Bảng 3.12 Đặc tả Usecase khóa học

Tên usecase Usecase khóa học

Mô tả Chức năng quản lý khóa học

Trang 40

4 Xử lý và thực hiện chức năng mà

Bảng 3.13 Đặc tả Usecase lớp học

Tên usecase Usecase lớp học

Mô tả Chức năng quản lý lớp học

Bảng 3.14 Đặc tả Usecase lớp học phần

Tên usecase Usecase lớp học phần

Mô tả Chức năng quản lý lớp học phần

Định dạng
Số trang	109
Dung lượng	4,78 MB