Tải bản đầy đủ (.pdf) (50 trang)

đồ án 1 xây dựng website quản lý tín chỉ outit

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.36 MB, 50 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>BỘ GIÁO DỤC VÀ ĐÀO TẠO</b>

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CÔNG NGHỆ PHẦN MỀM</b>

<b>Sinh viên thực hiện 4:Nguyễn Quang AnMã sinh viên 4:21521808</b>

Tp HCM, tháng 12 năm 2023

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

<b>Tên đề tài: Xây dựng website OUTIT giúp sinh viên UIT quản lý tín chỉ</b>

<b>Giảng viên hướng dẫn: Huỳnh Tuấn Anh</b>

<b>Thời gian thực hiện: 09/2022 đến 12/2022</b>

DTO với các relationship phù hợp ở tầng backend.

6. Thiết kế backend sử dụng các Design Pattern (Builder, DTO) và tuân thủ mơ hình 3lớp trong Spring Boot

7. Nộp file nén (*.rar) lưu sản phẩm đề tài bao gồm:- File báo cáo word (*.docx)

- File thuyết trình (*.pptx)

- Thư mục siteroot bao gồm: các file định dạng (*.css), template (*dwt), các trangweb (*.html), các file lập trình xử lý scripts nếu có (*.js), thư mục hình ảnh, âmthanh, videos, ...).

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

Tp.HCM, ngày 18 tháng 12 năm 2023

<b>GIẢNG VIÊN GIẢNG DẠY</b>

(Ký và ghi rõ họ tên)

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>LỜI CẢM ƠN</b>

Kính gửi q thầy cơ,

Trước hết, nhóm xin gửi lời tri ân sâu sắc đến quý thầy cô đã dành thời gian quý báu đểxem xét và đánh giá báo cáo đồ án của nhóm. Đây là một cơ hội quý báu để em học hỏi vàphát triển kiến thức của mình, và sự hỗ trợ chân thành từ quý thầy cô là nguồn động viênlớn lao giúp nhóm vượt qua những thách thức trong q trình nghiên cứu và thực hiện đồán.

Nhóm hiểu rằng thầy cơ đã dành nhiều thời gian và công sức để đọc và đánh giá từng phầncủa báo cáo. Nhóm rất biết ơn vì sự tận tâm và lịng nhiệt huyết mà q thầy cô đã dànhcho việc giảng dạy và hướng dẫn nhóm.

Một lần nữa, nhóm xin chân thành cảm ơn sự đồng hành và hỗ trợ từ quý thầy cô tronghành trình học tập của nhóm. Mong rằng, những điều tốt lành sẽ đến với q thầy cơ, vànhóm hy vọng có cơ hội được học hỏi thêm nhiều từ sự am hiểu sâu sắc của quý thầy côtrong tương lai.

Trân trọng,

Sinh viên thực hiện

<b>Trần Gia Bảo - 21521862Nguyễn Quang An - 21521808</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN</b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<small>2.3.4 Cách hoạt động của javascript là gì?21</small>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<small>3.3. Phân tích 1 vài use case38</small>

<small>3.3.2. Use case Tạo danh sách môn học cho học kỳ mới.39</small>

<small>3.4.1. API Cập nhật danh sách môn học 1 học kỳ của sinh viên42</small>

<small>3.4.2. API lấy mục tiêu của từng loại tín chỉ của sinh viên43</small>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<small>Hình 3.3.1: Use Case Tạo danh sách mơn học cho kì mới36</small>

<small>Hình 3.4.2: API Lấy thơng tin chi tiết của 1 sinh viên40</small>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<i><small>Bảng 3.3.2.2: Bảng mô tả tạo danh sách mới cho học kỳ tiếp</small></i> <small>37</small>

<i><small>Bảng 3.3.2.2: Bảng mô tả usecase đặt mục tiêu môn học</small></i> <small>39</small>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>1. GIỚI THIỆU ĐỀ TÀI</b>

<b>1.3 Lý do chọn thiết kế Website:</b>

● Đứng trước nhu cầu số lượng sinh viên cần quản lí q trình học tập, số lượng tínchỉ mơn học của mình mà chưa có một cơng cụ nào để thống kê, các sinh viên phảitự tạo file excel, phải tự tìm tịi các quy chuẩn và các loại tín chỉ cịn rắc rối gâynhiều khúc mắc cho sinh viên UIT, nhóm quyết định phát triển một website để ứngdụng vào việc tự động hóa hồ sơ cá nhân của từng sinh viên, quản lý tiến độ học tậpcủa từng loại tín chỉ một cách linh hoạt, tránh cho sinh viên đăng ký nhầm môn, lậpđược kế hoạch học tập hợp lý.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>1.5 Môi trường thiết kế:</b>

- Adobe Dreamweaver.

<b>1.6 Công cụ hỗ trợ:</b>

- Photoshop: layout giao diện, hình ảnh, nút lệnh xử lý, …

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

- HTML được tương thích với mọi hệ điều hành cùng các trình duyệt của nó. Khảnăng dễ học, dễ viết là một ưu điểm của HTML không những vậy việc soạn thảo địihỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứ một trình soạnthảo văn bản nào để viết và chỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã có thểtạo ra một file chứa HTML. Hiện nay, phiên bản mới nhất của HTML là HTML5 vớinhiều tính năng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt hỗtrợ mạnh mẽ các phần tử multimedia mà không cần các plugin. Một tập tin HTML baogồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML. HTML5nói chung mạnh mẽ hơn nhiều khơng chỉ về tốc độ và độ thích ứng cao mà chính là

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứngdụng) và DOM (Document Object Model – các đối tượng thao tác văn bản).

<b>2.2 Định dạng Website với CSS:</b>

<i>Hình 2.2: CSS</i>

<b>2.2.1 Định Nghĩa</b>

<b>- CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu thiết kế sử</b>

dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World Wide Web (W3C)giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mởrộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web.

- Khi bắt đầu một Style

Sheets, thì bắt buộc mở bằng <HEAD> và kết thúc bằng <HEAD> và tiếptheo sau đó là khai báo <STYLE> và kết thúc bằng <STYLE> và saunhững bước trên thì có thể nhìn thấy ngun đoạn code như sau: <head><style>

và ở giữa thêm vào saunày

</head>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

• Cấu trúc của CSS:Tag {definition1;

definition2;...; definition n}

Ví dụ sau đây về dòng lệnh của CSS:

H2{font-size: 16pt, font-style: italic, font-family: arial}

- CSS3 mang lại nhiều ưu điểm đáng kể so với các phiên bản trước, nhưng cũng có một sốhạn chế. Dưới đây là một tóm tắt về ưu và nhược điểm của CSS3:

<b>2.2.2 Ưu Điểm của CSS3:</b>

● Flexbox và Grid Layout giúp quản lý layout trang web trở nên linh hoạt vàdễ dàng hơn.

Custom Properties:

● Sử dụng biến (custom properties) giúp quản lý mã nguồn CSS một cách linhhoạt và dễ bảo trì.

Web Fonts và Typography:

● Hỗ trợ sử dụng font từ xa và cung cấp nhiều tính năng mới cho định dạngvăn bản.

CSS Filters:

● Cung cấp các hiệu ứng lọc, giúp tạo ra trải nghiệm trực quan và sáng tạo.Đa Ngôn Ngữ và Trang In:

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

● CSS3 hỗ trợ các tính năng như @media và paged media giúp quản lý nộidung cho các ứng dụng đa ngôn ngữ và in ấn.

<b>2.2.3 Nhược Điểm của CSS3:</b>

Tính Năng Chưa Hồn Thiện:

● Một số tính năng của CSS3 vẫn đang trong quá trình thử nghiệm và chưahồn thiện, có thể gây ra sự khơng ổn định trong một số trường hợp.Tóm lại, CSS3 mang lại nhiều ưu điểm quan trọng cho phát triển web hiện đại, nhưngcũng cần phải cân nhắc đến các hạn chế và vấn đề tương thích để áp dụng một cách hiệuquả và bảo đảm trải nghiệm người dùng tốt nhất trên mọi trình duyệt.

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>2.3.2 Javascript là gì?</b>

- Javascript chính là một ngơn ngữ lập trình web rất phổ biến ngày nay.- Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho websitetrở nên sống động hơn. Chúng cũng đóng vai trị tương tự như một phầncủa website, cho phép Client-side Script từ người dùng tương tự máy chủ(Nodejs) để tạo ra những website động.

<b>2.3.3 Lịch sử phát triển của Javascript:</b>

● Brendan Eich chính là người đã phát triển Javascript tại Netscape với tiềnthân là Mocha. Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>2.3.4 Cách hoạt động của javascript là gì?</b>

● Thơng thường, JavaScript sẽ được nhúng trực tiếp vào một website hoặcchúng được tham chiếu qua file .js hoặc .JavaScript.

● Đây là một ngôn ngữ đến từ phía Client nên Script sẽ được download vềmáy client khi truy cập.

● Tại đây, chúng sẽ được hệ thống xử ý. Vì vậy, bạn khơng cần phải tải vềmáy server rồi chờ cho chúng xử lý xong mới phản hồi được kết quả đếnclient.

<b>2.3.5 Javascript dùng để làm gì?</b>

- Bên cạnh việc tìm hiểu javascript là ngơn ngữ gì thì chúng được sử dụngđể làm gì cũng rất quan trọng. Việc nắm bắt được mục đích của ngơn ngữđặc biệt này sẽ giúp bạn dễ dàng sử dụng chúng hơn trong cơng việc.

<b>Ưu nhược điểm của ngơn ngữ lập trình Javascript: Là một ngơn ngữ lập trình</b>

rất phổ biến hiện nay, Javascript có cho mình rất nhiều ưu điểm nổi bật. Tuy nhiên,bên cạnh những ưu điểm đó thì ngơn ngữ lập trình này cũng có những nhược điểmcần được lưu ý.

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

● Giao diện của ứng dụng phong phú với nhiều thành phần như Dragand Drop, Slider để cung cấp đến cho người dùng một Rich

Interface (giao diện giàu tính năng).

● Giúp thao tác với người dùng phía Client và tách biệt giữa các Client

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

với nhau.

<b>2.3.7 Nhược điểm:</b>

Một số nhược điểm còn tồn tại.● JS Code Snippet khá lớn.

● JS dễ bị các hacker và scammer khai thác hơn.

● JS cũng không có khả năng đa luồng hoặc đa dạng xử lý.

● Có thể được dùng để thực thi những mã độc ở trên máy tính củangười sử dụng.

● Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đódẫn đến sự khơng đồng nhất.

● Vì tính bảo mật và an tồn nên các Client-Side Javascript sẽ khơngcho phép đọc hoặc ghi các file.

● JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bịđược kết nối mạng.

<b>2.4 Sử dụng framework Bootstrap để phát triển website chuẩn responsive:`</b>

<i>Hình 2.4: Bootstrap</i>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>2.4.1 Định Nghĩa</b>

- Bootstrap là một framework front-end phổ biến được phát triển bởi Twitter, được xâydựng trên nền tảng HTML, CSS, và JavaScript. Nó cung cấp một bộ cơng cụ giúp tạo ragiao diện người dùng đẹp và hiệu quả một cách nhanh chóng và dễ dàng. Dưới đây là mộtgiới thiệu về cách Bootstrap giúp chuẩn hóa phát triển web:

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

Reactjs là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giaodiện người dùng hay UI. Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phảilàm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng. UI là tập hợpnhững thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kểđến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trìnhmột website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi vànhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sảnphẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lýtương tác.

Ngoài việc hỗ trợ xây dựng giao diện nhanh, hạn chế lỗi trong quá trình code, cảithiện performance website thì những tính năng đặc biệt dưới đây có thể là lý do khiến bạn“chốt sale” với Reactjs và bắt đầu tìm hiểu nó từ bây giờ:

● Phù hợp với đa dạng thể loại website: Reactjs khiến cho việc khởi tạowebsite dễ dàng hơn bởi vì khơng cần phải code nhiều như khi tạo trang

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

web thuần chỉ dùng JavaScript, HTML và nó đã cung cấp cho chúng ta đủloại công cụ để bạn có thể dùng cho nhiều trường hợp.

● Tái sử dụng các Component: Nếu xây dựng các Component đủ tốt, đủflexible để có thể thỏa các “yêu cầu” của nhiều dự án khác nhau thì chúng tachỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dựán sau. Không chỉ riêng mỗi Reactjs mà các framework hiện nay cũng đềucho phép chúng ta thực hiện điều đó, ví dụ Flutter chẳng hạn.

● Thân thiện với SEO: SEO là một phần không thể thiếu để đưa thơng tinwebsite lên top đầu tìm kiếm của Google. Bản chất Reactjs là một thư việnJavaScript, Google Search Engine hiện nay đã crawl và index được codeJavaScript.

● Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việcdebug trong quá trình phát triển ứng dụng. Điều đó giúp tăng tốc q trìnhrelease sản phẩm cung như quá trình coding.

<b>2.6 RestAPI</b>

<b>2.6.1 Định Nghĩa</b>

Rest là một kiểu kiến trúc phần mềm cho các hệ thống phân tán, như World Wide Web.Các nguyên lý cơ bản của REST bao gồm:

<b>● Stateless: Mỗi yêu cầu HTTP chứa tất cả thông tin cần thiết để xử lý yêu cầu.</b>

Server không lưu trạng thái của client giữa các yêu cầu.

<b>● Client-Server Architecture: Phân chia giữa client (user interface) và server (lưu</b>

trữ dữ liệu) để cải thiện khả năng di động và mở rộng.

<b>● Uniform Interface: Giao diện thống nhất giúp tăng cường khả năng tương tác giữa</b>

các hệ thống khác nhau trên Internet.

<b>● Cacheable: Các phản hồi có thể được cache để cải thiện hiệu suất.</b>

<b>Mục Đích: REST API là một kiểu thiết kế dành cho web services. Nó cho phép các ứng</b>

dụng khác nhau giao tiếp với nhau thông qua giao thức HTTP. REST API thường được sửdụng để xây dựng các dịch vụ web mà máy khách có thể truy xuất và sử dụng dữ liệu từmột server.

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>2.6.2 Ứng Dụng</b>

<b>● Truyền Dữ Liệu: Các ứng dụng trên nền tảng khác nhau có thể dễ dàng giao tiếp</b>

với nhau.

<b>● Tích Hợp Hệ Thống: Kết nối các hệ thống và dịch vụ khác nhau, như tích hợp các</b>

dịch vụ thanh toán, mạng xã hội.

<b>● Phát Triển Dự Án Đa Nền Tảng: Xây dựng các dịch vụ backend có thể hỗ trợ</b>

nhiều loại máy khách như web, di động.

<b>2.7 Spring boot</b>

<b>2.7.1 Định Nghĩa</b>

Spring Boot là một dự án trong họ Spring, được thiết kế để đơn giản hóa quá trình cấuhình và triển khai ứng dụng Spring. Các đặc điểm chính của Spring Boot bao gồm:

<b>● Auto-Configuration: Spring Boot tự động cấu hình ứng dụng dựa trên các thư</b>

viện có trong classpath.

<b>● Standalone: Ứng dụng Spring Boot có thể chạy độc lập mà khơng cần đến một</b>

web server ngồi.

<b>● Opinionated Defaults: Spring Boot cung cấp một bộ cấu hình mặc định giúp bắt</b>

đầu một ứng dụng nhanh chóng.

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>Mục Đích: Spring Boot là một dự án của Spring Framework, được thiết kế để giúp lập</b>

trình viên nhanh chóng xây dựng các ứng dụng dựa trên Spring một cách dễ dàng hơn vàvới ít cấu hình hơn.

<b>2.7.2 Ứng Dụng</b>

<b>● Tạo Ứng Dụng Web & Microservices: Hỗ trợ việc tạo ra các ứng dụng web và</b>

microservices một cách nhanh chóng.

<b>● Tự Động Cấu Hình: Tự động cấu hình các thành phần cần thiết cho ứng dụng</b>

Spring, giúp giảm bớt cơng việc cấu hình và tăng tốc độ phát triển.

<b>● Tích Hợp Dễ Dàng: Tích hợp dễ dàng với các công nghệ và thư viện khác, như</b>

JPA, Hibernate, JDBC.

Khi kết hợp sử dụng Spring Boot và Rest API, bạn có thể xây dựng các ứng dụng webmạnh mẽ, linh hoạt, và dễ dàng mở rộng. Spring Boot thường được sử dụng để tạo ra cácứng dụng server-side, trong đó có các REST API để giao tiếp với các ứng dụngclient-side.

<b>● Mã Nguồn Mở: MySQL là phần mềm mã nguồn mở, cho phép người dùng sửa đổi</b>

và tùy chỉnh theo nhu cầu cụ thể.

<b>● Hiệu Suất và Tính Khả Dụng: MySQL nổi tiếng với khả năng xử lý lớn, độ tin</b>

cậy cao và tính khả dụng.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>● Bảo Mật: MySQL cung cấp nhiều tính năng bảo mật, bao gồm xác thực, mã hóa</b>

dữ liệu, và quản lý quyền truy cập.

<b>● Scalability: MySQL có khả năng mở rộng tốt, hỗ trợ cả các ứng dụng nhỏ lẻ và</b>

các hệ thống lớn.

<b>● Hỗ Trợ Giao Dịch: MySQL hỗ trợ giao dịch, giúp đảm bảo tính nhất quán và độ</b>

tin cậy của dữ liệu.

<b>Ứng dụng</b>

<b>● Phát Triển Web: MySQL thường được sử dụng trong các ứng dụng web, đặc biệt</b>

phổ biến trong kết hợp với các ngơn ngữ lập trình như PHP, Python, Java.

<b>● Ứng Dụng Doanh Nghiệp: Do khả năng xử lý dữ liệu mạnh mẽ và tính bảo mật,</b>

MySQL cũng được sử dụng rộng rãi trong các ứng dụng doanh nghiệp.

<b>● Ứng Dụng Di Động: MySQL cũng có thể được sử dụng cho cơ sở dữ liệu phía</b>

server trong các ứng dụng di động.

<i>Hình 2.8: Ứng dụng SQL</i>

<b>3. PHÂN TÍCH THIẾT KẾ</b>

<b>3.1. Phân tích u cầu</b>

<b>3.1.1.Thiết kế cơ sở dữ liệu3.1.1.1.Sơ đồ cơ sở dữ liệu</b>

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<i>Hình 4.1: Cơ sở dữ liệu</i>

<b>3.1.1.2.Bảng Course</b>

<b>NoAttribute NameTypeConstraintsMeaning/ Note</b>

học

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

4 unit <b>string</b> Khoa quản límơn học

<b>NoAttribute NameTypeConstraintsMeaning/ Note</b>

học được đăngkí bởi sinh viênbất kì

viên, của thơngtin đăng kí

<b>NoAttribute NameTypeConstraintsMeaning/ Note</b>

sinh

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

2 username <b>string</b> Mã số sinhviên, đây cũnglà tên đăngnhập

viên đã đăng kímơn học

môn học

<i>Bảng 3.1.1.4: Enrollment</i>

<b>3.1.1.5.Bảng Target</b>

<b>NoAttribute NameTypeConstraintsMeaning/ Note</b>

học được đăngký bởi sinhviên bất kì

sinh viên đócần

cầu tối thiểucủa loại tín chỉ

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>2.1Hiển thị danh sách các môn họcmà học sinh đó đã đăng ký</b>

<b>2.2Hiển thị tiến độ học tập dưới dạng</b>

<b>progress bar với từng loại tín chỉ<sup>Critical</sup>2.3Hiển thị biểu đồ trịn thể hiện tỉ</b>

<b>trọng giữa các loại tín chỉ với nhauvà tổng số tín chỉ hiện tại</b>

<b>2.4Hiển thị danh sách các mơn học</b>

<b>3. Màn hình Course3.1Hiển thị danh sách tồn bộ mơn</b>

<b>3.2Tìm kiếm mơn học theo mã mơn,</b>

<b>3.3Chọn môn học từ bảng các mônhọc để tạo danh sách môn cho học</b>

<b>3.7Chỉnh sửa danh sách các môn học</b>

<b>Critical</b>

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

<i>Bảng 3.1.2: Các bảng yêu cầu</i>

<b>3.1.3.Chi tiết các u cầu</b>

<b>3.1.3.1.Màn hình Dashboard</b>

<b>- Hiển thị danh sách các mơn học mà học sinh đó đã đăng ký: một bảng hiển thị</b>

đầy đủ chi tiết các thông tin của môn học, loại tín chỉ của mơn học đó đối với sinhviên và học kỳ mà sinh viên đã đăng kí mơn học đó

<b>- Hiển thị tiến độ học tập dưới dạng progress bar với từng loại tín chỉ: Hiển thị</b>

các widget với tên loại tín chỉ, số tín chỉ đã học được so với số tín chỉ u cầu củamơn học đó

<b>- Hiển thị biểu đồ trịn thể hiện tỉ trọng giữa các loại tín chỉ với nhau và tổngsố tín chỉ hiện tại : Một biểu đồ trịn chia tỉ lệ giữa các màu sắc (loại tín chỉ) và</b>

thể hiện tổng số tín chỉ đã học được so với mục tiêu

<b>- Hiển thị danh sách các môn học với từng loại tín chỉ: Sinh viên ấn vào nút xem</b>

chi tiết của từng widget, danh sách các môn học thuộc tín chỉ đó sẽ được hiển thịvới sinh viên

<b>3.1.3.2.Màn hình Course</b>

<b>- Xem danh sách các mơn học có thể đăng ký: Hiển thị dưới dạng bảng danh</b>

sách lịch sử tất cả các mơn học mà sinh viên có thể đăng ký

<b>- Lên danh sách môn cho học kỳ mới: sinh viên có thể chọn mơn học từ bảng các</b>

mơn học cho học kì tiếp theo

<b>- Chỉnh sửa các mơn học của một học kỳ: Sinh viên có thể mở một học kỳ và</b>

thay đổi thông tin các môn học đã đăng kí trong học kì đó

<b>3.1.3.3.Màn hình Plan</b>

<b>- Hiển thị thông tin của sinh viên: Thông tin chi tiết của sinh viên sẽ được</b>

hiển thị

<b>- Hiển thị tất cả học kì của sinh viên đó: các học kỳ của sinh viên sẽ được</b>

hiển thị với các loại tín chỉ có trong học kì đó, sinh viên ấn vào để xem mơnhọc của từng học kì

<b>- Hiển thị danh sách mục tiêu của từng loại tín chỉ: Hiển thị số lượng u</b>

cầu của từng loại tín chỉ và sinh viên có quyền truy cập để sửa đổi các mụctiêu này.

<b>3.2. Phân tích yêu cầu</b>

<b>3.2.1.Danh sách các actor</b>

</div>

×