|
Intégration d'un observatoire urbain sur Google maps : cas des infrastructures de la santé de la ville de Douala( Télécharger le fichier original )par Rénal Paul TATSO Université de Douala - Master II en informatique appliquée aux systèmes d'informations géographiques 2010 |
CHAPITRE 5 IMPLEMENTATION DE LA SOLUTION5.1. OUTILS ET TECHNOLOGIES UTILISES 5.1.1. Architecture du système Nous présentons dans ce paragraphe de manière schématique le mécanisme de fonctionnement de notre plateforme. Echanges par Internet Client Serveur Web Serveur GoogleMaps
JavaScripts MySQL Http JavaScripts PHP ava, SQL ,ja.. Figure 23. Architecture de VisioCity Lorsqu'un client web se connecte à la plateforme via le protocole http, il peut solliciter l'affichage d'une carte géographique correspondant à un site géographique précis. Dans ce cas notre plate forme récupère les données liées à sa requête depuis la base de données MySQL, puis renvoie la requête vers le serveur Google Maps en passant par Internet qui renvoie aussitôt la carte correspondante vers le client. Le Client peut alors effectuer une interactivité sur la carte grâce aux fonctions JavaScripts coté client. Pour mettre en oeuvre cette architecture, nous avons eu besoin des outils suivants : Le serveur des données (SGBD) MySQL, Le serveur Web Apache, le serveur de script PHP tout ceci contenu dans un seul package XAMPP serveur. Pour le développement des interfaces nous avons utilisé l'environnement de développement MacromédiaDreamWeaver8. 5.1.2. Les serveurs de données (SGBD) Pour des raisons que nous avons déjà évoquées à l'introduction, fidèle à notre politique open source, parmi plusieurs SGBD existant, nous avons porté notre choix sur deux à savoir MYSQL et PostGreSql qui l'un comme l'autre peut bien faire le travail. Nous avons finalement choisi MySQL pour la seule raison du temps imparti pour la mise en oeuvre avant soutenance. Mais nous continuons à travailler pour que la future version soit directement compatible Posgresql/PostGis afin de pouvoir bénéficier de sa cartouche spatiale qui nous permettra facilement de développer en local un serveur alternatif de cartographie basé sur Mapserver. A titre de rappel, un SGBD dans une application a pour rôle de gérer (consulter, mettre à jour, organiser) une base de donnée. MySQL comme PostGresql est un SGBD qui offre plusieurs fonctionnalités allant du gestionnaire évolué des données pour le web au véritable gestionnaire des données de gestion d'entreprise. MySQL comme PostGresql présente les caractéristiques suivantes : - Libre et gratuit - Gestion d'importantes masses de données - Gestion des accès multiples et concurrents - Portabilité sur différents systèmes d'exploitation. - Gestion de la sécurité des données. - Existence de puissants outils d'administration graphique (phpmyadmin par exemple) - Gestion des exports et imports de données vers plusieurs types de fichiers. - Gestion des données relationnelles avec contraintes d'intégrité - Existence d'une couche spatiale MYGIS - Installation facile (Package xampp)
Figure 24. Environnement de programmation DreamWeaver 8. 5.1.3. Les serveurs web Il s'agit des serveurs permettant à des clients web d'accéder à l'application à partir de tout navigateur (exemple internet explorer). Installé sur leur poste connecté à internet/intranet distant du serveur. Un serveur web a donc pour rôle d'interpréter les requêtes http arrivant sur le port associé par défaut le port 80 et de fournir une réponse par le même protocole. Il existe plusieurs serveurs web sur le marché, parmi lesquels nous avons choisi pour son caractère libre et multiplateforme Apache ( www.apache.org). Apache est le serveur le plus répandu sur Internet. Son package d'installation est téléchargeable librement sur internet Outre le serveur Web Xampp permet d'installer le serveur des applications PHP. Ainsi que l'outil d'administration PhpMyAdmin.
Figure 25. Interface de PhpMyAdmin 5.1.4. Le serveur Google Maps Google Maps ( www.maps.google.fr) est un serveur gratuit de cartes géographiques et de plans en ligne fondé en 2005 aux USA. Il utilise des images satellites et des photographies aériennes de haute altitude pour une meilleure précision couvrant la totalité de la surface terrestre. Google Maps par ailleurs propose une API qui permet aux développeurs web par une bibliothèque de fonctions JavaScript et au format de fichier KML d'intégrer des cartes et de pouvoir créer des cartes personnalisées pour leurs applications. C'est cette opportunité que nous avons saisie pour intégrer à notre plateforme la cartographie basée sur Google Maps. La contrainte c'est que notre plateforme doit être connectée à Internet pour bénéficier de ces facilités. 5.1.5. les langages informatiques utilisés Pour le développement des interfaces nous avons utilisé les langages informatiques suivants : Notre plateforme étant basée sur la technologie web, nous avons utilisé : - Le Html pour la présentation des pages web - Le CSS (cascadind style sheet) pour le design des interfaces web - Le JavaScript pour le contrôle et la navigation sur les éléments des pages clients - KML (Keyole Markup Language) pour le marquage et la mise en forme des polygones de notre cartographie. - Le PHP pour l'interaction entre les clients et le serveur d'une part, et entre le serveur et la base de donnée et surtout pour les échanges entre notre plateforme et Google Maps. Via la classe de manipulation des fonctions JavaScript. - Le SQL pour l'interrogation et la manipulation des données avec le SGBD. - Ajax (Asynchronous JavaScript and XML) qui est un mélange de technologie est également intervenu aussi bien entre le serveur et les clients qu'entre le serveur et Google Maps. 5.2. IMPLEMENTATION DE LA SOLUTION 5.2.1. Environnement de développement Nous avons travaillé avec l'environnement matériel suivant : - Un ordinateur de marque HP dx2300 core duo 1.80Gz, 2Go Ram Windows Xp SP2 - Package Xampp installé (apache, php5, MySQL, phpmyadmin) - Macromédia Dreamweaver 8 - Internet explorer 8 5.2.2. Création de la base de données Notre schéma physique se présente comme suit :
Figure 26. Schéma relationnel de la base de données Comme vous pouvez le constater, il existe deux tables indépendantes site_tempon et abonne, en effet ces deux tables ne sont que des duplicata des tables site_geo et utilisateur qui servirons à stocker les informations en attente de validation.
Tableau 3 : Dictionnaire des entités du modèle des données L'ensemble des scripts de création de la base de données est donné en annexe. 5.2.3. Création des interfaces hommes/machine A l'aide de L'API Macromédia Dreamweaver 8 nous avons pu écrire des scripts PHP, JavaScript et kml nécessaires à notre application. C'est un environnement convivial de programmation. Nous vous présentons ici les principaux scripts ecrits: - Le module de traitements avec la base de données (ModuelBd.php) Ce fichier contient tous les codes sources d'accès à la base de données pour insertion, modification et suppression des données. Exemple pour la table site_geo on a le code suivant : function AjoutSiteGeo($Lib_Site, $Longitude, $Latitude, $Categorie, $Nb_Medecin,$Nb_Lits,$Zone_Geo,$Couche_Geo,$Contact) { $Zone_Geo=GetZoneCode($Zone_Geo); $Couche_Geo=GetCoucheCode($Couche_Geo); $Contact=formatData($Contact); $Lib_Site=formatData($Lib_Site); $Categorie=formatData($Categorie); $requete="INSERT INTO `site_sanitaire` (`Libelle_Site`, `Longitude` , `Latitude` , `Categorie`, `Nbre_Medecin`, `Nbre_Lits`,`Zone_Geo`,`Couche_Geo`,`Contact`) VALUES ('$Lib_Site','$Longitude' ,'$Latitude','$Categorie','$Nb_Medecin','$Nb_Lits','$Zone_Geo','$Couche_Geo','$Contact');"; if (!($rep=mysql_query($requete))) { $mes=mysql_error(); $message="Enregistrement non effectuée".$mes; return $message;} else {$message="Enregistrement effectué avec succès"; return $message; } } Cette fonction permet d'insérer dans la base de données les informations d'un objet de type Site_Geo. Pour les modifications on a : function ModSiteGeo($Lib_Site, $Longitude, $Latitude, $Categorie, $Nb_Medecin,$Nb_Lits,$Zone_Geo,$Couche_Geo,$Contact,$Code) { $Zone_Geo=GetZoneCode($Zone_Geo); $Couche_Geo=GetCoucheCode($Couche_Geo); $Lib_Site=formatData($Lib_Site); $Categorie=formatData($Categorie); $requete="UPDATE `site_sanitaire` SET `Libelle_Site`='$Lib_Site' , `Longitude`='$Longitude' , `Latitude`='$Latitude', `Categorie`='$Categorie',`Nbre_Medecin`='$Nb_Medecin',`Nbre_Lits`='$Nb_Lits',`Zone_Geo`='$Zone_Geo',`Couche_Geo`='$Couche_Geo',`Contact`='$Contact' WHERE `Code_Site`='$Code' "; if (!($rep=mysql_query($requete))) { $mes=mysql_error(); $message="Il ya eu un problème lors de la mise à jour ".$mes; return $message;} else {$message="Mise à jour effectuée avec succès"; return $message; } } function SupSite($Code) { $sql = "DELETE FROM site_sanitaire WHERE Code_Site= '$Code';"; if ($rep=mysql_query($sql)) { $message = "Suppression effectué avec succès!"; return $message; } else { $mes=mysql_error(); $message = "Un problème est survenu lors de la suppression! ".$mes; return $message; } } Nous avons développé comme ça pour toutes les tables - Les fonctions de mise en forme et de contrôle Ces fonction écrites en PHP, JavaScripts sont situées dans les fichiers fonction.php et fonction.js, elles permettent d'effectuer des contrôle spécifiques comme par exemple les alertes ou le formatage de la date défini par : En php. Côté serveur function FormatDate($date) { list($jour, $mois, $annee)=explode("/", $date); if($annee>2000) $annee=substr($annee, 2, 2); // ramene l'annee en deux chiffres return $jour."/".$mois."/".$annee; } En javascript. Coté client. function Sup() { if(!confirm("Attention voulez vous vraiment supprimer cet element de votre base de donnée?")) { return false; } return true; } - Les scripts d'interfaçage Interface d'enregistrement des sites géographiques
Figure 27. Formulaire d'enregistrement des sites géo Le code source des traitements se présente comme suit : if(isset($_POST["Valid_Site"])) { require_once('ModuleBD.php'); //récupération des données en provenance du formulaire client $Lib_Site=$_POST['Lib_Site']; $Categorie=$_POST['Categorie']; $Latitude=$_POST['Latitude']; $Longitude=$_POST['Longitude']; $Couche=$_POST['Couche']; $Zone=$_POST['Zone']; $Nb_Lits=$_POST['Nb_Lits']; $Nb_Medecin=$_POST['Nb_Medecin']; $Contact=$_POST['Contact']; $mess=AjoutSiteGeo($Lib_Site, $Longitude, $Latitude, $Categorie, $Nb_Medecin,$Nb_Lits,$Zone,$Couche,$Contact); $Action="Création du site geo".$Lib_Site; $m=Journal ($LOGIN, $Action,$COUCHE); } if(isset($_POST["Mod_Site"])) { require_once('ModuleBD.php'); //recuperation des données en provenance du formulaire lié $Lib_Site=$_POST['Lib_Site']; $Categorie=$_POST['Categorie']; $Latitude=$_POST['Latitude']; $Longitude=$_POST['Longitude']; $Couche=$_POST['Couche']; $Zone=$_POST['Zone']; $Nb_Lits=$_POST['Nb_Lits']; $Nb_Medecin=$_POST['Nb_Medecin']; $Contact=$_POST['Contact']; $Code=$_POST['Code_Site']; $mess=ModSiteGeo($Lib_Site, $Longitude, $Latitude, $Categorie, $Nb_Medecin,$Nb_Lits,$Zone,$Couche,$Contact, $Code); $Action="Modif du site geo".$Lib_Site; $m=Journal ($LOGIN, $Action,$COUCHE); } Ce code permet de récupérer les infos issues du formulaire afin de les insérer dans la base de données ou de modifier la base de données 5.2.4. Classe PHP de connexion à Google Maps Comme nous l'avons vu un peu plus haut, Google Api a mis à la disposition des développeurs une bibliothèque de fonction JavaScript permettant de personnaliser les cartes et les afficher dans leurs applications. Nous avons exploité en personnalisant une classe php appelé GoogleMapAPI basée sur les fonctions JavaScript de l'API Google Maps . Nous présentons ici cette classe et ses principales fonctions - Le constructeur $map=new GoogleMapAPI() - La fonction qui definit le centre de la carte par adresse $gmap->setCenter('Deido Cameroun'); - La fonction qui définit la taille de la carte en pixels $gmap->setSize('690px','650px'); - La fonction qui définit le niveau du zoom par défaut $gmap->setZoom(11); - La fonction qui défini la langue d'affichage de la carte $gmap->setLang('fr'); - La fonction qui construit un tableau de marqueurs par coordonnées sur la carte en provenance de la base des données. $coordtab []=array($Longitude,$Latitude,$Lib_Site,'<strong>'.$Lib_Site.'<br><h5>Cat:'.$Categorie.'<br>Nbre Medecin:'.$Nb_Medecin.'<br>Nbre Lits:'.$Nb_Lits.'<br>Contact:'.$Contact .' Douala</h5></strong>'); $gmap->addArrayMarkerByCoords($coordtab, $Categorie); - La fonction qui génère la carte $gmap->generate(); - La fonction qui affiche finalement la carte echo $gmap->getGoogleMap(); Le code complet est présenté à l'annexe 2 5.3. RESULTAT OBTENU Nous avons réussi à mettre au point une application de webmapping client serveur web basée sur JavaScript, PHP, MySQL et Google Maps API Nommée VisioCity 1.0. Nous présentons dans ce paragraphe les principales fonctionnalités de cette application. 5.3.1. Sécurité d'accès Pour assurer la sécurité des informations privées de la plateforme, nous avons mise en oeuvre les 03 facteurs de sécurité informatique suivants : - Authentification Tout utilisateur de l'espace privé doit être authentifié par login et par mot de passe crypté. - Traçabilité Tous les traitements effectués dans la base de données gardent les traces sur l'heure, l'utilisateur, la date et le traitement effectué dans un mouchard assuré par la fonction automatique « Journal() ». - Intégrité Les utilisateurs n'ont droit qu'aux informations correspondantes à leur profile. Ainsi, l'administrateur à droit à tout, le décideur ne peut créer ni supprimer un utilisateur. Tandis que qu'un abonné ne peut que proposer un site géographique.
Figure 28. Formulaire de contrôle d'accès 5.3.2. Espace public Cet espace est accessible par tous les visiteurs, Il présente la carte et tous les outils de navigation sur celle-ci. Il est organisé comme suit : - L'entête portant les informations générales - La colonne de gauche portant les outils de navigation suivant les thèmes choisis - La colonne principale celle du milieu contenant la carte de la ville et les outils de manipulation de cette carte. - La colonne de droite présente en texte l'ensemble des informations issues de la base de données sur les sites géographiques enregistrés. L'image ci après représente la capture d'écran de cet espace.
Figure 29. Interface publique de visiocity 5.3.3. Administration C'est dans cette interface que toutes les tâches administratives sont effectuées notamment, la création, la modification ou la suppression des éléments comme les couches géographiques, les zones et sites géographiques. C'est aussi ici que les utilisateurs de l'espace privé sont créés ou validés. Le décideur a droit à la seule fonctionnalité de créer de nouveaux sites géographiques, le reste étant réservé uniquement à l'administrateur de Visio City. La capture de l'écran suivante présente un aperçu de cette interface.
Figure 30. Interface d'administration de visiocity 5.3.4. Accès membres Les membres ou abonnés sont des personnes enregistrées ayant un login et un mot de passe qui leur permettent de proposer des sites géographiques pour visioCity qui ne seront valides que s'ils sont acceptés par l'administrateur ou par le décideur. Pour devenir membres, les visiteurs s'abonnent via un formulaire d'enregistrement. Une fois enregistrés, ils devront attendre la validation par l'administrateur ou par le décideur. Ce n'est qu'après validation de l'abonnement que le visiteur devient membre et par conséquent commence à bénéficier de toutes les prérogatives de membre.
Figure 31. Interface d'abonnement de VisoCity 5.4. ACQUISITION DES DONNEES 5.4.1. Récepteur GPS utilisé Pour les données test nous nous sommes équipés d'un récepteur GPS de marque GARMIN notamment le GPS Garmin Oregon 550T, Pour recueillir sur le terrain la géolocalisation des sites qui alimentent notre base de données. En effet, grâce à son récepteur GPS haute sensibilité et d'un système de prévision par satellite HotFix, Oregon 550t calcule rapidement et avec une grande précision de l'ordre de quelques mètres (5à 6m pour notre cas) les positions géographiques en longitude et latitude. L'avantage de ce récepteur GPS est qu'il fournit les résultats sur tous les formats désirés dont directement exploitable par VISIOCITY et Google Maps. L'image ci-dessous est celle de notre récepteur.
Figure 32. GPS GARMIN OREGON 550t 5.4.2. Résultats Pour cette phase de travail, nous nous sommes limités aux données purement géographiques, les autres informations pouvant être complétées par les utilisateurs.
Tableau 5 : Tableau des données obtenues 5.5. BILAN DU STAGE Lorsqu'on nous a confié ce thème portant sur le webmapping, au début il était vague et difficile à comprendre les possibilités de mise en oeuvre. Nous avons commencé par bien analyser la problématique posée, puis nous nous sommes engagés dans des recherches bibliographiques sur internet (resté notre principale source de documentation). Nos recherches nous ont placées devant toute une panoplie de solutions technologiques pouvant prétendre satisfaire au problème posé. Très tôt nous avons compris les limites de la plupart de ces solutions, et les avantages qu'il y avait à mettre en place une plateforme de webmapping qui communique parfaitement avec googlemaps pour répondre à la problématique. En effet, avec la riche expérience de GoogleMaps et sa base de cartographie riche en informations de base triplée à son sens de professionnalisme, un observatoire urbain qui y puise le fond de sa cartographie bénéficie des richesses du patrimoine cartographique de ce géant technologique. En plus, nous avons pris connaissance des possibilités que Google offre aux développeurs, de pouvoir programmer des applications qui communiquent avec sa base cartographique. Cette expérience nous a permis de nous former aux nouveaux outils de développement du webmapping. Par ailleurs pour l'acquisition des données par GPS, à cause du temps nous n'avons pas pu effectuer le tour complet de tous les sites de santé. Nous nous sommes limités à une dizaine de sites pour expérimenter notre plateforme. Qu'à cela ne tienne, le plus dur du travail ayant été effectué, la base de données peut être renseignée à tout moment. |
|
