7: Creating new pages

To create a new page, we will:

Add a new route
Add a controller
Create and action
Define the view shown to the users

To understand this suite of actions, take a quick look at The Rails framework diagram. We are making sure we allow Rails to follow the full path, from request to response.

Adding a route

You can add routes by changing the file config/routes.rb.

If you open it now you can see that Devise has already added a route for your app's users on the second line with the code:

devise_for :users

To create a new route that will redirect your users to the cases on your app type in a new line:

resources :cases

and save the file. To examine existing routes, type in the terminal:

$ rake routes

Adding a controller

Now that we have a route you could try to check all the cases you now have in your system. (which is exactly 0, more will be added later).

Start the rails server. In your browser go to

localhost:3000/cases

You should see an error, both in the browser and in the terminal.

This is supposed to happen, since the controller for the cases route has not yet been set up.

To create the controller go to /app/controllers/ and create the file cases_controller.rb. Type in it:

class CasesController < ApplicationController  
end

and save.

The controller part is done.

Adding an action

If you try again loading

localhost:3000/cases

you will get another error, about a missing action index.

If you look back at the routes in the terminal (by typing rake routes) you will notice that for each path on your website there is a corresponding controller action to be made.

For the path /cases the controller action is index (as noted by the controller#action).

We did not create any action called index in our controller, so we have to do this right now! In the exising file /app/controllers/cases_controller.rb define a new action, inside the CasesController code block:

class CasesController < ApplicationController

  def index
  end

end

Now go back to the browser and refresh the page. You will see another error, but this time it will refer to a missing view for the existing controller.

Showing a view to the user

Each time an action is run, a specific view with the same name has to be shown to the user.

So for the index action we need an index view. Go to app/views and create a new folder called cases (since we’re using a cases_controller), and inside this folder create a new file called index.html.erb.

.html.erb is the file extension. The .html tells us this is an HTML file and .erb, as we will discover later, tells us that this HTML file can have some Ruby code inside it.

Type the following code in the freshly created app/views/cases/index.html.erb:

<h1>Cases</h1>  
<ul>  
    <li>Case 1: The curious case of Benjamin Button</li>
    <li>Case 2: The curious incident of the dog in the night-time</li>
    <li>Case 3: Strange Case of Dr Jekyll and Mr Hyde</li>
</ul>

Save and go check in the browser the page at

localhost:3000/cases

Oh, wow!

What the code did is it made a heading of size 1 from the text between <h1> and </h1>. It also made an unordered list with everything between <ul> and </ul>. Each list items was written between the <li> and </li> tags.

This is standard HTML notation, and it helps our browser understand how to display various items on the webpage:

Tags that start anything, say a title, are written as <TAG>
To show the end, the tag is written as </TAG>.

Using ERB inside the view

You may have noticed we didn't name the page we wanted to submit to the user index.html. The index.html part is what the user will actually see.

The file is named index.html.erb, where erb stands for embedded Ruby, and simply means that the html page will also have some Ruby code inside it.

To insert Ruby code in an html page you should type it as <%CODE%>, or <%=CODE%>, where CODE is your Ruby code.

The first command, <%CODE%> runs some Ruby code but doesn’t return anything. For example, <%end%> will end a block of Ruby commands.
The second one, <%=CODE%> will execute the code inside and return something in its place in the html. For example, <%=1 + 2 + 3%> will write 6 on the page instead of the code.

Creating new pages