The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?

Semantic Mark-up: An Unordered List

Flickr places all of the photos in divs. These are then styled to float next to each other or appear however you like.

In my opinion, the most semantic way to mark-up photos like this would be to create an unordered list. A photo album is essentially a list of photos.

This could be an ordered list if the photos were intended to be sequential – like a photo essay or a comic book – but the average photo album is just a collection of pictures.

The mark-up would look something like this.

<ul id="images">
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
</ul>

The images would then be displayed in a long, vertical list.

Styling – Making the List Inline

In the end, we’d like to have the images sit side by side. Ideally, they’d form a rectangle of either 2 x 3 pictures, or 3 x 2.

The first thing we want to do, then, is remove the list style type, clear the padding/margins of the list, and make the images appear next to each other. The last bit we can achieve by giving the list items the “display: inline” css declaration.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#images li {
  display: inline;
}

This would create a simple horizontal list, like this…

Width: Restricting the Number of Columns

Notice how the list terminates at the end of its container div and continues on a second line?

Without a width declaration, the unordered list expands as large as wide as it can. When that width limit is hit, it starts a second line, and continues until all of the list items have been displayed.

We can use this to our advantage by setting a width declaration. This allows us to limit the number of images to be displayed in each row.

If our images are 75px square, and we want to display three images across, we can set our width to be about 250px. The extra space can be used later for paddings and margins – but the images will appear left justified within the list container.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 250px;
}
 
#images li {
  display: inline;
}

This would create a list like this…

Finishing Touches: Padding and Borders

With the basic structure complete, we can add a few finishing touches.

First, we might we to add a little padding to the images. This would space them out a few pixels from each other so that they don’t appear so cramped.

#image img {
  padding: 4px;
}

Adding this line to the css file would change the image album to this.

Finally, a cool effect for images is to add a border around the image. If you include a padding value for the img tag, the border is placed 2-3 pixels away from the edge of the picture. It gives a nice framing effect.

#image img {
  padding: 2px;
  margin: 2px;
  border: thin solid black;
}

This final change would look something like this.

By using an unordered list to mark-up your image collection, you end up with semantically correct and simple to style content. Much better, in my opinion, than a string of divs.

Uploading the images and creating the album was easy. However, I noticed that the code Google creates to embed the slideshow (a flash file) is not standards compliant – it uses the <embed> tag.

How can we convert this code to a standards compliant version?

The Original Picasa Embed Code

The code that Google generates to embed the flash file uses the embed element. The embed tag includes all of the pertinent information – the swf file, the height, the width, and the parameters.

<embed type="application/x-shockwave-flash"
  src="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192"
  flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss"
  pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

The problem here is that the code uses the embed tag. This is no longer recognized as a valid html element – although it still functions in most browsers.

Converting Embed to Object

We can, however, convert this embed element into an object element. The object element is standards compliant, and with a few parameters it is compatible across most browsers.

To do this, let’s identify the information that we’ll need from the original Picasa code.

Obviously, we’ll need the flash file. This is the value of the “src=” attribute. We’ll also need the height and width, which are pretty obvious. Finally, we’ll need the parameters to be passed to the flash movie – located in the flashvars parameter.

Here’s what an object element might look like to display a flash movie.

<object type="application/x-shockwave-flash"
  data="flash-file.swf" height="400" width="400">
  <param name="movie" value="flash-file.swf" />
</object>

We create the object and give it the attribute type="application/x-shockwave-flash". This tells the browser it is a flash movie.

We pass the name of the flash file with the data attribute and the “movie” param element – notice that the filename is passed twice here.

Finally, we pass the height and width parameters as attributes to the object element.

Filling Out the Object

Now we can take the values provided for us by Google and create a new, valid object to display the flash slideshow.

The only extra thing we need to know is that we can send another param element – name=”flashVars” – to contain the flash parameters.

<object type="application/x-shockwave-flash"
  data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192">
  <param name="movie" value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
  <param name="flashVars" value="host=picasaweb.google.com&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss" />
</object>

This should do the trick and display our Flash slideshow in a standards compliant way. You should also be able to apply this to any other widget that displays a flash movie.

Also, here are two minor things to keep in mind.

The param elements are self closing – i.e. <param />. The param element doesn’t contain any text, so it must be self closing to be standards compliant.

The flashVars value is constructed as a query string. It utilizes ampersands (&) to separate key/value pairs. Ampersands are a standards no-no – they should be escaped as an html entity (&).

There are some steps you can take later on to protect your applications from this unknown input. But first, let’s take a look at why you can never trust a user’s input and just how easy it is for someone to spoof a form.

What Does It Mean to Spoof a Form?

It could mean a number of related things, but generally speaking it means submitting form information in a manner other than the original form was intended. The form processing script, completely unaware of the situation, processes the input as if it came from the original form.

For example, if a form generates a URL query string, one way to spoof that form would be to modify the query string and re-visit the URL. The new page would think that my query came from the original form – even though I really crafted the query myself.

Why would someone want to do this? It may be curiosity. “I wonder what happens if I change this variable…” Or it may be malicious. A hacker can spoof a form processing script to send dangerous input to your PHP script.

The Problem With the “Get” Method

It is easiest to spoof a form if the information is transmitted through the “Get” method. This means that the variables are placed into a query string and appended to the form’s action URL.

Let’s say you have a form with three elements – a textarea element, a hidden input, and a select element. Logically, you might think that the hidden input is restricted to whatever value you set it to and the select element is restricted to one of the options you provided.

To make this a little more concrete, let’s assume the textarea contains a post to a multi-user blog, the hidden input contains the author’s name, and the select element includes the category number.

When the user enters the values and clicks “submit,” he’s sent to a URL that looks something like this.

processing.php?text=Bla+bla+bla&author=Walkere&catid=2

What if I wanted to pretend to be someone else – like Bob? I could simply change the ‘author’ variable.

processing.php?text=Bla+bla+bla&author=Bob&catid=2

Maybe I want to post my message in a special category – one that isn’t normally open to me. Again, it’s as simple as changing the catid variable to another number.

Now, a well designed script will notice these data flukes and either ignore them or spit out an error. However, if you have too much faith in form input – and you blindly used the values from your form – you’d soon be in a mess of trouble.

But Post Is More Secure… Right?

The “Post” method is somewhat more secure. Why? Because all of the information is transmitted behind the scenes.

When I was younger, I tried to meddle with the $_GET variables of an online game that I played. I never would have known enough about the workings of the script to spoof a “post” form – but it was so blatantly obvious with “get.”

However, someone “in the know” can easily spoof a form using the post method as well. One way to do this is… write your own form.

If I look at the HTML source of your form, I can easily see what values you’re submitting to the processing script. I can recreate those input elements on a form on my site – and then set the action to your processing script.

In this way, I could make the hidden and select statements regular text inputs – and input whatever values I want. If you’re form processing script isn’t savvy, my custom values will get passed on to the database.

One thing you can do to prevent this is to check the referring URL coming into your script. This will prevent someone from simply creating a form off-site to spoof your script.

Sending an Actual HTTP Request

The final, and most devious way, to spoof a form is to craft your own HTTP request in PHP. This is essentially what a form does – but you can manually craft the request to your liking instead of letting a form do it.

How do we do this?

First, we create a stream context. To do that we create a simple array and then call the function stream_context_create.

$params = array();
$params['http']['method'] = 'post';
$params['http']['headers'] = 'Referer: http://www.google.com';
$params['http']['content'] = $data; // A regular query string with parameters
 
$context = stream_context_create($params);
 
$fp = fopen($processingUrl, 'r', false, $context);
fpassthru($fp);
fclose($fp);

The actual form values are placed in the $data variable. This is in a typical query string format – key=var&key2=var2, etc. The values should also be url encoded.

The nifty thing here is that you can manually specify HTTP headers to be sent with your request. In this example, we set the referring URL to Google. If someone knew your processing script checked the referrer’s address – they could simply spoof it with an HTTP header.

Never Trust Input

The bottom line is – never trust input that you haven’t thoroughly tested, validated, and cleaned.

Even if an input item is supposed to be hidden or supposed to come from a specific set of values – you can’t be sure that the form processing script is going to receive the correct value. The script needs to check the info and make sure that it got what it was looking for.

