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 :

 //function utk menyimpan data produk baru  
 public function store(Request $request){  
    return $request->all();   
 }  

3. Buka file route - web.php kemudian tambahkan script berikut untuk mengarah ke dalam function store di dalam ProdukController.php

 Route::get('/produk', [ProdukController::class, 'index']);  
 Route::get('/produk/create', [ProdukController::class, 'create']);  
 Route::post('/produk', [ProdukController::class, 'store']);  

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

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

   //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.
2. 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 :

 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.


3. 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.
4. Berikut contoh isi file validation.php

   

   isi file validation.php

5. 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 :

 <!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>  

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