Panduan praktis dan terstruktur mengenai panduan laravel splade: menampilkan data pada view (part 4) 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: Menampilkan Data Pada View (Part 4) 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 artisan make:controller PostControllerTahap 2: Penulisan Kode & Konfigurasi
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
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')
]);
}
}Tahap 3: Penulisan Kode & Konfigurasi
use App\Models\Post;Tahap 4: Penulisan Kode & Konfigurasi
use ProtoneMedia\Splade\SpladeTable;Tahap 5: Penulisan Kode & Konfigurasi
/**
* display all post data
*/
public function index()
{
// masukan kode disini...
}Tahap 6: Penulisan Kode & Konfigurasi
// get all post data
$posts = Post::latest()->paginate(7);Tahap 7: Penulisan Kode & Konfigurasi
// render view
return view('posts.index', [
'posts' => SpladeTable::for($posts)
->column('image')
->column('title')
->column('content')
->column('action')
]);Tahap 8: Penulisan Kode & Konfigurasi
<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::middleware(['splade'])->group(function () {
Route::get('/', fn () => view('home'))->name('home');
Route::get('/docs', fn () => view('docs'))->name('docs');
// Posts routes
Route::resource('/posts', PostController::class);
// Registers routes to support the interactive components...
Route::spladeWithVueBridge();
// Registers routes to support password confirmation in Form and Link components...
Route::spladePasswordConfirmation();
// Registers routes to support Table Bulk Actions and Exports...
Route::spladeTable();
// Registers routes to support async File Uploads with Filepond...
Route::spladeUploads();
});Tahap 9: Penulisan Kode & Konfigurasi
php artisan r:l --name=postsTahap 10: 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>
</div>
@endcell
</x-splade-table>
</x-panel>
</x-layout>Tahap 11: Penulisan Kode & Konfigurasi
<x-layout>
// masukan kode disini...
</x-layout>Tahap 12: Penulisan Kode & Konfigurasi
<x-slot name="header">
{{ __('Posts') }}
</x-slot>Tahap 13: Penulisan Kode & Konfigurasi
<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>Tahap 14: Penulisan Kode & Konfigurasi
<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>
</x-splade-table>Tahap 15: Penulisan Kode & Konfigurasi
@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>
</div>
@endcellTahap 16: Penulisan Kode & Konfigurasi
<x-splade-data default="{ open: false }">
<nav class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('home') }}">
<x-application-mark class="block h-9 w-auto" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
{{ __('Home') }}
</x-nav-link>
<x-nav-link href="{{ route('docs') }}" :active="request()->routeIs('docs')">
{{ __('Documentation') }}
</x-nav-link>
<x-nav-link href="{{ route('posts.index') }}" :active="request()->routeIs('posts*')">
{{ __('Posts') }}
</x-nav-link>
</div>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="data.open = ! data.open"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path v-bind:class="{'hidden': data.open, 'inline-flex': ! data.open }"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
<path v-bind:class="{'hidden': ! data.open, 'inline-flex': data.open }"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Responsive Navigation Menu -->
<div v-bind:class="{'block': data.open, 'hidden': ! data.open }" class="sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
{{ __('Home') }}
</x-responsive-nav-link>
<x-responsive-nav-link href="{{ route('docs') }}" :active="request()->routeIs('docs')">
{{ __('Documentation') }}
</x-responsive-nav-link>
</div>
</div>
</nav>
</x-splade-data>Tahap 17: Penulisan Kode & Konfigurasi
<x-nav-link href="{{ route('posts.index') }}" :active="request()->routeIs('posts*')">
{{ __('Posts') }}
</x-nav-link>
💡 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!
