Homework: H2 Adding (Mostly Static) View Pages in Rails

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 three demonstrations:

Part 1. Create a new Rails web app

Demo 2 and Demo 3 show 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.

The Rails project and remote GitHub repo should both be named homework-project.

Once you have completed this part, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo.

Part 2. Create a controller for pages

Demo 4, Section 1, step 1 shows a similar step to the one 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, the name of the controller is different, and you will not specify any controller actions (e.g., welcome) at this point.

As a consequence, you must also perform the additional step of creating a new folder named pages inside the app/views subdirectory. (This can be done using VS Code or the command-line.)

Once you have completed this part, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo.

Part 3. Create web pages

Demo 4 shows similar steps to the ones you’ll use in this part.

Next, you must create two web pages: a personal profile page and a software review and discussion page.

Each of the pages must use all of the following HTML tags at least once:

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

Additionally, each page must use all of the following Rails view helper methods at least once:

link_to - Hyperlink
image_tag - Image embedding

Each of the pages also has some page-specific requirements:

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.
Software review and discussion page. This page should present your review of a piece of software you’ve used. 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. You must use each of the following HTML form-related 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 the tags in noticeably different ways (i.e., the two pages should not look too similar).

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

Once you have completed this part, commit the current version of the code to your local repo, and push the changes to the remote GitHub repo.