RAPPORT DE STAGE :

Développement d'une Application De

Gestion des employés

Brevet de technicien supérieur en marketing et multimédia

1 ère année

ENTREPRISE D'ACCUEIL : AZIIN, Sfax

REALISE PAR : Trigui Mohamed

Encadrante : Mme Ati Ameni

Stage effectué du 01-02-2023 au 28-02-2023

 Dédicaces
Nous tenons c’est avec grande plaisir que nous déduisons
ce modeste
travail :
À l’être le plus cher de nos vies, nos parents.
À nos chers frères et sœurs.
Toutes personnes qui occupent une place dans nos cœurs.
À tous nos amis qui nous toujours encouragent.
Nous déduisons ce travail à tous ceux qui ont participé à
nos réussies.

Trigui Mohamed & rapport de stage 2

 Remerciements

J'adresse mes sincères remerciements aux personnes suivantes qui ont contribué à rendre
mon stage le plus enrichissant possible, en partageant leur temps, leur bienveillance et leur
expertise :

Madame Atii Ameni chef de projet, ma tutrice, que je tiens à remercier tout
particulièrement pour son soutien inestimable, ses conseils avisés et son accompagnement tout au
long de la réalisation des missions décrites dans ce rapport.

Je tiens également à exprimer ma profonde reconnaissance envers l'équipe d'employés

d'AZIIN pour l'expérience exceptionnelle et enrichissante qu'ils m'ont offerte au cours de ce mois
au sein de l'entreprise.

Enfin, un grand merci à mes parents pour leur soutien logistique, leur soutien moral, ainsi
que leurs conseils pratiques qui m'ont été d'une grande utilité.

Cordialement, Trigui Mohamed

Trigui Mohamed & rapport de stage 3

 Table des matières
Introduction.................................................................................................................................................1
Chapitre 1 : Présentation générale de l’entreprise.......................................................................................2
1. Présentation..............................................................................................................................2
Chapitre 2 : Etude préliminaire....................................................................................................................3
1. Introduction..............................................................................................................................3
2. Etude de l’existant :...................................................................................................................3
2.1. Critique de l’existant :...............................................................................................................3
2.2. Solutions proposées :...............................................................................................................4
3. Contribution attendue du produit..............................................................................................4
3.1. Objectifs....................................................................................................................................4
4. Fonctionnalités générales du produit.......................................................................................5
Conclusion...................................................................................................................................................5
Chapitre 3 : Modélisation conceptuelle........................................................................................................6
Introduction.................................................................................................................................................6
1. Choix de la méthodologie de conception :................................................................................6
1.1. Définition de l’UML...................................................................................................................6
1.2. Justification de choix de méthodologie UML............................................................................7
2. Conception de l’application :....................................................................................................7
2.1. Digramme de cas d’utilisation..................................................................................................8
2.1.1. Définition du diagramme de cas d’utilisation.....................................................................8
2.1.2. Identification des acteurs et leurs interactions....................................................................8
2.1.3. Diagramme de cas d’utilisation de l’administrateur...........................................................9
2.2. Diagramme de classe..............................................................................................................10
2.2.1. Modélisation diagramme de classe :.................................................................................10
2.3. Diagramme de séquence :......................................................................................................11
2.3.1. Définition du diagramme de séquence :...........................................................................11
2.3.2. Diagramme de séquence du cas d’utilisation « Authentification »..................................11
2.3.3. Diagramme de séquence du cas d’utilisation « Ajouter des employés »..........................13
Conclusion.................................................................................................................................................14
Chapitre 4 : Développement et réalisation..................................................................................................14
1. Les logiciels utilisés :................................................................................................................14
2. Quelques identités visuelles réalisé.........................................................................................17

Trigui Mohamed & rapport de stage 4

 3. Les langages utilisés.................................................................................................................18
4. Les bibliothèques utilisées.......................................................................................................20
5. Serveur web utilisé..................................................................................................................20
6. les étapes de création de notre application :............................................................................21
6.1 WoodArt:......................................................................................................................................21
6.2 Page authentication:...............................................................................................................21
6.3 Gestion des Exceptions de Connexion....................................................................................22
6.4 Partie Administratif “Gestion des employés”.........................................................................23
6.5 Affiche des employés par poste..............................................................................................24
6.6. Page d’ajout des employés.....................................................................................................26
6.7. Page de modification des employés.......................................................................................28
Conclusion générale...................................................................................................................................29

LISTE DES FIGURES

Trigui Mohamed & rapport de stage 5
Figure 1: logo de l’UML.................................................................................................................................7
Figure 2 : Diagramme de cas d’utilisation de l’administrateur (Authentifier + Gestion des employés.......9
Figure 3: Diagramme de classe.....................................................................................................................10
Figure 4: Diagramme de séquence du cas d’utilisation « Authentifier ».....................................................12
Figure 5:Diagramme de séquence du cas d’utilisation « Ajouter des Employés » :....................................13
Figure 6: Logo de Visual Studio Code.........................................................................................................14
Figure 7: Logo de StarUML.........................................................................................................................15
Figure 8: Logo de Adobe Photoshop............................................................................................................15
Figure 9: Logo de WampServer 64..............................................................................................................16
Figure 10 : Logo créée par Illustrateur.........................................................................................................17
Figure 11: Photo à publier dans les médias..................................................................................................18
Figure 12:Carte visite réalisé pour l'entreprise WoodArt.............................................................................18
Figure 13: Page d'authentification du site WoodArt.....................................................................................22
Figure 14:cas de saisie fausse d'adresse ou mot de passe.............................................................................22
Figure 15:Cas de laisser un champ vide.......................................................................................................23
Figure 16: Page d'accueille...........................................................................................................................24
Figure 17: Affiche par poste "designers"......................................................................................................25
Figure 18:Affiche par poste "designers".......................................................................................................25
Figure 19:Formulaire d'ajout d'employé.......................................................................................................26
Figure 20:Erreur champ vide........................................................................................................................27
Figure 21: Erreur id existante.......................................................................................................................27
Figure 22: Page de modification...................................................................................................................28

LISTE DES TABLEAUX

Tableau 1 : Liste des cas d’utilisation et leur Description relatifs à l’administrateur....................................9

Trigui Mohamed & rapport de stage 6

Trigui Mohamed & rapport de stage 7
 Introduction

CADRE DE STAGE

Au cours de ma formation, j'ai eu l'opportunité d'effectuer un stage en entreprise d'une

durée d'un mois, dans le but d'acquérir une expérience professionnelle significative et de me
familiariser avec le monde du travail. Ce stage a été réalisé au sein de la société Aziin
Engineering Solutions, située au 1.5 kilomètre de la Route El Ain, au 1er étage de l'immeuble
‘Nour’ 1ére étage
Sfax, Tunisie,3000, sous la direction de Mme Ameni Atii.

OBJECTIFS DU STAGE

Bien que ce stage ait principalement été orienté vers l'observation, j'ai eu l'opportunité de
mener à bien plusieurs missions qui m'ont permis de mettre en pratique les compétences et les
connaissances acquises au cours de ma formation. L'objectif de ce stage était de développer des
compétences professionnelles et d'acquérir une expérience pratique dans le domaine de la
création des sites web, en particulier pour WoodArt.

Ce travail est réalisé par : Trigui Mohamed

Trigui Mohamed & rapport de stage 8

 Sous l’encadrement de : Mme Atii Ameni

Chapitre 1 : Présentation générale de l’entreprise

1. Présentation
Nom: Aziin Engineering Solutions

Catégorie : Entreprises - Sociétés

Description : La société AZIIN est spécialisée dans la création de logiciels et de sites web sur
mesure, en intégrant l'ensemble de compétences nécessaires à la conduite de projets.

AZIIN met à profit tout son savoir-faire en analyse, recherche et conception pour
transformer vos projets en réalité. Une société pionnière avec une capacité à satisfaire les clients
les plus exigeants avec une solution personnalisée à leurs besoins et ceci en temps record et
surtout avec un coût compétitif.

Adresse électronique : contact@aziin.com

Site web : www.azin.tn

Mobile: +216 20 129 410

Adresse : Route Ain km 1.5 Kassas Numéro 5, Immeuble Nour, première étage, appartement
numéro 1 Sfax, Tunisie

Réalisation

 Développement des logiciels

 Création des applications web

 E-commerce et boutique en ligne

 Design web

 Design logo

Trigui Mohamed & rapport de stage 9

 Chapitre 2 : Etude préliminaire

1. Introduction
Dans ce chapitre, nous présentons la partie de l'étude préalable, afin de fournir le
diagnostic de création de notre site web. Pour cela, nous commençons par présenter le champ de
l'étude. Ensuite, nous étalons l'analyse des besoins.
2. Etude de l’existant :
Dans le cadre de notre étude de l'existant, nous nous pencherons sur la situation actuelle
de l'entreprise, qui, en tant qu'entité non informatisée, fait face à des défis significatifs en matière
de collecte et de gestion des données relatives à ses employés.
Cette analyse approfondie de la situation actuelle constitue la première étape essentielle
de notre rapport de stage, visant à identifier les domaines où une transition vers des solutions
informatisées peut apporter des améliorations significatives en termes d'efficacité opérationnelle
et de gestion des ressources humaines.
2.1. Critique de l’existant :
La structure actuelle de l'entreprise, qui n'a pas encore informatisé sa gestion des
informations sur les employés, présente plusieurs enjeux significatifs. Tout d'abord, la collecte
manuelle des données entraîne des erreurs potentielles et une utilisation inefficace du temps. De
plus, la gestion de documents physiques engendre des coûts importants et une organisation
laborieuse.
La sécurité des données est également une source d'inquiétude, exposant des informations
sensibles à des risques. Le manque de centralisation complique l'accès aux données cruciales
pour des prises de décision informées. L'automatisation apparaît ainsi comme une solution
indispensable pour optimiser la gestion des ressources humaines, améliorer la productivité et
renforcer la confidentialité des données.

Trigui Mohamed & rapport de stage 10

 2.2. Solutions proposées :
Pour répondre aux besoins de l'entreprise, nous proposons la création d'un site web dédié
nommé "WoodArt" pour la gestion des employés. Ce site offrira une interface conviviale
permettant d'insérer facilement les informations des employés en fonction de leur poste.
De plus, les fonctionnalités de consultation, modification, ajout et suppression des
données des employés seront mises en place pour une gestion efficace. "WoodArt" facilitera
également la centralisation des informations, améliorant ainsi la disponibilité des données pour
des prises de décision plus éclairées, tout en renforçant la sécurité des données grâce à des
contrôles d'accès appropriés.
Cette solution informatisée représente une avancée majeure pour l'entreprise, en
optimisant la gestion des ressources humaines et en réduisant les erreurs potentielles liées à la
collecte manuelle des données.
3. Contribution attendue du produit

Notre site web "WoodArt" est une plateforme de gestion des ouvriers au sein d'un atelier
de construction en bois. Il a été développé dans le but d'optimiser la gestion des ouvriers tout en
garantissant la fiabilité, l'efficacité et la sécurité opérationnelle de l'entreprise. L'objectif principal
de ce site est de permettre à l'entreprise de collecter de manière continue et systématique les
informations sur ses ouvriers, puis de les organiser en fonction de leurs postes au sein de l'usine
de construction.

Cette approche vise à simplifier la gestion des ressources humaines et à faciliter la prise
de décisions éclairées pour une meilleure productivité et une amélioration continue de nos
opérations.
3.1. Objectifs

Les objectifs de notre site web "WoodArt" sont multiples et centrés sur l'amélioration de
la gestion des ouvriers au sein de notre atelier de construction en bois.

Trigui Mohamed & rapport de stage 11

 Tout d'abord, nous visons à rationaliser le processus de collecte d'informations sur nos
ouvriers de manière continue, garantissant ainsi une base de données à jour et fiable. Ensuite,
notre objectif est de classer les ouvriers en fonction de leurs postes spécifiques dans l'usine de
construction, facilitant ainsi la répartition des tâches et la planification efficace de la main-
d'œuvre. De plus, nous cherchons à optimiser la gestion des ressources humaines en
automatisant des tâches administratives, telles que le suivi des horaires, les évaluations de
performance, et la gestion des compétences. En fin de compte, notre site web vise à renforcer la
sécurité sur le lieu de travail en permettant une meilleure surveillance des ouvriers, l'accès à des
informations de formation en temps réel, et une communication améliorée. En plus ce portail
offre un espace pour les sociétés pour exposer ses articles et ses actualités.

4. Fonctionnalités générales du produit

Dans cette section, nous détaillons les exigences fonctionnelles liées à l'accès administratif du site
web "WoodArt". L'administrateur dispose des fonctionnalités suivantes :
Un accès administratif : L'administrateur a la possibilité de :

 Authentification : L'administrateur peut se connecter en utilisant son adresse e-mail et

son mot de passe préalablement enregistrés dans la base de données.

 Gestion des Ouvriers : L'administrateur peut ajouter un nouvel ouvrier en remplissant les
champs requis, notamment le nom, le prénom, l'adresse, le numéro de CIN, le numéro de
téléphone, le poste occupé, etc.

 Mise à jour des Informations : En cas de changement d'informations concernant un

ouvrier, l'administrateur a la possibilité de modifier les coordonnées de l'ouvrier et de les
enregistrer à nouveau dans la base de données.

 Suppression des Ouvriers : Si un ouvrier quitte l'entreprise, l'administrateur peut le

supprimer de la base de données.

 Affichage par Poste : L'administrateur peut afficher la liste des employés en fonction de
leur poste, ce qui facilite la gestion et l'organisation de la main-d'œuvre.

Trigui Mohamed & rapport de stage 12

Conclusion
Pour mettre en œuvre notre application et pour assurer sa bonne fonctionnalité, la
modélisation conceptuelle est d'une importance extrême. Pour cela, dans le chapitre suivant, nous
présentons la modélisation et la conception de notre portail web.

Chapitre 3 : Modélisation conceptuelle

Introduction
Dans ce chapitre, nous abordons la modélisation conceptuelle de notre portail. Pour
parvenir à cette étape, nous partons des besoins identifiés et de l'analyse de l'existant, comme
décrit dans le chapitre précédent. L'objectif principal de cette phase est de décrire la conception
de notre portail à l'aide d'un langage de modélisation. Cette démarche vise à rendre la réalisation
du portail plus fluide en établissant une base conceptuelle solide.

Nous explorerons en détail les concepts, les schémas, et les diagrammes qui décriront la
structure et le fonctionnement de notre portail, en mettant l'accent sur la manière dont il répondra
aux besoins identifiés au cours de l'analyse.

1. Choix de la méthodologie de conception :

Définition de l’UML

Afin d’augmenter l’efficacité et limiter le temps de développement, la solution la plus

pratique est d’employer des conventions de dessin et de construire des diagrammes qui vont
représenter au mieux l’univers modélisé par l’application. Tel que le langage « Unified Modeling
Language ».

Trigui Mohamed & rapport de stage 13

 Figure 1: logo de l’UML

Justification de choix de méthodologie UML

Le choix de la méthodologie UML se justifie par sa capacité à offrir une représentation

visuelle claire et unifiée des systèmes complexes. En utilisant des diagrammes structurés, UML
facilite la communication entre les parties prenantes, améliore la compréhension des besoins et
des processus, et favorise une gestion efficace du développement logiciel.

La standardisation d'UML garantit une cohérence dans la modélisation et permet une

évolutivité aisée des projets. Les nombreux types de diagrammes UML offrent une flexibilité
pour modéliser différents aspects d'un système. De plus, UML est largement adopté dans
l'industrie, favorisant la collaboration et la réutilisation des bonnes pratiques. En somme, UML
est un outil puissant pour concevoir, documenter et maintenir des systèmes informatiques de
manière méthodique.

2. Conception de l’application :
Nous avons utilisé dans la conception de notre portail :

- Diagramme de cas d’utilisation.

- Diagramme de classes.
- Diagramme de séquence

Chapitre 4

Trigui Mohamed & rapport de stage 14

2.1. Digramme de cas d’utilisation

6.1Définition du diagramme de cas d’utilisation

Le diagramme de cas d'utilisation est un élément central de la modélisation UML, utilisé

pour représenter les interactions entre un système informatique et ses utilisateurs ou acteurs
externes.

Il s'agit d'un outil graphique qui identifie les fonctionnalités ou les services qu'un système
offre, en mettant l'accent sur les actions réalisées par les acteurs pour atteindre leurs objectifs.
Chaque cas d'utilisation est illustré sous la forme d'un ovale et décrit un scénario spécifique de
l'interaction.

Les acteurs, quant à eux, sont des entités externes au système, tels que des utilisateurs ou
d'autres systèmes, qui interagissent avec le système pour accomplir des tâches.

- Le diagramme de cas d'utilisation met en jeu trois concepts principaux :

1. Acteur
2. Cas d’utilisation
3. Interactions entre l'acteur et le cas d'utilisation. Ces interactions peuvent être
multivaluées.

6.1Identification des acteurs et leurs interactions

Dans notre application, nous distinguons un seul acteur.

L’administrateur : est responsable de la gestion, le contrôle et la mise à jour du contenu de

l’application.
Le tableau suivant représente la description des principaux cas d’utilisations et leur Description relatifs
à l’administrateur.

Trigui Mohamed & rapport de stage 15

Tableau 1 : Liste des cas d’utilisation et leur Description relatifs à l’administrateur.

Cas d’utilisation Description

Authentification - l’administrateur Saisie son login et son mot de passe après avoir une
confirmation d’identification ou l’affichage d’un message d’erreur

Ajouter des employés L’administrateur peut à tout moment ajouter des employés.

Modifier des employés L’administrateur peut à tout moment modifier les employés déjà insérer
dans la base de données.

Supprimer les employés L’administrateur peut à tout moment supprimer un employé

Afficher les employés L’administrateur peut à tout moment afficher les employés selon leur
par tri poste.

2.1.1. Diagramme de cas d’utilisation de l’administrateur

- Cas d’utilisation de l’administrateur (Authentifier + Gestion des employés)

Figure 2 : Diagramme de cas d’utilisation de l’administrateur (Authentifier + Gestion des

employés

Trigui Mohamed & rapport de stage 16

 Diagramme de classe

Un diagramme de classe est une représentation visuelle essentielle dans l'ingénierie

logicielle. Il illustre la structure statique d'un système en identifiant les classes qui le composent,
leurs attributs, leurs relations, et les méthodes associées.

Chaque classe est généralement représentée par un rectangle contenant le nom de la

classe au sommet, ses attributs au milieu, et les méthodes en bas. Les lignes connectant les
classes montrent les associations, héritages, agrégations, et autres relations entre les différentes
classes.

Ce diagramme joue un rôle fondamental dans la conception logicielle en aidant les

développeurs à comprendre l'architecture du système, à identifier les interactions entre les
composants, à anticiper les dépendances, et à faciliter la communication entre les membres de
l'équipe. Il est particulièrement utile pour documenter la structure d'un système, améliorer la
réutilisation du code, et sert de point de départ pour la programmation orientée objet.

Modélisation diagramme de classe :

Figure 3: Diagramme de classe

Trigui Mohamed & rapport de stage 17

2.2. Diagramme de séquence :

Définition du diagramme de séquence :

Un diagramme de séquence est un outil de modélisation essentiel en ingénierie logicielle

et en conception de systèmes. Il représente graphiquement les interactions et les échanges de
messages entre les différents objets ou acteurs d'un système au fil du temps. Les objets sont
placés sur l'axe vertical, et les messages échangés entre eux sont affichés horizontalement dans
une séquence chronologique.

Ce type de diagramme permet de visualiser de manière précise et séquentielle comment

les objets coopèrent pour accomplir une tâche ou un scénario. Il est particulièrement utile pour
comprendre le flux d'exécution d'un processus, identifier les dépendances entre les objets,
détecter les interactions potentielles, et vérifier la cohérence du comportement d'un système.

Les diagrammes de séquence sont largement utilisés pour la documentation des

exigences, la conception détaillée, et la communication efficace entre les membres de l'équipe de
développement.

Diagramme de séquence du cas d’utilisation « Authentification »

Trigui Mohamed & rapport de stage 18

 Figure 4: Diagramme de séquence du cas d’utilisation « Authentifier »

Trigui Mohamed & rapport de stage 19

 Diagramme de séquence du cas d’utilisation « Ajouter des employés »

Figure 5:Diagramme de séquence du cas d’utilisation « Ajouter des Employés » :

Trigui Mohamed & rapport de stage 20

Conclusion
En conclusion, le modèle de conception que nous avons présenté dans ce rapport
représente une approche efficace pour répondre aux besoins identifiés dans notre projet. Il offre
une structure conceptuelle solide pour la réalisation de notre application en facilitant la
compréhension des relations entre les composants clés. En adoptant ce modèle, nous avons réussi
à rationaliser le processus de développement en mettant en évidence les interactions, et les
fonctionnalités essentielles.

Chapitre 5 : Développement et réalisation

Après avoir accompli la phase de modélisation conceptuelle, qui représentait une étape
théorique de notre projet, nous sommes maintenant prêts à passer à la phase d'implémentation et
de déploiement de notre site web, en décrivant également l'environnement de développement.
Dans ce chapitre, nous allons explorer en détail quelques pages concrètes de notre site web en
cours de développement.

1. Les logiciels utilisés :

 Visual Studio Code (VS Code) :
VS Code est notre environnement de développement intégré (IDE) de prédilection. Il a été
utilisé pour écrire, tester et déployer notre code source, ce qui en fait un pilier fondamental de
notre processus de développement.

Figure 6: Logo de Visual Studio Code

 StarUML :

Trigui Mohamed & rapport de stage 21

Lors de mon stage, j'ai utilisé StarUML, un outil de modélisation UML, pour créer des
diagrammes de classe, d'activité et de séquence. Son interface conviviale m'a permis de
représenter visuellement la structure et le comportement des systèmes logiciels que nous
développons. StarUML a facilité la communication au sein de l'équipe en fournissant des
diagrammes clairs et en permettant l'exportation de modèles vers d'autres outils. Son utilisation a
grandement contribué à la documentation et à la compréhension des projets.

Figure 7: Logo de StarUML

 Photoshop :
Photoshop est un outil essentiel pour les concepteurs et les professionnels de la création
graphique. Il offre un environnement complet pour la création d'images sophistiquées destinées à
une variété de médias, tels que l'impression, le web, les appareils mobiles, et bien d'autres. En
outre, il permet de retoucher et de redimensionner des images pour les adapter aux besoins du
projet.

Ce logiciel polyvalent joue un rôle central dans la phase de développement en nous permettant de
manipuler et d'optimiser les éléments visuels de notre projet.

Figure 8: Logo de Adobe Photoshop

Trigui Mohamed & rapport de stage 22

  Wampserver64
 WampServer 64 s'est révélé être un élément essentiel de notre projet. En tant que logiciel
de développement web, il a joué un rôle central dans la création et la réalisation de notre
application. Ce logiciel a fourni un environnement de développement local complet qui a
grandement simplifié notre processus de travail.

 Le serveur web Apache intégré dans WampServer 64 a permis de servir les pages web
de notre application, qu'il s'agisse de fichiers PHP, HTML, CSS ou d'autres ressources. Il
nous a donné la possibilité de tester notre application localement avant de la déployer sur
un serveur distant, ce qui a été essentiel pour assurer un fonctionnement fluide et sans
erreur.

 De plus, WampServer 64 a inclus une base de données MySQL qui nous a permis de
stocker et de gérer efficacement les données de notre application. Cette base de données
a joué un rôle crucial dans le stockage et la récupération des informations nécessaires au
bon fonctionnement de l'application.

Figure 9: Logo de WampServer 64

 ILLUSTRATEUR :
Illustrator est un logiciel de conception vectorielle largement utilisé par les professionnels de
la création graphique. Il se distingue par sa capacité à créer des graphiques vectoriels de
haute qualité ce qui est essentiel pour les éléments graphiques nécessitant une capacité de
redimensionnement sans perte de qualité. Dans notre processus de développement,
Illustrator est un outil clé pour la création de logos, d'icônes et d'autres éléments visuels qui
doivent être adaptés à différentes tailles et résolutions. Il nous permet de travailler avec des

Trigui Mohamed & rapport de stage 23

 formes, des lignes et des couleurs de manière précise, garantissant une esthétique cohérente
dans l'ensemble du projet.

2. Quelques identités visuelles réalisé

Figure 10 : Logo créée par Illustrateur

Trigui Mohamed & rapport de stage 24

 Figure 11: Photo à publier dans les médias

Figure 12:Carte visite réalisé pour l'entreprise WoodArt

3. Les langages utilisés

 HTML (HyperText Markup Language)
HTML est le langage de balisage standard utilisé pour la création de pages web. Il
s'agit d'un langage de marquage qui permet de structurer le contenu d'une page web en
utilisant des éléments et des balises. Chaque balise HTML définit le rôle d'un élément
sur la page, tel que le titre, le paragraphe, l'image, le lien, le formulaire, etc.

Trigui Mohamed & rapport de stage 25

 HTML repose sur un modèle de balisage qui utilise des balises ouvrantes (<...>) et
des balises de fermeture (</...>) pour entourer le contenu. Les balises fournissent des
informations sur la manière dont le contenu doit être affiché dans un navigateur web.

 PHP :
PHP est un langage de script interprété exécuté du côté serveur. Il est couramment
utilisé pour le développement web dynamique. La syntaxe de PHP est largement inspirée
du langage C, du Perl et de Java. Parmi ses principaux avantages, nous notons :
 Gratuité et Code Source Ouvert : PHP est un langage open source, ce qui signifie que
son code source est accessible gratuitement, favorisant la collaboration et la
personnalisation.

 Facilité d'Écriture de Scripts : PHP est reconnu pour sa syntaxe simple, ce qui le rend
accessible aux développeurs de différents niveaux d'expérience.

 Intégration HTML : PHP permet d'intégrer des scripts au sein de pages HTML,
simplifiant ainsi la création de pages web dynamiques.

 Interfaçage avec les Bases de Données : PHP offre une facilité d'interaction avec divers
systèmes de gestion de bases de données (SGBD), avec MySQL étant l'un des SGBD les
plus couramment utilisés en combinaison avec PHP.

 Compatibilité avec de Nombreux Serveurs Web : PHP est compatible avec de nombreux
serveurs web, notamment Apache et Microsoft IIS, facilitant son déploiement.

 JAVASCRIPT

JavaScript est un langage de programmation de scripts largement utilisé pour rendre les
pages web interactives. C'est un langage orienté objet à prototype, ce qui signifie que les
principales fonctionnalités du langage sont fournies par des objets dotés de constructeurs

Trigui Mohamed & rapport de stage 26

permettant de créer des instances avec des propriétés spécifiques. La flexibilité de JavaScript
permet de créer des objets personnalisés et d'hériter des propriétés d'autres objets.

 CSS
C’est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert
uniquement à présenter la page web. Grâce à ce langage, nous avons créé rapidement et
simplement la mise en page de notre site.

Le principe des feuilles de style consiste à attribuer des caractéristiques de mise en forme à
des groupes d'éléments. Il est par exemple possible que nous décidions de créer.
Les feuilles de style permettent d'avoir une présentation homogène sur tout un site, des
chargements de page plus rapides, une plus grande lisibilité du HTML, nous pouvons changer
l'aspect du site entier en modifiant quelques lignes.
4. Les bibliothèques utilisées
 jQuery: jQuery est une bibliothèque JavaScript. JavaScript est un langage de
programmation de scripts qui est utilisé pour ajouter des fonctionnalités dynamiques et
interactives aux pages web. jQuery simplifie la manipulation du Document Object Model
(DOM) en utilisant JavaScript, mais il n'est pas un langage en soi.
 Bootstrap : Bootstrap est un framework front-end basé sur HTML, CSS, et JavaScript. Il
utilise ces langages pour créer des modèles de conception réactifs et des composants
d'interface utilisateur prédéfinis. Bootstrap n'est pas un langage, mais une collection de
fichiers CSS et JavaScript qui aident à concevoir des sites web modernes.
5. Serveur web utilisé
Un serveur web est un logiciel qui permet aux clients d'accéder à notre application en
interprétant les requêtes HTTP. Pour notre projet, nous avons utilisé le serveur web Apache.
Apache est l'un des serveurs web les plus largement utilisés sur Internet, fonctionnant à l'origine
sur les systèmes d'exploitation de type Unix, mais étant désormais disponible sur de nombreuses
plateformes, y compris Microsoft Windows.

-Apache est un serveur HTTP (Hyper Text Transfer Protocol), également connu sous le nom de
serveur web, qui fournit des fichiers aux clients via le protocole HTTP. Le protocole HTTP est

Trigui Mohamed & rapport de stage 27

non connecté, ce qui signifie qu'une connexion est ouverte à chaque demande de fichier et fermée
immédiatement.

En général, un serveur web est utilisé pour fournir des fichiers HTML, des images, des fichiers
Flash, et d'autres contenus destinés à être interprétés par un navigateur web tel que Mozilla ou
Internet Explorer. Cependant, le protocole HTTP peut être utilisé pour transmettre divers types de
fichiers. Apache est l'un des nombreux serveurs web disponibles, et il offre des avantages
historiques et fonctionnels qui en font un choix populaire

6. les étapes de création de notre application :

6.1 WoodArt:

WoodArt est un site tunisien spécialisé dans la construction en bois. Dans ce site, j'ai
développé la partie de gestion des employés.

6.2 Page authentication:

La page d'authentification de l'administrateur constitue un pilier fondamental de notre
application, visant à renforcer la sécurité et à contrôler l'accès aux privilèges administratifs. Les
administrateurs doivent fournir leur adresse e-mail et mot de passe, lesquels sont vérifiés par
rapport aux données enregistrées dans notre base de données. En cas de correspondance,
l'utilisateur est redirigé vers la page d'accueil (accueil.php) pour accéder aux fonctionnalités
administratives. Si les informations sont incorrectes, l'accès est refusé, garantissant ainsi que
seules les personnes autorisées peuvent gérer l'application. Cette fonctionnalité est essentielle
pour protéger la confidentialité des données et s'inscrit dans notre engagement envers la sécurité
des informations, tout en offrant une expérience fluide aux administrateurs.

Trigui Mohamed & rapport de stage 28

 Figure 13: Page d'authentification du site WoodArt

6.3 Gestion des Exceptions de Connexion

Cette erreur peut survenir si l'utilisateur laisse des champs vides ou fournit des informations
d'adresse e-mail ou de mot de passe incorrectes. Sa gestion est cruciale pour garantir une
expérience utilisateur sécurisée et fluide.

Figure 14:cas de saisie fausse d'adresse ou mot de passe

Trigui Mohamed & rapport de stage 29

 Figure 15:Cas de laisser un champ vide

6.4 Partie Administratif “Gestion des employés”

Suite à une authentification réussie, l'accès à la page d'accueil est autorisé. L'objectif
principal de cette page est de présenter une liste complète des employés enregistrés dans la base
de données. Elle offre également des fonctionnalités essentielles, notamment la possibilité
d'ajouter de nouveaux employés, de trier les employés en fonction de leur poste, de les modifier
ou de les supprimer. Si tu as terminé les modifications nécessaires, tu peux te déconnecter en
utilisant le bouton de déconnexion.

Trigui Mohamed & rapport de stage 30

 Figure 16: Page d'accueille

6.5 Affiche des employés par poste

La page d’accueil offre une interface claire et intuitive pour visualiser, ajouter, modifier, et
supprimer des employés en fonction de leur poste. Les utilisateurs peuvent naviguer facilement
entre les différents postes, ou bien se déconnecter et se rediriger à la page d’index.

Trigui Mohamed & rapport de stage 31

 Figure 17: Affiche par poste "designers"

Figure 18:Affiche par poste "designers"

Trigui Mohamed & rapport de stage 32

5.
6.
6.1.
6.2.
6.3.
6.4.
6.5.

6.6. Page d’ajout des employés

La page de formulaire de notre application web est conçue pour collecter des données
utilisateurs essentiels de manière efficace et sécurisée. Elle inclut un champ d'identifiant (ID)
soumis à une validation côté serveur avec PHP pour assurer l'unicité des ID. Les autres champs
sont définis comme obligatoires, garantissant que l’administrateur remplissent toutes les
informations nécessaires. Cette approche renforce la qualité des données collectées, contribuant à
une gestion précise et efficace des informations au sein de l'application.

De plus, La structure du formulaire, avec l'utilisation des balises HTML <form>, assure
une transmission appropriée des données dans cette page qui utilise des méthodes de transmission
de données bien établies, telles que POST ou GET, pour acheminer les informations du
formulaire au serveur.

Trigui Mohamed & rapport de stage 33

 Figure 19:Formulaire d'ajout d'employé

Figure 20:Erreur champ vide

Trigui Mohamed & rapport de stage 34

 Figure 21: Erreur id existante

6.7. Page de modification des employés

L'application web comporte une page "details.php" qui affiche les informations
d'un employé à partir de la base de données, fournissant ainsi une vue détaillée de ses
données actuelles. Lorsque des mises à jour sont nécessaires, l’administrateur confirme la
modification avec le bouton « MODIFIER » pour apporter des modifications aux
informations de l'employé via des requêtes "update" puis une redirection se fait vers la
page d’accueil en affichant les nouvelles valeurs modifiées. Cette approche permet une
gestion efficace et professionnelle des données des employés, garantissant leur précision
et leur actualisation en temps réel.

Trigui Mohamed & rapport de stage 35

 Figure 22: Page de modification

Conclusion générale

En conclusion, mon stage au sein de Aziin Engineering Solutions a été une

expérience enrichissante et formatrice. J'ai eu l'opportunité de plonger au cœur d'un
environnement professionnel dynamique, de travailler sur des projets concrets et de
collaborer avec une équipe compétente et dédiée. Ce stage a renforcé mes compétences
techniques en informatique, mais il m'a également permis de développer des compétences
interpersonnelles essentielles, telles que la communication, la gestion du temps.
J'ai été exposé à un large éventail de tâches, allant de la conception de logiciels à
la résolution de bugs, en passant par la création de modèles et la documentation de

Trigui Mohamed & rapport de stage 36

 projets. Ces expériences variées m'ont donné un aperçu précieux du cycle de vie complet
d'un projet informatique, de la phase de conception à la mise en production.
Je tiens à exprimer ma gratitude envers l'ensemble de l'équipe de Aziin pour leur
soutien, leurs précieux conseils et leur mentorat tout au long de mon stage. Leur expertise
et leur volonté de partager leurs connaissances ont été essentielles pour mon
développement professionnel.

Ce stage a consolidé mon désir de poursuivre une carrière dans le domaine de

l'informatique. J'ai acquis une meilleure compréhension de l'industrie, de ses défis et de
ses opportunités. Je suis enthousiaste à l'idée d'appliquer les compétences et l'expérience
acquises au cours de ce stage dans mes futurs projets.

En fin de compte, je tiens à remercier madame Atii Ameni pour m'avoir offert
cette opportunité et pour sa confiance en mes capacités. Mon stage chez Aziin
Engineering Solutions restera une étape cruciale dans mon parcours professionnel, et je
suis impatient de continuer à évoluer dans ce domaine en m'appuyant sur les
connaissances acquises au cours de cette expérience.

Trigui Mohamed & rapport de stage 37