Laravel 5.3 Tutorial Part-5: Laravel Blade Template

About Blade:

Blade is the default template engine for Laravel (since Laravel 2 in 2011). The syntax is originally inspired by the ASP.net Razor syntax and provides a cleaner way to write your templates. The main benefit of using Blade instead of plain PHP is to make it easier to re-use templates and split templates.

From the Laravel 5.3 docs:

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. All Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. [..] Two of the primary benefits of using Blade are template inheritance and sections. Blade view files use the .blade.php file extension and are typically stored in the resources/views directory.

 Create and use your first Blade layout:

File struture :-
– resources
— views
— layout
—- default.blade.php
—- header.blade.php
—- footer.blade.php
—- sidebar.blade.php
— pages
—- home.blade.php
—- about.blade.php

Step 1: Create a default template and save it at resources/views/layouts/default.blade.php.


<!doctype html>
<html>
<head>
<!-- my head section goes here -->
<!-- my css and js goes here -->
<title>@yield('title')</title>
<style>

div.container {
width: 600px;
margin:0 auto;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
width:500px;
}
.sidebar{
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
background-color: #357b33;
height:300px;
}
.contents{

margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<header> @include('layouts.header') </header>
<div class="sidebar"> @include('layouts.sidebar') </div>
<div class="contents"> @yield('content') </div>
<footer> @include('layouts.footer') </footer>
</div>
</body>
</html>

Step 2: Create a new file in resources/views/layouts/header.blade.php


<ul>
<li><a href="{{URL::to('/')}}">Home</a></li>
<li><a href="{{URL::to('/about')}}">About</a></li>
</ul>

Step 3: create a new file in resources/views/layouts/footer.blade.php


<div id="footer">This is Footer</div>

Step 4: create a new file in resources/views/layouts/sidebar.blade.php


<h2>This is Sidebar</h2>

Step 5: create a new folder in resources/views/pages
Step 6: create a new file in resources/views/pages/home.blade.php


@extends('layouts.default')
@section('title', 'W3Programmers Home Page')
@section('content')
<h2>This is my home page</h2>
@stop

Step 7: create a new file in resources/views/pages/about.blade.php


@extends('layouts.default')
@section('title', 'w3Programmers About Page')
@section('content')
<h2>This is about page</h2>
@stop

some of code means we are using: –

  • @yield is used to display the value
  • @section is used to define a section named
  • @endsection is used to end section
  • @include :- to render a view into another view. The rendered view will automatically inherit all of the data from the current view

Now we need to link these pages in laravel routing


Route::get('/', function () {
return view('pages.home');
});
Route::get('/about', function () {
return view('pages.about');
});

Visit the following URL to view the example.
http://localhost:8000/

Laravel Blade Templating

Laravel Blade Templating

 

Conditional Statements:

Laravel provides @if, @elseif, @else, @endif, @unless and @endunless statements. Create a function called student in Your homeController class as like:


<?php

namespace test\Http\Controllers;

use Illuminate\Http\Request;

use test\Http\Requests;

class homeController extends Controller
{
//
public function index(){
$name="Masud Alam";
$date=date('Y-m-d');
return view('home',compact('name', 'date'));

}

public function student($age=25){
return view('age')->with(['age'=>$age]);

}
}

Change your routes.php like this:

Route::get('/student', [email protected]');

Now Create age.blade.php file in resources/views/ like this:

@extends('layouts.default')
@section('title', 'w3programmers: CSS Fixed Layout')

@section('sidebar')

@endsection

@section('content')
@if ($age>0 && $age<=15)
<p>You're child</p>
@elseif ($age>15 && $age<=25)
<p>You're Young</p>
@elseif ($age > 25 && $age <= 40)
<p>You're Adult</p>
@else
<p>You're Old Man!</p>
@endif
@unless ($age <=0)
<p>you are ...</p>
@endunless
@endsection

Visit the following URL to view the example.
http://localhost:8000/student

Larvel Blade if elseif else and unless example

Larvel Blade if elseif else and unless example

 

Loops:

Laravel provides @for, @foreach, @forelse and @while loops. Change student function in your homeController Class as like:


<?php

namespace test\Http\Controllers;

use Illuminate\Http\Request;

use test\Http\Requests;

class homeController extends Controller
{
//
public function index(){
$name="Masud Alam";
$date=date('Y-m-d');
return view('home',compact('name', 'date'));

}

public function student($age=4){

$students=['Tawhid','Dipu','Rocky','Mainul'];

return view('students')->with(['age'=>$age,'students'=>$students]);

}
}

Now Create students.blade.php file in resources/views/ like this:


@extends('layouts.default')
@section('title', 'w3programmers: CSS Fixed Layout')

@section('sidebar')
@endsection
@section('content')
@for ($i = 0; $i < 3; $i++)
{{ $i }}&nbsp;
@endfor
@foreach ($students as $student)
<p> {{ $student }}</p>
@endforeach
<ul>
@forelse ($students as $student)
<li>{{ $student }}</li>
@empty
<p>No Number</p>
@endforelse
</ul>
@while ($age > 0 && $age--)
<p>Your Age is {{ $age }}</p>
@endwhile
@endsection

Visit the following URL to view the example.
http://localhost:8000/student

Laravel Blade for, foreach, endforeach, forelse end forelse example

Laravel Blade for, foreach, endforeach, forelse end forelse example

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor’s degree in Engineering from State University Of Bangladesh, I’m also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i’m a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I’m also a Course Instructor of ZCE PHP 5.3 Certification and professional web development course at IBCS-PRIMAX Software (Bangladesh) Limited – a leading Training Institute in the country.
Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *


*