Learn Ruby on Rails For Web Development (2015)

Chapter 2. BUILDING OUT OUR SAMPLE APP

So we've got our development environment all set up, we've got version control up and running and we're ready to deploy our app to Heroku whenever we like. It's time to start building out our app!

In this chapter we're going to start building out pages for our app. In the next chapter we'll begin to style the app using Bootstrap, which is a CSS framework that's amazingly easy to use and allows you to build very good looking web sites without any real frontend design experience.

Before we get into Bootstrap though, let's go ahead and add another page to our app. Up until now we just have our Index page, but any app you ever build will probably have more than one page; so how do we create more pages?

ADDING MORE PAGES TO THE APP

So let's add an "About Us" page. Most websites have an "About Us" page. Adding a page is fairly easy; in fact it just takes three simple steps.

1. Manually create a page file in our Views directory.

2. Add the page to our Controller (we haven't really looked at the controller yet).

3. Set the page's Route in /config/routes.rb

Step one is easy, we just need to manually create a page in our Views directory. Generally speaking, we want to add the page to the same directory (folder) where our Index page is sitting, though that isn't absolutely necessary. In our case, that directory is /app/views/home/

To add a new page, just right click on the /app/views/home directory on the left-hand side of your development environment, and choose "New File".

(Create New File - Right Click on /app/views/home/ select "New File")

A new file will appear in front of your eyes, right there in the /app/views/home directory, and you'll need to name it. Let's call it about.html.erb

Remember, most web pages tend to end in .html but we end ours in .html.erb so that we can use embedded Ruby on the page (and we'll see an example of that soon).

So now our about.html.erb page exists, but there's nothing in there; so double click it pull it up in the editor.

You might want to double click the index.html.erb file that's sitting in the same directory too, just to jolt your memory as to what it looks like. Right now we've only got a couple of lines in our index.html.erb file:

1 <h1>Welcome To My App</h1>
2 <p>It's Gonna Kick All Ass...</p>
3

And that's fine for now...but let's get back to our about.html.erb file. Open it in the editor (it should be empty) and add a couple lines:

1 <h1>About Me...</h1>
2 <p>My Name Is (YOUR NAME HERE) and I'm Building a Pinterest Clone</p>
3

Type that in and then hit Control and S (Ctrl + S) to save the file; Command S on a Mac.

So now that file exists, but our app doesn't really know it yet...so that brings us to step two: Add the page to our Controller.

ADD OUR NEW PAGE TO THE CONTROLLER

We haven't really looked at our Controller yet, but let's do so now:

/app/controllers/home_controller.rb
1 class HomeController < ApplicationController
2 def index
3 end
4 end
5

So there really isn't much in there. This is our home controller. Why home? Because when we first generated our index page with the command: "$ rails generate controller home index", that command created a home controller (you can see it right there in the command).

Basically our controller right now isn't doing much of anything except defining that the index page exists. So let's modify it to let it know about our new About page. Easy enough:

/app/controllers/home_controller.rb
1 class HomeController < ApplicationController
2 def index
3 end
4
5 def about
6 end
4
5 end
6

We've just added two little lines, def about and end. That's all we need to do there. Now we can move on to the third and final step, adding a route to our new page.

SET THE ROUTE FOR OUR NEW PAGE

We've fiddled with our routes.rb file earlier when we changed the route to our index.html.erb file to make it our root route. Now we just need to add a route for our new about page:

/config/routes.rb
1 Rails.application.routes.draw do
2 root 'home#index'
3 get 'home/about'
4 .
5 .
6 end
7

Basically we just added the line: get 'home/about', the rest is how we left it from earlier when we added our index root route.

Be sure to save the file with Control and S (Ctrl + S) or Command S on a Mac (I can stop telling you to save files now, right? Every time we make a change to a file, just assume that you need to save it and hit Ctrl + S).

That's all there is to it, we've now successfully added an About Us Page. Fire up your web browser and point it to /home/about to see for yourself:

https://pinterested-codemy.c9.io/home/about (or whatever your URL is)

That wasn't too terribly hard, was it? That's how to add a page to your app manually, after the fact.

You can also generate pages automatically at the very start of building your app when you created the Index page by simply passing the names of the pages you want to create on to your 'generate' command.

Remember, our generate command to create our index page was:

1 $ rails generate controller home index
2

That command generated the index page and the home controller. But you could have created an about page (and any other pages you wish) at the same time like this:

1 $ rails generate controller home index about contact faq
2

You'll notice that command is the same as the one we used to create our index page; I just tacked on a few more page names to the end (about contact and faq).

That command will do everything for you. It'll create the pages themselves (about.html.erb, contact.html.erb, and faq.html.erb) inside your /app/views/home/ directory.

It will also add each of those pages to your /app/controllers/home_controller.rb

Controller (Step two), and even create routes to each of those pages in your Routes file, /config/routes.rb (Step Three).

You don't really want to use that command more than once. So if you started your app by using this command: $ rails generate controller home index and then later wanted to add more pages, you should add them manually like I showed you how to do at the beginning of this chapter, don't try to run the generate command again and tack on the pages that way. It might work, but things can get weird.

ADDING LINKS TO WEB PAGES

So now that we have two pages (index and about) we should probably link them together so that people can navigate between them.

Rails handles hyperlinks a little bit differently than regular HTML. With regular HTML a link looks like this:

1 <a href="about.html">About Us</a>
2

You can still create links that way if you want, but Rails has a better way using embedded ruby. That same link will look like this with embedded Ruby:

1 <%= link_to 'About Us', home_about_path %>
2

So let's take a look at that line of code because there are several things going on here that we need to talk about.

First of all, notice how the tag starts and ends:

1 <%= ... %>
2

Those are the opening tags and closing tags for embedded Ruby. All embedded Ruby tags will look like that (for the most part, the exception is that some leave off the = sign but we'll talk about that later).

Next, link_to is how Ruby tells our app we want to make a hyperlink, and the 'About Us' is the anchor text that will show up on the web page. Pretty straight forward.

The only tricky part of this whole thing is the home_about_path bit. That needs some explaining!

Basically we're just telling our app what route to follow. Remember when we created our 'About' page and added the route:

/config/routes.rb
1 Rails.application.routes.draw do
2 root 'home#index'
3 get 'home/about'
4 .
5 .
6 end
7

get 'home/about' is telling our app that the route to our about page is home/about and that's what we're telling our link to point towards. Instead of writing it as home/about for the link, the convention is to user home_about_path.

The _path at the end is saying "hey, it's the path to home_about".

Make sense?

So how will we know what routes are available for links? It's easy to sort of eyeball our /config/routes.rb file right now and see; but that's because we've only got two pages. As our app becomes more complicated, we'll be adding many more pages and things can get a little hard to just eyeball.

Luckily there's a command you can enter into the terminal that will show you all the routes:

1 $ rake routes
2

The rake routes command will show you all the routes currently available to you, as well as how they should be formatted for the link_to tag. Let's run the command again and look at the output:

1 $ rake routes
2 Prefix Verb URI Pattern Controller#Action
3 root GET / home#index
4 home_about GET /home/about(.:format) home#about
5

The first column shows the route you need to use for the link_to tag (you just need to slap a _path to the end of it). Notice the home_about path.

But wait, shouldn't the index path be home_index_path? No! You'll notice when we ran the rake routes command, it lists our Index page's route as root. That means if we wanted to link to that page using a link_to tag, it would look like this:

1 <%= link_to 'Home', root_path %>
2

Make sense?

So let's add our two links to our two pages, first let's add them to our Index page:

/app/views/home/index.html.erb
1 <%= link_to 'Home', root_path %>
2 <%= link_to 'About Us', home_about_path %>
3 <h1>Welcome To My App</h1>
4 <p>It's Gonna Kick All Ass...</p>
5

Save and close. Now let's add them to our About Us Page:

/app/views/home/about.html.erb
1 <%= link_to 'Home', root_path %>
2 <%= link_to 'About Us', home_about_path %>
3 <h1>About Me...</h1>
4 <p>My Name Is (YOUR NAME HERE) and I'm Building a Pinterest Clone</p>
5

Save, and then head over to your web browser and reload your page:

https://pinterested-codemy.c9.io (or whatever your URL is).

You should see those two links right at the top of the page. You can click on the 'About Us' link and it should go to your about page, where you can click on the 'Home' link and return home.

Now we're getting somewhere! It's not much functionality, but it IS functionality and we can build on it!

ADDING LINKS TO EACH PAGE IS TOO MUCH WORK

So we just added links to each of our web pages, but that was too much work because we had to add them to each of our pages. Sure, we only have two pages (index and about) but normally you'd have many more...sometimes hundreds or even thousands more. You wouldn't want to edit each of those pages every time you wanted to update a link, would you? Of course not.

Luckily Ruby gives us a solution called a 'Partial'.

CREATING PARTIALS

A partial is basically an include file. It lets us include the contents of one file in another. Creating partials is a two-step process.

1. First create your partial file

2. Next call the partial file from another file

Creating a partial file is done in a similar way to creating our 'About' page (but we don't need to add a route or fiddle with the Controller). Just right click on your /app/views/home/ folder and select "New File". There is one small difference.

When you name your new file, put an underscore in front of it. So if you wanted to create a partial file called header.html.erb you would name that:

_header.html.erb

In fact, do that now. Right click on your /app/views/home/ directory folder and create a new file called _header.html.erb

Now double click that file to open it in the text editor, and let's copy in our two links:

/app/views/home/_header.html.erb
1 <%= link_to 'Home', root_path %>
2 <%= link_to 'About Us', home_about_path %>
3

Save that file and close it. That's all there is to step one of creating a partial. Let's move on to step two. To call a partial in another file, you'll use this embedded Ruby tag:

1 <%= render 'home/header' %>
2

It's pretty straight forward. Render tells our app to render the partial, and 'home/header' tells our app where to find the partial file.

You might think that it should instead be 'home/_header.html.erb' instead of the simpler 'home/header', but it's not. Rails knows that by calling render home/header you're really asking it to display your _header.html.erb file.

So let's change our Index page to reflect this and get rid of the links we put in earlier:

/app/views/home/index.html.erb
1 <%= render 'home/header' %>
2 <h1>Welcome To My App</h1>
3 <p>It's Gonna Kick All Ass...</p>
4

Save that file, then head back to your web browser and reload the page at:

https://pinterested-codemy.c9.io (or whatever your URL is)

It should look the same as it did earlier, with the two links to Home and About Us at the top of the page. The only difference is that those links were called from our Header partial.

You might think it wise to replace the links on your About Us Page with the <%= render 'home/header' %> tag, BUT WAIT!

Before you do that, Rails makes this all EVEN EASIER...which means that it's now time to discuss the application.html.erb file.

INTRODUCING LAYOUTS/APPLICATION.HTML.ERB

You might have noticed a Layouts folder in your /app/views/ folder. What is it? The Layouts folder contains a file called application.html.erb and that's a special file.

It holds the skeleton framework for every web page in our app. Let's take a look at it:

/app/views/layouts/application.html.erb
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Workspace</title>
5 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
6 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7 <%= csrf_meta_tags %>
8 </head>
9 <body>
10
11 <%= yield %>
12
13 </body>
14 </html>
15

So what's going on here? Basically the contents of this file get called and outputted to the web browser any time a page of your site gets viewed online. The interesting line to notice here is the <%= yield %> tag.

Basically, that tag is calling the contents of your page and outputting it right there.

So if you went to: https://pinterested-codemy.c9.io/home/about

The application.html.erb file gets called behind the scenes, it grabs all the stuff from your about.html.erb file and outputs it where the <%= yield %> tag is.

In fact, if you go to your https://pinterested-codemy.c9.io/home/about page in your web browser and view the page source (right click on the screen and choose "view page source"), you'll see code that looks just like the application.html.erb file.

(https://pinterested-codemy.c9.io/home/about View Source - Source Code)

Pretty neat.

What that means for us, is there's no need to render our Header partial on every page of our site, we can simply render it on our application.html.erb file right above the <%= yield %> tag!

So let's do that now. Open your index.html.erb file and erase the partial line:

1 <%= render 'home/header' %>
2

Just take it right out, and save the index.html.erb file. Now we're going to add that exact line to our application.html.erb file:

See how we added it to line 10? Save the file and close, now head back to your site: https://pinterested-codemy.c9.io (or whatever your URL is)

You should see our Header links from our Header partial there at the top of the screen, and if you click the About Us link, you should see the Header links at the top of it too!

Now any page we create in our app will have those links at the top of the screen. And any time we want to change the links in the top Header, all we have to do is edit the list of links in our _header.html.erb file one time and the change will be reflected on all of our pages.

Pretty cool.