RAPPORT DE STAGE :

Développement d'une Application

CRUD en PHP

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

1 ère année

ENTREPRISE D'ACCUEIL : AZIIN, Sfax

REALISE PAR : Trigui Mohamed

Encadrant : Mme Ati Ameni

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

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

 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,
appartement N°1, 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 de sites web, en particulier pour WoodArt.

Ce travail est réalisé par : Trigui Mohamed

Trigui Mohamed & rapport de stage 4

 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

Trigui Mohamed & rapport de stage 5

  Design logo

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.

1.1. 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.

6.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. 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

Trigui Mohamed & rapport de stage 6

communication améliorée. En plus ce portail offre un espace pour les sociétés pour exposer ses
articles et ses actualités.

2. 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.

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.

Trigui Mohamed & rapport de stage 7

 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.

6. Choix de la méthodologie de conception :

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 ».

6.1. Conception de l’application :

Nous avons utilisé dans la conception de notre portail :

- Diagramme de cas d’utilisation.

- Diagramme de classes.

6.2 Digramme de cas d’utilisation :

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

1. Acteur

Trigui Mohamed & rapport de stage 8

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

6.2 Identification des acteurs et leurs interactions :

Dans notre application, nous distinguons trois acteurs.

- 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.

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.

Trigui Mohamed & rapport de stage 9

1.2.4. Diagramme de cas d’utilisation de l’administrateur :

Figure 1 : Diagramme de cas d’utilisation de l’administrateur

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 4 : 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

Trigui Mohamed & rapport de stage 10

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

 StarUML :

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.

 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.

 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

Trigui Mohamed & rapport de stage 11

 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.

 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 formes, des lignes et des couleurs de manière précise, garantissant une
esthétique cohérente dans l'ensemble du projet.

Trigui Mohamed & rapport de stage 12

6. Quelques des identités visuelles réalisé :

Figure 2 : Logo créée par Illustrateur

Trigui Mohamed & rapport de stage 13

 Figure 3:Photo à publier dans les médias

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

Trigui Mohamed & rapport de stage 14

6. LES LANGUAGES UTILISEES :

 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.

 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.

Trigui Mohamed & rapport de stage 15

  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
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.

6. LES BIBLIOTHÈQUES UTILISÉS :

 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

Trigui Mohamed & rapport de stage 16

 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.

6. Serveur web utilisés :

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
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.

Trigui Mohamed & rapport de stage 17

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.

Figure 5: page d'authentification du site WoodArt

6.2 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.

Trigui Mohamed & rapport de stage 18

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

Figure 7:Cas de laisser un champ vide

6.1.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 19

 Figure 8: Page d'accueille

6.2Affiche 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.

Figure 9:Affiche par poste "designers"

Trigui Mohamed & rapport de stage 20

 Figure 10:Affiche par poste "designers"

6.1. 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 21

 Figure 11:Formulaire d'ajout d'employé

Figure 12:erreur champ vide

Trigui Mohamed & rapport de stage 22

 Figure 13:Erreur id existante

6.4. 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 23

 Figure 14: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
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.

Trigui Mohamed & rapport de stage 24

 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 25