Insert data merupakan sebuah fitur yang sering kita jumpai di setiap website atau aplikasi, pada proses insert data kali ini kita juga akan membuat bagaimana cara melakukan upload gambar, Cara Melakukan Insert Data Menggunakan Laravel Vue.js pastikan teman-teman telah menyiapkan file project akan digunakan, pada tutorial kali ini kita menggunakan file project pada tutorial sebelumnnya yaitu https://kursuswebprogramming.com/cara-membuat-crud-menggunakan-laravel-vue-js-dan-mysql-instalasi/

Oke teman-teman kita langsung saja membuat proses untuk insert datanya pada file CreateComponent.vue, langkah pertama pada setiap form inputan yang kita gunakan kita akan tambahkan sebuah id dan rel seperti dibawah ini :

Cara Melakukan Insert Data Menggunakan Laravel Vue.js

Berikutnya kita akan membuat proses untuk menjalankan response dan proses untuk menampung data pada setiap form yang kita inputkan untuk scriptnya seperti dibawah ini :

Selanjutnya pada method store yang terdapat didalam PostConteroller.php kita akan buat proses untuk insert data dan upload gambarnya untuk script seperti dibawah ini :

Untuk proses upload gambar diatas secara otomatis akan masuk kedalam folder public, nantinya didalam folder public tersebut akan ter-create secara otomatis sebuah folder dengan nama images sesuai dengan nama folder yang kita buat pada PostController.

Jika kita coba jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini :

Cara Melakukan Insert Data Menggunakan Laravel Vue.js

Kemudian jika kita klik tombol create maka data tersebut akan masuk kedalam database dan secara otomatis gambar yang kita pilih juga akan tersimpan kedalam folder images yang terdapat pada folder public seperti dibawah ini :

Selanjutnya kita juga akan tambahkan alert pada form inputannya jadi pada saat form tersebut di insert dengan data kosong maka akan muncul sebuah comment field is required seperti dibawah ini :

Cara Melakukan Insert Data Menggunakan Laravel Vue.js

Untuk scriptnya kita akan membuat sebuah kondisi dengan menggunakan v-if, silahkan teman-teman tambahkan pada setiap inputannya seperti dibawah ini :

Kemudian kita juga akan tambahkan untuk comment success seperti dibawah ini :

Jadi pada saat datanya berhasil di input maka akan muncul sebuah alert Data Berhasil di Simpan seperti dibawah ini :

Cara Melakukan Insert Data Menggunakan Laravel Vue.js

Oke teman-teman itulah pembahasan kita pada tutorial Cara Melakukan Insert Data Menggunakan Laravel Vue.js.

Semoga bermanfaat.

Terima kasih.

Download file

WhatsApp chat