Laravel 8 Tutorial - Blade Template

In this tutorial, we are going to learn about Blade templates.

Blade is the built-in templating engine for the Laravel framework.

Blade is a very powerful and easy-to-use templating engine that makes writing syntax very easy and readable.

Blade templating engine comes with its own control structure, such as conditional statements and loops.

Blade templates are typically stored in the views directory inside the resource folder.

Now, let's create a Blade template file. So, go to the project and click on the resource folder. And now, right-click on views and create a new file. Let's say the blade name is "test", so just type here: test.blade.php.

A Blade template file is now created here. Inside this Blade file, I am going to type here a message, like inside the h1 tag:


<h1>test blade</h1>

Alright, now for accessing this Blade view, let's create a route. So, go to the web.php. For that, click on routes, then open web.php. Inside this file, let's create a route:


Route::get('/test', function (){
    return view('test'); 
});

Now, save the file and check it. So, switch to the browser and here type /test. Ok, you can see this message. This text is coming from the test Blade file.

Now, let's see how we can create a variable inside the Blade template file. So, go to the test Blade and here, let's create a variable. For PHP code in Blade template, we use @php directives. So, just type @php and @endphp. Inside the @php directives, define a variable. Let's say the variable name is $name and value "Jenifer".


@php
    $name='Jenifer';
@endphp

Now, print this name variable value using double curly brackets {{}}:


Hello {{$name}}!

Now, save the file and see on the browser. You can see here "Hello Jenifer".

Let's create an array here. So, type inside the @php directives, just write:


@php 
    $fruits = array('mango','apple','orange'); 
@endphp

Now, let's see the if statements. Now, use this array inside the if statements:


@if(count($fruits)==1) 
Single Fruit. 
@elseif(count($fruits)>1) 
More than one fruits. 
@else. 
No Fruit. 
@endif

Let's check it on the browser. Refresh the page. You can see "More than one fruit". If I change the array and remove these two and now check, you can see "Single fruit". Now, let's remove all the elements from here. Now, you can see "No fruit".

Now, let's see the loop in Blade template. Let's see @for directives first. So, here type:


@for($i=1;$i<=10;$i++) 
    {{$i}}<br> 
@endfor

Save the file and see the result. You can see here 1 to 10 numbers.

Now, let's see @foreach directives. For understanding @foreach directives, just add some elements inside the array. So, type here "mango", "orange", "apple".

Now, display each element from the array using @foreach directives:


@foreach($fruits as $fruit) 
    {{$fruit}}
 
@endforeach

Save the file and check the result. You see here all the fruits.

Now, let's see the ternary operator. For understanding the ternary operator, just create a variable here:


@php
$age=18;
@endphp

Now, let's use this variable inside the ternary operator:


{{$age >=18 ?'you are an adult':'you are not an adult';}}

If this condition is true, then this true part will be returned, and if the condition is false, then this false part will be returned.

Alright, now check. So, just refresh the page, you can see here this message. And if I change the $age with 12, now check, you can see here "You are not an adult".

Blade template engine provides the @include directive for including a view inside another view. The child view will have all the variables that are available to the parent view.

For understanding the @include directive, just add another view. So, go to the view folder and create a new Blade file. Let's say headers.blade.php. Now, put some text here: