Halo teman-teman semuanya, di artikel-artikel sebelumnya kita semua telah belajar banyak seperti menampilkan data, insert, edit dan update. Dan pada kesempatan kali ini kita semua akan belajar bagaimana cara menambahkan fitur proses delete data.
Langkah 1 - Menambahkan Method Destroy
Pertama kita akan menambahkan 1 method terlebih dahulu di dalam controller PostController untuk nantinya digunakan sebagai proses delete data.
Silahkan buka file app/Http/Controllers/PostController.php dan ubah semua kode-nya menjadi seperti berikut 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!');
}
}
/**
* destroy
*
* @param mixed $id
* @return void
*/
public function destroy($id)
{
//find post by ID
$post = Post::findOrfail($id);
//delete post
$post->delete();
if($post) {
return Redirect::route('posts.index')->with('message', 'Data Berhasil Dihapus!');
}
}
}
Dari perubahan kode di atas, kita menambahkan 1 method baru dengan nama destroy, dimana di dalam method tersebut kita melakukan find atau mencari data post berdasarkan ID yang diambil dari parameter.
//find post by ID
$post = Post::findOrfail($id);
Jika data post berhasil di dapatkan, maka kita akan melakukan proses delete menggunakan method delete().
//delete post
$post->delete();
Jika proses delete data berhasil, maka kita akan arahkan kembali ke dalam route yang bernama posts.index dengan memberikan parameter flash message.
if($post) {
return Redirect::route('posts.index')->with('message', 'Data Berhasil Dihapus!');
}
Langkah 2 - Menambahkan Fitur Delete
Setelah berhasil menambahkan method baru untuk hapus data, sekarang kita lanjutkan untuk membuat fitur tersebut di dalam view atau page.
Silahkan buka file resources/js/Pages/Post/Index.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div class="mt-5">
<!-- flash message -->
<div v-if="$page.props.flash.message" class="alert alert-success" role="alert">
{{ $page.props.flash.message }}
</div>
<!-- flash message -->
<div class="mb-3">
<inertia-link href="/posts/create" class="btn btn-md btn-primary">TAMBAH DATA</inertia-link>
</div>
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">TITLE</th>
<th scope="col">CONTENT</th>
<th scope="col">ACTIONS</th>
</tr>
</thead>
<tbody>
<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>
<button @click.prevent="deletePost(`${post.id}`)" class="btn btn-sm btn-danger">DELETE</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
//import layout
import LayoutApp from '../../Layouts/App.vue'
//import Link dari inertia
import { Link } from '@inertiajs/inertia-vue3';
import { Inertia } from '@inertiajs/inertia'
export default {
//layout
layout: LayoutApp,
//register Link di component
components: {
Link
},
//props
props: {
posts: Array // <- nama props yang dibuat di controller saat parsing data
},
//define Composition Api
setup() {
//method deletePost
function deletePost(id) {
Inertia.delete(`/posts/${id}`)
}
return {
deletePost
}
}
}
</script>
<style>
</style>
Dari perubahan kode di atas, pertama kita menambahkan 1 button baru di dalam template, dimana di dalam button tersebut akan kita arahkan ke dalam sebuah function atau method yang bernama deletePost dan di dalamnya kita parsing sebuah parameter berupa ID dari data post.
<button @click.prevent="deletePost(`${post.id}`)" class="btn btn-sm btn-danger">DELETE</button>
Setelah itu, kita melakukan import adapter dari Inertia.js, yang mana akan kita manfaatkan untuk proses Http Request ke dalam controller nantinya.
import { Inertia } from '@inertiajs/inertia'
Kemudian kita mendefinisikan sebuah Composition API menggunakan method setup.
setup() {
//...
}
Di dalam Composition API, kita membuat sebuah function yang bernama deletePost, method inilah yang akan dieksekusi saat button delete di klik.
//method deletePost
function deletePost(id) {
//...
}
Di dalam method tersebut kita menggunakan adapter dari Inertia dengan method delete dan kita arahkan ke dalam endpoint /posts/:id.
Inertia.delete(`/posts/${id}`)
Dan agar function kita dapat digunakan di dalam template, maka kita perlu melakukan return.
return {
deletePost
}
Langkah 3 - Compiling Assets dan Menjalankan Project
Sekarang, kita akan lanjutkan untuk melakukan coompiling assetsnya terlebih dahulu, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
Jika proses compiling selesai, silahkan reload halaman index posts dan jikaa berhasil maka kita akan mendapatkan 1 button baru dengan nama DELETE.
Silahkan klik button DELETE tersebut dan jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Sampai disini pembahasan kita tentang Laravel dan Inertia.js, jika ada problem saat mengikuti langkah-langkahnya silahkan bisa bertanya melalui kolom komentar yang ada di setiap artikel, atau juga bisa bertanya melalui group telegram dari SantriKoding.
SOURCE CODE : https://github.com/SantriKoding-com/CRUD-Laravel-Inertia.js
Terima Kasih