近年来，随着互联网的不断发展，我们生活中的各种事务不断增多，有时候会因为繁忙而忘记某些事情的完成，因此，一个好的任务管理系统非常必要。今天我将推荐一种使用php和jquery ui开发的在线任务管理系统，让你高效地管理自己的任务。
- 系统需求
该系统的实现需要以下技术：
- PHP 7
- MySQL
- Apache 2.4
- jQuery UI
- HTML
- CSS
- JavaScript
- 系统设计
该系统的目标是让用户能够随时添加、更新和删除任务，并对任务进行排序和筛选。因此，系统的设计应该能够允许用户快速找到需要的任务和信息。
- 数据库设计
我们可以创建一个名为“task_list”的数据库，其中包含以下两个表：
users：
立即学习“PHP免费学习笔记（深入）”；
| id | user_name | password |
|---|---|---|
| INT | VARCHAR | VARCHAR |
- 存储用户ID、用户名和密码。
tasks:
| id | user_id | task_name | completed | due_date |
|---|---|---|---|---|
| INT | INT | VARCHAR | 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元素中。然后，我们可以使用以下代码来显示和过滤任务列表：
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来实现一个在线任务管理系统。该系统提供的功能包括用户登录、任务创建、任务排序和筛选、任务更新和删除。使用这个系统，用户可以轻松地管理他们的日程和任务，并提高他们的生产力。
