Ecole Supérieure de Technologie d’Agadir

Parcours : Génie Informatique

RAPPORT DE STAGE
Sujet :

Création d’un site WEB avec le système de gestion de

contenu (CMS) WordPress

Réalisé par :

Saida OUYOUS

Hasna ROUISSI
Société :

GISMA IT SOLUTIONS MAROC

Encadré par :

Mr Mohamed ELHAMRI
Période de stage :

15 juin 2022 - 15 juillet 2022

Année universitaire 2022-2023

 Ecole Supérieure de Technologie d’Agadir

Parcours : Génie Informatique

RAPPORT DE STAGE
Sujet :

Création d’un site WEB avec le système de gestion de

contenu (CMS) WordPress

Réalisé par :

Saida OUYOUS

Hasna ROUISSI
Société :

GISMA IT SOLUTIONS MAROC

Encadré par :

Mr Mohamed ELHAMRI
Période de stage :

15 juin 2022 - 15 juillet 2022

Année universitaire 2022-2023

 Dédicace
Je dédie ce modeste travail :

A ma chère mère qui a été à mes côtés et m’a soutenue

durant toute ma vie.

A mes chères sœurs et à mes chers frères.

A mon amie et mon binôme de stage Hasna

A mes chères amies.

A toute ma famille.

A tous mes enseignants enseignons, je leur exprime ma

profonde gratitude.

A tous les étudiants de la promotion Génie Informatique.

SAIDA
 Remerciement
Nous rendons grâce à Dieu de nous avoir donné la force, la
patience, le courage et la volonté pour élaborer ce travail.

Nos remercîments s’adressent à notre encadrant monsieur

MOHAMED ELHAMRI qui nous guidé, orienté et consacré
des efforts tout au long de la réalisation de ce travail.

Nous tenons à exprimer nos profonds remerciements à tous

les cadres de l’école supérieure de technologie d’AGADIR.

Nos gratuites et nos chaleureux remerciements s’adressent

également à nos parents.

En fin, nous remercions tous ceux qui nous aidé de loin ou

de près pour l’élaboration de ce travail.
 Liste d’abréviations :

WEB : World wide web

HTML: HyperText Markup Language

CSS : Cascading style Sheets

JS : JavaScript

SGBD : Système de gestion de base de données

CMS : Content Management System

 Liste des figures :

Figure 1 : Organigramme de l’entreprise. ......................................................................................................... 2

Figure 2 : téléchargement de LOCAL WordPress. .............................................................................................. 8
Figure 3 : Interface de LOCAL WordPress.......................................................................................................... 8
Figure 4 : Nom de votre site. ............................................................................................................................ 9
Figure 5 : l’environnement de LOCAL WordPress. ............................................................................................ 9
Figure 6 : Set up de LOCAL WordPress. ........................................................................................................... 10
Figure 7: Installation de site. .......................................................................................................................... 10
Figure 8 :Les identifiants de votre site ( e-mail et mot passe ). ....................................................................... 11
Figure 9 : la bibliothèque de modèles d'Elementor. ....................................................................................... 13
Figure 10 : environnement de travail de Elementor. ...................................................................................... 13
Figure 11 : L’accueil de site. ............................................................................................................................ 15
Figure 13 : les services de l’entreprise. ........................................................................................................... 17
Figure 14 : Activités informatique de l’entreprise ........................................................................................... 17
Figure 15 : suite des services. ......................................................................................................................... 18
Figure 16 : suite des services. ......................................................................................................................... 18
Figure 17 : Contact de l’entreprise. ................................................................................................................. 19
 Sommaire
Dédicace .........................................................................................................................................
Remerciement ...................................................................................................................................
Liste d’abbréviation:....................................................................................................................
Liste des figures : .........................................................................................................................
INTRODUCTION ..................................................................................................................... 1
Chapitre 1 : présentation de l’entreprise .................................................................................. 2
1. Carte d’identité de l’organisme : ........................................................................................ 2
2. Organigramme : ................................................................................................................. 2
3. Ses objectifs :..................................................................................................................... 3

Chapitre 2 : Spécifications ........................................................................................................ 4

1. Analyse des besoins : ......................................................................................................... 4
2. Cahier des charges : ........................................................................................................... 4

Chapitre 3 : Outils de travail ..................................................................................................... 5

1. Site web : .......................................................................................................................... 5
2. Content management system (CMS) : ................................................................................. 5
3. WordPress : ....................................................................................................................... 6
4. Choix du CMS :................................................................................................................... 6
5. Installation et paramétrage de WordPress : ........................................................................ 7
6. Plugin Elementor ............................................................................................................. 12

Chapitre 4 : Réalisations ......................................................................................................... 15

1. Présentation de l’architecture du site web........................................................................ 15
a. Home : ............................................................................................................................ 15
b. Avantages : ...................................................................................................................... 16
c. Services : ......................................................................................................................... 17
d. Contact : .......................................................................................................................... 19
2. Bilan ................................................................................................................................ 20

CONCLUSION ........................................................................................................................ 20
BIBLIOGRAPHIE .................................................................................................................. 22
 INTRODUCTION

Dans le cadre de notre formation en génie informatique à l’école supérieure de

technologie d’Agadir, chaque étudiant se doit d’accomplir un stage en première année d’une
durée d’un mois dans le but de compléter les acquis dispensés par la formation.

Nous avons entrepris notre recherche dans le but de trouver un stage dans le domaine
de la création des sites WEB, car nous souhaitions avoir une expérience dans ce domaine
qui nous intéresse tout particulièrement. C’est pourquoi nous avons accepté ce stage au sein
de GISMA IT SOLUTIONS MAROC dont l’objectif était « Création d’un Site WEB avec
le système de gestion de contenu (CMS) WordPress ».

Dans ce contexte, les travaux de notre projet effectué se sont concentrés autour du
développement d’un site internet à l’aide du CMS Wordpress, durant cette période, nous
nous sommes familiarisées avec un environnement technique CMS, ceci nous a permis par
la suite de mettre en place le site WEB.

Nous vous exposons dans ce rapport en premier lieu une présentation de l’entreprise.
Ensuite nous vous expliquons les différents aspects de notre travail durant ces quelques
semaines de stage et enfin, en conclusion, nous résumons les apports de ce stage.

1
 Chapitre 1 : présentation de l’entreprise

1. Carte d’identité de l’organisme :

Entreprise spécialisée en programmation, conseil et informatique, son siège social

est situé à l’adresse « N°1, FM11 Cité Dakhla -Agadir ».

Forma juridique : une société à responsabilité limitée à associé unique.

Statut de l’organisme : Privé.

Capital : 100 000 Dhs.

2. Organigramme :

Pour bien organiser les équipes de travail, pour comprendre la hiérarchie et les
responsabilités de chacun dans l’entreprise, voici l’organigramme qui reflète la structure
organisationnelle interne de l’entreprise et donne un aperçu sur le communication interne.

Figure 1 : Organigramme de l’entreprise.

2
3. Ses objectifs :

L'entreprise offre plusieurs services pour produire un travail de qualité et pour

satisfaire les besoins des clients. Parmi ces différents services on trouve :

• Programmation, conseil et autres activités informatiques.

• Développement et mise en place de solution de gestion pour l'entreprise, formation

en informatique, et vente de matériel.

• Développement de systèmes de bases de données, applications et systèmes logiciels.

• Création de sites web, d'identité visuelle, en communication visuelle et web

marketing.

• Câblage, réseaux informatiques, sécurité des systèmes d'information, serveurs, et

solutions de sauvegarde.

• Développement et intégration de solutions Internet, Intranet, et Extranet.

• La représentation de sociétés étrangères au Maroc.

• La prise location et l'exploitation de tous fonds de commerce, et la création de tous

pointes de ventes et toutes agences ou succursales.

3
 Chapitre 2 : Spécifications

1. Analyse des besoins :

Dans un premier temps, Nous avons recueilli l’avis de responsable de l’entreprise à

propos de l’architecture de son site web, Afin de mieux connaître ses besoins et ses attentes.

L’interview a été effectué autour des questions concernant les critères indispensables pour
le site internet (contenu, design…) .

Les réponses récoltées au cours de cet interview nous ont permis de connaitre les
spécifications à prendre en compte pour la réalisation du site web du GISMA IT
SOLUTIONS MAROC.

2. Cahier des charges :

En résumé de l’interview avec le responsable de l’entreprise, plusieurs objectifs

principaux ont été fixés pour la création de site web :

Pour faciliter le travail de mise à jour, le développement de site web doit être réalisé à l’aide
de l’outil de gestion de contenu (CMS) WordPress ».

Quelques critères pour la création du site Web :

• La mise en place de menu.

• L’ajout du logo du l’entreprise à coté de menu.

• La couleur du site doit être une couleur semblable à celle utilisée dans le logo
(rouge).

• L’ajout d’images pour illustrer l’activité de l’entreprise.

• L’ajout d’un formulaire de contact.

4
 Chapitre 3 : Outils de travail

1. Site web :

