Préambule
J’ai décidé sur Activateur Web, de créer une catégorie dans laquelle les articles seront consacrés au CMS Prestashop.
He oui, même si mon métier de développeur web me permet de créer des solutions de A à Z, parfois, il est inutile de réinventer la roue. Et mieux vaut utiliser des solutions auxquelles nous pouvons apporter des modifications pour les personnaliser selon le besoin.
Pour tout vous dire, j’ai travaillé sur ce CMS, avant même d’obtenir mon diplôme de développeur web. Et croyez moi, cette solution a de grandes capacités.
Elle peut se comparer en solution e-commerce, à ce que fera un WordPress en solution de blogs. On pourrait, par exemple, utiliser le backend de PrestaShop avec un frontend développé en Vue.js. Mais nous pouvons également développer des modules et des thèmes afin de rendre cette solution complètement personnalisée. Enfin, bref, vous le voyez, beaucoup de possibilités et de travail en perspective.
Mais commençons par les bases, et voyons donc dans ce premier tutoriel, comment installer la solution PrestaShop sur un serveur local.
Comme toujours sur Activateur Web, ce tutoriel est à suivre, soit en vidéo, ou soit sous forme de guide pas à pas, illustré par des images.
Table des matières - Sommaire
Prérequis
Pour installer le CMS PrestaShop sur votre serveur local, il vous faudra au préalable :
- Un serveur local
- Une base de données
- PHP
Afin de bénéficier de tout cela dans un seul package, vous pouvez utiliser une suite AMP, telle que
- MAMP (pour Mac),
- WAMP(pour Windows),
- LAMP(pour Linux)
- XAMPP (toutes plateformes).
Vous pouvez retrouver l’article que j’ai consacré à l’installation de WampServer sur Windows, si vous ne le possédez pas encore sur votre système.
PrestaShop c'est quoi ?
Avec près de 300 000 sites qui utilisent déjà son logiciel à travers le globe, PrestaShop est la solution open source e-commerce leader en Europe et en Amérique Latine.
En 2020, les sites PrestaShop ont généré plus de 22 milliards d’euros de ventes en ligne.
PrestaShop est un CMS open source. Cela signifie que cette solution est gratuite.
Attention, par gratuite, j’entends le téléchargement et l’installation de base. Vous aurez de quoi développer un e-commerce, oui, mais pour obtenir une version personnalisée et complète, il faudra alors mettre la main au porte-monnaie. En effet, cette solution de base s’étend grâce à un système de modules et de thèmes à installer. Et ces modules ou thèmes sont payants, soit par le biais d’un paiement direct ou par un abonnement, ou parfois les 2.
On en trouve quelques-uns gratuits, mais il est normal aussi qu’un développeur ayant passé du temps sur la réalisation d’un module ou d’un thème, ait un juste retour de son travail.
Surtout lorsqu’on sait le temps que peut prendre le développement d’un module, mais également le travail pour qu’il reste à jour avec les versions successives de la solution PrestaShop.
Versions de PrestaShop
Open source, gratuite, oui, mais elle dispose également de nombreuses versions au fur et à mesure de son développement.
Il faut en être conscient, car cela incombe si vous souhaitez bénéficier des derniers patchs de sécurité, de mettre à jour sa boutique surtout en ce qui concerne les versions majeures. Mais cela vaut également pour les modules développés uniquement pour ces versions majeures. Alors, oui, certains modules prennent en compte plusieurs versions majeures, mais ceci n’est pas obligatoire.
Version majeure
Ce que j’entends par version majeure, est par exemple le passage de la version 1.6 à la version 1.7. Actuellement, lorsque vous téléchargez la dernière version, il s’agit de la version 1.7.7.8 ou la 8.0.2. J’ai commencé à tester cette solution dans sa version 1.4 !! J’avoue que cela remonte à des années, mais sachez que les versions se déclinent ainsi :
Le 1 ne représente rien jusqu’à maintenant.
Le 7 représente : évolution majeure/rupture de comptabilité,
Le 8 signifie : évolution mineure,
Le 8 indique une correction.
Une version majeure est quand même à l’œuvre pour plusieurs années. Après, ce sera à vous de décider si les évolutions mineures développées, vous apportent quelque chose de concret, et s’il est donc judicieux de mettre à jour votre version.
Bon à savoir, une nouvelle version majeure de PrestaShop a vu le jour depuis fin octobre 2022, et est appelée Prestashop 8. Cette nouvelle version prend en charge le Framework Symfony 4.4, Twig 3 et PHP 8.1.
Actuellement, la version proposée en téléchargement est donc la 8.0.2.
À noter
Lors de la création du tutoriel (la rédaction), la version était la version 1.7.7.8, puis la version 8.0.1. Lors de la création de la vidéo, la version stable était le version 8.0.2.
Ne faites donc pas attention aux différences de version pouvant apparaître dans les images de ce tutoriel.
L’important est de télécharger la dernière version stable du logiciel. Ensuite, la procédure est exactement la même, et ce, quelle que soit la version utilisée.
Version Vidéo de ce tutoriel
Téléchargement de Prestashop
Pour commencer, nous allons télécharger la dernière version stable du logiciel.
Pour cela, on se rend à cette adresse : https://www.prestashop.com/fr/versions
Il est possible que si cela est votre première connexion sur le site PrestaShop, celui-ci vous demande de créer un compte afin de télécharger le logiciel. Pour cela, vous aurez besoin de renseigner un formulaire et de suivre les étapes indiquées.
Sachez que vous pouvez, sur cette page, choisir une version spécifique de PrestaShop.
Cela peut être nécessaire si vous souhaitez développer pour un client qui possède déjà une boutique PrestaShop en ligne. Je vous conseille dans ce cas, d’utiliser la même version que votre client.
Après avoir cliqué sur le bouton ”Télécharger”, une fenêtre de votre explorateur s’ouvre pour vous demander où vous souhaitez enregistrer le fichier .zip téléchargé.
Décompression du fichier téléchargé
On va ensuite décompresser le fichier .zip que nous venons de télécharger.
Pour cela, on fait un clic droit sur ce fichier et on clique sur “Extraire tout” :
Bien entendu, vous pouvez aussi utiliser un logiciel comme WinZip ou WinRar pour décompresser ce fichier.
Création du dossier sur le serveur local
Nous allons ensuite créer le dossier de notre future boutique sur notre serveur local. Suivant la suite AMP que vous utilisez, ce dossier sera donc à créer dans le dossier de développement. Par exemple, pour WampServer, ce dossier est nommé “www”, tandis que pour MAMP, il se nomme “htdocs”. C’est donc dans ce répertoire du serveur local que nous devons créer un nouveau dossier. Pour ma part, j’utilise Wamp. Je créais donc un nouveau dossier que j’appelle, par exemple, “maboutique”. Vous l’appelez bien entendu comme bon vous semble.
Transfert des dossiers d’installation
Maintenant, nous allons récupérer les fichiers d’installation que nous allons placer dans le nouveau dossier que nous venons de créer sur notre serveur local.
Notez, qu’on aurait pu directement décompresser le fichier téléchargé dans un nouveau dossier qu’on aurait créé en même temps que la décompression. Mais j’ai préféré faire ces étapes afin d’être clair dans mes explications.
Création de la base de données
Pour installer PrestaShop, nous aurons besoin d’une base de données. Celle-ci stockera toutes les données de votre future boutique.
Pour créer une base de données, nous avons besoin tout d’abord de lancer notre serveur local. Je commence donc par lancer WampServer, et m’assure que tous les services soient lancés, à l’aide de l’icône qui doit être verte.
Ensuite, je dois ouvrir le service PhpMyAdmin, pour créer une nouvelle base de données.
Pour WampServer, je fais un clic gauche, puis je me rends dans l’onglet PhpMyAdmin, et je sélectionne et fais un clic gauche sur la dernière version de phpMyAdmin.
Après avoir cliqué, la page de connexion à PhpMyAdmin s’ouvre dans le navigateur.
Sur cette page, on peut choisir soit de créer une base de données avec MySQL, ou de la créer avec MariaDB.
Petite parenthèse
Bien sûr, en fonction du gestionnaire de bases de données que vous choisirez, il faut que celui-ci soit configuré sur votre serveur local. Par exemple, sur WampServer, les 2 gestionnaires (MySQL et MariaDB) peuvent être configurés. Il y aura un des deux qui sera mis par défaut, mais ils peuvent être utilisés conjointement.
Si vous ne connaissez pas le gestionnaire de bases de données que vous utilisez, sur WampServer, faites un clic gauche sur l’icône Wamp, et regardez si des ports leur sont attribués. Dans mon cas, les 2 sont configurés, et MariaDB utilise le port 3306, et MySQL le 3308.
MariaDB ou MySQL ?
Sachez que peu importe le gestionnaire que vous choisissez. Les 2 se pilotent de la même manière et les 2 utilisent le langage SQL.
La seule chose est de retenir sur quel serveur vous créez votre base de données et que celui-ci soit lancé lorsque vous travaillez en local.
Allez, pour ce tuto, je choisis MySQL, mais encore une fois libre à vous de prendre celui que vous voulez.
Dans la vidéo, je choisis MariaDB. Encore une fois, il n’y a pas de différence. L’important est de se rappeler dans quel gestionnaire, vous enregistrer votre base de données pour la retrouver par la suite.
Création de la base de données
Après la connexion, il faut cliquer sur l’onglet “base de données”, puis renseigner le champ situé en dessous de “Créer une base de données”, et enfin sélectionner l’ interclassement pour le régler sur utf8mb4_general_ci. C’est l’interclassement utilisé par PrestaShop à l’heure actuelle.
J’ai donné ici le même nom à ma base de données que celui de mon dossier de développement, mais libre à vous de la nommer comme vous souhaitez. Je fais cela, car comme je développe beaucoup de sites en local, cela me permet de mieux identifier les bases de données, par la suite, ou lorsque je reviens dessus après un long moment. L’important est de vous rappeler de son nom.
La base données est bien créé et on peut maintenant la voir dans la liste à gauche :
Création du virtualHost
Pour lancer notre future boutique avec le serveur local, nous devons en premier lieu, créer un virtualHost, ou domaine virtuel sur le serveur. Pour WampServer, on va faire un clic gauche sur l’icône et sélectionner l’onglet “Vos VirtualHosts”, et ensuite cliquer sur “Gestion VirtualHost” :
Une nouvelle page s’ouvre dans le navigateur web. Cette page est celle où nous allons gérer la création du virtualHost pour notre future boutique.
Pour créer un virtualHost, il faut lui donner un nom et indiquer le chemin d’accès au dossier de développement (“maboutique” dans mon cas), dans les champs dédiés à cet effet :
Après cela, une page s’ouvre pour nous indiquer que le virtualHost a bien été créé, et elle nous indique aussi que nous devons lancer un redémarrage du DNS. Pour cela, on fait un clic droit sur l’icône WampServer, on survole l’onglet “Outils” et ensuite, on clique sur “Redémarrage DNS”.
Après avoir cliqué sur le redémarrage du DNS, vous verrez plusieurs fenêtres de terminal s’ouvrir et se refermer aussitôt. Ceci est normal.
Lancement de l’installation de la boutique PrestaShop sur serveur local
Nous pouvons maintenant lancer l’installation. Pour cela, il nous suffit, dans le navigateur web, de taper l’adresse de notre serveur local (http://localhost ou http://127.0.0.1 ) suivie du nom que l’on a donné au dossier de développement. Pour ma part, comme j’ai nommé le dossier “maboutique”, l’adresse sera donc :
http://localhost/maboutique ou http://127.0.0.1/maboutique
Ici, je donne les 2 adresses possibles, mais sachez que ce sont exactement les mêmes.
Le nom de domaine d’un serveur local s’appelle aussi bien avec http://localhost qu’avec http://127.0.0.1 . Peu importe celui que vous utiliserez.
Autre méthode depuis le virtualHost
Nous pouvons également lancer l’installation, en cliquant sur le lien du virtualHost, créé précédemment. Sur la page d’accueil de WampServer, ou depuis l’onglet virtualHost accessible depuis l’icône WampServer.
Démarrage de l'installation
Dès le lancement de cette adresse, l’installation commence.
Attention, parfois, vous pouvez recevoir une indication comme quoi, vous n’avez pas la dernière version. Dans ce cas, 2 choix s’offrent à vous :
Vous valider le choix de votre version et refusez donc de télécharger la dernière version.
Vous voulez la dernière version et dans ce cas vous validez le téléchargement de celle-ci avant le début de l’installation.
Ici, dans ce tutoriel, j’ai validé le téléchargement de la dernière version et je vais donc me retrouver avec la version 8.0.1 de PrestaShop
Configuration de l'installation
Après l’initialisation, nous allons suivre les étapes suivantes :
Choix de la langue principale de la future boutique
Rien de compliqué ici : choisissez la langue utilisée par défaut sur votre boutique.
On choisit la langue, et on clique ensuite sur le bouton “Next”
Acceptation des licences
On clique ensuite sur le bouton “Next”, et cette fois, on nous demande de lire et d’accepter les licences. Obligatoire pour poursuivre l’installation.
Informations de la boutique et du compte administrateur
Nous arrivons ensuite sur la page concernant les informations de votre boutique.
Vous devez donc choisir :
- Le nom de votre boutique : à vous de voir le nom que vous souhaitez donner.
- L’activité de votre entreprise : l’activité principale de votre boutique à choisir parmi une liste déroulante.
- Pays : où vous êtes situé.
- Activer le SSL : en local, nous n’en avons pas besoin. Si vous activez le SSL, il vous faudra un certificat pour que cela fonctionne. Par contre, lorsque vous mettrez votre boutique en ligne, il vous faudra alors activer le SSL afin que votre site soit sécurisé (avec un certificat valide). L’adresse commencera alors par https.
- Prénom
- Nom
- Adresse e-mail : cette adresse servira ensuite pour vous connecter au tableau de bord.
- Mot de passe : celui qui sera également demandé pour vous connecter au tableau de bord.
À noter que depuis la version 8.0.1, le mot de passe dit “fort” est maintenant obligatoire. Ce qui n’était pas le cas avant.
Une fois tous ces champs renseignés correctement, on peut cliquer sur le bouton “Suivant”.
Contenu et configuration des modules de la boutique
Sur cette nouvelle page, on nous demande si on souhaite installer les produits de démonstration, et également si on souhaite installer les modules par défaut ou choisir les modules à installer.
À noter que c’est aussi une nouveauté depuis cette version 8.0.1, car avant les modules, étaient installés par défaut.
Pour ma part, je valide les choix par défaut. Vous pouvez décider de ne pas installer les produits de démonstration. Dans ce cas, vous ajouterez vos propres produits, en créant ceux-ci. Mais vous pouvez aussi désactiver ou supprimer, par la suite, ces produits de démonstration. Tout comme les modules, que l’on peut installer ou désinstaller à volonté.
Connexion et liaison avec la base de données
Après avoir cliqué sur le bouton suivant, nous voici maintenant sur la page de configuration de la base de données. Là aussi plusieurs informations à donner :
- Adresse du serveur de la base : par défaut 127.0.0.1 . Vous laissez ainsi, si le gestionnaire que vous avez choisi, utilise le port 3306. Si celui que vous avez choisi utilise un autre port, comme dans mon cas, par exemple, où MySQL utilise le port 3308. Je complète alors l’adresse comme ceci : 127.0.0.1:3308
- Nom de la base : le nom que vous avez donné à la création de votre base de données.
- Identifiant de la base : “root” par défaut, si vous n’avez pas modifié la configuration.
- Mot de passe de la base : par défaut, aucun si vous n’avez pas modifié la configuration.
- Préfixe des tables : ici, pas défaut toutes les tables de la base données commenceront par ps_ . Par exemple, la table produits, se nommera ps_products. Libre à vous de mettre un autre préfixe.
- Supprimer les tables : ici, la case est cochée par défaut. Il peut arriver de vouloir installer sur une base de données qui contient déjà des tables et des données. On vous donne donc la possibilité de supprimer ou non, les tables déjà existantes.
- Un bouton “Tester la connexion à la base de données” : je vous conseille vivement de tester cette connexion en appuyant sur ce bouton.
En cas d'erreur
Si vous recevez une erreur de connexion, vérifiez le nom de votre base de données, ainsi que le port utilisé par votre gestionnaire de bases de données. Vérifiez également votre nom d’utilisateur et mot de passe, si vous avez modifié ces paramètres dans votre gestionnaire de bases de données.
La connexion étant réussie, nous pouvons cliquer sur le bouton “Suivant”.
Installation des tables et configuration de la boutique
L’installation des tables en base de données et la configuration de la boutique se lancent alors :
Installation terminée et réussie avec succès
Voilà, votre boutique est maintenant installée sur votre serveur local. Vous pouvez voir sur cette dernière page, vos informations de connexion à votre tableau de bord. Garder ces informations en lieu sûr. On nous donne la possibilité d’imprimer ces infos, ou de les enregistrer en utilisant une imprimante virtuelle. Vous avez ensuite une information vous demandant, pour des raisons de sécurité, de supprimer le dossier “install”. Et ensuite vous avez 2 boutons, et donc 2 liens pour vous rendre sur le tableau de bord de votre boutique (backend), et sur votre boutique PrestaShop (frontend).
Enregistrement des informations de connexion
Je vous l’ai dit, on a la possibilité d’imprimer nos informations de connexion.
Pour ma part, je préfère éviter l’impression sur papier, mais plutôt enregistrer sur mon pc.
Pour cela, je commence par cliquer sur le bouton “Imprimer cette page”. Une fenêtre s’ouvre alors. Dans le champ de choix de l’imprimante, je choisis “Enregistrer au format PDF”, puis je clique sur le bouton “Enregistrer” :
Une fenêtre de l’explorateur s’ouvre pour que j’indique où je veux enregistrer ce fichier contenant mes informations de connexion.
Pour la mémoire !
Mes informations sont maintenant enregistrées. Je vous conseille d’enregistrer ces informations quelque part, ou de les écrire sur un carnet, par exemple. Ainsi, si vous développez votre boutique en local, et que pour une raison ou une autre, vous ne vous reconnectez pas pendant plusieurs mois, ces infos pourraient vous être utiles.
À moins qu’au contraire de ma personne, vous possédez une excellente mémoire ?
Suppression du dossier “Install”
Pour des raisons de sécurité, nous devons supprimer le dossier nommé “Install”, de notre dossier de développement. On se rend donc dans le dossier “maboutique” situé dans le “www” de WampServer, et on supprime ce dossier “Install”.
Renommage du dossier admin
Un autre point en matière de sécurité, et de renommer le dossier appelé “admin”. Ceci n’est pas important, tant que le site reste en développement local, mais cependant très important lorsque vous le transférez sur un serveur distant, et donc lors de la mise en production.
Pour éviter d’oublier ce point par la suite, je préfère pour ma part, le renommer dès maintenant.
Je me rends donc dans mon dossier de développement de la boutique et le renomme.
Ici, pour l’exemple, je le renomme “adminfabsolo”
A noter également que depuis la version 8.0.1, le dossier admin est automatiquement renommer lors de la première ouverture du tableau de bord PrestaShop. Cela assure donc automatiquement la sécurité de ce dossier.
Ouverture du tableau de bord / back office de la boutique
Pour me rendre sur la page de connexion de mon nouveau tableau de bord, je me rends dans le navigateur et ouvre une page avec l’adresse suivante :
http://localhost/maboutique/adminfabsolo
Si on se résume, pour cette adresse :
- http://localhost : le nom de domaine de mon serveur local
- /maboutique : le dossier de développement de la boutique (situé dans www de Wamp)
- /adminfabsolo : le nom que j’ai donné en renommant le dossier “admin”.
On arrive ensuite sur la page de connexion :
Après la connexion, on arrive sur le tableau de bord de la boutique PrestaShop :
Je vous conseille d’enregistrer cette page dans vos favoris, afin de vous y rendre plus facilement, par la suite.
Ouverture du frontend - Représentation de la boutique en ligne
L’adresse pour se connecter à la boutique est :
http://localhost/maboutique/
“maboutique” représente ici, le nom que j’ai donné au dossier situé dans le dossier du serveur local.
Tout simplement.
Conclusion
Voilà pour ce tutoriel consacré à l’installation du logiciel PrestaShop sur un serveur local.
Bien entendu, à ce point, vous possédez une boutique qui ressemble à un site PrestaShop de base. Il va falloir maintenant travailler afin de le personnaliser à votre image, et selon ce que vous souhaitez vendre, installer les bons modules, les bons thèmes, etc.
Ou alors, si techniquement vous en sentez capable, le personnaliser en développant votre solution, et pour cela, il faudra mettre les mains dans le moteur…
Vous pouvez également me suivre en vous inscrivant sur le site, pour être averti en avant-première des prochains articles de blog, en vous abonnant à ma page Facebook, à ma chaîne YouTube. N’hésitez pas à faire tout cela à la fois ! :)
Au travail pour la suite
Il s’agissait ici de débuter une catégorie/playlist sur le CMS PrestaShop.
Je publierai régulièrement des tutoriels pour personnaliser cette solution à l’avenir.
On y parlera donc de Php, Smarty, Twig, Symfony, Composer, etc.
Il fallait bien commencer par un article, et l’installation sur un serveur local est pour moi, la base et la première pierre à poser.
Merci d’avoir suivi ce tutoriel. N’hésitez pas à laisser vos commentaires, ou à poser vos questions si besoin.
En attendant, prenez soin de vous, et surtout restez curieux !
