Menghasilkan Tabel Editor Sederhana Dengan Widget jQuery


Beberapa waktu lalu, seorang teman yang sedang mengerjakan tesis mencari saya, meminta bantuan untuk membuat sebuah tabel AJAX.    Sebagian besar orang-orang disini memandang bahwa tesis lebih condong ke pembahasan teoritis.  Saya sempat menawarkan padanya sebuah widget jQuery sederhana yang saya buat untuk keperluannya, yaitu jlSimpleTableEditor.  Keperluannya cukup sederhana: ia ingin bisa sebuah tabel HTML bisa di-edit, di-hapus dan di-tambah, tanpa harus repot di sisi kode program server (ia memakai PHP dan framework Symfony).  Wow, seandainya ia bukan seorang yang tidak ingin repot, ia sudah pasti memakai jqGrid yang saya sarankan dari awal.  Akan tetapi, bila memakai jqGrid, maka kode program PHP-nya harus mengembalikan JSON dan XML, dan ini akan membuatnya tidak betah coding.

Widget jlSimpleTableEditor pada dasarnya adalah sebuah tabel dinamis yang sangat sederhana dan tidak membutuhkan banyak modifikasi di sisi server.  Karena saking sederhananya, saya tidak yakin widget ini akan berguna selain untuk  tesis teman saya (bahkan pada akhirnya teman saya tidak ingin memakai widget dan lebih senang men-copy paste plain old JavaScript yang saya buat!)

jlSimpleTableEditor dapat di-download di link berikut ini:  https://docs.google.com/open?id=0B-_rVDnaVRCbc0p2LVo1R0R0clU.  Klik menu File, Download untuk men-dowload file ZIP tersebut. Untuk memakainya, copy paste folder jquery-ui-1.9.1.custom dan widget ke folder proyek.  Lalu, untuk menguji widget tersebut, saya akan sebuah file tampil.php.  Sebagai contoh, saya memakai Zend Studio, sehingga struktur proyek saya terlihat seperti berikut ini:

Struktur Proyek

Struktur Proyek

Lalu, saya akan login ke MySQL sebagai user jocki dan password berupa password, dan memakai database latihan.  Saya juga akan membuat sebuah tabel kosong, seperti yang diperlihatkan oleh perintah di MySQL command line pada gambar berikut ini:

Membuat Tabel Di MySQL

Membuat Tabel Di MySQL

Berikutnya, saya membuat sebuah file CSS yang saya beri nama style.css yang akan menentukan tampilan dari jlSimpleTableEditor.  File ini tidak wajib ada.  Tanpa ada CSS yang memberikan format, tampilan jlSimpleTableEditor akan persis seperti tampilan tabel HTML yang polos.  Isi dari file style.css adalah:

/* tombol tambah */
.tblDinamis-tombol-tambah {
	-webkit-box-shadow: rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow: rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 0 0;
	color: #333;
	background-color: #FA2;
	border: none;
	border-radius: 5px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 16px;
	padding: 4px 16px;
	text-shadow: #FE6 0 1px 0;
	margin-bottom: 10px;
	cursor: pointer;
}
.tblDinamis-tombol-tambah:hover {
	opacity: 0.8;
}

/* tombol edit */
.jlEdit, .jlHapus {
	background: #feda71;
	background: -moz-linear-gradient(top, #feda71 0%, #febb49 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #feda71),color-stop(100%,#febb49));
	background: -webkit-linear-gradient(top, #feda71 0%, #febb49 100%);
	padding: 4px 20px;
	color: #623f1d;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 12px;
	border-radius: 20px;
	border: 1px solid #623f1d;
	margin-bottom: 5px;
	cursor: pointer;				
}
.jlEdit:hover, .jlHapus:hover {
	opacity: 0.5;
}

/* tabel */
#tblDinamis {
	font: 17px/30px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 520px;
}
#tblDinamis th {
	padding: 0 0.5em;
	text-align: left;
	background-color: #FFE45C;
}
#tblDinamis tr {
	border-top: 1px solid #fb7a31;
	border-bottom: 1px solid #fb7a31;
	background: #ffc;
}
#tblDinamis td {
	border-bottom: 1px solid #ccc;
	padding: 0 0.5em;
}

Berikutnya, saya mengubah kode program pada lihat.php menjadi seperti berikut ini:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
      <script src="jquery-ui-1.9.1.custom/js/jquery-1.8.2.js"></script>
      <script src="jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
      <script src="widget/jquery.ui.jlSimpleTableEditor.js"></script>
      <link rel="stylesheet" href="jquery-ui-1.9.1.custom/css/ui-lightness/jquery-ui-1.9.1.custom.css" />
      <link rel="stylesheet" href="style.css" />
      <script type="text/javascript">
	$(function() {
	   $("#tblDinamis").jlSimpleTableEditor({
	     parameterKolom: ["nim", "nama", "nilai"],  
  	     label: ["NIM", "Nama Lengkap", "Nilai (Grade)"],
	     tipeKolom: ["string", "string", ["A","B","C","D","E"]],  
	     dialogOptions: { title: "Edit Data" },
	   });			
	});
      </script>
  </head>
  <body>		
    <form method="post" action="simpan.php">
      <table id="tblDinamis">
	<thead>
	   <tr><th>NIM</th><th>Nama</th><th>Nilai</th></tr>
	</thead>
	<tbody>
	<?php 
	  $cn = mysqli_connect("localhost", "jocki", "password", "latihan");
	  $result = mysqli_query($cn, "select nim, nama, nilai from mhs");
	  while ($baris = mysqli_fetch_row($result)) {
	    print "<tr><td>{$baris[0]}</td><td>{$baris[1]}</td><td>${baris[2]}</tr>";	
	  }					
	?>
	</tbody>
        <input type="submit" value="Simpan" style="margin-top: 20px" />
       </table>		
    </form>
   </body>
</html>

Disini terlihat kelebihan dari jlSimpleTableEditor (sesuai tujuan awalnya!).  Kode program untuk menampilkan tabel adalah kode program yang membentuk tabel HTML biasa (<table>, <tbody>, <tr>, dan <td>).  Tag <table> ini harus berada dalam sebuah tag <form> yang berisi action.  Nantinya, bila tombol submit dipilih, data tabel akan dikirim ke halaman yang ditentukan oleh tag <form>, dalam hal ini adalah halaman simpan.php.

Sekarang, bila saya membuka halaman ini di-browser, saya akan menemukan sebuah tabel yang telah dilengkapi tombol “Tambah” seperti terlihat pada gambar berikut ini:

Tampilan jlSimpleTableEditor Tanpa Data

Tampilan jlSimpleTableEditor Tanpa Data

Bila saya men-klik tombol “Tambah” tersebut, secara otomatis akan muncuk kotak dialog untuk mengisi data baru.  jlSimpleTableEditor akan membuat isi  kotak dialog berdasarkan nilai labelKolom dan tipeKolom yang diberikan pada saat inisialisasi widget.  Pada halaman HTML di atas, tampilan dialog-nya akan terlihat seperti berikut ini:

Dialog Tambah Dari jlSimpeTableEditor

Dialog Tambah Dari jlSimpeTableEditor

Setelah menekan tombol OK, akan muncul sebuah baris baru di tabel.  jlSimpleTableEditor akan secara otomatis memberikan tombol “Edit” dan tombol “Hapus” pada setiap baris yang ada, seperti yang terlihat pada gambar berikut ini:

Tampilan jlSimpleTableEditor Dengan 1 baris data

Tampilan jlSimpleTableEditor Dengan 1 baris data

Tanpa perlu banyak coding, saya telah memperoleh fitur untuk “Tambah”, “Edit” dan “Hapus”.  Perlu diingat bahwa sampai disini, data masih belum tersimpan ke database, melainkan ditampung dalam bentuk <input type=”hidden” />.  Untuk benar-benar menyimpan data ke database, pengguna harus men-klik tombol “Simpan”.  Gambar berikut ini memperlihatkan cara kerja jlSimpleTableEditor:

Menyimpan data di jlSimpleTableEditor

Menyimpan data di jlSimpleTableEditor

Sebagai langkah terakhir, saya perlu membuat halaman simpan.php untuk melakukan penyimpanan data.  Isi simpan.php akan terlihat seperti berikut ini:

<?php
  $jumlahBaris = $_POST['jumlahBaris'];
  $cn = mysqli_connect("localhost", "jocki", "password", "latihan");
  mysqli_query($cn, "DELETE FROM mhs");
  $stmt = mysqli_prepare($cn, "INSERT INTO mhs VALUES (?,?,?)");
  mysqli_stmt_bind_param($stmt, "sss", $nim, $nama, $nilai);
  for ($i=0; $i<$jumlahBaris; $i++) {
    $nim = $_POST["nim$i"];
    $nama = $_POST["nama$i"];
    $nilai = $_POST["nilai$i"];
    mysqli_stmt_execute($stmt);
  }
  mysqli_close($cn);
  header('Location: tampil.php');	
?>

Isi kode program di atas tidak ada yang spesial.  Yang dilakukan hanya membaca nilai yang dikirim oleh jlSimpleTableEditor berupa jumlahBaris, nim0, nama0, nilai0, nim1, nama1, nilai1, nim2, nama2, nilai2, dan seterusnya.  Nama parameter yang dikirim oleh jlSimpleTableEditor ditentukan oleh nilai parameterKolom yang diberikan pada saat inisialisasi widget.

Pada kode program di atas, saya menghapus dulu seluruh isi tabel.  Hal ini karena dibutuhkan kode program yang lebih panjang lagi untuk  mendeteksi update.  Saya pikir teman saya yang menginginkan cara gampang pasti tidak tertarik!  Yup, ia pasti lebih senang dengan satu baris DELETE. “Bukankah semakin cepat tesis selesai bisa semakin cepat mendapat gelar dan bisa lega?” Mungkin kira-kira begitu katanya.

Perihal Solid Snake
I'm nothing...

One Response to Menghasilkan Tabel Editor Sederhana Dengan Widget jQuery

  1. Ping-balik: Memahami Event Bubbling dan Method .on() di jQuery « The Solid Snake

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: