Skill needed: Beginner - Intermediate
Requirements: A server/computer with PHP 4.x.x
Live example: Twister
=========================================================
Let's get the ball rolling
We're going to start with a simple HTML page that allows the user to choose the time in between colour changes.
Open up your text editor and create a new document. As with all of your other HTML pages, start with this:
<html> <head> <title>Speed Selector</title> </head> <body> Choose the speed you want the spinner to go at: <br /><br />
Extremely simple.
Now let's get to the complicated part, forms
Underneath the previous code, put:
<form action="twist.php" method="get"> <select name="a"> <option name="1" value="1">1 Sec</option> <option name="2" value="2">2 Sec</option> <option name="3" value="3">3 Sec</option> <option name="4" value="4">4 Sec</option> <option name="5" value="5">5 Sec</option> <option name="10" value="10">10 Sec</option> <option name="15" value="15">15 Sec</option> <option name="20" value="20">20 Sec</option> <option name="25" value="25">25 Sec</option> <option name="30" value="30">30 Sec</option> <option name="35" value="35">35 Sec</option> <option name="40" value="40">40 Sec</option> </select> <br /><br /> <input type="submit" value="Choose Speed!" name="submit" /> </form>
A simple form that creates a drop down list with time choices.
</body> </html>
Finish your page and save it as index.html
=========================================================
Now onto the PHP.
Create a new page, save it as twist.php and begin with this:
<?php ob_start(); ?>
This little code snippet turns on output buffering. OB does a lot of things but for the sake of brevity we will only use it for one. This function will stop any of those annoying header cannot be modified warnings.
After that we're going to put in some simple styling:
<style type="text/css">
body
{
text-align: center;
font-family: Verdana;
}
h1
{
font-weight: bolder;
font-family: Verdana;
font-size: 60px;
}
h2
{
font-family: Verdana;
font-size: 20px;
}
</style>I won't bother to explain as this is a PHP tutorial.
Now for some actual PHP.
<?php
$speed = $_GET['a'];
if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}
if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}We'll go through this line by line.
$speed = $_GET['a'];First of all we set up our speed variable, this contains it's counterpart that the script just received from the previous form.
if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}Next we check to see if the $speed variable exists or has a value, if it doesn't display the error and exit the script.if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}After that we check to see if the user has tried to go over 40 seconds. Of course you can remove this if you want any time you like but it could be set to millions of seconds and waste your server resources.echo "<meta http-equiv=\"refresh\" content=\"" . $speed . "; url=" . $_SERVER['PHP_SELF'] . "?a=" . $speed . "\">"; echo "You have " . $speed . " seconds to do the following movement";To change the colour and body part we're going to use a very simple HTML meta refresh that uses the $speed variable to check how long between each refresh. We've also used '$_SERVER['PHP_SELF']', this tells the refresh that it should refresh your current page. You can just change this to the page name but it allows you to change the page name and the script to still work.
$body = rand (0, 3);
switch($body)
{
case '0':
$part = 'Left Hand';
break;
case '1':
$part = 'Right Hand';
break;
case '2':
$part = 'Left Foot';
break;
case '3':
$part = 'Right Foot';
break;
default:
echo "Incorrect Usage.";
break;
}Now we've come to the code that chooses the body part.
It's a very simple switch statement that chooses the body part depending on the number from the rand() function. Complicated? Nah.
The rand function will pick a random number; Either 0,1,2 or 3. The switch statement then uses this number and checks what body part is assigned to it. For instance, if the rand function chose 2, 'Left Foot' would be chosen.
Now you might be wondering, well how does it get on my page? We're getting there.
echo "<h1>" . $part . "</h1>";
A simple echo statement than prints out the selected body part as a level one header.
$color = rand (0, 3);
switch($color)
{
case '0':
$col = 'red.png'; //Red;
break;
case '1':
$col = 'green.png'; //Green;
break;
case '2':
$col = 'blue.png'; //Blue;
break;
case '3':
$col = 'yell.png'; //Yellow;
break;
default:
echo "Incorrect Usage.";
break;
}This works exactly the same as the previous one except this time we have images assigned to the numbers.
echo "<h2>Color</h2><h1><img src=\"" . $col . "\" /></h1><br />";
This is, just as the other one was, a simple echo statement, but this time it will show you an image based on the choice of the switch statement. You can download the images here, here, here, and here
?>
Finish with the closing tags and we've finsished! Well, sort of.
=========================================================
Finishing Up
Now for a final addition.
Underneath your script add this:
<head> <title><? echo $part . " · " . $col; ?></title> </head>
This will display the current colour and body part in the title.
=========================================================
Now we've really finished!
Here's both the scripts for those who are too lazy to read the whole tutorial.
index.html
<html> <head> <title>Speed Selector</title> </head> <body> Choose the speed you want the spinner to go at: <br /><br /> <form action="twist.php" method="get"> <select name="a"> <option name="1" value="1">1 Sec</option> <option name="2" value="2">2 Sec</option> <option name="3" value="3">3 Sec</option> <option name="4" value="4">4 Sec</option> <option name="5" value="5">5 Sec</option> <option name="10" value="10">10 Sec</option> <option name="15" value="15">15 Sec</option> <option name="20" value="20">20 Sec</option> <option name="25" value="25">25 Sec</option> <option name="30" value="30">30 Sec</option> <option name="35" value="35">35 Sec</option> <option name="40" value="40">40 Sec</option> </select> <br /><br /> <input type="submit" value="Choose Speed!" name="submit" /> </form> </body> </html>
twist.php
<?php
ob_start();
?>
<style type="text/css">
body
{
text-align: center;
font-family: Verdana;
}
h1
{
font-weight: bolder;
font-family: Verdana;
font-size: 60px;
}
h2
{
font-family: Verdana;
font-size: 20px;
}
</style>
<?php
$speed = $_GET['a'];
if (empty($speed))
{
echo "You have not set a speed! Quick, <a href=\"index.html\"> set</a> one!";
exit;
}
if ($speed > 40)
{
echo "You appear to have tried to break our forty second limit, you can't be that slow can you?";
exit;
}
echo "<meta http-equiv=\"refresh\" content=\"" . $speed . "; url=" . $_SERVER['PHP_SELF'] . "?a=" . $speed . "\">";
echo "You have " . $speed . " seconds to do the following movement";
$body = rand (0, 3);
switch($body)
{
case '0':
$part = 'Left Hand';
break;
case '1':
$part = 'Right Hand';
break;
case '2':
$part = 'Left Foot';
break;
case '3':
$part = 'Right Foot';
break;
default:
echo "Incorrect Usage.";
break;
}
echo "<h1>" . $part . "</h1>";
$color = rand (0, 3);
switch($color)
{
case '0':
$col = 'red.png'; //Red;
break;
case '1':
$col = 'green.png'; //Green;
break;
case '2':
$col = 'blue.png'; //Blue;
break;
case '3':
$col = 'yell.png'; //Yellow;
break;
default:
echo "Incorrect Usage.";
break;
}
echo "<h2>Color</h2><h1><img src=\"" . $col . "\" /></h1><br />";
?>
<head>
<title><? echo $part . " · " . $col; ?></title>
</head>=========================================================
That's it, you've managed to endure my tutorial so you should manage to endure the torture that is called twister. And if you're really bored, you can add sound like I did.
If you have any problems reply to this topic and i'll try to sort them out.
Edited by adam123, 04 May 2005 - 02:03 PM.
