Depending upon what your web app does, you may have already encountered forms and form helpers, but it is worth taking some time to solidify your understanding and get in some additional practice.
Forms are actually one of the more difficult things to create and include in a web application. Not only do you get information from the user, but you often need to verify that it is in the correct format before storing it in a database or using it to control other parts of your web application.
Using a from in your web application touches on all three of the components in the MVC design pattern. You need to create the HTML that contains the form that user sees (the VIEW), that information will be used by the CONTROLLER to change the app’s behavior, and often the information is tied to your MODEL and stored in the corresponding database.
Reading and Resources
- Codeacademy’s article on Request-Response Cycle III (for form handling)
- HTML Forms at the W3C school
- Hartl Chapter 7 (especially section 7.2)
- Form Basics from the Odin Project
- Sending Form Data from Mozilla.com
- JS JSON from W3C school
What to Do
- I strongly suggest that you create a branch in git before starting this process. You will be changing a lot of files, and it is easier to throw away a branch than to try to retrace your steps.
- Create a simple form that gets some information from the user, stores it in the database (which might be the same one you created in the previous assignment or something new), and uses that information somewhere in the app. Possibly, you could request information, store it, and then produce a list of stored information on another page. (A log-in feature similar to Hartl’s Chapters 6 and 7 would work for this assignment, although that is a fairly challenging task.)
What to Hand In
- Submit a text document in which you describe your new form, what information it gathers and stores in your database, and how your application uses or displays that information.
- Include a link to your GitHub repo (showing a new commit with “HW7” as part of the commit message).
- In the same document, include the link to the Heroku app.
Scoring Rubric (10 Points)
- There is a new page/view for form (or added a form to an existing page)
- Added a form with a button to submit data to the database
- Make sure that the data is saving to the database (create or new & save)
- Displays the data or some other part of the website changes in response to data
- Describes the new form.
- Identifies what information the form gathers and stores in the database,
- Describes how the application uses or displays that information.
- Is validation required on certain fields? If so, what is validated and how?
- The site navigation has been updated to include a link to the new form
- Consistent appearance and purpose … starting to look “real” and something that could be shown outside of class