• Skip to main content
• Accessibility features

• Contact Ed Gellenbeck

• CWU
• Gellenbeck
• CS 352
• Wiki

Site Search

Search ~352

CS 352: Lab 4 - Ajax, PHP, and Prototype

Student Learning Objectives

After completing Lab Assignment 4, students should be able to

• Use Ajax to access PHP server-side methods
• Use Prototype.js to simplify Ajax JavaScript coding
• Use a SQLite database with PHP
• Use Firebug in Firefox to debug JavaScript code
• Work cooperatively as a pair-programming team

Lab 4 Pair Programming Teams

Team 1	Team 2	Team 3	Team 4	Team 5
Liam	Brock	Samwise	Tom	Paul
Kevin	Ben	Gene	Trevor	Gary

You may wish to review the basic pair programming guidelines before you begin.

• One team member (the driver) has control of the keyboard/mouse and actively implements the program
• The other team member (the navigator) continuously observes the work of the driver to identify tactical defects (syntactic and spelling errors, etc.) and also thinks strategically about the direction of the work

You should change roles with each iteration

Lab 4 Assignment

This lab is based on the steps provided in the Guide to Using AJAX and XMLHttpRequest from WebPasties tutorial.

However, rather than just following the instructions and coding the JavaScript and XMLHttpRequest directly, use calls to Prototype methods to simplify development and generate cross-browser code.

Note: If you did not do this on Day 17, download prototype.js and save the file in your u:\htdocs folder

Iteration 1

Lab 4 will be done with HTML-Kit text editor and the localhost Abyss web server

1. Create a U:\htdocs\Lab4 folder to hold the files associated with today's lab
2. Create a XHTML strict page named index.html saved in your Lab4 folder
3. Do Step #1 - Creating the Form from Guide to Using AJAX and XMLHttpRequest tutorial
   • Fix the tutorial's code to add labels for textboxes
   • Validate your page to XHTML strict standards in HTML-Kit
4. Do Step #2 - Adding the Event Handler
   • Register the blur event using prototype's Event.observe method, do not register the event in the HTML form's code
5. Do Step #3 and Step #4 - Some Instant Gratification
   • This part will be simplified by using Prototype's Ajax.Request method
   • Create Lab4.php to echo "Buzzard Puckey, NM" to test your Ajax call

Functional Tests

• Test and debug your Lab4.html page by viewing it in Firefox with the Firefox extension
  • Add breakpoints in your JavaScript Methods to help with debugging
• Remove any XHTML Strict Validation errors or warnings

Iteration 2

Before beginning these Iteration 2, switch roles between driver and navigator.

• Download and save the SQLite database lab4.sqlite containing the zip codes for Washington state
  • The database contains one table, zipcodes, with four fields: zipcode, city, state, and areacode. zipcode is the primary key; we do not need to use areacode
  • The first 4 rows of data in the zipcodes table are given below (areacode is not retrieved):

zipcodes Table

zipcode	city	state
98001	Auburn	WA
98002	Auburn	WA
98003	Federal Way	WA
98004	Bellevue	WA
...	...	...

1. Step #5 Creating the ZIP code database is done for you - download the lab4.sqlite database and save it in your Lab4 folder
2. Do Step #6 - Querying the ZIP database
   • You will need to rewrite the code example to make it work with a SQLite database
   • Instructions for extracting data from a SQLite database were covered in CS 350

Functional Tests

• Test and debug your Lab4.html page by viewing it in Firefox with the Firefox extension
  • zipcode 98021: Bothell, WA
  • zipcode 98063: Federal Way, WA
  • zipcode 98190: Seattle, WA
  • zipcode 99999: invalid, 99999

Iteration 3

Before beginning these Iteration 3, switch roles between driver and navigator.

1. Do Step #8 What about the XML
   • You will need to rewrite the function showResponse(r) to access r.responseXML

Functional Tests

• Test and debug your Lab4.html page by viewing it in Firefox with the Firefox extension
  • zipcode 98236: Clinton, WA
  • zipcode 98237 Concrete, WA

To Receive Credit

Lab 4 is due by the start of class on Monday

• If you finish during lab, get checked off for having completed the lab
• If you are unable to finish during lab, the lab assignment is due Friday. To receive credit:
  • Agree on a time to meet with your pair programming partner to complete the lab
  • Save your work in solution U:\Labs\Lab4 in one of your cs352 accounts
  • Print out a snapshot of index.html page as displayed in the browser
    • Write both names on your printout
    • Clearly write the account number where the work is saved on the printout
• You do not need to print out and submit your code files - they will be checked online