近年來，隨著網路的不斷發展，我們生活中的各種事務不斷增多，有時會因為忙碌而忘記某些事情的完成，因此，一個好的任務管理系統非常必要。今天我將推薦使用PHP和jQuery UI開發的線上任務管理系統，讓你有效率地管理自己的任務。
該系統的實作需要以下技術：
此系統的目標是讓使用者隨時新增、更新和刪除任務，並對任務進行排序和篩選。因此，系統的設計應該能夠允許使用者快速找到需要的任務和資訊。
我們可以建立一個名為「task_list」的資料庫，其中包含以下兩個表：
users：
| id | user_name | #password |
|---|---|---|
| VARCHAR | VARCHAR |
tasks:
| user_id | task_name | #completed | due_date | |
|---|---|---|---|---|
| INT | VARCHAR |
任務管理系統必須要有一個登入系統來驗證使用者身分和確保安全性。首先，使用者需要填寫使用者名稱和密碼才能進入系統。以下是採用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>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');
});$(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'));
}
});
});
});$(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'));
}
});
}
});以上是使用PHP和jQuery UI開發線上任務管理系統，幫助使用者有效率地管理自己的任務的詳細內容。更多資訊請關注PHP中文網其他相關文章！
