Menampilkan Data Laravel dan Vue.js

Sekarang waktunya untuk menampilkan semua data pengguna seperti biasanya, jadi harus buat tampilan dulu dan melakukan koding sedikit di bagian backend. Jadi untuk mengikuti tutorial ini dan kedepannya saya membuatnya terpisah agar skrip tidak terlalu panjang. Maka saya akan membuat skrip dasar dan ada komentar dimana skrip lainnya wajib dimasukan disitu.

Daftar isi:

1. Skrip dasar

Buka berkas index.vue pada direktori users bukan berkas index.vue sebelumnya yaaa!, salin dan tempelkan skrip dibawah ini pada berkas tersebut.

<template>
    <div class="level">
        <div class="level-left">
            <div class="level-item">
                <h1 class="title is-4">Semua data pengguna</h1>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <router-link :to="{name: 'users.create'}" class="button is-light">Tambah</router-link>
            </div>
        </div>
    </div>
    
    <hr>

    <div class="table-container">
        // skrip-1
    </div>
</template>

<script>
export default {
    // skrip-2
}
</script>

2. Menambahkan skrip

Skrip-1

Sedikit menarik tetang cara mengeluarkan data pada Vue.js, cukup dengan for data bisa dikeluarkan. Tidak sama seperti biasanya kalau mengeluarkan data di Laravel menggunakan foreach. Salin skrip dibawah di pada komentar skrip-1.

<table class="table is-fullwidth is-hoverable">
    <thead>
        <tr>
            <th>#</th>
            <th>Nama Lengkap</th>
            <th>Alamat E-Mail</th>
            <th>Created</th>
            <th>Updated</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(user, index) in users" :key="index">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ new Date(user.created_at).toLocaleDateString() }}</td>
            <td>{{ new Date(user.updated_at).toLocaleDateString() }}</td>
            <td class="buttons">
                <router-link :to="{name: 'users.show', params:{id: user.id} }" class="button is-small is-rounded is-primary">Lihat</router-link>
                <router-link :to="{name: 'users.edit', params:{id: user.id} }" class="button is-small is-rounded is-info">Edit</router-link>
            </td>
        </tr>
    </tbody>
</table>

Perlu diketahui maksud dari argumen yang ada pada for yaitu (user, index), sebagian dari Anda mungkin sudah tidak asing lagi dengan kata index karena berupa kunci dari larik (array). Yaa itu benar!, sedangkan user semua data pengguna yang akan dikeluarkan dengan objek. Saya menyarankan juga untuk menggunakan :key="index" agar tidak ada tulisan galat pada baris kode tersebut. Akan tetapi jika Anda menggunakan Vetur marketplace di Visual Studio Code.

Skrip-2

Jangan lupa juga untuk meletakan skrip dibawah ini pada komentar skrip-2.

data() {
    return {
        users: []
    }
},

mounted() {
    this.fetchData()
},

methods: {
    fetchData() {
        axios.get('/api/users').then(({ data }) => {
            this.users = data
        })
    }
}

Jadi, metode data() digunakan untuk membuat variabel yang bisa digunakan di beberapa metode lainnya, seperti di mounted() atau methods misalnya. Sedangkan metode mounted() akan dijalankan pertama kali saat selesai melakukan render halaman. Sedangkan metode methods akan digunakan untuk membuat fungsi.

Alih-alih saat halaman sudah di segarkan kemudian metode mounted() dijalankan dan terdapat fungsi fetchData() kemudian dijalankanlah apapun yang ada di fungsi tersebut. Axios sudah mendapatkan data dari REST API dan akan mengeluarkannya dan memberikannya pada variabel users. Hingga data tersebut akan ditampilkan di skrip yang sudah ditentukan pada komentar skrip-1.

Catatan: Jangan lupa menggunakan / diawal pada /api/users, kalau tidak pemanggilan api tidak sesuai. Anda bisa melihat ini pada DevTools di web browser.

3. Manampilkan semua data

Jangan lupa skrip dibawah ini juga penting untuk dilakukan, bagaimana tidak kalau skrip ini tidak dibuat maka data pengguna tidak tampil meskipun data sudah ada di basis data. Salin skrip dibawah ini pada berkas UserController.php dan perlu diketahui untuk model User sudah dipastikan dipanggil terlebih dahulu.

public function index()
{
    $users = User::all();

    return response()->json($users);
}

Dikarenakan data yang akan ditampilkan REST API harus berbentuk json, maka Anda harus menerapkannya diseperti skrip tersebut.

Maka hasilnya akan seperti gambar dibawah ini:

hasil

Catatan: Bagian tombol Tambah, Tampil, dan Edit dilanjutkan secara bertahap di tutorial selanjutnya.

Bonus - Membuat data palsu

Laravel memiliki kemudahan dalam pengembangan yang menjadikan tinker untuk membuat data palsu untuk pengujian. Jadi Anda tidak perlu memasukan data secara manual satu-persatu yang membuat Anda bosen jika suatu saat harus mengisi ulang data yang dimaukan. Jika Anda ingin melihat dimana proses ini terjadi silakan buka direktori database\factories maka akan terlihat berkas UserFactory.php. Maka di situlah proses data palsu di buat.

Silakan buka terminal kemudian masukan skrip dibawah ini, jika Anda ingin membuat data palsu sebanyak 10 tinggal diubah saja nilai parameternya.

php artisan tinker
User::factory(5)->create()

Selamat mencoba dan semoga berhasil.