Lecture 11 Material - November 4th, 2008

Sorry about last week!

(Did you vote yet?)

Reprise lab #10...

Files under

http://class.ged.idyll.org/svn/files/lab-10/

figleaf

figleaf is a code coverage recording and analysis tool. Basically, it "watches" Python execute code, records which lines are executed, and then annotates your program with the results.

(I installed it on arctic; you'll need to do source ~ctb/python-env.csh to be able to run it.)

Basic usage: to record,

figleaf <program> <arguments>

To annotate,

figleaf2html

So, for example, try running

figleaf import_example.py

and then

figleaf2html

Now open the 'html/index.html' file in your browser to see what lines of code were executed.

Coverage info is saved in the file .figleaf, and automatically aggregated; to start fresh, rm this file.

Now try running

rm .figleaf
figleaf coverage_example.py 0 0
figleaf2html -d html-0

and

rm .figleaf figleaf coverage_example.py 1 0 figleaf2html -d html-1

and

rm .figleaf figleaf coverage_example.py 1 1 figleaf2html -d html-2

and look at the various differences. (The -d flag specifies what output directory to use for the annotation output.)

Coverage analysis is a useful way to target your testing efforts: code that is not executed by any tests is, by definition, untested... You'll see more about this in the next few weeks.

CSS (Cascading Style Sheets)

(a.k.a. the Shortest Introduction to CSS You'll Ever Have)

content (HTML) vs presentation (CSS) vs behavior (JavaScript)

HTML documents consist of head and body:

<html>
 <head>
 ...
 </head>

 <body>
 ...
 </body>
</html>

The body contains the page content and is what is shown; the head contains information about the page, including things like title:

<title>this is my page title</title>

and CSS stylesheets to apply to this document:

<link rel="stylesheet" type="text/css" href="style.css">

We'll play around with the example 'example.html', 'example2.html', and 'style.css' in the lab-10/ files directory a bit; also see http://ged.msu.edu/courses/default.css.

The book "The Ultimate CSS Reference" (Olsson & O'Brien) is very good: see http://www.sitepoint.com/books/cssref1/

Personally I recommend using http://oswd.org/, the Open Source Web Design site, as a source for basic CSS styles. (Be careful of their licenses tho.)

For HW #10, you can just go find a style you like, and change the index.html page on your Web server to contain whatever content etc. you want -- the default from the style files are fine. (None of the tests depend on this content.) The only modifications you will need to make are to add appropriate MIME types: for example, CSS files should be served with 'text/css', PNG image files should be served with 'image/png', and GIF is 'image/gif'.

You should also retrofit the 'login.html' and 'movie-search.html' page with the basic style you choose; including the proper CSS reference is sufficient for HW #10.

I would also like to point out that your unit tests (unittest-based tests) and functional tests (twill- and Selenium-based tests) look only at the HTML, and not at the CSS. See? Content separated from presentation...

Escaping special chatacters in HW #10 tests

You'll need to escape special characters in your twill and Selenium tests for the weird usernames/passwords. (I sent this info out via e-mail, too).

---

For your twill tests, you don't need to escape anything in the formvalue commands; just surround the username with quotes, e.g.

formvalue 1 username "(hello, world")

You do need to backslash-escape your parantheses in the 'find' command.

find "you are user (hello, world)"

This is because of a bug in twill.

---

For the Selenium tests, you need to escape '<' and '>' characters, because Selenium tests are written in HTML and those characters mean something in HTML. So, instead, write '&lt;' and '&gt;' for the argument when setting the password. (You can also escape any other characters you need to by using other character entities, http://www.w3.org/TR/html4/sgml/entities.html, but you don't need that for this homework.)

Movie searching and database schemas

In HW #10, I ask you to build a simple search interface for movies in which a particular actor and actress starred. I'll give you a bunch of data for this from the IMDB for next week; for this week, just build the interface around King Kong (2005), which had Noami Watts and Jack Black in it.

So, in the webserve-info.db database, add tables to

There are at least three ways to do this:

2 tables, one containing (actor, movie_name) and the other containing
(actress, movie_name)
3 tables, one containing (actor, movie_id), another (actress, movie_id),
and the third (movie_id, movie_name, ...)
5 tables: actor to actor_id, actress to actress_id, actor_id to movie_id,
actress_id to movie_id, and movie_id to movie_name, etc.

(Which ones are likely to scale well to a database containing hundreds of thousands of actors, actresses, etc? Which ones have more or less complicated SQL queries?)

Then add 'Jack Black', 'Naomi Watts', and 'King Kong' into the tables appropriately.

Things to check, manually or via automated tests...

  • searching for Jack Black and Naomi Watts returns King Kong.
  • searching for Jack Black and anyone else returns nothing.
  • searching for Naomi Watts and anyone else returns nothing.
  • searching for people not in the database returns nothing.

Please do check in a fully-functioning webserve.py + database, i.e. one that contains the right tables and Jack Black/Naomi Watts/King Kong, so that I can easily test your code... thanks!