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… 70 trang · Trường Đại Học Công Nghệ Thông Tin · 2023.

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

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh cuộc Cách mạng Công nghiệp 4.0 và sự phổ biến của các thiết bị máy tính, điện thoại thông minh, công tác quản lý thông tin trong các cơ quan, tổ chức đã có những chuyển biến rõ nét. Hoạt động quản lý nhân sự theo phương thức truyền thống bộc lộ nhiều điểm hạn chế như tốn kém giấy mực, mất nhiều thời gian và công sức ghi chép thủ công. Việc chuyển dịch sang ứng dụng phần mềm quản lý trên nền tảng máy tính giúp tiết kiệm chi phí, rút ngắn thời gian xử lý và tối ưu hóa việc lưu trữ dữ liệu cán bộ.

Đề tài "Xây dựng trang web quản lý nhân sự bằng ReactJS" được thực hiện trong khuôn khổ Đồ án môn học Công nghệ phần mềm tại Khoa Hệ thống Thông tin và Viễn thám, Trường Đại học Tài nguyên và Môi trường TP.HCM, do sinh viên Trần Trí Trung thực hiện dưới sự hướng dẫn của ThS. Nguyễn Văn Kiên. Mục đích chính của đề tài là vận dụng các kiến thức chuyên ngành để xây dựng một hệ thống website hoàn chỉnh, phục vụ công tác quản trị hồ sơ và theo dõi toàn bộ quá trình công tác của cán bộ.

Mục tiêu và các yêu cầu cụ thể cần giải quyết trong đồ án được xác định như sau:

1. Sử dụng công cụ Visual Studio Code để xây dựng và phát triển mã nguồn cho trang web.
2. Tìm hiểu, nắm vững và áp dụng các kiến thức cơ bản về hệ quản trị cơ sở dữ liệu Microsoft SQL Server.
3. Xây dựng trang web quản lý nhân sự tích hợp cơ sở dữ liệu SQL Server với đầy đủ các phân hệ chức năng:
   • Chức năng đăng nhập hệ thống;
   • Chức năng quản lý thông tin cá nhân cán bộ;
   • Chức năng quản lý quá trình đào tạo;
   • Chức năng quản lý quá trình bồi dưỡng;
   • Chức năng quản lý quá trình công tác;
   • Chức năng quản lý quá trình khen thưởng và kỷ luật.

Phạm vi nghiên cứu của đề tài bao gồm:

• Phạm vi nội dung và công nghệ: Tìm hiểu về thư viện ReactJS, nền tảng NodeJS, môi trường lập trình ReactJS, các kỹ thuật lập trình trang web hiện đại (quản lý trạng thái với Redux, định tuyến với React-Router, xử lý bất đồng bộ với Redux-Thunk, giao tiếp API qua Axios), công cụ kiểm thử API Advanced REST Client và thiết kế cơ sở dữ liệu trên Microsoft SQL Server.
• Phạm vi nghiệp vụ: Tập trung vào các tác vụ quản lý hồ sơ nhân sự nội bộ (xem danh sách, thêm mới, chỉnh sửa, xóa dữ liệu) và theo dõi các quá trình biến động nhân sự của cán bộ trong một đơn vị.

---

Cơ sở lý thuyết và phương pháp

Đồ án xây dựng dựa trên nền tảng kiến trúc web hiện đại kết hợp giữa giao diện người dùng Single Page Application (SPA), máy chủ ứng dụng NodeJS và hệ quản trị cơ sở dữ liệu quan hệ Microsoft SQL Server.

Khung lý thuyết và công nghệ sử dụng

Hệ thống tích hợp nhiều công nghệ, thư viện và công cụ lập trình chuyên dụng:

Thành phần	Công nghệ / Công cụ	Đặc điểm và vai trò trong hệ thống
Ngôn ngữ lập trình	JavaScript (kết hợp HTML & CSS)	Ngôn ngữ thực thi phía client và server, hỗ trợ tương tác giao diện người dùng, kiểm tra tính hợp lệ của dữ liệu đầu vào (input) nhằm giảm thiểu việc truy vấn thủ công về cơ sở dữ liệu.
Thư viện giao diện	ReactJS	Thư viện JavaScript mã nguồn mở chuyên xây dựng giao diện người dùng (UI) với cơ chế Hot Reload hỗ trợ phát triển nhanh.
Quản lý trạng thái	Redux & Redux-Thunk	Redux đóng vai trò quản trị trạng thái ứng dụng dự đoán được (predictable state management) lấy cảm hứng từ ngôn ngữ Elm và kiến trúc Flux. Redux-Thunk hoạt động như một middleware cho phép action trả về một hàm xử lý các logic bất đồng bộ và gọi AJAX/API request trước khi đưa dữ liệu đến Reducer.
Điều hướng & Định tuyến	React-Router	Thư viện định tuyến chuẩn cho ReactJS gồm các thành phần chính: BrowserRouter (sử dụng HTML5 History API để đồng bộ UI với URL), Route (hiển thị UI theo đường dẫn khớp), Link (liên kết điều hướng) và Switch (chọn route đầu tiên khớp với vị trí truy cập).
Giao tiếp dữ liệu	Axios	HTTP client hoạt động dựa trên Promises, hỗ trợ gửi và nhận các HTTP request (GET, POST, PUT, DELETE) giữa trình duyệt/NodeJS và máy chủ API.
Thiết kế giao diện	Bootstrap	Bộ khung giao diện mã nguồn mở cung cấp hệ thống lưới (grid system), typography, form, table, font và các biểu tượng glyphicons giúp tối ưu hóa thời gian xây dựng giao diện.
Nền tảng máy chủ	NodeJS	Nền tảng thực thi JavaScript độc lập xây dựng trên V8 JavaScript Engine của Chrome, phần core viết bằng C++ cho hiệu năng cao, hỗ trợ xử lý tác vụ mạng và ứng dụng thời gian thực.
Cơ sở dữ liệu	Microsoft SQL Server (MS SQL Server)	Hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) sử dụng ngôn ngữ Transact-SQL (T-SQL), hỗ trợ mô hình Client-Server gồm Workstation và Server (tích hợp các thành phần quản lý SSIS, SSAS, SSRS).
Môi trường phát triển	Visual Studio Code	Trình soạn thảo mã nguồn đa nền tảng (Windows, Linux, macOS), tích hợp công cụ Debug, Git, Syntax Highlighting và IntelliSense.
Công cụ kiểm thử	Advanced REST Client (ARC)	Công cụ mã nguồn mở kiểm tra API qua các HTTP request tùy chỉnh, hỗ trợ cấu hình header, socket trực tiếp và lưu trữ kịch bản trên Google Drive.

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

Tác giả áp dụng các phương pháp nghiên cứu thực tiễn trong ngành công nghệ phần mềm:

• Phương pháp thu thập và tổng hợp tài liệu: Khai thác các tài liệu kỹ thuật, video hướng dẫn chuyên đề trên nền tảng YouTube, nghiên cứu các ví dụ mẫu trên công cụ tìm kiếm và phân tích các giao diện mẫu.
• Phương pháp phân tích và thiết kế hướng đối tượng: Sử dụng ngôn ngữ mô hình hóa UML để xây dựng lược đồ ca sử dụng (Use Case Diagram), viết đặc tả chi tiết cho từng ca sử dụng và thiết kế các lược đồ tuần tự (Sequence Diagram) để mô tả luồng thông điệp giữa người dùng, giao diện, bộ xử lý và cơ sở dữ liệu.
• Phương pháp thực nghiệm phát triển phần mềm: Cài đặt môi trường, viết mã nguồn giao diện (Frontend), kết nối API và thao tác dữ liệu trên hệ quản trị SQL Server.

---

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình kiến trúc phân tầng, quản lý tập trung luồng dữ liệu thông qua Redux Store và phân chia rõ ràng trách nhiệm giữa phía Client (ReactJS) và cơ sở dữ liệu (SQL Server).

Kiến trúc phân tích Use Case và Luồng xử lý (Sequence)

Hệ thống xác định các Use Case trọng tâm tương ứng với các nghiệp vụ quản trị nhân sự tại đơn vị:

Ca sử dụng (Use Case)	Mô tả nghiệp vụ	Luồng xử lý chính & Kiểm tra điều kiện
Đăng nhập	Xác thực danh tính người dùng vào hệ thống.	- Yêu cầu nhập tài khoản và mật khẩu. - Nếu để trống: hiển thị thông báo "Chưa nhập tài khoản hoặc mật khẩu". - Nếu nhập sai: hiển thị thông báo "Tài khoản hoặc mật khẩu sai". - Nếu nhập đúng: hệ thống tạo Token và lưu vào localStorage của trình duyệt, sau đó chuyển hướng vào trang chủ.
Quản lý thông tin cán bộ	Cập nhật hồ sơ cá nhân của nhân sự.	- Hỗ trợ các thao tác Thêm, Sửa, Xóa. - Khi thêm/sửa: bắt buộc nhập đầy đủ thông tin, nếu thiếu sẽ báo "Chưa nhập đầy đủ thông tin". - Khi xóa: hệ thống hiển thị hộp thoại xác nhận trước khi xóa bản ghi khỏi bảng dữ liệu.
Quản lý quá trình công tác	Theo dõi lịch sử điều chuyển, công tác tại đơn vị.	- Người quản lý chọn chức năng thêm/sửa/xóa quá trình công tác. - Kiểm tra tính toàn vẹn của dữ liệu đầu vào. - Cập nhật dữ liệu vào bảng quá trình công tác của cán bộ.
Quản lý quá trình đào tạo	Quản lý bằng cấp, trình độ học vấn của cán bộ.	- Hỗ trợ tạo mới, cập nhật hoặc xóa bỏ thông tin các khóa đào tạo. - Dữ liệu cập nhật trực tiếp vào danh sách đào tạo của nhân sự tương ứng.
Quản lý quá trình bồi dưỡng	Quản lý các chứng chỉ, khóa bồi dưỡng ngắn hạn.	- Thực hiện thao tác CRUD (Thêm, Đọc, Sửa, Xóa) thông tin bồi dưỡng nghiệp vụ. - Báo lỗi nếu thiếu trường dữ liệu bắt buộc.
Quản lý khen thưởng	Ghi nhận thành tích, khen thưởng của nhân sự.	- Nhập thông tin khen thưởng, lưu trữ dữ liệu vào hệ thống. - Cung cấp giao diện xem chi tiết và chỉnh sửa lịch sử khen thưởng.
Quản lý kỷ luật	Ghi nhận các hình thức xử lý kỷ luật.	- Cập nhật thông tin kỷ luật vào hồ sơ cán bộ. - Xác nhận trước khi thực hiện thao tác xóa dữ liệu kỷ luật.

Triển khai ứng dụng và Giao diện

Quá trình triển khai ứng dụng thực tế trên môi trường web diễn ra theo các bước vận hành:

1. Khởi tạo và Xác thực: Người dùng truy cập trang đăng nhập (/login), nhập thông tin tài khoản và mật khẩu. Khi xác thực hợp lệ, mã Token được lưu vào localStorage để duy trì phiên làm việc cho các yêu cầu kế tiếp.
2. Bảng điều khiển và Quản lý cán bộ: Sau khi đăng nhập thành công, hệ thống điều hướng về trang chủ hiển thị danh sách cán bộ dưới dạng bảng (Table), cho phép tra cứu nhanh các thông tin định danh.
3. Các Modal chức năng: Thao tác thêm mới, chỉnh sửa thông tin cá nhân và các quá trình (đào tạo, bồi dưỡng, công tác, khen thưởng, kỷ luật) được thực hiện thông qua các cửa sổ Modal giao diện, giúp người dùng thao tác trực tiếp mà không cần tải lại toàn bộ trang web.

---

Nội dung chính theo từng chương

Báo cáo đồ án được kết cấu thành 4 chương chính với nội dung triển khai cụ thể:

Chương 1: Tổng quan

Chương 1 trình bày lý do chọn đề tài dựa trên tính cấp thiết của việc số hóa dữ liệu quản lý nhân sự trong thời đại công nghệ 4.0. Tác giả chỉ ra lợi ích của việc thay thế ghi chép thủ công bằng phần mềm để tiết kiệm thời gian, giấy tờ và chi phí. Chương này xác định rõ phạm vi tìm hiểu công nghệ (ReactJS, NodeJS, SQL Server), nêu bật các yêu cầu chức năng cần giải quyết (đăng nhập, quản lý cán bộ và 5 quá trình liên quan) và xác định phương pháp nghiên cứu thông qua tài liệu trực tuyến, video YouTube và mã nguồn mẫu.

Chương 2: Cơ sở lý thuyết

Chương 2 cung cấp nền tảng kiến thức chuyên sâu về các công nghệ được lựa chọn:

• Phân tích ngôn ngữ JavaScript và vị trí của nó trong bộ ba công nghệ web (HTML, CSS, JavaScript); liệt kê các ưu điểm nổi bật như không cần trình biên dịch riêng, dễ phát hiện lỗi, hỗ trợ đa nền tảng và tối ưu hóa xử lý input.
• Giới thiệu hệ quản trị cơ sở dữ liệu Microsoft SQL Server, cấu trúc Client-Server (Workstation và Server), ngôn ngữ T-SQL cùng các dịch vụ tích hợp SSAS, SSIS, SSRS.
• Trình bày công cụ lập trình Visual Studio Code và công cụ kiểm thử API Advanced REST Client.
• Đi sâu vào các thư viện thuộc hệ sinh thái React: thư viện ReactJS xây dựng UI, nền tảng NodeJS xây dựng trên Chrome V8, công cụ quản lý state Redux (theo kiến trúc Elm/Flux), middleware Redux-Thunk, bộ định tuyến React-Router (với các thành phần BrowserRouter, Route, Link, Switch), thư viện HTTP client Axios và framework giao diện Bootstrap.

Chương 3: Xây dựng và triển khai trang web

Chương 3 là phần trọng tâm kỹ thuật của đồ án, tập trung vào:

• Phân tích thiết kế hệ thống: Xây dựng lược đồ tổng thể Use Case và viết đặc tả chi tiết cho từng ca sử dụng (Đăng nhập, Quản lý thông tin cá nhân, Quản lý quá trình công tác, Quản lý quá trình đào tạo, Quản lý quá trình khen thưởng, Quản lý quá trình kỷ luật, Quản lý quá trình bồi dưỡng) kèm luồng sự kiện chính và các luồng sự kiện lỗi khi thiếu dữ liệu.
• Mô hình hóa tương tác: Trình bày 7 lược đồ tuần tự (Sequence Diagram) tương ứng với các ca sử dụng nhằm làm rõ thứ tự truyền nhận thông điệp giữa Actor, View, Controller/Action, Redux Store và Database.
• Thiết kế cơ sở dữ liệu: Thể hiện sơ đồ quan hệ dữ liệu (Diagram) giữa các bảng thực thể.
• Triển khai ứng dụng: Minh họa chi tiết các giao diện thực tế bao gồm giao diện đăng nhập, lưu trữ Token vào localStorage, giao diện danh sách cán bộ, thông tin chi tiết và các giao diện/modal Thêm, Sửa, Xóa của từng quá trình đào tạo, bồi dưỡng, công tác, khen thưởng và kỷ luật.

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

Chương 4 tổng kết lại toàn bộ kết quả thực hiện của đồ án, đánh giá mức độ hoàn thành so với các mục tiêu ban đầu đặt ra, nêu lên những khó khăn, hạn chế gặp phải trong quá trình nghiên cứu công nghệ mới và đề xuất các hướng phát triển nâng cấp hệ thống trong tương lai.

---

Kết quả và đóng góp

Kết quả đạt được

Đồ án đã xây dựng thành công một trang web quản lý nhân sự hoàn chỉnh trên môi trường máy tính với các kết quả cụ thể:

• Hoàn thiện module xác thực đăng nhập an toàn, xử lý logic kiểm tra tài khoản/mật khẩu và tự động cấp phát, lưu trữ Token vào localStorage của trình duyệt.
• Xây dựng đầy đủ 6 phân hệ quản lý dữ liệu nhân sự với các chức năng CRUD hoàn chỉnh:
  1. Quản lý thông tin cá nhân cán bộ;
  2. Quản lý quá trình đào tạo (trình độ, bằng cấp);
  3. Quản lý quá trình bồi dưỡng (chứng chỉ, chuyên môn);
  4. Quản lý quá trình công tác tại các đơn vị;
  5. Quản lý quá trình khen thưởng;
  6. Quản lý quá trình kỷ luật.
• Tích hợp thành công Redux và Redux-Thunk để quản lý trạng thái tập trung, kết hợp cùng Axios để giao tiếp dữ liệu mượt mà, không cần tải lại trang.

Đóng góp của đồ án

• Về mặt ứng dụng thực tiễn: Cung cấp giải pháp số hóa quy trình quản trị hồ sơ cán bộ, giúp thay thế phương pháp ghi chép sổ sách thủ công, tiết kiệm thời gian tra cứu và chi phí in ấn văn phòng phẩm.
• Về mặt kỹ thuật: Đồ án là tài liệu thực hành vận dụng thành công mô hình kết hợp giữa ReactJS, Redux, NodeJS và Microsoft SQL Server vào bài toán quản trị nhân sự thực tế, chứng minh tính khả thi của việc xây dựng ứng dụng Single Page Application phục vụ công tác quản lý nội bộ.

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế

• Hệ thống tập trung chủ yếu vào các chức năng quản lý cơ bản (Thêm, Sửa, Xóa, Xem danh sách), chưa phát triển các module nâng cao như phân quyền đa cấp bậc (Admin, Quản lý, Cán bộ tự tra cứu).
• Chưa tích hợp chức năng xuất báo cáo, thống kê dữ liệu động ra các định dạng văn bản (Excel, PDF) thông qua SQL Server Reporting Services (SSRS).
• Quá trình kiểm thử chủ yếu thực hiện trên công cụ Advanced REST Client ở quy mô cục bộ, chưa có dữ liệu kiểm thử tải trong môi trường cơ sở dữ liệu quy mô lớn (Very Large Database).

Hướng phát triển

• Mở rộng phân quyền người dùng chi tiết và tăng cường cơ chế bảo mật hệ thống.
• Bổ sung các phân hệ thống kê, báo cáo chuyên sâu và trực quan hóa dữ liệu nhân sự.
• Tối ưu hóa cấu trúc cơ sở dữ liệu trên Microsoft SQL Server để đáp ứng khả năng mở rộng lưu trữ và truy xuất đồng thời cho nhiều người dùng.

---

Giá trị tham khảo

Báo cáo đồ án này là tài liệu tham khảo phù hợp cho:

• Đối tượng: Sinh viên các ngành Công nghệ thông tin, Hệ thống thông tin, Kỹ thuật phần mềm đang thực hiện đồ án môn học, đồ án công nghệ phần mềm hoặc khóa luận tốt nghiệp có liên quan đến lập trình web.
• Nội dung tham khảo giá trị:
  • Phần đặc tả Use Case chi tiết với các kịch bản kiểm tra điều kiện dữ liệu (validation) rõ ràng.
  • Hệ thống 7 lược đồ tuần tự (Sequence Diagram) chuẩn hóa quy trình tương tác trong ứng dụng ReactJS có tích hợp Redux và cơ sở dữ liệu.
  • Phương pháp tích hợp và cấu hình bộ công cụ: ReactJS, Redux-Thunk, React-Router, Axios và Bootstrap.

---

Câu hỏi thường gặp

1. Đồ án sử dụng cơ chế nào để duy trì trạng thái đăng nhập của người dùng?
Hệ thống sử dụng cơ chế xác thực dựa trên Token. Sau khi người dùng nhập chính xác tên đăng nhập và mật khẩu, hệ thống sẽ trả về mã Token và lưu trữ trực tiếp vào localStorage của trình duyệt để duy trì phiên làm việc cho các thao tác tiếp theo.

2. Hệ thống hỗ trợ quản lý những quá trình biến động nào của cán bộ?
Hệ thống hỗ trợ quản lý chi tiết 5 quá trình biến động trong suốt thời gian công tác của cán bộ, bao gồm: Quá trình đào tạo, Quá trình bồi dưỡng, Quá trình công tác tại đơn vị, Quá trình khen thưởng và Quá trình kỷ luật.

3. Vai trò của middleware Redux-Thunk trong ứng dụng là gì?
Redux-Thunk đóng vai trò là một middleware trung gian, cho phép viết các Action trả về một hàm (function) thay vì một plain JavaScript object thông thường. Cơ chế này giúp trì hoãn việc gửi action đến Reducer nhằm xử lý các tác vụ bất đồng bộ phức tạp như gửi yêu cầu lấy dữ liệu từ máy chủ (Ajax/API request) qua thư viện Axios.

4. Tác giả sử dụng công cụ nào để kiểm thử các API trong đồ án?
Tác giả sử dụng phần mềm mã nguồn mở Advanced REST Client (ARC) để tạo, cấu hình tiêu đề (header) và gửi các yêu cầu HTTP tùy chỉnh nhằm kiểm tra tính chính xác của các điểm cuối API trước khi tích hợp vào giao diện ReactJS.

5. Các thành phần chính của React-Router được ứng dụng trong đồ án gồm những gì?
Đồ án sử dụng 4 thành phần cốt lõi của React-Router gồm: BrowserRouter (sử dụng HTML5 History API để đồng bộ giao diện với URL), Route (hiển thị thành phần giao diện khi khớp đường dẫn URL), Link (thực hiện điều hướng liên kết trong ứng dụng) và Switch (chỉ định hiển thị Route đầu tiên khớp với vị trí truy cập).

---

Kết luận

Đồ án môn học Công nghệ phần mềm "Xây dựng trang web quản lý nhân sự bằng ReactJS" của sinh viên Trần Trí Trung đã hoàn thành đầy đủ các mục tiêu thiết kế và xây dựng một hệ thống quản trị nhân sự hoàn chỉnh. Bằng việc kết hợp hiệu quả giữa thư viện ReactJS, nền tảng NodeJS, công cụ quản lý trạng thái Redux và hệ quản trị cơ sở dữ liệu Microsoft SQL Server, đồ án đã giải quyết tốt bài toán số hóa hồ sơ cán bộ và theo dõi lịch sử công tác. Toàn bộ quy trình phân tích ca sử dụng, thiết kế biểu đồ tuần tự và triển khai giao diện được trình bày mạch lạc, mang lại giá trị tham khảo thực tiễn cao cho sinh viên ngành công nghệ thông tin.

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 .