- Langkah 1 – Membuat Page Component Livewire
- Langkah 2 - Membuat Route
- Langkah 3 - Uji Coba Menampilkan Data
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah berhasil menginstall dan mengkonfigurasi Livewire 4, serta membuat layout dasar aplikasi yang siap kita gunakan untuk membangun halaman dinamis.
Pada artikel kali ini, kita akan belajar bagaimana cara menampilkan data dari database menggunakan Laravel Livewire 4, yaitu data yang sudah tersimpan di dalam tabel posts. Berbeda dengan versi Livewire sebelumnya, pada Livewire 4 kita akan menggunakan Page Component, sehingga kita tidak lagi membutuhkan controller maupun class component terpisah.
Langkah 1 – Membuat Page Component Livewire
Silahkan teman-teman jalankan perintah berikut di terminal/CMD dan pastikan berada di dalam root project Laravel:
php artisan make:livewire pages::posts.index
Perintah di atas akan menghasilkan sebuah file Page Component:
resources/views/pages/posts/⚡index.blade.php
Pada Livewire 4, file ini berisi logic PHP dan tampilan Blade sekaligus (single file component). Silahkan buka file tersebut, lalu ubah seluruh kodenya menjadi seperti berikut:
resources/views/pages/posts/⚡index.blade.php
<?php
use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;
new class extends Component
{
use WithPagination;
public function render()
{
// Return view with layout and title
return $this->view([
// Get all posts with latest pagination
'posts' => Post::latest()->paginate(5),
])
->layout('layouts::app')
->title('Posts List');
}
};
?>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<!-- flash message -->
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<!-- end flash message -->
<a href="/create" wire:navigate
class="btn btn-md btn-success rounded shadow-sm border-0 mb-3">
ADD NEW POST
</a>
<div class="card border-0 rounded shadow-sm">
<div class="card-body">
<table class="table table-bordered">
<thead class="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style="width: 15%">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($posts as $post)
<tr>
<td class="text-center">
<img src="{{ asset('/storage/posts/'.$post->image) }}"
class="rounded" style="width: 150px">
</td>
<td>{{ $post->title }}</td>
<td>{!! $post->content !!}</td>
<td class="text-center">
<a href="/edit/{{ $post->id }}" wire:navigate
class="btn btn-sm btn-primary">
EDIT
</a>
<button class="btn btn-sm btn-danger">
DELETE
</button>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Post belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $posts->links('vendor.pagination.bootstrap-5') }}
</div>
</div>
</div>
</div>
</div>
Dari penambahan kode di atas, pertama kita import model Post.
use App\Models\Post;
Selanjutnya, kita juga menggunakan trait WithPagination dari Livewire.
use Livewire\WithPagination;
Trait ini digunakan agar data yang kita tampilkan dapat dipagination dengan mudah tanpa perlu menulis logika pagination secara manual.
Kemudian pada method render(), kita mengambil data dari tabel posts menggunakan model Post, lalu kita urutkan dari data terbaru dan kita batasi sebanyak 5 data per halaman.
'posts' => Post::latest()->paginate(5),
Data inilah yang nantinya akan kita tampilkan di halaman page component Livewire.
Pada Livewire 4, kita juga bisa langsung menentukan layout dan title halaman dari dalam method render() seperti berikut ini.
->layout('layouts::app')
->title('Posts List');
Dengan cara ini, halaman akan otomatis menggunakan layout layouts::app dan title halaman akan menjadi Posts List.
Kemudian kita juga menambahkan sebuah kondisi yang nanti digunakan untuk menampilkan session flash.
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
Dan untuk menampilkan data, kita menggunakan direktif Blade @forelse yang berfungsi untuk melakukan looping data sekaligus menangani kondisi ketika data masih kosong.
@forelse ($posts as $post)
...
@empty
<div class="alert alert-danger">
Data Post belum Tersedia.
</div>
@endforelse
Jika data posts tersedia di database, maka data akan ditampilkan ke dalam tabel. Namun jika belum ada data sama sekali, maka akan muncul pesan “Data Post belum Tersedia.”.
Pada bagian tabel, kita menampilkan tiga data utama dari tabel posts, yaitu image, title, dan content.
Untuk menampilkan gambar, kita gunakan kode berikut.
<img src="{{ asset('/storage/posts/'.$post->image) }}" class="rounded" style="width: 150px">
Kode di atas akan mengambil gambar dari folder storage/posts. Pastikan sebelumnya kita sudah menjalankan perintah php artisan storage:link agar file gambar bisa diakses dari browser.
Sedangkan untuk menampilkan judul dan konten, kita cukup memanggil property dari object $post.
<td>{{ $post->title }}</td>
<td>{!! $post->content !!}</td>
Khusus untuk content, kita menggunakan {!! !!} agar isi konten yang mengandung HTML bisa dirender dengan benar di browser.
Karena data yang ditampilkan bisa saja cukup banyak, maka kita menggunakan fitur pagination dari Livewire.
Pagination ini berasal dari trait WithPagination yang sebelumnya sudah kita tambahkan di page component. Untuk menampilkannya di view, kita cukup menambahkan kode berikut.
{{ $posts->links('vendor.pagination.bootstrap-5') }}
Dengan menggunakan pagination view Bootstrap 5, tampilan pagination akan langsung menyesuaikan dengan desain UI yang kita gunakan.
Catatan: Jika pagination belum tampil dengan benar, pastikan teman-teman sudah menjalankan perintah berikut:
php artisan vendor:publish --tag=laravel-pagination
Langkah 2 - Membuat Route
Agar page component Livewire bisa diakses melalui web browser, maka kita perlu membuatkan sebuah route. Silahkan teman-teman buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
// posts index
Route::livewire('/', 'pages::posts.index')->name('posts.index');
Di atas, kita membuat route dengan path / dan kita arahkan ke page component pages::posts.index dan kita juga berikan nama untuk route di atas adalah posts.index.
Langkah 3 - Uji Coba Menampilkan Data
Sekarang silahkan teman-teman buka project-nya di http://localhost:8000, jika berhasil maka akan menampilkan hasil seperti berikut ini.
Di atas, keluar pesan Data Posts belum Tersedia., karena memang di dalam database kita belum memiliki data apapun.
Kesimpulan
Pada artikel ini kita telah belajar bagaimana cara menampilkan data dari database menggunakan Laravel Livewire 4, mulai dari membuat component Livewire, mengambil data dari database menggunakan model, menampilkan data di view, hingga mengatur pagination dan routing tanpa menggunakan controller.
Pada artikel selanjutnya, kita akan melanjutkan pembahasan ke tahap berikutnya, yaitu menambahkan data ke database menggunakan Livewire 4
Terima Kasih
SAWERIA
Memuat komentar...