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.
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.
Kita akan menampilkan 2 gambar pada halaman index.php dengan meletakan kode PHP untuk query sql berikut ini pada bagian paling atas index.php
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
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
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
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
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*
iya, terima kasih sarannya…
lebih bagus lagi pake mysqli, ato malah pake PDO sekalian :D
Mantep gan, pake mysqli atau PDO .. mysql_ udah jadul dan gak aman ..
Keren gan, klw untuk plugin di wordpress ada gak gan ?
nice tutorial, bisa buat bahan belajar saya =)