Rapport de stage

Conception et développement d’une application de pointage

et gestion de présence

effectué par Troudi Nassim

du 03/07/2023 au 02/08/2023

Tuteur de stage : Calbousi Majdi

Établissement : Institut Supérieur d'Informatique et de Multimédia de Gabès

Entreprise d’accueil : Rgi Group (Tunisie)
 Remerciements

En premier lieu, Je tiens à exprimer ma profonde gratitude envers M. jihed MARAD, directeur de
l’entreprise Rgi Tunisie, ainsi qu'à M. majdi CALBOUSI, pour l'opportunité exceptionnelle qu'ils
m'ont offerte de réaliser mon stage au sein de RGI Groupe. Leur leadership inspirant et leur
dévouement envers notre développement professionnel ont été inestimables. Grâce à leur
encadrement expert, j'ai pu acquérir des compétences précieuses et élargir mes horizons dans le
domaine professionnel. Leur soutien constant et leurs conseils avisés ont contribué de manière
significative à mon apprentissage, et je suis profondément reconnaissant pour cela.

Je saisi saisir cette occasion pour adresser mes profonds remerciements aux responsables et au
personnel de l’Institut Supérieur d'Informatique et de Multimédia de Gabès.
Je désire aussi remercier les professeurs de l‘Institut Supérieur d'Informatique et de Multimédia
de Gabès, qui m’ont fourni les outils nécessaires au bon déroulement de mon stage.

Troudi nassim

2
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
Table des matières
INTRΟDUCTIΟN GÉNÉRALE ..................................................................................................

Chapitre I : Cadre Générale ..........................................................................................................

1.1 Introduction .............................................................................................................................. 6.

1.2 Présentation de la société RGI .................................................Error! Bookmark not defined.
1.3 Présentation d’application de pointage et gestion de présence .. Error! Bookmark not
defined.
1.3.1 Définition ..............................................................................................................................
1.3.2 Objectifs ................................................................................................................................
1.3.3 Fonctionnalités Clés ............................................................................................................
1.4 Conclusion...................................................................................................................................
Chapitre II : MΟDELISATIΟN CΟNCEPTUELLE .....................................................................

2.1 Introduction .................................................................................................................................

2.2 Analyse des besoins ..................................................................................................................
2.2.1 Spécification des besoins fonctionnels ..........................................................................
2.2.2 Spécification des besoins non fonctionnels ..................................................................
2.3 Modèle de cas d’utilisation ......................................................................................................
2.3.1 Cas d’utilisation « s’inscrire » .............................................................................................
2.3.2 Cas d’utilisation « Faire les pointages »...........................................................................
2.3.3 Cas d’utilisation « Gere les conges » ...............................................................................
2.4 Représentation de diagramme de classes .............................................................................. 1.
2.5 Vue statique ..................................................................................................................................
2.5.1 Architecture physique........................................................................................................
2.5.2 Architecture logique ..........................................................................................................
2.5.2.1 Présentation de l'architecture MVC ....................................................................
2.5.2.2 Conception détaillée des couches de l’architecture MVC..........................
2.6 Vues dynamiques .........................................................................................................................
2.6.1 Représentation de diagramme de séquence .............................................................
2.6.2 Diagramme de séquence "s'authentifier " .....................................................................
2.6.3 Diagramme de séquence " pointage " .........................................................................
2.6.4 Diagramme de séquence " Gere les conges ".............................................................
3
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.7 La modélisation de processus à l'aide de BPMN ......................................................................
2.7.1 Modelé BPMN de " system demande un conge " .......................................................
2.7.2 Modelé BPMN de " system demande de bureau "......................................................

2.7.3 Modelé BPMN de " system de présence " .....................................................................

Chapitre III : REALISATION ET TESTS ....................................................................................

3.1 Introduction .................................................................................................................................

3.2 Spécifications de l’environnement de travail ......................................................................
3.2.1 Environnements matériels .................................................................................................
3.2.2 Environnements logiciels....................................................................................................
3.3 Les technologies utilisées côté client ....................................................................................
3.3.1 HTML 5 ....................................................................................................................................
3.3.2 CSS .........................................................................................................................................
3.3.3 JavaScript .............................................................................................................................
3.3.4 Bootstrap ...............................................................................................................................
3.4 Les technologies utilisées côté server ...................................................................................
3.4.1 MySQL ...................................................................................................................................
3.4.2 PHP .........................................................................................................................................
3.4.3 Apache Tomcat .................................................................................................................
3.5 Les outils .......................................................................................................................................
3.5.1 Outil de spécification et conception .............................................................................
3.5.2 Outil de test ..........................................................................................................................
3.6 Présentation de notre application ..........................................................................................
3.6.1 Interface d'authentification..............................................................................................
3.6.2 Interface s’inscrire ...............................................................................................................
3.6.3 Interface d’accueil.............................................................................................................

4
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 5
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 INTRΟDUCTIΟN GÉNÉRALE

La gestion efficace du temps et de la présence des employés est un élément vital pour
toute organisation soucieuse de son efficacité opérationnelle. Dans ce contexte, les systèmes de
pointage et la gestion de la présence jouent un rôle central. Ces systèmes, autrefois simples et
manuels, ont évolué pour devenir des outils technologiques sophistiqués qui optimisent la
productivité, la transparence et la conformité au sein des entreprises modernes.

La gestion du temps et de la présence des employés englobe un large éventail d'activités,

allant de la simple entrée et sortie des locaux de l'entreprise à la gestion des heures de travail,
des congés payés, des absences, et même des heures supplémentaires. Elle revêt une
importance particulière dans les secteurs où les coûts de main-d'œuvre constituent une part
substantielle des dépenses globales. Une gestion inadéquate du temps peut avoir des
répercussions significatives sur la rentabilité, la qualité du service et la satisfaction des
employés.

Les systèmes de pointage modernes offrent des avantages considérables aux employeurs
et aux employés. Pour les employeurs, ces systèmes fournissent des données précises sur le
temps de travail, permettant ainsi une gestion efficace des effectifs et une prise de décision
éclairée. Ils facilitent également la conformité avec les réglementations du travail et minimisent
les risques juridiques associés à la gestion du personnel. Du point de vue des employés, les
systèmes de pointage automatisés réduisent les erreurs de calcul de salaire, garantissent un
traitement équitable et favorisent la flexibilité en matière d'horaires.

L'ère numérique a révolutionné la manière dont les entreprises abordent la gestion de la

présence. Les méthodes traditionnelles de pointage, telles que les horodateurs mécaniques et
les feuilles de présence manuelles, font désormais place à des solutions informatisées intégrant
des technologies de pointe. Les systèmes biométriques, tels que la reconnaissance faciale, les
empreintes digitales ou la reconnaissance vocale, ont rendu la vérification de l'identité plus
sécurisée et précise que jamais. De plus, les logiciels de gestion des ressources humaines (RH)
associés aux systèmes de pointage permettent une intégration transparente des données de
présence dans l'ensemble du processus RH.

6
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
Chapitre I : Cadre Générale
1.1 Introduction

Ce chapitre est réservé à la présentation de l'idée générale du projet ainsi que le cadre
dans lequel s'est déroulé le travail.

1.2 Présentation de la société RGI

La société RGI (Risques, Gestion, Informatique) est une entreprise internationale

spécialisée dans le domaine des solutions logicielles pour le secteur de l'assurance. Fondée en
1987, RGI a son siège social à Milan, en Italie, et est présente dans plusieurs pays à travers le
monde, dont la Tunisie.

1.3 Présentation d’application de pointage et gestion de présence

1.3.1 Définition
L'application de pointage est un outil essentiel pour de nombreuses entreprises et
organisations. Elle vise à automatiser et à simplifier le suivi des heures de travail des employés,
permettant ainsi une gestion plus efficace de la présence et du temps passé au travail. Cette
présentation vous plongera dans le monde de cette application, en mettant en évidence son
importance et ses fonctionnalités clés.

1.3.2 Objectifs

L'objectif principal de l'application de pointage est de fournir une solution centralisée

pour enregistrer et suivre les entrées et sorties des employés. Ses principaux objectifs sont les
suivants :

• Suivi du Temps de Travail : L'application permet aux employés d'enregistrer l'heure à

laquelle ils commencent et terminent leur journée de travail, ainsi que leurs pauses.
• Gestion des Présences : Elle aide les gestionnaires à avoir une vue d'ensemble de la
présence des employés, y compris les absences et les congés.

7
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 1.3.3 Fonctionnalités Clés

Les fonctionnalités clés d'une application de pointage peuvent varier en fonction de

ses spécifications, mais voici quelques-unes des fonctionnalités les plus courantes :

• Enregistrement des Entrées et Sorties : Les employés peuvent enregistrer leur entrée et
leur sortie en scannant une carte, en utilisant une application mobile ou web
• Gestion des Horaires : Les gestionnaires peuvent créer et gérer les horaires de travail, en
tenant compte des quarts de travail, des pauses et des jours de congé.

1.4 Conclusion
En résumé, une application de pointage est un outil puissant pour la gestion du temps et
de la présence des employés. Elle simplifie les processus, accroît l'efficacité et contribue à une
meilleure conformité légale. Son utilisation peut être bénéfique pour toutes sortes
d'organisations, des petites entreprises aux grandes entreprises, en passant par les institutions
publiques.

8
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
Chapitre II : MΟDELISATIΟN CΟNCEPTUELLE

2.1 Introduction

Un modèle conceptuel sert de passerelle entre la complexité du monde réel et la

création d'un système compréhensible et fonctionnel. À la lumière de notre exploration des
besoins des utilisateurs, telle qu'elle a été décrite dans le chapitre précédent, nous abordons
maintenant la phase de conception de notre système. Pour ce faire, j’utilise des diagrammes
UML (Unified Modeling Language) et des modelés BPMN (Business Process Model and
Notation) , qui agissent comme des cartes de navigation dans le paysage complexe de mon
projet. Ces diagrammes fournissent une représentation visuelle de mes idées et de la structure
du système à venir. En somme, ils sont les plans architecturaux qui guideront la construction de
mon application.

2.2 Analyse des besoins

L'analyse des besoins est une étape cruciale dans le processus de développement d'un
système. Dans cette section, je vais procéder à l'identification des acteurs qui interagiront avec
mon système. Les acteurs sont les utilisateurs.
Voici les acteurs clés identifiés :

a. L’administrateur : c’est le responsable d’application web.

b. Employés : Les utilisateurs finaux de notre application, ils doivent pouvoir
enregistrer leurs entrées et sorties de manière simple et efficace,
enregistrer leurs congés et demandes des bureaux.

2.2.1 Spécification des besoins fonctionnels

L’application permet à l’administrateur de :
• Consulter liste des conges
• Gere les demandes des conges
• Gere les demandes des bureaux
• Consulter liste des réservations des bureaux
• Consulter les pointages
• Consulter liste des employés

9
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 L’application permet à l’employé de :
• Consulter leur information
• Demandes des conges
• Demandes des bureaux
• Faire les pointages
• Consulter les pointages
• Consulter liste des conges
• Consulter liste des bureaux

2.2.2 Spécification des besoins non fonctionnels

Les besoins non fonctionnels sont tout aussi cruciaux que les besoins fonctionnels,
car ils définissent les paramètres et les contraintes qui garantissent le bon
fonctionnement de l'application. Voici les besoins non fonctionnels essentiels pour notre
système de pointage

➢ Performance :
• Temps de Réponse : Le système doit offrir des temps de réponse rapides pour
garantir une expérience utilisateur fluide, même lorsqu'il est fortement
sollicité.
• Scalabilité : Le système doit pouvoir s'adapter à une augmentation du
nombre d'utilisateurs sans perte de performance significative.

➢ Sécurité :

• Confidentialité des Données : Les données de pointage et les informations

utilisateur doivent être hautement sécurisées pour empêcher tout accès non
autorisé.
• Intégrité des Données : Les données enregistrées ne doivent pas être
altérées par des utilisateurs non autorisés.

➢ Fiabilité :

• Stabilité : Le système doit être stable, sans plantages fréquents ni erreurs

critiques.
• Sauvegarde des Données : Des mécanismes de sauvegarde réguliers doivent
être mis en place pour éviter toute perte de données.

10
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 ➢ Facilité d'Utilisation :

• Interface Utilisateur Conviviale : L'interface utilisateur doit être intuitive et

conviviale pour faciliter la saisie du pointage par les employés.

➢ Compatibilité :
• Compatibilité Navigateur : Le système doit être compatible avec les principaux
navigateurs Web, tels que Chrome, Firefox, Safari et Edge.

2.3 Modèle de cas d’utilisation

Figure 1 : décrit le Diagramme de cas d’utilisation globale de mon application web

Figure 1 : Diagramme de cas d'utilisation

11
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.3.1 Cas d’utilisation « s’inscrire »

Le tableau 1 représenté le scénario de cas d’utilisation « s’inscrire »

Cas d’utilisation S’inscrire

Acteur Un employé

Préconditions Un nouvel employé

Postcondition Les paramètres doivent être correcte

Description du scénario nominal 1. l’employé demande la page d’inscription.
2. Le système affiche un formulaire a l’employé.
3. l’employé saisi l’information demandes.

Description du scénario alternatif Données saisies non valider

• Le système demande au l’employé de vérifier les
informations saisies

Exception L’employé n’a pas rempli les informations nécessaires

Tableau 1 : Scénario de cas d’utilisation « s’inscrire »

12
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.3.2 Cas d’utilisation « Faire les pointages »

Le tableau 2 représenté le scénario de cas d’utilisation « Faire les pointages »

Cas d’utilisation Faire les pointages

Acteur Un employé

Préconditions L'employé doit être authentifié dans le système.

Postcondition Le système enregistre les données du pointage, y compris

la date, l'heure, et l'identifiant de l'employé.
Description du scénario nominal 1. L'employé ouvre la page de pointage.
2. Le système affiche l'interface de pointage.
3. L'employé sélectionne l'option « Pointage d’Entrée »,
« Pointage de Sortie », « commencer le pause » ou
« reprise de travail ».
4. Le système affiche l'interface selon le choix.
5. Le système enregistre la date et l'heure actuelles de
pointage.
6. Le système confirme l'enregistrement du pointage et
affiche un message de succès.

Exception Pointage de Sortie sans Pointage d'Entrée

Tableau 2 : Scénario de cas d’utilisation « Faire les pointages »

13
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.3.3 Cas d’utilisation « Gere les conges »

Le tableau 3 représenté le scénario de cas d’utilisation « Gere les conges »

Cas d’utilisation Gere les conges

Acteur Administrateur

Préconditions L'administrateur ou le responsable des ressources

humaines doit être connecté au système avec des droits
d'accès administratifs.

Postcondition Toutes les actions (accepter, refuser) sont enregistrées.

Les employés sont informés des décisions prises
concernant leurs demandes de congé.
Description du scénario nominal 1. L'administrateur se connecte au système en utilisant
des informations d'identification spécifiques.
2. L'administrateur accède aux demandes des congés à
partir d'un tableau de bord administratif.
3. Le système affiche la liste de toutes les demandes de
congé soumises par les employés.
4. L'administrateur peut effectuer les actions :
• Accepter
• Refuser
5. Le système enregistre toutes les actions effectuées par
l'administrateur.
Exception Il n'y a pas de demande de congé.

Tableau 3 : Scénario de cas d’utilisation « Gere les conges »

14
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
2.4 Représentation de diagramme de classes

La figure 2 représente le diagramme des classes de mon application. On a utilisé les

classes suivantes : "employées", " conge", "pointages" et "breaux " , ses classes ont plusieurs
paramètres et propriétés

Figure 2 : Diagramme des classes

15
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
2.5 Vue statique

La vue statique offre une représentation complète du système à modéliser, englobant

à la fois son aspect « physique » et « logique » :

2.5.1 Architecture physique

Mon application repose sur une architecture de type client-serveur, qui se compose de deux
éléments distincts :

• Une partie cliente, développée avec HTML, CSS ,BOOTSTRAP et JAVASCRIPT.

• La partie serveur de notre application utilise MySQL en tant que système de gestion de
base de données. MySQL stocke les données de l'application, telles que les informations
des utilisateurs, les enregistrements de pointage, etc. Le serveur, généralement alimenté
par Apache Tomcat ou un autre serveur d'application, est constamment à l'écoute des
requêtes provenant du client. Lorsque le client envoie des demandes au serveur, ce
dernier les traite en temps réel et renvoie des réponses appropriées.
La figure 3 représente l’architecture client/serveur de notre application.

Navigateur

Client serveur d’application serveur de bd

Figure 3 : Architecture client/serveur de notre application

Comme le montre la Figure 3, la partie cliente de notre application est composée d'interfaces
conçues en utilisant HTML, JavaScript et CSS + Bootstrap. Ces interfaces interagissent avec la
base de données via les services fournis par MySQL, assurant ainsi la synchronisation des
données entre les différents clients.
** bd : base de données
16
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.5.2 Architecture logique

2.5.2.1 Présentation de l'architecture MVC

Mon système utilise l'architecture MVC (Modèle, Vue et Contrôleur), un concept

puissant dans le développement d'applications. Cette architecture vise à bien séparer les
données (le modèle), l'interface utilisateur (la vue) et la logique de contrôle (le contrôleur).
L'avantage clé de cette approche est son indépendance.
En résumé, avec l'architecture MVC, nous pouvons mettre à jour l'apparence de Mon
application (les vues) sans avoir à toucher aux données (les modèles. De même, si des
modifications sont nécessaires dans la gestion des données ou dans la logique de
traitement, elles peuvent être apportées sans affecter l'interface utilisateur.
Cette séparation des responsabilités facilite l'évolutivité et la maintenance de
l'application. Chaque composant de l'architecture MVC peut être développé, testé et
modifié de manière indépendante des autres.

2.5.2.2 Conception détaillée des couches de l’architecture MVC

Dans ce paragraphe, je vais détailler la conception de chaque couche du patron de

conception MVC. La figure 4 montre les interactions principales entre les couches de
l'architecture MVC

Figure 4 : Les interactions principales entre les couches de l’architecture MVC

17
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 Modèle (Model) : Le modèle correspond à la base de données MySQL. Il contient toutes
les données de l'application, telles que les informations des utilisateurs, les enregistrements de
pointage, etc. Les interactions avec la base de données, y compris les requêtes SQL et les mises
à jour, sont gérées au sein du modèle.
MySQL est un système de gestion de base de données relationnelles (SGBDR) open source
très populaire. Il est largement utilisé pour stocker, gérer et récupérer des données dans de
nombreuses applications, qu'elles soient petites ou grandes. MySQL offre des fonctionnalités
avancées pour la gestion des bases de données, notamment la prise en charge du langage SQL
(Structured Query Language) pour l'interrogation et la manipulation des données. Il est
également connu pour sa rapidité, sa fiabilité et sa facilité d'utilisation.

Figure 5 : Base de données MySQL de l’application

Contrôleur (Controller) : Apache Tomcat remplit le rôle du contrôleur dans cette

architecture. Le serveur Tomcat reçoit les demandes HTTP des clients (navigateurs) et les dirige
vers les composants appropriés de l'application. Il traite la logique de l'application, coordonne
les actions et communique avec le modèle (la base de données MySQL) pour récupérer ou
mettre à jour les données.
Vue (View) : Les parties visuelles de votre application, créées avec HTML et stylisées avec
CSS, constituent la vue. Les pages web que les utilisateurs voient, interagissent et naviguent
représentent la vue. Cette partie se concentre sur la présentation des données et l'interaction
avec l'utilisateur.

18
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
2.6 Vues dynamiques

Les vues dynamiques, sous forme de diagrammes de séquence, illustrent le

fonctionnement de notre système en décrivant le déroulement des actions et des interactions
entre ses composants.

2.6.1 Représentation de diagramme de séquence

Les diagrammes de séquence sont un outil précieux pour décrire un cas d'utilisation en
mettant en lumière les interactions temporelles entre les différentes instances d'objets. Ils
servent à documenter de manière approfondie les scénarios d'utilisation, à identifier les acteurs
impliqués, et à examiner leur utilisation au fil du temps.

2.6.2 Diagramme de séquence "s'authentifier "

Ce diagramme représente le cas d’utilisation « s'authentifier » en utilisant le diagramme

de séquence.
La figure 6 explique le processus qui permet à l’employée de s'authentifier.

Figure 6 : Diagramme de séquence « s'authentifier »

19
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.6.3 Diagramme de séquence "pointage "

Ce diagramme représente le cas d’utilisation « Faire pointage » en utilisant le diagramme de

séquence.
La figure 7 explique le processus qui permet à l’employée de faire le pointage.

Figure 7 : Diagramme de séquence « pointage »

20
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.6.4 Diagramme de séquence " Gere les conges "

Ce diagramme représente le cas d’utilisation « Gere les conges » en utilisant le diagramme

de séquence.
La figure 8 explique le processus qui permet à l’administrateur de gère les congés.

Figure 8 : Diagramme de séquence « gère les conges »

2.7 La modélisation de processus à l'aide de BPMN

Dans cette partie, je vais représenter visuellement les étapes d'un processus, les décisions,
les flux de travail, et les responsabilités, ce qui facilite la communication et la collaboration au
sein de l’application.

21
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.7.1 Modelé BPMN de " system demande un conge "
Ce modèle représente les étapes de système « demande un conge ».
La figure 9 explique le processus de système de conge.

Figure 9 : Modelé BPMN de « system demande un conge

2.7.2 Modelé BPMN de " system demande de bureau "

Ce modèle représente les étapes de système « demande un bureau ».

La figure 10 explique le processus de système de réservation d’un bureau

Figure 10 : Modelé BPMN de « system demande de bureau »

22
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 2.7.3 Modelé BPMN de " system de présence"

Ce modèle représente les étapes de système « présence ».

La figure 11 explique le processus de système de pointage

Figure 11 : Modelé BPMN de « system de présence »

2.8 Conclusion

Ce chapitre a été consacré à la conception de projet, utilisant des diagrammes UML et

des modèle BPMN qui serviront de base au développement de l’application. Cette phase
d'analyse et de conception constitue une étape essentielle dans la construction de l’application.

Le prochain chapitre se concentrera sur la phase de réalisation, où je présente

l'architecture matérielle, l'environnement de travail et les interfaces de l’application.

23
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
Chapitre III : Réalisation et tests

3.1 Introduction

L'étape d'implémentation est le point culminant du travail effectué dans le chapitre

précédent, où j’ai eu établi les spécifications des besoins et conception de mon application.
Dans la première partie de ce chapitre, je vais vous présenter l'environnement de
développement qui a joué un rôle clé dans la réalisation de ce projet. Je vous expliquer
également les diverses technologies, langages et outils que j’ai utilisés.
La deuxième partie de ce chapitre se concentrera sur la présentation du travail que j’ai
accompli à travers les interfaces de mon application. Je vous fournirai une description détaillée
des fonctionnalités que J’ai développées.

3.2 Spécifications de l’environnement de travail

3.2.1 Environnements matériels

La programmation et le test de notre projet ont étés effectuées sur un ordinateur avec les
capacités suivantes :

Marque MSI GF63 Thin 11SC

Microprocesseur 11th Gen Intel(R) Core (TM) i5-11400H @ 2.70GHz
Mémoire vive 8,00 Go
Disque dur 500 Go
Carte graphique NVIDIA GPU GeForce GTX 1650 2,00 Go
Système d'exploitation Windows 11 Professionnel
Tableau 4 : Caractéristiques pc

24
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 3.2.2 Environnements logiciels

Comme il a été présenté dans le chapitre précédant, notre application est composée de
deux parties :

• Côté client (front end) : nous avons utilisé

- HTML
- CSS
- BOOTSTRAP
- JAVASCRIPT

La partie visible d'un site web, c'est ce que l'utilisateur voit et interagit avec lorsqu'il
charge une page. Elle comprend le code HTML qui structure le contenu de la page, les styles
CSS, y compris Bootstrap pour une mise en page responsive et esthétique, ainsi que les
fonctionnalités interactives implémentées en JavaScript. C'est cette combinaison de
technologies qui crée l'expérience utilisateur sur un site web.

• Côté serveur (front end) : Nous avons développé une application web en utilisant
Apache Tomcat comme serveur et MySQL comme base de données. Cette application
comporte une partie frontend, qui représente l'interface avec laquelle les utilisateurs
interagissent, et une partie backend, qui gère la logique de l'application du côté du
serveur.
Le frontend est composé de HTML, CSS, et JavaScript, avec l'utilisation de
Bootstrap pour la mise en page. Cette partie est cruciale pour offrir une expérience
utilisateur conviviale.
Le backend gère les requêtes, les traitements de données, les accès à la base de
données, et d'autres aspects liés à la logique interne de l'application. Nous avons choisi
Apache Tomcat et MySQL pour cette partie, ce qui permet de fournir des services
dynamiques aux utilisateurs.
En combinant ces technologies frontend et backend, nous avons créé une
application web complète, capable de répondre aux besoins des utilisateurs tout en
assurant une gestion efficace des données et une expérience utilisateur de qualité.

25
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
3.3 Les technologies utilisées côté client
3.3.1 HTML 5 (HyperText Markup Language) : est le langage de balisage utilisé pour
structurer le contenu d'une page web. Il définit la manière dont les éléments
(texte, images, liens, etc.) sont affichés sur la page.

3.3.2 CSS (Cascading Style Sheets) : est utilisé pour définir la présentation visuelle de
la page web. Il permet de contrôler la mise en page, les couleurs, les polices, les
tailles et d'autres aspects du design.

3.3.3 JavaScript : est un langage de programmation côté client qui permet d'ajouter
des fonctionnalités interactives à une page web. Il peut être utilisé pour valider
les formulaires, créer des animations, interagir avec l'utilisateur en temps réel,
etc.

3.3.4 Bootstrap : est un Framework CSS et JavaScript open source qui simplifie la
création de mises en page réactives et la conception d'interfaces utilisateur
attrayantes. Il offre une bibliothèque de composants prédéfinis, facilitant ainsi le
développement.
3.4 Les technologies utilisées côté server
3.4.1 MySQL : est un système de gestion de base de données relationnelles (SGBDR)
populaire. Il est utilisé pour stocker et gérer les données de votre application, que
ce soit des informations utilisateur, des données de produits, des journaux, etc.

3.4.2 PHP : est un langage de script côté serveur couramment utilisé pour développer
des applications web dynamiques. Il peut interagir avec la base de données
(comme MySQL) pour récupérer et afficher des données dynamiques sur le
frontend.

3.4.3 Apache Tomcat : est un serveur d'application Java utilisé pour exécuter des
applications web basées sur Java. Il permet de déployer des applications Java,
notamment des applications web Java EE (Java Platform, Enterprise Edition).
Ces technologies forment une pile (stack) côté serveur typique pour le développement
d'applications web. MySQL est utilisé pour la gestion des données, PHP est utilisé pour la
logique côté serveur et la génération de pages web dynamiques, et Apache Tomcat est utilisé
pour l'exécution d'applications Java. Cela permet de créer des applications web interactives et
dynamiques avec une interaction entre PHP et MySQL et une gestion de la logique métier côté
serveur avec Apache Tomcat.
26
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
3.5 Les outils

3.5.1 Outil de spécification et conception

StarUML : est un logiciel créer des diagrammes UML.

Camunda modeler : est un logiciel pour créer des modèle BPMN

3.5.2 Outil de test

Pour tester l'application, j’ai utilisé le navigateur web Google Chrome.

3.6 Présentation de notre application

Notre application web, intitulée "pointage RGI", est une application destinée aux
sociétés. Cette application facilite les pointages et les demande des conges avec la
réservation des bureaux.

3.6.1 Interface d'authentification

Pour accéder à l'application, l'utilisateur doit se connecter. Il est important de noter

que l'utilisateur peut être soit un employé, soit un administrateur.

La figure 12 montre l'interface d'authentification :

Figure 12 : Interface d'authentification

27
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
Pour s'authentifier un utilisateur doit écrire son adresse email et son mot de passe, s'il n'a pas
un compte sur la plateforme, il doit retour à la page d’accueil et s'inscrire en cliquant sur le
bouton « s’inscrire »

3.6.2 Interface s’inscrire

Pour utilise l'application, l'utilisateur doit s’inscrire.

La figure 13 montre l'interface d’inscription :

Figure 13 : Interface s’inscrire

Pour s'inscrire un utilisateur doit écrire son prénom nom adresse email département
mot de passe et son poste.

28
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 3.6.3 Interface d’accueil

Cette page aide l’utilisateur pour accède à l’interface d’authentification ou à l’interface de

s’inscrire.
La figure 14 montre l'interface d’accueil :

Figure 14 : Interface accueil

On clique sur la Button « Se connecter » l’utilisateur accède à l’interface d’authentification et On

clique sur la Button « S’inscrire » l’utilisateur accède à l’interface d’inscrire.

29
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023
 30
Troudi nassim Conception et développement d’une application de pointage et gestion de présence Année 2022/2023