Value To Visual Star Rating in PHP Using Font Awesome Star icons

Today we are going to see a nice PHP trick. Here in this tutorial, we will see how we can create visual star rating depending upon the value from 0 to 5 in PHP and using the font awesome star icons for showing the star rating of that particular value.

We often see the product rating on Amazon and other eCommerce sites, movie rating on IMDB and so on. We can see those ratings just with the combination of the bright and dim star. For example, we will see three bright stars and two dim star which represents the three-star ratings out of 5. Also, we can see three bright stars, after that one half bright star and at the end, one dim star represents 3.5-star ratings on the web page.

Check if a string contains a particular word using PHP

How to remove the last comma from a PHP foreach loop?



Now, in this tutorial, we are also going to see how we can make our visual star rating form value in PHP. For star icons, we are going to use Font Awesome star icons. Font Awesome has the required star icons that can be used for star rating system. It contains full bright star, half bright star and dim star that are required for building our star-rating system.

Movie Video Trailers And Info PHP Script That Uses TMDB API

Below is our PHP easy to use PHP function:

<?php

function star_rating($rating)
{

    $rating_round = round($rating * 2) / 2;

    if ($rating_round <= 0.5 && $rating_round > 0) {
        return '<i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 1 && $rating_round > 0.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 1.5 && $rating_round > 1) {
        return '<i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 2 && $rating_round > 1.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 2.5 && $rating_round > 2) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 3 && $rating_round > 2.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 3.5 && $rating_round > 3) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 4 && $rating_round > 3.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 4.5 && $rating_round > 4) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i>';
    }
    if ($rating_round <= 5 && $rating_round > 4.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>';
    }
    
}

?>

Now we have to include our Font Awesome CSS file. below is the code that we have to place inside of our HTML head tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now, we are going to see the usage of our PHP function:

To use our function we just need to call our function with the rating as the parameter of the function. Suppose, we want to show the star rating 3.5, then we will just use the function like you can see below:

<?php
  echo star_rating(3.5);
?>

As we can see that, our PHP function that we have just built is really so easy to use. After creating the function, just one line of code needed to call it.

Now see the complete code below:

<!DOCTYPE html>
<html>
<head>
  <title>Star ratings in PHP using font awesome star icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style type="text/css">
    .ratings i {
      color: #ff9900;
    }
  </style>
</head>
<body>

<?php

function star_rating($rating)
{

    $rating_round = round($rating * 2) / 2;

    if ($rating_round <= 0.5 && $rating_round > 0) {
        return '<i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 1 && $rating_round > 0.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 1.5 && $rating_round > 1) {
        return '<i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 2 && $rating_round > 1.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 2.5 && $rating_round > 2) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }

    if ($rating_round <= 3 && $rating_round > 2.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 3.5 && $rating_round > 3) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 4 && $rating_round > 3.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i>';
    }
    if ($rating_round <= 4.5 && $rating_round > 4) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i>';
    }
    if ($rating_round <= 5 && $rating_round > 4.5) {
        return '<i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>';
    } 
}

?>

  <div class="ratings">
     <p>3.5 star ratings: <?php echo star_rating(3.5); ?></p>
     <p>5 star ratings: <?php echo star_rating(5); ?></p>
     <p>2.5 star ratings: <?php echo star_rating(2.5); ?></p>
     <p>4.5 star ratings: <?php echo star_rating(4.5); ?></p>
     <p>4 star ratings: <?php echo star_rating(4); ?></p>
  </div>


</body>
</html>

You can save the above code as star_ratings.php and then run it on your server. We have added CSS color to our star icons to give it better looks.

Get random word from English dictionary in PHP tutorial

Easy to use PHP function to show a random image from a particular directory

So we just have made our own value to star rating in PHP using the popular Font Awesome icon.

We are hoping that you like this tutorial and it will be helpful for your project. If you have any trouble and if need any help, then let us know. You can comment in our comment box below.

Leave a Reply

Your email address will not be published. Required fields are marked *