Báo cáo đồ án môn lập trình mạng máy tính quiz application

Tính năng chính của đồ án Quiz App bao gồm:- Đăng nhập và đăng ký: Người dùng có thể đăng nhập hoặc đăng ký tài khoản để sử dụng hệ thống.- Quản lý tài khoản: Người dùng có thể thay đổi

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM

BÁO CÁO ĐỒ ÁN

MÔN LẬP TRÌNH MẠNG MÁY TÍNH

QUIZ APPLICATION

Giảng viên hướng dẫn: TS Nguyễn Quang Trung Sinh viên thực hiện:

2.3.3 Giao diện người dùng 11

2.3.4 Tối ưu hóa tải trang 11

2.3.5 Đảm bảo tương thích trình duyệt 12

2.3.6 Khả năng mở rộng 12

2.3.7 Tối ưu hóa hiệu suất 12

2.4 Chức năng của Server – Client 12

3.1.3 Ngôn ngữ lập trình: HTML, C#, JS 19

3.1.4 Thư viện 20

3.2 Thiết kế giao diện người dùng 23

3.2.1 Trang chủ 23

3.2.2 Trang giới thiệu ứng dụng 24

3.2.3 Trang Đăng nhập (Login) 25

3.2.4 Trang Đăng ký (Register) 26

3.2.5 Trang Tham gia Quiz (Join Quiz) 26

3.2.6 Trang Kết quả Quiz (Quiz Result) 27

3.2.7 Trang Tạo mới Quiz (Create Quiz) - Chỉ dành cho người dùng có vai trò là "host" 28

3.2.8 Trang báo cáo thống kê điểm người tham gia Quiz 29

Chương 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 31

Chương 1: TỔNG QUAN ĐỒ ÁN 1.1Mục đích

Quizz là một ứng dụng được dùng để kiểm tra kiến thức ở thông qua hình thức trả lời trắc nghiệm Các câu hỏi trắc nghiệm trong Quizizz thuộc nhiều danh mục với cấp độ khác nhau để thử sức, đánh giá trình độ của bản thân; hoặc giáo viên có thể truy cập bộ câu hỏi do người khác chia sẻ để sử dụng trong giảng dạy, kèm cặp, đồng thời cũng có thể tham gia vào Quiz để làm bài kiểm tra Nhìn chung, Quiz phù hợp với cả việc học tại nhà và trên lớp.

1.2 Mục tiêu

Xây dựng một hệ thống trắc nghiệm trực tuyến để hỗ trợ người dùng trong việc kiểm tra kiến thức và cung cấp giải trí thông qua các câu hỏi trắc nghiệm đa dạng.

Cung cấp môi trường học tập và giải trí trực tuyến thú vị, tương tác và hấp dẫn cho người dùng.

1.3 Tính năng

Một ứng dụng trắc nghiệm trực tuyến, nhằm cung cấp môi trường học tập và giải trí thông qua việc tham gia các bài trắc nghiệm với nhiều chủ đề đa dạng Ứng dụng này sẽ được xây dựng trên nền tảng ASP.NET và sử dụng cơ sở dữ liệu để lưu trữ thông tin về người dùng, bài trắc nghiệm và kết quả Tính năng chính của đồ án Quiz App bao gồm:

- Đăng nhập và đăng ký: Người dùng có thể đăng nhập hoặc đăng ký tài khoản để sử dụng hệ thống.

- Quản lý tài khoản: Người dùng có thể thay đổi thông tin cá nhân, thay đổi mật khẩu và quản lý tài khoản của mình.

- Trắc nghiệm đa dạng: Hệ thống cung cấp các câu hỏi trắc nghiệm đa dạng về nhiều chủ đề khác nhau, bao gồm khoa học, lịch sử, văn hóa, thể thao, v.v.

- Xếp hạng và điểm số: Hệ thống lưu trữ và hiển thị xếp hạng và điểm số của người dùng để so sánh với các người chơi khác.

- Giao diện thân thiện: Giao diện người dùng được thiết kế dễ sử dụng và phản hồi tốt trên các thiết bị di động.

Chương 2: CƠ SỞ LÝ THUYẾT

2.1 Kiến trúc hệ thống

Ứng dụng được xây dựng trên nền tảng NET Framework, với kiến trúc tổng thể bao gồm các thành phần chính là giao diện người dùng (Frontend), ứng dụng Web Server (Backend), cơ sở dữ liệu và các chức năng liên quan đến xác thực và quản lý người dùng.Kiến trúc hệ thống tổng thể của ứng dụng Quiz App có thể bao gồm các thành phần chính như sau:

Frontend (Client-side):

- Giao diện người dùng (UI): Phần giao diện mà người dùng tương tác để tham gia vào các bài trắc nghiệm, đăng ký tài khoản, đăng nhập, v.v.

- HTML/CSS/JavaScript: Các ngôn ngữ và công cụ phát triển giao diện trên trình duyệt web.

Backend (Server-side):

- Cơ sở dữ liệu (Database): Lưu trữ các dữ liệu như câu hỏi, câu trả lời, tài khoản người dùng, v.v.

- Web Server: Xử lý yêu cầu từ trình duyệt và trả về các trang HTML, CSS, JS cho người dùng.

- Application Server: Xử lý logic nghiệp vụ của ứng dụng, bao gồm xác thực người dùng, kiểm tra câu trả lời đúng/sai, tính điểm, v.v.

- Cơ sở dữ liệu (Database): Cơ sở dữ liệu quan hệ (SQL Database) để lưu trữ thông tin về câu hỏi, câu trả lời, tài khoản người dùng, v.v - Tầng Logic (Business Logic): Xử lý logic nghiệp vụ của ứng

dụng như xác thực người dùng, kiểm tra câu trả lời, tính điểm, v.v.

- Tầng Presentation (Presentation Layer): Giao diện người dùng (UI) để tương tác với người dùng.

- Tầng Truyền thông (Communication Layer): Giao tiếp giữa frontend và backend thông qua các API và giao thức truyền thông như HTTP.

- Tầng Bảo mật (Security Layer): Xử lý vấn đề bảo mật như xác thực người dùng, phân quyền truy cập, bảo vệ dữ liệu, v.v.

- Tầng Quản lý (Management Layer): Quản lý dữ liệu và cung cấp các giao diện quản lý để quản lý câu hỏi, câu trả lời, người dùng, v.v - Tầng Tích hợp (Integration Layer): Tích hợp các thành phần của hệ

2.2.1 Thành phần sơ đồ

Trình duyệt Web: Đại diện cho người dùng cuối (end device), sử dụng trình duyệt web để truy cập vào ứng dụng bằng cách nhập URL hoặc nhấp vào liên kết.

Web Server: Là máy chủ web chạy trên máy chủ, xử lý các yêu cầu HTTP từ trình duyệt và phản hồi bằng cách cung cấp các trang web được định dạng HTML, CSS và JavaScript.

Authentication & Authorization Layer: Đây là một lớp quan trọng để xác thực và quản lý quyền truy cập của người dùng Khi người dùng cố gắng truy cập vào một trang cụ thể hoặc thực hiện một hành động cụ thể (ví dụ: bắt đầu bài trắc nghiệm), lớp

này sẽ xác thực xem người dùng đã đăng nhập hay chưa và có quyền truy cập hay không.

User Manager: Là một thành phần quản lý người dùng trong hệ thống Nó quản lý thông tin người dùng, chẳng hạn như thông tin đăng nhập, thông tin cá nhân và vai trò của họ (ví dụ: người dùng thường, quản trị viên) User Manager cung cấp các phương thức để đăng nhập, đăng ký, tạo tài khoản mới và quản lý vai trò của người dùng.

Database (SQL Server): Là cơ sở dữ liệu SQL Server được sử dụng để lưu trữ dữ liệu của ứng dụng, bao gồm thông tin về người dùng (tài khoản, mật khẩu), câu hỏi của bài trắc nghiệm, kết quả của người dùng v.v.

2.2.2 Tương tác trong ứng dụng Bước 1: Truy cập trang web

Khi người dùng truy cập vào trang web, trình duyệt gửi yêu cầu truy cập đến máy chủ web.

Bước 2: Xác thực người dùng

Máy chủ web nhận yêu cầu và chuyển đến Authentication & Authorization Layer để xác thực người dùng Nếu người dùng chưa đăng nhập, hệ thống sẽ yêu cầu họ đăng nhập hoặc đăng ký.

Bước 3: Kiểm tra quyền truy cập

Sau khi người dùng đăng nhập thành công, hệ thống sẽ kiểm tra quyền truy cập của họ để đảm bảo họ có thể truy cập vào các chức năng cụ thể (ví dụ: bắt đầu bài trắc nghiệm).

Bước 4: Làm bài trắc nghiệm và Tạo/Bắt đầu Quiz

Với vai trò Student: Khi người dùng có vai trò Student, họ có thể tham gia làm bài trắc nghiệm Các kết quả của người dùng sẽ được lưu trữ trong Database thông qua User Manager.

Với vai trò Teacher: Khi người dùng có vai trò Teacher, họ có thể tạo và quản lý các quiz Sau khi tạo quiz, họ cũng có quyền bắt đầu quiz để cho phép các học sinh làm bài.

Bước 5: Lưu trữ thông tin vào Database

Database lưu trữ thông tin người dùng, câu hỏi của bài trắc nghiệm và kết quả của họ, cho phép ứng dụng truy xuất và cập nhật dữ liệu.

2.3 Chi tiết triển khai

Một số chi tiết triển khai cụ thể cho các yếu tố đã nêu trong ứng dụng Quiz

Sử dụng Entity Framework để tạo mô hình dữ liệu và tương tác với cơ sở dữ liệu, giúp giảm thiểu việc viết mã SQL thủ công.

2.3.2 Xác thực và ủy quyền

Sử dụng Microsoft.AspNet.Identity để quản lý thông tin người dùng như đăng nhập, đăng ký và quản lý tài khoản.

Sử dụng System.Security.Claims để xác thực và cấp quyền hạn cho người dùng thông qua các vai trò (roles) và quyền (claims).

Cân nhắc sử dụng cơ chế xác thực hai yếu tố để bảo mật cao hơn 2.3.3 Giao diện người dùng

Tối ưu hóa trải nghiệm người dùng bằng cách đảm bảo giao diện thân thiện với người dùng trên các kích thước màn hình khác nhau.

Sử dụng Bootstrap hoặc CSS để tùy chỉnh giao diện và làm cho ứng dụng trở nên đẹp mắt hơn.

2.3.4 Tối ưu hóa tải trang

Giảm thiểu thời gian tải trang bằng cách sử dụng caching để lưu trữ các dữ liệu thường xuyên truy cập.

Tối ưu hóa hình ảnh và tập tin tĩnh để giảm thiểu kích thước và tăng tốc độ tải trang.

2.3.5 Đảm bảo tương thích trình duyệt

Kiểm tra ứng dụng trên các trình duyệt phổ biến như Chrome, Firefox, Edge và Safari để đảm bảo tương thích.

2.3.6 Khả năng mở rộng

Thiết kế ứng dụng sao cho có thể dễ dàng mở rộng tính năng và quy mô hệ thống.

Sử dụng kiến trúc modul và dependency injection để giảm thiểu sự phụ thuộc và dễ dàng thêm các tính năng mới.

2.3.7 Tối ưu hóa hiệu suất

Thực hiện các biện pháp tối ưu hóa để cải thiện hiệu suất ứng dụng, bao gồm tối ưu hóa truy vấn cơ sở dữ liệu và sử dụng cache.

2.4 Chức năng của Server – Client

Trong Quizz App, máy chủ (server) chịu trách nhiệm xử lý và quản lý dữ liệu, trong khi máy khách (client) chịu trách nhiệm hiển thị giao diện người dùng và cho phép người dùng tương tác với ứng dụng Thuật toán hoặc cấu trúc dữ liệu đáng chú ý có thể bao gồm các thuật toán kiểm tra câu trả lời, tính điểm số, và sắp xếp thứ hạng người dùng trong cuộc thi Điều này có thể được thực hiện bằng cách so sánh câu trả lời của người dùng với câu trả lời đúng trong cơ sở dữ liệu và tính điểm tương ứng Dưới đâu là chi tiết vai trò của máy chủ (server) và máy khách (client):

2.4.1 Máy chủ (Server)

Trong controller: Máy chủ xử lý các yêu cầu từ máy khách (client) thông qua các controller Nó quản lý luồng công việc của ứng dụng và là nơi xử lý logic nghiệp vụ của ứng dụng Máy chủ sẽ xử lý các yêu cầu như tạo, chỉnh sửa, xóa câu hỏi và quản lý các thông tin về cuộc thi và kết quả.

Truy cập cơ sở dữ liệu: Máy chủ truy xuất cơ sở dữ liệu để lấy và cập nhật dữ liệu, chẳng hạn như câu hỏi, câu trả lời, thông tin người dùng, kết quả cuộc thi, vv.

Xử lý logic: Máy chủ thực hiện các phép tính và kiểm tra câu trả lời của người dùng, tính điểm và cung cấp kết quả cuộc thi hoặc bài kiểm tra cho người dùng.

2.4.2 Máy khách (Client)

Giao diện người dùng (UI): Máy khách hiển thị giao diện người dùng cho người dùng để tương tác Giao diện người dùng bao gồm các trang web hoặc ứng dụng di động mà người dùng sử dụng để tham gia cuộc thi hoặc bài kiểm tra, trả lời câu hỏi và xem kết quả.

Gửi yêu cầu: Máy khách gửi các yêu cầu từ giao diện người dùng đến máy chủ thông qua giao thức HTTP hoặc HTTPS Các yêu cầu này bao gồm yêu cầu tham gia cuộc thi, trả lời câu hỏi, lưu trữ thông tin người dùng, vv.

Nhận và hiển thị kết quả: Máy khách nhận và hiển thị kết quả từ máy chủ, bao gồm kết quả cuộc thi, điểm số, và thông tin khác liên quan.

Trong Quizz App, thuật toán hoặc cấu trúc dữ liệu đáng chú ý có thể bao gồm các thuật toán kiểm tra câu trả lời, tính điểm số, và sắp xếp thứ hạng người dùng trong cuộc thi Điều này có thể được thực hiện bằng cách so sánh câu trả lời của người dùng với câu trả lời đúng trong cơ sở dữ liệu và tính điểm tương ứng Để duy trì tính trung thực và bảo mật, có thể sử dụng các cấu trúc dữ liệu như hàm băm để lưu trữ mật khẩu người dùng một cách an toàn trong cơ sở dữ liệu.

Diagram SQL

Trong mục đăng nhập và đăng ký của Quiz App, được triển khai các thuật toán để xác thực người dùng và quản lý thông tin tài khoản Dưới đây là mô tả về thuật toán trong mục đăng nhập và đăng ký:

Giải thuật Mã hóa mật khẩu (Password Hashing):

Giải thuật này được sử dụng trong phần đăng ký người dùng khi tạo tài khoản mới và lưu trữ mật khẩu của người dùng dưới dạng mã hóa Mục đích của việc mã hóa mật khẩu là bảo mật thông tin mật khẩu của người dùng trong cơ sở dữ liệu hoặc bất kỳ nơi lưu trữ dữ liệu nào khác, giúp ngăn chặn việc truy cập trái phép vào mật khẩu người dùng trong trường hợp hệ thống bị tấn công hoặc lộ dữ liệu.

Giải thuật Cấp quyền truy cập (Authorization):

Giải thuật này được sử dụng trong phần đăng ký người dùng khi cấp vai trò cho người dùng Nó đóng vai trò quan trọng trong việc kiểm soát quyền truy cập của người dùng đến các chức năng và tài nguyên trong ứng dụng Nó đảm

bảo rằng người dùng chỉ có thể thực hiện các hành động mà họ được phép thực hiện dựa trên vai trò hoặc quyền của họ.

Ngoài ra, đoạn mã cũng sử dụng một số phương thức hỗ trợ khác như đăng nhập, đăng xuất, xử lý lỗi, quản lý thông tin người dùng và quản lý đăng nhập bằng tài khoản bên ngoài (nếu có).

Sơ đồ giải thuật sử dụng trong bài Quiz

Giải thuật trong ứng dụng Quiz App có một số bước quan trọng để xử lý và kiểm tra câu trả lời của người dùng trong bài trắc nghiệm Dưới đây là phân tích chi tiết của từng bước trong giải thuật:

- Bước 1: Khởi tạo câu hỏi (i=0, i là số thứ tự câu hỏi, input là đáp án người dùng nhập vào)

Bước này bắt đầu quá trình kiểm tra câu trả lời của người dùng bằng cách thiết lập biến i là 0 để đánh số thứ tự của câu hỏi, và biến input để lưu trữ đáp án mà người dùng nhập vào.

- Bước 2: Kiểm tra tổng số câu hỏi (n) nếu sai sẽ kết thúc vòng lặp, đúng sẽ tới bước kiểm tra đáp án

Bước này kiểm tra nếu vẫn còn câu hỏi để kiểm tra (n là số lượng câu hỏi), tiếp tục vòng lặp để kiểm tra các câu hỏi tiếp theo Nếu không còn câu hỏi nào để kiểm tra, thì kết thúc vòng lặp.

- Bước 3: Kiểm tra đáp án, đúng thì điểm số cộng m (m là số điểm cộng dựa trên tổng số câu hỏi), sai thì m = 0:

Bước này kiểm tra câu trả lời của người dùng với câu trả lời đúng của câu hỏi hiện tại Nếu đáp án đúng, thì tăng điểm số cộng thêm m (số điểm cộng dựa trên tổng số câu hỏi) Nếu đáp án sai, thì điểm số không tăng (m=0).

- Bước 4: i++, sau khi qua bước kiểm tra đáp án, tiếp tục câu hỏi tiếp theo với i++:

Bước này tăng biến i lên để di chuyển đến câu hỏi tiếp theo trong danh sách câu hỏi, chuẩn bị cho vòng lặp tiếp theo.

- Bước 5: Nếu i < n sẽ tiếp tục vòng lặp, ngược lại kết thúc:

Bước này kiểm tra nếu biến i nhỏ hơn tổng số câu hỏi (n), thì tiếp tục vòng lặp để kiểm tra các câu hỏi tiếp theo Nếu không, kết thúc vòng lặp và quá trình kiểm tra câu trả lời của người dùng kết thúc.

Chương 3: KẾT QUẢ THỰC NGHIỆM

3.1 Công nghệ sử dụng

3.1.1 Liệt kê các ngôn ngữ lập trình

Sử dụng HTML, CSS, JavaScript và các thư viện, framework như Bootstrap, jQuery để tạo giao diện đáp ứng và tương tác.

Sử dụng ASP.NET hoặc ASP.NET Core để xây dựng phần back-end của ứng dụng Xây dựng các Controller để xử lý các yêu cầu từ phía client.

3.1.2 Các framework sử dụng trong đồ án 3.1.2.1 Bootstrap

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có như typography, forms, buttons, tables, grids, navigation, image carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé!

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website 3.1.2.2 JQuery

jQuery là một khung JavaScript Nó tạo điều kiện thuận lợi cho khả năng đọc và thao tác của các phần tử HTML DOM, xử lý sự kiện, hoạt ảnh và lệnh gọi AJAX Đây cũng là phần mềm mã nguồn mở miễn phí tuân theo Giấy phép

MIT Cú pháp của jQuery giúp điều hướng tài liệu, tạo hoạt ảnh, xử lý sự kiện và phát triển ứng dụng Ajax dễ dàng hơn Developer có thể sử dụng điều này để xây dựng các phần trừu tượng cho hoạt ảnh và tương tác ở mức độ thấp, các hiệu ứng phức tạp và các tiện ích có thể thay đổi chủ đề ở mức cao Bản chất mô-đun của framework jQuery cho phép các developer tạo các ứng dụng và trang web phức tạp.

3.1.2.3 .NET:

.NET Framework là một nền tảng lập trình và cũng là một nền tảng thực thi ứng dụng chủ yếu trên hệ điều hành Microsoft Windows được phát triển bởi Microsoft từ năm 2002, kết thúc phát triển vào năm 2022 ở phiên bản 4.8.1.

.NET Framework bao gồm tập các thư viện lập trình lớn, và những thư viện này hỗ trợ việc xây dựng các chương trình phần mềm như lập trình giao diện; truy cập, kết nối cơ sở dữ liệu; ứng dụng web; các giải thuật, cấu trúc dữ liệu; giao tiếp mạng CLR cùng với bộ thư viện này là 2 thành phần chính của NET Framework.

Thư viện sử dụng trong ứng dụng và các namespace, class cụ thể của chúng:

3.1.3 Ngôn ngữ lập trình: HTML, C#, JS

System.ComponentModel.DataAnnotations thuộc NET Framework "System.ComponentModel.DataAnnotations" là một namespace trong NET Framework, và nó chứa các lớp và thuộc tính để hỗ trợ việc thực hiện kiểm tra dữ liệu và đánh dấu dữ liệu trong các lớp mô hình (model) trong ứng dụng, cung cấp các thuộc tính như "Required", "StringLength", "Range", "RegularExpression" và nhiều thuộc tính khác, cho phép bạn xác định các quy tắc kiểm tra và giới hạn dữ liệu cho các thuộc tính của lớp mô hình Khi dữ liệu được gửi từ giao diện người dùng đến ứng dụng, các kiểm tra này sẽ được thực hiện để đảm bảo rằng dữ liệu hợp lệ trước khi được xử lý.