Mengedit Data

Halaman edit akan sedikit berbeda pada halaman tambah datanya, karena di halaman ini ada opsi untuk menentukan apakah suatu pengguna ingin mengganti kata sandinya atau tidak. Tentu itu saja itu mudah dilakukan, karena nanti ada logika sendiri pada controller-Nya.

Daftar isi:

Langkah 1 - Menampilkan Data Edit

Melihat skrip di bawah ini sangat sama persis pada fungsi show() dan itu memang benar, tetapi yang berbeda nama komponen berkasnya saja. Langsung saja salin dan tempelkan pada berkas UserController.php dan sesuaikan dengan skrip di bawah ini.

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

Langkah 2 - Skrip Edit

Pada halaman edit Anda akan menemukan tombol detail yang mana ini juga opsi tambahan agar bisa melihat detail secara langsung. Tentu ini saya lakukan karena kebiasaan saya yang kesulitan dan harus selalu kembali ke halaman utama ketika berubah pikiran. Sekarang buat berkas baru bernama Edit.vue pada direktori resources/js/Pages, kemudian salin dan tempelkan skrip di bawah ini pada berkas tersebut.

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

        <hr>

        <form @submit.prevent="submit">
            <div class="field">
                <label for="name" class="label">Full Name</label>
                <div class="control">
                    <input type="text" v-model="form.name" id="name" class="input">
                </div>
                <p v-if="errors.name" class="help is-danger">
                    {{ errors.name }}
                </p>
            </div>
            <div class="field">
                <label for="email" class="label">Email Address</label>
                <div class="control">
                    <input type="email" v-model="form.email" id="email" class="input">
                </div>
                <p v-if="errors.email" class="help is-danger">
                    {{ errors.email }}
                </p>
            </div>
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox" v-model="form.isPassword"> Change user password?
                </label>
            </div>
            <div v-if="form.isPassword" class="field">
                <label for="password" class="label">Password</label>
                <div class="control">
                    <input type="password" v-model="form.password" id="password" class="input">
                </div>
                <p v-if="errors.password" class="help is-danger">
                    {{ errors.password }}
                </p>
            </div>
            <div class="field">
                <button type="submit" class="button is-primary">Save</button>
            </div>
        </form>
        
    </Layout>
</template>

<script>
import Layout from './../Components/Layout'
import { useForm } from '@inertiajs/inertia-vue3'

export default {
    props: {
        user: Object,
        errors: Object
    },
    
    components: {
        Layout
    },

    setup() {
        const form = useForm({
            name: '',
            email: '',
            password: '',
            isPassword: false
        })

        return { form }
    },

    methods: {
        submit() {
            this.form.put(this.route('users.update', this.user.id), {
                preserveScroll: true,
            })
        }
    },

    mounted() {
        this.form.name = this.user.name
        this.form.email = this.user.email
    }
}
</script>

Saya akan mulai bahas dari skrip di bawah ini yang mana jika Anda ingin mengubah kata sandi pengguna maka harus mencentangnya, kalau tidak maka tidak ada perubahan pada kata sandi. Jika Anda mencentang maka akan menampilkan bidang kata sandi lalu Anda bisa memasukan kata sandi yang baru untuk pengguna tersebut.

<label class="checkbox">
    <input type="checkbox" v-model="form.isPassword"> Change user password?
</label>

Saya juga menambahkan objek variabel isPassword: false agar lebih mudah mengatur nanti pada manipulasi perubahan data yang ada di controller yang akan di bahas pada langkah selanjutnya.

Skrip di bawah ini digunakan agar memasukan data yang di kirim pada langkah sebelumnya (maksudnya dari controller fungsi edit()) ke dalam variabel form, hanya data name dan email saja. Jika Anda tahu siklus hidup instance seperti mounted yang paling sering digunakan secara umum untuk merender komponen ketika suatu komponen telah di tambahkan ke DOM.

mounted() {
    this.form.name = this.user.name
    this.form.email = this.user.email
}

Langkah 3 - Memperbarui Data

Sekarang langsung saja salin dan tempelkan pada berkas UserController.php lalu sesuaikan dengan skrip di bawah ini.

public function update(Request $request, $id)
{
    $validate = [
        'name' => 'required|min:3',
        'email' => 'required|min:8|unique:users,id,' . $id,
    ];

    if ($request->isPassword) {
        $validate['password'] = 'required|min:8';
    }
    else {
        $request->replace($request->except('password'));
    }

    $request->validate($validate);

    $user = User::find($id);

    $user->update($request->all());

    return redirect()
        ->route('users.show', $id)
        ->with('message', 'Successful, user updated successfully.');
}

Hal yang pertama saya akan jelaskan yaitu mengenai validasi email lihat skrip di bawah ini, tentu sebelumnya Anda sudah melihat cara validasi pada penambahan data yaitu bagian 1. Apasih perbedaan dari validasi keduanya dan kenapa harus di bedakan. Lihat penjelasannya di bawah.

// bagian 1
'email' => 'required|min:8|unique:users',

// bagian 2
'email' => 'required|min:8|unique:users,id,' . $id,

Penjelasan bagian di atas:

  1. Menggunakan unique berarti setiap kolom misalnya email hanya boleh memiliki nilai tunggal yang berarti tidak boleh lebih dari satu nilai yang sama dalam suatu kolom tabel. Maka jika ada yang sama maka akan memberikan notifikasi seperti email sudah digunakan, hal ini juga bisa dilakukan seperti menambahkan kolom username atau nama pengguna di tabel users. Tentu tidak mungkinkan ada 2 pengguna memiliki alamat email atau nama pengguna yang sama, maka akan terdampak nanti pada autentikasinya atau untuk menampilkan detail penggunanya.
  2. Sedangkan pada bagian 2 ini adalah cara Anda untuk memverifikasi lebih lanjut nilai dari emailnya. Misalnya alamat email saya ialah febri@app.com maka saat diperbarui validasi akan menyesuaikan apakah email tersebut email asli sebelumnya? kalau iya maka tetap lanjut dan ternyata email tersebut tidak sama dengan email asli sebelumnya? maka validasi akan cek apakah email yang baru ini sudah digunakan oleh pengguna lain atau tidak. Kalau iya maka akan memberikan pesan kalau email sudah digunakan dan kalau tidak maka akan melanjutkan tanpa ada validasi lebih lanjut.

Anda tahu kalau data form terdapat isPassword untuk memvalidasi apakah pengguna ingin mengubah atau tidak kata sandi. Jadi kalau Iya maka akan memberikan skrip validasi (bagian 1) seperti di bawah ini. Jika tidak maka variabel password pada form harus di hapus (bagian 2).

// bagian 1
if ($request->isPassword) {
    $validate['password'] = 'required|min:8';
}
// bagian 2
else {
    $request->replace($request->except('password'));
}

Maksud dari variabel yang dihapus misalnya variabel di form memiliki data name, email, dan password, jadi password di hapus maka data yang di dalam form menyisahkan name dan email.