Voyager, le panneau d’administration Laravel (Partie 1)

Pour ce tutoriel, j’ai utilisé la version 5.4 de Laravel, la version 0.11 de Voyager et Windows 10 ; il se peut qu’il y ait des différences si vous utilisez d’autres versions.

Dans cet article je vais non seulement vous expliquer ce qu’est Voyager, mais je vais aussi vous montrer comment installer Laravel (et oui car sans Laravel, exit Voyager) et Voyager. Deux autres articles viendront compléter la série afin que vous puissiez aller plus loin.

Pour cette série, aucun prérequis n’est nécessaire, cependant je n’explique pas forcément ce que fait chaque commande Laravel, donc si vous n’avez aucune base, vous allez arriver à suivre mais il vous faudra forcément faire quelques recherches supplémentaires pour comprendre les subtilités.

Index

Voyager ? Késako ?

Laravel est un framework PHP génial mais il lui manque quelques outils utiles, comme par exemple un panneau d’administration ajoutable en quelques clics. Voyager a été créé pour répondre à ce besoin, et il fait plutôt bien son job ?. Effectivement, si vous avez besoin d’un panneau d’administration pour votre projet Laravel, vous allez gagner un temps considérable en utilisant Voyager plutôt que d’en créer un à partir de zéro.

En plus d’intégrer un système de gestion des utilisateurs et des rôles, de base Voyager vous permet de gérer les posts, les catégories de posts, les pages et les médias. Mais Voyager ne se limite pas à ça, il permet surtout de gérer la base de données et le BREAD (une sorte de CRUD visuel made in Voyager : Browse, Read, Edit, Add, and Delete) très aisément et offre aussi la possibilité d’ajouter aussi d’autres entités customs. Si vous voulez pouvoir gérer des biens immobiliers, des produits, etc. vous allez pouvoir le faire via votre panneau d’administration Voyager, votre seule limite sera votre imagination (et votre jugeote ^^).

Voyager vous permet même de gérer les menus du panneau d’administration ! Et tout ça sans code ! On pourrait presque dire que Voyager est un CMS, mais dans l’état actuel (version 0.11) il n’en est pas un, car encore pas assez complet, il reste donc un outil fort pratique à intégrer à votre projet Laravel.

Vous êtes convaincu par Voyager ? Ou vous êtes juste curieux ? N’hésitez pas à découvrir cet outil en parcourant notre série.

Installation de Laravel

Voyager est un outil Laravel, sans un Laravel installé pas de Voyager, logique. Commençons donc par le début, l’installation de Laravel 5.4.

Laravel a besoin de deux prérequis. Le premier est un serveur SQL. Dans cette présentation, nous allons utiliser Wamp. Si vous ne le possédez pas, vous pouvez le télécharger via l’adresse suivante. Après l’avoir téléchargé, installez-le. Maintenant que Wamp est opérationnel, vous pouvez non seulement simuler un serveur PHP en local mais aussi un serveur de base de données SQL. Pour utiliser la simulation du serveur PHP, il vous suffit de placer votre projet dans le répertoire « www » des répertoires d’installation de Wamp et de démarrer Wamp. Pour gérer la base de données, vous devez aussi démarrer Wamp (si ce n’est pas encore fait), ouvrir votre navigateur préféré et y entrer l’URL suivante : http://localhost/phpmyadmin/.

A noter que le nom d’utilisateur par défaut de phpMyAdmin est « root » et qu’il n’y a pas de mot de passe.

Le deuxième prérequis est Composer. Vous ne l’avez pas ? Pas de panique, vous le télécharger ici. Après l’avoir téléchargé, vous devez l’installer. Au moment de l’installation il va vous demander où se trouve le fichier « php.exe », si vous avez installé Wamp, rendez-vous dans son répertoire d’installation, puis dirigez-vous dans « bin\php\php7.0.10 » et sélectionnez le fichier « php.exe ».

Installation de Composer

Démarrez votre serveur PHP en allumant Wamp, dans votre barre des tâches vous devriez voir l’icône de Wamp en vert, si ce n’est pas le cas c’est qu’il y a un problème avec votre Wamp, et je ne peux que vous inviter à consulter le forum officiel.

Afin que PHP soit atteignable en ligne de commande, vous devez l’ajouter dans le Path. Pour cela, ouvrez votre panneau de configuration Windows, allez dans « Système », « Paramètres système avancés », puis cliquez sur « Variables d’environnement… ». Dans les variables système, cliquez sur « Path », puis sur « Modifier ». Il ne vous reste plus qu’à y ajouter le chemin de PHP.

2_voyager-le-panneau-d-administration-laravel_installation-composer_blog-karac

Rendez-vous dans le dossier contenant vos projets (par exemple : C:\Projets), ouvrez une invite de commande dans cet emplacement (vous pouvez utiliser le raccourci clavier maj + clic droit puis choisissez « Ouvrir l’invite de commande ici » ou « Ouvrir la fenêtre PowerShell ici »). Maintenant que votre console est ouverte, tapez la commande suivante :

composer create-project --prefer-dist laravel/laravel NomDeVotreProjet

L’exécution de la commande prendra quelques minutes, mais à la fin de celle-ci vous aurez un Laravel tout beau tout propre ?

3_voyager-le-panneau-d-administration-laravel_installation-laravel_blog-karac

Maintenant que votre Laravel est installé, nous allons devoir configurer quelques petites choses. Commençons par la base de données. Pour ce faire, nous allons déjà commencer par créer une base de données via le phpMyAdmin de Wamp, celui est accessible en utilisant l’URL http://localhost/phpmyadmin/. Pour cet exemple, nous allons appeler la nouvelle base de données « tutoVoyager » (mais vous êtes bien évidemment libre d’utiliser un autre nom :P).

Création d'une base de données avec Wamp

Notre jolie base de données étant créée, il nous faut la lier à notre projet Laravel. Pour ce faire, ouvrez le dossier contenant le Laravel installé (dans mon cas « NomDeVotreProjet ») et ouvrez le fichier « .env » (fichier contenant les variables d’environnement) à l’aide votre éditeur préféré. À la ligne 6, vous devez y ajouter le port « :8000 », à la ligne 11 (DB_DATABASE) vous devez mettre le nom de votre base de données, à la ligne 12 (DB_USERNAME) le nom de votre identifiant phpMyAdmin et à la ligne 13 (DB_PASSWORD) votre mot de passe phpMyAdmin (ayant gardé la configuration par défaut, je n’ai pas de mot de passe).

5_voyager-le-panneau-d-administration-laravel_variables-d-environnement_blog-karac

Votre connexion à la base de données est opérationnelle. Mais si comme moi, vous utilisez Windows, il se peut que celle-ci ne fonctionne pas (Erreur : « Syntax error or access violation: 1071 Specified key was too long »). Pas de panique, on peut facilement régler ce problème. Ouvrez le fichier config\database.php et remplacer la ligne 54 (engine) par la ligne suivante :

'engine' =>  'InnoDB ROW_FORMAT=DYNAMIC',

Afin d'être sûr que la connexion à la base de données fonctionne sans accroc, nous allons la tester. Et pourquoi ne pas la tester en y intégrant directement un système d’authentification ? Oui Laravel nous permet d’intégrer un tel système en quelques clics (je vous ai déjà dit que Laravel est un framework génial ? :D). Il vous suffit de vous rendre dans votre console, d’aller dans le dossier contenant votre projet laravel (cd NomDeVotreProjet) et de lancer la commande suivante :

php artisan make:auth

Il ne nous reste plus qu'à faire une migration avec la commande :

php artisan migrate

Si vous allez voir votre base de données, vous verrez qu’elle n’est plus vide :)

6_voyager-le-panneau-d-administration-laravel_base-de-donnees_blog-karac.png

Installation de Voyager

Vous avez un projet Laravel clean ? Alors c’est parti pour l’installation de Voyager ! Rendez-vous dans votre dossier de projet avec votre console puis lancez la commande :

composer require tcg/voyager

Vous devez y ajouter le provider de Voyager, pour cela, avec votre éditeur de texte ouvrez le fichier config\app.php. Puis ajoutez la ligne suivante dans l’emplacement dédié aux Packages Service Providers.

TCG\Voyager\VoyagerServiceProvider::class,

Ajout du provider Voyager

Il ne vous reste plus qu’à passer à l’installation à proprement dite de Voyager. Pour ce faire, dans votre console lancez la commande :

php artisan voyager:install

Dans ce tutoriel nous allons installer un voyager vide, si vous avez envie d’avoir des données de test, vous pouvez lancer la commande :

php artisan voyager:install --with-dummy

Et voilà, notre Voyager est bel et bien installé dans notre projet Laravel ? Mais il est impossible de tester Voyager sans serveur PHP. N’ayez crainte, Laravel offre la possibilité de simuler un serveur. Pour cela, vous devez ouvrir une nouvelle console à l’emplacement de votre projet et lancer la commande :

php artisan serve

Dans votre navigateur, entrez l’URL suivante : localhost:3000/admin/login

Nous voilà face au formulaire nous permettant de nous loguer au panneau de Voyager. Mais si comme moi vous avez créé un Voyager vide sans dummy data, vous n’aurez pas encore de compte. Pour créer un compte administrateur, vous devez lancer la commande :

php artisan voyager:admin votre@email.com

Suite à quoi on va vous demander un nom d’administrateur et un mot de passe (dans mon cas, name : admin, password : admin mais je ne peux que vous conseiller d’utiliser un mot de passe plus sécurisé :P).

8_voyager-le-panneau-d-administration-laravel_voyager-admin_blog-karac

Avec votre compte admin, vous pouvez maintenant vous loguer dans le panneau d’administration de Voyager. Si vous avez utilisé les dummy data, vous pouvez vous connecter avec les identifiants suivants ; email : admin@admin.com, mot de passe : password.

Panneau d'administration Voyager

Nous arrivons au terme de cette partie 1. N’hésitez pas à naviguer dans Voyager, à tester par vous-même et à suivre la deuxième partie de de la série ?

Sources

Catégories :

Tech web

Tags :

PHP Laravel

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !

Voyager, le panneau d’administration Laravel (Partie 1) - Présentation et installation