Sortable Datagrid dengan Paginating Data

Transkripsi

1 Sortable Datagrid dengan Paginating Data Sebelumnya saya mohon maaf, sudah absen beberapa lama tidak ada artikel yang dibuat. Pada kesempatan kali ini akan kita coba membahas tentang Datagrid yang ditambah dengan kemampuan sortable field untuk setiap field yang ditampilkan baik itu ascending ataupun descending, selain itu juga ditambah dengan kemampuan paginating data, sehingga jika kita ingin menampilkan data dengan jumlah yang mencapai banyak sekali, kita tidak perlu ada proses scrolling dimana proses tersebut diganti dengan proses paginating dengan membagi data menjadi beberapa halaman. Yang pertama harus dilakukan adalah buat tabel yang berisi data yang akan ditampilkan, sebagai contoh; kita gunakan tabel 'tbl_siswa' dengan database mysql. Kemudian persiapkan sebuah file php untuk menampilan datagrid tersebut, kita beri nama 'sortable.php' kemudian mulai diisi kode template html table sebagai berikut: <html> <head> <title>editable Data Grid</title> <script type="text/javascript" language="javascript">  </script> </head> <body> <form id="myform" name="myform" method="post"> <div class="area"> <br> <table width="80%" cellpadding="0" cellspacing="0" border="0"> <td align="right"> //Diisi kode untuk paginating </td> <td align="right"> </td> <table width="80%" cellpadding="0" cellspacing="0" border="1" > <th width="0%"> </th> <th width="24%" onclick="">nomor Induk</th> <th width="24%" onclick="">nama Siswa</th> <th width="50%" onclick="">alamat Lengkap</th> //Diisi kode looping data <td> </td> <td> //Diisi kode php echo </td> <td> //Diisi kode php echo </td> <td> //Diisi kode php echo </td> //Diisi kode looping data </div> </form> </body> </html> Sortable Datagrid dengan Paginating Data Page 1 of 7

2 Setelah kode template, maka kode berikutnya yang harus ditulis adalah kode php untuk query data tabel 'tbl_siswa' terhadap database, dengan terlebih dahulu menuliskan inisialisasi variabel variabel yang akan diperlukan dalam proses panggil data beserta sorting dan paginating data, berikut kode php yang dituliskan dengan posisi penulisan diletakkan di atas kode template yang sudah terlebih dahulu dituliskan diatas: $fieldid = 1; if (isset($_request['fieldid'])) {$fieldid = $_REQUEST['fieldId']; $lastsort = 'asc'; if (isset($_request['sort'])) {$lastsort = $_REQUEST['sort']; $link = mysql_connect('localhost', 'root', 'admin'); if (!$link) {die('could not connect: '. mysql_error()); $link1 = mysql_select_db('latih'); if (!$link1) {die('could not select database'); if ($fieldid == '1') { else if ($fieldid == '2') { $field = 'nama'; else if ($fieldid == '3') { $field = 'alamat'; else { $query0 = 'SELECT id, no_induk, nama, alamat FROM tbl_siswa ORDER BY '.$field.' '.$lastsort; $resultrow = mysql_query($query0); $num_rows = mysql_num_rows($resultrow); $first_pages = 1; $data_content = 5; $last_pages = ceil($num_rows / $data_content); $increment = $first_pages; if (isset($_request['increvalue'])){$increment = $_REQUEST['increValue']; //jika paging menggunakan teknik limit offset mysql $query1 = 'SELECT id, no_induk, nama, alamat FROM tbl_siswa ORDER BY '.$field.' '.$lastsort.' LIMIT '.$data_content.' OFFSET '.$increment; $result = mysql_query($query0); if (!$result) {die('query failed: '. mysql_error()); //jika paging menggunakan teknik array sebagai penyimpanan data sementara, kemudian dipecah array tersebut berdasarkan batas atas dan bawah $idx = 0; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { $showdata[$idx]['no_induk'] = $line['no_induk']; $showdata[$idx]['nama'] = $line['nama']; $showdata[$idx]['alamat'] = $line['alamat']; $idx++; $firstedge = ($data_content * $increment) - $data_content; $lastedge = ($data_content * $increment) - 1; Sortable Datagrid dengan Paginating Data Page 2 of 7

3 Setelah kode pembuka connection beserta cara query data dilakukan, jangan lupa untuk menutup kembali connection menggunakan script PHP juga yang diletakkan di bawah kode template tersebut: mysql_free_result($result); mysql_close($link); Jangan lupa untuk menuliskan kode javascript untuk mengaktifkan trigger sorting dan trigger paging, kemudian tempelkan nama function function javascript tersebut ke kode template yang sudah ke setiap onclick yang sudah ditandai dengan warna merah seperti yang telah di tulis diatas, maka jika kode template html, javascript dan php digabung maka kode akan seperti berikut: $fieldid = 1; if (isset($_request['fieldid'])) {$fieldid = $_REQUEST['fieldId']; $lastsort = 'asc'; if (isset($_request['sort'])) {$lastsort = $_REQUEST['sort']; $link = mysql_connect('localhost', 'root', 'admin'); if (!$link) {die('could not connect: '. mysql_error()); $link1 = mysql_select_db('latih'); if (!$link1) {die('could not select database'); if ($fieldid == '1') { else if ($fieldid == '2') { $field = 'nama'; else if ($fieldid == '3') { $field = 'alamat'; else { $query0 = 'SELECT id, no_induk, nama, alamat FROM tbl_siswa ORDER BY '.$field.' '.$lastsort; $resultrow = mysql_query($query0); $num_rows = mysql_num_rows($resultrow); $first_pages = 1; $data_content = 5; $last_pages = ceil($num_rows / $data_content); $increment = $first_pages; if (isset($_request['increvalue'])) {$increment = $_REQUEST['increValue']; //awal jika paging menggunakan teknik limit offset mysql $query1 = 'SELECT id, no_induk, nama, alamat FROM tbl_siswa ORDER BY '.$field.' '.$lastsort.' LIMIT '.$data_content.' OFFSET '.$increment; $result = mysql_query($query1); if (!$result) {die('query failed: '. mysql_error()); //akhir jika paging menggunakan teknik limit offset mysql Sortable Datagrid dengan Paginating Data Page 3 of 7

4 //awal jika paging menggunakan teknik array sebagai penyimpanan data sementara, //kemudian dipecah array tersebut berdasarkan batas atas dan bawah $result = mysql_query($query0); if (!$result) {die('query failed: '. mysql_error()); $idx = 0; while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { $showdata[$idx]['no_induk'] = $line['no_induk']; $showdata[$idx]['nama'] = $line['nama']; $showdata[$idx]['alamat'] = $line['alamat']; $idx++; $firstedge = ($data_content * $increment) - $data_content; $lastedge = ($data_content * $increment) - 1; //akhir jika paging menggunakan teknik array sebagai penyimpanan data sementara, //kemudian dipecah array tersebut berdasarkan batas atas dan bawah <html> <head> <title>editable Data Grid</title> <script type="text/javascript" language="javascript"> function sortablefield(par1,par2,par3) { if (par2 == "asc") { var lastsort = "desc"; else if (par2 == "desc") { var lastsort = "asc"; else { var lastsort = "asc"; document.myform.action = "sortable.php?fieldid="+par1+ "&sort="+lastsort+"&increvalue="+par3; document.myform.submit(); function prev(par1,par2,par3) { if (parseint(par3)!= 1) { par3 = par3-1; document.myform.action = "sortable.php?fieldid="+par1+ "&sort="+par2+"&increvalue="+par3; document.myform.submit(); function next(par1,par2,par3) { var lastpage = parseint(' echo $last_pages; '); if (parseint(par3)!= lastpage) { par3 = par3 + 1; document.myform.action = "sortable.php?fieldid="+par1+ "&sort="+par2+"&increvalue="+par3; document.myform.submit(); </script> </head> <body> <form id="myform" name="myform" method="post"> <div class="area"><br> <table width="80%" cellpadding="0" cellspacing="0" border="0"> <td align="right"> if ($increment == $first_pages) { Sortable Datagrid dengan Paginating Data Page 4 of 7

5 echo ' prev '; else { <a href="#" onclick="prev( echo $fieldid;, ' echo $lastsort; ', echo $increment; );">prev</a> echo $increment." of ".$last_pages; if ($increment == $last_pages) { echo ' next '; else { <a href="#" onclick="next( echo $fieldid;, ' echo $lastsort; ', echo $increment; );">next</a> </td> <td align="right"> </td> <table width="80%" cellpadding="0" cellspacing="0" border="1" > <th width="0%"> </th> <th width="24%" onclick="sortablefield(1,' echo $lastsort; ', echo $increment; );">Nomor Induk</th> <th width="24%" onclick="sortablefield(2,' echo $lastsort; ', echo $increment; );">Nama Siswa</th> <th width="50%" onclick="sortablefield(3,' echo $lastsort; ', echo $increment; );">Alamat Lengkap</th>  while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { <td> </td> <td> echo $line['no_induk']; </td> <td> echo $line['nama']; </td> <td> echo $line['alamat']; </td>  for ($i = 0; $i < count($showdata); $i++) { if ($i >= $firstedge && $i <= $lastedge) { <td> </td> <td> echo $showdata[$i]['no_induk']; </td> <td> echo $showdata[$i]['nama']; </td> <td> echo $showdata[$i]['alamat']; </td> </div> </form> </body> </html> mysql_free_result($result); mysql_close($link); Sortable Datagrid dengan Paginating Data Page 5 of 7

6 Dari contoh kode diatas sengaja dituliskan dua macam teknik paginating, masing masing dari teknik diatas mempunyai kelebihan dan kekurangan, jika kita menggunakan teknik limit offset keuntungan yang akan kita dapatkan adalah kecepatan loading data, karena algoritma paging sudah diserahkan ke server database, tetapi mempunyai kelemahan data paging yang ditampilkan akan selalu mempunyai limit yang sama dari awal page sampai akhir page, jika data misalkan mempunyai data 23 record dengan limit 10, menurut algoritma paging maka akan menghasilkan tiga halaman dengan masing masing halaman menampilkan 10 record kecuali halaman terakhir akan menampilkan tiga record, tetapi hal ini tidak akan berlaku jika kita menggunakan teknik limit offset mysql, data terakhir akan menampilkan 10 record, untuk memenuhi syarat limit 10 dengan mengambil sebagian data yang sudah ditampilkan di halaman kedua ditampilkan kembali dihalaman tiga. Hal ini memberikan kesan program tersebut error (mungkin benar benar error kali ya..? ^ ^ ). Sedangkan jika kita menggunakan teknik array batas atas dan batas bawah, hasil yang ditampilkan akan sesuai dengan algoritma yang kita tentukan, tetapi dengan pengorbanan waktu loading yang akan berat jika data sudah mencapai ribuan, ratusan ribu bahkan jutaan. Dikarenakan data yang ambil dari tabel tersebut lebih dulu diambil seluruh datanya, kemudian difilter disisi aplikasi PHP yang kita buat. Dari kedua teknik ini keputusan diserahkan kepada developer akan menggunakan teknik yang mana. Berikut tampilan yang akan dihasilkan dari browser dengan source code diatas: Dari gambar diatas trigger paginate dapat dilakukan dengan klik link prev atau next, jika halaman sedang berada diposisi pertama maka link prev akan tidak berfungsi, jika halaman sedang berada diposisi terakhir maka link next tidak akan berfungsi. Sedangkan untuk trigger ascending dan descending dari masing masing field, cukup dengan klik header tabel dari Sortable Datagrid dengan Paginating Data Page 6 of 7

7 masing masing field tersebut maka field otomatis akan terurut secara otomatis. Tidak diperlukan properties asc atau desc untuk sorting karena properties tersebut sudah di setting otomatis tiap klik header maka akan bergantian asc dan desc. Sebagai catatan nama kedua teknik diatas itu karangan saya, saya belum searching di mbah google apakah nama teknik seperti itu ada atau tidak (^ ^V peace). Okeh dech selamat mencoba! Mungkin saat ini hanya sekian ilmu yang bisa dibagi dengan pembaca semoga bermanfaat, jika ada kekurangan atau masukan yang dapat meningkatkan kemampuan jangan sungkan untuk memberikan komentar, berikut source code lengkap dari proses diatas dalam satu file berupa file pdf yang dapat diambil di Source Code. Sortable Datagrid dengan Paginating Data Page 7 of 7