Đang tải... (xem toàn văn)
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ố
Trang 1BỘ 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
Trang 2TRƯỜ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, ).
Trang 3Tp.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)
Trang 4LỜ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
Trang 5NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
Trang 62.3.4 Cách hoạt động của javascript là gì?21
Trang 73.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
Trang 8Hì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
Trang 9Bả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
Trang 111 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ý.
Trang 121.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ý, …
Trang 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à
Trang 14khả 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>
Trang 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:
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:
Trang 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.
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.
Trang 172.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
Trang 182.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 ý.
Trang 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
Trang 20vớ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
Trang 212.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:
Trang 23Reactjs 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
Trang 24web 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.
Trang 252.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.
Trang 26Mụ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.
Trang 27● 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
Trang 28Hình 4.1: Cơ sở dữ liệu
3.1.1.2.Bảng Course
NoAttribute NameTypeConstraintsMeaning/ Note
học
Trang 294 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
Trang 302 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ỉ
Trang 312.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
Trang 32Bả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