Software Engineering

Homework 3: MVC View

For this homework, you will create simple Rails web app with (mostly) static web pages and practice using some features of Git and GitHub.

The tasks you will perform draw heavily from two demonstrations: one giving an overview of the software stack and another focusing on the MVC view in Rails.

Step 1. Create a new Rails web app

Section 1 of the software stack demo shows similar steps to the ones you’ll use in this part.

First, you must

• create a new (empty) rails project,
• save this version of the project to a local Git repo, and
• save this version to a remote GitHub repo.

When perform the above tasks, follow these constraints:

• The Rails project and remote GitHub repo must both be named hw3.
• The GitHub repo should be made under your GitHub user account, and it should be made private.
• As an additional step, you must add the course instructors as collaborators on the project (see under Settings > Collaborators & teams; use read-only permissions). The instructors GitHub usernames are as follows:
  • sdflem
  • kbridson
  • aashisghimire

Once you have completed this step, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo. Make note of the commit has for this commit. You will need to report it in Step 4 below.

Step 2. Create a controller for pages

Section 2, steps 1 and 2 of the software stack demo show similar steps to the ones you’ll use in this part.

Next, you must create a controller PagesController for the web pages you will be creating. The following command will do this for you:

• rails generate controller Pages

Note that, unlike the demo video, you will not specify any controller actions (e.g., home) at this point.

Once you have completed this step, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo. Make note of the commit has for this commit. You will need to report it in Step 4 below.

Step 3. Create web pages

The MVC view demo shows similar steps to the ones you’ll use in this part.

Next, you must create two web pages:

1. Personal profile page. This page should present fun info about yourself and your interests. Be creative in designing your page, but follow these constraints:
   • Your name must be displayed prominently.
   • The URL path must be your UofM email username (e.g., mine would be http://localhost:3000/sdflming).
   • You must include a picture of yourself.
2. Software review and discussion page. The page should present your review of a piece of software you’ve used. Each teammate must do a different piece of software. Again, be creative, but follow these constraints:
   • The title of the software must be prominently displayed.
   • Your score out of 5 stars must be prominently displayed.
   • A picture related to the software must be included.
   • Some basic data about the software must be included, such as (but not limited to) the maker, the year of release, and supported OSs.
   • Text detailing your review.
   • A mock form that allows visitors to leave feedback; however, this form will just be for show and will not actually work. The form must contain each one of the following form elements at least once (but may contain more): a (short) text input field, a (larger) text area field, a radio button with at least 3 options, a drop-down list with at least 3 items, and a button.

For each of your pages, the page must use each of the following HTML tags at least once (again, some creativity may be required on your part to work all of these in):

• h1 – Level-1 heading
• h2 – Level-2 heading
• p – Paragraph
• ul/li – Unordered list

For each of your pages, the page must use each of the following Rails view helper methods:

• link_to - Hyperlink
• image_tag - Image embedding (hint: by default, image files are loaded from app/assets/images/, so you should save your images there)

For the form part of your software-review page, you must use each of the following HTML tags:

• form – Input form containing the following elements:
  • input - Text field (type=text)
  • textarea - Text area
  • input – Radio buttons (type="radio")
  • datalist – Dropdown list (doesn’t do anything other than let you choose an item)
  • button – Button (doesn’t do anything when pressed)

Your two pages must use these tags in noticeably different ways (i.e., the two pages cannot look too similar). Also, all teammates’ pages must look noticeably different from each others’.

When you create your pages, add the appropriate routes, controller actions (i.e., in PagesController), and ERB views.

Once you have completed this step, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo. Make note of the commit has for this commit. You will need to report it in Step 4 below.

Step 4. Create a release in GitHub and submit your work

Before you can submit, you must have pushed all your commits into the master branch of the remote GitHub repo. You may use the GitHub repo’s web interface to inspect the commit log to make sure that everything has been pushed.

To submit your work, you must create a release. You can do this using the GitHub repo’s web interface. From the main repo page, follow the releases link to the create a new release. Set the tag version to hw3v1 and the release title to Homework 3, version 1. In the release description, enter the following, replacing hash1, hash2, etc. with the appropriate commit hash:

Step 1: hash1

Step 2: hash2

Step 3: hash3

If you discover that you’ve made a mistake in your release, you may create additional releases, incrementing the version with each new release. For example, if the above release needed fixing, the fixed release would have the tag version hw3v2 and the release title Homework 3, version 2.

Finally, you must submit the URL of your final release to the appropriate eCourseware dropbox.

To grade your work, I will download the appropriate release, and run it on my machine.

Rubric

Total points: 100

Below, the top-level number is the items total point value. If an item is not submitted at all or it is irredeemably broken, 0 points will be awarded for that item. The sub-bullets indicate standard deductions for errors in a submitted item. The deduction list below may not be complete because there may be mistakes that we did not expect. The deduction for an unexpected mistake will be assessed at the time it’s discovered and will reflect how severe the instructor thinks the mistake is.

• 35 Personal Profile view
  • Name not displayed prominently: -3
  • Page resource pattern (URL) not the student’s UofM username: -5
  • Image displays, but it is not student’s own picture: -3
• 35 Software Review view
  • Title of the software not prominently displayed: -3
  • Score out of 5 stars not prominently displayed: -3
  • Image displays, but it is not related to the software: -3
  • No basic data about the software included: -3
  • No text detailing your review: -3
• Deductions that apply to all views:
  • No Image (missing jpg/png file): -5 per instance
  • Missing required tags or helper methods: -5 per instance
  • Replacing required tags or helper methods with another similar but different element: -2 per instance
  • Duplicating code in application.html.erb: -5 (taken only once)
  • Pages are essentially duplicates of one another (i.e., too similar): -25 (taken only once)
  • Missing ul, but did use li: -2 per instance
  • Radio button with only one option: -3 per instance
  • Radio button with only two options: -1 per instance
  • Other glaring syntax errors in the HTML: -3 per instance
• 10 Routes:
  • Missing routes entry: -5 for each missing route
  • Incorrect route:
    • Missing/incorrect controller action: -2 per instance
• 10 Pages controller:
  • Controller not named correctly: -3
  • No controller action created for page: -3 per instance
  • Created a additional controllers instead of using just the Pages controller: -10 (taken only once)
• 10 GitHub Release:
  • Wrong name for project/remote repo: -3
  • Missing commits that were ordered in the instructions: -5 per instance
  • No release: -10
  • Incorrect release URL in dropbox: -5
  • Latest release not the full submission: -7
  • Release does not follow naming convention: -3

© Scott D. Fleming 2019 • Made with GitHub Pages and Markdown