Pada materi sebelumnya kita telah berhasil menampilkan data berdasarkan data yang kita pilih, jadi sebelum kita melakukan proses untuk edit data kita harus menampilkan datanya terlebih dahulu sehingga kita dapat mengetahui data atau isi dari data tersebut, nah pada materi Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2 kali ini kita akan membuat proses untuk melakukan update datanya, sehingga data yang telah berhasil kita tampilkan data kita ubah dengan data yang baru.

Untuk melakukan proses update nantinya kita akan menggunakan method PUT, method PUT tersebut digunakan untuk mengirimkan response yang digunakan untuk proses update data, dan PUT tersebut juga berfungsi untuk mempermudah kita dalam mengenali root yang kita buat, namun jika kita menggunakan method post untuk update data maka data yang sebelumnya akan di timpa dengan data yang baru, jadi untuk menghindari hal tersebut untuk update data kita dapat menggunakan method PUT atau method PATCH.

Kita juga dapat mengetahui method apa saja yang terdapat di dalam project kita dengan mengetikan pada terminalnya php artisan route:list maka akan muncul route yang yang terdapat pada file project kita seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2

Untuk membuat proses update dengan menggunakan method PUT tersebut silahkan teman-teman buka file UpdateComponent.vue kita akan buat responsenya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2

Berikutnya kita akan membuat query untuk update datanya pada PostController di dalam method update untuk scriptnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2

Pada script diatas terdapat perintah query untuk menampilkan data berdasarkan id yang kita pilih yaitu, $post = Post::find($id); kemudian kita akan menampung data berdasarkan response yang dikirimkan dengan menggunakan $request->name dari form component, kemudian kita melakukan pengecekan untuk upload gambarnya dengan menggunakan perintah if ($request->hasFile(‘image’)) {…} image tersebut merupakan name yang terdapat pada input file.

Oke teman-teman kita akan coba jalankan pada browser dengan merubah data yang kita pilih maka akan terlihat hasilnya seperti dibawah ini :

Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2

Oke teman-teman itulah pembahasan kita pada tutorial Cara Melakukan Edit Data Menggunakan Laravel Vue Part 2 kali ini, kita telah berhasil membuat proses untuk update datanya dan menampilkan comment success.

Semoga bermanfaat.

Terima kasih.

Download script

WhatsApp chat