Đồ án website học tiếng anh

PHƯƠNG PHÁP THỰC HIỆN

2 Khảo sát, phân tích, thiết kế

3 Mô hình hóa yêu cầu

5 Thiết kế giao diện xử lý

6 Cài đặt và kiểm thử ứng dụng

1 Những kết quả đạt được

2 Ưu điểm và nhược điểm

DANH SÁCH TÀI LIỆU THAM KHẢO

STT Thời gian Công việc

1 10/03/2023 Tổng hợp các chức năng của website đến Xây dựng mô hình dự án thông qua các lược đồ

2 19/03/2023 Xây dựng database phù hợp với các chức năng đến Thiết kế UI cho website

3 27/03/2023 Xây dựng UI cho học sinh

Xây dựng API phục vụ các chức năng cho học sinh đến như: Mua khóa học, tham gia các bài học, luyện đề, viết blog…

6 23/04/2023 Xây dựng UI cho giáo viên đến Xây dựng API phục vụ các chức năng cho giáo viên

16/05/2023 như: Quản lý khóa học, quản lý bài học…

7 17/05/2022 Xây dựng UI cho admin đến Xây dựng API phục vụ các chức năng như: quản lý

11/06/2023 người dùng, quản lý giao dịch…

8 12/06/2023 Tiến hành kết hợp giữa Back-end và Front-end đến

9 28/06/2023 Tiến hành tìm lỗi và sửa lỗi đến Tiến hành viết báo cáo

10 10/07/2023 Hoàn thành báo cáo và hoàn chỉnh hệ thống đến

Ngày 08 tháng 03 năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương

Nguyễn Hữu Trung Nguyễn Phúc Nghiêm

LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN 2

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 14

CHƯƠNG 1.CƠ SỞ LÝ THUYẾT 15

CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 18

2.2 Khảo sát một số phần mềm 19

2.3 Phân tích yêu cầu của dự án 23

2.4 Danh sách yêu cầu chức năng nghiệp vụ 23

2.5 Danh sách yêu cầu chức năng hệ thống 25

2.6 Danh sách yêu cầu phi chức năng 25

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 27

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 64

CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 77

5.5 Trang khóa học của user đã mua 84

5.7 Thay đổi thông tin user 87

5.8 Thay đổi ảnh đại diện user 89

5.14 Chỉnh sửa thông tin cá nhân 97

5.17 Trang chủ của ứng dụng quản lý của giáo viên 100

5.18 Quản lý bài giảng theo khóa học 102

5.20 Thêm bài tập theo bài giảng 106

5.32 Danh sách từ vựng theo flashcard 122

5.34 Danh sách lịch sử làm bài thi 126

5.35 Chi tiết làm bài thi 127

5.37 Chọn chi tiết phần thi 130

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 132

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 140

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 141

5 HƯỚNG PHÁT TRIỂN 141TÀI LIỆU THAM KHẢO 143

Hình 2.4 Trang bài luyện tập 22

Hình 2.5 Trang quản lý tài khoản 22

Hình 3.2 Usecase Quản lý tài khoản 28

Hình 3.3 Usecase Quản lý khóa học 29

Hình 3.4 Usecase quản lý Bài học 30

Hình 3.5 Usecase quản lý người dùng 30

Hình 3.6 Usecase Quản lý thanh toán 31

Hình 4.1 Lược đồ tuần tự đăng ký 64

Hình 4.2 Lược đồ tuần tự đăng nhập 65

Hình 4.3 Lược đồ tuần tự chỉnh sửa thông tin cá nhân 66

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

Hình 4.5 Lược đồ tuần tự tạo khóa học 68

Hình 4.6 Lược đồ tuần tự tạo bài học 69

Hình 4.7 Lược đồ tuần tự tạo bài tập 70

Hình 4.8 Lược đồ tuần tự tạo đề 71

Hình 4.9 Lược đồ tuần tự luyện đề 72

Hình 4.10 Lược đồ tuần tự tạo blog 73

Hình 4.12 Lược đồ tuần tự mua khóa học 75

Hình 5.1 Màn hình trang chủ 77

Hình 5.4 Màn hình trang tìm kiếm sản phẩm 82

Hình 5.5 Màn hình danh sách khóa học của user 84

Hình 5.6 Màn hình học khóa học 86

Hình 5.7 Màn hình thay đổi thông tin user 87

Hình 5.8 Màn hình thay đổi ảnh đại diện user 89

Hình 5.9 Màn hình thay đổi mật khẩu 90

Hình 5.10 Màn hình khóa tài khoản user 92

Hình 5.11 Màn hình lịch sử mua hàng 93

Hình 5.12 Màn hình quên mật khẩu 95

Hình 5.13 Màn hình danh sách khóa học 96

Hình 5.14 Màn hình chỉnh sửa thông tin cá nhân 97

Hình 5.15 Màn hình đổi mật khẩu 98

Hình 5.16 Màn hình danh sách giảng viên 99

Hình 5.17 Màn hình trang chủ của ứng dụng quản lí của giáo viên 100

Hình 5.18 Màn hình quản lí bài giảng theo khóa học 103

Hình 5.19 Màn hình thêm bài giảng 105

Hình 5.20 Màn hình thêm bài tập cho bài giảng 106

Hình 5.21 Màn hình chỉnh sửa bài giảng 107

Hình 5.22 Màn hình chỉnh sửa bài tập cho bài giảng 108

Hình 5.23 Màn hình báo cáo thống kê 109

Hình 5.24 Màn hình quản lí khóa học 111

Hình 5.25 Màn hình thêm khóa học 112

Hình 5.26 Màn hình chỉnh sửa khóa học 114

Hình 5.27 Màn hình quản lí giảng viên 116

Hình 5.28 Màn hình trang danh sách blog 117

Hình 5.29 Màn hình trang chi tiết blog 119

Hình 5.30 Màn hình trang tạo blog 120

Hình 5.36 Màn hình danh sách bài luyện thi 129

Hình 5.37 Màn hình chi tiết chọn bài luyện thi 130

Hình 5.38 Màn hình làm bài luyện thi 131

Hình 6.2 Màn hình trang tải Visual Studio Code 133

Hình 6.4 Cài trình biên dịch Visual Studio Code 134

Hình 6.5 Cài các extension cho Reactjs 134

Hình 6.7 Tải các package sử dụng trong dự án 135

Hình 6.8 Khởi động dự án admin 136

Hình 6.9 Khởi động dự án teacher 136

Hình 6.10 Khởi động dự án user 136

Bảng 2.1 Chức năng và hạn chế của FoodHub 22

Bảng 2.2 Chức năng của từng tác nhân 23

Bảng 2.3 Danh sách yêu cầu chức năng nghiệp vụ 24

Bảng 2.4 Danh sách yêu cầu chức năng hệ thống 25

Bảng 2.5 Danh sách yêu cầu phi chức năng 26

Bảng 5.1 Mô tả màn hình trang chủ 78

Bảng 5.2 Mô tả màn hình trang đăng nhập 79

Bảng 5.3 Mô tả màn hình trang đăng ký 80

Bảng 5.4 Mô tả màn hình trang tìm kiếm sản phẩm 82

Bảng 5.5 Mô tả màn hình danh sách khóa học của user 84

Bảng 5.6 Mô tả màn hình giỏ hàng 86

Bảng 5.7 Mô tả màn hình thay đổi thông tin user 87

Bảng 5.8 Mô tả màn hình thay đổi ảnh đại diện user 89

Bảng 5.9 Mô tả màn hình thay đổi mật khẩu 90

Bảng 5.10 Mô tả màn hình khóa tài khoản user 92

Bảng 5.11 Mô tả màn hình lịch sử mua hàng 93

Bảng 5.12 Mô tả màn hình quên mật khẩu 95

Bảng 5.13 Mô tả màn hình danh sách khóa học 96

Bảng 5.14 Mô tả màn hình chỉnh sửa thông tin cá nhân 97

Bảng 5.15 Mô tả màn hình đổi mật khẩu 98

Bảng 5.16 Mô tả màn hình danh sách giảng viên 99

Bảng 5.17 Mô tả màn hình trang chủ của ứng dụng quản lí của giáo viên 100

Bảng 5.18 Mô tả màn hình quản lý bài giảng theo khóa học 103

Bảng 5.19 Mô tả màn hình thêm bài giảng 105

Bảng 5.20 Mô tả màn hình thêm bài tập cho bài giảng 106

Bảng 5.21 Mô tả màn hình chỉnh sửa bài giảng 107

Bảng 5.27 Mô tả màn hình quản lý giảng viên 116

Bảng 5.29 Mô tả màn hình trang chi tiết blog 119

Bảng 5.30 Mô tả màn hình trang tạo blog 120

Bảng 5.31 Mô tả màn hình danh sách flashcard 121

Bảng 5.32 Mô tả màn hình chỉnh sửa từ vựng 123

Bảng 5.33 Mô tả màn hình luyện tập flashcard 125

Bảng 5.34 Mô tả màn hình danh sách lịch sử làm bài luyện thi 126

Bảng 5.35 Mô tả màn hình chi tiết lịch sử làm bài luyện thi 128

Bảng 5.36 Mô tả màn hình danh sách bài luyện thi 129

Bảng 5.37 Mô tả màn hình chi tiết chi tiết chọn bài luyện thi 130

Bảng 5.38 Mô tả màn hình làm bài luyện thi 131

Bảng 6.1 Kiểm thử các chức năng quản lý tài khoản 136

Bảng 6.2 Kiểm thử các chức năng khóa học, bài học 137

Bảng 6.3 Kiểm thử các chức năng quản lý blog, bình luận 138

Bảng 6.4 Kiểm thử các chức năng quản lý danh sách từ 138

Bảng 6.5 Kiểm thử các chức năng quản lý đề luyện tập 138

Bảng 6.6 Kiểm thử các chức năng quản lý danh mục, sản phẩm 139

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sự phát triển vượt bậc và nhanh chóng của khoa học và công nghệ Một thời đại mà ứng dụng của công nghệ thông tin được tìm thấy ở khắp mọi nơi và chỉ cần có mạng internet đã có thể thực hiện được hầu như mọi thứ Vì thế chúng em đã quyết định thực hiện đề tài “Xây dựng Website học tiếng Anh sử dụng Spring Framework và

ReactJS” bởi vì các động lực sau.

Ta có thể thấy, ở thời điểm hiện tại tình hình dịch Covid – 19 ở nước ta đang ở đã giảm bớt phần nào nhưng việc tập trung vẫn có thể đem lại nhiều rủi ro Bên cạnh đó, xã hội ngày nay phát triển một cách nhanh chóng, mọi người luôn bận rộn các công việc cá nhân của bản thân Vì vậy, mọi người luôn phải tranh thủ từng phút từng giây để nâng cao gian đi lại Và đồng thời website này cũng là nơi để cho người dùng có thể tìm kiếm các khóa học đúng như mong muốn một cách dễ dàng.

● Xây dựng website cho học viên có thể học online, giáo viên có thể xây dựng khóa học và dạy học online và dành cho quản trị quản trị viên quản trị cơ sở dữ liệu.

● Vận dụng thành các công công nghệ mới, ngôn ngữ lập trình hiện đại vào để xây dựng website của đề tài.

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu các thư viện hỗ trợ cho đề tài ở ReactJS

● Tìm hiểu về framework, ở đây là Spring Framework

Tham khảo các ứng dụng đang được sử dụng trên thị trường

SỞ LÝ THUYẾT

Spring Framework

1.1.1 Giới thiệu về Spring Framework

Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code… [2]

Spring nhẹ và trong suốt (nhẹ: kích thước nhỏ, version cơ bản chỉ khoảng 2MB; trong suốt: hoạt động một cách trong suốt với lập trình viên).Spring là một mã nguồn mở, được phát triển, chia sẻ và có cộng đồng người dùng rất lớn.

Spring Framework được xây dựng dựa trên 2 nguyên tắc design chính là: Dependency Injection và Aspect Oriented Programming.Những tính năng core (cốt lõi) của Spring có thể được sử dụng để phát triển Java Desktop, ứng dụng mobile, Java Web Mục tiêu chính của Spring là giúp phát triển các ứng dụng J2EE một cách dễ dàng hơn dựa trên mô hình sử dụng POJO (Plain Old Java Object)

● Tạo ứng dụng một cách độc lập, có thể chạy trên cả nền tảng Java Web

● Cho phép nhúng trực tiếp các web server như Jetty, Tomcat,… mà không cần phải triển khai các file WAR.

● Tối ưu hóa công đoạn cấu hình cho ứng dụng, không sinh ra code cấu hình và

● Có thể đóng gói ứng dụng Spring dưới dạng là file JAR và có thể dễ dàng khởi động ứng dụng chỉ với một câu lệnh ngắn gọn, quen thuộc: java – jar,…

● Giảm thiểu thời gian phát triển code, tăng hiệu suất phát triển chung của cả dự án.

● Dễ dàng tích hợp các mô-đun liên quan như Spring-MVC, Spring Data,

● Ngoài ra còn có nhiều plugins để phát triển nhanh chóng bằng các công cụ nhưBuild như Maven hoặc Gradle

ReactJS

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở tầng Client nữa [4] React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụng code) bằng cách đưa ra 2 khái niệm quan trọng bao gồm: JSX và Virtual DOM.

Sau đây là các ưu điểm của ReactJS:

● Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau Không chỉ riêng mỗi ReactJS mà các framework hiện nay cũng đều cho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.

● Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng thực chất nó được sinh ra không chỉ làm mỗi đều đó Nếu bạn cần phát triển thêm ứng dụng Mobile, thì hãy sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook, bạn có thể dễ dàng “chia sẻ” các Component hoặc sử dụng lại các Business Logic trong ứng dụng.

● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thông tin website của bạn lên top đầu tìm kiếm của Google Bản chất ReactJS là một thư viện JavaScript, Google Search Engine hiện nay đã crawl và index được code JavaScript, tuy nhiên bạn cũng cần thêm một vài thư viện khác để hỗ trợ điều này nhé!

● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng Điều đó giúp tăng tốc quá trình release sản phẩm cung như quá trình coding của bạn.

● Công cụ phát triển web hot nhất hiện nay: Nếu bạn nhìn vào số liệu thống kê từ Google Trend ở Việt Nam ở hình bên dưới, dạo lướt qua các trang tuyển dụng hàng đầu ở Việt Nam như Topdev, Itviec, v.v bạn sẽ thấy số lượng tuyển dụng cho vị trí React Developer là cực kỳ lớn cùng với mức lương vô cùng hấp dẫn và độ phổ biến hiện tại của ReactJS trên thị trường Việt Nam là như thế nào.

MySQL

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở viết tắt RDBMS

(Relational database management system) phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Hoạt động theo mô hình Client – Server MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu và mỗi cơ sở dữ liệu có nhiều bảng quan hệ chứa dữ liệu.

MySQL là một trong số các phần mềm RDBMS (Relational database management system) RDBMS (Relational database management system) và MySQL thường được cho là một vì độ phổ biến quá lớn của MySQL Các ứng dụng web lớn nhất như Facebook, Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưu trữ dữ liệu Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tương thích với nhiều hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows, và Ubuntu.

● An toàn: Vì MySQL sở hữu nhiều tính năng bảo mật cấp cao, mã hóa thông tin đăng nhập và chứng thực từ host đều khả dụng.

● Dễ sử dụng: MySQL ổn định và dễ sử dụng trên nhiều hệ điều hành và cung cấp một hệ thống các hàm tiện ích lớn.

● Khả năng mở rộng: Với MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa có thể mở rộng khi cần thiết.

● Hiệu năng cao: Hỗ trợ nhiều chức năng SQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ.

KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ

Phân tích hiện trạng

Ngày nay, việc học ngày càng trở nên quan trọng, mọi người dù lớn dù nhỏ luôn phải bổ sung kiến thức cho mình Đặc biệt là trong thời đại hội nhập ngày nay thì kiến thức về tiếng Anh là vô cùng quan trọng Nhưng việc học của chúng ta gặp khá nhiều khó khăn. khóa học linh hoạt về thời gian và địa điểm Cho nên việc một trang web học tiếng Anh là cần thiết trong hoàn cảnh ngày nay, đặc biệt là trong thời kỳ dịch bệnh này. Mọi người có thể dễ dàng truy cập trang web mọi lúc, mọi nơi Trên trang web của chúng tôi, có rất nhiều sự lựa chọn cho người dùng từ các khóa học miễn phí cho đến các khóa học trả phí Với những thao tác đơn giản người dùng có thể học tập theo một lộ trình được định sẵn, với những bài học dễ hiểu và dễ làm theo Và sau mỗi bài học đều sẽ có những bài tập để cho người dùng thực hành lại những gì đã học Quá trình học của người dùng luôn được lưu lại, mỗi lần người dùng vào lại thì có thể tiếp tục bài học mà mình đang học Trang web cũng giúp người dùng quản lý được những khóa học mình mà họ đang tham gia.

Với dự án “Website học tiếng Anh” có thể đáp ứng được phần nào nhu cầu học tiếng Anh của con người hiện nay.

Khảo sát một số phần mềm

Hình 2.4 Trang bài luyện tập

Hình 2.5 Trang quản lý tài khoản

Phân tích yêu cầu của dự án

Xây dựng ứng dụng để bán các sản phẩm nông sản trên nền tảng di động cho phép người dùng thực hiện lựa chọn, đặt hàng và thanh toán đơn hàng Bên cạnh đó là website để quản trị hệ thống bằng quyền Quản trị viên Các chức năng chính của chương trình bao gồm:

STT Tác nhân Chức năng

1 Admin - Quản lý khóa học

2 Giáo viên - Quản lý học viên

- Xem lịch sử hóa đơn

3 Học viên - Quản lý blog

- Quản lý danh sách từ

Bảng 2.2 Chức năng của từng tác nhân

Danh sách yêu cầu chức năng nghiệp vụ

STT Nội dung Mô tả chi tiết Ghi chú

1 Lưu trữ ▪ Khóa học: tên khóa học, tài liệu, giá.

▪ Bài học: tên bài học, loại bài học (học với giáo viên hoặc tự học)

▪ Bài tập: mã bài tập, tên bài tập, câu hỏi,câu trả lời

▪ Người dùng: thông tin cá nhân của người dùng

▪ Nhân viên: thông tin cá nhân của nhân viên

▪ Tài khoản: thông tin tài khoản của người dùng, nhân viên

▪ Quá trình học: thứ tự bài học, tình trạng, khóa học

▪ Hóa đơn khóa học (nếu khóa học có tính phí): người dùng, khóa học, phí, thời gian thanh toán, phương thức thanh toán

▪ Đánh giá: nội dung, người dùng, khóa học

▪ Blog: tiêu đề, hình ảnh, nội dung, comment

3 Thống kê ▪ Thống kê học viên

▪ Thống kê khóa học được học nhiều, học ít theo tháng

4 Giao tiếp ▪ Blog thảo luận

▪ Đặt câu hỏi dưới mỗi bài học

5 Tính toán ▪ Điểm bài tập

▪ Tính số lượng bài học đã học trong một

Bảng 2.3 Danh sách yêu cầu chức năng nghiệp vụ

Danh sách yêu cầu chức năng hệ thống

STT Nội dung Mô tả chi tiết Ghi chú

1 Phân quyền Quản trị viên: Quản lý nhân viên, Chương trình được sử dụng quản lý người dùng, phân quyền người cấp nhiều tài khoản dùng (User) gồm các

Nhân viên: được phép sử dụng các quyền: Người dùng, chức năng thêm và chỉnh sửa khóa học, Nhân viên, Quản trị bài học, bài tập, chủ đề, thống kê và xem viên. lịch sử học của người dùng Người dùng: Được quyền xem thông tin danh sách khóa học, quá trình học, các bài học đang học và mua khóa học

2 Sao lưu, Sao lưu thông tin và chỉ phục hồi khi back up, cần thiết. phục hồi thông tin

3 Tính điểm, Tính điểm của của người dùng sau khi đánh giá làm bài tập và từ đó đánh giá người dùng có đủ điều kiện để có thể qua bài học tiếp theo không.

4 Thông báo Nhắc nhở người dùng khi sắp tới giờ với người học theo lịch dùng

Bảng 2.4 Danh sách yêu cầu chức năng hệ thống

Danh sách yêu cầu phi chức năng

1 Tốc độ xử lý khi sử dụng Hiệu quả Một lần có thể cho nhiều tài trang web khoản vào học.

2 Linh hoạt trong thời gian, địa Hiệu quả Linh hoạt thời gian và địa điểm, thu hẹp không gian lưu điểm so với học trực tiếp. trữ, tránh thất lạc dữ liệu Dữ liệu được sao lưu trên máy, có thể dễ dàng phục hồi

3 Dễ dàng quản lý, kiểm soát Tiện dụng Người dùng chỉ cần vào quá trình học khóa học mà mình đang học, thì hệ thống sẽ tự hiện ra danh sách các bài học và các bài học được đánh dấu đã học hay chưa

4 Có thể thiết kế thêm theo yêu Tiến hóa Các doanh nghiệp, tổ chức cầu của doanh nghiệp, tổ có thể yêu cầu thêm tính chức năng hữu ích cho trang web của mình

5 Giao diện thân thiện, đơn Tiện dụng Khách hàng ở mọi lứa tuổi giản đều có thể dễ dàng sử dụng

6 Dễ thao tác Tiện dụng Các thao tác thêm và chỉnh sửa các khóa học, bài học đơn giản, gần gũi với nhân viên Và người học có thể dễ dàng tìm kiếm khóa học,học theo và làm bài tập một

MÔ HÌNH HÓA YÊU CẦU

Lược đồ Usecase

Hình 3.2 Usecase Quản lý tài khoản

Hình 3.3 Usecase Quản lý khóa học

Hình 3.4 Usecase quản lý Bài học

Hình 3.6 Usecase Quản lý thanh toán

Hình 3.7 Usecase Quản lý thanh toán

Brief Người dùng đăng nhập vào ứng dụng description

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

Post-conditions Nếu đăng nhập thành công người dùng được thực hiện các chức năng theo phân quyền

Basic flow Usecase bắt đầu khi người dùng thực hiện đăng nhập vào ứng dụng (Thành công) 1 Người dùng nhập Email và Mật khẩu

2 Hệ thống kiểm tra định dạng Email

3 Hệ thống xác thực Email và Mật khẩu

4 Hệ thống kiểm tra quyền của tài khoản

5 Người dùng đăng nhập thành công vào hệ thống

Alternative flow 2.1 Ứng dụng thông báo sai định dạng

(Thất bại) 2.2 Người dùng nhập lại Email và mật khẩu

3.1 Thông báo đăng nhập thất bại 3.2 Người dùng nhập lại thông tin đăng nhập 4.1 Thông báo tài khoản không có quyền 4.2 Người dùng nhập lại thông tin đăng nhập

Brief Học viên đăng ký tài khoản description

Pre-conditions Người dùng chưa có tài khoản trong hệ thống

Post-conditions Nếu đăng ký thành công: Người dùng được chuyển về trang đăng nhập

Basic flow Usecase bắt đầu khi người dùng thực hiện đăng nhập vào ứng dụng (Thành công) 1 Người dùng nhập email, mật khẩu, xác nhận mật khẩu, số điện thoại, tên và các thông tin khác

2 Hệ thống kiểm tra thông tin email

3 Hệ thống kiểm tra mật khẩu và xác nhận mật khẩu

4 Hệ thống tạo tài khoản cho người dùng.

5 Hệ thống gửi mail xác thực tài khoản

6 Người dùng xác thực tài khoản email

Alternative flow 2.1 Ứng dụng thông báo “Email không hợp lệ”

(Thất bại) 2.2 Ứng dụng thông báo “Email đã được sử dụng” Nếu email đã được đăng ký 3.1 Ứng dụng thông báo “Mật khẩu không giống nhau” nếu Mật khẩu và xác nhận mật khẩu không trùng nhau

Brief Người dùng đăng xuất description

Pre-conditions Người dùng đã đăng nhập vào hệ thống

Basic flow Usecase bắt đầu khi người dùng thực hiện đăng nhập vào ứng dụng (Thành công) 1 Hiển thị thông báo xác nhận thật sự muốn đăng xuất

2 Người dùng chọn nút đăng xuất

Alternative flow 1.1 Hệ thống ẩn hộp thoại thông báo và giữ nguyên trạng thái đăng (Thất bại) nhập nếu người dùng từ chối.

Brief Người dùng quên mật khẩu, khởi tạo lại mật khẩu description

Pre-conditions Đã có tài khoản

Basic flow Usecase bắt đầu khi người dùng thực hiện Quên mật khẩu

(Thành công) 1 Người dùng nhập email

2 Người dùng nhấn vào nút “Xác nhận”

3 Hệ thống kiểm tra email

4 Hệ thống gửi mật khẩu mới qua email của người dùng

Alternative flow 3.1 Nếu người dùng nhập sai định dạng email thì hiện thông báo (Thất bại) lỗi và về lại bước 1

3.1 Nếu người dùng nhập email không tồn tại trên hệ thống thì hiện thông báo lỗi và về lại bước 1.

Brief Người dùng khởi tạo lại mật khẩu description

Pre-conditions Người dùng đã đăng nhập vào ứng dụng

Basic flow Usecase bắt đầu khi người dùng thực hiện đổi mật khẩu

(Thành công) 1 Hiển thị biểu mẫu đổi mật khẩu

2 Người dùng nhập mật khẩu cũ.

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

4 Người dùng xác nhận mật khẩu mới.

5 Người dùng nhấn nút “Xác nhận”.

6 Hệ thống kiểm tra mật khẩu mới và xác nhận mật khẩu.

7 Hệ thống kiểm tra mật khẩu mới và mật khẩu cũ

8 Hệ thống kiểm tra mật khẩu cũ có trùng khớp với mật khẩu hiện tại.

9 Hệ thống thực hiện đổi mật khẩu

Alternative flow 6.1 Nếu mật khẩu mới và xác nhận mật khẩu không trùng nhau thì (Thất bại) hiển thị lỗi Trở về bước 2.

7.1 Nếu mật khẩu mới và mật khẩu cũ giống nhau thì quay về bước 2.

8.1 Nếu mật khẩu cũ không đúng thì hiển thị lỗi và quay về bước 2

3.1.6 Đổi thông tin cá nhân

Name Đổi thông tin cá nhân

Brief Người dùng đổi thông tin cá nhân description

Basic flow Usecase bắt đầu khi người dùng thực hiện đổi thông tin cá nhân (Thành công) 1 Hiển thị trang đổi thông tin cá nhân

2 Người dùng thực hiện nhập thông tin cá nhân mới cần chỉnh sửa

3 Người dùng nhấn nút “Cập nhật”

4 Hệ thống kiểm tra thông tin cá nhân mới

5 Thực hiện thay đổi thông tin

Alternative flow 3.1 Nếu người dùng để trống các trường bắt buộc thì hiển (Thất bại) thị thông báo ở ngay phía dưới trường đó

3.1.7 Xem thông tin cá nhân

Name Xem thông tin cá nhân

Brief Người dùng xem thông tin cá nhân description

Basic flow Usecase bắt đầu khi người dùng thực hiện xem thông tin cá nhân (Thành công) 1 Hệ thống kiểm tra đăng nhập

2 Hệ thống hiển thị thông tin cá nhân

3 Hệ thống hiển thị thông tin tài khoản

Brief Học viên đăng nhập vào ứng dụng description

Pre-conditions Học viên đã có tài khoản google

Basic flow Usecase bắt đầu khi học viên thực hiện đăng nhập vào ứng dụng (Thành công) 1 Người dùng chọn icon Google tại form đăng nhập

2 Hệ thống chuyển sang trang đăng nhập Google

3 Người dùng đăng nhập vào tài khoản Google

Alternative flow 4.1 Thông báo tài khoản không có quyền

(Thất bại) 4.2 Người dùng nhập lại thông tin đăng nhập

Brief Học viên đăng nhập vào ứng dụng description

Pre-conditions Học viên đã có tài khoản facebook

Basic flow Usecase bắt đầu khi học viên thực hiện đăng nhập vào ứng dụng (Thành công) 6 Người dùng chọn icon Facebook tại form đăng nhập

7 Hệ thống chuyển sang trang đăng nhập Facebook

8 Người dùng đăng nhập vào tài khoản Facebook

Alternative flow 4.1 Thông báo tài khoản không có quyền

(Thất bại) 4.2 Người dùng nhập lại thông tin đăng nhập

Brief Giáo viên muốn tạo khóa học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống

Basic flow Usecase bắt đầu khi giáo viên thực hiện thêm 1 khóa học

(Thành công) 1 Hệ thống hiển thị hộp thoại cho người dùng thêm khóa học

2 Người dùng nhập các thông tin của khóa học

4 Hệ thống kiểm tra thông tin nhập có hợp lệ hay không

5 Hệ thống lưu thông tin khóa học

Alternative flow 4.1 Nếu thông tin không hợp lệ, hệ thống thông báo lỗi và quay lại (Thất bại) bước 2.

Name Chỉnh sửa khóa học

Brief Giáo viên muốn chỉnh sửa một khóa học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và khóa học đã được tạo

Basic flow Usecase bắt đầu khi người dùng thực hiện chỉnh sửa 1 khóa học (Thành công) 1 Hệ thống hiển thị hộp thoại cho người dùng chỉnh sửa khóa học

2 Người dùng nhập các thông tin cần thay đổi

5 Cập nhật thông tin danh mục vào hệ thống

Brief Giáo viên xóa khóa học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và khóa học đã được tạo

Post-conditions Cập nhật danh sách khóa học

Basic flow Usecase bắt đầu khi người dùng thực hiện xóa khóa học

(Thành công) 1 Người dùng nhấn nút “Xóa”

2 Hệ thống thực hiện xóa khóa học

Alternative flow 2.1 Nếu xóa sản phẩm thất bại thì hệ thống báo lỗi.

3.1.13 Xem thông tin khóa học

Name Xem chi tiết khóa học

Brief Học viên xem chi tiết khóa học description

Pre-conditions Học viên đã đăng nhập

Post-conditions Hiển thị thông tin chi tiết

Basic flow Usecase bắt đầu khi học viên thực hiện xem chi tiết khóa học (Thành công) 1 Người dùng nhấn vào nút chi tiết của khóa học

2 Hệ thống hiển thị chi tiết khóa học

Extension point Học viên có thể mua ngay khóa học này

Brief Học viên mua khóa học description

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

Basic flow Usecase bắt đầu khi học viên thực hiện mua khóa học

(Thành công) 1 Người dùng nhấn nút “Mua”

2 Hệ thống hiển thị hộp thoại cho phép nhập thông tin người mua

3 Người dùng nhấn vào nút “Tiếp tục” để xác nhận đơn hàng

4 Hệ thống chuyển trang qua giao diện thanh toán bằng VNPay

5 Người dùng sử dụng VNPay để thanh toán

6 Hệ thống kiểm tra thanh toán

7 Hệ thống mở khóa khóa học

8 Hệ thống lưu đơn mua

Alternative flow 6.1 Ở bước này, người dùng thanh toán thất bại thì hệ thống báo (Thất bại) lỗi và quay về bước 2.

3.1.15 Thêm nhận xét khóa học

Name Thêm nhận xét khóa học

Brief Học viên thêm nhận xét khóa học description

Pre-conditions Học viên đã hoặc đang tham gia khóa học và đã đăng nhập thành công

Basic flow Usecase bắt đầu khi học viên thực hiện thêm nhận xét

(Thành công) 1 Người dùng nhập nội dung nhận xét

2 Người dùng nhấn nút “Đăng”

3 Hệ thống kiểm tra tài khoản đã hoặc đang tham gia khóa học chưa

4 Hệ thống hiển thị nhận xét

Alternative flow 4.1 Nếu tài khoản người dùng không hợp lệ thì thông báo tài (Thất bại) khoản không có quyền

3.1.16 Xem lịch sử đơn mua

Name Xem danh sách đơn mua

Brief Học viên/admin xem danh sách đơn mua description

Pre-conditions Người dùng đã đăng nhập thành công vào hệ thống

Basic flow Usecase bắt đầu khi học viên/admin thực hiện xem danh sách đơn (Thành công) mua

1 Hệ thống hiển thị danh sách đơn mua của học viên

2 Học viên xem các thông tin của từng đơn mua trong danh sách

Extension point Học viên có thể xem chi tiết đơn hàng trong usecase này

Brief Giáo viên muốn tạo bài học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và đã có khóa học

Basic flow Usecase bắt đầu khi giáo viên thực hiện thêm 1 bài học

(Thành công) 1 Hệ thống hiển thị hộp thoại cho người dùng thêm bài học

2 Người dùng nhập các thông tin của bài học

5 Hệ thống lưu thông tin khóa học

Brief Giáo viên muốn tạo bài tập description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và đã có bài học

Basic flow Usecase bắt đầu khi giáo viên thực hiện thêm bài tập

(Thành công) 1 Giáo viên chọn vào nút “Thêm bài tập”

2 Hệ thống hiển thị khung bài tập

3 Người dùng nhập các nội dung của bài tập

5 Hệ thống kiểm tra thông tin

6 Hệ thống thực hiện lưu nội dung bài tập

Alternative flow 5.1 Nếu nội dung không hợp lệ, hệ thống thông báo lỗi và quay lại (Thất bại) bước 2.

Name Chỉnh sửa bài học

Brief Giáo viên muốn chỉnh sửa một bài học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và bài học đã được tạo

Basic flow Usecase bắt đầu khi người dùng thực hiện chỉnh sửa 1 bài học (Thành công) 1 Hệ thống hiển thị hộp thoại cho người dùng chỉnh sửa bài học

2 Người dùng nhập các thông tin cần thay đổi

5 Cập nhật thông tin danh mục vào hệ thống

Brief Giáo viên xóa bài học description

Pre-conditions Giáo viên đã đăng nhập thành công vào hệ thống và bài học đã được tạo

Post-conditions Cập nhật danh sách bài học

Basic flow Usecase bắt đầu khi người dùng thực hiện xóa bài học

(Thành công) 1 Người dùng nhấn nút “Xóa”

2 Hệ thống thực hiện xóa bài học

Alternative flow 1.1 Nếu xóa sản phẩm thất bại thì hệ thống báo lỗi. (Thất bại)

Name Xem chi tiết bài học

Brief Học viên, giáo viên xem chi tiết bài học description

Actor(s) Học viên, giáo viên

