Panduan praktis dan terstruktur mengenai panduan laravel splade: delete data dari database (part 7) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Laravel Splade: Delete Data Dari Database (Part 7) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.
Tahapan Implementasi & Walkthrough Kode
Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:
Tahap 1: Penulisan Kode & Konfigurasi
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use ProtoneMedia\Splade\SpladeTable;
class PostController extends Controller
{
/**
* display all post data
*/
public function index()
{
// get all post data
$posts = Post::latest()->paginate(7);
// render view
return view('posts.index', [
'posts' => SpladeTable::for($posts)
->column('image')
->column('title')
->column('content')
->column('action')
]);
}
/**
* display form create
*/
public function create()
{
// render view
return view('posts.create');
}
/**
* insert new post data
*/
public function store(Request $request)
{
// validate request
$this->validate($request, [
'image' => 'required|image|mimes:jpeg,jpg,png',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);
// upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
// insert new post to db
Post::create([
'title' => $request->title,
'content' => $request->content,
'image' => $image->hashName(),
]);
// render view
return redirect(route('posts.index'));
}
/**
* display form edit
*/
public function edit(Post $post)
{
// render view
return view('posts.edit', [
'post' => $post
]);
}
/**
* update post data by id
*/
public function update(Post $post, Request $request)
{
// validate request
$this->validate($request, [
'image' => 'nullable|image|mimes:jpeg,jpg,png',
'title' => 'required|min:5',
'content' => 'required|min:10'
]);
// update post data by id
$post->update([
'title' => $request->title,
'content' => $request->content,
]);
// check if user upload new image
if($request->file('image')){
// upload image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
// delete old image
Storage::delete('public/posts/'. $post->image);
// update post data image
$post->update([
'image' => $image->hashName(),
]);
}
// render view
return redirect(route('posts.index'));
}
/**
* delete post data by id
*/
public function destroy(Post $post)
{
// delete post image
Storage::delete('public/posts/'. $post->image);
// delete post data by id
$post->delete();
// render view
return back();
}
}Tahap 2: Penulisan Kode & Konfigurasi
/**
* delete post data by id
*/
public function destroy(Post $post)
{
// masukan kode disini...
}Tahap 3: Penulisan Kode & Konfigurasi
//delete post image
Storage::delete('public/posts/'. $post->image);Tahap 4: Penulisan Kode & Konfigurasi
// delete post data by id
$post->delete();Tahap 5: Penulisan Kode & Konfigurasi
// render view
return back();Tahap 6: Penulisan Kode & Konfigurasi
<x-layout>
<x-slot name="header">
{{ __('Posts') }}
</x-slot>
<x-panel>
<!-- btn create -->
<div class="flex">
<Link href="/posts/create"
class="px-4 py-2 bg-gray-100 rounded-md text-sm border flex items-center gap-2 text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path d="M9 12l6 0"></path>
<path d="M12 9l0 6"></path>
</svg>
Add New Post
</Link>
</div>
<!-- table component -->
<x-splade-table :for="$posts">
<x-slot:empty-state>
<div class="flex text-center justify-center text-red-500">There are no items to show</div>
</x-slot>
@cell('image', $posts)
<img src="{{ asset('/storage/posts/' . $posts->image) }}" class="rounded-md w-1/3" />
@endcell
<!-- action button -->
@cell('action', $posts)
<div class="flex gap-2">
<Link href="{{ route('posts.edit', $posts->id) }}"
class="rounded-full p-2 bg-orange-300 text-white hover:bg-orange-400">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit w-5 h-5"
width="24" height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
<path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
<path d="M16 5l3 3"></path>
</svg>
</Link>
<x-splade-form action="{{ route('posts.destroy', $posts->id) }}" confirm="Delete Data"
confirm-text="Are you sure you want to delete your post data?"
confirm-button="Yes, delete everything!" cancel-button="No, I want to stay!" method="delete">
<button type="submit" class="rounded-full p-2 bg-rose-300 text-white hover:bg-rose-400">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash w-5 h-5"
width="24" height="24" viewBox="0 0 24 24" stroke-width="1.2"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 7l16 0"></path>
<path d="M10 11l0 6"></path>
<path d="M14 11l0 6"></path>
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
</svg>
</button>
</x-splade-form>
</div>
@endcell
</x-splade-table>
</x-panel>
</x-layout>Tahap 7: Penulisan Kode & Konfigurasi
<x-splade-form action="{{ route('posts.destroy', $posts->id) }}" confirm="Delete Data"
confirm-text="Are you sure you want to delete your post data?"
confirm-button="Yes, delete everything!" cancel-button="No, I want to stay!" method="delete">
// masukan kode disini...
</x-splade-form>
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
Kesimpulan
Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.
Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!
