Echoing data with {{ }} in Laravel - Mini Project: Build & Apply

Echoing Data with {{ }} in Laravel Blade

📖 Scenario: You are building a simple Laravel Blade template to display user information on a webpage. You want to show the user's name and email using Blade's echo syntax {{ }}.

🎯 Goal: Build a Blade template that correctly echoes the user's name and email using {{ }} syntax.

📋 What You'll Learn

Create a PHP array called $user with keys name and email and exact values.

Create a Blade template that uses {{ }} to echo $user['name'] and $user['email'].

Use semantic HTML tags to display the data clearly.

Ensure the Blade template syntax is correct and safe for output.

💡 Why This Matters

🌍 Real World

Displaying dynamic user data safely on web pages is a common task in web development. Blade's {{ }} syntax helps prevent security issues by escaping output.

💼 Career

Understanding how to echo data safely in Laravel Blade templates is essential for backend and full-stack developers working with Laravel frameworks.

1

Create the user data array

Create a PHP array called $user with these exact entries: 'name' => 'Alice Johnson' and 'email' => '[e-mail]'.

Laravel

<?php

// Create the $user array with name and email
# Your code here

Hint

Use PHP array syntax with keys 'name' and 'email' and assign the exact string values.

2

Set up the Blade template HTML structure

Create a Blade template with a <section> element containing an <h1> for the title 'User Profile' and a <div> with class user-info to hold user details.

Laravel

 'Alice Johnson', 'email' => '[e-mail]'];


  User Profile
  
    
  

Hint

Use semantic HTML tags and add the class user-info to the container div.

3

Echo the user's name and email using {{ }}

Inside the div with class user-info, add two paragraphs. Use Blade's {{ }} syntax to echo $user['name'] in the first paragraph and $user['email'] in the second paragraph.

Laravel

 'Alice Johnson', 'email' => '[e-mail]'];

?>
  User Profile
  
    
  

Hint

Use {{ $user['name'] }} and {{ $user['email'] }} inside paragraph tags.

4

Complete the Blade template with safe echoing

Ensure the Blade template uses the double curly braces {{ }} to safely echo the user data, preventing raw HTML injection. Confirm the template structure is correct and ready to render.

Laravel

 'Alice Johnson', 'email' => '[e-mail]'];

?>
  User Profile
  
    Name: {{ $user['name'] }}
    Email: {{ $user['email'] }}
  

Hint

Double check that you used {{ }} for echoing and the HTML structure is intact.

Practice

1. What does the {{ }} syntax do in a Laravel Blade template?

easy

A. It displays data safely by escaping HTML characters.

B. It runs PHP code without showing any output.

C. It comments out the code inside it.

D. It includes another Blade template file.

Solution

1. Step 1: Understand Blade syntax purpose

   The {{ }} syntax is used to show data inside Blade templates.

2. Step 2: Recognize automatic HTML escaping

   Laravel automatically escapes HTML inside {{ }} to protect from security issues.

3. Final Answer:

   It displays data safely by escaping HTML characters. -> Option A

4. Quick Check:

   Echoing data with escaping = A [OK]

Hint: Remember {{ }} always escapes output for safety [OK]

Common Mistakes:

• Thinking {{ }} runs PHP code directly
• Assuming {{ }} includes files
• Confusing {{ }} with comments

2. Which of the following is the correct way to display a variable named $name in a Blade template?

easy

A. @php echo $name; @endphp

B. {{ $name }}

C. {!! $name !!}

D. @include('name')

Solution

1. Step 1: Identify Blade echo syntax

   To display a variable safely, Blade uses {{ $variable }}.

2. Step 2: Compare options

   {{ $name }} uses {{ $name }}, which is the correct Blade syntax for echoing variables.

3. Final Answer:

   {{ $name }} -> Option B

4. Quick Check:

   Variable display uses {{ }} = D [OK]

Hint: Use {{ $variable }} to show variables safely [OK]

Common Mistakes:

• Using raw PHP tags instead of Blade syntax
• Using {!! !!} which does not escape HTML
• Trying to include variable as a template

3. Given the Blade code: <p>Hello, {{ $user->name }}!</p> and $user->name = '<strong>Alice</strong>', what will be the rendered HTML output?

medium

A. Hello, <strong>Alice</strong>!

B. Hello, Alice!

C. Hello, {{ $user->name }}!

D. Hello, <em>Alice</em>!

Solution

1. Step 1: Understand Blade escaping

   The {{ }} syntax escapes HTML tags, so <strong> will show as text, not bold.

2. Step 2: Predict output

   The output will show the tags as escaped text: <strong>Alice</strong>.

3. Final Answer:

   <p>Hello, <strong>Alice</strong>!</p> -> Option A

4. Quick Check:

   Escaped HTML output = B [OK]

Hint: {{ }} escapes HTML tags, so tags show as text [OK]

Common Mistakes:

• Expecting HTML tags to render inside {{ }}
• Confusing with {!! !!} which does not escape
• Ignoring object property access

4. What is wrong with this Blade code snippet? <p>User: {{ $user->name }}</p>

medium

A. The arrow operator is incorrect; it should be -> not ->.

B. The variable $user is not defined, causing an error.

C. The Blade syntax {{ }} cannot access object properties.

D. There is no error; the code is correct.

Solution

1. Step 1: Check syntax correctness

   The arrow operator -> is correctly written as -> in HTML to represent ->.

2. Step 2: Verify Blade property access

   Blade supports accessing object properties inside {{ }} syntax.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Proper property access in Blade = A [OK]

Hint: HTML encodes -> as ->; Blade handles it correctly [OK]

Common Mistakes:

• Thinking -> is a syntax error in Blade
• Assuming {{ }} can't access object properties
• Not defining $user variable (not shown here)

5. You want to display a user's bio that may contain HTML tags safely in a Blade template. Which is the best way to do this?

hard

A. @php echo $user->bio; @endphp without escaping.

B. {!! $user->bio !!} to render HTML tags as HTML.

C. {{ $user->bio }} to escape HTML tags.

D. {{ htmlspecialchars($user->bio) }} inside Blade.

Solution

1. Step 1: Understand security risks

   Displaying user input with HTML tags can cause security issues if not escaped.

2. Step 2: Choose safe display method

   Using {{ $user->bio }} escapes HTML tags, preventing harmful scripts.

3. Final Answer:

   {{ $user->bio }} to escape HTML tags. -> Option C

4. Quick Check:

   Safe display with escaping = C [OK]

Hint: Use {{ }} to escape user input and avoid XSS [OK]

Common Mistakes:

• Using {!! !!} which renders raw HTML and risks XSS
• Using raw PHP echo without escaping
• Manually calling htmlspecialchars inside Blade