báo cáo bài tập lớn đề tài website quản lí điểm

Nắm bắt được xu hướng đó, trong khuôn khổ nội dung của chương trình học học phần “Chuyên đề công nghệ phần mềm”, nhóm chúng em đã quyết định tìm hiểu và thiết kế một website đơn giản và

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI KHOA CÔNG NGHỆ THÔNG TIN

MÔN: CHUYÊN ĐỀ CÔNG NGHỆ PHẦN MỀM

BÁO CÁO BÀI TẬP LỚN ĐỀ TÀI: WEBSITE QUẢN LÍ ĐIỂM SINH VIÊN

Giảng viên hướng dẫn : TS Nguyễn Trọng Phúc Nhóm 10 : Nguyễn Xuân Ngọc (201210256)

Trần Đức An (201200005) Nguyễn Quang Huy (201200160)

Hà Nội, tháng 11 năm 2023

LỜI MỞ ĐẦU

Những năm gần đây, khoa học công nghệ phát triển nhanh như vũ bão, đặc biệt là lĩnh vực công nghệ thông tin Có thể nói, công nghệ thông tin đã len lỏi vào hầu hết tất cả mọi lĩnh vực trong cuộc sống của chúng ta Trong đó, công nghệ phần mềm luôn luôn đóng vai trò tiên phong, dẫn đầu trong quá trình đó Các phần mềm đã đang và sẽ được ứng dụng ngày càng nhiều trong công việc cũng như cuộc sống thường ngày của con người Nắm bắt được xu hướng đó, trong khuôn khổ nội dung của chương trình học học phần “Chuyên đề công nghệ phần mềm”, nhóm chúng em đã quyết định tìm hiểu và thiết kế một website đơn giản và gần gũi với thực tế: “Website quản lí điểm sinh viên”

Qua quá trình tìm hiểu và xây dựng phần mềm trên thực tế, cùng với những kiến thực được học trên giảng đường, chúng em mới thực sự cảm nhận được những khó khăn khi xây dựng và phát triển một phần mềm hoàn chỉnh Để có thể xây dựng được một phần mềm hoàn thiện, không chỉ đơn thuần là lập trình, mà còn rất

nhiều công việc khác cần phải thực hiện Với học phần “Chuyên đề Công nghệ phần mềm” nói chung và đề tài “Website quản lí điểm sinh viên” nói riêng, nhóm em xin chân thành cảm ơn sự chỉ bảo và hướng dẫn của thầy Nguyễn Trọng Phúc

Đề tài xây dựng còn nhiều sai sót, nhóm em mong được sự phản hồi và ý kiến đóng góp từ thầy để nhóm có cơ hội hoàn thiện và phát triển dự án này hơn nữa trong tương lai

DANH M C HÌNH NH & BỤẢẢNG BI U Ể

Hình 1.1: Giao diện trang web qldt Trường Đại học Giao thông vận tải 5

Hình 1.2: Giao diện trang web qldt Trường Đại học Tài nguyên và Môi trường 5

Hình 1.3: Giao diện trang web qldt Học viện Công nghệ Bưu chính Viễn thông 6

B ng 2.3: ả Bảng mô tả dữ liệu User 18

B ng 2.4: ả Bảng mô tả dữ liệu Score 19

B ng 2.5: ả Bảng mô tả dữ liệu Course 19

Hình 3.1: Giao diện đăng nhập 20

Hình 3.2: Giao diện danh sách sinh viên (admin) 20

Hình 3.3: Giao diện thêm sinh viên (admin) 21

Hình 3.4: Giao diện danh sách học phần (admin) 21

Hình 3.5: Giao diện danh sách điểm sinh viên theo môn học (admin) 22

Hình 3.6: Giao diện thêm điểm hoăc thêm sinh viên vào môn học (admin) 22

Hình 3.7: Giao diện thêm và cập nhật học phần (admin) 23

Hình 3.8: Giao diện xem biểu đồ điếm môn học (admin) 23

Hình 3.9: Giao diện điểm học phần (sinh viên) 24

Hình 3.10: Giao diện danh sách học phần đã học (sinh viên) 24

Hình 3.11: Giao diện thống kê biểu đồ điểm (sinh viên) 25

4

I TỔNG QUAN ĐỀ TÀI 1 TỔNG QUAN

a Đặt vấn đề

Hiện nay trong thời kỳ hiện đại hóa giáo dục cùng với sự phát triển không ngừng của ngành công nghệ thông tin nhất là đối với ngành giáo dục hiện có nhiều phần mềm và ứng dụng một ngành đào tạo ra những nhân tài cho đất nước Chính vì lý do đó nên thay vì quản lý điểm học sinh sinh viên bằng phương pháp truyền thống thì một số trường đã sử dụng các chương trình quản lý điểm sinh viên điện tử trong đó có quản lý điểm sinh viên trên nền website Với tính năng đa dạng cũng như thao tác đơn giản, mọi người đều có thể dễ dàng tiếp cận với nó, những tính năng cập nhật thông tin sinh viên và theo dõi danh sách thông tin sinh viên, danh sách môn học, danh sách điểm sinh viên trên từng môn học trên website trở nên thuận tiện hơn bất cứ cách tiếp cận nào trước đó.Với mong muốn tạo ra 1 website quản lý điểm sinh viên có đầy đủ tính năng đơn giản và dễ dàng sử dụng Nhóm em đã quyết định chọn đề tài website quản lý điểm sinh viên

Hnh 1.1: Giao diện trang web qldt Trường Đại học Giao thông vận tải

Trang quản lí đào tạo của Trường Đại học Giao thông vận tải

6

Hnh 1.3: Giao diện trang web qldt Học viện Công nghệ Bưu chính Viễn thông

- Khảo sát người dùng: Nhóm em có làm một khảo sát online nhỏ để lấy ý kiến của một số người ngẫu nhiên và thu được một số kết quả sau:

8

10

- Kết luận: Dựa trên kết quả khảo sát người dùng có thể thấy nhu cầu lưu trữ và quản lí điểm của sinh viên của mọi người ngày càng cao Ví dụ như giáo viên phải nhập điểm lên hệ thống từng sinh viên, hay lưu trữ thông tin bằng thủ công như trên giấy làm cho giáo viên khó khăn lưu trữ, thêm điểm cho sinh viên, không thống kê được điểm môn học, sinh viên để tiện theo dõi quá trinh học và giảng dạy Bên cạnh đó, về phần của sinh viên, đối với hình thức quản lí điểm thủ công, sinh viên khó có thể cập nhật, theo dõi quá trình học của bản thân Vì vậy, dựa vào nhu cầu thực tế chúng em quyết định xây dựng một website quản lí điểm sinh viên

12 ReactJS (hoặc đơn giản là React) là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI) tương tác Được phát triển bởi Facebook, ReactJS đã trở thành một công cụ quan trọng trong việc phát triển ứng dụng web hiện đại Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook Người bị ảnh hưởng bởi XHP (Một nền tảng thành phần HTML cho PHP) React lần đầu tiên được triển khai cho ứng dụng Newsfeed của Facebook năm 2011, sau đó được triển khai cho Instagram.com năm 2012 Nó được mở mã nguồn (open sourced) tại JSConf US tháng 5 năm 2013 Mục tiêu của react chính là -đơn giản để phát triển Tất cả trạng thái đều được tập trung tại một thời điểm, bằng cách chia giao diện người dùng thành tập hợp các thành phần (components) React được sử dụng để xây dựng single-page web applications

Hnh 1.4: Logo ReactJS

Đặc điểm nổi bật: - Giải quyết được vấn đề của tầng View: giải quyết vấn đề của tầng View

trong mô hình MVC (Model-View-Controller)

- Giúp viết mã Javascript dễ dàng hơn với JSX: sử dụng JSX (JavaScript

Syntax eXtension) (Phần bổ xung cú pháp Javascript) Là một sự hòa trộn giữa Javascript và XML, vì vậy nó cũng dễ dàng hơn khi viết mã, và thân thiện hơn với các lập trình viên

- "Thành phần hóa" giao diện: React cho phép lập trình viên tạo ra các

Component (Thành phần) tương ứng với các phần của giao diện Các component này có thể tái sử dụng, hoặc kết hợp với các Component khác để tạo ra một giao diện hoàn chỉnh

- Tăng hiệu năng với Virtual-DOM: Khi dữ liệu của Component thay đổi

React cần phải vẽ lại (rerender) giao diện Thay vì tạo ra thay đổi trực tiếp vào mô hình DOM của trình duyệt, nó tạo ra thay đổi trên một mô hình

DOM ảo (Virtual DOM) Sau đó nó tính toán sự khác biệt giữa 2 mô hình DOM, và chỉ cập nhập các khác biệt cho DOM của trình duyệt Cách tiếp cận này mang lại hiệu năng cho ứng dụng

- Thân thiện với SEO: React có thể chạy tại phía Client, nhưng nó cũng có

thể chạy tại phía Server, vì vậy dữ liệu trả về cho trình duyệt là văn bản HTML, nó không gây ra khó khăn gì cho các Search Engine, vì vậy nó thân thiện với SEO

- Dễ dàng viết UI Testcases

b NestJS

Giới thiệu tổng quan:

NestJS là một framework Node.js được xây dựng trên cơ sở TypeScript và kế thừa mô hình kiến trúc của Angular Nó mang lại một cách tiếp cận hiện đại và cấu trúc hợp lý để phát triển ứng dụng server side NestJS thúc đẩy kiến trúc theo -mô-đun, giúp tách biệt các thành phần chức năng của ứng dụng Sử dụng decorators để đánh dấu và quản lý các thành phần như controller, service, module, và middleware Sử dụng TypeScript, một ngôn ngữ lập trình có kiểu dữ liệu, để kiểm soát lỗi tại thời điểm biên dịch và cung cấp tính năng OOP (Object-Oriented Programming) Sử dụng decorators để thêm metadata cho các thành phần, giúp framework hiểu và quản lý ứng dụng

14 - WebSockets: Hỗ trợ WebSockets để xây dựng ứng dụng thời gian thực và

tương tác - Caching: Cung cấp chức năng caching để tối ưu hóa hiệu suất - Microservices Support: NestJS hỗ trợ phát triển các ứng dụng

microservices thông qua sử dụng module và mô hình kiến trúc mô-đun - Active Community: Có một cộng đồng đang phát triển nhanh chóng và sẵn

lòng chia sẻ kiến thức và tài nguyên c MySQL

Giới thiệu tổng quan:

Hệ quản trị cơ sở dữ liệu MySQL được hiểu như là chương trình dùng để quản lý hệ thống cơ sở dữ liệu, trong đó, cơ sở dữ liệu là một hệ thống lưu trữ thông tin được sắp xếp rõ ràng, phân lớp ngăn nắp Nó giúp bạn có thể truy cập dữ liệu một cách thuận lợi và nhanh chóng nhất Vì hỗ trợ đa số các ngôn ngữ lập trình trên MySQL chính là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất trên thế giới Hiện MySQL đang được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng

MySQL là cơ sở dữ liệu tốc độ cao, ổn định hoạt động trên nhiều hệ điều hành, cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Đặc biệt, hệ quản trị cơ sở dữ liệu MySQL hoàn toàn miễn phí nên người dung có thể thoải mái tải về từ trang chủ MySQL được sử dụng cho việc hỗ trợ PHP, Perl và nhiều ngôn ngữ khác Là nơi lưu trữ những thông tin trên các trang web viết bằng framework PHP hay Perl, …

Hnh 1.6: Logo MySQL

Đặc điểm nổi bật:

- Ngôn Ngữ Chuẩn: SQL là một ngôn ngữ chuẩn được sử dụng rộng rãi cho

quản lý cơ sở dữ liệu quan hệ

- Tương Thích Đa Nền Tảng: SQL là ngôn ngữ độc lập với hệ điều hành và

cơ sở dữ liệu, nó có thể chạy trên nhiều hệ thống khác nhau

- Truy Vấn Dữ Liệu: SQL cung cấp các câu lệnh truy vấn như SELECT,

INSERT, UPDATE, DELETE để truy vấn và quản lý dữ liệu trong cơ sở dữ liệu

- Ngôn Ngữ Chuẩn ANSI: SQL tuân theo các tiêu chuẩn được đề xuất bởi Tổ

chức Tiêu chuẩn Hóa Quốc tế (ISO) và Tổ chức Tiêu chuẩn Hóa Mỹ (ANSI)

- Hỗ Trợ RDBMS: SQL được thiết kế chủ yếu để tương tác với cơ sở dữ liệu

quan hệ, như MySQL, PostgreSQL, SQL Server, Oracle, và nhiều hệ quản lý cơ sở dữ liệu quan hệ khác

- Bảo Mật: SQL cung cấp các chức năng bảo mật như quyền truy cập, đảm

bảo rằng người dùng chỉ có thể thực hiện các thao tác mà họ được phép

- Các Hàm Tích Hợp: SQL cung cấp nhiều hàm tích hợp sẵn, như hàm toán

học, hàm chuỗi, hàm ngày giúp thực hiện các thao tác phức tạp trên dữ liệu - Optimization và Indexing: SQL hỗ trợ tối ưu hóa truy vấn thông qua việc

sử dụng index và cung cấp các công cụ để quản lý hiệu suất

16

II PHÂN TÍCH THIẾT KẾ HỆ THỐNG 1 PHÂN TÍCH HỆ THỐNG

a Mô tả bài toán

Bài toán quản lí điểm sinh viên liên quan đến việc cung cấp một nền tảng cho sinh viên xem điểm và những học phần đã học và đăng kí thông qua ứng dụng hoặc trang web

Bước đầu tiên đối với sinh viên họ truy cập trang web Sau đó, sinh viên phải đăng nhập vào hệ thống để có thể xem được danh sách điểm của bản thân, danh sách môn học đã học và đã đăng kí, xem thống kê điểm của bản thân

Đối với quản trị viên, quản trị viên truy cập và đăng nhập vào trang web với tư cách là quản trị viên Quản trị viên có thể xem danh sách sinh viên, thêm, sửa, xóa sinh viên đã có trong hệ thống mà chưa học môn nào, xem danh sách học phần và các thao tác với từng học phần

- Nhóm chức năng quản lí: quản lí thông tin sinh viên, quản lí thông tin học phần

- Nhóm chức năng thống kê: thống kê điểm sinh viên theo môn học, thống kê điểm theo sinh viên

c Các tác nhân của hệ thống

Dựa vào mô tả bài toán, có thể xác định các tác nhân chính của hệ thống như sau:

QUẢN TRỊ VIÊN: - Quản trị viên website cần đăng nhập vào hệ thống và thực hiện chức năng

theo lựa chọn - Người quản trị có thể quản lí danh sách sinh viên như thêm, sửa, xóa sinh

viên - Người quản trị có thể quản lí danh sách học phần với một số chức năng như

thêm, sửa, xóa học phần, xem thông tin thống kê điểm của học phần SINH VIÊN:

- Sinh viên có thể đăng nhập vào hệ thống bằng tài khoản đã được cấp sẵn - Sinh viên có thể xem bảng điểm của bản thân mình

- Sinh viên có thể xem danh sách học phần đã học - Sinh viên có thể xem thống kê điểm dựa trên biểu đồ của bản thân

2 THIẾT KẾ HỆ THỐNG a Sơ đồ Use case

STT Tên thực thể Kiểu thực thể Ràng buộc Mô tả

2 firstName varchar(255) Not null Họ đệm của sinh viên 3 lastName varchar(255) Not null Tên của sinh viên

5 email varchar(255) Not null Mã sinh viên của sinh viên 6 password varchar(255) Not null Password của sinh viên 7 class varchar(255) Not null Lớp của sinh viên

Bảng 2.3: Bảng mô tả dữ liệu User

STT Tên thực thể Kiểu thực thể Ràng buộc Mô tả

Bảng 2.4: Bảng mô tả dữ liệu Score

STT Tên thực thể Kiểu thực thể Ràng buộc Mô tả

3 gv varchar(255) Not null Giáo viên dạy học phần 4 so_tc varchar(255) Not null Số tín chỉ học phần

Hnh 3.1: Giao diện đăng nhập

Hnh 3.2: Giao diện danh sách sinh viên (admin)

Hnh 3.3: Giao diện thêm sinh viên (admin)

22

Hnh 3.5: Giao diện danh sách điểm sinh viên theo môn học (admin)

Hnh 3.6: Giao diện thêm điểm hoăc thêm sinh viên vào môn học (admin)

Hnh 3.7: Giao diện thêm và cập nhật học phần (admin)

24

Hnh 3.9: Giao diện điểm học phần (sinh viên)

Hnh 3.10: Giao diện danh sách học phần đã học (sinh viên)

Hnh 3.11: Giao diện thống kê biểu đồ điểm (sinh viên)

Trong thời gian tới, đề tài sẽ tiếp tục được chỉnh sửa, mở rộng để hoàn thiện hơn Qua quá trình thực hiện đề tài, chúng em đã thu nhận được những kinh nghiệm quý báu về phát triển website, kinh nghiệm làm việc, cách quản lí một dữ án và phân chia công việc hiệu quả Những kiến thức này sẽ là những hành trang quý báu trong công việc tương lai của bản thân

`Bên cạnh đó cũng có những hạn chế như: - Vẫn còn 1 số chức năng chưa được hoàn thiện - Chưa có nhiều kiến thức thực tế nên việc xây dựng phần mềm áp dụng vào

thực tế còn nhiều thiếu sót và chưa khả quan - Giao diện chưa thực sự bắt mắt

Nhóm chúng em sẽ cố gắng hoàn thiện và phát triển: - Phát triển website hoàn thiện hơn để sử dụng thực tế - Thực hiện quản lí các chức năng rộng rãi hơn, nhiều chức năng hơn để tiện

sử dụng và lưu trữ dữ liệu

V TÀI LIỆU THAM KHẢO

Tìm hiểu NestJS: https://docs.nestjs.com/ và trên youtube Tìm hiểu ReactJS: https://react.dev/ và trang web F8

https://stackoverflow.com/