close

Costruire layout con Laravel- Creazione di interfacce flessibili e gestibili

In Laravel, il layout gioca un ruolo significativo nella creazione dell'interfaccia utente per un'applicazione web. Un layout rappresenta la struttura complessiva di una pagina Web, incluse sezioni comuni come header, footer  e sidebar. In questo articolo, esploreremo come creare layout per Laravel creare interfacce flessibili e gestibili.

Innanzitutto, creiamo un layout di base per il nostro sito web. Inizia creando un file denominato app.blade.php nella directory. Questo file fungerà da layout principale per l'intero sito web. resources/views/layouts

Ecco un esempio di contenuto per il app.blade.php file:

<!DOCTYPE html>  
<html>  
<head>  
    <title>@yield('title')</title>  
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>  
<body>  
    <header>  
        <h1>Header</h1>  
    </header>  
  
    <nav>  
        <ul>  
            <li><a href="/">Home</a></li>  
            <li><a href="/about">About</a></li>  
            <li><a href="/contact">Contact</a></li>  
        </ul>  
    </nav>  
  
    <main>  
        @yield('content')  
    </main>  
  
    <footer>  
        <p>Footer</p>  
    </footer>  
  
    <script src="{{ asset('js/app.js') }}"></script>  
</body>  
</html>

In questo layout, usiamo le @yield direttive per definire le sezioni dinamiche all'interno del layout. Ad esempio, @yield('title') consente al bambino di sovrascrivere e impostare il titolo della pagina. Allo stesso modo, consente al bambino di inserire il contenuto principale della pagina. views @yield('content') views

Una volta creato il layout, possiamo creare figli che utilizzano questo layout. Ad esempio, per creare una pagina con un layout simile, creare un file denominato nella directory. Questo file estenderà il  layout e definirà il contenuto specifico per la pagina: views about about.blade.php resources/views app.blade.php about 

@extends('layouts.app')  
  
@section('title', 'About')  
  
@section('content')  
    <h2>About Page</h2>  
    <p>This is the about us page.</p>  
@endsection

Nell'esempio sopra, usiamo la @extends direttiva per ereditare il app.blade.php  layout. Successivamente, usiamo la @section direttiva per definire il contenuto specifico per le sezioni title  e content  della pagina.

Infine, dobbiamo definire i percorsi per collegare gli URL ai rispettivi file. views

Ad esempio, nel routes/web.php  file è possibile aggiungere i seguenti percorsi:

Route::get('/', function() {  
    return view('welcome');  
});  
  
Route::get('/about', function() {  
    return view('about');  
});

In questo esempio, l'URL "/" è collegato a welcome.blade.php view, mentre l' /about URL è collegato a about.blade.php view.

In conclusione, la creazione di layout in Laravel consente di creare un'interfaccia condivisa per la tua applicazione Web e gestire sezioni comuni come header, footer e sidebar. Utilizzando layout e child, è possibile creare interfacce flessibili e gestibili in. views Laravel