Pada materi kali ini kursus codeigniter private online akan membahas tentang bagaimana Cara Menampilkan Data Menggunakan Laravel dan Vue.js, untuk menampilkan data tersebut kita akan menggunakan file project pada tutorial sebelumnya yaitu https://kursuswebprogramming.com/cara-melakukan-insert-data-menggunakan-laravel-vue-js/ pada materi tersebut kita telah berhasil menginputkan data kedalam database dan kita juga telah berhasil melakukan upload untuk gambarnya.

Nah pada materi kali ini kita akan focus bagaimana cara menampilkan data yang telah berhasil kita inputkan kedalam database, langkah pertama silahkan teman-teman buat sebuah table untuk menampilkan data tersebut disini kita akan menggunakan table pada tutorial https://kursuswebprogramming.com/cara-membuat-crud-menggunakan-laravel-vue-js-dan-mysql-router/ nanti hasil akhirnya akan berisikan data dari database seperti dibawah ini :

Cara Menampilkan Data Menggunakan Laravel dan Vue.js

Berikutnya setelah teman-teman kursus codeigniter provate online menyiapkan table yang akan digunakan untuk menampilkan data tersebut kita akan membuat sebuah query untuk menampilkan semua data yang terdapat pada table post, untuk scriptnya silahkan teman-teman buat pada PostController didalam method index seperti dibawah ini :

Cara Menampilkan Data Menggunakan Laravel dan Vue.js

Ket:

Pada script diatas terdapat perintah Post::all(); merupakan perintah query pada laravel yang berfungsi untuk menampilkan semua data dari table Post, jadi nanti kita akan membuat perintah untuk menjalankan query tersebut menggunakan perintah dari vue.js dan hasil dari response tersebut akan kita tampilkan kedalam table.

Selanjutnya kita akan melakukan looping dengan menggunakan v-for pada file component seperti dibawah ini :

Cara Menampilkan Data Menggunakan Laravel dan Vue.js

Pada script diatas terdapat perintah v-for=”post,index of posts”, post merupakan nama alias dari posts, sedangkan posts merupakan data dari response dalam bentuk array, dan index merupakan urutan dari data dalam bentuk integer atau angka, namun secara default index tersebut dimulai dari “0“, untuk membuat nilai index tersebut dimulai dari angka “1” kita dapat menambahkan ++ di dapan indexnya seperti script diatas yaitu {{ ++index }}

Selanjutnya kita akan membuat script untuk menampung response atau nilai dari controller seperti dibawah ini :

Cara Menampilkan Data Menggunakan Laravel dan Vue.js

Berikutnya kita akan coba jalankan pada browser jika semua prosesnya benar maka akan terlihat hasilnya seperti dibawah ini :

Cara Menampilkan Data Menggunakan Laravel dan Vue.js

Oke teman-teman kursus privat codeigniter online itulah pembahasan kita tentang Cara Menampilkan Data Menggunakan Laravel dan Vue.js semoga bermanfaat.

Terima kasih.