Create page with Blade Template Engine in Laravel

7 years ago
Read Time: 2 minutes
by Learn Infinity
Leave a comment

Laravel present easy and very strong templating engine. This templating engine connects one or more templates which are made by inheritance and part to produce required views page.

Blade template has its own control construction like loops and conditional statements. Inheritance and Section are main benefits of using Blade template engine.

To make Blade format, essentially make your view document with .blade.php extension rather than .php and it is regularly saved in the resources/views folder.

Want to learn Laravel installation instruction here

Step 1: Prepare Layout Page
All blade files must be saved with the .blade.php extension. In this segment, we will make a page layout that all pages will use it. The following code for defining a page layout.

create new folder my_layouts in /resources/views/
create a new file layout.blade.php in /resources/views/my_layouts/layout.blade.php
add the following code to layout.blade.php

<!DOCTYPE html>
<html>
    <head>
        <title>@yield('page_title')</title>
 
        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
    </head>
    <body>
        @section('page_menu')
            This is the master sidebar.
        @show
        <div class="container">
            @yield('page_content')
        </div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>@yield('page_title')</title>

</head>

<body>

@section('page_menu')

This is the master sidebar.

@show

@yield('page_content')

</div>

</body>

</html>

@yield(‘page_title’) is used to veiw the value of the page title
@section(‘page_menu’) is used to define a section named page menu
@show is used to display the html contents of a section
@yield(‘page_content’) is used to view the main page contents details

Step 2: Utilizing layout page to create a display page with content. Following code use to create a page with original content using our layout and save it as tasks.blade.php. Here @extends() use to include the layout page with this page and @section and @endsection key use to define a what kind of content going to display into the page. {{ }} double opening curly braces and double closing curly braces are used to display the value of the variable.

@extends('my_layouts.layout')

@section('page_title', 'Learn Infinity')

@section('page_menu')
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact Us</li>
    </ul>
@endsection

@section('page_content')
    <p>Here only the page main content are going to place. </p>
     <div class="content">
        <div class="title">Laravel 5 - {{$page_name}}</div>
        @if (count($tasks)>0)
             <p>Total Task List is <b>{{count($tasks)}} </b></p>
        @else
             <p>There is no task in list.</p>
        @endif
     </div>
     <ul>
          @if(count($tasks)>0)
              @foreach($tasks as $task)
                  <li>{{ $task }}</li>
              @endforeach
          @endif
      </ul>
@endsection

@extends('my_layouts.layout')

@section('page_title', 'Learn Infinity')

@section('page_menu')

<ul>

<li>About</li>

<li>Contact Us</li>

</ul>

@endsection

@section('page_content')

<p>Here only the page main content are going to place. </p>

<div class="title">Laravel 5 - {{$page_name}}</div>

@if (count($tasks)>0)

<p>Total Task List is <b>{{count($tasks)}} </b></p>

@else

<p>There is no task in list.</p>

@endif

</div>

<ul>

@if(count($tasks)>0)

@foreach($tasks as $task)

@endforeach

@endif

</ul>

@endsection

Step 3: Define a route for the page in routes.php. Here we can declare and define a variable and array with a value for the page required details. compact() method use to attach the variable with view page.

Route::get('/tasks', function () {
    $page_name = "Task list details";
    $tasks = ["Task1", "Task2", "Task3", "Task4" , "Task5" , "Task6" , "Task7" ];
 
    return view('tasks', compact('page_name', 'tasks'));
});

Route::get('/tasks', function () {

$page_name = "Task list details";

$tasks = ["Task1", "Task2", "Task3", "Task4" , "Task5" , "Task6" , "Task7" ];

return view('tasks', compact('page_name', 'tasks'));

});

Final output as,

Learn Infinity

Learn Infinity is the most famous Programming & Web Development blog. Our principal is to provide the best online tutorial on web development. We execute the best tutorials for web experts this will help developers, programmers, freelancers and proving free resource you can download or preview the tutorials.