This post is also available in:
English
Hallo apa kabar teman semuanya, semoga kalian semua sehat dan sukses selalu. Kali ini kita akan kembali ngoding. Membuat rating dengan laravel. Ini sangat penting bagi kalian semua ketika membuat aplikasi penjualan atau jasa lainnya, untuk mendapatkan penilaian dan ulasan dari layanan yang kalian buat.
Kalian dapat mempelajari tutorial yang lainnya:
Drag and Drop Image/File Upload Menggunakan Laravel
REST API Login & Register Dengan Sanctum Laravel
Upload File menggunakan Ajax di Laravel
Ulasan dan Rating Laravel
Peringkat ulasan adalah modul paling umum di setiap aplikasi, sebagian besar Anda akan melihat ulasan dan sistem peringkat di platform e-commerce di mana ada opsi setelah setiap produk untuk menilai atau ditinjau oleh pengguna untuk berbagi pengalaman atau umpan baliknya.
Misalnya, untuk menerapkan sistem ulasan dan peringkat di aplikasi laravel, kami membuat dan menyimpan beberapa posting di database dan kemudian menerapkan platform ulasan dan peringkat setelah setiap posting, di mana pengguna dapat memilih peringkat bintang dan menulis komentarnya.
Baiklah kita langung saja pada pembahasannya.
Migration
Kalian harus membuat tabel rating terlebih dahulu, yaitu untuk menyimpan data dari rating dan ulasan.
php artisan make:migration create_review_ratings_tableKita buka file migrasi yang telah kita buat pada folder database\migrations\ isikan kode seperti di bawah ini:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateReviewRatingsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('review_ratings', function (Blueprint $table) {
$table->increments('id');
$table->unsignedBigInteger('booking_id');
$table->longText('comments')->nullable();
$table->integer('star_rating');
$table->enum('status', ['active', 'deactive']);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('review_ratings');
}
}
Catatan : pada field booking_id kalian dapat menyuasikan dengan tabel kalian semua. pada kasus kali ini saya akan memebrikan contoh pada projek saya.
Run Migration
php artisan migrate
Routes
Kalian tambahkan route seperti di bawah ini di routes\web.php
Route::post('review-store', 'BookingController@reviewstore')->name('review.store');Contollers
Pada controller kalian tambahkan kode seperti di bawah ini:
public function reviewstore(Request $request){
$review = new ReviewRating();
$review->booking_id = $request->booking_id;
$review->comments= $request->comment;
$review->star_rating = $request->rating;
$review->user_id = Auth::user()->id;
$review->service_id = $request->service_id;
$review->save();
return redirect()->back()->with('flash_msg_success','Your review has been submitted Successfully,');
}Blades
Tambahkan blade rating, silahkan tambahkan kode di bawah ini di form kalian semua.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.rate {
float: left;
height: 46px;
padding: 0 10px;
}
.rate:not(:checked) > input {
position:absolute;
display: none;
}
.rate:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rated:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ccc;
}
.rate:not(:checked) > label:before {
content: '★ ';
}
.rate > input:checked ~ label {
color: #ffc700;
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
color: #c59b08;
}
.star-rating-complete{
color: #c59b08;
}
.rating-container .form-control:hover, .rating-container .form-control:focus{
background: #fff;
border: 1px solid #ced4da;
}
.rating-container textarea:focus, .rating-container input:focus {
color: #000;
}
.rated {
float: left;
height: 46px;
padding: 0 10px;
}
.rated:not(:checked) > input {
position:absolute;
display: none;
}
.rated:not(:checked) > label {
float:right;
width:1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:30px;
color:#ffc700;
}
.rated:not(:checked) > label:before {
content: '★ ';
}
.rated > input:checked ~ label {
color: #ffc700;
}
.rated:not(:checked) > label:hover,
.rated:not(:checked) > label:hover ~ label {
color: #deb217;
}
.rated > input:checked + label:hover,
.rated > input:checked + label:hover ~ label,
.rated > input:checked ~ label:hover,
.rated > input:checked ~ label:hover ~ label,
.rated > label:hover ~ input:checked ~ label {
color: #c59b08;
}
</style>
@if(!empty($value->star_rating))
<div class="container">
<div class="row">
<div class="col mt-4">
<p class="font-weight-bold ">Review</p>
<div class="form-group row">
<input type="hidden" name="booking_id" value="{{ $value->id }}">
<div class="col">
<div class="rated">
@for($i=1; $i<=$value->star_rating; $i++)
{{-- <input type="radio" id="star{{$i}}" class="rate" name="rating" value="5"/> --}}
<label class="star-rating-complete" title="text">{{$i}} stars</label>
@endfor
</div>
</div>
</div>
<div class="form-group row mt-4">
<div class="col">
<p>{{ $value->comments }}</p>
</div>
</div>
</div>
</div>
</div>
@else
<div class="container">
<div class="row">
<div class="col mt-4">
<form class="py-2 px-4" action="{{route('admin.review.store')}}" style="box-shadow: 0 0 10px 0 #ddd;" method="POST" autocomplete="off">
@csrf
<p class="font-weight-bold ">Review</p>
<div class="form-group row">
<input type="hidden" name="booking_id" value="{{ $value->id }}">
<div class="col">
<div class="rate">
<input type="radio" id="star5" class="rate" name="rating" value="5"/>
<label for="star5" title="text">5 stars</label>
<input type="radio" checked id="star4" class="rate" name="rating" value="4"/>
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" class="rate" name="rating" value="3"/>
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" class="rate" name="rating" value="2">
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" class="rate" name="rating" value="1"/>
<label for="star1" title="text">1 star</label>
</div>
</div>
</div>
<div class="form-group row mt-4">
<div class="col">
<textarea class="form-control" name="comment" rows="6 " placeholder="Comment" maxlength="200"></textarea>
</div>
</div>
<div class="mt-3 text-right">
<button class="btn btn-sm py-2 px-3 btn-info">Submit
</button>
</div>
</form>
</div>
</div>
</div>
@endifCatatan: pada kode di atas, saya hanya bagikan beberapa kode html dan css. Silahkan tambahkan tambahkan pada form kalian semua. Dan saya berikan dua kondisi ketika input form dan setelah input form, Maka hasilnya seperti di bawah ini.
Input form
Output
Demikian tutorial kali ini yang dapat saya sampaikan, semoga bermanfaat.
Terimakasih.
