|
Home » The tutorial » Random Quotes
Random Quotes Bob has a pretty good collection of quotes from previous clients that he would like to display on his web site. He's thinking that it would look good to have these in place of the image in the header. So we're going to build a somewhat similar script to pick a random line out of a text file.
The script
First, we need to create a new file named random_quote.php.
<?php
$filename = 'messages.dat';
$fhandle = fopen($filename, 'r');
$fdata = fread($fhandle, filesize($filename));
fclose($fhandle);
$arr_quotes = explode("n", $fdata);
$quote = $arr_quotes[array_rand($arr_quotes)];
echo '<p class="randomtext">'.$quote.'</p>';
?> and then a file called messages.dat that has each quote on a separate line. This is Bob's.
Thanks for the great memories
He was right on time
The album is beautiful!
Best ever!!!
Bob's a super nice guy. Notice there's only 5, but you could really have as many as you wanted. But you have to make sure to press Enter between each.
Change the site
All we have to do is edit the header.php file and insert the following code in place of the image. <?php include('random_quote.php'); ?> Just to help out a little, here is the entire header.php file again.
<html>
<head>
<title><?php echo $pagetitle; ?></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="header">
<table width="100%">
<tr>
<td align="left">
<img src="graphics/logo.gif" width="359px" height="100px" alt="Logo" title="Bob Smith Photography Logo">
</td>
<td align="right">
<?php include('random_quote.php'); ?>
</td>
</tr>
</table>
</div>
<table width="100%">
<tr>
<td class="navigation">
<a href="index.php">Home</a><br>
<a href="portfolio_wedding.php">Wedding Portfolio</a><br>
<a href="portfolio_portrait.php">Portrait Portfolio</a><br>
<a href="pricing.php">Pricing</a><br>
<a href="contact.php">Contact</a><br>
</td>
<td class="content"> CSS
Notice that the quote is wrapped in a class called randomtext. We need to add that to our CSS file. The following is what I used, but you can style it however you want.
p.randomtext {
vertical-align: bottom;
text-align: right;
font-size: x-large;
} And it looks like...
Here is version 8 of Bob's web site. Notice that with each page refresh a random image is loaded and so is a random quote. Also look at the different pages and see that the quote is there on all of them. That's because we split out the header into a separate file in one of the first few lessons so one edit took care of all the pages.
|
