Menampilkan Satu Data

Setelah menambah data selesai tentunya tidak lupa pula untuk membuat halaman detail data, karena yang perlu Anda tahu setelah data di simpan halaman akan mengalihkan ke halaman detailnya.

Daftar isi:

Langkah 1 - Menampilkan Satu Data

Silakan salin dan tempelkan skrip di bawah ini lalu sesuaikan pada berkas controller UserController.php.

public function show($id)
{
    return Inertia::render('Show', [
        'user' => User::find($id)
    ]);
}

Karena skrip di atas pertama yang belum di bahas maka saya akan bahas disini. Skrip Inertia::render(komponen, data) yang mana parameter pertama adalah nama berkas Vue dan kedua adalah data yang akan di kirim pada komponen tersebut. Skrip User::find($id) untuk menampilkan data pengguna.

Catatan: Semua berkas komponen harus berada pada direktori resources/js/Pages secara bawaan Inertia.js, jika berkas komponen ada di dalam direktori Pages/Users misalnya maka cukup gunakan render('Users/Show').

Langkah 2 - Skrip Show

Setelah langkah di atas selesai disini ada beberapa hal baru yaitu adanya message, jadi setelah Anda menambahkan data maka notifikasi akan tampil pada halaman detail ini. Silakan buat berkas baru Show.vue pada direktori resources/js/Pages, kemudian salin dan tempelkan skrip di bawah ini.

<template>
    <Layout
        :message="flash.message"
    >
        <div class="level">
            <div class="level-left">
                <h1 class="title is-4">Detail User</h1>
            </div>
            <div class="level-right buttons">
                <inertia-link
                    :href="route('users.edit', user.id)"
                    class="button is-light"
                >
                    Edit
                </inertia-link>
                <inertia-link
                    :href="route('users.index')"
                    class="button is-light"
                >
                    Back
                </inertia-link>
            </div>
        </div>

        <hr>

        <div class="field">
            <label class="label">Full Name</label>
            <pre>{{ user.name }}</pre>
        </div>

        <div class="field">
            <label class="label">Email Address</label>
            <pre>{{ user.email }}</pre>
        </div>

        <div class="field">
            <label class="label">Verified</label>
            <pre>{{ user.email_verified_at ? new Date(user.email_verified_at).toLocaleDateString() : 'Not Verified' }}</pre>
        </div>

        <div class="field">
            <label class="label">Created</label>
            <pre>{{ new Date(user.created_at).toLocaleDateString() }}</pre>
        </div>

        <div class="field">
            <label class="label">Updated</label>
            <pre>{{ new Date(user.updated_at).toLocaleDateString() }}</pre>
        </div>
        
    </Layout>
</template>

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

export default {
    props: {
        user: Object,
        flash: Object
    },
    
    components: {
        Layout
    }
}
</script>

Pada halaman detail ini Anda akan menemukan tombol edit dan back ini memudahkan Anda untuk melakukan pengeditan data secara langsung. Tanpa harus melakukannya di halaman utama data yang nanti Anda akan membuatnya. Berhatikan skrip di bawah ini.

<pre>{{ user.email_verified_at ? new Date(user.email_verified_at).toLocaleDateString() : 'Not Verified' }}</pre>

Jadi jika email pengguna belum di verifikasi maka akan menampilkan Not Verified dan jika sudah maka akan menampilkan tanggal saja karena toLocaleDateString() akan menampilkan tanggal sesuai format waktu Anda.

Data yang di kirim ke halaman ini akan melalui skrip di bawah ini yaitu props.

props: {
    user: Object,
    flash: Object
}

Terdapat variabel user dan flash yang mana variabel user merupakan data penguna berdasarkan ['user' => ...] yaitu kunci dari lariknya. Sedangkan variabel flash Anda bisa menemukannya pada middleware HandleInertiaRequests yang sudah saya bahas pada tutorial sebelumnya.

Oh iya saya sedikit lupa untuk membahas tentang tata letak yang mana Anda harus memanggilnya dengan import, kemudian mundur satu direktori ../ dan masuk ke direktori Components dan mengarahkan ke berkas Layout.vue. Setelah itu Anda harus mendaftarkannya dengan contoh skrip di bawah ini.

components: {
    Layout
}

Jadi Anda perlu memasukan skrip antara elemen <Layout></Layout> yang mana pada berkas Layout.vue sudah menggunakan slot untuk meletakan skrip secara bawaan. Tanpa menggunakan slot bernama dan itu tidak perlu dilakukan karena hanya memanfaatkan satu slot saja.