Introduction to Blade Templates
Blade is the powerful templating engine provided by the PHP framework Laravel. It helps developers create dynamic and reusable website layouts using clean and simple syntax.
Blade templates allow developers to separate the presentation layer from application logic, making web applications easier to manage, maintain, and scale.
Blade files use the .blade.php extension and are stored inside the resources/views directory in Laravel projects.
Objectives
By the end of this training, you will be able to:
- Understand the purpose of Blade Templates
- Create Blade view files
- Use Blade syntax for displaying data
- Work with layouts and reusable components
- Apply conditional statements and loops
- Pass data from controllers to views
- Build dynamic and organized website interfaces
What Are Blade Templates
Blade templates are lightweight view files used to create the frontend interface of Laravel applications.
Blade provides:
- Simple syntax
- Faster development
- Reusable layouts
- Dynamic content rendering
- Clean code structure
Creating a Blade File
Example of a Blade template file:
resources/views/home.blade.phpBasic Blade template example:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1>Welcome to Blade Templates</h1>
</body>
</html>Displaying Data in Blade
Blade uses double curly braces to display variables.
Example:
<h1>{{ $name }}</h1>Controller example:
public function index()
{
$name = "Ali";
return view('home', compact('name'));
}Blade Comments
Blade comments are not visible in the browser source code.
Example:
{{-- This is a Blade comment --}}Conditional Statements in Blade
If Statement
@if($marks >= 50)
<p>Pass</p>
@endifIf Else Statement
@if($age >= 18)
<p>Eligible</p>
@else
<p>Not Eligible</p>
@endifLoops in Blade
Foreach Loop
@foreach($students as $student)
<p>{{ $student }}</p>
@endforeachFor Loop
@for($i = 1; $i <= 5; $i++)
<p>{{ $i }}</p>
@endforBlade Layouts
Blade layouts help developers create reusable website structures.
Master Layout Example
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<div>
@yield('content')
</div>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>Extending Layouts
Child views can extend master layouts.
Example:
@extends('layout')
@section('title', 'Home Page')
@section('content')
<h2>Welcome to Home Page</h2>
@endsectionIncluding Blade Files
Blade allows reusable partial files.
Example:
@include('navbar')Blade Components
Components help create reusable UI sections.
Example:
<x-alert />Passing Data to Blade Views
Example from controller:
public function dashboard()
{
$users = ['Ali', 'Ahmed', 'Sara'];
return view('dashboard', compact('users'));
}Blade view:
@foreach($users as $user)
<p>{{ $user }}</p>
@endforeachBlade Directives
Common Blade directives include:
@if@else@foreach@for@include@extends@section@yield
These directives simplify frontend development in Laravel.
Advantages of Blade Templates
- Easy to learn and use
- Clean and readable syntax
- Faster website development
- Reusable layouts and components
- Secure data rendering
- Excellent integration with Laravel
Real World Uses of Blade Templates
Blade Templates are used for:
- Dynamic websites
- Admin dashboards
- E-commerce platforms
- Content management systems
- Student portals
- Business web applications
Best Practices
- Keep templates clean and organized
- Use layouts for consistency
- Create reusable components
- Avoid excessive logic inside views
- Use meaningful file names
Final Presentation
In your final presentation, explain:
- What Blade Templates are
- Why Blade is important in Laravel
- Blade syntax basics
- Layouts and reusable views
- Loops and conditional statements
- Real-world usage of Blade Templates