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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.69 MB, 36 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP. HCM</b>

<b>BÁO CÁO ĐỒ ÁN</b>

<b>MÔN LẬP TRÌNH MẠNG MÁY TÍNH</b>

<b>QUIZ APPLICATION</b>

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

<b>2.4 Chức năng của Server – Client...12</b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

3.1.4 Thư viện...20

<b>3.2 Thiết kế giao diện người dùng...23</b>

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

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>Chương 1: TỔNG QUAN ĐỒ ÁN</b>

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.

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.

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.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

- 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.

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>Chương 2: CƠ SỞ LÝ THUYẾT</b>

<b>2.1 Kiến trúc hệ thống</b>

Ứ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.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

- 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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

- 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ệ

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

<b>2.3 Chi tiết triển khai</b>

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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.

<b>2.4 Chức năng của Server – Client</b>

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 tố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ả.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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 tố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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>Diagram SQL</b>

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 tố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 số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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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ọ.

Ngồ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 ngồi (nếu có).

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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à q trình kiểm tra câu trả lời của người dùng kết thúc.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

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

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 hồ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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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ý.

</div>