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

Introduction

This assignment is the last of six assignments. In this assignment, you will implement a shopping cart
experience for your customers.

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 #6 – WINTER 2024 DUE: APRIL 12, 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

Meal Kit Card Modifications

Logged in customers must be able to “purchase” meal kits by adding the meal kits of their choosing to
their shopping cart. In a previous assignment, you created a meal kit card partial view. You will modify
the partial view so that the meal kit card displays a “Buy” button, to customers only. Do not show the
button to data clerks or when there is no one signed in.

Since the same card is used on the “meal kits” page and home page, this button will appear on both
pages. Clicking the button will:

• Add the meal kit to the customer’s shopping cart with a quantity of one.
• Navigate the user to the shopping cart so that they can see the newly added meal kit.

Shopping Cart Module

In a previous assignment, you started working on a shopping cart page. Modify the page so that it
displays a list of the meal kits that the customer added to their shopping cart.

For each meal kit, you must show: an image thumbnail, the title, what it includes, the price, the quantity
to purchase, the total amount for this meal kit (price of meal kit x quantity).
 WEB322 – ASSIGNMENT #6 – WINTER 2024 DUE: APRIL 12, 2024 @ 11:59 PM EST

The customer must have some way of adjusting the number of meal kits they want to purchase. They
must also have a way of removing the meal kit from their shopping cart.

In addition to the meal kit information, you must also show the subtotal, taxes, and the grand total.
Each are explained:

• Subtotal: Sum the price of the meal kits that are in the cart (don’t forget to consider the
quantity).
• Tax: Calculate a 10% tax. For example, “subtotal x 0.10”.
• Grand total: Add the subtotal and tax.

Finally, you must display a “Place Order” button on the page. When the button is pressed, your web
application will send an email to the logged-in customer’s email address, showing the same details
displayed on the shopping cart page, except for the image thumbnail.

After the email is sent, clean (zero-out) the shopping cart. Do not log out the user, the customer may
want to purchase additional meal kits.

GitHub

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

Cyclic

Due to issues with Cyclic’s new pricing model, this assignment will be marked locally (on your professor’s
machine). You do not need to deploy this assignment to Cyclic but you can if you want to.
WEB322 – ASSIGNMENT #6 – WINTER 2024 DUE: APRIL 12, 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.

Meal Kit Card

• A “buy” button appears, for

customers only, on the meal
kit card. The same card is
used on both the home and
“on the menu” pages. The
button only appears if a
customer is logged in.

• Clicking the “buy” button

adds the meal kit to the
customer’s shopping cart
and navigates them to the
cart page.

Shopping Cart Module

• Each meal kit displays an

image thumbnail, the title,
what is included, the price,
the quantity, the line total.

• Customers can change the

quantity they want to
purchase or delete the meal
kit from their cart.

• The subtotal, a 10% tax, and

the grand total are correctly
calculated and displayed to
the customer.
 WEB322 – ASSIGNMENT #6 – WINTER 2024 DUE: APRIL 12, 2024 @ 11:59 PM EST

• When the customer clicks

the “Place Order” button,
the application “clears” the
shopping cart and sends an
email with the required
order information to the
customer. The user is not
logged out.

• After placing the order, an

email is sent. The email
contains the same details as
the shopping cart.

Criteria Not Partially Fully

Implemented (0) Implemented (4) Implemented (8)

Little or no work Work is minimally Work is complete

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

Overall Behaviour and Look

• Overall site looks polished

on all devices, follows the
specifications as outlined in
all assignments, and works
well.

• All customer facing pages of

the site are responsive. (The
data clerk module does not
need to be responsive).

Total: 22 Marks

Note: Half marks may be awarded.

 WEB322 – ASSIGNMENT #6 – WINTER 2024 DUE: APRIL 12, 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.