close

Building Layouts with Laravel - Creating Flexible and Maintainable Interfaces

In Laravel, layout plays a significant role in building the user interface for a web application. A layout represents the overall structure of a web page, including common sections like the header, footer and sidebar. In this article, we will explore how to build layouts in Laravel to create flexible and maintainable interfaces.

Firstly, let's create a basic layout for our website. Start by creating a file named app.blade.php in the resources/views/layouts directory. This file will serve as the main layout for the entire website.

Here is an example content for the 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 this layout, we use the @yield directives to define dynamic sections within the layout. For example, @yield('title') allows child views to override and set the page title. Similarly, @yield('content') allows child views to insert the main content of the page.

Once the layout is created, we can create child views that utilize this layout. For example, to create an about page with a similar layout, create a file named about.blade.php in the resources/views directory. This file will extend the app.blade.php layout and define specific content for the about page:

@extends('layouts.app')

@section('title', 'About')

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

In the above example, we use the @extends directive to inherit the app.blade.php layout. Next, we use the @section directive to define the specific content for the title and content sections of the page.

Finally, we need to define the routes to link the URLs to the respective views.

For example, in the routes/web.php file, you can add the following routes:

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

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

In this example, the "/" URL is linked to the welcome.blade.php view, while the /about URL is linked to the about.blade.php view.

In conclusion, building layouts in Laravel allows you to create a shared interface for your web application and manage common sections like the header, footer and sidebar. By using layouts and child views, you can build flexible and maintainable interfaces in Laravel.