Mục tiêu của đề tài Về phía người dùng xây dựng được một website chia sẻ kiến thức học tập với các tính năng cơ bản về làm đề thi và tham gia thảo luận câu hỏi, tìm kiếm đề thi và cá
Trang 2`
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 ĐÌNH HẢI – 20110640
XÂY DỰNG WEBSITE LUYỆN THI TIẾNG ANH ONLINE
KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT
GIẢNG VIÊN HƯỚNG DẪN ThS Trương Thị Khánh Dịp
Trang 3ĐH SƯ PHẠM KỸ THUẬT
TP.HCM KHOA CNTT
*******
CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Độc lập – Tự do – Hạnh Phúc
*******
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1: Trần Đình Hải MSSV 1: 20110640
Ngành: Công Nghệ Thông Tin
Tên đề tài: Website luyện thi tiếng anh online
Họ và tên Giáo viên hướng dẫn: ThS Trương Thị Khánh Dịp
Tp Hồ Chí Minh, ngày tháng năm 2024
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)
Trang 4ĐH SƯ PHẠM KỸ THUẬT
TP.HCM KHOA CNTT
*******
CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Độc lập – Tự do – Hạnh Phúc
*******
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1: Trần Đình Hải MSSV 1: 20110640
Ngành: Công Nghệ Thông Tin
Tên đề tài: Website luyện thi tiếng anh online
Họ và tên Giáo viên phản biện: TS Lê Văn Vinh
Tp Hồ Chí Minh, ngày tháng năm 2024
Giáo viên phản biện
(Ký & ghi rõ họ tên)
Trang 5LỜI CẢM ƠN
Lời đầu tiên, nhóm em xin gửi đến các 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 lòng biết ơn sâu sắc về sự hỗ trợ và tạo điều kiện thuận lợi cho nhóm em có cơ hội được trau dồi, học tập và phát triển nền tảng kiến thức vững chắc để thực hiện đề tài như hôm nay
Đặc biệt nhất là sự đóng góp to lớn của cô Trương Thị Khánh Dịp Sự tận tâm, góp
ý và sự hướng dẫn nhiệt tình của cô đã giúp nhóm em không chỉ trong quá trình nghiên cứu mà còn trong việc đúc kết, hoàn thiện đề tài này Những góp ý quý báu từ cô đã tạo nên nguồn động viên quý giá, giúp nhóm em vượt qua những khó khăn và thử thách trong quá trình thực hiện đề tài
Việc học tập tại trường trong những năm qua và trải qua các kỳ thực tập tại các công
ty đã mang đến cho nhóm em không chỉ kiến thức chuyên môn mà còn những kinh nghiệm thực tế quý báu Tập thể các thầy cô tại Khoa Công Nghệ Thông Tin, đặc biệt là
cô Trương Thị Khánh Dịp, đã truyền đạt cho nhóm em những kiến thức và kỹ năng mà nhóm em coi là nền tảng quan trọng cho tương lai sự nghiệp sau này của mình
Với khả năng và kiến thức hiện tại của chúng em đã rất cố gắng để hoàn thành một cách tốt nhất Tuy nhiên nguồn kiến thức là vô tận nên sự hiểu biết còn hạn hẹp của chúng em sẽ không thể tránh khỏi có những sai sót Chúng em rất mong nhận sự góp ý tận tình và quý báu của quý Thầy Cô để giúp nhóm chúng em rút kinh nghiệm, bổ sung thêm kiến thức cũng như có thể hoàn thiện và nâng cấp đề tài của mình tốt nhất có thể Cuối lời, chúng em xin kính chúc quý thầy cô luôn dồi dào sức khỏe và thành công hơn nữa trong sự nghiệp trồng người
Chúng em xin chân thành cảm ơn!
Nhóm thực hiện
Trần Đình Hải – 20110640
Trang 6Trường ĐH Sư Phạm Kỹ Thuật TP.HCM
Khoa : CNTT
ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1 : Trần Đình Hải Mã Số SV : 20110640
Thời gian làm luận văn : từ : 04/03/2024 Đến : 15/06/2024
Chuyên ngành : Công Nghệ Phần Mềm
Tên luận văn : Xây dựng website luyện thi tiếng anh online
GV hướng dẫn : Ths Trương Thị Khánh Dịp
Nhiệm Vụ Của Luận Văn :
1 Tìm hiểu về Spring Boot và ReactJs
2 Xây dựng website luyện thi tiếng anh với ReactJs
3 Xây dựng hệ thống BackEnd với Spring Boot
4 Hiểu được quy trình, cách triển khai các chức năng nghiệp vụ của hệ thống
Đề cương viết luận văn :
MỤC LỤC CHƯƠNG 1 TỔNG QUAN
1.1 Tính cấp thiết của đề tài
1.2 Đối tượng nghiên cứu
1.3 Phạm vi nghiên cứu
1.4 Mục tiêu của đề tài
1.5 Ý nghĩa khoa học và thực tiễn
1.6 Dự kiến kết quả đạt được
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT
2.1 Các công nghệ sử dụng ở FronEnd
2.2 Các công nghệ sử dụng ở BackEnd
Trang 74.3 Lược đồ tuần tự
4.4 Thiết kế cơ sở dữ liệu
4.5 Thiết kế giao diện
CHƯƠNG 5 CÀI ĐẶT VÀ KIỂM THỬ
5.1 Công cụ dùng trong dự án
vụ để xây dựng đề tài
Hiểu được các trang học tập tiếng anh cần những chức năng cơ bản gì và các nghiệp vụ để triển khai các chức năng đó
Trang 82 11/03/2024 -
17/03/2024
Tìm hiểu và thiết
kế database cho dự
án một cách hợp lý
Biết được một trang học tập tiếng anh triển khai các chức năng cơ bản thì cần những table nào để lưu trữ dữ liệu và quan hệ giữa các bảng với nhau
3 18/03/2024 -
24/03/2024
Liệt kê các chức năng và vẽ lược đồ hoạt động cho các chức năng
Liệt kê các chức năng và sắp xếp độ khó của các chức năng để hình dung trình tự thực hiện sao cho hiệu quả Vẽ lược đồ
để xác định luồng chạy hiệu quả cho các chức năng
4 25/03/2024 -
31/03/2024
Tạo cấu trúc chuẩn cho dự án backEnd, frontEnd
Các lớp Dao, Entity, Controller, Service, Enum, v.v……
5 01/04/2024 -
07/04/2024
Viết các API, giao diện front end cần thiết cho các chức năng
Các chức năng thực hiện: Đăng nhập, đăng ký, quên mật khẩu, trang chủ
6 08/04/2024 -
14/04/2024
Viết các API, giao diện front end cần thiết cho các chức năng
Các chức năng thực hiện: Danh sách đề thi, làm đề thi,kết quả đề thi
7 15/04/2024 -
21/04/2024
Viết các API, giao diện front end cần thiết cho các chức năng
Các chức năng thực hiện: Bình luận đề thi, cập nhật thông tin cá nhân
8 22/04/2024 -
28/04/2024
Viết các API, giao diện front end cần thiết cho các chức năng
Các chức năng thực hiện: Danh sách khóa học, chi tiết khóa học,thanh toán, học các video bài học
Trang 99 29/04/2024 -
05/05/2024
Viết các API, giao diện front end cần thiết cho các chức năng
Các chức năng thực hiện : khóa học của tôi, lịch sử thanh toán, danh sách blog, chi tiết blog, đánh giá
10 06/05/2024 -
12/05/2024
Kiểm thử và sửa lỗi Viết các test case để kiểm thử các chức
năng của chương trình và sửa lỗi các chức năng phát hiện lỗi
11 13/05/2024 -
19/05/2024
Viết báo cáo Viết các use case, sequence diagram và
activity diagram, mô tả chức năng, cấu trúc và viết các mục cho báo cáo, v.v…
Ngày … tháng … năm 2024
Người viết đề cương (Ký và ghi rõ họ tên)
Ý kiến của giáo viên hướng dẫn
(ký và ghi rõ họ tên)
Trang 10MỤC LỤC
CHƯƠNG 1 TỔNG QUAN 1
1.1 Tính cấp thiết của đề tài 1
1.2 Đối tượng nghiên cứu 1
1.2.1 Người dùng cuối (Khách hàng) 1
1.2.2 Nhà quản lý hệ thống 1
1.3 Phạm vi nghiên cứu 2
1.3.1 Trải nghiệm người dùng 2
1.3.2 Quản lý hệ thống và dữ liệu 2
1.3.3 Quản lý kinh doanh và marketing 2
1.3.4 Quản lý hệ thống và kỹ thuật 2
1.4 Mục tiêu của đề tài 3
1.5 Ý nghĩa khoa học và thực tiễn 3
CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 4
2.1 Các công nghệ sử dụng ở Front-End 4
2.1.1 ReactJS Framework 4
2.1.2 Các thư viện hỗ trợ khác 6
2.2 Các công nghệ sử dụng ở Back-End 7
2.2.1 Java 7
2.2.2 Spring Boot 8
2.2.3 MYSQL 9
2.2.4 Các thư viện hỗ trợ khác 11
CHƯƠNG 3 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 13
3.1 Khảo sát hiện trạng 13
3.1.1 Study4 13
Trang 113.1.3 Kết luận 15
3.2 Xác định yêu cầu 16
3.2.1 Yêu cầu chức năng 16
3.2.2 Yêu cầu phi chức năng 17
3.3 Mô hình hóa yêu cầu 18
3.3.1 Lược đồ Usecase 18
3.3.2 Mô hình hóa yêu cầu 19
3.3.2.1 Mô hình hóa website phía khách và người dùng 19
3.3.2.2 Mô hình hóa website phía quản trị viên 35
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 53
4.1 Lược đồ lớp 53
4.2 Lược đồ hoạt động (Activity Diagram) 54
4.3 Lược đồ tuần tự 72
4.4 Thiết kế cơ sở dữ liệu 90
4.4.1 Lược đồ cơ sở dữ liệu 90
4.4.2 Chi tiết bảng dữ liệu 90
4.5 Thiết kế giao diện 103
4.5.1 Giao diện trang chủ 103
4.5.2 Giao diện trang khóa học online 104
4.5.3 Giao diện trang đề thi 104
4.5.4 Giao diện trang chi tiết đề thi 105
4.5.5 Giao diện trang làm đề thi 106
4.5.6 Giao diện trang kết quả làm bài 106
4.5.7 Giao diện trang chi tiết khóa học 107
4.5.8 Giao diện trang học video 108
4.5.9 Giao diện trang thanh toán khóa học 108
Trang 124.5.10 Giao diện trang thanh toán bên VNPAY 109
4.5.11 Giao diện trang Blog 110
4.5.12 Giao diện trang cá nhân người dùng 111
4.5.13 Giao diện trang đăng nhập 112
4.5.14 Giao diện trang đăng kí 112
4.5.15 Giao diện trang quên mật khẩu 113
4.5.16 Giao diện trang mã otp 114
4.5.17 Giao diện trang chủ quản trị viên 114
4.5.18 Giao diện trang quản lí người dùng 115
4.5.19 Giao diện trang quản lí đề thi 116
4.5.20 Giao diện trang quản lí danh mục đề thi 117
4.5.21 Giao diện trang quản lí khóa học 118
4.5.22 Giao diện trang quản lí chương học 119
4.5.23 Giao diện trang quản lí bài học 120
4.5.24 Giao diện trang thống kê doanh thu 121
4.5.25 Giao diện trang thống kê số người làm đề thi 121
4.5.26 Giao diện trang cá nhân quản trị viên 122
CHƯƠNG 5 CÀI ĐẶT VÀ KIỂM THỬ 123
5.1 Công cụ dùng trong dự án 123
5.2 Cài đặt ứng dụng 123
5.3 Kiểm thử 124
5.3.1 Test case hộp đen 124
5.3.2 Quản lý Bug với Jira 125
5.3.3 Kiểm thử với Selenium 129
CHƯƠNG 6 PHẦN KẾT LUẬN 133
Trang 136.1.1 Kiến thức tìm hiểu được 133
6.1.2 Dự án đã làm được 133
6.2 Ưu điểm 133
6.3 Nhược điểm 134
6.4 Hướng phát triển 134
TÀI LIỆU THAM KHẢO 135
Trang 14DANH MỤC HÌNH ẢNH
Hình 2-1 Virtual DOM trong ReactJS 4
Hình 2-2 Cú pháp props trong Class Component và Function Component 5
Hình 2-3 Ứng dụng của Java 7
Hình 2-4 Các module của spring framework 9
Hình 2-5 Kiến trúc của MySql 11
Hình 2-6 Các thành phần của JWT 12
Hình 3-1 Khảo sát hiện trạng Study4 13
Hình 3-2 Khảo sát hiện trạng Study4 14
Hình 3-3 Khảo sát hiện trạng Anh ngữ MsHoa 15
Hình 3-4 Usecase cho người dùng 18
Hình 3-5 Usecase cho quản trị viên 19
Hình 4-1 Lược đồ lớp 53
Hình 4-2 Lược đồ hoạt động chức năng đăng nhập 54
Hình 4-3 Lược đồ hoạt động chức năng đăng ký 55
Hình 4-4 Lược đồ hoạt động chức năng đổi mật khẩu 56
Hình 4-5 Lược đồ hoạt động chức năng tìm kiếm khóa học 57
Hình 4-6 Lược đồ hoạt động chức năng đăng kí khóa học 58
Hình 4-7 Lược đồ hoạt động chức năng tìm kiếm đề thi 59
Hình 4-8 Lược đồ hoạt động chức năng làm đề thi 60
Hình 4-9 Lược đồ hoạt động chức năng tạo bình luận 60
Hình 4-10 Lược đồ hoạt động chức năng xem bài viết 61
Hình 4-11 Lược đồ hoạt động chức năng đánh giá bài viết 61
Hình 4-12 Lược đồ hoạt động chức năng cập nhật thông tin cá nhân 62
Hình 4-13 Lược đồ hoạt động chức năng xem các khóa học đã đăng ký 63
Hình 4-14 Lược đồ hoạt động chức năng xem lịch sử thanh toán 63
Hình 4-15 Lược đồ hoạt động chức năng xem kết quả làm bài 64
Hình 4-16 Lược đồ hoạt động chức năng thay đổi trạng thái người dùng 64
Hình 4-17 Lược đồ hoạt động chức năng thêm mới đề thi 65
Hình 4-18 Lược đồ hoạt động chức năng chỉnh sửa đề thi 66
Trang 15Hình 4-20 Lược đồ hoạt động chức năng thêm mới khóa học 68
Hình 4-21 Lược đồ hoạt động chức năng chỉnh sửa khóa học 69
Hình 4-22 Lược đồ hoạt động chức năng thay đổi trạng thái khóa học 70
Hình 4-23 Lược đồ hoạt động chức năng thống kê doanh thu 71
Hình 4-24 Lược đồ tuần tự chức năng đăng kí 72
Hình 4-25 Lược đồ tuần tự chức năng đăng nhập 72
Hình 4-26 Lược đồ tuần tự chức năng đổi mật khẩu 73
Hình 4-27 Lược đồ tuần tự chức năng tìm kiếm, xem khóa học 73
Hình 4-28 Lược đồ tuần tự chức năng xem chi tiết khóa học 74
Hình 4-29 Lược đồ tuần tự chức năng thanh toán 74
Hình 4-30 Lược đồ tuần tự chức năng tìm kiếm đề thi 75
Hình 4-31 Lược đồ tuần tự chức năng chi tiết đề thi 75
Hình 4-32 Lược đồ tuần tự chức năng làm đề thi và nộp bài 76
Hình 4-33 Lược đồ tuần tự chức năng bình luận đề thi 76
Hình 4-34 Lược đồ tuần tự chức năng đánh giá bài viết 77
Hình 4-35 Lược đồ tuần tự chức năng cập nhật thông tin cá nhân 77
Hình 4-36 Lược đồ tuần tự chức năng xem các khóa học đã đăng kí 78
Hình 4-37 Lược đồ tuần tự chức năng xem lịch sử thanh toán 78
Hình 4-38 Lược đồ tuần tự chức năng xem kết quả làm bài 79
Hình 4-39 Lược đồ tuần tự chức năng thay đổi trạng thái người dùng 79
Hình 4-40 Lược đồ tuần tự chức năng thêm đề thi 80
Hình 4-41 Lược đồ tuần tự chức năng sửa đề thi 80
Hình 4-42 Lược đồ tuần tự chức năng thay đổi trạng thái đề thi 81
Hình 4-43 Lược đồ tuần tự chức năng thêm danh mục đề thi 81
Hình 4-44 Lược đồ tuần tự chức năng sửa danh mục đề thi 82
Hình 4-45 Lược đồ tuần tự chức năng thay đổi trạng thái danh mục đề thi 82
Hình 4-46 Lược đồ tuần tự chức năng thêm khóa học 83
Hình 4-47 Lược đồ tuần tự chức năng sửa khóa học 83
Hình 4-48 Lược đồ tuần tự chức năng thay đổi trạng thái khóa học 84
Hình 4-49 Lược đồ tuần tự chức năng thêm chương học 84
Hình 4-50 Lược đồ tuần tự chức năng sửa chương học 85
Hình 4-51 Lược đồ tuần tự chức năng thay đổi trạng thái chương học 85
Trang 16Hình 4-52 Lược đồ tuần tự chức năng thêm bài học 86
Hình 4-53 Lược đồ tuần tự chức năng sửa bài học 86
Hình 4-54 Lược đồ tuần tự chức năng thay đổi trạng thái bài học 87
Hình 4-55 Lược đồ tuần tự chức năng tạo mới bài viết 87
Hình 4-56 Lược đồ tuần tự chức năng sửa bài viết 88
Hình 4-57 Lược đồ tuần tự chức năng thay đổi trạng thái bài viết 88
Hình 4-58 Lược đồ tuần tự chức năng thống kê doanh thu 89
Hình 4-59 Lược đồ tuần tự chức năng số lượng người dùng làm đề thi 89
Hình 4-60 Lược đồ cơ sở dữ liệu 90
Hình 4-61 Giao diện trang chủ 103
Hình 4-62 Giao diện trang khóa học online 104
Hình 4-63 Giao diện trang đề thi 105
Hình 4-64 Giao diện trang chi tiết đề thi 105
Hình 4-65 Giao diện trang làm đề thi 106
Hình 4-66 Giao diện trang chi tiết kết quả 106
Hình 4-67 Giao diện trang chi tiết khóa học 107
Hình 4-68 Giao diện trang học video 108
Hình 4-69 Giao diện trang thanh toán khóa học 108
Hình 4-70 Giao diện trang thanh toán bên VNPAY 109
Hình 4-71 Giao diện trang Blog 110
Hình 4-72 Giao diện trang cá nhân người dùng 111
Hình 4-73 Giao diện trang đăng nhập 112
Hình 4-74 Giao diện trang đăng kí 113
Hình 4-75 Giao diện trang quên mật khẩu 113
Hình 4-76 Giao diện trang mã otp 114
Hình 4-77 Giao diện trang chủ quản trị viên 115
Hình 4-78 Giao diện trang quản lí người dùng 115
Hình 4-79 Giao diện trang quản lí đề thi 116
Hình 4-80 Giao diện trang quản lí danh mục đề thi 117
Hình 4-81 Giao diện trang quản lí khóa học 118
Hình 4-82 Giao diện trang quản lí chương học 119
Trang 17Hình 4-84 Giao diện trang thống kê doanh thu 121
Hình 4-85 Giao diện trang thống kê số người dùng làm đề thi 121
Hình 4-86 Giao diện trang cá nhân quản trị viên 122
Hình 5-1 Hướng dẫn thao tác trên Jira 125
Hình 5-2 Hướng dẫn thao tác trên Jira 2 126
Hình 5-3 Hướng dẫn thao tác trên Jira 3 126
Hình 5-4 Hướng dẫn thao tác trên Jira 4 127
Hình 5-5 Hướng dẫn thao tác trên Jira 5 127
Hình 5-6 Hướng dẫn thao tác trên Jira 6 128
Hình 5-7 Hướng dẫn thao tác trên Jira 7 128
Hình 5-8 Chi tiết Bug chức năng tạo bình luận 129
Hình 5-9 Chi tiết Bug chức năng đăng ký 129
Hình 5-10 Code selenium webdriver 131
Hình 5-11 Kết quả sau khi chạy selenium webdriver 132
Trang 18DANH MỤC BẢNG
Bảng 3-1 Đặc tả usecase đăng kí 19 Bảng 3-2 Đặc tả usecase đăng nhập 20 Bảng 3-3 Đặc tả usecase đổi mật khẩu 21 Bảng 3-4 Đặc tả usecase Tìm kiếm/Xem khóa học 22 Bảng 3-5 Đặc tả usecase xem chi tiết khóa học 23 Bảng 3-6 Đặc tả usecase đăng kí khóa học,thanh toán VNPAY 24 Bảng 3-7 Đặc tả usecase tìm kiếm,xem danh sách đề thi 25 Bảng 3-8 Đặc tả usecase xem chi tiết đề thi 26 Bảng 3-9 Đặc tả usecase làm đề thi và nộp bài 26 Bảng 3-10 Đặc tả usecase bình luận đề thi 27 Bảng 3-11 Đặc tả usecase xem blog 28 Bảng 3-12 Đặc tả usecase xem chi tiết blog 29 Bảng 3-13 Đặc tả usecase đánh giá blog 29 Bảng 3-14 Đặc tả usecase cập nhật thông tin cá nhân 30 Bảng 3-15 Đặc tả usecase xem các khóa học đã đăng kí 31 Bảng 3-16 Đặc tả usecase xem lịch sử thanh toán 32 Bảng 3-17 Đặc tả usecase xem kết quả làm bài 33 Bảng 3-18 Đặc tả usecase chuyển đổi trạng thái người dùng 35 Bảng 3-19 Đặc tả usecase thêm đề thi 35 Bảng 3-20 Đặc tả usecase sửa đề thi 36 Bảng 3-21 Đặc tả usecase thay đổi trạng thái đề thi 37 Bảng 3-22 Đặc tả usecase thêm danh mục đề thi 38 Bảng 3-23 Đặc tả usecase sửa danh mục đề thi 39 Bảng 3-24 Đặc tả usecase thay đổi trạng thái danh mục đề thi 40 Bảng 3-25 Đặc tả usecase thêm khóa học 41 Bảng 3-26 Đặc tả usecase sửa khóa học 42 Bảng 3-27 Đặc tả usecase thay đổi trạng thái khóa học 42 Bảng 3-28 Đặc tả usecase thêm chương học 43 Bảng 3-29 Đặc tả usecase sửa chương học 44
Trang 19Bảng 3-31 Đặc tả usecase thêm bài học 46 Bảng 3-32 Đặc tả usecase sửa bài học 47 Bảng 3-33 Đặc tả usecase thay đổi trạng thái bài học 48 Bảng 3-34 Đặc tả usecase tạo blog 49 Bảng 3-35 Đặc tả usecase sửa blog 50 Bảng 3-36 Đặc tả usecase thay đổi trạng thái blog 50 Bảng 3-37 Đặc tả usecase thống kê doanh thu 51 Bảng 3-38 Đặc tả usecase thống kê số lượng người dùng làm bài thi 52 Bảng 4-1 Chi tiết dữ liệu bảng users 90 Bảng 4-2 Chi tiết dữ liệu bảng khóa học 92 Bảng 4-3 Chi tiết dữ liệu bảng chương học 92 Bảng 4-4 Chi tiết dữ liệu bảng bài học 93 Bảng 4-5 Chi tiết dữ liệu bảng note 94 Bảng 4-6 Chi tiết dữ liệu bảng user_course 94 Bảng 4-7 Chi tiết dữ liệu bảng user_course_progress 95 Bảng 4-8 Chi tiết dữ liệu bảng video_watch_history 95 Bảng 4-9 Chi tiết dữ liệu bảng hình ảnh 96 Bảng 4-10 Chi tiết dữ liệu bảng thanh toán 96 Bảng 4-11 Chi tiết dữ liệu bảng phương thức thanh toán 96 Bảng 4-12 Chi tiết dữ liệu bảng target 97 Bảng 4-13 Chi tiết dữ liệu bảng comments 97 Bảng 4-14 Chi tiết dữ liệu bảng reply_comments 97 Bảng 4-15 Chi tiết dữ liệu bảng exam 98 Bảng 4-16 Chi tiết dữ liệu bảng question 98 Bảng 4-17 Chi tiết dữ liệu bảng exam_detail 99 Bảng 4-18 Chi tiết dữ liệu bảng audio 99 Bảng 4-19 Chi tiết dữ liệu bảng category_exam 99 Bảng 4-20 Chi tiết dữ liệu bảng topic_exam 100 Bảng 4-21 Chi tiết dữ liệu bảng result 100 Bảng 4-22 Chi tiết dữ liệu bảng result_detail 101 Bảng 4-23 Chi tiết dữ liệu bảng post 101 Bảng 4-24 Chi tiết dữ liệu bảng points 102
Trang 20Bảng 4-25 Chi tiết dữ liệu bảng ratings 102 Bảng 4-26 Chi tiết dữ liệu bảng promotions 102 Bảng 4-27 Mô tả chức năng giao diện trang chủ 103 Bảng 4-28 Mô tả chức năng giao diện trang khóa học online 104 Bảng 4-29 Mô tả chức năng giao diện trang đề thi 105 Bảng 4-30 Mô tả chức năng giao diện trang chi tiết đề thi 105 Bảng 4-31 Mô tả chức năng giao diện trang làm đề thi 106 Bảng 4-32 Mô tả chức năng giao diện trang chi tiết kết quả 107 Bảng 4-33 Mô tả chức năng giao diện trang chi tiết khóa học 107 Bảng 4-34 Mô tả chức năng giao diện trang học video 108 Bảng 4-35 Mô tả chức năng giao diện trang thanh toán khóa học 109 Bảng 4-36 Mô tả chức năng giao diện trang thanh toán bên VNPAY 109 Bảng 4-37 Mô tả chức năng giao diện trang blog 110 Bảng 4-38 Mô tả chức năng giao diện trang cá nhân người dùng 111 Bảng 4-39 Mô tả chức năng giao diện trang đăng nhập 112 Bảng 4-40 Mô tả chức năng giao diện trang đăng kí 113 Bảng 4-41 Mô tả chức năng giao diện trang quên mật khẩu 113 Bảng 4-42 Mô tả chức năng giao diện trang mã otp 114 Bảng 4-43 Mô tả chức năng giao diện trang chủ quản trị viên 115 Bảng 4-44 Mô tả chức năng giao diện trang quản lí người dùng 115 Bảng 4-45 Mô tả chức năng giao diện trang quản lí đề thi 116 Bảng 4-46 Mô tả chức năng giao diện trang quản lí danh mục đề thi 117 Bảng 4-47 Mô tả chức năng giao diện trang quản lí khóa học 118 Bảng 4-48 Mô tả chức năng giao diện trang quản lí chương học 119 Bảng 4-49 Mô tả chức năng giao diện trang quản lí bài học 120 Bảng 4-50 Mô tả chức năng giao diện trang thống kê doanh thu 121 Bảng 4-51 Mô tả chức năng giao diện trang số người dùng làm đề thi 122 Bảng 4-52 Mô tả chức năng giao diện trang cá nhân quản trị viên 122 Bảng 5-1 Bảng thống kê test case 124
Trang 21CHƯƠNG 1 TỔNG QUAN 1.1 Tính cấp thiết của đề tài
Ngày nay chúng ta đang sống trong thời đại công nghệ chi phối hầu như toàn bộ những lĩnh vực trong cuộc sống và giáo dục cũng không phải là một ngoại lệ Việc trao đổi, chia sẻ, thảo luận trực tuyến với nhau những kiến thức học tập là một phần không thể thiếu đối với sinh viên nói riêng và tất cả mọi người nói chung, đặc biệt là nền tảng tiếng anh Vì vậy dự án phát triển website luyện thi tiếng anh ra đời nhằm giúp cho sinh viên có thêm môi trường để học hỏi, tìm kiếm, trao đổi qua phần thảo luận những đề thi tiếng anh Riêng với sinh viên hiện nay thì tiếng anh là điều kiện tiên quyết cần có để ra trường.Vì thế website luyện thi tiếng anh là một nơi mà sinh viên có thể học tập và luyện thi để có thể đánh giá khả năng của mình một cách thực tế nhất
1.2 Đối tượng nghiên cứu
1.2.1 Người dùng cuối (Khách hàng)
Người dùng có nhu cầu học: Các cá nhân, gia đình hoặc nhóm bạn quan tâm đến việc học tập tiếng anh Đây là nhóm chính mà hệ thống website luyện thi tiếng anh trực tuyến hướng đến
1.2.2 Nhà quản lý hệ thống
Nhà phát triển: Các nhóm kỹ thuật và phát triển hệ thống, như các nhà phát triển phần mềm và chuyên gia công nghệ, cũng là một đối tượng quan trọng Nghiên cứu có thể tập trung vào việc cải thiện tính ổn định, tính bảo mật và hiệu suất của hệ thống Người quản lý sản phẩm: Những người có trách nhiệm đưa ra quyết định về tính năng, chiến lược phát triển, và trải nghiệm người dùng cuối cũng là đối tượng quan trọng
Trang 221.3 Phạm vi nghiên cứu
1.3.1 Trải nghiệm người dùng
• Giao diện người dùng: Phân tích và cải thiện giao diện để làm cho việc
học các khóa học và làm đề thi trở nên dễ dàng và thuận tiện hơn cho người dùng
• Tối ưu hóa trải nghiệm: Tăng cường trải nghiệm người dùng trong việc
tìm kiếm thông tin, xem các khóa học hoặc đề thi
1.3.2 Quản lý hệ thống và dữ liệu
• Quản lý dữ liệu: Xây dựng hệ thống quản lý dữ liệu hiệu quả để lưu trữ
thông tin về các khóa học, đề thi, thông tin khách hàng, và các thông tin quan trọng khác
• Bảo mật thông tin: Đảm bảo an toàn và bảo mật thông tin cá nhân của
người dùng và thông tin liên quan đến giao dịch thanh toán
1.3.3 Quản lý kinh doanh và marketing
• Chiến lược quảng cáo và khuyến mãi: Nghiên cứu về cách hệ thống có
thể được tích hợp để thực hiện chiến lược quảng cáo và khuyến mãi hiệu quả
• Thu nhập và doanh số bán các khóa học: Phân tích dữ liệu để đánh giá
doanh số bán các khóa học và thu nhập từ các khóa học, từ đó cải thiện chiến lược kinh doanh
1.3.4 Quản lý hệ thống và kỹ thuật
• Hiệu suất hệ thống: Đảm bảo hiệu suất cao và ổn định của hệ thống trong
quá trình đăng kí khóa học, làm đề thi và giao dịch
• Nâng cấp và cải thiện: Tìm kiếm cách để cải thiện hệ thống, tính năng
mới, và phản hồi từ người dùng để cải thiện trải nghiệm
Trang 231.4 Mục tiêu của đề tài
Về phía người dùng xây dựng được một website chia sẻ kiến thức học tập với các
tính năng cơ bản về làm đề thi và tham gia thảo luận câu hỏi, tìm kiếm đề thi và các hỗ
trợ khác cho người dùng
Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ
thống: như thống kê, quản lý tài khoản, quản lý môn học, quản lý tài liệu đề thi
Áp dụng Kiến Thức Chuyên Ngành: Sử dụng kiến thức từ chuyên ngành để xây dựng
hệ thống với cơ sở dữ liệu mạnh mẽ, đảm bảo an toàn và bảo mật thông tin người dùng
Tối ưu hoá hiệu suất hệ thống, đảm bảo ổn định và linh hoạt trong quản lý dữ liệu và
giao dịch
Tích Hợp Các Kỹ Năng Lập Trình và Thiết Kế: Sử dụng các ngôn ngữ lập trình (như
Java, JavaScript) và framework phù hợp để xây dựng giao diện và chức năng Thiết kế
giao diện đẹp và thân thiện với người dùng bằng cách áp dụng kiến thức về UX/UI
1.5 Ý nghĩa khoa học và thực tiễn
Mục đích đề tài nhằm tạo ra một môi trường giúp các cá nhân có nhu cầu học tiếng
anh đặc biệt là các bạn sinh viên có thể dễ dàng học và làm đề thi thực tế để đánh giá
trình độ của bản thân Nâng cao kiến thức, khả năng tự học cho sinh viên
Trang 24CHƯƠNG 2 CƠ SỞ LÝ THUYẾT 2.1 Các công nghệ sử dụng ở Front-End
2.1.1 ReactJS Framework
ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại ReactJS giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component) Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook ReactJS ban đầu được phát triển và duy trì bởi Facebook và sau đó được sử dụng trong các sản phẩm của mình như WhatsApp & Instagram ReactJS được dùng để xây dựng các ứng dụng - single page application (SPA) Một trong những điểm thú vị của ReacJS là nó không chỉ được xây dựng bên phía clients mà còn được sử dụng trên server và có thể kết nối với nhau ReactJS so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM Công nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết
để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object
Hình 2-1 Virtual DOM trong ReactJS
Trang 25Props là từ viết tắt của properties là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element
Props là cách để các component có thể nhận được các giá trị của thuộc tính truyền vào từ bên ngoài vào và giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các component
Khi một components cha truyền cho components con một props thì components con chỉ có thể đọc và sử dụng chứ không thể chỉnh sửa nó bên phía components cha Cách truyền props cũng giống như cách thêm một attributes cho một element HTML
Hình 2-2 Cú pháp props trong Class Component và Function Component
Truyền dữ liệu thông qua Props: Ví dụ khi truyền dữ liệu từ Component cha xuống Component con Trong phương thức renderName của Component cha ta truyền vào props value xuống Component con Trong phương thức render của Component con ta sử dụng props đã truyền ở trên để hiển thị giá trị được truyền vào bằng {this.props.value}
State là thành phần của component, nó là một object được sử dụng để chứa dữ liệu hoặc thông tin về components Khác với props chúng ta có thể truyền props từ component này sang các components khác nhau thì state chỉ tồn tại trong phạm vi của components chứa nó State có thể được cập nhật thay đổi bất cứ khi nào bằng setState Mỗi khi state được cập nhật thì components đó sẽ được re-render lại
Trang 26Trong một dự án React JS, state được dùng để phản hồi các yêu cầu từ người dùng, cập nhật trạng thái giao diện hay lưu trữ một dữ liệu nào đó trong components ReactJS được đánh giá cao đối với các doanh nghiệp:
• Ứng dụng được tạo ra bởi ReactJS với cấu trúc UI tốt hơn giúp nâng cao và tối ưu hóa UX Các doanh nghiệp có thể dễ dàng tăng tương tác của người dùng, tỉ lệ click và tỉ lệ chuyển đổi (conversion) trên trang web của mình
• Hiệu suất kinh doanh khi có dùng ứng dụng của ReactJS cũng tốt hơn so với khi dùng các framework khác Nó sẽ hạn chế cập nhật của DOM, từ đó tăng tốc độ truy cập ứng dụng và cải tiến UX tốt hơn
• ReactJS cũng được thiết kế để giúp cải thiện số trang render tổng từ phía server Đồng thời sẽ giúp tối ưu các nút để render phía client-side Khả năng tùy chỉnh công cụ tốt, thậm chí làm giảm ngân sách bảo trì hệ thống, giúp ReactJS hiệu quả cao hơn
2.1.2 Các thư viện hỗ trợ khác
Một số thư viện hỗ trợ cho việc xây dựng website ở phía Front-End:
• Axios: là một HTTP client được phát triển dựa trên Javascript Promise, được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js
• SCSS: một ngôn ngữ tiền xử lý được biên dịch thành CSS, với phần
mở rộng file có dạng scss SCSS cho phép thêm các tính năng bổ sung vào CSS, bao gồm các biến, nesting,… Các tính năng bổ sung có thể giúp việc viết SCSS đơn giản và nhanh chóng hơn nhiều so với CSS tiêu chuẩn SCSS có thể sử dụng code và hàm của CSS, tuân theo cú pháp của CSS và hỗ trợ mọi tính năng có trong SASS
• Material-ui: Thư viện React UI cung cấp các thành phần giao diện người dùng chuyên nghiệp, thuận tiện và dễ dàng sử dụng
Trang 27• React Router: Quản lý định tuyến trong ứng dụng React, cho phép chuyển đổi giữa các trang và cung cấp tính năng như tham số URL và quản lý history
• React Hook Form: Thư viện quản lý trạng thái biểu mẫu trong React bằng Hooks, giúp xử lý trạng thái, xác thực và theo dõi sự thay đổi trên các trường biểu mẫu
• React Helmet: Cho phép thêm các thẻ <head> tùy chỉnh vào trang React để quản lý tiêu đề, meta tags, và các thẻ khác của trang HTML
Hỗ trợ việc SEO của website được tốt hơn
2.2 Các công nghệ sử dụng ở Back-End
2.2.1 Java
Java là một ngôn ngữ lập trình và một nền tảng phần mềm đa năng Được phát triển bởi Sun Microsystems (hiện nay là một phần của Oracle Corporation), Java đã trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới Được thiết kế với mục tiêu đa nền tảng, Java chạy trên một môi trường ảo (Java Virtual Machine - JVM), cho phép mã nguồn Java được viết một lần và chạy trên nhiều hệ điều hành khác nhau mà không cần phải viết lại
Hình 2-3 Ứng dụng của Java
Trang 28Các đặc tính của Java
• Đa nền tảng: Mã nguồn Java có thể chạy trên nhiều hệ điều hành khác nhau như Windows, Linux, macOS mà không cần sửa đổi Điều này đặc biệt hữu ích khi phát triển ứng dụng cho nhiều loại thiết bị và môi trường khác nhau
• Cú pháp dễ đọc và dễ hiểu: Java được thiết kế với cú pháp gần gũi với ngôn ngữ tự nhiên, dễ đọc và dễ học Điều này làm cho việc phát triển ứng dụng trở nên dễ dàng hơn cho cả người mới học lập trình
• Hỗ trợ thư viện lớn: Java đi kèm với một loạt các thư viện và công cụ phong phú, cung cấp các chức năng sẵn có giúp lập trình viên xây dựng ứng dụng phức tạp một cách hiệu quả
• Bảo mật cao: Java được thiết kế với các tính năng bảo mật tích hợp, giúp ngăn chặn các lỗ hổng bảo mật và cung cấp môi trường an toàn cho ứng dụng
2.2.2 Spring Boot
Spring Boots là một framework phát triển ứng dụng Java được xây dựng trên nền tảng của Spring Framework, nhằm giúp việc phát triển ứng dụng Java trở nên đơn giản, nhanh chóng và dễ dàng hơn Đây là một công cụ mạnh mẽ để xây dựng các ứng dụng web, microservices và các ứng dụng enterprise
Các đặc điểm:
• Tính tự cấu hình (Auto-Configuration): Spring Boot có khả năng tự động cấu hình một số thành phần của ứng dụng dựa trên các thư viện và cấu hình mà bạn sử dụng Điều này giúp giảm thiểu việc cấu hình thủ công và cho phép bạn tập trung vào việc phát triển logic ứng dụng
• Standalone và Embedded Servers: Spring Boot cung cấp khả năng tích hợp các server như Tomcat, Jetty hoặc Undertow trực tiếp vào ứng dụng Điều này cho phép ứng dụng chạy một cách độc lập mà không cần phải cài đặt server
Trang 29• Spring Ecosystem: Spring Boot tích hợp tốt với các thành phần của Spring Framework như Spring Data, Spring Security, Spring MVC, và nhiều thư viện khác Điều này giúp tạo ra các ứng dụng mạnh mẽ và linh hoạt
• Spring Initializr: Công cụ này cho phép bạn bắt đầu một dự án Spring Boot mới một cách nhanh chóng thông qua việc tạo ra một dự án Maven hoặc Gradle với các cấu hình cơ bản đã được thiết lập sẵn
• Hỗ trợ RESTful API: Spring Boot rất mạnh mẽ trong việc xây dựng và quản
lý các API RESTful thông qua Spring MVC và Spring Webflux
Hình 2-4 Các module của spring framework
2.2.3 MYSQL
MySQL là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) mã nguồn mở phổ biến, được sử dụng rộng rãi trên toàn thế giới để lưu trữ và quản lý dữ liệu Nó được phát triển, hỗ trợ và duy trì bởi Oracle Corporation
MySQL được sử dụng rộng rãi trong nhiều loại ứng dụng từ các website cá nhân, doanh nghiệp đến các hệ thống lớn, với khả năng linh hoạt và hiệu suất cao, nó trở thành một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thị trường
Các đặc điểm:
Trang 30• Mã nguồn mở: MySQL là một RDBMS mã nguồn mở, điều này có nghĩa là bạn
có thể sử dụng, tùy chỉnh và phát triển nó mà không phải trả phí
• Dễ cài đặt và sử dụng: MySQL có quá trình cài đặt đơn giản và giao diện quản lý thân thiện, cho phép người dùng dễ dàng tạo, quản lý và tương tác với cơ sở dữ liệu
• Đa nền tảng: MySQL hỗ trợ nhiều hệ điều hành khác nhau như Windows, Linux, macOS, và nhiều nền tảng khác
• Tính nhất quán và ACID: MySQL tuân thủ chuẩn ACID (Atomicity, Consistency, Isolation, Durability) giúp bảo đảm tính nhất quán của dữ liệu trong quá trình thực hiện các giao dịch
• Hiệu suất cao: MySQL được tối ưu hóa để đạt hiệu suất cao, có khả năng xử lý tải cao và thời gian truy xuất nhanh, điều này thích hợp cho các ứng dụng có yêu cầu về hiệu suất dữ liệu lớn
• Hỗ trợ cho nhiều ngôn ngữ lập trình: MySQL hỗ trợ nhiều ngôn ngữ lập trình thông qua các giao thức như JDBC cho Java, MySQL Connector/ODBC cho C/C++, và các giao thức khác
• Cộng đồng lớn và hỗ trợ đa dạng: Có một cộng đồng lớn của người dùng MySQL trên toàn thế giới, cung cấp tài liệu, diễn đàn hỗ trợ và nhiều nguồn thông tin hữu ích
Trang 31Hình 2-5 Kiến trúc của MySql
2.2.4 Các thư viện hỗ trợ khác
Một số thư viện hỗ trợ cho việc xây dựng website ở phía Back-End:
• Jsonwebtoken: JSON Web Token (JWT) là 1 tiêu chuẩn mở (RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào "chữ ký" của nó Phần chữ ký của JWT sẽ được mã hóa lại bằng HMAC hoặc RSA Trong đó chuỗi Token phải có 3 phần là header , phần payload và phần signature được ngăn bằng
dấu “.”
Trang 32Hình 2-6 Các thành phần của JWT
• Google API Services YouTube: là một bộ API (Application Programming Interface) cung cấp bởi Google, cho phép các nhà phát triển tương tác với dữ liệu và chức năng của YouTube thông qua ứng dụng của họ
• Firebase Admin SDK: là một bộ công cụ cung cấp các tính năng quản lý và điều khiển Firebase projects từ phía máy chủ hoặc các môi trường backend SDK này cung cấp các tính năng quản lý cơ sở dữ liệu Realtime Database, Firebase Authentication, Cloud Firestore, Cloud Messaging và nhiều dịch vụ Firebase khác từ một môi trường backend độc lập
• Google API Client Library: cung cấp cho các nhà phát triển các phương thức để tương tác với dịch vụ Google Drive thông qua API từ các ứng dụng của họ
• Lombok: là một thư viện Java mã nguồn mở được sử dụng để giảm thiểu mã lặp và giúp tăng cường sự hiệu quả trong quá trình phát triển phần mềm Java Thư viện này cung cấp các annotation (chú thích) để sinh ra tự động các phương thức getter, setter, constructor, equals, hashCode, toString và nhiều hơn nữa trong quá trình biên dịch
Trang 33CHƯƠNG 3 KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 3.1 Khảo sát hiện trạng
3.1.1 Study4
Hình 3-1 Khảo sát hiện trạng Study4
Study4 (https://study4.com) là trang web luyện thi toeic khá phổ biến hiện nay.Trang web cung cấp các đề thi ETS mới nhất theo các năm.Người dùng có thể luyện thi và đánh giá trực quan được khả năng của mình tới đâu.Ngoài toeic thì Study4 còn có những danh mục luyện tập khác khá là đang dạng và phong phú.Không chỉ hổ trợ luyện thi, Study4 còn cung cấp các khóa học online về toeic, ielts khá chất lượng và người dùng có thể đăng kí những khóa học trên đó để cải thiện thêm về kiến thức của mình
Ưu điểm của Study4:
• Tiện ích và linh hoạt: Có thể truy cập bất cứ đâu miễn là có mạng
• Nội dung đa dạng: Nội dung phong phú từ khóa học cho đến những bài luyện thi
• Tương tác và hỗ trợ: Cung cấp một số chức năng hỗ trợ làm bài như đánh dấu hay note lại những từ
Nhược điểm của Study4:
Trang 34• Vấn đề kết nối và hệ thống: Hệ thống hay gặp vấn đề kết nối làm cho người dùng không thể truy cập vào trang web một cách ổn định
• Nội dung không chất lượng: Một số khóa học phần nội dung còn chưa chất lượng Cần cải thiện thêm về những nội dung của bài học
Hình 3-2 Khảo sát hiện trạng Study4
3.1.2 Anh ngữ MsHoa
Anh ngữ MsHoa (https://www.anhngumshoa.com/) là một trang web thuộc trung tâm anh ngữ MsHoa.Trên đây có khá nhiều chức năng về lịch học của các học offline ở tất cả các chi nhánh có trên toàn quốc của anh ngữ MsHoa.Không những thế,Anh ngữ MsHoa còn cung cấp các khóa học online, bài test online, các bài tập về các chủ đề, các mục tự học về từ vựng và ngữ pháp.Đây là 1 trang web rất tốt cho những ai đang luyện thi toeic
Ưu điểm của Anh Ngữ MsHoa:
• Hệ thống chức năng đa dạng
Trang 35• Cung cấp được những bài học miễn phí dành cho những ai không có khả năng trả phí cho những khóa học có phí
Hạn chế của Anh Ngữ MsHoa:
• Nhiều khóa học còn chưa được chất lượng
• Khả năng xử lí dữ liệu trang web còn kém mang lại cho người dùng trải nghiệm không tốt
Hình 3-3 Khảo sát hiện trạng Anh ngữ MsHoa
Tính năng tương tác và hỗ trợ người dùng: Cần cải thiện tính năng tương tác và hỗ trợ người dùng khi họ cần thông tin hoặc gặp vấn đề trong quá trình làm đề thi hoặc học
Trang 36các bài học Việc cung cấp hỗ trợ nhanh chóng và hiệu quả sẽ tăng cường trải nghiệm người dùng
Tối ưu hóa trải nghiệm người dùng: Tăng cường trải nghiệm người dùng bằng cách cải thiện giao diện trang web, làm cho quá trình tìm kiếm thông tin và đăng kí khóa học trở nên dễ dàng và thuận tiện hơn
Chức năng hệ thống: Tốc độ tải trang không nhanh, cũng như trải nghiệm học tập các bài học không được mượt mà Một số chức năng bị lỗi, quy trình xử lý phức tạp
Từ những khảo sát trên và thông tin thu thập được, nhóm em sẽ ghi nhận và cải thiện, tăng trải nghiệm người dùng, đảm bảo hệ thống luôn hoạt động một cách chính xác
3.2 Xác định yêu cầu
3.2.1 Yêu cầu chức năng
• Xem Danh Sách Khóa Học: Hệ thống cung cấp danh sách các khóa học online
tiếng anh chất lượng, đem lại cho người dùng những kiến thức mới sau khi học các khóa học đó
• Xem Danh Sách Đề Thi: Hệ thống cung cấp các đề thi tiếng anh toeic hai kĩ
năng mới nhất giúp người dùng có thể luyện tập
• Làm Đề Thi: Người dùng có thể luyện thi tiếng anh bằng cách tiến hành làm các
đề thi có trên hệ thống.Hệ thống cung cấp các đề thi Toeic hai kĩ năng chuẩn quốc
tế mới nhất đem lại cho người dùng một cách nhìn cụ thể về khả năng của bản thân sau khi làm đề thi
• Thanh Toán: Hệ thống cung cấp phương thức thanh toán an toàn và xử lý giao
dịch khi đăng kí khóa học
• Quản Lý Khóa Học: Quản trị viên có thể cập nhật, thêm mới, hoặc xóa khóa
học
• Quản Lý Chương Học: Quản trị viên có thể cập nhật, thêm mới, hoặc xóa
Trang 37• Quản Lý Bài Học: Quản trị viên có thể cập nhật, thêm mới, hoặc xóa bài học
• Quản Lý Đề Thi: Quản trị viên có thể cập nhật, thêm mới, hoặc xóa đề thi
• Quản Lý Tài Khoản: Cho phép người dùng quản lý thông tin cá nhân, đổi mật
khẩu, và cài đặt tùy chọn khác
3.2.2 Yêu cầu phi chức năng
• Hiệu Suất: Hệ thống cần xử lý nhiều giao dịch cùng lúc để đáp ứng nhu cầu
đăng kí khóa học trong tần suất liên tục
• Bảo Mật: Thông tin cá nhân và thông tin thanh toán của người dùng cần được
mã hóa và bảo mật
• Khả Năng Mở Rộng: Hệ thống cần có khả năng mở rộng để hỗ trợ thêm một
số tính năng khác, cải thiện hiệu suất và tính năng mới trong tương lai
• Đáng Tin Cậy và Ổn Định: Đảm bảo hệ thống hoạt động ổn định, đáng tin
cậy, ít gặp lỗi và có khả năng khôi phục sau sự cố
Trang 383.3 Mô hình hóa yêu cầu
3.3.1 Lược đồ Usecase
Hình 3-4 Usecase cho người dùng
Trang 39Hình 3-5 Usecase cho quản trị viên
3.3.2 Mô hình hóa yêu cầu
3.3.2.1 Mô hình hóa website phía khách và người dùng
Bảng 3-1 Đặc tả usecase đăng kí
Mô tả Đăng ký tạo tài khoản người dùng
Actor Khách hàng
Tiền điều kiện N/A
Trang 40Hậu điều kiện • Nếu thành công, sẽ có tài khoản mới được tạo
• Nếu thành công, sẽ có tài khoản mới được tạo
6 Chuyển sang trang xác thực mã otp
7 Nhập mã otp xác thực và nhấn Submit
8 Thông báo đăng ký thành công và quay về trang login
Mô tả Đăng nhập vào hệ thống
Actor Người dùng , Quản trị viên (Admin)
Tiền điều kiện Đã có tài khoản trong hệ thống
Hậu điều kiện • Nếu thành công, hệ thống sẽ dẫn đến trang tương ứng với
vai trò người dùng