rapport fin d'etude

MINISTÈRE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE
SCIENTIFIQUE
Université de Monastir
Institut Supérieur d'Informatique et de Mathématiques de Monastir
PROJET DE FIN D'ETUDES
En vue de l'obtention de la Licence Appliquée en Informatique de Gestion
Application web de Géo localisation et de recherche
au profil de FRAME Orange Tour Tunisie
Encadré par : Membre de jurys :
- Melle Ben Dhiaf Zouhour - Mm Bali Nadia
- Mm Tilouch Amel
Réaliser Par :
Dhiabi Hajer & Ben Brahim Sihem
Année universitaire : 2011-20112

Dédicace1
Je dédie ce
modeste travail à ceux que personne ne peut compenser les
sacrifices qu’ils
ont consentis pour mon bien être :
A mes chers parents
Vous m’avez donné la vie, la tendresse et le courage pour réussir.
A ma famille et en particulier à mon oncle Driss vous êtes
toujours l’épaule solide et l’oreille attentive et compréhensive.
A mes chères amies :
Besma, Tahani, Sahouma, Noussa, Amira, Zeineb,…
A mes chers amis : Majdi, Mohamed, Wassim, Walid, Mahdi,…
A vous LA3 INFO GESTION
Vous m’avez toujours soutenue et entourée d’amour et d’affection.
A tous ceux qui m’ont aidée à surmonter les difficultés et m’ont
encouragée pour arriver jusqu’aux bout, dans les meilleur
Conditions possibles
A touts qui m’aime
DHIABI HAJER
Dedicace2
A ma très chère mère « Souad » :
Autant de phrases aussi expressives soient-elles ne sauraient montrer le degré
d’amour et d’affection que j’éprouve pour toi.
Tu m’as comblée avec ta tendresse et affection tout au long de mon parcours.

Tu n’as cessé de me soutenir et de m’encourager durant toutes les années de mes
études, tu as toujours été présente à mes cotés pour me consoler quand il fallait.
En ce jour mémorable, pour moi ainsi que pour toi, je te dédie ce travail en signe
de ma vive reconnaissance et ma profonde estime.
Puisse le tout puissant te donner santé, bonheur et longue vie à fin que je puisse
te combler à mon tour.
A mon cher petit frère « Ahmed» :
En souvenir d’une enfance dont nous avons partagé les meilleurs et les plus
agréables moments.
Pour toute la complicité et l’entente qui nous unissent, ce travail est un
témoignage de mon attachement et de mon amour.
Que Dieu te réserve un avenir radieux et une longue vie pleine de santé, de succès
et de bonheur.
A Ma chère grande mère « Omi ZINA »
Que ce modeste travail, soit l’expression des vœux que vous n’avez cessés de
formuler dans vos prières.
Que Dieu vous préserve santé et longue vie.
A Mes oncles et mes tantes
Mes cousins et mes cousines
Je vous dédie ce travail en témoignage de ma profonde affection.
Que dieu vous procure santé et bonheur.
A mes chères «Achoik, Rabeb , Imen,et Nesrine» :
Pour l’amitié sincère et l’affection profonde que nous partageons, pour tous les
moments heureux que nous avons passés ensemble.
J’implore Dieu le tout puissant de vous accorder bonne santé et longue vie.
A mon cher binôme « Hajoura » :
Pour ta grande collaboration dans la réalisation de cette étude. Que tu trouves
dans ce travail l’expression de ma sincère reconnaissance.
Que Dieu te garde et t’accorde plus de bonheur, santé et succès.
Ben brahim Sihem

Remerciement
ous remercions dieu de nous avoir donnée la santé et le courage a fin de
pouvoir réussir ce travail.
Au terme de ce projet de fin d’études, Nous tenons à remercier Melle Ben
Dhief Zouhour, Maître assistant à l’ISIMM pour son suivi et ses remarques qui nous ont
permis de mener à bien ce travail.
Nous adressons nos sincères remerciements à Madame Afef ….. Chef de division à Frame
Orange Tour Tunisie, pour nous avoir proposé ce projet et pour son encadrement.
Nous remerciements s’adressent également à l’administration et aux professeurs de
L’ISIMM pour les moyens qu’ils ont mis à notre disposition afin d’élaborer ce travail.
Nous tenons à exprimer nos sincères gratitudes aux membres de notre jury, Mme. Nadia Bali et
Mme. Tilouch Amel qui acceptant d’évaluer ce projet de fin d’études.
Nous souhaitons exprimer enfin notre gratitude et nos vifs remerciements à nos
familles et nos amis pour leur soutien.
HAJER & SIHEM
Résumé
Ce projet de fin d’études vise la réalisation d’une application web de géo localisation
et de recherche au profil de la société FRAME. Ce projet à fin d’améliorer la qualité
de service de la société il présente un espace aux visiteurs du site qui contient des
N

informations utile et une présentation des cartes à partir Google map, ainsi qu’il lui
offre un espace des commentaires…
Titre de projet : Application web de Géo localisation et de recherche au profil de FRAME
Orange Tour Tunisie
Les mots clé : géo localisation, map, Ajax, HTML, UML, référencement,…
Table de matière
Dédicace1
Dedicace2
Remerciement
Résumé
Table de matière
Liste de figure
Liste des tableaux
Introduction générale.............................................................................................1
Chapitre I : présentation du sujet...........................................................................2
I.1. Introduction 2

I.2. présentation de l’organisme d’accueil 2
I.2.1.Historique 2
I.2.2.Présentation de structures FRAM 2
I.3. Travail demandé détaillé 3
I.4. Etude de l’existant 4
I.4.1.Exemples de sites de géo localisation reconnus : Site Dismoioù 4
I.4.2 Etude de l’existant 6
I.4.2.1.Critique de l’existant 7
I.4.2.2.les améliorations proposé 8
I.5. Conclusion 9
Chapitre II : Spécification et étude préalable........................................................9
II.1. introduction 10
II.2. Spécification des besoins 10
II.2.1.Besoins fonctionnelles 10
II.2. 2 .besoins non fonctionnelles 10
II.2.3. Spécification semi-formelle des besoins 11
II.3. Conclusion 23
Chapitre III : conception......................................................................................24
III.1. Introduction 24
III.2. Conception de l’application 25
III.2.1. Description de la vue statique 25
III.2.3.Dictionnaire de données 29
III.3. Conclusion 30
ChapitreIV : les outils de Google........................................................................31
IV.1. Introduction 31
IV.2.les outils de Google31
IV.2.1 : Google map 31

IV.2.2.Google Map Maker 33
IV.2.3. Google Adresses (Google Places) 34
IV.3.API Google Map 35
IV.4.Mashup 36
IV.4.1.Définition :36
IV.4.2.Comment créer un Mashup 36
IV.4.3.Quels sont les Mashup les plus populaires 36
IV.5. Conclusion 37
Chapitre V:Réalisation ........................................................................................37
V.1. Introduction 37
V.2. Environnement de travail 38
V.2.1 : Environnement logiciel 38
V.2.2.Environnement matériel 41
V.3. Référencement 41
V.4. Présentation du site 43
V.5. Conclusion 55
Conclusion...........................................................................................................55
Bibliographie.......................................................................................................56
Annexe.................................................................................................................56
Liste de figure

Figure 1:interface du site dis moi ou....................................................................................................... 5
Figure 2:interface commentaire de le site dis moi ou.............................................................................. 6
Figure 3:interface de le site site dis moi ou (carte).................................................................................. 6
Figure 4 interface du site FRAME .......................................................................................................... 7
Figure 5:diagramme de cas d’utilisation générale................................................................................. 14
Figure 6: Diagramme de cas d’utilisation : « identification» ................................................................ 16
Figure 7: Diagramme de cas d’utilisation : « gérer les informations» .................................................. 17
Figure 8:Diagramme de classe : « saisir commentaire »....................................................................... 18
Figure 9:Diagramme de cas d’utilisation : « recherche »...................................................................... 19
Figure 10:diagramme de séquence : identification................................................................................ 21
Figure 11:Diagramme de séquence : « saisir commentaire »................................................................ 22
Figure 12: Diagramme de séquence : « gérer les information (gérer carte) » ....................................... 23
Figure 13:Diagramme de classe ............................................................................................................ 26
Figure 14:Modèle conceptuel de données ............................................................................................. 27
Figure 15: modèle physique des données(MPD)................................................................................... 28
Figure 16:page d’accueil de Google Map ............................................................................................. 32
Figure 17: Exemple d’un Itinéraire dans Google Maps ........................................................................ 33
Figure 18: Example Google Street View dans Google Maps(Paris)..................................................... 33
Figure 19: Interface du Google marker ................................................................................................. 34
Figure 20: page d’accueil de Google adresses ...................................................................................... 34
Figure 21: page d’accueil de Google Maps API .................................................................................. 35
Figure 22:Mashup Google Maps : MarineTraffic.com ......................................................................... 36
Figure 23: Schéma du fonctionnement d'Ajax ...................................................................................... 40
Figure 24:page d'accueil du site ............................................................................................................ 44
Figure 25:mode connecté de l'administrateur........................................................................................ 45
Figure 26:mode non connecté ............................................................................................................... 46
Figure 27:page de carte ......................................................................................................................... 47
Figure 28:carte hôtel.............................................................................................................................. 48
Figure 29:page carte (les commentaires)............................................................................................... 49
Figure 30:recherche par mot clé............................................................................................................ 50
Figure 31:page recherche par catégorie................................................................................................. 51

Figure 32:paage recherche par chambre................................................................................................ 52
Figure 33:page recherche par prix......................................................................................................... 53
Figure 34:page contact .......................................................................................................................... 54
Liste des tableaux
Tableau 1: Structure de la table client ................................................................................................... 29
Tableau 2: structure de table administrateur ......................................................................................... 29
Tableau 3: structure de la table chambre............................................................................................... 30
Tableau 4: structure de table key word.................................................................................................. 30
Tableau 5: Structure de la table client ................................................................................................... 30

Dhiabi Hajer & Ben Brahim Sihem Page 1
Introduction générale
Dans nos jours, les entreprises entretiennent de nouvelles relations avec le client et offre plus
de possibilité.
En effet, certaines services nécessite (il ya quelque années) le déplacement du client vers
l’agence ou l’entreprise sont faisable de nos jours à distance grâce aux manuelles technologies
et à internet.
D’autre part une convivialité de l’interface devienne de plus en plus nécessaire pour améliorer
la relation avec le client et offre plus de possibilité à travers le site de l’entreprise, ainsi
l’indication des lieux sur la carte (points de vente, hôtels, restaurant,…etc.) est important.
C’est dans cette prospection que des sites existants tels que le site française Dis moi où.
Dans le cadre de notre formation en vue de l’obtention nous avons effectué un stage de quatre
mois à l’entreprise « FRAME ». Le sujet principal de notre stage de fin d’étude est la
localisation et le référencement d’un site de géo localisation des hôtels et des restaurants à
partir de la base de données disponible de « FRAME » afin de permettre un accès plus rapide
et plus ciblé à l’information, et avec possibilité de marquer la présence du client à partir de
son avis avec l’avantage d’une mise à jour pratique, rapide et simple.
Le présent rapport est articulé autour de 5 chapitres :
Le premier chapitre introduit le cadre général de la société, le cahier des charges, notre
méthodologie de développement ainsi que l’étude de l’existant et la problématique.
Dans le deuxième chapitre, nous décrivons la spécification des exigences fonctionnelles et
non fonctionnelles et de l’ensemble des diagrammes relatif à l’application du projet.
Le troisième chapitre décrit les outils de Google Map utilisés pour la réalisation de notre
application.
En fin, le quatrième chapitre décrira les étapes de notre réalisation. Pour cela nous présentons
le développement et son environnement, le travail effectué et les résultats obtenus.

Chapitre I : présentation du sujet
I.1. Introduction
Nous commençons par la présentation du cadre général du projet et son domaine.
Suivi en deuxième lieu par la présentation de la société FRAME, le ou ce projet a vu le jour.
Nous exposons en dernier lieu le cahier des charges.
I.2. présentation de l’organisme d’accueil
Il s’agit de l’agence de voyage « FRAME Orange Tour Tunisie » :
*Fondation : « FRAME Orange Tour Tunisie» a été crée par Monsieur Mohamed Ali Guerdouar le
01/09/2005.
.*Siège social : B.P.16, COMPL.MONASTIR 5000 MONASTIR
*Téléphone : 73448308 73448309
*Fax : 73448201
*E-mail : dirg@framott.com
*Site web: www.frameorangetourtunisie.com.
I.2.1.Historique
Créée en 1990, FRAM Orange Tour Tunisie est la filiale réceptive du groupe FRAM.
Elle est une société privée de caractère touristique. Son siège est à Monastir, elle possède une
succursale à Djerba et des filiales à Tunis, Hammamet et Tozeur.
I.2.2.Présentation de structures FRAM

Elle se compose de deux directions :
1. Direction générale.
2. Une direction administrative et financière (DAF) qui est gérée par un directeur et une
secrétaire.
3. Service comptabilité qui est gérée par un chef comptable et aide comptable.
4. Secrétariat qui est géré par un financier.
5. Direction commerciale (service commerciale) : qui est dirigée par un directeur commerciale
et comporte quatre services
6. Service commerciale : qui est géré par un hachée commerciale.
7. Service qualité : qui est géré par un responsable qualité.
8. Service d’animation : qui est géré par un coordinateur d’animation.
9. Service informatique : qui est géré par un responsable informatique.
En plus une agence de voyage (Filiale FOTT ; Succursale FOTT) qui est répartie sur
quatre agences : Agence Djerba, Agence Tozeur, Agence Hammamet et Agence Monastir.
Chaque agence comporte cinq bureaux :
1. Bureau d’ordre qui est géré par un secrétaire liaison.
2. Bureau de transport qui est géré par deux agents de transport.
3. Bureau de tourisme qui est géré par un agent de tourisme.
4. Bureau de caisse qui est géré par une caissière.
I.3. Travail demandé détaillé
1. Etude :
*l’interface du site de FRAME
*un état de l’art sur les outils de Google et leurs utilisations dans des sites reconnus.
2. Conception :
*démarche conceptuelle.
*description de la base de données du société FRAME Orange Tour.
3. Les outils de Google :

* la fonctionnalité de chaque outil de Google (Google map, Google marker, ainsi que Google
adresses).
*présenter les différentes interfaces de chaque outil.
4. Réalisation :
*réalisation de l’interface de notre application.
*réalisation de l’application de géo localisation.
* Référencement du site FRAME.
* développement des codes en arrière plan.
5. Test :
*test et validation des pages
*test et validation des liens.
*test et validation des cartes.
I.4. Etude de l’existant
I.4.1.Exemples de sites de géo localisation reconnus : Site Dismoioù
Nous nous intéressons en premier lieu au site « Dismoioù » qui se trouve à
l’adresse suivant : http://dismoiou.fr/.
Dismoioù est bien plus qu’un annuaire. C’est un site communautaire par
excellence, Dismoioù le premier site communautaire d’informations locales français
basé sur l’API Google Maps.
Dismoioù est une encyclopédie conviviale et collaborative des lieux, répartis
selon 17 thématiques couvrant l’ensemble des domaines de la vie de tous les jours.
I.4.1.1. Partie graphique du site

Figure 1:interface du site dis moi ou
Dans ce site, on observe que :
1. L’interface est bien organisée.
2. L’écriture est bien choisie d’un paragraphe à une autre.
3. Des titres sont écrits avec des formes différentes.
4. Interface riche.
5. Données simple a comprendre.
I.4.1.2. Partie technique du site
On remarque que les services présentés par ce site sont parfaite puisqu’il offre au client
plusieurs bénéfices :
1. vous permet de trouver les bonnes adresses proposées et commentées par les utilisateurs du
site.
1. Le site offre aux visiteurs un espace facile contenant touts informations utiles pour les
restaurants ou les hôtels et des autres services à chaque place en France.
2. Mon avis : DisMoiOù sait s’améliorer au fil des versions, en offrant une vraie interaction entre
ses utilisateurs.

Figure 2:interface commentaire de le site dis moi ou
1. Les utilisateurs on le droit de voir la carte global de la France selon le choix de l’utilisateur
(carte des hôtels ou carte des restaurants, carte coiffeurs,…etc.).
Figure 3:interface de le site site dis moi ou (carte)
2. Dismoiou héberge une base de données en ligne d’avis écrits par les membres sur tous les
commerces locaux en Europe. Tel que chaque membre peut également contribuer
activement à la vie communautaire du site. Mais a cause de la difficulté d’accès a leurs fiche
technique et leurs code source nous avons réalisé ce site pour la société tunisien Frame
orange tour qui représente un petit prototype du ce site (Dismoioù).
I.4.2 Etude de l’existant

Le domaine touristique subit un grand développement pendant les dernières années
puisqu’il offre des services en ligne dans le but d’assurer le confort aux clients mais ceci
n’empêche pas que quelque support de défaillances.
I.4.2.1.Critique de l’existant
Nous nous intéressons en premier lieu au site « Frame orage tour » qui se trouve à l’adresse
suivant : www.frameorangetourtunisie.com (voir figure 4).
I.4.2.1.1 : Partie graphique du site
Figure 4 interface du site FRAME

Dans ce site, nous observons que :
1. L’interface est mal organisée.
2. Les titres sont écrits avec des formes différentes.
3. Le manque d’animations et d’images.
4. Le Manque du symbole du FRAME dans la page principale du site.
I.4.2.1.2 : Partie technique du site
On remarque que les services présentés par ce site sont limités puisqu’il offre au client
seulement la réservation sans vérifier les contraintes :
Pas de vérification des champs (par exemple si le champ de prénom est vide il accepte la
réservation).
Possibilité de refaire la même réservation (même client, même date, même hôtel)
Un manque des informations détaillées pour guider le choix du client.
1. Absence de rôle des visiteurs de site (commentaire,….).
2. Manque d’informations utile des hôtels.
I.4.2.2.les améliorations proposé
Vue l’importance de la disponibilité permanente des informations et services de la
société FRAME, l’importance d’avoir un espace qui rapproche les visiteurs du FRAME à
l’environnement du site et compte tenu des lacunes citées précédemment, nous avons été
appelés à :
1. L’application web assurant un contact direct entre les visiteurs du site et la société FRAME.
2. L’application doit offrir une session pour les clients et une autre pour l’administrateur.
3. L’application ouvre aux clients un espace pour donner leurs avis concernant le
site de la FRAME à partir d’un commentaire pour les hôtels.
1. L’application doit offrir un espace au administrateur du site pour modifier les informations consternant la
FRAME etpourentrerdanslacartepourgérerleshôtels(ajout,lasuppression,lamodification.).

2. L’application doit gérer la BD des abonnées et l’historique de ses acteurs (client,
administrateur).
3. Les visiteurs peut réaliser des différentes opérations : recherche par mot clé ou a partir
d’une liste d’hôtels selon l’emplacement du client.
4. L’application présente la carte de chaque hôtel aves des informations utile (le numéro du
téléphone, les catégories de chaque hôtel, les liens aux sites de les hôtels, des photos des
hôtels)
I.5. Conclusion
Au cours de ce chapitre, nous avons défini et analysé le cahier des charges en le
décomposant en plusieurs étapes à suivre tout au long du développement de notre projet. Par
la suite, nous avons effectué une analyse de l'existant afin de déterminer ses limitations. Nous
enchaînerons dans le chapitre suivant par une présentation de la conception.
Chapitre II : Spécification et étude préalable

II.1. Introduction
Le développement d’un système, d’un produit ou d’un service commence par une activité
primordiale : l’analyse, la spécification des besoins, et la définition des contraintes de réalisation.
Nous présentons ici une vue aussi claire que possible sur les exigences fonctionnelles et non
fonctionnelles pour l’application à développer.
II.2. Spécification des besoins
II.2.1.Besoins fonctionnelles
Les exigences fonctionnelles expriment une action qui doit être effectuée par le
système en réponse à une demande (sorties qui sont produites pour un ensemble donné
d’entrées) :
Les différents modules à développer, doivent permettre à l'application d'assurer les
fonctionnalités suivantes:
1. Le site doit avoir un plan de navigation simple et clair pour offrir aux utilisateurs la possibilité
de se déplacer facilement dans ses différentes rubriques et de dialoguer avec lui d’une façon
interactive.
2. Tout visiteur du site peut marquer sa présence à partir d’un commentaire.
3. Le site doit avoir une interface pour son administration qui permettra à l’administrateur la
gestion des contenus (mettre à jour la liste des hôtels et des cartes …etc.).
4. Le site doit donner à chacun de ses visiteurs la possibilité d’effectuer des recherches par la
simple connaissance d’un ou plusieurs mots clés (correspondant à des noms d’hôtels par
exemple) ou bien à travers le choix dans une liste de propositions.
II.2. 2 .Besoins non fonctionnelles
La prise en compte des exigences non fonctionnelles, telles que les contraintes liées au

temps ou à la sûreté du fonctionnement, est délicate car les méthodes de développement sont
généralement orientées vers la modélisation des exigences fonctionnelles. Les exigences non
fonctionnelles liées au développent de notre application sont:
1. La fiabilité: L’application doit être fiable. Elle ne doit pas causer des dommages en
cas de défaillance.
2. La maintenance: Les codes sources des modules développés doivent être indentés et
compréhensibles pour pouvoir les maintenir d'une façon rapide et facile et que
l’application doit être facile à évoluer et s’adapter aux changements.
3. La généricité: Le code des différents plugins doit être générique afin de faciliter la
tâche pour des éventuelles extensions.
4. Un degré de complexité : l’application doit être facile à utiliser et elle doit présenter
une interface qui offre une bonne ergonomie des fonctionnalités.
5. Efficacité : l’application doit être efficace qui subit aux besoins des visiteurs.
6. Le délai de livraison: Les différents modules sont développés dans le cadre d'un
projet de fin d’études qui devra être réalisé en 5 mois.
7. Guidage : faciliter l’utilisation du site et sa manipulation.
8. Comptabilité : capacité du système à s’intégrer dans les activités des utilisateurs
Le site doit présenter les informations de façon cohérente et de valider des commentaires
des clients.
Le design est un élément primordial dans la conception des sites web car il garantie
une identité visuelle et assure la clarté et la lisibilité du contenu tel que les couleurs, le
graphisme et le style de police qui peuvent présenter une source d’attraction pour les
internautes :
1. la topographie : le choix de la topographie est très important car il a une influence sur la
lisibilité et assure un confort plus ou moins grand au lecteur.
2. les couleurs : le choix des couleurs a une grande importance dans un travail multimédia.
Dans notre cas, les couleurs doivent être choisies soigneusement afin que l’interface
devienne plus attirante, harmonieuse et attractive.
II.2.3. Spécification semi-formelle des besoins

Pour faire la conception de notre projet nous avons utilisé le langage de modélisation objet :
UML (Unified Modelling Language)
UML :
(Unified Modelling language ou langage de modélisation unifié)
c’est un langage de modélisation graphique à la base de pictogrammes. Il
est apparu dans le monde du génie logiciel, dans le cadre de la
« conception orienté objet ». Couramment utilisé dans les projets logiciels, il peut être
appliqué à toutes sortes de systèmes ne se limitant pas au domaine informatique.
UML permet de représenter un système selon différentes vue complémentaires : les
diagrammes.
Un diagramme UML est une représentation graphique, qui s'intéresse à un aspect précis du
modèle, c'est une perspective du modèle. Chaque type de diagramme UML possède une
structure et véhicule une sémantique précise. Combinés, les différents types de diagrammes
UML offrent une vue complète des aspects statiques et dynamiques d'un système. Pour cela,
pour modéliser un système complexe, il vaut mieux s'y prendre en plusieurs fois, en affinant
son analyse par étapes.
Pour modéliser les besoins des utilisateurs nous avons utilisé des diagrammes statiques tels
que le diagramme de cas d’utilisations, le diagramme de classe et le diagramme de séquence.
Pour faire la conception en UML, nous avons choisie le logiciel « Pacestar UML
Diagrammer » de IBM qui est très puissant et simple à utiliser.
II.2.3.1 : identification des différents acteurs :
Dans le cas général, un acteur représente un utilisateur du système sous l’aspect d’une
fonction. Il existe deux acteurs principaux:
1. L’administrateur :
C‘est la personne responsable du fonctionnement et de la maintenance du site. Il peut :
1. Mettre à jour les données du site.
2. Créer la carte.
3. Mettre à jours de la carte.
4. Le visiteur:

Le client est une personne qui visite le site pour consulter les services du site. Il peut :
1. Consulter les actualités.
2. Utiliser le moteur de recherche pour ce connecté à notre site.
3. Choisir des mots clé pour consulter notre service (prix, catégories,..etc).
4. Insérer un commentaire (avis).
5. Consulter les cartes des hôtels.
II.2.3.2.Diagramme de cas d’utilisation
Définition :
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner
une vision globale du comportement fonctionnel d'un système logiciel. Un cas d'utilisation
représente une unité discrète d'interaction entre un utilisateur (humain ou machine) et un
système. Il est une unité significative de travail. Dans un diagramme de cas d'utilisation, les
utilisateurs sont appelés acteurs, ils interagissent avec les cas d'utilisation. (Voir figure 5)

Figure 5:diagramme de cas d’utilisation générale
1. Diagramme de cas d’utilisation : « identification »
Ce diagramme représente la tache d’identification de l’administrateur pour lui
permettre de gérer les informations concernant le site. Comme premier lieu il faut entrer
le login et mot de passe a chaque foie le system vérifier la validité ces données si il est
juste l’accès se fait avec sucée si non il demande de les répéter.
(Voir figure 6)

1. Diagramme de cas d’utilisation : « gérer les information »
Ce diagramme représente la tache de la gestion des informations a partir de la modification des
informations du site tel que les données des hôtels et de la carte tel qui nous pouvons les supprimer
ou l’ajouter ou modifier chacun des deux.
(Voir figure 7)
Figure 6: Diagramme de cas d’utilisation : « identification»

1. Diagramme de cas d’utilisation « saisir commentaire »
Figure 7: Diagramme de cas d’utilisation : « gérer les informations»

Ce diagramme représente la tache « saisir commentaire » d’un visiteur. Le contenus de ce
commentaire représente l’avis de ce visiteur sur l’hotel.la saisir d’un commentaire nécessite
l’identification du visiteur â travers son pseudo. (Voir figure 8)
Figure 8:Diagramme de classe : « saisir commentaire »

1. Diagramme de cas d’utilisation « recherche » :
Ce diagramme représente la tache « recherche » .en effet le visiteur peut entrer
des informations pour cibler s recherche telles que des informations sur les hôtels ou
bien un choix de catégorie ou d’intervalle de prix. (Voir figure 9)
Figure 9:Diagramme de cas d’utilisation : « recherche »

II.2.3.3. Diagramme de séquence
Définition
Le diagramme de séquence représente la succession chronologique des opérations réalisées
par un acteur pour l’analyse des mesures et l’étude de différentes statistiques. Ainsi les
diagrammes de séquence permettent de représenter des interactions entre objets
communiquent entre eux par envoi de messages (appel de méthodes)
1. Diagramme de séquence « identification » :
L’utilisateur ne peut pas modifier les informations du site sans passer par l’étape identification à
travers un login et un mot de passe .A travers cette étape, il se voit attribuer le rôle correspondant à
son compte.une fois la vérification se termine avec succès il aura la possibilité d’accéder aux services
réservés aux clients.
La figure ci-après représente le diagramme de séquence associé au scénario : identification. (Voir
figure 10)

Figure 10:diagramme de séquence : identification
Description :
1. L’administrateur demande l’accès.
2. Il Entre un mot de passe et login
3. Le système vérifier les informations.
4. Si est juste il accepte la demande si non afficher message.
5. Diagramme de séquence « saisir commentaire »
Ce diagramme suit le scénario suivant : « saisir un commentaire » : le visiteur a la possibilité de saisir
un commentaire à partir écrire un commentaire ou de donner un avis consternant un hôtel. (Voir
figure 11)

Figure 11:Diagramme de séquence : « saisir commentaire »
Description :
1. L’administrateur entrer un pseudo.
2. Le système affiche la zone des commentaires.
3. Le visiteur écrire son commentaire
4. Le système affiche le commentaire.
5. Diagramme de séquence : « gérer les informations (gérer carte) »
Ce diagramme suit le scénario suivant : « gérer les informations (gérer carte) » .Une
fois l’administrateur s’authentifier la carte des hôtels s’affiche afin de lui permettre
de supprimer, ajout ou modifier les informations sue les hôtels de la base ou un ajout
d’autres. (Voir figure 12)

Figure 12: Diagramme de séquence : « gérer les information (gérer carte) »
Description :
1. Le système vérifie l’indentification de l’administrateur.
2. Le système affiche la carte sur Google map.
3. L’administrateur modifie les informations (ajout, suppression, modification).
4. Le system enregistre les modifications effectuées.
II.3. Conclusion
Nous avons présenté dans ce chapitre les spécifications de notre application. Nous
avons utilisé le langage de modélisation UML pour réaliser les diagrammes de cas
d’utilisation et de séquences ainsi que les digrammes de classes.
Le chapitre suivant est dédiée à notre conception du projet.

Chapitre III : conception
III.1. Introduction
Dans ce chapitre nous allons présenter la phase de conception dont le but est de
comprendre et de structurer les besoins d’un utilisateur.

Dans cette partie, nous allons décrire la conception de l’application en se basant sur le
langage de modélisation UML (Unified Modeling Langage) pour décrire l’interaction entre
les différentes parties de l’application.
III.2. Conception de l’application
III.2.1. Description de la vue statique
III.2.1.1.Présentation du diagramme de classe
Le diagramme de classe est un élément important dans une démarche de conception
orientée objet. Il représente les différentes entités (les classes d'objet) intervenant dans le
système. Il repère la partie conceptuelle du système et décrit les classes que le système
utilise, ainsi que leur liens, que ceux-ci représentent un emboitage conceptuel (héritage) ou
une relation organique (agrégation).l’approche orientée objet considère le logiciel comme une
collection d’objet dissociés, et identifiés, définies par des propriétés.
Un diagramme de classes est une collection d'éléments de modélisation statiques (classes,
paquetages...), qui montre la structure d'un modèle.
Un diagramme de classes fait abstraction des aspects dynamiques et temporels.
(Voir figure 13)

III.2.1.2.Modèle conceptuelle de données(MCD)
Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle les
données qui seront utilisées par le système d'information. Il s'agit donc d'une représentation
des données, facilement compréhensible, permettant de décrire le système d'information à
l'aide d'entités (la représentation d'un élément matériel ou immatériel ayant un rôle dans le
système que l'on désire décrire.)
La figure suivante (voir figure 14) représente le modèle conceptuelle de données de
notre application
Figure 13:Diagramme de classe

Figure 14:Modèle conceptuel de données

III.2.1.2.Modèle physique de données(MPD)
Modèle Physique de Données (MPD) pour modéliser la structure physique générale d'une
base de données, en tenant compte des considérations logicielles ou des contraintes relatives au
stockage des données (Voir figure 15).
Figure 15: modèle physique des données(MPD)

III.2.3.Dictionnaire de données
Dans cette partie, nous allons définir la structure de notre base de données en modèle
relationnelle en décrivant les principales tables utilisées.
Attributs Types Descriptions
niveau_commentaire Entier Niveau du commentaire du client
(excellent, moyenne, mauvaise)
nom_hotel Chaine de caractères Nom d’hôtel commenté par le
client
id_client Entier Identifiant du client qui va saisir le
commentaire
Tableau 1: Structure de la table client
Attributs Types Description
Login Chaine de caractères Identifiant de l’administrateur
mot_passe Chaine de caractères Mot de passe de l’administrateur
Tableau 2: structure de table administrateur
Attributs
Types Description
Id Entire Identifiant de la chambre
Série Entire Nombre de série de la chambre
Type Chaine de caractéres Type de la chamber
Adulte Entire Nombre d’adulte
Enfant Entire Nombre d’enfants
Bébé Entire Number de bébé
Logement Chaine de caractéres

Prix Entire Prix de la chambre
age1 Entire Niveau d’age1
Tableau 3: structure de la table chambre
Attribut Types Description
Mot_clé Chaine de caractère Mot clé entré par le visiteur.
Langue Chaine de caractère Langue du client
Tableau 4: structure de table Key Word
Attribut Type Description
Id_client Integer Identifiant du client qui
représente le pseudo
Niveau_commentaire Integer Commentaire saisi par
l’utilisateur
Tableau 5: Structure de la table client
III.3. Conclusion
Nous avons étudié dans ce chapitre la conception de notre application. Nous avons
utilisé la méthode UML. Le chapitre précédent sera consacré aux outils de Google.

Chapitre IV : les outils de Google
IV.1. Introduction
Pour assurer la réussite de notre projet, nous avons utilisé quelques outils Google
appropriés à notre problématique afin de réaliser les différentes tâches associées à la géo
localisation. Ainsi, nous décrivons dans ce chapitre les fonctionnalités de chaque outil
« Google » utilisé.
IV.2.les outils de Google
IV.2.1 : Google map
Google Maps est un service partiellement gratuit[]
de cartographie en ligne. Le service
a été créé par Google. Lancé en 2004 aux États-Unis et au Canada et en 2005 en Grande-
Bretagne (sous le nom de Google Local), Google Maps a été lancé jeudi 27 avril 2006,
simultanément en France, Allemagne, Espagne et Italie. (Voir figure 16)
Ce service permet, à partir de l'échelle d'un pays, de pouvoir zoomer jusqu'à l'échelle
d'une rue. Deux types de vue sont disponibles : une vue en plan classique, avec nom des rues,

quartier, villes et une vue en image satellite, qui couvre aujourd'hui le monde entier. Ce
service n'est plus en version bêta depuis le 12 septembre 2007, et a été ajouté aux liens de la
page d'accueil de Google.
Google Maps est un service de cartographie. En fonction de votre situation
géographique, vous pouvez afficher des cartes de base ou des cartes personnalisées. Les
cartes affichées par le service de Google présentent diverses informations comme les
commerces et services de proximité (notamment les adresses et coordonnées des entreprises).
Il est aussi possible d’utiliser les outils mis à disposition pour pouvoir créer un itinéraire (que
ce soit un itinéraire routier ou pour piétons), découvrir le monde en image satellite ou avec
Google Street View (voir figure 18) pour les villes qui présentent des images panoramiques.
Toute personne peut utiliser ce service, il suffit d’une connexion Internet et un navigateur
Web ou une application pour téléphone portable afin de pouvoir s’en servir en voyage. Il est à
noter que certains pays ne sont pas encore disponibles pour certains outils.
Figure 16:page d’accueil de Google Map
IV.2.1. 1. Itinéraires dans Google Maps
Le service d’itinéraire est intéressant pour les déplacements en voiture pour vos longs
trajets ou à pied si vous souhaitez visiter une ville par exemple. La figure 17 Il suffit pour
utiliser la création d’un itinéraire de cliquer en haut à gauche après le logo sur « Itinéraire », à
ce moment vous aurez un menu qui va se présenter pour préciser la ville de départ et d’arrivée
et d’autres options par la suite. Après avoir effectué une recherche, le trajet est alors marqué
sur la carte avec le détail des rues, les distances parcourues et le moyen de transport utilisé .).
Cette fonction de calcul d’itinéraire est disponible aussi bien en voiture (par exemple pour
ceux qui souhaitent s’en servir comme un GPS avec un téléphone mobile et l’application
Google) que pour les transports en commun (pour pouvoir visiter une ville par exemple).

Figure 17: Exemple d’un Itinéraire dans Google Maps
IV.2.1.2. Google Street View dans Google Maps
Afin de fournir aux utilisateurs un service toujours plus intéressant et pour les curieux,
Google a lancé Google Street View qui est un complément à Google Maps pour pouvoir
visiter les villes comme si vous y étiez. Des milliards de photos ont été réalisées dans des
milliers de villes dans le monde entier pour visiter facilement les différentes rues. Google est
s’est fait aider d’appareils panoramiques à 360° pour pouvoir réaliser ce service qui permet de
découvrir les différentes régions du globe d’une autre manière originale. (Voir figure 18)
Figure 18: Example Google Street View dans Google Maps(Paris)
IV.2.2.Google Map Maker
Google Map Maker vous permet de créer votre propre carte avec différents éléments,
c’est un service de cartographie qui est intéressant pour différents travaux. Vous pouvez par
exemple créer une carte et afficher les éléments que vous souhaitez à proximité d’un point
(comme une entreprise), modifier des sections de route, ajouter un point d’intérêt (pour
présenter par exemple un projet de construction), ajouter une route ou encore ajouter un
espace qui va définir la région que vous souhaitez présenter avec votre carte personnalisée.
(Voire figure 19)

Figure 19: Interface du Google marker
IV.2.3. Google Adresses (Google Places)
Google adresse est un service de recherche géo localisé. Cette fonctionnalité permet
aux dirigeants d’entreprises de créer, de gérer et de mettre à jour une fiche d’entreprise qui
sera ensuite disponible sur Google Maps et les sites Google associés.
La figure 20 représente la page d’accueil de Google adresse.
Figure 20: page d’accueil de Google adresses
Lorsque l’internaute effectue une requête sur Google, celui-ci affiche les résultats locaux, qui
sont désormais totalement intégrés aux résultats naturels et souvent en position dominante
dans le classement des résultats de recherche liés à des lieux spécifiques. Google fournit des
détails sur chaque lieu et affiche à la droite de chaque résultat local la mention «Page Google
Adresses», qui renvoie à une fiche d’entreprise (voir figure 20).

Google Adresses fonctionne par localisation géographique. Il détecte automatiquement le lieu
où se trouvent l’internaute et l’affiche dans la marge de gauche près des options de recherche.
Mais plus importants encore sont les mots-clés géo localisés, qui ont d’ailleurs préséance sur
la localisation de l’internaute.
IV.3.API Google Map
Définition :
Une API est une interface de programmation. Dans le cas de Google Maps, il s’agit d’un ensemble de
fonctions et classes JavaScript qui permettent de manipuler une carte dynamiquement au sein d’un
site web.
Cette manière de visualiser des informations laisse souvent libre court à l’internaute a ﬁn que celui-ci
navigue au grès de ses envies à travers la carte. La première version destinée aux seuls sites web
s’est vue agrémentée au ﬁl des années de plates-formes supplémentaires : API pour Flash, API
statique, API pour les Smartphones. De plus, au fur et à mesure de L’exploitation de cette API, Google
a proposé de nouveaux services : géo localisation, calcul d’itinéraires, calcul d’altitude, etc.
La figure 21 représente la page d’accueil du Google map API tel qu’il ya un espace pour créer une
carte pour map ou pour téléphone.
Figure 21: page d’accueil de Google Maps API

IV.4.Mashup
IV.4.1.Définition :
Un Mashup permet d’ajouter sur une page web du contenu provenant d’un ou
plusieurs autres autre site. En l’occurrence dans notre cas, il s’agit de Google Maps.
IV.4.2.Comment créer un Mashup
L'élaboration d'un Mashup repose sur une ou plusieurs API (Application Program
Interface), c'est-à-dire une interface de programmation ouverte et librement accessible mise à
disposition par l'éditeur d'un site Web. L'API permet ainsi à deux programmes informatiques
de communiquer entre eux grâce à des standards communs. Un développeur informatique
utilise cette interface comme une clef d'accès pour récupérer du contenu et interroger des
bases de données distantes.
IV.4.3.Quels sont les Mashup les plus populaires
L'API de Google Maps reste l'une des plus utilisée malgré le nombre important de kits
de programmation aujourd'hui proposés par les éditeurs de sites.
La figure 22 permet de voir en temps réel l’ensemble des bateaux à haut-tonnage sur une
carte mondiale.
Figure 22:Mashup Google Maps : MarineTraffic.com

IV.5. Conclusion
Au cours de ce chapitre, nous avons essayé de définir quelque outils Google et
particulièrement ceux rattaché a la géo localisation.
Le chapitre suivant présente la partie réalisation se notre application.
Chapitre V:
Réalisation
V.1. Introduction

Dans ce chapitre on va décrire les étapes de réalisation du travail demandé, ainsi, nous
allons présenter les différents outils matériel et logiciel ainsi que les interfaces réalisés seront
représentées .on va aussi présenter les différents techniques de référencement.
V.2. Environnement de travail
V.2.1 : Environnement logiciel
V.2.1.1.HTML (Hyper Texte Mark up Language):
1. HTML est d'un langage de description (et non pas d'un langage de programmation) qui va
nous permettre de décrire l'aspect d'un document, d'y inclure des informations variées
(textes, images, sons, animations etc.) et d'établir des relations cohérentes entre ces
informations grâce aux liens hypertextes.
2. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML
permet également de structurer sémantiquement et de mettre en forme le contenu des
pages, d’inclure des ressources multimédias dont des images, et des éléments
programmables tels que des applets.
3. Il permet de créer des documents interopérables avec des équipements très variés de
manière conforme aux exigences de l’accessibilité du web.
4. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des
formats de présentation (feuilles de style en cascade).
V.2.1.2.Le langage PHP
PHP est un langage de programmation qui s'intègre dans les pages
HTML. Il permet entre autres de rendre automatiques des tâches répétitives,
notamment grâce à la communication avec une base de données.
PHP est principalement utilisé pour être exécuté par un serveur HTTP, mais il peut fonctionner
comme n'importe quel langage interprété en utilisant les scripts et son interpréteur sur un
ordinateur.
On désigne parfois PHP comme une plate-forme plus qu'un simple langage.
PHP n'est pas un langage compilé, c'est un langage interprété par le serveur : le serveur lit le code
PHP, le transforme et génère la page HTML.
V.2.1.3.MySQL
Le langage SQL (Structured Query Language) est un langage de requête
utilisé pour interroger des bases de données exploitant le modèle
relationnel.

Un serveur MySQL gère une ou plusieurs base de données tel que chaque base contient différents
types d'objets (tables, index, fonctions).
1. Il fait partie des logiciels de gestion de base de données les plus utilisés au monde, autant par
le grand public (applications web principalement) que par des professionnels, en
concurrence avec Oracle, Microsoft,…
2. Les commandes MySQL peuvent être incorporées dans le code PHP permettant de générer
une partie ou la totalité d’une page des informations contenues dans une base de données.
V.2.1.4.Java Script
JavaScript est un langage de programmation de scripts principalement utilisé
dans les pages web interactives mais aussi côté serveur.
C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage
et ses principales interfaces sont fournies par des objets qui ne sont pas des
instances de classes.
Le JavaScript est une extension du langage HTML qui est incluse dans le code. Ce
langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML
en permettant d'exécuter des commandes.
V.2.1.5.Ajax
1. AJAX = Asynchronous JavaScript and XML : est une nouvelle
implémentation des établis technologies de développement web pour
gagner une interactivité entre les utilisateurs et les serveurs via le serveur du
client multiples faces.

n'est pas une technologie en elle-même, mais un terme qui évoque l'utilisation conjointe d'un
ensemble de technologies couramment utilisées sur le Web :
* HTML (ou XHTML) pour la structure sémantique des informations ;
* CSS pour la présentation des informations ;
* JavaScript pour afficher et interagir dynamiquement avec l'information présentée.
* XML pour échanger et manipuler les données de manière asynchrone avec le serveur web.
1. Les applications AJAX peuvent aussi utiliser d'autres technologies comme le HTML.
2. Les applications AJAX peuvent être utilisées au sein des navigateurs Web qui supportent les
technologies décrites précédemment. Parmi eux, on trouve Mozilla, Firefox, Internet
Explorer, Safari ou encore Opera.
Figure 23: Schéma du fonctionnement d'Ajax
Ajax utilise un modèle de programmation comprenant d'une part la présentation, d'autre part
l’évènement. Les évènements sont les actions de l'utilisateur, qui provoquent l'appel des
fonctions associées aux éléments de la page. L'interaction avec l'utilisateur se fait à partir des
formulaires ou boutons html.
V.2.1.6.CSS

CSS = Cascading StyleSheets ou feuilles de style en
Cascade.
1. CSS permet d’améliorer l’apparence des documents en lui enlevant toute instruction sur le
style des éléments.
2. Les éléments de mise en forme sont centralisés et stockés dans un fichier à part : une feuille
de style CSS.
3. CSS est utilisé pour définir l'aspect futur de votre site, comme par exemple la couleur du
fond de la page ou le type de police.
4. le CSS c'est un petit fichier (exemple "style.css") dans lequel vous allez définir l'aspect futur
de votre site.
5. Chaque règle CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un
groupe de balises.
V.2.2.Environnement matériel
La machine utilisée pour réaliser ce projet (ordinateur portable le novo ) dispose de la
configuration suivante :
– Système d’exploitation : Windows 7 Edition intégrale,
– 1 Go de RAM
– 320 Go de disque dur
V.3. Référencement
Le référencement permet d’améliorer le positionnement des sites sur des
moteurs de recherche en satisfaisant un maximum de critères. Il consiste à
soumettre l'existence de votre site aux différents moteurs de recherche, Google,
Voila, Bing, firefox, Yahoo et tous les autres: c'est le plus facile et le plus rapide.
Notamment un travail continu sur la qualité d’un site et sur ses liens
permettra d’atteindre progressivement l’objectif qui est la page1 du moteur
de recherche.
Les annuaires et moteur de recherche :

Répertoire de liens classés par catégories et validés manuellement. Il y a donc
sélection des sites référencés et intervention humaine. La recherche peut être effectuée par
catégorie ou par mots-clés. À noter que les annuaires complètent leurs résultats de requête par
des résultats issus de moteurs de recherche. Ex. d’annuaires : www.yahoo.fr – www.lycos.fr.
*Les principaux annuaires :
http://www.lycos.fr
http://fr.yahoo.com/
http://www.voila.fr
Les sites sont indexés après soumission à un robot ou lors du passage du robot sur un
site déjà référencé et pointant vers d’autres sites. La recherche est effectuée par mots- clés. Ex
: www.google.fr - http://fr.search.yahoo.com.
Ces deux systèmes sont tout à fait complémentaires pour les utilisateurs.
La préparation des pages :
1. Ce travail préalable est important, notamment pour le référencement dans les moteurs de
recherche. Il s’agit dans ce cas d’un référencement automatisé : un robot visite les pages de

votre site à partir de l’adresse que vous lui avez fourni et classe notre site FRAME en fonction
de nombreux critères.
2. Parmi ces critères : présence de mots-clés dans l’url et sur le site, description du site, titre de la
page, popularité, mises à jour de votre site, originalité du contenu de votre site, date de
création du domaine (facteur dont l’importance est croissante).
1. Les différentes balises qui peuvent être ajouté à l’entête du page :
<meta name="description" content="ici la description"> : il s’agit de la description de la page,
elle ne doit pas dépasser les 200 caractères. Elle pourra, elle aussi, être reprise par les moteurs et
annuaires de recherche pour donner la description de la page.
<meta name="keywords"content="ici les mots-clés"> : Cette balise sert à indiquer aux moteurs les
mots-clés les plus représentatifs de la page, elle ne doit pas dépasser les 1000 caractères. Les mots-clés
peuvent être séparés par une virgule ou une virgule suivie d'un espace.
V.4. Présentation du site
V.4.1.Page d’accueil

Cette interface représente la page d’accueil de l’application et dans laquelle il existe l’espace
administrateur où il peut se connecté a partir un mot de passe et login.
V.4.2.mode connecté :
Figure 24:page d'accueil du site

Cette figure représente l’interface ou le system accepte le mot de passe et le login entrant par
l’administrateur donc celui doit être en mode connecté.
V.4.3.mode non connecté :
Figure 25:mode connecté de l'administrateur

Figure 26:mode non connecté
Cette figure représente un message d’erreur en cas de l’invalidité du login et mot de passe
entrant par l’administrateur.

V.4.4.menu carte
Cette figure représente la page de carte on appuyant sur le menu carte il présente l’ensemble
des lieux en Tunisie et la carte des hôtels.
Figure 27:page de carte

V.4.5.page carte d’hôtel :
Figure 28:carte hôtel
Cette figure présente la carte d’un hôtel choisie ainsi que l’espace commentaire des visiteurs
tels que cet espace là contenant le pseudo et le commentaire saisie par chaque visiteur.
Ces commentaire automatiquement doit être afficher (voir figure 29)

Figure 29:page carte (les commentaires)

V.4.6 : page recherche par mot clé :
Figure 30:recherche par mot clé
Cette figure représente l’espace ou le visiteur saisir un mot clé a fin de trouver touts
informations utile.

V.5.7 : page recherche par catégorie :
Figure 31:page recherche par catégorie
Cette figure représente l’ensemble des hôtels ayant la catégorie choisi par le visiteur de site.
V.4.8 : page recherche par chambre :

Cette figure représente l’ensemble des hôtels ayant le type de chambre choisi par le visiteur de
site.
Figure 32:page recherche par chambre

V.4.9 : page recherche par prix :
Cette figure représente l’ensemble des hôtels ayant le prix choisi par le visiteur de site.
Figure 33:page recherche par prix

V.4.10.contacte :
Figure 34:page contact
Cette figure représente l’espace contact pour facilité au visiteur la communication avec la
société.

V.5. Conclusion
Tout au long de ce chapitre on’ a décrit l’environnement logiciel et matériel du travail
on représentant le langage PHP. On ‘a aussi détailler les outils de développement utiliser
pour réaliser notre projet. Ensuite on’ a entamé une partie qui englobe les étapes de
réalisation.
Conclusion
artant de nos modestes connaissances notre objectif était de profiter des
technologies et des logiciels disponibles a fin de mettre en application les
différentes techniques de conception et de gestion des bases de données
acquises lors de notre troisième année de formation dans le but de concevoir la géo
localisation du société FRAME. Nous avons pu accumuler le long de notre projet de certaines
expertises qui nous ont servi de mieux comprendre le déroulement du notre
application. La partie conception nous a permis de mieux représenter les différentes entités
du système en élaborant le modèle conceptuel des données (MCD). En s’aidant
des langages HTML pour la création des pages statiques, le serveur Easy PHP pour
se connecter à la base et JavaScript pour les structures de contrôle, n en plus de ses fonctionnalités
statiques, nous a permis de disposer d’une interface qui assure des interactions directes entre
les visiteurs du site et la société. Bien entendu, nous avons essayé de réunir le maximum des
fonctionnalités que peut ouvrir un site du FRAME. Néanmoins, ceci n’exclut pas
l’existence d’autres fonctionnalités que nous n’avons pas pu les mettre en considération à cause de
la bureaucratie de notre administration à l’FRAME. Nous tenons à noter que s’il n’y avait pas peu
de temps pour la remise de ce projet, nous aurions pu écarter notre travail en ajoutant des
comptes pour la gestion et l’organisation des soutenances et même d’ajouter un forum de
discussion pour les visiteurs du FRAME.
P

Bibliographie
SITES INTERNET CONSULTES :
- http://www.siteduzero.com/forum-83-565648-p1-login-et-mot-de-passe-php-mysql.html
-http://www.google.com/mapmaker/pulse
-http://eductice.ens-lyon.fr/EducTice/recherche/geomatique/veille/Globes-virtuels/google-
earth
-http://support.google.com/webmasters/bin/answer.py?hl=fr&answer=146645
-http://forums.mediabox.fr/wiki/tutoriaux/php/bdd/recuperer_donnee_mysql
-http://php.net/manual/fr/
-http://www.mybatua.com/womens/abaya
-http://google-maps.en-video.eu/video/ySvNz7tbUvs/Tutoriel-jQuery-Google-Maps-API.html
-http://www.ma-carte-geographique.com/Inscription.php
-http://google-maps.en-video.eu/video/ySvNz7tbUvs/Tutoriel-jQuery-Google-Maps-API.html
-http://www.supportduweb.com/generateur-cartes-google-maps-mettre-cartes-google-map-
sur-son-site-gratuitement-gadget-widget.html
-http://www.google.fr/earth/outreach/tutorial_websitemaps.html#discuss
Annexe
Recherche par catégorie. PHP
<?php
mysql_connect("localhost","root","");
mysql_select_db("site");
session_start();
include 'connexion.php';

$categorie=$_POST['cat'];
$sql ="SELECT * FROM hotels WHERE categorie = '$categorie'";
// On fait la recherche des hôtels du par catégorie
$query = mysql_query($sql);
echo('<br><br>');
While ($courant = mysql_fetch_assoc($query))
{ $img=$courant['image'];
echo('<br>
<table><tr>
<td rowspan="2"><img src="images/imagehotel/'.$img.'.jpg" height="100" width="100"></td>
<td>Hotel '.$courant['hotel'].'
<br> Ville :
'.$courant['ville'].'
<br>
'.$courant['categorie'].' etoiles<br>
<a href='.$courant['liens'].' target="_blanc"> '.$courant['liens'].'</a><br>
</td>
<tr></table>'); }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<META NAME="description" CONTENT="Recherche par categorie:nombres des etoiles des
hotels">
<META NAME="keywords" CONTENT="fram,fram orange,fram orange tour tunisie,4,5,3,etoils,4
etoiles,5 etoiles ,3 etoiles ,hotel,hotels monastir,hotesl sousse,hotels hammamet,hotels douz,hotels
touzer,hotels mahdia,hotels tabarka,hotels gammaret,hotels djerba,hotels zarzis,La Palmeraie de
Touareg,Alhambra,(+216)72241524,Aziza,El Mouradi,El Mouradi Beach,El Mouradi Cap Mahdi,El
Mouradi Club Kant,el mouradi douz,El Mouradi Hammamet,(+216)72244100,El Mouradi Mahdia,El
Mouradi Menzeh,El Mouradi Menzel,El Mouradi Palace,El Mouradi Palm Marina,El Mouradi
Skaneswww.elmouradi.com,(+216)75623336,El Mouradi
touzer,http://www.delphinHbib.com,(+216)73466750,Iberostar Averroes,Iberostar Bélisaire,Iberostar
Chichkhan,Iberostar Mehari,Iberostar Phenicia, Iberostar Royal El Mansour,Iberostar Safira
Pal,Iberostar Saphir Pal,Iberostar Solaria,Itropika,Kanta,Le Sultan,Mediterannee thalassa
Golf,Mediterranee Thalasso

Golf,Movenpick,Phenicia,regency,residence,www.booking.com/corniche_hotel,(+216) 73461451,RIU
BELLE VUE PARK,RIU EL MANSOUR,RIU IMPERIAL MARHABA,RIU MARCO POLO,RIU
PALACE MARHABA,RIU PALACE OCEANA,(+216)72227227
RIU Palace Royal Garden,RIU PALM AZUR,Riviera,Royal salem,Royal Thalassa,Sahara,Sahara
Beach,www.Saharabeach.com.tn,(+216)73521088,Sentido Djerba
Beach,thalassa,www.thalassa_hotels.com,thalassa,Thapsus,
Vincci FLORA PARK,Vincci Lella Baya,Vincci Nour Palace,Vincci Nozha Beach,Vincci Taj
Sultan,Yadis Hammamet,monastir,hammamet fram,agence voyage,agence,agence fram,voyage">
<title>Rcherche des hotels Par categorie</title></head>
<body>
<form method="post" action="categorie.php" target="cc">
<br><br><br><br>
<div style="text-align: center;"><input name="cat" value="3" type="radio">
<span style="font-weight: bold; color: rgb(0, 153, 0);"> 3 etoiles </span>  
<img style="width: 82px; height: 13px;" alt="" src="images/i1.png"><br>
<br> <input name="cat" value="4" type="radio"><span style="color: rgb(0, 153, 0); font-
weight:bold;"> 4 etoiles</span> 
;<img style="width: 81px; height: 10px;" alt=""src="images/i2.bmp"><br>
<br> <input name="cat" value="5" type="radio">
<span style="font-weight: bold; color: rgb(0, 153, 0);"> 5
etoiles </span>  <img style="width: 79px; height: 12px;" src="images/i3.png"><br>
</div><br><br>
<center><input value="Rechercher" type="submit"></center>
</form></body></html>

rapport fin d'etude

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie rapport fin d'etude

Ähnlich wie rapport fin d'etude (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (16)

rapport fin d'etude