Tìm hiểu spring boot, angular và xây dựng web quản lý tlcn và kltn

Chúng ta đang sống trong thời đại bùng nổ thông tin. 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. Nhiều công nghệ cũ được thay thế bằng các công nghệ mới hơn với những ưu điểm và sự tiện ích rõ nét. Ứ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. Có không ít những khó khăn, bất cập cho cả giảng viên, sinh viên trong việc đăng ký đề tài, quản lí đề 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. 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”. 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.

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

Chúng ta đang sống trong thời đại bùng nổ thông tin 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 Nhiều công nghệ cũ được thay thế bằng các công nghệ mới hơn với những ưu điểm và sự tiện ích rõ nét Ứ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 Có không ít những khó khăn, bất cập cho cả giảng viên, sinh viên trong việc đăng ký đề tài, quản lí đề 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 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” 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.

MỤC TIÊU ĐỀ TÀI

● Xây dựng web quản lý TLCN và KLTN

● Vận dụng các công công nghệ mới, ngôn ngữ lập trình hiện đại vào để xây dựng website của đề tài.

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

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu các thư viện hỗ trợ cho đề tài ở Angular và Spring Boot

CƠ SỞ LÝ THUYẾT

Angular

Hình 1.1 Logo của ngôn ngữ lập trình Angular [1]

Angular, developed by Google, is a JavaScript framework for building Single Page Applications (SPAs) using JavaScript, HTML, and TypeScript It offers built-in capabilities for animation and HTTP services, along with features like auto-complete, navigation, toolbars, and menus Code written in TypeScript is compiled into JavaScript for optimal performance.

• Angular Js: Phiên bản đầu tiên của angular là AngularJS được bắt đầu từ năm

2009 và đc ra mắt vào 20/10/2010, do lập trình viên Misko Hevery tại Google viết ra

• Angular 2: Đơn giản hóa và tối ưu cho quá trình phát triển sử dụng framework này Angular 2 thay đổi hoàn toàn so với angular js bằng việc thay Controllers và

$scope ( Angular js ) bằng components và directives Components = directives + template , tạo nên view của ứng dụng và xử lí các logic trên view Angular 2 hoàn toàn được viết bằng Typescript

• Angular 4: là một phiên bản nâng cấp từ Angular 2, giúp giảm thiểu code

• Angular 5: Sử dụng HTTPClient thay vì sử dụng HTTP, Multiple export aliases, Internationalized Pipes for Number, Date, and Currency Tối ưu hóa build production bằng việc sử dụng công cụ build optimizer được tích hợp sẵn vào

24 trong CLI Cải thiện tốc độ biên dịch bằng việc dùng TypeScript transforms, giờ đây khi build sẽ sử dụng lệnh “ng serve –aot”

• Angular 6: thêm 1 số lệnh mới như ng-update để chuyển từ version trước sang version hiện tại; ng-add để thêm các tính năng của ứng dụng để trở thành một ứng dụng web tiến bộ, Angular Element, Multiple Validators, Tree-shakeable providers Đến thời điểm 12/2022, Angular đã nâng cấp đến phiên bản Angular 14 và chuẩn bị ra mắt Angular 15 với nhiều cải tiến giúp code thuận tiện và tốt hơn

Các thành phần là các khối xây dựng cấu thành một ứng dụng Một thành phần bao gồm một lớp TypeScript với một trình trang trí, một mẫu HTML và các kiểu Trình trang trí chỉ định thông tin cụ thể về Góc sau:@Component() [9]

Bộ chọn CSS xác định cách thành phần được sử dụng trong mẫu Khi một phần tử HTML trong mẫu khớp với bộ chọn này, nó sẽ trở thành phiên bản của thành phần.

• Một mẫu HTML Angular hướng dẫn cách kết xuất thành phần

• Một tập hợp các kiểu CSS tùy chọn xác định giao diện của các phần tử HTML của mẫu

Thành phần Angular tối thiểu:

+ selector : Là tên được đặt để gọi một component trong code html Khi cần gọi component này ra ở màn hình html cha, ta sẽ gọi bằng html tag Gọi như vậy thì component con sẽ được render ra component cha.**

+ template : Là tự định nghĩa khung html cho component

+ templateUrl : Là đường dẫn url tới tệp tin html bên ngoài để load tệp tin đó vào làm khung html cho component này

+ styles : Là viết style css luôn vào tệp tin component này Cách này chỉ dùng cho component đơn giản

+ styleUrls : Là đường dẫn url đến tệp tin style css độc lập cho component này

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}}

Two-way binding: ngModel là từ khóa của Angular Khi chúng ta viết

[(ngModel)] , gắn chặt giá trị của input html với biến title.Dẫn đến người dùng gõ vào ô input thì thẻ h1 sẽ nhận giá trị tương ứng của title

Module là một khái niệm rộng của Angular Một module có thể bao gồm chứa các components, directives, pipes, v.v

Biên dịch kiểu ahead-of-time (AoT) giúp biên dịch mã nguồn thành mã thực thi trước khi chạy trên trình duyệt Mỗi component có HTML và JavaScript riêng biệt, khi tải trang thì kết hợp thành một tệp duy nhất bao gồm HTML và dữ liệu để hiển thị trên màn hình AoT là dạng mã đã được chuẩn bị sẵn dưới dạng này.

Module cũng có thể gọi module con và kết hợp được với các module khác

Thuộc tính: Các thuộc tính của module được định nghĩa như sau

+ imports: Định nghĩa sự phụ thuộc (Dependency) của module này, module phụ thuộc sẽ được load trước rồi module này mới load

+ declarations: Định nghĩa tất cả các component sẽ được dùng trong module này Nếu chưa định nghĩa thì các component trong module sẽ không thể gọi nhau vì không tìm thấy nhau

+ bootstrap: Mỗi ứng dụng Angular đều cần một module gốc, module này sẽ có một component gốc chứa layout gốc sẽ được render ra ở tệp tin index.html

1.1.6 Service trong Angular: Để tạo ra một service ta cần import và mô tả một class với từ khóa @injectable lấy từ @angular/core module

Nếu muốn dùng chung service mà không muốn khai báo nhiều lần,component nào cũng phải thêm vào thì ta có thể khai báo service ở phần providers của component hoặc module

Router Outlet: Mỗi một Router sẽ có một URL để load component Và để biết được là component sẽ render ra chỗ nào thì chúng ta viết đoạn code sau vào khung html cần chèn:

[routerLink]= “[‘/sinhvien’]” Để cài đặt toàn bộ Router cho một ứng dụng Angular, ta cần tạo ra một đối tượng JSON chứa các thuộc tính như sau:

+ path: Đường dẫn URL của component hiện tại

+ component: Ứng với đường dẫn bên trên thì load component nào

+ redirectTo: Chuyển hướng đến URL này nếu URL ở path không trùng

+ pathMatch: Cài đặt xem chế độ kiểm tra url là như thế nào khi giá trị là full thì nghĩa là toàn bộ url từ đầu đến cuối sẽ phải chính xác như trong bộ JSON Router Còn khi giá trị là prefix thì chuỗi đầu tiên của url (dấu “/” đầu tiên) sẽ được kiểm tra

1.1.8 Những tính năng nổi bật của Angular:

- Cơ chế Two-Way Data Binding

Cơ chế Routing mạnh mẽ trong Angular cho phép tải trang bất đồng bộ trên cùng một trang, giúp tạo các ứng dụng trang đơn (SPA) Ứng dụng web thường bao gồm nhiều chế độ xem khác nhau, tương ứng với các chức năng chính, do đó cơ chế Routing này đóng vai trò quan trọng trong việc điều hướng người dùng giữa các chế độ xem một cách hiệu quả.

Hình 1.2 Các tính năng của Angular [1]

- Mở rộng HTML: có thể sử dụng cấu trúc lập trình giống như điều kiện IF, vòng lặp FOR, những biến địa phương “local variables”, …để render các control

Đồng bộ, bất đồng bộ

Đồng bộ (xử lý đồng bộ) là code sẽ được chạy tuần tự theo trình tự đã viết sẵn từ trên xuống dưới, code bên dưới chỉ chạy khi code ở bên trên đã chạy xong và trả về kết quả.

- Bất đồng bộ là các đoạn code ở phía dưới có thể chạy dù code bên trên chưa thực thi và trả về kết quả

- Việc kết hợp nhuần nhuyễn giữa đồng bộ và bất đồng bộ giúp code được tối ưu thời gian chạy và đảm bảo tính chính xác cao.

Local Storage

- Local Storage là một loại lưu trữ dữ liệu cục bộ trong trình duyệt web, cho phép các trang web và ứng dụng JavaScript lưu trữ truy xuất dữ liệu mà không phải lo

29 lắng về việc mất dữ liệu Do đó, dữ liệu được lưu trong trình duyệt sẽ vẫn có thể truy cập được ngay cả khi đóng cửa sổ

- Local Storage thường được sử dụng để lưu trữ các thông tin người dùng như tên đăng nhập, mật khẩu, các thiết lập cá nhân, Bên cạnh chức năng mã hóa dữ liệu, thì nó không phải là một công cụ bảo mật hoàn hảo Dữ liệu có thể bị xóa bởi người dùng hoặc các công cụ quản lý dữ liệu trình duyệt Nó cũng có một giới hạn dung lượng lưu trữ tối đa 5MB cho mỗi trang web

- Ưu điểm của Local Storage:

• Lưu trữ dữ liệu trong thời gian dài: Dữ liệu được lưu trữ trong Local Storage sẽ tồn tại mãi mãi, cho dù người dùng đóng trình duyệt hoặc tắt máy tính

• Dữ liệu trong Local Storage được bảo mật chỉ có thể truy cập bởi trang web mà đã lưu trữ dữ liệu đó

• Không cần gửi dữ liệu tới máy chủ khi chúng đã được lưu trữ trên máy tính của người dùng, nên khi sử dụng Local Storage sẽ không cần phải gửi dữ liệu đi

• SessionStorage: giới hạn trong một cửa sổ hoặc thẻ của trình duyệt Còn localStorage: có thể truy xuất lẫn nhau giữa các cửa sổ trình duyệt Dữ liệu sẽ được lưu trữ không giới hạn thời gian

- Nhược điểm của Local Storage:

• Dung lượng lưu trữ hạn chế, thường chỉ khoảng 5MB cho mỗi trang web

• Dữ liệu có thể bị xóa bởi người dùng hoặc một số công cụ quản lý dữ liệu trình duyệt

• Các trình duyệt có thể hạn chế hoặc chặn sử dụng Local Storage vì lý do bảo mật hoặc vấn đề về quản lý bộ nhớ

CKEditor

CKEditor (còn gọi là FCKeditor) là một trình soạn thảo mã nguồn mở theo kiểu WYSIWYG của CKSource Chương trình này có thể tích hợp vào các website mà không cần cài đặt Phiên bản đầu tiên được phát hành năm 2003 và đến nay được rất nhiều người sử dụng [5]

• Nâng cao trải nghiệm người dùng

• Thao tác với hình ảnh dễ dàng hơn

Spring Boot

1.5.1 Giới thiệu về Spring Boot

Hình 1.4 Logo Spring framework [10] Để phát triển được một ứng dụng web cơ bản HelloWorld sử dụng Spring framework sẽ cần ít nhất 5 công đoạn sau: [10]

Giai đoạn 1: Tạo ra một project sử dụng Maven với các dependency cần thiết của Spring MVC và Servlet API

Giai đoạn 2: Một tập tin web.xml để khai báo DispatcherServlet của Spring

Giai đoạn 3: Một tập tin có cấu hình của Spring MVC

Giai đoạn 4: Một class Controller trả về trang “Hello World” khi có request gửi đến

Giai đoạn 5: Cuối cùng, phải có một web server dùng triển khai ứng dụng lên để chạy

Trong 5 công đoạn trên, chỉ có giai đoạn 4 tạo class Controller thì khác nhau khi triển khai các ứng dụng khác nhau Bởi vì mỗi ứng dụng sẽ có một yêu cầu khác Còn những công đoạn khác thì đều như nhau Vì vậy, Spring Boot là một extension của Spring Framework ra đời giúp các lập trình viên loại bỏ các bước cấu hình phức tạp mà Spring bắt buộc Spring Boot là dự án phát triển bởi ngôn ngữ Java (JAV) trong hệ sinh thái Spring framework

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

1.5.2 Những tính năng của Spring Boot

Một số tính năng nổi bật của Spring Boot đó là:

- Tạo ra các ứng dụng Spring mang tính độc lập

- Nhúng trực tiếp Tomcat, Jetty hoặc Undertow mà không cần phải triển khai ra tệp tin WAR

- Starter dependency giúp cho việc chạy cấu hình Maven trở nên đơn giản hơn

- Tự động chạy cấu hình Spring khi cần thiết

- Không sinh code cấu hình, đồng thời không yêu cầu phải cấu hình bằng XML

- Được phát triển tối ưu sao cho cấu hình XML trở nên đơn giản nhanh chóng và dễ dàng nhất trong Spring

- Gia tăng được năng suất trong quá trình lập trình

- Giảm ở mức tối thiểu thời gian lập trình

- Giúp người dùng mặc dù không có nhiều kiến thức lập trình vẫn có thể xây dựng được một ứng dụng

Cloud Storage for Firebase

1.6.1 Giới thiệu Cloud Storage for Firebase

Hình 1.6 Logo Cloud Storage for Firebase [8]

Cloud Storage cho Firebase được xây dựng cho các nhà phát triển ứng dụng cần lưu trữ và phân phát nội dung do người dùng tạo, chẳng hạn như ảnh, video, tệp tin nén, tệp tin văn bản, …

Cloud Storage cho Firebase là một dịch vụ lưu trữ đối tượng mạnh mẽ, đơn giản và tiết kiệm chi phí được xây dựng cho quy mô của Google SDK Firebase cho Cloud Storage bổ sung tính năng bảo mật của Google cho các tệp tải lên và tải xuống cho các ứng dụng Firebase, bất kể chất lượng mạng như thế nào [3] Đối với phía server, ta có thể sử dụng API Google Cloud Storage để truy cập vào các tệp tin đã được tải lên

- Hoạt động mạnh mẽ: SDK Firebase cho Cloud Storage thực hiện tải lên và tải xuống bất kể chất lượng mạng Tải lên và tải xuống mạnh mẽ, có nghĩa là chúng khởi động lại từ nơi chúng dừng lại, tiết kiệm thời gian và băng thông cho người dùng [3]

- Bảo mật mạnh mẽ: SDK Firebase cho Bộ nhớ đám mây tích hợp với Xác thực Firebase để cung cấp xác thực đơn giản và trực quan cho các nhà phát triển Bạn có thể sử dụng mô hình bảo mật khai báo của chúng tôi để cho phép truy cập dựa trên tên tệp, kích thước, loại nội dung và siêu dữ liệu khác

- Khả năng mở rộng cao: Dung lượng của Cloud Storage tự động mở rộng để đáp ứng nhu cầu của người dùng Nó có thể tự động tăng dung lượng lưu trữ tối đa lên nếu lưu trữ nhiều tệp tin và giảm dung lượng lưu trữ tối đa đi nếu lưu trữ ít tệp tin Với tài khoản bậc miễn phí, Cloud Storage cho chúng ta lưu trữ 5 GB dữ liệu, với mỗi một GB thêm, ta phải trả thêm $0.026/GB mỗi tháng [7].

Amazon EC2

Amazon Elastic Compute Cloud (Amazon EC2) cung cấp khả năng tính toán theo nhu cầu, có thể thay đổi được trong Amazon Web Services (AWS) Cloud [11] Sử dụng Amazon EC2 giúp giảm chi phí về phần cứng, từ đó tập trung chi phí vào phát triển và deploy ứng dụng Ta có thể sử dụng Amazon EC2 để tạo một hoặc nhiều server ảo tùy theo nhu cầu Tùy theo nhu cầu sử dụng, ta có thể tăng số máy EC2 khi cần xử lý nhiều yêu cầu và giảm số máy EC2 đi khi không cần nữa

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

1.7.2 Tính năng của Amazon EC2

Amazon EC2 cung cấp những tính năng tiêu biểu sau:

- Amazon Machine Images (AMIs): Các mẫu máy được cấu hình sẵn cho bao gồm các thành phần ta cần cho server (bao gồm cả hệ điều hành và phần mềm bổ sung)

- Các cấu hình khác nhau của CPU, RAM, dung lượng lưu trữ… cho máy ảo.

- Tối ưu hóa chi phí và dung lượng: Ta chỉ phải trả tiền cho những gì ta sử dụng, tùy theo cấu hình của máy EC2 mà ta phải trả mức phí khác nhau cho hàng tháng, máy càng mạnh (số lượng CPU lớn, RAM nhiều, dung lượng lưu trữ lớn, …) thì phải trả càng nhiều.

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

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

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, tiểu luận tốt nghiệp Có không ít những khó khăn, bất cập cho cả giảng viên, sinh viên trong việc đăng ký đề tài, quản lí đề tài Để đáp ứng được nhu cầu cấp thiết đó, hệ thống website “Quản lý đề tài Tiểu luận chuyên ngành và Khóa luận tốt nghiệp” ra đời 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

Với hệ thống quản lí đề tài này, cán bộ Khoa, nhà trường có thể quản lí được thông tin sinh viên tham gia đề tài, số giảng viên hướng dẫn đề tài, số đề tài, loại đề tài theo năm học Từ đó có sự quản lý, thống kê, giúp nâng cao chất lượng giáo dục cơ sở

Sinh viên khi đăng nhập vào hệ thống website này với tài khoản được Khoa\Trường cấp có thể tham gia đăng ký đề tài “Tiểu luận chuyên ngành”, “Khóa luận tốt nghiệp”, tìm kiếm đề tài, tìm kiếm giảng viên hướng dẫn mong muốn, lọc danh sách đề tài chưa có người đăng ký, theo dõi tin tức liên quan khi Khoa thông báo

Giảng viên có thể sử dụng tài khoản để truy cập website đăng ký đề tài cho sinh viên Ngoài ra, họ cũng có thể thu thập danh sách thông tin sinh viên đã đăng ký để thuận tiện cho việc quản lý và theo dõi.

Với dự án “ Hệ thống website quản lí đề tài Tiểu luận chuyên ngành và Khóa luận tốt nghiệp” có thể đáp ứng được phần nào nhu cầu cấp thiết của các cơ sở giáo dục Đại học hiện nay trong việc tổ chức cho sinh viên đăng ký đề tài và hướng dẫn đề tài.

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

2.2.1 Yêu cầu chức năng nghiệp vụ

Bảng 2.1 Yêu cầu chức năng nghiệp vụ STT Yêu cầu Mô tả

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,

Danh sách đề tài gồm thông tin: mã cấu hình, tình trạng xóa/chưa xóa, đăng ký chuyên ngành, liên kết mã nguồn, liên kết báo cáo (Word/PowerPoint), thông tin hướng dẫn viên, thông tin phản biện, trạng thái duyệt, số lượng sinh viên Người dùng với vai trò giảng viên có thể tải mẫu danh sách đề tài định dạng Excel để thêm nhanh Giảng viên cũng có thể xuất danh sách đề tài của mình ra file Excel và tải xuống.

3 Quản lý chức vụ Thêm, xóa, sửa và lưu các thông tin về chức vụ: Id, tên chức vụ

Thêm, xóa, sửa và lưu các thông tin về chuyên ngành: Id, tên chuyên ngành

5 Quản lý hoạt động Thêm, xóa, sửa và lưu các thông tin về hoạt động: Id, tên hoạt động

6 Quản lý loại đề tài Thêm, xóa, sửa và lưu các thông tin về loại đề tài: Id, tên loại

7 Quản lý lớp Thêm, xóa, sửa và lưu các thông tin về lớp: Id, tên lớp, niên khóa

8 Quản lý niên khóa Thêm, xóa, sửa và lưu các thông tin về niên khóa: Id, tên niên khóa, năm bắt đầu, năm kết thúc

9 Quản lý cấu hình sinh viên

Thêm, xóa, sửa và lưu các thông tin về cấu hình sinh viên: Id người dùng, Id cấu hình, ghi chú

10 Quản lý sinh viên đăng ký đề tài

Thêm, xóa, sửa và lưu các thông tin về trạng thái đăng ký đề tài của sinh viên: Id người dùng, Id đề tài, điểm

11 Quản lý thông báo Thêm, xóa, sửa và lưu các thông tin về thông báo: Id, Tên thông báo, nội dung, người đăng, ngày cập nhật, có tin mới, trạng thái, số ngày hiển thị tin mới

12 Quản lý trạng thái Thêm, xóa, sửa và lưu các thông tin về trạng thái: Id, tên trạng thái

13 Quản lý người dùng Thêm, xóa, sửa và lưu các thông tin về người dùng: Id, tên, tên đăng nhập, email, loại người dùng, avatar, có bị block hay không, ngày đăng ký, SĐT, học vị, chuyên ngành, lớp, chức vụ, điểm, tổng tín chỉ, mật khẩu, reset password token Người dùng với vai trò là Quản trị viên có thể tải lên tệp tin Excel chứa danh sách sinh viên theo mẫu cho sẵn để thêm nhanh

14 Xin vào nhóm Thêm, xóa, sửa và lưu các thông tin về việc xin vào nhóm: Id người gửi, Id đề tài, thời gian

15 Tìm kiếm đề tài Tìm kiếm dựa trên một trong các tiêu chí sau: tên giảng viên, tên sinh viên, mã số sinh viên, tên đề tài

16 Thống kê số lượng, tình trạng đề tài

Thống kê số lượng đề tài dựa trên một trong các tiêu chí sau: loại đề tài, tên giảng viên, chuyên ngành của sinh viên

17 Quên mật khẩu Người dùng đặt mật khẩu mới cho tài khoản thông qua đường link được gửi đến qua email được dùng để đăng ký tài khoản

18 Quản lý nhóm đề tài Giảng viên có thể thêm, sửa đóng nhiệm vụ cho các nhóm đang thực hiện đề tài đang được mình hướng dẫn, thêm nhận xét, cho điểm bài làm sinh viên gửi Nhiệm vụ bao gồm các thông tin:

Id, tiêu đề, nội dung, hạn nộp, đã đóng hay còn mở Giảng viên cũng có thể xuất danh sách các nhiệm vụ đã giao và bài làm của sinh viên vào tệp tin Excel để tải xuống

19 Quản lý học tập Sinh viên có thể thêm, sửa bài làm để hoàn thành nhiệm vụ giảng viên giao

20 Tải tệp tin đã nộp Sinh viên, Giảng viên có thể tải các tệp tin đã nộp trong bài làm để hoàn thành nhiệm vụ giảng viên giao

2.2.2 Yêu cầu chức năng hệ thống

Bảng 2.2 Yêu cầu chức năng hệ thống

STT Nội dung Mô tả chi tiết Ghi chú

Phân quyền người dùng giúp quản lý hiệu quả hệ thống quản lý giáo dục, cụ thể bao gồm: quản lý giảng viên, sinh viên, thông báo, đề tài, cấu hình, lớp học, chuyên ngành và niên khóa Việc phân quyền này cho phép phân bổ nhiệm vụ và quyền hạn phù hợp, đảm bảo hoạt động quản lý trơn tru, nhanh chóng và an toàn.

Giảng viên: được phép sử dụng các chức năng quản lý đề tài, quản lý thông tin cá nhân, Quản lý nhóm sinh viên

Sinh viên có thể xem danh sách đề tài nghiên cứu chưa đủ thành viên hoặc chưa có thành viên đăng ký, quản lý thông tin cá nhân, tham gia học tập bằng cách làm nhiệm vụ trên hệ thống.

Chương trình được cấp nhiều tài khoản gồm các quyền: Giảng viên, Sinh viên, Quản trị viên

2 Sao lưu, back up, phục hồi thông tin

Sao lưu thông tin và chỉ phục hồi khi cần thiết

3 Báo động, nhắc nhở sinh viên Nhắc nhở sinh viên khi sắp hết hạn đăng ký đề tài mà sinh viên vẫn chưa đăng ký đề tài

2.2.3 Yêu cầu phi chức năng

Bảng 2.3 Yêu cầu phi chức năng STT Nội dung Tiêu chuẩn Mô tả chi tiết

1 Tốc độ xử lý quá trình đăng ký đề tài Hiệu quả Một lần có thể cho nhiều tài khoản đăng ký đề tài

2 Tốc độ tìm kiếm đề tài Hiệu quả Tối đa 3s phải có kết quả tìm kiếm

3 Tiết kiệm được thời gian, tránh thất lạc dữ liệu

Hiệu quả Tiết kiệm thời gian so với quản lý thủ công Dữ liệu được sao lưu trên máy, có thể dễ dàng phục hồi

4 Dễ dàng quản lý, kiểm soát lượng sinh viên đăng ký đề tài

Tiện dụng Chỉ cần thông qua hệ thống quản lý, cán bộ Khoa có thể biết được lượng sinh viên đăng ký, biết được số sinh viên của khóa chưa đăng ký

5 Dễ dàng quản lý số đề tài được giảng viên mở

Tiện dụng Chỉ cần thông qua hệ thống quản lý, cán bộ Khoa có thể biết được số đề tài được mở trong kỳ và số lượng giảng viên hướng dẫn

6 Dễ dàng giao nhiệm vụ cho sinh viên tham gia đề tài

Tiện dụng Chỉ cần mở nhiệm vụ, thành viên nhóm tham gia đề tài sẽ nhìn thấy và tham gia nhiệm vụ

7 Cho phép đăng thông báo đến sinh viên, giảng viên

Tiện dụng Sinh viên, giảng viên kịp thời nắm bắt thông tin khi Khoa ra thông báo mới

8 Giao diện thân thiện, đơn giản Tiện dụng Người dùng có cái nhìn thoải mái khi tương tác, dễ sử dụng

9 Dễ thao tác Tiện dụng Các thao tác nhập xuất chỉnh sửa đơn giản, gần gũi với người dùng

10 Password Bảo mật Mật khẩu yêu cầu ít nhất có

8 ký tự, bao gồm: ít nhất 1 chữ số, 1 ký tự đặc biệt

11 Khôi phục mật khẩu Bảo mật Thời gian lấy mã không quá

12 Giao thức Bảo mật Sử dụng giao thức HTTPS để tăng tính bảo mật

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

Bảng 3.1 Các tác nhân và chức năng Tác Nhân Chức năng

Khach + Trang chủ hiển thị các thông báo mới về TLCN và KLTN của khoa

+ Trang Danh sách đề tài: hiển thị loại đề tài, danh sách đề tài, xem chi tiết đề tài

+ Trang hướng dẫn đăng ký: mô tả cách thức đăng ký + Trang thống kê: thống kê theo loại đề tài, thống kê đề tài theo sinh viên, thống kê đề tài theo giảng viên

+ Trang tìm kiếm: tìm kiếm đề tài, tìm kiếm giảng viên, tìm kiếm sinh viên

Sinh Viên + Trang thông tin sinh viên: hiển thị danh sách sinh viên

+ Trang thông tin giảng viên: hiển thị danh sách giảng viên + Trang quản trị tài khoản: đổi thông tin cá nhân, đổi mật khẩu, hiển thị chú ý hệ thống

Trang đăng ký đề tài: Cho phép sinh viên xem danh sách đề tài có thể đăng ký, thực hiện đăng ký và xin vào nhóm "Quan tâm đề tài" Trang quản lý nhóm: Giúp sinh viên xem danh sách "Quan tâm đề tài", đồng thời thêm thành viên mới vào đề tài khi còn suất trống.

+ Trang học tập: xem nhiệm vụ và thực hiện nộp bài theo thời gian yêu cầu của giảng viên, xem nhận xét đánh giá của giảng viên

Giảng viên + Trang quản trị tài khoản: đổi thông tin cá nhân, đổi mật khẩu

+ Trang quản trị đề tài: hiển thị danh sách đề tài của giảng viên theo loại đề tài, click vào loại đề tài để xem số sinh viên đăng ký, xuất excel + Trang Quản trị nhóm - đề tài: giảng viên tạo nhiệm vụ cho sinh viên thực hiện, giảng viên xem , tải xuống tệp tin nộp, đánh giá, chấm điểm, xuất excel

Quản trị viên + Trang quản trị thông báo: thêm, xóa, sửa, xem thông báo

+ Trang quản trị cấu hình: thêm, xóa, sửa cấu hình; xem chi tiết; sinh viên-cấu hình (thêm sinh viên, xóa danh sách, xóa sinh viên)

+ Trang quản trị người dùng: tìm kiếm (mssv, msgv, họ tên, email, số

43 đ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ị đề 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) + 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)

Hình 3.1 Usecase Diagram Actor Khach

Hình 3.2 Usecase Diagram Actor SinhVien

Hình 3.3 Usecase Diagram Actor GiangVien

Hình 3.4 Usecase Diagram Actor QuanTriVien

Đặc tả Usecase

Use case Name Đăng nhập

Description Use case này cho phép Người dùng đăng nhập vào hệ thống để xem và thực hiện nhiều chức năng khác, tùy thuộc vào vai trò của người dùng Primary Actor User

Post-conditions Sau khi hoàn thành đăng nhập, tùy theo vai trò, user được chuyển đến trang chủ của SinhVien hoặc GiangVien Nếu là QuanTriVien sẽ chuyển đến trang chủ của QuanTriVien

Main Scenario - B1: Người dùng nhấn chọn nút đăng nhập ở góc phải trên cùng của trang web

- B2: Nhập username, password (tùy theo role của người dùng được QuanTriVien set ban đầu)

Alternate Flow - Nếu người dùng nhập sai mật khẩu, username ở bước 2 sẽ thực hiện nhập lại

- Nếu ở bước 2 người dùng quên mật khẩu thì chuyển đến trang lấy lại mật khẩu

Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi và quay về trang chủ

Use case Name Tìm kiếm

Description Use case này cho phép người dùng tìm kiếm theo tên giảng viên, tên sinh viên, tên đề tài Primary Actor User

Post-conditions Chọn tab tìm kiếm tương ứng

Main Scenario B1: Người dùng chọn thông tin muốn tìm kiếm (tìm kiếm theo tên giảng viên, tên sinh viên, tên đề tài) B2: Nhập từ khóa tìm kiếm B3: Người dùng chọn nút “tìm kiếm”

B4: Danh sách kết quả tìm kiếm hiện ra

Alternate Flow Nếu ở bước 2, người dùng không nhập, hoặc nhập từ khóa rỗng thì hiển thị danh sách rỗng

Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi

Use case Name Thống kê

Description Use case này cho phép người dùng xem thống kê theo đề tài, sinh viên, giảng viên Primary Actor User

Pre-conditions Hiển thị trang thống kê

Post-conditions Tab thống kê hiện ra

Main Scenario B1: Người dùng chọn thông tin muốn thống kê (thống kê theo giảng viên, sinh viên, đề tài) B2: Chọn đề tài hoặc giảng viên mà người dùng muốn xem B3: Chọn “thống kê”

B4: Hiển thị lượt đồ thống kê theo loại đề tài hoặc theo chuyên ngành hoặc theo giảng viên

Use case Name Xem danh sách Loại đề tài

Description Use case này cho phép người dùng xem danh sách các cấu hình đề tài Primary Actor User

Post-conditions Hiển thị trang xem danh sách loại đề tài

Main Scenario B1: Người dùng chọn mục xem “danh sách đề tài” ở danh mục

B2: Danh sách loại đề tài hiện ra, người dùng chọn loại đề tài muốn xem

Use case Name Xem danh sách đề tài

Description Use case này cho phép người dùng xem danh sách đề tài theo từng loại đề tài Primary Actor User

Pre-conditions Đã vào trang danh sách loại đề tài

Post-conditions Hiển thị trang xem danh sách đề tài của cấu hình được chọn

Main Scenario B1: Người dùng chọn loại đề tài muốn xem

B2: Danh sách đề tài hiện ra, người dùng có thể chọn xem theo giảng viên

Use case Name Xem chi tiết đề tài

Description Use case này cho phép người dùng xem chi tiết đề tài

Pre-conditions Đã vào trang danh sách đề tài

Main Scenario B1: Người dùng click chọn “xem chi tiết”

B2: Thông tin chi tiết đề tài hiện ra Alternate Flow Không có

Use case Name Xem danh sách thông báo

Description Use case này cho phép người dùng xem danh sách thông báo hiện có trên hệ thống Primary Actor User

Post-conditions Hiển thị trang chủ với danh sách thông báo

Main Scenario B1: Người dùng chọn mục “trang chủ” ở danh mục

B2: Danh sách thông báo hiện ra kèm theo ngày ra thông báo Alternate Flow Không có

Use case Name Xem chi tiết thông báo

Description Use case này cho phép người dùng xem chi tiết thông báo

Pre-conditions Người dùng đã ở trang chủ

Post-conditions Hiển thị trang chi tiết thông báo

Main Scenario B1: Người dùng click chọn thông báo bất kỳ để xem chi tiết thông báo Alternate Flow Không có

Use case Name Quản trị tài khoản

Description Use case này cho người dùng thay đổi thông tin cá nhân, đổi mật khẩu Primary Actor SinhVien, GiangVien, QuanTriVien

Pre-conditions Đăng nhập thành công với vai trò Sinh viên, Giảng Viên, QuanTriVien

Post-conditions Hiển thị trang quản trị tài khoản

Main Scenario B1: Người dùng chọn mục “Quản trị tài khoản” ở danh mục

B2: Người dùng nhấn chọn “đổi thông tin cá nhân” hoặc “đổi mật khẩu” B3: nhấn chọn “Lưu” để lưu thông tin thay đổi

Use case Name Quên mật khẩu

Description Use case này cho người dùng lấy lại mật khẩu đã quên thông qua email đăng ký tài khoản Primary Actor User

Pre-conditions Chọn quên mật khẩu ở giao diện Login (Đăng nhập)

Post-conditions Hiển thị trang “Quên mật khẩu”

Main Scenario B1: Người dùng nhập email đã đăng ký tài khoản trước đó

B2: Người dùng nhấn chọn “Gửi” và truy cập vào email vừa nhập ở form

B3: Mở email mà hệ thống vừa gửi, click vào link “Khôi phục mật khẩu”

B4: Tại trang “Khôi phục mật khẩu” người dùng nhập mật khẩu mới B5: Người dùng nhấn chọn “cập nhật mật khẩu” sau đó về lại trang Login

Alternate Flow Thời gian để đặt lại mật khẩu đã hết, người dùng đặt mật khẩu thất bại, phải gửi lại yêu cầu khôi phục mật khẩu Trong trường hợp không thể gửi yêu cầu khôi phục mật khẩu do tài khoản không lưu thông tin email, vui lòng liên hệ “Quản trị hệ thống để được hỗ trợ”

Use case Name Thông tin sinh viên, thông tin giảng viên

Description Use case này cho người dùng xem thông tin sinh viên, thông tin giảng viên hiện tại trên hệ thống Primary Actor User

Pre-conditions Chọn “Thông tin sinh viên”, “Thông tin giảng viên”

Post-conditions Hiển thị trang thông tin

Main Scenario B1: Người dùng nhập chọn “ chuyên ngành”, “niên khóa”

B2: Nhấn “tìm kiếm” để lọc thông tin người dùng B3: Hiển thị danh sách thông tin được phân trang

3.3.1 Các Use case với vai trò QuanTriVien

Bảng 3.11 Đặc tả UC_QuanTriVien_01

Use case ID UC_QuanTriVien_01

Use case Name Duyệt đề tài

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 Primary Actor QuanTriVien

Pre-conditions Đăng nhập thành công với vai trò QuanTriVien

Post-conditions Sau khi duyệt đề tài, thông báo số đề tài duyệt thành công

Main Scenario - B1: QuanTriVien nhấn chọn “Duyệt đề tài” ở danh mục bên trái

- B2: Nhấn chọn tên giảng viên muốn duyệt đề tài

- B3: Click chọn xem chi tiết thông tin đề tài

- B4: Chọn các đề tài đạt tiêu chuẩn và nhấn nút “Duyệt”

- B5: Thông báo số đề tài duyệt thành công

Alternate Flow Nếu đã đủ số lượng sinh viên đề tài thì sẽ không hiển thị thông báo “Đã đủ số lượng sinh viên tham gia đề tài”

Use case Name Quản trị chung

Description Use case này cho phép Người quản trị niên khóa, lớp, chuyên ngành

Thực hiện thêm, xóa, sửa Primary Actor QuanTriVien

Post-conditions Sau khi thực hiện CUD, thông báo “Lưu thành công” nếu lưu thông tin thành công Main Scenario - B1: QuanTriVien nhấn chọn mục Quản trị chung ở danh mục

- B2: Nhấn chọn tab mong muốn (Niên khóa, lớp, chuyên ngành)

- B3: Nhấp chọn nút thêm, hoặc xóa, hoặc sửa

- B4: Nếu QuanTriVien chọn “thêm mới” hoặc “cập nhật” Sau khi nhập đủ thông tin và nhấn chọn “Lưu” để lưu thông tin

Alternate Flow Nếu QuanTriVien không chọn “lưu” thì data không được lưu vào hệ thống Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi

Use case Name Quản trị đề tài

Description Use case này cho phép QuanTriVien xem danh sách đề tài, thêm mới đề tài vào danh sách, chỉnh sửa đề tài hoặc xóa đề tài Primary Actor QuanTriVien

Post-conditions Sau khi thực hiện CUD, thông báo “Lưu thành công” nếu lưu thông tin thành công Main Scenario - B1: QuanTriVien nhấn chọn mục Quản lý đề tài ở danh mục

- B3: Nếu QuanTriVien chọn “thêm mới” hoặc “cập nhật” Sau khi nhập đủ thông tin và nhấn chọn “Lưu” để lưu thông tin Alternate Flow Không có

Use case Name Thêm danh sách đề tài

Description Use case này cho phép QuanTriVien thêm mới danh sách đề tài vào danh sách Primary Actor QuanTriVien

Post-conditions Sau khi thực hiện CUD, thông báo “Lưu thành công” nếu lưu thông tin thành công Main Scenario - B1: QuanTriVien nhấn chọn mục Quản lý đề tài ở danh mục

- B2: Nhấp chọn nút “Tải lên danh sách đề tài”

- B3: Nếu QuanTriVien chưa có tệp tin mẫu thì nhấn chọn “Tệp tin mẫu” để tải xuống tệp tin

- B4: Thực hiện điền đầy đủ thông tin vào tệp tin

- B5: Chọn “Chọn tệp tin” để tải tệp tin lên

- B6: Chọn “Lưu” để tải lên danh sách đề tài Nếu tải lên sẽ nhận được thông báo “Thêm mới danh sách thành công”

Use case Name Xuất excel danh sách đề tài

Description Use case này cho phép QuanTriVien xuất excel thống kê danh sách đề tài theo giảng viên, loại đề tài Primary Actor QuanTriVien

Post-conditions Xuất thành công tệp tin excel thống kê

Main Scenario - B1: QuanTriVien nhấn chọn mục Quản lý đề tài ở danh mục

- B2: Nhấp chọn nút “Xuất excel”

- B3: Người dùng bắt buộc chọn “cấu hình” để xuất danh sách

- B4: Người dùng có thể chọn hoặc không chọn “giảng viên” muốn xuất danh sách

- B5: Chờ xuất thành công danh sách Alternate Flow Không có

Use case Name Quản lý người dùng

Description Use case này cho phép thêm người dùng, tìm kiếm người dùng theo mssv, msgv, họ tên Primary Actor QuanTriVien

Post-conditions Chuyển đến trang quản lý người dùng

Main Scenario B1: QuanTriVien nhấn chọn mục quản lý người dùng ở danh mục

B2: QuanTriVien nhấn chọn “thêm Người dùng mới”

B3: người nhập đầy đủ thông tin B4: nhấn chọn “lưu” để thêm người dùng

Alternate Flow Nếu ở bước 3, người dùng nhập thiếu thông tin sẽ hiển thị thông báo nhắc nhở trước khi thực hiện lưu data

Use case Name Quản lý người dùng, tìm kiếm người dùng

Description Use case này cho phép Người dùng tìm kiếm người dùng theo mssv, msgv, họ tên Primary Actor QuanTriVien

Pre-conditions Đăng nhập thành công với vai trò QuanTriVien, truy cập quản lý người dùng Post-conditions Chuyển đến trang quản lý người dùng

Main Scenario B1: Người dùng nhấn chọn mục quản lý người dùng ở danh mục

B2: QuanTriVien nhập từ khóa tìm kiếm vào ô B3: Nhấn chọn “tìm kiếm” để tìm thông tin người dùng

Alternate Flow Nếu ở bước 3, người dùng nhập thông tin không tồn tại thì hiện danh sách rỗng

Use case Name Quản lý người dùng, thêm danh sách người dùng

Description Use case này cho phép Người dùng thêm mới người dùng vào hệ thống Primary Actor QuanTriVien

Pre-conditions Đăng nhập thành công với vai trò QuanTriVien, truy cập quản lý người dùng Post-conditions Chuyển đến trang quản lý người dùng

Main Scenario B1: QuanTriVien nhấn chọn mục quản lý người dùng ở danh mục

B2: QuanTriVien chọn “Tải lên danh sách người dùng”

B3: Chọn “tệp tin mẫu” để tải xuống tệp tin mẫu B4: Nhập thông tin vào tệp tin mẫu

B5: Nhấn nút “chọn tệp tin” để tải lên danh sách B6: Nhấn chọn “Lưu” để lưu danh sách vào hệ thống

Use case Name Quản lý thông báo, thêm thông báo

Description Use case này cho phép Người dùng thêm thông báo, xóa sửa, xem thông báo Primary Actor QuanTriVien

Post-conditions Chuyển đến trang quản lý thông báo

Main Scenario B1: QuanTriVien nhấn chọn mục quản lý thông báo ở danh mục

B2: QuanTriVien nhấn chọn “thêm thông báo”

B3: Nhập đầy đủ thông tin tiêu đề, số ngày cho phép hiển thị thông báo mới, nội dung

B4: Nhấn chọn “lưu” để thêm thông báo

Alternate Flow Nếu ở bước 3, người dùng nhập thiếu thông tin sẽ hiển thị thông báo nhắc nhở trước khi thực hiện lưu data

Use case Name Quản lý thông báo, RUD thông báo

Description Use case này cho phép Người dùng xóa, sửa, xem thông báo

Đăng nhập thành công vào hệ thống với vai trò Quản trị viên và truy cập vào trang quản lý thông báo.**Điều kiện sau khi thực hiện:** Người dùng được chuyển đến trang quản lý thông báo và hiển thị danh sách các thông báo hiện có.

Main Scenario B1: Người dùng nhấn chọn mục xem thông báo

B2: thông báo chi tiết hiện ra

Alternate Flow Nếu ở bước 1 người dùng chọn sửa thông báo thì hộp thoại hiện ra các trường thông tin của thông báo đó Sau khi người dùng nhập xong và nhấn xác nhận “Lưu” thì thông tin thay đổi được lưu lại Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi

Use case Name Quản lý cấu hình

Description Use case này cho phép người dùng quản lý cấu hình, thêm mới cấu hình,

RUD, cấu hình sinh viên Primary Actor QuanTriVien

Post-conditions Sau khi thêm mới hoặc cập nhật, xóa thì danh sách cấu hình được cập nhật

Main Scenario B1: Người dùng nhấn chọn mục quản lý cấu hình ở danh mục

B2: Danh sách các cấu hình hiện ra B3: QuanTriVien chọn nút “thêm mới cấu hình”

B4: QuanTriVien nhập đầy đủ thông tin cấu hình B5: Nhấn chọn “thêm cấu hình” hoặc “nhập lại”

Alternate Flow Nếu ở bước 3 QuanTriVien chọn xem chi tiết thì cấu hình chi tiết hiện ra Nếu ở bước 3 QuanTriVien chọn xóa thì cấu hình được xóa 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

Use case Name Quản lý cấu hình sinh viên

Description Use case này cho phép người thêm mới cấu hình sinh viên, xóa sinh viên, xóa danh sách Primary Actor QuanTriVien

Pre-conditions Đăng nhập thành công với vai trò QuanTriVien, đăng ở trang quản lý cấu hình Post-conditions Chuyển đến trang quản lý cấu hình sinh viên

Main Scenario B1: Người dùng nhấn chọn mục quản lý cấu hình sinh viên ở nút 3 chấm bên cạnh các cấu hình trong danh sách cấu hình

B2: Danh sách các cấu hình sinh viên hiện ra B3: Người dùng chọn nút “thêm sinh viên”

B4: Nhập MSSV để thêm 1 sinh viên B5: Người dùng nhấn “Lưu”

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

3.3.2 Các Use Case của GiangVien

Bảng 3.23 Đặc tả UC_GiangVien_01

Use case ID UC_GiangVien_01

Use case Name Quản trị đề tài

Description Use case này cho phép Người dùng quản lý đề tài , thực hiện thêm, cập nhật, xóa đề tài Primary Actor GiangVien

Pre-conditions Đăng nhập thành công với vai trò GiangVien

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

- B3: Nếu người dùng chọn thêm mới hoặc cặp nhật Sau khi nhập đủ thông tin và nhấn chọn “Lưu” để lưu thông tin

Alternate Flow -Nếu người dùng không nhấn “Lưu” khi “cập nhật” hoặc “thêm” mới thì hiện thông báo nhắc nhở, nếu người dùng chọn” không lưu” thì dữ liệu không được cập nhật vào hệ thống

Use case Name Quản trị đề tài, tải lên danh sách đề tài

Description Use case này cho phép Người dùng thêm mới đề tài vào danh sách Primary Actor GiangVien

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

- B2: Nhấp chọn “tải danh sách đề tài”

- B3: Nếu chưa có tệp tin mẫu thì nhấn chọn tải “tệp tin mẫu”, sau đó nhập thông tin đầy đủ vào tệp tin

- B4: Chọn “Chọn tệp tin” để tải tệp tin lên

- B5: Chọn “Lưu” để lưu danh sách đề tài Nếu tải thành công sẽ hiển thị thông báo “Thêm mới danh sách thành công”

Alternate Flow Nếu ở B5 bị lỗi sẽ hiển thị thông báo “Tệp tin không đúng định dạng” hoặc “Xảy ra lỗi trong quá trình xử lý”

Use case Name Quản trị nhóm – đề tài, CRUD nhiệm vụ

Description Use case này cho phép Người dùng quản lý sinh viên đã đăng ký tham gia đề tài, giao nhiệm vụ, đóng mở nhiệm vụ

Post-conditions Giao thành công nhiệm vụ cho sinh viên tham gia đề tài, với thời gian, thông tin cụ thể

Main Scenario - B1: Người dùng nhấn chọn mục Quản lý nhóm- đề tài ở danh mục

- B2: Nhấp chọn đề tài mong muốn giao nhiệm vụ

- B3: Nhấn chọn “thêm nhiệm vụ”

- B4: Nhập đầy đủ thông tin yêu cầu

- B4: chọn “Lưu” để thêm mới nhiệm vụ

Alternate Flow Nếu chọn “đóng” đề tài sẽ khóa, không thể thực hiện nộp bài

Nếu chọn” mở” sẽ mở lại nếu hạn nộp còn hạn

Nếu chọn “ cập nhật” , sau khi nhập lại thông tin, người dùng chọn

“ Lưu” để lưu nhiệm vụ Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi

Use case Name Đóng, mở, cập nhật nhiệm vụ

Description Use case này cho phép Giảng viên mở lại nhiệm vụ hoặc đóng nhiệm vụ khi cần thiết Primary Actor GiangVien

Pre-conditions Đăng nhập thành công với vai trò GiangVien, truy cập vào trang nhiệm vụ của đề tài Post-conditions Không có

Main Scenario - B1: Giảng viên chọn “Đóng” nhiệm vụ hoặc “cập nhật”, hoặc “Mở”

- B2: Chọn “Cập nhật”, “Mở” thì giảng viên thực hiện chỉnh sửa nội dung các mục

- B3: Sau khi chỉnh sửa nội dung, giảng viên nhấn chọn “ Lưu”

Alternate Flow Nếu ở bước 2 chọn “ Đóng” thì đề tài bị khóa lại

Use case Name Quản trị nhóm – đề tài, xuất excel danh sách nhiệm vụ

Description Use case này cho phép Người dùng xuất ra danh sách nhiệm vụ đã tạo cho sinh viên làm theo đề tài Primary Actor GiangVien

Post-conditions Xuất thành công danh sách nhiệm

- B2: Nhấn chọn đề tài muốn xuất danh sách nhiệm vụ

- B4: Chờ xuất danh sách Alternate Flow Không có

Use case Name Xem danh sách sinh viên tham gia đề tài

Description Use case này cho phép Người dùng xem danh sách sinh viên đã đăng ký tham gia đề tài Primary Actor GiangVien

Post-conditions Hiển thị danh sách sinh viên tham gia đề tài

- B2: Nhấn chọn “Thành viên nhóm” trong mục Action Alternate Flow Không có

Use case Name Download tệp tin bài làm

Description Use case này cho phép Người dùng tải xuống tệp tin bài nộp của sinh viên Primary Actor GiangVien

Post-conditions Tải xuống thành công tệp tin bài nộp

- B2: Nhấn chọn “Xem chi tiết”

- B3: Nhấn chọn nhiệm vụ mong muốn

- B4: Nhận chọn “Bài nộp sinh viên”

- B5: Click vào “ tên tệp tin” và chờ tải xuống tệp tin Alternate Flow Không có

Use case Name Đánh giá, xem đánh giá

Description Use case này cho phép Người dùng đánh giá bài làm sinh viên và xem lại đánh giá Primary Actor GiangVien

Post-conditions Thêm thành công đánh giá bài làm

Main Scenario - B1: Người dùng nhấn chọn mục Quản lý nhóm - đề tài ở danh mục

- B2: Nhấn chọn “Xem chi tiết”

- B3: Nhấn chọn nhiệm vụ mong muốn

- B4: Nhận chọn “Bài nộp sinh viên”

- B5: Chọn “đánh giá”, nhập điểm và nhận xét

- B6: Nhấn “Lưu” để lưu lại đánh giá

Alternate Flow Nếu đã đánh giá sẽ hiển thị thêm nút “Xem đánh giá”, người dùng click chọn để xem Sau khi thêm đánh giá, người dùng có thể cập nhật đánh giá bài làm Exceptions Nếu có ngoại lệ xảy ra, hiển thị thông báo lỗi

3.3.3 Các Use Case của SinhVien

Bảng 3.31 Đặc tả UC_SinhVien_01

Use case ID UC_SinhVien_01

Use case Name Đăng ký đề tài

Description Use case này cho phép sinh viên đăng ký đề tài khi đến mùa đăng ký đề tài Primary Actor User (Sinh viên)

Pre-conditions Đăng nhập thành công với vai trò Sinh viên

Post-conditions hiển thị trang đăng ký đề tài

Main Scenario B1: Người dùng chọn mục Đăng ký đề tài ở danh mục

B2: Danh sách các đề tài đăng mở được hiện ra B3: Người dùng nhấn chọn đăng ký đối với các đề tài chưa có người đăng ký

THIẾT KẾ PHẦN MỀM

Lược đồ tuần tự

Hình 4.1 Lược đồ tuần tự đăng ký đề tài

Hình 4.2 Lược đồ tuần tự tìm kiếm

Hình 4.3 Lược đồ tuần tự thống kê

Hình 4.4 Lược đồ tuần tự quên mật khẩu

4.1.5 Tải lên tệp tin Excel đề tài

Hình 4.5 Lược đồ tuần tự tải lên tệp tin Excel đề tài

Hình 4.6 Lược đồ tuần tự nộp bài làm

Lược đồ Cơ sở dữ liệu

Hình 4.7 Lược đồ cơ sở dữ liệu

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

Trang chủ

Hình 5.1 Màn hình trang chủ Bảng 5.1 Mô tả màn hình trang chủ

STT Chức năng Mô tả

1 Trang chủ Quay về trang chủ để xem thông báo hệ thống

2 Danh sách đề tài Xem danh sách các đề tài hiện có của hệ thống

3 Thông tin giảng viên Xem thông tin giảng viên

4 Thông tin sinh viên Xem thông tin sinh viên

5 Hướng dẫn đăng ký Hướng dẫn đăng ký đề tài

6 Thống kê Thống kê đề tài, thống kê sinh viên, thống kê giảng viên

7 Tìm kiếm Tìm kiếm người dùng, đề tài

8 Tin thông báo Danh sách cách thông báo, vào xem chi tiết thông báo

9 Đăng nhập Đăng nhập vào hệ thống với vai trò sinh viên, giảng viên, QuanTriVien

10 Thông báo ghim Thông báo mới nhất của hệ thống

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

Hình 5.2 Màn hình đăng nhập Bảng 5.2 Mô tả màn hình đăng nhập

2 Nhập password Mật khẩu là chuỗi 8 ký tự có ký tự đặc biệt và số, có thể chọn hiển thị hoặc ẩn mật khẩu

3 Nhấn đăng nhập Nếu sai userName, password sẽ yêu cầu nhập lại

4 Quên mật khẩu Dùng cho trường hợp quên mật khẩu

Quên mật khẩu

Hình 5.3 Màn hình Quên mật khẩu Bảng 5.3 Mô tả màn hình Quên mật khẩu

2 Nhấn gửi Nhấn gửi để nhận email cấp phép đổi mật khẩu Người dùng: SinhVien, Quản trị viên, GiangVien

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

Hình 5.4 Màn hình Khôi phục mật khẩu Bảng 5.4 Mô tả màn hình Khôi mật khẩu

1 Nhập mật khẩu mới Nhập mật khẩu mới

2 Nhập lại mật khẩu mới Nhập lại mật khẩu mới

3 Nhấn xác nhận Xác nhận khôi phục lại mật khẩu mới

Xem chi tiết thông báo

Hình 5.5 Xem chi tiết thông báo Bảng 5.5 Mô tả Xem chi tiết thông báo

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

Hình 5.6 Danh sách loại đề tài Bảng 5.6 Mô tả Danh sách loại đề tài

2 Tên loại đề tài Nhấn vào để xem danh sách các đề tài hiện có của loại đề tài đó Người dùng: Quản trị viên, SinhVien, GiangVien

Danh sách đề tài

Hình 5.7 Danh sách đề tài Bảng 5.7 Mô tả Danh sách đề tài

1 Combobox giảng viên Chọn giảng viên muốn xem đề tài

2 Button tìm kiếm Nhấn “tìm kiếm” đề lọc danh sách đề tài theo giảng viên

3 Tổng số đề tài tìm thấy

4 Xem chi tiết Xem chi tiết đề tài

Xem chi tiết đề tài

Hình 5.8 Xem chi tiết đề tài Bảng 5.8 Mô tả Xem chi tiết đề tài

1 Tên Loại đề tài Là loại đề tài của đề tài đó

2 Tên giảng viên Giảng viên hướng dẫn đề tài

3 Tên chuyên ngành Chuyên ngành dành cho đề tài này

5 Yêu cầu Yêu cầu về đề tài đối với sinh viên

7 Mục tiêu Mục tiêu cần đạt được

8 Số lượng sinh viên Số lượng sinh viên có thể tham gia làm đề tài

9 Trạng thái Trạng thái đề tài

11 Được phép đăng ký khác chuyên ngành Đối với đề tài này, sinh viên khác chuyên ngành có thể thực hiện đăng ký

13 Trưởng nhóm Sinh viên đăng ký nhóm đầu tiên

14 Giảng viên phản biện Giảng viên chấm đề tài

Thông tin giảng viên

Hình 5.9 Thông tin giảng viên Bảng 5.9 Mô tả Thông tin giảng 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 giảng viên

2 Button Tìm kiếm Nhấn chọn tìm kiếm để lọc danh sách 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 ngành được chọn Người dùng: Quản trị viên, SinhVien, GiangVien

Thông tin sinh viên

Hình 5.10 Thông tin sinh viên

Bảng 5.10 Mô tả 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à niên khóa được chọn

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ý

Hình 5.11 Hướng dẫn đăng ký Bảng 5.11 Mô tả Hướng dẫn đăng ký

1 Hướng dẫn đăng ký Hướng dẫn thông tin các bước để đăng ký đề tài Người dùng: Quản trị viên, SinhVien, GiangVien

Thống kê sinh viên

Hình 5.12 Thống kê sinh viên Bảng 5.12 Mô tả thống kê sinh viên

1 Tab sinh viên Chọn tab sinh viên để lọc thống kê số sinh viên theo chuyên ngành

4 Button Tìm kiếm Nhấn chọn tìm kiếm để thực hiện lọc thống kê

5 Lược đồ thống kê Nếu số liệu thống kê khác rỗng sẽ hiển thị biểu đồ Người dùng: Quản trị viên, SinhVien, GiangVien

Thống kê đề tài

Hình 5.13 Thống kê đề tài Bảng 5.13 Mô tả thống kê đề tài

1 Tab đề tài Chọn tab đề tài để lọc thống kê số đề tài theo chuyên ngành

Thống kê giảng viên

Hình 5.14 Thống kê giảng viên Bảng 5.14 Mô tả thống kê giảng viên

1 Tab giảng viên Chọn tab giảng viên để lọc thống kê số đề tài của giảng viên theo chuyên ngành

2 Input tên giảng viên Nhập tên giảng viên cần thống kê đề tài

Tìm kiếm đề tài

Hình 5.15 Tìm kiếm đề tài Bảng 5.15 Mô tả tìm kiếm đề tài

1 Tab đề tài Chọn tab đề tài để tìm kiếm đề tài

2 Input tên đề tài Nhập tên tên đề tài cần tìm kiếm đề tài

3 Button Tìm kiếm Nhấn chọn tìm kiếm để thực hiện lọc tìm kiếm

4 Tổng số đề tài Số đề tài tìm kiếm được theo từ khóa

5 Danh sách đề tài Danh sách đề tài được tìm theo từ khóa Người dùng: Quản trị viên, SinhVien, GiangVien

Tìm kiếm sinh viên

Hình 5.16 Tìm kiếm sinh viên Bảng 5.16 Mô tả tìm kiếm sinh viên

1 Tab sinh viên Chọn tab sinh viên để tìm kiếm sinh viên

2 Input tên sinh viên hoặc mã số sinh viên

Nhập keyword để tìm kiếm sinh viên

4 Tổng số sinh viên Số sinh viên tìm kiếm được theo từ khóa

5 Danh sách sinh viên Danh sách sinh viên được tìm theo từ khóa Người dùng: Quản trị viên, SinhVien, GiangVien

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

Hình 5.17 Tìm kiếm giảng viên Bảng 5.17 Mô tả tìm kiếm giảng viên

1 Tab giảng viên Chọn tab giảng viên để tìm kiếm giảng viên

2 Input tên giảng viên hoặc mã số giảng viên

Nhập keyword để tìm kiếm giảng viên

4 Tổng số giảng viên Số giảng viên tìm kiếm được theo từ khóa

5 Danh sách giảng viên Danh sách giảng viên được tìm theo từ khóa Người dùng: Quản trị viên, SinhVien, GiangVien

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

Hình 5.18 Quản trị tài khoản sinh viên Bảng 5.18 Mô tả Quản trị tài khoản sinh viên

1 Thông tin đăng nhập Thông tin người dùng sau khi đăng nhập

2 User name User name của sinh viên đăng nhập tài khoản

3 Đổi thông tin cá nhân Đổi thông tin cá nhân sinh viên

4 Đổi mật khẩu sinh viên Đổi mật khẩu sinh viên

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

6 Đăng ký đề tài Thực hiện đăng ký đề tài khi đến hạn

7 Quản trị nhóm Quản trị nhóm khi sinh viên đã đăng ký đề tài Người dùng: SinhVien

Thông tin đăng nhập

Hình 5.19 Thông tin đăng nhập Bảng 5.19 Mô tả thông tin đăng nhập

5 Đăng xuất Thoát khỏi vai trò sinh viên

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

Hình 5.20 Đổi thông tin cá nhân Bảng 5.20 Mô tả Đổi thông tin cá nhân

1 Nhập tên người dùng Chỉnh lại thông tin cần chỉnh mới nhất

2 Nhập email Chỉnh lại thông tin cần chỉnh mới nhất

3 Nhập số điện thoại Chỉnh lại thông tin cần chỉnh mới nhất

4 Button Lưu Nhấn lưu để lưu lại thông tin cập nhật Người dùng: Quản trị viên, SinhVien, GiangVien

Đổi mật khẩu

Hình 5.21 Đổi mật khẩu Bảng 5.21 Mô tả đổi mật khẩu

4 Button Lưu Nhấn lưu để lưu lại thông tin cập nhật Người dùng: Quản trị viên, SinhVien, GiangVien

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

Hình 5.22 Danh sách loại đề tài đăng ký Bảng 5.22 Mô tả Danh sách loại đề tài đăng ký

1 Danh sách loại đề tài đang mở đăng ký

Hiển thị thông báo chưa đến hạn hoặc list danh sách loại đề tái nếu đến hạn đăng ký đề tài của sinh viên

Đăng ký đề tài

Hình 5.23 Đăng ký đề tài

Bảng 5.23 Mô tả đăng ký đề tài

1 Xem chi tiết đề 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

Hình 5.24 Quản lý nhóm Bảng 5.24 Mô tả Quản lý nhóm

2 Học tập Sinh viên thực hiện nhiệm vụ theo yêu cầu của giảng viên hướng dẫn

3 Hủy nhóm Nêu là trưởng nhóm sẽ có quyền hủy nhóm

4 Thêm thành viên Nếu là trưởng nhóm có thể thực hiện thêm thành viên

5 Thành viên nhóm Xem danh sách thành viên nhóm

6 Xem danh sách sinh viên xin vào nhóm

Trưởng nhóm có thể xem và duyệt danh sách sinh viên xin vào nhóm

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

Hình 5.25 Thêm thành viên vào nhóm Bảng 5.25 Mô tả Thêm thành viên vào nhóm

1 Input mã số sinh viên Nhập vào số sinh viên muốn thêm vào nhóm

2 Button thêm thành viên Nhấn chọn để thêm thành viên vào nhóm Người dùng: SinhVien

Duyệt xin vào nhóm

Hình 5.26 Duyệt xin vào nhóm

