Here is how to make a star rating script for your webpages.
The new and updated version of the script is now tracking all of your web pages automatically. You just have to include it on the desired page.
A new and improved version of the script, along with its explanation can be found in the
star rating script course.
if you don't have a database you can create it with first with:
CREATE DATABASE ratings;
then enter the database with :
use database ratings;
and lets set up the MySQL table:
CREATE TABLE IF NOT EXISTS `ratings` (
`id` varchar(255) NOT NULL,
`total_votes` int(11) NOT NULL,
`total_value` int(11) NOT NULL,
`used_ips` longtext,
PRIMARY KEY (`id`)
);
Then copy and paste this php code into ratings.php and open the file for edit:
var http_request = false;
function alertContents(response, ret_el) {
document.getElementById(ret_el).innerHTML = response;
}
function makePOSTRequest(url, parameters, ret_el, callback_function) {
if (typeof callback_function == 'undefined') callback_function = alertContents;
var http_request = false;
var activex_ids = ['MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE6 and older
for (i = 0; i < activex_ids.length; i++) {
try {
http_request = new ActiveXObject(activex_ids[i]);
} catch (e) {}
}
}
if (!http_request) {
alert('Please update your browser!');
return false;
}
document.getElementById(ret_el).innerHTML = "Please wait...";
document.getElementsByTagName("body").item(0).style.cursor = "wait";
http_request.onreadystatechange = function() {
if (http_request.readyState !== 4) {
return;
}
if (http_request.status !== 200) {
alert('Please try again later.');
return;
}
document.getElementsByTagName("body").item(0).style.cursor = "auto";
var response = http_request.responseText;
callback_function(response, ret_el);
return;
};
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// http_request.setRequestHeader("Charset", "windows-1251");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function rate(url_id, vote) {
makePOSTRequest('star_rating.php', 'url_id=' + url_id + '&vote=' + vote, 'myspan');
}
window.onload = function() {
var percentstyle = '',
rate_percent = 0;
var current_rating = document.getElementById("current_rating");
if (current_rating) {
rate_id = current_rating.getAttribute('data-id');
rate_percent = current_rating.getAttribute('data-percent');
}
percentstyle = 'width:' + rate_percent + 'px;';
var content = '<div class="rating" id="rating"><ul class="star-rating"><li class="current-rating" style="' + percentstyle + '" >Current rating</li><li><a id="rate1" class="one-star">1</a></li><li><a id="rate2" class="two-stars">2</a></li><li><a id="rate3" class="three-stars">3</a></li><li><a id="rate4" class="four-stars">4</a></li><li><a id="rate5" class="five-stars">5</a></li></ul></div>';
if (document.getElementById("myspan")) {
document.getElementById("myspan").innerHTML = content;
}
var url_id = encodeURIComponent(rate_id);
for (var i = 1; i < 6; i++) {
(function(i) {
document.getElementById("rate" + i).addEventListener("click", function() {
rate(url_id, i);
return false;
});
})(i);
}
}
<?php
$dbhost = 'localhost';
$dbuser = '';
$dbpass = '';
$dbname = 'ratings';
$dbtable = "ratings";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname) or die('Error connecting to mysql');
$is_voting = isset($_POST['vote']) ? $_POST['vote'] : ''; //the actual user vote
if ($is_voting) {
$id = isset($_POST['url_id']) ? $_POST['url_id'] : ''; //passed url_id
} else {
$id = substr($_SERVER['REQUEST_URI'], 1);
$id = htmlentities(urlencode($id), ENT_QUOTES);
}
//make initial vote check
$sql = "SELECT total_votes, total_value, used_ips FROM $dbtable WHERE id = '$id' ";
$query = mysqli_query($conn, $sql) or die(" Error: " . mysqli_error());
$number_rows = mysqli_num_rows($query);
$numbers = mysqli_fetch_assoc($query);
$checkIP = unserialize($numbers['used_ips']);
$count = $numbers['total_votes']; //how many votes total
$current_rating = $numbers['total_value']; //total number of rating added together and stored
$sum = $is_voting + $current_rating; // add together the current vote value and the total vote value
$tense = ($count == 1) ? "vote" : "votes"; //plural form votes/vote
if (!$is_voting) {
//check if have voted already
$voted = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM $dbtable WHERE used_ips LIKE '%" . $_SERVER['REMOTE_ADDR'] . "%' AND id='$id' ")); //This variable searches through the previous ip addresses that have voted and returns true or false
//when already voted
if ($voted) {
echo '<ul class="star-rating"><li class="current-rating" style="width:' . @number_format($current_rating / $count, 2) * 25 . '%;"></li></ul>
Rating: <strong>' . @number_format($current_rating / $count, 2) . '</strong> ( ' . $count . $tense . ')
<br /><span style="color:red;">You have already voted.</span><br />';
} else {
//if not voting just show the current rating
//set data for the css
echo '<div id="myspan"><span id="current_rating" data-id="' . $id . '" data-percent="' . @number_format($current_rating / $count, 2) * 25 . '"></span></div>';
}
}
//if not voted do the actual voting
if ($is_voting) {
//open initial voting row if necessary
if ($number_rows == 0) {
$sql = "INSERT INTO $dbtable (id, total_votes, total_value, used_ips) VALUES ('$id', '0', '0', '')";
$result = mysqli_query($conn, $sql) or die("err");
}
//increment votes, check ips & add/update vote to table
if ($sum == 0) {
$added = 0;
} else {
$added = $count + 1;
}
if (is_array($checkIP)) {
array_push($checkIP, $_SERVER['REMOTE_ADDR']);
} else {
$checkIP = array(
$_SERVER['REMOTE_ADDR']
);
}
$insert = serialize($checkIP);
mysqli_query($conn, "UPDATE $dbtable SET total_votes='$added', total_value='$sum', used_ips='$insert' WHERE id='$id'") or die("Error");
echo $response = '<div class="rating">Your rating:' . $is_voting . ' <br />';
echo '<ul class="star-rating"><li class="current-rating" style="width:' . @number_format($sum / $added, 2) * 25 . '%;"></li></ul>';
echo 'Overall rating: <strong>' . @number_format($sum / $added, 2) . '</strong> <br />
<span style="color:red;">Thank you for your vote cast!</span></div>';
//echo iconv("windows-1251", "UTF-8", $response);
}
?>
You can also explore the full version of the script in the
course.
Enjoy!
