Halo semua,
Dalam tutorial ini kita akan membahas demonstrasi laravel livewire memuat lebih banyak contoh data. saya ingin berbagi dengan Anda laravel livewire onscroll memuat lebih banyak data. Anda akan belajar memuat lebih banyak data secara otomatis scroll di halaman laravel secara langsung. mari kita bahas tentang laravel 8 livewire load lebih banyak contoh. Anda akan melakukan hal-hal berikut untuk memuat lebih banyak data pada scroll halaman di laravel livewire.
Dalam tutorial ini, kita akan membuat simple load lebih banyak data pada contoh scroll menggunakan laravel livewire. Anda dapat menggunakan laravel livewire memuat lebih banyak dengan versi laravel 6, laravel 7 dan laravel 8.
Di sini, saya akan memberi Anda contoh yang sangat sederhana untuk membuat memuat lebih banyak data pada contoh acara window scroll dengan laravel. kami hanya akan menggunakan paket livewire / livewire.
Jadi, mari ikuti langkah berikut dan Anda akan mendapatkan tata letak di bawah ini:
Langkah 1: Instal Laravel 8
pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:
composer create-project --prefer-dist laravel/laravel blogLangkah 2: Buat Data Dummy menggunakan Tinker Factory
Anda perlu menjalankan perintah berikut untuk membuat data dummy di tabel users Anda. ayo jalankan kedua perintah:
php artisan tinker
User::factory()->count(100)->create()Langkah 3: Instal Livewire
Sekarang di langkah ini, kita hanya akan menginstal livewire ke aplikasi laravel 8 kita menggunakan perintah di bawah ini:
composer require livewire/livewireLangkah 4: Buat Komponen
Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah ini untuk membuat memuat lebih banyak komponen.
php artisan make:livewire load-more-userSekarang mereka membuat files di kedua path:
app/Http/Livewire/LoadMoreUser.php
resources/views/livewire/load-more-user.blade.phpSekarang kedua file tersebut akan kami perbarui seperti di bawah untuk formulir contact us.
app/Http/Livewire/LoadMoreUser.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User;
class LoadMoreUser extends Component
{
public $perPage = 15;
protected $listeners = [
'load-more' => 'loadMore'
];
/**
* Write code on Method
*
* @return response()
*/
public function loadMore()
{
$this->perPage = $this->perPage + 5;
}
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
$users = User::latest()->paginate($this->perPage);
$this->emit('userStore');
return view('livewire.load-more-user', ['users' => $users]);
}
}resources/views/livewire/load-more-user.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>Langkah 5: Buat Route
sekarang kita akan membuat satu route untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:
routes/web.php
Route::get('load-more-user', function () {
return view('default');
});Langkah 6: Buat File View
Di sini, kita akan membuat file blade untuk route memanggil form. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('contact-form'). jadi mari tambahkan.
resources/views/default.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Example - Medikre.com</title>
@livewireStyles
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
Laravel Livewire Example - ItSolutionStuff.com
</div>
<div class="card-body">
@livewire('load-more-user')
</div>
</div>
</div>
</body>
@livewireScripts
<script type="text/javascript">
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
window.livewire.emit('load-more');
}
};
</script>
</html>Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:
php artisan serveBuka URL di bawah:
http://localhost:8000/load-more-userSaya harap ini dapat membantu Anda ...
load more scroll page livewire laravel laravel livewire-laravel
andriajah