It’s pretty simple for someone to spoof your form and send any input they like to your processing script. If you don’t close the security holes, then someone will eventually blow them open for you.

This article will look at how to build a basic feed of data – for our purposes, we’ll consider random quotes. It will also illustrate how to use SimpleXML to build the feed for us.

The RSS 2.0 Standard

RSS feeds, like XML in general, have specific standards. In order to be use-able across platforms, it is imperative that standard syntax and naming patterns are used. If you’re unfamiliar with the RSS 2.0 standard, you should look through a copy here.

Before we get to building the feed, let’s identify what tags we’re going to use.

The entire feed is wrapped in an <rss> tag. Within that element is a <channel> element.

The <channel> element has a number of optional child elements. The basic ones we’ll want to include are – <title>, <description>, <link>, and <pubDate>.

The actual data (our random quotes) is wrapped in <item> elements. These also have a bunch of optional parameters. We’ll be using the basics – <title;>, <description>, and <pubDate>. Notice that there’s no link – because we’re feeding simple data, not articles!

Creating the SimpleXML Object

In order to create the SimpleXML object, you need to feed it some kind of XML string. Normally this would be a completed file or string – like an existing feed.

Since we’re building the feed with SimpleXML, we don’t have a lot to start with. We can give it a very basic string to create the object – an opening and closing rss element.

$xml = new SimpleXMLElement('<rss version="2.0"></rss>');

Adding Child Elements

The addChild() method of SimpleXML allows us to add child elements to existing elements. In addition to adding a child element, the method returns a reference to the new child – allowing us to manipulate it in turn.

The first child we’ll need to create is the channel element.

$channel = $xml->addChild('channel');

That creates the channel element and stores a reference to it in $channel. We can then use the $channel variable to add more children – the information defining the channel element itself.

$channel->addChild('title', 'Test Feed');
$channel->addChild('link', 'http://www.earn-web-cash.com');
$channel->addChild('description', 'This is a feed testing how to build an RSS feed in SimpleXML');
$channel->addChild('pubDate', date("D, d M Y H:i:s T"));

You may want to include other optional parameters that are included in the specification. Just add another $channel->addChild() call with the parameter’s name and its value.

Creating the Random Quote Items

At this point, we just need to add our item elements and we’re done. To do that, we’ll loop through an array of data, create an item element, and add the appropriate children to it.

Let’s assume that I retrieved information from a database table with three columns – title, description, and pubDate.

while ($row = mysql_fetch_array($result)) {
  $newItem = $channel->addChild('item');
  $newItem->addChild('title', $row['title']);
  $newItem->addChild('description', $row['description']);
  $newItem->addChild('pubDate', date("D, d M Y H:i:s T", $row['pubDate']));
}

Again, you can add extra data to your feed by adding extra child elements.

Outputting the Feed

Now that the entire feed is stored in the $xml variable, we just need to output it.

In doing this, we’ll do two things. We need to define the content-type as xhtml/xml. Then we use the asXML() method to print the information in an xml string.

header('Content-Type: application/xhtml+xml');
echo $xml->asXML();

You could alternatively save this to an xml file. There are two ways to do this – either file_put_contents the output from asXML() or pass a filename as the parameter for asXML().

file_put_contents($filename, $xml->asXML());
//  or ...
$xml->asXML($filename);

Start Feeding

With this basic script, you can serve up any kind of information as an RSS feed. This makes it easy for people to read it in their RSS readers or even access the information on the cell phones.

There are plenty of types of data you could use this for – quotes, jokes, question of the day, trivia, tip of the day, etc. By publishing tiny bits of data on a daily basis, you keep your users coming back for more – but you don’t need to publish full size articles every day.

In case you ran into trouble putting the script together, here’s the entire source code with an array of data built into it.

$items = array();
$items[] = array('title' => 'Mark Twain on Profanity', 'description' => 'Under certain circumstances, profanity provides a relief denied even to prayer.');
$items[] = array('title' => 'Woody Allen on People', 'description' => 'It seemed the world was divided into good and bad people. The good ones slept better... while the bad ones seemed to enjoy the waking hours much more.');
$items[] = array('title' => 'Will Rogers on Vets', 'description' => 'The best doctor in the world is the veterinarian. He can\'t ask his patients what is the matter - he\'s got to just know.');
 
