A Real Application
This week you will turn your site into a real
application! The key is adding backend
server support with a database.
- Copy your Lab02 files to a new Lab03 directory. Your
main file should still be called index.html
Here is what you what you want
to have when you are finished. Suggested
plan of attack for getting there is below:
- Note: if you have a compelling case to modify the
requirements based on your site, discuss with the instructor in
advance. Normally, requests
for a substantive change should be made before the end of the lab period
when the lab begins.
- There should be some way for the user to add new
“things” to your database. These
could be people, books, races, whatever, but there should be at least 2-3
different "attributes" associated with each one (e.g., name,
address, and phone).
- Adding the new things should be done via your main
- There should be at least two different ways to
retrieve info from the database from your main page. For instance, you
might have an option to search for people, then
each person is clickable for more details. Most likely, this should be the two
interactions you used for Lab02, but it can change. You can use either XML or text for the
data, but at least one must be asynchronous.
- It should be possible to “refresh” your page, so
that if one user adds new content, a second user the already had your
page open could refresh (e.g., by querying again) and see the updated
data. This implies that if someone
queries a second time you must not just add a second list of results to
the page – it needs to change, or the old list must be deleted.
- As always, your code must be commented!
- You may use PHP or Perl. Examples given are in Perl.
- At least one AJAX
interaction must be based on a value that user enters in a search box OR
at least one AJAX
interaction must be based on something the user clicks, where clicking on
different elements yields different results.
- In your default.htm page, under “Lab3” include:
- A link to Lab03/index.html
- Brief user instructions (aimed at the instructor)
explaining how to see your interactions (what to click on, enter, etc. –
make it easy to see that you have earned full credit!)
- Suggested plan of attack (see also helpful info at
- Plan and create the database table(s) you will
- Insert some dummy data into the tables for testing.
- Write your Perl program to query the database. Test
this via the command line, then via entering the browser URL, before
- Get your first AJAX interaction from last week
working, where you replace the static file with the Perl program to read
from the database. At first, the
“query” can be hard-coded so that it always returns all the data from the
- Improve your interaction so that the database
results depend on what was clicked or entered in a search box.
- Get you second AJAX interaction working.
- Implement ability for user to add new data to the
- If not done already, make sure “refresh” (e.g. a
second query) doesn’t continue to show old results or an old list.
Ensure your page works with Firefox. Having it work on
IE is encouraged but not required.
Ensure all your pages validate and that you have met
NOTE: all HTML files must validate as XHTML without errors
for full credit. The penalty for a file
that does not validate is 10%.
- As always, the “Error Console” in Firefox is
- To connect to the database, use something like
(password to be provided):
- Perl is easier to debug via the windows command line.
Here is what to do:
Click Start, select “Run…”,
then type in “cmd” and hit return.
Enter “W:” and hit return,
to change to your web drive
Lab03” and hit return.
Proceed with the directions below.
You should first check for syntax errors by just “checking” the file:
–c -w myquery.pl
Once that works run it for real:
If needed, you can provide CGI arguments like this:
–w myquery.pl “query=dogs&type=2”
- On the command line, database errors will usually
appear automatically. From the
browser, they won’t – instead insert this as a debug:
- Do not use
the die() function alone – the error it generates can’t be seen from your
- CREATE TABLE comments
(USER_NAME VARCHAR(20), TIMESTAMP DATETIME, COMMENT MEDIUMTEXT, PAGE
- INSERT INTO comments
(USER_NAME, TIMESTAMP, COMMENT, PAGE) VALUES ('Jamie', '2006-09-27
11:30:00', 'hi', 2);
- CREATE TABLE topics
(TOPIC VARCHAR(20), OWNER VARCHAR(20));
- INSERT INTO topics
(TOPIC, OWNER) VALUES ('Cars', ‘Jamie’);
- Note: ID is
automatically created with the table, no need to specify it.
All of your files for Lab03 should be in a folder
called "Lab03" (without the quotes) on the Web drive.
Your main page for Lab03 should be called
"index.html" (without the quotes) and placed inside the folder Lab01.
Your instructor will assume that your web pages are
viewable at http://www.mXXXXXX.it452.cs.usna.edu/Lab03/index.html
where XXXXXX is your alpha number. You should check that this URL is viewable
and that everything works correctly from a computer where somebody else is
logged in. If you've goofed and linked to a file on your X drive, this will
help you catch it!
All files must be complete and saved to your Web drive
before you submit the hardcopy of your assignment. Do NOT modify your files
after you have submitted your assignment.
Turn in the following hardcopy on or before the due
date, stapled together in the following order (coversheet on top):
A completed assignment coversheet. Your comments will help us improve the
The first page of the output of the W3C validator, as run on the final version of your
Lab03/index.html. This should show that
your document correctly validated, but turn it in anyway if you can’t get your
page to validate.
A printout of the
source to your Lab03/index.html file (not the rendered page that you
normally see with Internet Explorer/Firefox).
Truncated lines are not acceptable – use Crimson Editor vice Notepad if
needed for printing. You could also
paste into Microsoft Word etc. if needed.
Printout of the source of the Perl/PHP files that you
XML is great, but can be a little trick to get working.
Here are some tips:
You should *not* have a call like:
Instead, you want:
"Content-type: text/xml; charset=UTF-8\n\n";
To be a valid XML document, there must be a “root”
element that surrounds all the other elements. So, if you have 3 <person>
elements, put something like a <results> element around all of them.
Before trying to get your Perl-generated XML to work
just run the Perl script via typing the URL into the browser address bar (with
arguments if needed). Check to make sure you have something
Notice that the browser is automatically formatting the XML in a “XML tree”
view, with little minus signs next to some elements (you can click on these to
collapse it). If you don’t get this, then something is wrong! (a warning about no “style information” is fine). If you don’t see this, check that the “Content-type”
header is correct and that you have a single root element. For instance, here
is what you get if you header is wrong (text/plain instead of text/xml):
Or, if you don’t have a single root element, you might get an error like this: