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

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

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

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 như: Mua khóa học, tham gia các bài học, luyện đề, viết blog…

Xây dựng UI cho giáo viên

Xây dựng API phục vụ các chức năng cho giáo viên như: Quản lý khóa học, quản lý bài học…

Xây dựng UI cho admin

Xây dựng API phục vụ các chức năng như: quản lý người dùng, quản lý giao dịch…

Tiến hành kết hợp giữa Back-end và Front-end

Tiến hành tìm lỗi và sửa lỗi Tiến hành viết báo cáo

Hoàn thành báo cáo và hoàn chỉnh hệ thống

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

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.22.Chỉnh sửa bài tập theo bài giảng 108

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.2 Màn hình trang đăng nhập 78

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

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.31 Màn hình danh sách flashcard 121

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

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

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

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.22 Mô tả màn hình chỉnh sửa bài tập cho bài giảng 108

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

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

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

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

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 trình bày kiểm thử các chức năng quản lý blog và bình luận, trong khi Bảng 6.4 tập trung vào kiểm thử các chức năng quản lý danh sách từ Bảng 6.5 kiểm thử các chức năng quản lý đề luyện tập, và cuối cùng, Bảng 6.6 kiểm thử các chức năng quản lý danh mục và sản phẩm.

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

Trong thời đại hiện nay, sự phát triển nhanh chóng của khoa học và công nghệ đã ảnh hưởng sâu sắc đến cuộc sống của con người Ứng dụng công nghệ thông tin hiện diện khắp nơi, cho phép thực hiện hầu như mọi hoạt động chỉ với một kết nối internet Chính vì vậy, chúng em đã quyết định thực hiện đề tài này.

“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

Hiện nay, tình hình dịch Covid-19 ở nước ta đã giảm bớt, nhưng việc tập trung vẫn tiềm ẩn nhiều rủi ro Trong bối cảnh xã hội phát triển nhanh chóng, mọi người luôn bận rộn với công việc cá nhân, dẫn đến việc cần tận dụng từng phút để nâng cao bản thân Vì vậy, nhóm chúng tôi đã đề xuất ý tưởng giúp mọi người có thể học tập mọi lúc, mọi nơi một cách phù hợp với bản thân mà không tốn chi phí và thời gian.

Website này cung cấp 14 gian đi lại, đồng thời là nơi lý tưởng cho người dùng tìm kiếm các khóa học phù hợp với mong muốn của họ một cách dễ dàng.

Xây dựng một website cho phép học viên học online, trong khi giáo viên có thể tạo khóa học và giảng dạy trực tuyến Đồng thời, nền tảng này cũng hỗ trợ quản trị viên trong việc quản lý cơ sở dữ liệu hiệu quả.

● 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 ứng dụng Java phổ biến, được hàng triệu lập trình viên tin dùng Nó hỗ trợ tạo ra các ứng dụng hiệu năng cao, dễ dàng kiểm thử và tối ưu hóa việc sử dụng lại mã nguồn.

Spring là một framework mã nguồn mở nhẹ, chỉ khoảng 2MB, và hoạt động một cách trong suốt với lập trình viên Nó được phát triển và chia sẻ bởi một cộng đồng người dùng rộng lớn, mang lại nhiều lợi ích cho việc phát triển phần mềm.

Spring Framework được phát triển dựa trên hai nguyên tắc thiết kế chính: Dependency Injection và Aspect Oriented Programming Các tính năng cốt lõi của Spring cho phép phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua 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ấu hình ứng dụng giúp loại bỏ việc sinh ra mã cấu hình và không yêu cầu người dùng cấu hình lại bằng XML, từ đó tiết kiệm thời gian lập trình và nâng cao năng suất lao động.

Ứng dụng Spring có thể được đóng gói dưới dạng file JAR, cho phép khởi động dễ dàng chỉ với một câu lệnh ngắn gọn: 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, Spring Security, Spring Cloud,v.v…

● 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 thư viện mã nguồn mở do Facebook phát triển, được ra mắt vào năm 2013, chuyên dùng để xây dựng các tương tác giữa các thành phần trên website Điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên server mà còn trên client, mang lại hiệu suất và trải nghiệm người dùng tốt hơn.

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:

ReactJS phù hợp với nhiều loại website, giúp việc khởi tạo trở nên dễ dàng hơn Bạn không cần phải viết mã nhiều như khi sử dụng JavaScript và HTML thuần Nó cung cấp nhiều công cụ hữu ích để đáp ứng đa dạng nhu cầu phát triển trang web.

Tái sử dụng các Component là một chiến lược hiệu quả, giúp tiết kiệm thời gian và công sức trong quá trình phát triển Khi bạn thiết kế các Component với chất lượng cao và tính linh hoạt, chúng có thể đáp ứng nhiều yêu cầu khác nhau từ các dự án khác nhau Việc này không chỉ tối ưu hóa quy trình làm việc mà còn nâng cao hiệu suất và tính nhất quán trong phát triển sản phẩm.

Việc xây dựng ban đầu và tái sử dụng mã nguồn trong các dự án hiện nay trở nên phổ biến, không chỉ riêng với ReactJS mà còn ở nhiều framework khác như Flutter.

ReactJS không chỉ dành cho lập trình website mà còn hỗ trợ phát triển ứng dụng di động thông qua React Native Framework này, cũng được phát triển bởi Facebook, cho phép bạn dễ dàng chia sẻ các Component và tái sử dụng Business Logic giữa các ứng dụng.

Để tối ưu hóa SEO cho website của bạn, việc sử dụng ReactJS là rất quan trọng, vì nó giúp nâng cao thứ hạng tìm kiếm trên Google Mặc dù Google hiện đã có khả năng crawl và index mã JavaScript, bạn vẫn cần tích hợp thêm một số thư viện hỗ trợ để đảm bảo hiệu quả tối ưu nhất cho SEO.

Facebook đã cho ra mắt một extension trên Chrome giúp dễ dàng debug trong quá trình phát triển ứng dụng Công cụ này hỗ trợ tăng tốc quá trình phát hành sản phẩm và cải thiện hiệu suất coding của bạn.

Công cụ phát triển web hot nhất hiện nay là ReactJS, với số liệu từ Google Trend cho thấy sự gia tăng mạnh mẽ trong nhu cầu tuyển dụng vị trí React Developer tại Việt Nam Các trang tuyển dụng hàng đầu như Topdev và Itviec ghi nhận số lượng việc làm lớn cùng mức lương hấp dẫn cho các lập trình viên React Điều này chứng tỏ độ phổ biến và tiềm năng phát triển của ReactJS trên thị trường công nghệ Việt Nam hiện tại.

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

MySQL là hệ quản trị cơ sở dữ liệu quan hệ phổ biến nhất toàn cầu, được các nhà phát triển ưa chuộng trong quá trình phát triển ứng dụng Hệ thống hoạt động theo mô hình Client-Server, cho phép quản lý dữ liệu hiệu quả thông qua các cơ sở dữ liệu, mỗi cơ sở dữ liệu chứa nhiều bảng quan hệ để lưu trữ thông tin.

MySQL is a widely used relational database management system (RDBMS) that powers some of the largest web applications, including Facebook, Twitter, YouTube, Google, and Yahoo! Initially limited in use, MySQL has evolved to support major computing platforms such as Linux, macOS, Microsoft Windows, and Ubuntu, contributing to its popularity in data storage solutions.

● 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 trở nên ngày càng quan trọng, đặc biệt là kiến thức tiếng Anh trong thời đại hội nhập Tuy nhiên, nhiều người gặp khó khăn trong việc học, chủ yếu do thời gian hạn chế; học sinh thường bận rộn với việc học ở trường, trong khi người đi làm phải dành nhiều thời gian cho công việc Thêm vào đó, vấn đề địa điểm học cũng là một trở ngại, khi nhiều người sống xa các trung tâm dạy tiếng Anh Do đó, cần tìm kiếm giải pháp học tập hiệu quả hơn.

Trong bối cảnh hiện nay, đặc biệt là trong thời kỳ dịch bệnh, việc có một trang web học tiếng Anh là rất cần thiết Các khóa học linh hoạt về thời gian và địa điểm giúp người học dễ dàng tiếp cận kiến thức mà không bị giới hạn bởi không gian hay thời gian.

Trang web của chúng tôi cung cấp cho người dùng khả năng truy cập dễ dàng mọi lúc, mọi nơi, với nhiều lựa chọn khóa học từ miễn phí đến trả phí Người dùng có thể học theo lộ trình đã được định sẵn với các bài học dễ hiểu và dễ làm theo Mỗi bài học đều kèm theo bài tập thực hành để củng cố kiến thức Quá trình học được lưu trữ, cho phép người dùng tiếp tục bài học bất cứ khi nào họ quay lại Ngoài ra, trang web cũng hỗ trợ người dùng quản lý các khóa học 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

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

Các chức năng Hạn chế

- Đa dạng về các bài học

- Tốc độ phản hồi nhanh

- Có hướng dẫn lộ trình cụ thể

- Chỉ dành cho việc học TOEIC

- Chỉ có 1 khóa học duy nhất

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

Xây dựng ứng dụng di động để bán sản phẩm nông sản giúp người dùng dễ dàng lựa chọn, đặt hàng và thanh toán Ngoài ra, hệ thống còn bao gồm một website quản trị dành cho quản trị viên Các chức năng chính của chương trình bao gồm việc quản lý đơn hàng và hỗ trợ người dùng trong quá trình mua sắm.

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

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

- 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 khóa

▪ Tính toán chi phí phải trả cho hóa đơn

6 Thanh toán ▪ Thanh toán VNPay

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ú

Quản trị viên: Quản lý nhân viên, quản lý người dùng, phân quyền người dùng

Nhân viên có quyền sử dụng các chức năng để thêm và chỉnh sửa khóa học, bài học, bài tập và chủ đề Họ cũng có thể truy cập thống kê và xem lịch sử học tập 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

Chương trình được cấp nhiều tài khoản (User) gồm các quyền: Người dùng, Nhân viên, Quản trị viên

2 Sao lưu, back up, phục hồi thông tin

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

Đánh giá điểm số của người dùng sau khi hoàn thành bài tập giúp xác định xem họ có đủ điều kiện để tiến tới bài học tiếp theo hay không.

4 Thông báo với người dùng

Nhắc nhở người dùng khi sắp tới giờ học theo lịch

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

STT Nội dung Tiêu chuẩn Mô tả chi tiết

1 Tốc độ xử lý khi sử dụng trang web

Hiệu quả Một lần có thể cho nhiều tài khoản vào học

2 Linh hoạt trong thời gian, địa điểm, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu

Hiệu quả Linh hoạt thời gian và địa điểm so với học trực tiếp

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 quá trình học

Người dùng có thể dễ dàng truy cập vào khóa học của mình, và hệ thống sẽ tự động hiển thị danh sách các bài học, kèm theo thông tin về việc đã hoàn thành hay chưa hoàn thành các bài học đó.

4 Có thể thiết kế thêm theo yêu cầu của doanh nghiệp, tổ chức

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

5 Giao diện thân thiện, đơn giản

Tiện dụng Khách hàng ở mọi lứa tuổi đều có thể dễ dàng sử dụng

Các thao tác thêm và chỉnh sửa khóa học, bài học được thiết kế đơn giản và thân thiện với người dùng, giúp nhân viên và học viên dễ dàng tìm kiếm, theo dõi và hoàn thành bài tập một cách thuận tiện.

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

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.5 Usecase quản lý người dùng

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

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

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

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

Usecase bắt đầu khi người dùng thực hiện đăng nhập vào ứng dụ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 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

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

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

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ệ”

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

Pre-conditions Người dùng đã đăng nhập vào hệ thố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 nhập nếu người dùng từ chối

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

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

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

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

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

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

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

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ì 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

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

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

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

Usecase bắt đầu khi người dùng thực hiện đổi thông tin cá nhân

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ị 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

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

Usecase bắt đầu khi người dùng thực hiện xem thông tin cá nhân

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 Alternative flow

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

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

Usecase bắt đầu khi học viên thực hiện đăng nhập vào ứng dụ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

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

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

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

Usecase bắt đầu khi học viên thực hiện đăng nhập vào ứng dụ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

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

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

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

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

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 bước 2

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

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

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

Usecase bắt đầu khi người dùng thực hiện chỉnh sửa 1 khóa học

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 Alternative flow

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

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

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

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

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

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

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

Usecase bắt đầu khi học viên thực hiện xem chi tiết khóa học

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 Alternative flow

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

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

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

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

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

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

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

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

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 khoản không có quyền

3.1.16 Xem lịch sử đơn mua

Name Xem danh sách đơn mua

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

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

Usecase bắt đầu khi học viên/admin thực hiện xem danh sách đơn 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

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

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

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

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 Alternative flow

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

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

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

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 bước 2

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

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

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

Usecase bắt đầu khi người dùng thực hiện chỉnh sửa 1 bài học

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 Alternative flow

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

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

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

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

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

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

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

Usecase bắt đầu khi học viên, giáo viên thực hiện xem chi tiết bài 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

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

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

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

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 Alternative flow

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

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

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

Usecase bắt đầu khi học viên thực hiện thêm thêm câu hỏi

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 Alternative flow

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

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

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 Alternative flow

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

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

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

Usecase bắt đầu khi học sinh thực hiện tạo danh sách từ ghi nhớ

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 Alternative flow

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

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

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

6 Thêm bài kiểm tra 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

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

Usecase bắt đầu khi admin tạo người dù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

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

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

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

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

Usecase bắt đầu khi admin thực hiện xóa người dù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 Alternative flow

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

Usecase bắt đầu khi admin thực hiện xóa hóa đơn

1 Người dùng chọn icon xóa

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

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

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

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

Usecase bắt đầu khi admin thực hiện xem chi tiết hóa đơn

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

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

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

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

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 đồ tuần tự

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hình 5.2 Màn hình trang đă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ý

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

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 nhập

5 Nhập lại mật khẩu đăng nhập Password Nhập lại 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 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

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

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

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

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 phí NavLink Khi ấn thì hiển thị bài giảng

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

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

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 học NavLink Khi nhấn thì điều hướng tới trang tương ứ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 khóa học List Item

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 quan tới khóa học Menu Item Khi nhấn vào thì sẽ hiển thị giao diện tương ứng

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

6 Tài liệu khóa học Button Khi nhấn vào thì tiến hành tải tài liệu về máy

7 Danh sách đánh giá List Item

8 Biểu mẫu ghi nhận đánh giá của user Text Input Thực hiện ghi nhận đánh 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 giảng

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

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 khóa học List Item

Danh sách menu liên quan tới thay đổi thông tin user

Menu Item Khi nhấn vào thì sẽ hiển thị giao diện tương ứng

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

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

8 Biểu mẫu ghi nhận phone của user Text Input Thực hiện ghi nhận phone thay đổi của 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

Hình 5.9 Màn hình 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 email của user Text Input

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

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

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

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

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

5 Nút đồng ý tự nguyện khóa Checkbox Khi nhấn vào đồng ý tự nguyện khóa tài 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

Hình 5.11 Màn hình 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 đã mua List Item

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

8 Nút chi tiết khóa học Button Khi nhấn thì điều hướng tới trang chi tiết

Khi mua khóa học rồi thì không được mua nữa

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

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

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

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

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 mạng xã hội Link Item Khi nhấn vào thì sẽ liên lạc đến đường link 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

5 Thông tin chi tiết của giảng viên Widget

6 Nút chức năng của giảng Link Item Khi ấn vào thì đến trang quản lí thông tin

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)

