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

GIỚI THIỆU ĐỀ TÀI1.3 Lý do chọn thiết kế Website:● Đứng trước nhu cầu số lượng sinh viên cần quản lí quá 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ố

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

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

Tp HCM, tháng 12 năm 2023

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

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

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

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

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, ).

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

GIẢNG VIÊN GIẢNG DẠY

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

LỜI CẢM ƠN

Kính gửi quý 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 quá 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à quý 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 quý 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

Trần Gia Bảo - 21521862Nguyễn Quang An - 21521808

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

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

3.3 Phân tích 1 vài use case38

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

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

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

Hình 3.3.1: Use Case Tạo danh sách môn học cho kì mới36

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

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

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

1 GIỚI THIỆU ĐỀ TÀI

1.3 Lý do chọn thiết kế Website:

● Đứng trước nhu cầu số lượng sinh viên cần quản lí quá 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ý.

1.5 Môi trường thiết kế:

- Adobe Dreamweaver.

1.6 Công cụ hỗ trợ:

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

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

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

2.2 Định dạng Website với CSS:

Hình 2.2: CSS

2.2.1 Định Nghĩa

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

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 nguyên đoạn code như sau: <head><style>

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

</head>

• 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:

2.2.2 Ưu Điểm của CSS3:

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

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

2.2.3 Nhược Điểm của CSS3:

Tính Năng Chưa Hoà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ưahoà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.

2.3.2 Javascript là gì?

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

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

● 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

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

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

2.3.5 Javascript dùng để làm gì?

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

Ư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

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

● 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

với nhau.

2.3.7 Nhược điểm:

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 toà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.

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

Hình 2.4: Bootstrap

2.4.1 Định Nghĩa

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

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

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 quá trìnhrelease sản phẩm cung như quá trình coding.

2.6 RestAPI

2.6.1 Định Nghĩa

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:

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

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

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

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

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

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

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

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

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.

2.6.2 Ứng Dụng

● 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

với nhau.

● 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

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

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

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

2.7 Spring boot

2.7.1 Định Nghĩa

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:

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

viện có trong classpath.

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

web server ngoài.

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

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

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

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.

2.7.2 Ứng Dụng

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

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

● 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

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

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

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.

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

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

● 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

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

● 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

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

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

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

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

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

Ứng dụng

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

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

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

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

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

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

Hình 2.8: Ứng dụng SQL

3 PHÂN TÍCH THIẾT KẾ

3.1 Phân tích yêu cầu

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

Hình 4.1: Cơ sở dữ liệu

3.1.1.2.Bảng Course

NoAttribute NameTypeConstraintsMeaning/ Note

học

4 unit string Khoa quản límôn học

NoAttribute NameTypeConstraintsMeaning/ Note

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

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

NoAttribute NameTypeConstraintsMeaning/ Note

sinh

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

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

môn học

Bảng 3.1.1.4: Enrollment

3.1.1.5.Bảng Target

NoAttribute NameTypeConstraintsMeaning/ Note

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ỉ

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

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

progress bar với từng loại tín chỉCritical2.3Hiển thị biểu đồ tròn thể hiện tỉ

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

2.4Hiển thị danh sách các môn học

3 Màn hình Course3.1Hiển thị danh sách toàn bộ môn

3.2Tìm kiếm môn học theo mã môn,

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

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

Critical

Bảng 3.1.2: Các bảng yêu cầu

3.1.3.Chi tiết các yêu cầu

3.1.3.1.Màn hình Dashboard

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

đầ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 đó

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

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ỉ yêu cầu củamôn học đó

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

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

- 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

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

3.1.3.2.Màn hình Course

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

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

- 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

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

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

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

3.1.3.3.Màn hình Plan

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

hiển thị

- 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

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ì

- 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 yêu

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.

3.2 Phân tích yêu cầu

3.2.1.Danh sách các actor