How To Create Layout In Laravel

How To Create Layout In Laravel

You can create a layout by defining a Blade template file that contains the basic structure and markup for your application’s pages, and then using that template file to define the layout for your views.

Here’s an example of how you can create a basic layout in Laravel:

  1. Create a new Blade template file in the resources/views/layouts directory of your Laravel application. For example, you could create a file called app.blade.php.
  2. Define the basic HTML structure for your application’s pages in the template file. For example, you could include a header, a navigation menu, a main content area, and a footer:
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- Header content -->
    </header>

    <nav>
        <!-- Navigation menu content -->
    </nav>

    <main>
        @yield('content')
    </main>

    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

Note the use of the @yield directive to define sections of the template that can be filled in by your views. In this example, we’ve defined two yield sections: title and content.

  1. Create a new view file that extends the layout template. For example, you could create a file called welcome.blade.php:
@extends('layouts.app')

@section('title', 'Welcome')

@section('content')
    <p>Welcome to my Laravel application!</p>
@endsection

Note the use of the @extends directive to specify the layout template that this view should use. We’ve also used the @section directive to define the content that should be inserted into the title and content yield sections of the template.

  1. Render the view using the view helper function in your controller or route:

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

When you load the page at the root URL of your application, Laravel will use the welcome.blade.php view file to render the page content, using the app.blade.php layout template to provide the overall structure and markup for the page.Regenerate response

Leave a Reply