Apakah Anda masih semangat untuk tetap mengikuti tutorial ini, kelihatannya itu sebuah keharusan untuk mencapai keberhasilan. Sekarang saatnya Anda untuk membuat halaman edit untuk perbarui data pengguna jika diperlukan. Karena tutorial ini menggunakan tabel users bawaan Laravel, maka harus ada konfigurasi ganti atau tidak kata sandi.
Daftar isi:
1. Skrip dasar
Pada skrip dibawah ini saya sudah membuatkan rute link ke halaman detail pengguna layaknya tutorial menampilkan satu data pengguna. Salin dan tempelkan skrip dibawah ini pada berkas edit.vue di direktori users.
<template>
<div class="level">
<div class="level-left">
<div class="level-item">
<h1 class="title is-4">Edit data pengguna</h1>
</div>
</div>
<div class="level-right">
<div class="level-item">
<router-link :to="{name: 'users.show', params: {id: this.id}}" class="button is-light">Lihat</router-link>
</div>
<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>
2. Menambahkan skrip
Skrip-1
Kemudian salin dan tempel skrip dibawah ini pada komentar skrip-1.
<div class="field">
<label for="name" class="label">Nama Lengkap</label>
<div class="control">
<input v-model="form.name" type="text" name="name" id="name" class="input" required>
</div>
</div>
<div class="field">
<label for="email" class="label">Alamat E-Mail</label>
<div class="control">
<input v-model="form.email" type="email" name="email" id="email" class="input" required>
</div>
</div>
<div class="field">
<label class="checkbox">
<input v-model="changePassword" type="checkbox"> Ganti kata sandi lama
</label>
</div>
<div v-if="changePassword" class="field">
<label for="password" class="label">Kata Sandi</label>
<div class="control">
<input v-model="form.password" type="password" name="password" id="password" class="input" required>
</div>
</div>
<div v-if="changePassword" class="field">
<label for="password_confirmation" class="label">Konfigurasi Kata Sandi</label>
<div class="control">
<input v-model="form.password_confirmation" type="password" name="password_confirmation" id="password_confirmation" class="input" required>
</div>
</div>
<div class="field">
<button class="button is-fullwidth is-primary">Perbarui</button>
</div>
Skrip-2
Salin dan tempel skrip dibawah ini pada komentar skrip-2.
data() {
return {
id: this.$route.params.id,
changePassword: false,
form: {
name: '',
email: '',
password: '',
password_confirmation: ''
}
}
},
methods: {
submit() {
axios.put(`/api/users/${this.id}`, this.form).then(({ data }) => {
this.$router.push({
name: 'users.show',
params: {
id: data.id
}
})
})
}
},
mounted() {
axios.get(`/api/users/${this.id}`).then(({ data }) => {
this.form = data
})
}
Jadi sebelum melakukan perubahan data pengguna, Anda harus menampilkan data penggunanya terlebih dahulu. Perhatikan pada metode mounted() mengambil permintaan data pengguna dengan API rute get. Jadi yang saya maukan ialah mengambil data seperti menampilkan satu data pengguna seperti tutorial sebelumnya. Setelah itu data akan dimasukan pada variabel form.
Hal yang perlu diketahui juga kalau variabel changePassword digunakan untuk membuat opsi ganti atau tidak kata sandi pengguna.
3. Mengedit data pengguna
Saatnya Anda menambahkan skrip dibawah ini untuk melakukan perubahan data pengguna, jadi alih-alih mengambil satu data pengguna berasarkan id kemudian melakukan perubahan data pengguna.
public function update(Request $request, $id)
{
$user = User::find($id);
$user->update(
$request->all()
);
return response()->json($user);
}
Jadi setelah melakukan perubahan maka rute API tersebut akan mengembalikan data pengguna yang baru.
Sekarang lihatlah hasilnya dan Anda siap melakukan beberapa perubahan jika melakukan testing terlebih dahulu.
