Xây dựng website quản lý điểm danh của trường udck

ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM NGUYỄN THỊ MAI ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE QUẢN LÝ ĐIỂM DANH CỦA TRƯỜNG UDCK Kon Tum, tháng 08 năm 2022 ĐẠI HỌC ĐÀ NẴNG PHÂN HIỆU TẠI KON TUM ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE QUẢN LÝ ĐIỂM DANH CỦA TRƯỜNG UDCK GIẢNG VIÊN HƯỚNG DẪN : TS ĐỒNG NGỌC NGUYÊN THỊNH SINH VIÊN THỰC HIỆN : NGUYỄN THỊ MAI LỚP : K12TT MSSV : 1817480201012 Kon Tum, tháng 08 năm 2022 LỜI CÁM ƠN Trong trình học tập, nghiên cứu đề tài “Website quản lý điểm danh cho trường UDCK” em nhận giúp đỡ, bảo nhiệt tình thầy, cơ, Phòng Khoa Phân hiệu Đại học Đà Nẵng Kon Tum để hoàn đề tài tốt nghiệp em Em xin bày tỏ biết ơn đặc biệt đến TS Đồng Ngọc Nguyên Thịnh – người trực tiếp hướng dẫn, giúp đỡ kiến thức, tài liệu phương pháp để em hoàn thành đề tài nghiên cứu khoa học Mặc dù có nhiều cố gắng suốt trình thực đề tài, song cịn có mặt hạn chế, thiếu sót Em mong nhận ý kiến đóng góp dẫn thầy để hồn thiện sản phẩm Cuối cùng, em xin trân trọng cảm ơn người đồng hành suốt thời gian thực đề tài đồ án tốt nghiệp! Kon Tum, ngày… tháng 08 năm 2022 Nguyễn Thị Mai MỤC LỤC CHƯƠNG TỔNG QUAN 1.1 LỜI MỞ ĐẦU 1.2 ĐẶT VẤN ĐỀ 1.2.1 Lý mục tiêu nghiên cứu 1.2.2 Đối tượng nghiên cứu 1.2.3 Phạm vi nghiên cứu .2 1.3 PHƯƠNG PHÁP NGHIÊN CỨU 1.3.1 Khảo sát thực tế 1.3.2 Lý thuyết .3 1.3.3 Công nghệ .3 CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 MỤC ĐÍCH VÀ YÊU CẦU 2.2 GIẢI PHÁP THIẾT KẾ 2.3 MƠ HÌNH CLIENT – SERVER 2.4 CÔNG NGHỆ SỬ DỤNG 2.4.1 Ngôn ngữ PHP .6 2.4.2 SQL .8 2.4.3 Công nghệ sử dụng cho Server 2.4.4 Công nghệ sử dụng cho Client 11 2.4.5 Bootstrap 13 2.4.6 JS 14 CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 15 3.1 THỰC TRẠNG QUẢN LÝ ĐIỂM DANH TẠI PHÂN HIỆU ĐNĐH TẠI KON TUM 15 3.2 MÔ TẢ HỆ THỐNG 17 3.3 YÊU CẦU CHỨC NĂNG 18 3.4 PHÂN TÍCH YÊU CẦU 18 3.4.1 Quản lý tài khoản 18 3.4.2 Quản lý hoạt động .19 3.4.3 Quản lý đánh giá sinh viên .19 3.4.4 Quản lý nhóm .19 3.4.5 Thống kê .20 3.4.6 Các yêu cầu hệ thống 20 3.5 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 21 3.5.1 Sơ đồ usecase 21 3.5.2 Sơ đồ 33 3.5.3 Sơ đồ lớp .38 3.5.4 Lược đồ quan hệ sở liệu 42 3.6 KẾT QUẢ 45 i 3.6.1 Đăng nhập 45 3.6.2 Trang chủ 49 3.6.3 Trang sinh viên 49 3.6.4 Trang cán 56 3.6.5 Trang log 60 CHƯƠNG KẾT LUẬN .63 4.1 KẾT LUẬN 63 4.1.1 Kết đạt .63 4.1.2 Hạn chế .63 4.2 HƯỚNG PHÁT TRIỂN 63 ii DANH MỤC CÁC TỪ VIẾT TẮT CSDL CTHSSV ĐNĐN NNL QTV SV : Cơ sở liệu : Công tác học Sinh – Sinh viên : Đại học Đà Nẵng : Người nhập liệu : Quản trị viên : Sinh viên iii DANH MỤC CÁC BẢNG Số hiệu bảng 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 3.26 3.27 3.28 Tên bảng Phân tích yêu cầu chức Đặc tả sơ đồ usecase chức đăng nhập Đặc tả sơ đồ usecase nhập file tài khoản Đặc tả sơ đồ usecase thêm tài khoản Đặc tả sơ đồ usecase sửa tài khoản Đặc tả sơ đồ usecase xóa tài khoản Đặc tả sơ đồ usecase cấu hình chấm điểm danh Đặc tả sơ đồ usecase xem danh sách điểm danh Đặc tả sơ đồ usecase thêm nhóm Đặc tả sơ đồ usecase sửa nhóm Đặc tả sơ đồ usecase xóa nhóm Đặc tả sơ đồ usecase thống kê số lượng sinh viên Đặc tả sơ đồ usecase thống kê xếp loại Đặc tả sơ đồ usecase thống kê tỉ lệ xếp loại Đặc tả sơ đồ usecase thêm khoa Đặc tả sơ đồ usecase sửa khoa Đặc tả sơ đồ usecase xóa khoa Đặc tả sơ đồ usecase thêm lớp Đặc tả sơ đồ usecase sửa lớp Đặc tả sơ đồ usecase xóa lớp Mơ tả sơ đồ lớp Bảng khoa Bảng giảng viên Bảng lớp Bảng sinh viên Bảng khung điểm Bảng duyệt Bảng điểm iv Trang 18 21 22 23 24 24 25 26 26 27 27 28 29 29 30 30 31 32 32 33 39 42 42 43 43 43 44 44 DANH MỤC CÁC HÌNH Số hiệu hình 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15 3.16 3.17 3.18 3.19 3.20 3.21 3.22 3.23 3.24 3.25 Tên hình Mơ hình minh họa Minh hoạ mơ hình Client – Server PHP SQL Cơng nghệ NodeJS Framework Express Library JsonWebToken Hệ quản trị sở liệu PosgreSQL Logo thư viện ReactJS Logo ANTD Hình ảnh minh họa Bootstrap Hình ảnh minh họa JS Danh sách sinh viên tham gia hoạt động Bảng tổng hợp thông tin Sơ đồ usecase tổng quát Sơ đồ usecase chức quản lý tài khoản Sơ đồ usecase nhập file tài khoản Sơ đồ usecase thêm tài khoản Sơ đồ usecase sửa tài khoản Sơ đồ usecase xóa tài khoản Sơ đồ usecase quản lý điểm danh Sơ đồ usecase cấu hình chấm điểm danh Sơ đồ usecase xem danh sách điểm danh Sơ đồ usecase thêm nhóm Sơ đồ usecase sửa nhóm Sơ đồ usecase xóa nhóm Sơ đồ usecase thống kê Sơ đồ usecase thống kê số lượng sinh viên Sơ đồ usecase thống kê xếp loại Sơ đồ usecase thống kê tỉ lệ xếp loại Sơ đồ usecase chức quản lý khoa Sơ đồ usecase thêm khoa Sơ đồ usecase sửa khoa Sơ đồ usecase xóa khoa Sơ đồ usecase chức quản lý lớp Sơ đồ usecase thêm lớp Sơ đồ usecase sửa lớp v Trang 9 10 10 11 12 13 14 15 16 21 22 22 23 23 24 25 25 25 26 27 27 28 28 28 29 29 30 30 31 31 32 32 3.26 3.27 3.28 3.29 3.30 3.31 3.32 3.33 3.34 3.35 3.36 3.37 3.38 3.39 3.40 3.41 3.42 3.43 3.44 3.45 3.46 3.47 3.48 3.49 3.50 3.51 3.52 3.53 3.54 3.55 3.56 3.57 3.58 3.59 3.60 3.61 3.62 3.63 3.64 Sơ đồ usecase xóa lớp Sơ đồ chức đăng nhập Sơ đồ cho chức đổi mật Sơ đồ cho chức tìm kiếm giảng viên Sơ đồ cho chức in danh sách Sơ đồ cho chức lọc thông tin Sơ đồ chức cập nhật thông tin Sơ đồ chức chỉnh sửa thông tin Sơ đồ lớp Lược đồ sở liệu Trang đăng nhập Đăng nhập cho sinh viên Nhập sai ID Đăng nhập cho khoa Đăng nhập cán Nhập thông tin Đăng nhập cho khách Đăng nhập admin Giao diện trang chủ Giao diện trang sinh viên Giao diện kết tìm kiếm sinh viên Lỗi chọn sinh viên In barcode cho sinh viên Form sửa sinh viên Form xóa sinh viên Giao diện trang khoa Tìm kiếm theo id Tìm kiếm theo tên khoa Lỗi in khoa Giao diện in barcode khoa Form thêm khoa Giao diện chỉnh sửa khoa Hộp thoại xóa khoa Giao diện trang cán Tìm kiếm cán theo tên Form chỉnh sửa thông tin cán Xóa cán Lỗi in nhân viên In barcode cho nhân viên vi 33 33 34 35 36 36 37 38 38 42 45 45 46 46 47 47 48 48 49 49 50 50 51 51 52 52 53 53 54 54 55 55 56 56 57 57 58 58 59 3.65 3.66 3.67 3.68 3.69 3.70 Form thêm cán Giao diện trang logs Tìm kiếm thơng tin tài khoản Danh sách trống Chức tìm kiếm theo ngày In danh sách vii 59 60 60 61 61 62 - Để in sinh viên, chọn tất sinh viên, chọn nút in barcode Hình 3.48: In barcode cho sinh viên d Form sinh viên Hình 3.49: Form sửa sinh viên - Chọn nút thêm sinh viên Hệ thống giao diện - Nhập thông tin id, tên, địa số điện thoại Chọn nút lưu 51 e Xóa sinh viên Hình 3.50: Form xóa sinh viên - Để xóa sinh viên, chọn nút delete - Hệ thống xuất hộp thoại để hỏi bạn có muốn xóa khơng Nếu có ấn tiếp tục Nếu bạn nhấn lộn vào nút xóa chọn đóng f Trang khoa Hình 3.51: Giao diện trang khoa 52 g Tìm kiếm theo id Hình 3.52: Tìm kiếm theo id - Để tìm kiếm, ta chọn vào search nhập khoa ta cần lấy thơng tin - Để tìm kiếm ta có cách: tìm kiếm theo tên tìm kiếm theo id Hình 3.53: Tìm kiếm theo tên khoa 53 h In barcode Hình 3.54: Lỗi in khoa - Tương tự sinh viên, in khoa cân chọn khoa chọn tất Nếu không hệ thống báo lỗi Hình 3.55: Giao diện in barcode khoa 54 i Thêm khoa Hình 3.56: Form thêm khoa - Chọn nút thêm khoa Hệ thống giao diện - Nhập thông tin id, tên, địa số điện thoại Chọn nút lưu j Form chỉnh sửa Hình 3.57: Giao diện chỉnh sửa khoa 55 k Xóa khoa Hình 3.58: Hộp thoại xóa khoa - Để xóa khoa, ta chọn nút xóa - Hệ thông hiển thị hộp thoại với ý nghĩa bạn có muốn xóa khoa khơng Chọn tiếp tục bạn mốn xóa ngược lại 3.6.4 Trang cán Hình 3.59: Giao diện trang cán - Đây nơi quản lý thông tin sinh viên Gồm thông tin id, tên, địa chỉ, số điện thoại,… - Để tìm kiếm sinh viên, ta chọn vào search nhập id tên sinh viên cần tìm Nếu có sinh viên, giao diện thơng tin sinh viên 56 b Tìm kiếm cán bộ, nhân viên Hình 3.60: Tìm kiếm cán theo tên - Để tìm kiếm, ta chọn vào search nhập cán ta cần lấy thông tin - Để tìm kiếm ta có cách: tìm kiếm theo tên tìm kiếm theo id c Form chỉnh sửa Hình 3.61: Form chỉnh sửa thơng tin cán - Chọn nút chỉnh sữa Hệ thống hiển thị form gồm thông tin id, tên, địa số điện thoại - Chọn thông tin cần sửa nhập thông tin muốn sữa, chọn nút lưu - Hệ thông thông báo lưu thành công 57 d Xóa cán Hình 3.62: Xóa cán - Để xóa nhân viên, ta chọn nút xóa - Hệ thơng hiển thị hộp thoại với ý nghĩa bạn có muốn xóa nhân viên khơng Chọn tiếp tục bạn mốn xóa ngược lại e In barcode Hình 3.63: Lỗi in nhân viên - Tương tự sinh viên, in khoa cân chọn khoa chọn tất Nếu không hệ thống báo lỗi 58 Hình 3.64: In barcode cho nhân viên f Thêm nhân viên Hình 3.65: Form thêm cán - Muốn thêm nhân viên cán bộ, ta chọn nút thêm nhân viên - Trong form này, ta chỉnh sửa thông tin mà ta cần id, tên,… - Sau chỉnh sửa, chọn nút lưu - Hệ thống hiển thị lưu thành công 59 3.6.5 Trang log Hình 3.66: Giao diện trang logs - Trong trang log, ta thấy ác thông tin ngày tháng đăng nhập tài khoảng - Nó giúp ta dễ dàng quản lý xem ngày có tài khoản đăng nhập b Tìm kiếm tài khoản Hình 3.67: Tìm kiếm thơng tin tài khoản - Tìm kiếm tài khoản giúp ta biết người hơm có điểm danh khơng - Có thể tìm kiếm theo id tên họ - Khi có tài khoản, hiển thị thông in id, tên, kiểu log, họ đăng nhập ngày tháng nào, - Nếu thông tin bị sai không tồn tài khoản, hệ thống hiển thị danh sách trống 60 Hình 3.68: Danh sách trống c Xem danh sách đăng nhập qua ngày Hình 3.69: Chức tìm kiếm theo ngày - Ta xem danh sách tài khoảng đăng nhập theo ngày - Chọn vào ngày, lựa chọn ngày tháng năm bạn muốn coi - Giao diện hiển thị ngày hơm có đăng nhập kèm theo thơng tin 61 d Danh sách Hình 3.70: In danh sách - Chọn vào nút in danh sách - Hệ thống bảng in - Chọn vào nút in 62 CHƯƠNG KẾT LUẬN 4.1 KẾT LUẬN 4.1.1 Kết đạt a Lý thuyết - Nắm lý thuyết mơ hình MVC để dụng tốt vào việc xây dựng web - Nắm kiến thức thiết kế UI UX để tạo giao diện đẹp mắt trải nghiệm người dùng tốt b Công nghệ - Sử dụng thành thạo ngôn ngữ PHP - Sử dụng thành thạo công nghệ HTML, CSS, JavaScript, JQuery Bootstrap 4.1.2 Hạn chế Tuy hoàn thành hết chức phân tích hệ thống thiếu nhiều chức giao diện chưa hoàn thiện tốt - In excel chưa tách cột - Hiển thị giao diện bên backend điện thoại chưa tốt 4.2 HƯỚNG PHÁT TRIỂN Trong tương lai nhóm có hội phát triển hệ thống website quản lý sinh viên Em thực tiếp công việc sau: - Năng cấp giao diện back-end front-end - Thêm chức tương tác giáo viên sinh viên qua hộp chat - Tiếp tục xây dựng chức xuất file thông tin thông kê thêm chức nhập thông tin từ file exel - Chia tách cột từ download - Thiết kế riêng trang sinh viên cho lưu học sinh - Kháo sát thêm ý kiến lưu học sinh nhà trường chức khác cho hệ thống 63 DANH MỤC TÀI LIỆU THAM KHẢO [1] Cuong Quach, Visual Studio Code gì? Tính bật Visual Studio Code, địa chỉ: https://cuongquach.com/visual-studio-code-la-gi.html, ngày truy cập: 01/02/2022 [2] Free Tuts, Học MySQL, địa chỉ: https://freetuts.net/hoc-mysql, ngày truy cập: 15/02/2022 [3] Host Tinger, PHP gì? Hướng dẫn chi tiết cho người bắt đầu, địa chỉ: https://www.hostinger.vn/huong-dan/php-la-gi, ngày truy cập: 14/02/2022 [4] The Gioi Di Dong, XAMPP gì? Cách cài đặt, sử dụng XAMPP hiệu máy tính, địa chỉ: https://www.thegioididong.com/hoi-dap/xampp-la-gi-cach-caidat-va-su-dung-localhost-tren-may-1339338, ngày truy cập: 01/03/2022 [5] Tino Group, MVC gì? Ứng dụng mơ hình MVC lập trình, địa chỉ: https://wiki.tino.org/mvc-la-gi/, ngày truy cập: 30/02/2022 [6] Tino Group, HTML, CSS, JavaScript gì? Xây dựng website với HTML, CSS JavaScript, địa chỉ: https://wiki.tino.org/html-css-javascript-la-gi/, ngày truy cập: 03/02/2022 [7] Tino Group, Bootstrap gì? Cài đặt hướng dẫn sử dụng Bootstrap, địa chỉ: https://wiki.tino.org/bootstrap-la-gi/, ngày truy cập: 13/03/2022 [8] Topdev, jQuery gì? Tìm hiểu jQuery, địa chỉ: https://topdev.vn/blog/jquery-lagi/, ngày truy cập: 11/02/2022 [9] Vietnix, Mơ Hình Client Server Là Gì, địa chỉ: https://vietnix.vn/mo-hinh-clientserver/, ngày truy cập: 21/02/2022 [10] Unitop, PhpMailer: Cách Sử Dụng Hàm Gửi Email Đến Người Dùng Trong Php, địa chỉ: https://unitop.com.vn/phpmailer-php.html/, ngày truy cập: 20/02/2022 64 GIẤY XÁC NHẬN HOÀN THÀNH ĐỒ ÁN TỐT NGHIỆP Họ tên sinh viên: Nguyễn Thị Mai Lớp: K12TT MSSV: 1817480201012 Xác nhận sinh viên Nguyễn Thị Mai chỉnh sửa báo cáo đồ án tốt nghiệp theo ý kiến Giảng viên hướng dẫn Hội đồng đánh giá Tên đồ án tốt nghiệp: Xây dựng website quản lý điểm danh cho trường UDCK Kon Tum, ngày tháng năm 2022 Trưởng khoa Người hướng dẫn 65