Converting numbers to visual rating (stars)?

Question

in my database ı have numbers 1, 2, 2.5, 3, 3.5, 4, 4.5 and 5

I want to convert these numbers to stars.

I have a full star and a half star.

How ı can do that after getting information from database?

I have the rating tag on the database.

Just to be sure: is numbers exactly what you described or can there be any value between 1 and 5? For example 3.75? — Sampo Sarrala - codidact.org, Apr 20 '12 at 18:24
These are the exact values. this number are for rating an object. — salim basar, Apr 20 '12 at 18:51
[Click here](http://stackoverflow.com/q/36491315/798371) for a different version of this same question. — WBT, Apr 08 '16 at 05:45

Wouter Rutgers · Accepted Answer · 2012-04-20T17:59:29.403

33

<?php
    for($x=1;$x<=$starNumber;$x++) {
        echo '<img src="path/to/star.png" />';
    }
    if (strpos($starNumber,'.')) {
        echo '<img src="path/to/half/star.png" />';
        $x++;
    }
    while ($x<=5) {
        echo '<img src="path/to/blank/star.png" />';
        $x++;
    }
?>

*Assuming you are using PHP

edited Apr 20 '12 at 17:59

answered Apr 20 '12 at 17:41

Wouter Rutgers

541
5
14

The empty stars at the end are missing. ;) – hakre Apr 20 '12 at 17:52
ow right, going to edit it now :) – Wouter Rutgers Apr 20 '12 at 17:58
If you use `strpos`, and you may find a value like `4.0`, you will be surprised. Don't treat and handle numbers as string! – Dyin Apr 20 '12 at 17:59
@Dyin: As the question clearly states, there is no "4.0" value. – hakre Apr 20 '12 at 18:02
1

@hakre: I usually like to think about future and generality when I write my code. Just treat real number as real number when you see one! – Dyin Apr 20 '12 at 21:19
Can I assume that x represent the my value? for($rating=1;$x<=$starNumber;$x++) – salim basar Apr 21 '12 at 11:06
Set a variable called $starNumber with your value and then just add the code I've provided (Replace the image path's as well) – Wouter Rutgers Apr 21 '12 at 15:49
Nice, Easy to implement...!!took 5 mins Only.Thanks Man – Kunal Mar 19 '16 at 11:18

score 8 · Answer 2 · answered Apr 20 '12 at 18:29

8

When I have done this in the past, I used one image of 5 empty stars underneath one image of 5 filled stars. I then did something like

filled-stars.width = (empty-stars.width * (rating / 5)

This way you can display ratings of like 3.2978 etc.

answered Apr 20 '12 at 18:29

dqhendricks

19,030
11
50
83

1

I find this to be a pretty interesting idea. You can actually sprite the star just use pre-defined CSS classes to apply rounded star values (1.5, 3, etc) or allow a full range of abstract values. – jmbertucci Apr 20 '12 at 18:55
Great idea, if I ever need this functionality I will use something like this. – Sampo Sarrala - codidact.org Apr 20 '12 at 18:58
Nice idea. You hands are still bound, when you want to add rating functionality, but when you only need to show, it's perfect! – Dyin Apr 20 '12 at 21:13
1

Demo: https://jsfiddle.net/xj14v0nj/308/ – Elyor Jun 11 '17 at 07:48

score 2 · Answer 3 · answered Apr 20 '12 at 17:58

2

You can do that with PHP, HTML and CSS:

<div class="star-<?=$number?>">
    <b></b><b></b><b></b><b></b><b></b>
</div>

You can then style that with CSS, so to display background images according to stars. If you convert the <b> tags to <a> tags it's probably more semantic.

answered Apr 20 '12 at 17:58

hakre

193,403
52
435
836

How would you style that with CSS? – Dyin Apr 20 '12 at 18:05
with the class. you can then count children and set their background image according to their parent's div classname. – hakre Apr 20 '12 at 19:11
I'm very interested in this. Can you provide an example code? Or maybe could you implement this topic with CSS? – Dyin Apr 20 '12 at 21:11
@Dyin: You could use nth-child or friends: http://www.w3.org/TR/selectors/#nth-child-pseudo – hakre Apr 20 '12 at 21:17
Doesn't this mean too much CSS code to implement? Could you solve this in your post? +1 for odd idea! – Dyin Apr 20 '12 at 21:24
You could be really sneaky and nest the tags, so that when you hover one of the stars it hovers all the previous stars too, so you could therefore use CSS to show the rating that the user wishes to submit. – Neil Apr 21 '12 at 23:23
@Neil: You normally don't need to nest the tags for that. – hakre Apr 22 '12 at 09:21
How else would the stars to the left know which one was being hovered? – Neil Apr 22 '12 at 20:56

score 1 · Answer 4 · answered Apr 20 '12 at 18:38

Consider using sprites. Start with a graphic that contains a row of stars for each possible rating, and then compute the background offset by multiplying the height of each half-star graphic times the number of half-stars in the rating.

E.g.:

<?php
$offset =
    ($rating / .5)  // number of half-stars in $rating
  * 15;             // height of each sprite in stars.png
?>
<div style="background-image:url("stars.png");background-position:0 <?php echo $offset; ?>px;"></div>

Combined with a little bit of Javascript, you can implement a fully-featured ratings widget.

Sampo Sarrala - codidact.org · Answer 5 · 2012-04-20T20:30:39.880

1

Here, this adds stars echo '*'; and halfs if needed echo '+';
Change '*' and '+' for example to <img src="star.gif" /> and <img src="halfstar.gif" />

// This number of stars:
$number = 2.7;

// Make it integer:
$stars = round( $number * 2, 0, PHP_ROUND_HALF_UP);

// Add full stars:
$i = 1;
while ($i <= $stars - 1) {
    echo '*';
    $i += 2;
}
// Add half star if needed:
if ( $stars & 1 ) echo '+';

edited Apr 20 '12 at 20:30

answered Apr 20 '12 at 18:48

Sampo Sarrala - codidact.org

4,770
2
25
45

Converting numbers to visual rating (stars)?

5 Answers5

Linked