Les moteurs de modèles de Laravel prennent en charge React, Vue et d’autres bibliothèques. Cependant, les développeurs apprécient la capacité robuste du moteur Laravel Blade à créer rapidement des vues modulaires et réutilisables. Blade vous permet d’étendre sans effort les mises en page, de définir des sections et d’utiliser des structures de contrôle pour générer du contenu axé sur les données.

Cet article pratique explore ce qu’est Blade, comment il fonctionne et comment il améliore vos applications Laravel.

Tout ce dont vous avez besoin pour utiliser Laravel Blade

Laravel Blade est le moteur de modèles par défaut du framework Laravel. Il vous permet d’utiliser des variables, des boucles, des instructions conditionnelles et d’autres fonctionnalités PHP directement dans votre code HTML. Pour créer des fichiers Blade, il suffit de définir des vues blade en créant des fichiers avec l’extension .blade.php dans le répertoire resources/views de votre projet Laravel, puis de structurer vos pages dynamiques préférées dans ces fichiers.

Pourquoi devriez-vous utiliser Blade ?

L’un des principaux avantages de Blade est son organisation modulaire du code. Blade vous aide à organiser votre code en modules réutilisables que vous pouvez facilement ajouter, supprimer ou mettre à jour sans affecter le reste de votre application.

L’encapsulation du code est un autre avantage de Blade. Blade aide à encapsuler les fonctions, ce qui rend les tests, le débogage et la maintenance du code plus faciles à gérer. Cette approche est avantageuse pour les applications de grande envergure, car les applications non organisées peuvent rapidement devenir difficiles à gérer.

Le moteur de création de modèles de Blade est performant et c’est le framework PHP le plus rapide que nous ayons testé. Le moteur compile toutes vos vues Blade en code PHP simple, puis les met en cache jusqu’à ce que vous les modifiiez. Cette approche favorise un rendu plus rapide et une meilleure performance globale.

Comment utiliser Laravel Blade

Dans ce tutoriel, nous créons une application Laravel pour expérimenter les modèles Blade en action. Apprenez à définir et à étendre les mises en page des blades, à passer des données entre les vues des blades, à utiliser les différentes structures de contrôle disponibles et à créer vos propres blades.

Pré-equis

Pour suivre ce tutoriel, assurez-vous d’avoir les éléments suivants :

  • Une connaissance préalable de PHP
  • Composer installé. Vérifiez que Composer est installé sur votre système en lançant composer -V

Consultez le code complet du tutoriel pour vous guider dans votre travail.

Comment créer l’application Laravel

Pour créer un exemple d’application Laravel, exécutez :

composer create-project laravel/laravel my-app

Suivez les instructions sur votre terminal pour terminer la création de l’application.

Ensuite, allez dans le répertoire de l’application et utilisez-la avec cette commande :

cd my-app
php artisan serve

Cliquez sur le lien dans le terminal pour ouvrir la page d’accueil de Laravel dans votre navigateur.

Comment définir la mise en page

Les dispositions vous permettent de configurer des sections de votre application web à partager sur plusieurs pages. Par exemple, si votre application a une barre de navigation et un pied de page cohérents d’une page à l’autre, il est plus efficace de les créer une fois plutôt que de les reconstruire pour chaque page.

Avant de suivre les instructions étape par étape, jetez un coup d’œil au squelette de démonstration suivant.

Le code permettant de créer des sites web sans mise en page est présenté ci-dessous. Il vous oblige à réécrire le code de la barre de navigation et du pied de page pour chaque page.


<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>

<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

Au lieu de cela, vous pouvez facilement construire votre application en utilisant des mises en page pour partager les mêmes composants dans un seul bloc de code :


<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Une fois que vous avez défini votre mise en page, vous pouvez l’utiliser sur n’importe quelle page :


<main-layout>
  Content for page n
</main-layout>

Dans les anciennes versions de Laravel, vous deviez créer des mises en page en utilisant l’héritage de modèles. Cependant, lorsque la société a ajouté la fonction component, il est devenu beaucoup plus facile de créer des mises en page robustes.

Pour créer une nouvelle présentation avec Laravel Blade, exécutez d’abord cette commande pour créer le composant de la présentation :

php artisan make:component Layout

Cette commande génère un nouveau fichier layout.blade.php situé dans un nouveau dossier appelé components dans le répertoire resources/views/. Ouvrez ce fichier et collez ce code :

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Ce code crée un composant de mise en page doté d’une barre de navigation et d’un pied de page simples. La fonction slot définit l’endroit où passer le contenu principal chaque fois que vous étendez votre composant de mise en page.

Comment étendre la mise en page

Vous pouvez facilement importer un composant dans une vue lame à l’aide de la balise <x-component-name>. Cette méthode s’applique également au composant de mise en page que vous avez créé précédemment.

Pour voir à quoi ressemble l’extension de la présentation, ouvrez le fichier resources/views/welcome.blade.php par défaut et remplacez le contenu du fichier par ce code :

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Cette approche met à jour la page d’accueil pour qu’elle utilise le composant de mise en page tout en passant un élément d’en-tête et un paragraphe avec du texte fictif comme contenu. Rechargez le lien que vous avez ouvert précédemment pour voir les modifications.

Dans votre définition de la mise en page, vous remarquerez que le code a rendu une donnée de titre qui est par défaut « Exemple de site web » si le code ne transmet pas la donnée de titre. Vous pouvez transmettre ces données en tant qu’emplacements nommés dans vos vues via le code <x-slot name="slotName" /> – dans ce cas, <x-slot name="title" />. Mettez à jour le fichier welcome.blade.php avec le code ci-dessous et rechargez la page :

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Ensuite, ajoutez un peu de style pour améliorer l’apparence de votre application. Créez un nouveau fichier app.css dans le répertoire /public/css, puis collez le code de ce fichier.

Avec toutes ces mises à jour, vous devriez obtenir le résultat suivant lorsque vous prévisualisez votre application à l’adresse http://127.0.0.1:8000/.

Bonjour à tous
Bonjour à tous

Comment inclure les données du backend

Dans l’exemple précédent, vous avez facilement partagé des données entre les composants et les vues via des slots. Cependant, il existe de meilleures approches pour charger des données à partir d’une base de données ou d’une autre source distante.

Dans ce cas, chargez et transmettez les données directement à partir de la définition de votre routeur et accédez-y comme vous avez accédé à un slot nommé dans l’exemple précédent. Pour ce faire, ouvrez le fichier routes/web.php et remplacez son contenu par ce code :

<?php
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

Dans le code ci-dessus, vous avez mis à jour votre route web pour transmettre le nom "John Doe" à la vue d’accueil. Maintenant, accédez à cette valeur dans vos vues blade comme ceci :

<div>
  Hello, {{ $name }}
  
</div>

Vous pouvez utiliser cette méthode pour charger des données à partir d’une base de données. Par exemple, supposons que vous disposiez d’une table « to-dos » contenant une liste de tâches. Utilisez la DB façade pour charger ces tâches et les transmettre à votre vue :

<?php
use IlluminateSupportFacadesDB; // Import DB Facade
use IlluminateSupportFacadesRoute;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

Cependant, si vous n’avez pas de base de données, mettez à jour la route d’entrée du site web pour passer un tableau de tâches statiques. Ouvrez le fichier routes/web.php et mettez à jour la route par défaut (/) avec le code ci-dessous :

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Remplacez le contenu du fichier welcome.blade.php par le code ci-dessous pour accéder aux to-dos sous la forme d’un tableau JSON encodé.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  
</x-layout>

Comment utiliser les raccourcis de contrôle

Le moteur de modélisation de Blade prend également en charge plusieurs directives permettant de rendre différents types de données de manière conditionnelle. Par exemple, pour itérer à travers le tableau de todos que vous avez passé à votre vue de bienvenue, appliquez une boucle foreach en collant le code suivant dans le fichier welcome.blade.php:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Cette modification devrait permettre de rendre vos to-dos dans une liste non ordonnée, comme dans la capture d’écran ci-dessous.

todos dans une liste non ordonnée
todos dans une liste non ordonnée

Pour construire un bloc d’instructions conditionnelles, utilisez les directives @if, @elseif, @else, et @endif. Par exemple :

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Remplacez le contenu du fichier welcome.blade.php par le code ci-dessus. Les différentes directives if–else comptent les tâches à effectuer et affichent un message personnalisé pour différents scénarios. Si vous avez plus d’une tâche dans votre tableau de tâches, vous devriez voir le message « I have multiple tasks ! » dans le navigateur.

Vous pouvez trouver d’autres directives prises en charge dans la documentation de Laravel.

Comment créer une extension personnalisée

Vous pouvez également écrire une directive personnalisée, comme dans l’exemple précédent. Pour explorer cette technique, créez une directive de coupure de texte personnalisée.

Tout d’abord, créez un nouveau fournisseur de services en exécutant :

php artisan make:provider TruncateTextServiceProvider

Cette commande génère un nouveau fichier de fournisseur de services à app/Providers/TruncateTextServiceProvider.php. Ouvrez ce fichier et remplacez son contenu par :

<?php
namespace AppProviders;

use IlluminateSupportFacadesBlade;
use IlluminateSupportServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

Le code importe la façade Blade et définit une nouvelle directive personnalisée appelée @truncate. La directive accepte deux arguments : $text et $length. Elle utilise la méthode Str::limit() pour tronquer le texte à la longueur spécifiée.

Enfin, enregistrez le fournisseur de services en l’ajoutant à votre tableau de fournisseurs dans le fichier de configuration config/app.php :

'providers' => [
  // Other service providers
  AppProvidersTruncateTextServiceProvider::class,
],

Utilisez la directive personnalisée dans vos modèles Blade (welcome.blade.php) en l’invoquant via la syntaxe @truncate.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  
</div>

Résumé

Cet article a exploré comment Laravel Blade vous permet de rationaliser votre processus de développement tout en créant des vues modulaires et réutilisables pour les applications web. Cependant, votre parcours de développement Laravel ne doit pas s’arrêter là.

L’infrastructure qui héberge votre application est aussi importante pour votre succès que votre processus de développement local. Pour faire passer votre application Laravel au niveau supérieur, vous avez besoin d’une plateforme d’hébergement fiable capable de répondre à ses exigences.

Kinsta optimise les solutions d’hébergement pour la performance, la sécurité et l’évolutivité, vous permettant de développer votre application dans le meilleur environnement possible. Déployez votre application Laravel sur Kinsta pour en faire l’expérience.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.