Đồ án cơ sở 2 tên Đề tài website hỗ trợ quizz and flashcard

2.1.1 Yêu cầu bài toán -Yêu cầu chức năng: +Đăng nhập, đăng kí+Chức năng tạo bài test+Chức năng tạo bài học bằng flash card+Chức năng thêm một người dùng của một admin... -User học sinh

UNIVERSITY OF INFORMATION TECHNOLOGY &

VIETNAM KOREA COMMUNICATION

Faculty of Computer Science

ĐỒ ÁN CƠ SỞ 2 TÊN ĐỀ TÀI: WEBSITE HỖ TRỢ QUIZZ AND

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN

THÔNG VIỆT-HÀN Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 2 TÊN ĐỀ TÀI: WEBSITE HỌC TẬP ỨNG DỤNG

QUIZZ AND FLASHCARD

Sinh viên : NGUYỄN ĐÌNH QUỐC KHÁNH

MỞ ĐẦU

Thưa cô,

Trong thời đại hiện đại, công nghệ ngày càng trở nên phổ biến và ảnh hưởng đến mọilĩnh vực của cuộc sống, bao gồm cả giáo dục Trong lĩnh vực học tập, việc sử dụngflashcard đã trở thành một phương pháp phổ biến để học và ôn tập kiến thức Và hômnay, tôi rất vui được giới thiệu đến quý vị một trang web học tập đặc biệt, tập trung vàoviệc ứng dụng flashcard

Trang web này đã được thiết kế nhằm cung cấp một nền tảng tuyệt vời cho việc tạo,quản lý và sử dụng flashcard Chúng ta có thể tạo ra những bộ flashcard cá nhân chomọi môn học và chủ đề một cách dễ dàng Ngoài ra, trang web cũng cung cấp một thưviện flashcard phong phú, cho phép tìm kiếm và sử dụng các bộ flashcard đã được chia

LỜI CẢM ƠN

Chúng em xin cảm ơn các thầy cô trường Đại học Công nghệ Thông tin và Truyềnthông Việt Hàn đã giảng dạy, truyền đạt những kiến thức quý báu và tạo điều kiện đểchúng tôi thực hiện đồ án này

Đặc biệt, chúng em xin gửi lời cảm ơn chân thành đến thầy Th.S Võ Ngọc Đạt, người

đã nhiệt tình hướng dẫn, trực tiếp hướng dẫn và tạo mọi điều kiện giúp đỡ chúng emtrong quá trình thực hiện đồ án

Mặc dù chúng tôi đã cố gắng hết sức nhưng chắc chắn dự án còn nhiều thiếu sót.Chúng em rất mong nhận được sự thông cảm và hướng dẫn của thầy

Xin chân thành cảm ơn!

Nhận xét của giảng viên hướng dẫn

MỤC LỤC

PREAMBLE

MỞ ĐẦU 3 DANH MỤC HÌNH VẼ 11

DANH MỤC CÁC TỪ VIẾT TẮT 12

MỞ ĐẦU 1 1.Giới thiệu về đề tài 1

1.1 Bối cảnh thực hiện đề tài 1

1.2 Lý do chọn đề tài 1

2 Mục tiêu của đề tài 2

3 Nội dung và kế hoạch thực hiện 2

3.1 Nội dung 2

3.2 Kế hoạch thực hiện 2

4 Giới thiệu về đề tài 3

CHƯƠNG 1: TỔNG QUAN VỀ TRANG WEB 4

1.1 Cơ sở lý thuyết 4

1.1.1 HTML 4

1.1.2 CSS 5

1.1.3 Bootstrap 5

1.1.4 JavaScript 6

1.1.5 Lavarel 6

1.2 Hạn chế và ưu điểm của trang web: 7

1.2.1 Ưu và nhược điểm của HTML 7

6

1.2.2 Ưu và nhược điểm của CSS 8

1.2.3 Ưu và nhược điểm của Bootstrap 9

1.2.4 Ưu và nhược điểm của Javascript: 10

1.2.5 Ưu và nhược điểm của Laravel: 11

1.3 Phương thức 12

1.3.1 Phương thức thực hiện dự án 12

1.3.2 Đặc trưng 12

1.3.3 Chức năng 12

1.4 Tổng kết chương 1 12

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13

2.1 Mô tả bài toán 13

2.1.1 Yêu cầu bài toán 13

2.2 Biểu đồ usecase: 14

2.2.1 Phân tích các tác nhân : 14

