Voyager, le panneau d’administration Laravel (Partie 2) – Premiers pas

Voyager, le panneau d’administration Laravel (Partie 2) – Premiers pas

Tech web
Cloche d'abonnement aux notifications | |
  • Recevoir les notifications

  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 le premier article de la série consacrée à Voyager, nous avons vu comment installer Laravel ainsi que Voyager. N’est-il pas temps de passer aux choses sérieuses ? Dans ce tutoriel nous allons voir plus en détail ce que nous offre Voyager en termes de users, posts et gestion de la base de données.

  1. Partie 1 – Présentation et installation
    1. Voyager ? Késako ?
    2. Installation de Laravel
    3. Installation de Voyager
  2. Partie 2 – Premiers pas
    1. Les posts
    2. Les utilisateurs et les rôles
    3. La gestion de la base de données et du BREAD
  3. Partie 3 – Pour aller plus loin
    1. Les menus
    2. Les validations
    3. Les relations
    4. Les widgets

Les posts

Voyager permet de créer un système de posts en quelques clics. Pour y accéder, il vous suffit de cliquer sur l’onglet « Posts ». Cliquons sur « Add New » pour voir ce qu’on nous propose de beau.

Alors, nous avons la possibilité d’ajouter un titre, un contenu via un texte riche (l’éditeur est TinyMCE, si vous voulez le customiser, je vous invite à consulter la documentation officielle de l’éditeur). Nous avons aussi un petit champ de texte permettant d’y ajouter un résumé.

création d'un post avec Voyager

 

 

Voyager nous permet aussi de définir un slug (utilisé pour avoir des URLs propres), le statut du post et la catégorie. A noter qu’il y a un bug au niveau de la catégorie, car la relation entre les posts et les catégories est inexistante. Si vous voulez créer une telle relation, je vous invite à lire le troisième article de la série, plus particulièrement le chapitre traitant des relations.

Création d'un post - post détails

 

Vous avez aussi la possibilité d’y ajouter une image principale. Si vous le faites, celle-ci sera disponible via l’onglet « Media ». Malheureusement, cette version de Voyager ne permet pas de réutiliser les images déjà uploadées auparavant. Dommage, on espère que les nouvelles versions de l’outil vont apporter du neuf de ce côté-là ?

Image principale d'un post - post image

 

Et pour terminer cette petite balade dans la création des posts, trois champs dédiés au SEO.

Création d'un post - SEO

 

A première vue le système de posts de Voyager est complet. Mais vous allez vite vous rendre compte qu’il a été malheureusement mal conçu. Effectivement, les posts utilisent une view personnalisée, ce qui a pour effet de ne pas prendre en compte les modifications que vous allez effectuer sur la structure des posts.

Pour résoudre ce problème, nous avons deux solutions. La moins propre consiste à modifier ces views personnalisées (vendor/tcg/voyager/ressources/views/posts/…), mais à la moindre mise à jour de Voyager nous risquons de perdre nos modifications, du coup je déconseille cette solution. La deuxième solution, plus viable, consiste simplement à changer le slug URL du bread de l’entité post. Pour ce faire, allez dans « database », puis cliquez sur le bouton « Edit BREAD » de posts. Dans l’URL Slug, mettez y par exemple « news ».

Modification d'un slug d'un article

 

Du coup, Voyager ne va pas lier cette entité aux vues spécifiques posts. Et nous, on peut modifier la structure des posts comme on le souhaite, sans être embêtés :D Il ne vous reste donc plus qu’à vous organiser pour le front et vous aurez un système de posts complet.

  A noter que pour les users, c’est la même histoire, il y a aussi des views personnalisées. Pour éviter le problème, suivez la marche à suivre utilisée pour les posts ?.

 

Les utilisateurs et les rôles

Voyager intègre un système de users avec rôles. Puisque nous sommes connectés avec un compte admin, nous pouvons sans autre créer de nouveaux users. Pour cela, via le menu de gauche, nous allons cliquer sur « Users », puis sur « Add New ».

Nous allons commencer par créer un utilisateur « Test » qui n’aura pas le rôle d’administrateur, mais qui sera un simple User.

Création d'un nouvel user

 

Vous avez créé ce nouveau compte ? C’est tout bon ? Maintenant si nous nous déconnectons à l’aide du bouton « Logout » et que nous nous connectons avec le compte « Test » nous serons redirigés sur la page home car l’accès au panneau d’administration est par défaut interdit aux « Normal User ». Nous allons voir comment changer ces droits. Commençons par nous déloguer de notre compte à l’aide du bouton « Logout ».

Voyager - logout

 

Redirigeons-nous sur l’URL localhost:8000/admin et loguons-nous avec le compte administrateur. Via le menu de gauche, cliquons sur « Roles ». De base, il n’y a que deux rôles, le rôle « user » et le rôle « admin », mais rien ne vous empêche d’en créer d’autres si vous en avez besoin.

Si vous voulez créer un nouveau rôle, cliquez sur « Add New », mais pour ce tutoriel nous allons nous contenter de modifier le rôle existant « Normal User ». Cliquons sur le bouton « Edit » de la ligne du « Normal User ». C’est via cette page que nous pouvons modifier les droits des utilisateurs. Si nous voulons que nos utilisateurs lambdas puissent accéder au panneau d’administration et puisse aussi créer et modifier des posts, nous allons cocher les cases suivantes :

Rôles des users

 

Déloguons-nous et connectons-nous avec le compte du Normal User « Test », nous pouvons maintenant bel et bien accéder au panneau d’administration et nous pouvons même écrire de nouveaux posts ? Par contre, nous n’aurons pas accès à la gestion des autres utilisateurs, tout comme la gestion des pages, des médias, de la base de données et des menus.

 

La gestion de la base de données et du BREAD

Un des points forts de Voyager est la gestion facilitée de la base de données. Si vous êtes connecté avec un compte admin, via Tools vous pouvez normalement accéder à l’onglet « Database » et voir quelque chose dans ce goût-là :

Gestion de la base de données via Voyager

 

Pour l'exemple nous allons créer un système nous permettant de gérer des biens immobiliers. Nous allons commencer par créer une nouvelle table en cliquant sur « Create New Table ».

Notre table va s’appeler « immobiliers » et aura 4 champs :

  •          un id auto incrément de type INTEGER
  •          un name de type VARCHAR
  •          un price de type INTEGER
  •          une description de type TEXT

Je n’ai pas coché le « Not Null » pour le nom ni pour le prix, car il y a une autre manière plus propre de gérer la validation. Cette façon de faire vous sera expliquée dans le chapitre traitant des validations disponibles dans le troisième article de la série.

Nous allons aussi ajouter les champs liés aux Timestamps et au Soft Deletes à l’aide des boutons correspondants.

Par la même occasion, nous allons aussi créer un Model, celui-ci pourra être utilisé par la suite si vous voulez y ajouter des fonctionnalités spécifiques aux entités de type bien immobilier.

Edition de la base de données via Voyager

 

  A noter que le bouton permettant de créer automatiquement la migration n’est malheureusement pas (encore ?) utilisable. Si vous voulez avoir des migrations propres, il va donc falloir les recréer à la main ou utiliser un plugin comme migrations-generator, qui va créer des migrations suivant ce que vous avez dans votre base de données.

 

Retournons dans la gestion de la base de données. Notre table « immobiliers » est bel et bien présente. Nous allons maintenant utiliser le puissant système BREAD (Browse, Read, Edit, Add, Delete) de Voyager, afin de mettre en place un système permettant de gérer ces biens immobiliers via le panneau d’administration. Cliquons sur « Add BREAD to this table ».

Ajout d'un BREAD

 

Remplissons les champs comme ceci :

Configuration du BREAD

 

Dans le tableau suivant, nous allons changer le type d’input pour le name, le price et la description. Dans le « Display Name », nous allons traduire en Français les noms des champs.

BREAD input type

 

Maintenant que nous avons créé un BREAD pour les biens immobiliers, essayons de nous connecter sur la page de la gestion des biens immobiliers via l’URL //localhost:3000/admin/immobiliers. Vous avez une erreur ? N’ayez crainte, c’est normal :P Il faut changer les droits des comptes administrateurs afin que ceux-ci aient accès à cette section. Pour ce faire, allez modifier le rôle admin et cochez toutes les cases relatives à « Immobiliers ».

Gestion des droits des utilisateurs

 

Ressayez de vous connecter à //localhost:3000/admin/immobiliers, vous ne devriez plus avoir de problème.

  Si vous n’avez pas ajouté de Timestamp à la table « Immobiliers, vous risquez d’avoir une erreur.

 

Depuis cette page, appuyez sur « Add New » pour ajouter un nouveau bien immobilier.

Création d'un bien immobilier

 

Nous pouvons maintenant créer/éditer/supprimer des biens immobiliers. Il ne vous reste plus qu’à gérer la partie front afin d’avoir un affichage correct pour le visiteur.

La deuxième partie de la série consacrée à Voyager touche à sa fin, je ne peux que vous inviter à consulter la partie 3, qui va plus dans la profondeur des choses.

 

  1. Partie 1 – Présentation et installation
    1. Voyager ? Késako ?
    2. Installation de Laravel
    3. Installation de Voyager
  2. Partie 2 – Premiers pas
    1. Les posts
    2. Les utilisateurs et les rôles
    3. La gestion de la base de données et du BREAD
  3. Partie 3 – Pour aller plus loin
    1. Les menus
    2. Les validations
    3. Les relations
    4. Les widgets

 

Sources

Catégories :
Tech web

Tags :
PHP Laravel

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