02 Desember 2023

Tampil Data Produk

Sabtu, Desember 02, 2023  ,  No comments

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada kesempatan kali ini saya ingin membahas mengenai bagaimana cara menampilkan data Produk yang telah tersimpan di dalam tabel produks ke dalam halaman (View). Namun untuk memastikan proses ini berhasil maka pastikan langkah - langkah sebelumnya telah berhasil kalian lakukan (bisa dilihat dalam artikel 1 sd 5.

Untuk menampilkan data ada 2 (dua) sasaran yang bisa dituju, yaitu :
  1. File VIEW milik Laravel sendiri

    2. Jika ingin menampilkan data ke dalam view milik laravel sendiri maka kita harus menyiapkan file Route Web dan file View.

  2. File VIEW milik projek lain di luar Laravel

    3. Jika ingin menampilkan data ke dalam view milik projek lain di luar Laravel maka kita harus menyiapkan Route API sebagai media komunikasi dengan projek di luar Laravel.

Berikut kita akan belajar membuat file View di dalam projek Laravel sendiri :

  1. Buka projek laravel menggunakan VSCode.
  2. Buka Subfolder Resources - Views, kemudian buat sebuah subfolder baru dengan nama produk.
  3. Di dalam subfolder produk, buat file view baru dengan nama : index.blade.php, add.blade.php, edit.blade.php.

    4. 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.

  4. Buka file index.blade.php kemudian tambahkan script dasar sebuah halaman bootstrap 5 berikut ini (bisa copy - paste dan website resmi Bootstrap 5):
    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>
  5. Tambahkan library FontAwesome dan library SweetAlert dalam bentuk css dan js ke dalam struktur Bootstrap 5 di atas untuk dapat menggunakan fontawesome dan sweetalert.
    6.  <!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>
  6. Di dalam tag Body tambahkan script untuk menampilkan data seperti berikut ini :
    7.  <!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>
  7. 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
    8. use App\Http\Controllers\ProdukController;

    Route::get('/produk', [ProdukController::class, 'index']);
  8. Selanjutnya, editlah script pada function index di dalam file ProdukController.php sesuai dengan sasaran route pada point 6 di atas dengan perintah sebagai berikut:
    9.  //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.

  9. 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).
    10. 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.

Semoga artikel ini bermanfaat.

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)