Proses input sampai hapus produk sudah kita buat, sekarang kita akan membuat daftar gambar atau image untuk produk. Untuk daftar image kita membutuhkan 1 buah table lagi, kita kasih nama produk_images.
# Buat model ProdukImage dan migrations
Buka terminal dan jalan perintah berikut.
php artisan make:model ProdukImage -m
kemudian pencet enter.
Edit file migration dengan akhiran produk_images_table.php
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateProdukImagesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('produk_images', function (Blueprint $table) {
$table->increments('id');
$table->integer('produk_id')->unsigned();
$table->string('foto')->nullable();
$table->foreign('produk_id')->references('id')->on('produk');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('produk_images');
}
}
Kemudian buka file model ProdukImage.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class ProdukImage extends Model
{
protected $fillable = [
'produk_id',
'foto',
];
public function produk() {
return $this->belongsTo('App\Produk','produk_id');
}
}
Setelah selesai, jalankan perintah migrate untuk memasukkan table ke database
php artisan migrate
Kemudian pencet enter.
# Edit Model Produk
Setelah produk image selesai kita update, selanjutnya update model Produk.php untuk menambahkan relasi ke table produk_images. Buka file Produk.php dan edit.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Produk extends Model
{
protected $table = 'produk';
protected $fillable = [
'kategori_id',
'user_id',
'kode_produk',
'nama_produk',
'slug_produk',
'deskripsi_produk',
'foto',
'qty',
'satuan',
'harga',
'status',
];
public function kategori() {
return $this->belongsTo('App\Kategori', 'kategori_id');
}
public function user() {
return $this->belongsTo('App\User', 'user_id');
}
public function images() {
return $this->hasMany('App\ProdukImage', 'produk_id');
}
}
# Edit function show
Buka controller ProdukController.php dan edit pada bagian function show menjadi seperti berikut.
public function show($id)
{
$itemproduk = Produk::findOrFail($id);
$data = array('title' => 'Foto Produk',
'itemproduk' => $itemproduk);
return view('produk.show', $data);
}
# views show
Setelah function show dilengkapi, selanjutnya buat 1 buah file di dalam folder views/produk dengan nama show.blade.php
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col col-lg-4 col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title">Detail Produk</h3>
<div class="card-tools">
<a href="{{ route('produk.index') }}" class="btn btn-sm btn-danger">
Tutup
</a>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<tr>
<td>Kode Produk</td>
<td>
{{ $itemproduk->kode_produk }}
</td>
</tr>
<tr>
<td>Nama Produk</td>
<td>
{{ $itemproduk->nama_produk }}
</td>
</tr>
<tr>
<td>Qty</td>
<td>
{{ $itemproduk->qty }} {{ $itemproduk->satuan }}
</td>
</tr>
<tr>
<td>Harga</td>
<td>
Rp. {{ number_format($itemproduk->harga, 2) }}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col col-lg-8 col-md-8">
<div class="card">
<div class="card-header">
<h3 class="card-title">Foto Produk</h3>
</div>
<div class="card-body">
<form action="{{ url('/admin/produkimage') }}" method="post" enctype="multipart/form-data" class="form-inline">
@csrf
<div class="form-group">
<input type="file" name="image" id="image">
<input type="hidden" name="produk_id" value={{ $itemproduk->id }}>
</div>
<div class="form-group">
<button class="btn btn-primary">Upload</button>
</div>
</form>
</div>
<div class="card-body">
<div class="row">
<div class="col mb-2">
@if(count($errors) > 0)
@foreach($errors->all() as $error)
<div class="alert alert-warning">{{ $error }}</div>
@endforeach
@endif
@if ($message = Session::get('error'))
<div class="alert alert-warning">
<p>{{ $message }}</p>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
</div>
</div>
<div class="row">
@foreach($itemproduk->images as $image)
<div class="col-md-3 mb-2">
<img src="{{ \Storage::url($image->foto) }}" alt="image" class="img-thumbnail mb-2">
<form action="{{ url('/admin/produkimage/'.$image->id) }}" method="post" style="display:inline;">
@csrf
{{ method_field('delete') }}
<button type="submit" class="btn btn-sm btn-danger mb-2">
Hapus
</button>
</form>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
# Tambahkan function upload dan delete image
Buka file ProdukController.php dan tambahkan 2 buah function di bawah function destroy.
public function uploadimage(Request $request) {
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
'produk_id' => 'required',
]);
$itemuser = $request->user();
$itemproduk = Produk::where('user_id', $itemuser->id)
->where('id', $request->produk_id)
->first();
if ($itemproduk) {
$fileupload = $request->file('image');
$folder = 'assets/images';
$itemgambar = (new ImageController)->upload($fileupload, $itemuser, $folder);
// simpan ke table produk_images
$inputan = $request->all();
$inputan['foto'] = $itemgambar->url;//ambil url file yang barusan diupload
// simpan ke produk image
\App\ProdukImage::create($inputan);
// update banner produk
$itemproduk->update(['foto' => $itemgambar->url]);
// end update banner produk
return back()->with('success', 'Image berhasil diupload');
} else {
return back()->with('error', 'Kategori tidak ditemukan');
}
}
public function deleteimage(Request $request, $id) {
// ambil data produk image by id
$itemprodukimage = \App\ProdukImage::findOrFail($id);
// ambil produk by produk_id kalau tidak ada maka error 404
$itemproduk = Produk::findOrFail($itemprodukimage->produk_id);
// kita cari dulu database berdasarkan url gambar
$itemgambar = \App\Image::where('url', $itemprodukimage->foto)->first();
// hapus imagenya
if ($itemgambar) {
\Storage::delete($itemgambar->url);
$itemgambar->delete();
}
// baru update hapus produk image
$itemprodukimage->delete();
//ambil 1 buah produk image buat diupdate jadi banner produk
$itemsisaprodukimage = \App\ProdukImage::where('produk_id', $itemproduk->id)->first();
if ($itemsisaprodukimage) {
$itemproduk->update(['foto' => $itemsisaprodukimage->foto]);
} else {
$itemproduk->update(['foto' => null]);
}
//end update jadi banner produk
return back()->with('success', 'Data berhasil dihapus');
}
# web route
Agar bisa jalan produk upload dan delete produk image, update file web.php di dalam folder routes
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');
Route::get('/kategori', '[email protected]');
Route::get('/kategori/{slug}', '[email protected]');
Route::get('/produk', '[email protected]');
Route::get('/produk/{slug}', '[email protected]');
Route::group(['prefix' => 'admin', 'middleware' => 'auth'], function() {
Route::get('/', '[email protected]');
// route kategori
Route::resource('kategori', 'KategoriController');
// route produk
Route::resource('produk', 'ProdukController');
// route customer
Route::resource('customer', 'CustomerController');
// route transaksi
Route::resource('transaksi', 'TransaksiController');
// profil
Route::get('profil', '[email protected]');
// setting profil
Route::get('setting', '[email protected]');
// form laporan
Route::get('laporan', '[email protected]');
// proses laporan
Route::get('proseslaporan', '[email protected]');
// image
Route::get('image', '[email protected]');
// simpan image
Route::post('image', '[email protected]');
// hapus image by id
Route::delete('image/{id}', '[email protected]');
// upload image kategori
Route::post('imagekategori', '[email protected]');
// hapus image kategori
Route::delete('imagekategori/{id}', '[email protected]');
// upload image produk
Route::post('produkimage', '[email protected]');
// hapus image produk
Route::delete('produkimage/{id}', '[email protected]');
});
Auth::routes();
Route::get('/home', '[email protected]')->name('home');
# Update view index produk
Karena pada proses upload dan delete image produk juga mengupdate foto atau banner produk, maka kita perlu mengupdate view index produk. Buka file index.blade.php di dalam folder views/produk
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<!-- table produk -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h4 class="card-title">Produk</h4>
<div class="card-tools">
<a href="{{ route('produk.create') }}" class="btn btn-sm btn-primary">
Baru
</a>
</div>
</div>
<div class="card-body">
<form action="#">
<div class="row">
<div class="col">
<input type="text" name="keyword" id="keyword" class="form-control" placeholder="ketik keyword disini">
</div>
<div class="col-auto">
<button class="btn btn-primary">
Cari
</button>
</div>
</div>
</form>
</div>
<div class="card-body">
@if ($message = Session::get('error'))
<div class="alert alert-warning">
<p>{{ $message }}</p>
</div>
@endif
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="50px">No</th>
<th>Gambar</th>
<th>Kode</th>
<th>Nama</th>
<th>Jumlah</th>
<th>Harga</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($itemproduk as $produk)
<tr>
<td>
{{ ++$no }}
</td>
<td>
@if($produk->foto != null)
<img src="{{ \Storage::url($produk->foto) }}" alt="{{ $produk->nama_produk }}" width='150px' class="img-thumbnail">
@endif
</td>
<td>
{{ $produk->kode_produk }}
</td>
<td>
{{ $produk->nama_produk }}
</td>
<td>
{{ $produk->qty }} {{ $produk->satuan }}
</td>
<td>
{{ number_format($produk->harga, 2) }}
</td>
<td>
{{ $produk->status }}
</td>
<td>
<a href="{{ route('produk.show', $produk->id) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Detail
</a>
<a href="{{ route('produk.edit', $produk->id) }}" class="btn btn-sm btn-primary mr-2 mb-2">
Edit
</a>
<form action="{{ route('produk.destroy', $produk->id) }}" method="post" style="display:inline;">
@csrf
{{ method_field('delete') }}
<button type="submit" class="btn btn-sm btn-danger mb-2">
Hapus
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $itemproduk->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Pada bagian gambar produk update seperti skrip di atas.
# Trial
Buka halaman dashboard produk, kemudian klik tombol detail di baris produk yang diinput. tampilannya akan seperti berikut.
Sekarang coba upload beberapa gambar dan hapus sebagian.