Cara Melakukan Edit Data Menggunakan Laravel Vue

Posted on

Di bahan kali ini kursus laravel private online akan membahas mengenai bagai mana Cara Mengerjakan Menej Data Menggunakan Laravel Vue, bagi proses modifikasi data kali ini kita pun akan membangun proses bagi modifikasi gambar menggunakan laravel dan vue.js, jikalau kita menggunakan laravel dan vue.js kita mesti 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 jikalau kita menggunakan laravel dan vue.js yaitu kita dapat membangun laman atau program dengan menggunakan sistem SPA (Single Page Application) jadi di ketika kita tekan tombol submit karenanya halaman tersebut akan tak akan me-reload atau refresh, sehingga performa dari system yang kita bikin atau program yang kita bikin dapat menjadi lebih cepat. Oke teman-teman kita akan seketika membangun fitur bagi Menej Data Menggunakan Laravel Vue.js

Bagi project kali ini kita menggunakan project di panduan sebelumnya yaitu https://kursuswebprogramming.com/cara-melakukan-insert-data-menggunakan-laravel-vue-js/ di panduan tersebut kita telah berhasil mengerjakan insert data dan upload gambarnya, bagi teteri kali ini kita akan focus bagi proses modifikasi datanya, langkah pertama-tama kita akan pengaturan bagi router dan mengerjakan import bagi file component nya di resources/app.js bagi scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Berikutnya kami kursus laravel private online akan membangun component dengan nama UpdateComponent di folder components, kemudian di file tersebut kita akan bikin tag <tema> yang di pada terdapat form dan di pada form tersebut kita akan menampilkan data merujuk pada data yang kita pilih bagi scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Berikutnya kita akan membangun query bagi menampilkan data merujuk pada data yang kita pilih di PostController di pada method modifikasi bagi scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Berikutnya kita akan membangun proses bagi response datanya di file UpdateComponent.vue bagi scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue

Di script diatas terdapat petunjuk .get(“/posts/” + paramId + “/modifikasi”) get tersebut adalah sebuah method yang kita gunakan bagi mengirimkan data atau response merujuk pada data yang kita pilih jikalau kita coba jalankan di browser karenanya 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 merujuk pada data yang kita pilih bagi proses update datanya kita akan lanjutkan di Cara Mengerjakan Menej Data Menggunakan Laravel Vue Part 2

Semoga bermanfaat.

Terima kasih.

sumber :kursuswebprogramming.com/blog/

(Visited 16 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *