476CHAPTER 12

Live search using XSLT

parameter instead of hard-coding the value into our LoadXMLXSLTDoc() function, we can reuse this function multiple times on the same page without having to add multiple functions or if statements to separate the functionality. Therefore, we redirect the output of different searches to different parts of the page. But before we do this, let’s look at how we build the XML and XSLT documents on the server.

12.3 The server-side code: PHP

In this section, we create the dynamic XML document for this project using the popular open source scripting language PHP (remember, Ajax is able to work with any server-side language or platform). The XML document is dynamically generated from the result set of a database query at the time of the client’s request. We also show how to create the static XSLT document, which resides on the server and is retrieved each time the dynamic file is requested. Both of these documents are sent back to the client separately when the ContentLoader requests each of them in two separate requests, as shown in listing 12.7. The XSLT transforms our dynamic XML document on the client and creates an HTML table that is displayed to the user.

12.3.1Building the XML document

Since we are using XSLT, we need a structured XML document that is just a simple listing of information, so the XSLT file can perform a basic transformation. For this project, we develop a dynamic XML file when the PHP file is requested from the client.

Designing the XML structure

Before we can start to build the XML file, we need to create a template for that file. The template should reflect the structure of the data returned by the search. For our address book example, we’ll return the company name, the name of a contact person, the country, and a phone number. Listing 12.3 shows our basic XML template containing the four fields.

Listing 12.3 Basic XML file

<?xml version="1.0" ?> <phonebook>

<entry>

<company>Company Name</company> <contact>Contact Name</contact> <country>Country Name</country> <phone>Phone Number</phone>

The server-side code: PHP	477

</entry>

</phonebook>

The first element is phonebook. The next one is the entry element, which contains the subelements that hold all the details that relate to each contact found in the query. If we have five results, there will be five entry elements in our XML document. The company name is displayed in the company element. We are also adding the contact name, the country name, and the phone number. We are not limited to just these fields; we can add and subtract fields depending on the information we want to display.

Instead of displaying an alert message to the user if results are not found, we can create an entry displaying that information to the user. This makes it easy for us to return the result to the user without having to add any extra client-side code. The code in listing 12.4 is almost the same as that in listing 12.3, but this time we are inserting text into the XML elements that we want to display to the user to show that no results were returned.

Listing 12.4 XML file with no results

<?xml version="1.0" ?>

<phonebook>				b Display “No Results”
<entry>
					for company name
<company>No Results</company>
<contact>N/A</contact>		c Display “N/A”
<country>N/A</country>			for remaining
<phone>N/A</phone>			fields
</entry>
</phonebook>

With this code, we display a single row to the user showing that there is no information. In the company tag b, we display a message to the user informing her that there were no results. In the other tags c, we are telling the user that there is no information. If we do not want to display “N/A”, we can add a nonbreaking space,  , instead, which allows the table cells to show up. If we were to not add any information, the cells would not appear in the table.

As you can see, the XML format has a very simple structure. If this XML file were static, it would be rather easy for any user to add a new customer to the file. Because we are creating it dynamically, we will have to create a loop, which builds our XML document from our result set.

Iterate through results

Populate query

c Connect to database

478CHAPTER 12

Live search using XSLT

Building the dynamic XML document

As always, we build our XML document on the server. Following our policy of using different server languages for our illustrations, we’ve implemented the server code for this chapter in PHP. Ajax can work with any server-side language, and the fine details of the server code aren’t important to our story here. Listing 12.5 shows the server-side code. The code obtains the querystring parameter and generates a result set of a database query. We then loop through the result set and create an entry in the XML file for each phone entry returned from the query, following our basic template (listing 12.4).

Listing 12.5 phoneXML.php: Server-side XML generation

<?php

header("Content-type: text/xml"); b Declare mime type echo("<?xml version='1.0' ?>\n");

$db = mysql_connect("localhost","ajax","action"); mysql_select_db("ajax",$db);

$result = mysql_query("SELECT * FROM Contacts WHERE ContactName like '%". $_GET['q']."%'",$db); d

?>

<phonebook>

<?

if ($myrow = mysql_fetch_array($result)) { e Test results do { f

?>

<entry id='<?=$myrow['id']?>001'> <company><?=$myrow['companyName']?></company> <contact><?=$myrow['contactName']?></contact> <country><?=$myrow['country']?></country> <phone><?=$myrow['phone']?></phone>

</entry>

<?

}while ($myrow = mysql_fetch_array($result));

}else{
?>	g Show empty dataset
<entry id='001'>

<company>No Results</company> <contact>N/A</contact> <country>N/A</country> <phone>N/A</phone>

</entry>

<?

}

?>

</phonebook>

The server-side code: PHP	479

In order for this dynamic XML document generation to work, we must set the document’s type to text/xml b; if we skip this step, the XSLT transformation may not take place, especially with Mozilla and Firefox.

The data that we are searching for is stored in a database table. We need to select the relevant entries. In this case, we are using PHP’s built-in MySQL functions to talk to the database directly, in order to keep things as simple as possible. We connect to the database ajax running on the local database server as the user ajax with password action c. We then construct our SQL query string using the request parameter passed in from the client code to populate the WHERE clause d.

For a more robust server-side implementation, we recommend an ObjectRelational Mapping system such as Pear DB_DataObject (see chapter 3) rather than talking directly to the database as we have done here. However, the current implementation is simple and can be easily configured by readers wanting to test the example for themselves. Having returned the result set, we check whether it is empty e, and then either iterate over it f to create the phone entries, or print out the “No Results” message g.

12.3.2Building the XSLT document

We can use XSLT to transform our XML file into a nice HTML table with only a few lines of code. The XSLT document allows for pattern matching if necessary to display the data in any format we want. The pattern matching uses a template to display the data. We loop through the source tree nodes with the XSLT to display the data. The XSLT takes the structured XML file and converts it into a viewable format that is easy to update and change. Our XSLT document will be defined statically.

Explaining the XSLT structure

An XSLT transformation contains the rules for transforming a source tree into a result tree. The whole XSLT process consists of pattern matching. When a pattern is matched against the source tree elements, the template then creates our result tree.

The result tree structure does not have to be related to the source tree structure. Since they can be different, we can take our XML file and convert it into any format we want. We are not required to stick with a tabular dataset.

This XSLT transformation is called a stylesheet since it styles the result tree. The stylesheet contains template rules, which have two parts. The first part is the pattern, which is matched against the nodes of the source tree. When a match is

480CHAPTER 12

Live search using XSLT

found, the XSLT processor uses the second part, the template, which contains the tags to build the source tree.

Building the XSLT document

Building the XSLT transformation for this project is rather simple. Since we are developing a table, we won’t need any special pattern matching; instead, we will loop through the source tree element nodes. The template that we’ll develop outputs an HTML table with four columns. Listing 12.6 shows the XSLT file for this project.

Listing 12.6 XSLT file

<?xml version="1.0" encoding="ISO-8859-1"?>				b Set XML version and encoding
<xsl:stylesheet version="1.0"
xmlns:xsl=				c Specify XSLT namespace
"http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">	d Set template rule
<table id="table1">	e Add table element
<tr>			f Create
<th align="left">Company</th>
<th align="left">Contact</th>				heading
<th align="left">Country</th>				row
<th align="left">Phone</th>
</tr>
<xsl:for-each		g Loop through phonebook entries
select="phonebook/entry">
<tr>
<td><xsl:value-of
select="company"/></td>			Output the
<td><xsl:value-of		h
select="contact"/></td>			entry data
<td><xsl:value-of
select="country"/></td>
<td><xsl:value-of
select="phone"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>

When we create an XSLT transformation, we need to state the version and encoding bof the XML. The XSLT namespace cneeds to be specified. The namespace gives the document the rules and specifications that it is expected to follow. The