REPUBLIQUE TUNISIENNE UNIVERSITE DE GABES

********** **********
MINISTERE DE L’ENSEIGNEMENT INSTITUT SUPERIEUR DE GESTION
SUPERIEUR ET DE LA RECHERCHE DE GABES
SCIENTIFIQUE **********
**********

RAPPORT DE PROJET DE FIN D’ETUDES

Pour l’obtention du :

Diplôme de Mastère Professionnel en Ingénierie en

développement mobile

Sujet

Conception et Développement d’une application Mobile

Multiplateforme de gestion des ressources humaines
« Pointage mobile »

Réalisé par :

Ella Ben Aoun

Encadré par :

Mme. Hela Fehri

Année Universitaire 2020/2021

 Dédicaces

J’ai le plaisir de dédier cet humble rapport :

A mon DIEU qui m’a donné la santé, la force, le courage, la
croyance, le soutien pour être là aujourd’hui entrain de vous
présenter ce modeste travail.
A mes très chers parents qui se sacrifient jour et nuit pour
illuminer mon chemin. Et mes sœurs et mon frère

A mes chers professeurs, encadrant et les responsables qui ont

assisté lors de mes études cette année.
 Remerciements

Au terme de ce projet je tiens à remercier infiniment tous

les enseignants de 1’institut supérieur de gestion à Gabes.

Je tiens à remercier dans un premier lieu, l’ensemble du

personnel de La société MEGA -DEV pour le bon accueil et
les facilités accordées pour l’accomplissement de mon stage
dans les meilleures conditions.
Je m'exprimais mes sincères remerciements à Mr KAIS JRAD
le directeur de la société MEGA-DEV et mon encadrant pour
l’intérêt manifesté à ce travail ainsi que pour leurs précieux
conseils et leur suggestions

J’adresse mes vifs remerciements à mon encadrante

au sein de 1’institut Mme HELA FEHRI qui a gardé un oïl
attentif sur le déroulement du projet en donnant des
remarques constructives. Je la remercie pour sa disponibilité
et son aide précieuse et cela a été un plaisir de travailler sous
sa directive.

Enfin, j’adresse mes remerciements pour les membres du

jury qui m’avoir honoré en acceptant d’éva1uer ce travail.
 Table des matières
Introduction générale ................................................................................................................... .
Chapitre1 : Étude préalable ........................................................................................................ 1
Introduction ............................................................................................................................ 1
1. Recueil ................................................................................................................................ 1
1.1. Présentation de la société Mega DEV ..................................................................... 1
1.2 . Pointage.................................................................................................................. 2
1.2.1. Définition de pointage ....................................................................................... 2
1.2.2. Les différents types de pointeuses ..................................................................... 2
1.2.3. Utilisation des QR codes .................................................................................. 4
1.2.4. Statistiques de Code QR ................................................................................... 5
1.2.4. Avantage du Code QR..................................................................................... 5
2. Contexte du projet............................................................................................................... 5
2.1. Etude de l’existant.................................................................................................... 6
2.2. Critique de l’existant ................................................................................................ 6
2.3. Solution proposée..................................................................................................... 7
3. Spécification des besoins .................................................................................................... 7
3.1. Besoins fonctionnels ................................................................................................ 7
3.2. Besoins non fonctionnels ......................................................................................... 8
Conclusion .............................................................................................................................. 8
Chapitre 2 : Étude conceptuelle ................................................................................................. 9
Introduction ............................................................................................................................ 9
1. Choix de la méthode de conception .................................................................................... 9
2. Qu’est-ce que Le langage de modélisation unifié (UML) .................................................. 9
3. Les diagrammes utilisés ...................................................................................................... 9
3.1. Diagramme de cas d’utilisation ............................................................................... 9
3.2. Diagramme de séquences .......................................................................................... 14
3.3. Diagramme de classes ............................................................................................ 17
3.4. Modèle Logique .................................................................................................... 17
Conclusion ............................................................................................................................ 19
Chapitre 3 : Réalisation ........................................................................................................... 30
Introduction ......................................................................................................................... 20
 1. Présentation des outils de développement utilisés ........................................................... 20
1.1. Model MVC ............................................................................................................. 31
2. Environnement de travail ................................................................................................. 32
2.1.Environnement Matériel ............................................................................................ 32
2.2. Environnement Logiciel ........................................................................................... 33
2.2.1. Langages utlisés .............................................................................................. 33
2.2.2. Framework et environnement ......................................................................... 34
2.2.3. Outils utisés .................................................................................................... 35
2.2.4. Base de données ............................................................................................. 35
3. Interfaces réalisées ............................................................................................................ 36
3.1. Les interfaces de l’application web ........................................................................ 37
3.2. Les interfaces de l’application mobile ................................................................... 39
Conclusion générale .................................................................................................................... .
 Liste des figures

Figure 1: Logo MEGA DEV ...................................................................................................... 1

