CMPS 183 Fall 2015

General Information

• Time and location: TTh 8-9:45, Thimann 001
• Instructor: Luca de Alfaro (luca@ucsc.edu, please include "CMPS 183" in the email subject line)
• Instructor office hours: Tuesdays 1:30-2:30pm or by appointment.
• TA: Rakshit Agrawal (ragrawa1@ucsc.edu) (note the number "1", not "l", at the end)
• TA office hours: TBA
  • Review sessions: Wednesdays 3:30-4:40, Porter Acad 148
  • Discussion group: Piazza discussion group (please sign up here)

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. If you don't have that, something that actually works quite well is to get a Raspberry Pi 2B and install linux on it. A screen, a USB keyboard, and a wifi USB thingie and you are good to go.

Please follow these installation instructions to set up your machine for development.

Git repository

You will need to use git to develop code for this class. Instructions on the setup will be posted shortly.

Online project hosting

The project will need to be hosted online somewhere, and pythonanywhere is one of the many places where this can be done easily. More information will be provided during the class.

Announcements

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

Homework Assignments and Project Delivery Dates

• Homework 1, due when you like (but sooner is better)
• Homework 2, due Wednesday October 7, 11:00pm
• Homework 3, due Thursday October 29, 11:00pm
• Homework 4, due Thursday November 5, 11:00pm
• Homework 5, due Wednesday November 25, 11:00pm

Project

Please use this form to enter details about your proposed project.

Lectures

• Lecture 1 and Homework 1
• Lecture 2
  • Lecture 3: the views. How to go from python output to a view.
  • Lecture 4: brief tutorial on databases
  • Lecture 5: HTTP GET and POST, form processing
  • Lecture 6: Forms to view and edit data.
  • Lecture 7: Forms, tables, form processing, multiple databases.
  • Lecture 8: More on database queries, and start of Javascript.
  • Lecture 9: Database access and transactions, practical database considerations, more on forms, signed URLs.
  • Lecture 10: jQuery, Javascript and AJAX to do star ratings.
  • Lecture 11: Javascript as a language, and more on jQuery and AJAX
  • Lecture 12: More on AJAX
  • Lectures 14 & 15: Developing a message-posting app in ractive.js
  • Lecture 16: More on Ractive, jQuery UI
  • Lecture 17: Hosting on google appengine, hosting choices
  • Lecture 18: More on building with Ractive.

Homework, project, and grading

The class grade will be determined 50% by homework assignment and 50% by the project.

Homework Assignments

• The homework assignments are individual.
• Submissions will use CrowdGrader: the solution you submit will be peer-evaluated by other students in the class. You will be asked to grade 5-6 solutions by other students, and your homework grade will depend both on the quality of your submission, and on the accuracy of your grades and the quality of your reviews. The benefits of this is that you will get to see several ways of solving each homework assignment. You can learn more about CrowdGrader here.
• The grades will be re-normalized by the instructor for each assignment.
• Homework submissions should be anonymous: do not write your name in the code you submit.
• The instructor may discuss and display in class code that you submit as homework.

Project Requirements

The class includesYou can work in groups for the project. The project consists in developing a web application in web2py, and deploy it so that others can use it. The projects need to satisfy various requirements.

• Done in web2py.
• Teams of 1-4.
• All code versioned in git.
• Project deployed on a publicly accessible server.
• Some non-trivial use of a database.
• Some non-trivial use of AJAX and ractive.js
• Some personalization / user accounts / personalized content / user interaction.
• Good, natural to use UI.

Groups and topic. You should start early on in the class to decide with whom to collaborate for the project. Groups of size 1-3 are recommended. Please also start thinking about a topic.

Project presentations. The last day of class, and the day of the final, are dedicated to project presentations. You will be able to choose the day for your presentation.

Project evaluation. The project evaluation is a holistic process, that takes into account factors such as: how ambitious the project is, how clean the code is, how polished the UI is, how good the database model is, how well the project progressed from initial proposal to final project, how much was the feedback received in prior project submissions is addressed in following submissions. Extra credit is given for projects that solve real problems, and that are hosted and made accessible for all to use.

Syllabus

• Introduction to the class. Building a very simple web2py application.
• A (very) quick introduction to Python.
• Introduction to web2py.
• Simple HTTP concepts: GET, POST, HTTP requests, REST.
• Building a simple application.
• Simple HTML elements.
• Model - view - controller layout. Views in web2py.
• CSS, done properly.
• Databases, and databases in web2py. Transactions.
• Cookies, sessions, logging in and out.
• Input: forms, validators.
• Output: widgets, SQLFORM.grid, forms for output
• Javascript.
• Jquery and JqueryUI
• AJAX and Json
• Single-page apps, ractive.js
• Advanced DB issues: replication, noSQL, ...
• Cloud platform primitives on EC2 and Google Cloud
• Scalability
• Security

What's different from last year? Every year, I change the class a little bit, trying to improve it. This year, I will go into much more depth than in the past on how to make web applications where a lot of "interesting stuff" happens client side, in the web browser, using ractive.js and javascript. I will also go more into CSS, using the Compass library. I think it will be an overall much more complete experience.

Collaboration policy

Homework

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. However, the bulk of the work needs to be your own, and wholesale copying of submissions is not allowed, and will incur disciplinary sanctions. Students who host their code on public repositories, facilitating copying by other students, will equally incur sanctions.

Project

You can work in groups on the project.

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.
• Amazon Web Services and Amazon EC2.
• Rackspace.
• 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.