Tutoriaux

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

Administrateur

Déc 23 |14:23

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. À vous de voir ...

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és à la page process.php par la méthode POST.

process.php

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

<?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é en paramètre.

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

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

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

});