In this tutorial, I will go through the way to make a randomly picked quote generator work on a modular level. This is so it can be added to and updated, ported and reused without having to copy a bunch of files.
This technique is a pretty easy one. Let’s start off by making the “quote.php” file.
<?php
$num = Rand (0,4);
switch ($num)
{
This will cycle through 5 quotes that we will input in a minute. If you choose to add more cases, then you will need to change the “4” to the last case number you added. This is so it will cycle through all the quotes, not just the first 5.
Now we need to add the cases.
case 0:
echo “This is quote 1. <p class=\”author\”>-The author</p>”;
break;
case 1:
echo ” is quote 2. <p class=\”author\”>-The author </p>”;
break;
case 2:
echo “The is quote 3. <p class=\”author\”>-The author </p>”;
break;
case 3:
echo ” is quote 4. <p class=\”author\”>-The author </p>”;
break;
case 4:
echo ” is quote 5. <p class=\”author\”>-The author </p>”;
break;
}
?>
That is it for the “quote.php” file.
Full script
<?php
$num = Rand (0,4);
switch ($num)
{
case 0:
echo “This is quote 1. <p class=\”author\”>-The author</p>”;
break;
case 1:
echo ” is quote 2. <p class=\”author\”>-The author </p>”;
break;
case 2:
echo “The is quote 3. <p class=\”author\”>-The author </p>”;
break;
case 3:
echo ” is quote 4. <p class=\”author\”>-The author </p>”;
break;
case 4:
echo ” is quote 5. <p class=\”author\”>-The author </p>”;
break;
}
?>
Now we will make a little page that it will go on. Nothing fancy, you can jazz it up as you see fit. Start off with the doctype, and all the required code to make the page valid.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>
The Random Quote Generator by Division Overlay
</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
Now let’s give the page some basic styles, fonts, colors, etc.
<style type=”text/css”>
body {
< background: url(bg.png);
color: #dadada;
font-family: segoe ui;
}
#qblock {
background: #333333;
width: 400px;
height: 70px;
padding: 5px;
margin: 0 auto;
}
.author {
color: #ffffff;
font-size: 10px;
font-family: georgia;
font-style: italic;
text-align: right;
}
</style>
</head>
Now we can make a little box where the quotes from the “quote.php” file will be inputted in to the main file.
<body>
<div id=”qblock”>
<?php include(“quote.php”); ?>
</div>
</body>
</html>
The Full main.php file is as followed.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>The Random Quote Generator by Division Overlay</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
body {
background: url(bg.png);
color: #dadada;
font-family: segoe ui;
}
#qblock {
background: #333333;
width: 400px;
height: 70px;
padding: 5px;
margin: 0 auto;
}
.author {
color: #ffffff;
font-size: 10px;
font-family: georgia;
font-style: italic;
text-align: right;
}
</style>
</head>
<body>
<div id=”qblock”>
<?php include(“quote.php”); ?>
</div>
</body>
</html>
This is how you would make a simple and nice little quote generator, to go on any site that supports php.
Any questions, comments or concerns please do not hesitate to leave a note below. Thanks for your time.
You can leave a response, or trackback from your own site.