13 Desember 2023

Edit Data Produk

Rabu, Desember 13, 2023  ,  No comments

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']);
  3. Buka file ProdukController.php kemudian tambahkan sebuah function baru dengan nama edit. Function ini digunakan utk memanggil halaman edit.blade.php.
    4.  //function utk menampilkan data yang ingin diedit  
 public function edit(string $id)  
 {  
    $dtedit = Produk::where('id','=',$id)->get();  
    return view('produk.edit', compact('dtedit'));  
 }
  4. Masih di dalam ProdukController.php, lakukan editing function update seperti di bawah ini:
    5.    //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.
     
  5. Buka file index.blade.php yang berada di dalam folder resources - views - produk.
  6. Tambahkan script berikut untuk membuat kolom yang nantinya berisi tombol Edit dan tombol Pasif Data
    7.  <!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>
  7. 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

  8. 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.
  9. Buka halaman edit.blade.php kemudian lakukan editing script seperti di bawah ini:
    10.  <!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>
  10. 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.

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)