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/Edit dan kita parsing data-nya menggunakan props yang bernama post.
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.index dan 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">
<inertia-link :href="`/posts/${post.id}/edit`" class="btn btn-sm btn-primary me-2">EDIT</inertia-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 :
<template>
<div>
<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>
</div>
</template>
<script>
//import layout
import LayoutApp from '../../Layouts/App.vue'
import { reactive } from 'vue'
import { Inertia } from '@inertiajs/inertia'
export default {
//layout
layout: LayoutApp,
//props
props: {
post: Object,
errors: Object
},
//define Composition Api
setup(props) {
//state posts
const post = reactive({
title: props.post.title,
content: props.post.content
})
//function updatePost
function updatePost() {
//define variable
let title = post.title
let content = post.content
//send data
Inertia.put(`/posts/${props.post.id}`, {
title: title,
content: content
})
}
return {
post,
updatePost
}
}
}
</script>
Dari penambahan kode di atas, pertama kita import Layout terlebih dahulu.
//import layout
import LayoutApp from '../../Layouts/App.vue
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 } from 'vue'
Setelah itu, kita import Inertia dari apater Inertia.js, ini akan kita gunakan untuk melakukan http request ke route Laravel, jadi kita tidak perlu menggunakan library tambahan seperti Axios.
import { Inertia } from '@inertiajs/inertia'
Kemudian kita register Layout di atas ke dalam properti layout.
//layout
layout: LayoutApp,
Dan 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.
//props
props: {
post: Object,
errors: Object
},
Dan untuk mendefinisikan Composition API, maka kita perlu menggunakan method yang bernama setup.
setup() {
//...
}
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.
//send data
Inertia.put(`/posts/${props.post.id}`, {
title: title,
content: content
})
Di atas, kita menggunakan adapter dari Inertia.js untuk proses Http Request dengan method PUT ke dalam endpoint /posts/:id dan data yang dikirim akan diambil dari variable.
Setelah itu, agar semua state dan function yang ada di dalam Compositon API dapat digunakan di dalam template, maka kita perlu melakukan return terlebih dahulu.
return {
post, // <-- state "post"
updatePost // <-- function "updatePost"
}
Langkah 3 - Compiling Assets dan Menjalankan Project
Sekarang kita akan melakukan compiling assets terlebih dahulu agar semua perubahan yang kita buat dapat digunakan. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
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