Homework 2

Due: Wednesday October 7, 11pm (STRICT deadline)

Submission instructions: Upload to this CrowdGrader assignment. Note: you need to login with your @ucsc.edu account.

The assignment

You need to write two "views" (the .html files in /views/ that produce the html sent to the browser), accessed at URLs /start/default/index and /start/default/read_email/<email_id> respectively.

You need also to produce the styling for the two views.

When producing the styling with compass, remember to run compass so that your changes to .scss files are reflected in the .css:

cd static

compass watch . 

The homework assignment is a bit free form, but try to produce as nice formatting as you can. Extra points will be given in the homework grading for good visual formatting.

The assignment asks you to do something quite similar to what we did in Lecture 3. In Lecture 3, we displayed a list of stores, each with a link to a page that shows details for an individual store. This assignment asks you to do the same for emails. All that is needed is to write some ~20 lines of code for index.html, other ~20 for read_email.html, and maybe ~30 lines in some .scss file for the styling. So the actual amount of work is quite small; the hard part might be to figure out how the various pieces (controllers, views, etc) relate to one another.

List view

The first view, at views/default/index.html, should display the list of emails (see the starting code; I am giving you the controller already). You should display a nice list of emails, pleasant to view, with the following information for each email:

• From
• Subject
• Date
• A golden star if the email is starred, a faint gray star if it is not
• The email should be in different styling depending on whether it has been read or not (for example, use an icon for the read/unread emails, or use bold for the unread emails -- it's up to you).

The list of emails should be very nice to see, and it should be easy to tell one email apart form another. You might want to do a table, or a sequence of divs, with alternating light and slightly darker rows, if you can do it. See here and here for how to do that. Thin gray lines between emails can also help if done nicely.

Clicking on an individual email, you should go to the second view, were you can see the details of the email.

Single email view

The second view, at views/default/read_email.html , is used to access the details of an individual email. You should display all information for the email, except for its id. Try to make it nice looking. The email contains paragraph breaks, encoded via two consecutive newlines '\n\n', try to render the email in such a way that the paragraph breaks are preserved. This can be done by displaying the body of the email (the content) in a <div> associated with CSS styling white-space: pre-line or white-space: pre-wrap. See here for more information.

Starting code

I prepared starting code in the hw2 branch of https://bitbucket.org/luca_de_alfaro/start.

There, I give you two controllers:

• /start/default/index will display the list of emails
• /start/default/read_email/<email_id> will display an individual email.

The two controllers work, and I believe they can be used "as is", but feel free to modify them if you wish.

Starting from scratch

To start working on the code from scratch, if you don't have a web2py installation or you want a fresh one, proceed as follows.

1. Download the zipball from http://www.web2py.com/examples/static/web2py_src.zip
2. Expand it
3. cd web2py/applications
4. git clone https://luca_de_alfaro@bitbucket.org/luca_de_alfaro/start.git
5. git checkout hw2

This will give you the start application ready for developing hw2.

If you have already web2py and the start application installed

Then all you need is getting the updated hw2 branch:

git fetch

git checkout hw2

and if I push changes, you can check if there is something new with:

git checkout hw2

git fetch

git merge origin/hw2