Vue Blade

La vue
Laravel utilise l’excellent moteur de template « Blade ». À la fois souple et puissant il améliorera très grandement la
qualité de vos projets.
• Moteur de template
• Performant
• Héritage et redéfinition
• Les fichiers Blade sont des fichiers PHP
• Contrairement à beaucoup d’autres moteurs de template, le mix PHP + HTML est possible (mais
personnellement je ne trouve pas que ça soit une bonne idée…)
Retourner une vue simple
Dans votre routeur :
Route::get('/', function () {
return view('votrePage', ['name' => 'Valentin 👋']);
});
Dans votre fichier resources/views/votrePage.blade.php :
Bonjour, {{ $name }}.
La sécurité est de base
Ici pas besoin de faire un htmlspecialchars… C’est automatique
Retourner une vue bis
Depuis un contrôleur l’approche est là même :
Votre contrôleur :
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class DemoController extends Controller
{
public function voir($id): string
{
return view('votrePage', ['id' => $id]);
}
}
Dans votre fichier resources/views/votrePage.blade.php :
<h1>Vous avez demandé l’id {{ $id }}</h1>
Les directives
Les directives sont une syntaxe particulière permettant de conditionner, répéter, ajuster l’affichage en fonctions des
données
LES CONDITIONS
@if, @elseif, @else et @endif

@switch, @case, @break, @default et @endswitch
LES BOUCLES
@for, @endfor
@foreach, @endforeach
@forelse, @empty, @endforelse <= Permet d’afficher autre chose si pas de données dans la
boucle
L’HÉRITAGE
@include('view.name') <= Inclusion d’une autre vue

@includeWhen($boolean, 'view.name') <= Inclusion conditionnelle
Les droits d’accès
@auth, @guest
Quelques exemples en vrac
// ++++
// Les conditions
// ++++
@if (count($records) === 1)

I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
No records!
@endif
@auth
// The user is authenticated...
@endauth
@guest
// The user is not authenticated...
@endguest
@isset($records)
// $records is defined and is not null...
@endisset
@empty($records)
// $records is "empty"...
@endempty
// ++++
// Les boucles
// ++++
@for ($i = 0; $i < 10; $i++)

The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)

<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
L’héritage de template
Organiser le code en parent et en enfants :
• Le parent est la structure de notre page.
• L’enfant est le contenu page désirée

Le parent :

<html>
<head>
<title>Site Exemple - @yield('titre')</title>
</head>
<body>
<div class="container">@yield('content')</div>
</body>
</html>
L’enfant (une de vos pages) :

@extends('layouts.app') // indique que nous allons utiliser le parent « app ».
@section('titre', 'Page enfant') // Titre de la page
// Contenu de votre page

@section('content')
<p>Contenu de la page enfant.</p>
@endsection
C’est une notion importante
Je ne le répèterai jamais assez, mais l’organisation est la clé de la réussite. Même si ce découpage vous semble «
complèxe » à première vue, c’est quelque chose de courant et de pratiquer dans beaucoup (toutes ?) les entreprises.
Les composants
Blade intègre également un système de composant permettant de découper son travail.
<VotreComposant nom="Valentin">
Vous pouvez ici avoir des enfants.
</VotreComposant>
Pour créer un composant :
php artisan make:component VotreComposant

Cette commande va créer le squelette de votre composant :
• app/View/Components/VotreComposant.php : Le composant en lui-même (la logique, les données, etc)
• resources/views/components/votre-composant.blade.php : La vue du composant (le contenu, le HTML en

lui-même)
Si vous souhaitez que votre composant puisse avoir du code enfant, il faudra ajouter dans la vue du composant :


{{ $slot }}
• $slot contiendra le contenu de l’enfant (c'est à dire le contenu entre les balises du composant).
Si vous souhaitez que votre composant puisse avoir des attributs, il faudra modifier le code du composant. Par
exemple, si vous souhaitez que votre composant puisse avoir un attribut nom :
// app/View/Components/VotreComposant.php
public function __construct(public string $nom)
{
}
Puis dans la vue du composant :



{{ $nom }}


<div>
{{ $slot }}
</div>
Il sera ensuite possible d’utiliser votre composant dans vos vues :
<x-votre-composant nom="Valentin">
Vous pouvez ici avoir des enfants.
</x-votre-composant>
• Documentation des composants
• Utiliser les composants pour définir son affichage
C'est nouveau
Les composants sont une nouvelle approche dans la conception d'interface. Ils sont très utilisés notamment en
JavaScript, en Laravel vous avez le choix « Héritage » ou « Composant » il n'y a pas de meilleure façon de faire.
Seulement deux approches complémentaires.

Vue Blade

Transféré par

Droits d'auteur :

Formats disponibles

Vue Blade

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Vue Blade

Transféré par

Droits d'auteur :

Formats disponibles

La vue

• Les fichiers Blade sont des fichiers PHP

Retourner une vue simple

Dans votre routeur :

Dans votre fichier resources/views/votrePage.blade.php :

Bonjour, {{ $name }}.

La sécurité est de base

Ici pas besoin de faire un htmlspecialchars… C’est automatique

Retourner une vue bis

Depuis un contrôleur l’approche est là même :

Dans votre fichier resources/views/votrePage.blade.php :

<h1>Vous avez demandé l’id {{ $id }}</h1>

@if, @elseif, @else et @endif

@include('view.name') <= Inclusion d’une autre vue

Quelques exemples en vrac

@if (count($records) === 1)

@for ($i = 0; $i < 10; $i++)

@forelse ($users as $user)

Organiser le code en parent et en enfants :

• Le parent est la structure de notre page.

• L’enfant est le contenu page désirée

L’enfant (une de vos pages) :

@extends('layouts.app') // indique que nous allons utiliser le parent « app ».

@section('titre', 'Page enfant') // Titre de la page

// Contenu de votre page

C’est une notion importante

Blade intègre également un système de composant permettant de découper son travail.

Pour créer un composant :

php artisan make:component VotreComposant

• app/View/Components/VotreComposant.php : Le composant en lui-même (la logique, les données, etc)

• resources/views/components/votre-composant.blade.php : La vue du composant (le contenu, le HTML en

Puis dans la vue du composant :

Il sera ensuite possible d’utiliser votre composant dans vos vues :

• Utiliser les composants pour définir son affichage

Vous aimerez peut-être aussi