Quản lí website câu hỏi/Minigame | Đồ Án Thực Tập Lập Trình A

lOMoAR cPSD| 47206417
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC HOA SEN
KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO
ĐỒ ÁN THỰC TẬP LẬP TRÌNH A
Tên đề tài: Quản lí website câu hỏi/Minigame
Giảng viên hướng dẫn : Phan Hồng Trung
Thời gian thực hiện
: Từ 24/03/2025 đến 05/07/2025
Nhóm sinh viên thực hiện : Lê Thụy Thùy Dương MSSV: 22108002
: Hứa Huỳnh Kim Phú MSSV: 22205004
: Lê Đăng Nguyễn Minh Hải MSSV: 22200212 : Lý Vĩnh Tuấn MSSV: 22207438 Số nhóm : Nhóm 7 THÁNG 07 / NĂM 2025 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM TRÍCH YẾU
Đồ án thực tập "Quản lí website câu hỏi/minigame" tập trung nghiên cứu và phát
triển hệ thống trực tuyến nhằm hỗ trợ việc cung cấp các câu hỏi, trò chơi nhỏ (minigame)
phục vụ cho mục đích giải trí và học tập. Với sự ứng dụng các công nghệ hiện đại, đề tài
hướng đến việc xây dựng một nền tảng tương tác thân thiện, dễ sử dụng, và có khả năng mởrộng.
Các nội dung chính bao gồm việc phân tích yêu cầu người dùng, thiết kế giao diện,
phát triển chức năng, và kiểm thử hệ thống nhằm đảm bảo chất lượng sản phẩm. Đề tài
không chỉ mang tính thực tiễn cao mà còn giúp các thành viên trong nhóm nâng cao kỹ
năng lập trình, làm việc nhóm và quản lý dự án. Đồ án này được thực hiện trong 15 tuần
với sự hướng dẫn của trường Đại học Hoa Sen, nơi mình đã học và phát triển các kỹ năng
cần thiết liên quan đến công nghệ thông tin.
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM LỜI CẢM ƠN
Chúng mình xin gửi lời cảm ơn sâu sắc đến thầy Phan Hồng Trung, giảng viên hướng
dẫn, người đã dành nhiều thời gian và tâm huyết để đồng hành cùng nhóm trong suốt quá
trình thực hiện đồ án thực tập này. Thầy không chỉ truyền đạt kiến thức và chia sẻ kinh
nghiệm quý báu mà còn luôn tận tình sửa bài, định hướng rõ ràng, giúp chúng mình khắc
phục từng lỗi nhỏ và hoàn thiện từng chi tiết trong dự án. Chính sự tận tâm của thầy đã
giúp chúng mình vượt qua những khó khăn và hoàn thành dự án một cách tốt nhất.
Bên cạnh đó, chúng mình cũng xin dành lời tri ân đến trường Đại học Hoa Sen, nơi
đã tạo điều kiện cho chúng mình học tập, nghiên cứu và phát triển các kỹ năng cần thiết
liên quan đến công nghệ thông tin. Những kiến thức và nền tảng mà nhà trường cung cấp
đã trở thành hành trang quý giá trong hành trình của chúng mình.
Chúng mình thực sự biết ơn sự hỗ trợ và khích lệ từ thầy cũng như nhà trường, điều
đó đã trở thành nguồn động lực to lớn giúp chúng mình tiến bước và đạt được những kết
quả đáng khích lệ trong đồ án này.
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
NHẬN XÉT CỦA GIẢNG VIÊN
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
............................................................................................................................................................
Ngày.........Tháng.......Năm........ MỤC LỤ
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM C
TRÍCH YẾU......................................................................................................................................I LỜI
CẢM ƠN.................................................................................................................................II NHẬN
XÉT CỦA GIẢNG VIÊN...................................................................................................III
MỤC LỤC..........................................................................................................................................IV
DANH MỤC HÌNH ẢNH..............................................................................................................VI
DANH MỤC BẢNG.....................................................................................................................VIII
1. GIỚI THIỆU CÔNG NGHỆ................................................................................................................1
1.1. Visual Studio Code..................................................................................................................1
1.2. Github.....................................................................................................................................1
1.3. Postman.................................................................................................................................2
1.4. Figma......................................................................................................................................2
1.5. Webstorm..............................................................................................................................3
1.6. Angular...................................................................................................................................3
1.7. Express.js................................................................................................................................4
1.8. MySQL....................................................................................................................................4
1.9. Sequelize................................................................................................................................4
1.10. Cloudinary............................................................................................................................5
1.11. Node.Js.................................................................................................................................5
2. ĐẶC TẢ YÊU CẦU VỀ ỨNG DỤNG...................................................................................................6 2.1. Giới thiệu về đề
tài.................................................................................................................6 2.2. Mục
đích.................................................................................................................................6 2.3. Phạm
vi...................................................................................................................................6 2.4. Yêu cầu chức
năng..................................................................................................................6 2.5. Yêu cầu phi chức
năng............................................................................................................6
3. PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG.............................................................................................7 3.1. USECASE
DIAGRAM................................................................................................................7
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 3.2. ENTITY RELATIONSHIP (ER)
DIAGRAM....................................................................................8 3.3. Thiết kế giao
diện...................................................................................................................9 3.3.1. Giao diện của
User...........................................................................................................9
3.3.1.1. LOGIN/LOGOUT............................................................................... ..............9 3.3.1.2. VIEW/EDIT
USER.........................................................................................10 3.3.1.3. TRANG CHỦ
USER........................................................................................11 3.3.1.4. TRẢ LỜI CÂU HỎI/ CHECK ĐÚNG
SAI..........................................................12 3.3.1.5. LEADERBOARD/ BẢNG XẾP
HẠNG..............................................................14 3.3.1.6. XEM DANH SÁCH NGƯỜI
CHƠI...................................................................15 3.3.1.7. THÊM VÀ SỬA CÂU
HỎI..............................................................................16 3.3.2. Giao diện của
admin......................................................................................................17 3.3.2.1. Quản lí
user................................................................................................. 17 3.3.2.2. Quản lí
quiz................................................................................................. 18
4. KIỂM THỬ....................................................................................................................................19 4.1. Kiểm tra thêm câu
hỏi..........................................................................................................19 4.2. Kiểm tra khi trả lời câu
hỏi...................................................................................................20 4.3. Xếp
hạng...............................................................................................................................21
5. HƯỚNG DẪN SỬ DỤNG...............................................................................................................22
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
6. KẾT LUẬN.....................................................................................................................................27 6.1. Kinh nghiệm học được trong quá trình thực hiện đồ
án......................................................27 6.2. Ưu điểm và nhược điểm của ứng
dụng................................................................................27 6.3. Định hướng phát triển trong tương
lai.................................................................................27 TÀI LIỆU THAM
KHẢO......................................................................................................................28 DANH MỤC HÌNH ẢNH
Hình 1. Visual Studio Code.....................................................................................................1
Hình 2. Github........................................................................................................................1
Hình 3. Postman.....................................................................................................................2
Hình 4. Figma.........................................................................................................................3
Hình 5. Webstorm..................................................................................................................3
Hình 6. Angular.......................................................................................................................3
Hình 7. Express.js...................................................................................................................4 Hình 8.
MySQL........................................................................................................................4 Hình
9. Sequelize....................................................................................................................4
Hình 10. Cloudinary................................................................................................................5 Hình 11.
Node.js.....................................................................................................................5
Hình 12. USECASE DIAGRAM..................................................................................................7
Hình 13. ER Diagram..............................................................................................................8 Hình 14.
Login/Logout............................................................................................................9
Hình 15. Chỉnh sửa thông tin của User.................................................................................10
Hình 16. Trang chủ khi User truy cập...................................................................................11
Hình 17. Hiển thị tổng số đúng, sai......................................................................................12
Hình 18. Hiển thị đáp án câu hỏi đúng, sai..........................................................................13
Hình 19. Bảng xếp hạng.......................................................................................................14
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Hình 20. Danh sách người đang tham gia trò chơi..............................................................15
Hình 21. Giao diện khi thêm và sửa thành công..................................................................16
Hình 22. Quản lí User...........................................................................................................17
Hình 23. Hiển thị ngày user sử dụng và tìm kiếm theo tên.................................................17
Hình 24. Quản lí quiz............................................................................................................18
Hình 25. Giao diện đăng ký..................................................................................................22
Hình 26. Giao diện đăng nhập.............................................................................................23
Hình 27. Giao diện trang chủ khi đăng nhập thành công....................................................23
Hình 28. Quiz........................................................................................................................24
Hình 29. Hiển thị các level khi truy cập vào Quiz.................................................................24
Hình 30. Giao diện hiển thị câu hỏi......................................................................................25 Hình 31.
Review....................................................................................................................25
Hình 32. Giao diện khi truy cập Review................................................................................25
Hình 33. Giao diện chỉnh sửa câu hỏi...................................................................................26
Hình 34. Giao diện tạo câu hỏi.............................................................................................26
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM DANH MỤC BẢNG
Bảng 1. Kiểm tra thêm câu hỏi (admin)...............................................................................17
Bảng 2. Kiểm tra khi trả lời câu hỏi......................................................................................18
Bảng 3. Xếp hạng..................................................................................................................19
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
1. GIỚI THIỆU CÔNG NGHỆ
1.1. Visual Studio Code
Visual Studio Code là một công cụ chỉnh sửa mã nguồn mở, nhẹ và mạnh mẽ, được
phát triển bởi Microsoft. Phần mềm này hỗ trợ nhiều ngôn ngữ lập trình, giúp các nhà phát
triển dễ dàng viết, kiểm tra và triển khai mã nguồn trong môi trường tích hợp. Với giao diện
thân thiện và khả năng tùy chỉnh sâu rộng, Visual Studio Code nhanh chóng trở thành một
trong những công cụ phổ biến nhất trong cộng đồng lập trình. Đặc biệt, nó đi kèm với hàng
ngàn tiện ích mở rộng, giúp người dùng tối ưu hóa hiệu suất làm việc.
Hình 1. Visual Studio Code
Visual Studio Code không chỉ hỗ trợ lập trình viên chuyên nghiệp mà còn phù hợp
cho những người mới bắt đầu nhờ vào tính đơn giản, sự hỗ trợ tận tình từ các tài liệu chính
thức và cộng đồng rộng lớn. 1.2. Github
Github là nền tảng quản lý mã nguồn và cộng tác dựa trên dịch vụ đám mây, cho
phép các lập trình viên từ khắp nơi trên thế giới làm việc cùng nhau hiệu quả. Được xây
dựng trên Git – hệ thống kiểm soát phiên bản phân tán, Github cung cấp các công cụ mạnh
mẽ như pull requests, issues, và actions để hỗ trợ toàn bộ vòng đời phát triển phần Hình 2. Github mềm.
Nền tảng này không chỉ dành riêng cho việc quản lý mã nguồn mà còn là nơi trao
đổi, học hỏi và xây dựng cộng đồng. Các dự án mã nguồn mở nổi tiếng trên toàn cầu đều
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
được lưu trữ và duy trì trên Github, tạo nên một kho tàng tài nguyên quý giá cho lập trình viên ở mọi cấp độ.
Một trong những tính năng nổi bật của Github là khả năng tích hợp với các dịch vụ
khác như CI/CD, theo dõi lỗi, và các công cụ tự động hóa, giúp tối ưu hóa quy trình phát triển phần mềm. 1.3. Postman
Postman là một công cụ phổ biến dùng để kiểm thử và phát triển các API, đặc biệt là các API
RESTful. Nó cho phép lập trình viên gửi các request HTTP đến server và xem phản hồi trả về
một cách trực quan. Postman giúp tiết kiệm rất nhiều thời gian trong quá trình phát triển
backend, kiểm thử và tích hợp giữa frontend và backend. Hình 3. Postman 1.4. Figma
Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng
(UX) dựa trên nền tảng web, cho phép nhiều người cùng cộng tác trên một dự án thiết kế
theo thời gian thực. Nhờ khả năng làm việc trực tuyến, Figma giúp các nhóm thiết kế và
phát triển dễ dàng trao đổi, chia sẻ ý tưởng, chỉnh sửa và quản lý phiên bản.
Với bộ công cụ mạnh mẽ, đa dạng và giao diện trực quan, Figma ngày càng trở thành
lựa chọn hàng đầu cho các cá nhân, nhóm sáng tạo cũng như các doanh nghiệp muốn tối
ưu hóa quy trình thiết kế sản phẩm số.
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM Hình 4. Figma 1.5. Webstorm
Webstorm là một môi trường phát triển tích hợp (IDE) mạnh mẽ dành cho lập trình
viên phát triển web, đặc biệt tối ưu cho các ngôn ngữ như JavaScript, TypeScript, HTML và
CSS. Được phát triển bởi JetBrains, Webstorm nổi bật nhờ khả năng tự động hoàn thành
mã, phát hiện lỗi theo thời gian thực và hỗ trợ debug hiệu quả. Hình 5. Webstorm
Với giao diện trực quan, các công cụ kiểm thử tích hợp cùng khả năng quản lý dự án
linh hoạt, Webstorm giúp đẩy nhanh quá trình phát triển phần mềm và nâng cao chất lượng
mã nguồn. Ngoài ra, Webstorm còn hỗ trợ tích hợp với các hệ thống kiểm soát phiên bản
như Git, giúp nhóm phát triển cộng tác thuận lợi trên cùng một dự án. 1.6. Angular
Angular là một framework mã nguồn mở do Google phát triển, sử dụng ngôn ngữ
TypeScript để xây dựng các ứng dụng web đơn trang (SPA – Single Page Applications).
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Angular cho phép phát triển giao diện động, có tính tương tác cao, với cấu trúc
rõHình 6. Angular ràng theo hướng component. 1.7. Express.js
Express.js là một web framework nhẹ, chạy trên nền tảng Node.js. Nó được sử dụng
để xây dựng các ứng dụng phía server và API RESTful. Hình 7. Express.js 1.8. MySQL
MySQL là một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) phổ biến, dùng để lưu trữ
và truy vấn dữ liệu có cấu trúc thông qua ngôn ngữ SQL. Hình 8. MySQL 1.9. Sequelize
Sequelize là một thư viện ORM (Object-Relational Mapping) cho Node.js, hỗ trợ các
cơ sở dữ liệu SQL như MySQL, PostgreSQL, SQLite, v.v. Nó cho phép các nhà phát triển tương
tác với cơ sở dữ liệu bằng cách sử dụng đối tượng JavaScript thay vì viết trực tiếp truy vấn SQL. Hình 9. Sequelize
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 1.10. Cloudinary
Cloudinary là một nền tảng điện toán đám mây chuyên dụng để quản lý và tối ưu
hóa media (hình ảnh và video). Nó cung cấp API để upload, chỉnh sửa, lưu trữ và phân phối
media qua hệ thống CDN (Content Delivery Network). Hình 10. Cloudinary 1.11. Node.Js
Node.js là một nền tảng mã nguồn mở dùng để xây dựng các ứng dụng phía server,
được phát triển dựa trên V8 JavaScript Engine của Google Chrome. Với Node.js, lập trình
viên có thể sử dụng JavaScript ở cả phía frontend và backend, giúp đồng nhất ngôn ngữ
trong toàn bộ hệ thống web. Hình 11. Node.js
Node.js nổi bật với khả năng xử lý bất đồng bộ và không chặn (non-blocking), rất
thích hợp để xây dựng các ứng dụng web có hiệu suất cao, real-time hoặc cần xử lý nhiều kết nối đồng thời.
2. ĐẶC TẢ YÊU CẦU VỀ ỨNG DỤNG
2.1. Giới thiệu về đề tài
GoalQuiz là một nền tảng hiện đại chuyên cung cấp các dạng câu hỏi trắc nghiệm
(quiz) xoay quanh chủ đề bóng đá, nhằm tạo ra một môi trường vừa học hỏi vừa giải trí cho
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
người dùng. Website mang đến trải nghiệm tương tác hấp dẫn thông qua việc trả lời các
câu hỏi mà GoalQuiz cung cấp, giúp người chơi nâng cao kiến thức về bóng đá – từ lịch sử,
luật chơi, các giải đấu đến cầu thủ nổi tiếng. Hệ thống quản lý của GoalQuiz hỗ trợ cập nhật
nội dung câu hỏi và theo dõi kết quả chơi để đánh giá mức độ hiểu biết của người dùng.
Với giao diện thân thiện và kho nội dung phong phú, GoalQuiz không chỉ là nơi giải trí mà
còn là công cụ học tập thú vị dành cho mọi fan hâm mộ môn thể thao vua. 2.2. Mục đích
Mục đích của việc quản lý website câu hỏi/minigames là tạo ra một nền tảng trực
tuyến dễ sử dụng và hiệu quả, nhằm phục vụ nhu cầu học tập, giải trí và tương tác đa dạng
của người dùng. Qua đó, không chỉ cung cấp công cụ để thực hiện các hoạt động như tạo
câu hỏi, minigames mà còn xây dựng một môi trường nơi người dùng có thể phát triển khả
năng sáng tạo, tư duy logic và kỹ năng phối hợp trong không gian kỹ thuật số. Nhờ vào hệ
thống quản lý chuyên nghiệp và giao diện thân thiện, website này hướng tới việc trở thành
một mô hình mẫu về cách kết hợp giữa học tập và giải trí, tạo động lực cho sự phát triển
bản thân của người dùng. 2.3. Phạm vi
Website câu hỏi/minigames tập trung vào việc hỗ trợ người dùng tham gia các hoạt
động vui chơi và học tập trực tuyến thông qua các trò chơi tương tác. Nền tảng này được
thiết kế dành cho nhiều đối tượng khác nhau như học sinh, sinh viên, nhân viên văn phòng
và cả các chuyên gia. Người dùng có thể lựa chọn các minigames theo chủ đề, trả lời câu
hỏi được hệ thống cung cấp và theo dõi kết quả sau mỗi lượt chơi. Với phạm vi ứng dụng
rộng rãi, website không chỉ mang lại trải nghiệm giải trí mà còn là công cụ hỗ trợ học tập và
nâng cao kỹ năng trong môi trường số hiện đại.Yêu cầu chức năng
 User: Đăng nhập, Đăng ký, đăng xuất, xem lịch sử câu hỏi, tham gia bài test, xem top.
 Admin: Quản lí câu hỏi, thống kê, phân tích và gồm những chức năng của User.
2.4. Yêu cầu phi chức năng
 Giao diện thân thiện với người dùng trên mọi nền tảng thiết bị.
 Hệ thống câu hỏi được chọn lọc.
 Hỗ trợ đa nền tảng.
 Đảm bảo tính công bằng khi thực hiện các câu hỏi.
3. PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG 3.1. USECASE DIAGRAM
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Hình 12. USECASE DIAGRAM
3.2. ENTITY RELATIONSHIP (ER) DIAGRAM
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM Hình 13. ER Diagram
3.3. Thiết kế giao diện
3.3.1. Giao diện của User 3.3.1.1. LOGIN/LOGOUT
Đồ Án Thự c Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM
Hình 14. Login/Register
Đồ Án Thực Tập Lập Trình A - Nhóm 7 lOMoAR cPSD| 47206417
TRƯỜNG ĐẠI HỌC HOA SEN KỸ THUẬT PHẦN MỀM 3.3.1.2. VIEW/EDIT USER
Đồ Án Thự c Tập Lập Trình A - Nhóm 7