république algérienne démocratique et

populaire

Rapport projet fin de cycle

Conception et réalisation d’une

application WEB Marketplace
E-commerce

Membres du groupe:
Benslimane Nassim
Ait sahel Lylia
Benzaid Amine
Djafri Halim
Hadjajj Ilyas
Aouchiche Sara
Superviseur:
Mme . Gadouche
 Contents

Introduction générale 2
1 Généralités sur le e-commerce 4
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 E-commerce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.2 Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.3 Pourquoi L’e-commerce ? . . . . . . . . . . . . . . . . . . . . . 5
1.2.4 La différence entre l’e-commerce et le commerce traditionnel 6
1.2.5 Quelques services d’une application e-commerce . . . . . . . 7
1.2.6 Types de relations e-commerce . . . . . . . . . . . . . . . . . . 7
1.2.7 Les avantages de l’e-commerce . . . . . . . . . . . . . . . . . . 7
1.2.8 Les incovéniants de l’e-commerce . . . . . . . . . . . . . . . . 8
1.3 E-paiement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.3.1 Les modes d’e-paiement . . . . . . . . . . . . . . . . . . . . . . 8
1.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2 étude préliminaire 10
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Description du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Problématique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5 Identification des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.6 La descriptions des acteurs . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.7 L’identification des cas d’utilisations . . . . . . . . . . . . . . . . . . . 13
2.8 Le diagramme des cas d’utilisations . . . . . . . . . . . . . . . . . . . 15
2.9 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3 Analyse des besoins 17
3.1 Contexte et objectifs du site web VintageDZ . . . . . . . . . . . . . . . 17
3.2 Capture des besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . 17
3.2.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2.2 Besoins fonctionnels . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3 Capture des besoins non fonctionnels . . . . . . . . . . . . . . . . . . 18
3.3.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3.2 Besoins non fonctionnels . . . . . . . . . . . . . . . . . . . . . . 18
3.4 Modèle économique du site web VintageDZ . . . . . . . . . . . . . . . 19
3.5 Contenu et design du site web VintageDZ . . . . . . . . . . . . . . . . 20

i
Contents ii

3.6 outils utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.7 Budget et Délais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.8 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4 Conception 23
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.2 Diagramme de séquence . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.3 Diagramme de classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4.4 Dictionnaire de données . . . . . . . . . . . . . . . . . . . . . . . . . . 41
4.5 Modéle relationnel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
4.6 Triggers utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.6.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
4.7 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
5 Réalisation 45
5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.2 Diagramme de déploiement . . . . . . . . . . . . . . . . . . . . . . . . 45
5.2.1 Définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5.3 Langages utilisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.3.1 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.3.2 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
5.3.3 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3.4 Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.3.5 PostgreSQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
5.4 Outils de dévloppement . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4.1 Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.4.2 Github . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
5.5 Description de l’application . . . . . . . . . . . . . . . . . . . . . . . . 49
5.5.1 Page d’acceuil . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
5.5.2 Page d’inscription . . . . . . . . . . . . . . . . . . . . . . . . . . 50
5.5.3 Page de connexion . . . . . . . . . . . . . . . . . . . . . . . . . 51
5.5.4 Modification de mot de passe . . . . . . . . . . . . . . . . . . . 52
5.5.5 Section de tendances . . . . . . . . . . . . . . . . . . . . . . . . 53
5.5.6 Carte de produit . . . . . . . . . . . . . . . . . . . . . . . . . . 54
5.5.7 Ajoute un produit a vendre . . . . . . . . . . . . . . . . . . . . 55
5.5.8 Recherche de produit . . . . . . . . . . . . . . . . . . . . . . . . 56
5.5.9 Mes annonces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
5.5.10 Page d’informations . . . . . . . . . . . . . . . . . . . . . . . . 57
5.5.11 Page de messagerie . . . . . . . . . . . . . . . . . . . . . . . . . 58
6 Conclusion 59
Contents 1

Remerciement
Notre sincère gratitude s’adresse d’abord à Dieu Tout-Puissant, qui nous a donné la
force de caractère et les connaissances nécessaires pour mener et travailler à sur ce
projet.

Nous tenons également à remercier nos chers parents,pour toutes les épreuves
endurées pour nous et leur immense soutien.

Tous nos amis proches, A notre encadreur, [Link],en l’occurrence, qui nous
a donné une énorme confiance,pour ses suivies, ses précieuses orientations, qui nous
ont guidé pendant ce projet.

À tous nos instructeurs et membres du personnel de la division informatique de

l’Université d’Abderrahmane Mira. .
 Introduction générale
L’internet a sûrement révolutionné le monde d’aujourd’hui et touché plusieurs
terrains scientifiques (social, physique, mathématiques....) , l’économie inclus. Les
nouvelles technologies de l’information et de la communication ont sans aucun doute
changé le comportement des consommateurs et les relations, interactions entre les
fournisseurs et clients.

Considérez la première chose que vous utilisez quotidiennement pour recueillir

ou chercher des informations ou services ? le web.

La source la plus accessible et facile a utiliser.

Avec le web et le dévloppement technologiques d’aujourd’hui, l’achat de quelque

chose nécessite moins de déplacements. Vous pouvez rechercher votre produit depuis
chez vous et même le commander sans vous déplacer, et il vous sera livré dans les
plus brefs délais, mettant fin aux problèmes de distances, et de transports.

