Homework: H4 Simple Forms

For this homework, you will continue working on the homework-project Rails web app. In particular, this homework will emphasize the creation of simple forms that users can fill out and how to pass user-entered data from a form to a controller action for processing. It will also provide you with additional practice adding pages to your Rails web app, passing data from controller actions to views, and using Git for version control.

The tasks you will perform draw heavily from this demonstration:

Demo 6: Passing Data from View to Controller

Part 1. Student Info Form

For this part, you will create the form page depicted in Fig. 1.

A web page with a student info form. — Fig 1. The student info form page.

The form must function as follows:

The student classification dropdown options must be as shown in Fig. 2.

Fig 2. The student classification dropdown options.
The mailing address text area must be 64 characters wide and 3 lines tall.
When the form is submitted, the web app must check that all fields were filled in with non-whitespace values.
If a form submission was successful, the web app must display the student info form page with a success message, as shown in Fig. 3, and an empty form.

Fig 3. The result of a successful submission (note the notice message below the heading).
If a form submission is unsuccessful due to missing input values, the web app must display the form page with an error message, as shown in Fig. 4, and a form populated with the values the user had inputted.

Fig 4. The result of an unsuccessful submission due to a missing last name.

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. Image Chooser Form

For this part, you will create a form page like the one depicted in Fig. 5.

The student classification dropdown options. — Fig 5. Picture chooser form (nothing chosen yet).

The dropdown will have the options depicted in Fig. 6.

When an option is selected and the button pressed, the corresponding image will be displayed, as shown in Fig. 7. The displayed image should be scaled to have a width of 150px.

Here are the four images needed for this part: Homer, Bart, Lisa, Marge.

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.