phpInfo.netLes ArchivesLes éléPHPants
   PHP ·  MySQL ·  Apache ·  Zend ·  El Roubio ·  PHPScripts ·  ApéroPHP ·  Infos du Web  

  
  Accueil
  Trucs & Astuces
  Scripts
  Regex
  Annuaire
  Articles

.
      
 Articles   Listes déroulantes avec PHP, MySQL et JavaScript  Par J-Pierre DEZELUS   Novembre 2000  
Objectif

Nous allons voir dans cet article comment associer PHP, MySQL et JavaScript pour générer des liste déroulantes dynamiques.

Nous étudierons 2 cas. Celui d'une liste dont le contenu se met à jour en fonction du choix fait dans une autre (Items / Rubriques), et celui de 2 listes IN et OUT où l'on peut faire passer les éléments d'une liste à l'autre.

MySQL servira à alimenter les listes, JavaScript à faire les sélections, et PHP traitera la demande.

Prérequis

Pour que les démonstrations fonctionnent vous devez avoir activé JavaScript sur votre navigateur.
Il faut aussi 2 tables MySQL 'demo_rubrique' et 'demo_item' dont voici la srtucture et le contenu :

  code    rubrique  
  1    Langage  
  2    OS  
  3    SGBD  

  code    item    code_rub  
  1    PHP    1  
  2    ASP    1  
  3    JavaScript    1  
  4    C++    1  
  5    Linux    2  
  6    Windows    2  
  7    Mac OS X    2  
  8    FreeBSD    2  
  9    Unix    2  
  10    MySQL    3  
  11    PostgreSQL    3  
  12    Oracle    3  



1er Exemple - Listes Items / Rubriques

Dans ce premier exemple, la liste 'Items' est regénérée par JavaScript à chaque nouvelle sélection dans la liste 'Rubrique'. Il n'y a aucun appel à PHP et MySQL à ce moment puisque l'exécution se déroule maintenant côté client. Tout s'est fait au chargement de la page où tous les cas de figure ont été envisagés.
Cette technique convient bien quand il y a peu de combinaisons possibles.

Vous pouvez faire quelques tests :








 Rubriques   
 Items   

Voici le code source utilisé où l'on voit bien l'imbrication de PHP et MySQL pour générer le code JavaScript, qui lui-même génèrera la liste Item en fonction du choix fait dans la liste Rubrique.

<?php

@mysql_connect($hote, $user, $pass);

?>

<SCRIPT LANGUAGE="JavaScript">

function ModifierListe(code_item) {
  
  lg = document.frmDemo1.zlItem.length;
  
  // On vide la liste
  for (i = lg - 1; i >= 0; i--) {
    document.frmDemo1.zlItem.options[i] = null;
  }
    
  code_rub = document.frmDemo1.zlRubrique.selectedIndex;

<?php

// Génération des Items par Rubriques
$sql = "SELECT code FROM demo_rubrique ORDER BY code";
$resultat = mysql_db_query($Base, $sql);

$max_lignes = 0;
$option_max = '';

while ($enr = mysql_fetch_array($resultat)) {
  
  $sql  = "SELECT code, item ";
  $sql .= "FROM demo_item ";
  $sql .= "WHERE code_rub='".$enr[0]."'";
  $sql .= "ORDER BY item";
  $resultat2 = mysql_db_query($Base, $sql);

  echo "  if (document.frmDemo1.zlRubrique.options[code_rub].value == ".$enr[0].") {\n";
  echo "    document.frmDemo1.zlItem.length = ".(mysql_num_rows($resultat2)).";\n";
  $cpt = 0;
  while ($enr2 = mysql_fetch_array($resultat2)) {
    echo "    document.frmDemo1.zlItem.options[".$cpt."].value = ".$enr2[0].";\n";
    echo "    document.frmDemo1.zlItem.options[".$cpt."].text  = \"".$enr2[1]."\";\n";
    echo "    if (code_item == ".$enr2[0].") document.frmDemo1.zlItem.options[".$cpt."].selected = true;\n";
    $cpt++;
    if ($cpt > $max_lignes) $max_lignes = $cpt;
    if (strlen($enr2[1]) > strlen($option_max)) $option_max = $enr2[1];
  }
  echo "  }\n";

}

?>
      
}  

</SCRIPT>


<?php

// ----------------------------------------------------------------------------
// Liste Rubriques
// ----------------------------------------------------------------------------
$sql = "SELECT code, rubrique FROM demo_rubrique ORDER BY rubrique";
$resultat = mysql_db_query($Base, $sql);

echo "<FORM METHOD=POST NAME='frmDemo1'>";

echo "<BR>&nbsp;<B>Rubriques</B>&nbsp;";
echo "&nbsp;<SELECT NAME='zlRubrique' onChange='ModifierListe(-1)'>\n";
while ($enr = mysql_fetch_array($resultat)) {
  echo "<OPTION VALUE='".$enr[0]."'";
  if ($zlRubrique == $enr[0]) echo " SELECTED";
  echo ">".htmlspecialchars($enr[1])."</OPTION>\n";
}
echo "</SELECT>&nbsp;\n";

// ----------------------------------------------------------------------------
// Liste Items
// ----------------------------------------------------------------------------
echo "&nbsp;<B>Items</B>&nbsp;";
echo "&nbsp;<SELECT NAME='zlItem'>\n";
for ($cpt = 0; $cpt < $max_lignes; $cpt++)
  echo "<OPTION>".ereg_replace(".", "--", $option_max)."</OPTION>\n";
echo "</SELECT>&nbsp;\n";
if (!isset($zlItem)) $zlItem = -1;
echo "<SCRIPT LANGUAGE='JavaScript'>\n;ModifierListe(".$zlItem.");\n</SCRIPT>\n";
// ----------------------------------------------------------------------------

echo "<INPUT TYPE='submit' VALUE='Valider'>\n";

echo "</FORM>";

// ----------------------------------------------------------------------------
// Résultats des sélections
// ----------------------------------------------------------------------------
echo "Sélection :<BR>\n";

if (isset($zlRubrique) && $zlRubrique != "") {
  $sql = "SELECT rubrique FROM demo_rubrique WHERE code='".$zlRubrique."'";
  $resultat = @mysql_db_query($Base, $sql);
  $enr = @mysql_fetch_array($resultat);
  echo "Rubrique = $zlRubrique [$enr[0]]<BR>\n";
}

if (isset($zlItem) && $zlItem != "" && $zlItem != -1) {
  $sql = "SELECT item FROM demo_item WHERE code='".$zlItem."'";
  $resultat = @mysql_db_query($Base, $sql);
  $enr = @mysql_fetch_array($resultat);
  echo "Item = $zlItem [$enr[0]]<BR>\n";
}

?>



2ème Exemple - Listes IN / OUT

Ce deuxième exemple utilise les listes à sélection multiples. Vous pouvez ainsi voir comment on peut récupérer dans un tableau PHP les différentes sélections faites dans une liste.

Dans cet exemple le principe consiste à faire aller et venir les éléments d'une liste à une autre. Au moment de la validation, les éléments des 2 listes sont sélectionnés (en JavaScript) ce qui permet ensuite de récupérer dans 2 tableaux différents les items de la 1ère liste (IN) et ceux de la deuxième (OUT). Il ne reste plus qu'à faire les traitements appropriés (INSERT ou UPDATE pour ceux de la liste IN par exemple, DELETE pour ceux de la liste OUT).

Une nouvelle démo pour mieux comprendre :







 IN 
   		  

  		 OUT 
   

Le code source utilisé, un mélange de PHP et de JavaScript.

<?php

@mysql_connect($hote, $user, $pass);

?>

<SCRIPT LANGUAGE="JavaScript">

function DeplacerItemDeVers(de, vers) {

  var zlAv = "zlItem"+de+"[]";
  var zlAp = "zlItem"+vers+"[]";

  if (document.frmDemo2.elements[zlAv].options.selectedIndex >= 0) {
    
    while (document.frmDemo2.elements[zlAv].options.selectedIndex >= 0) {
      ind = document.frmDemo2.elements[zlAv].options.selectedIndex;
      
      texte  = document.frmDemo2.elements[zlAv].options[ind].text;
      valeur = document.frmDemo2.elements[zlAv].options[ind].value;
    
        document.frmDemo2.elements[zlAv].options[ind] = null;
    
      var user = new Option(texte, valeur);
      lg = document.frmDemo2.elements[zlAp].options.length;
      document.frmDemo2.elements[zlAp].options[lg] = user;
    }
  
  } else {
    
    alert("Aucun Item sélectionné !");
  
  }
  
  return(false);
  
}

function SelectionnerItems(form) {

  zl = "zlItemIN[]";
  lg = document.frmDemo2.elements[zl].options.length;

  for (cpt = 0; cpt < lg; cpt++) {
    document.frmDemo2.elements[zl].options[cpt].selected = true;
  }

  zl = "zlItemOUT[]";
  lg = document.frmDemo2.elements[zl].options.length;

  for (cpt = 0; cpt < lg; cpt++) {
    document.frmDemo2.elements[zl].options[cpt].selected = true;
  }

  return( true );

}

</SCRIPT>

<?php

echo "<FORM METHOD=POST NAME='frmDemo2'>";

$sql  = "SELECT demo_item.code, item, demo_rubrique.code, rubrique ";
$sql .= "FROM demo_item, demo_rubrique ";
$sql .= "WHERE demo_item.code_rub = demo_rubrique.code ";
$sql .= "ORDER BY rubrique, item";

$resultat = mysql_db_query($Base, $sql);
  
$listeIn  = "<SELECT NAME=zlItemIN[]  SIZE='10' MULTIPLE>";
$listeOut = "<SELECT NAME=zlItemOUT[] SIZE='10' MULTIPLE>";
  
while ($enr = mysql_fetch_array($resultat)) {
  
  // condition quelconque pour mettre dans l'une ou l'autre des listes
  $liste = ($enr[2] == 1 ? "listeOut" : "listeIn");
  $$liste .= "<OPTION VALUE='".$enr[0]."'>".$enr[3]." - ".$enr[1]."</OPTION>\n";

}

$listeIn  .= "</SELECT>&nbsp;";
$listeOut .= "</SELECT>&nbsp;";

echo "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR>";
echo "<TD ALIGN='center'>&nbsp;<B>IN</B>&nbsp;<BR>&nbsp;".$listeIn."&nbsp;</TD>";
echo "<TD ALIGN='center'>&nbsp;";
echo "<INPUT TYPE='submit' VALUE='<<' ";
echo "onClick='return DeplacerItemDeVers(\"OUT\", \"IN\")'>&nbsp;<BR><BR>&nbsp;";
echo "<INPUT TYPE='submit' VALUE='>>' ";
echo "onClick='return DeplacerItemDeVers(\"IN\", \"OUT\")'>";
echo "&nbsp;</TD>";
echo "<TD ALIGN='center'>&nbsp;<B>OUT</B>&nbsp;<BR>&nbsp;".$listeOut."&nbsp;</TD>";
echo "<TD VALIGN='center'>&nbsp;<INPUT TYPE='submit' VALUE='Valider' ";
echo "OnClick='return SelectionnerItems()'>&nbsp;</TD>";
echo "</TR></TABLE>\n";

echo "</FORM>";

// ----------------------------------------------------------------------------
// Résultats des sélections
// ----------------------------------------------------------------------------

echo "Sélection :\n";

if (isset($zlItemIN)) {
  echo "<BR>IN:";
  for ($cpt = 0; $cpt < sizeof($zlItemIN); $cpt++) {
    $sql = "SELECT code, item FROM demo_item WHERE code='".$zlItemIN[$cpt]."'";
    $resultat = @mysql_db_query($Base, $sql);
    $enr = @mysql_fetch_array($resultat);
    echo " $enr[1] ($enr[0])";
  }
}

if (isset($zlItemOUT)) {
  echo "<BR>OUT:";
  for ($cpt = 0; $cpt < sizeof($zlItemOUT); $cpt++) {
    $sql = "SELECT code, item FROM demo_item WHERE code='".$zlItemOUT[$cpt]."'";
    $resultat = @mysql_db_query($Base, $sql);
    $enr = @mysql_fetch_array($resultat);
    echo " $enr[1] ($enr[0])";
  }
}

?>



Conclusion

On a pu voir avec ces deux exemples que PHP et MySQL côté serveur alliés à JavaScript côté client pouvaient nous donner une page vraiment dynamique. Dynamique par son contenu grâce à PHP et MySQL, et dynamique par son comportement grâce à JavaScript.

Liens

 » Tout JavaScript Le 1er site vers lequel je me dirige quand je bute sur JavaScript.
 » L'Editeur JavaScript Un autre site très bien fait.
Synseo
Copyright © 2000-2003 - Tous droits réservés - J-Pierre Dézélus - phpInfo.net est hébergé par OVH