Working with PHP-Based Frameworks
One of the most popular server-side scripting languages is PHP. It is especially suited for Web development and can be embedded in to HTML.
Using Sajax and PHP
Sajax is a server-side Ajax framework that lets you create the JavaScript needed in an Ajax application on the server. All you need is server-side code, which can be in many different programming languages, including ASP, ColdFusion, Io, Lua, Perl, PHP, Python, or Ruby. Sajax works with all of them.
| On the Web | You can get Sajax for free at http://www.modernmethod.com/sajax/. All you have to do is download the latest version of Sajax and place it on your server. |
Here is how Sajax works: you use it to create JavaScript functions in your Web pages. Sajax can connect those JavaScript functions to code you write for server-side programs. The JavaScript that Sajax creates for you takes the data entered in the Web page and sends it to your server-side code to be processed.
So when the user navigates to a PHP-based Web page that uses Sajax, Sajax creates that Web page on the server and creates all the JavaScript needed to connect your client-side code to code on the server. For example, if you have a PHP function named adder on the server, Sajax can create the JavaScript needed to pass the data the user enters in a Web page to that function on the server.
Because Sajax creates the JavaScript for your application, you only need to write a little JavaScript yourself. Sajax handles the connection between the Web page and the code on the server by itself, sending the data to the server-side code and reading the results that code passes back to the browser.
For example, take a look at the Web page shown in Figure 7.1, which uses the Sajax framework. When you click the Add button in this example, the two numbers in the text fields are added and the results are displayed, as you see in the figure.
Figure 7.1: Adding two numbers with the Sajax Ajax framework
How does this example work? It starts in PHP in the file adder.php, where you include Sajax support by requiring the Sajax.php file:
<? require("Sajax.php"); . . . ?> | Cross-Ref | Take a look at Chapter 11 for an introduction to PHP. (Don’t worry, you won’t need to know much PHP to work through the examples in this chapter.) |
This example creates a server-side PHP function named adder that adds the two values together and returns the result. You pass the two operands to add to this function:
<? require("Sajax.php"); function adder($operand1, $operand2) { . . . } ?> The adder function adds the two operands and returns the result to create the adder function:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } ?> How do you connect this function to client-side code in the browser so that the user can add numbers? You start by calling the sajax_init function to set up Sajax:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); . . . ?> then you export the adder function, making it available to your Web pages, using the sajax_export function:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); . . . ?> The code then calls the sajax_handle_client_request method to connect the adder function to Sajax and start setting up the JavaScript that will appear in the browser:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); sajax_handle_client_request(); ?> How does the adder function get connected to JavaScript in your Web page? Start the HTML portion of this page with a <script> element:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); sajax_handle_client_request(); ?> <html> <head> <title>Using the Sajax server-side framework</title> <script> . . . then insert some PHP inside the <script> element, which is done by adding a call to the Sajax sajax_show_javascript function like this:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); sajax_handle_client_request(); ?> <html> <head> <title>Using the Sajax server-side framework</title> <script> <? sajax_show_javascript(); ?> . . . This call causes Sajax to write the JavaScript needed to connect to the adder function on the server.
It’s time to supply the adder function with some data. As you see in Figure 7.1, this application displays two text fields to let the user enter the numbers to add; here’s what they look like in HTML:
<body> <center> <h1>Using the Sajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3"> + <input type="text" name="operand2" value="5" size="3"> = . . . </center> </body>
You’ll need a text field in which to display the answer, and that text field is called result in this example:
<body> <center> <h1>Using the Sajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3"> + <input type="text" name="operand2" value="5" size="3"> = <input type="text" name="result" value="" size="3"> . . . </center> </body>
Finally, you can write the HTML Add button that sends the numbers to the adder function on the server. That button is tied to a JavaScript function named do_adder in this example:
<body> <center> <h1>Using the Sajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3"> + <input type="text" name="operand2" value="5" size="3"> = <input type="text" name="result" value="" size="3"> <input type="button" name="check" value="Add" onclick="do_adder(); return false;"> </center> </body>
When the user clicks the Add button, the do_adder function is called; in that function, the two operands to add are stored in the variables operand1 and operand2:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } . . . ?> <html> <head> <title>Using the Sajax server-side framework</title> <script> <? sajax_show_javascript(); ?> function do_adder() { var operand1, operand2; operand1 = document.getElementById("operand1").value; operand2 = document.getElementById("operand2").value; . . . } </script> </head> How do you actually pass those operands to the adder function on the server? Call a function named x_adder, which is the name Sajax has given the PHP function in JavaScript, like this:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); sajax_handle_client_request(); ?> <html> <head> <title>Using the Sajax server-side framework</title> <script> <? sajax_show_javascript(); ?> function do_adder() { var operand1, operand2; operand1 = document.getElementById("operand1").value; operand2 = document.getElementById("operand2").value; x_adder(operand1, operand2, show_results); } </script> </head> Note how this works: you pass the two operands that will be passed to the PHP adder function on the server, and a function, show_results, that will be passed the value returned by the adder function. All that’s left is to create the show_results function. In this function, you can simply display the sum in the results text field like this:
<? require("Sajax.php"); function adder($operand1, $operand2) { return $operand1 + $operand2; } sajax_init(); sajax_export("adder"); sajax_handle_client_request(); ?> <html> <head> <title>Using the Sajax server-side framework</title> <script> <? sajax_show_javascript(); ?> function show_results(result) { document.getElementById("result").value = result; } function do_adder() { var operand1, operand2; operand1 = document.getElementById("operand1").value; operand2 = document.getElementById("operand2").value; x_adder(operand1, operand2, show_results); } </script> </head> And there you have it. You pass the numbers to add to the x_adder function, and they’re passed to the PHP adder function on the server. The sum is passed back to the callback function show_results.
| Note | Sajax is for more than simple Ajax downloading. Take a look at http://cyberdummy.co.uk/test/dd.php, which you see in Figure 7.2. In this example Sajax is used to support Ajax-enabled dragging and dropping. |
Figure 7.2: Dragging and dropping with Sajax
Using Xajax and PHP
Similar to Sajax, Xajax is a server-side Ajax framework that can use PHP on the server to support Ajax in browsers. In contrast to using Sajax, which enables you to use several different programming languages, you need to use PHP to work with Xajax.
| On the Web | You can pick up Xajax at http://xajax.sf.net. |
Take a look at the Web page in Figure 7.3, which uses the Xajax server-side framework to add two numbers. When the user clicks the Add button, the two numbers are passed to the server using Ajax techniques, and the sum is sent back to the browser, to be displayed in the third text field, as you see in the figure.
Figure 7.3: Using the Xajax framework to add numbers
How does this Web page work? You start with PHP, requiring the xajax.inc.php library:
<?php require("xajax.inc.php"); . . . ?> Next, you can create the PHP adder function, which adds two operands passed to it:
<?php require("ajax.inc.php"); function adder($operand1, $operand2) { . . . } ?> To return a result back to the browser in Xajax, you need an XajaxResponse object, so you start the adder function by creating that object, $response:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); . . . } ?> To add a result to the $response object, you use the object’s addAssign method. You pass this method the ID of the HTML control that should hold the answer, the HTML property of that control that should be used to store the answer, and the value to display. Because the answer should appear in a text field that will be called result, and you use a text field’s value property to display text, here’s how you pass the sum of the two operands back to the browser:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); . . . } ?> Having primed the $response object, you return its results in XML format, and you can get that XML using the $response object’s getXML method, so here’s how you return the result to the browser:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); return $response->getXML(); } ?> Now you’ve got to register the new adder function with Xajax. To do that, create a new Xajax object named $xajax:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); return $response->getXML(); } $xajax = new xajax(); . . . ?> then register the adder function with the $xajax object:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); return $response->getXML(); } $xajax = new xajax(); $xajax->registerFunction("adder"); . . . ?> To tell Xajax to connect to JavaScript in the Web page, use the Xajax method processRequests like this:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); return $response->getXML(); } $xajax = new xajax(); $xajax->registerFunction("adder"); $xajax->processRequests(); ?> You’re almost done with the PHP. All that remains is to call the PHP printJavascript method inside the <head> element of the page to allow Xajax to write the JavaScript that connects your Web page with the server:
<?php require("xajax.inc.php"); function adder($operand1, $operand2) { $response = new xajaxResponse(); $response->addAssign("result", "value", $operand1 + $operand2); return $response->getXML(); } $xajax = new xajax(); $xajax->registerFunction("adder"); $xajax->processRequests(); ?> <html> <head> <title>Using the Xajax server-side framework</title> <?php $xajax->printJavascript(); ?> </head> . . . The HTML in the page creates the two text fields that will hold the numbers to add:
<body> <center> <h1>Using the Xajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3" /> + <input type="text" name="operand2" value="5" size="3" /> = . . . </body>
You’ve already told Xajax to display the answer in a text field named result, so you’ll need that text field as well:
<body> <center> <h1>Using the Xajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3" /> + <input type="text" name="operand2" value="5" size="3" /> = <input type="text" name="result" value="" size="3" /> . . . </body>
Finally, you can add a button connected to a JavaScript function named useAjax that will be called when the user clicks that button:
<body> <center> <h1>Using the Xajax server-side framework</h1> <input type="text" name="operand1" value="4" size="3" /> + <input type="text" name="operand2" value="5" size="3" /> = <input type="text" name="result" value="" size="3" /> <input type="button" value="Add" onclick="useXajax();return false;" /> </body>
Here’s where the connection to the server is. Xajax has created a JavaScript function named xajax_adder that calls the PHP adder function on the server. All you have to do is pass the two operands to add to xajax_adder like this in useXAjax, which is called when the user clicks the Add button:
<html> <head> <title>Using the Xajax server-side framework</title> <?php $xajax->printJavascript(); ?> <script> function useXajax() { xajax_adder(document.getElementById('operand1').value, document.getElementById('operand2').value); } </script> </head> And there you have it. You’ve connected the adder function on the server to xajax_adder in the browser. Your Ajax application is ready to go.
Using LibAjax and PHP
LibAjax is a PHP-based server-side Ajax framework that works in a similar way to Sajax and Xajax. The details and syntax are different, but the main idea-that you write PHP on the server and allow the framework to generate JavaScript-should already be familiar to you.
| On the Web | You can get LibAjax for free from http://sourceforge.net/projects/ libajax. |
You can see LibAjax at work in Figure 7.4, where it’s adding numbers together for the user.
Figure 7.4: Using the LibAjax framework to add numbers
Here’s how it works. The LibAjax download includes the PHP support for the framework, libajax.php, and you include that in the PHP for the page, adder.php:
<?php require("libajax.php"); . . . ?> then you can write the PHP function that actually does the adding of the two operands, the adder function:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } ?> To connect this function to LibAjax, you create an Ajax object, $ajax:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } $ajax = new Ajax(); . . . ?> You can configure this object by setting its properties. For example, to set the HTTP method this example uses, set the mode property:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } $ajax = new Ajax(); $ajax->mode = "GET"; . . . ?> And you can export the adder function, making it available to your Web page; to export functions in LibAjax, you pass an array of those functions to the export method. In this case, the array contains only one function, the adder function:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } $ajax = new Ajax(); $ajax->mode = "GET"; $ajax->export = array("adder"); . . . ?> Now you let LibAjax take over. Call its client_request method to let it start handling client requests, like this:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } $ajax = new Ajax(); $ajax->mode = "GET"; $ajax->export = array("adder"); $ajax->client_request(); ?> To complete the PHP, call the $ajax object’s output method to write the JavaScript interface between server and browser:
<?php require("libajax.php"); function adder($operand1, $operand2) { print $operand1 + $operand2; } $ajax = new Ajax(); $ajax->mode = "GET"; $ajax->export = array("adder"); $ajax->client_request(); ?> <html> <head> <title>Using the LibAjax server-side framework</title> <script> <?php $ajax->output(); ?> . . . </script> | Note | The $ajax->output method is called inside a <script> element so that the JavaScript it writes can be executed by the browser. |
In the <body> element, add the HTML for the two text fields that will hold the numbers to add:
<body> <center> <h1>Using the LibAjax server-side framework</h1> <form> <input type="text" name="operand1" value="4" size="5"> + <input type="text" name="operand2" value="5" size="5"> = . . . </form> </center> </body>
And you can store the answer in a text field named result, as before:
<body> <center> <h1>Using the LibAjax server-side framework</h1> <form> <input type="text" name="operand1" value="4" size="5"> + <input type="text" name="operand2" value="5" size="5"> = <input type="text" name="result" value="" size="5"> . . . </form> </center> </body>
The Add button shown in Figure 7.4 is connected to a JavaScript function named useLibAjax:
<body> <center> <h1>Using the LibAjax server-side framework</h1> . . . <input type="text" name="result" value="" size="5"> <input type="button" name="check" value="Add" onclick="useLibAjax()"> </form> </center> </body>
In the useLibAjax method, you read the two numbers to be added, and pass them on to the JavaScript interface function that LibAjax has created, which is called ajax_adder. You also pass a callback function, called display here, which will be called with the sum of the two numbers:
<html> <head> <title>Using the LibAjax server-side framework</title> <script> <?php $ajax->output(); ?> function useLibAjax() { var operand1 = document.getElementById("operand1").value; var operand2 = document.getElementById("operand2").value; ajax_adder(operand1, operand2, display); } </script> </head> All that’s left is to add the display callback function:
<html> <head> <title>Using the LibAjax server-side framework</title> <script> <?php $ajax->output(); ?> function display(result) { document.getElementById("result").value = result; } function useLibAjax() { var operand1 = document.getElementById("operand1").value; var operand2 = document.getElementById("operand2").value; ajax_adder(operand1, operand2, display); } </script> </head> And that’s it. Your Ajax application is ready to go.
