Pada materi Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router) kali ini kita akan melakukan konfigurasi pada vue routernya, namun sebelum kita menginstall vue router pada project yang kita gunakan kita harus menginstall node.js, composes dan tools lainnya untuk cara install dan tool yang akan di gunakan pada project ini taman-teman bisa lihat pada tutorial https://kursuswebprogramming.com/software-atau-tool-untuk-mendevelop-menggunakan-laravel-vuejs/

Setelah semua tools atau softwarenya terinstall kita akan melakukan install untuk vue router pada file project yang kita gunakan, seperti yang kita ketahui bahwa vue router tersebut berfungsi untuk membuat sebuah website atau aplikasi yang ketika kita buka setiap halamannya tidak terdapat loding bar atau halaman yang kita buka tidak terdapat refreshnya.

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router) langkah pertama silahkan teman-teman arahkan terminalnya folder project yang akan digunakan dan silahkan teman-teman ketikan npm install seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Berikutnya setelah proses install selesai dan berhasil kita akan install untuk vue router, silahkan teman-teman ketikan pada terminalnya npm install vue-router seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Jika proses vue-routernya berhasil jika kita lihat pada file package.json maka akan terlihat package vue-router yang telah berhasil kita install seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Selanjutnya kita akan inport untuk vue-router, dan file componentnya pada resources/js/app.js seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Berikutnya kita akan membuat file dengan nama IndexComponent.vue dan CreateComponent.vue pada folder components seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Selanjutnya pada folder homepage.blade.php kita akan buat router-view untuk menampilkan content yang kita buat pada file components untuk scriptnya seperti dibawah ini, untuk table yang telah kita buat pada materi sebelumnya kita akan pindahkan pada file IndexComponent.vue

  • File homepage.blade.php
Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Berikutnya pada file IndexComponent.vue kita akan masukan sebuah table seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Ket : pada script diatas kita menggunakan tag <template> yang berfungsi untuk menghubungkan file yang terdapat pada router-view pada file homepage.blade.php. untuk menjalankannya pada browser silahkan teman-teman jalankan pada terminalnya php artisan serve dan npm run watch maka akan terlihat seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Berikunya kita akan membuat form untuk fungsi Create New Post pada file CreateComponent.vue untuk scriptnya seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Kemudian silahkan di refresh kembali halamannya jika kita klik tombol create new post maka akan muncul seperti dibawah ini :

Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router)

Oke teman-teman itulah tutorial kita tentang Cara Membuat Crud Menggunakan Laravel Vue js dan Mysql (Router),  kita telah berhasil melakukan routing pada project kita dan membuat form untuk create datanya, kita akan lanjutkan pada materi berikutnya.

Semoga bermanfaat.

Terima kasih.

WhatsApp chat