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

Need a 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

Need a 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 --}}

Need a 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

Need a hint?

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