Xây dựng website học tiếng anh sử dụng mern stack

Sản phẩm Website học tiếng Anh sử dụng Mern Stack với đầy đủ các tính năng cơ bản cho phía người dùng và người quản trị viên.. Lược đồ tuần tự chức năng Học ngữ pháp .... Lược đồ tuần tự

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

Trong bối cảnh hội nhập kinh tế toàn cầu, ngôn ngữ đóng vai trò quan trọng giúp các quốc gia hiểu và giao lưu kinh tế, văn hóa xã hội Tuy nhiên, sự khác biệt ngôn ngữ giữa các quốc gia tạo ra rào cản giao tiếp Để vượt qua, cần có một ngôn ngữ thống nhất làm phương tiện giao tiếp chung Tiếng Anh được xem là lựa chọn lý tưởng bởi dễ học và dễ giao tiếp, đồng thời được sử dụng phổ biến do ảnh hưởng của các nước phát triển Hiện nay, tiếng Anh đã trở thành ngôn ngữ chung và là hành lang quan trọng cho mọi người trên toàn thế giới.

Tiếng Anh đóng vai trò quan trọng trong giao tiếp giữa mọi người và mở ra cơ hội thăng tiến cho người lao động, đặc biệt là những người làm việc trong doanh nghiệp nước ngoài Ngoài ra, tiếng Anh còn là một trong những điều kiện tiên quyết quyết định tương lai của hầu hết sinh viên sau khi tốt nghiệp, giúp họ có thể cạnh tranh và thành công trong thị trường lao động hiện nay.

Nhận thấy được tầm quan trọng của tiếng Anh, nhóm đã quyết định chọn đề tài

Xây dựng website học tiếng Anh sử dụng Mern Stack là một giải pháp hiệu quả để hỗ trợ mọi người trong việc học và rèn luyện tiếng Anh Thông qua nền tảng này, người dùng có thể dễ dàng củng cố thêm vốn từ vựng của mình, đồng thời cải thiện kỹ năng ngôn ngữ một cách toàn diện Việc áp dụng Mern Stack trong xây dựng website cũng giúp tối ưu hóa trải nghiệm người dùng, mang lại một môi trường học tập linh hoạt và thú vị.

MỤC ĐÍCH CỦA ĐỀ TÀI

Các mục tiêu của dự án nằm trong danh sách dưới đây:

Phát triển hai mô-đun chính là chìa khóa để tạo nên một trang web toàn diện Mô-đun đầu tiên là hệ thống quản lý, cung cấp các tính năng cần thiết giúp quản trị viên và người tạo nội dung dễ dàng quản lý dữ liệu trang web Trong khi đó, mô-đun thứ hai tập trung vào trải nghiệm người dùng, cho phép họ luyện nghe, học tập và tham gia các trò chơi nhỏ để củng cố vốn từ vựng và rèn luyện kỹ năng luyện nghe một cách thú vị và hiệu quả.

Bên cạnh việc thực hiện chức năng chính, hệ thống cần đáp ứng các yêu cầu phi chức năng quan trọng như xác thực giữa người dùng và máy chủ để đảm bảo tính bảo mật Việc áp dụng phương pháp mã hóa mật khẩu người dùng cũng là một yêu cầu không thể thiếu, giúp bảo vệ thông tin cá nhân của người dùng Đồng thời, thiết lập cơ chế phân quyền cho toàn hệ thống cũng là một yếu tố quan trọng để kiểm soát truy cập và quản lý dữ liệu hiệu quả.

CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU

Đối tượng nghiên cứu

Đối với đề tài "Xây dựng trang web học tiếng Anh sử dụng MERN STACK", đối tượng nghiên cứu tập trung vào nhu cầu thiết yếu của việc học tiếng Anh và các công nghệ hiện đại được áp dụng để tạo ra ứng dụng Cụ thể, đề tài này dựa trên nhu cầu học tiếng Anh ngày càng tăng và sự phát triển của công nghệ MERN STACK, bao gồm MongoDB, Express, React và Node.js, để tạo ra một trang web học tiếng Anh hiệu quả và dễ sử dụng.

 Tập trung nghiên cứu Restful API, NodeJS, ExpressJS để xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất

 Áp dụng cơ sở dữ liệu noSQL là MongoDB để lưu trữ dữ liệu người dùng của hệ thống

Để đảm bảo tính bảo mật của hệ thống, công nghệ Json Web Token được nghiên cứu và áp dụng như một giải pháp bảo mật hiệu quả Tất cả các luồng dữ liệu vào và ra đều được kiểm soát chặt chẽ thông qua Token, yêu cầu người dùng phải đăng nhập vào hệ thống để nhận được một Token riêng biệt Mỗi yêu cầu từ phía người dùng đều phải thông qua Token này, giúp hệ thống kiểm soát và bảo mật dữ liệu một cách toàn diện.

“cánh cửa” Interceptor và Token là “chìa khóa”

Nhóm thực hiện đề tài đã tiến hành nghiên cứu Framework ReactJS và các thư viện hỗ trợ để xây dựng và xử lý giao diện người dùng một cách hiệu quả, nhằm mang lại trải nghiệm tốt nhất cho người sử dụng cuối.

Phạm vi nghiên cứu

Đề tài "Xây dựng trang web học tiếng Anh sử dụng MERN STACK" tập trung vào việc phát triển các chức năng cơ bản của một trang web học tiếng Anh trực tuyến, bao gồm hai phần chính: phần Quản trị và phần Người dùng, cung cấp giải pháp toàn diện cho việc học tiếng Anh trực tuyến.

Trong phần Quản trị, tập trung vào các nghiệp vụ như:

 Quản lý bài trắc nghiệm

Trong phần Người dùng tập trung vào:

 Xem bảng xếp hạng trò chơi

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

KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

Xây dựng một trang web học tiếng Anh trực tuyến với các tính năng cơ bản, đáp ứng được nhu cầu học tiếng Anh cho người dùng

CƠ SỞ LÝ THUYẾT

NODE JS

NodeJS là một mã nguồn mở, đa nền tảng, chạy trên môi trường JavaScript, được xây dựng trên V8 JavaScript engine của Chrome, cho phép thực thi mã JavaScript bên ngoài trình duyệt và được phát triển từ năm 2009.

1.1.2 Các tính năng của NodeJS

Lập trình hướng sự kiện và không đồng bộ

Thư viện NodeJS có khả năng xử lý mã vô cùng cực kỳ nhanh chóng

Sử dụng một chương trình đơn luồng nhưng có khả năng mở rộng cao

Các ứng dụng sử dụng công nghệ NodeJS thường không có vùng nhớ tạm thời (buffer) để lưu trữ dữ liệu, thay vào đó chúng xuất dữ liệu theo từng khối một cách đơn giản và hiệu quả.

1.1.3 Đối tượng và ứng dụng của NodeJS

Các công ty đang sử dụng NodeJS có thể kể đến một số tên tuổi lớn như eBay, General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipin, Yahoo, và Yammer

NodeJS được ứng dụng rộng rãi trong nhiều hệ thống khác nhau, bao gồm hệ thống thông báo thời gian thực như Facebook hay Twitter, máy chủ web socket, chương trình upload file tốc độ cao, máy chủ quảng cáo, dịch vụ đám mây, ứng dụng thời gian thực, ứng dụng Single Page Application (SPA) và các công cụ sử dụng command-line.

1.1.4 Một số ưu, nhược điểm của NodeJS

- Nhận và xử lý nhiều kết nối chỉ với một luồng đơn, giúp hệ thống tốn ít RAM nhất và chạy nhanh nhất

- Tận dụng tối đa tài nguyên của server mà không tạo ra độ trễ

NodeJS is an excellent choice for JSON-based website services, thanks to its event-driven, non-blocking I/O mechanism and integration with the JavaScript model.

Các ứng dụng Single Page Application (SPA) là lựa chọn hoàn hảo cho các trang web không muốn tải lại trang, đòi hỏi tốc độ phản hồi nhanh chóng và xử lý nhiều yêu cầu từ người dùng Các ứng dụng thời gian thực như ứng dụng chat và các mạng xã hội nổi tiếng như Facebook, Twitter cũng là những ví dụ điển hình về ứng dụng SPA, nơi người dùng cần tương tác nhanh chóng và liền mạch.

- Có thể xử lý hàng nghìn process và trả ra một luồng khiến cho hiệu xuất hoạt động đạt mức tối đa nhất và tuyệt vời nhất

- Streaming Data: NodeJS sẽ xây dựng các Proxy phân vùng các luồng dữ liệu để đảm bảo tối đa hoạt động cho các luồng dữ liệu khác

- Viết được cho cả 2 phía server và client Chạy đa nền tảng Cộng đồng NodeJS rất lớn và hoàn toàn miễn phí

NodeJS hạn chế khi xây dựng ứng dụng nặng, tốn tài nguyên do phải thông qua trình biên dịch của NodeJS, dẫn đến mất thời gian hơn Điều này là do NodeJS được viết bằng ngôn ngữ C++ và Javascript, đòi hỏi quá trình biên dịch phức tạp hơn.

- Việc triển khai NodeJS trên host không phải là điều dễ dàng

- NodeJS Thiếu sự kiểm duyệt chất lượng các module

1.1.5 Sử dụng NodeJS trong đề tài

Sử dụng NodeJS để làm môi trường xây dựng website bên phía server.

EXPRESS JS

ExpressJS là một framework mạnh mẽ được xây dựng trên nền tảng của NodeJS, cung cấp các tính năng cần thiết để phát triển web hoặc ứng dụng di động một cách hiệu quả Với khả năng hỗ trợ các giao thức HTTP và tích hợp middleware, ExpressJS cho phép tạo ra các API linh hoạt và dễ dàng mở rộng Nhờ đó, ExpressJS đã trở thành lựa chọn phổ biến trong cộng đồng phát triển web và di động.

Hình 1.1 Cấu trúc một API được xây dựng với ExpressJS [1]

1.2.2 Tại sao nên sử dụng ExpressJS trong lập trình web?

1.2.2.1 Sự phổ biến của Javascript

ExpressJS hỗ trợ mạnh mẽ ngôn ngữ lập trình Javascript, một trong những ngôn ngữ được sử dụng rộng rãi nhất hiện nay nhờ tính dễ đọc, dễ học và được hỗ trợ trên mọi nền tảng Điều này có nghĩa là nếu bạn đã quen thuộc với Javascript, việc lập trình bằng ExpressJS sẽ trở nên đơn giản và dễ tiếp cận hơn.

1.2.2.2 Hỗ trợ xây dựng website một cách nhanh chóng

ExpressJS với sự hỗ trợ của nhiều tính năng khác nhau có thể giúp giảm thiểu một nửa thời gian viết mã, đồng thời cung cấp một phần mềm trung gian đảm nhận nhiệm vụ đưa ra các quyết định để phản hồi chính xác những yêu cầu của khách hàng, giúp tăng tốc độ phát triển và cải thiện hiệu suất ứng dụng.

1.2.2.3 ExpressJS hoàn toàn miễn phí

ExpressJS là một ứng dụng web miễn phí nhưng sở hữu nhiều tính năng vượt trội, khiến nó trở thành một lựa chọn lý tưởng cho các tổ chức và doanh nghiệp.

1.2.3 Những tính năng của ExpressJS là gì?

- ExpressJS cung cấp nhiều tính năng dưới dạng các hàm để dễ dàng sử dụng, từ đó tiết kiệm được thời gian

- Phần mềm trung gian Middleware chịu trách nhiệm chính cho việc tổ chức có hệ thống các chức năng của ExpressJS

- Cung cấp cơ chế Định tuyến (Routing)

- Cung cấp các công cụ tạo khuôn, cho phép các nhà xây dựng nội dung động trên các website bằng cách tạo dựng các mẫu HTML ở phía máy chủ

- Gỡ lỗi (Debugging): ExpressJS cung cấp khả năng xác định chính xác các phần ứng dụng web có lỗi, nhờ vậy việc gỡ lỗi trở nên dễ dàng hơn.

1.2.4 Sử dụng ExpressJS trong đề tài

ExpressJS được dùng để xây dựng các API bên phía server cho website.

MONGODB

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL, được thiết kế hướng theo đối tượng và hỗ trợ trên đa nền tảng, giúp tăng cường tính linh hoạt và khả năng mở rộng Các bảng MongoDB có cấu trúc linh hoạt, cho phép dữ liệu không cần tuân theo bất kỳ dạng cấu trúc nào, mang lại lợi thế trong việc lưu trữ và quản lý dữ liệu phức tạp.

MongoDB hoạt động trên cơ sở collection, sử dụng hướng tài liệu kiểu JSON thay vì bảng, giúp tăng tốc độ truy vấn dữ liệu Điều này cho phép MongoDB cung cấp hiệu suất cao, tính sẵn sàng cao và khả năng mở rộng dễ dàng, đáp ứng nhu cầu của các ứng dụng đòi hỏi tốc độ và độ tin cậy cao.

Collection trong MongoDB về bản chất là một nhóm các document, chứa các tập document không tuân theo cấu trúc cố định Không giống như cơ sở dữ liệu quan hệ, các collection trong MongoDB không yêu cầu định nghĩa thành phần các cột trước khi lưu trữ dữ liệu, giúp tăng tính linh hoạt và dễ dàng thích nghi với các yêu cầu khác nhau.

1.3.2 Sử dụng MongoDB mang lại những lợi ích gì?

1.3.2.1 Truy vấn cơ sở dữ liệu đặc biệt

Một trong những lợi thế nổi bật của MongoDB là khả năng xử lý dữ liệu linh hoạt mà không cần lược đồ xác định trước Điều này cho phép MongoDB tận dụng ngôn ngữ truy vấn tương tự như cơ sở dữ liệu SQL, giúp đơn giản hóa các quy trình như sắp xếp, truy vấn, cập nhật và xuất dữ liệu một cách hiệu quả Nhờ đó, MongoDB trở thành lựa chọn lý tưởng cho việc quản lý và phân tích dữ liệu lớn.

MongoDB duy trì sự cân bằng và đảm bảo hiệu suất đọc và ghi ổn định thông qua việc phân phối các tập dữ liệu trên nhiều máy ảo cùng lúc Ngoài ra, công nghệ lưu trữ dữ liệu của MongoDB còn hỗ trợ khả năng mở rộng quy mô theo chiều ngang, được gọi là sharding, giúp tăng cường hiệu suất và khả năng mở rộng cho các ứng dụng lớn.

1.3.2.3 Hỗ trợ đa ngôn ngữ

Một trong những điểm mạnh của MongoDB là khả năng hỗ trợ đa ngôn ngữ, giúp các nhà phát triển dễ dàng tích hợp và điều khiển cơ sở dữ liệu này thông qua nhiều ngôn ngữ lập trình phổ biến như Python, C++, Javascript và nhiều ngôn ngữ khác.

1.3.3 MongoDB có những ưu và nhược điểm gì?

- Dễ dàng truy cập nhờ vào việc lập ra các chỉ mục, tăng tốc độ phản hồi truy vấn nhanh

- Linh hoạt và tự do lưu trữ dữ liệu thuộc nhiều loại khác nhau

- Có khả năng mở rộng, khi xử lý một dữ liệu lớn thì vẫn có thể phân phối cho nhiều máy

- Lưu trữ và truy xuất các tệp vượt quá kích thước 16MB Các tính năng giúp tăng tính khả dụng và đạt hiệu suất cao

- MongDB không có tính ràng buộc Điều này khiến người dùng có thể những sai số không đáng có nếu thao tác không cẩn trọng

- Giới hạn về kích thước dữ liệu của MongoDB là 16MB

MongoDB hạn chế về việc sử dụng chức năng Join giống như các cơ sở dữ liệu quan hệ truyền thống Điều này đòi hỏi người dùng phải thực hiện các đoạn mã thủ công để sử dụng Join, điều này có thể làm giảm hiệu suất và ảnh hưởng đến tốc độ xử lý dữ liệu.

- Lồng dữ liệu trong BSON bị hạn chế

- Dung lượng bộ nhớ tăng không cần thiết vì không có chức năng Joins nên sẽ có sự dư thừa dữ liệu

1.3.4 Sử dụng MongoDB trong đề tài

Sử dụng MongoDB để xây dựng cơ sở dữ liệu NoSQL cho ứng dụng.

RESTFUL API

API (Application Programming Interface) là giao diện lập trình ứng dụng, đóng vai trò như một phương thức trung gian giúp hai phần mềm khác nhau có thể giao tiếp và trao đổi dữ liệu một cách dễ dàng và hiệu quả hơn.

REST (REpresentational State Transfer) là một kiểu kiến trúc để viết API, một dạng chuyển đổi cấu trúc dữ liệu

RESTful API là một tiêu chuẩn quan trọng trong thiết kế API, cho phép chia nhỏ một giao dịch thành nhiều module nhỏ hơn, giúp mỗi module giải quyết một phần công việc cụ thể trong giao dịch đó.

REST hoạt động dựa vào giao thức HTTP Gồm có bốn phương thức chính:

- GET: Trả về một Resource hoặc một danh sách Resource

- POST: Tạo mới một Resource

- PUT: Cập nhật thông tin cho Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với Create, Read, Update, Delete (Tạo, Đọc, Sửa, Xóa)

1.4.3 Sử dụng RESTFUL API trong đề tài

RESTFUL API được dùng làm giao thức giao tiếp giữa Client và Server trong ứng dụng.

REACT JS

React là một thư viện mã nguồn mở được sử dụng để xây dựng giao diện người dùng (UI) hiệu quả và linh hoạt Ưu điểm chính của React là khả năng phản hồi nhanh chóng khi người dùng nhập liệu, nhờ vào phương pháp render trang web mới và hiện đại.

Công cụ này được phát triển bởi Facebook và ra mắt như một công cụ JavaScript mã nguồn mở vào năm 2013 Với sự phát triển vượt bậc, nó đã nhanh chóng vươn lên dẫn đầu so với các đối thủ chính như Angular và Bootstrap, hai thư viện JavaScript phổ biến nhất thời điểm đó.

Những đặc điểm nổi bật của ReactJS:

JSX là một công cụ thiết yếu trong thiết kế bố cục trang web, mang lại sự đơn giản hơn so với JavaScript truyền thống Một trong những ưu điểm nổi bật của JSX là khả năng trích dẫn HTML và sử dụng cú pháp thẻ HTML để render các subcomponent một cách linh hoạt.

1.5.2.2 Single-way data flow (luồng dữ liệu 1 chiều)

ReactJS không có các module chuyên dụng để xử lý dữ liệu, nhưng nó sử dụng cơ chế luồng dữ liệu một chiều để phân chia view thành các component nhỏ có mối quan hệ chặt chẽ với nhau Cơ chế này cho phép truyền dữ liệu một chiều từ component cha xuống component con, giúp quản lý và cập nhật dữ liệu một cách hiệu quả.

Virtual DOM đóng vai trò vừa là Model vừa là View, cho phép mọi thay đổi trên Model tự động kéo theo sự thay đổi trên View và ngược lại Điều này cho phép thực hiện cơ chế Data-binding mà không cần tác động trực tiếp vào các phần tử DOM ở View, giúp tăng tốc độ ứng dụng đáng kể.

1.5.3 Sử dùng ReactJS trong đề tài

ReactJS được dùng để xây dựng các giao diện bên phía Client cho ứng dụng.

JSON WEB TOKEN

1.6.1 Định nghĩa JSON Web Token

Json Web Token (JWT) là một chuỗi mã hóa được tạo ra từ một chuỗi thông tin dạng JSON Thông qua quá trình mã hóa, chuỗi thông tin này được chuyển đổi thành một chuỗi mã hóa an toàn, giúp bảo vệ dữ liệu và xác thực danh tính người dùng.

1 chuỗi ký tự lộn xộn nhìn vào sẽ rất khó hiểu

Như vậy, bảo mật JWT là phương pháp xác thực quyền truy cập (Authentication) bằng JSON Web Token

1.6.2 Cấu trúc của một JWT

JWT trên bao gồm 3 phần: Header, Payload, Signature

Header bao gồm hai phần chính:

 typ – Loại token (mặc định là JWT – cho biết đây là một Token JWT)

 alg – Thuật toán đã dùng để mã hóa (HMAC SHA256 – HS256 hoặc

Chuỗi JSON trên sau khi được mã hóa base64url sẽ trở thành như sau:

Hình 1.4 Chuỗi JSON được mã hóa base64url [2]

Nội dung của thông tin (claim) được chứa đựng trong một phần quan trọng, nơi lưu trữ các mô tả của thực thể hoặc cung cấp thông tin bổ sung cho phần Header, giúp truyền tải thông tin một cách đầy đủ và chính xác.

Phần Signature được tạo bằng cách kết hợp phần Header và Payload, rồi mã hóa nó lại bằng 1 giải thuật encode bất kỳ

Tổng lại 3 phần, có chuỗi JWT như sau:

1.6.3 Flow hệ thống sử dụng JWT

Flow của hệ thống dùng JWT như sau:

1 Người dùng thực hiện đăng nhập bằng cách gửi id/password hay sử dụng các tài khoản mạng xã hội lên phía Server xác thực

2 Server xác thực nhận các dữ liệu mà người dùng gửi lên để phục vụ cho việc xác thực người dùng Trong trường hợp thành công, Server xác thực sẽ tạo một JWT và trả về cho người dùng thông qua response

3 Người dùng nhận được JWT do Server xác thực vừa mới trả về làm “chìa khóa” để thực hiện các “lệnh” tiếp theo đối với Server ứng dụng

4 Server ứng dụng trước khi thực hiện yêu cầu, sẽ xác thực JWT gửi lên Nếu OK, tiếp tục thực hiện yêu cầu được gọi

1.6.4 Sử dụng JSON Web Token trong hệ thống

JSON Web Token được dùng làm giao thức xác thực quyền truy cập của người dùng trong hệ thống

KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU

KHẢO SÁT HIỆN TRẠNG

Duolingo là ứng dụng học ngôn ngữ trực tuyến nổi tiếng, cung cấp hơn 35 ngôn ngữ khác nhau trên thế giới để người dùng có thể lựa chọn và học tập Ứng dụng này tích hợp nhiều phương pháp học tập đa dạng, giúp người dùng có thể tìm được phương pháp phù hợp với nhu cầu và phong cách học tập của mình.

Hình 2.1 Màn hình trang chủ website Doulingo

- Lựa chọn nhiều ngôn ngữ muốn học

- Hiển thị các chủ đề theo lộ trình từ dễ đến khó

- Đặt mục tiêu hằng ngày và nhắc nhở chúng ta hoàn thành nó

- Bảng xếp hạng trình độ học

- Có nhiều ngôn ngữ để lựa chọn

- Giao diện thân thiện, dễ sử dụng

- Số lượng bài học lớn

- Được thiết kế đầy đủ từ cơ bản đến nâng cao

- Chỉ phù hợp với những người mất gốc và muốn học lại từ đầu

- Dễ gây nhàm chán với những người có kiến thức từ trước

Elllo là một trang cực kỳ nổi tiếng về việc học tiếng Anh, đặc biệt là việc học nghe

Trang web này cung cấp hơn 1300 bài học nghe, cùng với đó là rất nhiều video và các công cụ học tập đa dạng khác, giúp người học cải thiện hiệu quả việc học ngôn ngữ.

Hình 2.2 Màn hình trang chủ website Ello

- Học bài nghe qua video, script và làm bài trắc nghiệm

- Học bài ngữ pháp qua các chủ đề, video, script và làm bài trắc nghiệm

- Tìm kiếm và lọc danh sách bài nghe theo chủ đề

- Cho phép download tài liệu

- Các bài học được chia làm nhiều chủ đề và cấp độ khác nhau

- Tất cả bài học đều có transcript và bài tập từ vựng đi kèm và đồng thời còn cho phép người học tải về để sử dụng offline

- Số lượng bài tập tự luyện lớn

- Có các bài học phù hợp cho cả giáo viên và sinh viên

- Trang web cung cấp miễn phí tài liệu cho người dùng muốn học theo lộ trình

- Website có cấu trúc phức tạp

- Không sắp xếp bài học để học theo thứ tự

- Khó tiếp cận với người mới bắt đầu

BBC Learning English là trang web học tiếng Anh trực tuyến chuyên sâu về ngữ pháp, từ vựng, phát âm và chia sẻ bí quyết dạy tiếng Anh hiệu quả Ngoài ra, bạn cũng có thể tự đánh giá trình độ tiếng Anh của mình thông qua các bài thi trực tuyến Trang web còn cung cấp nhiều bài luyện nghe chất lượng, cho phép bạn tải xuống và ôn tập mỗi ngày để cải thiện kỹ năng nghe một cách hiệu quả.

Hình 2.3 Màn hình trang chủ website BBC English

- Nghe video và học các bài luyện nghe theo từng mục

- Học phiên âm theo bài giảng

- Học ngữ pháp qua bài giảng và thực hành

- Học các khóa học từ Lower-intermediate đến Towards Advanced

- Có nhiều video bài giảng hay và phong phú

- Số lượng mục bài học nhiều và được nâng dần lên

- Có nhiều bài học phù hợp cho cả giảng viên và học sinh

- Giao diện đẹp, dễ nhìn và dễ sử dụng

- Trang web phù hợp cho những người có trình độ tiếng Anh khá trở lên

2.1.4 Voca.vn Đây là website học về từ vựng tiếng Anh thông minh Cũng chính là một trong những trang web học tiếng Anh trực tuyến, miễn phí mà thông minh của cộng đồng Anh ngữ English Me Trang web Voca.vn được coi như một hệ thống chuyên dành để học từ vựng tiếng Anh Đây là trang web học từ vựng tiếng Anh hàng đầu tại Việt Nam tính tới thời điểm hiện tại

Hình 2.4 Màn hình trang chủ website Voca.vn

- Ghim và học từ vựng

- Làm đề thi thử tiếng anh THPT

- Học ngữ pháp, từ vựng, phiên âm theo từng mức độ

- Phương pháp học hiệu quả, sinh động, dễ hiểu

- Tính năng nhắc nhở ôn tập tự động

- Tính năng đo lường cho phép người học biết được sự tiến bộ của bản thân theo thời gian

- Giao diện đẹp, dễ hiểu

- Thư viện từ vựng khá phong phú, nội dung được đầu tư kỹ lưỡng

Ứng dụng cho phép bạn trải nghiệm miễn phí một bộ từ điển trong thư viện để tìm hiểu chi tiết về cách học trước khi quyết định đầu tư vào việc học các bộ từ vựng khác, giúp bạn có cái nhìn tổng quan và đưa ra quyết định sáng suốt.

- Kho tài liệu phong phú danh cho những người muốn học tiếng Anh từ cơ bản đến nâng cao

- Sau khi học những bộ từ miễn phí ban đầu thì bạn phải trả phí để học các bộ từ vựng khác

- Đây chưa phải là trang web tối ưu cho những ai cần hoàn thiện cả 4 kỹ năng, nó chủ yếu giúp bạn nâng cao vốn từ vựng

Busuu là trang web học ngoại ngữ toàn diện, cung cấp các khóa học đa dạng nhằm cải thiện kỹ năng viết, mở rộng vốn từ vựng và kỹ năng đọc hiểu Ngoài ra, trang web còn tích hợp phương pháp học tiếng Anh thông qua việc tham gia diễn đàn, trò chuyện và giao lưu với các thành viên đến từ nhiều quốc gia trên thế giới, giúp người học rèn luyện kỹ năng giao tiếp một cách hiệu quả.

Hình 2.5 Màn hình trang chủ website Busuu

- Học các bài học với các chủ đề khác nhau

- Học và thực hành các kỹ năng ngôn ngữ: nói, phát âm, ngữ pháp, nghe, chính tả, ghi nhớ, cụm từ

- Diễn đàn để giao tiếp, tương tác

- Thống kê tình trạng học của người dùng mỗi ngày

- Cho phép học đa ngôn ngữ

- Giao diện thân thiện, dễ sử dụng

- Trang web chia thành các bài học để học các kỹ năng

- Ngôn ngữ được chia thành nhiều bài học từ dễ đến khó

- Diễn đàn trao đổi giúp chúng ta tương tác với người khác trong hệ thống

- Nắm được tiến độ học tập

- Số lượng bài tập còn hạn chế

- Phải trả phí để sử dụng đầy đủ

Dựa trên dữ liệu khảo sát từ 5 website học tiếng Anh uy tín, chúng tôi đã tổng hợp được những yêu cầu chức năng cơ bản cho trang web học tiếng Anh sử dụng MERN STACK, bao gồm các bài học về ngữ pháp, từ vựng, phiên âm và luyện nghe, cũng như tính năng làm bài kiểm tra để đánh giá trình độ Bên cạnh đó, giao diện học tập cần được thiết kế dễ nhìn, bắt mắt và gây hứng thú cho người học, nhằm tạo trải nghiệm học tập hiệu quả và thú vị.

Có thể có một số trò chơi nhỏ để giúp người dùng có thể ghi nhớ từ vựng tốt hơn

Để quản lý hiệu quả các đối tượng như tài khoản, từ vựng, bài nghe, ngữ pháp và bài trắc nghiệm, việc phát triển các tính năng CRUD (Tạo, Đọc, Cập nhật, Xóa) cho người quản trị và người tạo nội dung là vô cùng quan trọng Thông qua các tính năng này, người quản trị và người tạo nội dung có thể dễ dàng tạo mới, chỉnh sửa, cập nhật và xóa bỏ các đối tượng một cách linh hoạt và chính xác Điều này giúp đảm bảo rằng hệ thống quản lý được vận hành một cách trơn tru và hiệu quả, từ đó mang lại trải nghiệm tốt hơn cho người dùng.

XÁC ĐỊNH YÊU CẦU

Dựa trên kết quả khảo sát và kiểm tra các hệ thống hiện tại, nhóm xác định các tác nhân chính của hệ thống như sau:

Người quản trị đóng vai trò quan trọng trong việc vận hành hệ thống, với đặc quyền cao nhất để thực hiện các chức năng quản trị quan trọng Họ có trách nhiệm quản lý người dùng, ngữ pháp và các bài viết, đảm bảo hệ thống hoạt động trơn tru và hiệu quả.

22 luyện nghe, từ vựng, bài trắc nghiệm và xem các thống kê Các chức năng quản trị cấp cao trong hệ thống này phải được đăng nhập

Người tạo nội dung hoạt động dưới sự kiểm soát của Người quản trị, có quyền hạn chế trong việc quản lý ngữ pháp, các bài trắc nghiệm, bài luyện nghe và từ vựng trong hệ thống Để thực hiện các chức năng quản trị này, Người tạo nội dung phải đăng nhập vào hệ thống.

Khi người dùng được xác thực, họ sẽ có quyền truy cập vào nhiều tính năng thú vị, bao gồm xem các bài luyện nghe, học ngữ pháp, từ vựng, bảng phiên âm, tham gia các trò chơi ôn tập và theo dõi bảng xếp hạng của các trò chơi Để tận hưởng đầy đủ các chức năng này, người dùng cần phải đăng nhập vào hệ thống.

 Khách vãng lai: đăng ký tài khoản để đăng nhập vào hệ thống

Các chức năng của Người quản trị

Bảng 2.1 Bảng chức năng của Người quản trị

STT Chức năng Mô tả

1 Khóa người dùng Khóa tài khoản của người dùng

2 Mở khóa người dùng Mở khóa tài khoản của người dùng

3 Phân quyền người dùng Phân quyền truy cập cho người dùng trong hệ thống

4 Thống kê Xem thống kê số lượng người dùng, số lượng ngữ pháp, bài nghe, từ vựng, bài trắc nghệm của hệ thống

5 Thêm người dùng Thêm một tài khoản người dùng vào hệ thống

6 Chỉnh sửa người dùng Chỉnh sửa thông tin tài khoản người dùng trong hệ thống

7 Xem danh sách người dùng Xem danh sách người dùng trong hệ thống

Các chức năng của Người tạo nội dung

Bảng 2.2 Bảng chức năng của Người tạo nội dung

1 Thêm bài nghe Thêm một bài nghe vào hệ thống

2 Chỉnh sửa bài nghe Chỉnh sửa một bài nghe trong hệ thống

3 Xóa bài nghe Xóa một bài nghe trong hệ thống

4 Thêm ngữ pháp Thêm ngữ pháp vào hệ thống

5 Chỉnh sửa ngữ pháp Chỉnh sửa ngữ pháp trong hệ thống

6 Xóa ngữ pháp Xóa ngữ pháp trong hệ thống

7 Thêm từ vựng Thêm từ vựng mới vào hệ thống

8 Chỉnh sửa từ vựng Chỉnh sửa từ vựng trong hệ thống

9 Xóa từ vựng Xóa từ vựng trong hệ thống

10 Thêm bài trắc nghiệm Thêm bài trắc nghiệm của tệp luyện nghe hoặc ngữ pháp vào hệ thống

11 Chỉnh sửa bài trắc nghiệm Chỉnh sửa câu hỏi và các đáp án của câu hỏi trong bài trắc nghiêm

12 Xem danh sách bài nghe Xem, tìm kiếm và lọc danh sách bài nghe

13 Xem danh sách ngữ pháp Xem, tìm kiếm và lọc danh sách ngữ pháp

14 Xem danh sách từ vựng Xem, tìm kiếm và lọc danh sách từ vựng

Các chức năng của Người dùng được xác thực

Bảng 2.3 Bảng chức năng của Người dùng được xác thực

1 Đăng nhập Cho phép người dùng đăng nhập để truy cập vào hệ thống

2 Học bảng phiên âm Người dùng xem video bài giảng và chi tiết của âm, nghe audio cách phát âm

3 Học ngữ pháp Người dùng xem các chủ đề và ví dụ của ngữ pháp, xem video và script bài giảng ngữ pháp

4 Học bài luyện nghe Người dùng xem video và script, trả lời các câu hỏi trắc nghiệm của video

5 Chỉnh sửa thông tin cá nhân Người dùng có thể chỉnh sửa thông tin cá nhân của mình

6 Đổi mật khẩu Người dùng có thể đổi mật khẩu tài khoản đăng nhập

7 Học từ vựng Xem nghĩa và nghe audio các từ vựng

8 Chơi các trò chơi Chơi ba trò chơi là: Hãy chọn từ đúng,

Ghép từ, Tay nhanh hơn não

9 Xem bảng xếp hạng Xem bảng xếp hạng người chơi trong các trò chơi

10 Làm bài kiểm tra Làm bài kiểm tra theo format đề thi

11 Đăng xuất Đăng xuất tài khoản

Các chức năng của Khách vãng lai

Bảng 2.4 Bảng chức năng của Khách vãng lai

1 Đăng ký Cho phép đăng ký tài khoản để truy cập

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

- Giao diện dễ sử dụng, thân thiện và bắt mắt

- Tốc độ load video và bài học nhanh

- Tốc độ upload video, audio không quá một phút

- Database có dung lượng lưu trữ dữ liệu lớn

- Tốc độ tìm kiếm nhanh và chính xác

- Tốc độ xử lý các thao tác nhanh chóng và chính xác

- Có thể thiết kế thêm các chức năng theo yêu cầu

- Thời gian truyền tải nội dung giữa các thiết bị nhanh

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

2.3.1.1 Lược đồ chức năng của Người quản trị và Người tạo nội dung

Hình 2.6 Lược đồ chức năng Người quản trị và Người tạo nội dung

2.3.1.2 Lược đồ chức năng của Người dùng và Khách vãng lai u c UC_Adm in

Dan g n h ap Dan g xu at

Ch in h su a th on g tin ca n h an

Ngu oi qu an tr i

Qu an ly n gu oi du n g

Kh oa tai kh oan

Ph an qu yen n gu oi du n g

Ngu oi tao n oi du n g

Qu an ly bai n gh e

Ch in h su a bai n gh e

Qu an ly n gu ph ap

Th em n gu ph ap

Ch in h su a n gu ph ap Xoa n gu ph ap

Qu an ly tu vu n g Th em tu vu n g

Ch in h su a tu vu n g

Th em n gu oi du n g

Mo kh oa tai kh oan

Qu an ly bai tr ac n gh iem

Th em bai tr ac n gh iem

Xem dan h sach n gu ph ap

Xem dan h sach bai n gh e

Xem dan h sach tu vu n g

Ch in h su a n gu oi du n g

Ch in h su a tr ac n gh iem

Th on g ke th on g tin

Tôi không thể giúp bạn vì nội dung bài viết không rõ ràng Vui lòng cung cấp nội dung cụ thể để tôi có thể hỗ trợ bạn tốt hơn.

Hình 2.7 Lược đồ chức năng của Khách vãng lai và Người dùng

2.3.2 Mô tả chi tiết Usecase

2.3.2.1 Chức năng của “Khách vãng lai”

2.3.2.1.1 Use case “Đăng ký” uc UC_User

Chinh sua thong tin ca nhan

Hoc bang phien am Choi tr o choi

Hình 2.8 Lược đồ chức năng Đăng ký Bảng 2.5 Bảng mô tả chức năng Đăng ký

USE CASE – LEW-US_UC_01

Use Case ID LEW-US_UC_01 Phiên bản use case

Tên use case Đăng ký

Tác giả Võ Ngọc Phong

Ngày tháng 10/10/2021 Mức độ Cao Đối tượng sử dụng:

 Người dùng chưa có tài khoản

 Cho phép người dùng tạo tài khoản để đăng nhập vào hệ thống với quyền là Người dùng

 Người dùng sẽ tạo được tài khoản để đăng nhập vào hệ thống

 Người dùng truy cập vào trang web

 Người dùng nhấp vào “Đăng ký” trên thanh điều hướng

 Người dùng chưa có tài khoản trên website uc Usecases

 Thành công: Người dùng đăng ký thành công tài khoản để đăng nhập vào hệ thống

 Không thành công: Hiển thị thông báo lỗi

Bước Hành động tác nhân Phản ứng hệ thống

1 Người dùng click vào “Đăng ký” ở phía bên phải của thanh điều hướng

Trang web chuyển hướng đến trang

2 Người dùng nhập tên, email, mật khẩu, xác nhận mật khẩu

3 Người dùng click vào “Đăng ký”

Hiển thị thông báo "Đăng ký thành công" và chuyển về Trang chủ [Ngoại lệ 4]

Dòng sự kiện thay thế:

STT Hành động tác nhân Phản ứng hệ thống

1 Người dùng để trống một trong các trường tên, email, mật khẩu, xác nhận mật khẩu hoặc bỏ trống tất cả

Lỗi xuất hiện dưới phần nhập ở các trường là “Input value.”

2 Email không đúng định dạng Lỗi xuất hiện dưới phần nhập email người dùng “Email không hợp lệ”

3 Password có chiều dài dưới 6 ký tự Lỗi xuất hiện dưới phần nhập mật khẩu “Mật khẩu tối thiểu 6 ký tự.”

4 Email đã tồn tại trong hệ thống Lỗi xuất hiện dưới phần nhập tên

30 người dùng “Email đã tồn tại.”

 Email: đúng định dạng và chưa tồn tại trong hệ thống

 Password: có chiều dài tối thiểu 6 ký tự

2.3.2.2 Chức năng của “Người dùng”

Hình 2.9 Lược đồ chức năng Đăng nhập Bảng 2.6 Bảng mô tả chức năng đăng nhập

Tên use case Đăng nhập

Tác giả Trần Phương Linh

 Người dùng được xác thực u c Usecases

Ngu oi du n g Ngu oi qu an tr i

Ngu oi tao n oi du n g Dan g n h ap

 Cho phép người dùng đã xác thực đăng nhập vào hệ thống

 Người dùng được truy cập vào website theo phân quyền mặc định

 Người dùng cần đăng nhập trang web cho một số chức năng cụ thể

 Người dùng nhấp vào “Đăng nhập” trên thanh điều hướng

 Người dùng chưa đăng nhập vào website

 Thành công: Người dùng đã đăng nhập vào trang web theo vai trò cụ thể

1 Người dùng click vào “Đăng nhập” ở phía bên phải của thanh điều hướng

Trang web chuyển hướng đến trang Đăng nhập

2 Người dùng nhập email và password

3 Người dùng click vào “Đăng nhập” Đóng của sổ Đăng nhập Ở bên phải của thanh điều hướng sẽ có tên người dùng của người dùng

1 Người dùng để trống email hoặc password hoặc cả hai trường đều trống

Lỗi xuất hiện dưới phần nhập email hoặc password

2 Password ngắn hơn 6 ký tự Lỗi xuất hiện dưới phần nhập mật khẩu “Mật khẩu tối thiểu 6 ký tự.”

3 Email không tồn tại Hiển thị thông báo lỗi “Email không tồn tại.”

4 Password không đúng Hiển thị thông báo lỗi “Mật khẩu không chính xác.”

5 Tài khoản đã bị kháo Hiển thị thông báo lỗi “Tài khoản đã bị khóa”

 Password: có chiều dài tối thiểu 6 ký tự

Hình 2.10 Lược đồ chức năng Đăng xuất Bảng 2.7 Bảng mô tả chức năng đăng xuất uc Usecases

Tên use case Đăng xuất

Ngày tháng 10/10/2020 Mức độ Thấp Đối tượng sử dụng:

 Người dùng được xác thực

 Cho phép người dùng đã xác thực đăng xuất tài khoản

 Người dùng được đăng xuất tài khoản

 Người dùng nhấp vào icon Avatar

 Người dùng chọn “Đăng xuất”

 Người dùng đã đăng nhập vào website

 Thành công: Người dùng đăng xuất được tài khoản

1 Người dùng nhấp vào icon

Trang web hiển thị các tùy chọn

“Thông tin cá nhân”, “Cài đặt”,

2 Người dùng chọn “Đăng xuất” Hiển thị thông báo đăng xuất thành công Quay lại trang chủ khi chưa đăng nhập

2.3.2.2.3 Use case “Học bảng phiên âm”

Hình 2.11 Lược đồ chức năng học bảng phiên âm Bảng 2.8 Bảng mô tả chức năng học bảng phiên âm

Tên use case Học bảng phiên âm

 Người đã có tài khoản trong hệ thống

 Cho phép người dùng học các phiên âm, nghe video bài giảng dạy phát âm trong tiếng Anh

 Người dùng sẽ học được các phiên âm trong tiếng Anh

 Người dùng click vào mục “Pronunciation”

 Người dùng đã đăng nhập vào website

 Thành công: Người dùng vào được trang Bảng phiên âm

Trang web hiển danh sách bảng phiên âm

2 Người dùng chọn một phiên âm cần học

Trang web hiển trang chi tiết phiên âm

3 Người dùng click vào video để nghe bài giảng về cách phát âm

Hiển thị danh sách phiên âm liên quan cùng loại

2.3.2.2.4 Use case “Học ngữ pháp”

Hình 2.12 Lược đồ chức năng học ngữ pháp Bảng 2.9 Bảng mô tả chức năng học ngữ pháp

Tên use case Học ngữ pháp

 Người dùng đã tài khoản trong hệ thống

 Cho phép người dùng học ngữ pháp và xem video bài giảng của ngữ pháp trong tiếng Anh

 Người dùng sẽ học được các cấu trúc ngữ pháp trong tiếng Anh

 Người dùng nhấp vào nút “Grammar”

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

Hậu điều kiện: uc Usecases

 Thành công: Người dùng vào được trang Ngữ pháp

1 Người dùng nhấp vào nút

Trang web chuyển đến trang ngữ pháp

2 Người dùng chọn mức độ của ngữ pháp

Trang web chuyển đến trang danh sách ngữ pháp của mức độ được chọn

3 Người dùng chọn một ngữ pháp cần học

Trang web hiển trang chi tiết ngữ pháp

4 Người dùng click vào video để nghe bài giảng ngữ pháp

5 Người dùng chọn lần lượt các tab để xem script, ngữ pháp và làm câu hỏi trắc nghiệm

Hiển thị nội dung các tab người dùng đã chọn

2.3.2.2.5 Use case “Học từ vựng”

Hình 2.13 Lược đồ chức năng học từ vựng Bảng 2.10 Bảng mô tả chức năng học từ vựng

Tên use case Học từ vựng

 Người dùng đã tài khoản trong hệ thống

 Cho phép người dùng học nhiều từ vựng mới theo nhiều chủ đề các nhau

 Người dùng học từ vựng theo các chủ đề

 Người dùng nhấp vào nút “Vocabulary”

 Thành công: Người dùng vào được trang Từ vựng uc Usecases

1 Người dùng nhấp vào nút

Trang web chuyển đến trang hiển thỉ các chủ đề của từ vựng

2 Người dùng chọn một chủ đề Trang web chuyển đến trang hiển thị từ vựng của chủ đề vừa chọn

3 Người dùng chọn icon “Speak” để nghe cách đọc của từ vựng

Phát audio cách đọc từ vựng

4 Người dùng click icon “Next” để học từ tiếp theo

Hiển thị từ vựng tiếp theo của chủ đề

5 Người dùng chọn icon “Slide” để học từ vựng theo giao diện slide

Hiển thị slide từ vựng

1 Người dùng click vào icon

Hiển thị lại từ vựng vừa xem

“Gallery” để học từ vựng theo giao diện slide

Hiển thị từ vựng theo gallery

2.3.2.2.6 Use case “Học bài luyện nghe”

Hình 2.14 Lược đồ chức năng học bài luyện nghe Bảng 2.11 Bảng mô tả chức năng học bài luyện nghe

Tên use case Học bài nghe

 Cho phép người dùng đã xác thực nghe video, xem script và trả lời các câu hỏi của phần Listenning

 Người dùng có thể nghe video, xem script và trả lời các câu hỏi để cải thiện kỹ năng nghe

 Người dùng cần đăng nhập trang web

 Người dùng click vào “Listenning”

Hậu điều kiện: uc Usecases

 Người dùng đã đăng nhặp vào website

 Thành công: trang web hiển thị video tiếng anh

“Listenning” ở trang chủ hệ thống

Trang web chuyển hướng đến trang Listenning

2 Người dùng chọn một chủ đề luyện nghe

Trang web chuyển hướng đến trang hiển thị danh sách bài nghe của chủ đề được chọn

3 Người dung chọn một bài nghe Trang web chuyển hướng đến trang học bài nghe

4 Người dùng click vào video để luyện nghe

5 Người dùng click vào “Script” để xem file script của video

Hiển thị file script của video

6 Người dùng click vào “Quiz” để trả lời các câu hỏi

Hiển thị các câu trắc nghiệm của video

7 Người dùng chọn đáp án Tick xanh vào đáp án người dùng đã chọn

8 Người dùng click vào “Check

Hiển thị kết quả “v” nếu người dung chọn đúng và “x” nếu người dungf chọn sai

9 Người dùng click vào “Reset

Hủy các câu trả lời người dùng đã chọn, tải lại trang Quiz trống

10 Người dùng click vào “Show Hiển thị các đáp án màu xanh là đáp

Answer” án của các câu trắc nghiệm

2.3.2.2.7 Use case “Đổi mật khẩu”

Hình 2.15 Lược đồ chức năng Đổi mật khẩu Bảng 2.12 Bảng mô tả chức năng đổi mật khẩu

Tên use case Đổi mật khẩu

Ngày tháng 10/10/2020 Mức độ Trung bình Đối tượng sử dụng:

 Người dùng được xác thực u c Usecases

Ngu oi qu an tr i

Ngu oi tao n oi du n g

 Cho phép người dùng thay đổi mật khẩu tài khoản

 Người dùng click vào icon “Avatar” trên thanh điều hướng

 Người dụng chọn “Thông tin cá nhân”

 Người dùng click vào “Chỉnh sửa”

 Thành công: Trang web quay trở lại trang thông tin người dùng

 Không thành công: Trang web hiện lỗi

“Avatar” trên thanh điều hướng

Hiển thị các tùy chọn “Thông tin cá nhân”, “Cài đặt”, “Đăng xuất”

2 Người dụng chọn “Thông tin cá nhân”

Hệ thống chuyển đến trang thông tin chi tiết người dùng

4 Người dùng nhập các thông tin đầu vào cần thiết: “Mật khẩu”,

5 Người dùng click “Chỉnh sửa”

Thông báo đổi thành công Quay lại trang thông tin cá nhân người dùng

1 Người dùng click “Hủy bỏ” Hủy các thay đổi và quay lại trang

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

1 Người dùng nhập mật khẩu mới dưới 6 ký tự

Lỗi xuất hiện dưới phần nhập mật khẩu mới “Mật khẩu phải tối thiểu 6 ký tự.”

2 Mật khẩu mới và mật khẩu xác nhận không khớp

Lỗi xuất hiện dưới phần nhập mật khẩu xác nhận “Xác nhận mật khẩu không khớp.”

 Mật khẩu mới: có chiều dài tối thiểu 6 ký tự

2.3.2.2.8 Use case “Chỉnh sửa thông tin cá nhân”

Hình 2.16 Lược đồ chức năng Chỉnh sửa thông tin cá nhân

Bảng 2.13 Bảng mô tả chức năng Chỉnh sửa thông tin cá nhân

USE CASE – LEW-US_UC_09 uc Usecases

Chinh sua thong tin ca nhan

Tên use case Chỉnh sửa thông tin cá nhân

 Cho phép người dùng chỉnh sửa thông tin cá nhân

 Người dùng click vào icon “Avatar” trên thanh điều hướng

 Người dụng chọn “Thông tin cá nhân”

 Người dùng click vào “Chỉnh sửa”

 Thành công: Trang web quay trở lại trang thông tin người dùng

 Không thành công: Trang web hiện lỗi

“Avatar” trên thanh điều hướng

Hiển thị các tùy chọn “Thông tin cá nhân”, “Cài đặt”, “Đăng xuất”

2 Người dụng chọn “Thông tin cá nhân”

Hệ thống chuyển đến trang thông tin chi tiết người dùng

4 Người dùng chỉnh sửa tên Hiển thị thông tin chỉnh sửa

5 Người dùng click “Chỉnh sửa”

Thông báo đổi thành công Quay lại trang thông tin cá nhân người dùng

1 Người dùng click “Hủy bỏ” Hủy các thay đổi và quay lại trang thông tin cá nhân người dùng

2.3.2.2.9 Use case “Chơi trò chơi”

Hình 2.17 Lược đồ chức năng chơi trò chơi Bảng 2.14 Bảng mô tả chức năng chơi trò chơi

Tên use case Chơi trò chơi

Ngày tháng 10/10/2020 Mức độ Cao uc Usecases

 Chức năng gồm ba trò chơi là: “Hãy chọn từ đúng”, “Tay nhanh hơn não”,

 Người dùng chơi trò chơi để kiểm tra khả năng ghi nhớ từ vựng

 Người dùng click vào “Playing Games”

 Thành công: Cho phép người dùng chơi các trò chơi

1 Người dùng click vào “Playing

Chuyển đến trang hiển thi các trò chơi

2 Người dùng click vào “Hãy chọn từ đúng”

Chuyển đến trang chơi trò chơi

1 Người dùng click vào “Ghép từ” Chuyển đến trang chơi trò chơi

2 Người dùng click vào “Tay nhanh hơn não”

Chuyển đến trang chơi trò chơi “Tay nhanh hơn não”

2.3.2.2.10 Use case “Xem bảng xếp hạng”

Hình 2.18 Lược đồ chức năng Xem bảng xếp hạng Bảng 2.15 Bảng mô tả chức năng xem bảng xếp hạng

Tên use case Xem bảng xếp hạng

Người dùng có thể theo dõi bảng xếp hạng những người có nhiều coin nhất, đồng thời cập nhật bảng xếp hạng của ba trò chơi thú vị là "Hãy chọn từ đúng", "Tay nhanh hơn não".

 Người dùng xem bảng xếp bạng các trò chơi và số coin

 Người dùng click vào “Playing Games”

 Thành công: Cho phép người dùng chơi các trò chơi

1 Người dùng click vào “Playing

Chuyển đến trang hiển thi các trò chơi

2 Người dùng click vào “Xem bảng xếp hạng”

Chuyển đến trang hiển thị bảng bảng người dung có nhiều coin nhất, các bảng xếp hạng của các trò chơi

“Hãy chọn từ đúng”, “Ghép từ”,

2.3.2.2.11 Use case “Làm bài Test”

Hình 2.19 Lược đồ chức năng làm bài Test uc Usecases

Bảng 2.16 Bảng mô tả chức năng Làm bài Test

Tên use case Làm bài Test

 Người dùng có thể thực hiện bài Test Toeic

 Người dùng xem thực hiện bài Test Toeic

 Người dùng click vào “Test”

 Thành công: Cho phép người dùng thực hiện bài Test

1 Người dùng click vào “Test” Chuyển đến trang bắt đầu làm bài

2 Người dùng click vào “Start” Chuyển đến trang thực hiện bài Test

3 Chọn đáp án của các câu hỏi Tích xanh đáp án người dùng chọn

4 Chọn “Next” để sang câu hỏi kể tiếp

Hiển thị trang các câu hỏi kế tiếp của bài tiếp

5 Chọn “Submit” Hiển thị hộp thoại xác nhận nộp nài

Chuyển đến trang hiển thị kết quả

1 Người dùng click vào “Prev” Hiển thị trang các câu hỏi trước đó

2 Chọn “No” Đóng hộp thọai xác nhận

2.3.2.3 Chức năng của “Người tạo nội dung”

2.3.2.3.1 Use case “Xem danh sách bài nghe”

Hình 2.20 Lược đồ chức năng Xem danh sách bài nghe Bảng 2.17 Bảng mô tả chức năng Xem danh sách bài nghe

USE CASE – LEW-AS_UC_01 uc Usecases

Xem danh sach bai nghe

Use Case ID LEW-AS_UC_01 Phiên bản use case

Tên use case Xem danh sách bài nghe

 Người quản trị hệ thống, người tạo nội dung

 Cho phép người quản trị hoặc người tạo nội dung xem danh sách bài nghe trong hệ thống

 Hiển thị danh sách bài luyện nghe trong hệ thống

 Người dùng cần đăng nhập trang web với quyền quản trị viên hoặc quyền tạo nội dung

 Người dùng click vào “Quản lý bài nghe”

 Người dùng đã đăng nhập vào website với quyền quản trị hoặc quyền tạo nội dung

 Thành công: hiển thị danh sách bài luyện nghe

1 Người dùng click vào “Quản lý bài nghe” ở trang chủ hệ thống

Trang web hiển thị danh sách các tệp nghe của hệ thống

“Setting” để lọc danh sách theo

Hiển thị hộp thoại lọc theo chủ đề

3 Người dùng chọn chủ đề Hiển thị thông tin người dùng đã chọn

Hiển thị danh sách bài nghe được lọc theo chủ đề được chọn

5 Người dùng chọn icon “Filter” để lọc bài nghe mới nhất hoặc cũ nhất

Hiển thị các tùy chọn “Newest”,

Hiển thị bài nghe được sắp xếp từ mới nhất đến cũ nhất

7 Người dùng gõ tên bài nghe vào ô tìm kiếm

Hiển thị danh sách bài nghe có tên đúng và gần đúng với từ khóa tìm kiếm

1 Người dùng chọn “Cancel” Đóng hộp thoại

2 Người dùng chọn “Oldest” Hiển thị bài nghe được sắp xếp từ cũ nhất đến mới nhất

1 Không tìm thấy bài nghe có tên trùng với từ khóa tìm kiếm

2.3.2.3.2 Use case “Thêm bài nghe”

Hình 2.21 Lược đồ chức năng Thêm tệp nghe Bảng 2.18 Bảng mô tả chức năng thêm bài nghe

USE CASE – LEW-AS_UC_02

Tên use case Thêm tệp nghe

 Cho phép người quản trị hoặc người tạo nội dung thêm một tệp nghe mới

 Một bài nghe mới được thêm vào database

 Người dùng click vào “Quản lý bài nghe” uc Usecases

Nguoi quan tr i Nguoi tao noi dung

 Người dùng click vào icon “Add”

 Thành công: thêm tệp nghe mới vào danh sách tệp nghe

Trang web chuyển hướng đến trang thêm tệp nghe mới

3 Người dùng thêm tên, mô tả, chủ đề, script, hình ảnh, và upload video

Hiển thị thông tin người dùng đã thêm

Hiển thị thông báo “Thêm bài nghe thành công”

1 Người dùng chọn thêm link youtube video

Hiển thị thông tin người dùng nhập

2 Người dùng click vào “Return” Quay lại trang quản lý bài nghe

1 Người dùng không nhập đầy đủ các trường thông tin bắt buộc

Hiển thị thông báo “Error, không thể tạo listening”

2 Người dùng thêm link video không phải link youtube

Hiển thị thông báo “Link video is invalid.”

 Link video phải là link youtube

2.3.2.3.3 Use case “Chỉnh sửa bài nghe”

Hình 2.22 Lược đồ chức năng chỉnh sửa bài nghe Bảng 2.19 Bảng mô tả chức năng chỉnh sửa bài nghe

Tên use case Chỉnh sửa tệp nghe

Ngày tháng 10/10/2020 Mức độ Cao Đối tượng sử dụng: uc Usecases

Nguoi quan tr i Nguoi tao noi dung

 Cho phép người quản trị chỉnh sửa các tệp nghe của hệ thống

 Câp nhật các tệp nghe trong database

 Người dùng click icon “Edit” của tệp cần chỉnh sửa

 Thành công: cấp nhật tệp nghe sau chỉnh sửa trong danh sách tệp nghe

2 Người dùng click icon “Edit” của tệp cần chỉnh sửa

Trang web chuyển hướng đến trang chi tiết tệp nghe

3 Người dùng chỉnh sửa tên, mô tả, chủ đề, hình ảnh, script và upload video

Hiển thị thông tin người dùng đã chỉnh sửa

Hiển thị thông báo “Chỉnh sửa listening thành công”

2 Người dùng click vào “Return” Quay lại trang quản lý bài nghe

Hiển thị thông báo “Error, không thể chỉnh sửa listening”

2.3.2.3.4 Use case “Xóa bài nghe”

Hình 2.23 Lược đồ chức năng Xóa bài nghe Bảng 2.20 Bảng mô tả chức năng Xóa bài nghe uc Usecases

Tên use case Xóa bài nghe

 Người dùng có tài khoản với quyền là Người tạo nội dung và Người quản trị

 Cho phép xóa tệp nghe và bài trắc nghiệm của tệp trong hệ thống

 Người dùng sẽ xóa tệp nghe trong hệ thống

 Người dùng cần đăng nhập trang web với quyền Người quản trị hoặc người tạo nội dung

 Người dùng click vào icon “Delete” tại tệp nghe muốn xóa

 Người dùng phải đăng nhập vào hệ thống với tài khoản với quyền Người tạo nội dung hoặc Người quản trị

 Thành công: hiển thị thông báo “Xóa bài nghe thành công.”

 Không thành công: Hiển thị thông báo lỗi “Error, không thể xóa bài nghe.”

1 Người dùng click vào “Quản lý Trang web chuyển sang trang Quản

60 bài nghe” lý danh sách bài luyện nghe

“Delete” ở tệp luyện nghe muốn xóa

Trang web hiển thị hộp thoại thông báo “Bạn có muốn xóa bài nghe?”

[Thay thế 1] Đóng hộp thoai, hiển thị thông báo

“Xóa bài nghe thành công.” và cập nhật lại danh sách tệp luyện nghe [Ngoại lệ 1]

Dòng sự kiện thay thế

1 Người dùng click vào “No” Đóng hộp thoại thông báo

1 Không thể xóa được bài nghe Hiển thị thông báo lỗi “Error, không thể xóa bài nghe”

2.3.2.3.5 Use case “Xem danh sách ngữ pháp”

Hình 2.24 Lược đồ chức năng Xem danh sách ngữ pháp Bảng 2.21 Bảng mô tả chức năng Xem danh sách ngữ pháp

Tên use case Xem danh sách ngữ pháp

 Cho phép người quản trị hoặc người tạo nội dung xem danh sách ngữ pháp trong hệ thống

 Hiển thị danh sách bài ngữ pháp trong hệ thống

 Người dùng click vào “Quản lý ngữ pháp”

 Người dùng đã đăng nhập vào website với quyền quản trị hoặc quyền tạo nội uc Usecases

Xem danh sach ngữ pháp

 Thành công: hiển thị danh sách ngữ pháp

1 Người dùng click vào “Quản lý ngữ pháp” ở trang chủ hệ thống

Trang web hiển thị danh sách các ngữ pháp của hệ thống

“Setting” để lọc danh sách theo mức độ

Hiển thị hộp thoại lọc theo mức độ

3 Người dùng chọn mức độ Hiển thị thông tin người dùng đã chọn

Hiển thị danh sách ngữ pháp được lọc theo mức độ được chọn

5 Người dùng chọn icon “Filter” để lọc ngữ pháp mới nhất hoặc cũ nhất

Hiển thị các tùy chọn “Newest”,

Hiển thị ngữ pháp được sắp xếp từ mới nhất đến cũ nhất

7 Người dùng gõ tên ngữ pháp vào ô tìm kiếm

Hiển thị danh sách ngữ pháp có tên đúng và gần đúng với từ khóa tìm kiếm

2 Người dùng chọn “Oldest” Hiển thị ngữ pháp được sắp xếp từ cũ nhất đến mới nhất

1 Không tìm thấy ngữ pháp có tên trùng với từ khóa tìm kiếm

2.3.2.3.6 Use case “Thêm ngữ pháp”

Hình 2.25 Lược đồ chức năng Thêm ngữ pháp Bảng 2.22 Bảng mô tả chức năng them ngữ pháp

Tên use case Thêm ngữ pháp

 Cho phép thêm cấu trúc ngữ pháp vào trong hệ thống

 Người dùng sẽ thêm được cấu trúc ngữ pháp vào trong hệ thống

 Người dùng phải đăng nhập vào hệ thống với tài khoản có quyền là Người tạo nội dung hoặc Người quản trị

 Thành công: Người dùng thêm ngữ pháp thành công

 Không thành công: Người dùng thêm ngữ pháp không thành công

1 Người dùng click vào “Quản lý ngữ pháp”

Trang web hiển thị danh sách ngữ pháp của hệ thống

"Add" phía trên danh sách ngữ pháp

Trang web chuyển hướng đến trang thêm ngữ pháp

3 Người dùng thêm tiêu đề Nội dung, mức độ, script, hình ảnh, và upload video và audio

Hiển thị thông tin người dùng đã thêm

“Add” để thêm các chủ đề cho

Hiển thị hộp thoại thêm chủ đề

5 Người dùng nhập chủ đề và các ví dụ

Hiển thị nội dung người dùng nhập

Lưu lại chủ đề vừa thêm và đóng hộp thoại

Hiển thị thông báo “Thêm ngữ pháp thành công”

2 Người dùng click vào “Return” Quay lại trang quản lý ngữ pháp

3 Người dùng click “Cancel” Đóng hộp thoại

Hiển thị thông báo “Error, không thể tạo ngữ pháp”

2.3.2.3.7 Use case “Chỉnh sửa ngữ pháp”

Hình 2.26 Lược đồ chức năng Sửa ngữ pháp Bảng 2.23 Bảng mô tả chức năng Sửa ngữ pháp

Tên use case Sửa ngữ pháp

 Cho phép sửa cấu trúc ngữ pháp vào trong hệ thống

 Người dùng sẽ sửa được cấu trúc ngữ pháp trong hệ thống

 Người dùng click vào icon “Edit” tại ngữ pháp muốn chỉnh sửa

 Thành công: Người dùng sửa cấu trúc ngữ pháp thành công

 Không thành công: Người dùng sửa ngữ pháp không thành công

Trang web hiển thị danh sách ngữ pháp của hệ thống

“Edit” ở cấu trúc ngữ pháp muốn sửa

Trang web hiển thị tất cả thông tin về cấu trúc ngữ pháp đã chọn

3 Người dùng chỉnh sửa tiêu đề, nội dung, mức độ, script, hình ảnh, và upload video và audio

“Add” để thêm các chủ đề cho ngữ pháp

Hiển thị hộp thoại thêm chủ đề

5 Người dùng nhập chủ đề và các ví dụ

Hiển thị nội dung người dùng nhập

6 Người dùng click “Save” Lưu lại chủ đề và đóng hộp thoại thêm

Hiển thị thông báo “Chỉnh sửa ngữ pháp thành công”

2 Người dùng click vào “Return” Quay lại trang quản lý ngữ pháp

3 Người dùng click “Cancel” Đóng hộp thoại

4 Người dùng click vào ngữ pháp Hiển thị hộp thoại thông tin chủ đề của ngữ pháp

5 Người dùng click icon “Delete” tại chủ đề của ngữ pháp

Xóa chủ đề của ngữ pháp

Hiển thị thông báo “Error, không thể tạo ngữ pháp”

2.3.2.3.8 Use case “Xóa ngữ pháp”

Hình 2.27 Lược đồ chức năng xóa ngữ pháp Bảng 2.24 Bảng mô tả chức năng Xóa ngữ pháp

Tên use case Xóa ngữ pháp

 Cho phép xóa cấu trúc ngữ pháp trong hệ thống

 Người dùng sẽ xóa cấu trúc ngữ pháp trong hệ thống

 Người dùng click vào icon “Delete” tại ngữ pháp muốn xóa

 Thành công: Người dùng xóa cấu trúc ngữ pháp thành công

 Không thành công: Người dùng xóa cấu trúc ngữ pháp không thành công

Trang web chuyển sang trang Quản lý ngữ pháp

“Delete” ở cấu trúc ngữ pháp muốn xóa

Trang web hiển thị hộp thoại thông báo “Bạn có muốn xóa ngữ pháp?”

[Thay thế 1] Đóng hộp thoai, hiển thị thông báo

“Xóa ngữ pháp thành công.” và cập nhật lại danh sách ngữ pháp

1 Người dùng click vào “No” Đóng hộp thoại thông báo

1 Không thể xóa được ngữ pháp Hiển thị thông báo lỗi “Error, không thể xóa ngữ pháp.”

2.3.2.3.9 Use case “Xem danh sách từ vựng”

Hình 2.28 Lược đồ chức năng Xem danh sách từ vựng Bảng 2.25 Bảng mô tả chức năng Xem danh sách từ vựng

Tên use case Xem danh sách từ vựng

 Cho phép người quản trị hoặc người tạo nội dung xem danh sách từ vựng trong hệ thống

 Hiển thị danh sách bài từ vựng trong hệ thống

Xem danh sach tu vung

 Người dùng click vào “Quản lý từ vựng”

 Thành công: hiển thị danh sách từ vựng

1 Người dùng click vào “Quản lý từ vựng” ở trang chủ hệ thống

Trang web hiển thị danh sách các từ vựng của hệ thống

“Setting” để lọc danh sách

Hiển thị hộp thoại lọc

3 Người dùng chọn loại từ, chuyên ngành, cấp bậc, chủ đề

Hiển thị thông tin người dùng đã chọn

Hiển thị danh sách từ vựng được lọc

5 Người dùng chọn icon “Filter” để sắp xếp từ vựng

Hiển thị các tùy chọn “A->Z”, “Z-

Hiển thị từ vựng được sắp xếp theo thứ tự từ A đến Z

7 Người dùng nhập từ vào khung tìm kiếm

Hiển thị danh sách từ có kết quả đúng và gần đúng với từ khóa được tìm kiếm

2 Người dùng chọn “Z->A” Hiển thị từ vựng được sắp xếp theo thứ tự từ Z đến A

3 Người dùng chọn “Random” Hiển thị từ vựng được sắp xếp theo thứ tự ngẫu nhiên

1 Không tìm thấy kết quả tìm kiếm

2.3.2.3.10 Use case “Thêm từ vựng”

Hình 2.29 Lược đồ chức năng Thêm từ vựng Bảng 2.26 Bảng mô tả chức năng Thêm từ vựng

Tên use case Thêm từ vựng

 Cho phép thêm từ vựng vào trong hệ thống

 Người dùng sẽ thêm được từ vựng vào trong hệ thống

 Thành công: Người dùng thêm từ vựng thành công

 Không thành công: Người dùng thêm từ vựng không thành công

1 Người dùng click vào “Quản lý từ vựng”

Trang web chuyển sang trang hiển thị danh sách từ vựng của hệ thống

"Add" phía trên danh sách từ vựng

Trang web hiển thị hộp thoại để thêm từ vựng

Khi tạo mới từ vựng, người dùng cần nhập và chọn thông tin chi tiết bao gồm từ, nghĩa của từ, cấp bậc, ký âm, loại từ, chuyên ngành, chủ đề, câu ví dụ minh họa, từ đồng nghĩa và từ trái nghĩa, cũng như ghi chú bổ sung cho từ vựng đó.

Hiển thị thông tin người dùng đã nhập

4 Người dùng click vào nút

Trang web xuất hiện thông báo

1 Người dùng click vào “Quay lại”

Hủy bỏ các thao tác thêm và quay về trang quản lý từ vựng

1 Người dùng để trống một trong các trường bắt buộc hoặc bỏ trống tất cả

Lỗi xuất hiện dưới phần nhập ở các trường thông tin

2 Người dùng thêm từ trùng với từ đã tạo trong database

Hiển thị thông báo “Từ đã tồn tại trong từ điển”

2.3.2.3.11 Use case “Sửa từ vựng”

Hình 2.30 Lược đồ chức năng Sửa từ vựng Bảng 2.27 Bảng mô tả chức năng Sửa từ vựng

Tên use case Sửa từ vựng

 Cho phép sửa từ vựng vào trong hệ thống

 Người dùng sẽ sửa được từ vựng trong hệ thống

 Người dùng click vào icon “Edit” tại từ vựng muốn chỉnh sửa

 Thành công: Người dùng sửa từ vựng thành công

 Không thành công: Người dùng sửa từ vựng không thành công

“Edit” ở từ vựng muốn sửa

Trang web hiển thị hộp thoại hiển thị tất cả thông tin về từ vựng đã chọn

Người dùng có thể chỉnh sửa và lựa chọn lại các thông tin của từ vựng, bao gồm nghĩa của từ, cấp bậc, ký âm, loại từ, chuyên ngành, chủ đề, câu ví dụ minh họa, từ đồng nghĩa và từ trái nghĩa, cũng như thêm ghi chú cần thiết cho từ vựng đó.

4 Người dùng click vào nút “Sửa từ”

“Chỉnh sửa từ thành công”

1 Người dùng click vào “Cancel” Đóng hộp thoại thêm từ vựng

1 Người dùng để trống một trong các trường bắt buộc hoặc bỏ trống tất cả

Lỗi xuất hiện dưới phần nhập ở các trường thông tin

2.3.2.3.12 Use case “Xóa từ vựng”

Hình 2.31 Lược đồ chức năng Xóa từ vựng Bảng 2.28 Bảng mô tả chức Xóa từ vựng

Tên use case Xóa từ vựng

 Người tạo nội dung và Người quản trị

 Cho phép xóa từ vựng trong hệ thống

 Người dùng sẽ xóa từ vựng trong hệ thống

 Người dùng click vào icon “Delete” tại từ vựng muốn xóa

 Thành công: Người dùng xóa từ vựng thành công

 Không thành công: Người dùng xóa từ vựng không thành công

“Delete” ở từ vựng muốn xóa

Trang web hiển thị hộp thoại xác nhận “Bạn có muốn xóa từ vựng?”

[Thay thế 1] Đóng hộp thoại xác nhận, hiển thị thông báo “Xóa từ vựng thành công.” và cập nhật lại danh sách từ vựng

1 Người dùng click vào “No” Đóng hộp thoại xác nhận

1 Không thể xóa được từ vựng Hiển thị thông báo lỗi “Error, không thể xóa từ vựng.”

2.3.2.3.13 Use case “Thêm bài trắc nghiệm”

Hình 2.32 Lược đồ chức năng Thêm bài trắc nghiệm Bảng 2.29 Bảng mô tả chức năng Thêm bài trắc nghiệm

Tên use case Thêm bài trắc nghiệm

Them bai tr ac nghiem

 Cho phép thêm bài trắc nghiệm của các bài luyện nghe và ngữ pháp trong hệ thống

 Người dùng sẽ thêm được bài trắc nghiệm mới

 Người dùng click vào “Quản lý bài trắc nghiệm”

 Người dùng click vào bài nghe hoặc ngữ pháp muốn thêm bài trắc nghiệm

 Thành công: Người dùng thêm bài trắc nghiệm thành công

 Không thành công: Người dùng thêm bài trắc nghiệm không thành công

1 Người dùng click vào “Quản lý bài trắc nghiệm”

Trang web hiển thị danh sách bài nghe và ngữ pháp của hệ thống

2 Người dùng click vào “Thêm quiz” và tiếp tục click vào icon

Trang web chuyển hướng đến trang thêm câu hỏi cho bài trắc nghiệm

3 Người dùng nhập đầy đủ câu hỏi, các đáp án cho câu hỏi và check tại đáp án đúng

Hiển thị nội dung người dùng đã nhập

4 Người dùng click vào “Thêm”

“Thêm thành công” và quay về

82 trang hiển thị câu hỏi của bài trắc nghiệm

Quay về trang câu hỏi của bài trắc nghiệm

1 Người dùng không check đáp án đúng

Hiển thị thông báo lỗi “Please check the correct answer”

2 Người dùng để trống câu hỏi Hiển thị lỗi tại trường them câu hỏi

3 Người dùng chỉ nhập một đáp án Hiển thị lỗi “Error, câu hỏi không hợp lệ”

4 Người dùng check chọn đáp án đúng cho tất cả các đáp án được nhập

Hiển thị lỗi “Error, câu hỏi không hợp lệ”

 Nhập 2-3 đáp án cho câu hỏi

2.3.2.3.14 Use case “Chỉnh sửa bài trắc nghiệm”

Hình 2.33 Lược đồ chức năng Thêm bài trắc nghiệm Bảng 2.30 Bảng mô tả chức năng Thêm bài trắc nghiệm

Tên use case Chỉnh sửa bài trắc nghiệm

 Cho phép chỉnh sửa bài trắc nghiệm của các bài luyện nghe và ngữ pháp trong hệ thống

 Người dùng sẽ chỉnh sửa bài trắc nghiệm của hệ thống

 Người dùng click vào “Quản lý bài trắc nghiệm”

 Người dùng click vào bài nghe hoặc ngữ pháp muốn chỉnh sửa bài trắc nghiệm uc Usecases

Chinh sua bai tr ac nghiem

 Thành công: Người dùng chỉnh sửa bài trắc nghiệm thành công

 Không thành công: Người dùng chỉnh sửa bài trắc nghiệm không thành công

1 Người dùng click vào “Quản lý bài trắc nghiệm”

Trang web hiển thị danh sách bài nghe và ngữ pháp của hệ thống

Trang web chuyển hướng đến trang thêm câu hỏi cho bài trắc nghiệm

3 Người dùng đầy đủ nhập câu hỏi, các đáp án cho câu hỏi và check tại đáp án đúng

4 Người dùng click vào “Thêm”

“Thêm thành công” và quay về trang hiển thị câu hỏi của bài trắc nghiệm

5 Người dùng click vào câu hỏi muốn chỉnh sửa

Trang web chuyển hướng đến trang chỉnh sửa câu hỏi cho bài trắc nghiệm

6 Người dùng chỉnh sửa câu hỏi, các đáp án cho câu hỏi và check

7 Người dùng click vào “Sửa”

“Chỉnh sửa thành công” và quay về trang hiển thị câu hỏi của bài trắc nghiệm

8 Người dùng clicl và icon

“Delete” tại câu hỏi muốn xóa

Hiển thị hộp thoại thống báo “Bạn có muốn xóa câu hỏi?”

Xóa câu hỏi, đóng hộp thoại và tải lại trang

Quay về trang câu hỏi của bài trắc nghiệm

1 Người dùng không check đáp án đúng

Hiển thị thông báo lỗi “Please check the correct answer”

2 Người dùng để trống câu hỏi Hiển thị lỗi tại trường thêm câu hỏi

3 Người dùng chỉ nhập một đáp án Hiển thị lỗi “Error, câu hỏi không hợp lệ”

4 Người dùng check chọn đáp án đúng cho tất cả các đáp án được nhập

Hiển thị lỗi “Error, câu hỏi không hợp lệ”

 Nhập 2-3 đáp án cho câu hỏi

2.3.2.4 Chức năng của “Người quản trị”

2.3.2.4.1 Use case “Khóa tài khoản”

Hình 2.34 Lược đồ chức năng Khóa tài khoản Bảng 2.31 Bảng mô tả chức năng Khóa tài khoản

Tên use case Khóa tài khoản

 Cho phép người quản trị khóa người dùng

 Người dùng bị khóa sẽ không thể truy cập vào website

 Quản trị click vào “Quản lý người dùng”

 Quản trị chọn một tài khoản muốn khóa

 Quản trị click vào “Khóa tài khoản”

 Người dùng đã đăng nhập vào hệ thống với quyền quản trị viên

 Thành công: Trang web thông báo “Account was blocked.”

 Không thành công: Trang web hiện thông báo “Couldn’t block account.”

1 Quản trị click vào “Quản lý người dùng”

Hiển thị danh sách người dùng trong hệ thống

2 Quản trị chọn một tài khoản muốn khóa

Chuyển hướng đến trang chi tiết người dùng

3 Quản trị click vào “Khóa tài khoản”

Hiển thị thông báo “Account was blocked”

1 Khóa tài khoản không thành công Đóng hộp thoai Hiển thị thông báo

2.3.2.4.2 Use case “Mở khóa tài khoản”

Hình 2.35 Lược đồ chức năng Mở khóa tài khoản Bảng 2.32 Bảng mô tả chức năng Mở khóa tài khoản

Tên use case Mở khóa tài khoản

 Cho phép người quản trị mở khóa tài khoản người dùng

 Người dùng có thể truy cập vào website

 Quản trị chọn một tài khoản mở muốn khóa

 Quản trị click vào “Mở khóa tài khoản”

 Thành công: Trang web thông báo “Account was unblocked.”

 Không thành công: Trang web hiện thông báo “Couldn’t unblock account.”

2 Quản trị chọn một tài khoản muốn mở khóa

3 Quản trị click vào “Mở khóa tài khoản”

Hiển thị thông báo “Account was unblocked”

1 Khóa tài khoản không thành công Đóng hộp thoai Hiển thị thông báo

2.3.2.4.3 Use case “Phân quyền người dùng”

Hình 2.36 Lược đồ chức năng Phân quyền người dùng Bảng 2.33 Bảng mô tả chức năng phân quyền người dùng

Tên use case Phân quyền người dùng

 Cho phép người quản trị cấp quyền truy cập cho người dùng

 Người dùng truy cập vào hệ thống theo quyền mặc định

 Quản trị click vào “Quản lý người dùng” uc Usecases

 Quản trị click chọn một tài khoản người dùng

 Thành công: Trang web thông báo “Chỉnh sửa tài khoản thành công.”

 Không thành công: Trang web hiện thông báo “Không thể chỉnh sửa tài khoản”

2 Quản trị chọn một tài khoản muốn chỉnh sửa

3 Quản trị click vào “Chỉnh sửa” Chuyển hướng đến trang chỉnh sửa

4 Quản trị thay đổi quyền của người dùng

Hiển thị thông tin được thay đổi

Hiển thị thông báo “Chỉnh sửa tài khoản thành công”, quay về trang chi tiết người dùng

1 Người dùng chọn “Quay lại” Quay về trang chi tiết người dùng

1 Phân quyền không thành công Đóng hộp thoai Hiển thị thông báo

“Chỉnh sửa tài khoản không thành công”

2.3.2.4.4 Use case “Thêm người dùng”

Hình 2.37 Lược đồ chức năng Thêm người dùng Bảng 2.34 Bảng mô tả chức năng Thêm người dùng

Tên use case Thêm người dùng

 Cho phép người quản trị thêm người dùng vào hệ thống

 Quản trị chỉnh thêm được người dùng

 Thành công: Trang web thông báo “Thêm tài khoản thành công.”

 Không thành công: Trang web hiện thông báo “Không thể thêm tài khoản”

2 Quản trị click vào icon “Add” Chuyển hướng đến trang thêm người dùng

3 Quản trị nhập email, tên và chọn quyền cho người dùng

Hiển thị thông tin quản trị nhập

Hiển thị thông báo “Thêm tài khoản thành công”, quay về trang danh sách người dùng

1 Người dùng chọn “Quay lại” Quay về trang danh sách người dùng

1 Quản trị nhập email đã tồn tại Hiển thị thông báo “Email đã tồn tại”

2.3.2.4.5 Use case “Chỉnh sửa người dùng”

Hình 2.38 Lược đồ chức năng Chỉnh sửa người dùng Bảng 2.35 Bảng mô tả chức năng chỉnh sửa người dùng

Tên use case Chỉnh sửa người dùng

 Cho phép người quản trị chỉnh sửa thông tin cho người dùng

 Người quản trị chỉnh sửa thông tin người dùng

 Thành công: Trang web thông báo “Chỉnh sửa tài khoản thành công.”

 Không thành công: Trang web hiện thông báo “Không thể chỉnh sửa tài khoản”

2 Quản trị chọn một tài khoản muốn chỉnh sửa

3 Quản trị click vào “Chỉnh sửa” Chuyển hướng đến trang chỉnh sửa

4 Quản trị chỉnh sửa tên, tài khoản email của người dùng

Hiển thị thông tin được thay đổi

Hiển thị thông báo “Chỉnh sửa tài khoản thành công”, quay về trang chi tiết người dùng

1 Người dùng chọn “Quay lại” Quay về trang chi tiết người dùng

1 Người dùng để trống các trường bắt buộc

Hiển thị lỗi tại các trường thông tin đó

2 Email đã tồn tại Hiển thị lỗi “Email đã tồn tại.”

2.3.2.4.6 Use case “Xem danh sách người dùng”

Hình 2.39 Lược đồ chức năng Xem danh sách người dùng Bảng 2.36 Bảng mô tả chức năng Xem danh sách người dùng

Tên use case Xem danh sách người dùng uc Usecases

Xem danh sach nguoi dung

 Cho phép người quản trị xem danh sách người dùng trong hệ thống

 Người quản trị xem được danh sách người dùng của hệ thống

 Thành công: Hiển thị danh sách người dùng

2.3.2.4.7 Use case “Xem thống kê”

Hình 2.40 Lược đồ chức năng Xem thống kê Bảng 2.37 Bảng mô tả chức năng Xem thống kê

Tên use case Xem thống kê

 Cho phép người quản trị xem danh sách thống kê số lượng người dùng, bài nghe, ngữ pháp, tự vựng, bài trắc nghiệm

 Người quản trị xem được danh sách thống kê số lượng người dùng, bài nghe, ngữ pháp, tự vựng, bài trắc nghiệm

 Quản trị click vào “Thống kê”

 Người dùng đã đăng nhập vào hệ thống với quyền quản trị viên uc Usecases

 Thành công: Hiển thị danh sách người dùng

1 Quản trị click vào “Thống kê” Hiển thị số lượng người dùng, bài nghe, ngữ pháp, tự vựng, bài trắc nghiệm của hệ thống

THIẾT KẾ PHẦN MỀM

LƯỢC ĐỒ LỚP

Hình 3.1 Lược đồ lớp Learning English Website class Lear ningEnglish

The API provides a comprehensive set of endpoints to interact with words and topics, including deleting a word, retrieving all words, and searching for words by topic or keyword Additionally, it offers endpoints to fetch total word packs, word packs by topic, and word details, enabling users to access a wide range of word-related data The API also supports contributing words through POST and PUT requests, allowing users to contribute to the word database Furthermore, users can retrieve words by specific words, search for words, and get topics, making it a versatile tool for word-based applications.

Gr am m ar Contr oller

+ delet eById(): json + get AllGrammars(): json + get ById(): json + get ByLevel(): json + get Grammar(): json + get Levels(): json + get SearchGrammar(): json + post Grammar(): json + put Grammar(): json

+ get AllQuizzes(): json + get ById(): json + get ByList eningId(): json + post Quiz(): json

+ get Leaderboard(): json + post Score(): json

+ get WordPackCWG(): json + get WordPackFS(): json + get WordPackWMG(): json

+ count Grammar(): json + count List ening(): json + count Quiz(): json + count User(): json + count Word(): json

+ get ById(): json + get IPARelat ive(): json + get IPAsByType(): json

- Quest ionTest Id: Object Id

+ get AllTest s(): void + get ById(): void + post Test (): void

+ get ById(): void + get ByTest Id(): void + get ByTest IdAndPart (): void + post FileTest (): void

+ get ByFileTest Id(): void + get ById(): void + post Quest ion(): void

+ get ById(): void + get ByQuest ionTest Id(): void + post Answer(): void + post ManyAnswers(): void

LƯỢC ĐỒ TUẦN TỰ

Hình 3.2 Lược đồ tuần tự chức năng Đăng ký sd Dang Ky

Main Login Register User Contr oller User alt

[ Tim t hay nguoi dung voi email t uong t u]

[ Nguoi dung nhap day du t hong t in]

[ Xac t huc mat khau va mat khau khong t rung khop]

[ Nguoi dung dien day du t hong t in] ret urn(): success show error message()

Di den t rang Dang nhap()

Dang ky t ai khoan (t en, email, mat khau) ret urn(): error message

Nhap Ten nguoi dung, Email, Mat khau, Xac t huc mat khau() ret urn(): null show error message() ret urn(): user Tim kiem nguoi dung (email) show error message()

Nhan but t on Dang Ky()

Ma hoa mat khau, gui email den email t ai khoan vua dang ky()

Click but t on Dang Ky()

Thong bao dang ky t hanh cong()

Den t rang Dang Ky() show error message()

Hình 3.3 Lược đồ tuần tự chức năng Đăng nhập

3.2.2.2 Lược đồ Đăng xuất sd Dang Nhap

Main Login User Contr oller User alt

[ Nguoi dung dien day du t hong t in]

[ Nguoi dung de t rong Email hoac Mat khau] alt

[ Thanh Cong] ret urn(): error message show error message() ret urn(): error message show error message()

Tim kiem user() ret urn(): success Click but t on Dang Nhap()

Di den t rang chu nguoi dung()

Nhan but t on Dang Nhap()

Nhap Email va Mat khau() show error message() show error message() ret urn(): user, message Xac t huc nguoi dung (Email, Mat khau)

Den t rang Dang Nhap() show error message() ret urn(): error message

Hình 3.4 Lược đồ tuần tự chức năng Đăng xuất

3.2.2.3 Lược đồ Học bảng phiên âm sd Dang xuat

Tr angChu User Contr oller click Dang xuat () click avat ar() ret urn(): success Dang xuat t ai khoan()

Thong bao Dang xuat t hanh cong() reload()

Hình 3.5 Lược đồ tuần tự chức năng Học phiên âm

3.2.2.4 Lược đồ Học ngữ pháp sd Hoc phien am

ManHinhTrangChu ManHinhPhienAm IPAController IPAs opt

[Nguoi dung click Relative Pronunciation]

The search function retrieves a list of pronunciations Upon clicking the Pronunciation button, the system returns a list of pronunciations Selecting a pronunciation type yields a list of pronunciations, while choosing a specific pronunciation returns two lists of pronunciations.

Di den trang phien am()

Tim kiem cac phien am cung loai(type) click Relative pronunciation() return(): phien am

Tim kiem phien am(id) Lay chi tiet phien am(id) return(): danh sach phien am

3.2.2.5 Lược đồ học từ vựng sd Hoc ngu phap

ChiTietNguPhap Gr am m ar Contr oller Gr am m ar Quiz Question

The system provides users with various options to interact with the grammar quiz, including the ability to select a grammar rule, take a quiz, check answers, reset the quiz, and show answers Upon user selection, the system returns relevant grammar information and a list of questions Additionally, users can search for specific grammar lessons using the grammar ID, allowing for a more tailored learning experience.

Lay ngu phap va quiz (grammarid)

Hien t hi dap an cac cau hoi() reload()

Chon mot ngu phap() click CheckAnswer ()

Tim kiem ngu phap(level) clickShowAnswer ()

Di den t rang danh sach ngu phap()

Hien t hi ket qua dung, sai () ret urn(): quiz click Quiz() ret urn(): grammar

Lay danh sach cau hoi cua quiz(quizid)

Di den t rang chi t iet (grammarid) clickReset Quiz () ret urn(): list grammar

Lay danh sach ngu phap(level)

Chon dap an() Chon mot muc do()

Hình 3.6 Lược đồ tuần tự chức năng Học ngữ pháp

Hình 3.7 Lược đồ tuần tự chức năng Học từ vựng

3.2.2.6 Lược đồ Học bài nghe sd Hoc tu vung

SlideTuVung Wor dContr oller Wor d

ChuDeTuVung Galler yTuVung opt Xem danh sach o che do galler y opt Xem danh sach o che do Slide click icon Next ()

Hien t hi danh sach 7 t u vung t iep t heo() click icon Prev()

Hien t hi danh sach t u() Lay danh sach t u(t opic)

Chuyen sang che do silde()

Hien t hi danh sach 7 t u vung t ruoc do() click icon Slide() Click icon Next () Chon mot chu de()

Hien t hi t u da xem t ruoc do() ret urn(): list word click icon Prev()

3.2.2.7 Lược đồ Đổi mật khẩu sd Hoc bai nghe

ChiTietBaiNghe ListeningController Listenning Quiz Question

ChuDeBaiNghe DanhSachBaiNghe opt Chon CheckAnsw er opt Nguoi dung chon ResetQuiz opt Chon Show Answ er opt Nguoi dung chon Quiz

Chon mot chu de() reload() click CheckAnswer() return(): list listenning return(): listening, quiz

Hien thi danh sach() return(): quiz

Di den trang danh sach bai nghe() return(): listening

Di den trang chi tiet(listeningid) click Quiz() Chon mot bai nghe()

Hien thi dap an cac cau hoi() clickResetQuiz()

Tim kiem bai nghe(topic)

Hien thi ket qua dung, sai()

Lay danh sach cau hoi cua quiz(quizid)

Lay danh sach bai nghe(topic)

Tim kiem bai trac nghiem(listeningid)

Lay bai nghe va quiz (listeningid) clickShowAnswer()

Chon dap an() return(): list question

Hình 3.8 Lược đồ tuần tự chức năng Học bài nghe

Hình 3.9 Lược đồ tuần tự chức năng Đổi mật khẩu

3.2.2.8 Lược đồ Làm bài Test sd Doi m at khau

ChinhSuaThongTin TrangChu alt Kiem tra hop le

[Mat khau duoi 6 ky tu]

[Mat khau moi va xac nhan mat khau khong trung khop] alt

Nhap mat khau moi va xac nhan mat khau()

Chon muc Thong tin ca nhan()

Thong bao doi thanh cong() return(): success

Thong bao loi() click Save()

Hien thi thong tin nguoi dung() Click avatar tren thanh navigation()

Doi mat khau cua tai khoan(mat khau)

Di den trang chinh sua() return(): success, message Click button Chinh sua()

Doi mat khau(mat khau)

Hình 3.10 Lược đồ tuần tự chức năng Làm bài Test

3.2.3.1 Xem danh sách bài nghe sd Lam Test

DanhSachBaiTest BatDauThi ThucHienTest TestContr oller Subm itTestContr oller Test Subm itTest

Hien t hi ket qua bai Test () ret urn(): score ret urn(): t est Lay danh sach cau hoi cua Test (Test Id) Lay bai Test ()

Hien t hi t rang bat dau Test ()

Thuc hien Test va nop bai()

Tinh diem Test nguoi dung t huc hien() Hien t hi bai Test ()

3.2.3.2 Thêm bài nghe sd Xem danh sach bai nghe

HopThoaiLoc opt Tim kiem bai nghe alt

[ Ket qua t im kiem khac null]

[ Ket qua t im kiem la null] opt Che do xem bai nghe opt Loc danh sach bai nghe ret urn(): list list ening ret urn(): list list ening

Lay danh sach t heo t hu t u (t ype) ret urn(): list list ening

Tim kiem bai nghe(t opic) ret urn(): null

Tim kiem danh sach bai nghe co t en giong voi t u khoa t im kiem(name)

Lay danh sach bai nghe(t opic)

Chon chu de bai nghe muon loc()

Lay danh sach bai nghe() click Quan ly bai nghe() click icon Filt er()

Di den t rang quan ly bai nghe()

Hien t hi hop t hoai loc()

Lay danh sach t heo t hu t u(t ype) Hien t hi " No result " ()

Chon mot t rong hai t uy chon " Newest " hoac " Oldest " ()

Hien t hi danh sach bai nghe() click icon Set t ing()

Tim kiem danh sach bai nghe(name)

Hien t hi danh sach bai nghe() Hien t hi danh sach bai nghe()

Hien t hi danh sach loc()

Lay danh sach bai nghe t rong he t hong() click but t on OK() ret urn(): list list ening

Hình 3.11 Lược đồ tuần tự chức năng Xem danh sách bài nghe

3.2.3.3 Chỉnh sửa bài nghe sd Them bai nghe

[ Link yout ube khong hop le]

[ Nguoi dung de t rong cac t hong t in bat buoc] alt

[ Thanh cong] show error mesage() ret urn(): list ening ret urn(): error message

Tao moi bai nghe() show error message() click icon Add() show error message()

Thong bao t hem t hanh cong() ret urn(): success

Them bai nghe() ret urn(): null click but t on Them () Nhap t en, chu de, mo t a, video, hinh anh, script ()

Hình 3.12 Lược đồ tuần tự chức năng Thêm bài nghe

112 sd Chinh sua bai nghe

[ Nguoi dung day du cac t hong t in]

[ Nguoi dung de t rong cac t ruong t hong t in bat buoc]

[ Link yout ube khong hop le] show error message() ret urn(): list ening ret urn(): list ening

Tim kiem bai nghe (id)

Thong bao chinh sua t hanh cong() ret urn(): null Tim kiem bai nghe(id) show error mesage() click but t on Sua() ret urn(): error message show error message()

Tim kiem va chinh sua bai nghe() click icon Edit t ai bai nghe can chinh sua()

Chinh sua bai nghe() ret urn(): list ening ret urn(): success

Di den t rang chi t iet bai nghe()

Nhap t en, chu de, mo t a, video, hinh anh, script ()

Hình 3.13 Lược đồ tuần tự chức năng Chỉnh sửa bài nghe

Hình 3.14 Lược đồ tuần tự chức năng Xóa bài nghe

3.2.3.5 Xem danh sách ngữ pháp sd Xoa bai nghe

[ Nguoi dung click Cancel] alt

Thong bao xoa khong t hanh cong()

Dong hop t hoai() ret urn(): error message

Hien t hi hop t hoai xac nhan() ret urn(): t rue Tim kiem va xoa bai nghe(id) reload() ret urn(): false click icon Delet e t ai bai nghe() ret urn(): success

Hình 3.15 Lược đồ tuần tự chức năng Xem danh sách ngữ pháp

3.2.3.6 Thêm ngữ pháp sd Xem danh sach ngu phap

QuanLyNguPhap Gr am m ar Contr oller Gr am m ar

HopThoaiLoc opt Tim kiem ngu phap alt

[ Ket qua t im kiem la null] opt Sap xep ngu phap opt Che do xem

Hien t hi danh sach ngu phap()

Hien t hi hop t hoai loc() Nhap t en ngu phap()

Tim kiem ngu phap(level) ret urn(): list grammar ret urn(): list grammar Lay danh sach ngu phap()

Chon muc do ngu phap muon loc

Lay danh sach ngu phap t heo t hu t u(t ype)

Hien t hi danh sach ngu phap() click Quan ly ngu phap()

Lay danh sach ngu phap(level) click icon Set t ing()

Hien t hi " No result " () click but t on OK() ret urn(): null

Hien t hi danh sach ngu phap()

Tim kiem danh sach ngu phap co t en giong voi t u khoa t im kiem(name)

Tim kiem danh sach ngu phap(name)

Lay danh sach t heo t hu t u(t ype) ret urn(): list grammar

Di den t rang quan ly ngu phap() ret urn(): list grammar Chon mot t rong hai t uy chon " Newest " hoac " Oldest " ()

Lay danh sach ngu phap t rong he t hong()

Dong hop t hoai() click icon Filt er()

Hình 3.16 Lược đồ tuần tự chức năng Thêm ngữ pháp

3.2.3.7 Chỉnh sửa ngữ pháp sd Them ngu phap

[ Nguoi dung dien day du t hong t in]

[ Nguoi dung de t rong cac t hong t in bat buoc]

[ Link yout ube khong hop le]

Dong hop t hoai() show error mesage()

Them chu de moi vao danh sach chu de() ret urn(): error message click icon Add()

Thong bao t hem t hanh cong() show error mesage() click but t on Them()

Dong hop t hoai() Nhap chu de, noi dung()

Them ngu phap moi() click icon Add de t hem cac chu de cho ngu phap() ret urn(): grammar

Them ngu phap vao dat abase() ret urn(): success ret urn(): null show error mesage() Nhap t ieu de, noi dung, video, hinh anh, audio, script ()

116 sd Chinh sua ngu phap

Gr am m ar Contr oller Gr am m ar QuanLyNguPhap ChinhSuaNguPhap

HopThoaiThem ChuDe opt Them chu de cho ngu phap alt

[ Nguoi dung cho Cancel] opt Chinh sua chu de ngu phap alt

[ Nguoi dung de t rong t hong t in bat buoc]

[ Link yout ube khong hop le] alt

Nhap chu de, noi dung()

Lay chi t iet ngu phap(id) ret urn(): null click icon Edit t ai ngu phap() ret urn(): grammar

Dong hop t hoai() click vao chu de() ret urn(): grammar show error mesage()

Luu chu de chinh sua()

Dong hop t hoai() show error message()

Dong hop t hoai() Chinh sua t en chu de, noi dung()

Nhap t ieu de, noi dung, video, hinh anh, audio, script () click but t on Sua()

Hien t hi chi t iet ngu phap() show error mesage() ret urn(): success

Thong bao t hem t hanh cong() click icon Add de t hem cac chu de cho ngu phap()

Di den t rang chi t iet ngu phap() ret urn(): error message

Tim kiem ngu phap(id)

Tim kiem va chinh sua ngu phap()

Them chu de moi vao danh sach chu de()

Hình 3.17 Lược đồ tuần tự chức năng Chỉnh sửa ngữ pháp

Hình 3.18 Lược đồ tuần tự chức năng Xóa ngữ pháp

3.2.3.9 Xem danh sách từ vựng sd Xoa ngu phap

QuanLyNguPhap Gr am m ar Contr oller Gr am m ar

Dong hop t hoai() reload() ret urn(): t rue Xoa ngu phap(id) click icon Delet e t ai bai nghe() ret urn(): error message ret urn(): false

Thong bao xoa khong t hanh cong() ret urn(): success

Tim kiem va xoa ngu phap(id) Dong hop t hoai()

Hien t hi hop t hoai xac nhan()

118 sd Xem danh sach tu vung

QuanLyTuVung Wor dContr oller Wor d

HopThoaiLoc opt Tim kiem tu alt

[ Ket qua t im kiem la null] opt Sap xep tu vung opt Loc danh sach tu vung ret urn(): list word ret urn(): list word

Hien t hi danh sach t u() click Quan ly bai nghe()

Chon mot t rong hai t uy chon " A->z" , " Z->A" ,

Tim kiem danh sach t u(name)

Tim kiem bai nghe() Dong hop t hoai() ret urn(): null click but t on OK()

Hien t hi danh sach t u() Nhap t u()

Lay danh sach t u() click icon Set t ing()

Hien t hi danh sach bai nghe()

Lay danh sach t u vung t rong he t hong()

Chon chu de, loai t u, chuyen nganh, cap bac t u muon loc()

Lay danh sach t heo t hu t u(t ype)

Di den t rang quan ly t u vung() ret urn(): list word

Lay danh sach t heo t hu t u (t ype) click icon Filt er()

Hien t hi " No result " () ret urn(): list word

Hien t hi hop t hoai loc()

Tim kiem t u gan dung va dung voi t u khoa t im kiem(word)

Hình 3.19 Lược đồ tuần tự chức năng Xem danh sách từ vựng

3.2.3.11 Chỉnh sửa từ vựng sd Them tu vung

[ Cau vi du khong chua t u vung moi]

[ Tu da t on t ai] alt

To input all required or non-required fields, use the return() function, which can yield various results including null or an error message Additionally, users can add new vocabulary by clicking the "Add" button, utilizing the Them tu vung moi() function.

Them t u vung moi() click icon Add() show error mesage() show error message() show error message() ret ut rn(): word Thong bao t hem t hanh cong()

Tim kiem t u vung (word) ret urn(): success show error message()

Hình 3.20 Lược đồ tuần tự chức năng Thêm từ vựng

Hình 3.21 Lược đồ tuần tự chức năng Chỉnh sửa từ vựng

3.2.3.12 Xóa từ vựng sd Chinh sua tu vung

[ Cau vi du khong chua t u vung moi]

[ Thanh cong] show error message() ret urn(): error message

Thong bao chinh sua t hanh cong() ret urn(): null

Tim kiem va chinh sua t u() ret urn(): word click icon Edit t ai t u muon chinh sua() show error message() show error message()

Nhap day du cac t hong t in bat buoc hoac khong bat buoc () ret urn(): word

Di den t rang chinh sua t u() click but t on Sua()

Hien t hi chi t iet t u vung() ret urn(): success

Chinh sua t u vung()Lay chi t iet t u(id)

Hình 3.22 Lược đồ tuần tự chức năng Xóa từ vựng

3.2.3.13 Thêm bài trắc nghiệm sd Xoa tu vung

QuanLyTuVung Wor dContr oller Wor d

Dong hop t hoai() Xoa t u vung(id) Hien t hi hop t hoai xac nhan() ret urn(): false

Tim kiem va xoa t u vung(id) click icon Delet e t ai bai nghe()

Thong bao xoa khong t hanh cong() ret urn(): error message ret urn(): t rue ret urn(): success

Hình 3.23 Lược đồ tuần tự chức năng Thêm bài trắc nghiệm

3.2.3.14 Chỉnh sửa bài trắc nghiệm

3.2.4 Người quản trị sd Them bai trac nghiem

QuanLyBaiTracNghiem ChiTietBaiTracNghiem ThemCauHoi QuestionController Question alt

Quay lai trang chi tiet quiz() return(): success

Them cau hoi cho bai trac nghiem(quizid) click vao mot bai nghe hoac ngu phap()

Di den trang them cau hoi() return(): error message return(): success

Tao bai trac nghiem() return(): quiz return(): question Them cau hoi(quizid)

Tao bai trac nghiem () show error message()

Nhap cau hoi, dap an, chon dap an dung()

Di den trarng chi tiet() return(): null click icon Add() click button Them()

123 Hình 3.24 Lược đồ tuần tự chức năng Chỉnh sửa bài trắc nghiệm sd Chinh sua bai tr ac nghiem

QuanLyBaiTr acNghiem ChiTietBaiTr acNghiem ChinhSuaCauHoi QuestionContr oller Question

[ That bai] opt Chinh sua cau hoi cua quiz opt Xoa cau hoi cua quiz alt

[ Nguoi dung chon Cancel] ret urn(): success show error message()

Hien t hi cau hoi cua quiz()

Quay lai t rang chi t iet quiz() Lay danh sach cau hoi cua quiz(quizid)

Xoa cau hoi(quest ionid) ret urn(): success click vao mot bai nghe hoac ngu phap()

Xoa cau hoi(quest ionid)

Hien t hi hop t hoai xac nhan() ret urn(): error message Chinh sua cau hoi, dap an, chon dap an dung() reload()

Tim kiem va chinh sua cau hoi(quest ionid) click icon Edit t ai cau hoi()

Chinh sua cau hoi (quest ionid) ret urn(): list quest ion

Dong hop t hoai() ret urn(): quest ion ret urn(): t rue ret urn(): null Lay danh sach cau hoi(quizid) click icon Delet e t ai cau hoi()

Di den t rang chinh sua()

Di den t rang chi t iet ()

3.2.4.1 Lược đồ Khóa tài khoản

Hình 3.25 Lược đồ tuần tự chức năng Khóa tài khoản

3.2.4.2 Lược đồ Mở khóa tài khoản sd Khoa nguoi dung

TrangChu QuanLyNguoiDung ChiTietNguoiDung UserController User alt

[That bai] click Khoa tai khoan() return(): false click Quan ly nguoi dung()

Hien thi trang chi tiet()

Chon mot tai khoan muon khoa()

Lay danh sach nguoi dung() Den trang danh sach nguoi dung()

Khoa tai khoan(id) return(): error message return(): list user return(): success

Lay danh sach nguoi dung() return(): true Khoa tai khoan(id)

Hien thi danh sach nguoi dung()

Thong bao khoa thanh cong()

Hình 3.26 Lược đồ tuần tự chức năng Mở khóa tài khoản

3.2.4.3 Lược đồ Phân quyền người dùng sd Mo khoa tai khoan

Tr angChu QuanLyNguoiDung ChiTietNguoiDung User Contr oller User alt

Hien t hi t rang chi t iet () ret urn(): false ret urn(): list user

Thong bao mo khoa t hanh cong()

Den t rang danh sach nguoi dung

() click Quan ly nguoi dung() ret urn(): success click Mo khoa t ai khoan()

Hien t hi danh sach nguoi dung

Mo khoa t ai khoan(id)

Chon mot t ai khoan muon mo khoa()

Lay danh sach nguoi dung() ret urn(): t rue

Lay danh sach nguoi dung()

Mo khoa t ai khoan(id) ret urn(): error message

Hình 3.27 Lược đồ tuần tự chức năng Phân quyền người dùng

3.2.4.4 Lược đồ thêm người dùng sd Phan quyen nguoi dung

TrangChu QuanLyNguoiDung ChiTietNguoiDung ChinhSuaNguoiDung QuanLyNguoiDung User

Thong bao chinh sua thanh cong()

Di den trang chinh sua()

Chinh sua nguoi dung(roleType)

Hien thi danh sach nguoi dung()

Chon mot tai khoan() click Quan ly nguoi dung() click Chinh sua() return(): success return(): user

Chinh sua nguoi dung(roleType)Hien thi chi tiet nguoi dung()

Hình 3.28 Lược đồ tuần tự chức năng Thêm người dùng

3.2.4.5 Lược đồ chỉnh sửa người dùng sd Them nguoi dung

Tr angChu QuanLyNguoiDung Them NguoiDung User Contr oller User alt

Di den t rang quan ly()

Thong bao t ai khoan da t on t ai() ret urn(): success ret urn(): success ret urn(): null Tim kiem nguoi dung(email) click icon Add() ret urn(): error message

Den t rang t hem nguoi dung()

Nhap email, t en, chon quyen cho nguoi dung() ret urn(): user Thong bao t hem t hanh cong() click Quan ly nguoi dung()

Them nguoi dung() Them nguoi dung() click but t on Them()

Hình 3.29 Lược đồ tuần tự chức năng Chỉnh sửa người dùng

3.2.4.6 Lược đồ Xem danh sách người dùng sd Chinh sua nguoi dung

Tr angChu QuanLyNguoiDung ChiTietNguoiDung ChinhSuaNguoiDung User Contr oller User alt

[ Email da t on t ai] click Chinh sua() ret urn(): null Hien t hi chi t iet nguoi dung() ret urn(): success click Quan ly nguoi dung() ret urn(): user

Chinh sua nguoi dung (email, t en)

Thong bao chinh sua t hanh cong() ret urn(): error message

Hien t hi danh sach nguoi dung()

Tim kiem nguoi dung (email) Chon mot t ai khoan()

Thong bao email da t on t ai()

Chinh sua t en va email()

Di den t rang chinh sua()

Chinh sua nguoi dung(email, t en)

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

3.2.4.7 Lược đồ Thống kê thông tin

Hình 3.31 Lược đồ tuần tự chức năng Xem thống kế

THIẾT KẾ CƠ SỞ DỮ LIỆU

3.3.1 Lược đồ cơ sở dữ liệu sd Xem danh sach nguoi dung

TrangChu QuanLyNguoiDung UserController User return(): list user Lay tat ca nguoi dung()

Di den trang danh sach nguoi dung()

Hien thi danh sach nguoi dung() return(): list user

Lay danh sach nguoi dung() click Quan ly nguoi dung() sd Xem thong ke

Dem so luong bai nghe, ngu phap, t u vung, bai t rac nghiem, nguoi dung()

Di den t rang Thong ke() ret urn(): so luong bai nghe, ngu phap, t u vung, bai t rac nghiem, nguoi dung

Dem so luong bai nghe, ngu phap, t u vung, bai t rac nghiem, nguoi dung() click Thong ke()

Hien t hi so luong bai nghe, ngu phap, t u vung, bai t rac nghiem, nguoi dung() ret urn(): so luong bai nghe,ngu phap, t u vung, bai t rac nghiem, nguoi dung

Hình 3.32 Lược đồ Cơ sở dữ liệu

STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú

1 id ObjectId Mã ngữ pháp

2 Title String Tiêu đề của ngữ pháp

3 Content String Nội dung của ngữ pháp

4 Video String Link video của ngữ pháp

5 Audio String Link audio của ngữ pháp

6 Image String Link hình ảnh minh họa của ngữ pháp

7 Script String Phụ đề của video ngữ pháp

8 Level Number Cấp độ của ngữ pháp

9 Item Array Các điểm, ví dụ của ngữ pháp

1 id ObjectId Mã của highscore

3 AccountId ObjectId Mã tài khoản

1 id ObjectId Mã phiên âm

2 Audio String Link audio của phiên âm

3 Type String Loại phiên âm

4 Examples Array Danh sách ví dụ của phiên âm

5 Phonetic String Ký âm của phiên âm

6 Video String Link video của phiên âm

7 Image String Link hình ảnh minh họa của phiên âm

8 Title String Tiêu đề của phiên âm

1 id ObjectId Mã bài nghe

2 Name String Tên bài nghe

3 Topic String Chủ đề của bài nghe

4 Description String Mô tả của bài nghẻ

5 Video String Link video của bài nghe

6 Image String Link hình ảnh minh họa của bài nghe

7 Script String Phụ đề của video bài nghe

8 CreateDate Date Ngày tạo bài nghe

1 id ObjectId Mã câu hỏi

2 Content String Nội dung câu hỏi

4 Answers Array Danh sách các câu trả lời

2 ListeningId String Mã bài nghe

1 id ObjectId Mã người dùng

2 Name String Tên người dùng

3 Email String Email của người dùng

4 Password String Mật khẩu của người dùng Mật khẩu đã được mã hóa

5 Coin Number Số điểm hiện có của người dùng

6 RoleType String Loại tài khoản của người dùng

7 IsLocked Boolean Tình trạng tài khoản người dùng

(đang khóa hoặc hoạt động)

1 id ObjectId Mã từ vựng

2 Level String Cấp độ của từ vựng

3 Examples Array Danh sách ví dụ của từ vựng

4 Specialty String Chuyên ngành của từ vựng

5 Topics Array Chủ đề của từ vựng

6 Synonyms Array Danh sách từ đồng nghĩa của từ vựng

7 Word String Tên từ vựng

8 Picture Number Link hình ảnh minh họa của từ vựng

9 Note String Ghi chú về từ vựng

10 Type String Từ loại của từ vựng

11 Phonetic String Phiên âm của từ vựng

12 Mean String Nghĩa của từ vựng

1 id ObjectId Mã bài kiểm tra

2 Type String Phân loại bài kiểm tra

3 Name String Tên bài kiểm tra

6 Duration Number Thời gian làm bài

1 id ObjectId Mã File Test

5 Audio String Audio phần nghe

6 TestId ObjectId Mã bài kiểm tra

1 id ObjectId Mã câu hỏi

2 Sentence Number Thứ tự câu hỏi

5 FileTestId ObjectId Mã File Test

1 id ObjectId Mã đáp án

2 Sentence String Thứ tự đáp án

4 QuestionTestId ObjectId Mã câu hỏi

5 IsCorrect Boolean Đáp án đúng/ sai

6 IsListening Boolean Đáp án câu hỏi phần nghe

1 id ObjectId Mã bài nộp

3 ListenScore Number Điểm phần nghe

4 ReadScore Number Điểm phần đọc

6 StartTime Date Thời gian bắt đầu làm bài

7 FinishTime Date Thời gian nộp bài

8 IsFinish Boolean Cờ kiểm tra đã hết thời gian làm bài

9 TestId ObjectId Mã bài kiểm tra

10 UserId ObjectId Mã người dùng

11 AnswerTests Array Danh sách đáp án người dùng chon

THIẾT KẾ GIAO DIỆN

3.4.1 Giao diện Người dùng và Khách vãng lai

Hình 3.33 Giao diện Đăng nhập Bảng 3.14 Bảng mô tả Giao diện Đăng nhập

1 Textbox Nhập email của người dùng

2 Textbox Nhập password của người dùng

3 Icon Hiện/ẩn mật khẩu dưới dạng ký tự tường minh

4 Link Link chuyển sang trang quên mật khẩu

5 Button Nhấn vào để đăng nhập vào hệ thống

6 Link Link chuyển sang trang đăng ký

Hình 3.34 Giao diện Đăng ký Bảng 3.15 Bảng mô tả Giao diện Đăng ký

2 Textbox Nhập họ tên của người dùng

3 Textbox Nhập mật khẩu của người dùng

5 Textbox Nhập lại mật khẩu của người dùng

6 Icon Hiện/ẩn xác nhận mật khẩu dưới dạng ký tự tường minh

7 Button Nhấn vào để đăng ký tài khoản và gửi mail xác nhận về email đã đăng ký

8 Link Link chuyển sang trang đăng nhập

Hình 3.35 Giao diện quên mật khẩu Bảng 3.16 Bảng mô tả giao diện Quên mật khẩu

2 Button Nhấn vào để gửi email xác nhận

Hình 3.36 Giao diện Đặt lại mật khẩu Bảng 3.17 Bảng mô tả giao diện Đặt lại mật khẩu

1 Textbox Nhập mật khẩu của người dùng

3 Textbox Nhập lại mật khẩu của người dùng

4 Icon Hiện/ẩn xác nhận mật khẩu dưới dạng ký tự tường minh

5 Button Nhấn vào để đổi mật khẩu mới

Hình 3.37 Giao diện trang chủ Bảng 3.18 Bảng mô tả giao diện Trang chủ

1 Link Link chuyển về trang chủ

2 Link Link chuyển sang trang Nghe

3 Link Link chuyển sang trang Ngữ pháp

4 Link Link chuyển sang trang Từ vựng

5 Link Link chuyển sang trang Phát âm

6 Link Link chuyển sang trang Từ điển

7 Link Link chuyển sang trang Game

8 Button Nhấn vào để chuyển sang trang Đăng ký

9 Button Nhấn vào để chuyển sang trang Đăng nhập

Hình 3.38 Giao diện chủ đề bài nghe

Bảng 3.19 Bảng mô tả giao diện chủ đề bài nghe

1 Link Nhấn vào chủ đề bất kỳ sẽ chuyển sang trang danh sách bài nghe của chủ đề đó

3.4.1.7 Danh sách bài nghe của một chủ đề

Hình 3.39 Giao diện Danh sách bài nghe của một chủ đề Bảng 3.20 Bảng mô tả giao diện danh sách bài nghe

1 Link Nhấn vào bài nghe bất kỳ sẽ chuyển sang trang chi tiết bài nghe

Hình 3.40 Giao diện chi tiết bài nghe Bảng 3.21 Bảng mô tả giao diện chi tiết bài nghe

1 Video Video của bài nghe

2 Tab Nhấn vào để chuyển sang tab Phụ đề của bài nghe

3 Tab Nhấn vào để chuyển sang tab Quiz của bài nghe

4 Checkbox Check vào để chọn đáp án của câu hỏi

5 Button Nhấn vào để kiểm tra kết quả bài quiz

6 Button Nhấn vào để đưa quiz về trạng thái ban đầu

7 Button Nhấn vào để hiện đáp án đúng của tất cả câu hỏi

3.4.1.9 Cấp độ của ngữ pháp

Hình 3.41 Giao diện cấp độ của ngữ pháp Bảng 3.22 Bảng mô tả giao diện cấp độ của ngữ pháp

1 Link Nhấn vào cấp độ bất kỳ sẽ chuyển sang trang danh sách ngữ pháp của cấp độ đó

3.4.1.10 Danh sách ngữ pháp của cấp độ

Hình 3.42 Giao diện Danh sách ngữ pháp của cấp độ Bảng 3.23 Bảng mô tả giao diện danh sách ngữ pháp của cấp dộ

1 Link Nhấn vào ngữ pháp bất kỳ sẽ chuyển sang trang chi tiết ngữ pháp

Hình 3.43 Giao diện chi tiết ngữ pháp Bảng 3.24 Bảng mô tả giao diện chi tiết ngữ pháp

1 Video Video của ngữ pháp

2 Audio Audio của ngữ pháp

3 Tab Nhấn vào để chuyển sang tab Phụ đề của video ngữ pháp

4 Tab Nhấn vào để chuyển sang tab Danh sách các chủ

5 Tab Nhấn vào để chuyển sang tab Quiz của ngữ pháp

6 Checkbox Check vào để chọn đáp án của câu hỏi

7 Button Nhấn vào để kiểm tra kết quả bài quiz

8 Button Nhấn vào để đưa quiz về trạng thái ban đầu

9 Button Nhấn vào để hiện đáp án đúng của tất cả câu hỏi

3.4.1.12 Chủ đề của từ vựng

Hình 3.44 Giao diện chủ đề của từ vựng Bảng 3.25 Bảng mô tả giao diện chủ đề của từ vựng

1 Link Nhấn vào chủ đề bất kỳ sẽ chuyển sang trang danh sách từ vựng của chủ đề đó

3.4.1.13 Danh sách từ vựng theo hai chế độ gallery và slide

Hình 3.45 Danh sách từ vựng theo chế độ gallery

Hình 3.46 Danh sách từ vựng theo chế độ slide Bảng 3.26 Bảng mô tả giao diện danh sách từ vựng theo hai chế độ xem

1 Icon Nhấn vào để danh sách từ vựng hiển thị ở chế độ

2 Icon Nhấn vào để danh sách từ vựng hiển thị ở chế độ

3 List Danh sách các từ vựng theo từng trang (chế độ

4 Icon Nhấn vào để chuyển sang trang hoặc từ trước đó

5 Icon Nhấn vào để chuyển sang trang hoặc từ tiếp theo

6 Text Nghĩa của từ vựng

8 Icon Nhấn vào để hệ thống đọc từ vựng đó

10 Text Phiên âm của từ vựng

11 Text Ví dụ của từ vựng

12 Image Hình ảnh minh họa của từ vựng

Hình 3.47 Giao diện Danh sách phiên âm Bảng 3.27 Bảng mô tả giao diện danh sách phiên âm

2 Link Nhấn vào phiên âm bất kỳ sẽ chuyển sang trang chi tiết của phiên âm đó

Hình 3.48 Giao diện Chi tiết phiên âm Bảng 3.28 Bảng mô tả giao diện chi tiết phiên âm

1 Video Video của phiên âm

3 Text Ví dụ của phiên âm

4 Icon Nhấn vào để hệ thống đọc phiên âm

5 List Danh sách các phiên âm cùng loại

6 Button Quay trở về trang phát âm

3.4.1.16 Danh sách các trò chơi

Hình 3.49 Giao diện Danh sách các trò chơi Bảng 3.29 Bảng mô tả giao diện danh sách trò choie

1 Button Nhấn vào để vào chơi game Hãy chọn từ đúng

2 Button Nhấn vào để vào chơi game Ghép từ

3 Button Nhấn vào để vào chơi game Tay nhanh hơn não

4 Button Nhấn vào để xem bảng xếp hạng

Hình 3.50 Giao diện Bảng xếp hạng Bảng 3.30 Bảng mô tả giao diện Bảng xếp hạng

1 List Bảng xếp hạng người chơi có nhiều điểm nhất hệ thống

2 List Bảng xếp hạng game Hãy chọn từ đúng

3 List Bảng xếp hạng game Ghép từ

4 List Bảng xếp hạng game Tay nhanh hơn não

3.4.1.18 Trò chơi Hãy chọn từ đúng

Hình 3.51 Giao diện trò chơi Hãy chọn từ đúng Bảng 3.31 Bảng mô tả giao dện trò chơi Hãy chọn từ đúng

1 Text Câu hỏi hiện tại

Hình 3.52 Giao diện trò chơi Ghép từ Bảng 3.32 Bảng mô tả giao diện trò chơi Ghép từ

4 Icon Hiển thị chi tiết từ của câu hỏi

6 Icon Nhấn vào hệ thống sẽ đọc từ của câu hỏi

7 Icon Nhấn vào để chấp nhận sai câu hỏi hiện tại và chuyển sang câu tiếp theo

8 List Danh sách các ký tự để ghép lại câu trả lời

3.4.1.20 Trò chơi Tay nhanh hơn não

Hình 3.53 Giao diện trò chơi Tay nhanh hơn não Bảng 3.33 Bảng mô tả giao diện trò chơi Tay nhanh hơn nào

2 Text Số điểm hiện tại

4 Icon Nhấn vào hệ thống sẽ đọc từ của câu hỏi

5 List Danh sách hình ảnh (câu trả lời)

3.4.2 Giao diện Người quản trị và Người tạo nội dung

Hình 3.54 Giao diện Quản lý từ vựng Bảng 3.34 Bảng mô tả Giao diện quản lý từ vựng

1 Icon Nhấn vào để chuyển sang trang thêm từ vựng

2 Icon Sắp xếp danh sách từ vựng theo các tiêu chí

3 Icon Nhấn vào để lọc danh sách từ vựng theo tiêu chí

4 Input Tìm kiếm từ vựng

5 List Danh sách từ vựng

6 Icon Nhấn vào để chuyển sang trang sửa từ vựng

7 Icon Nhấn vào để xóa từ vựng

Hình 3.55 Giao diện Thêm từ vựng Bảng 3.35 Bảng mô tả Giao diện Thêm từ vựng

1 Input file Thêm hình ảnh minh họa cho từ vựng

3 Input Nhập nghĩa của từ vựng

4 Input Nhập phiên âm của từ vựng

5 Select Chọn từ loại của từ vựng

6 Select Chọn cấp độ của từ vựng

7 Select Chọn chuyên ngành cho từ vựng

8 Input Nhập ví dụ cho từ vựng

9 Input Nhập các từ đồng nghĩa cho từ vựng

10 Input Nhập các từ trái nghĩa cho từ vựng

11 Input Nhập ghi chú cho từ vựng

12 Select Chọn chủ đề cho từ vựng

13 Button Nhấn vào để quay lại trang quản lý từ vựng

14 Button Nhấn để thêm từ vựng mới

Hình 3.56 Giao diện Sửa từ vựng Bảng 3.36 Bảng mô tả giao diện Sửa từ vựng

1 Input file Thêm hình ảnh minh họa cho từ vựng

3 Input Nhập nghĩa của từ vựng

4 Input Nhập phiên âm của từ vựng

5 Select Chọn từ loại của từ vựng

6 Select Chọn cấp độ của từ vựng

7 Select Chọn chuyên ngành cho từ vựng

8 Input Nhập ví dụ cho từ vựng

9 Input Nhập các từ đồng nghĩa cho từ vựng

10 Input Nhập các từ trái nghĩa cho từ vựng

11 Input Nhập ghi chú cho từ vựng

12 Select Chọn chủ đề cho từ vựng

13 Button Nhấn vào để quay lại trang quản lý từ vựng

14 Button Nhấn để sửa từ vựng

Hình 3.57 Giao diện Quản lý bài nghe Bảng 3.37 Bảng mô tả giao diện quản lý bài nghe

1 Icon Nhấn vào để chuyển sang trang thêm bài nghe

2 Icon Sắp xếp danh sách bài nghe theo các tiêu chí

3 Icon Nhấn vào để lọc danh sách bài nghe theo các tiêu chí

4 Input Tìm kiếm bài nghe

5 List Danh sách bài nghe

6 Icon Nhấn vào để chuyển sang trang sửa bài nghe

7 Icon Nhấn vào để xóa bài nghe

Hình 3.58 Giao diện Thêm bài nghe Bảng 3.38 Bảng mô tả giao diện Thêm bài nghe

1 Input Thêm hình ảnh minh họa cho bài nghe

2 Input Nhập tên bài nghe

3 Input Nhập mô tả cho bài nghe

4 Select Chọn chủ đề cho bài nghe

5 Tab Nhấn vào để chuyển sang tab Upload

6 Tab Nhấn vào để chuyển sang tab Link

7 Input Thêm video cho bài nghe

8 Text Editor Nhập phụ đề cho video bài nghe

9 Button Nhấn vào để quay lại trang quản lý bài nghe

10 Button Nhấn vào để tạo bài nghe

Hình 3.59 Giao diện Sửa bài nghe Bảng 3.39 Bảng mô tả giao diện Sửa bài nghe

2 Input Nhập tên bài nghe

3 Input Nhập mô tả cho bài nghe

4 Select Chọn chủ đề cho bài nghe

7 Input Thêm video cho bài nghe

8 Text Editor Nhập phụ đề cho video bài nghe

9 Button Nhấn vào để quay lại trang quản lý bài nghe

10 Button Nhấn vào để sửa bài nghe

3.4.2.7 Quản lý bài trắc nghiệm

Hình 3.60 Giao diện Quản lý bài trắc nghiệm Bảng 3.40 Bảng mô tả Giao diện quản lý bài trắc nghiệm

1 Icon Nhấn vào để lọc quiz theo ngữ pháp hay bài nghe

2 List Danh sách ngữ pháp và bài nghe, nhấn vào một bài để chuyển sang trang chi tiết quiz của bài đó

3.4.2.8 Chi tiết bài trắc nghiệm

Hình 3.61 Giao diện Chi tiết bài trắc nghiệm Bảng 3.41 Bảng mô tả giao diện chi tiết bài trắc nghiệm

1 Icon Nhấn vào để chuyển sang trang thêm câu hỏi

5 Icon Nhấn vào để chuyển sang trang sửa câu hỏi

6 Icon Nhấn vào để xóa câu hỏi

Hình 3.62 Giao diện Thêm câu hỏi Bảng 3.42 Bảng mô tả giao diện thêm câu hỏi

1 Input Nhập nội dung câu hỏi

2 Input Nhập đáp án thứ nhất

3 Input Nhập đáp án thứ hai

4 Input Nhập đáp án thứ ba

5 Icon Nhấn vào chọn đáp án đúng

6 Button Nhấn vào để quay lại trang chi tiết quiz

7 Button Nhấn vào để tạo câu hỏi

Hình 3.63 Giao diện Sửa câu hỏi Bảng 3.43 Bảng mô tả giao diện sửa câu hỏi

1 Input Nhập nội dung câu hỏi

2 Input Nhập đáp án thứ nhất

3 Input Nhập đáp án thứ hai

4 Input Nhập đáp án thứ ba

5 Icon Nhấn vào chọn đáp án đúng

6 Button Nhấn vào để quay lại trang chi tiết quiz

7 Button Nhấn vào để sửa câu hỏi

Hình 3.64 Giao diện Quản lý ngữ pháp Bảng 3.44 Bảng mô tả giao diện quản lý ngữ pháp

1 Icon Nhấn vào chuyển sang trang thêm ngữ pháp

2 Icon Nhấn vào để lọc ngữ pháp theo các tiêu chí

3 Input Nhập để tìm kiếm ngữ pháp

4 List Danh sách ngữ pháp, nhấn vào một bài bất kỳ sẽ chuyển sang trang chi tiết của bài đó

5 Icon Nhấn vào để chuyển sang sửa ngữ pháp

6 Icon Nhấn vào để xóa ngữ pháp

Hình 3.65 Giao diện Chi tiết ngữ pháp Bảng 3.45 Bảng mô tả giao diện chi tiết ngữ pháp

1 Video Video của ngữ pháp

2 Tab Nhấn vào để chuyển sang tab Script

3 Tab Nhấn vào để chuyển sang tab Grammar

4 List Danh sách các chủ đề ngữ pháp

5 Button Nhấn vào để quay lại trang quản lý ngữ pháp

6 Button Nhấn vào để chuyển tới trang sửa ngữ pháp

Hình 3.66 Giao diện Thêm ngữ pháp Bảng 3.46 Bảng mô tả giao diện thêm ngữ pháp

2 Input Nhập tên ngữ pháp

3 Input Nhập nội dung ngữ pháp

4 Select Chọn cấp độ cho ngữ pháp

7 Tab Nhấn vào để chuyển sang tab Audio

8 Input Thêm video cho ngữ pháp

9 Text Editor Nhập phụ đề cho video ngữ pháp

11 Icon Nhấn vào để mở hộp thoại thêm chủ đề ngữ pháp

13 Button Nhấn vào để tạo ngữ pháp

Hình 3.67 Giao diện Sửa ngữ pháp Bảng 3.47 Bảng mô tả giao diện sửa ngữ pháp

2 Input Nhập tên ngữ pháp

3 Input Nhập nội dung ngữ pháp

4 Select Chọn cấp độ cho ngữ pháp

7 Tab Nhấn vào để chuyển sang tab Audio

8 Input Thêm video cho ngữ pháp

9 Text Editor Nhập phụ đề cho video ngữ pháp

11 Icon Nhấn vào để mở hộp thoại thêm chủ đề ngữ pháp

12 Icon Nhấn vào để xóa chủ đề ngữ pháp

14 Button Nhấn vào để sửa ngữ pháp

Hình 3.68 Giao diện Quản lý người dùng Bảng 3.48 Bảng mô tả giao diện quản lý người dùng

1 Icon Nhấn vào chuyển sang trang thêm người dùng

3 Text Tên người dùng, nhấn vào để chuyển sang trang chi tiết người dùng

4 Text Loại tài khoản người dùng

5 Text Tình trạng của người dùng

Hình 3.69 Giao diện Chi tiết người dùng Bảng 3.49 Bảng mô tả giao diện chi tiết người dùng

3 Text Loại tài khoản người dùng

6 Text Số điểm hiện có

7 Button Nhấn vào để chuyển sang trang sửa tài khoản

8 Button Nhấn vào để khóa tài khoản (tài khoản đang hoạt động) hoặc mở tài khoản (tài khoản bị khóa)

Hình 3.70 Giao diện thêm người dùng Bảng 3.50 Bảng mô tả giao diện thêm tài khoản

1 Input Thêm ảnh người dùng

2 Input Nhập email người dùng

3 Input Nhập họ tên người dùng

4 Select Chọn loại tài khoản

5 Button Nhấn vào để quay lại trang quản lý người dùng

6 Button Nhấn vào để tạo tài khoản

Hình 3.71 Giao diện sửa người dùng Bảng 3.51 Bảng mô tả giao diện sửa người dùng

1 Input Thêm ảnh người dùng

2 Input Nhập email người dùng

3 Input Nhập họ tên người dùng

4 Select Chọn loại tài khoản

5 Button Nhấn vào để quay lại trang quản lý người dùng

6 Button Nhấn vào để sửa tài khoản

Hình 3.72 Giao diện Trang chủ Admin Bảng 3.52 Bảng mô tả giao diện trang chủ Admin

1 Bar Sidebar chứa các mục quản lý chính

CÀI ĐẶT VÀ KIỂM THỬ

CÀI ĐẶT

4.1.1 Cài đặt ứng dụng Để có thể chạy được ứng dụng, máy tính phải có các yêu cầu sau:

- Windows Terminal hoặc Command Prompt

Các bước để tiến hành cài đặt:

Bước 1: Clone hoặc download project từ link githut: https://github.com/phongvn2611/LearningEnglishWebsite/tree/main

Bước 2: Khởi chạy back-end

- Sau khi clone project về máy, chuột phải vào thư mục backend và chọn

- Chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project hoạt động

- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy back-end

Bước 3: Khởi chạy front-end (admin và user)

- Chọn “Terminal” và nhấn “New Terminal”

- Chạy lệnh “npm i” để cập nhật các thư viện và package cần thiết để project hoạt động

- Tiếp tục chạy lệnh “npm start” trên Windows Terminal để bắt đầu chạy back-end

4.1.2 Công cụ dùng trong dự án

Bảng 4.1 Bảng công cụ dùng trong dự án

Quản lý source code Github

Trình duyệt Google Chrome, Microsoft

Các công cụ thiết kế khác Draw.io, Enterprise Architect

4.1.3 Công nghệ dùng trong dự án

Bảng 4.2 Bảng công nghệ dùng trong dự án

KIỂM THỬ

Trong dự án này, nhóm thực hiện áp dụng phương pháp kiểm thử hộp đen để đánh giá các chức năng chính của ứng dụng Ưu điểm nổi bật của phương pháp này là sự phù hợp trong việc kiểm thử một lượng lớn mã hoặc các chức năng quan trọng của hệ thống, giúp đẩy nhanh quá trình phát triển phần mềm.

 Người dùng: Đăng nhập, đăng ký

 Quản trị viên: Thêm một từ vựng mới, thêm một bài nghe mới

4.2.1 Các trường hợp kiểm thử

Bảng 4.3 Các trường hợp kiểm thử

Giao thức giao tiếp giữa Client và Server

REST API JSON Web Token

Giao diện người dùng của ứng dụng web ReactJs 17.0.2

BackEnd Nodejs sử dụng framework Expressjs

Nodemailer (Gửi mail xác thực) Cloudinary (upload video, hình ảnh, audio)

STT Tác nhân hệ thống

1 Người dùng xác thực Đăng nhập Kiểm tra phản hồi của trang web khi người dùng điền vào biểu mẫu đăng nhập và nhấn nút

2 Khách vãng lai Đăng ký Kiểm tra phản hồi của trang web khi khách vãng lai điền vào biểu mẫu đăng ký và nhấn nút

Thêm từ vựng Kiểm tra phản hồi của trang web khi người tạo nội dung điền vào biểu mẫu thêm từ và nhấn nút “Thêm từ”

4 Người quản trị Thêm người dùng

Kiểm tra phản hồi của trang web khi người quản trị điền vào biểu mẫu thêm người dùng và nhấn nút “Thêm”

4.2.2.1 Kết quả kiểm thử chức năng Đăng nhập

Bảng 4.4 Kết quả kiểm thử chức năng Đăng nhập

STT Mô tả Các bước kiểm thử

Dữ liệu thử Kết quả mong đợi

TC_SI_01 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông

“Đăng nhập” tại trang chủ

Thông báo đăng nhập thành công và điều hướng đến trang chủ

188 tin đăng nhập chính xác

TC_SI_02 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông tin đăng nhập email không chính xác

Thông báo lỗi xuất hiện phía trên tài khoản người dùng: “This email does not exist”

TC_SI_03 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông tin đăng nhập mật khẩu không chính xác

Thông báo lỗi xuất hiện phía trên tài khoản người dùng:

189 Hình 4.1 Kết quả kiểm thử test case TC_SI_01

Hình 4.2 Kết quả kiểm thử test case TC_SI_02

Hình 4.3 Kết quả kiểm thử test case TC_SI_03

4.2.2.2 Kết quả kiểm thử chức năng Đăng ký

Bảng 4.5 Kết quả kiểm thử chức năng Đăng ký

TC_SU_01 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông tin đăng ký chính xác

“Đăng ký” tại trang chủ

Người dùng đăng ký thành công, gửi mail xác thực tài khoản và chuyển hướng đến trang đăng nhập

TC_SU_02 Kiểm tra phản hồi của ứng dụng khi người dùng đăng ký email đã tồn tại

- Nhập lại mật khẩu Nhấn nút

Thông báo lỗi xuất hiện phía trên tài khoản người dùng:

TC_SU_03 Kiểm tra phản hồi của ứng dụng khi người dùng nhập mật khẩu và

Thông báo lỗi tại xác nhận mật khẩu

192 xác nhận mật khẩu không trùng khớp tên

“Đăng ký” khẩu:”123456789” mật khẩu không trùng khớp”

TC_SU_04 Kiểm tra phản hồi của ứng dụng khi người dùng nhập email không hợp lệ

Thông báo lỗi tại trường nhập

TC_SU_05 Kiểm tra phản hồi của ứng dụng khi người dùng nhập mật khẩu dưới

Thông báo lỗi tại mật khẩu

“Mật khẩu ít nhất 6 ký tự”

194 Hình 4.4 Kết quả kiểm thử test case TC_SU_01

Hình 4.5 Kết quả kiểm thử test case TC_SU_01

195 Hình 4.6 Kết quả kiểm thử test case TC_SU_02

4.2.2.3 Kết quả kiểm thử chức năng Thêm từ vựng

Bảng 4.6 Kết quả kiểm thử chức năng Thêm từ vựng

TC_AW_01 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông tin đầy đủ và chính xác

- Click icon Add tại trang quản lý

Nghĩa của từ: “học, nghiên cứu”

Cấp bậc: “Chưa xác định”

TC_AW_02 Kiểm tra phản hồi của ứng dụng khi người dùng thêm từ đã tồn tại

- Chọn chuyên ngành Chọn cấp bậc

Cấp bậc: “Chưa xác định”

Hiển thị thông báo “Từ study (v) đã tồn tại trong từ điển”

TC_AW_03 Kiểm tra phản hồi của ứng dụng khi người dùng thêm từ có câu ví dụ không

- Click icon Add tại trang

“Câu ví dụ phải chứa từ vựng mới”

199 chứa từ vựng mới quản lý

Cấp bậc: “Chưa xác định” Câu ví dụ: “I study English”

200 Hình 4.10 Kết quả kiểm thử test case TC_AW_01

Hình 4.11 Kết quả kiểm thử test case TC_AW_02

Hình 4.12 Kết quả kiểm thử test case TC_AW_03

4.2.2.4 Kết quả kiểm thử chức năng Thêm người dùng

Bảng 4.7 Kết quả kiểm thử chức năng Thêm người dùng

TC_AU_01 Kiểm tra phản hồi của ứng dụng khi người dùng nhập thông tin chính xác

Hiển thị thông báo thành công, quay lại trong quản lý người dùng

TC_AU_02 Kiểm tra phản hồi của ứng dụng khi người dùng thêm tài khoản email đã tồn tại

- Chọn phân quyền Nhấn nút

Hình 4.13 Kết quả kiểm thử test case TC_AU_01

Hình 4.14 Kết quả kiểm thử test case TC_AU_02

KẾT QUẢ ĐẠT ĐƯỢC

Nhóm thực hiện dự án đã tận dụng công nghệ Mern Stack để xây dựng một website cung cấp cái nhìn tổng quan về kiến trúc và thiết kế hệ thống, đồng thời hoàn thiện tất cả các chức năng của ứng dụng như đã đề ra Quá trình này đã giúp nhóm có cái nhìn tổng quan về hoạt động của hệ thống học tiếng Anh trực tuyến Dự án không chỉ áp dụng kiến thức đã học mà còn tích hợp những kiến thức mới được tìm hiểu, góp phần tạo nên một trang web hoàn chỉnh Dự án có thể được truy cập tại địa chỉ https://englishwebsite.herokuapp.com/.

Link Github source code: https://github.com/phongvn2611/LearningEnglishWebsite/tree/main

ƯU ĐIỂM

- Giao diện dễ nhìn, thân thiện với người dùng

- Hệ thống đáp ứng được các chức năng cơ bản của một website học tiếng Anh trực tuyến

- Chức năng làm bài thi thử theo sát với format Toeic

- Ứng dụng có các trò chơi giúp người dùng có thể ghi nhớ từ vựng tốt hơn

5.3 NHƯỢC ĐIỂM VÀ HƯỚNG PHÁT TRIỂN

Một số chức năng có thể phát triển thêm trong tương lai để cải tiến ứng dụng như:

- Chức năng quản lý tiến độ học

- Chức năng kiểm tra trình độ người dùng

- Chức năng học theo lộ trình

[1] Topdev.vn, Expressjs là gì Tất tần tật về Express.js, https://topdev.vn/blog/express-js-la-gi/

[2] topdev.vn, JSON Web Token là gì, https://topdev.vn/blog/json-web-token-la-gi/

Tiêu đề	Xây Dựng Website Học Tiếng Anh Sử Dụng Mern Stack
Tác giả	Trần Phương Linh, Võ Ngọc Phong
Người hướng dẫn	TS. Lê Văn Vinh
Trường học	Trường Đạ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	khóa luận tốt nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

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