Cara Membuat Infinite Scroll dengan Jquery Ajax di Laravel

Share:
Cara Membuat Infinite Scroll dengan Jquery Ajax di Laravel
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara menggunakan infinite scroll pada laravel. Penasaran?, ayo ikuti tutorialnya di bawah ini.








Infinite scroll adalah istilah saat kalian mencapai akhir paling bawah halaman, kemudian data baru akan diload kembali. Kemudian kalian bisa melakukan scroll lagi sampai ke paling bawah halaman. Dan itu terjadi sampai data yang ada habis. Ini biasa digunakan pada halaman berita, tumpukan foto, beranda yang memuat banyak post atau halaman apapun yang memuat daftar panjang ke bawah.

Teknik ini cukup efisien, karena tidak semua data dikeluarkan sekaligus. Halaman web menjadi jauh lebih user friendly karena load halaman jauh lebih cepat. Pada tutorial kali ini kita akan coba mengimplementasikann teknik infinite scroll pada laravel.


Cara Membuat Infinite Scroll dengan Jquery Ajax di Laravel

1. Download dan install laravel versi 7,8,9 atau versi terbaru. Atau kalian juga dapat menggunakan project laravel yang sudah ada. Untuk cara instalasi tidak kita bahas disini. Selain itu silahkan setting file .env dan koneksikan ke database.

2. Jalankan perintah berikut ini untuk membuat model Post dan migration baru
php artisan make:model Post -m


3. Setelah menjalankan perintah di atas buka migration post pada folder database/migrations dan ikuti scriptnya seperti di bawah ini.


<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('description'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } }


4. Buka file Post.php di dalam folder app/models lalu ubah isi di dalamnya seperti di bawah ini.

<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Post extends Model { use HasFactory; public $fillable = ['title','description']; }




5.
Jalankan perintah di bawah ini, untuk membuat tabel baru di dalam mysql. Pastikan juga kalian sudah mengkoneksikan file .env ke database mysql. Jika belum dilakukan maka akan terjadi error.
php artisan migrate


6. Buka file web.php di dalam folder routes/web.php. Kemudian tambahkan script di bawah ini.

Route::get('post', 'App\Http\Controllers\PostController@index');


7. Jalankan perintah di bawah ini untuk membuat postController
php artisan make:controller PostController


8. Kemudian buka app/Http/Controllers/PostController.php. Kemudian edit isi di dalamnya dengan script di bawah ini.

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Post; class PostController extends Controller { public function index(Request $request){ $posts = Post::paginate(5); if ($request->ajax()) { $view = view('data',compact('posts'))->render(); return response()->json(['html' => $view]); } return view('post', compact('posts')); } }


9. Buat file blade baru dengan nama post.blade.php di dalam folder resources/views. Kemudian edit isi di dalamnya dengan script di bawah ini.


<!DOCTYPE html> <html> <head> <title>Laravel infinite scroll</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <style type="text/css"> .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background-color: #fff; } .loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 14px arial; } </style> </head> <body> <div class="preloader"> <div class="loading"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> <div class="container"> <h2 class="text-center">Laravel infinite scroll Tutorial</h2> <br /> <div class="col-md-12" id="post-data"> @include('data') </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> <script> //when file loaded for first time, fadeout this loader $(window).load(function() { $(".preloader").fadeOut("slow"); }); </script> <script type="text/javascript"> var page = 1; $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() >= $(document).height()) { page++; loadMoreData(page); } }); function loadMoreData(page) { $.ajax({ url: '?page=' + page, type: "get", beforeSend: function() { $('.preloader').show(); } }) .done(function(data) { $('.preloader').hide(); $("#post-data").append(data.html); }) .fail(function(jqXHR, ajaxOptions, thrownError) { alert('server not responding...'); }); } </script> </body> </html>


10. Buat file blade lagi dengan nama data.blade.php di dalam folder resources/views. Kemudian edit isi di dalamnya dengan script di bawah ini.

@foreach ($posts as $post) <div> <h3><a href="">{{ $post->title }}</a></h3> <p>{{ \Illuminate\Support\Str::limit($post->description, 400) }}</p> <div class="text-right"> <button class="btn btn-success">Read More</button> </div> <hr style="margin-top:5px;"> </div> @endforeach
  
Ok, semua tahapan sudah kita lalui. Selanjutnya kita uji coba. jalankan perintah php artisan serve. Lalu akses https://localhost:8000/post. Jika tampilannya tampak seperti gambar di bawah ini, artinya kalian sudah berhasil.

Cara Membuat Infinite Scroll dengan Jquery Ajax di Laravel
Hasil Akhir



Di atas adalah contoh sederhana bagaimana cara membuat infinite scroll pada sebuah halaman website. Sekarang kalian sudah bisa membuatnya sendiri dan lakukan improvisasi agar dapat sesuai dengan kebutuhan project kalian.

Ok sekian tutorial kali ini tentang cara membuat infinite scroll pada laravel. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima kasih.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi