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 :)
Top comments (0)