Xây dựng Ứng dụng website quản lý khóa học tiếng anh sử dụng công nghệ net, react, azure và kubernetes

Mô tả giao diện trang quản lý lớp học của khóa học có giáo viên hướng dẫn .... Giao diện trang quản lý lớp học của khóa học có giáo viên hướng dẫn ..... Dưới đây là một số lý do nêu bật

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Tp Hồ Chí Minh, tháng 7 năm 2024

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

XÂY DỰNG ỨNG DỤNG WEBSITE QUẢN LÝ KHÓA HỌC TIẾNG ANH, SƯ DỤNG CÔNG NGHỆ NET, REACT, AZURE

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM

KHOA CÔNG NGHỆ THÔNG TIN

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

-🙞🙜🕮🙞🙜 -

TRẦN THỊ BẢO NGỌC – 20110276 NGUYỄN THÀNH VĂN – 20110224

Đề tài:

SỬ DỤNG CÔNG NGHỆ NET, REACT, AZURE VÀ KUBERNETES

KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIẢNG VIÊN HƯỚNG DẪN

KHÓA 2020 - 2024 XÂY DỰNG ỨNG DỤNG WEBITE QUẢN LÝ KHÓA HỌC TIẾNG ANH,

ThS NGUYỄN MINH ĐẠO

i

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ và tên Sinh viên 1: Trần Thị Bảo Ngọc MSSV 1: 20110276

Họ và tên Sinh viên 2: Nguyễn Thành Văn MSSV 2: 20110224

Tên đề tài: Xây dựng ứng dụng website quản lý khóa học tiếng Anh, sử dụng công

nghệ NET, React, Azure VÀ Kubernetes

Họ và tên Giáo viên hướng dẫn: ThS Nguyễn Minh Đạo

Tp Hồ Chí Minh, ngày tháng 07 năm 2024

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

ii

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

Họ và tên Sinh viên 1: Trần Thị Bảo Ngọc MSSV 1: 20110276

Họ và tên Sinh viên 2: Nguyễn Thành Văn MSSV 2: 20110224

Tên đề tài: Xây dựng ứng dụng website quản lý khóa học tiếng Anh, sử dụng công

nghệ NET, React, Azure VÀ Kubernetes

Họ và tên Giáo viên hướng dẫn: ThS Mai Anh Thơ

Tp Hồ Chí Minh, ngày tháng 07 năm 2024

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

1

LỜI CẢM ƠN

Sau quá trình nỗ lực tìm tòi và nghiên cứu, nhóm chung em đã hoàn thành luận văn tốt nghiệp của mình Đây là một thử thách lớn đối với chúng em, nhưng nhờ sự giúp đỡ và giải đáp thắc mắc tận tình của thầy Nguyễn Minh Đạo, nhóm em đã vượt qua được mọi vướng mắc và hoàn thành bài luận văn một cách tốt nhất

Em muốn gửi lời cảm ơn đến thầy Nguyễn Minh Đạo vì đã tạo điều kiện và hỗ trợ em trong quá trình lên ý tưởng và triển khai hệ thống quản lý khóa học tiếng anh Những kiến thức và kinh nghiệm mà thầy truyền đạt đã giúp em có được một đồ án hoàn thiện và chất lượng Những lời khuyên, định hướng và sự hỗ trợ của thầy cô đã giúp em có được những ý tưởng mới, cách tiếp cận khác biệt từ việc phân tích yêu cầu người dùng, chọn hệ quản trị cơ sở dữ liệu, kiến trúc hệ thống, từ đó giúp nhóm em hoàn thiện luận văn tốt nghiệp của mình

Một lần nữa, em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Minh Đạo vì đã hỗ trợ

em trong quá trình hướng dẫn luận văn tốt nghiệp Sự giúp đỡ của thầy là kim chỉ nam dẫn lối nhóm em và nhiều học sinh khác trên con đường học tập và phát triển

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

Nhóm sinh viên Trần Thị Bảo Ngọc Nguyễn Thành Văn

2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM

Khoa Công Nghệ Thông Tin

*******

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và tên Sinh viên 1: Trần Thị Bảo Ngọc Mã số sinh viên: 20110276

Họ và tên Sinh viên 2: Nguyễn Thành Văn Mã số sinh viên: 20110224 Chuyên ngành: Công nghệ phần mềm

Thời gian làm luận văn: Từ 07/03/2024 đến 12/07/2024

Tên luận văn: Xây dựng ứng dụng website quản lý khóa học tiếng Anh, sử dụng

công nghệ NET, React, Azure VÀ Kubernetes

GV hướng dẫn: ThS Nguyễn Minh Đạo

Nhiệm vụ của luận văn:

1 Lý thuyết

- Tìm hiểu về các công nghệ: Net, ReactJS, Azure, Kubernetes

2 Thực hành

- Sử dụng Net để viết API cho các module trong hệ thống

- Sử dụng Postgresql để lưu trữ dữ liệu của hệ thống

- Sử dụng JSON Web Token để xác thực và phân quyền cho hệ thống API

- Sử dụng thư viện ReactJS, React Query, Material UI, TailwindCSS để thiết kế và

xử lý giao diện web cho người dùng thao tác

- Sử dụng phần mềm Kubernetes để trển khai toàn bộ hệ thống lên nền tảng đám mây Azure, kết hợp quản lý cơ sở hạ tầng bằng mã nguồn thông qua sử dụng công

3

1.2 Ý nghĩa khoa học và thực tiễn của đề tài

1.3 Mục tiêu nghiên cứu

2 PHẦN NỘI DUNG

Chương 1: Khảo sát và phân tích hiện trạng

1.1 Phân tích một số hệ thống có liên quan

1.2 Xác định yêu cầu

Chương 2: Phân tích và thiết kế hệ thống

2.1 Thiết kế lược đồ use case

2.2 Đặc tả use case

2.3 Lược đồ tuần tự

2.4 Lược đồ lớp

2.5 Thiết kế cơ sở dữ liệu

2.6 Thiết kế giao diện

Chương 3: Công nghệ sử dụng và quy trình phát triển hệ thống

3.1 Các công nghệ sử dụng trong front-end

3.2 Các công nghệ sử dụng trong back-end

- Lên ý tưởng cho UI

- Thiết kế Figma cho từng trang của

hệ thống

3 17/04/2024 – 05/05/2024

- Tìm hiểu ReactJS, React Query

- Tìm hiểu Material UI, Tailwind CSS

- Hoàn thành sơ bộ giao diện trang quản lý và người dùng

4 06/05/2024 – 06/06/2024

- Tìm hiểu Net, Postgresql, Kubernetes, Azure

- Triển khai code base

5 07/06/2024 – 19/06/2024 - Hoàn thành sơ bộ các API cho hệ

thống

6 20/06/2024 – 30/06/2024 - Kết nối Backend và Frontend

- Debug và sửa lỗi phát sinh

- Sửa chữa các lỗi phát sinh

9 11/07/2024 – 12/07/2024 - Hoàn thành báo cáo chuẩn bị nộp

5

Tp Hồ Chí Minh, ngày tháng 07 năm 2024

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

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

Tp Hồ Chí Minh, ngày tháng 07 năm 2024

Ý kiến của Giảng viên hướng dẫn

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

6

MỤC LỤC

LỜI CẢM ƠN 1

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 2

MỤC LỤC 6

DANH MỤC CÁC BẢNG 12

DANH SÁCH CÁC HÌNH ẢNH 16

MỞ ĐẦU 21

NỘI DUNG 25

Chương 1 Khảo sát và phân tích hiện trạng 25

1.1 Phân tích một số hệ thống có liên quan 25

1.1.1 Khảo sát website Unica 25

1.1.2 Khảo sát website Udemy 26

1.2 Xác định yêu cầu: 27

1.2.1 Yêu cầu chức năng: 27

1.2.2 Yêu cầu phi chức năng 28

Chương 2 Phân tích và thiết kế hệ thống 29

2.1 Thiết kế lượt đồ use case 29

2.2 Đặc tả use case 29

2.2.1 Đăng ký tài khoản 29

2.2.2 Đăng nhập 30

2.2.3 Quên mật khẩu 31

2.2.4 Tìm kiếm khóa học tự học/lớp học theo tên 32

2.2.5 Xem và đăng bài viết lên diễn đàn 33

2.2.6 Bình luận bài viết trên diễn đàn 34

2.2.7 Nhắn tin với quản trị viên 36

2.2.8 Quản lý hỗ trợ người dùng 36

7

2.2.9 Quản lý thẻ khóa học 37

2.2.10 Quản lý người dùng 38

2.2.11 Quản lý khóa học tự học 39

2.2.12 Quản lý khóa học có giảng viên hướng dẫn 41

2.2.13 Quản lý lớp học 43

2.2.14 Quản lý bài học của khóa học tự học 44

2.2.15 Quản lý bài kiểm tra cuối buổi học của khóa học tự học 46

2.2.16 Quản lý bài học của lớp học 48

2.2.17 Quản lý bài kiểm tra định kỳ của lớp học 49

2.2.18 Quản lý bài kiểm tra cuối buổi học của lớp học 51

2.2.19 Quản lý câu hỏi của bài kiểm tra 53

2.2.20 Xem danh sách các học viên của lớp học 54

2.2.21 Học bài học của khóa học tự học 55

2.2.22 Làm bài kiểm tra định kỳ 55

2.2.23 Làm bài kiểm tra cuối buổi học 56

2.2.24 Mua khóa học/ lớp học 57

2.2.25 Kiểm tra lỗi ngữ pháp 58

2.2.26 Đánh giá khóa học/ lớp học 58

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

2.2.28 Đổi mật khẩu 60

2.2.29 Xem và đăng bài viết lên diễn đàn bài học 60

2.3 Lược đồ tuần tự 62

2.3.1 Đăng ký tài khoản 62

2.3.2 Đăng nhập tài khoản 63

2.3.3 Quên mật khẩu 64

2.3.4 Tìm kiếm khóa học trên trang chủ 65

8

2.3.5 Xem và đăng bài viết lên diễn đàn 65

2.3.6 Bình luận bài viết trên diễn đàn 67

2.3.7 Nhắn tin với quản trị viên 69

2.3.8 Quản lý hỗ trợ người dùng 69

2.3.9 Quản lý thẻ khóa học 70

2.3.10 Quản lý người dùng 72

2.3.11 Quản lý khóa học tự học 73

2.3.12 Quản lý khóa học có giáo viên hướng dẫn 75

2.3.13 Quản lý lớp học 76

2.3.14 Quản lý bài học của khóa học tự học 78

2.3.15 Quản lý bài kiểm tra cuối buổi học của khóa học tự học 80

2.3.16 Quản lý bài học của lớp học 82

2.3.17 Quản lý bài kiểm tra định kỳ của lớp học 84

2.3.18 Quản lý bài kiểm tra cuối buổi học của lớp học 86

2.3.19 Quản lý câu hỏi của bài kiểm tra định kỳ 88

2.3.20 Xem danh sách các học viên của lớp học 90

2.3.21 Học bài học của khóa học tự học 91

2.3.22 Làm bài kiểm tra định kỳ 92

2.3.23 Làm bài kiểm tra cuối buổi học 93

2.3.24 Mua khóa học, lớp học 93

2.3.25 Kiểm tra lỗi ngữ pháp 94

2.3.26 Đánh giá khóa học / lớp học 95

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

2.3.28 Đổi mật khẩu 96

2.3.29 Xem và đăng bài viết lên diễn đàn bài học 97

2.4 Lược đồ lớp 99

9

2.5 Thiết kế cơ sở dữ liệu 106

2.5.1 Lược đồ ERD mức vật lý: 106

2.5.2 Mô tả dữ liệu các bảng 111

2.6 Thiết kế giao diện 129

2.6.1 Giao diện chung 129

2.6.1.1 Giao diện trang chủ 129

2.6.1.2 Giao diện trang hiển thị tất cả 130

2.6.1.3 Giao diện trang tìm kiếm 131

2.6.1.4 Giao diện trang diễn đàn 132

2.6.1.5 Giao diện trang chi tiết bài viết 133

2.6.1.6 Giao diện trang đăng nhập 134

2.6.1.7 Giao diện trang đăng ký 135

2.6.1.8 Giao diện trang quên mật khẩu 136

2.6.1.9 Giao diện trang tạo lại mật khẩu 136

2.6.1.10 Giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 137

2.6.1.11 Giao diện trang thanh toán 140

2.6.2 Giao diện trang quản trị viên 141

2.6.2.1 Giao diện trang thống kê 141

2.6.2.2 Giao diện trang thông tin cá nhân 142

2.6.2.3 Giao diện trang quản lý người dùng 143

2.6.2.4 Giao diện trang quản lý thẻ khóa học 144

2.6.2.5 Giao diện trang quản lý khóa học tự học 145

2.6.2.6 Giao diện trang quản lý khóa học có hướng dẫn 146

2.6.2.7 Giao diện trang quản lý lớp học của khóa học có giáo viên hướng dẫn 146

2.6.2.8 Giao diện trang hỗ trợ khách hàng 147

10

2.6.2.9 Giao diện trang quản lý hóa đơn mua khóa học có hướng dẫn 148

2.6.2.10 Giao diện trang quản lý hóa đơn mua lớp học 148

2.6.3 Giao diện trang giáo viên 149

2.6.3.1 Giao diện trang thông tin cá nhân 149

2.6.3.2 Giao diện trang quản lý lớp học đang dạy 149

2.6.4 Giao diện trang học viên 150

2.6.4.1 Giao diện trang thông tin cá nhân 150

2.6.4.2 Giao diện trang thời khóa biểu 151

2.6.4.3 Giao diện trang khóa học tự học của tôi 151

2.6.4.4 Giao diện trang lớp học của tôi 152

2.6.4.5 Giao diện trang tiến độ học tập 152

2.6.4.6 Giao diện trang bài tập sắp tới hạn 153

2.6.4.7 Giao diện trang đánh giá khóa học/ lớp học 153

2.6.4.8 Giao diện trang hóa đơn đăng ký khóa học có người hướng dẫn 154

2.6.4.9 Giao diện trang hóa đơn đăng ký lớp học 154

2.6.4.10 Giao diện trang kiểm tra ngữ pháp miễn phí 155

Chương 3 Công nghệ sử dụng và quy trình phát triển ứng dụng 156

3.1 ReactJS, TypeScript và Vite 156

3.1.1 Giới thiệu ReactJS 156

3.1.2 Giới thiệu Typescript 156

3.1.3 Giới thiệu Vite và cách kết hợp với dự án ReactJS và Typescript 157

3.1.4 Giới thiệu NET Core 158

3.1.5 Xây dựng Web API với ASP.NET Core 159

3.2 Đóng gói ứng dụng và Docker 159

3.2.1 Ứng dụng được đóng gói 159

3.2.2 Docker 160

11

3.3 Hàng đợi tin nhắn RabbitMQ và thư viện Masstransit (.NET) 161

3.4 Postgresql 164

3.5 Công nghệ đám mây Azure 165

3.6 Công nghệ quản lý container – Kubernetes 165

3.7 Hệ thống lưu trữ phân tán (Distributed object storage server) – MinIO 168

3.8 Continuous integration (CI) 169

3.9 Continuous Deployment sử dụng Terraform, Terragrunt và Terraform cloud 169

Chương 4 Cài đặt môi trường, triển khai hệ thống và kiểm thử 172

4.1 Cài đặt môi trường lập trình ở máy tính 172

4.1.1 Cài đặt minio ở máy tính 172

4.1.2 Sử dụng google console cloud 173

4.1.3 Giới thiệu và cài đặt gitlab runner 175

4.1.3.1 Giới thiệu 175

4.1.3.2 Tạo gitlab runner token trong project ở gitlab 176

4.1.3.3 Cài đặt Gitlab Runner (Docker Executor) trên Google Console Cloud 180

4.1.4 Triển khai hệ thống kết hợp tích hợp liên tục (CI) và triển khai liên tục (CD) trên môi trường đám mây Azure 184

4.2 Kiểm thử 184

4.2.1 Kế hoạch kiểm thử 184

4.2.2 Quy trình kiểm thử 186

4.2.3 Kết quả kiểm thử 186

KẾT LUẬN 191

TÀI LIỆU THAM KHẢO 193

12

DANH MỤC CÁC BẢNG

Bảng 1 Mô tả dữ liệu bảng Tài khoản – Users 111

Bảng 2 Mô tả dữ liệu bảng Khóa học tự học – SelfStudyCourses 112

Bảng 3 Mô tả dữ liệu bảng Khóa học có giảng viên hướng dẫn – TeachingCourses 113 Bảng 4 Mô tả dữ liệu bảng Lớp học – CourseClasses 113

Bảng 5 Mô tả dữ liệu bảng Hóa đơn mua khóa học tự học - StudentPurchaseSelfStudyCourseInvoices 114

Bảng 6 Mô tả dữ liệu bảng Hóa đơn mua lớp học - StudentPurchaseTeachingCourseInvoices 114

Bảng 7 Mô tả dữ liệu bảng Đăng ký khóa học tự học - SelfStudyCourseEnrollments 115

Bảng 8 Mô tả dữ liệu bảng Đăng ký lớp học - CourseClassEnrollments 115

Bảng 9 Mô tả dữ liệu bảng Giao dịch hóa đơn - InvoiceTransaction 115

Bảng 10 Mô tả dữ liệu bảng Diễn đàn bài viết - ForumTopics 116

Bảng 11 Mô tả dữ liệu bảng Bình luận diễn đàn bài viết - ForumComments 116

Bảng 12 Mô tả dữ liệu bảng Lịch sử kiểm tra ngữ pháp - AutoCorrectGrammarHistories 117

Bảng 13 Mô tả dữ liệu bảng Tin nhắn - ChatMessage 117

Bảng 14 Mô tả dữ liệu bảng Đánh giá khóa học tự học - ReviewSelfStudyCourses 117 Bảng 15 Mô tả dữ liệu bảng Đánh giá khóa học có giảng viên hướng dẫn - ReviewTeachingCourses 118

Bảng 16 Mô tả dữ liệu bảng Thẻ khóa học - CourseTags 118

Bảng 17 Mô tả dữ liệu bảng Thẻ của khóa học tự học - SelfStudyCourseTag 118

Bảng 18 Mô tả dữ liệu bảng Thẻ của khóa học có giáo viên hướng dẫn - TeachingCourseTag 119

Bảng 19 Mô tả dữ liệu bảng Bài học - Lesons 119

Bảng 20 Mô tả dữ liệu bảng Nội dung bài học audio - LesonAudioContents 120

Bảng 21 Mô tả dữ liệu bảng Nội dung bài học file - LessonFileContents 120

Bảng 22 Mô tả dữ liệu bảng Nội dung bài học chữ - LessonPageContents 120

Bảng 23 Mô tả dữ liệu bảng Nội dung bài học video - LessonVideoContents 121

Bảng 24 Mô tả dữ liệu bảng Đánh dấu đã học bài – MarkAsDoneLessons 121

Bảng 25 Mô tả dữ liệu bảng Diễn đàn bài học - LessonForums 122

13

Bảng 26 Mô tả dữ liệu bảng Bình luận diễn đàn bài học - LessonForumComments 122

Bảng 27 Mô tả dữ liệu bảng Bài kiểm tra - Assessments 123

Bảng 28 Mô tả dữ liệu bảng Câu hỏi nhiều lựa chọn - MultipleChoiceQuestions 123

Bảng 29 Mô tả dữ liệu bảng Lựa chọn của câu hỏi nhiều lựa chọn - MultipleChoiceQuestionItems 123

Bảng 30 Mô tả dữ liệu bảng Câu hỏi ghép cặp - PairUpQuestions 124

Bảng 31 Mô tả dữ liệu bảng Các cặp trong câu hỏi ghép cặp - PairUpQuestionItems 124

Bảng 32 Mô tả dữ liệu bảng Câu hỏi nghe điền - ListeningQuestions 124

Bảng 33 Mô tả dữ liệu bảng Câu hỏi điền từ - GapFilledQuestions 125

Bảng 34 Mô tả dữ liệu bảng Nội dung hiện ra của câu hỏi điền từ - GapFilledQuestionItemTexts 125

Bảng 35 Mô tả dữ liệu bảng Nội dung cần điền của câu hỏi điền từ - GapFilledQuestionItemBlanks 126

Bảng 36 Mô tả dữ liệu bảng Lịch sử làm bài kiểm tra – AssessmentAttempts 126

Bảng 37 Mô tả dữ liệu bảng Đánh dấu đã làm bài kiểm tra – MarkAsDoneAssessments 126

Bảng 38 Mô tả dữ liệu bảng Kết quả làm câu hỏi nghe điền - ListeningQuestionAttempts 127

Bảng 39 Mô tả dữ liệu bảng Kết quả làm câu hỏi nhiều lựa chọn - MultipleChoiceQuestionAttempts 127

Bảng 40 Mô tả dữ liệu bảng Kết quả làm câu hỏi điền từ - GapFilledQuestionAttempts 128

Bảng 41 Mô tả dữ liệu bảng Câu trả lời câu hỏi điền từ - GapFilledQuestionAttemptItems 128

Bảng 42 Mô tả dữ liệu bảng Kết quả làm câu hỏi ghép cặp - PairUpQuestionAttempts 128

Bảng 43 Mô tả dữ liệu bảng Câu trả lời câu hỏi ghép cặp - PairUpQuestionAttemptItems 129

Bảng 44 Mô tả giao diện trang chủ 130

Bảng 45 Mô tả giao diện trang hiển thị tất cả 131

Bảng 46 Mô tả giao diện trang tìm kiếm 131

14

Bảng 47 Mô tả giao diện trang diễn đàn 132

Bảng 48 Mô tả giao diện tạo bài viết mới 133

Bảng 49 Mô tả giao diện trang chi tiết bài viết 134

Bảng 50 Mô giả giao diện trang đăng nhập 135

Bảng 51 Mô tả giao diện trang đăng ký 135

Bảng 52, Mô tả giao diện trang nhập email yêu cầu tạo lại mật khẩu 136

Bảng 53 Mô tả giao diện trang tạo lại mật khẩu 137

Bảng 54 Mô tả giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 137

Bảng 55 Mô tả giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 2 138

Bảng 56 Mô tả giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 3 139

Bảng 57 Mô tả giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 4 139

Bảng 58 Mô tả giao diện trang thanh toán 140

Bảng 59 Mô tả giao diện trang thống kê 141

Bảng 60 Mô tả giao diện trang thông tin cá nhân 142

Bảng 61 Mô tả giao diện trang quản lý người dùng 143

Bảng 62 Mô tả giao diện trang quản lý thẻ khóa học 144

Bảng 63 Mô tả giao diện trang quản lý khóa học tự học 145

Bảng 64 Mô tả giao diện trang quản lý khóa học có hướng dẫn 146

Bảng 65 Mô tả giao diện trang quản lý lớp học của khóa học có giáo viên hướng dẫn 147

Bảng 66 Mô tả giao diện trang hỗ trợ khách hàng 147

Bảng 67 Mô tả giao diện quản lý hóa đơn mua khóa học có hướng dẫn 148

Bảng 68 Mô tả giao diện trang quản lý hóa đơn mua lớp học 149

Bảng 69 Mô tả giao diện trang thông tin cá nhân 149

Bảng 70 Mô tả giao diện trang quản lý lớp học đang dạy 150

Bảng 71 Mô tả giao diện trang thông tin cá nhân 150

Bảng 72 Mô tả giao diện trang thời khóa biểu 151

Bảng 73 Mô tả giao diện trang khóa học tự học của tôi 151

Bảng 74 Mô tả giao diện trang lớp học của tôi 152

Bảng 75 Mô tả giao diện trang tiến độ học tập 152

Bảng 76 Mô tả giao diện trang bài tập sắp tới hạn 153

Bảng 77 Mô tả giao diện trang đánh giá khóa học/ lớp học 153

15

Bảng 78 Mô tả giao diện trang hóa đơn đăng ký khóa học có người hướng dẫn 154

Bảng 79 Mô tả giao diện trang hóa đơn đăng ký lớp học 154

Bảng 80 Mô tả giao diện trang kiểm tra ngữ pháp miễn phí 155

Bảng 81 Kiểm thử chức năng phía người dùng 188

Bảng 82 Kiểm thử chức năng phía quản trị viên 190

16

DANH SÁCH CÁC HÌNH ẢNH

Hình 1 Giao diện trang chủ website Unica 25

Hình 2 Giao diện trang chủ của Udemy 27

Hình 3 Lược đồ usecase của hệ thống 29

Hình 4 Lược đồ tuần tự đăng ký tài khoản 62

Hình 5 Lược đồ tuần tự đăng nhập tài khoản 63

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

Hình 7 Lược đồ tuần tự tìm kiếm khóa học trên trang chủ 65

Hình 8 Lược đồ tuần tự xem bài viết trên diễn đàn chung 65

Hình 9 Lược đồ tuần tự xem bài viết của tôi trên diễn đàn chung 65

Hình 10 Lược đồ tuần tự tạo bài viết mới trên diễn đàn 66

Hình 11 Lược đồ tuần tự cập nhật bài viết của chính mình trên diễn đàn chung 66

Hình 12 Lược đồ tuần tự xóa bài viết của chính mình trên diễn đàn chung 67

Hình 13 Lược đồ tuần tự xem bình luận trên diễn đàn chung 67

Hình 14 Lược đồ tuần tự thêm bình luận mới trên diễn đàn 68

Hình 15 Lược đồ tuần tự cập nhật bình luận trên diễn đàn 68

Hình 16 Lược đồ tuần tự xóa bình luận trên diễn đàn 68

Hình 17 Lược đồ tuần tự nhắn tin với quản trị viên 69

Hình 18 Lược đồ tuần tự quản lý hỗ trợ người dùng 69

Hình 19 Lược đồ tuần tự xem danh sách thẻ khóa học 70

Hình 20 Lược đồ tuần tự thêm thẻ khóa học mới 70

Hình 21 Lược đồ tuần tự cập nhật thẻ khóa học 71

Hình 22 Lược đồ tuần tự xóa thẻ khóa học 71

Hình 23 Lược đồ tuần tự xem danh sách người dùng 72

Hình 24 Lược đồ tuần tự tạo người dùng mới 72

Hình 25 Lược đồ tuần tự cập nhật người dùng 73

Hình 26 Lược đồ tuần tự xem danh sách khóa học tự học 73

Hình 27 Lược đồ tuần tự tạo khóa học tự học mới 73

Hình 28 Lược đồ tuần tự cập nhật thông tin khóa học tự học 74

Hình 29 Lược đồ tuần tự xóa khóa học tự học 74

Hình 30 Lược đồ tuần tự xem danh sách khóa học có giáo viên hướng dẫn 75

Hình 31 Lược đồ tuần tự tạo khóa học có giáo viên hướng dẫn 75

17

Hình 32 Lược đồ tuần tự cập nhật khóa học có giáo viên hướng dẫn 75

Hình 33 Lược đồ tuần tự xóa khóa học có giáo viên hướng dẫn 76

Hình 34 Lược đồ tuần tự xem danh sách lớp học 76

Hình 35 Lược đồ tuần tự tạo lớp học mới 77

Hình 36 Lược đồ tuần tự cập nhật lớp học 77

Hình 37 Lược đồ tuần tự xóa lớp học 78

Hình 38 Lược đồ tuần tự xem danh sách bài học của khóa học tự học 78

Hình 39 Lược đồ tuần tự thêm bài học mới của khóa học tự học 79

Hình 40 Lược đồ tuần tự cập nhật bài học của khóa học tự học 79

Hình 41 Lược đồ tuần tự xóa bài học của khóa học tự học 80

Hình 42 Lược đồ xem danh sách bài kiểm tra cuối buổi học của khóa học tự học 80

Hình 43 Lược đồ tuần tự thêm bài kiểm tra cuối buổi học của khóa học tự học 81

Hình 44 Lược đồ tuần tự cập nhật bài kiểm tra cuối buổi học của khóa học tự học 81

Hình 45 Lược đồ tuần tự xóa bài kiểm tra cuối buổi học của khóa học tự học 82

Hình 46 Lược đồ tuần tự xem bài học của lớp học 82

Hình 47 Lược đồ tuần tự thêm bài học của lớp học 83

Hình 48 Lược đồ tuần tự cập nhật bài học của lớp học 83

Hình 49 Lược đồ tuần tự xóa bài học của lớp học 84

Hình 50 Lược đồ tuần tự xem danh sách bài kiểm tra định kỳ của lớp học 84

Hình 51 Lược đồ tuần tự tạo bài kiểm tra định kỳ của lớp học mới 85

Hình 52 Lược đồ tuần tự cập nhật bài kiểm tra định kỳ của lớp học 85

Hình 53 Lược đồ tuần tự xóa bài kiểm tra định kỳ của lớp học 86

Hình 54 Lược đồ tuần tự xem bài kiểm tra cuối buổi học của lớp học 86

Hình 55 Lược đồ tuần tự tạo bài kiểm tra cuối buổi học của lớp học 87

Hình 56 Lược đồ tuần tự cập nhật bài kiểm tra cuối buổi học của lớp học 87

Hình 57 Lược đồ tuần tự xóa bài kiểm tra cuối buổi học của lớp học 88

Hình 58 Lược đồ tuần tự xem danh sách câu hỏi của bài kiểm tra định kỳ 88

Hình 59 Lược đồ tuần tự thêm câu hỏi của bài kiểm tra định kỳ 89

Hình 60 Lược đồ tuần tự cập nhật câu hỏi của bài kiểm tra định kỳ 89

Hình 61 Lược đồ tuần tự xóa câu hỏi của bài kiểm tra định kỳ 90

Hình 62 Lược đồ tuần tự xem danh sách học viên của lớp học 90

Hình 63 Lược đồ tuần tự học viên học bài học của khóa học tự học 91

18

Hình 64 Lược đồ tuần tự làm bài kiểm tra định kỳ 92Hình 65 Lược đồ tuần tự làm bài kiểm tra cuối buổi học 93Hình 66 Lược đồ tuần tự mua khóa học tự học 93Hình 67 Lược đồ tuần tự mua lớp học 94Hình 68 Lược đồ tuần tự kiểm tra ngữ pháp miễn phí 94Hình 69 Lược đồ tuần tự đánh giá khóa học / lớp học 95Hình 70 Lược đồ tuần tự xem thông tin cá nhân 95Hình 71 Lược đồ tuần tự cập nhật thông tin cá nhân 96Hình 72 Lược đồ tuần tự đổi mật khẩu 96Hình 73 Lược đồ tuần tự xem và đăng bài viết lên diễn đàn bài học 97Hình 74 Lược đồ tuần tự cập nhật bài viết lên diễn đàn bài học 98Hình 75 Lược đồ tuần tự xóa bài viết trên diễn đàn bài học 99Hình 76 Lược đồ lớp quản lý người dùng 99Hình 77 Lược đồ lớp quản lý khóa học, lớp học và bán khóa học, lớp học 100Hình 78 Lược đồ lớp đăng bài viết lên diễn đàn và kiểm tra ngữ pháp miễn phí 101Hình 79 Lược đồ lớp quản lý thẻ khóa học và đánh giá khóa học 102Hình 80 Lược đồ lớp quản lý chi tiết bài học 103Hình 81 Lược đồ lớp quản lý chi tiết bài kiểm tra 104Hình 82 Lược đồ lớp học viên làm bài kiểm tra 105Hình 83 Lược đồ lớp nhắn tin hỗ trợ 105Hình 84 Lược đồ lớp quản lý người dùng, quản lý khóa học, lớp học và mua khóa học, lớp họ 106Hình 85 Lược đồ ERD mức vật lý quản lý diễn đàn và kiểm tra ngữ pháp miễn phí 107Hình 86 Lược đồ ERD mức vật lý quản lý thẻ cho khóa học và đánh giá khóa học 107Hình 87 Lược đồ ERD mức vật lý quản lý chi tiết bài học 108Hình 88 Lược đồ ERD mức vật lý quản lý chi tiết bài kiểm tra 109Hình 89 Lược đồ ERD mức vật lý quản lý học sinh làm bài tập 110Hình 90 Lược đồ ERD mức vật lý quản lý nhắn tin 111Hình 91 Giao diện trang chủ 129Hình 92 Giao diện trang hiển thị tất cả 130Hình 93 Giao diện trang tìm kiếm 131Hình 94 Giao diện trang diễn đàn 132

19

Hình 95 Giao diện tạo bài viết mới 133Hình 96 Giao diện trang chi tiết bài viết 133Hình 97 Giao diện trang đăng nhập 134Hình 98 Giao diện trang đăng ký 135Hình 99 Giao diện trang nhập email yêu cầu tạo lại mật khẩu 136Hình 100 Giao diện trang tạo lại mật khẩu 136Hình 101 Giao diện trang chi tiết khóa/ lớp học và mua khóa/lớp học 137Hình 102 Giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 2 138Hình 103 Giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 3 138Hình 104 Giao diện trang chi tiết khóa/ lớp học và mua khóa/ lớp học 4 139Hình 105 Giao diện trang thanh toán 140Hình 106 Giao diện trang thống kê 141Hình 107 Giao diện trang thông tin cá nhân 142Hình 108 Giao diện trang quản lý người dùng 143Hình 109 Giao diện trang quản lý thẻ khóa học 144Hình 110 Giao diện trang quản lý khóa học tự học 145Hình 111 Giao diện trang quản lý khóa học có hướng dẫn 146Hình 112 Giao diện trang quản lý lớp học của khóa học có giáo viên hướng dẫn 146Hình 113 Giao diện trang hỗ trợ khách hàng 147Hình 114 Giao diện quản lý hóa đơn mua khóa học có hướng dẫn 148Hình 115 Giao diện trang quản lý hóa đơn mua lớp học 148Hình 116 Giao diện trang thông tin cá nhân 149Hình 117 Giao diện trang quản lý lớp học đang dạy 149Hình 118 Giao diện trang thông tin cá nhân 150Hình 119 Giao diện trang thời khóa biểu 151Hình 120 Giao diện trang khóa học tự học của tôi 151Hình 121 Giao diện trang lớp học của tôi 152Hình 122 Giao diện trang tiến độ học tập 152Hình 123 Giao diện trang bài tập sắp tới hạn 153Hình 124 Giao diện trang đánh giá khóa học 153Hình 125 Giao diện trang đăng ký khóa học có người hướng dẫn 154Hình 126 Giao diện trang hóa đơn đăng ký lớp học 154

20

Hình 127 Giao diện trang kiểm tra ngữ pháp miễn phí 155Hình 128 Ví dụ một lớp được viết bằng typescript 157Hình 129 Ví dụ sử dụng RabbitMQ trong việc thông báo tạo người dùng mới 162Hình 130 Sự khác biệt giữa phụ thuộc trực tiếp vào RabbitMQ và gián tiếp thông qua MassTransit của hệ thống thông báo và dịch vụ người dùng 163Hình 131 Cài đặt thư viện MassTransit vào dự án ASP.NET Core (tệp tin Program.cs) 164Hình 132 Nhận tin nhắn (gọi là sự kiện) thông qua MassTransit Consumer 164Hình 133 Hình ảnh mô tả các thành phần trong Kubernetes 166Hình 134 Ví dụ tạo một tập hợp 3 pod nginx sử dụng deployment 167Hình 135 Triển khai một deployment Postgresql sử dụng Terraform 171Hình 136 Triển khai dịch vụ (service) cho deployment postgresql bằng Terraform để giao tiếp với các dịch vụ khác 171Hình 137 Sơ đồ tích hợp liên tục (CI) và triển khai liên tục 184

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

Trong thời đại công nghệ thông tin hiện nay, việc học tiếng Anh đã trở thành một yếu

tố cấp thiết cho sự phát triển cá nhân và nghề nghiệp Một trong những cách hiệu quả

để nâng cao khả năng tiếng Anh là thông qua việc tham gia các khóa học trực tuyến Tuy nhiên, việc học qua các phương pháp truyền thống đã trở nên cứng nhắc và không thú vị đối với một số học viên

Với sự phát triển mạnh mẽ của internet và công nghệ thông tin, việc xây dựng một website quản lý các khóa học tiếng Anh trở nên rất cần thiết Website này sẽ giúp học viên tiếp cận với các khóa học một cách dễ dàng và linh hoạt hơn, tạo ra một môi trường học tập thú vị và bổ ích Dưới đây là một số lý do nêu bật tính cấp thiết của đề tài này:

Thứ nhất, website quản lý các khóa học tiếng Anh sẽ mang lại sự tiện lợi và linh hoạt cho người học

Thông qua website, học viên có thể đăng ký và tham gia các khóa học bất kỳ lúc nào, ở bất kỳ đâu thông qua các thiết bị di động như điện thoại thông minh hoặc máy tính bảng Điều này giúp học viên tận dụng thời gian rảnh rỗi để học tập, đồng thời loại bỏ được sự ràng buộc về không gian và thời gian

Thứ hai, website sẽ cung cấp các công cụ học tập đa dạng và phong phú

Học viên có thể tiếp cận với các khóa học thông qua các bài giảng video, tài liệu học tập, bài kiểm tra và bài tập thực hành Điều này giúp học viên học tiếng Anh một cách trực quan, sinh động và gây hứng thú Ngoài ra, website còn cung cấp các tính năng như lịch học, nhắc nhở học tập và theo dõi tiến độ học tập, giúp học viên có thể quản lý thời gian và kế hoạch học tập một cách hiệu quả

Thứ ba, website còn cung cấp một môi trường tương tác và kết nối giữa giảng viên và học viên

22

Học viên có thể gửi câu hỏi, yêu cầu tư vấn từ giảng viên và nhận được hỗ trợ trực tuyến Đồng thời, học viên có thể giao tiếp và học tập thông qua các phòng chat hoặc diễn đàn trực tuyến, tạo điều kiện cho việc trao đổi thông tin và kinh nghiệm với nhau

Thứ tư, website sẽ giúp tối ưu hóa quá trình quản lý khóa học

Đối với giảng viên và quản trị viên, website cung cấp các công cụ quản lý khóa học như tạo và cập nhật khóa học, quản lý học viên, theo dõi tiến

3 Ý nghĩa khoa học và thực tiễn của đề tài

Tiếng Anh là ngôn ngữ quốc tế, là một công cụ giao tiếp quan trọng trong kỷ nguyên toàn cầu hóa Việc xây dựng website quản lý các khóa học tiếng Anh giúp người học tăng cường vốn từ vựng, cải thiện khả năng ngôn ngữ và giao tiếp của mình

Tiện lợi và linh hoạt

Website quản lý các khóa học tiếng Anh cung cấp cho người học một phương pháp học tiện lợi, linh hoạt và phù hợp với nhu cầu của mỗi cá nhân Người học có thể truy cập website bất cứ lúc nào, bất kỳ nơi đâu và tự điều chỉnh tốc độ học của mình Điều này giúp học viên tận dụng tối đa thời gian rảnh rỗi và học tập một cách hiệu quả hơn

Theo dõi tiến độ học tập

Các biểu đồ thống kê, báo cáo và quản lý dữ liệu trên website giúp người học theo dõi tiến độ học tập của mình, từ đó định hướng và điều chỉnh phương pháp học sao cho hiệu quả nhất Học viên có thể dễ dàng nhận biết được những điểm mạnh và điểm yếu của mình để cải thiện

Tiết kiệm thời gian và chi phí

Xây dựng website quản lý các khóa học tiếng Anh giúp người học tiết kiệm thời gian và chi phí di chuyển đến các trung tâm học truyền thống Người học có thể học mọi lúc mọi nơi mà chỉ cần có kết nối internet, điều này đặc biệt hữu ích đối với những người

có lịch trình bận rộn

Nội dung học phong phú và đa dạng

Website quản lý các khóa học tiếng Anh cung cấp nội dung học phong phú, đa dạng và phù hợp với mọi trình độ học viên Người học có thể dễ dàng tiếp cận thông tin mới, rèn

23

luyện từ vựng qua các bài học, bài tập, trò chơi và các tài liệu tham khảo Điều này giúp học viên không ngừng nâng cao kiến thức và kỹ năng tiếng Anh của mình

Tăng cường sự tương tác và kết nối

Việc xây dựng website quản lý các khóa học tiếng Anh có thể tăng cường sự tương tác giữa người học với mọi nguồn thông tin trên website và cùng nhau chia sẻ kinh nghiệm học tập, tạo cộng đồng học tập trực tuyến Học viên có thể giao tiếp, trao đổi và hỗ trợ lẫn nhau trong quá trình học tập, tạo ra một môi trường học tập sinh động và hiệu quả Tóm lại, việc xây dựng một website quản lý các khóa học tiếng Anh là một giải pháp thiết thực và hiệu quả trong thời đại công nghệ thông tin, giúp học viên nâng cao khả năng tiếng Anh và tối ưu

4 Mục tiêu nghiên cứu

Xây dựng giao diện người dùng hấp dẫn và thân thiện: Mục tiêu này nhằm tạo ra một

giao diện người dùng dễ sử dụng, thân thiện với người dùng và hấp dẫn để thu hút sự quan tâm và tương tác từ người dùng Thiết kế giao diện cần phải đơn giản, trực quan và có màu sắc hài hòa, đảm bảo người dùng dễ dàng tìm kiếm và sử dụng các chức năng trên trang web

Tạo ra chức năng học từ vựng linh hoạt và hiệu quả: Nghiên cứu này nên tập trung vào

việc phát triển các chức năng học từ vựng như theo dõi tiến độ học, kiểm tra từ vựng, bài tập và cung cấp phản hồi Những tính năng này sẽ giúp người dùng nâng cao kỹ năng tiếng Anh một cách hiệu quả và có hệ thống Học viên có thể đặt mục tiêu học tập, kiểm tra tiến độ và nhận phản hồi chi tiết về quá trình học của mình

Thực hiện tích hợp API từ điển: Để xây dựng một trang web học từ vựng tiếng Anh, cần

tích hợp API từ điển để người dùng có thể tra cứu và hiểu rõ ý nghĩa của các từ vựng Mục tiêu này nhằm tạo ra tính năng tra cứu từ vựng nhanh chóng và chính xác, giúp học viên có thể dễ dàng nắm bắt và hiểu rõ hơn về các từ vựng mới

Cải thiện khả năng tương tác và phản hồi đối với người dùng: Một trang web tốt cần

phản hồi nhanh chóng và đáp ứng tốt các yêu cầu và sự tương tác từ người dùng Mục tiêu này nhằm nâng cao khả năng tương tác và đưa ra phản hồi chính xác và hữu ích cho

24

người dùng Điều này có thể được thực hiện thông qua việc tối ưu hóa các chức năng giao tiếp và cung cấp phản hồi ngay lập tức khi người dùng có câu hỏi hoặc yêu cầu

Nâng cao hiệu năng và tối ưu hóa trang web: Mục tiêu này nhằm cải thiện hiệu năng

của trang web, đảm bảo tốc độ tải trang nhanh chóng, giảm thiểu thời gian chờ đợi và tối ưu hóa trang web để tương thích với nhiều loại thiết bị và trình duyệt khác nhau Việc tối ưu hóa bao gồm việc giảm bớt dung lượng hình ảnh, tối ưu mã nguồn và sử dụng các công nghệ tiên tiến để cải thiện tốc độ và hiệu suất trang web

Thực hiện tích hợp đăng nhập và quản lý người dùng: Mục tiêu này nhằm thu thập, lưu

trữ và phân tích dữ liệu từ việc sử dụng website học từ vựng để đưa ra những phân tích và thống kê hữu ích cho việc cải thiện trang web và nâng cao trải nghiệm học tập của người dùng Hệ thống phân tích dữ liệu sẽ giúp quản trị viên hiểu rõ hơn về hành vi người dùng, từ đó điều chỉnh nội dung và các tính năng của trang web theo hướng tối

ưu nhất Các dữ liệu cần thu thập bao gồm: tần suất truy cập, thời gian học, kết quả kiểm tra, và phản hồi từ người dùng

Xây dựng cộng đồng học tập trực tuyến: Một trang web học từ vựng tiếng Anh nên tạo

ra một cộng đồng học tập trực tuyến, nơi người dùng có thể giao lưu, chia sẻ kinh nghiệm học tập và hỗ trợ lẫn nhau Việc tạo ra các diễn đàn, nhóm học tập và các sự kiện trực tuyến sẽ giúp tăng cường mối quan hệ giữa các học viên và làm cho quá trình học tập trở nên thú vị hơn

25

NỘI DUNG Chương 1 Khảo sát và phân tích hiện trạng

1.1 Phân tích một số hệ thống có liên quan

1.1.1 Khảo sát website Unica

Địa chỉ website: https://unica.vn/

Unica là một nền tảng bán các khóa học trực tuyến được giảng dạy bởi các giáo viên có nhiều kinh nghiệm Ngoài ra còn bán sách điện tử Thu hút hơn 10 triệu người học Việt Nam

Các khóa học bao gồm nhiều lĩnh vực khác nhau: ngoại ngữ, marketing, tin học văn phòng, kinh doanh và khởi nghiệp,…

Học viên có thể xem và học thử các khóa học, đặt mua các khóa học, thảo luận cùng giảng viên, download để xem video offline, có thể học ơt bất kì nơi đâu

Hình 1 Giao diện trang chủ website Unica

Chức năng chính

- Tìm kiếm khóa học: học viên có thể tìm kiếm khóa học theo tên, theo lĩnh vực

mà mình mong muốn

1.1.2 Khảo sát website Udemy

Địa chỉ website: https://www.udemy.com/

Udemy là hệ thống bán các khóa học trực tuyến thu hút hơn 70 triệu người học và sở hữu hơn 220 nghìn khóa học

Các khóa học với nhiều lĩnh vực khác nhau, được nhiều công ty, chính phủ, tổ chứ phi lợi nhuận ưu tiên lựa chọn

Học viên có thể truy cập trang web, tìm kiếm các khóa học, mua và học ở bất kì nơi đâu, bất kì quốc gia nào trên thế giới

- Chưa có hệ thống trao đổi chia sẻ kinh nghiệm cộng đồng: Udemy cũng chưa có

hệ thống cộng đồng trao đổi, chia sẻ kinh nghiệm, tài liệu học tập giữa các người dùng với nhau

1.2 Xác định yêu cầu:

1.2.1 Yêu cầu chức năng:

Khách: chưa đăng nhập thì chỉ được thực hiện các chức năng đăng ký, xem khóa học, tìm kiếm khóa học

Người dùng sau khi đăng nhập:

- Có thể thao tác các chức năng cơ bản như quên mật khẩu, tạo bài viết mới trên diễn đàn, bình luận bài viết trên diễn đàn, chỉnh sửa thông tin cá nhân

- Học viên có thể mua các khóa học, tham gia học bài học, làm bài kiểm tra, kiểm tra ngữ pháp miễn phí, đánh giá khóa học

- Giáo viên chỉnh sửa bài học bài kiểm tra của lớp học mà mình tham gia giảng dạy

28

- Quản trị viên quản lý các khóa học, lớp học, quản lý người dùng, quản lý các đơn mua khóa học

1.2.2 Yêu cầu phi chức năng

- Bảo mật: mật khẩu sẽ được hash trước khi lưu vào database

- Tính khả dụng: phù hợp với nhu cầu của người dùng hiện nay, tốc độ nhanh chóng, dễ

sử dụng

- Hệ thống có tính sẵn sàng cao

- Thời gian phản hồi tốt (độ trễ thấp, dưới 5 giây) của tất cả các yêu cầu trên hệ thống

29

Chương 2 Phân tích và thiết kế hệ thống

2.1 Thiết kế lượt đồ use case

Hình 3 Lược đồ usecase của hệ thống

2.2 Đặc tả use case

2.2.1 Đăng ký tài khoản

Use case Đăng ký tài khoản

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

Short Description Đăng ký tài khoản

Pre-Conditions Không có

Post-Conditions Actor đăng ký tài khoản thành công

Main Flow 1 Người dùng truy cập trang chủ

2 Chọn nút đăng ký trên thanh điều hướng

3 Hệ thống hiển thị giao diện đăng ký

7 Hệ thống tạo đường dẫn xác thực email và gửi vào email mà người dùng vừa đăng ký

8 Hệ thống thông báo đăng ký tài khoản thành công cho người dùng và điều hướng sang trang đăng nhập

Alternate Flow (s) Không có

Exception Flow (s) 5.1 Nếu người dùng không nhập tên, email không đúng định

dạng, mật khẩu có độ dài nhỏ hơn 6 ký tự thì thông báo lỗi tương ứng để người dùng nhập lại, quay về bước 3

5.2 Ngược lại, nếu email đã tồn tại trên hệ thống thì thông báo lỗi “Email đã được đăng ký bởi tài khoản khác”, quay lại bước

3

2.2.2 Đăng nhập

Use case Đăng nhập

Actor Quản trị viên, giáo viên, người học

Short Description Đăng nhập vào hệ thống

Pre-Conditions Người dùng đã có tài khoản trên hệ thống

Post-Conditions Người dùng truy cập được vào hệ thống

Main Flow 1 Người dùng truy cập trang chủ

2 Người dùng chọn nút đăng nhập trên trang chủ

3 Hệ thống hiện giao diện đăng nhập

4 Người dùng nhập email và mật khẩu vào khung nhập dữ liệu ở giữa màn hình

5 Chọn đăng nhập

6 Hệ thống thông báo đăng nhập thành công và quay lại trang chủ

31

Alternate Flow (s) 3 Actor chọn đăng nhập bằng Google

Exception Flow (s) 5.1 Hệ thống kiểm tra người dùng nhập mật khẩu sai quay lại

bước 4

5.2 Hệ thống kiểm tra nếu tài khoản chưa được xác thực thì thông báo lỗi “Tài khoản chưa được xác thực” và quay lại bước 4

2.2.3 Quên mật khẩu

Use case Quên mật khẩu

Actor Quản trị viên, giáo viên, người học

Short Description Đăng nhập vào hệ thống

Pre-Conditions Actor đã có tài khoản trên hệ thống

Post-Conditions Người dùng truy cập được vào hệ thống

Main Flow 1 Người dùng truy cập trang chủ

2 Chọn nút đăng nhập trên thanh điều hướng

3 Nhấn vào nút quên mật khẩu

4 Hệ thống hiển thị ô nhập email

5 Người dùng nhập email và nhấn nút gửi

6 Hệ thống tạo mã lấy lại mật khẩu (một chuỗi băm ngẫu nhiên) và tạo đường dẫn lấy lại mật khẩu từ chuỗi băm đó

7 Hệ thống gửi đường dẫn lấy lại mật khẩu cho người dùng thông qua email của tài khoản đăng nhập

8 Người dùng mở email và truy cập link được nhận trong email có chứa đường dẫn lấy lại mật khẩu

9 Hệ thống hiển thị ô nhập mật khẩu mới

10 Người dùng nhập mật khẩu mới

11 Người dùng nhấn và nút “Đổi mật khẩu”

12 Hệ thống thông báo đổi mật khẩu thành công và điều hướng sang trang đăng nhập

Alternate Flow (s) Không có

Exception Flow (s) 6.1 Email chưa được đăng ký, hệ thống thông báo tài khoản

không tồn tại, quay lại bước 5

32

8.1 Hệ thống kiểm tra mã lấy lại mật khẩu, n ếu mã lấy lại mật khẩu khác với mã được đính kèm trong email thì quay lại trang chủ

11.1 Hệ thống kiểm tra mật khẩu mới có độ dài trên 6 ký tự hay không, nếu không thì thông báo lỗi “Vui lòng nhập mật khẩu có độ dài trên 6 ký tự” và quay lại bước 10

2.2.4 Tìm kiếm khóa học tự học/lớp học theo tên

Use case Tìm kiếm khóa học tự học/lớp học theo tên

Actor Quản trị viên, giáo viên, học viên, người dùng mới

Short Description - Người dùng tìm kiếm tên của khóa học tự học/lớp học

- Người dùng chọn bộ lọc cho tìm kiếm Pre-Conditions Người dùng truy cập được vào hệ thống

Post-Conditions - Xem được danh sách các khóa học/lớp học có chứa từ

khóa được nhập vào

- Lọc các khóa học tự học/lớp học theo bộ lọc mà người dùng mong muốn

Main Flow 1 Người dùng nhấp vào ô tìm kiếm

2 Người dùng nhập từ khóa cần tìm kiếm

3 Người dùng nhấn nút tìm kiếm

4 Hệ thống hiển thị danh sách các khóa học tự học/lớp học

có chứa từ khóa tìm kiếm

5 Người dùng chọn bộ lọc mong muốn(sắp xếp theo tên, sắp xếp theo có nhiều đánh giá nhất, sắp xếp theo đánh giá cao nhât, sắp xếp theo mới nhất)

6 Hệ thống hiển thị danh sách các khóa học tự học/ lớp học

có chứa từ khóa tìm kiếm và được sắp xếp theo bộ lọc mà người dùng chọn

Alternate Flow (s) Không có

Exception Flow (s) Không có

33

2.2.5 Xem và đăng bài viết lên diễn đàn

Use case Đăng bài viết lên diễn đàn

Actor Quản trị viên, giáo viên, học viên

Short Description - Xem các bài viết trên diễn đàn chung

- Tạo, chỉnh sửa và xóa các bài viết Pre-Conditions Người dùng đăng nhập được vào hệ thống

Post-Conditions - Xem được danh sách các bài viết trên diễn đàn chung

- Xem được danh sách các bài viết của mình

- Bài viết mới được đăng lên diễn đàn

- Bài viết đã được chỉnh sửa

- Bài viết đã được xóa

Main Flow A Xem danh sách các bài viết trên diễn đàn chung:

1 Người dùng nhấp chọn “Diễn đàn” trên thanh navbar

2 Hệ thống hiển thị danh sách các bài viết trên diễn đàn chung

B Xem danh sách các bài viết của mình:

1 Người dùng nhấp chọn “Diễn đàn” trên thanh navbar

2 Hệ thống hiển thị danh sách các bài viết

3 Người dùng nhấp chọn “Chủ đề của tôi”

4 Hệ thống hiển thị danh sách các bài viết của chính người dùng đó

C Đăng bài viết mới lên diễn đàn:

1 Người dùng nhấp chọn “Diễn đàn” trên thanh navbar

2 Hệ thống hiển thị danh sách các bài viết

3 Người dùng nhấp chọn “Tạo chủ đề mới”

4 Hệ thống hiển thị modal tạo chủ đề mới

5 Người dùng nhập chủ đề, chọn hình ảnh mình muốn tạo

6 Người dùng nhấp chọn “Tạo”

D Chỉnh sửa các bài viết của mình:

1 Người dùng nhấp chọn “Diễn đàn” trên thanh navbar

2 Hệ thống hiển thị danh sách các bài viết

34

3 Người dùng nhấp chọn “Chủ đề của tôi”

4 Hệ thống hiển thị danh sách các bài viết của chính người dùng đó

5 Người dùng chọn bài viết mình muốn chỉnh sửa, nhấp chọn

“Chỉnh sửa”

6 Hệ thống hiển thị modal chỉnh sửa bài viết

7 Người dùng nhập thông tin bài viết

8 Nhấp chọn “Lưu”

E Xóa các bài viết của mình:

1 Người dùng nhấp chọn “Diễn đàn” trên thanh navbar

2 Hệ thống hiển thị danh sách bài viết

3 Người dùng nhấp chọn “Chủ đề của tôi”

4 Hệ thống hiển thị danh sách chủ đề của chính người dùng

Exception Flow (s) C.6.1 Hệ thống kiểm tra tiêu đề, nếu tiêu trống thì thông báo

lỗi “Vui lòng nhập đầy đủ thông tin” và quay lại bước C.5 D.8.1 Hệ thống kiểm tra tiêu đề, nếu tiêu đề trống thì thông báo lỗi “Vui lòng nhập đầy đủ thông tin” và quay lại bước D.7

2.2.6 Bình luận bài viết trên diễn đàn

Use case Bình luận bài viết lên diễn đàn

Actor Quản trị viên, giáo viên, học viên

Short Description - Xem các bình luận của một bài viết

- Tạo, chỉnh sửa và xóa các bình luận Pre-Conditions Người dùng đăng nhập được vào hệ thống, truy cập vào trang

diễn đàn chung Post-Conditions - Xem được danh sách các bình luận của bài viết

35

- Bình luận mới được tạo

- Bình luận đã được chỉnh sửa

- Bình luận đã được xóa Main Flow A Xem danh sách các bình luận của bài viết:

1 Người dùng chọn bài viết muốn xem bình luận, nhấp chọn

“Bình luận”

2 Hệ thống hiển thị chi tiết bài viết và các bình luận của nó

B Tạo bình luận mới:

1 Người dùng chọn bài viết muốn thêm bình luận, nhấp chọn

“Bình luận”

2 Hệ thống hiển thị chi tiết bài viết và các bình luận của nó

3 Nhấp chọn thêm bình luận mới

4 Hệ thống hiển thị ô nhập nội dung bình luận

5 Người dùng nhập nội dung và chọn hình ảnh muốn bình luận

6 Người dùng nhấp chọn “Tạo”

C Chỉnh sửa các bình luận của mình:

1 Người dùng chọn bài viết muốn chỉnh sửa bình luận, nhấp chọn “Bình luận”

2 Hệ thống hiển thị chi tiết bài viết và các bình luận của nó

3 Người dùng tìm kiếm bình luận mình muốn chỉnh sửa

4 Nhấp chọn “Chỉnh sửa”

5 Hệ thống hiển thị ô chỉnh sửa bình luận

6 Người dùng nhập thông tin

7 Nhấp chọn “Lưu”

D Xóa các bình luận của mình:

1 Người dùng chọn bài viết muốn xóa bình luận, nhấp chọn

“Bình luận”

2 Hệ thống hiển thị chi tiết bài viết và các bình luận của nó

3 Người dùng tìm kiếm bình luận muốn xóa

4 Nhấp chọn “Xóa”

36

Alternate Flow (s) B.3 Người dùng chọn “Phản hồi” thì tiếp tục bước B.4

Exception Flow (s) B.6.1 Hệ thống kiểm tra nội dung bình luận, nếu nội dung

bình luận rỗng thì thông báo lỗi và quay lại bước B.5 C.7.1 Hệ thống kiểm tra nội dung bình luận, nếu nội dung bình luận rỗng thì thông báo lỗi và quay lại bước C.6 2.2.7 Nhắn tin với quản trị viên

Use case Nhắn tin với quản trị viên

Actor Người học, giáo viên

Short Description Người dùng bắt đầu một chủ đề trò chuyện và nhắn tin trao đổi

với quản trị viên Pre-Conditions Đăng nhập hệ thống với vai trò là học viên hoặc giáo viên Post-Conditions Nhắn tin được với quản trị viên

Main Flow 1 Người dùng nhấp vào icon mở hộp thoại nhắn tin

2 Người dùng nhập tin nhắn và nhắn nút gửi

3 Hệ thống xử lí gửi tin nhắn cho quản trị viên Alternate Flow (s) Không có

Exception Flow (s) 2.1 Nếu người dùng chưa đăng nhập, hệ thống thông báo người

dùng cần phải đăng nhập trước khi gửi tin nhắn cho quản trị viên

2.2.8 Quản lý hỗ trợ người dùng

Use case Quản lý hỗ trợ người dùng

Actor Quản trị viên

Short Description Quản trị viên xem danh sách hỗ trợ người dùng, nhắn tin với

người dùng Pre-Conditions Đăng nhập hệ thống với vai trò là quản trị viên

Post-Conditions - Quản trị viên xem danh sách hỗ trợ người dùng

Main Flow 1 Quản trị viên chọn người dùng nhắn tin hỗ trợ

2 Xem tin nhắn đã nhận

3 Nhập tin nhắn cần gửi và nhấn enter

4 Hệ thống xử lí và gửi tin nhắn đến người dùng Alternate Flow (s) Không có