Académique Documents
Professionnel Documents
Culture Documents
Département : Informatique.
Filière : Génie Informatique .
Stage d’initiation
OUARGUI Souhail
2|Page
LISTES DES FIGURES:
3|Page
Figure 30: page des destinations 2. ...........................................................................30
Figure 31: page des destinations 4. ...........................................................................31
Figure 32: video sur la page des destinations. ...........................................................31
Figure 33: Page de la ville d'essaouira. ......................................................................31
Figure 34: page de Tanger. ........................................................................................32
Figure 35: des paysages proposés à Tanger. ..............................................................32
Figure 36: Reservation d'hotel à Tanger. ...................................................................32
Figure 37: Page de Contact........................................................................................33
Figure 38: Page d'a propos. .......................................................................................33
4|Page
TABLE DES MATIERES
REMERCIEMENT .................................................. 2
INTRODUCTION .................................................... 6
PRÉSENTATION GÉNÉRALE DE LA SOCIÉTÉ .. 7
1. Présentation de l’entreprise ............. 7
1. Présentation d’ITnov .................................................................................................... 7
OBJECTIFS DU SITE WEB .................................. 10
CMS ....................................................................... 11
1. Qu’est-ce qu’un CMS ?............................ 11
2. Pourquoi un CMS? ................................. 11
3. Choix du CMS et explication de ce choix 12
CONCEPTION & REALISATION DU SITE ........ 13
1. Presentation de Site Web.................... 13
1. définition de site ........................................................................................................... 13
2. NAVIGATION....................................................................................................................... 13
3. Les fonctionnalités et leurs critères ................................................................. 14
2. Installation et configuration de WordPress 15
1. Installation de WordPress...................................................................................... 15
2. Le thème choisi « MOUNTAIN » : ................................................................................... 17
3. Qu'est-ce que le style de thème Elementor ? ...................................................... 17
4. Comment Elementor Theme Style est utilisé avec le modèle Mountain ?
19
5. Les extensions utilisées : .............................................................................................. 23
3. Réalisation du site web : ..................... 23
1. Page D’accueil : .............................................................................................................. 23
2. Menu de navigation du site Web : ........................................................................... 27
3. Contenu des autres pages ........................................................................................ 27
4. Partie contact et réseaux sociaux : .................................................................... 32
BILAN & CONCLUSION ...................................... 34
1. Bilan professionnel ............................. 34
2. Bilan personnel ..................................... 34
CONCLUSION ...................................................... 35
RÉFÉRENCES ....................................................... 36
5|Page
INTRODUCTION
6|Page
PRÉSENTATION GÉNÉRALE
DE LA SOCIÉTÉ
1. Présentation de l’entreprise
1. Présentation d’ITnov
1. Situation géographique
ITnov est une SSII qui se situe à MARRAKECH .L’entreprise se trouve plus
Précisément au Boulevard Appt 36, Immeuble Jakar Avenue Mohamed V - Marrakech-
Médina (AR).
2. Historique d’ITNOV
ITnov est une entreprise d’informatique (SSII) opérant dans les domaines suivants :
- Développement logiciel et Web – Edition de solutions pour l’éducation numérique -
Conseil en e-marketing - Fournisseur et intégrateur D’infrastructures matérielles (Cloud
et On Site). La société fait partie des principales startups marocaines opérant dans le
domaine IT. ITnov est une société à Responsabilité Limitée à Associé Unique dont le
directeur de l’entreprise : amine Talbi En 2014 ITnov se crée avec un capital de 100 000
DHS.
3. Activité de l’entreprise
7|Page
Conception et réalisation de produits multimédias, du contenu pédagogique et des
services à forte valeur ajoutée Dédiés à l’éducation numérique.
✓ CONSEIL EN E-MARKETING
L’entreprise opère sur la définition de la stratégie Internet, des performances
opérationnelles et web Analytiques.
✓ FOURNISSEUR ET INTÉGRATEUR D’INFRASTRUCTURE MATÉRIELS
(CLOUD ET ON SITE)
Mise en place d’environnements robustes, sécurisés et efficaces pour les systèmes
et données des entreprises en on site ou en Cloud (hébergé) dans un Datacenter TIER III
basé au Maroc.
4. Structure de l’entreprise
La société fait partie des principales startups innovantes marocaines. L’équipe de
l’entreprise est passionnée d’innovation dans le domaine IT.
Elle est constituée d’ingénieurs en informatique expérimentés, travaillant sur le
développement web et l’édition de solutions innovantes.
✓ L’Equipe Commerciale
Elle est constituée d’ingénieurs d’affaires ayant une excellente connaissance des
problématiques des entreprises. Ils sont vos interlocuteurs pour vous expliquer nos
offres et vous aider dans vos choix.
✓ L’Equipe Marketing
Elle est constituée de spécialistes dans le domaine e-Marketing. Ils travaillerons en
collaboration avec vous pour la mise en place de la stratégie Marketing la mieux
adaptée à votre business.
8|Page
✓ L’Equipe Graphique
Elle est en charge de la création des graphismes des solutions éditées par IT NOV
et également dans le cadre des projets clients.
✓ La direction
ITNOV est dirigé par M. Amine TALBI ancien consultant et membres de conseils
de direction de SSII marocaines.
9|Page
OBJECTIFS DU SITE WEB
Le responsable qui m’a chargé du site m’a exprimé ses besoins et ses
souhaits concernant le site lors d'un petit entretien dès mon arrivée. Ce
dernier était axé autour de trois questions :
Quelles informations doivent figurer sur le site ?
Quelles fonctionnalités désirez-vous voir apparaître sur le site ?
A quelles caractéristiques de style doit répondre le site ?
Le projet est un site web qui a pour objectif d’exposer toutes les places
touristiques du Maroc, les monuments historiques, les hôtels de la région,
toutes activités tels que les festivals et les activités sportifs etc.
Afin de bien travailler sur ceci on doit utiliser différents types de média
(texte, image, vidéo), en les manipulant pour avoir par la suite des pages web
bien structurées, et conçue d’une manière attirante.
10 | P a g e
CMS
2. Pourquoi un CMS?
Les CMS apporte tout d’abord une certaine facilité dans l’administration d’un site
web. Il permet aux personnes qui ne connaissent pas les langages PHP, HTML et autres
de créer, modifier et paramétrer facilement un site.
Un CMS a l’avantage de séparer forme et contenu. Toute la partie contenu et
fonctionnalités du site est stockée Dans une base de données et est créée
11 | P a g e
dynamiquement lors de l’exécution du site. Toute la partie mise en page est Gérée par
un Template. Le Template sert à gérer l’aspect graphique du site.
Il s’agit de feuilles de style et de fichiers html dans lequel des emplacements sont
prédéfinis. C’est dans ces emplacements que l’on va insérer notre contenu.
12 | P a g e
CONCEPTION &
REALISATION DU SITE
1. definition de site
Le site Web MoroccanDora c’est le meilleur guide qui peut vous accompagner
tout le long de votre séjour au MAROC. Soyez étranger ou même pas Marocain, ce site
est votre boussole qui vous permettra de mieux voyager dans ce charmant pays. Le nom
de ce site Web est inspiré de la série télévisée d’animation ‘‘DORA l’exploratrice’’ qui
est connue d’avoir l’esprit de lancer des requêtes d’exploration dans différents milieux.
Afin de bien respecter la réalisation du sujet du projet, la page d’accueil du site
doit contenir un header, un menu, des sections et un Footer et toutes les pages web
doivent être conçues avec le ‘‘Page Builder’’ afin de bien structurer et mieux animer le
site Web.
2. NAVIGATION
La navigation du site doit être très aisée. L’accent est toujours mis sur le design
du site web qui doit être simple et attractif.
Le site web va être composé des pages suivantes :
• Une page d’accueil dont le but est de présenter d’une manière générale ce
pays touristique ;
• Une page qui propose des expériences à passer pendant le séjour ;
• Une page qui expose les destinations touristiques au MAROC ;
• Des pages qui comporte les détails de chaque destination ;
• Une Page D’à propos, et une page de Contact ;
13 | P a g e
Niveau 0 Page D’acceuil
14 | P a g e
2. Installation et configuration de
WordPress
1. Installation de WordPress
L’installation de WordPress a tout d’abord été faite sur un serveur local.
Avant d’installer WordPress et de le paramétrer, il a fallu mettre en place un serveur
Web et créer une base de données.
Pour cela, Wampserver a été téléchargé et installé. Le serveur utilisé est
Wampserver et la base de Données est une base de données MySQL.
Il s’agit tout d’abord de créer une base de données qui va contenir le nom de
l’administrateur qui aura accès au site et pourra le modifier comme il le veut.
15 | P a g e
Ensuite, il s’agit d’installer WordPress. J’ai donc téléchargé WordPress sur le site
francophone.
Pour installer WordPress, il suffit de décompresser l’archive dans le dossier «
C:\wamp\www » et de le renommer avec le nom du site que l’on va utiliser, dans notre
cas « MoroccanDORA ».
Pour configurer WordPress, il suffit d’ouvrir le fichier « wpconfig.php» .
Contenu dans le dossier « C:\wamp\www\ MoroccanDORA ».
Il nous faut renseigner les éléments suivants :
✓ Le nom de la base de données que l’on a créé auparavant pour le site ;
✓ Le nom de l’utilisateur de la base de données MySQL ;
✓ Un mot de passe (pas obligatoire) ;
✓ Une adresse de l’hébergement (ici, localhost) ;
16 | P a g e
Pour accéder au site, il suffit juste de rentrer dans n’importe quel navigateur
l’adresse suivante (Ne pas oublier d’installer le serveur Web) : http://localhost/
MoroccanDORA .
L’installation est finie, le site est créé et il ne reste plus qu’à le développer.
Ce modèle est importé des modèles de démarrage conçus avec Elementor Theme
Style. Voyons ce que cela signifie et comment vous pouvez modifier ces paramètres.
17 | P a g e
Elementor Theme Style fournit des paramètres globaux qui vous permettent de
contrôler l'ensemble de la conception du site à partir d'un seul endroit. Ces paramètres
sont fournis avec la version gratuite du constructeur de pages Elementor.
Vous pouvez définir le style par défaut des titres, des boutons, des champs de
formulaire, des liens, du texte, des arrière-plans, etc.
18 | P a g e
4. Comment Elementor Theme Style est utilisé
avec le modèle Mountain ?
Pour toutes les pages Elementor du modèle Mountain, le style global est appliqué
à partir des paramètres de style du thème.
Une fois que vous avez terminé le processus d'importation, voici comment vous
pouvez éditer le site Mountain :
19 | P a g e
Le pied de page est conçu avec le plugin - Elementor - Header, Footer & Blocks
Template.
Dans le tableau de bord « Dashboard », vous trouverez les paramètres sous Apparence >
Header, Footer & Blocks :
20 | P a g e
Figure 11: Style du theme d'elementor.
21 | P a g e
Le style défini dans les options de style du thème sera appliqué à toutes les pages
Elementor du site Web.
Voici les options disponibles :
• Fond d'écran = « Background ».
• Typographie = « Typography ».
• Boutons = « Buttons ».
• Champs de formulaire = « Form Fields ».
• Images.
22 | P a g e
5. Les extensions utilisées :
Pour pouvoir télécharger et installer les extensions nécessaires à la conception
du site, il est important d’analyser les fonctionnalités que le site possèdera .
J’ai donc décidé d’utiliser le thème «Mountain » qui me convenait parfaitement
à l’aspect touristique , et afin de se lancer à la conception du site web j’aurais besoin de
constructeur des pages « Elementor ».
1. Elementor :
Un constructeur de site web qui offre des conceptions de page haut de gamme et
des fonctionnalités avancées, jamais vues auparavant sur WordPress.
1. Page D’accueil :
23 | P a g e
Cette page contient un menu qui permet à l’utilisateur de naviguer aisément sur le
site web et découvrir le MAROC d’une manière générale, la figue suivante est une
illustration de cette interface :
24 | P a g e
Figure 16: page d'accieul du site Web (suite 2) Figure 17: page d'accieul du site Web (suite 3)
Il arrive que des personnes se connecte à l’internet grâce à leur mobile, c’est
pourquoi, il a fallu que mon site web soit responsive qui s’adapte parfaitement au format
téléphone afin de Garantir aux utilisateurs une expérience de navigation optimisée.
25 | P a g e
Figure 19: Page des Expériences sur Desktop 2.
Celles-ci sont des photos de la même page mais sous format mobile :
Figure 21: Page des Expériences sur mobile 1. Figure 20: Page des Expériences sur mobile 2.
26 | P a g e
Figure 22: Pied des page du site Web.
27 | P a g e
Figure 24: Page des experiences 1.
28 | P a g e
Figure 26: Page des experiences 3.
Après avoir consulter les expériences a passer, l’utilisateur peut ensuite consulter
les destinations où il peut se soulager en cliquant sur la page TRAVEL
DESTINATIONS :
29 | P a g e
Figure 28: page des destinations 1.
Cette page dévoile les places touristiques les plus connues au MAROC tel :
MARRAKECH , ESSAOUIRA, OUARZAZATE, etc.
Figure 30: page des destinations 2. Figure 29: page des destinations 3.
30 | P a g e
Figure 31: page des destinations 4.
Et à la fin j’ai inséré une vidéo qui réunit et illustre toutes ces villes :
31 | P a g e
Figure 34: page de Tanger.
Il est important de mentionner qu’à la fin de chaque page de ville existe une
section contenant des propositions des hôtels ainsi que des boutons qui aide le visiteur à
se déplacer au site de réservation :
Apres que j’ai présenté la plupart du contenu mon projet elle reste la page d’à
propos qui sert à donner plus d’informations sur le site Web :
33 | P a g e
BILAN & CONCLUSION
1. Bilan professionnel
J’ai effectué mon stage de fin de DUT dans la société ITNOV. Ma mission était de
créer un site web touristique qui peut être considéré comme le meilleur guide pour tous
ceux qui veulent voyager au MAROC.
Malgré tout, ces problèmes ont tous été résolus et m’ont apporté de nouveaux savoirs.
2. Bilan personnel
Tout comme au niveau professionnel, ce stage m’a aidé à développer mes
connaissances personnelles et m’a fait découvrir de nouveaux outils. Ces cinq semaines
m’ont permis de réaliser un site web et de maîtriser le CMS WordPress. Il s’agit d’un
outil que je ne connaissais que de nom et que j’ai appris à utiliser lors de ce stage. Le fait
d’être livré à moi-même pour réaliser ce site web m’a poussé à faire des recherches de
façon autonome et de faire des recherches personnelles hors de mon stage pour ne pas
être bloqué devant un problème. Ce stage aura été pour moi très constructif.
34 | P a g e
CONCLUSION
35 | P a g e
RÉFÉRENCES
36 | P a g e