Rapport de Stage :

Création d’un site web pour

l’ORMVAG

Réalisé par : Encadré Par :

TAHIRI EL Mehdi Mme. ASBAHTAIRI Mouna

2020/2021
1
 Je tiens tout d’abord à remercier toutes les personnes ayant aidé dans le bon
déroulement de mon stage. Notamment monsieur le directeur de l’ORMVAG, Mr Aziz
Bellouti. J’adresse aussi mes remerciements les plus sincères au chef du Département de
Plannification et Finances (DPF) Mr Mohamed EL Hammoumi, ainsi je remercie également le
chef du Service Informatique (SI) Mr Abdelillah Mrini.

Mes vifs remerciements s’adressent aussi à mon encadrante Mme ASBAHTAIRI

Mouna qui, sans elle, mon travail n’aurait pas vu une fin. Son aide était indispensable durant
ma période de stage.

Je remercie également toute l’équipe du Service Informatique, en particulier Mr.

KHABLI Abdelwahed pour son chaleureux accueil, son aide très apprécié et sa disponibilité.

Enfin, que tous ceux qui m’ont aidé, de près ou de loin, trouvent ici l’expression de mes
sentiments les meilleurs.

2
 Table des matières

INTRODUCTION ...................................................................................................................... 6
Chapitre 1 : Présentation de l’établissement d’accueil ............................................................. 7
1. Présentation de l’ORMVAG .................................................................................................. 8
1.1. Situation géographique de l’ORMVAG :.................................................................... 8
1.2. Missions de l’ORMVAG : .......................................................................................... 9
1.3. Organigramme :........................................................................................................... 9
2.Entité de stage ......................................................................................................................... 9
2.1. Département de Planification et Finance : .................................................................. 9
2.2. Service Informatique : ............................................................................................... 10
Chapitre 2 : Analyse détaillée et étude du besoin .................................................................. 11
1.Analyse fonctionnelle : ......................................................................................................... 12
1.1. Identification des besoins fonctionnels : ................................................................... 12
1.2. Spécification des besoins non-fonctionnels : ............................................................ 12
2.Planification du projet : ......................................................................................................... 12
2.1. Estimations de la durée des tâches : .......................................................................... 12
2.2. Diagramme de Gantt : ............................................................................................... 13
Chapitre 3 : Conception et modélisation du projet ................................................................. 14
1. Architecture de l’application : ............................................................................................. 15
2. Technologies utilisées: ......................................................................................................... 15
2.1. Le choix du langage de programmation : .................................................................. 15
2.2. Choix des logiciels à utiliser ..................................................................................... 16
3. Conception du site : ............................................................................................................. 16
3.1. Conception de la base de données ............................................................................. 16
3.2. Prototypage des pages web : ..................................................................................... 16
3.2.1 L’en-tête : ........................................................................................................ 16
3.2.2 Le menu de navigation : .................................................................................. 17
3.2.3 Le pied de page : ............................................................................................. 17
3.2.4 Page d’accueil: ................................................................................................ 17
3.2.5 Autres pages: ................................................................................................... 18
Chapitre 4 : Réalisation du projet ........................................................................................... 19
1.Description du site : .............................................................................................................. 20

3
2.Developpement du site :........................................................................................................ 20
2.1. Implémentation de la base de données ...................................................................... 20
2.2. Le site web: ............................................................................................................... 21
2.2.1 Page d’accueil: ............................................................................................... 21
2.2.2 Zone d’action (Exemple d’une page): ............................................................ 22
2.2.3 Photothèque (Exemple d’une page): .............................................................. 22
Conclusion: .............................................................................................................................. 24
Webographie ............................................................................................................................ 25

4
 Table des Figures
Figure 1 Zone d'action de l'ORMVAG .................................................................................. 8
Figure 2 Découpage Administratif : ADA & CDA ............................................................... 8
Figure 3 Organigramme de l'ORMVAG ................................................................................ 9
Figure 4 Structure du DPF ................................................................................................... 10
Figure 5 Structure du SI ....................................................................................................... 10
Figure 6 Maquette en-tête .................................................................................................... 16
Figure 7 Maquette menu de navigation................................................................................ 17
Figure 8 Maquette bas de page ............................................................................................ 17
Figure 9 Maquette page d'accueil ........................................................................................ 17
Figure 10 Maquette page statique .......................................................................................... 18
Figure 11 Schèma base de données ....................................................................................... 21
Figure 12 Capture accueil ...................................................................................................... 22
Figure 13 Capture zone d'action ............................................................................................ 22
Figure 14 Capture photothèque ............................................................................................. 23

5
 INTRODUCTION

Au terme de ma première année du cycle d’ingénieur à l’Ecole National Supérieur

d’Informatique et d’Analyse des Systèmes (ENSIAS) à Rabat, je suis amené à effectuer un
stage d’initiation professionnel dans le but de se familiariser avec le monde professionnel et de
compléter la formation proposée par l’école.
Ce stage a pour vocation de mettre en œuvre les connaissances et les compétences
développées au cours de la formation académique. Il s'effectue en entreprise ou dans un
établissement public sous la supervision d'un responsable scientifique ou technique relevant de
l'organisme d'accueil.
C’est dans ce cadre que j’ai passé mon stage au sein du Service Informatique (SI) de
l’Office Régionale de Mise en Valeur Agricole du Gharb (ORMVAG) à Kénitra, stage qui m’a
permis d’enrichir mes connaissances, de découvrir le monde professionnel ainsi que
comprendre le fonctionnement et la gestion de cet établissement.
Le sujet qui m’a été attribué a pour titre « le developpement d’un site web pour le compte
de L’ORMVAG en utilisant WordPress »
Le présent rapport abordera donc les différentes étapes pour accomplir la conception et le
développement du site et sera divisé en quatres chapitres :
Le premier chapitre sera une présentation de l’ORMVAG . En parlant de sa situation
géographique,sa zone d’action et de son organigramme.
Le second chapitre sera dédié à l’étude préalable, dans laquelle nous allons identifer les
besoins fonctionnels et non fonctionnels du site ainsi que la planification des taches du projet
pour enfin arriver à définir le cadre logique de notre projet.
Le troisième chapitre traitera la conception et la modélisation, dans lequel nous mettons en
exergue l’aspect conceptuel de l’application, cette phase est primordiale dans le cycle de vie
d’un logiciel puisqu’elle assure le développement d’une carte dont nous avons besoin et que
nous allons suivre pendant le développement.
Le quatrième chapitre contiendra l’étape de la réalisation dans lequel nous allons traiter la
transformation des besoins et fonctionnalités modélisées et schématisées dans ce qui précède
en un produit qui répond aux attentes des utilisateurs et cela va être réalisé sur deux niveaux:
premièrement la création et la structuration des bases de données et deuxièmmement le
développement des fonctionnalités principales du site.
Enfin une conclusion qui synthétise le travail et présente les contraintes, les problèmes
affrontés durant la réalisation et la mise en place du module réalisé en plus des perspectives
envisagés.

6
Chapitre 1 : Présentation de l’établissement d’accueil

Chapitre 1 :
Présentation de
l’établissement
d’accueil

7
1.Présentation de l’ORMVAG
Créé par le Décret Royal n°830-66 du 7 Rajeb 1386 (22 Octobre 1966), l’Office
Régional de Mise en Valeur Agricole du Gharb (ORMVAG) est un établissement public doté
de la personnalité civile et de l’autonomie financière et placé sous la tutelle du Ministère de
l’Agriculture, de la Pêche Maritime, du Développement Rural et des Eaux et Forêts. Il est dirigé
par un Directeur nommé par décret, et administré par un Conseil d’Administration présidé par
le Ministre chargé de l’Agriculture.
1.1. Situation géographique de l’ORMVAG :
La zone d’action de l’ORMVAG chevauche sur les provinces :
 Province de Kenitra.
 Province de Sidi Slimane.
 Province de Sidi Kacem.

Figure 1 Zone d'action de l'ORMVAG

Figure 2 Découpage Administratif : ADA & CDA

8
1.2. Missions de l’ORMVAG :
 Etude et réalisation des aménagements hydro-agricoles et fonciers.
 Gestion des Ressources en eau à usage agricole à l’intérieur de sa zone d’action .
 Gestion des équipements hydro-agricole et service de l’eau rendu aux
agriculteurs.
 Développement agricole (promotion et intensification mise en valeur agricole,
encadrement et incitations).

