Laravel - Blade Templates: A Beginner's Guide

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il meraviglioso mondo del motore di template Blade di Laravel. Non preoccupatevi se non avete mai scritto codice prima - sarò il vostro guida amichevole in questo viaggio e andremo passo per passo.

Laravel - Blade Templates

Cos'è Blade?

Blade è il potente motore di template di Laravel. Immaginatelo come uno strumento magico che ci aiuta a creare template HTML dinamici e riutilizzabili. È come avere un assistente super-intelligente che può riempire i vuoti nelle vostre pagine web con dati reali.

Perché usare Blade?

È semplice e facile da imparare
Rende il vostro codice più pulito e leggibile
Vi aiuta a evitare la ripetizione (ricordate, gli sviluppatori sono pigri - in senso positivo!)

Ora, mettiamo le maniche su e iniziamo!

Passaggi per Creare un Layout di Template Blade

1. Creare un Layout Principale

Prima di tutto, dobbiamo creare un layout principale. Questo è come lo scheletro del vostro sito web - contiene le parti che rimangono uguali su ogni pagina.

Create un nuovo file chiamato layout.blade.php nella directory resources/views:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Il mio Sito Web Awesome</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 Il mio Sito Web Awesome</p>
</footer>
</body>
</html>

Ecco una spiegazione:

@yield('title'): Questo dice a Blade, "Ehi, riempiremo il titolo più tardi per ogni pagina."
@yield('content'): Questo è dove andrà il contenuto principale di ogni pagina.

2. Creare Template Figli

Ora, creiamo un template figlio che utilizza il nostro layout. Create un nuovo file chiamato home.blade.php:

@extends('layout')

@section('title', 'Pagina Iniziale')

@section('content')
<h2>Benvenuti sul mio Sito Web Awesome!</h2>
<p>Questo è il contenuto della pagina iniziale.</p>
@endsection

Ecco cosa sta succedendo:

@extends('layout'): Questo dice a Blade di usare il nostro file layout.blade.php come base.
@section('title', 'Pagina Iniziale'): Questo riempie il titolo che avevamo lasciato vuoto prima.
@section('content'): Questo è dove mettiamo il contenuto unico per questa pagina.

3. Visualizzare Dati

Blade è davvero eccezionale quando si tratta di visualizzare dati. Supponiamo di voler mostrare una lista di frutta. Aggiorniamo il nostro home.blade.php:

@extends('layout')

@section('title', 'Pagina Iniziale')

@section('content')
<h2>Benvenuti sul mio Sito Web Awesome!</h2>
<p>Questo è il contenuto della pagina iniziale.</p>

<h3-La nostra Selezione di Frutta:</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>Spiacenti, la frutta è finita!</p>
@endif
@endsection

In questo esempio:

@if e @else: Questi ci permettono di prendere decisioni nel nostro template.
@foreach: Questo ci aiuta a scorrere la nostra lista di frutta.
{{ $fruit }}: Le doppie parentesi graffe dicono a Blade di visualizzare il valore della variabile.

4. Usare Componenti Blade

I componenti Blade sono come i mattoni LEGO per il vostro sito web. Sono pezzi riutilizzabili che potete usare attraverso diverse pagine. Creiamo un componente semplice per un pulsante.

Create un nuovo file resources/views/components/button.blade.php:

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

Ora possiamo usare questo pulsante nel nostro home.blade.php:

@extends('layout')

@section('title', 'Pagina Iniziale')

@section('content')
<h2>Benvenuti sul mio Sito Web Awesome!</h2>
<p>Questo è il contenuto della pagina iniziale.</p>

@component('components.button', ['type' => 'success'])
Clicca qui!
@endcomponent
@endsection

Questo creerà un pulsante con il testo "Clicca qui!" e uno stile di successo.

Foglio di Trucchi delle Direttive Blade

Ecco una tabella utile delle direttive Blade più comuni:

Direttiva	Scopo
@if	Dichiarazione condizionale
@else	Alternativa per @if
@elseif	Condizione alternativa
@foreach	Scorrere un array
@for	Ciclo for
@while	Ciclo while
@switch	Dichiarazione switch
@yield	Definire una sezione in un layout
@section	Definire il contenuto per un layout
@extends	Specificare quale layout utilizzare
@include	Includere un'altra vista
@auth	Controllare se l'utente è autenticato
@guest	Controllare se l'utente è un ospite

Ricordate, la pratica fa perfezione! Non abbiate paura di sperimentare con queste direttive e creare i vostri template. Prima di sapere, sarete un ninja di Blade, tagliando l'HTML come un coltello caldo nel burro!

Negli anni di insegnamento, ho scoperto che il miglior modo per imparare è fare. Allora, perché non provare a creare un layout semplice per un blog utilizzando ciò che abbiamo imparato? Iniziate con un layout principale, create pagine per la home, chi siamo e i post del blog, e utilizzate le potenti funzionalità di Blade per rendere il vostro codice pulito e DRY (Don't Repeat Yourself).

Buon coding, e che la Blade sia con voi! ?

Credits: Image by storyset

Tutorial precedente:

Laravel - Viste

Prossimo tutorial:

Laravel - Redirezioni