Use PHP and jQuery UI to develop an online task management system to help users manage their tasks efficiently

In recent years, with the continuous development of the Internet, various tasks in our lives have continued to increase. Sometimes we forget to complete certain things because we are busy. Therefore, a good task management system is very necessary. Today I will recommend an online task management system developed using PHP and jQuery UI, allowing you to manage your tasks efficiently.

1. System requirements

The implementation of this system requires the following technologies:

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

2. System Design

The goal of this system is to enable users to add, update and delete tasks at any time, as well as sort and filter tasks. Therefore, the system should be designed to allow users to quickly find the tasks and information they need.

• Database design

We can create a database named "task_list", which contains the following two tables:

users:

id	user_name	password
INT	VARCHAR	VARCHAR

• Stores user ID, username and password.

tasks:

id	user_id	task_name	completed	due_date
INT	INT	VARCHAR	BOOLEAN	DATE

• Stores the task ID, user ID, task name, whether it has been completed and the task deadline.
• Login system

The task management system must have a login system to verify user identity and ensure security. First, users need to fill in their username and password to enter the system. The following is the basic code using PHP and a MySQL database:

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');
  }
}

This code checks the database for a match of the user's username and password, creates a new session, and then stores the username in the session variable for subsequent use.

• Creating tasks

One of the most important functions in the system is to provide users with a way to create new tasks. Tasks should include information such as task name, due date, and task description. We can use the following code to create a new task:

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);
}

This code stores the form input in the MySQL database and sets the completion status of the task to false (indicating that it is not completed).

• Display task list

Next, we need to design an interface to allow users to view their task list. We can use menu controls in jQuery UI to display a task list and allow users to sort and filter.

The following is a basic task list scaffolding:

<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>

This code wraps the menu control and task list in a div element. We can then use the following code to display and filter the task list:

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');
});

This code uses the filter item in the jQuery UI menu to trigger the getTasks() function and uses the data source in the get_tasks.php file to obtain Task list, and finally insert the task list into HTML.

• Update tasks

To ensure the accuracy of task information, users must be provided with a way to update the status and details of the task. We can use the following code to implement this functionality:

$(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'));
      }
    });
  });
});

This code uses the dialog box control in jQuery UI to display task details and allow the user to update task information. When the user edits a task, we hide the task details and show the edit form. After the user submits the form, we will use AJAX to send the updated information to the server.

• Delete Task

Finally, we should provide a way for the user to delete a task from the task list. Here is the code for deleting a task:

$(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'));
      }
    });
  }
});

This code uses the dialog control in jQuery UI to display a confirmation dialog and allow the user to delete the task. This feature is very important as it allows users to delete tasks that are no longer needed or have been added by mistake.

3. Summary

We introduced how to use PHP and jQuery UI to implement an online task management system. The functions provided by the system include user login, task creation, task sorting and filtering, task update and deletion. Using this system, users can easily manage their schedules and tasks and increase their productivity.

The above is the detailed content of Use PHP and jQuery UI to develop an online task management system to help users manage their tasks efficiently. For more information, please follow other related articles on the PHP Chinese website!