Laravel present easy and very strong templating engine. This templating engine connects one or more templates which are made by inheritance and part to produce required views page.
Blade template has its own control construction like loops and conditional statements. Inheritance and Section are main benefits of using Blade template engine.
To make Blade format, essentially make your view document with .blade.php extension rather than .php and it is regularly saved in the resources/views folder.
Want to learn Laravel installation instruction here
Step 1: Prepare Layout Page
All blade files must be saved with the .blade.php extension. In this segment, we will make a page layout that all pages will use it. The following code for defining a page layout.
- create new folder my_layouts in /resources/views/
- create a new file layout.blade.php in /resources/views/my_layouts/layout.blade.php
- add the following code to layout.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>@yield('page_title')</title> <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"> </head> <body> @section('page_menu') This is the master sidebar. @show <div class="container"> @yield('page_content') </div> </body> </html> |
- @yield(‘page_title’) is used to veiw the value of the page title
- @section(‘page_menu’) is used to define a section named page menu
- @show is used to display the html contents of a section
- @yield(‘page_content’) is used to view the main page contents details
Step 2: Utilizing layout page to create a display page with content. Following code use to create a page with original content using our layout and save it as tasks.blade.php. Here @extends() use to include the layout page with this page and @section and @endsection key use to define a what kind of content going to display into the page. {{ }} double opening curly braces and double closing curly braces are used to display the value of the variable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@extends('my_layouts.layout') @section('page_title', 'Learn Infinity') @section('page_menu') <ul> <li>Home</li> <li>About</li> <li>Contact Us</li> </ul> @endsection @section('page_content') <p>Here only the page main content are going to place. </p> <div class="content"> <div class="title">Laravel 5 - {{$page_name}}</div> @if (count($tasks)>0) <p>Total Task List is <b>{{count($tasks)}} </b></p> @else <p>There is no task in list.</p> @endif </div> <ul> @if(count($tasks)>0) @foreach($tasks as $task) <li>{{ $task }}</li> @endforeach @endif </ul> @endsection |
Step 3: Define a route for the page in routes.php. Here we can declare and define a variable and array with a value for the page required details. compact() method use to attach the variable with view page.
|
1 2 3 4 5 6 |
Route::get('/tasks', function () { $page_name = "Task list details"; $tasks = ["Task1", "Task2", "Task3", "Task4" , "Task5" , "Task6" , "Task7" ]; return view('tasks', compact('page_name', 'tasks')); }); |
Final output as,
