DEV Community

Cover image for šŸ§© Using Blade Templates in Laravel - A Beginnerā€™s Guide
Rohit Dhiman
Rohit Dhiman

Posted on

šŸ§© Using Blade Templates in Laravel - A Beginnerā€™s Guide

#laravel #php #webdev #programming

If youā€™re starting with Laravel, one of the first features youā€™ll fall in love with is Blade, Laravelā€™s lightweight and elegant templating engine. It helps you separate your HTML layout from logic, write cleaner code, and reuse your UI components effectively.

In this article, Iā€™ll walk you through the basics of Blade templates with real-world examples.

šŸ” What Is Blade?

Blade is Laravelā€™s built-in template engine that allows you to use simple syntax to create views. Unlike raw PHP templates, Blade comes with a variety of features like:

  • Conditional directives
  • Loops
  • Layout inheritance
  • Components
  • Slots and more

Blade templates are saved with the .blade.php file extension inside the resources/views directory.

āœØ Echoing Data

The simplest way to print data in Blade is by using double curly braces:

<p>Hello, {{ $user->name }}</p>
Enter fullscreen mode Exit fullscreen mode

Blade automatically escapes the data to protect your application from XSS (Cross-Site Scripting) attacks. If you want to render raw HTML (be cautious), use:

{!! $htmlContent !!}
Enter fullscreen mode Exit fullscreen mode

šŸ§  Conditional Statements

Blade simplifies control structures. Here's how you can use @if, @elseif, @else, and @endif:

@if($user)
  <p>Welcome, {{ $user->name }}</p>
@else
  <p>Welcome, Guest</p>
@endif
Enter fullscreen mode Exit fullscreen mode

Other directives include @isset, @empty, @auth, and @guest.

šŸ” Loops in Blade

You can loop over data using familiar constructs like:

@foreach($posts as $post)
  <h2>{{ $post->title }}</h2>
@endforeach
Enter fullscreen mode Exit fullscreen mode

Also available: @for, @while, @forelse.

šŸ—ļø Layouts and Sections

Blade allows you to define a master layout and inject content using sections. Here's a basic layout:

<!-- resources/views/layouts/app.blade.php -->
<html>
  <body>
    <header>My Site</header>

    <main>
      @yield('content')
    </main>

    <footer>Ā© 2025</footer>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then, in a child view:

@extends('layouts.app')

@section('content')
  <h1>Home Page</h1>
@endsection
Enter fullscreen mode Exit fullscreen mode

This keeps your views DRY (Donā€™t Repeat Yourself).

šŸ“¦ Blade Components

Reusable UI components make your views cleaner and more modular. To create one:

php artisan make:component Alert
Enter fullscreen mode Exit fullscreen mode

It generates:

  • app/View/Components/Alert.php
  • resources/views/components/alert.blade.php

Use it like this in your view:

<x-alert type="success" message="Profile updated!" />
Enter fullscreen mode Exit fullscreen mode

Props can be passed to make each instance dynamic.

šŸ” Security by Default

One of the best parts of Blade is that it's secure out of the box. Any variables echoed with {{ }} are automatically escaped. This prevents malicious scripts from being executed inside your views.

Only use {!! !!} when you absolutely trust the content.

šŸ§Ŗ Example Use Case

Letā€™s say you want to greet a logged-in user and show a success message component:

@extends('layouts.app')

@section('content')
  <h1>Dashboard</h1>

  @if($user)
    <p>Hi, {{ $user->name }}!</p>
  @endif

  <x-alert type="success" message="Logged in successfully!" />
@endsection
Enter fullscreen mode Exit fullscreen mode

Simple, readable, and fully reusable.

šŸŽÆ Final Thoughts

Blade helps Laravel developers create beautiful, maintainable, and reusable frontend templates without the hassle of traditional PHP logic. With features like layout inheritance, clean directives, and powerful components ā€” itā€™s no wonder Blade is a favorite among developers.

Whether you're building a blog, admin panel, or full-scale SaaS app ā€” Blade has your back.

šŸ’¬ What about you?

Are you using Blade in your Laravel projects? Whatā€™s your favorite Blade directive or trick?

Let me know in the comments or drop a ā¤ļø if you found this helpful!

šŸ§© GitHub Example

Want a working demo?
šŸ‘‰ Blade Templates Example on GitHub

šŸ™Œ Letā€™s Connect!

If you enjoyed this article, share your thoughts or ask questions below.
Follow me on LinkedIn / Substack / GitHub for more beginner-friendly Laravel tutorials.

Tags:
#Laravel #BladeTemplates #PHP #WebDevelopment #FullStack #LaravelTips #CodingForBeginners #100DaysOfCode #DevTo #MediumBlog #Hashnode #dailydev

Top comments (0)