I have been thinking to write some basic stuff with PHP. Although I learned quite a lot already, but writing a PHP tutorial is not as easy as CSS, because I might be wrong, since in PHP, we need to consider some parameters as the speed, security and stuff – and I don’t know that much.
So here is the start of my Fun with PHP series (hopefully).
Random image
In this tutorial, I’ll show you how to get images from a directory, and display them on the screen, one by one, randomly, everytime you refresh the page. Yeah, not a difficult thing.
We start by preparing some images. Here, I am using 12 images from my previous Kreativuse posts (just because all of them have been set to 450px and 200px). Then, make sure you rename each file in numbers, starting from 1.jpg to 12.jpg. Put everything in a folder, named img
Then, we should create the index.php file. In this file, we will generate a random number between 1 to 12, and put it in the <img src /> that will handle the image display. Here is the full code structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Hey look! </title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <?php $x= rand(1,12); ?> <div id="box"> <h1>Hey Look!</h1> <p><img src="img/<?php echo $x ;?>.jpg" /></p> <p>Refresh the page</p> </div> </body> </html>
Explanation. On line 9, there is a simple PHP line that says <?php $x = rand(1,12); ?>. That means, we are generating a random number from 1 to 12 and apply it to parameter x. Read more about the rand() function.
On line 13, we are using the value of that x parameter, and put it in the <img alt="" /> line. So, if the value of x now is ‘6′, the 13th line will be executed as
<p><img src="img/13.jpg" alt="picture" /></p>
… and the picture named 13.jpg will be displayed on screen! Easy.
We’ll now add some CSS to the page with a new file style.css. You can use whatever style you want – this is just an example:
body{
background: #333;
font-family: Helvetica;
font-size: 12px;
line-height: 18px;
color: #ccc;
}
h1{
font-size: 70px;
color: #fff;
letter-spacing: -1px;
}
#box{
width: 470px;
margin: 60px auto 0;
padding: 0 auto;
text-align: center;
}
#box img{
border: 5px solid #ccc;
padding: 4px;
}
View the live demo here. Refresh the page several times to see the result.
Random quote
Well, sometimes you can see some random quotes on some websites, with a new one appear everytime you refresh the page. Here is one simple (and manual) way to do it.
You can add the following PHP code in the previous index.php file
<?php $text = array( 'Hello there and welcome', 'Okay this is so lame', "No I don't like it here", 'Yeah yeah yeah!', 'Lorem ipsum dolor emet forever', 'Lazy dog and brown fox what?', ); $i = rand(0,5); ?>
The array() line can be written in one single line, but for the sake of readability, better to use multiple lines. Now we have six different phrase in the array called $text. Make sure to put comma (,) at the end of each phrase if you want to add some more into the array. The $i parameter, is used to get a random value from 0 to 5 (total of 6) – this will be used as our array index number.
Then, add the following in the index.php file, perhaps below the title.
<p class="tagline"><?php echo $text[$i];?></p>
We are displaying one of the phrase in the array. If, let say, the value of $i now is 3, so we are display value in $text[3] which is “Yeah yeah yeah!”. (Remember: an array index number starts with 0).
View the live demo and refresh the page.
The end.
Think of what you can do with this. You can have a random website header on your blog if you used the random image technique. Just modify the code a bit.
You can also have random advertisement displayed on the sidebar with the combination of random image and random quote technique. Can you think of it? Think harder. 
yay php!
you can use array_rand() function to get random elements from (unknown size) array, but if it’s for simple task this is quite enough…and fast too!
more fancy stuff. and it would be great.
@uways: yeap php heh
thanks
@novatech: haa need to learn that haha
@izzat: coming soon..when i have enough time. heh
cool. I’ve always wanted random website header. :p
terbaek r!
Nice stuff man.
Post more. its great.
simple and very useful
waa.. bgos2 bleh wat header tukar2 nanti
cheap watches
I purchased a pair of christian louboutin shoes to attend a friend party In the http://www.christianlouboutinshoes88.com. The red high heels are very sexy. I recommend everyone go here to buy