 |
Adopt a dog! |
 |
Adopt a rat! |
If you've followed the instructions in Part 1, Part 2, Part 3, and Part 4 of the tutorial, you should have an adoptables system where you can add a list of adoptables to a text file, have people randomly get different variations of their pet when they adopt, and have pets grow up automatically when the date changes. People cannot tell which variation they got by examining their HTML code thanks to the encryption we added in Part 4.
In this part of the tutorial I will suggest several small tweaks to make your system even better.
If you have not done so already, you should consider the security of your new system. Although with this system people can no longer see links to images stored on the webpage, if you have followed the tutorial strictly so far then there is still a problem: People can just browse to the "adoptables.xml" file and see all the variations that you have created, along with links to the images. Fixing this is simple, just rename your "adoptables.xml" file to something else that people won't guess, and change the filename in adopttools.php to match. In my example I changed this line in adopttools.php:
$adoptxml=simplexml_load_file("adoptables.xml");
To this: (you should pick a filename which is a little harder to guess than this :) )
$adoptxml=simplexml_load_file("adoptables1234.xml");
The code that our system gives people to put pets on their webpage is a little plain. It would be nice if it could write the pet's name or owner's name in as text underneath the picture. We should add a link back to our website when someone clicks the picture. And we should give the user a BBCode version too so that they can put their pets on a forum.
Let's start by asking the user for their name and their pet's name when they go to adopt. At the moment we're just showing this when they go to adopt (mainpage.php):
We need to add boxes for them to fill in the owner's name and pet's name. We will replace the table in mainpage.php with this code:
<table width="400" border="0" cellspacing="0" cellpadding="4">
<tr>
<td><img src="dogbaby.png"></td>
<td>
<form action='adopt.php' method='post'>
<input type="hidden" name="id" value="1">
Owner's name: <input type="text" name="ownername" value=""><br/>
Pet's name: <input type="text" name="petname" value=""><br/>
<input type="submit" value="Adopt me!">
</form>
</td>
</tr>
<tr>
<td><img src="ratbaby.png"></td>
<td>
<form action='adopt.php' method='post'>
<input type="hidden" name="id" value="2">
Owner's name: <input type="text" name="ownername" value=""><br/>
Pet's name: <input type="text" name="petname" value=""><br/>
<input type="submit" value="Adopt me!">
</form>
</td>
</tr>
</table>
This will look like this on our mainpage.php:
|
|
|
Now we have to make adopt.php do something with these new names that are being sent to it. We've currently got this code to display the adoption codes for the user:
<p>Thanks for adopting this pet! :). Here is the adoption code for your pet:</p>
<p><textarea cols="60" rows="2"><img src="http://www.mywebsite.com/simple.php?a=<?php echo $_REQUEST['id'];?>&v=<?php echo $v_id;?>"></textarea></p>
It's pretty messy right now, since there is a mixture of HTML and PHP even on a single line. We'll replace it with some better code which will include both the pet's and owner's names:
<p>Thanks for adopting this pet! :). Use this code to display your pet on a webpage: (HTML code)</p>
<p><textarea cols="60" rows="2"><?php
echo "<a href='http://".$_SERVER['SERVER_NAME']."/'><img border='0' src='http://".$_SERVER['SERVER_NAME'].dirname($_SERVER['PHP_SELF'])."/simple.php?a=".$_REQUEST['id']."&v=$v_id'></a><br>
Owner's name: ".$_REQUEST['ownername']."<br>
Pet's name: ".$_REQUEST['petname'];
?></textarea></p>
<p>Use this code to display your pet on a forum: (BBCode)</p>
<p><textarea cols="60" rows="2"><?php
echo "[url=http://".$_SERVER['SERVER_NAME']."/][img]http://".$_SERVER['SERVER_NAME'].dirname($_SERVER['PHP_SELF'])."/simple.php?a=".$_REQUEST['id']."&v=$v_id&.jpg[/img][/url]
Owner's name: ".$_REQUEST['ownername']."
Pet's name: ".$_REQUEST['petname'];
?></textarea></p>
The new code uses the $_SERVER variable that PHP provides to automatically work out what the address of your website is, as long as your adopt.php is in the same folder as your simple.php. I've also added a link on the image that goes to the index page of your website. Some forums do not accept image links that don't end in ".jpg", ".png", or some other common image extension. To get around this, I've just stuck "&.jpg" onto the end of the address of the picture. Our system does nothing with this information, but the forum is tricked into thinking that it is a regular image file.
Upload the new mainpage.php, adopt.php, and adopttools.php files. You can download all the files that make up this tutorial website (except key.php which you should get from Part 4 of the tutorial) in a zip file.
Check out the new adoption website.
You can discuss this part of the tutorial in the forums.