WEB322 Assignment 5 Solution

Build upon the code created in Assignment 3 by incorporating the Handlebars view engine to render our JSON data visually in the browser using .hbs views and layouts. Additionally, update our officeData, server.js module to allow for employees to be viewed and added individually using web form.

Specification:
Part 1: Getting Express Handlebars & Updating your views

Step 1: Install & configure express-handlebars
• Use npm to install the "express-handlebars" module
• Wire up your server.js file to use the new "express-handlebars" module, ie:
o "require" it as exphbs
o add the app.engine() code using exphbs.engine({ … }) and the "extname" property as ".hbs" and the "defaultLayout" property as "main" (See the Week 9 Notes) o call app.set() to specify the 'view engine' (See the Week 9 Notes)
• Inside the "views" folder, create a "layouts" folder - done
• In the "layouts" directory, create a "main.hbs" file (this is our "default layout") -done

Part 2: Updating the Employees Route & Adding a View

Rather than simply outputting a list of employees using res.json, it would be much better to actually render the data in a table that allows us to access individual employees and filter the list using our existing req.params code.

Step 1: Creating a simple "Employees" list & updating server.js

• First, add a file "employees.hbs" " in the "views" directory
• Inside the newly created "employees.hbs" view, add the html:
<div class="row">
<div class="col-md-12">
<br>
<h2>Employees</h2>
<hr />

<p>TODO: render a list of all employee first and last names here</p>

</div>
</div>


• Once this is done, create/update your GET "/employees" route in server.js according to the following specification o You are using getAllEmployees() from officeData
o Every time you would have used res.json(data), modify it to instead use res.render("employees", {employees: data});
o Every time you would have used res.json({message: "no results"}) - ie: when the promise has an error (ie in .catch()), modify instead to use res.render("employees", {message: "no results"});
• Test the Server - you should see the following page for the "/employees" route:
Step 2: Building the Employees Table & Displaying the error "message"
• Update the employees.hbs file to render all of the data in a table, using the bootstrap classes: "table-responsive"
(for the <div> containing the table) and "table" (for the table itself)
o The table must consist of 6 columns with the headings: Employee Num, Full Name, Email, Address, Status and Course ID o The "Email" column must be a "mailto" link to the user's email address for that row
• Beneath <div class="col-md-12">…</div> element, add the following code that will conditionally display the "message" only if there are no students (HINT: #unless students)

<div class="col-md-12 text-center">
<strong>{{message}}</strong>
</div>
This will allow us to correctly show the error message from the .catch() in our route
Step 3: Adding body-parser in server.js
• Add the express.urlencoded({ extended: true }) middleware (using app.use()) • Test your /employees route



Part 3 : Adding a View, Route to Support Adding Employees


Step 1: Adding new file in the views directory: addEmployee.html – done


Step 2: Adding "Get" route "/employees/add" in server.js
• Inside your server.js file, add the route "/employees/add", which will simply send the newly supplied "addEmployee.html" file

Step 3: Adding "Post" route "/employees/add" in server.js
• This route makes a call to the (promise-driven) addEmployee(employeeData) function from your officeData.js module (function to be defined below in step 4). It will provide req.body as the parameter, ie: "addEmployee(req.body)".
• When the addEmployee function resolves successfully, redirect (res.redirect) to the "/employees" route. Here we can verify that the new employee was added

Step 4: Adding "addEmployee" function within officeData.js
• Create the function "addEmployee(employeeData)" within the officeData.js module according to the following specification: (HINT: do not forget to add it to module.exports) o Like all functions within officeData.js, this function must return a Promise
o If employeeData.EA is undefined, explicitly set it to false, otherwise set it to true (this gets around the issue of the checkbox not sending "false" if it's unchecked)
o Explicitly set the employeeNum property of employeeData to be the length of the
"dataCollection.employees" array plus one (1). This will have the effect of setting the first new student number to 261, and so on.
o Push the updated employeeData object onto the "dataCollection.employees" array and resolve the promise.


Step 5: Verify your Solution
At this point, you should now be able to add new employees using the "/employees/add" route and see the full employee listing on the "/employees" route.



Part 4: adding description view & updating server.js


Step 1:

• First, add a file "description.hbs" in the "views" directory
• Inside the newly created "description.hbs" view, add text content to answer the following (be creative with your design to display the content):
1. Explain the code in the main.hbs
2. Explain the input elements in the addEmployee.html
3. Explain what is returned to the form from checkLastName() function and why?
• Once this is done, add/update your GET "/description" in server.js – this will just render the description.hbs • Test the Server




Assignment Submission:
• Add the following declaration at the top of your server.js file:
/********************************************************************************* * WEB322 – Assignment 05
*
*
*
********************************************************************************/
• Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will result in a grade of zero (0) for the assignment.