Saat benar-benar terjun untuk membuat aplikasi, kita akan menemui masalah yang beraneka ragam, dari yang simple sampai yang sangat sulit sekali. Salah satu contoh masalah yang mungkin akan kita temui adalah membuat form tambah data di satu halaman yang sama tanpa reload halaman. Salah satu contohnya adalah saat mendaftar masuk sekolah atau kerja, kalian akan diminta untuk mengisi form secara online, saat mengisi form prestasi atau skill biasanya kalian bisa mengisi nya lebih dari 1 kali tanpa me-reload halaman yang sama. Gambarannya seperti di bawah ini
 |
| Contoh Form Dinamis |
Selain itu, cara ini juga bisa dipake untuk mengisi banyak data ke dalam database tanpa berulang-ulang kali. Misalnya, kalian mau input banyak data mahasiswa, cukup klik tombol tambah sesuai dengan banyak data yang ingin dimasukkan lalu klik submit dan record otomatis masuk ke database. Nah, kalo mau jadi programmer yang handal, contoh kasus yang seperti ini jelas harus bisa diselesaikan dong. Tapi caranya bagaimana ? caranya mudah, ikuti tutorial di bawah ini step by step ya ...
Cara Membuat Form Add More/ Tambah Dinamis dengan Php dan MySQL
Jika kalian sedang mencari cara membuat form input dinamis, atau menambah form input di dalam satu halaman tanpa reload maka disini jawabannya. Saya akan mencoba mengulasnnya dengan mudah dan lengkap, jadi tidak hanya form saja, saya juga akan mempraktekkannya lengkap dengan proses memasukkan data ke dalam database juga.
Masalah yang akan kita bahas adalah membuat form input data mahasiswa sederhana, sebuah halaman form terdiri dari form input nama, jenis kelamin, alamat, dan jurusan. Di bagian bawah akan diberi tombol tambah form, untuk menambah data mahasiswa lainnya
Masalah yang akan kita bahas adalah membuat form input data mahasiswa sederhana, sebuah halaman form terdiri dari form input nama, jenis kelamin, alamat, dan jurusan. Di bagian bawah akan diberi tombol tambah form, untuk menambah data mahasiswa lainnya
- Buat database baru dengan nama latihan, lalu buat sebuah tabel mahasiswa di dalamnya. Ikuti strukturnya seperti gambar di bawah ini.
 |
| tabel mahasiswa |
- Buat sebuah folder dengan nama formdinamis, lalu buat sebuah file index.php dan ikuti scriptnya seperti gambar di bawah ini.
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<br>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Form Tambah Data Dinamis</div>
<div class="panel-body">
<!-- membuat form -->
<!-- gunakan tanda [] untuk menampung array -->
<form action="proses.php" method="POST">
<div class="control-group after-add-more">
<label>Nama</label>
<input type="text" name="nama[]" class="form-control">
<label>Jenis Kelamin</label>
<input type="text" name="jk[]" class="form-control">
<label>Alamat</label>
<input type="text" name="alamat[]" class="form-control">
<label>Jurusan</label>
<select class="form-control" name="jurusan[]">
<option>Sistem Informasi</option>
<option>Informatika</option>
<option>Akuntansi</option>
<option>DKV</option>
</select>
<br>
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Add
</button>
<hr>
</div>
<button class="btn btn-success" type="submit">Submit</button>
</form>
<!-- class hide membuat form disembunyikan -->
<!-- hide adalah fungsi bootstrap 3, klo bootstrap 4 pake invisible -->
<div class="copy hide">
<div class="control-group">
<label>Nama</label>
<input type="text" name="nama[]" class="form-control">
<label>Jenis Kelamin</label>
<input type="text" name="jk[]" class="form-control">
<label>Alamat</label>
<input type="text" name="alamat[]" class="form-control">
<label>Jurusan</label>
<select class="form-control" name="jurusan">
<option>Sistem Informasi</option>
<option>Informatika</option>
<option>Akuntansi</option>
<option>DKV</option>
</select>
<br>
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fungsi javascript untuk menampilkan form dinamis -->
<!-- penjelasan :
saat tombol add-more ditekan, maka akan memunculkan div dengan class copy -->
<script type="text/javascript">
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy").html();
$(".after-add-more").after(html);
});
// saat tombol remove dklik control group akan dihapus
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
</body>
</html>- Buat sebuah halaman baru dengan nama proses.php dan ikuti scriptnya seperti gambar di bawah ini.
<?php
//membuat koneksi
$con = mysqli_connect("localhost", "root", "", "latihan");
//memasukkan data ke array
$nama = $_POST['nama'];
$jk = $_POST['jk'];
$alamat = $_POST['alamat'];
$jurusan = $_POST['jurusan'];
$total = count($nama);
//melakukan perulangan input
for($i=0; $i<$total; $i++){
mysqli_query($con, "insert into mahasiswa set
nama = '$nama[$i]',
jk = '$jk[$i]',
alamat = '$alamat[$i]',
jurusan = '$jurusan[$i]'
");
}
//kembali ke halaman sebelumnya
header("location: index.php");
- Hidupkan webservice dan buka di browser kalian. Maka hasilnya akan tampak seperti gambar di bawah ini.
 |
| hasil form dinamis |
Bagaimana mudah atau susah ?. saya fikir susah cuma sekali, setelah baca ini saya yakin anda akan sumringah dan kalian akan merasa bahwa "aku akan menjadi top programmer in the world cup". Sekian tutorial Cara Membuat Form Input Add More/Tambah Dinamis dengan php dan MySQL, semoga dapat membantu kalian yang membutuhkan. Lebih dan kurangnnnya saya mohon maaf, bila ada pertanyaan, kritik dan saran silahkan tinggalkan di kolom komentar di bawah ini. Happy Coding dan ikuti terus tutorial seru lainnya :)
mantap master
ReplyDeleteRow 23 dan 49 pada coding: class="form-control" name="jurusan"
ReplyDeleteperlu di koreksi menjadi:
class="form-control" name="jurusan[]"
Siap gan 🙂🙂🙂
DeleteSangat membantu... Terimakasih
ReplyDeletebang, klo di tambah nomor urut ketika tambah form inputnya gimana bang ?
ReplyDeletebuat primary key aja ka
Deleteko remove nya ga berfungsi ya?
ReplyDeleteklik kanan, inspect element. buka tab console. terus klik tombol hapus. klo ada pesan berwarna merah(error) artinya ada script yang salah
Deletemantap sekali gan tutorial nya,
ReplyDeleteTerimakasih juga atas kunjungannya gan
Deleteuntuk edit datanya gimana ya ?
ReplyDeleteform yang sudah diisi bisa diedit selama belum disimpan ke database. Jika sudah terlanjur disimpan, buat halaman edit dan proses edit seperti biasa
Deletecara menampilkan datanya jika misal yang tersimpan 2 atau 3 data gitu gimana kak?
DeletePake id. Contohnya bisa pake id user, jadi nanti datanya tinggal ditampilin menurut id masing-masing user
DeleteMantap nian lor...
ReplyDeletealhamdulillah, senang biso bermanfaat lor. Klo bagus jngan lupo dishare yo lor, boleh jugo jingong artikel lain
Deleteklo misalnya digunakan untuk tabel gimana ya scriptnya ?
ReplyDeleteTidak jauh berbeda gan, untuk merubah tampilan ada d file index.php. masnya tinggal ganti class copy menjadi tabel di line 41 - 49.
DeleteKalau penerapan pada controller codeigniter bagaimana gan..?
ReplyDeleteMudah gan, index.php sebagai viewnya dan proses.php sebagai controllernya. Caranya silahkan arahkan ke function yg ada di controller tersebut. Bisa dicek dulu pake var_dump($var) untuk melihat apakah variabel sudah masuk. Lalu dilooping semu datanya. Dan di dalam looping tersebut buat insert data k database
DeleteKalau untuk membatasi jumlah form dinamis yang bisa keluar bagaimana ya?
ReplyDeleteKalau untuk membuat id berbeda untuk setiap form yang ditambahkan caranya bagaimana ya ?
ReplyDeletepermisi mas mau nanya, udah ketemu kah solusinya? saya juga lagi nyari. saya udah coba kodingan format otomatis diphp tapi ga work digabungin sama ini.
Deletelagi nyari juga haha mau pkek buat json laravel
DeleteSaya membuat fungsi autofill untuk form dinamis ini. tapi jika formnya ditambahkan, autofill hanya berfungsi pada form pertama. Bagaimana caranya agar id inputan berbeda setiap ditambahkan sehingga autofill bisa berfungsi untuk setiap form yang ditambahkan ???
ReplyDeletesyarifsyahr@gmail.com
Bang kok remove nya gabisa ya? btw itu yang $("body") saya soalnya pake halaman dinamis bang
ReplyDeletekok gak masuk ke database ya?
ReplyDeletedi klik tambah pertama nambah 1, klik selanjutnya nmabah jadi 5 om
ReplyDeleteCoba dicopas aja mas script di atas, saya coba bisa kok
Deleteternyata di div class hide nya ketulis add more juga hehe
Deletehehe, ok mantap klo gitu
DeleteSaya ingin menambahkan radio button pada form dinamis nya gmana ya om? Mohon pencerahan 081349657223...
ReplyDeletetinggal buat aja gan seperti biasa, tambahkan radio button di dua bagian formnya. tambah radio button di bagian form yang tampil dan tambah radio button yang tampil di bagian from yang dihidden yang ada di dalam class="copy-hide"
Deleteuntuk generate atribut ID radiobuttnya gmana suhu? kan harus beda ya atribut ID nya ya tiap kali copy, agar saat klik rb gak ke ikut form sebelumya. terimakasih
Deleteiya saya baru coba ternyata tidak bisa dibuat seperti biasa, klo dibuat seperti biasa yg diklik hanya satu rb saja, rb yang lain jadi kosong. masalah ini belum pernah saya buat mas, jadi solusinya pake dropdown area saja mungkin.
Deletepermisi mau nanya kalo codingan ini digabungin sama format kode otomatis kok gabisa ya?
ReplyDeleteiya om pake dropdown aja..hehe nah ini unutk pake slect2 gimana ya om?
ReplyDeletetop...
ReplyDeleteIzin bang mau tanya, kenapa ya klu link java script sama bootstrapnya pake yg phnya abang jalanya normal, tp tampilan webnya malah jadi kecil banget, klu di ganti jacariptnya yg terbaru sama bootstral 4 pas di refresh formnya otomatis ketambah satu, mohon pencerahanya, jika berkenan bala ke wa aku 082191915049
ReplyDeleteterima kasih buat pencerahannya om. mw tanya dong om, ketika memaasukkan data array pakai _post, kenapa cuma maksimal 100 array aja ya? padahal arraynya lebih dari 100
ReplyDeletewah klo data arraynya lebih dari 100 belum pernah saya coba mas.
DeleteKalau misalnya datanya langsung d proses dlam penjumlahan,SC nya gmn kira2 mas??
ReplyDeleteMisal : pada form select "nama nagari", kemudian d dalam tabelnya ada field ongkos, setelah di pilih nama nagari,, maka field ongkos d tambahkan sebanyak pihak yg telah ditambahkan sebelumnya
Klo datanya tidak tersimpan di database kenapa y gan?
ReplyDeleteSaya coba input 3x tetapi tidak ada data yang tersimpan di database dan tidak pesan error juga.
coba untuk menampilkan hasil inputan terlebih dahulu sebelum dimasukan ke database di file proses.php
Deletepermisi gan, mau nanya, kan kalau primary key dalam tabel itu tidak boleh double isinya, kira" pas input data banyak" gini, gimana ya untuk isi id mahasiswanya? soalnya dari codingannya seperti nya tidak ada untuk isi id mahasiswanya
ReplyDeletetidak saya buat untuk isi primary key karena otomatis dibuat di database (auto increment). Tapi jika primary key dibuat sendiri, gunakan saja contoh inputan di atas. tinggal divalidasi apakah nilai inputan satu dengan yang lain itu sama atau tidak
DeleteSelamat malam bang,
ReplyDeleteTerimakasih tulisannya, sangat bermanfaat, namun saya menemui kesulitan bang, saya ingin menambahkan plugin select2 di antara field yg ditambahkan, namun plugin select2 nya tidak aktif jika saya gunakan di bagian field yg ditambahkan, mohon bantuannya
bg mau tanya kalo untuk upload file nya ada contohnya?
ReplyDeleteMaaf, mau bertanya. kenapa option selectnya ga dikasih atribut value?
ReplyDeleteBisa menggunakan value atau tidak, kalo gak pake value data yg diambil adalah nama optionnya. Terima kasih atas kunjungannya :)
Delete