Ci-dessous un aperçu du diaporama par défaut :

Pour accéder à plus d’informations et au lien de téléchargement du slider, rendez-vous sur la page dédiée sur le site UnPointZero.

Objectif :

Créer une application web XML pour une entreprise d’intérim qui gère des milliers de CV et qui a l’intention d’acheter et fusionner un grand nombre de ses concurrents. Certains utilisant les technologies xml et d’autres non.

Travail à réaliser

Votre application web sera constituée des fichiers suivants:

• un formulaire de saisie (création de fichier XML Cv en Ajax/Jquery)
• 10 fichiers XML sous format XMLCV à partir de vrais CV trouvés sur le web
• les feuilles de style XSLT correspondantes

Ces feuilles XSLT devront permettre une transformation avec les navigateurs et produiront
les pages suivantes :

• générer du texte
• générer des pages XHTML
• générer une page PDF (optionnel /bonus)
• générer un fichier RTF (optionnel /bonus)
• générer un fichier XHTML+CSS à la zengarden (optionnel /bonus)
• en option : une base de données Mysql qui stocke vos données XMLCV

Lire la suite sur www.julgrossio.com

Bien qu’étant mon support de références, vous y trouverez également mon CV, des tutoriaux sur le développement web et autres, ainsi qu’un espace réservé à la présentation de mes projets, développés notamment dans le cadre de mes études…

Le site est encore en construction, soyez indulgent !

Cliquez pour agrandir

Pour changer le logo rien de plus simple, remplacez simplement l’image « bg_header.png » du dossier images par votre image personnalisée. Cependant si vous utilisez ce template, merci de laisser le lien « Design par 4live Creations » dans le footer .

Vous pouvez le télécharger directement ici.

Nous allons donc mettre en œuvre :

• SWFUpload : Une librairie flash / javascript qui permet d’uploader des fichiers.
• JQuery : La célèbre librairie javascript qui nous permet de réaliser plein de choses .
• Classes directory et fichier : Codée par mes soins, ces 2 classes nous permettrons de gérer l’affichage des fichiers et la suppression.
• Un fichier .htaccess et une page download.php : Afin d’empêcher le téléchargement par le passage d’une url directe.

Ce tutoriel ne traite que de gestion upload/download. Pour sécuriser à 100% votre espace, libre à vous de l’intégrer dans l’espace « membre » de votre site par exemple.

Passons maintenant à la customisation !

Hiérarchie des dossiers :

• core : Nos classes
• css : Nos feuilles de styles
• img : Nos images
• libs : Nos librairies
• uploads : Nos fichiers permettant le download / upload, le .htaccess pour la sécurité et notre dossier « files » ou sont stockés nos fichiers

Fichier index.php :

Ligne 36 à 62 :

<form id="form1" action="index.php" method="post" enctype="multipart/form-data">
		<div id="divSWFUploadUI">
			<div class="fieldset flash" id="fsUploadProgress">
			<span class="legend"></span>
			</div>
			<p id="divStatus"></p>
			<p>
				<span id="spanButtonPlaceholder"></span>
				<input id="btnCancel" type="button" value="Annuler l'envoi" disabled="disabled" style="margin:0 0 0 2px; height: 22px; font-size: 8pt;" />
				<br />
			</p>
		</div>
		<noscript>
		<div style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px;">
			Nous sommes désolés l'upload ne peut pas s'initialiser. Merci d'activer JavaScript.
		</div>
		</noscript>
		<div id="divLoadingContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			Initialisation ... Merci de patienter ...
		</div>
		<div id="divLongLoading" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			L'initialisation met trop de temps au chargement ou ne fonctonne pas correctement. Merci de vérifier que votre plugin Flash est activé et à jour.<a href="http://get.adobe.com/fr/flashplayer/" target="_blank"> T&eacutel&eacutechargez Flashplayer</a>
		</div>
		<div id="divAlternateContent" class="content" style="background-color: #FFFF66; border-top: solid 4px #FF9966; border-bottom: solid 4px #FF9966; margin: 10px 25px; padding: 10px 15px; display: none;">
			Nous sommes désolés, l'upload ne peut pas être initialisé. Merci de mettre a jour Flashplayer. <a href="http://get.adobe.com/fr/flashplayer/" target="_blank"> T&eacute;l&eacute;chargez Flashplayer</a>
		</div>
</form>

Le formulaire pour SWFUpload avec les différents DIV permettant l’affichage des blocs d’upload et des messages d’erreur. Vous pouvez changer les styles qui y sont attachés, mais pour des raisons évidentes d’interaction avec le code javascript, ne changez pas les id .

Fichier libs/libs.php :

Ligne 9 :

		$filename = "uploads/extlist.txt";

Ce fichier .txt comprend la liste des extensions autorisés lors de l’upload. Éditez donc le fichier « extlist.txt » pour y ajouter ou supprimer des extensions. Si vous souhaitez autoriser tout type de fichier ( je ne vous le conseille pas pour des raisons de sécurité ), remplacez « uploads/extlist.txt » par « * » .

Ligne 24 :

		file_size_limit : \"200 MB\",

La taille limite des fichiers autorisés à l’upload.

Ligne 28 :

file_upload_limit : 100,

Le nombre de fichiers que l’utilisateur à le droit d’envoyer en une session de navigateur : Si l’utilisateur recharge la page cette variable est réinitialisée, l’utilisateur peut alors à nouveau uploader 100 fichiers. Cette variable doit donc être gérée dynamiquement via votre panel utilisateur de votre site ( si vous en avez un ). Si la limite est de 0, le nombre de fichiers autorisés est illimité.

Ligne 29 :

file_queue_limit : 0,

Le nombre de fichiers autorisés en attente d’upload. 0 est égal à illimité.

Ligne 37 :

		button_image_url : "libs/swfupload/images/XPButtonUploadText_61x22.png",

Le bouton d’upload est réalisé en flash ( en réalité c’est bien plus qu’un simple bouton ) cela dit vous pouvez modifier son style via une image.

Ligne 39 à 40 :

		button_width: 61,
		button_height: 22,

La taille « width » et « height » de votre bouton upload.

Fichier upload/.htaccess :

Attention, la modification sur ce fichiers est [u]impérative[/u] pour le bon fonctionnement des scripts

Ligne 3 :

RewriteRule ^.+$ http://www.4live.fr [L]

Remplacez http://www.4live.fr par l’url de votre site

Ligne 8 :

allow from 4live.fr

Remplacez par l’host de votre site.

Bien entendu, l’ensemble des feuilles de style est customisable à souhait, ainsi que toutes les images.

Attention :
Gardez à l’esprit qu’il vous faudra sécuriser le contenu de votre fichier « download.php » d’une façon ou d’une autre sinon l’utilisateur pourra très bien passer directement par download.php sans passer par votre filemanager !

Voici un exemple :

<?php
session_start();
$user = $_SESSION['user'];

if($user!=NULL)
{
session_unset();
session_destroy();
$_SESSION = array();

	$file = htmlentities($_GET['file']);

header("Cache-Control: must-revalidate, post-check=0, pre-check=0" );
header("content-type: application/octet-stream" );
header("Content-Length: ".filesize($file));
header("Content-Disposition: attachment; filename=".str_replace(" " , "_" , basename($file)));
flush();
readfile($file);
}
else {
echo "Vous n'avez pas acces au fichier !";
}
?>

Si la session « user » existe je lance le download via les informations header ( et je détruit la session pour éviter le téléchargement de fichiers alors que le filemanager est fermé ) sinon, je lui affiche un message d’erreur. Il ne vous reste donc plus qu’à attribuer une session « user » a l’utilisateur sur votre page filemanager.php !

Si vous avez des questions ou des remarques, les commentaires sont là pour ça.

C’est ici qu’interviennent les interfaces, introduites depuis PHP5. Elles permettent de créer un modèle pour les classes qui l’implémentent, c’est à dire que ces classes devront obligatoirement contenir les méthodes et constantes définies dans l’interface.

Voyons à présent comment déclarer et utiliser une ou plusieurs interfaces en PHP.

Exemple : IActionDB.php

<?php
// déclaration de l'interface de nom IActionsDB
interface IActionsDB {

	// méthodes à implémenter
	public function add();
	public function update($id);
	public static function delete($id);

}
?>

Explications :

Nous avons construit ici une interface du nom de IActionsBD. Dans un soucis de lisibilité, je nomme toujours mes interfaces en commençant par la lettre I. On peut ainsi repérer directement le type de script que contient le fichier PHP. De cette façon vous pouvez également appeler vos fichiers de classes : classname.c.php

Bref! Revenons au sujet pour donner quelques explications. Notre interface d’exemple est ici utilisée dans le cadre d’une application nécessitant des interactions avec une base de données. Nous avons déclaré trois méthodes obligatoires pour les classes implémentant l’interface IActionDB ; à savoir :

• public function add(); -> pour ajouter un objet dans la base de données
• public function update($id); -> pour modifier un enregistrement connu dans la bdd
• public static function delete($id); -> pour la suppression

Comme vous l’aurez sans doute remarqué, les méthodes déclarées dans l’interface sont toutes de type public. Ainsi, vous donner un tronc commun à vos développeurs pour l’implémentation, tout en les laissant libre du choix de programmation. En effet, libre au codeur de passer ces méthodes en privés pour une utilisation en interne au sein d’une classe…

Voyons désormais un exemple d’implémentation de notre interface !

Exemple :

<?php
#=======================================#
#	@preview	Classe User				#
#	@author 	Julien GROSSIO			#
#	@version	v250510.1				#
#	@mail		jul.grossio@gmail.com	#
#=======================================#
require_once('../interfaces/IActionsDB.php');

class User implements IActionsDB {

	private $login;
	private $password;
	private $rule;

	/**
	* constructeur
	*/
	public function __construct($login,$password,$rule) {
		$this->login = $login;
		$this->password = $password;
		$this->rule = $rule;
	}

	/**
	* ajout de l'utilisateur dans la bdd
	*/
	public function add() {
		$connexion = PDO2::getInstance();
		$requete = $connexion->prepare('INSERT INTO users VALUES (NULL, ?, ?, ?)');
		if( $requete->execute(array($this->login,$this->password, $this->rule)) )
			return true;
		else
			return false;
	}

	/**
	* Update d'un utilisateur dans la bdd
	*/
	public function update($id) {
		$connexion = PDO2::getInstance();
		$requete = $connexion->prepare('UPDATE users SET user_login = ?, user_password = ?, user_rule = ? WHERE user_id = ?');
		if( $requete->execute(array($this->login,$this->password,$this->rule,$id)) )
			return true;
		else
			return false;
	}

	/**
	* Suppression d'un utilisateur dans la bdd
	*/
	public static function delete($id) {
		$connexion = PDO2::getInstance();
		$requete = $connexion->prepare('DELETE FROM users WHERE user_id = ?');
		if( $requete->execute(array($id)) )
			return true;
		else
			return false;
	}

	/**
	* Vérification du combo login/password donné
	*/
	public static function checkConnection($login,$password){
		$connexion = PDO2::getInstance();
		$requete = $connexion->prepare('SELECT count(*) as nbres FROM user WHERE user_login = ? AND user_password = ?');
		$requete->execute(array($login,$password));
		$retour=$requete->fetch(PDO::FETCH_OBJ);
		if($retour->nbres==1)return true;
		else return false;
	}

}
?>

Explications :

Nous avons déclaré une classe User qui implémente l’interface IActionsDB. Pour ce faire, on utilise le mot clé implements. Afin de respecter l’interface implémentée, nous avons défini les trois méthodes, à savoir add(), delete($id) et update($id).

Conclusion et notes

• Les interfaces en PHP deviennent quasiment obligatoires et sont très pratiques dans le développement collaboratif
• Contrairement aux classes abstraites, on peut implémenter plusieurs interfaces dans une classe
• Pour implémenter plusieurs interfaces dans une classe, il faut les séparer par des virgules

Liste des outils présentés :

Conception :
Kompozer – Notepad++
Transfert :
Filezilla
Debogage :
Web Developer – Firebug
Autres :
Regex Coach

1. Conception :

KompoZer :

KompoZer est un outil de conception de sites web qui vous permet d’éditer vos pages HTML en mode WYSIWYG. Il est extrêmement simple d’utilisation et dispose également d’un éditeur de feuilles de style CSS et d’une  gestion des fichiers permettant de publier directement vos pages votre serveur.
- Site officiel de KompoZer.

Notepad++ :

Est-il encore nécessaire de vous présenter notepad++ ? Cet outil aux multiples fonctionnalités qui vous permet d’éditer rapidement vos pages de code. Personnellement j’apprécie tout particulièrement l’identification des blocs de code ainsi que la recherche multi-documents qui permet d’identifier par exemple plus rapidement vos variables sur l’intégralité de votre site. L’ensemble des fonctionnalités est disponible sur le site officiel.
- Site officiel de Notepad++.

2. Transfert :

Filezilla :

Filezilla est un client FTP qui permet le transfert de vos fichiers sur un serveur. La gestion des connexions est également implantée et facilitera vos transferts si vous disposez de plusieurs sites. A noter également la possibilité de transférer plusieurs fichiers simultanément.
Site officiel de filezila.

3. Debogage :

Les outils de debogage sont nombreux cependant sachez que beaucoup d’entre eux sont des modules pour firefox ce qui nécessite bien entendu d’avoir firefox. Utilisateurs d’internet explorer, il vous faudra donc chercher des alternatives !

Web developer :

L’extension Web developer ajoute une toolbar à votre navigateur qui propose énormément d’outils essentiellement utiles pour le débogage.
Site officiel de web developer
Page du module firefox

Firebug :

Firebug est certainement l’outil le plus célèbre concernant le débogage web. Il vous permet énormément de choses comme la modification « en directe » du code HTML ou de vos feuilles de style CSS ou encore le débogage par étape de vos scripts javascript. Ajoutez lui l’extension FirePHP et vous obtiendrez l’outil parfait pour le développement AJAX .
Site officiel de firebug
Page du module firefox
FirePHP

4. Autres :

Regex Coach :

Regex Coach est un outil très performant pour créer et valider vos expressions régulières. Très utile si vous êtes amenés par exemple à vérifier le contenu d’un formulaire.
Site officiel de Regex Coach

J’essayerai d’en ajouter au fur et à mesure et comme dit précédemment si vous connaissez un outil qui n’est pas présent dans cet article, n’hésitez pas à le poster en commentaire.

Site de présentation

Entrons maintenant dans le vif du sujet !

<div id="wrap">
	<div id="main" class="clearfix">
	</div>
</div>

<div id="footer">
</div>

Voici la structure du code HTML de vos pages.
Prenons l’exemple du template 4live :

Ce qui nous donne en code HTML :

<div id="wrap">
	<div id="top_menu">
		...
	</div>
	<div id="main" class="clearfix">
		...
	</div>
</div>
<div id="footer">
	...
</div>

C’est simple non ? Passons maintenant au fichier CSS :

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: xx_footerheight px;}  /* Taille "height" de votre footer */

#footer {position: relative;
	margin-top: - xx_footerheight px; /* Taille "height" de votre footer en negatif */
	height: xx_footerheight px;
	clear:both;}

N’oubliez pas de changer la taille « xx_footerheight » du footer qui est utilisée 3 fois ici.
La propriété « height:auto » de la div #wrap permet d’élargir la hauteur de cette div à la hauteur de la fenêtre.
La marge negative de #footer permet de l’apporter jusqu’au padding de votre #main.

Reste à appliquer le hack clearfix qui corrige pas mal de problèmes avec les éléments flottants qui peuvent « décoller » le footer dans certains navigateurs.

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Nous en avons terminé !

Si vous souhaitez plus d’informations sur ce hack, rendez-vous sur le site de l’auteur ou postez un commentaire .

1. Création de la table MySQL

Pour commencer, téléchargez la base de données MySQL à cette adresse. Importez le fichier depuis votre interface phpmyadmin.

Voici la structure de cette BDD :

Je ne vais pas vous détailler tous les champs, seulement ceux qui me semblent nécessaires :

geo_statut : Ce champ nous permettra de gérer si on le souhaite une validation des points par un administrateur.

geo_pos : La position du point sous la forme (longitude, latitude). Cela permet d’accélérer le processus d’affichage des points.

Passons maintenant a l’établissement de connexion avec la BDD.

2. Connexion à la base de données MySQL

Ouvrez votre fichier "mysql_connect.php" et collez y le code suivant :

<?php
$db_type = 'dbtype'; // ici remplacez par 'mysql'
$db_host = 'yourhost'; // l'host de votre bdd
$db_name = 'dbname'; // son nom
$db_username = 'dbusrname'; // votre username
$db_password = 'dbpass'; // votre password
$db_select = 'dbselect'; // la db ou votre table est enregistrée
$connexion = mysql_connect($db_host,$db_username,$db_password);
if ($connexion)
{
mysql_select_db($db_name,$connexion);
}
else
{
}
?>

Votre fichier de connexion est maintenant prêt ! Passons à l’ajout.

3. Ajout d’un point à la base de données

Ouvrez votre page "ajout.php" et collez y le code ci-dessous :

<h1>D&eacute;poser un ajout</h1>
<?php
// Partie de traitement du formulaire...

// Si la requete s'est bien effectuée et donc qu'un ajout a été effectué
if ($_GET['message']=="ok")
{
 // On affiche un message de confirmation
 ?>
 <p>Votre ajout a bien &eacute;t&eacute; ajout&eacute;e &agrave; notre base de donn&eacute;es et sera trait&eacute;e dans les plus brefs d&eacute;lais.</p>
 <p align="center"><a href="index.php">Retour &agrave; l'index</a></p>
 <?php
}
// Si erreur dans la requete
else if($_GET['message']=="errbdd")
{
 // On affiche un message d'erreur
 ?>
 <p>Erreur de connexion à la Bdd...</p>
 <p align="center"><a href="index.php">Retour &agrave; l'index</a></p>
 <?php
}
// Sinon...
else
{
 // Si le bouton ajouter! a été appuyé
 if (isset($_POST['ajouter']) && $_POST['ajouter'] == 'Ajouter!')
 {
 // Récuperation des variables postés
 $date = htmlentities($_POST['date']);
 $position = htmlentities($_POST['position']);
 $adresse = htmlentities($_POST['adresse']);
 $titre = htmlentities($_POST['titre']);
 $description = htmlentities($_POST['description']);
 // Si tous les champs ont étés remplis
 if ( $_POST['titre']!="" && $_POST['adresse']!="" && $_POST['description']!="" && $_POST['date']!="" )
 {
 // Connexion avec la BDD
 $mysql_link = include ('mysql_connect.php');
 // Si connexion effectuée
 if($mysql_link)
 {
 // Requete et execution de la requete
 $requete = "INSERT INTO geolocalisation (geo_id,geo_statut,geo_date,geo_pos,geo_adresse,geo_titre,geo_description) VALUES('','1','$date','$position','$adresse','$titre','$description')";
 $execution = mysql_db_query($db_select, $requete);
 // Suivi d'une redirection JS
 ?>
 <SCRIPT LANGUAGE="JavaScript">
 document.location.href="index.php?page=ajout&message=ok"
 </SCRIPT>
 <?php
 }
 // Si erreur de connexion à la bdd
 else
 {
 ?>
 <SCRIPT LANGUAGE="JavaScript">
 document.location.href="index.php?page=ajout&message=errbdd"
 </SCRIPT>
 <?php
 }
 ?>
 <?php
 }
 // Si un des champs est vide on affiche un message d'erreur
 else
 {
 ?>
 <h2>Erreur</h2>
 <div></div>
 <p>Au moins un des champs est vide !</p>
 <?php
 }
 }

// Partie formulaire
 ?>
 <form action="index.php?page=ajout" method="POST">
 <div></div>
 <?php
 $date = date('Y-m-j H:i:s');

 ?>
 <h2>Nom de votre ajout</h2>
 <p>Entrez ici le nom de votre ajout. Cel&agrave; peut &ecirc;tre par exemple votre nom.</p>
 <p><input name="titre" type="text" value="<?php echo "$titre";?>" size="50" /></p>
 <h2>Adresse</h2>
 <p>Entrez ici l'adresse ou est localis&eacute;e l'odeur.</p>
 <p><input name="adresse" type="text" value="<?php echo "$adresse";?>" onchange="addAddress(this.value); return false" size="50" /><input name="date" type="hidden" value="<?php echo "$date";?>"/><input name="position" id="position" type="hidden" value="<?php echo "$position";?>" readonly="readonly"  /></p>
 <h2>Description</h2>
 <p>Entrez ici une courte description de l'odeur.</p>
 <p><textarea name="description" cols="38" rows=""><?php echo "$description";?></textarea></p>
 <p align="center"><input type="submit" name="ajouter" id="submit" value="Ajouter!"></p>
 </form>
 <?php
}
?>

Pour une fois je ne vais pas détailler tout le code, tout est commenté. Cependant quelques détails sont necessaires.

Dans le formulaire …

<input name="adresse" type="text" value="<?php echo "$adresse";?>" onchange="addAddress(this.value); return false" size="50" />

Quand l’utilisateur modifie le contenu de cet input, appel de la fonction "addAdress()" avec en paramètre la valeur de l’input !

La fonction "addAdress()" va renvoyer la position a un autre input nommé "position".

Ouvrez votre fichier "geolocalisation_javascript.php" et collez y le code suivant :

function addAddress(address) {
 document.getElementById('submit').disabled=true;
 geocoder = new GClientGeocoder();
 if (geocoder) {
 geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 document.getElementById('position').value=point;
 document.getElementById('submit').disabled=false;
 }
 }
 );
 }
 }

Le fonctionnement est exactement le même que pour la fonction "showaddress()". Simplement, elle enverra la valeur de "point" dans l’input nommé position !

document.getElementById('position').value=point;

Pourquoi ? Tout simplement car cela accélèrera le processus d’affichage des points étant donné qu’on demandera à l’API de travailler avec des positions déjà calculés…

Fermez votre fichier "ajout.php", nous en avons terminé avec lui .

4. Affichage des points sur notre carte

Vous me direz que maintenant il faudrait afficher ces points sur la carte. C’est vrai ! Pour cela je vous ai codé une petite fonction nommée "show()" simplifiée qui elle n’est pas présente dans les sources. Si vous ne voulez pas afficher tous les points de la carte mais faire un formulaire de recherche par exemple, je vous invite à consulter les sources, tout y est !

Si vous souhaitez simplement afficher tous les points présents dans la BDD, ouvrez votre fichier "geolocalisation-javascript.php" et collez le code suivant HORS des balises de javascript :

<?php
include ('mysql_connect.php');
echo "<script type=\"text/javascript\">
 function show() {
 // Creation du marqueur
 var blueIcon = new GIcon(G_DEFAULT_ICON);

 blueIcon.shadow = \"\";
 // On attribue le marqueur a l'option GMarkerOptions
 markerOptions = { icon:blueIcon };
 ";

 $date = date('Y-m-j H:i:s');

 // Requete SQL
 $sql="SELECT * FROM geolocalisation";
 $retour_recherche=mysql_query($sql);

 // Tant qu'il y à des enregistrements
 while($this_last=mysql_fetch_array($retour_recherche))

 {
 $id = $this_last['geo_id'];
 $date = $this_last['geo_date'];
 $adresse = $this_last['geo_adresse'];
 $geo_pos = $this_last['geo_pos'];
 $titre = $this_last['geo_titre'];
 $description = $this_last['geo_description'];
 // On ajoute des points sur la carte
 echo "
 var point = new GLatLng$geo_pos;
 var marker".$id." = new GMarker(point,markerOptions);
 map.addOverlay(marker".$id.");
 var html".$id." = \"<center><b><u>$titre</u></b></center><br/><br/>$description\";
 GEvent.addListener(marker".$id.", 'click', function() {
 marker".$id.".openInfoWindowHtml(html".$id.");
 });
 ";

 }
 echo "      }</script>";

Comme vous le constatez c’est un mélange de PHP et de JS, PHP pour récupérer les informations de la BDD et JS pour le traitement avec l’API.

Vous pouvez modifier les points par défaut googlemaps par des points personnalisés en ajoutant :

blueIcon.image = \"VotreImage\";

Après la ligne :

var blueIcon = new GIcon(G_DEFAULT_ICON);

On oubliera pas bien entendu de modifier le body onload de notre "index.php" en y ajoutant "show()" ce qui nous donnera :

<body onload="initialize();show();">

Nous en avons maintenant terminé avec l’API Googlemaps.

Encore une fois ( je me répète je sais ! ) si vous souhaitez plus d’informations ou aller un peu plus loin en matière de traitement des points affichés je vous invite à télécharger les sources ou à consulter la documentation officielle.

Je reste également à votre disposition si vous avez des questions bien entendu.