web322 assignment 5

• $ 0.00 0 items

WEB322 Assignment 5 solution

$ 25.00

Description

Work with a Postgres data source on the server and practice refactoring an application. You can view a sample solution online here: https://tranquil-bastion-88914.herokuapp.com

Specification:

NOTE: If you are unable to start this assignment because Assignment 4 was incomplete – email your professor for a clean version of the Assignment 4 files to start from (effectively removing any custom CSS or text added to your solution).

Getting Started:

Before we get started, we must add a new Postgres instance on our web-322 app in Heroku:

• Navigate to the application from your Heroku dashboard
• Click the “Resources” header and type “Postgres” in the bottom text box labeled: “Add-ons”
• Click the “Heroku Postgres” link that comes up
• This should cause a modal window to appear. Keep the settings the way they are “Hobby Dev –Free” and click “Provision”
• Click on the new Add-on “Heroku Postgres :: Database” link
• In the new page, click the “Settings” link. Here, you will see an “Administration” section. Click the “View Credentials…” button
• Record all of the credentials (ie: Host, Database, User, Port, etc.) – we will be using them to connect to the database:

Getting Started – Cleaning the solution

• To begin: open your Assignment 4 folder in Visual Studio Code
• In this assignment, we will no longer be reading the files from the “data” folder, so remove this folder from the solution
• Inside your data-server.js module, delete any code that is not a exports function (ie: global variables, & “require” statements)
• Inside every single exports function (ie: module.exports.initialize(), module.exports.getAllEmployees, module.exports.getEmployeesByStatus, etc.), remove all of the code and replace it with a return call to an “empty” promise that invokes reject() – (Note: we will be updating these later), ie:

return new Promise(function (resolve, reject) {

        reject();

Installing “sequelize”

• const Sequelize = require(‘sequelize’);
• var sequelize = new Sequelize(‘database’, ‘user’, ‘password’, {

host: ‘host’,

dialect: ‘postgres’,

port: 5432,

dialectOptions: {

ssl: { rejectUnauthorized: false }

• NOTE: for the above code to work, replace ‘database’ , ‘user’ , ‘password’ and ‘host’ with the credentials that you saved when creating your new Heroku Postgres Database (above)

Creating Data Models

• Inside your data-service.js module (before your module.exports functions), define the following 2 data models and their relationship ( HINT : See “Models (Tables) Introduction” in the Week 7 Notes for examples)
• hasMany Relationship

Since a department can have many employees, we must define a relationship between Employees and Departments, specifically:

Department.hasMany(Employee, {foreignKey: ‘department’});

This will ensure that our Employee model gets a “department” column that will act as a foreign key to the Department model.  When a Department is deleted, any associated Employee’s will have a “null” value set to their “department” foreign key.

Update Existing data-service.js functions

Now that we have Sequelize set up properly, and our “Employee” and “Department” models defined, we can use all of the Sequelize operations, discussed in the Week 7 Notes to update our data-service.js to work with the database:

initialize()

• This function will invoke the sync() function, which will ensure that we can connected to the DB and that our Employee and Department models are represented in the database as tables.
• If the sync() operation resolved successfully , invoke the resolve method for the promise to communicate back to server.js that the operation was a success.
• If there was an error at any time during this process, invoke the reject method for the promise and pass an appropriate message, ie: reject(“unable to sync the database”).

getAllEmployees()

• This function will invoke the findAll() function
• If the findAll() operation resolved successfully , invoke the resolve method for the promise (with the data) to communicate back to server.js that the operation was a success and to provide the data.
• If there was an error at any time during this process, invoke the reject method and pass a meaningful message, ie: “no results returned”.

getEmployeesByStatus( status )

• This function will invoke the findAll() function and filter the results by “status” (using the value passed to the function – ie: “Full Time” or “Part Time”

getEmployeesByDepartment( department )

• This function will invoke the findAll() function and filter the results by “department” (using the value passed to the function – ie: 1 or 2 or 3 … etc

getEmployeesByManager( manager )

• This function will invoke the findAll() function and filter the results by “employeeManagerNum” (using the value passed to the function – ie: 1 or 2 or 3 … etc

getEmployeeByNum( num )

• This function will invoke the findAll() function and filter the results by “employeeNum” (using the value passed to the function – ie: 1 or 2 or 3 … etc
• If the findAll() operation resolved successfully , invoke the resolve method for the promise (with the data[0], ie: only provide the first object) to communicate back to server.js that the operation was a success and to provide the data.

getDepartments()

• If there was an error at any time during this process (or no results were returned), invoke the reject method and pass a meaningful message, ie: “no results returned”.

addEmployee( employeeData )

• isManager = (employeeData.isManager) ? true : false;
• Additionally, we must ensure that any blank values (“”) for properties are set to null. For example, if the user didn’t enter a Manager Number (causing employeeData.employeeManagerNum to be “”), this needs to be set instead to null (ie: employeeData.employeeManagerNum = null).  You can iterate over every property in an object (to check for empty values and replace them with null) using a for…in loop .
• Now that the isManager is explicitly set (true or false), and all of the remaining “” are replaced with null, we can invoke the create() function
• If the create() operation resolved successfully , invoke the resolve method for the promise to communicate back to server.js that the operation was a success.
• If there was an error at any time during this process, invoke the reject method and pass a meaningful message, ie: “unable to create employee”.

updateEmployee( employeeData )

• Like addEmployee(employeeData) we must ensure that the isManager value is explicitly set to true/false and any blank values in employeeData are set to null (follow the same procedure)
• Now that all of the “” are replaced with null, we can invoke the update() function and filter the operation by “employeeNum” (ie employeeData.employeeNum)
• If the update() operation resolved successfully , invoke the resolve method for the promise to communicate back to server.js that the operation was a success.
• If there was an error at any time during this process, invoke the reject method and pass a meaningful message, ie: “unable to update employee”.

Updating the Navbar & Existing views (.hbs)

If we test the server now and simply navigate between the pages, we will see that everything still works, except we no longer have any employees in our “Employees” view, and no departments within our “Departments” view. This is to be expected (since there is nothing in the database), however we are not seeing an any error messages (just empty tables).  To solve this, we must update our server.js file:

• ie: res.render(“employees”, {employees:data});

we must place a condition there first so that it will only render “employees” if data.length > 0.  Otherwise, render the page with an error message,

• ie: res.render(“employees”,{ message: “no results” });
• If we test the server now, we should see our “no results” message in the /employees route
• NOTE : We must still show messages if the promise(s) are rejected, as before
• Using the same logic as above (for the /employees route) update the /departments route as well
• If we test the server now, we should see our “no results” message in the /departments route
• NOTE : We must still show an error message if the promise is rejected, as before

For this assignment, we will be moving the “add Employee” and “add Image” links into their respective pages (ie: “add Employee” will be moved out of the Navbar and into the “employees” view and “add Image” will be moved out of the Navbar and into the “images” view)

• Remove this link ( {{#navLink}} … {{/navLink}} ) from the “navbar-nav” element inside the main.hbs file
• <a href=”/employees/add” class=”btn btn-success pull-right”>Add New Employee</a>
• <a href=”/images/add” class=”btn btn-success pull-right”>Add New Image</a>
• You will notice that currently, we have no way of adding a new department. However, while we’re adding our “add” buttons, it makes sense to create an “add Department” button as well (we’ll code the route and data service later in this assignment).
• <a href=”/departments/add” class=”btn btn-success pull-right”>Add New Department</a>

Adding new data-service.js functions

So far, all our data-service functions have focused primarily on fetching data and only adding/updating Employee data.  If we want to allow our users to fully manipulate the data, we must add some additional promise-based data-service functions to add/update Departments:

addDepartment( departmentData )

• Like addEmployee(employeeData) function we must ensure that any blank values in departmentData are set to null (follow the same procedure)
• Now that all of the “” are replaced with null, we can invoke the create() function
• If there was an error at any time during this process, invoke the reject method and pass a meaningful message, ie: “unable to create department”

updateDepartment( departmentData )

• Like addDepartment(departmentData) function we must ensure that any blank values in departmentData are set to null (follow the same procedure)
• Now that all of the “” are replaced with null, we can invoke the update() function and filter the operation by “departmentId” (ie departmentData.departmentId)
• If there was an error at any time during this process, invoke the reject method and pass a meaningful message, ie: “unable to update department”.

getDepartmentById( id )

• Similar to the getEmployeeByNum( num ) function, this function will invoke the findAll() function (instead of Employee.findAll()) and filter the results by “id” (using the value passed to the function – ie: 1 or 2 or 3 … etc

deleteDepartmentById( id )

• The purpose of this method is simply to “ delete ” departments using the destroy() for a specific department by “id”. Ensure that this function returns a promise and only “resolves” if the Department was deleted (“destroyed”).  “Reject” the promise if the “destroy” method encountered an error (was rejected).

Updating Routes (server.js) to Add / Update Departments

Now that we have our data-service up to date to deal with department data, we need to update our server.js file to expose a few new routes that provide a form for the user to enter data (GET) and for the server to receive data (POST).

/departments/add

• This GET route is very similar to your current “/employees/add” route – only instead of “rendering” the “addEmployee” view, we will instead set up the route to “render” an “addDepartment” view (added later)
• This POST route is very similar to your current “/employees/add” POST route – only instead of calling the addEmployee() data-service function, you will instead call your newly created addDepartment() function with the POST data.
• Instead of redirecting to /employees when the promise has resolved (using .then()), we will instead redirect to /departments

/department/update

• This POST route is very similar to your current “/employee/update” route – only instead of calling the updateEmployee() data-service function, you will instead call your newly created updateDepartment() function with the POST data.

/department/:departmentId

• This GET route is very similar to your current “/employee/:empNum” route – only instead of calling the getEmployeeByNum() data-service function, you will instead call your newly created getDepartmentById() function with the departmentId parameter value.
• Once the getDepartmentById(id) operation has resolved, we then “render” a “department” view (added later) and pass in the data from the promise. If the data is undefined (ie, no error occurred, but no results were returned either), send a 404 error back to the client using: status(404).send(“Department Not Found”);
• If the getDepartmentById(id) promise is rejected (using . catch ), send a 404 error back to the client using: status(404).send(“Department Not Found”);

/departments/delete/:departmentId

• This GET route will invoke your newly created deleteDepartmentById(id) data-service method. If the function resolved successfully, redirect the user to the “/departments”   If the operation encountered an error, return a status code of 500 and the plain text: “Unable to Remove Department / Department not found)”

Updating Views to Add / Update & Delete Departments

In order to provide user interfaces to all of our new “Department” functionality, we need to add / modify some views within the “views” directory of our app:

addDepartment.hbs

• The header (<h1>…</h1>) must read “Add Department”
• The form must submit to “/departments/add”
• There must be only one input field (type: “text”, name: “departmentName”, label: “Department Name”)
• The submit button must read “Add Department”
• When complete, your view should appear as:

department.hbs

• The header (<h1>…</h1>) must read “ departmentName – Department: departmentId ” where departmentName and departmentId represent the departmentName and departmentId of the current department.
• The form must submit to “/department/update”
• The hidden field must have the properties: name=”departmentId” and value=”{{data.departmentId}}” in order to keep track of exactly which department the user is editing
• There must be only one visible input field (type: “text”, name: “departmentName”, label: “Department Name”) it’s value must be preset to the current department’s departmentName (hint: value=”{{data.departmentName}}”)
• The submit button must read “Update Department”
• When complete, your view should appear as the following (if we’re currently looking at a newly created “Creative Services”, for example):

departments.hbs

• Replace the code: <td><a href=”/employees?department={{departmentId}}”>{{departmentName}}</a></td> with <td><a href=”/department/{{departmentId}}”>{{departmentName}}</a></td>
• Add a “remove” link for every department within in a new column of the table (at the end) – Note: The header for the column should not contain any text (ie: <hr></hr>). The links in every row should be styled as a button (ie: class=”btn btn-danger”) with the text “remove” and simply link to the newly created GET route “departments/delete/ departmentId ” where departmentId is the department id of the department in the current row.  Once this button is clicked, the department will be deleted and the user will be redirected back to the “/departments” list. (Hint: See the sample solution if you need help with the table formatting)

Now, users can click on the department name if they wish to edit an existing department, the department number if they wish to filter the employee list by department number, or “delete” if they wish to remove the department!

Updating the “Department” List in the Employee Views

Now that users can add new Departments, it makes sense that all of the Departments available to an employee (either when adding a new employee or editing an existing one), should consist of all the current departments in the database (instead of just 1…7).  To support this new functionality, we must make a few key changes to our routes and views:

“/employees/add” route

• Since the “addEmployee” view will now be working with actual Departments, we need to update the route to make a call to our data-service module to “getDepartments”.
• Once the getDepartments() operation has resolved, we then “render” the ” addEmployee view (as before), however this time we will and pass in the data from the promise, as “departments”, ie: render(“addEmployee”, {departments: data});
• If the getDepartments() promise is rejected (using . catch ), “render” the ” addEmployee view anyway (as before), however instead of sending the data from the promise, send an empty array for “departments, ie: render(“addEmployee”, {departments: []});

“addEmployee.hbs” view

      <select class=”form-control” name=”department” id=”department”>

            <option value=””>Select Department</option>

            {{#each departments}}

                  <option value=”{{departmentId}}”>{{departmentName}}</option>

            {{/each}}

      </select>

      <div>No Departments</div>

• Now, if we have any departments in the system, they will show up in our view – otherwise we will show a div element that states “No Departments”

“/employee/:empNum” route

• If we want to do the same thing for existing employees, the task is more complicated: In addition to sending the current Employee to the “employee” view, we must also send all of the Departments .  This requires two separate calls to our data-service module ( “dataService” in the below code) that return data that needs to be sent to the view.  Not only that, but we must ensure that the right department is selected for the employee and respond to any errors that might occur during the operations.  To ensure that this all works correctly, use the following code for the route:

app.get(“/employee/:empNum”, (req, res) => {

    // initialize an empty object to store the values

    let viewData = {};

    dataService.getEmployeeByNum(req.params.empNum).then((data) => {

        if (data) {

            viewData.employee = data; //store employee data in the “viewData” object as “employee”

        } else {

            viewData.employee = null; // set employee to null if none were returned

    }).catch(() => {

        viewData.employee = null; // set employee to null if there was an error

    }).then(dataService.getDepartments)

    .then((data) => {

        viewData.departments = data; // store department data in the “viewData” object as “departments”

        // loop through viewData.departments and once we have found the departmentId that matches

        // the employee’s “department” value, add a “selected” property to the matching

        // viewData.departments object

        for (let i = 0; i < viewData.departments.length; i++) {

            if (viewData.departments[i].departmentId == viewData.employee.department) {

                viewData.departments[i].selected = true;

            }

        viewData.departments = []; // set departments to empty if there was an error

    }).then(() => {

        if (viewData.employee == null) { // if no employee – return an error

            res.status(404).send(“Employee Not Found”);

            res.render(“employee”, { viewData: viewData }); // render the “employee” view

“employee.hbs” view

• Now that we have all of the data for the employee inside “viewData.employee” (instead of just “employee”), we must update every handlebars reference to data, from propertyName to viewData.employee.propertyName . For example: {{employee.firstName}} would become: {{viewData.employee.firstName}}
• Once this is complete, we need to update the <select class=”form-control” name=”department” id=”department”> … </select> element as well:

{{#if viewData.departments}}

     <select class=”form-control” name=”department” id=”department”>

          <option value=””>Select Department</option> {{#each viewData.departments}}

          <option value=”{{departmentId}}” {{#if selected}} selected {{/if}} >{{departmentName}} </option>

     {{/each}}

     </select>

     <div>No Departments</div>

Updating server.js, data-service.js & employees.hbs to Delete Employees

To make the user-interface more usable, we should allow users to also remove (delete) employees that they no longer wish to be in the system.  This will involve:

• Creating a new function (ie: deleteEmployeeByNum(empNum) ) in data-service.js to “ delete ” employees using the destroy() for a specific employee. Ensure that this function returns a promise and only “resolves” if the Employee was deleted (“destroyed”).  “Reject” the promise if the “destroy” method encountered an error (was rejected).
• Create a new GET route (ie: “ /employees/delete/:empNum “) that will invoke your newly created deleteEmployeeByNum(empNum) data-service method. If the function resolved successfully, redirect the user to the “/employees”   If the operation encountered an error, return a status code of 500 and the plain text: “Unable to Remove Employee / Employee not found)”
• Lastly, update the hbs view to include a “remove” link for every employee within in a new column of the table (at the end) – Note: The header for the column should not contain any text. The links in every row should be styled as a button (ie: class=”btn btn-danger” ) with the text “ remove ” and link to the newly created GET route “ employees/delete/ empNum ” where empNum is the employee number of the employee in the current row.  Once this button is clicked, the employee will be deleted and the user will be redirected back to the “/employees ” list.

Handling Rejected Promises in server.js

As a final step to make sure our server doesn’t unexpectedly stall or crash on users if a promise is rejected, we must match every .then() callback function with a .catch() callback.  For example, if we try to add or update an employee with a string value for “Employee’s Manager Number”, Sequelize will throw an “invalid input syntax for integer” error and our route will hang. To resolve this, we must:

• Ensure that whenever we specify a .then() callback, we specify a matching .catch() callback.
• If the behavior isn’t defined (ie: redirect or display a specific message), simply return a status code of 500 and send a string describing the problem, within the .catch() callback function ie:

.catch((err)=>{

      res.status(500).send(“Unable to Update Employee”);

NOTE : This is a catch-all that we can use for now, however a better solution would be to implement client-side validation with more sophisticated server-side validation, and save this as a last resort.

Sample Solution

To see a completed version of this app running, visit: https://tranquil-bastion-88914.herokuapp.com

Assignment Submission:

• Before you submit, you need to update css to provide additional style to the pages in your app. Black, White and Gray is boring, so why not add some cool colors and fonts (maybe something from Google Fonts )? This is your app for the semester, you should personalize it!
• Next, Add the following declaration at the top of your js file:

/********************************************************************************* *  WEB322 – Assignment 05 *  I declare that this assignment is my own work in accordance with Seneca  Academic Policy.  No part *  of this assignment has been copied manually or electronically from any other source *  (including 3rd party web sites) or distributed to other students. * *  Name: ______________________ Student ID: ______________ Date: ________________ * *  Online (Heroku) Link: ________________________________________________________ * ********************************************************************************/

• Compress (.zip) your web322-app folder and submit the .zip file to My.Seneca under Assignments -> Assignment 5
• Submit the URL to your app on Heroku as an assignment comment (not just within the file, but also in the comment section when you are submitting the assignment)
• You need to create a 3-5 min video in which you demo/test your code and explain it as you do your testing. For example, when you press on a link and it takes you to a new page, you show the pieces of code that were included in this action and explain the steps it followed. Also make sure to show the data being added and changed in your DB.

Important Note:

• NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be accepted and will receive a grade of zero (0) .
• After the end (11:59PM) of the due date, the assignment submission link on My.Seneca will no longer be available.
• 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.

Related products

WEB322 Assignment 4 solution

Web322 assignment 1 solution, web322 assignment 3 solution.

100% Guaranteed Results

WEB322 Assignment 5 Solved

Description.

• Reviews (0)

Assessment Weight: 9% of your final course Grade Objective: 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

• 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 * I declare that this assignment is my own work in accordance with Seneca Academic Policy. No part * of this assignment has been copied manually or electronically from any other source * (including 3rd party web sites) or distributed to other students. * * * ********************************************************************************/ • Compress (.zip) your assignment folder and submit the .zip file to My.Seneca under Assignments -> Assignment 5 Important Note: • 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.

There are no reviews yet.

Your email address will not be published. Required fields are marked *

Your review  *

Name  *

Email  *

Save my name, email, and website in this browser for the next time I comment.

Related products

WEB322 – PRACTICAL TEST 4

WEB322 Assignment 6 Solved

WEB322 Assignment 2 Solved

WEB322 Assignment 1 Solved

WEB322 Assignment 4 Solved

WEB322 - Web Programming Tools and Frameworks

Common portion of outline.

Subject Title Web Programming Tools and Frameworks

Subject Description The modern world deploys its software applications on the web, because of the web's scale, reach, and ease of use. This course teaches students to design and create simple web applications and services, in JavaScript, using widely-used and powerful tools and frameworks. The major topic themes of this course include a study of the web as a programming platform, server and client programming techniques, an introduction to data storage schemes, and an introduction to security.

Credit Status 1 credit (3 units) Required for CPA - Computer Programming and Analysis (Ontario College Advanced Diploma) Required for CPD - Computer Programmer (Ontario College Diploma)

• Contrast server-based and web client applications, to make an informed decision about creating a server-based web app.
• Propose a web app design that is based on a well-organized architecture and design principles, to ensure reliability, quality, enhancement, maintenance, and adaptability.
• Configure a web app server, using widely-used open source software (including Node.js, Express.js, and MongoDB), to provide a solution to a business problem or opportunity.
• Demonstrate professional level scripting skills to implement function closures, callbacks, asynchronous patterns, and to debug an application.
• Design programmatically-generated web documents, using a view engine, and a CSS framework, to present consistent, accessible and attractively-formatted content.
• Apply HTTP protocol elements, including messages, URI, clients, GET and POST requests, servers, and responses, to design and implement a modern standards-based web app.
• Create a simple security system including identity management, authentication, authorization, and resource sharing, to control access to a web app by authorized users.
• Select a suitable host for a published web app, to enable access on the public web.

Essential Employability Skills     •  Execute mathematical operations accurately.     •  Apply a systematic approach to solve problems.     •  Use a variety of thinking skills to anticipate and solve problems.     •  Locate, select, organize, and document information using appropriate technology and information systems.     •  Manage the use of time and other resources to complete projects.     •  Take responsibility for one's own actions, decisions, and consequences.

Academic Integrity Seneca upholds a learning community that values academic integrity, honesty, fairness, trust, respect, responsibility and courage. These values enhance Seneca's commitment to deliver high-quality education and teaching excellence, while supporting a positive learning environment. Ensure that you are aware of Seneca's Academic Integrity Policy which can be found at: http://www.senecapolytechnic.ca/about/policies/academic-integrity-policy.html Review section 2 of the policy for details regarding approaches to supporting integrity. Section 2.3 and Appendix B of the policy describe various sanctions that can be applied, if there is suspected academic misconduct (e.g., contract cheating, cheating, falsification, impersonation or plagiarism). Please visit the Academic Integrity website http://open2.senecac.on.ca/sites/academic-integrity/for-students to understand and learn more about how to prepare and submit work so that it supports academic integrity, and to avoid academic misconduct.

Discrimination/Harassment All students and employees have the right to study and work in an environment that is free from discrimination and/or harassment. Language or activities that defeat this objective violate the College Policy on Discrimination/Harassment and shall not be tolerated. Information and assistance are available from the Student Conduct Office at [email protected].

Accommodation for Students with Disabilities The College will provide reasonable accommodation to students with disabilities in order to promote academic success. If you require accommodation, contact the Counselling and Accessibility Services Office at ext. 22900 to initiate the process for documenting, assessing and implementing your individual accommodation needs.

Camera Use and Recordings - Synchronous (Live) Classes Synchronous (live) classes may be delivered in person, in a Flexible Learning space , or online through a Seneca web conferencing platform such as MS Teams or Zoom. Flexible Learning spaces are equipped with cameras, microphones, monitors and speakers that capture and stream instructor and student interactions, providing an in-person experience for students choosing to study online. Students joining a live class online may be required to have a working camera in order to participate, or for certain activities (e.g. group work, assessments), and high-speed broadband access (e.g. Cable, DSL) is highly recommended. In the event students encounter circumstances that impact their ability to join the platform with their camera on, they should reach out to the professor to discuss. Live classes may be recorded and made available to students to support access to course content and promote student learning and success. By attending live classes, students are consenting to the collection and use of their personal information for the purposes of administering the class and associated coursework. To learn more about Seneca's privacy practices, visit Privacy Notice .

School portion of outline

• Achieve a grade of 50% or better on the final exam
• Achieve a grade of 50 % or better on term work
• Achieve a grade of 50% or better on the overall course

http://www.senecapolytechnic.ca/about/policies/student-progression-and-promotion-policy.html

Grading Policy http://www.senecapolytechnic.ca/about/policies/grading-policy.html

For further information, see a copy of the Academic Policy, available online ( http://www.senecapolytechnic.ca/about/policies/academics-and-student-services.html ) or at Seneca's Registrar's Offices. ( https://www.senecapolytechnic.ca/registrar.html ).

General School Policies and Guidelines Attendance at Tests   Attendance at all tests is mandatory. Any absences must be communicated to the instructor by phone or email immediately (no less than 15 minutes before the start of the test) and supported by appropriate documentation within one week of the missed test. Note that no student will be allowed to enter an online exam or test later than 30 minutes after it has started. A student who does not notify the instructor 15 minutes prior to a missed test, does not submit appropriate documentation within one week of a missed test, or enters a test more than 30 minutes late will receive a grade of 0 on that test.   Assessment Submissions   All assessments will be submitted online, unless otherwise specified.   Submission of Assignments/Lab Reports/Etc.:   All assignments, lab reports, etc . must be submitted online ‘ within the first ten minutes of the scheduled class ’ online via the CMI333 course site on Blackboard (your instructor will direct you). A penalty of 10% may be imposed for all material submitted late on the day of the lab. An additional 10% per day (per 24-hour period) may be imposed on material submitted after the scheduled class. Material will not be accepted one week after the submission date and/or after the marked material has been returned, whichever comes first. A grade of 0 will be received for the unsubmitted work.   Absence from a major evaluation ( i.e. term test & assignment):   Term tests must be written on the scheduled day and time to which a student has been officially registered. There will be no ‘make up’ tests provided under any circumstances. When test time is finished, students must immediately cease writing or a grade of zero may be assigned.   The value of the missed major evaluation may be added to a student’s final examination at the discretion of the instructor and/or the promotion committee   provided the student :   notifies the respective instructor by email on the day of the test and Appropriate and valid documentation is submitted to the department student advisor within a week of the students return to school.   Laboratory Safety   All students are required to attend a safety orientation session in the laboratory during the first session of the laboratory program (TDB). A sign-off sheet, confirming attendance and receipt of the safety training, will be provided at the end of this orientation session. Attendance at this training is mandatory for participation in the lab; no alternative training dates will be provided for those who miss this training, and therefore they will not be able to participate in or pass the laboratory component.   The following personal protective equipment (PPE) is required in the lab:   Safety glasses or goggles Lab coat Long pants Closed shoes   No contact lenses may be worn in the lab. No food or drink (including water) may be consumed in the lab.   Laboratory Attendance   Laboratory attendance is mandatory. Failure to attend two or more laboratory periods will result in a failing grade for the laboratory component, and therefore the entire subject . Late arrival to the laboratory may result in prohibition from participating in the lab, at the discretion of the lab instructor.   School of Biological Sciences & Applied Chemistry Policies Academic Integrity Cheating and plagiarism are major academic offences and carry serious penalties. If an instructor suspects an academic honesty offence has taken place, they will speak to the student responsible to discuss the infraction. If the infraction is deemed to be in violation of the Academic Honesty Policy2, a report will be prepared and the student may respond to the report in writing. The reports will be   2 http://www.senecapolytechnic.ca/academic-policy/   passed to a committee to decide if an infraction occurred and to assign penalties as listed below.   First offence: a student caught committing an academic honesty violation will receive a mark of 0 on the work in which the offense occurred and have a comment listed on their transcript. This comment will be removed upon graduation. Second or subsequent offence: the penalty for the second offense of cheating or plagiarism is immediate expulsion from the college for the remainder of the semester or longer, depending on the circumstances. The comment will remain on the student’s transcript and will not be removed upon graduation.   Students are referred to College Policy on Cheating and Plagiarism in the College Academic Policy.   Seneca College Copyright Policy A majority of the course lectures and materials provided in class and posted in BlackBoard are protected by copyright. Use of these materials must comply with the College’s Copyright Policy, Fair Dealing Policy, Intellectual Property Policy and Student Code of Conduct. Students may use, copy and share these materials for learning and/or research purposes provided that the use complies with fair dealing or an exception in the Copyright Act. Permission from the rights holder would be necessary otherwise. Please note that it is prohibited to reproduce and/or post a work that is not your own on third-party commercial websites including but not limited to Course Hero, OneNote or StudyBlue. It is also prohibited to reproduce and/or post a work that is not your own or your own work with the intent to assist others in cheating on third-party commercial websites including but not limited to Course Hero, OneNote or StudyBlue.   Policy on Discrimination & Harassment   All students and employees have the right to study and work in an environment that is free from discrimination and/or harassment. Language or activities that violate the College Policy on Discrimination/Harassment3 shall not be tolerated.   Cell Phone Usage   As a courtesy to your fellow students and faculty, cell phones should remain on silent or be turned off while in class. If, in the case of an emergency, the cell phone must remain on, please set the cell phone on vibrate and notify the instructor of the situation before class begins. Cell phones are not permitted during tests.   Permission must be asked and granted from the instructor and/or fellow students, if applicable, before recording any audio, video, or still images using a cell phone during lecture or laboratory periods. Obtaining or circulating such materials without permission constitutes a violation of the College’s Freedom of Information and Protection of Privacy Policy4.   Calculators   Students are allowed to use a non-programmable, non-graphing scientific calculator with acceptable English key notations during tests. No other electronic device may be used in place of the required calculator.   Accommodation   The College will provide reasonable accommodation to students with special needs in order to promote academic success. If accommodation is required, contact the Counseling and Disabilities Services Office to initiate the process for documenting, assessing and implementing individual accommodation needs.   Students requiring academic accommodations must submit an Academic Accommodation form to the School Chair at the beginning of each semester. This must be  received a  minimum of  5 days  before an  assessment in  order for accommodations to be processed. The instructor will provide accommodation in accordance with the submitted form. For any tests or exams, an accommodated student may write the test in the classroom or at the Test Centre at their discretion.   Acceptable Documentation   Proper documentation is required for missed assignments, tests and exams. This may include a signed doctor’s note, a police report, death certificate, note from a transit agency, etc.   Copyright:   All educational material provided are the intellectual property of Seneca College and it is provided to students exclusively for their own educational use. It is prohibited to reproduce and/or post this material to any commercial websites.   Electronic Devices:   Students are required to use a ‘stand alone’ nonprogrammable scientific calculator with acceptable English key notations. No other electronic device (i.e. cell phone, palm pilot) or any electronic device with translator functions may be used in place of the required calculator.   Computing Acceptable Use Policy   All Students are responsible for abiding by the College’s Information Technology Acceptable Use Policy5 and for obeying Provincial and Federal laws/regulations regarding the use of computer equipment, facilities and/or networks.  

Seneca College of Applied Arts and Technology

We Teach Code

• 0.00  $ 0 items

WEB322 Assignment 5 Solved

25.00  $

If Helpful Share:

Description

9% of your final course Grade Objective: 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

• 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.

Related products

WEB322-Assignment 3 Solved

WEB322 Assignment 2 Solved

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

dchan68/Web322-Assignment-5

Folders and files.

• JavaScript 35.7%