Learn How To Create Blade Template Layout Using Laravel

admin_img Posted By Bajarangi soft , Posted On 23-09-2020

Blade is the simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. In fact, all Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade view files use the .blade.php file extension and are typically stored in the resources/views directory.

Blade Templates in Laravel

1.Template Inheritance

Defining A Layout

Two benefits of using Blade are template inheritance and sections. For Example(1)

<!-- Stored in resources/views/app.blade.php -->
<html>
<head>
    <title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the main page
@show

<div class="container">
    @yield('content')
</div>
</body>
</html>


As above example, this file contains typical HTML mark-up. However, take note of the @section and @yield directives. The @section directive, as the name implies, defines a section of content, while the @yield directive is used to display the contents of a given section.


Extending A Layout

When defining a submain view, use the Blade @extends directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using @section directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using @yield:

<!-- Stored in resources/views/submain.blade.php -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
@parent

<p>This is appended to the main sidebar.</p>
@endsection

@section('content')
<p>This is my body content.</p>
@endsection

In this example, the sidebar section is utilizing the @parent directive to append content to the layout's sidebar. The @parent directive will be replaced by the content of the layout when the view is rendered.



Displaying Data:Display data passed to your Blade views by wrapping the variable in curly braces and also called Blade echo statement.

For Example(1)

Hello, {{ $name }}.


Displaying Unescaped Data :default, Blade {{ }} statements are automatically sent through PHP's htmlspecialchars function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:

Hello, {!! $name !!}.


Rendering JSON: pass an array to your view with the intention of rendering it as JSON in order to initialize a JavaScript variable. For example:

<script>
    var app = <?php echo json_encode($array); ?>;
</script>


2.Control Structures

1.If Statements in blade file if statements using the @if@elseif@else, and @endif directives.

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif
For convenience, Blade also provides an @unless directive:
@unless (Auth::check())
You are not signed in.
@endunless


In addition to the conditional directives
@isset($records)
    // $records is defined and is not null...
@endisset

@empty($records)
    // $records is "empty"...
@endempty


2.Switch Statements in blade file loops Switch statements can be constructed using the @switch@case@break@default and @endswitch directives:                                       

@switch($i)
  @case(1)
    First case...
  @break

  @case(2)
   Second case...
  @break

  @default
  Default case...
@endswitch


3.Loop Statements in blade file

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
      <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
     <li>{{ $user->name }}</li>
@empty
     <p>No users</p>
@endforelse

@while (true)
   <p>I'm looping forever.</p>
@endwhile


The Loop Variable

@foreach ($users as $user)
@if ($loop->first)
    This is the first iteration.
@endif
@if ($loop->last)
   This is the last iteration.
@endif
   <p>This is user {{ $user->id }}</p>
@endforeach


The $loop variable also contains a variety of other useful properties:
Property Description
$loop->index   The index of the current loop iteration (starts at 0).
$loop->iteration The current loop iteration (starts at 1).
$loop->remaining The iterations remaining in the loop.
$loop->count The total number of items in the array being iterated.
$loop->first Whether this is the first iteration through the loop.
$loop->last Whether this is the last iteration through the loop.
$loop->even Whether this is an even iteration through the loop.
$loop->odd Whether this is an odd iteration through the loop.
$loop->depth The nesting level of the current loop.
$loop->parent When in a nested loop, the parent's loop variable.


3.Comments Blade also allows you to define comments in your views. However, unlike HTML comments, Blade comments are not included in the HTML returned by your application:

{{-- This comment will not be present in the rendered HTML --}}

Related Post