REPUBLIQUE ALGERIENNE

DEMOCRATIQUE ET POPULAIRE
MINISTERE DE L’ENSEIGNEMENT SUPERIEUR
ET DE LA RECHERCHE SCIENTIFIQUE

UNIVERSITE MOHAMED DOMAINE : Informatique

BOUDIAF - M’SILA FILIERE : Informatique
OPTION : ISIL

Projet de Fin d’Etudes

*****

Conception et réalisation d'une

application web point de vente

Préparé par :
ATTAHIR KORICHI
OUSSAMA BENTAHER
TOUFIK SAKER

Sous la direction de :

MOHAMED KAMEL

Année universitaire 2020-2021

 Dédicaces

A nos chers parents

Pour leurs sacrifices, leurs prières et leurs soutiens.

A nos amis et nos collègues

Sans qui la vie me semblerai bien fade, je vous souhaite la prospérité et le succès.

A tous nos enseignants avec notre considération

Qui n’ont épargné aucun effort pour nous offrir un bon enseignement.

Et à tous ceux qui nous ont assistés, dans la réalisation et le bon déroulement de ce
travail

2
 Remerciements

C’est avec plaisir que nous réservons ces quelques lignes en signe
de gratitude et de profonde reconnaissance à tous ceux qui, de
près ou de loin, ont contribué à l’aboutissement de ce travail.
Nos remerciements sont adressés à nos enseignants pour
leur contribution à notre formation de licence et nous remercions
particulièrement notre encadreur Mr. Mohamed Kamel pour ses
recommandations précieuses et leur disponibilité.
Enfin nous tenons à remercier les membres du jury pour avoir
assister à cette soutenance.

3
 Table des matières

Dédicaces -2-
Remerciements -3-
Table des matières -4-
Introduction générale - 6 -
Chapitre 1. Etude préalable -7-
1.1 Introduction :................................................................................................- 7 -
1.2 La description du contexte du projet :..........................................................- 7 -
1.2.1 Point de vente (POS) :.............................................................................- 7 -
1.2.2 Les avantages d'un système de point de vente :.......................................- 7 -
1.3 La problématique:.........................................................................................- 8 -
1.4 La solution:...................................................................................................- 8 -
1.5 Conclusion :..................................................................................................- 8 -
Chapitre 2. Analyse et conception -9-
2.1 Introduction :................................................................................................- 9 -
2.2 Analyse des processus système :..................................................................- 9 -
2.3 Présentation du langage de modélisation UML:...........................................- 9 -
2.3.1 Définition de l'UML:...............................................................................- 9 -
2.3.2 Spécification fonctionnelle:.....................................................................- 9 -
2.3.3 Modélisation de la spécification :..........................................................- 11 -
2.4 Le diagramme des cas d'utilisations:..........................................................- 11 -
2.4.1 Définition du diagramme des cas d’utilisation:.....................................- 11 -
2.5 Le diagramme des séquences :...................................................................- 12 -
2.5.1 Définition du diagramme de séquences :...............................................- 12 -
2.5.2 Diagramme de séquence s'authentifier :................................................- 12 -
2.5.3 Diagramme de séquence de l’utilisateur :..............................................- 13 -
2.5.4 Diagramme de séquence de produit :.....................................................- 14 -
2.6 Conception de données :.............................................................................- 15 -
2.6.1 Dictionnaire de Données :......................................................................- 16 -
2.7 Le diagramme des classes :........................................................................- 17 -
2.7.1 Définition du diagramme de classes :....................................................- 17 -
2.8 Conclusion :................................................................................................- 17 -
Chapitre 3. Réalisation - 18 -
3.1 Introduction :..............................................................................................- 18 -

4
 3.2 Environnement et outils de développement de notre application :.............- 18 -
3.2.1 HTML (HyperText Markup Language) :...............................................- 18 -
3.2.2 CSS (CASCADING STYLE SHEETS):...............................................- 18 -
3.2.3 JAVASCRIPT :......................................................................................- 18 -
3.2.4 PhpMyAdmin :......................................................................................- 18 -
3.2.5 MySQL :................................................................................................- 19 -
3.2.6 jQuery :..................................................................................................- 19 -
3.2.7 XAMPP :................................................................................................- 19 -
3.3 Présentation de quelques interfaces de l'application :................................- 19 -
3.3.1 Page de connexion :...............................................................................- 21 -
3.3.2 Dashboard :............................................................................................- 22 -
3.3.3 Page des utilisateurs :.............................................................................- 22 -
3.3.4 Page ajout un utilisateur :.......................................................................- 23 -
3.3.5 Page modifier un utilisateur :.................................................................- 23 -
3.3.6 Page de confirmer la modification d’un utilisateur :.............................- 24 -
3.3.7 Page des produits :.................................................................................- 24 -
3.3.8 Page ajout un produits :.........................................................................- 25 -
3.3.9 Page historique des ventes :...................................................................- 25 -
3.3.8 Bare de navigation :...............................................................................- 25 -
3.4 Conclusion :................................................................................................- 26 -
Conclusion et perspectives………………………………………………………….- 27 -
Bibliographie ……………………………………………………………………..- 28 -
Resumé……..……………………………………………………………………..- 29 -

5
 Liste des figures

YFig.2.1 : Diagramme de cas d’utilisation globale …………………………….-11-

Fig.2.2 : Diagramme séquence systéme lie au cas d’utilisation ‘s’authentifier’ ….-12-
Fig.2.3 : Diagramme séquence systéme lie au cas d’utilisation ‘utilisateur’ ……..-13-
Fig.2.4 : Diagramme séquence systéme lie au cas d’utilisation ‘produit’ ……..….-14-
Fig.3 : Page de connexion…………………………………………………..……..-20-
Fig.4 : Dashboard :……………………………………………………………..….-22-
Fig.5 : Page des utilisateurs :………………………………………………………-22-
Fig.6 : Page ajout un utilisateur :…………………………………………………..-23-
Fig.7 : Page modifier un utilisateur :…………………………………… ……..….-23-
Fig.8 : Page de confirmer la modification d’un utilisateur : ………………………-24-
Fig.9 : Page des produits :……..…………………………………………………..-24-
Fig.10 : Page ajout un produits :…..…………………………………… ……..….-25-
Fig.11 : Page historique des ventes :………………………………………………-25-
Fig.12 : Bare de navigation :………………………………………………………-25-
Fig.2.6 : Diagramme de classes……………………………………………………-29-

6
 Introduction générale

Actuellement, le monde connait une avance technologique considérable dans tous

les secteurs et cela à l’aide de l’informatique, qui joue un rôle important dans le
développement de nombreuses entreprises et organisations.
Avant l’invention de l’ordinateur, nous enregistrons toutes les informations
manuellement sur des supports en papier. Ce qui engendrait beaucoup de problèmes tel que la
perte de temps considérable dans la recherche de ces informations ou la dégradation de ces
dernières.
Gérer votre propre petite entreprise ou votre propre magasin est un processus qui
nécessite de nombreux outils et processus différents. En plus d'une excellente idée et d'un
dévouement à votre niche, vous aurez également besoin d'une plate-forme à travers laquelle
vous pourrez gérer les transactions.
En utilisant une application de point de vente, nous pouvons tirer parti de la valeur
ajoutée qui peut être administrée sous la forme d'une meilleure qualité de service, d'une
meilleure image commerciale, d'un avantage concurrentiel et de processus de contrôle et de
prise de décision conv.
L'utilisation de la technologie peut être une solution dans l'enregistrement et le
traitement des transactions, elle est donc effectuée par un système informatisé, car elle
accélérera le processus de transaction et donnera des résultats précis afin d'être plus efficace et
efficient. La transaction informatisée offre une commodité de travail et un résultat définitif
pour l'acheteur ou le client.
C’est dans ce contexte que se situe le présent rapport qui décrit les différentes étapes du
projet que nous avons effectué pour la réalisation d’un site web dynamique point de vente
(POS).
Le présent rapport est organisé en trois chapitres. Le premier chapitre est réservé à
l’analyse et la présentation du projet en précisant le cadre général du travail, la problématique
et la solution à proposer.
Le deuxième chapitre est réservé pour la conception de l’application en se basant sur le
langage de modélisation Unified Modeling Language (UML).
Le troisième chapitre seraconsacré pour la description de laphase de l’implémentation
de l’application en spécifiant les outils et les logiciels utilisés au cours de cette phase avant de
projeter quelques captures écran de l’application finale, et nous clôturons ce rapport par une
conclusion et perspective.

7
 Chapitre 1. Etude préalable

1.1 Introduction :
Dans ce chapitre, nous décrirons le contexte du projet, nous poserons la problématique
et nous exposerons les objectifs de notre travaille.

1.2 La description du contexte du projet :

1.2.1 Point de vente (POS) :
Un système de point de vente (POS) permet à vos clients de payer les produits et
services qu'ils achètent dans votre magasin. Il est généralement composé de composants
matériels et logiciels qui fonctionnent ensemble pour rationaliser vos processus de paiement.
Considérez un système de point de vente comme un hub où vous fusionnez tout ce qui
concerne le paiement dans votre entreprise, y compris l'inventaire (les produits), les ventes et
la gestion des employées. Il remplit les fonctions d'une caisse enregistreuse de base,
notamment la réalisation de transactions, la création de reçus et le suivi des ventes. Mais vous
pouvez également compter sur un système de point de vente pour vous aider dans des tâches
plus avancées, telles que la gestion des stocks, les communications avec les fournisseurs et la
gestion des coûts de main-d'œuvre des employés. Si vous êtes une entreprise en contact direct
avec les clients avec des stocks à rotation rapide, un système de point de vente est une
nécessité sur le marché d'aujourd'hui, surtout si vous êtes un détaillant ou un restaurant.
1.2.2 Les avantages d'un système de point de vente :
Un système de point de vente, ou logiciel de point de vente, garantit que votre client
peut effectuer le paiement des services et produits qu'il obtient dans votre magasin. Chaque
fois qu'un client achète quelque chose dans votre magasin, il fait partie d'une transaction PDV.
Le point de vente est un élément essentiel de votre entreprise, où tout, comme les
ventes, la gestion des clients et les outils d'inventaire, se conjugue. Il y a de nombreux
avantages à avoir un point de vente pour votre entreprise, notamment:
1. Meilleure efficacité: Lorsque vos caissiers disposent des bons outils pour le
traitement des paiements et que vous disposez du bon logiciel pour gérer votre
inventaire, les choses se passent beaucoup plus facilement.
2. De meilleures informations: La plupart des solutions de point de vente vous donnent
des rapports de vente précieux et des informations sur vos ventes.
3. Gestion de l'inventaire: Contrairement aux logiciels de comptabilité et aux caisses
enregistreuses, votre système de point de vente est livré avec des outils qui vous
indiquent exactement combien de stock vous avez à un moment donné. Cela signifie
que vous ne manquez jamais d'opportunités de vente.
4. Gestion des employés: De nombreux systèmes de points de vente garantissent que
vous pouvez suivre des éléments tels que les horaires des employés et le nombre de
ventes réalisées par les membres de votre équipe. Cela aide à obtenir de meilleurs
résultats pour votre entreprise.

8
 5. Service rapide:La vitesse et la commodité sont plus que jamais attendues par les
consommateurs. Un système de point de vente peut vous permettre de le leur donner
en facilitant des transactions rapides. C'est une excellente alternative au service
manuel de vos clients.
6. Rapidité des paiements:Un point de vente aide à faire les paiements de façon plus
rapide. L’employé sélectionne les produits que le client veut acheter et le système
calcule automatiquement le montant de la transaction.
7. Meilleure sécurité :La sécurité des données d’une entreprise est très importante. Il
faut s’assurer que l’accès aux données soit possible seulement pour les utilisateurs de
l’entreprise. Avec un système de point de vente, la sécurité est accrue.

1.3 La problématique:
Dans une pizzeria il y a beaucoup de problèmes en termes d'informations sur les
produits, les ventes, les employés et faire plusieurs erreurs de calcul lors de la vente, nous
voulons enregistrer correctement les transactions qui ont lieu dans le cadre de son activité
quotidienne et gagner du temps et de l'énergie.

1.4 Les solutions:

- L’idée est de développer un site web dynamique point de vente pour une pizzeria afin
de réaliser un gain de temps considérable et d'éviter certaines erreurs de calculet
d’enregistrement des informations.
- Un site web dynamique (POS) facilite le suivi des produits que votre magasin possède.
Il permet de gérer votre inventaire en temps réel et de savoir la quantité d’actifs que vous
possédez sur une période donnée.
- Il suive les ventes.
- Il y a une gestion des employées (ses informations).
En général, une application web de point de vente vous aide à améliorer les opérations
pour les utilisateurs. Cela inclut la réduction du temps d’attente, la rapidité à scanner les
items, la rapidité des paiements, etc.

1.5 Conclusion :
Après avoir présenté le cadre général de notre projet, et énoncer la problématique ainsi
que le travail demandé, nous allons dans ce qui suit entamer une étude de l’existant pour
mieux comprendre le cadre et l’environnement du projet.

9
 Chapitre 2. Analyse et conception

2.1 Introduction :
Dans ce chapitre, nous décrirons les méthodes de conception et à l’identification des
besoins et puis nous passerons à la présentation des diagrammes des cas d'utilisations et de
séquences et nous terminerons par la description des classes participantes dans le diagramme
des classes de notre application.

2.2 Analyse des processus système :

Après avoir pris connaissance de la théorie et des études précédentes de cette recherche,
il est possible que cela se produise analyser les requêtes système et la science système (UML)
et montrer les opérations qu'elles effectuent chacune de adminet de utilisateur.
Le langage de modélisation standard représente un ensemble des meilleures
applications d'ingénierie éprouvées son succès dans la mondialisation de système énorme et
complexes.
UML fait partie important pour le processus de développement et de développement
d'objets orienté logiciel le logiciel est un logiciel de développement. Le langage de
modélisation standard utilise des symboles principalement graphique pour exprimer la façon
dont les projets logiciels sont conçus et utilisent des icônes également graphique pour
exprimer les différents modèles de travail de programmation.

2.3 Présentation du langage de modélisation UML:

2.3.1 Définition de l'UML:
UML (en anglais « Unified Modeling Language » et en français « langage de
modélisation unifié ») est un langage de modélisation graphique qui comprend un vocabulaire
et un ensemble de règles centrées sur la représentation conceptuelle et physique d’un système
logiciel.
Le modèle conceptuel d’UML comprend les notions de base génériques du langage. Il définit
trois sortes de briques de base :
• Les éléments, qui sont les abstractions essentielles à un modèle et qui sont les
éléments structurels (classe, interface,…), les éléments comportementaux (interaction,
automate à états finis), les éléments de regroupement (package) et les éléments d’annotation
(note).
• Les relations, qui constituent des liens entre ces éléments et qui sont la dépendance,
l’association, la généralisation et la réalisation.
• Les diagrammes sont des représentations graphiques, qui s’intéressent à un aspect
précis du modèle et qui regroupent des éléments et des liens au sein de divers ensembles et
qui sont les diagrammes statiques et les diagrammes dynamiques.
• Donc l’UML permet de définir et de visualiser un modèle, à l’aide de diagrammes.
2.3.2 Spécification fonctionnelle:
Les acteurs du système sont l’administrateur qui est une personne qui surveille et gère les
données du site (données sur les produits, sur les commandes (sales), sur les employée),
L’utilisateur il peut juste consulter Dashboard. Il peut faire une vente (une commande
10
declient). Les fonctionnalités de l’application sont symbolisées par « F1, F2,… », les sous
fonctionnalités par « F1.1, F1.2,… » Et « F1.1.1, F1.1.2,… ».
2.3.2.1 Les fonctionnalités de back-office
Les actions effectuées par l’administrateur sont :
F1-S’authentifier: chaque administrateur doit avoir un login et un mot de passe, suite à son
authentification, il sera capable de gérer tous les paramètres relatifs au fonctionnement du
site.
F2 : Gérer le back office :
F2.1-Gérer le catalogue : un catalogue est un support de publicité directe. C’est un recueil
illustré, présentant les différents produits distribués par l'entreprise, en indiquant leurs
caractéristiques.
F2.1.1-Ajouter un produit : un produit est caractérisé par son identifiant, nom, un texte
descriptif (description), son prix, l’identifiant de la catégorie à laquelle il appartient et sa
photo. Un produit est ajouté lorsqu’il est plus vendu ou en promotion.
F2.1.2-Modifier un produit : revient à modifier une ou des caractéristiques d’un produit, par
exemple modifier nom, son prix, son texte descriptif, sa photo.
F2.1.2-supprimer un produit : revient à supprimer une ou des caractéristiques d’un produit,
par exemple supprimer nom, son prix, son texte descriptif, sa photo.

F2.2-gérer les produits : un produit est caractérisé par : son identifiant, nom, un texte
descriptif (description), son prix, l’identifiant de la catégorie à quelle il appartient et sa photo.

F2.3-Gérer les utilisateurs : un utilisateur caractérisé par : son identifiant, user Name, mot
de passe, full Name, email, registre date.
F2.3.1-Ajouter un utilisateur: revient à ajouter un nouvel utilisateur à notre base.
F2.3.2-Modifier un utilisateur : il s’agit de modifier les informations de l’utilisateur.
F2.3.3- Supprimer un utilisateur: supprimer totalement un utilisateur de la base.

F2.4-Gérer les commandes (sales) : une commande est caractérisée par son identifiant, sa
date, nom de l’utilisateur (employée), Le produit qu'il a vendu, et le total.
F2.4.1-afficher les ventes : l'interface de gestion des commandes permet de suivre la liste des
commandes en cours. Chaque commande est affichée avec son montant total, numéro
commande, date de commande.
2.3.2.2 Les fonctionnalités du front-office :
Les actions que peut faire un utilisateur sont les suivantes :
F1-Consulter tableau de bord: l’utilisateur consulte les caractéristiques des produits se
trouvant dans les catégories.
F2-S’authentifier: l’utilisateur insère son login et son mot de passe, c’est la preuve que cette
personne est bien celle qu’elle prétend l’être et pouvoir gérer ses achats.
F3-Gérer les achats :
F3.1-Ajouter un produit dans le panier: l’utilisateur peut acheter ce produit alors
utilisateur ajoute tout d’abord à son panier ainsi que la quantité qu’il veut commander. Le
panier indique les différents produits que le client a choisis.
F3.2-supprimer un produit du panier: l’utilisateur a la possibilité de supprimer un produit
du panier avant l’opération de paiement.
F3.3-Annuler une commande : après l’insertion des coordonnées de paiement, dans l’étape
précédente, l’utilisateur aura la possibilité d’annuler sa commande.

11
F3.4-charge : après l’ajout d’un produit ou des produits au panier, pour passer la commande
d’un client l’utilisateur clique charge pour ajouter à la liste des achats.
2.3.3 Modélisation de la spécification :
2.3.3.1 Les acteurs:
Un acteur est un élément qui interagit avec le système d’information, il n’est pas forcément un
être humain. Il est considéré comme une unité active, intervenant dans le fonctionnement du
système opérant, stimulé par des flux qu’il les transforme et les renvoie.
Les acteurs principaux de l’application sont l’administrateur et l’utilisateur.
Pour bien présenter l’interactivité des fonctionnalités décrites précédemment entre les acteurs
et le système et entre acteurs, nous devrons représenter les diagrammes de cas d’utilisation et
les diagrammes de séquences.

2.4 Le diagramme des cas d'utilisations:

2.4.1 Définition du diagramme des cas d’utilisation:
Le diagramme de cas d'utilisation permet de décrire l'interaction entre le système et un acteur
(utilisateur de système). C'est un moyen de recueillir et de décrire les besoins des acteurs du
système. C'est une représentation des fonctionnalités du système suivant le point de vue de
l'utilisateur. C'est un diagramme qui sert à modéliser des aspects statiques de système, il
permet de modéliser le comportement d'un système ou d'une classe.

Figur
e 2.1 - Diagramme des cas d'utilisation globale

12
2.5 Le diagramme des séquences :
2.5.1 Définition du diagramme de séquences :
Le diagramme de séquence représente des échanges de messages entre objet mais avec
une meilleure visualisation de la séquence des messages grâce à une lecture simple et claire
mettant en évidence la notion de temps. Il permet de représenter des collaborations entre
objets selon un point de vue temporel, on y met l’accent sur la chronologie des envois de
messages.
2.5.2 Diagramme de séquence s'authentifier :

Figure 2.2 - Diagramme séquence système lie au cas d'utilisation "s'authentifier"

13
2.5.3 Diagramme de séquence de l’utilisateur :

Figure 2.3 - Diagramme séquence système lié au cas d'utilisation "utilisateur"

14
2.5.4 Diagramme de séquence de produit:

Figure 2.4 - Diagramme séquence système lié au cas d'utilisation "produit"

15
2.6 Conception de données :
Dans cette partie nous allons représenter le dictionnaire de données qui regroupe les
propriétés des tables de la base de données de l’application à développer.
2.6.1 Dictionnaire de Données :
Un ensemble de propriétés a été recensé depuis l’analyse et la spécification. Dans ce qui
suit, nous allons présenter le dictionnaire de données qui facilitera par la suite la définition des
entités de système. A partir des tableaux présentés, nous allons justifier le choix du type et de
la taille de différentes propriétés des entités spécifiées. Chaque entité de notre site sera
caractérisée un code pour désigner une caractéristique de cette entité, un libellé pour décrire le
code, un type et une taille pour désigner le type et la taille de chaque caractéristique de
l’entité.
Nous allons commencer par les principaux acteurs de notre système qui est user (admin,
utilisateur), qui sont reconnus par identifiant ou bien groupe ID(if id=0 alors c'est l'admin
sinon id=1 alors c'est l'utilisateur).
code Libellé Type Taille
User_ID L’identifiant de user Entier 10
Username Le Nom de user Chaine de caractères 20
password Le mot de passe de user Chaine de caractères 20
Email L’adresse mail de user Chaine de caractères 20
FullName Le nom complet de user Chaine de caractères 20
Date La date d’ajout Date
GroupeId Groupe de identifiant (0 Booléen
ou 1)
Tab. 1: description de la table de user
Un produit est caractérisé par identifiant, son nom, l'identifiant de catégorie à laquelle
appartient, une photo, un prix et la date de l'ajout. Chaque produit ajouté doit figurer dans la
catégorie spécifique.
code Libellé Type Taille
Item_ID L’identifiant de produit Entier 10
Name Le Nom de produit Chaine de caractères 20
Price Le Prix de produit Réel 12
Add_Date La date d’ajout Date
Image L’image de produit Chaine de caractères 10
Cat_ID L’identifiant de catégories Entier 20
Tab. 2: description de la table de produit

Chaque produit ajouté doit figurer dans la catégorie spécifique, une catégorie doit avoir un
nom significatif de type chaine de caractères.
code Libellé Type Taille
ID L’identifiant de Entier 10
catégories

16
 Name Le Nom de Chaine de caractères 20
catégories
Product_ID L’identifiant de Entier 10
produit
Tab. 4: description de la table de catégories des produits

Après avoir vu les produit, l'utilisateur décide de passer la commande d’un client alors il
ajoute produit au panier, puis l’utilisateur clique sur charge pour ajouter à la liste des achats.
code Libellé Type Taille
SalesID L’identifiant de vente Entier 10
employeename Le Nom d’utilisateur Chaine de caractères 20
DateOfSales La date de vente Date
Products Les produits qui sont Chaine de caractères 20
choisi
Total Le montant total à Réel 12
payer
Tab. 3: description de la table des commandes (les vents)

2.7 Le diagramme des classes :

Un diagramme des classes décrit le type des objets ou données du système ainsi que les
déférentes formes de relations statiques qui relient entre eux.
2.7.1 Définition du diagramme de classes :
Le diagramme des classes d’UML permet de saisir la structure statique d’un système en
montrant les objets dans le système, les relations entre les objets, les attributs et les opérations
qui caractérisent chaque classe d’objets. C’est le plus important des modèles d’UML.

17
 Figure 2.6 - Diagramme des classes

2.8 Conclusion :
Dans ce chapitre, nous nous sommes intéressé à analyser les besoins de notre
application et a spécifié er les diffèrent cas d'utilisations en abordant le diagramme des cas
d'utilisations, les diagrammes des séquences et le diagramme de classe.
Dans ce qui suit nous allons entamer pu avoir une idée bien claire sur comment va être
notre applications web, et c'est ce qui nous a menée à mieux comprendre ses fonctionnalités.

18
 Chapitre 3. Réalisation

3.1 Introduction :
Après avoir vu la conception détaillée de système a réalisé ainsi que les principaux
modules le constituant, on aborde dans le présent chapitre la mise en œuvre de ces modules.
Dans ce paragraphe nous allons présenter la réalisation par rapport au produit final en
décrivant l’environnement de travail et les technologies utilisées pour la mise en place de
notre application.
Enfin, nous présentons quelques captures d’écran de l’application réalisée.

3.2 Environnement et outils de développement de notre application :

Pour pouvoir bien réaliser notre application nous avons opté pour quelque outils que nous
allons définir ci-dessous.
3.2.1 HTML (HyperText Markup Language) :
L'HyperText Markup Language, HTML, désigne un type de langage informatique descriptif.
Il s'agit plus précisément d'un format de données utilisé dans l'univers d'Internet pour la mise
en forme des pages Web. Il permet, entre autres, d'écrire de l'hypertexte, mais aussi
d'introduire des ressources multimédias dans un contenu.
3.2.2 CSS (CASCADING STYLE SHEETS):
Les feuilles de style dites CSS permettent de gérer la présentation d'une page web. CSS
permet de créer des règles de styles et de mise en pages.
Ces règles portent sur le positionnement des éléments, l'alignement, les polices de caractères,
les couleurs, les marges et espacement, les bordures, les images de fond, etc.
Le but de CSS est de séparer la structure d'un document HTML et sa présentation.

3.2.3 JAVASCRIPT :
C’est un langage de programmation qui ore la possibilité d'implémenter des traitements
élabores dans des pages web, et permet d'apporter des améliorations au langage HTML en
permettant d'exécuter des commandes de la cote client (-c'est-à-dire au niveau du navigateur
et non du serveur web).
Ainsi le langage JavaScript est fortement dépendant du navigateur appelant la page web
laquelle le script est incorpore, mais en contrepartie il ne nécessite pas de compilateur.
3.2.4 PhpMyAdmin :
phpMyAdmin est une application web écrite en PHP et qui permet de gérer un serveur
de base de données MySQL.
Cette interface pratique permet d’exécuter de nombreuses requêtes et est très pratique
pour sauvegarder une base de données sous forme de fichier .sql et ainsi transférer facilement
les données. De plus celle-ci accepte la formulation de requêtes SQL directement en langage
SQL.

19
 3.2.5 MySQL :
MySQL est un Système de Gestion des Bases de données Open Source très rapide, robuste
et multiutilisateur. Le serveur MySQL supporte le langage de requêtes SQL, langage standard
de choix des SGBD modernes. Il est facilement accessible en réseaux et supporte des
connexions sécurisées grâce au protocole SSL. La portabilité du serveur MySQL lui permet
de s'exécuter sur toutes les plateformes et d'être intégré à plusieurs serveurs web.
3.2.6 jQuery :
jQuery, est une bibliothèque JavaScript gratuite, libre et multiplateforme. Compatible avec
l'ensemble des navigateurs Web (Internet Explorer, Safari, Chrome, Firefox, etc.), elle a été
conçue et développée en 2006 pour faciliter l'écriture de scripts. Il s'agit du Framework
JavaScript le plus connu et le plus utilisé. Il permet d'agir sur les codes HTML, CSS,
JavaScript et AJAX et s'exécute essentiellement côté client.
3.2.7 XAMPP :
XAMPP est un ensemble de logiciels permettant de mettre en place facilement un serveur
Web confidentiel, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres (X (cross) ApacheMySQLPerlPHP) offrant une bonne
souplesse d'utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée
d'un grand nombre de personnes puisqu'il ne requiert pas de connaissances particulières et
fonctionne, de plus, sur les systèmes d'exploitation les plus répandus.
Il est distribué avec différentes bibliothèques logicielles qui élargissent la palette des
services de façon notable : OpenSSL, Expat (parseurXML), PNG, SQLite, zlib… ainsi que
différents modules Perl et Tomcat. Nombre de ces extensions étant inutiles aux débutants, une
version allégée — version lite — est en conséquence aussi proposée.

20
3.3 Présentation de quelques interfaces de l'application :

Interface Page de connexion :

C’est la première fenêtre visible par notre application, cette fenêtre conduit
l’utilisateur à s’authentifier par son nom d’utilisateur et son mot de passe .Cette étape
lui permet d’accéder à son propre espace.

Fig.3 : Page de connexion

21
 Interface Dashboard :
Le tableau de bord est un outil utilisé pour la gestion de l'information et la veille
économique. Comme un tableau de bord de restaurant ou de magasin, les tableaux de
bord de données organisent, stockent et affichent des informations importantes
provenant de plusieurs sources de données dans un emplacement facilement
accessible.

Fig.4 : Dashboard
Interface liste des utilisateurs :
Cette fenêtre s'affiche en cliquant sur le bouton menu de l'utilisateur dans le menu
Fenêtre du tableau de bord

Fig.5 : Page des utilisateurs

22
 Interface Ajout un utilisateur :
Cette fenêtre s'affiche en cliquant sur le bouton "Ajouter un utilisateur" dans le
menu Fenêtre de la zone de commande, vous permet de créer un nouvel enregistrement
d'utilisateur en remplissez toutes les informations pertinentes

Fig.6 : Page Ajout un utilisateur

23
 Interface modifier un utilisateur :
Cette fenêtre s'affiche en cliquant sur le bouton "Modifier l'utilisateur" dans le menu
fenêtre de la zone de commande, qui permet de modifier l'historique de l'utilisateur en
modifiant toutes les informations pertinentes

Fig.7 : Page modifier un utilisateur

Interface confirmer la modification d’un utilisateur :

Cette fenêtre s'affiche après modification des informations de l'utilisateur, ce qui
signifie que les modifications ont été enregistrées.

Fig.8 : Page de confirmer la modification d’un utilisateur

24
 Interface des produits :
Cette fenêtre s'affiche en cliquant sur le bouton « Items » dans la fenêtre de
navigation nue. Contient des informations sur le produit, prix... etc.

Fig.9 : Page des produits

Interface Ajout un produit :
Cette fenêtre s'affiche en cliquant sur le bouton Ajouter un produit dans le menu de
la fenêtre dans la zone de commande, ce qui vous permet de créer une nouvelle fiche
produit en renseignant toutes les informations pertinentes

Fig.10 : Page Ajout un produit

25
 Interface historique des ventes :
Cette fenêtre est affichée en cliquant sur le bouton « Sales » dans la fenêtre de
navigation exposée. Contient des informations sur le produit, le prix, l'utilisateur... etc.

Fig.11 : Page historique des ventes

Interface Bare de navigation :

Voici la barre d'information exposée à travers laquelle vous pouvez entrer dans les
différentes interfaces précédentes

Fig.12 : Bare de navigation

26
3.4 Conclusion :
Cette étape à mener à l'existence de ce qui était conceptuel. En effet nous avons décrit le
prototype de la réalisation et nous avons mis l'accent sur la programmation de notre
application web dédie a la gestion de POS, et nous avons terminé ce chapitre par la
présentation de quelques pages d'écran de l'application.

27
 Conclusion et perspectives

Notre projet consiste à concevoir et mettre en œuvre une application web de gestion
point de vente (POS).
Dans ce travail, nous avons parlée de la gestion du point de vente d'une pizzeria, et nous
avons présenté les étapes de développement de notre application.
Nous nous somme appuyée également durant tout le processus de conception sur
l'UML, qui est un outil graphique pratique pour illustrer notre démarche.
Il y a de nombreux avantages à se procurer un système de point de vente, notamment
pour faciliter la gestion de votre commerce de détail. Un système de point de vente peut
simplifier les tâches d’une entreprise de façon significative et dans certains cas peut même
être générateur de revenus.
L'application réalisée permet d'assurer plusieurs fonctionnalités de base à savoir la
création d'un dossier, sa modification, consultation des déférents dossiers, et le calcul des
statistiques.
Le Thème qui nous a été attribué est très instructif sur le plan pédagogique et très intéressant
sur le plan technologique et développement. Nous en tant qu'étudiants en fin de cycle Il nous
a permis de :
-Accroitre nos connaissances.
- Initier aux différentes technologies de développement (CSS, PHP. . .).
- Améliorer nos compétences dans la programmation orientée objet.
Au final étant donné que nul ne peut se prétendre aborder un domaine dans son
ensemble nous souhaiterons venir :
- Améliorer les interfaces pour qu’elles répondent aux critères ergonomiques.
- Etablir un système de sécurité des bases de données et limiter le nombre de
tentativesd'authentification à l'application.
- Héberger l'application sur un serveur.
- Développer l'application à une application mobile.

28
 Bibliographie

[1] Qu'est-ce que le point de vente (POS)? Que sont les systèmes de point de vente?
https://ecommerce-platforms.com/fr/glossary/point-sale
[2] Point de vente (POS)https://fr.wikipedia.org/wiki/Point_de_vente
[3] Les avantages d'un système de point de ventehttps://alicepos.com/fr/27-avantages-dun-
point-de-vente/
[4] http://localhost/dashboard/index.html XAMPP
[5] https://developer.mozilla.org/fr/docs/web--technologieweb\pourdeveloppeurs--css Date de
consultation 03/04/2015
[6] http://www.uml-sysml.org/diagrammes-uml-et-sysml/diagramme-uml/sequence-diagram
Date de consultation 03/06/2015
[7] http://www.linformaticien.com/dossiers/id/28420/pageid/19543/le-comparatif-2013-de-
21-hebergeurs.aspx Date de consultation 13/06/2015
[8] Pascal ROQUES. Les Cahiers du Programmeur UML 2 Modéliser une application web.
ISBN : 978-2-212-12389-0. 4eme édition, Groupe Eyrolles, 2008.
[9] Philippe RIGAUX. Cours de bases de données. juin 2001.
[10] Joseph GABAY. UML2 analyse et conception,Mise en œuvre guidée avec études decas.
DUNOD, 2008.
[11] C. PORTENEUVE et T. NITOT. Bien développer pour le web 2.0 : Bonnes pratiques
Ajax. Eyrolles, 2008.
[12] J.CONALLEN. Concevoir des applications web avec UML. Eyrolles, 2000.
[13] Robert OGOR. Modélisation avec uml. Http://www.enstbretagne.com, mai 2003.
[14] Pascal ROQUES Franck VALLEE,UML2 en action, Eyrolles 4eme edition,2007.

29
 Résumé
Notre Thème de Projet fin d’étude réalise une application web points de vente (POS)
afin de répondre aux éventuels besoins de différents utilisateurs/clients de ce service.
A travers cette application, nous offrons des apports au niveau de sa conception et son
développement, nous avons maitrisé (CSS) Feuilles de Style en Cascade, JavaScript, jQuery,
HTML et le langage UML (Unified Modeling Language- Langage unifie de modélisation) par
leurs utilisations dans le développement et conception de notre application, La mise en œuvre
de notre application s'articule sur une base de données développe avec (Mysql, phpMyAdmin)
selon une architecture trois tiers, L'environnement de développement utilisée est XAMPP.
Et nous avons découvert l’importance de l’étape de la conception dans le
développement des applications.

Abstract
Our End of Study Project Theme creates a point of sale (POS) web application to meet
the possible needs of different users / customers of this service.
Through this application, we offer contributions in terms of its design and development,
we have mastered (CSS) Cascading Style Sheets, JavaScript, jQuery, HTML and UML
(Unified Modeling Language) by their uses in the development and design of our application,
The implementation of our application is based on a database developed with (Mysql,
phpMyAdmin) according to a three-tier architecture, The development environment used is
XAMPP.
And we discovered the importance of the design stage in application development.

‫ملخص‬
‫( ينتج موضوع مشروع نهاية الدراسة الخاص بنا تطبيق ويب لنقطة البيع‬POS) ‫لتلبية االحتياجات المحتملة‬
‫ العمالء لهذه الخدمة‬/ ‫لمختلف المستخدمين‬.
‫ وقد أتقننا‬، ‫ نقدم مساهمات من حيث تصميمه وتطويره‬، ‫( من خالل هذا التطبيق‬CSS) ‫أوراق األنماط المتتالية و‬
JavaScript ‫ و‬jQuery ‫ و‬HTML ‫ و‬UML (‫من خالل استخداماتهم في تطوير وتصميم )لغة النمذجة الموحدة‬
‫ يعتمد تنفيذ تطبيقنا على قاعدة بيانات تم تطويرها باستخدام‬، ‫( تطبيقنا‬Mysql، phpMyAdmin) ‫وفقًا لبنية ثالثية‬
‫ وبيئة التطوير المستخدمة هي‬، ‫ المستويات‬XAMPP.
‫واكتشفنا أهمية مرحلة التصميم في تطوير التطبيق‬.

30