Laravel for Beginners : a Quick Guide - 6
Tags: laravel8, mvc, php
Published: 2021-08-14 16:54:14

Blade Files !!!!

what are these blade files ?

Cool; simply these are just HTML files, styled using CSS and made interactive using JavaScript; yes that simple.

Then, Why these are called as blade files ?

Ok, before that I think you already know how to infuse PHP values/variables into our html file... I suppose...

using 
``` <?php echo $value; ?> ```
Correct  ?

then, how to add php's logical statements in html; you suppose to know this too :)

```
<div>
   <?php
       if(a>b) { 
   ?>
      <b><?php 
          echo "a is bigger" ; 
      ?></b>
      <?php 
       } else { 
      ?>
      <b><?php 
        echo "b is bigger" ; 
      ?></b>
  <?php 
     } 
   ?>
</div>
```

Correct ?

Don't you think these looks somewhat messy !!!
I think it is too messy :)

that's why laravel provides us a great solution, that is nothing but **blade** , to make user interface development more cleaner and easier.

Now, technically I can define this 'blade' as 'a template engine'; Laravel says it as 'Blade template engine', clear ?

Let's see how to write above piece of code using blade engine,

* .blade.php file holds any html code in it, and no need to enclose anything within **<?php ?>** syntax, laravel handles it automatically.
* any php variable can be printed using ``` {{  }} ```  syntax, add any php variable in between double flower brackets. it works similar to the **echo** .
* logical statements such as 'if' and other statements can be infused by adding '@' before it, 
Eg: 
```
'@if', '@elseif', '@endif', '@for', '@foreach', etc 
```

any php logical statements can added similarly.
* **<?php ?>** can be replaced by ``` @php @endphp ```

Ok, Ok let's see about code;

```
<div>
   @if(a>b)
     <b>{{ 'a is bigger' }}</b>
   @elseif
     <b>{{ 'b is bigger' }}</b>
   @endif
</div>
```

Looks easy right ?

these blade files reside inside a **view** folder located under **resources** folder (Go and check them once)

from controller's method just we need to **return** name of the blade file, it is enough to load that respective blade file on browser when we call that controller's method using one of the route;

laravel provides a method called **view()** to load a blade file on the browser, and optionally we can pass php array (key - value pair) as a second parameter to the view function, that array can be accessed in our blade file.

Eg:
assume there is a file called **viewData.blade.php** present inside a **resources->views** folder; then we can load it from controller's method as

```
return view('viewData');
```

if we wish to pass a php array to it, then it looks like,

```
$data = [
   'name'=>'kartik'
];
return view('viewData',$data);
```

this is to  simple one.. correct ?

Come On, Lets create a blade file and try its interaction with the controller; 

create a file called **viewData.blade.php** inside a **resources -> views** folder

copy and paste this simple html code in it

```
<html>
    <body>
        <div>Hi, Hello</div>
    </body>
</html>
```

Now, lets create a controller's method to load it,
Open our DataController file the add this method to it;

```
public function loadPage() {
  return view('viewData');
}
```

Then, create a **route** to call this method, 
I am sure you know that where to create it :)

```
Route::get('loadPage', [DataController::class,'loadPage']);
```

> again to make things easy I am keeping route name and controller method's name as same, it is not mandatory to do it every time, you are free to use any words of your wish.

#### be remember route name should be unique, you cannot use same 'route' to call different methods of the controller :) ####

now call 'loadPage' route from your browser; you know this one too right ?

Ok, hit this url
#### http://127.0.0.1:8000/loadPage ####

you can see this;
![loadPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2uh90tbkxuwscijyt7x.png)

seems to be a simple process right ? you just rendered a simple html file from Controller... is it ?; its a static data loading ; i.e you are not controlling the data to be displayed on browser window, its loading a string defined in a blade file itself.

Let's pass a php value from our loadPage() function and display it on browser window; say a dynamic data loading ;
you can control/customize the data to be displayed on browser window, below code says how to do it,

edit your loadPage() function as ;

```
public function loadPage() {
    $data = [
        'name' => "kartik"
    ];
    return view('loadPage',$data);
}
```

Open **loadPage.blade.php** file and remove that 'Hi , Hello' and add ``` {{ $name }} ```  index/key of an array $data that we have passed from loadPage() method. 'name' index of array $data can be referred as $name variable in our blade file.

```
<html>
    <body>
        <div>{{ $name }}</div>
    </body>
</html>
```

now, hit the same URL again;

![DynamicData](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e27war24bomke412zp6.png)

what you are seeing ? index value that you have mentioned in loadPage() method... Correct ?

Interaction between controller and blade file is not so difficult right ? I Suppose :)

I hope you grasped it, in my next article let's learn about saving data to database that we will add from blade file and show them in a different page, OK

Bye :)