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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.87 MB, 70 trang )

Trang 1<div class="page_container" data-page="1">

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

</div>Trang 2<div class="page_container" data-page="2">

TR¯àNG Đ¾I HàC TÀI NGUN 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

</div>Trang 3<div class="page_container" data-page="3">

Ngày nay v i s phát tri n c a công ngh 4.0 viá ự ể ÿ ệ ệc qn 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 .

</div>Trang 4<div class="page_container" data-page="4">

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!

</div>Trang 5<div class="page_container" data-page="5">

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

</div>Trang 6<div class="page_container" data-page="6">

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

</div>Trang 7<div class="page_container" data-page="7">

2.4.1 Visual Studio Code ... 6

2.4.2 Advanced Rest Client ... 8

</div>Trang 9<div class="page_container" data-page="9">

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 q 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 q 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ý q 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 q trình đào t¿o ... 44

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

Hinh 3. 28:Thêm q trình đào t¿o thành cơng ... 45

</div>Trang 10<div class="page_container" data-page="10">

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 q trình bồi d°ỡng ... 48

Hinh 3. 35:bÁng q trình cơng tác ... 48

Hinh 3. 36:Thêm q trình cơng tác ... 49

Hinh 3. 37:Sửa q trình cơng tác ... 49

Hinh 3. 38:Xóa q 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 q trình khen th°ång ... 51

Hinh 3. 42:Xóa q 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 q trình k lu t ... 54 ỷ Ã

</div>Trang 11<div class="page_container" data-page="11">

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 ự

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

</div>Trang 12<div class="page_container" data-page="12">

- Qn lý q 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 đồ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° hồ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.

</div>Trang 13<div class="page_container" data-page="13">

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 xt 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:

</div>Trang 14<div class="page_container" data-page="14">

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ữ lp 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

</div>Trang 15<div class="page_container" data-page="15">

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. Ngồ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.

</div>Trang 16<div class="page_container" data-page="16">

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ự hồ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 tin ớch mồ ròng

ã Kho lu tr an tồn

• Hỗ trợ web

</div>Trang 17<div class="page_container" data-page="17">

• 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 chun nghiệp

• Giao diện thân thiện

</div>Trang 18<div class="page_container" data-page="18">

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à

</div>Trang 19<div class="page_container" data-page="19">

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 thc vái "nguồn må", điều đó có nghĩa là āng dụng này an tồ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

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

</div>Trang 20<div class="page_container" data-page="20">

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 hồ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.

</div>Trang 21<div class="page_container" data-page="21">

➢ 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.

</div>Trang 22<div class="page_container" data-page="22">

2.4.2 Nodejs

Hình 2. 6:Nodejs

ã Nodejs l mòt nn tng (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 dng 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 hc mòt chỳt ch nh? =))

ã Phn 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ể.

</div>Trang 23<div class="page_container" data-page="23">

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 hồ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.

</div>Trang 24<div class="page_container" data-page="24">

• 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 hồ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.

</div>Trang 25<div class="page_container" data-page="25">

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

</div>Trang 26<div class="page_container" data-page="26">

• 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.

</div>Trang 27<div class="page_container" data-page="27">

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. Ã ¿

</div>Trang 28<div class="page_container" data-page="28">

+ 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

Qn 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ß

</div>Trang 29<div class="page_container" data-page="29">

-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 tt:Use Case ny cho phép ng°ãi qn lý qn lý q 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 q 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 q trình cơng tác -Đối v i chá āc năng xóa:

</div>Trang 30<div class="page_container" data-page="30">

➢ 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 q trình cơng tác

-Thơng tin q 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ý ỏ Á Á q 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=.

Qn lý q trình đào t¿o

Tóm tắt:Use Case này cho phép ng°ãi quÁn lý quÁn lý q 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 qn lý mn chình sửa thơng tin v q 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 q trình đào t¿o -Đối v i chá āc năng xóa:

</div>Trang 31<div class="page_container" data-page="31">

➢ 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 q 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ý q 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=.

Qn lý q 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

</div>Trang 32<div class="page_container" data-page="32">

➢ Sau đó nhÃn vào nút sửa để cÃp nhÃt thơng tin q 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 q trình khen th°ång -Thơng tin q trình qn lý sẽ đ°ợc thêm,s a vào b ng qu n lý q 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=.

</div>Trang 33<div class="page_container" data-page="33">

➢ 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 q 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 q trình kỷ lt -Đố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 q trình k lt ỹ

-Thơng tin q trình qn 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 ỏ Á Á ỷ Ã

</div>Trang 34<div class="page_container" data-page="34">

-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=.

</div>Trang 35<div class="page_container" data-page="35">

Qn lý q 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 q 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

</div>

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

TR¯àNG Đ¾<b>I H</b>àC TÀI NGUYÊN VÀ MÔI TR¯à<b>NG TP.HCM </b>

TR¯àNG Đ¾<b>I HàC TÀI </b>NGUN VÀ MƠI TR¯à<b>NG TP.HCM </b>

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về