This week you will adapt your existing website to use the
YUI toolkit, then leverage YUI to add snazzy
- Read everything on this page before you begin. There are several helpful notes that you
will need in various sections below – make a note of them.
- Copy your Lab03 files to a new Lab04 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:
- Everything from Lab03 should still work, but you
should change all uses of XMLHttpRequest to use
the corresponding YUI approach.
Recall there is no way to do synchronous communication with YUI –
change to asynchronous instead.
- You should have a search box with YUI-enabled autocomplete.
Write a server program (Perl or PHP) to be the datasource
for this – it should be based on the querying the database. Insert some
test entries into the DB so you can demonstrate this. (See helpful stuff
for details on Autocomplete)
- (EXTRA CREDIT – how much depends on
difficulty/sophistication) Pick a different widget from the YUI
documentation (besides the Logger or Autocomplete)
and add it to your web page. Try to find something that fits with your
site. If time permits, add more than one.
- As always, your code must be commented!
- On your default.htm page, provide a link to this
lab (as always) and provide some comments for a user (e.g. the
instructor) on how to use your site.
This should be specific to this lab – e.g. how can I see that your
site meets the requirements for this lab? For instance, what to click,
what to enter, etc.
- Suggested plan of attack (see also helpful info at
- Follow the requirements above in order.
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%.
- General debug strategy:
- First, run Perl from the command line and make sure
it works (see below). Include
actual arguments so you can see it’s really working.
- Second, run Perl via the webserver
directly, e.g. something like
- Finally, try it all from HTML via the browser. If this doesn’t work
- Look first at the Error console!
- Use window.alert() to see what is happening. In particular, check what URL you are
actually using to invoke Perl.
- Did I mention looking at the Error console?
- Perl is easier to debug via the windows command line.
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:
- 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.
- Do not use
the die() function alone – the error it generates
can’t be seen from your web page.
– when you create your data source, provide just the raw name of your Perl
file, e.g. “myautocomplete.pl”.
Don’t try to specify any parameters here. YUI will automatically send a parameter
to your Perl program that is named “query”. This parameter contains the
letters that the user has already typed into the box – use this to
customize the results that are returned.
- AutoComplete –
be sure to turn off your browser’s built-in autocomplete. In Firefox,
Tools->Options->Privacy tab. Unclick "Remember what I enter in
forms and the search bar"
All of your files for Lab04 should be in a folder
called "Lab04" (without the quotes) on the Web drive.
Your main page for Lab04 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/Lab04/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
Lab04/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 Lab04/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.
What URLs to use
to get the YUI stuff? You can either use:
The copies direct from YUI, e.g,
a URL like http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js
Why would you want to use the local copies? Either will work, but the local copy is
To convert between the URLs given in the YUI documentation to a local URL,
delete everything up to and including the “build” part of the address, then
replace the beginning with “http://www.usna.edu/Users/cs/lmcdowel/courses/it452/yui/”.
For example, the URL
would turn into
and the debug version is
Very helpful CGI
module: Add the following to the top of your Perl programs, and all kinds
of errors will now appear in the browser instead of the browser replying just
CGI::Carp qw(fatalsToBrowser warningsToBrowser);
Remember also that, for IT452, this is required for all