Au coeur du web participatif : AJAX

(1)

Annexe 2 : annexe.pdf

Annexe au travail de diplôme

Haute École de Gestion de Genève (HEG-GE)

Filière Informatique de Gestion

(2)

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

<html>

<head>

<title>Communes Romandes</title>

</head>

<p align="center"><span class="titre">Communes Romandes</span></p>

<br />

</form>

</center>

</body>

</html>

commune.html 16.11.2007 11:03

(3)

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

/***********************************

** Fichier: fonctions_js.js

** Auteur: Alain PELLAUX

** Dernière modification: 02/11/2007

***********************************/

/* fonction retournant une instance de l'objet XHRHttpRequest

** compatible avec les différents navigateurs supportant l'objet XHR*/

function get_xhr(){

var xhr = null;

// Pour Internet Explorer if (window.ActiveXObject){

try{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e){

xhr = new ActiveXObject("Msxml2.XMLHTTP");

}

// Autres navigateurs

} else if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

// ajoute un en-tête XML if(xhr.overrideMimeType){

xhr.overrideMimeType("text/xml");

}

// Navigateur incompatible } else {

alert("Navigateur incompatible avec AJAX");

}

return xhr;

} // get_xhr

// initialise les différents paramètres au chargement de la page function init_page(){

// désactive l'auto-complétion automatique du navigateur

document.getElementById('saisie').setAttribute("autocomplete","off");

} // init_page

// mets en page le document XML reçu en paramètre et retourne la réponse mise en page function traite_docXML(docXML){

var reponse = "";

if (docXML.getElementsByTagName("commune").length == 0) {

reponse = "<span class=\"aucune_commune\">Aucune commune ne correspond à la recherche.</span>";

} else{

reponse += "<table><tr>";

for (i=0;i < docXML.getElementsByTagName("commune").length; i++){

if (i%5 ==0 && i>0){

reponse += "</tr><tr width=\"200px\">";

}

fonctions_js.js 16.11.2007 11:05

Page 1 of 2

(4)

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

reponse += "<td><center><table class=\"commune\"><tr><th colspan=2 class=\"nom_commune\">";

reponse += docXML.getElementsByTagName("nom")[i].childNodes[0].data + "</th></tr>";

reponse += "<tr><td class=\"image_canton\"><img width=60 height=75 src=\"";

reponse += docXML.getElementsByTagName("image")[i].childNodes[0].data + "\"></td>";

reponse += "<td class=\"infos_canton\">" + docXML.getElementsByTagName("npa")[i].childNodes[0].data;

reponse += "<br />" + docXML.getElementsByTagName("localite")[i].childNodes[0].data + "</td></tr></table></center></td>";

}

reponse += "</tr></table>";

}

return reponse;

} // traite_docXML

/* crée un objet XMLHttpRequest à l'aide de la méthode get_xhr() et appelle la function() lorsqu'onreadystatechange se produit.

** Affiche les résultats mis en page lorsque tout c'est bien passé (readyState==4 et status==200) et que saisie n'est pas nulle,

** n'affiche rien sinon. Si les données sont en train d'être reçues (readyState==3), affiche un message */

function go(saisie){

var xhr = get_xhr();

if (xhr != null){

xhr.onreadystatechange = function(){

if (xhr.readyState==3){

document.getElementById('traitement').innerHTML = "<span class=\"traitement\">En cours de traitement...</span>";

} else if (xhr.readyState==4 && xhr.status==200){

if (saisie != ""){

var communes = xhr.responseXML;

document.getElementById('resultat').innerHTML = traite_docXML(communes);

document.getElementById('traitement').innerHTML = "Ok!";

}else {

document.getElementById('resultat').innerHTML = "";

document.getElementById('traitement').innerHTML = "";

} }

} // function }

xhr.open("GET", "serveur.php?saisie="+saisie, true);

xhr.send(null);

} // go

/* sert a contrer le copier/coller avec la souris, lors d'un clic droit la fonction setTimeout

** déclenche la fonction go() après 2 secondes */

function clic_droit(e){

if ((!document.all && e.which == 3) || (document.all && event.button==2)){

window.setTimeout("go(encodeURIComponent(document.getElementById(\"saisie\").value))", 2000);

}

return true;

}

fonctions_js.js 16.11.2007 11:05

(5)

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

<?php

/*******************************************************************

** Fichier: serveur.php

** utf8_encode(): encode la chaine au format utf8

** utf8_decode(): convertit une chaine utf8 en une chaine ISO-8859-1

*******************************************************************/

// indique que c'est un document XML et impose le charset UTF-8 header('Content-Type: text/xml; charset=utf-8');

// connexion à la bdd

$db = mysql_connect('.', 'login', 'mot de passe');

mysql_select_db('asap',$db) or die ("Impossible de se connecter à la bdd");

// enregistrement de la saisie

$saisie_test = $_GET['saisie'];

$req_saisie="INSERT INTO saisies (saisie) VALUES ('$saisie_test')";

$res_req = mysql_query($req_saisie);

// récupération de la saisie de l'utilisateur

$saisie = isset($_GET['saisie'])?utf8_decode($_GET['saisie']):'';

// construction de la requête

$req_sql='SELECT com_nom AS nom, com_canton AS canton, com_npa AS npa, com_localite AS localite, com_image AS image FROM communes';

$req_sql .= ' WHERE com_nom LIKE \''.$saisie. '%\'';

$req_sql .= ' ORDER BY com_nom';

// prologue du fichier XML

echo (utf8_encode("<?xml version='1.0' encoding='utf-8' ?>"));

// ouverture de la balise racine echo ("<communes>");

// exécution de la requête ou message d'erreur en cas d'échec

$res_req = mysql_query($req_sql) or die ("<b>Erreur SQL:</b><br />".mysql_error());

// traitement des résultats, construction des balises XML avec les résultats while($donnee = mysql_fetch_assoc($res_req)):

echo ("<commune>");

echo utf8_encode("<nom>".$donnee['nom']."</nom>");

echo utf8_encode("<canton>".$donnee['canton']."</canton>");

echo utf8_encode("<npa>".$donnee['npa']."</npa>");

echo utf8_encode("<localite>".$donnee['localite']."</localite>");

echo utf8_encode("<image>".$donnee['image']."</image>");

echo ("</commune>");

endwhile;

// fermeture de la balise racine echo ("</communes>");

// fermeture de la connexion à la bdd mysql_close($db);

?>

serveur.php 26.11.2007 11:53

Page 1 of 1

(6)

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

/***********************************

** Fichier: style.css

***********************************/

.titre{

color:#000000;

font-size: 2em;

}

.aucune_commune{

color:#FF0000;

font-style: italic;

}

.traitement{

color:#FF0000;

font-style: italic;

}

.commune{

width:200px;

}

.image_canton{

width:100px;

}

.infos_canton{

width:100px;

} table{

border-spacing: 10px;

} td{

background-color:#00FFFF;

}

noscript{

color:#FF0000;

font-size: 1.2em;

}

style.css 16.11.2007 11:04

(7)

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

<?php

/****************************************************************************************************************************************

**

** Fichier: conv_csv.php

** D'après une modification du code de l'article:

http://www.journaldunet.com/developpeur/tutoriel/php/041214-php-fichier-csv-tableau.shtml

*****************************************************************************************************************************************

*/

/* pour le fichier csv

** fopen() ouvre le fichier en lecture seule */

$fichier = "liste_cantons.csv";

$fic = fopen($fichier, 'rb');

/* pour le fichier destination

** fopen() ouvre le fichier en écriture seule, s'il n'existe pas on le créé */

$fichier_dest = fopen("liste_commune.sql","a");

//"entete" du fichier sql, détermine le script de création de la BDD

$sql = "DROP DATABASE IF EXISTS `communes`;"."\n";

$sql .= "CREATE DATABASE `communes` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;"."\n";

$sql .= "USE `communes`;"."\n";

$sql .= "CREATE TABLE `communes` (`com_id` INTEGER NOT NULL AUTO_INCREMENT,`com_nom` VARCHAR(25),`com_canton` VARCHAR(25), `com_npa`

INTEGER, `com_localite` VARCHAR(25), `com_image` VARCHAR(25), CONSTRAINT `pk_communes` PRIMARY KEY (`com_id`));"."\n";

//écrit $sql dans le fichier de destination et va à la ligne fputs($fichier_dest,$sql."\n");

/* fgetcsv() Renvoie la ligne courante et cherche les champs CSV

** feof() Teste la fin du fichier

** sizeof() Compte le nombre d'éléments d'un tableau ou le nombre de propriétés d'un objet

** explode() Coupe une chaîne en segments

** addslashes Ajoute des anti-slash dans une chaîne */

for ($ligne = fgetcsv($fic, 1024); !feof($fic); $ligne = fgetcsv($fic, 1024)):

$j = sizeof($ligne);

for ($i = 0; $i < $j; $i++):

$la_ligne = explode(";", $ligne[$i]);

$nom = addslashes($la_ligne[0]);

switch($la_ligne[1]):

case 'Fribourg':

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/fribourg.gif');";

break;

case 'Genève':

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/geneve.gif');";

break;

case 'Jura':

conv_csv.php 16.11.2007 11:07

Page 1 of 2

(8)

45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/jura.gif');";

break;

case 'Neuchâtel':

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/neuchatel.gif');";

break;

case 'Valais':

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/valais.gif');";

break;

case 'Vaud':

$a_inserer = "INSERT INTO `communes` (`com_nom`, `com_canton`, `com_npa`, `com_localite`, `com_image`) VALUES ('$nom', '$la_ligne[1]', '$la_ligne[2]', '$la_ligne[3]', 'images/vaud.gif');";

break;

endswitch;

fputs($fichier_dest,$a_inserer."\n");

endfor;

//fermeture du fichier de destination fclose($fichier_dest);

?>

conv_csv.php 16.11.2007 11:07