Menambahkan Data

Pada tutorial ini Anda akan menambahkan data dahulu yang mana biasanya saya memulai dengan halaman utama atau menampilkan semua data. Agar lebih efektif tutorial kelas ini saya menggunakan pendekatan baru bagi saya untuk memulai dari menambahkan data.

Daftar isi:

Langkah 1 - Skrip Create

Buatlah direktori baru bernama users pada direktori pages aplikasi Nuxt.js Anda tentu berarti berada pada direktori client. Setelah membuat direktori users buat berkas baru bernama create.vue, kemudian salin dan tempelkan skri di bawah ini.

<template>
    <div>
        <div class="level">
            <div class="level-left">
                <h1 class="title is-4">Create User</h1>
            </div>
            <div class="level-right">
                <NuxtLink
                    :to="{ name: 'users' }"
                    class="button is-light"
                >
                    Back
                </NuxtLink>
            </div>
        </div>

        <hr>

        <form @submit.prevent="submit" @keydown="form.onKeydown($event)">
            <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="form.errors.has('name')" class="help is-danger">
                    {{ form.errors.get('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="form.errors.has('email')" class="help is-danger">
                    {{ form.errors.get('email') }}
                </p>
            </div>
            <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="form.errors.has('password')" class="help is-danger">
                    {{ form.errors.get('password') }}
                </p>
            </div>
            <div class="field">
                <button type="submit" class="button is-primary">Save</button>
            </div>
        </form>
    </div>
</template>

<script>
import Form from 'vform'

export default {
    head: {
        title: 'Create User'
    },

    data() {
        return {
            form: new Form({
                name: '',
                email: '',
                password: '',
                verified: false
            })
        }
    },
    
    methods: {
        async submit() {
            try {

                const { data } = await this.form.post(`/users`)

                if (this.form.successful) {
                    this.$router.push({
                        name: 'users-id',
                        params: {
                            id: data.id
                        }
                    })
                }

            } catch (e) {}
        }
    }
}
</script>

Pada instal dan konfigurasi Nuxt.js saya sudah menjelaskan tentang pembuatan tautan di Nuxt.js yaitu <NuxtLink>.

Perlu di ketahui kalau suatu form menggunakan @submit.prevent maka Anda tidak perlu repot untuk menekan tombol Save karena cukup tekan enter maka akan melalukan proses submit ketika di dalam bidang form.

<form @submit.prevent="submit" @keydown="form.onKeydown($event)">
</form>

Perhatikanlah skrip di bawah ini yang mana tidak seperti biasanya kalau Anda membuat CRUD dengan PHP Native yang memerlukan atribut name. Tetapi itu tidak diperlukan di Vue.js karena untuk menampilkan data atau mengambil dari bidang cukup menggunakan v-model.

<input type="text" v-model="form.name" id="name" class="input">

Menampilkan notifikasi validasi yang belum terpenuhi pada bidang itu sangat membantu Anda, agar Anda tahu syarat dalam pengisian data pada bidang form. Notifikasi validasi di hasilkan dari pustaka vForm, yang mana disini Anda menfaatkan untuk menanggatangani urusan form.

<p v-if="form.errors.has('name')" class="help is-danger">
    {{ form.errors.get('name') }}
</p>

Perhatikanlah skrip ini diatas yang mana saya menambahkannya untuk pengguna yang ditambahkan agar bisa memberikan email di verifikasi atau tidak. Tentu ini memberikan opsi sendiri untuk verifikasi email, hal yang sebenarnya ini tidak dilakukan karena melakukan verfikasi harus mengirim tautan verifikasi langsung ke email pengguna. Tetapi tutorial ini tidak membahas hal tersebut.

<div class="field">
    <label class="checkbox">
        <input type="checkbox" v-model="form.verified"> Verified Email?
    </label>
</div>

Ini adalah cara mengimpor modul untuk di gunakan pada berkas create.vue.

import Form from 'vform'

Jika Anda ingin membuat judul pada tab web browser atau lebih tepatnya tag <title>, cukup gunakan cara di bawah ini.

head: {
    title: 'Create User'
}

Gunakan data() untuk membuat variabel baru yang bisa di pakai di seluruh skrip berkas create.vue. Disini Anda bisa lihat variabel form yang mana nilainya di terima dari modul vForm, ibarat Anda membuat variabel dengan nilai dari new Class().

data() {
    return {
        form: new Form({
            name: '',
            email: '',
            password: '',
            verified: false
        })
    }
}

Sedangkan untuk menulis fungsi cukup menggunakan di methods, pada skrip di bawah ini Anda akan membuat fungsi submit() yang digunakan pada form untuk melakukan proses penyimpanan data.

methods: {
    async submit() {
        try {

            const { data } = await this.form.post(`/users`)

            if (this.form.successful) {
                this.$router.push({
                    name: 'users-id',
                    params: {
                        id: data.id
                    }
                })
            }

        } catch (e) {}
    }
}

Menggunakan vForm untuk melakukan pengiriman HTTP cukup dengan cara skrip di bawah ini, karena data yang disimpan maka menggunakan metode post dengan tujuan tautan API users.

const { data } = await this.form.post(`/users`)

Setelah proses simpan berhasil maka halaman akan dialihkan ke detail yang menggunakan this.$router.push layaknya Anda menggunakan <NuxtLink>

if (this.form.successful) {
    this.$router.push({
        name: 'users-id',
        params: {
            id: data.id
        }
    })
}

Catatan: Saya tidak akan menjelaskan lagi cara di atas pada bagian halaman edit nantinya, begitu pula skrip-skrip yang memiliki pendekatan yang sama seperti di atas.

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)
{
    $request->validate([
        'name' => 'required|min:3',
        'email' => 'required|min:8|unique:users',
        'password' => 'required|min:8'
    ]);

    if ($request->verified) {
        $request->merge([
            'email_verified_at' => now()
        ]);
    }

    $user = User::create($request->all());

    return response()->json($user);
}

Setiap kali data yang akan di simpan maka Anda harus membuat validasi data agar bisa menganalisir kesalahan data yang di simpan. Jadi validasi di utamakan pada kolom name, email, dan password.

$request->validate([
    'name' => 'required|min:3',
    'email' => 'required|min:8|unique:users',
    'password' => 'required|min:8'
]);

Berikut ini fungsinya:

  • required berarti data wajib di isi,
  • min:3 berarti minimal data sebanyak 3 karakter, dan
  • unique:users berarti akan memvalidasi apakah email yang dimasukan sudah ada di tabel users, kalau tidak maka tidak memverikan notifikasi validasi.

Jika variabel verified bernilai true maka akan menambahkan kolom email_verified_at untuk memberikan tanggal dan waktu verfikasi email.

if ($request->verified) {
    $request->merge([
        'email_verified_at' => now()
    ]);
}

Saya menggunakan eloquent Laravel dengan cara di bawah ini untuk menambahkan data.

$user = User::create($request->all());

Kemudian data akan di respon kembali jika proses simpan berhasil.

return response()->json($user);

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.