Display stars from a value

Question

I've followed this awesome tutorial for achieve a stars rating system : Tutorial Demo

This is fully working and i've did the necessary for save the stars form into MySQL table. Now i would like to display the stars value registered in my table with the stars system from the tutorial. Exemple $starsvalue = 4; then it shows 4 colored stars and the last one empty.

Currently i don't know how to display the stars with the result of $starsvalue. Any help is very welcome.

Form used :

echo "<form id=\"ratingsForm\" name=\"starsrating\" method=\"POST\">";
                echo "<div class=\"stars\">";
                echo "<input type=\"radio\" name=\"star\" class=\"star-1\" id=\"star-1\" value=\"1\" onclick=\"this.form.submit()\"/>";
                echo "<label class=\"star-1\" for=\"star-1\">1</label>";
                echo "<input type=\"radio\" name=\"star\" class=\"star-2\" id=\"star-2\" value=\"2\" onclick=\"this.form.submit()\"/>";
                echo "<label class=\"star-2\" for=\"star-2\">2</label>";
                echo "<input type=\"radio\" name=\"star\" class=\"star-3\" id=\"star-3\" value=\"3\" onclick=\"this.form.submit()\"/>";
                echo "<label class=\"star-3\" for=\"star-3\">3</label>";
                echo "<input type=\"radio\" name=\"star\" class=\"star-4\" id=\"star-4\" value=\"4\" onclick=\"this.form.submit()\"/>";
                echo "<label class=\"star-4\" for=\"star-4\">4</label>";
                echo "<input type=\"radio\" name=\"star\" class=\"star-5\" id=\"star-5\" value=\"5\" onclick=\"this.form.submit()\"/>";
                echo "<label class=\"star-5\" for=\"star-5\">5</label>";
                echo "<span></span>";
                echo "</div>";

                echo "<div style=\"visibility:hidden\"><Input type=submit name=\"choix\" value=\"Valider\"></div>";

                echo "</form>";

CSS used :

   body {
      padding: 50px;
    }
    form .stars {
      background: url("stars.png") repeat-x 0 0;
      width: 150px;
      margin: 0 auto;
    }

    form .stars input[type="radio"] {
      position: absolute;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    form .stars input[type="radio"].star-5:checked ~ span {
      width: 100%;
    }
    form .stars input[type="radio"].star-4:checked ~ span {
      width: 80%;
    }
    form .stars input[type="radio"].star-3:checked ~ span {
      width: 60%;
    }
    form .stars input[type="radio"].star-2:checked ~ span {
      width: 40%;
    }
    form .stars input[type="radio"].star-1:checked ~ span {
      width: 20%;
    }
    form .stars label {
      display: block;
      width: 30px;
      height: 30px;
      margin: 0!important;
      padding: 0!important;
      text-indent: -999em;
      float: left;
      position: relative;
      z-index: 10;
      background: transparent!important;
      cursor: pointer;
    }
    form .stars label:hover ~ span {
      background-position: 0 -30px;
    }
    form .stars label.star-5:hover ~ span {
      width: 100% !important;
    }
    form .stars label.star-4:hover ~ span {
      width: 80% !important;
    }
    form .stars label.star-3:hover ~ span {
      width: 60% !important;
    }
    form .stars label.star-2:hover ~ span {
      width: 40% !important;
    }
    form .stars label.star-1:hover ~ span {
      width: 20% !important;
    }
    form .stars span {
      display: block;
      width: 0;
      position: relative;
      top: 0;
      left: 0;
      height: 30px;
      background: url("stars.png") repeat-x 0 -60px;
      -webkit-transition: -webkit-width 0.5s;
      -moz-transition: -moz-width 0.5s;
      -ms-transition: -ms-width 0.5s;
      -o-transition: -o-width 0.5s;
      transition: width 0.5s;
    }

* UPDATE *

Trying Raty as suggested and i don't manage to make appear the stars. The CSS and JS files seems at the good places. I think i don't understand how to configure it like set the stars images folder and other parameters

I don't know where i'm supposed to copy thoses codes very common on raty's webpage ?

$('div').raty({ number: function() { return $(this).attr('data-number'); } });

My code :

  <link rel="stylesheet" href="./raty/lib/jquery.raty.css"/>
    <link rel="stylesheet" href="./raty/stylesheets/labs.css" media="screen" type="text/css"/>
    <script src="./raty/vendor/jquery.js"></script><script src="./raty/lib/jquery.raty.js"></script>
    <script src="./raty/javascripts/labs.js" type="text/javascript"></script>

    <div class="clearfix"></div>

<article>

    <div class="body">
        <h1>Default</h1>

        <p>You need just to have a <code>div</code> to build the Raty.</p>

        <div id="default"></div>
        <div class="highlight"><pre><span class="nt">&lt;div&gt;&lt;/div&gt;</span>
        </pre></div>
        <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s1">'div'</span><span class="p">).</span><span class="nx">raty</span><span class="p">();</span>
        </pre></div>    

Answer 1

Here is the source code How I make with Raty.

Step 1: http://github.com/wbotelhos/raty/archive/2.7.0.zip I downloaded it and after extraction I rename the folder to raty.

Step 2: I placed html file just besides of this raty folder.

<link href="raty/demo/stylesheets/labs.css" media="screen" rel="stylesheet" type="text/css">
<link href="raty/lib/jquery.raty.css" media="screen" rel="stylesheet" type="text/css">
<script src="raty/vendor/jquery.js"></script>
<script src="raty/lib/jquery.raty.js"></script>
<script src="raty/demo/javascripts/labs.js" type="text/javascript"></script>

<div data-number="5"></div>

<script>
$('div').raty({
    number:$(this).attr('data-number'),
    half     : true,
    path     : null,
    starHalf : 'raty/demo/images/star-half-mono.png',
    starOff  : 'raty/lib/images/star-off.png',
    starOn   : 'raty/lib/images/star-on.png'
});

</script>

maybe labs.css and labs.js are not useful but as of now I just copied it so take care of that too.

EDIT

For selected value suppose $starvalue = 4

<script>
$('div').raty({
    number:$(this).attr('data-number'),
    half     : true,
    path     : null,
    starHalf : 'raty/demo/images/star-half-mono.png',
    starOff  : 'raty/lib/images/star-off.png',
    starOn   : 'raty/lib/images/star-on.png',
    score: <?php echo $starvalue; ?>
});

</script>

Answer 2

According to the tutorial, if the radio button is checked so you will see the yellow star.

$starsvalue=4;
echo "<form id=\"ratingsForm\" name=\"starsrating\" method=\"POST\">";
echo "<div class=\"stars\">";
for ($i = 1; $i <= 5; $i++) {
    echo "<input type=\"radio\" name=\"star\" class=\"star-$i\" id=\"star-$i\" value=\"$i\" ";
    if ($i === $starsvalue) {
        echo " checked='checked' ";
    }
    echo "onclick=\"this.form.submit()\"/>";
    echo "<label class=\"star-$i\" for=\"star-$i\">$i</label>";
}
echo "<span></span>";
echo "</div>";

echo "<div style=\"visibility:hidden\"><Input type=submit name=\"choix\" value=\"Valider\"></div>";

echo "</form>";