Home > AJAX, PHP > Membuat Form Edit Menjadi Lebih Interaktif dengan PHP dan AJAX

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

CREATE TABLE `barang` (
`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

<html>
<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

<?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??

download script

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…

Categories: AJAX, PHP
  1. awa
    27 May 2012 at 07:16

    ngapusi..,

  2. Ciepoetry
    14 May 2012 at 00:36

    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?

  3. 13 May 2011 at 14:22

    Thx gan.

  4. arif
    9 May 2011 at 12:05

    mana nich revisi scriptnya kok gak di update …. hehehehhe… update dong…

    • 11 May 2011 at 19:13

      hehehe…sabar y?soalnya lagi banyak kesibukan…saya usahakan secepatnya y??thanx….

  5. hamni
    13 February 2011 at 16:05

    bs bantu buatkan web server gag?

  6. 5 December 2010 at 12:06

    mantap gan. . .

  7. pajar
    4 September 2010 at 10:05

    gan, kok editnya slalu muncul di bawah nomor 1 ya? mohon pencerahannya. thx

    • 25 October 2010 at 16:41

      maaf baru sempat balas…nanti scriptnya saya perbaiki…ada kesalahan dikit…hehehe

  1. No trackbacks yet.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: