Utilisez PHP et jQuery UI pour développer un système de gestion de tâches en ligne afin d'aider les utilisateurs à gérer efficacement leurs tâches

Ces dernières années, avec le développement continu d'Internet, diverses tâches dans nos vies ont continué à augmenter. Parfois, nous oublions de terminer certaines choses parce que nous sommes occupés. Par conséquent, un bon système de gestion des tâches est très nécessaire. Aujourd'hui, je recommanderai un système de gestion de tâches en ligne développé à l'aide de PHP et jQuery UI, vous permettant de gérer efficacement vos tâches.

1. Exigences du système

La mise en œuvre de ce système nécessite les technologies suivantes :

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

2. Conception du système

L'objectif du système est de permettre aux utilisateurs d'ajouter, de mettre à jour et de supprimer des tâches à tout moment, ainsi que de trier et filtrer les tâches. Par conséquent, le système doit être conçu pour permettre aux utilisateurs de trouver rapidement les tâches et les informations dont ils ont besoin.

• Conception de base de données

Nous pouvons créer une base de données appelée "task_list" qui contient les deux tables suivantes :

users :

id	user_name	password
INT	VARCHAR	VARCHAR

• stocke l'ID utilisateur, le nom d'utilisateur et le mot de passe.

tâches :

id	user_id	task_name	completed	due_date
INT	INT	VARCHAR	BOOLEAN	DATE

• Stockez l'ID de la tâche, l'ID utilisateur, le nom de la tâche, si elle a été terminée et la date limite de la tâche.
• Système de connexion

Le système de gestion des tâches doit disposer d'un système de connexion pour vérifier l'identité de l'utilisateur et assurer la sécurité. Tout d’abord, les utilisateurs doivent renseigner leur nom d’utilisateur et leur mot de passe pour accéder au système. Voici le code de base utilisant PHP et une base de données 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');
  }
}

Ce code vérifie dans la base de données une correspondance entre le nom d'utilisateur et le mot de passe et crée une nouvelle session, puis stocke le nom d'utilisateur dans la variable de session afin de pouvoir l'utiliser ultérieurement.

• Créer des tâches

L'une des fonctionnalités les plus importantes du système est de fournir aux utilisateurs un moyen de créer de nouvelles tâches. Les tâches doivent inclure des informations telles que le nom de la tâche, la date d'échéance et la description de la tâche. Nous pouvons utiliser le code suivant pour créer une nouvelle tâche :

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

Ce code stocke la saisie du formulaire dans la base de données MySQL et définit l'état d'achèvement de la tâche sur false (indiquant qu'elle n'est pas terminée).

• Afficher la liste des tâches

Ensuite, nous devons concevoir une interface pour permettre aux utilisateurs de visualiser leur liste de tâches. Nous pouvons utiliser les contrôles de menu dans l'interface utilisateur jQuery pour afficher une liste de tâches et permettre aux utilisateurs de trier et de filtrer.

Voici un échafaudage de liste de tâches de base :

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

Ce code enveloppe le contrôle de menu et la liste de tâches dans un élément div. Nous pouvons ensuite utiliser le code suivant pour afficher et filtrer la liste des tâches :

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

Ce code utilise l'élément de filtre du menu jQuery UI pour déclencher la fonction getTasks() et utilise la source de données dans le fichier get_tasks.php pour obtenir le liste des tâches, et enfin Insérer la liste des tâches dans HTML.

• Mettre à jour les tâches

Pour garantir l'exactitude des informations sur les tâches, les utilisateurs doivent disposer d'un moyen de mettre à jour l'état et les détails de la tâche. Nous pouvons utiliser le code suivant pour implémenter cette fonctionnalité :

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

Ce code utilise un contrôle de dialogue dans jQuery UI pour afficher les détails de la tâche et permettre à l'utilisateur de mettre à jour les informations sur la tâche. Lorsque l'utilisateur modifie une tâche, nous masquons les détails de la tâche et affichons le formulaire de modification. Une fois que l'utilisateur aura soumis le formulaire, nous utiliserons AJAX pour envoyer les informations mises à jour au serveur.

• Supprimer des tâches

Enfin, nous devrions fournir aux utilisateurs un moyen de supprimer des tâches de la liste des tâches. Voici le code pour supprimer une tâche :

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

Ce code utilise le contrôle de dialogue dans jQuery UI pour afficher une boîte de dialogue de confirmation et permettre à l'utilisateur de supprimer la tâche. Cette fonctionnalité est très importante car elle permet aux utilisateurs de supprimer les tâches qui ne sont plus nécessaires ou qui ont été ajoutées par erreur.

3. Résumé

Nous avons présenté comment utiliser PHP et jQuery UI pour implémenter un système de gestion de tâches en ligne. Les fonctions fournies par le système incluent la connexion des utilisateurs, la création de tâches, le tri et le filtrage des tâches, la mise à jour et la suppression des tâches. Grâce à ce système, les utilisateurs peuvent facilement gérer leurs horaires et leurs tâches et augmenter leur productivité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!