Xây dựng web quản lý dựa trên Spring Boot và Angular

MỤC LỤC

TÍNH CẤP THIẾT CỦA ĐỀ TÀI

Ứng dụng mỏy tớnh trong việc quản lý thụng tin núi chung và trong lĩnh vực quản lý đề tài tiểu luận chuyên ngành và khóa luận tốt nghiệp ở các trường đại học cũng không nằm ngoài cuộc cách mạng này. Mỗi năm ở các trường đại học, những sinh viên năm cuối phải bước vào giai đoạn đăng ký tiểu luận chuyên ngành, khóa luận tốt nghiệp.

MỤC TIÊU ĐỀ TÀI

Ví dụ như có thể xảy ra sai sót trong việc đăng ký cũng như duyệt đề tài, quá trình sinh viên đăng ký tốn nhiều thời gian. Hệ thống là giải pháp thông minh, hiệu quả giúp giảm bớt áp lực, khó khăn cho sinh viên, giảng viên khi đến mùa làm đề tài.

PHƯƠNG PHÁP THỰC HIỆN

Công nghệ thông tin, các thiết bị máy tính ngày càng phát triển và được ứng dụng sâu trong các lĩnh vực đời sống xã hội. Vì vậy nhóm chúng em quyết định thực hiện đề tài: “Tìm hiểu Spring Boot, Angular và xây dựng web quản lý TLCN và KLTN”.

CƠ SỞ LÝ THUYẾT

  • Angular
    • Spring Boot
      • Cloud Storage for Firebase
        • Amazon EC2

          Html input thay đổi thì biến javascript sẽ ngay lập tức nhận được giá trị trả về và ngược lại, giá trị trong js thay đổi thì ngay lập tức màn hình html thay đổi theo.Để bind một chuỗi ra ngoài màn hình html thì rất đơn giản sử dụng 2 dấu ngoặc nhọn {{TenBien}}. Ví dụ như dùng EC2 để làm server cho trang web đăng ký môn học, khi vào đợt đăng ký môn học, ta tăng số lượng EC2 lên để tăng khả năng xử lý của trang web, khi kết thúc đợt đăng ký môn học, ta giảm số lượng EC2, từ đó tối ưu chi phí bởi vì nếu sử dụng server vật lý, ta cần một server có phần cứng mạnh nhưng chỉ chạy khoảng 1 -2 tuần còn thời gian còn lại thì để trống, trong khi với EC2, ta có thể tăng, giảm số máy EC2 theo nhu cầu.

          Hình  1.5 Các ứng dụng của Spring Boot [10]
          Hình 1.5 Các ứng dụng của Spring Boot [10]

          KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ

          Phân tích hiện trạng

          Phân tích yêu cầu của dự án

            1 Quản lý cấu hình Thêm, xóa, sửa và lưu các thông tin về cấu hình: Id, số lượng SV tối đa, còn hoạt động hay không, thời gian SV bắt đầu đăng ký, thời gian SV kết thúc đăng ký, Id loại đề tài, niên khóa, học kỳ, năm học bắt đầu học kỳ, năm học kết thúc học kỳ, thời gian GV hướng dẫn (GVHD) bắt đầu đăng ký, thời gian GVHD kết thúc đăng ký, thời gian bắt đầu nhập GV phản biện (GVPB), thời gian kết thúc nhập GVPB, số lượng GVPB tối đa, số lượng GVHD tối đa, thời gian SV bắt đầu nộp báo cáo, thời gian SV kết thúc nộp báo cáo, thành viên có được đăng ký hay không, điểm để đạt TB, điểm để đạt Khá, điểm để đạt Giỏi, ngày cập nhật, Id thư mục drive, thời gian bắt đầu duyệt đề tài, thời gian kết thúc duyệt đề tài. 2 Quản lý đề tài Thêm, xóa, sửa và lưu các thông tin về đề tài: Id, tên đề tài, mục tiêu, yêu cầu, chú thích, thời gian bắt đầu bảo vệ, thời gian kết thúc bảo vệ, chuyên ngành, trạng thái, trưởng nhóm, sản phẩm, Id cấu hình, bị xóa hay không, có được đăng ký khác chuyên ngành hay không, link source code, link tệp tin word báo cáo, link powerpoint báo cáo, GVHD, GVPB, Phòng bảo vệ, Nội dung phản biện, được duyệt hay không, số lượng SV.

            Mễ HèNH HểA YấU CẦU

            Danh sách các tác nhân và chức năng của hệ thống

            Mễ HèNH HểA YấU CẦU. điện thoại), thêm giảng viên, thêm sinh viên, xem chi tiết (lưu thông tin, reset mật khẩu, khóa tài khoản), thêm người dùng mới. + Trang quản trị chung: quản trị chuyên ngành (thêm xóa sửa), quản trị lớp (thêm xóa sửa), quản trị niên khóa (thêm xóa sửa).

            Lược đồ chức năng (Usecase diagram)

              + Trang quản trị đề tài: thêm danh sách đề tài, xóa danh sách đề tài, thêm đề tài, hiển thị danh sách đề tài, xuất excel. + Trang duyệt đề tài: hiển thị đề tài theo loại đề tài (tên giảng viên, số đề tài, số đề tài được duyệt).

              Hình  3.2 Usecase Diagram Actor SinhVien
              Hình 3.2 Usecase Diagram Actor SinhVien

              Đặc tả Usecase

                Description Chức năng này cho phép QuanTriVien xem qua thống kê số lượng đề tài của từng giảng viên trên hệ thống, QuanTriVien có thể nhấn chọn tên giảng viên để xem danh sách đề tài của họ, chọn xem chi tiết từng đề tài và duyệt qua các đề tài mà giảng viên đề xuất và đủ tiêu chí về sinh viên, chất lượng đề tài để cho sinh viên đăng ký thực hiện. Nếu ở bước 3 QuanTriVien chọn cập nhật thì tab cấu hình hiện tại mở ra, QuanTriVien sau khi chỉnh sửa sẽ nhấn “Lưu” để lưu lại thông tin Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi. Alternate Flow Nếu ở bước 3 người dùng chọn xóa danh sách thì thông báo xác nhận hiện ra, nếu người dùng chọn “Đồng ý” thì danh sách sinh viên bị xóa Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi.

                Post-conditions Danh sách đề tài được cập nhật mới sau khi tác vụ thành công Main Scenario - B1: Người dùng nhấn chọn mục Quản lý đề tài ở danh mục. Post-conditions Thêm mới thành công đề tài mới vào hệ thống của giảng viên này Main Scenario - B1: Người dùng nhấn chọn mục Quản lý đề tài ở danh mục. Alternate Flow Nếu đã đủ số lượng sinh viên yêu cầu đề tài sẽ hiển thị thông báo Nếu Sinh viên không có trong cấu hình sinh viên sẽ thông báo.

                THIẾT KẾ PHẦN MỀM

                Lược đồ tuần tự

                  THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ

                  Trang chủ

                  11 Thời gian hệ thống Thời gian thực trên hệ thống Người dùng: Quản trị viên, SinhVien, GiangVien.

                  Đăng nhập

                  Quên mật khẩu

                  Khôi phục mật khẩu

                  Xem chi tiết thông báo

                  Danh sách loại đề tài

                  Danh sách đề tài

                  Xem chi tiết đề tài

                  8 Số lượng sinh viên Số lượng sinh viên có thể tham gia làm đề tài. Đối với đề tài này, sinh viên khác chuyên ngành có thể thực hiện đăng ký. 14 Giảng viên phản biện Giảng viên chấm đề tài Người dùng: Quản trị viên, SinhVien, GiangVien.

                  Thông tin giảng viên

                  3 Label Tổng số giảng viên Số giảng viên tìm thấy theo chuyên ngành 4 Table Danh sách giảng viên Danh sách giảng viên tìm thấy theo chuyên.

                  Thông tin sinh viên

                  1 Combobox chuyên ngành Chọn chuyên ngành mà bạn muốn tìm kiếm thông tin sinh viên. 2 Combobox niên khóa Chọn niên khóa mà mà bạn muốn tìm kiếm thông tin sinh viên. 3 Button tìm kiếm Nhấn “Tìm kiếm” để lọc danh sách sinh viên 4 Label tổng số sinh viên tìm thấy Số sinh viên tìm thấy theo chuyên ngành và.

                  5 Table danh sách sinh viên Danh sách sinh viên lọc được theo lựa chọn Người dùng: Quản trị viên, SinhVien, GiangVien.

                  Hướng dẫn đăng ký

                  Thống kê sinh viên

                  Thống kê đề tài

                  Thống kê giảng viên

                  Tìm kiếm đề tài

                  Tìm kiếm sinh viên

                  Tìm kiếm giảng viên

                  Quản trị tài khoản sinh viên

                  Thông tin đăng nhập

                  Đổi thông tin cá nhân

                  Đổi mật khẩu

                  Xem danh sách loại đề tài đăng ký

                  Đăng ký đề tài

                  2 Đăng ký đề tài Nếu đề tài chưa có ai đăng ký thì sinh viên có thể thực hiện đăng ký đề tài. 3 Xin vào nhóm Nếu đề tài đã có người đăng ký nhưng còn thiếu thành viên thì hiển thị xin vào nhóm Người dùng: SinhVien.

                  Quản lý nhóm

                  Thêm thành viên vào nhóm

                  Duyệt xin vào nhóm

                  2 Button duyệt xin vào nhóm Duyệt sinh viên vào nhóm, nếu đã đủ số lượng sẽ hiển thị thông báo “ đã đủ số lượng”.

                  Học tập

                  Sửa bài nộp

                  Xem đánh giá

                  Giảng viên quản trị đề tài

                  Quản trị nhóm – đề tài

                  Thành viên nhóm

                  Thêm nhiệm vụ

                  Sửa nhiệm vụ

                  1 Cập nhật tiêu đề nhiệm vụ 2 Cập nhật nội dung yêu cầu 3 Chọn hạn nộp nhiệm vụ.

                  Đánh giá

                  Tải xuống tệp tin đã nộp

                  Quản trị hệ thống

                  Quản trị thông báo

                  Thêm thông báo

                  Cập nhật thông báo

                  Quản trị cấu hình

                  Thêm cấu hình

                  11 Thời gian bắt đầu nộp đề tài 12 Thời gian kết thúc nộp đề tài 13 Thời gian duyệt đề tài 14 Thời gian kết thúc duyệt đề tài. 19 Button reset Reset giá trị null cho các trường giá trị Người dùng: Quản trị viên.

                  Cập nhật cấu hình

                  120 6 Input số lượng sinh viên tối đa 7 Thời gian giảng viên đăng ký 8 Thời gian giảng viên kết thúc. 18 Button cập nhật Sau khi chỉnh sửa thông tin các ô thì nhất chọn để cập nhật.

                  Sinh viên - cấu hình

                  1 Xóa danh sách sinh viên Xóa toàn bộ danh sách sinh viên trong cấu hình này.

                  Thêm Sinh viên - cấu hình

                  Quản trị người dùng

                  Thêm người dùng mới

                  Tải lên danh sách người dùng

                  Quản trị đề tài

                  Thêm đề tài

                  8 Số lượng sinh viên Số lượng sinh viên có thể đăng ký làm đề tài.

                  Sửa đề tài

                  Tải lên danh sách đề tài

                  1 Tải xuống tệp tin mẫu đề tài Đối với tải danh sách đề tài sẽ có ở tài khoản QuanTriVien và tài khoản giảng viên, tên và cấu trúc tệp tin mẫu sẽ khác. Lưu ý tệp tin danh sách đề tài của giảng viên và tệp tin danh sách đề tài của.

                  Xuất excel danh sách đề tài Quản trị viên

                  Xuất excel danh sách đề tài giảng viên

                  Xuất excel danh sách nhiệm vụ

                  Quản trị chung – niên khóa

                  Thêm niên khóa

                  Cập nhật niên khóa

                  Quản trị chung – lớp

                  Thêm lớp

                  Cập nhật lớp

                  Quản trị chung – chuyên ngành

                  Thêm chuyên ngành

                  Cập nhật chuyên ngành

                  Duyệt đề tài

                  CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

                  • Cài đặt
                    • NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
                      • ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

                        ● Hiờ̉u được rừ cỏch viết cỏc APIs và phỏt triờ̉n server back-end bằng Spring boot, Java Core và hệ quản trị cơ sở dữ liệu SQL Server. ● Học và tiếp thu được nhiều kiến thức mới: material trên Angular, check format phoneNumber, Email,…CKEditor, JWT, Security ,…. + Quản trị đề tài + Quản trị tài khoản + Quản trị nhóm- đề tài + Thêm danh sách đề tài + Xuất excel danh sách đề tài + Xuất excel danh sách nhiệm vụ + Tải xuống tệp tin bài làm + Đánh giá bài làm sinh viên.

                        ● Giảng viờn tạo đề tài cho sinh viờn đăng ký, dễ dàng quản lý, theo dừi tiến độ sinh viên, kịp thời đánh giá nhận xét. ● Nhờ có sự hướng dẫn nhiệt tình của thầy Nguyễn Hữu Trung cũng như các thầy cô trong Khoa Công Nghệ Thông Tin trường Đại học Sư Phạm Kỹ Thuật giúp đỡ nhóm trong thời gian thực hiện đề tài. ● Angular là một công nghệ khá mới, chưa được học tại trường, đòi hỏi tính tự nghiên cứu, học hỏi nhiều, nên việc tìm kiếm các giải pháp cũng như các lời giải cho các bài toán phát sinh trong quá trình phát triển phần mềm gây ít trở ngại cho nhóm.

                        Hình  6.2 Chọn đường dẫn đến thư mục được giải nén
                        Hình 6.2 Chọn đường dẫn đến thư mục được giải nén