当前位置：首页 > 文章列表 > 文章 > php教程 > 使用PHP和jQuery UI开发一个在线任务管理系统，帮助用户高效管理自己的任务

使用PHP和jQuery UI开发一个在线任务管理系统，帮助用户高效管理自己的任务

2024-03-29 17:45:34 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《使用PHP和jQuery UI开发一个在线任务管理系统，帮助用户高效管理自己的任务》，聊聊，希望可以帮助到正在努力赚钱的你。

近年来，随着互联网的不断发展，我们生活中的各种事务不断增多，有时候会因为繁忙而忘记某些事情的完成，因此，一个好的任务管理系统非常必要。今天我将推荐一种使用PHP和jQuery UI开发的在线任务管理系统，让你高效地管理自己的任务。

系统需求

该系统的实现需要以下技术：

PHP 7
MySQL
Apache 2.4
jQuery UI
HTML
CSS
JavaScript

系统设计

该系统的目标是让用户能够随时添加、更新和删除任务，并对任务进行排序和筛选。因此，系统的设计应该能够允许用户快速找到需要的任务和信息。

数据库设计

我们可以创建一个名为“task_list”的数据库，其中包含以下两个表：

users：

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中的对话框控件来显示确认对话框并允许用户删除任务。这个功能非常重要，因为它让用户能够删除不再需要的任务或者错误添加的任务。