WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

Introduction

This assignment is the fourth of six assignments. It has been designed to give you practical experience
working with no-SQL databases and organizing your project files using the MVC design pattern.

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.

Note: In a previous assignment, you created a “fake” database to store meal kit information. You can
leave your meal kits database “as is” for now. You will move the information into a Mongo DB during a
future assignment.

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 #4 – WINTER 2024 DUE: MARCH 22, 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 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

MVC Design Pattern

Your application must be structured according to the MVC Design Pattern. In other words, your views,
models, and controllers must be separated as per the design pattern requirements learned during
lectures.

Create a “general” controller and move the following routes to the controller. When using the
controller in server.js, use the base url “/”.

• Home (/)
• Registration (/sign-up)
• Login (/log-in)
• Welcome (/welcome)

Create a “mealkits” controller and move the following route to the controller. When using the
controller in server.js, use the base url “/mealkits”.

• Meal Kits (/mealkits)

Remember to re-organize your views according to the structure learned in class.

 WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

Sensitive Information

In the previous assignment, you stored sensitive information, such as the SendGrid API key, in
environment variables. You will continue this trend by securing the MongoDB connection string. Do not
forget, this file should not appear on GitHub but must be submitted on Blackboard for testing.

User Registration

You are required to add database functionality to the registration page that was implemented in the
previous assignments. When a user fills out the registration form and presses the submit button:

• check that all fields have passed validation (already implemented in a previous assignment).
• create a user document in the MongoDB (ensure you encrypt the password).
• send a welcome email to the user’s inbox (already implemented in a previous assignment).
• redirect the user to a welcome page (already implemented in a previous assignment).

With respect to database functionality, the following rules must be followed:

1. Setup and configure a MongoDB cloud service using MongoDB Atlas. Remember to allow all IP
addresses by adding a firewall rule for “0.0.0.0/0”.
2. Your must name your database “web322<initials>-2241”. For example, your professor will
name the database “web322nkr-2241”.
3. Connect your web application to your MongoDB database using an Object Document Mapper
(ODM) called Mongoose.
4. Create a schema called “userSchema” and a model called “userModel” in a module called
“userModel.js”. The module must be placed in the “models” folder. Name the collection
“users”.
5. Ensure that the email entered by the user is unique. Your application must prohibit different
users from having the same email in the database. If the user attempts to re-register using the
same email, display a user-friendly error message.
6. Passwords must not be stored in plain text in the database. Your application must store
passwords in an encrypted format.
 WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

Authentication Module
You are required to implement a fully functional authentication module with the following features. The
authentication module affects your login page only. Your sign-up page must not include the “data entry
clerk” or “customer” options.

• Your application must allow two types of logins. Add radio buttons to allow the user to specify
the role they will sign in as. A user may choose to login as a “data entry clerk” or a “customer”.
Pre-select the “data entry clerk” option.
o Data Entry Clerk – users that can add, remove, and modify meal kits (preselected).
o Customer – users that can purchase meal kits.
• If the there is an unsuccessful authentication attempt, the application must display an
appropriate message that is properly styled. For example, “Sorry, you entered an invalid email
and/or password”.
• If there is a successful authentication attempt, for example, entering an email and password pair
that exists in the database, then a session is created to maintain user state until the user has
logged out of the application.
• After successfully authenticating, the application must determine if the person logging in is a
data entry clerk or a customer and will redirect them appropriately.
o For data clerks, redirect to /mealkits/list. This is a new route and is added to the meal
kits controller. In the future, you will allow data clerks to add, remove and modify
existing meal kit properties in the database. For now, simply show a message greeting
the clerk.
o For customers, redirect to /cart. This is a new route and is added to the general
controller. In the future, this page will display a shopping cart that will show a list of the
purchased meal kits. For now, simply show a message greeting the customer.
o Both pages must be styled and rendered within the main layout.
• After a user is signed in, the user’s first name and a logout link will appear in the navigation bar.
o Clicking the user’s name will navigate to the shopping cart (for customers) or the meal
kit list (for data clerks).
o Clicking the logout link will navigate to a logout route (/logout) added to the general
controller. Navigating to the logout route must destroy the session then redirect to the
login page.
• Specific routes can only be accessed when users of the correct type are logged in. Add
protection to the routes as necessary. If any of the following scenarios occur, return a 401
status code with the message “You are not authorized to view this page.”.
o Anonymous users cannot access the shopping cart (/cart) or the meal kit list
(/mealkits/list).
o A customer cannot access the meal kit list (/mealkits/list).
o A data entry clerk cannot access the shopping cart (/cart).
o The error page must be styled and rendered within the main layout.
 WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

Cyclic

This assignment will be marked locally (on your professor’s machine). Do not need to deploy this
assignment to Cyclic.

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.

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.

User Registration

• MongoDB cloud service is

setup, and all IPs are
allowed. Database and
collection have the correct
names. Connection string is
protected using dotenv.

• User data is inserted into

the database when the user
fills out the form and hits
the submit button. The
password is stored in
encrypted format.

• Email uniqueness is
validated without an error
WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

occurring in your code and

without an error getting
logged to the terminal. A
friendly (styled) error
message is displayed to the
user.

Authentication (Sign In)

• After an unsuccessful
authentication attempt, the
application displays an
appropriate (styled) error
message.

• After a successful
authentication attempt, a
session is created to
maintain user state. The
user’s first name and a
logout link appear in the
navigation bar. The session
exists until the user logs out
of the application.

• The application redirects a

data clerk to the meal kits
list and a customer to the
shopping cart dashboard.
Clicking the user’s first
name will show the
appropriate page. Both
pages are styled and show
header/footer.
 WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 2024 @ 11:59 PM EST

• The shopping cart and meal

kits list can only be accessed
when users are logged in
and by users with the
appropriate user roles. A
status 401 is returned with
the appropriate error
message if access is denied.
Error pages are styled and
show header/footer.

• The logout link destroys the

session then redirects to
the login page.

Architecture

• A general controller is
created according to spec.
It contains the home,
registration, login, logout,
welcome, and shopping cart
routes. All URLs are correct.

• A meal kits controller is

created according to spec.
It contains the meal kits
page (from the previous
assignment) and the meal
kits list used by data clerks.
All URLs are correct.

• Views, models, and

controllers are placed in the
correct folders and name
appropriately. All files are
structured as taught in
class.

Total: 22 Marks

Note: Half marks may be awarded.

 WEB322 – ASSIGNMENT #4 – WINTER 2024 DUE: MARCH 22, 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.

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.