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. 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()
{
    return Inertia::render('Index', [
        'users' => User::latest()->paginate()
    ]);
}

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 resources/js/Pages dengan nama Index.vue lalu salin dan tempelkan skrip di bawah ini pada berkas tersebut.

<template>
    <Layout
        :message="flash.message"
    >
        <div class="level">
            <div class="level-left">
                <h1 class="title is-4">All Users</h1>
            </div>
            <div class="level-right">
                <inertia-link
                    :href="route('users.create')"
                    class="button is-light"
                >
                    Create
                </inertia-link>
            </div>
        </div>

        <hr>
        
        <div class="tabel-container">
            <table class="table is-fullwidth is-hoverable is-striped">
                <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 users.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">
                            <inertia-link
                                :href="route('users.show', user.id)"
                                class="button is-small is-info"
                            >
                                Detail
                            </inertia-link>
                            <inertia-link
                                :href="route('users.edit', user.id)"
                                class="button is-small is-primary"
                            >
                                Edit
                            </inertia-link>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <Pagination
            :links="users.links"
        />
    </Layout>
</template>

<script>
import Layout from './../Components/Layout'
import Pagination from './../Components/Pagination'

export default {
    props: {
        users: Object,
        flash: Object
    },
    
    components: {
        Layout,
        Pagination
    }
}
</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 users.data"
    :key="index"
>

Komponen ini akan membuat paginasi di bagian bawah tabel, semua tautan paginasi di ambil dari users.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="users.links"
/>

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.