Quản lý nhân sự trường Đại học

Xây dựng mệt trang web có thể quản lý nhân sự và xem thông tin của nhân sự và các quá trình của cán bộ đó.. Mục tiêu đã đạt được: Thiết kế được trang web quản lý nhân sự Thiết kế tổng qu

KHOA: HỆ THỐNG THÔNG TIN VÀ VIỄN THÁM

KHOA LUAN TOT NGHIEP

CHUYEN NGANH: CONG NGHE THONG TIN

QUAN LY NHAN SU TRUONG DAI HOC

Giáo viên hướng dẫn: Th§.Trn Thị Mỹ Lệ

TP H 6Chi Minh, Ngay 21 thang 6 năm 2022

KHOA: HỆ THỐNG THÔNG TIN VÀ VIỄN THÁM

KHOA LUAN TOT NGHIEP

CHUYEN NGANH: CONG NGHE THONG TIN

QUAN LY NHAN SU TRUONG DAI HOC

Giáo viên hướng dẫn: Th§.Trn Thị Mỹ Lệ

TP H 6Chi Minh, Ngay 21 thang 6 năm 2022

Trong thoi gian làm đô án, được sự chi bao tận tình của ThS.Trần Thị Mỹ Lệ cùng với sự nỗ lực cố gắng của bản thân đến nay đ ôán đã được hoàn thành, tuy nhiên với kiến thức còn hạn chế nên không tránh khỏi những thiếu sót Tác giả rất mong sự đóng gdp ý kiến của th%⁄/cô giáo để ứng dụng web này được hoàn thiện tốt hơn

Xin chân thành cảm ơn!

Em xin cam đoan rằng đây là công trình nghiên cứu độc lập của em không sao chép của bất kì người khác Những ngu ôn tài liệu tham khảo đảm bảo có ngu ôn gốc xuất xứ rõ

ràng và được trích dẫn hợp pháp nhất

Nếu những lởi cam đoan trên của em không chính xác, em xin chịu hoàn toàn trách nhiệm và chịu mọi hình thức kỷ luật từ khoa và nhà trưởng

(Của giảng viên hướng dẫn tại Khoa)

Kết luận: Ð tông ý hoặc không đông ý cho sinh viên báo cáo

TP.H ôChí Minh, ngày tháng năm

GIẢNG VIÊN HƯỚNG DẪN (Ký tên)

(Cua giang vién phan bién)

NGUOT NHAN XET

(Ky tén)

Tu%® 1 Phân tích yêu cần, khảo sát

Học và ôn tập lại các framework

diện đã xây dựng và chỉnh sửa

Tên đè tài: Quản lý nhân sự trưởng đại học

Vấn đ`êđược đưa ra:

Với công nghệ 4.0 phát triển như hiện nay, cùng với sự phổ biến của máy tính, điện thoại Bạn có thể quản lý nhân sự một cách hợp lý qua phần m`ần quản lý nhân sự Bên cạnh đó bạn cũng có thể đảm bảo tiếp kiệm được giấy, thời gian để quản lý nhân

sự hơn khi quản lý nhân sự trên phì m`ền

Áp dụng các kiến thức đã tích lũy để phát triển 1 trang web nhu: ph% mn quan ly nhân sự là một đi âi c3n thiết Bởi vì đi'âi này cho phép học được những kiến thức mới, rèn luyện kiến thức, kỹ năng lập trình, đồng thơi nâng cao kinh nghiệm và học hỏi được thêm được các kỹ năng quan trọng khác Chính vì thế em chọn đề tài xây dựng trang web quản lý nhân sự bằng reac(Jjs

Xây dựng mệt trang web có thể quản lý nhân sự và xem thông tin của nhân sự và các quá trình của cán bộ đó

Mục tiêu đã đạt được: Thiết kế được trang web quản lý nhân sự

Thiết kế tổng quát đ êtài:

Chương 1: Tổng quan tài liệu (Giới thiệu về đ ềtài, cơ sở lý thuyết)

Chương 2: Phương pháp thực hiện (Các yêu c3 kỹ thuật và các mô hình của ứng dung web)

Chương 3: Truển khai ứng dụng web (triển khai ứng dung)

Chương 4: Kết Luận

Kết luận:

Khóa luận hiện tại chưa đ% đủ hết các chức năng mà khi phân tích hệ thống đưa ra cần phải bổ sung thêm để cho ứng dụng web hoàn thiện hơn

9009631000105 1 CHUONG I1: TỔNG QUAN TÀI LIỆU ¿22 22SE£+EE+EEEEE E2 EEEESEEExerkrkrree 2

CHƯƠNG 2: PHƯƠNG PHÁP THỰC HIỆN - 2-52 SE S2 SE Sexy 17

2.1 Các yêu c`äI kỹ thuật - < LH HH nu TH ng KH 17 2.2 Cơ sở dữ liệu (Mô hình ERTD) - -Ặ- Sàn ST ST HH HH HH Hit 17

Chuong 1: TONG QUAN TAI LIEU

l0 0n g1 9) .aa 4

Hình 1 2: Visual Studio Ođe - - Gà TH nh Hà 6 Hình 1 3: Giao diện Postiman - G ST ng ng HH nh 8 Hình 1 4: Giao diện Microsoft SQL, S€TVCT - - SẠ SH HH ng kg 9 li i0 10

li in 1 ỐỒ.Ổ - 11

i0 ngoc ằ.ằ.ằ 11

li i00 1 13

Hinh 1 9: React Router a ằ.ằ 14

Chương 2: PHƯƠNG PHÁP THỰC HIỆN 0020 600ì.310-).70 11 17

Hình 2 2: Lược đ`ô se ase ng ng TT ng TT ng và 18

Hình 2 3: Lược đ`ôsequence Đăng nhập - HH HS HH HH nh 27 Hình 2 4: Lược đ ôsequence quản lý thông tỉn cán bỘ - ScSSsssessersereeree 28 Hình 2 5: Lược đ`ôsequence quản lý quá trình công tác đơn vị « css«e 29 Hình 2 6: lược đ ôsequence quản lý quá trình b`ổ dưỡng - o- S5 s22 30 Hình 2 7: Lược đ ôsequence quản lý quá trình đào fạO - sàn sereseereereeres 31 Hình 2 8: Lược đ`ồsequence quản lý quá trình khen thưởng - 5 +c<+<+ sex 32 Hình 2 9: Lược đ 'ôsequence quản lý quá trình kỳ luật 5- 55+ s+< + + + s2 33 Hình 2 10: Lược đ`ồsequence Quản lý giở dạy, NCKH 2-5-5 55c Scscsrersres 34 Hình 2 I1: Lược đ ôsequence Quản lý hợp đ'ông lao động - Sàn 35 Hình 2 12: Lược d'ôsequence gia hạn hộp đông lo động 5S ẶẶ cà 36 Hình 2 13: Lược đ ôsequence Tìm kiếm thông fiIn cán bộ -c cà series 36 Chương 3: TRIỂN KHAI ƯNG DỤNG WEB

Hinh 3 1: Vào giao diện trang đăng nhập - ¿- ¿©5255 SE Sx#EeE2xeExeErrerrerrerees 37 HÌnh 3 2: Token váo local s(Orage - - +2 + E222 392121111111 11 21111211111 37 HÌnh 3 3: Đăng nhập thành công vào trang chủ - 222 5x2 Sx+x+x+xexersxsrersrs 37

HÌnh 3 4: Danh sách cán ĐỘ - + ++ ke EE S3 SESE 3191 T39 TT TT ng Hàn rệt 38

HÌnh 3 5: Nhập thông tin cán bộ c 3n thêm ¿2-55-5225 2 22x22 zxerrrrrrrree 39 HÌnh 3 6: Thêm cán bộ thành công ¿- + 2 5£ S2 S22 SE SE9SESE+E#EEEEEEE SE Errrvrrrxee 39

HÌnh 3 7: Xóa cán bỘ + t1 13 11 91T TT TT TT TT TH TH TH rkg 40

HÌnh 3 §: Thông tin chỉ tiết cán bộ + - + S52 SE 3S E3 E2 2211222122211 cxe 41

HÌnh 3 9: Bảng quá trinh da0 ta0 c.cccecccccscscsesessesesscsessesesscseseesesesessesesesseststesseseeeseeeeees 42

HÌnh 3 10: Modal thêm quá trình đào tạO 252 2 S6 2S+E2x+E xe eE 2E xe sec se sex ca 42 HÌnh 3 11: Thêm quá trình đaò tạo thành công ¿2+ 2 +72 S22E SE SE +x+Ecxexsrrxsre 43

HÌnh 3 12: Modal sửa quá tình đào tạo - + 25+ 525cc 2x92 E32 2E xxx cxrrrke 43

15: Bảng quá trình b ổ dưỡng - - ng HH HH HH re, 44 16: Thêm quá trình b Tổ ưỡng - - + +3 ng ng 45 17: Chức năng sửa quá trình bổ đưỡng - - cSc St nhe, 45 18: Chức năng xóa quá trình b`ổ dưỡng 5< Sss Set reire 46 19: Bảng quá trình cÔng táC - c9 9v 9H ST TH Tp 46 20: Thêm quá trình công táC - s2 HH ng vn rưy 47 21: Sửa quá trình công LÁC 5s St S ST TT HH TH TT 01111 1kg 47

23: Bảng quá trình khen thưởng - <5 + + xxx HH net 48 24: Thêm quá trình khen thưởng - - 5 St +x + xxx HH ke 49 25: Sửa quá trình khen thưỞng - +5 5+5 St S xxx ng rirg 49 26:Xóa quá trình khen thưởng, - ccsx+xSxxSx SH 111111111 irkek 50 27:Bảng quá trình kỷ luật - - 5 S33 1* 3 2 1 3v 1 1 HH HH ru 51 28: Thêm quá trình kỷ luật - 5 S313 121 1 1 ng nrykt 51 29: Sửa quá tình kỷ luật - - cv + TH HH HH HH Hi 52 30: Xóa quá trình kỷ luậtt - - S13 S33 3S 1 1 1 31 111 111 1 HH ng re 52

LỜI MỞ ĐẦU

Ngày nay với sự phát triển của công nghệ 4.0 việc quản lý các thông tin không còn khó khăn nữa Nó đem đến sự tiếp kiệm cho người dùng không phải tốn nhìu giấy mực tốn công viết tay mà chỉ c3n sử dụng máy tính và nhập Tiếp kiệm được nhìu thời gian và chi phí hơn

Sau thởi gian tìm hiểu và nghiêm cứu v ềreactjs, nodejs em đã vận dụng nó vào thực tiễn đó là trang web quản lý nhân sự bằng reactjs, nodejs sử dụng redux và cơ sở dữ liéu 1a sql server

CHƯƠNG 1: TỔNG QUAN TÀI LIỆU

1.1 Các ứng dụng liên quan

So với các ứng dụng web trong môn lập trình web thì em đã str dung ASP.NET MVC va Thiét kế web sử dung css va html thun thì luận này này sẽ cũng làm v`êweb nhưng mà sử dụng framework khác so với 2 đôán môn học lúc trước đó là ReactJs voi NodeJs

1.2 Pham vi nghiêm cứu

1.2.1 Nội dung

Tim hiéu v €Reactjs, Nodejs

Tìm hiểu vêmôi trường lập trình reactjs

Tìm hiểu v`êcác kỹ thuật lập trình trang web quản lý nhân sự với reacfjs và node]s Xây dựng trang web

Tìm hiểu v êsequelize

1.2.2 Các yêu c`ầi c3n giải quyết

O Sử dụng công cụ Visual Studio Code để xây dựng trang web

Tìm hiểu các kiến thức cơ bản v`êsql server

[1 Xây dựng trang web quản lý nhân sự với sqÌ server có các chức năng

Đăng nhập

Quản lý thông tin cán bộ

Quản lý quá trình đào tạo

Quản lý quá trình bã dưỡng

Quản lý quá trình công tác

Quản lý quá trình khen thưởng, kỹ luật

1.3 Phương pháp nghiêm cứu

^^“

Công nghệ thông tin đang phát triển với một tốc độ rất nhanh Với tốc độ này, chúng ta dễ lần tưởng rằng mình không thể nào nghĩ ra cái gì hay hơn những cái đang được phát triển bởi các tập đoàn hay công ty ph m'`ân lớn Nhưng di‘ nay là

không phải như vậy, chúng ta vẫn có thể tìm ra những vấn đ êđang t Ôn tại trong những cái có sẵn tưởng chừng như hoàn hảo đó Và việc chúng ta tìm ra sẽ giúp ích rất nhỉ li cho sự phát triển của công nghệ thông tin nói chung và lĩnh vực mà chúng ta nghiên cứu nói riêng Tuy nhiên để làm được đi 'âi đó, chúng ta c3n phải có phương pháp hỗ trợ từ các ngu n video trên Youtube, các ví dụ mẫu trên web tìm kiếm, các

hình ảnh mẫu

1.4 Cơ sở lý thuyết

1.4.1 Ngôn ngữ lập trình

Trong bài báo cáo em sử dụng ngôn ngữ lập trình Javascript

JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

1 HTML: Gitip ban thém ndi dung cho trang web

2 CSS: Dinh dang thiết kế, bố cục, phong cách, canh l'êcủa trang wcb

3 JavaScript: Cải thiện cách hoạt động của trang web

JavaScript có thể hoc nhanh và dễ dàng áp dụng cho nhi âi mục đích khác nhau, tử việc cải thiện tính năng của website đến việc chạy game và tạo phần m`ần nền web Hơn nữa, có hàng ngàn mẫu template JavaScript va ứng dụng ngoài kia, nhở vào sự cống hiến của cộng đồng, đặc biệt là Github

Tại sao lại phải chọn Javascript

JavaScript có rất nhi â ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trưởng hợp thực tế Sau đây chỉ là một số lợi ích của JavaScript:

1 Bạn không c®n một compiler vì web browser có thể biên dịch nó bằng HTML;

2 Nó dễ học hơn các ngôn ngữ lập trình khác;

3 Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

4 Nó có thể được gắn trên một số element của trang web hoặc event của trang

web như là thông qua click chuột hoặc di chuột tới;

th ._JS hoạt động trên nhi ần trình duyệt, nn tảng, vâng vâng;

6 Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

7 N6 gitip website trong tác tốt hơn với khách truy cập;

8 Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

3 Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;

4 Nó có thể được gắn trên một số element của trang web hoặc event của trang

web như là thông qua click chuột hoặc di chuột tới;

th ._JS hoạt động trên nhi ần trình duyệt, nn tảng, vâng vâng;

6 Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;

7 N6 gitip website trong tác tốt hơn với khách truy cập;

8 Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác

1.4.2 Cơ sở dũ liệu

SQL server hay còn được gọi là Microsoft SQL Server, nó từ viết tất của MS SQL Server Day chính là một loại phần m`ần đã được phát triển bởi Microsoft và nó được sử dụng để có thể dễ dàng lưu trữ cho những dữ liệu dựa theo tiêu chuẩn RDBMS

Từ đó, người ta sẽ lưu trữ dữ liệu dựa vào tiêu chuẩn RDBMS và nó cũng là một trong những hệ quản trị cơ sở dữ liệu dạng quan hệ đối tượng

Hình 1 1: MS SQL Server

SQL Server có khả năng cung ca’p day đủ các công cụ cho việc quản lý tử giao diện GUI đến sử dụng ngôn ngữ cho việc truy vấn SQL Điểm mạnh của SQL điểm mạnh của nó là có nhi `âi nền tảng được kết hợp cùng như: ASPNET, C# để xây dựng Winform cũng chính nó có khả năng hoạt động độc lập Tuy nhiên, SQL Server thưởng đi kèm với việc thực hiện riêng các ngôn ngữ SQL,, T-SQ

Các mô hình Client - Server được chia làm 2 thành phân chính bao g ‘Gn:

H Workstation: Nó được cài đặt trên các thiết bị vận hành để trở thành ph % m`ần

tương tác với hệ thống máy chủ Server

O Server: Duo cài đặt ở trên máy chủ chính, nó có thể là: SQL server, SQL Server

Agent, SSIS, SSAS

SQL Server théng thưởng được sử dụng cho mục đích lưu trữ dữ liệu Ngoài ra, nó còn mang lại những tính năng làm việc giúp người dùng làm việc hiệu quả hơn như sau:

[1 Giúp người sử dụng có thể duy trì việc lưu trữ b`n vững

[1 Cho phép bạn tạo ra nhi `âi cơ sở dữ liệu hơn

H Có khả năng phân tích đữ liệu bằng SSAS

H Nó có khả năng bảo mật cao

H Việc tạo ra được các báo cáo bằng SSRS — SQL Server Reporting Services sẽ

được dễ dàng hơn

H Các quá trình sẽ được thực hiện bằng SSIS — SQL Server Integration Services 1.4.3 Công cụ

Visual Studio Code

Hình 1 2: Visual Studio Code

Visual Studio Code (VS Code hay VSC) là một trong những trình soạn thảo mã

ngu lên phổ biến nhất được sử đụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa na

tảng, nhi âu tính năng và là mã ngu ôn mở chính là những ưu điểm vượt trội khiến VS Code ngày càng được ứng dụng rộng rãi

Visual Studio Code hỗ trợ chức nang debug, di kém voi Git, có syntax highlighting,

tự hoàn thành mã thông minh, snippets, và cải tiến mã ngu ồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác

Tính năng của visual studio code

H Hỗ trợ nhi`âi ngôn ngữ lập trình

O Hỗ trợ đan tảng

[1 Cung cấp kho tiện ích mở rộng

1 Kho lưu trữ an toàn

H Hỗ trợ đan tảng: Windows, Linux, Mac

H Hỗ trợ đa ngôn ngữ: C/C++, Cứ, F#, Visual Basic, HTML, CSS, JavaScript, JSON

Ít dung lượng

Tính năng mạnh mẽ

Intellisense chuyên nghiệp

Giao diện thân thiện

1 Sử dụng Collections (Bộ sưu tập) — Postman cho phép người dùng tạo bộ sưu tập cho các lệnh gọi API của họ Mỗi bộ sưu tập có thể tạo các thư mục con và nhi ân yêu cân (request) Đi âi này giúp việc tổ chức các bộ thử nghiệm

2 Collaboration — Collections va environment c6 thé duoc import hodc export giúp chia sẻ tệp dễ dàng

3 API Testing — Test trạng thái phản h' HTTP

4 Gỡ lỗi — Bảng đi 'âi khiển Postman giúp kiểm tra dữ liệu nào đã được truy xuất

giúp dễ dàng gỡ lỗi kiểm tra

Các chức năng cơ bản

[1 Cho phép post dữ liệu dưới dạng form (key-value), text, json

H1 Hiện kết quả trả v ềdạng text, hình ảnh, XML, JSON

O H6 tre authorization (Oauth1, 2)

O Cho phép thay doi header cua cac request

Giao dién Postman

Hinh 1 3: Giao dién Postman

Cách sử dụng là bạn chon URL di‘ method, thêm các thông tin cho body, header trong những trưởng hợp c3 thiết, sau đó nhấn send Việc của bạn là đợi và Postman sé cho bạn kết quả trả v`ênó có hình thù như thế nào

(Nói dễ hiểu là — Tương tự như phần m`ân RDBMS khác, SQL Server được xây dựng dựa trên SQL, một ngôn ngữ lập trình tiêu chuẩn để tương tác với các cơ sở

đữ liệu quan hệ Máy chủ SQL được liên kết với Transact-SQL hoặc T-SQL, triển khai SQL Microsoft Microsoft bổ sung một tập hợp các cấu trúc lập trình độc quy ân) SQL Server hoạt động độc quy`ân trên môi trưởng Windows trong hơn 20 năm Năm 2016, Microsoft đã cung cấp phiên bản trên Linux SQL Server 2017 ra mắt vào tháng 10 năm 2016 chạy trén ca Windows va Linux, SQL Server 2019 sé ra mat trong nam 2019

SQL Server được tối ưu để có thể chạy trên môi trưởng cơ sở dữ liệu rất lớn (Very Large Database Environment†) lên đến Tera-Byte và có thể phục vụ cùng lúc cho hàng ngàn user SQL Server có thể kết hợp “ăn ý” với các server khác như Microsoft

Internet Information Server (IIS), E-Commerce Server, Proxy Server

Oo Flux/Redux: 14 mét kién tric gitip ban t6 chire code ré rang và sạch sẽ

Oo Objective C: nếu bạn sử dụng React để xây dựng app cho iOS

Reactjs được dùng chính ở 2 nền tảng web và mobile:

H Ởlĩnh vực Web, sử dụng Reaet Js có thể đem lại trải nghiệm tốt cho người dùng, cũng như khả năng Hot Reload giúp bạn lập trình nhanh hơn

H Ởlĩnh vực mobile, hãy đọc bài React Native là tương lai của lập trình di động Ở bài này mình đã phan tich rat ky v @React Native, ma React Js la nh tang cht dao

NodeJs

Hình 1 6: NodeJs

[1 Nodejs là một n*ân tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ đàng mở rộng

[1 Nodejs đượ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ỳ Dù sao thì chúng ta cũng nên biết qua một chút chút lịch sử của thứ mà chúng ta đang học một chút chứ nhỉ? =))

O Phân Core bên dưới của Nodejs được viết hầ hết bằng C++ nên cho tốc độ xử lý

và hiệu năng khá cao

Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thơi gian thực Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cn đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể

Bootstrap

Hình 1 7: BootStrap

Bootstrap là một bộ sưu tập miễn phí của các mã ngu ôn mở và công cụ dùng để

tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính v`êgiao diện được quy định

“4 Z “ ` é A A A + * z ™ z TMA san như kích thước, màu sắc, độ cao, độ rộng , các designer có thể sáng tạo nhi ôn

sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website

Giữa muôn vàn ứng dụng thiết kế website hiện nay, Bootstrap vẫn có khả năng cạnh tranh cao là nhờ những đặc điểm nổi bật sau:

Oo

Oo

Oo

Oo

Dé dang thao tac

Tuy chinh dé dang

Chất lượng sản pham d ra hoàn hảo

Độ tương thích cao

Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên dịch và nén lại Ngoài ra, Bootstrap được thiết kế dưới dạng các mô-đun Do đó, dễ dàng tích hợp với

hẦi hết các mã ngu ồn mở như WordPress, Joomla, Magento, Trong đó, Bootstrap

mang đến nhi `âi chức năng nổi bật

dùng để tạo nên giao diện của một websife hoàn chỉnh như font, typography, form,

table, grid

Bootstrap cho phép bạn tùy chỉnh framework của websife trước khi tải xuống và

sử dụng nó tại trang web của khung

Tái sử dụng các thành phần lặp đi lặp lại trên trang web

Bootstrap được tích hợp jQucry Bạn chỉ cẦn khai báo chính xác các tính năng trong quá trình lập trình web của bạn

Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình ảnh làm biểu tượng và tăng tốc độ tải tra

Redux

Hình 1 8: Redux

Redux 1a mét predictable state management tool cho cdc trng dung Javascript

Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook Do vậy Redux thưởng dùng kết hợp với React

Do yéu c {1 cho cdc tng dụng single-page sử dung Javascript ngày càng trở lên phức tạp thì code của chúng ta phải quản lý nhỉ ôi state hơn

Voi Redux, state cia trng dung được giữ trong một nơi gọi là store và mỗi component đ`âi có thể access bất kỳ state nào mà chúng muốn từ chúng store này

2.5.3 Redux-thunk

Redux Thunk là một Middleware cho phép bạn viết các Action trả v êmột function thay vì một plain javascript object bằng cách trì hoãn việc đưa action đến reducer

Redux Thunk được sử dụng để xử lý các logic bất đ ông bộ phức tạp c Ân truy

cập đến Store hoặc đơn giản là việc lấy dữ liệu như Ajax request

React-router

Hình 1 9: React Router

React Router la một thư viện chuẩn để định tuyến trong React Nó cho phép đi`âi hướng giữa các chế độ xem của các thành ph 8n khác nhau trong Ứng dụng React, cho phép thay đổi URL của trình duyệt và giữ giao điện ngươi dùng đ ông bộ với URL

Các thành phần chinh cta react router:

1 BrowserRouter: BrowserRouter là một triển khai bộ định tuyến sử dụng API lịch

sử HTMLS

[1 (pushState, ReplaceState và sự kiện popstate) để giữ cho giao diện người dùng của bạn đồng bộ với URL Nó là thành ph mẹ được sử dụng để lưu trữ tất cả các thành phân khác

O Route: Route là thành ph3n được hiển thị có đi `âi kiện hiển thị một số giao diện người dùng khi đường dẫn của nó khớp với URL hiện tại

[1 Link: Link component được sử dụng để tạo liên kết đến các tuyến đường khác nhau và triển khai đi `âi hướng xung quanh ứng dụng Nó hoạt động giống như thẻ liên kết HTML

O Switch: Switch component chỉ được sử dụng để hiển thị route đẦầầ tiên phù hợp với vị trí thay vì hiển thị tất cả các tuyến đường phù hợp Mặc dù không có chức năng thách thức nào của thẻ SWTTCH trong ứng dụng được thực hiện tại đây vì không có đường dẫn LINK nào trùng khớp Nhưng giả sử chúng ta có một route

(Lưu ý rằng không có CHÍNH XÁC ở đây), sau đó tất cả các thẻ Route sẽ được xử

lý bắt đ ầi bằng '' (tất cả các Route đâi bắt đầ bằng /) Đây là nơi chúng ta cần câu lệnh SWTTCH để xử lý chỉ một trong các câu lệnh

Axios

Axios la m6t HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.Js

Việc tạo ra một HTTTP request dùng để fetch hay lưu dữ liệu là một trong những nhiệm vụ thưởng thấy mà một ứng dụng Javascript phía client c3n phải làm khi muốn giao tiếp với phía server Các thư viện bên thứ 3, đặc biệt là jQuery tử xưa đến nay vẫn

là một trong những cách phổ biến để giúp cho các browser API tương tác tốt hơn, rõ ràng mạch lạc hơn và xóa đi những điểm khác biệt giữa các browser với nhau

Khi ngày càng có nhi 'âi developer thích dùng các native DOM API được nâng cấp và cải thiện hơn jQuery, hay các thư viện lập trình front-end UI như React và Vue.js thì việc sử dụng cả một thư viện jQuery chỉ với một giá trị sử dụng đó là tính năng của hàm $.ajax đã trở nên bất hợp lý hơn bao giờ hết

Sequelize

Trước khi biết tới sequelize thì chúng ta sẽ tìm hiểu trước v`ềkhái niém ORM

O ORM (Object Relational Mapping) la mét kỹ thuật lập trình thực hiện ánh xạ CSDL sang các đối tượng trong các đối tượng lập trình như: Java,

C# (Cac table twong ứng với quan hệ giữa các class “has a' “is a’)

[1 Việc str dung ORM cho phép việc thao tác với một database một cách tự

nhiên, dễ hiểu thông qua các đối tượng lập trình Lập trình viên không

cần tới loại database, kiểu dữ liệu trong database

Và sequelize cũng là một ORM dành cho node.js và io.js Nó hỗ trợ bạn truy cập một các dễ dàng tới MSSQL, MySQL, MariaDB, PostgreSQL, SQLite cùng voi cdc tinh nang nhu 1a relations, transaction, replication

Dé cai dat sequelize vao project nodejs ta nhap:

npm install save sequelize

Sau đó cài đặt hệ quản trị cơ sở dữ liệu mà bạn muốn tương tác:

npm install save pg pg-hstore

npm install save mysql

npm install save sqlite3

npm install save tedious

Cac tinh nang chinh:

Để dử dụng tính năng thì phải cái thêm package:

npm install —-save-dev sequelize-cli

Sử dụng queryInterfacebanh để có thể sử dụng các function như:

createTable(), dropTable(), dropAlTTables(), renameTable(), để trơng tác với

các bảng trong cơ sở dữ liệu

CHƯƠNG 2: PHƯƠNG PHÁP THỰC HIỆN

2.1 Các yêu câi kỹ thuật

- Xây dựng Back-end với nodejs sử dụng thư viện express

- Sử dụng sequelize để hổ trợ cho việc kết nối nodejs với sqÌ server

- Xây dựng Front-end bang reactjs

- Sử dụng redux để gọi api của nodejs để hiển thị dữ liệu cho giao diện 2.2 Cơ sở dữ liệu (Mô hình ERD)

Hình 2 1: Lược đôERD

2.3 Phân tích và thiết kế hệ thống

2.3.1 Lược đ'ôUse Case

Hình 2 2: Lược đ 'ôUse Case

- Use-case này bất đầ khi người dùng muốn sử dụng trang web

- Hệ thống yêu câÂI người dùng nhập tên đăng nhập và mật khẩu

- Hệ thống sẽ kiểm tra thông tin:

+ Nếu chưa nhập dứữ liệu thì hệ thống sẽ thông báo “Chưa nhập tài

khoản hoặc mật khẩu” và yêu cân nhập lại

+ Nếu nhập sai thì hệ thống sẽ thông báo “tài khoản hoặc mật khẩu sai” và yêu c â nhập lại

+ Nếu tên đăng nhập và mật khẩu đúng thì cho phép người dùng vào ứng dụng

- Khi đăng nhập thành công hệ thống sẽ gửi token lên local storage để có thể thực hiện các công việc khác

- V*ềngườỡi dùng thì sẽ hiển thị giao diện người dùng

- V' quản lý thì sẽ hiển thị giao diện quản lý

Quản lý thông tin cá nhân cán bộ

Tóm tắt: Use Case này cho phép người quản lý, người dùng quản lý thông

- Ngươi quản lý nhấn vào nút thêm, xóa, sửa cán bộ

+ Đối với chắc năng thêm:

[1 Hệ thống yêu c3 người quản lý nhập các thông tin cán bộ

H Sau đó nhấn nút lưu để lưu thông tin cán bộ

+ Đối với chắc năng sửa:

[1 Người quản lý nhấn vào nút sửa

H Hệ thống sẽ hiển thị lên các thông tin cán bộ

O Quản lý nhập các thông tin cẦn sửa

Sau đó nhấn vào nút sửa để cập nhật thông tin cán bộ

+ Đối với chức năng xóa:

[1 Người quản lý nhấn vào nút xóa

H Hệ thống sẽ hiển thị một thông báo hỏi có muốn xóa hay không [1 Người quản lý nhân vào đông ý thì sẽ xóa cán bộ

- Thông tin cán bộ sẽ được thêm, sửa vào bảng quản lý cán bệ hoặc xóa khỏi bảng quản lý cán bộ

- V*ềngườỡi dùng thì sẽ xem được thông tin của ngươi dùng đó có thể xem xóa sửa

Dòng sự kiện khác:

- Nếu người quản lý nhập không đ%y đủ thông tin trong chức năng thêm thì

hệ thống sẽ thông báo “chưa nhập đ đủ thông tin”

Tìm kiếm thông tin cán bộ

Tóm tắt: Use Case này cho phép người quản lý tìm kiếm thông tin của cán

bộ

Dòng sự kiện:

Dòng sự kiện chính:

- Use-Case này bắt đần khi người quản lý muốn tìm kiếm thông tin cán bộ

- Ngươi quản lý vào giao điện tìm kiếm thông tin cán bộ

- Hệ thống yêu cÄ1 người quản lý nhập tên, số điện thoại để tìm kiếm thông

Quản lý quá trình công tác đơn vị

Tóm tắt: Use Case này cho phép người quản lý quản lý quá trình công tác đơn vị của một cán bộ

+ Đối với chắc năng thêm:

[1 Hệ thống yêu c1 người quản lý nhập các thông tin v quá trình công tác của cán bộ

H Sau đó nhấn nút lưu để lưu quá trình công tác

+ Đối với chắc năng sửa:

[1 Người quản lý nhấn vào nút sửa

H Hệ thống sẽ hiển thị lên các thông tin của quá trình công tác

O Quản lý nhập các thông tin cẦn sửa

[1 Sau đó nhấn vào nút sửa để cập nhật thông tin quá trình công tác + Đối với chức năng xóa:

[1 Người quản lý nhấn vào nút xóa

H Hệ thống sẽ hiển thị một thông báo hỏi có muốn xóa hay không [1 Người quản lý nhân vào đông ý thì sẽ xóa quá trình công tác

- Thông tin quá trình quản lý sẽ được thêm, sửa vào bảng quản lý quá trình hoặc xóa khỏi bảng quản lý quá trình công tác đơn vị

Dòng sự kiện khác:

- Nếu người quản lý nhập không đ%y đủ thông tin trong chức năng thêm thì

hệ thống sẽ thông báo “chưa nhập đ%y đủ thông tin”

Quản lý quá trình bổ dưỡng

Tóm tắt: Use Case này cho phép người quản lý quản lý quá trình b`ä dưỡng của một cán bộ

Dòng sự kiên:

Dòng sự kiện chính:

- Use Case này bắt đần khi người quản lý muốn chình sửa thông tin v`êquá trình b`ổ dưỡng của một cán bộ

- Ngươi quản lý nhấn vào nút thêm, xóa, sửa cán bộ

+ Đối với chắc năng thêm:

[1 Hệ thống yêu c1 người quản lý nhập các thông tin v quá trình b dưỡng của cán bộ

H Sau đó nhấn nút lưu để lưu quá trình b ` dưỡng

^^ + é v >

+ Đối với chắc năng sửa: