In this post, we will go deeper into Blade. We are going to create a layout and extend it from the different templates, also we are going to use includes to include from a view the errors and the post submission form. Also, we are going to use the conditionals of Blade to display a message if there aren’t any post.
Layout and extends
A layout is a parent template that can contain a header, footer, etc. common for several views. This avoids the task of writing the same thing several times, only with writing it once and dynamizing what is not shared (title, menu active links, etc.).
Create a file in resources/views that is called layout.blade.php and it will contain this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>Laravel Blog</title> </head> <body> <header> this is a header </header> <div id="container"> @yield('content') </div> <footer> this is a footer </footer> </body> </html> |
And now we extend it in our views (posts.blade.php and post.blade.php):
|
1 2 3 4 5 |
@extends('layout') @section('content') // code @endsection |
What it does is in the div with id container add the code that is in @section(‘content’).
Includes
Now, we are going to separate the form and the section of errors in separated views, to be able to reuse them without having to rewrite the same code.
We take the form code that is in posts.blade.php and we put it in a separated file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form id="save_post" method="post" action="{{URL::to('/')}}/posts"> {{ csrf_field() }} <div> <p>Title</p> <input type="text" id="title" name="title" value="{{ old('title') }}"> </div> <div> <p>Body</p> <textarea id="body" name="body">{{ old('body') }}</textarea> </div> <div> <input type="submit" value="Save"> </div> </form> |
Do the same with the errors:
|
1 2 3 4 5 6 7 8 9 |
@if ($errors->any()) <div> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif |
In posts.blade.php we should replace what we just copied in the new views for:
|
1 2 |
@include('includes.errors') @include('includes.form-submit-post') |
With all this, we are already including new views from separate ones. We could also reuse them in other views if necessary, simply with the @include.
Detect if there are posts
To detect if there are posts to show and if there aren’t, show a message, we are going to modify the foreach loop of posts.blade.php and use other tag called forelse.
|
1 2 3 4 5 6 |
@forelse ($posts as $post) <p>{{ $post->title }}</p> <a href="{{URL::to('/')}}/post/{{ $post->id }}">Go</a> @empty <p>No posts</p> @endforelse |
There are other ways to do the same, for example with an if that counts how many posts there are and if there are 0 show the message and if there are more show the posts.
|
1 2 3 4 5 |
@if (count($posts) === 0) //no posts @else //foreach posts @endif |
Blade is very extensive, if you want to look at more things about it, I leave here the link to the documentation.
In the next post, we will talk a little bit more in depth about Eloquent ORM.