octobre
2011
Bonjour,
Faisant suite à ma participation à une discussion concernant la gestion de listes liées en PHP, j’ai décidé de faire un exemple détaillé afin de faciliter la vie de certains.
Je tiens à remericer CinePhil pour la problématique d’exemple.
Environnement technique
PHP 5.3+
jQuery 1.6.3
MySql 5.1.53 Community
1. Problématique
On gère un planning de sessions d’examens ayant les règles suivantes :
- Une session est obligatoirement datée et localisée dans une ville
- Une session propose indépendammment une liste de matières
- Pour chaque couple session/matiere, on suit un nombre d’inscrits
On souhaite permettre à un utilisateur d’affiner une recherche par des sélections successives de critères dans des listes déroulantes.
2. Concept et fonctionnalités
L’idée principale est de mettre à jour le contenu des listes de sélection non encore sélectionnées en fonction des critères des listes voisines déjà sélectionnées.
Au démarrage chaque liste contient toutes les données possibles et le filtrage commence dès la première sélection.
Il doit être possible de retirer un critère de filtrage en ne sélectionnant aucune donnée de la liste. Le retrait du critère est matérialisé par une ligne vide au début de chaque liste.
A chaque sélection, les données répondant aux critères doivent être immédiatement affichées.
3. Base de données
On va élaborer une simple base de données mySql correspondant à l’ennoncé et la remplir avec quelques données :
Extrait de données des sessions :
4. Rendu et affichage
Intéressons nous maintenant au code HTML.
Une zone de liste est codée ainsi :
Notre liste gère l’évènement onchange
ce qui permet de lui rattacher une fonction javascript qui sera appelée à chaque changement de sélection.
Concrètement, nous allons donc remplacer la totalité des <option value="...">...</option>
des listes voisines par des valeurs filtrées et renvoyées par le serveur après un appel ajax.
4.A Inventaire des zones de liste
- Jours
- Mois
- Années
- Villes
- Matières
4.B Tableau des données
On affiche les colonnes suivantes :
- Villes
- Dates
- Matières
- NB inscrits
Les données seront triées par : Ville ASC, Date DESC, Matière ASC
Notre table de données est codée ainsi :
5. Format d’échange des données
jQuery manipule parfaitement les formats XML et JSON.
Par convention, toutes les données (code des listes et code du tableau des données) seront renvoyées par le serveur au format XML :
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8"?> <xml> <jours></jours> <mois></mois> <annees></annees> <villes></villes> <matieres></matieres> <table></table> </xml> |
6. Code de la page de démarrage : appel initial
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Listes liées</title> <link rel="stylesheet" type="text/css" href="my.css"> <script type="application/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="application/javascript"> function filterLists() { // ici on récupère les valeurs sélectionnées pour chaque liste avec les sélecteurs de jQuery var jour = $('#jours option:selected').val(); var mois = $('#mois option:selected').val(); var annee = $('#annees option:selected').val(); var ville = $('#villes option:selected').val(); var matiere = $('#matieres option:selected').val(); // on fait notre appel ajax paramétré (pas besoin de s'occuper de l'implémentation du XMLHttpRequest, jQuery le fait pour toi) $.ajax({ type: 'POST', // méthode de transmission des données url: 'filterLists.php', // script à exécuter sur le serveur data: 'jour='+jour+'&mois='+mois+'&annee='+annee+'&ville='+ville+'&matiere='+matiere, // données à passer au script via le tableau $_POST dataType: 'xml', // type des données attendues en retour : ici xml cache: false, success: function(response) { // traitement du résultat (= données reçues du serveur) une fois l'appel ajax réussi var code; // vu que la réponse est au format xml, on demande à jquery de trouver des noeuds spécifiques // et si ces noeuds contiennent des données alors on remplace les données des listes liées par celles renvoyées par le serveur // en clair : on remplace si nécessaire l'ensemble des lignes <option value=""></option> pour chaque liste qui n'a pas encore de sélection if ((code = $(response).find('jours').text()).length) $('#jours').html(code); if ((code = $(response).find('mois').text()).length) $('#mois').html(code); if ((code = $(response).find('annees').text()).length) $('#annees').html(code); if ((code = $(response).find('villes').text()).length) $('#villes').html(code); if ((code = $(response).find('matieres').text()).length) $('#matieres').html(code); if ((code = $(response).find('table').text()).length) $('#table').html(code); } }); } </script> <style type="text/css"> body { font-family: "arial"; } table { width: 600px;;} table, tr, th, td { border: 1px solid black; border-collapse: collapse; padding: 4px;} .alignr { text-align: right; } .alignc { text-align: center; } </style> </head> <body> <?php // ICI MODIFIEZ LE PARAMETRAGE // Connexion à la base de données $server = 'localhost'; $user = 'root'; $pwd = 'root'; $dbName = 'test'; $cnx = mysql_connect($server, $user, $pwd); $db = mysql_select_db($dbName); // Au démarrage, aucune sélection : on extrait toutes les données individuellement pour chaque liste // JOURS $sql = 'SELECT DISTINCT DAY(t_session.date_) FROM t_session ORDER BY DAY(t_session.date_);'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $jours[] = $row[0]; } // MOIS $sql = 'SELECT DISTINCT MONTH(t_session.date_) FROM t_session ORDER BY MONTH(t_session.date_);'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $mois[] = $row[0]; } // ANNEES $sql = 'SELECT DISTINCT YEAR(t_session.date_) FROM t_session ORDER BY YEAR(t_session.date_);'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $annees[] = $row[0]; } // VILLES $sql = 'SELECT DISTINCT t_ville.idVille, t_ville.ville FROM t_ville ORDER BY t_ville.ville;'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $villes[$row[0]] = $row[1]; } // MATIERES $sql = 'SELECT DISTINCT t_matiere.idMatiere, t_matiere.matiere FROM t_matiere ORDER BY t_matiere.matiere;'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $matieres[$row[0]] = $row[1]; } // DONNES DE LA TABLE $sql = <<<SQL SELECT t_ville.ville, t_session.date_, t_matiere.matiere, t_session_matiere.nbInscrit FROM t_session_matiere INNER JOIN t_matiere ON t_session_matiere.idMatiere = t_matiere.idMatiere INNER JOIN t_session ON t_session_matiere.idSession = t_session.idSession INNER JOIN t_ville ON t_session.idVille = t_ville.idVille ORDER BY t_ville.ville ASC, t_session.date_ DESC, t_matiere.matiere ASC; SQL; $qry = mysql_query($sql); while($row = mysql_fetch_assoc($qry)) { $data[] = $row; } // pour chaque liste il faut prévoir leur retrait du filtre // en insérant une ligne vide en début de liste : <option value=""></option> ?> <p><strong>SESSIONS D'EXAMENS</strong></p> <p>Sélectionnez de un à plusieurs critères de recherche.</p> <form id="frmRecherche"> <!-- Liste des jours --> <label for="jours">Jours</label> <select id="jours" onchange="filterLists();"> <option value=""></option> <?php foreach($jours as$jour): ?> <option value="<?php echo $jour; ?>"><?php echo $jour; ?></option> <?php endforeach; ?> </select> <!-- Liste des mois --> <label for="mois">Mois</label> <select id="mois" onchange="filterLists();"> <option value=""></option> <?php foreach($mois as $unMois): ?> <option value="<?php echo $unMois; ?>"><?php echo $unMois; ?></option> <?php endforeach; ?> </select> <!-- Liste des années --> <label for="annees">Années</label> <select id="annees" onchange="filterLists();"> <option value=""></option> <?php foreach($annees as $annee): ?> <option value="<?php echo $annee; ?>"><?php echo $annee; ?></option> <?php endforeach; ?> </select> <!-- Liste des villes --> <label for="villes">Villes</label> <select id="villes" onchange="filterLists();"> <option value=""></option> <?php foreach($villes as $id => $ville): ?> <option value="<?php echo $id; ?>"><?php echo $ville; ?></option> <?php endforeach; ?> </select> <!-- Liste des matières --> <label for="matieres">Matières</label> <select id="matieres" onchange="filterLists();"> <option value=""></option> <?php foreach($matieres as $id => $matiere): ?> <option value="<?php echo $id; ?>"><?php echo $matiere; ?></option> <?php endforeach; ?> </select> </form> <!-- Données de la table --> <table> <thead> <tr> <th>VILLES</th> <th>DATES</th> <th>MATIERES</th> <th>NB Inscrits</th> </tr> </thead> <tbody id="table"> <?php foreach($data as $row): ?> <tr> <td><?php echo $row['ville']; ?></td> <td class="alignc"><?php echo $row['date_']; ?></td> <td><?php echo $row['matiere']; ?></td> <td class="alignr"><?php echo $row['nbInscrit']; ?></td> </tr> <?php endforeach; ?> </tbody> </table> </body> </html> |
7. Code de la page de traitement à chaque séléction d’un élément d’une liste : filterLists.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 | <?php // Ce script est appelé à chaque sélection d'un élément d'une liste // suivi du critère $where = array(); $data = array(); // données sélectionnées => filtres $jour = NULL; $mois = NULL; $annee = NULL; $ville = NULL; $matiere = NULL; /** * CE SCRIPT ANALYSE LES SELECTIONS ET RENVOIE DES DONNEES AU FORMAT XML * La structure correspond à ce que jQuery attend pour mettre à jour la page * <?xml version="1.0" encoding="utf-8"?> * <xml> * <jours></jours> * <mois></mois> * <annees></annees> * <villes></villes> * <matieres></matieres> * <table></table> * </xml> * * @var SimpleXMLElement */ $xml = simplexml_load_string('<?xml version="1.0" encoding="utf-8"?><xml></xml>'); // on parcourt le tableau $_POST et on vérifie quelles sont les listes qui ont une sélection // jour if (isset($_POST['jour']) && (ctype_digit("{$_POST['jour']}"))) { $jour = $_POST['jour']; $where[] = 'DAY(t_session.date_) = ' . intval($jour); } //mois if (isset($_POST['mois']) && (ctype_digit("{$_POST['mois']}"))) { $mois = $_POST['mois']; $where[] = 'MONTH(t_session.date_) = ' . intval($mois); } // année if (isset($_POST['annee']) && (ctype_digit("{$_POST['annee']}"))) { $annee = $_POST['annee']; $where[] = 'YEAR(t_session.date_) = ' . intval($annee); } // villes if (isset($_POST['ville']) && (ctype_digit("{$_POST['ville']}"))) { $ville = $_POST['ville']; $where[] = 't_session.idVille = ' . intval($ville); } // matière if (isset($_POST['matiere']) && (ctype_digit("{$_POST['matiere']}"))) { $matiere = $_POST['matiere']; $where[] = 't_session_matiere.idMatiere = ' . intval($matiere); } ### FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ) $where = ( ! empty($where)) ? 'WHERE ' . implode(' AND ', $where) : NULL; // ICI MODIFIEZ LE PARAMETRAGE // Connexion à la base de données $server = 'localhost'; $user = 'root'; $pwd = 'root'; $dbName = 'test'; $cnx = mysql_connect($server, $user, $pwd); $db = mysql_select_db($dbName); // on définit le code SQL commun à toutes les requêtes // voir la chaine SQL d'extraction des données de la table (plus bas) $fromAndWhere = <<<SQL t_session_matiere INNER JOIN t_matiere ON t_session_matiere.idMatiere = t_matiere.idMatiere INNER JOIN t_session ON t_session_matiere.idSession = t_session.idSession INNER JOIN t_ville ON t_session.idVille = t_ville.idVille $where SQL; /** * Crée le code HTML pour les liste relatives aux dates : Jours Mois Années * @param mixed $sql * @return string */ function filtrageDates($sql) { $data = array(); $qry = mysql_query($sql); $data[] = '<option value=""></option>'; // ligne vide while($row = mysql_fetch_row($qry)) { $data[] = '<option value="' . $row[0] . '">' . $row[0] . '</option>'; } return implode("\n", $data); } /** * Crée le code HTML pour les liste relatives aux villes et matières * @param mixed $sql * @return string */ function filtrageVillesMatieres($sql) { $data = array(); $qry = mysql_query($sql); $data[] = '<option value=""></option>'; // ligne vide while($row = mysql_fetch_row($qry)) { $data[] = '<option value="' . $row[0] . '">' . $row[1] . '</option>'; } return implode("\n", $data); } // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) $fromDates = (NULL === $where) ? 't_session' : $fromAndWhere; // si le jour n'a pas déjà été sélectionné -> filtrage de la liste if (NULL === $jour) { $sql = "SELECT DISTINCT DAY(t_session.date_) FROM $fromDates ORDER BY DAY(t_session.date_);"; $xml->addChild('jours', filtrageDates($sql)); } // si le mois n'a pas déjà été sélectionné -> filtrage de la liste if (NULL === $mois) { $sql = "SELECT DISTINCT MONTH(t_session.date_) FROM $fromDates ORDER BY MONTH(t_session.date_);"; $xml->addChild('mois', filtrageDates($sql)); } // si l'année n'a pas déjà été sélectionnée -> filtrage de la liste if (NULL === $annee) { $sql = "SELECT DISTINCT YEAR(t_session.date_) FROM $fromDates ORDER BY YEAR(t_session.date_);"; $xml->addChild('annees', filtrageDates($sql)); $data = array(); } // si la ville n'a pas déjà été sélectionnée -> filtrage de la liste if (NULL === $ville) { // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) $from = (NULL === $where) ? 't_ville' : $fromAndWhere; $sql = "SELECT DISTINCT t_ville.idVille, t_ville.ville FROM $from ORDER BY t_ville.ville;"; $xml->addChild('villes', filtrageVillesMatieres($sql)); $data = array(); } // si la matière n'a pas déjà été sélectionnée -> filtrage de la liste if (NULL === $matiere) { // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) $from = (NULL === $where) ? 't_matiere' : $fromAndWhere; $sql = "SELECT DISTINCT t_matiere.idMatiere, t_matiere.matiere FROM $from ORDER BY t_matiere.matiere;"; $xml->addChild('matieres', filtrageVillesMatieres($sql)); $data = array(); } // données de la table $sql = <<<SQL SELECT t_ville.ville, t_session.date_, t_matiere.matiere, t_session_matiere.nbInscrit FROM $fromAndWhere ORDER BY t_ville.ville ASC, t_session.date_ DESC, t_matiere.matiere ASC; SQL; $data = array(); $qry = mysql_query($sql); // mise en forme des données // ici on reconstruit les données de la table while($row = mysql_fetch_assoc($qry)) { $data[] = <<<HTML <tr> <td>{$row['ville']}</td> <td class="alignc">{$row['date_']}</td> <td>{$row['matiere']}</td> <td class="alignr">{$row['nbInscrit']}</td> </tr> HTML; } if (empty($data)) { // pas de données correspondant au filtre $data[] = '<tr></tr>'; } $xml->addChild('table', implode("\n", $data)); # noeud attendu par jQuery dans filterLists() // Envoi du header et des données header('content-type: text/xml'); echo $xml->asXML(); ?> |
8. Captures
Amusez-vous bien
Commentaires bienvenus
@plus
Bonsoir,
Merci pour votre aide j’ai créé un sujet sur le forum
http://www.developpez.net/forums/d1241817/php/php-sgbd/php-mysql/listes-liees-php-jquery/#post6789024
Salut,
Je veux bien aider mais pour cela il faudrait ouvrir un fil sur le forum PHP avec le code qui pose problème.
Bonne continuation.
salut rawsrc j’ai suivie vraiment avec interet cette demo mais je galere toujours deux listes deroulante depuis 3jours j’ai vraiment besoin de ton aide voici:
les 2 listes de la page php:
Nom du Service :
Nom Intervention :
maintenant ce je veux que le choix de la 2e liste depend de la 1ere
NB: ils apartienne a 2 table different
Salut,
Ouvre un fil spécifique avec ton problème et n’oublie pas d’y poster tes codes.
Re,
Tout compte fait j’ai réussi à trouver mes erreur,
par contre je n’arrive pas à faire fonctionner le système,quand je change mes choix dans les menus déroulants rien ne se passe.
Pourriez-vous m’aider?
Merci d’avance
Bonjour , merci pour le tuto, très bon exemple bien détaillé.
Cependant j’ai quelques soucis avec le code.
Des erreurs que je n’arrive pas à solutionner.
J’ai des erreurs au niveau de ces lignes:
// DONNES DE LA TABLE
$sql =
j’ai posté sur le forum pour avoir un peut d’aide mais il n’y a pas foule.
4 listes liées voici le lien
http://www.developpez.net/forums/d1175030/webmasters-developpement-web/ajax/4-listes-liees/#post6452191
pourquoi mes commentaire ne s’affichent pas en entier ?
Je disai pourquoi elle commence comme ça :$sql =
Ok, javais compris mais pourquoi elle commence par
C’est très simple : cette chaine SQL n’a pour but que d’extraire toutes les données de la base en regard du schéma posté en 3.
Un simple SELECT avec des jointures basiques.
Bonsoir rawsrc.
C’est surtout cette requet que je ne comprend pad :
// DONNES DE LA TABLE
$sql =
Bonjour,
pas de problèmes pour te filer un coup de main : expliques plus en détails ta problématique et postes ton code,
pourrais-tu expliquer le « même si je n’ai pas tous compris ».
@plus
Merci beaucoup pour ce tuto très intéressant même si je n’ai pas tous compris.
Je cherche à faire 4 listes liées les un avec les autres depuis une semaine mais rien à faire je n’y arrive pas.
je suis d’abords tombé sur le forum et j’ai adapté à mon besoin mais les liste ne sont pas liées puis j’ai vu ton tuto le problème c’est que ma page filterLists.php n’est pas chargée lorsque je change quelque chose dans un des select du coup il ne sont pas liés.
pourrais tu m’aider à réaliser ces listes ?
Encore merci pour ce tuto.