Due 11:59pm ET September 22, 2024. This is a group project to be completed in groups of two to three.
Change Log
Initial Release for F24
2024-09-09: Add callout for DeprecationWarning when running tests
2024-09-16: Move SQL injection test case to All Pages
Introduction
An Instagram clone implemented with server-side dynamic pages. This is the second of an EECS 485 three project sequence: a static site generator from templates, server-side dynamic pages, and client-side dynamic pages.
Build an interactive website using server-side dynamic pages. Reuse the templates from project 1, rendering them on-demand when a user loads a page. New features include creating, updating, and deleting users, posts, comments, and likes.
The learning goals of this project include server-side dynamic pages, CRUD (Create, Read, Update, Delete), sessions, and basic SQL database usage.
Here’s a preview of what your finished project will look like. A database-backed interactive website will work (mostly) like the real Instagram.
$./bin/insta485run
* Serving Flask app "insta485"
* Running on http://127.0.0.1:8000/ (Press CTRL+C to quit)
Then you will navigate to http://localhost:8000 and see working, multi-user, interactive website that you created.
This project adds lots features. For example, users can add likes and comments.
Setup
Group registration
Please register your group on the Autograder. The office hours queue will give first priority to groups asking a question for the first time in a day.
AWS account and instance
You will use Amazon Web Services (AWS) to deploy your project. AWS account setup may take up to 24 hours, so get started now. Create an account, Start EC2 instance, and configure the instance. Don’t deploy yet. Only one group member needs to set up an AWS account. AWS Tutorial.
Project folder
Create a folder for this project. Your folder location might be different.
Only one group member needs to create the remote repository.
After you’re done, you should have a local repository with a “clean” status and your local repository should be connected to a remote GitHub repository.
This is a sample .gitignore file that's useful for EECS 485 projects.
...
Starter files
Download and unpack the starter files. Only one group member needs to download and unpack the starter files and the rest of the group can clone the repository.
Before making any changes to the clean starter files, it’s a good idea to make a commit to your Git repository.
Fresh install
These instructions are useful for a group member who wants to check out a fresh copy of the code.
Check out a fresh copy of the code in the directory that you store all of your EECS485 projects. Note that cloning the repository will create a new directory for your project.
$git clone <your git URL here>
$cd p2-insta485-serverside/
You can now continue with the next sections.
Python virtual environment
Each group member should create a Python virtual environment inside of the project directory using the Project 1 Python Virtual Environment Tutorial.
You should now have Python tools and third party packages installed locally. Your versions and exact libraries might be different.
Start by completing the SQLite Tutorial.
After the tutorial, you should have the sqlite3 command line utility installed. Your version might be different.
Update schema.sql, which will create 5 tables: users, posts, following, comments and likes. The following list describes the tables and columns
users table
username, at most 20 chars, primary key
fullname, at most 40 chars
email, at most 40 chars
filename, at most 64 chars
password, at most 256 chars,
created, DATETIME type, automatically set by SQL engine to current date/time.
posts table
postid, integer, primary key, automatically incremented with AUTOINCREMENT
filename, at most 64 chars
owner, at most 20 chars, foreign key to users.
created, DATETIME type, automatically set by SQL engine to current date/time.
Rows in the posts table should be removed automatically when the owner is deleted.
following table
username1, at most 20 chars, foreign key to users.
username2, at most 20 chars, foreign key to users.
The tuple (username1, username2) form a primary key
created, DATETIME type, automatically set by SQL engine to current date/time.
Rows in the following table should be removed automatically when a user corresponding to username1 or username2 is deleted.
The following relation is username1 follows username2.
comments table
commentid, integer, primary key, automatically incremented with AUTOINCREMENT
owner, at most 20 chars, foreign key to users table
postid, integer, foreign key to posts table
text, at most 1024 chars
created, DATETIME type, automatically set by SQL engine to current date/time.
Rows in the comments table should be removed automatically when a user corresponding to owner or a post corresponding to postid is deleted.
likes table
likeid, integer, primary key, automatically incremented with AUTOINCREMENT
owner, at most 20 chars, foreign key to users
postid, integer, foreign key to posts
created, DATETIME type, automatically set by SQL engine to current date/time.
Rows in the likes table should be removed automatically when a user corresponding to owner or a post corresponding to postid is deleted.
Pro-tip: Every column outlined above is required for the insta485 database (see NOT NULL ). PRIMARY KEY and DEFAULT attributes automatically imply the NOT NULL constraint.
Pro-tip: Use ON DELETE CASCADE to automatically remove data from a table when corresponding data from another table is deleted. This applies to the likes table, comments table, following table and posts table.
Data
Update sql/data.sql to add all initial data. You can find a complete dump of the initial data in insta485db-dump.txt. Your timestamps will be different. The password for awdeorio is chickens and rest of the given users is password.
Testing
Install the libraries needed to run the database tests.
$source env/bin/activate # Make sure virtual environment is activated
$pip install pytest
Run the public autograder testcases on your database schema and data.
$pytest -v tests/db_tests
...
========================== 2 passed in 1.76 seconds ===========================
Make sure these tests pass before moving on. The other unit tests rely on a fully functionally bin/insta485db script.
You should now submit your work to the autograder. Ignore errors about files that don’t exist when making the tarball.
Server-side Insta485
This project includes the same pages as project 1. The pages also include buttons to follow, unfollow, like, unlike and comment. We’ll also add pages for user account administration.
List of URLs from project 1. Keep these URLs in project 2.
You should now have a directory containing an insta485 Python module.
$tree insta485 -I'__pycache__'
insta485
├── __init__.py
├── config.py
├── model.py
├── static
│ └── css
│ │ └── style.css
├── templates
│ └── index.html
└── views
├── __init__.py
└── index.py
insta485run script
The insta485run script starts a development server and you can browse to http://localhost:8000/ where you’ll see your “hello world” app. The Flask Tutorial Run Script section describes this script.
$./bin/insta485run
All pages
Include a link to the main page /.
If logged in, include a link to /explore/.
If logged in, include a link to /users/<user_url_slug>/ where user_url_slug is the logged in user.
You don’t need to worry about being logged in at first if you don’t want to: You can run some tests with authentication disabled.
However, after login is implemented, every page should automatically redirect the user to the login page /accounts/login/ if they aren’t logged in (unless they’re already on the login page or the create account page).
Pro-tip: When linking to pages or static files look into flask’s url_for() function.
The index page should include all posts from the logged in user and all other users that the logged in user is following. The most recent post should be at the top. For each post:
Link to the post detail page /posts/<postid_url_slug>/ by clicking on the timestamp.
Link to the owner’s page /users/<user_url_slug>/ by clicking on their username or profile picture.
Time since the post was created in human-readable format using the humanize function in the arrow package.
Number of likes, using correct English
Comments, with owner’s username, oldest at the top
Link to the comment owner’s page /users/<user_url_slug>/ by clicking on their username.
“like” or “unlike” button, pick the logical one
Comment input and submission button
To get started, hardcode the logged in user to be awdeorio. Later when you implement login, read the username of the logged in user from the session cookie.
Pitfall: Returning the most recent posts can be tricky because database initialization creates many posts at nearly the same instant. Thus, ordering by timestamp can result in ties. Instead, use the fact that post ID is incremented automatically if set up properly in your schema.
The form below makes a POST request to /likes/?target=URL, which you will implement later. For the rest of the forms, there are corresponding POST routes also mentioned later in the spec.
Form for “like” button
<!-- DO NOT CHANGE THIS (aside from where we say 'FIXME') -->
Run the unit tests for the index page. The --noauth flag skips user login. Remove the --noauth flag after login is implemented.
$pytest -v--noauth tests/app_tests/test_index.py
When running the testcases, you would see the following DeprecationWarning. This warning is expected and will not impact your score on the autograder. The arrow package is using a deprecated function in its current release.
Include user’s current photo and username. Include a form with photo upload, name and email. Name and email are automatically filled in with previous value. Username can not be edited.
Link to /accounts/password/.
Link to /accounts/delete/.
Use this form:
<!-- DO NOT CHANGE THIS (aside from where we say 'FIXME') -->
Return a 200 status code with no content (i.e. an empty response) if the user is logged in. abort(403) if the user is not logged in. This route is only used when you deploy the app to AWS.
POST /likes/?target=URL
This endpoint only accepts POST requests. Create or delete a like and immediately redirect to URL.
Setup
To get started, add a function stub for the /likes/ route to one of the Python files in your views module. Also make sure you have logging set up at the top of the file.
For example, if you upload the file awdeorio.JPG, the computed filename for this file would look something like fa0869c36f504c3fafd21d428185b387.jpg. Since UUID’s are generated randomly, your UUID will be different. Notice the lowercase file extension.
Log out user. Immediately redirect to /accounts/login/.
POST /accounts/?target=URL
This endpoint only accepts POST requests. Perform various account
operations and immediately redirect to URL.
Use the operation value from the POST request form content to determine
the type of action to take.
If the value of ?target is not set, redirect to /.
Operation: login
Use username and password from the POST request form content to log the
user in.
If the username or password fields are empty, abort(400).
If username and password authentication fails, abort(403).
Set a session cookie. Reminder: only store minimal information in a session cookie!
Flask implements sessions. Look at the Flask docs for a usage example. Note that you should have already set up the secret key in the insta485/config.py file.
Use username, password, fullname, email and file from the POST request form content to create the user. See above for file upload and naming procedure.
If any of the above fields are empty, abort(400).
If a user tries to create an account with an existing username in the database, abort(409). 409 is the HTTP code indicating a Conflict Error.
Log the user in and redirect to URL.
Password storage
A password entry in the database contains the algorithm, salt and password hash separated by $. Use the sha512 algorithm like this:
Use fullname, email and file from the POST request form content to edit the user account.
If the fullname or email fields are empty, abort(400).
If no photo file is included, update only the user’s name and email.
If a photo file is included, then the server will update the user’s photo, name and email. Delete the old photo from the filesystem. See above for file upload and naming procedure.
Now that login is implemented, head back to the pages with hardcoded logged in user awdeorio and read the username of the logged in user from the session cookie instead. Make sure that every page automatically redirects the user to the login page if they’re not logged in (unless they’re already on the login page or create account page.)
Run unit tests for a different logged in user, michjc. This should help you sanity check that you’ve removed all hardcoded instances of awdeorio as the logged in user.
The server should reject POST requests to delete entities not owned by the logged in user. For example, only the logged in user should be able to delete their own posts and comments. To reject a request with a permissions error, use flask.abort(403). Users should be able to comment and like posts of users that they are not following.
The following examples assume you have a (mostly) working Insta485 project with a freshly reset database.
Using curl
Curl is a command line tool for making HTTP requests. You can make the same requests that browser would make from the CLI.
Use curl to log in to Insta485. This command issues a POST request to /accounts/ with a username and password. The -F KEY=VALUE sends a key-value pair just like a web form. The --cookie-jar cookies.txt will save the cookies set by the website to the file cookies.txt.
$curl -X POST http://localhost:8000/accounts/ \
-F username=awdeorio \
-F password=password \
-F operation=login \
--cookie-jar cookies.txt
Always use HTTPS for user login pages. Never use HTTP, which transfers a password in plaintext where a network eavesdropper could read it. For simplicity, this project uses HTTP only.
View the index / page by issuing a GET request, sending the cookies set by the previous login (--cookie cookies.txt).
$curl --cookie cookies.txt http://localhost:8000/
... <index.html page content here>
Delete a post by issuing a POST request.
$curl -X POST http://localhost:8000/posts/ \
-F postid=1 \
-F operation=delete \
--cookie cookies.txt
Malicious example
Even though the “Delete post” button is hidden on posts that the logged in user doesn’t own, any user can use a tool like curl to send a POST request to try to delete an Insta485 post.
Try to delete a post created by jflinn using awdeorio’s cookies. We get a 403 Forbidden error. This is a good thing!
$curl -X POST http://localhost:8000/posts/ \
-F postid=2 \
-F operation=delete \
--cookie cookies.txt
...
<title>403 Forbidden</title>
...
A 403 Forbidden error should also be returned when a malicious user attempts to delete another person’s comment.
Testing
This section will show how to run style and unit tests.
Code style
All Python code must be PEP8 compliant, comments must be PEP257 compliant, and code must pass a pylint static analysis.
$pycodestyle insta485
$pydocstyle insta485
$pylint insta485
Compliant HTML
Automatically generated HTML must be W3C HTML5 compliant. To test dynamically generated pages, the test_style.py::test_html test case renders each page and saves it to a file. Then, it runs html5validator on the files.
After you have deployed your site, download the main page along with a log. Do this from your local development machine, not while SSH’d into your EC2 instance.
$curl -v <Public DNS (IPv4)>/accounts/login/ > deployed_insta485.html 2> deployed_insta485.log
Be sure to verify that the output in deployed_insta485.log doesn’t include errors like “Couldn’t connect to server”. If it does contain an error like this, it means curl couldn’t successfully connect with your flask app. Also be sure to check that the curl command points to your AWS instance URL and not to localhost.
Be sure to verify that the output in deployed_insta485.html looks like a successfully rendered login page and does not contain any errors.
One team member should register your group on the autograder using the create new invitation feature.
Submit a tarball to the autograder, which is linked from https://eecs485.org. Include the --disable-copyfile flag only on macOS.
$tar\
--disable-copyfile \
--exclude '*__pycache__*' \
-czvf submit.tar.gz \
bin \
insta485 \
sql \
deployed_insta485.html \
deployed_insta485.log
The autograder will run pip install -e YOUR_SOLUTION. The exact library versions in the requirements.txt provided with the starter files is cached on the autograder, so be sure not to add extra library dependencies to requirements.txt or pyproject.toml.
The autograder focuses on the functionality of your solution. These are some specific optional aspects of the project that we won’t evaluate.
CSS styling
Labeled form inputs, e.g., <p>Name: <input type="text" name="fullname"/></p>
User-submitted data validation not mentioned in this spec. For example, a password that contains only whitespace.
Situations not mentioned in this spec. Make any decision that you might reasonable expect on a real website. However, use flask.abort() only for errors.
FAQ
Do trailing slashes in URLs matter?
Yes. Use them everywhere. See the “Unique URLs / Redirection Behavior” section in the Flask quickstart.
Static files (like .jpg) should not have a trailing slash at the end. Use trailing slashes everywhere else.
Should I change HTML forms?
You can add HTML to style forms any way you choose. Don’t change the number, type or names of the inputs. This is because the autograder will make POST requests.
How should I link to my routes in HTML?
Use the flask.url_for function. Read documentation about this function online.
Can I disable any code style checks?
Do not disable any code style check from any code style tool (pycodestyle, pydocstyle, pylint). There are two exceptions listed here.
In insta485/__init__.py, the Flask framework requires an import at the bottom of the file (reference). We’re going to tell pylint and pycodestyle to ignore this coding style violation.
In insta485/__init__.py, the Flask framework uses an object that is used throughout the module. Although its value never changes, it is not a constant in the classic sense. We’re going to tell pylint to ignore this coding style violation.
A common reason to get 404 Not Found errors is if you forget to include the routes in your solution’s insta485/views/__init__.py file. Here’s a snippet of the instructor solution.