,

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

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 : 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 : Ajax/JSON

Now suppose the rect.php page produces data in JSON format instead.

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": [
    {"x": 10,  "y": 40,  "width": 100, "height": 30, "color": "FFFF00"},
    {"x": 190, "y": 10,  "width": 20,  "height": 60, "color": "9000DD"},
    {"x": 30,  "y": 120, "width": 90,  "height": 55, "color": "00BB88"}
  ]
}

Process the JSON 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 : Web Services

Write a PHP webservice named classes.php that displays when a student took classes from particular departments

The webservice will take two parameters: "name" will dictate which student's classes are shown and "deparment" will dictate which types of classes are shown (e.g CSE classes, or INFO classes)
The students' data will all be stored in txt files in the same directory as classes.php. So for instance, austin.txt will have a text file in the format: deparment:course number:quarter on each line
contents of austin.txt
```
CSE:154:Spring 2013
MATH:300:Summer 2015
CSE:142:Autumn 2012
INFO:200:Spring 2013
      
```

Exercise : Web Services continued

a call to classes.php?name=austin&department=CSE should output

{
    "classes": [
        {name: "CSE 154", quarter: "Spring 2013"},
        {name: "CSE 142", quarter: "Autumn 2012"}
    ]
}

Exercise : Regular Expressions 1

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex.

All lines that start with either 'q' or 's', and that also contain a double z ('zz') later within the same word on that line. (try it) (data)
All lines that contain a string of at least 5 vowels (a, e, i, o, or u) in a row. (try it) (data)
Lines that are at least 25 characters long. (try it) (data)
Lines that end with two or more occurrences of "?!", as in, "Huh?!?!" (try it) (data)

Exercise : Regular Expressions 2

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex.

a valid amount for a US coin: 1, 5, 10, 25, or 50 cents (try it) (data)
an IP address, of the format 128.208.3.88 (accept any 3-digit numbers between the dots) (try it) (data)
strings that contain at least 3 words, each separated by one or more spaces (try it) (data)
lines that contain a quotation with "quote marks" around it (try it) (data)

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!

,

Lab :

,

Lab :

Basic lab instructions

Today's lab

Exercise : Ajax/XML

Exercise : Ajax/JSON

Exercise : Web Services

contents of austin.txt

Exercise : Web Services continued

Exercise : Regular Expressions 1

Exercise : Regular Expressions 2

Exercise : PHP

Exercise : SQL

Exercise : PHP, HTML, SQL

Exercise , continued

If you finish them all...