Write a comment on this article
Our task for this tutorial: create a page to display a random picture which can be rated by the visitor.
Some basic thoughts: we keep information about an uploaded image in a MYSQL database table. This contains the image id, the given points and the number of votes. The images themselves are stored with the according id's in the fileset.
First, we create the database table which needs three fields: id, points and votes. The appropriate SQL statement will look like this:
CREATE TABLE image_voting ( id int(10) unsigned NOT NULL PRIMARY KEY, points int(10) unsigned NOT NULL, votes int(10) unsigned NOT NULL )
To the script: first of all we connect to the MYSQL server and select a database:
mysql_connect();
mysql_select_db("my_database");
Now we pick a random id. There are several ways to do that, here is one possible solution:
First we need the highest id, which we store in variable $maximum:
list($maximum) = mysql_fetch_row(mysql_query(
"SELECT id FROM image_voting ORDER BY id DESC LIMIT 0,1;"));
Then we define variable $random which will be used to store a random number later on.
$random = -1;
To find an existing row in the table with a random number we need to use a loop. Inside this loop we generate a new random number until we find an existing row.
while($result = mysql_query("SELECT * FROM image_voting WHERE id=$random;")){
if(mysql_num_rows($result) == 1){
break;
}
srand((double)microtime()*1000000);
$random = rand(1,$maximum);
}
Finally, we have got a resultset $result with one row from the table. Now we can read the data and display the image and its points.
$row = mysql_fetch_array($result);
The displayed points will be the average rating of all votes (points/votes). If the image has not been rated yet, the script would die with a division by zero. So we need to catch this. Also, we format the result of the calculation using the function number_format.
$points = number_format($row["points"] / ($row["votes"] ? $row["votes"] : 0),2,".","");
Now we print the HTML structure to display the image (including the HTML header):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image voting</title>
</head>
<body>
<img src="<?php echo $row["id"]; ?>" alt="<?php echo $row["id"]; ?>"><br>
Points: <?php echo $points; ?> (<?php echo $row["votes"]; ?> votes)<br>
Nearly done, there are two more parts, first: voting for in image. We need a form to give the visitor the possibility to vote for an image. This will complete the HTML structure.
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<input type="radio" name="vote" value="1" onclick="submit();">1
<input type="radio" name="vote" value="2" onclick="submit();">2
<input type="radio" name="vote" value="3" onclick="submit();">3
<input type="radio" name="vote" value="4" onclick="submit();">4
<input type="radio" name="vote" value="5" onclick="submit();">5
<input type="hidden" name="id" value="<?php echo $row["id"]; ?>">
</form>
</body>
</html>
And the last part: updating the votes and points when the visitor submitted the form. So we need to check if the form has been submitted and update the corresponding row in the table. Finally, we close the database connection.
$id = $_POST["id"];
$vote = $_POST["vote"];
if(isset($id) && isset($vote)){
mysql_query("UPDATE image_voting SET points=points+$vote,
votes=votes+1 WHERE id=$id;");
}
mysql_close();
Yes, that's it. A simple image voting system with randomly picked images. Some enhancements would be: visitors can upload images, administration to delete and reset images, toplist showing the top images, visitors may write comments on images, etc.
You can try this script here: demos/Image_voting/index.php. Or download it here: Image_voting_1-0.zip
PHP, tutorial, image, voting
If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.