2022/2023

CENTRE DU BTS LYCÉE LISSANE

EDDINE IBN AL-KHATIB LAÀYOUNE

RAPPORT DE STAGE
 Réalisé par : Yassine BOUCHAMRA
Lhcen FAHMI

 Encadré par : Ayman RIAD

Création d’une plateforme des

systèmes de gestion
 REMERCIEMENT

Je remercier Dieu tout puissant de la patience et de la volonté qui

m’a donné pour réaliser ce projet de fin d’étude.
Je voudrais remercier tous ceux qui ont apporté une contribution
dans la réalisation de ce projet de fin d’étude. Ainsi, je remercie
les membres jury d’avoir accepté
d’examiner le projet. À tous ces intervenants, je présente mes
remerciements, mon respect et ma gratitude.
Je tiens à exprimer toute ma reconnaissance à mon Professeur
Monsieur. Youssef KERROUM, je le remercie de m’avoir encadré,
orienté, aidé et conseillé.

1
 DIDICAS

A mes parents
Pour tous les sacrifices qu’ils ont faits et pour tout le soutien qu’ils ont
offert tout au Long de mes études
J’espère qu’ils puissent trouver dans ce modeste travail un témoignage
d’amour et d’affection envers eux
A mes amis et mes collègues
Pour leur encouragement et pour tous les bons moments qu’on a vécus
ensemble.
J’espère que notre amitié durera éternellement.

2
 SOMMAIRE

REMERCIMENT.................................................................................................................................1
DIDICAS...............................................................................................................................................2
INTRODUCTION GENERAL...........................................................................................................5
Présentation et approche du projet.....................................................................................................6
INTRODUCTION............................................................................................7
I. Identification d’une agence de services digitaux...........................................7
II. Cahier des charges.....................................................................................7
1. Les problématiques................................................................................7
2. Les solutions...........................................................................................8
III. Implémentation du projet.........................................................................8
1. La présentation du site web :.................................................................8
2. Le formulaire de contact :.....................................................................12
3. Les outils, logiciels et les langues utilisant :..........................................15
LES LANGUSE DE PROGRAMATION :...................................................15
LES LOGICIELS UTILISANT :......................................................................16
Conclusion...........................................................................................................................................17

3
 LISTE DES FIGURES

Figure 1 : Header8
Figure 2 :Main 9
Figure 3 :logo de l’agence9
Figure 4 : Section des services0
Figure 5 : Section des projets1
Figure 6 :contact form2
Figure 7 :la page de confirmation3
Figure 8 :3
Figure 9 :about4
Figure 10 :4
Figure 11 :footer4

4
 INTRODUCTION GENERAL

L'informatique désigne l'automatisation du traitement de l'information par

un système, concret (machine) ou abstrait. Dans son acception courante,
l'informatique désigne l'ensemble des sciences et techniques en rapport avec le
traitement de l'information. Dans le parler populaire, l'informatique peut aussi
désigner ce qui se rapporte au matériel informatique (l'électronique), et la
bureautique.
Dans l'absolu, on pourrait faire de l'informatique avec n'importe quel
système se comportant comme un circuit logique : machine mécanique (comme
par exemple la pascaline ou les automates), machine pneumatique, système
hydraulique… Les premiers programmes datent même d'avant l'invention de
l'ordinateur (voir Ada Lovelace). Dans les faits, seule l'électronique numérique
permet d'avoir une puissance de calcul accessible à un coût raisonnable — coût
financier, mais aussi place occupée par la machine, ressources nécessaires à la
fabrication et au fonctionnement, nuisances sonores, durée de vie de la machine,
rapidité du traitement (coût en heures de travail, disponibilité), souplesse
(adaptabilité)… La séparation concept/support reste donc très abstraite.
L’informatisation donc est le phénomène le plus important de notre
époque. Elle s’immisce maintenant dans la plupart des objets de la vie courantes,
que ce soit dans l’objet proprement dit, ou bien dans le processus de conception
ou de fabrication de cet objet. Et dans ce cas j’ai utilisé cette technologie de
l’informatisation pour développer un site web d’une agence qui peut présenter
leur service d’une manière créative avec une interface dynamique, les visiteurs
peuvent naviguer sur le site en toute fluidité et contacter l’organisation
facilement utilisant le formulaire de contact et aussi voir les projets précédents
de l’entreprise.

5
 Présentation et
approche du projet

6
 INTRODUCTION

Ce chapitre présente d’une manière générale le contexte de travail et les

objectifs de projet de fin d’études. Je vais commencer par une présentation des
activités et les actions dans le site web, après je vais présenter les services
digitaux de l’entreprise.

1. Identification d’une agence de services digitaux

Une agence de services du numérique offre des solutions informatiques

complètes et fait le lien entre les clients et les fabricants utilisant des canaux
digitaux comme les recherches Google, les réseaux sociaux, les e-mails et les
sites web. Les entreprises qui dépendent d’une infrastructure informatique
performante et sécurisée peuvent compter sur les solutions informatiques
proposées par les entreprises de services du numériques. Elles s’adaptent aux
changements constants du secteur et maintiennent vos systèmes à jour.

2. Cahier des charges

3. Les problématiques

 Il est difficile de présenter les services de l'agence à les clients

potentiels.

 Pour qu'un client puisse communiquer avec l'agence, il doit se

déplacer au siège de l'agence et peut se rendre à une heure
qui peut ne pas être l'heure du travail.

 Chaque fois qu'un client voulait voir les projets précédents de

l'agence Il doit se rendre au siège de l'entreprise et en faire la
demande, et donc ce processus nécessite du temps et du
travail.

 L'entreprise ne peut pas consulter les statistiques des

personnes intéressées par ses services.

7
  L'agence ne dispose pas de données lui permettant de savoir
quel type de personnes pourraient être intéressées par ses
services.

4. Les solutions

 La création d’un site web qui regroupe tous les services de

l’entreprise.

 Nous avons intégré un formulaire de contact sur le site web qui

permet aux utilisateurs de communiquer directement avec
l'entreprise et de poser leurs questions quand ils veulent, 7/7 et
24/24.

 Nous avons ajouté une section pour les projets précédents de

l'entreprise, ce qui augmente la confiance des clients.

 L'entreprise peut consulter les statistiques des visiteurs du site

et déterminer le type, l'âge et les intérêts des visiteurs.

5. Implémentation du projet
1. La présentation du site web :
 La première partie du site s'appelle « Header » et contient un menu de

navigation pour faciliter le processus de navigation entre les

parties du site.

Figure 1 : Header

Pour revenir à l’accueil

8
 Pour accéder aux les informations
d’entreprise
 La deuxième section est appelée « main » où l'interface du site contient le
logo de l'entreprise avec un texte animé qui explique le but de l'entreprise

et un fond d'écran animé

C'est une icône pour accéder au

formulaire de contact

Ce texte est animé de manière à

ce que le changement se fasse
d'une phrase à l'autre par une
transition

Le logo de l’agence

Figure 2 : Main
9
 Figure 3: logo de l’agence
 La troisième section est pour les services, où chaque service est affiché dans
une carte avec une explication simplifiée et une image expressive.

Le nom du service

La definition du service

Le nom de la section

10
 Une image pour exprimer le service
 Cette section est pour les
projets précédents de l'agence, où il y a des cartes avec des informations
sur les projets écrits dessus, et lorsque vous cliquez sur la carte, elle tourne
et le projet apparaît.

11
 Figure 5 : Section des projets

12
 2. Le formulaire de contact :

 Cette partie est le formulaire de contact « contact form » afin que les visiteurs
puissent communiquer avec l'entreprise ou poser des questions directement,
et elle contient la localisation de l'agence.

Figure 6 : Contact form

La localisation de l’agence à
partir de Google Maps

Les informations de contact

13
  Lorsque l'utilisateur remplit ses informations et appuie sur l'icône d'envoi,
cette page apparaît confirmant que l'agence a bien reçu son message et qu'elle

Figure 118: La page de confirmation

y
répondra dans les plus brefs délais.

Ce texte indique à l'utilisateur

que la soumission a réussi

Cette icône permet à l'utilisateur

de revenir à la page d'accueil du
site

14
  La cinquième section contient des informations générales sur l'entreprise et le
but de sa création, la philosophie dont ils dépendent, Donc Il se compose de 3
parties :

 La section du rôle de l'agence.

 La partie de la vision qu'ils suivent.

Figure 251 : About

 La partie de la philosophie en laquelle ils croient.

15
  Il s'agit de la dernière partie du site appelée « Footer » qui contient le logo de

Figure 283: Footer

l'entreprise et un rappel de copyright.

6. Les outils, logiciels et les langues utilisant :

Dans cette partie, nous présenterons les outils que nous avons utilisés et les langages
de programmation sur lesquels nous nous sommes appuyés pour créer le site, nous
présenterons également le site et expliquerons ses composants les plus importants.

LES LANGUSE DE PROGRAMATION :

Html
L'HyperText Markup Langage, HTML, désigne un type de
langage informatique descriptif. Il s'agit plus précisément d'un
format de données utilisé dans l'univers d'Internet pour la mise en
forme des pages Web. Il permet, entre autres, d'écrire de
l'hypertexte, mais aussi d'introduire des ressources multimédias dans un
contenu.

CSS

16
 Le CSS pour Cascadant Style Sheets, est un langage
informatique utilisé sur Internet pour la mise en forme de fichiers
et de pages HTML. On le traduit en français par feuilles de style en
cascade.

Javascript
JavaScript désigne un langage de développement
informatique, et plus précisément un langage de script orienté
objet. On le retrouve principalement dans les pages Internet. Il
permet, entre autres, d'introduire sur une page web ou HTML des
petites animations ou des effets.

PHP
Est un langage informatique utilisé sur l’internet. Le
terme PHP est un acronyme récursif de « PHP : Hypertext
Preprocessor ». Ce langage est principalement utilisé pour
produire un site web dynamique. Il est courant que ce
langage soit associé à une base de données, tel que MySQL. Exécuté du cô té
serveur (l’endroit où est hébergé le site) il n’y a pas besoin aux visiteurs d’avoir
des logiciels ou plugins particulier.

LES LOGICIELS UTILISANT :

Visual studio code

Visual Studio Code est un éditeur de code source gratuit créé
par Microsoft pour Windows, Linux et MacOs. Les
fonctionnalités incluent la prise en charge du débogage, de la
coloration syntaxique, de la complétion intelligente du code,

17
des extraits de code, de la refactorisation du code et de Git intégrer. Les
utilisateurs peuvent modifier le thème, les raccourcis clavier, les préférences et
installer des extensions qui ajoutent des fonctionnalités supplémentaires.

Adobe Illustrator
Logiciel professionnel de conception d'images vectorielles, édité
par la société Adobe. A la différence d'une image bitmap, les
visuels enregistrés au format vectoriel sont des ensembles de
courbes mathématiques, ce qui donne la possibilité d'augmenter
la taille de l'image sans dégradation de celle-ci. Pour
l'infographiste, Illustrator est complémentaire de Photoshop et de InDesign.

Adobe Photoshop
Logiciel de traitement et de retouche d'images et de photo
produit par la société Adobe. Photoshop est devenu le standard
en matière de gestion des images matricielles (ou images
"bitmap", constituées d'un "tapis de points"). Un logiciel tel
qu'Illustrator, lui, gère l'image numérique sous la forme de
vecteurs (on parle alors d'images vectorielles).

18
 Conclusion

En guise de conclusion, ce projet mea permet de mettre en

pratique mes connaissances acquises pendant notre

formation au sein de l’école, et également de développer
mes compé tences

Techniques en informatique, en réalisant un site web

dynamique qui présente les services d’une agence, en
utilisant différents langages de programmation et logiciels
pour le réussir, malgré tous les obstacles et les entraves
qu’on a vécues.

Durant la période de réalisation de ce projet, nous étions

attentifs pour assurer la qualité et la lisibilité du code source
afin de créer un site web performant tout en essayant de le
rendre le plus agréable possible.

Finalement, ce projet ce n’est qu’un début pour notre

carriè re, une nouvelle expérience pour nous et une
initiation pour ré aliser d’autres projets et sites web dans
différents domaines, afin de maîtriser les outils informatiques et
les langages de programmation nécessaires.

19