1.3. Organigramme :
L’Office Régional de Mise en Valeur Agricole du Gharb (ORMVAG) est organisé
comme suit :
Au siège de l’Office, outre le Secrétariat, et le Bureau d’Ordre :Le Service de l’Audit
Interne et du Contrôle de Gestion :
 Le Service des Moyens Généraux,
 Le Bureau Juridique et Contentieux,
 Le Département des Ressources Humaines,
 Le Département de la Planification et des Finances,
 Le Département des Aménagements,
 Le Département de la Gestion des Réseaux d’Irrigation et de Drainage,
 Le Département du Développement Agricole.
A l’échelon local :

 Les 2 Arrondissements d’Aménagement du Beht et de la Seconde Tranche

d’Irrigation,
 Les 4 Arrondissements de Gestion des Réseaux d’Irrigation et de Drainage et
les 13 Centres de Gestion des Réseaux,
 Les 5 Arrondissements de Développement Agricole et les 19 Centres de
Développement Agricole.

Figure 3 Organigramme de l'ORMVAG

2. Entité de stage
2.1. Département de Planification et Finance :
Le DPF est chargé de l’amélioration de l’information comptable et financière. A ce
titre il est chargé de :

9
  Planifier les actions qui découlent des missions globales assignées à l’Office dans
le cadre du plan de développement et en assurer leurs budgétisations ;
 Suivre et évaluer les actions développées par les différents départements ;
 Appliquer la politique financière et comptable et assurer la gestion financière de
l’Office ;
 Coordonner et assurer les travaux d’arrêtés comptable et de consolidation des états
financiers ;
 Concevoir et assurer le fonctionnement du système d’informations comptables et
financières ;
 Assurer l’harmonisation et la mise en oeuvre du système informatique.
Le DPF comprend autre que la Secrétariat, trois services comme explique
l’organigramme suivant :

Figure 4 Structure du DPF

2.2. Service Informatique :

Les attributions confiées au Service Informatique sont :
 Suivi et coordination des processus informatiques de l’Office ;
 Assistance des différentes fonctions dans le choix des logiciels ou
développement des applications spécifiques ;
 Coordination des traitements informatiques ;
 Maintenance des traitements informatiques ;
 Maintenance des logiciels et outils de traitement en liaison avec les sociétés de
service et des constructeurs ;
 Administration des systèmes informatiques ;
 Formation et assistance des utilisateurs.
 Le schéma suivant explique l’organisation du Service Informatique :

Figure 5 Structure du SI

10
Chapitre 2 : Analyse détaillée et étude du besoin

Chapitre 2 :
Analyse détaillée
et étude du
besoin

11
1.Analyse fonctionnelle :
1.1. Identification des besoins fonctionnels :
Les besoins fonctionnels sont les services offerts par notre site. Ils capturent les activités
qui doivent être formulées par le site pour les différents types d'utilisateurs. L’application
permet par exemple à l’utilisateur de :
 S’informer :
 sur l’ORMVAG
 sur les tâches offertes par l’ORMVAG
 sur les zones d’action de l’ORMVAG
 sur le guichet unique
 Rester à l’actualité en ce qui concerne l’agriculture
 Se renseigner :
 sur les marchés
 sur les recrutements disponibles
 sur les promotions internes/externes disponibles
 Télecharger les documents nécessaires

1.2. Spécification des besoins non-fonctionnels :

Dans cette partie, nous traitons la phase des exigences non-fonctionnelles, cette phase qui
est très importante et qui complète les besoins fonctionnels. En effet, les spécifications non
fonctionnelles offrent souvent beaucoup de contraintes qui peuvent influencer les choix futurs.
L'incorporation des exigences non fonctionnelles telles que les contraintes liées au temps, la
sécurité et l'efficacité de l'opération sont extrêmement délicates. Nous serons maintenant
intéressés à identifier les besoins non fonctionnels de notre site :
 Utilisabilité : le site doit être simple, facile à comprendre par les utilisateurs finaux
 Conception : l'interface utilisateur doit être d'une belle apparence, facile à utiliser.
 Performance : la vitesse de fonctionnement du site doit être à un niveau supérieur pour
garantir une bonne qualité de service et réduire le délai de consultation.
 Disponibilité : la solution doit être disponible à tout moment 24h/24 et 7j/7.
 Efficacité : le site doit avoir des résultats concis.
 Maintenabilité : Les différents modules du site doivent être lisibles et compréhensibles
afin de les maintenir et de mettre à jour rapidement et facilement.
 Réutilisation : ce site doit permettre l'ajout et l'édition des extensions futures.

2.Planification du projet :
2.1. Estimations de la durée des tâches :
Avant tout travail, une estimation de durée est crutiale afin de délivrer le produit final
dans les délais promis. Pour cela j’éstime une durée pour chaque tâche primordiale :

12
 TACHE DUREE
PRISE DE CONTACT AVEC L'ETABLISSEMENT D'ACCUEIL 1
FORMATION SUR LE METIER DE L'ORMVAG 4
REDACTION DU RAPPORT 20
ANALYSE DE L'EXISTANT 2
CONCEPTION 5
REALISATION 5
TESTS ELEMENTAIRES 2

2.2. Diagramme de Gantt :

L’ordonnancement des taches avec l’outil Gant permet de représenter graphiquement
l’avancement du projet donc c’est un bon moyen de communication entre les différents acteurs
et taches.
Le diagramme suivant est le diagramme de Gantt

13
Chapitre 3 : Conception et modélisation du projet

Chapitre 3 :
Conception et
modélisation du
projet

14
1.Architecture de l’application :
J’ai opté pour l’architecture monolithique comme architecture de cette application
pour sa fiablitié et sa modérnité vu qu’elle est la plus utilisée dans le monde entier en cette
époque. L’architécture monolithique peut se modéliser comme suit (en contraste avec
l’architecture basée sur les microservices) :

2.Technologies utilisées:
2.1. Le choix du langage de programmation :
PHP est un langage de programmation généralement utilisé dans
le développement web, c’est un langage backend qui m’a servi
pour résoudre des problèmes.

HTML (Hyper Text Markup Language) est un langage qui

permet la structuration de la page web et construit des blocs.

CSS (Cascading StyleSheet) est un langage permettant la mise en

forme de la page web, c’est-à-dire tout ce qui est design et ésthetique.

SQL (Structured Query Language) est un langage qui permet la

rédaction des requetes SQL permettant la communication avec la
base de données.

15
2.2. Choix des logiciels à utiliser
WampServer est un logiciel regroupant d’autres technologies utiles
dans le développement web, tel que le serveur web Apache, le SGBD
MySql, phpMyAdmin ..

WordPress est un CMS (Content Management System, ou en francais

système de gestion de contenu) ; C’est le cms le plus utilisé dans le
monde ainsi je lui ai choisi pour mon projet pour sa fiabilité et sécurité.

Chrome est un logiciel conçu par Google et basé sur Chromium,

c’est un navigateur web permettant de visualiser les pages web, ainsi
j’ai bénéficié de ses outils de développement

3.Conception du site :
3.1. Conception de la base de données
Vu l’utilisation d’un CMS (WordPress), la conception d’une base de données en UML
n’était pas crutiale. WordPress génère automatiquement une base données où tout le contenu
du site web est stocké ; Notamment les plugins utilisés, le contenu des pages, les articles
partagés …

3.2. Prototypage des pages web :

Suite à notre analyse fonctionnelle des besoins constaté et en respectant les contraintes
posé par le maitrise d’ouvrage j’ai construit des maquettes .
Cette technique qui m’a aidé à concevoir un site qui répond aux attentes et besoins des
utilisateurs finaux. Il s'agit des premières idées brutes dessinées et qui représentent
l’agencement et les zones de contenus.

3.2.1 L’en-tête :
L’entête de page ou en anglais « header » est une partie située en haut de toute
page du site web; Elle est constituée de deux parties :
 La première est le Logo de l’ORMVAG
 La deuxième comprend le menu de navigation qui mène vers le
differentes pages du site :

Figure 6 Maquette en-tête

16
3.2.2 Le menu de navigation :

Figure 7 Maquette menu de navigation

3.2.3 Le pied de page :

Le pied de page ou en anglais « footer » est une partie qui se situe en bas de
toute page, elle contient les informations pour contacter l’établissement ainsi que les
droits d’auteur.

Figure 8Maquette bas de page

3.2.4 Page d’accueil:

La page d’accueil est le premier contact de l’utilisateur avec le site web, elle
contient :
 Une gallerie
 Une partie météo
 Les actualités
 L’agenda
 Les événements
 Autres onglets peuvent s’ajouter …

