Laravel Views Tutorial

This is a brief tutorial on how to create Views with Laravel 4. Views make up the “V” in the MVC or Model View Controller.

View File Formats

View files will have a .php file extension or a .blade.php file extension if you use the Blade templating engine which I’ll explain later in this tutorial. All views live in app/views and sub-directories you can create in app/views.

A Basic View Example

A very basic view could consist of some HTML and a variable such as in the following example file we will name welcome.php and it goes in app/views/. Here is the syntax:

<html>
    <body>
        <h1>Welcome <?php echo $name; ?></h1>
    </body>
</html>

Passing Data to a View

You should notice the PHP echo statement in the view code. We can now display the view in a browser and  pass a name to the view’s $name variable like this:

Route::get('welcome', function()
{
    return View::make('welcome', array('name' => 'Ian'));
});

Now when you visit example.com/yourapp/welcome, you will see a welcome message with the name you passed to your view in the route. That’s a very basic view implementation. Next we will get a little more complicated.

Share Data with all Views

If you want a piece of data to be available to all views in your application, simply declare it in routes.php like this:

View::share('name', 'Adam');

Then anytime the name variable is called in a view with $name, the name you set, Adam in this case, will be displayed. This could be handy for a logged in user for example.

Views and Templates

Very often, you will want to use a template with a View and Laravel has incorporated the Blade Templating Engine just for that purpose.

BLADE Templates

The Blade Templating engine is driven by sections and template inheritance. All view files that use Blade will have the .blade.php file extension telling Laravel that the file is using the Blade template engine. Blade Views are also held in the app/views folder of your application and sub-directories of app/views.

Three Steps to Developing a Blade Template View

Step 1:

To help you understand both Sections and Inheritance, we will look at a Blade template view as an example. First, let’s add a directory to app/views and call it layouts. So we now have app/views/layouts as a folder to keep our Blade layout templates. Next, create a new file called app/views/layouts/master.blade.php. This will be our master layout we may use for several pages, so it will be flexible. Copy the following lines of code into your master.blade.php file:

<html>
<body>
<nav>
@section(‘topnav’)
<a href=”/”>Home</a>
<a href=”/about”>About</a>
<a href=”/contact”>Contact</a>
@show
</nav>

<div>
@yield(‘content’)
</div>

<div>
@section(‘sidebar’)
Master sidebar content in all sidebars….<br />
@show
</div>

<div>
@section(‘footer’)
Master footer content that gets overwritten so you won’t see this in this example when viewing the “aview” page in a browser….<br />
@show
</div>

</body>
</html>

Step 2:

Now make another file and put this on directly in app/views and call it app/views/anypage.blade.php and add this:

@extends(‘layouts.master’)
 
@section(‘content’)
  <p>This will be overwrite</p>
@stop
 
@section(‘sidebar’)
  @parent
   
  <a href=”#”>Section specific links will get appended…</a>
@stop

 

Step 3:

Now step 3 is to add our route to routes.php. Copy the following to the end of your routes.php file:

Route::get(‘aview’, function()
{
    return View::make(‘anypage’);
});

3 Steps Explained

  1. In step one we made our master.blade.php template file which is our master layout for several pages in our application. We used nav and div containers. nav could be a div, they act the same. You will want to add CSS style classes to these in your actual application. We left CSS out for simplicity of learning just what you need to know. It is assumed you know basic HTML, PHP and CSS if you are learning a template engine and a PHP framework. In master.blade.php we used a few different methods of displaying content for learning purposes. First we created a section with: @section(‘topnav’) then we added some content that will show on all pages in the top nav. We closed the section with @show. @show is the common method for closing a section in a layout file. We will use something else for closing sections in views as you’ll see below. Next we showed how to use yield to “yield” the content directly from the view, so a yield statement in a layout file is simply a placeholder for content which may be defined in our view as you’ll see in step 2. After the yield example is another section example. This section, for the sidebar in our example, is designed to be static content that won’t change in most pages, but could be overridden if necessary. FInally in our footer section we demonstrate content that is intended to be overwritten, but if it wasn’t, you would see the default content that is there. You’ll see how overwriting is done in the next step.
  2. Step 2 is where we define the view which extends the master template from step 1. Here you can see that first we tell Laravel that we are extending the master layout with extends(‘layouts.master’). Then we skip the nav because we are not changing anything there. That’s why the first thing you see after extending the master layout is the content section that is declared with section(‘content’) then followed by some HTML and ends with @stop. Notice the use of @stop in our view instead of @show like we used in our layout file to end a section. The main difference between @stop and @show is that @show yields the content immediately. They both end the session, but @show ends and shows the content at the same time. Next, you should notice the sidebar section has @parent in it. @parent indicates to Laravel’s Blade that we intend to append to the content in the sidebar. Therefore whatever HTML is after @parent and before @stop will show up after the default content in the layout file from step 1. After that, I go on to demonstrate what happens by defualt in a section declared in a view without using @parent. WIthout using @parent, the default behavior of a section in a view when extending a layout is to overwrite the existing layout’s content as you will see happen if you run the route in the next step, step 3.
  3. Finally in step 3, we declare our route in routes.php. This is simple and you’ve probably done it a hundred times by now if you are this far along in learning Laravel already, but just to be sure, all you do is include the file name of the file in our app/views folder from step 2 above without the .blade.php file extension in your make declaration when coding the route. In this case, we named our route “aview”, so we get to the page by visiting example.com/appname/aview in a browser. Then the file name we put in the app/views folder was anypage.blade.php, so we used return View::make(‘anypage’); in our route next.

Summary

That’s basically all there is to it. If you can practice and master those three steps you are well on your way to creating pages with Laravel and Blade templates. Good luck.

You can see all of my Laravel tutorials by CLICKING HERE.