Créer votre propre ToDo List grâce à PHP et Ajax / jQuery

En tant que programmeur, quoi de plus utile que la bonne vieille todo list! En effet, nous allons voir ici comment créer votre propre todo list avec PHP et une touche de Ajax avec jQuery. Alors, commençons par la partie PHP de cet utilitaire. Par la suite, il vous sera facile de modifier et/ou d’ajouter des fonctionnalités à cette liste.

Fichier

• delete.php – Suppression des notes
• process.php – Création et affichage des notes
• index.php – Formulaire / Javascript

MySQL

CREATE TABLE 'notes'
(
    'id' INT PRIMARY KEY AUTO INCREMENT NOT NULL,
    'content' VARCHAR(500) NOT NULL
)

index.php

Cette page contient un formulaire simple, c’est à dire, un Textarea suivi d’un bouton d’envoi de formulaire. Rien de plus pour notre todo de base. Comme mentionné en introduction, il vous sera facile par la suite d’améliorer certain aspect de cette liste tel que les champs de saisie par exemple. Lors de l’envoi du formulaire, les informations sont envoyées à la page process.php par la méthode POST.

xhtml

<form id="form" action="process.php" method="post">
    <textarea name="content" id="content" cols="50" rows="3"></textarea>
    <input type="submit" id="submit" name="submit" value="Envoyer" />
</form>

process.php

Cette page ne fait que traiter les données transmises par le formulaire. Ce dernier insère les informations du Textarea dans la table. De plus cette dernière, affiche la liste des informations ainsi qu’un lien de suppression.

php

<?php
    // Connexion à la base de données
    $connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
    $selection = mysql_select_db('mysql_database', $connection);

    // Est-ce que le formulaire a été envoyé ?
    if($_POST['submit']){
        $content = $_POST['content'];

        //Insertion
        $ins = mysql_query("INSERT INTO 'notes' (content) VALUES ('$content')");

        //Redirection vers index.php
        header("Location:index.php");
    }    

    /* Affichage de la liste */

    // Sélection des notes
    $find = mysql_query("SELECT * FROM 'notes' ORDER BY id DESC");

    // Création de la liste
    echo '<ul>';

    while($row = mysql_fetch_array($find)){
        echo '<li>' . $row['content'] . ' <a id="' . $row['id'] . '" href="delete.php?id=' . $row['id'] . '"><img src="cancel.png" alt="Delete?" /></a></li>';
    }

    echo '</ul>';

?>

delete.php

Cette dernière n’a pas besoin de beaucoup d’explication. La suppression d’une note se fait par l’id de cette dernière passée en paramètre.

php

<?php

    // Connexion à la base de données
    $connection = mysql_connect('host (usually localhost)', 'mysql_username' , 'mysql_password');
    $selection = mysql_select_db('mysql_database', $connection);

    // Récupération du paramètre passé par la méthode GET
    if($_GET['id']){

        $id = $_GET['id'];

        // Suppression
        $delete = mysql_query("DELETE FROM 'notes' WHERE 'id' = '$id'");

        // Redirection
        header("Location:index.php");

    }

?>

jQuery – Ajout d’une note

JavaScript – jQuery

// Déclenchement lors de la soumission du formulaire
$("#submit").click(function(){

    // Récupération de la note
    var formvalue = $("#content").val();

    // Création de l'URL d'envoie
    var url = 'submit=1&content=' + formvalue;

    // Utilisation d'Ajax / jQuery pour l'envoie
     $.ajax({
       type: "POST",
       url: "process.php",
       data: url,
       success: function(){
            // Si l'ajout est réussi, afficher un message de réussite
           $("ul").before("<p class='new'>Nouvelle note: <i>" + formvalue + "</i></p>");
       }
     });

    // Nous retournons "false" au navigateur afin que la page ne soit pas actualisé
    return false;

});

jQuery – Suppression d’une note

JavaScript – jQuery

// Déclenchement lors d'un clique sur un lien de suppression
$("a").click(function(){

    // Récupération du lien de suppression cliqué
    var element = $(this);

    // Récupération de l'id du lien cliqué
    var noteid = element.attr("id");

    // Création de l'URL d'envoie
    var info = 'id=' + noteid;

     $.ajax({
       type: "GET",
       url: "delete.php",
       data: info,
       success: function(){
       element.parent().eq(0).fadeOut("slow");
       }
     });

    // Nous retournons "false" au navigateur afin que la page ne soit pas actualisé
    return false;

});

Tags: ajax, javascript, jquery, list, mysql, Php, todo, todo list, xhtml