Tempo di lettura: 5 minuti
Creare interfacce dinamiche con Laravel 11 e Livewire 3 è un’ottima scelta per sviluppare applicazioni web moderne e interattive. Laravel è uno dei framework PHP più potenti e facili da usare, mentre Livewire 3 è una libreria che ti consente di costruire componenti dinamici senza scrivere JavaScript complesso. Con questo tutorial, ti guiderò attraverso i passi necessari per creare un’applicazione dinamica utilizzando questi strumenti.
Cos’è Laravel?
Laravel è un framework PHP open-source che semplifica lo sviluppo di applicazioni web attraverso strumenti e una sintassi elegante. Laravel ha una vasta gamma di funzionalità, tra cui gestione del database, autenticazione, routing e molto altro. La sua community è molto attiva, e la documentazione è ben curata, il che lo rende una scelta popolare tra i sviluppatori.
Cos’è Livewire?
Livewire è un framework full-stack per Laravel che ti consente di creare interfacce utente dinamiche senza scrivere JavaScript. Livewire si integra strettamente con Laravel, permettendoti di scrivere logica lato server in PHP per gestire l’interattività dell’interfaccia. Con Livewire, puoi aggiornare le porzioni della tua pagina web in tempo reale senza dover ricaricare l’intera pagina.
Prerequisiti
Prima di iniziare, assicurati di avere:
- PHP 8.1+ installato sul tuo sistema.
- Composer, il gestore di pacchetti PHP.
- Un server web (come Apache o Nginx) e un database (MySQL, PostgreSQL, SQLite).
- Node.js e npm se vuoi lavorare con le risorse frontend (come le dipendenze JavaScript).
- Laravel 11 e Livewire 3.
Creazione del Progetto Laravel
Per iniziare, creiamo un nuovo progetto Laravel.
composer create-project --prefer-dist laravel/laravel laravel-livewire-app
Questo comando scaricherà e installerà una nuova applicazione Laravel. Una volta completato, naviga nel progetto appena creato.
cd laravel-livewire-app
Installare Livewire 3
Ora che il nostro progetto Laravel è pronto, dobbiamo installare Livewire 3. Per farlo, esegui il comando Composer:
composer require livewire/livewire
Questo comando aggiungerà Livewire al tuo progetto Laravel.
Configurare l’Ambiente
Dopo aver installato Livewire, assicurati che l’ambiente di sviluppo sia pronto per l’esecuzione di Laravel. Se non lo hai già fatto, configura il file .env con le informazioni del tuo database, come:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_livewire DB_USERNAME=root DB_PASSWORD=
Dopodiché, esegui la migrazione per creare le tabelle di base nel database.
php artisan migrate
Creazione di un Componente Livewire
Con Livewire, creiamo componenti che saranno la base delle nostre interfacce dinamiche. Creiamo un componente Livewire che mostrerà un elenco di articoli e permetterà di aggiungere nuovi articoli in tempo reale.
Per creare un nuovo componente Livewire, eseguiamo il comando:
php artisan make:livewire ArticleList
Questo comando crea due file:
- Un file PHP per la logica del componente, situato in
app/Http/Livewire/ArticleList.php. - Un file Blade per la vista, situato in
resources/views/livewire/article-list.blade.php.
Modifica del Componente PHP
Nel file ArticleList.php, aggiungiamo la logica per gestire l’elenco degli articoli e aggiungere nuovi articoli. Ecco un esempio di come potrebbe apparire il file:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Article;
class ArticleList extends Component
{
public $title;
public $content;
// Funzione per caricare gli articoli dal database
public function render()
{
$articles = Article::all();
return view('livewire.article-list', compact('articles'));
}
// Funzione per aggiungere un nuovo articolo
public function addArticle()
{
$this->validate([
'title' => 'required|string|max:255',
'content' => 'required|string',
]);
Article::create([
'title' => $this->title,
'content' => $this->content,
]);
// Reset dei campi
$this->title = '';
$this->content = '';
}
}
In questa classe:
- Abbiamo dichiarato le variabili
$titlee$contentper raccogliere i dati del nuovo articolo. - La funzione
rendercarica tutti gli articoli dal database e li passa alla vista. - La funzione
addArticlevalida i dati e aggiunge un nuovo articolo al database.
Modifica della Vista Blade
Nel file article-list.blade.php, aggiungiamo il codice HTML per visualizzare gli articoli e un modulo per aggiungerne di nuovi. Ecco come potrebbe apparire:
<div>
<h2>Lista degli Articoli</h2>
<!-- Form per aggiungere un nuovo articolo -->
<form wire:submit.prevent="addArticle">
<div>
<label for="title">Titolo</label>
<input type="text" id="title" wire:model="title">
</div>
<div>
<label for="content">Contenuto</label>
<textarea id="content" wire:model="content"></textarea>
</div>
<button type="submit">Aggiungi Articolo</button>
</form>
<!-- Lista degli articoli -->
<ul>
@foreach($articles as $article)
<li>
<h3>{{ $article->title }}</h3>
<p>{{ $article->content }}</p>
</li>
@endforeach
</ul>
</div>
In questa vista:
- Il form è legato ai metodi del componente Livewire grazie alla direttiva
wire:model, che sincronizza i dati del form con le proprietà del componente. - Utilizziamo
wire:submit.preventper evitare il comportamento predefinito di invio del form e chiamare il metodoaddArticledel componente.
Aggiungere il Componente nella Vista Principale
Per visualizzare il componente, dobbiamo aggiungerlo nella vista principale di Laravel. Modifica il file resources/views/welcome.blade.php per includere il componente Livewire:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Livewire</title>
@livewireStyles
</head>
<body>
<h1>Benvenuto in Laravel con Livewire!</h1>
@livewire('article-list')
@livewireScripts
</body>
</html>
Le direttive @livewireStyles e @livewireScripts includono i CSS e gli script necessari per far funzionare Livewire.
Aggiungere un Modello per gli Articoli
Per completare il tutto, dobbiamo creare il modello Article per interagire con il database. Eseguiamo il comando:
php artisan make:model Article -m
Questo creerà un modello e una migrazione per la tabella articles. Modifica la migrazione per includere i campi necessari:
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
Esegui la migrazione per creare la tabella:
php artisan migrate
Testare l’Applicazione
Ora puoi avviare il server di sviluppo di Laravel per testare l’applicazione:
php artisan serve
Visita http://127.0.0.1:8000 nel tuo browser, e dovresti vedere l’interfaccia con il modulo per aggiungere articoli e la lista degli articoli che si aggiorna dinamicamente.
Conclusione
In questo tutorial, abbiamo visto come creare interfacce dinamiche utilizzando Laravel 11 e Livewire 3. Abbiamo creato un’applicazione che consente agli utenti di aggiungere articoli tramite un modulo, con la lista che si aggiorna dinamicamente grazie a Livewire. Questo esempio può essere facilmente esteso per creare applicazioni più complesse.
Livewire ti permette di costruire applicazioni web interattive senza dover scrivere JavaScript, semplificando notevolmente lo sviluppo di interfacce dinamiche con Laravel.
