Menambahkan Data

Saya memulai CRUD dengan tutorial menambahkan data dahulu yang biasanya saya buat untuk pertama kali ialah menampilkan semua data. Kelihatannya daftar tutorial kelas ini jauh lebih berurutan dan bagus untuk di uji coba perilaku pengguna. Pada bagian ini saya sudah siapkan bagian form-Nya dan juga akan memberikan validasi pada setiap input.

Daftar isi:

Langkah 1 - Skrip Create

Skip di bawah ini adalah tampilan halaman untuk menambah data pengguna, silakan buat berkas baru bernama create.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">Create User</h1>
            </div>
            <div class="level-right">
                <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>
                <!-- pembahasan 1 -->
                <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>
            <!-- pembahasan 2 -->
            <div class="field">
                <label class="checkbox">
                    <input type="checkbox" v-model="form.verified"> Verified Email?
                </label>
            </div>
            <div 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: {
        errors: Object
    },

    components: {
        Layout
    },

    // pembahasan 3
    setup() {
        const form = useForm({
            name: '',
            email: '',
            password: '',
            verified: false
        })

        return { form }
    },

    methods: {
        // pembahasan 4
        submit() {
            this.form.post(this.route('users.store'), {
                preserveScroll: true,
            })
        }
    }
}
</script>

Sebagai penjelasan utama jika Anda melakukan pengiriman data yang berisi bidang yang kosong, maka akan menampilkan pesan wajib mengisi setiap bidang pada form. Agar lebih jelas berikut penjelasan dari pembahasan di atas.

  1. Skrip tersebut akan membuat pesan galat yang berisi informasi terkait bidang yang Anda isi.
  2. Saya menambahkan skrip tersebut untuk menambahkan agar email bisa langsung di verifikasi atau tidak, sebenarnya hal tersebut tidak perlu dan itu perlu mengirim ke email sebenarnya untuk verifikasi yang benar. Layaknya ketika Anda melakukan daftar akun dan melakukan verifikasi email, tetapi ini hanya sebuah tambahan saja.
  3. Pada vue.js v3.x itu adalah cara Anda memanfaatkan composition API dimana Anda akan menggunakan useForm() agar lebih mudah melakukan pengiriman data dengan metode GET, POST, atau lainnya cukup dengan lakukan this.post() contohnya.
  4. Ini akan melakukan proses penyimpanan data pengguna, sedangkan preserveScroll:true digunakan agar halaman tidak kembali ke atas dan tetap di gulir halaman tersebut ketika menekan tombul submit.

Langkah 2 - Skrip Menyimpan Data

Setelah selesai melakukan langkah sebelumnya sekarang Anda akan membuat proses penyimpanan data. Buka berkas UserController.php pada direktori app\Http\Controllers kemudian salin dan tempelkan skrip di bawah ini. Mohon sesuaikan dengan fungsi store() pada berkas controller tersebut.

public function store(Request $request)
{
    // ini validasi untuk form
    $request->validate([
        'name' => 'required|min:3',
        'email' => 'required|min:8|unique:users',
        'password' => 'required|min:8'
    ]);
    
    // jika true maka email diverifikasi
    if ($request->verified) {
        $request->merge([
            'email_verified_at' => now()
        ]);
    }
    
    // disini data akan disimpan (eloquent)
    $user = User::create(
        $request->all()
    );

    // akan mengalihkan halaman show (satu data)
    return redirect()
        ->route('users.show', $user->id)
        // ini akan memberikan notifikasi
        ->with('message', 'Successful, user added successfully.');
}

Langkah 3 - Tambahkan Settingan Atribut Password

Jangan lupa pula untuk menambahkan fungsi setPasswordAttribute() pada berkas model User.php pada direktori app\Models agar kata sandi yang telah di simpan akan di hashing. Salin dan tempelkan pada berkas yang telah saya sebutkan, mohon fungsi tersebut yang di salin.

// ...

use Illuminate\Support\Facades\Hash;

Class User // ... 
{
    // ...
    public function setPasswordAttribute($pass)
    {
        $this->attributes['password'] = Hash::make($pass);
    }
}

Jadi sebagai penjelasan tambahan sebenarnya Anda bisa melakukan setelan kolom tabel dengan cara di atas, salah satunya mengenai hashing password tersebut. Tentu cara tersebut memudahkan Anda dalam pengembangan yang tidak perlu merubahnya satu persatu dalam controller cukup setel di model maka semuanya bisa dilakukan.