CSE312: Web Applications

Spring 2023


Submit assignments here
Watch past lectures
Ask questions and find office hours
Chat with other students
Syllabus

Course Description

Covers the fundamentals of full-stack web development and deployment with a strong emphasis on server-side code and functionality. Students will develop a full-stack web application without the use of a pre-existing web server or web framework. Topics include HTTP, APIs, AJAX, databases, encryption, authentication, sockets, privacy, and security.

Expectations

To do well in this course you are expected to:

  • Have a desire to learn about Web Applications
  • Be able to develop software with little guidance
  • Be able to find, read, and understand technical documentation
  • Spend a minimum of 12 hours/week on CSE312

Learning Objectives

Being successful in CSE312 requires you to complete a total of 8 learning objectives, all of which are programming objectives. The first 2 objectives (out of 5) on each homework assignment are learning objectives. You must complete all of these objectives on time in order to pass the class.

Each homework will have 2 deadlines listed on the course schedule. The first will be the learning objective expected deadline. This is the time when you are expected to have completed the learning objectives for the assignment. You should always aim to complete the learning objectives by this deadline. The second deadline is the actual deadline for all 5 objectives of the assignment. Since you must complete all 8 learning objectives by this second deadline, there are some provision provided for you to allow some leniency.

Late Days: You will be given 4 late days to use throughout the semester on the 4 programming assignments. You may use these days however you'd like including using all 4 on the same assignment. Though, it is highly recommended to not use these on the first assignment since you will want to save them for the more difficult assignments. If you make a submission that even 1 second late, you will be charged a late day and your deadline will be extended by 24 hours. Late day usage applies to all objectives.

Recovery Opportunities: Since you must complete all 8 learning objectives to complete the course, you will be given 4 recovery opportunities that can be used on any learning objectives. Using a recovery opportunity on a learning objective will give you a 1-week extension on that objective. Please note that this is on a per-objective basis. If you missed both learning objectives on a single assignment then you'll need to use 2 recovery opportunities on a single assignment.

If you use all your late days and recovery opportunities and still have not completed a learning objective, you will fail the class.

Learning Objectives Completed Grade
8 Grade depends on the number of Application Objectives completed
0-7 F

Application Objectives

If you have completed all 8 learning objectives, your grade will be determined by the number of application objectives you've completed. Your final letter grade will be determined as follows:

Application Objectives Completed Grade
22-26 A
19-21 A-
16-18 B+
13-15 B
10-12 B-
7-9 C+
4-6 C
0-3 C-
0+, but did not complete all Learning Objectives F


Application Objectives

You can improve your letter grade by showing that you can apply the learning objectives to solve real-world problems. You will have the following opportunities to complete application objectives.

  • Programming x12
    • Each of the 4 homework assignments contain 3 application objectives. Complete these to earn application objectives.
    • Deadlines cannot be extended on these tasks except by using late days. You cannot use recovery opportunities on these tasks.
  • Expected Deadlines x2
    • Each of the 8 learning objectives have 2 deadlines. The first is the expected deadline which is the time at which the course staff expects a student who is putting in their 12 hours/week to complete the task. If this course used standard percentage-based grading, this would be the only deadline. Since the consequences are so harsh for missing a single task (To ensure that you learn all of the material) the actual deadlines have been extended by 1 week to give you ample time to study the material. However, to encourage you to still meet the expected deadlines, you can earn application objectives by completing learning objectives before these expected deadlines.
    • If you complete at least 3 of the 8 learning objectives before their expected deadlines, you will earn 1 application objective.
    • If you complete at least 6 of the 8 learning objectives before their expected deadlines, you will earn 2 application objective.
  • Lecture Questions x3
    • Most lectures will include multiple choice questions to be answered during live lectures. These will be simple questions designed to encourage you to attend lecture and stay up to date on the material. Since lectures will be recorded, there is a temptation to watch lecture days, or even weeks, after they occur. These questions are to serve as an incentive for you to attend lecture and avoid falling behind in the course.
    • If you answer >=50% of the total available lecture question correctly, you will earn 1 application objective.
    • If you answer >=70% of the total available lecture question correctly, you will earn 2 application objectives.
    • If you answer >=90% of the total available lecture question correctly, you will earn 3 application objectives.
  • Group Project - Submission x6
    • You will work in a group to complete a project throughout this semester. More details about the project itself can be found in the project section. The project will contain opportunities to earn 6 application objectives: 3 objectives related to the functionality of your code and 3 related to your completion of 3 open-source reports.
    • These 6 application objectives are subject to individual grade adjustments. If a team member completes significantly more/less than their teammates, their number of application objectives awarded may be adjusted at the discretion of the course staff. It is not uncommon for a slacker to be awarded a 0 if they did not meaningfully contribute to the project.
  • Group Project - Presentation/Demo x3
    • At the end of the semester, your team will present your project to the class with an opportunity to earn 3 more application objectives. You will demo the live/deployed version of your app while the audience uses your app and interacts with your software. Again, more details are provided in the project section.

Homework

Each assignment will be a programming/development assignment with a submission of your software on AutoLab, though there will be little/no automated grading in this course. You will submit all of the code and files that comprise your software on AutoLab in a single zip file.

The following apply to all homework assignments except where exceptions are explicitly stated:

  • You may choose any programming language you prefer
  • No external libraries or frameworks are allowed if the library implements functionality that we covered in class (TCP and concurrency exception below for certain languages)
  • Any libraries/packages/classes/functions/etc included with your language of choice that complete part of an assignment - related to the course content - for you are not allowed. This includes any and all HTTP libraries and frameworks
  • Code included with your language of choice that handles TCP socket servers and concurrency are allowed. Most assignments will start with a TCP socket server upon which you'll develop a web server. Industry standard external libraries for TCP and concurrency are allowed if they are common in the community for your language (Ex. Akka for Scala).
  • If you have any question whether or not something is allowed, please ask before the assignment is due. In general, if I explained something in detail during lecture then you must write all the code that implements those details.

Readings

There is no textbook for this course. Links to relevant readings and tutorials will be provided in the course schedule.

Academic Integrity

CSE Department Academic Integrity Policy:
https://engineering.buffalo.edu/computer-science-engineering/information-for-students/undergraduate-program/cse-undergraduate-academic-policies/cse-academic-integrity-policy.html

UB Academic Integrity Policy:
https://catalog.buffalo.edu/policies/integrity.html

In addition to the department and university policies, the following details apply to this course.

All submitted work must be of your own creation and you must not share your submission with anyone else. If any submission is very similar to what has been submitted by another student, or can be found online, it is in violation of this courses academic integrity policy and all students will be penalized whether they were copying or sharing their submission with other students so they can copy. If two submissions are similar beyond what is likely if the students worked independently, then both students are in violation of the academic integrity policy.

All violations will result in:

An F in CSE312.

It is your responsibility to understand what constitutes an academic integrity violation. If you have any question whether something you are doing is a violation or not, ask for clarification before receiving an F in the course. I will not entertain excuses after you have been caught.

Examples of acceptable behavior:

  • Discussing an assignment with your classmates and brainstorming abstract solutions, then writing code and documentation independently
  • Searching the Internet for supplementary material on the course topics
  • Asking the teaching staff for clarification on a homework question
  • Collaborating with your team mates on the team project

Examples of unacceptable behavior:

  • Falsifying a homework submission form. Ex. Claiming to have completed an objective that you did not complete.
  • Submitting code or other work that is not your own for course credit.
  • Allowing another student to see your code or submission for an assignment. (Ex. Sitting side-by-side while working on a homework such that you can see each other screens)
  • Collaborating with another student to write code or documentation for a homework assignment.
  • Allowing another student to access your work that will be submitted for course credit. (Ex. Do not post you code publicly, host your code in a public repository, or allow anyone to access your laptop)
  • Copying a large amount of material found on the Internet into your submission.
  • Writing project code for a teammate and allowing them to represent it as their own.

Project

Overview

You will work in a team of 4-6 students to create a web application.

Relevant links/documents:

Weekly Meetings

All scheduled recitation sections are cancelled and replaced with team meetings which will start on week 5 of the semester. Your team will schedule a time and location for these meetings and all team members will submit the team meeting form after each meeting.

Meeting submissions and peer evaluations will be used as evidence when making individual grade adjustment decisions at the end of the semester.

You may fill out the meeting form as often as you'd like, not just when you have a team meeting. Many students prefer to fill out the form again to rate their team after the project deadline even if they don't have a team meeting after the deadline.

Submissions

The entire project is due after the last day of classes. There is no submission at the deadline. After the due date, we will clone your repository and grade based on the code you've pushed.


Open-Source Reports

As opposed to the homework assignments, you are allowed to use external libraries, frameworks, and services for your project. For example, instead of building your site starting with a TCP socket server you can use technology such as Express, Flask, Django, React, Angular, Handlebars, Socket.io, etc. However, you are required to write several reports explaining how these libraries function. See the project requirements document for specific requirements on the reports that need to be written.

Each report must answer:

  • What does this technology (library/framework/service) accomplish for you?
    • Explain what this technology does in your project. What problems does it solve for you?
  • How does this technology accomplish what it does?
    • Explain in detail how this technology works. You must include links to any relevant code within the libraries themselves (Not your code where you use the library). You must include links to the exact code that solves your problem for you.
    • Ex. If you use express for your web framework you must explain how express handles an HTTP request and link to the exact code on GitHub that parses HTTP headers.
  • What license(s) or terms of service apply to this technology?
    • When using technology you did not write you will be subject to certain agreements. List any licences attached to the project (Ex. MIT, Apache) and what that license means for your project. If using a service, review the terms of service and explain all the implications of these terms for your project.

Why?: Developing a website using existing frameworks/libraries/services does not require years of CSE education and is not appropriate for a project in a 300-level technical course. The use of frameworks/libraries/services are required for this project, and strongly encouraged outside of this course, but you must prove that you understand what is being done for you by other developers and how they do it. In this course, you cannot use technology that you do not understand.

If any reports are missing, inadequate, or don't go into enough depth, the team is in violation and the project may become invalid. Consequences will be decided by the course staff on a case-by-case basis which can range up to a 0 for the entire project.

Grading

Features: Each project has 3 features outlined in the project requirements document. Each feature will be graded in the same manner as the homework objectives and are worth 1 application objective each.

Reports: The project requirements document describes 3 open-source reports that are required. Each report is worth 1 application objective. To provide a round of feedback on these reports, there is a Team Project Reports Checkpoint listed on the course schedule. After this checkpoint, a TA will review the reports in your repository and provide feedback to you that will be posted on AutoLab. If your reports are complete at this point, you can earn the application objectives early. If they are not complete, you will receive feedback on what you have and you can correct/complete them by the project deadline on the last day of class to earn credit.

Security: If there are any security issues with your project that have been covered in lecture, your grade for each feature that exposes the vulnerability will be changed to 0. Your entire project grade may be changed to 0 at the discretion of the course staff and depending on the severity of the security vulnerability.


1 - HTTP and Docker
Homework 1
Week 1
Monday
January 30
Course Introduction and TCP/IP - Slides
Wednesday
February 1
HTTP Overview
Friday
February 3
HTTP Request/Response - Slides
Week 2
Monday
February 6
HTTP - Static Files, MIME Types, and Encodings - Slides
Wednesday
February 8
Docker - Slides
Friday
February 10
Databases and docker-compose - Slides
Week 3
Monday
February 13
Docker and docker-compose Examples and Testing
Wednesday
February 15
CRUD and REST API - Slides
Friday
February 17
Testing APIs and docker examples
2 - Dynamic Site
Homework 2
Week 4
Monday, February 20 @ 9:00 AM HW1 Learning Objective Expected Deadline
Monday
February 20
Front End Development - HTML/CSS + JavaScript - Slides
Wednesday
February 22
HTTP POST and Forms - Slides
Friday
February 24
HTTP POST - File Uploads - Slides
Friday, February 24 @ 11:59pm Team Formation Due
Week 5
Monday, February 27 @ 9:00 AM HW1 Actual Deadline
Monday
February 27
HTML Templates - Slides
Wednesday
March 1
Buffers - Slides
Friday
March 3
HTML Injection Attacks - Slides
Week 6
Monday
March 6
AJAX and Polling - Slides
Wednesday
March 8
XSRF - Slides
Friday
March 10
Browser Extensions
3 - WebSockets and WebRTC
Homework 3
Week 7
Monday, March 13 @ 9:00am HW2 Learning Objective Expected Deadline
Monday
March 13
WebSocket Handshake - Slides
Wednesday
March 15
WebSocket Frames - Slides
Friday
March 17
WebSocket Examples
Spring Break!
Monday
March 20
No Class
Wednesday
March 22
Rest and Relax
Friday
March 24
Mental Health Day
Week 8
Monday, March 27 @ 9:00am HW2 Actual Deadline
Monday
March 27
WebRTC Overview - Slides
Wednesday
March 29
WebRTC Details - Slides
Friday
March 31
WebRTC Demos
Week 9
Monday
April 3
Examples and Architecture
Wednesday
April 5
Examples and Architecture
Friday
April 7
Examples and Architecture
4 - Authentication
Homework 4
Week 10
Monday, April 10 @ 9:00am HW3 Learning Objective Expected Deadline
Monday
April 10
Cookies - Slides
Wednesday
April 12
Authentication and Secure Password Storage - Slides
Friday
April 14
Authentication Tokens and Sessions - Slides
Friday, April 14 @ 11:59pm Team Project Reports Checkpoint
Week 11
Monday, April 17 @ 9:00am HW3 Actual Deadline
Monday
April 17
Encryption - Slides
Wednesday
April 19
HTTPS - Slides
Friday
April 21
Reverse Proxy Servers
Week 12
Monday
April 24
Deployment with docker-compose
Wednesday
April 26
Deployment with docker-compose
Wednesday, April 26 @ 11:59pm Deadline to sign up for a presentation time
Friday
April 28
Deployment with docker-compose and certbot
Web Apps
Week 13
Monday, May 1 @ 9:00am HW4 Learning Objective Expected Deadline
Monday
May 1
Review
Wednesday
May 3
Review
Friday
May 5
Review
Week 14
Monday, May 8 @ 9:00am HW4 Actual Deadline
Monday
May 8
Project Presentations
  • Excalibur
  • Seg Fault
  • Awesome
  • yoube
Wednesday
May 10
Project Presentations
  • last minute grinder
  • AnythingIsGood
  • Jesse's Fan Club
  • BecauseTheInternet
Friday
May 12
Project Presentations
  • Object Object
  • Serge
  • 27 Application Objectives
  • Byte Bandits
Friday, May 12 @ 11:59pm Project Deadline
Friday
May 19
Project Presentations
  • 404 Not Found
  • Sebastian's Angels
  • Geese Gang
  • CabinFever
  • still up for debate / random1
  • Code Monkeys
  • HighFive
  • Team Reader
  • random2
  • Scammers