Pada materi kali ini, teman-teman akan membuat page component show yang berfungsi untuk menampilkan detail dari satu data post.

Halaman ini nantinya akan diakses ketika user mengklik tombol “Read More” pada halaman home (/), sehingga setiap post bisa dibuka secara detail di halaman tersendiri.

Karena kita menggunakan Livewire 4, maka:

• Tidak membutuhkan controller
• Tidak membutuhkan file Blade terpisah
• Semua logika dan tampilan berada dalam satu file (Single File Component)

Membuat Show Page Component

Pastikan teman-teman masih berada di direktori root project Laravel, lalu jalankan perintah berikut:

php artisan make:livewire pages::home.show

Penjelasan Perintah

Perintah di atas memiliki arti:

• make:livewire Digunakan untuk membuat komponen Livewire baru
• pages::home.show Menandakan bahwa:
  • Komponen berada di folder pages/home
  • Nama file component adalah show
  • Komponen ini digunakan sebagai halaman detail (detail page)

Dengan struktur ini, Livewire 4 otomatis membuat Single File Component.

Output yang Dihasilkan

Jika perintah berhasil dijalankan, maka akan muncul pesan seperti berikut:

INFO  Livewire component 
[C:\Users\LagiKoding\Desktop\simple-livewire4\resources\views/pages/home/⚡show.blade.php] 
created successfully.

Apa Artinya?

Pesan ini menandakan bahwa:

• File page component show berhasil dibuat
• Lokasi file berada di:

resources/views/pages/home/⚡show.blade.php

Silakan buka file tersebut kemudian ubah secara keseluruhan menjadi seperti berikut ini:

<?php

use App\Models\Post;
use Livewire\Component;

new class extends Component
{
    public Post $post;

    public function mount($id)
    {
        $this->post = Post::findOrFail($id);
    }

    public function render()
    {
        return $this->view()
            ->layout('layouts::app')
            ->title($this->post->title);
    }
};
?>

<div class="max-w-4xl mx-auto px-4 py-10">

    {{-- Back --}}
    <a href="/" wire:navigate
       class="inline-block mb-6 text-sm text-gray-600 hover:text-indigo-600">
        ← Back to Home
    </a>

    <article class="bg-white rounded-xl shadow overflow-hidden">

        {{-- Image --}}
        @if ($post->image)
            <img
                src="{{ asset('storage/posts/' . $post->image) }}"
                alt="{{ $post->title }}"
                class="w-full h-[420px] object-cover">
        @endif

        {{-- Content --}}
        <div class="p-6 md:p-8">
            <h1 class="text-3xl font-bold text-gray-800 mb-3">
                {{ $post->title }}
            </h1>

            <p class="text-sm text-gray-400 mb-6">
                Diposting {{ $post->created_at->diffForHumans() }}
            </p>

            <div class="prose max-w-none prose-indigo">
                {!! $post->content !!}
            </div>
        </div>

    </article>
</div>

1. Bagian Class Component (Logika)

Bagian paling atas file ini berisi class Livewire, yang bertugas mengambil data post berdasarkan parameter URL.

Import Class

use App\Models\Post;
use Livewire\Component;

Penjelasan singkat:

• Post Digunakan untuk mengambil data dari tabel posts
• Component Class utama Livewire

Properti $post

public Post $post;

Artinya:

• Kita menyiapkan properti $post
• Tipe datanya adalah model Post
• Properti ini akan digunakan di class dan view

Method mount()

public function mount($id)
{
    $this->post = Post::findOrFail($id);
}

Penjelasan:

• mount() dijalankan saat page pertama kali diakses
• $id diambil dari URL
• findOrFail($id):
  • Mencari data post berdasarkan id
  • Jika tidak ditemukan → otomatis tampil halaman 404

Dengan cara ini, setiap URL seperti:

/posts/1
/posts/5
/posts/10

akan menampilkan data post yang berbeda.

Method render()

public function render()
{
    return $this->view()
        ->layout('layouts::app')
        ->title($this->post->title);
}

Artinya:

• Menggunakan layout utama layouts::app
• Judul halaman (<title>) akan otomatis mengikuti judul post

Ini membuat halaman lebih SEO friendly dan profesional.

2. Bagian Tampilan (Blade View)

Setelah penutup ?>, kita masuk ke tampilan HTML + Tailwind.

Tombol Back ke Home

<a href="/" wire:navigate>
    ← Back to Home
</a>

Fungsi:

• Kembali ke halaman home (/)
• wire:navigate memastikan navigasi tetap tanpa reload halaman

Card Artikel

<article class="bg-white rounded-xl shadow overflow-hidden">

Digunakan sebagai container utama untuk detail post.

Menampilkan Gambar Post

@if ($post->image)
    <img
        src="{{ asset('storage/posts/' . $post->image) }}">
@endif

Artinya:

• Jika post memiliki image
• Maka tampilkan gambar dari folder storage/posts
• Jika tidak ada image → bagian ini dilewati

Judul & Waktu Posting

<h1>{{ $post->title }}</h1>

<p>
    Diposting {{ $post->created_at->diffForHumans() }}
</p>

• Judul post ditampilkan besar dan tegas

• Waktu posting menggunakan:

  diffForHumans()
  

  sehingga tampil lebih natural, seperti:

  • “2 jam yang lalu”
  • “3 hari yang lalu”

Konten Post

<div class="prose max-w-none prose-indigo">
    {!! $post->content !!}
</div>

Penjelasan:

• prose → styling khusus untuk konten artikel (Tailwind Typography)
• !! !! → konten ditampilkan sebagai HTML
• Cocok untuk konten panjang seperti artikel atau blog post

Konfigurasi Rute

Langkah berikutnya adalah menghubungkan Home Page Component Livewire ke sistem routing Laravel.

Silakan teman-teman buka file:

routes/web.php

Lalu sesuaikan menjadi seperti berikut:

<?php

use Illuminate\Support\Facades\Route;

Route::livewire('/', 'pages::home.index');
Route::livewire('/posts/{id}', 'pages::home.show')->name('home.show');

Route::livewire('/posts', 'pages::post.index');
Route::livewire('/posts/create', 'pages::post.create');
Route::livewire('/posts/{post}/edit', 'pages::post.edit');

Penjelasan Route Show Post

Perhatikan baris route berikut pada file routes/web.php:

Route::livewire('/posts/{id}', 'pages::home.show')->name('home.show');

Apa Fungsi Route Ini?

Route ini berfungsi untuk menampilkan detail satu post berdasarkan data yang diklik dari halaman Home.

Dengan route ini, setiap post memiliki halaman detail sendiri.

Contoh URL yang dihasilkan:

/posts/1
/posts/2
/posts/10

Angka di belakang /posts/ adalah ID post yang akan ditampilkan.

Penjelasan Setiap Bagian

1. URL /posts/{id}

/posts/{id}

Artinya:

• {id} adalah parameter dinamis
• Nilainya akan diambil dari URL
• Contoh:
  • /posts/5 → {id} bernilai 5
  • /posts/12 → {id} bernilai 12

Nilai ini nanti dikirim ke Livewire component.

2. Page Component pages::home.show

'pages::home.show'

Artinya:

Route ini akan menampilkan Livewire Page Component yang berada di:

resources/views/pages/home/⚡show.blade.php

Component inilah yang:

• Menerima parameter {id}
• Mengambil data post dari database
• Menampilkan detail post (judul, gambar, konten, dll)

3. Pengiriman Data ke Component

Karena route menggunakan {id}, maka Livewire otomatis akan mengirimkannya ke method:

public function mount($id)

Di dalam component show.blade.php.

Apa yang Terjadi Saat URL / Diakses?

Ketika teman-teman membuka alamat:

http://127.0.0.1:8000/posts/{id_post}

Maka akan terlihat seperti berikut ini:

Baik teman-teman, sampai pada materi kali ini kita telah berhasil membangun aplikasi sederhana menggunakan Livewire 4 dengan konsep Single File Component.

Melalui pendekatan ini, kita belajar bagaimana:

• Membuat page component tanpa controller
• Menggabungkan class component dan Blade dalam satu file
• Mengelola CRUD Post (create, read, update)
• Menerapkan routing Livewire secara langsung
• Menampilkan data dengan tampilan modern dan responsif

Konsep Single File Component di Livewire 4 membuat proses development menjadi:

• Lebih ringkas
• Lebih terstruktur
• Lebih mudah dipahami, terutama untuk aplikasi skala kecil hingga menengah.

Source Code (Download)

Repository lengkap bisa diakses melalui GitHub:

https://github.com/kurniaandi/Tutorial-Livewire-4-dan-laravel-12