2.2.2 Biểu đồ usecase tổng quát: 14

2.3 Đặc tả các usecase: 14

2.3.1 Đăng kí 15

2.3.2 Đặc tả usecase đăng nhập 16

2.3.3 Đổi mật khẩu tài khoản 17

2.3.4 Đăng xuất 18

2.3.5 Xoá tài khoản 19

2.3.6 Tạo bài test 20

2.3.7 Tạo flashcard: 22

2.3.8 Xem danh sách khoá học 23

2.3.9 Xem danh sách người dùng 25

2.3.10 Chỉnh sửa thông tin của một người dùng 25

2.3.11 Xoá một người dùng ra khỏi danh sách 26

2.3.12 Chỉnh sửa thông tin một khoá học 27

2.3.13 Xoá một khoá học 28

2.3.14 Làm một bài test 29

2.3.15 Ôn tập bằng flashcard 30

2.3.16 Tìm kiếm khoá học 31

2.4 Biểu đồ Usecase 33

2.4.1 Usecase Đăng kí 33

2.4.2 Usecase Đăng nhập 35

2.4.3 Usecase Đổi mật khẩu tài khoản 35

2.4.4 Usecase Tạo bài test 36

2.4.5 Usecase Tạo flashcard 37

2.4.6 Usecase Thông tin khóa học 38

2.4.7 Usecase Thông tin người dùng 39

2.5 Biểu đồ hoạt động 40

2.5.1 Biểu đồ hoạt động đăng nhập: 40

2.5.2 Biểu đồ hoạt động đăng kí 41

2.5.3 Biểu đồ hoạt động đổi mật khẩu: 42

2.5.4 Biểu đồ hoạt động tạo test/flashcard 43

2.5.5 Biểu đồ hoạt động thêm một người dùng vào danh sách 44

8

2.5.6 Biểu đồ hoạt động thực hiện một bài test 45

2.5.7 Biểu đồ hoạt động đăng xuất 46

2.6 Biểu đồ tuần tự: 47

2.6.1 Login 47

2.6.2 Tạo một bài học 49

2.6.3 Tìm kiếm 50

2.6.4 Đăng xuất 51

2.6.5 Thêm một user 52

2.7 Sơ đồ lớp 54

CHƯƠNG 3: XÂY DỰNG WEBSITE 55

3.1 Mô tả tổng quan hệ thống 55

3.1.1 Yêu cầu chức năng 55

3.1.2 Yêu cầu phi chức năng 56

3.2 Xây dựng chương trình 57

3.4 Giao diện người dùng 57

3.5 Tổng kết chương 3 57

CHƯƠNG 4: KẾT LUẬN 58

4.1 Kết quả đạt được 58

4.2 Hạn chế 58

4.3 Hướng phát triển 58

4.4 Tổng kết chương 4 59

DANH MỤC CÁC TỪ VIẾT TẮT

Numerical

order Abbreviation symbol Full script

3 HTTP HyperText Transfer Protocol

10

MỞ ĐẦU 1.Giới thiệu về đề tài.

1.1 Bối cảnh thực hiện đề tài

Trong thời đại số hóa và phát triển công nghệ, việc tiếp cận và học tập kiến thức

đã trở nên dễ dàng hơn bao giờ hết Cùng với sự phổ biến của các thiết bị di động và internet, ứng dụng học tập trực tuyến đang trở thành xu hướng phổ biến trong giáo dục

và đào tạo Trong bối cảnh này, một đề tài hấp dẫn và tiềm năng để nghiên cứu và phát triển là "Làm website học tập Quizz and Flashcard"

1.2 Lý do chọn đề tài

Cùng với sự phát triển của công nghệ và mạng internet, việc phát triển một

website học tập Quizz and Flashcard là một sự lựa chọn thông minh và tiềm năng Sựkết hợp giữa hình thức học tập tương tác và công nghệ trực tuyến mang lại nhiều lợiích đáng kể cho người học và giáo viên

Một trong những điểm mạnh của việc chọn đề tài này là khả năng tạo ra một môitrường học tập thú vị và hấp dẫn Với sự sử dụng của câu hỏi trắc nghiệm (Quizz) vàthẻ ghi nhớ (Flashcard), người học sẽ được tham gia vào các hoạt động học tập tươngtác và thực hành Điều này giúp tăng cường sự tham gia và tạo ra trải nghiệm học tậptích cực, khuyến khích sự tư duy sáng tạo và giúp học viên ghi nhớ kiến thức một cáchhiệu quả hơn

