Membuat Editable Datagrid menggunakan Javascript

15 07 2008

Pada kesempatan ini saya akan coba menyampaikan materi tentang bagaimana membuat tampilan editable datagrid dari suatu tabel mysql ke dalam browser menggunakan bahasa pemrograman php yang digabung dengan javascript.

Sebelum memulai proses programming, baiknya kita menyiapkan suatu table dalam mysql terlebih dahulu, dalam hal ini penulis mengambil contoh table seperti dalam artikel “Insert Data Menggunakan Database MySQL, PostgreSQL, Oracle”, setelah proses terhadap database selesai sekarang proses programming dimulai dengan membuat suatu file untuk halaman pertama dalam browser dengan menggunakan “editable.php”, yang kode seperti berikut:

<html>
  <head>
    <title>Editable Data Grid</title>
    <script type="text/javascript" language="javascript">
      <!-- Diisi oleh kode javascript -->
    </script>
  </head>
  <body onload="javascript:genData();">
    <form action="editable1.php" name="myForm" method="post">
      <div class="area">
        <br>
        <table><tr><td></td></tr></table>
        <table width="80%" cellpadding="0" cellspacing="0" border="1" id="lineItemTable">
          <tr>
            <th width="0%"> </th>
            <th width="2%" align="center"><input type="checkbox" name="checkMaster" id="checkMaster" /></th>
            <th width="24%">Nomor Induk</th>
            <th width="24%">Nama Siswa</th>
            <th width="50%">Alamat Lengkap</th>
          </tr>
        </table>
        <table><tr><td><input type="submit" value="SUBMIT"></td></tr></table>
      </div>
    </form>
  </body>
</html>

Setelah proses membuat kode dasar selesai, sekarang kita akan menambahkan kode javascript untuk melengkapi tampilan diatas supaya dapat melakukan proses generate row data dibawah row header dari table diatas, dengan kode javascript yang akan disisipkan pada tanda tulisan yang berwarna merah diatas, maka kodenya menjadi seperti berikut:

function genData() {
  <? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
    var tbl = document.getElementById("lineItemTable");
    var row = tbl.insertRow(tbl.rows.length);
				
    var td0 = document.createElement("td");
    var td1 = document.createElement("td");
    var td2 = document.createElement("td");
    var td3 = document.createElement("td");
    var td4 = document.createElement("td");
			
    td0.appendChild(generateIndex(row.rowIndex,"<? echo $line['id']; ?>"));
    td1.appendChild(generateCheckBox(row.rowIndex));
    td2.appendChild(generateNomorIndukText(row.rowIndex,"<? echo $line['no_induk']; ?>"));
    td2.appendChild(generateNomorIndukLabel(row.rowIndex,"<? echo $line['no_induk']; ?>"));
    td3.appendChild(generateNamaSiswaText(row.rowIndex,"<? echo $line['nama']; ?>"));
    td3.appendChild(generateNamaSiswaLabel(row.rowIndex,"<? echo $line['nama']; ?>"));
    td4.appendChild(generateItemNameText(row.rowIndex,"<? echo $line['alamat']; ?>"));
    td4.appendChild(generateItemNameLabel(row.rowIndex,"<? echo $line['alamat']; ?>"));
				
    row.appendChild(td0);
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
  <? } ?>
}

Kemudian diperlukan juga function penunjang sebagai berikut:

function generateIndex(index, param) {
  var idx  = document.createElement("input");
  idx.type = "hidden";
  idx.name = "index[ ]";
  idx.id   = "index["+index+"]";
  idx.value = param;
			
  return idx;
}
							
function generateCheckBox(index) {
  var check = document.createElement("input");
  check.type = "checkbox";
  check.name = "check[ ]";
  check.id = "check["+index+"]";
			
  return check;
}
			
function generateNomorIndukText(index, param) {
  var idx  = document.createElement("input");
  idx.type = "text";
  idx.name = "nomorInduk[ ]";
  idx.id   = "nomorIndukTxt["+index+"]";
  idx.size = "15";
  idx.value = param;
  idx.style.display = 'none';
  idx.onblur = function (e) {
    idx.style.display = 'none';
    var indukLbl = document.getElementById("nomorIndukLbl["+index+"]");
    indukLbl.innerHTML = idx.value;
    indukLbl.style.display = 'block';
  };
				
  return idx;
}
			
function generateNomorIndukLabel(index, param) {
  var idx  = document.createElement("div");
  idx.id   = "nomorIndukLbl["+index+"]";
  idx.innerHTML = param;
  idx.style.display = 'block';
  idx.onclick = function () {
    idx.style.display = 'none';
    var indukTxt = document.getElementById("nomorIndukTxt["+index+"]");
    indukTxt.style.display = 'block';
  };
				
  return idx;
}
			
function generateNamaSiswaText(index, param) {
  var idx  = document.createElement("input");
  idx.type = "text";
  idx.name = "namaSiswa[ ]";
  idx.id   = "namaSiswaTxt["+index+"]";
  idx.size = "25";
  idx.value = param;
  idx.style.display = 'none';
  idx.onblur = function (e) {
    idx.style.display = 'none';
    var siswaLbl = document.getElementById("namaSiswaLbl["+index+"]");
    siswaLbl.innerHTML = idx.value;
    siswaLbl.style.display = 'block';
  };
				
  return idx;
}
			
function generateNamaSiswaLabel(index, param) {
  var idx  = document.createElement("div");
  idx.id   = "namaSiswaLbl["+index+"]";
  idx.innerHTML = param;
  idx.style.display = 'block';
  idx.onclick = function () {
    idx.style.display = 'none';
    var siswaTxt = document.getElementById("namaSiswaTxt["+index+"]");
    siswaTxt.style.display = 'block';
  };
				
  return idx;
}
function generateItemNameText(index, param) {
  var itemName  = document.createElement("input");
  itemName.type = "text";
  itemName.name = "alamatSiswa[ ]";
  itemName.id   = "alamatSiswaTxt["+index+"]";
  itemName.size = "40";
  itemName.value = param;
  itemName.style.display = 'none';
  itemName.onblur = function (e) {
    itemName.style.display = 'none';
    var alamatLbl = document.getElementById("alamatSiswaLbl["+index+"]");
    alamatLbl.innerHTML = itemName.value;
    alamatLbl.style.display = 'block';
  };
				
  return itemName;
}
			
function generateItemNameLabel(index, param) {
  var itemName  = document.createElement("div");
  itemName.id   = "alamatSiswaLbl["+index+"]";
  itemName.innerHTML = param;
  itemName.style.display = 'block';
  itemName.onclick = function () {
    itemName.style.display = 'none';
    var alamatTxt = document.getElementById("alamatSiswaTxt["+index+"]");
    alamatTxt.style.display = 'block';
  };
			
  return itemName;
}

Setelah kode javascript disisipkan kedalam tag script tidak serta merta kode tersebut dapat langsung berfungsi dengan baik, karena perlu di perhatikan pada javascript function “genData();” ada tag “<? while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>” yang berisi kode php, dan kode ini merupakan bagian dari kode php yang harus terlebih dahulu didefinisikan untuk mengambil data dari database, selain dari tag diatas ada juga tag “<? echo $line[‘id’]; ?>” yang merupakan penguraian data field dari kode mysql_fetch_array sebelumnya, berikut akan diuraikan kode php yang harus ditulis untuk mendefinisikan pengambilan data pada database yang harus diposisikan diatas tag html, dengan kode sebagai berikut:

<? 	
    $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');
    }

    $query = 'SELECT id, no_induk, nama, alamat FROM tbl_siswa';
    $result = mysql_query($query);
    if (!$result) {
        die('Query failed: ' . mysql_error());
    } 
?>

Dan jangan lupa untuk menuliskan kode penutup connection database setelah proses pengambilan data dan memasukannya kedalam kode javascript selesai, kode penutup connection itu harus diletakkan di bawah tag html tutup di baris paling bawah dalam file “editable.php”, dengan kode seperti berikut:

<? 
// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link); 
?>

Setelah seluruh kode untuk membangun tampilan awal selesai maka kita bisa mendapatkan tampilan pada browser dengan asumsi tabel pada database telah dibangun dan mempunyai record data yang bisa ditampilkan, maka hasilnya seperti berikut:

Dan jika kita click salah satu datafield yang tertera pada browser, dan melakukan editing pada field tersebut maka akan menghasilkan tampilan seperti berikut:

Jika proses editing selesai, yang harus kita lakukan hanya click tombol submit, maka proses editing tersebut akan tersimpan di database dengan tampilan seperti berikut:

Tapi seperti apa proses yang terjadi di belakang tombol submit, pada dasarnya proses yang terjadi sama seperti proses insert yang ada pada artikel “Insert Data Menggunakan Database MySQL, PostgreSQL, Oracle”, letak perbedaannya hanya ada pada proses insert pada artikel terdahulu sedangkan pada proses ini yang terjadi adalah proses update, berikut kode update tersebut yang tercantum pada file “editable1.php”:

<?
    $link = mysql_connect('localhost', 'root', 'admin');
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
	
    $index         = $_POST['index'];
    $check         = $_POST['check'];
    $nomorInduk    = $_POST['nomorInduk'];
    $namaSiswa     = $_POST['namaSiswa'];
    $alamatSiswa   = $_POST['alamatSiswa'];
	
    $link1 = mysql_select_db('latih');
    if (!$link1) {
        die('Could not select database');
    }
	
    $table = 'tbl_siswa';
    if (is_array($index)) {
        echo count($index);
        for ($i = 0; $i < count($index); $i++) {
            //echo $index[$i]." ".$nomorInduk[$i]." ".$namaSiswa[$i]." ".$alamatSiswa[$i]."<br>";
            mysql_query("LOCK TABLES " . $table . " WRITE;");
            mysql_query("UPDATE " . $table . " SET no_induk = '$nomorInduk[$i]', nama = '$namaSiswa[$i]', alamat = '$alamatSiswa[$i]' WHERE id = '$index[$i]';");
            mysql_query("UNLOCK TABLES;");
        }
    }
	
    mysql_close($link);
?>

Ada sedikit tambahan kode javascript yang disimpan dipaling bawah dari file “editable1.php” dengan tujuan jika proses update selesai, maka tampilan browser di arahkan ke halaman semula, dengan kode sebagai berikut:

<script type="text/javascript" language="javascript">
	window.location = "/editable.php";
</script>

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

Advertisements

Actions

Information

31 responses

6 01 2009
Syamsuri Nur

mas … lampirin yang lengkap dong ama sql buat databasenya ….
gak mudeng2 neh mas ….
maklum newbiee..

6 01 2009
agienthea

wah tampaknya sudah lengkap tuh… kira2 yg mana yg kurang lengkap nya ya…?

6 04 2009
erwin

wah,, tutorialnya sangat mbantu mas…
bikin tutorial laen dunk…
tentang javascript yang banyak sama JQuery juga…

8 04 2009
agienthea

sip.. boss.. ini juga sambil menulis lagi nih… tp aktifitas kerja sangat menyita waktu.. jd begitu sampe ke rumah.. energi utk menulis sudah habis terkuras utk kerja… yah semoga waktu2 ke depan ada waktu luang utk menulis lg…

21 04 2009
Rumput_hijau

Kok dicoba ngga ngupdate ya bos waktu di submit ? cuma nyampe proses edit aja , tolong dunk, makasih

22 04 2009
agienthea

ada message error nya ngak…? soalnya barusan sy coba test lagi source code nya ngak ada masalah tuh… kecuali klo source nya ngopy dr pdf yg sy kasih… tolong di rapihin dl javascript nya… soalnya biasanya klo hasil ngopy dr pdf… suka agak acak2an…

23 04 2009
Rumput_hijau

Ok makasih dah bisa jalan ,ternyata di mysql-nya ada kurang record id 😀 sorry lagi belajar

23 04 2009
Rumput_hijau

Ok makasih dah bisa jalan ,ternyata di mysql-nya kurang record id 😀 ….sorry lagi belajar ni

23 04 2009
agienthea

ok sip… 😉 ngak apa2… sama2 masih belajar koq…

26 04 2009
yayan

Ini dia yang sy cari2, pass banget tutorialnya ! pas butuh pas dapet.

Buat yang lebih maknyuuuus lagi donk, tapi makasih ya atas tutorialnya.
Coba ach !

Numpang lewat :
Tips & Trik Joomla : http://www.inspirasiweb.co.cc

30 04 2009
danu

minta ijin ngopi halaman ini ya mas,,,
niubie ni

30 04 2009
agienthea

@danu
oke… silakan… bebas koq… tp di artikel paling bawah ada link pdf version… itu aza di click dan download… 😉

23 06 2009
firsan

terima kasih ya, bagus nih lumayan buat pembelajaran 😉

28 06 2009
adi

maz nanya nih ku da nyoba’ bwt databasenya terus udah diisi data tapi koq data yg ada didatabase ga’ muncul napa ya……

dtbasenya udah buat persis dgn scriptnya

28 06 2009
agienthea

@adi:
kalo datanya ngak muncul… pertama coba cek database addres, username sama password nya udah sama apa blom…? klo ternyata udah…

coba cek nama schema database nya udah sama apa blom…

klo dah sama jg… coba cek javascript nya…. kali aza ada yg seharusnya jgn ada spasi jd ada spasi… or kali aza seharusnya disatu bariskan script nya malah jd 2 baris…

selamat mencari bugs… 😉

2 03 2010
simbok

wah, telat saya dapat artikel ini.
trims pak, artikelnya menolong sekali.

ada pertanyaan nih pak,
bisa nggak tabel ini digunakan untuk proses insert? gimana caranya pak?
trims.

3 03 2010
agienthea

bisa… tinggal di tambah ada proses add new row.. menggunakan javascript…

trus di php coding nya ditambah pengecekan ke database… jika data tidak ada lakukan proses insert jika data sudah ada lakukan proses update…

selamat mencoba… 😀

29 04 2012
surya

maksih bnget mas,,,artikelnya bagus,,,,,pas lagi buth nie,,,,

nani kalau saya nanyak2 seputar PHP dan java script bleh ya mas,,,,

27 09 2012
agienthea

sama…. silakan… dengan senang hati bisa membantu…. 😉

30 04 2012
surya

mas aku jalankan kok ga bisa ya,,,,,,,yang muncul cuma judul datagridnya aja tapi isinya gak ada,,,,,,
itu knp ya mas?

27 09 2012
agienthea

bisa dicopas source code nya..? biar saya bisa coba di local sy….

4 07 2012
acang

agienthea memang keren…..

27 09 2012
agienthea

makasih…. 😉

25 09 2012
Lirik yes

mantap gan numpang copas yach.hehehe

27 09 2012
agienthea

silakan…. 😀

28 12 2012
BJuser

Mantaap gan, ane coba ya? sukses terus gan

21 01 2013
Faisal

mas tanya saya sudah mencoba tutorial yang mas berikan n berhasil. tp saya mau ngasih css di row nya gimana caranya y mas..? makasih.

21 01 2013
agienthea

css di row nya ya..? bukan di element didalam row nya ya..?

didalam function “genData()” setelah baris “row.appendChild(td4);” bisa di sisipkan perintah ini.

contoh:
var myStyle = {};
myStyle.fontsize = “12px”;
myStyle.left= “200px”;
myStyle.top= “100px”;
var elemStyle = row.style;
for(var prop in myStyle) {
elemStyle[prop] = myStyle[prop];
}

selebihnya tentang cara2 penulisan elemen CSS didalam javascript bisa disearch di google… 😉

24 01 2013
Faisal

terimakasih mas atas pencerahanya artikel anda sangat membantu ^^

24 01 2013
Faisal

owh y mas tanya lagi klo di salah satu row berisi image gimana mas caranya..?

28 01 2013
agienthea

Sama seperti contoh diatas, coba aza load image nya menggunakan CSS:

Contoh:
var myStyle = {};
myStyle.background = “url(‘images/logo.gif’)”;
var elemStyle = row.style;
for(var prop in myStyle) {
elemStyle[prop] = myStyle[prop];
}

dengan asumsi folder “images” berada di bawah relative path dari web-app yang sedang dikembangkan…

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: