Views

Introduzione

Non è molto pratico restituire intere stringhe di documenti HTML direttamente dalle tue rotte e controller,vero? Fortunatamente, le viste offrono un modo comodo per posizionare tutto il nostro HTML in file separati.

Le viste separano la logica del tuo controller / applicazione dalla logica di presentazione e sono memorizzate nella directory resources/views. Quando si utilizza Laravel, i template delle viste sono solitamente scritti usando il Blade templating language. Una vista semplice potrebbe apparire così:

<!-- Vista memorizzata in resources/views/greeting.blade.php -->

<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

Poiché questa vista è memorizzata in resources/views/greeting.blade.php, possiamo restituirla usando l’helper globale view in questo modo:

    Route::get('/', function () {
        return view('greeting', ['name' => 'James']);
    });

Cerchi ulteriori informazioni su come scrivere template Blade? Consulta la documentazione completa di Blade per iniziare.

Scrivere le View in React / Vue

Invece di scrivere i loro template frontend in PHP tramite Blade, molti sviluppatori preferiscono utilizzare React o Vue per i loro template. Laravel rende tutto più semplice grazie a Inertia, una libreria che facilita l’integrazione del frontend React/Vue con il backend Laravel senza le solite complessità della creazione di una SPA.

I nostri starter kit di Breeze e Jetstream offrono un ottimo punto di partenza per la tua prossima applicazione Laravel alimentata da Inertia. Inoltre, Laravel Bootcamp fornisce una dimostrazione completa di come costruire un’applicazione Laravel con Inertia, inclusi esempi in Vue e React.

Creare e Renderizzare le View

Puoi creare una view creando un file con estensione .blade.php nella directory resources/views della tua applicazione o usando il comando Artisan make:view:

php artisan make:view greeting

L’estensione .blade.php informa il framework che il file contiene un template Blade. I template Blade includono HTML e direttive Blade che ti permettono di mostrare valori, creare istruzioni "if", iterare sui dati e altro ancora in modo semplice.

Una volta creata una view, puoi restituirla da una delle route o dai controller della tua applicazione usando l’helper globale view:

    Route::get('/', function () {
        return view('greeting', ['name' => 'James']);
    });

Le view possono essere restituite anche usando la facade View:

    use Illuminate\Support\Facades\View;

    return View::make('greeting', ['name' => 'James']);

Come puoi vedere, il primo argomento passato all’helper view corrisponde al nome del file della view nella directory resources/views. Il secondo argomento è un array di dati che devono essere disponibili nella view. In questo caso, stiamo passando la variabile name, che viene visualizzata nella view usando la sintassi Blade.

Directory delle view annidate

Le viste possono essere annidate anche all’interno di sottodirectory della directory resources/views. È possibile utilizzare la notazione "dot" per fare riferimento alle viste annidate. Ad esempio, se la tua vista è memorizzata in resources/views/admin/profile.blade.php, puoi restituirla da una delle route o controller della tua applicazione in questo modo:

return view('admin.profile', $data);

I nomi delle directory delle viste non dovrebbero contenere il carattere ..

Creare la Prima Vista Disponibile

Usando il metodo first della facade View, puoi fare in modo di renderizzare la prima view disponibile in un dato array. Particolarmente utile in alcune situazioni di modularità (mostra questa view se c’è, altrimenti mostra un’altra di fallback).

use Illuminate\Support\Facades\View;

return View::first(['custom.admin', 'admin'], $data);

Determinare se una View Esiste

Se hai bisogno di verificare se una view esiste, puoi usare la facade View. Il metodo exists restituirà true se la view esiste:

use Illuminate\Support\Facades\View;

if (View::exists('admin.profile')) {
    // ...
}

Passare Dati alle Viste

Come visto negli esempi precedenti, puoi passare un array di dati alle view per renderli disponibili nella vista:

return view('greetings', ['name' => 'Victoria']);

Quando passi le informazioni in questo modo, i dati devono essere un array con coppie chiave/valore. Dopo aver fornito i dati a una view, puoi accedere a ciascun valore nella tua vista usando le chiavi dei dati, come <?php echo $name; ?>.

In alternativa a passare un array completo di dati alla funzione helper view, puoi usare il metodo with per aggiungere singoli elementi di dati alla view. Il metodo with restituisce un’istanza dell’oggetto view in modo da poter continuare a concatenare metodi prima di restituire la view:

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

Condividere Dati con Tutte le View

Occasionalmente, potresti aver bisogno di condividere dati con tutte le view renderizzate dalla tua applicazione. Puoi farlo utilizzando il metodo share della facade View. Tipicamente, dovresti posizionare le chiamate al metodo share all’interno del metodo boot di un service provider. Sei libero di aggiungerle alla classe App\Providers\AppServiceProvider oppure di creare un service provider separato per contenerle:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;

class AppServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        // ...
    }

    public function boot(): void
    {
        View::share('key', 'value');
    }
}

View Composer

I view composer sono callback o metodi di classe che vengono chiamati quando una vista viene renderizzata. Se hai dati che desideri associare a una vista ogni volta che viene renderizzata, un view composer può aiutarti a organizzare quella logica in un’unica posizione. I view composer possono essere particolarmente utili se la stessa vista viene restituita da più route o controller nella tua applicazione e ha sempre bisogno di un particolare pezzo di dati.

Di solito, i view composer vengono registrati all’interno di uno dei service provider della tua applicazione. In questo esempio, assumeremo che App\Providers\AppServiceProvider conterrà questa logica.

Utilizzeremo il metodo composer della facade View per registrare il view composer. Laravel non include una directory predefinita per i view composer basati su classi, quindi sei libero di organizzarli come preferisci. Ad esempio, potresti creare una directory app/View/Composers per contenere tutti i composer della tua applicazione:

<?php

namespace App\Providers;

use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Registra i servizi dell'applicazione.
     */
    public function register(): void
    {
        // ...
    }

    /**
     * Bootstrap dei servizi dell'applicazione.
     */
    public function boot(): void
    {
        // Utilizzo di composer basati su classi...
        Facades\View::composer('profile', ProfileComposer::class);

        // Utilizzo di composer basati su closure...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });

        Facades\View::composer('dashboard', function (View $view) {
            // ...
        });
    }
}

Ora che abbiamo registrato il composer, il metodo compose della classe App\View\Composers\ProfileComposer verrà eseguito ogni volta che la vista profile viene renderizzata. Diamo un’occhiata a un esempio della classe del composer:

<?php

namespace App\View\Composers;

use App\Repositories\UserRepository;
use Illuminate\View\View;

class ProfileComposer
{
    /**
     * Crea un nuovo composer di profilo.
     */
    public function __construct(
        protected UserRepository $users,
    ) {}

    /**
     * Associa i dati alla vista.
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

Come puoi vedere, tutti i view composer vengono risolti tramite il service container, quindi puoi specificare qualsiasi dipendenza tu abbia bisogno nel costruttore di un compositore.

Collegare un Composer a Più View

Puoi collegare un view composer a più view contemporaneamente passando un array di view come primo argomento al metodo composer:

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;

View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

Il metodo composer accetta anche il carattere * come wildcard, permettendoti di collegare un composer a tutte le view:

use Illuminate\Support\Facades;
use Illuminate\View\View;

Facades\View::composer('*', function (View $view) {
    // ...
});

View Creator

I "creator" delle view sono molto simili ai view composer; tuttavia, vengono eseguiti immediatamente dopo che la vista viene istanziata invece di aspettare che la view sia quasi pronta per il rendering. Per registrare un view creator, usa il metodo creator:

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;

View::creator('profile', ProfileCreator::class);

Ottimizzazione delle View

Di default, le view dei template Blade vengono compilate su richiesta. Quando viene eseguita una richiesta che renderizza una view, Laravel verifica se esiste la view. Se esiste, Laravel controlla se la view non è stata già compilata o se ha avuto modifiche recenti. In tal caso, la view viene compilata (o ricompilata).

Compilare le view durante la richiesta può avere un piccolo impatto negativo sulle prestazioni, quindi Laravel offre il comando Artisan view:cache per precompilare tutte le view utilizzate dalla tua applicazione. Per migliorare le prestazioni, potresti eseguire questo comando come parte del processo di deploy:

php artisan view:cache

Puoi usare il comando view:clear per cancellare la cache delle view:

php artisan view:clear
Lascia un commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *