Conception D'un Site Web Dynamiques Securisé Pour La FGI - V6

CONCEPTION D’UN SITE WEB DYNAMIQUE SECURISE POUR LA FACULTE
DE GENIE INDUSTRIEL DE DOUALA
DEDICACE
REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

Rédigé et soutenu par ANAFACK Diderot Jordan I
REMERCIEMENTS
Avant tout développement sur cette expérience professionnelle, il apparaît opportun de

commencer ce rapport de stage par des remerciements, à ceux qui nous ont beaucoup appris au
cours de ce stage, et même à ceux qui ont eu la gentillesse de faire de ce stage un moment très
profitable ainsi nous disons merci.
 A M. Louis Marie DJAMBOU, président et fondateur de l’Institut Universitaire du

Golfe de Guinée.
 A M. NDZANA Rigobert, notre encadreur professionnel qui nous a formé et
accompagné tout au long de cette expérience professionnelle avec beaucoup de patience
et de pédagogie.
 A M. TCHUENKAMDOM Isidore mon encadreur académique pour sa disponibilité
infaillible, son encadrement, ses conseils et sa volonté de nous donner une meilleure
formation
 A Tout le corps enseignant de l’IUG de Douala pour son apport indéniable dans notre
formation
 A Mes parents pour leur soutien.
 A tous mes camarades de promotion pour leur convivialité

Rédigé et soutenu par ANAFACK Diderot Jordan II
AVANT-PROPOS
’arrêté ministériel n° 90/E/50/MINEDUC du 24 décembre 1971 est celui qui institua
L ’examen national du brevet de techniciens supérieurs (BTS), ceci dans le but de fournir
aux entreprises camerounaises des techniciens directement opérationnels.
La formation tient sur deux ans comprenant un stage académique de deux mois effectué
à la fin de la première année. Ce stage a pour but de confronter les étudiants aux réalités du
monde professionnel et entraîne la rédaction d’un rapport soutenu en fin de deuxième année.
En créant ce diplôme le ministère ouvre un grand marché pour la branche de l’éducation.

Parmi les divers offreurs de ce marché, on peut citer l’Institut Universitaire du Golfe de Guinée
qui regroupe en son sein trois campus (ESG, ISTA et ISA)1. Il est situé à Douala-bassa au
quartier pk8 à quelques mètres de l’entrée laïc et a été créé par arrêté ministériel N°
78/J2/2656/MINEDUC/SCAFES du 10 septembre 1993. Il a pour finalité de préparer les jeunes
titulaires d’un baccalauréat ou d’un diplôme équivalent dans les options, filières et spécialités
suivantes :
 Le cycle MASTER 2 (bac + 5)

 Le cycle MASTER 1 (bac + 4)
 Le cycle BACHELOR (GCE, A-L + 3)
 Le cycle LICENCE PROFESSIONNELLE (bac + 3)
 Le cycle HND (bac + 2)
 Le cycle BTS (bac + 2)
Dans le cas qui se rapporte à nous, le cycle BTS comprend une liste non exhaustive d’options
suivantes :
 Banque (BQ) ;
 Commerce international (CI) ;
 Comptabilité et gestion des entreprises (CGE) ;
 Journalisme (JO) ;
 Assistant Manager(AMA) ;

Rédigé et soutenu par ANAFACK Diderot Jordan III
 Gestion Logistique et Transport(GLT)

 Gestion des Ressources Humaines(GRH)
 Gestion des Systèmes d’Information (GSI) ;
Avec aujourd’hui ses vingt-sept années d’expérience, un imposant palmarès aux divers
examens officiels qui le hissent au sommet de la hiérarchie nationale, une gamme
d’infrastructures aussi complètes que modernes, un corps enseignant des plus sélectifs, l’Institut
Universitaire du Golfe de Guinée s’impose comme l’une des institutions privées
d’enseignement supérieur les plus performantes d’Afrique Centrale.
Etant donné le caractère professionnel que revêt ce diplôme, l’étudiant en cycle BTS doit
effectuer un stage académique dont l’objectif est non seulement de concrétiser les
connaissances théoriques acquises mais surtout de découvrir les réalités de l’entreprise dans un
contexte professionnel réel. Ayant effectué un stage a la Faculté de Génie Industriel de Douala.,
plus précisément au service informatique, nous vous présenterons notre travail portant sur le
thème : « Analyse et Conception d’un Site Web Dynamique Sécurisé ».

Rédigé et soutenu par ANAFACK Diderot Jordan IV
RESUME
L’objectif principal de ce rapport est d’apporter des solutions au problème de mise à jour
des informations sur le site web de la Faculté de Génie Industriel. Face à l’inexistence d’une
interface d’administration permettant de faciliter les mises à jour des informations sur le site
existant, nous avons jugé très important de mettre en place une nouvelle plateforme web qui
permettra de faciliter les mises à jour sur le site (site web dynamique). Ce système réunira en
son sein des utilisateurs qui en fonction des rôles pourront effectuer des mises à jour via des
interfaces agréables et simples ainsi qu’un profil super utilisateur qui sera chargé de gérer les
profils. Ce projet constituera pour nous un moyen de permettre à la Faculté de Génie industriel
de toujours avoir des informations à jour sur son site et ainsi de mieux renseigner les visiteur et
partenaires qui consultent son site.
SOMMAIRE

Rédigé et soutenu par ANAFACK Diderot Jordan V
ABSTRACT
The principal objective of this report is to provide solutions to the problem of updating
information on the website of the Faculty of Industrial Engineering. Faced with the inexistence
of an administration interface allowing to facilitate the updates of information on the existing
SOMMAIRE
site, we considered it very important to set up a new web platform that will make it possible to
facilitate the updates on the site (dynamic website). This system will bring together users who,
depending on the roles, will be able to update via pleasant and simple interfaces as well as a
super user profile who will be responsible for managing the profiles. This project will constitute
for us a means of enabling the Faculty of Industrial Engineering to always have up-to-date
information on its site and thus to better inform visitors and partners who consult its site.
SOMMAIRE
SOMMAIR
E
SOMMAIRE
SOMMAIRE
Rédigé et soutenu par ANAFACK Diderot Jordan VI
SOMMAIRE
DEDICACE .............................................................................................................................................. i
REMERCIEMENTS ................................................................................................................................ii
AVANT-PROPOS...................................................................................................................................iii
SOMMAIRE
RESUME ..................................................................................................................................................v
ABSTRACT ............................................................................................................................................ vi
LISTE DES ABREVIATIONS ............................................................................................................. viii
INTRODUCTION GENERALE ............................................................................................................. 1
PREMIERE PARTIE : PRESENTATION DE L’ENTREPRISE ET ETUDE DE L’EXISTANT ............... 2

CHAPITRE 1 : PRÉSENTATION DE LA FGI ET DEROULEMENT DU STAGE.......................... 3
................................................................................................. 3
................................................................................................. 9
CHAPITRE 2 : ETUDE DE L’EXISTANT .................................................................................................. 12
LISTE DES
............................................................................... 12
FIGURES ............................................................ 14
Deuxième PARTIE : MODELISATION ET IMLPLEMENTATION DU NOUVEAU SYSTEME ......... 18
CHAPITRE 3 : Modélisation du système futur ................................................................................... 19
.................................................. 19
SOMMAIRE
............................................................................ 22
CHAPITRE 4 : IMPLEMENTATION....................................................................................................... 40
..................................................................... 40
........................................................................... 44
CONCLUSION GENERALE ............................................................................................................... 56
ANNEXE ................................................................................................................................................. I
SOMMAIRE
REFERENCES BIBLIOGRAPHIQUES ................................................................................................ II
TABLE DES MATIERES....................................................................................................................... II

Rédigé et soutenu par ANAFACK Diderot Jordan LISTE DES VII
FIGURES
LISTE DES ABREVIATIONS
FGI : Faculté de Génie Industriel
LISTE DES FIGURES

UDo : Université de Douala.
LMD: License Master Doctorat
ISO: International Standard Organization
UML : Unified Modeling Language
AGL : Atelier de Génie Logiciel

LISTE DES FIGURES
ORM: Object Relation Mapping,
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
HTTPS: Hyper Text Transfer Protocol Secure
LISTE DES FIGURES

WAMP: Windows Apache MySQL PHP
XSS: Cross Site Scripting
CSRF: Cross Site Request Forgery
SSL: Secure Socket Layer
OWASP: Open Web Application Security Project

Rédigé et soutenu par ANAFACK Diderot Jordan VIII
LISTE DES FIGURES
Figure 1: localisation de la FGI ................................................................................................... 4

Figure 2: Organigramme de la FGI............................................................................................. 8
Figure 3 : Formalisme du cas d'utilisation ................................................................................ 22
LISTE
Figure 4: Exemple de représentation d’un acteur ................................................................... 23
Figure 5: Exemple de représentation d’un cas d'utilisation .................................................... 23
DES FIGURES
Figure 6: Diagramme des cas d’utilisation global .................................................................... 24
Figure 7: diagramme de cas d’utilisation de la cellule informatique ....................................... 25
Figure 8: diagramme de cas d’utilisation du responsable de l’école doctorale ...................... 26
Figure 9: diagramme de cas d’utilisation du responsable de la cellule de communication .... 26
Figure 10: diagramme de cas d’utilisation du Chef de département ...................................... 27
Figure 11 : diagramme d’activité pour la validation des modifications sur le site .................. 31
LISTE DES
Figure 12: diagramme d’activité ajouter un utilisateur ........................................................... 32
Figure 13: diagramme d’activité pour l’authentification ......................................................... 33
FIGURES
Figure 14: diagramme d’activité contacter l’administration ................................................... 33
Figure 15: formalisme du diagramme de séquence ................................................................ 34
Figure 16: diagramme de séquence créer un utilisateur ......................................................... 35
Figure 17: diagramme de séquence contacter l’administration .............................................. 36
Figure 18:diagramme de séquence s’authentifier ................................................................... 37
LISTE
Figure 19: Diagramme de classes ............................................................................................. 39
Figure 20: caractéristiques machine ........................................................................................ 41
Figure 21: Configuration de WampServer................................................................................ 41
DES FIGURES
Figure 22: schéma de base données ........................................................................................ 45
Figure 23: base de données ..................................................................................................... 46
Figure 24: IHM accueil .............................................................................................................. 47
Figure 25: IHM connexion ........................................................................................................ 48
Figure 26: IHM département.................................................................................................... 48
Figure 27 : IHM Accueil cellule informatique ........................................................................... 49
Figure 28 : IHM Accueil cellule informatique ........................................................................... 49
Figure 29: IHM Ajout utilisateur ............................................................................................... 50
Figure 30: IHM Responsable des formations ........................................................................... 50
Figure 31: IHM mise à jour enseignement ............................................................................... 51

Rédigé et soutenu par ANAFACK Diderot Jordan IX
LISTE DES TABLEAUX
Tableau 1 : Fiche d’identification de la FGI .............................................................................. 4

Tableau 2: chronogramme des activités ................................................................................... 10
Tableau 3 : Description Cas d’utilisation s’authentifier ........................................................... 28
Tableau 4:Description Cas d'utilisation Fournir les autorisations de modification ................. 28
Tableau 5: Description cas d’utilisation vérifier autorisation .................................................. 29
Tableau 6: Eléments d'un diagramme d'activité ....................................................................... 30
Tableau 7 : failles de sécurité par OWAS 2017 .......................................................................... I

Rédigé et soutenu par ANAFACK Diderot Jordan X
INTRODUCTION GENERALE
L'information est devenue aujourd'hui un outil efficace pour tout gestionnaire qui veut
agir de manière efficiente1(*). L’Internet de son côté est le seul support de communication qui
offre des avantages et services relatifs à l'information à un coût très réduit. Il permet avec ses
liens virtuels d'aller d'une page à une autre, d'un serveur à un autre, d'un point du globe à un
autre, à une vitesse record et d'une manière presque transparente pour son utilisateur, rien que
par un simple clic. Selon DREYFUS2(*), la recherche de l'information sur Internet représente
25% du trafic total en volume sur le net. De ce fait nous sommes convaincus que si une université
dispose de son propre site internet, cela représentera un outil efficace pour sa promotion et cela
pourrait permettre à ses partenaires et étudiants de recueillir des informations sur elle ou de
transmettre à l'université des informations en un temps record mais faudrait-il encore que les
informations fournies sur le site soient d’actualité et cohérentes.
Pendant notre stage nous avons constaté que la FGI possède déjà une plate-forme web et lors
de son étude, nous avons décelé de multiples insuffisances. Dans le but de palier à ces
insuffisances, notre travail sera de concevoir et réaliser un nouveau site web a grâce au langage
de programmation PHP et de modélisation UML, d’où le thème « Analyse et Conception d’un
Site Web Dynamique Sécurisé ».
Il est vrai que les établissements scolaires et universitaires qui présentent le cerveau moteur de
tout développement, doivent aussi bénéficier des avantages de l'internet en améliorant la qualité
d'information fournie aux élèves et aux étudiants. Il est donc utile pour nous de savoir
« comment la FGI peut exploiter internet dans le but d’améliorer la qualité d’information
fournie à ses étudiants ainsi qu’à ses partenaires ? ».
Dans le but d’atteindre l’objectif visé, notre rapport s’articulera sur deux parties : la première
partie intitulé présentation de l’entreprise et étude de l’existant ou nous allons faire une
présentation générale de la FGI ainsi que l’étude du système existant et une deuxième partie
intitulée phase technique dans laquelle nous allons présenter de bout en bout notre solution, la
conception et l’implémentation de celle-ci.

Rédigé et soutenu par ANAFACK Diderot Jordan 1
PREMIERE PARTIE :
PRESENTATION DE L’ENTREPRISE ET
ETUDE DE L’EXISTANT
Dans cette partie nous allons présenter dans le 1er chapitre la FGI, les activités que nous avons
effectuées et ce pour quoi nous avons choisi notre thème et dans le 2e chapitre nous ferons
l’étude de l’existant.

CHAPITRE 1 : PRÉSENTATION GENERALE ET

DEROULEMENT DU STAGE
Dans ce chapitre il sera question pour nous dans un premier temps de présenter l’université dans
laquelle nous avons effectué notre stage ensuite nous présenterons succinctement notre service
d’accueil et enfin nous détaillerons les activités que nous avons effectuées.
Il sera question dans cette section de présenter la FGI selon sa création, son évolution,
son organisation et son fonctionnement.
I. Création et évolution
1. Création
La Faculté de Génie Industriel (FGI) de l’Université de Douala a été créée en 1993 au
Cameroun, suite au décret n°93/030 du 19 janvier 1993 portant organisation administrative et
académique de l’Université de Douala. Elle n’a pas été effective dès la création à cause de la
conjoncture économique qui prévalait dans les années 90, et elle est opérationnelle depuis
décembre 2006 à la suite de l’arrêté ministériel N° 06/0130/MINESUP/DDES du 18 octobre
2006 portant ouverture de la Faculté de Génie Industriel à l’Université de Douala.
C’est une Faculté qui forme les ingénieurs en Génie Industriel dotés d’une grande capacité en
techniques de management intégré (ISO9001/08, ISO14001 et OHSAS 18001), et elle se
positionne peu à peu en institution leader de formation de ces nouveaux cadres. Toute la
formation à la FGI est strictement basée sur le système LMD.

Fiche d’identification de la FGI
Raison sociale Faculté de Génie Industriel

Sigle FGI
Emplacement Douala, PK17
Domaine d’activité Formation et éducation
Siège Douala, Cameroun
B.P. 2701
Email fgi-contact@fgi-udo.cm
Téléphone (237) 697 54 22 40
Site Web www.fgi-udo.cm
Tableau 1 : Fiche d’identification de la FGI
1.1 Situation géographique

La Faculté de Génie Industriel est située à Douala 3e au quartier pk17.Sa localisation depuis
Google maps se présente comme suit :
Figure 1: localisation de la FGI
1.2 Formations
La Faculté de Génie Industriel forme des Ingénieurs dans les domaines des Sciences, des
Technologies et Techniques, conformément au système LMD.

La FGI délivre les diplômes d’Ingénieur (BAC+5) et de Doctorat/PhD (BAC+8) en Sciences

de l’Ingénieur dans les filières suivantes :
 Technologie de Construction Industrielle (TCI) ;

 Technologie Automobile (TAU) ;
 Robotique Industrielle (ROI) ;
 Pêche Industrielle/Génie Maritime (PGM) ;
 Hygiène-Sécurité et Sûreté Industrielle (HSSI) ;
 Génie Civil (GCI) ;
 Télécommunications et Technologie de l’Information et de la Communication (TTIC) ;
 Génie Chimique (GCH) ;
Le système académique appliqué à la Faculté de Génie Industriel est le système LMD (Licence,
Master, Doctorat). En effet, l'étudiant admis au concours de la Faculté de Génie Industriel suit
le parcours suivant :
 Le cycle Licence : dans ce cycle d'une durée de trois ans, l'étudiant doit rassembler 180
crédits. Ce cycle est sanctionné par l'obtention d'une Licence en Génie Industriel.
 Le cycle Master : d'une durée de deux ans (120 crédits), ce cycle est sanctionné par
l'obtention d'un Master en Génie Industriel.
 Le cycle Doctorat : d'une durée de trois ans (180 crédits), il est sanctionné par un
Doctorat en Génie Industriel.
1.3 Capacités infrastructurelles
La FGI est logée au Campus de PK17, en périphérie de la ville de la ville de Douala, et bâti sur
un site de plusieurs hectares comprenant :
 Un amphithéâtre de 1200 places ;

 Deux bâtiments pédagogiques abritant des laboratoires et une cinquantaine de salles de
cours à la pointe de la technologie.
 Un bâtiment administratif ;
 Sept ateliers bâtis sur une superficie de 800 m2 au sol chacun ;

 Un laboratoire informatique ;
 Une médiathèque avec connexion intranet donnant accès à plus de 15 000 ouvrages
spécialisés en Ingénierie et plusieurs revues ;
 Un parking pouvant abriter plus de 500 véhicules ;
 Un minibus de 30 places pour les visites d’entreprises ;
 Etc.
2. Evolution
Depuis sa création, la Faculté de Génie Industriel a connu de nombreux changements qui se
sont matérialisés par la création :
 D’un nouveau département Génie des Procédés(GPR) dont l’objectif est de former les
ingénieurs capables de concevoir, faire fonctionner, améliorer, gérer ou commercialiser
des procédés,
 D’un centre d’incubation qui est un organe d’accompagnement des porteurs de projets
industriels et/ou technologiques.
Tout dernièrement une réflexion sur un texte de transformation de la FGI en Ecole Nationale
Supérieur Polytechnique de Douala (ENSPD). Cette nouvelle dénomination induit des
changements sur le plan administratif. Notamment la disparition du poste de doyen laissant
place à un directeur ; les 3 postes de vice-doyen disparaissent, apparition d’un poste de
Directeurs Adjoint.
II. Organisation et fonctionnement

1. Organisation de la Faculté de Génie Industriel
La Faculté de Génie Industriel met tous ses atouts en œuvre afin d’atteindre ses objectifs. Pour
l’aider dans cette démarche, elle a à sa disposition de nombreuses responsables administratifs
ainsi que des chefs et responsables des départements.
POSTES DES RESPONSABLES ADMINISTRATIFS :
 DOYEN
 VICE-DOYEN chargé de Programmation
 VICE-DOYEN chargé de la Scolarité

 VICE-DOYEN Chargé de la Recherche et de la Coopération

 CHEF de Division Administrative et Financière
 CHEF de Division de la Formation Continue
 CHEF de Division des Stage et de la Recherche
 CHEF de Division de la qualité et stratégie
LES DEPARTEMENTS DE LA FGI :

La Faculté de Génie Industriel compte 08 départements organisés comme suit :
 Technologie de Construction Industrielle (TCI)

 Pêche Industrielle (PEI)
 Hygiène, sûreté et Sécurité Industrielle (HSSI)
 Génie Civil (GCI)
 Télécommunication et Technologie de l’Information et de la Communication
(TTIC)
 Technologie Automobile (TAU)
 Robotique Industrielle (ROI)
 Tronc Commun (TCO)
2. Organigramme
La FGI est organisée en plusieurs départements et services entretenant entre eux
d’interdépendance.

Figure 2: Organigramme de la FGI
Rédigé et soutenu par ANAFACK Diderot Jordan

Dans cette section il sera question pour nous de présenter le service dans lequel nous avons
effectué notre stage, les activités que nous avons réalisées ainsi que la justification de notre
thème.
I. Présentation de la cellule informatique

1. Présentation et organisation
1.1 Présentation
La cellule informatique est une structure opérationnelle de la faculté placée sous
l’autorité directe du doyen.
Elle est dirigée par un chef de cellule ayant rang et prérogative de chef d’établissement
des institutions universitaires, assister d’un adjoint ayant rang et prérogatives de chef service
de l’administration centrale.
1.2 Organisation
La cellule comprend trois (3) unités :
 Une unité de traitement des inscriptions et pré-inscriptions

 Une unité de traitement des examens
 Une unité de traitement des diplômes.
2. Objectifs
La cellule a pour objectif le traitement, l’identification, l’authentification et la sécurisation
numérique des données de la faculté. A cette fin elle a pour principale tâche d’assurer :
 La vigie informatique de la faculté

 La sécurisation des résultats d’examen
 La numérisation des données numériques
 La mise en place d’un réseau de gestion académique
 L’élaboration des lignes directives du programme général d’informatisation
 La coordination de toutes les activités des unités relevant de son autorité

II. Activités du stage

1. Chronogramme des activités
LISTE DES ACTIVITES EFFECTUEES PERIODICITE EN SEMAINE
S1 S2 S3 S4 S5 S6 S7 S8 S9 S10
Prise de contact avec l’ensemble du

personnel de la cellule informatique
- Etude de la plateforme web

existante de la FGI et description
des processus
- Identification des différentes
insuffisances de la plateforme web
existante.
Début de la rédaction de la première

partie du pré-rapport de stage
- Initiation au développement des

site web avec le Framework
LARAVEL
- Début de la rédaction de la partie 2

du pré-rapport de stage
- Finalisation du pré-rapport
- Elaboration d’un PowerPoint pour
la Pré-soutenance
- Pré-soutenance
Tableau 2: chronogramme des activités

2. Justification du thème
Avoir un site internet est important pour toute organisation car c’est un outil efficace pour sa
promotion. Plusieurs raisons nous ont amené à porter la réflexion sur ce sujet. Ces raisons sont
aussi pertinentes les unes que les autres.
 Avoir une plateforme web dynamique et administrable en ligne avec la gestion des
profils d’utilisateurs permettant de faciliter les mises à jour,
 Avoir une plateforme web ergonomique, facile d’utilisation et flexible.
Ces éléments justifient le choix de ce thème car ils permettront ainsi de mettre en place un
système plus efficace permettant à la Faculté de Génie Industriel d’avoir une meilleure présence
sur internet.

CHAPITRE 2 : ETUDE DE L’EXISTANT
L’étude de l’existant est une étape très importante dans l’informatisation d’une
entreprise, car elle permet de mieux maitriser le système actuel afin de concevoir une solution
informatique spécifique aux problèmes rencontrés.
Dans ce chapitre nous analyserons le système existant ainsi que ces différents processus, puis
nous le critiquerons et nous proposerons une ébauche de solution.
La description du système existant est une étape clé dans la conception d’un système
d’information. Elle nous relève les insuffisances de l’ancien système ce qui nous permet
d’avoir une vue plus approfondie du nouveau système à mettre en œuvre.
Dans cette section nous allons procéder premièrement à la délimitation de l’existant ensuite
nous décrirons les processus.
I. Délimitation du système d’information

Le système soumis à notre étude est un site web qui permet de présenter les différentes
formations offertes par la faculté de Génie Industriel. De façon générale il permet à un visiteur
de :
 Consulter les informations sur la FGI (le personnel administratif, les infrastructures et
bien d’autres informations concernant la FGI dérouler dans le chapitre précédent,
 Consulter les différents départements ainsi que les domaines de formation de la FGI,
 Consulter les modalités pour les concours d’entrée à la FGI,
 etc.

LES ACTEURS DU SYSTEME
Un acteur est une personne physique ou morale qui intervient activement dans le système
d’information ou qui le stimule. Nous pouvons citer par exemple un service, une personne, une
fonction ou sous-fonction d’une organisation. Ceux du système étudié sont regroupés en acteurs
principaux et secondaires.
 LES ACTEURS PRINCIPAUX

Un acteur principal est un poste de travail ou une cellule (ensemble de plusieurs
postes de travail) qui appartient au champ d’étude. Dans le cas de notre système, les
acteurs principaux
- Cellule informatique
- Doyen
- Chef de département
- Responsable de l’école doctorale
- Responsable du centre d’incubation
- Responsable des formations
- Responsable de la cellule de communication
 LES ACTEURS SECONDAIRES

Un acteur secondaire est celui qui est hors du champ d’étude et dont l’intervention ou
même la simple existence est capitale au fonctionnement du système. Nous avons
pour le cas d’espèce :
- Visiteur
II. Description des processus du système

a. Consultation des informations

La plateforme web actuelle de la Faculté de Génie Industriel permet au visiteur de

pouvoir s’informer. Lorsqu’un visiteur arrive sur la plateforme il peut consulter les informations
qui y sont présentes. Un visiteur peut être un étudiant, un parent, un personnel de la FGI ou
toute personne qui a accès à la plateforme et il peut avoir des informations sur les formations,
l’administration centrale, l’organisation, les informations sur l’université en général et bien
d’autres.
b. Mise à jour des informations

L’ajout des informations sur la plateforme est effectué par la cellule informatique. Pour ce faire,
suivant la nature des informations à modifier sur la plateforme, le centre d’incubation, l’école
doctorale, le service des programmes d’enseignements et de recherche ou la cellule de la
communication et des relations publiques soumet le document concernant les modifications des
informations à la validation du doyen. Après avoir reçu le document contenant les modifications
à effectuer sur le site et après validation du doyen, un membre de la cellule informatique via un
petit module du site qui permet d’administrer la plateforme, se connecte et met à jour les
informations.
I. Critique de l’existant
Cette critique qui découle de l’analyse de l’existant préalablement menée a pour but de fournir
un état de situation actuelle et notamment de faire apparaître les qualités et les défauts de ce qui
existe déjà. Nous résumons dans le tableau ci-dessous les problèmes, causes, objectifs et
solution.

Tableau d’analyse causale
Problèmes Causes Objectifs Solutions

Navigation sur le site Barre de navigation Rendre la barre de Concevoir un site
web dynamique,
via les smartphone non responsive navigation responsive
responsive,
difficile ergonomique et
Informations non mise Absence d’une Facilité les mises à sécurisé,
à jour régulièrement interface jour des informations Mettre en place la

sur le site d’administration sur le site gestions des profils
d’utilisateurs.
complète
Site web peu attractif Mauvais design Améliorer le design
du site
II. Ebauche de solution

Pour pallier aux différents problèmes cités ci-dessus, nous mettrons en place une
nouvelle plateforme web qui permettra à la FGI de faciliter les mises à jour sur son site et le
rendre plus attrayant.
1. Objectifs
Pour la réalisation de notre projet il sera question pour nous de fixer des objectifs permettant de
gérer les multiples problèmes décelés à savoir :
 Concevoir une plateforme web sécurisé et responsive,

 Faciliter les mises à jour sur le site,
 Permettre une consultation des informations plus agréable.
2. Expression des besoins

2.1 Besoins Fonctionnels
Les besoins fonctionnels se rapportent aux fonctionnalités que l'application doit offrir pour
satisfaire les utilisateurs.
Les fonctionnalités que doit intégrer le site web à développer sont :

 Gestion des utilisateurs : pour avoir accès à la plateforme d’administration, plusieurs

profils seront créés pour que chaque utilisateur ne puisse effectuer des modifications
que sur les données dont il est responsable. L’interface d’administration permettra
même aux non-informaticiens de pouvoir administrer (ajouter ou supprimer des
informations, selon ses droits).
.
 Gestion des mises à jour : cette opération consiste à améliorer et faciliter les mises à
jour sur le site.
 Gestion des statistiques : cette opération permettra au doyen de consulter les

statistiques concernant les inscriptions, concours et pouvoir les imprimer au besoin.
2.2 Besoins non Fonctionnels

Les besoins non fonctionnels sont indispensables et permettent l'amélioration de la qualité
logicielle de notre système. Ils agissent comme des contraintes sur les solutions, mais leur prise
en considération fait éviter plusieurs incohérences dans le système. Ce dernier doit répondre
aux exigences suivantes:
 Authentification : le système doit permettre à l'utilisateur de s’authentifier en saisissant

un login et mot de passe pour accéder à la plateforme d’administration du système.
 Ergonomie : le système devra offrir aux utilisateurs une interface qui soit riche et
simple. Par ailleurs, l'interactivité devra être adaptée (usage du clavier, menu, souris,
etc.).
 Accessibilité : dans le but d’améliorer le nombre de visiteurs de notre plateforme, nous

allons mettre en place un site web responsive adapter aux terminaux divers (ordinateur,
tablette, smartphone).
 Sécurité : dans le but d’assurer la sécurité, plateforme entière sera sécurisée contre les
intrusions telles : attaques par XSS, injections SQL et des failles web les plus courantes
en général. Nous allons aussi mettre en place le protocole HTTPS qui fera office de

sécurité et chiffrera toutes les communications entre le serveur qui héberge et les
utilisateurs.
 Compatibilité : le site web doit pouvoir s’ouvrir sur n’importe quel navigateur web
fonctionnant sous des systèmes (Windows, Linux, Mac, Android, IOS).
 Rapidité de chargement de la page

Deuxième PARTIE :
MODELISATION ET IMLPLEMENTATION DU
NOUVEAU SYSTEME
Dans cette partie, il sera question pour nous dans le chapitre III de procéder à la
modélisation du système futur à l’aide du langage UML, puis dans le chapitre IV nous
procèderons à son implémentation.

CHAPITRE 3 : Modélisation du système futur
La réalisation d'un site web doit être impérativement précédée d'une méthodologie
d'analyse et de conception qui a pour objectif de permettre de formaliser les étapes préliminaires
du développement d'un site afin de rendre ce développement plus fidèle aux besoins du client.
La phase d'analyse permet de lister les résultats attendus, en matière de fonctionnalité et la phase
de conception permet de décrire de manière non ambiguë, le plus souvent en utilisant un langage
de modélisation, le fonctionnement futur du système, afin d'en faciliter la réalisation. Dans un
premier temps nous présenterons le langage UML ainsi que la description des nouveaux
processus systèmes ensuite nous passerons à l’étude des principaux diagrammes de UML
Nous allons présenter dans cette partie le langage UML ainsi que les AGL qui ont été utilisés
ensuite nous allons décrire les nouveaux processus système.
I. Présentation de UML et des AGL utilisés

1.1 Historique
Pour mener à bien un projet d'analyse et de conception informatique, il est important
d'utiliser un langage de modélisation approprié. Nous avons choisi UML (Unified Modeling
Language), que l'on traduit par « langage de modélisation unifié » UML est un langage de
modélisation objet née de la fusion de trois langages de modélisation objet (Booch, OMT,
OOSE). Ils qui ont révolutionné la modélisation dans les années 90. UML est dit universel car
il est indépendant des langages de programmation, des domaines d’application et aussi du
processus de développement adopté.

Il permet de représenter un système sous forme de schémas. Sa notation graphique et

textuelle permet d’exprimer visuellement une solution objet, ce qui facilite la comparaison et
l’évaluation de la solution. Notons que UML est ouvert et n’est la propriété de personne.
UML est particulièrement utile dans notre cas car il nous permettra de décrire de façon
graphique au travers du diagramme de cas d’utilisation, diagrammes d’activité, diagramme
séquence et de classes, l’architecture logicielle du système que nous souhaitons mettre sur pied.
1.2 Justification du choix de UML
Il vaut mieux modéliser un système avant de le réaliser car la modélisation permet de mieux
comprendre le fonctionnement du système.
Plusieurs raisons conduisent à préconiser l'utilisation d'UML pour définir un système

d'information car UML nous permet de :
 Obtenir une modélisation de très haut niveau indépendante des langages et des
environnements.
 Faire des simulations avant de construire un système.
 Exprimer dans un seul modèle tous les aspects statiques, dynamiques, juridiques,
spécifications, etc.
 Documenter un projet,
 Générer automatiquement la partie logicielle d'un système.
1.3 Présentation des outils logiciels (AGL)

1.3.1 Dia
Dia est un logiciel libre de création graphique. Il est conçu de
manière modulaire avec plusieurs paquetages de formes pour des
besoins différents : diagrammes de flux, diagrammes de circuit
électrique, diagramme UML, etc. Dia propose la génération de
codes PHP5, C++, Java, Python, etc. Il sera utilisé pour générer
notre diagramme de classes.

1.3.2 Power Designer

PowerAMC est un logiciel de modélisation. Il permet de modéliser
les traitements informatiques et leurs bases de données associées. Il
sera utilisé pour générer notre diagramme de cas
d’utilisations, activités et séquences.
II. Description des nouveaux processus

a. Consultation des informations
La nouvelle plateforme web de la Faculté de Génie Industriel permet au visiteur de
pouvoir se renseigner et s’informer interagir avec le système par le biais d’une recherche ou
grâce à la page de contact. Lorsqu’un visiteur arrive sur la plateforme il peut consulter les
informations qui y sont présentes mais aussi il peut effectuer une recherche ou contacter
l’administration pour avoir plus d’informations. Un visiteur est toute personne qui a accès à la
plateforme sans authentification.
b. Mise à jour des informations

L’ajout des informations sur la plateforme est effectué par les utilisateurs du système. Pour ce
faire, suivant la nature des informations à modifier sur la plateforme, le centre d’incubation,
l’école doctorale, le service des programmes d’enseignements et de recherche ou la cellule de
la communication soumet le document concernant les modifications des informations à la
validation du doyen. Dans le cas où le doyen a une suggestion, il la propose et renvoie le
document à son émetteur pour correction, si après cette suggestion le document n’est pas
conforme il le rejette. Dans le cas ou la modification est approuvée, le document est soumis à
la cellule informatique qui se connecte sur la plateforme et donne l’autorisation à l’utilisateur.
Après cette étape, le responsable de la mise à jour se connecte sur le site, s’authentifie et effectue
sa mise à jour.
NB : une fois l’autorisation accordée à un utilisateur, celui-ci dispose de 48H pour effectuer sa
mise à jour au-delà de cette durée, l’autorisation est automatiquement retiré.

I. Les diagrammes UML
Un diagramme UML est une représentation graphique, qui s'intéresse à un aspect précis
du modèle. Chaque type de diagramme UML possède une structure (les types des éléments de
modélisation qui le composent sont prédéfinis) et véhicule une sémantique précise (il offre
toujours la même vue d'un système). Combinés, les différents types de diagrammes UML
offrent une vue complète des aspects statiques et dynamiques d'un système. Les diagrammes
permettent donc d'inspecter un modèle selon différentes perspectives et guident l'utilisation des
éléments de modélisation (les concepts objet), car ils possèdent une structure. Une
caractéristique importante des diagrammes UML, est qu'ils supportent l'abstraction. Cela
permet de mieux contrôler la complexité dans l'expression et l'élaboration des solutions objet.
II. Les diagrammes utilisés

2.1 Les diagrammes de cas d’utilisation
2.1.1 Objectif
Le diagramme de cas d’utilisation représente la structure des grandes fonctionnalités
nécessaires aux utilisateurs du système. Il sera notre premier diagramme du modèle UML, celui
où s’assure la relation entre l’utilisateur et les objets que le système met en œuvre.
2.1.2 Formalisme
Les différentes informations et traitements entre les acteurs seront matérialisés dans le
diagramme de cas d’utilisation selon le formalisme suivant (exemple d’une banque) :
Figure 3 : Formalisme du cas d'utilisation

Exemple simplifié du diagramme de cas d’utilisations modélisant une borne d’accès à une
Banque.
Légende :
 Client : c’est l’émetteur des cas d’utilisations « Retirer argent, effectuer un virement,
consulter comptes » ;
2.1.3 Description des éléments du cas d’utilisation

Acteur
Un acteur est l’idéalisation d’un rôle joué par une personne externe, un processus ou une chose
qui interagit avec un système. Il se représente par un petit bonhomme avec son nom.
Client
Figure 4: Exemple de représentation d’un acteur
Cas d’utilisation
Un cas d’utilisation est une unité cohérente d’une fonctionnalité visible de l’extérieur. Il réalise
un service de bout en bout, avec un déclenchement, un déroulement et une fin, pour l’acteur qui
l’initie. Un cas d’utilisation modélise donc un service rendu par le système, sans imposer le
mode de réalisation de ce service. Un cas d’utilisation se représente par une ellipse contenant
le nom du cas (un verbe à l’infinitif), et optionnellement, au-dessus du nom, un stéréotype.
Nom du cas d'utilisation
Figure 5: Exemple de représentation d’un cas d'utilisation
2.1.4 Elaboration de nos diagrammes de cas d’utilisation

On représente un diagramme de cas d’utilisations qui résume tous les cas de notre système et
montre de façon globale les grandes fonctionnalités de notre système. Il est important car il
permet d’observer les différentes relations entre les acteurs du système à savoir l’héritage :

Cas d’utilisation global
Figure 6: Diagramme des cas d’utilisation global
Nous allons présenter les cas d’utilisations pour les acteurs du système qui gèrent plusieurs
fonctionnalités afin de mieux identifier le rôle de chacun. Les cas d’utilisations présentés ci-
dessous détaillent les cas d’utilisation globaux. Ils permettent de mieux cerner les
fonctionnalités de notre site web.

 La cellule informatique
Figure 7: diagramme de cas d’utilisation de la cellule informatique

 Le responsable de l’école doctorale
Figure 8: diagramme de cas d’utilisation du responsable de l’école doctorale
 Le responsable de la cellule de communication
Figure 9: diagramme de cas d’utilisation du responsable de la cellule de communication

 Chef de département
Figure 10: diagramme de cas d’utilisation du Chef de département
2.1.5 Description textuelle des cas d’utilisation

 Cas d’utilisation s’authentifier
IDENTIFICATION DU CAS D’UTILISATION

NOM : Authentification
OBJECTIFS : Permet à tout utilisateur du site de
s’authentifier pour effectuer les tâches de
gestion
Cette fonctionnalité permet d’authentifier les
RESUME : utilisateurs qui effectuent des tâches
d’administrations sur notre plateforme(mise à
jour , gestion des utilisateurs , etc.)
Responsable des formations, Responsable de
ACTEURS PRINCIPAUX : l’école doctorale, Responsable du centre
d’incubation, Chef de département,
Responsable de la cellule de communication
ACTEUR SECONDAIRE : -
DESCRIPTION DES SCENARIOS
PRECONDITIONS POST CONDITIONS
Etre enregistré dans la base de données L’utilisateur est rediriger vers son
comme utilisateur. environnement
SCENARIO NOMINAL
1- L’utilisateur saisi l’URL du site sur le navigateur
2- Le navigateur affiche la page d’accueil du site
3- L’utilisateur saisi une phrase secrète sur la barre d’adresse du navigateur
4- Le site affiche la page de pré-authentification

5- L’utilisateur choisit son profil et valide

6- Le système demande à l’utilisateur de s’authentifier
7- L’utilisateur saisit son email, mot de passe et soumet
8- Le système vérifie la conformité des données
9- Le système valide les données
10- L’utilisateur accède à son environnement
SCENARIO ALTERNATIF
3-1 Si la phrase secrète est erronée le site affiche une page d’erreur
8-1 Si les données sont invalides, le système affiche le message d’erreur et le
scénario recommence à 6
Tableau 3 : Description Cas d’utilisation s’authentifier

 Cas d’utilisation Fournir les autorisations de modification

NOM : Fournir les autorisations de modifications
OBJECTIFS : Attribuer les autorisations
RESUME : Cette fonctionnalité permet à l’administrateur
d’attribuer les autorisations au utilisateurs
ACTEUR PRINCIPAL : Cellule informatique
ACTEURS SECONDAIRES : l’école doctorale, Responsable du centre
L’utilisateur existe dans la base de Le système donne l’autorisation de
données modification
SCENARIO NOMINAL
1- L’administrateur clique sur utilisateurs
2- Le système affiche la page de gestions des utilisateurs
3- L’administrateur sélectionne le profil de l’utilisateur
4- Le système affiche les utilisateurs du profil
5- L’administrateur clique sur modifier
6- Le système affiche les informations de l’utilisateur
7- L’administrateur coche sur autorisation et valide
8- Le système donne l’autorisation à l’utilisateur choisi
SCENARIO ALTERNATIF
7-1 Si l’utilisateur a déjà l’autorisation, l’administrateur clique sur retour et le
scénario est terminer.
Tableau 4:Description Cas d'utilisation Fournir les autorisations de modification

 Cas d’utilisation vérifier autorisation

NOM : Vérifier autorisation
OBJECTIF(S): S’assurer que les utilisateurs n’effectuent des
modifications que lorsqu’ils ont une
autorisation
RESUME : -
ACTEUR PRINCIPAL : l’école doctorale, Responsable du centre
-
ACTEUR SECONDAIRE :
Le système refuse la possibilité de Le système donne la possibilité de
modification modification
SCENARIO NOMINAL
1- L’utilisateur effectue une authentification
2- Le système récupère les informations de l’utilisateur depuis la Base de données
3- Le système vérifie si le champ autorisation est à « 1 »
4- Le système affiche la page d’accueil avec les fonctionnalités de l’utilisateur
SCENARIO ALTERNATIF
1.1- Si l’authentification échoue, le scénario recommence à l’étape 1.
3.1- Si le champ autorisation est à « 0 », le système masque les fonctionnalités
Tableau 5: Description cas d’utilisation vérifier autorisation
2.2 - Le diagramme d’activité

Dans la phase de conception, les diagrammes d'activités sont particulièrement adaptés à
la description des cas d'utilisation.
2.2.1 Objectif
Le diagramme d'activité est un diagramme comportemental d'UML, permettant de représenter
le déclenchement d'événements en fonction des états du système et de modéliser des
comportements parallélisables (multithreads ou multiprocessus). Le diagramme d'activité est
également utilisé pour décrire un flux de travail (workflow). Il est recommandable pour
exprimer une dimension temporelle sur une partie du modèle, à partir de diagrammes de classes
ou de cas d'utilisation.

2.2.2 Formalisme
Dans le diagramme d’activité on retrouve les principaux éléments suivants :
Elément Représentation
ACTIVITE
Nom de l'activité
TRANSITION
NŒUD DE DECISION
NŒUD DE DEBUT
NŒUD DE FIN
Tableau 6: Eléments d'un diagramme d'activité
2.2.3 Représentation de nos diagrammes d’activités

Diagramme d’activité pour l’autorisation des modifications sur le site

Figure 11 : diagramme d’activité pour la validation des modifications sur le site

Figure 12: diagramme d’activité ajouter un utilisateur

Diagramme d’activité pour l’authentification
Figure 13: diagramme d’activité pour l’authentification
Diagramme d’activité contacter l’administration
Figure 14: diagramme d’activité contacter l’administration

2.3 Diagramme de séquence

Il représente la succession chronologique des opérations réalisées par acteur. Il indique les objets que
l’acteur va manipuler et les opérations qui font passer d’un objet à l’autre.
2.3.1 Objectif
Le diagramme de séquence fait partie des diagrammes comportementaux (dynamique) et plus
précisément des diagrammes d’interactions.
Il permet de représenter des échanges entre les différents objets et acteurs du système en
fonction du temps.
A moins que le système à modéliser soit extrêmement simple, nous ne pouvons pas modéliser
la dynamique globale du système dans un seul diagramme. Nous ferons donc appel à un
ensemble de diagrammes de séquences chacun correspondant à une sous-fonction du système,
généralement d’ailleurs pour illustrer un cas d’utilisation.
2.3.2 Formalisme
Figure 15: formalisme du diagramme de séquence
2.3.3 Représentation de nos diagrammes de séquence

Diagramme de séquence créer un utilisateur

Figure 16: diagramme de séquence créer un utilisateur

NB : c’est à peu près la même procédure pour ajouter un nouveau dossier, ajouter un membre
du laboratoire.

Diagramme de séquence contacter l’administration
Figure 17: diagramme de séquence contacter l’administration

Diagramme de séquence s’authentifier
Figure 18:diagramme de séquence s’authentifier
2.4 Le diagramme de classes

2.4.1 Objectif
Le diagramme de classes est considéré comme le plus important de la modélisation orientée
objet, il est le seul obligatoire lors d’une telle modélisation. Alors que le diagramme de cas
d’utilisation montre un système du point de vue des acteurs, le diagramme de classes en montre
la structure interne.
Il permet de fournir une représentation abstraite des objets du système qui vont interagir
ensemble pour réaliser les cas d’utilisation. Il est important de noter qu’un même objet peut très
bien intervenir dans la réalisation de plusieurs cas d’utilisation. Les cas d’utilisation ne réalisent
donc pas une partition des classes du diagramme de classes. Un diagramme de classes n’est
donc pas adapté (sauf cas particulier) pour détailler, décomposer, ou illustrer la réalisation d’un
cas d’utilisation particulier.

2.4.2 Formalisme
Les principaux éléments d’un diagramme de classes
 Classe :
 Nom de la classe
 Propriétés
 Méthodes
 Relations entre les classes :

 Association : c’est une connexion sémantique entre deux classes.
 Héritage : c’est un principe de division d’une classe en sous-classes

(spécialisation) ou de réunion de plusieurs classes ayant des propriétés identiques
(généralisation)
 Agrégation : c’est une association avec relation de subordination, représenté par

un trait reliant les deux classes et dont l’origine se distingue de l’autre extrémité
(la classe subordonnée) par un losange vide.
 Composition : c’est une agrégation avec cycle de vie dépendant : la classe

composée est détruite lorsque la classe mère disparait.
2.4.3 Elaboration du diagramme de classes

Figure 19: Diagramme de classes

CHAPITRE 4 : IMPLEMENTATION
A ce stade du processus, les cas d'utilisations sont terminés, le problème a été analysé
en profondeur. Nous avons défini une conception mieux appropriée aux besoins de
l'application. Nous pouvons alors entreprendre la dernière activité du projet composé de deux
parties (implémentation et test), ayant comme objectif d'aboutir à un produit final, exploitable
par les utilisateurs. Dans cette phase nous allons présenter les outils de développement que nous
avons utilisé, l'architecture matérielle, l’implémentation des cas d'utilisation, quelques
exemples d’interfaces représentant les pages web qui ont été réalisées. Enfin nous allons
aborder les aspects liés à la sécurité de notre site.
SECTION 1
Dans cette section nous allons présenter les différents outils qui nous ont permis de réaliser
notre site web ensuite nous présenterons les technologies que nous avons utilisé.
I. Environnement de développement
Dans cette partie on représente brièvement les interfaces de chaque logiciel que nous avons
utilisé, on évoquera le système d'exploitions, WampServer, ainsi que des Framework Laravel
version 5, Bootstrap version 4.
1. Système d’exploitation
L'environnement de base qui a constitué le support de notre travail est le système d'exploitation
Windows 7. Il offre les fonctionnalistes pour obtenir d'excellentes performances de façon aisée.
Nous bénéficions de la puissance et de la fiabilité de la technologie du système d'exploitation
le plus évolué de Microsoft.
Windows 7, offre la fiabilité et l'efficacité qui est optimisée .il en fait plus, en procurant un
pouvoir de travail plus efficace.
Ci-dessous les caractéristiques :

Figure 20: caractéristiques machine
2. WampServer version 3.1.9
Figure 21: Configuration de WampServer
C’est une plate-forme de développement Web sous Windows pour des applications Web
dynamiques à l’aide du serveur Apache2, du langage de scripts PHP et d’une base de données
MySQL. Il possède également PhpMyAdmin permettant ainsi une gestion plus facile des bases
de données. Chaque version d’Apache, MySQL et PHP dispose de sa propre configuration
(principalement apache 2.2 et apache 2.4) et ses propres fichiers (données pour MySQL). Le
logiciel est disponible gratuitement en deux versions : 32 et 64 bits.

3. Sublime Text
Sublime Text est un éditeur de texte générique codé en C++ et Python, il prend en charge 44
langages de programmation majeurs, tandis que des plugins sont souvent disponibles pour les
langages plus rares.
4. MySQL Workbench
MySQL Workbench (anciennement MySQL admininstrator) est un
logiciel de gestion et d’administration de base de données MySQL crée
en 2004. Via une interface intuitive, il permet de créer, modifier ou
supprimer des tables, des comptes d’utilisateurs, et d’effectuer toutes les
opérations inhérentes à la gestion d’une base de données.
II. Langages de programmation

1. Le langage HTML
Le langage HTML permet de définir l'habillage d'un document,

c'est-à-dire la façon dont il s'afficher à l'écran d'un navigateur.
Cette notion d'habillage est importante : elle signifie qu'une page

écrite en HTML comportera du texte, bien sûr, mais aussi des codes
ou balises permettant de modifier l'affichage de ce texte, à savoir sa
forme, sa taille, sa couleur, le HTML permet également d'inclure
des images, du son ou des animations dans une page web.
2. Le langage PHP
PHP est un langage de scripts libre principalement utilisé pour produire

des pages Web dynamiques via un serveur HTTP, mais pouvant
également fonctionner comme n'importe quel langage interprété de
façon locale, en exécutant les programmes en ligne de commande. En

raison de la richesse de sa bibliothèque, on désigne parfois PHP comme une plate-forme plus
qu'un simple langage.
3. Le langage JavaScript
Le JavaScript est un langage de script incorporé sans un document
HML. Ce langage est un langage de programmation qui permet
d'apporter des améliorations au langage HTML en permettant
d'exécuter des commandes du coté client. C'est-à-dire au niveau du
navigateur et non du serveur web.
Ainsi le langage JavaScript ne nécessite pas de compilateur,

contrairement au langage JAVA, avec lequel il a longtemps été
confondu.
4. MySQL
MySQL est un système de gestion de base de données (SGBD).

Selon le type d'application, sa licence est libre ou propriétaire. Il
fait partie des logiciels de gestion de base de données les plus
utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, en concurrence avec
Oracle et Microsoft SQL Server.
MySQL est un serveur de bases de données relationnelles SQL

développé dans un souci de performances élevées en lecture.
III. Frameworks
1. LARAVEL
Laravel est un Framework web open-source écrit en PHP. Il respecte le modèle MVC
(modèle vue-contrôleur). C’est un Framework orienté objet distribué sous licence MIT.
C’est un outil qui, dans sa conception, se base sur le meilleur de plusieurs autres
Frameworks pour développer son propre système et être plus efficace. Il possède également des
composants qui lui sont propres. Il fournit entre autre :

- Un système de routage des vues ,

- Un créateur de requêtes SQL et une gestion de version de Base de données,
- Un ORM performant,
- Un système d’authentification pour les connexions,
- Un système de cache,
- Une gestion de sessions.
2. BOOTSTRAP
Bootstrap est une collection d'outils utile à la création de sites web et 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
(GitHub est un service web d'hébergement et de gestion de développement de logiciels).
SECTION 2 :
Dans cette section nous présenterons la base de données de notre système en suites quelques
interfaces, en fin l’aspect sécurité de notre site.
I. Base de données
1. Schéma de base de données
Grace à MySQL Workbench nous avons réalisé le schéma de données suivant pour notre
système :

Figure 22: schéma de base données

2. Implémentation physique de la base de données dans WAMP
Figure 23: base de données

II. IHM
1. Frontend
Le Frontend ou partie visible par les visiteurs ou toute autre personne non authentifier.
 Page d’accueil
Figure 24: IHM accueil

 Page de connexion
Figure 25: IHM connexion
 Page des départements
Figure 26: IHM département
2. Backend
C’est la plateforme d’administration qui permet de faire des modifications, mises à jour des
informations sur le site.
 Page d’accueil Responsable de la cellule informatique(Admin)

Figure 27 : IHM Accueil cellule informatique
 Page de gestion des utilisateurs
Figure 28 : IHM Accueil cellule informatique

 Formulaire d’ajout d’un utilisateur (chef de département)
Figure 29: IHM Ajout utilisateur
 Page d’accueil Responsable des formations
Figure 30: IHM Responsable des formations

 Page de mise à jour des Enseignements
Figure 31: IHM mise à jour enseignement
III. Sécurité
Aujourd’hui, dans tout système informatique la sécurité est devenue un élément essentiel
permettant d’assurer la confidentialité, l’intégrité et la disponibilité des données. Son importance
est d’autant plus utile dans les plateformes web car internet est devenu un immense terrain de
jeu et de chasse pour les pirates du web. Gérer la sécurité d’un site web est devenu en ce sens
une priorité pour les entreprises car de nombreuses plateformes web professionnelles bien
conçues subissent des attaques et se trouvent souvent paralysées ou complètement détruites.
Nous allons présenter les aspects de la sécurité de notre système et les failles web dont notre
système a été protégé.
1. Aspects de sécurité de base

 L’authentification
Pour avoir accès à notre plateforme d’administration, les utilisateurs devrons s’authentifier avec
une adresse email et un mot de passe.

 La gestion des autorisations
Les utilisateurs du système n’ont accès qu’aux fonctionnalités liées à leur profil.
2. Quelques Failles Web
Une vulnérabilité ou faille est une faiblesse dans un système informatique permettant à un
attaquant de porter atteinte à l'intégrité de ce système. Les failles sont majoritairement dues aux
erreurs de programmation, ou bien à des oublis de sécurisation. Notons aussi que la faille peut
être due à une mauvaise configuration du serveur qui se contente de distribuer les pages web
après avoir interprété le code PHP présent dans le fichier demandé. C’est en exploitant ces bugs,
ces failles web, que le pirate peut obtenir un accès partiel ou total du site. Il peut obtenir des
informations de la base de données ou, encore, contrôler le contenu intégral du site, le modifier,
supprimer des pages, en rajouter, etc.
Nous allons présenter les principales failles présentes dans les applications web et dont notre
système est immunisé (annexe). Les méthodes de protection présentées sont celles qui ont été
utilisées dans notre système en tenant compte de nos outils et ne sont pas donc universelles.
2.1 La faille Cross-Site Scripting(XSS)

a. Principe
La faille XSS (plus officiellement appelée Cross-Site Scripting) est une faille permettant
l'injection de code HTML ou JavaScript dans des variables mal protégées. Elle permet
d’exécuter des scripts du coté client. Ceci signifie que nous ne pouvons exécuter que du
JAVASCRIPT, HTML et d’autres langages qui ne vont s’exécuter que chez celui qui lance le
script et pas sur le serveur directement.
b. Méthode de protection
Pour se protéger contre cette faille Laravel grâce à son moteur de Template blade, mes a notre
disposition une syntaxe : {{ $variable }}. Grace à cette syntaxe nous pouvons afficher nos
variables sans crainte.

2.2 La Faille d’injection SQL

a. Principe
L'injection SQL est une méthode offensive très connue. Elle consiste à modifier une
requête SQL en injectant des morceaux de code non filtrés, généralement par le biais d'un
formulaire.
b. Méthode de protection
Pour se protégé contre cette faille, nous utilisons des requêtes préparées. Laravel encore une
fois grâce à Query Builder nous permet de réaliser des requêtes sécurisées.
2.3 Falsification des requêtes intersites(CSRF)

c. Principe
La faille CSRF ("Cross site request forgery") est très souvent assimilée à la XSS alors que ces
deux failles sont diamétralement opposées. Quand la XSS cherche à dérober des informations
personnelles de l'utilisateur, la CSRF cherche à lui faire exécuter des actions à son insu
directement sur son ordinateur.
d. Méthode de protection
Pour se protégé contre cette faille, nous utilisons à chaque page de notre site un jeton pour
authentifier les requêtes.
3. Les Bonnes pratiques de programmation

3.1 Le contrôle des mots de passes
Un point fondamental de la sécurité informatique n'est autre que le mot de passe. Bien que nous
l'ayons protégé, il est possible qu'il soit tout simplement trop faible.
Tous les mots de passe des utilisateurs doivent êtres hachés avant d’être stocker dans une base
de données. Pour cella on peut utiliser plusieurs fonction PHP : sha1(), bcryp () etc.

Permet ainsi de hacher le mot de passe de l’utilisateur et dans notre site nous avons utilisé la
fonction bcryp ().
3.2 Authentification PhpMyAdmin

Bon nombre d’utilisateurs de WampServer ont tendance à laisser le mot de passe de
connexion à la base de données par défaut ou de créer un mot de passe de connexion
personnalisé, mais en oublier de supprimer l’utilisateur par défaut qui est utilisateur : root sans
mot de passe.
Cette pratique peut couter très cher car un pirate qui a accès au serveur peut se connecter en
tant que root a notre base de données et y dérobé des informations confidentielles voire détruire
la base de données.
Dans notre cas WAMPSERVER est sécurisé par un mot de passe et l’utilisateur par défaut a
été supprimé.
3.3 Le Protocole HTTPS
Le HTTPS soit « protocole de transfert hypertexte sécurisé ») est un protocole qui permet
de chiffrer les informations sensibles transmises via un formulaire et d’authentifier le site afin
qui intermédiaire (pirate) ne puisse pas exploiter les données échangées quand bien même il
réussirait à entrer en possession de celles-ci.
a. Pourquoi utiliser le protocole HTTPS
Il est nécessaire de sécuriser un site avec https car il offre beaucoup d’avantages tels :
 La notoriété et la confiance vis-à-vis de vos clients : Google et Firefox affichent des

messages de plus en plus dissuasifs depuis 2017 à vos visiteurs pour les prévenir que le
site n’est pas sécurisé et que leurs données ne sont pas protégées.
 Impossibilité d’utiliser certains services : dans le cas de certains développements pour
notre site web, l’accès à un service web donné ne sera pas possible si le site n’est pas en
HTTPS.
b. - Mise en place du protocole HTTPS
La sécurisation de son site web avec https requiert trois étapes qui sont :

 Obtention d’un certificat SSL

 Installation du certificat
 La modification des fichiers du site
Obtention d’un certificat SSL
SSL est un protocole d’échange sécurisé entre deux points. Un certificat SSL va permettre de
garantir à votre visiteur passant par l’adresse https:// que le cryptage est validé de A à Z pour
l’échange des données entre son navigateur et notre site web.
L’obtention d’un certificat est payant Mais Grace au sponsor tel que Mozilla, Facebook et bien
d’autre il existe pour les petits sites vitrines et blogs, une solution gratuite : cette solution,
c’est la nouvelle autorité de certification Let’s Encrypt qui doit être renouvelé tous les 3
mois.
C’est le petit cadenas vert à côté de l’adresse du site. Plus il y a d’informations

en vert avec le cadenas mieux c’est.
Illustration :

CONCLUSION
Au terme de ce rapport où il était question pour nous de nous intéresser à la création
d’un site web et plus précisément la mise en place d’une nouvelle plateforme web dynamique
dans laquelle il sera plus facile de mettre à jour des informations concernant la Faculté de Génie
Industriel de Douala. De façon globale, nous pouvons dire que nous avons atteint les objectifs
fixés.
Pour ce faire nous avons tout d’abord réalisé une étude du système existant en vue de déceler
les insuffisances et les différents intervenants qui interagissent avec celui-ci. Ensuite grâce au
langage de modélisation Objet UML, nous avons modélisé notre système futur par la réalisation
des différents diagrammes qui nous ont permis à chaque étape d’avoir une meilleure
compréhension de notre système futur. Enfin grâce à cette modélisation de notre système, nous
avons généré la base de données de notre nouvelle plateforme ce qui nous a permis de passer à
l’étape de la programmation dans laquelle nous avons appliqué les règles de sécurité pour rendre
notre système invulnérable aux attaques des pirates et nous avons implémenté notre solution.
A la question de savoir « comment la FGI peut exploiter internet dans le but d’améliorer
la qualité d’information fournie à ses étudiants ainsi qu’à ses partenaires ? », nous pouvons
répondre que pour ce faire la FGI doit se doter d’une plateforme web dynamique ce qui facilitera
ainsi la mise à jour des informations et le fait que cette plate-forme soit dynamique rassurera le
visiteur de la véracité des informations sur la plateforme. En plus d’être dynamique, elle doit
être sécurisée pour se protéger contre d’éventuelles attaques des pirates. Néanmoins, il faut
rester vigilant en vérifiant de manière récurrente la sécurité et la mise à jour de son site web,
car les failles évoluent et de nouvelles se créent tous les jours.

ANNEXE
Classement des failles de sécurité les plus critiques

publier par l’OWASP en 2017 :
L’Open Web Application Security (OWASP) est un organisme à but non lucratif
mondial qui milite pour l’amélioration de la sécurité des logiciels. Chaque année OWASP
publie un classement qui récence les failles de sécurité les plus critiques. Voici le classement
2017 :
Tableau 7 : failles de sécurité par OWAS 2017
Rédigé et soutenu par ANAFACK Diderot Jordan I

REFERENCES BIBLIOGRAPHIQUES
Livres
* 1 OSAMBO, O, ours des Systèmes d’information, Lice I Gestion, ULK , Kigali, Paris, 2002
* 2 DREYFUS, M., Se former en 1jour : internet, Ed , s & SM, Paris, 1997, p 17
Cours
 https://openclassrooms.com/fr/courses/6179306-securisez-vos-applications-web-
avec-lowasp/
 https://openclassrooms.com/fr/courses/3613341-decouvrez-le-framework-php-
laravel/
 https://openclassrooms.com/fr/courses/1665806-programmez-en-oriente-objet-en-
php/
 https://openclassrooms.com/fr/courses/4670706-adoptez-une-architecture-mvc-en-
php
 https://openclassrooms.com/fr/courses/3306901-creez-des-pages-web-interactives-
avec-javascript/
 https://openclassrooms.com/fr/courses/1959476-administrez-vos-bases-de-donnees-
avec-mysql/
 https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-
et-mysql/
 https://openclassrooms.com/fr/courses/2984401-apprenez-a-coder-avec-javascript
 https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-
avec-html5-et-css3
 https://openclassrooms.com/fr/courses/2035826-debutez-lanalyse-logicielle-avec-
uml/
Articles
 https://www.httpcs.com/fr/top-10-owasp
 https://web.developpez.com/tutoriels/web/failles-securite-application-web/
Rédigé et soutenu par ANAFACK Diderot Jordan II

TABLE DES MATIERES
DEDICACE .............................................................................................................................................. i
REMERCIEMENTS ................................................................................................................................ii
AVANT-PROPOS...................................................................................................................................iii
RESUME ..................................................................................................................................................v
ABSTRACT ............................................................................................................................................ vi
LISTE DES ABREVIATIONS ............................................................................................................. viii
LISTE DES FIGURES ............................................................................................................................ ix
INTRODUCTION GENERALE ............................................................................................................. 1
PREMIERE PARTIE :PRESENTATION DE LA fgI ET ETUDE DE L’EXISTANT ............................. 2

CHAPITRE 1 : PRÉSENTATION GENERALE ET DEROULEMENT DU STAGE .......................... 3
................................................................................................. 3
I. Création et évolution........................................................................................................... 3
1. Création ........................................................................................................................... 3
2. Evolution.......................................................................................................................... 6
II. Organisation et fonctionnement ......................................................................................... 6
1. Organisation de la Faculté de Génie Industriel ............................................................... 6
2. Organigramme................................................................................................................. 7
................................................................................................. 9
I. Présentation de la cellule informatique .............................................................................. 9
1. Présentation et organisation ........................................................................................... 9
2. Objectifs........................................................................................................................... 9
II. Activités du stage .............................................................................................................. 10
1. Chronogramme des activités ......................................................................................... 10
2. Justification du thème ................................................................................................... 10
CHAPITRE 2 : ETUDE DE L’EXISTANT .................................................................................................. 12
............................................................................... 12
I. Délimitation du système d’information ............................................................................ 12
II. Description des processus du système.............................................................................. 13
............................................................ 14
I. Critique de l’existant ......................................................................................................... 14
Rédigé et soutenu par ANAFACK Diderot Jordan III

II. Ebauche de solution .......................................................................................................... 15

1. Objectifs......................................................................................................................... 15
2. Expression des besoins .................................................................................................. 15
Deuxième PARTIE : ........................................................................................................................... 18
MODELISATION ET IMLPLEMENTATION DU NOUVEAU SYSTEME ............................................... 18
CHAPITRE 3 : Modélisation du système futur ................................................................................... 19
.................................................. 19
I. Présentation de UML et des AGL utilisés .......................................................................... 19
II. Description des nouveaux processus ................................................................................ 21
............................................................................ 22
I. Les diagrammes UML .................................................................................................... 22
II. Les diagrammes utilisés ................................................................................................. 22
CHAPITRE 4 : IMPLEMENTATION....................................................................................................... 40
..................................................................... 40
I. Environnement de développement .................................................................................. 40
1. Système d’exploitation .................................................................................................. 40
2. WampServer version 3.1.9 ............................................................................................ 41
3. Sublime Text .................................................................................................................. 42
4. MySQL Workbench ........................................................................................................ 42
II. Langages de programmation ............................................................................................. 42
1. Le langage HTML ........................................................................................................... 42
2. Le langage PHP .............................................................................................................. 42
3. Le langage JavaScript ..................................................................................................... 43
4. MySQL............................................................................................................................ 43
III. Frameworks ................................................................................................................... 43
1. LARAVEL......................................................................................................................... 43
2. BOOTSTRAP ................................................................................................................... 44
I. Base de données................................................................................................................ 44
1. Schéma de base de données ......................................................................................... 44
2. Implémentation physique de la base de données dans WAMP.................................... 46
II. IHM .................................................................................................................................... 47
1. Frontend ........................................................................................................................ 47
2. Backend ......................................................................................................................... 48
III. Sécurité .......................................................................................................................... 51
Rédigé et soutenu par ANAFACK Diderot Jordan IV

1. Aspects de sécurité de base .......................................................................................... 51

2. Quelques Failles Web .................................................................................................... 52
3. Les Bonnes pratiques de programmation ..................................................................... 53
CONCLUSION GENERALE ............................................................................................................... 56
ANNEXE ................................................................................................................................................. I
REFERENCES BIBLIOGRAPHIQUES ................................................................................................ II
TABLE DES MATIERES....................................................................................................................... II
Rédigé et soutenu par ANAFACK Diderot Jordan V

Langue

Conception D'un Site Web Dynamiques Securisé Pour La FGI - V6

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Conception D'un Site Web Dynamiques Securisé Pour La FGI - V6

Transféré par

Droits d'auteur :

CONCEPTION D’UN SITE WEB DYNAMIQUE SECURISE POUR LA FACULTE

DE GENIE INDUSTRIEL DE DOUALA

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

Avant tout développement sur cette expérience professionnelle, il apparaît opportun de

 A M. Louis Marie DJAMBOU, président et fondateur de l’Institut Universitaire du

 A Mes parents pour leur soutien.

 A tous mes camarades de promotion pour leur convivialité

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

En créant ce diplôme le ministère ouvre un grand marché pour la branche de l’éducation.

 Le cycle MASTER 2 (bac + 5)

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

 Gestion Logistique et Transport(GLT)

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

PREMIERE PARTIE : PRESENTATION DE L’ENTREPRISE ET ETUDE DE L’EXISTANT ............... 2

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

LISTE DES ABREVIATIONS

FGI : Faculté de Génie Industriel

LISTE DES FIGURES

LMD: License Master Doctorat

ISO: International Standard Organization

UML : Unified Modeling Language

AGL : Atelier de Génie Logiciel

CSS: Cascading Style Sheets

HTML: Hypertext Markup Language

HTTPS: Hyper Text Transfer Protocol Secure

LISTE DES FIGURES

XSS: Cross Site Scripting

CSRF: Cross Site Request Forgery

SSL: Secure Socket Layer

OWASP: Open Web Application Security Project

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

LISTE DES FIGURES

Figure 1: localisation de la FGI ................................................................................................... 4

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

LISTE DES TABLEAUX

Tableau 1 : Fiche d’identification de la FGI .............................................................................. 4

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

CHAPITRE 1 : PRÉSENTATION GENERALE ET

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

Fiche d’identification de la FGI

Raison sociale Faculté de Génie Industriel

1.1 Situation géographique

Figure 1: localisation de la FGI

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

La FGI délivre les diplômes d’Ingénieur (BAC+5) et de Doctorat/PhD (BAC+8) en Sciences

 Technologie de Construction Industrielle (TCI) ;

1.3 Capacités infrastructurelles

 Un amphithéâtre de 1200 places ;

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

II. Organisation et fonctionnement

POSTES DES RESPONSABLES ADMINISTRATIFS :

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

 VICE-DOYEN Chargé de la Recherche et de la Coopération

LES DEPARTEMENTS DE LA FGI :

 Technologie de Construction Industrielle (TCI)

REDIGE ET SOUTENU PAR ANAFACK DIDEROT JORDAN

Figure 2: Organigramme de la FGI

Rédigé et soutenu par ANAFACK Diderot Jordan

I. Présentation de la cellule informatique

 Une unité de traitement des inscriptions et pré-inscriptions

 La vigie informatique de la faculté

Rédigé et soutenu par ANAFACK Diderot Jordan 9