I motori di template di Laravel supportano React, Vue e altre librerie. Tuttavia, gli sviluppatori amano la capacità del motore Laravel Blade di creare rapidamente viste modulari e riutilizzabili. Blade permette di estendere senza sforzo i layout, definire sezioni e utilizzare strutture di controllo per generare contenuti basati sui dati.

Questo articolo pratico spiega cos’è Blade, come funziona e come migliora le applicazioni Laravel.

Tutto ciò che serve per usare Laravel Blade

Laravel Blade è il motore di template predefinito del framework Laravel. Permette di utilizzare variabili, loop, dichiarazioni condizionali e altre funzioni PHP direttamente nel codice HTML. Per creare i file Blade, basta definire le viste blade creando dei file con estensione .blade.php nella cartella resources/views del progetto Laravel, quindi strutturare le pagine dinamiche preferite in questi file.

Perché usare Blade?

Uno dei principali vantaggi di Blade è la sua organizzazione modulare del codice. Blade aiuta a organizzare il codice in moduli riutilizzabili che si possono aggiungere, rimuovere o aggiornare facilmente senza influenzare il resto dell’applicazione.

L’incapsulamento del codice è un altro dei vantaggi di Blade. Blade aiuta a incapsulare le funzioni, rendendo più gestibili i test, il debug e la manutenzione del codice. Questo approccio è vantaggioso per le applicazioni più grandi, perché quelle non organizzate possono diventare rapidamente difficili da gestire.

Il motore di template di Blade è performante ed è il framework PHP più veloce che abbiamo testato. Il motore compila tutte le viste di Blade in semplice codice PHP e le memorizza nella cache finché non vengono modificate. Questo approccio favorisce un rendering più veloce e prestazioni complessivamente migliori.

Come usare Laravel Blade

In questo tutorial creeremo un’applicazione Laravel per testare i template Blade in azione. Impareremo a definire ed estendere i layout di Blade, a passare i dati tra le viste di Blade, a utilizzare le varie strutture di controllo disponibili e a creare i nostri Blade.

Prerequisiti

Per seguire questo tutorial, è necessario avere i seguenti requisiti:

  • Dimestichezza con PHP
  • Composer installato. Verificate che Composer sia presente sul vostro sistema eseguendo composer -V

Date un’occhiata al codice completo del tutorial per avere una guida durante il lavoro.

Come creare un’applicazione Laravel

Per creare un’applicazione Laravel di esempio, eseguiamo:

composer create-project laravel/laravel my-app

Seguiamo le istruzioni sul terminale per completare la creazione dell’applicazione.

Successivamente, entriamo nella directory dell’applicazione e serviamola con questo comando:

cd my-app
php artisan serve

Clicchiamo sul link nel terminale per aprire la pagina di benvenuto di Laravel nel browser.

Come definire il layout

I layout permettono di configurare sezioni dell’applicazione web da condividere su più pagine. Ad esempio, se l’applicazione ha una navbar e un footer coerenti tra le varie pagine, è più efficiente crearli una volta sola piuttosto che ricrearli da capo per ogni pagina.

Prima di seguire le istruzioni passaggio per passaggio, diamo un’occhiata alla seguente dimostrazione scheletrica.

Il codice per la creazione di siti web senza layout è mostrato di seguito. Fa riscrivere il codice della navbar e del footer per ogni pagina.

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>
<!-- Page 2 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

Invece, possiamo costruire facilmente la nostra applicazione utilizzando i layout per condividere gli stessi componenti in un unico blocco di codice:

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Una volta definito il layout, possiamo utilizzarlo in qualsiasi pagina vogliamo:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

Nelle versioni precedenti di Laravel, era necessario creare i layout utilizzando l’ereditarietà dei modelli. Tuttavia, quando l’azienda ha aggiunto la funzione dei componenti, è diventato molto più facile creare layout robusti.

Per creare un nuovo layout con Laravel Blade, eseguiamo prima questo comando per creare il componente del layout:

php artisan make:component Layout

Questo comando genera un nuovo file layout.blade.php situato in una nuova cartella chiamata components nella directory resources/views/. Apriamo questo file e incolliamo questo codice:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

Questo codice crea un componente di layout con una semplice navbar e un footer. La funzione slot definisce dove passare il contenuto principale ogni volta che estendiamo il componente di layout.

Come estendere il layout

Possiamo importare facilmente un componente in una vista blade utilizzando il tag <x-component-name>. Questo metodo si applica anche al componente di layout creato in precedenza.

Per vedere come appare l’estensione del layout, apriamo il file predefinito resources/views/welcome.blade.php e sostituiamo il contenuto del file con questo codice:

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Questo approccio aggiorna la pagina di benvenuto in modo da utilizzare il componente di layout passando un elemento header e un paragrafo con un testo fittizio come contenuto. Ricarichiamo il link aperto in precedenza per vedere le modifiche.

Nella definizione del layout, notiamo che il codice ha reso un dato titolo che viene impostato come predefinito a “Example Website” se il codice non passa i dati del titolo. Possiamo passare questi dati come slot denominati nelle viste tramite il codice <x-slot name="slotName" /> – in questo caso, <x-slot name="title" />. Aggiorniamo il file welcome.blade.php con il codice sottostante e ricarichiamo la pagina:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

Successivamente, aggiungiamo un po’ di stile per migliorare l’aspetto dell’applicazione. Creiamo un nuovo file app.css nella cartella /public/css e incolliamo il codice di questo file.

Con tutti questi aggiornamenti, dovremmo vedere il seguente risultato quando visualizziamo l’anteprima dell’applicazione su http://127.0.0.1:8000/.

Hello world di laravel
Hello world

Come includere i dati di backend

Nell’esempio precedente, abbiamo condiviso facilmente i dati tra i componenti e le viste tramite gli slot. Tuttavia, esistono approcci migliori per caricare i dati da un database o da un’altra fonte remota.

In questo caso, carichiamo e passiamo i dati direttamente dalla definizione del router e accediamoci come abbiamo fatto con uno slot nominato nell’esempio precedente. Per farlo, apriamo il file routes/web.php e sostituiamo il suo contenuto con questo codice:

<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

Nel codice precedente, abbiamo aggiornato la web route per passare il nome "John Doe" alla vista di benvenuto. Ora, accediamo a questo valore nelle viste blade in questo modo:

<div>
  Hello, {{ $name }}
   <!-- Outputs: Hello, John Doe --> 
</div>

Possiamo utilizzare questo metodo per caricare i dati da un database. Ad esempio, supponiamo di avere una tabella to-do contenente un elenco di cose da fare. Usiamo la facciata DB per caricare i to-do e passarli alla vista:

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

Tuttavia, se non avete un database, potete aggiornare la web entry route per passare un array di to-do statici. Apriamo il file routes/web.php e aggiorniamo il percorso predefinito (/) con il codice seguente:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

Sostituiamo il contenuto del file welcome.blade.php con il codice seguente per accedere ai to-do come array JSON codificato.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  <!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] --> 
</x-layout>

Come utilizzare le scorciatoie di controllo

Il motore di template di Blade supporta anche diverse direttive per rendere condizionati vari tipi di dati. Ad esempio, per iterare l’array di cose da fare che abbiamo passato alla vista di benvenuto, applichiamo un ciclo foreach incollando il seguente codice nel file welcome.blade.php:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

Questa modifica dovrebbe rendere le cose da fare in un elenco non ordinato, come nella schermata qui sotto.

La lista di cose da fare in un elenco non ordinato
La lista di cose da fare in un elenco non ordinato

Per costruire un blocco di dichiarazioni condizionali, usiamo le direttive @if, @elseif, @else e @endif. Ad esempio:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

Sostituiamo il contenuto del file welcome.blade.php con il codice qui sopra. Le varie direttive if–else contano le cose da fare e visualizzano un messaggio personalizzato per diversi scenari. Se avete più di un compito nell’array delle cose da fare, dovreste vedere nel browser l’output “I have multiple tasks!”.

Potete trovare altre direttive supportate nella documentazione di Laravel.

Come creare un’estensione personalizzata

Anche voi potete scrivere una direttiva personalizzata, come nell’esempio precedente. Per esplorare questa tecnica, creiamo una direttiva personalizzata di troncamento del testo.

Per prima cosa, creiamo un nuovo service provider eseguendo:

php artisan make:provider TruncateTextServiceProvider

Questo comando genera un nuovo file di service provider in app/Providers/TruncateTextServiceProvider.php. Apriamo questo file e sostituiamo il suo contenuto con:

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

Il codice importa la facciata Blade e definisce una nuova direttiva personalizzata chiamata @truncate. La direttiva accetta due argomenti: $text e $length. Utilizziamo il metodo Str::limit() per troncare il testo alla lunghezza specificata.

Infine, registriamo il service provider aggiungendolo all’array di provider nel file di configurazione config/app.php:

'providers' => [
  // Other service providers
  App\Providers\TruncateTextServiceProvider::class,
],

Utilizziamo la direttiva personalizzata nei nostri template di Blade (welcome.blade.php) richiamandola con la sintassi @truncate.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  <!-- Outputs: Lorem ipsu... -->
</div>

Riepilogo

In questo articolo abbiamo analizzato come Laravel Blade permetta di semplificare il processo di sviluppo e di creare viste modulari e riutilizzabili per le applicazioni web. Tuttavia, il vostro viaggio nello sviluppo di Laravel non dovrebbe finire qui.

L’infrastruttura che ospita la vostra applicazione è fondamentale per il vostro successo quanto il processo di sviluppo locale. Per portare la vostra applicazione Laravel a un livello superiore, avete bisogno di una piattaforma di hosting affidabile che sia in grado di gestire le sue esigenze.

Kinsta ottimizza le soluzioni di hosting in termini di prestazioni, sicurezza e scalabilità, consentendovi di far crescere la vostra applicazione nel miglior ambiente possibile. Distribuite la vostra applicazione Laravel su Kinsta per testarle in prima persona.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.