Wordpress and HTML_AJAX

The Application

Ajax Stock Quote Lookup for Wordpress.

• View the demo »
• Download the source

Update: If you’re planning on using this tutorial with PHP5 please refer to Joshua Eichorn’s website for the required changes.

Install required packages

Assuming that you’re familiar with installing Pear packages, issue the follow command to install the package. If you’re not familiar will Pear you should refer to the website before reading on.

To install HTML_AJAX:

$ pear install html_ajax

To install SOAP:

$ pear install soap

Create your Wordpress Plugin

I always begin by creating a folder for my plugin in the wp-content/plugins/ directory and placing the core plugin file in there. For this example we will create a folder called tm_ajaxstockquote/, and in it create an empty file called tm_ajaxstockquote.php.

You directory structure should look something like the following.

Place the required plugin comments at the top of your new file.

/*
Plugin Name: Ajax Stock Quote
Plugin URI: http://www.versiontwo.com.au/projects/wordpress/tm_ajaxstockquote
Description: Displays stock quote information for specified symbol
Author: Troy Mcilvena
Version: Demo
Author URI: http://www.troymcilvena.com
*/

Create your plugin’s core function. This is the function that will be called from your template to initiate it.

class TM_AJAXStockQuote {
    function run() {
        // Application code goes here
        echo 'The Ajax stock quote plugin';
    }
}

I generally like to have a skeleton plugin setup and working in a test site during development to assist with testing and debugging. If you choose do this, I suggest you do it at this point. We’ll leave our plugin for the time begin and come back to it later. Next we’ll move on to our stock quote model.

The Model

To obtain the stock quote information we will be using a SOAP webservice. I find the PEAR SOAP package to be as easy to use as any other for PHP4. PHP5 has native SOAP support which I would suggest using if you will be running your plugin on PHP5 only.

The webservice will return the result as XML. For us to use this in the site, we must transform it to xhtml. We do this using the xslt extension in PHP (You will need to ensure that your server supports this extension).

The stock quote class:

<?php
    class StockQuote {
        function GetQuote($strSymbol) {
            // Include the PEAR SOAP Client
            include_once('SOAP/Client.php');

            // Create new soap client from webservice's WSDL
            $objWsdl = new SOAP_WSDL('http://www.webservicex.net/stockquote.asmx?WSDL');
            $objClient = $objWsdl->getProxy(); 

            // Call the webservice and obtain the xml result
            $xmlQuote = $objClient->GetQuote($strSymbol);

            // Tranformation - We will create quote.xsl next.
            return $this->transform($xmlQuote, 'quote.xsl');
        }

        function transform($xmlQuote, $fileXsl) {
            // When using xml as a string (not a file) you must provide it as an argument
            $arguments = array('/_xml' => $xmlQuote);

            // Create XSL handler
            $xh = xslt_create();
            // Process transformation
            $result = xslt_process($xh, 'arg:/_xml', $fileXsl, NULL, $arguments);

            if($result) {
                return $result;
            }
            else {
                return 'An error occured transforming the Stock Quote: ('. xslt_errno($xh) .') '. xslt_error($xh);
            }
         }
    }
?>

Save this file as stockquote.php in your plugin’s folder.

The Transformation

To complete the transformation of the XML, we must process it against a corresponding XSL Style Sheet.

The XML returned from the webservices looks like:

<StockQuotes>
    <Stock>
        <Symbol>AAPL</Symbol>
        <Last>75.42</Last>
        <Date>2/1/2006</Date>
        <Time>4:00pm</Time>
        <Change>0.00
        </Change>
        <Open>N/A</Open>
        <High>N/A</High>
        <Low>N/A</Low>
        <Volume>0</Volume>
        <MktCap>63.561B</MktCap>
        <PreviousClose>75.42</PreviousClose>
        <PercentageChange>0.00%</PercentageChange>
        <AnnRange>33.11 - 86.40</AnnRange>
        <Earns>1.558</Earns>
        <P-E>48.41</P-E>
        <Name>APPLE COMPUTER</Name>
    </Stock>
</StockQuotes>

The XSL Style Sheet:

The purpose of this XSL Stylesheet is to format the result into a nice friendly table.

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method = "html" encoding="ISO-8859-1" />
    <xsl:template match="/">
        <xsl:choose>
            <xsl:when test="//Time = 'N/A'">
                <p>Could not find company with symbol "<xsl:value-of select="//Symbol"/>"</p>
            </xsl:when>
            <xsl:otherwise>
                <table>
                    <tr><th colspan="7"><strong><xsl:value-of select="//Name"/></strong> (<xsl:value-of select="//Symbol"/>)</th></tr>
                    <tr>
                        <th>Open</th><th>Last</th><th>High</th><th>Low</th><th>Vol.</th><th>Prev.</th><th>Change</th>
                    </tr>
                    <tr>
                        <td><xsl:value-of select="//Open"/></td><td><xsl:value-of select="//Last"/></td><td><xsl:value-of select="//High"/></td><td><xsl:value-of select="//Low"/></td><td><xsl:value-of select="//Volume"/></td><td><xsl:value-of select="//PreviousClose"/></td><td><xsl:value-of select="//Change"/> (<xsl:value-of select="//PercentageChange"/>)</td>
                    </tr>
                    <tr><td colspan="7">Last Updated: <xsl:value-of select="//Date"/>   <xsl:value-of select="//Time"/></td></tr>
                </table>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
</xsl:stylesheet>

Save your XSL style sheet as quote.xsl in your plugin folder.

The HTML_AJAX Server

The HTML_AJAX server acts as the glue between our Model and our Plugin.

<?php
    // Include the HTML_AJAX server
    require_once('HTML/AJAX/Server.php');
    // Include our stockquote model
    require_once('stockquote.php');

    // Create the HTML_AJAX Server
    $objServer = new HTML_AJAX_Server();

    // Create an instance of our stock quote class
    $objStockLookup = new StockQuote();

    // Register the stock quote object with the HTML_AJAX server
    $objServer->registerClass($objStockLookup);

    // Handle the AJAX Request
    $objServer->handleRequest();
?>

Save this file as server.php in your plugin folder

Completing the Plugin

<?php
/*
Plugin Name: Ajax Stock Quote
Plugin URI: http://www.versiontwo.com.au/projects/wordpress/tm_ajaxstockquote
Description: Displays stock quote information for specified symbol
Author: Troy Mcilvena
Version: Demo
Author URI: http://www.troymcilvena.com
*/ 

    class TM_AJAXStockQuote    {
        function run() {
            echo "<script src=\"". get_bloginfo('url') ."/wp-content/plugins/tm_ajaxstockquote/server.php?client=all&stub=stockquote\" type=\"text/javascript\"></script>
            <script type=\"text/javascript\">
                var sqCallBack = {
                    getquote: function(result) {
                        document.getElementById('response').innerHTML = result;
                    }
                }

                var remoteStockQuote = new stockquote(sqCallBack);

                function do_getQuote() {
                    remoteStockQuote.getquote(document.getElementById('symbol').value);
                    document.getElementById('symbol').value = '';
                }
            </script>
            <form onsubmit=\"do_getQuote(); return false;\" method=\"get\">
                <p>Symbol: <input type=\"text\" id=\"symbol\" /> <input type=\"submit\" value=\"Submit\" /></p>
                <div id=\"response\"></div>
            </form>";
        }
    }

?>

For more information

1. HTML_AJAX on PEAR
2. SOAP on PEAR
3. Wordpress Plugin API