Home
A live demo is available here: https://www.1two.org/star-rating-system
Building a Multi Star Rating System with jQuery, AJAX and PHP is not an easy task, especially if we want to keep it simple, efficient and easy to install.
With this new star rating plugin you will be able to rate any Media (movies, stories, articles, videos, items for ecommerce website…) simply by including a code snippet on your web page.
This is a 100% complete solution with a cookie stored to make sure people only vote once.
This program is a multi-stars rating system. It means that you can easily choose the number of stars you need to rate your Media.
Also, you can add as many rating system as you need on your webpage. Imagine you own an ecommerce website. On a page you have 20 items and you want to allow your visitors to rate all these items. No problem! You can easily install 20 star bars below or around your items.
After having installed the script, simply add this snippet to call a star rating bar:
echo starBar(5, 203, 44);
It is a function with three arguments:
- 1st argument: number of stars (5 in our case),
- 2nd argument: Media ID (the ID - from the database - of your Media),
- 3rd argument: width of your star graphic (in pixels - 44 in our case).
I chose a 44x44 pixels star. So I provide a 25x50 pixels graphic including the transparent star (empty state) on a white background and the hover star (highlighted state) which is a blue star on a white background.
Depending of your website layout you may choose a bigger star or a smaller one and a different color background. Just create your own graphic using Photoshop for example. But the empty state star must be transparent, you will understand why soon.
So basically the first transparent star is the one displayed by default, and the blue one is displayed when you want to rate and pass your mouse over.
Below the stars you will find a first layer. The div layer is the size of your star multiplied by the number of stars you chose.
For a 5-star rating system it will be 44px high and 220px width (44x5px).
So when you refresh your webpage, for a Media, a star bar is called by the function starBar(5, 203, 44);.
With a simple query we search in the database the average rate and the number of rate for this Media:
$query = 'SELECT rate, nbrrate FROM 1two_tuto_rating WHERE media='.$mediaId.'';
With the formula...
$numEnlightedPX = round($nbrPixelsInDiv * $average / $numStar, 0);
...we calculate the number of pixels we have to colorize (in yellow #ffc600 for example) in our first div layer. The rest of the div will be colorized in grey (#cccccc for example).
We use the CSS linear-gradient function to colorize the number of pixels we need in our 44x220px div.
style="width:'.$nbrPixelsInDiv.'px; height:'.$starWidth.'px; background: linear-gradient(to right, #ffc600 0px,#ffc600 '.$numEnlightedPX.'px,#ccc '.$numEnlightedPX.'px,#ccc '.$nbrPixelsInDiv.'px);"
Now you see the process: a first layer made of an accurate number of pixels in yellow (depending of the rate average and number of rate) and the rest in grey (you may choose the color you want, just provide the hexadecimal color). Over are our star graphics (empty state), so the correct numbers of stars are colorized with precision!.