How to use laravel layout Reviewed by Momizat on . Blade is a powerful easy to use template with Laravel. Some usefull key or function which is used in given below template. @extends('layouts.master') extends th Blade is a powerful easy to use template with Laravel. Some usefull key or function which is used in given below template. @extends('layouts.master') extends th Rating: 0

How to use laravel layout

Blade is a powerful easy to use template with Laravel.

Some usefull key or function which is used in given below template.

  • @extends(‘layouts.master’) extends the master layout
  • @section(‘title’, ‘Users List’) sets the value of the title section.
  • @include(‘layout.menu’) used to load a sub view from within a view.
  • @yield(‘contents’) place holder for the content in the view that we will load from the Front controller
  • @section(‘content’) defines the content section and adds paragraph content to the content section
  • @endsection ends the current section
  • {{asset(‘css/style.css’)}} calls the asset helper function and pass in css/style.css as the parameter. The asset function will return the path of the public folder and append css/style.css at the end
  • We need to create a default layout like master layout

    Goto:-projectname/resources/views/layout/master.blade.php

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
            <title>@yield('title')</title>
    
            <!-- Bootstrap -->
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
            <link href="{{asset('css/style.css')}}" rel="stylesheet">
    
    
            <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
            <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
            <!--[if lt IE 9]>
              <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
              <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
            <![endif]-->
        </head>
        <body>
    
            <div class="container-fluid">
                @if(Session::has('message'))
                <div class="row ">
                    <div class="alert {{ Session::get('alert-class') }}">{{ Session::get('message') }}</div>
                </div>  
                @endif
                @include('layout.menu')
                @yield('contents')
            </div>
    
            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <!-- Include all compiled plugins (below), or include individual files as needed -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
    </html>
  • Then create menu layout.which is included in master layout.

    Goto:-projectname/resources/views/layout/menu.blade.php

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">{{$projectName}}</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">{{$name}}</a></li>
                        <li><a href="#">Page 1-2</a></li>
                        <li><a href="#">Page 1-3</a></li>
                    </ul>
                </li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>
    
  • Then go to controller view or child layout

    projectname/resources/views/admin/list.blade.php

    @extends('layout.master')
    @section('title','Users List')
       @section('contents')     
                <div class="container">
                    <div class="pull-right row ">
    
                        <a href="{{ url('/users/add') }}">Add</a>
                    </div>
                    
    
                    <div class="row">
    
    
                        <table class="table">
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Artist</th>
                                <th>&nbsp;</th>
                            </tr>
    
                            <?php foreach ($users as $user): ?>
                                <tr>
                                    <td><?php echo $user->id; ?></td>
                                    <td><?php echo $user->title; ?></td>
                                    <td><?php echo $user->artist; ?></td>
                                    <td>
                                        <a href="{{ url('/users/edit',[$user->id]) }}">edit</a>
                                        <a href="{{ url('/users/delete',[$user->id]) }}">delete</a>
                                    </td>
                                </tr>
    
                            <?php endforeach; ?>
                        </table>
                        <?php echo $users->appends(['sort' => 'id'])->render(); ?>
                    </div>
                    <?php //echo $users->render(); ?>
                    <?php //echo $users->appends(['sort' => 'votes'])->render(); ?>
                </div>
    
            @endsection
    

Leave a Comment

© 2014 Powered By