Membuat Infinite Scroll Dengan PHP Dan AJAX


Membuat Infinite Scroll Dengan PHP Dan AJAX

kemarin saya sudah share tutorial cara membuat paging dengan AJAX kali ini saya akan share tutorial cara membuat infinite scroll seperti facebook atau twitter
disini saya menggunakan plugin dari jquery, anda bisa mendownloadnya disini atau bisa menyalin kode berikut
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
dan untuk response dari AJAX nya sendiri saya menggunakan format JSON, jika anda belum tahu apa itu format JSON saya sarankan untuk membaca pengertian JSON terlebih dahulu.
pertama buatlah database terserah anda, kemudian jalankan sintak sql berikut di dalam database yang sudah anda buat
-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(25) DEFAULT NULL,
  `alamat` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'Rohmat', 'Jlan. Pantura ciasem tengah');
INSERT INTO `users` VALUES ('2', 'Mimin', 'Jlan. Krajan timur');
INSERT INTO `users` VALUES ('3', 'Maman', 'Jlan. Krajan  barat');
INSERT INTO `users` VALUES ('4', 'Roni', 'Jlan. Mekar sari indah ');
INSERT INTO `users` VALUES ('5', 'Rachmat Hidayat', 'Jlan. Garuda 1');
INSERT INTO `users` VALUES ('6', 'Terzo', 'Jlan. Garuda 2');
INSERT INTO `users` VALUES ('7', 'carlos', 'Jlan. Garuda 3');
INSERT INTO `users` VALUES ('8', 'Dwi Susanti Mustari', 'Jlan. Garuda 4');
INSERT INTO `users` VALUES ('9', 'Desmond Satria Andrian', 'Jlan. Garuda 5');
INSERT INTO `users` VALUES ('10', 'Ka Ar', 'Jlan. Garuda 6');
INSERT INTO `users` VALUES ('11', 'Ka Keke', 'Jlan. Garuda 7');
INSERT INTO `users` VALUES ('12', 'Ka Deri', 'Jlan. Garuda 8');
INSERT INTO `users` VALUES ('13', 'Ka Rendy', 'Jlan. Garuda 9');
INSERT INTO `users` VALUES ('14', 'Ka Yanti', 'Jlan. Garuda 10');
INSERT INTO `users` VALUES ('15', 'Ka Nury', 'Jlan. Garuda 11');
INSERT INTO `users` VALUES ('16', 'Salma', 'Jlan. Garuda 12');
INSERT INTO `users` VALUES ('17', 'Terryn', 'Jlan. Garuda 13');
INSERT INTO `users` VALUES ('18', 'Hafiz', 'Jlan. Garuda 14');
INSERT INTO `users` VALUES ('19', 'Felicia', 'Jlan. Garuda 15');
INSERT INTO `users` VALUES ('20', 'Dhia', 'Jlan. Garuda 16');
INSERT INTO `users` VALUES ('21', 'Marvel', 'Jlan. Garuda 17');
INSERT INTO `users` VALUES ('22', 'Naqi', 'Jlan. Garuda 18');
INSERT INTO `users` VALUES ('23', 'Aca', 'Jlan. Garuda 19');
INSERT INTO `users` VALUES ('24', 'Mazaya', 'Jlan. Garuda 20');
INSERT INTO `users` VALUES ('25', 'Ahliva', 'Jlan. Garuda 21');
INSERT INTO `users` VALUES ('26', 'Fatih ', 'Jlan. Garuda 22');
INSERT INTO `users` VALUES ('27', 'Kareem', 'Jlan. Garuda 23');
INSERT INTO `users` VALUES ('28', 'Najwa', 'Jlan. Garuda 24');
INSERT INTO `users` VALUES ('29', 'Joshua', 'Jlan. Garuda 25');
INSERT INTO `users` VALUES ('30', 'Marciello', 'Jlan. Garuda 26');
INSERT INTO `users` VALUES ('31', 'Alisha', 'Jlan. Garuda 27');
INSERT INTO `users` VALUES ('32', 'Sakif', 'Jlan. Garuda 28');
INSERT INTO `users` VALUES ('33', 'Kay', 'Jlan. Garuda 29');
INSERT INTO `users` VALUES ('34', 'Shafa', 'Jlan. Garuda 30');
INSERT INTO `users` VALUES ('35', 'Afya', 'Jlan. Garuda 31');
INSERT INTO `users` VALUES ('36', 'Athala', 'Jlan. Garuda 32');
INSERT INTO `users` VALUES ('37', 'Gelar', 'Jlan. Garuda 33');
INSERT INTO `users` VALUES ('38', 'Gyan', 'Jlan. Garuda 34');
INSERT INTO `users` VALUES ('39', 'AliaZahra', 'Jlan. Garuda 35');
INSERT INTO `users` VALUES ('40', 'Nabil', 'Jlan. Garuda 36');
INSERT INTO `users` VALUES ('41', 'Rangga', 'Jlan. Garuda 37');
INSERT INTO `users` VALUES ('42', 'Aramazaya', 'Jlan. Garuda 38');
INSERT INTO `users` VALUES ('43', 'Amara', 'Jlan. Garuda 39');
kemudian buatlah project dengan nama terserah anda lalu salin kode berikut dan simpan file dengan nama koneksi.php
<?php
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'infinite_scroll';

 $conn = mysql_connect($host, $user, $pass);
 mysql_select_db($db, $conn);
keterangan :
ganti isi dari $user, $pass dan $db, sesuai dengan username, password dan database anda
setelah koneksi dibuat sekarang buat file dengan nama data.php dan salin kode berikut
<?php
 require_once __DIR__.'/koneksi.php';

 $response = array('paging'=>array(), 'data'=>array());

 // set page
 $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

 // data akan di tampilkan 10 baris perhalaman
 $perpage = 10;

 // metentukan offset
 // offset sendiri menentukan data yang akan di lewati setiap baris
 $limit = ($page - 1) * $perpage;

 // set query
 $sql = 'SELECT * FROM users_datas';

 // menentukan jumlah data yang ada di table users
 $rs = mysql_query($sql);
 $record = mysql_num_rows($rs);

 // menentukan total paging
 $total_page = ceil($record / $perpage);

 // memecah data berdasarkan :
 // $limit : data awal yang akan di lewati
 // $perpage : jumlah data yang akan di tampilkan
 $sql .= ' LIMIT '.$limit.','.$perpage;
 $rs = mysql_query($sql);

 $response['paging'] = array(
  'page'=>$page,
  'perpage'=>$perpage,
  'total_page'=>$total_page
 );

 while($row = mysql_fetch_array($rs)){
  $id = $row['id'];
  $nama = $row['nama'];
  $alamat = $row['alamat'];

  array_push($response['data'], array('id'=>$id, 'nama'=>$nama, 'alamat'=>$alamat));
 }

 echo json_encode($response);
file data.php ini, adalah proses data yang akan di tampilkan di halaman utama, anda bisa mengganti jumlah data yang akan di tampilkan di setiap page dengan merubah angka pada $perpage sesuai dengan kebutuhan anda.
dan yang terakhir buat file dengan nama index.php dan salin kode berikut
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT PAGING DI PHP</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
<style type="text/css">
body { font-family: Verdana; font-size: 14px; }
.container { margin: auto; width: 1000px; font-size: 40px; }
.container table { width: 100%; }
</style>
</head>
<body>
<div class="container">
<table>
<tbody class="data">
</tbody>
</table>
</div>
<script type="text/javascript">
 var i = 2;

 // proses di jalankan ketika user men scroll kebawah
 $(window).on('scroll', function(e){
  $this = $(this);

  if($this.scrollTop() == ($(document).height() - $(window).height())){
   page(i);
   i++;
  }
 });

 function page(page = 1){
  $.ajax({
   'url': 'data.php',
   'type': 'GET',
   'dataType': 'JSON',
   'data': {
    page: page
   },
   'success': function(response){
    draw_data(response);
   }
  });
 }

 function draw_data(response){
  // console.log(response);
  var data = $('.data');
  var content = '';

  for(var i=0; i<response.data.length; i++){
   content += '<tr>';
   content += '<td width="300">ID</td>';
   content += '<td>: '+ response.data[i].id +'</td>';
   content += '</tr>';
   content += '<tr>';
   content += '<td>NAMA</td>';
   content += '<td>: '+ response.data[i].nama +'</td>';
   content += '</tr>';
   content += '<tr>';
   content += '<td>ALAMAT</td>';
   content += '<td>: '+ response.data[i].alamat +'</td>';
   content += '</tr>';
   content += '<tr><td colspan="2"><hr /></td></tr>';
  }

  data.append(content);
 }

 page(1);
</script>
</body>
</html>
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga barmanfaat.

Berbagi Via

Share Facebook Share Twitter Share Google+ Share Pinterest
Jangan lupa tinggalkan komentarnya ya :)

1 comment: