đồ án 2 phát triển website học online

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINHTRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

LỜI CẢM ƠN

Bài báo cáo này được thực hiện tại Trường Đại học Công nghệ thông tin, Đại họcQuốc gia Thành phố Hồ Chí Minh dưới sự hướng dẫn khoa học của THS Trần AnhDũng Tôi xin bày tỏ lòng biết ơn sâu sắc tới thầy đã quan tâm, hướng dẫn từ các kỹ năngcơ bản đến định hướng khoa học, tạo điều kiện thuận lợi trong suốt quá trình làm bài báocáo tại trường.

Tôi cũng xin gửi lời cám ơn đến Ban Lãnh đạo Trường Đại học Công nghệ thôngtin, Đại học Quốc gia Thành phố Hồ Chí Minh đã tạo điều kiện tốt về cả cơ sở vật chấtlẫn tinh thần cho tôi trong suốt quá trình hoàn thành bài báo cáo này.

Cuối cùng, tôi bày tỏ lòng biết ơn tới bố mẹ, ông bà, các anh chị em trong giađình Và lòng biết ơn vô tận đến ông nội, sự ra đi của ông có lẽ là sự mất mát lớn nhấttrong cuộc đời tôi kèm theo đó là sự tiếc nuối những điều mà tôi chưa có khả năng làmcho ông Nhưng qua thời gian, tôi đã có thể mở lòng và đón nhận sự mất mát này hơn.Đối với tôi đây là động lực lớn nhất để tôi có thể hoàn thành đồ án 2 này cũng như là tiếptúc phấn đấu cho những chặng đường tiếp theo trong cuộc đời

Thành phố Hồ Chí Minh, ngày 31 tháng 12 năm 2023

Trương Nguyễn Công Chính

Mục lục

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI4

1.1 Đặt vấn đề41.2 Giải pháp41.3 Mục tiêu đề tài41.4 Phạm vi đề tài51.5 Công cụ sử dụng51.6 Đối tượng nghiên cứu6

1.7 Khảo sát và đánh giá các ứng dụng hiện có6CHƯƠNG 2 TỔNG QUAN CÔNG NGHỆ102.1 Phương pháp làm việc10

2.2 Phương pháp nghiên cứu10

2.3 Phương pháp công nghệ và nền tảng102.4 Giới thiệu về ReactJS và Node.js10

CHƯƠNG 3 KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU143.1 Khảo sát hiện trạng14

3.2 Danh sách yêu cầu có trong ứng dụng14CHƯƠNG 4 PHÂN TÍCH HỆ THỐNG164.1 Phân tích các yêu cầu phần mềm164.2 Bẳng trách nhiệm cho từng loại yêu cầu18CHƯƠNG 5 THIẾT KẾ HỆ THỐNG19

5.1 Sơ đồ Usecase tổng quát19CHƯƠNG 6 THIẾT KẾ DỮ LIỆU696.1 Sơ đồ logic hoàn chỉnh69

6.2 Danh sách các bản dữ liệu trong sơ đồ logic696.3 Mô tả từng bảng dữ liệu69

CHƯƠNG 7 THIẾT KẾ GIAO DIỆN75CHƯƠNG 8 CÀI ĐẶT DEMO SẢN PHẨM76

CHƯƠNG 9 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN78

CHƯƠNG 1 TỔNG QUAN ĐỀ TÀI

1.1 Đặt vấn đề

Hệ thống giáo dục đang phải đối mặt với nhiều thách thức trong việc đảm bảo sự tiếpcận chất lượng và linh hoạt trong quá trình học Đặc biệt, sau sự bùng nổ của cuộc cáchmạng công nghiệp 4.0, ứng dụng công nghệ trong giáo dục, đặc biệt là học online, đã trởthành một phần quan trọng của hệ thống giáo dục hiện đại.

Các thách thức của việc học online:

- Học online thường gặp khó khăn trong việc cung cấp tương tác giữa giáo viên vàhọc viên, dẫn đến việc thiếu sự hỗ trợ cá nhân.

- Khả năng truyền đạt kiến thức và tạo nên môi trường học hiệu quả không phải lúcnào cũng được đảm bảo trong môi trường học online.

- Quản lý tiến độ học và theo dõi hoạt động của học viên đôi khi trở nên khó khăn,ảnh hưởng đến khả năng đánh giá và cải thiện chất lượng giáo dục.

trắng tương tác và bài giảng đa phương tiện.

Giao diện học của ứng dụng được thiết kế để thân thiện với người dùng, dễ sử dụngvà có khả năng tương tác để tối ưu hóa trải nghiệm học tập Chúng tôi cũng xây dựng mộthệ thống quản lý tiến độ học viên thông minh, cung cấp dữ liệu chi tiết về hoạt động họctập để giáo viên có thể theo dõi và đánh giá hiệu suất một cách hiệu quả.

Đồ án này không chỉ hướng đến việc cải thiện trải nghiệm học tập của học viên màcòn đặt ra mục tiêu hỗ trợ giáo viên trong quá trình quản lý và giảng dạy Nó mang lạigiải pháp toàn diện cho các thách thức trong học online, từ đó đóng góp vào sự nâng caochất lượng giáo dục và tạo ra một môi trường học tập hiệu quả và an toàn Đồ án này hyvọng sẽ đóng góp vào sự phát triển bền vững của hệ thống học online, mang lại lợi íchlâu dài cho cả giáo viên và học viên.

1.4 Phạm vi đề tài

Đề tài này tập trung vào phát triển và triển khai một ứng dụng học online tiên tiến vớimục đích giải quyết những thách thức chính của môi trường học online hiện nay.

1.5 Công cụ sử dụng

⮚ Công cụ phát triển: Visual Studio Code

⮚ Công cụ dùng để phân tích, thiết kế: Adobe illustrator, Adobe photoshop,Figma.

⮚ Công cụ quản lý dự án: Github.

⮚ Công cụ soạn thảo báo cáo và vẽ sơ đồ: Microsoft Word, draw.io.

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

Ứng dụng này chủ yếu được phát triển để phục vụ cả giáo viên và học viên trongmôi trường học online Tuy nhiên, sự tập trung sẽ làm nổi bật những nhu cầu vàmong muốn chính của cả hai đối tượng này.

1.7 Kháo sát, đánh giá các ứng dụng cạnh tranh hiện có1.7.1 Giao hàng nhanh

F8 – Học lập trình

F8 là một nền tảng học trực tuyến cung cấp các khóa học và chứng chỉ từ tổ chức cánhân F8 F8 cung cấp hàng loạt các chủ đề về lập trình và bao gồm cả lộ trình đầy đủ chongười mới bắt đầu lập trình.

⮚ Ưu điểm của F8 bao gồm:

o Các khóa học F8 cung cấp thường được giảng dạy rất nhiệt tình và uy tính,đảm bảo chất lượng học tập.

o Học viên có thể theo học mọi nơi và mọi lúc có kết nối internet Họ có thểtùy chọn thời gian học phù hợp với lịch trình cá nhân và làm việc của họ.o Sau khi hoàn thành một khóa học, học viên có thể nhận được chứng chỉ

hoặc bằng cấp có giá trị, giúp họ cải thiện sự nghiệp và thăng tiến.

o Một số khóa học có thể được tham gia miễn phí, và người học chỉ phải trảphí nếu muốn nhận chứng chỉ hoặc tham gia các khóa học chuyên sâu.⮚ Tuy nhiên, F8 cũng có một số nhược điểm:

o Chưa cung cấp đa dạng các thể loại khóa học mà chỉ tập trung vào mỗi lậptrình.

o Bằng cấp được cấp trên đây chỉ có tác dụng ở một số doanh nghiệp cố địnhvà rất ít.

o Việc kiểm soát thực hành là còn khá kém.

o Hạn chế trong việc tương tác trực tuyến giữa giảng viên và học viên và cáchọc viên khác trong cùng một khóa học.

