xây dựng website quản lý lịch dạy tại trung tâm luyện thi hoa mai

Sinh viên thực hiện: Hồ Thị Vân Anh Mã sinh viên: 1911505310102 Nội dung tóm tắt đề tài: Website "Quản lý lịch dạy tại trung tâm luyện thi Hoa Mai" là một hệ thống thông tin được xây d

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

TÓM TẮT

Tên đề tài: Xây dựng website quản lý lịch dạy tại trung tâm luyện thi Hoa Mai Sinh viên thực hiện: Hồ Thị Vân Anh

Mã sinh viên: 1911505310102 Nội dung tóm tắt đề tài:

Website "Quản lý lịch dạy tại trung tâm luyện thi Hoa Mai" là một hệ thống thông tin được xây dựng để hỗ trợ trung tâm Hoa Mai quản lý lịch dạy của các giáo viên tại trung tâm Được xây dựng bằng mô hình REST API, ReactJS và NestJS, trang web này giúp trung tâm dễ dàng quản lý lịch dạy - học một cách hiệu quả và tiện lợi cho người dùng Với Website "Quản lý lịch dạy tại trung tâm luyện thi Hoa Mai", giáo viên dễ dàng theo dõi và xác nhận lịch dạy tại trung tâm Trang web sẽ gửi thông báo đến giáo viên và học viên khi có lịch dạy mới, thay đổi lịch học hoặc thông báo quan trọng khác của trung tâm Bằng cách sử dụng giao diện thân thiện và dễ sử dụng, giúp việc quản lý lịch học và giảng dạy của giáo viên và học viên hiệu quả và chính xác hơn NestJS được sử dụng để xây dựng backend cho website Với NestJS, trang web có một kiến trúc mô- đun và một hệ thống quản lý phụ thuộc mạnh mẽ NestJS cung cấp khả năng xử lý các yêu cầu từ người dùng, quản lý dữ liệu và tương tác với cơ sở dữ liệu Tóm lại, website “Quản lý lịch dạy tại trung tâm luyện thi Hoa Mai" là một hệ thống quản lý lịch dạy trực tuyến được xây dựng bằng mô hình REST API, ReactJS và NestJS Với sự kết hợp của các công nghệ này, trang web giúp cho việc quản lý lịch dạy của các giáo viên trở nên dễ dàng và hiệu quả hơn, nâng cao chất lượng giảng dạy và học tập tại trung tâm luyện thi Hoa Mai

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Xây dựng website quản lý lịch dạy tại trung tâm luyện thi Hoa Mai

2 Các số liệu, tài liệu ban đầu

- Dựa trên nhu cầu quản lý lịch dạy của các trung tâm - Các tài liệu kiến thức nắm được qua quá trình học tập và làm việc

3 Nội dung chính của đồ án

- Mở đầu - Chương 1: Cơ sở lý thuyết - Chương 2: Phân tích thiết kế hệ thống - Chương 3: Xây dựng chương trình - Kết luận và hướng phát triển

Trước tiên, em xin gửi lời cảm ơn chân thành đến quý thầy cô đã đồng hành và hỗ trợ em trong quá trình thực hiện đề tài báo cáo khóa luận tốt nghiệp này Đặc biệt,

em muốn bày tỏ lòng biết ơn sâu sắc đến cô TS Hoàng Thị Mỹ Lệ vì sự tận tâm và sự

hướng dẫn cụ thể trong suốt quá trình nghiên cứu của em

Hơn nữa, em cũng xin được biết ơn đến các quý thầy cô thuộc khoa Công Nghệ Số - trường Đại học Sư phạm Kỹ thuật - Đại Học Đà Nẵng đã truyền đạt những kiến

thức quan trọng và chia sẻ những kinh nghiệm quý báu trong suốt bốn năm học tập tại trường Và một lần nữa em cảm ơn quý thầy cô đã đồng hành và giúp đỡ chúng em rất nhiều trong quá trình học tập và hoàn thành công việc của mình!

Trong quá trình thực hiện đề tài, do hạn chế về kiến thức cũng như thời gian, em không thể tránh khỏi những thiếu sót Vì thế, em mong rằng quý thầy cô có thể thông cảm và đóng góp ý kiến để em có thể hoàn thành đề tài này một cách tốt nhất Những góp ý đó sẽ giúp em hoàn thiện hơn và là hành trang lớn nhất để em vững bước trong tương lai sắp đến!

Em xin chân thành tri ân và cảm ơn!

Em xin cam đoan:

DANH MỤC BẢNG BIỂU vii

DANH MỤC HÌNH VẼ viii

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT x

MỞ ĐẦU 1

1 Mục tiêu đề tài 1

2 Đối tượng nghiên cứu và phạm vi nghiên cứu 1

a Đối tượng nghiên cứu 1

b Phạm vi nghiên cứu 2

3 Phương pháp nghiên cứu 2

4 Lựa chọn giải pháp công nghệ 2

5 Cấu trúc đồ án 2

Chương 1 CƠ SỞ LÝ THUYẾT 4

1.1 Giới thiệu về hệ quản trị cơ sở MySQL 4

1.1.1 Khái quát về hệ quản trị CSDL MySQL 4

1.1.2 Đặc điểm chính của hệ quản trị CSDL MySQL 4

1.1.3 Quy trình hoạt động của MySQL 5

1.2 Giới thiệu về ngôn ngữ lập trình Javascript 6

1.2.1 Giới thiệu Javascript 6

1.2.2 Công dụng của JavaScript 7

1.2.3 Thư viện JavaScript 7

1.3 Giới thiệu về framework ReactJS 8

1.3.1 Khái quát về framework ReactJS 8

1.3.2 Thành phần chính của ReactJS 9

1.3.3 Lợi ích của ReactJS 9

Giới thiệu về framework NestJS 10

1.4.2 Những lợi ích khi sử dụng framework NestJS 10

2.2 Các yêu cầu chức năng 15

2.2.1 Quản lý trung tâm 15

2.2.2 Giáo viên 15

2.2.3 Học viên 16

2.3 Yêu cầu chất lượng 16

2.4 Sơ đồ Usecase cho hệ thống 16

2.4.1 Sơ đồ Usecase cho hệ thống 17

2.4.2 Sơ đồ Usecase chức năng Quản lý lớp học 18

2.4.3 Sơ đồ Usecase chức năng Quản lý môn học 18

2.4.4 Sơ đồ Usecase chức năng Quản lý phòng học 19

2.4.5 Sơ đồ Usecase chức năng Quản lý lịch dạy 19

2.4.6 Sơ đồ Usecase chức năng Xác nhận lịch dạy 20

2.4.7 Sơ đồ Usecase chức năng Đăng ký lịch học 20

2.4.8 Sơ đồ Usecase chức năng Duyệt đăng ký lịch học 21

2.4.9 Sơ đồ Usecase chức năng Thông Báo 21

2.5 Đặc tả chức năng 22

2.5.1 Usecase Đăng ký 22

2.5.2 Usecase Đăng nhập 23

2.5.3 Usecase Quản lý lớp học 25

2.5.5 Usecase Quản lý phòng học 29

2.5.6 Usecase Quản lý lịch dạy 31

2.5.7 Usecase Xác nhận lịch dạy 34

2.5.8 Usecase Đăng ký lịch học 35

2.5.9 Usecase Duyệt Đăng ký lịch học 36

2.5.10 Usecase Thông báo 37

2.6 Sơ đồ ERD của hệ thống 40

2.7 Thiết kế cơ sở dữ liệu hệ thống 41

Chương 3 XÂY DỰNG CHƯƠNG TRÌNH 46

3.1 Công cụ xây dựng chương trình 46

3.2 Thiết kế giao diện 46

3.2.10 Trang xem lịch dạy 51

3.2.11 Trang cập nhật thông tin cá nhân Giáo viên 51

3.2.12 Trang xem thông báo 52

3.2.13 Trang đăng ký lịch học 52

3.2.14 Trang xem thời khóa biểu 53

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 54

1 Kết luận 54

2 Hướng phát triển 54

TÀI LIỆU KHAM KHẢO 55

Bảng 2.9 Kịch bản chức năng Duyệt đăng ký lịch học 37

Bảng 2.10 Kịch bản chức năng Thông báo 39

DANH MỤC HÌNH VẼ

Hình 1.1 Hình ảnh logo của MySQL 4

Hình 1.2 Mô hình hoạt động Client – Server 5

Hình 1.3 Hình ảnh logo của ngôn ngữ JavaScript 6

Hình 1.4 Hình ảnh logo của framework ReactJS 8

Hình 1.5 Hình ảnh logo của framework NestJS 10

Hình 1.6 Hình ảnh logo của phần mềm Visual Studio Code 12

Hình 1.7 Hình ảnh logo của phần mềm Start UML 13

Hình 2.1 Sơ đồ Usecase hệ thống 17

Hình 2.2 Sơ đồ Usecase chức năng Quản lý lớp học 18

Hình 2.3 Sơ đồ Usecase chức năng Quản lý môn học 18

Hình 2.4 Sơ đồ Usecase chức năng Quản lý phòng học 19

Hình 2.5 Sơ đồ Usecase chức năng Quản lý lịch dạy 19

Hình 2.6 Sơ đồ Usecase chức năng Xác nhận lịch dạy 20

Hình 2.7 Sơ đồ Usecase chức năng Đăng ký lịch học 20

Hình 2.8 Sơ đồ Usecase chức năng Duyệt đăng ký lịch học 21

Hình 2.9 Sơ đồ Usecase chức năng Thông báo 21

Hình 2.10 Sơ đồ hoạt động chức năng Đăng ký 23

Hình 2.11 Sơ đồ hoạt động chức năng Đăng nhập 24

Hình 2.12 Sơ đồ hoạt động chức năng Quản lý lớp học 26

Hình 2.13 Sơ đồ hoạt động chức năng Quản lý môn học 29

Hình 2.14 Sơ đồ hoạt động chức năng Quản lý phòng học 31

Hình 2.15 Sơ đồ hoạt động chức năng Quản lý lịch dạy 34

Hình 2.16 Sơ đồ hoạt động chức năng Duyệt đăng ký lịch dạy 35

Hình 2.17 Sơ đồ hoạt động chức năng Đăng ký lịch học 36

Hình 2.18 Sơ đồ hoạt động chức năng Duyệt Đăng ký lịch học 37

Hình 2.19 Sơ đồ hoạt động chức năng Thông báo 39

Hình 2.20 Sơ đồ ERD 40

Hình 3.1 Giao diện trang đăng nhập 46

Hình 3.2 Giao diện trang đăng ký 47

Hình 3.3 Giao diện trang chủ 47

Hình 3.4 Giao diện trang quản lý lịch dạy 48

Hình 3.5 Giao diện trang quản lý lớp học 48

Hình 3.6 Giao diện trang quản lý môn học 49

Hình 3.7 Giao diện trang quản lý phòng học 49

Hình 3.8 Giao diện trang duyệt đăng ký lịch học 50

Hình 3.9 Giao diện trang xác nhận lịch dạy 50

Hình 3.10 Giao diện trang xem lịch dạy 51

Hình 3.11 Giao diện cập nhật thông tin cá nhân giáo viên 51

Hình 3.12 Giao diện trang xem thông báo 52

Hình 3.13 Giao diện trang đăng ký lịch học 52

Hình 3.14 Giao diện xem thời khóa biểu 53

DANH SÁCH CÁC KÝ HIỆU, CHỮ VIẾT TẮT

System

Hệ quản trị cơ sở dữ liệu

Language

Ngôn ngữ truy vấn có cấu trúc

Ngôn ngữ đánh dấu siêu văn bản

MỞ ĐẦU

Trong kỷ nguyên công nghệ số bùng nổ như hiện nay, vai trò của Công nghệ thông tin trong sự phát triển của đất nước ngày càng trở nên quan trọng Là một sinh viên ngành Công nghệ thông tin, em nhận thấy rằng việc quản lý lịch dạy tại các trung tâm luyện thi là một vấn đề nan giải, ảnh hưởng không nhỏ đến chất lượng giảng dạy và học tập Chính vì vậy, em đã quyết định lựa chọn đề tài "Quản lý lịch dạy tại trung tâm luyện thi Hoa Mai" làm đề tài cho đồ án tốt nghiệp của mình Đề tài này hướng đến mục tiêu xây dựng một website cung cấp giải pháp quản lý lịch dạy hiệu quả dành cho các trung tâm Với mong muốn tạo ra một công cụ giúp Quản lý trung tâm có thể dễ dàng quản lý lịch dạy của giáo viên, đồng thời tiết kiệm thời gian, công sức và tăng chất lượng giảng dạy và học tập

Để thực hiện đề tài này, em sẽ sử dụng mô hình RestAPI của NodeJS, một nền tảng công nghệ hiện đại và phổ biến trong phát triển web Mô hình này cho phép xây dựng các ứng dụng web mạnh mẽ, dễ dàng mở rộng và bảo trì, phù hợp với nhu cầu của các trung tâm luyện thi

1 Mục tiêu đề tài

Hiện nay, công việc quản lý còn gặp nhiều khó khăn Trung tâm Hoa Mai có nhu cầu quản lý lịch dạy của giáo viên tại trung tâm một cách rõ ràng, dễ tiếp cận trực tuyến hơn so với quá trình đăng ký dạy - học truyền thống Từ đó, đề tài “Xây dựng website quản lý lịch dạy tại trung tâm luyện thi Hoa Mai” đặt ra nhằm giải quyết khó khăn trong việc quản lý lịch dạy của các giáo viên, tạo hiệu quả và tiện ích cho trung tâm trong công tác giảng dạy và phát triển, với các mục tiêu cụ thể sau:

- Cho phép giáo viên dễ dàng theo dõi lịch dạy và xác nhận lịch dạy học - Cho phép gửi thông báo đến giáo viên và học viên khi có lịch dạy mới, thay đổi

lịch học hoặc thông báo quan trọng khác của trung tâm - Cho phép học viên đăng ký lớp học mà không cần tới trung tâm để đăng ký

2 Đối tượng nghiên cứu và phạm vi nghiên cứu a Đối tượng nghiên cứu

Quản lý trung tâm, giáo viên và học viên

b Phạm vi nghiên cứu

Áp dụng cho trung tâm luyện thi Hoa Mai

3 Phương pháp nghiên cứu

Đề tài được nghiên cứu thông qua thứ tự các phương pháp sau: - Khảo sát hành vi người dùng

- Lên ý tưởng giải quyết vấn đề người dùng đang gặp phải - Lựa chọn công nghệ phù hợp

- Phân tích thiết kế hệ thống - Xây dựng hệ thống

- Thử nghiệm và ứng dụng

4 Lựa chọn giải pháp công nghệ

- Ngôn ngữ lập trình: Sử dụng ngôn ngữ lập trình JavaScript để xây dựng giao diện trang web và các chức năng tương tác trên trình duyệt

- Framework: Sử dụng các framework ReactJS (frontend), NestJS (backend) để phát triển và quản lý các thành phần của trang web một cách dễ dàng và hiệu quả

- Cơ sở dữ liệu: Sử dụng hệ quản trị cơ sở MySQL để lưu trữ và quản lý thông tin về lịch dạy, giáo viên, học viên và các dữ liệu liên quan

- Công cụ hỗ trợ:

• StartUML: Thiết kế cơ sở dữ liệu, sơ đồ usecase, sơ đồ hoạt động • VisualCode: Hỗ trợ soạn thảo mã nguồn

5 Cấu trúc đồ án Mở đầu

Giới thiệu lý do và các mục tiêu mà đề tài cần giải quyết, phạm vi nghiên cứu của đề tài Xác định rõ đối tượng hướng đến, giải pháp công nghệ để triển khai để xây dựng đề tài

Chương 1: Cơ sở lý thuyết

Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình JavaScript, và hệ quản trị cơ sở dữ liệu MySQL

