Coding form dinamis php mysql

Question

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

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

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

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

kode php Form dinamis Laravel Form input php

Coding form dinamis php mysql

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social