Menambahkan Data Laravel dan Vue.js

Hayo tetap semangat untuk terus mengikuti tutorial ini hingga selesai, disini Anda akan belajar untuk memasukan data lewat API Laravel. Masih sama dengan yang sebelumnya yang mungkin sedikit membosankan untuk membaca tutorial ini dan menyalin skrip.

Daftar isi:

1. Skrip dasar

Salin dan tempelkan skrip dibawah ini pada berkas create.vue yang terdapat pada direktori users.

<template>
    <div class="level">
        <div class="level-left">
            <div class="level-item">
                <h1 class="title is-4">Tambah data pengguna</h1>
            </div>
        </div>
        <div class="level-right">
            <div class="level-item">
                <router-link :to="{name: 'users.index'}" class="button is-light">Kembali</router-link>
            </div>
        </div>
    </div>

    <hr>

    <form @submit.prevent="submit" method="post">
        // skrip-1
    </form>
</template>

<script>
export default {
    // skrip-2
}
</script>

Seperti biasanya kalau Anda pernah menggunakan jQuery pasti menggunakan skrip yang ada kata prevent, itu digunakan agar Anda bisa melakukan submit tanpa harus menekan tombol submit. Contohnya jika semua bidang input sudah terisi lalu menekan enter pada keyboard Anda maka proses submit dilakukan.

Jangan lupa untuk menggunakan atribut method="post" agar semua data tidak akan tampil di alamat tautan di web browser Anda layaknya seperti menggunakan method GET. Pada form tidak sama seperti di blade Laravel yang membutuhkan CSRF untuk mengamankan data saat melakukan permintaan.

2. Menambahkan skrip

Skrip-1

Salin dan tempelkan pada komentar skrip-1 pada skrip dasar yang diatas.

<div class="field">
    <label for="name" class="label">Nama Lengkap</label>
    <div class="control">
        <input v-model="form.name" type="text" id="name" class="input">
    </div>
</div>

<div class="field">
    <label for="email" class="label">Alamat E-Mail</label>
    <div class="control">
        <input v-model="form.email" type="email" id="email" class="input">
    </div>
</div>
<div class="field">
    <label for="password" class="label">Kata Sandi</label>
    <div class="control">
        <input v-model="form.password" type="password" id="password" class="input">
    </div>
</div>
<div class="field">
    <label for="password_confirmation" class="label">Konfigurasi Kata Sandi</label>
    <div class="control">
        <input v-model="form.password_confirmation" type="password" id="password_confirmation" class="input">
    </div>
</div>

<div class="field">
    <button class="button is-fullwidth is-primary">Simpan</button>
</div>

Mungkin Anda akan bertanya kok nggak ada atribut name untuk mengambil data dari bidang input?

Saya pikir itu tidak perlu dilakukan, cukup menggunakan atribut v-model dari Vue.js itu sudah bisa mengambil datanya. Mohon diperhatikan darimana variabel yang ada pada v-model itu berada setelah Anda menyelesaikan skrip tutorial ini.

Catatan: Saya belum menambahkan atribut required yang mungkin tidak diperlukan untuk saat ini, karena nanti saya akan buat khusus pembahasan validasi pada form tersebut.

Skrip-2

Sama dengan skrip-1 yang diletakan pada skrip dasar diatas, salin dan tempelkan skrip dibawah ini pada komentar skrip-2.

data() {
    return {
        form: {
            name: '',
            email: '',
            password: '',
            password_confirmation: ''
        }
    }
},

methods: {
    submit() {
        axios.post('/api/users', this.form).then(({ data }) => {
            this.$router.push({
                name: 'users.show',
                params: {
                    id: data.id
                }
            })
        })
    }
}

Pada tutorial menampilkan data pengguna Anda menggunakan axios dengan get sedangkan sekarang Anda harus menggunakan post, jika Anda menyadari kalau cara tersebut sama dengan membuat rute di Laravel. Jangan lupa juga kalau parameter pertama itu berupa tautan REST API sedangkan kedua untuk data dari form/

Catatan: Perlu diketahui saat proses simpan berhasil maka halaman akan diarahkan ke tampil atau detail data pengguna. Tetap ikuti terus tutorial ini sampai hasil yang diharapkan.

Sampai disinilah hasil dari tampilan skrip diatas.

hasil

3. Menambahkan data pengguna

Apabila tampilan form tambah data pengguna sudah jadi alias selesai saatnya lalukan proses penambahan data. Salin dan tempelkan skrip dibawah ini pada berkas UserController.php sesuaikan seperti dibawah ini.

public function store(Request $request)
{
    $user = User::create(
        $request->all()
    );

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

Jadi apabila proses penyimpanan selesai maka tautan REST API akan mengembalikan data yang di input-Kan. Mungkin tidak sama seutuhnya dan Anda bisa melihat pada menu Network pada DevTools web browser Anda.

4. Bonus - Kata sandi tidak di hash

Pada kenyataannya proses penambahan data pengguna berhasil tersimpan dengan benar. Tetapi kenyataannya itu tidak benar-benar baik pada kolom password, karena kata sandi belum dilakukan hashing. Hal itu bisa dilakukan dengan mudah, silakan masuk ke berkas User.php pada direktori Models. Silakan sesuaikan skrip dibawah ini dengan benar:

use Illuminate\Support\Facades\Hash;
...

class User extends Authenticatable
{
    ...

    protected $appends = [
        'password'
    ];

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

Jadi, saat terjadinya proses submit maka variabel $appends akan di eksekusi ternyata ada nilai password dan sedangkan terdapat fungsi setPasswordAttribute() maksudnya atur variabel atribut password. Maka kata sandi yang dimasukan akan diproses pada fungsi tersebut sebelum memasukannya ke dalam basis data sebagai data yang tersimpan.

Selamat mencoba! dan tetap semangat untuk terus mengikuti tutorial serial ini.