Classification View

Introduction

In the inventory controller, when the route that requests to see all the vehicles in inventory by a particular classification is processed, the data is sent to a view to be displayed. Let's build that view now.

Video Overview

The video provides a general overview of the activity, but does not contain the detail needed to complete each process. Watch the video to obtain a general idea, but follow the written steps to complete the activity. This is the Transcript of the video.

Build the folder and view

1. Click the views folder.
2. Now create an inventory folder with the classification.ejs file inside it.
3. The classification.ejs view should open in the workspace.
4. This view will consist of three distinct sections: A content heading, a message, and the inventory items display.
5. I suggest adding a comment (EJS or HTML) prior to each of the sections to explain what it does.
6. We'll build each section in order.

The Content Heading

An often overlooked best practice is to implement a value for the <title> element that describes the content of the view. Closely associated is to have a <h1> heading that does the same thing. We are already building the title value in the controller, and passing it as a name-value pair to the view. We will take advantage of that, to use the same value as our main content heading. Add the following code block to the top of the view.

<% if (title) { %>
<h1><%= title %></h1>
<% } else {
  res.redirect('/')
} %>

An Explanation

• Line 1 - uses a EJS code block to contain a JavaScript if structure to determine if a "title" variable exists.
• Line 2 - if the variable exists, it is displayed within an <h1> element.
• Line 3 - ends the if structure and begins an else structure.
• Line 4 - redirects the response object to the default index route, to deliver the home view.
• Line 5 - ends the else structure.

While this approach may seem unduly extreme, it reinforces the concept of best practice and our desire to deliver meaningful content. The use of redundant values in the title and h1 may also help our SEO rating.

A Message Block

It is not uncommon to need to display messages in a view, for example, if an error occurs. While we don't currently have a message, we don't know if we will. By adding the capacity to display a message, we're future-proofing our view. For now this will be commented out, but we'll make it live in the next unit. Let's add this small code block below the code you already added. I suggest leaving a blank line between the two.

<%# messages() %>

An Explanation

An EJS code block, using a comment mark (#), disables this code. In the future, when messages have been implemented, you'll replace the comment with the unescaped mark (—), while will allow any messages that have been set to be displayed.

The Inventory Items Display

This code block is the main content delivery mechanism for the view. You'll notice that it is very simple. The reason is that the view is meant to display content, not necessarily to contain logic. All the logic and building were done previously, the view only displays the result.

<%- grid %>

An Explanation

• Line 1 - An EJS code block with an "unescaped" indicator —. This allows HTML to be displayed. Remember our grid variable contains HTML.
• Be sure to check for and fix any VSC warnings or errors.
• Save the file.

Styling

In the building process, various classes and id's were added to the code. It is your responsibility to write CSS rules to style the output to be responsive and professional.

Test, Now!

When a navigation item in the application is clicked, all the inventory vehicles belonging to that classification are queried and eventually sent to this view. Now would be a perfect time to start your local server, bring up your project in a browser tab and click one of the navigation classification items. If it worked, you should see an unordered list of inventory vehicles belonging to that classification. Keep at it until it works. Remember that you can discuss things with your learning team, then reach out for additional help as needed.

Be sure to shut down the local server Control + C when done testing.