Add a new page to your app
Let’s add an about page to our app that will display information about the author of this application — you!
Generate a new page
In the Terminal app, run the following command:
This command will create a new directory under
pages. In that directory a file called
about.html.erb will be created. This file contains the content that will be displayed on your “about” page.
app/views/pages/about.html.erb file. Add some information about yourself in the HTML. Something like the example below:
rails generate command has also added a new route to your
config/routes.rb. This route configuration tells Rails which page should be shown when visiting that URL.
To see your new about page, take your browser to http://localhost:3000/pages/about (or append
/pages/about to your preview URL). You should now see the new page you just created!
Talk about routes for a moment. How does the
config/routes.rb file define what routes Rails listens to? Explain that every page in the app needs a route in this file, otherwise Rails won’t know how to show it.
Add a link to your navigation bar
Now that we know the new page works, let’s make sure people can visit it by creating a link for it in the navigation bar. That way they don’t have to guess that page exists and try to find it on their own.
app/views/layouts/application.html.erb in your Text Editor and under these lines of HTML:
add the following lines of HTML to link to the new page:
Refresh the page in your Browser and click the newly created link to see if it works! You can now navigate between the ideas and the about pages in your app through one unified navigation bar.
The changes in more detail
By adding the new “nav item” to the navigation a new link has appeared in the navigation bar, styled by Bootstrap. This link points to the new about page.
This link is made by using a
a-element, which is the HTML for a link. Using the
href property we tell the browser where to point to, in this case
/pages/about. The “About” text between the
<a ... href="/pages/about">About</a> link is what is shown as the label for the people looking at the page through the Browser.
The middle part with the
class property is what we use to indicate how the link should be displayed. If the link is “active”, it is the page we’re currently and it shows more brightly colored than the other link of the page we are currently not on.
To check if the page is currently active, Rails provides a helper called
current_page?. This condition will be “true” if it matches our page selection:
controller: 'pages', action: 'about'. The
controller is the entrypoint for anything in the
/pages path of this part of the app, and the
action is the specific page, which is “about”.
The above goes in a bit more technical detail about HTML works and how ERB can change what HTML is shown in the Browser. Help elaborate if things are unclear. Demonstrate how the page in the Browser changes by changing the HTML and ERB code.
Knowing how to add a new page and change the nav bar, you can also add a new homepage (the next guide) to your app.
If you’re ever stuck during a guide, please ask your coach for help and also consult this handy cheatsheet for Ruby, Rails, the console, the Text Editor etc.
- Guide 1: Start of the guide
- Guide 2: Get to know the tools
- Guide 3: Guide to install Rails
- Guide 4: Build Your First App
- Guide 5: Style your app using HTML and CSS
- Guide 6: Add a new page to your app (Current page!)
- Guide 7: Add a new homepage to your app
- Guide 8: Add picture uploads
- Guide 9: Push Your App to GitHub
- Guide 10: Put your app online with one of these services:
- Guide 11: Style the idea pages using HTML and CSS
- Guide 12: Add comments to your app
- Guide 13: Create picture thumbnails
- Guide 14: Test your app with RSpec
View all guides