Tutorial CRUD Laravel Livewire SPA #6 : Menampilkan Data Dari Database


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

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


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

Buy me a coffeeBuy me a coffee
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR