Créer une liste de tâches simple
Créez une application de liste de tâches simple avec PHP et HTML
Créer une liste de tâches simple est une leçon PHP Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 2. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage PHP Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours PHP Academy comprend 2 leçons au total.
Introduction au projet de liste de tâches
Créer une simple liste de tâches
Bienvenue dans la leçon consacrée à la création d’une simple liste de tâches ! Dans ce projet, vous apprendrez à créer une application PHP permettant d’ajouter, d’afficher et de supprimer des tâches. Plongeons-nous dans le sujet !
Configurer le projet
Configurer le projet
Avant de commencer, vérifiez que vous disposez des éléments suivants :
- Un serveur web tel que XAMPP ou WAMP.
- Un éditeur de texte ou un environnement de développement intégré (EDI) (par ex. VS Code).
- Un fichier nommé
todo.phpdans le répertoire de votre projet.
Point clé : Ce projet utilisera les sessions PHP pour stocker temporairement les tâches.
Créer la structure HTML de base
Créer la structure HTML de base
Commencez par créer la structure HTML de votre application de liste de tâches. Exemple :
Conseil : Utilisez l’élément ul pour afficher la liste des tâches.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<form action="todo.php" method="post">
<input type="text" name="task" placeholder="Enter a new task" required>
<button type="submit" name="add">Add Task</button>
</form>
<ul>
<!-- Task list will appear here -->
</ul>
</body>
</html>
Démarrer la session PHP
Démarrer la session PHP
Utilisez les sessions PHP pour stocker les tâches entre les requêtes. Ajoutez ce code en haut de votre fichier todo.php :
Point clé : Les sessions vous permettent de conserver les données lorsque vous naviguez d’une page à l’autre.
<?php
session_start();
if (!isset($_SESSION['tasks'])) {
$_SESSION['tasks'] = [];
}
?>
Ajouter des tâches à la liste
Ajout de tâches à la liste
Traitez l’envoi du formulaire pour ajouter une nouvelle tâche à la session. Exemple :
Conseil : Utilisez trim() pour supprimer les espaces superflus saisis par l’utilisateur.
<?php
if (isset($_POST['add'])) {
$task = trim($_POST['task']);
if (!empty($task)) {
$_SESSION['tasks'][] = $task;
}
}
?>
Affichage de la liste des tâches
Affichage de la liste des tâches
Utilisez une boucle pour afficher les tâches stockées dans la session. Exemple :
Point essentiel : Chaque tâche comporte un bouton de suppression permettant de la retirer de la liste.
<ul>
<?php
if (!empty($_SESSION['tasks'])) {
foreach ($_SESSION['tasks'] as $key => $task) {
echo "<li>$task <form style='display:inline;' method='post'><button type='submit' name='delete' value='$key'>Delete</button></form></li>";
}
} else {
echo "<li>No tasks added yet.</li>";
}
?>
</ul>
Suppression d’une tâche
Suppression d’une tâche
Traitez l’envoi du formulaire déclenché par le bouton de suppression pour retirer des tâches. Exemple :
Conseil : La réindexation garantit que les indices des tâches restent cohérents après une suppression.
<?php
if (isset($_POST['delete'])) {
$key = $_POST['delete'];
unset($_SESSION['tasks'][$key]);
$_SESSION['tasks'] = array_values($_SESSION['tasks']); // Re-index the array
}
?>
Amélioration de l’application
Amélioration de l’application
Voici quelques améliorations que vous pouvez ajouter :
- Personnalisez l’application avec CSS pour améliorer l’interface utilisateur.
- Utilisez JavaScript pour ajouter des boîtes de dialogue de confirmation avant de supprimer des tâches.
- Stockez les tâches dans une base de données pour assurer une conservation persistante des données.
Point essentiel : Les améliorations rendent votre application plus conviviale et plus fonctionnelle.
Excellent travail !
Excellent travail !
Félicitations ! Vous avez créé une application simple de liste de tâches avec PHP. Vous avez appris à utiliser les sessions pour stocker des tâches, à traiter les données d’un formulaire et à afficher et supprimer des tâches de manière dynamique. Dans la prochaine leçon, nous créerons un autre projet amusant pour approfondir vos compétences en PHP. Continuons à coder !
Questions Fréquemment Posées
La leçon « Créer une liste de tâches simple » est-elle gratuite ?
Oui — le texte complet de « Créer une liste de tâches simple » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours PHP Academy, passe à CoddyKit PRO. Le cours PHP Academy comprend 2 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer une liste de tâches simple » ?
Créez une application de liste de tâches simple avec PHP et HTML Tu pratiques PHP Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer PHP Academy ?
Aucune expérience préalable n'est requise. PHP Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 2.
Combien de temps prend la leçon « Créer une liste de tâches simple » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon PHP Academy ?
Oui. Chaque leçon PHP Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer une liste de tâches simple
- Créer un formulaire de contact