Cara Membuat Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Wednesday, July 19, 2017

Cara Membuat Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY

bewoksatukosong.com | Halo semuanya balik lagi dengan om bewok disini, sudah lama sekali om bewok tidak membuatkan tutorial, karena kesibukan om bewok yang sebenernya cuman tidur dirumah aja muahhaa. kali ini om bewok bakal membuatkan tutorial mengenai "Cara Membuat Infinite Scroll otomatis menggunakan php mysql dan jquery". Mungkin kalian bertanya - tanya, infinite scroll tuh kayak apa sih om ? 

Nih om bewok kasih contoh aja ya "misalkan kamu bermain facebook, lalu kamu ketika scroll ke bawah, dia akan otomatis membuat update terbaru kan, kamu ga perlu klik page 2 atau page 3 untuk membuka status teman kamu di bawahnya, nah itu disebut Infinite Scroll.

Oh iya kalau kamu masih bingung caranya atau ada yang error, kamu bisa download di akhir tutorial ini ya. 

Pertama kia buat terlebih dahulu database-Nya, nama databasenya adalah loadmore dengan nama table berita 
Kalau kalian masih bingung, kalian bisa lihat pada gambar ya.


Cara Membuat Infinite Scroll Otomatis (Auto Load More) PHP, MYSQL Dan JQUERY
Gambar 1.1 Perhatikan nama database dan nama tablenya


Oke sudah ??

Selanjutnya kita membuat 2 file yaitu index.php dan get_data.php . Oh iya ada satu lagi yaitu jquery, kalian bisa download jquery di internet.


Gambar 1.2 Struktur pembuatan infinite scroll otomatis
Gambar 1.2 Struktur pembuatan infinite scroll otomatis


Kita buat terlebih dahulu index.php

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
   var flag = 0;

   $.ajax({
    type: "GET",
    url: "get_data.php",
    data: {
     'offset':0,
     'limit':3
    },
    success: function(data) {
     $('body').append(data);
     flag +=3;
    }
   });

   $(window).scroll(function(){
    if($(window).scrollTop() >= $(document).height() - $(window).height()) {
     $.ajax({
      type: "GET",
      url: "get_data.php",
      data: {
       'offset':flag,
       'limit':3
      },
      success: function(data) {
       $('body').append(data);
       flag +=3;
      }
     });
    }
   });
  });

 </script>
 <style type="text/css">
  .blog-post {
   border-bottom: solid  4px black;
   margin-bottom:20px;
  }

  .blog-post h1 {
   font-size: 40px;
  }

  .blog-post p {
   font-size: 30px;
  }
 </style>
</head>
<body>
 <div class="blog-post">
<!--   <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, </p> -->

 </div>
</body>
</html>


Lalu kita membuat get_data.php, dan ini codinganya

<?php  
 if(isset($_GET['offset']) && isset($_GET['limit'])) {
  $limit = $_GET['limit'];
  $offset = $_GET['offset'];

  $connection = mysqli_connect('localhost', 'root', '', 'loadmore');

  $data = mysqli_query($connection,"SELECT * FROM berita LIMIT {$limit} OFFSET {$offset}");

  while($row=mysqli_fetch_array($data)) {
   echo '<div class="blog-post"><h1>'.$row['id_berita'].". ".$row['judul_berita'].'</h1><p>'.$row['isi'].'</p></div>';
  }
 }
?> 

Hasilnya bisa lihat dibawah
Gambar 1.3 
Jadi ketika kita scroll dia akan otomatis menampilkan data yang sudah kita masukin di database mysql dengan nama loadmore

Kalau kalian ingin download bisa klik di sini Github

Itu saja tutorial hari ini, jangan lupa share ke teman - teman kamu. Semoga bermanfaat.

4 comments:

  1. mantap mas, ditunggu kunjungan balik nya di blog saya yang ga guna itu
    dirman29.blogspot.com

    ReplyDelete
  2. gak dikasih komen code nya, jadi gak bisa buat belajar :'(

    absurdbutwell.blogspot.com

    ReplyDelete
  3. Mantap, gan. Sudah saya coba dan berhasil. Hanya saja saya masih bingung, setelah di scroll ke bawah alamat urlnya kenapa tidak ikut berubah ya, masih index.php.

    Harusnya saat pindah ke judul berita ke2, urlnya juga berubah jadi index.php?artikel=2

    Solusinya bagaimana ya gan

    Terima kasih

    ReplyDelete