rapport fin d'etude

1 015 vues

Publié le

Application web de Géo localisation et de recherche au profil de FRAME Orange Tour Tunisie

Publié dans : Formation
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 015
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
26
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

rapport fin d'etude

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 10. 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.
  11. 11. 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
  12. 12. 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 :
  13. 13. 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
  14. 14. 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.
  15. 15. 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
  16. 16. 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
  17. 17. 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.).
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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:
  22. 22. 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)
  23. 23. 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)
  24. 24. Dhiabi Hajer & Ben Brahim Sihem Page 15
  25. 25. 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»
  26. 26. 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»
  27. 27. 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 »
  28. 28. 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 »
  29. 29. 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)
  30. 30. 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)
  31. 31. 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)
  32. 32. 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.
  33. 33. 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.
  34. 34. 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)
  35. 35. 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
  36. 36. Dhiabi Hajer & Ben Brahim Sihem Page 27 Figure 14:Modèle conceptuel de données
  37. 37. 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)
  38. 38. 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
  39. 39. 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.
  40. 40. 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,
  41. 41. 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).
  42. 42. 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)
  43. 43. 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).
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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.
  48. 48. 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.
  49. 49. 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
  50. 50. 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 :
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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.
  56. 56. 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
  57. 57. 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)
  58. 58. Dhiabi Hajer & Ben Brahim Sihem Page 49 Figure 29:page carte (les commentaires)
  59. 59. 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.
  60. 60. 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 :
  61. 61. 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
  62. 62. 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
  63. 63. 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é.
  64. 64. 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
  65. 65. 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';
  66. 66. 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
  67. 67. 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>

×