ERB template syntax in Ruby on Rails - Mini Project: Build & Apply

ERB Template Syntax Basics

📖 Scenario: You are building a simple webpage for a small bakery. You want to display a welcome message and a list of your top 3 favorite pastries using Ruby on Rails with ERB templates.

🎯 Goal: Create an ERB template that shows a greeting message and dynamically lists the pastry names using ERB syntax.

📋 What You'll Learn

Create a Ruby array called pastries with exactly these strings: "Croissant", "Eclair", "Macaron"

Create a string variable called greeting with the exact value "Welcome to Sweet Treats Bakery!"

Use ERB output tags <%= %> to display the greeting inside an <h1> tag

Use ERB control flow tags <% %> with a for loop to iterate over pastries and display each pastry inside an <li> tag within a <ul>

💡 Why This Matters

🌍 Real World

ERB templates are used in Ruby on Rails to create dynamic HTML pages that change based on data from Ruby code.

💼 Career

Understanding ERB syntax is essential for Rails developers to build interactive and data-driven web applications.

1

Create the pastries array

Create a Ruby array called pastries with these exact strings: "Croissant", "Eclair", "Macaron"

Ruby on Rails

# Your code here

Hint

Use square brackets [] to create an array and separate items with commas.

2

Create the greeting string

Create a string variable called greeting with the exact value "Welcome to Sweet Treats Bakery!"

Ruby on Rails

pastries = ["Croissant", "Eclair", "Macaron"]
# Your code here

Hint

Use double quotes "" to create the string exactly as shown.

3

Display the greeting with ERB output tag

Use an ERB output tag <%= greeting %> inside an <h1> tag to display the greeting variable.

Ruby on Rails

pastries = ["Croissant", "Eclair", "Macaron"]
greeting = "Welcome to Sweet Treats Bakery!"


  

Hint

Use <%= %> to output Ruby variables in ERB templates.

4

List pastries using ERB for loop

Use an ERB control flow tag <% for pastry in pastries %> to loop over pastries and display each pastry inside an <li> tag within a <ul>. Close the loop with <% end %>.

Ruby on Rails

pastries = ["Croissant", "Eclair", "Macaron"]
greeting = "Welcome to Sweet Treats Bakery!"


  



  

Hint

Use <% %> for Ruby code that does not output directly, and <%= %> to output values inside the loop.

Practice

1. Which ERB tag should you use to display the result of a Ruby expression inside HTML?

easy

A. <% %>

B. <%# %>

C. <%= %>

D. <%== %>

Solution

1. Step 1: Understand ERB tags for output

   The <%= %> tag evaluates Ruby code and inserts the result into the HTML.

2. Step 2: Compare with other tags

   <% %> runs Ruby code without output, <%# %> is a comment, and <%== %> is not standard ERB syntax.

3. Final Answer:

   <%= %> -> Option C

4. Quick Check:

   Output Ruby result = <%= %> [OK]

Hint: Use <%= %> to show Ruby results in HTML [OK]

Common Mistakes:

• Using <% %> which does not output anything
• Confusing comment tag <%# %> with output
• Trying to use <%== %> which is invalid

2. Which of the following is the correct syntax to run Ruby code without showing output in an ERB template?

easy

A. <%== ruby_code %>

B. <%= ruby_code %>

C. <%# ruby_code %>

D. <% ruby_code %>

Solution

1. Step 1: Identify ERB tags for code execution

   The <% %> tag runs Ruby code but does not insert output into HTML.

2. Step 2: Differentiate from output tags

   <%= %> outputs result, <%# %> is a comment, and <%== %> is invalid syntax.

3. Final Answer:

   <% ruby_code %> -> Option D

4. Quick Check:

   Run code without output = <% %> [OK]

Hint: Use <% %> for Ruby logic without output [OK]

Common Mistakes:

• Using <%= %> which outputs result
• Using <%# %> which comments out code
• Trying invalid <%== %> syntax

3. Given this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><%= item.upcase %></li>
  <% end %>
</ul>

What will be the rendered HTML if items = ['apple', 'banana']?

medium

A. APPLEBANANA

B. item.upcaseitem.upcase

C. applebanana

D.

Solution

1. Step 1: Understand the loop and method call

   The code loops over each item in the array and outputs the uppercase version using item.upcase.

2. Step 2: Predict the HTML output

   Each item is wrapped in <li> tags with uppercase text, so the list shows APPLE and BANANA.

3. Final Answer:

   <ul><li>APPLE</li><li>BANANA</li></ul> -> Option A

4. Quick Check:

   Loop with upcase output = <ul><li>APPLE</li><li>BANANA</li></ul> [OK]

Hint: Remember <%= %> outputs evaluated Ruby code [OK]

Common Mistakes:

• Expecting original lowercase instead of upcase
• Thinking <% %> outputs text
• Confusing string literal with method call

4. Identify the error in this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><% item.upcase %></li>
  <% end %>
</ul>

medium

A. Syntax error in the loop declaration

B. Missing output tag; item.upcase won't display

C. Extra closing tag <% end %> is invalid

D. Using <%# %> instead of <% %> for code

Solution

1. Step 1: Check the ERB tags around item.upcase

   The code uses <% item.upcase %> which runs Ruby but does not output anything.

2. Step 2: Understand output requirement

   To show the uppercase text, it should use <%= item.upcase %> instead.

3. Final Answer:

   Missing output tag; item.upcase won't display -> Option B

4. Quick Check:

   Use <%= %> to output values [OK]

Hint: Use <%= %> to output, <% %> only runs code [OK]

Common Mistakes:

• Confusing <% %> with output tag
• Thinking loop syntax is wrong
• Believing extra end tag causes error

5. You want to conditionally display a message in ERB only if user.admin? is true. Which snippet correctly does this?

hard

A. <% if user.admin? %>Welcome, admin!<% end %>

B. <%= if user.admin? %>Welcome, admin!<% end %>

C. <% if user.admin? %><% 'Welcome, admin!' %><% end %>

D. <%= user.admin? ? 'Welcome, admin!' %>

Solution

1. Step 1: Understand conditional rendering in ERB

   <% if user.admin? %> starts an if block where literal text like "Welcome, admin!" is rendered only if true, ended by <% end %>.

2. Step 2: Why others fail

   B: Invalid syntax (<%= if %> can't start control flow like that). C: Inner <% %> runs code but outputs nothing. D: Incomplete ternary (missing : '').

3. Final Answer:

   <% if user.admin? %>Welcome, admin!<% end %> -> Option A

4. Quick Check:

   Conditional literal text output = <% if %>...<% end %> [OK]

Hint: Use <% if cond %> text <% end %> for conditional display [OK]

Common Mistakes:

• Using <% %> for text inside conditional (no output)
• Incomplete ternary missing : false_expr (syntax error)
• Using <%= if cond %> (invalid Ruby syntax)