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.

1. Création du champ de recherche

Ouvrez votre page "geolocalisation.php" et collez y le code suivant :

// Formulaire d'affichage "zoom sur carte" d'une adresse
<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">
<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Explications :

<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">

On ouvre notre formulaire avec aucune action afin de ne pas recharger la page du navigateur pour rien. Pour appeler notre fonction javascript on fait un "onsubmit=showAddress()" avec en paramètre "this.adress.value", ce qui correspond a la valeur du champ "address".

<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Ici simple mise en forme du champ de recherche, simplement ne pas oublier de mettre name="address" a notre text-input.

C’est terminé pour cette page, passons maintenant à "geolocalisation_javascript.php".

2. Fonction JS de recherche

On va créer la fonction qui permettra à l’API de zoomer sur l’adresse demandée. Nous appellerons cette fonction "showAddress()". Avant de commencer, sachez que ma fonction est inspirée de la doc de L’API Google Maps, vous y trouverez facilement d’autres exemples.

Ouvrez la page "geolocalisation_javascript.php" et collez y le code suivant. Attention, n’oubliez pas de placer tout ce code entre les balises "<script type="text/javascript">" et "</script>".

function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 11);
            }
          }
        );
      }
    }

Explications :

function showAddress(address) {
 if (geocoder) {

On créer donc notre fonction "showAddress()" avec un paramètre appelé ici "address", puis on vérifie si l’API est bien chargée via la variable "geocoder".

geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 map.setCenter(point, 11);
 }
 }
 );
 }
 }

On demande simplement à l’api via la methode "geocoder.getLatLng" de récuperer la longitude et la latitude de notre adresse. Si l’adresse n’existe pas, on ouvre une fenêtre d’erreur en JS ( libre à vous de faire ca plus proprement ) afin d’afficher à l’utilisateur que son adresse n’est pas bonne. Si l’adresse existe, on zoom sur la carte via "map.setCenter(point, 11);", le premier argument étant notre position recherchée et le 2eme le niveau de zoom appliqué.

C’est terminé pour cette étape 2 ! Essayez donc d’entrer une adresse dans le champ de recherche, la carte devrait automatiquement ce centrer dessus.

N’oubliez pas qu’un complément de documentation est disponible dans la doc officielle.

Dans la 3eme étape, nous verrons comment stocker les données nécessaires à l’affichage dans une base de données de type MySQL.

A bientôt !

1. Création des fichiers necessaires

Voici la liste des fichiers qui seront nécessaires dans ce tutoriel :

• index.php – Notre index, il contiendra les fonctions nécessaires et appellera les différentes pages.
• geolocalisation_javascript.php – Ce fichier contiendra les fonctions javascript pour le fonctionnement de l’API.
• geolocalisation.php – Notre carte.
• ajout.php – Cette page permettra l’ajout à la base de données de nouvelles adresses.
• mysql_connect.php – Notre fichier de connexion à la base de données MySQL.

Vous pouvez directement télécharger les sources ici.

2. Générer une "API key" pour son site

Pour utiliser librement Googlemap sur votre site, vous devez dans un premier temps générer une clé ici. Cette clé nous servira a "authentifier" notre site lors de l’initialisation de l’API. Commençons donc par rajouter le javascript permettant d’utiliser l’api à notre fichier "index.php" entre les balises <head> et </head> :

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=YOURKEY" type="text/javascript"></script>

Remplacez YOURKEY par la clé que nous avons généré.

On va également en profiter pour inclure la page qui contiendra tout le code javascript :

<?php include("geolocalisation_javascript.php");?>

Pour terminer, on va ajouter un moyen de naviguer entre nos deux pages principales ( Ajout d’un point via « ajout.php » & Affichage de la carte via "geolocalisation.php" ) entre les balises <body> et </body> :

<ul>
<li><a href="index.php?page=geolocalisation">Geolocalisation</a></li>
<li><a href="index.php?page=ajout">Ajout</a></li>
</ul>
<?php
 if ($_GET['page'] == 'geolocalisation') { include("geolocalisation.php"); }
 elseif ($_GET['page'] == 'ajout') { include("ajout.php"); }
 else { }
?>

Rien de bien compliqué ici, c’est assez basique, si vous possédez déjà un site et que vous procédez à une intégration de googlemap, vous pouvez sauter cette étape.

3. Initialisation et affichage de la carte

Pour le moment, vous ne voyez rien et c’est tout à fait normal. On va voir comment initialiser la carte une fois l’authentification avec la key reussie.

On va commencer par le fichier "geolocalisation.php" qui je vous le rappelle est le fichier ou la carte sera affichée. Editez donc ce fichier et collez y le code suivant :

<h1>G&eacute;olocalisation</h1>
<h2>Carte</h2>
 <div id="map_canvas" style="width: 700px; height: 350px;margin-top:5px;"></div>

Je vous passe le détail de la ligne 1 et 2 c’est de la simple mise en page.

Passons a la ligne

<div id="map_canvas" style="width: 700px; height:  350px;margin-top:5px;"></div>

On créer une div avec comme id "map_canvas", cette id indiquera a la fonction JS d’afficher la map dans cette div. On lui attribue ensuite une taille, ici 700px de large pour 350px de haut. Une petite marge au dessus pour la mise en page et c’est terminé !

Passons ensuite aux choses serieuses. Ouvrez votre fichier "geolocalisation_javascript.php" et collez y le code suivant je vous l’expliquerai juste en dessous :

<script type="text/javascript">

 var map = null;
 var geocoder = null;
 var marker;

 function initialize() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map_canvas"));
 geocoder = new GClientGeocoder();
 map.setUIToDefault();
 }

</script>

Explications :

<pre> var map = null;
 var geocoder = null;
 var marker;

Simple initialisation de variables qui nous serviront dans les fonctions JS.

function initialize() {

On créer une nouvelle fonction que l’on appelle "initialize()"

if (GBrowserIsCompatible()) {

Vérification si le browser est compatible… Si ce n’est pas le cas, je vous laisse gérer l’affichage d’un petit message d’erreur .

map = new GMap2(document.getElementById("map_canvas"));

C’est ici que l’on va demander au code JS de créer la carte de de l’afficher dans la div que l’on a créer précédemment, d’où l’importance de définir une ID à notre div.

geocoder = new GClientGeocoder();

Créer une nouvelle instance de Geocoder, cela nous permettra d’envoyer des requêtes aux serveurs Google Map.

map.setUIToDefault();

Utilisation de l’interface de navigation de base de Google Map.

Voila ! Rendez-vous sur votre index.php, cliquez sur géolocalisation et si tout va bien, vous devriez obtenir le résultat suivant :

Félicitations ! Nous verrons dans la prochaine étape comment ajouter un champ de recherche afin de zoomer sur une partie de la carte. D’ici la, n’hésitez pas à consulter les sources!

Sa première partie traitant de l’initialisation et de l’affichage de la carte sera disponible en début de soirée, le temps pour moi de rédiger une explication claire du code. Ce dernier à été réalisé lors de mon Projet BTS ou il m’a été demandé de réaliser un site pour une plateforme du reseau ATMO Lorraine Nord, organisme qui contrôle la qualité de l’air en Lorraine. Le visiteur devait via le site pouvoir déposer une plainte suite à la pollution et consulter la carte avec une visualisation des dernières plaintes.

Pour ce tutoriel, tous les styles ont été supprimés afin de simplifier le code au maximum.

En attendant, vous pouvez d’ores et déjà télécharger les sources complètes directement sur notre site.

Vous y retrouverez l’actualité des nouvelles technologies web, des tutoriels en PHP, CSS et XHTML ainsi que nos dernières créations.

Le site vient à peine d’être mis en ligne, je vais essayer d’ajouter du contenu dans les prochaines heures.