Mengintegrasikan Vue JS 3 ke dalam Laravel 10

Assalamu alaikum Wr. Wb

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

Apa itu VUE JS?

Baru baru ini, telah muncul Vue JS versi 3 dengan kode nama ONE PIECE. Vue JS merupakan frontend javascript framework untuk membangun website dan user interfaces (UI). Vue berjalan di sisi client (Client-Side) dan umum digunakan untuk membuat Single-Page-Application (SPA). Vue mudah diintegrasikan dengan project yang sudah ada dengan menggunakan CDN. Selain itu, Anda juga dapat dengan mudah membuat full-stack aplikasi dengan membuat API di sisi server (Server-Side).

Kenapa Menggunakan Vue Js?

1. Mudah membuat frontend aplikasi dan website dinamis
2. Mudah di pelajari
3. Sangat cepat dan ringan</p>
4. Menggunakan Virtual DOM (Document Object Model)
5. Sangat Populer
6. Mudah diintegrasikan dengan project yang sudah ada menggunakan CDN

Vue 3 dan Laravel ?

Laravel dan Vue.js adalah dua kerangka kerja kuat yang biasa digunakan dalam pengembangan web. Laravel menyediakan solusi backend yang komprehensif, sementara Vue.js menawarkan cara yang fleksibel dan efisien untuk membangun komponen frontend interaktif. Meskipun Laravel menawarkan opsi alternatif seperti Inertia.js dan Livewire untuk antarmuka dinamis, ada situasi di mana pengembang lebih memilih untuk mengintegrasikan Vue.js langsung ke dalam aplikasi Laravel mereka, khususnya untuk proyek yang sudah ada atau proyek pemula.

Tutorial ini dirancang khusus untuk pemula yang memulai proyek semacam itu dan ingin mempelajari cara mengintegrasikan komponen Vue.js ke dalam aplikasi Laravel dengan lancar. Dengan mengikuti langkah-langkah yang diuraikan dalam tutorial ini, Anda akan memperoleh keterampilan berharga dalam menggabungkan komponen Vue.js ke dalam proyek Laravel Anda, meskipun komponen tersebut awalnya dibuat tanpa Vue.js. Mari selami dan temukan bagaimana Anda dapat meningkatkan keterampilan pengembangan Laravel Anda dengan memanfaatkan kekuatan Vue.js!

Berikut langkah - langkah mengintegrasikan / menginstall Vue.js versi 3 ke dalam Laravel 10 :

1. Pastikan Anda sudah menginstall Laravel 10 dengan benar dan berjalan lancar.
2. Buka projek Laravel dengan editor VSCode kemudian buka terminal di dalam VSCode.
3. Ketikkan perintah di bawah ini untuk melakukan instalasi Vue.js dan Vue Loader.

 npm instal vue@latest vue-loader@next  

4. Buka file package.json untuk melakukan perubahanVite dan Laravel-Vite-Plugin seperti di bawah ini :

 "devDependencies": {  
     "@popperjs/core": "^2.11.6",  
     "axios": "^1.6.1",  
     "bootstrap": "^5.2.3",  
     "laravel-vite-plugin": "^1.0.1",  
     "sass": "^1.56.1",  
     "vite": "^5.0.11"  
   },  

Keterangan:


Vite adalah tool builder front-end generasi terbaru, dan Laravel menyediakan plugin Vue untuk mengintegrasikannya dengan aplikasi Laravel Anda yang telah menggunakan Vite.

5. Lanjutkan dengan menjalankan perintah berikut ini untuk melakukan instalasi @vitejs/plugin-vue:

 npm i @vitejs/plugin-vue  

6. Selanjutnya, jalankan perintah berikut ini agar proses update berjalan :

 npm update  

 npm install  

7. Buka file vite.config.js kemudian lakukan modifikasi script seperti di bawah ini :

 import { defineConfig } from 'vite';  
 import laravel from 'laravel-vite-plugin';  
 import vue from '@vitejs/plugin-vue';  
 export default defineConfig({  
   plugins: [  
     vue({  
       template: {  
         transformAssetUrls: {  
           base: null,  
           includeAbsolute: false,  
         },  
       },  
     }),  
     laravel({  
       input: [  
         'resources/css/app.css',  
         'resources/js/app.js',  
       ],  
       refresh: true,  
     }),  
   ],  
   resolve: {  
     alias: {  
       '@': '/resources/js',  
       'vue': 'vue/dist/vue.esm-bundler.js'  
     },  
   },  
 });  

8. Buka file app.js yang berada di dalam subfolder resources/js/app.js, kemudian silakan lakukan editing script seperti di bawah ini:

 import './bootstrap';  
 import { createApp } from 'vue';  
 const app = createApp({});  
 app.mount("#app");  

9. Buka file Layout Utama projek Laravel Anda (jika Anda mengikuti semua tutorial Laravel di blog ini dari awal maka file Layout Utama terletak di dalam file master.blade.php yang berada di dalam subfolder resources/vendor/adminlte/master.blade.php), kemudian lakukan editing script seperti di bawah ini:

   <!-- script tambahan -->  
   @vite(['resources/css/app.css', 'resources/js/app.js'])  
 </head>  
 <body id="app" class="@yield('classes_body')" @yield('body_data')>  

10. Silakan projek Laravel kalian jalankan, jika tidak ada trouble yang muncul artinya proses integrasi Vue.js ke dalam projek Laravel sukses.

Semoga artikel ini bermanfaat.

Read More

Admin LTE 3 pada Laravel 10

Assalamu alaikum Wr. Wb

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

Admin LTE merupakan salah satu template tampilan yang paling banyak digunakan oleh programmer web saat membuat aplikasi berbasis web yang dikhususkan untuk admin atau istilahnya adalah CMS (Content Management System). Kalian dapat langsung mendatangi situs resmi Admin LTE dengan mengklik LINK INI. Sampai saat artikel ini dibuat versi Admin LTE yang telah dirilis adalah versi 3.2.

Dalam artikel kali ini saya ingin mengulas bagaimana cara menginstall Admin LTE 3 ke dalam projek Laravel 10 yang notabene sudah menggunakan Vite untuk melakukan proses Mixing asset - asset yang berjalan di atasnya. Termasuk nanti asset milik Admin LTE 3.

Ada beberapa cara untuk melakukan proses instalasi Admin LTE 3 ke dalam projek Laravel 10, yaitu :

1. Download packet Admin LTE 3 secara mandiri, kemudian copas semua file yang dibutuhkan untuk menjalankan Admin LTE 3 di dalam projek Laravel 10 kita satu persatu secara manual dan kita hubungkan satu persatu sehingga Admin LTE 3 bisa berjalan dengan normal secara manual. Cara pertama ini butuh pengetahuan mengenai yang baik mengenai struktur projek Laravel. Karena kalau tidak maka Admin LTE 3 tidak akan bisa jalan dengan normal bahkan dapat mempengaruhi projek Laravel yang telah jadi sebelumnya.
2. Download paket Admin LTE 3 dan langsung install ke dalam projek Laravel kita secara otomatis menggunakan bantuan COMPOSER. Catatannya: jika ingin menggunakan cara kedua ini pastikan kita terhubung dengan jaringan internet secara stabil, kemudian pastikan juga aplikasi COMPOSER sudah terinstall ke dalam komputer kita.

Pada artikel ini kita akan mempraktekkan cara yang kedua. Untuk paket Admin LTE yang akan kita gunakan adalah paket yang telah tersedia di GITHUB milik akun jeroennoten. Alasannya, tutorialnya penggunaan paketnya lengkap dan mudah untuk kita pelajari, paket ini juga telah mensupport Laravel 7 ke atas dan saya rasa cukup komplet untuk digunakan tanpa harus mendownload lagi satu - satu paket tambahan yang dibutuhkan saat menggunakan Admin LTE. 

Berikut langkah - langkah pemasangan Admin LTE 3 ke dalam projek Laravel 10 :

1. Backup terlebih dahulu projek Laravel kalian sebelum melakukan instalasi Admin LTE. Asumsinya, jika proses gagal maka kita masih tetap memiliki projek Laravel yang clean dan dapat digunakan lagi untuk percobaan instalasi berikutnya.
2. Pastikan aplikasi composer sudah terinstall ke dalam komputer dan berjalan dengan normal. Kalau belum terinstal maka lakukan instalasi terlebih dahulu aplikasi nodejs. Silakan download DISINI. Catatan: untuk mengetahui apakah sudah ada aplikasi composer atau belum di dalam komputer kita caranya sudah pernah saya bahas di dalam artikel mengenai cara instalasi Laravel 10, silakan bisa dibaca lagi DISINI.
3. Buka projek Laravel menggunakan VSCode.
4. Ketikkan perintah berikut:

     composer require jeroennoten/laravel-adminlte  
   

5. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    composer require Laravel/ui  
   

6. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:controller  
   

7. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan ui:auth  
   

   Catatan : Setiap pertanyaan untuk replace pastikan kalian jawab YES agar file – file halaman seperti Login, Register, dsb yang telah dibuat sebelumnya digantikan dengan file – file baru berbasis Admin LTE.
8. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:install --interactive  
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
9. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

    php artisan adminlte:plugins install
   

   Catatan : Setiap pertanyaan pastikan kalian jawab YES.
10. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=main_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
11. Setelah proses instalasi selesai lanjutkan dengan mengetikkan perintah berikut ini:

     php artisan adminlte:install --only=auth_views
    

    Catatan : Setiap pertanyaan pastikan kalian jawab YES.
12. Untuk memastikan semua terinstall dengan baik silakan jalankan perintah berikut :

 npm update  

 npm install  

Catatan : Pastikan tidak terjadi error saat menjalankan perintah di atas.
13. Jalankan perintah di bawah ini untuk melihat hasil tampilan yang terbaru:

 npm run dev  

14. Buka jendela terminal baru kemudian jalankan perintah di bawah ini:

 php artisan serve  

15. Untuk hasilnya dapat dilihat pada tampilan halaman login, register dan reset password yang sekarang sudah berubah.

    

    Login Page Admin LTE3

    

    Register Page Admin LTE3

    

    Reset Password Admin LTE3

Semoga artikel ini bermanfaat.

Read More

Laravel Auth Scaffolding

Assalamu alaikum Wr. Wb

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

Laravel UI menyediakan fitur otentikasi sederhana termasuk login, registrasi, reset password, verifikasi email, dan konfirmasi password menggunakan bootstrap, react, dan vue. Fitur tersebut dinamakan Laravel UI.

Di dalam artikel ini kita akan belajar menggunakan Laravel UI berbasis Bootstrap 5. Untuk menggunakan Laravel UI Bootstrap langkah - langkah sebagai berikut :

1. Buka projek Laravel menggunakan VSCode.
2. Buka jendela terminal kemudian ketikkan perintah berikut ini :

 composer require laravel/ui  

Keterangan:
Perintah ini akan menambahkan library UI ke dalam perintah artisan miliknya Laravel 10.
3. Setelah proses instalasi UI selesai, lanjutkan dengan mengetikkan perintah :

 php artisan ui bootstrap --auth  

Keterangan:
Perintah di atas akan menambahkan ke dalam projek Laravel banyak hal meliputi View dan Controller yang khusus untuk menangani proses Login, Register, reset password, verifikasi email, serta konfirmasi password.
4. Selanjutnya ketikkan perintah berikut ini untuk menyatukan semua script:
5. Setelah proses instalasi sukses maka dapat dicek saat projek kita jalankan di browser maka akan muncul menu login serta register otomatis di dashboard awal aplikasi.

   

   tampilan dashboard hasil Laravel Auth Scaffolding

6. Apabila menu Log In dan Register kita klik maka akan dimunculkan halaman Login dan Register yang siap digunakan. Untuk mencoba boleh diawali dengan proses register terlebih dahulu baru gunakan hasil register tadi untuk login.

   

   Halaman Login hasil Scaffolding

   

   Halaman Register hasil Scaffolding
   



Halaman Reset Password hasil Scaffolding


7. Jika kita coba melakukan registrasi user baru maka setelah proses registrasi sukses maka kita akan langsung dibawa ke halaman dashboard admin aplikasi yang tampilannya seperti di bawah ini:

   

   halaman dashboard admin aplikasi

8. Langkah selanjutnya dengan pengetahuan kita mengenai CSS, Bootstrap 5 maka kita akan dapat memperbaiki tampilan halaman - halaman tersebut sesuai keinginan kita masing - masing. Namun yang utama di sini, kita diberikan bantuan untuk membuat halaman - hamalan tersebut dan hebatnya halaman - halaman tersebut langsung berfungsi dan dapat digunakan untuk proses.

Semoga artikel ini bermanfaat.

Read More

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 :

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

4. Selanjutnya buka file ProdukController.php dan lakukan editing script di dalam function Destroy seperti di bawah ini :

   //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');  
     }  
   }  

5. Buka file routes web.php kemudian tambahkan routes seperti di bawah ini:

 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']);  

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

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

Semoga artikel ini bermanfaat

Read More

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:

 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.

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

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

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

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

Read More

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:

 <?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');  
     }  
   }  
 }  

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

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

3. Berikut tampilan MessageBox saat data sukses disimpan:

   

   Tampilan SweetAlert saat data sukses disimpan

   
   
   
   

Semoga artikel ini bermanfaat.

Read More

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.

Read More