//  Create the root element - RSS
$xml = new SimpleXMLElement('<rss version="2.0"></rss>');
 
//  Create the channel element, a child of RSS
$channel = $xml->addChild('channel');
 
//  Add random channel information
$channel->addChild('title', 'Random Quotes');
$channel->addChild('link', 'http://www.earn-web-cash.com');
$channel->addChild('description', 'This is a feed of random, interesting quotes.');
$channel->addChild('pubDate', date("D, d M Y H:i:s T"));
 
//  Loop through and create item elements
foreach ($items as $item) {
  $newItem = $channel->addChild('item');
  $newItem->addChild('title', $item['title']);
  $newItem->addChild('description', $item['description']);
}
 
//  Output
header('Content-Type: application/xhtml+xml');
echo $xml->asXML();

In this post, we’ll explore the code used to set up this board. Once that’s done, the next step will be to create a php script to evaluate some of the game’s logic.

Recap: The Game Board Concept

First, let’s take a step back and recap our Javascript game board concept.

The basic building block of our game board is a div element. This div element is styled with a CSS stylesheet – 50px by 50px. By using floats and clearss strategically, we can stack 9 of these div elements into a 3×3 box.

Javascript is added to make these boxes functional. An “onClick” handler is used to call a Javascript function that changes the background image of the div. This effectively marks the square as either a “Circle” or “Cross” for Tic Tac Toe.

To alter the div – and also to add textual output – we’ll be using Javascript’s powerful DOM functions. These allow us to grab a specific element by it’s ID and change it.

Creating Graphics

I created two images in Inkscape to use for this board. Each is a 50×50 png file – with a gray background and a black border. The actual token (the circle or cross) is red and laid on top of the gray background.

I’m no great artist, but these should work for a functional demo. We can worry about making nice circle and cross tokens later. I think getting the game working is more important than making it pretty from the get-go.

Turning Our .js Script into a Class

In making this a functional board, I also converted the script into an actual class. The script may end up being somewhat large and unwieldy – and an object oriented approach may help us keep it tidy and clean. Or it may add a lot of overhead… but I like objects.

In our HTML file, we’ll create the object like this.

<script type="text/javascript">
var tictactoe = new game();
</script>

In the attached .js file, we actually define the game object. Here’s part of the object definition.

function game() {
  //  Array to hold the bgImgs
  this.bgImgs = new Array();
    this.bgImgs[0] = 'tttcircle.png';
    this.bgImgs[1] = 'tttcross.png';
 
  //  Player information			
  this.currentPlayer = 0;
  this.players = new Array();
    this.players[0] = "Player One";
    this.players[1] = "Player Two";
 
   return true;

This class constructor does some of the initialization for us.

First, it creates an array with background images. At the moment we’re only using two images. However, this technique would be useful if you had a more complex map – with 10-15 images you could lay over a div.

Second, we create some player information variables. The ‘currentPlayer’ property is going to track whether the ‘cross’ or ‘circle’ player is currently taking a turn. The ‘players’ array will just hold the names of those players for now.

The Background Image Changing Function

One of the major methods of this class will be changeBackground(). Just like in the previous example, this method will change the background style of a given div tag. This way we can change it from an open square to a circle or cross token.

  this.changeBackground = function (boxId) {
    var box = document.getElementById('box-' + boxId);
    box.style.background = 'transparent url(' + 
      this.bgImgs[this.currentPlayer] + ') top left no-repeat';
 
    box.removeAttribute('onClick');
 
    this.changePlayer();
  }

This should be pretty straightforward. We’re storing the ‘div’ element in the ‘box’ variable. We’re then setting the ‘background’ style as we would in a css style. Remember that we stored the background images in an array (this.bgImgs) and this.currentPlayer corresponds to a key in the this.bgImgs array (either 0 or 1).

The ‘box.removeAttribute()’ method is removing ‘onClick’ from that div. We can’t use a square a second time, so we might as well eliminate the onClick handler altogether.

Finally, this.changePlayer() is calling a new method. This is going to help us switch from Player One’s turn to Player Two’s turn.

One Turn to Another – this.changePlayer()

The last method we need to declare for this class at the moment is changePlayer.

This will toggle the active player – which in turn affects whether a circle or cross is placed on the board. For some added effect, we’ll also create a new html element to display a message that says who’s turn it is.

  this.changePlayer = function () {
    //  Switch the active player
    if (this.currentPlayer == 0) {
      this.currentPlayer = 1;
    } else {
      this.currentPlayer = 0;
    }
 
    //  Get a reference to our 'message' element and create the message
    var box = document.getElementById('message');
    var msg = "It is " + this.players[this.currentPlayer] + "'s turn.";
    var txt = document.createTextNode(msg);
 
    //  Erase any existing text
    while (box.hasChildNodes()) {
      box.removeChild(box.lastChild);
    }
 
    //  Add the text node (our message) to our element
    box.appendChild(txt);
  }

Again, this is pretty straightforward. The DOM functions are amazingly simple – once you see how they work.

‘box’ is a reference to our element (id = message). The msg variable is a temp variable I created to hold the string. The ‘createTextNode’ method creates a new block of text (with our msg) that we can then insert into an HTML element.

The while() loop is simply there to erase any old text. As long as our ‘box’ element has any child nodes inside of it (text or other HTML tags), the loop will execute and delete one of those child nodes each time. This way we have a clean slate on which to write down who’s turn it is.

Seeing It In Action

Well, that’s really all there is to it. Have a look at this functioning demo. If you had trouble piecing together the example code, you can download the source files (.js, .css, and two .png) from the list below.

Good luck, and be sure to check back soon. Our next task is going to be a real challenge. We need to add some logic to this game – evaluating victoary conditions and creating AI!

Source code files:

• Basic Tic-Tac-Toe JS File
• Tic-Tac-Toe CSS File (#2)
• Tic Tac Toe Cross Image
• Tic Tac Toe Circle Image

This tutorial will focus on the first part of making a basic board game – creating a board. The end result will be a three by three game board suitable for use in developing a tic-tac-toe game.

Game Development with JS, AJAX, and PHP

How can we use JS and PHP – connected through AJAX – to develop an online game?

Javascript’s main use for us is to create an interface for the game. Through Javascript we can capture user input – i.e. mouse clicks and text. We can also alter the game’s output – changing the HTML of the page, adding images, and moving things around. Javascript will provide a lot of the front end work.

PHP, on the other hand, is a more robust language for dealing with the logic of the game. PHP could be useful for developing an AI and evaluating winning conditions. It also offers a great way to store information for later use through flat files or database integration.

If we’re going to use both Javascript and PHP, we’ll need to use AJAX. This is the glue that holds the whole thing together. It will send input from the main Javascript to the PHP processing scripts. The PHP script will then send info back to the Javascript and it will alter the page’s layout accordingly.

Step One: Building a Game Board

The first step in creating a graphical online game is to build a game board. The most basic board I could think of – and therefore a good starting point – is a tic-tac-toe board.

First, we should define and create our basic building block. A square.

In terms of HTML/CSS, our square will be a div tag. We’ll be able to position and style it to our liking, and we can add javascript triggers like “onClick” to help run our Javascript.

Our first box is going to be a simple 50px x 50px square. When you click it, it will change background colors to black.

Here’s the CSS we’ll use for the square.

.box {
  width: 50px;
  height: 50px;
  border: thin solid black;
}

Inside the html body we can create our box like this.

<div class="box" id="box" onClick="makeBlack();"></div>

Finally, we need to define our Javascript function makeBlack(). We’ll access the div element through it’s ID (‘box’) and change it’s background style to be black.

function makeBlack() {
  var box = document.getElementById('box');
  box.style.background = 'black';
}

Now we’ve got a building block! We just successfully used Javascript and DOM to create a click-able box. With some tweaking, we can turn this into a nifty 3×3 grid for Tic Tac Toe.

Step Two: Build a Grid

For Tic Tac Toe, we’re going to need a 3×3 grid. We can modify our CSS a bit and create 9 separate divs to accomplish this. Add the following lines to the CSS for .box, and create a new class .break.

.box {
  float: left;
}
 
.break {
  clear: bloth;
}

This way our boxes line up in a row. If we include a “break” class in our div, we can start a new line. Therefore we should update the html like this.

<div class="box break" id="one" onClick="makeBlack('one');">1</div>
<div class="box" id="two" onClick="makeBlack('two');">2</div>
<div class="box" id="three" onClick="makeBlack('three');">3</div>
<div class="box break" id="four" onClick="makeBlack('four');">4</div>
<div class="box" id="five" onClick="makeBlack('five');">5</div>
<div class="box" id="six" onClick="makeBlack('six');">6</div>
<div class="box break" id="seven" onClick="makeBlack('seven');">7</div>
<div class="box" id="eight" onClick="makeBlack('eight');">8</div>
<div class="box" id="nine" onClick="makeBlack('nine');">9</div>

Notice that each box has it’s own unique ID – one to nine. I also changed the makeBlack() function to include a parameter – an ID. Let’s update the makeBlack() function to utilize this to change the specific box that we click on.

function makeBlack (boxId) {
  var box = document.getElementById(boxId);
  box.style.background = 'black';
}

Step Three: Use a Background Image Instead of a Background Color

Turning a box to a black background color isn’t that impressive. But it’s easy to use as a demonstration.

For a game, it would be much more useful to make an image appear in our div. We can do that by editing the “background” style of the div in the makeBlack() function. Note: You might also want to change the name of the function to something more descriptive, like changeBackground().

Here’s how to do it.

function changeBackground (boxId) {
  var box = document.getElementById(boxId);
  box.style.background = 'transparent url(image.png) top left no-repeat';
}

The property “box.style.background” accesses the “background” css style for the “box” id. Give it a value just like you would in a css stylesheet. In this case, we’re giving it a background of “image.png.” You might want to change this to a “circle.png” or a “cross.png” that you create for your game.

Step Four: Changing the onClick Event

The last thing we want to look at in this introduction is how to change the onClick event for our div. You might want to get rid of it altogether – or maybe change it to a new function. For example, after turning the box black, you might want to make the onClick call a new function – makeWhite().

We can do this through another DOM method, similar to the way we accessed the styles before. Assuming we have the same variable box that refers to our div, here’s what we need to do in our function.

//  Get rid of onClick altogether
box.removeAttribute('onClick');
 
//  Change onClick to a new function
box.setAttribute('onClick', 'makeWhite();');

Where To Go From Here?

Now that you’ve got a basic 3×3 grid and you know how to make it respond to user input, you can get started on making a game.

Here are a few of the things you’ll want to think about next.

• I need some images to place in my boxes.
• How Can I Alternate Players (and images)?
• How Can I Determine Who Wins?
• How Can I Make the Computer Play (AI!)?

You can go ahead and get started on your own – but I’ll certainly return to this topic within the next week or two with some more examples. After the next tutorial, we’ll have a working Tic-Tac-Toe board driven solely by Javascript.

His parser wasn’t working – because all of the information was stored in attributes instead of child elements. What’s the difference between the two? And how can we fix it?

Use SimpleXML.

Difference Between a Child and an Attribute

For starters, let’s take a look at a sample XML file. This will help illustrate the difference between a child element and an attribute, and it will give us something to work with later on.

<?xml version="1.0" encoding="UTF-8"?>
 
<library>
  <book lang="en">
    <author>John Steinback</author>
    <title>Of Mice and Men</title>
  </book>
 
  <book lang="en">
    <author>F. Scott Fitzgerald</author>
    <title>The Great Gatsby</title>
  </book>  
</library>

This simple XML file is a “library.” It contains a list of books – each of which has an author, a title, and a “lang” attribute.

In this example, “book” is an element. It is a child element of library – which means it is an element created inside the open library element. You could also refer to the library element as the parent of all the book elements.

To create a child element, you simply create a set of tags within a larger set of tags. The book is a child of library, while the author is a child of book. We could create more children for “Author” – like age, sex, and hair color.

By contrast, “lang” is an attribute. It is defined inside the opening tag of an element. By declaring lang="en" we are saying that the book has the attribute of being written in English.

It is simply another (perhaps more annoying) way to store information in an XML file. Most basic XML parsers look for tags and content – but the attribute is neither. It’s contained inside a tag, so it needs to be handled specially.

Thankfully, SimpleXML is designed to help us do just that.

Loading the File in SimpleXML

I saved the xml file above in “xmltest.xml.” In my php script, I can load it into a SimpleXML object with this function call.

$xml = simplexml_load_file('xmltest.xml');

This creates a SimpleXML object which is a tree of connected objects. The root object represents the “library” element. It then has an array of children called “book,” and each “book” element has two children element of its own.

Using the SimpleXML object structure, we can access some pieces of our XML document like this.

var_dump($xml->book[0]); //  All of the info in Book 1
echo $xml->book[0]->author; // First book, John Steinbeck
echo $xml->book[1]->title; // Second book, The Great Gatsby

Accessing the Lang Attribute in the Object Tree

The initial question now resurfaces – how do we access an attribute, like the ‘lang’ attribute?

All of the elements are nicely arranged in a tree. The parent element has a child element, which has a child element, so on and so forth. We can easily access these as related objects like we did above.

The attributes are exploded into an array and attached to the element that they define. So, for example, we defined a ‘lang’ attribute for our book element. Therefore, the value of lang will reside in an array attached to that specific book element.

We can access it like this.

echo $xml->book[0]['lang']; // en

To find an attribute of an object with SimpleXML, you navigate to the element in question and then access an array indexed by the names of the attributes. In this case, our attribute was named ‘lang’ so we use ‘lang’ as a key in the array to get the value.

For simplicity’s sake, it is usually better to define all of your XML data as child elements. This allows you to easily expand data types in the future, and you won’t have to mix methods for accessing the data.

However, if you’re working with someone else’s XML file, you may need to look up attributes. Now you know how.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.

Look At the HTML/CSS

Before we start making things dynamic, let’s look at the basic HTML.

Let’s say we want to make a list of items – in a table – maybe a list of emails. The end result should be a table with alternating background colors for rows – white and light blue.

If we were to create this table by hand, it might look something like this.

<table>
<tr class="blue"><td>E-mail subject</td><td>Sender</td></tr>
<tr class="white"><td>E-mail subject</td><td>Sender</td></tr>
</table>

This assumes that we have a CSS class defined as “blue” with a blue background and “white” with a white background.

Adding Some PHP to Assign Classes

We’re setting the background color by adding a class declaration to the table row. The first step in making this dynamic is to use PHP to echo the class. Like this…

<tr class="<?php echo 'blue'; ?>"><td> ... </td></tr>

We’ve taken the same table row element from before and replaced “blue” with a php snippet that echos the same phrase, “blue.” The end result is the same HTML that we created in the first example.

Dynamically Choosing the Class

The final step in making this dynamic is to add a conditional statement to the PHP block. For example, let’s say we’re executing a loop 5 times. On the odd iterations (1, 3, 5) we’ll use “blue” as the class. On the even iterations (2, 4), we’ll use “white.”

To test whether or not a number is odd, you can use the modulus (%) operator. This returns the remainder of a division – so 2 % 3 = 1. With a little basic math theory, we know that if a number is divided by 2 and has no remainder it’s even – but if there’s a remainder of 1 it’s odd.

Here’s what the loop might look like.

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php
      if ($x % 2 == 1) { echo "blue"; }
      else { echo "white"; }
      ?>"><td> ... </td></tr>
<?php } ?>

That If Statement Is Kind of Long…

Well, we can shorten that up. This is a great place to use the obscure and un-readable ternary operator in PHP. It’s a shortcut that allows you to write a simple if-statement in one line.

For example…

echo (true ? "Yes" : "No");

The ternary operator takes three parts – the conditional statement (in this case I just wrote true), a value to return if the statement is true (“Yes”), and a value to return if the statement is false (“No”). I echo’ed the result just so you could see what the statement outputs (in this case, “Yes”).

We turn our previous if statement into a ternary operator statement and shorten up that code block quite a bit. Like so…

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php echo ($x % 2 == 1 ? "blue" : "white"); ?>"><td> ... </td></tr>
<?php } ?>

Creating these table rows is just one example of how you can use PHP to help spice up your HTML. With this concept, you can dynamically alternate styles based on a bunch of factors.

How else could you use this?

You could alternate the background colors of comments in your blog template. You could include a bottom-border after every five rows in your table. You could make a calendar module and display Saturday and Sunday in boldface.

The options are really endless – so long as you understand the basic principal.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff – like style different “input” types differently, style anchor tags with titles differently, and etc.

How does it work?

An attribute selector follows this basic formula…

[attribute="value"] { style information... }

Like an id or class selector, you can use it alone (as in the example above), or attach it to a specific html element.

How can we use it? Here are a few examples.

Style Links with Title Elements Differently

You could use this to give users a hint that an anchor tag or link has a title element. This way they know to hover over the link and read the tooltip.

a[title] { border-bottom: thin dotted blue; }

That declaration gives any anchor tag containing a “title” attribute a thin dotted blue underlining. You may have to tweak it a bit to make sure the normal anchor-underlining doesn’t interfere with it.

Style Particular Input Types on Forms

You can use this to style Submit buttons, Text Inputs, etc. – independent of other input types.

input[type="submit"] {  background-color: blue; }

This simple declaration gives all Submit buttons a blue background color. Fairly silly, but the point is the declaration – not the actual styling. You could do something similar with these declarations…

input [type="text"] { /* style information */ }
input [type="password"] { /* style information */ }

Style Internal Links Different from External Links

This is a really nifty trick… but unfortunately it requires a bit of CSS 3. This will probably invalidate your CSS, and your mileage may vary.

It’s still interesting to try out.

You can use “^=” instead of “=” to signal that the browser should match any element with the given attribute that contains the quoted string. It doesn’t have to be an exact match. So you can use “^=’mydomain.com’” to match any links that point to the domain you’re working on.

Like so…

a[href^="earn-web-cash.com"] { /* style information */ }

You could use this to given internal links a slightly different color – some kind of queue to help the user differentiate between internal and external links.

For a longer list of ways to use this neat little trick, check out this post Hip to Be Square. There’s also a list of the different ways to search for values (like ^=) – which will be valid in CSS 3.

Using some simple css and a little color know-how, he shows you how to turn a square button into a pseudo 3-dimensional button. I’ll take it a step further and add a gradient background image to enhance the lighting effect. Like this…

Web Cash

We can build this button up in a couple of steps. First, we need to make our anchor tag (link) into a block – with some padding and a background.

Web Cash

a.button {
   background: #ab7f20;
   padding: .5em;
   color: white;
   text-decoration: none;
   font-weight: bold;

That gives us a nice, squarish look… kind of like a button. But it definitely looks flat and two dimensional. The next step we’re going to take is to add a gradient background. This will add a nice lighting effect – giving the button a bit of depth.

To do this, we need a background image. I made a gradient image in GIMP (read this tutorial to learn how to create a gradient image like this). Then we need to add the image to the css declaration by changing one line.

Web Cash

a.button {
   background: #ab7f20 url(uploads/2008/01/gradient-button.thumbnail.png)
     repeat-x top;

Notice that the color (#ab7f20) is the same as the second color in the gradient image. This gradient is long enough to color the whole area – but if our button gets too tall, we want it to blend in nicely.

The last thing we need to do is give it some borders – light on the top and dark on the bottom. This will give it the illusion of being hit by the light. It’ll also accentuate the effect of the gradient background image.

Web Cash

a.button {
   border-top: #f6daa3 3px solid;
   border-right: #724f05 3px solid;
   border-bottom: #724f05 3px solid;
   border-left: #f6daa3 2px solid; }
 
a.button:hover {
   border-top: #724f05 3px solid;
   border-right: #f6daa3 2px solid;
   border-bottom: #f6daa3 2px solid;
   border-left: #724f05 3px solid;
}

Notice that the background colors are flipped when you hover over the button. This gives the illusion that you are actually “pressing” the button – just by flipping the way the lighting hits.

You could also use the special “inset” and “outset” border types to cut down on that last css declaration. You lose a little control over the color and light placement, but it gives a pretty decent effect. Like this…

Web Cash

a.button {
   border: #ab7f20 3px outset; }
 
a.button:hover {
   border: #ab7f20 3px inset;}

And that’s all there is to it. Change the colors to your liking, add a custom gradient image, and you’ve got a nifty little 3 dimensional button.

All it takes is some css. No need to create a bunch of fancy images, and it’s easily expandable to accommodate the text inside of your button.