Lab 6

XML and XSLT

 

 

Introduction

 

This week we learned how to use XSLT to leverage XML data in your web applications.  In this lab, you will use this knowledge to manipulate XML that you extract from your database. In future labs, you will then use XSLT to exploit other kinds of XML.

 

Instructions:

 

  1. Copy your Lab04 files (or Lab05, if you continued your theme in Lab05) to a new Lab06 directory. Your main file should still be called index.html

2.      Here is what you what you want to have when you are finished.  Suggested plan of attach for getting there is below (read it before you start!):

    1. Deadline for waivers: If you think that a particular detail of this lab should be modified for you, because you can achieve the same educational objective in a different way that works better with your theme, you must request a waiver, via email, before the end of the lab period when this lab is started. State clearly why an exception should be made and what you propose instead.  You can talk to the instructor first, but it must be finalized via email.
    2. Everything from previous labs should still work.
    3. There should be a button or something to click or interact with such that when you click the following happens:
      1. You use AJAX, which invokes a Perl(PHP okay) script to query your DB.
      2. The Perl returns a XML document (see details below.  You do not actually save this file, just use “print” from Perl).
      3. You transform that XML with XSLT (see details below).
      4. You display part of the transformed XML in your page.
      5. All of this should happen within your original index.html (e.g. the URL up top should not change)
    4. The details of the XML produced by your DB are up to you. It should however at a minimum contain:
      1. Results for at least 3 distinct “things” (e.g. people, products, events) (including all items from your DB is okay too)
      2. Contain at least 2 distinct attributes “about” each thing.
      3. Adding new results to the DB (using your existing functionality) should cause the XML result to change (e.g., if you add a new person, that person should appear in the XML produced).
    5. The details of the XSLT transformation are up to you.  It should however at a minimum:
      1. Do some re-orderings (e.g. not display things in exactly the same order as the XML file)
      2. Insert some HTML markup
      3. Contains results for at least 3 distinct “things”
      4. Show at least 2 distinct attributes “about” each thing
    6. As always, your code must be commented!
    7. On your default.htm page, provide some instructions 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.
  1. Suggested plan of attack (see also helpful info at end)
    1. Do NOT follow the requirements above in order. Instead…
    2. First create a dummy XML file that approximates what you WANT to produce from your database. You do not have to have namespaces in this file.
    3. Verify that your XML file is valid by loading it in a browser.
    4. Create your XSLT file. Suggestion: start with the “Example 0.5” XSL from lecture.
    5. Test your XSLT file by adding the appropriate line to your XML file and loading it in a browser (but delete that line before continuing!)
    6. Write the JavaScript to load the XML (from your static XML file), apply the XSLT to it, then insert some of the result in your page.
    7. Once all that works, then write the Perl code to actually produce real XML based on querying your DB. Test this script alone via the browser! (you want to ensure a.) the script runs b.) it produces valid XML)
    8. Modify your JavaScript to get the dynamically generated XML from the Perl script (instead of using the static XML).

4.      Ensure your page works with Firefox. Having it work on IE is encouraged but not required.

5.      Ensure all your pages validate and that you have met all requirements.

     

NOTE: all HTML files must validate as XHTML without errors for full credit.  The penalty for a file that does not validate is 10%.

Helpful stuff

  1. See the plan of attack above!
  2. General debug strategy:
    1. 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.
    2. Second, run Perl via the webserver directly, e.g. something like
      http://www.mXXXXXX.it452.cs.usna.edu/Lab06/query.pl?q=dogs&type=4
    3. Finally, try it all from HTML via the browser.  If this doesn’t work
      1. Look first at the Error console!
      2. Use window.alert() to see what is happening.  In particular, check what URL you are actually using to invoke Perl.
      3. Did I mention looking at the Error console?
  3. As always, the “Error Console” in Firefox is invaluable.
  4. Perl is easier to debug via the windows command line. You should first check for syntax errors by just “checking” the file:
         perl –c -w myquery.pl
    Once that works run it for real:
         perl -w myquery.pl
    If needed, you can provide CGI arguments like this:
         perl –w myquery.pl “query=dogs&type=2”
  5. On the command line, database errors will usually appear automatically.  From the browser, they won’t – instead insert this as a debug:
         print $DBI::errstr;
  6. Useful SQL examples:
    1. CREATE TABLE comments (USER_NAME VARCHAR(20), TIMESTAMP DATETIME, COMMENT MEDIUMTEXT, PAGE INTEGER);
    2. INSERT INTO comments (USER_NAME, TIMESTAMP, COMMENT, PAGE) VALUES ('Jamie', '2006-09-27 11:30:00', 'hi', 2);
    3. CREATE TABLE topics (TOPIC VARCHAR(20), OWNER VARCHAR(20));
    4. INSERT INTO topics (TOPIC, OWNER) VALUES ('Cars', ‘Jamie’);
    5. Note: ID is automatically created with the table, no need to specify it.
  7. Do not use the die() function alone – the error it generates can’t be seen from your web page.

 

Deliverables

1)      All of your files for Lab06 should be in a folder called "Lab06" (without the quotes) on the Web drive.

2)      Your main page for Lab06 should be called "index.html" (without the quotes) and placed inside the folder Lab01.

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

4)      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.

5)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The first page of the output of the W3C validator, as run on the final version of your Lab06/index.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. 

c)      A printout of the source to your Lab06/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.

i)        NOTE – turning in just the JavaScript fragment that does the transformation and insertion is acceptable if you wish.

d)      Printouts of external JavaScript files, if any.

e)      Printout of your Perl/PHP file that generates XML.

f)        Printout of sample XML generated by your script. Use the browser to invoke the script with dummy arguments to make this happen.

g)      Printout of your XSL file