Les boutiques en ligne sont devenues une nécessité. Un site Web e-commerce
fonctionne comme un outil global qui permet aux utilisateurs d’accéder à tous les
détails des produits et services disponibles sur une page.

Un tel site doit fournir différents détails pour chaque produit, l’identification des
vendeurs, et indiquer les modalités de paiement et de livraison, le montant des frais
de livraison, le prix final, la gestion des commandes, sécuriser les interactions... et
pluseieurs fonctionnalités.

Ainsi, vu les avantages, les changements qu’un tel site peut apporter, l’objectif
de notre travail alors se consiste à concevoir et réaliser un site web dynamique
pour la vente et achats de vêtements, neufs ou d’occasion en toute sécurité, nommé
VintageDZ.

Afin de compléter à bien notre travail, nous avons divisé notre méthode de
développement en cinq phases, chacune étant décrite dans un chapitre distinct de ce
rapport.

2
Contents 3

Le premier chapitre nommé «Généralités sur l’ecommerce », a objectif d’introduire

et présenter l’ecommerce.

Le deuxieme chapitre, «étude préliminaire», cela répresente l’identification de

la problématique, en définissant les objectifs, les acteurs, et un diagramme cas
d’utilisation.

Le troisième chapitre, «Analyse des besoins», dans lequel les exigences, les tech-
nologies et les limites de notre projet sont évalués et compris.

Le quatriéme chapitre, «Conception», reflète la représentation du projet forme de

diagrammes de séquences, un diagramme de classe, leurs modèle relationnel et un
dictionnaire de données.

Le cinquième chapitre, «Réalisation», dans lequel nous définissons les outils de

développement que nous avons utilisés, couvrir la création et la mise en œuvre du
projet. Nous montrerons également certaines interfaces du site développé.
 1
Généralités sur le e-commerce

1.1. Introduction
L’e-commerce est le terme utilisé pour décrire l’achat et la vente de biens et de services
en ligne. Les entreprises peuvent atteindre un public plus large grâce à cela, tandis que
les clients peuvent faire leurs achats avec plus de facilité et de liberté. L’e-commerce a
gagné en popularité au cours des dernières années en raison de l’augmentation de
l’accès à Internet et de l’adoption généralisée des appareils mobiles.

1.2. E-commerce
1.2.1. Définition
Le terme « e-commerce », souvent appelé « commerce électronique », décrit l’échange
de produits et de services sur Internet. Toute transaction effectuée par voie élec-
tronique relève de cette catégorie, y compris les transactions financières ainsi que
les ventes au détail en ligne et les abonnements numériques. Il a transformé la
façon dont les entreprises gèrent leurs opérations en leur permettant d’accéder à
un public plus large et d’élargir leur base de consommateurs au-delà des frontières
géographiques. La manière dont les consommateurs achètent a également changé en
raison du commerce électronique, leur offrant plus de commodité et de flexibilité
ainsi qu’un accès à une plus grande variété de biens et de services.

1.2.2. Historique
Lorsque les entreprises ont commencé à échanger des documents commerciaux
via l’échange de données informatisé (EDI) dans les années 1960, l’histoire du
commerce électronique a commencé. Le développement du World Wide Web dans
les années 1990 a permis aux clients d’accéder au commerce électronique. À la
suite de l’émergence de marchés en ligne comme Amazon et eBay, les détaillants

4
1.2. E-commerce 5

ont commencé à proposer des achats en ligne. Le commerce mobile s’est développé
tout au long des années 2000 en raison de la popularité des smartphones mobiles.
Actuellement, les ventes sur Internet représentent une part importante des ventes
au détail mondiales, ce qui fait du commerce électronique une activité importante.
En raison des mesures d’isolement social provoquées par l’épidémie de COVID-19,
les gens ont commencé à faire des achats en ligne, ce qui a stimulé l’expansion du
commerce électronique.

Figure 1.1: Les ventes e-commerce entre 2017-2023

1.2.3. Pourquoi L’e-commerce ?

La possibilité d’atteindre un public plus large, des frais généraux réduits, plus de
flexibilité et de commodité pour les clients, et la capacité de suivre et d’analyser
les données pour améliorer les opérations commerciales ne sont que quelques-unes
des raisons de choisir le commerce électronique. Le commerce électronique offre
également des perspectives d’expansion et d’évolutivité, car il permet aux entreprises
de s’étendre facilement au-delà de leur marché local et de se connecter avec de
nouveaux clients à l’échelle mondiale.
1.2. E-commerce 6

Figure 1.2: La comparaison entre l’échange de données traditionnel et informatisé

1.2.4. La différence entre l’e-commerce et le commerce traditionnel

E-commerce Commerce traditionnel

Les transactions sont faites sur les transactions sont faites

internet physiquement.

Aucune relation ou interaction Le client peut identifier, parler

physique entre marchand et avec le marchand.
client

Le client ne peut pas vérifier le le produit peut être examiné et

produit vérifié par le client.

l’activité peut s’étendre à limité en termes de champs

l’échelle mondiale d’activité.

le paiement est fait par carte de le paiement est fait par

crédit ou débit, par banque... cash,chéques ou cartes.

Le produit peut prendre la majorité des produits sont

quelques jours pour arriver délivré directement.
1.2. E-commerce 7

1.2.5. Quelques services d’une application e-commerce

• Un panier qui permet à un client d’ajouter les produits désirés et les commander.
• Le service des clients
• La gestion des rétractions
• Le traitement des paiements et transactions
• La recommandation de produits
• La possibilité de donner des avis sur les produits
• La recherche de produit
• transactions sécurisées

1.2.6. Types de relations e-commerce

Business-To-Consumer (B2C)
La transaction de commerce électronique la plus utilisée, les entreprises offrent des
produits ou des services directement aux clients. Pendant les transactions entre le
fournisseur-client, l’objectif est d’augmenter les ventes et de favoriser la fidélité à la
marque en offrant une expérience client satisfaisante.

Business-To-Business (B2B)
Les entreprises B2B s’engagent dans le commerce avec d’autres entreprises pour leur
vendre produits ou bien des services. Comme les entreprises achètent des choses
pour leur propre usage ou pour les revendre à leurs consommateurs, cette forme de
contact implique souvent des volumes de produits plus importants et des valeurs de
transaction plus élevées que les relations B2C.

Consumer-To-Consumer (C2C)
Avec les places de marché en ligne ou les sites Web, des individuels s’engagent dans
des transactions directes avec d’autres consommateurs. Ce type d’arrangement est
fréquemment utilisé lors de l’achat et de la vente de produits anciens, notamment
des meubles, des appareils électroniques et des vêtements.

Business-To-Governement (B2G)
Les entreprises s’engagent dans le commerce électronique avec des ministères ou
des organismes gouvernementaux, leur vendant des produits et des services. Ce
type de partenariat implique souvent de soumettre des offres pour des contrats
gouvernementaux ou d’offrir des services spécifiques afin de satisfaire aux exigences
du gouvernement.

1.2.7. Les avantages de l’e-commerce

• Plus d’accessibilité
1.3. E-paiement 8

• La disponibilité 24/7
• Des transactions plus rapides
• La flexibilité
• Réduction des coûts
• Mets fin aux problémes de déplacement et transport pour le client

1.2.8. Les incovéniants de l’e-commerce

• Manque d’intéraction physique entre fournisseur-client
• La possibilité de fraude est plus élévée
• Taux élévé de rétraction des produits
• La dépendance sur la technologie
• L’existence d’une grande comptétition
• Les risques de sécurité

1.3. E-paiement
Toute technique de paiement qui permet aux personnes ou aux organisations
d’effectuer des transactions financières en ligne est appelée «paiement électron-
ique», parfois appelée «e-paiement». Cela couvre plusieurs options de paiement, y
compris les virements bancaires, les chèques électroniques, les cartes de crédit..., La
plupart du temps, les méthodes de paiement électroniques sont efficaces et sécurisées,
permettant des transactions rapides et pratiques sans utiliser de devises ou de chèques.
Avec l’expansion de l’e-commerce, le paiement électronique a gagné en popularité
en permettant aux entreprises de vendre des produits ou des services en ligne et
d’accepter des paiements par voie électronique.

1.3.1. Les modes d’e-paiement

Cartes de crédits
L’une des méthodes de paiement les plus utilisées dans le commerce électronique,
Une passerelle de paiement traite le paiement lorsque les clients saisissent leurs
informations de carte de crédit pour effectuer un achat.
Cartes de débit
Similaires aux cartes de crédit, les cartes de débit fonctionnent en prélevant de l’argent
sur le compte bancaire du titulaire de la carte.
Paypal
Avec l’aide du service de paiement en ligne PayPal, les clients peuvent effectuer des
achats en utilisant les fonds de leurs comptes PayPal ou une carte de crédit ou de
débit liée.
1.4. Conclusion 9

Chéques éléctroniques
Les chèques électroniques sont les équivalents numériques des chèques papier. Pour
effectuer une transaction, les acheteurs peuvent entrer lier leur comptes bancaires et
leurs numéros de compte.

Transfert de bank (compte vers compte)

Les clients peuvent transférer de l’argent directement de leur compte bancaire vers le
compte du vendeur par virement.

1.4. Conclusion
En conclusion, le commerce électronique a fondamentalement changé la façon dont les
consommateurs et les organisations font des affaires. Les entreprises ont désormais
la possibilité d’atteindre un public plus large, d’augmenter les ventes et de réduire
les dépenses en général. Les clients peuvent profiter de la commodité de faire leurs
achats depuis n’importe quel endroit, à tout moment et souvent pour moins d’argent.
Bien qu’il existe des inconvénients et des défis potentiels associés au commerce
électronique, ces avantages l’emportent largement sur ces lacunes, ce qui en fait un
élément essentiel de l’économie mondiale.
 2
étude préliminaire

2.1. Introduction
Ce chapitre est consacré à décrire les premières phases de la création de la Web
application. Plus précisément, L’identification des différents acteurs qui interagissent
avec le système et différents cas d’[Link] diagramme de cas d’utilisation sera
ensuite présenté.

2.2. Description du projet

Notre projet consiste à créer une plate-forme pour la vente de différents vêtements en
ligne destinés à des clients de tout âge et de tout lieu sur le terrain national.
VintageDZ est une application web pour vente de vêtements occasion, Elle permet
aux utilisateurs de vendre leurs articles en ligne avec d’autres personnes. Les
utilitateurs peuvent créer des annonces pour leurs articles en incluant des images et
des détails sur la taille, l’état, la marque... etc.
Les acheteurs peuvent surfer à travers les annonces pour trouver des articles qui
les intéressent et les commander.

2.3. Problématique
Actuellement, il existe de nombreux sites e-commerce qui acceptent les paiements
électroniques (cartes de débit, cartes de crédit, virement etc.), ce qui pose problème
aux Algériens car il est difficile d’y accéder, de les commander, pour raison de
non disponibilité, et pour la simple raison qu’elles ne sont pas utilisé[Link] les
transactions courantes, les espèces continuent d’être le mode de paiement dominant
dans le [Link] pour cela, nous avons décidé de développer une application Web
marketplace e-commerce afin de leur faciliter la tâche, de la cantonner à une échelle
nationale et de leur faire découvrir le monde du e-commerce.

10
2.4. Objectifs 11

2.4. Objectifs
Notre projet consiste à développer une application Web permettant
• L’authentification et identification des utilisateurs
• La publication des annonces pour ventes
• Un systéme de messagerie permettant la communication fournisseur-client
• Pouvoir s’abonner et suivre les annonces des différents vendeurs
• La recherche de produits
• La promotions des annonces
• La possibilité d’évaluations des produits et transactions.
• Le signalement, en cas de fraude, ou non respect de certaines règles
• Vérifier les profils des différents vendeurs
• Promotion des annonces

2.5. Identification des acteurs

Figure 2.1: Les acteurs

2.6. La descriptions des acteurs

• Utilisateur : Toute personne naviguant le site.
• Acheteur : Toute personne ayant la possibilité de s’authentifier, naviguer le site,
et commander un produit.
• Vendeur : Toute personne publiant des annonces, offrant des produits à vendre,
après s’être authentifié.
2.6. La descriptions des acteurs 12

• Administrateur : Personne (s) gérant le site, validant les annonces, et assurant

le bon fonctionnement de la platforme.
2.7. L’identification des cas d’utilisations 13

2.7. L’identification des cas d’utilisations

2.7. L’identification des cas d’utilisations 14
2.8. Le diagramme des cas d’utilisations 15

2.8. Le diagramme des cas d’utilisations

Figure 2.3: Diagramme réprésentant les différents cas d’utilisation

2.9. Conclusion 16

2.9. Conclusion
Dans cette étape, on a défini notre problématique et différents objectifs, en présentant
une petite description de notre application, suivie d’une identification des acteurs
interagissant avec le systeme et un diagramme cas d’utilisation.
 3
Analyse des besoins

3.1. Contexte et objectifs du site web VintageDZ

Le site web marketplace a pour objectif de permettre aux utilisateurs en Algérie de
vendre et d’acheter des vêtements, neufs ou d’occasion, en toute sécurité. Le site
web se veut être une plateforme de référence pour les acheteurs et les vendeurs
de vêtements en Algérie, en offrant des fonctionnalités modernes et intuitives pour
faciliter les transactions et les échanges. Le site web marketplace doit permettre :
La mise en ligne d’annonces pour la vente de vêtements, avec la possibilité d’ajouter
des photos, des descriptions détaillées et des prix. La recherche et la consultation
d’annonces par les utilisateurs, avec la possibilité de filtrer les résultats par taille,
marque, prix, etc. La mise en relation des acheteurs et des vendeurs, avec la possibilité
d’échanger des messages pour organiser la transaction. La gestion des transactions
entre les acheteurs et les vendeurs, en proposant des options de paiement sécurisées
et adaptées au contexte local. La mise en place de mesures de sécurité pour éviter les
fraudes, les contrefaçons et les arnaques sur la plateforme.

3.2. Capture des besoins fonctionnels

3.2.1. Définition
Les besoins fonctionnels expliquent ce que le produit final devrait être ou être capable
de réaliser.

3.2.2. Besoins fonctionnels

Inscription et connexion : Les utilisateurs doivent pouvoir créer un compte sur
le site web en fournissant leur nom, leur adresse e-mail et leur mot de passe. Ils
doivent également pouvoir se connecter facilement à leur compte pour accéder à
leurs annonces et à leur messagerie.

17
3.3. Capture des besoins non fonctionnels 18

Profil utilisateur : Les utilisateurs doivent pouvoir créer un profil utilisateur sur
le site web, qui inclut des informations telles que leur photo de profil, leur nom, leur
adresse, leur numéro de téléphone et leur adresse e-mail. Les utilisateurs doivent
également pouvoir modifier leur profil à tout moment.

Annonces : Les vendeurs doivent pouvoir créer des annonces pour vendre des
vêtements. Les annonces doivent inclure des informations telles que le titre, la
description, les photos, la taille, la marque et le prix. Les vendeurs doivent pouvoir
modifier ou supprimer leurs annonces à tout moment.

Recherche : Les acheteurs doivent pouvoir rechercher des annonces en fonction

de critères tels que la taille, la marque, le prix, etc. Les résultats de recherche doivent
être triés par pertinence et doivent être faciles à filtrer.

Messagerie : Les utilisateurs doivent pouvoir communiquer entre eux pour or-
ganiser les transactions. Le site web doit offrir une messagerie intégrée qui permet
aux utilisateurs d’échanger des messages en toute sécurité.

Promotion des annonces: afin de pouvoir rentabiliser et créer des bénéfices, on

ferra recours aux placements de produits sur notre site et la promotions des annonces
publicitaires.

Évaluation : Les utilisateurs doivent pouvoir évaluer les transactions qu’ils ont
effectuées avec d’autres utilisateurs. Les évaluations doivent inclure une note et un
commentaire, et doivent être visibles sur les profils des utilisateurs.
Signalement : Les utilisateurs doivent pouvoir signaler les annonces ou les
comportements abusifs sur le site web. Le site web doit offrir une procédure de
signalement facile à utiliser et efficace pour résoudre les problèmes.

3.3. Capture des besoins non fonctionnels

3.3.1. Définition
Les besoins non fonctionnels sont ceux qui ne sont pas immédiatement liées à son
fonctionnement fondamental, mais qui spécifie quelque chose du systeme lui meme.

3.3.2. Besoins non fonctionnels

Plateforme : Le site web doit être développé sur une plateforme stable, évolutive et
compatible avec les navigateurs web les plus courants en Algérie, tels que Chrome,
Firefox et Safari.
3.4. Modèle économique du site web VintageDZ 19

Assistance et support aux utilisateurs : pour aider les utilisateurs à résoudre

les problèmes et à fournir des informations, la plate-forme doit disposer d’une
infrastructure d’assistance solide, qui va leur permettre de commmuniquer avec
l’administrateurs en cas de problémes ou complications.

Architecture et scalabilité : Le site web doit être conçu avec une architecture qui
permet de gérer un grand nombre d’utilisateurs, d’annonces et de transactions en
temps réel. Le site web doit utiliser une base de données robuste et fiable pour stocker
les informations des utilisateurs et des annonces.

Sécurité : Le site web doit offrir des mesures de sécurité pour protéger les données
des utilisateurs et éviter les attaques malveillantes. Le site web doit être hébergé sur
un serveur sécurisé avec un certificat SSL, et utiliser des protocoles de sécurité tels
que HTTPS et TLS.

Performance : Le site web doit offrir une expérience utilisateur rapide et fluide,
avec des temps de chargement minimaux pour les pages et les images. Le site web
doit utiliser des techniques d’optimisation de la vitesse telles que la mise en cache, la
compression des fichiers et la réduction du nombre de requêtes.

Mobile-friendly : Le site web doit être conçu pour être compatible avec les
appareils mobiles couramment utilisés en Algérie, tels que les smartphones et les
tablettes. Le site web doit être responsive et offrir une expérience utilisateur adaptée
aux écrans mobiles.

Maintenance : Le site web doit être maintenu régulièrement pour assurer sa

stabilité, sa sécurité et sa performance. Le site web doit être sauvegardé régulièrement
et les mises à jour de sécurité doivent être installées rapidement.

3.4. Modèle économique du site web VintageDZ

Le site web marketplace doit être financé par des sources de revenus durables et
adaptées au contexte local. Les principales sources de revenus envisagées sont :

Publicités : Le site web peut générer des revenus en affichant des publicités de
partenaires et d’annonceurs sur le site web. Les annonceurs peuvent être des marques
de vêtements, des magasins de vêtements en ligne, des services de livraison, etc.

Placement de produits : Le site web peut offrir aux vendeurs la possibilité de

mettre en avant leurs produits en échange d’un paiement. Les vendeurs peuvent
3.5. Contenu et design du site web VintageDZ 20

payer pour que leurs produits soient mis en avant sur la page d’accueil, dans les
résultats de recherche, dans les catégories, etc.

Vente de données : Le site web peut collecter des données sur les habitudes de
consommation des utilisateurs et les vendre à des tiers, tels que des entreprises de
marketing ou des instituts de sondage.

3.5. Contenu et design du site web VintageDZ

Le site web marketplace doit respecter les spécifications suivantes en termes de
contenu et de design pour offrir une expérience utilisateur agréable et efficace :

Interface utilisateur : Le site web doit offrir une interface utilisateur intuitive et
facile à utiliser pour permettre aux utilisateurs de naviguer facilement sur le site
web. Le site web doit être conçu avec une hiérarchie visuelle claire pour faciliter la
navigation et la recherche des produits.

Branding : Le site web doit être conçu avec un branding cohérent et identifiable,
avec un logo et une palette de couleurs reconnaissables. Le site web doit transmettre
une image professionnelle et de confiance pour encourager les utilisateurs à acheter
et à vendre sur la plateforme.

Pages de produits : Les pages de produits doivent offrir une description détaillée
du produit, des images claires et de qualité et des informations sur le vendeur. Les
pages de produits doivent permettre aux utilisateurs de poser des questions au
vendeur et de laisser des commentaires sur le produit.

Recherche et filtrage : Le site web doit offrir un système de recherche efficace pour
permettre aux utilisateurs de trouver rapidement les produits qu’ils recherchent. Le
site web doit offrir des options de filtrage avancées pour permettre aux utilisateurs
de trier les résultats par prix, catégorie, taille, couleur, etc.

3.6. outils utilisés

Framework : Le site web sera développé en utilisant le framework Django, version
4.0. Ce choix de framework a été fait en raison de sa flexibilité et de sa robustesse en
matière de développement web.

Base de données : Le site web utilisera une base de données relationnelle Post-
greSQL, version 15. Cette base de données a été choisie en raison de sa capacité à
3.7. Budget et Délais 21

gérer de grandes quantités de données, sa stabilité et ses fonctionnalités avancées.

Langages de programmation : Les langages de programmation utilisés pour

développer le site seront Python et HTML/CSS/JavaScript. Python sera utilisé pour
le développement de l’application web Django, tandis que les langages de front-end
(HTML/CSS/JavaScript) seront utilisés pour la conception de l’interface utilisateur.

Outils de développement : Pour le développement du site, les développeurs

pourront utiliser l’environnement de développement intégré (IDE) de leur choix pour
Python et les langages front-end, tel que PyCharm, Visual Studio Code ou tout autre
outil de leur préférence.

3.7. Budget et Délais

Le développement du site marketplace devra être achevé d’ici le 15 juin 2023. Étant
donné que nous souhaitons minimiser les coûts de développement, nous utiliserons
des solutions open-source et gratuites dans la mesure du possible, en évitant d’avoir
recours à des licences ou des services coûteux.

Les coûts nécessaires pour le développement, l’hébergement, la maintenance et le

marketing du site seront évalués en fonction des besoins et des choix de la solution
technique retenue. Nous prévoyons de lancer le site marketplace avant d’avoir trouvé
un investisseur. Cela signifie que le budget initial sera limité, mais nous pourrons
envisager un investissement supplémentaire une fois le projet lancé et rentable.

En ce qui concerne les délais, nous nous engageons à respecter la date limite de
livraison du projet fixée au 15 juin 2023. Nous avons identifié les étapes suivantes du
projet avec les délais estimés :
Conception et spécifications techniques : 3 semaines
Développement de la plateforme : 10 semaines
Tests et corrections : 2 semaines
Déploiement et mise en production : 1 semaine

Nous tenons à souligner que ces délais sont estimatifs et peuvent varier en fonction des
imprévus et des difficultés rencontrées pendant le développement. Nous travaillerons
en étroite collaboration avec notre équipe de développement pour s’assurer que le
projet est livré dans les temps et à la qualité attendue.
3.8. Conclusion 22

3.8. Conclusion
Ces spécifications de développement web décrivent les besoins et les objectifs du
projet de manière claire et concise. Il décrit les technologie et les fonctions liées
au développement de notre application web. En s’appuyant sur ce document de
référence, notre équipe de développement sera en mesure de fournir un site web qui
réponde a ces exigences.
 4
Conception

4.1. Introduction
Nous passons à la phase de conception, qui est une étape très importante du processus,
permettant de passer à partir une structure fonctionnelle exprimée dans des cas
d’utilisation, à une structure objet sous la forme d’un diagramme de classe. Dans les
sections qui suivent, nous allons illustrer une perspective dynamique du système à
l’aide de diagrammes de séquence, et une vue statique à l’aide d’une modélisation
d’un diagramme de classe, sans oublier les dictionnaires de données et on conclue
avec l’élaboration du modèle relationnel.

4.2. Diagramme de séquence

Un type particulier de diagramme UML, utilisé pour décrire la manière dont les
objets système interagissent, est appelé un diagramme de séquence. Il affiche l’ordre
chronologique des messages transmis entre les objets lors d’une exécution.

23
4.2. Diagramme de séquence 24

Figure 4.1: Diagramme de séquance du CU " S’inscrire "

4.2. Diagramme de séquence 25

Figure 4.2: Diagramme de séquance du CU " S’authentifier"

4.2. Diagramme de séquence 26

Figure 4.3: Diagramme de séquance du CU " Gérer les annonces "

4.2. Diagramme de séquence 27

Figure 4.4: Diagramme de séquance du CU " Répondre aux messages"

4.2. Diagramme de séquence 28

Figure 4.5: Diagramme de séquance du CU " Rechercher un article "

4.2. Diagramme de séquence 29

Figure 4.6: Diagramme de séquance du CU " Gestion du panier"

4.2. Diagramme de séquence 30

Figure 4.7: Diagramme de séquance du CU " Vider le panier"

4.2. Diagramme de séquence 31

Figure 4.8: Diagramme de séquance du CU " Vente d’un article"

4.2. Diagramme de séquence 32

Figure 4.9: Diagramme de séquance du CU " Supprimer un article"

4.2. Diagramme de séquence 33

Figure 4.10: Diagramme de séquance du CU " Modifier un compte "

4.2. Diagramme de séquence 34

Figure 4.11: Diagramme de séquance du CU " Supprimer un compte"

4.2. Diagramme de séquence 35

Figure 4.12: Diagramme de séquance du CU " évaluer transaction "

4.2. Diagramme de séquence 36

Figure 4.13: Diagramme de séquance du CU "Répondre aux signalements "

4.2. Diagramme de séquence 37

Figure 4.14: Diagramme de séquance du CU " Supprimer un utilisateur"

4.2. Diagramme de séquence 38

Figure 4.15: Diagramme de séquance du CU " Consulter les annonces "

4.3. Diagramme de classe 39

Figure 4.16: Diagramme de séquance du CU " Promouvoir une annonce "

4.3. Diagramme de classe

Le diagramme de classe est une forme de diagramme structurel UML, qui affiche les
classes, les caractéristiques, les méthodes et les connexions d’un système.
Il utilise des cases pour représenter les classes et des flèches pour indiquer les
connexions entre elles afin d’illustrer la structure statique du système.
Les boîtes symbolisent également les attributs et les méthodes, et elles peuvent
être utilisées pour signifier la visibilité et la variété des attributs et des méthodes.
4.3. Diagramme de classe 40

Figure 4.17: Diagramme de classe

4.4. Dictionnaire de données 41

4.4. Dictionnaire de données

4.5. Modéle relationnel 42

Figure 4.18: Dictionnaire de données

4.5. Modéle relationnel

Le modéle relationnel est utilisé pour organiser les données dans des tableaux avec
des lignes et des colonnes.
Les clés étrangères sont utilisées pour exprimer les connexions entre les entités de
chaque table, que chacune représente comme une entité.
Le paradigme relationnel est couramment utilisé dans les systèmes de gestion de
bases de données relationnelles (RDBMS).
4.5. Modéle relationnel 43

Figure 4.19: Modéle relationnel

4.6. Triggers utilisés 44

4.6. Triggers utilisés

4.6.1. Définition
Dans les systèmes de gestion de bases de données (SGBD), les blocs de code connus
sous le nom de triggers sont ceux qui s’exécutent automatiquement en réponse à
certains événements, notamment les mises à jour de données ou les actions sur
les tables. Ils améliorent la fonctionnalité de la base de données et préservent la
cohérence des données en appliquant des exigences d’intégrité, en effectuant des
calculs ou en lançant d’autres opérations basées sur des conditions prédéterminées.

• Après la création d’un utilisateur, un profil est directement créé.

• Après l’ajout ou suppression d’un like concernant une annonce, le compteur est
automatiquement changé.
• Après un abonnement ou désabonnement d’un profil, le nombre sur le profil
est modifié aussi.

4.7. Conclusion
Pour garantir la fiabilité et l’efficacité de la phase de réalisation, nous avons attentive-
ment conçu le système de notre application.
La phase de réalisation de notre site web sera abordée dans la partie suivante.
Pour ce faire, les nombreuses interfaces qui le composent seront décrites en détails.
 5
Réalisation

5.1. Introduction
La réalisation est la derniére étape, celle où nous pouvons finalement accomplir
et implémenter la solution de notre conception. Nous allons utilisé des captures
d’écran des différentes interfaces du site pour illustrer l’application que nous avions
développé, dans le but de présenter le fonctionnement de chaque partie.

5.2. Diagramme de déploiement

5.2.1. Définition
Un diagramme de déploiement est une représentation graphique qui montre le
déploiement et la connectivité des éléments et composants matériels et logiciels à
l’intérieur d’un système et represente la disposition et la distribution physique des
composants du système, tels que les serveurs, les bases de données et l’infrastructure
de communication.

45
5.3. Langages utilisés 46

Figure 5.1: Diagramme de Déploiment

5.3. Langages utilisés

5.3.1. HTML
Les pages web sont souvent créées à l’aide du langage de balisage HTML (Hypertext
Markup Language).
Les navigateurs web peuvent comprendre et afficher correctement le contenu d’une
page web parce que le langage HTML lui donne une structure et une signification
sémantique. Les composants d’une page web, tels que les en-têtes, les paragraphes,
les liens, les photos et autres, sont définis à l’aide de balises et d’attributs en HTML.
Il sert de base à toute page en ligne et constitue une compétence essentielle pour les
développeurs web.

5.3.2. CSS
CSS (Cascading Style Sheets) est un langage de style utilisé pour organiser la présen-
tation et la mise en page du contenu HTML.
5.3. Langages utilisés 47

Il permet aux concepteurs de sites web de déterminer les couleurs, les polices, les
tailles et l’emplacement des différents composants d’une page web. Le style général
d’un site web peut être facilement maintenu cohérent en appliquant des règles CSS à
des sections ou groupes d’éléments spécifiques.
Il se combine avec le langage HTML pour produire des pages web à la fois
agréables et pratiques pour l’utilisateur.

5.3.3. Javascript
JavaScript est un langage de programmation dynamique qui permet de créer des
pages web dynamiques et interactives.
Comme il s’agit d’un langage côté client, il s’exécute dans le navigateur web de
l’utilisateur et non sur un serveur. JavaScript peut être utilisé pour diverses fonctions,
notamment la validation de formulaires, l’amélioration de l’interface utilisateur, la
création d’animations et d’effets et la gestion des événements utilisateur. Avec HTML
et CSS, il permet de créer des pages web réactives. En outre, il est utilisé côté serveur
en conjonction avec des outils tels que [Link], Django etc... pour construire des
applications web complètes.

5.3.4. Python
Python est un langage de programmation intérpreté, simple à apprendre. Il prend
en charge plusieurs paradigmes de programmation, notamment la programmation
procédurale, orientée objet et fonctionnelle, et possède une syntaxe claire, utilisé dans
plusieurs terrains, comme la science des données, dévloppement web, ou meme le
dévloppement des jeux vidéos.
Python est fréquemment utilisé dans le développement web pour créer des
applications en ligne interactives et dynamiques. Il peut être utilisé pour créer des
applications web côté serveur en combinaison avec des frameworks web tels que
Django ou Flask. La vaste collection de modules et de frameworks de Python permet
aux programmeurs de construire rapidement et simplement des applications web et
des API riches en fonctionnalités.

5.3.5. PostgreSQL
La stabilité, la fiabilité et l’évolutivité de PostgreSQL en ont fait un système de
gestion de bases de données relationnelles (SGBDR) open-source de premier plan. La
conformité ACID, l’intégrité des données et la prise en charge des transactions ne sont
que quelques-uns des nombreux avantages qu’il offre. Prenant en charge les types
de données complexes, les techniques d’indexation et l’optimisation des requêtes,
PostgreSQL offre une interface SQL pour la gestion des bases de données. Il fournit
un contrôle de concurrence multi-version (MVCC) pour gérer efficacement plusieurs
actions de base de données à la fois. Les fonctions définies par l’utilisateur permettent
5.4. Outils de dévloppement 48

d’étendre PostgreSQL, qui est accompagné d’une documentation complète et d’une

communauté d’utilisateurs prospère. Il est largement utilisé dans de nombreuses
applications différentes et est compatible avec les principaux systèmes d’exploitation.

5.4. Outils de dévloppement

5.4.1. Visual Studio Code
L’un des logiciels préférés des développeurs, Visual Studio Code, crée par Microsoft,
est un éditeur de code portable et multiplateforme, proposé gratuitement.
Il dispose de fonctionnalités telles que le débogage (debugging), la coloration
syntaxique, l’autocomplétion et l’intégration Git, et prend en charge un grand nombre
de langages de programmation. Il s’agit d’un outil flexible pour les développeurs,
qui peut être modifié grâce à des extensions.

5.4.2. Github
Le contrôle des versions est assuré par GitHub, un service d’hébergement basé sur le
web. Il permet aux programmeurs de conserver, de contrôler et de distribuer leurs
archives de code.
Les développeurs peuvent suggérer des modifications, réviser le code et travailler
sur des projets avec d’autres personnes grâce à des outils tels que les requêtes pull.
L’intégration continue, également proposée par GitHub, permet le déploiement et les
tests automatisés.
GitHub est devenu un point essentiel pour les initiatives open-source, permettant
aux développeurs du monde entier de contribuer et de travailler ensemble sur un
large éventail de logiciels. De plus, la plateforme offre des capacités de gestion de
projet, de suivi des problèmes et une assistance communautaire considérable, ce qui
en fait un outil très utile pour les équipes de développement de logiciels.
Ce dernier a amélioré la collaboration en termes de code et encouragé le développe-
ment de logiciels open source, ce qui a fondamentalement changé la façon dont les
ingénieurs travaillent.
5.5. Description de l’application 49

5.5. Description de l’application

5.5.1. Page d’acceuil

Figure 5.2: Caption

Figure 5.3: Caption

5.5. Description de l’application 50

5.5.2. Page d’inscription

Figure 5.4: Caption

5.5. Description de l’application 51

5.5.3. Page de connexion

Figure 5.5: Caption

Figure 5.6
5.5. Description de l’application 52

5.5.4. Modification de mot de passe

Figure 5.7
5.5. Description de l’application 53

5.5.5. Section de tendances

Figure 5.8
5.5. Description de l’application 54

5.5.6. Carte de produit

Figure 5.9
5.5. Description de l’application 55

5.5.7. Ajoute un produit a vendre

Figure 5.10
5.5. Description de l’application 56

5.5.8. Recherche de produit

Figure 5.11
5.5. Description de l’application 57

5.5.9. Mes annonces

Figure 5.12

5.5.10. Page d’informations

Figure 5.13
5.5. Description de l’application 58

5.5.11. Page de messagerie

Figure 5.14
 6
Conclusion
La croissance des marchés électroniques est au centre des tendances économiques
des années à venir. Le mode de fonctionnement des entreprises, leur interaction avec
les clients et leur comportement sur le marché mondial est déja profondément altérés.
Les technologies de l’information et de la communication deviennent des facteurs de
différence de plus en plus importants sur le marché en raison de leur efficacité et de
leur pertinence. Il s’agit donc d’un objectif stratégique tant pour les entreprises que
pour les administrations.

Après avoir constaté l’intérêt du commerce électronique et les problèmes causés

par les formes traditionnelles et par le e-paiement qui est presque inexistant en algérie,
notre équipe a choisi de créer un application web marketplace-commerce nommé
VintageDZ, elle permet aux utilisateurs de vendre leurs vêtements en ligne avec
d’autres personnes.

Afin de pouvoir présenter correctement notre travail, nous avons commencé par
donner une vue générale du commerce électronique et de l’e-paiement.

Par la suite, nous avons établi une étude préliminaire, visant à déterminer
les différentes parties et les acteurs impliqués dans le système à développer, un
diagramme de cas d’utilisation a été utilisé pour spécifier le fonctionnement du
système.

Le cahier de charge, en particulier, a occupé une place importante dans notre

travail, afin de fournir une vue globale de notre projet, des méthodologies utilisées,
des différents outils et langages de programmation choisis, des besoins fonctionnels
et non fonctionnels et de la modélisation du contexte.

59
 60

Pour d’achever l’étude préliminaire, nous avons identifié et évalué les différents
besoins, en entamant l’analyse des besoins. Cela a nécessité la création, la modification
et l’analyse de la majorité des cas d’utilisation à l’aide de diagrammes UML.

La phase de conception suit l’analyse, Après avoir déterminé les fonctions du

système, nous avons présenté la conception de notre application web, les diagrammes
de séquances et un diagramme des classes, un dictionnaire de données, suivie du
schéma de la base de données créé en appliquant les principes de conversion du
modèle de classes au modèle relationnel.

Enfin, nous avons utilisé une variété d’outils de développement spécialement

conçus pour la programmation web afin de construire notre application.

Nous avons beaucoup bénéficié de cette expérience qui nous a permis d’élargir
nos compétences théoriques et pratiques. En plus de cela, elle nous a permis
d’apprendre de nouvelles choses sur le développement d’applications web et sur la
programmation.