Tirez le meilleur parti de Blade : le moteur de création de modèles de Laravel-tutoriel php-php.cn

Qu'est-ce qu'un moteur de création de modèles ?

Un moteur de création de modèles est comme un outil qui vous aide à séparer votre contenu et votre mise en page. Cela rend votre code plus propre et plus facile à gérer. Au lieu de mélanger du HTML avec vos données, vous créez des modèles qui définissent à quoi doit ressembler votre contenu, et le moteur se charge de remplir les détails.

Qu'est-ce que Lame ?

Blade est le propre moteur de création de modèles de Laravel, et il est conçu pour vous faciliter la vie. Les modèles de lame sont stockés dans le répertoire resources/views et chacun a une extension .blade.php. La syntaxe est simple et claire, vous permettant de mélanger facilement HTML et PHP. Par exemple :

<h1>Hello, {{ $name }}!</h1>

Copier après la connexion

Mais Blade ne sert pas uniquement à afficher des données. Vous pouvez également ajouter de la logique, comme des boucles et des conditions, directement dans vos modèles. Voici un exemple :

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

Copier après la connexion

Vous voyez à quel point il est facile d'afficher un contenu différent selon qu'un utilisateur est connecté ou non ? La prochaine fois que vous aurez besoin de parcourir une liste d'utilisateurs, essayez d'utiliser la directive @foreach de Blade. C'est simple et garde votre code bien rangé.

Get The Most From Blade: Laravel

Héritage de modèles

L'une des meilleures fonctionnalités de Blade est la façon dont il vous aide à réutiliser les mises en page. Vous pouvez créer un modèle principal pour votre site, puis remplir simplement le contenu unique de chaque page. Voici un exemple simple :

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page!</h1>
@endsection

Copier après la connexion

En utilisant @extends, vous créez un lien vers la mise en page, et @section vous permet de remplir les espaces réservés avec votre contenu spécifique. Cela garde votre code SEC (Ne vous répétez pas) et super gérable. Blade simplifie votre flux de travail, vous permettant de vous concentrer davantage sur ce qui compte : créer de superbes applications Web.

Get The Most From Blade: Laravel

Composants de lame

Les composants Blade sont comme de petits éléments de base pour votre interface utilisateur. Imaginez-les comme des pièces Lego : vous créez une petite partie réutilisable de votre interface et pouvez la mettre en place là où vous en avez besoin. Cela rend votre code plus propre et plus maintenable.

Vous pouvez définir un composant une seule fois et l'utiliser tout au long de votre application. Besoin d'un bouton qui ait le même aspect sur différentes pages ? Créez un composant Blade pour cela ! Mieux encore, vous pouvez transmettre des attributs à ces composants pour les rendre flexibles et adaptables.

Voici un exemple simple de composant de bouton :

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

Copier après la connexion

Vous pouvez rendre vos composants dynamiques en utilisant une classe de composants. Cela vous permet de transmettre des attributs tels que le type ou la classe pour personnaliser le comportement ou le style du bouton.

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Copier après la connexion

Besoin de quelque chose de plus personnalisé ? Vous pouvez créer vos propres directives Blade pour une logique réutilisable.

Par exemple, disons que vous avez souvent besoin de formater des dates. Vous pouvez définir une directive personnalisée comme celle-ci :

<h1>Hello, {{ $name }}!</h1>

Copier après la connexion

Get The Most From Blade: Laravel

Autres fonctionnalités

Blade est livré avec des fonctionnalités très pratiques qui rendent votre vie de développeur plus fluide. Examinons quelques-uns d'entre eux.

Gestion des URL d'actifs

Besoin de lier vos fichiers CSS ou JavaScript ? La fonction d'assistance Asset() vous couvre. Il génère l'URL correcte pour vos éléments, vous n'avez donc pas à vous soucier des chemins :

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

Copier après la connexion

Gestion des tableaux ou des collections vides

La directive @forelse de Blade est une bouée de sauvetage lorsqu'il s'agit de tableaux ou de collections vides. Il vous permet de parcourir les éléments et gère également le cas où il n'y a aucun élément avec élégance :

<!-- layout.blade.php -->
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page!</h1>
@endsection

Copier après la connexion

Affichage du contenu conditionnel

Blade propose plusieurs directives pour afficher le contenu en fonction de conditions :

@isset : vérifie si une variable est définie
@empty : vérifie si une variable est vide
@sauf si : fonctionne comme si, mais à l'envers
Voici un exemple utilisant @isset :

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

Copier après la connexion

Se protéger contre XSS

Blade échappe automatiquement à la sortie pour protéger votre application contre les attaques XSS (Cross-Site Scripting). Mais parfois, vous souhaiterez peut-être générer du HTML brut. Dans ce cas, utilisez {!! !!} :

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg" alt="Get The Most From Blade: Laravel&#s Templating Engine" /></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false"><form action="/submit" method="POST">
    @csrf
    @method('PUT')
    <button type="submit">Submit</button>
</form>

Copier après la connexion

Get The Most From Blade: Laravel

Utilisation avancée

Besoin d'inclure du HTML brut ou du JavaScript contenant la syntaxe Blade ? Utilisez la directive @verbatim pour empêcher Blade d'essayer de l'analyser :

// In a service provider
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});

// Usage in Blade
@datetime($dateVariable)

Copier après la connexion

Vous travaillez avec des API ? Blade facilite le rendu des données JSON directement dans vos modèles :

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Copier après la connexion

Si vous utilisez Livewire, Blade fonctionne parfaitement avec. Vous pouvez utiliser les composants Blade avec les composants Livewire pour une interface utilisateur dynamique et interactive sans écrire beaucoup de JavaScript.

La directive @once garantit qu'un bloc de code ne s'exécute qu'une seule fois. Blade vous permet de créer des composants dynamiques qui s'adaptent en fonction des données que vous transmettez. C'est idéal pour les éléments d'interface utilisateur flexibles et réutilisables :

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

Copier après la connexion

La directive @error vous aide à afficher facilement les messages d'erreur pour des champs spécifiques :

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

Copier après la connexion

Quand j'ai commencé à utiliser Blade, j'étais un peu perdu quant au nombre d'options dont je disposais, mais peu de temps après, tout un monde s'est ouvert à moi. Maintenant, je ne peux pas imaginer coder sans ses fonctionnalités polyvalentes. J'espère que cet article vous a aidé à vous frayer un chemin dans cet incroyable moteur de création de modèles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!