ahmadajah03 Sat Aug 2020 1 year ago

Contoh Page Scroll Load More Laravel Livewire

Halo teman-teman,

Di blog ini, saya akan menunjukkan kepada Anda cara memuat lebih banyak data dengan scroll menggunakan aplikasi laravel livewire. Kami akan menunjukkan page scroll dengan memuat data di laravel livewire. Dalam artikel ini, saya akan belajar Anda memuat lebih banyak data di laravel livewire. Anda dapat page scroll kemudian memuat lebih banyak data di livewire pada saat itu menggunakan contoh di bawah ini.

Livewire adalah full stack framework untuk Laravel yang membuat pembuatan antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel. Livewire hanya mengandalkan permintaan AJAX untuk melakukan semua komunikasi servernya.

Di sini saya akan memberikan contoh lengkap untuk memuat lebih banyak data livewire di laravel, Jadi Mari kita ikuti langkah di bawah ini.

Langkah 1: Instal Aplikasi Laravel

Pada langkah pertama, kita perlu mendapatkan aplikasi versi laravel menggunakan perintah di bawah ini. Jadi mari kita buka terminal dan jalankan perintah di bawah ini.

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Konfigurasi Database

Setelah berhasil menginstal aplikasi laravel kemudian mengkonfigurasi pengaturan database. Kami akan membuka file ".env" dan mengubah nama database, username dan password di file env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Langkah 3: Instal Livewire

Pada langkah ini, Anda cukup menginstal livewire ke aplikasi laravel kami menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang, Anda dapat membuat komponen livewire menggunakan perintah di bawah, Jadi mari kita jalankan perintah di bawah ini untuk membuat komponen pengguna:

php artisan make:livewire users

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php

Sekarang file pertama kita akan perbarui seperti di bawah untuk file Users.php.

app/Http/Livewire/Users.php

 

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\User;

class Users extends Component
{
    public $perPage = 8;
    protected $listeners = [
        'load-more' => 'loadMore'
    ];

    public function loadMore()
    {
        $this->perPage = $this->perPage + 5;
    }

    public function render()
    {
        $users = User::latest()->paginate($this->perPage);
        $this->emit('userStore');
        return view('livewire.users-list',['users' => $users]);
    }
}

Langkah 5: Tambahkan Route

Sekarang kita perlu menambahkan route untuk list users di aplikasi laravel. jadi buka file "routes/web.php" Anda dan tambahkan route berikut.

routes/web.php

Route::view('users','livewire.home');

Langkah 6: Buat View

Di sini, kami akan membuat file blade untuk menampilkan daftar user. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('users'). jadi mari tambahkan.

resources/views/livewire/users.blade.php

<div>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

resources/views/livewire/home.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                      <h2>Laravel Livewire Load More with Scroll - Medikre.com</h2>
                    </div>
                    <div class="card-body">
                        @if (session()->has('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif
                        @livewire('users')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
    <script type="text/javascript">
        window.onscroll = function(ev) {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                window.livewire.emit('load-more');
            }
        };
   </script>
</body>
</html>

Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/users

Itu akan membantumu..

livewire laravel page scroll