- Langkah 1 - Menambahkan Method Edit dan Update
- Langkah 2 - Menambahkan Button Edit
- Langkah 3 - Membuat View Edit Data
- Langkah 3 - Uji Coba Edit dan Update Data
Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar bagaimana cara melakukan proses insert data ke dalam database menggunakan Laravel dan Inertia.js dan pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat proses edit dan update data ke dalam database.
Langkah 1 - Menambahkan Method Edit dan Update
Pertama kita akan menambahkan 2 method baru di dalam controller PostController, yaitu method edit dan update.
Silahkan buka file app/Http/Controllers/PostController.php dan ubah semuan kode-nya menjadi seperti beirkut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Inertia\Inertia;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
//get all posts from database
$posts = Post::latest()->get();
//render with data "posts"
return Inertia::render('Post/Index', [
'posts' => $posts
]);
}
/**
* create
*
* @return void
*/
public function create()
{
return Inertia::render('Post/Create');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
//set validation
$request->validate([
'title' => 'required',
'content' => 'required',
]);
//create post
$post = Post::create([
'title' => $request->title,
'content' => $request->content
]);
if($post) {
return Redirect::route('posts.index')->with('message', 'Data Berhasil Disimpan!');
}
}
/**
* edit
*
* @param mixed $post
* @return void
*/
public function edit(Post $post)
{
return Inertia::render('Post/Edit', [
'post' => $post
]);
}
/**
* update
*
* @param mixed $request
* @param mixed $post
* @return void
*/
public function update(Request $request, Post $post)
{
//set validation
$request->validate([
'title' => 'required',
'content' => 'required',
]);
//update post
$post->update([
'title' => $request->title,
'content' => $request->content
]);
if($post) {
return Redirect::route('posts.index')->with('message', 'Data Berhasil Diupdate!');
}
}
}
Di atas kita menambahkan 2 method baru, yaitu edit dan update.
-
Function Edit
Method ini akan kita gunakan untuk menampilkan data yang akan di update ke dalam sebuah form, disini kita render ke dalam sebuah view atau page yaitu
Post/Editdan kita parsing data-nya menggunakan props yang bernamapost.return Inertia::render('Post/Edit', [ 'post' => $post ]); -
Function Update
Method ini akan kita gunakan untuk melakukan proses update data ke dalam database, disini sama seperti method
store, yaitu kita membuat sebuah validasi terlebih dahulu untuk memastikan data yang akan diupdate sudah sesuai dengan yang diharapkan.//set validation $request->validate([ 'title' => 'required', 'content' => 'required', ]);Jika validasi di atas sudah terpenuhi, maka kita akan melakukan proses update data menggunakan Model Eloquent, kurang lebih seperti berikut ini :
//update post $post->update([ 'title' => $request->title, 'content' => $request->content ]);Setelah itu, kita membuat sebuah kondisi untuk memastikan apakah proses update data di atas berhasil atau tidak. Jika proses update berhasil maka kita akan melakukan redirect ke dalam sebuah route yang bernama
posts.indexdan memparsing sebuah flash message.if($post) { return Redirect::route('posts.index')->with('message', 'Data Berhasil Diupdate!'); }
Langkah 2 - Menambahkan Button Edit
Sebelum itu, kita akan menambahkan button EDIT terlebih dahulu di dalam halaman index post, silahkan buka file resources/js/Pages/Post/Index.vue dan cari kode berikut ini :
<tr v-for="post in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center"></td>
</tr>
Kemudian ubah menjadi seperti berikut ini :
<tr v-for="post in posts" :key="post.id">
<td>{{ post.title }}</td>
<td>{{ post.content }}</td>
<td class="text-center">
<Link :href="`/posts/${post.id}/edit`" class="btn btn-sm btn-primary me-2">EDIT</Link>
</td>
</tr>
Di atas, kita menambahkan 1 button baru yang mana akan kita arahkan ke dalam URL /posts/:id/edit.
Langkah 3 - Membuat View Edit Data
Setelah berhasil menambahkan 2 method di dalam controller, maka sekarang kita akan lanjutkan untuk membuat view ata page yang digunakan sebagai halaman form edit.
Silahkan buat file baru dengan nama Edit.vue di dalam folder resources/js/Pages/Post dan kemudian masukkan kode berikut ini :
<script setup>
// import layout app
import Layout from '../../Layouts/App.vue'
// get props "post" dan "errors" dari controller
const props = defineProps({
post: Object,
errors: Object
})
// import reactive
import { reactive } from 'vue'
// import router
import { router } from '@inertiajs/vue3'
//state posts
const post = reactive({
title: props.post.title,
content: props.post.content
})
//function updatePost
function updatePost() {
//send data to server
router.put(`/posts/${props.post.id}`, post)
}
</script>
<template>
<Layout>
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>EDIT POST</h4>
<hr>
<form @submit.prevent="updatePost">
<div class="mb-3">
<label class="form-label">TITLE POST</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Title Post">
<div v-if="errors.title" class="mt-2 alert alert-danger">
{{ errors.title }}
</div>
</div>
<div class="mb-3">
<label class="form-label">CONTENT</label>
<textarea class="form-control" rows="5" v-model="post.content" placeholder="Masukkan Content Post"></textarea>
<div v-if="errors.content" class="mt-2 alert alert-danger">
{{ errors.content }}
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary btn-md shadow-sm me-2">UPDATE</button>
<button type="reset" class="btn btn-warning btn-md shadow-sm">RESET</button>
</div>
</form>
</div>
</div>
</Layout>
</template>
Dari penambahan kode di atas, pertama kita import Layout terlebih dahulu.
// import layout app
import Layout from '../../Layouts/App.vue'
Selanjutnya untuk handle error validasi dari controller, kita melakukan definisi sebuah props dengan nama errors dan posts. Untuk props post akan berisi detail data post yang akan kita update dan untuk props errors akan berisi data error validasi.
// get props "post" dan "errors" dari controller
const props = defineProps({
post: Object,
errors: Object
})
Kemudian kita import Reactivity API dari Vue.js yaitu reactive, ini akan digunakan untuk membuat sebuah state secara realtime di dalam Composition API.
// import reactive
import { reactive } from 'vue'
Setelah itu, kita import router dari Inertia.js, ini akan kita gunakan untuk melakukan http request ke route Laravel, jadi kita tidak perlu menggunakan library tambahan seperti Axios.
// import router
import { router } from '@inertiajs/vue3'
Dan di dalam Composition API, pertama kita membuat sebuah state yang bernama post dan state ini menggunakan Reactivity API yaitu reactive. Dan untuk nilai default-nya akan kita ambil dari props post.
//state posts
const post = reactive({
title: props.post.title,
content: props.post.content
})
Kemudian kita membuat sebuah function yang bernama updatePost, fungsi ini akan dijalankan ketika form dilakukan submit dan disini kita akan melakukan sebuah Http Request untuk proses update data.
//function updatePost
function updatePost() {
//...
}
Di atas, kita menggunakan router dari Inertia.js untuk proses Http Request dengan method PUT ke dalam endpoint /posts/:id dan data yang dikirim akan diambil dari variable.
//send data to server
router.put(`/posts/${props.post.id}`, post)
Langkah 3 - Uji Coba Edit dan Update Data
Sekarang silahkan reload halaman index post, maka kita akan mendapatkan 1 button baru dengan nama EDIT.
Silahkan klik salah satu button EDIT dan jika berhasil maka kita akan mendapatkan tampilan seperti berikut ini :
Kemudian silahkan ubah datanya sesuai keinginan masing-masing, dan klik UPDATE, jika berhasil maka kita akan mendapatkan hasil kurang lebih seperti berikut ini :
Sampai disini pembahasan bagaimana cara membuat proses edit dan update data menggunakan Laravel dan Inertia.js, di artikel selanjutnya kita semua akan belajar bagaimana cara membuat fitur hapus data dari database.
Terima Kasih
Artikel ini dibaca sebanyak 10.256 kali
SAWERIA
Memuat komentar...