Introduzione
Dopo averti mostrato come costruire le meccaniche della tua applicazione web, tramite percorsi e interazioni con il Modello e i Controller, è il momento di mostrarti come gestire il front-end.
In questa guida potrai scegliere come costruire il tuo template per Laravel personalizzando il front-end della tua applicazione.
Definire un nuovo template
Creare un percorso al nuovo template
Il percorso di default impostato per la tua applicazione web è quello situato al percorso resources/views/welcome.blade.php.
All'interno della stessa directory, potrai definire altri file (templates) da utilizzare per il front end. Per usare questi stili per la tua applicazione web, ti basterà cambiare il percorso di default in quello che punti al tuo file.
Il template sarà racchiuso in un file con estensione .blade.php. Nel tutorial, costruirai un index per la tua applicazione.
Il primo step è accedere al file contenenti i percorsi, per cambiare quello che punta alla pagina di default di Laravel.
Apri, quindi, il percorso routes/web.php tramite un editor di testo. Nell'esempio:
$ nano routes/web.php
Al suo interno, dovresti trovare delle istruzioni simili:
L'istruzione Route punterà alla pagina di default di Laravel, descritta precedentemente.
Cambiando l'argomento dell'istruzione che ritorna la vista, all'interno del percorso definito, potrai effettivamente modificare la vista inserendo i dati che preferisci, recuperandoli dal Modello basato sul tuo Database.
Inizia definendo una variabile (nel nostro esempio,$students) che acquisisca, come parametri, i risultati di una query sul database. Ti mostriamo come definire tutto questo in una dichiarazione nel codice:
$students = Student::all()
->sortBy("name");
L'istruzione assegnerà alla variabile il risultato di una query sul database che acquisirà tutti i dati sugli studenti dal Modello Students, ordinandoli in ordine alfabetico. (Più avanti, servirà un ciclo For per poter leggere, per ogni studente, i relativi campi).
La funzione view, invece, cercherà un file di template che abbia il nome di quello di default (welcome.blade.php). Cambiando gli argomenti di tale funzione, potrai specificare un nuovo nome da cercare nel percorso (index.blade.php) e fornirai, in aggiunta, una lista di links contenuta nella variabile con nome al singolare.
return view('index', [
'students' => $students
]);
Dovrai anche definire, nelle inclusioni, la seguente dichiarazione:
use App\Models\Student;
La sintassi completa del codice nel file sarà la seguente:
use Illuminate\Support\Facades\Route;
use App\Models\Student;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
$students = Student::all()
->sortBy("name");
return view('index', [
'students' => $students
]);
});
Finita questa configurazione, avrai impostato correttamente il percorso a una pagina differente da quella di default. E' ora il momento di creare il file effettivo contenente il template.
Creare il file di template
Comincia col creare il file index.blade.php, usando il tuo editor :
$ nano resources/views/index.blade.php
Nel file, inserisci il codice HTML a tua scelta. Nel caso dell'esempio, verrà creata una pagina che ospiterà le informazioni sugli studenti registrati nel database:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Students of MySchool</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Here's my students list:
</h1>
<p class="subtitle">
You can include a little description here.
</p>
<ul>
@foreach ($students as $student)
<li>
<p>{{ $student->name }}
{{ $student->surname }}
{{ $student->badge_number }}</p>
</li>
@endforeach
</ul>
</div>
</section>
</body>
</html>
Puoi notare come, grazie a Blade, l'inserimento di un For loop abbia permesso di stampare i vari risultati della query indicata precedentemente per gli studenti.
Usando il comando:
php artisan serve
E connettendosi all'indirizzo 127.0.0.1:8000, visualizzerai la pagina da te configurata. Nell'esempio:
Puoi notare che le informazioni degli studenti sono visualizzate come scelto nel codice (nome+cognome+matricola) e sono ordinati secondo l'ordinamento da noi specificato (in base al nome e non al numero di matricola!). Questo è stato reso possibile grazie al ciclo FOR implementato grazie a Blade.
Ti mostriamo ora, ulteriori condizioni che potresti specificare grazie con Blade all'interno del tuo template.
Inserire direttive nei tuoi template
Condizioni IF
Puoi inserire le condizioni IF ed else come nel linguaggio di programmazione PHP. Di seguito ti mostriamo alcuni esempi:
@if (count($students) === 1)
<p>C'è un solo studente: {{ $students->name }}
{{ $student->surname }}
{{ $student->badge_number }}</p>
@elseif (count($records) > 1)
<ul>
@foreach ($students as $student)
<li>
<p>{{ $student->name }}
{{ $student->surname }}
{{ $student->badge_number }}</p>
</li>
@endforeach
</ul>
@else
<p>Nessuno studente registrato</p>
@endif
E' possibile anche specificare una condizione di unless:
@unless (count($students) >= 1)
<p>Nessuno studente registrato</p>
@endunless
Altre condizioni specificabili sono quelle per controllare che la variabile sia inizializzata o che sia vuota:
@isset($students)
<p>La variabile è definita e non nulla</p>
@endisset
@empty($records)
<p>Nessuno studente registrato</p>
@endempty
Condizioni di autenticazione
Puoi controllare, tramite le strutture di controllo di Blade, che un pacchetto di azioni venga eseguito solo se l'utente è loggato o se non lo è:
@auth('user')
// Utente autenticato...
@endauth
@guest('user')
// Utente non autenticato...
@endguest
Costrutto SWITCH
Qualora tu voglia, puoi implementare un costrutto SWITCH per scegliere quali azioni eseguire in base ai casi:
@switch(count($students))
@case(1)
<p>Uno studente registrato</p> @break
@case(2)
<p>Due studenti registrati</p> @break
@default
<p>Nessuno studente registrato</p>
@endswitch
Cicli
Come nel caso del loop FOR, visto in precedenza, in cui venivano lette tutte le istanze di studente presenti nella variabile $students, grazie a Blade ti è permesso di implementare tutti i cicli con dei semplici costrutti.
Nell'esempio, ti mostriamo i principali costrutti analoghi con quelli di PHP:
@for ($i = 0; $i < (count($students)); $i++)
<p>Leggo studente numero {{ $i }}</p>
@endfor
@foreach ($students as $student)
<p>Studente {{ $student->badge_number }}</p>
@endforeach
@forelse ($students as $student)
<li>{{ $student->name }}</li>
@empty
<p>Nessuno studente registrato</p>
@endforelse
@while (!empty($students))
<p>Ci sono degli studenti registrati</p>
@endwhile
Con questo chiudiamo la parte riguardante i cicli e le strutture di controllo. Ci sono, comunque, altri statements di Blade da poter definire. Approfondisci nella documentazione ufficiale di Laravel.
Conclusioni
Al termine di questo tutorial, sarai stato in grado di costruire il tuo primo template per la tua applicazione web e ad impostarlo per la visualizzazione di default, modificando i percorsi di Laravel. Hai inoltre conosciuto come implementare le strutture di controllo e i cicli comuni a diversi linguaggi di programmazione.
Continua a seguire la prossima guida della serie su Laravel per imparere a gestire l'instradamento delle richieste nella tua applicazione wbe sviluppata.