Tekhnik Paging Dengan Jquery Ajax
Oleh: DadanBagi Anda programer web atau yang sudah lama berkecimpung di dunia
pemograman, paging adalah suatu tekhnik menampilkan data perhalaman.
Dengan paging informasi yang akan kita tampilkan dari database akan
dibatasi sesuai pengaturannya perhalaman. Contoh penerapan paging ialah
seperti situs Google dalam menampilkan hasil pencariannya. Dimana pada
bagian bawah terdapat link halaman yang ketika kita klik akan muncul
daftar pencarian berikutnya. Itulah paging. Kekurangan paging yang
biasanya adalah harus loading ketika link halaman kita klik. Nah dengan
jquery ajax ini tidak ada lagi yang namanya loading. Jadi ucapkan Good bye
pada loading.
Halo pembaca sekalian, jumpa lagi dengan saya pada tulisan ini. Semoga Anda tidak bosan dengan rangkaian kata-kata saya ini. Sebab tidak mungkin juga Anda bosan dengan muka saya. J
Oke para pembaca sekalian, pada topik hari ini perkenankan saya untuk membahas topik yang sedang menjadi hot isu di dunia pemograman (kayak gosip aja). Yup, apalagi yang sedang hot kalau bukan tekhnik paging dan jquery ajax.
Bagi Anda programer web atau yang sudah lama berkecimpung di dunia pemograman, paging adalah suatu tekhnik menampilkan data perhalaman. Dengan paging informasi yang akan kita tampilkan dari database akan dibatasi sesuai pengaturannya perhalaman.
Contoh penerapan paging ialah seperti situs Google dalam menampilkan hasil pencariannya. Dimana pada bagian bawah terdapat link halaman yang ketika kita klik akan muncul daftar pencarian berikutnya. Itulah paging.
Kekurangan paging yang biasanya adalah harus loading ketika link halaman kita klik. Nah dengan jquery ajax ini tidak ada lagi yang namanya loading. Jadi ucapkan Good bye pada loading.
Penasaran, pengen coba? Download dulu aja file perkakas na. Akan ada beberapa file yang saya buat diantaranya :
index.php berupa file utama dari latihan kita. Disni juga berisi kode utama jquery yang 1.
menyebabkan efek ajax terjadi.
isi.php Adalah file yang berfungsi menampilkan isi dari database yang di maksud. Sebenarnya 2.
bisa saja kode dari isi.php saya gabungkan dengan index.php. Namun sengaja saya pisahkan agar gampang di pelajari intinya
koneksi.php Pasti kalian sudah tahulah ini file buat apa. Tapi bedanya saya pakai perintah 3.
file_database.sql ini buat di import pada PHP myadmin. Silahkan buat dulu databasenya 4.
bernama paging, terus import file ini.
ajax-loader.gif File animasi yang berguna untuk menampilkan animasi loading. Ini sih bakan 5.
kelihatan kalau koneksi internetnya lambat. Tapi kalau Anda coba di locahost, hampir ga kelihatan ini animasi.
folder css isinya file CSS doank (tapi penting sih) :p 6.
folder js Isinya file jquery 7.
Sudah di download. Silahkan Anda test saja di localhost masing-masing. Tahu kan caranya. Jangan bilang ga tahu, hehe.
Kalau sudh tampil, Jika Anda klik link halaman pada bagian bawah, maka otomatis konten data akan berganti tanpa menyebabkan loading pada browser.
Kok bisa begitu? Jawabannya ada pada file index.php pada baris 31-55. Itu adalah kode utama jquery yang memungkinkan ga terjadinya efek loading namun tetap terjadi pertukaran data.
Disini saya hanya coba menjelaskan kode-kode yang penting saja. Sedangkan yang lainnya saya kira Anda sudah bisa mengerti dan tidak perlu di jelaskan lagi. Oleh karena itu level untuk pembaca artikel ini adalah Anda yang sudah terbiasa dengan tekhnik paging manual serta paham fungsi-fungsi dasar jquery. Bagi yang belum ayok di pelajari dulu.
Langsung saja kita mulai. Sebelumnya Coba pelototin baris 14-23, disitu adalah kode spesial pembuat daftar link halaman secara otomatis
if($pages > 1) {
$pagination = '';
$pagination .= '<ul class="paginate">'; for($i = 1; $i<$pages; $i++)
{
$pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>';
}
$pagination .= '</ul>'; }
Dengan adanya kode itu, kalau kita mau menampilkan daftar link halaman seperti di bawah
Tinggal ketik aja $pagination di tempat mana ingin anda tampilkan. Praktis bukan? Nih pantengin dulu kode pada baris 33 secara teliti.
$("#results").load("isi.php", {'page':0}, function() {$("#1-page").addClass('active');});
Kode diatas adalah perintah yang pertama kali dieksekusi ketika halaman baru dimuat. Artinya dia akan memuat file isi.php kedalam elemen yang ber-ID results. Kalian dapat memodifikasi bagian #result dengan id style kesukaan kalian.
apa nih maksudnya kode berikut?
{$("#1-page")
nah berhubungan pada baris 20 ada kode tulisannya gini
id="'.$i.'-page">
karena id dari elemen <li> adalah $i-page ($i bisa angka apa aja). Maka disesuaikan pula dengan kode pada jquerynya jadi #1-page. Kalau nanti Anda mendapatkan id yang berbeda. Maka tinggal di sesuakan saja.
Lalu terakhir pada kode di situ kan ada perintah addClass(‘active’), bagi yang sering main jquery pasti tahulah. Gunanya untuk menambah class active pada link nomor 1. Efeknya ketika halaman pertama kali dimuat link nomor satu akan kelihatan beda dari nomor yang lain karena sudah di tambahkan class active.
Mana lagi nih kode yang penting?
Nih, keajaiban tekhnik ini berawal dari kode ini
$(".paginate_click").click(function (e) {
Kode di atas adalah awal dari keajaiban (yang bener donk ngasih penjelasan). Maaf nih, maksudnya kode diatas jika elemen yang ber-class .paginate_click di klik, maka akan menjalankan perintah selanjutnya. Jadi fungsinya hanya sebagai pemicu saja.
Lalu selanjutnya pada baris 37 ada kode seperti ini,
$("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>');
Berarti setelah link angka halaman di klik, elemen #results akan di isi dengan animasi ajax-loader.gif dan tulisan loading. Anda tentu bisa menggan bagian pada yang saya cetak tebal tersebut dengan tulisan atau apa saja. Misalnya dengan tulisan “sabar yah, orang sabar pasti wajahnya lebar” jadi kayak gini
$("#results").prepend('sabar yah, orang sabar pasti wajahnya lebar')
Haha, ajaran sesat. Jangan di ikutin. Intinya silahkan ganti dengan kalimat yang anda suka. Selanjutnya tepat di bawah kode tadi, ada lagi kode seperti ini
var clicked_id = $(this).attr("id").split("-"); var page_num = parseInt(clicked_id[0]);
Kode di atas hampir sama dengan fungsi explode pada PHP. Artinya dia akan memisahkan id dari elemen yang dipilihnya. Makanya dari penulisan format ID saya tulis $i-page agar mudah dalam pemotongannya.
Lalu ada fungsi parse_id[0], id yang sudah di potong menjadi dua bagian yakni bagian 0 dari sebelum tanda “-“, dan bagian 1 sesudah bagian “-“. Jadi yang diambil adalah bagian 0 dan di taruh pada variabel page_num. Nah, intinya variabel page_num sekarang berisi nilai dari halaman yang di klik.
Selanjutnya ada kode berikut
$('.paginate_click').removeClass('active');
Fungsinya untuk mencabut class active dari link halaman yang tadinya active. Kalau sebelumnya link halaman satu yang aktif, maka dengan kode di atas link nomor satu sudah tak aktif lagi.
Selanjutnya inilah kode yang akan di ekseskusi.
$("#results").load("isi.php", {'page':(page_num-1)}, function(){ });
Fungsinya adalah untuk memuat file isi.php ke dalam elemen ber-id results. Hampir sama sih fungsinya dengan kode baris ke-33. Bedanya kalau yang ini dia mengirimkan parameter posisi data ke file isi.php. Jadi data yang nantinya di tampilkan akan sesuai dengan posisi klik yang diminta. Jadi disitu ada kode {'page':(page_num-1)}, artinya kalau misalnya nilai variabel page_num itu 3, maka akan di kurangi 1. Jadinya nilai posisi yang di kirimkan ke file isi.php adalah 2. Jadi eksekusi query pada file isi.php akan menjadi
SELECT id,name,message FROM paginate ORDER BY id ASC LIMIT 2, 5
Paham? Bagi yang newbie pasti mabok nih. Hehe, tenang saja nanti juga akan mengerti. Oke lanjut lagi, terakhir adalah kode ini
$(this).addClass('active');
Kode itu untuk menambahkan class active pada link halaman yang di klik. Jadi kenapa ada $(this), itu mewakili elemen yang di klik.
Sampai disini sudah selesailah beberapa kode penting pada file index.php. Lanjut ke file isi. Php. Ada beberapa kode penting yang perlu Anda ketahui, diantaranya
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
Kode di atas hampir sama dengan fungsi $_POST[‘’} pada PHP. Yah gunanya untuk mendapatkan nilai halaman dari file index.php. Kok penulisannya panjang banget yah? Yah mau gimana lagi, karena di index.php kita mengirim nilai posisi datanya lewat jquery. Jadi mesti di sesuaikan dengan sintaksnya. Saya juga sebenarnya kurang paham sih dengan perintah di atas. Tapi sih intinya dia buat dapetin nilai aja (hadew).
Lalu kode berikut
if(!is_numeric($page_number)){die('Invalid page number!');}
Fungsinya hanya untuk memastikan saja kalu nilai posisi data yang di kirim berupa angka. Kalau tidak bakal terjadi penolakan mentah-mentah (udah kayak nembak cewe aja di tolak).
Setelah panjang lebar saya menjelaskan jadi intinya yah begitu. Terlepas Anda mengerti atau tidak yang saya jelaskan nyatanya file yang Anda download tetap berjalan. He-he.
Nah, itulah tekhnik paging menggunakan jquery-ajax. Silahkan Anda pelajari lebih lanjut. Mungkin kalau ada kesempatan di lain waktu saya akan berikan contoh penerapannya pada CMS Lokomedia. Yah sampai disini dulu yah, abangnya mau pulang. Jangan di like yah artikel kang dadan. (“””Ngarep.com”””)
Tentang Penulis
Dadan
Saya adalah pria biasa saja yang tumbuh semakin besar di lingkungan yang serba biasa, Semoga kehadiran saya disini bisa membantu Anda. ^_^
