COMP 484 Full Stack Web Development Project

COMP 484L Summer 2023Homework 3 and Lab 3: Full-Stack Web Development
Homework 3 due Thursday August 10th 2023 at 11:55pm as a PDF to Canvas.
Lab 3 due Tuesday August 22nd 2023 at 11:55pm to Canvas or as a live demo on
Zoom in Breakout Room during lab section or office hours before that date.
—- No late submissions can be accepted for this assignment!!! —This assignment is to be worked on INDIVIDUALLY! No team submissions allowed.
PURPOSE
You are going to learn how to create a basic full-stack website using PHP and MySQL, or (extra
credit) Node.js with either MySQL or MongoDB. For extra credit, you can learn to deploy as a
containerized application, or as an AWS Lambda.
REQUIREMENTS
To complete this project you will perform a demo live during a lab section on Zoom (or in office
hours), in a breakout room. If you demo a fully working Lab 3, you will receive immediate full
credit. (If you successfully demo on Zoom, you do not need to submit anything to Canvas, and
your grade shall appear on Canvas right after the demo!)
Otherwise you will create and submit one zip file containing all project files. The file will be
called lab3.zip
In this zipfile, you must include a short “readme” file named lab3.txt, containing…
• a description of all files you are turning in (especially if there are extra PHP files),
• a description of how much of the project is complete, including extra credit
• a description of any known bugs in the program
To earn extra credit, the basic lab code must be working, and all files documenting the
configuration of the container and/or a screenshot showing the AWS Lambda deployment must
be included.
YOU MAY USE A WYSIWYG EDITOR! This editor can be used to generate the HTML markup
of your document. Any CSS, PHP, or JavaScript must be subsequently added to this file by
hand (i.e. manually editing the HTML file).
BASIC SITE FUNCTIONALITY (worth 60% of assignment)
The website presents a very simple page: a number (displayed on the page) and a button
(input).
The number displayed is initially 1. Clicking the button increments the number.
(If a user arrives and clicks the button 3 times, they see the number 4 displayed.)
This functionality must be implemented using a web-server and a database table. This
functionality cannot be implemented using front-end JavaScript alone, or all points will be lost.
The database table stores the current count. The default implementation would be a PHP page
which interfaces with a MySQL database.
Recommended: the database schema needs just one table, and it should be named user and
have a column named count. Only one row is needed in the entire table. The count can be
updated in this row. (This schema is easy to expand to multi-user site functionality.)
MULTI-USER SITE FUNCTIONALITY (worth 40% of assignment)
The website presents a landing page with a registration form (for new users) and a login form
(for current users). This can be laid out using any number of pages unless you are attempting
the extra credit for single-page navigation.
Users register with a username and a password. The username cannot currently exist in the
database.
Users login with their username and password, and if the login is successful (i.e. matches a
username and password stored in the database), they come to the main page.
The main page looks almost exactly like basic site functionality: a number and a button. The
number is the logged-in user’s current count. Each user has their own count (in the database)
starting at 1.
The main page also has a logout link, which logs the user out and returns the user to the
landing page.
(If user oppenheimer registers, logs in, and clicks the button 3 times, they see the number 4
displayed. If they log out and user kaplan arrives, the user sees the number 1 displayed. If
kaplan logs out and oppenheimer logs in, they see the number 4 displayed.)
Recommended: the database schema needs just one table, and it should be named user and
have columns: userid (auto-incrementing), username (string), password (string), and count (the
same as in basic site functionality). Each user will have their own row, and their count can be
updated in this row.
PHP $_SESSION object (and functions session_start and session_destroy) can be used to
maintain the user’s logged-in session state.
In Node.js and Express.js, you can use the npm express-session and associated framework to
maintain the user’s logged-in session state.
HOMEWORK 3 GRADING
You must submit a PDF containing the following…
•
you must tell me your choice of server framework…
o PHP with MySQL or Node.js with MySQL or Node.js with MongoDB or AWS
Lambda with DynamoDB
•
you must show me a screenshot indicating that the environment is working
o for PHP/MySQL, this could be a view of phpMyAdmin
o for Node.js, this could be nodeMyAdmin, or a screenshot of your browser
navigating to a locally hosted Express app
§ nodeMyAdmin: https://github.com/Andrea055/nodeMyAdmin
§ Recommended:
try
the
hellonode.js
application
here:
https://developer.mozilla.org/en-US/docs/Learn/Serverside/Express_Nodejs/development_environment
Note: if you are planning to attempt the AWS Lambda extra-credit, it is strongly advised that you
attempt a local Node.js implementation beforehand.
LAB 3 GRADING
Up to 100% (plus up to 16% extra credit on your final COMP 484/L score…see below) will
be provided for successful live demos on Zoom, in which the instructor will quickly assess your
project execution and also your code. Be prepared to show both the code and the working
website in the breakout room during the demo! The instructor may give you a score of 100%
(with extra credit if earned) on the spot, or ask you to make fixes and re-submit or re-demo.
OR, for Canvas Submissions:
60%: Basic Site Functionality is implemented correctly
40%: Multi-User Site Functionality is implemented correctly
+5% weighted average extra credit points in COMP 484/L: site is implemented in Node.js
and Express.js with either MySQL or MongoDB
(If both Basic and Multi-User Site Functionality are fully implemented and working,
more extra credit is possible…)
+2% weighted average extra credit points in COMP 484/L: database stores passwords as
salted-hashes (alongside the salt). You can use either the PHP or Node.js bcrypt functions to
implement this functionality, but to earn extra credit the salted-hash and salt must be
stored in the user table alongside the count. No additional tables should be used to
implement authentication!
+3% weighted average extra credit points in COMP 484/L: single-page navigation with
JSON/AJAX…in this case the Node.js or PHP app does not return an entire HTML page, but
rather a JSON object in the response. The front-end JavaScript must use AJAX functionality
to receive/parse and render the information in the JSON object.
+3% weighted average extra credit points in COMP 484/L: containerize your
implementation in Docker and host the container locally. You must include any Dockerfile
and/or docker-compose files in your lab3.zip, and you must provide screen-shot evidence of
browser showing that the application works locally on your machine.
+3% weighted average extra credit points in COMP 484/L: host Lab3 as an AWS Lambda
with Node.js and DynamoDB. Show evidence of the working page from a browser, as well as
screenshots of the code in the AWS Lambda console.
CHEATING
This project is an individual project. You can discuss this project with other students. You can
explain what needs to be done and give suggestions on how to do it. You cannot share source
code. If two projects are submitted which show significant similarity in source code then both
students will receive an F on the assignment. Note a person who gives his code to another
student also fails the assignment (you are facilitating the dishonest actions of another).
Source code that is copied from websites without citation will also count as cheating, and the
same consequences apply.