Remerciement…………………………………………………………………………………

Dédicace…………………………………………………………………………………………
Introduction générale ……………………………………………………………….
Chapitre1 : cahier des charges
1. étude préalable…………………………………..................................
2. problématique…………………………………………………………………………..
3. solution proposée……………………………………………………………………..
4. présentation du projet……………………………………………………………………..
5. les besoins fonctionnels……………………………………………………………
6. les besoins non fonctionnels…………………………………………………….
7. conclusion…………………………………………………………………………………

Chapitr2 : PHASE D’Implémentation ………………………………………

1. Liste des abréviations…………………………………………………………….
2. Langages de programmation………………………………………………..
3. Les outils de développement ……………………………………………….
4. Logo de site………………………………………………………………………….
5. La différence entre site statique et site dynamique……………..
6. Digramme de Gantt………………………………………………………………
7. Diagramme de perte…………………………………………………………….
8. Conclusion……………………………………………………………………….....

Chapitre3 : Analyse et conception

Introduction……………………………………………………………………………
Génie logiciel………………………………………………………………………….

UML :
1. présentation ………………………………………………………………………..
2. Pourquoi uml ?…………………………………………………………………….
3. Diagramme de cas d’utilisation…………………………………………….
4. Diagramme de séquence………………………………………………………
5. Diagramme de classe……………………………………………………………
Merise :
1. Modélisation conceptuel des données………………………………..
2. Conclusion…………………………………………………………………………..

Remerciements :
Nous ne pourrions pas commencer ce rapport sans présenter nos remerciements
les plus sincères.
Au nom d`Allah le plus grand merci lui revient de nous avoir aidés vers le
droit. Chemin de nous avoir aidé tout au long de nos années d`étude.
On tient en tout premier lieu, à remercier madame Bouchra boujtat, notre chère
encadrante du mémoire qui n’a épargnée aucun effort pour nous soutenir tout
au long de ce travail, ainsi que ses conseils et orientations qui nous ont été d’un
grand apport. Nous vous prions de trouver ici le témoignage de notre
reconnaissance et respect.
Un grand remerciement à notre directrice de BTS Oujda Mr. ZOUBIR pour les
efforts déployés afin de réussir notre formation.
Un spécial remerciement à Mr. ALI GOUNNI, MR.MOHAMMED
ZOUITNI et MR FADEL AMGHAD et à tous les enseignants de BTS Oujda
pour leurs patiences, orientations, conseils, bienveillances et pour les efforts
qu’elles ont fournis au cours les deux années de formation en vue de développer
nos compétences.
Finalement nous tenons à remercier et à exprimer notre grande gratitude à tous
ceux qui, de près ou de loin, nous ont apporté leurs aides et leurs soutiens pour
l'élaboration de ce travail de fin d'études
Et enfin nous adressons aussi nos vifs remerciements aux membres de notre
équipe qui fait des grands efforts pour réaliser ce travail.

Dédicace :
Nous dédions ce travail avec grand amour et fierté :
A celle qui nous arrosés de tendresse et d’espoirs et d’encouragement.
A nos parents qui nous soutenus financièrement et moralement pendant ces
deux années.
 Nous dédions ce projet à nos professeurs et nos encadreurs. Tout d`abord nous
dédions ce travail à nos chers parents, qui se font sacrifiés pour que nous
puissions terminer nos études et réussir notre vie professionnelle.
A nos chères sœurs et frères et toutes nos familles en reconnaissance de leurs
encouragements.
A nos amis(e), et à nos chères collègues de tous BTS Oujda pour leurs
sympathies et leurs solidarités envers nous.
A tous les techniciens supérieurs et tous ceux qui ont une relation de proche ou
de loin avec la réalisation de ce travail.

INTRODUCTION GENERALE :
Ayant atteindre la douzième année de BTS en développement des systèmes
d’informations, un projet de fin d’étude est demandé d’accomplir. Notre choix
s’est rapporté à concevoir et réaliser un site web commercial.
Ce travail fait partie de projet fin d’études son objectif est exploiter les
connaissances et tout ce que nous avons acquis au cours de ces deux années,
c’est en créant un site web.
Le projet est organisé en quatre parties :
La première partie, est l’une des étapes les plus importantes, car elle étudie le
problème en cours, étudie les besoins du client, et nous permet de trouver une
solution, sans oublier la définition de domaine du projet.
La deuxième partie se concentre sur les logiciels et les langages de
programmations utilisées au cours de ce projet, ainsi que le logo de site web.
La troisième partie est centrée sur la conception, par créer des diagrammes qui
nous aide à organiser le travail entre les membres d’équipe pour faciliter la
compréhension de projet et atteindre un résultat de bonne qualité.
La quatrième partie concerne le développement du site et réaliser tous les
tâches que nous avons précisé en cahier des charges.
afin que les encadreurs comprennent facilement le but et les parties de ce
projet on détaillera chaque étape.
Chapitre 1 : cahier de charge
1. Etude préalable :
L’étude préalable est une étude qui se fait pour éclairer la structure de projet
et comprendre son contenu et son but, cette étude composée de la
problématique, la solution et la définition de domaine, Mais tout d’abord on va
parler autour le domaine de « commerce électronique »

Le commerce électronique désigne le fait de vendre un bien ou un

service par voie électronique, via un réseau Internet. Entreprises et particuliers
peuvent lancer leur activité de e-commerce, tout dépendra ensuite du type de
transaction selon les modèles de commerce électronique.
Le e-commerce présente de nombreux avantages différents. Il permet un achat
plus rapide ainsi que la possibilité de toucher un large public 24 heures sur 24,7
jours sur 7, de traiter des commandes en gros volume, et atteindre des
nouveaux clients facilement.

2. Problématique :
Pour acheter un équipement de communication telle qu’un téléphone portable
ou un ordinateur portable , le client doit se déplacer directement au local de la
société afin de chercher une offre de vente qui satisfait ses besoins. Ses
déplacements peuvent être inutiles et même peuvent provoquer un gaspillage de
temps. D’ailleurs, même le vendeur n’a aucun moyen pour mettre à disposition
ses annonces de vente et services, à l’exception des supports traditionnels tels
que les journaux ou les petites affiches. Ainsi, un moyen fiable et automatisé
permettant d’informer un grand nombre de clients des offres de vente et des
services nécessaires. Divers autres traitements sont, d’ailleurs, sources de
problèmes, adoptant les méthodes traditionnelles de travail :
- le règlement des factures se fait en espèce ou par chèque, sur place.
- l’enregistrement des clients se fait manuellement sur papier.
- les produits sont classés par catégorie (caméra numérique, caméra de
surveillance et matériel sono) et par sous-catégorie non liées et non
hiérarchisées, ce qui rend la recherche plus pénible.
- les documents sont nombreux et mal organisés.

3. Solution proposée :
A l’ère actuelle, tout le monde utilise les nouvelles techniques de l’information et
de la communication (l’internet, smartphone, ...), ainsi que les sites web et les
applications deviennent plus proches de l’humain ou plutôt l’outil principal pour
répondre à toutes les demandes sans besoin de quitter leurs maisons et diminuer
 le taux des infectants par le virus , donc l'achat en ligne est devenu une nécessité
incontournable pour les commerçants. pour cela nous avons pensé de créer UN
SITE WEB COMMERCIAL, qui permet principalement de vendre tous les
produits technologiques (pc bureau, pc portable, télévisions, téléphones, x box,
écouteurs …) .Le site fonctionne automatiquement, et le client peut choisir le
produit qu’il veut et l’acheter d’une manière très simple et notre équipe livrera
le produit au plutôt possible à domicile.
L’ensemble de la transaction, de la commande au paiement se fait à distance. La
vente elle-même peut se faire avec intervention d’un vendeur à distance
(télévente) ou par des moyens écrits.
Après avoir défini la vente à distance, nous allons nous intéresser à la définition
du e-commerce. Le e-commerce désigne l’échange de biens et services entre
deux entités sur les réseaux informatiques, notamment L’internet.

4. présentation du projet :

Comme toutes les sociétés commerciales, RIMtechno possède sa manière de

présenter et de commercialiser ses produits, cette manière est divisée en deux
étapes principales, la premières étape c’est l’exposition des produits par des
affiches publicitaires dans les réseaux sociaux et avec l'aide du client il même qui
peut partager l'annonce du notre site afin qu’il gagner plus du bonuces , la
deuxième étape consiste à vendre les produits avec livraison gratuit a tout le villes
du Maroc.
5. Les besoins fonctionnels :

 Le client reçoit un mail automatique après paiement de sa commande.

 Le client peut modifier la quantité des articles de son panier.
 Le client doit entrer un mot de passe pour accéder à la zone réservée aux
membres.
6. Les besoins non fonctionnels :

 L'email arrive quelques rapidement après achat.

 Le système est suffisamment intuitif pour faciliter l'opération au client.
 Les mots de passe sont stockés de manière sécurisée.
7. Conclusion :
Ce chapitre nous a permis de connaitre le problème auquel de nombreuses personnes
sont confrontées, la solution que nous avons suggérée et le cahier des charges qui
contient toutes les tâches que nous allons réaliser.

CHAPITRE 2 : Phases d’implémentation :

La phase d’implémentation est la plus importante partie après la conception, grâce à

ce chapitre, on peut savoir les langages de programmations qui nous réalisent le
projet, les logiciels avec lesquelles nous travaillerons et aussi la différence entre un
site dynamique et statique .
1. Liste des abréviations :

Css……………….Cascading Style Sheet

Html……………...Hyper Text Transfer Protocol
Php………………Hypertext Preprocessor
Sgbd…………….Système de Gestion de Base de Données
Uml………………Unified Modeling Language
Sql …………...Structured Query Language
2. Les langages de programmations :
PHP est un langage de scripts généraliste et open source, spécialement conçu
pour le développement d’applications web. Il peut être intégrer au HTML
Le grand avantage de PHP est qu’il est extrêmement simple pour les néophytes,

mais offre des fonctionnalités avancées pour les experts.

HTML désigne un type de langage informatique descriptif. Ce langage est utilisé
pour créer des pages web. L’acronyme signifie HyperText Markup Language, ce

qui signifie en français « langage de balisage d’hypertexte »

CSS est l'acronyme anglais de Cascading Style Sheets qui peut se traduire par
"feuilles de style en cascade". Le CSS est un langage informatique utilisé sur
l'internet pour mettre en forme les fichiers HTML ou XML. Ainsi, les feuilles de
 style, aussi appelé les fichiers CSS, comprennent du code qui permet de gérer

le design d'une page en HTML.

Java script : est un langage de programmation qui permet de créer du contenu
mis à jour de façon dynamique, de contrôler le contenu multimédia, d’animer
des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous

pouvez faire bien des choses avec quelques lignes de JavaScript.

MY SQL (My Structured Query Langage-Langage de requêtes structurées) est
un système de gestion de bases de données relationnelles dédiées Open
source. Il est très rapide, fiable et facile à utiliser et gratuit.il a été développé à
l’origine pour gérer des très grandes bases de données beaucoup plus
rapidement que des solutions déjà établies. Il offre un ensemble de
fonctionnalités large et riche. Sa rapidité et sa sécurisation en font un outil idéal
pour les applications internet [7].

3. Outils de développement :

STARTUML : C’est un logiciel de modélisation UML open source sous une

licence modifiée de GNU GPL .L'objectif de ce projet est de se substituer à des solutions
commerciales comme IBM Rational Rose ou Borland Together. StarUML gère la plupart
des diagrammes spécifiés dans la norme UML 2.0.

Microsoft Word est un logiciel de traitement de texte couvre deux notions,

assez différentes
En pratique : Un éditeur de textes interactif et un compilateur pour un langage de mise
en
Forme de textes.

Microsoft Office PowerPoint est un créateur de présentations (succession de

diapositives)
 Il est utilisé pour créer des présentations avec du texte, avec des images, sons, vidéos
et autres
Objets.

PhpMyAdmin : (PMA) est une application Web de gestion pour les

systèmes de gestion de base de données MySQL et Maria DB, réalisée principalement
en PHP et distribuée sous licence GNU GPL.

4. Logo du site :

5. La Différence entre site statique et site dynamique :

Langages statiques VS langages dynamiques
Les pages Web statiques affichent exactement les mêmes informations chaque fois
que quelqu’un les visite. Les pages Web statiques ne sont pas forcément que du
texte. Elles peuvent contenir un design multimédia et même des vidéos. Cependant,
chaque visiteur sera accueilli par le même texte, le même design ou vidéo sauf si vous
modifiez le code source de cette page.
Les pages Web dynamiques offrent un contenu différent pour chaque visiteur à partir
du même fichier de code source. Le site Web affiche, ainsi, un contenu différent
selon le système d’exploitation ou le navigateur utilisé par le visiteur. Le contenu
affiché sur un ordinateur ne sera pas le même que celui affiché sur un appareil
mobile. Si vous croyez qu’une page Web dynamique est meilleure qu’une page Web
statique, détrompez-vous ! Ce n’est pas forcément le cas. Les deux servent
simplement à des buts différents.

6. DIAGRAMME DE GANTT :

Le diagramme de Gantt, couramment utilisé en gestion de projet, est l'un des outils les
plus efficaces pour représenter visuellement l'état d'avancement des différentes
activités (tâches) qui constituent un projet. La colonne de gauche du diagramme
énumère toutes les tâches à effectuer, tandis que la ligne d'en-tête représente les
unités de temps les plus adaptées au projet (jours, semaines, mois etc.). Chaque tâche
est matérialisée par une barre horizontale, dont la position et la longueur représentent
la date de début, la durée et la date de fin.
 7. Conclusion :
Ce chapitre nous a aidés de savoir le nombre d’outils qui seront utilisés dans ce projet
ainsi que les différentes logicielles de réalisation le site web. Maintenant il nous reste
de modéliser le site.

CHAPITRE 3 : ANALYSE ET CONCEPTION :

 INTRODUCTION
la conception est la phase créative d’un projet : Concevoir des projets, c’est-à-
dire utiliser dans son ensemble une méthodologie intégrale et complète
représentant le processus créatif d’un concepteur et ainsi apporter une valeur
ajoutée au projet, non seulement la planification d’un projet, mais aussi à un
niveau supérieur, c’est-à-dire la conception d’un projet dans sa totalité en
tenant compte à la fois des exigences académiques en matière de contenu,
mais aussi des exigences professionnelles d’un monde globalisé
 GéNIE LOGICIEL :

Le génie logiciel couvre l'ensemble du cycle de vie d'un logiciel. Il étudie toutes
les activités qui mènent d'un besoin à la livraison du logiciel, y compris dans ses
versions successives, jusqu'à sa fin de vie.

Les dimensions du génie logiciel sont donc multiples :

 analyse des besoins du client ;

 définition de l'architecture du logiciel ;
 choix de conception ;
  règles et méthodes de production du code source ;
 gestion des versions ;
 test du logiciel ;
 documentation ;
 organisation de l'équipe et interactions avec le client ;
 etc.

Ce livre présente plus en détail certaines de ces activités

1. Présentation d’uml :

2. Pourquoi UML :

UML pour :

 Obtenir une modélisation de très haut niveau, indépendante des langages et

des environnements.

 Faire collaborer des participants de tous horizons, autour d'un même

document de synthèse.

 Faire des simulations avant de construire un système.

 Exprimer dans un seul modèle tous les aspects statiques, dynamiques,

juridiques, spécifications, etc...

 Documenter un projet.

 Générer automatiquement la partie logicielle d'un système

3. Diagramme de cas d’utilisation :

Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour
donner une vision globale du comportement fonctionnel d'un
système logiciel. Ils sont utiles pour des présentations auprès de la direction
ou des acteurs d'un projet, mais pour le développement, les cas
d'utilisation sont plus appropriés. Un cas d'utilisation représente une unité
discrète d'interaction entre un utilisateur (humain ou machine) et un système.
Il Ya 2 acteurs dans notre cas : client qui peut gérer son compte, consulter les
produits, ajout un ou plusieurs produits au panier, passer commande et payer
la facture de la façon qu’il veut.
L’administrateur qui peut gérer les produits, les commandes, les annonces et
les articles ;

4. Diagramme de séquence :

Le diagramme de séquence indique comment le système rend un service en

décrivant l'enchaînement séquentiel des interactions. Les diagrammes de
séquences permettent de décrire COMMENT les éléments du système
interagissent entre eux et avec les acteurs :

 Les objets au cœur d’un système interagissent en s’échangent des

messages.
 Les acteurs interagissent avec le système au moyen d’IHM
(Interfaces Homme-Machine)


5. Diagramme de classe :
Le diagramme de classe est un diagramme faisant partie des diagrammes
structurels et est un des diagrammes d’UML le plus utilisé du fait de sa notation
syntaxique riche. Il représente la structure d’une application orientée objet en
montrant les classes et les relations qui s’établissent entre elles.

1. Modèle conceptuel des données :

Le modèle conceptuel des données (MCD) décrit la signification des données
sur lesquelles reposent les systèmes d'information et les structures. Le MCD est
l'élément le plus connu de MERISE et certainement le plus utile. Il permet
d'établir une représentation claire des données du S.I. et définit les
dépendances fonctionnelles de ces données entre elles.
2. CONCLUSION :
La conception est une étape très importante, et peut-être l’étape la plus
importante dans la création d’un projet, grâce à l’utilisation des diagrammes et
de modèle conceptuel, on peut organiser le travail, présenter toutes les acteurs
et bien préciser les tâches de chacun d’eux.