Hari ini:Kamis, 9 Juli 2020

Membuat Tombol Load More menggunakan Ajax jQuery pada Laravel

Bisa Koding ~ Pada kesempatan kali ini kita akan belajar bareng tentang load more data pagination, fungsinya sama seperti pagination biasa, tetapi yang membedakan disini kamu dapat meload data yang ada di postingan mu dengan menampilkan postingan selanjutnya di halaman yang sama dan tidak meninggalkan halaman sebelumnya.

Membuat Tombol Load More menggunakan Ajax jQuery pada Laravel

Sebelumnya pastikan kamu sudah memiliki project laravel, jika belum ada kamu dapat melihat nya pada halaman berikut ini : Menginstal Laravel 5.8 #2 , jika sudah mari kita lanjut ke tahap selanjutnya.

1. Membuat Migration

php artisan make:migration create_posts_table

code diatas berfungsi untuk membuat file migration table posts di projek laravel kamu, setelah file migration dibuat coba kamu isi dengan code berikut ini :

Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('judul');
            $table->text('konten');
            $table->date('tanggal');
            $table->timestamps();
        });

setelah selesai mengisi file migration, lakukan code berikut ini, untuk membuat table posts di projek laravel kamu. 

php artisan migrate

2. Membuat Controller

Selanjutnya kamu dapat membuat controller dengan code sebagai berikut ini:

php artisan make:controller LoadMorePostController

setelah controller telah dibuat coba kamu buat 2 function sebagai berikut di dalam

controller LoadMorePostController:

use Illuminate\Support\Facades\DB;

class LoadMorePostController extends Controller
{
   function loadMore()
    {
     return view('load_more');
    }

   function load_data(Request $request)
    {
     if($request->ajax())
     {
      if($request->id > 0)
      {
       $data = DB::table('posts')
          ->where('id', '<', $request->id)
          ->orderBy('id', 'DESC')
          ->limit(2)
          ->get();
      }
      else
      {
       $data = DB::table('posts')
          ->orderBy('id', 'DESC')
          ->limit(2)
          ->get();
      }
      $output = '';
      $last_id = '';

      if(!$data->isEmpty())
      {
       foreach($data as $row)
       {
        $output .= '
        <div class="row">
         <div class="col-md-12">
          <h3 class="text-info"><b>'.$row->judul.'</b></h3>
          <p>'.$row->konten.'</p>
          <br />
          <div class="col-md-6">
           <p><b>Tanggal Post - '.$row->tanggal.'</b></p>
          </div>
          <div class="col-md-6" align="right">
           <p><b><i>By - (Reza Pramana) '.$row->tanggal.'</i></b></p>
          </div>
          <br />
          <hr />
         </div>
        </div>
        ';
        $last_id = $row->id;
       }
       $output .= '
       <div id="load_more">
        <button type="button" name="load_more_button" class="btn btn-success form-control" data-id="'.$last_id.'" id="load_more_button">Load More</button>
       </div>
       ';
      }
      else
      {
       $output .= '
       <div id="load_more">
        <button type="button" name="load_more_button" class="btn btn-info form-control">No Data Found</button>
       </div>
       ';
      }
      echo $output;
     }
    }
}

3. Membuat View (load_more.blade.php)

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat Tombol Load More menggunakan Ajax jQuery pada Laravel</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container box">
   <h3 align="center">Membuat Tombol Load More menggunakan Ajax jQuery pada Laravel</h3><br />
   <div class="panel panel-default">
    <div class="panel-heading">
     <h3 class="panel-title">Post Data</h3>
    </div>
    <div class="panel-body">
     {{ csrf_field() }}
     <div id="post_data"></div>
    </div>
   </div>
   <br />
   <br />
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 var _token = $('input[name="_token"]').val();

 load_data('', _token);

 function load_data(id="", _token)
 {
  $.ajax({
   url:"{{ route('loadmore.load_data') }}",
   method:"POST",
   data:{id:id, _token:_token},
   success:function(data)
   {
    $('#load_more_button').remove();
    $('#post_data').append(data);
   }
  })
 }

 $(document).on('click', '#load_more_button', function(){
  var id = $(this).data('id');
  $('#load_more_button').html('<b>Loading...</b>');
  load_data(id, _token);
 });

});
</script>

4. Membuat Route

Route::get('loadmore', 'LoadMorePostController@loadMore')->name('loadmore.index');
Route::post('/loadmore/load_data', 'LoadMorePostController@load_data')->name('loadmore.load_data');

5. Jalankan Projek

php artisan serve

setelah menjalankan code diatas kamu dapat mengakses projek kamu dengan alamat berikut

localhost/loadmore

Mungkin sekian penjelasan tentang Membuat Tombol Load More menggunakan Ajax jQuery pada Laravel,

Jika ada yang ingin ditanyakan silahkan tulis di kolom komentar. Terima Kasih ~ ^-^

referensi : ajax-jquery-load-more-data-in-laravel

Total Page Visits: 127 - Today Page Visits: 2

Founder & Author di Bisa Koding, Senang mempelajari hal baru. Sekarang domisili di Planet Bekasi ^_^

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *