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 People:

$ 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. Use 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 app/views/<controller_name>.

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 <% and %> will be executed as code before you run it. Where you want to fill in the name, you can put <%= @name %>:

  <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:

$ 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 the 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 be http://webdev.cas.msu.edu:1111/hello

Swap Roles

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 git@webdev.cas.msu.edu:<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 info. This action in the controller should have a series of separate variables that contain information about you:

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 def 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.

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:

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 git pull:

$ 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 from the main hello page to the info page using the link_to and 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.