Blade template syntax in Laravel - Mini Project: Build & Apply

Blade Template Syntax Basics

📖 Scenario: You are building a simple Laravel web page that shows a list of fruits and highlights those that are fresh.

🎯 Goal: Create a Blade template that displays a list of fruits from a given array. Use Blade syntax to loop through the fruits and conditionally show 'Fresh!' next to fruits that are fresh.

📋 What You'll Learn

Create a Blade variable called $fruits with exact entries

Create a Blade variable called $freshThreshold with the exact value

Use a @foreach loop with variables $fruit and $status to iterate over $fruits

Use a Blade @if directive to check if $status equals 'fresh' and display 'Fresh!' text

💡 Why This Matters

🌍 Real World

Blade templates are used in Laravel to create dynamic HTML pages that respond to data and user input.

💼 Career

Understanding Blade syntax is essential for Laravel developers to build maintainable and efficient web applications.

1

Create the fruits array

Create a Blade variable called $fruits as an associative array with these exact entries: 'Apple' => 'fresh', 'Banana' => 'ripe', 'Cherry' => 'fresh', 'Date' => 'dry'.

Laravel

<?php
// Create the $fruits array with exact entries
// Your code here

Hint

Use PHP array syntax inside Blade: $fruits = ['Apple' => 'fresh', ...];

2

Add a freshness threshold variable

Create a Blade variable called $freshThreshold and set it to the string 'fresh'.

Laravel

 'fresh', 'Banana' => 'ripe', 'Cherry' => 'fresh', 'Date' => 'dry'];
// Create $freshThreshold variable
// Your code here

Hint

Just assign the string 'fresh' to the variable $freshThreshold.

3

Loop through fruits with Blade @foreach

Use a Blade @foreach loop with variables $fruit and $status to iterate over $fruits. Inside the loop, display the fruit name using {{ $fruit }}.

Laravel

 'fresh', 'Banana' => 'ripe', 'Cherry' => 'fresh', 'Date' => 'dry'];
$freshThreshold = 'fresh';

{{-- Loop through fruits --}}
{{-- Your code here --}}

Hint

Use @foreach ($fruits as $fruit => $status) and close with @endforeach.

4

Add conditional freshness label

Inside the @foreach loop, use a Blade @if directive to check if $status equals $freshThreshold. If true, display the text Fresh! next to the fruit name inside the paragraph.

Laravel

 'fresh', 'Banana' => 'ripe', 'Cherry' => 'fresh', 'Date' => 'dry'];
$freshThreshold = 'fresh';

@foreach ($fruits as $fruit => $status)
    {{ $fruit }}
    {{-- Add @if to show Fresh! --}}
    {{-- Your code here --}}
    
@endforeach

Hint

Use @if ($status == $freshThreshold) and close with @endif inside the paragraph.

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