CHƯƠNG 2 TỔNG QUAN CÔNG NGHỆ2.1 Phương pháp làm việc

Làm việc khi tâm trạng đạt trạng thái tốt nhất Thường xuyên ghi chép lạicác ý tưởng cũng như là những thay đổi lớn liên quan đến ứng dụng để thuận tiệncho việc chỉnh sửa sau này.

2.2 Phương pháp nghiên cứu

- Phân tích nhu cầu sử dụng của các đối tượng có liên quan đến ứng dụng.- Nghiên cứu, phân tích và đánh giá các ứng dụng có sẵn trên thị trường.

2.3 Phương pháp công nghệ và nền tảng

- Tìm hiểu ngôn ngữ và framework để xây dựng website:

+ Ngôn ngữ lập trình backend: Javascript với Express, Postman.+ Ngôn ngữ lập trình frontend: Javascript với ReactJS

- Ứng dụng sẽ được xây dựng trên mô hình client server:

Hình 1 Mô hình Client – Server

Mô hình client-server là một kiến trúc phần mềm phổ biến trong lập trình và thiết

kế hệ thống, trong đó các thành phần chính được chia thành hai vai trò quan trọng: client(khách hàng) và server (máy chủ) Mô hình này tạo ra một môi trường làm việc phân tán,nơi mà các thiết bị hay phần mềm có thể giao tiếp và truyền thông tin với nhau thông quamạng.

Trong mô hình này, client là thành phần yêu cầu và sử dụng các dịch vụ từ server.Client có thể là một ứng dụng hoặc thiết bị độc lập, thường là người dùng cuối, nhận diệnvà sử dụng các tài nguyên được cung cấp bởi server Trong khi đó, server là nơi cung cấpcác dịch vụ, tài nguyên, hoặc thông tin được yêu cầu bởi client Server có trách nhiệm xửlý các yêu cầu từ client và trả lại kết quả tương ứng.

Mô hình client-server cho phép sự phân tách giữa nhiều client và một server duynhất hoặc nhiều server tương tác với nhau Điều này giúp tăng cường khả năng mở rộngvà quản lý hệ thống, vì server có thể tập trung vào xử lý và cung cấp dịch vụ mà khôngcần quan tâm đến giao diện người dùng hay các yêu cầu cụ thể của từng client.

Mô hình client-server thường được áp dụng trong nhiều ứng dụng, từ các trang

web, ứng dụng di động cho đến hệ thống doanh nghiệp lớn Sự phân tách giữa client vàserver mang lại tính linh hoạt, bảo mật và quản lý hiệu quả, làm cho mô hình này trởthành một trong những kiến trúc phổ biến và quan trọng trong phát triển phần mềm và hệthống.

2.4 Giới thiệu ReactJS và NodeJS

2.4.1 Node.js

Node.js là một môi trường chạy mã JavaScript phía máy chủ (server-side) đượcxây dựng dựa trên nền tảng JavaScript V8 engine của Google Chrome Nó cho phép pháttriển ứng dụng web và các dịch vụ mạng có khả năng xử lý đa luồng, đáp ứng cao và cókhả năng mở rộng.

Dưới đây là một số ưu điểm của Node.js:

⮚ Hiệu suất cao: Node.js sử dụng kiến trúc không đồng bộ và hướng sự kiện driven), cho phép xử lý đa luồng mà không bị chặn bởi I/O Điều này giúp tăngcường hiệu suất và đáp ứng nhanh hơn trong các ứng dụng có tính tải cao.

(event-⮚ Xây dựng ứng dụng thời gian thực: Node.js hỗ trợ xử lý đồng thời và gửi dữ liệuqua WebSockets, cho phép xây dựng các ứng dụng thời gian thực như trò chuyệntrực tuyến, trò chơi đa người chơi, ứng dụng đồng bộ, v.v.

⮚ Mã nguồn mở và cộng đồng phát triển đông đảo: Node.js là một dự án mã nguồnmở, có nhiều thư viện, framework và công cụ phát triển phong phú Cộng đồngphát triển của Node.js rất lớn và năng động, mang lại nhiều tài nguyên và hỗ trợcho nhà phát triển.

⮚ Đơn giản và dễ học: Node.js sử dụng ngôn ngữ JavaScript, ngôn ngữ phổ biến vàdễ học Điều này giúp cho việc học và phát triển ứng dụng trở nên dễ dàng vànhanh chóng.

Tuy nhiên, Node.js cũng có một số nhược điểm cần lưu ý:

⮚ Xử lý CPU-intensive chậm: Do Node.js sử dụng mô hình đơn luồng, nếu ứng dụngcó nhiều tác vụ CPU-intensive (như tính toán phức tạp), hiệu suất có thể giảm.Node.js thích hợp hơn cho các ứng dụng I/O-intensive (như ứng dụng web) hơn làCPU-intensive.

⮚ Tiềm ẩn về quản lý bộ nhớ: Node.js sử dụng bộ nhớ không đồng bộ blocking) và sự kiện để đạt hiệu suất cao Tuy nhiên, điều này có thể tạo ra một sốthách thức trong quản lý bộ nhớ, đặc biệt là khi xử lý các tác vụ dài hạn hoặc cókhối lượng dữ liệu lớn.

(non-Chưa hoàn thiện trong việc hỗ trợ một số tính năng: Mặc dù Node.js đã phát triểnmạnh mẽ, nhưng vẫn còn một số tính năng và giao diện chưa được hoàn thiện hoặc thiếuhỗ trợ tốt.

2.4.2 ReactJs

ReactJS là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng giao diện người dùng (UI) động trong các ứng dụng web Với ReactJS, người phát triển có thểxây dựng các thành phần giao diện độc lập, tái sử dụng và quản lý trạng thái của ứng dụng một cách hiệu quả.

Dưới đây là một số ưu điểm của ReactJS:

⮚ Hiệu suất cao: ReactJS sử dụng Virtual DOM (DOM ảo) để làm việc, giúp cải thiện hiệu suất bằng cách chỉ cập nhật lại các phần tử cần thiết trên trang web, thay

vì cập nhật toàn bộ DOM Điều này giúp giảm thời gian render và cải thiện trải nghiệm người dùng.

⮚ Quản lý trạng thái dễ dàng: ReactJS sử dụng mô hình quản lý trạng thái (state) và các thành phần có trạng thái (stateful components), cho phép người phát triển quảnlý và cập nhật trạng thái của ứng dụng một cách dễ dàng và nhất quán.

⮚ Tính năng tái sử dụng cao: ReactJS khuyến khích việc phân chia giao diện thành các thành phần nhỏ và độc lập, cho phép tái sử dụng và kết hợp chúng để xây dựng giao diện phức tạp Điều này giúp giảm mã lặp và tăng tính chất lượng của mã nguồn.

⮚ Cộng đồng và hỗ trợ đa dạng: ReactJS có một cộng đồng phát triển rất lớn và năngđộng, cung cấp nhiều tài liệu, ví dụ, và thư viện mở rộng Ngoài ra, có nhiều công cụ hỗ trợ như Redux, React Router, và Material-UI giúp việc phát triển ứng dụng dễ dàng hơn.

Tuy nhiên, ReactJS cũng có một số nhược điểm:

⮚ Khái niệm phức tạp ban đầu: ReactJS sử dụng cú pháp và khái niệm mới, đòi hỏi một thời gian để làm quen và hiểu rõ cách thức hoạt động Điều này có thể đòi hỏi người phát triển phải có một quá trình học tập ban đầu.

⮚ Phụ thuộc vào hệ sinh thái: Để tận dụng hết tiềm năng của ReactJS, người phát triển thường phải sử dụng các thư viện và công cụ khác như Redux, React Router, hoặc CSS-in-JS Điều này có thể khiến ứng dụng trở nên phức tạp và phụ thuộc nhiều vào hệ sinh thái ReactJS.

⮚ Kích thước tải xuống ban đầu: Mặc dù ReactJS đã được tối ưu để tải xuống nhanh hơn, tuy nhiên, ứng dụng ReactJS ban đầu có kích thước lớn hơn so với các trang web tĩnh Điều này có thể gây ảnh hưởng đến thời gian tải trang đầu và yêu cầu mạng.

Tóm lại, ReactJS là một công nghệ mạnh mẽ để xây dựng giao diện người dùng linh hoạt và hiệu suất cao Tuy nhiên, việc sử dụng ReactJS cần xem xét kỹ lưỡng và đảm bảorằng nó phù hợp với yêu cầu và quy mô dự án của bạn.

2.4.3 Next.js

Để bỗ trợ cho việc sử dụng thư viện React Em quyết định sử dụng một framework đang hot hiện nay với lượng truy cập và sử dụng đông đảo, kèm theo đó là cộng đồng support đông đảo.

Next.js là một framework phổ biến trong cộng đồng phát triển web, được xây dựng trên nền tảng JavaScript và React Được giới thiệu bởi Vercel, Next.js mang lại nhiều lợi ích và tiện ích cho việc xây dựng ứng dụng web hiện đại Dưới đây là một giới thiệu về Next.js, kèm theo ưu điểm và nhược điểm của nó.

Next.js giới thiệu mô hình phát triển web có tự động hóa nhiều công đoạn quan trọng Nó cung cấp hệ thống routing tự động, giúp dễ dàng quản lý các trang và tài nguyên Một trong những ưu điểm lớn nhất của Next.js là khả năng hỗ trợ rendering ở cả phía máy chủ (server-side rendering - SSR) và phía máy khách (client-side rendering - CSR), mang lại trải nghiệm người dùng mượt mà và tối ưu cho công cụ tìm kiếm.

Ưu điểm của Next.js không chỉ dừng lại ở đó Next.js hỗ trợ pre-rendering tại thời điểm xây dựng (build time) và thời điểm yêu cầu (runtime), tối ưu hóa hiệu suất và giảm thời gian tải trang Bằng cách tích hợp tốt với React, Next.js giúp tái sử dụng các thành phần và mã nguồn, giảm thiểu độ phức tạp của ứng dụng.

Tuy nhiên, như mọi công nghệ, Next.js cũng có nhược điểm của mình Một trong những điểm yếu có thể là khả năng đánh đổi giữa độ phức tạp và quyết định của nó Đôi khi, việc quản lý và hiểu rõ về cách Next.js hoạt động có thể đòi hỏi một thời gian học và làm quen, đặc biệt là đối với những người mới bắt đầu với framework này.

Tóm lại, Next.js là một framework mạnh mẽ và linh hoạt cho việc xây dựng ứng dụng web hiện đại Với khả năng SSR, CSR, và hỗ trợ pre-rendering, nó mang lại hiệu suất và trải nghiệm người dùng tốt Tuy nhiên, việc hiểu rõ về cách Next.js hoạt động có thể là thách thức, và đôi khi có đánh đổi giữa tính linh hoạt và độ phức tạp.

CHƯƠNG 3 KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU3.1 Khảo sát hiện trạng

- Phương pháp: Dựa trên báo cáo, nghiên cứu chính thức Ngoài ra còn thực hiện một cuộc khảo sát quy mô nhỏ và nhận được khoảng 121 phản hồi.

- Kết quả nhận được từ cuộc khảo sát:

● Tỷ lệ người đã từng sử dụng dịch vụ:

● Đánh giá tổng thể về trải nghiệm sử dụng ứng dụng trên thang điểm từ 1 đến 10:

● Các ưu điểm chính của ứng dụng theo ý kiến người dùng (người dùng được yêu cầu chọn nhiều lựa chọn):

o Giao diện người dùng thân thiện và dễ sử dụng: 83%o Tốc độ xử lý ổn định: 72%

o Cung cấp các tính năng về học online: 68%

3.2 Danh sách yêu cầu có trong ứng dụng

9Chức năngĐăng ký vào khóa học

CHƯƠNG 4: PHÂN TÍCH HỆ THỐNG4.1 Phân loại các yêu cầu phần mềm

4.1.1 Yêu cầu hệ thống

- Ứng dụng có thể hoạt động như các website thông thường.

- Ứng dụng đáp ứng được các nhu cầu cần thiết, cơ bản của khách hàng cũng như các chức năng khác liên quan như là quản lý các mục thông tin liên quan đến ứng dụng.

4.1.2 Yêu cầu nghiệp vụ

để có thể sử dụng website

các chức năng của ứng dụng

4 Thay đổi thông tin cá nhân Thay đổi các thông tin được cho phép thay đổi.

khoản

người dùng khả năng tìm lại mật khẩu.

7Xem danh sách khóa học Cho phép người dùng xem tất cả khóa học được đăng công khai.

8Xem chi tiết khóa học Cho phép người dùng xem chi tiết nội dung khóa học

10Quyền truy cập vào khóa học

Cho phép người dùng tham gia vào bài học

cho phép người dùng nộp bài kiểm tra và tính điểm.

13Kiểm tra tiến độ khóa học Cho phép người dùng kiểm tra tiến độ khóa

học của mình

16Sửa thông tin khóa học Cho phép giảng viên sửa, thay đổi các thông tin về khóa học của mình.

18Quản lý học viên đăng ký Cho phép giảng viên quản lý tất cả các học viên đã đăng ký khóa học của mình.

20Xem tiến độ học viên Cho phép giảng viên xem tiến độ của các học viên đã đăng ký khóa học.

4.2 Bảng trách nhiệm cho từng loại yêu cầu

STT

5.1 Sơ đồ Usecase tổng quát

Sơ đồ 1 Use case học viên

Sơ đồ 2 Use case Giảng viên

Sơ đồ 3 Use case Admin

5.1.1 Yêu cầu tổng quát

Pre-condition Người dùng đang ở trang đăng nhập.

Post- Ta - Nếu thông tin đăng nhập hợp lệ, người dùng sẽ được chuyển hướng đến bảng

Name Đăng nhập

condition điều khiển.

- - Nếu thông tin xác thực không hợp lệ, thông báo lỗi sẽ hiển thị và người dùng có thể thử lại Nếu đạt đến giới hạn thử lại, tài khoản người dùng sẽ bị khóa.

Activities Flow

- Ký hiệu (@)

- Một hoặc nhiều ký tự chữ cái (không phân biệt chữ hoa chữ thường), số, dấu chấm hoặc dấu gạch ngang.

- Dấu chấm (phải được đặt trong dấu gạch chéo vì đây là ký tự đặc biệt trong biểu thức chính quy).

- Ít nhất hai ký tự chữ cái cho phần mở rộng tên miền (ví dụ: com, net).- [passwordRegex] = “^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-

Za-z\d@$!%*?&]{8,}$”- Ít nhất một chữ thường.- Tối thiểu một chữ hoa.

- Ít nhất một ký tự đặc biệt (có thể thay đổi tùy theo yêu cầu của bạn).- Ít nhất 8 ký tự từ các nhóm trên.

Chức năng này hoạt động:

if [usernameRegex].test([username]) === true && [passwordRegex].test([password]) ===true

return ĐÚNGelse SAI

Khi người dùng nhấp vào nút Đăng nhập, chức năng validation() sẽ tiến hành kiểm tra thông tin đầu vào trước tiên:

If ![username] && ![password]

Hiển thị thông báo lỗi bên cạnh nhãn nhập Email/Mật khẩu có màu đỏ Nội dung làMSG06.

If else ( validation() )Next()

Hiển thị thông báo lỗi bên cạnh nhãn nhập Email/Mật khẩu có màu đỏ Nội dung là MSG07.

Form đăng nhập:

Nội quy ghi nhớ mật khẩu:

Khi người dùng điều hướng đến trang đăng nhập:

Hệ thống sẽ kiểm tra “LocalStorage” để xem có trường thông tin userInfo hay không.

Nếu nó tồn tại, gán giá trị trạng thái hiện tại:[username] = userInfo[username]

Khi người dùng nhấn vào nút Ghi nhớ:Đặt [isRemember] = true.

Khi người dùng đăng nhập thành công:

