Menampilkan Semua Data

Hal yang paling di tunggu ialah menampilkan semua data yang di mana Anda sudah menambah, perbarui, dan menampilkan satu data pada tutorial sebelumnya. Maka disini Anda akan menggunakan komponen Pagination untuk memulai membuat paginasi di semua data Anda yang akan di bagi-bagi perhalaman. Hal ini bermanfaat agar halaman terasa ringan karena data di bagi beberapa halaman. Misalnya Anda memiliki 50 data secara bawaan Laravel hanya 15 data saja perhalaman dan itu bisa di atur berapa jumlah perhalamannya.

Daftar isi:

Langkah 1 - Menampilkan Semua Data

Silakan salin dan tempelkan skrip di bawah ini pada berkas UserController.php kemudian sesuaikan skripnya.

public function index()
{
    $users = User::latest()->paginate();

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

Kalau menggunakan fungsi paginate() Anda tidak perlu lagi menggunakan fungsi get(), fungsi latest() secara asali mengurutkan berdasarkan data yang baru dengan kolom created_at.

Catatan: Jika Anda ingin mengubah jumlah data perhalaman silakan berikan nilai pada fungsi paginate(20) misalnya.

Langkah 2 - Skrip Index

Buatlah berkas baru pada direktori pages/users dengan nama index.vue lalu salin dan tempelkan skrip di bawah ini pada berkas tersebut.

<template>
    <div>
        <div class="level">
            <div class="level-left">
                <h1 class="title is-4">All Users</h1>
            </div>
            <div class="level-right">
                <NuxtLink
                    :to="{ name: 'users-create' }"
                    class="button is-light"
                >
                    Create
                </NuxtLink>
            </div>
        </div>

        <hr>

        <div class="table-container">
            <table class="table is-fullwidth is-striped is-hoverable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Full Name</th>
                        <th>Email Address</th>
                        <th>Verified</th>
                        <th>Created</th>
                        <th>Updated</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(user, index) in data.data"
                        :key="index"
                    >
                        <td>{{ user.id }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.email }}</td>
                        <td>{{ user.email_verified_at ? new Date(user.email_verified_at).toLocaleDateString() : 'Not Verified' }}</td>
                        <td>{{ new Date(user.created_at).toLocaleDateString() }}</td>
                        <td>{{ new Date(user.updated_at).toLocaleDateString() }}</td>
                        <td class="buttons">
                            <NuxtLink
                                :to="{
                                    name: 'users-id',
                                    params: { id: user.id}
                                }"
                                class="button is-small is-info"
                            >
                                Detail
                            </NuxtLink>
                            <NuxtLink
                                :to="{
                                    name: 'users-id-edit',
                                    params: { id: user.id}
                                }"
                                class="button is-small is-primary"
                            >
                                Edit
                            </NuxtLink>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Pagination
            :links="data.links"
        />
    </div>
</template>

<script>
export default {
    head: {
        title: 'All Users'
    },

    async asyncData({ $axios, query }) {

        const { data } = await $axios.get(`/users?page=${query.page || 1}`)

        return { data }
    },
}
</script>

Saya tidak akan membahas lebih dalam disini karena sudah di bahas di tutorial sebelumnya. Perhatikan skrip di bawah ini yang mana untuk menampilkan semua data menggunakan perulangan for dan di ikuti (data, index)-Nya. Atribut key saya gunakan juga agar tidak memberikan pesan galat yang di sebabkan oleh extension Vetur yang mana atribut tersebut untuk menentukan kunci pada semua elemen dari data tersebut.

<tr
    v-for="(user, index) in data.data"
    :key="index"
>

Komponen ini akan membuat paginasi di bagian bawah tabel, semua tautan paginasi di ambil dari data.links dan memberikan ke komponen dengan atribut links. Atribut links berasal dari komponen itu sendiri melalui props silakan di periksa pasti akan memiliki variabel links.

<Pagination
    :links="data.links"
/>

Seperti apa sih logikanya? jadi apabila query page tidak ada pada tautan maka akan membawakan nilai asali 1. Jika query page ada dan nilainya 1, 2, 3, atau bahkan 4 maka akan menggunakan nilai tersebut untuk menentukan query pada Rest API.

$axios.get(`/users?page=${query.page || 1}`)

Langkah 3 - Membuat Data Palsu

Pasti Anda akan bertanya ni apa sih data palsu yang dimaukan, jadi seperti ini. Kalau Anda tahu kalau di Laravel memiliki fitur factory atau pabrik 😅, yaahh! sebenarnya itu adalah pabrik model. Jadi menggunakan fitur tersebut untuk tujuan testing atau pengujian aplikasi melalui data-data yang palsu. Adanya hal tersebut Anda tidak perlu lagi menyimpan data secara manual dan satu-satu dan tentu akan merepotkan Anda sebagai pengembang. Karena model User sudah di buat secara bawaan maka tidak perlu lagi dibuat kecuali Anda ingin memodifikasinya lihat UserFactory.php pada direktori database/factories.

Silakan ikuti langkah-langkah di bawah ini pada terminal Anda.

# 1
php artisan tinker
# 2
User::factory()->count(50)->create();
# 3
exit

Catatan: Jadi Anda bisa menyetel jumlah data palsu yang akan di buat dengan mengubah count(100) misalnya. Semakin banyak jumlahnya akan semakin lama proses tunggunya.