Lecture Outline

We shall study:

• The basics of Web protocols: HTTP request and response, etc.
• How to use HTML forms to prepare user input to web applications.
• Server-side and client-side XML document transformation using XSLT.
• Server-side scripting, mainly on using PHP for XML document processing.

We will use these materials in our study:

• How the web works: HTTP and CGI explained, by Lars Marius Garshol.
  Link: http://www.garshol.priv.no/download/text/http-tut.html
• Forms in HTML documents, in HTML 4.01 Specification (W3C Recommendation, 24 December 1999).
  Link: http://www.w3.org/TR/html4/interact/forms.html
• The RSS 1.0 to HTML Transformations example by Yi-Hong Chang and Tyng-Ruey Chuang.
  Live link: http://pomelo.iis.sinica.edu.tw/~trc/play/xslt/
  Code: xslt.tgz.
• RDF Site Summary (RSS) 1.0 Specification.
  Link: http://web.resource.org/rss/1.0/spec
• PHP Manual: Function Reference sections on
  DOM functions: http://www.php.net/manual/en/book.dom.php
  SimpleXML functions: http://www.php.net/manual/en/book.simplexml.php
  XSL functions: http://www.php.net/manual/en/book.xsl.php

HTML Forms

• An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
• Users "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to a Web server for processing.
• Users interact with forms through named controls. A control's "control name" is given by its name attribute.
• Each control has both an initial value and a current value, both of which are character strings. A control's "initial value" may be specified with the control element's value attribute. The control's "current value" is first set to the initial value. Thereafter, the control's current value may be modified through user interaction and scripts.
• When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form.

Control Types

Here are some of the control types defined in HTML:

buttons

Authors may create three types of buttons: submit buttons, reset buttons, and push buttons.

checkboxes

Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. Several checkboxes in a form may share the same control name.

radio buttons

Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".

menus

Menus offer users options from which to choose.

text input

Authors may create two types of controls that allow users to input text. The input element creates a single-line input control and the textarea element creates a multi-line input control.

file select

This control type allows the user to select files so that their contents may be submitted with a form.

HTML Form: An Example

The following HTML markup:

  <form action="http://somesite.com/prog/adduser" method="post">
    <p>
    <label for="firstname">First name: </label>
              <input type="text" id="firstname"/><br/>
    <label for="lastname">Last name: </label>
              <input type="text" id="lastname"/><br/>
    <label for="email">email: </labelL>
              <input type="text" id="email"/><br/>
    <input type="radio" name="sex" value="Male"/>Male<br/>
    <input type="radio" name="sex" value="Female"/>Female<br/>
    <input type="submit" value="Send" /> <input type="reset" />
    </p>
 </form>

describes the following form:

A Form with A textarea Element

The following HTML markup:

<form action="http://somesite.com/prog/text-read" method="post">
   <p>
   <textarea name="thetext" rows="10" cols="40">
   First line of initial text.
   Second line of initial text.
   </textarea>
   <input type="submit" value="Send"/><input type="reset"/>
   </p>
</form>

describes the following form:

Yet Another Form

The following HTML markup:

<form action="http://pomelo.iis.sinica.edu.tw/~trc/play/xslt/transform.php" method="get">
        <p>
	<label>Fetch RSS feed from </label>
	<input type="text" name="site" size="60" value="http://rss.slashdot.org/Slashdot/slashdot"/>.
        <br/>

	<label>Transform the RSS feed into the </label>
  	<select name="xsl">
	<option value="story.xsl"    selected="selected" >full story</option>
	<option value="headline.xsl"                     >headline</option>
	</select> 
        form at the
	<input type="radio" name="method" value="client"/>client side
	<input type="radio" name="method" value="server" checked ="checked"/>server side.<br/>

	<label>Color it </label>
   	<select name="color">
	<option value="blue"  selected="selected" >blue</option>
	<option value="pink"                      >pink</option>
	</select>!<br/><br/>
	
	<input type="submit" value="Do It Now"/>
	</p>
</form>

describes the following form:

Form Submission

The following request is sent out by the browser:

http://pomelo.iis.sinica.edu.tw/~trc/play/xslt/transform.php?site=http://rss.slashdot.org/Slashdot/slashdot&xsl=story.xsl&method=server&color=blue

when the following HTML form is submitted with the initial values:

<form action="http://pomelo.iis.sinica.edu.tw/~trc/play/xslt/transform.php" method="get">
        <p>
	<label>Fetch RSS feed from </label>
	<input type="text" name="site" size="60" value="http://rss.slashdot.org/Slashdot/slashdot"/>.
        <br/>

	<label>Transform the RSS feed into the </label>
  	<select name="xsl">
	<option value="story.xsl"    selected="selected" >full story</option>
	<option value="headline.xsl"                     >headline</option>
	</select> 
        form at the
	<input type="radio" name="method" value="client"/>client side
	<input type="radio" name="method" value="server" checked ="checked"/>server side.<br/>

	<label>Color it </label>
   	<select name="color">
	<option value="blue"  selected="selected" >blue</option>
	<option value="pink"                      >pink</option>
	</select>!<br/><br/>
	
	<input type="submit" value="Do It Now"/>
	</p>
</form>

You can try it out here:

The Basics of Web Programming

To use the Web as platform to develop application programs, basically you need to know how to do the following:

• How to design a web page (i.e., an HTML document) to be loaded into a browser to guide a user on providing his/her input to your application program.
• How to write a program (sometimes called a "script") that resides at the web server to receive and process user input, and to generate output. Quite often the output of your program/script is again a web page to be sent to the user browser to prompt for more input.
• The simplest way is to design a web page with an HTML form for accepting user input and, in the same form, designating the URL of your program/script at the server side to process user input.
• The program/script at the server side often is written in a script language, such as PHP. The script can be thought as a kind of (programmable) web page templates.

XML in Web Programming

Why XML document processing is important in Web programming?

• The application program at the server side often processes data in XML-encoded documents.
• The input which user provides from the browser can be encoded in XML as well, or they can be URLs pointing to other XML documents on the web.
• In the so-called AJAX Web programming paradigm — AJAX stands for "Asynchronous JavaScript and XML" — the interaction between the client side and the server side in a Web application is mostly in XML.
• In this course, we will concentrate on Web applications where XML document transformation tools — XSLT programs, etc. — are used to prepare for an output XML document from an input XML document. (That is, no AJAX programming this time.)
• XML document styling, via CSS stylesheets for example, can be used to separate the presentation from the content of the output, which is a good thing.

Server-side or Client-side XSLT Processing?

When using XSLT to prepare for the output document in a Web application, we have two choices:

• Do it at the server side. The XSLT script is invoked at Web server to transform an XML document into an (HTML) document for sending to user browser.
  Pros: More flexibility at the server side on how the jobs shall be done.
  Cons: More server load, especially when repetitive jobs are requested.

• Do it at the client side. Although the XSLT script is located at the Web server, it is sent to the user browser along with the to-be-transformed XML document. The XSLT script is invoked by user browser to produce an (HTML) document for rendering.
  Pros: Less server load.
  Cons: Shift performance loading to the client side. Not all user browsers support XSLT. Less flexibility at the server side on how the jobs shall be done.

Let's do it both ways!

Example: RSS 1.0 to HTML Transformations

The user provides an RSS 1.0 feed address and specifies how news items in the feed shall be prepared and presented.

• Visit the live link: http://pomelo.iis.sinica.edu.tw/~trc/play/xslt/.
• Study the code: xslt.tgz.
• You need to know a little bit about RDF Site Summary (RSS) 1.0:
  Link: http://web.resource.org/rss/1.0/spec
• You also need to know some PHP: Hypertext Preprocessor:
  Link: http://www.php.net/

RSS 1.0

RSS 1.0 can be thought as RSS 0.93 with namespace support. The following three modules are often used: Dublin Core, Syndication, and Content

The following is a basic RSS 1.0 (0.9-like) document, making use of only the core RSS 1.0 element set.

<?xml version="1.0"?>

<rdf:RDF 
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns="http://purl.org/rss/1.0/"
>

  <channel rdf:about="http://www.xml.com/xml/news.rss">
    <title>XML.com</title>
    <link>http://xml.com/pub</link>
    <description>
      XML.com features a rich mix of information and services 
      for the XML community.
    </description>

    <image rdf:resource="http://xml.com/universal/images/xml_tiny.gif" />

    <items>
      <rdf:Seq>
        <rdf:li resource="http://xml.com/pub/2000/08/09/xslt/xslt.html" />
        <rdf:li resource="http://xml.com/pub/2000/08/09/rdfdb/index.html" />
      </rdf:Seq>
    </items>

    <textinput rdf:resource="http://search.xml.com" />

  </channel>
  
  <image rdf:about="http://xml.com/universal/images/xml_tiny.gif">
    <title>XML.com</title>
    <link>http://www.xml.com</link>
    <url>http://xml.com/universal/images/xml_tiny.gif</url>
  </image>
  
  <item rdf:about="http://xml.com/pub/2000/08/09/xslt/xslt.html">
    <title>Processing Inclusions with XSLT</title>
    <link>http://xml.com/pub/2000/08/09/xslt/xslt.html</link>
    <description>
     Processing document inclusions with general XML tools can be 
     problematic. This article proposes a way of preserving inclusion 
     information through SAX-based processing.
    </description>
  </item>
  
  <item rdf:about="http://xml.com/pub/2000/08/09/rdfdb/index.html">
    <title>Putting RDF to Work</title>
    <link>http://xml.com/pub/2000/08/09/rdfdb/index.html</link>
    <description>
     Tool and API support for the Resource Description Framework 
     is slowly coming of age. Edd Dumbill takes a look at RDFDB, 
     one of the most exciting new RDF toolkits.
    </description>
  </item>

  <textinput rdf:about="http://search.xml.com">
    <title>Search XML.com</title>
    <description>Search XML.com's XML collection</description>
    <name>s</name>
    <link>http://search.xml.com</link>
  </textinput>

</rdf:RDF>

More RSS 1.0 Example

The following is an RSS 1.0 document pulling in elements from various modules (highlighted in different colors). Note: the modules in this example are for illustrative purposes only; refer to RSS 1.0 Modules for consummate module information.

<?xml version="1.0" encoding="utf-8"?> 

<rdf:RDF 
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:co="http://purl.org/rss/1.0/modules/company/"
  xmlns:ti="http://purl.org/rss/1.0/modules/textinput/"
  xmlns="http://purl.org/rss/1.0/"
> 

  <channel rdf:about="http://meerkat.oreillynet.com/?_fl=rss1.0">
    <title>Meerkat</title>
    <link>http://meerkat.oreillynet.com</link>
    <description>Meerkat: An Open Wire Service</description>

    <dc:publisher>The O'Reilly Network</dc:publisher>
    <dc:creator>Rael Dornfest (mailto:rael@oreilly.com)</dc:creator>
    <dc:rights>Copyright &#169; 2000 O'Reilly &amp; Associates, Inc.</dc:rights>
    <dc:date>2000-01-01T12:00+00:00</dc:date>
    <sy:updatePeriod>hourly</sy:updatePeriod>
    <sy:updateFrequency>2</sy:updateFrequency>
    <sy:updateBase>2000-01-01T12:00+00:00</sy:updateBase>

    <image rdf:resource="http://meerkat.oreillynet.com/icons/meerkat-powered.jpg" />

    <items>
      <rdf:Seq>
        <rdf:li resource="http://c.moreover.com/click/here.pl?r123" />
      </rdf:Seq>
    </items>

    <textinput rdf:resource="http://meerkat.oreillynet.com" />

  </channel>

  <image rdf:about="http://meerkat.oreillynet.com/icons/meerkat-powered.jpg">
    <title>Meerkat Powered!</title>
    <url>http://meerkat.oreillynet.com/icons/meerkat-powered.jpg</url>
    <link>http://meerkat.oreillynet.com</link>
  </image>

  <item rdf:about="http://c.moreover.com/click/here.pl?r123">
    <title>XML: A Disruptive Technology</title> 
    <link>http://c.moreover.com/click/here.pl?r123</link>
    <dc:description>
      XML is placing increasingly heavy loads on the existing technical
      infrastructure of the Internet.
    </dc:description>
    <dc:publisher>The O'Reilly Network</dc:publisher>
    <dc:creator>Simon St.Laurent (mailto:simonstl@simonstl.com)</dc:creator>
    <dc:rights>Copyright &#169; 2000 O'Reilly &amp; Associates, Inc.</dc:rights>
    <dc:subject>XML</dc:subject>
    <co:name>XML.com</co:name>
    <co:market>NASDAQ</co:market>
    <co:symbol>XML</co:symbol>
  </item> 

  <textinput rdf:about="http://meerkat.oreillynet.com">
    <title>Search Meerkat</title>
    <description>Search Meerkat's RSS Database...</description>
    <name>s</name>
    <link>http://meerkat.oreillynet.com/</link>
    <ti:function>search</ti:function>
    <ti:inputType>regex</ti:inputType>
  </textinput>

</rdf:RDF>