Année universitaire : 2021/2022

Module : développement d’application web et mobile

« Application web
Gestion du personnels »

Réalisé par :
Encadré par :
Prof. A. MABROUk
Nada ZOUGGARI
Mohamed LOURIKI
Hanae EL HAROUN
Jihane ENNASSIB
 Introduction

La gestion de personnel dans une entreprise hôte pour les raisons de gestion des
congés, de gestion des mutations, d’absences (absence, retards ...).

Nous devons dans un premier temps faire un rappel sur les spécifications
fonctionnelles de notre application et ça sera le cas tout au long de notre travail
comme ça nous mettons toujours devons nos yeux les taches et le problématique que
notre application cherche à optimiser.

Puis nous allons dévoiler l’aspect technique, tout en expliquant les méthodes,
processus et les outils informatiques que nous allons opter à savoirs les choix
technologiques, domaines et hébergement, l’architecture, l’accessibilité, sécurité…

Notre rapport portera aussi sur la conception graphique de notre application, en

mettant la lumière sur les espaces d’administration et de la gestion d’un part et la
charte graphique de notre application de la gestion du personnel d’un autre part.

Partie I : spécifications
 fonctionnelles/techniques

Spécifications fonctionnelles :
Sur cette partie nous allons faire un rappel des principales fonctionnalités de notre
application pour pouvoir bien organiser et choisir les bons moyens et outils que nous
comptons utiliser sur la partie technique afin d’assurer une meilleure optimisation de
ses tâches et de ses fonctionnalités.

 Employés et Services :
Les deux se sont importants dans notre application, ils sont le point de base de la
gestion du personnel.
Alors dans l’interface du notre logiciel, on a faire une page qui contient la liste des
employés, et la liste des services selon les catégories de chaque liste.
*Modification et addition des employés :
Dans cette partie, on peut ajouter un employé selon :
Nom
Prénom
Carte d’identifier
Immatriculation cnss
Fonction
On peut modifier, supprimer ou détailler chaque employé.
* Les services :
Alors dans cette liste on peut aussi modifier, supprimer ou détailler

 Les gestions d’administration du personnel :

À côté de deux listes que nous avons parlé d’eux, l’application peut ajouter les
autres gestions de l’administration du personnel.
Ce dernier s'occupe activement de la relation entre les employés et l'entreprise. Elle
comprend toutes les tâches administratives et de routine relatives au personnel, à
son recrutement, aux éventuelles démissions et à la gestion des traitements et
salaires.
 Alors notre application va faire une autre liste à côté avec l’addition et la
modification et qui contient :
Gestion des permissions et missions
- Affectation
-Mutation
Gestion des congés
- Congé maladie
- Congé maternité
- Congé annuel
Gestion d’assiduité
- Retards
- Absences
- Dépassement de pause

Spécifications techniques :
 Les choix technologiques
FRAMEWORK :
Un Framework désigne un ensemble d’outils et de composants logiciels à la base
d’un logiciel ou d’une application. C’est un cadre de travail qui simplifie les taches
des développeurs informatiques et conditionne le processus de développement en
offrant une architecture prête à l’emploi.
Front End :

Le front-end d'un site web ou d'une application est la partie du site web qui est
visible pour les utilisateurs. Cela inclut la création d'interfaces conviviales et la
présentation efficace des données backend aux utilisateurs. L’un des facteurs
décisifs dans le choix d'un Framework frontal est le type d'application ou de site
web que vous souhaitez créer. Qu’il s'agisse d'une grande application ou d'une
petite application web, le choix du Framework varie considérablement.

 Choix du Framework : Application Frontend

JavaScript :
 JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet
qui, appliqué à un document HTML, peut fournir une interactivité dynamique sur
les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de
la Mozilla Foundation et de la Mozilla Corporation.

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des
carrousels, des galeries d'images, des variations de mises en page et des réponses
aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des
jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des
bases de données et bien plus encore.

 Choix du Framework : Application backend

Laravel :

Laravel se démarque comme étant meilleur que le reste des Frameworks Web PHP.
Il dispose d’outils de développement et de fonctionnalités avancées qui permettent
le développement rapide d’applications web. C’est l’un de ces cadres qui possède
de riches caractéristiques et une flexibilité pour le qualifier de plateforme idéale
pour la création d’applications.

 Langage de programmation :
Le développement d'applications web nécessite la connaissance des différents
langages utilisés dans les technologies web : HTML pour le rendu des pages,
CSS (Cascading Style Sheets) pour les packages graphiques, JavaScript, Java
ou ActionScript pour l'automatisation de l'exécution côté client, et Java,
Langages comme PHP...
PHP :

PHP est un langage de script utilisé le plus souvent côté serveur : dans cette
architecture, le serveur Interprète le code PHP des pages web demandées et génère
du code (HTML, XHTML, CSS ) et des données (JPEG, GIF, PNG ) pouvant être
interprétés et renduspar un navigateur web.
Un serveur Web en architecture trois tiers est composé d'un système d'exploitation,
un serveur HTTP, un langage serveur et enfin un système de gestion de base de
données (SGBD), cela constituant une plate-forme.
Dans le cas de PHP comme langage serveur, les combinaisons les plus courantes
sont celles d'une plateforme LAMP (pour Linux Apache MySQL PHP) et WAMP
(Windows Apache MySQL PHP). Une plate-forme WAMP s'installe généralement
par le biais d'un seul logiciel qui intègre Apache, MySQL et PHP, par exemple
EasyPHP et WampServer. Il existe le même type de logiciels pour les plates-formes
MAMP (Mac OS Apache MySQL PHP), à l'exemple du logiciel MAMP.

HTML :

Le Hypertext Markup Language, généralement abrégé HTML ou, dans sa dernière

 version, HTML5, est le langage de balisage conçu pour représenter les pages web.
XHTML est aussi un langage de balisage servant à écrire des pages pour le World
Wide Web. Conçu à l'origine comme le successeur de HTML, XHTML se fonde
sur la syntaxe définie par XML, plus récente, mais plus simple que celle définie par
SGML sur laquelle repose HTML.

CSS :

CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit
la présentation des documents HTML et XML. Les styles permettent de définir des
règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le
positionnement des éléments, l'alignement, les polices de caractères, les couleurs, les
marges et espacements, les bordures, les images de fond, etc.
Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à
toutes les pages d'un site internet. Cela facilite ainsi la modification de la présentation
d'un site entier. CSS permet aussi de définir des règles différentes pour chaque support
d'affichage (un navigateur classique, une télévision, un support mobile, un lecteur
braille...). CSS permet aussi d'améliorer l'accessibilité des documents web.

Bootstrap :

Bootstrap est une collection d'outils utiles à la création du design 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.
  SGBD
MYSQL :

MySQL est un Système de Gestion de Base de Données (SGBD) parmi les plus
populaires au monde. Il est distribué sous double licence, un licence publique
générale GNU et une propriétaire selon l’utilisation qui en est faites. La première
version de MySQL est apparue en 1995 et l’outil est régulièrement entretenu.
Ce système est particulièrement connu des développeurs pour faire partit des célèbres
quatuors
: WAMP (Windows, Apache, MySQL et PHP), LAMP (Linux) et MAMP (Mac).
Ces packages sont si populaires et simples à mettre en œuvre que MySQL est
largement connu et exploité comme système de gestion de base de données pour des
applications utilisant PHP. C’est d’ailleurs pour cette raison que la plupart des
hébergeurs web proposent PHP et MySQL.

 Qu’est-ce que c’est l’hébergement web ?

L’hébergement web consiste, pour des sociétés spécialisées, à louer à des entreprises
des serveurs (entiers ou divisés) pour que ces dernières puissent héberger leurs sites
et les données associées.
 Les types d’hébergement :
 Hébergement mutualisé
 Hébergement dédié
 Hébergement VPS
 Hébergement CLOUD

Mutualisé :
Un seul serveur pour plusieurs applications. Économique.
Plutôt adapte à petites applications.
Dédié : Votre propre serveur configuré selon vos besoins.
Plus coûteux.
Connaissances techniques nécessaires.
VPS : Service Hybride.
Créer plusieurs serveurs virtuels sur un même serveur réel. Connaissances techniques
nécessaires.
CLOUD : Une multitude de serveurs S’apporte de fortes variations de besoin en bande
passante.
 Hébergement local

Un serveur local permet de faire tourner un site Internet sur son propre ordinateur et
simule au mieux les conditions réelles d’un serveur d’hébergement web. En général
un serveur local est composé d’Apache (ou Nginx) qui traite les requêtes (accès à
une URL), de MySQL pour les bases de données et PHP pour interpréter le code et
générer du HTML.

 Pourquoi choisir l‘hébergement local

Travailler en local ne requiert pas d’internet, on peut créer du faux contenu en local
pour effectuer tous types de tests les plus extrêmes et assurer un bon fonctionnement
du code. Comme si c’était un brouillon du site réel.

WampServer :
WampServer est une plateforme de développement Web de type WAMP, permettant
de faire fonctionner localement (sans avoir à se connecter à un serveur externe) des
scripts [Link] n'est pas en soi un logiciel, mais un environnement
comprenant trois serveurs (Apache, MySQL et MariaDB), un interpréteur de script
(PHP), ainsi que phpMyAdmin Pour l'administration Web des bases MySQL.
Il dispose d'une interface d'administration permettant de gérer et d'administrer ses
serveurs au travers d'un tray Icon (icône près de l'horloge de Windows).

 Architecture de l’application

Une architecture est le modèle fondamental à la bonne réalisation de l’application

web. C’est principalement l’organisation et la structuration de cette dernière. Cela
permet au développeur ou n’importe quelle personne intéressée par la conception et
la création d’un tel logiciel de bien comprendre comment il va fonctionner. Elle va
être composée de tous les éléments fonctionnels, techniques et de codage. Les
architectures diffèrent selon le système informatique. Ici, pour l’application, en
fonction de son type et de ses utilisateurs, l’architecture varie aussi. La plupart du
temps pour représenter les acteurs, les actions, les fonctionnalités et la technique
informatique utilisée dans une application, on utilise une méthode de modélisation
graphique, c’est-à-dire, que l’on va créer un diagramme. En effet, le diagramme de
type UML par exemple, donne une vision globale à son concepteur. Il permet de
bien appréhender le développement d’une telle application. L’architecture est une
ébauche pertinente à la mise en place de votre projet numérique. Elle vous permet
de comprendre les besoins du client à qui va être destiné l’application.
L'architecture client-serveur est très simple et l'une des plus couramment utilisées.
La logique de cette opération est la communication entre les trois parties. La
première est la requête au serveur basée sur la requête du client, puis le HTML est
envoyé au navigateur, qui affiche la page Web au format HTML à l'internaute.
  L’accessibilité :

Si nous devions décrire l'internet en un mot, "diversité" serait certainement un bon

choix. Il y a tant de choses en ligne, tant de navigateurs, de sites web à visiter,
d'applications, d'outils et de contenus de toutes sortes. Toute cette diversité est
excellente pour les utilisateurs, car ils ont toujours plusieurs options pour tout.
Cependant, les développeurs peuvent y voir un défi, car ils doivent créer des sites et
des applications qui fonctionnent sur toutes les combinaisons de navigateurs et de
systèmes d'exploitation. Les tests de navigation des sites web sont indispensables
dans le processus de développement. Et pour s'assurer que la compatibilité n'est pas
un problème et que vous avez développé un site web compatible avec tous les
navigateurs, il est nécessaire d'utiliser des outils de test multi-navigateurs.
Avant de passer à l'étape de test de votre site web avec un outil de test multi-
navigateur, vous devez le développer en tenant compte de la compatibilité. Lors de
la création d'un site web, il convient de garder à l'esprit certains éléments importants
qui augmentent les chances qu'il fonctionne sans problème dans tous les
navigateurs. Consultez les huit conseils que nous avons réunis si vous souhaitez
créer un site web compatible avec tous les navigateurs.

Tout le monde veut que son site web se démarque et attire les visiteurs. Toutefois,
les risques d'erreurs augmentent lorsque le code est complexe et confus. Il est
préférable d'opter pour un design simple, car la tendance en matière de design est
d'utiliser une approche minimaliste. Il est également préférable d'éviter les éléments
imbriqués dans le marquage. Il est préférable d'utiliser "Ul" et "li" dans un menu,
plutôt que d'utiliser un tableau ou plusieurs éléments "p".

 Sécurité :
La sécurité Web, la cybersécurité ou la sécurité des applications Web est le moyen
de protéger les services en ligne et les sites Web contre diverses menaces exploitant
les vulnérabilités associées aux codes d'une application.
Certaines des cibles courantes de ces attaques sont les solutions de gestion de bases
de données telles que phpMyAdmin, les applications SaaS, les systèmes de gestion
de contenu (CMS) comme WordPress, etc.
 La sécurité Web vise à empêcher de telles attaques en refusant l'accès, l'utilisation,
la destruction / perturbation ou la modification non autorisés.
Alors, quelle est la raison pour laquelle les attaquants ciblent largement les
applications Web ?

 Complexité inhérente au code source de l'application, augmentant la

probabilité de vulnérabilités ainsi que la manipulation du code.
 Les applications sont faciles à exécuter ; par conséquent, les attaquants
peuvent facilement lancer ou automatiser la plupart des attaques, ce qui peut
cibler des milliers d'applications à la fois.
Des butins de grande valeur qui incluent des données sensibles et privées via la
manipulation du code source ainsi que des profits financiers.

 Quelques bonnes pratiques de sécurité pour sécuriser les

applications Web :
Utilisation de pare-feu d'applications Web (WAF)
WAF aide à protéger vos applications Web contre les requêtes HTTP
malveillantes. Il place une barrière entre l'attaquant et votre serveur. Il peut protéger
la couche sept contre des menaces telles que XSS, CSRF, injection SQL, etc.

Atténuation des attaques DDoS

Comme son nom l'indique, il est utilisé pour atténuer les attaques DDOS et les
attaques de la couche réseau, sécurisant ainsi les sites Web, les applications et
l'infrastructure des serveurs.
Utiliser HTTPS
HTTPS crypte toutes les données échangées entre le serveur et votre client pour
protéger les identifiants de connexion, les informations d'en-tête, les cookies, les
données de demande, etc.
Donc, si vous avez décidé d'apprendre la sécurité des applications Web, vous
pouvez vous référer aux ressources d'apprentissage suivantes et affiner vos
compétences.

 Glossaire des termes techniques

 Framework : Un Framework est un cadre de travail désigné généralement pour la
simplification le travail des développeurs informatiques.
Laravel : C’est un Framework qui permet de créer des applications web et mobiles.
WAMP (Windows, Apache, MySQL & PHP) :
WAMP désigne l'ensemble des techniques dont on a besoin pour monter un serveur
Web avec les modules nécessaires sur une plate-forme Windows.
SGBD (Système de Gestion de Base de Données) :
Un SGDB (Système de Gestion de Base de Données) est un logiciel qui permet de
faciliter l'exploitation d'une base de données. Il fait office entre l'utilisateur et la base
de données elle-même.
Il existe un grand nombre de SGBD, les plus connus sont: Oracle, MySQL,
PostgreSQL, Microsoft Access, Microsoft SQL Server, Informix, dBase, SQLite.
Langages de programmation :
Langage permettant de formuler des algorithmes et de produire des
programmes informatiques qui appliquent ces algorithmes. Parmi les langages
les plus utilisés, citons par exemple Java, JavaScript, PHP, SQL, J2EE,
HTML, .NET…

Media Queries :
Les Media Queries est un ensemble de techniques proposés par CSS3 qui
permettent de réussir le Responsive Design ou design adaptatif.
AJAX (Asynchronous Javascript And XML) :
AJAX est principalement du Javascript qui évoque un objet spécial nommé
XMLHttpRequest (ou ActiveXObject pour les navigateurs de Microsoft). Combiné
au CSS, XML, JSON... AJAX permet de réussir une interface graphique épatante
dont certaines parties seulement sont rafraîchies suite à l'envoie d'une requête.
Back-End (Partie cachée d'un site ou applicaton Web) :
Le Back-End est la partie d'une application Web qui n'est pas exposée ou peu
exposée aux visiteurs. Pratiquement le Back-End est un ensemble de pages Web
dont l'accès est limité à un certain nombre d'utilisateurs.
C'est aux développeurs Back-End que l'on confie la réalisation de cette partie. Il
doit par conséquent maitriser un ensemble de langages et de technologies comme
 par exemple PHP, Python, NodeJS, SQL...
CGI (Common Gateway Interface) :
CGI ou Interface de Passerelle Commune est un standard qui permet de créer des
pages Web dynamiques reposant sur les programmes CGI. Les programmes CGI
sont des scripts coté serveur écrit en PHP, Perl, Python ou autre.
CGI montre au serveur HTTP comment transmettre la requête du client aux
programmes coté serveur et comment en récupérer les réponses.
Front-End (Partie exposée d'un site ou application Web) :
Le Front-Endest la partie visible d'un site Web par le public. Il s'agit d'un ensemble
de pages Web qui ont été faites par le développeur front-end est qui représentent la
partie frontale ou la partie exposée d'un site Web.

Partie II : Conception graphique de

l’application web/Mobile

 Les espaces et interfaces :

 C’est quoi une maquette :

Une maquette est une représentation partielle ou complète d'un système ou d'un objet
(existant ou en projet) afin d'en tester et valider certains aspects et/ou le
comportement (maquette fonctionnelle), ou simplement à des fins ludiques (maquette
de jeu) ou informatives (présentation pédagogique ou commerciale d'une réalisation
ou d'un projet).
La maquette peut être réalisée en deux ou trois dimensions, à une échelle donnée, le
plus souvent réduite ou agrandie pour en faciliter la visualisation ou la manipulation.
Elle peut être statique ou dynamique, et dans ce dernier cas on parlera alors de
modélisme.
Dans la première interface on trouve l’authentification, le gestionnaire ou le
responsable ressources humaines doit se connecter afin d’avoir le menu.
 Conclusion

Le mauvais choix des méthodes et outils technologique peut mettre en question toutes
les étapes qui restent et même la réalisation de l’application, et étant tonné que nous
somme des débutants nous avons essayé de passer par les méthodes et les outils les plus
simples mais efficaces au même temps pour la réalisation de notre application.
Sur ce rapport nous avons essayé d’éclaircir les étapes suivantes de la réalisation de
notre projet à savoir les choix techniques et les interfaces qu’on va développer, et aussi
de dévoiler la conception graphique et le désigne que nous avons opté pour notre
application.
Plus qu’on avance sur notre projet plus qu’on prend conscience de l’importance de la
communication et le travail d’équipe dans un groupe, aujourd’hui nous avons arrivé à
un stade où nous ne prenons même pas quelque seconde pour se mettre d’accord sur un
choix, le groupe est plus soudé comme jamais ça aide beaucoup et facilite énormément
la tâche, cela signifie qu’avons de chercher le savoir ou même le savoir-faire il faut
bien avoir le savoir être, et comme nous essayons d’apprendre des connaissances et
des techniques il faut parallèlement penser à tirer des valeurs de vie.