Laravel – Star rating – Optimization?

It’s not a problem in fact, but I would like to know if it is possible to optimise the code below.

It’s a simple code to show the star rating mark which is in the db.

I searched and tried with @foreach, but can’t figure it out.

Code:

<span class="review-stars" style="color: #1e88e5;">
<!-- ////////////// STAR RATE CHECKER ////////////// -->
    @if($review->rate <= 0)
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    @elseif($review->rate === 1)
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    @elseif($review->rate === 2)
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    @elseif($review->rate === 3)
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    @elseif($review->rate === 4)
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star-o" aria-hidden="true"></i>
    @elseif($review->rate >= 5)
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
        <i class="fa fa-star" aria-hidden="true"></i>
    @endif
    <!-- ///////////////////////////////////////////// -->
</span>

When $review->rate <= 0

When $review->rate === 3

When $review->rate >= 5

Answer

Don’t Repeat Yourself. Loop 5 times and write a condition to check if the star should be empty.

Code: (Demo: https://3v4l.org/Tj31J )

$review = (object)['rate' => 3];
for ($i = 0; $i < 5; ++$i) {
    echo '<i class="fa fa-star' , ($review->rate <= $i ? '-o' : '') , '" aria-hidden="true"></i>';
}

Output:

<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>

I don’t code in Laravel, correct me if this syntax is flawed:

@for ($i = 0; $i < 5; ++$i)
    <i class="fa fa-star{{ $review->rate <= $i ? '-o' : '' }}" aria-hidden="true"></i>
@endfor

If you want to incorporate half-empty (aka half-full) stars, just add another condition. The same design logic applies, add one more condition to check if the star should be halved. Here is a full battery of valid ratings tested:

Code (See the Demo for verbose output: https://3v4l.org/r4c6R )

$reviews = [
    (object)['rate' => 0],
    (object)['rate' => .5],
    (object)['rate' => 1],
    (object)['rate' => 1.5],
    (object)['rate' => 2],
    (object)['rate' => 2.5],
    (object)['rate' => 3],
    (object)['rate' => 3.5],
    (object)['rate' => 4],
    (object)['rate' => 4.5],
    (object)['rate' => 5]
];
foreach ($reviews as $review) {
    for ($i = 0; $i < 5; ++$i) {
        echo '<i class="fa fa-star' ,
            ($review->rate == $i + .5 ? '-half' : '') ,
            ($review->rate <= $i ? '-o' : '') ,
            '" aria-hidden="true"></i>';
        echo "n";
    }
    echo "n";
}

If you don’t understand the inline conditional syntax, google is only a click away.

Advertisement

Answer