Membuat Form Edit Menjadi Lebih Interaktif dengan PHP dan AJAX
Anda pasti pernah membuat sebuah form edit data yang berada dalam database dengan menggunakan PHP. Pada kesempatan ini, saya mencoba membuat form edit dengan menggunakan PHP dan AJAX sehingga proses edit barang seolah-olah tidak mengalami perpindahan halaman.
Pertama kita membuat databasenya terlebih dahulu, misalkan barang.sql
`id` int(5) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`stock` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
INSERT INTO `barang` VALUES (1, ‘Baju’, 405);
INSERT INTO `barang` VALUES (2, ‘Celana’, 1);
INSERT INTO `barang` VALUES (3, ‘Kemeja’, 4);
Setelah kita membuat databasenya, kemudian kita membuat halaman untuk menampilkan seluruh data yang ada dalam database, yaitu lihat.php
<head>
<title>Edit Barang lebih Interaktif by Erick Lisangan</title>
<script language=’JavaScript’>
var ajaxRequest;
function getAjax() //fungsi cek apakah web browser mendukung AJAX
{
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
// Something went wrong
alert(“Your browser broke!”);
return false;
}
}
}
}
function bukaEdit(id) //fungsi untuk membuka form edit di edit.php
{
getAjax();
ajaxRequest.open(“GET”,”edit.php?id=”+id);
ajaxRequest.onreadystatechange =
function()
{
var targetDiv = document.getElementById(“edit”); //membuka edit.php di div edit
targetDiv.innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
</script>
</head>
<body>
<?php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“barang”);
?>
<table>
<tr>
<td>Kode</td>
<td>Nama</td>
<td>Stock</td>
<td>Keterangan</td>
</tr>
<?php
$query = mysql_query(“SELECT * FROM barang”);
while ($data = mysql_fetch_row($query))
{
?>
<tr>
<td><?=$data[0]?></td>
<td><?=$data[1]?></td>
<td><?=$data[2]?></td>
<td><a href=”javascript:bukaEdit(<?=$data[0]?>);”>Edit</a></td> <!– link edit untuk buka form edit –>
</tr>
<tr>
<td colspan=’4′><div id=’edit’></div></td>
</tr>
<?php
}
if (isset($_GET['yes']))
{
echo “Berhasil”;
}
else if (isset($_GET['no']))
{
echo “Gagal”;
}
?>
</body>
</html>
Apabila Anda menjalankan script di atas, maka akan tampil tampilan seperti di bawah ini :
Kemudian Anda membuat script untuk melakukan edit, yaitu edit.php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“barang”);
if (isset($_GET['id']))
{
$kode = $_GET['id'];
$query = mysql_query(“SELECT * FROM barang WHERE id=’$kode’”);
$edit = mysql_fetch_row($query);
?>
<form method=’post’ action=’edit.php’>
<table>
<tr>
<td>Kode</td>
<td>:</td>
<td><input type=’text’ name=’editkode’ value=’<?=$edit[0]?>’>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type=’text’ name=’editnama’ value=’<?=$edit[1]?>’>
</tr>
<tr>
<td>Stock</td>
<td>:</td>
<td><input type=’text’ name=’editstock’ value=’<?=$edit[2]?>’>
</tr>
<input type=’hidden’ value=’<?=$edit[0]?>’ name=’kodebarang’>
<tr>
<td colspan=’3′ align=’right’><input type=’submit’ value=’Edit’ name=’edit’></td>
</tr>
</table>
</form>
<?php
}
else if (isset($_POST['edit']))
{
$kode = $_POST['kodebarang'];
$id = $_POST['editkode'];
$nama = $_POST['editnama'];
$stock = $_POST['editstock'];
$editdb = mysql_query(“UPDATE barang SET id=’$id’,nama=’$nama’,stock=’$stock’ WHERE id=’$kode’”);
if ($editdb)
{
?>
<script language=’JavaScript’>document.location=’lihat.php?yes=1′;</script>
<?php
}
else
{
?>
<script language=’JavaScript’>document.location=’lihat.php?no=1′;</script>
<?php
}
}
?>
Apabila Anda menekan tombol edit, maka akan muncul tampilan seperti di samping kiri ini. Kemudian Anda lakukan pengeditan, dan tekan tombol Edit, maka akan mucul tampilan seperti di samping bawah ini. Sehingga form edit yang kita buat menjadi lebih interaktif, dan memudahkan bagi user kan??
Bagaimana??Dengan menggunakan PHP dan AJAX, maka kita dapat membuat sebuah form edit yang lebih interaktif kan??Semoga artikel ini dapat bermanfaat bagi Anda. Gbu…
kox gx bisa d update yah?
saya tambahkan terdapat menu untuk jenis kelamin, tapi gak mau update.
bisa kasih tau cara update untuk jenis kelamin gak?
Thx gan.
mana nich revisi scriptnya kok gak di update …. hehehehhe… update dong…
hehehe…sabar y?soalnya lagi banyak kesibukan…saya usahakan secepatnya y??thanx….
bs bantu buatkan web server gag?
buat web server??seperti XAMPP ato AppServ?
mantap gan. . .
gan, kok editnya slalu muncul di bawah nomor 1 ya? mohon pencerahannya. thx
maaf baru sempat balas…nanti scriptnya saya perbaiki…ada kesalahan dikit…hehehe