If you've followed the instructions in Part 1 of the tutorial, you should now know how to edit PHP files (with Notepad++) and have them run on your web host. Hopefully you have followed some of the PHP tutorial at W3Schools and have written a little PHP code to play around with it.
In this part of the tutorial, we are going to start building the adoptables system. Building on the "Basic HTML adoptables system", the goals for this tutorial are:
We'll be writing a script which decides which picture should be showing for a given adoptable, based on what the date is (so that the picture changes automatically as the pet gets older). When people adopt our pets, we'll give them a HTML adoption code so that they can display their pets on their websites. The code will have an image whose source points to our script (so the image that our script chooses will get displayed). Let's try a simple example and build from there. Create a new file called "simple.php" in Notepad++. Paste this PHP script in and save it:
<?php
//Tell the browser that we are sending it a PNG image to display
header("Content-Type: image/png");
//Echo the contents of the image file called "dogbaby.png" to send it to the browser
readfile("dogbaby.png");
?>
Note that it is important that nothing appears before the <?php tag in your file, not even blank lines or spaces. Upload that script along with "dogbaby.png" (an example baby pet picture. I have no artistic talent at all, so you just get a square with "Dog baby" written in the middle.. :)). If you view simple.php in your browser, you should see the dogbaby.png image get displayed. If you don't see the image, there might be a problem with the script you wrote. You won't be able to see the error message that the script prints, because you've told the web browser that the script is displaying a PNG image - You can temporarily put '//' in front of the 'header(' line so that your browser doesn't try to display the error message as an image. This will let you see the error message. Once you solve the error, you can take the '//' away so that your browser displays it as an image again.
This script gets us a long way to accomplishing our goals. We have successfully hidden the location of our pet pictures: Your visitors never see a link or image which points to "dogbaby.png", so they'll never know that it's there. Now we just need to make the script decide which picture file it should show, instead of always just showing "dogbaby.png". Let's change the script so that it can also display rat babies. It will decide which adoptable to display based on the exact link that your visitor uses to view it.
<?php
//Tell the browser that we are sending it a PNG image to display
header("Content-Type: image/png");
if ($_REQUEST['id']==1) {
//Echo the contents of the image file called "dogbaby.png" to send it to the browser
readfile("dogbaby.png");
} else if ($_REQUEST['id']==2) {
//Echo the contents of the image file called "ratbaby.png" to send it to the browser
readfile("ratbaby.png");
}
?>
Upload this new "simple.php" script along with dogbaby.png and ratbaby.png. Depending on which "id" your visitor uses (1 or 2), a different image is shown (either dogbaby.png or ratbaby.png). You'd give your visitors adoptable codes like this for your pets:
- Adopt a dog!
- Adopt a rat!
Notice that the only difference between the two codes is the "id" at the end (it changes from 1 to 2). Now we just have to make the script grow up babies over time. To do that, we can make it check not only the 'id' that the user gives us, but also the current date. Upload the new files dogpuppy.png, dogadult.png and ratadult.png, and replace your simple.php with this script:
<?php
//Tell the browser that we are sending it a PNG image to display
header("Content-Type: image/png");
if ($_REQUEST['id']==1) {
//If the current date is after the start of the 30th of November 2008
if (time() > strtotime("30th November, 2008")) {
//Show the adult version
readfile("dogadult.png");
} else if (time() > strtotime("25th November, 2008")) {
//Show the puppy version
readfile("dogpuppy.png");
} else {
//Otherwise, we haven't grown up yet, show the baby version
readfile("dogbaby.png");
}
} else if ($_REQUEST['id']==2) {
//If the current date is after the start of the 20th of November 2008
if (time() > strtotime("20th November, 2008")) {
//Show the adult version
readfile("ratadult.png");
} else {
//Otherwise, we haven't grown up yet, show the baby version
readfile("ratbaby.png");
}
}
?>
We're still checking the 'id' that the user gave us to switch between the rat and the dog, but now we're also checking the current date (by calling time()), and comparing it against the dates we've decided for our pets to grow up on (30th November, etc). Now our pets will automatically grow up when the date changes! You can find out more about the functions we used in this script from the PHP manual. For example, look at the description for the time() function.
As you can see, it becomes a bit tiring to have to add more ages and more adoptables to our code. It's very easy to make a mistake which makes the whole script stop working. As soon as our script gets much more complicated, it'll get even worse. What we'd like to do instead is write down our ages in a separate text file, and have our script read that file instead of having to write each age into our PHP script.
Our file will have to include enough information so that our script can work out:
First, let's decide how we're going to give this information to PHP. One way we could format the information is "XML", it's quite similar to HTML code (it uses <tags> to group things together). Here's how we might store the information in an XML file:
<adoptables>
<adoptable id="1">
<age image="dogbaby.png" />
<age date="2008-11-20" image="dogpuppy.png" />
<age date="2008-11-25" image="dogadult.png" />
</adoptable>
<adoptable id="2">
<age image="ratbaby.png" />
<age date="2008-11-23" image="ratadult.png" />
</adoptable>
</adoptables> Here we have two different adoptables, identified by an id number (1 and 2). Each adoptable has several ages. Each age has a different picture associated with it (the 'image' attribute). The first 'age' for each adoptable is the picture which is shown when it is first adopted. The following ages get shown as the pet grows up. There is a 'date' attribute for each age which shows the date at which we should start showing that picture (except for the first age). Now we can write a new simple.php file:
<?php
//Tell the browser that we are sending it a PNG image to display
header("Content-Type: image/png");
//Load the adoptables XML file
$xml=simplexml_load_file("adoptables.xml");
//For each 'adoptable' tag which is available
foreach ($xml->adoptable as $adoptable) {
//Is this adoptable's id the same as the one that the user wants to see?
if ($adoptable['id']==$_REQUEST['id']) {
//Yes, it is
//Decide which of the ages we want to show for the adoptable
$pickedAge=NULL; //We'll store the age we eventually pick into the variable $pickedAge
/* Check the ages in order. The age we end up picking will be the last age
* in the file where the current date is at or after the 'date' attribute
*/
foreach ($adoptable->age as $age) {
if (!isset($age['date']) || time() >= strtotime($age['date'])) {
$pickedAge=$age;
}
}
//Now that we've picked the age, display the image that that age uses
readfile($pickedAge['image']);
}
}
?>
To run the XML-based version (which we'll be using from now on in the tutorials) your web server must be running at least version 5 of PHP. With some web hosts, it is possible to choose which version of PHP you want to use, so make sure that it is set to '5'. You can check which version of PHP your web host is running by uploading this file, test.php:
<?php
phpinfo();
?>
Point your web browser to this file after you upload it, you should get a page of information about your web server. The first thing on the page is the version of PHP (it should start with 5). PHP 4 will not work.
Upload the new simple.php and the example adoptables.xml file to your server, and give the system a go! You will want to change the dates to be more recent ones. Now you can add more adoptables just by editing the adoptables.xml file, and your pets will grow up automatically on the given dates!
You can continue to Part 3 of the tutorial, or discuss this part of the tutorial in the forums.