,

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.

Valid HTML5 Valid CSS

Basic lab instructions

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.

Name Home BouncesHeightWeight Age
Snuggles FabricLand 7 2'7" 34 lbs 12
HorsefacePonyVille 13 6'1" 217 lbs37
CorneliusNebraska 3 3'1" 52 lbs 24
Tigger Hundred-Acre Wood1000 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.

Exercise : PHP

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

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
idfirst_namelast_namegender
433259WilliamShatnerM
797926BritneySpearsF
...
movies
idnameyear
112290Fight Club1999
209658Meet the Parents2000
...
roles
actor_idmovie_idrole
433259313398Capt. James T. Kirk
797926342189Herself
...

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.

<!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>

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!