In this video we are going to learn about blade templates layout.
As we know most of the web applications follows the same layout across all the pages.
So the better approach is to define a master template.
Where we can place all the boilerplate.
In Laravel, blade template engine allow us to define a master template which can be extended by other individual pages.
So lets create a master layout page inside the views folder.
So go to the project.
Click on resource folder then click on views.
Inside the views folder lets create a new folder.
Lets say folder name is layout and inside the layout folder create a layout file.
Which is master.blade.php.
Now open this file and here first of all create html5 boilerplate.
For that type here html:5 and press tab.
Now add bootstrap cdn.
Go to the getbootstrap.com and from here copy css and js cdn.
Copy this css and paste into master page head tag and also copy js cdn and paster just before closing body tag.
Now lets create some pages and extend this master layout.
So right click on views folder and create new file.
index.blade.php and inside the index.blade.php file type.
Smilary lets create About us and Contact us page.
So create two file first about-us.blade.php file and contact-us.blade.php file.
Now open about-us.blade.php and write the following code.
Now open contact-us.blade.php file and write the following code.
Now create routes for these.
So go to the web.php file and write the following code.
Now add navigation.
So for that go to the bootstrap website and search here nav.
Now copy this code and paste in master.blade.php file.
Alright now add link here for the home,about and contact.
Save the file.
Now lets check this.
So switch to the browser and refresh the page.
And here you can see the home page.
If I click on about us link you can see the about us page with same layout.
and if I click on contact us link you can see the contact page with same layout.
So in this way you can use blade template layouts in laravel 8.
As we know most of the web applications follows the same layout across all the pages.
So the better approach is to define a master template.
Where we can place all the boilerplate.
In Laravel, blade template engine allow us to define a master template which can be extended by other individual pages.
So lets create a master layout page inside the views folder.
So go to the project.
Click on resource folder then click on views.
Inside the views folder lets create a new folder.
Lets say folder name is layout and inside the layout folder create a layout file.
Which is master.blade.php.
Now open this file and here first of all create html5 boilerplate.
For that type here html:5 and press tab.
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
<title>Laravel @yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>
Now add bootstrap cdn.
Go to the getbootstrap.com and from here copy css and js cdn.
Copy this css and paste into master page head tag and also copy js cdn and paster just before closing body tag.
Now lets create some pages and extend this master layout.
So right click on views folder and create new file.
index.blade.php and inside the index.blade.php file type.
@extends('layouts.master')
@section('title','Home')
@section('content')
<h3>Home content goes here.</h3>
@endsection.
Smilary lets create About us and Contact us page.
So create two file first about-us.blade.php file and contact-us.blade.php file.
Now open about-us.blade.php and write the following code.
@extends('layouts.master')
@section('title','Home')
@section('content')
<h3>About us content goes here.</h3>
@endsection.
Now open contact-us.blade.php file and write the following code.
@extends('layouts.master')
@section('title','Home')
@section('content')
<h3>Contact us content goes here.</h3>
@endsection.
Now create routes for these.
So go to the web.php file and write the following code.
Route::get('/home',function (){return view('home');});
Route::get('/about',function (){return view('about');});
Route::get('/contact',function (){return view('contact');});
Now add navigation.
So for that go to the bootstrap website and search here nav.
Now copy this code and paste in master.blade.php file.
<nav class=\"nav\">
<a class=\"nav-link \" href=\"/home\">Home</a>
<a class=\"nav-link\" href=\"/about\">About Us</a>
<a class=\"nav-link\" href=\"/contact\">Contact Us</a>
</nav>
Alright now add link here for the home,about and contact.
Save the file.
Now lets check this.
So switch to the browser and refresh the page.
And here you can see the home page.
If I click on about us link you can see the about us page with same layout.
and if I click on contact us link you can see the contact page with same layout.
So in this way you can use blade template layouts in laravel 8.
