Accueil >> Articles

Classement avec JQuery et Ajax

Catégorie Tutoriels - Ecrit par Hervé le 11/07/2010 - Article lu 1 350 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)." 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 :-)

Relayer cet article sur les réseaux sociaux

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 ?

Christophe le 23/05/2013 à 12:56
@ Tonyok75 Si tu souhaites sécuriser une seule page,...
Dream Seychelles le 07/05/2013 à 08:08
Merci pour le tutoriel je finirai sans doute...
accessformation le 07/05/2013 à 07:40
Très intéressant cet article, merci ! Cela me...
Qfla le 03/05/2013 à 23:18
Merci pour ce billet, il n’est pas évident...
Vide-grenier le 03/05/2013 à 00:34
De la chicoré, c’est pas du café. La...
François le 02/05/2013 à 14:27
J’avoue qu’en voyant le titre de l’article je...