Layouts with Laravel 4.2

In this post you’ll see how you can create layouts quickly and easily using the Blade template system built into the Laravel framework.

First, I’m new to Laravel having recently started taking a serious look at it. I’ve been using CodeIgniter for around 5 years and I still like it. However, Laravel has some features that make it hard to ignore. That means I’ll be finding a way to make things work. That might not be the best way, but as I find new ways to do things I’ll write it up.

We’ll begin by installing Laravel into a new project:

composer create-project laravel/laravel --prefer-dist draftr

I’m using Composer because it seems like the most straightforward way to get Laravel installed. There are other methods but I like using Composer.

I’ve called my project drafr because I intend to use it for writing drafts…

Change into your project directory and run:

chmod -R 777 app/storage

So that log files can be written to.

Next, we’ll create a layout and use it as a template. I’m going to use the Bootstrap CSS framework so I’m using one of the starter templates from the Bootstrap web site for quickness.

You’ll need to create a folder in app/views named layouts and them create a file in that folder named master.blade.php.

You should copy the folders from the Bootstrap download into your project’s public folder.

If you’ve worked with template engines or frameworks before you’ll get the idea behind Blade. The file you’ve just created will serve as the main layout for our app. You could of course add other layouts.

Add your main layout HTML code to this file and use one of the Laravel helpers to add the assets like this:

<title>Draftr</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo asset('css/bootstrap.min.css');?>" rel="stylesheet">
<link href="<?php echo asset('css/styles.css');?>" rel="stylesheet">

We can do the same for the JS assets:

<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?php echo asset('js/jquery.js');?>"></script>
    <script src="<?php echo asset('js/bootstrap.js');?>"></script>
  </body>
</html>

Using the layout

Now that you have a layout we can plug it into out controller. Update the app/controllers/HomeController.php file like this:

<?php

class HomeController extends BaseController {

	protected $layout = 'layouts.master';

	public function showWelcome()
	{
		$this->layout->content = View::make('home.start');
	}

Here we have connected our controller with the layout that is stored in app/views/layouts. Also, notice that home.start indicates that the view will be stored in the app/views/home folder.

However,we are getting a little ahead of ourselves here. In the layout we need to mark a section somewhere for our actual content to appear.

That’s easy. You just need to add (in app/views/layouts/master.php) this line:

@yield('content')

Then, in your view:

@yield(‘content’)

Then, in your view:

@extends('layouts.master')

@section('content')
 page content goes here
@stop

A quick recap

Let’s just run back over what we’ve done:

1. Created a new Laravel project via Composer
2. Added the Bootstrap files into the public folder
3. Created a layout in app/views/layouts/master.blade.php
4. Created a view in app/views/home/start.blade.php
5. Added @section area for page content to appear

Finally…

That was painless. And if I’m honest, there certainly feels like more flexibility there. Or, perhaps not flexibility but options. For example, using CodeIgniter to do the same thing does require more code and there isn’t a helper that handles assets in quite the same way.

I can also see the potential for life being easier where partials might be needed. I’ll uncover that in a future post. Next though, I’ll deal with adding some functionality with a database connection and using forms.