Home > PHP

PHP

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

In the last AJAX tutorial I wrote about how to send requests to the server and receive the response,
in this short AJAX tutorial I will show you how to show a progress bar to the user when your application is
waiting for the server’s response, so your users will see something is actually happening

If you haven’t read the first AJAX tutorial, you’ll find it here:
http://blog.code-head.com/ajax-beginner-ajax-tutorial
It won’t take that long.

Here is the code that we have so far:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			document.getElementById('content').innerHTML = o.responseText;
		}
 
		function failure_handler(o) {
			document.getElementById('content').innerHTML = 'Server or your connection is death';
		}
 
		function send_request() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

To show a loading progress bar you need to get a progress bar image, you can get one by searching.

I will use this one:
AJAX progress Bar

Let’s begin

First let’s make our code a little bit nicer and make a new function called, replace_html

		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}

The way it works is that it receives two arguments:
‘id’ is the ID of the container where you want to replace the content
‘content’ is the new content to replace the old content

Now let’s rewrite our success_handler and failure_handler to use this function:

		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}

In success_handler for example, we call replace_html(‘content’, o.responseText); instead of directly
replacing the content of our ‘content’ DIV like: document.getElementById(‘content’).innerHTML = o.responseText;

Why?

First, because we don’t need to write document.getElementById(‘content’).innerHTML = … all over the place and
we encapsulate this into replace_html function.

Second this will centralize our way of changing the content of a DIV, so if later for example we
find a better way to replace a DIV’s content, then we will just change one function and we don’t need
to go through and find all the lines like: document.getElementById(‘content’).innerHTML = … and
change them.

Third, suppose you find out that on one kind of browser innerHTML doesn’t work, then again you
only need to change one function.

So far, all together we have this:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function send_request() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

For our progress bar to show up fast, we have to preload it first, here is a simple way of preloading our progress bar:

		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';

This piece of JavaScript code will make an image instance and sets it’s source attribute to our progress bar, this is enough
to force the browser to preload the progress bar in it’s cache.

To display this progress bar when we are waiting for the server’s response, let’s write another function show_progressbar

		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}

This function receives the ID of the container which we want to show our progress bar in and uses our replace_html
function to display the progress bar.
It simply replaces the content of that particular container with this bit of HTML code:

	<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />

Now we will have to change our send_request and test_failure to use this function and show a progress bar when they are
starting to send a request:

		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}

They simply call show_progressbar with the ID of our content DIV and then send their request to the server.

All together we have this code:

<html>
<head>
<title>Beginner AJAX Tutorial - Progress Bar</title>
 
	<script type="text/javascript" src="yahoo.js"> </script>
	<script type="text/javascript" src="event.js"> </script>
	<script type="text/javascript" src="connection.js"> </script>
 
	<script type="text/javascript">
		function success_handler(o) {
			replace_html('content', o.responseText);
		}
 
		function failure_handler(o) {
			replace_html('content', 'Server or your connection is death');
		}
 
		function replace_html(id, content) {
			document.getElementById(id).innerHTML = content;
		}
 
		function show_progressbar(id) {
			replace_html(id, '<img src="http://images.code-head.com/progress-bars/4.gif" border="0" alt="Loading, please wait..." />');
		}
 
		function send_request() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
		}
 
		function test_failure() {
			show_progressbar('content');
			var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
			YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
		}
 
		var progress_bar = new Image();
		progress_bar.src = 'http://images.code-head.com/progress-bars/4.gif';
	</script>
 
</head>
 
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
 
</div>
</body>
</html>

Go ahead and try it here:
http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial-progress-bar.html

This is it for now, on the next AJAX tutorial we are going to make a little sample website with all of these:)
Thanks,
-Codehead

Next: AJAX – Beginner AJAX Tutorial – Creating a simple AJAX website with example

Comments (0) Filed under: AJAX, JavaScript, PHP, Web Development, yui Posted by: Codehead

AJAX – Beginner AJAX Tutorial

We are closing down our forums, it’s time to move on, but we are keeping some important threads, here are the AJAX tutorials…

AJAX – Beginner AJAX Tutorial

What you need to know
A basic knowledge of HTML, JavaScript and a server side language.

What is AJAX?
AJAX stands for Asynchronous JavaScript And XML.

XML?!
Don’t worry you don’t need to know XML, in fact we won’t even use XML to write web applications with AJAX.

What data type we will use you are going to see in later tutorials, but I assure you we will use
something 100 times simpler.

Overview
There are a few benefits you can gain by using this technique, one is than you won’t need to send the common parts of the page to the browser whenever a user views a page on your website.

Since this is a beginner AJAX tutorial let’s make a very simple ‘Hello World’ AJAX application.

Step 1:
We are going to use Yahoo! UI library or ‘yui’.
The benefit of using yui is that you don’t need to worry about browser compatibility and also many developers are working on it to make it even better every day.

So go ahead and download the latest version here:
http://developer.yahoo.com/yui/download/

Step 2:
Extract the files and in the ‘build’ folder you will see many folders containing different parts of yui.

For this tutorial we only need yahoo.js, event.js and connection.js
So go ahead and make an HTML file and call it ajax.html (or whatever you want).

Now paste this code into your HTML file:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="edit this path to yui/yahoo.js"> </script>
<script type="text/javascript" src="edit this path to yui/event.js"> </script>
<script type="text/javascript" src="edit this path to yui/connection.js"> </script>
 
</head>
<body>
<div id="content">
</div>
</body>
</html>

2 notes:
1. You must edit the path to yui library and be sure the source attribute of your script tags point to the right files.
2. I also added a div to the page so we can display the server’s response in it.

Now we included the portions of yui that we need in our page so let’s write some code.

Step 3:
Now we need to write some code to use yui’s connection object to send requests to the server.

To do this we need to write 2 JavaScript functions to handle 2 situations.
1. Success.
2. Failure, most likely the server didn’t respond.

So lets write our functions, first success:

function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}

The only thing this function does is that it sets the innerHTML of our content container.

2 notes:
1. innerHTML is a non standard attribute that almost all the browsers support.
2. o is an object yui will pass to your functions.

Now lets make our failure handler:

function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is death';
}

Here again we change the innerHTML with an appropriate error message.

So all together we have:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="yahoo.js"> </script>
<script type="text/javascript" src="event.js"> </script>
<script type="text/javascript" src="connection.js"> </script>
 
<script type="text/javascript">
function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}
 
function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is dead';
}
</script>
 
</head>
<body>
<div id="content">
</div>
</body>
</html>

Let’s go ahead and write two more functions, one for sending a request to the server and one for trying the failure situation.

Here we go:

function send_request() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
}

This is a simple function that sends an asynchronous request to the server.

Let’s take a look at it in more detail:

1. We defined a callback object which sets our success_handler and failure_handler functions for success and failure situations respectively
and also we define a timeout for the connection. This timeout is in milliseconds, so we are setting it to 10 seconds.
This means if we receive a response within 10 seconds then yui calls our success_handler function, otherwise it calls failure_handler.

2. The second line is the actual request. asyncRequest method will handle everything and calls our callback functions.
We are passing 3 parameters.

First parameter is the type of request, which is GET here because we are not sending any form data to the server. (I will show you POST requests in later tutorials)

Second parameter is the URL which we want to send the request to.

Third parameter is our callback object.

Now let’s make another function to test the failure situation:

function test_failure() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
}

This function is the same except it sends a request to a non-existing file, so it’s going to fail.

So far we have this:

<html>
<head>
<title>Beginner AJAX Tutorial</title>
 
<script type="text/javascript" src="yahoo.js"> </script>
<script type="text/javascript" src="event.js"> </script>
<script type="text/javascript" src="connection.js"> </script>
 
<script type="text/javascript">
function success_handler(o) {
document.getElementById('content').innerHTML = o.responseText;
}
 
function failure_handler(o) {
document.getElementById('content').innerHTML = 'Server or your connection is death';
}
 
function send_request() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.php', callback);
}
 
function test_failure() {
var callback = { success:success_handler, failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'http://images.code-head.com/tutorials/ajax/some-file-that-doesnt-exists.php', callback);
}
</script>
 
</head>
<body>
<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>
<div id="content">
</div>
</body>
</html>

Note: I added the line:

<a href="javascript:send_request();">Send Request</a> | <a href="javascript:test_failure();">Fail a request</a>

To be able to test our little application.

Go ahead and try it here:

http://images.code-head.com/tutorials/ajax/beginner-ajax-tutorial.html

And the PHP file is only 3 lines:

<?php
echo 'Hello World!';
?>

That’s it for now.
Thanks and good luck!
-Codehead

Next: AJAX – Beginner AJAX Tutorial – Display a Progress Bar or a Loading Message

Comments (6) Filed under: AJAX, JavaScript, PHP, Web Development, yui Posted by: Codehead

A Paypal IPN Script With Subscription Support

This is just a bare-bone script, you will have to adopt it for your own use, this is to demonstrate how it’s done:

<?php
 
	if (empty($_POST) || @count($_POST) < 1)
		exit;
 
	$query = array('cmd=_notify-validate');
	foreach ($_POST as $key => $val) {
		if (!empty($val))	{
			$query[] = $key .'=' .urlencode($val);
			$$key    = trim(strip_tags($val));
		}
	}
	$query = implode('&', $query);
 
	$has_curl = false;
	if (function_exists('curl_init') && $ch = curl_init()) {
		curl_setopt($ch, CURLOPT_URL, 'http://www.paypal.com/cgi-bin/webscr');
		curl_setopt($ch, CURLOPT_TIMEOUT, 30);
		curl_setopt($ch, CURLOPT_POST, true);
		curl_setopt($ch, CURLOPT_POSTFIELDS, $query);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
		curl_setopt($ch, CURLOPT_USERAGENT, 'Codehead + Curl');
		$result = curl_exec($ch);
		curl_close($ch);
		$has_curl = true;
	}
	if (!$has_curl) {
		$header  = "POST /cgi-bin/webscr HTTP/1.0\r\n";
		$header .= "Host: www.paypal.com\r\n";
		$header .= "Content-Type: application/x-www-form-urlencoded\r\n";
		$header .= "Content-Length: " . strlen($query) . "\r\n\r\n";
		if ($fp = fsockopen(www.paypal.com, 80, $errno, $errstr, 30)) {
			socket_set_timeout($fp, 15);
			fwrite($fp, $header . $query);
			while (!feof($fp)) {
				$result = fgets($fp, 1024);
				if (strcmp($result, 'VERIFIED') == 0)
					break;
			}
			fclose($fp);
		}
	}
 
	if ($result == 'VERIFIED' || strtolower($result) == 'verified') {
 
		if($txn_type == 'subscr_signup') {
			/* Do something */
			exit;
		} else if($txn_type == 'subscr_modify') {
			/* Do something */
			exit;
		} else if($txn_type == 'subscr_cancel') {
			/* Do something */
			exit;
		} else if($txn_type == 'subscr_payment') {
			/* This will go bellow so the payments can be recorded */
		} else if($txn_type == 'subscr_failed') {
			/* Do something */
			exit;
		} else {
			/* Do something */
			exit();
		}
 
		$paypal = array();
		$paypal['user_id'] = $user_id;
		$paypal['payment_date'] = time();
		$paypal['completed_date'] = ($payment_status == 'Completed' ? time() : '');
		$paypal['item_name'] = $item_name;
		$paypal['payment_type'] = $payment_type;
		$paypal['payment_status'] = $payment_status;
		$paypal['pending_reason'] = $pending_reason;
		$paypal['payment_amount'] = $mc_gross;
		$paypal['paypal_fee'] = (isset($mc_fee) ? $mc_fee : 0);
		$paypal['payment_currency'] = $mc_currency;
		$paypal['txn_id'] = $txn_id;
		$paypal['receiver_email'] = $receiver_email;
		$paypal['payer_name'] = $first_name .' ' .$last_name;
		$paypal['payer_email'] = $payer_email;
		$paypal['custom'] = $custom;
		$paypal['raw_payment_data'] = serialize($_POST);
 
		if (DO YOU HAVE A PAYMENT WITH THIS INFO IN THE DB? IF YOU DO, THIS WAS PROBABLY CLEARED SA YOU DONT HAVE ) {
 
			/* Insert this row */
 
		} else if (YOU DO HAVE?) {
 
			/* Update this row */
 
		}
 
		$user = array();
		if ($payment_status == 'Completed') {
			/* Do something */
		} elseif ($payment_status == 'Pending') {
			/* Do something */
		} elseif ($payment_status == 'Failed') {
			/* If this is a subscription payment that is failed, then the code won't reach here and the $txn_type will be 'subscr_failed', see line 57 */
			/* Do something */
		}
	}
 
	header('HTTP/1.1 200 OK');
 
 
?>

I hope this helps someone

Update:

One of the ways to experiment with Paypal is to setup some fake payments – in Sandbox of course – and send the $_POST variable that comes to the IPN script in an email to yourself…

Comments (2) Filed under: General, PHP, Web Development Posted by: Codehead

PHP; Advancing Array Pointer In a Foreach Loop

This is not possible because ‘foreach’ operates on a copy of the array so there is no way to do it, don’t waste your time

BUT

You can work around this by replacing the ‘foreach’ with a ‘while’ loop, but before you do so, you must know that the following loops are functionally identical:

foreach ($days as $day) {
   echo $day;
}
 
while (list(, $day) = each($days)) {
   echo $day;
}

The same is true for these two, they are functionally identical:

foreach ($days as $i => $day) {
   echo $i .': ' .$day;
}
 
while (list($i, $day) = each($days)) {
   echo $i .': ' .$day;
}

‘While’ doesn’t operate on a copy of the array so you can do something like this, replace your ‘foreach’ with a ‘while’ loop and:

while (list(, $token) = each($tokens)) {
   /* Skip white spaces */
   if ($token == ' ') {
      while ($token == ' ') $token = next($tokens);
   }
}

I hope this makes sense

Comments (0) Filed under: PHP, Programming, Web Development Posted by: Codehead

Get The Contents Of a Folder

One method is to use folder functions such opendir, readdir etc.

Here is a function that returns the contents of a folder in an array:

<?php
           function get_folder_contents($folder) {		
		if(!is_dir($folder)) {
			return array(); /* You might want to do something more useful here */
		}
		$return_array = array();
		if ($dh = opendir($folder)) {
			while (($file = readdir($dh)) !== false) {
				if($file == '.' || $file == '..') continue;
 
				$return_array[] = $folder .$file;
 
			}
			closedir($dh);
		}
		return $return_array;
	}
?>

Comments (0) Filed under: PHP Posted by: Hamid