- Buka projek Laravel dengan VSCode.
- Buka file index.blade.php yang berada di dalam subfolder produk.
- Tambahkan script berikut ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Produk</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<a href="{{url('produk/create')}}" class="btn btn-sm btn-primary mt-4 mb-2">
<i class="fa fa-plus" aria-hidden="true"></i> Tambah Data Produk Baru
</a>
<div class="card">
<div class="card-header text-white bg-primary">
Data Produk Aktif
</div>
<div class="card-body">
<table class="table table-sm table-bordered table-condensed table-striped">
<thead>
<tr>
<th style="width: 10%;">Aksi</th>
<th>#</th>
<th>Nama Produk</th>
<th style="width: 50%;">Deskripsi</th>
<th style="text-align: right;">Harga</th>
</tr>
</thead>
<tbody>
@foreach ($dtprodukaktif as $da)
<tr>
<td>
<a href="{{ url('/produk') }}/{{ $da->id }}/edit" class="btn btn-sm btn-success" title="Edit">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
<button class="btn btn-sm btn-warning" title="Pasifkan" onclick="openPRD('{{ $da->id }}','pasif')">
<i class="fa fa-ban" aria-hidden="true"></i>
</button>
</td>
<td>{{ $da->id }}</td>
<td style="font-size: 10pt;">
{{ $da->namaproduk }}
</td>
<td style="font-size: 10pt;">{{ $da->deskripsi }}</td>
<td style="text-align: right; font-size: 10pt;">
Rp. {{ number_format($da->harga, 0, ',', '.') }}
</td>
</tr>
<form id="pasifForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">
@csrf
@method('delete')
<input type="hidden" name="id" value="{{ $da->id }}" />
<input type="hidden" name="aksi" value="pasif" />
</form>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card mt-4">
<div class="card-header text-white bg-danger">
Data Produk Pasif
</div>
<div class="card-body">
<table class="table table-sm table-bordered table-condensed table-striped">
<thead>
<tr>
<th style="width: 10%;">Aksi</th>
<th style="text-align: right;">#</th>
<th>Nama Produk</th>
<th style="width: 50%;">Deskripsi</th>
<th style="text-align: right;">Harga</th>
</tr>
</thead>
<tbody>
@foreach ($dtprodukpasif as $da)
<tr>
<td>
<button class="btn btn-sm btn-warning" title="Restore" onclick="openPRD('{{ $da->id }}','restore')">
<i class="fa fa-undo" aria-hidden="true"></i>
</button>
<button class="btn btn-sm btn-danger" title="Delete" onclick="openPRD('{{ $da->id }}','delete')">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
<th style="text-align: right; font-size: 10pt;">
{{ $da->id }}
</th>
<td style="font-size: 10pt;">
{{ $da->namaproduk }}
</td>
<td style="font-size: 10pt;">{{ $da->deskripsi }}</td>
<td style="text-align: right; font-size: 10pt;">
Rp. {{ number_format($da->harga, 0, ',', '.') }}
</td>
</tr>
<form id="restoreForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">
@csrf
@method('delete')
<input type="hidden" name="id" value="{{ $da->id }}" />
<input type="hidden" name="aksi" value="restore" />
</form>
<form id="deleteForm{{ $da->id }}" method="post" action="{{ url('/produk') }}">
@csrf
@method('delete')
<input type="hidden" name="id" value="{{ $da->id }}" />
<input type="hidden" name="aksi" value="delete" />
</form>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
@if(session()->has('pesansukses'))
var msg = @json(session()->pull('pesansukses'));
Swal.fire({
title: "Konfirmasi",
text: msg,
icon: "success"
});
@endif
@if(session()->has('pesansalah'))
var msg = @json(session()->pull('pesansalah'));
Swal.fire({
title: "Konfirmasi",
text: msg,
icon: "success"
});
@endif
function openPRD(id, aksi) {
Swal.fire({
title: aksi.toUpperCase(),
text: "Apakah Proses ini ingin dilanjutkan?",
icon: "question",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Ya",
cancelButtonText: "No",
}).then((result) => {
if (result.isConfirmed) {
switch (aksi) {
case 'pasif':
document.getElementById('pasifForm' + id).submit();
break;
case 'restore':
document.getElementById('restoreForm' + id).submit();
break;
case 'delete':
document.getElementById('deleteForm' + id).submit();
break;
}
}
});
}
</script>
</body>
</html>
- Selanjutnya buka file ProdukController.php dan lakukan editing script di dalam function Destroy seperti di bawah ini :
//function utk menghapus data produk sesuai id
public function destroy(Request $request){
DB::beginTransaction();
try
{
$id = $request->id;
if($request->aksi == 'pasif')
{
Produk::where('id','=',$id)->delete();
DB::commit();
return redirect('produk')->with('pesansukses', 'Data Sukses Dipasifkan');
}
elseif($request->aksi == 'restore')
{
Produk::onlyTrashed()->where('id','=',$id)->restore();
DB::commit();
return redirect('produk')->with('pesansukses', 'Data Sukses Direstore');
}
elseif($request->aksi == 'delete')
{
Produk::where('id','=',$id)->forceDelete();
DB::commit();
return redirect('produk')->with('pesansukses', 'Data Sukses Dihapus');
}
}
catch(\Exception $e)
{
DB::rollback();
return redirect()->back()->withInput()->with('pesansalah', 'Data Gagal Dihapus');
}
}
- Buka file routes web.php kemudian tambahkan routes seperti di bawah ini:
Route::get('/produk', [ProdukController::class, 'index']);
Route::get('/produk/create', [ProdukController::class, 'create']);
Route::post('/produk', [ProdukController::class, 'store']);
Route::get('/produk/{id}/edit', [ProdukController::class, 'edit']);
Route::put('/produk/{id}', [ProdukController::class, 'update']);
Route::delete('/produk', [ProdukController::class, 'destroy']);
- Saat dijalankan di browser untuk setiap proses PRD (Pasif - Restore - Delete) maka akan tampil seperti berikut :
 |
| Tampilan data saat akan dipasifkan (tombol pasif diklik) |
 |
| Tampilan messagebox saat proses pasif sukses |
- Untuk proses restore dan delete permanent tampilan nya tidak jauh berbeda.
Postingan
