SlideShare une entreprise Scribd logo
Année Universitaire : 2019-2020
Projet de Fin d’Études
En vue de l’obtention du
DIPLOME DE LICENCE PROFESSIONNELLE
Systèmes d’Information et Génie Logiciel
MISE EN PLACE D’UNE
Progressive Web App
Pour la Gestion des Rapports d’Audit
Réalisé par : Encadré par :
ZERRYI ANDALOUSSI Oussama Mr. SEGHIOUER Hamid
Pr. YAHYAOUY Ali
Membres de jury :
▪ Mr. SEGHIOUER Hamid Encadrant Société
▪ Pr. YAHYAOUY Ali Encadrant FSDM
▪ Pr. SABRI My Abdelouahed Enseignant FSDM
▪ Pr. RIFFI Jamal Enseignant FSDM
▪ Pr. MAHRAZ Med Adnane Enseignant FSDM
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
2| Oussama ZERRYI ANDALOUSSI2019/2020
DÉDICACE
Toutes les lettres ne sauraient trouver les mots qu’il faut… Tous les
mots ne sauraient exprimer la gratitude, l’amour, le respect, la
reconnaissance…etc. Aussi, c’est tout simplement qu’on dédie ce
travail…
À mes chers parents
Aucune dédicace ne saurait exprimer mon respect, mon amour
éternel et ma considération pour les sacrifices que vous avez consenti
pour mon instruction et mon bien-être. Je vous remercie pour tout le
soutien et l’amour que vous me portez depuis mon enfance et j’espère
que votre bénédiction m’accompagne toujours. Puisse Dieu, le Très
Haut, vous accorder santé, bonheur et longue vie et faire en sorte que
jamais on ne vous déçoive.
À toutes les personnes qui ont participé à l’élaboration de ce
travail et à tous ceux que j’ai omis de citer.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
3| Oussama ZERRYI ANDALOUSSI2019/2020
REMERCÎMENT
En guise de reconnaissance, Je tiens à témoigner mes sincères
remerciements à toutes les personnes qui ont contribués de près ou de loin au bon
déroulement de mon projet fin d’étude malgré la difficile période de COVID 19, et
à l’élaboration de ce modeste travail.
Mes sincères gratitudes à notre professeur Mr SABRI pour la qualité de son
enseignement, ses conseils et son intérêt incontestable qu’il porte à tous les
étudiants.
Je tiens aussi à remercier tout le corps professoral de la Faculté des Sciences
Dhar El Mehraz (spécialement la licence professionnelle de Systèmes
d'Information et Génie Logiciel) pour le travail énorme qu’il effectue pour nous
créer les conditions les plus favorables pour le déroulement de nos études.
Dans l’impossibilité de citer tous les noms, mes sincères remerciements vont
à tous ceux et celles, qui de près ou de loin, ont permis par leurs conseils et leurs
compétences la réalisation de ce projet de fin d’études.
Enfin, je ne saurai oublier de remercier l’ensemble des personnes qui m’ont
aidé et précisément : le professeur Abdelouahed SABRI le coordinateur notre
filière et Mr YAHYAOUY Ali mon encadrant pédagogique de stage ainsi que mon
encadrant de stage Mr Hamid SEGHIOUER, pour leur patience, leurs conseils
pleins de sens et pour le suivi et l’intérêt qu’ils ont portaient à mes travaux.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
4| Oussama ZERRYI ANDALOUSSI2019/2020
RÉSUMÉ
L’objectif principal de ce projet est l’élaboration d’une application web
progressive fonctionnel sur la plateforme mobile qui permet
essentiellement à gérer les rapports d’audit et de contrôle, d’assurer la
sureté et la sécurité des données, de gérer les auditeurs et les clients, de
suivre les géolocalisations des rapports crées, la génération dynamique des
rapports en PDF et les statistiques de tous les processus précédents.
ABSTRACT
The main objective of this project is to develop a progressive web
application functional on the mobile platform which is mainly used to
manage audit and control reports, ensure data security and safety,
managing auditors, managing clients, tracking geolocations of reports
created, generate dynamic PDF reports and statistics of all previous
processes.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
5| Oussama ZERRYI ANDALOUSSI2019/2020
TBLE DE MATIÈRES
DÉDICACE..................................................................................................................................... 2
REMERCÎMENT ............................................................................................................................ 3
RÉSUMÉ ......................................................................................................................................... 4
Abstract ........................................................................................................................................... 4
Tble de matières ............................................................................................................................. 5
INTRODUCTION.......................................................................................................................... 8
CH – 1 : Contexte générale du projet .................................................................................................. 9
1) Présentation globale de l’entreprise........................................................................................ 9
a) Lieu de la société BSA CONSEIL............................................................................................ 9
b) Présentation de la société................................................................................................... 9
c) Les missions de l’entreprise............................................................................................... 10
d) Les valeurs de l’entreprise................................................................................................. 11
e) Les partenaires de BSA CONSEIL ........................................................................................ 11
f) Description des services de l’organisation.......................................................................... 13
2) L’étude de l’existant ............................................................................................................. 16
3) Plan suivi pour arriver à la solution ....................................................................................... 18
1) Les éléments intervenants ................................................................................................ 18
a) Diagramme de Gantt......................................................................................................... 18
CH – 2 : Analyse et Conception......................................................................................................... 19
1) Les exigences fonctionnelles ................................................................................................. 19
2) Les exigences techniques...................................................................................................... 19
3) La conception adoptée.......................................................................................................... 20
a) Diagram de cas ................................................................................................................. 20
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision
globale du comportement fonctionnel d'un système logiciel ..................................................... 20
b) Diagramme de classe ....................................................................................................... 21
c) Modèle Logique de Données ............................................................................................. 22
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
6| Oussama ZERRYI ANDALOUSSI2019/2020
2) Structure de développement ................................................................................................ 24
d) Les outils et logiciels du développement............................................................................ 24
b) Les package utiliser........................................................................................................... 30
CH – 3 : Interfaces de l’application réalisée....................................................................................... 31
1) Logo d’application mobile et web ......................................................................................... 31
a) Logo site web et desktop................................................................................................... 31
b) Logo mobile...................................................................................................................... 31
2) Les interfaces d’identification et d’authentification............................................................... 31
a) Se connecter..................................................................................................................... 31
b) Récupération de mot de passe .......................................................................................... 32
c) L’email de récupération du compte ................................................................................... 33
3) L’espace de gestion de l’application. ..................................................................................... 34
a) Page accueil...................................................................................................................... 34
b) Page à-propos de l’application .......................................................................................... 34
c) Page de gestion de profile................................................................................................. 35
4) Les interfaces de gestion des utilisateurs et ses privilèges...................................................... 36
a) Page de gestion des administrateurs ................................................................................. 36
b) Page de gestion des auditeurs ........................................................................................... 37
c) Page de gestion des auditeurs ........................................................................................... 38
5) Les interfaces de gestion des rapports................................................................................... 39
a) Page de gestion des rapports............................................................................................. 39
b) Page d’ajout, modification et consultation du rapport ....................................................... 40
c) Les pièces jointes du rapport............................................................................................. 40
d) Page des remarques du rapport......................................................................................... 42
e) Page de trace des rapports................................................................................................ 43
f) Page de gestion des attachements des rapports................................................................. 43
g) Le rapport sous la forme PDF générer................................................................................ 44
h) L’email envoyer au client contenons le rapport.................................................................. 45
6) La progressive web app sur mobile et desktop....................................................................... 45
a) Desktop apparence........................................................................................................... 45
b) Mobile apparence............................................................................................................. 46
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
7| Oussama ZERRYI ANDALOUSSI2019/2020
CH – 3 : Rapport de sécurité de l’application d’audit......................................................................... 48
1) Présentation de problématique ............................................................................................ 48
2) Les solutions implémenter.................................................................................................... 48
Conclusion et Perspective............................................................................................................ 50
Table de figures............................................................................................................................ 52
List des tables ............................................................................................................................... 54
Table d’acronymes ....................................................................................................................... 55
WEBOGRAPHIE / bibliographie ........................................................................................................ 56
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
8| Oussama ZERRYI ANDALOUSSI2019/2020
INTRODUCTION
Dans le cadre de ma formation de la licence professionnelle de
Systèmes d'Information et Génie Logiciel, j’ai eu l’opportunité d'effectuer un
stage de fin d’études.
Ce dernier est pour l’objectif de faire synthèse de mes connaissances
théoriques, d'affiner ma Perception de l'entreprise, d’en retirer une
expérience ainsi qu'une analyse globale et approfondie de l'entreprise et de
son environnement, tout en me préparant dans les meilleures conditions à
la vie professionnelle.
Pour ce stage j'ai décidé d'orienter mon choix vers une entreprise
conseil, formation et audit, BSA CONSEIL – Rabat qui a besoin de développer
des applications web pour ses clients, malgré les conditions de confinement
causé par COVID 19, j’ai pu effectuer mon stage à distance en coordonnant
avec des visioconférences et des réunions en ligne. D’où j’ai eu l’occasion de
créer une application web progressive pour un client de l’entreprise.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
9| Oussama ZERRYI ANDALOUSSI2019/2020
CH – 1 : Contexte générale du projet
1) Présentation globale de l’entreprise
Dans le cadre de mon stage de fin d’études au sein de la société BSA
CONSEIL, que je l’ai effectué à distance. J’été chargé de développer une solution
informatique pour leur client Performance Qualité.
a) Lieu de la société BSA CONSEIL
b)Présentation de la société
BSA CONSEIL est une entreprise de conseil, formation et audit qui propose
de différentes prestations de conseil, elle a pour objectif d'accompagner ses
partenaires pour l'optimisation de leurs ressources, et la planification de leurs
projets jusqu'à l’aboutissement, elle propose son expertise qui couvre plusieurs
domaines à savoir :
• Systèmes de management de la qualité SMQ 9001
• Systèmes de management de l'environnement SME 14001
• Systèmes de management de la santé sécurité au travail SMSST 45001
• Systèmes de management de la sécurité de l'information SMSI 27001
Figure 1: lieu géographique de la société BSA CONSEIL
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
10| Oussama ZERRYI ANDALOUSSI2019/2020
• Systèmes de management de la continuité d'activité SMCA 22301
c) Les missions de l’entreprise
Fondé en 2015, BSA CONSEIL prend en charge l'accompagnement de ces
clients pour la rationalisation et l'optimisation de leurs ressources. En utilisant
des outils et des techniques modernes et innovantes. Fort par son équipe
d'experts, BSA CONSEIL assiste depuis la planification de projet jusqu'à son
aboutissement.
Dénomination : BSA CONSEIL
Forme juridique : Société à responsabilité limitée
Date d'immatriculation : 09–02-2015
Tribunal : RABAT
Activité : Conseil, Formation ET Audit
N° RC : 108277
N° de ICE : 001869871000043
Capital : 100 000 MAD
Téléphone : +212 537 671 885
Figure 2: Logo de la société BSA CONSEIL
Tableau 1: Les information de société
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
11| Oussama ZERRYI ANDALOUSSI2019/2020
d)Les valeurs de l’entreprise
Confiance, Proximité, Rigueur et Créativité reflètent l’entreprise
responsable que BSA CONSEIL aspire à devenir sur le plan professionnel. Ces
valeurs sont au cœur de chacune de ces décisions. Ainsi chez BSA CONSEIL tout
le monde se considère responsable de tout ce que l’entité entreprenne. BSA
CONSEIL a pour principe de s’impliquer totalement dans les projets qui lui sont
confiés et souvent au niveau même de leur définition. La relation entre
l’entreprise et ses clients dépasse le cadre purement commercial, elle se caractérise
plutôt comme un partenariat. Il est hors de question pour BSA CONSEIL de livrer
un service spécifique mal définie ou non viable. Les pratiques commerciales
obscures ne font pas partie de la culture de BSA CONSEIL. Cela passe
inévitablement par une forte implication et une très bonne connaissance
préalable du domaine d’activité de ses clients.
e) Les partenaires de BSA CONSEIL
Partenaires Logo Mission Description
AMENDIS
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI AMENDIS et
formation LI 27001
APM TERMINALS
FORMATION
THERMOGRAPHIE
ET ULTRASON
Formation
technique en
thermographie et
formation technique
en ultrasons
CALEX AUDIT À BLANC
9001
Préaudit 9001 pour
la préparation à la
certification (en
partenariat avec
Performance
Qualité)
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
12| Oussama ZERRYI ANDALOUSSI2019/2020
CMS AUDIT À BLANC
9001
Préaudit 9001 pour
la préparation à la
certification (en
partenariat avec
Performance
Qualité)
DENSO FORMATION
THERMOGRAPHIE
Formation
technique en
thermographie
HORIZON AUDIT DE
CERTIFICATION
Audit de
certification 27001
:2013 (CertiTrust)
MAROC
TELECOM
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI LONACI et
formation
Certifiante LI 27001
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement)
MATIS FORMATION
Formation en
gestion de projets,
gestion du temps et
des priorités
MUGEF-CI
SMSI & FOR Mise en
place du SMSI et
SMCA MUGEF-CI et
formation
Certifiante LI 27001
et LI 22301
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement
MATION 27001
:2013
OC¨P INGENIERIE DE
FORMATION
Refonte de
l'ingenierie de
formation (en
partenariat GIZ et
ValueStream)
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
13| Oussama ZERRYI ANDALOUSSI2019/2020
f) Description des services de l’organisation
Système de Management de la Qualité SMQ ISO 9001
BSA CONSEIL accompagne ses clients à mettre en place leur
système de management de la qualité « SMQ » conformément à la
norme ISO 9001 afin de garantir une satisfaction totale de la
clientèle, et d'assurer la disposition à répondre aux exigences des
parties prenantes. L’entité assiste sa clientèle tout au long du
SAFRAN FORMATION
Formation en
gestion de projets,
gestion du temps et
des priorités
FORMATION
TBS FORMATION
Formation au profit
des filières semaine
et weekend
TIZIMAR REENGINEERING
ET FORMATION
Reengineering des
entrepôts de
stockage avec
recalcul des surfaces
techniques et
dimensionnement
du parc de
manutention et
formation en
management
LONACI
SMSI &
FORMATION 27001
:2013
Mise en place du
SMSI LONACI et
formation
Certifiante LI 27001
CertiTrust (en
partenariat avec
Performance
Qualité et
EasyManagement)
Tableau 2: Les partenaire de la société BSA CONSEIL
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
14| Oussama ZERRYI ANDALOUSSI2019/2020
déploiement de votre Système de Management jusqu'à l'obtention de la
certification ISO 9001.
Systèmes de Management de l'Environnement SME ISO 14001
BSA CONSEIL met en place un système de management de
l'environnement SME conforme à la norme ISO 14001, afin de
faciliter pour le Top Management la prise de décision importante
et à anticiper les problèmes liés aux impacts environnementaux
des activités de l'organisme. Le SME est la confirmation de
l'engagement de l'entreprise à respecter l'environnement et à se
conformer aux exigences de ses parties prenantes et de ses
collaborateurs.
Systèmes de Management de la Santé Sécurité au Travail SMSST ISO 45001
BSA CONSEIL vise l’accompagnement dans le déploiement du Système
de management de la santé et de la sécurité au travail (SMSST)
conformément à la norme ISO 45001. Cela permet de veiller à la
protection des collaborateurs internes et externes, de se
conformer aux exigences réglementaires et contractuelles, ainsi
qu’approuvé l'engagement de l'organisme pour une
amélioration continue.
Système de Management de la Sécurité de l'Information SMSI ISO/IEC 27001
BSA CONSEIL accompagne à mener votre projet de ses clients de la mise
en place ou de la certification d'un système de management de la
sécurité de l'information « SMSI » conformément à la norme ISO
27001 afin de garantir une maîtrise approfondie des risques et des
dispositifs normatifs, contractuels et légaux applicables. Un suivi
qui vous permet de vous assister tout au long du déploiement de
votre Système de Management de la Sécurité de l'Information qui
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
15| Oussama ZERRYI ANDALOUSSI2019/2020
assure la mise en œuvre et le suivi de la sécurité de l'information dans votre
entreprise.
Systèmes de Management de la continuité d'activité SMCA ISO 22301
BSA CONSEIL assiste ses clients pour assurer la sauvegarde du
patrimoine de l'entreprise qui devient une nécessité stratégique pour tout
organisme. Avec l'avènement des systèmes d'information comme
acteurs majeurs dans l'activité, aucune entreprise n'est à l'abri
d'un arrêt d'activité de ses services vitaux. Le système de
management de la continuité d'activité (SMCA) est étroitement
lié à la sécurité du personnel et la protection du patrimoine, une
analyse profonde des risques liés à ses actifs est la solution pour
mener à bien cette démarche.
Management des risques liés à la Sécurité de l'Information SMSI ISO/IEC
27005
La norme ISO 27005 a pour objectif de procurer aux organisations un
guide pour la mise en place de la sécurité de l'information basée sur une
approche judicieuse de gestion du risque. Elle représente un appui aux
concepts généraux du SMSI 27001, ce qui complète les exigences concernant la
gestion des risques (clause 4.2). BSA CONSEIL accompagne ses collaborateurs
dans la mise en place de cette démarche de
gestion des risques liés à la sécurité de
l'information, avec une vision durable
permettant de faire face aux risques en
continu.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
16| Oussama ZERRYI ANDALOUSSI2019/2020
2) L’étude de l’existant
Dans cette partie, nous allons essayer de projeter la lumière sur les grandes
étapes de la réalisation de notre application web, commençant par l’étude de besoin
jusqu'à la réalisation des différentes fonctionnalités de l’application web d’audit.
J’ai été chargé de réaliser un projet, sous forme d’une application web
progressive pour la société performance qualité ; la société opère 2002 dans le
conseil, la formation et l'audit QHSE et RSE.
Dans le contexte de l’entreprise, l’auditeur vérifie les machines et leur qualité
ensuite il remplit un rapport papier (voir annexe 1) généralement à la maison avec
un risque d'oubli. La société Performance Qualité veut le forcer à remplir le rapport
au terrain du travail (vérification de la géolocalisation) par une tablette pour
l'objectif d'envoyer le rapport établi au client du cabinet d’audit après la validation
par un administrateur ou un auditeur en chef.
La société avait une application développée avec un Framework Laravel
(lumen) à propos de textile et elle a essayé de l’adopter à ce contexte d’audit et de
contrôle, le code source du projet contient des traces d’adaptation à ce sujet ainsi
quelque table dans la base de donner.
En fin la société a décidé d’orienter le choix vers une application native PHP
progressive pour que ça soit fonctionnel au différents plateforme desktop mobile
et web en se basant sur la même Template et en intégrant les différents
fonctionnalités nessecaire.
PWA : est une application web qui consiste en des pages ou des sites web, et qui
peuvent apparaître à l'utilisateur de la
même manière que les applications
natives ou les applications mobiles. Ce
type d'applications tente de combiner les
fonctionnalités offertes par la plupart des
Figure 3: PWA logo
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
17| Oussama ZERRYI ANDALOUSSI2019/2020
navigateurs modernes avec les avantages de l'expérience offerte par les appareils
mobiles.
La base de données crée utilise un ancien moteur de stockage MyISAM de
MySQL qui s'appuie sur d'énormes tables qui ne modifient pas fréquemment les
données.
Ce dernier ne permet
pas de respecter les formes
normales du relationnel et
les contraintes d’intégrités
référentielles ainsi que les
relations One to One, One to
Many.
Figure 4: MLD donner par l'entreprise BSA CONSEIL
Figure 5: Comparaissent entre InnoDB et MyISAM
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
18| Oussama ZERRYI ANDALOUSSI2019/2020
3) Plan suivi pour arriver à la solution
1) Les éléments intervenants
• Maître d'œuvre : Bureau d'études Performance Qualité
• Maître d'ouvrage : BSA Conseil
• Développeur de la solution : ZERRYI ANDALOUSSI Oussama
• Livrable : Progressive web App de Gestion des Rapports d’audit et contrôle
cross plateforme.
a) Diagramme de Gantt
Est un outil utilisé (souvent en complément d'un réseau PERT) en
ordonnancement et en gestion de projet et permettant de visualiser dans le temps
les diverses tâches composant un projet. Il s'agit d'une représentation d'un graphe
connexe, value et orienté, qui permet de représenter graphiquement l'avancement
du projet.
Figure 6: Diagramme de Gantt
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
19| Oussama ZERRYI ANDALOUSSI2019/2020
CH – 2 : Analyse et Conception
1) Les exigences fonctionnelles
L’application doit assurer l’accéder aux quatre acteurs suivants : admin –
auditeur – auditeur chef – client. Chaque un de ces acteurs de system doit
s’authentification pour accéder à son espace.
L’administrateur de system doit avoir la possibilité de gérer les utilisateurs
de system et les rapports élaborer par les auditeurs et qui va s’envoyer aux clients
après la validation. L’admin aussi doit consulter le lieu d’élaboration du rapport
et la date de création ou modification. Les questions des pièce jointe des rapports
peux se gérer par ce dernier ainsi sa visibiliser.
. L’auditeur doit avoir la main de gérer ses rapports et consulter les
remarques écrites par le validateur du rapport.
L’auditeur chef doit gérer les rapports par sa spécialiser et doit avoir la
possibilité de valider les rapports et mette des remarques.
Le client doit avoir la main pour consoler ses rapports et leurs statuts et
recevoir des notifications et un email pour ses rapports valider ainsi de
télécharger le rapport dans son espace.
Le système doit envoyer des notifications aux auditeurs à propos les rapports
non valides depuis deux jours et aux validateurs après sept jours de sa création.
2) Les exigences techniques
• Récupération du mot de passe
• Récupération de la géolocalisation d’auditeur
• Générer PDF dynamiquement partir des données
• Envoyer le rapport établi par courriel
• Up/download des fichier (image - pdf)
• L’application doit être installable sur Android plateforme (PWA mobile)
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
20| Oussama ZERRYI ANDALOUSSI2019/2020
3) La conception adoptée
a) Diagram de cas
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés
pour donner une vision globale du comportement fonctionnel d'un système
logiciel
Figure 7: use case d'administrateur
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
21| Oussama ZERRYI ANDALOUSSI2019/2020
b) Diagramme de classe Figure 9: use case d'auditeur, auditeur en chef et client
Figure 8: Diagramme de classe
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
22| Oussama ZERRYI ANDALOUSSI2019/2020
c) Modèle Logique de Données
MLD : est la modélisation logique des données qui tient compte du niveau
organisationnel des données. Il s'agit d'une vue logique en termes d'organisation
de données nécessaires à un traitement.
On a adopté les documents JSON avec le relationnel de MySQL qui nous
permet d’enregistrer cette forme dans la base de données et d’interroger le SGBD
avec le SQL pour faire le mapping des données. Cette fonctionnalité vient avec le
nouveau MySQL 5.7.0.
Document JSON : Un Document JSON comprend deux types d'éléments structurels :
• Des ensembles de paires « nom » (alias « clé ») / « valeur »
• Des listes ordonnées de valeurs Ces mêmes éléments représentent trois types de
données :
Figure 10: MLD réaliser
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
23| Oussama ZERRYI ANDALOUSSI2019/2020
• Des objets
• Des tableaux
• des valeurs génériques de type tableau, objet, booléen, nombre, chaîne de
caractères ou null.
Le mapping des données se fait par des fonctions intégrées dans le SGBD MySQL
présenté dans le tableau suivant.
Figure 12: Type de données JSON en MySQL SGBD
Figure 13: La représentation de document JSON Figure 11: La représentation des pièces jointe du rapport
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
24| Oussama ZERRYI ANDALOUSSI2019/2020
JSON Fonction Reference
2) Structure de développement
d)Les outils et logiciels du développement
HTML : L’HyperText Markup Langage, généralement abrégé HTML, est le
langage de balisage conçu pour représenter les pages web. C’est un langage
permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également
de structurer sémantiquement et logiquement 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.
CSS : Cascading Style Sheets, est un langage de feuille de style utilisé pour
décrire la présentation d'un document écrit en HTML ou en XML .CSS
décrit la façon dont les éléments doivent être affichés à l'écran, sur du
papier, en vocalisation, ou sur d'autres supports.
Figure 14: Fonction de manipulation des documents JSON dans MySQL
Figure 15: Logo HTML
Figure 16: Logo css
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
25| Oussama ZERRYI ANDALOUSSI2019/2020
JavaScript : est un langage de programmation de scripts
principalement employé dans les pages web interactives mais aussi
pour les serveurs2 avec l'utilisation (par exemple) de Node.js.
JQuery : est une bibliothèque JavaScript libre et
multiplateforme créée pour faciliter l'écriture de scripts côté
client dans le code HTML des pages web.
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.
Adobe 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.
PhpStorm : est un éditeur pour PHP3, HTML, CSS et JavaScript4, édité
par JetBrains ; Il permet d'éditer du code PHP pour les versions allant de
la 5.3 à la 7.4 (v-2020.4.0 ultimate).
PHP : HyperText Preprocessor, est un langage de programmation
libre, principalement utilisé pour produire des pages Web
dynamiques via un serveur http (v-7.4.0).
MySQL : est un système de gestion de bases de données relationnelles
(SGBDR) v-5.7.0.
Figure 17: Logo JavaScript
Figure 18: Logo JQuery
Figure 19: Logo get Bootstrap
Figure 20: Logo
Photoshop
Figure 21: Logo PHP Storm IDE
Figure 22: Logo PHP
Figure 23: Logo MySQL
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
26| Oussama ZERRYI ANDALOUSSI2019/2020
Api : (Application Programming Interface) est un ensemble normalisé de
classes, de méthodes, de fonctions et de constantes qui sert de façade par
laquelle un logiciel offre des services à d'autres logiciels. Elle est offerte par
une bibliothèque logicielle ou un service web, le plus souvent
accompagnée d'une description qui spécifie comment des programmes
consommateurs peuvent se servir des fonctionnalités du programme
fournisseur.
JSON : (JavaScript Object Notation) est un format de données textuelles
dérivé de la notation des objets du langage JavaScript. Il permet de
représenter de l’information structurée comme le permet XML.
On développer un web service PHP sous forme d’une api charger de
gérer la couche métier de l’application et l’interaction avec base de
données. La communication avec l’api est assurée avec la forme
JSON.
Fetch API : fournit une interface pour récupérer des
ressources (y compris sur le réseau). Cela semblera familier
à tous ceux qui ont utilisé XMLHttpRequest, mais la nouvelle API fournit un
ensemble de fonctionnalités plus puissant et plus flexible.
Figure 24: Shema de fonctionement d'une api
Figure 25: Logo JSON
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
27| Oussama ZERRYI ANDALOUSSI2019/2020
ES6 : est un ensemble de normes concernant les langages de programmation de
type script et standardisées par Ecma International dans le cadre de la
spécification ECMA-262. Il s'agit donc d'un standard, dont les
spécifications sont mises en œuvre dans différents langages de script,
comme JavaScript ou ActionScript. C'est un langage de programmation
orienté prototype.
Geolocation API : permet à l'utilisateur de fournir son emplacement aux
applications Web s'il le souhaite. Pour des raisons de confidentialité, il est
demandé à l'utilisateur l'autorisation de signaler les informations de localisation.
Les extensions Web qui souhaitent utiliser l'objet de géolocalisation doivent
ajouter l'autorisation "géolocalisation" à leur manifeste. Le système d'exploitation
de l'utilisateur invite l'utilisateur à autoriser l'accès à l'emplacement la première
fois qu'il est demandé.
.htaccess : (accès hypertexte) est un fichier de configuration de niveau
répertoire pris en charge par plusieurs serveurs Web, utilisé pour la
configuration des problèmes d'accès au site Web, tels que la redirection
d'URL, le raccourcissement d'URL, le contrôle d'accès (pour différentes
pages Web et différents fichiers), et plus. Le « point » (point ou point) avant
le nom de fichier en fait un fichier caché dans les environnements basés sur
Unix.
Figure 26: Logo ECMA SCRIPT
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
28| Oussama ZERRYI ANDALOUSSI2019/2020
PWA : se consulte comme un site web classique, depuis une URL sécurisée mais
permet une expérience utilisateur similaire à
celle d'une application mobile, sans les
contraintes de cette dernière (soumission aux
App-Stores, utilisation importante de la
mémoire de l'appareil…).
Elles proposent de conjuguer rapidité,
fluidité et légèreté tout en permettant de limiter
considérablement les coûts de développement4 :
plus besoin de faire des développements
spécifiques pour les applications en fonction de
chacune des plateformes : iOS, Android,
Windows…
Comparaison entre native app, responsive web site and PWA
Manifeste : un fichier contenant des métadonnées pour un groupe de
fichiers d'accompagnement qui font partie d'un ensemble ou d'une unité
cohérente. Par exemple, les fichiers d'un programme informatique peuvent
Figure 27: Information sur PWA
Tableau 3: Comparaissent entre native app, responsive et progressive web app
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
29| Oussama ZERRYI ANDALOUSSI2019/2020
avoir un manifeste décrivant le nom, le numéro de version, la licence et les
fichiers constitutifs du programme.
Service worker : est un fichier JavaScript qui fonctionne comme un type de
travailleur Web. Ils fonctionnent séparément du thread principal du
navigateur pour gérer les notifications push, synchroniser les données en
arrière-plan, mettre en cache ou récupérer les demandes de ressources,
intercepter les demandes réseau et recevoir des mises à jour centralisées.
Figure 28: Le fichier Manifest
Figure 29: Detection du service worker sur le navigateur
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
30| Oussama ZERRYI ANDALOUSSI2019/2020
Les employés de service sont utilisés pour donner aux applications
Web progressives la capacité de fournir les hautes performances et la riche
expérience des applications mobiles natives, avec le faible espace de
stockage, les mises à jour en temps réel et une meilleure visibilité sur les
moteurs de recherche des applications Web traditionnelles.
b)Les package utiliser
Composer : est un logiciel gestionnaire de dépendances libre écrit en PHP.
Il permet à ses utilisateurs de déclarer et d'installer les bibliothèques dont
le projet principal a besoin.
PHP Mailer : est une bibliothèque logicielle d'envoi de courriels en PHP. En
effet, envoyer un courriel en code natif exige un haut niveau de
connaissance des normes SMTP1, du format des courriels (tels que
l'HTML et le retour chariot), et des vulnérabilités d'injection pour
spammer.
DOMPDF : permet de générer des fichiers PDF à partir d'une page HTML.
C'est une alternative à HTML2PDF, qui lui est basé sur TCPDF.
Figure 30: Logo Composer
Figure 31: Logo du package php Mailer
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
31| Oussama ZERRYI ANDALOUSSI2019/2020
CH – 3 : Interfaces de l’application réalisée
1) Logo d’application mobile et web
a) Logo site web et desktop
b) Logo mobile
2) Les interfaces d’identification et d’authentification
a) Se connecter
Cette interface permet aux utilisateurs de
se connecter à l’espace de gestion.
Cette dernière génère des exceptions sous
forme d’alerte si les données non validé ou le
mot de passe est incorrect.
Cette interface donne aussi la possibilité
d’accès à la page de récupération de compte en
cas d’un le mot de passe oublier.
Figure 32: Logo desktop et web site de l'application réalisée
Figure 33: Logo d'application Android
Figure 34: Formulaire d'authentification
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
32| Oussama ZERRYI ANDALOUSSI2019/2020
L’exception levée en cas d’erreur de mot de passe
b) Récupération de mot de passe
La récupération du compte en cas de perte du mot de passe se fait par l’envoi
de token à travers l’email si le compte est déjà existé, pour assurer une sécurisation
pour tous les utilisateurs de l’application.
Message d’information :
Figure 35: Alerte aux cases d'erreur
Figure 37: Formulaire de récupération du mot de passe
Figure 36: alerte d'envoie avec succès
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
33| Oussama ZERRYI ANDALOUSSI2019/2020
c) L’email de récupération du compte
L’email contient un lien qui fait une redirection vers
la page de réinitialisation de mot de passe dans
l’application avec un token intégré dans la requête http.
Figure 38: L’apparence de courrier dans la boit
Figure 39: L'email de récupération du mot de passe
Figure 40: Formulaire de réinitialisation de mot de passe
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
34| Oussama ZERRYI ANDALOUSSI2019/2020
3) L’espace de gestion de l’application.
a) Page accueil
À gauche de la page, il existe un bar de navigation personnalisé par
rapport à chaque rôle d’utilisateur.
En haut de page un bar contient un bouton de notification et un nom
d’utilisateur connecté, avec une liste des options pour consulter le profile
ou se déconnecter de votre espace.
Au centre du page, il existe des statistiques personnalisées de site pour
donner une vision sur état des actions fêtent dans l’espace.
b)Page à-propos de l’application
Figure 41: Accueil page
Figure 42: À-propos page
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
35| Oussama ZERRYI ANDALOUSSI2019/2020
c) Page de gestion de profile
Elle Permet de gérer les données du compte et de changer le mot de passe
Figure 43: Profile page
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
36| Oussama ZERRYI ANDALOUSSI2019/2020
4) Les interfaces de gestion des utilisateurs et ses privilèges
a) Page de gestion des administrateurs
Elle permet d’ajouter, éditer, supprimer et désactiver ou activer un
compte utilisateur.
Formulaire d’ajout d’un administrateur
Message de confirmation pour désactiver ou activer un utilisateur avec le
message de validation et de suppression
Figure 44: section de gestion des administrateurs
Figure 45: Formulaire d'ajout des admins
Figure 46: Alerte de confirmation
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
37| Oussama ZERRYI ANDALOUSSI2019/2020
b)Page de gestion des auditeurs
En tant qu’administrateur vous pouvez gérer tous les comptes auditeurs
dans votre espace.
Formulaire d’ajout ou modification des auditeurs selon leurs spécialités.
Figure 47: Section de gestion des auditeurs
Figure 48: Formulaire d'ajout d'un auditeur
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
38| Oussama ZERRYI ANDALOUSSI2019/2020
c) Page de gestion des auditeurs
En tant qu’administrateur vous pouvez gérer tous les comptes clients créent
dans l’espace.
Le Formulaire d’ajout et de modification des clients est élaboré selon des
différents statuts à savoir : confiance, attention et black listes.
Figure 49: Section de gestion des clients
Figure 50: Formulaire de manipulation de client
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
39| Oussama ZERRYI ANDALOUSSI2019/2020
5) Les interfaces de gestion des rapports
a) Page de gestion des rapports
En tant qu’admin, auditeur, auditeur chef ou client vous pouvez accéder à
vos rapports par des privilèges qui limite l’accès où la faisabilité d’une opération.
En générale vous pouvez convertir cette liste en PDF, l’imprimer ou la copier
sous forme de texte en cliquant sur les boutons convenables.
Voilà la liste des opérations faisable par l’administrateur.
Figure 51: Section de gestion des rapports
Figure 52: Menu des options du rapport
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
40| Oussama ZERRYI ANDALOUSSI2019/2020
b)Page d’ajout, modification et consultation du rapport
Cette page contient les données liées au rapport ainsi ses pièces à jointe.
c) Les pièces jointes du rapport
Les pièces attachées au rapport contiennent des questions d’audit et de
contrôle générés automatiquement d’apprêt un model sous forme d’un document
JSON.
Figure 53: Section de manipulation du rapport
Figure 54: Identification & CMU : Caractéristiques pièce jointe
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
41| Oussama ZERRYI ANDALOUSSI2019/2020
Voilà les différentes pièces.
Figure 56:Inspection du Palan pièce jointe Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe
Figure 58: Aspect Documentaire pièce jointe
Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE
(Indiquer Conforme ou Non conforme) pièce jointe
Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
42| Oussama ZERRYI ANDALOUSSI2019/2020
d)Page des remarques du rapport
En tant qu’admin ou auditeur en chef vous pouvez laisser des remarques à
l’auditeur du rapport a fin de lès pris en compte.
Le formulaire d’ajout des remarques qui contient le titre est une description
avec des option de mise en forme le texte.
Figure 61: Espace des remarques
Figure 60: Formulaire d'ajout d'une remarque
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
43| Oussama ZERRYI ANDALOUSSI2019/2020
e) Page de trace des rapports
Elle Permet de donner à l’admin des informations sur la date, le lieu,
l’utilisateur créer ou modifier le rapport.
f) Page de gestion des attachements des rapports
Cette page gère toutes les questions liées à chaque attachement du rapport
avec l’option de modification de la visibilité dans le rapport générer.
Figure 62: L'espace de trace des rapports
Figure 63: L'espace de gestion des questions des pièces jointes
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
44| Oussama ZERRYI ANDALOUSSI2019/2020
Formulaire d’ajout des questions.
g) Le rapport sous la forme PDF générer
Voir l’annexe 2.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
45| Oussama ZERRYI ANDALOUSSI2019/2020
h) L’email envoyer au client contenons le rapport
Le courrier envoyer jointe un fichier PDF
6) La progressive web app sur mobile et desktop
a) Desktop apparence
La boite de dialogue pour installer sur le desktop
Figure 64: L'email envier au client
Figure 65: Boite de dialogue d'installation
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
46| Oussama ZERRYI ANDALOUSSI2019/2020
b)Mobile apparence
Le processus d'installation de PWA sur Android.
Figure 66: PWA sur le Desktop
Figure 69: Boite de dialogue sur
Android de suggestion
Figure 68: Boite de dialogue sur
Android d'installation
Figure 67: Alerte d'information de
processus
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
47| Oussama ZERRYI ANDALOUSSI2019/2020
Figure 71: Fenêtre d'installation Figure 72: Fenêtre d'ouverture Figure 70: Splash screen d'application
Figure 73: L'apparence de PWA dans l’Android
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
48| Oussama ZERRYI ANDALOUSSI2019/2020
CH – 3 : Rapport de sécurité de l’application d’audit
1) Présentation de problématique
La sécurité des applications Web est devenue un enjeu stratégique aussi
important que les fonctionnalités ou l’ergonomie de toutes applications
élaborées, d’ailleurs les utilisateurs y attachent de plus en plus d’importance.
D’où la nécessité de la conception d’une partie sécurité de notre projet à vue le
jour.
2) Les solutions implémenter
• Développement d’un système d’authentification par le hachage des mots de
passe en gérant les exceptions lever.
• Système de réinitialisation des mots de passe par token envoyer par email à
l’utilisateur au cas d’oubli.
• Centralisation de la couche logique et DAO dans l’api à travers un seul
contrôleur qui gère les actions demandées.
• Limitation des actions fournies par API développé au cas d’un utilisateur non
authentifier.
• Implémentation d’un system de filtrage des champs personnalisés qui permet
d’assurer les données entrées par les utilisateurs.
• Assainir (sanitinzing) des données enregistrées dans la base de données pour
prévenir les vulnérabilités XSS.
• La préparation des requêtes SQL en communication avec la base de données
pour prévenir les vulnérabilités d’injection SQL.
• Le filtrage dynamique des champs (question et réponse) des rapports.
• Développement d’un système de routage sécurisé en restriction l’accès direct aux
pages.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
49| Oussama ZERRYI ANDALOUSSI2019/2020
• Redirection vers des pages des erreurs en cas d’une demande de page non
autorisé ou inexistante
• Le traçage d’emplacement des rapports rédigées.
• Implémentation de l’approche : action pas permission.
• La configuration de serveur pour retractionner l'accès au :
o Dossier et ficher des bibliothèques utiliser par l’application ‘/vondor’.
o Dossier et ficher de configuration de l’application ‘/config’.
o Dossier et ficher des pages de l’application ‘/views’ sauf le contrôleur
principal.
o Dossier et ficher de l’API développer ‘/api’ sauf le contrôleur principal.
• La redirection automatique des demandes http non sécurisées vers le protocole
https.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
50| Oussama ZERRYI ANDALOUSSI2019/2020
CONCLUSION ET
PERSPECTIVE
En guise de conclusion, la période du stage est une phase d’application
nécessaire et essentielle pour bien réaliser une liaison entre les connaissances
théoriques et la pratique professionnelle.
Ce stage est très intéressant pour moi puisqu’il m’a permis d’apprendre
le concept de travail de l’entreprise, de mettre en œuvre mes connaissances déjà
acquises au cours de mes études.
Enfin, je tiens à renouveler mes sincères reconnaissances, à toutes
personnes ayant participées de près ou de loin à la bonne réalisation de ce fruit.
Le développement de mon projet intitulé « La mise en place d’une PWA
Pour la Gestion des Rapports d’Audit et contrôle » m’a permis de répondre aux
besoins du client la société Performance Qualité.
Cette application web consiste à gérer les appels d’offres, les prestataires,
les infrastructures, les progiciels, le service et les abonnements. La mise en
place de cette application m’a permis de mettre en œuvre nos connaissances
théoriques acquises tout au long de notre formation à l’Université Université Sidi
Mohamed Ben Abdellah « USMBA ».
Ce travail m’a fourni également un grand apport au niveau de plusieurs
niveaux. Sur le plan technique, j’ai appris à crée une application web progressive,
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
51| Oussama ZERRYI ANDALOUSSI2019/2020
gérer des comptes et ses privilèges d’accès, les services d’hébergement et de
déploiement d’application et le faire tourner en production et pleins d’autres
outils.
J’ai également eu l’opportunité de maîtriser la conception en utilisant UML.
Gérer plusieurs champs dans la base de données a aussi été pour moi une occasion
unique qui m’a apporté beaucoup d’enrichissement sur le plan relationnel de
MySQL et l’orienter document JSON.
Bien que les principaux objectifs de mon projet aient été atteints, le
système que j’ai développé pourrait être enrichi par d’autres fonctionnalités
avancées et améliorations selon des nouveaux besoins demandés par le client.
Aussi, Vu le grand volume de données de la direction, une extension de ce
travail pourra avoir lieu via l’utilisation de l’informatique décisionnelle qui englobe
les solutions IT et qui leur apporte une nouvelle vision contenant des rapports et
des tableaux de bord de suivi des activités de l’entreprise à la fois analytiques
et prospectifs.
En fin si j’avais le choix de technologie, je vais orienter mon choix vers les
technologies ressente comme java (sprint) au côté serveur et Angulare au côté
client qui va m’aider à exploiter des fonctionnalités déjà développer. Mais aussi
travailler avec des technologies comme PHP et javascript en native m’a permis
de bien s’avoir comment ces Frameworks fonctionnent en termes de sécurité et
pour quoi ils implémentent des designs pattern afin d’arriver à faire des
applications robustes.
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
52| Oussama ZERRYI ANDALOUSSI2019/2020
TABLE DE FIGURES
Figure 1: lieu géographique de la société BSA CONSEIL............................................................9
Figure 2: Logo de la société BSA CONSEIL..............................................................................10
Figure 3: PWA logo ...............................................................................................................16
Figure 4: MLD donner par l'entreprise BSA CONSEIL..............................................................17
Figure 5: Comparaissent entre InnoDB et MyISAM................................................................17
Figure 6: Diagramme de Gantt..............................................................................................18
Figure 7: use case d'administrateur.......................................................................................20
Figure 8: Diagramme de classe..............................................................................................21
Figure 9: use case d'auditeur, auditeur en chef et client ........................................................21
Figure 10: MLD réaliser.........................................................................................................22
Figure 11: La représentation des pièces jointe du rapport .....................................................23
Figure 12: Type de données JSON en MySQL SGBD................................................................23
Figure 13: La représentation de document JSON ...................................................................23
Figure 14: Fonction de manipulation des documents JSON dans MySQL ................................24
Figure 15: Logo HTML ...........................................................................................................24
Figure 16: Logo css................................................................................................................24
Figure 17: Logo JavaScript.....................................................................................................25
Figure 18: Logo JQuery .........................................................................................................25
Figure 19: Logo get Bootstrap ...............................................................................................25
Figure 20: Logo Photoshop ...................................................................................................25
Figure 21: Logo PHP Storm IDE..............................................................................................25
Figure 22: Logo PHP..............................................................................................................25
Figure 23: Logo MySQL .........................................................................................................25
Figure 24: Shema de fonctionement d'une api ......................................................................26
Figure 25: Logo JSON ............................................................................................................26
Figure 26: Logo ECMA SCRIPT ...............................................................................................27
Figure 27: Information sur PWA............................................................................................28
Figure 28: Le fichier Manifest................................................................................................29
Figure 29: Detection du service worker sur le navigateur ......................................................29
Figure 30: Logo Composer.....................................................................................................30
Figure 31: Logo du package php Mailer .................................................................................30
Figure 32: Logo desktop et web site de l'application réalisée.................................................31
Figure 33: Logo d'application Android...................................................................................31
Figure 34: Formulaire d'authentification...............................................................................31
Figure 35: Alerte aux cases d'erreur ......................................................................................32
Figure 36: alerte d'envoie avec succès...................................................................................32
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
53| Oussama ZERRYI ANDALOUSSI2019/2020
Figure 37: Formulaire de récupération du mot de passe........................................................32
Figure 38: L’apparence de courrier dans la boit .....................................................................33
Figure 39: L'email de récupération du mot de passe..............................................................33
Figure 40: Formulaire de réinitialisation de mot de passe......................................................33
Figure 41: Accueil page.........................................................................................................34
Figure 42: À-propos page......................................................................................................34
Figure 43: Profile page..........................................................................................................35
Figure 44: section de gestion des administrateurs.................................................................36
Figure 45: Formulaire d'ajout des admins .............................................................................36
Figure 46: Alerte de confirmation .........................................................................................36
Figure 47: Section de gestion des auditeurs ..........................................................................37
Figure 48: Formulaire d'ajout d'un auditeur ..........................................................................37
Figure 49: Section de gestion des clients ...............................................................................38
Figure 50: Formulaire de manipulation de client ...................................................................38
Figure 51: Section de gestion des rapports............................................................................39
Figure 52: Menu des options du rapport ...............................................................................39
Figure 53: Section de manipulation du rapport .....................................................................40
Figure 54: Identification & CMU : Caractéristiques pièce jointe .............................................40
Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe...................................................41
Figure 56:Inspection du Palan pièce jointe ............................................................................41
Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe ...............................................41
Figure 58: Aspect Documentaire pièce jointe ........................................................................41
Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE (Indiquer Conforme ou Non conforme)
pièce jointe ..........................................................................................................................41
Figure 60: Formulaire d'ajout d'une remarque ......................................................................42
Figure 61: Espace des remarques ..........................................................................................42
Figure 62: L'espace de trace des rapports..............................................................................43
Figure 63: L'espace de gestion des questions des pièces jointes.............................................43
Figure 64: L'email envier au client.........................................................................................45
Figure 65: Boite de dialogue d'installation ............................................................................45
Figure 66: PWA sur le Desktop..............................................................................................46
Figure 67: Alerte d'information de processuce ......................................................................46
Figure 68: Boite de dialogue sur Android d'installation..........................................................46
Figure 69: Boite de dialogue sur Android de suggestion ........................................................46
Figure 70: Splash screen d'application...................................................................................47
Figure 71: Fenêtre d'installation ...........................................................................................47
Figure 72: Fenêtre d'ouverture .............................................................................................47
Figure 73: L'apparence de PWA dans l’Android .....................................................................47
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
54| Oussama ZERRYI ANDALOUSSI2019/2020
LIST DES TABLES
Tableau 1: Les information de société...................................................................................10
Tableau 2: Les partenaire de la société BSA CONSEIL.............................................................13
Tableau 3: Comparaissent entre native app, responsive et progressive web app ...................28
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
55| Oussama ZERRYI ANDALOUSSI2019/2020
TABLE D’ACRONYMES
Api: Application programming interface .......................................................................... 25
COVID: coronavirus disease.................................................................................................3
FSDM: Faculté des Sciences Dhar El Mehraz ...................................................................1
JSON: JavaScript Object Notation ...................................................................................21
MLD: modélisation logique des données .......................................................................21
PWA: Progressive Web Apps ...........................................................................................15
SGBD: Système de gestion de base de données .............................................................22
USMBA: Université Sidi Mohamed Ben Abdellah......................................................47
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
56| Oussama ZERRYI ANDALOUSSI2019/2020
WEBOGRAPHIE / BIBLIOGRAPHIE
https://www.bsa-conseil.com/ 23-04-2020
https://www.directinfo.ma/fiche-detail/2357043/BSA-CONSEIL 23-07-2020
https://fr.wikipedia.org 02-05-2020
https://developer.mozilla.org/ 15-05-2020
https://getbootstrap.com/ 22-05-2019
https://www.youtube.com/c/TraversyMedia/playlists 23-05-2020
https://dev.mysql.com/doc/refman/5.7/en/json-function-
reference.html
24-05-2020
https://database.guide/json_replace-replace-values-in-a-json-
document-in-mysql/
24-05-2020
https://medium.com/aubergine-solutions/working-with-mysql-
json-data-type-with-prepared-statements-using-it-in-go-and-
resolving-the-15ef14974c48
26-05-2020
https://github.com/dompdf/dompdf 28-05-2020
https://www.restapitutorial.com/ 30-05-2020
https://www.php.net/ 06-06-2020
https://www.opentechguides.com/how-
to/article/apache/115/htaccess-file-dir-security.html
15-09-2020
https://help.dreamhost.com/hc/en-us/articles/216363167-How-do-I-
deny-access-to-my-site-with-an-htaccess-file-
30-09-2020
Faculté des Sciences Dhar El Mehraz - Fès
LP - Systèmes d'Information et Génie Logiciel
57| Oussama ZERRYI ANDALOUSSI2019/2020
NB. Ce rapport est joignable d’un CD qui contient les différents
documents du projet de la PWA d’audit avec un QR code qui fait référence
à le projet, rapport de stage.docx, presentation.ppt.
Le lien : https://link.oaz-tech.tk/b
ANNEXES 1
LE RAPPORT STATIQUE ELABORER PAR
MICROSOFT WORD
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
ANNEXES 2
LE RAPPORT DYNAMIQUE ELABORER
PAR LA SOLUTION ; PWA
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit
MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

Contenu connexe

Tendances

Mémoire: l'approche par les risques - parallèle avec le risque fiscal
Mémoire: l'approche par les risques - parallèle avec le risque fiscalMémoire: l'approche par les risques - parallèle avec le risque fiscal
Mémoire: l'approche par les risques - parallèle avec le risque fiscal
Manon Cuylits
 
Page de garde
Page de gardePage de garde
Page de garde
Nizar Mohammed
 
Rapport stage
Rapport stageRapport stage
Rapport stage
abir hadjkacem
 
Rapport de projet de fin d’étude
Rapport  de projet de fin d’étudeRapport  de projet de fin d’étude
Rapport de projet de fin d’étude
OumaimaOuedherfi
 
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Rim ENNOUR
 
Le Chatbot dans le management de la relation client
Le Chatbot dans le management de la relation clientLe Chatbot dans le management de la relation client
Le Chatbot dans le management de la relation client
Martin Reboulleau
 
Dossier de sponsoring Australie
Dossier de sponsoring AustralieDossier de sponsoring Australie
Dossier de sponsoring Australie
Andrew Neel
 
La constitution de l'association
La constitution de l'associationLa constitution de l'association
La constitution de l'association
Jamaity
 
rapport fin d'etude
rapport fin d'etuderapport fin d'etude
rapport fin d'etude
sihem-med
 
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
Abissa Khadija
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
oussama Hafid
 
Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015
Anouar Kacem
 
Rapport de pfe (am)
Rapport de pfe (am)Rapport de pfe (am)
Rapport de pfe (am)
Anasse ELRHOUL
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Mehdi Hamime
 
Mémoire mastére expertise comptable (iscae)
Mémoire mastére expertise comptable (iscae)Mémoire mastére expertise comptable (iscae)
Mémoire mastére expertise comptable (iscae)
BilelJlasi
 
123917277 audit-fiscal
123917277 audit-fiscal123917277 audit-fiscal
123917277 audit-fiscal
Kawtar Elgana
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
Nader Somrani
 
Code de l'IRPP et de l'IS
Code de l'IRPP et de l'ISCode de l'IRPP et de l'IS
Code de l'IRPP et de l'IS
Melek Sellami
 

Tendances (20)

Mémoire: l'approche par les risques - parallèle avec le risque fiscal
Mémoire: l'approche par les risques - parallèle avec le risque fiscalMémoire: l'approche par les risques - parallèle avec le risque fiscal
Mémoire: l'approche par les risques - parallèle avec le risque fiscal
 
rapport_stageBiat
rapport_stageBiatrapport_stageBiat
rapport_stageBiat
 
Page de garde
Page de gardePage de garde
Page de garde
 
Sialim ri
Sialim riSialim ri
Sialim ri
 
Rapport stage
Rapport stageRapport stage
Rapport stage
 
Rapport de projet de fin d’étude
Rapport  de projet de fin d’étudeRapport  de projet de fin d’étude
Rapport de projet de fin d’étude
 
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.Concéption et réalisation d'un processus décisionnel, tableau de bord social.
Concéption et réalisation d'un processus décisionnel, tableau de bord social.
 
Le Chatbot dans le management de la relation client
Le Chatbot dans le management de la relation clientLe Chatbot dans le management de la relation client
Le Chatbot dans le management de la relation client
 
Dossier de sponsoring Australie
Dossier de sponsoring AustralieDossier de sponsoring Australie
Dossier de sponsoring Australie
 
La constitution de l'association
La constitution de l'associationLa constitution de l'association
La constitution de l'association
 
rapport fin d'etude
rapport fin d'etuderapport fin d'etude
rapport fin d'etude
 
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
GETSION DES RESSOURCES HUMAINES ET PAIE MAROCAINE SOUS OPENERP V7.0
 
Rapport PFE
Rapport PFERapport PFE
Rapport PFE
 
Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015Rapport de stage de fin d'études ISI 2015
Rapport de stage de fin d'études ISI 2015
 
Rapport de pfe (am)
Rapport de pfe (am)Rapport de pfe (am)
Rapport de pfe (am)
 
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliothequeEcole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
Ecole ESMA : Rapport de projet - Application de gestion d'une bibliotheque
 
Mémoire mastére expertise comptable (iscae)
Mémoire mastére expertise comptable (iscae)Mémoire mastére expertise comptable (iscae)
Mémoire mastére expertise comptable (iscae)
 
123917277 audit-fiscal
123917277 audit-fiscal123917277 audit-fiscal
123917277 audit-fiscal
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
 
Code de l'IRPP et de l'IS
Code de l'IRPP et de l'ISCode de l'IRPP et de l'IS
Code de l'IRPP et de l'IS
 

Similaire à MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

MEMOIRE DE STAGE
MEMOIRE DE STAGEMEMOIRE DE STAGE
MEMOIRE DE STAGE
jemmeli nejmeddine
 
Rapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdfRapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdf
saraachkaou
 
GEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technologyGEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technology
Slimane Akaliâ , سليمان أقليع
 
Rapport de stage exchange
Rapport de stage exchangeRapport de stage exchange
Rapport de stage exchange
hindif
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 
cnam.pdf
cnam.pdfcnam.pdf
cnam.pdf
NadaNadita3
 
Mise en place d’une application mobile de géolocalisation
Mise en place d’une application mobile de géolocalisationMise en place d’une application mobile de géolocalisation
Mise en place d’une application mobile de géolocalisation
Cléa Aurianne Leencé BAWE
 
Memoire licence informatique application gestion personnel par herma - zita...
Memoire licence  informatique application gestion personnel  par herma - zita...Memoire licence  informatique application gestion personnel  par herma - zita...
Memoire licence informatique application gestion personnel par herma - zita...
Soumia Elyakote HERMA
 
Rapport de stage Master MQL - Aymane HAMMIOUI 2018
Rapport de stage Master MQL - Aymane HAMMIOUI 2018Rapport de stage Master MQL - Aymane HAMMIOUI 2018
Rapport de stage Master MQL - Aymane HAMMIOUI 2018
Aymane HAMMIOUI ☁️
 
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
ImnaTech
 
rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudes
Achraf Mokhtari
 
Conception et développement d'une application Android pour TUNISAIR
Conception et développement d'une application Android pour TUNISAIRConception et développement d'une application Android pour TUNISAIR
Conception et développement d'une application Android pour TUNISAIR
Skander Driss
 
Rapport de fin de formation/fin d'etudes, technicien specialise
Rapport de fin de formation/fin d'etudes, technicien specialiseRapport de fin de formation/fin d'etudes, technicien specialise
Rapport de fin de formation/fin d'etudes, technicien specialise
GammingWorld2
 
Le web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futurLe web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futur
Sylvain Gateau
 
CONCEPTION ET RÉALISATION D’UNE PLATEFORME D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
CONCEPTION ET RÉALISATION D’UNE PLATEFORME  D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...CONCEPTION ET RÉALISATION D’UNE PLATEFORME  D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
CONCEPTION ET RÉALISATION D’UNE PLATEFORME D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
BerengerBENAM
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
Siwar GUEMRI
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Salma Gouia
 
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Anas Riahi
 
Backup & Restore SharePoint 2013 Farm
Backup & Restore SharePoint 2013 FarmBackup & Restore SharePoint 2013 Farm
Backup & Restore SharePoint 2013 Farm
Youssef El Idrissi
 
Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie
iferis
 

Similaire à MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit (20)

MEMOIRE DE STAGE
MEMOIRE DE STAGEMEMOIRE DE STAGE
MEMOIRE DE STAGE
 
Rapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdfRapport-PfA-ACHKAOU-SARA.pdf
Rapport-PfA-ACHKAOU-SARA.pdf
 
GEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technologyGEmploi : Smart school timetable management software using RFID technology
GEmploi : Smart school timetable management software using RFID technology
 
Rapport de stage exchange
Rapport de stage exchangeRapport de stage exchange
Rapport de stage exchange
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
cnam.pdf
cnam.pdfcnam.pdf
cnam.pdf
 
Mise en place d’une application mobile de géolocalisation
Mise en place d’une application mobile de géolocalisationMise en place d’une application mobile de géolocalisation
Mise en place d’une application mobile de géolocalisation
 
Memoire licence informatique application gestion personnel par herma - zita...
Memoire licence  informatique application gestion personnel  par herma - zita...Memoire licence  informatique application gestion personnel  par herma - zita...
Memoire licence informatique application gestion personnel par herma - zita...
 
Rapport de stage Master MQL - Aymane HAMMIOUI 2018
Rapport de stage Master MQL - Aymane HAMMIOUI 2018Rapport de stage Master MQL - Aymane HAMMIOUI 2018
Rapport de stage Master MQL - Aymane HAMMIOUI 2018
 
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
Etude de la mise en place d’un système de communication VoIP sécurisé sur une...
 
rapport-projet-de-fin-detudes
 rapport-projet-de-fin-detudes rapport-projet-de-fin-detudes
rapport-projet-de-fin-detudes
 
Conception et développement d'une application Android pour TUNISAIR
Conception et développement d'une application Android pour TUNISAIRConception et développement d'une application Android pour TUNISAIR
Conception et développement d'une application Android pour TUNISAIR
 
Rapport de fin de formation/fin d'etudes, technicien specialise
Rapport de fin de formation/fin d'etudes, technicien specialiseRapport de fin de formation/fin d'etudes, technicien specialise
Rapport de fin de formation/fin d'etudes, technicien specialise
 
Le web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futurLe web sémantique pour mieux anticiper le futur
Le web sémantique pour mieux anticiper le futur
 
CONCEPTION ET RÉALISATION D’UNE PLATEFORME D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
CONCEPTION ET RÉALISATION D’UNE PLATEFORME  D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...CONCEPTION ET RÉALISATION D’UNE PLATEFORME  D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
CONCEPTION ET RÉALISATION D’UNE PLATEFORME D’ENSEIGNEMENT HYBRIDE D’UNE UNIV...
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
 
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
Rapport PFE : Réalisation d'une application web back-office de gestion pédago...
 
Backup & Restore SharePoint 2013 Farm
Backup & Restore SharePoint 2013 FarmBackup & Restore SharePoint 2013 Farm
Backup & Restore SharePoint 2013 Farm
 
Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie Étude et mise en place d'un serveur messengerie
Étude et mise en place d'un serveur messengerie
 

MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit

  • 1. Année Universitaire : 2019-2020 Projet de Fin d’Études En vue de l’obtention du DIPLOME DE LICENCE PROFESSIONNELLE Systèmes d’Information et Génie Logiciel MISE EN PLACE D’UNE Progressive Web App Pour la Gestion des Rapports d’Audit Réalisé par : Encadré par : ZERRYI ANDALOUSSI Oussama Mr. SEGHIOUER Hamid Pr. YAHYAOUY Ali Membres de jury : ▪ Mr. SEGHIOUER Hamid Encadrant Société ▪ Pr. YAHYAOUY Ali Encadrant FSDM ▪ Pr. SABRI My Abdelouahed Enseignant FSDM ▪ Pr. RIFFI Jamal Enseignant FSDM ▪ Pr. MAHRAZ Med Adnane Enseignant FSDM
  • 2. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 2| Oussama ZERRYI ANDALOUSSI2019/2020 DÉDICACE Toutes les lettres ne sauraient trouver les mots qu’il faut… Tous les mots ne sauraient exprimer la gratitude, l’amour, le respect, la reconnaissance…etc. Aussi, c’est tout simplement qu’on dédie ce travail… À mes chers parents Aucune dédicace ne saurait exprimer mon respect, mon amour éternel et ma considération pour les sacrifices que vous avez consenti pour mon instruction et mon bien-être. Je vous remercie pour tout le soutien et l’amour que vous me portez depuis mon enfance et j’espère que votre bénédiction m’accompagne toujours. Puisse Dieu, le Très Haut, vous accorder santé, bonheur et longue vie et faire en sorte que jamais on ne vous déçoive. À toutes les personnes qui ont participé à l’élaboration de ce travail et à tous ceux que j’ai omis de citer.
  • 3. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 3| Oussama ZERRYI ANDALOUSSI2019/2020 REMERCÎMENT En guise de reconnaissance, Je tiens à témoigner mes sincères remerciements à toutes les personnes qui ont contribués de près ou de loin au bon déroulement de mon projet fin d’étude malgré la difficile période de COVID 19, et à l’élaboration de ce modeste travail. Mes sincères gratitudes à notre professeur Mr SABRI pour la qualité de son enseignement, ses conseils et son intérêt incontestable qu’il porte à tous les étudiants. Je tiens aussi à remercier tout le corps professoral de la Faculté des Sciences Dhar El Mehraz (spécialement la licence professionnelle de Systèmes d'Information et Génie Logiciel) pour le travail énorme qu’il effectue pour nous créer les conditions les plus favorables pour le déroulement de nos études. Dans l’impossibilité de citer tous les noms, mes sincères remerciements vont à tous ceux et celles, qui de près ou de loin, ont permis par leurs conseils et leurs compétences la réalisation de ce projet de fin d’études. Enfin, je ne saurai oublier de remercier l’ensemble des personnes qui m’ont aidé et précisément : le professeur Abdelouahed SABRI le coordinateur notre filière et Mr YAHYAOUY Ali mon encadrant pédagogique de stage ainsi que mon encadrant de stage Mr Hamid SEGHIOUER, pour leur patience, leurs conseils pleins de sens et pour le suivi et l’intérêt qu’ils ont portaient à mes travaux.
  • 4. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 4| Oussama ZERRYI ANDALOUSSI2019/2020 RÉSUMÉ L’objectif principal de ce projet est l’élaboration d’une application web progressive fonctionnel sur la plateforme mobile qui permet essentiellement à gérer les rapports d’audit et de contrôle, d’assurer la sureté et la sécurité des données, de gérer les auditeurs et les clients, de suivre les géolocalisations des rapports crées, la génération dynamique des rapports en PDF et les statistiques de tous les processus précédents. ABSTRACT The main objective of this project is to develop a progressive web application functional on the mobile platform which is mainly used to manage audit and control reports, ensure data security and safety, managing auditors, managing clients, tracking geolocations of reports created, generate dynamic PDF reports and statistics of all previous processes.
  • 5. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 5| Oussama ZERRYI ANDALOUSSI2019/2020 TBLE DE MATIÈRES DÉDICACE..................................................................................................................................... 2 REMERCÎMENT ............................................................................................................................ 3 RÉSUMÉ ......................................................................................................................................... 4 Abstract ........................................................................................................................................... 4 Tble de matières ............................................................................................................................. 5 INTRODUCTION.......................................................................................................................... 8 CH – 1 : Contexte générale du projet .................................................................................................. 9 1) Présentation globale de l’entreprise........................................................................................ 9 a) Lieu de la société BSA CONSEIL............................................................................................ 9 b) Présentation de la société................................................................................................... 9 c) Les missions de l’entreprise............................................................................................... 10 d) Les valeurs de l’entreprise................................................................................................. 11 e) Les partenaires de BSA CONSEIL ........................................................................................ 11 f) Description des services de l’organisation.......................................................................... 13 2) L’étude de l’existant ............................................................................................................. 16 3) Plan suivi pour arriver à la solution ....................................................................................... 18 1) Les éléments intervenants ................................................................................................ 18 a) Diagramme de Gantt......................................................................................................... 18 CH – 2 : Analyse et Conception......................................................................................................... 19 1) Les exigences fonctionnelles ................................................................................................. 19 2) Les exigences techniques...................................................................................................... 19 3) La conception adoptée.......................................................................................................... 20 a) Diagram de cas ................................................................................................................. 20 Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision globale du comportement fonctionnel d'un système logiciel ..................................................... 20 b) Diagramme de classe ....................................................................................................... 21 c) Modèle Logique de Données ............................................................................................. 22
  • 6. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 6| Oussama ZERRYI ANDALOUSSI2019/2020 2) Structure de développement ................................................................................................ 24 d) Les outils et logiciels du développement............................................................................ 24 b) Les package utiliser........................................................................................................... 30 CH – 3 : Interfaces de l’application réalisée....................................................................................... 31 1) Logo d’application mobile et web ......................................................................................... 31 a) Logo site web et desktop................................................................................................... 31 b) Logo mobile...................................................................................................................... 31 2) Les interfaces d’identification et d’authentification............................................................... 31 a) Se connecter..................................................................................................................... 31 b) Récupération de mot de passe .......................................................................................... 32 c) L’email de récupération du compte ................................................................................... 33 3) L’espace de gestion de l’application. ..................................................................................... 34 a) Page accueil...................................................................................................................... 34 b) Page à-propos de l’application .......................................................................................... 34 c) Page de gestion de profile................................................................................................. 35 4) Les interfaces de gestion des utilisateurs et ses privilèges...................................................... 36 a) Page de gestion des administrateurs ................................................................................. 36 b) Page de gestion des auditeurs ........................................................................................... 37 c) Page de gestion des auditeurs ........................................................................................... 38 5) Les interfaces de gestion des rapports................................................................................... 39 a) Page de gestion des rapports............................................................................................. 39 b) Page d’ajout, modification et consultation du rapport ....................................................... 40 c) Les pièces jointes du rapport............................................................................................. 40 d) Page des remarques du rapport......................................................................................... 42 e) Page de trace des rapports................................................................................................ 43 f) Page de gestion des attachements des rapports................................................................. 43 g) Le rapport sous la forme PDF générer................................................................................ 44 h) L’email envoyer au client contenons le rapport.................................................................. 45 6) La progressive web app sur mobile et desktop....................................................................... 45 a) Desktop apparence........................................................................................................... 45 b) Mobile apparence............................................................................................................. 46
  • 7. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 7| Oussama ZERRYI ANDALOUSSI2019/2020 CH – 3 : Rapport de sécurité de l’application d’audit......................................................................... 48 1) Présentation de problématique ............................................................................................ 48 2) Les solutions implémenter.................................................................................................... 48 Conclusion et Perspective............................................................................................................ 50 Table de figures............................................................................................................................ 52 List des tables ............................................................................................................................... 54 Table d’acronymes ....................................................................................................................... 55 WEBOGRAPHIE / bibliographie ........................................................................................................ 56
  • 8. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 8| Oussama ZERRYI ANDALOUSSI2019/2020 INTRODUCTION Dans le cadre de ma formation de la licence professionnelle de Systèmes d'Information et Génie Logiciel, j’ai eu l’opportunité d'effectuer un stage de fin d’études. Ce dernier est pour l’objectif de faire synthèse de mes connaissances théoriques, d'affiner ma Perception de l'entreprise, d’en retirer une expérience ainsi qu'une analyse globale et approfondie de l'entreprise et de son environnement, tout en me préparant dans les meilleures conditions à la vie professionnelle. Pour ce stage j'ai décidé d'orienter mon choix vers une entreprise conseil, formation et audit, BSA CONSEIL – Rabat qui a besoin de développer des applications web pour ses clients, malgré les conditions de confinement causé par COVID 19, j’ai pu effectuer mon stage à distance en coordonnant avec des visioconférences et des réunions en ligne. D’où j’ai eu l’occasion de créer une application web progressive pour un client de l’entreprise.
  • 9. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 9| Oussama ZERRYI ANDALOUSSI2019/2020 CH – 1 : Contexte générale du projet 1) Présentation globale de l’entreprise Dans le cadre de mon stage de fin d’études au sein de la société BSA CONSEIL, que je l’ai effectué à distance. J’été chargé de développer une solution informatique pour leur client Performance Qualité. a) Lieu de la société BSA CONSEIL b)Présentation de la société BSA CONSEIL est une entreprise de conseil, formation et audit qui propose de différentes prestations de conseil, elle a pour objectif d'accompagner ses partenaires pour l'optimisation de leurs ressources, et la planification de leurs projets jusqu'à l’aboutissement, elle propose son expertise qui couvre plusieurs domaines à savoir : • Systèmes de management de la qualité SMQ 9001 • Systèmes de management de l'environnement SME 14001 • Systèmes de management de la santé sécurité au travail SMSST 45001 • Systèmes de management de la sécurité de l'information SMSI 27001 Figure 1: lieu géographique de la société BSA CONSEIL
  • 10. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 10| Oussama ZERRYI ANDALOUSSI2019/2020 • Systèmes de management de la continuité d'activité SMCA 22301 c) Les missions de l’entreprise Fondé en 2015, BSA CONSEIL prend en charge l'accompagnement de ces clients pour la rationalisation et l'optimisation de leurs ressources. En utilisant des outils et des techniques modernes et innovantes. Fort par son équipe d'experts, BSA CONSEIL assiste depuis la planification de projet jusqu'à son aboutissement. Dénomination : BSA CONSEIL Forme juridique : Société à responsabilité limitée Date d'immatriculation : 09–02-2015 Tribunal : RABAT Activité : Conseil, Formation ET Audit N° RC : 108277 N° de ICE : 001869871000043 Capital : 100 000 MAD Téléphone : +212 537 671 885 Figure 2: Logo de la société BSA CONSEIL Tableau 1: Les information de société
  • 11. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 11| Oussama ZERRYI ANDALOUSSI2019/2020 d)Les valeurs de l’entreprise Confiance, Proximité, Rigueur et Créativité reflètent l’entreprise responsable que BSA CONSEIL aspire à devenir sur le plan professionnel. Ces valeurs sont au cœur de chacune de ces décisions. Ainsi chez BSA CONSEIL tout le monde se considère responsable de tout ce que l’entité entreprenne. BSA CONSEIL a pour principe de s’impliquer totalement dans les projets qui lui sont confiés et souvent au niveau même de leur définition. La relation entre l’entreprise et ses clients dépasse le cadre purement commercial, elle se caractérise plutôt comme un partenariat. Il est hors de question pour BSA CONSEIL de livrer un service spécifique mal définie ou non viable. Les pratiques commerciales obscures ne font pas partie de la culture de BSA CONSEIL. Cela passe inévitablement par une forte implication et une très bonne connaissance préalable du domaine d’activité de ses clients. e) Les partenaires de BSA CONSEIL Partenaires Logo Mission Description AMENDIS SMSI & FORMATION 27001 :2013 Mise en place du SMSI AMENDIS et formation LI 27001 APM TERMINALS FORMATION THERMOGRAPHIE ET ULTRASON Formation technique en thermographie et formation technique en ultrasons CALEX AUDIT À BLANC 9001 Préaudit 9001 pour la préparation à la certification (en partenariat avec Performance Qualité)
  • 12. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 12| Oussama ZERRYI ANDALOUSSI2019/2020 CMS AUDIT À BLANC 9001 Préaudit 9001 pour la préparation à la certification (en partenariat avec Performance Qualité) DENSO FORMATION THERMOGRAPHIE Formation technique en thermographie HORIZON AUDIT DE CERTIFICATION Audit de certification 27001 :2013 (CertiTrust) MAROC TELECOM SMSI & FORMATION 27001 :2013 Mise en place du SMSI LONACI et formation Certifiante LI 27001 CertiTrust (en partenariat avec Performance Qualité et EasyManagement) MATIS FORMATION Formation en gestion de projets, gestion du temps et des priorités MUGEF-CI SMSI & FOR Mise en place du SMSI et SMCA MUGEF-CI et formation Certifiante LI 27001 et LI 22301 CertiTrust (en partenariat avec Performance Qualité et EasyManagement MATION 27001 :2013 OC¨P INGENIERIE DE FORMATION Refonte de l'ingenierie de formation (en partenariat GIZ et ValueStream)
  • 13. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 13| Oussama ZERRYI ANDALOUSSI2019/2020 f) Description des services de l’organisation Système de Management de la Qualité SMQ ISO 9001 BSA CONSEIL accompagne ses clients à mettre en place leur système de management de la qualité « SMQ » conformément à la norme ISO 9001 afin de garantir une satisfaction totale de la clientèle, et d'assurer la disposition à répondre aux exigences des parties prenantes. L’entité assiste sa clientèle tout au long du SAFRAN FORMATION Formation en gestion de projets, gestion du temps et des priorités FORMATION TBS FORMATION Formation au profit des filières semaine et weekend TIZIMAR REENGINEERING ET FORMATION Reengineering des entrepôts de stockage avec recalcul des surfaces techniques et dimensionnement du parc de manutention et formation en management LONACI SMSI & FORMATION 27001 :2013 Mise en place du SMSI LONACI et formation Certifiante LI 27001 CertiTrust (en partenariat avec Performance Qualité et EasyManagement) Tableau 2: Les partenaire de la société BSA CONSEIL
  • 14. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 14| Oussama ZERRYI ANDALOUSSI2019/2020 déploiement de votre Système de Management jusqu'à l'obtention de la certification ISO 9001. Systèmes de Management de l'Environnement SME ISO 14001 BSA CONSEIL met en place un système de management de l'environnement SME conforme à la norme ISO 14001, afin de faciliter pour le Top Management la prise de décision importante et à anticiper les problèmes liés aux impacts environnementaux des activités de l'organisme. Le SME est la confirmation de l'engagement de l'entreprise à respecter l'environnement et à se conformer aux exigences de ses parties prenantes et de ses collaborateurs. Systèmes de Management de la Santé Sécurité au Travail SMSST ISO 45001 BSA CONSEIL vise l’accompagnement dans le déploiement du Système de management de la santé et de la sécurité au travail (SMSST) conformément à la norme ISO 45001. Cela permet de veiller à la protection des collaborateurs internes et externes, de se conformer aux exigences réglementaires et contractuelles, ainsi qu’approuvé l'engagement de l'organisme pour une amélioration continue. Système de Management de la Sécurité de l'Information SMSI ISO/IEC 27001 BSA CONSEIL accompagne à mener votre projet de ses clients de la mise en place ou de la certification d'un système de management de la sécurité de l'information « SMSI » conformément à la norme ISO 27001 afin de garantir une maîtrise approfondie des risques et des dispositifs normatifs, contractuels et légaux applicables. Un suivi qui vous permet de vous assister tout au long du déploiement de votre Système de Management de la Sécurité de l'Information qui
  • 15. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 15| Oussama ZERRYI ANDALOUSSI2019/2020 assure la mise en œuvre et le suivi de la sécurité de l'information dans votre entreprise. Systèmes de Management de la continuité d'activité SMCA ISO 22301 BSA CONSEIL assiste ses clients pour assurer la sauvegarde du patrimoine de l'entreprise qui devient une nécessité stratégique pour tout organisme. Avec l'avènement des systèmes d'information comme acteurs majeurs dans l'activité, aucune entreprise n'est à l'abri d'un arrêt d'activité de ses services vitaux. Le système de management de la continuité d'activité (SMCA) est étroitement lié à la sécurité du personnel et la protection du patrimoine, une analyse profonde des risques liés à ses actifs est la solution pour mener à bien cette démarche. Management des risques liés à la Sécurité de l'Information SMSI ISO/IEC 27005 La norme ISO 27005 a pour objectif de procurer aux organisations un guide pour la mise en place de la sécurité de l'information basée sur une approche judicieuse de gestion du risque. Elle représente un appui aux concepts généraux du SMSI 27001, ce qui complète les exigences concernant la gestion des risques (clause 4.2). BSA CONSEIL accompagne ses collaborateurs dans la mise en place de cette démarche de gestion des risques liés à la sécurité de l'information, avec une vision durable permettant de faire face aux risques en continu.
  • 16. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 16| Oussama ZERRYI ANDALOUSSI2019/2020 2) L’étude de l’existant Dans cette partie, nous allons essayer de projeter la lumière sur les grandes étapes de la réalisation de notre application web, commençant par l’étude de besoin jusqu'à la réalisation des différentes fonctionnalités de l’application web d’audit. J’ai été chargé de réaliser un projet, sous forme d’une application web progressive pour la société performance qualité ; la société opère 2002 dans le conseil, la formation et l'audit QHSE et RSE. Dans le contexte de l’entreprise, l’auditeur vérifie les machines et leur qualité ensuite il remplit un rapport papier (voir annexe 1) généralement à la maison avec un risque d'oubli. La société Performance Qualité veut le forcer à remplir le rapport au terrain du travail (vérification de la géolocalisation) par une tablette pour l'objectif d'envoyer le rapport établi au client du cabinet d’audit après la validation par un administrateur ou un auditeur en chef. La société avait une application développée avec un Framework Laravel (lumen) à propos de textile et elle a essayé de l’adopter à ce contexte d’audit et de contrôle, le code source du projet contient des traces d’adaptation à ce sujet ainsi quelque table dans la base de donner. En fin la société a décidé d’orienter le choix vers une application native PHP progressive pour que ça soit fonctionnel au différents plateforme desktop mobile et web en se basant sur la même Template et en intégrant les différents fonctionnalités nessecaire. PWA : est une application web qui consiste en des pages ou des sites web, et qui peuvent apparaître à l'utilisateur de la même manière que les applications natives ou les applications mobiles. Ce type d'applications tente de combiner les fonctionnalités offertes par la plupart des Figure 3: PWA logo
  • 17. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 17| Oussama ZERRYI ANDALOUSSI2019/2020 navigateurs modernes avec les avantages de l'expérience offerte par les appareils mobiles. La base de données crée utilise un ancien moteur de stockage MyISAM de MySQL qui s'appuie sur d'énormes tables qui ne modifient pas fréquemment les données. Ce dernier ne permet pas de respecter les formes normales du relationnel et les contraintes d’intégrités référentielles ainsi que les relations One to One, One to Many. Figure 4: MLD donner par l'entreprise BSA CONSEIL Figure 5: Comparaissent entre InnoDB et MyISAM
  • 18. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 18| Oussama ZERRYI ANDALOUSSI2019/2020 3) Plan suivi pour arriver à la solution 1) Les éléments intervenants • Maître d'œuvre : Bureau d'études Performance Qualité • Maître d'ouvrage : BSA Conseil • Développeur de la solution : ZERRYI ANDALOUSSI Oussama • Livrable : Progressive web App de Gestion des Rapports d’audit et contrôle cross plateforme. a) Diagramme de Gantt Est un outil utilisé (souvent en complément d'un réseau PERT) en ordonnancement et en gestion de projet et permettant de visualiser dans le temps les diverses tâches composant un projet. Il s'agit d'une représentation d'un graphe connexe, value et orienté, qui permet de représenter graphiquement l'avancement du projet. Figure 6: Diagramme de Gantt
  • 19. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 19| Oussama ZERRYI ANDALOUSSI2019/2020 CH – 2 : Analyse et Conception 1) Les exigences fonctionnelles L’application doit assurer l’accéder aux quatre acteurs suivants : admin – auditeur – auditeur chef – client. Chaque un de ces acteurs de system doit s’authentification pour accéder à son espace. L’administrateur de system doit avoir la possibilité de gérer les utilisateurs de system et les rapports élaborer par les auditeurs et qui va s’envoyer aux clients après la validation. L’admin aussi doit consulter le lieu d’élaboration du rapport et la date de création ou modification. Les questions des pièce jointe des rapports peux se gérer par ce dernier ainsi sa visibiliser. . L’auditeur doit avoir la main de gérer ses rapports et consulter les remarques écrites par le validateur du rapport. L’auditeur chef doit gérer les rapports par sa spécialiser et doit avoir la possibilité de valider les rapports et mette des remarques. Le client doit avoir la main pour consoler ses rapports et leurs statuts et recevoir des notifications et un email pour ses rapports valider ainsi de télécharger le rapport dans son espace. Le système doit envoyer des notifications aux auditeurs à propos les rapports non valides depuis deux jours et aux validateurs après sept jours de sa création. 2) Les exigences techniques • Récupération du mot de passe • Récupération de la géolocalisation d’auditeur • Générer PDF dynamiquement partir des données • Envoyer le rapport établi par courriel • Up/download des fichier (image - pdf) • L’application doit être installable sur Android plateforme (PWA mobile)
  • 20. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 20| Oussama ZERRYI ANDALOUSSI2019/2020 3) La conception adoptée a) Diagram de cas Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une vision globale du comportement fonctionnel d'un système logiciel Figure 7: use case d'administrateur
  • 21. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 21| Oussama ZERRYI ANDALOUSSI2019/2020 b) Diagramme de classe Figure 9: use case d'auditeur, auditeur en chef et client Figure 8: Diagramme de classe
  • 22. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 22| Oussama ZERRYI ANDALOUSSI2019/2020 c) Modèle Logique de Données MLD : est la modélisation logique des données qui tient compte du niveau organisationnel des données. Il s'agit d'une vue logique en termes d'organisation de données nécessaires à un traitement. On a adopté les documents JSON avec le relationnel de MySQL qui nous permet d’enregistrer cette forme dans la base de données et d’interroger le SGBD avec le SQL pour faire le mapping des données. Cette fonctionnalité vient avec le nouveau MySQL 5.7.0. Document JSON : Un Document JSON comprend deux types d'éléments structurels : • Des ensembles de paires « nom » (alias « clé ») / « valeur » • Des listes ordonnées de valeurs Ces mêmes éléments représentent trois types de données : Figure 10: MLD réaliser
  • 23. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 23| Oussama ZERRYI ANDALOUSSI2019/2020 • Des objets • Des tableaux • des valeurs génériques de type tableau, objet, booléen, nombre, chaîne de caractères ou null. Le mapping des données se fait par des fonctions intégrées dans le SGBD MySQL présenté dans le tableau suivant. Figure 12: Type de données JSON en MySQL SGBD Figure 13: La représentation de document JSON Figure 11: La représentation des pièces jointe du rapport
  • 24. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 24| Oussama ZERRYI ANDALOUSSI2019/2020 JSON Fonction Reference 2) Structure de développement d)Les outils et logiciels du développement HTML : L’HyperText Markup Langage, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web. C’est un langage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement 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. CSS : Cascading Style Sheets, est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en HTML ou en XML .CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports. Figure 14: Fonction de manipulation des documents JSON dans MySQL Figure 15: Logo HTML Figure 16: Logo css
  • 25. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 25| Oussama ZERRYI ANDALOUSSI2019/2020 JavaScript : est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs2 avec l'utilisation (par exemple) de Node.js. JQuery : est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. 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. Adobe 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. PhpStorm : est un éditeur pour PHP3, HTML, CSS et JavaScript4, édité par JetBrains ; Il permet d'éditer du code PHP pour les versions allant de la 5.3 à la 7.4 (v-2020.4.0 ultimate). PHP : HyperText Preprocessor, est un langage de programmation libre, principalement utilisé pour produire des pages Web dynamiques via un serveur http (v-7.4.0). MySQL : est un système de gestion de bases de données relationnelles (SGBDR) v-5.7.0. Figure 17: Logo JavaScript Figure 18: Logo JQuery Figure 19: Logo get Bootstrap Figure 20: Logo Photoshop Figure 21: Logo PHP Storm IDE Figure 22: Logo PHP Figure 23: Logo MySQL
  • 26. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 26| Oussama ZERRYI ANDALOUSSI2019/2020 Api : (Application Programming Interface) est un ensemble normalisé de classes, de méthodes, de fonctions et de constantes qui sert de façade par laquelle un logiciel offre des services à d'autres logiciels. Elle est offerte par une bibliothèque logicielle ou un service web, le plus souvent accompagnée d'une description qui spécifie comment des programmes consommateurs peuvent se servir des fonctionnalités du programme fournisseur. JSON : (JavaScript Object Notation) est un format de données textuelles dérivé de la notation des objets du langage JavaScript. Il permet de représenter de l’information structurée comme le permet XML. On développer un web service PHP sous forme d’une api charger de gérer la couche métier de l’application et l’interaction avec base de données. La communication avec l’api est assurée avec la forme JSON. Fetch API : fournit une interface pour récupérer des ressources (y compris sur le réseau). Cela semblera familier à tous ceux qui ont utilisé XMLHttpRequest, mais la nouvelle API fournit un ensemble de fonctionnalités plus puissant et plus flexible. Figure 24: Shema de fonctionement d'une api Figure 25: Logo JSON
  • 27. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 27| Oussama ZERRYI ANDALOUSSI2019/2020 ES6 : est un ensemble de normes concernant les langages de programmation de type script et standardisées par Ecma International dans le cadre de la spécification ECMA-262. Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans différents langages de script, comme JavaScript ou ActionScript. C'est un langage de programmation orienté prototype. Geolocation API : permet à l'utilisateur de fournir son emplacement aux applications Web s'il le souhaite. Pour des raisons de confidentialité, il est demandé à l'utilisateur l'autorisation de signaler les informations de localisation. Les extensions Web qui souhaitent utiliser l'objet de géolocalisation doivent ajouter l'autorisation "géolocalisation" à leur manifeste. Le système d'exploitation de l'utilisateur invite l'utilisateur à autoriser l'accès à l'emplacement la première fois qu'il est demandé. .htaccess : (accès hypertexte) est un fichier de configuration de niveau répertoire pris en charge par plusieurs serveurs Web, utilisé pour la configuration des problèmes d'accès au site Web, tels que la redirection d'URL, le raccourcissement d'URL, le contrôle d'accès (pour différentes pages Web et différents fichiers), et plus. Le « point » (point ou point) avant le nom de fichier en fait un fichier caché dans les environnements basés sur Unix. Figure 26: Logo ECMA SCRIPT
  • 28. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 28| Oussama ZERRYI ANDALOUSSI2019/2020 PWA : se consulte comme un site web classique, depuis une URL sécurisée mais permet une expérience utilisateur similaire à celle d'une application mobile, sans les contraintes de cette dernière (soumission aux App-Stores, utilisation importante de la mémoire de l'appareil…). Elles proposent de conjuguer rapidité, fluidité et légèreté tout en permettant de limiter considérablement les coûts de développement4 : plus besoin de faire des développements spécifiques pour les applications en fonction de chacune des plateformes : iOS, Android, Windows… Comparaison entre native app, responsive web site and PWA Manifeste : un fichier contenant des métadonnées pour un groupe de fichiers d'accompagnement qui font partie d'un ensemble ou d'une unité cohérente. Par exemple, les fichiers d'un programme informatique peuvent Figure 27: Information sur PWA Tableau 3: Comparaissent entre native app, responsive et progressive web app
  • 29. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 29| Oussama ZERRYI ANDALOUSSI2019/2020 avoir un manifeste décrivant le nom, le numéro de version, la licence et les fichiers constitutifs du programme. Service worker : est un fichier JavaScript qui fonctionne comme un type de travailleur Web. Ils fonctionnent séparément du thread principal du navigateur pour gérer les notifications push, synchroniser les données en arrière-plan, mettre en cache ou récupérer les demandes de ressources, intercepter les demandes réseau et recevoir des mises à jour centralisées. Figure 28: Le fichier Manifest Figure 29: Detection du service worker sur le navigateur
  • 30. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 30| Oussama ZERRYI ANDALOUSSI2019/2020 Les employés de service sont utilisés pour donner aux applications Web progressives la capacité de fournir les hautes performances et la riche expérience des applications mobiles natives, avec le faible espace de stockage, les mises à jour en temps réel et une meilleure visibilité sur les moteurs de recherche des applications Web traditionnelles. b)Les package utiliser Composer : est un logiciel gestionnaire de dépendances libre écrit en PHP. Il permet à ses utilisateurs de déclarer et d'installer les bibliothèques dont le projet principal a besoin. PHP Mailer : est une bibliothèque logicielle d'envoi de courriels en PHP. En effet, envoyer un courriel en code natif exige un haut niveau de connaissance des normes SMTP1, du format des courriels (tels que l'HTML et le retour chariot), et des vulnérabilités d'injection pour spammer. DOMPDF : permet de générer des fichiers PDF à partir d'une page HTML. C'est une alternative à HTML2PDF, qui lui est basé sur TCPDF. Figure 30: Logo Composer Figure 31: Logo du package php Mailer
  • 31. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 31| Oussama ZERRYI ANDALOUSSI2019/2020 CH – 3 : Interfaces de l’application réalisée 1) Logo d’application mobile et web a) Logo site web et desktop b) Logo mobile 2) Les interfaces d’identification et d’authentification a) Se connecter Cette interface permet aux utilisateurs de se connecter à l’espace de gestion. Cette dernière génère des exceptions sous forme d’alerte si les données non validé ou le mot de passe est incorrect. Cette interface donne aussi la possibilité d’accès à la page de récupération de compte en cas d’un le mot de passe oublier. Figure 32: Logo desktop et web site de l'application réalisée Figure 33: Logo d'application Android Figure 34: Formulaire d'authentification
  • 32. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 32| Oussama ZERRYI ANDALOUSSI2019/2020 L’exception levée en cas d’erreur de mot de passe b) Récupération de mot de passe La récupération du compte en cas de perte du mot de passe se fait par l’envoi de token à travers l’email si le compte est déjà existé, pour assurer une sécurisation pour tous les utilisateurs de l’application. Message d’information : Figure 35: Alerte aux cases d'erreur Figure 37: Formulaire de récupération du mot de passe Figure 36: alerte d'envoie avec succès
  • 33. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 33| Oussama ZERRYI ANDALOUSSI2019/2020 c) L’email de récupération du compte L’email contient un lien qui fait une redirection vers la page de réinitialisation de mot de passe dans l’application avec un token intégré dans la requête http. Figure 38: L’apparence de courrier dans la boit Figure 39: L'email de récupération du mot de passe Figure 40: Formulaire de réinitialisation de mot de passe
  • 34. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 34| Oussama ZERRYI ANDALOUSSI2019/2020 3) L’espace de gestion de l’application. a) Page accueil À gauche de la page, il existe un bar de navigation personnalisé par rapport à chaque rôle d’utilisateur. En haut de page un bar contient un bouton de notification et un nom d’utilisateur connecté, avec une liste des options pour consulter le profile ou se déconnecter de votre espace. Au centre du page, il existe des statistiques personnalisées de site pour donner une vision sur état des actions fêtent dans l’espace. b)Page à-propos de l’application Figure 41: Accueil page Figure 42: À-propos page
  • 35. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 35| Oussama ZERRYI ANDALOUSSI2019/2020 c) Page de gestion de profile Elle Permet de gérer les données du compte et de changer le mot de passe Figure 43: Profile page
  • 36. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 36| Oussama ZERRYI ANDALOUSSI2019/2020 4) Les interfaces de gestion des utilisateurs et ses privilèges a) Page de gestion des administrateurs Elle permet d’ajouter, éditer, supprimer et désactiver ou activer un compte utilisateur. Formulaire d’ajout d’un administrateur Message de confirmation pour désactiver ou activer un utilisateur avec le message de validation et de suppression Figure 44: section de gestion des administrateurs Figure 45: Formulaire d'ajout des admins Figure 46: Alerte de confirmation
  • 37. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 37| Oussama ZERRYI ANDALOUSSI2019/2020 b)Page de gestion des auditeurs En tant qu’administrateur vous pouvez gérer tous les comptes auditeurs dans votre espace. Formulaire d’ajout ou modification des auditeurs selon leurs spécialités. Figure 47: Section de gestion des auditeurs Figure 48: Formulaire d'ajout d'un auditeur
  • 38. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 38| Oussama ZERRYI ANDALOUSSI2019/2020 c) Page de gestion des auditeurs En tant qu’administrateur vous pouvez gérer tous les comptes clients créent dans l’espace. Le Formulaire d’ajout et de modification des clients est élaboré selon des différents statuts à savoir : confiance, attention et black listes. Figure 49: Section de gestion des clients Figure 50: Formulaire de manipulation de client
  • 39. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 39| Oussama ZERRYI ANDALOUSSI2019/2020 5) Les interfaces de gestion des rapports a) Page de gestion des rapports En tant qu’admin, auditeur, auditeur chef ou client vous pouvez accéder à vos rapports par des privilèges qui limite l’accès où la faisabilité d’une opération. En générale vous pouvez convertir cette liste en PDF, l’imprimer ou la copier sous forme de texte en cliquant sur les boutons convenables. Voilà la liste des opérations faisable par l’administrateur. Figure 51: Section de gestion des rapports Figure 52: Menu des options du rapport
  • 40. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 40| Oussama ZERRYI ANDALOUSSI2019/2020 b)Page d’ajout, modification et consultation du rapport Cette page contient les données liées au rapport ainsi ses pièces à jointe. c) Les pièces jointes du rapport Les pièces attachées au rapport contiennent des questions d’audit et de contrôle générés automatiquement d’apprêt un model sous forme d’un document JSON. Figure 53: Section de manipulation du rapport Figure 54: Identification & CMU : Caractéristiques pièce jointe
  • 41. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 41| Oussama ZERRYI ANDALOUSSI2019/2020 Voilà les différentes pièces. Figure 56:Inspection du Palan pièce jointe Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe Figure 58: Aspect Documentaire pièce jointe Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE (Indiquer Conforme ou Non conforme) pièce jointe Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe
  • 42. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 42| Oussama ZERRYI ANDALOUSSI2019/2020 d)Page des remarques du rapport En tant qu’admin ou auditeur en chef vous pouvez laisser des remarques à l’auditeur du rapport a fin de lès pris en compte. Le formulaire d’ajout des remarques qui contient le titre est une description avec des option de mise en forme le texte. Figure 61: Espace des remarques Figure 60: Formulaire d'ajout d'une remarque
  • 43. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 43| Oussama ZERRYI ANDALOUSSI2019/2020 e) Page de trace des rapports Elle Permet de donner à l’admin des informations sur la date, le lieu, l’utilisateur créer ou modifier le rapport. f) Page de gestion des attachements des rapports Cette page gère toutes les questions liées à chaque attachement du rapport avec l’option de modification de la visibilité dans le rapport générer. Figure 62: L'espace de trace des rapports Figure 63: L'espace de gestion des questions des pièces jointes
  • 44. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 44| Oussama ZERRYI ANDALOUSSI2019/2020 Formulaire d’ajout des questions. g) Le rapport sous la forme PDF générer Voir l’annexe 2.
  • 45. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 45| Oussama ZERRYI ANDALOUSSI2019/2020 h) L’email envoyer au client contenons le rapport Le courrier envoyer jointe un fichier PDF 6) La progressive web app sur mobile et desktop a) Desktop apparence La boite de dialogue pour installer sur le desktop Figure 64: L'email envier au client Figure 65: Boite de dialogue d'installation
  • 46. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 46| Oussama ZERRYI ANDALOUSSI2019/2020 b)Mobile apparence Le processus d'installation de PWA sur Android. Figure 66: PWA sur le Desktop Figure 69: Boite de dialogue sur Android de suggestion Figure 68: Boite de dialogue sur Android d'installation Figure 67: Alerte d'information de processus
  • 47. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 47| Oussama ZERRYI ANDALOUSSI2019/2020 Figure 71: Fenêtre d'installation Figure 72: Fenêtre d'ouverture Figure 70: Splash screen d'application Figure 73: L'apparence de PWA dans l’Android
  • 48. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 48| Oussama ZERRYI ANDALOUSSI2019/2020 CH – 3 : Rapport de sécurité de l’application d’audit 1) Présentation de problématique La sécurité des applications Web est devenue un enjeu stratégique aussi important que les fonctionnalités ou l’ergonomie de toutes applications élaborées, d’ailleurs les utilisateurs y attachent de plus en plus d’importance. D’où la nécessité de la conception d’une partie sécurité de notre projet à vue le jour. 2) Les solutions implémenter • Développement d’un système d’authentification par le hachage des mots de passe en gérant les exceptions lever. • Système de réinitialisation des mots de passe par token envoyer par email à l’utilisateur au cas d’oubli. • Centralisation de la couche logique et DAO dans l’api à travers un seul contrôleur qui gère les actions demandées. • Limitation des actions fournies par API développé au cas d’un utilisateur non authentifier. • Implémentation d’un system de filtrage des champs personnalisés qui permet d’assurer les données entrées par les utilisateurs. • Assainir (sanitinzing) des données enregistrées dans la base de données pour prévenir les vulnérabilités XSS. • La préparation des requêtes SQL en communication avec la base de données pour prévenir les vulnérabilités d’injection SQL. • Le filtrage dynamique des champs (question et réponse) des rapports. • Développement d’un système de routage sécurisé en restriction l’accès direct aux pages.
  • 49. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 49| Oussama ZERRYI ANDALOUSSI2019/2020 • Redirection vers des pages des erreurs en cas d’une demande de page non autorisé ou inexistante • Le traçage d’emplacement des rapports rédigées. • Implémentation de l’approche : action pas permission. • La configuration de serveur pour retractionner l'accès au : o Dossier et ficher des bibliothèques utiliser par l’application ‘/vondor’. o Dossier et ficher de configuration de l’application ‘/config’. o Dossier et ficher des pages de l’application ‘/views’ sauf le contrôleur principal. o Dossier et ficher de l’API développer ‘/api’ sauf le contrôleur principal. • La redirection automatique des demandes http non sécurisées vers le protocole https.
  • 50. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 50| Oussama ZERRYI ANDALOUSSI2019/2020 CONCLUSION ET PERSPECTIVE En guise de conclusion, la période du stage est une phase d’application nécessaire et essentielle pour bien réaliser une liaison entre les connaissances théoriques et la pratique professionnelle. Ce stage est très intéressant pour moi puisqu’il m’a permis d’apprendre le concept de travail de l’entreprise, de mettre en œuvre mes connaissances déjà acquises au cours de mes études. Enfin, je tiens à renouveler mes sincères reconnaissances, à toutes personnes ayant participées de près ou de loin à la bonne réalisation de ce fruit. Le développement de mon projet intitulé « La mise en place d’une PWA Pour la Gestion des Rapports d’Audit et contrôle » m’a permis de répondre aux besoins du client la société Performance Qualité. Cette application web consiste à gérer les appels d’offres, les prestataires, les infrastructures, les progiciels, le service et les abonnements. La mise en place de cette application m’a permis de mettre en œuvre nos connaissances théoriques acquises tout au long de notre formation à l’Université Université Sidi Mohamed Ben Abdellah « USMBA ». Ce travail m’a fourni également un grand apport au niveau de plusieurs niveaux. Sur le plan technique, j’ai appris à crée une application web progressive,
  • 51. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 51| Oussama ZERRYI ANDALOUSSI2019/2020 gérer des comptes et ses privilèges d’accès, les services d’hébergement et de déploiement d’application et le faire tourner en production et pleins d’autres outils. J’ai également eu l’opportunité de maîtriser la conception en utilisant UML. Gérer plusieurs champs dans la base de données a aussi été pour moi une occasion unique qui m’a apporté beaucoup d’enrichissement sur le plan relationnel de MySQL et l’orienter document JSON. Bien que les principaux objectifs de mon projet aient été atteints, le système que j’ai développé pourrait être enrichi par d’autres fonctionnalités avancées et améliorations selon des nouveaux besoins demandés par le client. Aussi, Vu le grand volume de données de la direction, une extension de ce travail pourra avoir lieu via l’utilisation de l’informatique décisionnelle qui englobe les solutions IT et qui leur apporte une nouvelle vision contenant des rapports et des tableaux de bord de suivi des activités de l’entreprise à la fois analytiques et prospectifs. En fin si j’avais le choix de technologie, je vais orienter mon choix vers les technologies ressente comme java (sprint) au côté serveur et Angulare au côté client qui va m’aider à exploiter des fonctionnalités déjà développer. Mais aussi travailler avec des technologies comme PHP et javascript en native m’a permis de bien s’avoir comment ces Frameworks fonctionnent en termes de sécurité et pour quoi ils implémentent des designs pattern afin d’arriver à faire des applications robustes.
  • 52. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 52| Oussama ZERRYI ANDALOUSSI2019/2020 TABLE DE FIGURES Figure 1: lieu géographique de la société BSA CONSEIL............................................................9 Figure 2: Logo de la société BSA CONSEIL..............................................................................10 Figure 3: PWA logo ...............................................................................................................16 Figure 4: MLD donner par l'entreprise BSA CONSEIL..............................................................17 Figure 5: Comparaissent entre InnoDB et MyISAM................................................................17 Figure 6: Diagramme de Gantt..............................................................................................18 Figure 7: use case d'administrateur.......................................................................................20 Figure 8: Diagramme de classe..............................................................................................21 Figure 9: use case d'auditeur, auditeur en chef et client ........................................................21 Figure 10: MLD réaliser.........................................................................................................22 Figure 11: La représentation des pièces jointe du rapport .....................................................23 Figure 12: Type de données JSON en MySQL SGBD................................................................23 Figure 13: La représentation de document JSON ...................................................................23 Figure 14: Fonction de manipulation des documents JSON dans MySQL ................................24 Figure 15: Logo HTML ...........................................................................................................24 Figure 16: Logo css................................................................................................................24 Figure 17: Logo JavaScript.....................................................................................................25 Figure 18: Logo JQuery .........................................................................................................25 Figure 19: Logo get Bootstrap ...............................................................................................25 Figure 20: Logo Photoshop ...................................................................................................25 Figure 21: Logo PHP Storm IDE..............................................................................................25 Figure 22: Logo PHP..............................................................................................................25 Figure 23: Logo MySQL .........................................................................................................25 Figure 24: Shema de fonctionement d'une api ......................................................................26 Figure 25: Logo JSON ............................................................................................................26 Figure 26: Logo ECMA SCRIPT ...............................................................................................27 Figure 27: Information sur PWA............................................................................................28 Figure 28: Le fichier Manifest................................................................................................29 Figure 29: Detection du service worker sur le navigateur ......................................................29 Figure 30: Logo Composer.....................................................................................................30 Figure 31: Logo du package php Mailer .................................................................................30 Figure 32: Logo desktop et web site de l'application réalisée.................................................31 Figure 33: Logo d'application Android...................................................................................31 Figure 34: Formulaire d'authentification...............................................................................31 Figure 35: Alerte aux cases d'erreur ......................................................................................32 Figure 36: alerte d'envoie avec succès...................................................................................32
  • 53. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 53| Oussama ZERRYI ANDALOUSSI2019/2020 Figure 37: Formulaire de récupération du mot de passe........................................................32 Figure 38: L’apparence de courrier dans la boit .....................................................................33 Figure 39: L'email de récupération du mot de passe..............................................................33 Figure 40: Formulaire de réinitialisation de mot de passe......................................................33 Figure 41: Accueil page.........................................................................................................34 Figure 42: À-propos page......................................................................................................34 Figure 43: Profile page..........................................................................................................35 Figure 44: section de gestion des administrateurs.................................................................36 Figure 45: Formulaire d'ajout des admins .............................................................................36 Figure 46: Alerte de confirmation .........................................................................................36 Figure 47: Section de gestion des auditeurs ..........................................................................37 Figure 48: Formulaire d'ajout d'un auditeur ..........................................................................37 Figure 49: Section de gestion des clients ...............................................................................38 Figure 50: Formulaire de manipulation de client ...................................................................38 Figure 51: Section de gestion des rapports............................................................................39 Figure 52: Menu des options du rapport ...............................................................................39 Figure 53: Section de manipulation du rapport .....................................................................40 Figure 54: Identification & CMU : Caractéristiques pièce jointe .............................................40 Figure 55: EPREUVE STATIQUE & DYNAMIQUE pièce jointe...................................................41 Figure 56:Inspection du Palan pièce jointe ............................................................................41 Figure 57: Manoeuvre / Essai / Source d'énergie pièce jointe ...............................................41 Figure 58: Aspect Documentaire pièce jointe ........................................................................41 Figure 59: ESSAI DE FONCTIONNEMENT & MANŒUVRE (Indiquer Conforme ou Non conforme) pièce jointe ..........................................................................................................................41 Figure 60: Formulaire d'ajout d'une remarque ......................................................................42 Figure 61: Espace des remarques ..........................................................................................42 Figure 62: L'espace de trace des rapports..............................................................................43 Figure 63: L'espace de gestion des questions des pièces jointes.............................................43 Figure 64: L'email envier au client.........................................................................................45 Figure 65: Boite de dialogue d'installation ............................................................................45 Figure 66: PWA sur le Desktop..............................................................................................46 Figure 67: Alerte d'information de processuce ......................................................................46 Figure 68: Boite de dialogue sur Android d'installation..........................................................46 Figure 69: Boite de dialogue sur Android de suggestion ........................................................46 Figure 70: Splash screen d'application...................................................................................47 Figure 71: Fenêtre d'installation ...........................................................................................47 Figure 72: Fenêtre d'ouverture .............................................................................................47 Figure 73: L'apparence de PWA dans l’Android .....................................................................47
  • 54. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 54| Oussama ZERRYI ANDALOUSSI2019/2020 LIST DES TABLES Tableau 1: Les information de société...................................................................................10 Tableau 2: Les partenaire de la société BSA CONSEIL.............................................................13 Tableau 3: Comparaissent entre native app, responsive et progressive web app ...................28
  • 55. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 55| Oussama ZERRYI ANDALOUSSI2019/2020 TABLE D’ACRONYMES Api: Application programming interface .......................................................................... 25 COVID: coronavirus disease.................................................................................................3 FSDM: Faculté des Sciences Dhar El Mehraz ...................................................................1 JSON: JavaScript Object Notation ...................................................................................21 MLD: modélisation logique des données .......................................................................21 PWA: Progressive Web Apps ...........................................................................................15 SGBD: Système de gestion de base de données .............................................................22 USMBA: Université Sidi Mohamed Ben Abdellah......................................................47
  • 56. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 56| Oussama ZERRYI ANDALOUSSI2019/2020 WEBOGRAPHIE / BIBLIOGRAPHIE https://www.bsa-conseil.com/ 23-04-2020 https://www.directinfo.ma/fiche-detail/2357043/BSA-CONSEIL 23-07-2020 https://fr.wikipedia.org 02-05-2020 https://developer.mozilla.org/ 15-05-2020 https://getbootstrap.com/ 22-05-2019 https://www.youtube.com/c/TraversyMedia/playlists 23-05-2020 https://dev.mysql.com/doc/refman/5.7/en/json-function- reference.html 24-05-2020 https://database.guide/json_replace-replace-values-in-a-json- document-in-mysql/ 24-05-2020 https://medium.com/aubergine-solutions/working-with-mysql- json-data-type-with-prepared-statements-using-it-in-go-and- resolving-the-15ef14974c48 26-05-2020 https://github.com/dompdf/dompdf 28-05-2020 https://www.restapitutorial.com/ 30-05-2020 https://www.php.net/ 06-06-2020 https://www.opentechguides.com/how- to/article/apache/115/htaccess-file-dir-security.html 15-09-2020 https://help.dreamhost.com/hc/en-us/articles/216363167-How-do-I- deny-access-to-my-site-with-an-htaccess-file- 30-09-2020
  • 57. Faculté des Sciences Dhar El Mehraz - Fès LP - Systèmes d'Information et Génie Logiciel 57| Oussama ZERRYI ANDALOUSSI2019/2020 NB. Ce rapport est joignable d’un CD qui contient les différents documents du projet de la PWA d’audit avec un QR code qui fait référence à le projet, rapport de stage.docx, presentation.ppt. Le lien : https://link.oaz-tech.tk/b
  • 58. ANNEXES 1 LE RAPPORT STATIQUE ELABORER PAR MICROSOFT WORD
  • 62. ANNEXES 2 LE RAPPORT DYNAMIQUE ELABORER PAR LA SOLUTION ; PWA