Cara Membuat Form Input Add More/Tambah Dinamis dengan php dan MySQL

Share:
Cara Membuat Form Input Add More/Tambah Dinamis dengan php dan MySQL. Assalamualaikum, halo semuanya jumpa lagi di sahretech. Kali ini saya akan membagikan tutorial yang cukup bermanfaat yaitu membut form dinamis dengan php dan MySQL, penasaran bagaimana caranya, langsung aja ikuti tutorialnya di bawah ini !.





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 - sahretech
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
  • Buat database baru dengan nama latihan, lalu buat sebuah tabel mahasiswa di dalamnya. Ikuti strukturnya seperti gambar di bawah ini.
tabel mahasiswa - sahretech
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 - sahretech
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 :)



50 comments:

  1. Row 23 dan 49 pada coding: class="form-control" name="jurusan"
    perlu di koreksi menjadi:

    class="form-control" name="jurusan[]"

    ReplyDelete
  2. bang, klo di tambah nomor urut ketika tambah form inputnya gimana bang ?

    ReplyDelete
  3. Replies
    1. klik kanan, inspect element. buka tab console. terus klik tombol hapus. klo ada pesan berwarna merah(error) artinya ada script yang salah

      Delete
  4. mantap sekali gan tutorial nya,

    ReplyDelete
  5. untuk edit datanya gimana ya ?

    ReplyDelete
    Replies
    1. form yang sudah diisi bisa diedit selama belum disimpan ke database. Jika sudah terlanjur disimpan, buat halaman edit dan proses edit seperti biasa

      Delete
    2. cara menampilkan datanya jika misal yang tersimpan 2 atau 3 data gitu gimana kak?

      Delete
    3. Pake id. Contohnya bisa pake id user, jadi nanti datanya tinggal ditampilin menurut id masing-masing user

      Delete
  6. Replies
    1. alhamdulillah, senang biso bermanfaat lor. Klo bagus jngan lupo dishare yo lor, boleh jugo jingong artikel lain

      Delete
  7. klo misalnya digunakan untuk tabel gimana ya scriptnya ?

    ReplyDelete
    Replies
    1. Tidak jauh berbeda gan, untuk merubah tampilan ada d file index.php. masnya tinggal ganti class copy menjadi tabel di line 41 - 49.

      Delete
  8. Kalau penerapan pada controller codeigniter bagaimana gan..?

    ReplyDelete
    Replies
    1. Mudah 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

      Delete
  9. Kalau untuk membatasi jumlah form dinamis yang bisa keluar bagaimana ya?

    ReplyDelete
  10. Kalau untuk membuat id berbeda untuk setiap form yang ditambahkan caranya bagaimana ya ?

    ReplyDelete
    Replies
    1. permisi mas mau nanya, udah ketemu kah solusinya? saya juga lagi nyari. saya udah coba kodingan format otomatis diphp tapi ga work digabungin sama ini.

      Delete
    2. lagi nyari juga haha mau pkek buat json laravel

      Delete
  11. Saya 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 ???
    syarifsyahr@gmail.com

    ReplyDelete
  12. Bang kok remove nya gabisa ya? btw itu yang $("body") saya soalnya pake halaman dinamis bang

    ReplyDelete
  13. di klik tambah pertama nambah 1, klik selanjutnya nmabah jadi 5 om

    ReplyDelete
    Replies
    1. Coba dicopas aja mas script di atas, saya coba bisa kok

      Delete
    2. ternyata di div class hide nya ketulis add more juga hehe

      Delete
  14. Saya ingin menambahkan radio button pada form dinamis nya gmana ya om? Mohon pencerahan 081349657223...

    ReplyDelete
    Replies
    1. tinggal 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"

      Delete
    2. untuk 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

      Delete
    3. iya 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.

      Delete
  15. permisi mau nanya kalo codingan ini digabungin sama format kode otomatis kok gabisa ya?

    ReplyDelete
  16. iya om pake dropdown aja..hehe nah ini unutk pake slect2 gimana ya om?

    ReplyDelete
  17. Izin 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

    ReplyDelete
  18. terima 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

    ReplyDelete
    Replies
    1. wah klo data arraynya lebih dari 100 belum pernah saya coba mas.

      Delete
  19. Kalau misalnya datanya langsung d proses dlam penjumlahan,SC nya gmn kira2 mas??
    Misal : 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

    ReplyDelete
  20. Klo datanya tidak tersimpan di database kenapa y gan?
    Saya coba input 3x tetapi tidak ada data yang tersimpan di database dan tidak pesan error juga.

    ReplyDelete
    Replies
    1. coba untuk menampilkan hasil inputan terlebih dahulu sebelum dimasukan ke database di file proses.php

      Delete
  21. permisi 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

    ReplyDelete
    Replies
    1. tidak 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

      Delete
  22. Selamat malam bang,

    Terimakasih 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

    ReplyDelete
  23. bg mau tanya kalo untuk upload file nya ada contohnya?

    ReplyDelete
  24. Maaf, mau bertanya. kenapa option selectnya ga dikasih atribut value?

    ReplyDelete
    Replies
    1. Bisa menggunakan value atau tidak, kalo gak pake value data yg diambil adalah nama optionnya. Terima kasih atas kunjungannya :)

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi