Blade template syntax in Laravel

Introduction

Blade helps you write HTML mixed with PHP easily. It makes your web pages cleaner and simpler to manage.

When you want to create dynamic web pages in Laravel.

When you need to show data from your database inside HTML.

When you want to reuse parts of your web page like headers or footers.

When you want to control what shows on the page based on conditions.

When you want to loop over lists of items to display them.

Syntax

Laravel

@directive(parameters)
{{ expression }}
{{-- comment --}}
@php
  // PHP code here
@endphp

Use double curly braces {{ }} to show variables safely (it escapes HTML).

Directives start with @ and control logic like loops and conditions.

Examples

Shows the value of the variable $name safely inside HTML.

Laravel

{{ $name }}

Shows text only if the condition is true.

Laravel

@if($age >= 18)
  You are an adult.
@endif

Loops over a list of users and shows each user's name.

Laravel

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

Includes another Blade file called header.blade.php here.

Laravel

@include('header')

Sample Program

This Blade template shows a welcome message with the user's name. It checks if the user is an adult or minor and shows a message. Then it lists user names in a bullet list.

Laravel

@php
  $name = 'Alice';
  $age = 20;
  $users = [
    (object)['name' => 'Bob'],
    (object)['name' => 'Carol']
  ];
@endphp

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

@if($age >= 18)
  <p>You are an adult.</p>
@else
  <p>You are a minor.</p>
@endif

<h2>User List:</h2>
<ul>
@foreach($users as $user)
  <li>{{ $user->name }}</li>
@endforeach
</ul>

Important Notes

Always use {{ }} to print variables to avoid security risks from raw HTML.

Blade directives like @if, @foreach make your templates easy to read and write.

You can write plain PHP inside @php ... @endphp blocks if needed.

Summary

Blade syntax mixes PHP and HTML simply and safely.

Use {{ }} to show variables and @directives for logic.

Blade helps keep your web pages clean and easy to maintain.

Practice

1. Which Blade syntax is used to safely display a variable's value in a view?

easy

A. Using PHP echo tags like

B. Using single curly braces like { $variable }

C. Using double curly braces like {{ $variable }}

D. Using square brackets like [ $variable ]

Solution

1. Step 1: Identify Blade syntax for output

   Blade uses double curly braces {{ }} to display variables safely by escaping HTML.

2. Step 2: Compare options

   Only Using double curly braces like {{ $variable }} uses {{ $variable }}, which is the correct Blade syntax.

3. Final Answer:

   Using double curly braces like {{ $variable }} -> Option C

4. Quick Check:

   Safe variable display = {{ $variable }} [OK]

Hint: Remember: {{ }} is for safe variable output in Blade [OK]

Common Mistakes:

• Using single braces which is invalid in Blade
• Using raw PHP echo instead of Blade syntax
• Confusing square brackets with Blade syntax

2. Which of the following is the correct Blade directive to start a conditional statement?

easy

A. @if(condition)

B. #if(condition)

C. if(condition):

D. @@if(condition)

Solution

1. Step 1: Recall Blade directive syntax

   Blade uses directives starting with @ for control structures like conditionals.

2. Step 2: Identify correct conditional start

   The correct syntax to start an if statement is @if(condition).

3. Final Answer:

   @if(condition) -> Option A

4. Quick Check:

   Blade if start = @if(condition) [OK]

Hint: Blade directives always start with @ symbol [OK]

Common Mistakes:

• Using # instead of @ for directives
• Using raw PHP if syntax inside Blade
• Double @ signs which are for escaping

3. What will be the output of this Blade snippet if $name = 'Alice'?

<p>Hello, {{ $name }}!</p>
<p>@if($name == 'Alice')
  Welcome back! 
@endif</p>

medium

A. Syntax error due to missing @endif

B. Hello, Alice!

C. Hello, {{ $name }}!
Welcome back!

D. Hello, Alice!
Welcome back!

Solution

1. Step 1: Evaluate variable output

   The {{ $name }} outputs 'Alice' safely inside the first paragraph.

2. Step 2: Evaluate conditional block

   The condition $name == 'Alice' is true, so 'Welcome back!' is shown inside the second paragraph.

3. Final Answer:

   <p>Hello, Alice!</p> <p>Welcome back!</p> -> Option D

4. Quick Check:

   Variable and if true = output text [OK]

Hint: If condition true, content inside @if shows [OK]

Common Mistakes:

• Thinking Blade outputs raw variable syntax
• Missing @endif causing syntax errors
• Ignoring condition result and outputting nothing

4. Identify the error in this Blade template snippet:

@foreach($items as $item)
  <p>{{ $item }}</p>
@endforeachd

medium

A. The variable $item should be escaped with triple braces

B. The closing directive should be @endforeach, not @endforeachd

C. The loop variable should be $items, not $item

D. Missing semicolon after {{ $item }}

Solution

1. Step 1: Check foreach directive syntax

   The correct closing directive for a foreach loop is @endforeach.

2. Step 2: Identify typo in closing directive

   The snippet uses @endforeachd which is invalid and causes a syntax error.

3. Final Answer:

   The closing directive should be @endforeach, not @endforeachd -> Option B

4. Quick Check:

   Correct directive spelling = @endforeach [OK]

Hint: Check directive spelling carefully, no extra letters [OK]

Common Mistakes:

• Adding extra letters to Blade directives
• Thinking variables need semicolons in Blade
• Confusing loop variable names

5. You want to display a list of users with their emails, but only if the email is verified. Which Blade snippet correctly does this? A)

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

B)

@foreach($users as $user)
  @if($user[email_verified])
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

C)

@foreach($users as $user)
  @if($user->email_verified == true
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

D)

@foreach($users as $user)
  @if($user->email_verified = true)
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

hard

A. Option A

B. Option B

C. Option C

D. Option D

Solution

1. Step 1: Identify correct conditional syntax for object property

   Blade @if treats object boolean properties like $user->email_verified as truthy if verified.

2. Step 2: Evaluate each snippet's logic and syntax

   Snippet A with @if($user->email_verified) correctly shows only verified users.
   Snippet B uses array syntax $user[email_verified] invalid on objects.
   Snippet C with @if($user->email_verified == true has syntax error (missing closing )).
   Snippet D uses = true (assignment), always true, shows all users.

3. Final Answer:

   Option A -> Option A

4. Quick Check:

   Object property truthy check [OK]

Hint: Use == for comparison, not = which assigns [OK]

Common Mistakes:

• Using = instead of == in conditions
• Using array syntax on objects
• Forgetting closing parenthesis in @if conditions