Département :Informatique

Filière : Informatique décisionnelle et sciences des

données

Rapport de stage
Création site web d’ecommercepour
l’ORMVA de Tadla (ORMVAT)

Présenté par : BOUTOUILE ABDELKRIM

Encadré par : BADA HANANE

Année universitaire : 2023/2024

 REMERCIEMENTS

Il nous est agréable de nous acquitter d’une dette de

reconnaissance auprès de toutes les personnes, dont l’intervention au
cours de ce projet, a favorisé son aboutissement.

Je tiens en premier lieu à remercier MM. BADA mon encadrante, qui

m’a suivi le long de ce projet, pour l’aide apportée au niveau des données et
des renseignements techniques, et pour le temps qu’elle m’a gracieusement
accordée. On la remercie également pour ses remarques et son soutien
quotidienne.

Je tiens à remercier à remercier tout particulièrement et à témoigner

toute mon reconnaissance aux Monsieur le Directeur de l'Office Régional
de Mise en valeur Agricole du Tadla, et Monsieur le chef du Service
Informatique pour m’avoir permis d’y effectuer le stage de fin de 1ère
année cycle d'ingénieur. Je remercie aussi tous les employés de la société
pour leur accueil chaleureux, et leurs précieux conseils.

En espérant que ce travail sera à la hauteur de vos attentes.

 RESUME

Le présent document constitue une synthèse du projet effectué au

sein du siège de l'Office Régional de Mise en Valeur Agricole de Tadla.

Notre projet consiste en l’étude, la conception ainsi que la réalisation

d’un site web, il doit permettre d‘être une source d'information concernant
l’établissement.

Site web implémentée en langage déclaratif HTML, CSS et le

langage de programmation java script qui est un environnement de
développementdes sites web où la performance est critique.

Ce site dispose d’un grand nombre de fonctionnalités et permet de

gérer un projet professionnel de la reformulation du cahier des charges
jusqu’à sa réalisation complète. Ce site permet de fournir des
informations fiablesà notre utilisateur.

Tout au long de la phase de développement, j'ai fait face à des

situations délicates. Ainsi ai-je multiplié mes efforts afin d’atteindre mon
objectif en respectant la contrainte temporelle. Ce qui m'a permis de
mettre à l’œuvre mes connaissances plus efficacement et d’une manière
plus concrète.
 ABSTRACT

Notre projet consiste en l'étude, la conception et la réalisation d'un site web ; il

doit être en mesure de fournir des informations sur l'établissement.

Ce site web offre de nombreuses fonctionnalités et permet de gérer un projet

professionnel depuis la reformulation des spécifications jusqu'à sa réalisation
complète. Ce site fournit des informations fiables à nos utilisateurs.

Tout au long de la phase de développement, nous avons été confrontés à des

situations difficiles. Ainsi, nous avons intensifié nos efforts pour atteindre notre
objectif tout en respectant les contraintes de temps. Cela nous a permis de travailler
de manière plus efficace et concrète.
 TABLES DES MATIERES
Présenté par : BOUTOUILE ABDELKRIM .................................................................................................................... 1
Encadré par : BADA HANANE ................................................................................................................................... 1
REMERCIEMENTS .............................................................................................................................................. 3
RESUME ............................................................................................................................................................ 4
ABSTRACT ......................................................................................................................................................... 5
TABLES DES MATIERES ...................................................................................................................................... 6
LISTE DES FIGURES ............................................................................................................................................ 8
INTRODUCTION ................................................................................................................................................ 9
CHAPITRE I : PRESENTATION DE L’ASSOCIATION .............................................................................................11
I.1 ..................................................................................................................................................................... Définition :
11

I.2 .............................................................................................................................................. Structure et organisation :

12
I.2.1 Organigramme: ..............................................................................................................................................12
I.2.2 Structure fonctionnelle de l'ORMVAT: ............................................................................................................14
I.2.3 Service Informatique: .....................................................................................................................................14
I.2.4 Organisation et organigramme du Service Informatique: ..............................................................................15
CHAPITRE II : CONDUITE DU PROJET ................................................................................................................17
II.2 ....................................................................................................................................................... Les objectifs du site
19

II.3 .................................................................................................................................................................... Conclusion

19
CHAPITRE III : ANALYSE ET ...............................................................................................................................21
III.1 ....................................................................................................................................................... Analyse du projet :
22
III.2 .................................................................................................................................................. Conception du projet:
22
III.3 ................................................................................................................................................................. Conclusion :
24
CHAPITRE IV :REALISATION ..............................................................................................................................25
IV.1.1 Langages et choix des outils utilisés: ..............................................................................................................27
HTML 27
JavaScript ..........................................................................................................................................................................................................................................28

IV.1.2 ............................................................................................................................................................... Réalisation:

30
 Page d’accueil : .................................................................................................................................................................................................................................30
 Partie de contact ..............................................................................................................................................................................................................................32
 Partie de categories..........................................................................................................................................................................................................................32
Explorez notre gamme complète de catégories, comprenant des produits variés pour répondre à vos besoins. De la bibliothèque agricole à la santé, en
passant par les articles de jardinage, les aliments pour animaux et plus encore, chaque catégorie est soigneusement sélectionnée pour offrir une
expérience d'achat diversifiée. Découvrez des produits de qualité dans chaque domaine pour faciliter votre quotidien et améliorer votre expérience
agricole..........................................................................................................................................................................................................................................33
 Page de login.....................................................................................................................................................................................................................................33
 Page de signup ..................................................................................................................................................................................................................................34
 Page de cart ......................................................................................................................................................................................................................................35
 La barre de search ............................................................................................................................................................................................................................37
CONCLUSION GENERALE ..................................................................................................................................46
 LISTE DES FIGURES

FIGURE 1 : L’OFFICE REGIONAL DE MISE EN VALEUR AGRICOLE DU TADLA .............................................................. 9

FIGURE 2 : SCHEMA GENERALE DE L'OFFICE REGIONAL DE MISE EN VALEUR AGRICOLE DU TADLA. ....................... 11
FIGURE 3 : ORGANIGRAMME DU SERVICE INFORMATIQUE ................................................................................... 14
FIGURE 4 : DIAGRAMME BETE A CORNE EXPRIMANT LE BESOIN ........................................................................... 16
FIGURE 5 : LA PAGE D'ACCUEIL DU SITE WEB ........................................................................................................ 25
FIGURE 6 : LE HEADER DU SITE WEB ..................................................................................................................... 26
FIGURE 7 : LE BAS DE PAGE DU SITE WEB.............................................................................................................. 26
FIGURE 8: LA PAGE CONTACT DU SITE WEB ......................................................................................................... 27
FIGURE 9 : LA PAGE DIRECTEUR ........................................................................................................................... 29
FIGURE 10 : LA PAGE D’AVIS DE RECRUTEMENT .................................................................................................... 30
FIGURE 11 : LA PAGE E-CANDIDATURE .................................................................................................................. 31
FIGURE 12 : LA PAGE DE PLAN MAROC VERT......................................................................................................... 32
FIGURE 13 : LA PAGE DEVELOPPEMENT AGRICOLE................................................................................................ 33
FIGURE 14 : LA PAGE PROMOTION FEMME RURALE............................................................................................. 34
FIGURE 15: LA PAGE MAINTENANCE DE L'INFRASTRUCTURE HYDRAULIQUE ......................................................... 35
FIGURE 16: STATION D'EXPLOITATION OULED GNAOU.......................................................................................... 36
FIGURE 17: LES DIFFERENTS PAGES A CONSULTER ................................................................................................ 37
 INTRODUCTION

Comme chaque année, les élèves de la première année de este

sont chargés de faire un stage pendant l’été afin de permettre aux étudiants
de développer leurs connaissances et d’exploiter les savoirs faire et les
outils qui ont été assimilé pendant l’année et encore découvrir d’autres
concepts.

Notre travail consiste donc à développer un site web dont le principe

a été précisé par mon encadrante qui porte sur un besoin qui fait partie de
la réalité : il s’agit de réaliser un site web qui permet au agriculteurs de
vender leurs produits . Ainsi ce rapport présent la démarche qu’on a suit
pour réaliser ce projet.

Pour un bon travail il faut un rapport bien structuré, pour cela, on va

organiser le présent rapport de la manière suivante :
Le premier chapitre « Conduite du projet » introduit le contexte
général du projet où on va présenter une analyse fonctionnelle du besoin.
Il contient également la description détaillée de la problématique à traiter
tout en expliquant la solution proposée et les méthodes mises en œuvre
pour aboutir.
 Dans le deuxième chapitre intitulé « Analyse et conception », on va
présenter l’outil utilisé durant la réalisation de ce projet, le cahier des
charges ainsi que le fonctionnement global du site web. Enfin, on va
aborder la phase de conception dont laquelle on va spécifier d’abord les
étapes après, on va présenter les différents données et l’ensemble
gestions proposé par le site web.

Et en achevant par le dernier chapitre intitulé « Réalisation et mise

en œuvre » qui présente dans un premier temps une description de la
phase de la mise en œuvre et des différents étapes du projet réalisé, ainsi
on y décrit la démarche suivi pendant la réalisation du site web. Et
finalement vous présentez quelques aspects du résultat final afin de vous
permettre de découvrir au mieux ce travail.

Á travers ce travail, on espère donner le point de départ d'une

ébauche de réflexions sérieuses sur le déroulement de ce site.
 CHAPITRE I : PRESENTATION DE
L’ASSOCIATION

I.1 Définition :
L’office Régional de Mise en Valeur Agricole du Tadla est un établissement
public, placé sous la tutelle du ministère de l’Agriculture et de la pêche
maritime, du Développement Rural et des Eaux et forêts.

Figure 1 : L’office régional de mise en valeur agricole du Tadla.

 Crée en 1966 à FKIH BEN SALEH par le décret royal n° 828-66 du
22/10/1960, il est chargé de promouvoir les travaux hydro-agricoles, assurer la

gestion des réseaux d'irrigation et de drainage et de l'encadrement des

agricultures.

L’Office Régional de Mise Valeur Agricole du Tadla assure son

fonctionnement par ses propres recettes, essentiellement à partir des redevances
en eau d’irrigation et réalise son autofinancement depuis 1987.

Sa population s’élève à 560000 habitants dont :

Population urbaine : 120000 habitants.

Population rurale : 440000habitants

I.2 Structure et organisation :

I.2.1 Organigramme:

La gestion de l’ORMVA du Tadla est assurée par un Directeur assisté par

les Chefs de trois Départements opérationnels (DDA – DA - DGRID).

Les chefs de deux Départements fonctionnels (DRH – DPF) et les trois

Services rattachés directement à la Direction (SMG – SAIGC – SI).

Au niveau des Départements, les tâches sont partagées entre les

structures du siège et celles du terrain : 5 Arrondissements de Développement
Agricole, 31 Gestion des Réseaux d’Irrigation et de Drainage et 12 Centres de
Gestion des Réseaux (CGR).
Figure 2 : Schéma générale de l'Office Régional de Mise en Valeur Agricole du
Tadla.
 I.2.2 Structure fonctionnelle de l'ORMVAT:

 La direction

 Service de l’Audit Interne et du Contrôle de Gestion (SAICG).

 Service des Moyens Généraux(SMG).

 Service Informatique(SI).

 Département de la Gestion des Réseaux d'Irrigation et de Drainage

(DGRID).

 Département de Développent Agricole (DDA).

 Département des Aménagements (DA).

 Département des Ressources Humaines (DRH).

 Département de la Planification et des Finances (DPF)

I.2.3 Service Informatique:

Service Informatique au d'Exploitation et de la Maintenance du Système

Informatique chargé de :
 Service Informatique au d'Exploitation et de la Maintenance du
Système Informatique chargé de :
 Administration du Réseau Internet / Intranet de l'ORMVA du Tadla.
 I.2.4 Organisation et organigramme du Service
Informatique:

Le Service est composé de deux Bureaux et d'un secrétariat :

 Bureau des Etudes Informatiques (B.E.I) qui procède aux études et au

développement en interne des principales applications de gestion qui
touchent les différentes activités de l'Office.

 Bureau d'Exploitation et de la Maintenance du Système Informatique

(B.E.M.S.I) qui procède à la maintenance et à la gestion des équipements
informatiques au niveau de toutes les entités de l'Office.
Figure 3 : Organigramme du service Informatique.
CHAPITRE II : CONDUITE DU PROJET
Ce chapitre décrit le contexte général du projet. Dans la première
section de ce chapitre on présentera la problématique, et en seconde
section, on présentera les objectifs du site.

15
I. 1 Problématique
De nos jours, les établissements ont émis le désir de créer un site
Web dans le but de vender des produits en ligne ce qui connais par
ecommerce.

La problématique est axée, principalement, sur la création d’une

application permettant de satisfaire le besoin des internautes.

Le besoin est exprimé alors, sous forme d’un diagramme bête à

corne, se formule comme suit :

Figure 4 : Diagramme bête à corne exprimant le besoin

II.2 Les objectifs du site
Dans le cadre de mon projet, j'ai opté pour la création d'une
plateforme de commerce électronique dédiée aux agriculteurs,
visant à faciliter la communication, à informer le public sur les
dernières actualités du secteur agricole, et à élargir la notoriété de
l'entreprise en attirant des utilisateurs en ligne.

Un site Web attrayant, dynamique et interactif, à la fois

convivial pour les administrateurs et les utilisateurs, est essentiel
pour assurer le bon fonctionnement et améliorer la communication
interne et externe au sein de cette structure commerciale.

II.3 Conclusion
Dans ce chapitre on a présenté le cadre général du sujet et les
objectifs visés. Dans le chapitre suivant on va faire l’analyse et la
conception du sujet en étant le plus précis possible pour que le lecteur de
ce rapport soit éclairé sur les différentes étapes de ce travail qui demande
beaucoup de temps et qui tout de même est vraiment passionnant.
 CHAPITRE III : ANALYSE ET
CONCEPTION

Dans ce chapitre, on va présenter une analyse complète et une

conception qui va permettre de décrire d’une manière simple, les besoins et
le fonctionnement du site web.
 III.1 Analyse du projet :

La création de la plateforme "e-lfalla7," dédiée exclusivement au commerce

électronique dans le secteur agricole, représente une démarche stratégique prometteuse.

Cette initiative vise à résoudre des défis majeurs dans l'agriculture en facilitant les
transactions entre les acteurs du domaine, en fournissant un marché en ligne pour les
produits agricoles, et en renforçant la notoriété de "e-lfalla7" auprès du public en ligne. En
se concentrant sur les besoins spécifiques des agriculteurs, la plateforme "e-lfalla7" offre
un espace dédié pour acheter et vendre des produits agricoles, favorisant ainsi la
croissance et la prospérité du secteur.

Les fonctionnalités de "e-lfalla7" permettront aux agriculteurs de gérer leurs

produits, de trouver de nouveaux débouchés et d'optimiser leurs activités. L'attrait de "e-
lfalla7" pour les utilisateurs en ligne est essentiel pour étendre la portée de la plateforme et
élargir sa clientèle.

En somme, cette initiative s'inscrit dans une vision globale visant à stimuler le
commerce agricole en ligne et à offrir des avantages significatifs à "e-lfalla7" et à
l'ensemble du secteur agricole.

III.2 Conception du projet:

L'idée de créer "e-lfalla7" est née de la nécessité de faciliter le commerce agricole en

ligne et de répondre aux besoins des agriculteurs, des acheteurs et de l'ensemble de la

communauté agricole. En constatant les défis auxquels sont confrontés les acteurs de

l'agriculture, tels que la difficulté d'accéder à de nouveaux marchés, de gérer efficacement

leurs produits, et de rester informés des dernières tendances du secteur, il est devenu évident

qu'une solution technologique était nécessaire.

 Le concept de "e-lfalla7" repose sur la conviction que la technologie peut jouer un rôle

central dans la transformation du secteur agricole. Il s'agit de créer un espace en ligne où les

agriculteurs peuvent promouvoir leurs produits, trouver de nouveaux débouchés et élargir leur

clientèle. De plus, cette plateforme doit permettre aux acheteurs de trouver facilement des

produits agricoles de qualité, tout en offrant des informations actualisées sur le secteur.

La vision de "e-lfalla7" est de devenir le point de référence pour le commerce

électronique agricole, un lieu où la technologie connecte les producteurs et les

consommateurs, améliore la rentabilité des agriculteurs et contribue à la croissance durable

du secteur. Le choix des technologies, y compris Django, HTML, CSS, JavaScript et d'autres

frameworks, découle de cette vision, visant à fournir une plateforme solide et adaptable pour

concrétiser cet objectif ambitieux.

 III.3 Conclusion :
Les exigences et les contraintes du projet sont d'une ampleur significative,

nécessitant une structure complexe pour tenir compte des relations et des

interactions entre les différentes données stockées. Cette complexité découle de la

diversité des acteurs impliqués dans le secteur agricole, des produits variés

proposés, et de la nécessité de créer un environnement en ligne fluide pour les

utilisateurs.

Ainsi, dans la section suivante, nous explorerons en détail l'approche choisie

pour répondre à ces défis. Nous examinerons les choix effectués en ce qui concerne

les technologies et les frameworks pour la réalisation de ce projet. Nous détaillerons

également la façon dont nous comptons aborder la gestion des données, l'interface

utilisateur, la sécurité, et d'autres aspects cruciaux pour garantir la réussite de "e-

lfalla7." Cette section permettra de mettre en lumière notre stratégie pour concilier les

demandes complexes du projet avec une mise en œuvre efficace.

 CHAPITRE IV : REALISATION

Ce chapitre est entièrement dédié à détailler la mise en œuvre du site "e-lfalla7". Nous allons

examiner la méthodologie qui a guidé notre processus de réalisation, et illustrer quelques-unes des

fonctionnalités clés. De plus, nous allons présenter en détail les spécifications des exigences,

permettant ainsi une analyse approfondie de l'architecture à suivre.

Par la suite, nous plongerons dans la conception du site, en examinant à la fois les aspects

fonctionnels et techniques. Cette section expliquera comment nous avons traduit les besoins en

fonctionnalités concrètes et comment nous avons mis en place une architecture solide pour soutenir

ces fonctionnalités.
IV .1 Environnement et outils de
développement:

Dans cette partie, nous allons détailler les étapes du développement

du site, les langages et le choix des outils dans un premier temps, puis un
descriptif de la base de données, les étapes de la programmation avec son
design, un aperçu du résultat obtenu et enfin les principales difficultés
rencontrées.

IV.1.1 Langages et choix des outils utilisés:

Au sein de cette partie, on va traiter les déférents langages et outils

utilisés pour la création et la réalisation de notre projet. On s’intéresse plus
aux nouveaux langages utilisés et les plus fréquents à la marche de travail.
Et voilà la liste de ces outils :

 HTML

Le HTML (« HyperText Mark-Up Language ») est un langage dit de

« balisage » ou de « structuration » permettant la conception de pages
web avec des balises de formatage. Les balises permettent d'indiquer la
façon dont doivent être présentés le document et les liens qu'il établit avec
d'autres documents.

22
  CSS
Le CSS (« Cascading Style Sheets » : feuilles de style en cascade) est
un langage informatique complétant le HTML. Alors que le HTML structure
la page Web, le CSS va la mettre en forme en y apportant du style.

 JavaScript

Le JavaScript est un langage de script incorporé dans un document

HTML. Historiquement il s'agit même du premier langage de script pour le
Web. Ce langage est un langage de programmation qui permet d'apporter
des améliorations au langage HTML en permettant d'exécuter des
commandes du côté client, c'est-à-dire au niveau du navigateur et non du
serveur web.

 Django

un Framework Python : Django est un framework de développement web open-source basé sur
Python. Il offre une structure solide pour la création d'applications web, simplifiant la gestion des bases de
données, la gestion des utilisateurs, la sécurité, et bien plus encore. Dans la réalisation de "e-lfalla7," Django a
été utilisé pour développer l'architecture back-end, permettant ainsi une gestion efficace des données, des
opérations de lecture/écriture, une authentification sécurisée, et une administration conviviale. Son adoption a
grandement contribué au succès de notre plateforme en fournissant un environnement de développement
cohérent et puissant.
  Bootstrap

Bootstrap est un framework front-end populaire utilisé dans notre code pour améliorer l'apparence et la

convivialité de la page. Il s'agit d'un ensemble d'outils et de composants CSS et JavaScript pré-conçus qui

simplifient le développement de l'interface utilisateur.

Dans notre exemple, Bootstrap est responsable de la mise en forme de la barre de navigation, des

boutons, de la mise en page réactive, et de divers autres éléments visuels. Il offre une manière cohérente de

créer un design moderne et réactif, tout en garantissant la compatibilité avec différents appareils et

navigateurs.

L'utilisation de Bootstrap a considérablement accéléré le processus de développement de "e-lfalla7" en

nous permettant de tirer parti de composants prêts à l'emploi, de classes CSS et de scripts JavaScript pour

créer une interface utilisateur esthétiquement agréable et fonctionnelle. Cela a permis d'optimiser l'expérience

utilisateur et de garantir une apparence professionnelle sur l'ensemble du site.

 IV.1.2 Réalisation:
 Page d’accueil :

Nous avons dans un premier temps mis en place la structure du site en

créant la page d'accueil avec une mise en forme par des cadrages basiques en
fonction des articles et asides regroupés par section. Cette première partie est
principalement axée sur le côté HTML, CSS et java scriptet des framework.

La page d'accueil est un des éléments essentiels d'un site web qui capte
l'attention des visiteurs, alors il doit donc bénéficier d'une attention particulière
lors de la création de site.
  Partie de contact

La page de contact est l'endroit où vous pouvez nous joindre directement. C'est le

point de contact pour toute communication avec notre équipe. Utilisez cette page pour poser

des questions, laisser des commentaires ou nous contacter pour toute demande. Nous

sommes là pour vous écouter et vous aider

 Partie de categories

25
Explorez notre gamme complète de catégories,
comprenant des produits variés pour répondre à vos
besoins. De la bibliothèque agricole à la santé, en
passant par les articles de jardinage, les aliments pour
animaux et plus encore, chaque catégorie est
soigneusement sélectionnée pour offrir une expérience
d'achat diversifiée. Découvrez des produits de qualité
dans chaque domaine pour faciliter votre quotidien et
améliorer votre expérience agricole.

 Page de login
 Page de signup
 Page de cart
 La barre de search
 CONCLUSION GENERALE

Ayant terminé la rédaction de ce rapport, on avoue que ce projet était

une expérience assez enrichissante. Il m’a permis de prendre conscience
des responsabilités qu’on sera appelé à confronter dans nos vies
professionnelles ultérieurs.

Mon stage au sein du service Informatique de l'ormvat a été bénéfique

et instructif. Il m’a permis de développer et d’améliorer mes connaissances et
compétences et surtout de découvrir de nouvelles fonctionnalités et de
nouveaux langages.

J'ai durant la réalisation de ce projet appliqué directement les

connaissances acquises en cours. Pour réaliser un travail aussi important, j'ai
fait beaucoup de recherches pour atteindre mes objectifs.

J'ai été aussi conscient que ce site peut évoluer dans l’avenir et donc il
faut vraiment au niveau du développement faire un travail précis et clair.

J'ai réussi de manière efficace l’association de plusieurs langages. Pour

arriver à ce résultat, nous avons fait preuve de beaucoup de patience pour
arriver à coder correctement.

Ce projet a été vraiment passionnant et je suis fière de cette réalisation.