BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ĐỒ ÁN MÔN HỌC Đồ Án 1 XÂY DỰNG WEBSITE QUẢN LÝ TÍN CHỈ OUTIT Lớp: SE121.PMCL 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 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CÔNG NGHỆ PHẦN MỀM Độc lập – Tự do – Hạnh phúc 🙡★🙣 🙡★🙣 NHIỆM VỤ ĐỒ ÁN MÔN HỌC Họ và tên SV 1: Trần Gia Bảo MSSV: 21521862 Họ và tên SV 2: Nguyễn Quang An MSSV: 987654321 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. Phân tích thiết kế và phác thảo giao diện các nhóm trang web. 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. 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. 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, âm thanh, videos, .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) 2 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ên lớ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ần củ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ành cho 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ô trong hà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 3 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ……………………………………………………………………………………………….HCM, ngày 18 tháng 12 năm 2023 GVHD 4 MỤC LỤC 1. GIỚI THIỆU ĐỀ TÀI 14 1.2 Mô tả Website: 14 1.3 Lý do chọn thiết kế Website: 14 1.4 Công nghệ sử dụng: 14 1.5 Môi trường thiết kế: 15 1.6 Công cụ hỗ trợ: 15 2.1 Ngôn ngữ HTML: 16 2.2 Định dạng Website với CSS: 17 2.2 Ưu Điểm của CSS3: 18 2.3 Nhược Điểm của CSS3: 19 2.3 Lập trình Javascript: 20 2.3 Lịch sử phát triển của Javascript: 20 2.4 Cách hoạt động của javascript là gì? 21 2.5 Javascript dùng để làm gì? 21 2.7 Nhược điểm: 23 2.4 Sử dụng framework Bootstrap để phát triển website chuẩn responsive:` 23 2.6 Theming và Tùy Chỉnh: 24 2.7 Cross-browser Compatibility: 24 2.8 Community và Documentation: 24 2.10 Mobile-First Approach: 25 2.11 Độ Ổn Định và Tin Cậy: 25 2.2 Tính Năng và Đặc Điểm: 29 3. PHÂN TÍCH THIẾT KẾ 30 5 3.
Phân tích 1 vài use case 38 3. Use case Đăng ký 38 3. Use case Tạo danh sách môn học cho học kỳ mới. Use case Cài đặt mục tiêu môn học 41 3.
Chi tiết các API 42 3. API Cập nhật danh sách môn học 1 học kỳ của sinh viên 42 4.2 API Lấy thông tin của sinh viên 43 3. API lấy mục tiêu của từng loại tín chỉ của sinh viên 43 3. Màn hình Welcome: 44 3.
Màn hình Dashboard 45 3. Màn hình Course 47 3. Màn hình Planing 49 4. Hạn chế của đồ án: 53 4.
Hướng phát triển của nhóm 54 6 MỤC LỤC ẢNH Hình 2.7: Ứng dụng Spring Boot 26 Hình 2.8: Ứng dụng SQL 27 Hình 3.1: Cơ sở dữ liệu 28 Hình 3.1: Use Case Hệ thống 33 Hình 3.1: Use Case Đăng ký 35 Hình 3.1: Use Case Tạo danh sách môn học cho kì mới 36 Hình 3.: Use Case Đặt mục tiêu môn học 38 Hình 3.1: API cập nhật môn học 39 Hình 3.2: API Lấy thông tin chi tiết của 1 sinh viên 40 Hình 3.3: API get all Target 40 Hình 3.1: Welcome Page 41 Hình 3.1 Màn hình Dashboard 1 42 Hình 3.2 Màn hình Dashboard 2 42 Hình 3.1 Màn hình Course 1 44 Hình 3.2 Màn hình Course 2 44 Hình 3.1 Màn hình Planing 1 45 Hình 3.2 Màn hình Planing 2 46 Hình 3.3 Màn hình Planing 3 46 7 MỤC LỤC BẢNG Bảng 3.2: Các bảng yêu cầu 31 Bảng 3.1: Bảng danh sách các actor 33 Bảng 3.2: Bảng tóm tắt các use case 34 Bảng 3.2: Bảng mô tả usecase Đăng ký 36 Bảng 3.2: Bảng mô tả tạo danh sách mới cho học kỳ tiếp 37 Bảng 3.2: Bảng mô tả usecase đặt mục tiêu môn học 39 Bảng 3.2: Bảng mô tả Welcome 41 Bảng 3.: Bảng mô tả Dashboard 43 Bảng 3.1: Bảng mô tả Course 45 Bảng 3.2: Bảng mô tả Planning 48 8 9 1. GIỚI THIỆU ĐỀ TÀI 1.1 Tên Website: OUTIT 1.2 Mô tả Website: ● Website OUTIT là một công cụ giúp cho sinh viên các khoa của trường Đại học Công nghệ thông tin có thể sử dụng để quản lý tín chỉ, lưu trữ và lên kế hoạch đăng ký môn học cho các học kỳ của mình một cách chính xác nhất 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ín chỉ 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ải tự 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ây nhiều khúc mắc cho sinh viên UIT, nhóm quyết định phát triển một website để ứng dụ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ập củ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ý.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 10 1.5 Môi trường thiết kế: - Adobe Dreamweaver.6 Công cụ hỗ trợ: - Photoshop: layout giao diện, hình ảnh, nút lệnh xử lý, … 11 2.1 Ngôn ngữ HTML: Hình 2.1: HTML5 - HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản. - Hypertext (siêu văn bản): là một đoạn text bất kỳ nhưng có chứa link đến một nguồn thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…) - 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 đòi hỏ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ạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.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ới nhiề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 bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML. HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao mà chính là 12 khả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứng dụng) và DOM (Document Object Model – các đối tượng thao tác văn bản).2 Định dạng Website với CSS: Hình 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> <style> và ở giữa thêm vào sau này </style> </head> 13 • 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 Ưu Điểm của CSS3: Đa Dạng và Mạnh Mẽ: ● CSS3 cung cấp một loạt các tính năng mới và mạnh mẽ, giúp phát triển giao diện đa dạng và phức tạp hơn.
Responsive Design: ● Media queries trong CSS3 cho phép dễ dàng tạo ra giao diện phản ứng với kích thước màn hình khác nhau. Animations và Transitions: ● CSS3 mang đến khả năng tạo ra hiệu ứng chuyển động mượt mà thông qua transitions và animations mà không cần sử dụng JavaScript hoặc Flash. Flexbox và Grid Layout: ● 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 linh hoạ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ạng vă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.