--- title: "Laravel Blade Basics" description: "Laravel Blade, the framework’s 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..." url: https://www.inmotionhosting.com/support/edu/laravel/laravel-blade-basics/ date: 2023-11-21 modified: 2025-03-17 author: "Derrell" image: https://www.inmotionhosting.com/support/wp-content/uploads/2023/11/laravel-blade.png categories: ["Laravel"] type: post lang: en --- # Laravel Blade Basics ![Laravel Blade Basics](https://www.inmotionhosting.com/support/wp-content/uploads/2023/11/laravel-blade-1024x538.png) [Laravel Blade](https://laravel.com/docs/10.x/blade), the framework’s 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. In this comprehensive guide, we’ll dive into Blade’s fundamentals, equipping you with the knowledge to craft responsive and interactive web pages easily. Choose from our [Laravel Hosting](https://www.inmotionhosting.com/laravel-hosting), [VPS Hosting](https://www.inmotionhosting.com/vps-hosting), or [Dedicated Servers](https://www.inmotionhosting.com/dedicated-servers) to host your Laravel applications and websites today! ## What is Blade? 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. ## Setting Up a Blade Template Blade templates are identified by the `.blade.php` extension and are typically housed in the `resources/views` 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’s time to display a Blade view, Laravel’s `view()` function comes into play, rendering the template with any necessary data. ## Routing to a Blade Template 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` file. For example: ``` Route::get('/welcome', function () { return view('welcome'); }); ``` This route uses a closure to return the `welcome.blade.php` view when the `/welcome` URL is accessed. Laravel’s routing system is incredibly flexible, allowing data to be passed to views, route parameters, and controllers. ``` Route::get('/about', function () { return view('welcome', ['title' => 'Welcome!', 'name' => 'User']); }); ``` In this example, we are passing an array with `title` and `name` to the `welcome.blade.php` view. ## Blade Syntax Basics Blade simplifies embedding PHP in HTML. For instance, `{{ $variable }}` displays a variable, with Blade handling HTML entity escaping. welcome.blade.php ``` {{ $title }} # Welcome {{ $name }}! ``` As you can see in this example, we are using the `title` and `name` variables that were passed to the view. Control structures like `@if`, `@foreach`, and `@while` offer readable alternatives to PHP tags, enhancing the clarity of your templates. ### @if and @endif `@if` and `@endif` allow you to conditionally display content based on certain conditions, similar to how you would use `if` statements in standard PHP code. ``` @if($user->'User') Welcome Back, User! @endif ``` In this example, the text “Welcome Back, User!” will only be displayed if the `$user` variable evaluates to `User`. ### @foreach and @endforeach `@foreach` and `endforeach` are used for looping over arrays or collections, similar to PHP’s `foreach` loop. ``` VIGIAPLACEHOLDER0END ``` In this example, the `foreach` loop iterates over a collection of users. For each user in the collection, it creates a list item displaying the user’s name. ### @while and @endwhile `@while` and `@endwhile` allow you to execute a block of code repeatedly as long as a given condition is true, similar to PHP’s `while` loop. They are particularly useful for iterating through data when the number of iterations is not known beforehand. ``` @php $count = 0; @endphp VIGIAPLACEHOLDER1END ``` In this example, the template creates a list item (`
  • `) for each element in the `$items` array. The `$count` variable is incremented within the loop to eventually break the condition. ## Blade Template Inheritance Blade’s template inheritance feature promotes code reusability. By defining a master layout with common elements, you can extend this layout in other views using `@extends`, `@section`, and `@yield`. This DRY approach streamlines view creation and maintains consistency across your application. ### Creating a Master Layout views/layouts/master.blade.php ``` App Name - @yield('title') @yield('content') ``` In this layout, `@yield('title')` and `@yield('content')` are placeholders for content that will be filled by the child views. ### Extending the Master Layout in Child Views Once you have a master layout, you can create individual views that extend this layout. To do this, use the `@extends` directive. Within these child views, you define sections (`@section`) that correspond to the `@yield` directives in the master layout. views/pages/home.blade.php ``` @extends('layouts.master') @section('title', 'Home Page') @section('content') # Welcome to Our Application This is the home page. @endsection ``` In this example, the `@extends('layouts.master')` directive tells Blade that this view should inherit the master layout. The `@section('title', 'Home Page')` and `@section('content')` directives fill in the `@yield('title')` and `@yield('content')` sections of the master layout, respectively. ## The @include Directive The `@include` directive in Laravel’s 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. ### Creating the Subviews First, we create separate Blade files for the header and footer. views/includes/header.blade.php ``` # My Application ``` views/includes/footer.blade.php ``` © 2023 My Application ``` ### Including the Subviews in a Main View Now, we can include these subviews in our main Blade template. views/home.blade.php ``` Home Page @include('includes.header') Welcome to the home page of My Application! @include('includes.footer') ``` In this home page template, we use `@include('includes.header')` to include the header and `@include('includes.footer')` for the footer. These directives pull in the content from the respective header and footer Blade files. ## Laravel Blade Components 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’s design, allowing for cleaner and more maintainable code. ### Creating and Using a Blade Component Let’s create a simple Blade component for a button and demonstrate how to use it in a view. First, we create a new Blade file for the button component. views/components/button.blade.php ``` {{ $slot }} ``` In this component, `{{ $type }}` is a variable for the button type (like ‘submit’, ‘button’, etc.), `{{ $class }}` allows additional CSS classes to be applied, and `{{ $slot }}` is used for the button’s label or content. To use the component in a Blade view, you use the `` creates a submit button with the primary button styling. The text between the tags “Submit” is passed into the component and rendered where `{{ $slot }}` is in the button component. ### Benefits of Using Blade Components - **Encapsulation**: Components encapsulate both the structure and logic of UI elements, making them more self-contained and easier to manage. - **Reusability**: Components can be reused across different parts of your application, reducing code duplication. - **Customization**: Components can accept parameters and content, allowing for flexible customization when reused. ## Conclusion Blade is an indispensable part of the Laravel ecosystem, offering a blend of simplicity and power for web interface development. Its intuitive syntax, combined with Laravel’s robust features, makes Blade ideal for developers seeking to build efficient, maintainable, and interactive web applications.