Laravel: Templating and Views
What is View?
View in MVC architecture is a representation layout for user to interact with the application. It is more of what is shown on the browser for other users of the application to see.
Template is what displays the view, and in laravels case, we are using a templating engine known as blade.
How does Blade Work?
Blade file is an extension of a PHP file (I don’t know if this is the right statement to use). What it just means in general is that, you can write PHP code in a blade file. A sample of a blade file is welcome.blade.php and it is stored in the views folder.
For laravel to render what is in a blade file, the page we are routing should return a view. For example, in our first part, we were returning strings
Route::get('/customer', function() {
// return Home string
return 'Home';
});
Now, instead of returning a string, we would return a view. For example lets return a view for home parameter.
# Our web.php file
Route::get('/home', function() {
// return a view
return view('home');
});
Now that means we would create a file called home.blade.php in our views folder. Yes, one may ask, how come we didn’t return view(‘home.blade.php’)? Laravel interprets home as home.blade.php, and if you decide to expressly write home.blade.php, it would throw an error.
So, we can write both HTML and PHP in a blade file.
What can you do in a Blade File?
Almost anything you can do in a PHP file….
HTML
You can write HTML codes in a blade file.
<h1>Hello</h1>
<p>This is a simple HTML on a blade file</p>
Extend Contents
So now lets image you have a header and a footer and want to have dynamic contents in the body. For instance: Home Page, About Page. And you don’t want to be typing the header and footer for each page, here’s what you can do.
Sample
# Sample Home Page (views/home.blade.php)
<html>
<div>Header</div>
<main>Home Page</main>
<div>Footer</div>
</html>
# Sample About Page (views/about.blade.php)
<html>
<div>Header</div>
<main>About Page</main>
<div>Footer</div>
</html>
You can see from the above code that we keep on repeating the header and the footer are constantly repeated in the home and about page. What to do…
We would create a folder inside our views folder and name it something like “layouts” and create a file and name it whatever you want, I would name mine “master.blade.php”
For this, we would introduce what is known as blade directives. Blade directives in summary are shortcuts for common PHP structures. Find more about blade directives here.
So now, what we would have inside our master file is:
# views/layouts/master.blade.php
<html>
<div>Header</div>
@yield('content')
<div>Footer</div>
</html>
Directives inside the views directory are referenced with fullstops. For instance “layouts.master” Then in our home and about files, we would have this
# Sample Home Page (views/home.blade.php)
@extends('layouts.master')
@section('content')
<main>Home Page</main>
@endsection
# Sample About Page (views/about.blade.php)
@extends('layouts.master')
@section('content')
<main>About Page</main>
@endsection
So, with this, we have the write once rule implemented :)
Include Contents
I wouldn’t go ahead to start explaining all the blade directives. The purpose of this is just a slight revision for me after my course, so no need to burn all the time.
include contents works exactly like the php include function.
include 'footer.php';
@include('layouts.footer');
That’s the logic basically
Passing a variable
Yes, you can pass a variable from the route file to the views file.
# web.php
Route::get('home', function() {
// lets create a variable $dog and put a string cat in it
$dog = 'cat';
return view('home', ['animal' => $dog]);
});
# views/home.blade.php
<h1>Animal Name: </h1>
There are some situations where you have multiple variables.
# web.php
Route::get('home', function() {
$dog = 'cat';
$fish = 'snail';
return view('home', ['dog' => $dog, 'fish' => $fish]);
});
# views/home.blade.php
<h1>Animals</h1>
<ul>
<li></li>
<li></li>
</ul>
Instead of writing it that way on the web.php file, we can make use of php “compact” function.
# web.php
Route::get('home', function() {
$dog = 'cat';
$fish = 'snail';
return view('home', compact('dog', 'fish'));
});
# views/home.blade.php
<h1>Animals</h1>
<ul>
<li></li>
<li></li>
</ul>
Conclusion
That’s all for templating and views. Its soo tiring typing out here on the blog after I finish each section. I hope to be consistent :)
Leave a comment