Hello there, fellow Laravelians!

In the Previous Tutorial we have learned how to create models and routes for our Blog application. In this tutorial I will explain how we will make the screens that the user sees, also called “Views”.

While creating views for our blog, we will learn how to use Laravel’s Blade templating engine, Blade templates, Binding data to views and we will use Twitter Bootstrap as our CSS framework.

Let’s get started!

For our blog application we will need three views:

  • index page that shows all posts (also if the user is logged in – show delete button for each of the posts)
  • login page (shows a form to log the user in)
  • create new post page (few text fields and a button )

In tutorial part 2 I showed how to sketch out those views on paper, then I took those sketches and built simple static HTML pages using Bootstrap framework to get the look I wanted. This is just to assist me later when I build the actual views using Laravel. How to use Twitter Bootstrap framework and use HTML is beyond the scope of this tutorial, so you need to catch up on that by yourself.

A few words about how Laravel works with the views.
In Laravel applications views are stored in application/views folder. Views that output dynamic data should end with “.blade.php ” file extension. Blade templating engine is very easy to understand, please refer to documentation to learn more about some of the basics : http://laravel.com/docs/views/templating

We will be using one Blade layout that will have our header and footer (things that don’t change throughout different pages) and three Blade views that will output the content and will be placed in between header and footer in the Blade layout – login form, index of all posts and create new post form.


First, let’s create the Blade layout.

We will be using Bootsrapper Laravel Bundle to make our application use Bootstrap. So the first step for you in creating the layout is to get Bootstrapper installed in your application.
You can either follow the instructions on http://bundles.laravel.com/bundle/bootstrapper or watch my screencast on udemy.com/develop-web-apps-with-laravel-php-framework/

When you have Bootsrapper Bundle installed into your application and publish its assets(according to the instructions), create a folder “templates” inside your “views” folder and create a file called “main.blade.php“. In that file copy and paste the content :

[sourcecode language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Blog, from you</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
{{ Asset::container(‘bootstrapper’)->styles(); }}
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
{{ Asset::container(‘bootstrapper’)->scripts(); }}
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="{{ URL::base() }}">Blog</a>
<div class="btn-group pull-right">

@if ( Auth::guest() )
<a class="btn" href="{{ URL::to(‘login’)}}">
<i class="icon-user"></i> Login
</a>
@else
Welcome, <strong>{{ HTML::link(‘admin’, Auth::user()->username) }} </strong> |
{{ HTML::link(‘logout’, ‘Logout’) }}
@endif

</div>
<div class="nav-collapse">
<ul class="nav">
<li><a href="{{ URL::base() }}">Home</a></li>
@if ( !Auth::guest() )
<li><a href="{{ URL::to(‘admin’) }}">Create New</a></li>
@endif
</ul>
</div><!–/.nav-collapse –>
</div>
</div>
</div>

<div class="container">
<div class="row">
@yield(‘content’)
</div>
@yield(‘pagination’)
</div><!–/container–>

<div class="container">
<footer>
<p>Blog &copy; 2012</p>
</footer>
</div>
</body>
</html>
[/sourcecode]
Save the file now and close it.

Here is some description of what various elements do :

These two lines insert Bootstrapper’s css and javascript into our layout
[sourcecode language="html"]
{{ Asset::container(‘bootstrapper’)->styles(); }}
{{ Asset::container(‘bootstrapper’)->scripts(); }}
[/sourcecode]

This checks if the user is logged in and outputs a different button in that case, otherwise show another button
[sourcecode language="html"]
@if ( Auth::guest() )

@else

@endif
[/sourcecode]

And this is where the content is actually outputted and pagination links created below the content
[sourcecode language="html"]
<div class="container">
<div class="row">
@yield(‘content’)
</div>
@yield(‘pagination’)
</div><!–/container–>
[/sourcecode]

More information on Layouts is in Laravel’s documentation: http://laravel.com/docs/views/templating#blade-layouts

Does it make sense to you? If not, please let me know in the comments.


Login view

For the login view, you need to create a file in “views” directory and call it “login.blade.php

Copy and paste this code into login.blade.php file you just created:
[sourcecode language="html"]
@layout(‘templates.main’)
@section(‘content’)
<div class="span4 offset4 well">
{{ Form::open(‘login’) }}
<!– check for login errors flash var –>
@if (Session::has(‘login_errors’))
{{ Alert::error("Username or password incorrect.") }}
@endif
<!– username field –>
<p>{{ Form::label(‘username’, ‘Username’) }}</p>
<p>{{ Form::text(‘username’) }}</p>
<!– password field –>
<p>{{ Form::label(‘password’, ‘Password’) }}</p>
<p>{{ Form::password(‘password’) }}</p>
<!– submit button –>
<p>{{ Form::submit(‘Login’, array(‘class’ => ‘btn-large’)) }}</p>
{{ Form::close() }}
</div>
@endsection
[/sourcecode]

Here we are using templates.main layout and into the content section of the layout we insert a simple form. We also output errors if there are any login errors.


Index view

For the index view you need to create a file in “views” folder and call it “home.blade.php“.
To display all blog entries we will use @foreach blade loop and pagination on the bottom of the page.
Copy and paste the following sourcecode into your home.blade.php” file:
[sourcecode language="html"]
@layout(‘templates.main’)
@section(‘content’)
@if (Session::has(‘success_message’))
<div class="span8">
{{ Alert::success("Success! Post deleted!") }}
</div>
@endif
@foreach ($posts -> results as $post)
<div class="span8">
<h1>{{ $post->post_title }}</h1>
<p>{{ $post->post_body }}</p>
<span class="badge badge-success">Posted {{$post->updated_at}}</span>
@if ( !Auth::guest() )
{{ Form::open(‘post/’.$post->id, ‘DELETE’)}}
<p>{{ Form::submit(‘Delete’, array(‘class’ => ‘btn-small’)) }}</p>
{{ Form::close() }}
@endif
<hr />
</div>

@endforeach
@endsection

@section(‘pagination’)
<div class="row">
<div class="span8">
{{ $posts -> links(); }}
</div>
</div>
@endsection
[/sourcecode]

Great ! One last view and we are all done with our views and will be able to see our blog coming alive!

Create New Post view.

For the “create new post” view we will create a file in “views” folder and call it “new.blade.php“. This view contains three things in a form, hidden post_author field, post_title text field and post_body textarea where the author will type up the title and the body of the blog post.

Copy and paste the following source code into your new.blade.php file in the “views” folder:
[sourcecode language="html"]
@layout(‘templates.main’)
@section(‘content’)
<div class="span8">
<h2>Creating new post</h2>
<hr />
{{ Form::open(‘admin’) }}
{{ Form::hidden(‘post_author’, $user->id) }}
<!– title field –>
<p>{{ Form::label(‘post_title’, ‘Post Title’) }}</p>
{{ $errors->first(‘post_title’, Alert::error(":message")) }}
<p>{{ Form::text(‘post_title’, Input::old(‘post_title’)) }}</p>
<!– body field –>
<p>{{ Form::label(‘post_body’, ‘Post Body’) }}</p>
{{ $errors->first(‘post_body’, Alert::error(":message")) }}
<p>{{ Form::textarea(‘post_body’, Input::old(‘post_body’)) }}</p>
<!– submit button –>
<p>{{ Form::submit(‘Create’) }}</p>
{{ Form::close() }}
</div>
@endsection
[/sourcecode]


The three views

Index page :


Login page :


Create New Post page:



Congratulations!

That should be it! We are done with the views, and at this point our application should be fully functional. If you are using a local MAMP or WAMP server, point it to the name of your application /public folder and see if it works. It should look like this:

laravel-blog-private.pagodabox.com

If you see any errors please let me know in the comments and I will try to figure things out for you so that you can enjoy your simple Laravel-powered blog!

Until next time!

Oh and one more thing, if you want more Laravel goodness,

The following two tabs change content below.

Maks Surguy

Full stack web developer, speaker and writer.
Maks is young and energetic breakdancer turned into web developer who lives in Seattle area with his wife. He is well-versed in three languages (English, Russian, Ukrainian) and a dozen of programming languages.