使用PHP和jQuery UI開發線上任務管理系統，幫助使用者有效率地管理自己的任務

近年來，隨著網路的不斷發展，我們生活中的各種事務不斷增多，有時會因為忙碌而忘記某些事情的完成，因此，一個好的任務管理系統非常必要。今天我將推薦使用PHP和jQuery UI開發的線上任務管理系統，讓你有效率地管理自己的任務。

1. 系統需求

該系統的實作需要以下技術：

• PHP 7
• MySQL
• Apache 2.4
• jQuery UI
• HTML
• #CSS
• JavaScript

2. 系統設計

此系統的目標是讓使用者隨時新增、更新和刪除任務，並對任務進行排序和篩選。因此，系統的設計應該能夠允許使用者快速找到需要的任務和資訊。

• 資料庫設計

我們可以建立一個名為「task_list」的資料庫，其中包含以下兩個表：

users：

# #INTVARCHARVARCHAR

id	user_name	#password

#儲存使用者ID、使用者名稱和密碼。

tasks:

#iduser_idtask_name#completeddue_date#INTINTVARCHAR

BOOLEAN

DATE

。儲存任務ID、使用者ID、任務名稱、是否已完成和任務截止日期。

登入系統

任務管理系統必須要有一個登入系統來驗證使用者身分和確保安全性。首先，使用者需要填寫使用者名稱和密碼才能進入系統。以下是採用PHP和MySQL資料庫的基本程式碼：

if(isset($_POST['submit'])) {
  $username = $_POST['username'];
  $password = $_POST['password'];

  $sql = "SELECT * FROM users WHERE user_name = '$username' AND password = '$password';";
  $result = mysqli_query($conn, $sql);

  if(mysqli_num_rows($result) !== 1) {
    echo "用户名或密码错误！";
  } else {
    session_start();
    $_SESSION['username'] = $username;
    header('Location: index.php');
  }
}

這段程式碼檢查資料庫中有沒有該使用者的使用者名稱和密碼的匹配項，並建立一個新的會話，然後將使用者名稱儲存在會話變數中，以便後續使用。

• 建立任務

系統中最重要的功能之一就是為使用者提供一個方法來建立新的任務。任務應該包括任務名稱、截止日期和任務描述等資訊。我們可以使用以下程式碼來建立一個新的任務：

if(isset($_POST['submit_task'])) {
  $name = $_POST['task_name'];
  $description = $_POST['description'];
  $due_date = $_POST['due_date'];
  $user_id = $_SESSION['user_id'];

  $sql = "INSERT INTO tasks (user_id, task_name, description, completed, due_date)
          VALUES ('$user_id', '$name', '$description', false, '$due_date')";
  mysqli_query($conn, $sql);
}

程式碼將表單輸入的內容儲存在MySQL資料庫中，並設定任務的完成狀態為false（表示未完成）。

• 顯示任務清單

接下來，我們需要設計一個介面來讓使用者能夠查看自己的任務清單。我們可以使用jQuery UI中的選單控制項來顯示任務清單並允許使用者進行排序和篩選。

以下是一種基本的任務清單鷹架：

<div id="task-list">
  <ul>
    <li><a href="#" class="filter" data-value="all">所有任务</a></li>
    <li><a href="#" class="filter" data-value="due_today">今天过期</a></li>
    <li><a href="#" class="filter" data-value="due_soon">即将到期</a></li>
    <li><a href="#" class="filter" data-value="completed">已完成</a></li>
    <li><a href="#" class="filter" data-value="not_completed">未完成</a></li>
  </ul>
  <div class="tasks">

  </div>
</div>

該程式碼將選單控制項和任務清單包裝在一個div元素中。然後，我們可以使用以下程式碼來顯示和過濾任務清單：

3. function getTasks(filter) {
     $.ajax({
       url: 'get_tasks.php',
       data: { filter: filter },
       success: function(result) {
         $('.tasks').html(result);
       }
     });
   }
   
   $(function() {
     $('.filter').click(function(e) {
       e.preventDefault();
       var filter = $(this).data('value');
       getTasks(filter);
       $('.filter').removeClass('selected');
       $(this).addClass('selected');
     });
   
     getTasks('all');
   });

程式碼使用jQuery UI選單中的篩選項目來觸發getTasks()函數，並使用get_tasks.php檔案中的資料來源來獲取任務列表，最後將任務列表插入HTML。

更新任務#########為了確保任務資訊的準確性，必須提供使用者一個方法來更新任務的狀態和詳細資訊。我們可以使用以下程式碼來實現此功能：###

$(function() {
  $(document).on('click', '.task .edit', function() {
    var task_id = $(this).parent().data('task-id');
    $(this).parent().find('.task-details').hide();
    $(this).parent().find('.edit-details').show();
    $(this).hide();
  });

  $(document).on('submit', '.task .edit-details form', function(e) {
    e.preventDefault();
    var task_id = $(this).parent().data('task-id');
    var name = $(this).find('.name').val();
    var description = $(this).find('.description').val();
    var due_date = $(this).find('.due-date').val();
    $.ajax({
      url: 'update_task.php',
      type: 'POST',
      data: {
        task_id: task_id,
        name: name,
        description: description,
        due_date: due_date
      },
      success: function() {
        $('.edit-details').hide();
        $('.task-details').show();
        $('.edit').show();
        getTasks($('#filter .selected').data('value'));
      }
    });
  });
});

###程式碼使用jQuery UI中的對話方塊控制項來顯示任務詳情，並允許使用者更新任務資訊。當使用者編輯任務時，我們將隱藏任務詳情並顯示編輯表單。用戶提交表單後，我們將使用AJAX將更新後的資訊傳送到伺服器。 #########刪除任務#########最後，我們應該為使用者提供一個方法來從任務清單中刪除任務。以下是用於刪除任務的程式碼：###

$(document).on('click', '.delete', function() {
  var task_id = $(this).parent().data('task-id');
  if(confirm('确定要删除这个任务吗？')) {
    $.ajax({
      url: 'delete_task.php',
      data: { task_id: task_id },
      type: 'POST',
      success: function() {
        getTasks($('#filter .selected').data('value'));
      }
    });
  }
});

###程式碼使用jQuery UI中的對話方塊控制項來顯示確認對話方塊並允許使用者刪除任務。這個功能非常重要，因為它讓使用者能夠刪除不再需要的任務或錯誤新增的任務。 #########總結#########我們介紹如何使用PHP和jQuery UI來實作一個線上任務管理系統。系統提供的功能包括使用者登入、任務建立、任務排序和篩選、任務更新和刪除。使用這個系統，使用者可以輕鬆地管理他們的日程和任務，並提高他們的生產力。 ###

以上是使用PHP和jQuery UI開發線上任務管理系統，幫助使用者有效率地管理自己的任務的詳細內容。更多資訊請關注PHP中文網其他相關文章！