Link and URL helpers in Ruby on Rails - Mini Project: Build & Apply

Using Link and URL Helpers in Rails

📖 Scenario: You are building a simple Rails web page for a bookstore. You want to add links to navigate between the home page, the books list, and a contact page.

🎯 Goal: Build a Rails view file that uses link and URL helpers to create navigation links for Home, Books, and Contact pages.

📋 What You'll Learn

Create a variable with the page titles and their paths

Add a helper variable for the base URL

Use link_to helper to create links for each page

Use url_for helper to generate a URL for the contact page

💡 Why This Matters

🌍 Real World

Web developers often need to create navigation menus and links dynamically in Rails applications using link and URL helpers.

💼 Career

Understanding Rails link and URL helpers is essential for building user-friendly navigation and routing in real-world Rails web projects.

1

Create a hash with page names and paths

Create a Ruby hash called pages with these exact entries: 'Home' => root_path, 'Books' => books_path, and 'Contact' => contact_path.

Ruby on Rails

# Create the pages hash with names and paths
# Your code here

Hint

Use a Ruby hash with keys as page names and values as path helpers.

2

Add a base URL variable

Add a variable called base_url and set it to root_url.

Ruby on Rails

pages = { 'Home' => root_path, 'Books' => books_path, 'Contact' => contact_path }
# Add base_url variable here
# Your code here

Hint

Use the root_url helper to get the full base URL.

3

Create links using link_to

Use link_to helper inside a loop to create links for each page in pages. Use name and path as loop variables.

Ruby on Rails

pages = { 'Home' => root_path, 'Books' => books_path, 'Contact' => contact_path }
base_url = root_url

# Use link_to inside a loop to create links
# Your code here

Hint

Use pages.each do |name, path| and inside the block call link_to name, path.

4

Generate a URL for Contact page using url_for

Use url_for helper to generate the full URL for the contact page and assign it to a variable called contact_full_url.

Ruby on Rails

pages = { 'Home' => root_path, 'Books' => books_path, 'Contact' => contact_path }
base_url = root_url

pages.each do |name, path|
  link_to name, path
end

# Generate full URL for Contact page
# Your code here

Hint

Use url_for(controller: 'pages', action: 'contact', only_path: false) to get the full URL.

Practice

1. What does the Rails helper link_to primarily do?

easy

A. Generates a plain URL string

B. Creates a clickable HTML link

C. Fetches data from the database

D. Starts a new Rails server

Solution

1. Step 1: Understand the purpose of link_to

   The link_to helper is designed to create clickable links in HTML pages.

2. Step 2: Differentiate from url_for

   Unlike url_for, which returns a URL string, link_to outputs an anchor tag with the link.

3. Final Answer:

   Creates a clickable HTML link -> Option B

4. Quick Check:

   link_to = clickable link [OK]

Hint: Remember: link_to makes links, url_for makes URLs [OK]

Common Mistakes:

• Confusing link_to with url_for
• Thinking link_to fetches data
• Assuming link_to starts server

2. Which of the following is the correct syntax to create a link to the home page with text 'Home' using link_to?

easy

A. link_to 'Home', root_path

B. link_to root_path, 'Home'

C. link_to 'Home' => root_path

D. link_to('Home' root_path)

Solution

1. Step 1: Recall link_to syntax

   The correct syntax is link_to 'Link Text', path_or_url.

2. Step 2: Match options to syntax

   link_to 'Home', root_path matches this pattern exactly. Others have wrong order or syntax errors.

3. Final Answer:

   link_to 'Home', root_path -> Option A

4. Quick Check:

   link_to text, path = link_to 'Home', root_path [OK]

Hint: link_to 'text', path always in that order [OK]

Common Mistakes:

• Swapping arguments order
• Using hash rocket => incorrectly
• Missing comma between arguments

3. What will be the output HTML of this Rails code?

link_to 'Profile', user_path(5), class: 'btn'

medium

A. Profile

B. Profile

C. Profile

D. Profile

Solution

1. Step 1: Understand link_to output

   The link_to helper creates an anchor tag with href set to the URL from user_path(5).

2. Step 2: Check URL and class attribute

   user_path(5) generates "/users/5". The class attribute is added as class="btn".

3. Final Answer:

   <a href="/users/5" class="btn">Profile</a> -> Option C

4. Quick Check:

   link_to with path and class outputs anchor with href and class [OK]

Hint: link_to outputs <a> with href from path helper [OK]

Common Mistakes:

• Forgetting href attribute
• Confusing button tag with link
• Wrong URL path format

4. Identify the error in this code snippet:

link_to 'Edit' edit_user_path user.id

medium

A. Missing parentheses around method argument

B. Incorrect method name, should be edit_user_url

C. link_to requires a block, not arguments

D. Missing comma between arguments

Solution

1. Step 1: Analyze link_to syntax

   The link_to helper requires comma-separated arguments for text and path.

2. Step 2: Check argument separation

   There is no comma between 'Edit' and edit_user_path user.id, causing a syntax error.

3. Final Answer:

   Missing comma between arguments -> Option D

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Always separate arguments with commas in helpers [OK]

Common Mistakes:

• Omitting commas between arguments
• Confusing _path and _url helpers
• Thinking link_to needs a block always

5. You want to create a link that opens in a new browser tab with the text 'Docs' linking to https://guides.rubyonrails.org. Which is the correct link_to usage?

hard

A. link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener'

B. link_to 'Docs', 'https://guides.rubyonrails.org', new_tab: true

C. link_to 'Docs', url_for('https://guides.rubyonrails.org'), open_in_new: true

D. link_to 'Docs', 'https://guides.rubyonrails.org', open: '_new'

Solution

1. Step 1: Identify how to open link in new tab

   In HTML, target="_blank" opens a link in a new tab.

2. Step 2: Add security attribute

   Adding rel="noopener" prevents security risks when opening new tabs.

3. Step 3: Check options syntax

   link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener' correctly uses target: '_blank' and rel: 'noopener' as options in link_to.

4. Final Answer:

   link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener' -> Option A

5. Quick Check:

   Use target: '_blank' and rel: 'noopener' for new tab links [OK]

Hint: Use target: '_blank' and rel: 'noopener' for safe new tabs [OK]

Common Mistakes:

• Using non-standard options like new_tab or open_in_new
• Forgetting rel: 'noopener' for security
• Using incorrect target values