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

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.

29 November 2023

Seeder dan Faker Pada Laravel 10

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

SEEDER
adalah file yang dibuat dan diisi script untuk nantinya dapat digunakan mengisi data DUMMY (Contoh) ke dalam database yang telah terkoneksi dengan projek Laravel.
Pada saat kita melakukan proses Develop aplikasi kita pasti memerlukan beberapa data sebagai contoh untuk diolah pada aplikasi kita, atau sekedar untuk dapat dilihat di dalam sebuah halaman (file VIEW).
Misalnya, pada saat kita membuat sistem informasi e-Commers pasti kita memerlukan beberapa contoh data produk. Data produk ini kita isikan secara asal - asalan sekedar untuk contoh saja. Untuk itu kita dapat memanfaatkan seeder.
Dengan Seeder kita dapat mengisikan data contoh ke dalam database dengan cepat menggunakan fitur perintah :
 php artisan db:seed --class=namafileseeder  
Jadi, kita tidak perlu repot - repot lagi menginputkan data testingnya ke dalam database secara manual. Apalagi misalnya kita ada banyak sekali data testing yang perlu kita inputkan ke dalam database dan kadang sering terjadi perubahan struktur kolom database yang mengharuskan kita memanggil perintah : php artisan migrate:fresh atau php artisan migrate:refresh yang akibatnya data yang sudah terisi di dalam tabel akan dihapus lagi sehingga kita harus menginputkan lagi data tersebut secara manual, maka pasti proses ini akan sangat tidak efektif dan tidak efisien.

Berikut langkah - langkah membuat file Seeder dan cara menggunakannya :
  1. Buka projek Laravel dengan VSCode.
  2. Pastikan kalian sudah berhasil melakukan koneksi DB MySQL dengan projek Laravel seperti yang telah dibahas di Seting Koneksi DB MySQL (Catatan: jika belum berhasil melakukan koneksi DB maka lakukan seting koneksi DB sampai berhasil).
  3. Pastikan kalian juga sudah berhasil membuat tabel menggunakan cara migrasi seperti yang telah dibahas di Membuat Tabel Baru dengan Migrasi. (Catatan : jika belum berhasil melakukan proses pembuatan tabel maka lakukan prosesnya sampai berhasil).
  4. Buka terminal di dalam VSCode, kemudian ketikkan perintah di bawah ini untuk membuat file seeder dengan nama ProdukSeeder.php.
  5.  php artisan make:seeder ProdukSeeder  
    
    Catatan:
    Proses ini akan menciptakan file Seeder Baru yang dapat dilihat di dalam subfolder seeders dalam folder database.
  6. Buka file seeder yang baru dibuat kemudian ketikkan script berikut ini :
  7.  <?php  
     namespace Database\Seeders;  
     use Illuminate\Database\Console\Seeds\WithoutModelEvents;  
     use Illuminate\Database\Seeder;  
     use App\Models\Produk;  //panggil model Produk
     class ProdukSeeder extends Seeder  
     {  
       public function run(): void  
       {  
         Produk::create([  
           'namaproduk'  => 'Sandal',   
           'deskripsi'   => 'Sandal keren terbuat dari bahan yang kuat dan berkualitas',   
           'harga'       => 10000  
         ]);  
         Produk::create([  
           'namaproduk'  => 'Tas Gunung',   
           'deskripsi'   => 'Cocok untuk aktifitas naik gunung karena   
                             terbuat dari bahan yang kuat dan berkualitas',   
           'harga'       => 350000  
         ]);  
       }  
     }  
    
  8. Buka kembali terminal di dalam VSCode kemudian ketikkan perintah berikut ini untuk menjalankan file ProdukSeeder.php.
  9.  php artisan db:seed --class=ProdukSeeder  
    
  10. Cek ke dalam tabel produks maka tabel tersebut akan terisi 2 (dua) data contoh seperti yang telah kita definisikan di atas.

FAKER
Faker adalah library PHP yang dibuat oleh FRANCOIS ZANINOTTO. Faker digunakan untuk membuat data palsu (Fake) sebagai contoh data. Faker mampu mengenerate ratusan bahkan ribuan data testing secara acak. Misalnya, kita membutuhkan 100 data pegawai sebagai data testing di aplikasi yang sedang kita develop, maka kita bisa menggunakan Faker. Hebatnya saat melakukan proses generate data Faker ini memberikan datanya seperti data asli, jadi bukan data asal - asalan.

Cara penggunaan Faker:
  1. Buka projek dalam VSCode.
  2. Buka salah satu file Seeder yang telah dibuat dan akan ditambahkan Faker di dalamnya. Misalnya kita buka file ProdukSeeder.php.
  3. Tambahkan script berikut ini :
  4.  <?php  
     namespace Database\Seeders;  
     use Illuminate\Database\Console\Seeds\WithoutModelEvents;  
     use Illuminate\Database\Seeder;  
     use App\Models\Produk;  
     use Faker\Factory as Faker;  //memanggil library Faker
     class ProdukSeeder extends Seeder  
     {  
       public function run(): void  
       {  
         $faker = Faker::create('id_ID');  //mensetting data faker ke regional Indonesia
         for($i = 0; $i <=100; $i++) {  
           Produk::create([  
             'namaproduk'  => 'Produk ' . $faker->word, //membuat nama produk dg kata acak   
             'deskripsi'   => $faker->text,   //membuat deskripsi dg kata acak
             'harga'     => $faker->numberBetween(10000, 100000 )  //membuat hrg antara 10000-100000
           ]);  
         }  
       }  
     }  
    
  5. Jalankan Seeder kembali dan lihat data yang terbentuk:
  6.  php artisan db:seed --class=ProdukSeeder  
    
  7. Berikut sebagian data Produk yang terbentuk (lumayan membantu pembuatan data untuk percontohan).
  8. hasil proses Seeder + Faker
Dokumentasi lengkap tentang Library PHP Faker dapat dibaca DI SINI, atau di dalam dokumentasi Laravel mengenai Faker yang bisa dibaca DI SINI.


Semoga artikel ini bermanfaat.

25 November 2023

Quiz 1 - Laravel

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

Kerjakan tugas berikut :
  1. Buat projek baru Laravel dengan nama folder sesuaikan dengan nama projek yang akan dibuat !
  2. Buat koneksi database untuk projek yang baru saja dibuat !
  3. Buat 3 tabel baru sesuai kebutuhan menggunakan konsep migrasi, proses ini akan menciptakan 3 file model dan 3 file migrasi !
  4. Jalankan perintah migrate untuk benar - benar menciptakan tabel dari langkah 3 di atas !
  5. Buat 3 file Controller untuk mengendalikan request terhadap 3 tabel yang telah dibuat !
  6. Buat file Route untuk menangani alamat request arahkan ke controller yang telah dibuat !
Langkah - langkah untuk membuat tabel baru di dalam projek Laravel menggunakan migrasi bisa dibaca lagi di sini. Silakan dikerjakan dan kalau sudah selesai bisa dinilaikan.

----- Selamat Mengerjakan -----

22 November 2023

Route API Produk

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

Pada postingan kali ini saya ingin membahas cara membuat Routing untuk dapat menggunakan fungsi - fungsi ada berada di dalam file ProdukController yang telah dibuat sebelumnya.

ROUTING

Routing adalah proses dimana suatu item dapat sampai ke tujuan dari satu lokasi ke lokasi lain. Dalam hal ini, item yang dimaksud adalah halaman aplikasi website. Para developer Laravel dapat menentukan sendiri halaman yang akan muncul pada saat dikunjungi oleh User. Misalnya, User mengunjungi halaman dashboard, maka kita dapat menentukan tampilan apa yang akan muncul, apakah itu hanya berupa tulisan, berupa halaman controller, berupa halaman view, maupun halaman error.

Route bisa kita analogikan sebagai peta petunjuk bagaimana alur navigasi aplikasi yang sedang kita bangun. Routing untuk Laravel dapat diatur pada file routes/web.php. Pada aplikasi aplikasi laravel di mana controller hanya menyediakan API maka semua routing di buat di dalam file routes/api.php.

Berikut ini cara membuat route untuk dapat mengakses ProdukController. Karena ProdukController menyediakan sumber daya API maka routing akan kita buat di dalam file routes/api.php.
  1. Buka projek di dalam VSCODE.
  2. Buka file routes/api.php, kemudian tambahkan script yang berwarna merah seperti di bawah ini:
  3.  <?php  
      use Illuminate\Http\Request;  
      use Illuminate\Support\Facades\Route;  
      use App\Http\Controllers\ProdukController;
     /*  
     |--------------------------------------------------------------------------  
     | API Routes  
     |--------------------------------------------------------------------------  
     |  
     | Here is where you can register API routes for your application. These  
     | routes are loaded by the RouteServiceProvider and all of them will  
     | be assigned to the "api" middleware group. Make something great!  
     |  
     */  
     Route::middleware('auth:sanctum')->get('/user', function (Request $request) {  
       return $request->user();  
     });  
     Route::apiResource('produks', ProdukController::class);  
  4. Untuk dapat melihat hasil script route di atas menghasilkan routing apa saja kalian bisa mengetikkan perintah berikut ini di dalam terminal VSCode.
  5.  php artisan route:list
    
  6. Hasil perintah di atas akan tampak seperti di bawah ini:

  7. Sehingga alamat-alamat URL dalam projek laravel kita harus kita arahkan ke routing yang telah terbentuk di atas.
Contoh :
  • Untuk melihat seluruh data Produk gunakan URL ini : http://127.0.0.1:8000/api/produk dengan metode GET.
  • Untuk menyimpan data baru gunakan URL ini : http://127.0.0.1:8000/api/produk dengan metode POST.
  • Untuk menampilkan data tertentu misalkan data yang ingin diedit atau dihapus gunakan URL ini : http://127.0.0.1:8000/api/produks/1, dengan metode GET dan angka 1 (satu) bisa diganti dengan ID produk yang ingin ditampilkan.
  • Untuk menyimpan data hasil edit gunakan URL ini : http://127.0.0.1:8000/api/produks/1, dengan metode PATCH atau PUT dan angka 1 (satu) bisa diganti dengan ID produk yang ingin diedit.
  • Untuk menghapus data gunakan URL ini : http://127.0.0.1:8000/api/produks/1, dengan metode DELETE, dan angka 1 (satu) bisa diganti dengan ID produk yang ingin dihapus.
Catatan:
Karena kita belum memiliki frontend, maka gunakan aplikasi POSTMAN untuk mencoba URL di atas.

Semoga artikel ini bermanfaat.

21 November 2023

Membuat Controller Untuk Produk

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

Laravel merupakan framework PHP yang menawarkan banyak fitur yang memudahkan kita sebagai web developer. Salah satu fitur utama Laravel adalah konsep MVC (Model-View-Controller) yang digunakan di Laravel, yang membagi logika aplikasi menjadi tiga komponen utama, yaitu Model, View, dan Controller.

Dalam MVC, Model dan Controller adalah dua komponen dengan konsep yang berbeda dan juga memiliki peran yang berbeda. Controller pada Laravel juga merupakan bagian dari konsep MVC yang bertanggung jawab sebagai pengontrol alur aplikasi antara Model dan View. Controller mengatur permintaan dari pengguna, lalu memanggil Model yang sesuai dan mengirimkan data tersebut ke View. Controller juga berperan untuk memberikan response kepada pengguna dengan menyesuaikan halaman atau tampilan yang ditampilkan ke pengguna sesuai dengan permintaan yang diterima. Dalam hal ini, Controller bertindak sebagai perantara antara Model dan View

Arus data dalam Laravel

Selanjutnya kita akan membahas bagaimana cara membuat Controller yang akan kita gunakan untuk menangani logika API, sedangkan pembuatan Model sudah dibahas dalam tutorial sebelumnya (Membuat Tabel Produk).

Berikut adalah langkah - langkah untuk membuat Controller di dalam projek Laravel :
  1. Buka projek Laravel dengan VSCode.
  2. Buka Terminal di dalam VSCode kemudian ketikkan perintah berikut ini untuk menciptakan file Controller dan juga function - function yang khusus untuk menangani data Produk:
  3.  php artisan make:controller ProdukController --api  
    
  4. Perintah di atas setelah dijalankan akan menghasilkan sebuah file Controller dengan nama ProdukControlle.php di dalam subfolder App/Http/Controllers lengkap dengan function - function untuk melakukan proses CRUD data Produk.
  5.  <?php  
     namespace App\Http\Controllers;  
     use Illuminate\Http\Request;
     use App\Models\Produk; //memanggil Model Produk
     class ProdukController extends Controller  
     {  
       //function utk menampilkan data produk
       public function index(){}  
       //function utk menyimpan data produk baru  
       public function store(Request $request){} 
       //function utk menampilkan data produk sesuai id  
       public function show(string $id){} 
       //function utk menyimpan data hasil edit  
       public function update(Request $request, string $id){}  
       //function utk menghapus data produk sesuai id  
       public function destroy(string $id){}  
     }  
    
  6. Langkah selanjutnya adalah mengisikan script untuk setiap function yang telah dibuatkan sesuai kebutuhan.
  7.  <?php  
     namespace App\Http\Controllers;  
     use Illuminate\Http\Request;  
     use App\Models\Produk;  //memanggil Model Produk
     class ProdukController extends Controller  
     {  
       //function utk menampilkan data produk  
       public function index(){  
         return response()->json(Produk::all(), 200);  
       }  
       //function utk menyimpan data produk baru    
       public function store(Request $request){  
         $validasiData = $request->validate([  
           'namaproduk'  => 'required|max:255',  
           'deskripsi'   => 'required',  
           'harga'     => 'required|numeric'  
         ]);  
         $hsl = Produk::create($validasiData);  
         return response()->json($hsl, 201);  
       }  
       //function utk menampilkan data produk sesuai id    
       public function show(string $id){  
         $produk = Produk::find($id);  
         if($produk) {  
           return response()->json($produk, 200);  
         }else{  
           return response()->json(['pesan' => 'Data Produk tidak ditemukan'], 404);  
         }  
       }  
       //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'  
         ]);  
         $produk = Produk::find($id);  
         $produk->update($validasiData);  
         if($produk) {  
           return response()->json($produk, 200);  
         }else{  
           return response()->json(['pesan' => 'Data Produk tidak ditemukan'], 404);  
         }  
       }  
       //function utk menghapus data produk sesuai id    
       public function destroy(string $id){  
         $produk = Produk::find($id);  
         $produk->delete();  
         if($produk) {  
           return response()->json(null, 204);  
         }else{  
           return response()->json(['pesan' => 'Data Produk tidak ditemukan'], 404);  
         }  
       }  
     }  
    
  8. Untuk informasi mengenai Validate di dalam Laravel silakan baca DI SINI.
  9. Untuk informasi mengenai status response seperti angka 200, 201, 204 dan 404 dapat dibaca DI SINI.

Semoga artikel ini bermanfaat.

Membuat Tabel Baru dengan Migrasi

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

Pembuatan tabel baru di dalam database MYSQL biasanya menggunakan fasilitas PHPMYADMIN atau menggunakan aplikasi pihak ketiga seperti MysqlFront, HeidiSQL dan sebagainya. Namun saat kita sedang mengerjakan projek Laravel pembuatan tabel baru dapat kita lakukan menggunakan fasilitas yang disediakan oleh Laravel sendiri yang disebut Migration.

Proses ini juga tidak lepas dari konsep di dalam MVC yang disebut dengan MODEL. Model sendiri merupakan bagian dari konsep MVC yang bertanggung jawab untuk mengelola data dalam aplikasi. Model digunakan untuk mengakses database, mewakili tabel dalam database, dan mengelola data yang memungkinkan kita untuk melakukan operasi CRUD (Create, Read, Update, dan Delete) pada data tersebut. Model juga dapat dihubungkan ke model lain melalui Relationship (relasi) pada Laravel.

Berikut langkah - langkah untuk membuat tabel baru menggunakan fasilitas migration:
  1. Buka projek dengan VSCode.
  2. Buka Terminal dari VSCode kemudian ketikkan perintah berikut ini:
  3.  php artisan make:model Produk -m  
    
    Catatan: 
    - Perintah di atas akan menghasilkan file Model untuk tabel Produk dan juga menghasilkan file migration yang nantinya dapat digunakan untuk mendefinisikan struktur tabel.
    - File Model dapat dilihat di dalam subfolder Models yang berada di dalam folder App.
    - File Migrasi dapat dilihat di dalam subfolder Migrations yang berada di dalam folder database

    File Model - Produk.php
    File Migration - create_produks_table.php
  4. Buka file model - Produk.php kemudian lakukan edit script yang berwarna merah seperti di bawah ini:
  5.  <?php  
     namespace App\Models;  
     use Illuminate\Database\Eloquent\Factories\HasFactory;  
     use Illuminate\Database\Eloquent\Model;  
     use Illuminate\Database\Eloquent\SoftDeletes; //memanggil library SoftDeletes
     class Produk extends Model  
     {  
       use HasFactory, SoftDeletes;  
    protected $table = 'produks'; protected $fillable = ['namaproduk', 'deskripsi', 'harga']; }
    Catatan:
    - SoftDelete untuk mengaktifkan proses penghapusan sementara (temporary). Ini bersifat optional.
    - $table untuk memperkenalkan pada model nama tabel yang akan diproses.
    - $fillable untuk mengaktifkan mass assigned pada kolom-kolom yang disebutkan namanya di dalam $fillable.

  6. Selanjutnya buka file migrations - create_produks_table.php kemudian lakukan edit script yang berwarna merah seperti di bawah ini:
  7.  
       public function up(): void  
       {  
         Schema::create('produks', function (Blueprint $table) {  
           $table->id();  
           $table->string('namaproduk');  
           $table->text('deskripsi');  
           $table->double('harga', 8, 2);  
           $table->timestamps();  
           $table->softDeletes();  
         });  
       }
       
       public function down(): void
        {
            Schema::dropIfExists('produks');
        }
    
    Catatan:
    - Perintah di atas digunakan untuk menciptakan tabel baru dengan nama produks dengan kolom meliputi: id, namaproduk, deskripsi, dan harga. Sedangkan perintah timestamps akan menghasilkan 2 kolom yaitu created_at dan updated_at. Perintah softDeletes akan menghasilkan kolom deleted_at yang terhubung dengan perintah softDeletes yang ada di file model Produk.
    - Kata produks pada script di atas adl nama tabel baru yang akan diciptakan dari perintah di atas.
    - Untuk tipe-tipe kolom yang bisa digunakan dalam pembuatan struktur tabel dapat dibaca pada dokumentasi Laravel DISINI, beberapa tipe kolom seperti tampak di bawah ini :

  8. Untuk benar - benar menciptakan tabel sesuai struktur yang telah dibuat pada langkah 4 di atas maka jalankan script berikut di dalam terminal VSCode:
  9.  php artisan migrate  
    
  10. Bisa dicek menggunakan MysqlFront atau PhpMyadmin bahwa tabel baru dengan nama : produks telah terbentuk dengan struktur sama dengan script yang kita buat di dalam file migration.

  11. Tabel Produks
Semoga artikel ini bermanfaat.