Pre-conditions Học viên và giáo viên đã đăng nhập vào hệ thống.

Học viên đã tham gia khóa học

Basic flow Usecase bắt đầu khi học viên, giáo viên thực hiện xem chi tiết bài (Thành công) học

2 Người dùng double-click vào bài học

3 Hệ thống hiển thị chi tiết khóa học bao gồm: video của khóa học và mô tả khóa học.

Brief Học viên thực hiện làm bài tập description

Pre-conditions Học viên đã đăng nhập và đang tham gia học

Basic flow Usecase bắt đầu khi người dùng thực hiện làm bài tập

(Thành công) 1 Người dùng thực hiện làm bài tập theo kiểu trắc nghiệm

2 Người dùng nhấn nút “Nộp bài”

3 Hệ thống kiểm tra và tính số câu đúng bài tập đã làm

4 Hệ thống hiển thị số câu đúng

Name Đặt câu hỏi của bài học

Brief Học sinh muốn đặt câu hỏi cho bài học description

Pre-conditions Học sinh đã đăng nhập thành công vào hệ thống

Basic flow Usecase bắt đầu khi học viên thực hiện thêm thêm câu hỏi (Thành công) 1 Người dùng nhập nội dung câu hỏi

2 Người dùng nhấn nút “Đăng”

3 Hệ thống kiểm tra tài khoản đã hoặc đang tham gia khóa học chưa

4 Hệ thống hiển thị nhận xét

Brief Học sinh muốn luyện tập với các đề description

Basic flow Usecase bắt đầu khi học viên thực hiện luyện đề

(Thành công) 1 Học sinh chọn đề mà mình muốn luyện tập

2 Hệ thống hiển thị các phần của đề

3 Học sinh chọn các phần muốn làm và thời gian

4 Hệ thống hiển thị các câu hỏi

5 Học sinh bắt đầu làm bài Sau khi làm xong nhấn “Nộp bài”

6 Hệ thống tính điểm và lưu thông tin bài làm

3.1.25 Tạo danh sách từ ghi nhớ

Name Tạo danh sách từ ghi nhớ

Brief Học sinh muốn tạo danh sách từ ghi nhớ description

Basic flow Usecase bắt đầu khi học sinh thực hiện tạo danh sách từ ghi nhớ (Thành công) 1 Học sinh chọn biểu tượng tạo danh sách từ

2 Hệ thống hiển thị form nhập thông tin danh sách từ

3 Học sinh nhập thông tin danh sách từ

4 Hệ thống lưu danh sách

5 Học sinh chọn biểu tượng thêm từ mới

6 Hệ thống hiển thị form nhập thông tin từ

7 Học sinh nhập thông tin của từ

8 Hệ thống lưu thông tin của từ vào danh sách

Brief Người dùng tạo blog description

Pre-conditions Người dùng đã đăng nhập

Basic flow Usecase bắt đầu khi người dùng thực hiện thêm 1 blog

(Thành công) 1 Hệ thống hiển thị hộp thoại cho người dùng nhập nội dung bài tập

2 Người dùng nhập nội dung bài tập

3 Người dùng chọn tài liệu cho các phần câu hỏi

Alternative flow 5.1 Nếu thông tin không hợp lệ, thông báo lỗi và quay lại bước 2. (Thất bại)

Brief Admin tạo người dùng description

Pre-conditions Admin đã đăng nhập vào hệ thống

Basic flow Usecase bắt đầu khi admin tạo người dùng

(Thành công) 1 Hệ thống hiển thị hộp thoại cho admin nhập thông tin

3 Hệ thống kiểm tra thông tin email

4 Hệ thống kiểm tra mật khẩu và xác nhận mật khẩu

5 Hệ thống tạo tài khoản cho người dùng.

Alternative flow 3.1 Ứng dụng thông báo “Email không hợp lệ”

(Thất bại) 4.1 Ứng dụng thông báo “Mật khẩu không giống nhau” nếu Mật khẩu và xác nhận mật khẩu không trùng nhau

Brief Admin muốn xóa người dùng description

Pre-conditions Admin đã đăng nhập thành công vào hệ thống

Post-conditions Cập nhật danh sách người dùng

Basic flow Usecase bắt đầu khi admin thực hiện xóa người dùng (Thành công) 1 Người dùng chọn icon xóa

2 Hệ thống thực hiện xóa người dùng

Brief Admin xóa hóa đơn description

Pre-conditions Admin đã đăng nhập thành công vào hệ thống

Post-conditions Hệ thống cập nhật danh sách hóa đơn

Basic flow Usecase bắt đầu khi admin thực hiện xóa hóa đơn (Thành công) 1 Người dùng chọn icon xóa

2 Hệ thống xóa hóa đơn

3.1.30 Xem chi tiết hóa đơn

Name Xem chi tiết hóa đơn

Brief Admin xem chi tiết hóa đơn description

Basic flow Usecase bắt đầu khi admin thực hiện xem chi tiết hóa đơn (Thành công) 1 Người dùng double-click vào hóa đơn.

2 Hệ thống hiển thị chi tiết hóa đơn.

Brief Thống kê bằng các biểu đồ description

Pre-conditions Người dùng đã đăng nhập thành công vào hệ thống

Basic flow Usecase bắt đầu khi người dùng thực hiện xem thống kê

(Thành công) 1 Người dùng chọn ngày cần xem thống kê báo cáo,

2 Hệ thống hiển thị các thống kê các số liệu tương ứng với ngày đã chọn

THIẾT KẾ PHẦN MỀM

Lược đồ ERD

THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

Trang chủ

Hình 5.1 Màn hình trang chủ

Bảng 5.1 Mô tả màn hình trang chủ

STT Tên Loại Ghi chú

1 Khung menu NavLink Khi nhấn vào sẽ điều hướng tới trang tương ứng

2 Khung user Button Khi nhấn vào sẽ mở danh sách chứng năng của user

3 Khung menu user Tab bar item Khi nhấn vào sẽ hiển thị danh sách các các chứng năng của user

4 Nút chi tiết khóa học Button Khi nhấn vào sẽ điều hướng đến trang chi tiết khóa học

5 Nút thanh toán Button Khi nhấn vào sẽ điều hướng đến trang thanh toán khóa học

Đăng nhập

Bảng 5.2 Mô tả màn hình trang đăng nhập

1 Đăng ký Link Text Khi nhấn vào sẽ mở trang đăng ký

2 Nhập email đăng nhập Input text Nhập thông tin email đăng nhập

3 Đăng nhập Button Khi nhấn vào sẽ tiến hành thực hiện đăng nhập

4 Nhớ tài khoản Checkbox Khi nhấn vào để nhớ tài khoản

5 Quên mật khẩu Link Text Khi nhấn vào sẽ hiển thị biểu mẫu quên mật khẩu

6 Đăng ký tài khoản Link Text Khi nhấn vào sẽ hiển thị biểu mẫu đăng ký

7 Đăng nhập bằng Button Khi nhấn vào sẽ tiến hành đăng nhập bằng

7 Đăng nhập bằng Google Button Khi nhấn vào sẽ tiến hành đăng nhập bằng tài khoản google

Đăng ký

Hình 5.3 Màn hình trang đăng ký

Bảng 5.3 Mô tả màn hình trang đăng ký

1 Họ và tên Input text Nhập họ và tên

2 Họ và tên Input text Nhập họ và tên

3 Nhập email Input text Nhập thông tin email

4 Nhập số điện thoại Input text Nhập thông tin số điện thoại

4 Nhập mật khẩu đăng Password Nhập mật khẩu

7 Đồng ý điều khoản Checkbox Đồng ý điều khoản của công ty

Khi nhấn vào sẽ thực hiện kiểm tra các

8 Đăng ký Button trường được điền, nếu hợp lệ thì tiến hành đăng ký.

9 Đăng nhập Link Text Khi nhấn vào sẽ mở trang đăng nhập Đăng nhập bằng Button Khi nhấn vào sẽ tiến hành đăng nhập bằng

7 Đăng nhập bằng Google Button Khi nhấn vào sẽ tiến hành đăng nhập bằng tài khoản google

Chi tiết khóa học

Bảng 5.4 Mô tả màn hình trang tìm kiếm sản phẩm

2 Tên giảng viên, đánh giá Text

5 Nút thanh toán Button Khi nhấn thì thực hiện mua khóa học

6 Thông tin khóa học Text

7 Mô tả khóa học Text

8 Danh sách bài giảng List Item

9 Xem thử bài giảng miễn NavLink Khi ấn thì hiển thị bài giảng phí

11 Bình luận đánh giá khóa List Item học

12 Danh sách khóa học liên List Item Khi ấn thì đến trang chi tiết khóa học đó. quan

Trang khóa học của user đã mua

Hình 5.5 Màn hình danh sách khóa học của user

Bảng 5.5 Mô tả màn hình danh sách khóa học của user

1 Danh sách menu khóa NavLink Khi nhấn thì điều hướng tới trang tương học ứng.

2 Hình ảnh khóa học Link Khi nhấn thì điều hướng tới trang học khóa học.

4 Tên giảng viên phụ trách Text

Trang học chi tiết

Hình 5.6 Màn hình học khóa học

Bảng 5.6 Mô tả màn hình giỏ hàng

2 Danh sách bài giảng của List Item khóa học

3 Bài giảng khóa học Button Khi nhấn vào, sẽ đến bài giảng đó.

4 Danh sách menu liên Menu Item Khi nhấn vào thì sẽ hiển thị giao diện quan tới khóa học tương ứng.

5 Mô tả khóa học Text khóa học

8 Biểu mẫu ghi nhận đánh Text Input Thực hiện ghi nhận đánh giá của user. giá của user

9 Nút nhấn đăng đánh giá Button Khi nhấn vào thì thực hiện đăng đánh giá khóa học của user.

10 Đề bài câu hỏi của bài Audio hoặc giảng Image

11 Danh sách câu trả lời Radio Input Khi nhận lựa chọn đáp án của user. của câu hỏi

12 Nút nhấn nộp bài Button Khi nhấn vào thì thực hiện nộp bài.

Thay đổi thông tin user

Hình 5.7 Màn hình thay đổi thông tin user

Bảng 5.7 Mô tả màn hình thay đổi thông tin user

1 Hình đại diện user Image

4 Danh sách bài giảng của List Item khóa học

Danh sách menu liên Khi nhấn vào thì sẽ hiển thị giao diện

5 quan tới thay đổi thông Menu Item tương ứng. tin user

6 Biểu mẫu ghi nhận tên Text Input Thực hiện ghi nhận tên thay đổi của user. của user

7 Biểu mẫu ghi nhận Text Input Thực hiện ghi nhận email thay đổi của email của user user.

8 Biểu mẫu ghi nhận Text Input Thực hiện ghi nhận phone thay đổi của phone của user user.

9 Nút nhấn Lưu Button Khi nhấn vào thì thực hiện lưu thông tin.

Thay đổi ảnh đại diện user

Hình 5.8 Màn hình thay đổi ảnh đại diện user

Bảng 5.8 Mô tả màn hình thay đổi ảnh đại diện user

1 Chọn ảnh đại diện File Input Khi ấn vào thì thực diện thay đổi ảnh đại diện.

2 Nút lưu Button Khi ấn vào thì tiến hành lưu.

3 Ảnh vừa thay đổi Image Hiển thị ảnh vừa thay đổi

4 Bút bỏ chọn ảnh Button Khi ấn nào thì xóa thông tin ảnh vừa thay đổi

Thay đổi mật khẩu

Bảng 5.9 Mô tả màn hình thay đổi mật khẩu

1 Biểu mẫu ghi nhận Text Input email của user

2 Biểu mẫu ghi nhận mật Text Input Thực hiện ghi nhận mật khẩu hiện tại của khẩu hiện tại của user user.

3 Biểu mẫu ghi nhận mật Text Input Thực hiện ghi nhận mật khẩu mới thay đổi khẩu mới của user của user.

4 Biểu mẫu ghi nhận xác Text Input Thực hiện ghi nhận xác thực mật khẩu thay thực mật khẩu của user đổi của user.

Khóa tài khoản

Hình 5.10 Màn hình khóa tài khoản user

Bảng 5.10 Mô tả màn hình khóa tài khoản user

1 Cảnh báo khóa tài khoản Text

2 Nút đồng ý Button Khi nhấn vào sẽ hiện form khóa tài khoản.

4 Biểu mẫu ghi nhận mật Text Input Thực hiện ghi nhận mật khẩu hiện tại của khẩu hiện tại của user user.

5 Nút đồng ý tự nguyện Checkbox Khi nhấn vào đồng ý tự nguyện khóa tài khóa khoản.

6 Nút hủy Button Khi nhấn vào sẽ ẩn form khóa tài khoản.

7 Nút đồng ý Button Khi nhấn vào sẽ thực hiện khóa tài khoản.

Lịch sử mua hàng

Bảng 5.11 Mô tả màn hình lịch sử mua hàng

3 Ngày mua khóa học Label

6 Danh sách khóa học đã List Item mua

7 Khóa học mua cụ thể Button Khi nhấn vào di chuyển đến đơn hàng mua khóa học đó.

Quên mật khẩu

Hình 5.12 Màn hình quên mật khẩu

Bảng 5.12 Mô tả màn hình quên mật khẩu

2 Nút xác nhận Button Khi nhấn thực hiện gửi một mật khẩu mới tới email.

3 Nút quay lại Button Khi nhấn thực hiện gửi quay lại form đăng nhập.

Danh sách khóa học

Hình 5.13 Màn hình danh sách khóa học

Bảng 5.13 Mô tả màn hình danh sách khóa học

3 Ảnh đại diện giảng viên Text

5 Mục tiêu khóa học Text

6 Hình thức khóa học Text khóa học.

9 Nút đã mua Button Khi mua khóa học rồi thì không được mua

10 Nút mua khóa học Button Khi nhấn thì tiến hành mua khóa học.

11 Phân trang danh sách Text Hiển thị trang hiện tại và tổng số trang.

Chỉnh sửa thông tin cá nhân

Hình 5.14 Màn hình chỉnh sửa thông tin cá nhân

Bảng 5.14 Mô tả màn hình chỉnh sửa thông tin cá nhân

2 Họ và tên Input text

3 Số điện thoại Input text

4 Nút lưu Button Khi ấn vào lưu

Đổi mật khẩu

Hình 5.15 Màn hình đổi mật khẩu

Bảng 5.15 Mô tả màn hình đổi mật khẩu

2 Biểu mẫu ghi nhận mật Text Input Thực hiện ghi nhận mật khẩu hiện tại của

4 Biểu mẫu ghi nhận xác Text Input Thực hiện ghi nhận xác thực mật khẩu thay thực mật khẩu của user đổi của user.

Danh sách giảng viên

Hình 5.16 Màn hình danh sách giảng viên

Bảng 5.16 Mô tả màn hình danh sách giảng viên

4 Danh sách liên lạc qua Link Item Khi nhấn vào thì sẽ liên lạc đến đường link mạng xã hội cụ thể.

5.17 Trang chủ của ứng dụng quản lí của giáo viên

Hình 5.17 Màn hình trang chủ của ứng dụng quản lí của giáo viên

Bảng 5.17 Mô tả màn hình trang chủ của ứng dụng quản lí của giáo viên

1 Danh sách menu quản lí Menu item

2 Nút quản lí cụ thể Link Item Khi nhấn vào sẽ điều hướng tới trang tương ứng.

3 Thông tin giảng viên Widget Khi nhấn vào sẽ hiện danh sách chức năng của giảng viên.

4 Nút đóng Button Khi nhấn vào đóng danh sách chức năng. viên cụ thể

7 Nút đăng xuất Button Khi nhấn vào thì tiến hành đăng xuất và ra trang đăng nhập.

5.18 Quản lí bài giảng theo khóa học

Hình 5.18 Màn hình quản lí bài giảng theo khóa học

Bảng 5.18 Mô tả màn hình quản lí bài giảng theo khóa học

1 Chọn khóa học Select Khi chọn khóa học thì hiển thị bài giảng theo khóa học.

2 Thông tin bài giảng Table Item

3 Nút thêm bài giảng Button Khi nhấn vào sẽ hiển thị trang thêm bài giảng

4 Nút chi tiết Button Khi nhấn vào thì hiển thị giao diện chi tiết bài giảng (đề, bài tập)

Khi nhấn vào thì kiểm tra nếu đăng nhập

5 Nút xóa bài giảng Button google rồi thì tiến hành xóa, chưa thì hiển thị form đăng nhập google.

6 Nút chỉnh bài giảng Button Khi nhấn vào sẽ mở trang chỉnh sửa bài giảng.

8 Nút thêm bài tập Button Khi nhấn vào sẽ mở trang thêm bài tập.

9 Nút chỉnh sửa bài tập Button Khi nhấn vào sẽ mở trang chỉnh sửa bài tập.

10 Nút xóa bài tập Button Khi nhấn vào sẽ xóa bài tập.

11 Đề bài tập Audio hoặc

14 Nút đăng nhập Google Button Khi nhấn vào sẽ tiến hành đăng nhập google.

15 Nút đóng Button Khi nhấn vào sẽ đóng form.

Hình 5.19 Màn hình thêm bài giảng

Bảng 5.19 Mô tả màn hình thêm bài giảng

1 Tên bài giảng Input text

4 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí bài giảng.

5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài giảng.

5.20 Thêm bài tập theo bài giảng

Hình 5.20 Màn hình thêm bài tập cho bài giảng

Bảng 5.20 Mô tả màn hình thêm bài tập cho bài giảng

1 Tên bài tập Input text

5 Nút chọn làm đáp án Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng.

7 Nút thêm đáp án Button Khi nhấn vào sẽ thêm đáp án.

8 Nút thêm câu hỏi Button Khi nhấn vào sẽ thêm câu hỏi.

9 Nút thêm đề Button Khi nhấn vào sẽ thêm đề.

11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài tập.

Hình 5.21 Màn hình chỉnh sửa bài giảng

Bảng 5.21 Mô tả màn hình chỉnh sửa bài giảng

5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài giảng.

5.22 Chỉnh sửa bài tập theo bài giảng

Bảng 5.22 Mô tả màn hình chỉnh sửa bài tập cho bài giảng

5 Nút chọn làm đáp án Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng. đúng

6 Nút xóa đáp án Button Khi nhấn vào sẽ xóa đáp án.

11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài tập.

Hình 5.23 Màn hình báo cáo thống kê

Bảng 5.23 Mô tả màn hình báo cáo thống kê

6 Tỷ lệ doanh thu theo Text khóa học online

7 Tỷ lệ doanh thu theo Text khóa học với giảng viên

8 Tỷ lệ doanh thu theo sơ Chart đồ

9 Tỷ lệ doanh thu từng Chart khóa học theo ngày

10 Tổng doanh thu theo Chart ngày

11 Tỷ lệ học viên khóa học Chart theo ngày

12 Tỷ lệ học viên học khóa Chart học online

13 Tỷ lệ học viên học khóa Chart học với giảng viên

Hình 5.24 Màn hình quản lí khóa học

Bảng 5.24 Mô tả màn hình quản lí khóa học

2 Thông tin khóa học Table Item

3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa khóa học

4 Nút xóa khóa học Button Khi nhấn vào thì xóa bài giảng.

Hình 5.25 Màn hình thêm khóa học

Bảng 5.25 Mô tả màn hình thêm khóa học

2 Ảnh khóa học Image Hiển thị ảnh cho khóa học

3 Giáo viên phụ trách Select

4 Mức độ khóa học Select

7 Mô tả khóa học Input text

8 Nút thêm tài liệu khóa Button Khi nhấn thì tiến hành thêm tài liệu khóa học học

9 Tài liệu khóa học chi tiết List Item

11 Bút xóa tài liệu Button Khi nhấn thì khóa tài liệu

12 Nút hủy Button Khi nhấn vào sẽ quay lại trang quản lí khóa học.

13 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm khóa học.

Hình 5.26 Màn hình chỉnh sửa khóa học

Bảng 5.26 Mô tả màn hình chỉnh sửa khóa học

8 Nút thêm tài liệu khóa Button Khi nhấn thì tiến hành thêm tài liệu học khóa học

9 Tài liệu khóa học chi List Item tiết

Hình 5.27 Màn hình quản lí giảng viên

Bảng 5.27 Mô tả màn hình quản lí giảng viên

1 Nút thêm giảng viên Button Khi nhấn vào sẽ hiển thị form điền email của giảng viên.

2 Thông tin giảng viên Table Item

3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa giảng viên

4 Nút xóa giảng viên Button Khi nhấn vào thì xóa giảng viên.

5 Email của giảng viên Input Text

6 Nút đóng Button Khi nhấn vào thì đóng.

7 Nút hủy Button Khi nhấn vào thì đóng.

8 Nút xác nhận Button Khi nhấn vào thì gửi mail.

Bảng 5.28 Mô tả màn hình quản lý giảng viên

1 Gợi ý người dùng tạo Text Khi nhấn vào chuyển tới trang tạo blog blog

2 Đường dẫn đến chi tiết List item Khi nhấn vào chuyển tới trang chi tiết blog blog link

Hiển thị tác giả, ngày List text

3 tháng, bình luận của blog

5 Mô tả mục đích blog Text

Hình 5.29 Màn hình trang chi tiết blog

Bảng 5.29 Mô tả màn hình trang chi tiết blog

1 Biểu mẫu ghi nhận Input text Nhập comment comment của user

2 Button ghi nhận upload Input file Upload ảnh ảnh

3 Hiển thị ảnh user chọn Image

4 Nút xóa ảnh đã chọn Button Khi nhấn vào xóa phần hiển thị ảnh

5 Nội dung comment của Text comment của user

Hình 5.30 Màn hình trang tạo blog Bảng 5.30 Mô tả màn hình trang tạo blog

1 Biểu mẫu ghi nhận tiêu Input text Nhập tiêu đề blog dề blog của user

2 Biểu mẫu ghi nhận mô tả Input text Nhập mô tả blog blog của user

3 Khung upload ảnh Button Upload ảnh

4 Biểu mẫu ghi nội dung Button Nhập nội dung blog blog của user

5 Nút tạo blog Button Khi nhấn vào thì tạo blog và quay lại trang danh sách blog

Bảng 5.31 Mô tả màn hình danh sách flashcard

1 Biểu mẫu ghi tên Input text Nhập tên flashcard flashcard của user

2 Biểu mẫu ghi nhận mô tả Input text Nhập mô tả flashcard flashcard của user

3 Nút hủy bỏ Button Khi nhấn vào thì tắt modal

4 Nút thêm flashcard Button Khi nhấn thêm flashcard

5 Nút thêm flashcard Button Khi nhấn vào thì hiện modal biểu mẫu

6 Danh sách flashcard List item Khi nhấn vào thì chuyển đến trang chi tiết flashcard

7 Hiển thị dữ liệu phân Text trang

5.32 Danh sách từ vựng theo flashcard

Hình 5.32 Màn hình chỉnh sửa từ vựng

Bảng 5.32 Mô tả màn hình chỉnh sửa từ vựng

1 Tên flashcard của user Text

2 Nút chỉnh sửa flashcard Button Khi nhấn vào hiển thị modal chỉnh sửa

3 Nút xóa flashcard Button Khi nhấn hiển thị modal xóa

4 Nút thêm từ vựng Button Khi nhấn hiển thị modal thêm

5 Từ vựng của user Text

9 Nút xóa từ vựng Button Khi nhấn hiển thị modal xóa

10 Hiển thị phân trang Text

11 Biểu mẫu ghi tên từ Input text Nhập tên từ vựng vựng của user

12 Biểu mẫu ghi nghĩa từ Input text Nhập nghĩa từ vựng vựng của user

13 Nút thêm trường từ Button Khi nhấn hiển thị modal thêm trường vựng

14 Biểu mẫu tải ảnh từ Input file Tải ảnh từ vựng vựng của user

15 Biểu mẫu ghi định nghĩa Input text Nhập định nghĩa từ vựng từ vựng của user

16 Biểu mẫu ghi phiên âm Input text Nhập phiên âm từ vựng từ vựng của user

17 Biểu mẫu ghi ví dụ từ Input text Nhập ví dụ từ vựng vựng của user

18 Nút hủy bỏ Button Khi nhấn hủy bỏ thêm

19 Nút đồng ý Button Khi nhấn thêm từ vựng

Hình 5.33 Màn hình luyện tập flashcard

Bảng 5.33 Mô tả màn hình luyện tập flashcard

1 Nút quay lại Button Khi nhấn vào quay lại trang danh sách từ vựng

3 Nút quay lại từ vựng Button Khi nhấn hiển thị từ vựng trước trước

4 Nút quay lại từ vựng sau Button Khi nhấn hiển thị từ vựng sau

5 Số từ vựng đã học Text

6 Nút hiển thị chi tiết từ Button Khi nhấn vào hiển thị chi tiết vựng

8 Thông tin chi tiết từ List text vựng

5.34 Danh sách lịch sử làm bài thi

Hình 5.34 Màn hình danh sách lịch sử làm bài luyện thi

Bảng 5.34 Mô tả màn hình danh sách lịch sử làm bài luyện thi

1 Nút làm bài thi Button Khi nhấn vào chuyển tới trang danh sách đề luyện thi

2 Thông tin lịch sử làm bài List item thi

5 Thông tin làm bài Text

5.35 Chi tiết làm bài thi

Hình 5.35 Màn hình chi tiết lịch sử làm bài luyện thi

Mô tả màn hình chi tiết lịch sử làm bài luyện thi

1 Nút xem đáp án Button Khi nhấn vào chuyển tới phần đáp án

2 Nút quay lại Button Khi nhấn vào chuyển tới trang đề thi

4 Hiển thị câu làm Text

5 Hiển thị đáp án Text

6 Nút hiển thị chi tiết câu Button Khi nhấn vào hiển thị modal chi tiết hỏi

7 Hiển thị câu hỏi Text

9 Hiển thị đáp án đúng Text

10 Nút đóng hiển thị chi tiết Button Khi ấn vào thì đóng hiển thị chi tiết

Hình 5.36 Màn hình danh sách bài luyện thi

Bảng 5.36 Mô tả màn hình danh sách bài luyện thi

1 Thông tin bài thi List item

2 Thông tin chi tiết bài thi Text

3 Nút làm bài thi Button Khi ấn chuyển đến trang làm bài thi

5.37 Chọn chi tiết phần thi

Hình 5.37 Màn hình chi tiết chọn bài luyện thi

Bảng 5.37 Mô tả màn hình chi tiết chi tiết chọn bài luyện thi

1 Nút xem thông tin Button Khi nhấn vào chuyển tới phần thông tin

2 Nút xem đáp án Button Khi nhấn vào chuyển tới trang đáp án

5 Chọn phần làm bài Input Khi tích vào làm các phần đã tích

Hình 5.38 Màn hình làm bài luyện thi

Bảng 5.38 Mô tả màn hình làm bài luyện thi

1 Nút thoát làm bài Button Khi nhấn chuyển tới trang danh sách đề

2 Chuyển phần làm bài Button Khi nhấn vào chuyển tới phần làm bài đó

5 Chọn đáp án Input Radio Khi tích vào chọn đáp án

6 Nút tiếp theo Button Khi nhấn vào chuyển qua phần tiếp theo

8 Nút nộp bài Button Khi nhấn vào nộp bài thi

9 Câu hỏi List item Khi nhấn chuyển tới câu hỏi

Thêm bài giảng

Hình 5.19 Màn hình thêm bài giảng

Bảng 5.19 Mô tả màn hình thêm bài giảng

5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài giảng.

Thêm bài tập theo bài giảng

Hình 5.20 Màn hình thêm bài tập cho bài giảng

Bảng 5.20 Mô tả màn hình thêm bài tập cho bài giảng

5 Nút chọn làm đáp án Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng.

11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện thêm bài tập.

Hình 5.21 Màn hình chỉnh sửa bài giảng

Bảng 5.21 Mô tả màn hình chỉnh sửa bài giảng

5 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài giảng.

5.22 Chỉnh sửa bài tập theo bài giảng

Bảng 5.22 Mô tả màn hình chỉnh sửa bài tập cho bài giảng

5 Nút chọn làm đáp án Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng. đúng

6 Nút xóa đáp án Button Khi nhấn vào sẽ xóa đáp án.

11 Nút đồng ý Button Khi nhấn vào sẽ thực hiện chỉnh sửa bài tập.

Hình 5.23 Màn hình báo cáo thống kê

Bảng 5.23 Mô tả màn hình báo cáo thống kê

6 Tỷ lệ doanh thu theo Text khóa học online

7 Tỷ lệ doanh thu theo Text khóa học với giảng viên

8 Tỷ lệ doanh thu theo sơ Chart đồ

9 Tỷ lệ doanh thu từng Chart khóa học theo ngày

10 Tổng doanh thu theo Chart ngày

11 Tỷ lệ học viên khóa học Chart theo ngày

12 Tỷ lệ học viên học khóa Chart học online

13 Tỷ lệ học viên học khóa Chart học với giảng viên

Hình 5.24 Màn hình quản lí khóa học

Bảng 5.24 Mô tả màn hình quản lí khóa học

2 Thông tin khóa học Table Item

3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa khóa học

4 Nút xóa khóa học Button Khi nhấn vào thì xóa bài giảng.

Thêm khóa học

Hình 5.25 Màn hình thêm khóa học

Bảng 5.25 Mô tả màn hình thêm khóa học

8 Nút thêm tài liệu khóa Button Khi nhấn thì tiến hành thêm tài liệu khóa học học

9 Tài liệu khóa học chi tiết List Item

Chỉnh sửa khóa học

Hình 5.26 Màn hình chỉnh sửa khóa học

Bảng 5.26 Mô tả màn hình chỉnh sửa khóa học

8 Nút thêm tài liệu khóa Button Khi nhấn thì tiến hành thêm tài liệu học khóa học

9 Tài liệu khóa học chi List Item tiết

Quản lý giảng viên

Hình 5.27 Màn hình quản lí giảng viên

Bảng 5.27 Mô tả màn hình quản lí giảng viên

1 Nút thêm giảng viên Button Khi nhấn vào sẽ hiển thị form điền email của giảng viên.

2 Thông tin giảng viên Table Item

3 Nút chỉnh sửa Button Khi nhấn vào thì tới trang chỉnh sửa giảng viên

4 Nút xóa giảng viên Button Khi nhấn vào thì xóa giảng viên.

5 Email của giảng viên Input Text

6 Nút đóng Button Khi nhấn vào thì đóng.

7 Nút hủy Button Khi nhấn vào thì đóng.

8 Nút xác nhận Button Khi nhấn vào thì gửi mail.

Danh sách blog

Bảng 5.28 Mô tả màn hình quản lý giảng viên

1 Gợi ý người dùng tạo Text Khi nhấn vào chuyển tới trang tạo blog blog

2 Đường dẫn đến chi tiết List item Khi nhấn vào chuyển tới trang chi tiết blog blog link

Hiển thị tác giả, ngày List text

3 tháng, bình luận của blog

5 Mô tả mục đích blog Text

Chi tiết Blog

Hình 5.29 Màn hình trang chi tiết blog

Bảng 5.29 Mô tả màn hình trang chi tiết blog

1 Biểu mẫu ghi nhận Input text Nhập comment comment của user

2 Button ghi nhận upload Input file Upload ảnh ảnh

3 Hiển thị ảnh user chọn Image

4 Nút xóa ảnh đã chọn Button Khi nhấn vào xóa phần hiển thị ảnh

5 Nội dung comment của Text comment của user

Tạo Blog

Hình 5.30 Màn hình trang tạo blog Bảng 5.30 Mô tả màn hình trang tạo blog

1 Biểu mẫu ghi nhận tiêu Input text Nhập tiêu đề blog dề blog của user

2 Biểu mẫu ghi nhận mô tả Input text Nhập mô tả blog blog của user

3 Khung upload ảnh Button Upload ảnh

4 Biểu mẫu ghi nội dung Button Nhập nội dung blog blog của user

5 Nút tạo blog Button Khi nhấn vào thì tạo blog và quay lại trang danh sách blog

Tạo Flashcard

Bảng 5.31 Mô tả màn hình danh sách flashcard

1 Biểu mẫu ghi tên Input text Nhập tên flashcard flashcard của user

2 Biểu mẫu ghi nhận mô tả Input text Nhập mô tả flashcard flashcard của user

3 Nút hủy bỏ Button Khi nhấn vào thì tắt modal

4 Nút thêm flashcard Button Khi nhấn thêm flashcard

5 Nút thêm flashcard Button Khi nhấn vào thì hiện modal biểu mẫu

6 Danh sách flashcard List item Khi nhấn vào thì chuyển đến trang chi tiết flashcard

7 Hiển thị dữ liệu phân Text trang

Danh sách từ vựng theo flashcard

Hình 5.32 Màn hình chỉnh sửa từ vựng

Bảng 5.32 Mô tả màn hình chỉnh sửa từ vựng

1 Tên flashcard của user Text

2 Nút chỉnh sửa flashcard Button Khi nhấn vào hiển thị modal chỉnh sửa

3 Nút xóa flashcard Button Khi nhấn hiển thị modal xóa

4 Nút thêm từ vựng Button Khi nhấn hiển thị modal thêm

11 Biểu mẫu ghi tên từ Input text Nhập tên từ vựng vựng của user

12 Biểu mẫu ghi nghĩa từ Input text Nhập nghĩa từ vựng vựng của user

13 Nút thêm trường từ Button Khi nhấn hiển thị modal thêm trường vựng

14 Biểu mẫu tải ảnh từ Input file Tải ảnh từ vựng vựng của user

15 Biểu mẫu ghi định nghĩa Input text Nhập định nghĩa từ vựng từ vựng của user

16 Biểu mẫu ghi phiên âm Input text Nhập phiên âm từ vựng từ vựng của user

17 Biểu mẫu ghi ví dụ từ Input text Nhập ví dụ từ vựng vựng của user

18 Nút hủy bỏ Button Khi nhấn hủy bỏ thêm

19 Nút đồng ý Button Khi nhấn thêm từ vựng

Luyện tập flashcard

Hình 5.33 Màn hình luyện tập flashcard

Bảng 5.33 Mô tả màn hình luyện tập flashcard

1 Nút quay lại Button Khi nhấn vào quay lại trang danh sách từ vựng

3 Nút quay lại từ vựng Button Khi nhấn hiển thị từ vựng trước trước

4 Nút quay lại từ vựng sau Button Khi nhấn hiển thị từ vựng sau

5 Số từ vựng đã học Text

6 Nút hiển thị chi tiết từ Button Khi nhấn vào hiển thị chi tiết vựng

8 Thông tin chi tiết từ List text vựng

Danh sách lịch sử làm bài thi

Hình 5.34 Màn hình danh sách lịch sử làm bài luyện thi

Bảng 5.34 Mô tả màn hình danh sách lịch sử làm bài luyện thi

1 Nút làm bài thi Button Khi nhấn vào chuyển tới trang danh sách đề luyện thi

2 Thông tin lịch sử làm bài List item thi

Chi tiết làm bài thi

Hình 5.35 Màn hình chi tiết lịch sử làm bài luyện thi

Mô tả màn hình chi tiết lịch sử làm bài luyện thi

1 Nút xem đáp án Button Khi nhấn vào chuyển tới phần đáp án

2 Nút quay lại Button Khi nhấn vào chuyển tới trang đề thi

4 Hiển thị câu làm Text

6 Nút hiển thị chi tiết câu Button Khi nhấn vào hiển thị modal chi tiết hỏi

7 Hiển thị câu hỏi Text

9 Hiển thị đáp án đúng Text

10 Nút đóng hiển thị chi tiết Button Khi ấn vào thì đóng hiển thị chi tiết

Danh sách đề thi

Hình 5.36 Màn hình danh sách bài luyện thi

Bảng 5.36 Mô tả màn hình danh sách bài luyện thi

1 Thông tin bài thi List item

2 Thông tin chi tiết bài thi Text

3 Nút làm bài thi Button Khi ấn chuyển đến trang làm bài thi

Chọn chi tiết phần thi

Hình 5.37 Màn hình chi tiết chọn bài luyện thi

Bảng 5.37 Mô tả màn hình chi tiết chi tiết chọn bài luyện thi

1 Nút xem thông tin Button Khi nhấn vào chuyển tới phần thông tin

2 Nút xem đáp án Button Khi nhấn vào chuyển tới trang đáp án

5 Chọn phần làm bài Input Khi tích vào làm các phần đã tích

Làm bài thi

Hình 5.38 Màn hình làm bài luyện thi

Bảng 5.38 Mô tả màn hình làm bài luyện thi

1 Nút thoát làm bài Button Khi nhấn chuyển tới trang danh sách đề

2 Chuyển phần làm bài Button Khi nhấn vào chuyển tới phần làm bài đó

5 Chọn đáp án Input Radio Khi tích vào chọn đáp án

6 Nút tiếp theo Button Khi nhấn vào chuyển qua phần tiếp theo

8 Nút nộp bài Button Khi nhấn vào nộp bài thi

9 Câu hỏi List item Khi nhấn chuyển tới câu hỏi

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Cài đặt

● Phần mềm Intellij IDEA 2022.0.1 trở lên

● Tải và giải nén thư mục chứa Project Backend

● Mở bằng Project bằng Intellij IDEA

Hình 6.2 Màn hình trang tải Visual Studio Code https://code.visualstudio.com/docs/setup/setup-overview

❖ Cài đặt biến môi trường để chạy Visual Studio

Hình 6.4 Cài trình biên dịch Visual Studio Code

● Cài đặt các extension cho Visual Studio Code:

Hình 6.5 Cài các extension cho Reactjs

● Tiến hành vô từng project và chạy lệnh yarn add install-peers để tải các package sử dụng trong dự án:

Hình 6.7 Tải các package sử dụng trong dự án

● Chạy lệnh yarn dev host để khởi động dự án:

Hình 6.8 Khởi động dự án admin

Hình 6.9 Khởi động dự án teacher

Hình 6.10 Khởi động dự án user

6.2.1 Các chức năng quản lý tài khoản

Bảng 6.1 Kiểm thử các chức năng quản lý tài khoản thực về email

Sau khi người dùng nhấn vào đường dẫn

3 Xác thực email trong email xác thực thì có thể đăng Pass nhập vào ứng dụng

4 Đổi mật khẩu Đổi mật khẩu thành công khi người dùng Pass cung cấp đúng mật khẩu cũ

Gửi email đổi mật khẩu về tài khoản

5 Quên mật khẩu email đã đăng ký Pass

Có thể đăng nhập bằng mật khẩu mới.

6 Đổi thông tin cá nhân Thông tin cá nhân của người dùng thay Pass đổi thành công

7 Tạo tài khoản ở trang Tạo tài khoản đúng phân quyền Pass admin

6.2.2 Các chức năng quản lý khóa học, bài học

Bảng 6.2 Kiểm thử các chức năng khóa học, bài học

STT Testcase Kết quả mong đợi Kết quả

1 Tạo khóa học Khóa học đã được tạo và cập nhật bên Pass phần người dùng

2 Chỉnh sửa khóa học Thông tin khóa học được cập nhật Pass

3 Tạo bài học Bài học được tạo và cập nhật bên phần Pass người dùng

4 Thêm nội dung vào bài Bài học được cập nhật thêm nội dung Pass học

5 Tạo lịch học cho khóa Lịch học được lưu và gửi lịch học cho Pass học các học viên

6 Thay đổi lịch học Lịch học được thay đổi và cập nhật lịch Pass học cho học viên

7 Tạo bài kiểm tra Bài kiểm tra được thêm vào khóa học Pass

8 Thêm học sinh vào khóa Danh sách học sinh được cập nhật Pass học

6.2.3 Các chức năng quản lý blog, bình luận

Bảng 6.3 Kiểm thử các chức năng quản lý blog, bình luận

1 Tạo blog Blog đã được tạo và cập nhật tại trang Pass blog

2 Chỉnh sửa blog Nội dung blog được cập nhật Pass

3 Tạo bình luận Bình luận được tạo và hiển thị Pass

4 Chỉnh sửa bình luận Nội dung bình luận được cập nhật Pass

5 Yêu thích blog Hiển thị được đã like Pass

6.2.4 Các chức năng quản lý danh sách từ

Bảng 6.4 Kiểm thử các chức năng quản lý danh sách từ

2 Chỉnh sửa thông tin Thông tin của danh sách từ được cập Pass danh sách từ nhật

3 Thêm từ mới vào danh Từ mới đã được thêm vào danh sách Pass sách

4 Chỉnh sửa thông tin từ Thông tin của từ đã được cập nhật Pass

5 Xóa từ khỏi danh sách Từ đã được xóa khỏi danh sách Pass

6.2.5 Các chức năng quản lý đề luyện tập

Bảng 6.5 Kiểm thử các chức năng quản lý đề luyện tập

1 Tạo đề luyện tập Đề luyện tập đã được tạo và cập nhật tại Pass trang danh sách đề

2 Chỉnh sửa đề luyện tập Thông tin và nội dung của đề được cập Pass nhật

3 Làm bài Kết quả và quá trình làm bài được lưu lại Pass và hiển thị ra giao diện

6.2.6 Các chức năng quản lý hóa đơn, đánh giá

Bảng 6.6 Kiểm thử các chức năng quản lý danh mục, sản phẩm

1 Mua khóa học Học sinh có thể tham gia khóa học, hóa Pass đơn mua khóa học đã được lưu

2 Chỉnh sửa đơn hàng Thông tin đơn hàng được cập nhật Pass

3 Thêm đánh giá Đánh giá được thêm dưới trong phần chi Pass

4 Chỉnh sửa đánh giá Chỉnh sửa nội dung đánh giá Pass

5 Xóa đánh giá Đánh giá được xóa và không còn hiển thị Pass trong phần đánh giá

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

Về kiến thức, mỗi thành viên của nhóm đã học hỏi và trau dồi được thêm rất nhiều cho chính bản thân mình.

● Hiểu được rõ cách viết các APIs và phát triển server backend bằng Spring Framework và hệ quản trị cơ sở dữ liệu MySQL.

● Phát triển phần mềm bằng ngôn ngữ Reactjs để viết các ứng dụng tương thích với các platform khác nhau và cả trang web.

● Học được thêm cách xây dựng một dự án thực tiễn.

● Học được cách xây dựng một project Spring Framework và ReactJS.

● Rèn luyện và nâng cao kỹ năng debug và giải quyết lỗi.

● Học và tiếp thu được nhiều kiến thức mới.

● Rèn luyện kỹ năng làm việc nhóm, giải quyết vấn đề chung.

● Nâng cao tư duy phản biện, kỹ năng giao tiếp giữa các thành viên trong nhóm.

● Cải thiện khả năng tự học, tự nghiên cứu để giải quyết khó khăn.

● Rèn luyện kỹ năng quản lý thời gian để thực hiện đúng tiến độ mà không bị ảnh hưởng bởi nhiều yếu tố khác nhau.

● Học thêm được kỹ năng quản lý dự án.

Sau khi thực hiện đề tài nhóm đã có được:

● Website dành cho học viên có thể tham gia học.

● Website dành cho giáo viên có thể tạo và dạy học.

● Website dành cho admin để quản lý dữ liệu.

● Các tài liệu báo cáo, sơ đồ, lược đồ miêu tả.

● Kinh nghiệm lập trình website bằng Spring Framework và ReactJS.

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

● Project được xây dựng một cách có hệ thống có thể dễ dàng mở rộng.

● Giao diện thân thiện với người dùng, người dùng có thể dễ dàng sử dụng.

● Hệ thống đáp ứng được các tính năng cơ bản của một hệ thống học tập và hoạt động ổn định.

● Hiện tại, chỉ đáp ứng được những tính năng cơ bản, chưa có thêm những tính năng mới để tăng trải nghiệm người dùng

● Một số tính năng chỉ mới ở mức sử dụng được vẫn chưa tối ưu một cách tốt nhất.

● Dễ dàng tiếp cận và phát triển phần mềm do đã có kinh nghiệm lập trình với Spring Boot cũng như ReactJS Core và MySQL.

● Nhờ có sự hướng dẫn nhiệt tình của thầy Nguyễn Hữu Trung cũng như các thầy cô trong Khoa Công Nghệ Thông Tin trường Đại học Sư Phạm Kỹ Thuật giúp đỡ nhóm trong thời gian thực hiện đề tài.

● Kinh nghiệm của nhóm về Spring Framework và ReactJS vẫn còn khá ít, nên gặp khá nhiều vấn đề, giải quyết một số vấn đề vẫn còn hạn chế và mất khá nhiều thời gian.

● Việc kết hợp giữa BackEnd và FrontEnd cũng gặp một vài khó khăn mặc dù đã thảo luận và đưa ra những yêu cầu chức năng từ trước.

● Hiểu biết và kinh nghiệm về đề tài này còn ít nên nhóm có một vài khó khăn khi xác định luồng làm việc của các tính năng cũng như việc hiện thực nó theo đúng logic trong code.

● Nâng cấp và bổ sung các tính năng để tăng hiệu suất và trải nghiệm người dùng.

● Cải thiện hiệu suất, sửa lỗi và ứng dụng các công nghệ mới vào đề tài.

[1] Spring framework là gì? https://laptrinhjavaweb.com/spring-framework-la-gi-56

[2] Giới thiệu Spring Framework, Techmaster Team, 4/7/2011 https://techmaster.vn/posts/36080/spring-la-gi-gioi-thieu-spring-framwork-trong-java- spring-phan-1

[3] React JS, ubidreams https://ubidreams.fr/en/expertises/development/react-js

[4].React là gì, FPT Aptech https://aptech.fpt.edu.vn/reactjs-la-gi.html

[5] MySQL là gì tại sao nên sử dụng https://bizflycloud.vn/tin-tuc/mysql-la-gi-tai-sao-nen-su-dung-mysql-

[6] MySQL là gì hướng dẫn toàn tập về https://wiki.matbao.net/mysql-la-gi-huong-dan-toan-tap-ve-mysql/

[7] Báo Cáo Mẫu, Nguyễn Trường An – Giang Thiệu Quân https://docs.google.com/document/d/1oc1vsIUwo7cDvZgSDYI2h0B3T511E6iI/edit?u sp=sharing&ouid6910716433953849962&rtpof=true&sd=true

[8] MySQL, Oracle, 11/12/2021, https://www.mysql.com

NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

2 Ưu điểm và nhược điểm

DANH SÁCH TÀI LIỆU THAM KHẢO

STT Thời gian Công việc

1 10/03/2023 Tổng hợp các chức năng của website đến Xây dựng mô hình dự án thông qua các lược đồ

2 19/03/2023 Xây dựng database phù hợp với các chức năng đến Thiết kế UI cho website

3 27/03/2023 Xây dựng UI cho học sinh

Xây dựng API phục vụ các chức năng cho học sinh đến như: Mua khóa học, tham gia các bài học, luyện đề, viết blog…

6 23/04/2023 Xây dựng UI cho giáo viên đến Xây dựng API phục vụ các chức năng cho giáo viên

16/05/2023 như: Quản lý khóa học, quản lý bài học…

7 17/05/2022 Xây dựng UI cho admin đến Xây dựng API phục vụ các chức năng như: quản lý

11/06/2023 người dùng, quản lý giao dịch…

8 12/06/2023 Tiến hành kết hợp giữa Back-end và Front-end đến

9 28/06/2023 Tiến hành tìm lỗi và sửa lỗi đến Tiến hành viết báo cáo

10 10/07/2023 Hoàn thành báo cáo và hoàn chỉnh hệ thống đến

Ngày 08 tháng 03 năm 2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương

Nguyễn Hữu Trung Nguyễn Phúc Nghiêm

LỜI CẢM ƠN 1 ĐỀ CƯƠNG LUẬN VĂN 2

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 14

CHƯƠNG 1.CƠ SỞ LÝ THUYẾT 15

CHƯƠNG 2 KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 18

2.2 Khảo sát một số phần mềm 19

2.3 Phân tích yêu cầu của dự án 23

2.4 Danh sách yêu cầu chức năng nghiệp vụ 23

2.5 Danh sách yêu cầu chức năng hệ thống 25

2.6 Danh sách yêu cầu phi chức năng 25

CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 27

CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 64

CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 77

5.5 Trang khóa học của user đã mua 84

5.7 Thay đổi thông tin user 87

5.8 Thay đổi ảnh đại diện user 89

5.14 Chỉnh sửa thông tin cá nhân 97

5.17 Trang chủ của ứng dụng quản lý của giáo viên 100

5.18 Quản lý bài giảng theo khóa học 102

5.20 Thêm bài tập theo bài giảng 106

5.32 Danh sách từ vựng theo flashcard 122

5.34 Danh sách lịch sử làm bài thi 126

5.35 Chi tiết làm bài thi 127

5.37 Chọn chi tiết phần thi 130

CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 132

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 140

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 141

5 HƯỚNG PHÁT TRIỂN 141TÀI LIỆU THAM KHẢO 143

Hình 2.4 Trang bài luyện tập 22

Hình 2.5 Trang quản lý tài khoản 22

Hình 3.2 Usecase Quản lý tài khoản 28

Hình 3.3 Usecase Quản lý khóa học 29

Hình 3.4 Usecase quản lý Bài học 30

Hình 3.5 Usecase quản lý người dùng 30

Hình 4.1 Lược đồ tuần tự đăng ký 64

Hình 4.2 Lược đồ tuần tự đăng nhập 65

Hình 4.3 Lược đồ tuần tự chỉnh sửa thông tin cá nhân 66

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

Hình 4.5 Lược đồ tuần tự tạo khóa học 68

Hình 4.6 Lược đồ tuần tự tạo bài học 69

Hình 4.7 Lược đồ tuần tự tạo bài tập 70

Hình 4.8 Lược đồ tuần tự tạo đề 71

Hình 4.9 Lược đồ tuần tự luyện đề 72

Hình 4.12 Lược đồ tuần tự mua khóa học 75

Hình 5.1 Màn hình trang chủ 77

Hình 5.4 Màn hình trang tìm kiếm sản phẩm 82

Hình 5.5 Màn hình danh sách khóa học của user 84

Hình 5.6 Màn hình học khóa học 86

Hình 5.7 Màn hình thay đổi thông tin user 87

Hình 5.8 Màn hình thay đổi ảnh đại diện user 89

Hình 5.9 Màn hình thay đổi mật khẩu 90

Hình 5.10 Màn hình khóa tài khoản user 92

Hình 5.11 Màn hình lịch sử mua hàng 93

Hình 5.12 Màn hình quên mật khẩu 95

Hình 5.13 Màn hình danh sách khóa học 96

Hình 5.14 Màn hình chỉnh sửa thông tin cá nhân 97

Hình 5.15 Màn hình đổi mật khẩu 98

Hình 5.16 Màn hình danh sách giảng viên 99

Hình 5.17 Màn hình trang chủ của ứng dụng quản lí của giáo viên 100

Hình 5.18 Màn hình quản lí bài giảng theo khóa học 103

Hình 5.19 Màn hình thêm bài giảng 105

Hình 5.20 Màn hình thêm bài tập cho bài giảng 106

Hình 5.21 Màn hình chỉnh sửa bài giảng 107

Hình 5.22 Màn hình chỉnh sửa bài tập cho bài giảng 108

Hình 5.23 Màn hình báo cáo thống kê 109

Hình 5.24 Màn hình quản lí khóa học 111

Hình 5.25 Màn hình thêm khóa học 112

Hình 5.26 Màn hình chỉnh sửa khóa học 114

Hình 5.27 Màn hình quản lí giảng viên 116

Hình 5.28 Màn hình trang danh sách blog 117

Hình 5.29 Màn hình trang chi tiết blog 119

Hình 5.30 Màn hình trang tạo blog 120

Hình 5.36 Màn hình danh sách bài luyện thi 129

Hình 5.37 Màn hình chi tiết chọn bài luyện thi 130

Hình 5.38 Màn hình làm bài luyện thi 131

Hình 6.2 Màn hình trang tải Visual Studio Code 133

Hình 6.4 Cài trình biên dịch Visual Studio Code 134

Hình 6.5 Cài các extension cho Reactjs 134

Hình 6.7 Tải các package sử dụng trong dự án 135

Hình 6.8 Khởi động dự án admin 136

Hình 6.9 Khởi động dự án teacher 136

Hình 6.10 Khởi động dự án user 136

Bảng 2.1 Chức năng và hạn chế của FoodHub 22

Bảng 2.2 Chức năng của từng tác nhân 23

Bảng 2.3 Danh sách yêu cầu chức năng nghiệp vụ 24

Bảng 2.4 Danh sách yêu cầu chức năng hệ thống 25

Bảng 2.5 Danh sách yêu cầu phi chức năng 26

Bảng 5.1 Mô tả màn hình trang chủ 78

Bảng 5.2 Mô tả màn hình trang đăng nhập 79

Bảng 5.3 Mô tả màn hình trang đăng ký 80

Bảng 5.4 Mô tả màn hình trang tìm kiếm sản phẩm 82

Bảng 5.5 Mô tả màn hình danh sách khóa học của user 84

Bảng 5.6 Mô tả màn hình giỏ hàng 86

Bảng 5.7 Mô tả màn hình thay đổi thông tin user 87

Bảng 5.8 Mô tả màn hình thay đổi ảnh đại diện user 89

Bảng 5.9 Mô tả màn hình thay đổi mật khẩu 90

Bảng 5.10 Mô tả màn hình khóa tài khoản user 92

Bảng 5.11 Mô tả màn hình lịch sử mua hàng 93

Bảng 5.12 Mô tả màn hình quên mật khẩu 95

Bảng 5.13 Mô tả màn hình danh sách khóa học 96

Bảng 5.14 Mô tả màn hình chỉnh sửa thông tin cá nhân 97

Bảng 5.15 Mô tả màn hình đổi mật khẩu 98

Bảng 5.16 Mô tả màn hình danh sách giảng viên 99

Bảng 5.17 Mô tả màn hình trang chủ của ứng dụng quản lí của giáo viên 100

Bảng 5.18 Mô tả màn hình quản lý bài giảng theo khóa học 103

Bảng 5.19 Mô tả màn hình thêm bài giảng 105

Bảng 5.20 Mô tả màn hình thêm bài tập cho bài giảng 106

Bảng 5.21 Mô tả màn hình chỉnh sửa bài giảng 107

Bảng 5.29 Mô tả màn hình trang chi tiết blog 119

Bảng 5.30 Mô tả màn hình trang tạo blog 120

Bảng 5.31 Mô tả màn hình danh sách flashcard 121

Bảng 5.32 Mô tả màn hình chỉnh sửa từ vựng 123

Bảng 5.33 Mô tả màn hình luyện tập flashcard 125

Bảng 5.34 Mô tả màn hình danh sách lịch sử làm bài luyện thi 126

Bảng 5.35 Mô tả màn hình chi tiết lịch sử làm bài luyện thi 128

Bảng 5.36 Mô tả màn hình danh sách bài luyện thi 129

Bảng 5.37 Mô tả màn hình chi tiết chi tiết chọn bài luyện thi 130

Bảng 5.38 Mô tả màn hình làm bài luyện thi 131

Bảng 6.1 Kiểm thử các chức năng quản lý tài khoản 136

Bảng 6.2 Kiểm thử các chức năng khóa học, bài học 137

Bảng 6.3 Kiểm thử các chức năng quản lý blog, bình luận 138

Bảng 6.4 Kiểm thử các chức năng quản lý danh sách từ 138

Bảng 6.5 Kiểm thử các chức năng quản lý đề luyện tập 138

Bảng 6.6 Kiểm thử các chức năng quản lý danh mục, sản phẩm 139

1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Trong thời đại mà mà cuộc sống của mỗi người đã và đang được tiếp cận với sự phát triển vượt bậc và nhanh chóng của khoa học và công nghệ Một thời đại mà ứng dụng của công nghệ thông tin được tìm thấy ở khắp mọi nơi và chỉ cần có mạng internet đã có thể thực hiện được hầu như mọi thứ Vì thế chúng em đã quyết định thực hiện đề tài “Xây dựng Website học tiếng Anh sử dụng Spring Framework và

ReactJS” bởi vì các động lực sau.

Ta có thể thấy, ở thời điểm hiện tại tình hình dịch Covid – 19 ở nước ta đang ở đã giảm bớt phần nào nhưng việc tập trung vẫn có thể đem lại nhiều rủi ro Bên cạnh đó, xã hội ngày nay phát triển một cách nhanh chóng, mọi người luôn bận rộn các công việc cá nhân của bản thân Vì vậy, mọi người luôn phải tranh thủ từng phút từng giây để nâng cao gian đi lại Và đồng thời website này cũng là nơi để cho người dùng có thể tìm kiếm các khóa học đúng như mong muốn một cách dễ dàng.

● Xây dựng website cho học viên có thể học online, giáo viên có thể xây dựng khóa học và dạy học online và dành cho quản trị quản trị viên quản trị cơ sở dữ liệu.

● Vận dụng thành các công công nghệ mới, ngôn ngữ lập trình hiện đại vào để xây dựng website của đề tài.

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu các thư viện hỗ trợ cho đề tài ở ReactJS

● Tìm hiểu về framework, ở đây là Spring Framework

Tham khảo các ứng dụng đang được sử dụng trên thị trường

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Spring Framework