- Langkah 1 - Menambahkan Method Destroy
- Langkah 2 - Menambahkan Fitur Delete
- Langkah 3 - Uji Coba Delete Data
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 :
<script setup>
// import layout app
import Layout from '../../Layouts/App.vue'
// import Link
import { Link } from '@inertiajs/vue3';
// import router
import { router } from '@inertiajs/vue3'
// get props "posts" dari controller
defineProps({
posts: Array
});
//method deletePost
function deletePost(id) {
//send data to server
router.delete(`/posts/${id}`)
}
</script>
<template>
<Layout>
<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">
<Link href="/posts/create" class="btn btn-md btn-primary">TAMBAH DATA</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">
<Link :href="`/posts/${post.id}/edit`" class="btn btn-sm btn-primary me-2">EDIT</Link>
<button @click.prevent="deletePost(`${post.id}`)" class="btn btn-sm btn-danger">DELETE</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</Layout>
</template>
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 router dari Inertia.js, yang mana akan kita manfaatkan untuk proses Http Request ke dalam controller nantinya.
// import router
import { router } from '@inertiajs/vue3'
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 router dari Inertia dengan method delete dan kita arahkan ke dalam endpoint /posts/:id.
//send data to server
router.delete(`/posts/${id}`)
Langkah 3 - Uji Coba Delete Data
Sekarang, silahkan reload halaman index posts dan jika 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.
Terima Kasih
Artikel ini dibaca sebanyak 9.243 kali
SAWERIA
Memuat komentar...