Sortable Datagrid dengan Paginating Data

17 08 2008

English Version

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">
      <!-- Diisi dengan kode javascript -->
    </script>
  </head>
  <body>
    <form id="myForm" name="myForm" method="post">
      <div class="area">
        <br>
        <table width="80%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="right"><?  //Diisi kode untuk paginating ?></td>
          </tr>
          <tr><td align="right"> </td></tr>
        </table>
        <table width="80%" cellpadding="0" cellspacing="0" border="1" >
          <tr>
            <th width="0%"> </th>
            <th width="24%" onclick="<!--Function sort-->">Nomor Induk</th>
            <th width="24%" onclick="<!--Function sort-->">Nama Siswa</th>
            <th width="50%" onclick="<!--Function sort-->">Alamat Lengkap</th>
          </tr>
          <?  //Diisi kode looping data ?>
          <tr>
            <td> </td>
            <td><? //Diisi kode php echo ?></td>
            <td><? //Diisi kode php echo ?></td>
            <td><? //Diisi kode php echo ?></td>
          </tr>
          <? //Diisi kode penutup looping data ?>
        </table>
      </div>
    </form>
  </body>
</html>

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') {
    $field = 'no_induk';
  } else if ($fieldId == '2') {
    $field = 'nama';
  } else if ($fieldId == '3') {
    $field = 'alamat';
  } else {
    $field = 'no_induk';
  }
	
  $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;
?>

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') {
  $field = 'no_induk';
} else if ($fieldId == '2') {
  $field = 'nama';
} else if ($fieldId == '3') {
  $field = 'alamat';
} else {
  $field = 'no_induk';
}

$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

//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('');
        if (parseInt(par3) != lastPage) {
          par3 = par3 + 1;
        }
        document.myForm.action = "sortable.php?fieldId="+par1+"&sort="+par2+"&increValue="+par3;
        document.myForm.submit();
      }
    </script>
  </head>

Dipecah jadi dua bagian ya.. biar keliatan bagus… ^__^

  <body>
    <form id="myForm" name="myForm" method="post">
      <div class="area"><br>
        <table width="80%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td align="right">
              <? 	
                if ($increment == $first_pages) {
                  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>
          </tr>
          <tr><td align="right"> </td></tr>
        </table>
        <table width="80%" cellpadding="0" cellspacing="0" border="1" >
          <tr>
            <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>
          </tr>
          <!--  Jika menggunakan teknik limit offset mysql -->
            <?  while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {?>
              <tr>
                <td> </td>
                <td><? echo $line['no_induk']; ?></td>
                <td><? echo $line['nama']; ?></td>
                <td><? echo $line['alamat']; ?></td>
              </tr>
            <?  } ?>
				
          <!--  Jika menggunakan teknik array dan pemecahan batas atas dan batas bawah -->
          <?  for ($i = 0; $i < count($showData); $i++) { 
                  if ($i >= $firstEdge && $i <= $lastEdge) {?>
              <tr>
                <td> </td>
                <td><? echo $showData[$i]['no_induk']; ?></td>
                <td><? echo $showData[$i]['nama']; ?></td>
                <td><? echo $showData[$i]['alamat']; ?></td>
              </tr>
          <?      } 
              } ?>
        </table>
      </div>
    </form>
  </body>
</html>
<? 
  mysql_free_result($result);
  mysql_close($link); 
?>

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 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 teknik kedua teknik diatas itu karangan saya, saya belum searching di mbah google apakah teknik 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.

  View Pdf Version


Actions

Information

2 responses

26 03 2009
Syamsuri nur

pak klo mau sorting nya ditambah bertasarkan tiap field table gimana ya?

30 03 2009
agienthea

yang sy contohin di atas udah termasuk sorting berdasarkan tiap field juga lho…
kalo source codenya di copy… mungkin di local bisa dicoba… tinggal di click aza tiap header dari masing2 field udah langsung bisa sorting by field…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s




%d bloggers like this: