Xây dāng trang web quàn lý nhân sā bằng

Nhiều dữ liệu h¡n các công cụ khác ARC thực hiện āng dụng khách HTTP riêng cÿa nó ho¿t đßng trực tiếp trên mßt ổ cắm.. Sử dụng các biến hệ thống cÿa b¿n trong UI āng dụng nh° mßt biến th

TR¯àNG Đ¾I HàC TÀI NGUYÊN VÀ MÔI TR¯àNG TP.HCM Giáo viên h°áng dÁn : ThS.NguyÅn Văn Kiên

Sinh viên th c hi n :ự ệ Tr n Trí Trung 0750080040 Á

Láp : 07_ĐHCNTT1 Khóa : 07

TP Há Chí Minh, Ngày 23 tháng 1 năm 2022

TR¯àNG Đ¾I HàC TÀI NGUYÊN VÀ MÔI TR¯àNG TP.HCM Giáo viên h°áng dÁn : ThS.NguyÅn Văn Kiên

Sinh viên th c hi n :ự ệ Tr n Trí Trung 0750080040 Á

Láp : 07_ĐHCNTT1 Khóa : 07

TP H Chí Minh, Ngày 23 tháng 1 á năm 2021

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 c n 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 là sql server

Trong thãi gian làm đồ án, đ°ợ ực s ch b o t n tình c a ỉ Á Ã ÿ ThS.NguyÅn Văn Kiên

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 góp ý ki n c a th y giáo và các bế ÿ ầ ¿n để đồ án đ°ợc hoàn thi n tệ ốt h¡n

Xin chân thành cÁm ¡n!

(Cÿa giÁng viên h°ßng d¿n t i Khoa) ¿

(Cÿa giÁng viên phÁn biÇn)

2.4.1 Visual Studio Code 6

2.4.2 Advanced Rest Client 8

Ch°¢ng 2:C¡ Sâ LÝ THUY¾T

Hình 2 1:Logo MS SQL Server 4

Hình 2 2:Logo Visual Studio Code 6

Hình 2 3: Giao di n Advanced Rest Clientệ 8

Hình 2 4:Giao di n Microsoft SQL Serverệ 9

Hinh 3 2:Giao diện đăng nhÃp 27

Hinh 3 3:Giao di n trang qu n lý cán b 27 ệ Á ß Hinh 3 4:Giao di n thông tin cá nhân c a cán b 28 ệ ÿ ß Hinh 3 5:Giao diện quá trình đào t¿o 28

Hinh 3 6:Giao di n quá trình bệ ồi d°ỡng 29

Hinh 3 7:Giao di n quá trình công tác 29 ệ Hinh 3 8:Giao diện quá trình khen th°ång 29

Hinh 3 9:Giao di n quá trình k lu t 30 ệ ỹ Ã Hinh 3 10:L°ợc đồ sequence Đăng nhÃp 31

Hinh 3 11:L°ợc đồ sequence qu n lý thông tin cán b 32 Á ß Hinh 3 12:L°ợc đồ sequence quÁn lý quá trình công tác đ¡n vị 33

Hinh 3 13:l°ợc đồ sequence qu n lý quá trình bÁ ồi d°ỡng 34

Hinh 3 14:L°ợc đồ sequence quanr lý quá trình đào t¿o 35

Hinh 3 15:L°ợc đồ sequence quÁn lý quá trình khen th°ång 36

Hinh 3 16:L°ợc đồ sequence qu n lý quá trình k lu t 37 Á ỷ Ã Hinh 3 17: Diagram 38

Hinh 3 18:Vào giao diện trang đăng nhÃp 39

Hinh 3 19:Token vào local storage 39

Hinh 3 20:Đăng nhÃp thành công avof trang chÿ 39

Hinh 3 21:Danh sách cán b 40 ß Hinh 3 22:NhÃp thông tin cán b c n thêm 41 ß ầ Hinh 3 23:Thêm cán b thành công 41 ß Hinh 3 24:Xóa cán b 42 ß Hinh 3 25:Thông tin chi ti t c a cán b 43 ế ÿ ß Hinh 3 26:bÁng quá trình đào t¿o 44

Hinh 3 27:Modal thêm quá trình đào t¿o 44

Hinh 3 28:Thêm quá trình đào t¿o thành công 45

Hinh 3 32:Thêm quá trình bồi d°ỡng 47

Hinh 3 33:Chāc năng sửa 47

Hinh 3 34:Chāc năng xóa quá trình bồi d°ỡng 48

Hinh 3 35:bÁng quá trình công tác 48

Hinh 3 36:Thêm quá trình công tác 49

Hinh 3 37:Sửa quá trình công tác 49

Hinh 3 38:Xóa quá trình công tác 50

Hinh 3 39:bÁng quá trình khen th°ång 50

Hinh 3 40:thêm quá trình khen th°ång 51

Hinh 3 41:Sửa quá trình khen th°ång 51

Hinh 3 42:Xóa quá trình khen th°ång 52 Hinh 3 43:BÁng quá trình k lu t 53 ỹ Ã

Hinh 3 44:Thêm quá trình k lu t 53 ỹ Ã

Hinh 3 45:Sửa quá trình kỷ lu t 54 Ã

Hinh 3 46:Xóa quá trình k lu t 54 ỷ Ã

Ch°¢ng 1 :TâNG QUAN 1.1 Đặ ¿n đÁt v

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 m 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 n m m Á ự ầ ề

Áp dụng các ki n thế āc đã tích lũy để phát triển 1 trang web nh° phần m m qu n ề Á lý nhân s là mự ßt điều cần thiết.Båi vì điều 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 reactjs Á ự ằ

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 ß đó

1.2 Ph m vi nghiêm c u ¿ ā

1.2.1 N i dungß

• Tìm 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 reactjs và nodejs ề ỹ Ã Ã Á ự á • Xây d ng trang web ự

- QuÁn lý thông tin cán b ß - QuÁn lý quá trình đào t¿o

- 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ầm 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ần mềm lán Nh°ng điều này 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 nhiều 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ều đó, chúng ta cần 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.

Ch°¢ng 2:C¡ Sâ LÝ THUY¾T 2.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: Giúp b¿n thêm nßi dung cho trang web

2 CSS: Định d¿ng thiết kế, bố cục, phong cách, canh lề cÿa trang web 3 JavaScript: CÁi thiện cách ho¿t đßng cÿa trang web

JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều 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ềm nền web H¡n nữa, có hàng ngàn mÁu template JavaScript và ā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 °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;

5 JS ho¿t đßng trên nhiều trình duyệt, nền 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 Nó giúp website t°¡ng 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

Nh°ÿc điÃm:

JavaScript có rÃt nhiều °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;

5 JS ho¿t đßng trên nhiều trình duyệt, nền 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 Nó giúp website t°¡ng 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.

2.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 Đây chính là mßt lo¿i phần mềm đã đ°ợ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 2 1:Logo MS SQL Server

SQL Server có kh Á năng cung cÃp đầy đÿ 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 u n n tề ề Áng đ°ợc k t hế ợp cùng nh°: ASP.NET, C# để xây dựng Winform cũng chính nó có khÁ năng ho¿t đßng đß Ã Tuy nhiên, SQL Server th°ãng đi kèm vác l p i vi c ệ thực hi n riêng các ngôn ng SQL, T-SQL, ệ ữ

Các mô hình Client - Server đ°ợc chia làm 2 thành phần chính bao gồm: ➢ Workstation: Nó đ°ợc cài đặt trên các thiết bị vÃn hành để trå thành phần mềm

t°¡ng tác vái hệ thống máy chÿ Server

➢ Server: Đ°ợc 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:

➢ Giúp ng°ãi sử dụng có thể duy trì việc l°u trữ bền vững ➢ Cho phép b¿n t¿o ra nhiều c¡ så dữ liệu h¡n

➢ Có khÁ năng phân tích dữ liệu bằng SSAS ➢ Nó có khÁ năng bÁo mÃt cao

➢ Việc t¿o ra đ°ợc các báo cáo bằng SSRS 4 SQL Server Reporting Services sẽ đ°ợc dễ dàng h¡n

➢ Các quá trình sẽ đ°ợc thực hiện bằng SSIS 4 SQL Server Integration Services

2.3 Công cā

2.4.1 Visual Studio Code

Hình 2 2:Logo Visual Studio Code

Visual Studio Code (VS Code hay VSC) là mßt trong những trình so¿n thÁo mã nguồn

phổ biến nhÃt đ°ợc sử dụng båi các lÃp trình viên Nhanh, nhẹ, hỗ trợ đa nền 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 năng debug, đi kèm vái 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ỗ trợ nhiều ngôn ngữ lÃp trình

• Hỗ trợ đa nền tÁng

• Cung cÃp kho tiện ích må rßng

• Kho l°u trữ an toàn

• Hỗ trợ web

• L°u trữ dữ liệu d¿ng phân cÃp

Lý do b¿n nên sử dụng Visual Studio Code là vì nó có rÃt nhiều °u điểm v°ợt trßi so vái bÃt kỳ IDE nào khác:

• Hỗ trợ đa nền tÁng: Windows, Linux, Mac

• 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

2.4.2 Advanced Rest Client

Hình 2 3: Giao di n Advanced Rest Clientệ

Advanced Rest Client (ARC) là Công c kiụ ểm tra API Điều này cho phép các nhà phát tri n web t o và ki m tra các yêu c u HTTP tùy ch nh ể ¿ ể ầ ỉ

Kiểm tra API đa nền tÁng

Sử dụng ARC trên bÃt kỳ nền tÁng chính nào bao gồm Windows, MacOS và Linux

Sự đ¡n giÁn

Giao diện ng°ãi dùng dễ dàng và s¿ch sẽ giúp b¿n thực hiện yêu cầu kiểm tra nhanh h¡n

Ho¿t đßng vái Google Drive

L°u trữ các yêu cầu và dự án cÿa b¿n trên Google Drive và chia sẻ nó vái nhóm cÿa b¿n

Nhiều dữ liệu h¡n các công cụ khác

ARC thực hiện āng dụng khách HTTP riêng cÿa nó ho¿t đßng trực tiếp trên mßt ổ cắm Kết quÁ là b¿n nhÃn đ°ợc thông tin chi tiết về thãi gian yêu cầu, chuyển h°áng và

thÃm chí gửi nßi dung tin nhắn HTTP Không còn giái h¿n

Không giống nh° các công cụ khác, không có giái h¿n nào cho việc đặt tiêu đề vái yêu cầu hoặc đọc tiêu đề từ phÁn hồi B¿n có thể làm nhiều h¡n vái ARC Āng dụng gốc

ARC nh° mßt āng dụng gốc bây giã m¿nh h¡n Sử dụng các biến hệ thống cÿa b¿n trong UI āng dụng nh° mßt biến thông th°ãng

Mã nguồn må

An toàn h¡n Nếu b¿n không quen thußc vái "nguồn må", điều đó có nghĩa là āng dụng này an toàn h¡n Båi vì mã cÿa nó đ°ợc công khai để xem xét và đóng góp trên GitHub t¿i https://github.com/advanced-rest-client/arc-electron

2.4.3 Microsoft SQL Server

Hình 2 4:Giao di n Microsoft SQL Serverệ

SQL Server là mßt hệ quÁn trị c¡ så dữ liệu quan hệ (Relational Database Management System (RDBMS) sử dụng câu lệnh SQL (Transact-SQL) để trao đổi dữ liệu giữa máy Client và máy cài SQL Server Mßt RDBMS bao gồm databases, database engine

và các āng dụng dùng để quÁn lý dữ liệu và các bß phÃn khác nhau trong RDBMS SQL Server đ°ợc phát triển và tiếp thị båi Microsoft

(Nói dễ hiểu là 3 T°¡ng tự nh° phần mềm 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å dữ liệu quan hệ Máy chÿ SQL đ°ợc liên kết vái Transact SQL hoặc T SQL, triển k- - hai 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 cÁ Windows và Linux, SQL Server 2019 sẽ ra mắt trong năm 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…

2.4 Th° viÇn

2.4.1 Reactjs

Hình 2 5:Reactjs

React Js là mßt th° viện viết bằng javascript, dùng để xây dāng giao diÇn ng°ái

dùng (UI) React đ°ợc sử dụng rßng rãi và có hệ sinh thái đa d¿ng phong phú UI tÃt

nhiên là quan trọng, nh°ng không phÁi là tÃt cÁ Để phát triển āng dụng hoàn chỉnh, mßt mình React Js là không làm đ°ợc tÃt cÁ, b¿n sẽ cần thêm:

➢ Server side language: để xử lý logic và l°u trữ dữ liệu trên server

➢ HTML/CSS nếu b¿n làm āng dụng web

➢ Flux/Redux?: là mßt kiến trúc giúp b¿n tổ chāc code rõ ràng và s¿ch sẽ ➢ 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 :

➢ ä lĩnh vực Web, sử dụng React 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

bài này mình đã phân tích rÃt kỹ về React Native, mà React Js là nền tÁng chÿ đ¿o

2.4.2 Nodejs

Hình 2 6:Nodejs

• 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ễ dàng må rßng

• 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ỉ? =))

• Phần Core bên d°ái cÿa Nodejs đ°ợc viết hầu 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, cần đổi mái công nghệ, hoặc t¿o ra các dự án Startup nhanh nhÃt có thể

2.4.3 Bootstrap

Hình 2 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 sẵn nh° kích th°ác, màu sắc, đß cao, đß ßng…, các r designer có thể sáng t¿o nhiều 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

tranh cao là nhã những đặc điểm nổi bÃt sau:

Bootstrap chāa các tÃp tin JavaScript, CSS và fonts đã đ°ợc biên dịch và nén l¿i Ngoài

nhiều chāc năng nổi bÃt

• Bootstrap cho phép ng°ãi dùng truy cÃp vào th° viện <khổng lồ= các thành tố dùng để t¿o nên giao diện cÿa mßt website hoàn chỉnh nh° font, typography, form, table, grid…

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.

quá trình lÃp trình web cÿa b¿n

t°ợng và tăng tốc đß tÁi tra

2.4.4 Redux

Hình 2 8:Redux

Redux là m t predictable state management tool cho các ng d ng 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 ÿa Facebook Do vc Ãy Redux th°ãng dùng kết h p ợ vái React

Do yêu c u cho các ầ āng d ng single-page s d ng Javascript ngày càng tr lên ph c ụ ử ụ å ā t¿p thì code c a chúng ta ph i qu n lý nhiÿ Á Á ều state h¡n.

Vái Redux, state c a ng dÿ ā ụng đ°ợc gi trong mữ ßt n¡i gọi là store và mỗi component đều 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

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

2.5.4 React-router

Hình 2 9:React Router

React Router là mßt th° viện chu¿n để đị nh tuyến trong React Nó cho phép điều h°áng giữa các chế xem cÿa các thành phần khác nhau trong Āng dụng React, cho đß phép thay đổi URL cÿa trình duyệt và giữ giao diện ng°ãi dùng đồng bß vái URL

Các thành ph n chính cầ ÿa react router:

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

sử HTML5

• (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ần mẹ đ°ợc sử dụng để l°u trữ tÃt cÁ các

• Route: Route là thành phần đ°ợc hiển thị có điều 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

• 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ều h°áng xung quanh āng dụng Nó ho¿t đßng giống nh° thẻ liên kết HTML

• Switch: Switch component chỉ đ°ợc sử dụng để hiển thị route đầu 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ẻ SWITCH 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 đầu bằng '/' (tÃt cÁ các Route đều bắt đầu bằng /) Đây là n¡i chúng ta cần câu lệnh SWITCH để xử lý chỉ mßt trong các câu lệnh

2.5.5 Axios

Axios là mßt 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 HTTP 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 cần 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ều 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

Ch°¢ng 3:XÂY DĀNG VÀ TRIÂN KHAI TRANG WEB

- Use-case này bắt đầu khi ng°ãi dùng mu n s d ng trang web ố ử ụ - H th ng yêu cệ ố ầu ng°ãi dùng nhÃp tên đăng nhÃp và m t kh u à ¿

+ Nếu ch°a nhÃp d li u thì h th ng s thônữ ệ ệ ố ẽ g báo <Ch°a nhÃp tài kho n hoÁ ặc mÃt kh¿u= và yêu cầu 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ầu 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ể ực hiệ th n các công việc khác

QuÁn lý thông tin cá nhân

Tóm tắt:Use Case này cho phép ng°ãi qu n lý qu n lý thông tin cá nhân cán b Á Á ß

➢ Hệ th ng yêu cố ầu ng°ãi qu n lý nh p các thông tin cán b Á Ã ß ➢ Sau đó nhÃn nút l°u để l°u thông tin cán bß

-Đối v i chá ắc năng sửa:

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin cán b ố ẽ ể ị ß ➢ 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:

➢ Ng°ãi quÁn lý nhÃn vào nút xóa

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ 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 ß

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 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ị

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin c a quá trình công tác ố ẽ ể ị ÿ ➢ 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 quá trình công tác -Đối v i chá āc năng xóa:

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ 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ệ ống s th ẽ thông báo <ch°a nhÃp đầy đÿ thông tin=

QuÁn lý quá trình đào t¿o

Tóm tắt:Use Case này cho phép ng°ãi quÁn lý quÁn lý quá trình đào t¿o 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 đầu khi ng°ãi quÁn lý muôn chình sửa thông tin v quá trình ề đào t¿o cÿa mßt cán bß

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin cố ẽ ể ị ÿa quá trình đào t¿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 quá trình đào t¿o -Đối v i chá āc năng xóa:

➢ Ng°ãi quÁn lý nhÃn vào nút xóa

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ 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 đào t¿o

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ệ ống s th ẽ thông báo <ch°a nhÃp đầy đÿ thông tin=

QuÁn lý quá trình khen th°ãng

Tóm tắt:Use Case này cho phép ng°ãi quÁn lý quÁn lý quá trình khen th°ång cÿa mßt cán

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin cố ẽ ể ị ÿa quá trình khen th°ång

➢ Sau đó nhÃn vào nút sửa để cÃp nhÃt thông tin quá trình khen th°ång -Đối v i chá āc năng xóa:

➢ Ng°ãi quÁn lý nhÃn vào nút xóa

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ Ng°ãi quÁn lý nhân vào đồng ý thì sẽ xóa quá trình khen th°ång -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 khen th°ång

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ệ ống s th ẽ thông báo <ch°a nhÃp đầy đÿ thông tin=.

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin c a quá trình bố ẽ ể ị ÿ ồi d°ỡng ➢ 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 quá trình kỷ luÃt -Đối v i chá āc năng xóa:

➢ Ng°ãi quÁn lý nhÃn vào nút xóa

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ Ng°ãi quÁn lý nhân vào đồng ý thì sẽ xóa quá trình k luÃt ỹ

-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 k lu t ỏ Á Á ỷ Ã

-Nếu ng°ãi quÁn lý nhÃp không đầy đÿ thông tin trong chāc năng thêm thì hệ ống s th ẽ thông báo <ch°a nhÃp đầy đÿ thông tin=

QuÁn lý quá trình bái 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ồi d°ỡng cÿa

➢ Ng°ãi quÁn lý nhÃn vào nút sửa

➢ Hệ th ng s hi n th lên các thông tin c a quá trình bố ẽ ể ị ÿ ồi d°ỡng ➢ 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 quá trình bồi d°ỡng -Đối v i chá āc năng xóa:

➢ Ng°ãi quÁn lý nhÃn vào nút xóa

➢ Hệ th ng s hi n th m t thông báo h i có mu n xóa hay không ố ẽ ể ị ß ỏ ố ➢ Ng°ãi quÁn lý nhân vào đồng ý thì sẽ xóa quá trình b i d°ỡng ồ -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 bỏ Á Á ồi d°ỡng