Halo teman-teman semuanya, pada artikel sebelumnya kita telah berhasil melakukan proses insert data ke dalam database di dalam React.js dan sekarang kita akan lanjutkan belajar membuat proses edit dan update data ke dalam database di React.js menggunakan Inertia.js.
Langkah 1 - Menambahkan Method Edit dan Update
Pertama, kita akan menambahkan 2 method baru di dalam controller. Silahkan teman-teman buka file app/Http/Controllers/PostController.php, kemudian ubah kode-nya menjadi seperti berikut ini.
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
//get all posts
$posts = Post::latest()->get();
//return view
return inertia('Posts/Index', [
'posts' => $posts
]);
}
/**
* create
*
* @return void
*/
public function create()
{
return inertia('Posts/Create');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
//set validation
$request->validate([
'title' => 'required',
'content' => 'required',
]);
//create post
Post::create([
'title' => $request->title,
'content' => $request->content
]);
//redirect
return redirect()->route('posts.index')->with('success', 'Data Berhasil Disimpan!');
}
/**
* edit
*
* @param mixed $post
* @return void
*/
public function edit(Post $post)
{
return inertia('Posts/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
]);
//redirect
return redirect()->route('posts.index')->with('success', 'Data Berhasil Diupdate!');
}
}
Dari perubahan kode di atas, kita menambahkan 2 method baru, yaitu :
-
function edit - digunakan untuk menampilkan halaman form edit data.
-
function update - digunakan untuk melakukan proses update data ke dalam database.
Function Edit
Method ini akan kita gunakan untuk menampilkan detail data post ke dalam halaman form edit. Disini kita melakukan get data post berdasarkan ID yang di dapatkan dari URL, kemudian kita parsing ke dalam view dalam bentuk props.
return inertia('Posts/Edit', [
'post' => $post,
]);
Function Update
Method ini akan kita gunakan untuk melakukan proses update data ke dalam database. Dan disini sama seperti pada method store, yaitu kita menambahkan validasi terlebih dahulu.
//set validation
$request->validate([
'title' => 'required',
'content' => 'required',
]);
Dari penambahan validasi di atas, kurang lebih seperti berikut ini penjelasannya.
| KEY |
VALIDATION |
DESCRIPTION |
title |
required |
field wajib diisi. |
content |
required |
field wajib diisi. |
Jika data yang dikirimkan sudah sesuai dengan validasi di atas, maka kita lanjutkan melakukan proses update data ke dalam database menggunakan Model.
//update post
$post->update([
'title' => $request->title,
'content' => $request->content
]);
Setelah itu, kita redirect ke dalam route yang bernama posts.index dengan memberikan pesan sukses update data.
//redirect
return redirect()->route('posts.index')->with('success', 'Data Berhasil Diupdate!');
Langkah 2 - Menambahkan Button Edit
Sebelum kita lanjutkan membuat halaman form edit, maka kita perlu menambahkan button EDIT terlebih dahulu pada halaman posts index.
Silahkan buka file resources/js/Pages/Posts/Index.jsx, kemudian cari kode berikut ini.
{ posts.map((post, index) => (
<tr key={ index }>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
</td>
</tr>
)) }
Dan ubahlah menjadi seperti berikut ini.
{ posts.map((post, index) => (
<tr key={ index }>
<td>{ post.title }</td>
<td>{ post.content }</td>
<td className="text-center">
<Link href={`/posts/${post.id}/edit`} className="btn btn-sm btn-primary me-2">EDIT</Link>
</td>
</tr>
)) }
Di atas, kita menambahkan button EDIT yang mana URL-nya kita arahkan ke dalam /posts/:id/edit. Sekarang, jika kita lihat pada halaman posts index, maka akan muncul button tersebut.
Langkah 3 - Membuat View Edit Data
Sekarang, kita lanjutkan membuat view untuk menampilkan halaman edit dan sekaligus membuat proses update data-nya.
Silahkan buat file baru dengan nama Edit.jsx di dalam folder resources/js/Pages/Posts, kemudian masukkan kode berikut ini di dalamnya.
//import hook useState from react
import React, { useState } from 'react';
//import layout
import Layout from '../../Layouts/Default';
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
export default function EditPost({ errors, post }) {
//define state
const [title, setTitle] = useState(post.title);
const [content, setContent] = useState(post.content);
//function "updatePost"
const updatePost = async (e) => {
e.preventDefault();
Inertia.put(`/posts/${post.id}`, {
title: title,
content: content
});
}
return (
<Layout>
<div className="row" style={{ marginTop: '100px' }}>
<div className="col-12">
<div className="card border-0 rounded shadow-sm border-top-success">
<div className="card-header">
<span className="font-weight-bold">EDIT POST</span>
</div>
<div className="card-body">
<form onSubmit={updatePost}>
<div className="mb-3">
<label className="form-label fw-bold">Title</label>
<input type="text" className="form-control" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Masukkan Judul Post" />
</div>
{errors.title && (
<div className="alert alert-danger">
{errors.title}
</div>
)}
<div className="mb-3">
<label className="form-label fw-bold">Content</label>
<textarea className="form-control" value={content} onChange={(e) => setContent(e.target.value)} placeholder="Masukkan Judul Post" rows={4}></textarea>
</div>
{errors.content && (
<div className="alert alert-danger">
{errors.content}
</div>
)}
<div>
<button type="submit" className="btn btn-md btn-success me-2"><i className="fa fa-save"></i> UPDATE</button>
<button type="reset" className="btn btn-md btn-warning"><i className="fa fa-redo"></i> RESET</button>
</div>
</form>
</div>
</div>
</div>
</div>
</Layout>
)
}
Dari penambahan kode di atas, pertama kita import React dan hook useState terlebih dahulu.
//import hook useState from react
import React, { useState } from 'react';
Kemudian kita import layout-nya.
//import layout
import Layout from '../../Layouts/Default';
Dan karena akan melakukan Http request, maka kita import juga adapter dari Inertia.js.
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
Setelah itu, di dalam function component EditPost kita menambahkan 2 parameter, yaitu errors dan post. Kedua data tersebut merupakan props yang dikirimkan oleh controller.
export default function EditPost({ errors, post }) {
//...
}
Di dalamnya, kita buat 2 state baru dengan default value dari data props post.
//define state
const [title, setTitle] = useState(post.title);
const [content, setContent] = useState(post.content);
Dan dibawahnya, kita membuat method yang bernama updatePost, method tersebut akan dijalankan ketika form disubmit.
<form onSubmit={updatePost}>
//...
</form>
//function "updatePost"
const updatePost = async (e) => {
//...
}
Di dalam method tersebut kita melakukan Http request menggunakan Inertia adapter untuk proses update data ke server.
Inertia.put(`/posts/${post.id}`, {
title: title,
content: content
});
Langkah 4 - Uji Coba Proses Edit dan Update Data
INFORMASI PENTING : pastikan teman-teman sudah menjalankan perintah npm run dev. Dan jangan ditutup terminal/CMD-nya.
Silahkan klik button EDIT dan jika berhasil kita akan mendapatkan hasil seperti berikut ini.
Silahkan sesuaikan isi data-nya dengan keinginan masing-masing, kemudian klik button UPDATE, jika berhasil maka hasilnya seperti berikut ini.
Sampai disini pembahasan bagaimana cara membuat proses edit dan update data di dalam React.js menggunakan Inertia.js.
Pada artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses hapus data dari database di React.js menggunakan Inertia.js.
Terima Kasih