Tutorial CRUD Laravel Livewire SPA #6 : Menampilkan Data Dari Database - Halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bagaimana cara menampilkan data menggunakan component yang sudah kita buat sebelumnya di Laravel Livewire.
Pada proses menampilkan data nanti, kita jua akan mengimplementasikan pagination di Laravel Livewire. Langsung saja kita mulai.
Langkah 1 - Component Post Index
Pertama, silahkan teman-teman buka component Post Index yang sebelumnya sudah kita buat, buka file app/Http/Livewire/Post/Index.php dan ubahlah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Livewire\Post;
use App\Post;
use Livewire\Component;
use Livewire\WithPagination;
class Index extends Component
{
use WithPagination;
public function render()
{
return view('livewire.post.index', [
'posts' => Post::latest()->paginate(5)
]);
}
}
Dari penambahan yang kita lakukan, disini kita menambahkan WithPagination dari Livewire dan kita melakukan render data Post ke dalam view.
Langkah 2 - Menampilkan Data di View
Setelah kita berhasil menambahkan beberapa kode di dalam component, terutama data posts dan pagination, maka sekarang kita akan menampilkan data tersebut di dalam view.
Silahkan teman-teman buka file resources/views/livewire/post/index.php dan ubahlah kodenya menjadi seperti berikut ini :
<div>
<a href="{{ route('post.create') }}" class="btn btn-md btn-success mb-3">TAMBAH POST</a>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">TITLE</th>
<th scope="col">CONTENT</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td>{{ $post->title }}</td>
<td>{{ $post->content }}</td>
<td class="text-center">
<a href="{{ route('post.edit', $post->id) }}" class="btn btn-sm btn-primary">EDIT</a>
<button wire:click="destroy({{ $post->id }})" class="btn btn-sm btn-danger">DELETE</button>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $posts->links() }}
</div>
Dari perubahan kode view index post diatas, kita melakukan sebuah perulangan data & kita juga menambahkan pagination. Dan jika teman-teman perhatikan diatas, untuk menampilkan pagination kita hanya menuliskan kode seperti berikut ini :
{{ $posts->links() }}
Simple bukan ? ?
Langkah 3 - Uji Coba Aplikasi
Setelah semuanya selesai, sekarang kita akan melakukan uji coba aplikasi kita, silahkan teman-teman jalankan aplikasinya dengan perintah :
php artisan serve
Sekarang, silahkan teman-teman buka aplikasinya di http://localhost:8000 maka jika berhasil, kurang lebih tampilannya seperti berikut ini :
SOURCE CODE
Untuk teman-teman yang ingin mengunduh source codenya : https://github.com/maulayyacyber/CRUD-Laravel-Livewire-SPA
KESIMPULAN
Pada tutorial kali ini kita semua telah belajar bagaimana cara menampilkan data di Laravel Liveware & kita juga mengimplementasikan WithPagination di Laravel Livewire.
Jika teman-teman ada pertanyaan atau kendala saat mencoba, silahkan teman-teman bisa bertanya melalui kolom komentar dibawah artikel ini.
Terima Kasih