Memuat data saat menggulir halaman dengan jQuery PHP dan MySQL

Ketika kita memiliki record data yang banyak yang ditampilkan pada halaman, kita menggunakan paginasi untuk menampilkan hanya beberapa data saat memuat halaman dan tampilan berikutnya beberapa data pada setiap klik berikutnya. Kamu dapat mengganti paginasi biasa tersebut dengan fitur yang lebih user friendly untuk memuat data yang dinamis pada halaman yang sama saat halaman digulir/discroll.

Pengguna tidak perlu mengklik tombol untuk melihat lebih banyak data; data akan dimuat pada setiap scroll halaman tanpa memuat halaman. Jadi dalam tutorial ini kamu akan belajar cara memuat data saat menggulir halaman dengan jQuery PHP dan MySQL.

Jadi mari kita mulai ngoding. Sebelum mulai, lihat dulu struktur file yang digunakan untuk tutorial ini.

Langkah 1: membuat table database

CREATE TABLE IF NOT EXISTS `konten` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `deskripsi` longtext NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

Langkah 2: membuat koneksi database

Kiata akan membuat file konek_db.php untuk membuat koneksi dengan database MySQL untuk menampilkan data.

<?php

/* Menghubungkan ke database */
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'codingan_demo';
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

?>

Langkah 3: menyertakan file Bootsrap dan JavaScript

Dalam tutorial ini kita membuat HTML menggunakan Bootstrap, jadi kita harus menyertakan file Bootstrap dan jQuery di dalam tag header di index.php.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Kita juga akan menyertakan file hasil_data.php di index.php untuk memuat data pada halaman ketika memuat halaman.

<div class="container">
 <h2>Memuat data saat menggulir halaman dengan jQuery PHP dan MySQL</h2>
  <div id="hasil">
  <?php include('hasil_data.php'); ?>
  </div>
  <div id="loader" style="text-align:center;"><img src="loader.gif" /></div>
</div>

Langkah 4: Memuat data saat halaman digulir menggunakan jQuery Ajax

Sekarang kita akan memuat data secara dinamis pada halaman ketika halaman digulir menggunakan jQuery Ajax. Untuk ini saya telah membuat file JavaScript muat_data.js untuk membuat panggilan Ajax pada saaat halaman digulir, file hasil_data.php ini untuk mengambil record data secara dinamis dari database MySQL dan menampilkannya.

$(document).ready(function(){
 $(window).scroll(function(){
  if ($(window).scrollTop() == $(document).height() - $(window).height()){
   if($(".no_halaman:last").val() <= $(".total_record").val()) {
    var nohal = parseInt($(".no_halaman:last").val()) + 1;
    muatRecord('hasil_data.php?halaman='+nohal);
   }
  }
 });
});
function muatRecord(url) {
 $.ajax({
  url: url,
  type: "GET",
  data:  {total_record:$("#total_record").val()},
  beforeSend: function(){
   $('#loader').show();
  },
  complete: function(){
   $('#loader').hide();
  },
  success: function(data){
   $("#hasil").append(data);
  },
  error: function(){}
 });
}

Langkah 5: Mengambil data dari database MySQL

Terakhir di hasil_data.php, kita akan mengambil data dari database MySQL sesuai dengan permintaan jQuery Ajax untuk memuat data dan mengembalikan data sebagai HTML.

<?php
include_once("konek_db.php");
$perHalaman = 3;
$sql_query = "SELECT id, deskripsi FROM konten";
$halaman = 1;
if(!empty($_GET["halaman"])) {
 $halaman = $_GET["halaman"];
}
$start = ($halaman-1)*$perHalaman;
if($start < 0) $start = 0;
$query =  $sql_query . " limit " . $start . "," . $perHalaman;
$resultset = mysqli_query($conn, $query) or die("database error:". mysqli_error($conn));
$records = mysqli_fetch_assoc($resultset);
if(empty($_GET["total_record"])) {
 $_GET["total_record"] = mysqli_num_rows($resultset);
}
$pesan = '';
if(!empty($records)) {
 $pesan .= '<input type="hidden" class="no_halaman" value="' . $halaman . '" />';
 $pesan .= '<input type="hidden" class="total_record" value="' . $_GET["total_record"] . '" />';
 while( $rows = mysqli_fetch_assoc($resultset) ) {
  $pesan .= '<div  class="well">' .$rows["deskripsi"] . '</div>';
 }
}
echo $pesan;
?>

Kamu dapat melihat live demo dari link Demo dan men-download source code dari link di bawah ini.