Alternatif CRUD dangan menggunakan Jeditable

Membuat aplikasi untuk pengeditan data biasanya menggunakan metode CRUD (create, read, update and delete). Namun kadang untuk membuat CRUD agak merepotkan dan kurang praktis. Metode ini sudah tidak dipakai lagi kalau kita lihat aplikasi yang modern seperti facebook, google, yahoo dll. Mereka lebih cendrung menggunkan metode inline edit atau edit ditempat. Hal ini sangat memudahkan pengguna dan lebih simpel.

Nah sekarang saya akan coba kenalkan plugin jquery yang bisa anda gunakan untuk menerapkan inline edit namanya “Jeditable”. Plugin ini sangat mudah dipakai. Jika web anda sudah menggunakan jquery anda tinggal menambahkan plugin ini di baris berikutnya seperti ini:

<script src="jeditable.js" type="text/javascript"></script>

dinama file jeditable.js bisa didownload disni: http://www.appelsiini.net/projects/jeditable atau http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js

Cara penggunaannya bisa anda baca dan pelajari sendiri disini: http://www.appelsiini.net/projects/jeditable

Sebagai contoh saya akan tunjukkan caranya yang sederhana: pertama buka aplikasi yang sudah pernah anda bikin sebelumnya. Mungkin disana terdapat sebuah tabel yang datanya diambil dari datbase. Nah untuk mengedit data dalam tabel tersebut misalnya dalam kolom Nama maka caranya adalah sebagai berikut:

Yang semula:

<td><?=$row['nama']?></td>

Diubah menjadi:

<td><div class="jedit_nama" id="<?=$row['id']?>"><?=$row['nama']?></div></td>

Sekarang pada halaman paling bawah html anda masukkan kode javascript seperti ini:

$(".jedit_nama").editable("simpan.php?type=nama",{submit:"OK"});

Sekarang bikin file simpan.php isinya seperti ini:

<?php
include'koneksi_database.php';

$type = (isset($_GET['type'])) ? $_GET['type'] : "";
$value = (isset($_POST['value'])) ? $_POST['value'] : ""; //value posted
$id = (isset($_POST['id'])) ? $_POST['id'] : ""; //id of the element

mysql_query("UPDATE pegawai SET $type = $value WHERE id = $id");

print $value;

?>

Begitulah cara mudah dan sederhananya. Untuk lebih sempurna lagi silahkan anda kembangkan sendiri sesuai keinginan anda. Semoga bermanfaat.

(Visited 911 times, 1 visits today)

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp chat