Les CMS

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.

Print Friendly, PDF & Email

13 commentaires

  • 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

    • 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 🙂

  • 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

Laisser un commentaire