7/18/12 Notes

IT 231 -- 7/18/12

Review Questions

What is a Command Prompt Window and why would you want to use it? How do you invoke it?
Ans: The black window in which you can enter DOS commands and Rails commands to create a Rails project. You invoke it with Start >> All Programs >> Accessories >> Command Prompt. P. S. You can change the background color of the window if you wish.
What is the Windows Explorer and why would you want to use it? How do you invoke it?
Ans: An application that allows you to find files, and delete, rename, and move them. It also allows you to delete, rename, and move folders (also called directories).
Why should you set your Windows Explorer to show file extensions?
Ans: If it does not show file extensions, you cannot change the file extension, or you might think that the file extension is different than it actually is.
What is Lorem Ipsum text?
Ans: It is dummy text, which is randomly generated fake Latin text used for testing out page layouts and styles where you don't want the reader to be distracted by the content.
What would you write in your XHTML source code file to get the browser to literally display this tag?
Show HTML source code to literally display the answer to Question 1.
Ans: &lt;html&gt;
How is a non-breaking space different than an ordinary space in HTML?
Ans: All but one ordinary spaces between are eliminated between words by the browser. Non-breaking spaces are not eliminated by the browser. Words with ordinary spaces between them can be split across lines. Words connected by a non-breaking space cannot be split across lines.
List four things that are wrong with this XHTML tag:
Ans: (1) IMG should be lower case, (2) SRC should be lower case, (3) myphoto.jpg should be in double quotes, (4) the tag should be a combination start-end tag, ending in / >. The corrected tag is:
What is the difference between an HTML attribute and a CSS property?
Ans: An attribute is placed within an HTML tag to modify the tag. A property is a CSS style that is applied to an HTML item or class. Each property is seperated from its value with a colon ( : ). The property/value pairs are separated from each other with semicolons (;).
What are the delimiters for a comment in these languages?
Ans:
Explain the difference between static and dynamic webpages.
Ans: A static web page does not change its content after it is displayed. A dynamic Web page can change its content depending on input from the user or other information (such as the time of day clock).
What is the difference between a view and a layout in Ruby on Rails?
Ans: The view is the content of the page that is normally between the body tags. The layout is everything else on the HTML page.

What are the Command Prompt DOS commands that do the following? Also give the corresponding Unix commands for Mac.

Delete a file.
Create a new folder.
List all files in a folder.
Change to the parent folder.
Change to a child folder.
Change to the root folder on the current drive.
Change to a different drive.
Show the contents of a file on the screen.

Action	DOS	Mac Unix
Delete File	del	rm
Create Folder	mkdir	mkdir
List Files in Folder	dir	ls
Move to Parent Folder	cd ..	cd ..
Move to Child Folder	cd folder-name	cd folder-name
Move to Root Folder	cd \	cd /
Change to Different Drive	f:	cd /Volumes/f
Show File Contents on Screen	type	cat
Delete File	del	rm

List some of the folders created for a Rails project.
Ans: Folders that we have used so far are app/controllers, app/views, app/assets. Here is a list of Rails folders.
What are the views? Where are they located?
Ans: Views are HTML pages that are generated by Rails. A view is created by combining an .erb Rails view with a layout to produce the generated page.
Where should images and CSS stylesheets be placed in a Rails project?
Ans: In app/assets/images and app/assets/stylesheets, respectively.
What is the file extension for view and layout files?
Ans: .html.erb, where erb is Embedded Ruby.
What is WEBrick? What is its biggest disadvantage?
Ans: A localhost server for Rails.
List the steps for creating a Rails project.
Ans: See the Directions for Project 1.
Create a Rails project named Library (Example 7). Write a batch file that contains the rails command for generating a controller named Info and views named index, staff, and policies. See the next section entitled "Adding View and Controller Functionality" to help you out.

Note: The version that we created in class on Wednesday, July 18, was the essentially the same as the version created on Monday, July 16, except for these differences:
- The project was created in the folder c:\Users\sjost\it231 instead of c:\jost-it231.
- We used the name welcome instead of index.
- The CSS styles were appended to the bottom of the application.css file. Here are the styles that we used. In particular, we saw how to set borders for a table using CSS.

Adding View and Controller Functionality

Add content to the views of the Info controller from the Library project described in Question 3 of the Review Questions.
1. To the index view, add an unordered list that explains that the staff and policies view contain.
2. To the staff view, add a table that contains the names, job titles, and photos of the staff members.
3. To the policies view, add an ordered list that lists the policies of the library.
4. Modify the layout page apps/views/layouts/application.html.erb. Your new layout should contain a stylesheet link tag and an address bar that takes you to each of the three views index, staff, policies.
5. Add a styles.css page in public/stylesheets that sets the colors and fonts for the layout page.
6. Modify the methods in the info_controller.rb file in app/controllers, to look like this:
7. Note the @ prefix that marks @title as an instance variable. An instance variable does not go away when the method that refers to it terminates.
8. Use the @title variable in the views or layout page like this:
9. Test your modified project.

The Anatomy of a Rails URL

Here is a sample URL for displaying a Rails view:
http is the protocol

localhost is the server name

3000 is the port number

info is the controller

index is the action
If the Rails project were posted on an internet server, localhost:3000 would be replaced by the internet address of the server, for example, rubyserver.cdm.depaul.edu. The Rails URL would then be:
An action means display the view with that name.
See the routes.rb file in the config folder for the commands that define the legal URLs or routes for the project. Look at these lines of the file:
An id will be used later when we are displaying information from databases.
For example
displays the pet with id=23.

Embedded Ruby and Some Helper Functions

When Ruby statements are embedded within an XHTML file they are called ERB (embedded ruby) statements.
Use this ERB helper function call to embed an image on a web page:
Place the image in the public/images folder.
Look at Example 5 (PageWithImage).
Use this ERB helper function call to to apply a CSS stylesheet to a web page:
Place the stylesheet in the public/stylesheets folder.
Use this ERB helper function call to to create a hyperlink tag:
"To Page 1" is the hyperlink text.
"page1" is the target of the hyperlink.

Project 1

Look at the Project 1 Description.
Look at HTML Fonts and Extended HTML Colors for font and color possibilities.

Submitting Projects

To submit a Rails project:
Some sources recommend using the 7-zip for compressing files instead of Windows Compressed Folders.
Submit your zipped project on the CDM COL Project Submission site d2l.depaul.edu.

Alternative Forms for Helper Methods

The invocation is shown on the first line of each pair.
The generated HTML source code or path is shown indented on the second line of each pair.

image_tag method

<%= image_tag 'car.jpg' %>
        <img src="/images/car.jpg" alt="Car" /> 

<%= image_tag 'dogs/image.jpg' %>
        <img src="/images/dogs/collie.jpg" alt="Image" /> 

<%= image_tag 'car.jpg', :alt => 'Ford Taurus' %>
        <img src="/images/car.jpg" alt="Ford Taurus" /> 

<%= image_tag 'car.jpg', :size => '250x200' %>
        <img src="/images/car.jpg" height="250" width="200" alt="Car" /> 

<%= image_tag 'car.jpg', :width => '250' %>
        <img src="/images/car.jpg" height="250" alt="Car" /> 

<%= image_tag 'car.jpg', :class => 'carimg' %>
        <img src="/images/car.jpg" class="carimg" alt="Car" />

Reference: api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html

stylesheet_link_tag method

<%= stylesheet_link_tag 'styles.css' %>
        <link rel="stylesheet" type="text/css" media="screen" 
            href="stylesheets/styles.css" >

<%= stylesheet_link_tag 'styles' %>
        <link rel="stylesheet" type="text/css" media="screen" 
            href="stylesheets/styles.css" >

<%= stylesheet_link_tag 'dogs/styles' %>
        <link rel="stylesheet" type="text/css" media="screen" 
            href="stylesheets/dogs/styles.css" >

<%= stylesheet_link_tag 'styles', 'dogs/canines' %>
        <link rel="stylesheet" type="text/css" media="screen" 
            href="stylesheets/styles.css" >
        <link rel="stylesheet" type="text/css" media="screen" 
            href="stylesheets/dogs/canines.css" >

<%= stylesheet_link_tag 'styles', :media => 'print' %>
        <link rel="stylesheet" type="text/css" media="print" 
            href="stylesheets/styles.css" >

<%= stylesheet_link_tag :all, :media => 'print' %>
        Link to all stylesheets in stylesheets folder.

Reference: api.rubyonrails.org/classes/ActionView/Helpers/AssetTagHelper.html

link_to method

<%= link_to 'To Profiles/Show Page', {:controller => 'profiles', :action => 'show'} %>
        <href="/profiles/show">To Profile Page</a>

<%= link_to 'To Profiles/Index Page', {:controller => 'profiles', :action => 'index'} %>
        <href="/profiles/index">To Index Page</a>

<%= link_to 'To Profile/Show Page', {:action => 'show'} %>
        <href="/profiles/show">To Profile</a>

<%= link_to 'To Profile/Show Page', {:action => 'show'}, :class='link' %>
        <href="/profiles/show" class="link">To Profile Page</a>

<%= link_to 'To Profile/Show Page', {:action => 'show'}, :id='linka' %>
        <href="/profiles/show" class="linka">To Profile Page</a>

<%= link_to 'To Profile/Show Page', {:action => 'show'}, :class='link', :id='linka' %>
        <href="/profiles/show" class="link" id="linka">To Profile Page</a>

<%= link_to 'To Profile/Show Page', {:action => 'show'}, :confirm => 'Are you sure?' %>
        <href="/profiles/show" ">To Profile Page</a>
        Need JavaScript code to show an alert box.

Reference: api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html

Datatypes used by the Rails Scaffolding

The Rails scaffold software can generate applications complete with a back end database to store information.

The allowed datatypes for database fields that can be specified in a scaffold statement:

:string	A string of characters.
:text	A string of characters, generally longer than a string, which can contain more than one line.
:integer	A positive, negative, or zero number without a fractional part; for example 238372, -3273, 0. Integers are represented in binary.
:float	A positive, negative, or zero floating point number, which can contain a decimal point; for example 345.39, -438.86, 0.00. Floats are also represented in binary.
:decimal	A positive, negative, or zero floating point number, which can contain a decimal point. Decimal numbers are represented in base 10 and are accurate for financial calculations.
:datetime	A combination type that represents a date and time to the nearest millisecond.
:timestamp	Used to mark when a row is entered in a database.
:time	The hour, minute, and second of the time recorded in the database.
:date	The year, month, and day of the date recorded in the database.
:binary	Unstructured binary data (sometimes called a BLOB for binary large object). This may be compressed data that is uncompressed when it is retrieved from the database, or it may be image or sound data.
:boolean	Contains a 0 or 1 that represents false or true.

Some Rails datatype mappings to databases.

Names Created by Rails Scaffold Software

Enter a Rails scaffold statement with the model name MovieReview:

rails generate scaffold MovieReview movie_name:string reviewer_name:string review:text review:integer review_date:date recommended:boolean

This statement does the following:
- creates a controller,
- creates these views: index, show, new, edit,
- creates the specs for the database fields,
Now enter the rake statement to create the actual database and database table:
The following names are created:

Resource Name movie_reviews

Database Table Name movie_reviews

Model Name MovieReview

Controller Name MovieReviewController

View Folder Name movie_reviews
Note some names are written upper camel notation and others are written in underscore notation.
We will look at the MovieReview Example (Example 9) again on July 25.
The Rails scaffolding software knows how to pluralize the name that represents table rows. In this case, Person represents the name of a single row and People represents the entire collection of rows in the table.
Here are the names generated by scaffold if the model name is Person:

Resource Name person

Database Table Name people

Model Name Person

Controller Name PersonController

View Folder Name people

Routing

Routes are specified in the file app/config/routes.rb.
So far, the Rails applications we have created have used named routes.
For example, if the controller name is Info and the view name is staff, then the named route used to view this page is
A project created using a scaffold uses a resource based route:

Project 2

Look at the Project 2 Description.

Resource Name	movie_reviews
Database Table Name	movie_reviews
Model Name	MovieReview
Controller Name	MovieReviewController
View Folder Name	movie_reviews

Resource Name	person
Database Table Name	people
Model Name	Person
Controller Name	PersonController
View Folder Name	people