Wednesday, September 30, 2009

Membuat Google Wannabe Paging



Alhamdulillah, aplikasi Tunas Unggul Bangsa sudah live dan bisa diakses lewat internet melalui http://donatur.yayasan-tunas-bangsa.com.

Appfuse menggunakan displaytag untuk menampilkan data2nya per halaman, misalnya 10 record perhalaman, hanya saja displaytag mengambil keseluruhan data meskipun yg ditampilkan hanya 10 record, hal ini dikarenakan displaytag memiliki fasilitas utk sorting per kolom, ataupun download data dalam bentuk excel atau pdf. Hal ini tentu saja tidak hemat resource karena hanya untuk menampilkan 10 record saja, sistim harus query seluruh record.

Oleh karena itu saya menggunakan cara sendiri untuk menampilkan data sesuai kebutuhan, saya hanya melakukan query sebanyak record yang butuh ditampilkan, dan sebagai penanda tampilan record keberapa, diperlukan penanda halaman (paging), misalnya halaman 2 menampilkan record mulai 11 sampai 20, dst. Dalam post ini saya jelaskan bagaimana membuat paging seperti yang ada di google.

Jika Anda googling, akan ada daftar halaman (paging) jika hasil pencariannya banyak, seperti : "Previous 1 2 3 4 5 6 7 8 9 10 Next". Untuk membuatnya sangat mudah dan saya hanya bermain dengan beberapa if-else di jsp dengan beberapa parameter, dan ini bisa diaplikasikan dengan bahasa2 lain.

Aplikasi Tunas Unggul Bangsa menggunakan spring MVC wannabe (karena ternyata tidak benar2 MVC), oleh karena itu bermain dengan banyak controller, dengan kata lain untuk menampilkan suatu halaman maka dubutuhkan controller. Saya butuh tiga parameter untuk controller paging:
1. page, halaman yang direquest user, misalnya 5
2. totalPages, banyak halaman, didapatkan dengan cara query "Select Count" dibagi perPage, dimana perPage adalah total record tiap halaman.
Misalnya total record = 100, perPage = 10 record, maka totalPage = 10.
3. listPages, daftar halaman yang muncul di aplikasi.
Misalnya kita menampilkan 5 halaman, maka yg muncul adalah "3 4 5 6 7"

Sementara itu di jsp-nya algoritmanya sebagai berikut:
1. jika page != 1 maka cetak "Awal", link ke halaman 1
2. cetak semua nilai listPages, jika sama dengan requestedPage maka tidak ada link, selain itu link ke halaman yg sesuai
3. jika totalPages != 0 dan requestedPage != totalPages maka cetak "Akhir", link ke halaman terakhir
Hasil dari contoh kita adalah "Awal 3 4 5 6 7 Akhir"

Tulis semua langkah diatas kedalam file jsp terpisah, misalnya paging.jsp, maka kita hanya tinggal include diatas table record.

Sebagai perbandingan dengan google, google memiliki 20 listPages, jika total halaman yg kita miliki bukan 5 tapi 20, maka kita memiliki listPages yang sama dengan google, dan itu bisa saja diubah karena saya jadikan Constant, hanya saja nantinya malah jelek tampilannya soalnya akan sangat melebar. Perbedaan yg lain adalah google menampilan "Prev" dan "Next", dimana link-nya menuju halaman sebelum atau halaman berikutnya, sedangkan yg kita miliki "Awal" dan "Akhir" menuju halaman awal dan akhir.

3 comments:

Anonymous said...

Salam Super !!!

JesperBlog said...

zalam zuper jg todo!!

Riyan adriyan said...

wah tutorialnya bagus tapi ane bingung bos coz gak ada sourcodenya.. kalo boleh tampilin sourcodenya juga.. ane pengen pelajari membuat paging bos.. tolong yah bos