TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEBSITE LƯU TRỮ TÀI LIỆU TÍCH HỢP TẠO CUỘC HỌP TRỰC TUYẾN CHO BỘ MÔN[.]
TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE LƯU TRỮ TÀI LIỆU TÍCH HỢP TẠO CUỘC HỌP TRỰC TUYẾN CHO BỘ MÔN CÔNG NGHỆ THÔNG TIN Giảng viên hướng dẫn: ThS NGUYỄN LÊ MINH Sinh viên thực hiện: PHẠM HUỲNH HẢI YẾN Lớp: CÔNG NGHỆ THÔNG TIN Khố: 59 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI PHÂN HIỆU TẠI TP HỒ CHÍ MINH BỘ MƠN CƠNG NGHỆ THƠNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE LƯU TRỮ TÀI LIỆU TÍCH HỢP TẠO CUỘC HỌP TRỰC TUYẾN CHO BỘ MÔN CÔNG NGHỆ THÔNG TIN Giảng viên hướng dẫn: ThS NGUYỄN LÊ MINH Sinh viên thực hiện: PHẠM HUỲNH HẢI YẾN Lớp: CƠNG NGHỆ THƠNG TIN Khố: 59 Tp Hồ Chí Minh, năm 2022 TRƯỜNG ĐẠI HỌC GIAO THƠNG VẬN TẢI CỘNG HỊA XÃ HỘI CHỦ NGHIÃ VIỆT NAM PHÂN HIỆU TẠI THÀNH PHỐ HỒ CHÍ MINH Độc lập – Tự – Hạnh phúc NHIỆM VỤ THIẾT KẾ TỐT NGHIỆP BỘ MÔN: CÔNG NGHỆ THÔNG TIN -*** - Mã sinh viên: 5951071125 Họ tên SV: Phạm Huỳnh Hải Yến Khóa: 59 Lớp: Công nghệ thông tin Tên đề tài XÂY DỰNG WEBSITE LƯU TRỮ TÀI LIỆU TÍCH HỢP TẠO CUỘC HỌP TRỰC TUYẾN CHO BỘ MÔN CÔNG NGHỆ THÔNG TIN Mục đích, yêu cầu a Mục đích − Xây dựng website lưu trữ tài liệu tích hợp học trực tuyến cho môn công nghệ thông tin b Yêu cầu − Tìm hiểu Nodejs Reactjs Library − Tìm hiểu HTML, CSS, Javascript − Lưu trữ tài liệu − Tạo họp trực tuyến Nội dung phạm vi đề tài a Nội dung đề tài − Xây dựng website gồm giao diện cho admin, giảng viên sinh viên ▪ Về giao diện admin: cho phép quản lý tài khoản sinh viên, giảng viên, quản lý môn học đồ án sinh viên ▪ Về giao diện giảng viên: cho phép quản lý tài liệu, quản lý lớp học tạo họp trực tuyến ▪ Về giao diện sinh viên: cho phép tìm kiếm, xem tải tài liệu, đăng tải đồ án, tập lớn tham gia họp b Phạm vi đề tài − Nghiên cứu xây dựng hệ thống lưu trữ tài liệu tạo họp trực tuyến Cơng nghệ, cơng cụ ngơn ngữ lập trình Phạm Huỳnh Hải Yến – K59 i a Công cụ sử dụng − Visual Studio Code version 1.66.1 − SQL Server version 18.8 b Công nghệ sử dụng − Reactjs version 18.0.0 − Redux version 8.0.1 − Nodejs version 14.6.1 c Ngơn ngữ lập trình − Javascript Các kết dự kiến đạt ứng dụng − Quyển báo cáo đề tài tốt nghiệp − Xây dựng đầy đủ chức cần thiết cho hệ thống Giảng viên cán hướng dẫn Họ tên: NGUYỄN LÊ MINH Đơn vị công tác: Bộ môn Công Nghệ Thông Tin – Trường Đại học Giao thông Vận tải phân hiệu TP HCM Điện thoại: Ngày tháng 06 năm 2022 Email: nlminh@utc2.edu.vn Đã giao nhiệm vụ TKTN Trưởng BM Công nghệ Thông tin Giảng viên hướng dẫn ThS Trần Phong Nhã ThS Nguyễn Lê Minh Đã nhận nhiệm vụ TKTN Sinh viên: Phạm Huỳnh Hải Yến Ký tên: Điện thoại: 0776989265 Email: 5951071125@st.utc2.edu.vn Phạm Huỳnh Hải Yến – K59 ii LỜI CẢM ƠN Lời nói đầu tiên, em xin gửi tới Quý thầy cô Bộ môn Công Nghệ Thông Tin, Ban Giám Hiệu Trường Đại học Giao thông Vận tải phân hiệu Thành phố Hồ Chí Minh lời chúc sức khỏe lời cảm ơn sâu sắc Với quan tâm dạy dỗ, bảo tận tình chu đáo thầy cơ, em hồn thành đề tài tốt nghiệp “Xây dựng website lưu trữ tài liệu tích hợp tạo họp trực tuyến cho môn công nghệ thông tin” Để hoàn thành nhiệm vụ giao này, nỗ lực học hỏi không ngừng thân cịn có hướng dẫn tận tình giảng viên năm vừa qua, đặc biệt hết nhờ có giảng viên Nguyễn Lê Minh, người hướng dẫn cho em hướng đi, truyền đạt cho em kiến thức, kỹ để em hồn thành đề tài tốt nghiệp Mặc dù cố gắng để hoàn thành đề tài, chắn khó tránh khỏi thiếu sót Em mong nhận đánh giá, góp ý Q thầy để em rút cho học, kinh nghiệm quý báu Sau cùng, em khơng biết nói ngồi kính chúc Quý thầy cô Bộ môn Công Nghệ Thông Tin đặc biệt thầy Nguyễn Lê Minh thật dồi sức khỏe ngày gặt hái nhiều thành công sống nghiệp giảng dạy Em xin chân thành cảm ơn! Phạm Huỳnh Hải Yến – K59 iii NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Tp Hồ Chí Minh, ngày ….… tháng ….… năm ….… Giảng viên hướng dẫn Nguyễn Lê Minh Phạm Huỳnh Hải Yến – K59 iv MỤC LỤC LỜI CẢM ƠN iii NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN iv MỤC LỤC v DANH MỤC CHỮ VIẾT TẮT vii DANH MỤC BẢNG BIỂU viii DANH MỤC HÌNH ẢNH ix CHƯƠNG MỞ ĐẦU 1.1 Tổng quan đề tài 1.2 Mục tiêu nghiên cứu 1.3 Phạm vi đề tài 1.4 Cấu trúc báo cáo đồ án tốt nghiệp CHƯƠNG CƠ SỞ LÝ THUYẾT .2 2.1 Giới thiệu HTML 2.2 Giới thiệu CSS 2.3 Giới thiệu Javascript 2.4 Giới thiệu Nodejs 2.5 Giới thiệu Express 2.6 Giới thiệu Reactjs 2.7 Giới thiệu Redux 2.8 Giới thiệu Firebase Cloud Storage 2.9 Giới thiệu Jitsi CHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .8 3.1 Phân tích hệ thống 3.1.1 Phân quyền admin 3.1.2 Phân quyền giảng viên 3.1.3 Phân quyền sinh viên Phạm Huỳnh Hải Yến – K59 v 3.2 Thiết kế hệ thống 10 3.2.1 Sơ đồ phân rã chức 10 3.2.2 Sơ đồ Usecase 11 3.2.3 Sơ đồ hoạt động 14 3.3 Thiết kế sở liệu 20 3.3.1 Mơ hình quan hệ thực thể 20 3.3.2 Các thực tể thuộc tính 20 CHƯƠNG XÂY DỰNG CHƯƠNG TRÌNH 24 4.1 Giao diện chức đăng nhập 24 4.2 Giao diện admin 24 4.2.1 Giao diện quản lý tài khoản sinh viên 24 4.2.2 Giao diện quản lý tài khoản giảng viên 25 4.2.3 Giao diện quản lý môn học 25 4.2.4 Giao diện quản lý đợt bảo vệ đồ án 26 4.3 Giao diện giảng viên 27 4.3.1 Giao diện quản lý tài liệu 27 4.3.2 Giao diện xem đồ án tốt nghiệp 28 4.3.3 Giao diện quản lý lớp học 29 4.4 Giao diện sinh viên 33 4.4.1 Giao diện tìm kiếm tài liệu 33 4.4.2 Giao diện nộp báo cáo đồ án 34 4.4.3 Giao diện lớp học 35 CHƯƠNG KẾT LUẬN VÀ KIẾN NGHỊ 39 5.1 Kết 39 5.2 Hạn chế 39 5.3 Hướng phát triển 39 TÀI LIỆU THAM KHẢO 40 Phạm Huỳnh Hải Yến – K59 vi DANH MỤC CHỮ VIẾT TẮT STT Từ viết tắt Ý nghĩa CNTT Công nghệ thông tin BM Bộ môn HTML Hypertext Markup Language CSS Cascading Style Sheets DOM Document Object Model URL Uniform Resource Locator Phạm Huỳnh Hải Yến – K59 Ghi vii DANH MỤC BẢNG BIỂU Bảng 3.1 Phân tích hệ thống Admin .8 Bảng 3.2 Phân tích hệ thống giảng viên Bảng 3.3 Phân tích hệ thống sinh viên Bảng 3.4 Thực thể tài khoản 20 Bảng 3.5 Thực thể sinh viên 21 Bảng 3.6 Thực thể giảng viên 21 Bảng 3.7 Thực thể môn học 21 Bảng 3.8 Thực thể tài liệu 21 Bảng 3.9 Thực thể đợt bảo vệ 22 Bảng 3.10 Thực thể đồ án 22 Bảng 3.11 Thực thể lớp học 22 Bảng 3.12 Thực thể sinh viên lớp học 23 Bảng 3.13 Thực thể tài liệu lớp học 23 Bảng 3.14 Thực thể tập lớn 23 Bảng 3.15 Thực thể tập lớn tham khảo 23 Phạm Huỳnh Hải Yến – K59 viii Hình 4.4 Giao diện quản lý môn học 4.2.4 Giao diện quản lý đợt bảo vệ đồ án Admin tạo đợt bảo vệ đồ án cách nhập thơng tin cần thiết Hình 4.5 Giao diện tạo đợt bảo vệ đồ án Sau tạo đợt bảo vệ, admin thêm sinh viên có đợt bảo vệ đồ án Có thể thêm thủ công sinh viên thêm nhiều sinh viên cách tải lên từ file excel Ngoài admin cịn chỉnh sửa xóa sinh viên Phạm Huỳnh Hải Yến – K59 26 Hình 4.6 Giao diện quản lý sinh viên đợt bảo vệ đồ án 4.3 Giao diện giảng viên 4.3.1 Giao diện quản lý tài liệu Giảng viên xem tài liệu cơng khai Hình 4.7 Giao diện xem tài liệu công khai Giảng viên thêm tài liệu cách nhập tên tài liệu, chọn môn học tải file lên Sau thêm, giảng viên chỉnh sửa quyền riêng tư công khai riêng tư tùy ý Những tài liệu riêng tư không hiển thị với người khác Ngồi giảng viên cịn xóa tài liệu Phạm Huỳnh Hải Yến – K59 27 Hình 4.8 Giao diện quản lý tài liệu Hình 4.9 Giao diện thêm tài liệu 4.3.2 Giao diện xem đồ án tốt nghiệp Giảng viên xem đồ án tất sinh viên Phạm Huỳnh Hải Yến – K59 28 Hình 4.10 Giao diện xem đồ án sinh viên 4.3.3 Giao diện quản lý lớp học Giảng viên nhập thông tin cần thiết để tạo lớp học Hình 4.11 Giao diện danh sách lớp học Phạm Huỳnh Hải Yến – K59 29 Hình 4.12 Giao diện tạo lớp học Giảng viên thêm tài liệu riêng tư vào lớp học, có sinh viên lớp học xem tài liệu riêng tư giảng viên Hình 4.13 Giao diện danh sách tài liệu riêng tư lớp học Phạm Huỳnh Hải Yến – K59 30 Hình 4.14 Giao diện thêm tài liệu riêng tư lớp học Giảng viên quản lý tập lớn lớp học Giảng viên xem tập lớn mà sinh viên nộp Bên cạnh đó, giảng viên cho phép sinh viên lớp học xem tập lớn học kỳ trước Hình 4.15 Giao diện danh sách sinh viên nộp tập lớn Phạm Huỳnh Hải Yến – K59 31 Hình 4.16 Giao diện cho phép tham khảo tập lớn Giảng viên thêm sinh viên vào lớp học cách chọn sinh viên tải sinh viên từ file excel Ngồi loại bỏ sinh viên khỏi lớp học Hình 4.17 Giao diện danh sách sinh viên lớp học Giảng viên vào lớp học trực tuyến lớp học, có nhiều chức hỗ trợ cho việc giảng dạy chia sẻ hình, nhắn tin, giơ tay phát biểu,… Phạm Huỳnh Hải Yến – K59 32 Hình 4.18 Giao diện lớp học trực tuyến 4.4 Giao diện sinh viên 4.4.1 Giao diện tìm kiếm tài liệu Sinh viên tìm kiếm tài liệu giảng viên công khai theo tên, theo môn học theo người đăng, bên cạnh sinh viên xem tải tài liệu máy để hỗ trợ cho việc học tập Hình 4.19 Giao diện tìm kiếm tài liệu Phạm Huỳnh Hải Yến – K59 33 Hình 4.20 Giao diện xem tải tài liệu 4.4.2 Giao diện nộp báo cáo đồ án Sau admin thêm vào đợt bảo vệ đồ án, sinh viên tự thay đổi tên đăng báo cáo đồ án Hình 4.21 Giao diện đồ án sinh viên Phạm Huỳnh Hải Yến – K59 34 Hình 4.22 Giao diện nộp đồ án 4.4.3 Giao diện lớp học Hiển thị tất lớp học sinh viên, sinh viên lọc theo học kỳ Hình 4.23 Giao diện danh sách lớp học sinh viên Sinh viên xem tài liệu riêng tư lớp học giảng viên cho phép, bên cạnh cịn xem tài liệu cơng khai môn học Phạm Huỳnh Hải Yến – K59 35 Hình 4.24 Giao diện xem tài liệu riêng tư lớp học Hình 4.25 Giao diện xem tài liệu công khai lớp học Sinh viên nộp tập lớn môn học giảng viên yêu cầu Phạm Huỳnh Hải Yến – K59 36 Hình 4.26 Giao diện nộp tập lón Sau nộp tập lớn, sinh viên chỉnh sửa tên xóa Hình 4.27 Giao diện nộp tập lớn Sinh viên tham khảo tập lớn giảng viên cho phép Phạm Huỳnh Hải Yến – K59 37 Hình 4.28 Giao diện tập lớn tham khảo Phạm Huỳnh Hải Yến – K59 38 CHƯƠNG KẾT LUẬN VÀ KIẾN NGHỊ 5.1 Kết Trong trình làm đồ án, em học nhiều kiến thức củng cố kiến thức cũ Kết em đạt : − Biết cách thiết kế sở liệu sử dụng công cụ SQL Server để tạo sở liệu, tạo ràng buộc liệu khai thác liệu phù hợp với chương trình − Biết cách sử dụng Visual Studio Code xây dựng chức website , tạo giao diện phù hợp với web, dễ dàng sử dụng Reactjs − Biết cách sử dụng Nodejs xử lý Backend website 5.2 Hạn chế Ngoài kết đạt được, website vấp phải nhiều hạn chế cần phải giải quyết: − Giao diện hệ thống thiết kế theo cảm tính cá nhân, chưa đẹp hoàn hảo − Tốc độ chạy chưa tối ưu − Chưa responsive 5.3 Hướng phát triển − Khắc phục hạn chế nêu − Tăng cường hệ thống bảo mật website − Thêm chức đăng video để phục vụ cho việc giảng dạy Phạm Huỳnh Hải Yến – K59 39 TÀI LIỆU THAM KHẢO [1] [Online], “React - Thư viện JavaScript để xây dựng giao diện người dùng”, Available: https://reactjs.org/, [Accessed 01/04/2022] [2] [Online], “Freetuts Team – Tự học Nodejs”, Available: https://freetuts.net/hoc-nodejs, [Accessed 17/04/2022] [3] [Online], “Jitsi Meet – Hướng dẫn tích hợp cho lập trình viên” Available: https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web, [Accessed: 17/05/2022] [4] Đh Bách Khoa Hn - Pgs.Ts Phạm Ngọc Nam, Phân Tích Thiết Kế Hướng Đối Tượng, 2007 [5] Jon Ducket, HTML & CSS: Design and Build Websites, 2011 Phạm Huỳnh Hải Yến – K59 40