HW3 Grades Out

I have just emailed the HW3 grades. I do not have a solution for this homework and probably won't for future homeworks. If people want I can post the solution of a student who had a good, but not too good, implementation (too good sometimes makes for hard-to-read code).

Many of you should read about template inheritance, which I demoed in class, and re-write your templates using it. You want one base template and a couple of other templates which inherit from this base. It might be more work now but it will save you a lot of work as we add more and more pages to the app.

HW4: CSS and Mobile

You will now use what you have learned about web design and CSS and build two style sheets: one for the desktop and one for mobile, and incorporate these into your website. Specifically, you will:

1. Create a style sheet for the whole website. All the pages (/, /account, /user) should use this style. Note that you will need to modify your app.yaml for the stylesheets to be downloadable.
2. Your style should have a coherent color scheme, a logo (can be just text in a different font), distinct login bar, and, well, it should have a bit of style.
3. Create a new dummy page, /question which lists a sample question (in the next homework you will be implementing the question-entering form). Remember that this is a multiple-choice question, with radio buttons for answering. This new page should also use the style.
4. Create an alternate mobile style for the /question page. This style should be optimized for viewing in an iphone or android phone. If you don't have one, you can use safari to preview it, otherwise, just make your browser window really small.

This homework is due on Monday, February 14 @11am. You can upload it at i-am-done.appspot.com/242/HW4.

Required Reading

• CSS Beginner Tutorial
• HTML and CSS for mobile tutorial.
• Return of the mobile stylesheet tells of the problems with getting different mobile devices to recognize a mobile style sheet.

Recommended Reading

• The Principles of Beautiful Web Design

Always Check the Homework Comments

When you visit any of the homework pages always check the comments. I will add there any further clarifications or requirements to the homework. Also, if you have a questions about the homework you can post it there. These comments are emailed instantly to me so, it is just as fast as emailing me directly, but everyone else gets to see the question.

A Solution to HW2

The program I discussed in class today can be found here.

HW2 Grades are Out

I have just emailed everyone their grades for HW2. If you did not get it, let me know.

On Wed. I will go over a solution. I might post someone's solution here if there is enough demand from you. Please keep in mind that you have to keep with these as they will all build on each other. Even if you got it right, you should refactor your code before starting on HW3.

HTML Lecture Slides

Here are the slides I used for today's presentation, and here is the templates tutorial.

HW3: HTML and Templates

In this homework you will flesh out and organize the HTML generated by your app using templates. Specifically you will implement the following features.

1. The app will use a base template which contains the overall layout of the site. The layout must include parts for the
   1. login-bar (that bar at the top that shows your username and lets you logout, if you are logged in, or lets you log in if you are not),
   2. the title (logo),
   3. the body,
   4. and a footer.
   You can add other sections if you want.
2. Create a new page, /user, which provides a list of all users (their names) that have created accounts in the site. This template must use the template's for loop.
3. Change the app to make it impossible for a user to change his name to a name that has spaces or other non-url friendly characters.
4. Make it so the page /user/<username> takes us to a page that shows us the user's name. In a later homework, you will write code to show the user's questions in this page.

The homework is due on Monday, February 7 @11am, you can turn it in here.

Required Reading

• HTML dog tutorials on HTML.
• Dive into HTML5 is a detailed introduction to the new HTML5 features. Many of the new features are JavaScript extensions which we will be learning about later in class. You can skim over them for now.
• Templates tutorial
• Django templates referene

UPDATE: See my 'comments' below.

App Engine Help

Like any other big software library, the app engine has a large online community of users where you can post your questions about specific issues, or search the mailing list to see if someone already had the same problem you are having. Someone almost always has had and solved every problem I have had. Failing that, there is also stackoverflow.

Moving to your Own Domain

I did not mention in class that once you deploy your app in the appengine you can easily buy your own domain name and have it point to your app. If you have already taken our computer networks class then you would already know this since you know all about DNS (the Domain Name System which maps domain names like www.sc.edu to IP numbers, which are fixed).

Anyway, there are already many business running on the app engine. This list has a few case studies, which are already about a year old.

No Friday Lectures

There will be no lecture this or any subsequent Friday, unless otherwise noted. Instead, I will be in my office ready to answer all questions you might have about the imminent homework, on top of my regular office hours. We will start the Friday challenge rounds soon.

Also, here is the code from today's class.

From Database Rows to Objects: The db.Model

On Wednesday I will be introducing the app engine datastore. You use the datastore via the db.Model. This Model is an implementation of an Object Relational Mapping (ORM) which is code that maps a database table to a Class in an object-oriented language. Most modern webapp frameworks implement an ORM: Rails uses ActiveRecord, Java Servlets use Hibernate, Django uses Models, etc., and they all operate in very similar ways.

Below is a video describing the design of the Google datastore and how to use it. The resolution is rather low so I recommend you follow by reading the slides from the talk.

Configuring Eclipse for the App Engine

Checkout this step by step tutorial on installing app engine support on eclipse, after you install the app engine. Note that you have to install PyDev. The "Installing Pydev for Eclipse" section works for win/mac/linux. The "starting your first project" section will be different on a mac/linux.

On the mac, when you try to create a new "Pydev google app engine project" it will ask you for the google_appengine directory. This directory is buried under GoogleAppEngineLauncher.app so eclipse can't see it. What I ended up doing was going to the terminal and typing (this creates a symbolic link on the filesystem) :

ln -s /Users/jmvidal/Desktop/GoogleAppEngineLauncher.app/Contents/Resources/GoogleAppEngine-default.bundle/Contents/Resources/google_appengine google_appengine

then telling eclipse that the app engine directory is at /Users/jmvidal/google_appengine.

Finally, while you are installing eclipse plugins, you will also want to install the eclipse web tools platform (WTP) which you can do via Help->install new software and then using this repository (it might already be under your "Available Software Sites" link, depending on which version of Eclipse you installed). WTP provides eclipse with fancy editors for HTML, CSS, and JavaScript, which you will need in a couple of weeks.