Converting numbers to visual rating (stars)? [closed]

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.

Ancelin

Just to be sure: is numbers exactly what you described or can there be any value between 1 and 5? For example 3.75? – Adorn

These are the exact values. this number are for rating an object. – Ancelin

Click here for a different version of this same question. – Narcho

Answer 1

<?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

Hubris

The empty stars at the end are missing. ;) – Homozygote

ow right, going to edit it now :) – Hubris

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! – Thief

@Dyin: As the question clearly states, there is no "4.0" value. – Homozygote

@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! – Thief

Can I assume that x represent the my value? for($rating=1;$x<=$starNumber;$x++) – Ancelin

Set a variable called $starNumber with your value and then just add the code I've provided (Replace the image path's as well) – Hubris

Nice, Easy to implement...!!took 5 mins Only.Thanks Man – Roye

Answer 2

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.

Vested

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. – Coremaker

Great idea, if I ever need this functionality I will use something like this. – Adorn

Nice idea. You hands are still bound, when you want to add rating functionality, but when you only need to show, it's perfect! – Thief

Demo: jsfiddle.net/xj14v0nj/308 – Repugn

Answer 3

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.

Homozygote

How would you style that with CSS? – Thief

with the class. you can then count children and set their background image according to their parent's div classname. – Homozygote

I'm very interested in this. Can you provide an example code? Or maybe could you implement this topic with CSS? – Thief

@Dyin: You could use nth-child or friends: w3.org/TR/selectors/#nth-child-pseudo – Homozygote

Doesn't this mean too much CSS code to implement? Could you solve this in your post? +1 for odd idea! – Thief

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. – Tahoe

@Neil: You normally don't need to nest the tags for that. – Homozygote

How else would the stars to the left know which one was being hovered? – Tahoe

Answer 4

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.

Delitescent

Answer 5

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 '+';

Adorn