Hello dear followers,
Updated 2 September 2019 by tjd studio, thanks for pointing typo issues and missed parts.
Today we will have exciting tutorial and I know it's the issue of many of you as it was mine for time being.
We are going to make our Laravel application posts ability of receiving rates. For start we are going to use laravel rateable package.
Step 1)
Install laravel rateable package. (follow instruction in Github)
Step 2)
Add function to your posts controller we will call it poststar
public function postStar (Request $request, Post $post) {
$rating = new Rating;
$rating->user_id = Auth::id();
$rating->rating = $request->input('star');
$post->ratings()->save($rating);
return redirect()->back();
}Lets take a look at the code above:
Here is sample code of package
$rating = new willvincentRateableRating;
$rating->rating = 5;
$rating->user_id = Auth::id();
$post->ratings()->save($rating);We changed first line to
$rating = new Rating;Because we added our rating model top of our controller
use AppRating;We also changed $rating->rating = 5; to $rating->rating = $request->input('star'); to be able to get dynamic rates of what user will choose instead of static 5 star rate.
Now lets make our Rating model, go to App folder and create new file name it Rating.php and add following code in it (if it doesn't exist)
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Rating extends Model
{
protected $table = 'ratings';
public $fillable = ['rating', 'rateable_id', 'user_id'];
/**
* @return mixed
*/
public function rateable()
{
return $this->morphTo();
}
public function user()
{
return $this->belongsTo(User::class);
}
public function post()
{
return $this->belongsTo(Post::class);
}
}In your post model add this:
public function rating()
{
return $this->hasMany(Rating::class);
}Now lets add route for our poststar function
Route::post('/rating/{post}', 'FrontendController@postStar')->name('postStar');Now everything in back-end is ready let's make front-end for our rating system.
Go to your posts show blade file and add this form everywhere you like to show rating option:
<form class="form-horizontal poststars" action="{{route('productStar', $product->id)}}" id="addStar" method="POST">
{{ csrf_field() }}
<div class="form-group required">
<div class="col-sm-12">
<input class="star star-5" value="5" id="star-5" type="radio" name="star"/>
<label class="star star-5" for="star-5"></label>
<input class="star star-4" value="4" id="star-4" type="radio" name="star"/>
<label class="star star-4" for="star-4"></label>
<input class="star star-3" value="3" id="star-3" type="radio" name="star"/>
<label class="star star-3" for="star-3"></label>
<input class="star star-2" value="2" id="star-2" type="radio" name="star"/>
<label class="star star-2" for="star-2"></label>
<input class="star star-1" value="1" id="star-1" type="radio" name="star"/>
<label class="star star-1" for="star-1"></label>
</div>
</div>
</form>Here is css for our stars to show it nicely:
/** rating **/
div.stars {
display: inline-block;
}
input.star { display: none; }
label.star {
float: right;
padding: 10px;
font-size: 20px;
color: #444;
transition: all .2s;
}
input.star:checked ~ label.star:before {
content: 'f005';
color: #e74c3c;
transition: all .25s;
}
input.star-5:checked ~ label.star:before {
color: #e74c3c;
text-shadow: 0 0 5px #7f8c8d;
}
input.star-1:checked ~ label.star:before { color: #F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
content: 'f006';
font-family: FontAwesome;
}
.horline > li:not(:last-child):after {
content: " |";
}
.horline > li {
font-weight: bold;
color: #ff7e1a;
}
/** end rating **/Note: you will need font-awesome in your project to show stars.
Now the last but not the least part adding Jquery.
Bottom of your page if you use @yield in your layout or bottom of your layout if you don't use any yield for scripts add this code:
<script>
$('#addStar').change('.star', function(e) {
$(this).submit();
});
</script>Now go and test it out.
{{$post->userSumRating}} or any other option you prefer (list provided in package documentation).
- Last updated 4 years ago
Be the first to leave a comment.
You must login to leave a comment