Tutorial Membuat Infinite Scroll Dengan PHP, MySQL, Jquery

Infinite Scroll atau halaman website yang ketika di scroll tidak ada batasnya karena dibuat otomatis mengambil (load) data baru untuk ditampilkan dalam satu halaman tersebut sampai data tersebut terunduh semua. Infinite scroll ini menggantikan fungsi paging (penomoran halaman) yang sejak awal sering kita lihat di berbagai website.

Infinite Scroll

Pada tulisan kali ini Tutorial-webdesign.com akan membahas bagaimana cara membuat infinite scroll sederhana untuk website anda, dimana kita akan mencoba membuatnya dalam sebuah halaman gallery sederhana.

Seperti kita ketahui, beberapa website yang menerapkan model infinite scroll ini yaitu Twitter, Facebook, Pinterest, Mashable, dll.

Langkah Awal: Membuat Database SQL

Pertama kita perlu menyiapkan sebuah database, disini sebagai contoh kita hanya membuat satu table untuk menampung nama-nama file gambar yang ingin ditampilkan, nama database nya adalah infinitescroll.

CREATE TABLE `scroll_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `order` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Membuat Halaman Index.php

Dihalaman index.php ini kita tidak terlalu membutuhkan banyak tag HTML, kalau dilihat kita hanya perlu membuat 3 div dengan ID yang berbeda-beda, tentunya dengan struktur HTML standar, letakan div tersebut didalam body.

        <div id='more' >Loading More Content</div>
        <div id='no-more' >No More Content</div>
        <div id='result'></div>

Kita akan menampilkan 2 gambar pada halaman index.php dengan meletakan kode PHP untuk query sql berikut ini pada bagian paling atas index.php

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;

Ajax dengan Jquery

Masih di file index.php, kita akan menambahkan Javascript / Ajax dengan framework jquery untuk me-load data lain setalah 2 gambar yang kita load pada awal website dijalankan, script javascript ini di letakan di [head] dan [/head], sebelumnya jangan lupa menyertakan script jquery yang bisa didownload langsung dari website jquery.com

var page = 1;


$(window).scroll(function () {
    $('#more').hide();
    $('#no-more').hide();

    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        $('#more').css("top","400");
        $('#more').show();
    }
    if($(window).scrollTop() + $(window).height() == $(document).height()) {

        $('#more').hide();
        $('#no-more').hide();

        page++;

        var data = {
            page_num: page
        };

        var actual_count = "<?php echo $actual_row_count; ?>";

        if((page-1)* 2 > actual_count){
            $('#no-more').css("top","400");
            $('#no-more').show();
        }else{
            $.ajax({
                type: "POST",
                url: "data.php",
                data:data,
                success: function(res) {
                    $("#result").append(res);
                    console.log(res);
                }
            });
        }

    }


});

Disitu kita bisa melihat kalau script diatas difungsikan untuk menentukan halaman dengan trigger yaitu ketika halaman sudah mencapai posisi tertentu, dengan ajax kita mengambil data gambar lainnya yang diproses di file data.php, berikut ini script php untuk melakukan query sql untuk mengambil data gambar tersebut

Data.php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 2) . ",12";

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");


$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
}


echo $html;
exit;

Script diatas digunakan untuk memproses pengambilan data dari database dan mengembalikan hasil (return a result) berupa data-data gambar yang sudah di susun dengan tag html seperti berikut <div><img></div> untuk ditampilkan di dalam div dengan ID #result.

Mempercantik Dengan CSS

Agar tampilan menjadi lebih cantik kita perlu memoleskan sedikit script CSS, berikut css yang digunakan

#result{
	width: 660px;
	margin: 20px auto;
	padding: 10px;
	background: #eee;
	border: 1px solid #ccc;
	overflow: hidden;
}

#result div{
	width: 620px;
	margin: 10px;
	float: left;
}

#result div img{
	width: 640px;
	height: auto;
}
#result div img:hover{
    opacity: .8;
}



#more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}
#no-more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}

Script css diatas digunakan untuk menempatkan tampilan loading di kanan bawah saat kita melakukan scroll pada halaman website.

HASIL

DEMO | DOWNLOAD

Untuk hasil yang lebih optimal, mungkin untuk desain front-end nya bisa digabungkan dengan masonry atau isotop.

Sekian tutorial membuat infinite scroll dengan menggunakan PHP, MySQL, dan Jquery ini, semoga berguna untuk anda yang sedang ingin mengimplementasikan model desain serupa. Salam web design indonesia

TWD Editorial

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

6 thoughts on “Tutorial Membuat Infinite Scroll Dengan PHP, MySQL, Jquery”

isan says:

July 8, 2014 at 14:34

keren kaks.
btw, itu masih pakai mysql_fetch_array(); ya ?
saran aku sih, pakai mysql_fetch_assoc(); buat kedepannya.
karena hasil sama, tapi loadingnya lebih cepat. :) *cmiiw*

TWD Editorial says:

July 8, 2014 at 14:50

iya, terima kasih sarannya…

Reply
Hajar says:

July 8, 2014 at 15:14

lebih bagus lagi pake mysqli, ato malah pake PDO sekalian :D

Reply
- rafeyu says:
  
  July 9, 2014 at 10:31
  
  Mantep gan, pake mysqli atau PDO .. mysql_ udah jadul dan gak aman ..
  
  Reply

Berita Terbaru says:

March 24, 2015 at 22:42

Keren gan, klw untuk plugin di wordpress ada gak gan ?

nuyu.b says:

March 22, 2016 at 15:40

nice tutorial, bisa buat bahan belajar saya =)

Tutorial Web Design

Topik

Tags