Internal Links Hyperlinking to a Page within the App

In this demonstration, I will show how to create a hyperlink that links to an existing webpage within the web app.

General Steps

In general, the steps for adding a hyperlink that links to an existing webpage within the web app are as follows.

Step 1 Find the Path Helper Prefix. This step searches the web app’s routes to find the path helper prefix for the webpage to which we wish to link. We need to find this prefix, so we will know the name of the path helper method to call in the next step.
Step 2 Add the Link. This step adds to a webpage the hyperlink to the target webpage using a view-helper method.

Adding a Hyperlink to the Billy Books About Webpage

To demonstrate the steps for adding a hyperlink that links to an existing webpage in the app, we will be adding to the home page of the Billy Books bookstore base app a hyperlink to the about page, as illustrated in Figure 1.

A screenshot of the bookstore home page that now has a link with the text, 'Learn more about the origins of Billy Books!'. — Figure 1. The Billy Books home page with a hyperlink to the about page.

Base App Code

Step 1 Find the Path Helper Prefix

To find the path helper prefix for the Billy Books about page, we will look in a listing of the web app’s routes for the route information regarding the about page. To get a listing of the routes, we run the following command in the terminal:

rails routes -E

This command outputs a long listing of route information. The route for the about page should have an HTTP verb of GET and a resource path (labeled “URI” in the listing) of /about. We scan the list of routes for one matching these traits, and we find the following entry:

--[ Route 2 ]-------------------------------------------------------------------------------------------------------------------
Prefix            | about
Verb              | GET
URI               | /about(.:format)
Controller#Action | pages#about

We see from this entry that the prefix for the about page is about; thus, we know that the path helper method for the about page is called about_path.

Step 2 Add the Link

To update the home page with a hyperlink to the about page, as shown in Figure 1, we add HTML and embedded Ruby to the home page’s view template, app/views/pages/home.html.erb, like this:

<h1>Welcome to Billy Books!</h1>

<p>
  Come visit us at 7107 Juniper Road Fairbend, TN, 37062!
</p>

<p>
  <%= link_to 'Learn about the origins of Billy Books!', about_path %>
</p>

<p>
  Store Hours:
</p>

…

The link_to method is a view helper that returns a string containing the HTML code for a hyperlink (specifically, an <a> element). Because the call to link_to is embedded within a <%= … %> tag (note the =), the HTML string returned by the call will be inserted directly into the webpage. The link_to call takes two arguments. The first argument is the hyperlink text that will appear on the webpage, and the second argument is the path to the webpage that is the destination of the hyperlink. For hyperlinks to webpages within the web app, we always call a path helper method (e.g., about_path) for the second argument.

Test It!

To test that this step was completed correctly, we run the web app (as per the steps in the running apps demo), and we open the URL http://localhost:3000/home in our web browser. The webpage displayed should look exactly like Figure 1. Clicking on the hyperlink should open the about page (http://localhost:3000/about).

Step 2 Changeset

Conclusion

Following the above steps, we have now added to the home page of the Billy Books bookstore app a link to the app’s about page.

Demo App Code