Cara Membuat Auto Load More Infinite Scroll Tanpa Reload PHP, Mysql, Ajax

Cara Membuat Auto Load More Infinite Scroll Tanpa Reload PHP, Mysql, Ajax

Cara Membuat Auto Load More Infinite Scroll Tanpa Reload PHP, Mysql, Ajax

Hai brother, terima kasih udah luangin waktu buat berkunjung di fajarproject.com salam hangat selalu. Beberapa waktu yang lalu saya kepikiran untuk membuatkan sebuah sistem yang biasa disebut dengan Infinity Scroll. Sistem ini berfungsi untuk menampilkan data sebagian terlebih dahulu yang kemudian setelah user melakukan scroll pada mouse data lainnya akan tampil.

Sistem seperti ini sering kita jumpai di website – website besar seperti Facebook, Twitter, Tokopedia, Lazada, shoppe, dll. Dimana kita akan diberikan beberapa data terlebih dahulu, selanjutnya data lainnya akan di load kemudian setelah user melakukan Scroll.
Kalau masih bingung, ada baikknya silahkan melihat Demo hasil akhir dari project kita kali ini.

Step 1 : Membuat Database Mysql

Agar setiap data yang akan ditampilkan berjalan dengan baik, langkah pertama yang harus kita lakukan adalah membuat table database untuk menampung seluruh data yang ingin kita tampilkan. Ada dua cara untuk membuat database Mysql, pertama membuatnya secara manual didalam PHPMYADMIN atau yang kedua dengan memasukkan SQL yang sudah saya buat di bawah. Saya membuat table produk dengan 4 kolom (produkid, gambar, namaProduk, hargaProduk)

Note : Jika anda ingin mengikuti tutorial ini, saya sarankan anda memasukkan SQL di bawah ini. Agar bisa mengikuti tutorial dengan mudah.

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 14, 2019 at 11:29 AM
-- Server version: 10.1.38-MariaDB
-- PHP Version: 7.3.2

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `loadmore`
--

-- --------------------------------------------------------

--
-- Table structure for table `produk`
--

CREATE TABLE `produk` (
  `produkID` int(11) NOT NULL,
  `image` varchar(100) NOT NULL,
  `namaProduk` varchar(100) NOT NULL,
  `hargaProduk` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `produk`
--

INSERT INTO `produk` (`produkID`, `image`, `namaProduk`, `hargaProduk`) VALUES
(1, 'bedcover-fata-black-butterfly.jpg', 'Bedcover Fata Black Butterfly 180X200', '250000.00'),
(2, 'bedcover-fata-black-box.jpg', 'Bedcover Fata Black Box 180X200', '254000.00'),
(3, 'bedcover-fata-persian-stripe.jpg', 'Bedcover Fata Persian Stripe 180X200', '350000.00'),
(4, 'Jaket-WaterProof-Polos-Jaket-Distro-Tahan-Air-Terbaru.jpg', 'Jaket Water Proof', '180000.00'),
(5, 'Karpet-Bulu-Fata-Balinese-200X200.jpg', 'Karpet Bulu Fata Balinese 200X200', '350000.00'),
(6, 'Karpet-Bulu-Fata-Songket-Blue-200X200.jpg', 'Karpet Bulu Fata Songket Blue 200X200', '270000.00'),
(7, 'Vtech-Equatorial-Watch.jpg', 'Vtech Equatorial Watch', '245000.00'),
(8, 'kintakun-dluxe-sprei-rainbow.jpg', 'Kintakun Dluxe sprei Rainbow', '80000.00'),
(9, 'Karpet-Bulu-Fata-Stardust-200X200.jpg', 'Karpet Bulu Fata Stardust 200X200', '390000.00'),
(10, 'Karpet-Bulu-Fata-Wedding-Rose-200X200.jpg', 'Karpet Bulu Fata Wedding Rose 200X200', '200000.00'),
(11, 'Meja-Panel-Murah-Meriah.jpg', 'Meja Panel Murah Meriah', '350000.00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `produk`
--
ALTER TABLE `produk`
  ADD PRIMARY KEY (`produkID`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `produk`
--
ALTER TABLE `produk`
  MODIFY `produkID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Step 2 : Membuat Koneksi ke Database koneksi.php

Untuk menghubungkan Database agar bisa di akses kedalam halaman website, kita butuh menghubungkannya dengan koneksi. Disini saya menggunakan cara penulisan PDO untuk mengeksekusi setiap program kita, tidak menggunakan Mysqli.

Note : Anda bisa mengubah settingan nama database, user, dan passwordnya sesuai dengan pengaturan yang anda buat.

<?php
    
    $dsn = 'mysql:host=localhost;dbname=loadmore';
    $user = 'root';
    $pass = '';
    $option = array(
            PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
        );

    try {
        $con = new PDO($dsn, $user, $pass, $option);
        $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    }

    catch(PDOException $e) {
        echo 'Failed To Connect' . $e->getMessage();
    }

Step 3 : Membuat halaman index.php

Halaman index adalah halaman utama untuk menampilkan seluruh data yang kita buat. Didalam index tepatnya di bagian header, kita memasukkan library Bootstrap dan Jquery. Kemudian membuat Style.Css dan file javaScript ( loadmore.Js ), Lalu di bagian untuk menampilkan data kita buat tag Div ID ( id=”tampil_data” ) yang akan menghubungkan halaman index ini dengan halaman produk menggunakan Ajax dan ( id=”tampil_pesan” ) untuk menampilkan pesan apakah masih ada data yang harus diload atau data sudah habis di dalam database.

<html>
<head>
	<title>Cara Membuat Auto Load More Infinite Scroll Tanpa Reload PHP, Mysql, Ajax</title>
	<link href="css/style.css" rel="stylesheet" media="all">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="js/loadmore.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h4 class="m-4 text-center">Produk Terbaru</h4>
	<div class="row" id="tampil_data">
		
	</div>
	<div class="mb-5" id="tampil_pesan"></div> 
</div>
</body>
</html>

Step 4 : Membuat Script Ajax loadmore.js

Buat sebuah file baru dengan ekstensi Js atau JavaScript, disini kita akan membuat file Ajax dengan tujuan agar Ajax dapat menampilkan file loadhalaman.php kedalam tag Div ID ( id=”tampil_data” ) yang sudah kita buat diatas. kemudian setelah tampilkan, Ajax juga mampu memberikan jumlah batasan data yang ditampilkan terlebih dahulu sebelum user melakukan scroll pada mouse. Setelah user melakukan scroll mouse, maka data berikutnya muncul dengan batasan data yang sama, begitu seterusnya.

Note : Variable batas kita buat 8, agar setiap data yang kita load jumlah maksimalnya 8, kemudian load berikutnya 8 lagi, dst. Kita menggunakan method Jquery scrollTop() untuk mengatur scrollbar vertical.

$(document).ready(function(){
 
 var batas = 8;
 var mulai = 0;
 var aksi = 'nonaktif';
 function loadhalamanscroll(batas, mulai)
 {
  $.ajax({
   url:"loadhalaman.php",
   method:"POST",
   data:{batas:batas, mulai:mulai},
   cache:false,
   success:function(data)
   {
    $('#tampil_data').append(data);
    if(data == '')
    {
     $('#tampil_pesan').html("<button type='button' class='btn btn-info'>Tidak ada produk lain</button>");
     aksi = 'aktif';
    }
    else
    {
     $('#tampil_pesan').html("<div style='padding-bottom: 50px; text-align: center; color: #d0011b;'>Sedang Memuat</div>");
     aksi = "nonaktif";
    }
   }
  });
 }

 if(aksi == 'nonaktif')
 {
  aksi = 'aktif';
  loadhalamanscroll(batas, mulai);
 }
 $(window).scroll(function(){
  if($(window).scrollTop() + $(window).height() > $("#tampil_data").height() && aksi == 'nonaktif')
  {
   aksi = 'aktif';
   mulai = mulai + batas;
   setTimeout(function(){
    loadhalamanscroll(batas, mulai);
   }, 1000);
  }
 });
 
});

Step 5 : Membuat loadhalaman.php

Pada tahap 4, dengan Ajax kita sudah membuat ancor URL menuju halaman loadhalaman.php. Pada tahap ini kita mengambil data di dalam database produk.

<?php
include('koneksi.php');

if(isset($_POST["batas"], $_POST["mulai"])) {
$query = $con->prepare("SELECT * FROM produk LIMIT ".$_POST["mulai"].", ".$_POST["batas"]." ");
$query->execute();
$pecah = $query->fetchAll();

    foreach($pecah as $tampil) { ?>
    
	<div class="col-6 col-md-3">
		<div class="box-produk mb-3 bg-white">
			<div class="gambar" style="background-image: url(images/<?= $tampil['image']; ?>);"></div>
			<div class="keterangan-box pl-3 pr-3">
				<p class="nama-produk"><?= $tampil["namaProduk"]; ?></p>
				<p class="harga text-right pb-1">Rp <?= number_format($tampil["hargaProduk"]); ?></p>
			</div>
		</div>
	</div>
<?php } 
} ?>

Step 6 : Membuat Halaman Style Css style.css

Untuk mempercantik tampilan project, kita membuat file CSS Style.css

body {
    background-color: #EAEAEA !important;
}
.box-produk {
    box-shadow: 0 0.0625rem 0.125rem 0 rgba(0,0,0,.1);
    border-radius: .125rem;
}
.gambar {
    background-size: contain; 
    background-repeat: no-repeat; 
    padding-top: 100%;
}
.nama-produk{
    height: 2.25rem;
}
.harga {
    border-top: 1px solid #EEE;
}

Leave a Reply

Your email address will not be published. Required fields are marked *