Programming Learning

Free IT e-learning

[PHP] Studi Kasus Membuat Form Karyawan dengan jQuery (MySQL)

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 :

  • NIP, varchar(10) primary key
  • Nama, varchar(30) NOT NULL

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 :

  1. Dialog tambah data
  2. Dialog edit data
  3. Dialog hapus data

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 :

Demo Form Karyawan

Apabila ingin mendownload source tutorial ini dapat didownload dilink berikut :

Download Form Karyawan

Demikian tutorial ini semoga bermanfaat bagi teman-teman semua.

About these ads

59 responses to “[PHP] Studi Kasus Membuat Form Karyawan dengan jQuery (MySQL)

  1. maman Mei 29, 2012 pukul 3:57 am

    ini baru mantep bro…., thank bro…

  2. aryansyahmarbun Juni 6, 2012 pukul 1:57 am

    ini kan hanya terbatas pada 20 data karyawan saja, gimana jika kita ingin menambah , cthnya sampai 200 data . .

    thanx

    • Tigor Manurung Juni 6, 2012 pukul 4:48 am

      sbnarnya untuk yang latihan memang saya sengaja batasi.apabila anda download link yang ada maka anda tidak akan menemui pembatasan data. :)

  3. 13 Juni 20, 2012 pukul 1:18 pm

    XSS Bug, Fix it….

  4. romdan Juli 1, 2012 pukul 1:18 am

    makasih om,, numpang nyedot filenya

  5. ari Juli 6, 2012 pukul 3:09 am

    bro klo buat textarea atau combo box kok kaga bisa yak…?
    mohon pencerahan nya bro

  6. Eko Priyanto Juli 12, 2012 pukul 10:11 pm

    bro gw mau nannya nih misal gw punya 3 combobox jurusan, semester dan matakuliah.
    pas pilih matakuliah maka terseleksi berdasarkan jurusan dan semester. Thanks

  7. zeke Juli 26, 2012 pukul 3:48 am

    makasih byk tutorialnya gan :D

  8. rio September 11, 2012 pukul 6:00 am

    mantap mas….??
    mas klo tambah file upload gmn mas???
    mkasih ya??

  9. muhaimin September 24, 2012 pukul 6:54 pm

    kalau mau di posting pake blog caranya gimana mas. misal saya mau buat daftar nama guru.
    suwun

  10. Lirik yes September 25, 2012 pukul 8:13 am

    mantap gan numpang copas yach…gan

  11. hendi Oktober 10, 2012 pukul 2:10 am

    mas bro, nice tutorial. kalo untuk textarea nip hanya di isi angka saja bisa ga ya ?

  12. Asep Ibnu A Oktober 11, 2012 pukul 8:35 am

    Terimakasih mas sudah menshare tutorialnya,, semoga bermanfaat

  13. biedie Oktober 14, 2012 pukul 4:24 am

    kok gak bisa didownload y gan ???

  14. Yogaz Cybertech Oktober 21, 2012 pukul 9:40 am

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

  15. sutarno November 1, 2012 pukul 6:38 am

    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

  16. agus November 3, 2012 pukul 5:59 am

    maksih mas tutor nya,sangat bermamfaat!!

  17. belanjadonk Desember 6, 2012 pukul 2:17 am

    thanks bro
    anda telah membantu saya
    numpang blog untuk berbagi info
    okipurnama.wordpress.com

  18. noerfaz Januari 29, 2013 pukul 5:28 am

    berrroooo matur suwun…
    ini tutor detail sanget :)
    ini yang aku cari selama ini…
    good job :D

  19. fery Januari 31, 2013 pukul 4:20 pm

    masih gagal salah dmna ya ??

  20. fery Februari 1, 2013 pukul 2:53 am

    ok sah bisa ni kang , salah koneksi sama table database aja hehehehe makasih ilmunya

  21. wow Februari 1, 2013 pukul 8:03 pm

    mantaps … cuma gmana ya carany kalau kita ganti type input menjadi type select ketika proses edit data… atas share ilmunya …. thks banget mas bro…..,

  22. Anang April 8, 2013 pukul 2:20 am

    terima kasih… sangat berguna untuk mendalami php

  23. zacka April 17, 2013 pukul 8:59 am

    mANTEP gan Semoga Ilmunya bertambah

  24. sadartasinuraya April 26, 2013 pukul 3:36 am

    Mantap gan. Akhirnya masalahku terpecahkan. Semoga Agan makin diberkahi dan makin mantap ilmunya….

  25. eko Mei 10, 2013 pukul 2:48 am

    bro kalo mau gedein dialog box nya scriptnya dimana yah ?? thank’s bro sangat membantu

  26. adhitya Juni 24, 2013 pukul 4:22 am

    thx mas, mo di coba dulu :)

  27. monkey Agustus 13, 2013 pukul 5:59 am

    om tigor mau nanya,
    kalo misalnya mau nambah alamat gimana caranya yah ?
    mohon pencerahannya suhu

  28. Marto I Agustus 22, 2013 pukul 1:38 am

    kok di refresh filex jadi ngak muncul ya ? padahal didatabasex masih ada ?
    mohon pencerahanx ya mas bro,,,
    thx

  29. Marto I Agustus 23, 2013 pukul 8:01 am

    boss kok pake combobox ngak bisa ya,,,???

  30. dimz90 Oktober 19, 2013 pukul 11:52 pm

    Thanks…….
    Sangat membantu………..
    ijin sedot Gan………

  31. Adininggar Khintana Oktober 21, 2013 pukul 9:28 am

    membantu sekali..
    makasih yah, ijin download :)

  32. azpgferry November 14, 2013 pukul 7:08 am

    mas, nmpang tanya, knpa action deletenya tidak mau y

  33. azpgferry November 14, 2013 pukul 7:09 am

    mas, nmpang tanya, knpa action deletenya gak bisa y

  34. @adyoi Desember 28, 2013 pukul 6:12 pm

    Thanx , You save my life

  35. Steven Januari 25, 2014 pukul 9:06 am

    ini keren bget, makasih broo….

  36. Hanik Nur Afini Juni 28, 2014 pukul 5:59 am

    trus kalau no nip karyawan otomatis bsa kluar sendiri gmn caranya???

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d bloggers like this: