L’Office de la Formation Professionnelle et

de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Rapport de Stage
Période de stage 10 Avr. 2023 – 08 MAI 2023

Entreprise d’accueil  :
-GEQ2I - Général Equipement & Installation Industriels

É tablissement  :
- Institut Spécialisé de technologie Appliqué al Hank

Stagiaire:
-Mohamed Laoud
Général Equipement
& Installation Industriels
Maitre de stage:
- Omar Hajoui

Ingénierie, Travaux de Tuyauterie, Chaudronnerie, Charpente Métallique & Génie Civil

Superviseur :
Karimi Mohamed

1
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Sommaire
Introduction..............................................................................................................................4
 Amorce et présentation du stage  :..................................................................................4
 Descriptif de l’entreprise  :................................................................................................4
 Objectifs du stage  :..........................................................................................................4
 Présentation de l'équipe  :................................................................................................5
 Tache effectuer:................................................................................................................5
a. Service d’affectation....................................................................................................5
b. Contrôle d’appel distant..............................................................................................5
c. Assistance gestion serveur téléphonie.........................................................................6
 Le serveur ipbx  :...............................................................................................................6
 Création des extinctions...................................................................................................6
 Les activités de la société.................................................................................................6
I. Création de site web  :....................................................................................................10
1. Définition d’un site web.............................................................................................10
2. Présentation du site  (Homie)  :...................................................................................10
3. Les langages de programmation utilisées  :...............................................................12
 Laravel  :..................................................................................................................13
 SCSS  :......................................................................................................................14
 CSS  :........................................................................................................................15
 PHP  :.......................................................................................................................17
II. La partie conception  :....................................................................................................18
1. Diagramme de cas d’utilisation  :...............................................................................18
2. Diagramme de class...................................................................................................18
III. Les interphases graphiques  :.....................................................................................19
1. Header :......................................................................................................................19
1. Body  :.........................................................................................................................20
2. Footer :.......................................................................................................................21
2. Dashboard  :................................................................................................................21

2
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

REMERCIEMENTS

Je tiens à exprimer ma sincère gratitude envers toutes les personnes qui ont
contribué à la réussite de mon stage au sein de l'entreprise GEQ2I. Leur soutien et
leur expertise m'ont permis de vivre une expérience enrichissante et formatrice.
Tout d'abord, je souhaite remercier l'équipe Équipe Innovation et Développement
pour leur accueil chaleureux et leur disponibilité tout au long de mon stage. Leur
encadrement attentif et leurs conseils précieux ont joué un rôle essentiel dans mon
développement professionnel. J'ai beaucoup appris de leur expérience et de leur
expertise, et je suis reconnaissant d'avoir pu travailler avec des personnes aussi
talentueuses et passionnées.
Je tiens également à exprimer ma gratitude envers mon superviseur Karimi
Mohamed pour sa confiance et son soutien continu. Ses orientations et ses
encouragements ont été d'une grande valeur, me permettant d'explorer de
nouvelles compétences et de relever des défis stimulants. Sa disponibilité et sa
bienveillance ont créé un environnement propice à mon apprentissage et à ma
croissance professionnelle.
En outre, je tiens à remercier l'ensemble du personnel de l'entreprise pour leur
accueil chaleureux et leur collaboration. Leur convivialité et leur esprit d'équipe ont
contribué à rendre mon stage agréable et épanouissant. J'ai eu l'opportunité
d'interagir avec des collègues bienveillants et compétents, qui ont partagé leur
expertise et favorisé mon intégration au sein de l'entreprise.
Enfin, je souhaite exprimer ma reconnaissance envers mes enseignants et ma
formation académique, qui m'ont fourni les connaissances théoriques nécessaires
pour aborder ce stage avec confiance. Leur enseignement rigoureux et leur
engagement envers ma réussite ont jeté les bases solides sur lesquelles j'ai pu
construire mes compétences et mes réalisations pendant ce stage.
En résumé, je suis profondément reconnaissant envers GEQ2I, l'Équipe Innovation
et Développement, mon superviseur Karimi Mohamed et l'ensemble du personnel
pour cette expérience de stage exceptionnelle. Ce stage m'a permis de consolider
mes connaissances, d'acquérir de nouvelles compétences et de développer mon
réseau professionnel. Je suis convaincu que cette expérience sera un tremplin
précieux pour ma carrière future.Merci sincèrement à tous ceux qui ont contribué à
rendre ce stage aussi enrichissant et mémorable.

3
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Introduction

 Amorce et présentation du stage  :

Le domaine de l'informatique est en constante évolution et constitue un pilier
essentiel de nombreux secteurs d'activité. Dans le cadre de ma formation en
Développement digital et afin d'acquérir une expérience pratique, j'ai eu
l'opportunité d'effectuer un stage de 10 Avr 2023 – 08 Mai 2023 au sein de GEQ2I.
Ce stage m'a permis de mettre en pratique les connaissances théoriques acquises
au cours de ma formation, d'explorer de nouveaux aspects de l'informatique et
d'approfondir mes compétences dans un environnement professionnel réel. Ce
rapport de stage vise à présenter en détail mon expérience, mes tâches et les
compétences que j'ai acquises au cours de cette période enrichissante.

 Descriptif de l’entreprise  :
L'entreprise GEQ2I est une société spécialisée dans le domaine de l'informatique.
Elle se positionne en tant que leader dans l’Ingénierie. Son équipe dynamique et
ses solutions innovantes lui ont permis de se démarquer sur le marché. J'ai eu la
chance d'intégrer cette entreprise renommée et de travailler aux côtés de
professionnels chevronnés.

 Objectifs du stage  :
L'objectif principal de mon stage était de mettre en pratique mes connaissances
théoriques dans le domaine de l'informatique en travaillant sur des projets
concrets. Les objectifs spécifiques étaient les suivants :
. Approfondir mes compétences techniques dans la création des applications
web.
. Comprendre les enjeux et les processus liés au développement de logiciels.
.Collaborer au sein d'une équipe expérimentée et participer à des projets
d'envergure.

 Présentation de l'équipe  :
Au sein de l'entreprise, j'ai été intégré à l'Équipe Innovation et Développement qui
était composée de professionnels passionnés par leur métier. Cette équipe était

4
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

chargée de concevoir, développer et mettre en œuvre des applications logicielles

répondant aux besoins spécifiques de l’entreprise.
J'ai eu l'occasion de travailler en étroite collaboration avec ses membres, ce qui
m'a permis de bénéficier de leur expertise et de développer mes compétences. En
conclusion, ce rapport de stage présentera en détail les différentes tâches que j'ai
réalisées, les compétences que j'ai acquises et les défis auxquels j'ai été confronté
au cours de mon stage au sein de l'entreprise GEQ2I. J'espère que cette expérience
servira de tremplin pour ma future carrière dans le domaine de l'informatique et je
suis reconnaissant envers l'entreprise et l'équipe qui m'ont offert cette opportunité
unique.

 Tache effectuer:
a. Service d’affectation.

J’ai effectué mon stage au niveau du département IT qui a pour mission de :

1- Développer et maintenir des bases de données pour la gestion des
Ressources Humaines et Financières.
2- Assurer le support technique, la mise à jour, la maintenance et l'inventaire
du matériels et logiciels.
3- Sélectionner et implanter des progiciels de gestion intégrée.
4- Donner les conseils, la formation au profit des utilisateurs sur les nouvelles
technologies pour leur permettre la prise en charge de ses applications.
5- Fournir les conseils pour le choix de matériels et de logiciels.
6- Améliorer la communication interne, externe et le travail de groupe par
l’utilisation des nouvelles technologies de l’information et de la
communication.
7- Elaborer et mettre en œuvre des manuels de procédures informatiques ainsi
que des manuels de support pour la formation des utilisateurs.
8- Calculer les primes de campagne et de fin d’année.

b. Contrôle d’appel distant.

Si votre environnement est configuré pour le contrôle d'appel distant, vous

transférez des appels vers un des numéros que vous avez spécifiés sous le serveur
d’ordinateur admin de l’hôtel. Les fonctionnalités de transfert d'appel sont tout
particulièrement utiles si vous êtes en déplacement ou si vous travaillez de votre
domicile. Si vous êtes absent du bureau, des appels peuvent être automatiquement
transférés à un collaborateur de façon qu'aucun appel important soit perdu.
Lorsque le transfert d'appel est activé, tous les appels entrants sont
automatiquement transférés vers la destination de votre choix. Les appels entrants

5
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

n'émettent pas de sonnerie ou n'affichent pas d'alerte d'appel sur l'écran de votre
ordinateur.

c. Assistance gestion serveur téléphonie

Vérification de système et des serveur ipbx .

 Le serveur ipbx  :

Ce serveur permet de configurer et relier des communications téléphoniques par

VOIP au sein de la société et vers d’autres opérateurs. Vous allez devoir :
Configurer le réseau de l’opérateur ; Paramétrer le serveur IP PBX avec une
messagerie ; Effectuer un test concret par rapport au système. Travail demandé .

 Création des extinctions

Affectation des extensions au poste.

Transfert des appels vers les GSM.

 Les activités de la société

Salon Equipauto 2013 : une timide présence marocaine

ENVOYÉ PAR ADMIN AU 31 OCTOBRE 2013 DANS ACTUALITÉS | 239 VUES
| LEAVE A RESPONSE

6
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

La 21e édition du salon équipauto se tient à Paris Nord Villepinte du 16 au 20

octobre. Sous l’égide de Maroc export, le Maroc s’est doté d’un stand commun
pour faire la promotion de ses industries, à travers la présence de 13 entreprises du
royaume.

Equipauto, le salon international et biennal dédié aux services et équipements

automobiles bat son plein jusqu’au 20 octobre à Paris. Le Maroc représenté par 13
entreprises spécialisées dans les équipements pour véhicules, sous l’égide de
Maroc Export tente de faire bonne figure au milieu de 1 800 exposants dont pas
moins de 75% internationaux.

Créé en 1975, sur une surface de 120000 m², Equipe auto se veut le rendez-vous de
l’après-vente et de la réparation automobile pour les fabricants, les distributeurs et
autres réparateurs.

Les entreprises marocaines présentes cette année figurent dans les activités de la
batterie, vitrage, motorisation, embrayage, freinage, filtres, commercialisation de
bâtiments industriels et plateformes industrielles automobiles.

Parmi les exposants, on compte aussi Atlantic free zone (AFZ), la zone franche de
Kénitra et une autre zone franche à savoir Tanger free zone (TFZ) comprenant celle
de Tanger ville et Mallousa à proximité de l’usine Renault.

L’automobile devient un secteur phare de l’industrie au Maroc avec 10 000 emplois

créés entre 2008 et 2012, ce qui s’est accéléré depuis l’arrivée de Renault en 2012
qui a draîné avec lui plusieurs dizaines de sous-traitants équipementiers. Mais, la
plupart des entreprises du secteur restent encore des entreprises étrangères

7
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

venues d’Europe, du Japon ou des États-Unis, ce qui explique la faiblesse du tissu

industriel proprement marocain.

Maroc : du 11 au 17 octobre, le meilleur de la semaine de l’industrie en bref

Comme chaque vendredi, retrouvez dans le digest de « L’Usine Nouvelle Maroc »

les principaux faits et tendances de l’industrie au Maroc.
LE FAIT DE LA SEMAINE BP met un pied au Maroc dans l’exploration offshore
British Petroleum entre dans l’exploration pétrolière au Maroc avec l’acquisition le
10 octobre de parts d’intérêts de la junior Kosmos Energy dans les accords
pétroliers concernant le bassin offshore d’Agadir.
 
LE TOP DES ARTICLES LES PLUS LUS DE « L’USINE MAROC » DU 11 AU 17 OCTOBRE

1 – Gouvernement Benkirane II : avec Moulay Hafid Elalamy, un patron du privé

devient ministre de l’Industrie du Maroc
2 – Ratier Figeac certifie des sous-traitants marocains pour faire monter en gamme
son site de Casablanca
3 – BP met un pied dans l’exploration pétrolière offshore au Maroc avec le rachat
de parts de Kosmos
4 – L’Allemagne finance le programme eau du géant marocain des phosphates
OCP pour 271 millions de dollars
5 – Maroc : l’extension de l’Institut des métiers de l’aéronautique passe en phase
active
 
MAIS AUSSI…

8
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Sidérurgie : Maghreb Steel suspendu à l’aide de l’État le doublement du site

Renault Tanger s’accompagne de 1400 embauches
L’indexation des prix du carburant met le Maroc en émoi
Maroc : pourquoi les clusters ne décollent pas (encore)
Les exportations aéronautiques et automobiles du Maroc en nette hausse sur 9
mois.

L’équilibre global du commerce extérieur marocain est resté globalement

inchangé et extrêmement dégradé sur trois trimestres, mais les exportations
aéronautiques et automobiles flambent… tout comme les importations de
composants.

Les exportations aéronautiques et automobiles du Maroc ont fortement progressé

sur les neuf premiers mois de l’année.
 
Celles-ci ont bondi, respectivement, de 19,2% et 17,5%. En matière automobile, on
relève notamment un dynamique boom de +58,3% pour les seules exportations de
véhicules qui totalisent 8 milliards de dirhams (710 millions d’euros).
 
Ces chiffres ressortent des données préliminaires sur les échanges extérieurs du
Maroc publiées par l’Office des changes, la semaine dernière (voir document
complet à la fin de cet article).
 
C’est là une conséquence directe et visible de l’implantation au Maroc de grands
industriels internationaux comme Safran dans l’aéronautique ou Renault dans

9
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

L’automobile. Ainsi, la nouvelle plate-forme Renault de Tanger-Melloussa ouverte

en février 2012 a exporté son 100 000ème véhicule début septembre.
 
Un bon point donc pour les « Métiers mondiaux du Maroc » poussés dans le cadre
de la stratégie « Emergence industrielle » des pouvoirs publics depuis 2009.

I. Création de site web  :

1. Définition d’un site web

Un site web, site Web ou simplement site, est un ensemble de pages web et de
ressources reliées par des hyperliens, défini et accessible par une adresse web. Un
site est développé à l'aide de langages de programmation web, puis hébergé sur
un serveur web accessible via le réseau mondial Internet, un intranet local, ou
n'importe quel autre réseau, tel que le réseau Tor.

2. Présentation du site  (Homie)  :

Bienvenue sur une plateforme immobilière révolutionnaire qui transformera votre
manière de chercher, découvrir et vivre votre logement de rêve. Aujourd'hui, nous
sommes ravis de vous présenter notre projet web immobilier Laravel innovant qui
répond à vos divers besoins en matière de logement. Rejoignez-nous dans cette
aventure passionnante alors que nous redéfinissons l'expérience de recherche de
logement.
" Diapositive 1 : Problématique "Dans le monde d'aujourd'hui, trouver la maison
parfaite peut être une tâche ardue et chronophage. Le marché immobilier est
vaste, diversifié et en constante évolution. Les acheteurs de logements sont
souvent confrontés à des défis tels que des informations limitées sur les propriétés,
des annonces dispersées et un processus de présélection épuisant. Nous avons
identifié ces points de friction et avons entrepris de créer une solution.
" Diapositive 2 : Présentation de notre projet web immobilier "Notre projet web
immobilier Laravel est une solution tout-en-un conçue pour simplifier et améliorer
votre expérience de recherche de logement. En exploitant la puissance de Laravel,
un framework web robuste, nous avons créé une plateforme conviviale et riche en
fonctionnalités qui offre les avantages suivants : Annonces immobilières
complètes: Accédez à une vaste base de données de maisons, d'appartements, de
villas et de biens commerciaux, le tout au même endroit. Filtres de recherche
avancés : Affinez votre recherche en fonction de la localisation, de la fourchette de
prix, du type de propriété, des commodités, et bien plus encore, pour vous assurer
de trouver exactement ce que vous recherchez.

10
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Profils de propriétés détaillés : Plongez dans des descriptions détaillées de chaque

propriété, avec des images haute résolution, des plans d'étage et des visites
virtuelles pour obtenir une compréhension complète de chaque annonce.
Recherches et alertes enregistrées : Sauvegardez vos recherches préférées et
recevez des notifications instantanées lorsqu'il y a de nouvelles propriétés
correspondant à vos critères.
Cartes interactives : Explorez les propriétés visuellement grâce à des cartes
interactives, vous permettant d'identifier les quartiers souhaitables et les
commodités à proximité.
Contact et communication : Connectez-vous facilement avec des agents
immobiliers, planifiez des visites de propriétés et posez des questions via notre
système de messagerie intégré.
Recommandations personnalisées : Recevez des recommandations de propriétés
personnalisées basées sur vos préférences et votre historique de navigation, vous
faisant ainsi gagner du temps et des efforts.
Expérience mobile conviviale : Accédez à notre plateforme à tout moment, depuis
votre ordinateur de bureau, votre ordinateur portable ou votre appareil mobile,
pour une expérience fluide où que vous soyez."

Diapositive 3 : Notre Engagement en matière de Qualité et de "Chez GEQ2I, nous

comprenons l'importance de la confiance et de la transparence dans les
transactions immobilières. Nous avons mis en place un processus de vérification
rigoureux pour nous assurer que toutes les propriétés répertoriées sur notre
plateforme respectent des normes de haute qualité. De plus, nous collaborons avec
des agents immobiliers et des agences réputés, vous offrant ainsi la tranquillité
d'esprit tout au long de votre parcours d'achat immobilier."

Diapositive 4 : Conclusion "En conclusion, notre projet web immobilier Laravel

vous permet de naviguer dans le marché immobilier avec facilité et confiance. Que
vous soyez un acheteur de logement pour la première fois, un investisseur
chevronné ou simplement à la recherche d'un changement de décor, notre
plateforme est votre porte d'entrée pour trouver la propriété parfaite. Rejoignez-
nous dès aujourd'hui et embarquez pour une aventure de recherche de logement
sans faille qui dépassera vos attentes."

11
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

3. Les langages de programmation utilisées  :

JavaScript est un langage de programmation interprété de haut

niveau principalement utilisé pour créer des pages web dynamiques
et interactives. Il est souvent appelé le "langage du web" car il est
largement pris en charge par les navigateurs web et permet aux
développeurs d'ajouter des fonctionnalités, de l'interactivité et des
comportements aux sites web. JavaScript a été initialement
développé pour gérer des scripts côté client, permettant l'exécution de code
directement dans un navigateur web. Il a depuis évolué et élargi ses capacités,
étant maintenant utilisé non seulement dans le développement web, mais
également dans le développement côté serveur (avec des plateformes telles que
Node.js), le développement d'applications mobiles, le développement de jeux, et
bien plus encore. Les principales caractéristiques de JavaScript sont les suivantes :
Dynamique et flexible : JavaScript est un langage à typage dynamique, ce qui
permet aux variables de contenir des valeurs de différents types. Il offre une
flexibilité pour manipuler et modifier le contenu d'une page web en temps réel.
Programmation orientée événements : JavaScript prend en charge la
programmation orientée événements, où les actions ou événements sur une page
web (comme des clics de bouton, des soumissions de formulaire ou le chargement
de la page) déclenchent des fonctions ou des comportements spécifiques.
Manipulation du DOM : JavaScript peut interagir avec le Modèle Objet de
Document (DOM), qui représente la structure d'une page web, pour modifier et
mettre à jour dynamiquement ses éléments, styles et attributs. Validation côté
client : JavaScript permet la validation des formulaires côté client, offrant ainsi un
retour instantané aux utilisateurs sur les erreurs de saisie avant de soumettre le
formulaire au serveur. Prise en charge de la programmation asynchrone :
JavaScript fournit des fonctionnalités telles que les callbacks, les promesses et les
async/await pour gérer la programmation asynchrone et les opérations non
bloquantes. JavaScript est un langage polyvalent et essentiel dans le
développement web moderne, offrant de nombreuses possibilités pour créer des
expériences utilisateur interactives et dynamiques sur le web.

12
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 Laravel  :

Laravel est un framework de développement web en PHP qui suit le

modèle MVC (Modèle-Vue-Contrôleur). Il fournit une structure et
des fonctionnalités puissantes pour la création d'applications web
robustes et évolutives. Voici quelques caractéristiques clés de
Laravel : Routing : Laravel offre un système de routage fluide et facile à utiliser.
Vous pouvez définir des routes pour gérer les requêtes HTTP entrantes et les
rediriger vers les contrôleurs appropriés, qui sont responsables du traitement des
requêtes et de la logique métier associée. Modèles et bases de données : Laravel
facilite la gestion des bases de données grâce à son ORM (Object-Relational
Mapping) appelé Eloquent. Eloquent simplifie les opérations courantes telles que la
récupération, la création, la mise à jour et la suppression des données dans une
base de données. Il prend également en charge les migrations de bases de données
pour la gestion des schémas. Système de templates : Laravel utilise le moteur de
templates Blade, qui offre une syntaxe claire et expressive pour créer des vues
dynamiques. Blade permet de séparer la logique de présentation du code PHP,
offrant ainsi une meilleure lisibilité et facilitant la maintenance des vues. Gestion
des sessions et de l'authentification : Laravel fournit des fonctionnalités intégrées
pour gérer les sessions utilisateur et mettre en place un système d'authentification.
Il est facile de mettre en œuvre des fonctionnalités d'inscription, de connexion, de
déconnexion et d'autorisation dans vos applications web. APIs et intégration :
Laravel facilite le développement d'APIs grâce à son support intégré pour la
création de routes et de contrôleurs dédiés aux APIs. Il fournit également des
fonctionnalités d'intégration tierces pour la communication avec des services
externes, tels que l'envoi de courriers électroniques, les paiements en ligne,
l'utilisation de services de stockage cloud, etc. Tests automatisés : Laravel
encourage le développement de tests automatisés pour garantir la qualité et la
stabilité de votre application. Il fournit des outils et des classes de test pour
faciliter la création de tests unitaires et fonctionnels. Community et écosystème :
Laravel bénéficie d'une communauté active et d'un vaste écosystème de packages
tiers. Vous pouvez facilement étendre les fonctionnalités de Laravel en utilisant ces
packages, ce qui permet d'accélérer le développement de votre application.
Laravel favorise une approche élégante et expressive du développement web en
fournissant des outils puissants et des conventions bien établies. Il est largement
utilisé pour créer une grande variété d'applications web, allant des petites
applications aux grandes plates-formes complexes.

13
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 SCSS  :

SCSS (Sassy CSS) is an extension of CSS that adds powerful features and
capabilities to the standard CSS syntax. It is a superset of
CSS, which means that any valid CSS code is also valid SCSS
code. Here are some key features and concepts of SCSS:
Variables: SCSS allows you to define variables to store
reusable values, such as colors, font sizes, or any other CSS
value. Variables help in maintaining consistency and making it easier to
update styles across the codebase. Nesting: SCSS allows you to nest selectors
inside one another, which mirrors the structure of your HTML markup. This
nesting makes the SCSS code more readable and helps in organizing styles.
Mixins: Mixins are reusable blocks of CSS declarations that can be included
in other selectors. They allow you to define a set of styles once and reuse
them throughout your SCSS codebase. Mixins can also accept parameters,
making them versatile for generating dynamic styles. Partials and Imports:
SCSS supports partial files that start with an underscore (_) character. These
partials can contain snippets of SCSS code and are commonly used to break
down styles into smaller, manageable files. Importing partials into a main
SCSS file allows you to organize your codebase and improve code reusability.
Inheritance and Extends: SCSS provides the ability to extend the styles of one
selector with another using the @extend directive. This allows you to inherit
styles from a base selector and reduce code duplication. Operators and
Functions: SCSS includes various operators (e.g., arithmetic, logical) and
built-in functions to perform calculations, manipulate values, and apply
complex logic to your styles. Control Directives: SCSS introduces control
directives such as @if, @for, and @each that allow you to apply conditional
logic and loops in your stylesheets. This enables you to generate dynamic
styles based on certain conditions or iterate over lists of values. SCSS files
are typically preprocessed into regular CSS using a tool like Sass or a build
system like webpack. The resulting CSS can be used in web projects to style
HTML elements and create visually appealing and maintainable designs.


14
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 CSS  :

CSS (Cascading Style Sheets) est un langage de feuille de

style utilisé pour décrire la présentation et la mise en
forme d'un document écrit en HTML ou XML. CSS est
responsable du contrôle de l'apparence visuelle des
pages web, y compris la mise en page, les couleurs, les polices et autres
éléments de design. CSS fonctionne en sélectionnant des éléments HTML et
en leur appliquant des styles spécifiques. Il utilise une syntaxe basée sur des
règles, où chaque règle se compose d'un sélecteur et d'un bloc de
déclarations. Le sélecteur cible un ou plusieurs éléments HTML, et le bloc de
déclarations contient une ou plusieurs propriétés de style et leurs valeurs
correspondantes. Les principales caractéristiques et concepts de CSS incluent
: Sélecteurs : Les sélecteurs CSS sont utilisés pour cibler des éléments HTML
spécifiques ou des groupes d'éléments afin d'appliquer des styles de manière
sélective. Les sélecteurs peuvent cibler les éléments en fonction de leur nom
de balise, de leur classe, de leur ID, de leurs attributs ou de leur position
dans la structure du document.
Propriétés et valeurs : Les propriétés CSS définissent les caractéristiques
visuelles ou les comportements spécifiques à appliquer aux éléments
sélectionnés. Les propriétés comprennent des attributs tels que la couleur, la
taille de la police, la marge, le padding, l'arrière-plan, et bien d'autres
encore.
Les valeurs représentent les paramètres ou les valeurs attribuées à ces
propriétés. Cascade et spécificité : CSS suit le principe de cascade, où
plusieurs règles de style peuvent être appliquées au même élément, et leurs
conflits sont résolus en fonction de la spécificité et de l'ordre. La spécificité
détermine quelle règle a la priorité lorsque plusieurs règles ciblent le même
élément.
Héritage : Les propriétés CSS peuvent être héritées par les éléments enfants
à partir de leurs éléments parents. Cela signifie que si une propriété n'est
pas explicitement définie pour un élément enfant, elle héritera de la valeur
de son parent. CSS est un outil puissant pour personnaliser l'apparence des
pages web et permet aux développeurs de créer des designs attrayants et
cohérents sur leurs sites.

15
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 HTML

L'HTML est un langage informatique utilisé sur l'internet. Ce

langage est utilisé pour créer des pages web. L'acronyme signifie
HyperText Markup Language, ce qui signifie en français "langage
de balisage d'hypertexte". Cette signification porte bien son nom
puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une
structure de balisage.
Ce n'est pas à proprement parlé un langage de programmation, mais plutôt un
langage qui permet de mettre en forme du contenu. Les balises permettent de
mettre en forme le texte et de placer des éléments interactif, tel des liens, des
images ou bien encore des animations. Ces éléments ne sont pas dans le code
source d'une page codé en HTML mais "à coté" et la page en HTML ne fait que
reprendre ces éléments.
Pour visualiser une page en HTML il est nécessaire d'utiliser un navigateur web.

La plupart du temps d'autres langages informatique sont associé à une page codé
en HTML. Par exemple le CSS, qui permet de mettre en forme le contenu d'une
page codé en HTML. Il y a également des langage informatique qui dépendent
entièrement du HTML

16
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 PHP  :

PHP : PHP est un langage de script utilisé le plus souvent côté

serveur : dans cette architecture, le serveur interprète le code PHP
des pages web demandées et génère du code (HTML, XHTML, CSS
par exemple) et des données (JPEG, GIF, PNG par exemple)
pouvant être interprétés et rendus par un navigateur web. PHP
peut également générer d'autres formats comme le WML, le SVG et le PDF.
Il a été conçu pour permettre la création d'applications dynamiques, le plus
souvent développées pour le Web. PHP est le plus souvent couplé à un serveur
Apache bien qu'il puisse être installé sur la plupart des serveurs HTTP tels que IIS
ou nginx. Ce couplage permet de récupérer des informations issues d'une base de
données, d'un système de fichiers (contenu de fichiers et de l'arborescence) ou plus
simplement des données envoyées par le navigateur afin d'être interprétées ou
stockées pour une utilisation ultérieure.
C'est un langage peu typé et souple et donc facile à apprendre par un débutant
mais, de ce fait, des failles de sécurité peuvent rapidement apparaître dans les
applications. Pragmatique, PHP ne s'encombre pas de théorie et a tendance à
choisir le chemin le plus direct.
Néanmoins, le nom des fonctions (ainsi que le passage des arguments) ne respecte
pas toujours une logique uniforme, ce qui peut être préjudiciable à l'apprentissage.

17
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

II. La partie conception  :

1. Diagramme de cas d’utilisation  :

2. Diagramme de class 

18
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

III. Les interphases graphiques  :

1. Header :

19
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

1. Body  :

20
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

2. Footer :

2. Dashboard  :

Login  :

Créer Catégorie  :

21
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Créer propriété:

22
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 Abonnement  :

23
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

 Messages  :

Conclusion

24
L’Office de la Formation Professionnelle et
de Promotion de Travail ‫الشغل إنعاش و المهني التكوين مكتب‬

Finalement ce stage a été très enrichissant pour moi en tant qu’étudiante,

car il m’a permis de découvrir le monde professionnel, ses défis et les limites
qu'il impose. Et grâce auquel, j’ai pu participer concrètement aux défis
auxquels l’entreprise est confrontée à travers ma réalisation de site web de
réservation, ce qui m’as fait l'honneur de contribuer à une solution à l'une
de ses problématiques après notre rapide intégration grâce aux
collaborateurs, ce qui m’as donné la possibilité d'entreprendre plusieurs
tâches et de surmonter facilement les difficultés
De plus, cette formation a rafraîchi mes acquis académiques et m’as permis
de mon engager dans des le marché de travail et de construire une
expérience pratique, ce qui a précisé nos intérêts, mes compétences et mes
domaines d'innovation pour me faire une idée du travail approprié pour
chacune de nous à l'avenir.
Et pour conclure, je tiens à remercier mon institut ISTA EL HANK, qui m’a
donné l'opportunité de vivre cette expérience, et tout le personnel de GEQ2I
Casablanca pour m’avoir encadré et alloué de leur temps afin de
m’apporter leurs connaissances et leurs conseils utiles à court et long terme

25