Frontend Framework - Bootstrap 5

Frontend Framework yang mudah dipelajari dan powerfull untuk digunakan dalam pembuatan website.

Web Language Programming - PHP 8

PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.

Framework PHP - Laravel

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

The Mobile SDK for The WEB

An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in React/Vue/Angular.

App Game Kit

AppGameKit is an easy to learn game development engine, ideal for Beginners, Hobbyists and Indie developers

16 Desember 2023

Hapus Data Produk

Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...

Dalam tutorial kali ini kita akan membahas 3 hal yaitu :
  1. Hapus Data Produk versi Temporary (Soft Deletes)
  2. Restore Data Produk
  3. Hapus Data Produk versi Permanent.
Selalu saya ingatkan bahwa proses mempasifkan maupun menghapus data dari database harus dilakukan secara hati - hati karena DBMS seperti MySQL tidak memiliki menu UNDO, sehingga jika data sudah terlanjur dihapus permanent maka tidak akan dapat dikembalikan lagi. 

Oleh karena itu, Laravel memberikan konsep SOFTDELETE yang telah kita bahas librarynya di awal yaitu saat membahas pembuatan Model dan Tabel (silakan baca lagi DI SINI). Library SoftDeletes WAJIB ditambahkan dan dipanggil terlebih dahulu untuk dapat menggunakan konsep penghapusan temporary.

Langkah - langkah untuk mempasifkan, merestore dan menghapus permanent data produk adalah sebagai berikut :
  1. Buka projek Laravel dengan VSCode.
  2. Buka file index.blade.php yang berada di dalam subfolder produk.
  3. Tambahkan script berikut ini :
  4.  <!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>  
    
  5. Selanjutnya buka file ProdukController.php dan lakukan editing script di dalam function Destroy seperti di bawah ini :
  6.    //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');  
         }  
       }  
    
  7. Buka file routes web.php kemudian tambahkan routes seperti di bawah ini:
  8.  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']);  
    
  9. 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

  10. Untuk proses restore dan delete permanent tampilan nya tidak jauh berbeda.

Semoga artikel ini bermanfaat

13 Desember 2023

Edit Data Produk

Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit... 

Di dalam artikel ini saya ingin membagikan cara membuat halaman Edit Data. Halaman ini digunakan utk proses edit data produk. Proses ini nantinya diawali dari mengklik tombol Edit Data yang ada di halaman index.blade.php kemudian halaman edit.blade.php akan dimunculkan. Setelah selesai mengisi data yang ingin diedit maka tekan tombol simpan untuk menyimpan data Edit dan hasil edit dapat dilihat di halaman index.blade.php kembali.

Berikut langkah - langkah untuk membuat halaman Edit Data Produk:

  1. Buka projek ke dalam VSCode.
  2. Buka file routes web.php dan tambahkan script berikut ini:
  3.  Route::get('/produk/{id}/edit', [ProdukController::class, 'edit']);
     Route::put('/produk/{id}', [ProdukController::class, 'update']); 
    
  4. Buka file ProdukController.php kemudian tambahkan sebuah function baru dengan nama edit. Function ini digunakan utk memanggil halaman edit.blade.php.
  5.  //function utk menampilkan data yang ingin diedit  
     public function edit(string $id)  
     {  
        $dtedit = Produk::where('id','=',$id)->get();  
        return view('produk.edit', compact('dtedit'));  
     }  
    
  6. Masih di dalam ProdukController.php, lakukan editing function update seperti di bawah ini:
  7.    //function utk menyimpan data hasil edit  
       public function update(Request $request, string $id){  
         $validasiData = $request->validate([  
           'namaproduk'  => 'required|max:255|unique:produks,namaproduk,'.$id,  
           'deskripsi'   => 'required',  
           'harga'       => 'required|numeric'  
         ]);  
         DB::beginTransaction();  
         try  
         {  
           Produk::where('id', '=', $id)->update($validasiData);  
           DB::commit();  
           return redirect('produk')->with('pesansukses', 'Data Sukses Disimpan');  
         }  
         catch(\Exception $e)  
         {  
           DB::rollback();  
           return redirect()->back()->withInput()->with('pesansalah', 'Data Gagal Disimpan');  
         }  
       }  
    
    Keterangan:
    validasi : 'namaproduk' => 'required|max:255|unique:produks,namaproduk,'.$id, fungsinya adl mencek apakah nama produk yang akan disimpan edit sudah pernah diinputkan atau belum, kalau ditemukan nama yang sama (artinya ada baris data lain dengan $id yang berbeda) maka data akan ditolak utk disimpan.
     
  8. Buka file index.blade.php yang berada di dalam folder resources - views - produk.
  9. Tambahkan script berikut untuk membuat kolom yang nantinya berisi tombol Edit dan tombol Pasif Data
  10.  <!doctype html>  
     <html lang="en">  
      <head>  
       <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
       <title>Bootstrap demo</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">  
                           <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>  
                     @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>  
                         <a href="{{ url('/produk/restore') }}/{{ $da->id }}" class="btn btn-sm btn-warning" title="Restore">  
                           <i class="fa fa-undo" aria-hidden="true"></i>  
                         </a>  
                         <button class="btn btn-sm btn-danger" title="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>  
                     @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>  
         @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  
       </script>   
       
      </body>  
     </html>  
    
  11. Apabila dijalankan pada browser halaman index.blade.php akan tampil sebagai berikut:
    halaman index.blade.php yang telah dilengkapi dg tombol edit, pasif, restore dan delete

  12. Selanjutnya kita buat design halaman Edit Data Produk. Proses awalnya boleh dengan copas dari halaman add.blade.php yang sudah dibuat sebelumnya, kemudian berikan nama edit.blade.php.
  13. Buka halaman edit.blade.php kemudian lakukan editing script seperti di bawah ini:
  14.  <!doctype html>  
     <html lang="en">  
      <head>  
       <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
       <title>Edit Data Produk Baru</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>  
       @foreach($dtedit as $de)  
       <form method="post" action="{{ url('produk') }}/{{ $de->id }}">  
         @csrf  
         @method('PUT')  
         <div class="container-fluid">  
           <div class="row">  
             <div class="col-12 d-flex justify-content-center">  
               <div class="card text-bg-light mb-3" style="width: 400px; margin-top:100px;">  
                 <div class="card-header bg-primary text-white">EDIT DATA PRODUK</div>  
                 <div class="card-body">  
                   <div class="mb-3">  
                     <label for="namaproduk" class="form-label text-primary @error('namaproduk') text-danger @enderror">  
                       Nama Produk  
                     </label>  
                     <input type="text" class="form-control @error('namaproduk') is-invalid @enderror"   
                     id="namaproduk" name="namaproduk" value="{{ $de->namaproduk }}"/>  
                     @error('namaproduk')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                   <div class="mb-3">  
                     <label for="deskripsi" class="form-label text-primary @error('deskripsi') text-danger @enderror">  
                       Deskripsi Produk  
                     </label>  
                     <textarea class="form-control" id="deskripsi" name="deskripsi" rows="2">{{ $de->deskripsi }}</textarea>  
                     @error('deskripsi')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                   <div class="mb-3">  
                     <label for="harga" class="form-label text-primary @error('harga') text-danger @enderror">Harga Produk (Rp)</label>  
                     <input type="text" class="form-control " id="harga" name="harga" value="{{ $de->harga }}"/>  
                     @error('harga')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                 </div>  
                 <div class="card-footer text-center">  
                   <button type="submit" class="btn btn-primary btn-sm">Save</button>  
                   <button type="reset" class="btn btn-danger btn-sm">Cancel</button>  
                 </div>  
               </div>  
             </div>  
           </div>  
         </div>  
       </form>  
       @endforeach  
       <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>  
    
  15. Berikut hasil tampilan halaman Edit saat dijalankan di browser:
    tampilan halaman edit produk
    Keterangan:
    Bedanya dengan halaman add, saat halaman edit muncul maka secara otomatis data yang ingin diedit juga ditampilkan dan tinggal diedit mana yang perlu diedit, kemudian tekan tombol Save untuk menyimpan hasil edit.
Semoga artikel ini bermanfaat.

12 Desember 2023

DB Transaction

Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...

Database transaction adalah salah satu subset yang disediakan SQL, digunakan untuk mengatur alur data transaksi dalam suatu database. Mudahnya, kita dapat menggabungkan banyak queri ke dalam grup dan akan mengeksekusi secara bersama sebagai bagian dari Transaction. Jika ada kegagalan dalam 1 node (proses), maka seluruh transaksi (proses input) akan dibatalkan.

Database Transaction ini akan sangat bermanfaat saat kita memiliki sebuah proses yang membutuhkan syarat untuk menyimpan ke dalam beberapa tabel sekaligus dan semua harus sukses. .

Contoh :
Dalam proses penjualan barang maka user butuh menyimpan ke dalam tabel produks (mengurangi stok), tabel penjualans (menambah data penjualan baru) dan tabel penjualan_details (menambah data detail penjualan baru). Proses ke dalam ketiga tabel tersebut harus sukses semua. Jika salah satu gagal maka semua proses harus dibatalkan. Karena kalau misal stok telah dikurangi tapi tidak dapat dicek berkurangnya stok hasil dari penjualan yang mana, maka itu berbahaya bagi kelangsungan data.

Di Laravel Terdapat 3 metode yang biasa digunakan saat menggunakan DB transaction yaitu :
  1. DB::beginTransactions
    Kalian dapat menggunakan metode ini untuk memulai transaksi pada permulaan statement
  2. DB::commit
    Metode ini digunakan untuk menyimpan semua operasi yang dilakukan setelah metode DB::beginTransactions
  3. DB::rollback
    Metode ini digunakan untuk membatalkan semua operasi yang dilakukan setelah metode DB::beginTransaction
Contoh penggunaan Database Transaction:
  1. Contoh Scipt:
  2.  <?php  
     namespace App\Http\Controllers;  
     use Illuminate\Http\Request;  
     use App\Models\Produk;  
     use Illuminate\Support\Facades\DB;
    
     class ProdukController extends Controller  
     {  
       //function utk menyimpan data produk baru  
       public function store(Request $request){  
         $validasiData   = $request->validate([  
           'namaproduk'  => ['required','unique:produks','max:255'],  
           'deskripsi'   => ['required'],  
           'harga'       => ['required','numeric']  
         ]);   
         DB::beginTransaction();  
         try  
         {  
           Produk::create($request->all());  
           DB::commit();  
           return redirect('produk')->with('pesansukses', 'Data Sukses Disimpan');  
         }  
         catch(\Exception $e)  
         {  
           DB::rollback();  
           return redirect()->back()->withInput()->with('pesansalah', 'Data Gagal Disimpan');  
         }  
       }  
     }  
    
  3. Untuk menampilkan messagebox data sukses maka kita bisa menangkap FlashSession bernama pesansukses yang dikirimkan dari Controller. Demikian juga untuk proses gagal, maka kita dapat menangkap FlashSession bernama pesansalah. Untuk itu buka halaman index.blade.php kemudian tambahkan script berikut dibawah di bawah script library sweetalert dan sebelum tag tutup body.
  4.      <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  
       </script>   
       </body>
    
  5. Berikut tampilan MessageBox saat data sukses disimpan:
    Tampilan SweetAlert saat data sukses disimpan


Semoga artikel ini bermanfaat.

09 Desember 2023

Validasi Data Produk

Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...

Dalam sesi tutorial sebelumnya kita telah belajar mengenai cara membuat halaman View untuk menangani proses tambah data produk baru, lengkap dengan controller dan routenya. Selanjutnya, dalam tutorial ini saya akan menjelaskan mengenai cara menangkap data yang dikirimkan dari halaman View (Tambah Produk Baru) kemudian cara memvalidasi data tersebut dan jika lolos dari validasi maka data tersebut akan disimpan ke dalam tabel produks.

Cara menangkap kiriman dari View (Tambah Produk Baru) di dalam Controller (function Store) :

  1. Buka file ProdukController.php.
  2. Lakukan editing script di dalam function Store seperti di bawah ini :
  3.  //function utk menyimpan data produk baru  
     public function store(Request $request){  
        return $request->all();   
     }  
    
  4. Buka file route - web.php kemudian tambahkan script berikut untuk mengarah ke dalam function store di dalam ProdukController.php
  5.  Route::get('/produk', [ProdukController::class, 'index']);  
     Route::get('/produk/create', [ProdukController::class, 'create']);  
     Route::post('/produk', [ProdukController::class, 'store']);  
    
  6. Perintah di atas akan menangkap dan menampilkan data kiriman dari halaman View (Tambah Produk Baru). Untuk menguji jalankan halaman tambah data produk baru dengan mengetikkan perintah : http://localhost:8000/produk/create, kemudian isi data nya dan tekan tombol Simpan, maka akan tampil hasil seperti di bawah ini :
    contoh isi data add produk baru

  7. Hasil tangkapan nya seperti di bawah ini:
hasil penangkapan kiriman
Keterangan:
Nama - nama variabel yang terlihat di atas merupakan atribute NAME komponen INPUT yang ada di halaman View. Jadi pastikan agar kiriman dapat ditangkap maka atribute NAME di dalam komponen INPUT harus diisi (Misal diisi dengan nama-nama kolom yang ada di dalam tabel produk).

Cara Validasi Kiriman Data di dalam Laravel :

Sebelum data disimpan ke dalam tabel sebaiknya data divalidasi terlebih dahulu untuk memastikan bahwa data tersebut benar sesuai dengan tipe dan nilai kolom tabel yang telah dibuat sebelumnya.

Validasi data kiriman biasanya kita lakukan dari sisi tag Input HTML sendiri contohnya dengan memberikan perintah required yang artinya inputan tersebut wajib diisi. Namun karena keterbatasan tag HTML yang memang dirancang bukan untuk proses logika maka Laravel memberikan cara validasi yaitu menggunakan helper Validation yang scriptnya kita tulis di dalam Controller.

Artikel mengenai cara Validation di dalam Laravel dapat dibaca langsung di dalam dokumentasi Laravel 10 (klik LINK INI).

Berikut saya berikan contoh script validasi data produk sebelum disimpan :
  1. Tambahkan script Validasi data kiriman berikut di dalam function store
  2.    //function utk menyimpan data produk baru  
       public function store(Request $request){  
         $validasiData = $request->validate([  
           'namaproduk'  => ['required', 'unique:produks', 'max:255'],  
           'deskripsi'   => ['required'],  
           'harga'       => ['required', 'numeric']  
         ]);   
         return $request->all();  
       }  
    Keterangan:
    1. required - wajib ada data yang dikirimkan dan kalau kosong akan muncul pesan error.
    2. unique:produks - nama produk harus selalu beda (tidak boleh dimasukkan sama / kembar).
    3. max:255 - data yang dikirimkankan maksimal 255 karakter kalau lebih akan muncul pesan error.
    4. numeric - data yang dikirimkan wajib berbentuk angka/numeric kalau berbentuk huruf atau karakter khusus maka akan muncul pesan error.
  3. Untuk mengetahui validasi data apa saja yang disediakan dan dapat dihandle oleh Laravel maka kita dapat melihatnya di dalam File validation.php yang terletak di dalam Folder Lang. Apabila folder dan file ini belum terlihat maka jalankan perintah berikut :
  4.  php artisan lang:publish  
    
    Keterangan:
    Folder Lang di dalam Laravel 10 posisinya dihidden, maka untuk menampilkan folder Lang dan semua file di dalamnya termasuk file validation.php gunakan perintah di atas.

  5. Jika kita buka file validation.php maka di dalamnya akan terdapat nama - nama validasi yang dapat digunakan dalam Laravel dan message error yang muncul jika validasinya tidak terpenuhi.
  6. Berikut contoh isi file validation.php
    isi file validation.php
  7. Jika diinginkan maka message error yang tampil dapat diubah artinya ke dalam bahasa Indonesia.

Menampilkan Message Error pada View :

Saat proses validasi dilakukan oleh Laravel dan ditemukan ada data yang tidak valid, maka secara otomatis Laravel akan mengembalikan tampilan ke halaman View yang mengirimkan data tersebut. 

Agar pengguna aplikasi mengetahui bahwa inputan yang mereka berikan masih ada kesalahan maka pada halaman View di mana data tersebut berasalah (View Tambah Data Produk Baru) harus diberikan informasi yang memberitahukan bahwa inputan yang diberikan masih ada masalah. Proses ini disebut dengan Proses Menangkap Error

Berikut contoh cara menangkap dan menampilkan pesan error hasil validasi data ke dalam View:
  1. Buka file View add.blade.php di dalam folder View - Produk, kemudian tambahkan script berikut ini :
  2.  <!doctype html>  
     <html lang="en">  
      <head>  
       <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
       <title>Tambah Data Produk Baru</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>  
       <form method="post" action="{{ url('produk/save') }}">  
         @csrf  
         <div class="container-fluid">  
           <div class="row">  
             <div class="col-12 d-flex justify-content-center">  
               <div class="card text-bg-light mb-3" style="width: 400px; margin-top:100px;">  
                 <div class="card-header bg-primary text-white">TAMBAH DATA PRODUK</div>  
                 <div class="card-body">  
                   <div class="mb-3">  
                     <label for="namaproduk" class="form-label text-primary @error('namaproduk') text-danger @enderror">  
                       Nama Produk  
                     </label>  
                     <input type="text" class="form-control @error('namaproduk') is-invalid @enderror"   
                     id="namaproduk" name="namaproduk" value="{{ old('namaproduk') }}"/>  
                     @error('namaproduk')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                   <div class="mb-3">  
                     <label for="deskripsi" class="form-label text-primary @error('deskripsi') text-danger @enderror">  
                       Deskripsi Produk  
                     </label>  
                     <textarea class="form-control @error('deskripsi') is-invalid @enderror" id="deskripsi" name="deskripsi" rows="2">   
                       {{ old('deskripsi') }}  
                     </textarea>  
                     @error('deskripsi')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                   <div class="mb-3">  
                     <label for="harga" class="form-label text-primary @error('harga') text-danger @enderror">Harga Produk (Rp)</label>  
                     <input type="text" class="form-control @error('harga') is-invalid @enderror" id="harga" name="harga" value="{{ old('harga') }}"/>  
                     @error('harga')  
                       <small class="text-danger">{{ $message }}</small>  
                     @enderror  
                   </div>  
                 </div>  
                 <div class="card-footer text-center">  
                   <button type="submit" class="btn btn-primary btn-sm">Save</button>  
                   <button type="reset" class="btn btn-danger btn-sm">Cancel</button>  
                 </div>  
               </div>  
             </div>  
           </div>  
         </div>  
       </form>  
       <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>  
    
  3. Untuk mencoba apakah validasinya berjalan normal atau tidak kita dapat membuka kembali View tambah data produk baru kemudian berikan inputan yang salah sehingga muncul pesan errornya seperti di bawah ini:
    tampilan pesan error pada halaman view

Semoga artikel ini bermanfaat.

07 Desember 2023

Tambah Data Produk Baru

Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...

Dalam artikel kali ini saya ini mencontohkan pembuatan halaman View untuk proses Tambah Data Produk Baru. Halaman ini nantinya secara tampilan akan menggunakan Bootstrap 5 Online.

Berikut langkah - langkah untuk membuat halaman Tambah Data Produk Baru :
  1. Buka projek Laravel kalian menggunakan VSCode.
  2. Buka halaman index.blade.php kemudian tambahkan script berikut untuk membuat tombol Tambah Data Baru di atas Tampil Data Produk Aktif.
  3.  <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>  
    
  4. Buka file View dengan nama add.blade.php dalam subfolder produk yang telah dibuat sebelumnya. Jika file add.blade.php belum kalian dibuat, silakan dibuat dulu mengikuti petunjuk dalam artikel sebelumnya ( Menampilkan Data Produk ).
  5. Tambahkan script dasar sebuah halaman Bootstrap 5 seperti di bawah ini ( bisa copy - paste dari 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>Tambah Data Produk Baru</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>   
    
  6. Di dalam tag Body tambah script berikut untuk membuat tampilan input data produk baru :
  7.  <!doctype html>  
     <html lang="en">  
      <head>  
       <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
       <title>Tambah Data Produk Baru</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>  
       <form method="post" action="{{ url('produk/save') }}">  
         @csrf  
         <div class="container-fluid">  
           <div class="row">  
             <div class="col-12 d-flex justify-content-center">  
               <div class="card text-bg-light mb-3" style="width: 400px; margin-top:100px;">  
                 <div class="card-header bg-primary text-white">TAMBAH DATA PRODUK</div>  
                 <div class="card-body">  
                   <div class="mb-3">  
                     <label for="namaproduk" class="form-label text-primary">Nama Produk</label>  
                     <input type="text" class="form-control" id="namaproduk" name="namaproduk" value="Jas Hujan Ponco">  
                   </div>  
                   <div class="mb-3">  
                     <label for="deskripsi" class="form-label text-primary">Deskripsi Produk</label>  
                     <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3">Dapat digunakan utk melindungi tubuh saat berkendara di bawah hujan</textarea>  
                   </div>  
                   <div class="mb-3">  
                     <label for="harga" class="form-label text-primary">Harga Produk (Rp)</label>  
                     <input type="number" min="0" max="1000000" class="form-control" id="harga" name="harga" value="0"></input>  
                   </div>  
                 </div>  
                 <div class="card-footer text-center">  
                   <button type="submit" class="btn btn-primary btn-sm">Save</button>  
                   <button type="reset" class="btn btn-danger btn-sm">Cancel</button>  
                 </div>  
               </div>  
             </div>  
           </div>  
         </div>  
       </form>  
       <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>  
    
  8. Tambahkan script route di dalam file web.php seperti berikut ini :
     Route::get('/produk/create', [ProdukController::class, 'create']);  
    
  9. Buka file ProdukController.php kemudian buat sebuah function baru dengan nama Create seperti di bawah ini :
       //function utk menampilkan jendela input data produk baru  
       public function create()  
       {  
         return view('produk.add');  
       }  
    
    Catatan: 
    Script di atas digunakan untuk memanggil/menampilkan halaman view dengan nama add yang berada di dalam folder produk.

  10. Untuk melihat hasilnya silakan buka browser kemudian ketikkan : http://localhost:8000/produk/create 
    Tampilan Jendela Tambah Produk Baru


Semoga artikel ini bermanfaat.

02 Desember 2023

Tampil Data Produk

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.

  3. File VIEW milik projek lain di luar Laravel
  4. 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.

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

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

  15. 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).
  16. 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.