For this lab, you are to create a dynamic web application that accepts information about a student from the user and then formats and displays that information in a web page.

Create a New Applications and Controller

We start by creating a new rails application using the rails command, like we did last week:

$ new_repo lab3
$ rails new lab3

Don’t forget to check the auto-generated code into the git repository:

$ cd lab3
$ 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.

Currently, this file doesn’t contain much; it just declares a PeopleController class. Let us add two new actions to this controller, which we will call input and output. We add actions by adding a new method to the class:

class PeopleController < ApplicationController

  def input
  end

  def output
  end
end

Notice that these functions don’t do anything (yet). The important thing is that they exist.

Add Routes

Whenever we create new actions in a controller, we need to make sure that there are corresponding routes. This way, there is a URL that allows the user to access that action. In this case, we need to add the following two lines to config/routes.rb:

get '/input', to: 'people#input', as: 'input'
post '/output', to: 'people#output', as: 'output'

Create a View Page for the Input

Next, we need to create a view for this action. Remember, view pages are stored in the directory app/views/<controller_name>.

We need to create a new view file for the input action. View files are named app/views/<controller_name>/<action_name>. Therefore, to create a view for the input action in the People controller, we want to name the file app/views/people/input.html.erb. Create this new file using nano command on the command line:

$ nano app/views/people/input.html.erb

Remember, this name is important; input is the name of the action we created, so rails will look for the file input.html.erb that corresponds to the action.

Now, we can fill in this file. There are two ways to insert code into a rails view page:

<% *code* %>
This just executes the code in between the brackets
<%= *code* %>
This executes the code and then outputs the results into the web page

Remember last week, we used the version with the equals to insert the contents of a variable into the webpage.

Add a Form to the Input Page

Remembering last week’s lecture, user input elements are part of the view. For this week’s lab, we want to create a form for user input. To do so, we can use a couple of useful functions that rails provides:

form_tag(url)
Creates the opening and closing tags for a form correctly. Expects a block.
text_field_tag(name, value, options)
Creates a text field called name that is default filled in with value. Additionally, you can specify a size as an option using :size => '20'
submit_tag(value)
Creates a submit button with the label value. When clicked, it submits the form Additionally, more helper functions for forms can be found in the rails documentation here.

Now let’s add a basic form to our input view page:

  <h1> Hi there </h1>
  <%= form_tag(output_url) do %>
    Hello.  Please enter your full name: <br />
    <%= text_field_tag("name", "", size: 20) %> <br />
    <%= submit_tag("Submit") %>
  <% end %>

Note that we use a block (doend) after the form_tag function, and that this function is surrounded by <%= %> and not the version without the equals sign. This is because the form needs to be output to the resulting HTML page.

Next, we need test this page and see if it works. Open up a Terminal window. In that window, ssh to the server. Then change directories to the lab3 directory, and run your server:

$ cd lab3
$ rails server --port=1111

Next, open up a web browser and go to your view page: http://webdev.cas.msu.edu:1111/input (don’t forget to change the port number) . You should see a form where you can enter your name, and a submit button.

Receive the Form Data in the Controller

Rails makes available a params array that contains the submitted form data:

params[:variable]
Contains the value of the variable field in the form that was submitted.

Our first step is to create class variables in the controller to store these values and pass them to the view page:

  def output
    @name = params[:name]
  end

Display the Form Data in the Output View

Next, we can create a view that uses this information. We need to create the output.html.erb file. (What directory does it have to be in? app/views/people/) Next, we fill out this view file, using @name just like we used variables last week:

  <h1> Hello, <%= @name  %> </h1>
  <p>
    Thank you for telling me your name
  </p>

Go to your page and test it to see if it works. What should it do? You should be able to enter your name in a field on the input page, and it should print out a hello message customized to you on the output page.

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 lab3 <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>/lab3

Verify that this code still works, and then continue with the lab.

Create a Student Data Input/Output System

Your assignment for this lab is to modify the output view to create a second form that asks for the same information from the previous lab:

This output form should then submit to a new action info that displays all of the user-submitted information, including the user’s name that was submitted by the input form.

To pass the name on from the output form to the info action, you can use a hidden_field_tag that includes a value in a form without actually displaying anything on the webpage:

hidden_field_tag(name, value)
Creates a hidden form element. It isn’t displayed on the screen, but is part of the form and will be submitted to the next page. params[:name] will contain value

So, to summarize, you should have an input action that displays a simple form that asks for the user’s name. This form should submit to the output action, when then displays a page that says hello to them by name, and asks them for the 4 pieces of additional information. That form should submit to the info action, which will accept all of the form data and output all of the user’s information in a structured way. Also, don’t forget to create the new route in config/routes.rb; you may need to restart your server after editing the routes file.

So, the workflow of this application will be: input —> output —> info

Hint

<%= hidden_field_tag('name', @name) %>