Pour commencer, et pour ceux qui auraient des difficultés pour importer le fichier .csv dans leur base de données favorite, vous pouvez la créer avec cette structure :
villes.sql
# # Structure de la table `villes` #
CREATE TABLE villes ( Commune varchar(30) NOT NULL default '', Codepos varchar(5) NOT NULL default '', Departement varchar(30) NOT NULL default '', INSEE varchar(5) NOT NULL default '' ) TYPE=MyISAM;
et ensuite exécuter ce petit script pour la charger :
import.php
<? $table = "villes"; $fichier = "insee.csv";
set_time_limit(90);
include("_conn.php");
$f = file($fichier); $i=0;
mysql_query("DELETE FROM $table");
foreach($f as $ligne) { if($i) { $ligne = addslashes(trim($ligne)); $SQL = "INSERT INTO $table VALUES('".str_replace(";","','",$ligne)."')"; mysql_query($SQL); } else $i++; }
@mysql_close(); ?>
Le fichier _conn.php à inclure est le suivant :
_conn.php
<? // Connexion à la base MySQL @mysql_connect("localhost","root",""); @mysql_select_db("test"); ?>
A renseigner évidemment en fonction de vos propres paramètres de connexion...
Le script serveur appelé par XMLHTTPRequest
Comme vous le savez maintenant après avoir lu l'article de Robloche, il vous faut un script serveur qui sera appelé depuis JavaScript et vous permettra de mettre à jour vos listes sans recharger la page... Voici celui que je vous propose :
ville.php
<? $table = "villes";
include("_conn.php");
switch($q=@$_GET["q"]) {
case "1": // Liste des codes postaux $query = "SELECT DISTINCT Codepos FROM $table" . " WHERE Departement = '".$_POST["champ"]."' ORDER BY 1";
case "2": // Liste des communes if(!@$query) $query = "SELECT Commune,INSEE FROM $table" . " WHERE Codepos = '".$_POST["champ"]."' ORDER BY 1";
echo 'var o = null;'; echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];'; echo 's.options.length = 0;';
if($q<2) echo 's.options[s.options.length] = new Option("Choisir","");';
default: // Liste des départements $liste_dpt = ""; $SQL = "SELECT DISTINCT Departement FROM $table ORDER BY 1"; $res = mysql_query($SQL); while($val = mysql_fetch_array($res)) $liste_dpt .= "<option value=\"".$val[0]."\">".$val[0]."</option>\n";
// Nom de la commune d'après le code INSEE if(@$adresse["INSEE"]) { $SQL = "SELECT Commune FROM $table WHERE INSEE='".$adresse["INSEE"]."'"; $res = mysql_query($SQL); $adresse["Commune"] = mysql_result($res,0,0); } }
@mysql_close(); ?>
A noter comme différences principales avec le script initial :
Un paramètre q est passé en méthode GET pour indiquer la liste concernée (vu qu'il y en a plus que 2) et déterminer en fonction de lui la requete à appliquer ;
Si la page est appelée sans ce paramètre q (inclusion classique) il met à jour 2 variables : la liste des départements à afficher dans le formulaire et le libellé de la commune en fonction de son code INSEE ;
Le formulaire resélectionnant dans les listes les choix précédemment saisis, une ligne echo 'update('.$q.');'; est ajoutée qui déclenchera le process JavaScript de mise à jour.
Le formulaire enfin
test.php
<? // On peut aussi extraire ce tableau d'une DB ;) $adresse = array( "civ"=>@$_POST["civ"], "nom"=>@$_POST["nom"], "prenom"=>@$_POST["prenom"], "adresse"=>@$_POST["adresse"], "adresse2"=>@$_POST["adresse2"], "Departement"=>@$_POST["list0"], "Codepos"=>@$_POST["list1"], "INSEE"=>@$_POST["list2"], );
include("ville.php");
?><HTML><HEAD>
<SCRIPT language="JavaScript">
// Mise à jour des listes via XMLHttpRequest function liste(f,q,t) { var l1 = f.elements["list"+(q-1)]; var l2 = f.elements["list"+q]; var index = l1.selectedIndex;
if(window.XMLHttpRequest) // Firefox xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) // Internet Explorer xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; }
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var data = "champ="+escape(l1.options[index].value) +"&form="+f.name+"&select=list"+q; xhr_object.send(data); } }
// Mise à jour du selectedIndex d'une liste function update(L) { v = new Array; v[0] = "<?=@$adresse["Departement"]?>"; v[1] = "<?=@$adresse["Codepos"]?>"; v[2] = "<?=@$adresse["INSEE"]?>"; if(v[L]=="") return; f = document.forms.form_selects; L0 = f.elements["list"+L]; for(i=0;i<L0.options.length;i++) if(L0.options[i].value==v[L]) { L0.selectedIndex=i; if(L<2) liste(f,L+1,2); break; } }
// Validation du formulaire function test(f) { if(f.nom.value!="") if(f.adresse.value!="") if(f.elements["list2"].options.length!=0) return true; alert("Formulaire incomplet !"); return false; }