Tutoriel : Installer Prestashop 1.7 en local

Tutoriel : Installer Prestashop 1.7 en local


Lorsque l’on désire mettre en place une boutique avec Prestashop, une bonne pratique est de commencer par installer le CMS sur son poste en local. Découvrez comment mettre en place l’environnement nécessaire et installer Prestashop 1.7 sur votre poste local, pour configurer votre boutique en toute tranquillité.

Le but d’une installation locale ? Installer la boutique, la configurer, personnaliser le thème, installer les extensions, bref, expérimenter et tout mettre en place dans un environnement fermé : celui de son ordinateur de bureau.

De cette manière, pas besoin de se poser des questions sur d’éventuels visiteurs impromptues ou de référencement inopiné par les moteurs de recherche. Les modifications se font en local, plus rapidement et plus aisément, sans passer par un serveur FTP et sans galérer sur les réglages PHP de votre hébergeur.

Bref vous avez le contrôle ! Et vous vous soucierez de la compatibilité avec la version PHP de votre hébergeur au moment de la migration. Qui sera d’ailleurs l’objet d’un futur article.

Les pré-requis d’une installation en local

Pour pouvoir installer Prestashop en local, il faudra commencer par disposer :

  • D’un serveur web type Apache, Nginx, IIS, etc.
  • D’un serveur de base de données, par exemple MySQL ou PostgreSQL
  • D’un distribution de PHP à installer par là dessus

Vous êtes découragés ? Ne vous en faites pas, c’est bien plus simple qu’il n’y paraît. Il existe en réalité des outils installable qui s’occupe de mettre en place toute cette infrastructure en un seule installation.

Voici quelques options :

  • WAMPServer pour Windows Apache MySQL PHP Server : installe Apache, MySQL et PHP donc et ne fonctionne que sous Windows. Il a l’avantage d’être en français, mais n’est pas très user-friendly et plutôt laborieux à mettre en place.
  • LAMP pour Linux Apache Mysql PHP (me dites pas que vous aviez deviné ?) qui fais la même chose sur la plupart des distributions Linux
  • MAMP pour… vous avez deviné ? Macintosh Apache MySQL PHP (ou Perl ou Python ou même Ruby mais ça colle moins). Sauf que ce dernier fonctionne aussi sur Windows, qu’il est facile à installer et à utiliser et qu’il a clairement ma préférence !

MAMP a donc ma préférence et c’est ce dernier outil que je vais vous aider à installer pour commencer.

MAMP pour Macintosh Apache MySQL PHP
MAMP pour Macintosh Apache MySQL PHP

À noter qu’il existe une version PRO qui permet notamment des migrations facilités de WordPress entre votre poste local et l’hébergeur, l’enregistrement de snapshot de votre environnement (fichiers et données) et d’autres options sympas, mais pas indispensable à ce tuto !

MAMP

Installation

Pour commencer rendez-vous ici pour télécharger MAMP pour MacOS ou Windows.

Exécutez l’installateur et commencez par désactiver MAMP Pro et l’installation de Apple Bonjour qui ne vous seront pas utiles

Désactivez MAMP Pro et Apple Bonjour lors de l'installation de MAMP
Désactivez MAMP Pro et Apple Bonjour lors de l’installation de MAMP

Ensuite exécutez l’installation normalement, tout devrait se faire sans heurt.

Configuration

Une fois l’installation terminée, lancez MAMP, il démarrera les serveurs Apache (par défaut) et MySQL au démarrage. Ne faites pas attention à l’option Cloud.

Allez dans le menu MAMP > Preferences, vous y trouverez 6 onglets :

  • Start / Stop : Vous permettra de définir plusieurs options lié au démarrage des services. Faut-il démarrer les services au démarrage de MAMP ? Et les fermer à la fermeture ? Ouvrir MAMP ou démarrage de Windows ou MacOS ? Etc.
  • Ports : Où vous pourrez définir des ports spécifiques pour les différents serveurs de MAMP, à savoir Apache ou Nginx et MySQL
  • PHP : Qui vous permettra de choisir entre deux distributions de PHP
  • Web Server : J’y reviens plus bas
  • MySQL : Vous affiche la version actuelle de MySQL
  • Cloud : Pas utilisé dans notre cas. Permet d’enregistrer une base de données sur Dropbox pour la partager, entre autres
Onglet Web Server où vous pourrez choisir le dossier de base de MAMP
Onglet Web Server où vous pourrez choisir le dossier de base de MAMP

Onglet Web Server : Dans cet onglet vous pourrez choisir le WebServer à utiliser (Apache par défaut, mais si vous préférez Nginx c’est à vous de voir), mais surtout de spécifier le dossier racine de MAMP.

C’est à dire le dossier sur lequel pointera l’adresse http://localhost. C’est à cette endroit ou dans l’un de ses sous-dossiers que nous installerons Prestashop.

Ici j’ai choisi D:\Dev\Web et Prestashop sera installé dans D:\Dev\Web\tuts\shop ce qui donnera l’adresse http://localhost/tuts/shop

L'adresse du dossier racine de MAMP reformulé en localhost/etc.
L’adresse du dossier racine de MAMP reformulé en localhost/etc.

Une fois le réglage effectué, vous pouvez appliquer les modifications et fermer la fenêtre. MAMP est installé et configuré !

Prestashop 1.7

Décompression / installation

Maintenant attaquons-nous au plat de résistance, vous verrez, ce n’est rien de très compliqué !

Commencez par vous rendre sur la page de téléchargement de Prestashop. Là entrez votre adresse e-mail si vous désirez recevoir la newsletter, acceptez les conditions et cliquez sur Télécharger.

Lancer le téléchargement de Prestashop

Une fois le fichier téléchargé (un fichier ZIP d’un peu moins de 70 Mo en règle générale) décompressez-le dans le dossier où vous désirez installer Prestashop.

Pour moi ce dossier sera :

D:\Dev\Web\tuts\shop

Une fois décompressé, voici les 3 fichiers utilisés pour l'installation en ligne de Prestashop
Une fois décompressé, voici les 3 fichiers utilisés pour l’installation en ligne de Prestashop

Qui deviendra donc dans le navigateur, avec MAMP et Apache activé :

http://localhost/tuts/shop

En vous rendant à cet adresse, Prestashop lance automatiquement l’installation. En fait, il va décompresser le fichier prestashop.zip, créer tous les dossiers, fichiers et sous-dossiers qui composent le CMS.

Soyez patient, l'installation de Prestashop prend plusieurs minutes
Soyez patient, l’installation prend plusieurs minutes

Assistant d’installation

Choix de la langue

Une fois l’installation terminée, vous accéderez à l’assistant de Prestashop qui vous guidera dans le processus. La première vue vous proposera de choisir la langue de l’application.

Acceptation des licences

La deuxième vue vous demandera d’accepter les conditions de la licence de Prestashop. Il s’agit d’une licence Open Source pour un CMS gratuit, peut de chance que vous vous fassiez avoir donc 😉

Comptabilité système

La troisième vue corse un peu l’affaire, il s’agit d’une analyse de compatibilité (version de PHP, extensions installées, configuration) de votre environnement (ici MAMP) avec la versions actuelle de Prestashop (ici la 1.7.5.2).

Il y a de grande chance que vous ayez quelques avertissements et erreurs, voici ce que j’ai eu dans mon cas :

Voilà le diagnostique de Prestashop quant à mon environnement, pas glop comme on dit !
Voilà le diagnostique de Prestashop quant à mon environnement, pas glop comme on dit !

Voici donc la série d’erreur que j’ai reçu, à noter que certains avertissements sont liés aux erreurs :

  • L’extension Fileinfo n’est pas activée : cette extension permet d’intéragir avec le système de fichier de votre ordinateur
  • Intl extension is not loaded / L’extension Intl n’est pas activée : cette extension s’occupe de l’internationalisation et de la localisation en PHP (le multi-lingue en gros)

En dessous quelques avertissements lié à la mise en cache notamment.

Pour régler ces problèmes, il faut se rendre dans le fichier de configuration de votre version de PHP (celle utilisée par MAMP) dans les dossiers d’installation de MAMP.

Pour connaître la version de PHP, ouvrez MAMP > Preferences > PHP et regardez le numéro de version dans Standard Version.

Trouver la version de PHP utiliser par MAMP

Sous Cache il est possible d’activer une option de mise en cache, mais je préfère faire la configuration manuellement pour Prestashop.

Une fois que vous avez la version, ici 7.2.10, rendez-vous dans le dossier d’installation de MAMP, dans le dossier de configuration :

C:\MAMP\conf\php7.2.10

En prenant soin de choisir le dossier de votre version de PHP. Dans ce dossier doit se trouver un fichier php.ini. Ouvrez-le avec un éditeur de texte et recherchez le texte Dynamic Extensions.

Juste en dessous, vous devriez trouver l’activation des différentes extensions. Ajoutez ou enlevez le commentaire des extensions suivantes :

;;;;;;;;;;;;;;;;;;;;;;
; Dynamic Extensions ;
;;;;;;;;;;;;;;;;;;;;;;

[...]

extension=php_bz2.dll
extension=php_gd2.dll
extension=php_gettext.dll
extension=php_mbstring.dll
extension=php_exif.dll
extension=php_mysql.dll
extension=php_mysqli.dll
extension=php_pdo_sqlite.dll 
extension=php_sqlite3.dll
extension=php_curl.dll
extension=php_openssl.dll
extension=php_imagick.dll
extension=php_pdo_mysql.dll
extension=php_fileinfo.dll
extension=php_intl.dll
extension=php_apc.dll
extension=php_apcu.dll
extension=php_eaccelerator.dll
extension=php_xcache.dll
zend_extension=php_opcache.dll

;extension=php_ftp.dll
;extension=php_gmp.dll
;extension=php_imap.dll
;extension=php_ldap.dll
;extension=php_pdo_firebird.dll
;extension=php_pdo_odbc.dll
;extension=php_pdo_pgsql.dll
;extension=php_pdo_sqlite.dll 
;extension=php_pgsql.dll
;extension=php_shmop.dll
;extension=php_xdebug.dll

On active donc les extensions fileinfo et intl, puis les différentes extensions liées au cache.

Pour corriger les autres avertissements, remontez un peu le fichier et rechercher le texte short_open_tag. La première occurrence devrait être dans un descriptif en commentaire, mais plus bas vous devriez pouvoir modifier le paramètre de on en off :

short_open_tag = off

Lorsque cette option est on, il est possible de commencer du code PHP par <? sans s’embarrasser du <?php. Chose que refuse Prestashop, pour des raisons de sécurité.

Dernière chose demandé par Prestashop, augmenter la valeur de realpath_cache_size que vous devriez trouver un peu plus bas dans le fichier.

;realpath_cache_size=16k

Commencez par enlever le ; et passez la valeur de 16k à 5M :

realpath_cache_size=5M

Cette option peut améliorer les performances de Prestashop de manière significative sous Windows.

Dernière opération qui ne sera peut-être pas obligatoire pour tout le monde, mais qui a été nécessaire dans mon cas. Il faut copier les fichiers suivants :

  • icudt60.dll
  • icuin60.dll
  • icuio60.dll
  • icuuc60.dll

Que vous trouverez dans votre installation de MAMP sous (attention, ce dossier dépend de votre version de PHP) :

C:\MAMP\bin\php\php7.2.10

Dans le dossier d’Apache :

C:\MAMP\bin\apache\bin

Ces fichiers sont nécessaire au bon fonctionnement de l’extension, mais il arrive que Apache ne parvienne pas à y accéder. En les copiant dans le dossier d’installation d’Apache ça règle le problème.

Une fois ces modifications réalisées, cliquez sur Stop Servers puis Start Servers dans MAMP pour redémarrer tout ça et recharger les fichiers de configuration.

Redémarrez les serveurs Apache et MySQL de MAMP pour recharger la configuration
Redémarrez les serveurs Apache et MySQL de MAMP pour recharger la configuration

Et là, quel bonheur de se rendre à nouveau sur la page de diagnostique de Prestashop et de cliquer une nouvelle fois sur Rafraîchir pour voir disparaître les erreurs.

Il ne me reste qu’un avertissement, quant à la version de l’extension intl, mais c’est un détail.

Cliquez sur rafraîchir pour valider la configuration de Prestashop
Cliquez sur rafraîchir pour valider la configuration de Prestashop

Note : Si ce n’est pas le cas lors de cotre installation, n’hésitez pas à me laisser un commentaire avec le message que vous recevez, j’essaierai de vous aider.

Informations

Une fois que vous avez fait suivant, vous accéderez à la page vous permettant d’entrer les informations générales de votre boutique.

Informations sur votre boutique Prestashop

Voici le différents champs à remplir :

  • Nom de la boutique : Ce nom sera le titre de votre site et apparaîtra sur toutes vos pages.
  • Activité principale : Vous pouvez choisir une activité spécifique pour aider l’assistant Prestashop lors de la configuration initiale. Pas très important.
  • Pays : Ce choix définira pas mal de paramètres dans l’application : fuseau horaire, monnaie utilisée, codes ISO, TVA, etc.
  • Prénom / Nom : Seront utilisés pour votre compte utilisateur
  • Adresse e-mail : Idem et sera surtout votre identifiant pour accéder à l’interface d’administration
  • Mot de passe / confirmation : Mot de passe pour accéder au back office de Prestashop, lié à votre e-mail

Une fois ces informations renseignées vous pourrez continuer.

Configuration du système

Dans la fenêtre suivante, il faudra entrer les informations de connexion à la base de données. Avant de remplir ces infos, il faut donc commencer par créer un utilisateur qui pourra accéder à votre base Prestashop et aussi, éventuellement, la créer, cette base !

Pour faire les choses bien on va éviter l’utilisateur root sans mot de passe, même s’il est disponible par défaut dans les installations locales de MAMP.

Rendez-vous à l’adresse (attention à bien respecter les majuscules) :

http://localhost/phpMyAdmin

Pour accéder à l’interface de PHPMyAdmin qui vous permettra de gérer vos bases de données.

Si comme moi vous avez utilisé cet outil au début des années 2000 pour de la création web, sachez que visuellement et techniquement, ça n’a pas changé. Bref, c’est toujours aussi moche 🙂

Première étape, nous allons donc créer un utilisateur disposant de tous les privilèges. Pour se faire allez dans l’onglet User accounts et cliquez sur Add user account en dessous de la liste d’utilisateurs (vous en aurez moins que moi, ne vous en faites pas, ce n’est pas un problème) :

La bonne vieille interface quasi-immuable de PhpMyAdmin
La bonne vieille interface quasi-immuable de PhpMyAdmin

Dans la nouvelle fenêtre il vous faudra renseigner quelques informations importantes sur votre nouveau compte utilisateur :

Créer un nouvel utilisateur dans PhpMyAdmin
  • User name : Nom de votre utilisateur, il sera utilisé lors de la connexion à la base de donnée de Prestashop
  • Host name : Je vous conseil de choisir Local dans la liste pour bien définir que l’utilisateur est spécifique à localhost.
  • Password : Mot de passe que vous utiliserez pour vous connecter à la base.
  • Global privileges > Check all : Ne vous embêtez pas, donnez tous les droits à votre utilisateur pour éviter le moindre problème à l’installation ou à la gestion de votre boutique.

Ensuite tout en bas à droite, cliquez sur le bouton Go pour exécuter la requête.

Votre utilisateur créé, il vous reste encore à ajouter la base de données qui sera utilisée par votre boutique. Pour se faire cliquez sur Add New dans le menu de gauche.

Créer une nouvelle base de données dans PhpMyAdmin

Puis entrez le nom de la base que vous désirez créer, dans mon cas demo_shop, laissez le menu déroulant sur Collation pour prendre celle par défaut (normalement UTF8) et faites Create.

Revenons à l’assistant d’installation de Prestashop, c’est le moment d’entrer les informations de connexion à la base de données. Entrez simplement les infos tels que vous les avez saisis juste au dessus.

Vous pouvez laisser 127.0.0.1 comme adresse de base, il s’agit en vérité de l’adresse IP de localhost. Quant au préfixe des tables, vous pouvez le laisser également, il s’agit du texte qui sera ajouté en préfixe du nom de chaque table dans votre base de données.

Une fois toutes les informations saisie, le test de connexion devrait être un succès
Une fois toutes les informations saisie, le test de connexion devrait être un succès

Testez la connexion à la base de données pour vous assurer que ça fonctionne. Et cliquez sur suivant pour valider vos réglages.

Installation de la boutique

Dernière étape qui prendra un peu de temps : l’installation finale de Prestashop. Enregistrement de vos réglages, création des tables, données de bases, traductions, etc.

Une fois l’installation terminée, Prestashop vous rappel de bien conserver vos infos de connexion, vous pouvez les imprimer et afficher le mot de passe en claire au besoins.

Configuration initiale de Prestashop

Une fois l’installation terminée, rendez-vous à l’adresse de votre shop, pour moi http://localhost/tuts/shop pour voir votre boutique.

Vous êtes fin prêt pour vendre des T-Shirts trô stilés et des cadres IKEA
Vous êtes fin prêt pour vendre des T-Shirts trô stilés et des cadres IKEA

Prestashop installe des données de démo par défaut, pour vous permettre de bien comprendre le fonctionnement et de vous familiariser avec le système. Je vous montrerai plus loin comment virer tout ça !

Accéder au back office

Pour le moment, accédez à votre console d’administration qui devrait se trouver à la même adresse que votre shop, en ajoutant /admin à la fin. Dans mon cas : http://localhost/tuts/shop/admin

N'oubliez pas de supprimer le dossier "install" pour pouvoir accéder au back office
N’oubliez pas de supprimer le dossier « install » pour pouvoir accéder au back office

Un avertissement concernant le dossier install s’affiche. Rendez-vous dans le dossier de votre installation de Prestashop, dans mon cas :

D:\Dev\Web\tuts\shop

Et supprimez le dossier install qui s’y trouve. Il s’agit d’une sécurité, si quelqu’un accède au dossier install il peu potentiellement relancer l’assistant et mettre un beau bordel !

Une fois cela fait, actualisez la page admin et vous remarquerez alors, si vous jetez un œil à l’adresse de la page, que votre adresse s’est transformée de /admin en /admin123xyz ou quelque chose dans ce goût là.

Prestashop renomme le dossier admin à l’aide d’une valeur aléatoire pour éviter que n’importe qui puisse y accéder pour tenter d’entrer dans votre back office.

Une fois dans votre back office, vous pouvez suivre l’assistant qui vous guide dans une partie de la configuration. Pour le moment vous pouvez l’ignorez, mais vous pourrez le lancer quand vous voulez en bas à gauche de cette vue.

Supprimer les données de démo

Vous le ferez peut-être plus tard, après avoir joué un peu avec le CMS pour en apprendre les rudiments, mais il vous faudra à un moment ou à un autre nettoyer les données de démos déjà présentes.

Un module existe spécifiquement pour cette tâche. Pour l’installer rendez-vous dans dans Personnaliser > Modules > Catalogue de modules. Là dans la barre de recherche tapez cleaner et faites Rechercher.

Installez le module Prestashop Cleaner pour supprimer les données de démo
Installez le module Prestashop Cleaner pour supprimer les données de démo

Une fois Prestashop Cleaner trouvé, cliquez sur Installer. Après l’installation, le bouton change pour devenir Configurer. Cliquez dessus.

Dans la configuration du module, passez l’option à Oui dans la partie Catalogue pour valider votre suppression et cliquez sur Supprimer le catalogue.

Faites de même dans l’onglet Commandes et clients.

Les données de démo ont disparues !

Passez en mode debug

Pour faciliter le travail dans Prestashop (configuration, personnalisation, modification des modèles, des CSS, etc.) je vous conseil tant que votre boutique n’est pas en production de la passer en mode debug.

Pour se faire, rendez-vous dans Configurer > Paramètres avancés > Performances.

Prestashop > Configurer > Paramètres avancés > Performances

Voici les réglages que je vous conseille :

  • Smarty > Compilation des templates : Passez le en Force compilation, de cette manière toute modification réalisée dans un modèle de votre thème sera recompilé à chaque fois que vous actualisez une page. Utile pour voir vos modifications en direct.
  • Smarty > Cache : Désactivez le cache, pour éviter que vos feuilles de styles ou scripts ne se mettent pas à jour lors de modifications.
  • Mode debug > Mode debug : Oui ! Activez ce mode debug. Prestashop sera plus lent, mais en cas d’erreur quelconque au niveau du serveur, vous aurez un détail du problème au lieu d’une bête erreur 500.

En plus de relevé les erreurs, le mode debug activera une barre de contrôle en bas de votre back office, vous informant de toutes les erreurs et avertissements, ainsi que de bien d’autres informations utiles (performances, traductions manquantes, etc.).

Attention : Avant de passer votre boutique en production sur un hébergement, effectuez vos tests en désactivant le mode debug, pour vous assurer que tout fonctionnera bien en live.

Conclusion

Prestashop 1.7 s’installe en général sans trop de problème, il suffit de connaître les bonnes pratiques et quelques combines pour régler les différents problèmes qui peuvent survenir.

Si lors de votre installation, vous avez eu des problèmes non répertoriés ici (ce qui est tout à fait probable), n’hésitez pas à me laisser un mot en commentaire, j’essaierai de vous aider !

Suite des opérations et futur tutoriel : migrer votre boutique en local vers un hébergement externe.



4 commentaires

4 Commentaires

  1. Miss informatique

    Je vous remercie énorment Monsieur 😊 !!! Youpi !!!!!!!! J’ai reussi cette etape…

    Réponse
    • Thierry

      Content d’avoir pu vous être utile ! Et bonne chance dans la suite de votre projet de shop en ligne et dans la découverte de Prestashop 🙂

      Réponse
  2. Julien

    Bonjour Thierry,
    Merci pour ce beau tuto, guidée pas à pas, j’ai aussi gagné un temps énorme.
    Vive vous 🙂

    Julien

    Réponse
    • Thierry

      Bonjour Julien,

      Whahou carrément !
      Merci beaucoup pour votre retour et très heureux d’avoir pu vous êtres utiles, c’est là pour ça 🙂

      Bonne chance pour la suite de votre projet.

      Réponse

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

derniers articles
de mon blog