Polling PHP with Dojo for the iPhone

Post to Twitter

This is a very simple exercise in which we will write a couple files (one HTML, one PHP) and use the iPhone to test it out. To follow along you’ll need to have the following:
1. An iPhone (3G or older model is fine) – you can also get away with regular Safari or most other browsers.
2. PHP enabled server. I installed a local copy of Apache 2.2 with the latest PHP.
3. You can have a local copy of Dojo (but its not required). I’m using version 1.1.1 although 1.2 was just released today.
4. You’ll probably want to join Apple’s developer community to get all the web development guidelines for the iPhone. Free membership is all that’s needed for iPhone web development.

Lets have a look at the finished project first.

Nothing impressive I assure you. All we will do is poll a PHP page from Mobile Safari using Dojo and update the time every 5 seconds.

The PHP code is extremely simple:

<?php
	date_default_timezone_set('CST');
	echo date("H:i:s");
?>

Set the timezone according to your preference and your all set regarding the PHP. I named the file “poll.php”.

The HTML page (which I call: “dojo.htm”) is not much more difficult since Dojo makes AJAX calls pretty easy.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    	<title>Dojo Toolkit Test Page</title>
		<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

		<script type="text/javascript">
		    var djConfig = {
			isDebug:false, parseOnLoad:true
		    };
		</script>
		<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>


		<script type="text/javascript">
			var timer = null;

	        function myRefresh()
			{
				dojo.xhrPost({
					url: "poll.php",
					handleAs: "text",
					handle: function(data,args){
						if(typeof data == "error"){
							console.warn("error!",args);
							dojo.byId('content').innerHTML = "error: " + args;
						}else{
							console.log(data);
							dojo.byId('content').innerHTML = data;
						}
					}
				});

	            timer = setTimeout("myRefresh()", 5000);
	        }

	        dojo.addOnLoad(function()
			{
				dojo.byId('content').innerHTML = "Wait...";
	            timer = setTimeout("myRefresh()", 5000);
	        });

		</script>

		<style type="text/css">
			.content
			{
				font-size: 24pt;
				font-weight: bold;
				position: absolute;
				top: 125px;
				left: 100px;
			}

			.box
			{
				border: 2px solid #000000;
				background: #fefff0;
				width: 300px;
				height: 338px;
			}
		</style>
    </head>
    <body>
		<div class="box">
			<div class="content" id="content">
			</div>
		</div>
    </body>
</html>

I set the meta tag at the start (see Apple’s online docs for more info) – which in this case I have everything sized how I want it so I don’t let the user change it. In the code I set Dojo to be in non-debug mode, as you develop your code initially make sure to set that to debug mode so you get all the debug info. For simplicity I’m calling Dojo from the freely available AOL Developer Network.

Once the page loads I toss up the word “Wait…” and begin the timer at five second intervals. I let Dojo do all the heavy lifting with figuring out the AJAX stuff for the browser and tell it to call the poll.php page every five seconds and display the output in the content div.

Although this doesn’t really do a whole lot, it does give you a starting point to explore the world of Dojo, PHP and the iPhone. Of course though you can use any JavaScript framework you want and server back end technology for making iPhone web apps so use the ones you prefer.

I’m also a Dojo newbie so there might be better ways of doing this!

Post to Twitter

This entry was posted in AJAX, Dojo, iPhone, PHP. Bookmark the permalink.