Rapport Projet Web Ordinateurs

Université Mohammed V – Rabat
École Nationale Supérieure d’Arts et Métiers

Filière : 1ère année EEIN
Rapport
Projet WEB
Réalisé par :
RIHANI Zakaria
OULAASRI Yassine
GUINECH Abdellah
CHAOUNI El Mehdi
Encadré par :
M. GHARBI Salah Eddine
ANNÉE UNIVERSITAIRE : 2020/2021

Table des matières
Introduction générale ................................................................................................................ 01
Chapitre 1 : Etude et analyse du projet .............................................................................. 02
I. Introduction ......................................................................................................................... 03
II. Présentation du projet .................................................................................................... 03
1. Qu’est-ce qu’une boutique en ligne ? ................................................................... 03
2. L’objectif du projet ......................................................................................................... 03
III. Etude de l’existant ............................................................................................................. 03
IV. Critique et solutions ......................................................................................................... 04
1. Critique de l’existant ...................................................................................................... 04
2. Solutions proposées ...................................................................................................... 04
V. Conclusion ............................................................................................................................ 06
Chapitre 2 : Conception du projet........................................................................................ 07
I. Introduction ......................................................................................................................... 08
II. Analyse conceptuelle ....................................................................................................... 08
1. Modèle conceptuel de données .............................................................................. 08
2. Modèle logique de données...................................................................................... 10
III. Outils et langages utilisés .............................................................................................. 11
1. Langages utilisés ............................................................................................................. 11
2. Outils de développement ........................................................................................... 13
3. Conception des pages .................................................................................................. 15
4. Fonctions de base........................................................................................................... 20
IV. Conclusion ............................................................................................................................ 22
Chapitre 3 : Simulation .............................................................................................................. 23
I. Tests de responsivité ...................................................................................................... 24

II. Tests de compatibilité ..................................................................................................... 25
Conclusion ...................................................................................................................................... 29
Webographie................................................................................................................................. 30
PROJET WEB 2020/2021
Introduction générale
Aujourd’hui, le E-commerce est considéré comme un dossier prioritaire par de
nombreuses organisations internationales, surtout depuis que les problèmes liés
à la facture numérique ramènent les politiques des technologies de
l’information, de la communication et du développement sur les devants de
l’actualité. Des recommandations stratégiques spécifiques ont été formulées
dans différents domaines ; infrastructure et services de télécommunications,
fiscalité, protection du consommateur, sécurité des réseaux, protection de la vie
privée et des données. La confiance est un élément crucial pour le
développement du commerce électronique. Il s’agit, essentiellement, d’assurer
aux consommateurs et à l’entreprise des services de réseaux surs, fiables et
vérifiables.
De même, les consommateurs entendent rester maîtres de la collecte de leurs
données personnelles et de l’usage qui en est fait, et veulent être surs d’avoir
accès à des mécanismes de recours adaptés. Pour créer le niveau de confiance
souhaitable, il faut se doter de technologie fiable, de dispositifs de
réglementation et d’auto réglementation appropriés, et pratiquer une
pédagogie du public.
Le présent rapport, qui expose ce travail, est composé de trois chapitres
structurés comme suit :
 Dans le premier chapitre, on va présenter la problématique à résoudre,
l’analyse des besoins, le cahier de charge et l’objectif du projet.
 Le deuxième chapitre sera consacré à la conception du projet, les différents
langages utilisés lors la création du site web ainsi que la phase dynamique
qui concerne la création de la base de données.
 Dans le troisième chapitre on va présenter le résultat final de notre projet les
qualités et défauts, analyse des performances selon différents tests.
ENSAM RABAT Page | 1

CHAPITRE 1
ETUDE ET ANALYSE
DU PROJET

I. Introduction
Dans ce chapitre, on va définir le E-commerce et particulièrement les boutiques en
ligne des ordinateurs. Ensuite, on va déterminer le cahier des charges et les objectifs
à atteindre de ce projet. Ainsi, on s’intéresse à l’étude de l’existant et ses critiques.
II. Présentation du projet