Figure 2 : QR Code .................................................................................................................... 3
Figure 3 : Diagramme de cas d'utilisation global ..................................................................... 11
Figure 4 : Diagramme de séquences de connexion Chef de service ....................................... 14
Figure 5 : Diagramme de séquences de connexion employé ................................................... 15
Figure 6 : Diagramme de séquences de demande de congé ..................................................... 16
Figure 7:Diagramme de séquences de validation de congé .................................................... 16
Figure 8:Diagramme de classes ................................................................................................ 17
Figure 9: Modèle Logique ........................................................................................................ 18
Figure 10 : Modèle MVC ......................................................................................................... 20
Figure 11:Plesk ......................................................................................................................... 22
Figure 12:Interface d'authentification du chef de service ....................................................... 25
Figure 13: Interface de tableau de bord .................................................................................... 25
Figure 14:Interface de la liste des QR code ............................................................................. 26
Figure 15:Interface de la liste des présences ............................................................................ 26
Figure 16 : Interface de paramètres .......................................................................................... 26
Figure 17 : Interface de connexion de l'employé ..................................................................... 26
Figure 18 : Interface Accueil .................................................................................................... 27
Figure 19: Interface de pointage ............................................................................................... 27
Figure 20 : Interface de rapport ................................................................................................ 27
Figure 21: Interface à propos ................................................................................................... 27
 Introduction générale

Dans un univers hautement concurrentiel, la gestion de temps dans l’entreprise moderne est
devenue un véritable enjeu stratégique. Afin de créer ou de maintenir ses avantages
concurrentiels, l’entreprise est continuellement menée à améliorer ses performances, ce qui se
traduit souvent par l’optimisation de ses processus et donc par une maitrise de ses ressources,
que celles-ci soient matérielles ou humaines. Or, bien gérer son capital humain passe par un
suivi adéquat de ses activités et donc, du temps de travail et de ses absences.
La complexité de cette tâche varie en fonction de l’organisation, de la taille et de la culture de
l’entreprise, mais aussi selon la législation en vigueur.
Ce travail fournit un effort d’analyse et de développement d’un système d’information
facilitant le suivi des temps de travail et des absences des employés dans une entreprise. Il
aborde les thèmes de la gestion de temps dans les entreprises, du cadre légal Tunisie régissant
les relations de travail, de l’analyse des processus de l’entreprise et du recueil des exigences
du futur système.
Dans ce contexte, dans le cadre de notre formation de mastère d’ingénierie de développement
mobile et pour mettre en application nos connaissances en matière de développement et
acquérir de solides compétences, nous sommes appelés à réaliser un Projet de fin d’étude avec
la collaboration de la société Mega DEV. Le sujet du projet consiste à concevoir et
développer une application mobile du système de gestion du temps de travail. Elle convient
parfaitement aux entreprises ayant des impératifs de mobilité ou de personnel itinérant.
Dédiée aux employés en déplacement comme les commerciaux ou les techniciens, elle facilite
à la fois le quotidien des employés et des ressources humaines. En effet l’application est
souvent en relation avec un logiciel de gestion qui collecte toutes les informations et permet
de les traiter facilement. Elle tourne autour de 3 grandes fonctionnalités :
Le pointage : des entrées, des sorties, des pauses, des déplacements, des arrêts maladie...
La consultation : du temps de travail sur une période donnée, du solde sur une période
donnée, des heures supplémentaires ou à rattraper
La gestion : de toutes les informations en main pour gérer au mieux vos équipes (les missions,
les absences, les mises à jour…)
Le présent rapport est divisé en trois chapitres avec une introduction générale et une
conclusion :
- Le premier chapitre, intitulé étude préalable, introduit dans un premier volet la présentation
générale de société Mega DEV, le QR code et le pointage. Dans un deuxième volet, il
introduit le contexte du projet, l’étude de l’existant, la critique de l’existant ainsi que la
solution proposée et finalement les besoins fonctionnelles et non fonctionnelles.
- La conception du projet sera l’objectif du deuxième chapitre qui porte sur la modélisation
UML (Unified Modeling Language), où nous présentons les différents diagrammes de cas
d’utilisation, de séquences et de classes.
- Le troisième chapitre sera consacré à la mise en place de l’application. Nous préciserons
dans un premier lieu l’environnement du travail matériel et logiciel ainsi que les langages et
les technologies utilisées. Dans un deuxième lieu, nous allons illustrer par des captures
d’écran notre travail réalisé.
- Nous clôturons notre rapport par une conclusion générale à travers laquelle nous allons
présenter les différentes étapes de notre projet ainsi qu’une amélioration possible de notre
application à travers les perspectives envisagées.
 Chapitre1 : Étude préalable
Introduction
Dans le présent chapitre nous présentons en premier lieu la société Mega DEV dans laquelle
le stage du projet de fin d’étude est effectué et les services fournis par cette société. En
deuxième lieu, nous étudions l’existant et le critiquons. Enfin nous citons les besoins
fonctionnels et non fonctionnels du projet et la solution proposée.

1. Recueil
1.1. Présentation de la société
1.1.1. Mega DEV
Mega DEV est une société de conception et de développement web à responsabilité limitée
(S.A.R.L). Elle fournit un service de bout en bout pour le développement web et mobile.
Mega DEV est engagé à appliquer des normes élevées de qualité et d’innovation dans les
domaines du marketing, la formation et le développement. [1]

Figure 1: Logo MEGA DEV

1.1.2. Secteurs d’activités de Mega DEV

 Développement Web et Mobile
Mega DEV utilise des technologies sophistiquées et des pratiques professionnelles pour créer
des sites Internet personnalisés qui augmentent l’engagement des utilisateurs.
 Marketing Numérique
Le Marketing numérique chez Mega DEV repose sur la base de la conduite des résultats
mesurables. Il suit une approche du marketing en ligne en mettant l’accent sur l’augmentation
des conversions.
 Solution Logicielle
Mega-DEV offre une gamme complète de services de développement de logiciels
personnalisés pour une grande variété de domaines verticaux et commerciaux.

 Vidéos et Motion Design

Mega-DEV adapte la vidéo à objectifs du client de la recherche solide à l’approche créative,
du script au story-board.

Elaa Ben Aoun 1

 1.2 . Pointage

1.2.1. Définition de pointage

Le pointage est un dispositif qui permet de contrôler le temps de travail d'un salarié. A
l'origine, les horaires et accès spécifiques à une zone étaient contrôlés par un salarié qui notait
scrupuleusement chaque aller et venue d'un salarié.

1.2.2. Les différents types de pointeuses

De nos jours, les pointeuses en entreprise prennent une place de plus en plus importante. Il
existe différents types de pointeuses :

 La pointeuse mécanique
Cette solution est l’une des plus simples et des plus anciennes en terme de pointage horaire.
 La pointeuse numérique
La pointeuse numérique est une version améliorée de la pointeuse mécanique. En effet, elle a
plus de fonctionnalité que la pointeuse mécanique.
 La pointeuse mobile
La pointeuse mobile reste de nos jours le système de pointage le plus performant par rapport
aux pointeuses mécaniques, numériques et badgeuses. Ce système de pointage est
principalement destiné aux salariés itinérants. Parmi les différentes fonctionnalités, nous
pouvons relever les suivantes :
 Système de géo localisation des salariés.
 Pointage grâce à un QR code.
 Gestion du temps de travail avec un planning précis.
 Contrôle du temps de travail.
Ainsi, la pointeuse mobile dispose de nombreuses fonctionnalités intéressantes pour les
entreprises. Il existe différents types de pointeuses mobiles, c'est-à-dire des modalités
différentes d'organisation du pointage des salariés externalisés et/ou en mission
o Pointage par téléphone fixe : À son arrivée ou à son départ du lieu de travail, le salarié
compose un numéro spécial et donne un code personnel à son interlocuteur/trice qui
déclenche ou clôt le décompte du temps de travail.
o Pointage par téléphone portable : À son arrivée ou à son départ du lieu de travail, le
salarié passe son portable près d'une puce ou d'un code-barres installé(e) là, ce qui
déclenche ou clôt le décompte du temps de travail.

Elaa Ben Aoun 2

 o Pointage par borne RFID : À son arrivée ou à son départ du lieu de travail, le salarié
passe son téléphone portable, un porte-clés ou un badge près d'une borne installée, ce
qui déclenche ou clôt le décompte du temps de travail.

1.3. QR Code
1.3.1. Définition
QR (abréviation de l'anglais quick response) signifie que le contenu du code peut être décodé
rapidement après avoir été lu par un lecteur de code-barres, un téléphone mobile,
un smartphone ou encore une webcam. Son avantage est de pouvoir stocker plus
d'informations qu'un code à barres , et surtout des données directement reconnues par des
applications.

Figure 2 : QR Code

1.3.2. Les principaux types de codes QR

Tous les QR codes sont différents les uns des autres. Cependant, ils sont classés en deux
principaux types que sont le QR code statique et le QR code dynamique
 QR codes statiques

Les QR codes statiques sont fixes. Cela signifie que les données qu'ils contiennent ne sont pas
modifiables. Ce type de code a un caractère définitif dès qu'il est créé. Il est utilisé pour
fournir aux utilisateurs des informations permanentes. Dans les faits, lorsque l'URL est
modifiée, le QR code cesse de fonctionner. Au cas où on veut revoir les données contenues
dans un QR code statique, on devra en établir un nouveau.

Elaa Ben Aoun 3

  Les QR codes dynamiques

Les QR codes dynamiques sont à l'opposé des QR codes statiques. Il s'agit de codes dont les
informations peuvent être modifiées en cas de besoin. En fait, le contenu ne se trouve pas
dans le QR code à proprement parler, mais plutôt dans l'URL du site web.
Nous avons donc la possibilité de retoucher le contenu lié à l'URL cible, sans que le QR code
dynamique perde sa fonction.
 Les QR codes dynamiques sont plus flexibles que les QR codes statiques

1.3.3. Utilisation des QR codes

Les codes QR sont surtout lus à partir d’un Smartphone. Il faut en amont télécharger une
application qui est en général gratuite. Par la suite, il faut prendre en photo le code pour
visualiser son contenu.

Le code embarque :

 du texte (jusqu’à 500 mots)

 un numéro de SMS ou de téléphone (possibilité de déclencher un appel)
 une adresse de site internet (visite d’une page web ou lancement une application web)
 et/ou une adresse mail (contact direct)
 un point géographique (possibilité en terme de géolocalisation)

Ce contenu peut :

 être transféré,
 et/ ou imprimé.

Elaa Ben Aoun 4

Son utilisation est gratuite. Le flash d’un code déclenche également des actions comme :

 le paiement via le téléphone,

 un appel,
 le visionnage de vidéo,
 un envoi de SMS…
 pointage

Il s’impose de plus en plus dans les campagnes de marketing relationnel. Le QR Code est
d’une efficacité redoutable si son usage est bien maîtrisé. On le retrouve maintenant sur tous
les types de support de communication comme :

 les affiches,
 des emballages,
 les panneaux d’informations,
 des flyers,
 les catalogues…

1.3.4. Statistiques de Code QR

 Taux de connaissance du QR code en France 89 %,

 Taux de pénétration sur les panneaux d’affichages entre 6,5 % et 22% en fonction du
support,
 Taux de pénétration dans la presse de 85 %,
 Taux de pénétration dans les catalogues promotionnels, 44 %. [2]

1.3.5. Avantages du QR Code

• Economique
• Facile à mettre en œuvre
• Disponible sur tous les mobiles

2. Contexte du projet
Les absences et présences des collaborateurs engendrent beaucoup de mouvements qui
doivent être planifiés, consultés et validés. Les absences (maladies, vacances, congés) sont
validées et contrôlées par les RH (ressources humaines) de l’entreprise.

Elaa Ben Aoun 5

Avec l’application que nous allons développer, nous gérons l’ensemble de ces processus
d’une manière automatisée et sur une même base de données à partir d’une plateforme
accessible à tout moment, depuis un PC et un smartphone.

2.1. Etude de l’existant

Le système de pointage interne de Mega-DEV, se fait par un Cahier ou une feuille de

pointage pré-imprimée sur lesquelles les entrées et sorties et horaires quotidiens seront
inscrites de façon manuscrite, leur exploitation (report, calcul, cumul, totalisation, etc.) est
faite par la suite manuellement ou par le biais d'une feuille de calcul Excel.

Ainsi que la gestion de congés est une activité confiée à la direction technique et
administrative de l’entreprise Mega DEV. Un personnel remplit une demande de congé en
papier. Par la suite, il la dispose chez la poste du chef de département pour l’approbation
en tenant compte de la durée de congé. Lorsque la demande est acceptée par ce dernier,
elle passe à un deuxième niveau d’approbation par le directeur de société qui à son tour
soumet la demande aux ressources humaines.

2.2. Critique de l’existant

L'analyse de l'existant met l'accent sur plusieurs difficultés telles que :

 Le travail se fait encore manuellement.

 Négligence du facteur temps : le facteur temps est un facteur fondamental pour toutes les
activités. Ce facteur n’est pas bien exploité vu qu’il est difficile de bien gérer manuellement les
employés et réussir la tâche destinée par exemple au responsable de ressources humaines.
 Volume important des informations traitées manuellement, ce qui provoque parfois des
erreurs dans l'établissement des documents.
 Possibilité d'erreur dans le remplissage des différents documents et registres.
 Risque d’oublie ou de perte de la demande de congé
 Un manque de suivi
 Nombre important des archives qui engendre une difficulté de stockage. (Détérioration
des archives à force de leur utilisation trop fréquente).

Elaa Ben Aoun 6

 2.3. Solution proposée
En tenant compte de cette étude, nous avons jugé que les méthodes adoptées par Mega-DEV
sont des solutions non fiables. Alors suite à cette constatation, nous avons choisi de
développer une application de gestion de ressources humaines (GRH) et de pointage basé sur
le QR Code assurant :
 La présence, suivi des employés congés et préavis
 La présence quotidienne avec rapports sur l'heure d'enregistrement au bureau, l'heure
de départ, le temps de travail et les absences
 La gestion de pointage des employés. En effet ces derniers peuvent enregistrer l’heure
d’entrée et sortie d'une journée complète avec la localisation GPS. Ainsi, il est
possible de trouver le travailleur en temps réel, toute la journée
 La gestion des informations personnelles des employés : nom, prénom et spécialité.
 Les demandes de congé - Les employés peuvent demander des congés de maladie, des
congés occasionnels et autres à l'administrateur avec les dates et la raison de
l'approbation
 La gestion des congés - L'administrateur peut afficher les demandes de congé en
attente et le bouton d'approbation / de rejet pour les listes en attente
 La gestion des Rapports dynamiques - Rapport de présence et rapports de congé.
 Toutes ces fonctionnalités sont liées entre eux pour former un système complet qui gère
tous les fonctions de gestion de RH utiles et nécessaires de cette entreprise.

3. Spécification des besoins

La réussite de tout projet dépend de la qualité de son départ. De ce fait, l’étape de
spécification constitue la base de départ de notre travail. Pour assurer ses objectifs, il est
essentiel de parvenir à une vue claire des différents besoins escomptés de notre projet.

3.1. Besoins fonctionnels

Ces besoins sont directement liés aux différentes tâches à réaliser pour notre application. En
fait, notre application doit supporter les fonctionnalités et doit répondre aux différents besoins
suivants à savoir:
 Authentification : est une phase qui permet à l'utilisateur d'apporter la preuve de son
identité. Elle intervient après la phase dite d'identification. Elle permet de répondre à
la question : "Êtes-vous réellement cette personne ?". L'utilisateur utilise un QR code
que lui seul connait.

Elaa Ben Aoun 7

  Pointage avec QR code : l’employé pointe à l’entrée et sortie à partir du serveur dans
la zone de connexion.
 Géolocalisation : suivre l’emplacement de l’employé
 Demande congé : l’employé peut faire une demande de congé à distance.
 Consultation des salaires : l’administrateur peut consulter les fiches des salaires des
employés.
 La sécurité : l’accès à l’appareil doit être sécurisé.

3.2. Besoins non fonctionnels

Afin d’optimiser le fonctionnement de notre application, elle doit répondre aux différents
besoins non fonctionnels présentés ci-dessous que nous devons prendre en compte afin
d’assurer une meilleure utilisation et une meilleure gestion :
 La disponibilité : en permanence et la capacité : à tout moment l’appareil permet de
vérifier l’identité de l’utilisateur en temps réel et elle doit être capable de stocker les
informations requises et les résultats de l’analyse de tous les utilisateurs.
 La performance : afin d’être acceptée par l’utilisateur, notre application doit respecter
ce critère pour assurer le fonctionnement des fonctionnalités répondant aux besoins de
l’utilisateur avec le minimum de temps de réponse.
 L’intégrité : en cas de détection d’erreur ou de non-conformité des images de
l’utilisateur, l’appareil doit être capable de traiter ces cas et d’alerter l’administrateur.
 L’ergonomie : les interfaces de l’application doivent être claires, simples et
conviviales : il faut essayer au maximum d’éliminer l’encombrement.

Conclusion
Après avoir présenté la société Mega DEV, le contexte du projet et les spécifications des
besoins de notre application, nous passerons au chapitre suivant pour la modélisation de ces
besoins.

Elaa Ben Aoun 8

 Chapitre 2 : Étude conceptuelle
Introduction
Après la spécification détaillée des principaux besoins, nous passons à l’étape de conception
qui permet de bien mener la phase d’implémentation. La conception décrit le fonctionnement
de notre système par une étude générale basée sur la spécification des besoins.

1. Choix de la méthode de conception

Dans notre projet, nous avons choisi la méthode UML comme une de conception. Elle est
apparue dans le monde du génie logiciel, dans le cadre de la (conception orienté objet). En plus
l’UML est essentiellement un support de communication, qui facilite la représentation et la
compréhension de la solution objet.

2. Qu’est-ce que Le langage de modélisation unifié (UML)

Le langage de modélisation unifié (UML) est un langage de modélisation normalisé permettant
aux développeurs de spécifier, construire et documenter les artefacts d’un système logiciel.
Ainsi, UML rend ces artefacts évolutifs, sécurisés et robustes. UML est un aspect important
impliqué dans le développement de logiciels orientés objet. Il utilise la notation graphique pour
créer des modèles visuels de systèmes logiciels.

3. Les diagrammes utilisés

3.1. Diagramme de cas d’utilisation
Le diagramme des cas d’utilisation apporte une vision utilisateur et absolument par une vision
informatique. Il ne nécessite aucune connaissance informatique et l’idéal serait qu’il soit réalisé
par le client. Le diagramme des cas d’utilisation n’est pas un inventaire exhaustif de toutes les
fonctions du système. Il ne liste que des fonctions générales essentielles et principales sans
rentrer dans les détails.

a) Identification des acteurs :

Les acteurs sont les entités (personnes ou machines) qui vont interagir avec le nouveau
système. En d’autres termes, ce sont les futurs utilisateurs de celui‐ci. Un acteur humain ne
représente pas forcément un individu. Il se réfère plutôt à un rôle distinct, lequel peut être
assumé par une ou plusieurs personnes. Il représente une façon distincte d’utiliser le système.

ELAA BEN AOUN 9

Un acteur, au sens UML, représente le rôle d’une entité externe (utilisateur humain ou non)
interagissant avec le système.
Dans notre cas les acteurs sont :
 Chef de service : C’est le responsable d’ajout, de modification et de
suppression des utilisateurs de l’application web et de la consultation de l’historique
de pointage
 L’employé : c’est un utilisateur qui peut juste visualiser son compte et
marquer la présence avec l’application mobile

b) Cas d'utilisation
Est une unité cohérente représentant une fonctionnalité visible de l'extérieur. Il réalise un service
de bout en bout, avec un déclenchement, un déroulement et une fin, pour l'acteur qui l'initie. Un
cas d'utilisation modélise donc un service rendu par le système, sans imposer le mode de
réalisation de ce service. Un cas d'utilisation se représente par une ellipse contenant le nom du
cas et optionnellement, au-dessus du nom, un stéréotype. [3]

c) Diagramme des cas d’utilisation global

Le but de cette section est de décrire le comportement attendu de l’application. Pour ce faire,
nous nous basons sur le diagramme de cas d’utilisation global du langage de modélisation UML
pour l’administrateur ainsi que pour l’employé de la partie web et mobile pour modéliser les
fonctionnalités de l’application. Nous montrons ce diagramme qui présente les différentes
activités réalisées par le chef service afin de gérer et contrôler l’application en plus des
différentes activités offertes pour un employé.

ELAA BEN AOUN 10

 Figure 3 : Diagramme de cas d'utilisation global

a. Description
 Description de cas d’utilisation « gérer employé»
Cas d’utilisation Gérer employé

Acteur Chef de Service

Pré-condition Authentification

Scénario nominal 1. Ajouter employé

2. Supprimer employé
3. Rechercher employé
4. Modifier employé

ELAA BEN AOUN 11

  Description de cas d’utilisation « suivre employé»
Cas utilisation Suivre employé

Acteur Chef de service

Pré-condition Authentification

Scénario nominal 1. Suivre l’historique de pointage d’entrée

et sortie de l’employé
2. Suivre les absences de l’employé
3. Suivre la localisation de l’employé

 Description de cas d’utilisation « Importer des fichiers archive »

Cas d’utilisation importer des fichiers archive

Acteur Chef de Service

Pré-condition Authentification

Scénario nominal 1. Choisir des fichiers de données archive

CSV, PDF, EXCEL qui contient les
informations des employées
2. Sélectionner le fichier de sauvegarde et
continuer

ELAA BEN AOUN 12

  Description de cas d’utilisation « gérer congé»
Cas utilisation Gérer congé

Acteur Chef de service

Prés condition Authentification

Scénario nominal 1. un employé peut demander un ou

plusieurs congés. Un congé a un type :
congé annuel, congé de maladie, congé
exceptionnel…
2. Le chef de service peut approuvé ou
refusé la demande

 Description de cas d’utilisation « Marquer la présence

Cas utilisation Marquer la présence

Acteur Employé

Prés condition Authentification

Scénario nominal 1. L’authentification de l’employé

par le camera Scanner le QR code

2. Passage obligatoire par le camera

Scanner le QR code est obligatoire pour
pointer à l’entrée et sortie
3. Peut faire plusieurs tache voir dernier
changement fait par le chef service,
note, demande congé …
4. Table de pointage affiché à l’employé et
à le chef de service

ELAA BEN AOUN 13

 3.2. Diagramme de séquences
Un diagramme de séquences est la représentation graphique des interactions entre les acteurs
et le système selon un ordre chronologique dans la formulation Unified Modeling Language.
Afin de bien illustrer les cas d’utilisations déjà élaborés, et dans le but de mieux représenter
les interactions entre les objets de notre projet selon un point de vue temporel.

a. Authentification coté chef de service

Pour accéder à l’application web, le chef de service est dans l’obligation de s’authentifier
avec son adresse mail et son mot de passe. Le chef de service 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 valides et si ce n’est pas le cas, il avertit le chef service en affichant un message
d’erreur.
En cas de succès, le système vérifie l’existence du compte dans la base de données.
En cas d’échec, le système affiche un message d’erreur à le chef service en lui
demandant de vérifier les champs à remplir .
Si les informations sont correctes, l’authentification est réussie et l’application se dirige
vers la page d’accueil .

Figure 4 : Diagramme de séquences de connexion Chef de service

ELAA BEN AOUN 14

 b. Authentification coté employé

L’authentification employé se diffère à l’authentification de le chef de service, l’une par la

saisie de l’adresse mail et le mot de passe et l’autre par scanne de QR code.
Chaque employé a son carte ID qui contient les QR codes spécifiques ou les QR code
peuvent être imprimés sur papier autocollant afin de pouvoir coller le code simplement chez
l’entreprise, l’employé se connecte à l’application et scanner ce code pour s’authentifier.

Figure 5 : Diagramme de séquences de connexion employé

ELAA BEN AOUN 15

 b. Demande de congé

L’employé se connecte à l’application et effectue la demande d’un congé. Cette demande sera
confirmée par le chef de service.

Figure 6 : Diagramme de séquences de demande de congé

Figure 7:Diagramme de séquences de validation de congé

ELAA BEN AOUN 16

 3.3. Diagramme de classes
Les diagrammes de classes expriment de manière générale la structure statique d’un système, en
termes de classes et de relations entre ces classes.

a. Rôles du diagramme de classes

Le diagramme des classes est un diagramme structurel (statique) qui permet de représenter :
 les classes (attributs +méthodes)
 les associations (relations) entre les classes

b. Les classes
Une classe est une représentation abstraite d’un d’ensemble d’objets, elle contient les
informations nécessaires à la construction de l’objet (c'est-à-dire la définition des attributs et des
méthodes).

c. Les relations
Une association peut apporter de nouvelles informations (attributs et méthodes) qui
n’appartiennent à aucune des deux classes qu’elle relie et qui sont spécifiques à l’association.
Ces nouvelles informations peuvent être représentées par une nouvelle classe attachée à
l’association via un trait en pointillés.

Figure 8:Diagramme de classes

ELAA BEN AOUN 17

  Le diagramme de classes illustre la conception de l’application comme l’indique le
schéma ci-dessus. La classe « Présence » est une classe d’association ternaire liée
aux trois classes employé, date et localisation, qui sont reliées par un losange avec
des traits simples.

 Un employé est caractérisé par un id, un nom, un prénom, un email, un mot de passe
et un Qrcode
 Chaque employé doit marquer sa Présence à chaque fois (un ou plusieurs). Il a un id
présence, un temps d’entrée, un temps sortie, une heure quotidien, un temps de retard,
une tardive heure tot, un temps mort
 La présence est indiquée à chaque fois (un ou plusieurs) par une date (heure, jour,
année) et un lieu (longitude, latitude) de l’employé.
 Pour demander un congé l’employé doit saisir l’id congé, le type de congé, la raison et
fixer la durée et la date (date début, date fin)

3.4. Modèle logique

Figure 9: Modèle Logique

ELAA BEN AOUN 18

 Conclusion
Dans ce chapitre, nous avons essayé de bien présenter les différents diagrammes
conceptuels du projet. Ces diagrammes vont être la base sur laquelle nous allons réaliser
notre projet .Le chapitre suivant intitulé réalisation, nous permettrai de présenter
l’environnement matériel et logiciel de développement ainsi que des imprimes écrans
détaillées de notre application.

ELAA BEN AOUN 19

 Chapitre 3: Réalisation

Introduction
Après avoir détaillé la conception adaptée à mon application, nous allons consacrer le dernier
chapitre de ce rapport à la partie réalisation. Pour cela nous allons présenter dans un premier
lieu l’environnement matériel et logiciel de développement et les outils de travail, Par la suite,
nous décrivons la phase d’implémentation en se basant sur quelques interfaces.

1. Présentation des outils de développement utilisés

1.1. Model MVC (Model View Controller)

Dans notre application, on a utilisé une architecture nommée MVC qui nous a permis
d’organiser le développement de l’application.
La structure de l’application est donc constituée de la manière suivante :

Figure 10 : Modèle MVC

L’application Web utilise un modèle MVC (Modèle Vue Controlleur). Un avantage apporté
par ce modèle est la clarté de l'architecture qu'il impose (service, API, interface). Cela

ELAA BEN AOUN 20

simplifie notre tâche du développeur qui tenterait d'effectuer une maintenance ou une
amélioration sur le projet. La description de chacun des packages mis en oeuvre dans

l’application est la suivante :

• Model : cette partie s’intéresse au traitement métier de l’application (partie la plus
intéressante), elle centralise l’intelligence de l’application (Service) et l’interaction avec la
base de donnée (DAO). On y distingue deux sous couches : DAO (Data Access Object) et
Service.
La couche DAO permet :
 Mapping Objet relationnel (ORM) : Il s’agit d’une transformation (Pont) du model
relationnel de la base de données à un model orienté objet (OO) de l’application. Le
résultat de cette transformation s’appelle les beans (POJO qui respecte le JNS).
 Interaction avec la base de données via les « CRUD operations » (Create, Read,
Update, Delete).

• Contrôler : Intermédiaire entre le View et le Model, il permet le contrôle de la couche

View et l’accès au Model.
•View : l’ensemble des composantes graphiques plusieurs technologies peuvent être utilisées
pour implémenter cette couche : Swing, JSP (Java Server Pages). Quelque exemple de
composantes graphiques (dans le contexte de Swing). [5]

2. Environnement du travail

2.1. Environnement Matériel

Afin d’héberger notre application web local avec l’architecture client-serveur, nous avons
conçu d’un hébergement web. Cela nous permet de stocker toutes les pages de notre
application et les rendre accessibles aux ordinateurs connectés à internet. Nous avons passé à
utiliser Plesk qui permet aux clients d’hébergement Web d’exécuter de nombreuses tâches
depuis une interface robuste et simple d’utilisation : une interface de gestion de serveur
payante et sécurisée avec un certificat SSL/TLS auto-signé gratuit.

ELAA BEN AOUN 21

 Figure 11:Plesk

Pour les différentes étapes de test, d’installation et le déploiement de l’application mobile,

nous avons eu besoin d’un terminal mobile dont les caractéristiques sont les suivantes :
 Nom : Android – Samsung A71
 API : 28
 CPU/ABI: Google Play Intel Atom (x86)

2.2. Environnement Logiciel

2.2.1. Langages utilisés
 HTML5

Il s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments,

attributs et comportements ; mais aussi un ensemble plus large de technologies qui
permettent des sites web plus variés et puissants, et des applications web.
 JavaScript
JavaScript est un langage de programmation intégré au navigateur web. Il constitue
l’un des meilleurs moyens de rendre un site web interactif. En effet, JavaScript est
le seul langage qui fonctionne directement au sein de tout navigateur. Il dispose
d’un accès direct aux images, formulaires et fenêtres qui constituent une page web.

ELAA BEN AOUN 22

  JQuery

JQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter
l'écriture de scripts côté client dans le code HTML. La première version est lancée
en janvier 2006 par John Resig (un petit génie du JavaScript).
2.2.2. Framework et environnent
 Laravel

Laravel est un Framework web open-source écrit en PHP respectant le

principe modèle-vue-contrôleur et entièrement développé en programmation orientée
objet ,la Sécurité et performance. L'un des avantages les plus importants du choix
de Laravel pour le développement de vos applications Web réside dans ses capacités
à fournir une sécurité de haut niveau. Si nous choisissons Laravel, notre application
Web ne présente aucun risque d'injections SQL involontaires et cachées.

 Bootstrap

Bootstrap est un framework qui utilise les langages HTML, CSS et JavaScript pour créer
un site facilement. Ce framework est pensé pour développer des sites avec un design
responsive, qui s'adapte à tout type d'écran, et en priorité pour les smartphones.
 Flutter

Flutter est un Framework de développement d'applications multiplateforme, conçu

par Google, dont la première version a été publiée sous forme de projet open source à
la fin de l'année 2018. Flutter met à disposition une grande variété de bibliothèques
d'éléments d'IU standard pour Android et iOS
Le Flutter SDK se base sur le langage de programmation Dart également
développé par Google. Il se veut le successeur moderne du langage JavaScript
classique et, tout comme ce dernier, il s’exécute directement sur les navigateurs, sous
forme d’application web. Les programmes Dart peuvent aussi être exécutés
directement sur un serveur.

ELAA BEN AOUN 23

 2.2.3. Outils Utilisés
 Visual Studio Code

Visual Studio Code est un éditeur de code open-source développé par Microsoft
supportant un très grand nombre de langages grâce à des extensions. Il supporte l’auto
complétion, la coloration syntaxique, le débogage (exécution pas à pas), et les
commandes git.
 Android Studio

Android Studio propose un environnement de travail complet pour développer des

applications sous Android. Il propose entre autres des outils pour gérer le développement
d’applications multilingues et permet de visualiser la mise en page des écrans sur des
écrans de résolutions variées simultanément
 XAMPP

L'utilisation de XAMPP sert à tester les sites de vos clients ou votre propre site
Web avant de le télécharger sur le serveur Web distant. Ce logiciel
serveur XAMPP vous donne l'environnement approprié pour tester des projets
MYSQL, PHP, Apache et Perl sur l'ordinateur local.
 StarUML

StarUML est un logiciel de modélisation UML (Unified Modeling Language) open

source qui peut remplacer dans bien des situations des logiciels commerciaux et
coûteux
 Git

Git est un système de contrôle de version open source

2.2.4. Base de données

 MYSQL

MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est

distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de
gestion de base de données les plus utilisés au monde, autant par le grand public
(applications web principalement) que par des professionnels, en concurrence
avec Oracle, PostgreSQL et Microsoft SQL Server

ELAA BEN AOUN 24

3. Interfaces réalisées
3.1. Les interfaces de l’application web

 Interface d’authentification du Chef de service

La figure 11 présente l’interface d’authentification qui oblige le chef de service à remplir les
deux champs adresse mail et mot de passe afin d’avoir accès à l’application et bénéficier des
fonctionnalités qui lui sont destinées. Si l’authentification est réalisée avec succès, ceci
permettra le passage à l’interface suivant tableau de bord de la figure 13.

Figure 12:Interface d'authentification du chef de service

Figure 13: Interface de tableau de bord

ELAA BEN AOUN 25

L’interface de la figure 13 représente le tableau de bord qui contient le menu de gestion des
employés, présences et les QR code de l’entreprise pour le Chef de service.

Figure 14:Interface de la liste des QR code

Cette interface répresente la liste des QR code qui regroupe les coordonnées de chaque
employé (nom, QR , date de création et date de modification ) , le chef service donne à chaque
employé son propre QR code qu’il lui permet de marquer sa présence . Pour suivre la
Présence des employés le chef service fait appel aux données de la figure 15

Figure 15:Interface de la liste des présences

Cette interface de la figure 15 permet au chef de service de consulter la liste de présences des
employés détaillée Date d’entrée, date de sortie et leur localisation.

ELAA BEN AOUN 26

 Figure 16 : Interface de paramètres

Cette fenêtre contient les informations liées à l’entreprise son propre QR code et la date de
travail avec la clé de l’application spécifique.

3.2. Les interfaces de l’application mobile

La figure 17 présente l’interface

d’authentification de l’employé sur son
appareil mobile. Dans la première interface,
l’employé s’authentifie par le QR code
spécifique de l’entreprise.
Si l’authentification est réalisée avec
succès, ceci permettra le passage à
l’interface de la figure 18.

Figure 17 : Interface de connexion de

l'employé
 L’employé peut accéder à chaque
fonctionnalité de l'application grâce aux
différents onglets de l’interface de la
figure 18.

Figure 18 : Interface Accueil

Figure 19: Interface de pointage

Pour marquer la date d’arrivée et de départ l’employé doit suivre les étapes suivantes :
 Appuyer sur le bouton adéquat de l’interface de la figure 18. Il lui apparait l’interface de
pointage de la figure 19.
 Appuyer sur le bouton < scan QR > pour scanner QR code à partir de son caméra
Figure 20 : Interface de rapport Figure 21: Interface à propos

La Figure 20 représente l’interface de

La Figure 21 représente l’interface de « à
rapport de chaque employé durant son
propos » qui contient les informations de
travail.
l’entreprise et sa présentation.
 Conclusion générale

L’objectif de ce projet est de créer une application web et mobile pour la gestion des
ressources humaines. Cette application permet aux salariés de pointer leurs heures de travail
sur leur téléphone mobile. C’est dans ce cadre que s’inscrit le présent travail ; en effet, notre
objectif est de développer un smart système de gestion du pointage basé sur un QR code. A
partir de ce système, l’administrateur peut facilement suivre la présence des employés,
consulter le nombre des heures de travail, valider les demandes de congés et faciliter la
communication entre les employés et le chef de service.

Dans le présent rapport, nous avons commencé par mettre en relief l’étude de l’existant et la
critique de l’existant qui nous ont poussés à mettre en place notre solution. Ensuite, nous
avons décrit la phase de conception en se basant sur la méthodologie UML. Enfin, nous avons
implémenté le système proposé en utilisant divers langages de programmation tels que PHP,
DART, et leurs Framework Laravel et Flutter.

Malgré toute l’implication et la volonté que nous avons démontrée pour la réalisation de ce
projet, cela ne nous a pas évité de rencontrer quelques difficultés ou obstacles à différentes
étapes de notre travail. Nous sommes bel et bien conscients que cela est tout à fait naturel
dans toute démarche de ce genre et qu’un projet sans obstacles serait trop parfait pour exister.
D’un point de vue technique, ce projet nous a permis de mettre en œuvre les acquis théoriques
et de les enrichir par la découverte de nouvelles technologies.

Nous pouvons conclure enfin que notre application peut être considérablement étendue par
l’ajout de nouvelles fonctionnalités telles que la partie IOS de l’application mobile et pour
l’application web le paiement de salariés.
 Références

[1] https://mega-dev.net/fr/

[2] https://www.smart-packaging.fr/statistique-du-qr-code-qui-est-en-
croissance/#:~:text=30%25%20des%20utilisateurs%20de%20smartphones%20ont%20scann
%C3%A9%20un%20QR%2Dcode&text=Environ%2010%25%20des%20utilisateurs%20de,s
cann%C3%A9%20au%20moins%20une%20fois.

[3] https://programmation.developpez.com/actu/286180/Quels-sont-les-meilleurs-langages-
de-programmation-a-apprendre-en-2020-Voici-un-classement-de-ces-langages-selon-le-cas-d-
utilisation/

[4] https://openclassrooms.com/fr/courses/4670706-adoptez-une-architecture-mvc-en-
php/4678736-comment-fonctionne-une-architecture-mvc

[5] https://cynoteck.com/fr/blog-post/flutter-basics-why-use-flutter-for-mobile-app-
development/
 Liste des acronymes

RH : Ressources Humaines
UML: Unified Modeling Language
QR: Quick Response
GRH : Gestion des Ressources Humaines
RFID: Radio Frequency Identification
SSL: Secure Socket Layer
TLS : Sécurité de la couche de transport