Tìm hiểu về reactjs và xây dựng website quản lý đăng ký môn học và học phí

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN LÊ TẤN KHOA – 18520926 ĐỒ ÁN TÌM HIỂU VỀ REACTJS VÀ XÂY DỰNG WEBSITE QUẢN LÝ ĐĂNG KÝ MƠN HỌC VÀ HỌC PHÍ GVHD: ThS HUỲNH TUẤN ANH THÀNH PHỐ HỒ CHÍ MINH – 12/2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN LÊ TẤN KHOA – 18520926 ĐỒ ÁN TÌM HIỂU VỀ REACTJS VÀ XÂY DỰNG WEBSITE QUẢN LÝ ĐĂNG KÝ MƠN HỌC VÀ HỌC PHÍ GVHD: ThS HUỲNH TUẤN ANH THÀNH PHỐ HỒ CHÍ MINH – 12/2022 LỜI CẢM ƠN Đầu tiên, em xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM quý Thầy Cô khoa Công nghệ phần mềm trang bị cho nhóm kiến thức tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới Thầy Huỳnh Tuấn Anh, người trực tiếp tận tình hướng dẫn em suốt trình thực đồ án Không gợi ý tận tâm hướng dẫn em trình tìm hiểu, đọc tài liệu, Thầy cịn tận tình bảo em kĩ phân tích, khai thác tài liệu để có tư liệu phù hợp với nội dung đồ án Hơn nữa, Thầy cịn nhiệt tình việc đốc thúc trình viết báo cáo, đọc đưa nhận xét, góp ý để em hoàn thành báo cáo đồ án cách tốt Nếu khơng có lời hướng dẫn, dạy bảo Thầy thu hoạch khó hoàn thiện Một lần nữa, em xin chân thành cảm ơn Thầy Đề tài nhóm thực thời gian khoảng tháng nên bước đầu vào thực tế, tìm hiểu lĩnh vực nghiên cứu khoa học, kiến thức kinh nghiệm thực tiễn em hạn chế nhiều bỡ ngỡ Do vậy, khơng tránh khỏi thiếu sót điều chắn, nhóm mong nhận bảo, ý kiến đóng góp quý báu quý Thầy Cơ bạn học lớp để em có điều kiện bổ sung, nâng cao kiến thức lĩnh vực này, giúp hồn thiện tích lũy thêm cho thân nhiều kinh nghiệm, phục vụ tốt cho công việc thực tế sau Cuối cùng, em xin gửi đến ba mẹ, gia đình bạn bè lời cảm ơn, tri ân chân thành lịng biết ơn sâu sắc động viên, ủng hộ, giúp đỡ cổ vũ tinh thần cho em suốt trình vừa qua Em xin chân thành cảm ơn! Nhóm sinh viên thực hiện: Nguyễn Lê Tấn Khoa NHẬN XÉT CỦA GIẢNG VIÊN TP HCM, ngày… tháng … năm …… Giảng viên hướng dẫn ThS Huỳnh Tuấn Anh ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP HCM, ngày… tháng … năm ……… ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Tìm hiểu ReactJs Xây dựng website quản lý đăng ký mơn học học phí Cán hướng dẫn: ThS HUỲNH TUẤN ANH Thời gian thực hiện: Từ ngày 05/09/2022 đến ngày 28/12/2022 Sinh viên thực hiện: Nguyễn Lê Tấn Khoa - 18520926 Nội dung đề tài: Giới thiệu: Với lên áp dụng công nghệ đời sống - xã hội nay, cơng nghệ hóa vấn đề sống dường điều hiển nhiên Công nghệ hóa chìa khóa để cơng việc thực dễ dàng, hiệu quả, nhanh chóng an tồn Chính để bắt kịp xu thế, tiết kiệm thời gian tiền bạc, ngành nghề dần chuyển sang sử dụng công nghệ thay sức người, trường học khơng ngoại lệ Trong phạm vi này, nhóm nghiên cứu phát triển “Website quản lý đăng ký môn học học phí” để dễ đáp ứng nhu cầu trình quản lý đăng ký mơn học học phí cho sinh viên cách tiện lợi, tiết kiệm sức lực thời gian Mục tiêu:  Xây dựng hệ thống gồm chức bản: o Quản lý sinh viên, mơn học, học phí theo kì o Cho phép sinh viên thực thao tác đăng ký, xóa bỏ mơn học đăng ký o Thống kê, cập nhật tình trạng học phí  Xây dựng hệ thống phần mềm hình thức website  Chia làm luồng: quản trị thành viên Phạm vi:  Phạm vi môi trường: o  Triển khai sản phẩm đề tài môi trường web Phạm vi chức năng: o Quản lý môn học o Quản lý người sử dụng (sinh viên) o Quản lý thông tin học phí sinh viên theo kì o Thanh tốn học phí o Xác nhận tốn học phí Đối tượng:  Sinh viên nhà trường Phương pháp thực hiện:  Xây dựng hệ thống database với Postgresql  Xây dựng hệ thống Restful API với Java Công nghệ:  Front-end: ReactJs  Back-end: Java  Database: Postgresql Kết mong đợi  Nắm bắt áp dụng công nghệ để xây dựng sản phẩm đề tài  Hiểu rõ nghiệp vụ, chức website quản lý đăng ký môn học  Áp dụng kiến thức học phân tích thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, quản lý triển khai dự án phần mềm để xây dựng website sản phẩm đề tài  Hoàn thiện ứng dụng quản lý đăng ký môn học, đáp ứng đủ nhu cầu  Có thể thay đổi giao diện cách linh động mở rộng thêm chức cho website sản phẩm đề tài để phù hợp với nhu cầu thực tiễn tương lai + Kế hoạch thực hiện: Thời gian Nội dung Phân cơng cơng việc 05/09/2022 Tìm hiểu đề tài, đánh giá thị Nguyễn Lê Tấn Khoa – trường, xác định chức 18/09/2022 hệ thống 19/09/2022 – Tìm hiểu, nghiên cứu cơng Nguyễn Lê Tấn Khoa nghệ 09/10/2022 10/10/2022 – Phân tích thiết kế hệ Nguyễn Lê Tấn Khoa thống website 30/10/2022 31/10/2022 – Xây dựng phát triển ứng Nguyễn Lê Tấn Khoa: dụng - Tìm hiểu UI, UX thiết kế giao 11/12/2022 diện cho website - Cài đặt chức năng, xử lý hệ thống 12/12/2022 – Kiểm thử hệ thống hoàn Nguyễn Lê Tấn Khoa: thiện báo cáo kiểm thử sửa lỗi 28/12/2022 Xác nhận CBHD TP HCM, ngày … tháng … năm … (Ký tên ghi rõ họ tên) Sinh viên (Ký tên ghi rõ họ tên) Nguyễn Lê Tấn Khoa ThS Huỳnh Tuấn Anh MỤC LỤC CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI .6 1.1 LÝ DO CHỌN ĐỀ TÀI .6 1.2 MỤC TIÊU 1.3 PHẠM VI .6 1.4 ĐỐI TƯỢNG SỬ DỤNG 1.5 KẾT QUẢ DỰ KIẾN CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 JAVA (SPRINGBOOT FRAMEWORK) 2.1.1 Khái niệm 2.1.2 Tại nên sử dụng Java 2.1.3 Áp dụng Java vào đề tài 2.2 POSTGRESQL DATABASE 2.2.1 Giới thiệu postgresql 2.2.2 Tại nên sử dụng hệ quản trị sở liệu Postgresql .9 2.2.3 Áp dụng Postgresql vào đề tài .10 2.3 REACTJS .10 2.3.1 Giới thiệu Reactjs .10 2.3.2 Tại nên sử dụng Reactjs 11 CHƯƠNG 3: MƠ HÌNH USE CASE HỆ THỐNG .13 3.1 SƠ ĐỒ USE CASE TỔNG QUÁT .13 3.2 DANH SÁCH CÁC ACTOR 14 3.3 DANH SÁCH CÁC USE CASE 14 3.4 ĐẶC TẢ USE CASE 15 3.4.1 Đặc tả Use Case “Quản Lý Dữ Liệu” 15 3.4.2 Đặc tả Use Case “Thông tin cá nhân” 22 3.4.3 Đặc tả Use Case “Đăng Nhập” .23 3.4.4 Đặc tả Use Case “Quản Lý Học Phí” 24 3.4.5 Đặc tả Use Case “Thanh Tốn Học Phí” 28 3.4.6 Đặc tả Use Case “Đăng Ký Lớp Học” 29 3.4.7 Đặc tả Use Case “Mở Lớp Học” 30 3.4.8 Đặc tả Use Case “Thống Kê Lịch Làm Việc” 32 CHƯƠNG 4: PHÂN TÍCH THIẾT KẾ HỆ THỐNG VÀ HIỆN THỰC 33 4.1 THIẾT KẾ CƠ SỞ DỮ LIỆU 33 4.1.1 SƠ ĐỒ LOGIC 33 4.1.2 MÔ TẢ CHI TIẾT CẢ KIỂU DỮ LIỆU TRONG SƠ ĐỒ LOGIC .34 4.1.2.1 Bảng “user” – Tài Khoản người dùng 34 4.1.2.2 Bảng “role” – Quyền, vai trò 35 4.1.2.3 Bảng “lecturer” – Thông tin giảng viên 35 4.1.2.4 Bảng “student” – Thông tin sinh viên 36 4.1.2.5 Bảng “course” – Thơng tin mơn học (Khóa học) 37 4.1.2.6 Bảng “semester” – Thơng tin học kì .38 4.1.2.7 Bảng “class_room” – Thơng tin lớp học (Phịng học) 39 4.1.2.8 Bảng “open_course” – Đăng kí mở lớp học(Dành cho giảng viên) .40 4.1.2.9 Bảng “student_course” – Đăng kí lớp học (Dành cho sinh viên) 41 4.1.2.10 Bảng “tuition_fee” – Bảng giao dịch học phí 42 4.2 CÁC SƠ ĐỒ VÀ LUỒNG HOẠT ĐỘNG 43 4.2.1 ĐĂNG NHẬP .43 4.2.1.1 Mô tả .43 4.2.1.2 Sơ đồ hoạt động 43 4.2.1.3 Sơ đồ 44 4.2.2 ĐĂNG KÍ MƠN HỌC .44 4.2.2.1 Mô tả .44 4.2.2.2 Sơ đồ hoạt động 45 4.2.2.3 Sơ đồ 45 4.2.3 THANH TOÁN HỌC PHÍ 46 4.2.3.1 Mô tả .46 Hình 21 Màn hình “Thơng tin cá nhân” Bước Hành động tác nhân Click chức Thông tin cá Hiển thị trang thông tin sinh nhân Xử lý hệ thống viên gồm: thông tin cá nhân, thông tin học vụ Click Chỉnh sửa thông tin Hiển thị trang thông tin sửa Bảng 14 Danh sách chức hình “Thơng tin cá nhân” 4.3.5 Màn hình “Tổng quan” QTV 56 Hình 22 Màn hình “Tổng quan” Bước Hành động tác nhân Xử lý hệ thống Click chức Tổng quan Hiển thị trang tổng quan thống kê thông tin về: Lớp ngày, Lớp tuần, Sinh viên ngày, Bảng 15 Danh sách chức hình “Tổng quan” 57 4.3.6 Màn hình “Lịch làm việc” QTV Hình 23 Màn hình “Lịch làm việc” Bước Hành động tác nhân Xử lý hệ thống Click chức Lịch làm việc Hiển thị trang lịch làm việc Click Month Hiển thị thông tin số ca học theo tháng Nhập Tên lớp Click Tìm kiếm Nhập Khóa học Click Tìm kiếm Hiển thị thơng tin tìm kiếm lịch Click chuyển lịch Hiển thị trang thông tin lịch theo thời Hiển thị thông tin tìm kiếm lịch gian Bảng 16 Danh sách chức hình “Lịch làm việc” 58 4.3.7 Màn hình “Quản Lý Sinh Viên” Hình 24 Màn hình “Quản lý sinh viên” Bước Hành động tác nhân Xử lý hệ thống Click chức Quản lý người Hiển thị trang danh sách sinh viên dùng -> Sinh viên Click sort trường liệu Hiển thị danh sách xếp tăng dần giảm dần Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm sinh viên Nhập thông tin Click OK Hiển thị thông tin thêm danh sách Click Xem chi tiết Hiển thị thông tin chi tiết sinh viên Bảng 17 Danh sách chức hình “Quản lý sinh viên” 59 4.3.8 Màn hình “Quản Lý Giảng Viên” Hình 25 Màn hình “Quản lý giảng viên” Bước Hành động tác nhân Xử lý hệ thống Click chức Quản lý Hiển thị trang danh sách giảng viên người dùng -> Giảng viên Click sort trường Hiển thị danh sách xếp tăng liệu dần giảm dần Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm giảng viên Nhập thông tin Click OK Hiển thị thông tin thêm danh sách Click Xem chi tiết Hiển thị thông tin chi tiết giảng viên Bảng 18 Danh sách chức hình “Quản lý giảng viên” 60 4.3.9 Màn hình “Quản Lý Mơn Học” Hình 26 Màn hình “Quản lý mơn học” Bước Hành động tác nhân Xử lý hệ thống Click chức Quản lý Hiển thị trang danh sách môn học mở môn học Click sort Hiển thị danh sách xếp tăng dần trường liệu giảm dần Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm môn học Nhập thông tin Click OK Hiển thị thông tin thêm danh sách Click Sửa Hiển thị trang thông tin sửa mở môn học Nhập thông tin 10 Click OK 11 Click Xóa Hiển thị thơng báo 12 Click OK Hiển thị trang thơng tin xóa danh sách thành 61 công Bảng 19 Danh sách chức hình “Quản lý mơn học” 4.3.10 Màn hình “Quản Lý Học Kì” Hình 27 Màn hình “Quản lý học kì” Bước Hành động tác nhân Xử lý hệ thống Click chức Quản lý Hiển thị trang danh sách học kì mở học kì Click sort Hiển thị danh sách xếp tăng dần trường liệu giảm dần Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm học kì Nhập thơng tin Click OK Hiển thị thông tin thêm danh sách Click Sửa Hiển thị trang thơng tin sửa mở học kì Nhập thơng tin 10 Click OK 11 Click Xóa Hiển thị thông báo 62 12 Hiển thị trang thông tin xóa danh sách thành Click OK cơng Bảng 20 Danh sách chức hình “Quản lý học kì” 4.3.11 Màn hình “Đăng Ký Mở Lớp Học” Hình 28 Màn hình “Đăng ký mở lớp học” Bước Hành động tác nhân Click chức Đăng ký Hiển thị trang danh sách lớp học mở Xử lý hệ thống mở lớp Click sort trường Hiển thị danh sách xếp tăng dần liệu giảm dần Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm lớp học Nhập thông tin Click OK Hiển thị thông tin thêm danh sách Click Sửa Hiển thị trang thông tin sửa mở lớp học Nhập thông tin 10 Click OK 63 11 Click Xóa Hiển thị thơng báo 12 Click OK Hiển thị trang thông tin xóa danh sách thành cơng Bảng 21 Danh sách chức hình “Đăng ký mở lớp học” 4.3.12 Màn hình “Quản Lý Lớp Học – Phịng Học” Hình 29 Màn hình “Quản lý lớp học” Bước Hành động tác nhân Xử lý hệ thống Click chức Quản lý Hiển thị trang danh sách lớp học mở lớp học Click sort trường Hiển thị danh sách xếp tăng dần liệu giảm dần Nhập thông tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Thêm Xuất trang điền thông tin thêm lớp học Nhập thông tin Click OK Hiển thị thông tin thêm danh sách Click Sửa Hiển thị trang thông tin sửa mở lớp học 64 Nhập thông tin 10 Click OK 11 Click Xóa Hiển thị thơng báo 12 Click OK Hiển thị trang thơng tin xóa danh sách thành công Bảng 22 Danh sách chức hình “Quản lý lớp học” 4.3.13 Màn hình “Xác nhận Học phí chờ” Hình 30 Màn hình “Xác nhận học phí chờ” Bước Hành động tác nhân Xử lý hệ thống Click chức Hệ thống hiển thị chức (Danh sách học phí chờ Danh sách tất học phí) Click chức Danh sách Hiển thị trang danh sách học học phí chờ phí chờ duyệt toán Click sort trường Hiển thị danh sách xếp tăng dần giảm dần liệu 65 Nhập thơng tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm Click Xác nhận/Hủy bỏ Hiển thị trang thông báo Xác nhân/Hủy bỏ thành cơng Bảng 23 Diễn giải hình “Xác nhận học phí chờ” 4.3.14 Màn hình “Quản lý danh sách học phí” Hình 31 Màn hình “Quản lý danh sách học phí” Bước Hành động tác nhân Click chức Danh sách Hiển thị trang danh sách học phí chưa hồn thành tất học phí Xử lý hệ thống Click sort trường Hiển thị danh sách xếp tăng dần giảm dần liệu Nhập thông tin tìm kiếm Click Tìm kiếm Hiển thị danh sách tìm kiếm 66 Click Xác nhận/Hủy bỏ Hiển thị trang thông báo Xác nhân/Hủy bỏ thành công Bảng 24 Diễn giải hình “Quản lý danh sách học phí” Chương 5: KẾT LUẬN VÀ HƯỚNG MỞ RỘNG 5.1 Đánh giá 5.1.1 Thuận lợi - Nhận giúp đỡ tư vấn tận tình từ giảng viên bạn bè, nhờ nhóm có hướng đắn để thực đề tài - Vận dụng kiến thức học để áp dụng vào đề tài đồ án - Nhiều tài liệu tham khảo đa dạng, phong phú hỗ trợ trình tìm hiểu, nghiên cứu cơng nghệ 5.1.2 Khó khăn - Cịn bỡ ngỡ tiếp cận với công nghệ React JS, Spring Boot nên gặp nhiều khó khăn việc học hỏi tốn nhiều thời gian thử nghiệm bình thường - Khơng có q nhiều mẫu ứng dụng để tham khảo trình nghiên cứu đề tài 5.2 Kết luận 5.2.1 - Kết đạt Kết thúc mơn học, nhóm tìm hiểu hoàn thành ứng dụng tương đối hoàn chỉnh Với hướng dẫn từ Thầy, kiến thức mà Thầy cung cấp, chúng em áp dụng design pattern tốt quy chuẩn phát triển ứng dụng để có ứng dụng tốt - Trong khoảng thời gian hạn chế, nhóm phát triển phần mềm tương đối hoàn thiện Phần mềm đáp ứng tốt chức 67 người sử dụng thông thường việc đăng ký mơn học, tạo lệnh tốn học phí, quản trị lớp học, sinh viên, học kỳ, phòng học, … 68 5.2.2 - Ưu điểm Phần mềm phát triển dựa ngơn ngữ lập trình Java, ứng dụng nhẹ, chạy nhanh - Giao diện ứng dụng thân thiện, dễ sử dụng Nhóm đưa thiết kế sau tham khảo nhiều ứng dụng khác nhau, ứng dụng phù hợp với thói quen người sử dụng - Phân chia quyền rõ ràng, đơn giản cho việc kiểm duyệt nâng cao tính bảo mật 5.2.3 Nhược điểm - Vẫn tồn số lỗi tiềm ẩn - Quản lý sinh viên giảng viên chưa rõ ràng Hướng mở rộng 5.3 - Phát triển thêm nhiều quyền để phân chia rõ ràng cho phận khác - Cải thiện thêm UI/UX - Hỗ trợ đa ngôn ngữ - Hỗ trợ khả realtime đăng ký học phần - Hoàn thiện chức có, cho phép người dùng tìm kiếm liệu mong muốn dễ dàng 69 TÀI LIỆU THAM KHẢO [1] Robert C.Martin and Micah Martin (2006), Agile Principles, Patterns, and Practices in C#, Prentice Hall, United States [2] Robert C.Martin (2008), Clean Code A Handbook of Agile Software Craftsmanship, Prentice Hall, United States [3] React JS - React Tutorial for Beginners (19/9/2022): https://www.youtube.com/watch?v=Ke90Tje7VS0 [4] Spring Boot Tutorial | Full Course [2021] [NEW] (28/9/2022): https://www.youtube.com/watch?v=9SGDpanrc8U [5] W3School – React Tutorial (22/9/2022): https://www.w3schools.com/REACT/DEFAULT.ASP [6] W3School – PostgreSQL Tutorial (1/10/2022): https://www.w3schools.blog/postgresql-tutorial [7] Tài liệu Postgresql (1/10/2022): https://www.postgresql.org/ [8] Tài liệu Java (29/9/2022): https://www.javatpoint.com/java-tutorial [9] Tài liệu JavaScript (21/9/2022): https://javascript.info/37 [10] Tài liệu React (22/9/2022): https://reactjs.org/docs/getting-started.html 70 ... hệ Quản lý thêm xóa giảng viên thống 11 Quản lý môn học Quản lý môn học hệ thống 12 Quản lý học kì Quản lý học kì hệ thống 13 Quản lý lớp học( phịng học) Quản lý phòng học hệ thống 14 Đăng ký. .. học Đăng ký mở lớp học học kì 15 Duyệt danh sách học phí sinh viên Duyệt học phí để xác nhận sinh viên tốn 16 tốn học phí Quản lý tồn danh sách học phí Quản lý học phí sinh viên đăng ký mơn học. .. Đăng nhập Đăng nhập vào hệ thống Đăng xuất Đăng xuất khỏi hệ thống Đăng ký môn học Đăng ký môn học theo học kì cho sinh viên Kiểm tra, quản lý mơn học đăng Kiểm tra, thêm xóa sửa mơn học ký đăng