WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

Introduction

This assignment is the fifth of six assignments. In this assignment, a data clerk will maintain a list of
meal kits. Data clerks will have the opportunity to upload image files as part of a multi-part form
submission.

Before you begin this assignment, you must finish your previous assignment. All objectives listed for this
assignment are to be made “on top” of your previous assignment.

This assignment is worth 9% of your final grade.

Reminder about academic integrity

Most of the materials posted in this course are protected by copyright. It is a violation of Canada's
Copyright Act and Seneca's Copyright Policy to share, post, and/or upload course material in part or in
whole without the permission of the copyright owner. This includes posting materials to third-party file-
sharing sites such as assignment-sharing or homework help sites. Course material includes teaching
material, assignment questions, tests, and presentations created by faculty, other members of the
Seneca community, or other copyright owners.

It is also prohibited to reproduce or post to a third-party commercial website work that is either your
own work or the work of someone else, including (but not limited to) assignments, tests, exams, group
work projects, etc. This explicit or implied intent to help others may constitute a violation of Seneca’s
Academic Integrity Policy and potentially involve such violations as cheating, plagiarism, contract
cheating, etc.

These prohibitions remain in effect both during a student’s enrollment at the college as well as
withdrawal or graduation from Seneca.

This assignment must be worked on individually and you must submit your own work. You are
responsible to ensure that your solution, or any part of it, is not duplicated by another student. If you
choose to push your source code to a source control repository, such as GIT, ensure that you have made
that repository private.

A suspected violation will be filed with the Academic Integrity Committee and may result in a grade of
zero on this assignment or a failing grade in this course.
 WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

Technical Requirements

• All back-end functionality must be done using Node.js and Express.

• You must use the body-parser module to handle form submissions.
• You must use the express-session module to handle user session state information. You may
also use client-session (as posted on the WEB322 website) however it may not function correctly
on Cyclic.
• You must use bcrypt.js to encrypt user passwords.
• You must use express-fileupload or multer to process multipart form data.
• You must use MongoDB as your database engine.
• Your views must be created with EJS.
• You can use a front-end CSS framework such as Tailwind CSS, daisyUI, or Bootstrap to make your
website responsive and aesthetically pleasing.
• You are not allowed to use any Front-End JavaScript Frameworks. For example, you may not
use React, Vue, or Angular.

Objectives

Data Loading

Create a throw-away “load data” controller but do not delete the controller; the controller must be
submitted so it can be marked by your professor.

The “load data” controller must contain a route that will populate meal kit data. The following are the
requirements for the route:

1. A data clerk can load meal kit data to the database by accessing the URL “/load-data/mealkits”.
2. This functionality must be placed in its own controller and must be coded using the MVC design
patterns learned in class.
3. You must check to ensure that there are no meal kits in the database before adding new meal
kits; this is it to prevent the adding of duplicate entries.
4. You must populate at least six meal kits in total.
a. At least three meal kits should be marked as “featured” and displayed on the home
page.
b. The “on the menu” page should contain at least six listings grouped into two different
categories.
c. The “featured” meal kits will appear on both the home page and the “on the menu”
page.
5. After accessing a load data route, display an EJS view with a message describing the outcome:
 WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

a. If data was loaded to the database, display a message like “Added meal kits to the
database”.
b. If data has already been loaded to the database, display a message like “Meal kits have
already been added to the database”.
c. Only data clerks can load data. If the user is not a data clerk or not logged in, display a
message like “You are not authorized to add meal kits” and return a 403 status code.
d. The message must be properly styled and rendered within the main layout.
6. Add a link to the data clerk’s “meal kits list” (/mealkits/list) page that will navigate the clerk to
the load-data page.

Data Entry Clerk Module

You are required to implement a Data Entry Clerk Module that allows a “logged-in” data entry clerk to
perform the following tasks.

• /mealkits/list (HTTP GET)

You started implementing this page in the previous assignment. It will show a list of the meal
kits in your database sorted by title. Do not need to group your meal kits by category. Next to
each meal kit, you will need to include “Edit” and “Delete” buttons to allow the clerk to perform
to modify or delete a meal kit. Clicking each button will navigate to the appropriate route (listed
below).

At the top of the page, place an “Add” button that directs the data clerk to the “/mealkits/add”
route. You should only have a single “Add” button, you do not need one for each meal kit.

• /mealkits/add (HTTP GET and POST)

Allows the data entry clerk to add new meal kits to the database. All the fields listed in
assignment 2 must be included and editable on this page. All fields are required, and a value
must be supplied by the data clerk.
a. title (String) – input type=”text”
b. includes (String) – input type=”text”
c. description (String) – textarea
d. category (String) – input type=”text”
e. price (Number) – input type=”number” (accepts a number greater than 0.00 and must
allow two decimal places).
f. cookingTime (Number) – input type=”number” (accepts a number greater than 0 and
without decimals).
g. servings (Number) – input type=”number” (accepts a number greater than 0 and
without decimals).
h. imageUrl (String) – Upload a photo of the meal kit. To keep the project simple, only
upload one image per meal kit.
i. featuredMealKit (Boolean) – input type=”checkbox”
 WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

• /mealkits/edit/:id (HTTP GET and POST)

Edit meal kit details. All fields can be changed, including the photo. Use the same HTML control
types (for example, text, number, checkbox) as the add page above.

• /mealkits/remove/:id (HTTP GET and POST)

Remove meal kits from the database. Remember to delete the image file from your web server.
Use the GET route as a confirmation page. The meal kit will be deleted only when the user
confirms that they want to delete it. The logic for the delete will appear in the POST route.

Additional Notes:

• Ensure that meal kits entered into the database are populated on the front-end of the web
application.
a. All meal kits must appear on the “meal kits” page grouped within the appropriate
location.
b. Only the meal kits that were set as “featured” should be displayed on the home page.
c. A visitor does not need to be logged in to view the meal kits on the home page and the
“meal kits” page.

• For both the “add” and “edit” routes, ensure the data clerk can only upload images stored as
one of the following media types (extensions): jpg, jpeg, gif, or png.

GitHub

You can continue to commit code changes to your local git repository but do not push your changes to
GitHub. If you push your changes to GitHub you may update your cyclic website before it has been
marked.

Cyclic

This assignment will be marked locally (on your professor’s machine). You do not need to deploy this
assignment to Cyclic.
WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

Rubric

Criteria Not Partially Fully

Implemented (0) Implemented (1) Implemented (2)

Little or no work Work is minimally Work is complete

done. acceptable but is and done perfectly.
Unacceptable incomplete or
attempt. needs significant
modification.

Data Clerk Module

• The data entry clerk can

view a list of all meal kits
(excludes home page and
on-the-menu page).

• A data entry clerk can

create meal kits supplying
necessary data.

• The data entry clerk can

edit all meal kit details.

• A data entry clerk can

remove meal kits. The
image file is also deleted.

• A data entry clerk can

upload a photo for a new
meal kit or an existing meal
kit. Only image file types
can be uploaded as a photo.

• New meal kits appear on

the “on the menu” page
within the correct category.
Featured meal kits are
shown on the home page.

• All routes have the correct

URL and are stored in the
“meal kits” controller.
 WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

Load Data Module

• Only data clerks can load

data by navigating to the
appropriate route.
Duplicate meal kits are not
added when run multiple
times.

• A correct, formatted,
message is displayed after
attempts to load data. The
header and navigation bar
are present. A link from the
“meal kits list” page exists.

• All routes have the correct

URL and are stored in the
“load data” controller.

Total: 20 Marks

Note: Half marks may be awarded.

 WEB322 – ASSIGNMENT #5 – WINTER 2024 DUE: APRIL 5, 2024 @ 11:59 PM EST

Submitting your work

Make sure you submit your assignment before the due date and time. It will take a few minutes to
package up your project so make sure you give yourself a bit of time to submit the assignment.

1. Do not push any commits to GitHub until assignment 3 has been marked.

2. Locate the folder that holds your solution files. You must delete the “node_modules” folder but
do not delete any other files or folders.

3. Compress the copied folder into a zip file. You must use ZIP compression, do not use 7z, RAR,
or other compression algorithms or your assignment will not be marked.

4. Login to https://learn.senecapolytechnic.ca, open the Web Programming Tools and

Frameworks course area, then click the Project link on the left-side navigator. Follow the link
for this assignment.

5. Submit/upload your zip file. The page will accept unlimited submissions so you may re-upload
the project if you need to make changes. Make sure you make all your changes before the due
date. Only the latest submission will be marked.