Laravel's Blade templating engine is a powerful tool that simplifies the process of building dynamic and reusable views in your web applications. With its intuitive syntax and numerous features, Blade empowers developers to create elegant and maintainable templates. In this post, we'll explore the basics of Laravel Blade templating, helping you become proficient in leveraging its capabilities.
Blade templates are stored in the resources/views
directory of your Laravel project. By default, Laravel provides a welcome.blade.php
file as the home page.
Blade uses curly braces to denote variables and echo their values:
<h1>Hello, {{ $name }}</h1>
You can also use @
directives for more complex operations:
@if(count($users) > 0)
<ul>
@foreach($users as $user)
<li>{{ $user->name }}</li>
@endforeach
</ul>
@else
<p>No users found.</p>
@endif
Blade allows you to create a master layout and extend it across multiple views:
master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>
home.blade.php
@extends('master')
@section('title', 'Home Page')
@section('content')
<h1>Welcome to our website!</h1>
@endsection
Blade offers various directives that facilitate conditional rendering, loops, and more.
Blade simplifies looping through arrays or collections:
@foreach($users as $user)
<p>{{ $user->name }}</p>
@endforeach
Blade provides simple conditionals for showing or hiding content:
@if($loggedIn)
<p>Welcome back, {{ $user->name }}</p>
@else
<a href="/login">Login</a>
@endif
Include common templates in multiple views with @include
:
@include('partials.header')
Use @stack
to define and push content to a stack:
@push('scripts')
<script src="example.js"></script>
@endpush
Blade components, introduced in Laravel 7, provide reusable and self-contained UI components:
Alert.blade.php
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
Usage in a view
<x-alert type="success">
This is a success message.
</x-alert>
Blade supports comments:
{{-- This is a Blade comment --}}
Use double curly braces to automatically escape output:
<p>{{ $userInput }}</p>
Mastering the basics of Laravel Blade templating empowers you to create dynamic and reusable views in your Laravel applications with ease. Blade's intuitive syntax, directives, and features like extending layouts and components make it a valuable tool for building elegant UIs.