Preview of finished concept: http://www.sitegale.com/quote/index.php
Hey, today we will be creating a random quote generator, similar to http://thesurrealist.co.uk/slogan . We will be using html, php and javascript for this (the javascript is to apply some nice effects to it :)). We will run this without a mysql database, but you could easily run this from a mysql database or even a text file! This is the basic system, so you could add loads on to it.
Step 1: Creating the index.php file
This php file will be the page which links all the functions together. It will include the functions.php file and the javascript file (for the fade out effects). I have not applied any css effects to it this time, so it will look fairly bare! But 10 mins of css work could make it looking very attractive :).
Create a new file called index.php, and add the following code to it:
<?php include('quotegen.php');?>
<!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>
<script type="text/javascript" src="js.js">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title></title>
</head>
<body onLoad="javascript: opacity('result', 0, 100, 500)">
<div align="center">
<div id="container">
<form name="myform" action="index.php" method="post" id="myform">
<input name="button" type="input" value="Generate Quote" />
<label><input name="word" type="text" class="my_textbox" id="textfield" maxlength="80"
value="<?php echo $word;?>" /></label>
</form>
<div id="result">
<?php if($word==''){echo 'Please enter a word';}else{echo $newquote;}?>
</div>
</body>
</html>
I’ll explain this code a bit now. Where you this peice of code
<?php include(’quotegen.php’);?>
This is the php code that includes the quotegenerator file which is the main php core of this random quote generator.
onLoad=”javascript: opacity(’result’, 0, 100, 500)”
This bit of code makes the div ‘result’ fade in on body load.
Step 2: The javascript file (js.js)
In this step we will create the javascript file which will add the cool fade in effect on body load 
Just adding a bit of eye candy to our project. This will make it more interesting than other random quote generators, which are usually static and boring ;).
Create a new file called js.js and add the following code to it.
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 50);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}
function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
function currentOpac(id, opacEnd, millisec) {
//standard opacity is 100
var currentOpac = 100;
//if the element has an opacity set, get it
if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
}
//call for the function that changes the opacity
opacity(id, currentOpac, opacEnd, millisec)
}
As you can see, I have commented this file :). Please feel free to check through this code to learn new techniques. Usually I would use a javascript framework such as jquery to do this tutorial, but in this case I wanted to build a quick light engine. Save your js.js file NOW!
Step 3: The Quotegen.php file
This file will process all of the information for our random quote generator. We will need to secure it as well, to prevent xss attacks (Javascript injections such as alerts e.t.c). You can add any amount of quotes to this, I only added a few to give you a quick demo :P.
Create a new file called quotegen.php and add the following code to it.
<?php
// If you need any help with this file, please ask! Thankyou
if(isset($_POST['button'])) {
$word = $_POST['word'];
/* These are the quotes, to add more just make a new $quotes[] = ‘Randomthing’.$word.
The $word part is the part that comes from the text box */
$quotes[] = htmlspecialchars($word.’ milk since 1960′);
$quotes[] = htmlspecialchars(’Mummy, whats a ‘.$word);
$quotes[] = htmlspecialchars(’The best way to start a morning is with a ‘.$word.’ in your face’);
// Don’t touch below
srand ((double) microtime() * 1000000);
$random_number = rand(0,count($quotes)-1);
$newquote = htmlspecialchars($quotes[$random_number]);
}
?>
As you can see again, I have commented it. But i’ll quickly run through it with you.
if(isset($_POST['button'])) {
This bit of php code checks whether the button has been pressed, stopping people messing with our system :).
$quotes[] = htmlspecialchars($word.’ milk since 1960′);
This bit of code is one of the quotes. To add more quotes, copy this line and put ‘$word’ anywhere in the sentence, and have the rest in quotes. YOu can add as many quotes as you want!
Now save this quotegen.php file :).
Ending notes and download files
I hope you have enjoyed this tutorial on how to create a random quote generator with javascript and php. If you have any questions about this tutorial, then please comment here or contact me on: ezia-work@hotmail.co.uk.
I have attached the download link below, enjoy!
http://sitegale.com/quote/quotelaugh.rar
Blogsphere: TechnoratiFeedsterBloglines
Bookmark: Del.icio.usSpurlFurlSimpyBlinkDigg
RSS feed for comments on this post | TrackBack URI for this post
