Proses Form Dinamis Dengan PHP MySQL

12 January 2016 | Tags: Form dinamis, Proses Form dinamis

Materi proses form dinamis dengan PHP MySQL melupakan lanjutan dari materi membuat form input dinamis dengan jquery. Silahkan mempelajari materi tersebut untuk memahami konsep form dinamis.

Kali ini kita akan membuat aplikasi sederhana untuk memasukkan data karyawan dan hoby yang dimilikinya. Disini kita membutuhkan 2 tabel, yang pertama untuk menyimpan data karyawan dan berikutnya untuk data hoby. Adapun diagram E-R nya bisa digambarkan seperti berikut:

Untuk membuat tabel diatas silahkan jalan perintah sql berikut pada console MySql anda.

CREATE TABLE `tbl_karyawan` (
  `id_karyawan` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `nama_karyawan` varchar(50) DEFAULT NULL,
  `umur_karyawan` int(19) DEFAULT NULL,
  PRIMARY KEY (`id_karyawan`)
);
CREATE TABLE `tbl_hoby` (
  `rincian_hoby` varchar(50) DEFAULT NULL,
  `jenis_hoby` varchar(30) DEFAULT NULL,
  `id_karyawan` int(10) DEFAULT NULL COMMENT 'FK tbl_karyawan'
);

Adapun Source Code dari Proses Form Dinamis Dengan PHP MySQL adalah sebagai berikut:

Script untuk form.php

<?php
	/*===============================================================================
		Membuat Form Input Dinamis dengan PHP
		By: BliKomKom
		Website: http://www.komang.my.id
		Source code ini bisa anda gunakan dan modifikasi sesuai kebutuhan
	===============================================================================*/
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Metode Biseksi</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script language="javascript">
	function tambahHobi() {
    		var idf = document.getElementById("idf").value;
			var stre;
			stre="<p id='srow" + idf + "'><input type='text' size='40' name='rincian_hoby[]' placeholder='Masukkan Hobi' /> <input type='text' size='30' name='jenis_hoby[]' placeholder='Utama/Sambilan' /> <a href='#' style=\"color:#3399FD;\" onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>Hapus</a></p>";
    		$("#divHobi").append(stre);	
    		idf = (idf-1) + 2;
    		document.getElementById("idf").value = idf;
		}
	function hapusElemen(idf) {
    		$(idf).remove();
		}
</script>
</head>
<body>
<div id="container">
<h2>Input Data Karyawan</h2>
<form method="post" action="proses.php">
	<input id="idf" value="1" type="hidden" />
	<p>  Nama : <input name="nama_karyawan" type="text" id="nama" size="40"> </p>
    <p>  Umur : <input name="umur_karyawan" type="text" id="nama" size="8"> </p>
	<button type="button"  onclick="tambahHobi(); return false;">Tambah Rincian Hobi</button>
 	<div id="divHobi"></div>
 	<button type="submit">Simpan</button>
</form>
</div>
</body>
</html>

Script proses.php

<?php
		mysql_connect("localhost","root","");
		mysql_select_db("tutorial");
		$nama_karyawan=$_POST['nama_karyawan'];
		$umur_karyawan=$_POST['umur_karyawan'];
		function proses_hoby($id_karyawan)
			{
				if(isset($_POST["rincian_hoby"]))
					{
						$hoby=$_POST["rincian_hoby"];
						reset($hoby);
						while (list($key, $value) = each($hoby)) 
							{
								$rincian_hoby	=$_POST["rincian_hoby"][$key];
								$jenis_hoby		=$_POST["jenis_hoby"][$key];
								$sql_hoby	="INSERT INTO tbl_hoby(rincian_hoby,jenis_hoby,id_karyawan)
											  VALUES('$rincian_hoby','$jenis_hoby','$id_karyawan')";  
								$hasil_hoby	=mysql_query($sql_hoby);	
							}
						}		
			}
		
		$sql="INSERT INTO tbl_karyawan(nama_karyawan,umur_karyawan)
     	  			  VALUES('$nama_karyawan','$umur_karyawan')";		
		$hasil=mysql_query($sql);
		$id_karyawan=mysql_insert_id();	
		if($hasil)
			{ 
				proses_hoby($id_karyawan);
				echo "Data berhasil diinput";
			}
		else
			{
				echo "Data Gagal diinput";	
			}	
		
?>

Adapun hasilnya jika dijalankan adalah seperti berikut ini: