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.
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
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
