Laravel Auto Memuat lebih banyak data pada gulir halaman Tak Terbatas dengan ajax jQuery.
Dalam tutorial ini, kami akan memandu Anda tentang cara membuat pemuatan otomatis lebih banyak data di aplikasi laravel pada gulir halaman menggunakan ajax jQuery.
Jika Anda pernah melihat beberapa situs media sosial atau e-niaga yang menggunakan fungsi Muat Lebih Banyak Data untuk melihat data dinamis.
Fungsionalitas ini memuat data dari database tanpa penyegaran halaman menggunakan AJAX.
Terkadang, Anda perlu memuat lebih banyak data secara otomatis pada gulir halaman tak terhingga di aplikasi laravel.
Jadi, tutorial ini akan membantu Anda tentang cara membuat aplikasi gulir halaman tanpa batas di aplikasi laravel .
Langkah 1 – Instal Aplikasi Laravel
Pada langkah ini, Jalankan perintah berikut di terminal untuk mengunduh atau menginstal aplikasi laravel :
composer create-project --prefer-dist laravel/laravel blog
Langkah 2 – Menghubungkan Aplikasi ke Database
Pada langkah ini, Buka direktori root aplikasi Laravel, temukan file .env dan atur kredensial database sebagai berikut:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Langkah 3 – Buat Model dan Migrasi
Pada langkah ini, Jalankan perintah berikut di terminal untuk membuat satu model dan nama migrasi Post. Gunakan perintah berikut dan buatlah:
php artisan make:model Post -m
Dalam perintah ini -m dibuat file migrasi
Selanjutnya, buka aplikasi/database/migrasi dan buka file migrasi posting dan tambahkan bidang berikut:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('contacts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('contacts');
}
}
Setelah itu, jalankan perintah berikut:
php artisan migrate
Perintah ini akan membuat tabel di database Anda.
Langkah 4 – Tambahkan Rute
Pada langkah ini, buka file “web.php”, yang terletak di dalam direktori Routes dan tambahkan rute berikut ke dalam file web.php:
use App\Http\Controllers\PostController;
Route::get('posts', [PostController::class, 'index']);
Langkah 5 – Buat Pengontrol dengan Perintah
Pada langkah ini, jalankan perintah berikut di terminal untuk membuat file nama controller PostController.php:
php artisan make:controller PostController
Selanjutnya, buka app/http/controller/PostController dan buka PostController di editor apa saja. Dan perbarui kode berikut ke dalam file PostController Anda:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Models\Post;
class PostController extends Controller
{
public function index(Request $request)
{
$posts = Post::paginate(8);
$data = '';
if ($request->ajax()) {
foreach ($posts as $post) {
$data.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';
}
return $data;
}
return view('posts');
}
}
Langkah 6 – Buat tampilan bilah
Pada langkah ini, Buat satu nama file blade posts.blade.php. Dan perbarui kode HTML di bawah ini ke file posts.blade.php Anda:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 8 load more page scroll - Tutsmake.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.wrapper > ul#results li {
margin-bottom: 2px;
background: #e2e2e2;
padding: 20px;
width: 97%;
list-style: none;
}
.ajax-loading{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<ul id="results"><!-- results appear here --></ul>
<div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>
</div>
</div>
</body>
</html>
File tampilan blade ini menampilkan semua posting blog Anda saat Anda menggulir halaman ke bawah.
Selanjutnya, perbarui skrip berikut ke dalam file tampilan blade Anda:
<script>
var SITEURL = "{{ url('/') }}";
var page = 1; //track user scroll as page number, right now page number is 1
load_more(page); //initial content load
$(window).scroll(function() { //detect page scroll
if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page
page++; //page number increment
load_more(page); //load content
}
});
function load_more(page){
$.ajax({
url: SITEURL + "posts?page=" + page,
type: "get",
datatype: "html",
beforeSend: function()
{
$('.ajax-loading').show();
}
})
.done(function(data)
{
if(data.length == 0){
console.log(data.length);
//notify user if nothing to load
$('.ajax-loading').html("No more records!");
return;
}
$('.ajax-loading').hide(); //hide loading animation once data is received
$("#results").append(data); //append data into #results element
console.log('data.length');
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
}
</script>
Langkah 7 – Jalankan Server Pengembangan
Pada langkah ini, jalankan perintah php artisan serve pada terminal untuk memulai server pengembangan secara lokal:
php artisan serve
Langkah 8 – Uji Aplikasi Ini
Buka browser dan tekan url berikut di atasnya:
http://127.0.0.1:8000/posts
Kesimpulan
Laravel ajax infinity memuat lebih banyak pada tutorial contoh gulir halaman, Anda telah belajar bagaimana menerapkan ajax memuat lebih banyak data pada gulir halaman di aplikasi laravel .
