Learning Laravel Views

learning laravel views

Laravel like any php framework separate visual aspects of your application from business logic .Before we get started to explore templating syntax . I will show you how to render view files from a route or controller .

/* render app/views/hello.php */
Route::get('/', function()
{
	return View::make('hello');
});

As you can see ,I used View::make('hello') which will render app/views/hello.blade.php .Now let’s explore templating syntax .

Output Data

You probably use echo function to output data in PHP .In laravel ,just surround variables by curly brackets .

<div class="welcome">
 <h1>{{ date('d/m/y') }}</h1>
</div>

Control Structures

Laravel has alternative syntax for control structures .Now i will pass array of data to app/views/posts.blade.php .

/* app/routes.php */
Route::get('posts', function()
{
 $posts=array(
     'total'=>'2',
     'data'=>array(
         'laravel routes'=>array(
             'date'=>'2/24/2014',
             'author'=>'Mark',
             'category'=>'php'
         ),
         'laravel views'=>array(
             'date'=>'2/22/2014',
             'author'=>'John',
             'category'=>'php'
         )
         //.....
     )
     //...
 );
	return View::make('posts',array('posts' => $posts,'var' => 0));
});

These data will be available app/views/posts.blade.php .Let’s explore laravel control structure syntax .

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>
   Posts
 </title>
</head>
<body>
 {{-- output data --}}
 <h1>{{ $posts['total'] }}</h1>
 
 {{-- control structures --}}
 @if ($posts['total'] > 3)
 <p>Posts more than 3</p>
 @elseif ($posts['total'] == 3)
  <p>Posts equal 3</p>
 @else
 <p>Posts less than 3</p>
 @endif
 
 @foreach ($posts['data'] as $key=>$value)
 <p>Post Title :{{ $key }}</p>
 <p>Date :{{ $value['date'] }}</p>
 <p>Author :{{ $value['author'] }}</p>
 <p>Category :{{ $value['category'] }}</p>
 <br/><br/>
 @endforeach
 
 @for ($i = 0;$i < $posts['total'];$i++)
 <p>{{ $i }}</p>
 @endfor
 
 @while ($var == 1)
 <p>stop loop</p>
 @endwhile
</body>
</html>

Simple Templating

You could break views into separate files for organisational purposes and minimizing repetition .For example ,if page header don’t change in your views files ,you could create file for header app/views/header.blade.php .

<head>
 <meta charset="UTF-8">
 <title>
  Posts
 </title>
</head>

Now you can include this header in other view files for example app/views/posts.blade.php like that .

<html lang="en">
@include('header')
<body>
</body>
</html>

Advanced Templating

Let’s imagine you create a portfolio with two layouts (left sidebar layout and right sidebar layout) and overall page structure of two layouts is similar except two sections (header and projects div) .Let’s define these words into code .

<!-- app/views/layouts/LeftSidebar.blade.php -->
<head>
 <meta charset="UTF-8">
 <title>
  Portfolio
 </title>
 @section ('header')
 <link rel='stylesheet' href='style.css' />
 @show
</head>
<body>
 <div class='leftsidebar'>
  @yield('projects')
 </div>
</body>

<!-- app/views/layouts/RightSidebar.blade.php -->
<head>
 <meta charset="UTF-8">
 <title>
  Portfolio
 </title>
 @section ('header')
 <link rel='stylesheet' href='style.css' />
 @show
</head>
<body>
 <div class='rightsidebar'>
  @yield('projects')
 </div>
</body>

We created two layouts and defined the two sections which change .we used @yield() method to create a section that we can fill with content later .The other method @section() is similar to @yield() except that the content provided between @section and @show tags used as default value for header section .

Now let’s create two pages .One for each layout .

@extends('layouts.leftsidebar')

@section('header')
  <link rel='stylesheet' href='anotherstylesheet.css' />
@stop

@section('projects')
<h3>Left sidebar projects</h3>
@stop

@extends('layouts.rightsidebar')

@section('projects')
<h3>Right sidebar projects</h3>
@stop

The complete source code of two pages will look like this .

<!-- app/views/layouts/leftsidebar.blade.php -->
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>
  Portfolio
 </title>
   <link rel='stylesheet' href='anotherstylesheet.css' />
</head>
<body>
 <div class='leftsidebar'>
  <h3>Left sidebar projects</h3>
 </div>
</body>
</html>

<!-- app/views/layouts/rightsidebar.blade.php -->
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>
  Portfolio
 </title>
  <link rel='stylesheet' href='style.css' />
 </head>
<body>
 <div class='rightsidebar'>
  <h3>Right sidebar projects</h3>
 </div>
</body>
</html>

As you can see ,when you provide content for header section ,this content will override default value .When you don’t provide value to header section ,default value will be used .What if i need to provide value for header section and insert default value ..! just use @parent like that .

@extends('layouts.leftsidebar')

@section('header')
  @parent
  <link rel='stylesheet' href='anotherstylesheet.css' />
@stop

@section('projects')
<h3>Left sidebar projects</h3>
@stop

So source code will look like this .


<!-- app/views/layouts/leftsidebar.blade.php -->
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>
  Portfolio
 </title>
    <link rel='stylesheet' href='style.css' />
    <link rel='stylesheet' href='anotherstylesheet.css' />
</head>
<body>
 <div class='leftsidebar'>
  <h3>Left sidebar projects</h3>
 </div>
</body>
</html>

Comments

You can insert notes in your views using blade comments syntax like that .

{{-- you comment here --}}

3 comments.

  1. Hi, I really appreciated your tutorial. Very clear, still I have a question about views, what about when you need to share different stylesheets for the same view applies in the same content?
    Example: you have a @section(‘content’) and in this piece of code you need to apply 2 different images bg and styles over these html structure. Do I need to construct an @extends(layout.style1) and another for the different style(style2)?
    I’m very confused about the subject. Anyways your tutorial was a light in the tunnel for me. Thanks in advanced

    • No, You can set variables to be used in rendered template. Every time you build templates you can consider areas as dynamic (changes according to user defined options or according to page…etc). You should understand how to set variables to be used across template. For example

      Route::get('template', function()
      {
         // render app/views/template.blade.php with a little vars come from database or hardcoded.
          return View::make('template',array('styles' => array('bg_image'=>'', 'skin'=>'')));
      }
      

      Then you can use $styles['bg_image'] in your templates. You can use these variables within control structure. So you should decide which part in you app views will be dynamic (a complete section or just some elements inside a section). And view variables will help you in both cases. Thanks.

Leave a comment.

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