Lab 6
XML and XSLT

Introduction

You've 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. Your goal for this lab is to retrieve data as XML from the server, and then insert it into your webpage using XSLT and Javascript. You will use your previous lab, retrieve data, and show it on your webpage using AJAX techniques.

Warnings

  1. Warning: Browser caches!! Browsers will sometimes cache old versions of the files you use (especially your sample XML and your XSL files). If things aren't working right, clear the history/cache. This is likely to happen to you, so make note of this issue!

Detailed Instructions

NOTE: read these instructions first, BUT then see the plan of attack below, before you start!

This lab really only requires two things: the ability to insert data, and the ability to query the data. The insertion can simply be from your Lab 4, and the query must follow the requirements below:

  1. DB Insert: You must be able to insert data into your database from the webpage. Use your previous lab!
  2. XSLT Display: There should be a button or something to interact with such that the following happens:
    1. You use AJAX, which invokes a Perl (PHP okay) script to query your DB. Use the in-class javascript example, if you wish.
    2. The Perl returns an XML document (see details below). Namespaces are not required for this XML.
    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)
  3. XML Data: The details of the XML produced by your DB are up to you. However, it should contain at a minimum:
    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 or sub-elements "about" each thing (e.g., if your "thing" is a person, then the name and company of each person would each count here).
    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).
  4. XSLT Specs: 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 the info from at least 2 distinct attributes/elements "about" each thing
    5. Your XSLT should not be too similar to the given examples.
  5. Testing Files: For testing and grading purposes, you must make (and keep around) two test files. You must keep this up to date if you change your XML later!
    1. test1.xml - sample XML in exactly the same format that your Perl program produces.
    2. test2.xml - identical to test1.xml, except it has the line in it that causes the browser to transform it with your XSL file before displaying the results.
  6. Code Comments: As always, your code must be commented!
  7. Instructions: On your default.htm page, provide some instructions on how to use your site. What exactly do I click/enter to add to your database? What exactly do I click to retrieve the XML data?
  8. Links: On your default.htm page, have the following links:
    1. Link to test1.xml
    2. Link to test2.xml
    3. Link to invoke to your Perl file that generates the XML. Provide arguments (if necessary) - so if you click on this link, you should see XML appear in the browser, and the XML should be in the same format as test1.xml and test2.xml (it's okay if the data is a little different).
    4. Link to Lab06/index.html (as you usually would have)
  9. Validate: Ensure all your pages validate and that you have met all requirements.

Suggested plan of attack

A. XML and Javascript

Do NOT write any Perl/PHP code until you have finished these steps:

  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. Create a dummy XML file called test1.xml that approximates what you WANT to produce from your database. You do not have to have namespaces in this file.
  3. Verify that test1.xml is valid by loading it in a browser. A complaint about namespaces is okay, but it should be rendered as valid XML.
  4. Create your XSLT file. Suggestion: start with the "Example 0.5" XSL from the online example page.
  5. COPY test1.xml to test2.xml. Now test your XSLT file by adding the appropriate line to your test2.xml XML file (not test1.xml) and loading it in a browser. Does an HTML page now display?
  6. Write the JavaScript to load the XML (from your test1.xml), apply the XSLT to it, then insert some of the result in your page. Note: for this it's perfectly fine to re-use the sample JavaScript given in class.

B. Perl and DB

You now have working javascript on the client. You know this works on the XML data format you created (test1.xml). Now write web server code to create that same XML data format:

  1. Write the Perl code to actually produce real XML based on querying your DB.
  2. Type in the Perl script as the URL in your browser. Does it display as valid XML data? Do not move on until it does.
  3. Modify your working JavaScript to now retrieve the dynamically generated XML data from the Perl script (instead of test1.xml).
  4. Interact with your webpage. Does the XML appear reformatted on your page? Do not move on until it does.
  5. Now make sure that the user can add content to the database and have that content show up in the results of the transformed XML.
  6. Write the default.htm instructions
  7. In default.htm, add the links to test1.xml, test2.xml, and to invoke Perl to generate XML (see details in requirements above)
  8. Important:: go back and check that
    1. test1.xml and test2.xml have identical content (only differ in a processing instruction)
    2. test1.xml and test2.xml match the XML format produced by your Perl program
    3. test1.xml renders as valid XML in the browser
    4. test2.xml shows the transformed result (e.g. changed by XSLT) when loaded in the browser

Helpful stuff

  1. See the plan of attack above!
  2. For problems with perl, see tips about creating Perl files.
  3. As always, the "Console" in Chrome is invaluable for errors.
  4. 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;
  5. 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.
  6. 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 "it452/Lab06" on the Web drive.
  2. Your main page for Lab06 should be called "index.html" and placed inside the folder "it452/Lab06".
  3. 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.
  4. Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet.
    2. 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.
    3. A printout of the source to your Lab06/index.html file.
    4. A printout of the javascript that performs the XSLT transformation (if not already included above)
    5. A printout of your Perl/PHP file that generates XML.
    6. A printout of test2.xml
    7. A printout of your XSLT file.