Xây Dựng Trang Web Quản Lý Nhân Sự Bằng ReactJS

Tài liệu nghiên cứu Xây dāng trang web quàn lý nhân sā bằng, tổng hợp lý thuyết và thực hành, cung cấp kiến thức chuyên sâu về ., phục vụ nghiên cứu và ứng dụng thực tiễn

• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây Dựng Trang Web Quản Lý Nhân Sự Bằng ReactJS
• Loại tài liệu: Đồ Án Tốt Nghiệp
• Năm xuất bản: 2023
• Địa điểm: Thành Phố Hồ Chí Minh

Mục lục chi tiết

• LỜI MỞ ĐẦU
• LỜI CẢM ƠN
• NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
• NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
• DANH MỤC HÌNH ẢNH
• 1. CHƯƠNG 1: TỔNG QUAN
• 1.1. Phạm vi nghiên cứu
• 1.2. Các yêu cầu cần giải quyết
• 1.3. Phương pháp nghiên cứu
• 2. CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
• 2.1. Ngôn ngữ lập trình
• 2.2. Visual Studio Code
• 2.3. Advanced Rest Client
• 2.4. Microsoft SQL Server
• 3. CHƯƠNG 3: XÂY DỰNG VÀ TRIỂN KHAI TRANG WEB
• 3.1. Phân tích và thiết kế hệ thống
• 3.2. Lược đồ Use Case
• 3.3. Đặc tả Use Case
• 3.4. Triển khai ứng dụng
• 4. CHƯƠNG 4: KẾT LUẬN
• 4.1. Khó khăn, hạn chế
• 4.2. Hướng phát triển

Tóm tắt

I. Hướng Dẫn Xây Dựng Trang Web Quản Lý Nhân Sự Bằng ReactJS

Trong bối cảnh cuộc cách mạng công nghệ 4.0, việc chuyển đổi số trong quản lý doanh nghiệp là một yêu cầu cấp thiết. Các phương pháp quản lý nhân sự thủ công bằng giấy tờ, sổ sách đang dần bộc lộ nhiều hạn chế về thời gian, chi phí và độ chính xác. Để giải quyết bài toán này, việc xây dựng trang web quản lý nhân sự bằng ReactJS nổi lên như một giải pháp công nghệ tối ưu. Dự án này không chỉ là một ứng dụng thực tiễn các kiến thức về công nghệ phần mềm mà còn là công cụ giúp các tổ chức, doanh nghiệp tự động hóa quy trình, nâng cao hiệu suất làm việc. Việc sử dụng ReactJS, một thư viện JavaScript mạnh mẽ do Facebook phát triển, cho phép tạo ra các giao diện người dùng (UI) linh hoạt, có khả năng tương tác cao và tốc độ phản hồi nhanh. Kết hợp với NodeJS ở phía backend và hệ quản trị cơ sở dữ liệu SQL Server, hệ thống cung cấp một giải pháp toàn diện từ giao diện đến lưu trữ và xử lý dữ liệu. Bài viết này sẽ phân tích chi tiết quy trình, từ việc đặt vấn đề, lựa chọn công nghệ, phân tích thiết kế hệ thống, đến triển khai các chức năng cốt lõi. Mục tiêu là cung cấp một cái nhìn tổng quan và sâu sắc về cách thức xây dựng một phần mềm quản lý nhân sự hiện đại, đáp ứng các yêu cầu về nghiệp vụ và mang lại trải nghiệm tốt cho người dùng cuối.

1.1. Tổng quan về hệ thống quản lý nhân sự hiện đại

Một hệ thống quản lý nhân sự hiện đại không chỉ đơn thuần là nơi lưu trữ thông tin nhân viên. Nó là một nền tảng tích hợp nhiều nghiệp vụ phức tạp, từ việc quản lý hồ sơ, theo dõi quá trình công tác, đào tạo, đến việc ghi nhận khen thưởng và kỷ luật. Mục tiêu cốt lõi là số hóa toàn bộ vòng đời của một nhân viên trong tổ chức. Thay vì các tệp hồ sơ vật lý, mọi dữ liệu được lưu trữ trên một cơ sở dữ liệu tập trung, điển hình là SQL Server, giúp việc truy xuất, cập nhật và báo cáo trở nên nhanh chóng và chính xác. Hệ thống này cần đảm bảo tính bảo mật cao, phân quyền truy cập rõ ràng để chỉ những người có thẩm quyền mới có thể xem hoặc chỉnh sửa thông tin nhạy cảm. Hơn nữa, một hệ thống quản lý nhân sự hiệu quả phải có giao diện thân thiện, dễ sử dụng, giúp bộ phận nhân sự giảm thiểu thời gian cho các công việc hành chính và tập trung hơn vào các nhiệm vụ chiến lược như phát triển nhân tài hay xây dựng văn hóa doanh nghiệp.

1.2. Lý do lựa chọn ReactJS cho dự án quản lý nhân sự

Việc lựa chọn ReactJS làm công nghệ chủ đạo cho frontend trong dự án xây dựng trang web quản lý nhân sự dựa trên nhiều ưu điểm vượt trội. ReactJS sử dụng kiến trúc dựa trên component, cho phép chia nhỏ giao diện người dùng thành các thành phần độc lập và có thể tái sử dụng. Điều này không chỉ giúp mã nguồn trở nên gọn gàng, dễ quản lý mà còn tăng tốc độ phát triển. Một trong những tính năng mạnh mẽ nhất của ReactJS là Virtual DOM (DOM ảo), giúp tối ưu hóa quá trình cập nhật giao diện, mang lại hiệu năng cao và trải nghiệm người dùng mượt mà, đặc biệt khi xử lý các danh sách dữ liệu lớn như danh sách nhân viên. Hệ sinh thái của ReactJS cũng rất phong phú với các thư viện hỗ trợ như Redux để quản lý trạng thái ứng dụng (state management) và React Router để điều hướng trang, giúp xây dựng các ứng dụng đơn trang (Single-Page Application) phức tạp một cách hiệu quả.

II. Phân Tích Thách Thức Khi Quản Lý Nhân Sự Bằng Phương Pháp Cũ

Quản lý nhân sự theo phương pháp truyền thống, dựa chủ yếu vào giấy tờ và bảng tính, đặt ra nhiều thách thức lớn cho các tổ chức. Thách thức đầu tiên là sự thiếu hiệu quả và tốn kém thời gian. Các tác vụ như cập nhật thông tin cá nhân, theo dõi quá trình công tác, hay tổng hợp báo cáo đều đòi hỏi nhiều thao tác thủ công, dễ dẫn đến sai sót. Việc tìm kiếm một hồ sơ cụ thể trong hàng trăm, hàng nghìn tệp tài liệu vật lý là một công việc mất nhiều công sức. Thách thức thứ hai là vấn đề bảo mật thông tin. Hồ sơ giấy dễ bị thất lạc, hư hỏng hoặc bị truy cập trái phép. Việc phân quyền và kiểm soát ai được xem, ai được sửa đổi thông tin là gần như không thể. Hơn nữa, dữ liệu phân mảnh ở nhiều nơi khiến việc tổng hợp và phân tích trở nên khó khăn, làm giảm khả năng ra quyết định dựa trên dữ liệu của ban lãnh đạo. Những hạn chế này thúc đẩy nhu cầu cấp thiết về một giải pháp số hóa, cụ thể là việc xây dựng trang web quản lý nhân sự bằng ReactJS, để khắc phục các nhược điểm cố hữu và tối ưu hóa quy trình vận hành.

2.1. Những hạn chế của phương pháp quản lý truyền thống

Phương pháp quản lý nhân sự truyền thống tồn tại nhiều nhược điểm cố hữu. Thứ nhất, dữ liệu không được quản lý tập trung. Thông tin về một nhân viên có thể nằm rải rác trong nhiều file Excel, hợp đồng giấy, và các văn bản khác nhau, gây khó khăn cho việc tra cứu và đồng bộ. Thứ hai, quy trình cập nhật thông tin rất chậm chạp. Mỗi khi có thay đổi về quá trình đào tạo, khen thưởng hay kỷ luật, nhân viên nhân sự phải tìm kiếm và chỉnh sửa thủ công trên nhiều tài liệu. Điều này không chỉ tốn thời gian mà còn tiềm ẩn nguy cơ sai sót dữ liệu cao. Thứ ba, khả năng trích xuất báo cáo và phân tích gần như bằng không. Việc tổng hợp dữ liệu để tạo báo cáo về biến động nhân sự hay hiệu suất làm việc đòi hỏi nỗ lực rất lớn và thường không thể thực hiện theo thời gian thực. Những hạn chế này làm giảm hiệu quả hoạt động và cản trở sự phát triển của tổ chức.

