Menampilkan Satu Data

Setelah menambahkan data maka Anda wajib menampilkan satu data atau lebih tepatnya detail data. Karena tutorial sebelumnya mengalihkan halaman setelah proses penyimpanan ke halaman detail, maka tutorial ini harus diikuti.

Daftar isi:

Langkah 1 - Menampilkan Satu Data

Buka berkas UserController.php kemudian salin dan tempelkan skrip di bawah ini. Letakan dan sesuaikan dengan fungsi show pada controller.

public function show($id)
{
    return response()->json(
        User::find($id)
    );
}

Skrip di atas menuntukan akan menampilkan data pengguna berdasarkan id pengguna.

Langkah 2 - Skrip Show

Sekarang menentukan bagian skrip detail, silakan untuk membuat direktori baru bernama _id pada direktori pages/users pada Nuxt.js. Setelah itu membuat berkas baru bernama index.vue. Maka hal tersebut akan membuat perutean menjadi http://.../users/{id} yang mana id adalah parameter untuk id data pengguna. Salin dan tempelkan skrip di bawah ini pada berkas index.vue tersebut.

<template>
    <div>
        <div class="level">
            <div class="level-left">
                <h1 class="title is-4">User: {{ user.name }}</h1>
            </div>
            <div class="level-right buttons">
                <NuxtLink
                    :to="{ name: 'users-id-edit', params: { id: user.id } }"
                    class="button is-light"
                >
                    Edit
                </NuxtLink>
                <NuxtLink
                    :to="{ name: 'users' }"
                    class="button is-light"
                >
                    Back
                </NuxtLink>
            </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>
        
    </div>
</template>

<script>
export default {
    head() {
        return {
            title: `User: ${this.user.name}`
        }
    },

    async asyncData({ $axios, params}) {
        const { data } = await $axios.get(`/users/${params.id}`)

        return { user: data}
    }
}
</script>

Skrip ini akan menampilkan nama pengguna berdasarkan data yang diterima dan mengeluarkan data cukup dengan {{ ... }} diikuti dengan variabel dan objek variabel.

<h1 class="title is-4">User: {{ user.name }}</h1>

Pada halaman detail terdapat tombol Edit (untuk ke halaman edit) dan Back (ini untuk ke halaman utama). Jadi tautan pada tombol edit membutukan parameter bernama id, karena Anda membuat direktori _id dan ada berkas index.vue di dalammnya. Hal tersebut sama saja dengan membuat berkas _id.vue. Jadi setiap membuat parameter harus menggunakan underscore (_) dan diikuti nama parameternya apa. Jika Anda membuat berkas _slug.vue, maka parameternya harus slug seperti itu penjelasannya.

<NuxtLink
    :to="{ name: 'users-id-edit', params: { id: user.id } }"
    class="button is-light"
>
    Edit
</NuxtLink>

Skrip ini akan membuat keputusan untuk mengecek apakah suatu pengguna data email verifikasi ada atau tidak? Kalau ada maka akan menampilkan tanggal verfifikasi dan bila tidak akan menampilkan Not Verified. new Date(...).toLocaleDateString() adalah cara untuk mengonversi tanggal objek Date menjadikan untai (string) yang dapat di baca, kemudian melakukan konversi waktu lokal.

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

Memberikan judul yang mungkin tidak sama yang saya tulis skripnya pada tutorial sebelumnya, karena pada skrip di bawah ini Anda membutuhkan variabel user maka harus menulisnya seperti di bawah ini.

head() {
    return {
        title: `User: ${this.user.name}`
    }
},

Karena saya menggunakan rendering sisi peladen, maka menggunakan pengambilan data dengan asyncData. Jadi variabel user dilakukan dari hasil return yang bersifat objek dan hal tersebut akan membuat variabel. Cara mengambil parameternya cukup menggunakan params.id.

async asyncData({ $axios, params}) {
    const { data } = await $axios.get(`/users/${params.id}`)

    return { user: data }
}