Langsung ke konten utama

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery


Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini.



Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah.



Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut :



Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php". Isi dari kedua file tersebut seperti berikut :

Index.php



<!DOCTYPE html>
<html>
<head>
<title>WHM</title>
<link rel="stylesheet" type="text/css" href="asset/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/jq.inview.js"></script>
</head>
<body>
<div class="atas">
<div class="menu_atas">
            <div class="logo">
                <h3>Aplikasi Percobaan</h3>
            </div>
            <div class="search">
                <input type="text" name="cari" id="input" placeholder="Masukkan Kata Kunci">
            </div>
            <div class="menu">
                <h3>Kategori</h3>
            </div>
        </div>
</div>
    <div class="tengah">
   
    </div>
<div class="bawah" id="bawah">
        <div class="loader">
            <img src="asset/gambar/loading.gif" class="load" id="load" style="visibility: hidden;">
        </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
             $('#bawah').on('inview', function(event, isInView) {
              $('#load').attr('style', 'visibility:visible');
                 if (isInView) {                 
                   
                     $.ajax({
                         type: 'POST',
                         url: 'data.php',
                         data: { page: 3 },
                         success: function(data){
                             if(data != ''){
                                 $('.tengah').append(data);
                                 // $('#load').attr('style', 'visibility:hidden');
                             } else {
                                 $("#loader").hide();
                             }
                         }
                     });
                 }
             });
         });
</script>
</body>
</html>

Hal yang perlu anda garis bawahi atau pahamai terdapat pada code javascript. Pada kode tersebut di setel bahwa ketika "$("#bawah")" tampil atau inview maka data.php akan di muat kedalam div yang memiliki nama class "tengah" menggunakan bantuan ajax.

Data.php

<?php
for ($i=0; $i < 5 ; $i++) {
?>
    <div class="card">
        <div class="gambar">
            <img src="asset/gambar/1.png">
        </div>
        <div class="atribut">
            <div class="nama">
                <a>SAMSUNG Galaxy Tab S4 2018</a>
            </div>
            <div class="harga">
                <h2>Rp 30.000</h2>
            </div>
            <div class="deskripsi">

            </div>
        </div>

    </div>

<?php } ?>

Kode di atas kita menampilkan card view yang berjumlah 5, dengan menggunakan proses perulangan. Teman-teman bisa memodifikasi file ini untuk menampilkan data dari database.

Untuk file projectnya bisa teman-teman download disini


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Panduan Rinci Cara Membuat Website

Website adalah suatu kumpulan halaman berbentuk digital yang dapat diakses menggunakan perangkat lunak yang disebut Browser, dengan bantuan jaringan Internet. Penjelasan mengenai apa itu website telah dijelaskan sebelumnya di dalam postingan : Mengenal Apa Itu Web dan Hal yang Perlu di Perhatikan dalam Membangun Web . Didalam postingan tersebut sudah dijelaskan apa saja yang perlu diperhatikan dalam pembuatan web atau website. Selanjutnya pada postingan ini akan dijelaskan secara rinci bagaimana cara membuat sebuah website. Sebelum membuat sebuah website anda harus memutuskan terlebih dahulu akan membuat website seperti apa. Jika anda sudah menentukan tema web anda sekarang anda perlu menentukan aplikasi apa yang ingin anda gunakan. Apakah anda akan membuatnya secara native, menggunakan framework, atau menggunakan CMS. Pada postingan ini yang dijelaskan adalah langkah-langkah membuat sebuah website baik secara native, framework, ataupun menggunkan CMS. Silahkan anda simak langkah demi ...
Posting Komentar
Baca selengkapnya

Mengenal Sejarah Bahasa Pemrograman C++

C++ merupakan bahasa pemrograman tingkat menengah yang banyak dijadikan sebagai dasar pembelajaran dalam dunia pemrograman. Bahasa ini bisa dibilang mudah dipelajari sebab sudah menggunakan bahasa yang mirip dengan bahasa manusia dibandingkan dengan bahasa Assemble yang merupakan bahasa tingkat rendah. Salah satu keunggulan dari bahasa ini adalah kecepatannya dalam melakukan kompilasi kedalam bahasa mesin, selain itu bahasa c++ banyak dijadikan sebagai acuan untuk bahasa-bahasa pemrograman baru. Sejarah Awal Pembuatan Bahasa Pemrograman C++ Bahasa C++ dibuat oleh Bjarne Stroustrup yaitu seorang ilmuwan komputer dan profesor di bidang ilmu komputer di Texas A&M University. Profesor yang berasal dari Denmark ini dulunya tergabung dalam Computer Research Institute of Cambridge University dimana dia menghabiskan hari-harinya mengabdikan diri untuk meneliti perangkat lunak yang berjalan pada sistem terdistribusi. Sistem terdistribusi merupakan sistem dimana banyak komputer yang terhubu...
Posting Komentar
Baca selengkapnya

Pengenalan Route dan View Laravel Plus Membuat Tampilan Website Pertama Dengan Laravel - Coding Rakitan

 ( Source : Dokumentasi Pribadi ) Hallo sobat CODING RAKITAN, bagaimana kabarnya? Semoga semuanya sehat ya :). Pada artikel kali ini, saya akan membagikan tentang Route dan View pada Laravel dengan membuat halaman website sederhana. Tujuan akhirnya adalah agar teman-teman tahu konsep Route dan view pada Laravel. Bagi teman-teman yang belum menginstal Laravel-nya, silahkan diinstal dulu artikel saya sebelumnya. (Baca : Cara Install Laravel Terbaru Via Composer ). Okey, saya akan bahas dulu satu persatu apa itu Route dan View. Route Route kalau diterjemahkan jadi rute atau jalan. Rute atau jalan itu merupakan alur yang bisa kita lalui untuk menuju ke tempat tujuan kita. Jadi kita harus melewati jalan tertentu untuk sampai pada tujuan tertentu. Hehehe. Ah, gitulah! :) Intinya Route ini digunakan untuk memaping atau memetakan atau membuat peta url yang bisa kita gunakan untuk mengakses website Laravel kita. View View dalam laravel artinya tampilan, yaitu tempat dimana kita menyimpan se...
Posting Komentar
Baca selengkapnya