Comment créer une to-do list en PHP<span class="wtr-time-wrap after-title"><span class="wtr-time-number">9</span> min read</span>

Comment créer une to-do list en PHP9 min read

Lorsque l’on apprends à programmer, on cherche à créer des projets afin de s’améliorer.

Aujourd’hui, je vous propose de créer une todo-list avec PHP et Mysql. Ce guide devrait vous apporter connaissances de bases vous permettant de créer un projet

C’est quoi une Todo List ?

Rien de plus simple, c’est simplement une application web qui va vous permettre de stocker des tâches à faire. Vous pourrez ensuite les supprimer.

Notre application va ressembler à ça :

Cool n’est-ce pas ?

Ce que nous allons apprendre

Dans ce tutoriel, vous allez apprendre à manipuler des requêtes SQL, à créer des objets et à récupérer des objets.

Nous allons aussi donner un aspect esthétique à notre application, mais puis-qu’ici nous sommes sur un tutoriel PHP, je vais directement vous donner le CSS

.header{
    width : 600px;
    margin : 0 auto;
    background-color : green;
    height : 60px;
}

.header_titre {
    color : white;
    text-align : center;
    margin-bottom : -20px;
    font-size : 28px;
}

body {
    margin : 0;
}

.taches_input {
    width : 600px;
    margin : 0 auto;
    margin-top : 40px;
    display : grid;
    grid-template-columns:  8fr 2fr;
}

#inserer {
    height : 45px;
}

#envoyer {
    background-color : green;
    height : 45px;
}


.taches {
    width : 600px;
    border: 1px solid green;
    margin : 0 auto;
    margin-top : 30px;
    border-collapse : collapse
}

th {
    border: 1px solid green;
    padding : 10px;
}

td {
    border : 1px solid green;
    text-align : center;
    padding : 10px;
}

.suppr {
    color : red;
    text-decoration : none;

}

.suppr:hover {
    color : red;
    text-decoration : none;
}

Bon, l’HTML va être aussi super basique, on va vouloir un formulaire pour créer nos tâches et une boucle PHP pour récupérer les tâches déjà existantes

Création de la base de donnée

Puisque nous allons créer une application avec des données persistantes c’est à dire qu’elles seront récupérables après la fermeture de la page, nous avons besoin d’une base de donnée.

Ici nous allons utiliser le classique MySql WAMP, vous pouvez très bien utiliser un autre engine ou un autre logiciel.

Rendons nous dans PHPMyAdmin et créons notre table SQL

Ici je crée ma table dans la base de donnée tuto, libre à vous de la mettre ou vous voulez

Cette table est très simple, nous avons besoin d’un champ tache qui stockeras une chaîne de caractère et d’un champ id qui nous permettras de savoir le numéro de la tâche, ainsi nous pourrons voir combien de tâches nous avons donnée à l’application depuis le début

Une fois cette table crée, passons à la création du fichier index.php

La création du fichier PHP

D’abord, importons le CSS que je vous ai donné avant.

<link rel="stylesheet" href="index.css" />

Ensuite on crée la base du document HTML. C’est à dire le header et le formulaire. Ici, on utilise le protocole POST pour transférer les données

<div class="header">
    <p class="header_titre">Ma super Todo List ! </p>
</div>


    <form class="taches_input" method="post" action="index.php">
        <input id="inserer" type="text" name="creer_tache"/>
        <button id="envoyer">Créer</button>
    </form>

Créons maintenant la partie du code PHP qui va venir récupérer les données et les stocker dans notre base de donnée.

Pour faire ça , on utilise la fonction isset sur l’objet POST, si jamais la variable existe on sauvegarde sa valeur dans la base de donnée, et si le script ne reçoit rien, rien ne se passe

Voici le code : (A insérer tout en haut de la page)

<?php

$erreurs = "";
$db = new PDO('mysql:host=localhost;dbname=tuto;charset=utf8', 'root', '');

if (isset($_POST['creer_tache'])) { // On vérifie que la variable POST existe
    if (empty($_POST['creer_tache'])) {  // On vérifie qu'elle as une valeure
        $erreurs = 'Vous devez indiquer la valeure de la tâche';
    } else {
        $tache = $_POST['creer_tache'];
        $db->exec("INSERT INTO tache(tache) VALUES('$tache')"); // On insère la tâche dans la base de donnée
    }
}

?>

D’abord on regarde si la variable POST existe. Si c’est le cas, on peux la manipuler. Ensuite, on vérifie qu’elle n’est pas vide. Si elle l’es on stocke un message d’erreur que l’on afficheras plus tard.

Enfin, si elle n’est pas vide on crée un nouvel objet dans notre base de donnée qui stocke la tâche

Insérons maintenant notre message d’erreur dans notre document HTML juste en dessous de la balise <form>

 <?php
    if (isset($erreurs)) {
        ?>
        <p><?php echo $erreurs ?></p>
    }
    <?php
    ?>

Ce code regarde si la variable erreurs as une valeure. Si c’est le cas elle affiche simplement l’erreur.

Voyons maintenant si la partie création de données fonctionne

Rendons nous maintenant dans PHPMyAdmin pour voir si la ligne as bien été enregistrée

