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
$ 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.
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
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.
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
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
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
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:
- Creates the opening and closing tags for a form correctly. Expects a block.
text_field_tag(name, value, options)
- Creates a text field called
namethat is default filled in with
value. Additionally, you can specify a size as an option using
:size => '20'
- 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 (
end) after the
form_tag function, and that this function is
<%= %> 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:
- Contains the value of the
variablefield 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
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.
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 email@example.com:<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:
- Year in School
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
To pass the name on from the
output form to the
info action, you can use a
that includes a value in a form without actually displaying anything on the webpage:
- 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.
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:
<%= hidden_field_tag('name', @name) %>