IT 232 -- Examples

Examples

HTML5, CSS: Styles BoxModel Position DivTags Canvas Greeter
Scaffolds, Relationships, Validations: RealEstate Hospital1 Hospital2
File Upload: PetPhotoUpload
HTTP and Routing: GetVsPost AddAction NestedRoutes
Find Errors: BlogPostSite TemperatureConverter1
Many-to-many Relationships: School Examples MiniTwitter
FormTagHelper and FormHelper Forms: TempertatureConverter2 TempertatureConverter3
Display Text from File: Poem
Link Icons through CSS: LinkIcons
Styling the Index View: LikesSite
Using ActiveRecord Methods: PhotoGallery Hospital3
Simple Login Authentication: BlogPostSite2
Custom Login Authentication: CustomLogin
A Self-referential Join: EmployeeRoster
An Online Sales Depot1: Depot1
Displaying Validation Errors: ValidationErrors
JavaScript, jQuery, and CoffeeScript: JQuery HideTableCells HighlightFocused
Rails AJAX: AjaxTime
Login Registration: LoginRegistration

Styles Example

Show Rails views that use inline, document-model, and external styles.

Directions page1.html.erb page2.html.erb page3.html.erb doc_level.html.erb external.scss

BoxModel Example

Illustrate the padding, border, and margin properties of the CSS box model.

Directions page1.html.erb box_model.scss

Position Example

Show div sections positioned with relative and absolute positioning.

Directions page1.html.erb position.scss

DivTags Example

Show how to use absolute positioning with div tags to position the links and the content.

Directions content.html.erb application.html.erb info.scss

Canvas Example

Show how to use JavaScript to draw on an HTML5 canvas.

Directions page1.html.erb drawing.scss drawing.js

Greeter Example

Create a scaffold project with three pages and navigation links to move between pages. In the controller, set the title and heading of each view using an instance variable.

Directions page1.html.erb page2.html.erb page3.html.erb application.html.erb greeter_controller.rb greeter.scss

RealEstate Example

Use CSS to style the index view of the RealEstateListings. Also, add a method in the model to expand the abbreviations for property_type.

Directions index.html.erb real_estate_listing.rb real_estate_listings.scss seeds.rb

Hospital1 Example

Create a scaffold project with two models, Doctor and Patient. Use a seed file to populate the database tables.

Directions seeds.rb

Hospital2 Example

Use the same seed file as the Hospital1 Example to populate the doctors and patients tables having a one-to-many relationship. Create Doctor and Patient models, not scaffolds. Then create a controller with a view that displays the following:

Displays an HTML table of patient names with his or her doctor and doctor's phone number.
Displays an HTML ordered list of doctor names with nested lists of patients and patient phone numbers for each doctor.

Directions seeds.rb contact_info.rb show.html.erb contact_info.scss

PetPhotoUpload Example

Create a scaffold project that can upload photos. These photos are displayed on the show view.

Directions pet.rb

GetVsPost Example

In a browser, compare the HTTP actions GET and POST for transmitting information from client to server

Directions client.html.erb.htm server.html.erb.htm application.html.erb.htm client_server_controller.rb

NestedRoutes Example

If a scaffold project has two models, linked with a one-to-many relationship, convert the routes so that the secondary model routes are nested within the primary model routes.

Directions RESTful Routes NestedRoutes.zip

AddAction Example

Show how to add an action to a resource-based controller. Recall that an action is a controller method that is executed.

Directions summary.html.erb

BlogPostSite Example

Correct the errors in the views of the BlogPostSite: index, show, new, edit, _form.html.erb.

Source Code with Errors Corrected Source Code Zip File with Errors

TemperatureConverter1 Example

Correct the errors in these source code files of the TemperatureConverter1 Example project: input.html.erb, display.html.erb, convert_controller.rb, convert.scss, routes.rb.

Source Code with Errors Corrected Source Code Zip File with Errors

TemperatureConverter2 Example

Similar to the TemperatureConverter1 example, but a database table is added to record all of the temperature conversions. The name of the person performing the conversion is also recorded. FormTagHelper methods are used for the form and controls.

Directions input.html.erb display.html.erb convert_controller.rb convert.scss

TemperatureConverter3 Example

Same as the TemperatureConverter3 Example, except that FormHelper methods are used instead of FormTagHelper ones.

Directions input.html.erb display.html.erb convert_controller.rb convert.scss

School Examples

Use an enrollments table to implement a many-to-many relationship between the Student and Course models using three methods:

School1: Use two one-to-many relationships with an enrollments table.
School2: Use a many-to-many relationship with a courses_students table.
School3: Use a many-to-many relationship with an enrollments table using the :through option. This combines features of School1 and School2.

School1, seeds.db School2, seeds.db School3, seeds.db

Poem Example

Display text from a file on a view:

Directions poem.txt

LinkIcons Example

Use hyperlink icons instead of text hyperlinks:

Directions icons.zip

LikesSite Example

Use hyperlink icons instead of text hyperlinks:

Directions index.html.erb heart.png thumbs-down.png

PhotoGallery Example

Display the dogs&owners photos in reverse chronological order (most recent first):
To change:

Directions index.html.erb dogs-owners.zip

Hospital3 Example

Similar to the Hospital2 Example: display three ordered lists of information: (a) doctors, (b) female patients, (c) male patients. Use ActiveRecord methods to select and sort the information.

Directions directory.html.erb

BlogPostSite2 Example

Add login authentication to a scaffold-based project:

Directions Seed File

Add a custom login authentication system to a scaffold-based project:

Directions Seed File

EmployeeRoster Example

Set up a self-referential join with methods that obtain the manager and array of subordinates for a given employee:

Directions Seed File

Depot1 Example

Create an online sales depot with models Product, Customer, ShoppingCart, LineItem:

Directions Seed File

ValidationErrors Example

Set up the machinery to display validation errors for a non-scaffold-based controller:

Directions students_controller.rb add_new.html.erb display_all.html.erb

JQuery Example

Ten mini-examples that show how to dynamically the content and styles of views through JavaScript, jQuery, and CoffeeScript client-side programming:

Directions

HideTableCells Example

8 mini-examples that show how to dynamically the content and styles of views through client-side programming:

Directions page1.html.erb test.scss application.js

AjaxTime Example

Use Rails AJAX to update the time with a partial page refresh. The time is displayed using a Rails partial.

Directions

HighlightFocused Example

Use jQuery to highlight the input control that is in focus using jQuery.

Directions

MiniTwitter Example

Use a Connection model to connect followers with users. You can use this example to help you with Project 4. Just substitute photos for comments.

Directions seeds.rb

Allow user to register to obtain a login, instead of entering the login and password with a seed file. The password must be entered a second time in a verification text field.

Directions