5 Nút xóa bài giảng Button

Khi nhấn vào thì kiểm tra nếu đăng nhập 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 đúng Checkbox Khi nhấn vào sẽ chọn làm đáp án đúng

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

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

Hình 5.22 Màn hình chỉnh sửa bài tập cho 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

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 khóa học online Text

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

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

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

10 Tổng doanh thu theo ngày Chart

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

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

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

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

1 Tên khóa học Input text

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 học Button Khi nhấn thì tiến hành thêm tài liệu khóa 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

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

Hình 5.28 Màn hình trang 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 blog Text Khi nhấn vào chuyển tới trang tạo blog

2 Đường dẫn đến chi tiết blog

List item link Khi nhấn vào chuyển tới trang chi tiết blog

Hiển thị tác giả, ngày 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 comment của user Input text Nhập comment

2 Button ghi nhận upload ảnh Input file Upload ả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 user

6 Nút trả lời bình luận Button Khi nhấn vào hiển thị biểu mẫu

7 Biểu mẫu ghi nhận Input text Nhập comment

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 dề blog của user Input text Nhập tiêu đề blog

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

3 Khung upload ảnh Button Upload ảnh

4 Biểu mẫu ghi nội dung 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

Hình 5.31 Màn hình danh sách flashcard

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

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

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

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

6 Nút chỉnh sửa từ vựng Button Khi nhấn vào hiển thị modal chỉnh sửa

7 Thông tin chi tiết từ vựng

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ừ vựng của user Input text Nhập tên từ vựng

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

13 Nút thêm trường từ vựng

Khi nhấn hiển thị modal thêm trường

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

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

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

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

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 trước

Khi nhấn hiển thị từ vựng 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ừ vựng

Khi nhấn vào hiển thị chi tiết

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 thi

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

6 Nút hiển thị chi tiết lịch sử làm bài

Button Khi nhấn vào chuyển tới trang chi tiết lịch sử làm bài

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 hỏi

Khi nhấn vào hiển thị modal chi tiết

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

Checkbox Khi tích vào làm các phần đã tích

6 Chọn thời gian làm Select Khi nhấn vào chọn thời gian làm

7 Nút luyện thi Button Khi ấn vào chuyển tới trang luyện 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

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

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

Chỉnh sửa bài giảng

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.

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

Hình 5.22 Màn hình chỉnh sửa bài tập cho 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

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

Báo cáo thống kê

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 khóa học online Text

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

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

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

10 Tổng doanh thu theo ngày Chart

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

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

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

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

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

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

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

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

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

Thêm khóa học

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

Quản lý giảng viên

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

Danh sách blog

Chi tiết Blog

Tạo Blog

Tạo Flashcard

Danh sách từ vựng theo flashcard

Luyện tập flashcard

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

Chi tiết làm bài thi

Danh sách đề thi

Chọn chi tiết phần thi

Làm bài thi

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

Các bước cài đặt API

● Tải và giải nén thư mục chứa Project Backend

● Mở bằng Project bằng Intellij IDEA

● Cài đặt Visual Studio Code từ trang chủ chính thức (version 1.74):

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 Code:

● Cài đặt trình biên dịch Visual Studio Code:

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

● Tải về source code được đính kèm trong file báo cáo: tại cửa sổ terminal của

VS Code ta chạy câu lệnh flutter pub get:

● 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

STT Testcase Kết quả mong đợi Kết quả

1 Chức năng đăng nhập Đăng nhập thành công, đúng phân quyền Pass

2 Chức năng đăng ký Đăng ký thành công, có gửi mail xác Pass

Sau khi người dùng nhấn vào đường dẫn trong email xác thực thì có thể đăng 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 cung cấp đúng mật khẩu cũ Pass

Gửi email đổi mật khẩu về tài khoản email đã đăng ký

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 đổi thành công Pass

7 Tạo tài khoản ở trang admin Tạo tài khoản đúng phân quyền Pass

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

1 Tạo khóa học Khóa học đã được tạo và cập nhật bên phần người dùng Pass

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 người dùng Pass

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

5 Tạo lịch học cho khóa học

Lịch học được lưu và gửi lịch học cho các học viên Pass

6 Thay đổi lịch học Lịch học được thay đổi và cập nhật lịch học cho học viên Pass

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 học Danh sách học sinh được cập nhật Pass

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 blog Pass

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ừ

1 Tạo danh sách từ Danh sách từ đã được tạo và hiển thị giao diện Pass

2 Chỉnh sửa thông tin danh sách từ

Thông tin của danh sách từ được cập nhật Pass

3 Thêm từ mới vào danh sách Từ mới đã được thêm vào danh sách Pass

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 trang danh sách đề Pass

2 Chỉnh sửa đề luyện tập Thông tin và nội dung của đề được cập nhật Pass

3 Làm bài Kết quả và quá trình làm bài được lưu lại và hiển thị ra giao diện Pass

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 đơn mua khóa học đã được lưu Pass

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 tiết khóa học 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ị trong phần đánh giá Pass

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

● Kinh nghiệm phát triển, triển khai API cùng Database và kiểm thử phần mềm

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ờ sự hướng dẫn tận tình của thầy Nguyễn Hữu Trung và các giảng viên trong Khoa Công Nghệ Thông Tin, nhóm đã nhận được nhiều hỗ trợ quý báu trong quá trình thực hiện đề tài.

Nhóm chúng tôi vẫn còn ít kinh nghiệm với Spring Framework và ReactJS, dẫn đến việc gặp phải nhiều vấn đề Việc giải quyết một số vấn đề vẫn còn hạn chế và tốn 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

Nhóm gặp khó khăn trong việc xác định luồng làm việc và hiện thực hóa các tính năng do hiểu biết và kinh nghiệm còn hạn chế về đề tài này.

Trong quá trình thực hiện đề tài, nhóm gặp nhiều trở ngại về thời gian và kiến thức, ảnh hưởng đến việc hiện thực hóa các tính năng của hệ thống Để khắc phục, nhóm đã đề ra hướng phát triển cụ thể cho hệ thống.

● Cải thiện về mặt UI/UX để tăng thêm trải nghiệm người dùng

● 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

[9] ReactJS, Meta Platforms, Inc, 21/9/2022, https://reactjs.org

[10] ReactJS Document, React, 20/8/2022, https://reactjs.org/docs/getting-started.html/

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

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

Bảng 6.3 trình bày kết quả kiểm thử các chức năng quản lý blog và bình luận Bảng 6.4 cung cấp thông tin về kiểm thử các chức năng quản lý danh sách từ Bảng 6.5 mô tả quá trình kiểm thử các chức năng quản lý đề luyện tập Cuối cùng, Bảng 6.6 nêu rõ kiểm thử các chức năng quản lý danh mục và sản phẩm.

Trong thời đại hiện nay, sự phát triển nhanh chóng của khoa học và công nghệ đã ảnh hưởng sâu sắc đến cuộc sống của mỗi người Ứng dụng công nghệ thông tin hiện diện khắp nơi, cho phép thực hiện hầu hết mọi thứ chỉ với một kết nối internet Chính vì vậy, chúng em đã quyết định thực hiện đề tài này.

Hiện nay, tình hình dịch Covid-19 ở nước ta đã giảm bớt, nhưng việc tập trung vẫn tiềm ẩn nhiều rủi ro Trong bối cảnh xã hội phát triển nhanh chóng, mọi người luôn bận rộn với công việc cá nhân, dẫn đến việc cần tận dụng từng phút để nâng cao bản thân Chính vì vậy, nhóm chúng em đã đề xuất ý tưởng giúp mọi người có thể học tập mọi lúc, mọi nơi, phù hợp với nhu cầu cá nhân mà không tốn kém thời gian và chi phí.

Website này cung cấp 14 gian đi lại, đồng thời là nơi lý tưởng cho người dùng tìm kiếm các khóa học phù hợp với mong muốn của mình một cách dễ dàng.

Xây dựng website cho phép học viên học online, giáo viên tạo khóa học và giảng dạy trực tuyến, đồng thời hỗ trợ quản trị viên quản lý cơ sở dữ liệu hiệu quả.

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Spring Framework

Spring là một framework phát triển ứng dụng Java phổ biến, được hàng triệu lập trình viên sử dụng Nó hỗ trợ tạo ra các ứng dụng hiệu năng cao, dễ dàng kiểm thử và tái sử dụng mã nguồn.

Spring là một framework mã nguồn mở nhẹ, chỉ khoảng 2MB, cho phép lập trình viên hoạt động một cách linh hoạt và hiệu quả Với sự phát triển và chia sẻ mạnh mẽ từ cộng đồng người dùng đông đảo, Spring mang lại nhiều lợi ích cho các dự án phát triển phần mềm.

Spring Framework được phát triển dựa trên hai nguyên tắc thiết kế chính là Dependency Injection và Aspect Oriented Programming Những tính năng cốt lõi của Spring có thể áp dụng cho việc phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua việc sử dụng mô hình POJO (Plain Old Java Object).

Tối ưu hóa cấu hình ứng dụng giúp loại bỏ mã cấu hình và không yêu cầu người dùng cấu hình lại bằng XML, từ đó tiết kiệm thời gian lập trình và nâng cao năng suất làm việc.

Ứng dụng Spring có thể được đóng gói dưới dạng file JAR, cho phép khởi động dễ dàng chỉ với một câu lệnh đơn giản: java -jar.

ReactJS là một thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013, được sử dụng để xây dựng các tương tác cho các thành phần trên website Điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên tầng Server mà còn trên tầng Client, mang lại hiệu suất và trải nghiệm người dùng tối ưu.

ReactJS phù hợp với nhiều loại website, giúp việc khởi tạo trở nên dễ dàng hơn Người dùng không cần phải viết nhiều mã như khi sử dụng JavaScript và HTML thuần, đồng thời ReactJS cung cấp nhiều công cụ hữu ích cho nhiều tình huống khác nhau.

Tái sử dụng các Component là một chiến lược hiệu quả trong phát triển phần mềm Khi bạn thiết kế các Component với chất lượng cao và tính linh hoạt, chúng có thể đáp ứng nhiều yêu cầu của các dự án khác nhau, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

Việc xây dựng ban đầu và tái sử dụng mã nguồn là một yếu tố quan trọng trong các dự án phát triển phần mềm hiện đại Không chỉ riêng ReactJS, mà nhiều framework hiện nay như Flutter cũng hỗ trợ người dùng thực hiện điều này, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

ReactJS không chỉ được sử dụng cho lập trình website mà còn hỗ trợ phát triển ứng dụng Mobile thông qua React Native, một framework do Facebook phát triển Việc này cho phép bạn dễ dàng chia sẻ các Component và tái sử dụng Business Logic trong các ứng dụng.

THUẬN LỢI

Bảng 6.3 trình bày kiểm thử các chức năng quản lý blog và bình luận Bảng 6.4 đề cập đến kiểm thử các chức năng quản lý danh sách từ Bảng 6.5 giới thiệu kiểm thử các chức năng quản lý đề luyện tập Cuối cùng, Bảng 6.6 kiểm thử các chức năng quản lý danh mục và sản phẩm.

Trong thời đại hiện nay, sự phát triển vượt bậc của khoa học và công nghệ đã tác động mạnh mẽ đến cuộc sống của mỗi người Ứng dụng công nghệ thông tin hiện diện khắp nơi, cho phép thực hiện hầu hết mọi thứ chỉ với kết nối internet Chính vì vậy, chúng em đã quyết định thực hiện đề tài này.

Hiện nay, tình hình dịch Covid-19 ở nước ta đã giảm bớt, nhưng việc tập trung vẫn tiềm ẩn nhiều rủi ro Trong bối cảnh xã hội phát triển nhanh chóng, mọi người luôn bận rộn với công việc cá nhân, dẫn đến việc cần tận dụng từng phút để nâng cao bản thân Nhóm chúng em đã đưa ra ý tưởng giúp mọi người có thể học mọi lúc, mọi nơi, phù hợp với nhu cầu cá nhân mà không tốn chi phí và thời gian.

Website này cung cấp 14 gian đi lại, đồng thời là nơi lý tưởng để người dùng dễ dàng tìm kiếm các khóa học phù hợp với mong muốn của mình.

Xây dựng một website cho phép học viên học online, giáo viên tạo khóa học và giảng dạy trực tuyến, đồng thời hỗ trợ quản trị viên quản lý cơ sở dữ liệu hiệu quả.

PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Spring Framework

Spring là một framework phát triển ứng dụng Java phổ biến, được hàng triệu lập trình viên tin dùng Nó hỗ trợ xây dựng các ứng dụng hiệu năng cao, dễ dàng kiểm thử và tái sử dụng mã nguồn.

Spring là một framework mã nguồn mở nhẹ, chỉ khoảng 2MB, cho phép lập trình viên hoạt động một cách trong suốt Với cộng đồng người dùng đông đảo, Spring được phát triển và chia sẻ rộng rãi, mang lại nhiều lợi ích cho các nhà phát triển.

Spring Framework được xây dựng dựa trên hai nguyên tắc thiết kế chính là Dependency Injection và Aspect Oriented Programming Những tính năng cốt lõi của Spring có thể được áp dụng để phát triển các ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển ứng dụng J2EE thông qua việc sử dụng mô hình POJO (Plain Old Java Object).

Tối ưu hóa cấu hình ứng dụng giúp loại bỏ việc tạo mã cấu hình và không yêu cầu người dùng cấu hình lại bằng XML, từ đó tiết kiệm thời gian lập trình và nâng cao năng suất làm việc.

Bạn có thể đóng gói ứng dụng Spring thành file JAR và khởi động ứng dụng một cách dễ dàng chỉ với lệnh java -jar.

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook và ra mắt vào năm 2013, dùng để xây dựng các tương tác với các thành phần trên website Điểm nổi bật của ReactJS là khả năng render dữ liệu không chỉ trên server mà còn trên client, mang lại hiệu suất và trải nghiệm người dùng tốt hơn.

ReactJS giúp việc khởi tạo website trở nên dễ dàng và nhanh chóng, phù hợp với nhiều thể loại khác nhau Với ReactJS, bạn không cần phải viết nhiều mã như khi sử dụng thuần JavaScript và HTML, đồng thời nó cung cấp nhiều công cụ và thư viện hữu ích để đáp ứng đa dạng nhu cầu phát triển.

Tái sử dụng các Component là một chiến lược hiệu quả, giúp tiết kiệm thời gian và công sức Nếu bạn thiết kế các Component với chất lượng cao và tính linh hoạt, chúng có thể đáp ứng nhiều yêu cầu từ các dự án khác nhau Điều này không chỉ tối ưu hóa quy trình phát triển mà còn nâng cao hiệu suất làm việc của đội ngũ.

Nhiều dự án hiện nay đều áp dụng phương pháp xây dựng ban đầu và tái sử dụng mã nguồn, không chỉ riêng ReactJS mà còn cả các framework khác như Flutter.

ReactJS không chỉ dành cho lập trình website mà còn có thể được sử dụng để phát triển ứng dụng di động thông qua React Native, một framework cũng được phát triển bởi Facebook Việc này cho phép bạn dễ dàng chia sẻ các Component và tái sử dụng Business Logic trong cả ứng dụng web và di động.

Tiêu đề	Website học tiếng anh
Tác giả	Nguyễn Phúc Nghiêm, Đàm Lưu Trung Hiếu
Người hướng dẫn	ThS. Nguyễn Hữu Trung
Trường học	Đại học sư phạm kỹ thuật thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2023
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	151
Dung lượng	12,38 MB