2.2. Các yêu cầu cần giải quyết của phần mềm quản lý cán bộ

Để khắc phục các vấn đề trên, một phần mềm quản lý nhân sự cần đáp ứng các yêu cầu cốt lõi. Hệ thống phải có khả năng quản lý toàn diện thông tin cán bộ, từ thông tin cá nhân cơ bản đến các quá trình phức tạp như 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 bồi dưỡng, khen thưởng và kỷ luật. Chức năng đăng nhập và phân quyền phải được thiết kế chặt chẽ để đảm bảo chỉ người dùng được cấp phép mới có thể truy cập và thao tác trên dữ liệu. Giao diện người dùng (UI) cần được thiết kế trực quan, dễ sử dụng, cho phép người quản lý thực hiện các thao tác thêm, sửa, xóa dữ liệu một cách nhanh chóng. Theo tài liệu phân tích, các chức năng này được mô tả chi tiết thông qua các lược đồ Use Case, đảm bảo hệ thống được xây dựng đúng theo yêu cầu nghiệp vụ đặt ra.

III. Mô Hình Công Nghệ Xây Dựng Trang Web Quản Lý Nhân Sự ReactJS

Để xây dựng trang web quản lý nhân sự bằng ReactJS một cách hiệu quả, việc lựa chọn và kết hợp các công nghệ phù hợp là yếu tố quyết định. Dự án này áp dụng một kiến trúc hiện đại, phân tách rõ ràng giữa frontend và backend. Phía frontend, ReactJS được chọn làm thư viện chính để xây dựng giao diện người dùng. Sức mạnh của ReactJS nằm ở khả năng tạo ra các component có thể tái sử dụng, giúp quá trình phát triển nhanh hơn và mã nguồn dễ bảo trì. Để quản lý trạng thái của ứng dụng, đặc biệt là các dữ liệu phức tạp và được chia sẻ giữa nhiều component, Redux và Redux-thunk được tích hợp. Redux cung cấp một 'store' duy nhất chứa toàn bộ trạng thái, trong khi Redux-thunk là một middleware cho phép xử lý các hành động bất đồng bộ như gọi API. Phía backend, NodeJS đóng vai trò xử lý logic nghiệp vụ và cung cấp các API cho frontend. Dữ liệu được lưu trữ và quản lý bởi Microsoft SQL Server, một hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) mạnh mẽ và bảo mật. Công cụ Visual Studio Code được sử dụng làm môi trường phát triển chính, cung cấp một hệ sinh thái mở rộng phong phú để hỗ trợ lập trình viên.

3.1. Kiến trúc hệ thống Frontend với ReactJS và Redux

Kiến trúc frontend của hệ thống được xây dựng hoàn toàn bằng ReactJS. Giao diện người dùng được chia thành các component nhỏ, mỗi component đảm nhận một chức năng cụ thể như thanh điều hướng, bảng dữ liệu, hoặc các biểu mẫu nhập liệu (modal). Để quản lý luồng dữ liệu và trạng thái ứng dụng một cách nhất quán, dự án đã tích hợp Redux. Khi người dùng tương tác với giao diện, một 'action' sẽ được gửi đi. Action này mô tả sự kiện đã xảy ra. Sau đó, 'reducer' sẽ xử lý action này và cập nhật trạng thái trong 'store' trung tâm. Các component đã đăng ký lắng nghe sự thay đổi của trạng thái sẽ tự động được render lại với dữ liệu mới. Middleware Redux-thunk được sử dụng để xử lý các tác vụ bất đồng bộ, ví dụ như khi cần lấy danh sách cán bộ từ server. Thay vì trả về một object action ngay lập tức, nó trả về một function, cho phép trì hoãn việc gửi action cho đến khi yêu cầu API hoàn tất.

3.2. Vai trò của SQL Server trong lưu trữ cơ sở dữ liệu

Microsoft SQL Server (MS SQL Server) được chọn làm hệ quản trị cơ sở dữ liệu cho dự án. Đây là một RDBMS mạnh mẽ, cung cấp các tính năng về bảo mật, toàn vẹn dữ liệu và khả năng mở rộng cao. Dữ liệu nhân sự, bao gồm thông tin cá nhân, quá trình công tác, đào tạo, và các thông tin liên quan khác, được tổ chức thành các bảng có cấu trúc rõ ràng. Mối quan hệ giữa các bảng được thiết lập thông qua các khóa chính và khóa ngoại, đảm bảo tính nhất quán của dữ liệu. Ví dụ, bảng CanBo sẽ liên kết với bảng QuaTrinhDaoTao thông qua mã cán bộ. Theo lược đồ cơ sở dữ liệu trong tài liệu, hệ thống được thiết kế để lưu trữ phân cấp và có tổ chức, giúp việc truy vấn và tổng hợp thông tin trở nên hiệu quả. Backend NodeJS sẽ sử dụng các câu lệnh T-SQL để tương tác với SQL Server, thực hiện các thao tác CRUD (Create, Read, Update, Delete) dữ liệu.

3.3. Sử dụng Axios để tương tác với API từ phía Backend

Để giao tiếp giữa frontend ReactJS và backend NodeJS, Axios được sử dụng làm HTTP client. Axios là một thư viện dựa trên Promise, giúp việc gửi các yêu cầu HTTP (như GET, POST, PUT, DELETE) trở nên đơn giản và dễ quản lý. Trong ứng dụng, mỗi khi người dùng thực hiện một hành động như thêm mới một cán bộ, frontend sẽ sử dụng Axios để gửi một yêu cầu POST đến API tương ứng trên server. Dữ liệu của cán bộ mới sẽ được đính kèm trong phần thân (body) của yêu cầu. Server NodeJS sau khi nhận được yêu cầu sẽ xử lý logic, tương tác với cơ sở dữ liệu SQL Server và trả về một phản hồi. Axios giúp xử lý các phản hồi này một cách hiệu quả, cho dù là thành công hay thất bại, và cho phép frontend cập nhật giao diện người dùng một cách tương ứng. Việc sử dụng token xác thực trong header của mỗi yêu cầu Axios cũng là một phần quan trọng để bảo mật các API.

IV. Quy Trình Triển Khai Chức Năng Cốt Lõi Của Trang Web

Quá trình xây dựng trang web quản lý nhân sự bằng ReactJS tập trung vào việc triển khai các chức năng nghiệp vụ cốt lõi một cách bài bản. Quy trình này bắt đầu từ việc phân tích yêu cầu, sau đó thiết kế lược đồ Use Case và lược đồ Sequence để mô tả chi tiết luồng hoạt động của từng chức năng. Chức năng đầu tiên và quan trọng nhất là 'Đăng nhập'. Hệ thống yêu cầu người dùng nhập tên đăng nhập và mật khẩu, sau đó xác thực với cơ sở dữ liệu. Nếu thành công, một JSON Web Token (JWT) sẽ được tạo ra và lưu vào Local Storage của trình duyệt. Token này sẽ được đính kèm vào mỗi yêu cầu API sau đó để xác thực người dùng. Chức năng trọng tâm của hệ thống là quản lý thông tin cán bộ. Giao diện này cho phép người quản lý xem danh sách tất cả cán bộ, thực hiện các thao tác thêm mới, sửa đổi thông tin và xóa cán bộ. Bên cạnh đó, các module phụ trợ như quản lý quá trình đào tạo, quản lý quá trình công tác, bồi dưỡng, khen thưởng, và kỷ luật được thiết kế để gắn liền với một hồ sơ cán bộ cụ thể, tạo thành một hệ thống thông tin nhân sự toàn diện.

4.1. Phân tích và thiết kế hệ thống qua lược đồ Use Case

Trước khi bắt tay vào lập trình, việc phân tích và thiết kế hệ thống là bước không thể thiếu. Tài liệu nghiên cứu đã sử dụng lược đồ Use Case để mô hình hóa các tương tác giữa người dùng (quản lý) và hệ thống. Các Use Case chính được xác định bao gồm: 'Đăng nhập', 'Quản lý thông tin cá nhân', 'Quản lý quá trình công tác đơn vị', 'Quản lý quá trình đào tạo', và các quá trình khác. Mỗi Use Case được đặc tả chi tiết về 'Dòng sự kiện chính' và 'Dòng sự kiện khác'. Ví dụ, trong Use Case 'Thêm cán bộ', dòng sự kiện chính mô tả các bước người dùng nhập thông tin và lưu lại, trong khi dòng sự kiện khác xử lý các trường hợp lỗi như nhập thiếu thông tin. Việc này giúp xác định rõ phạm vi và yêu cầu của từng chức năng, làm cơ sở vững chắc cho giai đoạn triển khai và kiểm thử sau này.

4.2. Xây dựng module quản lý thông tin cá nhân cán bộ

Module quản lý thông tin cán bộ là trái tim của hệ thống. Giao diện chính hiển thị một bảng danh sách các cán bộ với các thông tin tóm tắt. Người dùng có thể thực hiện các thao tác cơ bản như thêm, sửa, xóa. Khi nhấn nút 'Thêm', một modal (cửa sổ pop-up) sẽ hiện ra với các trường thông tin cần thiết. Dữ liệu sau khi được người dùng nhập và xác nhận sẽ được gửi đến backend thông qua Axios để lưu vào cơ sở dữ liệu SQL Server. Chức năng 'Sửa' hoạt động tương tự, nhưng modal sẽ được điền sẵn thông tin hiện có của cán bộ đó. Chức năng 'Xóa' sẽ có một bước xác nhận để tránh việc xóa nhầm dữ liệu quan trọng. Luồng dữ liệu của các thao tác này được quản lý bởi Redux, đảm bảo giao diện luôn được cập nhật đồng bộ với trạng thái mới nhất của dữ liệu.

4.3. Triển khai các module quản lý quá trình liên quan

Ngoài thông tin cá nhân, hệ thống còn cho phép quản lý các quá trình liên quan đến sự nghiệp của một cán bộ. Các module như quản lý quá trình đào tạo, quản lý quá trình bồi dưỡng, và quản lý quá trình công tác được xây dựng dưới dạng các tab hoặc trang riêng biệt, truy cập từ trang chi tiết của một cán bộ. Mỗi module này cũng có đầy đủ các chức năng thêm, sửa, xóa tương tự như module quản lý cán bộ. Ví dụ, trong trang quản lý quá trình đào tạo, người quản lý có thể thêm một khóa đào tạo mới mà cán bộ đã tham gia, bao gồm thông tin về tên khóa học, thời gian, và kết quả. Dữ liệu này được lưu trong các bảng riêng biệt trong SQL Server và có liên kết với bảng cán bộ chính, tạo thành một hồ sơ nhân sự 360 độ.

V. Đánh Giá Kết Quả Dự Án và Hướng Phát Triển Trong Tương Lai

Dự án xây dựng trang web quản lý nhân sự bằng ReactJS đã hoàn thành các mục tiêu cơ bản đề ra. Hệ thống đã triển khai thành công các chức năng cốt lõi, bao gồm đăng nhập, quản lý thông tin cán bộ và các quá trình liên quan như đào tạo, công tác, khen thưởng, kỷ luật. Giao diện người dùng được xây dựng bằng ReactJS và Bootstrap, mang lại trải nghiệm trực quan và dễ sử dụng. Việc ứng dụng Redux giúp quản lý trạng thái ứng dụng một cách hiệu quả, trong khi SQL Server đảm bảo việc lưu trữ dữ liệu có cấu trúc và an toàn. Kết quả cho thấy, sản phẩm là một công cụ hữu ích, có khả năng thay thế các phương pháp quản lý thủ công, giúp tiết kiệm thời gian và nâng cao độ chính xác của dữ liệu. Tuy nhiên, dự án vẫn còn một số hạn chế nhất định và có nhiều tiềm năng để phát triển trong tương lai. Việc nhận diện rõ những điểm này là cơ sở quan trọng để tiếp tục cải tiến và hoàn thiện sản phẩm, biến nó thành một hệ thống quản lý nhân sự toàn diện và cạnh tranh hơn trên thị trường.

5.1. Những kết quả đạt được và các hạn chế của hệ thống

Kết quả chính của dự án là một ứng dụng web hoạt động ổn định, đáp ứng được các yêu cầu nghiệp vụ cơ bản về quản lý nhân sự. Hệ thống cho phép thực hiện các thao tác CRUD trên dữ liệu cán bộ và các quá trình liên quan một cách mượt mà. Việc sử dụng ReactJS đã chứng tỏ hiệu quả trong việc xây dựng một giao diện người dùng hiện đại và có khả năng tương tác cao. Tuy nhiên, theo tài liệu, dự án vẫn tồn tại một số hạn chế. Chẳng hạn, hệ thống chưa có các chức năng nâng cao như quản lý chấm công, tính lương, hay các module báo cáo, phân tích dữ liệu chuyên sâu. Giao diện mặc dù dễ sử dụng nhưng có thể cần được cải thiện thêm về mặt thẩm mỹ. Vấn đề bảo mật mới chỉ dừng lại ở mức xác thực bằng token, cần được tăng cường thêm các biện pháp khác để đảm bảo an toàn cho dữ liệu nhạy cảm.

5.2. Tiềm năng mở rộng và phát triển các tính năng mới

Dựa trên nền tảng đã xây dựng, dự án có nhiều hướng phát triển tiềm năng. Hướng phát triển trước mắt là hoàn thiện các tính năng còn thiếu như quản lý hợp đồng lao động, quản lý bảo hiểm xã hội, và xây dựng hệ thống báo cáo động cho phép người dùng tự tùy chỉnh các biểu đồ và thống kê. Một hướng đi khác là tích hợp thêm module chấm công và tính lương tự động, giúp tự động hóa gần như toàn bộ quy trình vận hành của phòng nhân sự. Về mặt công nghệ, có thể nghiên cứu áp dụng các công nghệ mới như GraphQL để tối ưu hóa việc truy vấn API, hoặc triển khai ứng dụng trên các nền tảng đám mây để tăng khả năng mở rộng và độ tin cậy. Xây dựng phiên bản di động cho ứng dụng cũng là một hướng phát triển hứa hẹn, giúp người quản lý có thể làm việc mọi lúc, mọi nơi.

Trích đoạn nội dung tài liệu

BÞ TÀI NGUYÊN VÀ MÔI TR¯àNG TR¯àNG Đ¾I HàC TÀI NGUYÊN VÀ MÔI TR¯àNG TP.HCM KHOA: HÆ THÞNG THÔNG TIN VÀ VIÄN THÁM Đà ÁN MÔN HàC Đà ÁN CÔNG NGHÆ PHÀN MÀM XÂY DĀNG TRANG WEB QUÀN LÝ NHÂN SĀ BẰNG REACTJS &&&&&&&&&&&&&&&&&&&&&&&&&&&& 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 BÞ TÀI NGUYÊN VÀ MÔI TR¯àNG TR¯àNG Đ¾I HàC TÀI NGUYÊN VÀ MÔI TR¯àNG TP.HCM KHOA: HÆ THÞNG THÔNG TIN VÀ VIÄN THÁM Đà ÁN MÔN HàC Đà ÁN CÔNG NGHÆ PHÀN MÀM XÂY DĀNG TRANG WEB QUÀN LÝ NHÂN SĀ BẰNG REACTJS &&&&&&&&&&&&&&&&&&&&&&&&&&&& 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 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ỉ 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. LàI CÀM ¡N 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! NHÀN XÉT (Cÿa giÁng viên h°ßng d¿n t¿i Khoa) &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& TP.Hồ Chí Minh, ngày.

GIÀNG VIÊN H¯àNG DÀN (Ký tên) NHÀN XÉT (Cÿa giÁng viên phÁn biÇn) ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………………………………………………………… ………. năm……… NG¯âI NHÂN XÉT (Ký tên) MĀC LĀC Ch°¢ng 1 :TâNG QUAN .2 Ph¿m vi nghiêm cāu.2 Các yêu cÁu cÁn giÁi quy¿t .3 Ph°¢ng pháp nghiêm cāu. 2 Ch°¢ng 2:C¡ Sâ LÝ THUY¾T .1 Ngôn ngÿ lÁp trình .1 Visual Studio Code .2 Advanced Rest Client .3 Microsoft SQL Server. 16 Ch°¢ng 3:XÂY DĀNG VÀ TRIÂN KHAI TRANG WEB .1 Phân tích và thi¿t k¿ hÇ thßng .1 L°ÿc đá Use Case .2 Đặc tÁ Use Case .3 TriÃn khai āng dāng.

39 Ch°¢ng 4:K¾T LUÀN .2 Khó khăn,h¿n ch¿.3 H°ßng phát triÃn. 55 MĀC LĀC HÌNH ÀNH Ch°¢ng 2:C¡ Sâ LÝ THUY¾T Hình 2. 1:Logo MS SQL Server. 2:Logo Visual Studio Code.

3: Giao diện Advanced Rest Client. 4:Giao diện Microsoft SQL Server. 15 Ch°¢ng 3:XÂY DĀNG VÀ TRIÂN KHAI ĀNG DĀNG Hinh 3. 1:L°ợc đồ Use-Case.

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

6:Giao diện quá trình bồi d°ỡng. 7:Giao diện quá trình công tác. 8:Giao diện quá trình khen th°ång. 9:Giao diện quá trình kỹ luÃt.

10:L°ợc đồ sequence Đăng nhÃp. 11:L°ợc đồ sequence quÁn lý thông tin cán bß. 12:L°ợc đồ sequence quÁn lý quá trình công tác đ¡n vị. 13:l°ợc đồ sequence quÁn lý quá trình bồi d°ỡng.

14:L°ợc đồ sequence quanr lý quá trình đào t¿o. 15:L°ợc đồ sequence quÁn lý quá trình khen th°ång. 16:L°ợc đồ sequence quÁn lý quá trình kỷ luÃt. 18:Vào giao diện trang đăng nhÃp.

19:Token vào local storage. 20:Đăng nhÃp thành công avof trang chÿ. 22:NhÃp thông tin cán bß cần thêm. 23:Thêm cán bß thành công.

25:Thông tin chi tiết cÿa cán bß. 26:bÁng quá trình đào t¿o. 27:Modal thêm quá trình đào t¿o. 28:Thêm quá trình đào t¿o thành công.

29:Modal sửa quá trình đào t¿o. 30:Sửa quá trình đòa t¿o thành công. 31:Xóa quá trình đào t¿o. 32:Thêm quá trình bồi d°ỡng.

33:Chāc năng sửa. 34:Chāc năng xóa quá trình bồi d°ỡng. 35:bÁng quá trình công tác. 36:Thêm quá trình công tác.

37:Sửa quá trình công tác. 38:Xóa quá trình công tác. 39:bÁng quá trình khen th°ång. 40:thêm quá trình khen th°ång.

41:Sửa quá trình khen th°ång. 42:Xóa quá trình khen th°ång. 43:BÁng quá trình kỹ luÃt. 44:Thêm quá trình kỹ luÃt.

45:Sửa quá trình kỷ luÃt. 46:Xóa quá trình kỷ luÃt. 54 Đß tài:Xây dựng trang web qu¿n lý nhân sự bằng reactjs GVHD:ThS.Nguyßn Văn Kiên Ch°¢ng 1 :TâNG QUAN 1.1 Đặt v¿n đÁ 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ß đó.2 Ph¿m vi nghiêm cāu.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 1.2 Các yêu cÁu cÁn giÁi quy¿t • 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 • Xây dựng trang web quÁn lý nhân sự vái sql 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ồi d°ỡng SVTH:Trần Trí Trung 1 Đß tài:Xây dựng trang web qu¿n lý nhân sự bằng reactjs GVHD:ThS.Nguyßn Văn Kiên - 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. SVTH:Trần Trí Trung 2 Đß tài:Xây dựng trang web qu¿n lý nhân sự bằng reactjs GVHD:ThS.Nguyßn Văn Kiên 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.

CSS: Định d¿ng thiết kế, bố cục, phong cách, canh lề cÿa trang web. 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: SVTH:Trần Trí Trung 3 Đß tài:Xây dựng trang web qu¿n lý nhân sự bằng reactjs GVHD:ThS.

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 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. 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 SVTH:Trần Trí Trung 4 Đß tài:Xây dựng trang web qu¿n lý nhân sự bằng reactjs GVHD:ThS.Nguyßn Văn Kiên nó là có nhiều nền tÁng đ°ợc kết hợp cùng nh°: ASP.