Laravel

Installation

Laravel

On va partir d'un Laravel 11 tout neuf. Si vous avez un souci à ce niveau, vous pouvez vous référer à cette partie de mon cours. Vous devez avoir la page d'accueil de Laravel 11 :

Dans le fichier .env renseignez bien les variables pour la base de données avec l'utilisation de MySQL en local :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=albums
DB_USERNAME=root
DB_PASSWORD=

Pour le moment, n'installez aucun kit pour l'authentification.

maryUI

On va maintenant installer maryUI :

composer require robsontenorio/mary

Puis :

php artisan mary:install

Là vous allez tomber sur deux question :

Also install `livewire/volt` ?

Vous répondez oui, donc la valeur 0. La seconde question concerne l'outil à utiliser, choisissez npm. Il va s'installer de nombreuses choses et en particulier DaisyUI et Tailwind. Il ne reste plus qu'à générer avec Vite! :

npm run build (ou dev)

On va aussi lancer les migrations :

php artisan migrate

Organisation

Ça devrait être bon, voici la nouvelle page d'accueil : Pour votre plus grand plaisir, vous avez déjà quelque chose de fonctionnel. Vous pouvez trouver sur le site de maryUI un tuto complet pour apprendre à utiliser les composants. Libre à vous d'explorer tout ça, mais on va l'ignorer pour la suite de notre exemple.

Comme on utilise Volt on va avoir des composants. Dans l'installation initiale de maryUI on a eu la création automatique d'un composant :

Si vous allez voir le code, vous trouverez deux parties :

• une classe PHP pour la gestion
• une partie HTML pour la vue

C'est le principe de base de Volt qui concentre dans le même fichier ce qui est habituellement séparé avec Livewire.

En ce qui concerne le layout, il se trouve par défaut ici :

On dispose par défaut d'une page avec une barre de navigation rétractable sur la gauche. On va l'utiliser pour notre application.

Au niveau de la route qui a été créée pour afficher le composant, ça se passe évidemment dans route/web.php :

use Livewire\Volt\Volt;

Volt::route('/', 'users.index');

On utilise la façade Volt pour créer les routes qui pointent sur un composant de Volt. Remarquez la syntaxe avec le point pour désigner l'emplacement du composant.

On va créer maintenant un composant pour la page d'accueil de notre application :

php artisan make:volt index --class

Avec ce code par défaut :

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
}; ?>

<div>
    //
</div>

Ici une petite précision s'impose. Lors de la création d'un composant Volt, vous avez deux options pour écrire le code PHP : utiliser du PHP standard ou utiliser une classe PHP. Les deux méthodes offrent des avantages et des inconvénients, et votre choix dépendra de vos préférences et de votre contexte de développement :

• en utilisant du PHP standard,
• en utilisant une syntaxe de classe PHP, vous devez alors utiliser l'option --class lors de la génération du composant

Si vous utilisez du PHP standard, il sera ensuite automatiquement compilé en classe.

Personnellement, je préfère la syntaxe des classes et c'est ce que je vais utiliser dans notre exemple.

Pour pointer sur notre nouveau composant on va modifier la route :

Volt::route('/', 'index');

Avec évidemment un aspect plutôt épuré :

On a toujours la barre de navigation latérale qui est dans le layout et à côté une page vide.

La barre de navigation

Comme on va avoir pas mal de travail au niveau de la barre de navigation et qu'il va falloir la gérer de façon spécifique, autant créer un composant pour elle :

php artisan make:volt navigation --class

On va basculer le code présent dans le layout qui concerne la navigation dans le composant navigation et ensuite référencer ce composant. On va donc avoir dans navigation ce code (partie HTML) :

<div>
    <x-menu activate-by-route>

        {{-- User --}}
        @if($user = auth()->user())
            <x-menu-separator />

            <x-list-item :item="$user" value="name" sub-value="email" no-separator no-hover class="-mx-2 !-my-2 rounded">
                <x-slot:actions>
                    <x-button icon="o-power" class="btn-circle btn-ghost btn-xs" tooltip-left="logoff" no-wire-navigate link="/logout" />
                </x-slot:actions>
            </x-list-item>

            <x-menu-separator />
        @endif

        <x-menu-item title="Hello" icon="o-sparkles" link="/" />
        <x-menu-sub title="Settings" icon="o-cog-6-tooth">
            <x-menu-item title="Wifi" icon="o-wifi" link="####" />
            <x-menu-item title="Archives" icon="o-archive-box" link="####" />
        </x-menu-sub>
    </x-menu>
</div>

Et dans le layout  :

...

{{-- MAIN --}}
<x-main full-width>
    {{-- SIDEBAR --}}
    <x-slot:sidebar drawer="main-drawer" collapsible class="bg-base-100 lg:bg-inherit">

        {{-- BRAND --}}
        <x-app-brand class="p-5 pt-3" />

        {{-- MENU --}}
        <livewire:navigation />
    </x-slot:sidebar>

    {{-- The `$slot` goes here --}}
    <x-slot:content>
        {{ $slot }}
    </x-slot:content>
</x-main>

...

J'ai donc enlevé dans ce layout tout ce qui concernait la navigation et référencé notre nouveau composant avec :

<livewire:navigation />

Donc, comme un classique composant de Livewire. Normalement au niveau de la page d'accueil vous ne devriez avoir aucune différence. Par contre pour notre gestion des menus on va disposer maintenant de la partie PHP !

Conclusion