,

Lab :

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Basic lab instructions

Make sure to click the Attendance Check-In link on the Labs page to get your participation points.
You may want to bring your textbook to labs to look up syntax and examples.
Have a question? Ask a TA for help, or look at the book or lecture slides.
We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
You don't have to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab; there is no homework from lab.

Today's lab

Today you will practice solving problems similar to the ones that may appear on your final exam.

We recommend that you work on most of these problems on paper first. If you want to try typing some of them in afterward, that is fine.

You won't be able to finish all of the problems during the lab time. So choose a few topics that you want to practice the most and solve those problems. You can try solving the rest later if you want.

Exercise : HTML/CSS Interpreting

Draw what the following HTML/CSS would look like in the browser. (For an image, just draw a smiley face.)

<!DOCTYPE html><html><body>
  <h1>What a <em>great</em> page!!</h1>
  <div id="content">
    <img src="cow1.jpg" />
    <div>
      <p><img src="cow2.jpg" />
        I never saw a purple cow, 
        I never hope to see one.
        But I can tell you anyhow
        I'd rather <em class="sp">see</em>
        than be one.</p>
    </div>
    <p>Copyright 2007<br />CSE.</p>
    <p>This <br /> is <br />
      the <br /> end!</p>
  </div>
  <div>What about me?</div>
</body></html>

*            { margin: 0; }
body         { font-size: 24px; }
#content     { width: 33%;
               margin: auto;
               border: 2px black dashed; }
p img        { float: right; }
em           { font-weight: bold; }
em.sp        { font-size: 48px;
               text-decoration: underline; }
#content > p { background-color: #ccc;
               float: right; }

Exercise : JavaScript/DOM

Write JavaScript code so that when the page loads, all tables will taken on a "chess board" appearance by coloring every other cell with a black background and white text.

For even rows (#0, 2, 4, etc.), even cells should be changed; for odd rows (#1, 3, 5, etc.), odd cells should be changed. (The page's CSS file has a class named chess that you can attach to the affected black cells.)
Note that the number of rows in one table should not affect the striping for another table.

Name	Home	Bounces	Height	Weight	Age
Snuggles	FabricLand	7	2'7"	34 lbs	12
Horseface	PonyVille	13	6'1"	217 lbs	37
Cornelius	Nebraska	3	3'1"	52 lbs	24
Tigger	Hundred-Acre Wood	1000	4'8"	85 lbs	15

Exercise : Ajax/XML

Write the complete JavaScript code to fetch XML data about rectangles and display it on the current page.

The data comes from a page rect.php in the same directory as your code. When contacted with no parameters, it outputs a group of rectangles to draw on the page, such as:

<shapes>
  <rectangle x="10"  y="40"  width="100" height="30" color="FFFF00" />
  <rectangle x="190" y="10"  width="20"  height="60" color="9000DD" />
  <rectangle x="30"  y="120" width="90"  height="55" color="00BB88" />
</shapes>

Process the XML and display each rectangle as an absolutely-positioned div of the right position/ size/ color. Add it to the div with id of rectanglearea:
```
<body> ... <div id="rectanglearea"></div> ... </body>
```

Exercise : PHP

Write a PHP web service lookup.php that looks up a name in a file and outputs a URL about the person.

You will be given a full name as a GET parameter name. Assume that the parameter is always passed.

Read data from a file employees.txt. Full name, username, and position are separated by tabs:

Morgan Doocy        mdoocy    Devourer of Souls!!!!
Conner Q. Reilly    con74     Director of Archives
Marla Jeffries      mjeff     Lamination Tzar

If the name is matched, output a URL with the employee's name/title, in the following format:
```
http://www.awesomeco.com/PositionNameWithoutSpaces/userName
```
- For example, lookup.php?name=Conner+Q.+Reilly produces the following output:
```
http://www.awesomeco.com/DirectorofArchives/con74
```
If the name is not matched, output the URL: http://www.awesomeco.com/

Exercise : SQL

Write an SQL query to show all actors who share the same last name and were in a movie together. Display the first names, last name, and movie name. Do not match up an actor with him/herself. Order by last name.

+-----------------+------------+-----------+---------------------+
| first_name      | first_name | last_name | name                |
+-----------------+------------+-----------+---------------------+
| Bill (I)        | Frankie J. | Allison   | Ocean's Eleven      | 
| Anthony         | Frankie J. | Allison   | Ocean's Eleven      | 
| Anthony         | Bill (I)   | Allison   | Ocean's Eleven      | 
| J. Todd         | Sharon     | Anderson  | Fargo               | 
| ...             | ...        | ...       | ...                 |
| Elenor          | Rowan      | Witt      | Matrix, The         | 
| Ben (I)         | Samuel E.  | Wright    | Little Mermaid, The | 
+-----------------+------------+-----------+---------------------+   134 rows in set

Recall that the imdb database contains the following tables:

actors
id	first_name	last_name	gender
433259	William	Shatner	M
797926	Britney	Spears	F
...

movies
id	name	year
112290	Fight Club	1999
209658	Meet the Parents	2000
...

roles
actor_id	movie_id	role
433259	313398	Capt. James T. Kirk
797926	342189	Herself
...

Exercise : PHP, HTML, SQL

(The next 2 slides describe this exercise. Please read them both, then start.)

Write the PHP code to display all the results from the preceding SQL query in two ordered lists.

The first list should show last names that start with A-J inclusive, and the second shows K-Z names.
Write a function display_last_names that displays these two lists, as shown below:

<!DOCTYPE html>
<html>
  ...
  <body>
    <?php
    display_last_names();
    ?>
  </body>
</html>

Exercise , continued

Your code should produce the following output (abbreviated):

<ol>
  <li>Allison, Anthony / Bill (I): Ocean's Eleven</li>
  <li>Allison, Anthony / Frankie J.: Ocean's Eleven</li>
  <li>Allison, Bill (I) / Frankie J.: Ocean's Eleven</li>
  <li>Anderson, George (IV) / Jo (I): JFK</li>
  ...
  <li>Jones, Annette / James Earl: Star Wars</li>
  <li>Jones, Annette / Linda (I): Star Wars</li>
  <li>Jones, James Earl / Linda (I): Star Wars</li>
</ol>
<ol>
  <li>Kennedy, Caroline / Ethel (II): JFK</li>
  <li>Kennedy, Caroline / Jacqueline (I): JFK</li>
  ...
  <li>Witt, Elenor / Rowan: Matrix, The</li>
  <li>Wright, Ben (I) / Samuel E.: Little Mermaid, The</li>
</ol>

You may have to give unique names to columns in your query, so you can access the columns in your PHP code. Do not use print/echo statements. You do not need to check for MySQL errors.

If you finish them all...

If you finish all the exercises, congrats; you're done! If there is still extra time left, go look at the other practice final exam problems that have been posted.

Great work! Good luck on the final exam!