2 Mục tiêu của đề tài

-Xây dựng thành công Website học tập ứng dụng Quizz và Flashcard

- Áp dụng những kiến thức công nghệ web và các môn học vừa đã được học, cùng với tìm hiểu sâu hơn kiến thức về Framwork Laravel

-Tạo giao diện thân thiện dễ nhìn tạo cảm giác hứng thú cho người học

-Tích hợp được các ngôn ngữ lập trình như HTML,CSS,JavaScript,Lavarel

3 Nội dung và kế hoạch thực hiện

Lên ý tưởng, tìm hiểu và nghiên cứu về tổng quan và cơ sở

lí thuyết của đề tài

4 Giới thiệu về đề tài.

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:Chương 1 Tổng quan về trang web Trong chương này, sẽ trình bày các ngôn ngữ

sử dụng trong trang web

Chương 2 Phân tích thiết kế hệ thống website Nội dung chương bao gồm cácbước để thực hiện tạo nên hệ thống website

Chương 3 Xây dựng website Chương này trình bày kết quả về các giao diện,tínhnăng của website của người dùng và quản trị viên Cuối cùng là Kết luận, Tài liệutham khảo và Phụ lục liên quan đến đề tài

CHƯƠNG 1: TỔNG QUAN VỀ TRANG WEB1.1 Cơ sở lý thuyết

HTML tương thích với tất cả các hệ điều hành và trình duyệt của nó Dễ học vàviết là một lợi thế của HTML Không những vậy, việc soạn thảo HTML cũng không cóyêu cầu quá phức tạp, thông thường chỉ cần sử dụng Notepad là đủ HTML tiếp tụcđược phát triển Phiên bản hiện tại của HTML là HTML5 – phiên bản nâng cấp củaXHTML

4

HTML5 được cải tiến rất nhiều, đặc biệt hỗ trợ mạnh mẽ các phần tử đa phươngtiện không cần plugin HTML5 nói chung mạnh hơn rất nhiều không chỉ về tốc độ vàkhả năng thích ứng mà còn ở khả năng hỗ trợ API (Giao diện lập trình ứng dụng) vàDOM (Mô hình đối tượng tài liệu) hoặc cây cấu trúc dữ liệu).

1.1.2 CSS

CSS – Cascading Style Sheet được sử dụng để trình bày các tài liệu được viết bằngHTML hoặc XHTML Ngoài ra, ngôn ngữ tạo kiểu lớp cũng có thể được sử dụng choXML, SVG, XUL, v.v Đặc tả CSS được duy trì bởi tổ chức W3C

CSS có cấu trúc đơn giản và sử dụng các từ tiếng Anh để đặt tên cho thuộc tính.CSS khi sử dụng có thể được viết trực tiếp vào mã HTML hoặc được tham chiếu từmột tệp css riêng Hiện tại CSS thường được viết dưới dạng một tệp duy nhất có phần

mở rộng *.css Chúng ta có thể sử dụng 1 file CSS đó cho nhiều website, tiết kiệm rấtnhiều thời gian và công sức Một tính năng quan trọng là tính kế thừa của CSS, giảm sốdòng code mà vẫn đạt yêu cầu

Tuy nhiên, đối với CSS, các trình duyệt hiểu nó theo cách riêng của nó Vì vậy,việc trình bày cùng một nội dung trên các trình duyệt khác nhau là không đồng nhất

1.1.3 Bootstrap

Bootstrap là một framework chứa HTML, CSS và JavaScript Framework trongtiếng Việt có nghĩa là “framework” giúp tiết kiệm thời gian, công sức, hơn nữa việcxây dựng 2 teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vì Responsive.Responsive sẽ giúp trang web của bạn hiển thị tương thích với mọi kích thước mànhình nên bạn sẽ tùy chỉnh hiển thị nhiều hơn trên các loại màn hình khác nhau Chúnghoàn toàn tương thích với các trình duyệt (IE, Firefox và Chrome) và phù hợp với mọikích cỡ màn hình (máy tính để bàn, máy tính bảng, điện thoại) Với Bootstrap, ngườidùng không cần phải có kiến thức chuyên sâu về CSS hay HTML vẫn có thể thiết kếmột trang web đẹp và hiệu quả

1.1.4 JavaScript

JavaScript là ngôn ngữ lập trình được các nhà phát triển sử dụng để tạo các trangweb tương tác Từ việc làm mới nguồn cấp dữ liệu truyền thông xã hội đến hiển thịhoạt ảnh và bản đồ tương tác, khả năng của JavaScript có thể cải thiện trải nghiệmngười dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là mộttrong những công nghệ cốt lõi của World Wide Web Ví dụ: khi duyệt Internet, bất cứkhi nào bạn nhìn thấy băng chuyền hình ảnh, menu thả xuống nhấp để hiển thị hoặcmàu sắc phần tử thay đổi linh hoạt trên trang web, đó là lúc bạn thấy tác dụng củaJavaScript

Hiểu được mục đích của ngôn ngữ lập trình JavaScript sẽ giúp bạn dễ dàng sử dụng

nó trong công việc Với nhiều tính năng đa dạng, JavaScript cho phép người dùng thựchiện các hoạt động như:

• JavaScript giúp người dùng lưu trữ các giá trị bên trong các biến, thao tác vớivăn bản và chạy mã để phản hồi các sự kiện

• Xây dựng trò chơi: So với các ngôn ngữ lập trình khác, JavaScript khá linhhoạt giúp bạn xây dựng các trò chơi từ đơn giản đến phức tạp trên Internet

• Các ngôn ngữ dành riêng cho hệ điều hành Jara, Swift được sử dụng để pháttriển các ứng dụng di động Vì vậy không có lý do gì để bạn bỏ qua việc sửdụng JavaScript

• Tạo các phần tử web tương tác là một trong những hoạt động bạn nên sử dụngJavaScript

1.1.5 Lavarel

Laravel là một ngôn ngữ lập trình web mã nguồn mở được viết bằng PHP Nó đượcphát triển để giúp nhà phát triển xây dựng các ứng dụng web mạnh mẽ, linh hoạt và dễbảo trì

6

Laravel sử dụng mô hình kiến trúc MVC (Model-View-Controller) để tách biệtlogic ứng dụng và giao diện người dùng Điều này giúp nhà phát triển xây dựng ứngdụng dễ dàng quản lý và mở rộng.

Một trong những đặc điểm nổi bật của Laravel là cú pháp dễ đọc và dễ hiểu Nó hỗtrợ các tính năng hiện đại của PHP và cung cấp các công cụ tiện ích để làm việc hiệuquả Laravel cung cấp một hệ thống định tuyến mạnh mẽ, cho phép xác định các tuyến

và quản lý URL của ứng dụng dễ dàng Nó cũng cung cấp một ORM Relational Mapping) gọi là Eloquent ORM, giúp tương tác với cơ sở dữ liệu dễ dàng vàlinh hoạt

Bảo mật là một yếu tố quan trọng trong Laravel Nó cung cấp các công cụ bảo mậttích hợp sẵn như xác thực, phân quyền và bảo vệ chống tấn công CSRF Điều này giúpbảo vệ ứng dụng khỏi các lỗ hổng bảo mật tiềm ẩn

Ngoài ra, Laravel cung cấp nhiều tính năng tiện ích như hệ thống gửi email, xử lýhình ảnh, đánh hàng đợi và cache, giúp tăng cường khả năng phát triển và tối ưu hiệusuất ứng dụng

1.2 Hạn chế và ưu điểm của trang web:

1.2.1 Ưu và nhược điểm của HTML

Ưu điểm:

• Ngôn ngữ này được sử dụng rộng rãi với nhiều nguồn hỗ trợ và cộng đồng lớnđằng sau nó

• Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

• Quá trình học HTML khá đơn giản

• Mã nguồn mở và hoàn toàn miễn phí

• Các đánh dấu được sử dụng trong HTML thường ngắn gọn và thống nhất.

• Tiêu chuẩn web chính được điều hành bởi World Wide Web Consortium(W3C)

• Dễ dàng tích hợp với các ngôn ngữ backend như PHP, Node.js,

Nhược điểm:

• Ngôn ngữ này chủ yếu được áp dụng cho các trang web tĩnh Đối với các tínhnăng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ phụ trợ của bên thứ 3như PHP

• Người dùng phải tạo các trang web riêng lẻ cho HTML, ngay cả khi các thànhphần giống nhau

• Một số trình duyệt chậm chấp nhận các tính năng mới Đôi khi các trình duyệt

cũ hơn không phải lúc nào cũng hiển thị các thẻ mới hơn

1.2.2 Ưu và nhược điểm của CSS

• Khi phần “giao diện” của trang web trở nên bắt mắt hơn, người dùng có xuhướng ở lại trang này lâu hơn Từ đó cải thiện các chỉ số SEO và giúp website

có thứ hạng cao hơn

8

• CSS cung cấp các tính năng và hiệu ứng động, giúp trang web trở nên hấp dẫnhơn đối với người dùng và nâng cao trải nghiệm của họ.

• Khi trang web quá lớn, việc quản lý và duy trì mã CSS có thể trở nên phức tạp

• CSS không có khả năng thay đổi hoặc tương tác trực tiếp với nội dung trang web

• Mặc dù CSS cho phép bạn kiểm soát giao diện trang web nhưng nó không thể thựchiện một số thiết kế phức tạp hoặc tạo ra những thay đổi sâu sắc đối với cấu trúc củatrang web

1.2.3 Ưu và nhược điểm của Bootstrap

Ưu điểm:

• Bootstrap là nền tảng cung cấp cho người dùng thư viện lưu trữ dữ liệu và tùychỉnh theo mục đích cá nhân, giúp bạn sở hữu giao diện website hoàn chỉnh vànhanh chóng

• Nền tảng Bootstrap sử dụng hệ thống lưới nên sẽ hỗ trợ tính năng responsive(phản hồi nhanh) và ưu tiên viết trên giao diện di động trước tiên Điều này cảithiện đáng kể hiệu suất của người dùng khi truy cập trên điện thoại di động

• Bootstrap có giao diện màu xám bạc rất sang trọng và hỗ trợ đầy đủ các thànhphần mà một website hiện đại cần có Cấu trúc HTML giúp bạn nhanh chóngnắm bắt được tình hình và phát triển trang.

• Bootstrap có một tính năng tùy chỉnh tiện lợi giúp bạn thay đổi gần như tất cảcác thuộc tính để phù hợp nhất với chương trình bạn đang làm việc

• Bootstrap rất thân thiện với Google nên đây cũng là lý do mà nhiều lập trìnhviên lựa chọn nền tảng này để thiết kế website cho khách hàng, giúp các SEOer

dễ dàng đưa website đến với người dùng

Nhược điểm:

• Nền tảng của Bootstrap được đánh giá là tương đối nặng nên đối với những dự

án yêu cầu sản phẩm nhẹ thì đây sẽ là một nhược điểm trong quá trình thiết kế

• Bootstrap vẫn chưa có nhiều thư viện cần thiết nên không thể tạo ra một khungthiết kế hoàn hảo mà vẫn phải dựa vào phiên bản di động của chính nó

• Một nhược điểm khá lớn khi sử dụng nền tảng này là trang web của bạn phảithêm rất nhiều mã không cần thiết trong khi bạn chưa sử dụng tới 10% những gìnền tảng cung cấp

• Vì lợi thế là có sẵn theme nên gọi các classes từ stylesheet là bạn đã có mộtwebsite cơ bản đáp ứng đầy đủ nên đôi khi sẽ khiến bạn lười sáng tạo, lâu dần

• Nó có thể được gắn trên một số thành phần trang web hoặc sự kiện trang webchẳng hạn như thông qua nhấp chuột hoặc di chuột.

• JS hoạt động trên nhiều trình duyệt, nền tảng, v.v

• Bạn có thể sử dụng JavaScript để kiểm tra đầu vào và giảm thiểu việc kiểm trathủ công khi truy cập thông qua cơ sở dữ liệu

• Nó giúp website tương tác tốt hơn với người truy cập

• Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

Nhược điểm:

• Có thể được sử dụng để thực thi mã độc trên máy tính của người dùng

• Đôi khi không được hỗ trợ trên tất cả các trình duyệt

• Có thể được triển khai khác nhau giữa các thiết bị dẫn đến sự không nhấtquán

1.2.5 Ưu và nhược điểm của Laravel:

Ưu điểm:

• Sử dụng Laravel 5 giúp các lập trình viên tiếp cận những tính năng mớinhất mà PHP cung cấp, nhất là đối với Namespaces, Interfaces, Overloading,Anonymous functions và Shorter array syntax

• Nguồn tài nguyên của Laravel rất thân thiện với các lập trình viên với đadạng tài liệu khác nhau để tham khảo Các phiên bản được phát hành đều cónguồn tài liệu phù hợp với ứng dụng của mình

• Lavarel là framework được trang bị API sạch trên thư viện SwiftMailer, do

đó, bạn có thể gửi thư qua các dịch vụ dựa trên nền tảng đám mây hoặclocal

• Laravel cung cấp các tính năng bảo mật mạnh mẽ như hệ thống xác thực,

mã hóa dữ liệu, bảo vệ CSRF (Cross-Site Request Forgery), và hạn chế truycập

• Trong một số trường hợp, cấu hình và tùy chỉnh của Laravel có thể phứctạp, đặc biệt khi xử lý các yêu cầu đặc biệt hoặc tùy chỉnh mạnh mẽ hơn

1.3 Phương thức

1.3.1 Phương thức thực hiện dự án

- Xây dựng website dựa trên kiến thức đã học về HTML, CSS, JavaScript,

- Phần mềm thiết kế website: Visual Studio Code

- Tham khảo và tiếp nhận các ý tưởng, dữ liệu từ giảng viên

- Nghiên cứu các website tương tự để rút ra những chỗ còn thiếu nhằm bổ sung,khắc phục những điểm yếu của các website khác

1.3.2 Đặc trưng

- Hướng dẫn rõ ràng: Menu điều hướng

- Nội dung trực quan

- Đánh giá của người dùng

1.3.3 Chức năng

-Giới thiệu

12

- Tạo bài kiểm tra, tạo và quản lý flashcard, luyện tập và ôn tập, lưu trữ kết quả,

chia sẻ và tương tác, và theo dõi tiến độ học tập

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Mô tả bài toán

Hiện nay CNTT ngày càng phát triển, việc ứng dụng nó vào lĩnh vực giáodục là không thể bỏ qua Từ đó nhóm chúng em đã phát triển website hỗ trợhọc tập quizz và flash card Đây là trang web giúp người dùng có thể tạo racác bài kiểm tra, trắc nghiệm hoặc bài học flash card trên web Họ có thể tùychỉnh câu hỏi, đáp cho mỗi bài test và flashcard Người dùng nhập link đểtham gia vào bài tập trắc nghiệm đã được tạo trước đó Sau khi hoàn thànhmột bài kiểm tra hoặc tham gia một bài test, người dùng có thể xem báo cáo

về kết quả của mình

2.1.1 Yêu cầu bài toán

-Yêu cầu chức năng:

+Đăng nhập, đăng kí+Chức năng tạo bài test+Chức năng tạo bài học bằng flash card+Chức năng thêm một người dùng của một admin

+Chức năng chỉnh sửa thông tin một người dùng của mộtadmin,

+Chức năng xoá một người dùng của admin+Chức năng chỉnh sửa hồ sơ của người dùng+Chức năng tham gia một bài test của người dùng+Chức năng tham gia bài học bằng flash card của một ngườidùng

+Chức năng sửa đổi mật khẩu của người dùng+Chức năng xoá tài khoản của người dùng

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

+Thân thiện với người dùng

+độ truy cập nhanh

+Sử dụng được trên điện thoại và laptop

+Bảo mật thông tin

2.2 Biểu đồ usecase:

2.2.1 Phân tích các tác nhân :

-Admin : Là người quản trị hệ thống Sử dụng website để quản lý nhữngngười dùng của trang web Có thể quản lý danh sách người dùng, thêm ,sửa , xoá người dùng bất kì trên hệ thống

-User( học sinh và giáo viên): là người có thể tạo tài khoản và sau đóđăng nhập vào trang web để thực hiện các chức năng như tạo bài test,làm bài test, tạo bài học flashcard , sử dụng bài học flashcard

2.2.2 Biểu đồ usecase tổng quát:

14

 Đổi mật khẩu tài khoản

 Xoá tài khoản

 Xem danh sách các bài test

 Xem danh sách người dùng

 Chỉnh sửa thông tin của một người dùng

 Xoá một người dùng

 Xem danh sách khoá học

 Sửa thông tin khoá học

 Đăng nhập

 Xoá khoá học

 Đăng xuất

2.3.1 Đăng kí

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Người dùng có thể tạo tài khoản dành cho người dùng trên hệ thốngTác nhân User

Giả định email, mật khẩu và các chi tiết bắt buộc khác.Người dùng cung cấp thông tin đăng kí hợp lệ, bao gồm tên, địa chỉ

Kịch bản

1 Người dùng nhập thông tin đăng kí vào ô họ tên , email , vai trò,chuyên môn, mật khẩu và xác nhận mật khẩu

2 Click vào button đăng kí “register” để thực hiện đăng kí

3 Hệ thống tiến hành xử lý đăng kí, kiểm tra thông tin đăng kí cóhợp lệ hay không Nếu hợp lệ thì tới bước 5, không hợp lệ thì tớibước 4

16

4.Hiển thị cảnh báo “Thông tin của bạn không hợp lệ, vui lòng thửlại” Nhấp thử lại để quay lại bước 1.

5.Hệ thống tạo tài khoản cho người dùng Sau đó đến bước 6.

6.Người dùng sử dụng tên tài khoản và mật khẩu vừa tạo để thựchiện đăng nhập vào hệ thống

Tuỳ chỉnh tài khoản mới, ví dụ: thêm ảnh hồ sơ hoặc thông tin cá nhân bổ sung Cung cấp các tùy chọn để tùy chỉnh hồ sơ người dùng sau khi đăng kíYêu cầu phi

chức năng Hiệu suất, Bảo mật

Note

2.3.2 Đặc tả usecase đăng nhập

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép Admin và user có thể đăng nhập vào tài khoản của mình đểthực hiện các tác vụ phụ thuộc vào tài khoản,Tác nhân Admin ,user

Giả định Người dùng cung cấp thông tin đăng nhạp hợp lệ, bao gồm tên, địachỉ email, mật khẩu và các chi tiết bắt buộc khác.Kịch bản 1 Người dùng nhập tên tài khoản và mật khẩu đã được đăng kí trước

đó

2 Click vào button đăng nhập để thực hiện xử lý đăng nhập

3 Hệ thống tiến hành xử lý đăng nhập kiểm tra tên tài khoản và mậtkhẩu có đúng không Nếu thông tin đăng nhập đúng thì tới bước 4

Sai thì tới bước 6

4. Tùy theo đối tượng người dùng, hệ thống sẽ đến các form với chức năng phù hợp.

5.Hệ thống thông báo đăng nhập thành công.

6 Hiển thị cảnh báo “Thông tin của bạn không hợp lệ, vui lòng thửlại” Nhấp thử lại để quay lại bước 1

Tuỳ chỉnh Cung cấp các tùy chọn để tùy chỉnh hồ sơ người dùng sau khi đăngnhập tài khoản, ví dụ: tuỳ chỉnh thông tin cá nhân bổ sung Yêu cầu

phi chức

năng Hiệu suất, Bảo mật

Note

2.3.3 Đổi mật khẩu tài khoản

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép Admin và user có thể đổi mật khẩu đăng nhập của mìnhTác nhân Admin ,user

Giả định khẩu mới hợp lệNgười dùng cung cấp đúng thông tin mật khẩu hiện tại và nhập mậtKịch bản 1 Sau khi vào trang đổi mật khẩu người dùng nhập vào ô mật khẩu

hiện tại, mật khẩu mới và xác nhận mật khẩu mới

2 Click vào button đổi mật khẩu “reset password” để hệ thống tiếnhành xử lý

3 Hệ thống tiến kiểm tra thông tin vừa điền ( mật khẩu hiện tại mật

18

khẩu mới và xác nhận mật khẩu mới) có hợp lệ không nếu hợp lệ thìtới bước 5, không hợp lệ thì tới bước 4

4. Nếu không hợp lệ thì đưa ra cảnh báo “ Thông tin của bạn không hợp lệ” rồi bấm quay lại để về bước 1.

5.Hệ thống thông báo đổi mật khẩu thành công.

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả mìnhCho phép người dùng thoát khỏi phiên đăng nhập của

Giả định Người dùng muốn thoát khỏi phiên đăng nhập

Kịch bản

1 Click vào button “Logout” để thoát

2 Hệ thống xử lý thoát phiên đăng nhập

3 Đăng nhập thành công trở về giao diện trang giới thiệu

Tuỳ chỉnh

Yêu cầu phi chức

Note

2.3.5 Xoá tài khoản

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho user xoá tài khoản của mình

Tác nhân Admin ,user

Giả định Người dùng cung cấp đúng mật khẩu và xác nhận xoá tài khoản

Kịch bản

1 Click vào button “delete account”

2 Hệ thống đưa ra form để điền mật khẩu xác nhận xoá tài khoản

3 Hệ thống tiến hành kiểm tra thông tin vừa điền nếu nhập đúngmật khẩu thì tới bước 5 sai mật khẩu thì tới bước 4

4. Hệ thống thông báo “ Mật khẩu không hợp lệ vui lòng thử lại” và quay về bước 2.

5.Hệ thống thông báo xoá tài khoản thành công và trở về giao diện trang chủ chưa đăng nhập.

Tuỳ chỉnh

Yêu cầu phi

chức năng Hiệu suất

20

2.3.6 Tạo bài test

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép người dùng tạo một bài test để ôn tập kiến thức

Tác nhân User

Giả định Người dùng muốn tạo một bài test

Kịch bản

1 Sau khi vào trang tạo bài test

2 Điền vào form ô tiêu đề , ô mô tả bài test, tên trường tên khoá học Bấm thêm thẻ để tạo định nghĩa mô tả hình ảnh cho câu hỏi cần ôntập

Sau đó đến bước 3

3 Click button “Tạo” Hệ thống tiến kiểm tra thông tin vừa điền cóhợp lệ không nếu hợp lệ thì tới bước 5, không hợp lệ (không đủ tiêu

đề mô tả khoá học )thì tới bước 4

4. Nếu không hợp lệ thì đưa ra cảnh báo “ Thông tin của bạn không hợp lệ” rồi bấm quay lại để về bước 1.

5.Hệ thống thông báo tạo bài test thành công.

Tuỳ chỉnh

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép người dùng tạo một bài flashcard để ôn tập kiến thứcTác nhân User

Giả định Người dùng muốn tạo một bài flashcard

Kịch bản

1 Sau khi vào trang tạo bài flashcard

2 Điền vào form ô tiêu đề , ô mô tả bài flashcard, tên trường tênkhoá học

Bấm thêm thẻ để tạo định nghĩa mô tả hình ảnh cho câu hỏi cần ôntập

Sau đó đến bước 3

3 Click button “Tạo” Hệ thống tiến kiểm tra thông tin vừa điền cóhợp lệ không nếu hợp lệ thì tới bước 5, không hợp lệ (không đủ tiêu

đề mô tả khoá học )thì tới bước 4

4. Nếu không hợp lệ thì đưa ra cảnh báo “ Thông tin của bạn không hợp lệ” rồi bấm quay lại để về bước 1.

5.Hệ thống thông báo tạo bài flashcard thành công.

Tuỳ chỉnh

Yêu cầu

22

phi chức

năng Hiệu suất

Note

2.3.8 Xem danh sách khoá học

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép người dùng xem danh sách các khoá học flashcard hoặctestTác nhân User, Admin

Giả định Người dùng có tài khoản và đã đăng nhập vào hệ thống

Kịch bản

1 Tại trang chủ (sau khi đăng nhập) người dùng click vào chứcnăng “xem khoá học của tôi” đối với admin là “tất cả cáckhoá”

2 Hệ thống sẽ hiển thị các khoá học và hiển thị thông tin về cáckhoá học đó ( tên, mô tả, )

3 Người dùng có thể click vào để làm bài bất kì

4 Ca kết thúc

Tuỳ chỉnh

Yêu cầu phi

chức năng Hiệu suất

Note

2.3.9 Xem danh sách người dùng

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép admin có thể xem danh sách tất cả người dùngTác nhân Admin

Giả định Người dùng đã đăng nhập vào hệ thống với vai trò admin

Yêu cầu phi

chức năng Hiệu suất, Bảo mật.

Note

2.3.10 Chỉnh sửa thông tin của một người dùng

ID UC10 Tên ca sửdụng Chỉnh sửa thông tin của ngườidùng.Ngày tạo 4/12/2023 Ngày cập

24

2 Trực tiếp chỉnh sửa thông tin của người dùng

3 Click lưu thông tin và kết thúc ca

Tuỳ chỉnh

Yêu cầu phi chức

năng Hiệu suất, Bảo mật

Note

2.3.11 Xoá một người dùng ra khỏi danh sách

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép admin xoá tài khoản của một người dùng

Tác nhân Admin

Giả định Người dùng đã đăng nhập vào hệ thống với vai trò admin.

Kịch bản

1 Tại danh sách người dùng người dùng có thể click vào bất

kì người dùng

2 Trực tiếp click xoá người dùng

3 Hệ thống hiện form xác nhận Click xác nhận nếu muốn xoánếu không muốn xoá thì click huỷ

4 Kết thúc ca

Tuỳ chỉnh

Yêu cầu phi

chức năng Hiệu suất, Bảo mật

Ngày tạo 4/12/2023 Ngày cập nhật

Mô tả Cho phép admin chỉnh sửa thông tin của khoá học bất kì

Giả định Người dùng đã đăng nhập vào hệ thống với vai trò admin

26