J'ai continué à explorer les possibilités de Voyager dont je vous ai parlé dans le précédent article. La meilleure façon de procéder était de prendre un exemple, ce que j'ai fait. J'ai imaginé, puisqu'il s'agit de voyage, un site avec possibilité d'authentification, avec des descriptions de pays avec catégories et aussi de produits sur une page.

L'application

L'application est récupérable sur Github. Pour l'installation c'est du grand classique et c'est expliqué sur Github. Il ne faut surtout pas utiliser la commande d'installation de Voyager au risque de tout casser ! Si tout se passe bien vous devriez aboutir à cette page d'accueil :

Le design est issu d'un template (Editorial) de l'excellent site Html5 up!. Je l'ai pris tel quel en lui ajoutant juste quelques règles CSS pour avoir des alertes, ce qui n'est pas prévu par défaut. Il est parfaitement responsive. Sur l'accueil on a donc un simple page de présentation et un menu. Dans ce menu on a les classiques de l'authentification. On peut donc se connecter :

S'enregistrer :

Récupérer son mot de passe :

Il y a un utilisateur administrateur avec ces données :

admin@admin.com
password

Evidemment une fois connecté le menu change :

Pour les voyages on a un sous-menu avec deux continents :

Histoire de tester les catégories. Quand on choisit un continent on affiche l'image et le résumé de chacun :

On a un bouton "MORE" pour avoir le détail du pays sur une seule page :

Pour les produits j'ai prévu de tout mettre sur une seule page, sans catégories :

Le bouton "ADD TO CART" se contente d'ouvrir une fenêtre modale de confirmation et ça ne va pas plus loin.

La page d'accueil

Pour la page d'accueil j'ai utilisé les pages de Voyager :

L'édition est facile et on dispose d'un éditeur "riche" :

Ca permet de bien régler le HTML. Au niveau du contrôleur le code est tout simple :

use TCG\Voyager\Models\Page;

...

public function __invoke()
{
    $page = Page::whereSlug('homepage')->firstOrFail();

    return view('home', compact('page'));
}

Les voyages (travels)

Les catégories

Pour les catégories j'ai utilisé l'infrastructure prévue :

On a une catégorie principale "Travels" et deux enfants "Africa" et "Europa". Le choix de la catégorie parente apparaît dans une boîte déroulante :

Le tout fonctionne très bien.

Les posts

Pour les pays j'ai utilisé les posts :

Le seul souci que j'ai eu c'est au départ la catégorie ne se mémorisait pas dans la base. Il a fallu que je raffraichisse le BREAD pour que ça fonctionne. Pour l'affichage en frontend le code est facile au niveau du contrôleur :

use TCG\Voyager\Models\Category;

...

public function index($category)
{
    $category = Category::whereSlug($category)->with('posts')->firstOrFail();

    return view('posts', compact('category'));
}

Donc avec une URl de la forme .../posts/africa on obtient le résumé de tous les pays d'Afrique. Pour simplifier je n'ai pas demandé de pagination. Pour l'affichage d'un pays en particulier c'est tout aussi aisé :

use TCG\Voyager\Models\Post;

...

public function show($slug)
{
    $post = Post::whereSlug($slug)->firstOrFail();
    
    return view('post', compact('post'));
}

Donc avec une URL de la forme .../post/algeria on obtient l'article pour l'Algérie.

Les produits

Pour les produits, l'entité n'existait pas. Je me suis inspiré de cette vidéo très bien faite. Il faut utiliser le bouton "Create New Table" et se laisser guider :

Le formulaire est très bien fait :

On peut ajouter toutes les colonnes qu'on veut. La table se crée sans autre intervention ! On a aussi le modèle créé automatiquement. Il faut ensuite bien régler la visibilité de chaque colonne et le contrôle de saisie pour les différentes opérations :

Et surtout ne pas oublier les permissions pour l'administrateur :

J'ai été un peu déçu de ne pas retrouver automatiquement un widget sur l'accueil de l'administration pour mes produits :

Les widgets sont codés "en dur" dans le package. Ca aurait quand même plus d'allure :

On devrait pouvoir paramétrer ce qu'on veut sur la page d'accueil de l'administration. J'ai d'ailleurs envoyé un PR pour ça et une discussion est en cours. Edit : c'est désormais fait avec ce commit.

Le menu

Le menu m'a donné un peu plus de mal. Pour le créer c'est facile :

Pour l'organiser aussi :

Mais pour l'intégration, quand on sort de Bootstrap avec un sous-menu on galère un peu. Ce que j'ai fait relève un peu du bricolage :

<li>
    @foreach($items as $menu_item)
        @if($loop->first)
            <span class="opener">{{ $menu_item->title }}</span>
            <ul>   
        @else
            @if(!$menu_item->parent_id)
                </ul>
            @endif 
            <li><a href="{{ url($menu_item->url) }}">{{ $menu_item->title }}</a></li>
        @endif
    @endforeach

Mais ça fonctionne... Je pense qu'il y aurait une amélioration à apporter ici pour bien pouvoir distinguer les niveaux des menus.

Conclusion

Le système est pratique et plutôt séduisant. On peut faire une mise en place rapide de l'administration. Il faudrait voir avec une situation plus complexe. Il faut voir également l'évolution du projet...