Lưu userInfo[username] có giá trị bằng trạng thái hiện tại [username] vào “LocalStorage”

Không bao giờ lưu [password] vì lý do bảo mật.

(2)BR2 Quy tắc thông báo:

Khi người dùng click vào nút đăng nhập và handLogin() đang chạy Hệ thống sẽ thông báo cho người dùng và thông báo [EM] sẽ được quản lý dưới dạng mã lỗi [EC] Dựa trên mã lỗi được máy chủ trả về:

if [EC] === 0

[EM] = MSG01if [EC] === 1[EM] = MSG02if [EC] === 2[EM] = MSG03if [EC] === -1[EM] = MSG04if [EC] === -2[EM] = MSG05

- Form thông báo:

Nội dung[EM]

Thông báo sẽ xuất hiện ở góc dưới bên phải màn hình và biến mất sau 2 giây.Người dùng có thể tắt nó trước bằng cách vuốt ngang.

Lưu ý: Không tạo bất kỳ nút nào để thực thi hành động tắt thông báo.

(5)BR3 Khi người dùng đăng nhập thành công:

Việc nhận mã thông báo jwt từ máy chủ sẽ lưu nó vào cả cookie và localStorage với:

key = “jwt”

value= [accessToken]

Điều hướng đến trang dashboard.

UC2: Đăng xuất

Description Thể hiện quá trình người dùng đăng xuất khỏi hệ thống.

Actor Tất cả người dùng

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

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

Post-condition Người dùng được chuyển hướng đến trang chủ sau khi đăng xuất thành công.

Activities Flow

Sequence diagram

Business Rules

ActivityBR

(1)BR4 Khi người dùng nhấp vào nút đăng xuất, hãy gọi hàm xử lý Logout():

Hệ thống sẽ xóa trường thông tin có key="jwt", được lưu trữ trong cookie và localStorage.

Chuyển hướng đến trang chủ.

UC3: Đăng ký

Description Thể hiện quá trình người dùng nhập chi tiết đăng ký và tạo tài khoản.

Actor Student, Intructor

Trigger Người dùng nhấn vào nút đăng ký.

Pre-condition Người dùng đang ở trang đăng ký.

Post-condition Tài khoản người dùng được tạo và người dùng được chuyển hướng đến trang đăng nhập nếu thông tin chi tiết hợp lệ và duy nhất Thông báo lỗi được hiển thị cho các chi tiết không hợp lệ hoặc không duy nhất.

Activities Flow

Ít nhất hai ký tự chữ cái cho phần mở rộng tên miền (ví dụ: com, net).

[passwordRegex] = “^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A- Za-z\d@$!%*?&]{8,}$”

Ít nhất một chữ thường.Tối thiểu một chữ hoa.

Ít nhất một ký tự đặc biệt (có thể thay đổi tùy theo yêu cầu của bạn).Ít nhất 8 ký tự từ các nhóm trên.

Chức năng này hoạt động:

if [usernameRegex].test([username]) === true &&

[passwordRegex].test([password]) === true && [isCheck] === true

// [isCheck] Trạng thái của nó phụ thuộc vào hộp kiểm đồng ý với các điều khoản của chúng tôi và nó phải đúng.

trả về ĐÚNG

nếu không thì trả về SAI

Khi người dùng nhấp vào nút Đăng ký xác thực chức năng() sẽ tiến hành kiểm tra thông tin đầu vào trước tiên:

if ![username] && ![password] && ![rePassword]

Hiển thị thông báo lỗi bên cạnh nhãn nhập Email/Mật khẩu có màu đỏ Nội dung làMSG06.

Else if ([password] !== [rePassword])

Hiển thị thông báo lỗi bên cạnh nhãn nhập Mật khẩu và có màu đỏ Nội dung là MSG08.

Else if ( validation() )Next()

Hiển thị thông báo lỗi bên cạnh nhãn nhập Email/Mật khẩu có màu đỏ Nội dung làMSG07.

Mẫu đăng ký:

Khi người dùng click vào nút đăng ký và handleRegister() đang chạy Hệ thống sẽ thông báo cho người dùng và thông báo [EM] sẽ được quản lý dưới dạng mã lỗi [EC] Dựa trên mã lỗi được máy chủ trả về:

if [EC] === 0[EM] = MSG09if [EC] === 1[EM] = MSG10if [EC] === -1[EM] = MSG04if [EC] === -2[EM] = MSG05

Mẫu thông báo:

Nội dung[EM]

(6)BR7 Khi người dùng đăng ký thành công:Điều hướng đến trang đăng nhập.

UC4: Xem danh sách khóa học

Description Xem danh sách các khóa học hiện có

Actor Mọi tác nhân

Name Xem danh sách khóa học

Trigger Người dùng truy cập vào phần “Khóa học”

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

Post-condition Danh sách các khóa học có sẵn được hiển thị

Activities Flow

Sequence diagram

Business Rules

ActivityBR Code

- Nếu res[EC] khác ⇒ Điều hướng đến trang đăng nhập.

(5)BR9 Quy tắc khi lấy khóa học:

Ngay khi bạn vào trang khóa học, dữ liệu sẽ được tìm nạp trước:// Các khóa học sẽ được sắp xếp mặc định theo thời gian tạo (tăng dần).getCourse([page],[limit])

[page]: Số thứ tự trang bạn muốn lấy.

[limit]: Số lượng khóa học tối đa mong muốn trên mỗi trang Và cài đặt mặc định là 6 khóa học.

Ảnh với nguồn = item[thumbnail]

Giá // 2 mức giá này khi được tạo sẽ mặc định bằng nhau Nếu có sự thay đổi về giáthì cả hai mức giá vẫn được giữ nguyên và bằng giá mới Nếu giá mới giảm thì chỉ [newPrice] được cập nhật.

if( item[oldPrice] !== item[newPrice] )

return item.[oldPrice] + “đ” + item[newPrice] + “đ”else

return item[newPrice] + “đ”

// Màu giá cũ phải chìm hơn giá mới.

)})

bảng và [limit] là tham số được gửi ở trên.

UC5: Xem chi tiết khóa học

Description Xem chi tiết khóa học đã chọn

Actor Tất cả tác nhân

Trigger Người dùng chọn khóa học để xem chi tiết

Pre-condition Người dùng đã đăng nhập và khóa học được chọn

Post-condition Chi tiết khóa học được hiển thị cho người dùng

Activities Flow

Sequence diagram

Business Rules

ActivityBR Code

Nội dung [body] = “Không thể tìm thấy khóa

học này Nhấn vào đây để trở về

//Đánh giá sẽ được hiển thị dưới

dạng ngôi sao.

Body //Quy tắc để hiển thị giá khóa học như đã khai báo ở

Giácourse[price]ButtonMua ngay

Tổng quanTóm tắtMục tiêu khóahọc

-Mục này chưa

-Mục này chứa

-Mục này hiển thị

tổng quan thông tin về khóa học.

danh sách các chương, bài học,

danh sách các mục tiêu sẽ đạt được sau khi tham gia khóa học.

CommentQuy tắc bình luận:

course[comments].map(comment

(comment) ⇒ {) ⇒ { ⇒ { { return (

Avatar Tên comment[owner][name]

Bình luận comment[content )

} )

// Cho phép tất cả người dùng đã mua khóa học bình luận đánh giá về khóa học.

-Tạo bình luận bằng hàm createComment([data]):

Với dữ liệu bao gồm: data[title] && data[userId].Comment Form: