PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Cloning Google Suggest With Ajaxac

Beginning The Googlesuggestclonejax Application

Now we will create the skeleton GoogleSuggestCloneJax application. At this stage we will only create the class, and integrate the class into our index.php file. Following this we make the actual application start to work.

To start our class, put the following code in GoogleSuggestCloneJax.class.php. You will need to make sure the AjaxAC code is available from within your include_path.

Listing 3 listing-3.php
<?php
    require_once('AjaxACApplication.class.php');
 
    class GoogleSuggestCloneJax extends AjaxACApplication
    {
        function GoogleSuggestCloneJax()
        {
            parent::AjaxACApplication();
        }
    }
?>

Widgets

AjaxAC has the concept of widgets. A widget is the name given to certain types of objects in AjaxAC. They could loosely be called “HTML objects”, as a widget will generally (but not always) correspond to a HTML element.

At the time of writing this article, AjaxAC has 3 types of widgets:

  • Widget – this is the base type of widget, which is how we treat HTML elements that interact with our application.
  • XMLHttpRequest widget – this widget deals with HTTP subrequests
  • Timer widget – this widgets allow timing capabilities to occur (e.g. perform action X after Y seconds)

Relating this back to our Google Suggest clone, the text input box is a widget, as is the search-results div where results are output. Additionally, we use an XMLHttpRequest widget to fetch the search suggestions, and a timer widget so suggestions are fetched only after a delay.

Calling our application from index.php

Now that we have our application skeleton, we can reference it from our index.php. Additionally, we will attach our widgets, which we established in the previous section.

Once we create our application, we also call the handleRequest() method. This is to handle HTTP subrequests. In this case, this will be the requests to fetch the search autocomplete results. It also handles the requests to output JavaScript code.

The other things we do are:

  1. Include the AjaxAC core JavaScript code
  2. Attach widgets to HTML elements
  3. Include the application JavaScript code (this is done last)

So to achieve this, our index.php now looks like this:

Listing 4 listing-4.php
<?php
    require_once('GoogleSuggestCloneJax.class.php');
 
    $ajax = new GoogleSuggestCloneJax();
    $ajax->handleRequest();
?>
<html>
    <head>
        <title>phpRiot Tutorial: GoogleSuggestClone</title>
        <?= $ajax->loadJsCore(true) ?>
    </head>
    <body>
        <form method="get" id="f">
            <input type="text" name="q" id="fq" />
            <input type="submit" value="Search" id="fs" />
            <div id="search-results">
                <div class="sr">
                    <div class="srt">google</div>
                    <div class="src">155,000,000 results</div>
                </div>
                <div class="srs">
                    <div class="srt">google.com</div>
                    <div class="src">1 result</div>
                </div>
            </div>
        </form>
        <?= $ajax->attachWidgets(array('query'   => 'fq',
                                       'results' => 'search-results')) ?>
 
        <?= $ajax->loadJsApp(true) ?>
    </body>
</html>

In fact, to create the application, we create a new GoogleSuggestClonJax object. At this stage there are no configuration options we are passing to the application.

You’ll note we used attachWidgets(). If we were only attaching one widget we could use attachWidget() instead.

attachWidget() takes two arguments: the first is the internal AjaxAC application name, and the second is the ID of the HTML element.

attachWidgets() takes an array as argument. A single element is a single attachment, the key being the internal application name while the value is the HTML ID.

We will create the actual widgets in the application later on in this article.

This is basically now the index.php file taken care of. We will still make a few minor changes to the file but most of it is now out of the way.

Next is to focus on developing the GoogleSuggestCloneJax application and its associated JavaScript!

In This Article