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 :)



23 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
  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
  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

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