Xây dựng hệ thống hỗ trợ liên kết sinh viên và giảng viên theo đơn vị lớp sinh viên thuộc khoa

TRƯỜNG ĐẠI HỌC SƯ PHẠM TPHCM KHOA CÔNG NGHỆ THÔNG TIN PHẠM HUỲNH QUỐC DUY NGUYỄN VĂN CÔNG XÂY DỰNG HỆ THỐNG HỖ TRỢ LIÊN KẾT SINH VIÊN VÀ GIẢNG VIÊN THEO ĐƠN VỊ LỚP SINH VIÊN THUỘC KHOA KHÓA LUẬN TỐT NGHIỆP TP HỒ CHÍ MINH - NĂM 2022 TRƯỜNG ĐẠI HỌC SƯ PHẠM TPHCM KHOA CÔNG NGHỆ THÔNG TIN PHẠM HUỲNH QUỐC DUY NGUYỄN VĂN CÔNG XÂY DỰNG HỆ THỐNG HỖ TRỢ LIÊN KẾT SINH VIÊN VÀ GIẢNG VIÊN THEO ĐƠN VỊ LỚP SINH VIÊN THUỘC KHOA CHUYÊN NGÀNH: CƠNG NGHỆ THƠNG TIN [CƠNG NGHỆ PHẦN MỀM] KHĨA LUẬN TỐT NGHIỆP NGƯỜI HƯỚNG DẪN: THS LƯƠNG TRẦN NGỌC KHIẾT TP.HCM – NĂM 2022 MỤC LỤC MỤC LỤC i DANH MỤC HÌNH ẢNH LỜI CÁM ƠN CHƯƠNG iv viii MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục đích nghiên cứu 1.3 Đối tượng phạm vi nghiên cứu 1.4 Phương pháp nghiên cứu 1.5 Nội dung nghiên cứu CHƯƠNG PHÂN TÍCH HỆ THỐNG 2.1 Khảo sát tính hỗ trợ cần thiết 2.2 Phát thảo mơ hình hệ thống 2.2.1 Use Case Diagram 2.2.1.1.Use Case Authentication 6 2.2.1.2.Use case General 12 2.2.1.3.Use case Manage 17 2.2.2 21 Activity Diagram 2.2.2.1.Activity Authentication 21 2.2.2.2.Activity General 23 2.3 Công nghệ hỗ trợ 25 2.3.1 Android 25 2.3.2 Database 26 CHƯƠNG 3.1 XÂY DỰNG HỆ THỐNG Xây dựng cấu trúc liệu lưu trữ Trang i 27 27 3.1.1 Admin 28 3.1.2 Người dùng (Sinh viên, giảng viên, quản lý) 30 3.1.3 Lớp 30 3.1.4 Thông báo 32 3.1.5 Câu hỏi 33 3.1.6 Lịch giảng dạy 34 3.2 Xây dựng hệ thống API 34 3.3 Xây dựng ứng dụng Smart Device 35 3.4 Xây dựng ứng dụng Web Application 37 CHƯƠNG THỰC NGHIỆM VÀ KẾT QUẢ 39 4.1 Tổng thể 39 4.2 Phần dành cho sinh viên 47 4.2.1 Xem/Nhận thông báo 47 4.2.2 Xem/Đăng câu hỏi 52 4.2.3 Xem lịch giảng dạy 58 4.3 Phần dành cho người quản lý, giảng viên 60 4.3.1 Đăng/Quản lý thông báo 61 4.3.2 Quản lý câu hỏi 63 4.3.3 Quản lý tags 64 4.4 Phần dành cho admin 65 4.5 Hướng dẫn cài đặt thiết lập 85 4.5.1 Cài đặt sử dụng mobile 85 4.5.2 Cài đặt sử dụng website 87 CHƯƠNG KẾT LUẬN 91 5.1 Đánh giá kết đạt 91 5.2 Hướng phát triển 92 TÀI LIỆU THAM KHẢO 93 Trang ii Tiếng việt 93 Tiếng Anh ngôn ngữ khác 93 PHỤ LỤC 94 Trang iii DANH MỤC HÌNH ẢNH Hình 2.1 - Giao diện trang UIT forum Hình 2.2 - Giao diện Upcoder Hình 2.3 - Use case diagram authentication Hình 2.4 - Use case diagram general 12 Hình 2.5 - Use case diagram manage 17 Hình 2.6 - Activity diagram login 22 Hình 2.7- Activity forgot password 23 Hình 2.8 - Activity diagram answer & question 24 Hình 2.9 - Activity diagram notification 24 Hình 2.10 - Android Studio 25 Hình 3.1 - Cấu trúc database 27 Hình 3.2 - Cấu trúc bảng admin 28 Hình 3.3 - Cấu trúc bảng admin 30 Hình 3.4 - Cấu trúc bảng lớp 31 Hình 3.5 - Cấu trúc bảng thông báo 32 Hình 3.6 - Cấu trúc bảng thông báo 33 Hình 3.7 - Cấu trúc bảng lịch giảng dạy 34 Hình 4.1 - Giao diện đăng nhập website 40 Hình 4.2 - Giao diện đăng nhập di động 41 Hình 4.3 - Giao diện khơi phục mật cho di động 42 Hình 4.4 - Giao diện khơi phục mật trang web 42 Hình 4.5 - Giao diện nhập mật để khơi phục mật 43 Hình 4.6 - Giao diện trang chủ trang web 44 Trang iv Hình 4.7- Giao diện trang chủ di động 44 Hình 4.8 - Giao diện cập nhật thông tin tài khoản web 45 Hình 4.9 - Giao diện cập nhật thông tin tài khoản di động 46 Hình 4.10 - Thông báo tin thông tin ứng dụng động sau đăng viết website 47 Hình 4.11 - Giao diện xem thông báo web 48 Hình 4.12 - Giao diện xem chi tiết viết thông báo web 48 Hình 4.13 - Giao diện bình luận viết thông báo web 49 Hình 4.14 - Giao diện thơng báo thiết bị di động 49 Hình 4.15 - Giao diện xem thơng báo lớp web 50 Hình 4.16 - Giao diện tìm kiếm thơng báo lớp web 51 Hình 4.17 - Giao diện xem chi tiết viết thông báo lớp web 51 Hình 4.18 - Giao diện xem tất thông báo 52 Hình 4.19 - Giao diện xem câu hỏi chung web 53 Hình 4.20 - Giao diện xem câu hỏi chung di động 53 Hình 4.21 - Giao diện xem chi tiết câu hỏi chung web 54 Hình 4.22 - Giao diện bình luận viết giao diện câu hỏi chung web 55 Hình 4.23 - Giao diện xem danh sách câu hỏi lớp web 56 Hình 4.24 - Giao diện tạo tìm kiếm câu hỏi lớp web 56 Hình 4.25 - Giao diện xem chi tiết viết giao diện câu hỏi lớp web 57 Hình 4.26 - Giao diện đăng câu hỏi lớp web 57 Hình 4.27 - Giao diện sửa câu hỏi lớp web 58 Hình 4.28 - Giao diện xem lịch giảng dạy 59 Hình 4.29 - Giao diện xem lịch giảng dạy 59 Hình 4.30 - Giao diện xem lịch giảng dạy mobile 60 Trang v Hình 4.31- Giao diện trang quản lý 61 Hình 4.32 - Giao diện đăng thông báo 62 Hình 4.33 - Giao diện sửa thông báo 62 Hình 4.34 - Giao diện quản lý thơng báo 63 Hình 4.35 - Giao diện quản lý câu hỏi 64 Hình 4.36 - Giao diện quản lý tag 65 Hình 4.37 - Giao diện đăng nhập admin 66 Hình 4.38 - Giao diện quên mật admin 66 Hình 4.39 - Giao diện trang chủ admin 67 Hình 4.40 - Giao diện cập nhật thông tin tài khoản 68 Hình 4.41 - Giao diện danh sách năm học 68 Hình 4.42 - Giao diện thêm năm học 69 Hình 4.43 - Giao diện danh sách học kỳ 69 Hình 4.44 - Giao diện thêm học kỳ 70 Hình 4.45 - Giao diện danh sách lớp 70 Hình 4.46 - Giao diện thêm lớp 71 Hình 4.47 - Giao diện sửa lớp 71 Hình 4.48 - Giao diện thêm lớp 72 Hình 4.49 - Giao diện danh sách tag câu hỏi 73 Hình 4.50 - Giao diện thêm tag câu hỏi 73 Hình 4.51 - Giao diện danh sách câu hỏi 74 Hình 4.52 - Giao diện thêm sửa câu hỏi 74 Hình 4.53 - Giao diện danh sách danh mục thông báo 75 Hình 4.54 - Giao diện thêm danh mục thông báo 75 Hình 4.55 - Giao diện danh sách thơng báo 76 Trang vi Hình 4.56 - Giao diện thêm thơng báo 76 Hình 4.57 - Giao diện sửa thơng báo 77 Hình 4.58 - Giao diện danh sách lịch giảng dạy 78 Hình 4.59 - Giao diện chi tiết lịch giảng dạy 78 Hình 4.60 - Giao diện danh sách tài khoản 79 Hình 4.61 - Giao diện danh sách tài khoản 79 Hình 4.62 - Giao diện thêm sửa tài khoản 80 Hình 4.63 - Giao diện danh sách file tải lên tài khoản 81 Hình 4.64 - Giao diện danh sách tài khoản admin 81 Hình 4.65 - Giao diện thêm sửa tài khoản admin 82 Hình 4.66 - Giao diện thêm sửa tài khoản admin 82 Hình 4.67 - Giao diện nhóm phân quyền 83 Hình 4.68 - Giao diện thêm sửa nhóm phân quyền 83 Hình 4.69 - Giao diện thêm sửa nhóm phân quyền 84 Hình 4.70 - Giao diện lưu backup 84 Hình 4.71 – Giao diện trang chủ mobile 85 Hình 4.72 – Giao diện sau nhấn vào tab khác 86 Hình 4.73 – Thanh menu giao diện lớp học phần 87 Hình 4.74 – Giao diện website sau đăng nhập 88 Hình 4.75 - Giao diện sau bấm tài khoản 89 Hình 4.76 – Giao diện lớp học phần 89 Trang vii LỜI CÁM ƠN Đầu tiên, xin gửi lời cảm ơn chân thành đến ThS Lương Trần Ngọc Khiết, người tận tình hướng dẫn, động viên, giúp đỡ em suốt thời gian thực đề tài Trong thời gian làm việc với Thầy chúng em học hỏi nhiều kiến thức bổ ích mà cịn học tinh thần thái độ làm việc nghiêm túc kiến thức sống quý báu Thầy Em xin gửi lời cảm ơn đến tất Thầy Cô khoa Công nghệ Thông tin dạy dỗ truyền đạt cho chúng em nhiều kiến thức suốt năm học vừa qua Xin gửi lời cảm ơn chân thành đến gia đình bè bạn ln nguồn động viên to lớn, giúp đỡ, chia sẻ khó khăn, vui buồn em suốt thời gian qua Mặc dù em cố gắng hoàn thiện đề tài với tất nỗ lực khơng thể tránh khỏi thiếu sót Chúng em kính mong nhận thơng cảm bảo quý Thầy, Cô bạn đồng mơn Tp Hồ Chí Minh, ngày 29 tháng 03 năm 2022 Sinh viên Nguyễn Văn Công Phạm Huỳnh Quốc Duy Trang viii Hình 4.62 - Giao diện thêm sửa tài khoản Admin quyền thêm xóa sửa tài khoản cấp quyền cho tài khoản quyền: sinh viên, giảng viên, quản lý, chỉnh sửa thơng tin tài khoản: mã, tên, email,chức vụ Phần Tải lên giúp cho admin quản lý danh sách file hình ảnh mà người dùng tải lên Trang 80 Hình 4.63 - Giao diện danh sách file tải lên tài khoản Admin xóa copy đường dẫn để xem file hình ảnh Admin thêm người giúp quản lý trang website Hình 4.64 - Giao diện danh sách tài khoản admin Trang 81 Hình 4.65 - Giao diện thêm sửa tài khoản admin Hình 4.66 - Giao diện thêm sửa tài khoản admin Admin thêm tài khoản để quản lý hệ thống cấp quyền cho họ quản lý tùy theo nhóm mà admin cấp quyền Trang 82 Hình 4.67 - Giao diện nhóm phân quyền Admin quản lý thêm, sửa nhóm người dùng Hình 4.68 - Giao diện thêm sửa nhóm phân quyền Trang 83 Hình 4.69 - Giao diện thêm sửa nhóm phân quyền Admin tạo nhóm người dùng cấp quyền cho nhóm người khác giúp việc quản lý hệ thống trở nên dễ dàng Trang xem thông tin trạng lưu (backups) Hình 4.70 - Giao diện lưu backup Trang 84 Admin lưu data local lại nhằm trường hợp cần phải backup lại data 4.5 Hướng dẫn cài đặt thiết lập Cài đặt sử dụng mobile 4.5.1 Ứng dụng mobile sử dụng ngôn ngữ Kotlin phiên 1.4.3, ứng dụng hỗ trợ từ Android 4.2 trở lên Nếu người dùng đủ điều kiện từ dịng Android 4.2 trở lên tiến hành cài đặt app file apk vào điện thoại Hình 4.71 – Giao diện trang chủ mobile Ở giao diện trang chủ bao gồm mục Trang chủ, Thơng báo, Hỏi đáp, Lịch giảng dạy • Thông tin: Là nơi thông tin hiển thị thông tin giảng viên, lớp trưởng để sinh viên liên hệ cách dễ dàng • Thơng báo: Nơi giảng viên, quản lý đăng thơng báo gửi sinh viên • Câu hỏi: Nơi sinh viên đăng thắc mắc để giảng viên, sinh viên xem bình luận Trang 85 • Danh sách lớp: Nơi giảng viên, sinh viên có thẻ xem danh sách lớp học mình, chức vụ sinh viên có, lần hoạt động gần sinh viên Để truy cập vào danh lớp học phần người dùng cần nhấn vào tab “Khác” để hiển thị giao diện quản lý tài khoản Hình 4.72 – Giao diện sau nhấn vào tab khác Bấm vào danh sách lớp để hiển thị danh sách học phần người dùng, chọn lớp học phần muốn truy cập Sau vào giao diện lớp học phần hiển thị giao diện thông tin lớp học phần menu để người dùng tương tác với chức khác lớp học phần Trang 86 Hình 4.73 – Thanh menu giao diện lớp học phần Ở giao diện lớp học phần bao gồm mục Thông tin, Thông báo, Hỏi đáp, Danh sách lớp • Thơng tin: Là nơi thông tin hiển thị thông tin giảng viên, lớp trưởng để sinh viên liên hệ cách dễ dàng • Thơng báo: Nơi giảng viên, quản lý đăng thơng báo gửi sinh viên • Câu hỏi: Nơi sinh viên đăng thắc mắc để giảng viên, sinh viên xem bình luận • Danh sách lớp: Nơi giảng viên, sinh viên có thẻ xem danh sách lớp học mình, chức vụ sinh viên có, lần hoạt động gần sinh viên 4.5.2 Cài đặt sử dụng website Website triển khai viết React phiên bản17.Website truy cập từ browser trừ Internet Explorer API dùng PHP 8.0 để sử dụng cho mobile website Trang 87 Tiến hành đăng nhập vào https://fit-beta.youthfit.info/ tài khoản sinh viên, giảng viên, quản lý truy cập đường link https://fit-beta-admin.youthfit.info/ tài khoản admin, quản trị viên Sau người dùng đăng nhập vào website mobile giao diện hiển thị Hình 4.74 – Giao diện website sau đăng nhập Ở giao diện lớp học phần bao gồm mục Thông tin, Thông báo, Hỏi đáp, Danh sách lớp • Trang chủ: Trang chủ nơi đăng thông báo, hỏi - đáp • Thơng báo: Nơi giảng viên, quản lý đăng thơng báo gửi sinh viên • Hỏi đáp: Nơi sinh viên đăng thắc mắc để giảng viên, sinh viên xem bình luận • Lịch giảng dạy: Nơi giảng viên, sinh viên xem lịch giảng dạy giảng viên Nếu người dùng bấm vào tài khoản hiển thị danh sách lớp học phần Trang 88 Hình 4.75 - Giao diện sau bấm tài khoản Giao diện hiển thị số lớp học phần thêm dùng Nếu người dùng muốn xem tất học phần, người dùng bấm vào “Xem tất cả” để xem tất học phần người dùng Nếu người dùng bấm vào lớp học phần hiển thị giao diện lớp học phần Hình 4.76 – Giao diện lớp học phần Ở giao diện trang chủ bao gồm mục Trang chủ, Thông báo, Hỏi đáp, Lịch giảng dạy Trang 89 • Thơng tin: Là nơi thơng tin hiển thị thông tin giảng viên, lớp trưởng để sinh viên liên hệ cách dễ dàng • Thơng báo: Nơi giảng viên, quản lý đăng thơng báo gửi sinh viên • Câu hỏi: Nơi sinh viên đăng thắc mắc để giảng viên, sinh viên xem bình luận • Danh sách lớp: Nơi giảng viên, sinh viên có thẻ xem danh sách lớp học mình, chức vụ sinh viên có, lần hoạt động gần sinh viên Trang 90 CHƯƠNG 5.1 KẾT LUẬN Đánh giá kết đạt Liên kết giảng viên sinh viên thực vấn đề quan trọng, vấn đề quan trọng ảnh hưởng tới phát triển sinh viên Để thực tốt nhiệm vụ đó, nhóm chúng em đánh giá phân tích các chức cần thiết để liên kết giảng viên sinh viên từ định giải pháp nhằm nâng cao liên kết giảng viên sinh viên Qua thời gian thực hướng dẫn thầy Lương Trần Ngọc Khiết, nhóm cố gắng hồn thiện khóa luận theo u cầu quy định.Nhóm đạt số kết sau Nhóm hồn thiện giao diện phần mềm theo yêu cầu thiết kế website mobile Hệ thống hóa lại giao diện, chức cần thiết cho vấn đề liên kết giảng viên sinh viên dựa sở vận dụng nguyên lý, phương pháp phân tích, đánh giá trang website diễn đàn trường học Bên cạnh luận văn phân tích thực trạng hoạt động trang website diễn đàn như: Forums - UIT – Forum,Upcoder, Diễn Đàn Sinh Viên FTU - Đại Học Ngoại Thương,… từ đánh giá điểm phù hợp tồn mơ hình liên kết giảng viên sinh viên Về mặt tồn việc liên kết giảng viên sinh viên bao gồm vấn đề như: việc nhận thông báo từ giảng viên, xem lịch giảng dạy giảng viên, giảng viên thơng báo tới tất sinh viên học phần chưa quan tâm nhiều Kết đáp ứng mục tiêu đặt từ ban đầu: xây dựng thành công hệ thống hỗ trợ liên kết sinh viên giảng viên theo đơn vị lớp sinh viên thuộc Khoa với chức xuyên suốt từ website đến mobile app đáp ứng yêu cầu người sử dụng Mặc dù cố gắng thời gian có hạn nên chương trình khơng thể tránh khỏi những thiếu sót định Bên cạnh chương trình cịn số chức Trang 91 chưa hiển thị kịp chức quản lý điểm sinh viên, số chức tương tác viết thiết bị di động 5.2 Hướng phát triển Nếu có điều kiện nghiên cứu sâu với việc tìm hiểu cơng cụ khác hỗ trợ q trình phát triển phần mềm Nhóm phát triển thêm chức hỗ trợ cho sinh viên giảng viên chức quản lý điểm rèn luyện sinh viên, chức quản lý điểm, giúp cho sinh viên thống kê quản lý điểm tốt hơn, hồn thiện chức tương tác với viết sinh viên thiết bị di động Phát triển thêm nhiều tảng hệ điều hành IOS Trang 92 TÀI LIỆU THAM KHẢO Tiếng việt [1] Trường Bách Khoa TPHCM (2022, 22) Diễn Đàn Sinh Viên X Y Dựng Bách Khoa Tphcm Được truy lục từ Diễn đàn sinh viên dựng bách khoa: https://xaydungbkhcm.com [2] Trường Đại học Công nghệ Thông tin (2022, 18) Diễn đàn trường Đại học Công nghệ thông tin - Đại học Quốc gia Thành phố Hồ Chí Minh Được truy lục từ Forums - UIT Forum: https://forum.uit.edu.vn/ [3] Trường Đại học Ngoại Thương (2022, 14) Diễn Đàn Sinh Viên FTU - Đại Học Ngoại Thương Được truy lục từ Tài liệu học tập | Diễn Đàn Sinh Viên FTU: https://ftuforum.org/diendan/ Tiếng Anh ngôn ngữ khác [4] Andrea Chiarelli (2018).Beginning React: Simplify your frontend development workflow and enhance the user experience of your applications with React [5] Antonio Leiva (2016) Kotlin for Android Developers: Learn Kotlin the Easy Way While Developing an Android App [6] Adrian W West & Steve Prettyman (2018) Practical PHP 7, MySQL 8, and MariaDB Website Databases: A Simplified Approach to Developing [7] Dave Ceddia (2017) Pure React: A step-by-step guide to mastering React https://www.pdfdrive.com/pure-react-a-step-by-step-guide-to-mastering-reacte196825777.html [8] Kirupa Chinnathambi (2018) Learning React: A Hands-On Guide to Building Web Applications Using React and Redux [9] Ted Hagos (2018) Learn Android Studio with Kotlin: Efficient Android App Development [10] Tomasz Dyl & Kamil Przeorski (2017).Mastering Full Stack React Web Development Trang 93 PHỤ LỤC PL-1 Link github web admin/api: https://github.com/thanhcong2930/fit-admin PL-2 Link github web: https://github.com/thanhcong2930/fit-web-react PL-3 Link github moblie https://github.com/thanhcong2930/fit-mobile Trang 94