CSE 183 Spring 2020

Instructor: Luca de Alfaro

Time: 8-9:35 TTh

Schedule Information including:

Lecture, office hours, sections, and MSI section times and locations
List of all lecture material and lecture videos
List of all assigned homework

(you will need to be logged in via your @ucsc.edu account to view this information).

Piazza discussion group, to be used for all communications and for all announcements.

The Essentials

Keep an eye on this page. All resources are linked from here.
Do subscribe to Piazza. All announcements will be sent there, and all questions are answered there.
Try to install py4web locally and on PythonAnywhere (see resources).

About the Class

Prerequisites: Please check that you satisfy the class prerequisites. There are additional logistical prerequisites in addition to the ones enforced by the registar's office.

Enrolling: The undergraduate advisors are sending students permission codes based on their need to be in this class, giving precedence first to students who need to graduate in Spring 2020, then to people in classes that were cancelled, then to people in the waitlist. They will be giving out more than a hundred permission codes, perhaps close to two hundred.

Logistics: Classes will be broadcast on zoom and recorded, the recordings will be made available online generally within one day. Students should make sure that zoom works correctly on their laptops, including audio and video, as that will be the only way also to access office hours. Zoom allows screen sharing, which facilitates looking at code and discussing it.

DRC Accommodations: please upload them using this form.

All homework assignments and materials for the class will be posted to this page, and all announcements will be made on Piazza (so set up to get email from Piazza, or you might miss announcements).

Resources

Instructions for installing py4web on your laptop.
You can run py4web on the web, by creating a free account at pythonanywhere.com. Here area detailed instructions on how to do it.
Two good editors for Python code are Visual Studio Code and PyCharm. VSC is better for less powerful laptops; PyCharm is better in terms of code analysis and following definitions through code. Note that PyCharm has a student edition.

Lectures

We post here links to the material for each lecture, including any reading, videos of the class, materials to review for the class, etc.

Here is also a summary of all lectures with the main code presented.

Lecture 1, March 31: Introduction, Python
Lecture 2, April 2: Classes, decorators
Lecture 3, April 7: Bottle, beginning of py4web
Lecture 4, April 9: HTML and Bulma.css
Lecture 5, April 14: Cookies, sessions, forms.
Lecture 6, April 16: URL parameters, buttons, CSRF attacks and signatures, forms to handle products.
Lecture 7, April 21: Introduction to databases
Lecture 8, April 23: Databases and transactions, SQL injection attacks
Lecture 9, April 28: Javascript
Lecture 10, April 30: Introduction to Vue.js
Lecture 11, May 5: Javascript Promises
Lecture 12, May 7: Star ratings in Vue
Lecture 13, May 12: Promises, loading images via AJAX
Lecture 14, May 14: Editing in place.
Lecture 15, May 19: Security.
Lecture 16, May 21: Py4web components.
Lecture 17, May 26: more on components.
Lecture 18, May 28: File upload using signed URLs and GCS
StarRater: a look at the StarRater component code.
Lecture 19, June 2: Deploying to the cloud
Lecture 20, June 4: Conclusion of deploying to the cloud

Code

All the code presented in class is part of the cse 183 project by the instructor on bitbucket. Feel free to browse any code there.

Lecture Videos

Here are all the lecture videos, in original format. You need to be logged in via your @ucsc.edu email to view them.

Homework

Quizzes

Quizzes are at Scuiz.

Please register using your official UCSC email, and you will have access to the quizzes.

Class Topic

This year, we are planning to completely revamp the class. We are switching web framework, going from web2py to py4web, and we will use vue.js as our Javascript framework. The main reason for the switch is that py4web is smaller, faster, more modular, and more modern in design. It is also arguably better from a teaching point of view, since it makes it much easier for students to see what is going on "under the hood", and modify the server behavior when desired.

Grading

The class will have two tracks: standard project and custom project.

Standard Project

Students in the standard project track will all turn in homework that will eventually come together in a single, working project.

Thus, the grading will be essentially via homework submissions, the last of which is known as the "project". The grading is based on:

20%: Mini-quizzes.
80%: Homework assignments, which will be peer-graded using CrowdGrader (and also checked by readers and TAs). CrowdGrader will be free this quarter. I will consider assignments equally, except for the one in which students receive their lowest grade, which will be discarded when computing the homework grade.

Custom Project

Students in the custom projects track can propose a project, and develop it in groups of 1-4 people. You need to submit a project proposal to be in this track. They will present the project on the day of the final exam, giving a 10-15 minutes presentation on it. Projects need to be:

Done in py4web and vue.js
Have a non-trivial database / data storage component
Manage rich user interaction

Students in this track will be graded by:

20%: Mini-quizzes.
55%: Homework assignments, which will be peer-graded using CrowdGrader (and also checked by readers and TAs). CrowdGrader will be free this quarter. Students need to do only up to homework 5, or homework 6 if they would like me to drop the grade of their worst assignment.
25%: Final Project.

See these instructions for presenting and turning in the final project.

Syllabus

HTTP, HTML and CSS basics:

Introduction to the class.
A (very) quick introduction to Python.
Simple HTTP concepts: GET, POST, HTTP requests, REST.

HTML basics.
CSS, and compiling CSS via sass/compass.
- Building a very simple web site using bottle.py.

Databases:

The role of databases
Relational databases, tables, normal forms
Queries, transactions
Cloud databases
No-sql databases

Py4web:

Actions, connecting to databases, user validation.
Cookies, sessions, logging in and out.

Javascript:

Javascript
vue.js

Building a single-page app in vue.js
Vue components

Web development:

Building web components
Client side forms, tables, user input, uploads
Client-server communication
Stateful applications, simple games
Security and web applications: attacks, defenses

Deployment:

Hosting an app in the cloud
Security

Page updated

Report abuse