Simple CRUD Part III (Edit Data)

Assalamualaikum,

Siang hari yang indah, disaat istirahat di bulan puasa, dari pada setelah solat saya browsing2 😀 cari Torent, hehe, lebih baik melunaskan hutang saya untuk membuat tutorial CRUD.

Oke lansung saja, dulu di tutorrial sebelumnya simple CRUD part 2 kita sudah berhasil menginputkan data dari Form menuju ke Mysql, nah sekarang untuk Update data, kita buka file index.php yang kemarin (Edisi Part II atau part I) lalu anda replace dengan kode dibawah ini.

<html>
<head>

<script type=”text/javascript” src=”js/jquery-1.9.1.js”></script>
<script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script>
<script type=”text/javascript”>
function lookup(a)
{
if(a.length==0){$(“#suggestions”).hide()
}
else
{
$.post(“carinama.php”,{queryString:””+a+””},
function(b){if(b.length>0)
{
$(“#suggestions”).show();$(“#autoSuggestionsList”).html(b)}
}
)
}
}function fill(a){$(“#inputString”).val(a);setTimeout(“$(‘#suggestions’).hide();”,200)}
</script>
<style type=”text/css”>
.suggestionsBox{
position:relative;
left:30px;
margin:0 auto;
width:300px;
background-color:#212427;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border:2px solid #000;
color:#fff}
.suggestionList{
margin:0;
padding:0}
.suggestionList
li{
margin:0 0 3px 0;
padding:3px;
cursor:pointer}
.suggestionList
li:hover
{
background-color:#659cd8}
.tengah{
margin:0 auto;padding-top:10px;
padding-left:310px;
font-family:Helvetica;
font-size:14px}
.judul{padding-left:390px;
font-family:Helvetica,Geneva,sans-serif}
</style>

<table border=”0″ align=’center’>
<tr><td>
<form method=”POST” action=”index.php”>
<input type =’text’ name = ‘KUNCI’ placeholder=”Inputkan Nama Disini” id=”inputString” onkeyup=”lookup(this.value)” onblur=”fill()”>
<input type =’submit’ name = ‘CARI’ value=’CARI’>
<font style=”font-size:12px”><br><!–b>Mencari Data 1 Bulan = “01/2013″</b–></font>

<font style=”font-size:12px”><br><!–b>Mencari Berdasarkan tanggal Format = “05/11/2012″<br>
Mencari Data 1 Bulan = “01/2013″</b–>
</font>
<div class=”suggestionsBox” id=”suggestions” style=”display:none”>
<img src=”upArrow.png” style=”position:relative;top:-12px;left:30px” alt=”upArrow” />
<div class=”suggestionList” id=”autoSuggestionsList”>
&nbsp;
</div>
</div>
</td></tr>
</form>
</table>

<?php

include “koneksi.php”;

//echo “<a href=’input.php’>Add New data</a>”;

if(isset($_POST[CARI]))
{
$nama = $_POST[KUNCI];
$sql = “SELECT * FROM mahasiswa WHERE nama = ‘$nama'”;

}
else
{

$sql = “SELECT * FROM mahasiswa”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
}

//$sql = “SELECT * FROM mahasiswa”;//-> ini query untuk select satu tabel. yaitu tabel mahasisiwa
$hasil = mysql_query($sql);

$warnaGenap = “#FFFFF”; // warna abu-abu
$warnaGanjil = “#CEF6F5”; // warna putih
//$warnaHeading = “#66CC00”; // warna merah untuk heading tabel

echo “<table align=center border=1 cellpadding=2 cellspacing=0><tr>”;
echo “<tr bgcolor = ‘##F6CECE’><td align=’center’ colspan=’4′><b>Data Mahasiswa<b></td></tr>”;
echo “<th>Nama</th>”;
echo “<th>Jurusan</th>”;
echo “<th>Email</th>”;
echo “<th>Action</th>”;
echo “<tr>”;
$no=0;
WHILE($data = mysql_fetch_array($hasil)){

if ($no % 2 == 0) $warna = $warnaGenap;
else $warna = $warnaGanjil;

echo “<tr bgcolor=’.$warna’>”;
echo “<td>$data[nama]</td>”;
echo “<td>$data[jurusan]</td>”;
echo “<td>$data[email]</td>”;
echo “<td><a href=’ubah.php?ID=$data[ID]’>Ubah Data</a> | <a href=”>Hapus Data</a></td></tr>”;

$no++;

}
echo “</table>”;

?>

</body>
</html>

Jika berhasil, maka Tampilan Insyaallah akan menjadi seperti ini

update_crud update_crud2 update_crud3

Jika data tidak sama, itu tergantung dengan jumlah inputan anda sebelumnya :P, bisa anda baca untuk yang bagian part II

oke lanjut, setelah itu kita akan membuat file ubah.php (Sebagi file aksi jika anda menekan link ubah), scriptnya dapat anda lihat disini

<html>
<head>

<style type=”text/css”>
.tengah{

padding-left:500px;

}

</style>

</head>

<body>
<?php
include “koneksi.php”;

if(isset($_POST[EDIT]))
{

$id = $_POST[IDD];
$nama = $_POST[NAMA];
$jur = $_POST[JURUSAN];
$email = $_POST[EMAIL];

//print_r($_POST);

$sql = “UPDATE mahasiswa SET nama = ‘$nama’,
jurusan = ‘$jur’,
email = ‘$email’
WHERE ID = ‘$id'”;

//echo $sql;

$hasil = mysql_query($sql);

if($hasil)
{

//echo “Data Berhasil Diedit…”;
echo “<script language=’javascript’>”;
echo “alert(‘Data Berhasil Diedit…’);”;
echo “window.location=’index.php’;”;
echo “</script><br>”;

}
else
{
//echo “Data Belum berhasil DiEdit…”;
echo “<script language=’javascript’>”;
echo “alert(‘Data Belum berhasil DiEdit…’);”;
// echo “window.location=’index.php’;”;
echo “</script><br>”;

}

}

$id = $_GET[ID];

$sql = “SELECT * FROM mahasiswa WHERE ID = ‘$id'”;
$hasil = mysql_query($sql);
$data = mysql_fetch_array($hasil);
?>

<div class=”tengah”>
<table>
<tr><td colspan=”2″ align=”center”><h1>Ubah Data</h1></td></tr>
<form method=”POST” action=”ubah.php” id=”FORM1″>
<tr>
<td>
Nama :
</td>
<td>
<input type=”text” name=”NAMA” id=”NAMA” placeholder=”Inputkan Nama” value = ‘<?php echo $data[nama]?>’>

</td>
</tr>
<tr>
<td>
Jurusan :
</td>
<td>
<input type=”text” name=”JURUSAN” placeholder=”Inputkan Jurusan” value = ‘<?php echo $data[jurusan]?>’><br>
</td>
</tr>
<tr>
<td>
Email :
</td>
<td>
<input type=”text” name=”EMAIL” placeholder=”Inputkan Email” value = ‘<?php echo $data[email]?>’><br>
<input type=”hidden” name=”IDD” value=”<?php echo $data[ID]?>”>
</td>
</tr>
<tr>
<td colspan=”2″><input type=”Submit” name=”EDIT” value=”EDIT”><td>

</tr>

</form>
</table>
</div><!–end of tengah–>

</body>

</html>

Oke
Setelah selesai, dan coba anda jalankan, index.php, jika anda klik link ubah data akan muncul form berikut

ubahdata

Di form tersebut, setelah anda mengubah apa yg ingin anda rubah, form akan diarahkan ke File Index. dan data secara otomatis berubah.

JIka masih bingung, anda bisa langsung mendownload filenya 😀 disni
Life is Simple, hidup ini mudah, namun jangan terlena oleh kemudahan., apalagi mempelajari Web Programming. hehehe

Oke Selamat belajar, semoga tulisan saya berguna sebagai referensi

Wassalamualaikum

Ingin mendapat uang jajan tambahan dengan menulis Blog, Klik Disni

Leave a Reply

Your email address will not be published. Required fields are marked *