Wednesday, March 22, 2017

Create master layout with sub page using blade in Laravel

Today we are going to create master layout with sub page using blade in Laravel, so let's see the implementation below:




According to its site: 

Blade is a simple, yet powerful templating engine provided with Laravel. Unlike controller layouts, Blade is driven by template inheritance and sections. All Blade templates should use the .blade.phpextension.

So we will dive into a real demo project with blade in Laravel together. I assumed that you already installed Laravel project in your localhost if you are not yet, feel free to check out this post Install Laravel from scratch first and come back. After you install laravel, you will see like below:



There are some steps to work with master page and sub page, with Laravel this thing make developer very easy to implement and learn. 

1. Navigate to your project /YourProjectName/resources/views then right click  -> Click New Folder and rename it as layout 

Note: I'm using PHP Storm Editor

2. Right click on layout folder and  click New PHP file -> and then type app.blade so it will connect with .php extension like below:




3. In file app.blade.php, you type like below:


Did you see the @yield("title"), @yield("content") and @yield("footer"), they are out data placeholder, I mean that, those @yield with help us to insert the data from sub page. Now we are going to create a sub page home page. 

4. Right click on folder view and click New PHP file -> and then type homepage.blade so adding some data like below:

All the data between the @section('title') & @endsection,  @section('content') & @endsection,  @section('footer') & @endsection, they will show us with combining with app.blade(master page) so we now reduce some code in homepage.blade.php, no need to write the header, body, meta tag for each page

5. Navigate to your project /YourProjectName/route/web.php and then open this file change from 
return view('welcome');   to return view('homepage'); and then open browser http://localhost:1010/myblog/public/ . Here the output:




Important :   Here is the demo code!

3 comments:

  1. It is a useful and valuable apparatus that ought not be investigated. Wikipedia page creation services

    ReplyDelete
  2. You can create a site effectively without any preparation utilizing Google Locales without paying a penny and you get 100MB of space for your site.Wikipedia editors for hire

    ReplyDelete
  3. It's superior, however , check out material at the street address. Diamond saw blade

    ReplyDelete