Académique Documents
Professionnel Documents
Culture Documents
com
LARAVEL
Blade Templates
Posted by Categories Date Comments
RIADH HAJJI LARAVEL 16 JANVIER 2021 0 COMMENT
1 Objectifs
Connaitre Blade Laravel
2 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
Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
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 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.
3 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
Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
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.
1 <main class="section">
2 <div class="container">
3 @yield('content')
4 </div>
5 </main>
4 Exemple
template.blade.php
1 <html>
2 <body>
3 @yield('header')
4 @yield('content')
5 @yield('footer')
6 </body>
7 </html>
view-one.blade.php
1 @extends('template')
2
3 @section('header')
4 View one's header
5 @endsection
6
7 @section('content')
8 View one's content
9 @endsection
10
11 @section('footer')
12
13 View one's footer
Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
@endsection
5 Activité
Étape 1: Créez un nouveau dossier «layout» dans le répertoire /resources/views/ .
Étape 3: Copiez le code suivant dans le fichier « master.blade.php » que nous avons créé.
1 <html>
2 <head>
3 <title>App Name - @yield('title')</title>
4 </head>
5 <body>
6 @section('sidebar')
7 This is the master sidebar.
8 @show
9 <div class="container">
10 @yield('content')
11 </div>
12 </body>
13 </html>
@section (‘sidebar’) est utilisé pour définir une section nommée sidebar
Nous allons maintenant vous montrer comment étendre la mise en page principale que
nous venons de créer.
@section (‘sidebar’) définit une section de barre latérale dans la page enfant de la
disposition principale
1 Route::get('page', function(){
2 return view('page');
3 });
Étape 4: Ouvrez maintenant l’URL suivante dans le navigateur pour voir la sortie.
http://localhost:8000/page
LEAVE A REPLY
SEARCH
Rechercher…
CATÉGORIES
AJAX (27)
Algorithme (14)
Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Android (16)
Angular (30)
APC (51)
Architecture des ordinateurs (141)
ASW (54)
Blog (7)
Bootstrap (69)
Business (6)
C# (85)
concours (12)
CSS (65)
Dart (2)
Design / Branding (4)
Facebook (8)
Flutter (131)
internet (12)
Java (18)
JavaScript (66)
jQuery (64)
JSF (9)
JSP (71)
Laravel (48)
Le management de projet (14)
MOS (64)
Ms project (23)
MySQL (33)
News (116)
Node.js (17)
Odoo (9)
Pascal (3)
PHP (114)
Python (105)
Symfony (28)
Systèmes d'exploitation (10)
VB.Net (22)
Windows (8)
WordPress (6)
)16( االمتحانات
Rechercher…
Rechercher…