đồ á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 TIN

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

Sinh viên thực hiện 1 : Trần Gia Bảo

Mã sinh viên 1 : 21521862

Sinh viên thực hiện 4 : Nguyễn Quang An

Mã 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

Nhiệm vụ đồ án môn học:

1 Xác định yêu cầu, thu thập thông tin và các dữ liệu liên quan cho việc thiết kế

website

2 Phân tích thiết kế và phác thảo giao diện các nhóm trang web

3 Thiết kế cơ sở dữ liệu MySQL cho website

4 Thiết kế giao diện với ReactJS với 5 template khác nhau, kết hợp sử dụng các thư

viện hỗ trợ như Bootstrap, styled-component, react-bootstrap trong việc style

5 Thiết kế các bảng với các mối quan hệ khóa chính, khóa ngoại, thiết lập các Model,

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 3

lớ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 trang

web (*.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 - 21521862 Nguyễn Quang An - 21521808

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

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

……….

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

GVHD

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

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

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ên 42

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

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

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

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.4 Công nghệ sử dụng:

- Sử dụng ngôn ngữ HTML5 và định dạng CSS3 để thiết kế giao diện

- Lập trình xử lý sự kiện với Javascript

- Spring Boot + MYSQL cho Backend

- ReactJS cho frontend

- Bootstrap responsive

- ChartJS

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ếp

theo sau đó là khai báo <STYLE> và kết thúc bằng <STYLE> và sau

những bước trên thì có thể nhìn thấy nguyên đoạn code như sau: <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 Lập trình Javascript:

Hình 2.3: JavaScript

2.3.1 Định Nghĩa

Javascript – một ngôn ngữ vô cùng phổ biến trong lĩnh vực lập trình ngày nay

Có thể nói rằng, Javascript hay còn gọi là JS là ngôn ngữ rất thông dụng trong vài

năm gần đây Đã có khá nhiều framework ra đời và được viết bằng loại ngôn ngữ

này Từ frontend cho đến backend thì bất cứ nơi nào cũng có sự xuất hiện của JS

Một vài thông tin sau đây sẽ giúp cho bạn hiểu thêm về loại ngôn ngữ đặc biệt này

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 website

trở nên sống động hơn Chúng cũng đóng vai trò tương tự như một phần

củ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ền

thân là Mocha Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới

đổi thành JavaScript.

● Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành

và đến năm 1999 thì ECMAScript 3 được ra mắt

● Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng,

đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với

lập trình viên

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ặc

chú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ả đến

client

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ểm

cần được lưu ý

● Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và

nhanh hơn nhiều so với các ngôn ngữ lập trình khác

● JS còn có thể được gắn trên một số các element hoặc những events

của các trang web

● Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó

có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho

người dùng

● Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra

những input thay vì cách kiểm tra thủ công thông qua hoạt động truy

xuất database

● Giao diện của ứng dụng phong phú với nhiều thành phần như Drag

and 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ủa

ngườ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ông

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

Bootstrap không chỉ giúp chuẩn hóa quá trình phát triển web mà còn là một công cụ mạnh

mẽ để nhanh chóng xây dựng giao diện đẹp và linh hoạt

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ệu

3.1.1.1 Sơ đồ cơ sở dữ liệu