Bảng 5.26 Mô tả duyệt xin vào nhóm

1 Label số sinh viên sinh 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” Người dùng: SinhVien

Học tập

Hình 5.27 Học tập Bảng 5.27 Mô tả Học tập

3 Chọn tệp tin đính kèm

Sửa bài nộp

Hình 5.28 Sửa bài nộp Bảng 5.28 Mô tả Sửa bài nộp

2 Thêm, xóa tệp tin đính kèm

Xem đánh giá

Hình 5.29 Xem đánh giá Bảng 5.29 Mô tả Xem đánh giá

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

Hình 5.30 Giảng viên quản trị đề tài

Bảng 5.30 Mô tả giảng viên quản trị đề tài

6 Tải danh sách đề tài

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

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

Hình 5.31 Giảng viên Quản trị nhóm – đề tài Bảng 5.31 Mô tả giảng viên quản trị nhóm – đề tài

1 Xem chi tiết Vào trang tác vụ, thực hiện công việc quản trị, giao nhiệm vụ cho sinh viên tham gia đề tài

2 Thành viên nhóm Xem danh sách thành viên nhóm

Thành viên nhóm

Hình 5.32 Giảng viên xem thành viên nhóm đề tài Bảng 5.32 Mô tả xem thành viên nhóm đề tài

1 Xem danh sách sinh viên đang tham gia nhóm đề tài Người dùng: GiangVien, SinhVien

Thêm nhiệm vụ

Hình 5.33 Giảng viên tạo nhiệm vụ Bảng 5.33 Mô tả giảng viên tạo nhiệm vụ

1 Nhập tiêu đề nhiệm vụ

2 Nhập nội dung yêu cầu

3 Chọn hạn nộp nhiệm vụ

Sửa nhiệm vụ

Hình 5.34 Giảng viên sửa nhiệm vụ

Bảng 5.34 Mô tả giảng viên 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á

Hình 5.35 Đánh giá Bảng 5.35 Mô tả giảng viên tạo đánh giá

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

Hình 5.36 Tải xuống tệp tin đã nộp Bảng 5.36 Mô tả tải xuống tệp tin đã nộp

Quản trị hệ thống

Hình 5.37 Quản trị hệ thống

Bảng 5.37 Mô tả Quản trị hệ thống

Người dùng: Quản trị viên

Quản trị thông báo

Hình 5.38 Quản trị thông báo Bảng 5.38 Mô tả Quản trị thông báo

3 Xem chi tiết thông báo

Thêm thông báo

Hình 5.39 Thêm thông báo Bảng 5.39 Mô tả thêm thông báo

1 Tiêu đề thông báo Nhập tiêu đề cho thông báo là bắt buộc

2 Số ngày Số ngày hiển thị thông báo

3 Nội dung Nhập nội dung và căn chỉnh nội dung là bắt buộc

4 Nhập lại Các input sẽ reset rỗng để nhập lại

5 Save Lưu thông tin thông báo

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

Hình 5.40 Cập nhật thông báo Bảng 5.40 Mô tả cập nhật thông báo

1 Tiêu đề thông báo Chỉnh sửa và nhập tiêu đề cho thông báo là bắt buộc

2 Số ngày Chỉnh sửa số ngày hiển thị thông báo

3 Nội dung Chỉnh sửa và nhập nội dung và căn chỉnh nội dung

4 Nhập lại Các input sẽ reset rỗng để nhập lại

5 Save Lưu lại thông tin thông báo vừa cập nhật

Quản trị cấu hình

Hình 5.41 Quản trị cấu hình Bảng 5.41 Mô tả quản trị cấu hình

2 Xem chi tiết cấu hình

5 Sinh viên –cấu hình Thêm sinh viên vào cấu hình để sinh viên đăng ký đề tài Người dùng: Quản trị viên

Thêm cấu hình

Hình 5.42 Thêm cấu hình Bảng 5.42 Mô tả thêm cấu hình

1 Chọn loại đề tài Chọn loại đề tài mong muốn, bắt buộc

2 Chọn niên khóa Chọn niên khóa mong muốn, bắt buộc

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 đăng ký

9 Thời gian sinh viên bắt đầu đăng ký

10 Thời gian sinh viên kết thúc đăng ký

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

18 Button thêm Sau khi điền đủ thông tin các ô thì nhất chọn để Thêm

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

Hình 5.43 Cập nhật cấu hình Bảng 5.43 Mô tả cập nhật cấu hình

1 Chọn loại đề tài Chọn loại đề tài mong muốn, bắt buộc

2 Chọn niên khóa Chọn niên khóa mong muốn, bắt buộc

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 đăng ký

9 Thời gian sinh viên bắt đầu đăng ký

10 Thời gian sinh viên kết thúc đăng ký

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

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

19 Button reset Reset giá trị null cho các trường giá trị Người dùng: Quản trị viên

Sinh viên - cấu hình

Hình 5.44 Sinh viên cấu hình

Bảng 5.44 Mô 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

2 Thêm sinh viên Thêm sinh viên vào cấu hình

3 Label tổng số sinh viên

4 Button xóa Xóa 1 sinh viên khỏi cấu hình

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

Hình 5.45 Thêm sinh viên cấu hình Bảng 5.45 Mô tả thêm sinh viên cấu hình

1 Input mã số sinh viên Nhập mã số sinh viên muốn thêm vào cấu hình

2 Thêm sinh viên Nhấn để thêm sinh viên

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

Hình 5.46 Quản trị người dùng Bảng 5.46 Mô tả quản trị người dùng

1 Input từ khóa Nhập từ khóa tìm kiếm sinh viên giảng viên

2 Button tìm kiếm Nhấn để tìm kiếm sinh viên, giảng viên

4 Cập nhật thông tin người dùng Cập nhật thông tin người dùng

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

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

Hình 5.47 Thêm người dùng mới Bảng 5.47 Mô tả thêm người dùng mới

6 userType Tùy theo user type mà có thêm các ô nhập mới cho phù hợp

7 Lớp Khi userType là sinh viên

8 Tổng tín chỉ Khi userType là sinh viên

9 Điểm Khi userType là sinh viên

10 Button thêm Thêm người dùng mới

11 reset Set null các trường dữ liệu và nhập lại

12 Chức vụ Khi userType là giảng viên

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

Hình 5.48 Tải lên danh sách người dùng Bảng 5.48 Mô tả tải lên danh sách người dùng

2 Chọn tệp tin cần tải lên Bắt buộc phải dùng tệp tin mẫu

3 Lưu Thực hiện tải lên danh sách người dùng mới

Quản trị đề tài

Hình 5.49 Quản trị đề tài Bảng 5.49 Mô tả quản trị đề tài

3 Button tìm kiếm Sau khi chọn xong loại đề tài và giảng viên, nhấn chọn “tìm kiếm” để lọc ra danh sách đề tài mong muốn

6 Hủy đề tài Sinh viên không thể đăng ký nữa

9 Tải danh sách đề tài

Thêm đề tài

Hình 5.50 Thêm đề tài Bảng 5.50 Mô tả 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

11 Được đăng ký khác chuyên ngành

12 Button thêm Thêm đề tài

13 Button reset Set null các trường để nhập lại

Sửa đề tài

Bảng 5.51 Mô tả sửa đề tài

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

11 Được đăng ký khác chuyên ngành

12 Button cập nhật Cập nhật đề tài

13 Button reset Set null các trường để nhập lại

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

Hình 5.52 Tải lên danh sách đề tài

Bảng 5.52 Mô tả 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 nhau

2 Tải lên tệp tin mẫu danh sách đề tài

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 QuanTriVien là khác nhau

3 Lưu Tải lên danh sách đề tài

Người dùng: Quản trị viên, GiangVien

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

Hình 5.53 Xuất excel danh sách đề tài QuanTriVien Bảng 5.53 Mô tả xuất excel danh sách đề tài QuanTriVien

3 Xuất Xuất tệp tin danh sách đề tài

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

Giảng viên click vào nút “ Xuất excel” trên màn hình để xuất ra danh sách đề tài

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

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

Giảng viên click vào nút “ Xuất excel” trên màn hình để xuất ra danh sách nhiệm vụ

Hình 5.55 Xuất excel danh sách nhiệm vụ

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

Hình 5.56 Quản trị chung – niên khóa Bảng 5.54 Mô tả quản trị chung niên khóa

Thêm niên khóa

Hình 5.57 Thêm niên khóa Bảng 5.55 Mô tả thêm niên khóa

2 Năm bắt đầu niên khóa

3 Năm kết thúc niên khóa

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

Hình 5.58 Cập nhật niên khóa Bảng 5.56 Mô tả cập nhật niên khóa

2 Năm bắt đầu niên khóa

3 Năm kết thúc niên khóa

Quản trị chung – lớp

Hình 5.59 Quản trị chung – lớp Bảng 5.57 Mô tả quản trị chung – lớp

Thêm lớp

Hình 5.60 Thêm lớp Bảng 5.58 Mô tả thêm lớp

Cập nhật lớp

Hình 5.61 Cập nhật lớp Bảng 5.59 Mô tả cập nhật lớp

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

Hình 5.62 Quản trị chung – chuyên ngành Bảng 5.60 Mô tả quản trị chung – chuyên ngành

Thêm chuyên ngành

Hình 5.63 Thêm chuyên ngành Bảng 5.61 Mô tả thêm chuyên ngành

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

Hình 5.64 Cập nhật chuyên ngành

Bảng 5.62 Mô tả cập nhật chuyên ngành

Duyệt đề tài

Hình 5.65 Duyệt đề tài Bảng 5.63 Mô tả duyệt đề tài

1 Combobox giảng viên Chọn tên giảng viên muốn duyệt đề tài

2 Button tìm kiếm Thực hiện lọc ra danh sách đề tài của giảng viên được chọn

3 Tổng số đề tài Số đề tài được lọc ra

4 checkbox Nhấn để chọn đề tài muốn duyệt

5 Button duyệt Chuyển trạng thái được duyệt cho các đề tài được chọn

6 Xem chi tiết Xem chi tiết đề tài

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

Cài đặt

● Phần mềm IntelliJ IDEA 2022.2 trở lên

Các bước cài đặt API

- Tải và giải nén thư mục chứa Project Backend

Hình 6.1 Nội dung thư mục sau khi giải nén

- Mở IntelliJ và vào Tệp tin → Open, 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

- Chuột phải vào tệp tin pom.xml → Maven → Reload Project để tải các dependency cần thiết

- Vào tệp tin application.properties thay đổi thông tin cấu hình database để có thể kết nối được với database

Hình 6.4 Vị trí tệp tin application.properties và các nội dung cần thay đổi

- Run K19Nhom3TlcnApplication để chạy server

Hình 6.5 Chạy Back-end thành công

- Để có dữ liệu chạy thử, chạy script SQL trong tệp tin GenerateData.sql

Hình 6.6 Vị trí tệp tin GenerateData.sql

● Phần mềm Visual Studio 2019 trở lên

Các bước cài đặt API:

- Cài đặt node từ trang chính thống của nodejs: version v14.17.3

Hình 6.7 Trang tải xuống Nodejs

- Cài đặt môi trường Angular version 14: bằng lệnh npm i @angular/cli

Hình 6.8 Trang chủ của Angular

- Sau khi cài đặt môi trường xong, ta thực hiện giải nén source code:

Hình 6.9 Nội dung code front-end sau khi giải nén

- Mở source code bằng Visual Studio Code

Hình 6.10 Source code Front-end được mở trong VS Code

• Chạy lệnh : npm i để cài đặt thư viện cho source code

• Sau khi cài đặt xong: chạy lệnh : npm start để run source code

Hình 6.11 Giao diện Front-end khi chạy thành công

Tổng số lượng testcase 20 + 6 + 11 + 5 + 11 + 15 + 9 = 77 testcase

Trong đó, đã test cho các chức năng:

- Tìm kiếm cơ bản, tìm kiếm nâng cao: 9 testcase

- Thống kê số liệu: 11 testcase

Số lượng testcase không pass: 14 testcase

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

Về kiến thức, mỗi thành viên của nhóm đã học hỏi và trau dồi được thêm rất nhiều cho chính bản thân mình

● 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

● Phát triển phần mềm bằng Angular

● Ứng dụng Angular material, CKEditor, ng-template

● Xây dựng back-end theo mô hình MVC

● Học hỏi được các debug để tìm lỗi và giải quyết các lỗi xảy ra trong quá trình phát triển phần mềm

● Sử dụng thành thạo một số công cụ test: Postman,…

● 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 ,…

● Xử lý bất đồng bộ

● Xử lý tải lên tệp tin excel, xuất thống kê tệp tin excel

● Tính tương thích hiển thị của ứng dụng trên mọi trình duyệt

● Sử dụng thành thạo gitlab`

● Deploy backend lên server AWS

● Rèn luyện kỹ năng làm việc nhóm, giải quyết vấn đề chung

● Tư duy phản biện, kỹ năng giao tiếp giữa các thành viên trong nhóm

● Kỹ năng đọc tài liệu tiếng anh, tự học, tự nghiên cứu để giải quyết khó khăn

● Kỹ năng quản lý thời gian để thực hiện đúng tiến độ mà không bị ảnh hưởng bởi nhiều yếu tố khác nhau

Sau khi thực hiện đề tài nhóm đã có được Web quản lý đăng ký đề tài Tiểu luận chuyên ngành và Khóa luận tốt nghiệp:

● Chức năng cho người dùng:

+ Xem thông báo, + Xem danh sách đề tài, + Thông tin sinh viên, + Thông tin giảng viên, + Hướng dẫn đăng ký, + Thống kê,

• Chức năng cho Sinh viên:

+ Quản trị tài khoản + Đăng ký đề tài + Quản lý Nhóm + Xin vào nhóm + Học tập, làm nhiệm vụ, nộp bài + Tải xuống tệp tin bài nộp

• Chức năng cho Giảng viên:

+ 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

• Chức năng cho Quản trị viên:

+ Quản trị đề tài + Thêm danh sách đề tài + Thêm danh sách người dùng + Xuất excel danh sách đề tài + Quản trị tài khoản

+ Quản trị cấu hình + Quản trị người dùng + Quản trị chung + Duyệt đề tài

● Kinh nghiệm lập trình website bằng Angular

● Kinh nghiệm lập trình Spring boot, Java Core

● Kinh nghiệm phát triển, triển khai API

● Kinh nghiệm xử lý bất đồng bộ

● Kỹ năng giải quyết vấn đề, làm việc nhóm

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

● Hệ thống đa dạng chức năng cho sinh viên, giảng viên, Quản trị viên

● Dễ dàng sử dụng thao tác

● Sinh viên dễ dàng theo dõi, đăng ký đề tài, học tập, làm nhiệm vụ theo giai đoạn đề tài

● 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

● Là kênh hỗ trợ giảng viên, ban chủ nhiệm khoa kết nối gần với sinh viên hơn trong công tác quản lý giảng dạy

● Có kênh thông tin liên hệ khoa khi cần thiết

● Sử dụng công nghệ Angular + Spring boot, giúp code linh động, giảm thiểu lượng code

● Mô hình MVC tiện dụng

● Chức năng nhập văn bản trên trang web chưa có nhiều nút hỗ trợ căn chỉnh

● Chưa đa dạng hình thức đăng nhập

● Dễ dàng tiếp cận và phát triển phần mềm do đã có kinh nghiệm lập trình với Angular, Spring boot, Java core

● 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

● Kinh nghiệm và kỹ năng của nhóm còn thiếu sót và non trẻ cũng dẫn đến không ít khó khăn để giải quyết các vấn đề

Trong quá trình thực hiện đề tài, về mặt thời gian cũng như kiến thức đã khiến cho nhóm có nhiều trở ngại trong việc hiện thức hóa nhiều tình năng cho hệ thống, do đó nhóm đã đề ra hướng phát triển cho hệ thống như sau:

● Chat box cho sinh viên, giảng viên

● Triển khai chống đạo văn trong báo cáo giai đoạn, nhiệm vụ của sinh viên

NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

Về kiến thức, mỗi thành viên của nhóm đã học hỏi và trau dồi được thêm rất nhiều cho chính bản thân mình

● 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

● Phát triển phần mềm bằng Angular

● Ứng dụng Angular material, CKEditor, ng-template

● Xây dựng back-end theo mô hình MVC

● Học hỏi được các debug để tìm lỗi và giải quyết các lỗi xảy ra trong quá trình phát triển phần mềm

● Sử dụng thành thạo một số công cụ test: Postman,…

● 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 ,…

● Xử lý bất đồng bộ

● Xử lý tải lên tệp tin excel, xuất thống kê tệp tin excel

● Tính tương thích hiển thị của ứng dụng trên mọi trình duyệt

● Sử dụng thành thạo gitlab`

● Deploy backend lên server AWS

● Rèn luyện kỹ năng làm việc nhóm, giải quyết vấn đề chung

● Tư duy phản biện, kỹ năng giao tiếp giữa các thành viên trong nhóm

● Kỹ năng đọc tài liệu tiếng anh, tự học, tự nghiên cứu để giải quyết khó khăn

● Kỹ năng quản lý thời gian để thực hiện đúng tiến độ mà không bị ảnh hưởng bởi nhiều yếu tố khác nhau

Sau khi thực hiện đề tài nhóm đã có được Web quản lý đăng ký đề tài Tiểu luận chuyên ngành và Khóa luận tốt nghiệp:

● Chức năng cho người dùng:

+ Xem thông báo, + Xem danh sách đề tài, + Thông tin sinh viên, + Thông tin giảng viên, + Hướng dẫn đăng ký, + Thống kê,

• Chức năng cho Sinh viên:

+ Quản trị tài khoản + Đăng ký đề tài + Quản lý Nhóm + Xin vào nhóm + Học tập, làm nhiệm vụ, nộp bài + Tải xuống tệp tin bài nộp

• Chức năng cho Giảng viên:

+ 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

• Chức năng cho Quản trị viên:

+ Quản trị đề tài + Thêm danh sách đề tài + Thêm danh sách người dùng + Xuất excel danh sách đề tài + Quản trị tài khoản

+ Quản trị cấu hình + Quản trị người dùng + Quản trị chung + Duyệt đề tài

● Kinh nghiệm lập trình website bằng Angular

● Kinh nghiệm lập trình Spring boot, Java Core

● Kinh nghiệm phát triển, triển khai API

● Kinh nghiệm xử lý bất đồng bộ

● Kỹ năng giải quyết vấn đề, làm việc nhóm

ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

● Hệ thống đa dạng chức năng cho sinh viên, giảng viên, Quản trị viên

● Dễ dàng sử dụng thao tác

● Sinh viên dễ dàng theo dõi, đăng ký đề tài, học tập, làm nhiệm vụ theo giai đoạn đề tài

● 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

● Là kênh hỗ trợ giảng viên, ban chủ nhiệm khoa kết nối gần với sinh viên hơn trong công tác quản lý giảng dạy

● Có kênh thông tin liên hệ khoa khi cần thiết

● Sử dụng công nghệ Angular + Spring boot, giúp code linh động, giảm thiểu lượng code

● Mô hình MVC tiện dụng

● Chức năng nhập văn bản trên trang web chưa có nhiều nút hỗ trợ căn chỉnh

● Chưa đa dạng hình thức đăng nhập

THUẬN LỢI

● Dễ dàng tiếp cận và phát triển phần mềm do đã có kinh nghiệm lập trình với Angular, Spring boot, Java core

● 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.

KHÓ KHĂN

Angular là công nghệ tương đối mới nên không được giảng dạy tại các trường học, đòi hỏi người dùng phải tự mày mò và học hỏi Do đó, việc tìm kiếm giải pháp và lời giải cho các vấn đề phát sinh trong quá trình phát triển phần mềm trở thành khó khăn đối với các nhóm phát triển.

● Kinh nghiệm và kỹ năng của nhóm còn thiếu sót và non trẻ cũng dẫn đến không ít khó khăn để giải quyết các vấn đề.

HƯỚNG PHÁT TRIỂN

Trong quá trình thực hiện đề tài, nhóm gặp nhiều trở ngại về thời gian và kiến thức, ảnh hưởng đến việc hiện thức hóa đầy đủ các tính năng cho hệ thống Để khắc phục, nhóm đã đề ra hướng phát triển cụ thể cho hệ thống.

● Chat box cho sinh viên, giảng viên

● Triển khai chống đạo văn trong báo cáo giai đoạn, nhiệm vụ của sinh viên

Tiêu đề	Tìm Hiểu Spring Boot, Angular Và Xây Dựng Web Quản Lý TLCN Và KLTN
Người hướng dẫn	ThS. Nguyễn Hữu Trung, ThS. Nguyễn Thủy An
Trường học	Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh
Chuyên ngành	Công Nghệ Phần Mềm
Thể loại	Khóa Luận Tốt Nghiệp Kỹ Sư CNTT
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	152
Dung lượng	10,19 MB
File đính kèm	file dinh kem.rar (14 MB)