Most Popular Tutorials




What is Laravel Blade Views?

Laravel 5.1 introduces the concept of using Blade, a templating engine to design a unique layout. The layout thus designed can be used by other views, and includes a consistent design and structure. When compared to other templating engines, Blade is unique in the following ways −

  • It does not restrict the developer from using plain PHP code in views.
  • The blade views thus designed, are compiled and cached until they are modified.

    • all views are stored in the resources/views directory and the default view for Laravel framework is welcome.blade.php.

    File name : index.php


    Steps for Creating a Blade Template Layout

    Step 1:

    File name : master.blade.php

    <html>
    <head>
    <title>DemoLaravel - @yield('title')</title>
    </head>
    <body>
    @yield('content')
    </body>
    </html>

    Step 2 :-

    In this step, you should extend the layout. Extending a layout involves defining the child elements. Laravel uses the Blade @extends directive for defining the child elements. When you are extending a layout, please note the following points −

  • Views defined in the Blade Layout injects the container in a unique way.
  • Various sections of view are created as child elements.
  • Child elements are stored in layouts folder as child.blade.php

    • File name : index.php

    @extends('layouts.app')
    @section('title', 'Page Title')
    @section('sidebar')
    @parent
    <p>This refers to the master sidebar.</p>
    @endsection
    @section('content')
    <p>This is my body content.</p>
    @endsection

    How to create blade view templates.

    Views

    The File Structure

    File name : index.php

    - app
    -- views
    --- layouts
    ------- default.blade.php
    ------- sidebar.blade.php
    --- pages
    ------- home.blade.php
    ------- about.blade.php
    ------- projects.blade.php
    ------- contact.blade.php
    --- includes
    ------- head.blade.php
    ------- header.blade.php
    ------- footer.blade.php
    ------- sidebar.blade.php

    Includes

    File name : head.blade.php

    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="author" content="itechxpert">

    <title>laravel blade view Layouts</title>

    <!-- load bootstrap from a cdn -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

    header.blade.php

    File name : header.blade.php

    <div class="navbar">
    <div class="navbar-inner">
    <a id="logo" href="/">Single Malt</a>
    <ul class="nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/projects">Projects</a></li>
    <li><a href="/contact">Contact</a></li>
    </ul>
    </div>
    </div>

    footer.blade.php

    File name : footer.blade.php

    © Copyright 2020 itechxpert

    Default Layout and Pages (Home, Contact)

    File name : default.php

    <!doctype html>
    <html>
    <head>
    @include('includes.head')
    </head>
    <body>
    <div class="container">

    <header class="row">
    @include('includes.header')
    </header>

    <div id="main" class="row">

    @yield('content')

    </div>

    <footer class="row">
    @include('includes.footer')
    </footer>

    </div>
    </body>
    </html>

    Home Page and Contact Page

    The home page and contact pages will use the same layouts/default.blade.php. We won't have to reuse the code in the layout or the includes now! Blade lets us use the layout that we just created by using @extends. By creating @section, we create a section that will be used in the layout. Here we use @section('content') and in our layout, all that we type here will be injected in @yield in the layout.

    File name : pages/home.blade.php

    @extends('layouts.default')
    @section('content')
    i am the home page
    @stop

    pages/contact.blade.php

    File name :

    @extends('layouts.default')
    @section('content')
    i am the contact page
    @stop

    Sidebar Layout and Pages

    File name : includes/sidebar.blade.php


    <!-- sidebar nav -->
    <nav id="sidebar-nav">
    <ul class="nav nav-pills nav-stacked">
    <li><a href="#">Fly to the Moon</a></li>
    <li><a href="#">Dig to China</a></li>
    <li><a href="#">Swim Across the Sea</a></li>
    </ul>
    </nav>

    layouts/sidebar.blade.php

    File name : layouts/sidebar.blade.php

    <!doctype html>
    <html>
    <head>
    @include('includes.head')
    </head>
    <body>
    <div class="container">

    <header class="row">
    @include('includes.header')
    </header>

    <div id="main" class="row">

    <!-- sidebar content -->
    <div id="sidebar" class="col-md-4">
    @include('includes.sidebar')
    </div>

    <!-- main content -->
    <div id="content" class="col-md-8">
    @yield('content')
    </div>

    </div>

    <footer class="row">
    @include('includes.footer')
    </footer>

    </div>
    </body>
    </html>

    pages/about.blade.php

    File name : index.php

    @extends('layouts.sidebar')
    @section('content')
    i am the about page
    @stop

    How to print data on blade view page?


    Example 1:-

    Controller

    File name : HomeController.php

    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class HomeController extends Controller
    {

    public function printname()
    {
    $name = "mahtab";

    return view('admin.test-view',['username'=>$name]);
    }
    }

    View

    File name : admin/test-view.php

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Mytitle</title>

    </head>

    <body>

    <h2>Welcome {{$username}}</h2>

    </body>

    </html>

    Example 2:-

    Controller

    File name : HomeController.php

    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class HomeController extends Controller
    {
    public function printname()
    {
    $student = array('name'=>"mahtab");

    return view('admin.test-view',['data'=>$student]);
    }


    }

    view

    File name : test-view.php

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Mytitle</title>

    </head>

    <body>

    <h2>Student List</h2>

    <li>{{$data['name']}}</li>

    </body>

    </html>

    Example 3:-

    Controller

    File name : HomeController.php

    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class HomeController extends Controller
    {

    public function printname()
    {
    $student = array(
    'name' => "mahtab",
    'age' => "36",
    'mobile' => "7838897299",
    'address'=> "delhi"

    );

    return view('admin.test-view',['data'=>$student]);
    }

    }

    view

    File name : test-view.php

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Mytitle</title>

    </head>

    <body>

    <h2>Student List</h2>

    <li>{{$data['name']}}</li>
    <li>{{$data['age']}}</li>
    <li>{{$data['mobile']}}</li>
    <li>{{$data['address']}}</li>

    </body>

    </html>

    Example 4:-

    Using foreach

    File name : HomeController.php

    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class HomeController extends Controller
    {

    public function printname()
    {
    $student = array(
    'name' => "mahtab",
    'age' => "36",
    'mobile' => "7838897299",
    'address'=> "delhi"

    );

    return view('admin.test-view',['data'=>$student]);
    }

    }

    view

    File name : test-view.php

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Mytitle</title>

    </head>

    <body>

    <h2>Student List</h2>
    @foreach($data as $studinfo)
    <li>{{$studinfo}}</li>
    @endforeach



    <h2>Student List</h2>
    @foreach($data as $key => $studinfo)
    <li>{{$key}} : {{$studinfo}}</li>
    @endforeach


    @for($i=0;$i<=5;$i++)
    <p>Hello mahtab</p>
    @endfor </body>

    </html>

    Example 5:-

    using if statement

    File name : HomeController.php

    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

    class HomeController extends Controller
    {

    public function printname()
    {
    $student = array(
    'name' => "mahtab",
    'age' => "36",
    'mobile' => "7838897299",
    'address'=> "delhi"

    );

    return view('admin.test-view',['data'=>$student]);
    }

    }

    view

    File name : test-view.php

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>Mytitle</title>

    </head>

    <body>

    <h2>Student List</h2>
    @if($data['name'] == "mahtab")
    <li>Hello Itechxpert</li>
    @else
    <li>woop woop</li>
    @endif

    </body>

    </html>





    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link

    Ittutorial