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