For this part of the lab, you are to create a new dynamic web application that can dynamically display information about a single student.
Create a New Controller
When creating a new rails application, the first thing you have to do is to use the rails command to create the application, like we did last week:
$ new_repo lab2 $ rails new lab2
Don’t forget to check the auto-generated code into the git repository:
$ cd lab2 $ git add . $ git commit
Next, we can use rails to create a new controller for us. Let’s name this controller
$ rails generate controller People
This second command creates a number of new files. Specifically, the one of interest is
app/controllers/people_controller.rb. This is the file where the code for the People controller is stored.
nano to open this file:
$ nano app/controllers/people_controller.rb
Currently, this file doesn’t contain much; it just declares a
PeopleController class. Let us add a new action
to this controller, which we will call
hello. We add actions by adding a new method to the class:
class PeopleController < ApplicationController def hello @name = "Rick Wash" end end
(Of course, fill in your own name)
Create a New View Page
Next, we need to create a view for this action. The view is the dynamic webpage that is generated when a user visits
the action. View pages are stored in the directory
One the command line, change to the directory
app/views/people and use the command
nano to create a
new file. Name the file
hello.html.erb . Note that this name is important.
hello is the name of
the action that this file corresponds to. The extension
.html.erb tells rails that this is a dynamically
generated HTML file.
$ nano app/views/people/hello.html.erb
Now, we can fill in this file. It is a normal HTML file. However, anything you put between
%> will be executed as code before you run it. Where you want to fill in the name, you can put
<h1> Hi there </h1> <p> Hello, <%= @name %>. Have a good day. </p>
Create a Named Route
All routes that we create will be stored in the file
config/routes.rb. Edit this file with
$ nano config/routes.rb
You want to add the following line somewhere in the middle of the file (between the
do on the first line and
end on the last line):
get 'hello' => 'people#hello', :as => 'main'
Look at the Resulting Webpage
To view this dynamically generated webpage, you need to first run your web server:
$ rails server --port=1111
(Of course, replace the port number with the last 4 digits of your PID, or any other 4-digit number greater than 1000)
Now you can go visit this page. Remember, you want to use the url to display the
hello route. So the URL will
Now, swap roles with your pair programmer. If you are driving, move to being the navigator. If you are navigating, become the driver. This way, you both get an opportunity to write code, and to think about what is happening.
Remember, when swapping, the current driver needs to check his or her changes into the git repository, and push the changes to the server:
$ git add . $ git commit $ git push origin master $ repo_add_user lab2 <username>
Then you can change roles. The new person should log in as themselves, and pull the changes:
$ git clone firstname.lastname@example.org:<username>/lab2
Verify that this code still works, and then continue with the lab.
Create an Info Page for Yourself
Next, we have the main exercise this lab. Add another action to the people controller called
This action in the controller should have a series of separate variables that contain information about you:
- Full Name
- Year In School
Also, create a new view for this action. This view should be an HTML page that displays the above information.
However, it should be dynamically generated; your personal information should only be stored in the controller file, not
in the actual HTML file. Use
<%= @variable %> to fill in the values where appropriate. Also, don’t forget to
create a new route in the
config/routes.rb file for your new action.
Hint: Adding a second action
To add a second action to a controller, you create a second function inside of that controller. Remember, the
line creates the function, so you have to add a second one:
class PeopleController < ApplicationController def hello @name = "Rick Wash" end def second @var1 = "one" @var2 = 23 end end
You also need to add a new file
app/views/people/second.html.erb that contains the html.
You also need to add a new line to the
config/routes.rb file to create a second route.
Once you’ve created all of these file, be sure to test and make sure it works. Run the
rails server and open the
web page in a web browser and make sure it looks like what you expect it to.
Add a Link to the Hello page
Once you have the ‘info’ action working, we can add a link to the Hello page that links to the info page. To do that, we need to know two functions:
- When you created the route in
config/routes.rb, you gave that route a name by saying
:as => "name". What that does it automatically create a new function called
name_url(replacing name with whatever you called it) that returns the correct URL for that route.
- This function link
Putting these together, we want to add a link to the bottom of the info page. Open the
info.html.eb file and
add the following to the bottom:
<%= link_to("Back to the Main Page", main_url) %>
Visit the info page in your web browser and click on the link to verify that it works correctly.
Swap Roles Again
Swap roles with your pair, so the original driver is now the driver again.
This time, rather than using
git clone to pull the changes from the server, you should just be able to use
$ cd lab2 $ git pull
Modify the Info page
The second exercise for this lab. Change the contents of the info page so that it displays the information about the current driver. You should be able to accomplish this solely by changing the controller file.
Add a Link Back
Add a link from the main hello page to the info page using the
the url_generating functions.
Once you have the info page working, and both pages linking to each other, let the instructor know. After he verifies you did it correctly, lab is over and you may leave.