Blade template syntax in Laravel - Step-by-Step Execution

Concept Flow - Blade template syntax

Start Blade Template

↓

Parse Blade Directives

↓

Evaluate PHP Code

↓

Render HTML Output

↓

Send to Browser

Blade templates are parsed by Laravel to convert directives and PHP code into HTML that the browser can display.

Execution Sample

Laravel

@if($user)
  <p>Hello, {{ $user->name }}!</p>
@else
  <p>Welcome, guest!</p>
@endif

This Blade snippet checks if a user exists and shows a greeting or a guest message accordingly.

Execution Table

Step	Blade Directive	Condition/Expression	Evaluation Result	Rendered Output
1	@if	$user (object)	True	<p>Hello, John!</p>
2	Display	$user->name	John	John
3	@else	-	Skipped	-
4	@endif	-	End if	-

💡 Condition $user is true, so @else block is skipped and output is rendered with user name.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
$user	null or object	object (John)	object (John)	object (John)
$user->name	N/A	John	John	John

Key Moments - 2 Insights

Why does the @else block not render when $user is set?

Because in the execution_table at Step 1, the condition $user is true, so Blade renders the @if block and skips the @else block.

How does {{ $user->name }} output the user name safely?

Blade automatically escapes the output inside {{ }} to prevent unsafe HTML, as shown in Step 2 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is rendered at Step 3?

A Nothing, @else block is skipped

B The guest welcome message

C An error message

D The user name again

💡 Hint

Check the 'Rendered Output' column at Step 3 in the execution_table.

At which step does Blade evaluate the user name for output?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the step where the 'Display' directive is processed in the execution_table.

If $user was null, what would happen in the execution_table?

A Step 1 condition is true, Step 2 renders user name

B All steps render nothing

C Step 1 condition is false, Step 3 renders guest message

D Blade throws an error

💡 Hint

Think about how @if and @else behave when condition is false, referencing the execution_table flow.

Concept Snapshot

Blade template syntax uses directives like @if, @else, and {{ }} to control output.
Conditions are evaluated in PHP, and matching blocks render HTML.
{{ }} safely outputs variables with escaping.
@else runs only if @if condition is false.
Blade compiles templates into PHP before sending HTML to browser.

Full Transcript

Blade templates in Laravel let you write HTML mixed with special directives like @if and {{ }}. When Laravel runs, it reads the template, checks conditions like if a user exists, and then decides which HTML to show. For example, if $user is set, Blade shows a greeting with the user's name. If not, it shows a guest message. The {{ }} syntax safely prints variables by escaping HTML. This process happens step-by-step: Laravel parses the template, evaluates PHP code, and finally sends the rendered HTML to the browser.

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