- Buka projek laravel menggunakan VSCode.
- Buka Subfolder Resources - Views, kemudian buat sebuah subfolder baru dengan nama produk.
- Di dalam subfolder produk, buat file view baru dengan nama : index.blade.php, add.blade.php, edit.blade.php.
Keterangan:
- File index.blade.php akan kita manfaatkan untuk menampilkan data produk.
- File add.blade.php akan kita manfaatkan untuk menampilkan jendela tambah data produk baru.
- File edit.blade.php akan kita manfaatkan untuk menampilkan jendela edit data produk.
- Buka file index.blade.php kemudian tambahkan script dasar sebuah halaman bootstrap 5 berikut ini (bisa copy - paste dan website resmi Bootstrap 5):
<!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">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
- Tambahkan library FontAwesome dan library SweetAlert dalam bentuk css dan js ke dalam struktur Bootstrap 5 di atas untuk dapat menggunakan fontawesome dan sweetalert.
<!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>
<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>
</body>
</html>
- Di dalam tag Body tambahkan script untuk menampilkan data seperti 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">
<div class="card mt-4">
<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="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 ($dtprodukaktif as $da)
<tr>
<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;">
Rp. {{ number_format($da->harga, 0, ',', '.') }}
</td>
</tr>
@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="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>
<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;">
Rp. {{ number_format($da->harga, 0, ',', '.') }}
</td>
</tr>
@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>
</body>
</html>
- Untuk alamat pemanggilannya (URL), maka tambahkan script ini di dalam file web.php yang berada di dalam folder routes, sehingga untuk menampilkan data produk nanti kita cukup mengetikkan URL : http://localhost:8000/produk
use App\Http\Controllers\ProdukController;
Route::get('/produk', [ProdukController::class, 'index']);
- Selanjutnya, editlah script pada function index di dalam file ProdukController.php sesuai dengan sasaran route pada point 6 di atas dengan perintah sebagai berikut:
//function utk menampilkan data produk
public function index(){
// return response()->json(Produk::all(), 200);
$dtprodukaktif = Produk::all();
$dtprodukpasif = Produk::onlyTrashed()->get();
return view('produk.index', compact('dtprodukaktif', 'dtprodukpasif'));
}
Catatan:
return view('produk.index', compact('dtprodukaktif', 'dtprodukpasif')); - artinya hasil akhir perintah di atas adl memanggil file view dengan nama index yang berada di dalam folder resources - views - produk sekaligus menyertakan data dengan nama dtprodukaktif dan dtprodukpasif, hasil dari membaca tabel produks.
- Untuk melihat hasilnya, silakan buka browser kemudian ketikkan : http://localhost:8000/produk, maka akan ditampilkan jendela seperti di bawah ini (data yang muncul akan sesuai dengan data yang telah kalian inputkan ke dalam tabel produk kalian).
|
hasil tampilan di dalam view |
Catatan:
Agar mendapatkan DATA PASIF silakan isi kolom DELETED_AT pada salah satu baris data yang sudah kalian buat di dalam tabel produks.