Codelapan
  • Home
  • Bootstrap
  • Codeigniter
  • Katalon
  • Laravel
    • Home
    Topics
    Laravel

    Laravel
    Livewire

    Livewire
    Software Testing

    Testing
    bootstrap

    Bootstrap
    source code

    Code
    HTML

    HTML
    CSS

    CSS
    Javascript

    Javascript
    jQuery

    jQuery

    Codelapan
    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 ・ 3911 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

    Table of Contents

    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/bootstrap@5.0.1/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/bootstrap@5.0.1/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/bootstrap@5.0.1/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/bootstrap@5.0.1/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

    Laravel Package Livewire
    Artikel Sebelumnya

    Cara Mudah Membuat Live Search dengan Laravel Live...
    Artikel Selanjutnya

    Integrasi Google Analytics dengan Laravel 8
    Tinggalkan Komentar
    Loading Comments
    Favorit See All