²

1
 CONCEPTON DE APPLICATION WEB de
gestion dépôt
salaheddine BELAID

méguini WALID

2020/2021

1 Introduction
Ces dernières années ont été marquées par l’essor phénoménal de ce média
qu’on appelle Internet, il est indéniable de constater que ce nouvel outil à
d’ores et déjà profondément modifié la manière dont nombre de gens
communiquent entre eux, l’internet a aussi renforcé la capacité des
administrations, des entreprises et des individus à échanger des informations.
C’est pourquoi les sociétés voulant être compétitives sont particulièrement en
mesure de tirer parti de la capacité qu’à Internet de diffuser rapidement,
efficacement et économiquement une information ou des documents sous une
forme électronique, il permet ainsi une prise de décision rapide, et une
actualisation rapide des informations, en particulier en situation de crise. De
plus les nouvelles technologies de la communication permettent d’établir une
relation plus étroite entre les individus et les sociétés

Cependant, l’évolution de la technologie a envahie plusieurs domaines de notre

vie quotidienne comme l’éducation, communication . . . . . . etc. Cette évolution
permet d’assister et d’aider les utilisateurs n’importe où et n’importe quand
pendant leur projets

L’application web est donc une vitrine pour les différentes sociétés à travers le
monde, il permet de promouvoir l’activité de ces sociétés en étant de ça
présence sur l’application web la société se fait de la publicité en se faisant
connaı̂tre auprès de sa future clientèle et s’assure ainsi une plus grande facilité
de prise de contact en attirant plus de client, et favorisant le dialogue avec
ceux-ci.

L’objectif de notre projet présenté dans ce rapport est la conception et la

réalisation d’une application web de gestion de depot.

Ce mémoire s’inscrit dans une démarche informatique visant à améliorer la

relation existante déjà entre depot et ses clients d’une part et depot et ses

2
employiers d’autre part à travers la mise en place de ce application mobile, et
l’élaboration d’un outil de gestion.

En conséquence, notre mémoire a été organisée comme suit :

Dans le premier chapitre, on présente la technologie qu’on a utiliser . Le

deuxième chapitre, contient la conception du prototype et le troisième
chapitre, a comme but de montrer les différentes étapes de la réalisation de ce
prototype. Et en terminera par une conclusion, on fait appelle au feedback des
gens qui testé notre application.

3
 À propos de Système Gestion de Dépôt
C’est quoi un dépôt ? Un entrepôt est un bâtiment logistique destiné au
stockage et à la distribution de marchandise gérer par un gérant , la
réception de la commande s’effectuée par le préparateur de commande
qui réceptionne la marchandise et il fait les vérifications nécessaires avant
de la stocker dans un ordre spécifique Une fois une commande passée par
le client le préparateur de commande reçois une notification pour qu’il
prépare la commande pour le livreur qu’il vas la livrer.

Caractéristiques principales d’un Système gestion

:
• C’est un Système principalement numérique ;

• Il est constitué de logiciel et de matériel ;

• Il dispose des ressources limitées ;
• Il peut être ou non autonome ;
• Il peut être ou non, ouvert au monde extérieur pour des mises à jour ou
pour communiquer ;
• Il doit généralement être sécurisé ;
• Etc. . . ..

Les avantages et les inconvénients de système de

gestion de depot :
Les avantages :
Connaitre les besoins de chaque zone Connaitr le trading des produit Connaitre
les besoins des produit dans chaque saison Facile de vendre les produit Facilité
des demande sur les produit Facile a connaitre les dettes parmi les client de
ce depot Tout les information son sécuriser Alarme sur les produit qui sont
exprimer ou bientot

Les inconvénients :
• Obeligation de identifiant
• Le cas de mots pass oublié

4
 • Avec l’impossibilité de vérifier la fiabilité réelle

Système de gestion de depot : ce système se compose d’une platforme web

utilisation directe avec le gérant et les autres utilisAteur directement par
les fournisseur (vendeur) pour se realiser on utilise : ce système se com-
pose d’une platforme web utilisation directe avec le gérant et les autres
utilisAteur directement par les fournisseur (vendeur) pour se realiser on
utilise :

Les technologies assistant

information sur site web : Le développement électronique actuel a contribué
au développement du journalisme électronique et a conduit à un déclin.
dans la presse écrite, et cette affaire a créé de nombreuses différences en-
tre les deux types de culture, comme le financement. contenu et vitesse
d’accès le contenu électronique est riche en informations et existe sur les
méthodes de publication avec différentes techniques qui peuvent être in-
corporées sur les sites Web. Comme les vidéos, l’audio, les images et les
textes, comme la presse imprimée en manque, il est limité aux images et
aux textes. Quant à la vitesse d’accès, la presse électronique, une fois qu’il
y a Internet, , vous pouvez facilement voir toutes les nouvelles du monde
de n’importe où, que ce soit à la maison ou sur le lieu de travail et à tout
moment que vous voulez en plus De moi, la presse écrite a besoin d’un
coût quotidien élevé, contrairement à la presse imprimée, car elle a besoin
d’Internet et de ressources seulement, et la plupart de ces ressources, nous
les apportons via le flux RSS Visual Studio Code : est développé en open
source par Microsoft Offre aux développeurs le nécessaire (coloration syn-
taxique, IntelliSense, débogage) pour créer des applications en utilisant
l’OS de leur choix (Windows, Linux ou Mac). 30 • Quel que soit le lan-
gage VS code permet de développer soit via les fonctionnalités par défaut
ou en ajoutant des extensions disponibles selon les besoins de chacun
HTML 5 : Développé pour la première fois par Tim Berners-Lee en 1990,
HTML est l’abréviation de Hypertext Markup Language. Html est utilisé
pour créer des documents électroniques (appelés pages) qui sont affichés
sur le World Wide Web. Chaque page contient une série de connexions à
d’autres pages appelées hyperliens. Chaque page Web que vous voyez sur
Internet est écrite à l’aide d’une version de code HTML ou d’une autre.
Le code HTML garantit le formatage approprié du texte et des images
pour votre navigateur Internet. Sans HTML, un navigateur ne saurait pas
comment afficher du texte sous forme d’éléments ou charger des images
ou d’autres éléments. HTML fournit également une structure de base
de la page, sur laquelle les feuilles de style en cascade sont superposées
pour modifier son apparence. On pourrait considérer HTML comme les
os (structure) d’une page Web, et CSS comme son habillage (apparence).

5
CSS 3 : Le terme CSS est l’acronyme anglais de Cascading Style Sheets qui
peut se traduire par ”feuilles de style en cascade”. CSS aide les développeurs
Web à créer une apparence uniforme sur plusieurs pages d’un site Web. Au
lieu de définir le style de chaque tableau et de chaque bloc de texte dans
le code HTML d’une page, les styles couramment utilisés ne doivent être
définis qu’une seule fois dans un document CSS. Une fois que le style est
défini dans la feuille de style en cascade, il peut être utilisé par n’importe
quelle page qui fait référence au fichier CSS. De plus, CSS facilite la modifi-
cation des styles sur plusieurs pages à la fois. Par exemple, un développeur
Web peut souhaiter augmenter la taille de texte par défaut de 10pt à 12pt
pour cinquante pages d’un site Web. Si les pages font toutes référence à
la même feuille de style, la taille du texte doit uniquement être modifiée
sur la feuille de style et toutes les pages afficheront le texte plus grand.
Le css est comprennent du code qui permet de gérer le design d’une page
en HTML.
JavaScript : JavaScript is a programming language commonly used in web
development. It was originally developed by Netscape as a means to add
dynamic and interactive elements to websites. While JavaScript is in-
fluenced by Java, the syntax is more similar to C and is based on EC-
MAScript, a scripting language developed by Sun Microsystems.
JavaScript is a client-side scripting language, which means the source code
is processed by the client’s web browser rather than on the web server.
This means JavaScript functions can run after a webpage has loaded with-
out communicating with the server. For example, a JavaScript function
may check a web form before it is submitted to make sure all the required
fields have been filled out. The JavaScript code can produce an error
message before any information is actually transmitted to the server.
Like server-side scripting languages, such as PHP and ASP, JavaScript
code can be inserted anywhere within the HTML of a webpage. How-
ever, only the output of server-side code is displayed in the HTML, while
JavaScript code remains fully visible in the source of the webpage. It can
also be referenced in a separate .JS file, which may also be viewed in a
browser.
Below is an example of a basic JavaScript function that adds two numbers.
The function is called with the parameters 7 and 11. If the code below
were included in the HTML of a webpage, it would display the text ”18”
in an alert box.
Bootstrap : Kit CSS créé par les développeurs de Twitter, il permet de con-
struire rapidement et facilement des sites web esthétiques et responsives.
Bootstrap offre aussi desplugins jQuery de qualité pour enrichir les pages
du site
ReactJs : ReactJS est une bibliothèque JavaScript déclarative, efficace et flex-
ible pour la création de composants d’interface utilisateur réutilisables. Il

6
s’agit d’une bibliothèque frontale open source basée sur des composants,
responsable uniquement de la couche d’affichage de l’application. Il a été
créé par Jordan Walke, qui était ingénieur logiciel chez Facebook. Il a été
initialement développé et maintenu par Facebook et a ensuite été utilisé
dans ses produits comme WhatsApp Instagram. Facebook a développé
ReactJS en 2011 dans sa section de fil d’actualité, mais il a été rendu
public au mois de mai 2013.
Aujourd’hui, la plupart des sites Web sont construits à l’aide de l’architecture
MVC (model view controller). Dans l’architecture MVC, React est le V
qui signifie vue, tandis que l’architecture est fournie par redux ou flux.
Une application ReactJS est composée de plusieurs composants, chaque
composant responsable de la sortie d’un petit morceau de code HTML
réutilisable. Les composants sont au cœur de toutes les applications React.
Ces composants peuvent être imbriqués avec d’autres composants pour
permettre à des applications complexes d’être construites à l’est-il de blocs
de construction simples. ReactJS utilise un mécanisme basé sur le DOM
virtuel pour remplir les données dans le DOM HTML. Le DOM virtuel
fonctionne rapidement car il ne modifie que des éléments DOM individuels
au lieu de recharger le DOM complet à chaque fois.
Pour créer l’application React, nous écrivons des composants React qui
correspondent à divers éléments. Nous organisons ces composants à l’intérieur
de composants de niveau supérieur qui définissent la structure de l’application.
Par exemple, nous prenons un formulaire qui se compose de nombreux
éléments tels que des champs de saisie, des étiquettes ou des boutons.
Nous pouvons écrire chaque élément du formulaire en tant que composants
React, puis nous le combinons dans un composant de niveau supérieur,
c’est-à-dire le composant de formulaire lui-même. Les composants du for-
mulaire spécifient la structure du formulaire ainsi que les éléments qu’il
contient. ReactJS est une bibliothèque JavaScript déclarative, efficace et
flexible pour la création de composants d’interface utilisateur réutilisables.
Il s’agit d’une bibliothèque frontale open source basée sur des composants,
responsable uniquement de la couche d’affichage de l’application. Il a été
créé par Jordan Walke, qui était ingénieur logiciel chez Facebook. Il a été
initialement développé et maintenu par Facebook et a ensuite été utilisé
dans ses produits comme WhatsApp Instagram. Facebook a développé
ReactJS en 2011 dans sa section de fil d’actualité, mais il a été rendu
public au mois de mai 2013.
Aujourd’hui, la plupart des sites Web sont construits à l’aide de l’architecture
MVC (model view controller). Dans l’architecture MVC, React est le V
qui signifie vue, tandis que l’architecture est fournie par redux ou flux.
Une application ReactJS est composée de plusieurs composants, chaque
composant responsable de la sortie d’un petit morceau de code HTML
réutilisable. Les composants sont au cœur de toutes les applications React.
Ces composants peuvent être imbriqués avec d’autres composants pour

7
 permettre à des applications complexes d’être construites à l’est-il de blocs
de construction simples. ReactJS utilise un mécanisme basé sur le DOM
virtuel pour remplir les données dans le DOM HTML. Le DOM virtuel
fonctionne rapidement car il ne modifie que des éléments DOM individuels
au lieu de recharger le DOM complet à chaque fois.
Pour créer l’application React, nous écrivons des composants React qui
correspondent à divers éléments. Nous organisons ces composants à l’intérieur
de composants de niveau supérieur qui définissent la structure de l’application.
Par exemple, nous prenons un formulaire qui se compose de nombreux
éléments tels que des champs de saisie, des étiquettes ou des boutons.
Nous pouvons écrire chaque élément du formulaire en tant que composants
React, puis nous le combinons dans un composant de niveau supérieur,
c’est-à-dire le composant de formulaire lui-même. Les composants du for-
mulaire spécifient la structure du formulaire ainsi que les éléments qu’il
contient.
HTML: Hype.... ExpressJs: Express.js or simply Express, is a web application
framework for Node.js, released as free and opensource software under the
MIT License. It is designed for building web applications and APIs. It
has been called the de facto standard server framework for Node.js
HTML: Hype.... MongoDB : est un système de gestion de base de données ori-
enté documents, MongoDB est développé depuis 2007 par MongoDB, Mon-
goDB permet de manipuler des objets structurés au format BSON (
JSON binaire), répartissable sur un nombre quelconque d’ordinateurs et
ne nécessitant pas de schéma prédéfini des données. Il est écrit en C++.
Le serveur et les outils sont distribués sous licence SSPL, les pilotes
sous licence Apache et la documentation sous licence Creative Com-
mons 4. Il fait partie de la mouvance NoSQL.
Node Js : est une plateforme logicielle libre en JavaScript, orientée vers
les applications réseau, Node.js a été créé par Ryan Dahl en 2009. Son
développement et sa maintenance sont effectués par l’entreprise Joyent
, Parmi les modules natifs de Node.js, on retrouve http qui permet le
développement de serveur HTTP. Il est donc possible de se passer de
serveurs web tels que Nginx ou Apache lors du déploiement de sites et
d’applications web développés avec Node.js, Node.js est utilisé notam-
ment comme plateforme de serveur Web, elle est utilisée par : Microsoft
, LinkedIn , Yahoo!, PayPal etc. . .
JQuery : Depuis sa création en 2006, et particulier deplus en plus a cause
de l’ augmentation de la complexité des interfaces web, jQuery a connu
un grand succès auprès des développeurs Web et son apprentissage est
maintenant l’ un des les fondations de web technologie de formation.Il est
encore le plus largement utilisé front-end bibliothèque dans le monde
MYSQL: Le terme MySQL, pour My Structured Query Language, désigne un
serveur de base de données distribué sous licence libre GNU (General Pub-

8
 lic License). Il est, la plupart du temps, intégré dans la suite de logiciels
LAMP qui comprend un système d’exploitation (Linux), un serveur web
(Apache) et un langage de script (PHP). Créé en 1995, le serveur MySQL
peut être utilisé sur de nombreux systèmes d’exploitation (Windows, Mac
OS, etc.). Il supporte les langages informatiques SQL et SQL/PSM. Dans
la pratique, le serveur MySQL peut se résumer à un lieu de stockage et
d’enregistrement des données, que celles-ci soient ou non cryptées. Il est
alors ensuite possible, via une requête SQL, d’aller récupérer des infor-
mations sur ce serveur très rapidement. C’est le cas, par exemple, avec
les mots de passe enregistrés sur des sites web. Si le serveur détecte la
présence du mot de passe entré dans un formulaire dans ses données, il
autorise la connexion. S’il ne trouve pas le mot de passe, la connexion
sera refusée.
conclusion : tantque c’est uneplatforme de maison relation qui regoupe tous
les utilasateurs ce qui nous a conduit à utilises les nouvelles techniques
par triter cette application par facilites les services .