What is Blade Template in Laravel?
The Blade template is a powerful templating engine provided by Laravel. It allows developers to write clean and efficient PHP code within views. Unlike plain PHP code execution, Blade templates are optimized, making them faster and easier to work with.
Blade templates use files with the .blade.php extension. These files allow the use of PHP code seamlessly while offering concise syntax and enhanced readability.
Key Features of Blade Template
- Displaying Variables
You can display variables using the Blade syntax instead of traditional PHP tags.
- Traditional PHP Syntax:
<h1><?php echo $name; ?></h1>- Blade Syntax:
<h1>{{ $name }}</h1>- Running Functions
Blade makes it simple to run PHP functions directly within templates.
<h1>{{ rand() }}</h1>In this example, the rand() function generates a random number.
- Conditional Statements
Blade offers a cleaner syntax for writing conditional statements compared to plain PHP.
- Traditional PHP Syntax:
<?php if ($age > 18): ?>
<p>You are an adult.</p>
<?php else: ?>
<p>You are a minor.</p>
<?php endif; ?>- Blade Syntax:
@if ($age > 18)
<p>You are an adult.</p>
@else
<p>You are a minor.</p>
@endif- Loops
Blade provides an elegant way to write loops like for, foreach, or while.
- For Loop Example:
@for ($i = 1; $i <= 5; $i++)
<p>Iteration {{ $i }}</p>
@endfor- Foreach Loop Example:
@foreach ($users as $user)
<p>{{ $user->name }}</p>
@endforeach- Layouts and Sections
Blade allows you to define layouts and extend them in your views.
- Defining a Layout (e.g., layout.blade.php):
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div class="content">
@yield('content')
</div>
</body>
</html>- Extending a Layout:
@extends('layout')
@section('title', 'Home Page')
@section('content')
<p>Welcome to the homepage!</p>
@endsection- Blade Components
You can also create reusable components with Blade to reduce redundancy.
- Defining a Component (e.g., alert.blade.php):
<div class="alert alert-{{ $type }}">
{{ $message }}
</div>- Using a Component:
@component('alert', ['type' => 'success', 'message' => 'Operation Successful!'])
@endcomponent