This article is the fourth in a continuing series of DIY tutorials, which aims to make things as simple as possible.

To be honest, I wasn't planning on writing this article, but it would seem that there are quite a few people that want to know - what does the server-side code for the Ajax article look like?

In the previous Ajax article I outlined how to make a simple voting script, and a simple 'shoutbox' using Ajax. If you didn't read that post, I recommend doing so now, before reading this one.

It's always a bit harder to post server-side code, because there are a lot of ways you can do a something, and many people think their way is the better than any other. So let me just say that while there may be other ways to do things, this way works just fine. Anyway, back to your regularly scheduled program.

In this session, you are going to learn how to work the backend (in this case, PHP) for Ajax requests.

Previous articles in this series

• [Easy as Pie] Ajax Requests
• [Easy as Pie] Unobtrusive JavaScript
• [Easy as Pie] Working With A Database

What is PHP?

PHP is a server-side language, which means the server translates the code before sending to back to you. I'm no good at drawing diagrams, so imagine two computer-looking boxes. One of the boxes (the client, that's your browser) sends a request over to the other box (which is the server) which runs the server-side code, which then replies to your orinigal request with whatever the result is. Pretty simple. Other examples of server-side languages are ASP Classic, ASP.NET, Ruby on Rails and Coldfusion. If you want to learn more about server-side languages, you can read about them on the Wikipedia page for 'Server-side Scripting'.

So to not confuse anyone, I will be using the same examples from the last Ajax article (the fact that the code is already written played no part in this decision. Really.)

Voting Script

Okay, so here's the voting script:

Click on either the cat or the dog to vote for them. You can vote multiple times, so have a blast. Continue reading when you've had your fill.

Fun stuff. I'm not going to show the Ajax part of this example here (as I already did so in the previous article) so first, here's the database query you will need to run to set up the database:

CREATE TABLE `clicks` (                                 
           `id` tinyint(4) NOT NULL auto_increment,               
           `clicks` mediumint(9) default 0,                     
           PRIMARY KEY  (`id`)                                    
         )

See [Easy as Pie] Working With A Database for more information on how databases work and help on setting up your first script using one.

Now create two rows by running:

INSERT INTO `clicks` (`id`,`clicks`) VALUES ( '1',0)
INSERT INTO `clicks` (`id`,`clicks`) VALUES ( '2',0)

And here's the PHP code for CallMe.php:

<?php
$user="username";
$password="password";
$database="database";
$votes = mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die( "Unable to select database");
if($_REQUEST['link'] == "1") {
	$query="SELECT clicks FROM clicks WHERE id = 1";
} elseif($_REQUEST['link'] == "2") {
	$query="SELECT clicks FROM clicks WHERE id = 2";
} else {
	$query="SELECT clicks from clicks";
	$result = mysql_query($query);
	$votes1 = mysql_result($result,0);
	$votes2 = mysql_result($result,1);
}
if($_REQUEST['link'] != "") {
	$result = mysql_query($query);
	$clicks = mysql_result($result,0);
	$newClicks = $clicks+1;
}
if($_REQUEST['link'] == "1") {
	mysql_query("UPDATE clicks set clicks = " . $newClicks . " where id = 1");
} elseif($_REQUEST['link'] == "2") {
	mysql_query("UPDATE clicks set clicks = " . $newClicks . " where id = 2");
}
mysql_close($votes);
if($_REQUEST['link'] == "1") {
   	echo("I have " . $newClicks . " votes");
} elseif($_REQUEST['link'] == "2") {
	echo("I haz " . $newClicks);
} else {
?>
<a href="javascript:void(0)" onclick="fillElementId('/landfill/CallMe.php','link1','link=1')" id="link1">I have <?php echo($votes1); ?> votes</a> 
<a href="javascript:void(0)" onclick="fillElementId('/landfill/CallMe.php','link2','link=2')" id="link2">I haz <?php echo($votes2); ?></a>
<?php
}
?>

Now I'll go through and explain each block of code:

$user="username";
$password="password";
$database="database";
$votes = mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die( "Unable to select database");

This creates a connection to the database server.

if($_REQUEST['link'] == "1") {
	$query="SELECT clicks FROM clicks WHERE id = 1";
} elseif($_REQUEST['link'] == "2") {
	$query="SELECT clicks FROM clicks WHERE id = 2";
}

The $_REQUEST['link'] is getting the value of link which was posted by the Ajax. This section defines which option the user voted for.

} else {
	$query="SELECT clicks from clicks";
	$result = mysql_query($query);
	$votes1 = mysql_result($result,0);
	$votes2 = mysql_result($result,1);
}

The else in this code means, "if the user didn't click on '1' or '2' then run this." Then it creates a query that selects the clicks from the clicks table. It also sets the values of the $votes1 and $votes2 variables to whatever is in first and second cell, respectively.

if($_REQUEST['link'] != "") {
	$result = mysql_query($query);
	$clicks = mysql_result($result,0);
	$newClicks = $clicks+1;
}

The if in this block checks to see if there was a vote cast (!= means does not equal, so what it is asking is 'if link does not equal nothing') and if so, it will execute the code in the block.

The code sets the variable $result to whatever is returned from the MySQL query, then sets $clicks to the first returned cell, and finally sets $newClicks to the same number as $clicks, but adds 1.

if($_REQUEST['link'] == "1") {
	mysql_query("UPDATE clicks set clicks = " . $newClicks . " where id = 1");
} elseif($_REQUEST['link'] == "2") {
	mysql_query("UPDATE clicks set clicks = " . $newClicks . " where id = 2");
}

This block checks to see which option was voted for, and updates the database accordingly.

mysql_close($votes);

Because we dont need the database connection any longer, we can close it.

if($_REQUEST['link'] == "1") {
   	echo("I have " . $newClicks . " votes");
} elseif($_REQUEST['link'] == "2") {
	echo("I haz " . $newClicks);

This outputs (via echo) the new number of clicks on the item the user clicked on.

} else {
?>
<a href="javascript:void(0)" onclick="fillElementId('/landfill/CallMe.php','link1','link=1')" id="link1">I have <?php echo($votes1); ?> votes</a> 
<a href="javascript:void(0)" onclick="fillElementId('/landfill/CallMe.php','link2','link=2')" id="link2">I haz <?php echo($votes2); ?></a>
<?php
}

This is the action that takes place when there was no vote counted (meaning the user just ran the script without voting) - This happens on the inital page load, so we can just use a php include to call it.

That's it for the voting script, now on to the:

Shoutbox

This tiny little script allows visitors to chat with you and other visitors.

Here's the sql statement you need to use to set up the database:

CREATE TABLE `shoutbox` (                                  
	`id` mediumint(9) NOT NULL auto_increment,               
	`ip` INT UNSIGNED default NULL,                           
	`timestamp` datetime default NULL,                       
	`message` varchar(100) default 'No Comment...',          
	`name` varchar(30) default 'Anonymous',                  
	PRIMARY KEY  (`id`))

Here's the code for the FillElement.php:

<?php
$user="username";
$password="password";
$database="database";
$shoutbox = mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die("Unable to select database");
$say = $_REQUEST['say'];
$name = $_REQUEST['name'];
if($say != "") {
	if($name == "") {
		$name = "Anonymous Coward";
	}
	$date = date("Y-m-d H:i:s");
	mysql_query("INSERT INTO shoutbox (ip,timestamp,message,name) VALUES(INET_ATON('$REMOTE_ADDR'),'$date','" . mysql_real_escape_string($say) . "','" . mysql_real_escape_string($name) . "')");
}
$query="SELECT message, name FROM shoutbox ORDER BY timestamp DESC LIMIT 10";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close($shoutbox);
echo("<ul>\n");
for ($i = 0; $i < $num; $i++) {
if(($i % 2) == 1) {
	$alt = "";
} else {
	$alt = " class=\"alt\"";
}
$say = mysql_result($result,$i,"message");
$name = mysql_result($result,$i,"name");
echo("<li$alt><strong>".htmlentities($name)."</strong> said: ".htmlentities($say)."</li>");
}
echo("</ul>");
?>

Here's what's going on:

$user="username";
$password="password";
$database="database";
$shoutbox = mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die("Unable to select database");

Again we are setting up the connection to the database.

$say = $_REQUEST['say'];
$name = $_REQUEST['name'];

I am just defining the $say and $name variables for easy use later.

if($say != "") {
	if($name == "") {
		$name = "Anonymous Coward";
	}

This makes sure that $say is set, then checks if $name is set. If no $name was specified, it defaults to 'Anonymous Coward'

	$date = date("Y-m-d H:i:s");
	mysql_query("INSERT INTO shoutbox (ip,timestamp,message,name) VALUES(INET_ATON('$REMOTE_ADDR'),'$date','" . mysql_real_escape_string($say) . "','" . mysql_real_escape_string($name) . "')");

This sets the $date variable to the current time. This is the format it outputs it in: 2008-07-29 05:32:06. It then inserts data into the database.

You may notice I am running a MySQL function called INET_ATON on the ip address($REMOTE_ADDR). This saves some space in the database, taking up only 4 bytes, but if I had been using a varchar(15) and storing the IP normally, it would take up 15 bytes for each entry. For a little application like this, it's probably not a big deal, but it certainly doesn't hurt.

And as always, don't forget to escape everything you get from a user before putting it in the database.

$query="SELECT message, name FROM shoutbox ORDER BY timestamp DESC LIMIT 10";
$result=mysql_query($query);
$num=mysql_numrows($result);

The first line of this block is creating a query which selects both the message and the name from the shoutbox table, orders it by the timestamp field descending (meaning newest first) and limits the return to 10 rows. Then we store the return in a variable called $result, then count how many rows were returned, using mysql_numrows().

mysql_close($shoutbox);

You should always close the connection as soon as you are done needing it

echo("<ul>\n");
for ($i = 0; $i < $num; $i++) {

As you can see, it is writing a starting <ul>. The \n means 'new line', so it will start a new line before echoing the <li>'s. The next line is a loop. The for loop will simply loop through until the condition is no longer met -- in this case, as soon as $i becomes greater than $num.

if(($i % 2) == 1) {
	$alt = "";
} else {
	$alt = " class=\"alt\"";
}

This fun little bit of code may look a bit different to you. Some of you may be familiar with the 'mod' command. That is exactly what this is. The % is short-hand for mod. Mod simply gets the remainder of an equation. In this case, it gets the remainder of $i divided by 2. It checks to see if the remainder equals 1. This will be true for every odd number. As you can see from the code following the statment, it will set the variable $alt to have a class of 'alt' for all even values. This way, we can "zebra-stripe" or in other words, alternate colors.

$say = mysql_result($result,$i,"message");
$name = mysql_result($result,$i,"name");
echo("<li$alt><strong>".htmlentities($name)."</strong> said: ".htmlentities($say)."</li>");

Now we are setting the values of $say and $name to be what we get out of the database, then outputting the whole line. Again, you will notice that I am escaping the output with htmlentities().

echo("</ul>");

And finally, we close the unordered list, and end the PHP.

Download the code

Because I know that I learn far better from example, I have made this code available for download. Click the following links to download the PHP files in zip format.

Download CallMe.php

Download FillElement.php

That's all, folks

And another [Easy as Pie] article comes to fruiition. I would like to take a moment and thank everyone for dropping by, and I really hope that I have helped you with something that might have previously been very confusing. If I did help you, please leave a comment letting me know. As always, be sure to subscribe to my RSS Feed for notification of future articles.

Update: For a select few

IE6 is being phased out with a mandatory push from Microsoft, requiring all computers to upgrade to IE7.

The article from Microsoft mentions several ways you can disable the WGA-free update, so the war might not be over. But in my opinion, this is a major step forward.

This post is the third in a continuing series of DIY tutorials, which aims to make things as simple as possible.

The [Easy as Pie] series focuses on tasks that most people consider too challenging and presents it in a way that is easy (as pie!) to understand.

Introduction

In this post, you are going to have a fantastic time learning:

• How to create a MySQL Database
• How to create a table in a MySQL Database
• How to add data to a MySQL Database
• How to get data from a MySQL Database
• How to create a random quote generator

The good stuff

If you're like me, you learn really well from example. For this reason, I include the download for the random quote generator right here. Enjoy!

Download the Random Quote Generator source code

Let's get started!

Previous articles in this series

• [Easy as Pie] Unobtrusive JavaScript
• [Easy as Pie] Ajax Requests

Creating a MySQL Database

I am going to use cPanel for this example, as it is what my host uses.

Step 1: Go into cPanel

Step 2: Click on 'MySQL® Databases'

Step 3: Find the input box where it says 'New Database:'

Step 4: Insert your database name, and click 'Create Database'

Step 5: Find 'Current Users:' and input a new username and password into the fields, then click create user

Step 6: Find 'Add Users To Your Databases:' Select your new database and username from the dropdowns, then hit 'Add User to Database'

Now you have a database set up!

From here, you can open PHPMyAdmin from the link at the bottom of the page, but I prefer using SQLyog Enterprise (free version available)

If you are going to be using SQLyog, you may have to add your IP into the 'Access Hosts:' section. You can get your IP from cmyip.com.
PLEASE BE AWARE OF THE SECURITY RISKS INVOLVED WITH ALLOWING REMOTE ACCESS TO YOUR DATABASE(S)

Creating a Table in a MySQL Database

Now we have transitioned into SQLyog, if you want to use PHPMyAdmin, you can go into the 'Query Window' that PHPMyAdmin provides, which is very similar to SQLyog's query input area, albeit much less verbose.

First, we have to decide the columns we are going to need. Because we are going to be making a random quote generator, we're going to need the following columns:

• id - this will automatically increment as entries are added
• quote - this will contain the quote
• author - this will contain the person who said the quote

The syntax for creating our table is:

CREATE TABLE `quotes` (
    `id` int(11) NOT NULL auto_increment,
    `quote` varchar(255),
    `author` varchar(40),
    PRIMARY KEY  (`id`)
)

This will create a table named 'quotes' with our 3 columns.

id is set to NOT NULL as it will always have a value, and it will automatically increment (so long as we don't define a value)

quote is set to VARCHAR and is limited to 255 characters

author is also set to VARCHAR, but is limited to only 40 characters

Our primary key is set to id - this means that you cannot have two of the same id

To execute this in SQLyog, go to 'Edit' => 'Execute Query' => 'Execute Current Query' ('F5' or 'F9' depending on your version) after putting the query in the query area at the top.

While we are here, we can add a few entries to our newly-created table. We could do this with the WYSIWYG interface, but that's no fun, so here's how you add values using a query:

INSERT INTO `quotes` (`quote`,`author`) values ('A rose by any other name would smell as sweet','William Shakespeare')

By not defining the id column, it auto-fills with the value of 1.

Feel free to add a few more, though it's not necessary as we will be building a script to add them right about... now.

Adding data to a MySQL Database

We just learned the query to add data, now we just need to create an interface for it. I'm going to be using PHP for the backend code.

Before we begin, create a new page, and call it quotemanager.php

The first step will be creating the HTML form.

<form action="" method="post">
<fieldset>
<legend>Add a Quote</legend>
<label for="quote">Quote:</label>
<input type="text" name="quote" id="quote" maxlength="255" />
<label for="author">Author:</label>
<input type="text" name="author" id="author" maxlength="40" />
<input type="submit" value="Add Quote" />
</fieldset>
</form>

Here's how that will look:

Then we have to do the PHP stuff.

Here's the code used to connect to a MySQL database:

$user="username";
$password="password";
$database="database";
$connection = mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die( "Unable to select database");

Most of this should be pretty self-explanatory. The first 3 lines are simply declaring variables, then you run the mysql_connect() function which connects to the server using your credentials, then the next line is selecting the appropriate database, and if it is unable to do so, it spits out an error.

You may need to change 'localhost' to your domain if you are using an external database.

Now, we are going to create the PHP code that will grab the form values on submit and add it to the database.

<?php
if ($_REQUEST['quote'] != "") {
    if($_REQUEST['author'] != "") {
	    $author = $_REQUEST['author'];
    } else {
	    $author = "Anonymous";
    }
    $quote = $_REQUEST['quote'];
    
    $query="INSERT INTO `quotes` (`quote`,`author`) values ('" . mysql_real_escape_string($quote) . "','" . mysql_real_escape_string($author) . "')";
    $result = mysql_query($query) or die(mysql_error());
    echo("inserted quote: " . htmlentities($quote) . " by " . htmlentities($author) . " into database");
} else {
    echo("<p>Please enter a quote and author</p>");
}
?>

Here's what this script is doing:

if ($_REQUEST['quote'] != "") {

This means "if there is a quote specified (quote does not equal nothing) then continue on."

if($_REQUEST['author'] != "") {
 $author = $_REQUEST['author'];
} else {
 $author = "Anonymous";
}

This means "if there is an author specified, use that value, otherwise (else) define author as 'Anonymous'."

$query="INSERT INTO `quotes` (`quote`,`author`) values ('" . mysql_real_escape_string($quote) . "','" . mysql_real_escape_string($author) . "')";

This defines the query we learned earlier

The mysql_real_escape_string() escapes the string so you aren't opened up to SQL Injection vulnerabilities.

Don't forget to escape the user input!

$result = mysql_query($query) or die(mysql_error());

This actually runs the query, and spits out an error if it fails

echo("inserted quote: " . htmlentities($quote) . " by " . htmlentities($author) . " into database");

This outputs what we put into the database

The htmlentities() converts things like < to &lt;, so you don't run into XSS vulnerabilities.

} else {
    echo("<p>Please enter a quote and author</p>");
}

This means that there was no quote specified, so it asks for input from the person viewing the page.

So that's it, now we can add all the data we want into our quotes table. But really, that's not all that helpful, we need to have a way to output it!

Retrieving data from the Database

We are now going to list all quotes in the database along with the author.

<?php
$query="SELECT `quote`, `author` FROM `quotes`";
$result=mysql_query($query) or die(mysql_error());
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
  $quote = htmlentities(mysql_result($result,$i,"quote"));
  $author = htmlentities(mysql_result($result,$i,"author"));
  echo("<blockquote>" . $quote . " ~ <cite>" . $author . "</cite></blockquote>");
  $i++;
}
mysql_close($connection);
?>

This is what is going on:

$query="SELECT `quote`, `author` FROM `quotes`";
$result=mysql_query($query) or die(mysql_error());

Look familiar? This is the select query which selects the quote and author columns out of the quotes table, or more accurately, selects the values therein.

$num=mysql_numrows($result);

This sets $num to the number of rows that are returned by the select query. So for instance, if you have 9 quotes in the table, the number will be... you guessed it -- 9!

$i=0;

Just setting the $i variable to 0, as we are about to loop through the results, and need a counter

while ($i < $num) {

This is the beginning of a while loop. Each iteration, it checks for a condition (in this case, it checks that $i is less than the number of results (which is stored in $num))

$quote = htmlentities(mysql_result($result,$i,"quote"));
$author = htmlentities(mysql_result($result,$i,"author"));

In order to use the values in the loop, we have to define them in this way. The syntax being used is:

• mysql_result() - function
• $result - Which resultset to use
• $i - Which row you want to pull (as this increments, it will pull each row)
• "quote"/"author" - Specified which field/column to pull from

$i++;

This means "Increment $i by 1 (The same could be written $i = $i + 1; or $i+=1;)

mysql_close($connection);

As we are no longer using the MySQL Connection, we can close it here.

That's it for getting data out of a database - pretty straightforward! Now on to the fun stuff!

Making a random quote generator

Alright, if you have read this far and retained around 15% of it, you are scientifically proven to be a genius. Great job!

We're going to create a random quote generator, using the scripts we have already made

The first thing we need to do is create a new page, where the quote will show up. We'll call this page quote.php, because I'm feeling adventurous.

Here's the code we're going to put on this page:

<h1>Quote of the moment</h1>
<?php
$user="username";
$password="password";
$database="database";
$connection=mysql_connect('localhost',$user,$password);
@mysql_select_db($database) or die( "Unable to select database");
$query="SELECT `quote`, `author` FROM `quotes` ORDER by rand() LIMIT 1";
$result=mysql_query($query) or die(mysql_error());
$quote = htmlentities(mysql_result($result,$i,"quote"));
$author = htmlentities(mysql_result($result,$i,"author"));
echo("<blockquote>" . $quote . " ~ <cite>" . $author . "</cite></blockquote>");
mysql_close($connection);
?>

Alright, so the only new thing is:

$query="SELECT `quote`, `author` FROM `quotes` ORDER by rand() LIMIT 1";

Here is our query for randomly selecting one of the quotes and authors out of the database. The rand() means random, and will generate a random column to pull from each time it is run

The LIMIT 1 means just that, limit the query to one result.

That's all you need for your random quote generator! By only slightly modifying this code, you can create a plethora of mini-applications, such as a random image generator, random trivia, etc. The possibilities, as they say, are endless.

Download the Random Quote Generator source code.

That's all, folks

And so concludes the article. If you enjoyed it, please leave a comment. Don't forget to subscribe to the RSS feed for future articles.

It seems that using Alexa's redirect URL to game your rank is no longer an option.

UPDATE

On about 4:00PM on Thursday, January 10th, I clicked one of the comment author's names, which I assumed lead to their blog. Instead of their page, however, I got:

The requested URL /redirect was not found on this server.

I glanced at the address bar, and saw this:

http://redirect.Alexa.com/redirect?myblog.com

That's not good for business...

A quick google for "Alexa redirect" brings up over 50,000 results, some of them promote the Alexa redirect, others say it is a myth.

Personally, I am inclined to believe it is nothing more than a redirect script, and has nothing at all to do with your Alexa rank.

Here's a quote from the Alexa project manager, Geoffrey Mack:

...The [Alexa] redirect doesn't do anything to your rank. The rank is based on one thing only: logs from toolbar usage. I should know, I am the product manager at Alexa...."

This sort of this just calls attention to the fact that you cannot rely on third party links.

Case in point, not long ago TinyURL went down, rendering more than 54 million links completely useless.

I also find it interesting that I am unable to find any official word on Alexa.com about even the existence of a redirect URL.

What do you think?

Do you think Alexa should have removed the redirect abilities without any notice?

Do you think the Alexa redirect actually did what so many people though it did?

This post is the second in a continuing series of DIY tutorials, which aims to make things as simple as possible.

Ajax. Some would say that it is simply an over-used buzzword, but I disagree. Ajax (formerly known as AJAX) is a fantastic way to enhance websites and improve user interactivity. However, like all things, it should be used in moderation, and has the potential to be used improperly (I'm looking at you, flash.)

But I don't want to get off-topic so early on. In this tutorial, you will:

• Learn how to use Ajax in the simplest way I could think of
• Create an addictive voting script
• Create a simple shoutbox
• Download source and create your own within minutes!

But first, I will explain a bit about what Ajax really is (and what it isn't) for those of you just starting out.

What Ajax Isn't

Ajax is not flashy JavaScript. Ajax is not a fancy form, radical menu or custom tool-tip. Ajax is definately not a styled popup.

What Ajax Is

Ajax, also known as XHR, is a technology used to send and receive requests for data to and from a server without having to refresh the whole page. That's really all there is to it.

Don't let that put you off though! You can still accomplish some really neat things using Ajax. The first 'neat thing' is a voting script. You click a button to vote, which will poll phazm.com's server and come back with an updated tally of how many votes there are -- without a single page refresh. Fascinating, am I right?

Let's Vote!

Alright, here's the little script I made. This took me about 12 minutes to write the script, 8 minutes to set up the database, and 2 minutes to come up with the idea. (For those of you keeping track at home, that's a total of 22 minutes!)

Note: Feel free to vote more than once to see the number rise.

Which one is the cutest?

And the winner is... Ajax!

This is obviously a very (very) simple example of what Ajax can do, but it's effective, nonetheless. There are significant advantages to using Ajax for this, rather than straight JavaScript. While I could emulate this in JavaScript, the votes would have to be saved on your machine via cookies or sessions and other votes wouldn't be counted, only your own.

So how did you do it?

Like this!

function getHTTPObject() {
 var xhr = false;
 if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
  try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
   try {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   } catch(e) {
    xhr = false;
   };
  };
 };
 return xhr;
};

function fillElementId(url,elementId) {
 if(!document.getElementById(elementId)) {
  return;
 };
 parameters = encodeURI(parameters);
 var xmlHttp = getHTTPObject();
 xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4){
   if(xmlHttp.status==200){
    document.getElementById(elementId).innerHTML = xmlHttp.responseText;
    xmlHttp=null;
   } else {
    alert("Error: "+xmlHttp.statusText);
   };
  };
 };
 xmlHttp.open('POST',url,true);
 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlHttp.setRequestHeader("Content-Length", parameters.length);
 xmlHttp.setRequestHeader("Connection", "close");
 xmlHttp.send(parameters);
};

• Download this script (with comments!)

Let's break it down line by line:

getHTTPObject

function getHTTPObject() {

This is the function that actually loads the XmlHttpRequest

var xhr = false;

Simply pre-defining the variable.

if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();

Firefox, Safari, Opera and Netscape and IE7 all use window.XMLHttpRequest

} else if (window.ActiveXObject) {

window.ActiveXObject is used by IE6 and below.

xhr = new ActiveXObject("Msxml2.XMLHTTP");

Internet Explorer 6 uses Msxml2.XMLHTTP

xhr = new ActiveXObject("Microsoft.XMLHTTP");

IE 5 uses Microsoft.XMLHTTP

xhr = false;

If you get in here, it means your browser doesn't support XHR

return xhr;

This returns the value of 'xhr' to whatever called it.

fillElementId

function fillElementId(url,elementId) {

This is the function that tells the XHR what to do, and this is the function you can modify.

if(!document.getElementById(elementId)) {
return;

This will check if the id you gave it exists, and if it doesn't, it will break out of the function.

parameters = encodeURI(parameters);

This will encode the parameters passed to it, turning spaces (" ") into %20 and the like.

var xmlHttp = getHTTPObject();

As you can see, we have just defined xmlHttp as the function we looked at earlier. This simply sets xmlHttp to whatever is returned from the getHTTPObject function.

xmlHttp.onreadystatechange=function(){

This will fire off every time the readyState changes

if(xmlHttp.readyState==4){

readyState can be any of the following:

• 0 = uninitialized
• 1 = connection open
• 2 = data sent
• 3 = receiving data
• 4 = transaction complete

if(xmlHttp.status==200){

status is the HTML status received, these are the most commonly received:

• 200 = OK
• 301 = Redirected
• 400 = Bad Request
• 401 = Unauthorized
• 403 = Forbidden
• 404 = Not Found
• 408 = Request Timeout
• 500 = Internal Server Error
• 503 = Service Unavailable

document.getElementById(elementId).innerHTML = xmlHttp.responseText;

This simply replaces everything in the container with the ID we specified with whatever is in the variable xmlHttp.responseText

xmlHttp=null;

This removes the reference to the object

alert("Error: "+xmlHttp.statusText);

This will output what the server returns, such as "Not Found" or "Forbidden"

xmlHttp.open('POST',url,true);

This is where you open the request. You can use either GET or POST for the request. The "true" means asynchronous, so if you change it to false, it will wait for a response before doing anything else.

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

This tells the script to expect a form

xmlHttp.setRequestHeader("Content-Length", parameters.length);

This declares the length of the parameters to the script

xmlHttp.setRequestHeader("Connection", "close");

If you want to have a persistent connection, you don't need this line, but I don't want a persistent connection open, so I close it.

xmlHttp.send(parameters);

This sends the request, which will begin to change the readyState, and thus start firing off the above code, and wait for the readyState to be 4.

Initiation

Then you have to initiate it somehow, which I am doing using an onclick event. You should probably add this event unobtrusively, but for examples sake I'm doing it inline.

<a id="link1" onclick="fillElementId('/landfill/CallMe.php','link1','link=1')" href="javascript:void(0)">I have 2 votes</a>
<a id="link2" onclick="fillElementId('/landfill/CallMe.php','link2','link=2')" href="javascript:void(0)">I haz 3</a>

So when you click on one of those links, it sends the three variables (url, elementId and parameters) that are in the onclick to the fillElement function.

The function calls the url, and replaces the content of the element with that id with whatever it gets from the url. Simple enough?

Here's another really simple example:

Phazm Shoutbox Mini (beta!)

How did you do that, then?

Almost exactly the same as the voting script. The only thing that changed was the onclick (or onsubmit, in this case)

Now, it's calling a different php file, with two variables: name and msg - the PHP is doing the rest, as it should.

Ajax - A Dumb Waiter

Jeremy Keith said in last years Web Directions North (Links to 2008 page) that Ajax should be a "dumb waiter" - Not doing any of the heavy lifting, just sending and receiving data that is generated server-side. This way, you have less problems with browser imcompatibilities and such, and it makes the speed of your application depend on your server, not on the computer running the code.

So there you have it, your very own Ajax script -- Easy as Pie!

Download It

If you would like to download the JavaScript file, you may do so at this link. Feel free to use it any way you want to, you don't need to link back unless you wish to.

What's next?

I'm thinking an "Easy as Pie - Debugging CSS and JavaScript" next, but that might change depending on the comments I receive here. What would YOU like to see simplified?

This post is the first in a continuing series of DIY tutorials, which aims to make things as simple as possible. I will also monitor the comments on the 'Easy as Pie' posts more carefully so I can address any questions anyone has.

Before I delve into the technique I use for unobtrusive JavaScript, I'll give a brief overview of what unobtrusive JavaScript is, and the benefits of using it.

What is unobtrusive JavaScript?

Quite simply put, it's removing JavaScript from the source of the document, and including it in an external file. That's what unobtrusive JavaScript IS - but what is far more important is what unobtrusive JavaScript symbolizes. Unobtrusive JavaScript to me is a largely promoted technique to adhere to web development best practices and standards. It encourages the separation of the "behavior" layer from the "presentation" and "structure" layer.

In essence, it's the same thing that we have been doing with CSS for years - Calling a style sheet and within itself, selecting the elements you wish to style. With the ability to traverse the DOM, JavaScript is essentially the same thing, just with a bit more functionality.

To fully understand what unobtrusive JavaScript is, you need to be able to identify obtrusive JavaScript -- here are some examples of obtrusive JavaScript:

<a href="JavaScript:alert('You clicked!')">Click Me!</a>

You may have seen this around, and sometimes you may see something like this:

<a href="#" onclick="alert('You clicked!')">Click Me!</a>

Obviously, this will not do anything for those with JavaScript disabled. A slightly better version would be this:

<a href="clicked.html" onclick="alert('You clicked!')">Click Me!</a>

This way, if the user does not have JavaScript capabilities, or has JavaScript disabled, they will still go to the 'clicked.html' page.

Making your JavaScript unobtrusive

The process for making your JavaScript unobtrusive is actually quite simple - you simply need to 'hook' into it and apply an event handler (such as 'onclick'). Let's get started.

First, one option you have is to create a listener to run when the window has fully loaded by using window.onload. Here is a quick example:

window.onload = function() {
   //run this on page load
}

However, this will wait until ALL elements are completely loaded (even large images) before running the JavaScript.

To get around that hurdle, we can use domFunction.

domFunction is a small (2k) JavaScript file that waits for the DOM to be ready before running your JavaScript, this allows you to traverse the DOM without waiting for images to load. It does this by checking for an element/id on the page, and if it can access it with the DOM, it assumes the DOM is ready. The syntax is:

var foobar = new domFunction(function() {
  //run this when DOM is ready }, {'footer' : 'id'});

• Click here for a demo

The code

Alright, now you know how to initiate a script as soon as it can use the DOM, now we have to hook into the elements we want to add JavaScript to.

Here's the HTML we are going to use:

<div id="mylinks">
<a href="mypage.html" title="Go to my page">My Page</a> | <a href="yourpage.html" title="Go to your page">Your Page</a>
</div>

And the JavaScript (not including the domFunction):

function unobtrusifier() {
	if(document.getElementById('mylinks')) {
		var links = document.getElementById('mylinks').getElementsByTagName('a');
		linklength = links.length;
		for(var i=0;i<linklength;i++) {
			links[i].onclick = function() { alert(this.title); return false; };
		};		
	};
};

• Click Here to view the JavaScript with comments

The example

• Click Here to see the above code in action

The end

Please let me know if you found this at all helpful. I tried to make it as simple as possible without neglecting standards.

The next 'Easy as Pie' will be on Ajax. Fun stuff!

While it pains me to do so, the following warning is needed:

This entry best viewed in Firefox 3

Since Mozilla released the Firefox 3 Beta (Code Name: Minefield) there have been a rash of blog posts regarding the many new features, increased security, and enhanced UI. However, one thing I have yet to see is what I am really need to know: how does this affect web developers?

When I heard that Safari was releasing a PC version of their browser, I was overjoyed... Now I don't need to boot up my Mac to test sites in Safari, right? Well, as we all know, the answer to that very naive assumption is a resounding "Not even close" - We now have just one more browser we need to test in. (Note: Safari did clean up its act a bit since release, but it's still not exactly the same as its Mac counterpart, and thus is simply more work.)

I had my apprehensions when I heard Firefox was jumping up a full version... I was determined to not make the same foolish mistake twice... So I did my research.

Good news? It passes the Acid2 test!

From left to right: Firefox 2, Firefox 3, Internet Explorer 7. Click for larger image.

Looks like we aren't going to have to test in both Firefox 2 and 3*.

* That is, unless you are using the newly-proprietary/implemented enhancements, such as getElementsByClassName ALSO While it is fantastic that the newest Firefox fixes CSS issues, it's not retroactive, so visitors still using FF2 will still have the same problems as before. I recommend waiting until usage is below 5% to completely phase it out.

So, here are what I consider to be the most important things for us Web Designer/Developers to be aware of.

1) Full-Page Zoom

This new scaling scales everything on the page (a la Opera and IE7), not just text. I wouldn't say this means that we can stop using em's for text sizing, but it's good to see that accessibility is beginning to become more supported by the software we use, so it isn't dependant on the designer.

Left: Firefox 2 Zoom, Right: Firefox 3 Zoom. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=4821

2) Animated PNG (APNG) Support

While I don't look forward to seeing alpha-transparent rotating "Email Me" graphics all over the place like it's 1998 again, I am very pleased to see APNG finally getting implemented. While it wont become a standard for quite a while, it's a step in the right direction. One thing to note is that if your browser does not support APNG (but does support PNG) it will simply render the first frame of the PNG.

Left: Animated GIF, Right: Animated PNG
Use the links below to change background color (JavaScript Required)
Green | Pink | Red | Blue | Black | Orange | White
Image Credits go to http://www.gamani.com/apng.htm

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=257197

3) Support for arbitrary protocols

This will allow you to map protocols such as mailto:nobody@nowhere.com (Which will use Gmail) or validate:http://www.phazm.com/ (Which will use the W3C validation service) to a proprietary handler, which will allow you to select it instead of only using the default.

UI for notification/accepting Protocol Handlers. Click for larger image.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=372441

4) getElementsByClassName

This has been available for some time using some frameworks, but now it's in the DOM! Now we will be able to loop through all elements with a specific class on our document. The original specification is in the HTML 5 working draft. (link: http://www.whatwg.org/specs/web-apps/current-work/#getelementsbyclassname).

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=357450

5) Support for offline web apps

The support has been added to allow web applications to be run offline. Unfortunately, it will require the apps to accommodate this new system, and thus far, there has been no word from Google saying they intend to code Gmail or any of their other apps to be used offline, but I'm sure it will come in time.

Demo: http://starkravingfinkle.org/blog/2007/02/firefox-3-offline-app-demo/
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=367447

Other useful additions:

Now properly supported:

• display: inline-table
• display: inline-block

Added support for:

• onCut
• onCopy
• onPaste
• onBeforeCut
• onBeforeCopy
• onBeforePaste

demo: https://bugzilla.mozilla.org/attachment.cgi?id=272228
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=280959

contentEditable

contentEditable allows you to do inline editing of text.

demo: https://bugzilla.mozilla.org/attachment.cgi?id=157048
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=237964

Resizable=noyes

With Firefox 3 , the window.open property "resizable=no" is ignored, so all pop up windows will now be resizable.

Click here to open a window with resizable=no
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=177838

Long Tool tips

Now, instead of having one huge line for a tool tip, they will wrap over several lines.

To test, hover over this
tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=218223

Printing & Absolute Position

Containers that span multiple pages and are absolutely positioned will now correctly wrap to the next page instead of just being cut off.

tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=154892

A few notes:

By default, you will not be able to run any extensions that haven't been updated to be used with Firefox 3 . However, if you go into about:config, right click, then go to 'New' => 'Boolean' - Enter, "extensions.checkCompatibility" and hit 'OK' then click "false" and restart, you will be able to use the extensions that don't break.
WARNING: Some extensions will actually crash Firefox 3, so if that happens, start up in safe mode with all extensions disabled, then either uninstall the extension(s) that are breaking it, or go set checkCompatibility to "true."

This is somewhat unrelated, but I don't want to make a new blog entry for it, and it is pretty useful: You can use RAMBack in Firefox 3 to free up a bunch of memory that it uses.

Thanks for listening

If you found this helpful or informative, I would really appreciate it if you left a comment... it gets so lonely at nights!

A digg wouldn't hurt either...

JH: Nik, Thank you so much for taking the time for this interview.

JH: So how long have you been doing design?

Nik: It's been about 5 years now, although at the start it could barely be called design, just random Photoshop doodling.

JH: Have you always done design, or did you start in another field?

Nik: Well it's the only job I've done professionally. I started off as a web designer based on my ability to produce graphics and the fact that web coding is pretty easy. Since then I have moved into pure illustration and design as I find it more creatively rewarding. I actually have a degree in physics though, and was probably going to be using that for my career before I found design.

JH: What made you want to become a designer?

Nik: I just enjoyed it. I started off doing it as a hobby, and when I realized I could make a career out of it, it wasn't too hard a decision to make.

JH: Do you freelance for a living, or do you have an employer?

Nik: I freelance, all my work is commission based.

JH: What do you do in your spare time?

Nik: Oh all the usual stuff, going out for drinks, reading, playing games down the pub, computer games. I go to see a lot of live music as well. I try to make it to a gig every 2 weeks at the least.

JH: Would you mind giving our readers a brief overview of what an average day is like for Nik Ainley?

Nik: That's very difficult as it changes massively depending on if I have a lot of work on or not. If I don't I could literally check my emails and then spend the rest of the day out or messing about the house. If I've got a serious job on and need to get work I might spend 12 hours at the computer and barely talk to anyone.

JH: Looking over your art, you have an extremely diverse portfolio, ranging from melting faces to elaborate typography... where do you find your inspiration?

Nik: I just like to make things that look nice and try to have a go at every image type within my images. If I could paint, or do complex 3D art or character design I'd be doing that as well. Unfortunately I'm not that multi-talented.

JH: If you ever find yourself short on creativity, what sorts of activities do you do to get it back?

Nik: I find you have to work it through. I just try and get all the crap ideas out of my head and onto canvas. Until the dodgy ideas are out I don't get new ones coming in.

JH: A lot of your work is reminiscent of traditional artwork, do you like free hand drawing (inks, painting, etc) as well?

Nik: Not at all actually, I am a purely digital artist. Partly because I've never really done traditional art and so would be rubbish at it, but also because I have very literal interest in it. The power of the computer for producing art is so exceptional I would feel like my hands were tied with traditional art.

JH: I see you have done a lot of work for well-known magazines, what tips can you give our readers on getting these types of deals? Did you contact them, or vice-versa?

Nik: Well they contacted me, I think that's mostly how it works. Although for Digit I did send stuff in for their showcase and ended up being commissioned and doing the cover. That's a good way to get their attention, otherwise I think they spend a lot of time looking for new talent so a website is essential.

JH: What has been the most fun project to work on so far?

Nik: I couldn't pick one really, generally I have the most fun when I've just started a personal picture and I'm getting something I like going. Since I have complete creative freedom with these projects and no deadline it can great fun just experimenting.

JH: On your page (ShinyBinary.com) you list many programs that you use... what are the primary 3 for the majority of your designs?

Nik: Photoshop, Photoshop and Photoshop. I spend nearly all my time in it, the others are just for additional details generally.

JH: What is your favorite website? (besides Phazm of course...)

Nik: Probably something boring like the BBC news site. I waste half of my time reading any old rubbish on that site.

JH: Do you do much web design?

Nik: Not anymore. As I said I was a full time web designer for 2 and a half years or so, spending most of my time writing HTML and CSS and producing web graphics, I found it a bit dull though.

JH: Imagine yourself in 20 years... what do you see yourself doing?

Nik: Absolutely no idea… I hope it's creative though. I'd be disappointed if I was still doing the same thing though, I need to move on.

JH: What is your favorite beverage?

Nik: A nice cup of tea.

JH: Any additional tips you would like to impart on our readers?

Nik: Nope, I'm sure they've got more sense than I do.

JH: Thank you again for your time, Nik. Your art is truly inspiring!

You can buy prints of Nik Ainley's art here.

The fact is, IE6 is not that hard to code for, as long as you have a good understanding of Semantic XHTML, you shouldn't have much of a problem. In this post, I'm going to outline some of the steps you can take to reduce the time it takes to develop your pages for Internet Explorer 6.

The Stats

According to TheCounter.com, IE6 is at 50%, the next largest being IE7 at 24% and following that is FF, at 13%.

Bar graph showing top 3 browsers. -- Image courtesy of TheCounter.com

Of course, these results will differ from your own website, which is a much better reference. For instance, according to Phazm.com's statistics, IE7 is (very) slightly more used than IE6 -- 24.7% to 24.5%.

Either way you look at it, Internet Explorer 6 still constitutes a very large portion of visits. I don't know why anyone would suggest abandoning 25-50% of their traffic, but if you ask me, it's not a good decision. Read below for some tips on speeding up the entire process.

Reset Your CSS

There are two main differing behaviors in browsers: Their default rendering of HTML elements, and how they handle CSS. To start with, I recommend you always (or whenever possible) use a CSS Reset. Resetting the CSS takes away one of the differing behaviors between multiple browsers. For example, IE6 and Firefox both give <p> tags a default margin, however, that margin is slightly different between both browsers. When you eliminate that behavior, and set everything to have no default(browser) styling, you make your job a whole lot easier. Eric Meyer has created a fantastic CSS Reset which you can find here.

There are several ways you can use this CSS. I prefer to import it within my main/global CSS File.

@import url("reset.css");

Simply put this at the top of the CSS file that is linked on every page on your site, and it will set nearly everything back to have no styling whatsoever. Obviously, there are downsides to doing this. The first is that you really need to start from a clean slate, because any elements that depend on the default margin of a header tag are going to break. The other downside is having to re-declare styles, such as making a list have bullets, making text within italic, and so on.

Conditional Comments

Using conditional comments, most (if not all) CSS hacks can be avoided. Because we only have to worry about the rendering of the CSS, and not the default styling (due to using the CSS Reset) this can actually go quite fast.

Now, some say that you shouldn't use a conditional comment, due to it being proprietary Microsoft code, but I disagree. Not only does your page still validate, other browsers simply ignore the code - I have never had an instance where a properly formatted conditional comment went awry in any browser.

Here is the syntax for creating a conditional comment:

<!--[if (condition) IE (version)]>
Code to run
<![endif]-->

Possible conditions/operators:

• lt = Less Than
• lte =Less Than or Equal To
• gt = greater than
• gte = Greater Than or Equal To
• ! = Not

Using the above operators, if you want to have a stylesheet for all Internet Explorers below IE7, you would put the following in your code within the tags:

<!--[if lt IE 7]>
<link rel="stylesheet" href="LegacyBrowser.css" type="text/CSS" />
<![endif]-->

This will call a separate CSS file, called LegacyBrowser.css, which will only affect IE versions below IE7.

Styling the Page

Now, get your page working in Firefox. Once you have done that (completely) you open up your page in IE6, and start creating over-ride classes as necessary. If .imagedisplay is 3 pixels too far to the left, simply add in your LegacyBrowser.css:

.imagedisplay { margin-right : -3px; }

or something similar, to get the desired effect.

Note that if you have already specified margin-right, you may need to add !important to the mix, like so:

.imagedisplay { margin-right : -3px !important; }

This is a very loose example, and in most cases you will simply replace a margin/padding with a slightly increased or decreased value, and use !important.

In this way, you can avoid using CSS Hacks that could possibly break in future browsers, and you give yourself more control over how your page displays in Internet Explorer.

Feedback

I would love your comments regarding this topic. Do you agree that IE6 is still prevalent enough to be worth the additional coding time, or do you think it is a waste of time to cater to a dying browser? Let me know!