CODEWITHSUNDEEP
phphtmllaravel
KaranjitFYP
KaranjitFYP

Reputation: 103

Laravel: Output value as a star rating

So i have a review system that will take in a users review of a hotel. I have managed to incorporate a star rating system in it too. The star rating system works and will store a value from 1-5 in the database. Now when i click on reviews i will be able to see all reviews from the user. However, when i click the reviews i am unable to see the star rating that is displayed. How will i manage to display the star rating on the review:

Show.blade.php

   {{Form::label('rating', 'Rating')}}
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font- 
   awesome/5.13.0/css/all.min.css">
  <form>
  <input type="radio" class="star-input" name="rating" id="star-1" value="1">
  <label for="star-1" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-2" value="2">
  <label for="star-2" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-3" value="3">
  <label for="star-3" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-4" value="4">
  <label for="star-4" class="star"><i class="fas fa-star"></i></label>
  <input type="radio" class="star-input" name="rating" id="star-5" value="5" 
  checked>
<label for="star-5" class="star"><i class="fas fa-star"></i></label>

 </form>
{{Form::Submit('submit', ['class' => 'btn btn-primary'])}}
{!! Form::close() !!}


    @if(count($review) > 1)
    @foreach($review as $reviews)
        <div class= "well"> 
            <h3><a href="/reviews/{{$reviews->title}}">{{$reviews->title}} </a>

    @for($i = 0; $i < 5; $i++)
      @if($i <= $reviews->rating)
        <label for="star-5" class="star">
        <i class="fas fa-star"span class="star star--gold"></span></i>
        </label>
      @else
      @endif
    @endfor

As you can see, i have {{$reviews-> rating}} which atm displays a value 1-5. How will i exactly display an actual star instead.

Upvotes: 1

Views: 4647

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20944

To output the stars in your templates you can do the following in the example below. But first a little note on your variable usage: Try to make any arrays of reviews plural and a single review singular. So $reviews for all reviews and a single review $review. This makes your code more readable and understandable for you and others.

So your $review->rating property is number. When the number is 3 you want to show 3 stars with the correct styling.

Use a loop to output 5 stars. Inside that loop see if the index of current star is lower or equal than the rating value. When it is, it means that the current star has to be part of the rating. And if it is not, it means that this star should be grayed out or styled differently.

This will result in all the stars that should be gold to have the star--gold class on it which can be styled accordingly.

@if(count($reviews) > 1)
  @foreach($reviews as $review)

    <div class= "well"> 
      <h3>
        <a href="/reviews/{{ $review->title }}">{{ $review->title }}</a>

        @for ($i = 0; $i < 5; $i++)
          @if ($i < $review->rating)
            <span class="star star--gold"></span>
          @else
            <span class="star"></span>
          @endif
        @endfor

      </h3>
      <small>{{ $review->created_at }}</small>
      <br>
      <small>{{ $review->body }}</small> 
      <br>
      <br>
    </div>

  @endforeach
@else

Upvotes: 2

Related Questions