To Tutorials and Projects

IT 231 -- Project 3

Goal: Create a website with CRUD capability that displays data from a JSON string. Call JSON.parse to create an array of object literals.

Relevant Examples: Elements and Urban Farmer Seeds Examples (Project 5). Do NOT create a project using the data from the Elements Example or the Urban Farmer Seeds Example.

Your array of object literals should include at least 5 objects with at least 5 fields each.

Source code comments are required in the main.js script. Extra credit for comments in the EJS views.

Some example details from the Urban Farmer Seeds Example from Tutorial 5:

  1. A sample JSON string, containing data about vegetable seeds for sale. This data is taken from the Urban Farmer website for ordering plant seeds.
  2. The array of objects obtained from JSON.parse.
  3. Implement three routes:
    (a)  localhost:3000/seeds/
    which renders this index.ejs view.
    (b)  localhost:3000/seeds/show/4
    with a parameter, which renders this show.ejs view.
    (c)  localhost:3000/seeds/new
    which renders this new.ejs view.

Details are posted in Tutorial 5, which implements the Urban Farmer Seeds website.

For Full Credit

For full credit, include these items in your project:

  1. Display an image on the show page for each item.
  2. Use an external stylesheet for the pages in your project located in the public/css folder.
  3. Implement a hyperlink for each row in the index page table that takes you to the show view for that item.
  4. Include hyperlinks on each view that takes you to the other views in the project.
  5. In at least one of the input elements with type="text", include the required attribute to insure that its contents are not empty before submitting.
  6. In addition to using textfields on the input form, use at least one of these controls for input:
         check box: <input type="checkbox">,
         radio button: <input type="radio">,
         slider: <input type="range">,
         drop down menu: <select>

Extra Credit

  1. Comments are required in the main.js script. For extra credit, include source code comments in the EJS pages (2 pts).
  2. Include an input element with type="text" on your new.ejs page that validates its value with a regular expression (3 pts).
  3. (Hard) Implement a /delete route with a parameter that deletes that deletes that item from the data array. You can also add a Delete hyperlink to each row of the index page table that deletes that row. There is no view associated with this /delete route, just display the index page after deleting the item from the data array (5 pts).

Grading Breakdown: Functionality: 70, Creativity: 15, Comments: 10, Source code headers in main.js script and the EJS views.: 2.5, Project folder is named project3-<your last name>: 2.5.