Vous êtes sur la page 1sur 55

République algérienne Démocratique et Populaire

Tagduda tamegdayt tayerfant tazzayrit


Ministère de l’enseignement Supérieur et de la Recherche Scientifique
aylif n uselmed a3layan ake-d unadi amassan

Université Abderrehmane MIRA-BEJAIA


Faculté des Sciences Exactes
département Informatique

Mémoire de fin de cycle


en vue De l’obtention du diplôme de licence en informatique

Théme :

Conception et Réalisation d’un site web


pour une agence de voyages

Réalisé Par :
Melle TIDJET Brenda
Mr TIDJET Khireddine
Melle MESBAH Sonia supervise Par :
Melle MOKHTARI Tassadit Mr RAGAB Nadim
Mr YAHIA CHERIF Koceila
Melle YAHIAOUI Daouia
Mr ZIDANE Larbi

Année Universitaire : 2020-2021


Dédicaces

Louange à Dieu tout-puissant qui nous a permis


de voir ce jour tant attendu.
Nous dédions ce modeste travail et notre profonde
gratitude à :
Nos très chers parents qui ont toujours été là pour
nous et qui nous ont donné un magnifique modèle
de labeur et de persévérance. Nous ne saurions
exprimer notre gratitude Seulement par des mots.
Que Dieu vous protège et vous garde pour nous.
Nos frères et sœurs, à tous les membres de la
famille sans exception et nos amis(es).
Nos professeurs qui nous ont enseigné.
Et à tous qui nous sont chers.

I
Remerciements

Nous remercions Dieu tout-puissant de nous avoir accordé la force et le


savoir et de nous avoir aidés à réaliser ce travail.

Un grand merci à l’ensemble de nos familles et plus particulièrement à nos


parents et nos sœurs et frères pour leur confiance, leurs conseils ainsi que leur
soutien inconditionnel qui nous a permis de réaliser les études pour lesquelles
nous nous destinons et par conséquent ce mémoire.

Nous tenons à remercier chaleureusement Mr Nadim Ragab pour son en-


cadrement, ses conseils et son soutien.

Nous voulons aussi remercier l’ensemble du corps enseignant du départe-


ment informatique spécialement à nos professeurs qui nous ont soutenu tout au
long de notre parcours.

Vu la situation du pays (propagation du covid-19) la pratique d’un stage ne


nous a pas été possible tout de même ça n’a pas représenté un obstacle devant
les membres qui ont fait le nécessaire pour compléter les informations requises
pour ceci.

Nous adressons aussi nos vifs remerciements à tous ceux et celles qui nous
ont accompagné , aidé, soutenu et encouragé de près ou de loin tout au long de
la réalisation de ce travail.

II
Résumé
L’objectif de notre projet de fin de cycle est de réaliser un site web dynamique pour une
agence de voyages, qui va permettre aux visiteurs d’avoir plus d’informations sur l’agence, sur
les détails des voyages organisés et réserver des voyages en ligne.

De même, il permettra aux personnels de l’agence de mieux gérer les données, les voyages
et les réservations des clients ainsi que les idées de voyage.

Le site a été développée en utilisant HTML, CSS, JAVASCRIPT, BOOTSTRAP, JQuery,


PHP, MySQL et UML pour la modélisation.

Mots clés : site web, application web, voyage.

Abstract
The objective of our end-of-cycle project is to create a dynamic web site for a trip, it will
allow visitors to have more information on the agency, on the details of the trips organized and
to book trips online.

Likewise, it will enable agency staff to better manage data, manage customer travel and
reservations, as well as manage travel ideas.

The site was developed using HTML, CSS, JAVASCRIPT, BOOTSTRAP, JQuery, PHP,
MySQL and UML for modeling.

Keywords : web site, web application, travel.

III
Table des matières

Dédicaces I

Remerciements II

Résumé III

Table des matières V

Table des figures VI

Liste des tableaux VII

Liste des abréviations VIII

Introduction générale 1

1 Contexte général du projet 3


1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Définitions et généralités . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.1 site web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.2 Les sites web statiques et dynamiques . . . . . . . . . . . . . . . . . . . . 3
1.3 Les technologies et langages de développement . . . . . . . . . . . . . . . . . . . 4
1.3.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.4 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.5 SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Les environnements de développement et les systèmes de gestion de bases de
données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.1 MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.2 XAMPP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.3 Serveur web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.4.4 PHPMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.5 Visual Studio code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.6 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.7 Jquery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.4.8 Visual Paradigm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.5 Démarche pattern de développement et approche de gestion de projets . . . . . 8

IV
1.5.1 Approche de gestion de projet . . . . . . . . . . . . . . . . . . . . . . . . 8
1.5.2 Les designs patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.6 Cahier des charges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.6.1 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.6.2 Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.6.3 Analyse des besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . 11
1.6.4 Identification des besoins non-fonctionnels . . . . . . . . . . . . . . . . . 11
1.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2 Conception 13
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.1 Diagramme de cas d’utilisation : . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.2 Diagramme de séquence : . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.3 Diagramme de classe : . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.4 Diagramme de déploiement : . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3 Conception . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.1 Acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.3.2 Diagrammes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3 Les maquettes IHM 29


3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.1 Interfaces utilisateur et Client . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2.2 Interfaces Administrateur . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Conclusion generale 43

Bibliographie 46

V
Table des figures

2.1 Diagramme de déploiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15


2.2 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.4 Diagramme de séquence du cas d’utilisation ”Inscription ” . . . . . . . . . . . . 18
2.5 Diagramme de séquence du cas d’utilisation ”Connexion ” . . . . . . . . . . . . 19
2.6 Diagramme de séquence du cas d’utilisation ”Contacter ” . . . . . . . . . . . . . 20
2.7 Diagramme de séquence du cas d’utilisation ”Gérer les voyages /Omra” . . . . . 21
2.8 Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté client” . . 22
2.9 Diagramme de séquence du cas d’utilisation ”Modifié profile” . . . . . . . . . . . 23
2.10 Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté admin” . 24
2.11 Diagramme de séquence du cas d’utilisation ”Gérer les validations ” . . . . . . . 25
2.12 Diagramme de séquence du cas d’utilisation ”Gérer les idées” . . . . . . . . . . . 26
2.13 Diagramme de séquence du cas d’utilisation ”Gérer les dépliantes” . . . . . . . . 27

3.1 Page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30


3.2 Page d’accueil "slider-carte de géolocalisation" . . . . . . . . . . . . . . . . . . . 30
3.3 Page d’accueil "slider-vidéo explicative" . . . . . . . . . . . . . . . . . . . . . . . 30
3.4 Page d’accueil "Liste des voyages" . . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.5 Page d’accueil "plus d’informations" . . . . . . . . . . . . . . . . . . . . . . . . . 31
3.6 Page d’accueil "réserver un voyage" . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.7 Page d’accueil "footer" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.8 Page contacte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.9 Page dépliante touristique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
3.10 Page idées voyages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.11 Page plus d’informations sur l’idée . . . . . . . . . . . . . . . . . . . . . . . . . 34
3.12 Page connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.13 Page inscription . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.14 Page profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.15 Page modifié profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.16 Page ajouté un voyage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.17 Page ajouté omra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.18 Page de la liste des voyages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.19 Page modifié omra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.20 Page modifié voyage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.21 Page Ajouté une idée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.22 Page Gérer les idées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.23 Page Gérer les réservations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
3.24 Page Liste des validations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

VI
Liste des tableaux

1.1 Vue d’ensemble des Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.1 tableau descriptif du cas d’utilisation "Inscription" . . . . . . . . . . . . . . . . . 18


2.2 tableau descriptif du cas d’utilisation "Connexion" . . . . . . . . . . . . . . . . . 19
2.3 tableau descriptif du cas d’utilisation "Contacter" . . . . . . . . . . . . . . . . . 20
2.4 tableau descriptif du cas d’utilisation "Gérer les voyages /Omra" . . . . . . . . . 22
2.5 tableau descriptif du cas d’utilisation "Gérer la réservation coté client" . . . . . . 23
2.6 tableau discriptif du cas d’utilisation "Modifié profile" . . . . . . . . . . . . . . . 24
2.7 tableau discriptif du cas d’utilisation "Gérer la réservation côté admin" . . . . . 25
2.8 tableau ddescriptif du cas d’utilisation "Gérer les validations " . . . . . . . . . . 26
2.9 tableau descriptif du cas d’utilisation "Gérer les idées" . . . . . . . . . . . . . . . 27
2.10 tableau descriptif du cas d’utilisation "Gérer les dépliantes" . . . . . . . . . . . . 28

VII
Liste des abréviations

CSS Cascading Style Sheet.

HTML HyperText Markup Language.

HTTP Hypertext Transfer Protocol.

MySQL My Structured Query Language.

PHP Hypertext Preprocessor.

SGBD Systéme de gestion de base de données.

SGBDR Systéme de gestion de base de données relationnelle.

SQL Structured Query Language.

UML Unifined Modeling Language.

URL Uniform Resource Locator.

VO Voyage organisé

XAMPP Cross-Platform, Apache, MySQL, PHP et Perl.

XML Extensible Markup Language.

VIII
Introduction générale

Depuis quelques années, l’importance qu’occupe l’informatique dans la société ne fait l’ob-
jet d’aucun doute, sur tout avec l’apparition de l’internet et le web, ce qui fait de l’ordinateur
un outil indispensable pour l’homme, et ce dans presque tous les secteurs de la vie. Il est utilisé
notamment pour le traitement de l’information nécessaire dans le but d’automatiser tout ou
une patrie de presque tous les domaines de la vie quotidienne ou professionnelle.

Jusqu’à présent, l’ordinateur reste le moyen le plus sûr pour le traitement et la sauve-
garde de l’information. Cette innovation a permis d’informatiser les systèmes de données des
entreprises et particulièrement des agences de voyages, ce qui est la partie essentielle dans leur
développement aujourd’hui.

De nos jours il existe encore des agences de voyages qui enregistrent toutes les informa-
tions manuellement sur des supports en papier ce qui engendrait beaucoup de problèmes tels
que la perte de temps considérable dans la recherche de ces informations ou la dégradation de
ces dernières.Ainsi pour tout type de réservation, mise à jour, actualité et tout renseignement
il est nécessaire aux clients de se déplacer. Cela pose un grand problème pour les personnes
limitées par les contraintes de : temps, santé, distance. . .

Personne ne peut nier l’évolution de la technique. Celle-ci a atteint son plus haut degré,
pourtant elle ne cesse pas d’évoluer.
L’évolution de la technologie de l’information a eu un impact considérable sur le marché du tou-
risme. Ce dernier étant la plus grande source du revenu mondial a attiré l’Internet, notamment
les géants du Web, tels que Google, Facebook, Microsoft, etc. ayant changé les règles de jeu.
Des adaptations s’imposent donc aux agences de voyages pour rester pertinentes et solvables.

Dans ce sens, nous avons réfléchi à la réalisation d’un site web pour une agence de voyages
nommée « TYMZ TRAVEL », dans l’objectif est de faciliter la tâche de réservation d’un voyage
pour les clients, ainsi la gestion pour les administrateurs et voir notre société accéder à des ser-
vices de qualité.

1
Afin d’aboutir à la réalisation de notre site, notre travail est réparti en trois chapitres
qu’on peut décrire comme suit :

Le premier chapitre est une présentation de « contexte général de projet ». Dans la


première partie, nous donnons une définition globale de notre thème« site web » et puis, nous
présentons les outils, les langages et les démarches pattern de développement utilisés. Dans
la deuxième partie, nous décrivons le cahier des charges dont se trouvent la problématique et
l’objectif ainsi tous les besoins de l’utilisateur.

Le deuxième chapitre est consacré aux « diagrammes UML ». On commence par donner
une définition du langage UML et ses différents modèles. Puis, nous établissons le diagramme de
cas d’utilisation, le diagramme de classes et le diagramme de déploiement, ainsi les diagrammes
de séquences système représentant l’enchainement des opérations.

Le dernier chapitre concerne « l’interface graphiques ». Nous exposons notre travail pra-
tique par des schémas et des captures en détails étape par étape afin de mieux présenter les
fonctionnalités de notre site et son importance.

Enfin, nous conclurons ce travail par une conclusion générale résume les déférents points
de notre mémoire et les connaissances acquises durant la réalisation de ce projet.

2
Chapitre 1

Contexte général du projet

1.1 Introduction

Ce chapitre présente le contexte et les objectifs de notre projet de fin de cycle. Nous
allons commencer par quelques brèves définitions sur les développements web et ses généralités,
langages, les environnements de développements et les SGBD ainsi que les approches de gestions
de notre projet. Pour terminer ce chapitre nous allons aborder la problématique et les raisons
qui nous ont amené à nous lancer dans ce travail.

1.2 Définitions et généralités


1.2.1 site web

Un site web est un ensemble cohérent de pages et des ressources inter reliées entre elles
par des liens hypertextes constituées essentiellement de texte, enrichi par des images, des vidéos
d’animation et de son. Chaque page dispose de sa propre adresse que l’on nomme une URL
(Universal Ressource Locator). [1]
Un site Web ou site internet est hébergé sur un serveur Web, que nous nous accédons via un
navigateur Internet comme Mozilla Firefox, Google chrome, opéra etc.

1.2.2 Les sites web statiques et dynamiques

Site statique : sont des sites réalisés uniquement à l’aide des langages
HTML et CSS. Ils fonctionnent très bien mais leur contenu ne peut pas être
mis à jour automatiquement.
Ce n’est pas très pratique quand nous devons mettre à jour notre site plusieurs
fois. Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine
», pour présenter par exemple une entreprise, mais sans aller plus loin.
Ce type de site se fait de plus en plus rare aujourd’hui, car dès que nous ra-
joutons un élément d’interaction (comme un formulaire de contact), nous nous

3
Chapitre1 Contexte général du projet

parlons plus de site statique mais de site dynamique.

Site dynamique : les pages du site qui le compose peuvent être modifiable
par les visiteurs. De plus entre deux visites sur un même site le contenu de
la page peut-être diffère sans action de l’administrateur du site internet, par
exemple, un site dynamique désigne chaque portail, blog ou site e-commerce.
Le serveur qui fait fonctionner le site utilise une technique de Scripting (PHP,
Ruby, Python) ainsi qu’une base de données comme MySQL.

1.3 Les technologies et langages de développement

Dans un esprit de défi, et de vouloir mettre en œuvre les connaissances


qu’on a acquises durant notre formation, nous avons choisi HTML, CSS, JA-
VASCRIPT et PHP des langages qui sont très utilisés, notamment par un grand
nombre de programmeurs professionnels ce qui en fait des langages de haut ni-
veau.

1.3.1 HTML

HTML (Le HyperText Markup Language) est le format de données conçu


pour représenter les pages web. C’est un langage de balisage permettant d’écrire
de l’hypertexte. Il permet également de structurer sémantiquement et de mettre
en forme le contenu des pages, d’inclure des ressources multimédias dont des
images, des formulaires de saisie et des programmes informatiques. Il est souvent
associé à des langages de programmation tels que le JavaScript, et des formats
de présentation à savoir les feuilles de style en cascade. [2]

1.3.2 CSS

Le CSS (Cascading Style Sheets) qui peut se traduire par feuille de style en
cascade, est un langage informatique utilisé sur internet pour mettre en forme
les fichiers HTML ou XML. Ainsi les feuilles de style comprennent du code qui
permet de gérer des designs d’une page html.
L’avantage de l’utilisation d’un fichier CSS pour la mise en forme d’un site

4
Chapitre1 Contexte général du projet

réside dans la possibilité de modifier tous les titres du site en une seule fois en
modifiant une seule partie du fichier CSS. [3]

1.3.3 JavaScript

JavaScript est un langage de programmation de script principalement em-


ployé dans les pages web interactives mais aussi pour les serveurs. 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, mais qui sont chacun équipé de constructeurs permettant de créer
leurs propriétés, et notamment une propriété de prototypage qui permet d’en
créer des objets héritiers personnalisés. [4]

1.3.4 PHP

PHP, ou préprocesseur hypertexte, est un langage de programmation web


côté serveur, ce qui veut dire que c’est le serveur qui va interpréter le code
PHP à savoir langage de script. Principalement utilisé pour concevoir des sites
Web dynamiques. Il est sous licence libre, donc tout le monde peut l’utiliser
gratuitement. Le langage PHP est généralement associé aux serveurs de bases
de données MySQL et aux serveurs Apaches. Le PHP permet d’ajouter des
fonctionnalités de plus en plus complexes, d’avoir des sites dynamiques, de
pouvoir gérer une administration de boutique en ligne, de modifier un blog, de
créer des réseaux sociaux etc. [5]

1.3.5 SQL

SQL est un langage qu’on utilise pour gérer des bases de données. C’est
un langage de base pour les bases de données telles que MySQL, SQL Server,
Oracle, etc. SQL signifie (Structure Query Langage) et il peut être utilisé pour
gérer le système de gestion de base de données relationnelle (SGBDR). Ceci
peut également être utile pour accéder, manipuler et mettre à jour des données
dans la base de données à l’aide de certaines commandes. [6]

5
Chapitre1 Contexte général du projet

1.4 Les environnements de développement et les sys-


tèmes de gestion de bases de données

La création et le développement d’un tel système sont un processus qui


implique quelques étapes bien définies, et nécessite l’utilisation de quelques
outils que nous allons citer dans ce qui suit :

1.4.1 MySQL

MySQL est un serveur de bases de données open source, il stocke les don-
nées dans des tables séparées plutôt que de tout rassembler dans une seule table,
cela améliore la rapidité et la souplesse de l’ensemble. Les tables sont reliées
par des relations définies, qui rendent possible la combinaison de données entre
plusieurs tables durant une requête, ce logiciel fonctionne sous plusieurs sys-
tèmes d’exploitation tels que Windows et Linux, il est très souvent utilisé avec
apache et le langage PHP. [6]

1.4.2 XAMPP

XAMPP, acronyme de Cross-Platform (X), Apache (A), My Sql (M), PHP


(P) et Perl (P) est un ensemble de logiciels libres, open source et multiplate-
forme développé par des amis Apaches. Il dispose des distributions pour le
serveur Apache, Maria Db, PHP et Perl. Grâce à la souplesse de son utilisation,
XAMPP permet de développer des applications de script côté serveur basées
sur HyperText Preprocessor (PHP) et Perl sans devoir utiliser un serveur Web
distant. [7]

1.4.3 Serveur web

Un serveur web est un ordinateur connecté à Internet et sur lequel sont


hébergés des sites web. Le logiciel fédérateur, sur un serveur web, est le serveur
HTTP (Apache, le plus fréquemment), auquel vient s’adjoindre un interpréteur
de langage dynamique (PHP dans la plupart des cas), un gestionnaire de base
de données (tel que My Sql) et d’autres programmes. La fonction d’un serveur
web est de répondre aux requêtes des navigateurs Internet (Internet Explorer,
Firefox, Chrome, Opéra, Safari, ...). [8]

6
Chapitre1 Contexte général du projet

1.4.4 PHPMyAdmin

Il s’agit de l’une des plus célèbres interfaces pour gérer une base de données
MySQL sur un serveur PHP. Cette interface pratique permet d’exécuter, très
facilement et sans grandes connaissances dans le domaine des bases de données,
de nombreuses requêtes comme les créations de tables de données, les insertions,
les mises à jour, les suppressions, les modifications de structure de la base de
données sans avoir à écrire de requêtes SQL ce qui permet de gagner un temps
précieux. [9]

1.4.5 Visual Studio code

Visual Studio Code est un éditeur de code open source, léger et puissant.
Il est livré avec un support intégré pour JavaScript, Type Script et Node.js.
Il possède un riche écosystème d’extensions pour d’autres langages (tels que
C++, C, Java, Python, PHP, Go et plus encore) et des runs Times (tel que
.NET et Unity) [10]

1.4.6 Bootstrap

Bootstrap est devenu l’un des Frameworks front-end et des projets open
sources les plus populaires pour le développement des projets mobiles-firsts et
responsives sur le Web, il intègre de l’HTML, CSS et JavaScript. Pour des
typographies, des boutons et des interfaces de navigations, BootStrap fournit
des outils avec des styles déjà en place. La dernière version est sortie en mai
2020. [11]

1.4.7 Jquery

Jquery est une bibliothèque Javascript gratuite, libre et multiplate-forme.


Compatible avec l’ensemble des navigateurs Web (Internet Explorer, Safari,
Chrome, Firefox, etc.), elle a été conçue et développée en 2006 pour faciliter
l’écriture de scripts. Il s’agit du framework Javascript le plus connu et le plus
utilisé. Il permet d’agir sur les codes HTML, CSS, Javascript et AJAX et s’exé-
cute essentiellement côté client. [12]

7
Chapitre1 Contexte général du projet

1.4.8 Visual Paradigm


Visual Paradigm est un logiciel qui permet aux programmeurs de mettre
en place des diagrammes. Il possède plusieurs options permettant une large
possibilité de modélisation en UML. [13]

1.5 Démarche pattern de développement et approche de


gestion de projets

la gestion de projets est l’application des techniques de gestion pendant le


cycle de vie du projet ce qui permet d’atteindre des objectifs précis. Elle joue
un rôle crucial dans l’exécution et l’accomplissement des objectifs. La méthode
de gestion de projets aide le manager à planifier, initier et mettre en œuvre le
projet. Parmi ces méthodologies nous avons opté pour la méthode agile scrum.
[14]

1.5.1 Approche de gestion de projet

Scrum

Est un cadre méthodologique qui révolutionne la manière dont on gère un projet


il permet de délivrer, de modifier un projet, un produit ou une fonctionnalité
rapidement.[14]

La méthode agile

Elle est basée sur des rôles :


- L’équipe :composée de développeurs de testeur d’architectes et tous autres
métiers nécessaires à la résolution du projet.
- Le product owner :définis le périmètre du projet et compilent les fonction-
nalités voulues par les utilisateurs sous forme d’user stories.
- Scrum Master :assure la communication entre les membres du groupe.

Et des processus :
- User story : Elle décrit l’expérience utilisateur en utilisant le langage, le
vocabulaire et la terminologie de l’usager.

8
Chapitre1 Contexte général du projet

- Product backlog : C’est un miroir de ce qui faut faire pour réaliser les be-
soins du client et de délivrer la user storie. Ce Product backlog va constamment
évoluer afin de refléter les nouveaux besoins du client.
- Sprint : Pour la réalisation du projet il faut Commencer par une réunion de
planifications dénommé le sprint planning meeting on nous puise les éléments
prioritaires de product backlog qui sera développé dans les sprints. Dans chaque
sprint qui dure de 4 à 6 semaines on aura : le développement, le contrôle de
qualité et la livraison. [14]

1.5.2 Les designs patterns

Les design patterns ou modèles de conception décrivent des organisations


pratiques de classes objets. Ces organisations résultent souvent d’une concep-
tion empirique, le concepteur objet tenté de faciliter la réutilisation et la main-
tenance du code. L’architecte objet se construit petit à petit un « panier » de
modèles qui sont :
les modèles de création, de structure et de comportement.
Si on voulait faire un parallèle avec UML, les deux premiers modèles seraient
liés à des diagrammes statiques (de classes) alors que le dernier modèle est da-
vantage lié à un diagramme dynamique (de séquence). [14]

buts
Création Structure Comportement
Portee Classe Factory method Adapter Interpreter
Template Methode
Objet Abstract Factory Adapter Chain of responsibility
Builder Bridge Cammand
Prototype Composite Iterator
Singleton Decorator Mediator
Fcade Memento
Flyweight Observer
Ploxy State
Strategy
Visitor

Table 1.1 – Vue d’ensemble des Design Patterns

9
Chapitre1 Contexte général du projet

1.6 Cahier des charges

1.6.1 Problématique

Dans un monde où pratiquement tout est automatisé et l’interconnexion


est indispensable y a des agences de voyages qui utilisent jusqu’à nous jour des
dossiers papiers ou quelques fiches Word ou Excel pour leurs gestion, ce qui
cause un certain nombre de difficultés essentiellement liées à l’exécution ma-
nuelle des tâches citant :

- Mal organisation des données importantes.


- un manque de communication entre les clients et l’agence de voyages.
- La qualité de service rendu est insatisfaisante.
- Une consommation excessive du papier.
- Risque de la perte de données.
- Obligation de vérifier la disponibilité des voyages lors de chaque réservation.
- L’ajout d’un nouvel élément (idée voyage, voyage organisé) par le responsable
implique une autre mise à jour manuelle.
- Afin de suivre la mise à jour et les actualités de l’agence ainsi les réservations,
il est nécessaire aux clients de se déplacer.

1.6.2 Objectif
Vu le risque des problèmes déjà citer, nous avons eu l’idée de la création
d’un site web pour cette agence. Qui va être dynamique, baser sur la simplicité
et l’efficacité qui résoudre toutes les difficultés et qui permettent :

- D’augmenter la visibilité de l’agence de voyages (site web implique que l’agence


est ouverte 24/24 et 7/7).
- Aux clients d’être à jour par apport aux actualités, mises à jour et les nou-
veaux voyages proposaient et également faire sa réservation sens déplacer.
- Aux administrateurs de gérer les voyages et les réservations des clients ainsi
les validations sens aucun risque de perdre les informations.
- De gain de temps pour tout les utilisateurs (le site web sera facile à trouver,
attirant et professionnels).

10
Chapitre1 Contexte général du projet

1.6.3 Analyse des besoins fonctionnels


Dans cette partie nous détaillerons les fonctionnalités que le système doit
fournir aux différents acteurs :
- Inscription : Cette fonctionnalité est obligatoire pour avoir accès aux réser-
vations. Ainsi, un utilisateur doit s’inscrire afin de devenir client et avoir ses
opportunités.
- Connexion : Un Client et un administrateur doivent se connecter afin de
gérer leurs fonctionnalités.
- Contacte : les fonctionnalités (une messagerie, une adresse, un email des
réseaux sociaux. . . ) qui permettent de contacter l’agence de voyages.
- Espace membre : un espace pour afficher les validations, réservations et les
informations des clients.
- Consulter les services : Un utilisateur peut consulter les offres proposées
(voyages organisés, omra, les dépliantes, des diverses idées sur des destinations
...).
- Gérer les voyages : Possibilité d’ajout, modification et suppression des
voyages.
- Réservations : Un client peut réserver un voyage organisé, une omra... en
prennent en considération le nombre de place qu’il veut reserver ou l’annuler.
- Gérer les réservations : un administrateur pourra valider ou supprimer les
réservations.
- Gérer les validations : un administrateur peut supprimer une validation (à
la demande du client).
- Gérer les dépliantes : ajouter ou supprimer une dépliante.
- Gérer les idées de voyages : ajouter ou supprimer une idée.

1.6.4 Identification des besoins non-fonctionnels


Les besoins non fonctionnels sont des indicateurs de qualité de l’exécution
des besoins fonctionnels, ils permettent d’éviter plusieurs incohérences dans le
système.

La sécurité :
- Protéger l’accès à la base de données en établissant une contrainte de contrôle
qui va empêcher toutes personnes d’y accéder sauf ceux qui ont les droits d’ac-
cès.

11
Chapitre1 Contexte général du projet

- Crypter quelques données avant leurs insertions.


- Chaque client qui désire réserver doit s’inscrire (possède un compte).
- Un client n’accède qu’aux réservations qui le concernent.
- L’administration du site est effectuée par la personne appropriée (qui possède
un compte spécial et son mot de passe).

La performance :
- Le temps de réponse de l’application web doit être précis.

L’interface :
- L’interface doit respecter les principes des interfaces Homme/Machine (IHM)
tel que l’ergonomie et la fiabilité.

La convivialité :
- Le site doit être simple est facile à manipuler même par des non experts.
- Le site doit avoir un contrôleur des champs de saisis, pour éviter l’introduction
des informations qui ne correspondent pas aux types des champs.

L’ergonomie :
-Le site doit inspirer des couleurs et du logotype de l’agence.

1.7 Conclusion
Ce chapitre nous a servi à vous présenter le cadre de notre projet. Nous
avons présenté la méthode de développement optée ainsi ses objectifs et ses
besoins auxquels notre projet doit répondre, ce qui nous a permis d’avoir une
idée sur la nécessité de la création d’un site web pour organiser cette agence de
voyages.
Dans le chapitre qui se suit nous allons détaillé la conception de notre travail.

12
Chapitre 2

Conception

2.1 Introduction
Ce chapitre présente la conception de notre projet, commençant par donner
des définitions sur le langage UML et ses diagrammes, puis nous spécifions le
rôle de chaque acteur qui interagit avec le système. Enfin, nous modélisons ceci
avec différents diagrammes associer par des explications.

2.2 UML
L’UML (Unifined Modeling Language) est un langage de modélisation gra-
phique et textuelle, destiné à comprendre et décrire des besoins, spécifier et
documenter des systèmes et concevoir des solutions, celui-ci permet d’unifier
les notations et les concepts orientés objet. [15]

2.2.1 Diagramme de cas d’utilisation :


Les diagrammes de cas d’utilisation modélisent le comportement d’un sys-
tème, permettant de capturer les exigences du système, décrivent les fonctions
générales et la portée d’un système et identifient également les interactions entre
le système et ses acteurs.
Les cas d’utilisation et les acteurs dans les diagrammes de cas d’utilisation
décrivent ce que le système fait et comment les acteurs l’utilisent. [16]

2.2.2 Diagramme de séquence :


Diagramme de séquence permet de décrire les scénarios de chaque cas d’uti-
lisation en mettant l’accent sur la chronologie des opérations en interactions
avec les objets. [16]

13
Chapitre2 Conception

2.2.3 Diagramme de classe :


Diagramme de classe représente la description statique du système en in-
tégrant dans chaque classe la partie dédiée aux données et celles consacrée aux
traitements. Ce dernier est le diagramme pivot de l’ensemble de la modélisation
d’un system. [16]

2.2.4 Diagramme de déploiement :


Un diagramme de déploiement fait partie de la catégorie des diagrammes
structurels, il décrit le déploiement physique des informations générées par le
logiciel (ou site) sur des composants matériels.[16]

2.3 Conception
2.3.1 Acteurs
Un acteur représente l’abstraction d’un rôle jouée par des entités externes
(utilisateur, dispositifs matériels ou autres système) qui interagit directement
avec le système étudié.[15]
Les acteurs qui interagissent dans notre système sont :
L’administrateur, L’utilisateur, Le client.

L’administrateur : C’est la personne qui veille sur toutes les mises à jour
qui concernent le site web.
Son role est :

— Authentification.
— Gérer les publications(voyage organisé, omra, dépliante, idée voyage).
— Contacter les clients par email pour leurs répondre ou transmettre des
remarques.
— Gérer les réservations des clients et leurs validations.
— plus les rôles d’un client.

L’utilisateur : c’est une personne qui est en train de fouiller sur le site
web. C’est un utilisateur inconnu, donc il n’est pas encore un client.
Son rôle est ;

— Inscription.

14
Chapitre2 Conception

— Consultaion des offres (les voyages, omra, dépliante, idée voyage).


— Contacter.

Client : : c’est une personne ayant déjà un compte sur notre site web, il
peut donc faire des réservations.
Son rôle est :

— Authentification.
— Consultaion des offres (les voyages, omra, dépliante, idée voyage).
— Contacter.
— Réserver voyage organisé et omra.
— annulé une réservation.

2.3.2 Diagrammes

Diagramme de déploiement :

Figure 2.1 – Diagramme de déploiement

15
Chapitre2 Conception

Diagramme de classe :

Figure 2.2 – Diagramme de classe

16
Chapitre2 Conception

Diagramme de cas d’utilisation :

Figure 2.3 – Diagramme de cas d’utilisation

17
Chapitre2 Conception

Diagramme de séquence :

1. Diagramme de séquence du cas d’utilisation ”Inscription” :

Figure 2.4 – Diagramme de séquence du cas d’utilisation ”Inscription ”

v Tableau descriptif du cas d’utilisation "Inscription"


Cas d’utilisation Inscription
Acteur Client (non inscrit)
Objectif Inscription
Séquencement Le cas d’utilisation commence lorsque le client clique sur le bouton
d’inscription
Scénario nominal -le système affiche le formulaire d’inscription
-le client remplit le formulaire
-le system envoie une requête de vérification
-la base de données vérifie l’email
-la base de données vérifie le mot de passe saisie
-le système affiche un message de succès ou d’erreur au client
-le système enregistre les données

Table 2.1 – tableau descriptif du cas d’utilisation "Inscription"

18
Chapitre2 Conception

2. Diagramme de séquence du cas d’utilisation ”Connexion ” :

Figure 2.5 – Diagramme de séquence du cas d’utilisation ”Connexion ”

v Tableau descriptif du cas d’utilisation "Connexion"


Cas d’utilisation. Connexion
Acteur Client (utilisateur inscrit)
Objectif Accéder à son compte
Séquencement Le cas d’utilisation commence lorsqu’un utilisateur souhaite accéder
à son espace membre
Scénario nominal -Le client clique sur l’onglet de connexion
-le système affiche la page de connexion
-le client saisit son email et son mot de passe
-le système envoie une requête de vérification vers la base de données

-la base des données vérifie les données


-le système affiche la page d’accueil ou un message d’erreur

Table 2.2 – tableau descriptif du cas d’utilisation "Connexion"

19
Chapitre2 Conception

3. Diagramme de séquence du cas d’utilisation ”Contacter” :

Figure 2.6 – Diagramme de séquence du cas d’utilisation ”Contacter ”

v Tableau descriptif du cas d’utilisation "Contacter"


Cas d’utilisation Contacter
Acteur Client
Objectif Contacter l’admin
Séquencement Le cas commence lorsque le client veut envoyer un message à l’ad-
min
Scénario nominal -Le client clique sur le bouton contact
-Le système affiche le formulaire de contact
-Le client remplit le formulaire
-Le système vérifie l’email
-Le system envoie le message à l’agence de voyages

Table 2.3 – tableau descriptif du cas d’utilisation "Contacter"

20
Chapitre2 Conception

4. Diagramme de séquence du cas d’utilisation ”Gérer les voyages /Omra” :

Figure 2.7 – Diagramme de séquence du cas d’utilisation ”Gérer les voyages /Omra”

21
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation "Gérer les voyages /Omra"

Cas d’utilisation. Gérer les voyages /Omra


Acteur Administrateur
Objectif La gestion des voyages
Séquencement Le cas commence lorsque l’administrateur accède à la page gérer
voyages ou omra
Scénario nominal -L’admin doit d’abord se connecter à son espace membre
-Le système affiche la page d’accueil administrateur
-L’admin demande de gérer les voyages
-Le system affiche la page de gestion de voyage
-L’admin peut ajouter, supprimer ou modifier un voyage ou omra
-Le système envoie une requête de vérification vers la base de don-
nées
-le système retourner à la page gérer voyage (dans le cas supprimer
ou modifier).

Table 2.4 – tableau descriptif du cas d’utilisation "Gérer les voyages /Omra"

5. Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté


client” :

Figure 2.8 – Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté client”

v Tableau descriptif du cas d’utilisation "Gérer la réservation côté client"

22
Chapitre2 Conception

Cas d’utilisation. Gérer la réservation côté client


Acteur Client (inscrit)
Objectif Pouvoir ajouter ou annuler une réservation
Séquencement Le cas d’utilisation commence lors de la connexion d’un client à son
espace membre
Scénario nominal -le client choisir d’annuler ou d’ajouter une réservation
Dans le cas d’ajout :
-le client doit d’abord accéder aux voyages
-le système affiche les voyages
-le client clique sur réserver un voyage
-le client remplit le formulaire de réservation
-le système envoie une requête d’ajout des données vers la BDD
-le système affiche le profile avec le voyage réservé
Dans le cas d’annulation :
-le client accede à son profile
-le client clique sur annuler le voyage
-le système envoie une requête d’annulation des données vers la
BDD
-le système affiche le profil sans le voyage déjà réservé

Table 2.5 – tableau descriptif du cas d’utilisation "Gérer la réservation coté client"

6. Diagramme de séquence du cas d’utilisation ”Modifié profile” :

Figure 2.9 – Diagramme de séquence du cas d’utilisation ”Modifié profile”

23
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation ”Modifié profile”


Cas d’utilisation. Modifie profile
Acteur Client (inscrit)
Objectif Modification des données sur le profile
Séquencement Le cas d’utilisation commence lorsqu’un client souhaite modifier
son profile
Scénario nominal -le client doit d’abord se connecter à son espace membre
-le client accède à son profile
-le système affiche le profile
-le client clique sur modifier profile
-le système affiche le formulaire de modifications
-le client modifie le profile
-le système envoie une requête de vérification à la base de données
-la base de données vérifie les informations
-le system affiche le profile avec les modifications apportés.

Table 2.6 – tableau discriptif du cas d’utilisation "Modifié profile"

7. Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté


admin” :

Figure 2.10 – Diagramme de séquence du cas d’utilisation ”Gérer la réservation côté admin”

24
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation ”Gérer la réservation côté admin”

Cas d’utilisation Gérer la réservation côté admin


Acteur Administrateur
Objectif Pouvoir valider ou supprimer une réservation
Séquencement Le cas d’utilisation commence lors de la connexion de l’admin à son
espace membre
Scénario nominal -l’admin clique sur le drop down administrateur
-le système affiche la liste d’options
-l’admin clique sur le bouton gérer les réservations
-le système affiche la liste des réservations
-l’admin clique sur valider ou supprimer une réservation
-le système envoie une requête de vérification vers la bdd
-la base de données valide la requête
-le système afficher un message de validation (dans le cas de la
validation) ou afficher la liste des réservations restantes (dans le
cas de la suppression).

Table 2.7 – tableau discriptif du cas d’utilisation "Gérer la réservation côté admin"

8. Diagramme de séquence du cas d’utilisation ”Gérer les validations ” :

Figure 2.11 – Diagramme de séquence du cas d’utilisation ”Gérer les validations ”

25
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation ”Gérer les validations ”


Cas d’utilisation Gérer les validations
Acteur Administrateur
Objectif Pouvoir supprimer une validation
Séquencement Le cas d’utilisation commence lors de la connexion de l’admin à son
espace membre
Scénario nominal -L’admin clique sur le drop down administrateur
-le système affiche la liste d’options
-l’admin clique sur le bouton gérer les validations
-le système affiche la liste des validations
-l’admin clique sur supprimer la validation
-le système envoie une requête de suppression vers la base de don-
nées
-le système affiche la liste des validations restantes à l’administra-
teur.

Table 2.8 – tableau ddescriptif du cas d’utilisation "Gérer les validations "

9. Diagramme de séquence du cas d’utilisation ”Gérer les idées” :

Figure 2.12 – Diagramme de séquence du cas d’utilisation ”Gérer les idées”

26
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation ”Gérer les idées”


Cas d’utilisation. Gérer les idées
Acteur Administrateur
Objectif Gestion des idées
Séquencement Le cas commence lorsque l’admin souhaite ajouter ou supprimer
une idée
Scénario nominal -L’admin doit d’abord se connecter à son espace membre
-L’admin cliquez sur le drop down administrateur
-Le système affiche la liste d’option
-L’admin clique sur le bouton gérer les idées de voyage :
-Le système affiche la liste des idées voyages
-L’admin peut supprimer une idée
-Le système envoie une requête de suppression à la base de données
-La base supprime l’idée de sa table
-L’admin clique sur le bouton ajouter idée voyage :
-L’admin remplit le formulaire d’ajout
-Le système ajoute les données à la base de données
-La base ajoute l’idée à sa table correspondante
-Le système affiche un message d’ajout avec succès

Table 2.9 – tableau descriptif du cas d’utilisation "Gérer les idées"

10. Diagramme de séquence du cas d’utilisation ”Gérer les dépliantes” :

Figure 2.13 – Diagramme de séquence du cas d’utilisation ”Gérer les dépliantes”

27
Chapitre2 Conception

v Tableau descriptif du cas d’utilisation ”Gérer les dépliantes”


Cas d’utilisation. Gérer les dépliantes
Acteur Administrateur
Objectif Gestion des dépliantes
Séquencement Le cas commence lorsque l’admin souhaite ajouter ou supprimer
une dépliante
Scénario nominal -L’admin doit d’abord se connecter à son espace membre
-L’admin clique sur le drop down service
-Le système affiche la liste d’option
-L’admin clique sur le bouton dépliante touristique
-L’admin peut ajouter ou supprimer une dépliante
-afficher la listes des dépliantes

Table 2.10 – tableau descriptif du cas d’utilisation "Gérer les dépliantes"

2.4 Conclusion
Dans ce chapitre nous avons défini les différents diagrammes et Les Acteurs
du système ainsi que le rôle de chaque "un, puis nous avons décrit le diagramme
de déploiement, le diagramme de cas d’utilisation globale et nous avons établi
un diagramme de séquence pour les cas d’utilisations essentielles. Enfin, nous
avons représenté le diagramme de classe détaillé ainsi que leurs explications.

28
Chapitre 3

Les maquettes IHM

3.1 Introduction

Dans ce chapitre, nous allons faire une description sur les différents inter-
faces qui correspondent au site web « TYMZ travel » en associant pour chacune
un capture de site.

3.2 Les interfaces


3.2.1 Interfaces utilisateur et Client
v Page d’accueil :

La page d’accueil est la première page qui s’affiche à l’utilisateur lors de


l’ouverture du site. De ce fait on a mis un slider de trois sections qui com-
prennent une petite description de notre agence, une vidéo explicative de toutes
les étapes qui permettra de réserver un voyage ainsi une carte de géolocalisa-
tion qui permet aux utilisateurs de nous localiser plus facilement. On a aussi
introduit un menu drop down bien organisé pour pouvoir surfer et rechercher
tous les services disponibles tout en mettant en valeur le logo.

29
Chapitre3 Les maquettes IHM

Figure 3.1 – Page d’accueil

Figure 3.2 – Page d’accueil "slider-carte de géolocalisation"

Figure 3.3 – Page d’accueil "slider-vidéo explicative"

30
Chapitre3 Les maquettes IHM

On a aussi introduit des cartes qui représentent les différents voyages or-
ganisés proposés par notre agence. ces cartes permettent aussi d’afficher plus
d’informations en cliquant sur le bouton « plus » et aussi de réserver en cliquant
sur le bouton « réserver », si le client est connecté un formulaire apparaît sinon
le site lui envoie une alerte pour se connecter.

Figure 3.4 – Page d’accueil "Liste des voyages"

Bouton « plus » : cette figure représente la description et le programme


d’un voyage proposé par notre agence et celui-ci apparaît lorsqu’on clique sur
le bouton « plus ».

Figure 3.5 – Page d’accueil "plus d’informations"

31
Chapitre3 Les maquettes IHM

Réserver voyage : cette figure représente le formulaire qui permet aux


clients de réserver un voyage, celui-ci apparaît lorsque le client clique sur le
bouton réserver, il remplit le numéro du passeport, nombre de place et la date
de paiement.

Figure 3.6 – Page d’accueil "réserver un voyage"

Au niveau du footer on a opté pour l’utilisation des liens rapides vers les
différentes idées de voyages, notre dépliante touristique ainsi le moyen de nous
contacter (par lien rapide, numéro de téléphone ou adresse e-mail).

Figure 3.7 – Page d’accueil "footer"

32
Chapitre3 Les maquettes IHM

v Contact :

Cette figure représente la page contact de notre site web. C’est cette page
qui donne l’opportunité aux clients d’obtenir des informations importantes sur
l’agence (coordonnée, adresse, adresse e-mail, numéro de téléphone, horaires
d’ouverture), ou même de rentrer en contact directement.

Figure 3.8 – Page contacte

v Dépliant touristique :

L’illustration qui suite montre la page dépliante touristique liée à ”Ser-


vices", montrant les villes les plus visitées par les touristes pour les destinations
offertes par l’agence.

Figure 3.9 – Page dépliante touristique

33
Chapitre3 Les maquettes IHM

v Idée voyage :

Dans la page Idée voyage on a mis des différents voyages suggérer à l’uti-
lisateur avec le choix du type de voyage, et en cliquant sur le bouton plus on
obtient plus de détails sur la destination.

Figure 3.10 – Page idées voyages

Plus : cette figure représente la page plus, détaillant le voyage suggérer, elle
comporte de belles images sur la destination et une brève description la décrive.

Figure 3.11 – Page plus d’informations sur l’idée

v Connexion :

34
Chapitre3 Les maquettes IHM

Cette figure représente l’interface d’authentification dans laquelle l’utilisa-


teur ou l’administrateur entrer leurs adresses emails et leurs mots de passe pour
qu’ils puissent accéder aux différents fonctionnalités de notre site web. Dans le
cas où il y a une erreur un message d’erreur sera affiché sur l’écran. Sinon l’uti-
lisateur doit d’abord s’inscrire en cliquant sur le lien.

Figure 3.12 – Page connexion

v Inscription :

Cette figure représente le formulaire d’inscription sur notre site, a pour but
l’ajout de l’utilisateur s’il ne figure pas dans la BDD. Dans ce cas l’utilisateur
doit saisir ses informations correctement dans les champs spécifiques en respec-
tant les règles de validation.

Figure 3.13 – Page inscription

35
Chapitre3 Les maquettes IHM

v Profile :

Cette figure représente le profil du client, on trouve les voyages réservés


par ce dernier ainsi les voyages validés. De même le client peut modifier les in-
formations de son profil en cliquant sur le bouton modifié profile. Cette section
admet aussi l’option déconnexion.

Figure 3.14 – Page profile

36
Chapitre3 Les maquettes IHM

Modifier profile :cette figure représente la section consacrée pour mo-


difier profile, là le client peut modifier son nom, prénom, date de naissance,
l’email, le numéro de téléphone, le genre ainsi le mot de passe.

Figure 3.15 – Page modifié profile

3.2.2 Interfaces Administrateur


v Ajouter un voyage :

Cette page permet à l’administrateur d’ajouter un voyage et toutes ses


informations : nom du pays, prix, date de départ, durées, nombre d’étoile de
l’hôtel, description, programmes ainsi que des images illustratives.

Figure 3.16 – Page ajouté un voyage

v Ajouter omra :

37
Chapitre3 Les maquettes IHM

Cette page permet à l’administrateur d’ajouter une omra et toutes ses infor-
mations : prix, hôtel, date de départ, description ainsi qu’une image illustrative.

Figure 3.17 – Page ajouté omra

v Gérer les voyages :

Cette page permet à l’administrateur de modifier ou supprimer des voyages


ou Omra déjà ajoutée auparavant.

Figure 3.18 – Page de la liste des voyages

Modifié Omra : La page illustrée en dessous permet de modifier le prix,


la date de départ, la description ou le nom d’hôtel d’une Omra déjà ajoutée.

38
Chapitre3 Les maquettes IHM

Figure 3.19 – Page modifié omra

Modifié voyage : dans cette page on peut modifier le prix, la date de


départ, la durée, le programme ou la description d’un voyage déjà ajouté.

Figure 3.20 – Page modifié voyage

39
Chapitre3 Les maquettes IHM

v Ajouter une idée :

Cette page permet à l’administrateur d’ajouter des idées de voyages en


indiquant le type de voyage, la région, description et des images illustratives.

Figure 3.21 – Page Ajouté une idée

v Gérer les idées :

Cette page permet à l’administrateur de gérer les idées voyages, il va pou-


voir les rechercher par région et les supprimer s’il le souhaite en cliquant sur le
bouton rouge.

Figure 3.22 – Page Gérer les idées

40
Chapitre3 Les maquettes IHM

v Gérer les réservations :

Cette page permet à l’administrateur de gérer les voyages réservés, un


voyage sera validé si on clique sur le bouton bleu et il sera supprimé si on clique
sur le bouton rouge.
Cette page admet aussi l’option de recherche par numéro du passeport.

Figure 3.23 – Page Gérer les réservations

v Liste des validations :

Cette page affiche tous les voyages et omra validés par l’administrateur, il
peut les rechercher par numéro du passeport et les supprimer s’il le souhaite en
cliquant sur le bouton rouge.

Figure 3.24 – Page Liste des validations

41
Chapitre3 Les maquettes IHM

3.3 Conclusion

À travers ce chapitre, nous avons passé à la pratique par une représentation


des interfaces graphique de site web en s’appuyant sur des captures d’écrans et
quelques explications pour bien illustrer le travail et clarifier le fonctionnement
de ses fonctionnalités.

42
Conclusion générale et perspectives

Devant le besoin des gens de s’informer et de s’organiser sans se déplacer,


et aussi ce qui concerne l’agence qui doit exposer ses services et ses offres sans se
lasser ses clients, nous sommes parvenus par le biais de ce projet à réaliser un site
web de gestion d’agence de voyages TYMZ TRAVEL dans le but de faciliter les
consultations ainsi que des réservations en ligne n’importe où et à tout moment.

Au terme de ce projet, nous pouvons déduire que ce travail de fin d’études


nous a donné une occasion opportune pour utiliser notre acquis théorique dans
l’environnement pratique. Aussi l’utilisation des différents outils nous a permis
de perfectionner nos connaissances acquises en programmation et en conception.

En premier lieu, nous avons débuté notre projet par des définitions et géné-
ralités sur les sites web et les différentes techniques, langages de programmation
dans le but de mieux cerner notre travail, pour de suite passer à la partie d’éla-
boration du cahier des charges qui a pris une place dans ce champ d’études afin
de présenter d’une façon générale notre projet, là où on a défini la probléma-
tique, son objectif, les besoins fonctionnels et non fonctionnels.

Pour compléter la tâche d’étude préliminaire, nous avons défini et analysé


les besoins attendus du système. Il s’agissait de formuler, d’affiner et d’analyser
la plupart des cas utilisations par les diagrammes UML. Nous avons par la suite
attaqué la conception où nous avons mis en œuvre le diagramme de déploie-
ment, classe, cas d’utilisation ainsi que les diagrammes séquences systèmes pour
chaque cas.

Enfin, nous avons entamé la réalisation de notre site web en utilisant


MySQL pour la gestion de la base de données, Visual Studio Code pour réaliser
les pages en HTML et CSS. Bootstrap et JQuery pour décrire la présentation
des documents HTML, ainsi que PHP pour produire des pages web dynamiques.

43
En perspective, notre site Web pourrait devenir plus sophistiqué en in-
tégrant d’autres fonctionnalités comme le payement en ligne, la possibilité de
recruter plus de personnels en envoyant son CV. En plus, d’ajouter plusieurs
langues à l’application web pour viser le maximum de personnes.

Pour conclure, nous espérons que le travail que nous avons effectué a été à la
hauteur, nous souhaitons qu’il permettra à l’agence de voyages de se développer
dans le temps de mieux communiquer avec ses clients, de faciliter les tâches de
son personnel, de diversifier ses services et d’augmenter son chiffre d’affaires
et de mieux positionner dans le marché des agences de voyages Algériennes.En
effet, ce travail n’est pas un modèle unique et parfait, c’est pourquoi nous restons
ouverts à toutes les critiques et sommes prêts à recevoir toutes les suggestions
et remarques tendant à améliorer davantage cette application.

44
Bibliographie

[1] https ://www.ideematic.com/dictionnaire-digital/application-we/ consulté


(23/05/2021)

[2] http ://glossaire.infowebmaster.fr/html/ consulté (23/05/2021)

[3] https ://www.atinternet.com/glossaire/css/ consulté (23/05/2021)

[4] https ://www.journaldunet.fr/web-tech/dictionnaire-du-


webmastering/1203585-javascript/ consulté (23/05/2021)

[5] http ://glossaire.infowebmaster.fr/php/ consulté (24/05/2021)

[6] https ://waytolearnx.com/2019/10/difference-entre-sql-et-mysql.html : :


text=SQL consulté (24/05/2021)

[7] http ://www.standard-du-web.com/xampp.php consulté (01/06/2021)

[8] https ://whatis.techtarget.com/fr/definition/Serveur-Web consulté


(01/06/2021)

[9] https ://docs.phpmyadmin.net/fr/latest/intro.html consulté (01/06/2021)

[10] https ://code.visualstudio.com/docs consulté (01/06/2021)

[11] https ://www.journaldunet.com/web-tech/developpeur/1159810-


bootstrap-definition-tutoriels-astuces-pratiques/ consulté (01/06/2021)

45
[12] https ://www.pierre-giraud.com/jquery-apprendre-cours/introduction/
consulté (01/06/2021)

[13] https ://www.commentcamarche.net/download/telecharger-34058460-


visual-paradigm consulté (01/06/2021)

[14] https ://www.yumpu.com/fr/document/read/18727664/les-patterns-


dans-la-conception-dapplications-orientees-web consulté (01/06/2021)

[15] Pascal Roques .Franck vallée, UML 2 en action : de l’analyse des besoins
à la conception, ÉDITIONS EYROLLES,20ll.

[16] https ://cours.khalilmamouny.com/uml-survol-des-14-diagrammesversion-


2-5-1/ consulté (24/06/2021)

46

Vous aimerez peut-être aussi