Laravel for Beginners : a Quick Guide - 6

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;

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;

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 :)

Blog

Laravel for Beginners : a Quick Guide - 6

Kartik Bhat

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

http://127.0.0.1:8000/loadPage

Join Our Newsletter. No Spam, Only the good stuff.

Related