BREVET DE TECHNICIEN SUPERIEUR

STAGE TECHNICIEN

DEVELOPPEMENT D’UNE SITE

WEB POUR LA GESTION DE
STOCK

Réalisés par : Superviseur :

Abdelhamid AGNENGOU M. Mohamed ENASRI

Oussama SAJOUD Tuteur :

M. Abdelaaziz El Aissaoui

Année universitaire 2022/2023

Je tiens tout d’abord à exprimer ma gratitude à Monsieur
Mohamed Salem ELGARCH, Directeur de l’Institut de
Technologie des Pêches Maritimes de Tan-Tan (ITPM TT), pour
m’avoir accueilli comme stagiaire au sein de son établissement.

Je suis extrêmement reconnaissant envers Monsieur Mohamed

ENASRI pour m’avoir offert cette opportunité de stage au sein
d’Institut de Technologie des Pêches Maritimes de Tan-Tan (l’ITPM
TT). Sa confiance en mes capacités et son encadrement précieux
ont été essentiels tout au long de mon parcours. J’ai énormément
apprécié ses conseils éclairés, sa disponibilité et sa bienveillance.

Je tiens également à remercier toutes les personnes qui ont

contribué de près ou de loin à la réussite de mon stage et à la
rédaction de ce rapport.

Un grand merci aussi à mes enseignants et professeurs de BTS à

GUELMIM , qui m’ont formé et m’ont fourni les connaissances et
compétences nécessaires pour mener à bien ce stage. Leurs
enseignements m’ont été d’une grande aide dans
l’accomplissement de mes tâches et dans ma compréhension des
enjeux du secteur.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 2

Enfin, je souhaite exprimer ma reconnaissance à ma famille et à
mes amis pour leur soutien inconditionnel tout au long de ce stage.
Ils ont été une véritable source de motivation pour moi.

Ce rapport de stage est le fruit de ma réflexion sur mon expérience

et les leçons que j’en ai tirées. Je remercie infiniment toutes les
personnes qui ont contribué à ma croissance personnelle et
professionnelle au cours de ce stage.

À nos chers parents,

Votre amour et votre soutien inconditionnel ont été notre plus grande
inspiration. Nous vous dédions ce travail avec gratitude et espoir que
vos bénédictions nous accompagnent toujours.

À nos frères et sœurs,

Votre affection et votre soutien ont été notre force. Merci pour
chaque moment partagé.

À mes enseignants et le personnel de BTS,

qui m’ont offert une formation de qualité et un

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 3

 accompagnement personnalisé. Grâce à eux, j’ai acquis des
connaissances et des compétences indispensables à mon
avenir professionnel.
À ITPM TANTAN,

Où j’ai effectué mon stage. J’ai apprécié leur accueil chaleureux, leur
disponibilité et leur professionnalisme. Ils m’ont permis de
découvrir le monde du travail et de mettre en pratique mes acquis
théoriques.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 4

 TABLE DE MATIERE :
TABLE DE MATIÈRE

INTRODUCTION GENERALE

CHAPITRE I : Presentation de l’entreprise

Introduction

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

INTRODUCTION GENERALE

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 5

 TABLE DE MATIÈRE
INTRODUCTION
GENERALE ................................................................................................. 7

CHAPITRE I : PRESENTATION D’ORGANISME D’ACCUEIL ......................................... 8

I. PRESENTATION DE L'ENTITE HOTE : .....................................................................

9

1. Table des
caractéristiques : ...............................................................................................
.. 9

2. Organigramme : ...............................................................................................
................. 10

3. Les service de Leansoft : ………………………..………………………………………………………………………………10

4. Logo de
l’entreprise : ......................................................................................................
... 14

5. Partenaires de
l’entreprise : .............................................................................................. 14

6. Plan d’accès a
l’entreprise : ............................................................................................... 15

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 6

 7. D’autre information sur l’entreprise : ………………….
……………………………….16

CHAPITR

E II: PRESENTATION DU THEME ET CHOIX TECHNOLIGIQUES ........... 17

I. PRESENTATION DE
WORDPRESS : ............................... ................................. 18

1. Définition de WordPress : …….……………………..………………………..18

2. L’historique de WordPress : ………………………..……………………...…18

3. Les avantages de WordPress :……………..………………………………….19

4. Les inconvénients de WordPress ……………………………..……………...20

5. Comparaison entre HTML&CSS et WordPress :..………………..……..…..21

II. PRESENTATION DE
XAMPP : ................................................................................ 22

1. Définition de

XAMPP ....................................................................................................... 22

2. L’importance d’utilisation de
XAMPP .............................................................................. 23

3. Les avantages de XAMPP : ………………………………………………………..………23

III.

CONCLUSION : .......................................................................................................

. 23

CHAPITRE III :
REALISATION............................................................................................. 24

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 7

I.
INTRODUCTION : .................................................................................................
...... 25

II. Téléchargement et l’installation de XAMPP ……………...…………………..……25

1. L’installation de
XAMPP: ............................................................................................... 25

2. XAMPP Control-
Panel: ................................................................................................... 31

3. Lancer le

module : .......................................................................................................... 32

4. Administrer des

module................................................................................................. 33

5. Création de la base de données :……………………… ………………………………………………………………34

III. COMMENT INSTALLER WORDPRESS SUR LOCALHOST : .......................................... 35

1. Pourquoi devez – installer WordPress sur

Localhost: ............................................... 35

2. Les étapes
d’installation : ............................................................................................. 35

3. Les pages

utilise : .......................................................................................................... 42

4. Le thème utilise :……………………………………………………...………………..43

5. Elementor :……………………………………………………………..…………….. 44

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 8

6. Les captures de site :…………………………………………………..……………..45

CHAPITRE IV : CONCLUSION GENERALE ............................................................... 49

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 9

INTRODUCTION GENERALE
Au cours de ma deuxième année à Brevet de technicien Supérieur,
j’ai eu l’opportunité de développer mes compétences et mon savoir-faire
grâce à divers moyens mis en place par l’établissement, tels que les
projets en classe, les projets de fin d’études et les stages techniciens. J’ai
effectué mon stage technicien à l’Institut de Technologie des Pêches
Maritimes de Tan-Tan, dans le secteur d’activité informatique, pour une
durée de 1 mois, du 10/05/2025 au 10/06/2025 à El OUATIA, TAN-TAN.
Ce stage a été une occasion inestimable de mettre en pratique mes
connaissances théoriques et de plonger au cœur du milieu professionnel.

Mon sujet de stage était la “ Développement D’une Application

Site web pour la gestion de stock”. J’ai suivi une formation en
développement d’applications et j’ai été impliqué dans diverses tâches au
sein de l’entreprise. L’objectif principal de ce stage était de développer
mes compétences techniques, d’acquérir des responsabilités et
d’approfondir ma connaissance du monde du travail. Il m’a également
permis d’établir des liens professionnels précieux et de participer à des
projets collaboratifs.

Dans ce rapport, je présenterai en quatre chapitres les détails de

mon stage et des travaux réalisés. Le premier chapitre sera consacré à un
bref descriptif de l’entreprise, l’Institut de Technologie des Pêches
Maritimes de Tan-Tan. Le deuxième chapitre abordera le contexte général
du projet, suivi du troisième chapitre consacré à l’analyse et à la
conception du projet, où les processus seront modélisés. Enfin, le dernier
chapitre présentera les technologies utilisées pour le développement du
projet et inclura la présentation des interfaces créées.

Chapitre par chapitre, nous explorerons les différentes facettes de

mon stage, les compétences développées, ainsi que les résultats obtenus.
L’objectif étant de fournir une vision complète et détaillée de cette

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 10

expérience professionnelle enrichissante.

Je suis reconnaissant envers l’Institut de Technologie des Pêches

Maritimes de Tan- Tan pour cette opportunité et envers BTS pour son
soutien constant tout au long de cette expérience. Je suis convaincu que
ce stage a été un tremplin essentiel pour mon avenir professionnel, et je
suis impatient de partager les apprentissages réalisations qui en
découlent.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 11

 CHAPITRE i :
Présentation De
l’entreprise

I. INTRODUCTION

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 12

 Avant tout, J’ai choisi cette entreprise car elle est experte dans son
domaine d’activité et reconnue comme leader sur son marché. Ce choix m’a
permis de profiter d’une formation de qualité et de développer des
compétences pratiques dans un cadre professionnel stimulant.

Dans les sections suivantes, je vais présenter en détail l’entreprise, son

historique, ses activités et ses valeurs. Je vais aussi décrire les missions que
j’ai réalisées pendant mon stage et les compétences que j’ai renforcées.
Enfin, je vais conclure ce chapitre en faisant le bilan de mon expérience de
stage et en exposant les leçons que j’en ai tirées.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 13

 [Link] SOCIALE & STATUT JURIDIQUE

Saviez-vous que le secteur de la pêche maritime est l’un des piliers de

l’économie marocaine, employant plus de 170 000 personnes et contribuant à
hauteur de 2,3% au PIB national ? Dans ce contexte, la formation
professionnelle joue un rôle crucial pour assurer le développement durable de
ce secteur.
C’est dans cette optique que l’Institut de Technologie des Pêches
Maritimes de TAN-TAN (l’ITPM TT) a été créé en 1992. Relevant du
Département de la Pêche Maritime au Maroc, l’ITPM a pour mission de former
des marins et cadres navigants qualifiés pour le secteur de la pêche maritime.
Pour ce faire, l’institut offre une formation diversifiée et adaptée aux besoins
du marché du travail, en mettant l’accent sur les compétences techniques et
relationnelles nécessaires pour intégrer facilement le milieu professionnel.
Au cours de mon stage d’un mois à l’ITPM Tan-Tan, J’ai ainsi pu acquérir
une expérience pratique et approfondir mes connaissances dans le domaine
de la gestion et du suivi des lauréats.

1. Activités

L’Institut de Technologie des Pêches Maritimes de TAN-TAN (ITPM TT)

est un établissement de formation professionnelle relevant du Département
de la Pêche Maritime au Maroc. Sa mission principale est de former des
marins et cadres navigants qualifiés pour le secteur de la pêche maritime.
Pour ce faire, l’ITPM TAN-TAN offre une formation diversifiée et adaptée
aux besoins du marché du travail. La formation s’articule autour de trois
modes : la formation résidentielle, la formation alternée et la formation par
apprentissage. L’offre de formation s’organise en trois niveaux : le niveau
technicien, le niveau spécialisation et le niveau qualification.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 14

 L’institut propose également des formations en matière de sécurité
maritime, ainsi que des stages de perfectionnement et de mise à niveau pour
les marins, cadres navigants à la pêche et personnels des industries de pêche.
En résumé, les activités principales de l’ITPM TAN-TAN sont la formation
professionnelle et le développement des compétences dans le domaine de la
pêche maritime.

2. INFORMATIONS SUR ITPM TANTAN

des Pêches Maritimes de TAN- TAN

RAISON SOCIALE

ADRESSE BP 193 AL OUATIA TAN-TAN

TEL 05 28 87 90 52 / 05 28 87 90 82
public relevant du Département de la Pêche Maritime
STATUT JURIDIQUE

E-MAIL Contact@[Link]
professionnelle pour le secteur de la Pêche Maritime
DOMAINE D’ACTIVITE

SITE WEB [Link]

Le tableau (Tableau 1: Entreprise ITPM TAN-TAN) présente des

informations sur L’Institut de Technologie des Pêches Maritimes de Tan-Tan
est un établissement public relevant du Département de la Pêche Maritime. Il
est situé à l’adresse BP 193 Al OUATIA Tan-Tan et peut être contacté par
téléphone aux numéros 05 28 87 90 52 et 05 28 87 90 82, ou par e-mail à
l’adresse Contact@[Link]. L’institut se spécialise dans la
formation professionnelle pour le secteur de la Pêche Maritime et dispose d’un
site web à l’adresse [Link] pour plus d’informations.
Tableau 1: Entreprise ITPM TAN-TAN

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 15

 3. ORGANISATION:

L’ITPM TAN-TAN se compose de deux sections principales : la Structure

Administrative et la Structure Pédagogique. Elles ont chacune un rôle essentiel
dans le bon fonctionnement de l’institut et dans sa mission de former des
professionnels compétents pour le secteur de la pêche maritime. Nous allons
décrire dans cette partie les différents services qui constituent ces deux
sections et leurs missions respectives (Figure 1 : Organigramme d’ITPM).
a. Structure Administrative :
Cette section est responsable de la gestion administrative de l’institut.
Elle comprend les départements suivants :

- Secrétariat Général :
Ce département est responsable de la coordination des activités
administratives et de la communication entre les différents départements.
- Gestion des Ressources Humaines :
Ce département est responsable de la gestion du personnel, y compris
le recrutement, la formation et le développement des compétences.
- Gestion Financière et Comptable :
Ce département est responsable de la gestion des finances de l’institut, y
compris la comptabilité, le budget et les rapports financiers.

- Gestion du Matériel :
Ce département est responsable de la gestion des équipements et des
fournitures nécessaires au fonctionnement de l’institut.

- Gestion Technique :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 16

 Ce département est responsable de la maintenance et de la
réparation des équipements et des installations.
b. Structure Pédagogique :
Cette section est responsable de l’enseignement et de la formation des
étudiants.

Elle comprend les départements suivants :

- Direction de l’Enseignement et de l’Information :
Ce département est responsable de la planification et de la
coordination des activités pédagogiques.
- Départements Pédagogiques :
Ces départements sont responsables de l’enseignement dans les
différentes disciplines offertes par l’institut.
- Formation en Milieu Professionnel :
Ce département est responsable de la formation pratique des étudiants en
milieu professionnel.

- Initiation à la Mécanique Marine :

Ce département est responsable de l’enseignement des bases de la
mécanique
Marine.
- Vulgarisation Maritime :
Ce département est responsable de la sensibilisation du public aux
enjeux maritimes.
- Cellule d’Enseignement des Affaires Maritimes :
Cette cellule est responsable de l’enseignement des affaires maritimes.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 17

 Figure 1 : Organigramme de ITPM

4. SYSTEMES DE FORMATION A L’ITPM TAN-TAN

L’ITPM TAN-TAN offre une formation maritime initiale qui s’articule

autour de trois modes : la formation résidentielle, la formation alternée et la
formation par apprentissage. L’offre de formation s’organise en trois
niveaux : le niveau technicien, le niveau spécialisation et le niveau
qualification.
Le niveau technicien s’adresse aux jeunes lycéens et aux
professionnels de la pêche maritime, pour la préparation des diplômes de
niveau technicien tels que le Diplôme de Patron de Pêche et le Diplôme
d’Officier Mécanicien 3ème Classe. La formation se déroule en régime
interne et dure 2 années.
Les niveaux spécialisation et qualification sont dispensés généralement
en mode de formation par apprentissage. Il y a aussi une formation en
matière de sécurité maritime qui prépare à l’obtention du Certificat de base
en matière de sécurité, concernant les techniques individuelles de survie, de
sauvetage en mer et de lutte contre l’incendie, conformément aux

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 18

dispositions de la convention STCW-F 95.
La formation en cours d’emploi comporte des stages de
perfectionnement et de mise à niveau destinés aux marins, cadres navigants
à la pêche et personnels des industries de pêche.

III. LES METIERS DU TECHNICIEN AU SEIN DE ITPM

TT

1. FICHE METIERS EXISTANT DANS L’ENTREPRISE

 L’ITPM TAN-TAN offre une formation de niveau technicien pour les

jeunes lycéens et les professionnels de la pêche maritime.
 Cette formation prépare aux diplômes de niveau technicien tels que
le Diplôme
de Patron de Pêche et le Diplôme d’Officier Mécanicien 3ème
Classe.
 Les techniciens formés à l’ITPM TAN-TAN peuvent exercer différents
métiers dans le secteur de la pêche maritime, en fonction de leur
spécialisation.
2. FICHE METIER DEVELOPPEUR INFORMATIQUE :

Le rôle d’un développeur informatique est crucial dans le monde

numérique d’aujourd’hui. Ce professionnel est au cœur de la création et de la
maintenance de sites web et d’applications, jouant un rôle essentiel dans la
réalisation des objectifs de l’institut.
 Responsabilités principales :
- Création et maintenance de sites web et d’applications pour l’institut.
- Choix des solutions techniques les plus adaptées aux besoins de
l’institut.
- Résolution des problèmes techniques liés aux sites
internet et aux applications.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 19

  Missions
- Développement de prototypes et d’interfaces utilisateur.
- Écriture, test et mise à jour des programmes informatiques.
- Assurance du bon fonctionnement des plateformes développées.
- Formation des utilisateurs sur l’utilisation des plateformes.
 Qualités requises :
- Patience et rigueur dans le travail.
- Capacité à travailler en équipe et à s’organiser.
- Bonne écoute des besoins des utilisateurs.
 Sa semaine type :
- 50% du temps consacré au développement de nouvelles
fonctionnalités pour les plateformes.
- 30% du temps consacré aux tests des fonctionnalités développées.
- 20% du temps consacré à la formation des utilisateurs et à la
résolution de leurs problèmes.

IV. CONCLUSION :

En conclusion de ce premier chapitre, je tiens à souligner les points qui

m’ont marqué au sein de l’Institut de Technologie des Pêches Maritimes de
Tan-Tan. En tant que développeur d’applications, j’ai été impressionné par la
qualité de l’accueil et l’accompagnement que j’ai reçu tout au long de mon
stage. J’ai eu l’opportunité de travailler sur des projets stimulants qui m’ont
permis d’appliquer et d’approfondir mes compétences techniques. Ce stage
a été une expérience très enrichissante pour moi, et je suis reconnaissant
envers l’ITPM de Tan-Tan pour cette opportunité. Je suis convaincu que les
compétences et les connaissances que j’ai acquises lors de ce stage seront
un atout précieux pour ma future carrière professionnelle.
Dans le prochain chapitre, je décrirai en détail les tâches spécifiques
que j’ai réalisées pendant mon stage, y compris les projets sur lesquels j’ai
travaillé, les défis que j’ai rencontrés et comment j’ai utilisé mes

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 20

compétences techniques pour les surmonter.

CHAPITRE II : ANALYSE
ET CONCEPTION

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 21

 I. Introduction :
L'analyse et la conception d'une application de gestion de stage
impliquent une attention particulière à la conception de la base de
données. La conception d'une telle base de données est un processus
complexe qui nécessite une méthode claire et bien définie pour assurer
une communication et une coopération efficaces entre les différents
acteurs impliqués dans le développement du système.
La conception d'une base de données pour une application de
gestion de stage peut être divisée en quatre étapes principales :
 La première étape consiste à analyser la situation existante et
les besoins spécifiques de l'application. Cette étape est cruciale
pour garantir une conception précise et efficace de la base de
données.
 La deuxième étape consiste à créer une série de modèles
conceptuels, notamment un modèle canonique et des vues
externes. Ces modèles permettent de représenter tous les
aspects importants du problème et de faciliter la communication
entre les différents acteurs impliqués.
 La troisième étape consiste à traduire les modèles conceptuels
en un modèle logique et à optimiser ce modèle logique en
appliquant les principes de normalisation. Cette étape est
importante pour garantir l'efficacité et la stabilité de la base de
données.
 Enfin, la quatrième étape consiste à implémenter la base de
données dans un système de gestion de base de données
(SGBD) à partir du modèle logique.

Un des modèles les plus couramment utilisés pour représenter

les données manipulées par le système est le modèle Conceptuel de
Données (MCD) ou modèle Entité/Association. Ce modèle permet de
décrire les entités et leurs associations à l'aide d'une présentation
graphique, sans tenir compte des choix d'organisation ou techniques.

Il est important de noter que certaines contraintes ne peuvent être

représentées uniquement par le formalisme de base du MCD, mais
nécessitent des règles supplémentaires pour garantir la cohérence et la
fidélité du modèle par rapport à l'activité à représenter.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 22

 II. Langage Utilisé :

Logo d'UML

1. Définition :
Le langage UML (Unified Modeling Language) est un langage
de modélisation visuelle utilisé pour concevoir et représenter des
systèmes logiciels. UML est un langage standardisé, largement utilisé
dans l'industrie du logiciel pour faciliter la communication entre les
différents intervenants du projet, tels que les développeurs, les
architectes, les testeurs et les utilisateurs finaux.

2. Les diagrammes :
UML offre une variété de diagrammes qui permettent de modéliser
différents aspects d'un système, tels que la structure, le comportement,
les interactions entre les composants, les cas d'utilisation, les classes et
les objets. Les diagrammes UML peuvent être utilisés à différentes
étapes du cycle de vie d'un projet, de la conception à la maintenance
en passant par la mise en production.
III. Diagramme de cas d’utilisation :
Le diagramme de cas d'utilisation UML est une représentation
graphique des interactions entre un système et les acteurs externes qui
interagissent avec celui-ci. Il permet de modéliser les différentes
fonctionnalités du système et les scénarios d'utilisation associés. Le
diagramme se compose de différents éléments graphiques tels que des
acteurs, des cas d'utilisation et des associations entre eux. Les acteurs
représentent les utilisateurs ou les systèmes externes et les cas
d'utilisation représentent les différentes fonctionnalités ou actions que
le système doit effectuer. En utilisant ce diagramme, les concepteurs
de systèmes peuvent identifier les différents cas d'utilisation et les

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 23

acteurs impliqués, ainsi que valider les exigences du système et aider à
la conception de l'interface utilisateur et de la logique de traitement.

 Diagramme de cas :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 24

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 25
SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 26
CHAPITRE III: réalisation

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 27

 INTRODUCTION :

Ma mission principale durant mon stage à l’Institut de Technologie des

Pêches Maritimes (ITPM) de Tan-Tan était de développer des applications pour le
secteur de la pêche maritime. Pour mener à bien cette mission, j’ai utilisé
différents outils et méthodes, tels que des logiciels de développement et des
méthodes de gestion de projet.
Dans ce chapitre, je vais présenter les résultats de mon étude
bibliographique et montrer comment elle m’a aidé à mieux comprendre le
contexte de ma mission principale.

I. OUTILS ET METHODES UTILISEES :

Au cours de mon stage à l’ITPM TAN-TAN, j’ai travaillé sur le développement
d’une application de gestion du suivi des lauréats. Pour mener à bien cette
mission, j’ai utilisé divers outils et méthodes adaptés aux besoins du projet.

1. JavaScript :

Logo de JavaScript

JavaScript est un langage de programmation de script populaire qui

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 28

permet de créer des applications web interactives. Il est souvent utilisé
pour ajouter des fonctionnalités dynamiques à des sites web, telles que
l'interaction avec les utilisateurs, les animations, la validation des
formulaires et bien plus encore.
Il permet de manipuler le DOM (Document Object Model), ce qui
permet aux développeurs de modifier la structure, le contenu et le
style des pages web en temps réel. Il est compatible avec de nombreux
frameworks et bibliothèques tels que React, Angular, [Link] et jQuery,
ce qui facilite la création d'applications web complexes. Il est
également utilisé pour le développement d'applications mobiles et de
jeux.

2. HTML :

Logo d ‘HTML

HTML, ou HyperText Markup Language, est un langage de

balisage utilisé pour créer des pages Web. Il permet de structurer et
de formater le contenu d'une page Web en utilisant une série de
balises. Les balises permettent de définir des éléments tels que des
titres, des paragraphes, des liens hypertexte, des images, des
tableaux et bien plus encore. Les navigateurs Web interprètent le
code HTML pour afficher les pages Web aux utilisateurs. HTML est
une norme ouverte et est largement utilisé sur le Web .

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 29

 3. CSS :

CSS (Cascading Style Sheets) est un langage

informatique utilisé pour décrire la présentation
visuelle d'une page web. Il permet de séparer le
contenu d'une page (écrit en HTML) de son apparence
visuelle. Les règles CSS définissent des styles tels que
les couleurs, les polices de caractères, les tailles de
texte, les marges et les alignements, qui sont
appliqués aux éléments HTML. Les feuilles de style
CSS peuvent être définies dans un fichier séparé et
appliquées à plusieurs pages web, ce qui facilite la
maintenance et la cohérence de l'apparence visuelle
d'un site web.

4. PHP :

Logo de PHP

PHP signifie (PHP HyperText Preprocessor). Le PHP s’exécute

côté serveur et permet de dynamiser un site. En effet, il existe deux
types de sites Web. D’un côté, les sites disent statiques, et de l’autre,
les sites dynamiques. Le site statique, n’est réalisé qu’avec l’aide du
HTML et du CSS. Le site dynamique, s’actualise tout seul ou presque,

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 30

et permet véritablement d’interagir avec vos visiteurs, et donc il est
réalisé qu’avec du PHP, ou bien d’autres langages.

5. phpMyAdmin :

Logo de PhpMyAdmin

PhpMyAdmin est une application web open source qui permet de

gérer facilement des bases de données MySQL à travers une interface
graphique. Elle offre une interface conviviale pour exécuter des requêtes
SQL, gérer les tables, importer/exporter des données, gérer les utilisateurs
et leurs privilèges, et bien plus encore. PhpMyAdmin est largement utilisé
dans le développement web pour simplifier l'administration des bases de
données sans avoir besoin de taper toutes les commandes SQL à la main.

6. BOOTSTRAP :

Logo de BOOTSTRAP

BOOTSTRAP est un framework développé par l'équipe du réseau

social Twitter. Proposé en open source (sous licence MIT), ce

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 31

framework utilisant les langages HTML, CSS et JavaScript fournit aux
développeurs des outils pour créer un site facilement. Ce framework
est pensé pour développer des sites avec un design responsive, qui
s'adapte à tout type d'écran, et en priorité pour les smartphones. Il
fournit des outils avec des styles déjà en place pour des typographies,
des boutons, des interfaces de navigation et bien d'autres
encore. On appelle ce type de framework un "Front-End
Framework".

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 32

 . CHAPITRE IV :
REALISATION

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 33

 I. LES INTERFACES DE L’APPLICATION :

Authentification :

L'interface d'authentification serait la première étape pour les

utilisateurs afin d'accéder à l'application et aux fonctionnalités
associées. Voici une description de cette interface :

Page de connexion : Les utilisateurs accéderaient à une page de

connexion où ils pourraient entrer leur email et mot de passe.

Bouton de connexion : Après avoir cliqué sur le bouton de

connexion, s'ils ont entré les informations d'identification correctes, ils
seraient redirigés vers la page d'accueil de l'application.

Mail de récupération de mot de passe : Si les utilisateurs ont

oublié leur mot de passe, ils pourraient cliquer sur le message "Mot de
passe oublié !" pour récupérer leur mot de passe.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 34

 Espace d’administration :
 Accueil :
Voici la page d’accueil pour l’administration :

Page d’accueil d’administration

 Modification des utilisateurs :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 35

 Voici la page de modification des utilisateurs :

Page de modification

 Alerte de suppression d’un utilisateur :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 36

 Voici le message de confirmation pour supprimer un utilisateur :

Alerte de suppression

 Les mouvements de stock :

Voici la page du mouvement de stock :

Page des mouvements du stock

 Ajouter un utilisateur :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 37

 Voici la page d’ajout d’un utilisateur :

Page d’ajout d’un utilisateur

 Historique des demandes :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 38

 Voici la page d’historique des demandes :

Page d’historique des demandes

Espace Professeurs :
 Accueil :
Voici la page d’accueil du professeur :

Page d’accueil du professeur

 Création d’une demande :
Voici la page de la création d’une demande :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 39

 Page de la demande

 Modification de son profil :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 40

 Voici la page de modification du profil :

Page de modification du profil :

Espace Chef Des Travaux :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 41

  Accueil :
Voici la page d’accueil pour Chef des travaux :

Page de Chef des travaux

 Modification de la demande :

Voici la page de modification de la demande :

Page de modification de la demande

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 42

 Espace Responsable de magasin :
 Accueil :
 Voici la page de Responsable de magasin :

Page d’accueil pour le responsable

 Génération du bon :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 43

 Voici le bon de la demande :

Bon de livraison

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 44

  Gestion de stock :

Voici la page de modification de stock :

Page de gestion de stock

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 45