Blade directives in Laravel - Step-by-Step Execution

Concept Flow - Blade directives

Start Blade Template

↓

Read Blade Directive

↓

Match Directive Type

↓

Evaluate

↓

Render HTML Output

↓

End Template

Blade reads each directive, decides its type (condition, loop, include), evaluates it, and renders the HTML output accordingly.

Execution Sample

Laravel

@if($user)
  <p>Welcome, {{ $user->name }}!</p>
@else
  <p>Please log in.</p>
@endif

This Blade snippet checks if a user exists and shows a welcome message or a login prompt.

Execution Table

Step	Directive Read	Condition/Loop	Evaluation Result	Rendered Output
1	@if($user)	Check if $user exists	True	<p>Welcome, John!</p>
2	@else	Skipped because @if was true	N/A	No output
3	@endif	End if block	N/A	No output

💡 Reached @endif, finished conditional rendering.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
$user	null or User object	User object (John)	User object (John)	User object (John)

Key Moments - 2 Insights

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

Because in the execution_table at Step 1, the @if condition is true, so Blade skips the @else block as shown in Step 2.

What happens if $user is null?

The @if condition at Step 1 would be false, so Blade would skip to the @else block and render '<p>Please log in.</p>'.

Visual Quiz - 3 Questions

Look at the execution_table, what is rendered at Step 1 when $user exists?

A <p>Please log in.</p>

B <p>Welcome, John!</p>

C No output

D Error message

💡 Hint

Check the Rendered Output column at Step 1 in the execution_table.

At which step does Blade decide to skip the @else block?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the Condition/Loop and Evaluation Result columns for Step 2 in the execution_table.

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

A Step 1 evaluation would be false, and Step 2 would render '<p>Please log in.</p>'

B Step 1 would render welcome message anyway

C Step 3 would render an error

D No change

💡 Hint

Refer to the key_moments explanation about $user being null.

Concept Snapshot

@if(condition)
  // HTML if true
@else
  // HTML if false
@endif

@foreach($items as $item)
  // Loop content
@endforeach

@include('partial')

Blade directives control template logic and rendering flow simply.

Full Transcript

Blade directives in Laravel templates let you add logic like conditions and loops inside HTML. For example, @if checks a condition and shows content if true, otherwise @else content. Blade reads each directive, evaluates it, and renders the matching HTML. In the example, if $user exists, it shows a welcome message; if not, it asks to log in. The execution table shows each step: reading the directive, evaluating the condition, and rendering output. Variables like $user change state before and after evaluation. Understanding when Blade skips or renders blocks helps avoid confusion. This visual trace helps beginners see how Blade templates run step-by-step.