Blade Templates
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.phpet 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
- 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') @extendsvous 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
@extendest 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. -
Exemple
- template.blade.php
- view-one.blade.php
-
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éé.
- 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
- 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.phpet configurez l’itinéraire comme ci-dessous: - Étape 4: Ouvrez maintenant l’URL suivante dans le navigateur pour voir la sortie.
- http://localhost:8000/page
<main class="section">
<div class="container">
@yield('content')
</div>
</main><html>
<body>
@yield('header')
@yield('content')
@yield('footer')
</body>
</html>@extends('template')
@section('header')
View one's header
@endsection
@section('content')
View one's content
@endsection
@section('footer')
View one's footer
@endsection<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><!-- 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>
@endsectionRoute::get('page', function(){
return view('page');
});