Laravel possiede un gestore dei template proprietario chiamato blade.

Per creare un nuovo template è sufficiente creare un file nella stessa posizione dove sono state create le views regolari. L’unica differenza è che al posto dell’estensione .php usiamo .blade.php.

Creiamo un nuovo template chiamato pagina

nuovo-template-blade

Creiamo una rotta per l’URL /pagina che punta alla vista appena creata

// app/routes.php

Route::get( 'pagina', function()
	{
		return View::make( 'pagina' );
	} );

Creiamo un array $data con alcune informazioni da passare alla vista.

Route::get( 'pagina', function()
	{
		$data = array(
			   'squadre' => array( 'Palermo', 'Parma', 'Empoli', 'Bologna' ),
		       'linguaggio' => 'PHP',
                    'injection' => '<script>alert("Ciao Mamma!");</script>'
			);
		return View::make( 'pagina', $data );
	} );

A questo punto cominciamo ad editare il file pagina.blade.php

 

Visualizzare il contenuto di una variabile

In un file .php normale potremmo scrivere

<p>Laravel è scritto in <?php echo $data[ 'linguaggio' ]; ?></p>

Con blade le doppie parentesi graffe {{ }} servono per eseguire un echo e incorporano i tag di apertura e chiusura di php.
Inoltre possiamo accedere ai valori dell’array $data inviato dalla route sapendo per ogni chiave esiste una variabile con lo stesso nome.

L’esempio precedente diventa:

<p>Laravel è scritto in {{ $linguaggio }}</p>

Naturalmente le doppie parentesi possono essere utilizzate per visualizzare il risultato di una funzione

<p>Data: {{ date('d/m/Y') }}</p>

Escape dei caratteri

Utilizzando triple parentesi graffe {{{ }}} effettuiamo l’escape di una stringa inserita da un utente che contiene codice javascript.

<p>{{{ $injection }}}</p>

Il sorgente sarà

<p>&lt;script&gt;alert(&quot;Ciao Mamma!&quot;);&lt;/script&gt;</p>

Abbiamo quindi convertito tutti i caratteri nelle entità html, in questo modo il codice javascript non sarà eseguito.

Escape delle parentesi graffe

Se vogliamo mostrare il testo senza che sia interpretato da blade.

@{{ Così com'è }}

Il contenuto dopo @ sarà ignorato.

I commenti

{{-- Questo commento non sarà visibile nel sorgente della pagina --}}

equivale al codice

<php //Questo commento non sarà visibile nel sorgente della pagina ?>

Alternativa all’operatore ternario

Per verificare se una variabile è stata settata prima di effettuare un echo possiamo naturalmente utilizzare l’operatore ternario

{{{ isset( $linguaggio ) ? $linguaggio : 'HTML' }}}

In un template costruito con blade è sufficiente scrivere

{{{ $linguaggio or 'HTML' }}}

Strutture di controllo

Su blade esistono istruzioni per il controllo del flusso del codice analoghe a quelle presenti in php. Queste permettono di caricare porzioni di template in base al verificarsi una condizione (if, else) oppure permettono di creare dei loop (es. while).

Istruzione if

@if ( count( $squadre ) >= 1 )
    <p>abbiamo almeno una squadra nell'array</p>
@endif

 

@if ( in_array( 'Palermo', $squadre ) )
    <p>Il Palermo è nell'array</p>
@else
    <p>Il Palermo non è nell'array</p>
@endif

 

@if ( count( $squadre ) === 1 )
    <p>Abbiamo una sola squadra</p>
@elseif ( count( $squadre ) > 1 )
	<p>Abbiamo diverse squadre</p>
@else
    <p>Nessuna squadra trovata</p>
@endif

Istruzione uless

L’istruzione unless è l’esatto opposto di if, infatti verifica che una condizione non sia vera.

@unless ( Auth::check() )
    Non sei autenticato
@endunless

I cicli

@for ($i = 0; $i < 10; $i++)
    Valore {{ $i . '<br />' }}
@endfor

 

@while (true)
    <p>In loop per sempre!.</p>
@endwhile
@foreach ( $squadre as $squadra )
     {{ $squadra . '<br />' }}
@endforeach

Organizzare i template

Raramente una singola pagina del sito corrisponderà a un’unica vista. Spesso abbiamo la necessità di riutilizzare blocchi di codice che quindi saranno messi in file separati e inclusi nella vista principale.
Un’altra tecnica che possiamo utilizzare per organizzare il codice non fa uso dell’inclusione ma di meccanismi di ereditarietà.

Inclusione di porzioni di template

Per inserire una vista secondaria utilizziamo @include().

@include( 'includes.footer' )

inserirà il file view/includes/footer.blade.php

Possiamo inviare dati al template prima di includerlo

@include( 'includes.footer', array( 'nome'=>'Luca' ))

Il contenuto di footer.blade.php sarà

<div id="footer">
	Autore del sito {{ $nome }}
</div>

Eredità nei template

La maggior parde delle visite di un sito condivide una struttura identica. Una volta identificata questa struttura, abbiamo la possibilità di creare un template base in cui il codice sempre identico è accompagnato da sezioni particolari predisposte a ospitare contenuti. Questi contenuti saranno inseriti da un secondo template discendente, al momento del caricamento della pagina.

Creiamo un template base

layout-base-laravel

I marcatori @section @show servono per creare una sezione e delimitano una porzione di codice di default.

Con @yeld creaimo invece una regione senza codice predefinito.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    @section('head')
        <link rel="stylesheet" href="style.css" />
    @show
</head>
<body>
    @yield('body')
</body>
</html>

Creiamo un template discendente

estendere-layout-blade-laravel

@extends('layouts.base')

@section('body')
     <p>questo testo prende il posto dell'istruzione yield </p>
@stop

Con @extends indichiamo il template genitore.
Con @section(‘body’) @stop inseriamo contenuto all’interno di @yield(‘body’) del template base. Non modifichiamo la sezione head quindi sarà inserito il codice prederinito.

La rotta per la pagina

La rotta deve puntare chiaramente al template discendente

//app/routes.php
Route::get( '/pagina', function()
	{
    	return View::make( 'home' );

	});

Il sorgente generato sarà

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
            <link rel="stylesheet" href="style.css" />
    </head>
<body>
         <p>questo testo prende il posto dell'istruzione yield </p>
</body>
</html>

Sovrascrivere una sezione

Se vogliamo cambiare il contenuto della sezione head è necessario ridefinirla con @section(‘head’) e @show

@extends('layouts.base')

@section('head')
    <link rel="stylesheet" href="custom-style.css" />
@show

@section('body')
     <p>questo testo prende il posto dell'istruzione yield </p>
@stop

  inStileWeb.com
blog comments powered by Disqus