Laravel Blade : Master the templating engine!

Laravel 4 months ago

Laravel Blade: A Powerful Templating Engine

Laravel Blade is the default templating engine for the Laravel PHP framework. It simplifies the process of creating dynamic and reusable web pages by seamlessly integrating PHP code within HTML templates. Here's a breakdown of key Blade features and concepts:

1. Displaying Variables:

Pass data from controllers or routes to Blade views using the view helper function:

PHP

// Controller
return view('welcome', ['name' => 'John Doe']);

Access variables within Blade templates using double curly braces ({{ }}):

HTML

<h1>Hello, {{ $name }}!</h1>

2. Blade Conditionals (If-Else):

Use the @if, @else, and @endif directives to control content display based on conditions:

HTML

@if (count($products) > 0)
  <ul>
    @foreach ($products as $product)
      <li>{{ $product->name }}</li>
    @endforeach
  </ul>
@else
  <p>No products found.</p>
@endif

3. Loop Structures (Foreach and For):

Iterate over collections using @foreach and access individual elements:

HTML

@foreach ($users as $user)
  <p>{{ $user->name }} ({{ $user->email }})</p>
@endforeach

Use @for for custom counter-based loops:

HTML

@for ($i = 0; $i < 5; $i++)
  <p>Iteration {{ $i + 1 }}</p>
@endfor

4. Layouts: Reusability with @include, @extends, @section, and @yield

@include: Include reusable components (partials) within layouts:

HTML

<html>
<head>
  </head>
<body>
  <header>
    @include('layouts.header')
  </header>
  <main>
    @yield('content')
  </main>
  <footer>
    @include('layouts.footer')
  </footer>
</body>
</html>

@extends('layouts.app')

@section('content')
  <h1>Welcome to our website!</h1>
@endsection

@extends: Create base layouts from which other views inherit structure:
- The child view (welcome.blade.php) extends the layout (app.blade.php) using @extends.
@section: Define content sections within layouts to be replaced by child views:
- The layout (app.blade.php) defines a @yield('content') placeholder.
@yield: Insert content from child views into designated sections within layouts:
- The child view (welcome.blade.php) uses @section('content') to provide its specific content.

5. Blade Components:

Create reusable UI components with encapsulated logic and styling:

PHP

// app/View/Components/Alert.php
class Alert extends BladeComponent
{
    public $type;
    public $message;

    public function render()
    {
        return view('components.alert');
    }
}

HTML

<div class="alert alert-{{ $type }}">
  {{ $message }}
</div>

Use components in Blade templates like regular HTML elements:

HTML

<x-alert type="success" message="Operation successful!" />

Additional Tips:

Use escape sequences ({!! !!}) to allow raw HTML within Blade:

HTML

{!! $content !!}  ```

- Employ Blade directives for common tasks like CSRF protection forms:

```html
{{ csrf_field() }}

Remember:

Blade files reside in the resources/views directory with the .blade.php extension.
Leverage Laravel's documentation for in-depth explanations and examples: https://laravel.com/docs/11.x/blade

By mastering these concepts, you'll be well-equipped to create dynamic, maintainable, and well-structured Laravel applications using Blade templates.