BLADE

BLADE
Blade è il template-engine di LARAVEL.
Con blade è possibile costruire – in maniera elastica, dinamica e scalabile nella complessità – pagine che
condividono una determinata struttura.
L’idea è costruire delle pagine, da cui si possono ereditare altre pagine le quali ereditano la struttura di
quelle iniziali.
xyz… 123456678
Si realizza dei file di default, da cui deriviamo dei file che ne manterranno la struttura generale, con tutti gli
elementi che decideremo che dovranno essere ereditati.
Poi introdurremo degli elementi, anch’essi di default, che saranno presenti in tutti i file ereditati, ma che
saranno personalizzati di volta in volta.. infine poi ciascuna pagina potrà avere dettagli specifici suoi.
Inoltre introdurremo anche la possibilità di gestire valori passati come variabili in ciascuna pagina, con
blade – come vedremo.
Non è obblicatorio apporre i file in cartelle specifiche per costruire temi con blade, ma esistono delle
convenzioni utili.
Come ogni vista, anche le viste costruite con Blade vanno poste a partire dal percorso di cartella
resources->views
In genere, si tende a porre le pagine di base, da cui erediteremo poi la struttura, in una struttura di
sottocartella a partire da resources->views . Sovente si realizza una cartella chiamata layouts e li sotto si
costruiscono le views di partenza (in caso di particolari gruppi di file, uteriormente suddividibili per
categorie, si tende a creare ulteriori sottocartelle).
Per l’esempio, creiamo un file chiamato default.blade.php (ma il nome potrebbe essere un altro, a piacere,
purchè contenga il suffisso “.blade” e poi termini con “.php”.
Supponiamo di creare una comune pagina HTML, dal codice estremamente semplificato:
<html>
<head>
<title>App Name</title>
</head>
<body>
</body>
</html>
Se adesso noi creiamo un file view che inizia con
@extends('layouts.default')
La view ottenuta erediterà tutto il modello, compreso il codice HTML.
Quindi, se non apportiamo altre modifiche pur essendo il file derivato contenente solo il codice
@extends('layouts.default'), al suo interno conterrà l’intera struttura HTML prima vista
<html>
<head>
</head>
<body>
</body>
</html>
Con Blade è possibile creare blocchi di codice nella view-layout master, poi modificabili (volendo) nelle
view-layout figlie, creando delle (cosiddette) sezioni.
Una sezione è una porzione di codice racchiusa tra dei delimitatori, a cui diamo un nome.
I delimitatori nella view-layout master sono @section e @show, se vogliamo che la sezione sia visibile e
presente in tutte le nella view-layout figlie; la sezione inizia con il delimitatore @section a cui, tra parentesi,
passiamo una stringa con un nome che diamo alla sezione di codice; quando la sezione che vogliamo
raccogliere tra i delimitatori è finita, si chiude (come detto) con @show:
<html>
<head>
</head>
<body>
@section('sidebar')
Qui impostiamo una master sidebar: sarà ripetuta, come tutto, in tutte le pagine e sarà
modificabile in esse
@show
</body>
</html>
permette di racchiudere del codice tra dei marker che consentono, successivamente di riprenderlo e
modificarlo in alcuni modi, in modo che il pezzo di codice sarà presente comunque in tutte le pagine ma
potrà essere modificato; Per farlo si può usare il marker section, che consente di dare un nome alla sezione,
inserendolo prima della prima riga della sezione stessa;
Nei file view-layout figli si può riprendere la sezione riscrivendola, ma (generalmente) chiudendo la sezione
non con @show ma con @stop e, a questo punto posso cambiare il contenuto, riscrivendolo ; se non lo
faccio la sezione viene riportata così com’è:
@extendes('layout.default')
@section('sidebar')
Questo contenuto è stato riscritto, così che non venga identico al
master, come invece avverrà per tutto il resto del codice HTML riportato
pari pari
@stop

In pratica, il file view-layout, che abbiamo scritto nella [1] master, qui, si presenta così
mentre il file view-layout figlio, che abbiamo scritto nella [2] , si presenta così
Internamente i due codici HTML che possiamo rilevare sono simili; tutte le parti HTML sono stare
riprodotte, è stato modificato solo la parte della sezione sidebar.
Osserviamo la differenza tra i codici prodotti:
layouts.default.blade.php usingdefault.blade.php
Se vogliamo che venga, conservato – inserendo il codice della sezione originaria – nel file figlio, è sufficiente
aggiungere il comando @parent, nel punto in cui vogliamo che la sezione originaria venga inserita.
A pag. successiva un esempio:
Per esempio, potremmo aggiungere nel file layout-figlio un @parent, seguito da un tag BR (per andare a
capo) e poi il codice aggiunto, così:
@section('sidebar')
@parent
<br>Questo contenuto è stato aggiunto, così che non venga identico al
master, come invece avverrà per tutto il resto del codice HTML riportato
pari pari
@stop
Questo produrrebbe un output di questo tipo:
@yield
E’ anche possibile porre nel documento di default dei marker @yield in cui indicare il nome di una sezione
che, se viene trovate nel file figlio, questa viene inserita nel punto in cui è lo @yield, altrimenti non viene
inserito nulla
Se nella pagina view-layout master (nel nostro caso la layouts.default)
Introduciamo dei comandi @yield in determinati punti nel

codice che fanno riferimento a due sezioni chiamate
“contenuto1” e “contenuto2”
@yield(‘contenuto1’)
@yield(‘contenuto2’)
@extends(‘layouts.default’)
@section(‘contenuto1’)bla bla bla bla bla

bla@stop
@section(‘contenuto1’)test test test test test

Esempio con @content e @yield
test@stop
Proviamo a costruire
<html>
<head>
<title>CORSO LARAVEL :: @yield('titolo')</title>
<style>
body:
{
margin: 0px;
}
</style>
</head>
<body >
@section('sidebar')
<div style="position: relative; left: 0px; top: 0px; width: 100%; height: 30px; background-color:
black"></div>
@show
<div id="content">
@yield('content')
</div>
</body>
</html>
@section('sidebar')
@parent
<div style="position: relative; left: 0px; top: 0px; width: 100%; height: 20px; background-
color:#4F4D4D"></div>
@stop
@section('titolo')
BLADE TEST
@stop
@section('content')
tets tets te
t s tets tets te
t s tets tets te
t s
@stop
I componenti
Blade consente di creare componenti, ossia pezzi di codice che salviamo in dei file e che possiamo
richiamare; il nome del componente deve essere parte del nome del file, ossia il nome del file dovrà essere:
[nome del componente].blade.php
Supponiamo di realizzare un componente chiamato “striscione” che contenga il codice
<h1>UDITE UDITE</h1>
Dovremo creare un file chiamato striscione.blade.php
All’interno metteremo, appunto, il codice:
FILE “striscione.blade.php”
Ora prendiamo il codice di prima ed aggiungiamo il componente

usando la sintassi:
@component(NOME_COMPONENTE)
@endcomponent
@section('sidebar')
@parent
@stop
@section('titolo')
BLADE TEST
@stop
@section('content')
tets tets tets tets tets tets tets tets tets
@stop
@component('striscione')
@endcomponent
I componenti vengono renderizzati PRIMA degli altri elementi di BLADE (a meno del codice HTML presente).
Quindi, nell’HTML risultante, avremo nell’ordine:

- l’HTML ed il codice PURO DELLA PAGINA (quello presente direttamente nella pagina in questione)
- l’HTML ed il codice dei componenti di BLADE
- l’HTML ed il codice prodotto da altri comandi di BLADE
Conviene fare un po’ di test per comprendere la conseguenza di ciò.

In questo caso, per esempio, il codice
@section('sidebar')
@parent
@stop
@section('titolo')
BLADE TEST
@stop
@section('content')
tets tets tets tets tets tets tets tets tets
@stop
@endcomponent
Non ha HTML esterno ai comandi di BLADE, quindi passerà alla renderizzazione prima del componente
“striscione”, producendo il codice
E poi produrrà l’HTML derivato e tutto ciò che deriva dai comandi BLADE:
Verrà prodotto, quindi, questo codice
ed avrà un aspetto di questo tipo:

Nel comando @component si può decidere di passare delle variabili al componente, che poi potrà usarle
con le doppie o triple parentesi; si usa il comando @slot
Per esempio potrei voler inviare una variabile al componente, poco fa realizzato, chiamata testo e contente
la stringa “CIAO MONDO”:
@slot('testo')
CIAO MONDO
@endslot
@endcomponent
E nel componente la potrei usare così:
<h1>{{$testo}}</h1>
E possiamo, chiaramente, inviare più variabili (usando più slot)
@slot('testo')
CIAO MONDO
@endslot
@slot('colore')
green
@endslot
@endcomponent
Approfondimenti
https://www.francescochiriaco.it/laravel-blade-engine/
https://www.massimilianosalerno.it/progettazioneweb/le-view-di-laravel-con-
blade.html#Chiamare_e_passare_dati_a_una_View
https://www.targetweb.it/gestire-il-layout-in-laravel-4-guida-al-blade-template-system/
https://www.oulub.com/it-IT/Laravel/blade#components
https://www.laramind.com/blog/laravel-blade/

BLADE

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

BLADE

Caricato da

Copyright:

Formati disponibili

BLADE

Blade è il template-engine di LARAVEL.

Se adesso noi creiamo un file view che inizia con

La view ottenuta erediterà tutto il modello, compreso il codice HTML.

Osserviamo la differenza tra i codici prodotti:

A pag. successiva un esempio:

Questo produrrebbe un output di questo tipo:

Se nella pagina view-layout master (nel nostro caso la layouts.default)

Introduciamo dei comandi @yield in determinati punti nel

@section(‘contenuto1’)bla bla bla bla bla

@section(‘contenuto1’)test test test test test

[nome del componente].blade.php

Supponiamo di realizzare un componente chiamato “striscione” che contenga il codice

Dovremo creare un file chiamato striscione.blade.php

All’interno metteremo, appunto, il codice:

Ora prendiamo il codice di prima ed aggiungiamo il componente

Quindi, nell’HTML risultante, avremo nell’ordine:

- l’HTML ed il codice dei componenti di BLADE

- l’HTML ed il codice prodotto da altri comandi di BLADE

Conviene fare un po’ di test per comprendere la conseguenza di ciò.

Verrà prodotto, quindi, questo codice

ed avrà un aspetto di questo tipo:

E possiamo, chiaramente, inviare più variabili (usando più slot)

Potrebbero piacerti anche