CODEWITHSUNDEEP
phphtml
user3344070
user3344070

Reputation: 15

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?

Upvotes: 1

Views: 3808

Answers (3)

Deepak Prajapati
Deepak Prajapati

Reputation: 1

<?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,$review=0) {
    echo '<div class="rating">';
    for ($n=0; $n<5; $n++) {
        echo '<span class="fa fa-star';
        if ($num==$n+.5) {
            echo '-half-o';
        } elseif ($num<$n+.5) {
            echo '-o';
        };
        echo '"></span>';
    }
    echo "<span class='rate'>(".$review.")</span>";
    echo '</div>';
}
$rating = round_half( 3.452 );
print_stars($rating);
?>

Upvotes: 0

Jinu Joseph Daniel
Jinu Joseph Daniel

Reputation: 6291

Here is my function to render stars in PHP side

function renderStarRating($rating,$maxRating=5) {
    $fullStar = "<li><i class = 'fa fa-star'></i></li>";
    $halfStar = "<li><i class = 'fa fa-star-half-full'></i></li>";
    $emptyStar = "<li><i class = 'fa fa-star-o'></i></li>";
    $rating = $rating <= $maxRating?$rating:$maxRating;

    $fullStarCount = (int)$rating;
    $halfStarCount = ceil($rating)-$fullStarCount;
    $emptyStarCount = $maxRating -$fullStarCount-$halfStarCount;

    $html = str_repeat($fullStar,$fullStarCount);
    $html .= str_repeat($halfStar,$halfStarCount);
    $html .= str_repeat($emptyStar,$emptyStarCount);
    $html = '<ul>'.$html.'</ul>';
    return $html;
}

Hope it helps

Upvotes: 6

skobaljic
skobaljic

Reputation: 9614

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>

Upvotes: 3

Related Questions