Assignment 4

Overview

In this assignment you get the opportunity to re-apply the MVC and all the various skills and principles to add both classification and inventory data to their respective tables in the database, while also implementing data checks to protect the data store and data-handling process from basic attacks. You will also implement message handling and improve the user experience through implementing stickiness within form inputs.

Video Demo

This video demonstrates the deliverables, outcomes and what the finished enhancement could look like when complete. This is the Transcript of the video.

References

Keeping Things Straight (Re-emphasized)

As I mentioned earlier in this unit, one of the most difficult tasks for new programmers is keeping data coming from the browser, being stored into variables, then inserted to database straight. While there is no perfect way to do this, there is a simple practice that may help: use the database field name for the same piece of data in all of its locations.

For example, When adding a new item to the inventory table, a field in the table to store the name is "inv_make". So, in the form give the input that name:
<input name="inv_make" id="invMake" type="text"> Then, in the controller when collecting the value, store it into a variable of the same name:
{ inv_make, ...} = req.body While not foolproof, it does help to keep track of what form field is sending the data, what variable is storing the value and what database field the data should be stored into.

Tasks

There are three tasks involved in this assignment:

  1. Creation of a management view that will contain the links to begin and end the processes for tasks 2 and 3.
  2. Implement a process to add new classifications to the classification table of the database. While doing so, both client-side and server-side validation will be implemented.
  3. Implement a process to add new items to the inventory table of the database. While doing so, both client-side and server-side validation will be implemented. In addition, the new inventory form inputs should be "sticky" so previously entered values are maintained (don't worry about the new classification form since it only has a single input).

During the insertion process, appropriate messages are expected to be set, passed, and displayed in views to keep the user informed.

For each task, it is expected that you will follow the principles and processes already introduced in the course in general, and account registration process specifically. This includes adding error handling middleware to all new routes.

Task One

  1. Create a new management view inside the views > inventory folder.
  2. The view should contain an appropriate title and h1 value to represent its role as a management view for all things dealing with inventory.
  3. The view must be capable of displaying a flash message sent from the existing inventory controller.
  4. The view should contain two links (no links are directly to a view, all must use the MVC approach):
    • One to trigger a process to deliver an add new classification view (see Task 2).
    • One to trigger a process to deliver an add new inventory view (see Task 3).
  5. The view must be delivered using the MVC architecture as with all other views.
  6. The view must meet the requirements of the frontend checklist.
  7. For now, there should NOT be a link to reach this view in any other view. It will be accessed only by direct manipulation of the URL. Use this route: site-name/inv/).
  8. Thoroughly test all operations for functionality! Make sure it works.

Task Two

  1. Create an add-classification view inside the inventory folder within the views folder.
  2. The view must:
    • Contain a form for adding a new classification (you will only need to add the classification name, the primary key in the table is auto-incrementing).
    • The form must contain a direction that the new classification name cannot contain a space or special character of any kind.
    • The form must contain client-side validation.
    • The view must be delivered via a route and using the MVC architecture as with all other views.
    • The view must meet the requirements of the frontend checklist.
  3. The form must send all data through the appropriate router, where server-side validation middleware is present, then on to the inventory controller and then to a function within the inventory model for insertion to the database.
  4. The view must have the means of displaying a flash message returned to it from the controller, as well as errors returned as a result of the server-side validation.
  5. If the insertion works, the controller should create a new navigation bar (which shows the new classification) and render the management view, along with a success message. Note: if it works, the new classification should appear as a navigation item immediately, without a page refresh. However, if it fails, then the add classification view should be rendered with a clear failure message.
  6. Thoroughly test all operations for functionality! Make sure it works.

Task Three

  1. Create an add inventory view in the views > inventory folder. The view must:
    • Contain a form for adding a new vehicle to the inventory table. (Hint: Check the inventory table in the database for the fields that will be needed in the form. DO NOT have a form field for the primary key as it is auto-incrementing in the database table).
    • The form must use client-side validation for all inputs.
    • Form inputs, including the select list for classifications, must be sticky, to retain the information when errors are detected and returned.
    • When indicating the classification the vehicle belongs to, the classification options must appear in a drop-down select list. The classification name must appear to the human eye, but the classification_id must be the value of each option. The select element drop-down list that should have been dynamically pre-built in the utilities > index file and passed to the view by the controller. (Hint: This will be similar to building the navigation bar, but will be wrapped inside a select element with options instead of an unordered list with list items.)

      To help you, the following code exemplifies what the select list would look like: 

      Util.buildClassificationList = async function (classification_id = null) {
    let data = await invModel.getClassifications()
    let classificationList =
      '<select name="classification_id" id="classificationList" required>'
    classificationList += "<option value=''>Choose a Classification</option>"
    data.rows.forEach((row) => {
      classificationList += '<option value="' + row.classification_id + '"'
      if (
        classification_id != null &&
        row.classification_id == classification_id
      ) {
        classificationList += " selected "
      }
      classificationList += ">" + row.classification_name + "</option>"
    })
    classificationList += "</select>"
    return classificationList
  }
      An explanation of the code is not provided here. It is expected that you will study the code and discuss it with others in your learning team to ensure you understand it. If you have questions, please ask them in the discussion board.

    • When adding image paths, use the path to the No Image Available image and thumbnail respectively, that already exists in the vehicle images folder, or you could find and add a new image for the vehicle manually to the images folder and include the path in the form.
    • The view must have the means of displaying a flash message returned to it from the controller, as well as errors returned from the server-side validation process.
    • The view must meet the requirements of the frontend checklist.
  2. The form must send all data via a route and using the MVC architecture as with other processes.
  3. The data must be written to the inventory table within the database using a model-based function.
  4. If the new inventory item is added successfully, a success message must be displayed in the management view. If successful, you can navigate through the appropriate navigation item to ensure the item appears in the inventory by classification view, and can be clicked to see all the item's details.
  5. If the new item fails to be added to the database, a failure message must be displayed in the add inventory view.
  6. Thoroughly test all operations for functionality! Make sure it works.

Submission

Grading Matrix

This enhancement has values in multiple objectives as shown below:

Objective 1

Objective 2

Objective 3

Objective 4

Objective 5

Objective 6