Blade Template in Laravel 5

Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additionally, blade contains some more features which we will discuss here. Lets summarize:

  1. Shortcuts
  2. Including and Extending other file
  3. Section and yield statement
  4. @endsection vs @show vs @overwrite
  5. conditional statement
  6. Loops
  7. Helpers (will be discussed in another tutorial)

Create a file in resources >> views named first.blade.php.

Also see django vs laravel vs ruby on rails

Shortcuts:

  1. <php echo $var; ?> is equivalent to {{ $var }}. {{ }} also skip html entities in the content.
  2. {!! !!} is also equivalent to {{ }} but it does not skip html entities.
  3. {{ isset($name) ? $name : 'Default value' }} is equivalent to {{ $name or 'Default value' }}.
  4. By default the content written inside the double braces will be proceed by blade template. If you want to skip some content then put @ before opening braces like @{{ content here }}.
  5. Format of comments is {{-- This comment will not be in the rendered HTML --}}

NOTE: I am continuing my tutorials series. If you are visiting first time then please read Basics of laravel and Views first.

  1. {{-- code in first.blade.php --}}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>My first webpage</title>
  6. </head>
  7. <body>
  8. <h1>My Page</h1>
  9. <p>this is my page</p>
  10. <p>my id is {{ $id }}</p>
  11. <p> again my id is {!! $id !!}</p>
  12. <p>Line using double braces {{ $line }}</p>
  13. <p>Linke using single braces {!! $line !!}</p>
  14. @{{ This will not be processed by Blade }}
  15. </body>
  16. </html>

Change YourController->index() as:

  1. public function index($id)
  2. {
  3. $string = "<h1>this is not a heading</h1>";
  4. return view('first')->with(['id'=>$id,'line'=>$string]);
  5. }

Output of url http://localhost:8000/request/231

Screenshot from 2015-06-06 13:28:53

Including and Extending other file:

We can include outside template file by using @include('filepath.filename'). This file path is relative to views folder. It is same as iniclude() function in PHP. Just like in programming languages, we can extent templates using @extends('another_file'). It must be first line of the file.

Now create a new file with name second.blade.php and paste this code in that file:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Blog demo</title>
  5. </head>
  6. <body>
  7. @section('sidebar')
  8. This is the master sidebar.
  9. @show
  10. </body>
  11. </html>

Notice the code between line 7 and line 9. It is written inside a section with name sidebar. The section starts with command @section('section_name') and ends with @show or @endsection or @overwrite (discussed in next section). This code can be override in the sub-template (template which is extending this template). Change first.blade.php by this code and observe the change:

  1. @extends('second')
  2. <p>This is default code in first.blade.php</p>

Refresh the page and you will see the line inherited from second.blade.php.

NOTE: A template can not extend two templates. @extends should be strictly first line.

Also see Best book for learning web development.

Section and yield statements:

Now change the code of second.blade.php like this:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Blog demo</title>
  5. </head>
  6. <body>
  7. @section('sidebar')
  8. <p>This is the master sidebar above the content.</p>
  9. @show
  10. @yield('content')
  11. @section('bottom')
  12. <p>This is bottom text</p>
  13. @show
  14. </body>
  15. </html>

Now change first.blade.php with code:

  1. @extends('second')
  2. <p>This is default code in first.blade.php</p>
  3. @section('sidebar')
  4. <p>sidebar section has been overrided</p>
  5. @endsection
  6. @section('content')
  7. <p>This is content for yeild</p>
  8. @endsection

Now on refreshing the page, you will get the output:

  1. This is default code in first.blade.php
  2. sidebar section has been overrided
  3. This is content for yeild
  4. This is bottom text

Note:

  • @yeild('content') may be consider as a hole where we can place our code after extending this file. When we will extend this file and write a section with name content then the code of that section will be fitted on the place of yield('content'). In above example, our yield statement is in between two sections. So, the code of content section is placed between the code of other two sections.
  • As we discussed in last section, we can override a section. In this example, we are overriding sidebar section.
  • Defining section for @yield in extended template is not required. You will not get any error if you delete the content section.
  • @yield is only for extended template. It will not work in same file. So, there is no use of writing both @yield and @section for same section in one file (if you are rendering that file).
  • A file can not have two sections with same name.

@endsection vs @show vs @overwrite

As I said later, a section can be end with @endsection or @show or @overwrite. But these two statements are not same. If we use @show, it means code of that section will be written there. But @endsection and @overwrite are used for inheritance. The section which ends with @endsection requires a @show or @yield statement for displaying its code. For example change, code of second.blade.php as:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Blog demo</title>
  5. </head>
  6. <body>
  7. @section('sidebar')
  8. <p>This is the master sidebar above the content.</p>
  9. @show
  10. @yield('content')
  11. @section('bottom')
  12. <p>This is bottom text</p>
  13. @show
  14. @section('no-display')
  15. <p>This section will not be displayed because
  16. it is using endsection but there is no show or yeild
  17. statement for this section
  18. </p>
  19. @endsection
  20. </body>
  21. </html>

Change first.blade.php with code:

  1. @extends('second')
  2. <p>This is default code in first.blade.php</p>
  3. @section('sidebar')
  4. <p>sidebar section has been overrided</p>
  5. @show
  6. @section('content')
  7. <p>This is content for yeild</p>
  8. @show

The result will be:

  1. This is default code in first.blade.php
  2. sidebar section has been overrided
  3. This is content for yeild
  4. sidebar section has been overrided
  5. This is content for yeild
  6. This is bottom text

NOTE:

  • @show statements are displaying code twice in inheritance because one for override and one for that section. For avoiding this, use @endsection or @overwrite.
  • @overwrite is final section. This section will not be inherited. You may assume it as private function in progamming.

Conditional Statements:

Laravel provides @if, @elseif, @else, @endif, @unless and @endunless statements. Change index function in YourController class:

  1. public function index($id= 12)
  2. {
  3. $id = (int)$id;
  4. return view('first')->with(['id'=>$id]);
  5. }

Change first.blade.php as:

  1. @extends('second')
  2. @section('content')
  3. @if ($id == 1)
  4. <p>your id is one</p>
  5. @elseif ($id < 50)
  6. <p>below 50</p>
  7. @elseif ($id > 50 && $id <= 100)
  8. <p>enjoy dude</p>
  9. @else
  10. <p>Your id is Out of range</p>
  11. @endif
  12. @unless ($id == 1)
  13. <p>you are not admin</p>
  14. @endunless
  15. @endsection

Now see results for different ids.

Also see Python vs PHP vs Ruby programming

Loops:

Laravel provides @for, @foreach, @forelse and @while loops. Change index function as:

  1. public function index($id= 12)
  2. {
  3. $id = (int)$id;
  4. $numbers = [1,2,345,5,3,234,21];
  5. return view('first')->with(['id'=>$id,'numbers' => $numbers]);
  6. }

Change first.blade.php as:

  1. @extends('second')
  2. @section('content')
  3. @for ($i = 0; $i < 10; $i++)
  4. <p>The current value is {{ $i }}</p>
  5. @endfor
  6. @foreach ($numbers as $number)
  7. <p>number is {{ $number }}</p>
  8. @endforeach
  9. <ul>
  10. @forelse ($numbers as $number)
  11. <li>{{ $number }}</li>
  12. @empty
  13. <p>No Number</p>
  14. @endforelse
  15. </ul>
  16. @while ($id > 0 && $id--)
  17. <p>Your id is {{ $id }}</p>
  18. @endwhile
  19. @endsection

See result :)

More Tutorials on laravel in this series:



About Harish Kumar

Harish is an interested person in the field of web development and blogging. He works for the need of young web developers in learning various languages, latest technologies and other essential tips and tricks. If you need some help or you have some suggestion then you email him at harish@findalltogether.com without any hesitation. You can also suggest/demand for articles of your own choice.

Related Articles

Laravel is a MVC framework. Models are the real world entities in data form. Views are the response content to the vi...
Laravel framework architecture
Routes map urls with the controllers. In this section we will read about how route maps urls with controllers and how...
Basics routing and controllers in laravel 5
Views are the HTML content served by the server. These are served by returning from controllers. Views are .php or .b...
View in Laravel 5

Login or Sign up to leave comment.