Laravel 11

Albums – Installation

J’avais proposé il y a longtemps un projet alors en Laravel 5 concernant la gestion de photos. Depuis les versions se sont succédées et la technologie n’a cessé de s’améliorer. Alors, j’ai eu envie de reprendre l’esprit de ce projet, mais cette fois de le réaliser avec Volt et maryUI. Volt est assez récent, c’est une façon plus compacte d’utiliser Livewire. Quand à maryUI, c’est une bibliothèque de composants UI pratique et élégante qui évite d’aller trop mettre les doigts dans le verbiage de Tailwind.

Introduction

Volt

Volt offre une nouvelle perspective à l’utilisation de Livewire en simplifiant la création et la gestion des composants. Au lieu de gérer des classes Livewire traditionnelles et des vues Blade séparées, Volt propose une API fonctionnelle unique qui encapsule toute la logique PHP et Blade en un seul fichier, semblable à la programmation des composants dans Vue.js ou React. En gros, c’est du Lievewire plus compact.
Les principaux avantages de Volt sont les suivants :
  1. Productivité accrue : L’utilisation de composants monofichiers améliore la productivité des développeurs en réduisant le nombre de fichiers à gérer et à entretenir. En regroupant le code PHP et Blade dans un même fichier, le temps passé à passer d’un fichier à un autre est réduit, ce qui accélère la création de composants.
  2. Apprentissage plus facile : Volt rend l’apprentissage de Livewire plus facile, surtout pour les développeurs qui sont familiers avec les frameworks JavaScript comme Vue.js ou React. L’API fonctionnelle de Volt est plus intuitive pour les développeurs qui ont l’habitude de travailler avec des composants monofichiers.
  3. Maintenance simplifiée : La maintenance des composants Volt est beaucoup plus simple que celle de Livewire traditionnel. Avec toute la logique PHP et Blade dans un seul fichier, il est plus commode de comprendre le fonctionnement global du composant, de déboguer et de modifier le code.
  4. Support natif des composants imbriqués : Volt prend en charge les composants imbriqués, ce qui rend la création de composants plus complexes plus simple. Vous pouvez simplement imbriquer un composant Volt dans un autre composant Volt en utilisant la syntaxe de Livewire habituelle.
  5. Compilé en composants Livewire classiques : Au moment de la compilation, les composants Volt sont compilés en composants Livewire traditionnels, garantissant la compatibilité avec d’autres composants Livewire et Laravel. Cela signifie que vous pouvez utiliser des composants Volt et Livewire côte à côte sans perte de fonctionnalité ou de performances.
Volt constitue un excellent outil pour les développeurs qui souhaitent tirer profit de la puissance de Livewire tout en simplifiant la création et la maintenance de composants. Son approche fonctionnelle et la possibilité d’utiliser des composants monofichiers permettent de réduire la complexité et d’améliorer la productivité dans le développement de projets Laravel.

maryUI

MaryUI est une bibliothèque de composants UI open-source conçue pour Laravel et Livewire, qui agit comme une surcouche pour Tailwind CSS et DaisyUI. Elle offre une large gamme de composants pré-construits, prêts à l’emploi, accélérant le développement d’interfaces utilisateur élégantes et fonctionnelles. Voici les principaux avantages de MaryUI :
  1. Intégration parfaite avec Laravel et Livewire : MaryUI est spécifiquement conçue pour s’intégrer facilement à vos projets Laravel et Livewire. Ses composants peuvent être ajoutés sans difficulté, vous épargnant du temps et des efforts dans la conception et la création d’éléments d’interface utilisateur.
  2. S’appuie sur Tailwind CSS et DaisyUI : MaryUI est une surcouche pour Tailwind CSS et DaisyUI. Elle bénéficie de la robustesse de ces bibliothèques, tout en ajoutant des composants et des fonctionnalités spécifiques à Laravel et Livewire.
  3. Design moderne et cohérent : Les composants de MaryUI suivent les meilleures pratiques en matière de design et sont basés sur le framework CSS Tailwind et DaisyUI. Cela garantit une apparence uniforme et cohérente pour vos applications, ainsi qu’une expérience utilisateur fluide.
  4. Facilité d’utilisation : MaryUI est conçue pour être utilisée avec facilité, avec une documentation claire et concise qui vous guide tout au long du processus d’intégration. L’installation est également simple, car vous pouvez l’ajouter à votre projet Laravel en tant que plugin Tailwind CSS et Livewire.
  5. Personnalisation: Les composants de MaryUI sont entièrement personnalisables grâce aux classes de style Tailwind CSS et DaisyUI. Vous pouvez modifier les couleurs, les tailles, les marges, et d’autres aspects de l’apparence des composants pour qu’ils s’intègrent harmonieusement à votre application.
  6. Communauté active et support : MaryUI bénéficie d’une communauté active de contributeurs et d’utilisateurs qui partagent leurs connaissances et leur expertise. Cela signifie que vous avez accès à de nombreuses ressources et à un soutien en cas de problème.
  7. Open-source et gratuit : MaryUI est un projet open-source et gratuit qui est constamment amélioré et entretenu par une équipe de développeurs passionnés. Vous pouvez l’utiliser sans frais et même contribuer au projet si vous le souhaitez.
En résumé, MaryUI est une solution de composants UI idéale pour les développeurs qui souhaitent créer rapidement des interfaces utilisateur attrayantes et fonctionnelles avec Laravel, Livewire, Tailwind CSS, et DaisyUI. Grâce à sa facilité d’utilisation, son design cohérent, sa flexibilité en matière de personnalisation, et son statut de projet open-source, MaryUI est une option incontournable pour la création d’applications modernes et élégantes.

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

Nous avons effectué une installation de Laravel 11, auquel nous avons ajouté MaryUI. Cette combinaison nous permet de tirer parti de toutes les fonctionnalités de Tailwind CSS et DaisyUI, tout en pouvant exploiter les magnifiques composants spécifiques à MaryUI. L’installation de Volt, bibliothèque de composants PHP pour Laravel, va nous simplifier le processus de développement en offrant une gestion de composants très pratique.

Pour l’instant, notre application est encore à ses balbutiements, avec une page d’accueil vide et une barre de navigation équipée d’un menu factice. Mais notre objectif suivant consiste à mettre en place une base de données solide pour alimenter notre application en contenu et lui donner de la substance.

Dans le prochain article, nous mettrons en place l’authentification sans passer par les kits classiques mais en utilisant ce qui nous est offert par MaryUI et Volt.

En suivant cette démarche progressive, vous aurez toutes les clés en main pour créer une application Laravel fonctionnelle, élégante et efficace, grâce aux avantages combinés de Laravel 11, MaryUI, Tailwind CSS, DaisyUI, et Volt.

 

 

Print Friendly, PDF & Email

Laisser un commentaire