Gestire il layout in Laravel 4: guida al blade template system

Continua la nostra guida Laravel 4, oggi vediamo di capire come funziona il layout system di Laravel con una panoramica del template engine Blade.

Sommario Guida Laravel 4

Struttura del template

Usare il Blade template system risulta da subito piuttosto intuitivo: di fatto abbiamo un file di layout “master” ovvero una matrice. A loro volta le matrici possono poi essere opportunamente rese dinamiche con le varie views sovrascrivendo determinate sezioni precedentemente dichiarate.

Poniamo sempre l’esempio del nostro blog in Laravel. Avremo di fatto bisogno di una vista per la home, una per le categorie e una per l’articolo singolo. Per realizzare il tutto ad esempio, procediamo come segue:

Create un file master.blade.php all’interno della cartella views/layouts e incollate questo codice:

<html>
    <body>
        @section('header')
            <h1>Questo è il mio Header</h1>
        @show
        @section('sidebar')
            <h3>Sidebar del blog</h3>
        @show
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

Come vedete all’interno della matrice vanno definite tutte le “sezioni” da rendere dinamiche. Senza la dichiarazione di sezione non potremo agire successivamente sul contenuto, rendendo di fatto quell’elemento del tema statico. La suddivisione in sezioni è pertanto un’operazione molto importante e deve essere il più accurata possibile.

Una volta realizzata la matrice (nel nostro caso un classico blog con sidebar) andiamo a definire le “viste” del nostro tema. Nel nostro esempio, dobbiamo ovviamente aver impostato le relative routes e controller come abbiamo visto nei capitoli precedenti. Ecco uno schema riassuntivo per visualizzare, ad esempio la home:

//Esempio riassuntivo per la visualizzazione 
// della home tramite routes e controller

//Routes.php
Route::get('/', 'TuoController@showWelcome');

//Controllers/TuoController.php
class TuoController extends BaseController {
public function showWelcome()
{
  return View::make('home')
}//Function

}//Class

Come avete notato per visualizzare una vista abbiamo bisogno di una funzione simile a questa: View::make(‘nomefileblade’). All’interno di Make dovete inserire il nome del file nome.blade.php corrispondente alla view che volete visualizzare. Se il file si trova all’interno di una cartella dovrete usare questa sintassi: View::make(‘cartella/nomefileblade’);

Nel nostro caso:

 return View::make('home')

Apre il file home.blade.php presente nella root della cartella app/views. Ecco la struttura interna del file:

@extends('layouts.master')

@section('header')
<h1>Header del sito </h1>
<p>(se definite questa sezione verrà sovrascritto quando messo nel file matrice)</p>
@stop

@section('sidebar')
 <p>Questo è un contenuto dinamico generato per la sola Home.</p>
@stop

@section('content')
    <p>Contenuto della home qui.</p>
@stop

La prima istruzione:

@extends('layouts.master')

Definisce su quale matrice operare. Laravel permette infatti di specificare diverse matrici. Nel caso del blog ad esempio potrebbe essere necessario specificare la matrice home (con slider o senza sidebar ad esempio) differente da quella delle categorie e vista singola.

Le funzioni:

@section('content')
    <p>Contenuto</p>
@stop

Permettono di effettuare una sovra-scrittura del contenuto “statico” messo all’interno della matrice.

Preparare i files e librerie del vostro tema

Per preparare la struttura dei vostri files da usare nel tema vi consiglio di creare prima il tutto su carta per definire cartelle e un workflow generale dell’applicazione. IN generale le cartelle images, javascript e stylesheets vanno inserite all’interno della cartella public (non vi preoccupate, vedremo in seguito come rimuovere la cartella public e far visualizzare il sito semplicemente dalla root dello stesso). Per “linkare” le varie librerie e files dell’applicazione usate questa sintassi all’interno della vostra matrice o views del tema:

//Stili CSS 
{{ HTML::style('stylesheets/frontend/bootstrap.min.css') }}

//Librerie o JS
{{ HTML::script('javascripts/frontend/theme.js') }}

Nel caso l’applicazione disponga di un backend il mio consiglio è di suddividere ulteriormente ogni cartella in backend e frontend. Ad esempio avremo:

/images

backend
frontend

/stylesheets

backend
frontend

e cosi via. In questo modo avrete tutto catalogato nel migliore dei modi.

Visualizzare dati

Come abbiamo visto nella precedente lezione sui controller possiamo passare alla views anche variabili, array o altro. Ma come faccio a gestire la visualizzazione dei vari elementi? Ecco alcuni strumenti pronti all’uso per iniziare a comporre il vostro tema.

Visualizzare variabili

{{ $variabile }}

Escape delle variabili

{{{ $variabile }}}

Includere una sub-views all’interno della vista

@include('view.nomevista')

Commenti in Laravel

{{-- I commenti di questo tipo non appaiono nell'HTML  --}}

Recuperare percorso assoluto all’applicazione per menu ed immagini (o altro)

<?php echo URL::to('/'); ?>

Controlli e loop

Ovviamente il vero fulcro della dinamicità di un tema Laravel è composto sicuramente dai loop o dai controlli. Nel caso del loop ricordatevi di passare alla vista l’array del contenuto come abbiamo visto nella precedente lezione:

return View::make('home')->with('loop', $loop );

Ecco alcuni codici utili:

Controlli IF/ELSE

@if (count($loop) === 1)
   <p>Hai un solo elemento nel loop da visualizzare!</p>
@elseif (count($loop) > 1)
     <p>Hai molti elementi da visualizzare!</p>
@else
  <p>Nessun elemento trovato </p>
@endif

Controlli selettivi

// Se non sei autenticato
@unless (Auth::check())
  <p> Non sei autenticato. </p>
@endunless

Loop contenuto

//Per ciascun elemento del loop
@foreach ($loop as $item)
    <p>Item: {{ $item->id }}</p>
    <p>Item: {{ $item->titolo }}</p>
@endforeach

Cicli FOR

@for ($i = 0; $i < 10; $i++)
    Valore:  {{ $i }}
@endfor

Cicli WHILE

@while (true)
    <p>Loop infinito YO!</p>
@endwhile

Gestione Form

Laravel 4 permette un controllo completo sui form, per aprire un nuovo form vi basterà usare questa sintassi:

{{ Form::open(array('url' => 'add/nomeroute','method'=>'post')) }}
    //Codice form qui
{{ Form::close() }}

[lightgrey_box] NOTA: Se il vostro form accetta i files in upload ricordatevi di aggiungere ‘files’ => true dentro l’array di apertura del form.[/lightgrey_box]

Per i vari input invece usate una struttura che possa contenere anche eventuali errori di compilazione:

<!--Input type="text" -->
<div class="control-group {{{ $errors->has('title') ? 'error' : '' }}}">
        {{ Form::label('title', 'Titolo', array('class' => 'control-label')) }}

        <div class="controls">
            {{ Form::text('title', Input::old('title')) }}
            {{ $errors->first('title') }}
        </div>
</div>

<!--Input textarea -->
<div class="control-group {{{ $errors->has('description') ? 'error' : '' }}}">
        {{ Form::label('description', 'Descrizione', array('class' => 'control-label')) }}

        <div class="controls">
            {{  Form::textarea('description', Input::old('description'), array(
                'id'      => 'description',
                'class'=> 'description',
                'rows'    => 20,
            )); }}
            {{ $errors->first('description') }}
        </div>
 </div>

Per le select la sintassi di codice da usare è la seguente:

//Con valori fissi
{{ Form::select('status', array('Elemento' => 'Elemento', 'Elemento2' => 'Elemento2'))}}

//Con valori in array passati dal controller
{{ Form::select('categoria', $categoriesArr)}}

Potete anche impostare un valore di default personalizzato per la select in questo modo:

//Elemento2 selezionato di default
{{ Form::select('status', array('Elemento' => 'Elemento', 'Elemento2' => 'Elemento2'),'Elemento2')}}

Altri elementi utili per i form.

//Submit con classe personalizzata (utile se usate Bootstrap) 
{{ Form::submit('Salva', array('class' => 'btn btn-primary')) }}

//Elemento nascosto
{{ Form::hidden('name',$name) }}

Helpers molto utili in Laravel

Utilità per le parole

    echo Str::lower('Viva Targetweb');
    // viva targetweb

    echo Str::upper('Viva Targetweb');
    // VIVA TARGETWEB.

    echo Str::title('Viva Targetweb ciao a tutti');
    // Viva Targetweb Ciao A Tutti

Limitare caratteri

    echo Str::limit("Lorem ipsum dolor sit amet", 10);
    // Lorem ipsu...

    echo Str::limit_exact("Lorem ipsum dolor sit amet", 10);
    // Lorem i...

Generare una stringa random

echo Str::random(32);

Singolare e plurale

    echo Str::plural('user');
    // users

    echo Str::singular('users');
    // user

Creare uno slug/permalink

return Str::slug('Titolo del post');
//Output: titolo-del-post

//Esempio con separatore diverso del classico trattino
return Str::slug('Titolo del post', '_');
//Output: titolo_del_post

Conclusioni & Download

Capitolo 1: Guida Laravel 4 - Introduzione ai framework, Installazione e configurazione
Capitolo 2: Guida Laravel 4 - Introduzione alle routes per gestire il progetto
Capitolo 3: Guida Laravel 4 - Uso dei Controller
Capitolo 4: Guida Laravel 4 - Uso delle views e del blade template system
Donazione libera con importo minimo di 1€ - Riceverai una mail con un link dove scaricare lo zip, il link è attivo per 2 giorni dalla data di donazione.

▼

Continue

Se la guida ti è stata utile condividila sui tuoi social network preferiti. Se invece mi vuoi offrire una pizza effettua una donazione via paypal (trovi il form poco sopra), per ringraziarti potrai scaricare la guida in formato PDF per poterla leggere ovunque vuoi. Man mano che usciranno le lezioni la guida PDF ottenuta tramite la donazione conterrà tutte le lezioni precedenti con qualche interessante aggiunta.

Hai domande o consigli? Commenta questo articolo!