Chương 2: Phân tích, thiết kế hệ thống

Phân tích các tác nhân và chức năng của từng tác nhân của hệ thống Thiết kế sơ đồ use-case, sơ đồ hoạt động, sơ đồ ERD Thiết kế cơ sở dữ liệu Xây dựng kịch bảng cho từng use-case hệ thống

Chương 3: Xây dựng chương trình

Xây dựng giao diện và chức năng của hệ thống

Kết luận và hướng phát triển

Kết luận chung cho các chương trong đồ án Trình bày những vấn đề đã giải quyết đồng thời trình bày hướng phát triển

sở dữ liệu [1]

Hình 1.1 Hình ảnh logo của MySQL

1.1.2 Đặc điểm chính của hệ quản trị CSDL MySQL

- Hỗ trợ ngôn ngữ truy vấn cấu trúc (SQL): MySQL tuân thủ chuẩn SQL

và cung cấp các câu lệnh và chức năng để truy vấn, thêm, sửa đổi và xóa dữ liệu trong cơ sở dữ liệu

- Độ tin cậy và hiệu suất: MySQL được tối ưu hóa để cung cấp hiệu suất

cao và độ tin cậy trong việc xử lý các truy vấn và thao tác cơ sở dữ liệu

- Khả năng mở rộng: MySQL cho phép mở rộng cả theo chiều ngang

(horizontal scaling) và theo chiều dọc (vertical scaling), cho phép bạn tăng cường khả năng chịu tải và quy mô của cơ sở dữ liệu

- Hỗ trợ đa nền tảng: MySQL có thể chạy trên nhiều hệ điều hành, bao

gồm Windows, macOS và các bản phân phối Linux

- Bảo mật: MySQL cung cấp các tính năng bảo mật như phân quyền người

dùng và mã hóa dữ liệu để bảo vệ cơ sở dữ liệu khỏi truy cập trái phép

1.1.3 Quy trình hoạt động của MySQL

- Kết nối: Người dùng kết nối đến MySQL Server bằng các ứng dụng hoặc

công cụ quản lý cơ sở dữ liệu

- Xử lý yêu cầu: MySQL Server nhận yêu cầu từ người dùng và xử lý các

truy vấn SQL tương ứng Điều này bao gồm việc phân tích cú pháp, tạo kế hoạch truy vấn, truy xuất dữ liệu từ bộ nhớ hoặc đĩa, và trả về kết quả cho người dùng

- Lưu trữ và truy xuất dữ liệu: MySQL sử dụng cấu trúc bảng để lưu trữ

dữ liệu dưới dạng hàng và cột Dữ liệu được lưu trữ trong các tập tin và các chỉ mục được tạo để tăng tốc độ truy xuất dữ liệu

- Bảo đảm tính toàn vẹn dữ liệu: MySQL hỗ trợ các ràng buộc

(constraints) như khóa ngoại (foreign key) và quản lý các giao dịch để đảm bảo tính toàn vẹn dữ liệu

- Sao lưu và phục hồi: MySQL cung cấp các công cụ để sao lưu và phục

hồi dữ liệu, bảo vệ dữ liệu khỏi mất mát hoặc hỏng hóc

Hình 1.2 Mô hình hoạt động Client – Server

Đây là một khái quát về hệ quản trị cơ sở dữ liệu MySQL và các đặc điểm và quy trình hoạt động chính của nó MySQL có rất nhiều tính năng và khả năng mạnh

mẽ, là một công cụ quan trọng cho việc lưu trữ và quản lý dữ liệu [1]

1.2 Giới thiệu về ngôn ngữ lập trình Javascript 1.2.1 Giới thiệu Javascript

JavaScript là một ngôn ngữ lập trình phía client phổ biến và mạnh mẽ được sử dụng chủ yếu để tạo ra các trang web tương tác Nó được phát triển ban đầu bởi Netscape và hiện tại được tiêu chuẩn hóa bởi tổ chức chuẩn web quốc tế (International Organization for Standardization – ISO) và Liên minh World Wide Web (World Wide Web Consortium - W3C) JavaScript cho phép các nhà phát triển web tạo ra các ứng dụng động, hiệu ứng, và tương tác trực tiếp với

người dùng trên trình duyệt web [2]

Hình 1.3 Hình ảnh logo của ngôn ngữ JavaScript

1.2.2 Công dụng của JavaScript - Tạo ra các trang web tương tác: JavaScript cho phép việc thay đổi, tương

tác và cập nhật nội dung trên trang web mà không cần tải lại toàn bộ trang Điều này tạo ra trải nghiệm người dùng mượt mà và tương tác trực tiếp

- Phát triển ứng dụng web đa nền tảng: JavaScript được sử dụng rộng rãi

trong phát triển ứng dụng web đa nền tảng, cho phép viết code một lần và chạy trên nhiều nền tảng khác nhau như trình duyệt web, điện thoại di động, máy tính bảng, và các thiết bị khác

- Xây dựng giao diện người dùng (UI3): JavaScript được sử dụng để tạo ra

các thành phần giao diện người dùng động và tương tác trên trang web, bao gồm các menu thả xuống, hiệu ứng hover, biểu đồ, và hộp thoại thông báo

- Xử lý và kiểm tra dữ liệu: JavaScript cung cấp các công cụ để xử lý và kiểm

tra dữ liệu trên trang web, bao gồm kiểm tra hợp lệ của thông tin đầu vào từ người dùng và thực hiện các phép tính toán trên dữ liệu

- Tương tác với các API6 và dịch vụ web: JavaScript cho phép giao tiếp với

các API và dịch vụ web khác nhau, như API RESTful, dịch vụ đám mây, và các dịch vụ mạng xã hội

Tóm lại, JavaScript là một ngôn ngữ lập trình quan trọng trong phát triển web, cho phép tạo ra các trang web tương tác, ứng dụng đa nền tảng và giao diện người dùng động Nó có nhiều công dụng và được sử dụng rộng rãi trong ngành công

nghệ thông tin [2]

1.2.3 Thư viện JavaScript

Thư viện JavaScript là tập hợp các đoạn mã viết sẵn mà các nhà phát triển web có thể tái sử dụng để thực hiện các hàm JavaScript chuẩn Mã thư viện JavaScript được gắn vào phần còn lại của mã dự án khi cần thiết Nếu bạn coi mã ứng dụng JavaScript như một ngôi nhà thì các thư viện JavaScript sẽ giống như đồ nội thất làm sẵn mà các nhà phát triển có thể sử dụng để cải thiện chức năng của ngôi nhà

Sau đây là một số cách sử dụng thư viện JavaScript phổ biến: - Trực quan hóa dữ liệu

- Điều chỉnh DOM - Biểu mẫu

- Các hàm toán học và văn bản [2] 1.3 Giới thiệu về framework ReactJS

1.3.1 Khái quát về framework ReactJS

ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diệ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ải là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

Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sử dụng “vanilla JavaScript” (JavaScript thuần) và Jquery6 để xây dựng UI Điều đó đồng nghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro hơn Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạo ReactJS với mục đích chính là cải thiện quá trình phát

triển UI [3]

Hình 1.4 Hình ảnh logo của framework ReactJS

1.3.2 Thành phần chính của ReactJS a Redux

Đây là một phần rất quan trọng của ReactJS và không ai sử dụng Redux mà không biết ReactJS không có mô-đun chuyên dụng để xử lý dữ liệu, vì vậy ReactJS chia chế độ xem thành các thành phần nhỏ hơn mà bạn thiết lập độc lập và làm cho chúng liên quan chặt chẽ hơn

Các liên kết và mối quan hệ giữa các thành phần trong ReactJS đòi hỏi sự chú ý đặc biệt, bởi vì luồng dữ liệu một chiều từ cấp độ mẹ đến cấp độ con là luồng dữ liệu duy nhất trong ReactJS Nó áp dụng cho các dự án, nhưng bất chấp những điều cần lưu ý, nó có một mặt tốt đẹp khác Đó là về việc thúc đẩy tất cả

các tính năng và vai trò khi ReactJS sử dụng engine [2] b Virtual Dom

Đây là phần mà hầu như tất cả các framework đều sử dụng dom ảo và ReactJS sử dụng nó khi dom ảo thay đổi Điều đặc biệt ở đây là bạn không phải thao tác trực tiếp với dom mà có thể xem các lượt xem và thay đổi

Vì Virtual Dom hoạt động như một mô hình và một khung nhìn, nên việc thay đổi một trong hai yếu tố này sẽ thay đổi yếu tố kia và ngược lại mà không cần thao tác trực tiếp Tuy nhiên, có thể thực hiện cơ chế mù dữ liệu Mục đích của việc này là tăng tốc đáng kể ứng dụng của bạn, đây là một trong những lợi thế lớn nhất của việc sử dụng Virtual Dom

1.3.3 Lợi ích của ReactJS

Tạo cho chính bản thân ReactJS một dom ảo, đây là nơi các component được tồn tại trên đó Tạo một dom như thế này sẽ cải thiện hiệu suất rất nhiều Nếu bạn cần thay đổi hoặc cập nhật một phép tính trong dom, ReactJS sẽ tính toán nó trước và phần còn lại sẽ chạy trong dom để thực hiện công việc, vì vậy ReactJS có thể tránh các thao tác cần thiết trong dom mà không phải trả thêm phí

Việc viết các đoạn mã JS sẽ trở nên dễ dàng sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX4, cú pháp này cho phép bạn kết hợp mã HTML5 và

Javascript Ngoài ra, bạn có thể thêm mã bổ sung vào hàm kết xuất mà không cần nối chuỗi Đây được coi là một trong những tính năng thú vị của ReactJS, việc chuyển đổi các đoạn HTML sang các constructor đều được thực hiện bởi

trình chuyển đổi chính là JSX [3] 1.4 Giới thiệu về framework NestJS

1.4.1 Khái quát về framework NestJS

NestJS là một framework Node.JS cho phép xây dựng ứng dụng phía server Nest mở rộng các framework Node.js như Express hay Fastify để bổ sung thêm nhiều module hay thư viện hỗ trợ việc xử lý tác vụ Đây là một framework mã nguồn mở, sử dụng TypeScript và rất linh hoạt để xây dựng các hệ thống backend

Bên cạnh đó, NestJS còn giúp mở rộng các server Node để hỗ trợ những

cơ sở dữ liệu như MongoDB, Redis6 hay Apache Cassandra [2]

Hình 1.5 Hình ảnh logo của framework NestJS

1.4.2 Những lợi ích khi sử dụng framework NestJS

- Cho phép develop nhanh và hiệu quả hơn - Khả năng mở rộng tốt, dễ bảo trì ứng dụng - Là framework Node.js phát triển mạnh nhất trong 3 năm trở lại đây - Cộng đồng hỗ trợ lớn, tích cực

- Kết hợp phát triển front-end và mid-tier, một đặc điểm vượt trội so với hầu hết các ngôn ngữ khác

- Sử dụng TypeScript, cho phép thích ứng nhanh chóng với các thay đổi khi JavaScript đang ngày càng phát triển mạnh mẽ

- Nguồn tài liệu hướng dẫn phong phú, chi tiết - Quá trình unit testing trở nên đơn giản hơn - Được xây dựng chuyên dùng cho các ứng dụng doanh nghiệp có quy mô lớn - Cung cấp kiến trúc ứng dụng độc lập, cho phép các developer tạo ra những

ứng dụng dễ test, dễ mở rộng và dễ bảo trì - Cho phép xây dựng ứng dụng Rest API13, MVC14, microservices15,

GraphQL16, Web Socket17 hay CRON job18 - Cấu trúc chủ yếu dựa vào Angular – rất đơn giản và cho phép tập trung vào

việc thiết kế endpoint thay vì cấu trúc của ứng dụng - Cung cấp các module, dịch vụ và controller giống Angular, cho phép ứng dụng

có khả năng mở rộng và test tốt hơn so với Express hay Koa - Có tính chất kết nối lỏng, do đó những lỗi cũ trong dự án không ảnh hưởng

đến cấu trúc của codebase sau này [4] 1.5 Công cụ sử dụng phát triển hệ thống

1.5.1 Visual Studio Code a Khái niệm

Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho Windows, Linux và macOS Nó hỗ trợ chức năng debug, đi kèm với Git12, có chức năng nổi bật cú pháp (syntax highlighting), tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn

Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác Nó miễn phí và là phần mềm mã nguồn mở theo giấy phép MIT13 mặc dù bản phát hành của Microsoft là theo giấy phép phần mềm miễn phí

Hình 1.6 Hình ảnh logo của phần mềm Visual Studio Code

- Tương tự như vậy với những dòng lệnh tốn nhiều thời gian để xử lý Khi thực hiện những điều trên thì quá trình xử lý dòng lệnh đó sẽ bị hủy

1.5.2 Start UML a Khái niệm

StarUML là một mô hình nền tảng, là phần mềm hỗ trợ UML (Unified Modeling Language) Nó hỗ trợ các phương pháp tiếp cận MDA (Model Driven Architecture) bằng cách hỗ trợ các khái niệm hồ sơ UML Tức là StarUML hỗ trợ phân tích và thiết kế hệ thống một điều mà bất cứ dự án nào đều cần có

Hình 1.7 Hình ảnh logo của phần mềm Start UML

đầu, trước khi chúng được triển khai - Tăng năng suất phát triển phần mềm: - Sử dụng StartUML giúp tạo ra các thiết kế phần mềm chất lượng cao nhanh

chóng và dễ dàng hơn - Hỗ trợ nhiều loại biểu đồ UML: - StartUML hỗ trợ nhiều loại biểu đồ UML, giúp đáp ứng nhiều yêu cầu khác

nhau trong quá trình thiết kế phần mềm - Miễn phí và nguồn mở:

- StartUML là một công cụ miễn phí và nguồn mở, giúp người dùng có thể sử dụng và tùy chỉnh nó theo nhu cầu của mình

2.2.2 Giáo viên

- Đăng nhập/ Đăng xuất - Xác nhận lịch dạy - Cập nhật thông tin cá nhân - Đăng ký xin nghỉ

- Đăng ký đổi lịch dạy - Xem lịch dạy cá nhân - Xem lịch dạy của giáo viên - Xem thông báo

- Xem danh sách học viên

2.2.3 Học viên

- Đăng ký - Đăng kí lịch học - Xem lịch học - Xem thông báo - Cập nhật thông tin cá nhân

2.3 Yêu cầu chất lượng

- Giao diện phù hợp với đối tượng sử dụng, đơn giản, hợp lý - Ngôn ngữ Tiếng Việt

- Đảm bảo tính bảo mật cao, an toàn người dùng - Tốc độ xử lý và truy cập nhanh

2.4 Sơ đồ Usecase cho hệ thống

Xây dựng website quản lý lịch dạy tại trung tâm luyện thi Hoa Mai

2.4.1 Sơ đồ Usecase cho hệ thống

Hình 2.1 Sơ đồ Usecase hệ thống

2.4.2 Sơ đồ Usecase chức năng Quản lý lớp học

Hình 2.2 Sơ đồ Usecase chức năng Quản lý lớp học

2.4.3 Sơ đồ Usecase chức năng Quản lý môn học

2.4.4 Sơ đồ Usecase chức năng Quản lý phòng học

Hình 2.4 Sơ đồ Usecase chức năng Quản lý phòng học

2.4.5 Sơ đồ Usecase chức năng Quản lý lịch dạy

Hình 2.5 Sơ đồ Usecase chức năng Quản lý lịch dạy

2.4.6 Sơ đồ Usecase chức năng Xác nhận lịch dạy

Hình 2.6 Sơ đồ Usecase chức năng Xác nhận lịch dạy

2.4.7 Sơ đồ Usecase chức năng Đăng ký lịch học

Hình 2.7 Sơ đồ Usecase chức năng Đăng ký lịch học