Phần mềm quản lý công việc dành cho CBCC cấp xã

Phần mềm Quản lý công việc (Task Management System) được thiết kế và xây dựng dựa trên kiến trúc PHP thuần (PHP OOP/Procedural kết hợp PDO), cơ sở dữ liệu MySQL, và giao diện Bootstrap 5 kết hợp các thư viện bổ trợ như Select2, Font Awesome 6, và jQuery.

Hệ thống được tối ưu hóa giao diện để hoạt động mượt mà, đồng bộ với các dự án hành chính khác (như dự án Bầu cử 2026), hỗ trợ cán bộ quản lý và thực hiện công việc một cách khoa học, chặt chẽ.

Dưới đây là mô tả chi tiết toàn bộ cấu trúc và chức năng của phần mềm:

1. Kiến trúc hệ thống & Quản lý cơ sở dữ liệu

• Tệp cấu hình lõi (config.php): Khởi tạo kết nối cơ sở dữ liệu qua PDO với cơ chế bắt lỗi PDOException, đảm bảo an toàn dữ liệu và bảo mật mã nguồn.

• Cơ chế phân quyền & Đăng nhập: Hệ thống sử dụng session_start() để kiểm tra trạng thái đăng nhập. Nếu chưa đăng nhập, người dùng lập tức được điều hướng về trang login.php.

• Giao diện đồng bộ toàn trang:

  • Bên trái là thanh điều hướng (sidebar.php) hiển thị danh mục chức năng. Giao diện tiêu đề sidebar sử dụng màu cam đất (#CE7A58) làm chủ đạo.

  • Phía trên là thanh công cụ (navbar.php) quản lý thông tin tài khoản và thông báo.

  • Toàn bộ mã nguồn tùy chỉnh được đẩy xuống dưới cùng sau khi nhúng foot.php để tránh lỗi xung đột $ is not defined của jQuery.

2. Các chức năng cốt lõi tại Trang chỉnh sửa công việc (edit_task.php)

Trang chỉnh sửa được thiết kế theo dạng Form nhập liệu tập trung ở phía trên, kết hợp hệ thống Tab điều hướng (Nav-tabs) tích hợp AJAX ở phía dưới để xử lý dữ liệu chuyên sâu mà không làm tải lại trang (No-reload).

A. Khối thông tin công việc chính (Main Form)

• Thông tin cơ bản: Cho phép chỉnh sửa Tiêu đề công việc (bắt buộc), Mô tả chi tiết, Ngày hết hạn, Độ ưu tiên (Thấp, Trung bình, Cao), Danh mục và Giai đoạn công việc.

• Văn bản giao việc: Tích hợp ô nhập liệu số/ký hiệu văn bản chỉ đạo.

• Cơ chế lặp lại tự động: Hỗ trợ cấu hình công việc lặp lại theo chu kỳ (Hàng ngày, Hàng tuần) và thiết lập ngày kết thúc lặp.

• Chọn Người thực hiện (Tích hợp Select2 linh hoạt):

  • Sử dụng thư viện Select2 để tạo ô tìm kiếm thành viên thông minh, hỗ trợ xóa nhanh (allowClear: true).

  • Mặc định ban đầu hiển thị option -- Tôi thực hiện -- (tương ứng với giá trị null trong database).

  • Cơ chế lọc dữ liệu thông minh: Câu lệnh SQL được tối ưu hóa triệt để để loại bỏ các tài khoản kiểm thử hoặc tài khoản lỗi bị trống tên hiển thị (WHERE fullname IS NOT NULL AND TRIM(fullname) != ''), giúp danh sách Select2 luôn sạch sẽ, không bị xuất hiện các dòng trống vô nghĩa.

B. Hệ thống các Tab chức năng bên dưới

Tab 1: Công việc con (Subtasks)

• Cho phép chia nhỏ công việc lớn thành các đầu việc nhỏ để dễ theo dõi tiến độ.

• Sử dụng AJAX kết nối với ajax_handler.php để thực hiện các thao tác:

  • Thêm nhanh việc con ngay tại chỗ.

  • Tích hợp hộp chọn (Checkbox) để bật/tắt trạng thái việc con (Pending <-> Completed). Khi hoàn thành, tên việc con sẽ tự động được gạch ngang và đổi màu xám trực quan.

  • Xóa việc con bằng nút bấm có cảnh báo xác nhận.

Tab 2: Quản lý Đính kèm / Minh chứng hoàn thành

Hệ thống phân tách rõ ràng giữa tài liệu đầu vào (văn bản giao việc) và kết quả đầu ra (minh chứng):

• Văn bản đính kèm (Đầu vào): Cho phép tải lên các file văn bản chỉ đạo. File sau khi tải lên sẽ được lưu vào thư mục uploads/ với tên file định dạng mã hóa thời gian để tránh trùng lặp (time() . "_VB_" . tên_file). Hệ thống tự động nhận diện nếu là file vật lý sẽ hiển thị nút Tải xuống và liên kết mở tab mới, ngược lại nếu là văn bản text thông thường sẽ hiển thị chuỗi thông tin.

• Minh chứng hoàn thành (Đầu ra): * Đây là tính năng quản lý chất lượng nghiêm ngặt. Ô tải file minh chứng sẽ bị khóa tự động (disabled).

  • Chỉ khi người dùng chuyển "Trạng thái công việc" trên Form chính sang Hoàn thành (Completed), ô chọn file minh chứng mới tự động mở khóa (thông qua JavaScript Event Listener) để nhắc nhở người dùng nộp báo cáo, hình ảnh hoặc file kết quả.

Tab 3: Bình luận & Trao đổi nội bộ (Comments)

• Giúp các thành viên thảo luận trực tiếp dưới mỗi đầu việc.

• Tải danh sách bình luận theo thời gian thực, có hiển thị tên người dùng và mốc thời gian rõ ràng.

• Áp dụng phân quyền sở hữu: Người dùng chỉ có quyền chỉnh sửa hoặc xóa các bình luận do chính mình viết thông qua các hàm xử lý AJAX.

Tab 4: Lịch sử hoạt động (Activity Log)

• Tích hợp thư viện ghi vết hệ thống (activity_logger.php).

• Mọi hành động thay đổi quan trọng như: Thay đổi tiêu đề, chuyển đổi trạng thái công việc, cập nhật số ký hiệu văn bản... đều được hệ thống tự động ghi nhận lại chi tiết (Ai làm, làm gì, lúc nào) và hiển thị dưới dạng bảng (Table) dòng thời gian, giúp tăng tính minh bạch và trách nhiệm trong quản lý hành chính.

3. Quy trình xử lý dữ liệu phía Backend (PHP/PDO)

• Khi nhấn nút 💾 Lưu thay đổi, dữ liệu được gửi lên server qua phương thức POST.

• Hệ thống thực hiện chuẩn hóa dữ liệu bằng hàm trim(), kiểm tra tính hợp lệ của ngày tháng và ID.

• Hệ thống tự động tính toán thời gian hoàn thành (completed_at): Nếu trạng thái chuyển từ chưa hoàn thành sang Completed, hệ thống sẽ lưu lại thời gian chính xác của người dùng lúc bấm lưu.

• Sau khi thực thi câu lệnh UPDATE thành công vào cơ sở dữ liệu, hệ thống tự động gọi hàm log_activity() để ghi nhận lịch sử và điều hướng trang (Redirect) kèm tham số status=success để hiển thị thông báo xanh dịu, tránh việc người dùng bấm F5 bị lặp lại hành động gửi biểu mẫu (Tránh trùng lặp dữ liệu).

• Tài khoản demo: tên đăng nhập: demo; mật khẩu: demo123

XEM THÊM ==> Hướng dẫn cài đặt chi tiết

HÌNH ẢNH DEMO

Để triển khai và cài đặt phần mềm Quản lý công việc này lên máy tính cá nhân (môi trường Localhost) nhằm mục đích chạy thử nghiệm, phát triển hoặc sử dụng nội bộ, bạn có thể thực hiện theo các bước chi tiết dưới đây:

Bước 1: Chuẩn bị môi trường máy chủ (Server Environment)

Vì phần mềm được viết bằng ngôn ngữ PHP và sử dụng cơ sở dữ liệu MySQL, bạn cần một bộ công cụ tạo máy chủ ảo. Công cụ phổ biến và dễ dùng nhất là XAMPP.

1. Tải phần mềm XAMPP (khuyến nghị phiên bản hỗ trợ PHP 8.0 trở lên) từ trang chủ Apache Friends.

2. Tiến hành cài đặt XAMPP vào máy tính (thường cài đặt mặc định ở ổ C:\xampp).

3. Mở XAMPP Control Panel lên và nhấn nút Start ở hai dòng Apache và MySQL. Khi cả hai dòng này chuyển sang màu xanh lá cây là máy chủ ảo đã khởi động thành công.

Bước 2: Cấu hình Cơ sở dữ liệu (Database)

1. Mở trình duyệt web (Chrome, Edge, Firefox...) và truy cập vào đường dẫn: http://localhost/phpmyadmin/

2. Nhấn vào mục New (Mới) ở danh sách bên trái để tạo một cơ sở dữ liệu mới.

3. Nhập tên cơ sở dữ liệu (Ví dụ: quanly_congviec hoặc đặt tên tùy ý bạn). Tại mục mã hóa (Collation), chọn utf8mb4_unicode_ci để hỗ trợ hiển thị tiếng Việt đầy đủ không bị lỗi font, sau đó nhấn Create (Tạo).

4. Nhấp vào tên cơ sở dữ liệu vừa tạo, chọn tab SQL ở thanh công cụ phía trên.

5. Copy toàn bộ đoạn mã cấu trúc bảng (CREATE TABLE của các bảng users, tasks, subtasks, activity_log, categories, task_stages...) dán vào khung chạy lệnh SQL rồi nhấn Go (Thực hiện).

Bước 3: Đặt mã nguồn vào máy chủ và cấu hình kết nối

1. Gom toàn bộ các file mã nguồn của phần mềm (bao gồm edit_task.php, sidebar.php, navbar.php, activity_logger.php, ajax_handler.php, login.php...) vào trong một thư mục, đặt tên thư mục đó là quanlycv.

2. Sao chép (Copy) thư mục quanlycv này và dán vào đường dẫn lưu trữ của XAMPP: C:\xampp\htdocs\.

3. Mở file config.php (hoặc db.php tùy thuộc vào file kết nối bạn thiết lập trong thư mục lõi) bằng một trình soạn thảo code (như Notepad++, VS Code) để kiểm tra thông số cấu hình kết nối:

   PHP

   <?php
   // Ví dụ cấu hình kết nối PDO chuẩn
   $host = 'localhost';
   $dbname = 'quanly_congviec'; // Tên database bạn đã tạo ở Bước 2
   $username = 'root';          // Tài khoản mặc định của XAMPP là root
   $password = '';              // Mật khẩu mặc định của XAMPP là để trống
   
   try {
       $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
       $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
   } catch (PDOException $e) {
       die("Kết nối thất bại: " . $e->getMessage());
   }
   ?>
   

4. Tạo một thư mục trống có tên là uploads nằm ngay bên trong thư mục quanlycv (C:\xampp\htdocs\quanlycv\uploads) để hệ thống có nơi lưu trữ các tệp tin văn bản đính kèm và minh chứng khi người dùng tải lên.

Bước 4: Khởi chạy phần mềm

1. Đảm bảo máy tính của bạn đang kết nối mạng Internet (vì hệ thống có nạp một số thư viện giao diện như Bootstrap 5, Font Awesome 6 và Select2 từ các link liên kết mạng CDN công cộng).

2. Mở trình duyệt web và gõ đường dẫn: http://localhost/quanlycv/login.php (hoặc index.php).

3. Giao diện phần mềm sẽ hiển thị. Bạn có thể sử dụng các tài khoản có sẵn trong bảng users để đăng nhập và bắt đầu trải nghiệm, chỉnh sửa công việc.

Nguồn: Topcode.vn