Pagination dan Tambah Data Tanpa Reload dengan Laravel Livewire

Pagination dan Tambah Data Tanpa Reload dengan Laravel Livewire

Admin
Admin・ 2 Juni 2021
13 min read ・ 221 views
Series: Laravel Livewire

Pagination & Tambah Data Laravel Livewire - Melanjutkan artikel-artikel sebelumnya tentang laravel livewire, di artikel ini saya akan membagikan tutorial bagaimana cara membuat pagination dan tambah data tanpa reload dengan laravel 8 livewire. Di percobaan ini, kita masih tetap akan menggunakan projek yang sebelumnya.

Baca: Cara Mudah Membuat Live Search dengan Laravel Livewire

Pendahuluan

Jika pada artikel-artikel sebelumnya kita sudah berhasil menampilkan data post dengan tampilan seperti facebook atau twitter dengan load more on scroll atau infinite scroll, maka di artikel ini kita akan coba menampilkan data dengan pagination serta membuat fitur tambah data tanpa reload. Pada artikel ini kita asumsikan bahwa kita sedang membuat fitur create post untuk produksi konten.

Mulai Koding

Baiklah mari kita mulai langsung ke koding dengan membuka kembali projek laravel livewire kita sebelumnya.

Tambah Route Baru

Route::get('posts', function() {
    return view('post-index');
});

Pertama kita harus mendaftarkan route baru untuk manage posts. Route yang akan kita buat ini adalah route posts yang akan kita arahkan ke view post-index. Silahkan copy sebaris kode route di atas lalu paste di file routes/web.php kalian.

Buat File post-index.blade.php

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <title>Laravel Multi Bahasa</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Bisabos.com</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/posts">Posts</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row pt-5">
                <div class="text-center pb-3">
                    <h1>Posts Data</h1>
                </div>
            <livewire:post-index>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        @livewireScripts
    </body>
</html>

Karena di langkah pertama tadi kita sudah mendaftarkan route posts dan kita arahkan ke file view post-index.blade.php, jadi di langkah kedua ini kita akan membuat file view baru dengan nama tersebut di resources/views. Silahkan buat file post-index.blade.php, kemudian copy kode di atas dan paste di file post-index.blade.php yang baru saja dibuat. Jika kita lihat pada kode di atas, saya sudah menyertakan juga livewire component yang kita arahkan ke post-index dan livewire scripts. Pada langkah selanjutnya kita akan membuat livewire components untuk post-index.

Dan tambahan, silahkan tambahkan juga nav-link yang mengarah ke route /posts di file welcome.blade.php. Karena pada latihan ini, saya sengaja tidak memisahkan header sebagai layouts.

Buat Livewire Components

php artisan livewire:make PostIndex

Kemudian kita akan membuat livewire component PostIndex, silahkan jalankan perintah seperti di atas pada terminal. 

CLASS: app/Http/Livewire//PostIndex.php
VIEW:  resources\views/livewire/post-index.blade.php

Dengan menjalankan perintah tersebut akan membuatkan kita livewire components diantaranya class PostIndex yang terdapat pada direktori app/Http/Livewire/PostIndex.php dan component view yang terdapat pada resources/views/livewire/post-index.blade.php

Edit Livewire/PostIndex.php

<?php

namespace App\Http\Livewire;

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

class PostIndex extends Component
{
    public function render()
    {
        $posts = Post::latest()->paginate(10);
        return view('livewire.post-index', ['posts' => $posts]);
    }
} 

Sekarang, silahkan untuk membuka file app/Http/Livewire/PostIndex.php lalu sesuaikan kode yang ada dengan kode seperti di atas. Dengan kode tersebut kita akan me-render Post untuk menampilkan semua datanya dengan paginate 10 dan me-return view ke livewire.post-index dan tidak lupa juga untuk import model Post dengan use App\Models\Post;

Edit Livewire/post-index.blade.php

 <div class="pt-3">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Title</th>
        <th scope="col">Desc</th>
      </tr>
    </thead>
    <tbody>
        @php
            $no = 0;
        @endphp
     @foreach ($posts as $post)
     <tr>
        <th scope="row">{{ ++$no }}</th>
        <td>{{ $post->title }}</td>
        <td>{{ Str::limit( strip_tags( $post->desc ), 100 ) }}</td>
      </tr>
     @endforeach
    </tbody>
  </table>
  {{ $posts->links() }}
</div>

Sekarang kita masuk ke file resources/views/livewire/post-index.blade.php kemudian copy semua kode di atas lalu paste di file tersebut. Dengan kode di atas kita akan menampilkan semua data posts dengan perulangan foreach dan menampilkan pagination dengan {{$posts->links()}}. Nah, sekarang silahkan coba buka kembali projek livewire kita di browser.

pagination bootstrap laravel tidak rapi

Jika nanti tampilan pagination kita tidak rapi atau berantakan seperti ini, teman-teman bisa masuk ke app/Http/Livewire/PostIndex.php.

protected $paginationTheme = 'bootstrap';

Tambahkan property seperti di atas karena seperti laravel, tampilan pagination default Livewire juga menggunakan tailwind untuk styling. Jika kita menggunakan bootstrap dalam aplikasi atau website kita, kita dapat mengaktifkan tema bootstrap untuk tampilan pagination menggunakan property $paginationTheme pada component kita.

Nah, sekarang silahkan coba buka browser kembali maka tampilannya sudah kembali rapi. Sampai disini kita sudah berhasil menampilkan data posts pada table dan sudah menggunakan pagination dari laravel. Selanjutnya kita akan coba terlebih dahulu untuk membuat pagination tanpa reload saat berpindah halaman dengan livewire.

Laravel Livewire Pagination

Untuk membuat pagination tanpa reload dengan livewire sangat mudah sekali, kita hanya perlu menggunakan traits WithPagination yang sudah disediakan oleh Livewire.

<?php

namespace App\Http\Livewire;

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


class PostIndex extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';

    public function render()
    {
        $posts = Post::latest()->paginate(10);
        return view('livewire.post-index', ['posts' => $posts]);
    }
}

Sehingga untuk sekarang ini, Secara keseluruhan kode yang ada pada class component PostIndex akan seperti kode di atas.

doc: Livewire Pagination

Tambah Data Tanpa Reload Livewire

php artisan livewire:make PostCreate

Untuk mulai membuat fitur tambah data tanpa reload dengan laravel livewire, mari kita buat livewire component lagi dengan menjalankan perintah seperti di atas.

CLASS: app/Http/Livewire//PostCreate.php
VIEW:  resources\views/livewire/post-create.blade.php

Dengan perintah tersebut akan membuatkan kita livewire component diantaranya adalah Class yang terletak di app/Http/Livewire/PostCreate.php dan View yang terletak di resources/views/livewire/post-create.blade.php

Edit Livewire/post-create.blade.php

<form wire:submit.prevent="postCreate">
    <div class="mb-3">
      <label for="title" class="form-label">Title</label>
      <input type="text" name="title" wire:model="title" class="form-control" id="title">
    </div>
    <div class="mb-3">
      <label for="desc" class="form-label">Desc</label>
      <textarea name="desc" wire:model="desc" class="form-control" id="desc" cols="30" rows="10"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
</form>

Setelah component sudah dibuat, sekarang kita coba masuk ke file resources/views/livewire/post-create.blade.php dan menyesuaikan kode yang ada dengan kode seperti di atas. Untuk membuat tambah data tanpa reload dengan livewire, pada form kita tidak akan mengirim action ke route tapi kita akan memakai prevent="postCreate" sata submit. Artinya, saat kita input data lalu kita submit, maka form akan mengirimkannya ke property postCreate yang akan kita buat di langkah selanjutnya. Kemudian pada setipa element input kita akan memberinya wire:model="title" dan wire:model="desc" untuk menandai bahwa inputan pada form input tersebut untuk data title dan desc.

Edit Livewire/PostCreate.php

<?php

namespace App\Http\Livewire;

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

class PostCreate extends Component
{
    public $title;
    public $desc;

    public function postCreate()
    {
        Post::create([
            'title' => $this->title,
            'slug' => \Str::slug($this->title),
            'desc' => $this->desc
            ]);

        $this->emit('postCreated');

        $this->title = '';
        $this->desc = '';
    }

    public function render()
    {
        return view('livewire.post-create');
    }
}

Kita masuk ke file app/Http/Livewire/PostCreate.php, disini kita akan membuat property postCreate untuk menangkap inputan dan memasukkannya ke tabel posts. Tapi sebelumnya jangan lupa juga untuk membuat property public $title dan public $desc, pastikan nama property tersebut sama dengan wire:model yang sudah kita buat pada masing-masing form input di file livewire/post-create.blade.php tadi. Kemudian setelah memasukkan data inputan ke tabel posts dengan Post::create, kita akan membuat juga $this->emit('postCreated');. Apa fungsinya ? fungsinya untuk me-triger even yang akan kita kirimkan nantinya ke PostIndex.php. Kita buat emit seperti ini agar ketika kita submit, data tersebut langsung muncul di tabel posts. Kemudian setelah submit, kita ingin form input title dan desc kosong kembali. Untuk itu, setelah emit gunakan $this->title = ' '; dan $this->desc = ' ';

Edit PostIndex.php

protected $listeners = [
        'postCreated',
    ];

    public function postCreated()
    {

    }

Sekarang kita masuk lagi ke file PostIndex.php. Disini kita akan membuat property baru yaitu listener untuk menangkap emit yang dikirimkan dari PostCreate.php tadi. Copy kode di atas, lalu tambahkan di file PostIndex.php.

Edit views/post-index.blade.php

<livewire:post-create>

Hampir selesai. Sekarang kita masuk lagi ke file resources/views/post-index.blade.php untuk menambahkan livewire component yang sudah kita buat sebelumnya yaitu post-create. Tambahkan kode di atas tepat di atas <livewire:post-index>.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <title>Laravel Multi Bahasa</title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Bisabos.com</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/posts">Posts</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row pt-5">
                <div class="text-center pb-3">
                    <h1>Posts Data</h1>
                </div>
            <livewire:post-create>
            <livewire:post-index>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        @livewireScripts
    </body>
</html>

Sehingga sekarang secara keseluruhan file yang ada di resources/views/post-index.blade.php kita akan seperti kode di atas.

Kesimpulan

Artikel yang telah membahas bagaimana cara membuat pagination dan tambah data tanpa reload ini telah menambah koleksi artikel tentang livewire. Disini kita sudah sama-sama belajar bagaimana cara membuat pagination tanpa reload, bagaimana cara menggunakan tema bootstrap untuk pagination livewire, bagaimana cara membuat tambah data tanpa reload dengan livewire, bagaimana penggunaan wire:model, listen dan lain-lain. Dapat kita simpulkan, untuk membuat pagination dengan livewire tanpa reload sangat mudah sekali, kita bisa menggunakan resources yang sudah disediakan oleh livewire.

Sekian artikel kali ini, jika ada kritik, saran atau apapun itu yang ingin disampaikan, silahkan tulis komentar pada form komentar di bawah ini. Dan jika teman-teman mempunyai cara lain untuk membuat pagination dan tambah data tanpa reload menggunakan laravel livewire bisa juga di share dengan komentar pada form komentar di bawah ini. See you

 

Work illustrations by Storyset

Tinggalkan Komentar
Loading Comments