user3344070 user3344070 - 28 days ago 12
HTML Question

Printing review stars and making it dynamic using PHP

I am trying to automate an HTML code with PHP. My task is to print the review stars--that are used on Amazon and many other sites for counting the average rating.
What I am trying to achive is this kind of pattern.


Name:
Ratings:
Desciption:



And to achieve this I am using a foreach loop to print the values from array. I have no problem whatsoever with Name and Description, but I am facing problems printing the review stars according to the count that I get from the array using foreach.

I have this HTML Code, which prints stars.

<ul class="review-rating star-rating">
<li><span class="fa fa-1x fa-star"></span></li>
</ul>


The above HTML will print 1 star.

<ul class="review-rating star-rating">
<li><span class="fa fa-1x fa-star"></span></li>
<li><span class="fa fa-1x fa-star"></span></li>
<li><span class="fa fa-1x fa-star-half-empty"></span></li>
<li><span class="fa fa-1x fa-star-o"></span></li>
<li><span class="fa fa-1x fa-star-o"></span></li>
</ul>


This above HTML will print 2.5 stars.

Now, I want this HTML to be automated according to the count value that I get from PHP. Suppose for a particular array, I get the count as 3. So, without having to write this HTML code in 5 lines, how can I automate it in PHP.
One method that I thought was use 9 if statements: 5 for full stars, 4 for half(1.5,2.5,3.5,4.5). But that again is a tedious task.

Another option is to automate it in JQuery, which again is a problem because the frontend developer won't do that.

So, I am trying to search a solution using the same design given to me above.

Can I get some suggestions on this?

Answer

You could use this:

<?php
/* Function helper to round numbers on .5 step, as 1, 1.5, 2, 2.5... */
function round_half($num) {
    return round($num * 2) / 2;
};
function print_stars($num) {
    echo '<ul class="review-rating star-rating">';
    for ($n=1; $n<=5; $n++) {
        echo '<li><span class="fa fa-1x fa-star';
        if ($num==$n+.5) {
            echo '-half-empty';
        } elseif ($num<$n+.5) {
            echo '-o';
        };
        echo '"></span></li>';
    };
    echo '</ul>';
};
$rating = round_half( 3.452 );
print_stars($rating);
?>

With jQuery, it would be as in Fiddle:

<ul class="review-rating star-rating" data-stars="3.5">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>
<script type="text/javascript">
    $.fn.print_stars = function() {
        return this.each(function() {
            var thisList = $(this);
            var thisRating = thisList.data('stars');
            thisList.find('li span').each(function(m) {
                var n = m+1;
                var thisClass='fa fa-1x fa-star';
                if (thisRating==n+.5) {
                    thisClass += '-half-empty';
                } else if (thisRating<n+.5) {
                    thisClass += '-o';
                };
                $(this).attr('class', thisClass);
            });
        });
    };
    $(document).on('ready', function() {
        $('.star-rating').print_stars();
    });
</script>