(Đồ án tốt nghiệp) xây dựng hệ thống website quản lý ký túc xá 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ẬTKHOA CÔNG NGHỆ SỐ ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC NGÀNH: CÔNG NGHỆ THÔNG TIN CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN ĐỀ TÀI: XÂY DỰNG HỆ THỐNG WEBSITE

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

Sinh viên thực hiện : Đỗ Ngọc Quang Huy

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

KHOA CÔNG NGHỆ SỐ

ĐỒ ÁN TỐT NGHIỆP

ĐẠI HỌC

NGÀNH: CÔNG NGHỆ THÔNG TIN

CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

ĐỀ TÀI:

XÂY DỰNG HỆ THỐNG WEBSITE

QUẢN LÝ KÝ TÚC XÁ TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Giảng viên hướng dẫn duyệt

Đà Nẵng, tháng 6 năm 2022

này bằng Nhận xét của người hướng dẫn}

{Trang trắng này dùng để dán bản Nhận xét của người phản biên, hoặc thay trangnày bằng Nhận xét của người phản biện}

Tên đề tài: Xây dựng hệ thống website quản lý ký túc xá trường đại học sư phạm

lý ký túc xá một cách đầy đủ Với sự phát triển về Công nghệ thông tin hầu như cáctrường đại học hiện nay đã có cho mình một trang web để quản lý ký túc xá Vậy nêntrường ta hiện nay cũng cần có một trang web để giải quyết tất cả những vấn đề trên làviệc mang tính cấp thiết Đó là lí do em chọn đề tài “Xây dựng hệ thống website quản

lý ký túc xá trường đại học sư phạm kỹ thuật”

Về cấu trúc bài báo cáo ngoài các nội dung gồm phần mở đầu và kết thúc thì có

bố cục gồm 3 chương:

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

Chương này trình bày tổng quan về việc sử dụng các công nghệ hỗ trợ xây dựngwebsite, các công cụ thường xuyên sử dụng để xây dựng nền tảng cho bài toán Mô tảmột số công nghệ mới hỗ trợ phát triển website

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống Trìnhbày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu…

CHƯƠNG III: XÂY DỰNG CHƯƠNG TRÌNH

Chương này trình bày kết quả thực hiện chương trình, giao diện người dùng

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

KHOA CÔNG NGHỆ SỐ

CỘNG HÒA XÃ HÔI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: Th.S Đỗ Phú Huy

1 Tên đề tài: Xây dựng hệ thống website quản lý ký túc xá trường đại học sư phạm

kỹ thuật

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

- Quy trình đăng ký tạm trú,

- Ngôn ngữ lập trình Angular Front-end và NodeJS Back-end

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

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

Xây dựng và thử nghiệm thành công hệ thống Quản lý ký túc xá trường đại học

sư phạm kỹ thuật Cho phép sinh viên xem phòng trống, đăng ký online và xem tiềnđiện nước của từng phòng trực tiếp trên hệ thống này, quản lý sinh viên, phòng, khu,thiết bị, hóa đơn, biên lai ký túc xá

Quá trình xây dựng website:

- Thu thập thông tin tài liệu liên quan và khảo sát thực tế

- Phân tích thiết kế các chức năng của hệ thống

- Phân tích thiết kế cơ sơ dữ liệu

- Xây dựng hệ thống website

- Kiểm thử website

- Hoàn thành báo cáo tổng hợp

4 Các sản phẩm dự kiến

- Website Quản lý ký túc xá đại học sư phạm kỹ thuật

- File báo cáo hoàn chỉnh

6 Ngày nộp đồ án: 20/06/2022

Đà Nẵng, ngày 20 tháng 06 năm 2022.

LỜI NÓI ĐẦU

Ngày nay, công nghệ thông tin đã có những bước phát triển mạnh mẽ theo cảchiều rộng và sâu Máy tính điện tử không còn là một thứ phương tiện quý hiếm màđang ngày càng trở thành một công cụ làm việc và giải trí thông dụng của con người,không chỉ ở công sở mà còn ngay cả trong gia đình

Đứng trước vai trò của thông tin hoạt động cạnh tranh gay gắt, các tổ chức và cácdoanh nghiệp đều tìm mọi biện pháp để xây dựng hoàn thiện hệ thống thông tin củamình nhằm tin học hóa các hoạt động tác nghiệp của đơn vị

Hiện nay, Trường Đại học Sư phạm Kỹ thuật – Đại học Đà Nẵng đang cho sinhviên đăng ký trực tiếp tạm trú tại ký túc xá theo hình thức trên giấy, hoặc điền vàoform theo hình thứ trực tuyến (khi dịch Covid hoành hành) Chính vì vậy mà việcduyệt sinh viên, quản lý thông tin sinh viên làm thủ tục trở nên tốn nhiều công sức vàchi phí không chỉ sinh viên, ban quản lý ký túc xá, mà cả nhà trường Ngoài ra, sẽkhông thể tránh khỏi những trường hợp thất lạc giấy đăng ký, sai thông tin, không đảmbảo được tính lưu trữ an toàn, hiệu quả minh bạch cũng như không thể đảm bảo quản

lý ký túc xá một cách đầy đủ Với sự phát triển về Công nghệ thông tin hầu như cáctrường đại học hiện nay đã có cho mình một trang web để quản lý ký túc xá Vậy nêntrường ta hiện nay cũng cần có một trang web để giải quyết tất cả những vấn đề trên làviệc mang tính cấp thiết

Với sự hướng dẫn tận tình của Thầy Đỗ Phú Huy em đã hoàn thành đồ án tốtnghiệp này Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ thốngnhưng chắc rằng không tránh khỏi những thiếu sót Em rất mong nhận được sự thôngcảm và góp ý của quí Thầy cô

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

i

Em xin cam đoan:

1 Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫncủa thầy Đỗ Phú Huy

2 Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả,têncông trình ,thời gian,địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xinchịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Đỗ Ngọc Quang Huy

MỤC LỤC

MỤC LỤC iii

DANH MỤC BẢNG BIỂU vii

DANH MỤC HÌNH VẼ viii

DANH MỤC CHỮ VIẾT TẮT TIẾNG VIỆT x

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH xi

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 1

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

4 Giải pháp công nghệ 2

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

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

1.1 Giới thiệu hệ quản trị cơ sở dữ liệu MongoDB 3

1.1.1 Tổng quan về MongoDB 3

1.1.2 Ưu điểm của MongoDB so với cơ sở dữ liệu quan hệ (RDBMS) 3

1.1.3 Nhược điểm của MongoDB 4

1.2 Giới thiệu về Angular 5

1.2.1 Tổng quan về Angular 5

1.2.2 Lịch sử phát triển 5

1.2.3 Lợi ích của Angular 7

1.3 Bootstrap và Responsive 7

iii

1.4 Giới thiệu về NodeJS 8

1.4.1 Tổng quan về NodeJS 8

1.4.2 NodeJS framework sử dụng phổ biến 8

1.1 Mục nội dung Error! Bookmark not defined. Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 10

2.1 Mô tả yêu cầu phần mềm 10

2.1.1 Ban quản lý ký túc xá 10

2.1.2 Sinh viên 10

2.2 Sơ đồ Usecase 11

2.3 Mô tả Usecase 12

2.3.1 Usecase “Đăng nhập” 12

2.3.2 Usecase “Quản lý nhân viên” 12

2.3.3 Usecase “Quản lý sinh viên” 12

2.3.4 Usecase “Quản lý phòng” 13

2.3.5 Usecase “Quản lý thiết bị” 13

2.3.6 Usecase “Quản lý thông báo” 13

2.3.7 Usecase “Quản lý tài khoản” 14

2.3.8 Usecase “Quản lý khu” 14

2.3.9 Usecase “Quản lý hóa đơn điện nước” 15

2.3.10 Usecase “Quản lý biên lai thu tiền” 15

2.3.11 Usecase “Đổi mật khẩu” 16

2.3.12 Usecase “Xem phòng” 16

2.3.13 Usecase “Xem thông báo” 16

2.3.14 Usecase “Xem tiền điện nước” 16

2.3.15 Usecase “Đăng ký tạm trú” 16

2.3.16 Usecase “Duyệt sinh viên đăng ký tạm trú” 16

2.3.17 Usecase “Thống kê số sinh viên đang ở” 17

2.4 Sơ đồ 17

2.5 Thiết kế cơ sở dữ liệu 29

2.5.1 Bảng SinhVien 29

2.5.2 Bảng NhanVien 29

2.5.3 Bảng Phong 30

2.5.4 Bảng HoaDonDienNuoc 30

2.5.5 Bảng BienLaiThuTien 31

2.5.6 Bảng Khu 31

2.5.7 Bảng ThietBi 31

2.5.8 Bảng TaiKhoan 32

2.5.9 Bảng ThongBao 32

2.6 Sơ đồ quan hệ 33

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

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

3.2 Giao diện chương trình 34

3.2.1 Giao diện trang chủ 34

3.2.2 Giao diện … 35

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

3.3 Kết luận 51

3.4 Hướng phát triển 51

TÀI LIỆU THAM KHẢO 52 TÀI LIỆU THAM KHẢO Error! Bookmark not defined.

v

DANH MỤC BẢNG BIỂU

1 Bảng Sinh Viên 29

2 Bảng Nhân Viên 29

3 Bảng Phòng 30

4 Bảng Hóa Đơn Điện Nước 30

5 Bảng Biên Lai Thu Tiền 31

6 Bảng Khu 31

7 Bảng Thiết Bị 31

8 Bảng Tài Khoản 32

9 Bảng Thông Báo 32

vii

Hình 2.1: Sơ đồ Usecase 11

Hình 2.2: Sơ đồ hoạt động "Đăng nhập" 17

Hình 2.3: Sơ đồ hoạt động “Quản lý nhân viên” 18

Hình 2.4: Sơ đồ hoạt động “Quản lý thiết bị” 19

Hình 2.5: Sơ đồ hoạt động “Quản lý thống báo” 20

Hình 2.6: Sơ đồ trạng thái “Quản lý nhân viên” 21

Hình 2.7: Sơ đồ trạng thái “Đăng nhập” 22

Hình 2.8: Sơ đồ use case “Đăng nhập” 22

Hình 2.9: Sơ đồ use case “Nhân viên” 23

Hình 2.10: Sơ đồ use case “sinh viên” 24

Hình 2.11: Sơ đồ tuần tự “Đăng nhập” 25

Hình 2.12: Sơ đồ tuần tự “Quản lý nhân viên” 26

Hình 2.13: Sơ đồ tuần tự “Quản lý sinh viên” 27

Hình 2.14: Sơ đồ hoạt động “Thiết bị” 28

Hình 2.15: Sơ đồ quan hệ 33

Hình 3.1: Giao diện trang chủ 34

Hình 3.2: Giao diện thông báo 35

Hình 3.3: Giao diện chi tiết thông báo 36

Hình 3.4: Giao diện đăng ký tạm trú 37

Hình 3.5: Giao diện đăng ký tạm trú form 38

Hình 3.6: Giao diện bảng giá điện nước 39

Hình 3.7: Giao diện nội quy ký túc xá 40

Hình 3.8: Giao diện trang đăng nhập 41

Hình 3.9: Giao diện admin 42

Hình 3.10: Giao diện trang nhân viên 43

Hình 3.11: Giao diện quản lý nhân viên 44

Hình 3.12: Giao diện đăng ký nhân viên 45

Hình 3.13: Giao diện chi tiết nhân viên 46

ix

Stt Chữ viết tắt Giải nghĩa

DANH MỤC CHỮ VIẾT TẮT TIẾNG ANH

Stt Chữ viết tắt Giải nghĩa Nghĩa tiếng Việt

xi

MỞ ĐẦU

Hiện nay, Trường Đại học Sư phạm Kỹ thuật – Đại học Đà Nẵng đang cho sinhviên đăng ký trực tiếp tạm trú tại ký túc xá theo hình thức trên giấy, hoặc điền vàoform theo hình thứ trực tuyến (khi dịch Covid hoành hành) Chính vì vậy mà việcduyệt sinh viên, quản lý thông tin sinh viên làm thủ tục trở nên tốn nhiều công sức vàchi phí không chỉ sinh viên, ban quản lý ký túc xá, mà cả nhà trường Ngoài ra, sẽkhông thể tránh khỏi những trường hợp thất lạc giấy đăng ký, sai thông tin, không đảmbảo được tính lưu trữ an toàn, hiệu quả minh bạch cũng như không thể đảm bảo quản

lý ký túc xá một cách đầy đủ Với sự phát triển về Công nghệ thông tin hầu như cáctrường đại học hiện nay đã có cho mình một trang web để quản lý ký túc xá Vậy nêntrường ta hiện nay cũng cần có một trang web để giải quyết tất cả những vấn đề trên làviệc mang tính cấp thiết Đó là lí do em chọn đề tài “Xây dựng hệ thống website quản

lý ký túc xá trường đại học sư phạm kỹ thuật”

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

Nắm vững và trình bày một cách có hệ thống các cơ sở về phát triển phần mềmbằng ngôn ngữ Angular và NodeJS, EpressJs Framework, hệ quản trị cơ sở dữ liệuMongoDB và các kiến thức liên quan khác

Xây dựng hệ thống website quản lý ký túc xá trường đại học sư phạm kỹ thuật.Cho phép sinh viên xem thông tin, xem phòng trong để đăng ký tạm trú Xem tiền điệnnước của từng phòng Ban quản lý ký túc xá có thể quản lý thông tin sinh viên, thiết bị,phòng, hóa đơn điện nước, thông báo, biên lại thu tiền, một cách hiểu quả trên nềntảng web

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

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

Sinh viên, ban quản lý ký túc xá Trường Đại Học Sư Phạm Kỹ Thuật

b Phạm vi nghiên cứu

Trường Đại Học Sư Phạm Kỹ Thuật – Đại Học Đà Nẵng

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

Thu thập thông tin form biểu mẫu, quy trình đăng ký tạm trú,quản lý thông tin tại

ký túc xá Trường Đại Học Sư Phạm Kỹ Thuật

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

Chương này trình bày tổng quan về việc sử dụng các công nghệ hỗ trợ xây dựngwebsite, các công cụ thường xuyên sử dụng để xây dựng nền tảng cho bài toán Mô tảmột số công nghệ mới hỗ trợ phát triển website

CHƯƠNG II: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Chương này trình bày một hướng tiếp cận trong việc phân tích hệ thống Trìnhbày những hướng chức năng cơ bản cho người dùng, sơ đồ cơ sở dữ liệu…

CHƯƠNG III: XÂY DỰNG CHƯƠNG TRÌNH

Chương này trình bày kết quả thực hiện chương trình, giao diện người dùng

Chương 1

CƠ SỞ LÝ THUYẾT1.1.Giới thiệu hệ quản trị cơ sở dữ liệu MongoDB

1.1.1 Tổng quan về MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQL database

Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứngvới các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sửdụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các cáckích cỡ và các document khác nhau Các dữ liệu được lưu trữ trong document kiểuJSON nên truy vấn sẽ rất nhanh

MongoDB đã trở thành một trong những NoSQL database nổi trội nhất bấy giờ,được dùng làm backend cho rất nhiều website như eBay, SourceForge và The NewYork Times

1.1.2 Ưu điểm của MongoDB so với cơ sở dữ liệu quan hệ (RDBMS)

Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó mộtCollection giữ các Document khác nhau Số trường, nội dung và kích cỡ củaDocument này có thể khác với Document khác

Cấu trúc của một đối tượng là rõ ràng

Không có các Join phức tạp

Khả năng truy vấn sâu hơn MongoDB hỗ trợ các truy vấn động trên cácDocument bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh mẽ nhưSQL

MongoDB dễ dàng để mở rộng

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

Việc chuyển đổi/ánh xạ của các đối tượng ứng dụng đến các đối tượng cơ sở dữliệu là không cần thiết

Sử dụng bộ nhớ nội tại để lưu giữ phần công việc, giúp truy cập dữ liệu nhanhhơn

Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi mộtcollection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữliệu, nên bạn muốn gì thì cứ insert vào thoải mái

Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trongRDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem

có thỏa mãn các ràng buộc dữ liệu như trong RDBMS

MongoDB rất dễ mở rộng (Horizontal Scalability) Trong MongoDB có một kháiniệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệthống ta chỉ cần thêm một node với vào cluster:

Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấnthông tin đạt hiệu suất cao nhất

Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụlượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng

Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanhhơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Với một lượng dữ liệu

đủ lớn thì thử nghiệm cho thấy tốc độ insert của MongoDB có thể nhanh tới gấp 100lần so với MySQL

1.1.3 Nhược điểm của MongoDB

Một ưu điểm của MongoDB cũng chính là nhược điểm của nó MongoDB không

có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phảihết sức cẩn thận

Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value

do đó key sẽ bị lặp lại Không hỗ trợ join nên dễ bị dữ thừa dữ liệu

Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổcứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAMxuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra cáctình huống như mất điện

1.2.Giới thiệu về Angular

1.2.1 Tổng quan về Angular

Angular là một javascript framework do google phát triển để xây dựng các SinglePage Application (SPA) bằng JavaScript , HTML và TypeScript Angular cung cấpcác tính năng tích hợp cho animation , http service và có các tính năng như auto-complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên dịchthành JavaScript và hiển thị tương tự trong trình duyệt

Để học được angular thì bạn cần biết các kiển thức cơ bản sau:

Angular js : Phiên bản đầu tiền của angular là AngularJS được bắt đầu từ năm

2009 và đc ra mắt vào 20/10/2010, do lập trình viên Misko Hevery tại Google viết ranhư là một dự án kiểu “viết cho vui” Lúc đó angular js được viết theo mô hình MVC(Model-View-Controller) trong đó :

Model là thành phần trung tâm thể hiện hành vi của ứng dụng và quản lí dữ liệu.View được tạo ra dựa trên thông tin của Model Controller đóng vai trò trung giangiữa Model và View và để xử lý logic

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

Angular 2: Sau phiên bản angular js thì vào tháng 3 năm 2015 phiên bản bảnangular 2 ra đời nhằm thay thế Angular Js với các khái niệm mới nhằm đơn giản hóa

và tối ưu cho quá trình phát triển sử dụng framework này Angular 2 thay đổi hoàntoàn so với angular js bằng việc thay Controllers và $scope ( Angular js ) bằngcomponents và directives Components = directives + template , tạo nên view của ứngdụng và xử lí các logic trên view Angular 2 hoàn toàn được viết bằng Typescript.Angular 2 nhanh hơn angular js ,hỗ trợ đa nền tảng đa trình duyệt, cấu trúc cdoe được

tổ chức đơn giản và dễ sử dụng hơn

Angular 4: Ra mắt vào tháng 3/2017 đây là một phiên bản nâng cấp từ Angular 2nên kiến trúc không thay đổi nhiều ngoài việc giảm thiểu code được tạo ra từ đó giảmkích thước tệp được đóng gói xuống 60%, đẩy nhanh quá trình phát triển ứng dụng.Angular 5: Đã được phát hành vào ngày 1 tháng 11 năm 2017 với mục tiêu thayđổi về tốc độ và kích thước nên nó nhanh hơn và nhỏ hơn angular 4 Các tính năngmới so với angular 4: Sử dụng HTTPClient thay vì sử dụng HTTP : bởi vì nó nhanh,

an toàn và hiệu quả hơn

Với phiên bản Angular 5 mặc định sử dụng RxJs 5.5

Multiple export aliases : Một component có thể được xuất bằng nhiều bí danh(aliases) để giảm bớt quá trình di chuyển

Internationalized Pipes for Number, Date, and Currency: Các pipe mới được giớithiệu để tiêu chuẩn hóa tốt hơn

Tối ưu hóa build production bằng việc sử dụng công cụ build optimizer được tíchhợp sẵn vào trong CLI Công cụ này tối ưu tree shark và loại bỏ code dư thừa

Cải thiện tốc độ biên dịch bằng việc dùng TypeScript transforms, giờ đây khi build

sẽ sử dụng lệnh “ng serve –aot” AOT sẽ cải thiện performace khi load page và nóđược dùng để deploy app lên production

Angular 6: Cập nhật CLI, command line interface: thêm 1 số lệnh mới như update để chuyển từ version trước sang version hiện tại; ng-add để thêm các tính năngcủa ứng dụng để trở thành một ứng dụng web tiến bộ

ng-Angular Element: Cho phép các component của ng-Angular được triển khai dướidạng component web, sau đó có thể được sử dụng trong bất kỳ trang HTML nào mộtcách dễ dàng Multiple Validators: cho phép nhiều Validators được áp dụng trên form

builder Tree-shakeable providers: giúp loại bỏ mã code chết Sử dụng RxJS 6 vớisyntax thay đổi.

Angular 7: Được phát hành vào 18 tháng 10 năm 2018 với những thay đổi như:ScrollingModule : Để scroll load dữ liệu Drag and Drop: Chúng ta có thể dễ dàngthêm tính năng kéo và thả vào một mục Angular 7.0 đã cập nhật RxJS 6.3

Angular 8: Ra mắt 28 tháng 5 năm 2019 với CLI workflow improvements,Dynamic imports for lazy routes …

Angular 9: Ra mắt mới đây 6 tháng 2 năm 2020,Angular 9 di chuyển tất cả cácứng dụng để sử dụng trình biên dịch Ivy và thời gian chạy theo mặc định Angular đãđược cập nhật để hoạt động với TypeScript 3.6 và 3.7

1.2.3 Lợi ích của Angular

Angular được “chống lưng” bởi Google, giúp cho Developer có cảm giác đượcđảm bảo Mặc nhiên, họ sẽ ám thị rằng framework này khó mà bị “khai tử”, vì vậy cứyên tâm sử dụng Cộng đồng người dùng lớn nên nếu có thắc mắc gì cũng sẽ nhanhchóng được giải đáp

Giúp phát triển Ứng dụng trang đơn (Single-page Application) Đây là ứng dụngchạy trên browser mà không bắt buộc phải tải lại trang khi sử dụng

1.3.Bootstrap và Responsive

1.3.1 Tổng quan về Bootstrap

Bootstrap là front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo

ra các trang web và các ứng dụng web Bootstrap bao gồm HTML và CSS dựa trên cácmẫu thiết kế cho kiểu chữ, hình thức, các button và các thành phần giao diện khác,cũng như mở rộng tùy chọn JavaScript Boostrap định nghĩa sẵn các class CSS giúpngười thiết kế giao diện website tiết kiệm rất nhiều thời gian Các thư viện Bootstrap

có những đoạn mã sẵn sàng cho chúng ta áp dùng vào website của mình mà khôngphải tốn quá nhiều thời gian để tự viết Với Bootstrap, việc phát triển giao diện website

để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Bootstrap cung cấp tínhnăng responsive và mobile first, nghĩa là làm cho trang web có thể tự co giãn để tươngthích với mọi thiết bị khác nhau, từ điện thoại di động đến máy tính bảng, máy tínhxách tay, máy tính để bàn, Một khía cạnh khác là responsive web design làm chotrang web cung cấp được trải nghiệm tuyệt vời cho người dùng trên nhiều thiết bị, kích

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

thước màn hình khác nhau Một trang có thể hoạt động tốt bất kể sự biến đổi sẽ cungcấp một trải nghiệm người dùng tốt và nhất quán hơn một trang được thiết kế cho mộtloại thiết bị và kích thước màn hình cụ thể

1.4.Giới thiệu về NodeJS

1.4.1 Tổng quan về NodeJS

Node.js là một nền tảng JavaScript cực kì mạnh mẽ được sử dụng để phát triển ácứng dụng chat online, các trang phát video trực tiếp, các ứng dụng một trang, và rất nhiều ứng dụng web khác Được xây dựng trên JavaScript V8 Engine của Google Chrome, nó được sử dụng rộng rãi bởi cả các công ty lớn và các startup mơi nổi (Netflix, Paypal, NASA, và Walmart)

Node.js có mã nguồn mở, hoàn toàn miễn phí và được hàng ngàn lập trình viên trên thế giới sử dụng Nó mang lại rất nhiều lợi ích so với các nền tảng phía máy chủ khác như Java hoặc PHP Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng trên V8 JavaScript Engine – trình thông dịch thực thi mã JavaScript giúp chúng

ta có thể xây dựng được các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp một cách nhanh chóng và dễ dàng mở rộng

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian

ở mức thấp nhất Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công

ty Joyent, trụ sở tại California, Hoa Kỳ

Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanhchóng Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao

Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử dụng không hiệu quả Chính vì lẽ

đó giải pháp mà Node js đưa ra là sử dụng luồng đơn

(Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời

1.4.2 NodeJS framework sử dụng phổ biến

Khi nói đến các framework Node.js phổ biến nhất, Express là lựa chọn đầu tiên của các nhà phát triển vì nó được 73% các nhà phát triển yêu thích và sử dụng

Express là một trong những Node.Js Framework động cung cấp sự linh hoạt hoàn toàn

và sự tự do cho các nhà phát triển trong việc tùy chỉnh giao diện của ứng dụng

Vì nó nhẹ, do đó, nó cực kỳ nhanh và giúp định hướng các máy chủ và bộ định tuyến Ngoài ra, khung này lý tưởng cho các ứng dụng web một trang, trang web hoặc các API HTTP công khai

Lợi ích của Express:

 Cung cấp hỗ trợ cho các plugin và tiện ích mở rộng khácnhau để tăng cường chức năng của nó

 Tích hợp dữ liệu liền mạch

 Một đường cong học tập dễ dàng cho các nhà phát triển đãquen thuộc với Node.Js

 Cơ chế định tuyến dựa trên URL sử dụng HTTP

 Mạnh mẽ, có thể mở rộng và hoàn toàn có thể tùy chỉnh

 Đi kèm với MVC giúp tạo các ứng dụng tập trung

Hỗ trợ hơn 14 công cụ mẫu và mang lại hiệu suất tuyệt vời Express rất phù hợpcho tất cả các loại phát triển web và ứng dụng di động ngay từ cấp nhỏ đến cấp doanhnghiệp Vì khung công tác này của Node.Js có sẵn để tạo API, do đó, bạn có thể pháttriển ứng dụng web nhanh hơn với Express Ngoài ra, khung công tác này đi kèm vớitính năng định tuyến mạnh mẽ, các tính năng bảo mật và điều khoản xử lý lỗi, vì vậycác nhà phát triển có thể dễ dàng sử dụng nó để chế tạo cấp doanh nghiệp hoặc ứngdụng dựa trên trình duyệt

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Mô tả yêu cầu phần mềm

Mỗi khi sinh viên đăng ký online trên trang website Nhân viên ký túc xá sẽ nhậnđược thông báo và xem thông tin để duyệt hay không Mời sinh viên đến để xác nhậnđăng ký, đóng tiền Biên lai thu tiền

Yêu cầu của các bên liên quan đối với phần mềm như sau:

2.1.1 Ban quản lý ký túc xá

 Đăng nhận

 Cập nhật phòng

 Cập nhật tài khoản

 Cập nhật danh sách sinh viên

 Cập nhật hóa đơn điện nước

 Cập nhật biên lai thu tiền

2.2 Sơ đồ Usecase

Hình 2.1: Sơ đồ Usecase

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

2.3 Mô tả Usecase

2.3.1 Usecase “Đăng nhập”

- Đầu vào: Email và mật khẩu

- Xử lý: nhập thông tin Email và mật khẩu  Nhấn đăng nhập  Thông tin sẽ

được xử lý, hệ thống sẽ kiểm tra thông tin có trùng khớp với thông tin ngườidùng trong cơ sở dữ liệu

- Đầu ra: Thông báo, kết quả từ hệ thống.

2.3.2 Usecase “Quản lý nhân viên”

- Đầu vào: Thông tin nhân viên

- Xử lý:

• Thêm nhân viên: Khi nhập xong thông tin nhân viên nhấn nút “Tạo nhânviên”  Xuất hiện hộp thoại thông báo tạo nhân viên thành công hay thấtbại  nhấn nút “OK” để quay về danh sách nhân viên và nhân viên mớiđược thêm vào

• Sửa thông tin nhân viên: Nhập thông tin nhân viên vào các ô tương ứng

• Xóa thông tin nhân viên : chọn nhân viên cần xóa  nhấn nút “Xóa” Xuất hiện hộp thoại thông báo có muốn xóa nhân viên hay không  Nhấn

“Xóa” để xác nhận xóa  Xuất hiện hộp thoại thông báo xóa nhân viênthành công hay thất bại hoặc  Nhấn “Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin nhân viên

đã thay đổi)

2.3.3 Usecase “Quản lý sinh viên”

- Đầu vào: Thông tin sinh viên

- Xử lý:

• Thêm sinh viên: Khi nhập xong thông tin sinh viên nhấn nút “Tạo sinhviên”  Xuất hiện hộp thoại thông báo tạo sinh viên thành công hay thấtbại  nhấn nút “OK” để quay về danh sách sinh viên mới, sinh viên đãđược thêm vào

• Sửa thông tin sinh viên: Nhập thông tin sinh viên vào các ô tương ứng

• Xóa thông tin sinh viên: chọn sinh viên cần xóa  nhấn nút “Xóa”  Xuấthiện hộp thoại thông báo có muốn xóa sinh viên hay không  Nhấn “Xóa”

để xác nhận xóa  Xuất hiện hộp thoại thông báo xóa sinh viên thành cônghay thất bại hoặc  Nhấn “Hủy” để hủy thao tác.

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin sinh viên

• Sửa thông tin phòng: Nhập thông tin phòng vào các ô tương ứng

• Xóa thông tin phòng: chọn phòngcần xóa  nhấn nút “Xóa”  Xuất hiệnhộp thoại thông báo có muốn xóa phòng hay không  Nhấn “Xóa” để xácnhận xóa  Xuất hiện hộp thoại thông báo xóa phòng thành công hay thấtbại hoặc  Nhấn “Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin phòng đã thay đổi)

2.3.5 Usecase “Quản lý thiết bị”

- Đầu vào: Thông tin thiết bị

- Xử lý:

• Thêm phòng: Khi nhập xong thông tin thiết bị nhấn nút “Tạo thiết bị” Xuất hiện hộp thoại thông báo tạo phòng thành công hay thất bại  nhấnnút “OK” để quay về danh sách thiết bị, thiết bị mới đã được thêm vào

• Sửa thông tin thiết bị: Nhập thông tin thiết bị vào các ô tương ứng

• Xóa thông tin thiết bị: chọn thiết bị: cần xóa  nhấn nút “Xóa”  Xuấthiện hộp thoại thông báo có muốn xóa thiết bị hay không  Nhấn “Xóa” đểxác nhận xóa  Xuất hiện hộp thoại thông báo xóa thiết bị thành công haythất bại hoặc  Nhấn “Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin thiết bị đãthay đổi)

2.3.6 Usecase “Quản lý thông báo”

- Đầu vào: Thông tin thông báo

- Xử lý:

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

• Thêm thông báo: Khi nhập xong thông tin thông báo  nhấn nút “Tạothông báo”  Xuất hiện hộp thoại thông báo tạo thông báo phòng thànhcông hay thất bại  nhấn nút “OK” để quay về danh sách thông báo, thôngbáo mới đã được thêm vào

• Sửa thông tin thông báo: Nhập thông tin thông báo vào các ô tương ứng

• Xóa thông tin thông báo: chọn thông báo cần xóa  nhấn nút “Xóa” Xuất hiện hộp thoại thông báo có muốn xóa thông báo hay không  Nhấn

“Xóa” để xác nhận xóa  Xuất hiện hộp thoại thông báo xóa thông báothành công hay thất bại hoặc  Nhấn “Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin thông báo

đã thay đổi)

2.3.7 Usecase “Quản lý tài khoản”

- Đầu vào: Thông tin tài khoản

- Xử lý:

• Thêm tài khoản: Khi nhập xong thông tin thông báo  nhấn nút “Tạo tàikhoản”  Xuất hiện hộp thoại thông báo tạo tài khoản thành công hay thấtbại  nhấn nút “OK” để quay về danh sách tài khoản, tài khoản mới đãđược thêm vào

• Sửa thông tin tài khoản: Nhập thông tin tài khoản vào các ô tương ứng

• Xóa thông tin tài khoản: chọn tài khoản cần xóa  nhấn nút “Xóa”  Xuấthiện hộp thoại thông báo có muốn xóa tài khoản hay không  Nhấn “Xóa”

để xác nhận xóa  Xuất hiện hộp thoại thông báo xóa thông báo tài khoảnthành công hay thất bại hoặc  Nhấn “Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin tài khoản

đã thay đổi)

2.3.8 Usecase “Quản lý khu”

- Đầu vào: Thông tin khu

- Xử lý:

• Thêm khu: Khi nhập xong thông tin khu  nhấn nút “Tạo khu”  Xuấthiện hộp thoại thông báo tạo khu thành công hay thất bại  nhấn nút “OK”

để quay về danh sách khu, khu mới đã được thêm vào

• Sửa thông tin khu: Nhập thông tin khu vào các ô tương ứng

• Xóa thông tin khu: chọn tài khoản cần xóa  nhấn nút “Xóa”  Xuất hiệnhộp thoại thông báo có muốn xóa khu hay không  Nhấn “Xóa” để xácnhận xóa  Xuất hiện hộp thoại thông báo xóa khu thành công hay thất bạihoặc  Nhấn “Hủy” để hủy thao tác.

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin tài khoản

đã thay đổi)

2.3.9 Usecase “Quản lý hóa đơn điện nước”

- Đầu vào: Thông tin hóa đơn điện nước

- Xử lý:

• Thêm hóa đơn điện nước: Khi nhập xong thông tin hóa đơn điện nước nhấn nút “Tạo hóa đơn”  Xuất hiện hộp thoại thông báo tạo hóa đơn điệnnước thành công hay thất bại  nhấn nút “OK” để quay về danh sách hóađơn điện nước, hóa đơn điện nước mới đã được thêm vào

• Sửa thông tin hóa đơn điện nước: Nhập thông tin hóa đơn điện nước vàocác ô tương ứng

• Xóa thông tin hóa đơn điện nước: chọn hóa đơn điện nước cần xóa  nhấnnút “Xóa”  Xuất hiện hộp thoại thông báo có muốn xóa hóa đơn điệnnước hay không  Nhấn “Xóa” để xác nhận xóa  Xuất hiện hộp thoạithông báo xóa hóa đơn điện nước thành công hay thất bại hoặc  Nhấn

“Hủy” để hủy thao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin hóa đơn điện nước đã thay đổi)

2.3.10 Usecase “Quản lý biên lai thu tiền”

- Đầu vào: Thông tin biên lai thu tiền

- Xử lý:

• Thêm biên lai thu tiền: Khi nhập xong thông tin biên lai thu tiền  nhấnnút “Tạo biên lai”  Xuất hiện hộp thoại thông báo tạo biên lai thu tiềnthành công hay thất bại  nhấn nút “OK” để quay về danh sách biên lai thutiền, biên lai thu tiền mới đã được thêm vào

• Sửa thông tin biên lai thu tiền: Nhập thông tin biên lai thu tiền vào các ôtương ứng

• Xóa thông tin biên lai thu tiền: chọn biên lai thu tiền cần xóa  nhấn nút

“Xóa”  Xuất hiện hộp thoại thông báo có muốn xóa biên lai thu tiền hay

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

không  Nhấn “Xóa” để xác nhận xóa  Xuất hiện hộp thoại thông báoxóa biên lai thu tiền thành công hay thất bại hoặc  Nhấn “Hủy” để hủythao tác

- Đầu ra: Thông báo, kết quả từ hệ thống ( thông báo lỗi hoặc thông tin biên lai thu tiền đã thay đổi)

2.3.11 Usecase “Đổi mật khẩu”

- Đầu vào: Mật khẩu cũ và mật khẩu mới

- Xử lý: Nhập mật khẩu cũ, mật khẩu mới và xác nhận lại mật khẩu mới

- Đầu ra: Thông báo, kết quả từ hệ thống

2.3.12 Usecase “Xem phòng”

- Đầu vào: thông tin phòng muốn xem

- Xử lý: tìm kiếm phòng muốn xem

- Đầu ra: Bảng phòng muốn xem

2.3.13 Usecase “Xem thông báo”

- Đầu vào: thông tin thông báo muốn xem

- Xử lý: tìm kiếm thông báonhân viên muốn xem

- Đầu ra: Bảng thông báo muốn xem

2.3.14 Usecase “Xem tiền điện nước”

- Đầu vào: thông tin tiền điện muốn xem

- Xử lý: hiển thị thông tin tiền điện muốn xem

- Đầu ra: Bảng thông tin tiền điện muốn xem

2.3.15 Usecase “Đăng ký tạm trú”

- Đầu vào: phòng và thông tin sinh viên

- Xử lý: gửi yêu cầu đến ban quản lý ký túc xá

- Đầu ra: kết quả đăng ký tạm trú

2.3.16 Usecase “Duyệt sinh viên đăng ký tạm trú”

- Đầu vào: Danh sách sinh viên đăng ký tạm trú

- Xử lý: Chọn sinh viên muốn duyệt click “Duyệt” Hiển thị modal comfirm

 click “OK” để duyệt  Sau khi đã duyệt chuyển đến danh sách sinh viên đang ở Hoặc  click “Hủy để hủy thao tác

 click “Xóa” ” Hiển thị modal comfirm  click “OK” để xóa hoặc “Hủy”

để hủy thao tác Sau khi đã xóa chuyển đến danh sách sinh viên đang ở Sinh viên bị xóa sẽ mất trong danh sách

- Đầu ra: Danh sách sinh viên mới được cập nhật

2.3.17 Usecase “Thống kê số sinh viên đang ở”

- Đầu vào: danh sách sinh viên

- Xử lý: Chọn học kỳ muốn xem thống kê tình trạng chấm

Đầu ra: Danh sách sinh viên và tình trạng chấm tương ứng của các sinh viên

2.4 Sơ đồ

Hình 2.1: Sơ đồ hoạt động "Đăng nhập"

Xây dựng hệ thông website quản lý ký túc xá trường đại học sư phạm kỹ thuật

Hình 2.2: Sơ đồ hoạt động “Quản lý nhân viên”