Free IT e-learning
Pada tutorial kali ini, saya akan mengajak teman-teman untuk membuat penerapan dari jQuery untuk membuat form dinamis dimana kita akan membuat form data karyawan yang akan tersimpan di database MySQL.karena langkah-langkahnya sedikit panjang,berikut ini adalah langkah-langkahnya :
Membuat database dan table
untuk studi kasus kali ini kita akan membuat form karyawan simple yang hanya terdiri dari 2 field saja yaitu “nip” dan “nama”, untuk itu sebelumnya kita membuat suatu database “plearning” dan membuat table “karyawan” dengan field :
Membuat file db.php untuk koneksi ke database
Sebelumnya kita buat db.php yang berisi script untuk koneksi ke database, kali ini kita akan menggunakan db mysql. berikut ini adalah scriptnya :
<?php
$conn=mysql_connect('localhost','root','');
mysql_select_db('plearning',$conn);
?>
Sesuaikan script diatas dengan settingan database yang ada pada komputer anda.
Membuat karyawan.php untuk menampilkan data
Setelah itu kita akan membuat file karyawan.php yang akan berisi table penampilan data karyawan dengan table sebagai berikut :
<table id="mytable" cellspacing="0">
<caption>Data Karyawan </caption>
<tr>
<th scope="col">NIP</th>
<th scope="col">Nama</th>
<th scope="col">Aksi</th>
</tr>
<?php
include "db.php";
$sql = 'SELECT * FROM karyawan ORDER BY nip ASC';
$kueri = mysql_query($sql);
while ($baris = mysql_fetch_array($kueri)){
echo "<tr>
<td class='nipCell'>".$baris['nip']."</td>
<td class='namaCell'>".$baris['nama']."</td>
<td align='right'><a href='#' onClick=AddNew()>Add</a> |
<a class='edit' href='#' onClick='EditData($(this))'>Edit</a> |
<a class='delete' href='#' onClick='DeleteData($(this))'>Delete</a></td>
</tr>";
}
?>
</table>
Apabila kita lihat script diatas terdapat event “onClick” yang akan memanggil method yang akan kita buat nanti, pada studi kasus kali ini kita tidak akan melakukan perpindahan antar halaman/page tetapi akan menggunakan jQuery untuk menampilkan dialog popup pada masing-masing aksi sehingga lebih menghemat script dan membuat sistem lebih interaktif dengan user, untuk membuat dialog, jQuery menyediakan bermacam-macam model dialog yang bisa kita pelajari disini, kita akan membuat 3 dialog popup modal yang terdiri dari :
Dialog tambah data
dialog ini berisi field-field input data (NIP dan Nama), berikut adalah scriptnya :
<div id="dialog-add" title="Tambah Data Karyawan"> <form> <table border="0"> <tr> <td><label for="nip">NIP</label></td> <td><input type="text" name="nipadd" id="nipadd" /></td> </tr> <tr> <td><label for="nama">Nama</label></td> <td><input type="text" name="namaadd" id="namaadd" value="" /></td> </table> </form> </div>
Dialog edit data
Dialog ini berisi field-field input data untuk pengeditan data, berikut ini adalah scriptnya :
<div id="dialog-edit" title="Edit Data Karyawan"> <form> <table border="0"> <tr> <td><label for="nip">NIP</label></td> <td><div id="nipedit"></div></td> </tr> <tr> <td><label for="nama">Nama</label></td> <td><input type="text" name="namaedit" id="namaedit" value="" /></td> </table> <a href="#" onClick="AddNew()">Insert new data</a> </div> <div id="waiting"> <p><img src="img/ajax-loader.gif"/> Saving data...</p> </div> </form> </div>
Dialog hapus data
Dialog ini berisi konfirmasi penghapusan data, berikut ini adalah scriptnya :
<div id="dialog-delete" title="Yakin hapus data?"> <p><span style="float:left; margin:0 7px 20px 0;"></span><div id="isi">isi</div></p> </div>
Apabila kita lihat script pada masing-masing dialog,sebenarnya masing-masing hanyalah script dalam tag <div> yang akan tampil pada saat form dieksekusi,untuk membuatnya berfungsi sebagai dialog kita akan mentransformasikannya melalui jQuery, sebelumnya kita harus mengimport jquery filenya dengan menempelkan script berikut ini pada atribut <head> :
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
Seperti yang kita lihat diatas,kita menggunakan jQuery dan jQuery UI (untuk dialog), bagi yang belum memilikinya dapat mendownload disini
kita akan memulai membuat tag <script></script> dimana akan diisikan javascript, langkah awal adalah mendeklarasikan variable global yang diperlukan pada beberapa script berikut adalah variablenya :
var objRow, //variable row yg diisi pada saat dialog edit nipdelete; //variable nip yang diisi pada saat event delete
kemudian kita akan membuat script untuk mentransformasikan dialog-dialog yang sudah kita buat sehingga dapat berfungsi, berikut adalah scriptnya :
<!--Dibawah ini adalah inisialisasi dialog jQuery-->
//hilangkan notifikasi waiting
$("#waiting").hide();
//inisialisasi dialog tambah data
$( "#dialog-add" ).dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
buttons: {
"Proses": function() {
var
//isi variable dengan input data yang telah diisi oleh user
anip = $("input#nipadd").val();
anama = $("input#namaadd").val();
//aksi
aact= 'insert';
//event untuk melakukan POST/GET pada postdata.php melalui jQuery
$.ajax({
type: "POST", //definisikan aksinya (POST/GET)
url: "postdata.php", //definisikan urlnya
data: {"nip":anip,"nama":anama,"act":aact}, //data yang akan dikirim
timeout: 3000, //timeout dari request
beforeSend: function(){}, //event yang akan dieksekusi sebelum pengiriman data
complete: function(){}, //event yang akan dieksekusi setelah pengiriman data
cache: false, //cache
success: function(result){ //event yang akan dieksekusi setelah data berhasil dikirim
if (result=='success'){ //apabila respon dari postdata.php success maka
var
//link button aksi
sbutton = "<td align='right'><a href='#' onClick=AddNew()>Add</a> | <a class='edit' href='#' onClick='EditData($(this))'>Edit</a> | <a class='delete' href='#' onClick='DeleteData($(this))'>Delete</a></td>";
//isi data row baru
s = '<tr><td>'+anip+'</td><td>'+anama+'</td>'+sbutton+'</tr>';
//tambahkan row baru pada baris terakhir
$('#mytable > tbody:last').append(s);
}else{alert('gagal simpan data');}
//close waiting
$("#waiting").hide();
},
error: function(error){alert(error);$( this ).dialog( "close" );} //event yang akan diseksekusi pada saat error berlangsung
}
);
$("#waiting").show();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
//inisialisasi dialog edit data
//penjelasan dari code ini hampir sama dengan dialog tambah data
$( "#dialog-edit" ).dialog({
autoOpen: false,
height: 200,
width: 350,
modal: true,
buttons: {
"Update": function() {
var
anip = $("#nipedit").html();
anama = $("input#namaedit").val();
aact= 'edit';
$.ajax({
type: "POST",
url: "postdata.php",
data: {"nip":anip,"nama":anama,"act":aact},
timeout: 3000,
beforeSend: function(){},
complete: function(){},
cache: false,
success: function(result){
if (result=='success'){
//ubah isi data table sesuai dengan perubahan yang terjadi
objRow.find(".namaCell").html($("input#namaedit").val());
$("#waiting").hide();
}else{alert('gagal simpan data');}
},
error: function(error){$("#waiting").hide();alert(error);}
}
);
$("#waiting").show();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
//inisialisasi dialog hapus data
//penjelasan dari code ini hampir sama dengan dialog tambah data
$( "#dialog-delete" ).dialog({
autoOpen:false,
resizable: false,
height:150,
modal: true,
buttons: {
"Proses": function() {
var
aact= 'delete';
$.ajax({
type: "POST",
url: "postdata.php",
data: {"nip":nipdelete,"act":aact},
timeout: 3000,
beforeSend: function(){},
complete: function(){},
cache: false,
success: function(result){
if (result=='success'){
//hapus baris table yang terpilih
objRow.remove();
}else{
alert('error while delete data.');
}
$("#waiting").hide();
},
error: function(error){alert(error);$("#waiting").hide();}
}
);
$( this ).dialog( "close" );
$("#waiting").show();
},
"Batal": function() {
$( this ).dialog( "close" );
}
}
});
<!--Akhir dari inisialisasi dialog jQuery-->
Dari script diatas dapat kita lihat pada masing-masing dialog memiliki struktur script yang sama dimana terdapat $.ajax yang berfungsi untuk mem-post data ke postdata.php, keterangan script selengkapnya sudah saya tuliskan di komentar script diatas.
Setelah itu kita akan membuat event handler yang akan dipanggil oleh masing-masing aksi, berikut adalah scriptnya :
<!--Dibawah ini adalah event handler dari setiap aksi (add,edit,delete)-->
function AddNew(){
//untuk data baru, kosongkan fieldnya terlebih dahulu
$("input#nipadd").val('');
$("input#namaadd").val('');
//buka dialog
$( "#dialog-add" ).dialog("open");
}
function EditData(obj){
var nip = obj.parent().parent().find(".nipCell").html();
nama = obj.parent().parent().find(".namaCell").html();
//isikan pada field input dialog
$("#nipedit").empty().append(nip);
$("input#namaedit").val(nama);
//simpan object row kedalam variable objRow (global variable)
objRow = obj.parent().parent(); //simpan object row
//tampilkan dialog
$( "#dialog-edit" ).dialog("open");
}
function DeleteData(obj){
nipdelete = obj.parent().parent().find(".nipCell").html();
$("#isi").empty().append('Apakah anda yakin akan menghapus data dengan nip : ' + nipdelete + ' ?');
$( "#dialog-delete" ).dialog( "open" );
objRow = obj.parent().parent(); //simpan object row
}
<!--Akhir dari Event Handler-->
Penjelasan dari script sudah saya tuliskan di komentar tiap-tiap baris.
Membuat PostData.php untuk penyimpanan data ke database mysql
postdata.php digunakan untuk penyimpanan data (tambah,edit dan hapus) ke database,menggunakan metode POST, berikut ini adalah scriptnya :
<?php
include "db.php"; //untuk koneksi db
if ($_SERVER['REQUEST_METHOD'] == 'POST') { //halaman ini harus dipanggil melalui post
$nip = $_POST["nip"];
$nama = $_POST["nama"];
$act = $_POST["act"];
switch($act){
//tambah data
case "insert":$sql="INSERT INTO karyawan(nip,nama)VALUES('".$nip."','".$nama."')";break;
//edit data
case "edit":$sql="UPDATE karyawan SET nama= '".$nama."' WHERE nip ='".$nip."'";break;
//hapus data
case "delete":$sql="DELETE FROM karyawan WHERE nip = '".$nip."'";break;
}
//eksekusi sql
$kueri = mysql_query($sql);
//tampilkan hasil
if($kueri){
echo "success";
}else{
echo "failed";
}
}else{
echo "This link can't run directly.";
}
?>
Setelah sesuai dengan yang telah dibuat seperti di atas,kita jalankan dan hasilnya akan tampak sebagai berikut :
Apabila anda ingin mencobanya online, bisa dicoba dilink berikut :
Apabila ingin mendownload source tutorial ini dapat didownload dilink berikut :
Demikian tutorial ini semoga bermanfaat bagi teman-teman semua.
Programming Learning 
ini baru mantep bro…., thank bro…
ok bro,senang bisa membantu 🙂
ini kan hanya terbatas pada 20 data karyawan saja, gimana jika kita ingin menambah , cthnya sampai 200 data . .
thanx
sbnarnya untuk yang latihan memang saya sengaja batasi.apabila anda download link yang ada maka anda tidak akan menemui pembatasan data. 🙂
apik…!
maturnuwun mas bro 😉
XSS Bug, Fix it….
di thread hanya membahas cara input,untuk keamanan diharapkan pembaca improve sendiri 🙂
Sipp bgtmas broww
🙂
makasih om,, numpang nyedot filenya
bro klo buat textarea atau combo box kok kaga bisa yak…?
mohon pencerahan nya bro
bro gw mau nannya nih misal gw punya 3 combobox jurusan, semester dan matakuliah.
pas pilih matakuliah maka terseleksi berdasarkan jurusan dan semester. Thanks
tinggal disesuaikan aja mas.
mas kalau mau buat filter atau pencarian berdasarkan field nip dan bisa juga berdasarkan field nama?mhon bantuanya mas..thanks
makasih byk tutorialnya gan 😀
mantap mas….??
mas klo tambah file upload gmn mas???
mkasih ya??
kalau mau di posting pake blog caranya gimana mas. misal saya mau buat daftar nama guru.
suwun
mantap gan numpang copas yach…gan
jelas sekali gan, thank you
Ada paginationnya gak bang?
mas bro, nice tutorial. kalo untuk textarea nip hanya di isi angka saja bisa ga ya ?
Terimakasih mas sudah menshare tutorialnya,, semoga bermanfaat
kok gak bisa didownload y gan ???
bagus bnget nich gan tutorialnya,, tapi gan pas saya download file nya,,punya saya pas pengisian form nya gak ada validasinya..contohnya pas saya isi form trus saya sengaja kosongin pas di klik proses seharusnya muncul dialog “lengkapi data terlebih dahulu seperti di demo nya..tapi di fileyg saya download gk ada gan..apakah ada yang gk kumplit data nya ya gan di file nya??? suppaya bisa muncul dialog gituh kayak di demo nya gmna ya gan???
haha…
ayo dicari… 😛
ini yang dicari2.
misalnya di aplikasi apotik, form penjualan (bukan dialog) ada pengisian kode obat, kalau ngak tahu kode tinggal clik tombol/button di samping kode obat maka akan muncul jquery dialog, textfield nama obat (untuk search) dan table obat, dan waktu table obat di click langsung ke isi di form penjualan (kode dan nama obat). kira2 begini bisa kasih contoh
trims
gan ntar low udah nemu yg macem agan maksud kasih tau saya,soal’a saa jg baru blajar 🙂
gimana mas. apa udah nemu n bisa. kasus yang sama pada saya
maksih mas tutor nya,sangat bermamfaat!!
thanks bro
anda telah membantu saya
numpang blog untuk berbagi info
okipurnama.wordpress.com
berrroooo matur suwun…
ini tutor detail sanget 🙂
ini yang aku cari selama ini…
good job 😀
Moga2 berguna ya 🙂
siiiaaappp 😀
masih gagal salah dmna ya ??
ok sah bisa ni kang , salah koneksi sama table database aja hehehehe makasih ilmunya
mantaps … cuma gmana ya carany kalau kita ganti type input menjadi type select ketika proses edit data… atas share ilmunya …. thks banget mas bro…..,
Izin Doqnload… Tx Om..
terima kasih… sangat berguna untuk mendalami php
mANTEP gan Semoga Ilmunya bertambah
Mantap gan. Akhirnya masalahku terpecahkan. Semoga Agan makin diberkahi dan makin mantap ilmunya….
congrats 🙂
bro kalo mau gedein dialog box nya scriptnya dimana yah ?? thank’s bro sangat membantu
di script sepertinya ada height dan widhtnya 🙂
thx mas, mo di coba dulu 🙂
om tigor mau nanya,
kalo misalnya mau nambah alamat gimana caranya yah ?
mohon pencerahannya suhu
kok di refresh filex jadi ngak muncul ya ? padahal didatabasex masih ada ?
mohon pencerahanx ya mas bro,,,
thx
boss kok pake combobox ngak bisa ya,,,???
bisa pak, dimodif sedikit 🙂
Thanks…….
Sangat membantu………..
ijin sedot Gan………
sip 🙂
membantu sekali..
makasih yah, ijin download 🙂
silahkan 🙂
mas, nmpang tanya, knpa action deletenya tidak mau y
mas, nmpang tanya, knpa action deletenya gak bisa y
Thanx , You save my life
ini keren bget, makasih broo….
trus kalau no nip karyawan otomatis bsa kluar sendiri gmn caranya???
Link Demo ama donwnload nya Erorr … Mohon Derevisi Gun !!!
Gan, Link download dan demonya tidak ada, tolong diperbarui ya
trims
mas link downloadnya Error 521.
mohon d perbaiki ya mas
trimakasih
Saya Masih Bingung gan dan gak bisa caranya
ga bisa di download link erorr om…