Voyager : présentation
Voyager est un nouvel outil pour créer facilement et automatiquement l’administration d’un site, c’est du moins la proposition. Je vous propose de découvrir cet outil et de voir ce qu’il a à nous offrir. Il faut quand même bien garder à l’esprit que c’est encore en version alpha. Alors partons en voyage !
Installation
La première chose à faire est d’installer Voyager. Comme c’est un package standard c’est facile à faire. Il suffit dans un premier temps de créer une nouvelle installation de Laravel 5.3 puis d’ajouter le package :
composer require tcg/voyager
Il faut ensuite ajouter le provider dans config/app.php :
/* * Package Service Providers... */ TCG\Voyager\VoyagerServiceProvider::class,
Et enfin il faut créer et configurer une base de données.
Jusque là que du classique mais voyager n’est pas encore vraiment installé, il est juste présent dans le vendor.
Il y a une commande d’artisan pour l’installer :
php artisan voyager:install
Mais comme cette commande fait une installation vierge on va lui préférer celle avec l’option qui ajoute un administrateur et du contenu :
php artisan voyager:install --with-dummy
Les éléments pour connecter l’administrateur sont :
email : admin@admin.com password : password
On peut maintenant accéder à l’administration avec
.../admin
Il faut alors se connecter avec un joli formulaire :
Et on arrive enfin dans l’administration :
Tout fonctionne et l’esthétique est au rendez-vous !
En plus on dispose de vidéos de présentation sur Youtube :
Et d’une documentation fournie :
La configuration
On peut changer des réglages de Voyager dans config/voyager.php :
'user' => [ 'add_default_role_on_register' => true, 'default_role' => 'user', 'admin_permission' => 'browse_admin', 'namespace' => App\User::class, ],
Ici on peut régler ce qui concerne les utilisateurs au niveau des rôles et permissions, ainsi que l’espace de nom.
On trouve dans le même fichier des réglages concernant l’espace de nom du contrôleur, l’emplacement des assets et du storage. A priori on ne va pas toucher à tout ça pour nos essais mais c’est bon à savoir.
Les routes
On a évidemment de nouvelles routes pour l’administration :
- admin
- admin/login (GET et POST)
- admin/logout
- admin/media/… (on a là plusieurs routes pour les medias)
- admin/menus/… (là aussi plusieurs routes pour la gestion des menus)
- admin/pages/… (toutes les routes pour la gestion des pages)
- admin/profile
- admin/roles/… (pour la gestion des rôles)
- admin/settings/…
- admin/upgrade
- admin/upload
- admin/users/… (pour la gestion des utilisateurs)
Ca en fait pas mal !
Les entités
Voyons un peu ce qui est en place comme entités…
Les rôles
A partir de l’administration on peut gérer les rôles :
De base on n’en a que 2 (d’ailleurs la pagination n’est pas très heureuse là…).
On a les actions classiques (voir, modifier, supprimer, créer un nouveau).
En mode création ou modification on peut gérer très précisément les permissions :
Je n’ai pas tout mis sur l’illustration, on a aussi les users, les posts et categories. Je suppose que tout ça est modifié de façon dynamique quand on change des entités, je vérifierai plus loin.
Les utilisateurs
On peut aussi gérer les utilisateurs :
On n’a que l’administrateur au départ. On retrouve toutes les actions classiques à ce niveau également. On peut remarquer la gestion de l’avatar.
J’arrive facilement à ajouter un utilisateur :
Les petites icônes pour l’ordre de tri fonctionne bien (sauf pour les rôles), on se demande juste l’intérêt d’en avoir sur la colonne des boutons…
Les catégories
On a aussi des catégories, de quoi ? D’articles.
On peut d’ailleurs avoir des catégories de catégories et ainsi avoir un système hiérarchisé.
Les articles
On a des articles (posts) :
On dispose des colonnes classiques (title, status, created_at) mais aussi on peut associer une image, du seo (pour les metas) et une mise en avant (featured).
En mode création ou édition, en plus des classiques titres et contenu, on peut agir sur les détails de l’article :
Les statuts sont : draft, pending et published.
On a aussi un formulaire pour l’image :
Et un autre pour le SEO :
Enfin on dispose aussi d’une zone de saisie pour une courte description de l’article :
On a donc quelque chose de très complet pour les articles !
Les pages
On a aussi des pages :
Moins de colonnes que les articles : titre, corps, résumé, slug, metas, statut (actif ou non) et image.
Les médias
Les médias sont très bien gérées :
Ils sont organisés en dossiers :
Mais on peut complètement changer cette organisation. D’autre part on peut envoyer, déplacer, renommer, visualiser ou supprimer une image.
Par contre au niveau de l’insertion d’une image dans une page ou un article je n’ai pas vu la possibilité d’en prendre une dans la librairie, on peut juste en télécharger une :
On peut d’ailleurs voir que l’éditeur choisi est un grand classique : TinyMCE.
Gestion des tables de la base
On peut gérer les tables de la base à partir de l’administration :
On peut avec View analyser les colonnes de la table :
Mais on peut aussi modifier tout ça à partir d’un formulaire :
On a ainsi un contrôle direct total sur la table.
BREAD
Un aspect intéressant de Voyager est la facilité de mise en place des opérations de base sur la base de données :
- BROWSE
- READ
- EDIT
- ADD
- DELETE
Ce qui donne l’acronyme BREAD, du pain sur la planche !
Lorsque le BREAD est déjà en place on a une tranche de pain pour la table :
Sinon on peut l’ajouter :
Pour chaque colonne d’une table on peut définir précisément les opérations possibles, le type de contrôle (text, checkbox, textarea…) à prévoir et le nom à afficher :
Il y a en plus une zone de saisie (en JSON) pour apporter certains détails :
- par exemple pour renseigner les options d’une boîte déroulante
- pour préciser des règles de validation
- pour définir les relations
Prenons des exemples, pour les pages la colonne status :
{ "default": "INACTIVE", "options": { "INACTIVE": "INACTIVE", "ACTIVE": "ACTIVE" } }
On définit ici les deux options ainsi que celle par défaut.
Un exemple avec une relation dans la table des catégories pour la colonne parent_id :
{ "default": "__null__", "null": "__null__", "options": { "__null__": "NULL" }, "relationship": { "key": "id", "label": "name" } }
Pour la relation (relationship) on se réfère à l’id et on va afficher le name. Evidemment la relation doit exister dans le modèle :
public function parent_id() { return $this->belongsTo(self::class); }
Là c’est une auto-référence pour avoir des sous-catégories. Du coup quand on ajoute une catégorie on a un remplissage correct de la zone déroulante :
C’est astucieux comme approche…
Les menus
En plus Voyager permet la gestion de menus :
On dispose d’un builder graphique intuitif :
Et pour chaque item un réglage des paramètres à partir d’un formulaire :
L’intégration d’un menu se fait à partir d’une façade :
Menu::display('mon_menu');
On obtient une simple liste sans style, pour avoir la version Bootstrap c’est facile :
Menu::display('mon_menu', 'bootstrap');
Et évidemment on peut prévoir sa propre mise en forme.
Conclusion
Ce Voyager est très prometteur, il se situe entre le générateur et le CMS en un lieu plutôt judicieux. Il faut voir comment le projet évolue puisqu’on en est seulement à la version alpha.
Je vous conseille le visionnage des vidéos qui sont très bien faites.
Je pense rédiger un autre article avec un exemple d’intégration.
13 commentaires
kouyate
Bonsoir bestmomo, j’aimerais savoir s’il n’y a pas un package qui permet de traduire un temps soit peu en francais, merci.
ruben66
Salut BestMomo, j’ai découvert cette interface d’administration il y a peu de jours et j’ai décidé de l’intégrer pour un projet que j’avais.
J’ai toutefois un problème, j’ai importé une base de données mais celle-ci a énormément d’entrées, hors quand je regarde le nombre d’enregistrements retourné celui-ci n’est que de 100. Or j’aurais besoin d’avoir beaucoup plus d’enregistrements retournés. Mais je ne parviens pas à outrepasser cette limite de 100 enregistrements. Est-ce que tu sais comment je pourrais retourner tous mes enregistrements qui sont dans ma table?
Bonne journée à toi et merci d’avance
bestmomo
Salut,
Je n’ai pas utilisé Voyager depuis cet article et je n’ai aucune idée concernant cette limitation qui me surprend…
ruben66
Je pense que c’est le plugin js datatable qui limite. Mais je ne vois pas où configurer cette option.
ruben66
Je viens de regarder. Même en overridant le controller et en faisant un ->get() pour récupérer tous les éléments d’une table, seulement les 100 derniers enregistrements sont retournés de la table. Je m’arrache les cheveux depuis quelques jours.
Omar-Haboussi
slt comment faire la traduction de voyager en francais
panda_roux
Si tu n’a pas toujours trouvé j’ai trouvé la solution directement dans le dossier de voyager tu a pleins de traduction notamment ANG et FR, j’ai copier le fichier fr et renommé le fichier ang en « -old » puis j’ai copié le fichier fr en lui donnant le nom de ang pour le system prenne les infos en FR 🙂
kouman
slt il te suffit simplement d’allez dans ton fichier config/app et modifie ‘locale’ => ‘fr’, et ‘fallback_locale’ => ‘fr’, et tu lance la commande « composer dump-autoload -o » pour redémarrer et c’est tout…
baron007
Bonsoir,
J’ai installé Voyager dans un projet avec Auth installé du coup impossible de me connecter à Voyager j’ai ce message « Ces identifiants ne correspondent pas à nos enregistrements ».
Auriez-vous une explication s’il vous plaît?
Cordialement.
bailo
Bonjour,
j’ai suivi le tuto pour faire le voyager sauf que j’ai un probleme qui est :
la page localhost:8080/admin se présente mais une fois login et password puis submit sa me retourne l’erreur si dessous.
pouvez vous m’aider svp
Whoops, looks like something went wrong.
1/1 TokenMismatchException in VerifyCsrfToken.php line 68:
in VerifyCsrfToken.php line 68
at VerifyCsrfToken->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in ShareErrorsFromSession.php line 49
at ShareErrorsFromSession->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in StartSession.php line 64
at StartSession->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in AddQueuedCookiesToResponse.php line 37
at AddQueuedCookiesToResponse->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in EncryptCookies.php line 59
at EncryptCookies->handle(object(Request), object(Closure)) in Pipeline.php line 148
at Pipeline->Illuminate\Pipeline\{closure}(object(Request)) in Pipeline.php line 53
at Pipeline->Illuminate\Routing\{closure}(object(Request)) in Pipeline.php line 102
at Pipeline->then(object(Closure)) in Router.php line 561
bestmomo
Bonjour,
J’ai utilisé Laravel 5.3 pour mon article je n’ai pas eu ce souci. Apparemment c’est un problème de vérification CSRF, donc il faudrait vérifier que le token est bien transmis.
kickblast
C’est vrai que ce projet est tres interressant, reste a voir ou se situent les contraintes et limites. Hate de voir un exemple d’integration!
bestmomo
Oui c’est assez séduisant, je vais voir comment intégrer ça…