Selamat sore, sehat selalu buat kita semua.. Amiin
pada kesempatan kali ini saya ingin membagikan sebuah tulisan masih mengenai seputar pemrograman khususnya framework laravel, kasus yang akan dibahas kali adalah event onclik save database
Kita buat migration nya terlebih dahulu, sebagai contoh disini menggunakan database dengan nama table product_images yang sudah berelasi dengan product, untuk relasinya sendiri tidak diharuskan dalam kasus yang akan kita bahas ini, karena penulis memakai project yang sedang dikerjakan (abaikan saja untuk relasinya ^_^)
jangan lupa di migrate setelah kita selesai membuat migration nya
public function up()
{
Schema::create('product_images', function (Blueprint $table) {
$table->bigIncrements('id');
$table->unsignedBigInteger('product_id');
$table->string('images')->default('no-image.png');
$table->string('title');
$table->boolean('featured')->default(0);
$table->timestamps();
$table->foreign('product_id')->references('id')->on('products')
->onUpdate('cascade')->onDelete('cascade');
});
}untuk event onclick nya sendiri kita akan menggunakan colomn "featured" dengan nilai default 0 dan ketika disimpan berubah menjadi 1 untuk nilainya
Penulis tidak akan membahas routes atau controller untuk menampilkan gambar seperti dibawah ini, penulis yakin pembaca sudah paham dan lebih mengetahui dari penulis sendiri ^_^
untuk form nya sendiri kurang lebih seperti dibawah ini
<div class="tab-pane p-3" id="gambar" role="tabpanel">
<div class="col-md-8">
{!! Form::model($product_images, ['url' => route('product-gambar.update', $product->id), 'method'=>'put', 'class' => 'form-horizontal group-border-dashed', 'enctype=multipart/form-data']) !!}
<table class="table table-condensed table-bordered" id="table-gambar">
<thead>
<tr>
<th>Gambar</th>
<th>Titel</th>
<th>Featured</th>
<th>Update</th>
<th style="width: 15%">Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($product_images as $row)
<tr>
<td>
@if($row->images)
<img src="{{asset('storage/'.$row->images)}}"
width="70px"/>
@else
<img src="{{asset('storage/upload/no-image.png')}}" />
@endif
</td>
<td>{{$row->title}}</td>
<td class="text-center">
<a href="javascript:void(0)" class="heart" data-id="{{$row->id}}" data-url="{{ route('product.change-fetaured', $row->id) }}">
<i class="far fa-heart {{ ($row->featured == 0) ? '' : 'text-danger'}}"></i>
</a>
</td>
<td>{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $row->updated_at)->diffForHumans() }}</td>
<td>
<a class="icon-trash-bin delete-gambar btn btn-danger btn-sm" href="javascript:void(0)" data-url="{{ route('product-gambar.delete', $row->id) }}">
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<button class="btn btn-space btn-success" type="button" id="add-gambar">
<span class="mdi mdi-plus-circle"></span>
</button>
{!! Form::close() !!}
</div>
</div>
untuk javascriptnya kurang lebih seperti ini
$(document).on('click', '.heart', function(e){
$('.fa-heart').removeClass('text-danger');
$(this).children('.fa-heart').addClass('text-danger');
$(this).addClass('heart-active');
var id = $(this).data('id');
var url = $(this).data('url');
$.ajax({
type: 'POST',
url: url,
data: {
'_token': $('input[name=_token]').val(),
'id': id
},
success: function(data) {
// empty
toastr.success("Gambar telah dijadikan thumbail !!")
}
})
})
Dalam pembahasan kasus kali ini yang menjadi point pertama adalah bagaimana cara save onclick kedalam database, kita fokus pada tag html yang dibawah ini saja
<td class="text-center">
<a href="javascript:void(0)" class="heart" data-id="{{$row->id}}" data-url="{{ route('product.change-fetaured', $row->id) }}">
<i class="far fa-heart {{ ($row->featured == 0) ? '' : 'text-danger'}}"></i>
</a>
</td>
Didalam tag hmtl tsb kita harus membuat sebuah class untuk memudahkan ketika hendak dipanggil oleh javascript, pada contoh diatas saya memakai nama class="heart" dan juga font-awesome dengan class="far fa-heart"untuk mengisi pada table row dengan nama Featured seperti gambar diatas
Dan terakhir kita harus membuat Controller nya untuk menangkap update dari form tersebut
public function changeFeatured($id)
{
$product_images = ProductImages::findOrFail($id);
$remove_featured = ProductImages::where('product_id', $product_images->product_id)->where('featured', 1)->first();
if ($remove_featured) {
$remove_featured->featured = 0;
$remove_featured->update();
}
}DONE..!!!
Mohon maaf apabila dalam penjelasannya kurang bisa dimengerti dan blepotan kemana-mana ^_^
Dan untuk hasil ahirnya bisa dilihat gambar ditas, ketika kita klik icon heart nya berubah menjadi warna merah dan ada notif "gambar berhasil dijadikan thumbail"
Hatur Nuhun ... ^_^
Comments