Classement avec JQuery et Ajax

Accueil >> Articles >> Classement avec JQuery et Ajax

Classement avec JQuery et Ajax

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

Note actuelle 0.00/5
1
2
3
4
5

Note actuelle : 0.0/5 (0 votes)

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 :