Boutique en ligne avec PHP/MySQL et avec le CMS

Transcription

Département d’Informatique
Université de Fribourg, Suisse
http://diuf.unifr.ch
Boutiques en ligne avec PHP/MySQL et avec le CMS
Opencart
Deux approches au développement d’un site de
E-commerce
DENIZ ONMUS
No étudiant : 14-215-800
Fribourg, Avril 2016
Travail de séminaire en Informatique de Gestion
Encadré par :
Prof. Dr. Jacques Pasquier – Rocha
Table des matières
1 Introduction .............................................................................................. 1
2 Vision ........................................................................................................ 3
2.1 Présentation générale.................................................................................................... 3
2.2 Fonctionnalités particulières ........................................................................................ 3
2.3 Changement de voie ..................................................................................................... 4
3 Réalisation : première tentative avec PHP/MySQL ..................................... 5
3.1 Modèle entité/association ............................................................................................. 5
3.2 Conversion en tables relationnelles .............................................................................. 6
3.3 Début du site................................................................................................................. 7
3.3.1 Installation de Wamp .................................................................................................... 7
3.3.2 Structure générale du site .............................................................................................. 8
3.3.3 Utilisation .................................................................................................................... 10
3.4 Limites de l’approche ................................................................................................. 12
4 Réalisation : deuxième tentative avec le CMS Opencart ...........................14
4.1 Pourquoi avoir choisi Opencart ? ............................................................................... 14
4.2 Concepts généraux d’Opencart .................................................................................. 15
4.2.1 Une prise en main facile pour les débutants ................................................................ 15
4.2.2 Un système de layouts personnalisés .......................................................................... 16
4.2.3 Une personnalisation poussée ..................................................................................... 16
4.3 Choix personnels et autres adaptations ...................................................................... 17
4.3.1 Installation d’un pack de langue française .................................................................. 17
4.3.2 Un thème personnalisé en remplacement de celui par défaut ..................................... 18
4.3.3 Des bannières personnalisées ...................................................................................... 19
5 Présentation du site final du point de vue de l’utilisateur ..........................20
5.1 Inscription et Login .................................................................................................... 20
5.1.1 Inscription ................................................................................................................... 20
5.1.2 Login ........................................................................................................................... 21
5.2 Processus de commande ............................................................................................. 22
5.2.1 Choix des articles ........................................................................................................ 22
i
5.2.2 Confirmation de la commande .................................................................................... 25
5.3 Autres fonctionnalités ................................................................................................ 25
5.3.1 Un système de points de fidélité ................................................................................. 25
5.3.2 Possibilité de séparer les clients par groupes .............................................................. 26
5.3.3 Avis des clients sur un produit .................................................................................... 26
5.3.4 Un système de notifications complet........................................................................... 27
5.3.5 Un programme d’affiliation ........................................................................................ 27
6 Conclusion ...............................................................................................28
A Fichier .zip des ressources ......................................................................29
Bibliographie ................................................................................................30
ii
Liste des figures
Figure 1 : Modèle entité-association .......................................................................................... 5
Figure 2 : Schéma de la base de données, représentée avec MS Access .................................... 6
Figure 3 : Installation de Wamp ................................................................................................. 7
Figure 4 : page d'accueil du site Skateboard-shop .................................................................... 8
Figure 5 : structure des fichiers principaux du site .................................................................... 9
Figure 6 : le panier du client .................................................................................................... 11
Figure 7 : Formulaire des données du client............................................................................ 12
Figure 8 : Installation d'Opencart (source : blog.rosehosting.com)........................................ 15
Figure 9 : tableau de bord de l'administrateur ........................................................................ 16
Figure 10 : page d'édition de la bannière "manufacturers" ..................................................... 19
Figure 11 : les différentes fonctions du compte d'un client ...................................................... 21
Figure 12 : formulaire d'inscription comme nouveau client .................................................... 22
Figure 13 : Présentation par défaut des produits ..................................................................... 23
Figure 14 : Le panier en vue minimaliste ................................................................................. 24
Figure 15 : le panier en vue complète ...................................................................................... 24
Figure 16 : Champs pour écrire un avis ................................................................................... 26
Figure 17 : Panneau de notifications de l'administrateur ........................................................ 27
iii
Liste des codes
Code 1 : code de connexion à la BDD en utilisant la méthode "PDO" .................................. 10
Code 2 : Ajout du bouton "offres spéciales" à la barre de menu ............................................. 18
iv
1
Introduction
Le e-commerce est une forme de commerce en pleine mutation. En effet, les ventes par ecommerce représentent aux États-Unis près de 7% des ventes de détail totales, contre 2.8%
une décennie plus tôt. En Europe, le e-commerce représente environ 400 milliards d’euros1 de
chiffre d’affaires chaque année, avec une croissance annuelle de plus de 16% 2. Cette
informatisation du commerce ouvre des horizons nouveaux pour les entreprises voulant
agrandir leur public cible et donne aux personnes indépendantes voulant se lancer dans le
monde des affaires de formidables outils leur permettant de créer leur propre affaire même
avec de faibles connaissances informatiques.
Pour créer une plateforme de vente en ligne, il est possible d’utiliser 2 méthodes. La première
est celle du développement web en utilisant des pages web dynamiques générées par un
langage tel que PHP et un système de gestion de base de données tel que MySQL.
La deuxième consiste à utiliser un CMS (Content Management System) qui nous permettra
d’administrer quasi-entièrement notre site de manière graphique. Ce travail était prévu au
début au départ pour ne concerner que la première méthode, mais il a été jugé que la méthode
du CMS méritait aussi quelques explications et présentait de nombreux avantages par rapport
à la première.
Dans le chapitre 2 de ce travail, nous allons développer notre vision et éclairer les raisons
pour lesquelles un virage à 90° a été pris dans ce travail par rapport à la problématique initiale
du développement d’un site de e-commerce. Ensuite, dans le chapitre 3, puis dans le chapitre
4, nous allons exposer respectivement les tentatives avec PHP/MySQL et avec le CMS
Opencart pour arriver à nos fins. Au chapitre 5, notre site internet crée avec Opencart sera
1
Selon RETIS, l’e-commerce en quelques chiffres,
http://www.retis.be/introduction/statistiques-ecommerce/ , dernière visite
30.03.2016
2 Selon Ajemconsultants.com , chiffres sur le e-commerce,
http://www.ajemconsultants.com/admin/quelques-chiffres-sur-le-ecommerceissus-du-dernier-rapport-de-ecommerce-europe-devoile-a-barcelone-lors-dudernier-global-e-commerce-summit/ , Dernière visite 30.03.2016
1
Introduction
2
présenté de manière approfondie. Enfin, le chapitre 6 servira à faire une conclusion sur ce que
nous avons acquis et expérimenté.
Les conventions d’écriture utilisées dans ce travail comprennent :
-
Nom de fichier ou chemins d’accès : exemple
-
Légende d’une figure ou d’un code : Figure x : Installation de xxxx
-
Code source : 1
echo ‘exemple d’une première ligne’ ;
2
Vision
2.1 Présentation générale
Au début de ce travail, le but était de faire un site qui permette à un vendeur indépendant de
créer une boutique en ligne pour vendre des moyens de transport urbains tels que des
gyroskates, des trottinettes (tant électriques que non-électriques) et plus encore. Le site devait
avoir une présentation de chaque article, un système de panier, et un système d’enregistrement
des commandes dans une base de données relationnelle.
Pour cela, le langage de programmation de pages web dynamiques PHP (pour PHP :
Hypertext Preprocessor) ainsi que le SGBD MySQL ont été choisis. En effet, PHP et MySQL
sont très répandus dans le domaine du développement web. La dernière version de PHP, la
version 7.0, permet d’augmenter les performances de plus de 50% dans certains cas par
rapport à la version précédente, PHP 5.6.
Cependant, PHP étant un langage de programmation server-side, il fallait installer un serveur
web sur notre ordinateur pour que le code PHP soit lu. Cela a été rendu possible grâce au
logiciel Wamp pour Windows qui réunit en un seul programme un serveur Apache livré
directement avec une installation de PHP et de MySQL, ce qui nous facilite la mise en place
de notre environnement de travail.
2.2 Fonctionnalités particulières
Ce projet avait pour cahier des charges :
-
Une page pour visualiser une liste de produits générée grâce aux données de la BDD.
-
Un système de panier pour que le client puisse visualiser à tout moment les produits
qu’il a ajoutés à son panier, et le cas échéant, les supprimer.
-
Une option pour choisir la quantité désirée.
-
Un message montrant quel produit a été ajouté au panier ou supprimé du panier.
3
Vision
4
-
Une page qui sert à récolter les données personnelles du client pour que la livraison
s’effectue.
-
Une page qui résume le nombre de produits commandé et qui remercie le client.
-
Un système pour permettre à l’administrateur d’ajouter ou de supprimer des produits
dans la BDD sans toucher au code.
2.3 Changement de voie
À mi-chemin, il a été jugé que le projet de départ était trop ambitieux pour être implémenté
par un simple étudiant en gestion d’entreprise. En effet, le site ne saurait pas répondre aux
exigences car on arrivait à un point ou les fonctionnalités restantes telles que les
enregistrements des achats dans la BDD se révélaient trop complexes à développer. Cette
première tentative s’est donc soldée par un échec, quoiqu’il a été intéressant et enrichissant
d’un point de vue pratique.
La solution pour remédier à ce problème a été de passer à l’utilisation du CMS Opencart, qui
permet de développer des boutiques en ligne personnalisées. La version 2.0 de ce CMS, sortie
le 1er octobre 2014, ajoute des fonctionnalités très utiles telles que la possibilité de faire une
boutique respectant le principe du responsive design ainsi qu’une refonte du système
d’administration du site3.
Notre choix s’est porté sur ce CMS car il est l’un des plus utilisés au monde, tout en étant
open-source. De plus, il est très facile à manœuvrer pour un débutant et offre un large choix
de thèmes et d’extensions (gratuits et payants) dans son store en ligne, ainsi qu’une
documentation assez détaillée.
3
http://wiki.opencarthelp.com/doku.php?id=opencart_200x_versions
3
Réalisation : première tentative avec
PHP/MySQL
3.1 Modèle entité/association
Figure 1 : Modèle entité-association
5
Réalisation : première tentative avec PHP/MySQL
Notre modèle entité-association peut être décrit comme suit :
-
Un client peut passer une ou plusieurs commandes et une commande ne peut être
passée que par un seul client
Une commande concerne l’achat de 1 ou plusieurs produits, et un produit peut être
inclus dans 0,1, ou plusieurs commandes.
Un produit appartient à une catégorie et une catégorie contient plusieurs produits.
Un produit est fourni par un seul fournisseur, mais un fournisseur peut fournir
plusieurs produits.
Nous pouvons voir à ce stade que nous aurons besoin de 6 tables, dont une table de jointure
pour représenter la relation m-mc entre la table commande et la table « produit ».
3.2 Conversion en tables relationnelles
Figure 2 : Schéma de la base de données, représentée avec MS Access
6
Pour générer une représentation de nos tables qui soit lisible et compréhensible, nous avons
dû utiliser le logiciel Microsoft Access qui possède une fonction intégrée qui permet une telle
représentation. Pour cela, il fallait créer nos tables ainsi que définir leurs colonnes, les clés
primaires et étrangères. Nous avons fait en sorte que la clé primaire de chaque table soit un
identifiant unique incrémenté automatiquement (exception faite pour la table « commande »
composée de deux clés étrangères en guise d’identifiant unique, ainsi que pour la table
Catégorie dont la clé primaire sera le nom de la catégorie, autrement dit l’attribut
CatégorieNom). Ensuite, nous avons exporté cette base de données Access en langage SQL
pour pouvoir l’importer plus tard dans PhpMyAdmin et ainsi éviter d’avoir à refaire le même
travail sur cette plateforme.
3.3 Début du site
3.3.1 Installation de Wamp
Figure 3 : Installation de Wamp
Nous avions vu précédemment que pour notre site puisse fonctionner sans problèmes, il faut
l’héberger sur un serveur, même local. Il faut aussi que ce serveur possède PHP et MySQL
installé, ainsi qu’une interface de gestion comme PhpmyAdmin. Si nous devions installer ces
7
composants séparément, nous perdrions beaucoup de temps à les configurer. Nous ne
cherchons qu’à faire tourner un site simple, en local, et qui n’est pas destiné à être utilisé en
production. C’est pourquoi l’utilisation d’un logiciel comme Wampserver (souvent abrégé
« Wamp » ) qui regroupe tous les composants nécessaires à notre site nous permet d’avoir un
serveur web fonctionnel en quelques clics.
Une fois l’installation terminée, la racine de notre serveur se trouve dans le dossier
C:\wamp\www. Nous n’avons qu’à déposer dans ce dossier le code de notre site pour qu’il
soit affiché dans notre navigateur internet. Pour vérifier que le serveur fonctionne
correctement, il suffit d’accéder à localhost dans la barre de navigation de Chrome et la
page d’accueil par défaut de Wamp devrait s’afficher.
3.3.2 Structure générale du site
Figure 4 : page d'accueil du site Skateboard-shop
Les fichiers principaux qui composent notre site sont :
-
connect.php qui permet de se connecter à notre base de données.
-
barre_titre.php qui contient la balise <head> des pages de notre site, ainsi que
le début de la balise <body>
-
navigation.php qui contient le code de la barre de navigation sur le dessus.
-
produits.php qui se charge d’afficher la page d’accueil du site.
-
panier.php qui se charge d’afficher le panier de l’utilisateur.
8
-
add_to_cart.php et remove_from_cart.php qui permettent d’ajouter ou de
supprimer un produit au panier.
-
checkout.php qui permet de présenter un formulaire pour que l’utilisateur y
inscrive ses données.
-
confirm.php qui permet de rentrer les données du fichier précédent dans la BDD et
d’afficher un remerciement à l’utilisateur.
-
bootstrap.min.css qui est un framework CSS, pour donner une apparence
moderne au site.
Dans la figure 5, nous résumons la structure du site. À noter que les ovales
représentent les fichiers affichés sous forme de page web, contrairement aux fichiers
présentés avec des rectangles qui eux n’affichent pas de page web.
Figure 5 : structure des fichiers principaux du site4
4
Inspiré de https://www.codeofaninja.com/2015/08/simple-php-mysql-shopping-cart-tutorial.html
9
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
try
{
$pdo = new PDO('mysql:host=localhost;dbname=test', 'nizde',
'password_nizde');
$pdo->exec('SET NAMES "utf8"');
}
catch (PDOException $e)
{
echo "Erreur de connexion a la BDD";
exit();
}
?>
Code 1 : code de connexion à la BDD en utilisant la méthode "PDO"
La connexion à la base de données se fait comme vu dans le code 1 grâce à la méthode PDO
(pour PHP Data Objects). C’est une extension de PHP qui sert à se connecter à une base de
données et à utiliser celle-ci pour un site web. Aux lignes 4 et 5 de notre code, nous avons
créé une nouvelle connexion à notre base de donnée que nous avons nommée test et qui se
trouve sur notre hôte local et utilisant le SGBD MySQL. Suivent ensuite le nom d’utilisateur
et le mot de passe. Cette connexion est traitée comme un objet stocké sous forme de variable.
Nous pouvons le remarquer facilement car toutes les variables en PHP commencent par le
signe $, comme ici avec cet objet $pdo. La ligne 6 nous permet de définir avec quel jeu de
caractères nous allons envoyer nos ordres à notre base de donnée (ici nous avons choisi UTF8). En effet, nous utilisons la fonction exec de notre objet $pdo pour envoyer une première
commande à notre base de donnée. Enfin, les lignes 8 à 13 nous permettent d’afficher ce qu’il
se passerait en cas d’erreur de connexion à la base de donnée, grâce à la fonction catch : un
message d’erreur s’afficherait, puis quitterait le programme.
3.3.3 Utilisation
L’utilisateur a le choix entre 3 produits : l’overboard, le longboard, et le blougouskate.
Il peut rajouter à son panier chacun de ses produits, puis en choisir la quantité désirée de
chacun depuis le panier grâce aux champs « Quantité » (à noter que le système de quantité
n’est pas implémenté, les quantités entrées n’ont pas d’effet sur les commandes). Il est
possible de jongler entre la page des produits et le panier pour ajouter ou supprimer librement
des produits (pour faciliter l’usage, le nombre de produits dans le panier est affiché
directement entre parenthèses dans la barre de navigation et est mis à jour automatiquement).
L’utilisateur doit ensuite confirmer la commande avec le bouton « passer à la caisse » en
dessous de son panier, au côté duquel est affiché le prix total de ses achats.
10
.
Figure 6 : le panier du client
Une fois ceci fait le site va récupérer grâce à un formulaire ses données (nom, prénom,
adresse, numéro de téléphone) pour les stocker dans une base de donnée afin que
l’administrateur puisse les utiliser pour honorer la commande. Le formulaire se trouve sur la
page checkout.php.
Outre l’utilisation du site par un client, il avait aussi été prévu à la base de rajouter une
interface auquel l’administrateur pourrait s’y connecter pour ajouter ou supprimer des
produits au site sans avoir à modifier le code source. De plus, il était aussi prévu de sécuriser
le site contre les attaques informatiques grâce aux fonctions spéciales de PHP, dont la
fonction htmlspecialchars() qui est utile pour empêcher qu’un hackeur se serve d’un
formulaire du site, car cette fonction transforme certains caractères comme <, > ou les
guillemets en entités HTML. Par exemple, > devient > une fois rentré dans un formulaire
ce qui élimine la possibilité que des gens se servent d’un formulaire pour injecter du code
dans notre site et ainsi en prendre le contrôle.
11
Figure 7 : Formulaire des données du client
3.4 Limites de l’approche
Le choix de cette approche était motivé au départ par la volonté de développer un site de ecommerce simple utilisable dans la vraie vie en faisant appel aux technologies PHP et
MySQL. Cependant, nous avons vu par la suite qu’il serait utopique de pouvoir continuer
dans cette voie, tant le développement devenait complexe, et que des compétences
informatiques de plus en plus élevés étaient demandés pour terminer le site.
En outre, même si le site était terminé, il ne répondrait probablement pas aux demandes de la
plupart des utilisateurs, car celui-ci resterait très rudimentaire comparé à d’autres sites
développé grâce aux CMS. En effet, pour que le site soit considéré comme complet et puisse
nous aider à vendre des produits, il faudrait que celui-ci possède beaucoup d’autres fonctions,
telles qu’un système de paiement, de compte utilisateur, de recherche, de classement de
produits, etc. Ceci étant un une idée beaucoup trop ambitieuse pour être réalisée dans le cadre
d’un travail de séminaire, c’est pourquoi il a été décidé de l’abandonner pour passer à
l’utilisation d’un CMS.
12
En effet, l’utilisation d’un CMS permettrait à une entreprise de profiter d’énormes avantages
parmi lesquels :
-
Économie de temps.
Économie d’argent car il n’y a pas besoin de développeur à embaucher.
Un site plus flexible et évolutif.
Pouvoir profiter d’une communauté d’utilisateurs du CMS pour le support (gratuit).
Avoir un support professionnel de l’éditeur du CMS (payant).
-
Profiter d’une documentation détaillée.
Certains CMS sont open-source et permettent donc une modification du code par soimême si besoin.
Profiter d’un store d’extensions et de thèmes.
Avoir un back-office ergonomique avec une interface graphique de qualité.
Des fonctionnalités pour adapter facilement la langue et la devise selon la
géolocalisation du client.
Une gestion des métadonnées pour améliorer notre placement dans les moteurs de
recherche.
-
13
Réalisation : deuxième tentative avec le CMS Opencart
14
4
Réalisation : deuxième tentative avec
le CMS Opencart
4.1 Pourquoi avoir choisi Opencart ?
Opencart est un Content management system (CMS) de boutique en ligne qui utilise PHP et
MySQL pour fonctionner. Ce logiciel permet à n’importe qui de faire un site de vente en ligne
sans avoir de connaissances préalables en programmation. Il est entièrement open-source
(sous licence GPL)
Ses principaux avantages par rapport à d’autres CMS est de proposer un large choix de
plugins, une communauté conséquente, une utilisation faible de ressources systèmes, une
interface très moderne ainsi qu’une simplicité d’utilisation remarquable.
Un autre avantage de ce CMS est son installation extrêmement simple. En effet, il suffit de
transférer les fichiers d’opencart (situés dans le dossier upload) dans le dossier www de
wamp, et d’accéder à la page localhost/upload pour débuter l’installation, qui
compare dès le début la configuration nécessaire et la configuration actuelle du serveur
(version de PHP, paramètres d’Apache, extensions de PHP etc…). L’installateur est donc
vraiment très clair et convivial, ce qui est un avantage pour les gens ayant peu de
connaissances informatiques.
Figure 8 : Installation d'Opencart (source : blog.rosehosting.com)
4.2 Concepts généraux d’Opencart
4.2.1 Une prise en main facile pour les débutants
Opencart se veut très simple à utiliser, notamment en évitant au maximum la manipulation de
code source par l’utilisateur, ce qui se traduit en pratique par une gestion du site quasientièrement à travers une interface graphique, même pour l’installation d’extensions.
La connexion au back-office se fait en accédant à localhost/upload/admin (où
upload est le dossier de notre serveur où se trouve notre installation d’Opencart). Une fois
les identifiants de l’administrateur entrés, celui-ci tombe sur un véritable « tableau de bord »
qui lui permet de voir en temps réel une série de données sur son e-shop, telles que les ventes
totales, les utilisateurs en ligne, la géolocalisation de ces derniers, les activités récentes, etc…
En outre, nous avons accès sur la partie gauche de l’écran à un menu hamburger avec des
sections ordonnées nous permettant de gérer librement notre site de vente en ligne. Parmi ces
sections, nous nous intéresserons plus particulièrement à celles-ci :
-
Catalogue : pour gérer ce que nous vendons et à quel prix.
Extensions : pour modifier notre site avec des applications tierces, des thèmes ainsi
-
que pour rajouter des captchas
Design : pour rajouter des bannières personnalisées au site.
Ventes : pour consulter les informations nous permettant d’honorer nos commandes.
15
Figure 9 : tableau de bord de l'administrateur
4.2.2 Un système de layouts personnalisés
Les Layouts (ou dispositions en français) sont des modèles de pages utilisés sur l’ensemble du
site. Pour faire simple, la page d’un produit utilisera le layout « product », tandis que les
pages telles que les modalités de livraison ou la politique de vie privée utiliseront le layout
« information ». Ces layouts sont uniques pour chaque thème, et sont disponibles dans le
dossier /catalog/view/theme/default/template/ dans une installation par
défaut d’opencart. Concrètement, ils se présentent comme un ensemble de fichiers .tpl (pour
template) qui contiennent du code PHP utilisant le moteur de template Smarty.
Ce système nous permet de définir avec efficacité quels éléments doivent s’afficher sur quels
genres de pages. En effet, une bannière publicitaire pourra être affichée sur toutes les pages de
produits, mais n’apparaîtra pas sur la page de login du site.
4.2.3 Une personnalisation poussée
Opencart étant un CMS Open-source, n’importe qui peut l’utiliser tout en modifiant le code
source comme il le veut. Cependant, il n’est pas nécessaire d’éditer directement le code
16
source pour pouvoir personnaliser son site, notamment grâce au shop d’extension en ligne
d’opencart5 (proposant des extensions payantes et gratuites). Les extensions, une fois
téléchargées sur l’ordinateur, s’installent grâce à l’installateur d’extension inclus dans le backoffice de notre site-web, sous la rubrique « Installer des extensions ». Pour utiliser cet
installateur, il suffit d’uploader le fichier .zip d’une extension téléchargée et d’appuyer sur le
bouton « continue ». Les extensions installées s’activent et se désactivent grâce au menu des
modifications sous la rubrique « extensions ».
Ces extensions peuvent se présenter sous diverses formes, allant à un simple générateur de
captchas gratuit au module à 100 dollars qui permet de faire une refonte complète du système
de commandes. En outre, il est aussi possible de télécharger des thèmes qui changent
radicalement l’apparence de notre site, et qui ont leur propre dossier indépendant dans notre
système pour permettre à l’administrateur de modifier lui-même à sa guise les thèmes qu’il
télécharge pour faire d’éventuelles adaptations.
4.3 Choix personnels et autres adaptations
4.3.1 Installation d’un pack de langue française
Opencart est livré par défaut avec uniquement le support de l’anglais. Cependant, n’importe
qui peut créer sa propre traduction ou en télécharger une sur Internet. Pour installer une
nouvelle traduction dans le système, il suffit de déplacer les fichiers de traduction dans le
dossier upload/sytem/language. Une fois ceci effectué, il suffit d’aller dans le backoffice et de séléctionner les paramètres de localisation sous la rubrique Système. De là, on
nous proposera de choisir la langue par défaut du système ou d’ajouter de nouvelles langues.
Nous avons décidé de garder uniquement la langue française pour notre site. Les traductions
se présentent sous la forme de fichiers. .php qui déterminent quel terme anglais doit être
remplacé par son correspondant français.
Ces traductions peuvent être payantes ou gratuite. Dans le cadre de ce travail, nous avons
téléchargé la traduction gratuite « French pack language OC2 »6. Cependant, ce pack de
traduction contenait quelques erreurs, tels que des erreurs d’encodage ou des virgules
oubliées. Nous avons pu les corriger en éditant les fichiers PHP correspondants aux pages où
ces erreurs apparaissaient.
5
Accessible à l’adresse http://www.opencart.com/index.php?route=extension/extension
6 Disponible sur le shop d’extension d’opencart en tapant « French » puis en choisisssant « Free » dans le menu déroulant
17
4.3.2 Un thème personnalisé en remplacement de celui par défaut
Les thèmes personnalisés, qu’on peut créer soi-même ou acheter sur le shop d’extensions
(même si quelque rares thèmes sont gratuits) sont une composantes très importante de notre
site.
En effet, le thème par défaut livré par Opencart risque d’être beaucoup trop générique pour la
plupart des vendeurs, et collera souvent mal avec l’image que l’on veut donner de nousmême. Tant pour se différencier que pour peaufiner notre identité visuelle, il faut donc que
notre shop possède un design unique et efficace. Heureusement, il est tout à fait possible de
créer son propre thème ou de modifier celui existant.
Pour notre site, nous avons choisi le thème « Ancart », qui possède un design épuré et
visuellement homogène, tout en étant gratuit et responsive. Le thème s’installe grâce à
l’installateur d’extension, ce qui nous évite de devoir manipuler des dossiers ou des fichiers.
Cependant, certaines couleurs ne nous donnaient pas entière satisfaction, notamment la
couleur rouge utilisée dans ce thème pour les éléments mis en surbrillance par la souris. Nous
avons
donc
ouvert
le
fichier
CSS
du
thème
(situé
dans
upload\catalog\view\theme\ancart\stylesheet) pour y modifier les codes
de couleur en hexadécimal des éléments concernés pour y ajouter du bleu au lieu du rouge.
Nous en avons aussi profité pour réduire la taille du logo de l’entreprise qui prenait trop de
place.
Mais la personnalisation ne s’arrête pas là. Nous avons voulu rajouter dans la barre de menu
(avec les catégories telles que « gyroskate » etc…) un lien vers les offres spéciales du site.
Pour cela, il nous a fallu modifier le fichier header.tpl situé précisément dans le dossier
upload\catalog\view\theme\ancart\template\common et y rajouter ce code
à la ligne 97 :
1 <li><a href="index.php?route=product/special"> <b>Offres spéciales</b></a></li>
Code 2 : Ajout du bouton "offres spéciales" à la barre de menu
18
4.3.3 Des bannières personnalisées
Opencart permet de créer des bannières pour présenter rapidement par exemple certains
produits. Nous avons décidé d’utiliser deux bannières sur notre site :
-
Une bannière en page d’accueil servant à présenter des produits
Une bannière qui s’affichera sur les pages de produits, de catégories, ainsi que sur la
page d’accueil de notre site et qui présentera les logos des marques dont les produits
sont vendus sur notre site
Évidemment, ces bannières sont entièrement cliquables, et redirigent vers la page d’un produit
(dans le cas de la bannière des produits) ou vers l’ensemble des produits d’une marque (dans
le cas de la bannière des marques) à la suite d’un clic.
Pour installer ces bannières, il faut d’abord les créer dans le menu « bannières » dans la partie
Design, puis choisir sur quelles dispositions (ou layouts) nous voulons les activer dans la
partie « disposition » de cette même partie. Il est possible de choisir pour chaque disposition à
quel endroit nous voulons afficher notre bannière parmi quatre choix proposés de base (Haut
de page, bas de page, colonne de gauche, colonne de droite).
Figure 10 : page d'édition de la bannière "manufacturers"
19
5
Présentation du site final du point de
vue de l’utilisateur
5.1 Inscription et Login
5.1.1 Inscription
L’inscription se fait en cliquant sur le bouton « compte » à côté du numéro de téléphone, puis
en cliquant sur « s’enregistrer » dans le menu déroulant qui apparaît. Ensuite, l’utilisateur doit
remplir un formulaire ayant des champs obligatoires et non obligatoires. Parmi les champs
obligatoires, nous trouvons entre autres le numéro de téléphone, l’adresse complète, le mot de
passe, le nom et le prénom, ainsi qu’un captcha à remplir. Une fois ces informations rentrées,
la personne doit cocher la case « J’accepte la politique de vie privée » puis cliquer sur
continuer. Une confirmation sera dès lors envoyée par e-mail au nouveau client, et ce dernier
sera automatiquement connecté à son compte une fois le formulaire envoyé. Le client peut dès
lors passer des commandes et a accès à toutes les fonctionnalités du site. La première page
qu’il verra sera la page « compte », qui est la page où il pourra modifier les informations de
son compte, son mot de passe, consulter ses commandes en cours etc... (Voir figure 11)
Note : L’inscription n’est pas obligatoire pour commander sur le site. Il est en effet possible
de commander en tant qu’invité, mais il est recommandé de s’inscrire pour que le processus
de commande se fasse plus rapidement et pour que le client puisse accéder aux informations
détaillées d’une commande en cours.
20
Présentation du site final du point de vue de l’utilisateur
Figure 11 : les différentes fonctions du compte d'un client
5.1.2 Login
Le login se fait en cliquant sur le même bouton « compte » que dans le processus
d’inscription, à la différence près que nous allons choisir « connexion » à la place de
s’enregistrer ».
De là, nous arriverons à une page qui nous demandera notre adresse e-mail et notre mot de
passe. À noter que cette page nous proposera aussi un lien pour créer notre compte si nous
n’en avions pas encore, et nous permettra de réinitialiser notre mot de passe dans le cas où
nous aurions oublié celui-ci. Si nous ne nous connectons pas à notre compte, il nous sera
proposé de le faire pendant le processus de commande sauf si nous voulons commander en
tant qu’invité.
21
Figure 12 : formulaire d'inscription comme nouveau client
5.2 Processus de commande
5.2.1 Choix des articles
Les catégories
Notre stock est divisé en 4 catégories de produits :
-
Les gyropodes
Les gyroskates (séparés en 2 sous-catégories : modèles à une ou deux roues)
Les skateboards (séparés en 2 sous-catégories : électriques ou non-électriques)
Les trottinettes (séparés en 2 sous-catégories : électriques ou non-électriques)
La barre de menu permet de visionner les produits de chacune de ces catégories, ou d’une
sous-catégorie en particulier. À noter que cette même-barre possède un bouton Home et
un bouton « Offres spéciales » qui permet de voir tous les produits en solde, quelle que
soit leur catégorie.
22
Le visionnage des produits et consultation du panier
Les produits peuvent être classés selon plusieurs critères tels que le prix, l’ordre alphabétique,
ou les évaluations des clients.
Il existe en outre une fonction « comparatif » qui permet de comparer aisément les
caractéristiques de plusieurs produits à la fois pour faciliter le choix. Cette fonction est
représentée par la 3ième icône sous le produit, les 2 premières servant respectant à ajouter le
produit respectivement au panier et à la liste de souhaits.
Figure 13 : Présentation par défaut des produits
Pour ajouter le produit au panier, l’utilisateur en choisit la quantité désirée et clique sur
« ajouter au panier » depuis la page du produit. À noter que le produit « ElectricMood »
possède une option de couleur or (qui coûte 50 francs plus cher) ou rouge. Il faudra dès lors
choisir laquelle on veut avant d’ajouter ce produit au panier.
Le panier est consultable dans une version résumée sur toutes les pages du site, même si on
n’est pas connecté à notre compte. Il se présentera sous la forme d’un petit onglet en haut à
droite de l’écran qui indique quels produits sont actuellement dans le panier, ainsi que le prix
total de nos achats. Il est aussi possible de supprimer un produit dans ce panier minimaliste en
cliquant sur la croix rouge à droite des produits.
23
Dans la figure 14, nous avons rajouté au panier le produit « ElectricMood » dans sa version
or. Il nous est laissé le choix de consulter notre panier dans une vue plus détaillée, ou de
passer commande.
Figure 14 : Le panier en vue minimaliste
Dans le panier en version complète, nous aurons plus de détails sur nos produits, et nous
pourrons modifier librement les quantités désirées. De plus, il nous est possible d’utiliser un
bon cadeau ou d’estimer les coûts de livraison selon le lieu de résidence, comme vu sur la
figure 15 (à noter que certains textes sont en anglais car la traduction gratuite que nous avons
téléchargée ne comporte pas la traduction de toutes les chaines de caractères existants dans
opencart).
Figure 15 : le panier en vue complète
24
5.2.2 Confirmation de la commande
Nous avons vu précédemment que le client avait le choix entre être connecté ou non pour
commander sur le site. Nous allons détailler ici le processus de confirmation avec un client
connecté.
La confirmation de la commande se fait en 6 étapes :
1)
2)
3)
4)
5)
Connexion du client à son compte
Informations de facturation
Informations de livraison
Mode de livraison
Mode de paiement
Dans les étapes 2 et 3, le champ sera pré-rempli avec ce que le client a entré comme
information pendant la création de son compte, mais il pourra choisir une autre adresse de
facturation ou de livraison s’il le souhaite. Aux étapes 4 et 5, un champ est à la disposition du
client pour mettre un commentaire. De plus, à l’étape 5, ce dernier doit cocher la case « J’ai lu
et approuvé la rubrique « Modalités et conditions ». Pour finir, à l’étape 6, un résumé de la
commande est affiché, et il ne reste plus qu’à cliquer sur « commander » pour terminer.
Toutefois, si le client voudrait passer en revue l’une de ses commandes, ou même retourner
un produit, il peut le faire sans problème depuis la partie « commandes » de son compte.
5.3 Autres fonctionnalités
5.3.1 Un système de points de fidélité
Comme sur beaucoup d’autres boutiques physiques ou online, les clients peuvent recevoir des
points de fidélité pour les achats qu’ils font. Le nombre de points de fidélité de chaque produit
est défini directement par l’administrateur. Ces points pourront ensuite être utilisés pour
effectuer des paiements sur le site. En outre, l’administrateur peut librement rajouter des
points de fidélité au compte de n’importe quel client, par exemple pour le dédommager.
25
5.3.2 Possibilité de séparer les clients par groupes
Quand un client crée un compte, il est automatiquement ajouté au groupe de client
« Default ». Cependant, l’administrateur peut transférer son compte dans un autre groupe de
clients, ou créer d’autres groupes. Ces groupes permettent de segmenter les clients dans le but
d’optimiser les campagnes de marketing. En effet, une réduction spéciale peut être vue par les
clients d’un certain groupe mais pas par d’autres. Par exemple, un client n’ayant pas acheté
depuis longtemps peut être ajouté au groupe des acheteurs rares qui pourront voir des offres
que les autres ne verront pas.
5.3.3 Avis des clients sur un produit
Les clients ont la possibilité de consulter les avis d’autres clients sur un produit. Ces derniers
sont notés sur une échelle de 1 à 5 étoiles. Chaque avis doit être composé de 25 à 1000
caractères et doit être approuvé par l’administrateur. Ce dernier a la possibilité d’ajouter un
captcha pour éviter le spam. Les notes des utilisateurs peuvent servir de critère pour la
décision d’un client, sachant qu’il est possible comme nous l’avons vu précédemment de trier
les produits selon ces notes.
Figure 16 : Champs pour écrire un avis
26
5.3.4 Un système de notifications complet
Figure 17 : Panneau de notifications de l'administrateur
L’administrateur possède un panneau de notification accessible de n’importe où depuis le
back-office du site et qui résume la situation actuelle des commandes, des clients, des produits
et plus encore selon les extensions installées. Ces notifications permettent à l’administrateur
de savoir quelles sont les commandes en préparation (« Processing »), lesquelles sont
terminées mais aussi le nombre de retours. Il peut suivre le nombre de clients connectés, les
produits hors-stock, mais aussi savoir si de nouveaux avis ont été postés.
5.3.5 Un programme d’affiliation
Pour augmenter notre chiffre d’affaires, nous pouvons proposer à d’autres personnes de faire
la promotion de nos produits sur leur site internet, et leur reverser un pourcentage pour chaque
vente auquel ils auront contribué. Pour participer à ce programme d’affiliation, le partenaire
doit créer un compte affilié sur notre site (différent du compte client) et doit être approuvé par
l’administrateur. Ensuite, l’administrateur fixe librement quel pourcentage de commission
touchera l’affilié. Ce dernier n’aura qu’à poster sur son site ou son blog les liens qui lui seront
fourni depuis son compte affilié pour commencer à gagner des commissions.
27
6
Conclusion
Nous avons vu durant ce travail qu’il était possible de procéder de deux manières différentes
pour créer son site de vente en ligne, et avons résumé le fonctionnement de chacune de ces
méthodes. Cependant, peu importe laquelle nous choisissons, la base restera toujours la
même, c’est-à-dire des pages générées en PHP utilisant un SGBD relationnel comme MySQL.
Ces technologies sont les plus utilisées actuellement pour créer des sites internet, qu’ils
servent à faire de la vente ou non. Même si notre premier essai n’était pas concluant, il nous
aura quand même servi à comprendre comment fonctionnait dans les grandes lignes un site de
vente en ligne simple, et nous aura aussi permis de découvrir plus en pratique les langages
PHP et MySQL.
Concernant notre site crée avec le CMS Opencart, nous sommes encore loin de connaître
toutes ses possibilités. Beaucoup de fonctions qui sont présentes de base dans ce CMS n’ont
pas pu être détaillés dans le cadre de ce séminaire tant elles étaient avancées. Sachant qu’il
existe des milliers d’extensions pour Opencart, et qu’une nouvelle version sort régulièrement
pour ajouter encore plus de fonctions, on peut dire sans problème que ce travail ne fait
qu’effleurer les possibilités de e-commerce avec ce CMS. Pour aller encore plus loin, il serait
possible de mettre un système de recommandations de produits comme sur Amazon, ou
encore de faire du B2B (Business to Business).
28
A
Fichier .zip des ressources
La racine de notre serveur contient 2 dossiers :
-
Le dossier « nizde » contient le code de notre première tentative.
-
Le dossier « upload » contient notre site opencart.
-
Le dossier « bdd » qui contient les fichiers permettant de répliquer les bases de
données utilisées ce travail.
29
Bibliographie
[Soutou, 1999]
C. Soutou, Programmer avec MySQL : SQL, transactions, PHP, Java, optimisations,
[avec 40 exercices corrigés], Eyrolles, 2015.
[Codeofaninja.com, 2015]
How To Build A Simple Shopping Cart Website With PHP And MySQL ? [URL:
https://www.codeofaninja.com/2015/08/simple-php-mysql-shopping-carttutorial.html], Dernière visite: 28.03.2016.
[opencart.com, 2015]
Opencart Documentation, http://docs.opencart.com/#, Dernière visite: 25.03.2016.
[tutsplus.com, 2014]
The Starter's Guide for OpenCart: An Introduction,
http://code.tutsplus.com/tutorials/the-starters-guide-for-opencart-anintroduction--cms-20647,Dernière visite: 10.03.2016.
30

Boutique en ligne avec PHP/MySQL et avec le CMS

Transcription

Documents pareils

FreeGlobes - Le Réseau des Pages Franco Orientales

LE TERRAIN DE BASKET

Wordpress

Télécharger mon CV

Formation PHP MYSQL - Formation Industries Loire

Programmation de sites Web dynamiqes avec PHP et MySQL

epm expert php/mysql

Modèle 1 - Skynet.be

nacelle sur vl mt202ds

Assistant CV