Panduan praktis dan terstruktur mengenai panduan crud laravel 8 dengan tailwind css: menampilkan data dari database (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 Crud Laravel 8 Dengan Tailwind Css: Menampilkan Data Dari Database (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 Illuminate\Support\Facades\Storage;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
$posts = Post::latest()->when(request()->search, function($posts) {
$posts = $posts->where('title', 'like', '%'. request()->search . '%');
})->paginate(5);
return view('post.index', compact('posts'));
}
}Tahap 3: Penulisan Kode & Konfigurasi
use App\Models\Post;Tahap 4: Penulisan Kode & Konfigurasi
use Illuminate\Http\Request;Tahap 5: Penulisan Kode & Konfigurasi
use Illuminate\Support\Facades\Storage;Tahap 6: Penulisan Kode & Konfigurasi
$posts = Post::latest()->when(request()->search, function($posts) {
$posts = $posts->where('title', 'like', '%'. request()->search . '%');
})->paginate(5);Tahap 7: Penulisan Kode & Konfigurasi
return view('post.index', compact('posts'));Tahap 8: Penulisan Kode & Konfigurasi
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\Route;
Route::get('/', function() {
return view('welcome');
});
Route::resource('post', PostController::class);Tahap 9: Penulisan Kode & Konfigurasi
namespace App\Http\Controllers;Tahap 10: Penulisan Kode & Konfigurasi
Route::resource('post', PostController::class);Tahap 11: Penulisan Kode & Konfigurasi
php artisan route:listTahap 12: Penulisan Kode & Konfigurasi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ $title }}</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
</head>
<body class="bg-gray-400">
<!-- mian content -->
@yield('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>
</body>
</html>Tahap 13: Penulisan Kode & Konfigurasi
<link rel="stylesheet" href="{{ asset('css/app.css') }}">Tahap 14: Penulisan Kode & Konfigurasi
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">Tahap 15: Penulisan Kode & Konfigurasi
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js">Tahap 16: Penulisan Kode & Konfigurasi
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>Tahap 17: Penulisan Kode & Konfigurasi
@yield('content')Tahap 18: Penulisan Kode & Konfigurasi
@extends('layouts.app', ['title' => 'Data Posts'])
@section('content')
<div class="container mx-auto mt-10 mb-10">
<div class="bg-white p-5 rounded shadow-sm">
<div class="grid grid-cols-8 gap-4 mb-4">
<div class="col-span-1 mt-2">
<a href="{{ route('post.create') }}"
class="w-full bg-indigo-500 text-white p-3 rounded shadow-sm focus:outline-none hover:bg-indigo-700">TAMBAH
POST</a>
</div>
<div class="col-span-7">
<form action="{{ route('post.index') }}" method="GET">
<input type="text" name="search"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white"
placeholder="ketik judul post dan enter">
</form>
</div>
</div>
<table class="min-w-full table-auto">
<thead class="justify-between">
<tr class="bg-indigo-500 w-full">
<th class="px-16 py-2">
<span class="text-white">GAMBAR</span>
</th>
<th class="px-16 py-2 text-left">
<span class="text-white">JUDUL</span>
</th>
<th class="px-16 py-2 text-left">
<span class="text-white">CONTENT</span>
</th>
<th class="px-16 py-2">
<span class="text-white">AKSI</span>
</th>
</tr>
</thead>
<tbody class="bg-gray-200">
@forelse($posts as $post)
<tr class="bg-white border-2 border-gray-200">
<td class="px-16 py-2">
<img src="{{ Storage::url('public/posts/'.$post->image) }}" class="w-48 rounded-md">
</td>
<td class="px-16 py-2">
{{ $post->title }}
</td>
<td class="px-16 py-2">
{!! $post->content !!}
</td>
<td class="px-10 py-2 text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('post.destroy', $post->id) }}" method="POST">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:border-indigo-700 text-xs focus:outline-none mr-2"><a href="{{ route('post.edit', $post->id) }}">EDIT</a></button>
@csrf
@method('DELETE')
<button type="submit" class="bg-red-500 text-white px-4 py-2 rounded hover:border-red-700 text-xs focus:outline-none"> HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="bg-red-500 text-white p-3 rounded shadow-sm mb-3">
Data Belum Tersedia!
</div>
@endforelse
</tbody>
</table>
<div class="mt-2">
{{ $posts->links('vendor.pagination.tailwind') }}
</div>
</div>
</div>
@endsectionTahap 19: Penulisan Kode & Konfigurasi
@forelse ($posts as $post)
//perulangan data post
@empty
<div class="bg-red-500 text-white p-3 rounded shadow-sm mb-3">
Data Belum Tersedia!
</div>
@endforelseTahap 20: Penulisan Kode & Konfigurasi
<img src="{{ Storage::url('public/posts/'.$post->image) }}" class="w-48 rounded-md">Tahap 21: Penulisan Kode & Konfigurasi
{{ $posts->links('vendor.pagination.tailwind') }}Tahap 22: Penulisan Kode & Konfigurasi
php artisan vendor:publish --tag=laravel-pagination
💡 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!
