Display number of font awesome star icons depends on value in database column

Question

Im sorry, but Im new to this.

I have a number of products that I want to display from a database. One of the columns is rating.

I want to know how to display the value from that column as font awesome star icons instead of the value itself.

Each product's value (1 to 5) is entered by the admin, and displayed as filled stars for the visitor (x number out of 5). I also want to show the average value of all products as stars (where one star can be partially filled.).

This project using php and mysqli.

Grateful for help!

Answer 1

You can use any star rating jquery plugin : https://phppot.com/jquery/favorite-star-rating-with-jquery/

Style

li{display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:30px;}
.highlight, .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}

HTML

<input type="hidden" name="rating" id="rating" />
<ul onMouseOut="resetRating();">
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
  <li onmouseover="highlightStar(this);" onmouseout="removeHighlight();" onClick="addRating(this);">★</li>
</ul>

Scripts

function highlightStar(obj) {
    removeHighlight();      
    $('li').each(function(index) {
        $(this).addClass('highlight');
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function removeHighlight() {
    $('li').removeClass('selected');
    $('li').removeClass('highlight');
}

function addRating(obj) {
    $('li').each(function(index) {
        $(this).addClass('selected');
        $('#rating').val((index+1));
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function resetRating() {
    if($("#rating").val()) {
        $('li').each(function(index) {
            $(this).addClass('selected');
            if((index+1) == $("#rating").val()) {
                return false;   
            }
        });
    }
}

Demo link : https://phppot.com/demo/dynamic-star-rating-with-php-and-jquery/

You just need to dynamic this in PHP that's all.

Reference Here is the tutorial to make star rating dynamic : https://phppot.com/jquery/dynamic-star-rating-with-php-and-jquery/