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 blogLangkah 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_PasswordLangkah 3: Instal Livewire
Pada langkah ini, Anda cukup menginstal livewire ke aplikasi laravel kami menggunakan perintah di bawah ini:
composer require livewire/livewireLangkah 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 usersSekarang mereka membuat fies di kedua path:
app/Http/Livewire/Users.php
resources/views/livewire/users.blade.phpSekarang 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 serveSekarang Anda dapat membuka URL di bawah ini di browser Anda:
http://localhost:8000/usersItu akan membantumu..
livewire laravel page scroll
andriajah