Blade Templates

apcpedagogie > Les cours de programmation > Laravel > Blade Templates

Blade Templates

16 janvier 2021
Posté par: Riadh HAJJI
Catégorie: Laravel

168 vues

Blade Templates

Objectifs

Connaitre Blade Laravel

Présentation

Comme nous le savons, la plupart des applications Web suivent la même mise en page sur toutes les pages, la meilleure approche consiste donc à définir un modèle principal dans lequel nous pouvons placer tout le passe-partout.
Blade est le moteur de création de modèles simple mais puissant fourni avec Laravel.
Contrairement à d’autres moteurs de modèles PHP populaires, Blade ne vous empêche pas d’utiliser du code PHP simple dans vos vues.
Toutes les vues Blade sont compilées en code PHP simple et mises en cache jusqu’à ce qu’elles soient modifiées, ce qui signifie que Blade n’ajoute pratiquement aucune surcharge à votre application.
Contrairement aux dispositions de contrôleur, Blade est piloté par l’ héritage et les sections des modèles.
Les fichiers de vue Blade utilisent l’extension .blade.php et sont généralement stockés dans le répertoire resources/views.
Un site web partage souvent des éléments en commun entre ses pages HTML :

un en-tête, un logo représentant la marque ou le service des balises meta (charset, viewport, etc.)
un menu pour naviguer facilement entre les pages
un pied de page
une feuille de style, sous la forme d’une référence à un fichier ou d’un code CSS directement intégré en texte
des scripts variés pour tracer les utilisateurs ou améliorer l’expérience (Google Analytics, Intercom, Hotjar, etc.)
etc.

Héritage de Blade

Blade Templates

Généralement une vue peut en étendre une autre, c’est un héritage. Ainsi pour l’exemple de l’application suivant on a un template de base.
Ce template comporte la structure globale des pages et est déclaré comme parent par les autres vues: @extends('layouts.default')
@extends vous permet d’étendre un modèle, qui définit ses propres sections, etc. Un modèle que vous pouvez étendre définira ses propres sections en utilisant @yield, dans lesquelles vous pouvez ensuite mettre vos propres éléments dans votre fichier de vue.
Dans le template on prévoit un emplacement (@yield) pour que les vues enfants puissent placer leur code :
Un autre avantage de l’utilisation @extend est l’héritage. Vous pouvez fournir un modèle de base, puis un autre modèle enfant qui étend celui qui produit ensuite ses propres sections. Vous pouvez ensuite étendre ce modèle enfant.

<main class="section">
    <div class="container">
        @yield('content')
    </div>
</main>

@yield('content')

</div>

</main>

Exemple

template.blade.php

<html>
    <body>
        @yield('header')
        @yield('content')
        @yield('footer')
    </body>
</html>

<html>

<body>

@yield('header')

@yield('content')

@yield('footer')

</body>

</html>

view-one.blade.php

@extends('template')

@section('header')
    View one's header
@endsection

@section('content')
    View one's content
@endsection

@section('footer')
    View one's footer
@endsection

@extends('template')

@section('header')

View one's header

@endsection

@section('content')

View one's content

@endsection

@section('footer')

View one's footer

@endsection

Activité

Étape 1: Créez un nouveau dossier «layout» dans le répertoire /resources/views/ .
Étape 2: Créez un nouveau fichier «master.blade.php» dans le répertoire /resources/views/layouts/.
Étape 3: Copiez le code suivant dans le fichier “master.blade.php” que nous avons créé.

<html>
 <head>
 <title>App Name - @yield('title')</title>
 </head>
 <body>
 @section('sidebar')
 This is the master sidebar.
 @show
 <div class="container">
 @yield('content')
 </div>
 </body>
</html>

<html>

<head>

<title>App Name - @yield('title')</title>

</head>

<body>

@section('sidebar')

This is the master sidebar.

@show

@yield('content')

</div>

</body>

</html>

Ici, dans le modèle principal ci-dessus –

@yield (‘title’) est utilisé pour afficher la valeur du titre
@section (‘sidebar’) est utilisé pour définir une section nommée sidebar
@show est utilisé pour afficher le contenu d’une section
@yield (‘content’) est utilisé pour afficher le contenu du contenu

Extension de la mise en page principale

Nous allons maintenant vous montrer comment étendre la mise en page principale que nous venons de créer.
Étape 1: Créez un nouveau fichier de vue page.blade.php dans /resources/views/
Étape 2: Copiez le code suivant dans lefichier page.blade.php

<!-- path: resources/views/page.blade.php -->
@extends('layouts.master')
@section('title', 'Page Title')
@section('sidebar')
 @parent
 <p>This is appended to the master sidebar.</p>
@endsection
@section('content')
 <p>This is my body content.</p>
@endsection

@extends('layouts.master')

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

@section('sidebar')

@parent

<p>This is appended to the master sidebar.</p>

@endsection

@section('content')

<p>This is my body content.</p>

@endsection

Ici, dans la page ci-dessus

@extends (‘layouts.master’) étend la mise en page principale
@section (‘title’, ‘Page Title’) définit la valeur de la section de titre.
@section (‘sidebar’) définit une section de barre latérale dans la page enfant de la disposition principale
@parent affiche le contenu de la section de barre latérale, définie dans la disposition principale.
Ceci est ajouté à la barre latérale principale.

ajoute du contenu de paragraphe à la section de la barre latérale
@endsection termine la section de la barre latérale
@section (‘content’) définit la section de contenu
@endsection termine la section de contenu

Étape 3: Ouvrez routes/web.php et configurez l’itinéraire comme ci-dessous:

Route::get('page', function(){
return view('page');
});

Route::get('page', function(){

return view('page');

});

Étape 4: Ouvrez maintenant l’URL suivante dans le navigateur pour voir la sortie.
http://localhost:8000/page

Sommaire du cours Laravel

Contraintes d’expressions de route Laravel

Blade Templates

Blade Templates

Blade Templates

Objectifs

Présentation

Héritage de Blade

Exemple

Activité

Sommaire du cours Laravel