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:

Diagram E-R

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:

Proses Form Dinamis Dengan PHP MySQL

Kemudian anda cek pada MySQL maka datanya akan terlihat seperti berikut”

Hasil Proses Form Dinamis

Source Code dan database dari materi Proses Form Dinamis Dengan PHP MySQL dapat anda unduh disini !


Komentar via Facebook tentang Proses Form Dinamis Dengan PHP MySQL

Komentar tentang Proses Form Dinamis Dengan PHP MySQL

  • mas komang, saya mau tanya. kalau seandainya data yang di input itu berupa combobox. data combo box itu di ambil dari database, nah itu gimana yah nampilin combobox nya di form dinamis? makasih

    • Tinggal buatkan variabel PHP yang bernilai tag html untuk membuat combo, dan pada function javascript untuk menambah form dinamis disertakan paramater dari variabel PHP tersebut.
      Contoh:
      1. INISIALISASI VARIABEL di PHP

      <?php
      $sl_coa="<select name=coa[] class=form-control input-sm>";
      $sql="SELECT * FROM nama_tabel";
      $hasil=mysql_query($sql);
      while($row=mysql_fetch_assoc($hasil))
      {
      $sl_coa.="<option value=".$row[‘nama_kolom1’].">".$row[‘nama_kolom2’])."</option>";
      }
      $sl_coa.="</select>";
      ?>

      2. Pembuatan fungsi di Javascript

      <script language="javascript">
      function addRincian(sl_coa) {
      stre=stre+sl_coa;
      }
      </script>

      3. Pemanggilan fungsi Javascript

      <a onclick="addRincian(‘<?php echo $sl_coa;?>’); return false;">Tambah Rincian</a>

  • Bli Komang,

    Mohon dibantu, tyang mau bikin form survey untuk user seluruh Indonesia. jadi teknisnya:
    User memasukan kode cabang (angka 4 digits) – maka akan muncul Nama Cabangnya (text)- dan nama engineernya bisa dipilih pake dropdown.
    Suksme

    • Itu bisa pake AJAX, saya sudah posting artikel Select Box Dinamis menggunakan Ajax PHP dan MySql. Tinggal pelajari dan modif sedikit

    • Hobby itu kebetulan Ngetik biasa jadi ada kemungkinan sama. Biar tidak ada yang sama, bisa saja pada tabel dibuatkan Superkey (Kumpulan atribut yang unique) misalnya id_karyawan dan jenis_hoby, atau pada proses simpan dibuatkan query dulu, cek apakah sudah ada id dan hoby yang sama. Jika ada jangan dilanjutkan ke proses simpan.

  • tolong dibuatkan fasilitas editnya mas komang, udah nyoba ngoprek buat ditambahin biar bisa ngedit di form edit ttep stuck gabisa

  • Silahkan tulis saran, komentar dan pertanyaan dibawah!

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