Embed Size (px)
Citation preview
UNIVERSITE D’ANTANANARIVO
DOMAINE DES SCIENCE ET TECHNOLOCIES
Mention Physique et Applications
Mémoire de fin d’étude en vue de l’obtention du diplôme de
MASTER EN PHYSIQUE ET APPLICATION
Parcours : Ingénier en Systèmes Electroniques Informatiques
Présenté le 11 février 2020
Par
YASSEM MAHAMOUD
Devant la commission d’examen composée de :
Président : M. RANAIVO-NOMENJANAHARY Flavien Noël Professeur Titulaire
Examinateur :
Rapporteurs :
Mme RANDRIAMANANTANY Zely Arivelo M.
M. RASAMIMANANA François de Salle
M.MANDIMBY Junior Zoé Tigana
Professeur Titulaire
Maitre de Conférences
Docteur
Application web pour la gestion
d’affichage des vols
UNIVERSITE D’ANTANANARIVO
DOMAINE DES SCIENCE ET TECHNOLOCIES
Mention Physique et Applications
Mémoire de fin d’étude en vue de l’obtention du diplôme de
MASTER EN PHYSIQUE ET APPLICATION
Parcours : Ingénier en Systèmes Electroniques Informatiques
Devant la commission d’examen composée de :
Présenté par :
Présenté par :
YASSEM MAHAMOUD
Devant la commission d’examen composée de :
Président : M. RANAIVO-NOMENJANAHARY Flavien Noël Professeur Titulaire
Examinateur :
Rapporteurs :
Mme RANDRIAMANANTANY Zely Arivelo M.
M. RASAMIMANANA François de Salle
M.MANDIMBY Junior Zoé Tigana
Professeur Titulaire
Maitre de Conférences
Docteur
Application web pour la gestion
d’affichage des vols
REMERCIEMENTS
Ce mémoire a pu être réalisé grâce à la contribution et aux aides précieuses de
plusieurs personnes qui nous ont soutenus sur les plans moral, intellectuel, matériel et
financier. A tous, nous leur adressons nos reconnaissances les plus sincères. Il s’agit de :
Je remercie en premier lieu Monsieur RAMAHAZOSOA Irrish Parker, Maître de
conférences, Responsable du Domaine des Sciences et Technologies qui m’a accepté parmi
les étudiants du domaine;
Je remercie également Madame RAFANJANIRINA Eulalie Odilette, responsable de
la mention physique et applications;
J’exprime toute ma reconnaissance Madame RAZANAMANAMPISOA Harimalala,
Maître de conférences, responsable de la formation de Master d’Ingénierie en Systèmes
Electroniques Informatiques (MISEI).
Je tiens avec gratitude à présenter mes remerciements à mon cher encadreur
Monsieur RANAIVO-NOMENJANAHARY Flavien Noël, Professeur Titulaire, qui a bien
voulu présidé le jury de ce mémoire ;
Mes sincères remerciements vont également à Madame RANDRIAMANANTANY
Zely Arivelo, Professeur Titulaire, qui a bien voulu faire partie des membres du jury en étant
examinateur ;
Je voudrais remercier Monsieur M. RASAMIMANANA François de Salle, Maître
de conférences, Maître de Conférences, pour ses conseils précieux tout au long de la
réalisation de ce mémoire étant le rapporteur ;
Je voudrais remercier Monsieur M.MANDIMBY Junior Zoé Tigana, Docteur, pour
ses conseils précieux tout au long de la réalisation de ce mémoire étant le rapporteur ;
Et enfin, nous avons une pensée noble et pleine de gratitude à nos chers parents, nos
frères, sœurs et les membres de notre famille pour l’amour et le grand sacrifice qu’ils ne
cessent de nous fournir tant financièrement que moralement lors de nos études.
A ceux qui nous ont aidés de près et de loin, qu’ils trouvent ici l’expression de nos
sincères remerciements.
TABLE DE MATIERES
INTRODUCTION ...................................................................................................................... 6
CHAPITRE I : Présentation de la société Eqima ....................................................................... 7
I.1 Présentations de l’Eqima ................................................................................................... 7
I.2 Mission de l’Eqima ........................................................................................................... 7
I.3 Différents outils pour la conception de site web ............................................................... 8
CHAPITRE II : Langages utilisés pour la réalisation du site web ............................................. 9
II.1 Langage HTML ............................................................................................................ 9
II.2 Langage CSS ................................................................................................................ 9
II.2 Langage SASS .............................................................................................................. 9
II.3 Langage JavaScript....................................................................................................... 9
II.4 Langage PHP .............................................................................................................. 10
II.5 Le MySQL .................................................................................................................. 10
II.6 Le JQUERY ............................................................................................................... 10
CHAPITRE III : Méthodologie utilisé pour mise en place du projet ....................................... 11
III.1. Création de maquette du site Photoshop ..................................................................... 11
III.2. Sublime Text ................................................................................................................ 11
III.3. XAMPP ....................................................................................................................... 12
III.4. framework .................................................................................................................... 13
III.4.1. Bootstrap ............................................................................................................... 13
III.4.2. Material Design .................................................................................................... 13
III.4.3. Font Awesome ..................................................................................................... 14
III.3.4. Modèle vue contrôleur ......................................................................................... 15
III.3.5. NODE.JS .............................................................................................................. 15
CHAPITRE IV : Présentation et conception du site web. ........................................................ 16
IV.1.1 Structure d’un page web. ........................................................................................... 16
IV.1.2 Page d’Accueil .......................................................................................................... 17
IV.1.3 Base de données des informations ............................................................................. 18
IV.1.4 Page Information ....................................................................................................... 18
IV.1.5 Page d’authentification des informations .................................................................. 19
IV.1.6 Page gestion information ........................................................................................... 22
IV.1.7 Page ajout d’information ........................................................................................... 23
IV.1.8 Page modification d’information ............................................................................... 24
IV.1.9 Page suppression d’information ................................................................................ 27
IV.2.1 Page Présentation ................................................................................................... 28
IV.2.2 Base de données des vols .......................................................................................... 28
IV.2.3 Page affichage des vols .......................................................................................... 28
IV.2.4 listes des vols ......................................................................................................... 29
IV.2.5. Page d’authentification des vols ............................................................................... 31
IV.2.6 Page gestion des vols ............................................................................................. 33
IV.2.7 Page ajout de vol .................................................................................................... 34
IV.2.8 Page de Modification de vol .................................................................................. 35
IV.2.9 Page de suppression de vol .................................................................................... 37
CONCLUSION ........................................................................................................................ 39
LISTE DES FIGURES
Figure 1 : Site web de la société Eqima(http://Eqima.org) ................... 7
Figure 2 : Maquette sur Photoshop ...................................................... 11
Figure 3: Sublime Text3 ...................................................................... 12
Figure 4: XAMPP ................................................................................ 12
Figure 5 : Bootstrap ............................................................................. 13
Figure 6 : Material Design .................................................................. 14
Figure 7: font awesome ....................................................................... 14
Figure 8: Modèle vue contrôleur ......................................................... 15
Figure 9: Node.js ................................................................................. 16
Figure 10: Structure de base d’une page web ..................................... 16
Figure 11 : page d’accueil ................................................................... 17
Figure 12: structure de la base de données des informations .............. 18
Figure 13: Affichage information ........................................................ 18
Figure 14: formulaire d’identification ................................................. 20
Figure 15: gestion de l’information ..................................................... 22
Figure 16: formulaire d’ajout d’information ....................................... 23
Figure 17: formulaire de modification d’information ......................... 25
Figure 18: suppression d’information ................................................. 27
Figure 19: présentation de l’entreprise ................................................ 28
Figure 20: structure de la base de données pour Affichage des vols .. 28
Figure 21: Affichage des vols à Tananarive ........................................ 29
Figure 22: menu déroulant ................................................................... 30
Figure 23: liste de vols à Sambava ...................................................... 30
Figure 24: Formulaire d’identification ................................................ 31
Figure 25: gestion des vols .................................................................. 33
Figure 26: ajout de vol ......................................................................... 34
Figure 27 : modification des vols ........................................................ 36
Figure 28: suppression des vols ........................................................... 38
LISTE DES ABREVIATIONS
CMS : Content Management System
CSS: Cascading Style Sheets
HTML: L’HyperText Markup Language
HTTPS: HyperText Transfer Protocol Secure
HTTP : HyperText Transfer Protocol
JS : Java Script
MVS : Modèle Vue Contrôleur
PHP: PHP Hypertext Preprocessor
SASS: Syntactically Awesome Stylesheets
SEO : Search Engine Optimisation
SGBDR: Système de Gestion de Bases de Données Relationnelles
SQL: Structured Query Language
URL : Uniform Resource Locator
WWW : World Wide Web
6
INTRODUCTION
De nos jours la technologie a une grande place dans notre vie quotidienne, car elle
nous facilite la vie dans plusieurs domaines. Le développement de site web est devenue
populaire car il permet de publier des informations utiles d’une manière rapide est accessible
partout dans le monde. Un site web est un espace virtuel sur Internet, ou d’une manière
général un site web est un ensemble de pages web et de ressources reliées par des hyperliens,
défini et accessible par une adresse web. Un site web est développé à l'aide de langages de
programmation web, puis hébergé sur un serveur web accessible via le réseau mondial
Internet, un intranet local, ou n'importe quel autre réseau, tel le darknet. Il s’agit d’un
ensemble de pages web qui sont accessibles à partir d’un même domaine ou sous-domaine de
la World Wide Web (WWW). Aujourd’hui, le Web est accessible via le protocole HTTP
(HyperText Transfer Protocol) ou HTTPS (HyperText Transfer Protocol Secure) et les URL
(Uniform Resource Locator). Les fichiers hébergés sur le site web reposent sur du HTML
(HyperText Markup Language) CSS et JavaScript qui sont les langages nativement compris
par les navigateurs modernes. Le protocole HTTP permet au client (généralement via un
navigateur web) d'accéder à des ressources par un URL. HTML et de structurer les données
ou lier les ressources entre elles, notamment avec des liens hypertextes.
Pour fini de mes études j’ai effectué mon stage au sein de la société de développement de site
web et application mobile Eqima. Ma mission était de réalisé un site web pour une compagnie
aérien qui a pour but d’affiché les vols ainsi que la publier des informations et de présenter de
l’entreprise. Quel sont alors les technologies utiliser pour la mise en place de notre projet ?
Pour être fidèle à notre analyse de mémoire de fin d’étude. Notre travail sera divisé en 4
grands chapitres :
Le premier chapitre annonce la présentation de la société Eqima.
Le deuxième chapitre sera la présentation des langages utilisé pour la mise en
place de notre projet.
Le troisième chapitre concerne les outils utilise pour création de notre projet.
Le quatrième et dernier chapitre se basera sur la présentation et conception de
notre projet de fin d’étude.
7
CHAPITRE I : Présentation de la société Eqima
I.1 Présentations de l’Eqima
Eqima est une agence digitale à Madagascar de développement de site web de création
d’application mobile et référencement web. Eqima offre à ses clients une large gamme de
solutions et de services dans plusieurs domaines. Pour assurer ses activités, des équipes de
développeur spécialisé dans plusieurs langages et technologies assurent l’accomplissement
des missions, que ça soit la réalisation de site web ou développement d’application mobile.
L'agence web Eqima propose toujours des solutions innovantes, modernes basées sur les
dernières technologies pour lesquelles leurs équipes se forment constamment.
Figure 1 : Site web de la société Eqima(http://Eqima.org)
I.2 Mission de l’Eqima
En effet, l’entreprise Eqima réalise la plus grande partie de son chiffre d’affaires, par
l’intermédiaire de ses ventes de services en ligne par accomplissement des missions comme la
création de site web, le développement d’application mobile et la maintenance de site web
8
(référencement naturel). On attribue ces missions a des développeurs qui ont plusieurs années
d’expérience qui sont repartie en équipe ou parfois individuel en fonction de la complexité et
du délai à respecter pour la finalisation du projet. Les missions de l’Eqima sont multiples :
Pour le développement de site web, la plupart des missions sont focalisées sur la
création des sites vitrines, sites e-commerces et des applications web en full stack –
Développement. Les développeurs utilisent le plus souvent le CMS WordPress qui est
le CMS le plus rependue de nos jours pour la conception de site web.
Pour la réalisation d’application IOS et Android, les développeurs utilisent des
technologies comme Ionic, React Native, Apache Cordova qui sont des technologies
hybride permettant de développer une application qui fonction dans tous les types des
smartphones à savoir IOS et Android.
Pour le référencement web (SEO) plusieurs techniques sont mise en place pour
améliorer le référencement du site web à la première page quand on fait de recherche
sur Google. Notamment le choix des articles, l’aspect responsive du site web,
l’amélioration du contenue du site web, l’utilisation des mots-clés dans l’URL.
I.3 Différents outils pour la conception de site web
L'agence web Eqima propose toujours des solutions innovantes, modernes basées sur
les dernières technologies pour offrir à ces clients les meilleurs produits. Les développeurs de
cette agence, utilisent des outils moderne qui sont toujours mise à jour et se frome
constamment sur les nouvelles technologies :
Sur la partir front end de page web, on utilise (HTML 5, CSS3, JAVA SCRIPT) et sur
la partie back end (PHP, Ruby, Python, Node.JS…). Pour la gestion de base de
données, on utilise (MySQL, FireBase, SQL server…) et pour les Framework et CMS,
(WordPress, prestashop, Bootstrap, bulma, Angular).
Concernant les applications mobile, les développeurs utilisent les technologie (Ionic,
React Natif et Apache cordova ) qui sont framework de développement des
Application hybride et il utilise également les langages (JAVA, SWIFT, et
OBJECTIVE-C ) pour le développement d’application natif.
Pour la maintenance des sites web et application mobile, plusieurs technologies sont
utilisées pour tester leur produit sur leur fonctionnalité et pour détecter de faille de
sécurité avant d’être commercialisé (Squash, Sonarqube, Mantis, Terllo)
9
CHAPITRE II : Langages utilisés pour la réalisation du site web
II.1 Langage HTML
HTML : (L’HyperText Markup Language), généralement abrégé HTML, est le format
de donnée conçu pour représenter les pages web. C’est un langage de balisage permettant
d’écrire de l’hypertexte, d’où son nom HTML. 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
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. Il est souvent utilisé conjointement avec
des langages de programmation comment PHP, CSS, Java Script.
II.2 Langage CSS
Le terme CSS est l'acronyme anglais de (Cascading Style Sheets )qui peut se traduire
par "feuilles de style en cascade". Le CSS est un langage informatique utilisé sur l'internet
pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de style, aussi appelé les
fichiers CSS, comprennent du code qui permet de gérer le design d'une page en HTML. Les
standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit
au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web
et bien pris en charge par les navigateurs web dans les années 2000.
II.2 Langage SASS
SASS (Syntactically Awesome StyleSheets) est un langage dynamique de génération
de feuilles de style en cascade initialement développé par Hampton Catlin et Nathalie
Weizenbaum.
Sass est un préprocesseur CSS. C'est un langage de description compilé en CSS. SassScript
est un langage de script pouvant être utilisé à l’intérieur du code Sass. Deux syntaxes existent.
La syntaxe originale, nommée « syntaxe indentée », est proche de Haml. La nouvelle syntaxe
se nomme SCSS. Elle a un formalisme proche de CSS.
II.3 Langage JavaScript
Le JavaScript est un langage informatique utilisé sur les pages web. Ce langage à la
particularité de s'activer sur le poste client, en d'autres mots c'est votre ordinateur qui va
recevoir le code et qui devra l'exécuter. C'est en opposition à d'autres langages qui sont activé
côté serveur. L'exécution du code est effectuée par votre navigateur internet tel que Firefox ou
Internet Explorer.
10
II.4 Langage PHP
PHP (PHP Hypertext Preprocessor) est un langage de programmation pour des
applications sur le web. PHP est un langage de script exécuté côté serveur, Langage élaboré
inclut dans une page HTML qui permet une interaction avec l’utilisateur, ce langage permet la
création de pages web au contenu dynamique. PHP a permis de créer un grand nombre de
sites web célèbres, comme Facebook, Wikipédia, etc. Il est considéré comme la base de la
création des sites Internet dits dynamiques mais également des applications web.
II.5 Le MySQL
MySQL est un système de gestion de bases de données relationnelles (SGBDR) Open
Source.
Un serveur de bases de données stocke les donné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. Le SQL dans "MySQL" signifie "Structured Query
Language" : le langage standard pour les traitements de bases de données.
II.6 Le JQUERY
JQuery est un Framework JavaScript sous licence libre qui permet de faciliter des
Fonctionnalités communes de JavaScript. L’utilisation de cette bibliothèque permet de gagner
du temps de développement lors de l'interaction sur le code HTML d'une page web, l'AJAX
ou la gestion des évènements. JQuery possède par la même occasion l'avantage d'être
utilisable sur plusieurs navigateurs web (cf. Internet Explorer, Firefox, Chrome, Safari où).
Depuis sa création en 2006 et notamment à cause de la complexification croissante des
interfaces Web, jQuery a connu un large succès auprès des développeurs Web et son
apprentissage est aujourd'hui un des fondamentaux de la formation aux technologies du Web.
Il est à l'heure actuelle la bibliothèque front-end la plus utilisée au monde (plus de la moitié
des sites Internet en ligne intègrent jQuery).
11
CHAPITRE III : Méthodologie utilisé pour mise en place du projet
III.1. Création de maquette du site Photoshop
Photoshop est un logiciel de retouche d'image et de création graphique édité par la
société Adobe. Lancé à l'origine comme un simple logiciel de retouche d'image, ses
fonctionnalités se sont vues améliorées et complétées au fil des années et des versions. Adobe
Photoshop constitue maintenant l'outil de base dans la plupart des secteurs de l'industrie
graphique.Elle nous permet de crée une Maquette du site web grâce à ces différents outilles
nous pouvons ainsi visualiser un rendu final de notre site web.
Figure 2 : Maquette sur Photoshop
III.2. Sublime Text
Sublime Text est un éditeur de texte vraiment puissant. Disponible à la fois sur
Windows, sur Mac et sur Linux, il est conçu pour prendre en charge plusieurs langages de
programmation variés allant du langage de programmation C à l'Action Script en passant par
les langages PHP, Objective-C ou encore OCaml voire même du Scripting comme le Shell
Scripting ou encore le SQL. C'est un éditeur à tout faire. Ce qui fait réellement sa force est
donc cette capacité à prendre en charge de nombreux langages mais aussi d'apporter de
nombreuses fonctionnalités pratiques qui faciliteront la création de code pour les
développeurs.
12
Figure 3: Sublime Text3
III.3. XAMPP
XAMPP est un ensemble de logiciels permettant de mettre en place un serveur Web
local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une distribution de
logiciels libres (X (cross) Apache MariaDB Perl PHP) offrant une bonne souplesse
d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée d'un grand
nombre de personnes puisqu'il ne requiert pas de connaissances particulières et fonctionne, de
plus, sur les systèmes d'exploitation les plus répandus.
Figure 4: XAMPP
13
III.4. framework
III.4.1. Bootstrap
Bootstrap est une collection d'outils utiles à la création du design (graphisme,
animation et interactions avec la page dans le navigateur, etc.) de sites et d'applications web.
C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de
navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est
l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.
Figure 5 : Bootstrap
III.4.2. Material Design
Le Material Design est un ensemble de règles de design proposées par Google et qui
s'appliquent à l'interface graphique des logiciels et applications1. Il est utilisé notamment à
partir de la version 5.0 du système d'exploitation Android2.
Google a présenté le Material Design pour la première fois lors de la conférence Google I/O,
le 25 juin 20143. En misant sur les motifs « carte », déjà utilisés dans Google Now, ces règles
de design mettent l'accent sur une utilisation accrue des mises en page basées sur une grille,
des animations et des transitions, des effets de profondeur tels l'éclairage et les ombres. Selon
Google ce nouveau langage de design est basé sur le papier et l'encre4.
14
Figure 6 : Material Design
III.4.3. Font Awesome
Font Awesome est une "police d'icônes" créée pour être utilisée avec Twitter
Bootstrap.
Elle a été créée par Dave Gandy afin d'être utilisée avec Bootstrap, et a ensuite été
incorporée dans le BootstrapCDN. Font Awesome détient une part de marché de 20% parmi
les sites qui utilisent des scripts de polices tiers sur leur plateforme, ce qui le place en
deuxième position après Google Fonts1. Font Awesome 5 est sorti le 7 décembre 2017 avec 1
278 icônes. Cette nouvelle version inclut une version gratuite composée de certaines icônes
des différentes variantes (Solid, Regular, Light et Brand) ainsi qu'une nouvelle version
payante qui regroupe davantage d'icônes. Un abonnement annuel est nécessaire pour
bénéficier des icônes, celui-ci permet de bénéficier des mises à jour et d'un CDN permettant
d'inclure facilement les icônes sur son site web.
Figure 7: font awesome
15
III.3.4. Modèle vue contrôleur
Modèle vue contrôleur ou MVC est un motif d'architecture logicielle destiné aux
interfaces graphiques lancé en 1978 et très populaire pour les applications web. Le motif est
composé de trois types de modules ayant trois responsabilités différentes : les modèles, les
vues et les contrôleurs.
- Un modèle (Model) contient les données à afficher.
- Une vue (View) contient la présentation de l'interface graphique.
- Un contrôleur (Controller) contient la logique concernant les actions effectuées par
l'utilisateur
Figure 8: Modèle vue contrôleur
III.3.5. NODE.JS
Node.js est une plateforme logicielle libre en JavaScript orientée vers les applications
réseau événementielles hautement concurrentes qui doivent pouvoir monter en charge.
Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle d'évènements, et
implémente sous licence MIT les spécifications CommonJS.
Parmi les modules natifs de Node.js, on retrouve http qui permet le développement
de serveur HTTP. Il est donc possible de se passer de serveurs web tels que Nginx ou Apache
lors du déploiement de sites et d'applications web développés avec Node.js.
Concrètement, Node.js est un environnement bas niveau permettant l’exécution de
JavaScript côté serveur.
16
Figure 9: Node.js
CHAPITRE IV : Présentation et conception du site web.
IV.1.1 Structure d’un page web.
Un document HTML est composé de textes encadrés par une paire de balises, une au
début (<balise>) et une autre à la fin (</balise>). En fait, on distingue deux types
d’instructions :
• Les instructions fermées avec une paire de balises,
• Les instructions ouvertes avec une seule balise d’ouverture ou balise vide.
L’image ci-dessous représente la structure minimale d’un page web composer de
deux parties importantes qui la partie <head></head> qui représente l’entête de la page web et
d’une partie <body></body>qui représente le corps de la page web.
Figure 10: Structure de base d’une page web
17
IV.1.2 Page d’Accueil
Nous avons en premier partie une page d’accueil qui présente notre site web avec
différents liens pour accéder aux trois autres pages qui sont la page information pour les
informations sur les vols en cas de retard ou d’annulation des vols, la page présentation qui
présente l’entreprise et la page aviation qui affiche les vols des différents aéroports du pays.
Figure 11 : page d’accueil
18
IV.1.3 Base de données des informations
En deuxième partie nous avons la page information qui possède une base de
données ou sont stockées les informations en fonction de leur id (identifiant), titre et
contenue qui est représenter par la figure (12).
Figure 12: structure de la base de données des informations
IV.1.4 Page Information
Nous avons ici la page information qui permet à l’administrateur du site web
de publier des informations qui sont dans la base de données permettant d’informer les
passages des retards ou des annulations des vols. La page information possède aussi
une partie admin dont l’administrateur du site possède le droit d’ajouter, modifier et
supprimer des informations pour les mettre à jours mais il doit d’abord s’authentifier
avec un login et mot de passe avant d’accéder à la page admin.
Figure 13: Affichage information
La connexion à la base de données est indispensable avant d’effectuer une quelconque
opération, à savoir afficher ou modifier des éléments dans la base données .la connexion
commence toujours par (mysql_connect) puis précise le nom hôte dans notre cas c’est
(localhost ) et puis le login (root) et le mot de passe("….").Ensuite précise la base de
19
données sur la quelque on travaille avec la commande
mysql_select_db("Aviation_2020",$conn) qui permet de sélectionner la base de données et
puis ajouter le nom de la base de données (Aviation_2020). Et la commande require_once
("connexion.php») permet d’appeler le fichier connexion.PHP qui est indispensable car elle
contient le code pour la connexion à la base de données pour permettre d’afficher les
éléments qui sont dans la base de données avec la requête "select * from information ".
<?php
$conn=mysql_connect("localhost","root","….") or die (mysql_error());
mysql_select_db("Aviation_2020",$conn) or die (mysql_error());
?>
Fichier: connexion.php
<?php
//appelle du fichier connexion.php
//pour la connexion à la base de données
require_once("connexion.php");
//requete pour l'affichage des informations
$req="select * from information ";
//code pour l'exécuté la requete
$rs=mysql_query($req) or die(mysql_error());
?>
Fichier: index.php
IV.1.5 Page d’authentification des informations
La figure (14) représente la page d’authentification de notre site web ou
l’administrateur doit se connecter en temps qu’admin avec les bons identifiants pour accéder à
la partie admin du site permettant ajouter ou modifier et de supprimer des informations.
20
Figure 14: formulaire d’identification
Le formulaire en html est souvent utilisé pour envoyer des valeurs saisies par
l’utilisateur nom, mot de passe ou autre. Pour définir un formulaire en HTML, nous allons
utiliser l’élément form qui signifie « formulaire » en anglais.
Cet élément form va avoir besoin de deux attributs pour fonctionner normalement : les
attributs method et action.
L’attribut method va indiquer comment doivent être envoyées les données saisies par
l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
Ces deux valeurs vont correspondre aux deux choix que nous avons : soit faire
transiter les données par l’URL afin de pouvoir ensuite les traiter, soit les envoyer par HTTP
post transaction.
Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), les données vont
être envoyées en clair. Nous devrons éviter d’utiliser cette méthode si les données à transférer
sont sont des mots de passe ou toute information sensible dans votre formulaire.
En choisissant l’envoi de données via post transaction HTTP (avec la valeur post), les
données ne sont visibles par personne. C’est donc généralement la méthode préférable a
utiliser comme c’est le cas pour nous.
L’attribut action va lui nous servir à préciser l’adresse relative de la page dans laquelle
les données doivent être traitées. Et dans notre cas c’est le ficher «valider.php».
. Chaque élément doit être nommé, pour cela on utilise l'attribut NAME. Le nom ainsi
défini permet d'identifier les données qui seront envoyé. Elles seront ensuite associées par des
variables en PHP pour pouvoir les utiliser dans les requêtes SQL pour vérifier s’ils
correspondent aux valeurs qui sont stockés dans la base de données à savoir le login et le mot
de passe.
21
<!DOCRYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style5.css">
<title>yassem</title>
</head>
<body>
<div class="box">
<h2>Login</h2>
//utilisation de la méthode "POST " pour envoyer les données
//et Nous utilisons cette méthode "POST " pour cachés les données à envoyer
//car ce sont des données sensibles
//Et l’action est «valider.php" ou vont être traitées les données
<form method="POST" action="valider.php">
<div class="inputBox">
//association du Name a une valeur (login)
<input type="text" name="login" required="" class="i">
<label>username</label>
</div>
<div class="inputBox">
//association du Name a une valeur (pass)
<input type="password" name="pass" required="">
<label>password</label>
</div>
//boutons d’envois des données
<input type="submit" value="Envoyer">
</form>
</div>
</body>
</html>
Fichier : formulaire_d’authentification.php
<?php
//appelle du fichier connexion .php pour la connexion à la base de données
require_once("connexion.php");
//déclaration des variables en PHP pour récupérer les valeurs saisies sur le formulaire
(NAME)
// le (login et pass )
$log=htmlentities(trim($_POST['login']));
$pass=htmlentities(trim($_POST['pass']));
$PC=md5($pass);//code de cryptage du mot de passe
//vérification du mot de passe et login avec celle qui sont stoker dans la base de données
$req="select * from users where log='$log' and passwd='$PC'";
// Code d'exécution de la requete
$rs=mysql_query($req) or die(mysql_error());
22
if ($u=mysql_fetch_assoc($rs)){
session_start();//sécurisation de l'URL
$_SESSION['niv']=$u['niveau'];
//redirection vers la page affiche.php si tous est correcte
header("location:affiche.php");
}
else//redirection vers la page index.php si tous n'est pas correcte
{
header("location:index.php");
}
?>
Fichier : valider.php
IV.1.6 Page gestion information
La Figure 17 représente la page de gestion information avec les options d’ajout de
modification et de suppressions pour les informations des ou vols ou l’entreprise permettant
d’informer les passages.
Figure 15: gestion de l’information
<?php
//appelle du fichier connexion .php
//pour la connexion à la base de données
require_once("connexion.php");
//requete pour l'affichage des informations
$req="select * from information ";
//code pour l'exécuté la requete
$rs=mysql_query($req) or die(mysql_error());
23
?>
//lien vers la page ajouter.php pour ajouter une information
<a class="aj_btn" href="ajouter.php">ajouter-doc</a>
//lien vers la page supprimer.php pour supprimer une information
<a class="del_btn" href="supprimer.php?num=<?php echo($ligne[0]);?>">suprimer</a>
//lien vers la page modification.php pour modifier une information
<a class="edit_btn" href="modification.php?num=<?php echo($ligne[0]);?>">modifier</a>
Fichier : affichage.php
Le lien vers l’ajouter nous permet accéder à la page ajouter .php pour ajouter une
information et qui attribue un identifiant automatique pour chaque information avec son titre
et son contenue.
Nous avons besoin de récupère ces identifiants pour supprimer ou modifier la partie
exacte c’est pour cela que nous utilisons se code "supprimer.php?num=<?php
echo($ligne[0]);?>"pour récupère le numéro de la id (identifiant) à supprimer ou modifier en
utilisant la méthode" GET" pour qui soit visible au moment de l’envoi . Mais pour ajouter
nous utiliserons la méthode" POST" pour envoyer les données.
IV.1.7 Page ajout d’information
Nous avons ici la page d’ajout d’information l’administrateur du site peut une
information pouvant être publié.
Figure 16: formulaire d’ajout d’information
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" href="css/style1.css" >
</head>
24
<body>
<div class="box">
<h2>Nouvel inforation</h2>
<form method ="POST" action="ajout.php">
<div>
<input type="text" name="titre" required="">
<label>Titre</label>
</div>
<div>
<textarea name="contenu" required="required"
></textarea>
<label>contenu</label>
</div>
<input type="submit" value="Ajouter" required="required">
</form>
</div>
</body>
</html>
Fichier: ajouter.php
<?php
//appelle du fichier connexion .php
//pour la connexion à la base de données
require_once("connexion.php");
//déclaration des variables en PHP pour récupérer les valeurs
//saisie sur le formulaire(NAME) le (titre et contenu)
$titre=$_POST['titre'];
$contenu=$_POST['contenu'];
//requete pour l’insertion du titre et du contenue
$req="insert into information (titre,contenu) values ('$titre','$contenu')";
//code pour l'exécuté la requete
mysql_query($req) or (die (mysql_error));
//rediction vres la page affiche.php pour voir les informations ajouter
header("location:affiche.php");
?>
Figure: ajout.php
IV.1.8 Page modification d’information
Ceci représente la page modification d’information utilisé pour mètre ajout les
informations de notre site web pour informer les passages.
25
Figure 17: formulaire de modification d’information
Nous avions utilisé la méthode Get sur le lien qui nous permet de récupère le numéro
exacte à modifier (num) et on utilise la requete "select * from article where id=$num"; pour
afficher les données dans le formulaire avant de les modifier et de les envoyer par la méthode
POST qui seront traités dans la page modifier.php. Et nous exécuterons la requête "update
information set titre='$ntitre', contenu='$ncontenu' where id=$num"; pour modifier les
éléments titre et contenu en fonction de leur id.
<?php
require_once("connexion.php");
$num=$_GET["num"];
$req="select * from article where id=$num";
$rs=mysql_query($req) or die(mysql_error());
?>
<html>
<head>
<title>gestion d article</title>
<link rel="stylesheet" href="css/style2.css" >
</head>
<body>
<?php
while ($ligne=mysql_fetch_array($rs)){?>
<div class="box">
<h2>Modification </h2>
<form action="modifier.php" method="POST">
26
<div>
<input type="hidden" name="num" value="<?php
echo($ligne['id']);?>" >
</div>
<div >
<label>Titre</label><br><br>
<input type="text" name="titre" value="<?php echo ($ligne[1]);?>" >
</div>
<div>
<label>Contenu</label><br><br>
<textarea name="contenu" ><?php echo ($ligne[2]);?></textarea>
</div>
<input type="submit" value="Mise a jour">
</form><p>
</div>
<?php } ?>
</body>
</html>
Fichier: modification.php
<?php
//connexion à la base de données
require_once("connexion.php");
$num=$_POST["num"];
$ntitre=$_POST["titre"];
$ncontenu=$_POST["contenu"];
//requete de modification du titre et du contenu
$sql="update information set titre='$ntitre', contenu='$ncontenu' where id=$num";
mysql_query($sql) or die ('Erreur : '.mysql_error().' requete='.$sql);
//retour vers la page affichage pour voir si l'information est bien modifier
header("location:affiche.php");
?>
Fichier : modifier.php
27
IV.1.9 Page suppression d’information
Ceci présent la page de suppression des informations avec message confirmation pour
la suppression d’information.
Figure 18: suppression d’information
Pour la supprimer une information nous avons juste besoin de récupère sont id par la
méthode GET et d’exécuter la requête $req="delete from information where (id=$num)"; qui
vas supprimer l’information en fonction de son id.
<?php
//connexion à la base de données
require_once("connexion.php");
//Identification de l'identifiant (id) a supprimé
$num=$_GET['num'];
//requete de supression de l'article
$req="delete from article where (id=$num)";
// code d' éxecution de la requete
mysql_query($req) or (die (mysql_error));
//retour vers la page affichage pour voir si l'information est bien supprimer
header("location:affiche.php");
?>
Fichier : suprimer.php
28
IV.2.1 Page Présentation
En troisième partie nous avons la page présentation qui présente l’ensemble du
personnel ainsi que les diffèrent établissement dès l’entreprise permettant ainsi de pouvoir
s’informé la constitution les infrastructures de l’entreprise.
Figure 19: présentation de l’entreprise
IV.2.2 Base de données des vols
En dernière partie nous avons la page affichage qui possède une base de données ou
sont stockées les vols des différents aéroports en fonction de leur id (identifiant), du Nom de
l’heure et de la date qui est représenter par la figure si dessous.
Figure 20: structure de la base de données pour Affichage des vols
IV.2.3 Page affichage des vols
La page affichage des vols qui permettent d’avoir de se renseigner sur les vols
concernent la date, l’heure du vol. Il possède également un système de gestion de vols
permettant d’ajoute et de supprimer ou mette a jours un vol dans le cas d’une éventuelle retard
ou reportage des vols. Pour l’accueil on est redirigé vers les vols de Tananarive mais nous a
une déroulant pour tous les autres aéroports.
29
Figure 21: Affichage des vols à Tananarive
Pour affiche les vols de Tananarive nous devrions nous connecter à la base de données
(Aviarion_2002) sélection la table Tananarive qui contient les id, nom, heure, date et la liste
des vols à Tananarive. On utilise la requête "select * from tananarive" pour afficher tous les
vols qui sont dans la base de données précisément dans la table Tananarive.
<?php
//connexion à la base de données
require_once("document/connection.php");
//requete pour l’affichage de vols à tananarive
$af="select * from tananarive";
$rs=mysql_query($af) or die(mysql_error());
?>
Fichier : index.php (tananarive)
IV.2.4 listes des vols
Nous avons un menu déroulant qui possède la liste des vols de tous les aéroports il
suffit de cliquer sur le lien pour avoir la liste des vols d’un autre aéroport et nous pouvons
mettre à jour facilement les vols. On doit juste se connecter en tant qu’administrateur du site
avec les bon identifiant (usermane et mot de passe) pour accéder à la partie admin du site
mètre a jours les vols.
30
Figure 22: menu déroulant
Figure 23: liste de vols à Sambava
Pour affiche les vols de Sambava nous devrions nous connecter a la base de données
(Aviarion_2002) sélection la table Sambava qui contient les id, nom, heure, date et la liste
des vols à Sambava. On utilise la requête "select * from sambava" pour afficher tous les vols
qui sont dans la base de données précisément dans la table Tananarive.
<?php
//connexion à la base de données
require_once("document/connection.php");
//requete d'affichage des vols à sambava
$af="select * from sambava";
// code d'execution de la requete
$rs=mysql_query($af) or die(mysql_error());
?>
31
Figure : page index.php (Sambava)
IV.2.5. Page d’authentification des vols
Cette page représente la page d’authentification de notre site web ou l’administrateur
doit se connecter que admin avec les bonne identifiant pour pouvoir accéder à la partie admin
du site s’il veut ajouter ou modifier ou supprimer un vol.
Figure 24: Formulaire d’identification
<!DOCRYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style5.css">
<title>yassem</title>
</head>
<body>
<div class="box">
<h2>Login</h2>
//utilisation de la méthode "POST " pour envoyer les données
//et Nous utilisons cette méthode "POST " pour cachés les données à envoyer
//car ce sont des données sensibles
//Et l’action est «valider.php" ou vont être traitées les données
<form method="POST" action="valider.php">
<div class="inputBox">
<input type="text" name="login" required="" class="i">
<label>username</label>
</div>
32
<div class="inputBox">
<input type="password" name="pass" required="">
<label>password</label>
</div>
//boutons d’envois des données
<input type="submit" value="Envoyer">
</form>
</div>
</body>
</html>
Fichier : d’authentification.php
//appelle du fichier connexion.php pour la connexion à la base de données
require_once("connexion.php");
//déclaration des variables en PHP pour récupérer les valeurs saisies sur le formulaire
(NAME)
// le (login et pass )
$log=htmlentities(trim($_POST['login']));
$pass=htmlentities(trim($_POST['pass']));
$PC=md5($pass);//code de cryptage du mot de passe
//vérification du mot de passe et login avec celle qui sont stoker dans la base de données
$req="select * from users where log='$log' and passwd='$PC'";
// Code d'exécution de la requête
$rs=mysql_query($req) or die(mysql_error());
if ($u=mysql_fetch_assoc($rs)){
session_start();//sécurisation de l'URL
$_SESSION['niv']=$u['niveau'];
//redirection vers la page affiche.php si tous est correcte
header("location:affiche.php");
}
else//redirection vers la page index.php si tous n'est pas correcte
{
header("location:index.php");
}
?>
Fichier: valider.php
33
IV.2.6 Page gestion des vols
Nous avons ici la page des gestions des vols avec les différentes options ajoutées de
modifier et supprimé nous permettant ainsi gérer les vols.
Figure 25: gestion des vols
<?php
//appelle du fichier connexion .php
//pour la connexion à la base de données
require_once("connection.php");
// requete pour l'affichage des vols à tananarive
$af="select * from tananarive";
//code pour l'exécuté la requête
$rs=mysql_query($af) or die(mysql_error());
?>
//lien vers la page ajouter.php pour ajouter un vol
<a class="aj_btn" href="saisie.html">Ajout-vol</a>
//lien vers la page supprimer.php pour supprimer un vol
<a class="del_btn" href="suprimer.php?code=<?php echo ($ET['id']) ?>">Suprimer</a >
//lien vers la page modification.php pour modifier un vol
<a class="edit_btn" href="editer.php?id=<?php echo ($ET['id']) ?>">Modifier</a>
Fichier affichage.php
34
IV.2.7 Page ajout de vol
C’est dans cette page que nous avons la possibilité d’ajouter un vol il suffit saisir les
valeurs sur lieu de départ et d’arriver ainsi que l’heure et la date du vol.
Figure 26: ajout de vol
DOCTYPE html>
<html>
<head>
<title>GESTION DES ETUDIANS</title>
<meta charset="utf_8">
<link rel="stylesheet" type="text/css" href="saisie.css" />
</head>
<body>
<div class="loginbox">
<form method="POST" action="ajoute.php" >
<p>NON VOLS:</p>
<input type="text" name="Nom"/>
<p>HEURE:</p>
<input type="text" name="heure"/>
<p>DATE:</p>
<input type="text" name="date"/>
<input type="submit" name="submit" value="Envoyer"/><br><br>
35
</form>
</div>
</body>
</html>
Fichier : formulaire_Ajout.php
<?php
//si l'utilisateur clique sur le bouton submit(envoyer)
if (isset($_POST['submit']))
{
//connexion à la base de données
require_once("connection.php");
//récupération des nouvelles valeur sur le formulaire html(nom,heure,date)
$nom=$_POST['nom'];
$heure=$_POST['heure'];
$date=$_POST['date'];
//requête pour insertion des données des vols dans la base des données
$aj=("insert into tananarive(nom,heure,date) values ('$nom','$heure','$date')");
// code d'execution de la requête
mysql_query($aj) or(die(mysql_error()));
//retour vers la page affichage pour voir si le vol est bien ajouté
header("location:affiche.php");
}
?>
Fichier : Ajouter.php
IV.2.8 Page de Modification de vol
Ceci présente la page de mise à jour de vols elle nous permet de modifier les
vols en cas de retard ou reportage des vols pour informer les différents passages
concernent les nouvelles instructions pour meilleur organisation.
36
Figure 27 : modification des vols
<?php
require_once("connection.php");
$id=$_GET['id'];
$req="select * from tananarive where id=$id";
$rs=mysql_query($req) or die(mysql_error());
$ET=mysql_fetch_assoc($rs);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="edite.css" />
</head>
<body>
<div class="loginbox">
<form method="POST" action="modifier.php" enctype="multipart/form-
data" >
<p>LISTE DES VOLES:</p>
<input type="hidden" name="id" value="<?php echo
($ET['id']) ?>"/>
<input type="text" name="liste" value="<?php echo
($ET['liste']) ?>" />
<p>HEURE:</p>
<input type="text" name="heure" value="<?php echo
($ET['heure']) ?>" />
37
<p>DATE:</p>
<input type="text" name="date" value="<?php echo
($ET['date']) ?>" />
<br><br>
<input type="submit" name="submit"
value="Envoyer"/><br><br>
</form>
</div>
</body>
</html>
Fichier: modification.php
<?php //ninie Rj.
//si l'utilisateur clique sur le bouton submit(envoyer)
if (isset($_POST['submit']))
{
//connexion à la base de données
require_once("connection.php");
//récupération des nouvelles valeurs des vols sur le formulaire html
//(id,liste,heure,datem)
$id=$_POST['id'];
$liste=$_POST['liste'];
$heure=$_POST['heure'];
$date=$_POST['date'];
//requête de modification des vols (le non du vol, heure, et la date)
//en fonction de l'identifiant
$mod="update tananarive set liste='$liste', heure='$heure', date='$date' where
id=$id";
// Code d'execution de la requête
mysql_query($mod) or(die(mysql_error()));
//retour vers la page affichage pour voir si le vol a été bien modifier
header("location:affiche.php");
}
?>
Fichier : modification.php
IV.2.9 Page de suppression de vol
Ceci présent la page de suppression des vols avec message confirmation pour
supprimer les vols dans ou les vols a déjà eu lieu.
38
Figure 28: suppression des vols
<?php
//connexion à la base de données
require_once("connection.php");
//Identification de l'identifiant (id) a supprimé
$code=$_GET['code'];
//requete de supression du vol en fonction de l'identifiant
$sup="delete from tananarive where (id=$code)";
// Code d'exécution de la requête
mysql_query($sup) or die (mysql_error());
//retour vers la page affichage pour voir si le vol est bien supprimé
header("location:affiche.php");
?>
Fichier : supprimer.php
39
CONCLUSION
En guise de conclusion, ce stage de fin d’études effectué au sein de la Eqima m’a
permis d’avoir un aperçu de ce qu’est la vie professionnelle, avec toutes les contraintes et les
limites imposées dans le travail à accomplir. La réalisation de cette se site web m’a été très
bénéfique, car ça m’a permis de développer mes connaissances sous divers langages de
programmation savoir le HTML, CSS, PHP et java script et jQuery. En ce qui concerne ceux
projet en elle-même elle reste un projet très utile, car il permet à tous les visiteurs du site de
pouvoir s’informé sur leur vol n’importe quel moment et partout dans le monde.
Ce type d’application requiert la maitrise de différents types de langage de script :
PHP, ainsi qu’un sens artistique au niveau du design défini par les langages : HTML, CSS,
JavaScript. Il ne faut pas négliger ou prendre à la légère chaque étape. Pour mettre en œuvre
l’application, elle suit des procédures bien défini depuis la conception de la base de données à
partir de l’architecture MVC (Modèle Vue Contrôleur) jusqu’à la création des pages PHP et
html. Chaque étape constitue un maillon nécessaire pour l’optimisation du site, son bon
fonctionnement et surtout sa sécurité.
• Un ensemble de pages « statiques », c'est-à-dire dont le contenu n'est pas influencé
par l'internaute qui la demande, et qui n'évolue pas sans une intervention manuelle sur le code.
• Un ensemble de pages « dynamiques », c'est-à-dire dont le contenu évolue sans que
le code du site web ne soit modifié, soit via l'interaction des utilisateurs, soit par du calcul.
C'est le cas de la très large majorité des sites web depuis le début des années 2000.
Pour un internaute qui fait appel à une URL, la page web correspondante, qu'elle soit
statique ou dynamique, consiste en du code « côté client » (HTML, CSS, Javascript, ...) qui
est interprété par son navigateur (Google Chrome, Firefox, ...) produisant une interface
utilisateur. Ce code, qui est renvoyé par un serveur web, peut ou non avoir été généré par du
calcul « côté serveur », via des langages de programmation particuliers, pouvant faire appel à
des bases de données.
Ce mémoire nous permet de voir le fonctionnement ainsi que la conception des sites
web. Par ailleurs ce projet apportera aux futurs programmeurs une idée ainsi que les
procédures à suivre pour la réalisation d’un système de gestion et affichage des vols, qui est
très utiles dans les aéroports.
40
REFERENCE
[1] : http://glossaire.infowebmaster.fr/javascript/ (le 20 décembre 2019 )
[2] http://glossaire.infowebmaster.fr/jquery/ (le 20 décembre 2019)
[3] https://fr.wikipedia.org/wiki/Hypertext_Markup_Language (le 20 décembre 2019)
[4] https://fr.wikipedia.org/wiki/PHP (le 25 décembre 2019)
[5] https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur(le 25 décembre
2019)
[6] http://glossaire.infowebmaster.fr/jquery/(le 25 décembre 2019)
[7] https://fr.wikipedia.org/wiki/Bootstrap (framework) (le 27 décembre 2019)
[8] https://fr.wikipedia.org/wiki/Font_Awesome (le 27 décembre 2019)
[9] https://fr.wikibooks.org/wiki/Adobe_Photoshop/Introduction (le 27 décembre 2019)
[10] https://fr.wikipedia.org/wiki/Material_design (le 27 décembre 2019)
41
Annexe 1 : L’APPLICATION WEB
La page affichage de vols
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-language" content="fr" />
<meta name="language" content="fr" />
<meta name="copyright" content="Eqima madagascar" />
<meta name="author" content="yassem mahamoud" />
<meta property="og:language" content="fr" />
<meta property="og:title" content="Eqima" />
<meta property="og:site_name" content="yassem.byethost10.com" />
<meta property="og:url" content="http://yassem.byethost10.com/" />
<meta property="og:description" content="Eqima" />
<link rel="icon" type="image/png" href="img/b.png" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--Let browser know website is optimized for mobile-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-
8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl"
crossorigin="anonymous"></script>-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"/>
42
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Eqima</title>
</head>
<body id="home" class="srcollspy">
<!--Navbar -->
<div class="navbar-fixed">
<nav class="teal ">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img class="lg0" src="img/2.png" class="lg0"></a>
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#search">Search</a>
</li>
<li>
<a href="#popular">Popular</a>
</li>
<li>
<a href="#gallery">Gallery</a>
</li>
<li>
<a href="#contact">Contact</a>
43
</li>
</ul>
</a>
</div>
</div>
</nav>
</div>
<ul class="sidenav" id="mobile-nav">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#search">Search</a>
</li>
<li>
<a href="#popular">Popular</a>
</li>
<li>
<a href="#gallery">Gallery</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<!-- SEction :slider-->
<section class="slider">
44
<ul class="slides">
<li>
<img src="img/1.jpg"> <!-- random image -->
<div class="caption center-align">
<h2>Bienvenue sur le site d'Adema </h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only"><span class="lg3"> L'ADEMA (Aéroport
de Madagascar) qui assure la gestion de l'aérogare compte mette en oeurvre les nouvelles
techonologies. Il met à la disposition des compagnies aérienne et différent equipe pour vous
servires.
. </h5>
</div>
</li>
<li>
<img src="img/2.jpg"> <!-- random image -->
<!--left-align-->
<div class="caption center-align">
<h2>Air Madagascar</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only"><span class="lg3"> L'île d'Anjouan est la
principale zone de production agricole de l'Union. Les principales ressources de devise s sont la
vanille, l'ylang-ylang et le girofle, ces deux dernières productions étant récoltées principalement
dans l'île</span></h5>
</div>
</li>
<li>
<img src="img/3.jpg"> <!-- random image -->
<!--right-align-->
<div class="caption center-align">
<h2>Aéroport </h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only"><span class="lg3">L'île d'Anjouan est la
principale zone de production agricole de l'Union. Les principales ressources de devise s sont la
vanille, l'ylang-ylang et le girofle, ces deux dernières productions étant récoltées principalement
45
dans l'île</span></h5>
</div>
</li>
<li>
<img src="img/4.jpg"> <!-- random image -->
<div class="caption center-align">
<h2>l'Adema sera toujours la pour vous</h2>
<h5 class="light grey-text text-lighten-3 hide-on-small-only"><span class="lg3"> L'île d'Anjouan est la
principale zone de production agricole de l'Union. Les principales ressources de devise s sont la
vanille, l'ylang-ylang et le girofle, ces deux dernières productions étant récoltées principalement
dans l'île</span></h5>
</div>
</li>
</ul>
</section>
<!--Section: Search -->
<section id="search" class="section section-search teal darken-1 white-text center scrollspy ">
<div class="container">
<div class="row">
<div class="col s12">
<h3 id="zezezr">Search Destination</h3>
<div class="input-field">
<input type="text" class="white grey-text autocomplete" id="autocomplete-input"
placeholder="Madagascarda, France, etc... ">
</div>
</div>
</div>
</div>
</section>
46
<!--Section: Icon-->
<section class="section section-icons grey lighten-4 center">
<div class="quote" >
<div>
<div class="container" >
<div class="row">
<div class="col s12 m4" data-aos="fade-in" data-aos-delay="300">
<div class="card-panel box box1">
<i class="material-icons large
teal-text">info</i>
<a href="information/index.php" class="dd"><H4>Information</H4></a>
<p class="lg2">Pour plus information sur le retard ou reportage de vols clique sur cette partie. </p>
</div>
</div>
<div class="col s12 m4" data-aos="fade-in" data-aos-delay="600">
<div class="card-panel box box2">
<i class="material-icons large
teal-text">person</i>
<a href="presentation\index.php" class="dd"><H4>Présentation</H4></a>
<p class="lg2">Pour plus reignement sur notre entreprise cliqué sur cette page.</p>
</div>
</div>
<div class="col s12 m4" data-aos="fade-in" data-aos-delay="900">
<div class="card-panel box box3">
<i class="material-icons large
teal-text">airplanemode_active</i>
47
<a href="systheme\index.php" class="dd"><H4>Aviation</H4></a>
<p class="lg2">Pour l'affichage de tous les vols de nos differents aréport cliqué ici.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SEction popular places-->
<section id="popular" class="section section-popular scrollspy">
<div class="container">
<div class="row">
<h4 class="center"><span class="teal-text tesxt1"> Popular</span> Places</h4>
<div class="col s12 m4" data-aos="fade-right" data-aos-delay="300">
<div class="card">
<div class="card-image">
<img src="img/5.jpg" alt="image">
<span class="card-title"></span>
</div>
<div class="card-content center">
<p class="lg">Logo Adema Madagascar</p>
</div>
</div>
</div>
<!---->
<div class="col s12 m4" data-aos="fade-down" data-aos-delay="900">
48
<div class="card">
<div class="card-image">
<img src="img/6.jpg" alt="image">
<span class="card-title"></span>
</div>
<div class="card-content center">
<p class="lg">Logo Air Madagascar</p>
</div>
</div>
</div>
<!---->
<div class="col s12 m4" data-aos="fade-left" data-aos-delay="600">
<div class="card">
<div class="card-image">
<img src="img/7.jpg" alt="image">
<span class="card-title"></span>
</div>
<div class="card-content center">
<p class="lg">Logo pays Madagascar</p>
</div>
</div>
</div>
<!---->
</div>
<div>
</section>
<!-- Sction : follow-->
49
<section class="section section-follow teal darken-2 white-text center">
<div class="container">
<div class="row">
<div class="col s12">
<h4 data-aos="fade-down" data-aos-delay="300">Follow travelville</h4>
<p>Follow us on social media for special offers </p>
<a href="#" class="white-text">
<i class="fa fa-facebook-square fa-4x" data-aos="fade-in" data-aos-delay="300"></i>
</a>
<a href="#" class="white-text">
<i class="fa fa-twitter-square fa-4x" data-aos="fade-in" data-aos-delay="600"></i>
</a>
<a href="#" class="white-text">
<i class="fa fa-linkedin-square fa-4x" data-aos="fade-in" data-aos-delay="900"></i>
</a>
<a href="#" class="white-text">
<i class="fa fa-google-plus-square fa-4x" data-aos="fade-in" data-aos-delay="1200"></i>
</a>
<a href="#" class="white-text">
<i class="fa fa-pinterest-square fa-4x" data-aos="fade-in" data-aos-delay="1500"></i>
</a>
</div>
</div>
</div>
</section>
<!-- Section Gallery-->
<section id="gallery" class="section section-gallery scrollspy">
50
<div class="container">
<h4 class="center">
<span class="teal-text">Photo </span>Gallery
</h4>
<div class="row">
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="300">
<img src="img/12.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="300">
<img src="img/13.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="300">
<img src="img/14.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3"data-aos="fade-in" data-aos-delay="300">
<img src="img/15.jpg" alt="" class="materialboxed responsive-img">
</div>
</div>
<div class="row">
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="600">
<img src="img/8.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="600">
<img src="img/9.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="600">
<img src="img/10.jpg" alt="" class="materialboxed responsive-img">
</div>
51
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="600">
<img src="img/11.jpg" alt="" class="materialboxed responsive-img">
</div>
</div>
<div class="row">
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="900">
<img src="img/16.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="900">
<img src="img/17.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="900">
<img src="img/18.jpg" alt="" class="materialboxed responsive-img">
</div>
<div class="col s12 m3" data-aos="fade-in" data-aos-delay="900">
<img src="img/19.jpg" alt="" class="materialboxed responsive-img">
</div>
</div>
</div>
</section>
<!--section contact -->
<section id="contact" class="section section-contact scrollspy" >
<div class="container">
<h4 class="center">
<span class="teal-text">Formulaire </span>Contact
</h4>
<div class="row">
<div class="col s12 m6" data-aos="fade-right" data-aos-delay="300">
<div class="card-panel teal white-text center">
52
<i class="material-icons">email</i>
<h5>contactez Adema</h5>
<p>
Pour plus d'infromation voici nos cordonnée Email téléphone adresse pour nous contacté en cas de
besoin nous vous souhaitons une journée.
</p>
</div>
<ul class="collection with-header">
<li class="collection-header"><h5 ><span class="teal-text">Adrs:</span> BP 1254 Ampandrianomby
101 </h5></li>
<li class="collection-item"><h5 ><span class="teal-text">Email:</span>
[email protected]</h5></li>
<li class="collection-header"><h5 ><span class="teal-text">Site web:</span>
www.adema.mg</h5></li>
<li class="collection-item"><h5 ><span class="teal-text">Tel:</span> +261 20 26 396 32 </h5></li>
</ul>
</div>
<div class="col s12 m6" data-aos="fade-left" data-aos-delay="900">
<div class="card-panel grey lighten-3">
<h5>S'il vous plait remplissez le formulaire</h5>
<div class="input-field">
<input type="text" placeholder="Name">
</div>
<div class="input-field">
<input type="text" placeholder="Email">
</div>
<div class="input-field">
<input type="text" placeholder="Phone">
</div>
<div class="input-field">
53
<textarea class="materialize-textarea" placeholder="Enter message"></textarea>
</div>
<input type="submit" value="Submit" class="btn">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer-->
<footer class="section teal darken-2 white-text center">
<p class="flow-text"> Adema © 2019 Tous droits résérvés.</p>
</footer>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script >
//sidenav
const sideNav = document.querySelector('.sidenav');
M.Sidenav.init(sideNav,{});
// slider
const slider = document.querySelector('.slider');
M.Slider.init(slider,{
indicators: false,
height: 500,
transition: 500,
interval: 6000
});
// Autocomple
const ac = document.querySelector('.autocomplete');
54
M.Autocomplete.init(ac,{
data:{
"Madagascar":null,
"Comores":null,
"Paris":null,
"Egypte":null,
"Europe":null,
"Japon":null,
"France":null,
}
});
//Material Boxed
const mb = document.querySelectorAll('.materialboxed');
M.Materialbox.init(mb,{});
//Scrolly
const ss = document.querySelectorAll('.scrollspy');
M.Scrolly.init(ss, {});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
easing:'ease',
duration: 1800
});
//-----
$(function() {
/**
* Smooth scrolling to page anchor on click
55
**/
$("a[href*='#']:not([href='#'])").click(function() {
if (
location.hostname == this.hostname
&& this.pathname.replace(/^\//,"") == location.pathname.replace(/^\//,"")
) {
var anchor = $(this.hash);
anchor = anchor.length ? anchor : $("[name=" + this.hash.slice(1) +"]");
if ( anchor.length ) {
$("html, body").animate( { scrollTop: anchor.offset().top }, 1500);
}
}
});
});
</script>
</body>
</html>
TITRE : Application web pour la gestion d’affichage des vols Resumé
Notre projet consiste à réaliser un site web pour l’affichage et gestion de vols et la
présentation de l’entreprise. Il est divisé en 4 grandes parties une périmer partie qui est la page
d’accueil qui présent le site web avec ces différents onglés qui dispose. Une deuxième partie
qui est la page information permettant de publier les informations importantes concernent les
vols ou sur l’entreprise, et puis une troisième partie présentation qui présente l’entreprise et
les personnels important qui le constitue. Pour finir une partie aviation qui présent qui affiche
tous les vols des différents aéroports avec un système de gestion d’ajout de modification de
suppression pour la mise à jour constante des vols.
Mots clés : site web, gestion des vols.
ABSTRACT
Our project consists in creating a website for the display and management of flights and the
presentation of the company. It is divided into 4 major parts, which is the home page which
presents the website with these different tabs. A second part which is the information page
allowing to publish the important information concerning the flights or on the company, and
then a third part presentation which presents the company and the important personnel which
constitutes it. Finally, an aviation part which presents which displays all the flights from the
different airports with a management system of addition of modification of suppression for
the constant update of the flights.
Keywords: website, flight management.
Rapporteur
M. RASAMIMANANA François de Salle
Maitre de Conférences
M.MANDIMBY Junior Zoé Tigana
Docteur
Impétrante :
YASSEM MAHAMOUD
Tél : 00261341382629
E-mail : [email protected]
Adresse: Lot II F 34 BA TERC Andraisoro
