Accueil >> Articles

Classement avec JQuery et Ajax

Catégorie : Tutoriels - Ecrit par Hervé le 11/07/2010 - Article lu 613 fois - 4 commentaires

Un nouveau tutoriel pour vous expliquer comment classer des données issues d'une base MySQL avec un enregistrement à la volée grâce à Ajax.

Pour commencer, on a besoin de JQuery UI, que l'on télécharge ici.

Pensez à sélectionner votre thème en haut de la colonne de droite. Pour ma part, j'ai choisi le thème Redmond. Après avoir dézippé le dossier, copier les dossiers js et css dans votre dossier de travail.

Ensuite il va falloir créer 2 fichiers supplémentaires : index.php qui contiendra la majorité du script et ajax.php pour l'enregistrement dans la base de données.

Dans un premier temps, vous devez créer une table :

CREATE TABLE IF NOT EXISTS `classement_items` (
    `id` int(11) NOT NULL auto_increment,
    `titre` varchar(100) NOT NULL,
    `ordre` tinyint(4) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

INSERT INTO `classement_items` (`id`, `titre`, `ordre`) VALUES
(1, 'Item 1', ''),
(2, 'Item 2', ''),
(3, 'Item 3', ''),
(4, 'Item 3', ''),
(5, 'Item 3', ''),
(6, 'Item 3', '');

Une fois cette opération effectuée, on va pouvoir s'occuper du fichier index.php.

Avant :

<html>

Ajouter les informations de connexion à la base de données :

<?php
$bdd = "nom_bdd";
$hote = "nom_hote";
$user = "nom_user";
$password = "mot_de_passe";
$connect = mysql_connect ($hote, $user, $password);

mysql_select_db($bdd);
?>

Dans le head, ajouter :

<link type="text/css" rel="stylesheet" 
href="css/redmond/jquery-ui-1.8.2.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

Nous venons d'ajouter le css pour le thème Redmond, le script de JQuery, ainsi que les composants UI qui nous permetront d'effectuer notre classement.

Nous allons maintenant afficher nos items en exécutant une requête.

Après :

<body>

Ajouter :

<?php
$req = "SELECT id, titre, ordre FROM classement_items ORDER BY ordre";
$rep = mysql_query($req);
while ($row = mysql_fetch_array($rep)) {
    echo $row['titre'];
}
?>

Voir le résultat

Comme vous pouvez le notez, ce n'est pas très esthétique. On va styliser l'ensemble pour rendre les items plus présentables.

Avant :

</head>

Ajouter la fonction qui nous permettra d'utiliser de classer les éléments :

<script type="text/javascript">
$(function() {
    $("#sortable").sortable({
        placeholder: "fond",
    })
    $("#sortable").disableSelection();
});
</script>

Remplacer :

while ($row = mysql_fetch_array($rep)) {
    echo $row['titre'];
}

Par :

echo "<ul id="sortable">n";
while ($row = mysql_fetch_array($rep)) {
    echo "<li>".$row['titre']."</li>n";
}
echo "</ul>n";

Ouvrir le fichier jquery-ui-1.8.2.custom.css dans le dossier css/redmond/ et ajouter tout en bas :

ul#sortable {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#sortable li, ul#sortable li.fond {
    padding: 5px;
    border: 1px solid #666;
    margin: 1px 1px 5px;
    font: normal 14px verdana;
    width: 100px;
    height: 20px;
    color: #666;
    background: #f0f0f0;
    cursor: move;
}
ul#sortable li.fond {
    background: #fbec88;
}

Voir le résultat

C'est déjà bien plus sympa :-)

Vous noterez qu'au passage, il devient possible de déplacer les items pour les classer. Le fond jaune en arrière plan est obtenu grace à la classe fond. De ce fait, nous avons ajouté le paramètre placeholder dans la fonction sortable afin d'indiquer la classe utilisée pour le fond.

Maintenant si vous classez les items et que vous actualisez la page, vous noterez que ces derniers retrouveront leur place d'origine.

En contrôlant la base de données on s'aperçoit que tous les ordres sont à 0.

Nous allons remédier au classement des items en ajoutant une fonction ajax à la fonction sortable et créer le fichier ajax.php qui se chargera d'effectuer l'enregistrement dans la base de données. Cela nous évitera de cliquer sur un bouton pour enregistrer les données.

Après :

placeholder: 'fond',

Ajouter :

update : function(){
    var order = $("#sortable").sortable("serialize");
    $("#maj").load("ajax.php?"+order);
}

Avant :

echo "<ul id="sortable">n";

Ajouter la div maj :

echo "<div id="maj"></div>n";

Remplacer :

echo "<li>".$row['titre']."</li>n";

En ajoutant l'identifiant de chaque enregistrement de la BDD :

echo "<li id="item_".$row['id']."">".$row['titre']."</li>n";

Après :

echo "</ul>n";

Ajouter :

echo "<form action="" method="post">n"; 
echo "<input type="hidden" name="sortable" />n";
echo "</form>n";

Créez à présent le fichier ajax.php qui va contenir la requête de mise à jour des ordres, item par item.

Ajouter dans le fichier ajax.php :

<?php
// Connexion a la BDD
$bdd = 'nom_bdd';
$hote = 'nom_hote';
$user = 'nom_user';
$password = 'mot_de_passe';
$connect = mysql_connect ($hote, $user, $password);

mysql_select_db($bdd);

// Requete de mise a jour
foreach ($_GET['item'] as $position => $item) {
    $req = "UPDATE classement_items SET 
    ordre=".mysql_real_escape_string($position)." ";
    $req.= "WHERE id=".mysql_real_escape_string($item);
    $rep = mysql_query($req);
}
?>

Voir le résultat

Si vous actualisez votre page, vous constaterez que les items restent classés :-)

On vérifie que tout est OK côté BDD :

Les items sont maintenant classés par ordre.

Je vous laisse digérer ce tuto et n'hésitez à envoyer vos commentaires :-)

4 commentaires :

Ecrit par jtraulle
Le 25/02/2011 à 12h29

Bonjour,

J'ai suivi avec grand intérêt votre tutoriel.
Je l'ai un peu adapté à mon besoin car j'avais besoin de pouvoir classer plusieurs

donc, j'ai remplacé vos id par des class.

La première partie fonctionne bien, cependant, je n'arrive pas à mettre à jour l'ordre des items en base de donnée.

J'utilise CakePHP donc, je ne sais pas trop comment manipuler de l'AJAX avec ce framework car je ne l'ai jamais fait.

Auriez vous une idée pour solutionner mon problème ?

N'hésitez pas à me contacter par mail au besoin pour davantage d'informations.

Félicitations au passage pour votre blog, ce tuto est excellent :)

Jean

Ecrit par Hervé de stand parapluie
Le 06/03/2011 à 22h33

Bonsoir Jean

Je n'utilise pas du tout CakePHP donc je ne vais pas vous être d'une grande utilité ;)

Ecrit par Etienne
Le 29/05/2011 à 23h58

Bonsoir,

Je ne comprends pas d'où vient le name "item" passé en get dans le foreach. Et comment traduire ce get en tableau. Pourrais tu m'éclairer ?

Merci et encore bravo pour ton travail.

Ecrit par Hervé
Le 30/05/2011 à 00h13

On récupère l'item dans l'id du li.

Pourquoi cherches-tu à le traduire en tableau et quel est l'intérêt dans ce cas ?

rake le 02/02/2012 à 11h13
Pour 149 €, le travail doit être un...
Djolhan le 01/02/2012 à 16h39
Après avoir utilisé plusieurs fois ce système sur...
Cyril le 31/01/2012 à 17h19
Pas trop long Nicolas, non. ;) C’est suffisamment...
Nicolas le 30/01/2012 à 18h40
Tout d’abord joli boulot de synthèse, très clair....
Bertrand le 30/01/2012 à 16h16
J’adore les défis sous entendus que les blogueurs...
Comm2Presse le 29/01/2012 à 14h32
Ce qui est fou (bien que quelque part...

<< Février 2012