Pour l’obtention du Diplô me Universitaire de Technologie

Réalisation d’une application web

pour la gestion des commandes et de
stock.

Présenté par : Encadré par :

SEMMANE Achraf Mr. EL IDRISSI

JUIN 2013

1
 Dédicace
Je dédie ce travail :

 Je dédie ce modeste travail et ma profonde

gratitude à mes parents pour l’éducation qu’ils
m’ont prodigué ; avec tous les moyens et au
prix de toutes les sacrifices qu’ils ont consentis
à mon égard. Afin que je puisse poursuivre
mes études dans de bonnes conditions.

 A nos frères, sœur et amis (es).

 A tous nos formateurs et collègues de la LP
IG.
 Et à tous les autres amis (es) sans
exception.
 A tous ceux qui nous sont chères.

2
 Remerciement
Je tiens tous d’abord à remercier vivement mon professeur et mon

encadrant Mr.ELIDRISSI qui n’a pas cessé de m’orienter par ses

favorables directives et ses précieux conseils pour que ce modeste travail

voie le jour.

Je tiens aussi à exprimer mes vifs remerciements et profondes

gratitudes âmes professeurs et tous le corps administratif de la faculté,

et surtout ceux de la licence professionnelle Informatique de Gestion pour

leurs efforts considérables pour nous donner la meilleure formation

possible.

Mes vifs remerciements s’adressent également à toute l’équipe de

CANALFOOD surtout Mr. ELHABIBE pour sa disponibilité et qui a

répondu courtoisement à mes questions et besoins, je ne peux que lui

exprimer ma reconnaissance pour les gestes de son bonne volonté.

Enfin, je remercie tous ceux qui m’ont aidé de près ou de loin pour
réaliser

Ce modeste travail.

MERCI

3
SOMMAIRE

4
 Introduction
L’une des missions essentielles d’une formation universitaire est le développement de
la recherche sous toutes ses formes, (recherche scientifique, fondamentale, et
opérationnelle…). Les étudiants en milieu universitaire, et dans le but de compléter leurs
formations théoriques doivent aussi être initiés aux méthodes de recherche et de
développement de projets tels que les projets professionnels.
Le stage dans un milieu professionnel constitue une étape décisive dans le cycle de formation
d’un futur cadre .En effet la découverte de l’environnement interne et externe d’une
organisation permet de mettre en valeur le savoir acquis au niveau de l’université et de le
traduire en activités réelles sur le terrain et lui permettant ainsi, de développer son savoir-
faire, son savoir être, son savoir agir et son savoir vivre et donc la performance puis
l’excellence .

C’est un aperçu de la vie professionnelle et de tout ce qui l’accompagnent (relation

entre collègues, rapports hiérarchique, communication interne, assiduité, compétence,
ambiance du travail…), à la fin de cette période et comme fruit de cette expérience, le
stagiaire est tenu de rédiger un rapport contenant en plus de l’identification du lieu de
formation et celui du stage, les différentes tâches exécutées et les difficultés rencontrées.

C’est dans cette optique, que s’inscrit mon stage au niveau de CANAL FOOD et considéré
comme un milieu de pratique pour tous ce qu’on a appris au niveau des études.
Pour la réalisation de ce projet, et en accord avec mon encadrant professionnel et
pédagogique, Nous avons établi un programme de travail échelonné sur toute la période du
stage au niveau de cette organisation.
Ma démarche s’inscrits dans la réalisation d'une application de gestion de stock avec un
système d’information qui nécessitait un développement spécifique car les logiciels existants
sur le marché sont prévus pour une utilisation plus poussée et manquent de simplicité
d’utilisation.
Ce rapport s’articule autour de cinq axes principaux.
Partie 1 : Présentation de l’entreprise :
Tout d’abord, je commencerai par une présentation de la société CANAL FOOD.
Partie 2 : Analyse des besoins:
Dans cette première on va évaluer les taches du stage et le cahier de charge associé au projet
Partie 3 : Outils et méthodes de développement:
C’est dans cette partie qu’on va mentionner les outils de développement et le choix SGBD
5
Partie 4 : Analyse et conception:
C’est la partie pertinente dans notre projet c’est l’analyse du projet en parlant du : MCD,
MLD, MCC et Diagramme de cas d’utilisation.
Partie 5 : Réalisation de l’application :
C’est l’étape de la réalisation de l’application avec la charte graphique du site et le système
de navigation.

Chapitre 1 :
Présentation
Générale.

6
Le premier contact avec une entreprise, pousse le stagiaire à identifier d’abord son nouveau
milieu. C’était ma première démarche. Ce chapitre vient alors pour donner une idée sur
l’organisme d’accueil.

Fiche  technique de M-CANAL FOOD:

Nom de l’établissement : Canal FOOD

Directeur Général : M. Nourreddine Zine

Spécialité : Distribution des produits alimentaires

Forme juridique : S.A.R.L

Adresse : r.s. 1022 Lissasfa/Dar Bouazza - BP 8291 - 20230  Casablanca

Tél : 0522 651 370

Fax : 0522 651 403

Email : Canalfood@menara.ma

Ville : Casablanca

Date de création : 2003

Budget : 32.000.000,00 Drh

R.C: 143199

Figure 1 : Fiche technique de CANAL FOOD

Présentation:

Canal Food est une société d’alimentation générale. Son activité est fondée sur la
distribution et la livraison de la marchandise, et la gestion de stock, En effet CANAL FOOD
opère efficacement dans le tissu économique, en offrant des services primordiaux en vue de
l’alimentation en matière produits alimentaires.

Depuis 2008 CANALFOOD a arrondi son domaine, par produire la marque ITKAN
(sucre, thé, farine…). Après 5ans de commercialisation de son produit CANALFOOD avec sa
7
marque ITKAN a pu gagner une grande partie du marché alimentaire avec sa bonne qualité de
produire et son service après vente.

Objectifs de CANAL FOOD :

Répartir les moyens utilisés (points de vente, commerciaux…) au plus prés de la clientèle et
proposer une offre adaptée aux besoins des clients potentiels.
Assurer le stockage, la livraison et la vente des produits.
Assurer la fonction de gros.
Suivie des travaux exécutés par les entreprises.

Organigramme de CANAL FOOD :

Organisation et structure de la fonction informatique :

Le service informatique de la société CNAL FOOD est structuré en deux bureaux :

8
  Bureau d’étude et programmation assure la conception et le développement des
applications.
 Bureau d’exploitation et maintenance assure la maintenance des équipements
informatiques et l’exploitation des applications.

Ce service assure plusieurs fonctions à savoir :

 La facturation
 La quittance ment de produits.
 L’inventaire magasin.
 La gestion des prêts et des avances accordées au personnel.
 la saisie des journaux comptables

La maintenance des applications est répartis entre le responsable et les techniciens

chacun s’occupe d’une application et essaie d’apporter les améliorations demandées.
L’exploitation de ces applications est assurée par les agents de saisie, mise à part une
personne qui s’occupe de l’orientation des agents de saisie.

Aujourd’hui, le service informatique assure les taches d’exploitation des applications

existantes pour les autres services aux seins de ces derniers, cette situation entrave le bon
fonctionnement des échanges inter service. En effet l’affectation des opérateurs de saisie au
niveau des services abonnés, comptabilité et personnel, aura un apport considérable pour ces
services et évitera le circuit de redondance de données et des documents inutiles.

Partenaires CANALFOOD :

CANALFOOD et chargée de la distribue de touts les produit de la marque UNILIVER

et SAVONA au Maroc, il distribue aussi 70% du sucre cosumar dans notre pays, Il est aussi
partenaire avec les grands magasins Auchan (Marjan, ACIMA, Carrefour, Labelvie ….).

9
Chapitre 2 :
Analyse et
Conception

10
 1. Introduction :

Dans ce chapitre, j’ai entamé la partie analyse de mon projet, ou je présente en résumé, les
étapes de ce dernier, en mettant le point sur les besoins de la société en apportant une solution
adéquate qui répond au cahier de charge.

2. Gestion de projets :

La gestion de projet est l’utilisation d’un savoir, d’habiletés, d’outils et de techniques dans le
cadre des activités d'un projet, en vue de satisfaire ou de dépasser les exigences et les
attentes des parties prenantes à l’égard d’un projet. Le gestionnaire de projet, parfois appelé
coordonnateur ou chef de projet, en administre les détails, au jour le jour .

1
2
2-1 Réseau PERT :
 Cette technique a été établie par la marine américaine, en 1958, pour coordonner les tâches
des milliers d'entreprises impliquées dans le projet "Polaris" (programme de développement
de missiles nucléaire).
 Compte tenu de son efficacité (elle a permis de réduire de 14 à 7 ans la durée globale de
réalisation du projet Polaris).

Tâche Durée Prédécesseur

Etape 1: schema directeur. 2j ----------
Etape 2: étude préalable. 2j -----------
Etape 3: étude détaillé. 4j ----------
Etape 4: conception. A, B, C
Etape5: creation de 4j D
l’interface.
Etape 6: programmation. 25j D
Etape 7: les tests. 5j D
Etape 8: exploitation. 4j D
Etape 9: réalisation. E, F, G, H
Etape 10: création du 10j I
rapport.

11
1
2
2-2 Diagramme de réseau de PERT:

Figure 2 : Réseau de PERT

Cahier de charges :

Le cahier des charges est un document qui contient la liste des besoins, des exigences et des
contraintes qu'il faut respecter lors de la réalisation de notre projet.

3.1 Analyse des problématiques :

3.1.1 Etude des besoins :

Puisque les logiciels de gestion de stock sont conçues pour une utilisation plus compliqué et
plus précise et manquante de simplicité d’utilisation. Le premier but de mon travail a été
d’optimiser cette faille et de réaliser une application de gestion des stocks qui soit plus ou
moins parfaitement adaptée au fonctionnement spécifique de CANAL FOOD. En effet,
aucune des applications existantes ne satisfaisait pleinement l’utilisateur. Soit les applications
étaient trop simples et ne permettaient pas de gérer toutes les particularités, soit elles étaient
trop complexes et difficiles à utiliser.

12
Donc j’ai effectué une analyse des besoins de l’utilisateur, et j’ai réalisé un cahier des charges
ou j’ai poursuivi la conception et la réalisation d’une application web simple et accessible par
l’utilisateur.

3.1.2 Situation actuelle:

L’archivage des opérations de gestion se fait sur un grand classeur de plusieurs papiers qui
se manifestent sur Excel et Word la chose qui rend la recherche des anciennes informations
et son tries difficile a gérer.

3.2 Objectifs :

3.2.1 Solution proposé :

Vu l’état critique de gestion de stock au sein du service informatique, j’ai décidé de créer une
application de gestion de stock réalisé avec les différents langages de programmation web.

3.2.2 Présentation du projet :

CANAL FOOD et une application accessible du web, qui contient des différentes
options qui facilitent les tâches aux utilisateurs et aux administrateurs. C’est une gestion qui
permet une organisation efficace et satisfaction des besoins de tout utilisateur ainsi que les
options qui facilite le travail aux administrateurs afin d’avoir une gestion plus automatisée
qui permet une sécurité performante de la gestion : elle donne l’autorisation à l’administrateur
de gérer le stock.

CANAL FOOD donne aux utilisateurs la permission de réserver les produits où

chaqu’un d’eux contient les informations nécessaire qui le caractérise par exemple, le nom le
type et le prix. L’application contient aussi un système de messagerie qui va gérer l’échange
d’information entre le client et le l’administrateur de l’application.

3.2.3 Charte du projet :

a- Identification:

Titre : Application de gestion de stock.

13
Projet : PFE & SFE

Nom du client : CANAL FOOD

Gestionnaire de projet : SEMMANE ACHRAF

Début du projet: le 30 Avril 2013

b-Contexte :

Comme étudiant en 3éme année je suis sensé à réaliser un projet de fin de formation. Le mien
se présente dans une application accessible par le web de gestion de stock et de commandes.

c-But :

Réalisation d’une application.

d-Objectifs du projet :

L’objectif de mon projet de fin études a pour but de concrétiser les connaissances acquises au
niveau théorique. Donc mon projet va contenir les différents langages de programmation ainsi
que les outils que j’ai appris au cours de ma formation, est une fenêtre qui va me mettre en
contact avec le monde professionnel.
Ce projet a pour but :
Faciliter la recherche des informations on offre une barre de recherche pour ’administrateur.
Visualiser les états des commandes.
L’administrateur a le droit d’ajout au stock ou de le régler.
Avoir l’opportunité de visualiser tous les propriétés de l’application.
Avoir des facture imprimable au lieu le faire manuellement.
Avoir des graphes qui facilite la vue de l’administrateur a l’égard de son stock par exemple :
la quantité de chaque produit en stock

e-Alignement stratégique :

L’idée du site se présente dans la facilité de l’utilisation de l’application pour n’importe quel
client et ainsi que pour l’administrateur.

f-Contenu de projet :

Mon site va contenir des différentes rubriques pour chaque espace : nos produits, contacts,
commander dans ce qui concerne l’espace client.
14
Ce site accorde aussi un espace pour l’administrateur pour qu’il puisse faire le suivi du stock
des produits et faire la gestion des commandes, de produit, de personnels et de dépôt.

g-Parties prenantes:

Les nouveaux langages utilisés comme JAVASCRIPT, PHP, HTML, CSS, JQUERY.............
.

h-Risque:

Dans la réalisation de ce projet j’ai pu affronté plusieurs problèmes surtout que cette
application change la manière de travail d’ Excel en mettant une interface graphique avec la
possibilité d’exporter les informations de la base donné vers Excel la chose qui mène vers une
nouvelle vue de travail tout en respectant les ancien norme de la société.

j-Bénéfices potentiels :

Mon projet s’adresse a une entreprise qui n’avait pas une application qui lui permet de gérer
son stock convenablement qui peut répondre au besoin du client ainsi que ces responsables.

Chapitre 3 :
Outils et
15
 méthodes de

développement
Introduction :

Dans cette partie de notre rapport on va entamer les outils de travail et les méthodes de
développement de l’application

Outils de développement :

HTML/CSS : Le CSS est un langage informatique qui sert à décrire la présentation des

documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide
Web Consortium (W3C). Tandis que HTML  est le format de données conçu pour représenter
les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son
nom.

PHP (HyperText Preprocessor) est un langage interprété exécuté du côté serveur, il permet
de produire des pages Web dynamiques, générées à la demande, via un
serveur HTTP. La syntaxe de ce langage provient de celles du
langage C, du Perl et de Java.

16
PHP permet un interfaçage simple avec de nombreux systèmes de gestion de bases de
données (SGBD), tels que Oracle et MySQL, par l'intermédiaire de requêtes SQL.

JQuery: est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript et
HTML, et la pour but de simplifier des commandes communes de JavaScript. La bibliothèque
contient notamment les fonctionnalités:
 Événements.
 Effets et animations.
 Manipulations des feuilles de style en
cascade (ajout/suppression des classes,
d'attributs…).

JpGraph une bibliothèque PHP orientée objet qui permet de créer et personnaliser,
rapidement et facilement, des graphiques de différents types : courbes, diagrammes en barres,
diagrammes à secteurs... JpGraph permet également de générer des graphiques cliquables ou
encore des images anti-automatisation.

JavaScript  est un langage de script incorporé dans un document

HTML. Il s'agit d'un langage de programmation orienté objet qui
permet d'apporter des améliorations au langage HTML en permettant
d'exécuter des commandes du côté client.

MySQL est un système de gestion de base de données (SGBD). Selon

le type d'application, sa licence est libre ou propriétaire.
Il fait partie des logiciels de gestion de base de données les plus utilisés
au monde, autant par le grand public (applications web principalement)
que par des professionnels, en concurrence avec Oracle, Informix et Microsoft SQL Server.

Outils de travail :

Notepad++ est un éditeur de source avec mise en relief de la

syntaxe et mise en forme de cette dernière.
Ci-dessous une imprime écran de Notepad ++ qui possède une
fonction multi-vues qui permet à l'utilisateur d'éditer différents
17
documents à la fois et même d'éditer le même document en synchronisant 2 vues
différentes…

PHPMyAdmin est une application web qui permet de gérer un serveur de bases de données
MySQL. Dans un environnement multi-utilisateurs, cette interface écrite
en PHP permet également de donner à un utilisateur un accès à ses
propres bases de données.

Power AMC : permet de réaliser tous les types de modèles informatiques. Il reste un des
seuls qui permet de travailler avec la méthode Merise. Cela permet
d'améliorer la modélisation, les processus, le coût et la production
d'applications.

18
 Chapitre 2 :
Analyse et
conception

1. Introduction :
Ce chapitre s’intéresse à la partie conception qui constitue une phase primordiale dans le
processus du développement vu l’importance des décisions prises et leurs impacts sur
la qualité et la performance de la solution produite.

2. Choix des outils de conception:

La conception d'un système d'information n'est pas aussi évidente car il mène à penser ainsi
que détaillé l'ensemble de l'organisation que l'on doit mettre en place.
La phase de conception nécessite des méthodes qui permettent de mettre en place un modèle
sur lequel on va s'appuyer.

19

Merise
La modélisation consiste à créer une représentation virtuelle d'une réalité de telle façon à faire
ressortir les points auxquels on s'intéresse. Ce type de méthode est appelé analyse.
Il existe plusieurs méthodes d'analyse, la méthode qu’on utilisé est la méthode MERISE.

3. Analyse du projet:
Règle de gestion :

Une règle de gestion est une loi qui peut être assimilée à une procédure de traitement de
l’information en fonction des objectifs assignés.

Les règles de gestion déterminent la nature des informations à conserver, à traiter ou à

produire ainsi que la manière de les traiter.

Les traitements transforment des informations pour les rendre disponibles dans un
contexte donné en tenant compte des règles de gestion.

Donc les règles de gestion qui assure la concrétisation de mon projet sont les suivantes :

Une facture est établie à un ou plusieurs dépôts

Un ou plusieurs clients peuvent passer une commande.
Un produit appartient à une et une seul catégorie.
Un fournisseur fourni à une ou plusieurs commandes
Une facture est régler par un ou plusieurs modes de paiement.
Un dépôt contient un ou plusieurs produits.
Une commande se passe par une est une seul facture.

Dictionnaire de données :
Le dictionnaire de données épuré ne doit pas présenter de donnée redondante. Il va donc
falloir épurer « la liste brute des propriétés », des éventuels synonymes, polysémies et de
propriétés calculées.
L’étude analytique des besoins en information a permis de déterminer les propriétés
nécessaires à l’application d’où le dictionnaire épuré suivant :

Entité Nom Signification Type

Fature Id_fc L’identifiant de facture Int(20)

Date_fc Date de la facture Date

Etat_fc Etat de la facture booléen

Prix_unitaire Prix unitaire du produit int(30)

20
 Quantité_prd Quantité du produit int(30)

Prix_total Prix total int(30)

Depot Id_dp Identifiant du dépôt Int(20)

Nom_dp Nom du dépôt varchar(50)

Type_dp Type du depot varchar(20)
Quantite_dp Quantité du depot Int(20)
Catégorie Id_categorie Identifiant catégorie Int(20)
Label Label catégorie Varchar(30)

Produit Id_prd Identifiant du produit Int(20)

Type_prd Type du produit Varchar(30)
Marque_prd Marque du produit Varchar(30)
Quantite_prd Quantité de produit Int(30)

Model_prd Model produit Varhar(60)

Prix_unitaire Prix unitaire du produit Int(20)
Prix_ht Prix haur tax Int(20)
Prix_ttc Prix tout taxe compris Int(20)

Commande Id_cmd Identifiant de la commande Int(20)

Date_cmd Date de la commande date

Date_reception Date du réception de la date

commande
Date_max_livraison Date maximum pour la date
livraison du produit
Qnt_prd Quantité du produit Int(20)
Client Id_cl Identifiant du client Int(20)

Nom_cl Nom client Varchar(70)

Prenom_cl Prenom clien Varchar(70)

Adress_cl Adressedu lient Varchar(100)

Tel_clt Téléphone du client Int(30)

Ville_clt Ville client Varchar(80)

Email_cl Email du client Varchar(30)

21
Fournisseur Id_fourn Identifiant du fourniseur Int(20)

Nom Nom fournisseur Varchar(60)

Prenom Prénom du fournisseur Varchar(60)

Adresse Adresse du fournisseur Varchar(100)

Email Email fournisseur

Tel Téléphone fournisseur Int(30)

ModePaiement Id_paiement Identifiant du paiement Int(20)

Title Nom du mode paiement Varchar(30)

Figure 5 : Dictionnaire de données

4. MCD (Modèle Conceptuel des Données):

Ce modèle nous permet d'avoir une vue statique de l'application. Il nous montre les relations
entre les différentes entités qui constituent cette dernière.
Il nous mène vers la solution finale. À partir de ce MCD, on retrouve le corps des différentes
entités de notre application.
Le schéma ci-dessous nous donne une vue globale de notre application. Il se constitue des
entités principales qui vont nous servir à réaliser l'application.
Pour avoir de plus d’informations sur l'autre partie de mon application j’ai pensé à représenter
le modèle conceptuel de données, il s'agit de représenter les données et les différentes
relations entre elles.

22
 Figure 6 : Model conceptuel de données(MCD)
Ce modèle m’a permis de construire ma base de données, qui relie chaque entité a une à une
table dans la base de données.

Dans cette deuxième figure on trouve les tables suivantes : depot, client, fournisseur,
modepaiement, catégorie, commande et produit avec les associés : fournir contenir appartenir
concerner établir règle et passe.

C’est avec toute les règles de gestions qu’on trouve an sein de mon application que
l’administrateur peut gérer son site

5. MLD (Modèle logique des Données):

Le Modèle Logique de Données (MLD) est la modélisation logique des données qui tient
compte du niveau organisationnel des données. Il s’agit d’une vue logique en terme
d’organisation de données nécessaires à un traitement.
Il consiste à donner une représentation schématique des données du système du point de vue
de la base de données qui va les stocker.
En d'autres termes, il s'agit d'une définition de la structure des données telles qu'elle sera
employée dans la base de données.
Il donne le nom des tables, les champs avec les types de chacun (chaîne de caractères,
décimal, entier, etc...) et les relations de dépendance entre les tables.
Le MLD est très dépendant de la base de données employée, car elle en est tout simplement
son schéma. D'où le terme de "logique" (car dépendant du logiciel).

23
 Figure 8 : Modèle logique de données (MLD)

6. MCC (Modèle conceptuel de communication):

Modèle conceptuel de communication(MCC), représente les systèmes fonctionnels externes et
internes .A chaque fonction correspond un objectif de l’entreprise. Les échanges
d’information entres ces fonctions sont répertoriées et les informations recensées

Le modèle conceptuel de communication de notre application est le suivant :

24
 1

Administrateur

5
3

4
Client 2

Dépôt
6

Figure 8 : Modèle conceptuel de communication

1: envoie de bon de commande (commande non réglé)

2: Vérification du stock au dépôt

3: stock suffisant

4: envoie bon de livraison avec le code de la commande (commande réglé)

5: Présence du client avec le code déjà donné

6: facturation

25
PARTIE V : Réalisation de l’application

1. Introduction :
Arrivé à ce stade, il me reste qu'à commencer à écrire mon code en se basant sur les résultats
obtenus des chapitres précédents.
Mais cela se fait en suivant des critères. Qui oblige a passé par plusieurs jalon pour avoir un
produit de bonne qualité.
Ces techniques qu'on les appelle modèles de cycles de vie d'une application sont bien
expliquées par le génie logiciel.
Ces modèles m’ont accompagné dès le début du projet jusqu'à l'implémentation de celui-ci.

Figure 9 : cycles de vie de l’application

26
 Système de navigation :

Internet étant un hypermédia, l’utilisateur d’un site peut très bien se perdre par rapport à
ses buts et à la façon de les atteindre.
En effet, l’internaute peut avoir du mal à se localiser sur un site, il peut rapidement ne plus
savoir où il est. La facilité de passage d’un document à un autre grâce aux liens hypertextes
peut l’empêcher de présenter clairement l’organisation du contenu disponible sur un site.
Dans ce contexte, une bonne organisation des barres de navigation selon une architecture
claire apparaît nécessaire :

Partie Public

Accueil Connexion

Présentation Partie Privée

du projet.
Compte Compte
client administrateur

Compte client

Produits Commander Contact

Présentation Réservation Présentation du

des du produit lieu de
différentes en l’entreprise est
avec le prix remplissant un champ pour
de chaque un la messagerie
produit. formulaire. avec
l’administrateur 27
.
 Compte administrateur

G.produit G.facture G.personels G.dépôt

G.commande

Liste des Liste des Liste des C’est la gestion Liste des
commandes produits avec facture est de fournisseur dépôts. On
et les le graphe de l’impression de responsable peut ajouter
commandes produit en de ces et des clients ou supprimer
non régler stock et une derniers. dans tous ces dépôt
avec la liste des derniers on
possibilité de produits en peut les
supprimer Excel. visualiser et les
une ajouter.
commande et
l’utilité
d’avoir le
graphe des
commandes
par mois.

Figure 10 : Système de navigation

La charte graphique:

La réalisation de la charte graphique consiste en une conception visuelle. Il s'agit de

récapituler, dans un document synthétique, les règles de présentation des éléments graphiques
d'un site.
Autrement dit, la charte graphique définit en détail toutes les caractéristiques graphiques de la
page web, notamment les tailles, couleurs et apparence des textes, images et logo, éléments
de navigation ainsi que le positionnement des objets dans la page.

28
 1.1 Introduction
Cette partie définira le principal terme de la charte graphique, ainsi que les différentes
couleurs et police utilisées.

1.2 Définition
La charte graphique a pour objectif d'homogénéiser l'ensemble des publications web, elle
définit en détail toutes les caractéristiques graphiques de la page web, notamment les tailles,
couleurs et apparence des textes, images et logo, éléments de navigation ainsi que le
positionnement des objets dans la page.

1.3 le choix des couleurs :

Les couleurs possèdent un symbolique implicite, il est donc important de les choisir en
connaissance de cause. Lors de la réalisation de la charte graphique d'un site web, il est
conseillé de ne pas utiliser plus que trois couleurs différentes afin de respecter le critère de
sobriété.

Quel que soit le choix des couleurs, il est recommandé d'établir une couleur prédominante,
représentant la majeure partie de la page web, et une ou plusieurs couleurs secondaires plus
dynamiques (plus vives).

1.4 Structure des pages :

Il s’agit de déterminer l’organisation des éléments dans les pages web. Notamment l’entête,
les menus, le corps ainsi que le pied de la page.

 l’entête : une zone située en haut sert comme préambule de la page, elle contient une
image portant le premier nom de l’entreprise où j’ai passé le stage, il est aussi le logo
de l’application.

 Menu horizontal: Une zone de navigation située en haut de la page, juste après

l’entête. Elle contient les boutons de navigations principaux (Accueil, nos produits,
commandés et contact.

 Le corps : C’est la partie qui contient l’essentiel de la page. C’est la partie où on

trouve les différents produits publiés.

1.5 Logotype :
29
 Le logotype se compose de la première lettre de l’entreprise UNILIVER

Figure 11 : Logotype de l’application

Le logo de la marque Unilever est le logo par défaut du site web il est utilisé par une couleur
c’est le bleu foncé.

1.6 Dimension des pages :

La taille des pages web dépend essentiellement de la définition d'affichage des internautes.
Pour garantir un affichage optimal pour la majeure partie des visiteurs, il faut choisir une
largeur supportée par le plus grand nombre d'utilisateurs, pour cela on a utilisé les nouvelles
normes qui sont 1200 et 800 pixels. Et une hauteur qui ne dépasse pas cinq fois la hauteur de
l’écran.

Implémentation de l’application:

Pour avoir une vision plus panoramique sur le fonctionnement de cette application, je propose
de suivre les indications mentionnées ci-dessous :
1.7 Espace Administrateur :

30
On va commencer notre l’application par la partie administrateur, comme on a pu constater
dans la partie règles de gestion. Chaque client peut passer une commande après validation
d’un administrateur.
Tout d’abord on va voir l’interface d’authentification.
4.1.1 L’interface d’authentification :

L’interface d’authentification c’est la première interface où vous devez saisir votre login puis
le mot de passe pour y accéder en cliquant sur connexion. L’application vérifie grâce à un test
de login en PHP si votre login et votre mot de passe est corrects, puis elle vous donne le droit
d’accéder à des options d’un menu bien spécifiques.

Apres la saisie d’un login ou un mot de passe incorrecte un message d’alerte s’affiche pour
que l’administrateur teste une autre fois.

31
32
 4.1.2 Menu horizontal :

Après avoir pu se connecter à l’aide d’un login unique et un mot de passe, l’administrateur
consulte sa page il trouve ensuite un menu principale dont lequel l’administrateur peut gérer
son espace, il peut donc lister, régler modifier ou supprimer

Le menu est développer en JavaScript : ce qui rend l’utilisation du menu plus fluide :

33
 4.1.3 Menu vertical :

Dans ce menu vertical on trouve une notification, la ou il y’a les messages non lu de
l’administrateur et un bouton déconnexion pour quitter la partie administrateur.

On trouve aussi un lien qui nous mènent vers la partie client.

4.1.2 Page d’accueil :

Dans l’accueil de la partie administration on trouve plusieurs options qui se base sur des tests
concernant les différentes fonctionnalités de mon application sous forme des alertes en
JavaScript, la figure suivante accorde une vision sur ces options la :

34
  Dans l’alerte en vert on trouve les commandes non réglé et un message de règlement des
commandes qui vont expirer au moins deux jours avec la date d’expiration, aussi on trouve les
commandes expiré avec l’ID de la commande.
 L’alerte en rouge nous donne le nombre des factures non régler avec la possibilité de la
régler.
 En jaune on trouve les produits dont leur stock est moins de 100 unités.
 L’alerte en bleu nous indique le dernier message reçu avec la possibilité de répondre à ce
dernier.

4.1.4 Messagerie :

L’administrateur trouve dans cette page les messages des clients, il peut même trouver aussi
les ancien messages il faut juste le préciser dans la recherche, et finalement il a le droit de
supprimer les messages ou de lui répondre.

Pour s’assurer que la suppression ne se fait pas par erreur, un message de confirmation
s’affiche afin de confirmer la suppression :

35
 Gestion dépôt:

La gestion des dépôts se fait par l’ajout, la modification ou la suppression d’un dépôt dont
chaque dépôt on trouve un numéro, le nom du dépôt son type (normal-sec-frigo) ainsi que la
quantité du dépôt, on trouve aussi une barre de recherche la ou on peut faire un trie si on a
besoin avec l’utilité de télécharger les données sous forme Excel

a- Ajouter dépôt:

Pour ajouter un dépôt, il faut entrer les informations suivantes : nom, type et la quantité.

36
 a- Modifier dépôt:

Si l’administrateur veut effectuer l’opération de la modification on clique sur l’icône de la

modification et on la transmettre a une page de modification dont on trouve les informations
désiré à modifier et voici un exemple dans la quantité de dépôt dans le dépôt DepotCANAL
FOOD

a- Supprimer dépôt:

La suppression d’un dépôt se fait par la confirmation d’un message qui s’affiche à
l’administrateur :

37
 Gestion personnels:

La gestion de personnels fait appelle à deux gestions qui se manifestent comme suivant :
gestion responsable, fournisseur et client.

Puisque ces derniers ont presque le même traitement on va se concentrer sur la gestion des
clients et on va montrer ces différentes opérations.

Gestion client:

La gestion du client est parmi les premiers point prédéfini dans le cahier de charge, c’est la
partie dominante, c’est pour cette raison là qu’on va la détailler de cette partie.

Barre de recherche

Pour faciliter le travail de l’administrateur dans la recherche de ces clients, j’ai mis une barre
qui simplifie la recherche d’un client à partir de son nom, prénom son email ou de ca ville.

Dans cette exemple on va rechercher la liste des clients dont la ville est : « Marti »

Trie :

Le tri des informations aide l’administrateur pour classifier les informations dans un tableau
de 10 lignes 25,50 et 100. Sa permet aussi de faire un trie par ordre croissant ou décroissant
ou cliquant tout simplement sur l’élément qu’on veut trier avec.

38
 Exporté les données d’une base de données vers Excel:

Afin de facilité la tache

au service clientèle qui utilise encore Excel pour manipuler ses donnée l’administrateur aura
besoin d’exporter des enregistrements vers un fichier Excel (.xls) donc on exporte ces
données enregistrées de la base de données « MYSQL », en utilisant un script en PHP pour
les enregistrer, les traiter et l’envoyée a d’autre service.

Et voici un exemple Excel des clients :

L’administrateur a la possibilité aussi de gérer le client en ajoutant, modifiant ou supprimant

un client comme il fait pour la gestion de dépôt déjà cité.

Gestion produit:

Arrivant à la gestion des produit, on trouve des catégories pour les produit qui se manifeste
dans une liste qui nous permet d’ajouter un produit ou le supprimer aussi, on n’a même la
possibilité de l’ajouter au stock.

Mon application contient des graphes, la chose qui permet d’avoir pour une vue plus cible et
plus fiable.

39
 Représentation des données des données vers Graphe:

Si l’administrateur a besoins de voir la quantité de chaque produit en stock, il n’a qu’à

visualiser les graphes qui présentent les données sous forme de Graphe pie3D en utilisant la
bibliothèque Jpgraph qui est destiné à la création des graphes.

Et voici le graphe qui montre la quantité de chaque produit en stock :

Ajouter au stock:

40
L’utilisation de ce champ permet d’ajouter une quantité à un produit au stock, l’option qui

facilite de plus en plus la gestion des produits.

Gestion des commandes:

La gestion des commandes est une partie qui pèse son poids dans mon application car il met
en évidence le règlement des commandes

Représentation des données d’une base de données vers Graphe:

Lorsque l’administrateur veut savoir le taux des commandes effectué par mois,la quantité de
chaque produit en stock, on aura besoin de présenter ces données la sous forme de
Histogramme en utilisant aussi la bibliothèque JPgraph.

41
 a- Liste Commande:

Dans cette page on trouve la liste des commande que ça soit régler ou non régler avec
l’identifiant de la commande, l’identifiant client et d’autre information.

b- Commande Non régler:

42
Le règlement des commandes se fait en appuyant sur l’icône entourer en rouge pour qui nous
dirige vers une page de règlement automatique.

Après avoir régler la commande on remarque la liste des commandes non réglé change de
statut comme si dessous :

On peut aussi envoyer un email au client concernant cette commande pour lui informer que sa
commande est prête à porter et qu’il vient avec l’identifiant sous forme de l’année de
commande et son identifient (2013/33) de commande déjà envoyer pour qu’il puisse payer sa
facture et récupérer sa commande.

43
 Gestion des factures:

La facturation ou la gestion de facture est une partie primordiale dans mon application car il
permet au client régler sa facture après avoir effectué sa commande.

Liste facture:

La liste des factures représente les différentes facture de l’administrateur, chaqu’une d’elles
est connu par un identifiant, un client et un produit commandé avec sa quantité, on trouve
aussi une case qui nous indique l’état du règlement de la facture, et enfin un case qui calcule
le montent total a payée.

Les commandes régler devient des factures non régler, et on les règle par la présence du
client et la facturation dans le service paiement.

44
 Régler facture:

Le règlement de la facture se fait en trois étapes :

Premièrement on appuyant sur le bouton Régler qui nous dirige vers une page où il ya la
facture imprimable comme deuxième processus on imprime la facture et on la donne au client
pour qu’il puisse payer dans le service de paiement, là où on lui accorde un justificatif comme
quoi la facture bien régler.

Une fois on clique sur l’icône de règlement, on trouve une page où il ya notre facture et des
boutons pour régler, annuler ou imprimer la facture

45
C’est notre facture dont on trouve tous les informations sur la commande , le nom de
l’entreprise avec le montant sans TVA et avec en DH ainsi l’espace, là ou il y’a le cachet de
l’entreprise qui confirme que le client a payé le montant prévus.

Une fois le client règles sa facture il nous reste qu’a la validée.aprée la validation le stock fait
une mise a jour automatique du produit commander .

46
On remarque un changement dans les factures non règlement ce qui confirme la validation de
notre facture.

Apres avoir vu la partie administrateur, on va entamer la partie commandes qui se fait par le
client.

Espace Client :

L’espace client de notre application représente une vitrine de nos produits où le client peut
réserver une commande à partir de la liste de produit présenté

Accueil:

La première rubrique de l’application, contient une représentation de l’entreprise, le logo de

l’entreprise en haut de la page et un formulaire de connexion destiné aux clients, sans oublier
les nouveaux clients qu’ils ont un formulaire à remplir en cliquant sur s’inscrire pour
s’authentifier.

47
On remarque un changement dans le menu principal et les informations générales du client
s’affichent a droite de la page, ca revient à l’authentification du client

Nos produits:

La page nos produits contient une gallérie en Jquery qui contient nos produits avec une petite
description de chaque produit, on peut aussi choisir les produits selon leurs catégories il faut
juste le préciser en mettant la recherche sur un produit.

Commander:

Cette rubrique permet au client d’effectuer ses commandes on choisissant un produit, on

rempli un formulaire dont on trouve auparavant le produit choisis exporter de la base donner
et d’autre information.

48
Contact:

Pour que le client puisse nous contacter pour prendre ces commandes, cette rubrique lui
permet de savoir les informations sur notre entreprise ainsi qu’un formulaire de messagerie
qui lui permet de contacter l’administrateur de l’application.

49
 Bilan et conclusion

Dans le cadre de mon stage fin d’études, je devais réaliser une application qui concrétise mes
connaissances théoriques ainsi que pratiques que j’ai acquises au cours de ma formation.

Cette application se manifeste comme un projet professionnel qui m’a poussé à affronter les
difficultés qu’un développeur dérobe dans la création de chaque partie de son application.
Tout d’abord j’ai pensé à schématiser une conception plus ou moins qui répond au cahier de
charge, ce dernier qui avait pour but une gestion de stock qui facilite la tâche pour un simple
utilisateur d’accéder a une interface plutôt une application web ainsi qu’un administrateur.

Apres avoir entamé la partie conception, j’ai pu attaquer la partie développement ou la partie
codage, cette dernière se base sur l’utilisation de plusieurs langages qui met l’application en
place.

À partir de ces éléments, j’ai essayé de créer une application réussite fonctionnelle pouvant
être utilisée par tous les utilisateurs. Certes, quelques imperfections sont encore présentes sur
l’application, mais elles n’altèrent en rien son fonctionnement global.

50
 Liste des figures 

WEBO/BIBLIOGRAPHIE

51