Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng website học trực tuyến

NHIỆM VỤ THỰC HIỆN KHÓA LUẬN TỐT NGHIỆP Họ và tên sinh viên 1: Nguyễn Hữu Thắng MSSV: 20110568 Họ và tên sinh viên 2: Nguyễn Văn Giang MSSV: 20110463 Chuyên ngành: Công nghệ phần mềm Tên

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

LÝ DO CHỌN ĐỀ TÀI

Trong thời đại chúng ta hiện nay, đời sống xã hội ngày càng phát triển và tiến bộ nhanh chóng, thúc giục mỗi cá nhân phải trang bị cho mình những kiến thức, kỹ năng phong phú để hòa nhập liền mạch với xã hội và góp phần mang lại hạnh phúc cho bản thân và những người thân yêu Do đó, tầm quan trọng của việc học tập luôn được tôn vinh và củng cố Với tầm quan trọng ngày càng tăng của giáo dục, điều tự nhiên là cách chúng ta tiếp thu kiến thức cũng đóng một vai trò quan trọng Điều này trở nên đặc biệt phù hợp trong thời đại có nhiều con đường học tập Do đó, sẽ thật thiếu sót nếu không thừa nhận sự phổ biến ngày càng tăng của các phương pháp học tập trực tuyến trên toàn cầu Với kết nối internet đơn giản trên mọi thiết bị, người học có thể tham gia vào các buổi học bất cứ lúc nào và từ bất kỳ địa điểm nào Học trực tuyến đã trở thành một lựa chọn phổ biến cho những người đang tìm kiếm một phương tiện tiếp thu kiến thức nhanh chóng, dễ tiếp cận và tiết kiệm chi phí Ngày nay, nó đã khẳng định mình là một sự hiện diện đáng kể trong một số lĩnh vực phát triển mạnh trên toàn cầu Hiện nay có rất nhiều trang học tập trực tuyến như Udemy, Coursera, W3Schools, Codecademy, hầu như các website này đều phải thu phí để của người học và cũng chưa có tính năng tương tác giữa các người học với nhau Vì vậy, Website này nhóm em xây dựng nhằm tạo một môi trường học tập miễn phí, mọi người có thể chia sẻ tài liệu và tương tác với nhau.

MỤC TIÊU

Tìm hiểu và vận dụng công nghệ NextJS, NestJs để xây dựng website theo kiến trúc RESTful API

Tìm hiểu và kết hợp Prisma với MongoDB để giúp có thể xử lý các truy vấn một cách dễ dàng

Tìm hiểu cách hoạt động và áp dụng các API cần thiết của bên thứ ba như: AWS, GeminiAPI, LiveKit, AssemblyAPI, AzureAI, BotPress

Vận dụng các kiến thức tìm hiểu được để phân tích, thiết kế và xây dựng một website học tập trực tuyến với các tính năng cần thiết đáp ứng đủ nhu cầu người dùng Đồng thời, cũng sẽ tạo ra trải nghiệm học tập tương tác thông qua các tính năng như diễn đàn thảo luận, các buổi học trực tuyến Công nghệ mới mẻ sẽ được tích hợp để tạo ra các trải nghiệm học tập độc đáo và hiệu quả Người dùng sẽ có khả năng theo dõi tiến trình học tập của mình, môi trường học tập sẽ được thiết kế linh hoạt, cho phép người

2 dùng tùy chỉnh lộ trình học tập của mình Cộng đồng học tập sẽ được xây dựng để kết nối và chia sẻ kiến thức giữa các thành viên Sự tương tác giữa người học và người dạy sẽ được khuyến khích thông qua các phương tiện hỗ trợ và tương tác trực tiếp Không những thế còn có những bài tập trong mỗi video và các bài kiểm tra trong mỗi khóa học sẽ giúp người dùng ôn tập lại các kiến thức

Thiết kế giao diện thân thiện, và đạt hiệu suất hoạt động cao, ổn định, lâu dài Triển khai website với Docker, Nginx.

CÔNG NGH Ệ SỬ DỤNG

Front-end: NextJS, Tailwindcss, ShadcnUI

Các dịch vụ khác: AWS, GeminiAPI, LiveKit, Assembly API, AzureAI, BotPress, Nginx.

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

NESTJS

NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và API (Hoàng,

NestJS thúc đẩy sự phát triển của TypeScript

Mã nguồn mở của Node.js được phát triển mạnh mẽ trong thời gian gần đây

Sử dụng ngôn ngữ lập trình TypeScript và JavaScript

Không tốn nhiều thời gian cho việc cài đặt và nghiên cứu sử dụng

Phát triển mạnh mẽ nhờ giao diện của dòng lệnh CLI

Tài liệu phong phú, đa dạng, đầy đủ

Khả năng mở rộng, phát triển và bảo trì cơ sở mã được thực hiện

Hỗ trợ các modules giúp ứng dụng được tích hợp các công nghệ và khái niệm như: Caching, WebSockets, Validation, TypeORM,… (Aptech, 2023)

NEXTJS

NextJS là framework mã nguồn mở được xây dựng trên nền tảng của React, cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện với người dùng, cũng như xây dựng các ứng dụng web React (Hoang, 2023)

PRISMA

Prisma là một Object Relational Mapping (ORMs) được dùng để xây dựng các máy chủ như GraphQL Server, RESTful APIs, microservice, Prisma đơn giản là 1 layer nằm giữa Web Server và Database Prisma giúp chúng ta giao tiếp với database một cách dễ dàng hơn (lxc, 2020)

Prisma Schema: dùng để định nghĩa cấu trúc cơ sở dữ liệu Có thể tạo các bảng, các trường, các ràng buộc và các quan hệ giữa các bảng trong cơ sở dữ liệu

Prisma Client: dùng để truy vấn và thay đổi dữ liệu trong cơ sở dữ liệu thông qua API của Prisma Prisma Client được sinh ra tử Prisma Schema và được tối ưu hóa với từng ngôn ngữ lập trình

Prisma Migrate: dùng để thay đổi cấu trúc của cơ sở dữ liệu theo thời gian, có thể tạo ra các file migration (di chuyển) từ Prisma Schema và sử dụng để truy vấn vào cơ sở dữ liệu

Prisma Studio: là một giao diện web cho phép xem và chỉnh sửa dữ liệu trong cơ sở dữ liệu, dùng để kiểm tra kết quả của các truy vấn và các thay đổi của Prisma Client và Prisma Migrate.

MONGODB

MongoDB là một cơ sở dữ liệu hướng dữ liệu, một dạng NoSQL Database Về lịch sử, MongoDB được bắt đầu phát triển vào năm 2007 và vào năm 2009, công ty chủ quản đã biến MongoDB thành một open-source Hiện tại MongoDB là một source- available software Ta có thể thấy được MongoDB là cơ sở dữ liệu hàng đầu được rất nhiều người sử dụng và các ông lớn trong ngành đang hợp tác như Google, Amazon,

2.4.2 Các tính năng của MongoDB

Thực thi Javascript phía máy chủ

Giới hạn kích thước collection

SHADCNUI

Tập hợp những components được xây dựng bằng Radix UI và Tailwind CSS Các components được thiết kế đẹp mắt mà người dùng có thể sao chép và dán vào ứng dụng của mình Có thể truy cập, tùy chỉnh và là mã nguồn mở

ShadcnUI được hỗ trợ và thích ứng cao với NextJS, cũng như có nhiều UIcomponent đẹp và chất lượng dễ dàng sử dụng.

GEMINIAI API

GEMINIAI API là một bộ công cụ mạnh mẽ dành cho các nhà phát triển và doanh nghiệp, cung cấp khả năng tương tác và tích hợp liền mạch với hệ thống của GEMINIAI

API này cho phép bạn khai thác sức mạnh của công nghệ trí tuệ nhân tạo tiên tiến để xây dựng các ứng dụng và dịch vụ thông minh

Tính năng chính của GEMINIAI API:

- Xử lý ngôn ngữ tự nhiên (NLP): Phân tích cú pháp và ngữ nghĩa của văn bản Nhận diện và phân loại thực thể trong văn bản Tạo văn bản tự động với chất lượng cao

- Học máy (Machine Learning): Tích hợp các mô hình học máy tùy chỉnh Hỗ trợ đào tạo và triển khai các mô hình dự đoán Phân tích dữ liệu để đưa ra các dự đoán và khuyến nghị

- Tương tác giọng nói (Speech Recognition): Chuyển đổi giọng nói thành văn bản với độ chính xác cao Tạo giọng nói tự động từ văn bản Phân tích và nhận diện giọng nói để cải thiện trải nghiệm người dùng

- Xử lý hình ảnh (Image Processing): Nhận diện và phân loại hình ảnh Phân tích nội dung hình ảnh và video Tích hợp với các ứng dụng thị giác máy tính

- Tích hợp và bảo mật: Hỗ trợ các phương thức xác thực và ủy quyền bảo mật Cung cấp các API RESTful dễ dàng tích hợp với các hệ thống hiện có Quản lý dữ liệu và bảo vệ quyền riêng tư của người dùng Lợi ích của việc sử dụng GEMINIAI API:

- Tối ưu hóa quy trình làm việc: Tự động hóa các tác vụ lặp đi lặp lại và tiết kiệm thời gian

- Cải thiện trải nghiệm người dùng: Tạo ra các ứng dụng và dịch vụ thông minh, tương tác tốt hơn với người dùng

- Tăng cường hiệu suất: Sử dụng công nghệ AI để đưa ra các quyết định thông minh và chính xác hơn Dễ dàng tích hợp: API linh hoạt và dễ dàng tích hợp với nhiều nền tảng và hệ thống khác nhau

AMAZON S3

Amazon Simple Storage Service là một dịch vụ lưu trữ đối tượng cung cấp khả năng thay đổi theo quy mô, tính khả dụng của dữ liệu, bảo mật và hiệu năng hàng đầu trong lĩnh vực Điều này có nghĩa là khách hàng thuộc mọi quy mô và lĩnh vực có thể sử dụng dịch vụ này để lưu trữ và bảo vệ bất kỳ lượng dữ liệu nào cho nhiều trường hợp

6 sử dụng khác nhau, chẳng hạn như trang web, ứng dụng di động, sao lưu và khôi phục, lưu trữ, ứng dụng doanh nghiệp, thiết bị IOT và phân tích dữ liệu lớn (Cường, n.d.)

Hiệu năng, khả năng thay đổi theo quy mô, tính khả dụng và độ bền hàng đầu trong lĩnh vực

Nhiều lớn lưu trữ tiết kiệm chi phí

Bảo mật, tính tuân thủ và khả năng kiểm tra chưa từng có

Các công cụ quản lý dùng để kiểm soát dữ liệu chi tiết

Dịch vụ truy vấn dùng để kiểm soát dữ liệu chi tiết

Dịch vụ truy vấn tại chỗ cho phân tích

Dịch vụ lưu trữ đám mây được hỗ trợ nhiều nhất.

DOCKER

Docker là nền tảng phần mềm cho phép người dùng xây dựng, kiểm thử và triển khai ứng dụng một cách nhanh chóng Docker đóng gói phần mềm vào các đơn vị tiêu chuẩn hóa được gọi là container có mọi thứ mà phần mềm cần để chạy, trong đó có thư viện, công cụ hệ thống, mã và thời gian chạy Bằng cách sử dụng Docker, bạn có thể nhanh chóng triển khai và thay đổi quy mô ứng dụng vào bất kỳ môi trường nào và biết chắc rằng mã của bạn sẽ chạy được (Docker là gì?, n.d.)

Dễ sử dụng: Docker rất dễ cho mọi người sử dụng từ lập trình viên, sysadmin, nó tận dụng lợi thế của container để build, test nhanh chóng Có thể đóng gói ứng dụng trên laptop của họ và chạy trên public cloud, private cloud

Tốc độ: Docker container rất nhẹ và nhanh, bạn có thể tạo và chạy docker container trong vài giây

Môi trường chạy và khả năng mở rộng: có thể chia nhỏ những chức năng của ứng dụng thành các container riêng lẻ Docker, rất dễ để liên kết các container với nhau để tạo thành một ứng dụng, làm cho nó dễ dàng scale, update các thành phần độc lập với nhau (Minh, n.d.)

REDIS

Redis là một cơ sở dữ liệu NoSQL mã nguồn mở, lưu trữ dữ liệu dưới dạng key- value và được sử dụng chủ yếu để lưu trữ dữ liệu trong bộ nhớ Điều này giúp Redis đạt được hiệu suất cao và khả năng xử lý dữ liệu nhanh chóng Redis hỗ trợ nhiều kiểu dữ liệu khác nhau như strings, hashes, lists, sets, sorted sets, bitmaps, hyperloglogs, và các kiểu dữ liệu không gian địa lý (geospatial indexes)

Hiệu suất cao: Redis lưu trữ dữ liệu trong bộ nhớ, do đó có tốc độ truy cập và xử lý rất nhanh Điều này đặc biệt hữu ích cho các ứng dụng yêu cầu hiệu suất cao và thời gian đáp ứng nhanh

Khả năng mở rộng: Redis hỗ trợ clustering và replication, giúp dễ dàng mở rộng quy mô hệ thống để đáp ứng nhu cầu tăng trưởng của ứng dụng Đa dạng kiểu dữ liệu: Redis hỗ trợ nhiều kiểu dữ liệu phức tạp, cho phép lưu trữ và xử lý các loại dữ liệu khác nhau một cách hiệu quả

Hỗ trợ pub/sub: Redis có tính năng publish/subscribe, giúp xây dựng các hệ thống thông báo real-time một cách dễ dàng

Khả năng sao lưu và khôi phục dữ liệu: Redis hỗ trợ snapshotting và AOF (Append-Only File), giúp sao lưu dữ liệu và khôi phục khi cần thiết

Dễ sử dụng: Redis có API đơn giản và dễ sử dụng, hỗ trợ nhiều ngôn ngữ lập trình phổ biến như Python, Java, C#, và nhiều ngôn ngữ khác.

ASSEMBLY API

Assembly API được thiết kế để hỗ trợ các ứng dụng có khả năng nhận dạng giọng nói, chuyển đổi văn bản thành giọng nói, phân tích cảm xúc, dịch thuật, và nhiều tính năng khác

Nhận dạng giọng nói chính xác: Assembly API cung cấp công nghệ nhận dạng giọng nói tiên tiến, cho phép chuyển đổi âm thanh thành văn bản với độ chính xác cao, hỗ trợ nhiều ngôn ngữ và các biến thể giọng nói khác nhau

Phân tích và hiểu ngữ cảnh: Assembly API có khả năng phân tích ngữ cảnh và cảm xúc trong văn bản và giọng nói, giúp tạo ra các ứng dụng có thể hiểu và phản hồi theo cách phù hợp với cảm xúc và ngữ cảnh của người dùng

Dễ tích hợp và sử dụng: Assembly API cung cấp các thư viện và tài liệu phong phú, giúp các nhà phát triển dễ dàng tích hợp và sử dụng trong các ứng dụng của họ Hỗ trợ nhiều ngôn ngữ lập trình và nền tảng khác nhau.

LIVEKIT

Là một nền tảng mã nguồn mở, cung cấp các dịch vụ truyền thông thời gian thực như video, audio, và dữ liệu Được xây dựng dựa trên công nghệ WebRTC (Web Real- Time Communication), Livekit giúp các nhà phát triển dễ dàng tích hợp chức năng giao tiếp thời gian thực vào các ứng dụng web và di động

Video và Audio Streaming: Livekit cho phép streaming video và audio với độ trễ thấp, giúp người dùng có trải nghiệm tốt hơn khi sử dụng các dịch vụ như video call, hội nghị trực tuyến, hoặc streaming game

Scalability: Livekit được thiết kế để có thể mở rộng dễ dàng, từ việc hỗ trợ số lượng người dùng ít cho đến hàng triệu người dùng mà không làm giảm chất lượng dịch vụ

Có hơn 1000 plugin để bạn dễ dàng làm việc Nếu một plugin không tồn tại, có thể viết lại mã nó

SDKs và API dễ sử dụng: Livekit cung cấp các bộ SDK và API cho nhiều ngôn ngữ lập trình và nền tảng khác nhau, giúp việc tích hợp trở nên dễ dàng hơn.

BOTPRESS

Là một nền tảng mã nguồn mở chuyên phát triển các bot trò chuyện (chatbot) Được thiết kế để dễ dàng tích hợp và tùy chỉnh, Botpress cung cấp một bộ công cụ mạnh mẽ giúp người dùng xây dựng, triển khai và quản lý các chatbot hiệu quả

Mã nguồn mở: Botpress là một nền tảng mã nguồn mở, có nghĩa là bạn có thể tự do tải xuống, tùy chỉnh và triển khai theo nhu cầu của mình mà không phải trả phí bản quyền

Giao diện người dùng thân thiện: Botpress cung cấp một giao diện người dùng đồ họa dễ sử dụng, giúp việc xây dựng và quản lý chatbot trở nên đơn giản hơn, ngay cả đối với những người không có nhiều kinh nghiệm về lập trình

Tính tùy chỉnh cao: Nền tảng này cho phép bạn tùy chỉnh gần như mọi khía cạnh của chatbot, từ giao diện người dùng, kịch bản trò chuyện cho đến các tích hợp với các hệ thống khác.

NGINX

Nginx là một web server mạnh mẽ mã nguồn mở Nginx sử dụng kiến trúc đơn luồng, hướng sự kiện vì thế nó hiệu quả hơn Apache server Nó cũng có thể làm những thứ quan trọng khác, chẳng hạn như load balancing, HTTP caching, hay sử dụng như một reverse proxy (TopDev, n.d.)

Có khả năng xử lý hơn 10.000 kết nối cùng lúc với bộ nhớ thấp

Phục vụ tập tin tĩnh (static files) và lập chỉ mục tập tin

Tăng tốc reverse proxy bằng bộ nhớ đệm (cache), cân bằng tải đơn giản và khả năng chịu lỗi

Hỗ trợ tăng tốc với bộ nhớ đệm của FastCGI, uwsgi, SCGI, và các máy chủ memcached

Kiến trúc modular, tăng tốc độ nạp trang bằng nén gzip tự động

Hỗ trợ mã hoá SSL và TLS

Cấu hình linh hoạt; lưu lại nhật ký truy vấn

Chuyển hướng lỗi 3XX-5XX

Rewrite URL (URL rewriting) dùng regular expressions

Hạn chế tỷ lệ đáp ứng truy vấn

Giới hạn số kết nối đồng thời hoặc truy vấn từ 1 địa chỉ

Khả năng nhúng mã PERL (TopDev, n.d.)

TECHNICAL STACK

Hình 2.1: Hình mô tả Technical stack

CHƯƠNG 3: PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU

KHẢO SÁT CÁC WEBSITE TƯƠNG TỰ

Udemy, Inc, là một nhà cung cấp khóa học trực tuyến mở (MOOC) lớn của Mỹ nhằm vào sinh viên và người lớn Nó được thành lập vào tháng 5 năm 2010 bởi Eren Bali, Gagan Biyani và Oktay Caglar (Theo Wikipedia) Ưu điểm:

Khóa học đa dạng: Các khóa học được giảng dạy thuộc nhiều lĩnh vực khác nhau

Giao diện dễ sử dụng, thân thiện với người dùng Tốc độ load trang nhanh

Chất lượng các khóa học không đồng đều Ứng dụng Udemy trên mobile hoạt động không ổn định

Coursera là một công ty công nghệ giáo dục chuyên cung cấp các khóa học trực tuyến đại chúng mở Công ty được thành lập bởi hai giáo sư khoa học máy tính Andrew Ngô Ân Đạt và Daphne Koller thuộc Đại học Stanford Coursera hợp tác với nhiều trường đại học trên thế giới để cung cấp một số khóa học trên mạng của các trường này cho người đăng ký, các khóa học có thể thuộc ngành khoa học kỹ thuật, nhân văn học, y học, sinh học, khoa học xã hội, toán học, kinh tế học, khoa học máy tính và một số lĩnh vực khác (Theo Wikipedia) Ưu điểm: Đa dạng khóa học: Các khóa học được giảng dạy thuộc nhiều lĩnh vực khác nhau

Bằng đại học được công nhận: Coursera hợp tác với các trường đại học hàng đầu cung cấp các bằng cấp được công nhận

Học ngoại tuyến: Ứng dụng của Coursera cho phép ta tải xuống tài liệu để xem ngoại tuyến

Chất lượng khóa học: Các khóa học được giảng dạy bởi các chuyên gia hàng đầu trong lĩnh vực của họ từ các trường Đại học và Công ty hàng đầu thế giới

Một số khóa học yêu cầu kiến thức nền tảng, không thích hợp cho người mới bắt đầu.

PHÂN TÍCH YÊU CẦU

3.2.1 Chức năng người dùng – Khách:

3.2.1.1 Chức năng đăng ký tài khoản mới

Chức năng dùng để người dùng trở thành học viên và sử dụng các chức năng chính của trang web

Bảng 3.1: Bảng mô tả chức năng đăng ký tài khoản mới

Yêu Cầu Mô Tả Đăng ký tài khoản Đăng ký trở thành học viên

Chức năng đăng nhập để sử các chức năng chính của trang web 3.2.1.2.2 Yêu cầu chức năng

Bảng 3.2: Bảng mô tả chức năng đăng nhập

Sử dụng tài khoản đã có để đăng nhập Đăng nhập vào trang web để sử dụng các chức năng chính

3.2.1.3 Chức năng khôi phục lại mật khẩu

Khôi phục lại mật khẩu của tài khoản khi quên bằng email đăng ký 3.2.1.3.2 Yêu cầu chức năng

Bảng 3.3: Bảng mô tả chức năng khôi phục mật khẩu

Nhập email của tài khoản Nhập thông tin email được dùng để đăng nhận tài khoản Nhận url từ email Truy cập URL để điền mật khẩu mới vào form

Tạo mật khẩu mới Tạo mật khẩu mới cho tài khoản

3.2.2 Chức năng người dùng – Học viên

3.2.2.1 Chức năng quản lý thông tin cá nhân

Chức năng dùng để xem thông tin cá nhân

Bảng 3.4: Bảng mô tả chức năng quản lý thông tin cá nhân

Xem thông tin cá nhân Xem thông tin cá nhân của học viên

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

Chỉnh sửa thông tin cá nhân của học viên

Xem thông tin các khóa học đã tham gia

Xem thông tin các khóa học đã tham gia và tiến hành học tập Đổi mật khẩu Cập nhật mật khẩu mới

3.2.2.2 Chức năng đăng ký tham gia vào khóa học

Học viên đăng ký tham gia vào khóa học

Bảng 3.5: Bảng mô tả chức năng đăng ký tham gia vào khóa học

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

Xem thông tin giới thiệu khóa học

Xem thông tin giới thiệu về khóa học, bài học xem trước,

… Đăng ký khóa học Đăng ký tham gia khóa học để theo dõi bài học

Học viên xem bài giảng của các khóa học đã tham gia

Bảng 3.6: Bảng mô tả chức năng học tập

Xem video bài giảng Xem các video bài giảng của khóa học đã tham gia

Trả lời các câu hỏi có trong bài giảng

Trả lời các câu hỏi sau mỗi video bài giảng (nếu có) để xem video tiếp theo

Học viên để lại câu hỏi về bài học dưới phần bài học để được giảng viên hoặc các học viên khác đang tham gia vào khóa học cùng giải đáp 3.2.2.4.2 Yêu cầu chức năng

Bảng 3.7: Bảng mô tả chức năng hỏi đáp

Yêu Cầu Mô Tả Đặt câu hỏi Học viên đặt câu hỏi ở mỗi video bài học khi thắc mắc về những kiến thức trong bài học đó Trả lời câu hỏi Các học viên đang tham gia khóa học hoặc giảng viên giải đáp thắc mắc về câu hỏi được đặt ra trong bài học

3.2.2.5 Chức năng bình luận khóa học

Học viên bình luận khóa học khi đã đăng ký

Bảng 3.8: Bảng mô tả chức năng bình luận khóa học

Thêm bình luận Học viên thêm bình luận về khóa học

Sửa bình luận Học viên sửa lại bình luận trước đó

3.2.3 Chức năng người dùng - giảng viên

3.2.3.1 Chức năng quản lý khóa học

Chức năng xem, thêm và cập nhật khóa học của giảng viên 3.2.3.1.2 Yêu cầu chức năng

Bảng 3.9: Bảng mô tả chức năng quản lý khóa học

Xem thông tin khóa học Xem thông tin khóa học đã được tạo

Thêm khóa học mới Giảng viên tạo khóa học mới của mình

Cập nhật khóa học Giảng viên cập nhật các thông tin khóa học của chính mình như: thay đổi ảnh bìa, tóm tắt nội dung, mô tả, phân loại, thẻ, yêu cầu trước khóa học, những điều đạt được sau khóa học,…

3.2.3.2 Chức năng quản lý bài giảng

Chức năng xem, thêm và cập nhật bài giảng của khóa học đã tạo 3.2.3.2.2 Yêu cầu chức năng

Bảng 3.10: Bảng mô tả chức năng quản lý bài giảng

Xem thông tin bài giảng Xem thông tin bài giảng đã được tạo

Thêm chương học mới Giảng viên tạo các chương trình học trong khóa học đã được tạo của chính mình

Thêm bài giảng mới Giảng viên tạo các bài giảng mới theo các chương học đã tạo trong khóa học Cập nhập bài giảng Giảng viên cập nhật các thông tin về chương học và bài giảng Xóa bài giảng đã tạo Giảng viên xóa chương học, bài giảng đã có

3.2.3.3 Chức năng công khai khóa học

Giảng viên công khai khóa học đã được tạo 3.2.3.3.2 Yêu cầu chức năng

Bảng 3.11: Bảng mô tả chức năng công khai khóa học

Công khai các khóa học đã tạo

Giảng viên công khai khóa học đã được tạo

3.2.3.4 Chức năng quản lý bài tập

Chức năng xem, thêm và cập nhật bài tập 3.2.3.4.2 Yêu cầu chức năng

Bảng 3.12: Bảng mô tả chức năng quản lý bài tập

Xem thông tin bài tập Xem thông tin bài tập đã được tạo

Thêm bài tập mới Giảng viên tạo bài tập mới

Thêm loại bài tập Giảng viên chọn loại bài tập và thêm nội dung vào bài tập

Cập nhập bài tập Giảng viên cập nhật các thông tin về bài tập

Xóa bài tập Giảng viên xóa bài tập đã có

3.2.3.5 Chức năng quản lý học viên

Chức năng xem học viên trong từng khóa học 3.2.3.5.2 Yêu cầu chức năng

Bảng 3.13: Bảng mô tả chức năng quản lý học viên

Xem thông tin các học viên Xem thông tin các học viên trong từng khóa học

3.2.3.6 Chức năng thống kê số lượng học viên

Chức năng thống kê học viên 3.2.3.6.2 Yêu cầu chức năng

Bảng 3.14: Bảng mô tả chức năng thống kê số lượng học viên

Thống kê học viên Thống kê số lượng học viên theo dạng lược đồ đường theo từng khóa học

3.2.4 Chức năng người dùng - Admin

3.2.4.1 Chức năng quản lý người dùng

Xem thông tin người dùng trong hệ thống, cập nhật quyền 3.2.4.1.2 Yêu cầu chức năng

Bảng 3.15: Bảng mô tả chức năng quản lý người dùng

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

Xem chi tiết người dùng Xem chi tiết người dùng được chọn

Cập nhật quyền Cập nhật lại quyền của người dùng

Thêm người dùng Thêm 1 người dùng mới vô hệ thống

Admin xem các khóa học được publish trong hệ thống

Bảng 3.16: Bảng mô tả chức năng quản lý khóa học

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

Xem danh sách các khóa học được publish trong hệ thống

MÔ HÌNH HÓA YÊU CẦU CHỨC NĂNG

Hình 3.1: Hình lược đồ Usecase

Hình 3.2: Hình usecase đăng ký

Bảng 3.17: Bảng đặc tả Usecase đăng ký

Mô tả Cho phép Khách đăng ký tài khoản mới

Tiền điều kiện Không có

1.Khách nhấn “Đăng Nhập” trên thanh điều hướng 2.Khách nhấn “Đăng ký”

3.Khách điền đầy đủ thông tin đăng ký bao gồm tên người dùng, email, password

1.1.Hệ thống chuyển sang trang đăng nhập

2.1.Hệ thống chuyển sang trang đăng ký

4.1.Hệ thống kiểm tra và xử lý thông tin đăng ký

4.2.Hệ thống tạo tài khoản mới và lưu vào cơ sở dữ liệu

4.3.Hệ thống tạo 1 AccessToken và RefreshToken cho người dùng

4.4.Hệ thống lưu AccessToken và RefreshToken vào cookie 4.5.Hệ thống sẽ gửi 1 email để chào mừng người dùng

4.5.Hệ thống thông báo đăng ký thành công và chuyển hướng sang trang chủ

Hậu điều kiện Khách đã thành công trong việc đăng ký một tài khoản mới

Ngoại lệ 1 Thông tin đăng ký không hợp lệ, thông báo lỗi

2 Tài khoản đã tồn tại (email), thông báo lỗi

Hình 3.3: Hình usecase đăng nhập

Bảng 3.18: Bảng đặc tả Usecase đăng nhập.bằng tài khoản

Usecase đăng nhập bằng tài khoản

Mô tả Đăng nhập vào hệ thống với tài khoản web có sẵn

21 Điền điều kiện Không có

1.Khách nhấn “Đăng Nhập” trên thanh điều hướng

2.Khách điền đầy đủ thông tin đăng nhập bao gồm email, password

3.1.Hệ thống kiểm tra, xác thực và xử lý thông tin đăng nhập

3.2.Hệ thống tạo AccessToken và RefreshToken cho người dùng

3.2.Hệ thống lưu AccessToken và RefreshToken vào cookie của trình duyệt, thông báo đăng nhập thành công và chuyển hướng sang trang chủ

Hậu điều kiện Khách đã thành công trong việc đăng nhập

Ngoại lệ 1.Thông tin đăng nhập không hợp lệ, thông báo lỗi

2.Tài khoản không tồn tại, thông báo lỗi

Bảng 3.19: Bảng đặc tả Usecase đăng nhập bằng google

Usecase đăng nhập bằng google

Mô tả Đăng nhập vào hệ thống với tài khoản google

Khách Điền điều kiện Không có

2.Khách lựa chọn vào hình thức đăng nhập bằng Google

3.Khách chọn 1 tài khoản để đăng nhập

2.1.Hệ thống chuyển sang trang đăng nhập của Google để người dùng chọn

3.1.Hệ thống kiểm tra email của người dùng Nếu email chưa có trong

22 database thì hệ thống sẽ thêm người dùng đó vào database, nếu đã tồn tại thì tiếp tục

3.2.Hệ thống sẽ gửi email chào mừng người dùng (nếu người dùng lần đầu đăng nhập vào hệ thống)

Bảng 3.20: Bảng đặc tả Usecase đăng nhập bằng github

Usecase đăng nhập bằng github

Mô tả Đăng nhập vào hệ thống với tài khoản github

2.Khách lựa chọn vào hình thức đăng nhập bằng Github

3.Khách chọn 1 tài khoản để đăng nhập

2.1.Hệ thống chuyển sang trang đăng nhập của Github để người dùng chọn

3.1.Hệ thống kiểm tra email của người dùng Nếu email chưa có trong database thì hệ thống sẽ thêm người dùng đó vào database, nếu đã tồn tại thì tiếp tục

3.2.Hệ thống sẽ gửi email chào mừng người dùng (nếu người dùng lần đầu đăng nhập vào hệ thống)

Hình 3.4: Hình usecase khôi phục mật khẩu

Bảng 3.21 Bảng đặc tả usecase khôi phục mật khẩu.:

Usecase khôi phục lại mật khẩu

Mô tả Người dùng đã đăng ký tài khoản và muốn khôi phục lại mật khẩu của mình

2.Khách chọn phần “Quên mật khẩu”

3.Khách điền đầy đủ thông tin để khôi phục lại mật khẩu bao gồm email

5.Khách nhấn vào đường link trong email

6.Khách điền đầy đủ thông tin để khôi phục lại mật khẩu bao gồm mật khẩu mới và xác nhận lại mật khẩu

7.Khách nhấn vào nút “Đặt lại mật khẩu”

2.1.Hệ thống chuyển sang trang quên mật khẩu

3.1.Hệ thống kiểm tra, xác thực xem email của người dùng

3.2.Hệ thống tạo 1 mã token và lưu vào database

3.3.Hệ thống gửi email cho người dùng bao gồm url chứa mã token vừa tạo và sẽ có thời hạn trong 5 phút

5.Hệ thống chuyển người dùng đến trang đặt lại mật khẩu

6.Hệ thống xác thực lại 2 trường mật khẩu mới và xác nhận mật khẩu

7.1.Hệ thống cập nhật mật khẩu mới trong database và xác nhận mã token hết hạn

7.2.Hệ thống thông báo khôi phục mật khẩu thành công và chuyển đến trang đăng nhập

Hậu điều kiện Khách đã thành công trong việc đặt lại mật khẩu

Ngoại lệ 1.Email không hợp lệ hoặc chưa tồn tại trong hệ thống, thông báo lỗi

2.Hệ thống sẽ cho người dùng 1 đường link để cho người dùng chuyển đến trang cập nhật mật khẩu, đường link sẽ có thời gian trong 5 phút, sau

5 phút thì trang sẽ không còn tồn tại

3.Mật khẩu mới thay đổi trùng với mật khẩu cũ, thông báo lỗi

4.Xác nhận lại mật khẩu không trùng với phần mật khẩu mới, thông báo lỗi

Hình 3.5: Hình usecase tìm kiếm khóa học

Bảng 3.22: Bảng đặc tả usecase tìm kiếm khóa học

Usecase tìm kiếm khóa học

Mô tả Tìm kiếm 1 khóa học dựa vào từ khóa

Khách, Học viên Điền điều kiện Không có

1.Khách nhập 1 ký tự hoặc tên của khóa học lên thanh tìm kiếm

1.1.Hệ thống nhận dữ liệu người dùng nhập và tìm kiếm trong database 2.1.Hệ thống trả thông tin các khóa học đã tìm kiếm được

Hậu điều kiện Khách thấy được các khóa học đã được tìm kiếm

3.3.2.5 Xem tổng quan khóa học

Hình 3.6: Hình usecase xem tổng quan khóa học

Bảng 3.23: Bảng đặc tả usecase xem tổng quan khóa học

Usecase xem tổng quan khóa học

Mô tả Xem tổng quan 1 khóa học

Khách, Học viên Điền điều kiện Không có

1.Khách chọn 1 khóa học được hiển thị

1.1.Hệ thống sẽ chuyển đến trang tổng quan của khóa học đó

Hậu điều kiện Khách thấy được tổng quan của khóa học

Ngoại lệ 1.Đường dẫn dẫn tới khóa học không tồn tại sẽ chuyển đến trang “Not found”

Hình 3.7: Hình usecase đăng ký khóa học

Bảng 3.24: Bảng đặc tả usecase đăng ký khóa học

Usecase đăng ký khóa học

Mô tả Đăng ký học sau khi xem tổng quan về khóa học

27 Điền điều kiện Đăng nhập vào hệ thống

1.Khách chọn 1 khóa học được hiển thị

2.Khách nhấn nút “Tham gia”

1.1.Hệ thống sẽ chuyển đến trang tổng quan của khóa học đó

2.1.Hệ thống sẽ lưu dữ liệu người dùng khi tham gia khóa học vào database

2.2.Hệ thống chuyển người dùng đến trang chi tiết khóa học

Hậu điều kiện Học viên tham gia thành công vào khóa học

Hình 3.8: Hình usecase hỏi AI Bảng 3.25: Bảng đặc tả usecase tóm tắt khóa học

Usecase tóm tắt khóa học

Mô tả Học viên tóm tắt nội dung khóa học

Học viên Điền điều kiện Đăng nhập vào hệ thống

1.Khách đăng nhập vào hệ thống

2.Học viên nhấn vào nút hình bong bóng chat

1.1.Hệ thống sẽ chuyển đến trang chủ

2.1.Hệ thống hiển thị chatbot 3.1.Hệ thống gửi nội dung tóm tắt về khóa học cho học viên

3.Học viên nhấn vào tóm tắt khóa học

Hậu điều kiện Học viên tóm tắt được nội dung khóa học

Bảng 3.26: Bảng đặc tả usecase trò chuyện

Mô tả Học viên có thể trò chuyện với AI

2.Học viên nhấn vào nút hình bong bóng chat

3.Học viên nhấn vào trò chuyện với AI

4 Học viên nhập nội dung cần hỏi

2.1.Hệ thống hiển thị chatbot

4.1.Hệ thống sẽ gửi thông tin câu trả lời đến người dùng

Hậu điều kiện Học viên tóm tắt được nội dung khóa học

Hình 3.9: Hình usecase quản lý thông tin cá nhân

Bảng 3.27: Bảng đặc tả usecase thay đổi thông tin

Usecase thay đổi thông tin

Mô tả Người dùng muốn thay đổi thông tin cá nhân

Học viên, Giảng viên Điền điều kiện Đăng nhập vào hệ thống

2.Người dùng nhấn vào avatar của mình trên thanh navbar và chọn phần “Tài khoản”

3.Người dùng nhấn vào nút

4.Người dùng nhập thông tin muốn thay đổi vào form

5.Người dùng nhấn nút “Lưu”

3.1.Hệ thống chuyển người dùng đến trang “Thông tin cá nhân” của người dùng

4.1.Hệ thống xác thực dữ liệu của form

5.1.Hệ thống cập nhật thông tin trong database của người dùng và thông báo cho người dùng thay đổi thông tin thành công

Hậu điều kiện Người dùng cập nhật thông tin cá nhân thành công

Bảng 3.28: Bảng đặc tả usecase thay đổi mật khẩu

Usecase thay đổi mật khẩu

Mô tả Người dùng muốn thay đổi mật khẩu của mình

Học viên, Giảng viên Điền điều kiện Đăng nhập vào hệ thống

2.Người dùng nhấn vào avatar của mình trên thanh navbar và chọn phần “Tài khoản”

4.Người dùng nhập thông tin vào form

5.Người dùng nhấn nút “Lưu”

3.1.Nếu người dùng đăng nhập bằng (Google,Github) sẽ không có mật khẩu trong database, nên hệ thống sẽ chuyển người dùng đến trang thêm mật khẩu, ngược lại sẽ chuyển người dùng đến trang thay đổi mật khẩu

5.1.Hệ thống mã hóa mật khẩu và lưu vào database, sau đó thông báo cho người dùng thay đổi mật khẩu thành công

Hậu điều kiện Người dùng thay đổi mật khẩu thành công thành công

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

Hình 3.10: Hình usecase xem chi tiết khóa học

Bảng 3.29: Bảng đặc tả usecase xem bài giảng

Mô tả Cho phép người dùng xem bài giảng của khóa học

2.Người dùng chọn 1 khóa học được hiển thị

4.Người dùng xem video bài giảng

2.1.Hệ thống chuyển đến trang tổng quan khóa học

3.1.Hệ thống chuyển đến trang chi tiết khóa học

4.1.Hệ thống hiển thị video cho người dùng

Hậu điều kiện Người dùng xem được video bài giảng của khóa học

Bảng 3.30: Bảng đặc tả usecase làm bài tập

Mô tả Cho phép người dùng làm bài tập

4.Người dùng chọn vào phần bài tập

5.Người dùng chọn các đáp án

4.1.Hệ thống hiển thị modal của phần bài tập

5.1.Hệ thống sẽ kiểm tra kết quả và lưu vào database

6.Người dùng nhấn nút kết thúc

6.1.Thông báo cho người dùng về kết quả của phần bài tập

Hậu điều kiện Người dùng hoàn thành phần bài tập của bài giảng

Bảng 3.31: Bảng đặc tả usecase xem tài liệu

Mô tả Cho phép người dùng xem tài liệu của bài giảng

4.Người dùng chọn vào phần tài liệu của bài giảng

4.1.Hệ thống sẽ tải tài liệu về máy của người dùng

Hậu điều kiện Người dùng xem được tài liệu

Bảng 3.32: Bảng đặc tả usecase đọc nội dung tóm tắt

Usecase đọc nội dung tóm tắt

Mô tả Cho phép người dùng đọc nội dung tóm tắt

4.Người dùng chọn vào “tóm tắt nội dung”

4.1.Hệ thống hiển thị nội dung tóm tắt của bài giảng

Hậu điều kiện Người dùng xem được nội dung tóm tắt

Hình 3.11: Hình usecase đăng xuất Bảng 3.33: Bảng đặc tả usecase đăng xuất

Mô tả Cho phép người dùng đăng xuất tài khoản khỏi hệ thống

Học viên, Giảng viên, Quản trị viên Điền điều kiện Đăng nhập vào hệ thống

2.Người dùng nhấn vào avatar trên thanh navbar và chọn vào nút “Đăng xuất”

2.1.Hệ thống xóa toàn bộ cookie của người dùng trong hệ thống

2.2.Thông báo đăng xuất thành công và chuyển người dùng đến trang đăng nhập

Hậu điều kiện Người dùng đăng xuất tài khoản khỏi hệ thống thành công

Hình 3.12: Hình usecase quản lý khóa học

Bảng 3.34: Bảng đặc tả usecase thêm khóa học

Mô tả Cho phép giảng viên thêm khóa học

Giảng viên Điền điều kiện Đăng nhập vào hệ thống với quyền giảng viên

2.Giảng viên nhấn vào nút

“Instructor” trên thanh điều hướng và chọn vào phần “Khóa học

2.1.Hệ thống chuyển đến trang khóa học

3.1 Hiển thị form tạo khóa học mới

3.Giảng viên nhấn vào nút “Tạo khóa học mới”

4.Giảng viên điền thông tin vào form

5.Giảng viên nhấn nút “Xác nhận”

5.1.Hệ thống lưu thông tin của khóa học vào database

5.2.Hệ thống thông báo tạo khóa học thành công

Hậu điều kiện Giảng viên tạo khóa học mới thành công

Bảng 3.35: Bảng đặc tả usecase cập nhật khóa học

Usecase cập nhật khóa học

Mô tả Cho phép giảng viên cập nhật khóa học

3.Giảng viên chọn 1 khóa học cần chỉnh sửa

4.Giảng viên chỉnh sửa các thông tin của khóa học

5.Giảng viên nhấn nút “Lưu”

3.1 Hệ thống chuyển đến trang chi tiết khóa học

5.1.Hệ thống cập nhật thông tin của khóa học trong database

5.2.Hệ thống thông báo chỉnh sửa khóa học thành công

Hậu điều kiện Giảng viên chỉnh sửa khóa học thành công

Bảng 3.36: Bảng đặc tả usecase xóa khóa học

Mô tả Cho phép giảng viên xóa khóa học

Giảng viên Điền điều kiện Đăng nhập vào hệ thống với quyền giảng viên và khóa học chưa được publish

3.Giảng viên chọn 1 khóa học cần xóa

4.Giảng viên nhấn vào biểu tượng thùng rác

5.Giảng viên nhấn “Xác nhận”

4.1.Hiển thị modal cho giảng viên

5.1.Xóa dữ liệu của khóa học trong database

5.2.Thông báo xóa khóa học thành công

Hậu điều kiện Giảng viên xóa khóa học thành công

Hình 3.13: Hình usecase quản lý bài tập Bảng 3.37: Bảng đặc tả usecase thêm bài tập

Mô tả Cho phép giảng viên thêm bài tập

“Instructor” trên thanh điều hướng và chọn vào phần “Bài tập”

3.Giảng viên nhấn vào nút “Tạo bài tập mới”

2.1.Hệ thống chuyển đến trang bài tập

3.1 Hiển thị form tạo bài tập mới

5.1.Hệ thống lưu thông tin của bài tập vào database

5.2.Hệ thống thông báo tạo bài tập thành công

Hậu điều kiện Giảng viên tạo bài tập mới thành công

Bảng 3.38: Bảng đặc tả usecase chỉnh sửa bài tập

Usecase chỉnh sửa bài tập

Mô tả Cho phép giảng viên chỉnh sửa bài tập

3.Giảng viên chọn 1 bài tập cần chỉnh sửa

4.Giảng viên chỉnh sửa các thông tin của bài tập

3.1 Hệ thống chuyển đến trang chi tiết bài tập

5.1.Hệ thống cập nhật thông tin của bài tập trong database

5.2.Hệ thống thông báo chỉnh sửa bài tập thành công

Hậu điều kiện Giảng viên chỉnh sửa bài tập thành công

Bảng 3.39: Bảng đặc tả usecase xóa bài tập

Mô tả Cho phép giảng viên xóa bài tập

Giảng viên Điền điều kiện Đăng nhập vào hệ thống với quyền giảng viên và bài tập chưa được publish

3.Giảng viên chọn 1 bài tập cần xóa

3.1.Hệ thống chuyển đến trang chi tiết bài tập

5.1.Xóa dữ liệu của bài tập trong database

5.2.Thông báo xóa bài tập thành công

Hậu điều kiện Giảng viên xóa bài tập thành công

Hình 3.14: Hình usecase quản lý học viên Bảng 3.40: Bảng đặc tả usecase quản lý học viên

Usecase quản lý học viên

Mô tả Cho phép giảng viên xem các học viên đã học khóa học

“Instructor” trên thanh điều hướng và chọn vào phần “Học viên”

2.1.Hệ thống chuyển đến trang học viên

2.2.Hệ thống hiển thị 1 bảng bao gồm các học viên trong khóa học

Hậu điều kiện Hiển thị 1 bảng gồm các học viên cho giảng viên

Hình 3.15: Hình usecase quản lý bài giảng Bảng 3.41: Bảng đặc tả usecase thêm bài giảng

Mô tả Cho phép giảng viên thêm bài giảng

“Giảng viên” trên thanh điều hướng và chọn vào phần “Bài giảng”

3.Giảng viên nhấn vào nút “Tạo bài giảng mới”

2.1.Hệ thống chuyển đến trang bài giảng

3.1 Hiển thị form tạo bài giảng mới

5.1.Hệ thống lưu thông tin của bài giảng vào database

5.2.Hệ thống thông báo tạo bài giảng thành công

Hậu điều kiện Giảng viên tạo bài giảng mới thành công

Bảng 3.42: Bảng đặc tả usecase chỉnh sửa bài giảng

Usecase chỉnh sửa bài giảng

Mô tả Cho phép giảng viên chỉnh sửa bài giảng

3.Giảng viên chọn 1 bài giảng cần chỉnh sửa

4.Giảng viên chỉnh sửa các thông tin của bài giảng

3.1 Hệ thống chuyển đến trang chi tiết bài giảng

5.1.Hệ thống cập nhật thông tin của bài giảng trong database

5.2.Hệ thống thông báo chỉnh sửa bài giảng thành công

Hậu điều kiện Giảng viên chỉnh sửa bài giảng thành công

Bảng 3.43: Bảng đặc tả usecase xóa bài giảng

Mô tả Cho phép giảng viên xóa bài giảng

Giảng viên Điền điều kiện Đăng nhập vào hệ thống với quyền giảng viên và bài giảng chưa được publish

3.Giảng viên chọn 1 bài giảng cần xóa

3.1.Hệ thống chuyển đến trang chi tiết bài giảng

5.1.Xóa dữ liệu của bài giảng trong database

5.2.Thông báo xóa bài giảng thành công

Hậu điều kiện Giảng viên xóa bài giảng thành công

Bảng 3.44: Bảng đặc tả usecase tạo phụ đề tự động cho video

Usecase tạo phụ đề tự động cho video

Mô tả Cho phép giảng viên tạo phụ đề tự động cho video bài giảng

3.Giảng viên chọn 1 bài giảng cần tạo phụ đề

4.Giảng viên chọn tự động tạo phụ đề

3.1 Hệ thống chuyển đến trang chi tiết bài giảng

4.1.Hệ thống tạo phụ đề cho bài giảng 5.1.Hệ thống cập nhật phụ đề của bài giảng trong database

5.2.Hệ thống thông báo tạo phụ đề cho bài giảng thành công

Hậu điều kiện Giảng viên tạo phụ đề cho bài giảng thành công

Hình 3.16: Hình usecase quản lý người dùng Bảng 3.45: Bảng đặc tả usecase cập nhật quyền

Mô tả Cho phép quản trị viên cập nhật quyền của người dùng

Quản trị viên Điền điều kiện Đăng nhập vào hệ thống với quyền quản trị viên

2.Quản trị viên truy cập vào phần “Quản lý người dùng”

2.1.Hệ thống chuyển đến trang Quản lý người dùng

3.Quản trị viên chọn 1 người dùng trong bảng

4.Quản trị viên thay đổi quyền cho người dùng

5.Quản trị viên ấn nút xác nhận

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

5.1.Hệ thống cập nhật quyền của người dùng trong database

Hậu điều kiện Quản trị viên cập nhật quyền của người dùng thành công

Hình 3.17: Hình usecase quản lý khóa học

Bảng 3.46: Bảng đặc tả usecase quản lý khóa học

Usecase quản lý khóa học

Mô tả Cho phép xem các khóa học đang được publish trong hệ thống

Quản trị viên Điền điều kiện Đăng nhập vào hệ thống với quyền quản trị viên

2.Quản trị viên truy cập vào phần “Quản lý khóa học”

2.1.Hệ thống chuyển đến trang Quản lý khóa học

2.2.Hệ thống liệt kê các khóa học đã được publish trong hệ thống ra một bảng

Hậu điều kiện Quản trị viên xem các khóa học đã được publish trong hệ thống.

LƯỢC ĐỒ TUẦN TỰ

Hình 3.18: Hình lược đồ tuần tự người dùng đăng ký tài khoản

Hình 3.19: Hình lược đồ tuần tự người dùng đăng nhập

Hình 3.20: Hình lược đồ tuần tự giảng viên upload video bài giảng

3.4.4 Tự động tạo câu hỏi quizz

Hình 3.21: Hình lược đồ tuần tự giảng viên tự động tạo câu hỏi quizz

3.4.5 Tự động tạo phụ đề video

Hình 3.22: Hình lược đồ tuần tự giảng viên tự động tạo phụ đề video

CHƯƠNG 4: THIẾT KẾ WEBSITE

THIẾT KẾ CƠ SỞ DỮ LIỆU

4.1.1 Sơ đồ thiết kế cơ sở dữ liệu:

4.1.2 Mô tả thiết kế cơ sở dữ liệu

Bảng 4.1: Bảng mô tả thuộc tính của User

Tên thuộc tính Kiểu dữ liệu Ý nghĩa

2 email String Email đăng nhập của người dùng

3 password String Mật khẩu tài khoản người dùng

4 name String Tên người dùng

5 image String Url hình ảnh

6 bio String Tiểu sử của người dùng

Hình 4.1: Hình các bảng trong cơ sở dữ liệu

7 facebook_id String Link facebook người dùng

8 youtube_id String Link youtube người dùng

9 tiktok_id String Link tiktok người dùng

10 role Enum Role Quyền truy cập của người dùng

11 registration_date DateTime Ngày tạo tài khoản

12 verify_date DateTime Ngày xác thực tài khoản

Bảng 4.2: Bảng mô tả thuộc tính của PasswordResetToken

STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa

2 token String Mã token url

3 token_expiry DateTime Thời gian hết hạn của token

4 user_id String Khóa ngoại id của người dùng

5 isDeleted Boolean Trạng thái của url

Bảng 4.3: Bảng mô tả thuộc tính của Topic

2 slug String Tên viết ngắn gọn của topic

3 title String Tên của topic

Bảng 4.4: Bảng mô tả thuộc tính của Course

2 slug String Slug của title

3 title String Tên của khóa học

4 requirement String[] Các yêu cầu của khóa học

5 learning_outcome String[] Kết quả đạt được khi hoàn thành khóa học

6 description String Mô tả của khóa học

7 picture String Url ảnh của khóa học

8 isPublished Boolean Trạng thái của khóa học

9 topic_id String Khóa ngoại id của topic

10 owner_id String Khóa ngoại id của user

11 level_id String Khóa ngoại của level

12 create_at DateTime Ngày tạo khóa học

13 update_at DateTime Ngày chỉnh sửa khóa học

Bảng 4.5: Bảng mô tả thuộc tính của Chapter

2 token String Mã định danh của chương

3 title String Tên của chương

4 description String Mô tả của chương

5 position Int Số thứ tự của chương

6 isPublished Boolean Trạng thái của chương

7 course_id String Khóa ngoại id của khóa học

Bảng 4.6: Bảng mô tả thuộc tính của Lesson

2 token String Mã định danh của bài học

3 title String Tên của bài học

4 description String Mô tả của bài học

5 videoUrl String Url video của bài học

6 duration Int Thời gian của video

7 thumbnail String Url thumbnail của video

8 isPreview Boolean Trạng thái để xác định xem bài học có thể bật để người dùng có thể xem trước

9 isPublished Boolean Trạng thái của bài học

10 contentId String Khóa ngoại id của content

Bảng 4.7: Bảng mô tả thuộc tính của Review

2 userId String Khóa ngoại id của người dùng

3 courseId String Khóa ngoại id của khóa học

4 content String Nội dung đánh giá

5 create_at DateTime Ngày tạo đánh giá

6 update_at DateTime Ngày tạo đánh giá

Bảng 4.8: Bảng mô tả thuộc tính của ReviewReply

3 reviewId String Khóa ngoại id của đánh giá

4 reply String Nội dung phản hồi đánh giá

5 create_at DateTime Ngày tạo phản hồi đánh giá

6 update_at DateTime Ngày chỉnh sửa phản hồi đánh giá

Bảng 4.9: Bảng mô tả thuộc tính của Exercise

2 token String Mã định danh của bài tập

3 title String Tên của bài tập

5 contentId String Khóa ngoại id của Content

6 number_correct Int Số lượng câu hỏi cần đúng để vượt qua

7 isOpen Boolean Trạng thái của bài tập

8 create_at DateTime Ngày tạo bài tập

9 update_at DateTime Ngày chỉnh sửa bài tập

Bảng 4.10: Bảng mô tả thuộc tính của Quiz

2 token String Mã định danh của quiz

3 question String Câu hỏi của quiz

4 answer String Đáp án của quiz

5 option String[] Các lựa chọn của quiz

6 position Int Số thứ tự của quiz

7 explain String Giải thích đáp án đúng

8 isPublished Boolean Trạng thái của quiz

9 exerciseId String Khóa ngoại id của bài tập

10 create_at DateTime Ngày tạo quiz

11 update_at DateTime Ngày chỉnh sửa quiz

Bảng 4.11: Bảng mô tả thuộc tính của UserProgress

3 courseId String Khóa ngoại id của khóa học

4 contentId String Khóa ngoại id của Content

5 isCompleted Boolean Trạng thái của người dùng khi xem bài học

7 updatedAt DateTime Ngày chỉnh sửa

Bảng 4.12: Bảng mô tả thuộc tính của UserProgressQuiz

2 quizzId String Khóa ngoại id của quiz

3 answer String Đáp án của người dùng

4 userProgressId String Khóa ngoại id của userprogress

5 isCorrect Boolean Trạng thái của đáp án

Bảng 4.13: Bảng mô tả thuộc tính của Attachment

2 name String Tên của tài liệu

3 url String Đường dẫn của tài liệu

4 lessonId String Khóa ngoại id của bài học

6 updatedAt DateTime Ngày chỉnh sửa

Bảng 4.14: Bảng mô tả thuộc tính của Level

2 slug String Slug của name

3 name String Tên của level

Bảng 4.15: Bảng mô tả thuộc tính của AsyncVideo

Trạng thái của quá trình xử lý

3 description String Mô tả trạng thái

4 lessonId String Khóa ngoại của Lesson

5 create_at DateTime Ngày tạo

6 update_at DateTime Ngày chỉnh sửa

Bảng 4.16: Bảng mô tả thuộc tính của Subtitle

2 language String Tên của ngôn ngữ

3 language_code String Mã ngôn ngữ

4 file String Url file phụ đề

5 lessonId String Khóa ngoại của Lesson

6 create_at DateTime Ngày tạo

7 update_at DateTime Ngày chỉnh sửa

Bảng 4.17: Bảng mô tả thuộc tính của Content

2 token String Mã định danh của content

Loại nội dung như Exercise, Lesson

4 chapterId String Khóa ngoại của Chapter

5 position Int Thứ tự vị trí trong 1 chương

Bảng 4.18: Bảng mô tả thuộc tính của LabCode

2 lab String Tên của bài lab

Bảng 4.19: Bảng mô tả thuộc tính của FileCode

2 fileName String Tên của file code

Ngôn ngữ của file code

MimeType Định dạng của file

5 default_content String Nội dung mặc định của file code

6 codeId String Khóa ngoại của Code

Bảng 4.20: Bảng mô tả thuộc tính của Code

2 token String Mã định danh

4 labcodeId String Khóa ngoại của LabCode

5 exerciseId String Khóa ngoại của Exercise

Bảng 4.21: Bảng mô tả thuộc tính của FileTest

2 fileName String Tên của file Test

Ngôn ngữ của file Test

MimeType Định dạng của file

5 content String Nội dung của file Test

Bảng 4.22: Bảng mô tả thuộc tính của UserProgressCode

3 fileCodeId String Khóa ngoại của FileCode

Nội dung code của người dùng

5 userProgressId String Khóa ngoại của

Bảng 4.23: Bảng mô tả thuộc tính của Server

3 name String Tên của Server

4 imageUrl String Url ảnh của Server

5 inviteCode String Mã mời để tham gia Server

6 userId String Khóa ngoại của User

8 updateAt DateTime Ngày chỉnh sửa

Bảng 4.24: Bảng mô tả thuộc tính của Member

Vai trò của người dùng

4 serverId String Khóa ngoại của Server

Bảng 4.25: Bảng mô tả thuộc tính của Channel

3 name String Tên của Channel

6 serverId String Khóa ngoại của Server

Bảng 4.26: Bảng mô tả thuộc tính của Message

3 fileUrl String Url của file

4 memberId String Khóa ngoại của Member

5 channelId String Khóa ngoại của Channel

6 deleted Boolean Trạng thái tồn tại của

Bảng 4.27: Bảng mô tả thuộc tính của Conversation

2 memberOwnerId String Khóa ngoại của Member

3 memberGuestId String Khóa ngoại của Member

Bảng 4.28: Bảng mô tả thuộc tính của DirectMessage

3 fileUrl String Url của file

4 memberId String Khóa ngoại của Member

5 conversationlId String Khóa ngoại của

6 deleted Boolean Trạng thái tồn tại của

Bảng 4.29: Bảng liệt kê các Role

Bảng 4.30: Bảng liệt kê các TypeExercise

Bảng 4.31: Bảng liệt kê các ContentType

Bảng 4.32: Bảng liệt kê các LanguageType

Bảng 4.33: Bảng liệt kê các MimeType

Bảng 4.34: Bảng liệt kê các LevelType

Bảng 4.35: Bảng liệt kê các QueueType

Bảng 4.36: Bảng liệt kê các ChannelType

Bảng 4.37: Bảng liệt kê các MemberRole

THIẾT KẾ GIAO DIỆN

4.2.1 Màn hình của quản trị viên

4.2.1.1 SCA001 Trang quản lý khóa học

Hình 4.2: SCA001:Trang quản lý khóa học

Bảng 4.38: Bảng mô tả Trang quản lý khóa học

STT Tên Loại Mô tả

1 Avatar Img Avatar của quản trị viên

2 Tìm kiếm Input Tìm kiếm người dùng trong các khóa học theo email

Table Danh sách các khóa học đã publish trong hệ thống

4 Trang trước Button Chuyển sang danh sách trước đó

5 Trang tiếp Button Chuyển sang danh sách kế tiếp

6 Khóa học a Chuyển sang trang quản lý khóa học

7 Người dùng a Chuyển sang trang quản lý người dùng

8 Đăng ký giảng viên a Chuyển sang trang đăng ký giảng viên

4.2.1.2 SCA002 Trang quản lý người dùng

Hình 4.3: SCA002 Trang quản lý người dùng

Bảng 4.39: Bảng mô tả Trang quản lý người dùng

2 Tìm kiếm Input Tìm kiếm người dùng theo email

3 Thêm người dùng Modal Thêm 1 người dùng mới

Table Danh sách người dùng trong hệ thống

5 Lựa chọn a Chuyển sang trang xem chi tiết thông tin người dùng

4.2.1.3 SCA003 Trang xem thông tin người dùng

Hình 4.4: SCA003 Trang xem thông tin người dùng Bảng 4.40: Bảng mô tả Trang xem thông tin người dùng

1 Quyền Select Lựa chọn quyền cho người dùng

2 Lưu lại Button Lưu quyền của người dùng

3 Xóa Button Xóa người dùng

4.2.1.4 SCA004 Trang quản lý đăng ký giảng viên

Hình 4.5: SCA004 Trang quản lý đăng ký giảng viên

Bảng 4.41: Bảng mô tả Trang quản lý đăng ký giảng viên

2 Tìm kiếm Input Tìm kiếm người dùng theo email

Table Danh sách đăng ký giảng viên trong hệ thống

4 Lựa chọn a Chuyển sang trang xem chi tiết thông tin đăng ký

4.2.1.5 SCA005 Trang chi tiết đăng ký giảng viên

Hình 4.6: SCA005 Trang chi tiết đăng ký giảng viên

Bảng 4.42: Bảng mô tả Trang chi tiết đăng ký giảng viên

1 Hành động Modal Hiển thị modal để cập trạng thái của đơn đăng ký

2 Trạng thái Select Trạng thái của đơn dăng ký

3 Phản hồi Textarea Nội dung phản hồi

4 Tiếp tục Button Xác nhận trạng thái

4.2.2 Màn hình của giảng viên

4.2.2.1 SCI001 Trang quản lý khóa học của giảng viên

Hình 4.7: SCI001 Trang quản lý khóa học của giảng viên

Bảng 4.43: Bảng mô tả Trang quản lý khóa học của giảng viên

1 Avatar Img Avatar của người dùng

2 Giảng viên Button Chuyển sang trang giảng viên

3 Phòng học tập Button Chuyển sang trang phòng học tập

4 Thông tin Button Hiển thị thông tin của website

5 Trang chính Button Chuyển sang trang chính

6 Tạo khóa học Modal Tạo 1 khóa học mới

7 Tìm kiếm Input Tìm kiếm khóa học theo tên

10 Biểu đồ a Chuyển sang trang thống kế học viên trong từng khóa học

11 Bảng danh sách khóa học

Table Hiển thị danh sách các khóa học

12 Lựa chọn Button Chỉnh sửa nội dung của khóa học

13 Trang trước Button Hiển thị trang trước của table

14 Trang tiếp Button Hiển thị trang kế tiếp của table

4.2.2.2 SCI002 Trang xem chỉnh sửa bài học

Hình 4.8: SCI002 Trang chỉnh sửa bài học Bảng 4.44: Bảng mô tả Trang chỉnh sửa bài học

1 Xóa Modal Xóa khóa học

2 Trạng thái Button Publish và Unpublish khóa học

3 Ẩn/Hiện Button Ẩn/Hiện xem trước bài học

4 Chỉnh sửa tiêu đề Button Chuyển qua phần chỉnh sửa tiêu đề

5 Chỉnh sửa mô tả Button Chuyển qua phần chỉnh sửa mô tả

6 Chương a Chuyển sang trang chỉnh sửa chương

7 Chỉnh sửa video Button Chuyển qua phần chỉnh sửa video

8 Tạo phụ đề tự động

Button Tạo phụ dề tự động

9 Thêm phụ đề Button Chuyển qua phần phần thêm phụ đề

10 Thêm tệp Button Chuyển qua phần thêm 1 tệp

11 Thêm thumbnail Button Chuyển qua phần chỉnh sửa thumbnail của video

4.2.2.3 SCI003 Trang chỉnh sửa thông tin khóa học

Hình 4.9: SCI003 Trang chỉnh sửa thông tin khóa học

Bảng 4.45: Bảng mô tả Trang chỉnh sửa thông tin khóa học

5 Sắp xếp chương Drag Kéo, thả để sắp xếp lại chương của khóa học

6 Chỉnh sửa chương a Chuyển sang trang chỉnh sửa chương

7 Chỉnh sửa mục tiêu Button Chuyển qua phần chỉnh sửa mục tiêu

8 Chỉnh sửa yêu cầu Button Chuyển qua phần chỉnh sửa yêu cầu

9 Chỉnh sửa hình ảnh Button Chuyển qua phần chỉnh sửa hình ảnh

10 Chỉnh sửa danh mục Button Chuyển qua phần chỉnh sửa danh mục

11 Tạo chương mới Modal Tạo một chương mới

4.2.2.4 SCI004 Trang chỉnh sửa chương

Hình 4.10: SCI004 Trang chỉnh sửa chương Bảng 4.46: Bảng mô tả Trang chỉnh sửa chương

3 Tạo bài tập mới Modal Tạo bài tập mới

4 Tạo bài học mới Modal Tạo bài học mới

5 Sắp xếp bài học Drag Kéo, thả để sắp xếp lại bài học của chương

6 Chỉnh sửa bài học a Chuyển sang trang chỉnh sửa bài học

9 Khóa học a Chuyển sang trang chỉnh sửa khóa học

4.2.2.5 SCI006 Trang chỉnh sửa bài tập

Hình 4.11: SCI006 Trang chỉnh sửa bài tập

Bảng 4.47: Bảng mô tả Trang chỉnh sửa bài tập

1 Đóng Button Đóng bài tập

2 Xóa Modal Xóa bài tập

3 Tạo bài tập AI Modal Tạo bài tập bằng AI

4 Tên bài tập Button Chuyển sang phần chỉnh sửa tên bài tập

5 Chỉnh sửa số lượng câu hỏi để vượt qua

Button Chuyển sang phần chỉnh số lượng câu hỏi để vượt qua

6 Sắp xếp câu hỏi Drag Sắp xếp vị trí câu hỏi của bài tập

7 Chỉnh sửa câu hỏi a Chuyển sang trang chỉnh sửa câu hỏi

8 Tạo câu hỏi mới Modal Tạo câu hỏi mới

4.2.2.6 SCI007 Trang chỉnh sửa câu hỏi của bài tập

Hình 4.12: SCI007 Trang chỉnh sửa câu hỏi Bảng 4.48: Bảng mô tả Trang chỉnh sửa câu hỏi

1 Trạng thái Button Publish/Unpublish câu hỏi

2 Xóa Modal Xóa câu hỏi

3 Tên câu hỏi Button Chuyển qua phần chỉnh sửa tên câu hỏi

4 Đáp án Button Chuyển qua phần chỉnh sửa đáp án

5 Giải thích Button Chuyển qua phần chỉnh sửa lời giải thích

6 Lựa chọn đáp án RadioButto n

Lựa chọn đáp án đúng

7 Submit Button Xác nhận chọn đáp án

8 Chỉnh sửa bài tập a Chuyển sang trang chỉnh sửa bài tập

4.2.2.7 SCI008 Trang quản lý người dùng

Hình 4.13: SCI008 Trang quản lý người dùng Bảng 4.49: Bảng mô tả Trang quản lý người dùng

1 Lọc khóa học Modal Lọc người dùng theo khóa học

2 Tìm kiếm Input Tìm kiếm email của người dùng

3 Trang trước Button Hiển thị trang trước của table

4 Trang tiếp Button Hiển thị trang kế tiếp của table

4.2.2.8 SCI009 Trang biểu đồ thống kê người dùng

Hình 4.14: SCI009 Trang biểu đồ thống kê người dùng

Bảng 4.50: Bảng mô tả Trang biểu đồ thống kê người dùng

1 Biểu đồ Chart Biểu đồ thống kê người dùng của từng khóa học

4.2.3.1 SCU001 Trang chính của hệ thống

Hình 4.15: SCU001 Trang chính của hệ thống

Bảng 4.51: Bảng mô tả Trang chính của hệ thống

1 Tìm kiếm Input Tìm kiếm khóa học

Lọc khóa học theo các thành phần khác

Grid Danh sách các khóa học trong hệ thống

4 Chat bot Pop-up Hiển thị chat bot

5 Phân trang Button Phân trang cho các khóa học

Hình 4.16: SCU002 Trang đăng nhập

Bảng 4.52: Bảng mô tả Trang đăng nhập

1 Email Input Nhập email tài khoản

2 Mật khẩu Input Mật khẩu của tài khoản

3 Quên mật khẩu Button Chuyển qua trang quên mật khẩu

4 Đăng nhập Button Đăng nhập với tài khoản

Button Đăng nhập với tài khoản github

Button Đăng nhập với tài khoản google

7 Đăng ký a Chuyển sang trang đăng ký

8 Chính sách a Chuyển sang trang chính sách và quyền riêng tư

Hình 4.17: SCU003 Trang đăng ký Bảng 4.53: Bảng mô tả Trang đăng ký

1 Tên người dùng Input Nhập tên người dùng

3 Mật khẩu Input Mật khẩu của tài khoản

4 Đăng ký Button Đăng ký tài khoản

Button Đăng nhập với tài khoản github

Button Đăng nhập với tài khoản google

7 Đăng nhập Button Chuyển sang trang đăng nhập

8 Chính sách a Chuyển sang trang chính sách và quyền riêng tư

4.2.3.4 SCU004 Trang quên mật khẩu

Hình 4.18: SCU004 Trăng quên mật khẩu

Bảng 4.54: Bảng mô tả chức năng quên mật khẩu

2 Reset email Button Gửi mã đến Email

3 Đăng nhập Button Chuyển sang trang đăng nhập

4 Chính sách a Chuyển sang trang chính sách

4.2.3.5 SCU005 Trang khôi phục mật khẩu mới

Hình 4.19: SCU005 Trang khôi phục mật khẩu

Bảng 4.55: Bảng mô tả Trang khôi phục mật khẩu

1 Mật khẩu mới Input Nhập mật khẩu mới cho tài khoản

2 Xác nhận lại mật khẩu

Input Xác nhận lại mật khẩu mới

3 Xác nhận Button Khôi phục mật khẩu cho tài khoản

4 Chính sách a Chuyển sang trang chính sách

4.2.3.6 SCU006 Trang xem thông tin khóa học 1

Hình 4.20: SCU006 Trang xem thông tin khóa học 1

Bảng 4.56: Bảng mô tả Trang xem thông tin khóa học 1

5 Video giới thiệu Video Xem video giới thiệu

Button Chuyển sang trang chi tiết khóa học

3 Danh sách các bài giảng

Dropdown Hiển thị danh sách bài giảng

4 Bài giảng Button Hiển thị preview các bài giảng

5 Mục tiêu Tabs Hiển thị mục tiêu của khóa học

6 Yêu cầu Tabs Hiển thị yêu cầu của khóa học

7 Mô tả Tabs Hiển thị mô tả của khóa học

8 Các khóa học liên quan

Div Hiển thị các khóa học liên quan

4.2.4 Màn hình của Học viên

Hình 4.21: SCHV001 Trang cá nhân Bảng 4.57: Bảng mô tả Trang cá nhân

1 Thay đổi avatar Input Thay đổi avatar của người dùng

2 Thông tin a Chuyển sang trang cá nhân

3 Thay đổi mật khẩu a Chuyển sang trang thay đổi mật khẩu

4 Khóa học a Chuyển sang trang khóa học đã tham gia

5 Username Input Nhập tên của người dùng

6 Bio Textarea Nhập tiểu sử

7 Facebook Input Nhập id của facebook

8 Youtube Input Nhập id của youtube

9 Tiktok Input Nhập id của tiktok

10 Lưu Button Lưu thông tin đã thay đổi

11 Hủy Button Đặt lại các trường trong form

4.2.4.2 SCHV002 Trang xem video bài học

Hình 4.22: SCHV002 Trang xem video bài học

Bảng 4.58: Bảng mô tả trang xem video bài học

Video Video Video của bài học

Bài học trước Button Chuyển sang bài học trước đó Bài học tiếp Button Chuyển sang bài học kế tiếp Danh sách các bài giảng

Button Hiển thị danh sách các bài giảng

5 Tổng quan Tabs Hiển thị thông tin tổng quan của bài giảng

6 Tài nguyên Tabs Chứa các tài nguyên của bài giảng

7 Q&A Tabs Hiển thị các câu hỏi và trả lời của bài giảng

8 Tóm tắt Tabs Tóm tắt nội dung của bài giảng

Button Đánh dấu đã hoàn thành bài giảng

4.2.4.3 SCHV003 Trang trả lời Quiz

Hình 4.23: SCHV003 Trang trả lời Quiz

Bảng 4.59: Bảng mô tả Trang trả lời Quiz

Chọn đáp án của bài quiz

2 Tiếp tục Button Chuyển sang câu hỏi kế tiếp

4.2.4.4 SCHV005 Trang hỏi đáp bài học

Hình 4.24: SCHV005 Trang hỏi đáp bài học

Bảng 4.60: Bảng mô tả Trang hỏi đáp bài học

1 Nội dung Textarea Nhập nội dung đánh giá

3 Gửi Button Gửi đánh giá

4 Lựa chọn Modal Hiển thị các lựa chọn

5 Xóa Button Xóa đánh giá

6 Phản hồi Button Phản hồi lại đánh giá

7 Sao chép Button Sao chép đánh giá

4.2.4.5 SCHV007 Trang thay đổi mật khẩu

Hình 4.25: SCHV007 Trang thay đổi mật khẩu

Bảng 4.61: Bảng mô tả Trang thay đổi mật khẩu

1 Mật khẩu hiện tại Input Nhập mật khẩu hiện tại

2 Mật khẩu mới Input Nhập mật khẩu mới

3 Xác nhận mật khẩu mới

Input Nhập lại mật khẩu mới

4 Lưu Button Lưu lại mật khẩu mới

CHƯƠNG 5: KIỂM THỬ HỆ THỐNG

THÔNG TIN CHUNG VỀ KIỂM THỬ

Mục đích tổng thể của việc thử nghiệm là đảm bảo ứng dụng đáp ứng được toàn bộ nhu cầu về kĩ thuật, chức năng trong quá trình người dùng sử dụng

Website học tập trực tuyến sẽ bao gồm phần Front-end chứa giao diện và phần Back-end chứa các code để gắn vào front-end Ngoài ra còn phần CSDL được lưu trữ trên mongodb.

TEST CASE

5.2.1 Kiểm thử chức năng đăng ký tài khoản

Bảng 5.1: Bảng mô tả kiểm thử chức năng đăng ký tài khoản

Các bước thực hiện Kết quả mong đợi

: email đã tồn tại trên hệ thống

1.Nhấn vào nút Login trên trang chủ 2.Hệ thống chuyển qua trang login 3.Chọn vào nút "Sign up" trên trang login 4.Hệ thống qua trang đăng kí 5.Nhập Username, Email,

Thông báo lỗi email đã tồn tại

2 Đăng ký vào form đăng ký:

1.Nhấn vào nút Login trên trang chủ 2.Hệ thống chuyển qua trang login 3.Chọn vào nút "Sign up" trên trang login 4.Hệ thống qua trang đăng kí 4.Nhập Username, Email

Chuyển đến ô Password hiển thị thông báo Password must be at least 8 characters

5.2.2 Kiểm thử chức năng đăng nhập

Bảng 5.2: Bảng mô tả kiểm thử chức năng đăng nhập

3 Đăng nhập bằng form: user không tồn tại

1.Nhấn vào nút Login trên trang chủ 2.Hệ thống chuyển qua trang login 3.Nhập Email, Password

Thông báo tài khoản hoặc mật khẩu không đúng

4 Đăng nhập bằng form: user tồn tại trên hệ thống

4.Nhấn nút Login Đăng nhập thành công, chuyển người dùng đến trang chủ

5 Đăng nhập bằng form: nhập sai password

Thông báo mật khẩu không đúng

5.2.3 Kiểm thử chức năng quên mật khẩu

Bảng 5.3: Bảng mô tả kiểm thử chức năng quên mật khẩu

Tính năng quên mật khẩu: email khôi phục

1.Nhấn vào nút Login trên trang chủ 2.Hệ thống chuyển qua trang login

Hiển thị thông báo lỗi

89 mật khẩu không tồn tại

3.Nhấn vào link: Forgot password?

4.Nhập email 5.Nhấn Reset Email eLearning_0

Tính năng quên mật khẩu: email khôi phục mật khẩu tồn tại

1.Nhấn vào nút Login trên trang chủ 2.Hệ thống chuyển qua trang login 3.Nhấn vào link: Forgot password?

4.Nhập email 5.Nhấn Reset Email

Gửi url về gmail của người dùng và thông báo thành công

5.2.4 Kiểm thử chức năng cập nhật thông tin người dùng

Bảng 5.4: Bảng mô tả kiểm thử chức năng cập nhật thông tin người dùng

ID Mô tả testcase Các bước thực hiện

Cập nhật thông tin user: tải ảnh avatar có kích thước >

1.Click vào avatar chọn "Profile"

2.Click vào avatar upload ảnh có kích thước

Tiêu đề	Xây dựng website học trực tuyến
Tác giả	Nguyễn Hữu Thắng, Nguyễn Văn Giang
Người hướng dẫn	TS. Lê Vĩnh Thịnh
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	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	114
Dung lượng	10,13 MB