Pada materi kali ini kursus laravel private online akan membahas tentang bagai mana Cara Melakukan Edit Data Menggunakan Laravel Vue, untuk proses edit data kali ini kita juga akan membuat proses untuk edit gambar menggunakan laravel dan vue.js, jika kita menggunakan laravel dan vue.js kita harus mengirimkan response ke controller dengan menggunakan vue.js, nantinya controller akan mengecek response yang dikirim kemudian menjalankan query sehinga data dan gambar yang kita upload dapat tersimpan ke database.

Keunggulannya jika kita menggunakan laravel dan vue.js yaitu kita dapat membuat website atau aplikasi dengan menggunakan metode SPA (Single Page Application) jadi pada saat kita tekan tombol submit maka halaman tersebut akan tidak akan me-reload atau refresh, sehingga kinerja dari system yang kita buat atau aplikasi yang kita buat bisa menjadi lebih cepat. Oke teman-teman kita akan langsung membuat fitur untuk Edit Data Menggunakan Laravel Vue.js

Untuk project kali ini kita menggunakan project pada tutorial sebelumnya yaitu https://kursuswebprogramming.com/cara-melakukan-insert-data-menggunakan-laravel-vue-js/ pada tutorial tersebut kita telah berhasil melakukan insert data dan upload gambarnya, untuk teteri kali ini kita akan focus untuk proses edit datanya, langkah pertama kita akan setting untuk router dan melakukan import untuk file component nya pada resources/app.js untuk scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Berikutnya kami kursus laravel private online akan membuat component dengan nama UpdateComponent pada folder components, kemudian pada file tersebut kita akan buat tag <template> yang di dalam terdapat form dan di dalam form tersebut kita akan menampilkan data berdasarkan data yang kita pilih untuk scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Selanjutnya kita akan membuat query untuk menampilkan data berdasarkan data yang kita pilih pada PostController di dalam method edit untuk scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Berikutnya kita akan membuat proses untuk response datanya pada file UpdateComponent.vue untuk scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Pada script diatas terdapat perintah .get(“/posts/” + paramId + “/edit”) get tersebut merupakan method yang kita gunakan untuk mengirimkan data atau response berdasarkan data yang kita pilih jika kita coba jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Oke teman-teman kursus privat laravel online kita telah berhasil menampilkan data berdasarkan data yang kita pilih untuk proses update datanya kita akan lanjutkan pada Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2

Semoga bermanfaat.

Terima kasih.