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
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:
To create a new route that will redirect your users to the cases on your app type in a new line:
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).
rails server. In your browser go to
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
The controller part is done.
Adding an action
If you try again loading
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
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
.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
<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
What the code did is it made a heading of size 1 from the text between
</h1>. It also made an unordered list with everything between
</ul>. Each list items was written between the
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
- To show the end, the tag is written as
Using ERB inside the view
You may have noticed we didn't name the page we wanted to submit to the user
index.html part is what the user will actually see.
The file is named
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 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.