Contoh Laravel 9 Livewire Pagination

Artikel ini akan memberikan beberapa contoh paling penting contoh pagination laravel 9 livewire. jika Anda ingin melihat contoh tutorial pagination laravel 9 livewire maka Anda berada di tempat yang tepat. Saya menjelaskan secara sederhana langkah demi langkah pagination dengan laravel 9 livewire. kami akan membantu Anda memberikan contoh pagination livewire laravel 9 tidak berfungsi. Jadi, mari ikuti beberapa langkah untuk membuat contoh pagination pengguna pada contoh livewire laravel 9.

Livewire adalah kerangka kerja full-stack untuk kerangka Laravel yang membuat membangun antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. jika Anda menggunakan livewire dengan laravel maka Anda tidak perlu khawatir tentang menulis kode ajax jquery, livewire akan membantu untuk menulis kode ajax jquery dengan cara yang sangat sederhana menggunakan php. tanpa validasi laravel penyegaran halaman akan berfungsi, formulir akan dikirimkan, dll.

Di sini, saya akan memberikan contoh yang sangat sederhana untuk membuat pagination dengan tabel users dan saya akan menyimpan data tersebut ke database tanpa refresh halaman dan terlalu banyak baris kode dalam file blade. kami hanya akan menggunakan paket livewire/livewire.

Daftar Isi

Langkah 1: Instal Laravel
Langkah 2: Buat Catatan Dummy menggunakan Tinker Factory
Langkah 3: Instal Livewire
Langkah 4: Buat Komponen
Langkah 5: Buat Route
Jalankan Aplikasi Laravel:

Langkah 1: Instal Laravel

Anda perlu menjalankan perintah berikut untuk membuat catatan dummy di tabel pengguna Anda. mari kita jalankan kedua perintah:

composer create-project laravel/laravel example-app

Langkah 2: Buat Catatan Dummy menggunakan Tinker Factory

Anda perlu menjalankan perintah berikut untuk membuat catatan dummy di tabel users Anda. mari kita jalankan kedua perintah:

php artisan tinker
User::factory()->count(100)->create()

Langkah 3: Instal Livewire

sekarang di langkah ini, kita cukup menginstal livewire ke aplikasi laravel kita menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat komponen pagination.

php artisan make:livewire user-pagination

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/UserPagination.php

  

resources/views/livewire/user-pagination.blade.php

Sekarang kedua file tersebut akan kami perbarui seperti di bawah ini untuk formulir hubungi kami.

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
  
class UserPagination extends Component
{
    use WithPagination;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.user-pagination', [
            'users' => User::paginate(10),
        ]);
    }
}

resources/views/livewire/user-pagination.blade.php

<div>
    <table class="table-auto" style="width: 100%;">
      <thead>
        <tr>
          <th class="px-4 py-2">ID</th>
          <th class="px-4 py-2">Name</th>
          <th class="px-4 py-2">Email</th>
        </tr>
      </thead>
      <tbody>
        @foreach ($users as $user)
            <tr>
            <td class="border px-4 py-2">{{ $user->id }}</td>
            <td class="border px-4 py-2">{{ $user->name }}</td>
            <td class="border px-4 py-2">{{ $user->email }}</td>
            </tr>
        @endforeach
      </tbody>
    </table>
  
    {{ $users->links() }}
</div>

Langkah 5: Buat Route

sekarang kita akan membuat satu rute untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:

route/web.php

Route::get('user-pagination', function () {
    return view('default');
});

Langkah 6: Buat View File

di sini, kita akan membuat file blade untuk memanggil route formulir . dalam file ini kita akan menggunakan @livewireStyles , @livewireScripts dan @livewire('contact-form') . jadi mari kita tambahkan.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Medikre.com</title>
    @livewireStyles
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.0/tailwind.min.css" integrity="sha512-wOgO+8E/LgrYRSPtvpNg8fY7vjzlqdsVZ34wYdGtpj/OyVdiw5ustbFnMuCb75X9YdHHsV5vY3eQq3wCE4s5+g==" crossorigin="anonymous" />
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example - Medikre.com
      </div>
      <div class="card-body">
        @livewire('user-pagination')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

Jalankan Aplikasi Laravel:

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Keluaran:

http://localhost:8000/user-pagination

Saya harap ini dapat membantu Anda ...

laravel 9 livewire livewire pagination example laravel 9