SlideShare une entreprise Scribd logo
1  sur  68
Télécharger pour lire hors ligne
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.
Dhiabi Hajer & Ben Brahim Sihem Page 2
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
Dhiabi Hajer & Ben Brahim Sihem Page 3
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 :
Dhiabi Hajer & Ben Brahim Sihem Page 4
* 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
Dhiabi Hajer & Ben Brahim Sihem Page 5
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.
Dhiabi Hajer & Ben Brahim Sihem Page 6
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
Dhiabi Hajer & Ben Brahim Sihem Page 7
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
Dhiabi Hajer & Ben Brahim Sihem Page 8
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.).
Dhiabi Hajer & Ben Brahim Sihem Page 9
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
Dhiabi Hajer & Ben Brahim Sihem Page 10
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
Dhiabi Hajer & Ben Brahim Sihem Page 11
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
Dhiabi Hajer & Ben Brahim Sihem Page 12
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:
Dhiabi Hajer & Ben Brahim Sihem Page 13
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)
Dhiabi Hajer & Ben Brahim Sihem Page 14
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)
Dhiabi Hajer & Ben Brahim Sihem Page 15
Dhiabi Hajer & Ben Brahim Sihem Page 16
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»
Dhiabi Hajer & Ben Brahim Sihem Page 17
1. Diagramme de cas d’utilisation « saisir commentaire »
Figure 7: Diagramme de cas d’utilisation : « gérer les informations»
Dhiabi Hajer & Ben Brahim Sihem Page 18
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 »
Dhiabi Hajer & Ben Brahim Sihem Page 19
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 »
Dhiabi Hajer & Ben Brahim Sihem Page 20
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)
Dhiabi Hajer & Ben Brahim Sihem Page 21
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)
Dhiabi Hajer & Ben Brahim Sihem Page 22
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)
Dhiabi Hajer & Ben Brahim Sihem Page 23
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.
Dhiabi Hajer & Ben Brahim Sihem Page 24
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.
Dhiabi Hajer & Ben Brahim Sihem Page 25
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)
Dhiabi Hajer & Ben Brahim Sihem Page 26
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
Dhiabi Hajer & Ben Brahim Sihem Page 27
Figure 14:Modèle conceptuel de données
Dhiabi Hajer & Ben Brahim Sihem Page 28
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)
Dhiabi Hajer & Ben Brahim Sihem Page 29
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
Dhiabi Hajer & Ben Brahim Sihem Page 30
Prix Entire Prix de la chambre
age1 Entire Niveau d’age1
age2 Entire Niveau d’age2
age3 Entire Niveau d’age3
age4 Entire Niveau d’age4
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.
Dhiabi Hajer & Ben Brahim Sihem Page 31
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,
Dhiabi Hajer & Ben Brahim Sihem Page 32
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).
Dhiabi Hajer & Ben Brahim Sihem Page 33
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)
Dhiabi Hajer & Ben Brahim Sihem Page 34
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).
Dhiabi Hajer & Ben Brahim Sihem Page 35
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 fin 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 fil 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
Dhiabi Hajer & Ben Brahim Sihem Page 36
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
Dhiabi Hajer & Ben Brahim Sihem Page 37
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
Dhiabi Hajer & Ben Brahim Sihem Page 38
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.
Dhiabi Hajer & Ben Brahim Sihem Page 39
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.
Dhiabi Hajer & Ben Brahim Sihem Page 40
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
Dhiabi Hajer & Ben Brahim Sihem Page 41
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 :
Dhiabi Hajer & Ben Brahim Sihem Page 42
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
Dhiabi Hajer & Ben Brahim Sihem Page 43
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
Dhiabi Hajer & Ben Brahim Sihem Page 44
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
Dhiabi Hajer & Ben Brahim Sihem Page 45
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
Dhiabi Hajer & Ben Brahim Sihem Page 46
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.
Dhiabi Hajer & Ben Brahim Sihem Page 47
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
Dhiabi Hajer & Ben Brahim Sihem Page 48
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)
Dhiabi Hajer & Ben Brahim Sihem Page 49
Figure 29:page carte (les commentaires)
Dhiabi Hajer & Ben Brahim Sihem Page 50
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.
Dhiabi Hajer & Ben Brahim Sihem Page 51
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 :
Dhiabi Hajer & Ben Brahim Sihem Page 52
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
Dhiabi Hajer & Ben Brahim Sihem Page 53
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
Dhiabi Hajer & Ben Brahim Sihem Page 54
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é.
Dhiabi Hajer & Ben Brahim Sihem Page 55
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
Dhiabi Hajer & Ben Brahim Sihem Page 56
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';
Dhiabi Hajer & Ben Brahim Sihem Page 57
$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
Dhiabi Hajer & Ben Brahim Sihem Page 58
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);">&nbsp;3 etoiles </span>&nbsp;&nbsp;
<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>&nbsp;
;<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&nbsp;</span> &nbsp;<img style="width: 79px; height: 12px;" src="images/i3.png"><br>
</div><br><br>
<center><input value="Rechercher" type="submit"></center>
</form></body></html>

Contenu connexe

Tendances

RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESTombariAhmed
 
Rapport du projet fin d'etudes
Rapport du projet fin d'etudesRapport du projet fin d'etudes
Rapport du projet fin d'etudesTahani RIAHI
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile Raoua Bennasr
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachAyoub Mkharbach
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIAAhmed BEN JEMIA
 
Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...Addi Ait-Mlouk
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesHosni Mansour
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Sofien Benrhouma
 
Conception et développement d’un système d’alerte et notification d’une tou...
Conception et développement  d’un système d’alerte et notification  d’une tou...Conception et développement  d’un système d’alerte et notification  d’une tou...
Conception et développement d’un système d’alerte et notification d’une tou...Bilel Khaled ☁
 
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Yasmine Lachheb
 
rapport de stage
rapport de stagerapport de stage
rapport de stageMarouane Gh
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaNazih Heni
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebHarrathi Mohamed
 
Rapport de stage PFE - Mémoire master: Développement d'une application Android
Rapport de stage PFE - Mémoire master: Développement d'une application AndroidRapport de stage PFE - Mémoire master: Développement d'une application Android
Rapport de stage PFE - Mémoire master: Développement d'une application AndroidBadrElattaoui
 
Conception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-locationConception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-locationALALSYSE
 
Rapport restaurant le-roi
Rapport restaurant le-roiRapport restaurant le-roi
Rapport restaurant le-roiMarwa Bhouri
 
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
Projet de fin étude  ( LFIG : Conception et Développement d'une application W...Projet de fin étude  ( LFIG : Conception et Développement d'une application W...
Projet de fin étude ( LFIG : Conception et Développement d'une application W...Ramzi Noumairi
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileRim ENNOUR
 

Tendances (20)

Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
RAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDESRAPPORT DE PROJET DE FIN D’ETUDES
RAPPORT DE PROJET DE FIN D’ETUDES
 
Rapport du projet fin d'etudes
Rapport du projet fin d'etudesRapport du projet fin d'etudes
Rapport du projet fin d'etudes
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
Rapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbachRapport pfe-ayoub mkharbach
Rapport pfe-ayoub mkharbach
 
Rapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIARapport PFE Ahmed BEN JEMIA
Rapport PFE Ahmed BEN JEMIA
 
Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...Conception et réalisation d'une application de gestion intégrée au sein de la...
Conception et réalisation d'une application de gestion intégrée au sein de la...
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'Etudes
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 
Conception et développement d’un système d’alerte et notification d’une tou...
Conception et développement  d’un système d’alerte et notification  d’une tou...Conception et développement  d’un système d’alerte et notification  d’une tou...
Conception et développement d’un système d’alerte et notification d’une tou...
 
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
 
rapport de stage
rapport de stagerapport de stage
rapport de stage
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
 
Rapport de stage PFE - Mémoire master: Développement d'une application Android
Rapport de stage PFE - Mémoire master: Développement d'une application AndroidRapport de stage PFE - Mémoire master: Développement d'une application Android
Rapport de stage PFE - Mémoire master: Développement d'une application Android
 
Conception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-locationConception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-location
 
Rapport restaurant le-roi
Rapport restaurant le-roiRapport restaurant le-roi
Rapport restaurant le-roi
 
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
Projet de fin étude  ( LFIG : Conception et Développement d'une application W...Projet de fin étude  ( LFIG : Conception et Développement d'une application W...
Projet de fin étude ( LFIG : Conception et Développement d'une application W...
 
Rapport pfe licence
Rapport pfe licenceRapport pfe licence
Rapport pfe licence
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
 

En vedette

Rapport de pfe format doc 2013
Rapport de pfe format doc 2013Rapport de pfe format doc 2013
Rapport de pfe format doc 2013Addi Ait-Mlouk
 
Memoire de fin d'etude pour izabayo
Memoire de fin d'etude pour izabayoMemoire de fin d'etude pour izabayo
Memoire de fin d'etude pour izabayoIZABAYO Jean d'Amour
 
Loic sarton guide d entretien
Loic sarton guide d entretienLoic sarton guide d entretien
Loic sarton guide d entretienLoic Sarton
 
La Pratique De L Audit Interne Dans Une Entreprise Dassurances
La Pratique De L Audit Interne Dans Une Entreprise DassurancesLa Pratique De L Audit Interne Dans Une Entreprise Dassurances
La Pratique De L Audit Interne Dans Une Entreprise Dassurancesazouzimarouene
 
Rapport de projet de fin d'études - SIEMENS 2016
Rapport de projet de fin d'études - SIEMENS 2016Rapport de projet de fin d'études - SIEMENS 2016
Rapport de projet de fin d'études - SIEMENS 2016Soufiane KALLIDA
 
Plan d'actions Seniors: Méthode et Outils
Plan d'actions Seniors: Méthode et OutilsPlan d'actions Seniors: Méthode et Outils
Plan d'actions Seniors: Méthode et OutilsForce Vive
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 ayoub damir
 
Projet de fin d etudes
Projet de fin d etudesProjet de fin d etudes
Projet de fin d etudes3azwa
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Riadh K.
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatiqueHicham Ben
 
Déroulement d'une mission d'audit
Déroulement d'une mission d'auditDéroulement d'une mission d'audit
Déroulement d'une mission d'auditBRAHIM MELLOUL
 
Audit
AuditAudit
Auditzan
 

En vedette (19)

Rapport de pfe format doc 2013
Rapport de pfe format doc 2013Rapport de pfe format doc 2013
Rapport de pfe format doc 2013
 
Memoire de fin d'etude pour izabayo
Memoire de fin d'etude pour izabayoMemoire de fin d'etude pour izabayo
Memoire de fin d'etude pour izabayo
 
Loic sarton guide d entretien
Loic sarton guide d entretienLoic sarton guide d entretien
Loic sarton guide d entretien
 
Rapport Projet Fin d'Études PFE
Rapport Projet Fin d'Études PFERapport Projet Fin d'Études PFE
Rapport Projet Fin d'Études PFE
 
La Pratique De L Audit Interne Dans Une Entreprise Dassurances
La Pratique De L Audit Interne Dans Une Entreprise DassurancesLa Pratique De L Audit Interne Dans Une Entreprise Dassurances
La Pratique De L Audit Interne Dans Une Entreprise Dassurances
 
Rapport de projet de fin d'études - SIEMENS 2016
Rapport de projet de fin d'études - SIEMENS 2016Rapport de projet de fin d'études - SIEMENS 2016
Rapport de projet de fin d'études - SIEMENS 2016
 
Plan d'actions Seniors: Méthode et Outils
Plan d'actions Seniors: Méthode et OutilsPlan d'actions Seniors: Méthode et Outils
Plan d'actions Seniors: Méthode et Outils
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8
 
Projet de fin d etudes
Projet de fin d etudesProjet de fin d etudes
Projet de fin d etudes
 
audit 2009
 audit 2009 audit 2009
audit 2009
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatique
 
Rapport De PFE
Rapport De PFERapport De PFE
Rapport De PFE
 
Esm Ai2008
Esm Ai2008Esm Ai2008
Esm Ai2008
 
Rapport de stage du fin d'étude
Rapport de stage du fin d'étudeRapport de stage du fin d'étude
Rapport de stage du fin d'étude
 
Rapport Projet de fin d&rsquo;études
Rapport Projet de fin d&rsquo;étudesRapport Projet de fin d&rsquo;études
Rapport Projet de fin d&rsquo;études
 
Déroulement d'une mission d'audit
Déroulement d'une mission d'auditDéroulement d'une mission d'audit
Déroulement d'une mission d'audit
 
Audit
AuditAudit
Audit
 
Guide d'entretien
Guide d'entretienGuide d'entretien
Guide d'entretien
 

Similaire à rapport fin d'etude

467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf
467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf
467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdfBader Nassiri
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Abdelmadjid Djebbari
 
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...YounesAGABI
 
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )Saadaoui Marwen
 
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...Karima Torkhani
 
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...karimatorkhani
 
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...Karima Torkhani
 
Pfe master fst_final_decembre2015
Pfe master fst_final_decembre2015Pfe master fst_final_decembre2015
Pfe master fst_final_decembre2015Ghali Rahma
 
Plateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontPlateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontKhaled Fayala
 
Rapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMMRapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMMEya TAYARI
 
Plateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'étudesPlateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'étudesMajdi SAIBI
 
Conception et réalisation d'une application mobile cross-platform "Taki Academy"
Conception et réalisation d'une application mobile cross-platform "Taki Academy"Conception et réalisation d'une application mobile cross-platform "Taki Academy"
Conception et réalisation d'une application mobile cross-platform "Taki Academy"Ibtihel El Bache
 
Medical openerp
Medical openerpMedical openerp
Medical openerpHORIYASOFT
 
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)Yasmine Tounsi
 
Rapport PFE réalisation d’un Framework Kinect
Rapport PFE réalisation d’un Framework KinectRapport PFE réalisation d’un Framework Kinect
Rapport PFE réalisation d’un Framework KinectAmine MEGDICHE
 
Site web d'une agence de voyage
Site web d'une agence de voyage Site web d'une agence de voyage
Site web d'une agence de voyage WissalWahsousse
 
MALLAT_BOURUIS
MALLAT_BOURUISMALLAT_BOURUIS
MALLAT_BOURUISAli Mallat
 

Similaire à rapport fin d'etude (20)

467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf
467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf
467720159-rapport-final-bouguerra-khadijaesseghaier-lina-pdf.pdf
 
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
Deploiement solution_ha_de_stockage_ceph_sous_une_plateforme_virtualisee_vsph...
 
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...
YouTaQA : Système de Questions-Réponses Intelligent basé sur le Deep Learning...
 
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )
Rapport PFE ingénieur réseaux marwen SAADAOUI ( Juin 2018 )
 
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...
Torkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitorin...
 
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...
Torkhani karima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitori...
 
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...
orkhanikarima-MémoireMastereProRx&telecom-FST2015-, Supervision et Monitoring...
 
Pfe master fst_final_decembre2015
Pfe master fst_final_decembre2015Pfe master fst_final_decembre2015
Pfe master fst_final_decembre2015
 
Plateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efrontPlateforme d'enseignement à distance : efront
Plateforme d'enseignement à distance : efront
 
Rapport final
Rapport finalRapport final
Rapport final
 
Rapport finiale
Rapport finialeRapport finiale
Rapport finiale
 
Rapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMMRapport_pfe_licence_ISAMM
Rapport_pfe_licence_ISAMM
 
Plateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'étudesPlateforme de gestion des projets de fin d'études
Plateforme de gestion des projets de fin d'études
 
Conception et réalisation d'une application mobile cross-platform "Taki Academy"
Conception et réalisation d'une application mobile cross-platform "Taki Academy"Conception et réalisation d'une application mobile cross-platform "Taki Academy"
Conception et réalisation d'une application mobile cross-platform "Taki Academy"
 
Medical openerp
Medical openerpMedical openerp
Medical openerp
 
pfe final.docx
pfe final.docxpfe final.docx
pfe final.docx
 
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)
Rapport Projet ERP - Plateforme Odoo 12 (PFE Licence)
 
Rapport PFE réalisation d’un Framework Kinect
Rapport PFE réalisation d’un Framework KinectRapport PFE réalisation d’un Framework Kinect
Rapport PFE réalisation d’un Framework Kinect
 
Site web d'une agence de voyage
Site web d'une agence de voyage Site web d'une agence de voyage
Site web d'une agence de voyage
 
MALLAT_BOURUIS
MALLAT_BOURUISMALLAT_BOURUIS
MALLAT_BOURUIS
 

Dernier

Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAmar LAKEL, PhD
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfAtelier Canopé 37 - Tours
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24BenotGeorges3
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfbdp12
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfAtelier Canopé 37 - Tours
 
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...Unidad de Espiritualidad Eudista
 
Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Majida Antonios, M.Ed.
 
Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilfrizzole
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Atelier Canopé 37 - Tours
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneTxaruka
 

Dernier (13)

Aux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècleAux origines de la sociologie : du XIXème au début XX ème siècle
Aux origines de la sociologie : du XIXème au début XX ème siècle
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
 
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
 
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
L'Unité de Spiritualité Eudiste se joint à toute l'Église Universelle et en p...
 
Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024
 
Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-Copilot your everyday AI companion- OFFICE 365-
Copilot your everyday AI companion- OFFICE 365-
 
Calendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avrilCalendrier de la semaine du 8 au 12 avril
Calendrier de la semaine du 8 au 12 avril
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienne
 

rapport fin d'etude

  • 1. 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
  • 2. 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.
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10.
  • 11. 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.
  • 12. Dhiabi Hajer & Ben Brahim Sihem Page 2 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
  • 13. Dhiabi Hajer & Ben Brahim Sihem Page 3 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 :
  • 14. Dhiabi Hajer & Ben Brahim Sihem Page 4 * 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
  • 15. Dhiabi Hajer & Ben Brahim Sihem Page 5 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.
  • 16. Dhiabi Hajer & Ben Brahim Sihem Page 6 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
  • 17. Dhiabi Hajer & Ben Brahim Sihem Page 7 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
  • 18. Dhiabi Hajer & Ben Brahim Sihem Page 8 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.).
  • 19. Dhiabi Hajer & Ben Brahim Sihem Page 9 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
  • 20. Dhiabi Hajer & Ben Brahim Sihem Page 10 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
  • 21. Dhiabi Hajer & Ben Brahim Sihem Page 11 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
  • 22. Dhiabi Hajer & Ben Brahim Sihem Page 12 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:
  • 23. Dhiabi Hajer & Ben Brahim Sihem Page 13 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)
  • 24. Dhiabi Hajer & Ben Brahim Sihem Page 14 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)
  • 25. Dhiabi Hajer & Ben Brahim Sihem Page 15
  • 26. Dhiabi Hajer & Ben Brahim Sihem Page 16 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»
  • 27. Dhiabi Hajer & Ben Brahim Sihem Page 17 1. Diagramme de cas d’utilisation « saisir commentaire » Figure 7: Diagramme de cas d’utilisation : « gérer les informations»
  • 28. Dhiabi Hajer & Ben Brahim Sihem Page 18 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 »
  • 29. Dhiabi Hajer & Ben Brahim Sihem Page 19 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 »
  • 30. Dhiabi Hajer & Ben Brahim Sihem Page 20 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)
  • 31. Dhiabi Hajer & Ben Brahim Sihem Page 21 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)
  • 32. Dhiabi Hajer & Ben Brahim Sihem Page 22 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)
  • 33. Dhiabi Hajer & Ben Brahim Sihem Page 23 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.
  • 34. Dhiabi Hajer & Ben Brahim Sihem Page 24 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.
  • 35. Dhiabi Hajer & Ben Brahim Sihem Page 25 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)
  • 36. Dhiabi Hajer & Ben Brahim Sihem Page 26 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
  • 37. Dhiabi Hajer & Ben Brahim Sihem Page 27 Figure 14:Modèle conceptuel de données
  • 38. Dhiabi Hajer & Ben Brahim Sihem Page 28 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)
  • 39. Dhiabi Hajer & Ben Brahim Sihem Page 29 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
  • 40. Dhiabi Hajer & Ben Brahim Sihem Page 30 Prix Entire Prix de la chambre age1 Entire Niveau d’age1 age2 Entire Niveau d’age2 age3 Entire Niveau d’age3 age4 Entire Niveau d’age4 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.
  • 41. Dhiabi Hajer & Ben Brahim Sihem Page 31 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,
  • 42. Dhiabi Hajer & Ben Brahim Sihem Page 32 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).
  • 43. Dhiabi Hajer & Ben Brahim Sihem Page 33 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)
  • 44. Dhiabi Hajer & Ben Brahim Sihem Page 34 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).
  • 45. Dhiabi Hajer & Ben Brahim Sihem Page 35 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 fin 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 fil 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
  • 46. Dhiabi Hajer & Ben Brahim Sihem Page 36 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
  • 47. Dhiabi Hajer & Ben Brahim Sihem Page 37 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
  • 48. Dhiabi Hajer & Ben Brahim Sihem Page 38 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.
  • 49. Dhiabi Hajer & Ben Brahim Sihem Page 39 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.
  • 50. Dhiabi Hajer & Ben Brahim Sihem Page 40 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
  • 51. Dhiabi Hajer & Ben Brahim Sihem Page 41 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 :
  • 52. Dhiabi Hajer & Ben Brahim Sihem Page 42 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
  • 53. Dhiabi Hajer & Ben Brahim Sihem Page 43 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
  • 54. Dhiabi Hajer & Ben Brahim Sihem Page 44 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
  • 55. Dhiabi Hajer & Ben Brahim Sihem Page 45 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
  • 56. Dhiabi Hajer & Ben Brahim Sihem Page 46 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.
  • 57. Dhiabi Hajer & Ben Brahim Sihem Page 47 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
  • 58. Dhiabi Hajer & Ben Brahim Sihem Page 48 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)
  • 59. Dhiabi Hajer & Ben Brahim Sihem Page 49 Figure 29:page carte (les commentaires)
  • 60. Dhiabi Hajer & Ben Brahim Sihem Page 50 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.
  • 61. Dhiabi Hajer & Ben Brahim Sihem Page 51 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 :
  • 62. Dhiabi Hajer & Ben Brahim Sihem Page 52 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
  • 63. Dhiabi Hajer & Ben Brahim Sihem Page 53 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
  • 64. Dhiabi Hajer & Ben Brahim Sihem Page 54 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é.
  • 65. Dhiabi Hajer & Ben Brahim Sihem Page 55 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
  • 66. Dhiabi Hajer & Ben Brahim Sihem Page 56 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';
  • 67. Dhiabi Hajer & Ben Brahim Sihem Page 57 $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
  • 68. Dhiabi Hajer & Ben Brahim Sihem Page 58 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);">&nbsp;3 etoiles </span>&nbsp;&nbsp; <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>&nbsp; ;<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&nbsp;</span> &nbsp;<img style="width: 79px; height: 12px;" src="images/i3.png"><br> </div><br><br> <center><input value="Rechercher" type="submit"></center> </form></body></html>