Lab 7
Web Services

Introduction

In this lab you will use a web service to get new relevant data, transform it via XSLT, and display it in your application. This is similar in structure to the previous lab, but this time you retrieve live data from a different service and not your own database.

Required Milestone

Add the "invoke link" described above to your default.htm page AND send an email to the instructor saying that it is there. See calendar for the deadline on this.

Detailed Instructions

Follow the Plan of Attack below, but here are the specific requirements.

  1. Copy your Lab06 new Lab07 directory. Your main file should still be called index.html
  2. Try to keep the functionality from your previous lab (e.g. don't start over and delete things, but you don't have to fix things either. Talk to the instructor if you have a reason to modify this).
  3. There should be a button(s), link(s), or something to click or interact with such that when you click, one of the following happens:
    1. You use AJAX to invoke a Perl/PHP proxy
    2. The proxy invokes a web service (you choose, see below)
    3. The web service returns XML to the proxy, which returns it to your HTML/JS application
    4. You transform that XML with XSLT (same general idea as last week, but see details below).
    5. You display part of the transformed XML in your page.
    6. All of this should happen within the same HTML page (e.g. the URL up top should not change)
  4. The web service must return different results based on different data in your database. For instance, if you have people, you might show weather for their hometown when you click on one. If you have products, you might show related pictures when you click on it. Thus, the same web service will be invoked, but different data from you will yield different results. This implies that your web service should accept some argument (talk to the instructor if you find a web service that you really want that doesn't have this).
  5. It is perfectly fine to insert some new info into your database to make this lab work. For instance, maybe you didn't have zipcodes before, but now you need them for a service - go ahead and add them.
  6. You may choose any web service (some exceptions below) that returns XML and that permits you to use it for free non-commercial use (though you will likely have to register). Start this early! You may have to wait for a "key", or it may turn out the service doesn't provide what you need. Details:
    1. See "Possible Web Services" below.
    2. Try to pick a service that adds real usefulness to your site. Talk to the instructor if you need ideas.
    3. You may not use the two services used as lecture examples (wunderground.com for REST and Flickr for SOAP).
    4. You probably do NOT want to use a mapping-based web service (we'll add that later).
    5. Your must use a proxy that directly interacts with the web service using Perl or PHP (as the two examples in class did). For instance, you may not use one of the Google JavaScript libraries that directly adds a map and handles all the interactions behind the scenes (we'll do that later)
  7. You must use XSLT to modify the XML that you get. It should transform the XML so that it fits in with your existing page. Don't just display the XML that you get back! Having some reasonable/nice style and appearance counts here.
  8. As always, your code must be commented!
  9. On your default.htm page, provide some good, very specific 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.
  10. Default.htm must have these additional links:
    1. The "invoke link": a link that directly invokes your web service, so that clicking on it shows the raw XML returned from your web service. This should not be to a saved XML file - instead, after clicking on this you should be able to modify the argument that is shown in the URL in order to see different XML results.
    2. Link to test1.xml. In the browser, clicking on this should show the raw XML.
    3. Link to test2.xml. In the browser, clicking on this should show the result of the transformed XML.
  11. Ensure your page works with Firefox. Having it work on IE is encouraged but not required.
  12. Ensure all your pages validate and that you have met all requirements.

Suggested plan of attack

Do NOT follow the requirements above in order. Instead...

  1. First identify a web service and register (if necessary). (www.programmableweb.com)
  2. Figure out how to access the web service via your browser (or a Perl proxy, if it's SOAP).
  3. In default.htm, add the "invoke link" to your website directly, to show the API call (if SOAP, then just call your perl script)
  4. Using the "invoke link", save a sample XML result from the web service - call it test1.xml. You will have to turn this in.
  5. Copy test1.xml to test2.xml.
  6. Write a XSLT transformation and test it on test2.xml by adding the XML processing instruction up top. Don't forget to verify your XSLT file alone by loading it in a browser.
  7. Create a perl script to access your web service and print out the XML.
  8. Write the JavaScript to load the XML (from test1.xml), apply the XSLT to it, then insert some of the result in your page.
  9. Modify your JS to invoke the Perl/PHP proxy to get the dynamic XML data (instead of fetching the static XML), then transform via XSLT and display on your page.
  10. In default.htm, add instructions AND links to test1.xml and test2.xml (see requirements above).
  11. Test and make sure everything still works! You'd be surprised how often things get accidentally broken that you were sure worked.

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

Possible Web Services

Helpful stuff

  1. See the plan of attack above!
  2. Bad Characters in XML: Some web services will return free-form text that was input from a variety of sources and users (wikipedia is one such service). These sometimes contain characters that aren't in the standard ASCII range that your browser expects. The good news is we can strip these characters out very easily in Perl:
    $contents =~ s/[^[:ascii:]]+//g;
  3. XML Contains HTML: Some services return text snippets that contain HTML tags like <span>...</span> and text markup. When you use xsl:value-of to grab these, they will show up on the webpage as <span>, rather than being interpreted as HTML. If you see this, you can turn on a flag to stop it:
    <xsl:value-of select="field" disable-output-escaping="yes"/>
  4. As always, the "Error Console" in Chrome is invaluable.
  5. For problems with perl, see tips about creating Perl files.

Deliverables

  1. All of your files for Lab07 should be in a folder called "it452/Lab07" (without the quotes) on the Web drive.
  2. Your main page for Lab07 should be called "index.html" (without the quotes) and placed inside the folder it452/Lab07.
  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 validator, as run on the final version of your Lab07/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 Lab07/index.html file. Truncated lines are not acceptable.
      NOTE: turning in just the JavaScript fragment that does the transformation and insertion is acceptable.
    4. Printouts of external JavaScript files, if any.
    5. Printout of your Perl/PHP file that acts as a proxy.
    6. Printout of test1.xml returned by the web service you use. Just the first page is okay, if it's long.
    7. Printout of your XSL file