{"id":107863,"date":"2023-11-21T00:44:17","date_gmt":"2023-11-21T05:44:17","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=107863"},"modified":"2025-03-17T10:23:40","modified_gmt":"2025-03-17T14:23:40","slug":"laravel-blade-basics","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/laravel\/laravel-blade-basics\/","title":{"rendered":"Laravel Blade Basics"},"content":{"rendered":"
\"Laravel<\/figure>\n\n\n\n

Laravel Blade<\/a>, the framework\u2019s built-in templating engine, makes it easy to blend PHP with HTML. This seamless integration simplifies building dynamic web interfaces, making Blade a key feature of Laravel.<\/p>\n\n\n\n

In this comprehensive guide, we\u2019ll dive into Blade\u2019s fundamentals, equipping you with the knowledge to craft responsive and interactive web pages easily.<\/p>\n\n\n\n

Choose from our\u00a0Laravel Hosting<\/a>,\u00a0VPS Hosting<\/a>, or\u00a0Dedicated Servers<\/a>\u00a0to host your Laravel applications and websites today!<\/p>\n\n\n\n

What is Blade?<\/h2>\n\n\n\n

Blade is a templating engine that comes bundled with Laravel. Unlike traditional PHP templates, Blade templates are compiled into plain PHP code and cached for optimal performance. Blade offers a cleaner and more concise syntax for embedding PHP code in HTML and provides a range of helpful directives for common tasks.<\/p>\n\n\n\n

Setting Up a Blade Template<\/h2>\n\n\n\n

Blade templates are identified by the .blade.php<\/code> extension and are typically housed in the resources\/views<\/code> directory. Creating a Blade view is as simple as crafting a new file with this extension. Within this file, you can seamlessly blend HTML and Blade syntax. When it\u2019s time to display a Blade view, Laravel\u2019s view()<\/code> function comes into play, rendering the template with any necessary data.<\/p>\n\n\n\n

Routing to a Blade Template<\/h2>\n\n\n\n

Routing in Laravel is the process of directing HTTP requests to specific controllers or closures. To display a Blade template, you first define a route in the routes\/web.php<\/code> file. For example:<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
Route<\/span>::<\/span>get<\/span>(<\/span>'\/welcome'<\/span>, <\/span>function<\/span> () {<\/span><\/span>\n    <\/span>return<\/span> <\/span>view<\/span>(<\/span>'welcome'<\/span>);<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
This route uses a closure to return the welcome.blade.php<\/code> view when the \/welcome<\/code> URL is accessed. Laravel\u2019s routing system is incredibly flexible, allowing data to be passed to views, route parameters, and controllers.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
Route<\/span>::<\/span>get<\/span>(<\/span>'\/about'<\/span>, <\/span>function<\/span> () {<\/span><\/span>\n    <\/span>return<\/span> <\/span>view<\/span>(<\/span>'welcome'<\/span>, [<\/span>'title'<\/span> <\/span>=><\/span> <\/span>'Welcome!'<\/span>, <\/span>'name'<\/span> <\/span>=><\/span> <\/span>'User'<\/span>]);<\/span><\/span>\n});<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, we are passing an array with title<\/code> and name<\/code> to the welcome.blade.php<\/code> view.<\/p>\n\n\n\n
Blade Syntax Basics<\/h2>\n\n\n\n
Blade simplifies embedding PHP in HTML. For instance, {{ $variable }}<\/code> displays a variable, with Blade handling HTML entity escaping. <\/p>\n\n\n\n
welcome.blade.php<\/span><\/path><\/path><\/svg><\/span>
<!<\/span> <\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n  <\/span><<\/span>title<\/span>><\/span>{{ $title }}<\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n  <\/span><<\/span>h1<\/span>><\/span>Welcome<\/span> {{ $name }}<\/span>!<<\/span>h1<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
As you can see in this example, we are using the title<\/code> and name<\/code> variables that were passed to the view. <\/p>\n\n\n\n
Control structures like @if<\/code>, @foreach<\/code>, and @while<\/code> offer readable alternatives to PHP tags, enhancing the clarity of your templates.<\/p>\n\n\n\n
@if and @endif<\/h3>\n\n\n\n
@if<\/code> and @endif<\/code> allow you to conditionally display content based on certain conditions, similar to how you would use if<\/code> statements in standard PHP code.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
@if<\/span>($user<\/span>-><\/span>'User'<\/span>)<\/span><\/span>\n  <\/span><<\/span>h1<\/span>><\/span>Welcome<\/span> <\/span>Back<\/span>, <\/span>User<\/span>!<\/<\/span>h1<\/span>><\/span><\/span>\n@endif<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, the text \u201cWelcome Back, User!\u201d will only be displayed if the $user<\/code> variable evaluates to User<\/code>.<\/p>\n\n\n\n
@foreach and @endforeach<\/h3>\n\n\n\n
@foreach<\/code> and endforeach<\/code> are used for looping over arrays or collections, similar to PHP\u2019s foreach<\/code> loop.<\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
<<\/span>ul<\/span>><\/span><\/span>\n@foreach<\/span>($users <\/span>as<\/span> $user)<\/span><\/span>\n  <\/span><<\/span>li<\/span>><\/span>{{ $user<\/span>-><\/span>name }}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n@endforeach<\/span><\/span>\n<\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, the foreach<\/code> loop iterates over a collection of users. For each user in the collection, it creates a list item displaying the user\u2019s name.<\/p>\n\n\n\n
@while and @endwhile<\/h3>\n\n\n\n
@while<\/code> and @endwhile<\/code> allow you to execute a block of code repeatedly as long as a given condition is true, similar to PHP\u2019s while<\/code> loop. They are particularly useful for iterating through data when the number of iterations is not known beforehand. <\/p>\n\n\n\n
<\/path><\/path><\/svg><\/span>
@<\/span>php<\/span><\/span>\n  $count <\/span>=<\/span> <\/span>0<\/span>;<\/span><\/span>\n@<\/span>endphp<\/span><\/span>\n<\/span>\n<<\/span>ul<\/span>><\/span><\/span>\n@while<\/span>($count <\/span><<\/span> <\/span>count<\/span>($items))<\/span><\/span>\n  <\/span><<\/span>li<\/span>><\/span>{{ $items[$count] }}<\/span><\/<\/span>li<\/span>><\/span><\/span>\n  <\/span>@<\/span>php<\/span> $count<\/span>++<\/span>; <\/span>@<\/span>endphp<\/span><\/span>\n@endwhile<\/span><\/span>\n<\/<\/span>ul<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, the template creates a list item (<li><\/code>) for each element in the $items<\/code> array. The $count<\/code> variable is incremented within the loop to eventually break the condition. <\/p>\n\n\n\n
Blade Template Inheritance<\/h2>\n\n\n\n
Blade\u2019s template inheritance feature promotes code reusability. By defining a master layout with common elements, you can extend this layout in other views using @extends<\/code>, @section<\/code>, and @yield<\/code>. This DRY approach streamlines view creation and maintains consistency across your application.<\/p>\n\n\n\n
Creating a Master Layout<\/h3>\n\n\n\n
views\/layouts\/master.blade.php<\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <\/span><<\/span>title<\/span>><\/span>App<\/span> <\/span>Name<\/span> <\/span>-<\/span> <\/span>@yield<\/span>(<\/span>'title'<\/span>)<\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <\/span><<\/span>header<\/span>><\/span><\/span>\n        <\/span><!--<\/span> <\/span>Header<\/span> <\/span>content<\/span> <\/span>--><\/span><\/span>\n    <\/span><\/<\/span>header<\/span>><\/span><\/span>\n<\/span>\n    <\/span><<\/span>div<\/span> <\/span>class=<\/span>\"container\"<\/span>><\/span><\/span>\n        <\/span>@yield<\/span>(<\/span>'content'<\/span>)<\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n    <\/span><<\/span>footer<\/span>><\/span><\/span>\n        <\/span><!--<\/span> <\/span>Footer<\/span> <\/span>content<\/span> <\/span>--><\/span><\/span>\n    <\/span><\/<\/span>footer<\/span>><\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this layout, @yield('title')<\/code> and @yield('content')<\/code> are placeholders for content that will be filled by the child views.<\/p>\n\n\n\n
Extending the Master Layout in Child Views<\/h3>\n\n\n\n
Once you have a master layout, you can create individual views that extend this layout. To do this, use the @extends<\/code> directive. Within these child views, you define sections (@section<\/code>) that correspond to the @yield<\/code> directives in the master layout. <\/p>\n\n\n\n
views\/pages\/home.blade.php<\/span><\/path><\/path><\/svg><\/span>
@<\/span>extends<\/span>(<\/span>'layouts.master'<\/span>)<\/span><\/span>\n<\/span>\n@<\/span>section<\/span>(<\/span>'title'<\/span>, <\/span>'Home Page'<\/span>)<\/span><\/span>\n<\/span>\n@<\/span>section<\/span>(<\/span>'content'<\/span>)<\/span><\/span>\n    <\/span><<\/span>h1<\/span>><\/span>Welcome<\/span> <\/span>to<\/span> <\/span>Our<\/span> <\/span>Application<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n    <\/span><<\/span>p<\/span>><\/span>This<\/span> <\/span>is<\/span> <\/span>the<\/span> <\/span>home<\/span> <\/span>page<\/span>.<\/span><\/<\/span>p<\/span>><\/span><\/span>\n@<\/span>endsection<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, the @extends('layouts.master')<\/code> directive tells Blade that this view should inherit the master layout. The @section('title', 'Home Page')<\/code> and @section('content')<\/code> directives fill in the @yield('title')<\/code> and @yield('content')<\/code> sections of the master layout, respectively.<\/p>\n\n\n\n
The @include Directive<\/h2>\n\n\n\n
The @include<\/code> directive in Laravel\u2019s Blade templating engine is a simple yet powerful feature for including subviews within a Blade view. It promotes modularity by allowing you to break down views into smaller, reusable parts. This approach is particularly useful for elements that are common across multiple pages, such as headers, footers, or navigation bars.<\/p>\n\n\n\n
Creating the Subviews<\/h3>\n\n\n\n
First, we create separate Blade files for the header and footer.<\/p>\n\n\n\n
views\/includes\/header.blade.php<\/span><\/path><\/path><\/svg><\/span>
<<\/span>header<\/span>><\/span><\/span>\n    <\/span><<\/span>h1<\/span>><\/span>My<\/span> <\/span>Application<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n    <\/span><<\/span>nav<\/span>><\/span><\/span>\n        <\/span><!--<\/span> <\/span>Navigation<\/span> <\/span>links<\/span> <\/span>--><\/span><\/span>\n    <\/span><\/<\/span>nav<\/span>><\/span><\/span>\n<\/<\/span>header<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
views\/includes\/footer.blade.php<\/span><\/path><\/path><\/svg><\/span>
<<\/span>footer<\/span>><\/span><\/span>\n    <\/span><<\/span>p<\/span>><\/span>\u00a9<\/span> <\/span>2023<\/span> <\/span>My<\/span> <\/span>Application<\/span><\/<\/span>p<\/span>><\/span><\/span>\n<\/<\/span>footer<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Including the Subviews in a Main View<\/h3>\n\n\n\n
Now, we can include these subviews in our main Blade template.<\/p>\n\n\n\n
views\/home.blade.php<\/span><\/path><\/path><\/svg><\/span>
<!<\/span>DOCTYPE<\/span> <\/span>html<\/span>><\/span><\/span>\n<<\/span>html<\/span>><\/span><\/span>\n<<\/span>head<\/span>><\/span><\/span>\n    <\/span><<\/span>title<\/span>><\/span>Home<\/span> <\/span>Page<\/span><\/<\/span>title<\/span>><\/span><\/span>\n<\/<\/span>head<\/span>><\/span><\/span>\n<<\/span>body<\/span>><\/span><\/span>\n    <\/span>@include<\/span>(<\/span>'includes.header'<\/span>)<\/span><\/span>\n<\/span>\n    <\/span><<\/span>div<\/span> <\/span>class=<\/span>\"content\"<\/span>><\/span><\/span>\n        <\/span><<\/span>p<\/span>><\/span>Welcome<\/span> <\/span>to<\/span> <\/span>the<\/span> <\/span>home<\/span> <\/span>page<\/span> <\/span>of<\/span> <\/span>My<\/span> <\/span>Application<\/span>!<\/<\/span>p<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n    <\/span>@include<\/span>(<\/span>'includes.footer'<\/span>)<\/span><\/span>\n<\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this home page template, we use @include('includes.header')<\/code> to include the header and @include('includes.footer')<\/code> for the footer. These directives pull in the content from the respective header and footer Blade files.<\/p>\n\n\n\n
Laravel Blade Components<\/h2>\n\n\n\n
With the introduction of Blade components in Laravel 7, developers gained a more encapsulated and robust method for building reusable UI elements. These components enhance the modularity of your application\u2019s design, allowing for cleaner and more maintainable code.<\/p>\n\n\n\n
Creating and Using a Blade Component<\/h3>\n\n\n\n
Let\u2019s create a simple Blade component for a button and demonstrate how to use it in a view.<\/p>\n\n\n\n
First, we create a new Blade file for the button component.<\/p>\n\n\n\n
views\/components\/button.blade.php<\/span><\/path><\/path><\/svg><\/span>
<<\/span>button<\/span> <\/span>type<\/span>=<\/span>\"{{ <\/span>$type<\/span> }}\"<\/span> <\/span>class=<\/span>\"btn {{ <\/span>$class<\/span> }}\"<\/span>><\/span><\/span>\n    {{ $slot }}<\/span><\/span>\n<\/<\/span>button<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this component, {{ $type }}<\/code> is a variable for the button type (like \u2018submit\u2019, \u2018button\u2019, etc.), {{ $class }}<\/code> allows additional CSS classes to be applied, and {{ $slot }}<\/code> is used for the button\u2019s label or content.<\/p>\n\n\n\n
To use the component in a Blade view, you use the <x-<\/code> tag syntax. Here\u2019s how you can use the button component in a form:<\/p>\n\n\n\n
views\/form.blade.php<\/span><\/path><\/path><\/svg><\/span>
<<\/span>form<\/span> <\/span>action<\/span>=<\/span>\"\/submit\"<\/span> <\/span>method<\/span>=<\/span>\"post\"<\/span>><\/span><\/span>\n    <\/span><!--<\/span> <\/span>Form<\/span> <\/span>fields<\/span> <\/span>here<\/span> <\/span>--><\/span><\/span>\n<\/span>\n    <\/span><<\/span>x<\/span>-<\/span>button<\/span> <\/span>type<\/span>=<\/span>\"submit\"<\/span> <\/span>class=<\/span>\"btn-primary\"<\/span>><\/span><\/span>\n        <\/span>Submit<\/span><\/span>\n    <\/span><\/<\/span>x<\/span>-<\/span>button<\/span>><\/span><\/span>\n<\/<\/span>form<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
In this example, <x-button type=\"submit\" class=\"btn-primary\"><\/code> creates a submit button with the primary button styling. The text between the tags \u201cSubmit\u201d is passed into the component and rendered where {{ $slot }}<\/code> is in the button component.<\/p>\n\n\n\n
Benefits of Using Blade Components<\/h3>\n\n\n\n