Nous tenons 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 nous
avoir accueilli comme stagiaire au sein de son établissement.

Nous sommes extrêmement reconnaissant envers Monsieur

Mohamed ENASRI pour nous 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 nos capacités et son
encadrement précieux ont été essentiels tout au long de mon
parcours. Nous avons énormément apprécié ses conseils éclairés,
sa disponibilité et sa bienveillance.

Nous tenons é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 à nous enseignants et professeurs de

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

Enfin, nous souhaitons exprimer notre reconnaissance à nos

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 1

familles et à nos amis pour leur soutien inconditionnel tout au long
de ce stage. Ils ont été une véritable source de motivation pour
nous.

Ce rapport de stage est le fruit de notre réflexion sur notre

expérience et les leçons que nous en avons tirées. Nous
remercions infiniment toutes les personnes qui ont contribué à
notre 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é.

À mos enseignants et le personnel de BTS,

qui nous ont offert une formation de qualité et un

accompagnement personnalisé. Grâce à eux, j’ai acquis des
connaissances et des compétences indispensables à notre

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 2

 avenir professionnel.
À ITPM TANTAN,

Où nous avons effectué notre stage. J’ai apprécié leur accueil

chaleureux, leur disponibilité et leur professionnalisme. Ils nous
ont permis de découvrir le monde du travail et de mettre en pratique
nos acquis théoriques.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 3

 TABLE DE MATIERE :

INTRODUCTION GENERALE......................................................................................5

CHAPITRE i : Présentation De l’entreprise.............................................7

I. INTRODUCTION..................................................................................................8

I. RAISON SOCIALE & STATUT JURIDIQUE.............................................................9

1. Activités.........................................................................................................9

2. INFORMATIONS SUR ITPM TANTAN...............................................................10

3. ORGANISATION:............................................................................................11

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

III. LES METIERS DU TECHNICIEN AU SEIN DE ITPM TT......................................14

1. FICHE METIERS EXISTANT DANS L’ENTREPRISE...........................................14

2. FICHE METIER DEVELOPPEUR INFORMATIQUE :...........................................14

IV. CONCLUSION :..............................................................................................15

CHAPITRE II : ANALYSE ET CONCEPTION...................................................................16

I. INTRODUCTION :..............................................................................................17

II. LANGAGE UTILISEE :........................................................................................18

Logo d'UML..............................................................................................................18

1. Définition :...................................................................................................18

2. Les diagrammes :.........................................................................................18

III. DIAGRAMME DE CAS D’UTILISATION :..........................................................18

IV. DIAGRAMME DE CLASSE :.............................................................................20

CHAPITRE III: réalisation............................................................................................21

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 4

 I. OUTILS ET METHODES UTILISEES :..................................................................22

1. JavaScript :...................................................................................................22

2. HTML :..........................................................................................................23

Logo d ‘HTML...........................................................................................................23

3. CSS :.............................................................................................................24

4. PHP :.............................................................................................................24

Logo de PHP.............................................................................................................24

5. phpMyAdmin :..............................................................................................25

Logo de PhpMyAdmin...............................................................................................25

6. BOOTSTRAP :...............................................................................................25

Logo de BOOTSTRAP................................................................................................25

II. LES INTERFACES DE L’APPLICATION :..............................................................27

1. Authentification :..........................................................................................27

2. Espace d’administration :.............................................................................28

3. Espace Professeurs :....................................................................................32

4. Espace Chef Des Travaux :...........................................................................35

5. Espace Responsable de magasin :...............................................................36

CHAPITRE III: CONCLUSION.......................................................................................39

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 5

 INTRODUCTION GENERALE
Au cours de notre deuxième année au Brevet de Technicien
Supérieur, nous avons eu l’opportunité de développer nos compétences
et notre 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.

Nous avons effectué notre stage technicien à l’Institut de

Technologie des Pêches Maritimes de Tan-Tan, dans le secteur d’activité
informatique, pour une durée d’un mois, du 10/05/2025 au 10/06/2025 à
El OUATIA, TAN-TAN. Ce stage a été une occasion inestimable de mettre
en pratique nos connaissances théoriques et de plonger au cœur du
milieu professionnel.

Le sujet de notre stage était le « Développement d’une

application site web pour la gestion de stock ». Nous avons suivi
une formation en développement d’applications et avons été impliqués
dans diverses tâches au sein de l’établissement. L’objectif principal de
ce stage était de développer nos compétences techniques, d’acquérir
des responsabilités et d’approfondir notre connaissance du monde du
travail. Il nous a également permis d’établir des liens professionnels
précieux et de participer à des projets collaboratifs.

Dans ce rapport, nous présenterons en quatre chapitres les détails

de notre stage et des travaux réalisés. Le premier chapitre sera
consacré à un bref descriptif de l’établissement, 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.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 6

 Chapitre par chapitre, nous explorerons les différentes facettes de
notre 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 expérience professionnelle enrichissante.

Nous sommes reconnaissants 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. Nous
sommes convaincus que ce stage a été un tremplin essentiel pour notre
avenir professionnel, et nous sommes impatient de partager les
apprentissages réalisations qui en découlent.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 7

 CHAPITRE i :
Présentation De
l’entreprise

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 8

 I. INTRODUCTION
Avant tout, nous avons choisi cet établissement car il est experte
dans son domaine d’activité et reconnue comme un leader sur son
marché. Ce choix nous 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, nous allons présenter en détail

l’établissement, son historique, ses activités et ses valeurs. Nous allons
aussi décrire les missions que nous avons réalisées pendant notre stage
et les compétences que nous avons renforcées. Enfin, nous conclurons
ce chapitre en faisant le bilan de notre expérience de stage et en
exposant les leçons que nous en avons tirées.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 9

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 10

 qualification.
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]
[Link]/ pour plus d’informations.
Tableau 1: Entreprise ITPM TAN-TAN

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 11

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 :
Ce département est responsable de la maintenance et de la

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 12

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 13

 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
dispositions de la convention STCW-F 95.
La formation en cours d’emploi comporte des stages de

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 14

 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.

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 15

 - 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
compétences techniques pour les surmonter.

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 16

CHAPITRE II : ANALYSE
ET CONCEPTION

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 17

 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 18

 II. LANGAGE UTILISEE :

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 19

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 20

 IV. DIAGRAMME DE CLASSE :
Un diagramme de classe UML est un type de diagramme utilisé pour
modéliser les structures d'un système logiciel orienté objet. Il représente les classes, les
interfaces, les relations et les associations entre les différentes entités du système. Les classes
sont représentées sous forme de rectangles, avec les attributs et les méthodes associés à
chaque classe. Les relations entre les classes sont représentées sous forme de flèches, avec
des étiquettes indiquant le type de relation (par exemple, l'association, l'agrégation ou la
composition). Le diagramme de classe UML est souvent utilisé pour visualiser les relations
entre les différents objets d'un système, et pour faciliter la compréhension et la
communication entre les membres d'une équipe de développement.

Ci-dessous le diagramme de classe de notre projet :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 21

 CHAPITRE III:
réalisation

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 22

 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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 23

 JavaScript est un langage de programmation de script populaire qui
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 24

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 25

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 26

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 28
II. LES INTERFACES DE L’APPLICATION :
1. 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 29

2. Espace d’administration :

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

Page d’accueil d’administration

 Modification des utilisateurs :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 30

 Voici la page de modification des utilisateurs :

Page de modification

 Alerte de suppression d’un utilisateur :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 31

 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 32

 Voici la page d’ajout d’un utilisateur :

Page d’ajout d’un utilisateur

 Historique des demandes :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 33

 Voici la page d’historique des demandes :

Page d’historique des demandes

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

 Page de la demande

 Modification de son profil :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 35

 Voici la page de modification du profil :

Page de modification du profil :

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 36

4. Espace Chef Des Travaux :

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

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 37

 Page de modification de la demande

5. Espace Responsable de magasin :

 Accueil :
Voici la page de Responsable de magasin :

Page d’accueil pour le responsable

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 38

  Génération du bon :
Voici le bon de la demande :

Bon de livraison

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 39

  Gestion de stock :

Voici la page de modification de stock :

Page de gestion de stock

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 40

 CHAPITRE III:
CONCLUSION

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 41

 I. CONCLUSION

Bonjour j’ai espère que vos aller bien. Nous sommes

ravi de vous présenter aujourd'hui notre projet de fin
d’etude .qui vise la création d’un site web pour

SAJOUD OUSSAMA | AGNENGOU ABDELHAMID 42