Conception Et Réalisation D'une Plateforme Web Et Mobile de Gestion Des Absences

Ministère de l’Enseignement Supérieur
et de la Recherche Scientifique
****
Université de Sousse
****
Ecole Supérieure des Sciences et de la Technologie de Hammam Sousse
Licence Fondamentale en Sciences de l'Informatique

Rapport de Stage de Fin d’Etudes
Conception et réalisation d'une plateforme web et

mobile de gestion des absences
Réalisé par : Moez Baccouche
Soutenu le ../../2018, devant le jury composé de :
Président de jury :
Rapporteur :
Encadrant universitaire : Mme. Kefi Sonia
Encadrant professionnel : Mlle. Ammar Abir
Année Universitaire : 2017-2018

Remerciements
Au terme de ce travail, je tiens à exprimer ma profonde gratitude à mon professeur et

encadrante Madame Sonia Kefi pour son suivi et pour son énorme soutien qu'elle n'a cessé de
me prodiguer tout au long de la période du projet.
Je tiens à remercier également mon encadrante professionnelle Mademoiselle Abir

Ammar et Monsieur Oussama Tekaya de la société Satoripop pour leurs précieux conseils,
informations et motivation qu'ils m'ont fournis et qui m'ont permis de tenir jusqu'au bout pour
réussir ce projet. Avec eux j'ai pu partager leur expertise au quotidien.
J'aimerai remercier tous mes enseignants d'avoir partagé avec nous leur passion pour
l'enseignement. J'ai grandement apprécié leur appui, implication et expérience tout au long de
ma formation.
J'adresse aussi mes vifs remerciements à tous les membres de la société Satoripop
auprès desquels j'ai trouvé l'accueil chaleureux, l'aide et l'assistance dont j'ai besoin, un
environnement dans lequel j'ai pu m'adapter facilement.
Je ne laisserai pas cette occasion passer sans remercier mes collègues de stage Maher
Zaidoun, Moneem Saadaoui et Emer Zarred pour les bons moments passés avec eux et l'aide
qu'ils m'ont fourni pendant cette période de stage.
Je tiens à remercier tous mes amis, avec eux j'ai passé d'agréables moments pendant ces
dernières années, je leur souhaite tout le succès et un avenir brillant.
Enfin, je dédie ce travail à ma chère famille pour tous leurs sacrifices ainsi que le
soutien moral qu'ils m'ont prodigué tout au long de mon cursus scolaire et universitaire.
-i-
Table des matières
Remerciements..................................................................................................................i
Table des matières...........................................................................................................ii
Table des figures..............................................................................................................v
Liste des tableaux..........................................................................................................vii
Acronymes.....................................................................................................................viii
Introduction générale......................................................................................................1
Chapitre 1 : Cadre général du travail...........................................................................3
Introduction...................................................................................................................3
1. Présentation de la société d'accueil.......................................................................3
1.1 Structure sociale de Satoripop.......................................................................3
1.2 Les métiers Satoripop....................................................................................4
1.3 Le système d'absence et des congés de la société Satoripop.........................4
2. Etude de l'existant.................................................................................................5
2.1 Analyse de l'existant...........................................................................................5
2.2 Critique de l'existant...........................................................................................6
2.3 Solution envisagée..............................................................................................6
3. Méthodologie de développement..........................................................................7
3.1 Méthodologie Scrum..........................................................................................7
3.2 Avantages de Scrum............................................................................................7
3.3 Les sprints du projet...........................................................................................8
4. Chronogramme.....................................................................................................9
Conclusion...................................................................................................................10
Chapitre 2 : Analyse et spécification des besoins........................................................11
Introduction.................................................................................................................11
-ii-
1. Identification des acteurs....................................................................................11
2. Besoins fonctionnels...........................................................................................12
2.1 Employé.......................................................................................................12
2.2 Supérieur......................................................................................................12
2.3 Super administrateur....................................................................................12
3. Diagrammes de cas d'utilisation..........................................................................13
3.1 Diagramme de cas d'utilisation général.......................................................13
3.2 Diagramme du cas d'utilisation "Dépôt demande d'absence"......................15
3.3 Diagramme du cas d'utilisation "Gérer demande d'absence"......................17
3.4 Diagramme du cas d'utilisation "Répondre à une demande".......................19
3.5 Diagramme du cas d'utilisation "Gérer équipes".........................................22
3.6 Diagramme du cas d'utilisation "Annuler une demande acceptée".............24
4. Besoins non fonctionnels....................................................................................26
Conclusion...................................................................................................................26
Chapitre 3 : Etude conceptuelle...................................................................................27
Introduction.................................................................................................................27
1. Les patrons de conception...................................................................................27
1.1 Le patron MVC............................................................................................27
1.2 Repository Pattern.......................................................................................28
1.3 Patron de conception MVVM......................................................................29
2. Conception détaillée............................................................................................30
2.1 Diagramme de classes.................................................................................30
2.2 Diagrammes de séquence............................................................................31
Conclusion...................................................................................................................34
Chapitre 4 : Réalisation................................................................................................35
Introduction.................................................................................................................35
1. Le développement Web.......................................................................................35
-iii-
1.1 Technologies utilisées..................................................................................35
1.2 Langages de programmation.......................................................................38
2. Le développement mobile...................................................................................38
2.1 Xamarin............................................................................................................38
2.2 XAML..............................................................................................................39
3. Outils utilisés......................................................................................................39
3.1 Microsoft Visual Studio 2017......................................................................39
3.2 GitKraken....................................................................................................39
3.3 Azure Active Directory................................................................................39
3.4 StarUML......................................................................................................40
4. Interfaces Homme /Machine...............................................................................40
4.1 Super Administrateur...................................................................................40
4.2 Employé.......................................................................................................45
4.3 Supérieur......................................................................................................47
Conclusion...................................................................................................................48
Conclusion générale.......................................................................................................49
Références.......................................................................................................................50
-iv-
Table des figures
Figure 1 : Logo de Satoripop............................................................................................3

Figure 2 : Processus Scrum..............................................................................................7
Figure 3 : Description des sprints sur la plateforme Team Foundation............................9
Figure 4 : Diagramme de Gantt........................................................................................9
Figure 5 : Diagramme de cas d'utilisation général.........................................................14
Figure 6 : Diagramme de cas d'utilisation "Dépôt demande d'absence"........................15
Figure 7 : Diagramme du cas d'utilisation "Gérer demande d'absence"........................18
Figure 8 : Diagramme du cas d'utilisation "Répondre à une demande".........................20
Figure 9 : Diagramme du cas d'utilisation "Gérer équipes"...........................................22
Figure 10 : Diagramme du cas d'utilisation "Annuler une demande acceptée".............24
Figure 11 : Schéma explicatif du patron de conception MVC.......................................28
Figure 12 : Schéma explicatif du Repository Pattern.....................................................29
Figure 13 : Schéma explicatif du patron de conception MVVM...................................29
Figure 14 : Diagramme de classes..................................................................................30
Figure 15 : Diagramme de séquence du cas "S'authentifier".........................................31
Figure 16 : Diagramme de séquence du cas d'utilisation "Dépôt demande d'absence"..32
Figure 17 : Diagramme de séquence du cas d'utilisation "Répondre à une demande"...33
Figure 18 : Diagramme de séquence du cas "Annuler une demande acceptée"............34
Figure 19 : Logo Bootstrap............................................................................................37
Figure 20 : Logo jQuery.................................................................................................37
Figure 21 : Logo C#.......................................................................................................38
Figure 22 : Logo JavaScript...........................................................................................38
Figure 23 : Logo Xamarin..............................................................................................38
Figure 24 : Logo Visual Studio 2017.............................................................................39
Figure 25 : Logo GitKraken...........................................................................................39
Figure 26 : Logo Azure Active Directory.......................................................................40
Figure 27 : Interface d'authentification..........................................................................40
Figure 28 : Interface Tableau de bord (Admin)..............................................................41
Figure 29 : Interface Statistiques (Admin).....................................................................41
Figure 30 : Interface Liste des employés........................................................................42
-v-
Figure 31 : Interface Liste des équipes...........................................................................42
Figure 32 : Interface Liste des types d'absence..............................................................43
Figure 33 : Email de la demande reçu par l'administrateur............................................43
Figure 34 : Interface Liste des demandes reçues (Admin).............................................44
Figure 35 : Email réponse à la demande d'un employé..................................................44
Figure 36 : Interface Historique de toutes les demandes validées (Admin)...................45
Figure 37 : Interface Tableau de bord (Employé)...........................................................45
Figure 38 : Interface Profil.............................................................................................46
Figure 39 : Interface Dépôt demande d'absence.............................................................46
Figure 40 : Email Confirmation dépôt demande d'absence............................................47
Figure 41 : Interface « Equipe ».....................................................................................47
Figure 42 : Interface Statistiques équipe........................................................................48
-vi-
Liste des tableaux
Tableau 1 : Tableau comparatif entre la solution actuelle et la solution envisagée..........6

Tableau 2 : Tableau des sprints du projet.........................................................................8
Tableau 3 : Tableau descriptif du cas d'utilisation "Dépôt demande d'absence"............17
Tableau 4 : Tableau descriptif du cas d'utilisation "Annuler demande"........................19
Tableau 5 : Tableau descriptif du cas d'utilisation "Accepter demande"........................22
Tableau 6 : Tableau descriptif du cas d'utilisation "Créer équipe".................................24
Tableau 7 : Tableau descriptif du cas d'utilisation "Annuler une demande acceptée".. .25
Tableau 8 : Tableau comparatif entre ASP .NET Core et ASP .NET MVC 5................36
Tableau 9 : Tableau justificatif du choix MySQL face à SQL Server............................36
-vii-
Acronymes
API : Application Programming Interface

CSS : Cascading Style Sheets
HTML : HyperText Markup Language
IIS : Internet Information Services
IOT : Internet Of Things
MVC : Model-View-Controller
MVVM : Model-View-ViewModel
SEO : Search Engine Optimization
SEM : Search Engine Marketing
UML : Unified Modeling Language
XAML : Extensible Application Markup Language
-viii-
Introduction générale
Dans toute entreprise, chaque employé, de l'agent salarier au cadre supérieur, est
susceptible de s'absenter pour des raisons diverses et pour des durées plus ou moins longues.
Des absences pour des raisons familiales comme le mariage, la naissance ou le décès, ou pour
des raisons de santé liées à la maladie ou aux accidents.
Pour chaque type d'absence, l'entreprise se doit de préciser les conditions préalables
pour qu'un employé puisse bénéficier d'un congé conformément aux lois en vigueur.
Dans ce contexte, plusieurs entreprises recourent encore aux méthodes traditionnelles

de dépôt de demandes d'absence rédigées sur papier et de répertoriage de centaines voire de
milliers de documents personnels des employés dans des boites d'archives exposées à des
incidents tels que le vol ou la destruction.
Malgré le fait que cette solution puisse répondre au besoin principal de l'employé qui
est de déposer sa demande d'absence, elle risque quand même de poser de nombreux
inconvénients pour l'administration ainsi que pour les supérieurs spécialement, des
inconvénients tels que la difficulté de gestion de ces demandes sans oublier les incidents cités
plus haut qui risquent d'endommager les documents personnels de l'effectif de la société.
Pour remédier à ce problème et essayer de répondre aux exigences des employés et des
supérieurs de la société Satoripop, cette dernière projette de mettre en service une application
web ainsi qu'une application mobile pour avoir un meilleur contrôle sur les demandes
d'absence et éviter d'utiliser les documents en papier pour au final rendre le processus de
bénéfice de congé simple et rapide
Ce rapport présente tout le travail que nous avons réalisé au cours de ce projet, il est
constitué de quatre chapitres.
Le premier chapitre présentera le cadre général du travail au sein duquel le projet a
été réalisé, notre étude préalable et la méthodologie utilisée.
-1-
Le deuxième chapitre comportera l’analyse et la spécification des besoins et une
description approfondie des différentes fonctionnalités de notre projet.
Le troisième chapitre présentera l'architecture de notre projet et on décrira les

principes de la solution en utilisant le langage UML.
Le quatrième chapitre sera consacré à la description de l'environnement de travail,

l'explication technique du fonctionnement de notre application avec ses principaux
aperçus graphiques.
Pour finir, on aura une conclusion générale dans laquelle on récapitulera tout le travail
réalisé.
-2-
Moez Baccouche Chapitre 1 : Cadre générale du travail
Chapitre 1 : Cadre général du travail
Introduction
Ce chapitre présentera, tout d'abord, l'entreprise hôte dans laquelle le projet a été réalisé,
on donnera, ensuite, une meilleure idée sur ce dernier et on le comparera avec la solution
utilisée actuellement.
1. Présentation de la société d'accueil

Satoripop est une société à responsabilité limitée basée à Sousse qui compte entre 50 et
100 employés, spécialisée dans le développement des applications web et des applications
mobiles.
Satoripop engage des employés hautement qualifiés, dans leurs domaines respectifs et
qui sont passionnés par leur travail.
Elle possède des clients dans différents domaines tels que la finance, E-Commerce,
logistique et bien d'autres secteurs. Ses clients sont de divers pays dans le monde entier.
Figure 1 : Logo de Satoripop
2. Structure sociale de Satoripop

Satoripop se distingue de beaucoup d'autres entreprises par sa structure qui cherche à
favoriser l'esprit d'équipe et à réduire les niveaux hiérarchiques dans le but d'assurer une
meilleure entente entre les employés et améliorer leur environnement de travail.
Satoripop possède quatre cellules dont chacune est responsable d'un service et emploie
un personnel très compétent. Ces cellules sont les suivantes :
-3-
Moez Baccouche Chapitre 1 : Cadre générale du
travail
 Département de développement : Ce département comporte une vingtaine de

personnes qualifiées dans diverses technologies de développement chargées de réaliser
des projets de haute qualité pour satisfaire les clients nationaux et internationaux.
 Département Web Marketing : Constitué d'employés qui sont en charge de la
commercialisation via internet.
 Département design : Regroupe un ensemble d'employés qui sont responsables de la
création des maquettes et chartes graphiques innovantes.
 Département commercial : Constitué de personnel en charge de la gestion
commerciale de l'entreprise.
3. Les métiers Satoripop

Il existe plusieurs métiers dans la société Satoripop dont par exemple :
 La création des sites Web : L'objectif principal de Satoripop est de réaliser un site
web adapté aux exigences. Selon une méthodologie basée sur l'écoute et le conseil.
 La création des applications mobiles : Satoripop fournit aussi des services dans le
développement mobile tel que des applications natives1 mais aussi des applications
hybrides2.
 Le référencement et le positionnement : La réussite d'un site web est hautement
couplée à son référencement et à son positionnement. Ceci est réalisé grâce au service
SEO (1) qui permet d'assurer une meilleure visibilité du site ainsi que le service SEM
(2) qui assure un meilleur référencement aux sites web par une optimisation par des
mots clés donnés.
4. Le système d'absence et des congés de la société Satoripop
1.3.1 Les types d'absence

Il existe différents types d'absence :
 Congé payé : Chaque employé possède un solde de congé payé qui commence à s'in-
crémenter de 1,75 jours au début de chaque mois à partir de son deuxième mois de tra-
vail. L'employé de Satoripop bénéficie aussi d'un solde de congé en rouge de 5 jours
maximum.
1
Une application mobile qui est développée spécifiquement pour un des systèmes d’exploitation utilisé par les Smartphones et tablettes
(IOS, Android, etc.).
2
Une application développé à partir des langages web (HTML, CSS, JavaScript, ...) en s'appuyant aussi sur les technologies natives mobiles
pour utiliser certaines fonctionnalités du Smartphone.
-4-
travail
 Congé de maladie : : L'employé de Satoripop possède un solde de congé de maladie

de 5 jours renouvelables après chaque année de travail. Ce type d'absence ne nécessite
pas une validation.
 Congé sans solde : Chaque employé a le droit de déposer une demande d'un congé
sans solde.
 Autorisation de sortie : Un employé a le droit de demander deux autorisations de sor-
tie par mois, d'une durée ne dépassant pas les 2 heures qu'il doit obligatoirement récu-
pérer. Si à la fin du mois le nombre d'heures non récupérées atteint 4 heures, une demi
journée sera retirée de son solde de congé payé.
 Congé spécial : Ce type d'absence ne nécessite pas une validation et ne décrémente
pas le solde de congé du demandeur (mariage, naissance, décès, etc.)
1.3.2 Les systèmes des jours fériés

Chaque employé suit un système de jours fériés :
 Système tunisien : Un employé qui suit le système tunisien bénéficie des jours fériés
précisés par les lois tunisiennes.
 Système français : Un employé a le droit de suivre le système des jours fériés

précisés par les lois françaises s'il interagit majoritairement avec des clients français.
5. Etude de l'existant
Cette étape est l'une des principales étapes lors de la réalisation d'un projet. Elle nous a
permis d'identifier les points faibles de la solution actuelle pour pouvoir y pallier et concevoir
une application qui répond aux besoins de ses utilisateurs en offrant des fonctionnalités plus
riches et plus développées qui permettront à l'utilisateur une utilisation simple et fluide.
2.1 Analyse de l'existant

Le dépôt des demandes d'absence par un employé ainsi que leur gestion par un
supérieur devraient être des tâches simples à réaliser, or ce n'est pas le cas avec la solution
utilisée actuellement au sein de la société Satoripop, car pour déposer leurs demandes les
employés sont obligés de se présenter au local de la société, remplir et signer les formulaires
nécessaires, ce qui n'est guère possible dans certaines situations.
D'autre part, les informations qui concernent les employés telles que leur solde de
jours de congé sont répertoriées seulement sur papier dans des boites d'archives vulnérables à
plusieurs types d'aléas suite auxquels elles seront endommagées et deviendront totalement
inutilisables.
-5-
travail
En plus et comme exemple, si un employé souhaitait consulter son solde de congé, il

devrait le demander auprès de la personne chargée de ces documents, situation qui peut
parfois provoquer quelques inconvénients dans la société surtout lorsque celle-ci comporte un
nombre relativement élevé d'employés.
2.2 Critique de l'existant

Bien que le dépôt et la gestion des demandes d'absence soient possibles et faisables avec
la solution actuelle, cette dernière devrait être remplacée par une application qui comblera les
points faibles suivants :
 Les informations personnelles des employés ne sont pas sécurisées
 L'employé est dans l'obligation de demander à la personne en charge des documents de
pouvoir consulter les informations le concernant comme le solde de congé restant.
 Manque de notification en cas d'accord ou refus de la demande.
 Gestion des demandes lente et fastidieuse.
 Manque d'autonomie.
2.3 Solution envisagée

Nous avons pris en considération les défauts de la méthode existante et nous allons
présenter notre solution qui devrait répondre aux besoins des employés et leurs supérieurs et
qui, en plus, possède plusieurs fonctionnalités utiles.
La comparaison entre la solution envisagée et la solution actuelle est décrite dans le
tableau 1 suivant :
Solution Actuelle Notre solution
Critère
Autonomie ✖ ✔
Rapidité ✖ ✔
Consulter ses informations à ✖ ✔
temps réel
Meilleure vue d'ensemble sur ✖ ✔
l'état des employés
Meilleure gestion des ✖ ✔
demandes
Sécurité ✖ ✔
-6-
travail
Tableau 1 : Tableau comparatif entre la solution actuelle et la solution envisagée

En effet, le projet que nous souhaitons réaliser est une plateforme web et mobile offrant
aux employés et aux cadres de Satoripop la possibilité d'effectuer des demandes d'absence
selon différents types et d'améliorer leur gestion et par conséquent rendre le processus de
dépôt et de validation des demandes d'absences plus simple et plus rapide.
Les objectifs de notre plateforme sont :

 Rapidité : Les demandes et leurs validations seront traitées rapidement.
 Autonomie : Les employés pourront consulter leurs informations et déposer leurs de-
mandes sans avoir besoin de demander au personnel en charge des documents.
 Disponibilité : Notre application se déclinera en une version web ainsi qu'une version
mobile qui sera supportée par les trois plateformes IOS, Android et Windows Phone.
 Centralisation : Toutes les données seront stockées dans une base de données et gé-
rées d'une manière centralisée.
6. Méthodologie de développement
3.1 Méthodologie Scrum
Scrum est une méthode dédiée à la gestion de projets de développement de produits
complexes (3). Ce Framework s'appuie sur le découpage d'un projet en boîtes de temps
nommées Sprints. Ces sprints peuvent durer entre quelques semaines et un mois.
Chaque sprint commence par une estimation suivie d'une planification opérationnelle.
Le sprint se termine par une démonstration de ce qui a été achevé.
La figure 2 suivante décrit le processus de fonctionnement de la méthode Scrum.
Figure 2 : Processus Scrum
-7-
travail
3.2 Avantages de Scrum

La méthode Scrum assure plusieurs avantages :
 Compréhension du travail et des tâches à accomplir : La fragmentation du projet
en plusieurs petites parties réalisables nous oblige à nous demander si toutes les tâches
doivent vraiment être effectuées pour mener à bien notre projet.
 Transparence : Scrum exige de la transparence. Les membres de l'équipe doivent
savoir ce que les autres accomplissent et le résultat qu'ils peuvent en attendre.
 Deadlines intégrées : Comme le projet est subdivisé et que des tâches très
spécifiques peuvent être attribuées aux membres de l'équipe, on intègre chaque jour
des échéances pour évaluer l'avancement des uns et des autres. Cela implique que tout
le monde doit assumer ses responsabilités.
 Visibilité continue : Travailler de manière efficace et maligne n'est possible que si
nous conservons une vue d'ensemble est restons organisés.
3.3 Les sprints du projet

Dans notre projet, nous avons cinq principaux sprints décrits dans le tableau 2.
Sprint Description
- Ajout / modification / suppression d'un employé.
Sprint N°1 - Ajout / modification / suppression d'un type d'absence.
- Ajout / modification / suppression d'une équipe.
- Réaliser l'authentification et l'incrémentation automatique du solde de congé.
Sprint N°2 - Déposer une demande.
- Affichage de toutes les demandes d'un employé.
- Affichage des membres de l'équipe.
Sprint N°3 - Affichage des demandes reçues par les membres de l'équipe.
- Répondre à une demande.
- Affichage de tous les employés de la société.
Sprint N°4 - Affichage des demandes de tous les employés.
- Répondre aux demandes de tous les employés.
- Statistiques.
Sprint N°5 - Calendrier absences.
Tableau 2 : Tableau des sprints du projet
-8-
travail
Tous ces sprints sont décrits et définis sur la plateforme Microsoft Team Foundation
dans laquelle on peut préciser les tâches à effectuer et le temps nécessaire en heures pour
chaque sprint comme le montre la figure 3 suivante.
Figure 3 : Description des sprints sur la plateforme Team Foundation
7. Chronogramme
Les différentes étapes de réalisation de ce projet, ainsi que la période de rédaction du
rapport pendant la durée du stage de 2 mois qui s'étend du 14 Mars jusqu'au 14 Mai sont
représentées par le diagramme de Gantt de la figure 4.
-9-
travail
Figure 4 : Diagramme de Gantt
Conclusion
On a mentionné les inconvénients de la solution utilisée actuellement pour permettre le
dépôt et la gestion des demandes de congés des employés de Satoripop et ceci afin de réaliser
une application riche en fonctionnalités et qui répond à toutes les exigences demandées.
Le chapitre suivant permettra de détailler avec plus de précision le projet qu'on va
réaliser en décrivant les différents acteurs, les rôles et les actions qu'ils vont réaliser en
interagissant avec l'application.
-10-
Moez Baccouche Chapitre 2 : Analyse et spécification des besoins
Chapitre 2 : Analyse et spécification des besoins
Introduction
L'étude de la solution existante et l'analyse de ses multiples défauts nous ont conduit à
dégager plusieurs idées de fonctionnalités qui pourront sans doute améliorer la situation
actuelle de la société et faciliteront le processus de prise de congé non seulement pour
l'employé mais aussi pour le validateur.
Durant ce chapitre, nous allons tout d'abord commencer par définir les acteurs qui vont
utiliser notre application ainsi que leurs tâches. On le clôturera en indiquant les besoins non
fonctionnels que le système doit assurer pour avoir une application qui répond aux attentes de
ses utilisateurs.
1. Identification des acteurs

L'application sera utilisée par trois acteurs principaux qui sont les suivants :
⦁ Employé : C'est une personne qui travaille au sein de la société Satoripop. Il aura
accès à l'application web et mobile pour consulter son solde de congé, déposer sa demande
d'absence et pourrait aussi parcourir son historique d'absences et ses statistiques.
⦁ Supérieur : C'est un employé de Satoripop qui gère une équipe d'employés. D'une
part, il pourrait lui aussi déposer une demande et d'autre part, il doit répondre aux
demandes d'absence des membres de son équipe.
⦁ Super administrateur : C'est une personne qui doit gérer l'intégration de tous les
employés dans l'application et la création des équipes. Il possède les mêmes droits que le
supérieur mais sur toutes les équipes et peut formuler une demande pour n'importe quel
employé. Il possède aussi les mêmes droits qu'un employé et peut donc déposer une
demande pour lui même qui sera validée par un autre administrateur.
-11-
2. Besoins fonctionnels
La plateforme assure à ses utilisateurs de nombreuses fonctionnalités :
2.1 Employé
▷ Déposer une demande d'absence : Pour déposer sa demande, l'employé doit
indiquer le type d'absence et la période durant laquelle il s'absentera
▷ Gérer sa demande : Après émission de la demande et avant validation, l'employé
a la possibilité de :
- Modifier sa demande
- Annuler sa demande
▷ Accéder à son profil : En accédant à son profil l'employé pourra :
- Consulter son solde de congé
- Afficher ses informations personnelles.
▷ Afficher le suivi des demandes en cours
2.2 Supérieur
Le supérieur hérite des mêmes fonctionnalités que l'employé mais possède d'autres
prérogatives, notamment :
▷ Gérer les demandes d'absence : Le supérieur reçoit les demandes émises par les
membres de l'équipe qu'il gère, il peut dans ce cas :
- Accepter la demande
- Rejeter la demande
- Joindre un commentaire motivant sa réponse
▷ Consulter le solde de congé des membres de son équipe
▷ Afficher un calendrier du planning d'absences de son équipe : En accédant à ce
calendrier le supérieur aura une vue d'ensemble sur les absences de ses employés qui l'aidera à
mieux prendre ses décisions et suivre l'état de son équipe en temps réel.
2.3 Super administrateur

Le super administrateur de l'application hérite des droits de l'employé et s'occupera
aussi de :
-12-
▷ Paramétrer les types d'absence :

- Ajouter un nouveau type d'absence
- Supprimer un type d'absence
-Modifier un type d'absence : Il pourra modifier les attributs du type comme
par exemple le nom du type ou le nombre de jours autorisés.
▷ Gérer les équipes :
- Ajouter une équipe
- Supprimer une équipe
- Modifier une équipe : Le super administrateur pourra dans ce cas modifier le
nom de l'équipe, intégrer un nouveau membre, supprimer un membre ou bien définir le
supérieur de l'équipe.
▷ Gérer les demandes :
▽ Déposer une demande d'un employé quelconque
▽ Accepter une demande
▽Refuser une demande
▽Annuler une demande déjà acceptée mais qui au final ne s'est pas
concrétisée
▷ Afficher le calendrier des absences de tous les employés de la société
3. Diagrammes de cas d'utilisation

Les diagrammes de cas d'utilisation capturent le comportement d'un utilisateur avec le
système. Ils permettent d'exprimer les besoins des utilisateurs d'un système.
C'est une étape qu'il ne faut pas négliger pour concevoir une application conforme aux
attentes des utilisateurs.
3.1 Diagramme de cas d'utilisation général

La figure 5 suivante montre le diagramme de cas d'utilisation général de l'application.
-13-
Figure 5 : Diagramme de cas d'utilisation général
-14-
3.2 Diagramme du cas d'utilisation "Dépôt demande d'absence"

La figure 6 suivante montre le cas d'utilisation "Dépôt demande d'absence" destiné à
l'employé, supérieur et l'administrateur.
Figure 6 : Diagramme du cas d'utilisation "Dépôt demande d'absence"
Le tableau 3 suivant décrit en détail le cas d'utilisation "Dépôt demande d'absence".

Sommaire d'identification
Titre :
Dépôt demande d'absence
Résumé :
Chaque utilisateur a le droit de déposer sa demande d'absence pour qu'elle soit
validée par le supérieur si le demandeur est un employé et un administrateur si le
demandeur est un supérieur ou un administrateur.
Acteurs :
- Employé
- Supérieur
- Super administrateur
Pré-Condition :
- Authentification réussie
- Accès à l'interface de dépôt des demandes
-15-
Post-Condition :
- Un Email de confirmation de dépôt sera transmis à l'employé
- Un Email contenant les informations de la demande sera transmis au supérieur
de l'employé ainsi qu'à l'administrateur.
- Un message s'affiche informant l'employé que sa demande a été bien envoyée.
- L'employé sera redirigé vers l'interface des demandes personnelles en cours de
traitement.
Enchainements nominaux
Action de l'acteur Réactions du système
1 - Demande l'interface de dépôt de

la demande
2 - Affiche le formulaire correspon-

dant avec les champs vides.
3 - Remplit soigneusement le formu-

laire de dépôt de la demande
4 - Appuie sur le bouton envoyer
5 - Vérifie que les champs ont été bien

remplis
6 - Calcul à partir des dates de début

et de fin de congé saisies le nombre de
jours demandés.
7 - Vérifie que le solde de congés est

supérieur ou égal au nombre de jours
demandés.
8 - Insère dans la base de données les

informations de la demande d'ab-
sence.
9 - Transmet un Email de confirma-

tion de dépôt au demandeur et un
Email contenant les informations de la
demande aux validateurs.
10 - Affiche un message de confirma-

tion de dépôt à l'employé
11 - Redirige l'employé vers la page
-16-
contenant ses demandes en attente.
Enchainement alternatif :
A1 : Si l'employé n'a pas bien rempli le formulaire :
a. Le système lui affiche un message d'erreur.
b. Le système lui affiche le formulaire de nouveau.
A2 : Si le solde est insuffisant.

a. Le système affiche un message informant l'employé que son solde est in-
suffisant.
b. Le système affiche le nombre de jours que l'employé peut demander.
A3 : Si le type d'absence demandée est un congé sans solde :

a. Le système ne vérifie pas le solde de congés de l'employé.
b. Le système continue à partir de l'étape 8.
A4 : Si le type d'absence demandée est un congé de maladie :

a. Le système vérifie si le total entre le solde de congé et le nombre de jours
de maladie restants de l'employé est supérieur ou égal au nombre de jours deman-
dés.
c. Le système continue à partir de l'étape 8.
Enchainement Erreur :
E1 : Si la connexion avec la base de données est interrompue :
Le cas d'utilisation se termine par un échec.
Tableau 3 : Tableau descriptif du cas d'utilisation "Dépôt demande d'absence"
3.3 Diagramme du cas d'utilisation "Gérer demande d'absence"

Le système permet à l'utilisateur de modifier ou d'annuler sa demande après dépôt et
avant qu'elle soit validée. La figure 7 suivante montre le diagramme de ce cas d'utilisation.
-17-
Figure 7 : Diagramme du cas d'utilisation "Gérer demande d'absence"

La description détaillée du cas d'utilisation "Annuler demande" est présente dans le
tableau 4.
Titre : Annuler demande
Résumé : Pour chaque utilisateur, il est possible d'annuler sa demande après son
émission et avant qu'elle soit validée.
Acteur :
- Supérieur
- Employé
Pré-condition :
- Authentification réussie.
- Accès à l'interface des demandes en attente.
Post-condition :
- Un message affirmant le succès d'annulation de la demande sera affiché.
Enchainements nominaux
Action de l'acteur Réaction du système
-18-
1 - Demande l'interface des demandes

en attente.
2 - Affiche le tableau des demandes

en attente.
3 - Choisit l'action Annuler
4 - Affiche une boîte de dialogue de

confirmation à l'employé pour qu'il
valide son choix d'annulation.
5- Appuie sur le bouton Confirmer
6 - Supprime de la base de données la

demande de l'employé.
7 - Affiche un message confirmant

l'annulation de la demande
8 - Actualise la page.
Tableau 4 : Tableau descriptif du cas d'utilisation "Annuler demande"
3.4 Diagramme du cas d'utilisation "Répondre à une demande"

Le supérieur de l'équipe a le droit de répondre aux demandes des membres de son
équipe, le super administrateur exerce ce droit sur tous les employés de la société. La figure 8
décrit le diagramme de ce cas d'utilisation.
-19-
Figure 8 : Diagramme du cas d'utilisation "Répondre à une demande"
Le tableau 5 suivant décrit en détail le cas d'utilisation "Accepter demande".

Titre : Accepter demande
Résumé : Le supérieur peut, en accédant à l'interface des demandes en attente,

afficher et répondre aux demandes non encore validées des membres de son
équipe. Quant au super administrateur il a le droit de voir et de répondre aux de-
mandes de tous les employés de la société.
Acteur :
- Supérieur
Pré-condition :
- Accès à l'écran des demandes en attente.
Post-condition :
- Envoi d'un Email au demandeur contenant la réponse de son supérieur.
- Envoi d'un Email au supérieur (et à l'administrateur si le validateur est un supé-
rieur) l'informant de la transmission de sa réponse.
- Un message s'affichera informant l'acteur que sa réponse a été émise avec suc-
cès.
- La page sera actualisée.
Enchainements nominaux :
-20-
1- Demande l'interface des demandes

en attente
2- Affiche les demandes en attente.
3- Choisit d'accepter la demande
4- Affiche une boite de dialogue de-

mandant la confirmation de l'acteur.
5- Appuie sur Confirmer
6- Affiche une boite de dialogue don-

nant la possibilité à l'acteur de saisir
un commentaire motivant sa réponse.
7- Saisit un commentaire
8- Décrémente le solde de congé du

demandeur avec le nombre de jours de
congé demandé
9- Met à jour la demande dans la base

de données avec le statut "Acceptée"
et le commentaire de l'acteur.
10- Transmet un Email contant la ré-

ponse et un résumé de la demande au
demandeur et à l'acteur qui a accepté
la demande (à l'administrateur si le
demandeur est un supérieur ou un ad-
ministrateur).
11- Affiche un message informant

l'acteur que son action a été effectuée
avec succès.
12- Actualise la page.
A1: Si le type d'absence demandée est un congé de maladie et que l'acteur la va-
-21-
lide :
a. Le système décrémente le nombre de jours de maladie restant du solde de

congé de l'employé.
A2 : Si le nombre de jours demandé dépasse le nombre de jours de maladie res-

tant
a. le système retire du solde de congé payé la différence.
b. Le système continue à partir de l'étape 9.
Tableau 5 : Tableau descriptif du cas d'utilisation "Accepter demande"
3.5 Diagramme du cas d'utilisation "Gérer équipes"

La figure 9 montre le diagramme du cas d'utilisation "Gérer équipe" destiné à
l'administrateur de l'application qui aura le droit de créer des équipes, de les modifier ou de
les supprimer.
-22-
Figure 9 : Diagramme du cas d'utilisation "Gérer équipes"
La description détaillée du cas d'utilisation "Créer équipe" est donnée par le tableau 6
suivant.
Titre: Créer équipe
Résumé : Le super administrateur de l'application a le droit de créer une nouvelle équipe,

de lui attribuer un nom, un manager et de désigner les employés qui l'a composent.
Acteur :
Pré-condition :
- Accéder à l'interface Equipes.
Post-condition :
- Affichage d'un message informant le super administrateur que son action a été effectuée
avec succès.
1- Demande l'interface d'ajout d'une nou-

velle équipe
2- Affiche le formulaire d'ajout d'une

équipe.
3- Remplit soigneusement le formulaire
4- Vérifie que les champs sont bien rem-

plis.
5- Appuie sur le bouton Ajouter
6- Vérifie que l'équipe n'est pas déjà exis-

tante.
7- Insérer l'équipe dans la base de don-

nées.
8- Afficher un message au super adminis-

trateur l'informant que l'ajout de l'équipe a
-23-
été effectué avec succès.
A1 : Si l'employé n'a pas bien rempli le formulaire :
a. Le système lui affiche un message d'erreur.
b. Le système lui affiche le formulaire de nouveau.
A3: Si l'équipe est déjà existante :

a. Le système affiche un message d'erreur au super administrateur.
Le cas d'utilisation se termine par un, échec.
Tableau 6 : Tableau descriptif du cas d'utilisation "Créer équipe"
3.6 Diagramme du cas d'utilisation "Annuler une demande acceptée"

Le super administrateur de l'application a le droit d'annuler une demande déjà acceptée
mais qui n'a pas encore été concrétisée. La figure 10 suivante montre le diagramme de ce cas
d'utilisation.
Figure 10 : Diagramme du cas d'utilisation "Annuler une demande acceptée"
La description détaillée de ce cas d'utilisation est donnée par le tableau 7 suivant.

Titre : Annuler une demande acceptée
Résumé : Le super administrateur a la possibilité d'annuler la demande d'un em-

ployé acceptée mais qui n'a finalement pas été concrétisée et de rajouter les jours
-24-
substituées au solde de l'employé.
Acteur :
Pré-condition :
- Authentification réussie
- Accéder à l'interface des demandes validées.
Post-condition :
- Affichage d'un message informant l'acteur que la demande a été annulée.
- Envoi d'un email à l'employé pour l'informer que les jours substitués ont été ra-
joutés à son solde de congé.
1- Demande l'interface des demandes

validées.
2- Affiche les demandes validées de

tous les employés de la société.
3- Choisit la demande à annuler.
4- Affiche une boite de dialogue pour

que l'acteur confirme l'annulation.
5- Appuie sur le bouton Confirmer.
6- Incrémente le solde de l'employé

par le nombre de jours notifiés dans la
demande.
7- Supprimer la demande de la base

de données
8- Transmet un Email à l'employé l'in-

formant que son solde de congé a été
mis à jour.
9- Affiche un message au super admi-

nistrateur pour l'informer que l'annu-
lation de la demande a été effectuée
avec succès.
-25-
Tableau 7 : Tableau descriptif du cas d'utilisation "Annuler une demande acceptée"
4. Besoins non fonctionnels

Notre application doit assurer plusieurs besoins non fonctionnels pour fournir une
meilleure expérience d'utilisation à ses différents acteurs. Ces besoins sont les suivants :
 Ergonomie : Notre solution doit présenter des interfaces simples à utiliser,
guidées et conviviales qui permettent à l'utilisateur de réaliser ses tâches sans la
moindre difficulté.
 Sécurité : Les informations personnelles des employés de la société sont
confidentielles et doivent être protégées contre tous les types de menaces.
 Performance : La plateforme doit être performante à travers ses fonctionnalités.
De plus, elle doit garantir un temps d'exécution minimal.
Conclusion
Dans ce chapitre on a identifié les différents acteurs qui vont utiliser notre application,
détaillé tous les besoins fonctionnels et non fonctionnels qu'elle doit assurer et présenté les
interactions qui auront lieu entre l'acteur et le système.
Le chapitre suivant sera consacré à la phase de conception de l'application.
-26-
Moez Baccouche Chapitre 3 : Etude conceptuelle
Chapitre 3 : Etude conceptuelle
Introduction
Dans le chapitre précédent nous avons précisé les fonctionnalités de notre application,
les acteurs qui vont l'utiliser ainsi que leurs interactions avec le système et sa réaction suite à
chaque action possible. Nous arrivons maintenant à l'une des étapes les plus importantes lors
du développement d'une application qui est la conception. Dans cette étape nous allons
commencer par présenter les patrons de conceptions utilisés ainsi que les diagrammes de
classes et séquences.
1. Les patrons de conception

Un patron de conception est une notion s'appuyant sur le développement logiciel.
L'objectif principal (4) issu de l'utilisation d'un patron de conception est de représenter un
schéma reconnu comme étant une convention ou bonne pratique à suivre, afin de répondre
efficacement à un problème récurrent, diminuer le délai de développement logiciel et
améliorer la présentation du code.
1.1 Le patron MVC

MVC signifie Model-View-Controller (Modèle-Vue-Contrôleur), c'est l'un des patrons
de conception les plus répandus aujourd'hui pour la création des sites web et il a été lancé
depuis l'année 1978 (5). Il s'agit d'une méthodologie décrite par les développeurs comme
étant une solution utile pour la réutilisation du code et qui réduit considérablement le temps
nécessaire pour développer des applications avancées.
Ainsi, le modèle MVC, était utilisé au début pour développer des clients lourds 3 mais
grâce à sa puissance il a été adopté aussi pour le développement des applications web (clients
légers4).
Ce patron de conception répond aux besoins des applications interactives (6) en séparant
les problématiques liées aux différents composants au sein de leur architecture respective.
Ses trois principaux composants sont les suivants :
3
Un logiciel installé sur les ordinateurs des utilisateurs. Le traitement métier des données se fait au niveau de la machine de l’utilisateur.
4
Une application installée sur un serveur Web et les utilisateurs n’ont besoin que d’un navigateur internet pour pouvoir accéder à l’ensemble
des services.
-27-
 Modèle : Représente la structure logique des données dans une application logicielle. En
général, ces données sont représentées par un ensemble de classes permettant d'accéder à
une base de données mais peuvent également être stockées dans des fichiers.
 Vue : Se charge d'afficher et de mettre en forme les données du modèle qui lui sont
transmises.
Une vue correspond à une route donc à une action du contrôleur.
 Contrôleur : Le contrôleur est le point d'entrée de l'application: c'est lui qui reçoit la
requête du client.
Il fait également la liaison entre la vue et le modèle, il s'occupe de réaliser les interactions
entre l'entrée dans l'application, détermine la page que l'utilisateur attend, récupère les
données du modèle et les transmets à la vue qui les affichera.
La figure 11 suivante décrit le principe de fonctionnement du patron de conception

MVC.
Figure 11 : Schéma explicatif du patron de conception MVC
2. Repository Pattern
Dans beaucoup d'applications, l'accès direct à la base de données peut receler un
ensemble d'inconvénients tels que la répétition du code, un potentiel plus élevé d'erreurs de
programmation, un faible typage des données métiers et une incapacité à tester facilement la
logique métier.
Le Repository Pattern permet d'éviter ces inconvénients grâce à l'abstraction entre la
couche d'accès aux données et la couche de logique métier (7).
Il récupère les données à partir de la source, mappe ces données de la source à une entité
métier et sauvegarde les modifications sur les données qui ont eu lieu dans l'entité métier.
-28-
Le schéma explicatif de ce patron est donné par le schéma de la figure 12.
Figure 12 : Schéma explicatif du Repository Pattern
3. Patron de conception MVVM

Apparu en 2004, le Model-View-ViewModel, est originaire de Microsoft (8). Ce patron
de conception a spécialement été conçu pour améliorer la séparation entre les données et la
vue qui les affichent (9). Le lien entre la vue et le modèle de données est fait par des
mécanismes de Binding5.
Ses trois principaux composants sont les suivants :
 Model : Contient les données, qui proviennent généralement d'une base de données ou
d'un service externe comme un API6.
 View : Correspond à ce qui est affiché. La vue contient différents composants gra-
phiques ainsi que le texte.
 ViewModel : Sert à faire le lien entre le modèle et la vue. Il s'occupe de gérer les liai-
sons de données et les éventuelles conversions et c'est ici qu'intervient le Binding.
L'idée à retenir avec le MVVM est que la vue ne traite jamais les données, mais elle les
affiche uniquement. Le ViewModel aura pour fonction d'effectuer les conversions et les accès
au modèle de données.
La figure 13 suivante explique le principe de ce patron de conception.
View View Model Model

L'interface utilisateur Prépare les données Simple classe
(XAML) pour la présentation contenant les
sur la vue propriétés des données
Figure 13 : Schéma explicatif du patron de conception MVVM

5
Mécanisme qui permet de faire des liaisons entre des données de manière dynamique.
6
Ensemble normalisé de classes et de fonctions qui sert de façade par laquelle un logiciel offre des services à
d'autres logiciels.
-29-
4. Conception détaillée
Nous allons présenter en premier lieu le modèle statique qui décrit la structure et le
comportement des objets constituant notre application grâce au diagramme de classes, ensuite
le modèle dynamique avec les diagrammes de séquences réalisés avec le langage UML.
2.1 Diagramme de classes

Le diagramme de classes représente les classes intervenant dans le système. C'est une
représentation statique des éléments qui composent un système et de leurs relations. Ces
éléments sont : les classes, leurs attributs, les méthodes et les relations entre les classes.
La figure 14 suivante représente le diagramme de classes de notre application.
Figure 14 : Diagramme de classes
-30-
2.2 Diagrammes de séquence

Les diagrammes de séquence permettent de décrire comment les éléments du système
interagissent entre eux et avec les acteurs dans un ordre chronologique. Dans ce qui suit, nous
allons détailler les quatre scénarios les plus importants de notre application : l'authentification,
l'envoi d'une demande d'absence, la validation d'une demande par un supérieur ou le super
administrateur et l'annulation d'une demande acceptée.
1.1.1
2.2.1 Diagramme de séquence du cas d'utilisation "S'authentifier"

Pour accéder à l'application, chaque acteur, du simple employé au super administrateur,
est dans l'obligation de s'authentifier avec son email et son mot de passe.
L'acteur saisit dans les champs du formulaire l'email et le mot de passe, le système
vérifie tout d'abord si les champs sont bien remplis et si ce n'est pas le cas il avertit l'acteur, en
affichant un message d'erreur.
En cas de succès, le système vérifie l'existence du compte dans le répertoire de la
société Satoripop présent dans Azure Active Directory, en cas d'échec, le système affiche un
message d'erreur à l'acteur lui demandant de vérifier son email. Si les informations sont
correctes, un jeton d'authentification "Token" sera attribué à l'acteur et sera redirigé vers une
page spécifique selon son rôle.
La figure 15 suivante représente le diagramme de séquence de ce cas d'utilisation.
-31-
Figure 15 : Diagramme de séquence du cas "S'authentifier"

2.1.
2.1.1.
2.2.2 Diagramme de séquence du cas d'utilisation "Dépôt demande d'absence

Après authentification, chaque utilisateur aura la possibilité d'accéder à l'interface
permettant d'envoyer une demande d'absence.
L'acteur remplira le formulaire. Si les champs sont bien remplis et après que l'acteur a
appuyé sur le bouton d'envoi, le système calcule le nombre de jours demandés et le compare
au nombre de jours restants dans le solde de congé de l'acteur.
Si le solde est inférieur, le système affiche une erreur. Sinon, la demande sera insérée
dans la base de données, un email de confirmation de dépôt de la demande sera transmis au
demandeur et un email contenant les informations de la demande sera envoyé à la personne
qui la validera (le chef d'équipe et l'administrateur si le demandeur est un employé simple et à
l'administrateur uniquement si le demandeur est un chef d'équipe ou un administrateur).
Le diagramme de séquence de ce cas d'utilisation est représenté par la figure 16.
-32-
Figure 16 : Diagramme de séquence du cas d'utilisation "Dépôt demande d'absence"
2.2.3 Diagramme de séquence du cas d'utilisation "Répondre à une demande"

En accédant à cet écran, l'acteur aura le choix entre deux alternatives possibles, accepter
ou refuser la demande.
Si l'acteur choisit de refuser la demande, l'état de cette dernière sera mis à jour dans la
base de données avec le titre "Refusé", et un email contenant la réponse sera transmis au
demandeur.
Dans le cas contraire, si l'acteur accepte la demande, le nombre de jours demandé sera
retiré du solde de congé du demandeur, l'état de la demande sera mis à jour avec le titre
"Accepté" et un email contenant l'accord et un résumé de la demande sera envoyé au
demandeur.
La figure 17 suivante représente le diagramme de séquence de ce cas d'utilisation.
-33-
Figure 17 : Diagramme de séquence du cas d'utilisation "Répondre à une demande"
2.2.4 Diagramme de séquence du cas d'utilisation "Annuler une demande acceptée"

Si une demande d'un employé a été acceptée mais qu'il a finalement changé d'avis et a
décidé de ne pas s'absenter, le super administrateur de l'application pourra l'annuler en
accédant à l'écran dans lequel seront présentées toutes les demandes déjà validées.
Dans ce cas il aura la possibilité de cliquer sur le bouton Annuler accompagné de la
demande en question.
Suite à l'appui sur le bouton il y aura suppression de la demande de la base de données,
une réinitialisation du solde de congé de l'employé avec le nombre de jours exigés dans la
demande ainsi qu'une transmission d'un email contenant la confirmation de la mise à jour de
son solde de congé.
Le diagramme de séquence de ce cas d'utilisation est donné par la figure 18.
-34-
Figure 18 : Diagramme de séquence du cas "Annuler une demande acceptée"
Conclusion
Au cours de ce chapitre, on a défini l'aspect statique et l'aspect dynamique de notre
application grâce aux diagrammes de classes et de séquences.
Le chapitre suivant sera consacré à une étape importante, la réalisation de l'application
-35-
Moez Baccouche Chapitre 4 : Réalisation
Chapitre 4 : Réalisation
Introduction
Après la phase de conception, on arrive à une étape cruciale, la réalisation du projet.
Afin de réussir cette phase, il est important de bien choisir les outils et les technologies à
utiliser.
Durant ce chapitre, nous allons tout d'abord présenter les technologies auxquelles
nous avons eu recours pendant le développement de notre application ainsi que les différents
outils et logiciels utilisés et enfin on clôturera ce chapitre par la présentation des interfaces
réalisées.
1. Le développement Web
1.1 Technologies utilisées
Dans un premier temps, nous allons présenter les technologies utilisées qui nous ont
permis de réaliser notre application web.
1.1.1 ASP .NET Core MVC 2.0

ASP.NET Core MVC 2.0 est le nouveau Framework 7 open-source8 crée par Microsoft
(10)en 2017, utilisé pour réaliser plusieurs types d'applications telles que des applications
web, des applications IOT mais aussi les back-ends9 des applications mobiles.
Il a été conçu dans le but de fournir un Framework de développement optimisé pour

les applications déployées sur le Cloud ou exécutées sur site.
Le développement et l'exécution des applications ASP.NET Core est possible sur

Windows mais aussi sur Linux et MacOS (11).
7
Un ensemble d'outils et de composants logiciels à la base d'un logiciel ou d'une application
8
Un programme informatique dont le code source est distribué sous une licence permettant à quiconque de lire,
modifier ou redistribuer ce logiciel.
9
La partie serveur qui servira aux traitements de données.
-36-
Avant l'apparition d' ASP. NET Core, les développeurs utilisait le Framework ASP.NET
MVC 5, nous allons mentionner quelques différences principales entre ces deux technologies
dans le tableau 8.
ASP.NET Core MVC 2.0 ASP.NET MVC 5
Totalement Open-Source Contrôlé et développé par Microsoft
Multiplateformes : Fonctionne sur Win- Fonctionne uniquement sur Windows

dows, Linux et MacOS
Les applications ne nécessitent pas IIS10

pour s'exécuter mais peuvent très bien s'au- L'exécution sur IIS est nécessaire.
to-héberger ou utiliser le serveur Web
Nginx11 sur Linux.
Tableau 8 : Tableau comparatif entre ASP .NET Core et ASP .NET MVC 5
1.1.2 MySQL
MySQL est un système de gestion de bases de données relationnelles. Il fait partie des
logiciels de gestion de base de données les plus utilisés au monde. Il est très exploité dans le
développement des applications web.
Le tableau 9 suivant justifie le choix d'utilisation de MySQL face à SQL Server.
MySQL SQL Server
Produit par MySQL AB, Produit par Microsoft, fonctionne sur

multiplateformes, supporté par Win- Windows uniquement.
dows, Linux et MacOS.
10
Serveur web fourni par Microsoft dans lequel on peut héberger et tester des applications web (21).
11
Logiciel libre de serveur web (22).
-37-
Tableau 9 : Tableau justificatif du choix MySQL face à SQL Server
1.1.3 Entity Framework

Entity Framework est un outil qui permet de créer une couche d'accès aux données liées
à une base de données relationnelle. Il s'agit d'un ORM (Object Relational Mapping) qui est
une technique de programmation (12) qui crée l'illusion d'une base de données orientée objet à
partir d'une base de données relationnelle. L'un des avantages les plus important de
l'utilisation d'Entity Framework est le fait qu'il permet d'éviter la duplication du code.
1.1.4 Bootstrap 4
Bootstrap est un framework utilisé pour le design de la partie frontale d'un site web qui
rend le développement plus rapide et simple (13). Il inclut des modèles de conception
HTML12 et CSS13 pour les formulaires, boutons, tableaux ainsi que des plugins JavaScript.
Bootstrap donne aussi la possibilité de créer facilement des pages web avec un
Responsive Design, c'est à dire des pages qui s'ajustent automatiquement selon la résolution
de l'écran de l'appareil.
Figure 19 : Logo Bootstrap
1.1.5 jQuery
jQuery est une bibliothèque JavaScript libre et multiplateforme dont la première version
a été créée en 2006 (14) pour faciliter les scripts coté client.
12
HyperText Markup Language, langage de balisage conçu pour représenter les pages web.
Cascading Style Sheets, langage qui permet de décrire le style de la présentation visuelle d'une page HTML ou
13
XML.
-38-
Figure 20 : Logo jQuery
2. Langages de programmation
Pour pouvoir programmer cette application, on a utilisé deux langages principaux.
 C# : C'est un langage de programmation orienté objet, commercialisé par Microsoft

depuis 2002 (15), il permet de créer divers types d'applications, notamment des
applications web, des applications mobiles, bureautiques, etc.
Figure 21 : Logo C#
 JavaScript : C'est un langage de programmation de scripts, principalement employé
dans les pages web interactives mais aussi pour les serveurs (16). Sa première version
a été créée en 1995.
Figure 22 : Logo JavaScript
2. Le développement mobile
2.1 Xamarin
Xamarin est une plateforme de développement d'applications mobiles pour la création
d'applications natives IOS, Android et Windows à partir d'une base de code commune
C#/ .NET. Les applications écrites avec Xamarin et C# ont un accès complet aux API de la
plateforme sous-jacente (17), et permettent de créer des interfaces utilisateur natives et de
compiler en mode natif et par conséquent les performances de l'exécution seront meilleures.
-39-
Figure 23 : Logo Xamarin
2.2 XAML
Extensible Application Markup Language est un langage de balisage créé par Microsoft
(18) qui permet de réaliser des interfaces utilisateur pour des applications fonctionnant avec le
Framework .NET.
3. Outils utilisés
Dans cette partie nous allons présenter les différents outils et logiciels qui nous ont
conduit à réaliser notre application.
3.1 Microsoft Visual Studio 2017

Visual Studio est un ensemble complet d'outils de développement permettant de générer
des applications web, des applications bureautiques et des applications mobile. C'est un IDE
qui permet de partager des outils et facilite la création de solutions faisant appel à plusieurs
langages.
Figure 24 : Logo Visual Studio 2017
3.2 GitKraken
Pour ne pas perdre tout le travail et avoir la possibilité de revenir à une version
antérieure en cas d'un problème quelconque, GitKraken nous permet de sauvegarder
l'avancement de notre projet qui sera accessible à n'importe quel moment.
-40-
Figure 25 : Logo GitKraken
3.3 Azure Active Directory

Azure Active Directory est un annuaire multi-clients basé sur le Cloud et un service de
gestion des identités qui combine les services d'annuaire principale (19), la gestion des accès
aux applications et la protection des identités en une seule solution (20).
Figure 26 : Logo Azure Active Directory
3.4 StarUML
StarUML est un logiciel de modélisation UML que nous avons utilisé pour réaliser les
différents diagrammes de cas d'utilisation, classes et séquences.
4. Interfaces Homme /Machine

Dans cette partie, nous allons montrer les écrans de notre application selon le rôle de
l'acteur qui l'utilise.
4.1 Super Administrateur

L'administrateur de l'application aura accès aux mêmes interfaces d'un employée ainsi
qu'à des interfaces qui lui permettront de gérer les employés, les équipes, les demandes de
tous les employés et les types d'absences
4.1.1 Interface d'authentification

La figure 27 montre la page d'authentification, qui est la première interface de
l'application. Elle sera accessible non seulement par l'administrateur mais aussi pour
l'employé et le supérieur. C'est une interface d'authentification de Microsoft dans laquelle
-41-
l'utilisateur doit saisir correctement son email et son mot de passe inscrits dans l'annuaire
d'Azure Active Directory pour accéder à son tableau de bord.
Figure 27 : Interface d'authentification
4.1.2 Interface Tableau de bord

Dans cette interface, l'administrateur de l'application aura une vue d'ensemble sur l'état
de tous les employés de la société comme présenté sur la figure 28.
Figure 28 : Interface Tableau de bord (Admin)
4.1.3 Interface des statistiques

Cette page sera consacrée aux statistiques sur toutes les équipes et les employés selon le
nombre de demandes d'absence et aussi sur le mois dans lequel on a enregistré le plus haut
nombre de demande comme le montre la figure 29 suivante.
-42-
Figure 29 : Interface Statistiques (Admin)
4.1.4 Interface Liste des employés

Dans cet écran, l'administrateur aura une vue d'ensemble sur les informations de tous les
employés tels que leurs soldes de congé restants et leurs fonctions. Il aura aussi la possibilité
de modifier ou supprimer un employé comme présenté sur la figure 30.
Figure 30 : Interface Liste des employés
-43-
4.1.5 Interface Liste des équipes

Cette interface présentera à l'administrateur la liste de toutes les équipes de la société
avec leurs membres, elle lui donnera aussi la possibilité de modifier ou supprimer une équipe.
La figure 31 présente cette page.
Figure 31 : Interface Liste des équipes
4.1.6 Interface Liste des types d'absence

Dans cette interface, l'administrateur aura une liste de tous les types d'absence et pourra
modifier ou supprimer un type comme le montre la figure 32.
Figure 32 : Interface Liste des types d'absence
-44-
4.1.7 Interface Liste des demandes reçues

Après envoi de la demande de la part d'un employé, un email sera envoyé à
l'administrateur et à son supérieur (Si le demandeur est un administrateur ou un chef d'équipe
l'email sera envoyé à l'administrateur uniquement). Dans ce cas, l'administrateur pourra
accéder à l'interface des demandes reçues pour pouvoir répondre à la demande.
Après avoir répondu à la demande, le demandeur recevra un email contenant la
réponse.
Les figures 33, 34 et 35 présentent respectivement, l'email reçu par l'administrateur,
l'interface et l'email de la réponse.
Figure 33 : Email de la demande reçu par l'administrateur
Figure 34 : Interface Liste des demandes reçues (Admin)
-45-
Figure 35 : Email réponse à la demande d'un employé
4.1.8 Interface Historique de toutes les demandes validées

Dans cette interface, l'administrateur de l'application aura la possibilité de voir toutes les
demandes validées par lui même ainsi que par tous les chefs d'équipe de la société. Il aura la
possibilité d'annuler une demande acceptée d'un employé si cette dernière n'a pas encore été
concrétisée.
La figure 36 nous montre cette interface.
Figure 36 : Interface Historique de toutes les demandes validées (Admin)
4.2 Employé
L'employé de Satoripop a le droit de déposer sa demande qui sera validée par son chef
d'équipe ou par l'administrateur de l'application, consulter son solde de congé, son historique
de demandes et ses statistiques personnelles.
-46-
4.2.1 Interface Tableau de bord

Après authentification, l'employé sera redirigé vers la page dans laquelle il aura une vue
d'ensemble sur son solde de congé restant, le nombre jours de congé dont il a bénéficié dans
l'année courante et son propre calendrier d'absences.. Cette interface est présentée dans la
figure 37.
Figure 37 : Interface Tableau de bord (Employé)
4.2.2 Interface Profil

Dans cette interface, plusieurs informations sur l'employé connecté seront affichées
telles que son nom, son prénom, sa fonction etc. Il aura le droit de les modifier à tout moment
comme le montre la figure 38.
Figure 38 : Interface Profil
-47-
4.2.3 Interface Dépôt demande d'absence

Cette interface sera consacré au dépôt d'une demande d'absence, l'employé devra
indiquer le type d'absence et remplir soigneusement le formulaire, si son solde de congé est
suffisant sa demande sera envoyée et il recevra un email de confirmation de dépôt comme le
montrent les figures 39 et 40.
Figure 39 : Interface Dépôt demande d'absence
Figure 40 : Email Confirmation dépôt demande d'absence
4.3 Supérieur
Le supérieur a les mêmes droits qu'un employé et pourra donc accéder aux mêmes
interfaces que l'employé, mais a aussi le droit de valider les demandes des membres de son
équipe, consulter leur calendrier d'absence, l'historique d'absences ainsi que les statistiques
qui concernent son équipe.
-48-
4.3.1 Interface Equipe

Dans cette interface, le supérieur aura plusieurs informations qui concernent son équipe,
notamment, les membres qui la composent et leurs soldes de congé restant, les membres qui
seront absents pendant la semaine courante et le calendrier d'absences.
La figure 41 présente cette interface.
Figure 41 : Interface « Equipe »
4.3.2 Interface Statistiques équipe

En accédant à cette interface, le supérieur aura une idée sur les membres de l'équipe
ayant passé le plus de demandes, les pourcentages des types d'absence demandés ainsi que le
total de demandes reçues et validées qui concernent son équipe comme indiqué sur la figure
42.
-49-
Figure 42 : Interface Statistiques équipe
Conclusion
Dans ce chapitre, nous avons présenté les différentes technologies et outils auxquelles
nous avons eu recours lors de la réalisation de cette étape de réalisation et nous l'avons clôturé
avec la présentation des différentes interfaces Homme / Machine qui le composent.
-50-
Conclusion générale
Ce rapport présente le travail réalisé au sein de la société de développement

informatique Satoripop dans le cadre d'un projet de fin d'études. Il s'agit d'une réalisation
d'une plateforme web et mobile de déclaration d'absences.
En effet, la société Satoripop utilisait depuis son lancement la méthode de dépôt des
demandes écrites sur papier et dont les informations importantes qui concernent ses employés
sont stockées dans des boites d'archive et par conséquent, le dépôt d'une demande, sa
validation ainsi que la consultation des données personnelles comme le solde de congé restant
deviennent des tâches compliquées pour le demandeur et le validateur. Pour remédier à ce
problème, nous avons pensé à trouver une solution pour centraliser les données et les stocker
dans des bases de données ainsi que de permettre aux employés de déposer leurs demandes en
toute simplicité et être notifié de la réponse dès la validation.
Ce rapport détaille toutes les phases avec lesquelles nous sommes passés pour avoir
réussi à avoir une application qui répond aux besoins de ses utilisateurs. Dans la première
étape, l'analyse de l'existant nous a permis d'identifié les problèmes de la solution existante
pour pouvoir fixer des objectifs et combler les vides de la solution actuelle. La deuxième
partie était consacrée à l'identification des acteurs et la description détaillée des
fonctionnalités de la plateforme, ensuite on a mentionné les aspects statiques et dynamiques
grâce aux diagrammes de classes et séquences réalisés avec le langage UML. Enfin, nous
avons présenté la phase de réalisation avec les outils utilisés et les interfaces de l'application.
Pour réaliser cette application, nous avons eu recours à des technologies populaires et
performantes telles que ASP .NET Core MVC pour le développement Web et Xamarin pour le
développement mobile. Nous avons appliqué les principes de différents patrons de conception
qui nous ont facilité le développement et amélioré la qualité du code pour qu'il soit
réutilisable et facile à modifier ou améliorer à l'avenir.
En dernier lieu, ce projet a été une expérience enrichissante en terme d'apprentissage,
-51-
mise en pratique des connaissances théoriques et amélioration des aptitudes de

communication qui seront des avantages lors de l'intégration du monde professionnel.
-52-
Références
1. Franck. seo-definition. [En ligne] [Consulté le 30 Mars 2018.]

https://www.seo.fr/definition/seo-definition/.
2. Search Engine Marketing (SEM): What It Is & How to Do It Right. [En ligne]
[Consulté le 30 Mars 2018.] https://www.wordstream.com/search-engine-marketing.
3. Fatulescu, Cornel. methode-agile-scrum.htm. pentalog. [En ligne] [Consulté le 30
Mars 2018.] https://www.pentalog.fr/notre-demarche/methode-agile-scrum.htm.
4. Point, Tutorials. Design Pattern - Overview. [En ligne] [Consulté le 15 Avril 2018.]
https://www.tutorialspoint.com/design_pattern/design_pattern_overview.htm.
5. Wikipedia. Modèle-vue-contrôleur. [En ligne] [Consulté le 15 Avril 2018.]
https://fr.wikipedia.org/wiki/Modèle-Vue-Contrôleur.
6. Microsoft. Model-View-Controller. [En ligne] [Consulté le 15 Avril 2018.]
https://msdn.microsoft.com/en-us/library/ff649643.aspx.
7. Microsoft. The Repository Pattern. [En ligne] [Consulté le 15 Avril 2018.]
https://msdn.microsoft.com/en-us/library/ff649690.aspx.
8. Wikipedia. Modèle-vue-vue modèle. [En ligne] [Consulté le 20 Avril 2018.]
https://fr.wikipedia.org/wiki/Modèle-vue-vue_modèle.
9. Microsoft. The MVVM Pattern. [En ligne] [Consulté le 20 Avril 2018.]
https://msdn.microsoft.com/en-us/library/hh848246.aspx.
10. Wikipedia. ASP.NET Core. [En ligne] [Consulté le 10 Janvier 2018.]
https://en.wikipedia.org/wiki/ASP.NET_Core.
11. Microsoft. Introduction to ASP.NET Core. [En ligne] [Consulté le 15 Janvier 2018.]
https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.0.
12. Hilaire, Nicolas. Apprenez ASP.NET MVC. [En ligne] [Consulté le 1 Janvier 2018.]
https://openclassrooms.com/courses/apprendre-asp-net-mvc/le-modele-36.
13. Bootstrap. [En ligne] [Citation : 20 Février 2018.] https://getbootstrap.com/.
14. Wikipedia. jQuery. [En ligne] [Consulté le 25 Février 2018.]
https://fr.wikipedia.org/wiki/JQuery.
15. Hilaire, Nicolas. Apprenez à développer en C#. Openclassrooms. [En ligne]
[Consulté le 25 Décembre 2017.] https://openclassrooms.com/courses/apprenez-a-
developper-en-c.
-53-
16. Wikipedia. JavaScript. Wikipedia. [En ligne] [Consulté le 26 Février 2018.]
https://fr.wikipedia.org/wiki/JavaScript.
17. Microsoft. Xamarin Documentation. [En ligne] [Consulté le 5 Mai 2018.]
https://docs.microsoft.com/en-us/xamarin/.
18. Microsoft. [En ligne] [Consulté le 5 Mai 2018.]
https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/xaml-overview-wpf.
19.Microsoft. What is Azure Active Directory? [En ligne] [Consulté le 5 Mai 2018.]
https://docs.microsoft.com/en-us/azure/active-directory/active-directory-whatis.
20. Freeman, Adam.Pro ASP .NET MVC 5 . 18 avril 2014.
21. Microsoft. Web Server (IIS) Overview. [En ligne] [Consulté le 3 Février 2018.]
https://docs.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2012-R2-
and-2012/hh831725(v=ws.11).
22. Nginx. [En ligne][Consulté le 3 Février 2018.] https://www.nginx.com/.
-54-
FORMULAIRE DE « DÉCLARATION »
DECLARATION SUR L’HONNEUR
Par la présente, je soussigné BACCOUCHE Moez certifie avoir rédigé mon mémoire de
stage intitulé: Conception et réalisation d’une plateforme web et mobile de gestion des
absences seul et sans aucune aide interdite. Je ne me suis basé sur aucune autre source que
celles mentionnées et citées dans le manuscrit. Ce mémoire n’a ni dans sa forme actuelle, ni
dans une forme proche, été soumis à une autre institution.
Hammam Sousse, le 27/06/2018
Signature
Par la présente, je soussignée KEFI Sonia Superviseuse de BACCOUCHE Moez,

certifie avoir lu le manuscrit intitulé Conception et réalisation d’une plateforme web et
mobile de gestion des absences et être en accord avec son contenu et il est en accord avec
les objectifs pédagogiques visés par le stage de fin d'études.
Hammam Sousse, le 27/06/2018
Signature
-55-
Résumé
Afin de centraliser les données de ses employés et d'améliorer le processus de demande
et validation des congés et absences, la société de développement informatique Satoripop a
mis au point une plateforme Web et Mobile qui donne aux différents employés la possibilité
de déclarer leurs absences et à leurs supérieurs de les valider tout en ayant le droit à d'autres
fonctionnalités telles que la consultation du profil, du solde de congé restant, de l'historique
des absences, etc. Donnant résultat à un meilleur respect du règlement interne de la société,
une plus grande autonomie et une meilleure notification des réponses sur les demandes.
Mots-clés : Congés, Absences, Gestion, .NET, ASP, Xamarin, Azure AD
Abstract
In order to centralize employee's data and to enhance the leaves requests and validation
process, the IT company Satoripop has created a Web and Mobile platform that enables
employees to declare their absence and to their superiors the ability to validate their requests,
while having the right to other features such as profile consultation, remaining leave credit
checking, absence history consultation, etc. Leading to a better compliance with the
company's internal reglement, a higher level of autonomy and a better notification of
responses on requests.
Keywords :Days off, Absences, Managment, .NET, ASP, Xamarin, Azure AD

Conception Et Réalisation D'une Plateforme Web Et Mobile de Gestion Des Absences

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Conception Et Réalisation D'une Plateforme Web Et Mobile de Gestion Des Absences

Transféré par

Droits d'auteur :

Formats disponibles

Ministère de l’Enseignement Supérieur

Licence Fondamentale en Sciences de l'Informatique

Conception et réalisation d'une plateforme web et

Réalisé par : Moez Baccouche

Soutenu le ../../2018, devant le jury composé de :

Année Universitaire : 2017-2018

Au terme de ce travail, je tiens à exprimer ma profonde gratitude à mon professeur et

Je tiens à remercier également mon encadrante professionnelle Mademoiselle Abir

Table des matières...........................................................................................................ii

Table des figures..............................................................................................................v

Liste des tableaux..........................................................................................................vii

Chapitre 1 : Cadre général du travail...........................................................................3

1. Présentation de la société d'accueil.......................................................................3

1.1 Structure sociale de Satoripop.......................................................................3

1.2 Les métiers Satoripop....................................................................................4

1.3 Le système d'absence et des congés de la société Satoripop.........................4

2.1 Analyse de l'existant...........................................................................................5

2.2 Critique de l'existant...........................................................................................6

2.3 Solution envisagée..............................................................................................6

3.1 Méthodologie Scrum..........................................................................................7

3.2 Avantages de Scrum............................................................................................7

3.3 Les sprints du projet...........................................................................................8

Chapitre 2 : Analyse et spécification des besoins........................................................11

2.3 Super administrateur....................................................................................12

3. Diagrammes de cas d'utilisation..........................................................................13

3.1 Diagramme de cas d'utilisation général.......................................................13

3.2 Diagramme du cas d'utilisation "Dépôt demande d'absence"......................15

3.3 Diagramme du cas d'utilisation "Gérer demande d'absence"......................17

3.4 Diagramme du cas d'utilisation "Répondre à une demande".......................19

3.5 Diagramme du cas d'utilisation "Gérer équipes".........................................22

3.6 Diagramme du cas d'utilisation "Annuler une demande acceptée".............24

4. Besoins non fonctionnels....................................................................................26

Chapitre 3 : Etude conceptuelle...................................................................................27

1. Les patrons de conception...................................................................................27

1.1 Le patron MVC............................................................................................27

1.2 Repository Pattern.......................................................................................28

1.3 Patron de conception MVVM......................................................................29

2.1 Diagramme de classes.................................................................................30

2.2 Diagrammes de séquence............................................................................31

1.2 Langages de programmation.......................................................................38

3.1 Microsoft Visual Studio 2017......................................................................39

3.3 Azure Active Directory................................................................................39

4. Interfaces Homme /Machine...............................................................................40

4.1 Super Administrateur...................................................................................40

Figure 1 : Logo de Satoripop............................................................................................3

Tableau 1 : Tableau comparatif entre la solution actuelle et la solution envisagée..........6

API : Application Programming Interface

Dans ce contexte, plusieurs entreprises recourent encore aux méthodes traditionnelles

Le troisième chapitre présentera l'architecture de notre projet et on décrira les

Le quatrième chapitre sera consacré à la description de l'environnement de travail,

Chapitre 1 : Cadre général du travail

1. Présentation de la société d'accueil

Figure 1 : Logo de Satoripop

2. Structure sociale de Satoripop

 Département de développement : Ce département comporte une vingtaine de

3. Les métiers Satoripop

4. Le système d'absence et des congés de la société Satoripop

1.3.1 Les types d'absence

 Congé de maladie : : L'employé de Satoripop possède un solde de congé de maladie

1.3.2 Les systèmes des jours fériés

 Système français : Un employé a le droit de suivre le système des jours fériés

2.1 Analyse de l'existant

En plus et comme exemple, si un employé souhaitait consulter son solde de congé, il