Programming Learning

Free IT e-learning

[PHP] Membuat Form Dinamis dengan JQuery

Pada tutorial kali ini saya akan mengajak teman-teman untuk membuat form input php secara dinamis dengan JQuery, JQuery adalah suatu lib javascript dimana dapat memudahkan kita untuk menyusun script2 js yang dapat membuat aplikasi web kita dinamis.mungkin teman-teman sudah sering membuat suatu form input data dimanaterdapat 2 metode, “get” dan “post”. apakah perbedaan dari kedua metode diatas?apabila kita menggunakan metode get, hasil parameter akan tampak di url dan bersifat sangat terbatas sedangkan dengan metode post, parameter akan tersembunyi dan ukurannya dapat kita ubah2 di php.ini serta lebih aman untuk input data. dalam contoh kali ini kita akan gunakan metode post.

Form input data biasa, penulisannya sebagai berikut :

<form id="frminputkary" method="POST" action="postkary.php">
</form>

nah setelah disubmit biasanya akan page akan langsung tertuju pada page target dari form tersebut (pada contoh adalah “postkary.php”. kali ini kita akan membuat suatu form yang proses input datanya di belakang layar dan halaman tidak perlu pindah.

Untuk membuat proyek form dinamis, kita akan menggunakan jquery. dalam hal ini kita perlu untuk mengetahui dasar-dasar penggunaan javascript.database yang kita gunakan adalah mysql.

Langkah awal kita download terlebih dahulu JQuery disini kemudian kita buat database baru bernama “plearning” dimana field-fieldnya adalah sebagai berikut :

  • nip : varchar(10) prim key
  • nama: varchar(30)

Lalu kita akan membuat suatu form input dengan desain untuk karyawan.php sebagai berikut :

pada gambar diatas terdapat 2 input data yaitu nip dan nama, script untuk form adalah sebagai berikut :

<form id="frminputkary" method="POST" action="postkary.php">
<table>
<tr>
<td>NIP</td><td><input type="text" id="txtnip" name="txtnip"/><div id="cnip"></td>
</tr>
<tr>
<td>Nama</td><td><input type="text" id="txtnama" name="txtnama"/><div id="cnama"></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Proses"/></td>
</tr>
</table>
</form>

Pada kode diatas terlihat bahwa form akan mensubmit data ke postkary.php dan kemudian postkary.php akan submit data ke database yang telah kita buat. script untuk postkary.php sendiri adalah sebagai berikut :

<?php
//konek ke db
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$conn) {
die('Could not connect: ' . mysql_error());
}

$dbname = 'plearning';
mysql_select_db($dbname);

$sql='INSERT INTO karyawan(nip,nama)VALUES("'.$_POST['nip'].'","'.$_POST['nama'].'")';
$kueri = mysql_query($sql) or die('<font color="red">input data error!</font>');

echo '<font color="blue">Input data berhasil!</font>';
?>

Pada kode postkary.php diatas terlihat bahwa berisi script-script untuk input data kedalam database.

Secara umum dengan kedua file ini sudah dapat menginputkan data, alurnya adalah ketika kita mengeksekusi karyawan.php dan mensubmitnya maka akan memanggil postkary.php dan akan meload file tersebut, sekarang kita akan mengubahnya supaya submit data dilakukan dibackground dan mengambil nilai output dari postkary.php untuk ditampilkan di karyawan.php sehingga tidak perlu transisi halaman.

Untuk membuat suatu web yang interaktif, kita gunakan jquery. caranya adalah dengan mengexport script jquery ke dalam karyawan.php, tempelkan script berikut pada tag <head> :

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Perhatikan untuk path jquery sesuaikan dengan tempat dimana anda menyimpannya. Kemudian dibawah tag <form> yang sudah kita buat tadi, kita buat tag <div> yang berfungsi untuk menempelkan hasil output dari submitting postkary.php, berikut adalah scriptnya :

<div id="result"></div>

Setelah itu kita akan membuat dan menggantikan event handler untuk proses submit form sehingga nantinya ketika submitting form akan mengeksekusi script yang telah kita buat, berikut ini adalah scriptnya :

<script>
$("#frminputkary").submit(function(event) { //handle untuk form submit
$( "#result" ).empty().append("Processing.. <img src='img/ajax-loader.gif'/>");
//stop form untuk submit manual
event.preventDefault();

var $form = $( this ),
url = $form.attr( "action" );
//ambil value dari form (berdasarkan id)
inpnip = $("input#txtnip").val();
inpnama = $("input#txtnama").val();

$.post( url,{    nip:inpnip,nama:inpnama },
function(result){
$( "#result" ).empty().html(result); //tampilkan hasil pada div "result"
}
);
});
</script>

Dari script diatas dapat kita lihat bahwa form tersebut telah dihandler untuk proses submittingnya. apabila telah benar maka hasilnya adalah sebagai berikut :

Apabila anda masih merasa kesulitan, berikut saya lampirkan file projectnya.anda dapat mendownloadnya disini.

Demikian tutorial ini semoga bermanfaat bagi teman-teman sekalian.

2 responses to “[PHP] Membuat Form Dinamis dengan JQuery

  1. Yusuf Badurohman April 26, 2012 pukul 10:28 am

    pertamax di tutorialnya suhu tigor ^:)^

  2. Lirik yes September 25, 2012 pukul 7:42 am

    mantap gan artikelnya numpang copas

Tinggalkan Balasan

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

Logo WordPress.com

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

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s

%d blogger menyukai ini: