{"id":767,"date":"2022-12-20T12:14:42","date_gmt":"2022-12-20T12:14:42","guid":{"rendered":"https:\/\/www.devopstrainer.in\/blog\/?p=767"},"modified":"2022-12-21T05:18:19","modified_gmt":"2022-12-21T05:18:19","slug":"what-will-you-learn-from-blade-template-in-laravel","status":"publish","type":"post","link":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/","title":{"rendered":"What will you learn from Blade Template in Laravel?"},"content":{"rendered":"\n<p>Guys, In this chapter, we&#8217;re going to look at the basics of the Blade Template which plays a prominent role in Laravel. so, what following topics we will discuss regarding blade templates<br>like what is blade templates, how to display data, what about blade directives, and how to create layouts through blade templates &amp; convert templates into layouts.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg\" alt=\"\" class=\"wp-image-779\" width=\"751\" height=\"422\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-300x169.jpg 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-768x432.jpg 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-678x381.jpg 678w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template.jpg 1280w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Laravel Blade Template<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">What is a blade Template?<\/h2>\n\n\n\n<p>Let&#8217;s move to the path of blade templates. so, Blade templates are their own template engines of Laravel and this template engine of blade has its own structure such as conditional statements and loops. if you want to view something on your page or echo then they provide their own syntax like conditional and looping statements whatever have you seen in php core, it gives the alternatives or replacement of all those statements that also be easy to implement. <\/p>\n\n\n\n<p>Before what were we doing so, we were making the file by the name of .php extension but in this we make the file by the name of .blade.php extension so, .blade.php what it describes, this gives the information to Laravel that it is a blade template file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Displaying Data<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>Suppose, you have to display data so, what you had to do in core PHP. you had to follow the syntax like      <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>         <strong>   PHP Core Syntax: <\/strong><\/p>\n\n\n\n<p>        <strong>&lt;?php<\/strong><\/p>\n\n\n\n<p>              <strong>echo $name;<\/strong><\/p>\n\n\n\n<p>               <strong>?&gt;<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>   <strong>      Blade Template Syntax<\/strong>:<\/p>\n\n\n\n<p>    <strong>{{$name}}<\/strong><\/p>\n\n\n\n<p>        <strong>{!!$name!!}<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>if $name is a variable to that someone&#8217;s name is assigned but what do you do in Laravel, you have to apply blade template syntax which is mentioned above like<br><strong>{{$name}}<\/strong> -It doesn&#8217;t decode the Html entities, it means suppose you have made a string in that you put the h1 tag with a closing tag So, it will print as usual the whole string.<br><strong>{!!$name!!}<\/strong> -It decodes the whole Html entities, suppose you have a string in that you put an h1 tag with a closing tag then it will not print the whole string. it simply decodes the<br>data that you have put inside the Html tag.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Blade Directives<\/h2>\n\n\n\n<p>Let&#8217;s talk about the blade directives, what sorts of directives, we&#8217;re using at displaying data such as<\/p>\n\n\n\n<p>Blade conditional directives. It includes<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@if, @elseif, @else, and @endif<\/strong> directives. for example:-<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive2-1024x525.png\" alt=\"\" class=\"wp-image-775\" width=\"791\" height=\"405\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive2-1024x525.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive2-300x154.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive2-768x394.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive2.png 1087w\" sizes=\"auto, (max-width: 791px) 100vw, 791px\" \/><figcaption class=\"wp-element-caption\"><strong><em>If and Else Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output:<\/strong>  <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive-1-1-1024x367.png\" alt=\"\" class=\"wp-image-776\" width=\"753\" height=\"270\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive-1-1-1024x367.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive-1-1-300x107.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive-1-1-768x275.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive-1-1.png 1259w\" sizes=\"auto, (max-width: 753px) 100vw, 753px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Conditional Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@unless, @endunless<\/strong> directives. for example:<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive1-1024x420.png\" alt=\"\" class=\"wp-image-782\" width=\"777\" height=\"318\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive1-1024x420.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive1-300x123.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive1-768x315.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive1.png 1082w\" sizes=\"auto, (max-width: 777px) 100vw, 777px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Unless and Endunless Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive3-1024x357.png\" alt=\"\" class=\"wp-image-783\" width=\"766\" height=\"266\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive3-1024x357.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive3-300x104.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive3-768x267.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-directive3.png 1350w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Unless Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@isset, @endisset<\/strong> directives. for example:<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset1-1024x418.png\" alt=\"\" class=\"wp-image-785\" width=\"720\" height=\"293\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset1-1024x418.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset1-300x122.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset1-768x313.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset1.png 1088w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Isset Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output<\/strong>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset2-1024x348.png\" alt=\"\" class=\"wp-image-786\" width=\"808\" height=\"274\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset2-1024x348.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset2-300x102.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset2-768x261.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/condition-isset2.png 1358w\" sizes=\"auto, (max-width: 808px) 100vw, 808px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Isset and Endisset Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Blade Looping directives: It includes<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@for and @endfor directives<\/strong>. for example:<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive-1024x459.png\" alt=\"\" class=\"wp-image-788\" width=\"778\" height=\"348\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive-1024x459.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive-300x134.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive-768x344.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive.png 1087w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><figcaption class=\"wp-element-caption\"><strong><em>For Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive2-1024x382.png\" alt=\"\" class=\"wp-image-789\" width=\"751\" height=\"280\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive2-1024x382.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive2-300x112.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive2-768x286.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/for-directive2.png 1365w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><figcaption class=\"wp-element-caption\"><strong><em>For and Endfor Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@while and @endwhile directives.<\/strong> for example:<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive-1024x451.png\" alt=\"\" class=\"wp-image-791\" width=\"761\" height=\"334\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive-1024x451.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive-300x132.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive.png 1107w\" sizes=\"auto, (max-width: 761px) 100vw, 761px\" \/><figcaption class=\"wp-element-caption\"><strong><em>While Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive1-1024x377.png\" alt=\"\" class=\"wp-image-792\" width=\"750\" height=\"276\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive1-1024x377.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive1-300x111.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive1-768x283.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/while-directive1.png 1360w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption class=\"wp-element-caption\"><strong><em>While and Endwhile Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@foreach and @endforeach<\/strong> directives. for example:<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive-1024x472.png\" alt=\"\" class=\"wp-image-794\" width=\"710\" height=\"327\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive-1024x472.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive-300x138.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive-768x354.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive.png 1110w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Foreach Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive1-1024x413.png\" alt=\"\" class=\"wp-image-795\" width=\"731\" height=\"294\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive1-1024x413.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive1-300x121.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive1-768x309.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/foreach-directive1.png 1365w\" sizes=\"auto, (max-width: 731px) 100vw, 731px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Foreach and Endforeach Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@break and @continue<\/strong> directives. for example:<\/li>\n<\/ul>\n\n\n\n<p><strong>Input:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive-1024x437.png\" alt=\"\" class=\"wp-image-797\" width=\"716\" height=\"305\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive-1024x437.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive-300x128.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive-768x328.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive-1030x438.png 1030w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive.png 1115w\" sizes=\"auto, (max-width: 716px) 100vw, 716px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Break Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive1-1024x413.png\" alt=\"\" class=\"wp-image-798\" width=\"733\" height=\"295\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive1-1024x413.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive1-300x121.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive1-768x309.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/break-directive1.png 1360w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Break and Continue Directive<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Other Blade directives. It includes<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want to put comments on Blade templates of Laravel then you apply this for<\/li>\n<\/ul>\n\n\n\n<p>        <strong>comments: {{&#8211;Comments goes here&#8211;}}<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For including: You may apply <strong>@include<\/strong> on your blade templates for including another page.<\/li>\n\n\n\n<li>For raw PHP: <strong>@php @endphp<\/strong><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Layouts in Blade Template<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/create-layout-templates-1024x512.png\" alt=\"\" class=\"wp-image-799\" width=\"752\" height=\"376\" srcset=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/create-layout-templates-1024x512.png 1024w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/create-layout-templates-300x150.png 300w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/create-layout-templates-768x384.png 768w, https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/create-layout-templates.png 1080w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Blade Template Layout<\/em><\/strong><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Let&#8217;s understand the layouts in Blade templates, the things that come under the layout blade directives are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@yield directive<\/strong>: it is used to display the contents of a given section<\/li>\n\n\n\n<li><strong>@section directives<\/strong>: it defines a section of data or content.<\/li>\n\n\n\n<li><strong>@extends blade directives<\/strong>: which particular view, do you want to &#8216;inherit&#8217;? it just works in favor of that.<\/li>\n<\/ul>\n\n\n\n<p>so, let&#8217;s understand the two main things are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>@stack directive<\/strong>: if you want to render the stack data or contents so, you will pass the name of the stack to the @stack directive.<\/li>\n\n\n\n<li><strong>@push and @endpush<\/strong>: it basically used to push content or data into the stack.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Guys, In this chapter, we&#8217;re going to look at the basics of the Blade Template which plays a prominent role in Laravel. so, what following topics we will discuss regarding&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[308,309,289],"tags":[312,314,313,311,310],"class_list":["post-767","post","type-post","status-publish","format-standard","hentry","category-blade-template","category-directives","category-laravel","tag-blade-directives","tag-blade-template-in-laravel","tag-creating-layouts-in-blade-template","tag-displaying-data","tag-what-is-blade-template"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps\" \/>\n<meta property=\"og:description\" content=\"Guys, In this chapter, we&#8217;re going to look at the basics of the Blade Template which plays a prominent role in Laravel. so, what following topics we will discuss regarding&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\" \/>\n<meta property=\"og:site_name\" content=\"DevOps | SRE | DevSecOps\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-20T12:14:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-21T05:18:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg\" \/>\n<meta name=\"author\" content=\"rahulkr kr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rahulkr kr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\"},\"author\":{\"name\":\"rahulkr kr\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d\"},\"headline\":\"What will you learn from Blade Template in Laravel?\",\"datePublished\":\"2022-12-20T12:14:42+00:00\",\"dateModified\":\"2022-12-21T05:18:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\"},\"wordCount\":639,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg\",\"keywords\":[\"Blade Directives\",\"Blade Template in Laravel\",\"Creating Layouts in Blade Template\",\"Displaying Data\",\"What is blade Template?\"],\"articleSection\":[\"Blade Template\",\"Directives\",\"Laravel\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\",\"url\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\",\"name\":\"What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps\",\"isPartOf\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg\",\"datePublished\":\"2022-12-20T12:14:42+00:00\",\"dateModified\":\"2022-12-21T05:18:19+00:00\",\"author\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage\",\"url\":\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template.jpg\",\"contentUrl\":\"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template.jpg\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.devopstrainer.in\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What will you learn from Blade Template in Laravel?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#website\",\"url\":\"https:\/\/www.devopstrainer.in\/blog\/\",\"name\":\"DevOps | SRE | DevSecOps\",\"description\":\"Automation means Cost, Quality, Time\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.devopstrainer.in\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d\",\"name\":\"rahulkr kr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g\",\"caption\":\"rahulkr kr\"},\"url\":\"https:\/\/www.devopstrainer.in\/blog\/author\/rahulkr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/","og_locale":"en_US","og_type":"article","og_title":"What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps","og_description":"Guys, In this chapter, we&#8217;re going to look at the basics of the Blade Template which plays a prominent role in Laravel. so, what following topics we will discuss regarding&hellip;","og_url":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/","og_site_name":"DevOps | SRE | DevSecOps","article_published_time":"2022-12-20T12:14:42+00:00","article_modified_time":"2022-12-21T05:18:19+00:00","og_image":[{"url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg","type":"","width":"","height":""}],"author":"rahulkr kr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rahulkr kr","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#article","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/"},"author":{"name":"rahulkr kr","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d"},"headline":"What will you learn from Blade Template in Laravel?","datePublished":"2022-12-20T12:14:42+00:00","dateModified":"2022-12-21T05:18:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/"},"wordCount":639,"commentCount":0,"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg","keywords":["Blade Directives","Blade Template in Laravel","Creating Layouts in Blade Template","Displaying Data","What is blade Template?"],"articleSection":["Blade Template","Directives","Laravel"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/","url":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/","name":"What will you learn from Blade Template in Laravel? - DevOps | SRE | DevSecOps","isPartOf":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage"},"image":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template-1024x576.jpg","datePublished":"2022-12-20T12:14:42+00:00","dateModified":"2022-12-21T05:18:19+00:00","author":{"@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d"},"breadcrumb":{"@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#primaryimage","url":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template.jpg","contentUrl":"https:\/\/www.devopstrainer.in\/blog\/wp-content\/uploads\/2022\/12\/laravel-blade-template.jpg","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.devopstrainer.in\/blog\/what-will-you-learn-from-blade-template-in-laravel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.devopstrainer.in\/blog\/"},{"@type":"ListItem","position":2,"name":"What will you learn from Blade Template in Laravel?"}]},{"@type":"WebSite","@id":"https:\/\/www.devopstrainer.in\/blog\/#website","url":"https:\/\/www.devopstrainer.in\/blog\/","name":"DevOps | SRE | DevSecOps","description":"Automation means Cost, Quality, Time","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.devopstrainer.in\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/e9fd1d88de76754aa189257cd197394d","name":"rahulkr kr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.devopstrainer.in\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79531cbaf0b831cebc9631f6ac28f21fb3fb0dc2615eeecdeeec43038b513473?s=96&d=mm&r=g","caption":"rahulkr kr"},"url":"https:\/\/www.devopstrainer.in\/blog\/author\/rahulkr\/"}]}},"_links":{"self":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/comments?post=767"}],"version-history":[{"count":17,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions"}],"predecessor-version":[{"id":803,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/posts\/767\/revisions\/803"}],"wp:attachment":[{"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/media?parent=767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/categories?post=767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopstrainer.in\/blog\/wp-json\/wp\/v2\/tags?post=767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}