CSE 183 Spring 2019

General Information

• Time and location: TTh 1:30-3:05, Kresge 321
• Instructor: Luca de Alfaro (luca@ucsc.edu)
• Office hours and review sessions: see this link.
• Discussion group: Piazza discussion group (signup link)

This class provides an introduction to the design and implementation of interactive, dynamic web sites. The class will be based on web2py, a Python-based framework for the rapid implementation and deployment of web sites (read why web2py was chosen).

Requirements

Textbook

The web2py book. You can also download it in pdf if you wish to read it offline.

Development environment

For this class, you need a laptop / desktop on which you can install the required tools for the class. Any OS is fine: Linux, Mac OS X, or Windows. Please follow these installation instructions to set up your machine for development.

Here is a Virtualbox VM with installed everything you need for web2py.

Announcements

All announcements will be posted to the Piazza discussion group. It is your responsibility to keep up with announcements and deadlines.

Lectures

All the lectures will be videocast at https://ucsc.zoom.us/j/583291852 , and we plan to make recordings available for the lectures. You can attend the class either in person in the classroom, or via videocast.

• Lecture 1, April 2: Introduction
• Lecture 2, April 4: Cookies, bottle.py, HTTP, templates, serving images, CSS...
• Lecture 3, April 9: Decorators, MVC frameworks, web2py
• Lecture 4, April 11: How to visualize and add blog posts in web2py
• Lecture 5, April 16: Forms, cross-site vulnerabilities, editing, deleting
• Lecture 6, April 18: SQLFORM.grid
• Lecture 7, April 23: More on forms, validation. Beginning of databases.
  • Lecture 8, April 25: Cross-site vulnerabilities again, databases.
  • Lecture 9, April 30: On homework 3, then Javascript.
• Lecture 10, May 2: Start of Vue.js
  • Lecture 11, May 7: Vue.js, building a blog site.
• Lecture 12, May 9: More on vue.js
• Lecture 13, May 14: Stars, and uploading images, in vue.js
  • Lecture 14, May 16: More on uploading images to the cloud, and search.
  • Lecture 15, May 21: Stripe, and local time.
  • Lecture 16, May 23: Start of Vue components.
  • Lecture 17, May 28: Considerations on databases.

Homework Assignments

• Homework 1, due Friday, April 12, 11:59pm.
• Homework 2, due Friday, April 26, 11:59pm.
• Homework 3, due Thursday, May 9, 11:59pm.
• Homework 4, due Tuesday, May 28, 11:59pm.
• Homework 5, due Friday, June 7, 11:59pm.

Grading

There will be two tracks in the class: the standard track, and the project track.

In the standard track, the breakdown for the class grade is:

• 15% for each of 5 homework assignments (homeworks 1 through 5)
• 5% for attendance.
• 20% for the project.

In the project track, the breakdown is:

• 15% for each of 4 homework assignments (homeworks 1 through 4)
• 5% for attendance.
• 35% for the project.

Homework grading. The homework submissions will be peer-graded via CrowdGrader. The TAs and graders will regrade, for each assignment, the submissions with the most disagreement, and some of the other submissions selected at random.

Late homework policy: Homework turned in late will be marked down as follows:

• Up to 1 day late: 20% credit reduction.
• Up to 2 days late: 30% credit reduction.
• More than 2 days late: no credit.

Attendance: Attendance will be taken in class using Google Forms. In some classes (about once a week), the instructor will provide a link, via QR code and projected on the class screen. You will then have a few minutes to submit a form, which will record your email, and your answer to a few survey questions. Example of questions are: how is the pace of the class, what material would you like covered in the review sessions, and similar. The questions are not graded; they are just survey questions.

You obtain the 5% component of class grade due to attendance if your attendance is recorded in at least 70% of the forms circulated. You can attend either in the classroom or in the videocast.

Project

This year, the class will have two tracks: the standard track and the project track.

Standard Track

In the standard track, you will complete 5 homework assignments. The last four of these assignments will lead you to develop pieces of a website. The project then consists in putting together these four pieces into a single, well-working site. The project in the standard track is thus the same for all students in the standard track, and it is done individually. The project will be graded both via CrowdGrader, to enable you to have feedback, and via the TAs and class readers/graders. There is no final project presentation in the standard track.

The projects in the standard track need to be turned in on:

• June 3: preliminary version, submitted to CrowdGrader for feedback (crowd-graded). Students in the standard track will participate in peer-grading the projects.
• June 10: final version. This will be graded by the instructor and TAs.

The project grade will be the average of the two grades (crowd-grade, and final grade).

Project Track

In the project track, you can work in groups of 1 to 4 people. You have to write a project proposal, and if the proposal is accepted, you will be assigned a project mentor (a TA or the instructor) that will follow the project during the quarter. You are expected to meet with the project mentor at least bi-weekly, and regular short weekly meetings are encouraged.

Please use this form to submit your project proposal. Please submit by April 16, end of day.

We aim at accepting about 15 to 18 projects. The projects will be presented in the time slot usually reserved for the class final, which is Wednesday, June 12, 12-3pm.

Before 11:59pm on Wednesday, June 12, you have to submit:

• Project code
• Peer evaluations for your team members (if any)

Instructions for submitting the above material will be made available in due time.

Syllabus

HTTP, HTML and CSS basics:

• Introduction to the class. Building a very simple web2py application.
• 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.

Web2py:

• Introduction to web2py.
• Building a simple application.
• Model - view - controller layout. Views in web2py..
• Databases, and databases in web2py.
• Database transactions.
  • Cookies, sessions, logging in and out.
  • Input: forms, validators.
  • Output: widgets, SQLFORM.grid, forms for output

Javascript:

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

Deployment:

• Hosting an app in the cloud
• Security

Collaboration policy

Homework and standard track projects.

• You should work individually on all homework assignments.
• You can discuss the assignments with others, and you can ask questions on Piazza showing small portions (a few lines) of code, and you can discuss techniques with your peers.
• You can copy from Stack Overflow, blogs, and places where general web and programming information is made freely available to all. Give clear attribution (a URL in a comment) when you do so. There is no penalty for this.
• You cannot copy from password-protected web sites, such as homework exchange sites, work for hire sites, and the like.
• You cannot wholesale copy entire pieces of answers (HTML pages, templates, entire Python functions that are over 3 lines long).
  • You cannot make your homework available to others in any way (including via public git repositories) until the class is over (after finals week).

Project

You can work in groups on the projects in the projects track.

General

You are free to borrow code from stack overflow or the web (not from other students), but you must cite the source of your code (the URL where it came from) in all cases. However, you cannot ask anyone to do the homework for you.

Resources

Here are some links that you might find useful.

• Web2py, and web2py documentation. We will be using the web2py book (html, pdf) as our textbook.
• Python.
• bottle.py, a simple web framework.
• Amazon Web Services and Amazon EC2.
• Google Appengine.
• Jquery and JqueryUI.
• JSON.
• Javascript.
• HTML (tutorial, validator) and CSS (tutorial).
• HTTP.
• Database engines: MySql, Postgres, and SQLite.
• Apache HTTP server.
• Git and GitHub. Use this .gitignore file for web2py projects in order to avoid entering too many files in version control. Here are somebasic instructions for working with git; there are more tutorials available on the web.
• Logging in web2py.
• Vue.js

Students with Disabilities

UC Santa Cruz is committed to creating an academic environment that supports its diverse student body. If you are a student with a disability who requires accommodations to achieve equal access in this course, please submit your Accommodation Authorization Letter from the Disability Resource Center (DRC) to me privately during my office hours or by appointment, preferably within the first two weeks of the quarter. At this time, we would also like us to discuss ways we can ensure your full participation in the course. We encourage all students who may benefit from learning more about DRC services to contact DRC by phone at 831-459-2089 or by email at drc@ucsc.edu.