Comme vous pouvez le voir, la partie qui permets de créer de nouvelles tâches fonctionne ! Nous devons maintenant créer la partie qui permets de les afficher

Dans cette partie nous allons intégrer les liens GET dynamiques qui vont nous permettre de supprimer les tâches

D’abord, nous allons créer le tableau qui va servir de base.

<table class="taches">
    <tr>
        <th>
            N
        </th>
        <th>
            Nom
        </th>
        <th>
            Action
        </th>
    </tr>


</table>

Récupérer les taches dans un tableau

Ensuite, nous devons récupérer les tâches existantes sous la forme d’un array afin de pouvoir facilement les afficher grâce à une boucle

Cette partie est un peu plus complexe, d’abord on fait notre requête SQL avec un SELECT * pour tout récupérer.

Ensuite, on utilise la méthode fetch() qui permets d’accéder à chaque objet individuellement dans une boucle afin d’afficher chaque valeur.

<table class="taches">
    <tr>
        <th>
            N
        </th>
        <th>
            Nom
        </th>
        <th>
            Action
        </th>
    </tr>
    <?php
    $reponse = $db->query('Select * from tache'); // On exécute une requête visant à récupérer les tâches
    while ($taches = $reponse->fetch()) { // On initialise une boucle
        ?>
        <tr>
            <td><?php echo $taches['id'] ?></td>
            <td><?php echo $taches['tache'] ?></td>
            <td><a class="suppr" href="index.php?supprimer_tache=<?php echo $taches['id'] ?>"> X</a></td>
        </tr>
        <?php
    }


    ?>


</table>

Vous voyez ici que notre case X est un peu spéciale, en fait PHP va créer un lien dynamique pour chaque élément du tableau.

Ce lien va en fait être une requête GET qui va envoyer dans une variable l’id de l’objet à supprimer. Ainsi nous n’avons plus qu’à faire le même système que pour la création d’objet et nous aurons terminés notre application

Supprimer les tâches

Créons maintenant la partie qui va gérer la suppression des tâches.

Pour se faire , nous allons essayer de récupérer la valeur GET, si elle existe on lanceras la suppression de l’objet

C’est en fait très simple, une fois la valeur GET récupérée , on donne à la requête SQL la variable GET en lui disant qu’elle corresponds à l’id de la ligne que l’on souhaite supprimer

voici le code : ( A placer en haut du fichier)

if(isset($_GET['supprimer_tache'])) {
    $id = $_GET['supprimer_tache'];
    $db->exec("DELETE FROM tache WHERE id=$id");
}

Normalement, votre application devrait fonctionner. Génial !

Voici le code complet au cas ou vous avez un problème

<?php

$erreurs = "";
$db = new PDO('mysql:host=localhost;dbname=tuto;charset=utf8', 'root', '');

if (isset($_POST['creer_tache'])) { // On vérifie que la variable POST existe
    if (empty($_POST['creer_tache'])) {  // On vérifie qu'elle as une valeure
        $erreurs = 'Vous devez indiquer la valeure de la tâche';
    } else {
        $tache = $_POST['creer_tache'];
        $db->exec("INSERT INTO tache(tache) VALUES('$tache')"); // On insère la tâche dans la base de donnée
    }
}

if(isset($_GET['supprimer_tache'])) {
    $id = $_GET['supprimer_tache'];
    $db->exec("DELETE FROM tache WHERE id=$id");
}

?>

<link rel="stylesheet" href="index.css"/>

<div class="header">
    <p class="header_titre">Ma super Todo List ! </p>
</div>


<form class="taches_input" method="post" action="index.php">


    <input id="inserer" type="text" name="creer_tache"/>
    <button id="envoyer">Créer</button>
</form>
<?php
if (isset($erreurs)) {
    ?>
    <p><?php echo $erreurs ?></p>
    <?php
}
?>


<table class="taches">
    <tr>
        <th>
            N
        </th>
        <th>
            Nom
        </th>
        <th>
            Action
        </th>
    </tr>
    <?php
    $reponse = $db->query('Select * from tache'); // On exécute une requête visant à récupérer les tâches
    while ($taches = $reponse->fetch()) { // On initialise une boucle
        ?>
        <tr>
            <td><?php echo $taches['id'] ?></td>
            <td><?php echo $taches['tache'] ?></td>
            <td><a class="suppr" href="index.php?supprimer_tache=<?php echo $taches['id'] ?>"> X</a></td>
        </tr>
        <?php
    }


    ?>


</table>

Comme vous le voyez c’est plutôt court, seulement 70 lignes (sans le CSS )

Conclusion

PHP est un langage de programmation qui permets de créer des applications très facilement.

Il est possible de manipuler des données en quelques lignes de code. Et de les afficher très facilement grâce à des boucles.

J’espère que ce tutoriel vous auras permis de comprendre les bases du développement d’une application web en PHP.

Si il y a des points que vous ne comprenez pas ou des suggestions, n’hésitez pas à écrire un commentaire, je me ferai une joie de vous répondre.

Vous pouvez aussi télécharger mon guide GRATUIT pour bien débuter la programmation en m’indiquant votre email ci-dessous

Vous abonner à notre newsletter

* champ requis

Laisser un commentaire

Fermer le menu
×
×

Panier