08 laravel blade

Blade è il template engine di laravel che permette la scrittura di codice in modo più compatto e ordinato. Laravel riconosce l’utilizzo di blade grazie all’estensione dei file che saranno .blade.php.

Trasformeremo la vista creata precedentemente i una vista di tipo blade copiamo il codice in una nuova vista che chiameremo staffb.blade.php

<h1>
 <?=$titolo?>
</h1>
<?php
 if(!empty($staff)) {
  echo '<ul>';
  foreach ($staff as $persona) {
  echo "<li>{$persona['nome']} {$persona['cognome']}</li>";
 }
 echo '</ul>';
}

Iniziamo col trasformare la parte <h1>. In blade non si deve specificare echo che verrà sostituito dalle doppie parentesi graffe che avvolgeranno il nostro contenuto.

<h1>
 {{$titolo}}
</h1>

Si toglie l’apertura e la chiusura del tag php ( <?php ?> ).

Il comando if viene utilizzato con la chiocciola davanti @if, si eliminano le graffe e al posto della graffa di chiusura del blocco if si mette @endif

@if(!empty($staff))
  echo '<ul>';
  foreach ($staff as $persona) {
  echo "<li>{$persona['nome']} {$persona['cognome']}</li>";
  }
 echo '</ul>';
@endif

Per stampare l’HTML si scrive puro senza echo e virgolette, mentre per il foreach si procede come l’if, quindi @foreach per aprirlo @endforeach per chiuderlo e si eliminano le graffe. Si tolgono i vari echo e virgolette e si racchiude le variabili ricevute da doppie graffe come per l’ <h1>

@if(!empty($staff))
 <ul>
 @foreach ($staff as $persona)
  <li> {{$persona['nome']}} {{$persona['cognome']}} </li>
 @endforeach
 </ul>
@endif

Come creare un default template per le pagine

L’obbiettivo è quello di trasformare il template blade creato prima come template predefinito ereditato di default dalle pagine della nostra applicazione.

Come layout di base per le nostre pagine utilizzeremo lo starter template di bootstrap e inseriremo il codice in un file dentro una nuova cartella /resources/views/templates e lo chiameremo layout.balde.php.

Possiamo scaricare nel progetto i files di bootstrap oppure come faremo utilizziamo il repository bootstrap CDN corrente.

Copiamo il CSS del CDN e lo sostituiamo al <link> riferito al CSS del nostro layout e stessa cosa facciamo per javascript, jQuery e popper e lo copiamo in fondo al posto degli <script> del template. L’unica cosa che andremo a cambiare è che per jQuery toglieremo slim perchè quando utilizzeremo AJAX questo non è presente nella versione slim

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
diventa
<script src="https://code.jquery.com/jquery-3.5.1.min.js"

togliamo anche la parte di favicon che viene cercata in locale.

@yield

Per testare subito il nostro layout, iniziamo col sostituire il nostro <title> con la direttiva @yield() che avrà come primo valore un placeholder che verrà poi sostituito dal nome delle nostre pagine e come secondo argomento un valore di default nel caso il primo fosse vuoto

<title>@yield('titolo','home')</title>

@extend

adesso proviamo a caricare il layout nella nostra pagina staffb.blade.php, utilizzando la direttiva @extend() che conterrà il percorso e il nome del nostro layout separati da punto

@extends('templates.layout')

adesso la nostra pagina estenderà il nostro layout bootstrap che verrà perfettamente caricato. Se analizziamo l’attributo <title> generato vedremo che come titolo avremo home, in quanto la direttiva @yeld definita prima non viene chiamata nella nostra pagina. Inoltre vediamo che l’HTML generato per la nostra pagina viene caricato a monte di tutto il resto, anzichè nel corpo della nostra pagina. Definiamo quindi un’altra direttiva @yield da sostituire al corpo del nostro starter template ( cancellare tutto quello che c’è dentro a <main>)

<main role="main" class="container">
 @yield('content')
</main>

@section

le pagine che vorranno scrivere dentro a questo layout, dovranno dichiarare che scriveranno nella sezione content, tramite l’attributo @section

@section('content')

inoltre dobbiamo definire dove finisce la sezione content con @endsection

@extends('templates.layout')
@section('content')
 <h1>
  {{$titolo}}
 </h1>

@if(!empty($staff))
 <ul>
 @foreach ($staff as $persona)
  <li> {{$persona['nome']}} {{$persona['cognome']}} </li>
 @endforeach
 </ul>
 @endif
@endsection

adesso non ci resta che applicare qualche regola CSS e inserire il titolo come sezione titolo con @section che avrà come primo argomento quello dichiarato nella @yield del layou e come secondo argomento la variabile restituita dalla views del PageController

@section('titolo',$titolo)

Regola:

Tutto quello che viene dichiarato come @yield deve essere richiamato nelle relative sezioni @section delle pagine