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


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial CRUD Laravel Livewire SPA #6 : Menampilkan Data Dari Database

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
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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