PHP (PHP Hypertext Preprocessor)

Thursday, August 11, 2011

AJAX Poll

The following example will demonstrate a poll where the result is shown without reloading.

Do you like PHP and AJAX so far?

Example Explained - The HTML Page

When a user choose an option above, a function called "getVote()" is executed. The function is triggered by the "onclick" event:

Do you like PHP and AJAX so far?

Yes:

No:

The getVote() function does the following:

Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (vote) is added to the URL (with the value of the yes or no option)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "poll_vote.php":

Result:

Yes:

%

No:

%

The value is sent from the JavaScript, and the following happens:

Get the content of the "poll_result.txt" file
Put the content of the file in variables and add one to the selected variable
Write the result to the "poll_result.txt" file
Output a graphical representation of the poll result

The Text File

The text file (poll_result.txt) is where we store the data from the poll.

It is stored like this:

0||0

The first number represents the "Yes" votes, the second number represents the "No" votes.

Note: Remember to allow your web server to edit the text file. Do NOT give everyone access, just the web server (PHP).

PHP Example - AJAX RSS Reader

An RSS Reader is used to read RSS Feeds.

Example Explained - The HTML Page

When a user selects an RSS-feed in the dropdown list above, a function called "showResult()" is executed. The function is triggered by the "onchange" event:

RSS-feed will be listed here...

The showResult() function does the following:

Check if an RSS-feed is selected
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getrss.php":

load($xml);

//get elements from ""

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);

$channel_title = $channel->getElementsByTagName('title')

->item(0)->childNodes->item(0)->nodeValue;

$channel_link = $channel->getElementsByTagName('link')

->item(0)->childNodes->item(0)->nodeValue;

$channel_desc = $channel->getElementsByTagName('description')

->item(0)->childNodes->item(0)->nodeValue;

//output elements from ""

echo("" . $channel_title . "");

echo("
");

echo($channel_desc . "
");

//get and output "" elements

$x=$xmlDoc->getElementsByTagName('item');

for ($i=0; $i<=2; $i++)

  {

  $item_title=$x->item($i)->getElementsByTagName('title')

  ->item(0)->childNodes->item(0)->nodeValue;

  $item_link=$x->item($i)->getElementsByTagName('link')

  ->item(0)->childNodes->item(0)->nodeValue;

  $item_desc=$x->item($i)->getElementsByTagName('description')

  ->item(0)->childNodes->item(0)->nodeValue;

  echo ("" . $item_title . "");

  echo ("
");

  echo ($item_desc . "
");

  }

?>

When an RSS-feed is sent from the JavaScript, the following happens:

Check which feed was selected
Create a new XML DOM object
Load the RSS document in the xml variable
Extract and output elements from the channel element
Extract and output elements from the item element

PHP Example - AJAX Live Search

AJAX can be used to create more user-friendly and interactive searches.

AJAX Live Search

The following example will demonstrate a live search, where you get search results while you type.

Live search has many benefits compared to traditional searching:

Results are shown as you type
Results narrow as you continue typing
If results become too narrow, remove characters to see a broader result

Example Explained - The HTML Page

When a user types a character in the input field above, the function "showResult()" is executed. The function is triggered by the "onkeyup" event:

Source code explanation:

If the input field is empty (str.length==0), the function clears the content of the livesearch placeholder and exits the function.

If the input field is not empty, the showResult() function executes the following:

Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the input field)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "livesearch.php".

The source code in "livesearch.php" searches an XML file for titles matching the search string and returns the result:

load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL

$q=$_GET["q"];

//lookup all links from the xml file if length of q>0

if (strlen($q)>0)

{

$hint="";

for($i=0; $i<($x->length); $i++)

  {

  $y=$x->item($i)->getElementsByTagName('title');

  $z=$x->item($i)->getElementsByTagName('url');

  if ($y->item(0)->nodeType==1)

    {

    //find a link matching the search text

    if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))

      {

      if ($hint=="")

        {

        $hint="" .

        $y->item(0)->childNodes->item(0)->nodeValue . "";

        }

      else

        {

        $hint=$hint . "
" .

        $y->item(0)->childNodes->item(0)->nodeValue . "";

        }

      }

    }

  }

}

// Set output to "no suggestion" if no hint were found

// or to the correct values

if ($hint=="")

  {

  $response="no suggestion";

  }

else

  {

  $response=$hint;

  }

//output the response

echo $response;

?>

If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

Load an XML file into a new XML DOM object
Loop through all elements to find matches from the text sent from the JavaScript</li><li>Sets the correct url and title in the "$response" variable. If more than one match is found, all matches are added to the variable</li><li>If no matches are found, the $response variable is set to "no suggestion"</li></ul></span></div>

PHP Example - AJAX and XML

AJAX can be used for interactive communication with an XML file.

Example Explained - The HTML Page

When a user selects a CD in the dropdown list above, a function called "showCD()" is executed. The function is triggered by the "onchange" event:

Select a CD:

CD info will be listed here...

The showCD() function does the following:

Check if a CD is selected
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getcd.php".

The PHP script loads an XML document, "cd_catalog.xml", runs a query against the XML file, and returns the result as HTML:

load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)

{

//Process only element nodes

if ($x->item($i)->nodeType==1)

  {

  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)

    {

    $y=($x->item($i)->parentNode);

    }

  }

}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)

{

//Process only element nodes

if ($cd->item($i)->nodeType==1)

  {

  echo("" . $cd->item($i)->nodeName . ": ");

  echo($cd->item($i)->childNodes->item(0)->nodeValue);

  echo("
");

  }

}

?>

When the CD query is sent from the JavaScript to the PHP page, the following happens:

PHP creates an XML DOM object
Find all elements that matches the name sent from the JavaScript
Output the album information (send to the "txtHint" placeholder)

PHP - AJAX and MySQL

AJAX can be used for interactive communication with a database.

Example Explained - The HTML Page

When a user selects a user in the dropdown list above, a function called "showUser()" is executed. The function is triggered by the "onchange" event:

Person info will be listed here.

The showUser() function does the following:

Check if a person is selected
Create an XMLHttpRequest object
Create the function to be executed when the server response is ready
Send the request off to a file on the server
Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The PHP File

The page on the server called by the JavaScript above is a PHP file called "getuser.php".

The source code in "getuser.php" runs a query against a MySQL database, and returns the result in an HTML table:

";

while($row = mysql_fetch_array($result))
{
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
echo "";
}
echo "

0

if (strlen($q) > 0)

  {

  $hint="";

  for($i=0; $i

Explanation: If there is any text sent from the JavaScript (strlen($q) > 0), the following happens:

Find a name matching the characters sent from the JavaScript
If no match were found, set the response string to "no suggestion"
If one or more matching names were found, set the response string to all these names
The response is sent to the "txtHint" placeholder

AJAX Introduction

AJAX is about updating parts of a web page, without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

How AJAX Works

AJAX

AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

XMLHttpRequest object (to exchange data asynchronously with a server)
JavaScript/DOM (to display/interact with the information)
CSS (to style the data)
XML (often used as the format for transferring data)

AJAX applications are browser- and platform-independent!

Thursday, August 11, 2011

PHP Example - AJAX Poll

AJAX Poll

Do you like PHP and AJAX so far?

Example Explained - The HTML Page

Do you like PHP and AJAX so far?

The PHP File

Result:

The Text File

PHP Example - AJAX RSS Reader

Example Explained - The HTML Page

The PHP File

PHP Example - AJAX Live Search

AJAX Live Search

Example Explained - The HTML Page

The PHP File

PHP Example - AJAX and XML

Example Explained - The HTML Page

The PHP File

PHP - AJAX and MySQL

Example Explained - The HTML Page

The PHP File

AJAX Introduction

What is AJAX?

How AJAX Works

AJAX is Based on Internet Standards