Figure 9 Maquette page d'accueil

17
3.2.5 Autres pages:
Toute autre page se constitue de 3 blocs :
 L’en-tête
 Le contenu de la page (qui diffère entre une page et autre)
 Le pied de la page

Figure 10 Maquette page statique

18
Chapitre 4 : Réalisation du projet

Chapitre 4 :
Réalisation du
projet

19
1.Description du site :
Ce projet de création du site web de l’ORMVAG vient sous le besoin de créer une interface
intermédiaire entre l’utilisateur et l’établissement, en communiquant différents types
d’information tel qu’une introduction sur l’établissement ou les offres de recrutements et
promotions internes/externes.
L’utilisateur du site web peut être un internaute curieux comme il peut être un agriculteur
s’informant sur les avantages des services proposés par l’ORMVAG.

2.Developpement du site :
2.1. Implémentation de la base de données
Une base donnée a été génerée par le CMS WordPress automatiquement, ses
principales tables sont :

 wp_commentmeta : cette table stocke les métadonnées des commentaires (les

métadonnéees sont des donnés qui accompagnent les commentaires, auteur,
email de l’auteur, heure de publication, et article sur lequel il a été rédigé).
 wp_comments : cette table stocke les commentaires.
 wp_links : cette table stocke des listes de liens vers des blogs, mais elle n’est
plus utilisée.
 wp_options : cette table, l’une des plus importantes, contient toutes les options
du site, celles contenues dans le menu Réglages de votre administration
WordPress.
 wp_postmeta: cette table stocke les métadonnées des articles, pages et types de
contenus personnalisés
 wp_posts : cette table contient toutes vos publications (articles, pages, custom
post types).
 wp_termmeta : cette table permet d’enregistrer des données supplémentaires
pour chaque terme de taxonomie.
 wp_terms : cette table contient toutes les taxonomies de votre site (catégories,
étiquettes, taxonomies personnalisées etc.).
 wp_term_relationships : cette table contient les relations entre les types de
contenus et les taxonomies (c’est-à-dire quelles taxonomies s’appliquent à
quelles publications).
 wp_term_taxonomy : cette table stocke la taxonomie de chaque terme, ce qui
est important parce qu’un terme peut-être présent dans plusieurs taxonomies (ex
: dans une catégorie et un custom post type).
 wp_usermeta : cette table stocke toutes les métadonnées relatives aux
utilisateurs.
 wp_users : cette table comporte tous les utilisateurs du site, quel que soit leur
rôle (administrateur, abonné, éditeur etc.).

La structure de la base données (relation entre les tables) est présentée par le
shcéma suivant :

20
 Figure 11 Schèma base de données

2.2. Le site web:

2.2.1 Page d’accueil:
La page d’accueil contient le menu de navigation ainsi qu’une gallerie d’images, la
météo, les actualités, les évenements, une agenda …

21
 Figure 12 Capture accueil

2.2.2 Zone d’action (Exemple d’une page):

La page « Zone d’action » est une page qui montre l’étendu d’action de
l’ORMVAG

Figure 13 Capture zone d'action

2.2.3 Photothèque (Exemple d’une page):

La page « Photothèque » est une page qui contient une panoplie de galleries
documentant les differentes tâches accomplises par l’ORMVAG.

22
Figure 14 Capture photothèque

23
 Conclusion:
Pendant le déroulement de mon stage, j’ai pu me renseigner sur beaucoup de domaines
différents autre que l’informatique tel que l’agriculture. En plus, ce stage m’a permis de me
placer dans un contexte professionnel et m’adapter au travail dans une entreprise ou un
établissement. C’était une opportunité pour moi afin d’élargir mes connaissances et de
développer mes relations avec l’autre.
Enfin, ce stage avait un grand apport positif dans ma carrière professionnelle et va
m’aider pour me lancer dans le monde du travail.

24
 Webographie

[1] https://ormvag.ma
[2] https://www.ganttproject.biz
[3] https://whatis.techtarget.com/definition/monolithic-architecture
[4] https://www.php.net/docs.php
[5] https://developer.mozilla.org/en-US/docs/Web/CSS
[6] https://wordpress.com
[7] https://www.phpmyadmin.net
[8] https://balsamiq.com/wireframes/

25