L’entreprise GISMA IT SOLUTIONS MAROC ne dispose pas encore de site web.

Un manque de présence online qui peut créer un manque d’opportunité pour cette entreprise.
Or, un site internet est en quelque sorte une vitrine susceptible de multiplier les moyens de
communiquer avec ses clients, présenter son activité, fournir des informations ou vendre ses
produits et ses services.

2. Content management system (CMS) :

Les systèmes de gestion de contenu, (CMS), Sont une famille de logiciels de

conception et de mise à jour dynamique des site Web.

CMS permet de créer, de gérer et de modifier facilement un site web sans avoir des
connaissances en développement, grâce à une interface et une administration facile à
comprendre.

Les CMS sont maintenant nombreux : gratuits, payants ou open source.

Les CMS les plus populaires, actuellement, sont : WordPress , Joomla , Drupal.

5
 3. WordPress :

WordPress est un système de gestion de contenu (SGC ou content management

system (CMS) en anglais) gratuit, libre et open-source. Ce logiciel écrit en PHP repose sur
une base de données MySQL et distribué par la fondation WordPress.org. Les
fonctionnalités de WordPress lui permettent de créer et gérer différents types de sites Web
( site vitrine, site de vente en ligne, site applicatif, blog, portfolio, site institutionnel, site
d'enseignement…)

4. Choix du CMS :

Vu que notre stage ne dure qu’un mois, Nous avons estimé que nous n’avons pas
beaucoup de temps pour créer le site web en utilisant le code HTML, CSS, JS. Donc nous
avons choisi le WordPress, car sans le moindre doute possible il est le meilleur et le plus
réputé des CMS disponibles sur le marché.

Nous avons décidé de découvrir ce CMS afin de voir est ce que son mode de
fonctionnement correspond à nos attentes ainsi qu’à celles de l’entreprise exprimées dans le
cahier des charges.

6
 Ce CMS permet de :

• La mise en page du site web avec la possibilité de le modifier en utilisant uniquement

les langages : HTML, CSS.

• La création automatique des menus.

• Plugins (gratuits ou payants) qui vous permettent de rajouter toutes les

fonctionnalités que vous désirez pour votre site.

5. Installation et paramétrage de WordPress :

L’installation de WordPress se fait sur un serveur ou en local.

L'installation manuelle sur un serveur est plus simple, car elle ne nécessite pas de
créer un environnement au préalable. En revanche, l'installation en local est plus sécurisante,
puisqu'elle permet de travailler hors ligne.

Installer WordPress en local permet aussi de créer une copie d'un site sur un
ordinateur, et d'effectuer des tests ou des modifications hors ligne, Il existe par ailleurs de
nombreux outils pour vous aider à développer votre site WordPress local rapidement et
facilement.

7
Pour télécharger <<LOCAL>>, nous sommes allés sur Localwp.com.

Figure 2 : téléchargement de LOCAL WordPress.

• Après une installation qui se fait très rapidement vous avons trouvé l’interface
suivante :

Figure 3 : Interface de LOCAL WordPress.

8
• Ensuite nous avons ajoutés un nom du site.

Figure 4 : Nom de votre site.

• Pour choisir notre propre environnement, nous avons cliqués sur Custom.

Figure 5 : l’environnement de LOCAL WordPress.

9
• Dernière étape, nous avons indiqués un nom d’utilisateur, un mot de passe et un
e-mail.

Figure 6 : Set up de LOCAL WordPress.

• Le site est ensuite installé.

Figure 7: Installation de site.

10
• Accès au site se fait par les identifiants (adresse e-mail et mot de passe).

Figure 8 :Les identifiants de votre site ( e-mail et mot passe ).

11
 6. Plugin Elementor :

Pour créer et modifier facilement l’apparence des pages, il suffit d’installer

Elementor.

Elementor est un constructeur de page pour WordPress qui se présente sous la forme
d'un plugin (un Plugin est un outil qui permet d’ajouter des fonctions supplémentaires à
WordPress).

Elementor permet de créer des mises en pages et des designs attractifs, ainsi que des
pages assez complexes telles que : les formulaires, les graphiques animés et l’intégration de
vidéos.

Après l’installation vous entrerez dans la bibliothèque de modèles d'Elementor . Il

existe de nombreux modèles disponibles que vous pouvez utiliser et vous pouvez également
les filtrer par mot-clé pour trouver celui qui convient le mieux à votre idée et à votre page.

De plus, la bibliothèque propose également des modèles dans deux formats : pages
et blocs.

Les pages sont des conceptions pleine page importables que vous pouvez modifier
en fonction de vos besoins.

En revanche, les blocs sont des conceptions conçues pour des sections spécifiques.
Par exemple, vous pouvez importer une section "à propos de moi" prédéfinie dans votre
mise en page existante à l'aide de blocs.

12
 Figure 9 : la bibliothèque de modèles d'Elementor.

Lorsque l’on importe un modèle, Cela permet d'apporter différents changements et

ajustements au positionnement, marges, rembourrages, couleurs, espacement, et encore plus
pour chacun des éléments.

Figure 10 : environnement de travail de Elementor.

13
 Les plugins ajoutés au CMS :

Starter Templates :
Est un plugin qui permet d’importer des modèles pour créer votre site web, Vous
pouvez également allez changer le texte et les images de votre site Web pour lui donner une
touche personnelle.

MyStickymenu :
Est un plugin qui permet de fixer sur l'écran n'importe quel élément de votre site web.

WPForms Lite :

Est un plugin qui permet de créer différents types de formulaires (contact, paiement ,..) sans
coder.

14
 Chapitre 4 : Réalisations

1. Présentation de l’architecture du site web :

a. Home :

Le lien vers la page d’accueil du site.

Figure 11 : L’accueil de site.

15
 b. Avantages :

Ce lien présente tous les avantages de l’entreprise.

Figure 12 : les avantages de l’entreprise.

16
 c. Services :

Présentation de l’ensemble des services :

Figure 12 : les services de l’entreprise.

Le bouton voir plus vous permet d’accéder à l’interface suivant :

Figure 13 : Activités informatique de l’entreprise

17
Figure 14 : suite des services.

Figure 15 : suite des services.

18
 d. Contact :

Ce lien présente trois parties : l’adresse de l’entreprise, le formulaire de contact, et

la location de l’entreprise.

Le formulaire de contact a un avantage pour le visiteur qui peut demander des

informations en un clic, sans ouvrir sa boîte mail

Figure 16 : Contact de l’entreprise.

19
2. Bilan

Ce stage au GISMA IT SOLUTIONS MAROC, nous a permis de mieux appréhender

la vie en entreprise et le développement des sites WEB. Outre le travail effectué, le fait
d’être entouré de personnes de compétences diverses nous a apporté beaucoup de
connaissances sur le monde du travail.

A partir de l’objectif principal de notre mission, nous avons pu proposer des

solutions et résoudre les problèmes rencontrés, acquérir progressivement une autonomie de
travail, et mettre en application les connaissances théoriques accumulées pendant nos
études.

Le sujet était très enrichissant car il comportait une partie technique, mais également
un volet relationnel permanent avec l’entreprise, et nous avons pu respecter l’ensemble des
préconisations du cahier des charges et réaliser d’autres tâches en addition à toutes celles
qui ont surgie au cours du développement du site web.

CONCLUSION
Dans le cadre de notre stage d’initiation à la société GISMA IT SOLUTIONS
MAROC, nous avons réalisé un projet intitulé « La conception et la réalisation d’un site
WEB dynamique pour la société GISMA IT SOLUTIONS MAROC ».

Un mois de stage a suffi pour que nous appliquons toutes les informations que nous
avons apprises durant notre première année de génie informatique à l’Ecole Supérieure de
Technologie d’Agadir. Malgré les difficultés que nous avons rencontrées, nous avons
essayé autant que possible de rechercher et de découvrir plus de méthodes et d’informations,
pour effectuer un travail de qualité, et plus facile à utiliser.

Nous avons eu la chance d’aborder un projet du début jusqu’à la fin, c'est-à-dire de

sa phase de spécifications jusqu’à la mise en production. C’est extrêmement intéressant. De
cette manière nous pensons pouvoir dire qu’aujourd’hui nous cernons un peu mieux les
enjeux de chaque partie d’un projet informatique. Il nous reste donc encore pas mal de
choses à apprendre dans le déroulement d’un projet informatique.

20
 Nous tenons encore une fois à remercier le chef de l’entreprise pour son excellent
accueil, ainsi que toutes les personnes qui nous ont accompagnés dans notre travail.

Et nous finissions par remercier tous les enseignants du département génie

informatique de l’EST pour leur engagement auprès des élevées.

21
 BIBLIOGRAPHIE
https://wpformation.com/ : formation sur WordPress

https://blog.hubspot.fr/ : Installation de WordPress

https://wordpress.bbxdesign.com/ : Documentation WordPress

https://localwp.com/ : Installation de Local

https://fr.wikipedia.org/wiki/WordPress : Informations sur WordPress

22