1. Qu’est-ce qu’une boutique en ligne ?
Grâce à une boutique en ligne, on peut choisir et payer des articles comme dans
un magasin réel. Pour acheter un produit de cette boutique virtuelle, il suffit le
plus souvent de choisir les produits désirés puis de les mettre dans un panier
d'achat.
L'acheteur peut, ensuite, remplir un bon et payer sa commande par carte bancaire
ou par un autre moyen de paiement. La commande sera livrée en fonction du
choix de l'internaute et selon les modalités définies par le responsable de la
boutique.
2. L’objectif du projet
L’objectif du projet consiste à développer un site web dynamique d’une
boutique de vente en ligne des ordinateurs.
Ce site permettra de réaliser les opérations suivantes :
• Gérer les relations avec les clients.
• Permettre au client de créer son propre compte.
• Gérer les commandes.
• Mettre en place des promotions.
• Gérer les produits (ajouter, modifier ou supprimer des produits).
En effet, ce site donne aux internautes la possibilité de s’inscrire, effectuer leurs

demandes en ligne, et de recevoir une confirmation immédiate. En plus, les
internautes peuvent consulter en ligne le catalogue et toutes ses nouveautés.
III. Etude de l’existant

Pour acheter un ordinateur ou n’importe quelle produit, le client doit se déplacer
directement au local de la société afin de chercher une offre de vente qui satisfait
ses besoins. Ces 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 qui ne ciblent pas la majorité des clients.
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 et par sous-catégorie non
hiérarchisées, ce qui rend la recherche plus pénible.
• Les documents sont nombreux et généralement mal organisés.
Vu l'accroissement de la technologie Internet, l'achat en ligne est devenu une

nécessité incontournable pour les commerçants.
IV. Critique et solutions

1. Critique de l’existant
La solution actuelle est manuelle, posant ainsi des problèmes différents, à savoir :
• L'abondance des documents dans l'entreprise peut ralentir les services.
• Risque de mélanger les documents ; ce qui peut être fatal.
• Manque de suivi en ligne des clients et des fournisseurs (suivi de livraison,
suivi de commandes).
• La perte de la clientèle est possible, surtout quand le traitement de leurs
demandes traîne ou prend beaucoup de temps pour être livré.
2. Solutions proposées
Grâce à Internet, de nouvelles perspectives de développement apparaissent dans
l'élargissement du marché économique.
La création d’un site Internet a pour but de valoriser l'image de la société et faire
des économies sur différents points. L'utilisation d'Internet, comme segment de
communication de masse, permet également de baisser des coûts marketing et
d'autres frais. Avec la transmission du haut débit et la sécurisation augmentée des
moyens de paiement, la confiance des utilisateurs en ce qui concerne l'e-
commerce est croissante. La plupart des personnes adultes utilisent, aujourd’hui,
Internet pour faire des achats.

Les consommateurs et les entreprises s'orientent de plus en plus vers les

boutiques en ligne qui permettent la comparaison, la disponibilité des produits
et la vérification des prix d’où l’économie considérable du temps.
Ce projet consiste donc à mettre en place un site Web dynamique qui gère la
commercialisation des ordinateurs. Ceci est possible à travers des catalogues en
ligne proposant différents produits aux meilleurs. La société n’aura donc qu’à
agencer ses produits et bien sûr de mettre sa base de données à jour.
Les clients peuvent consulter le site après une inscription, et commander les
produits, qui sont par la suite livrés à domicile.
Cette boutique en ligne permettra d’offrir beaucoup des services à savoir :
• Consultation des catalogues et spécifications des produits.

• Gérer et lancer une commande en ligne.
Cette application Web permettra de cibler une nouvelle catégorie de clientèles

(locale et internationale), et d’offrir une meilleure qualité de service en
communication et en commerce.
Ce site devra contenir deux interfaces séparées :
➢ Partie administrateur du site : Cette partie permettra le stockage des

documents et leur publication sur internet. Ce mécanisme est accompli par
l’administrateur du site qui doit s’authentifier avec son login et son mot de passe
à partir de la page d’accueil. Après son authentification comme administrateur,
il pourra accéder à la page qui lui permettra de gérer les outils d’administration.
Le site affichera toutes les tâches qui peuvent être effectuées par
l’administrateur qui pourra :
✓ Ajouter un produit : chaque produit est caractérisé par son nom son
prix et ses spécifications.
✓ Gérer des comptes : ajout ou suppression d’un compte. Chaque compte
est caractérisé par le login, le mot de passe, le nom et le prénom de
l’administrateur.
✓ Déconnexion : cela permet la sécurité de l’interface.
➢ Partie client : Cette interface doit être accessible à n’importe quel internaute
cherchant des produits et effectuant des commandes, de même le compte est
caractérisé par le login, le mot de passe, le nom et le prénom du client.

V. Conclusion
A travers le cahier des charges qu’on a cité ci-dessus, on comprend bien que
l’interface web que on va réaliser est un site web dynamique mais pour
l’implémenter on a besoin de faire une étude conceptuelle du site.
Dans cette étape on va traiter le travail qu’on a réalisé présentant les outils utilisés
et l’organisation et démarches suivies.

CHAPITRE 2
CONCEPTION DU
PROJET

I. Introduction
Dans ce chapitre, on va présenter la solution conceptuelle que on a proposée en
utilisant la méthode MERISE. Cette conception du système à réaliser est un modèle
peut être défini comme étant une image de la réalité.
En d’autres termes, ce chapitre devrait répondre à la question : comment faire ? C’est-

à-dire les diffèrent langages et outils de développement utilisé ainsi que la phase de
réalisation de ce site web avec ses deux parties : la première partie représente le coté
statique HTML CSS JS alors que la seconde partie concerne le coté dynamique PHP et
MSQL.
II. Analyse conceptuelle

Un modèle peut être défini comme étant une image de la réalité. Toute réalité
complexe doit être représentée afin d’être comprise et maîtrisée.
Dans cette partie, nous utilisons la méthode MERISE, cette méthode est basée sur la
séparation des données et des traitements à effectuer en plusieurs modèles
conceptuels et physiques, pour modéliser une base de données.
1. Modèle conceptuel de données

Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle les
données qui seront utilisées par le système d'information. Cette étape consiste à
déterminer les différentes entités et les relations entre elles dans une base de données.

Categories Product
Id_categ : Integer Id_pc : Integer

Family : characters (256) 1, n 1, 1 Name : Characters (256)
Descrip : Text Appartenir Description : Text
Img : Text Price: Float
Old_price: Float
1, 1
1, 1 Family: characters (256)
Img: Text
Gérer
0, n
Modifier
0, n Client
Id_users : Integer
Admin Username : Characters (256)
Id_adm : Integer mail_users : Characters (256)
Name_adm : Characters (256) Pwd_users : LongText
Pwd_adm: LongText
0, n
0, n
Commande
Valider 0, 1 Id_comd : Integer 0, n Commander

Id_fact : Characters (256) Quantité
Date_pai : Date
Date_liv : Date
Figure 1 : Modèle Conceptuel de Données

2. Modèle logique de données

Le modèle logique de données a pour but d’ajouter au modèle conceptuel de données
la notion d’organisation c’est à dire comment les données seront organisées dans la
base de données.
Categories Product
Id_categ Id_pc
#Id_adm #Id_adm
Family #Id_categ
Descrip Name
Img Description
Price
Old_price
Family
Img
Client
Admin Id_users
username
Id_adm mail_users
Name_adm Pwd_users
Pwd_adm
Commande Commander
Id_comd #Id_comd
#Id_adm #Id_users
Id_fact Quantité
Date_pai
Date_liv
Figure 2 : Modèle Logique de Données

III. Outils et langages utilisés

Pour réaliser ce projet nous avons eu l'occasion d'utiliser quelques outils de
développement, des langages de programmation, et aussi quelques logiciels de
développement.
1. Langages utilisés
a. HTML
Afin d'être au standard du W3C sur la famille HTML, nous avons utilisé le HTML5, Il
s'agit de la nouvelle version du langage HTML, avec de nouveaux éléments, attributs et
comportements ; mais aussi un ensemble plus large de technologies qui permettent des
sites web plus variés et puissants, et des applications web. Cet ensemble est parfois
appelé HTML5 & Cie et est souvent juste abrégé en HTML5.
b. CSS
Afin de manipuler la présentation, nous avons utilisé des feuilles de style CSS. Pour les
raisons suivantes :
D’une part, il permet d’alléger le code source écrit en HTML, puisque tout ce qui est
relatif à la présentation est géré dans un fichier séparé. Ce qui entraîne donc un
chargement plus rapide des pages, qui est après manipulé par la feuille de style.
Et d’autre part, il permet de nous retrouver plus facilement dans notre code et ainsi
facilite les modifications à effectuer, puisqu’au lieu d’avoir à modifier toutes les pages
une à une, nous avons juste à modifier le fichier CSS.
c. DOM et JAVASCRIPT
Une fois la feuille HTML générée, nous pouvons afficher et interagir dynamiquement
avec la page de l'utilisateur grâce au JavaScript et au Document Object Model, il sert
donc à définir comment la page Web doit réagir aux différents comportements des
utilisateurs.

d. PHP
Pour le coté serveur, nous avons choisi le langage PHP, ceci pour plusieurs raisons :
Tout d’abord, le PHP gère très bien les requêtes SQL. Ce qui est important pour
manipuler les résultats de requêtes SQL.
Mais aussi, le PHP possède beaucoup de fonctions utiles telle que la cryptologie,
fonctions de traitement de base de données, mathématique, etc…
Enfin, le PHP est un des langages coté serveur le plus utilisé, il existe une grande
communauté d’utilisateurs de PHP.
Exemples d’utilisation :
✓ Cryptage de mot de passe
✓ Traitement des différents formulaires
✓ Utilisation de variables de session
e. SQL
L'association PHP/MySQL est de plus en plus utilisée ces dernières années. C'est
pourquoi nous avons choisi le MySQL qui fait partie des logiciels de gestion de base
de données les plus utilisés au monde, autant par le grand public (applications web
principalement) que par des professionnels, il offre de grandes performances en
flexibilité. Il intègre de nombreuses fonctionnalités et assure une bonne sécurité des
données.

2. Outils de développement
a. Visual Studio Code
Visual Studio Code est un éditeur de code source qui peut être utilisé avec une variété
de langages de programmation, notamment Java, JavaScript, Go, Node.js et C++. Il est
basé sur le cadre Electron, qui est utilisé pour développer des applications
Web Node.js qui s'exécutent sur le moteur de présentation Blink.
Figure 3 : Illustration l'utilisation de Visual Studio Code
Depuis la version 1.56, sortie April 2021, l'éditeur prend en charge 44 langages de
programmation majeurs, tandis que des plugins sont souvent disponibles pour les
langages plus rares.

b. XAMP
Figure 4 : Illustration l'utilisation de XAMPP
C’est un ensemble de logiciels permettant de mettre en place facilement un serveur

Web local, un serveur FTP et un serveur de messagerie électronique. Il s'agit d'une
distribution de logiciels libres (X (cross) Apache MariaDB Perl PHP) 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.

3. Conception des pages
Comme l’anglais est la langue la plus utilisée dans différents domaines partout dans
le monde on a choisit de créer notre sit web nommé " LabShop " en langue anglaise
pour cibler le maximum de clients du monde.
Le site est composé de cinq pages principales :
• Page « Home » :
C’est la page d’acceuil qui contient les différents catégories d’ordinateurs, à
savoir ( ASUS, LENOVO et DELL ), ainsi qu’un footer contenant le « à propos »
de la boutique et des liens vers les réseaux sociaux, des liens rapides pour un
accès fluide à certaines parties du site ainsi que les informations, contacts et
local de la boutique.
Figure 5 : Page d’accueil du site
Le contenu affiché sur la page d’Accueil est créé par le HTML utilisant les différents
balises notamaent les "<div>" pour séparer les conteneur de texte et d’images et les
bien positionner sur l’écran, les "<ul>" pour les informations en liste tels que les Quick
Links et Contact Info du footer, les "<i>" pour créer des icones des réseaux sociaux
telle que celle de Facebook, Instagram, Twitter et Youtube.

Le style de la page Home est purement fait par le CSS, telles que les cercles de l’arrière
plan ayant un thème plus ou moins flou au centre. Ainsi toutes les couleurs des texte
et des conteneurs de texte sont choisies de façon à donner un thème sombre au site.
Grâce à CSS, on pu modifier et peronnaliser le passage de la souris sur les boutons
de la barre de navigation, ainsi que tous les lien « hypertext » pour assurer l’utilisateur
qu’il se positionne sur un tel ou tel élement du site.
Le thème créé sur la page Home est reproduit sur toutes les pages du site pour avoir
le même arrière plan.
La police du texte est choisie des polices de google fonts qui en propose une grande
variété à pourvoir intégrer dans son projet en utilisant l’exemple la liaison suivante :
<link
href="https://fonts.googleapis.com/css2?family=Acme&family=Righteous&display=
swap" rel="stylesheet"> , et de même pour les icones avec la librairie font-awesome.
Grâce au JavaScript, on a pu implémenter l’astuce de mouvement en contre sens 3D

lié au mouvement du curseur, sur les conteneurs des trois catégories présentes dans
la capture d’écran de la page d’accueil précédente.
• Page « Login » :
•
C’est la page de connexion qui permet aux utilisateurs de s’identifier par le

nom d’utilisateur « username » et le mot de passe « password » ou par l’un
des réseaux sociaux mentionnés juste après le bouton "login“.
La connexion au site est nécessaire pour faire des achats, sinon le client doit
s’inscrire au site à travers la page ( SignUp ).
Figure 6 : Page de connexion au site

Il est nécessaire de remplir les deux champs du Login, sinon un message est affiché
« Fill all fields ! » imposant à l’utilisateur de les remplir tous.
Lors de la connexion, les données de connexion à savoir le nom d’utilisateur et le mot

de passe sont gardées dans le stockage de session jusqu’à fermeture du navigateur,
ceci est implémenté grâce au javascript utilisant l’objet « sessionStorage » pour
permettre à l’utilisateur de ne pas retaper à chaque fois son "Username" et son
"Password" tant que le navigateur n’est pas fermé.
• Page « SignUp » :
•
C’est la page d’inscription au site pour les nouveaux clients voulant effectuer
des achats sur la boutique en ligne. On peut y accéder seulement à partir de
la page Login qui contient un lien pour les gens qui n’ont pas de compte.
Lors de l’inscription, comme dans le login, il est nécessaire de remplir tous les
champs, si jamais l’utilisateur saute l’un des champs il lui est affiché « Fill all
fields » comme le montre la capture d’écran suivante.
Figure 7 : Page d’inscription au site
Une fois l’utilisateur crée un compte, les données entrées dans les différents champs
du SignUp sont envoyées et stockées dans la base de données préalablement créée
par l’administrateur grâce au langage PHP et le serveur virtuel XAMPP qui permettent
de gérer les comptes des utilisateurs, et leur donner accès lors du Login.

Ainsi l’utilisateur a la possibilité de se connecter utilisant son nom d’utilisateur et mot

de passe qui constituent une requête SQL à traiter par le langage PHP pour vérifier si
l’utilisateur est déjà inscrit dans la base de données, sinon un message d’erreur apparait
« This user does not exist ».
Dès lors l’utilisateur possède son propre panier à y ajouter ou en supprimer des articles
des différents catégories comme le montre la capture ci-après.
Grâce au javascript on a pu faire le code qui gère le panier et la quantité d’articles

choisie en incrémentant ou décrémentant le nombre d’articles sur l’icône du panier,
ainsi que le prix total de la commande.
Figure 8 : Panier d’un utilisateur
• Page « Send Us A Message » :

•
C’est la page qui permet aux clients de contacter la boutique, soit pour une
réclamation, pour une impression sur les services de la boutique ou même
pour des remarques et conseils.
Comme vous allez remarquer la barre de navigation n’existe pas dans toutes
les pages du site et remplacé par un lien « hypertext » pour faire le retour à
l’acceuil comme indiqué sous le bouton d’envoi « Send » dans la capture
d’écran ci-dessous.

Figure 9 : Page pour contacter la boutique
Lorsqu’un client veut fournir son avis sur le site, il est aussi nécessaire de remplir tous
les champs du formulaire « Send Us A Message », notamment la zone de texte qui va
contenir le message.
Après un clic sur le bouton « Send », le message de l’utilisateur est envoyé vers la boite
mail de la boutique.
• Page « Our Team » :

•
C’est une page qui présente les membres de l’équipe du projet, elle est
constituée se quelques mots sur chaque membre, l’image et les réseaux
sociaux associés à chacun.
Figure 10 : Page représentative des membres de l’équipe

4. Fonctions de base
On a nommé fonctions de base certaines fonctionnalités principales de notre site
web qui sont réalisées pour rendre le site web plus interactif avec l’utilisateur
employant des messages de retour clairs et significatifs.
a. Système Remember me
Garder une session active ça veut dire que l'utilisateur ne va pas se déconnecter
de son compte quand il ferme le navigateur, alors il peut garder sa session active
jusqu’il se déconnecte lui-même de son compte utilisant le bouton de
déconnexion.
Figure 11 : Fonction Remember me
Pour ce faire, deux moyens de stockage dans le navigateur sont utilisés :
Session : le système d’authentification crée une session dont la durée de vie est
limitée dans le temps, elle dépend de la durée de vie de la fenêtre du navigateur.
Ainsi la fermeture du navigateur arrête la session.
Cookies : ce sont de petits fichiers texte permettant de sauvegarder des
informations personnelles. Ils peuvent y mémoriser votre nom d'utilisateur et mot
de passe pour éviter de redemander ultérieurement.
Alors si l’utilisateur veut activer ce service, il suffit de cocher le CheckBox

« Remember me » pour garder sa session active.

b. Système d’alerte
Ce site web est basé sur le PHP, donc les requêtes sont asynchrones sans actualiser
la page, pour cette raison, nous avons créé un système d'alerte qui nous permet de
notifier l’utilisateur du succès ou de l’échec de l’opération, après un traitement de
disponibilité et validité des données entrées.
c. Système de hachage du mot de passe
Figure 12 : Fonction de hachage du mot de passe
Dans la figure ci-dessus, nous avons utilisé la fonction PHP hash () pour hacher le
mot de passe entré par l’utilisateur.
Un hash est le résultat de l’application d’une fonction de hachage cryptographique.

Ces fonctions de hachage sont particulièrement adaptées pour le stockage de mot

de passe :
• A partir du hash, il est impossible de retrouver directement le mot de passe

d’origine.
• Il est statistiquement impossible que deux mots de passe différents donnent le
même hash.
Il existe de nombreuses fonctions de hachage : MD5, SHA-1, SHA-256, SHA-512.

On a utilisé l’algorithme de hachage SHA256 qui génère et applique
automatiquement une chaîne aléatoire (salt) propre pour chaque utilisateur afin
d’effectuer un hash de la concaténation entre le "salt" et le mot de passe ; cela
signifie que même si deux utilisateurs ont les mêmes mots de passe, leurs hachages
de mots de passe seront différents.
VI. Conclusion
Utilisant le HTML, CSS, JAVASCRIPT et PHP, et à l’aide des outils de développements
mentionnés avant, la création du projet a été bien réussie.
Vus les études en distanciel, on a pensé à héberger le site web sur le 000webhost
qui offre un hébergement gratuit pour une possibilité de faire des tests sur le site
par tous les membres de l’équipe. C’est le sujet du dernier chapitre.

CHAPITRE 3
SIMULATION

I. Tests de responsivité
Les tests de responsivité permettent de s’assurer du bon fonctionnement et affichage

du site web sur différentes tailles d’écrans que ça soit sur les ordinateurs portables, les
tablettes ou les smartphones.
Utilisant le navigateur Firefox qui permet de faire ces tests sur différents exemples
d’appareils ayant des écrans de tailles différentes.
• Galaxy S9/S9+ Android 7.0
La barre de navigation est transformée en un menu descendant pour un bon affichage

sur les Galaxy S9 de taille 360x740 comme le montre les captures ci-dessous.
Figure 4 : Test de responsivité sur le Galaxy S9/S9+

• iPad
Les conteneurs se positionnent selon la taille de l’écran comme le montre le test sur un
iPad de taille 768x1024 dans les captures d’écran ci-dessous.
Figure 15 : Test de responsivité sur l’iPad
II. Tests de compatibilité
Les tests de compatibilités montrent la capabilité du site à s’adapter aux différents

compilateurs ou on peut dire les moteurs javascript des différents navigateurs, tel que
le SpiderMonkey pour le FireFox, le V8 pour le Chrome, le Chakra pour le Edge …etc.
Ces différents compilateurs s’occupent de charger le code et le convertir en binaire
pour que le navigateur puisse le traiter et afficher le contenu sur des pages web, et
chaque navigateur a sa propre manière d’interpréter les codes, chose qui exige au
programmeur de faire adapter son site à la plupart des navigateurs.
Comme il n’y a pas une grande différence entre le FireFox le Chrome et le Edge, notre
site web marche bien sur les trois comme le montre les figures suivantes.

• Test sur le navigateur FireFox
Figure 16 : Page d’Accueil sur FireFox
Figure 17 : Page de Login sur FireFox
On remarque que dans le champ du mot de passe lors de la connexion, le navigateur

FireFox ne donne pas la possibilité de masquer ou afficher le mot de passe (de même
pour le navigateur Chrome). Par contre le navigateur Edge donne par défaut cette
possibilité.

• Test sur le navigateur Edge
Figure 18 : Page d’Equipe sur Edge
Figure 19 : Page de Login sur Edge
Par défaut sur Edge, il y un petit œil qui masque ou affiche le mode de passe pour les
champs de type « password ».

• Test sur le navigateur Chrome
Figure 20 : Page d’Accueil sur Chrome
Figure 21 : Page de SignUp sur Chrome
Généralement Il n’y a pas une grande différence à l’affichage de notre site web pour
les différents navigateurs cités ci-dessus vu qu’ils sont de versions récentes, mais il se
peut qu’il y ait une différence remarquable pour les anciens navigateurs des années 90
et avant.

Conclusion
Ce projet consistait à créer un site web dynamique, il s’agit d’une boutique de vente
en ligne des appareils électroniques et spécialement les ordinateurs portables.
Au cours de la création de notre projet, nous avons essayé d’appliquer tous ce qu’on a
acquis sur les différents langages du développement WEB, et même nous avons fait
des efforts pour bien comprendre quelques aspects avancés, surtout en ce qui
concerne le JAVASCRIPT, le PHP et les systèmes de gestion de bases de données.
La création du site web de la boutique a commencé par la mise en place du modèle

sur lequel vont se baser les différents pages constituant le site, puis la création du
contenu des pages web qui change de l’une à l’autre selon la fonction de chaque page,
ensuite le contenu est stylisé pour bien apparaitre et plaire aux utilisateurs, enfin le site
est lié à une base de données pour le rendre dynamique en se basant sur le MCD et
MLD.
C’est en gros les étapes générales de la création de notre projet, et c’était une occasion
pour améliorer nos compétences en programmation ainsi qu’on conception surtout
que le développement WEB ne fait pas partie des éléments majeurs de notre domaine
génie électrique.
Dans de prochains projets, nous essayerons de travailler avec des Frameworks qui
permettent une manière facile et fluide de programmer réduisant le travail en termes
de temps, efficacité et performances.

Webographie
HTML, CSS, JS, PHP :
• Exemples de code : https://www.w3schools.com/

• Aide sur les problèmes rencontrés : https://stackoverflow.com/
• Détails sur la syntaxe : https://developer.mozilla.org/fr/
Consulter le site web sur :
• http://labshop-ensam-rabat.000webhostapp.com
Consulter le code du site web sur :
• https://github.com/Zakaria-Rihani/Labshop

Rapport Projet Web Ordinateurs

Transféré par

Droits d'auteur :

Formats disponibles

Rapport Projet Web Ordinateurs

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport Projet Web Ordinateurs

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohammed V – Rabat

École Nationale Supérieure d’Arts et Métiers

ANNÉE UNIVERSITAIRE : 2020/2021

Introduction générale ................................................................................................................ 01

Chapitre 1 : Etude et analyse du projet .............................................................................. 02

Chapitre 2 : Conception du projet........................................................................................ 07

Chapitre 3 : Simulation .............................................................................................................. 23

I. Tests de responsivité ...................................................................................................... 24

ENSAM RABAT Page | 1

ENSAM RABAT Page | 2

II. Présentation du projet

En effet, ce site donne aux internautes la possibilité de s’inscrire, effectuer leurs

III. Etude de l’existant

ENSAM RABAT Page | 3

Vu l'accroissement de la technologie Internet, l'achat en ligne est devenu une

IV. Critique et solutions

ENSAM RABAT Page | 4

Les consommateurs et les entreprises s'orientent de plus en plus vers les

• Consultation des catalogues et spécifications des produits.

Cette application Web permettra de cibler une nouvelle catégorie de clientèles

Ce site devra contenir deux interfaces séparées :

➢ Partie administrateur du site : Cette partie permettra le stockage des

ENSAM RABAT Page | 5

ENSAM RABAT Page | 6

ENSAM RABAT Page | 7

En d’autres termes, ce chapitre devrait répondre à la question : comment faire ? C’est-

II. Analyse conceptuelle

1. Modèle conceptuel de données

ENSAM RABAT Page | 8

Id_categ : Integer Id_pc : Integer

Valider 0, 1 Id_comd : Integer 0, n Commander

Figure 1 : Modèle Conceptuel de Données

ENSAM RABAT Page | 9

2. Modèle logique de données

Figure 2 : Modèle Logique de Données

ENSAM RABAT Page | 10

III. Outils et langages utilisés

ENSAM RABAT Page | 11

✓ Cryptage de mot de passe

✓ Traitement des différents formulaires

✓ Utilisation de variables de session

ENSAM RABAT Page | 12

a. Visual Studio Code

Figure 3 : Illustration l'utilisation de Visual Studio Code

ENSAM RABAT Page | 13

Figure 4 : Illustration l'utilisation de XAMPP

C’est un ensemble de logiciels permettant de mettre en place facilement un serveur

ENSAM RABAT Page | 14

3. Conception des pages

Figure 5 : Page d’accueil du site

ENSAM RABAT Page | 15

Grâce au JavaScript, on a pu implémenter l’astuce de mouvement en contre sens 3D

C’est la page de connexion qui permet aux utilisateurs de s’identifier par le

Figure 6 : Page de connexion au site

ENSAM RABAT Page | 16

Lors de la connexion, les données de connexion à savoir le nom d’utilisateur et le mot

Figure 7 : Page d’inscription au site

ENSAM RABAT Page | 17

Ainsi l’utilisateur a la possibilité de se connecter utilisant son nom d’utilisateur et mot

Grâce au javascript on a pu faire le code qui gère le panier et la quantité d’articles