68
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

rapport fin d'etude

Embed Size (px)

Citation preview

Page 1: rapport fin d'etude

MINISTÈRE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE

SCIENTIFIQUE

Université de Monastir

Institut Supérieur d'Informatique et de Mathématiques de Monastir

PROJET DE FIN D'ETUDES

En vue de l'obtention de la Licence Appliquée en Informatique de Gestion

Application web de Géo localisation et de recherche

au profil de FRAME Orange Tour Tunisie

Encadré par : Membre de jurys :

- Melle Ben Dhiaf Zouhour - Mm Bali Nadia

- Mm Tilouch Amel

Réaliser Par :

Dhiabi Hajer & Ben Brahim Sihem

Année universitaire : 2011-20112

Page 2: rapport fin d'etude

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.

Page 3: rapport fin d'etude

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

Page 4: rapport fin d'etude

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

Page 5: rapport fin d'etude

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

Page 6: rapport fin d'etude

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 Google 31

IV.2.1 : Google map 31

Page 7: rapport fin d'etude

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

Page 8: rapport fin d'etude

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

Page 9: rapport fin d'etude

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

Page 10: rapport fin d'etude
Page 11: rapport fin d'etude

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.

Page 12: rapport fin d'etude

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 : [email protected]

*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

Page 13: rapport fin d'etude

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 :

Page 14: rapport fin d'etude

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

Page 15: rapport fin d'etude

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.

Page 16: rapport fin d'etude

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

Page 17: rapport fin d'etude

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

Page 18: rapport fin d'etude

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 et pour entrer dans la carte pour gérer les hôtels (ajout, la suppression, la modification.).

Page 19: rapport fin d'etude

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

Page 20: rapport fin d'etude

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

Page 21: rapport fin d'etude

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

Page 22: rapport fin d'etude

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:

Page 23: rapport fin d'etude

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)

Page 24: rapport fin d'etude

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)

Page 25: rapport fin d'etude

Dhiabi Hajer & Ben Brahim Sihem Page 15

Page 26: rapport fin d'etude

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»

Page 27: rapport fin d'etude

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»

Page 28: rapport fin d'etude

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 »

Page 29: rapport fin d'etude

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 »

Page 30: rapport fin d'etude

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)

Page 31: rapport fin d'etude

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)

Page 32: rapport fin d'etude

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)

Page 33: rapport fin d'etude

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.

Page 34: rapport fin d'etude

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.

Page 35: rapport fin d'etude

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)

Page 36: rapport fin d'etude

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

Page 37: rapport fin d'etude

Dhiabi Hajer & Ben Brahim Sihem Page 27

Figure 14:Modèle conceptuel de données

Page 38: rapport fin d'etude

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)

Page 39: rapport fin d'etude

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

Page 40: rapport fin d'etude

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.

Page 41: rapport fin d'etude

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,

Page 42: rapport fin d'etude

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).

Page 43: rapport fin d'etude

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)

Page 44: rapport fin d'etude

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).

Page 45: rapport fin d'etude

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

Page 46: rapport fin d'etude

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

Page 47: rapport fin d'etude

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

Page 48: rapport fin d'etude

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.

Page 49: rapport fin d'etude

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.

Page 50: rapport fin d'etude

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

Page 51: rapport fin d'etude

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 d e R AM

– 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 :

Page 52: rapport fin d'etude

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

Page 53: rapport fin d'etude

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

Page 54: rapport fin d'etude

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

Page 55: rapport fin d'etude

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

Page 56: rapport fin d'etude

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.

Page 57: rapport fin d'etude

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

Page 58: rapport fin d'etude

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)

Page 59: rapport fin d'etude

Dhiabi Hajer & Ben Brahim Sihem Page 49

Figure 29:page carte (les commentaires)

Page 60: rapport fin d'etude

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.

Page 61: rapport fin d'etude

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 :

Page 62: rapport fin d'etude

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

Page 63: rapport fin d'etude

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

Page 64: rapport fin d'etude

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é.

Page 65: rapport fin d'etude

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

Page 66: rapport fin d'etude

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';

Page 67: rapport fin d'etude

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

Page 68: rapport fin d'etude

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>