To Lecture Notes

IT 231 -- 10/18/12

Review Questions

1. Explain what these lines do in show.html.erb of Example 23?
   

   (a)  <%= form_tag 'show' do %>
   
   (b)  <%= text_field_tag :celsius, @c %>
   
   (c)  <%= submit_tag 'Convert Temperature' %>
   
   (d)  <% end %>
   

   Ans: Line a says that the data values in any control in the form (between lines a and d) will be submitted back to the controller method corrsponding to the action convert. Line b defines the text field control as having the name :celsius and initial value @c. Line c says that the caption on the submit button is Convert Temperature. The form is submitted to the controller when the submit button is clicked. Line b terminates the form. A different IRB delimiter is used for the end statement because end is a control statement and does not generate any HTML code on the client end.
    
2. Explain what these lines do in convert_controller.rb of Example 23:
   

   (a)  input = params[:cel]
   
   (b)  @c = input.to_i
   
   (c)  @f = 9 * @c / 5 + 32
   

   Ans: (a) params[:cel] obtains the string from the :cel control and assigns it to the local variale input. (b) Assigns input converted to an integer to the instance variable @c. (c) Converts @c to Fahrenheit and assigns it to the instance variable @f.
    
3. How do you identify a Rails symbol?
    
   Ans: A symbol starts with a colon ( : ). It is used for the names of controls and also for the names of optional parameters.
    
4. Suppose that you have entered the controller source code and the view source code in convert.html.erb correctly. The page displays correctly, but when the submit button is clicked, the error message "No such route [POST] /temp_converter/convert" is displayed. What is wrong?
    
Ans: You may not have entered a new post route in config/routes.rb:


post "/controller/action"

5. Why should you test frequently when typing in code for the controller and views?
    
   Ans: Because if you type in everything first, you will probably make many errors and they will be difficult to fix. If you type in a little at a time, the errors will be easier to find.
    
6. What is the HTML tag name and type attribute for each of these controls:
    
   
   Text Field    Submit Button
   
   Ans:
    
   

   Control	Tag Name	type attribute
   Text Field	input	text
   Submit Button	input	submit

   
   
   
7. Why is a form tag required whenever you want to send data from a page back to the controller?
    
   Ans: Because a form tag is required in the generated HTML code. This is the way that HTTP manages data that is being sent back to the server.
    
8. Modify the ChineseZodiac Example (Examples 20) so that it accepts the year in a dropdown box and displays the verses of the song in the browser.
    
   Note: there is a separate set of helper methods called the FormHelper methods that are similar to the FormTagHelper methods, but which are designed to work closely with a database created with a model statement. We will use FormHelper methods for Project 5.

The Array each Method

• Use each method to repeat a code block for each item in a range or array:
  

  # Example 1
  a = [3, 4, 5, 6, 7]
  a.each do |i|
     puts i + 1
  end
  
  Output:
  4
  5
  6
  7
  8
  
  # Example 2
  sum = 0
  r = [3, 4, 5, 6, 7]
  r.each do |i|
     sum = sum + i
  end
  puts sum
  
  Output:
  25    (The sum of the numbers in the array.)
  
  # Example 3
  pets = ['fido', 'felix', 'jerry']
  pets.each do |p|
      puts "I love my pet " + p + "."
  end
  
  Output:
  I love my pet fido.
  I love my pet felix.
  I love my pet jerry.
  

• Practice Problems:
   
  
  1. Create a Rails model Student with fields stud_id: integer, last_name:string, first_name:string, Append this Ruby seed code to the file db/seeds.db. Then seed the database with startup values with
     

     rake db:seed
     

     Now start the Rails console and load all of the records from the database into an array with

     a = Student.all
     

     Use for..each statements or each methods to print the first and last names for all the grade records:
     

     a.each do |g|
       print "#{g.first_name} #{g.last_name}\n"
     end
     

  2. Add a controller named Students with a view named display to the project in Question 1.
      
     
     1. Add this statement to the display method in the students_controller.rb file:
        

        # Assign the array of table rows 
        # to the instance variable @a.
        @a = Person.all
        

     2. Put code in the display view using the Array each method that displays the data from the students table in an HTML table.

Hex Color Codes

• Discuss Hex Color Codes.
   
• A Hex to Decimal Conversion Table
   
• Match Color Game
   
• While most browsers accept color codes with decimal components like this:
  

  body { background-color: rgb(245,245,255) }
  

  such a color code is not strictly XHTML complient.
   
• To be complient, Use a hex color code instead:
  

  body { background-color: #f5f5ff; }
  

• The only XHTML complient methods for specifying a color are:
   
  
  1. use a hex color code,
      
  2. use one of the seventeen HTML named colors:
      
     
     aqua  black  blue  fuschia  gray  green  grey  lime  maroon  navy  olive  purple  red  silver  teal  white  yellow
     
     
• Even the extended HTML colors that are not one of the 17 HTML colors are not XHTML complient.
   
• In addition to being XHTML complient, hex color codes are standard for professional web designers.

The Range Class

• Look at the Range Class UML Diagram.
   
• Two ways to create a new Range object.
  

  # 1. Create a range that includes the end using new method.
  r = Range.new(1, 5)
  
  # 2. Shortcut to create a range that includes the end.
  r = 1..5
  

• Write code that tests some of the methods of the Range class in the UML diagram.
   
• Ruby code that tests the VendingMachine class using a nested for statement with ranges.

Project 5

• Example 28 (OnlneQuiz Example)
   
• Discuss Project 5.

FormHelper vs. FormTagHelper Methods

• Use FormHelper methods when you are using a form to edit a row in a database, or to add a new row to the database.
   
• Use FormTagHelper methods when the piece of data you are inputing does not directly correspond to any field in the database.
   
• References:
   
  api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html
   
  api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html
   
  
  1. Form
      
     FormTagHelper Version:
     

     <% form_tag 'show' do %>
     ... Controls go here.
     <% end %>
     

  FormHelper Version:
  

  <% form_for @item, :url => { :action => 'show' } do |f| %>
  ... Controls go here.
  <% end %>
  

  2. Textfield
      
     FormTagHelper Version:
     

     <%= text_field_tag :celsius, '20', :class => 'tf' %>
     

     :celsius is the name; '20' is the initial value.
      
     FormHelper Version:
     

     <%= f.text_field :celsius, :class => 'tf' %>
     

     :celsius is the field of the database object f.
      
  3. Dropdown Menu
      
     FormTagHelper Version:
      
     

     <%= select_tag :source_rate,
           options_for_select([['Dollars', 1.00000],
                               ['Euro', 1.36749],
                               ['Pesos', 12.6149],
                               ['Pounds', 1.58228]]),
           :class => 'ddm' %>
     

     :source_rate is the name; the first column of the array are the values displayed in the dropdown menu; the second column are the values returned to the controller to be read by a params statement. the option tags are the HTML option tags.
     
      
     FormHelper Version:
     

     <%= f.select :source_rate, 
          [['Dollars', 1.00000],
           ['Euro', 1.36749],
           ['Pesos', 12.6149],
           ['Pounds', 1.58228]],
          :class => 'ddm' %>
     

     :source_rate is the field of the database object f; the values of the dropdown menu are specified in the array as they were in the FormTagHelper version; note that for the FormHelper version, no options_for_select method is needed.
      
  4. Radio Button
      
     FormTagHelper Version:
     

     <%= radio_button_tag :group, value, true %>
     

     :group sets the button group (in a group of radio buttons, only can be checked at a time)
     :value is the value returned to the controller to be read by a params statement
     true means that the radio button should be initially checked.
      
     FormHelper Version:
     

     <%= f.radio_button :group, value, :checked => true %>
     

     :group sets the button group (in a group of radio buttons, only can be checked at a time)
     value is the value returned to the controller to be read by a params statement
     :checked => true means that the radio button should be initially checked.
      
  5. CheckBox
     
      
     FormTagHelper Version:
     

     <%= check_box_tag :sugar, 1, true, :class => 'cb' %>
     

     :sugar is the name of the checkbox
     1 is the value returned to the controller in a params statement
     false means that the checkbox is initially checked.
      
     FormHelper Version:
     

     <%= f.check_box :sugar, 1, :checked => true, :class => 'cb' %>
     

     :sugar is the name of the checkbox
     1 is the value returned to the controller in a params statement, 0 will be returned if the box is not checked.
     :checked => true means that the checkbox is initially checked.
      

Examples of Forms Using FormHelper Methods

• See Examples 28 and 29 (OnlineQuiz and CreditCard examples). Use these examples to help you with Project 5.