Proses Form Dinamis Dengan PHP MySQL

12 January 2016 | Tags: ,


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

  • mas saya menggunakan mysqli, ketika script nya sudah saya ubah sesuai dengan mysqli, muncul eror pada baris ke 17 yaitu di “$hasil_hoby = mysql_query($conn,$sql_hoby);” . Tetapi data karyawan berhasil terinput namun pada table hoby tetap kosong. itu kenapa ya mas kira2? terimakasih sebelumnya

  • Saya buat form input dengan combo box dinamis yang isinya dari database tapi saat di klik simpan isi dari combo box dinamis tersebut tidak ikut tersimpan. Bisakah bapak membantu saya?

  • mas Komang, saya coba form input dinamis menggunakan combobox sesuai dengan petunjuk yang ada di kolom komentar, tp kok gak jalan ya….m

    • masalah mungkin Value di Combobox. Cara sederhana-nya coba tampilkan hasil proses pada saat submit dengan perintah echo. Itu memudahkan kita mencari salahnya dimana.

    • Form dinamis itu untuk menambahkan form secara dinamis sesuai keperluan. Untuk memastikan bisa tidaknya sesuai kasus anda bisa dicoba dulu buatnya.

  • Silahkan tulis saran, komentar dan pertanyaan dibawah!

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