Luận văn tốt nghiệp Khoa học máy tính: Xây dựng hệ thống quản lý dành cho một trung tâm ngoại ngữ

LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC

XÂY DỰNG HỆ THỐNG QUẢN LÝDÀNH CHO MỘT TRUNG TÂM

NGOẠI NGỮ

NGÀNH: KHOA HỌC MÁY TÍNH

Tp.Hồ Chí Minh, 12/2022

KHOA: KH & KT MÁY TÍNH NHIỆM VỤ LUẬN VĂN TỐT NGHIỆP

BỘ MÔN: HỆ THỐNG THÔNG TIN Chú ý: Sinh viên phải dán tờ này vào trang nhất của bản thuyết trình

1 Đầu đề luận văn:

Xây dựng hệ thống quản lý dành cho một trung tâm ngoại ngữ

2 Nhiệm vụ (yêu cầu về nội dung và số liệu ban đầu):

Luận văn yêu cầu việc phân tích, thiết kế, xây dựng, kiểm thử và triển khai hệ thống quản lý dành cho một trung tâm ngoại ngữ bao gồm các chức năng dành cho người quản lý trung tâm, nhân viên, giáo viên, học sinh và phụ huynh

Đề tài được chia làm hai giai đoạn như sau: Giai đoạn ĐCLV

− Tìm hiểu và phân tích các chức năng cần thiết dành cho một trung tâm ngoại ngữ − Tìm hiểu các ứng dụng liên quan và các công nghệ liên quan

− Phân tích và thiết kế hệ thống Giai đoạn LVTN

− Phát triển phiên bản mẫu của hệ thống − Thử nghiệm và đánh giá hệ thống − Triển khai hệ thống

3 Ngày giao nhiệm vụ luận văn: 29/08/2022 4 Ngày hoàn thành nhiệm vụ: 12/12/2022

5 Họ tên giảng viên hướng dẫn: Phần hướng dẫn:

ThS Trương Quỳnh Chi

Nội dung và yêu cầu LVTN đã được thông qua Bộ môn

Ngày tháng năm

CHỦ NHIỆM BỘ MÔN GIẢNG VIÊN HƯỚNG DẪN CHÍNH

PHẦN DÀNH CHO KHOA, BỘ MÔN:

Người duyệt (chấm sơ bộ): Đơn vị: _ Ngày bảo vệ: Điểm tổng kết: _ Nơi lưu trữ luận văn:

Chúng tôi xin cam đoan rằng đây là hệ thống riêng của nhóm chúng tôi thực hiện,dưới sự hướng dẫn của Thạc sĩ Trương Quỳnh Chi Các nội dung tìm hiểu, thiết kếđề tài này là trung thực, hoàn toàn không sao chép hay sử dụng kết quả của đề tàinào khác tương tự.

Nếu có phát hiện bất kỳ gian lận nào, chúng tôi xin hoàn toàn chịu trách nhiệm vềnội dung luận văn tốt nghiệp của mình và chấp nhận mọi hình thức kỷ luật trướcban chủ nhiệm khoa Khoa Học Và Kỹ Thuật Máy Tính cũng như Ban Giám HiệuTrường Đại Học Bách Khoa, ĐHQG TP Hồ Chí Minh.

Lời nói đầu tiên, chúng tôi xin gửi lời cảm ơn chân thành và sâu sắc nhất đến Thạcsĩ Trương Quỳnh Chi, người đã tận tình chỉ bảo và hướng dẫn chúng tôi trong suốtquá trình thực hiện đề cương luận văn tốt nghiệp cũng như luận văn tốt nghiệp.Cô đã chỉ dẫn cho chúng tôi các bước để phân tích, thiết kế một hệ thống từ các ýtưởng sơ khai đầu tiên, cung cấp cho chúng tôi các tài liệu tham khảo bổ ích và đãđưa ra những đánh giá, đưa ra những góp ý hữu ích trong quá trình hiện thực, kiểmthử và đánh giá hệ thống, giúp chúng tôi có thể hoàn thiện hệ thống của mình hơn.Tiếp theo, chúng tôi xin gửi lời cảm ơn đến quý thầy cô trường Đại Học Bách Khoa,đặc biệt là các thầy cô thuộc Khoa Khoa Học Và Kỹ Thuật Máy Tính Trong suốtnhững năm học qua, các thầy cô đã tận tình chỉ dạy cho chúng tôi nhiều bài học,kiến thức nền tảng bổ ích Nhờ đó chúng tôi có thể hoàn thành đề tài của mình, vàchúng cũng sẽ là hành trang đồng hành cùng với chúng tôi trong suốt quãng đời cònlại.

Kế đến, chúng tôi cũng muốn gửi lời cảm ơn đến gia đình, bạn bè, những người đãluôn động viên và tạo điều kiện học tập tốt nhất cho chúng tôi.

Cuối cùng, do bản thân chúng tôi còn nhiều hạn chế về kiến thức, về thời gian, nênkhó tránh khỏi những sai sót trong quá trình thực hiện đề tài Chúng tôi rất mongnhận được những đánh giá và góp ý từ bạn bè, quý thầy cô, đặc biệt là giáo viênphản biện đề tài để chúng tôi có thể hoàn thiện hệ thống của mình hơn.

Một lần nữa, chúng tôi xin chân thành cảm ơn!

Nhóm sinh viên thực hiện đề tài

Tóm tắt

Trung tâm ngoại ngữ là một hệ thống website cung cấp dịch vụ quản lý trung tâmtiếng anh, bao gồm các chức năng dành cho người quản lý trung tâm, nhân viên,giáo viên, trợ giảng, học sinh và phụ huynh.

Chúng tôi đã tiến hành thực hiện:

• Khảo sát các hệ thống liên quan đến quản lý trung tâm ngoại ngữ.• Tìm hiểu quy trình nghiệp vụ trong một trung tâm ngoại ngữ.• Liệt kê các chức năng chính cần có của hệ thống.

• Mô tả hệ thống thông qua sơ đồ usecase và mô tả usecase.• Thiết kế giao diện bằng Figma.

• Xây dựng cơ sở dữ liệu bằng ERD và ánh xạ qua cơ sở dữ liệu quan hệ.• Tìm hiểu công nghệ dùng để xây dựng hệ thống, bao gồm NextJS, ExpressJS

và MySQL.

• Hiện thực, kiểm thử, triển khai và đánh giá hệ thống• Viết báo cáo.

Chương 4USECASE19

4.1 Các chức năng của người dùng chưa đăng nhập 20

4.2 Các chức năng chung của người dùng đã đăng nhập 25

4.3 Các chức năng của người dùng là học viên và phụ huynh 31

4.4 Các chức năng của người dùng là giáo viên và trợ giảng 41

4.5 Các chức năng của người dùng là nhân viên 71

4.6 Các chức năng của người dùng là Quản lý (Admin) 102

Chương 5THIẾT KẾ CƠ SỞ DỮ LIỆU1075.1 ERD thực thể 108

5.2 ERD quan hệ 110

5.3 Mô tả Erd 112

5.3.1 Mô tả bảng Ca học (Shift) 112

5.3.2 Mô tả bảng Bài tập (Exercise) 112

5.3.3 Mô tả bảng Câu hỏi (Question) 113

5.3.4 Mô tả bảng Câu trả lời sai (WrongAnswer) 113

5.3.5 Mô tả bảng Tài liệu (Document) 114

5.3.6 Mô tả bảng Thông báo (Notification) 114

5.3.7 Mô tả bảng Tag 115

5.3.8 Mô tả bảng Khoản thu chi (Transaction) 115

5.3.9 Mô tả bảng Lương (Salary) 116

5.3.10 Mô tả bảng Học phí (Fee) 116

5.3.11 Mô tả bảng Hoàn phí (Refund) 117

5.3.12 Mô tả bảng Người dùng (User) 117

5.3.13 Mô tả bảng Người làm (Worker) 118

5.3.14 Mô tả bảng Học sinh (Student) 118

5.3.15 Mô tả bảng Phụ huynh (Parents) 119

5.3.16 Mô tả bảng Giáo viên (Teacher) 119

5.3.17 Mô tả bảng Trợ giảng (Tutor) 119

5.3.18 Mô tả bảng Nhân viên (Employee) 120

5.3.19 Mô tả bảng Quản lý (Admin) 120

5.3.20 Mô tả bảng Tài Khoản (Account) 120

5.3.21 Mô tả bảng Chi Nhánh (Branch) 121

5.3.22 Mô tả bảng Phòng Học (Classroom) 121

5.3.23 Mô tả bảng Khóa Học (Course) 122

5.3.24 Mô tả bảng Chương Trình Học (Curriculum) 123

5.3.25 Mô tả bảng Bài Học (Lecture) 124

5.3.26 Mô tả bảng Giáo Viên dạy Chương Trình Học Curriculum) 124

(TeacherPrefer-5.3.27 Mô tả bảng Buổi Học (StudySession) 125

5.3.28 Mô tả bảng Buổi Học thuộc Ca Học ToShift) 126

(StudySessionBelong-5.3.29 Mô tả bảng Trợ Giảng rảnh Ca Học (TutorFreeInShift) 126

5.3.30 Mô tả bảng Học Sinh tham gia Khóa Học pateCourse) 127

(StudentPartici-5.3.31 Mô tả bảng Người dùng nhắn tin (UsersChatEachOther) 128

5.3.32 Mô tả bảng Câu hỏi thuộc về Tag (QuestionBelongTag) 129

5.3.33 Mô tả bảng Chương Trình Học thuộc về Tag longTag) 129

(CurriculumBe-5.3.34 Mô tả bảng Học Sinh tham dự Buổi Học StudySession) 130

(StudentAttend-5.3.35 Mô tả bảng Bài tập gồm Câu hỏi (ExerciseContainQuestion) 1305.3.36 Mô tả bảng Học Sinh làm Bài tập (StudentDoExercise) 131

5.3.37 Mô tả bảng Học Sinh học bù (MakeUpLesson) 132

Chương 6HIỆN THỰC1336.1 Kiến trúc hệ thống 134

6.2 Công nghệ và những thư viện sử dụng 135

6.4 Giao diện của hệ thống 140

6.4.1 Giao diện chung 140

6.4.2 Giao diện của học viên 147

6.4.3 Giao diện của phụ huynh 155

6.4.4 Giao diện của giáo viên 156

6.4.5 Giao diện trợ giảng 171

6.4.6 Giao diện nhân viên 173

Chương 7KIỂM THỬ183Chương 8TRIỂN KHAI VÀ ĐÁNH GIÁ HỆ THỐNG1918.1 Nền tảng điện toán đám mây Google Cloud 192

8.2 Nền tảng Vercel 192

8.3 Sơ đồ triển khai 193

8.4 Các bước triển khai server trên Google Cloud Platform 194

8.5 Các bước triển khai frontend trên Vercel 199

8.6 Đánh giá và cải thiện hiệu suất 201

8.6.1 Đánh giá hiệu suất của trang web bằng Google PageSpeedInsights và Lighthouse 201

8.6.2 Cải thiện hiệu suất 201

Chương 9TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN ĐỀ TÀI2049.1 Tổng kết kết quả làm được 205

9.1.1 Đối với nhiệm vụ của đề tài 205

9.1.2 Đối với lợi ích thực tế 205

9.1.3 Đối với cơ sở lý thuyết và công nghệ 205

9.1.4 Đối với quy trình phát triển phần mềm 206

9.2 Đánh giá kết quả đạt được 206

9.2.1 Ưu điểm 206

9.2.2 Nhược điểm 2079.3 Hướng phát triển đề tài 207

2.1 Logo ReactJS 6

2.2 Vòng đời của component 8

2.3 Mô hình DOM cơ bản 8

2.4 Cơ chế cập nhật Virtual DOM 9

3.1 Hình mô tả các chức năng cơ bản của hệ thống 17

4.1 Usecase nhóm các chức năng của người dùng chưa đăng nhập 20

4.2 Usecase nhóm các chức năng chung của người dùng (đã đăng nhập) 254.3 Usecase nhóm các chức năng của người dùng là học viên và phụ huynh 314.4 Usecase nhóm các chức năng của người dùng là giáo viên và trợ giảng 414.5 Usecase nhóm các chức năng của người dùng là nhân viên 71

4.6 Usecase nhóm các chức năng của người dùng là Admin 102

5.1 Các thực thể trong Erd (1) 108

5.2 Các thực thể trong Erd (2) 109

5.3 Quan hệ của các thực thể trong Erd (1) 110

5.4 Quan hệ của các thực thể trong Erd (2) 111

6.1 Kiến trúc hệ thống 134

6.2 Cấu trúc thư mục của ứng dụng Web 138

6.3 Cấu trúc thư mục pages 139

6.4 Cấu trúc thư mục của Back-end 140

6.5 Giao diện trang chủ (1) 141

6.6 Giao diện trang chủ (2) 142

6.7 Giao diện trang chủ (3) 143

6.8 Giao diện đăng nhập 144

6.9 Giao diện nhắn tin 145

6.10 Giao diện tìm kiếm người dùng trong nhắn tin 146

6.11 Giao diện thông báo 147

6.12 Giao diện thời khóa biểu của học viên 148

6.13 Giao diện danh sách khóa học của học viên 149

6.14 Giao diện kết quả điểm danh của học viên 150

6.15 Giao diện tài liêu của khóa học 151

6.16 Giao diện danh sách bài tập của học viên 152

6.17 Giao diện làm bài tập của học viên 152

6.18 Giao diện đánh giá khóa học của học viên 153

6.19 Giao diện thông tin cá nhân của học viên (1) 154

6.20 Giao diện thông tin cá nhân của học viên (2) 154

6.21 Giao diện thêm phụ huynh của học viên 155

6.22 Giao diện chọn học viên theo dõi 155

6.23 Giao diện lịch sử thanh toán 156

6.24 Giao diện chương trình dạy 157

6.25 Giao diện danh sách buổi học 158

6.26 Giao diện chi tiết buổi học 158

6.27 Giao diện xin nghỉ dạy buổi học 159

6.28 Giao diện danh sách học viên 159

6.29 Giao diện thông tin chi tiết học viên 160

6.30 Modal gửi thông báo đến học viên 160

6.31 Giao diện danh sách bài tập 161

6.32 Giao diện tạo bài tập 162

6.33 Giao diện chi tiết bài tập 163

6.34 Giao diện danh sách câu hỏi 164

6.35 Giao diện danh sách tài liệu 165

6.36 Giao diện tạo tài liệu 166

6.37 Giao diện nhật ký giảng dạy 167

6.38 Giao diện danh sách chương trình dạy 168

6.39 Giao diện thêm chương trình dạy (1) 168

6.40 Giao diện thêm chương trình dạy (2) 169

6.41 Giao diện thông tin cá nhân (1) 170

6.42 Giao diện thông tin cá nhân (2) 170

6.43 Giao diện đăng ký ca rảnh của trợ giảng 172

6.44 Giao diện thông tin cơ bản trong tạo khóa học 173

6.45 Giao diện chọn giáo viên trong tạo khóa học 173

6.46 Giao diện chọn ca học trong tạo khóa học 174

6.47 Giao diện chọn thông tin lịch học trong tạo khóa học 175

6.48 Giao diện thông tin ca học trong tạo khóa học 175

6.49 Giao diện thông tin cơ bản trong chi tiết khóa học 176

6.50 Giao diện danh sách học viên trong chi tiết khóa học 176

6.51 Giao diện danh sách buổi học trong chi tiết khóa học 177

6.52 Giao diện thay đổi buổi học trong chi tiết khóa học 177

6.53 Giao diện quản lý phòng học 178

6.54 Giao diện quản lý học viên 179

6.55 Giao diện thông tin học viên 179

6.56 Giao diện danh sách giao dịch 180

6.57 Giao diện danh sách nhân sự 181

7.1 Giao diện tiện ích Katalon Recorder trên Google Chrome 185

7.2 Kết quả kiểm thử test suite đăng nhập 187

7.3 Kết quả kiểm thử test suite học viên 188

7.4 Kết quả kiểm thử test suite giáo viên 189

7.5 Kết quả kiểm thử test suite nhân viên 190

8.1 Kiến trúc của Google App Engine 192

8.2 Sơ đồ triển khai 193

8.3 Chọn SQL tại màn hình console 194

8.4 Chọn Create Instance tại giao diện quản lý Cloud SQL 194

8.5 Chọn MySQL làm hệ cơ sở dữ liệu cần dùng 194

8.6 Điền tên và mật khẩu của database instance 195

8.7 Chọn vị trí server và múi giờ 195

8.8 Chọn User để đi đến trang quản lý người dùng 196

8.9 Tạo người dùng mới 196

8.10 Chọn Database để đến trang quản lý cơ sở dữ liệu 197

8.11 Tạo cơ sở dữ liệu 197

8.12 Cấu trúc tập tin app.yaml 198

8.13 Thông báo hoàn thành triển khai app engine 198

8.14 Chọn thêm dự án mới tại trang chủ Vercel 199

8.15 Chọn dự án từ tài khoản Github 199

8.16 Điền thông tin dự án trước khi triển khai trên Vercel 200

8.17 Triển khai trên Vercel thành công 200

8.18 Điểm đánh giá PageSpeed lần đầu tiên 201

8.19 Cấu trúc tập tin next.config.js. 202

8.20 Các tập tin hình ảnh được cache 202

8.21 Hiệu suất được cải thiện 203

4.1 Usecase đăng nhập 21

4.2 Usecase đăng ký 22

4.3 Usecase xem danh sách khóa học sắp khai giảng 23

4.4 Usecase xem chi tiết khóa học 24

4.5 Usecase đăng xuất 26

4.6 Usecase xem thông tin cá nhân 27

4.7 Usecase chỉnh sửa thông tin cá nhân 28

4.8 Usecase xem danh sách thông báo 29

4.9 Usecase trò chuyện 30

4.10 Usecase xem danh sách học viên phụ thuộc 32

4.11 Usecase đăng ký tham gia khóa học sắp khai giảng 33

4.12 Usecase danh sách các khóa học đã đăng ký 34

4.13 Usecase đánh giá khóa học 35

4.14 Usecase xem kết quả điểm danh 36

4.15 Usecase xem tài liệu khóa học 37

4.16 Usecase làm bài tập trực tuyến 38

4.17 Usecase xem kết quả bài tập trực tuyến 39

4.18 Usecase xem thời khóa biểu của học viên 40

4.19 Usecase đăng ký ca làm rảnh 42

4.20 Usecase xem nhật ký giảng dạy 43

4.21 Usecase xem chi tiết buổi học 44

4.22 Usecase chỉnh sửa buổi học 45

4.23 Usecase xem danh sách khóa học 46

4.24 Usecase xem thông tin chi tiết khóa học 47

4.25 Usecase xem danh sách buổi học 48

4.26 Usecase xin nghỉ buổi học 49

4.27 Usecase xem danh sách học viên 50

4.28 Usecase xem chi tiết học viên 51

4.29 Usecase gửi thông báo tới lớp học 52

4.30 Usecase xem danh sách bài tập 53

4.31 Usecase xóa bài tập 54

4.32 Usecase thêm bài tập 55

4.33 Usecase xem chi tiết bài tập 56

4.34 Usecase chỉnh sửa bài tập 57

4.35 Usecase xem danh sách tài liệu 58

4.36 Usecase xóa tài liệu 59

4.37 Usecase thêm tài liệu 60

4.38 Usecase đóng khóa học 61

4.39 Usecase xem đánh giá 62

4.40 Usecase xem danh sách chương trình học 63

4.41 Usecase xóa chương trình học 64

4.42 Usecase thêm chương trình học 65

4.43 Usecase xem chi tiết chương trình học 66

4.44 Usecase chỉnh sửa chương trình học 67

4.45 Usecase xem danh sách giáo viên dạy chương trình học 68

4.46 Usecase thêm giáo viên dạy chương trình học 69

4.47 Usecase xóa giáo viên dạy chương trình học 70

4.48 Usecase xem lịch sử giao dịch 72

4.49 Usecase xem danh sách nhân sự 73

4.50 Usecase tạo lương 74

4.51 Usecase xem danh sách học viên 75

4.52 Usecase đăng ký tài khoản 76

4.53 Usecase danh sách học viên nợ học phí 77

4.54 Usecase nhắc nhở học viên 78

4.55 Usecase xem chi tiết học viên 79

4.56 Usecase thanh toán 80

4.57 Usecase thay đổi phụ huynh liên kết 81

4.58 Usecase xem danh sách khóa học 82

4.59 Usecase xem chi tiết khóa học 83

4.60 Usecase tạo khóa học mới 84

4.61 Usecase chỉnh sửa khóa học 85

4.62 Usecase xóa khóa học 86

4.63 Usecase xem danh sách học viên tham gia khóa học 87

4.64 Usecase thêm học viên vào khóa học 88

4.65 Usecase xóa học viên khỏi khóa học 89

4.66 Usecase xem danh sách buổi học 90

4.67 Usecase thêm buổi học 91

4.68 Usecase xóa buổi học 92

4.69 Usecase chỉnh sửa buổi học 93

4.70 Usecase đóng khóa học 94

4.71 Usecase mở khóa học 95

4.72 Usecase khóa khóa học 96

4.73 Usecase mở khóa khóa học 97

4.74 Usecase xem danh sách phòng học 98

4.75 Usecase tạo phòng học mới 99

4.76 Usecase chỉnh sửa phòng học 100

4.77 Usecase xóa phòng học 101

4.78 Usecase Quản lý người dùng 103

4.79 Usecase Quản lý chương trình đào tạo, khóa học 104

4.80 Usecase Báo cáo, thống kê 105

4.81 Usecase Quản lý chi nhánh 106

5.1 Chi tiết thuộc tính của bảng Ca học (Shift) 112

5.2 Chi tiết thuộc tính của bảng Bài tập (Exercise) 112

5.3 Chi tiết thuộc tính của bảng Câu hỏi (Question) 113

5.4 Chi tiết thuộc tính của bảng Câu trả lời sai (WrongAnswer) 113

5.5 Chi tiết thuộc tính của bảng Tài liệu (Document) 114

5.6 Chi tiết thuộc tính của bảng Thông báo (Notification) 114

5.7 Chi tiết thuộc tính của bảng Tag 115

5.8 Chi tiết thuộc tính của bảng Khoản thu chi (Transaction) 115

5.9 Chi tiết thuộc tính của bảng Lương (Salary) 116

5.10 Chi tiết thuộc tính của bảng Học phí (Fee) 116

5.11 Chi tiết thuộc tính của bảng Hoàn phí (Refund) 117

5.12 Chi tiết thuộc tính của bảng User (Người dùng) 117

5.13 Chi tiết thuộc tính của bảng Người làm (Worker) 118

5.14 Chi tiết thuộc tính của bảng Học sinh (Student) 118

5.15 Chi tiết thuộc tính của bảng Phụ huynh (Parents) 119

5.16 Chi tiết thuộc tính của bảng Giáo viên (Teacher) 119

5.17 Chi tiết thuộc tính của bảng Trợ giảng (Tutor) 119

5.18 Chi tiết thuộc tính của bảng Nhân viên (Employee) 120

5.19 Chi tiết thuộc tính của bảng Quản lý (Admin) 120

5.20 Chi tiết thuộc tính của bảng Tài Khoản (Account) 120

5.21 Chi tiết thuộc tính của bảng Chi Nhánh (Branch) 121

5.22 Chi tiết thuộc tính của bảng Phòng Học (Classroom) 121

5.23 Chi tiết thuộc tính của bảng Khóa Học (Cource) 122

5.24 Chi tiết thuộc tính của bảng Chương Trình Học (Curriculum) 123

5.25 Chi tiết thuộc tính của bảng Bài Học (Lecture) 124

5.26 Chi tiết thuộc tính của bảng Giáo Viên dạy Chương Trình Học(TeacherPreferCurriculum) 124

5.27 Chi tiết thuộc tính của bảng Buổi Học (StudySession) 125

5.28 Chi tiết thuộc tính của bảng Buổi Học thuộc Ca Học BelongToShift) 126

(StudySession-5.29 Chi tiết thuộc tính của bảng Trợ Giảng rảnh Ca Học (TutorFreeInShift).1265.30 Chi tiết thuộc tính của bảng Học Sinh tham gia Khóa Học (Student-ParticipateCourse) 127

5.31 Chi tiết thuộc tính của bảng Người dùng nhắn tin chOther) 128

(UsersChatEa-5.32 Chi tiết thuộc tính của bảng Câu hỏi thuộc về Tag Tag) 129

(QuestionBelong-5.33 Chi tiết thuộc tính của bảng Chương Trình Học thuộc về Tag riculumBelongTag) 129

(Cur-5.34 Chi tiết thuộc tính của bảng Học Sinh tham dự Buổi Học tAttendStudySession) 130

(Studen-5.35 Chi tiết thuộc tính của bảng Bài tập gồm Câu hỏi Question) 130

(ExerciseContain-5.36 Chi tiết thuộc tính của bảng Học Sinh làm Bài tập (StudentDoExercise).1315.37 Chi tiết thuộc tính của bảng Học Sinh học bù (MakeUpLesson) 132

7.1 Test suite đăng nhập và đăng xuất 186

7.2 Test suite học viên 187

7.3 Test suite giáo viên 188

7.4 Test suite nhân viên 189

1.2 Ý nghĩa của đề tài 2

1.3 Nội dung thực hiện 3

1.4 Giới hạn đề tài 3

1.1Tổng quan

Trong quá trình thế giới hội nhập ngày nay, ngoại ngữ đóng một vai trò vô cùngquan trọng giúp các cá nhân, tổ chức thuộc các quốc gia khác nhau có thể dễ dàngtrong việc giao lưu kinh tế, văn hóa Do đó, nhu cầu học ngoại ngữ của mọi ngườiđang ngày càng cao, ở bất kỳ lứa tuổi hay ngành nghề nào, không chỉ tiếng Anhmà còn là các ngoại ngữ phổ biến khác như tiếng Nhật, Trung, Hàn, Pháp, Từđó những nhà đầu tư cũng sẽ muốn mở các trung tâm ngoại ngữ để có thể đáp ứngnhu cầu của mọi người Nhưng họ sẽ gặp khó khăn khi không biết phải bắt đầu từđâu, cũng như phải quản lý trung tâm như thế nào cho hiệu quả.

Với sự phát triển của khoa học kỹ thuật hiện nay, đặc biệt là cuộc cách mạng 4.0đã góp phần làm đơn giản hóa và nâng cao hiệu quả của các công việc trong nhiềulĩnh vực khác nhau Dựa trên những nhu cầu và sự phát triển này, nhóm chúng tôiđã lên ý tưởng để xây dựng một hệ thống quản lý dành cho các trung tâm ngoạingữ, giúp cho người chủ có thể dễ dàng xây dựng, quản lý và phát triển một trungtâm ngoại ngữ Đồng thời cũng tăng hiệu quả giảng dạy và học tập của những giáoviên, học viên khi tham gia vào trung tâm.

1.2Ý nghĩa của đề tài

• Giảm các chi phí và tối ưu hóa công tác quản lý.

• Mang lại tất cả thông tin giáo viên giúp học viên có thể tìm hiểu một cáchđơn giản.

• Hỗ trợ giáo viên xây dựng các chương trình học phù hợp và hiệu quả, đồngthời dễ dàng quản lý các lớp học của mình.

• Giúp các học viên theo dõi được quá trình và kết quả học tập của mình tạitrung tâm.

1.2.2Ý nghĩa học thuật

Việc thực hiện xây dựng hệ thống quản lý dành cho một trung tâm ngoại ngữ giúpchúng tôi biết thêm được nhiều kiến thức hữu ích về ngành giáo dục Trong quátrình xây dựng hệ thống này, chúng tôi cũng đã có cơ hội vận dụng và củng cố cáckiến thức mà mình đã học được trong các năm học qua, ví dụ như kiến thức về kiếntrúc hệ thống, cơ sở dữ liệu, công nghệ phần mềm, kỹ thuật lập trình web, Ngoàira, trong quá trình này chúng tôi cũng đã được tìm hiểu và làm việc thêm với cáccông nghệ mới và phổ biến hiện nay như framework NextJS dành cho Front-end,NodeJs (cùng ExpressJS) cùng với framework Express dành cho Back-end, Đâycũng là cơ hội không thể tốt hơn để chúng tôi nâng cao khả năng tìm hiểu và nghiêncứu, rèn luyện cho mình những kỹ năng mềm cần thiết, đặc biệt là kỹ năng làm việcnhóm, kỹ năng trình bày ý tưởng cũng như khả năng phản biện của bản thân, giúpchúng tôi có thể dễ dàng hòa nhập vào những môi trường mới và thuận tiện hơntrong quá trình phát triển sự nghiệp sau này.

1.3Nội dung thực hiện

Trong thời gian làm đề tài luận văn tốt nghiệp Xây dựng hệ thống quản lý chomột trung tâm ngoại ngữ này, chúng tôi đã làm các công việc sau:

• Tìm hiểu, đánh giá một vài hệ thống có chức năng tương tự với đề tài.• Đề xuất các chức năng cần thiết của hệ thống, vẽ và mô tả các biểu đồ usecase

Bên cạnh đó, trong quá trình hiện thực hệ thống chúng tôi nhận thấy có nhiều thiếusót về những chức năng vì giới hạn về mặt thời gian và nhân lực, chúng tôi sẽ tiếp

tục phát triển những chức năng này trong tương lai Cụ thể, chúng tôi chưa thể hiệnthực các chức năng của người dùng là admin.

2.1React JS [1]

Trong quá trình phát triển một hệ thống hỗ trợ quản lý hoạt động của trung tâmngoại ngữ, việc xây dựng giao diện giúp người dùng tương tác và sử dụng hệ thốnglà một yêu cầu quan trọng Nhóm phát triển chúng tôi quyết định xây dựng ứngdụng trên nền tảng web, do những ưu điểm, sự tiện lợi và hỗ trợ đa nền tảng củaứng dụng web so với ứng dụng desktop Chúng tôi không sử dụng các templateengine cùng với JQuery, thay vào đó hướng tới ứng dụng web một trang (Singlepage application) kết hợp với Json web token, giúp dễ dàng mở rộng hệ thống vàxây dựng ứng dụng di động trong tương lai Với sự phát triển mạnh mẽ và được hỗtrợ bởi một cộng đồng lớn, chúng tôi chọn ReactJS thay vì các công nghệ lớn khácnhư AngularJS, VueJS, để xây dựng giao diện hệ thống.

ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng cácthành phần giao diện người dùng (UI) có thể sử dụng lại ReactJS giúp phân chiacác UI phức tạp thành các thành phần nhỏ (được gọi là component) Nó được tạo rabởi Jordan Walke, một kỹ sư phần mềm tại Facebook ReactJS ban đầu được pháttriển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mìnhnhư WhatsApp và Instagram React là một thư viện UI phát triển tại Facebook đểhỗ trợ việc xây dựng những thành phần (components) UI có tính tương tác cao, cótrạng thái và có thể sử dụng lại được.

• An toàn hơn: Ngược với Javascript, JSX được biên dịch trước khi chạy, giốngnhư Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biêndịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt.Việc sử dụng JSX mang lại nhiều lợi ích là:

• Giúp cho việc xây dựng ứng dụng React có thể được xây dựng nhanh chónghơn, dễ tối ưu hơn trong việc biên dịch mã sang Javascript.

• JSC giúp xem lỗi trong quá trình triển khai dễ hơn và những lỗi này sẽ đượchiển thị trong quá trình biên dịch.

• Các cú pháp khá giống với HTML nên sẽ dễ dàng hơn nhiều cho việc viếtchuyển đổi.

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

Trong ReactJS có hai loại component:

• Stateful component: là component có thành phần dữ liệu độc lập với nent cha và có thể thay đổi.

compo-• Stateless component: là component không có thành phần dữ liệu độc lập,component hoàn toàn phụ thuộc vào component cha.

2.2.2Props và State

Các thành phần dữ liệu của component gồm có hai loại:

• Props: là một đối tượng chứa các thuộc tính của thẻ JSX Props giúp truyền

dữ liệu từ component này sang component khác, và props là bất biến.

• State: thể hiện trạng thái của component Khác với props, state của

compo-nent không thể truyền được ra ngoài, compocompo-nent sẽ quản lý state của chínhnó State là một đối tượng mà lưu trữ giá trị của các thuộc tính bên trongcomponents và chỉ tồn tại trong phạm vi của component đó Mỗi khi bạn thayđổi giá trị của một state thì component đó sẽ được render lại.

2.2.3React Life-cycle

React Life-cycle là một vòng đời của component Khi tiến hành render một nent thì ReactJS thực hiện nhiều tiến trình khác nhau, các tiến trình này được lặpđi lặp lại đối với các component.

compo-Giả sử khi một component được gọi, trước tiên component sẽ cài đặt props và state,sau đó tiến hành mounting, update, unmounting, Việc tham gia vào quá trình nàycần sử dụng đến các hàm hỗ trợ của life-cycle mà ReactJS cung cấp.

Hình 2.2: Vòng đời của component.

Khái niệm DOM và Virtual DOM:

• DOM (Document Object Model) là giao diện lập trình cho văn bản HTML vàXML Nó xác định cấu trúc logic của văn bản HTML và XML, cũng như cáchchúng được truy cập và thao tác Khi một trang web được load, trình duyệtsẽ tạo DOM cho trang web đó dưới dạng các nút có mô hình cơ bản như sau:

Hình 2.3: Mô hình DOM cơ bản.

• Do việc tạo và cập nhật DOM khá tốn thời gian, nên đội ngũ phát triển củafacebook đã tạo ra Virtual DOM nhằm tăng tốc độ cập nhật DOM trong ứngdụng ReactJS của mình Virtual DOM được thiết kế nhỏ gọn và bản chất củanó là một đối tượng sao chép lại DOM do trình duyệt tạo ra.

Virtual DOM hoạt động theo 3 bước:

• Khi state hoặc prop thay đổi, toàn bộ UI sẽ render lại tại Virtual DOM.• Kiểm tra sự khác biệt giữa DOM và Virtual DOM theo thuật toán kiểm tra

khác biệt.

• Cập nhật DOM với những thay đổi đã tìm được bằng thuật toán ở bước 2.

Hình 2.4: Cơ chế cập nhật Virtual DOM.

Khi chúng ta thực hiện render một JSX element, mỗi Virtual DOM object sẽ đượccập nhật, khi virtual DOM được cập nhật, ReactJS sẽ so sánh virtual DOM vớivirtual DOM trước đó để kiểm tra trước khi thực hiện cập nhật và sau đó sẽ cậpnhật trên một phần của DOM thật Thay đổi của DOM thật sẽ được hiển thị ramàn hình Việc chỉ cập nhật một phần của DOM giúp tiết kiệm tài nguyên và tốcđộ xử lý nhanh hơn.

2.3NextJS [2]

Client-side rendering (CSR) có những nhược điểm nhất định:• Vấn đề hiệu năng và trang trống khi tải web lần đầu.• Vấn đề SEO.

Client-side rendering có nghĩa rằng trình duyệt sẽ tải một trang HTML trống vàgồm các tập tin javascript Người dùng cần đợi các tập tin javascript thực thi xongđể có thể bắt đầu tương tác với ứng dụng, việc mà có thể tốn thời gian tùy thuộcvào thiết bị của người dùng Ngoài ra, trang web HTML trống không thể hỗ trợSEO, trong khi động lực phát triển hệ thống của chúng tôi bao gồm truyền bá hìnhảnh trung tâm ngoại ngữ và thu hút các giáo viên giỏi Chính vì thế, chúng tôi chọn

NextJS, một React framework giúp dễ dàng để xây dựng ứng dụng React tích hợpcơ chế Server-side rendering (SSR) Nextjs bao gồm nhiều tính năng như:

• Pre-rendering, cả static generation (SSG) và server-side rendering (SSR).• Tách mã tự động để tải trang nhanh hơn, mỗi page chỉ load những gì cần thiết

Gồm 3 thành phần chính: Actions, Store, Reducers.

• Actions: đơn giản là các events Chúng là cách mà chúng ta gửi dữ liệu từ

web app đến Redux store Những dữ liệu này có thể là từ sự tương tác củangười dùng với web app hoặc tác vụ gọi đến API.

• Reducers: là các hàm, chúng lấy state hiện tại của web app, thực hiện một

action và trả về một state mới Những states này được lưu như những đốitượng và chúng định rõ cách state của một ứng dụng thay đổi trong việc phảnhồi một action được gửi đến store.

• Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng

Redux nào Bạn có thể truy cập các state được lưu, cập nhật state, và đăngký hoặc hủy đăng ký các listeners thông qua các hàm tiện ích được hỗ trợ.

2.5NodeJS [4]

NodeJS là một nền tảng được xây dựng trên V8 JavaScript Engine – trình thôngdịch thực thi mã JavaScript Nhờ đó, NodeJS cho phép mã Javascript thực thi ngoàimôi trường trình duyệt và được dùng để xây dựng các công cụ tiện ích, bao gồm cảmáy chủ web.

NodeJS không cần đợi API trả dữ liệu về, do đó mọi APIs nằm trong NodeJS đềukhông được đồng bộ NodeJS được xem là một máy chủ đơn luồng và không thể hỗtrợ đa luồng.

Ưu điểmNhược điểm

- Hướng sự kiện không đồng bộ giúpxử lý nhiều yêu cầu đồng thời.

- Đáp ứng được những yêu cầu về thờigian thực.

- Có tốc độ cực rất nhanh, đáp ứngđược nhu cầu sử dụng của khách truycập ‘khổng lồ’ trong thời gian ngắn.

- NodeJS không cung cấp khả năng mởrộng và không thể tận dụng lợi thế củanhiều lõi thường có trong phần cứngcấp máy chủ ngày nay.

- Thao tác với cơ sở dữ liệu quan hệ làmột khó khăn nếu bạn đang sử dụngNodeJS.

- NodeJS không phù hợp với các tácvụ đòi hỏi nhiều CPU mà chỉ phù hợpvới những I/O như máy chủ web.

2.6ExpressJS [5]

Expressjs là một framework được xây dựng trên nền tảng của Nodejs, cung cấp cáctính năng mạnh mẽ để phát triển web, bao gồm các chức năng chính:

• 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ênphương thức HTTP và URL.

• Cho phép trả về các trang HTML dựa vào các tham số.

2.7SocketIO [6]

Khi truy cập vào một trang web hoặc ứng dụng bất kỳ thì việc giao tiếp giữa máychủ (Server) và máy khách (Client) là việc rất quan trọng Để máy chủ và máykhách có thể nhận biết được sự thay đổi của đối phương thì cần sử dụng những cáchthức như AJAX, long-polling, short-polling, và HTML5 server-sent events, Việcsử dụng cách giao tiếp bằng những công cụ kể trên tồn tại nhiều nhược điểm trongđó có thể kể đến là kết quả trả về chậm và tốn rất nhiều tài nguyên.

Để khắc phục những nhược điểm này, công cụ socket.io ra đời để giúp cho việc giaotiếp giữa Server và Client diễn ra tức khắc và chiếm ít tài nguyên nhất SocketIOđược xây dựng trên Websocket protocol và cấu trúc gồm 2 phần: server và clienttương tác với nhau theo hướng sự kiện.

2.8Restful API

Các khái niệm cơ bản:

• API (Application Programming Interface) là một tập các quy tắc và cơ chế màtheo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng

hay thành phần khác API có thể trả về dữ liệu mà bạn cần cho ứng dụng củamình ở những kiểu dữ liệu phổ biến như JSON hay XML.

• REST (Representational State Transfer) là một dạng chuyển đổi cấu trúc dữliệu, một kiểu kiến trúc để viết API Nó sử dụng phương thức HTTP đơn giảnđể tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việcxử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET,POST, DELETE, đến một URL để xử lý dữ liệu.

• RESTful là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng web(thiết kế Web services) để tiện cho việc quản lý các tài nguyên Nó chú trọngvào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệuđộng ), bao gồm các trạng thái tài nguyên được định dạng và được truyềntải qua HTTP RESTful là một trong những kiểu thiết kế API được sử dụngphổ biến ngày nay để cho các ứng dụng (web, mobile ) khác nhau giao tiếpvới nhau.

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trênsẽ sử dụng những phương thức HTTP riêng.

• GET (SELECT): Trả về một tài nguyên hoặc một danh sách tài nguyên.• POST (CREATE): Tạo mới một tài nguyên.

• PUT (UPDATE): Cập nhật thông tin cho tài nguyên.• DELETE (DELETE): Xóa một tài nguyên.

Mô hình dữ liệu là một khái niệm dùng để mô tả cấu trúc dữ liệu, các thao tác dữliệu và các ràng buộc dữ liệu của cơ sở dữ liệu Hiện nay, có rất nhiều các mô hìnhdữ liệu đã ra đời; trong đó, nổi bật là mô hình dữ liệu quan hệ với những ưu điểmnổi bật:

Hệ quản trị cơ sở dữ liệu là một phần mềm cho phép quản lý, truy xuất và thaotác với dữ liệu trong cơ sở dữ liệu Trong đó, MySQL được sử dụng vô cùng rộng

rãi, một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở hoạt động theo mô hìnhclient-server:

• MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa quan hệ giữa các bảng.• Client sẽ gửi yêu cầu SQL bằng câu lệnh trên MySQL.

• Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy client.Là một ứng dụng mã nguồn mở, hiệu năng ổn định và được hỗ trợ bởi cộng đồngđông đảo, MySQL trở thành lựa chọn phù hợp cho hệ thống của chúng tôi.

Phân tích và đề xuất

Trong chương này, chúng tôi sẽ giới thiệu các khái niệm liên quan, phân tích mộtvài hệ thống tương tự và đưa ra các đề xuất về chức năng của hệ thống quản lý chongoại ngữ trung tâm ngoại ngữ.

Mục lục

3.1 Các khái niệm 15

3.2 Các hệ thống tương tự cùng lĩnh vực đề tài 15

3.3 Đề xuất về đề tài 18

• LMS là quá trình cải tiến giáo dục do ngoài việc có thể chứa học liệu, LMScòn chứa các hoạt động do người dạy và người học trực tiếp sinh ra Thôngqua các hoạt động này, hành vi học tập có thể được nhận diện để người dạycó thể tạo ra các chiến lược dạy học đáp ứng.

• Một LMS tốt thường sẽ có một bộ các tính năng cơ bản như:

– Quản lý học liệu (các loại học liệu, kể cả ngân hàng câu hỏi, tuy nhiên

không phải là tất cả).

– Quản lý các hoạt động (hoạt động của người dạy, người học hay bất kể

ai liên quan đến khóa học).

– Cho phép tổ chức các phương pháp giảng dạy đa dạng (nói chung về các

phương pháp tổ chức lớp học) và có khả năng biến đổi nhanh để đáp ứngnhu cầu thay đổi phương pháp giảng dạy.

– Đặc biệt quan trọng đối với các LMS hiện nay đó là khả năng tích hợp,

3.2Các hệ thống tương tự cùng lĩnh vực đề tài

Để biết thêm về các nghiệp vụ trong ngành giáo dục, chúng tôi đã tiến hành khảosát một vài trang web chuyên cung cấp các hệ thống phần mềm quản lý trung tâmgiáo dục tương tự, để có thể tìm ra các vấn đề và đề xuất các tính năng cho hệthống của mình Chúng tôi đã chọn hai hệ thống khá nổi tiếng là Mona eLMS vàEduspace.

3.2.1Mona eLMS

Hệ thống Mona eLMS có tên miền là https://mona.media/, là hệ thống phầnmềm quản lý trường học - trung tâm - cơ sở giáo dục và trang web học trực tuyếnelearning, cung cấp các chức năng cho phép người dùng dễ dàng quản lý toàn bộnghiệp vụ trong ngành giáo dục.

• Công nghệ: MCV NET.

• Hướng đến những loại người dùng sau:

– Học viên.– Giáo viên.

– Lãnh đạo / Chủ trung tâm.– Người bán hàng, tư vấn viên.

• Chức năng:

– Quản lý giáo viên: Quản lý danh sách giáo viên, thông tin giáo viên, phân

bổ giáo viên dạy học.

– Quản lý khóa học: Tạo, chỉnh sửa khóa học, lựa chọn thời gian học; Quản

lý, điểm danh học viên trong khóa; Quản lý bài tập, tài liệu học tập, bàikiểm tra.

– Quản lý học viên: Quản lý danh sách học viên, Quản lý tình hình học

tập, Học viên gửi phản hồi cho giáo viên.

– Quản lý sổ sách, giấy tờ.– Quản lý tài chính, thu chi.

– Quản lý nhân sự, tiền lương, hoa hồng.

– Quản lý giảng dạy trực tuyến (dạy học ngoại ngữ 1-1, dạy theo nhóm,

dạy học các dạng thức khác, bán video khóa học).

Nhận xét

Ưu điểm:

• Giao diện đẹp, thân thiện với người dùng.

• Có nhiều gói dịch vụ phù hợp với nhiều mô hình đào tạo.

• Hỗ trợ hình thức học trực tuyến: Dạy học một với một, phòng học online, • Hỗ trợ trên cả nền tảng website, web app cũng như app di động.

Khuyết điểm:

• Không cho phép chức năng dùng thử.

Hệ thống Eduspace có tên miền là https://eduspace.vn/, cung cấp các giải pháptổng thể trong việc quản lý và vận hành một trung tâm đào tạo Hình 3.1 mô tả sơviệc vận hành một trung tâm với eduspace sẽ như thế nào.

• Hướng đến những loại người dùng sau:

– Học Viên.– Giáo Viên.– Chủ Trung Tâm.

– Quản lý thu chi: thu học phí, xây dựng các chương trình ưu đãi, xây dựng

các khoản thu khác (sách, đồng phục, ), các khoản chi hàng tháng.

– Học trực tuyến: khóa học online, bài kiểm tra online (E-learning).– Báo cáo hàng tháng: báo cáo doanh thu, báo cáo nợ học phí, kết quả kinh

Hình 3.1: Hình mô tả các chức năng cơ bản của hệ thốngNhận xét

Ưu điểm:

• Giao diện đẹp, thân thiện với người dùng.

• Có nhiều gói dịch vụ phù hợp với các loại trung tâm khác nhau.

• Có tài liệu hướng dẫn rõ ràng cho từng chức năng của hệ thống (tài liệu pdf,video hướng dẫn).

• Hỗ trợ tính năng dùng thử.

– Tư vấn viên, nhân viên.

• Các chức năng chính:

– Học viên: Đăng ký – chuyển – hủy khóa học, xem thời khóa biểu; kết quả

học, tiến trình học của bản thân; xem tài liệu của khóa học mình thamgia; tham gia kiểm tra trực tuyến, làm bài tập trực tuyến; Phản hồi, liênlạc (hệ thống chat) với giáo viên, có thể đăng ký học bù.

– Phụ huynh học viên: Xem tiến trình, kết quả học của học viên; kết quả

điểm danh của học viên; liên lạc (hệ thống chat) với giáo viên khóa học.

– Giáo viên: Xem nhật ký giảng dạy, quản lý điểm danh, tình hình học tập

của các học viên; quản lý bài tập, tài liệu; liên lạc với phụ huynh họcsinh.

– Trợ giảng: Xem nhật ký giảng dạy, thông tin chương trình dạy, buổi học,

học viên thuộc khóa học, đăng ký ca làm việc.

– Chủ trung tâm: Quản lý doanh thu, chi phí; báo cáo theo quý, năm; quản

lý giáo viên, nhân viên, học viên; quản lý lương thưởng.

– Tư vấn viên, nhân viên: Danh sách khóa học, lịch học; tạo, chỉnh sửa

khóa học; tạo lịch học cho khóa học; danh sách học viên nợ học phí; liênlạc (hệ thống chat).

4.1 Các chức năng của người dùng chưa đăng nhập 20

4.2 Các chức năng chung của người dùng đã đăng nhập 25

4.3 Các chức năng của người dùng là học viên và phụ huynh 31

4.4 Các chức năng của người dùng là giáo viên và trợ giảng 41

4.5 Các chức năng của người dùng là nhân viên 71

4.6 Các chức năng của người dùng là Quản lý (Admin) 102

4.1Các chức năng của người dùng chưa đăng nhập

Nhóm các chức năng của người dùng được trình bày ở hình 4.1.

Hình 4.1: Usecase nhóm các chức năng của người dùng chưa đăng nhập.

Usecase Id:UC_DNTên use-case:Đăng nhập

Actor: Người dùng chưa đăng nhập.

Mô tả: Người dùng đăng nhập vào hệ thống bằng tài khoản đã có.

Kích hoạt: Người dùng nhấn chọn "Đăng nhập" trên thanh điều hướng.

Tiền điều kiện: Người dùng chưa đăng nhập vào hệ thống.

Hậu điều kiện: Người dùng đăng nhập thành công và được điều hướng đếntrang chủ của hệ thống.

1 Người dùng truy cập vào hệ thống.

2 Người dùng nhấn chọn "Đăng nhập" trên thanh điều hướng.3 Hệ thống hiển thị màn hình đăng nhập.

4 Người dùng nhập tên người dùng và mật khẩu.5 Người dùng nhấn "Đăng nhập" để đăng nhập.

6 Đăng nhập thành công, hệ thống điều hướng đến màn hìnhtrang chủ.

Luồng thay thế: Không có.

Ngoại lệ: Ngoại lệ bước 6 Hệ thống thông báo lỗi khi người dùng đểtrống hoặc nhập sai tên đăng nhập hoặc mật khẩu.

Yêucầuphichức năng:

Không có.

Bảng 4.1: Usecase đăng nhập.

Usecase Id:UC_DKTên use-case:Đăng ký

Actor: Người dùng chưa đăng nhập.

Mô tả: Người dùng đăng ký tài khoản để sử dụng hệ thống.

Kích hoạt: Người dùng nhấn chọn "Đăng ký" trên thanh điều hướng, hoặc"Đăng ký ngay" trong trang Đăng nhập.

Tiền điều kiện: Người dùng chưa đăng nhập vào hệ thống.

Hậu điều kiện: Người dùng đăng ký thành công và được điều hướng đến trangđăng nhập của hệ thống.

1 Người dùng truy cập vào hệ thống.

2 Người dùng nhấn chọn "Đăng ký" trên thanh điều hướng.3 Hệ thống hiển thị màn hình đăng ký.

4 Người dùng nhập các thông tin cá nhân và tài khoản.5 Người dùng nhấn "Đăng ký" để đăng ký.

6 Đăng ký thành công, hệ thống điều hướng đến màn hìnhđăng nhập.

Luồng thay thế: Thay thế bước 2 Người dùng nhấn "Đăng nhập" trên thanhđiều hướng, và "Đăng ký ngay" khi chưa có tài khoản.

Ngoại lệ: Ngoại lệ bước 6 Hệ thống thông báo lỗi khi người dùng đểtrống các thông tin cá nhân hoặc tên người dùng tài khoản đãtồn tại.

Yêucầuphichức năng:

Không có.

Bảng 4.2: Usecase đăng ký.

Usecase Id:UC_XKH

Tên use-case:Xem danh sách khóa học sắp khai giảngActor: Người dùng chưa đăng nhập.

Mô tả: Người dùng xem danh sách các khóa học sắp khai giảng.

Kích hoạt: Người dùng nhấn chọn "Xem tất cả khóa học" tại trang chủcủa hệ thống.

Tiền điều kiện: Người dùng chưa đăng nhập vào hệ thống.

Hậu điều kiện: Người dùng xem được tất cả các khóa học sắp khai giảng.

1 Người dùng truy cập vào hệ thống.

2 Người dùng nhấn chọn "Xem tất cả khóa học" tại trang chủcủa hệ thống.

3 Hệ thống hiển thị màn hình chứa tất cả khóa học sắp khaigiảng.

Luồng thay thế: Không có.