Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : mail@rizaldimaulidia.com. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

PHP Tips and Trick

Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL

img-responsive

Ketemu lagi dengan saya para coders. Kali ini saya ingin membagikan sebuah tutorial yang menurut saya terkadang dibutuhkan ketika kita membuat sebuah website aplikasi. Apakah itu? yup “Multiple Insert”. Apa sebenarnya multiple insert tersebut? Multiple insert adalah sebuah cara untuk menyimpan lebih dari 1 data dalam sekali aksi. Misalkan, saya punya 5 data siswa yang ingin disimpan. Kalau kita menggunakan form biasa (bukan multiple insert), otomatis kita harus melakukan simpan sebanyak 5 kali (bulak-balik form simpan 5 kali / 5 kali klik tombol simpan). Tapi akan berbeda jika form tersebut adalah form muliple insert, kita hanya perlu menginput ke 5 data tersebut dalam 1 form dengan 1 kali klik tombol simpan semua data akan lansung tersimpan tanpa kita harus bulak-balik masuk ke form tersebut lagi sebanyak 5 kali. Tentunya cara ini lebih efektif, efisien, dan menghemat waktu bukan?. Tapi balik lagi semua tergantung kebutuhan masing-masing aplikasinya.


DEMO
Sebelum membaca tutorialnya, mungkin ada yang ingin melihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN

  1. Download plugin JQUERY, klik link berikut : Download.
  2. Buat sebuah folder dengan nama multiple_insert lalu simpan pada folder xampp/htdocs/
  3. Copy and paste file jquery.min.js yang telah di download tadi ke dalam folder xampp/htdocs/multiple_insert/

STEP 2 – DATABASE
Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL

    CREATE TABLE IF NOT EXISTS `siswa` (
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `telp` varchar(15) NOT NULL,
      `alamat` text NOT NULL,
      PRIMARY KEY (`nis`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

STEP 3 – KONEKSI DATABASE
Pada step ini, kita akan membuat file php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/multiple_insert/. Berikut ini kodenya :

<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya

// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>

STEP 4 – BUAT VIEW DATA

Pada step ini, kita akan membuat sebuah file php yang berfungsi sebagai tampilan awal dan menampilkan semua data siswa dari database ke dalam sebuah tabel. Silahkan buat file index.php, lalu simpan di folder xampp/htdocs/multiple_insert/. Berikut ini tampilan dan kodenya :

View - Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL

<html>
<head>
  <title>Multiple Insert</title>
</head>
<body>
  <h1>Multiple Insert</h1>
  <a href="form.php">Tambah Data</a><br><br>
  
  <table border="1" cellpadding="5">
    <tr>
      <th>No</th>
      <th>NIS</th>
      <th>Nama</th>
      <th>Telepon</th>
      <th>Alamat</th>
    </tr>
    <?php
    // Load file koneksi.php
    include "koneksi.php";
    
    // Buat query untuk menampilkan semua data siswa
    $sql = $pdo->prepare("SELECT * FROM siswa ORDER BY nis");
    $sql->execute(); // Eksekusi querynya
    
    $no = 1; // Untuk penomoran tabel, di awal set dengan 1
    while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
      echo "<tr>";
      echo "<td>".$no."</td>";
      echo "<td>".$data['nis']."</td>";
      echo "<td>".$data['nama']."</td>";
      echo "<td>".$data['telp']."</td>";
      echo "<td>".$data['alamat']."</td>";
      echo "</tr>";
      
      $no++; // Tambah 1 setiap kali looping
    }
    ?>
  </table>
</body>
</html>

Saya akan coba jelaskan sedikit mengenai kode diatas.
include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.

$sql = $pdo->prepare(“SELECT * FROM siswa ORDER BY nis”);
$sql->execute();
Kode tersebut berfungsi untuk melakukan query ke database dan mengeksekusinya. Pada cotoh diatas, kita akan melakukan query untuk menampilkan semua data dari tabel siswa dan diurutkan berdasarkan NIS.

$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.

echo "<tr>";
echo "<td>".$no."</td>";
echo "<td>".$data['nis']."</td>";
echo "<td>".$data['nama']."</td>";
echo "<td>".$data['telp']."</td>";
echo "<td>".$data['alamat']."</td>";
echo "</tr>";

Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.


 STEP 5 – BUAT FORM
Langkah selanjutnya adalah membuat sebuah form multiple insert nya. Buat sebuah file baru dengan nama form.php, dan simpan pada folder xampp/htdocs/multiple_insert. Berikut tampilan dan kode nya :

Form - Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL

<html>
<head>
  <title>Multiple Insert</title>
  
  <!-- Load plugin jquery nya -->
  <script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <h1>Multiple Insert</h1>
  
  <form method="post" action="proses.php">
    <!-- Buat tombol untuk menabah form data -->
    <button type="button" id="btn-tambah-form">Tambah Data Form</button>
    <button type="button" id="btn-reset-form">Reset Form</button><br><br>
    
    <b>Data ke 1 :</b>
    <table>
      <tr>
        <td>NIS</td>
        <td><input type="text" name="nis[]" required></td>
      </tr>
      <tr>
        <td>Nama</td>
        <td><input type="text" name="nama[]" required></td>
      </tr>
      <tr>
        <td>Telepon</td>
        <td><input type="text" name="telp[]" required></td>
      </tr>
      <tr>
        <td>Alamat</td>
        <td><textarea name="alamat[]" required></textarea></td>
      </tr>
    </table>
    <br><br>

    <div id="insert-form"></div>
    
    <hr>
    <input type="submit" value="Simpan">
  </form>
  
  <!-- Kita buat textbox untuk menampung jumlah data form -->
  <input type="hidden" id="jumlah-form" value="1">
  
  <script>
  $(document).ready(function(){ // Ketika halaman sudah diload dan siap
    $("#btn-tambah-form").click(function(){ // Ketika tombol Tambah Data Form di klik
      var jumlah = parseInt($("#jumlah-form").val()); // Ambil jumlah data form pada textbox jumlah-form
      var nextform = jumlah + 1; // Tambah 1 untuk jumlah form nya
      
      // Kita akan menambahkan form dengan menggunakan append
      // pada sebuah tag div yg kita beri id insert-form
      $("#insert-form").append("<b>Data ke " + nextform + " :</b>" +
        "<table>" +
        "<tr>" +
        "<td>NIS</td>" +
        "<td><input type='text' name='nis[]' required></td>" +
        "</tr>" +
        "<tr>" +
        "<td>Nama</td>" +
        "<td><input type='text' name='nama[]' required></td>" +
        "</tr>" +
        "<tr>" +
        "<td>Telepon</td>" +
        "<td><input type='text' name='telp[]' required></td>" +
        "</tr>" +
        "<tr>" +
        "<td>Alamat</td>" +
        "<td><textarea name='alamat[]' required></textarea></td>" +
        "</tr>" +
        "</table>" +
        "<br><br>");
      
      $("#jumlah-form").val(nextform); // Ubah value textbox jumlah-form dengan variabel nextform
    });
    
    // Buat fungsi untuk mereset form ke semula
    $("#btn-reset-form").click(function(){
      $("#insert-form").html(""); // Kita kosongkan isi dari div insert-form
      $("#jumlah-form").val("1"); // Ubah kembali value jumlah form menjadi 1
    });
  });
  </script>
</body>
</html>

Saya akan jelaskan terlebih dahulu fungsi dari ketiga tombol yang ada pada form multiple insert yang akan kita buat ini. Pertama, tombol Tambah Data Form berfungsi untuk menambah form inputan data siswa. Kedua, tombol Reset Form berfungsi untuk mereset form inputan data siswa kembali menjadi 1 form inputan data siswa. Ketiga, tombol Simpan berfungsi untuk melakukan proses pengiriman data siswa yang telah diinput menuju file proses.php yang kemudian akan di simpan ke database.

Trik utama dalam hal membuat multiple insert adalah ada pada penamaan (atribut name) dari setiap textbox. Yakni dengan menambahkan “[]” kepada setiap nama textboxnya. Dalam kasus kita buat nama masing-masing textbox menjadi seperti ini :
<input type=”text” name=”nis[]” required>
<input type=”text” name=”nama[]” required>
<input type=”text” name=”telp[]” required>
<textarea name=”alamat[]” required></textarea>
Fungsi dari tanda “[]” adalah agar data-data yang kita input ketika dikirim ke proses.php akan menjadi sebuah array. Nantinya di dalam proses.php, kita akan melakukan perulangan terhadap array tersebut. Sehingga kita tidak perlu membuat query insert sebanyak data yang ingin kita inputkan.

<div id=”insert-form”></div>
Kode ini akan kita gunakan untuk menampung data form inputan siswa. Jadi ketika kita akan menambah form inputan data siswa, nanti form tersebut akan ditambahkan ke dalam div tersebut dengan bantuan jquery.

<input type=”hidden” id=”jumlah-form” value=”1″>
Textbox ini sengaja saya sembunyikan karena hanya berfungsi sebagai penampung jumlah form inputan siswa yang ada itu berapa. Sebagai default kita set valuenya dengan 1, karena ketika awal masuk form inputan data siswanya hanya ada 1. Textbox ini akan kita gunakan sebagai penomoran form inputan data siswa nya. Di dalam form saya buat label “Data ke n”, n disitu nanti kita isi dengan jumlah form yang ada pada textbox ini ditambah 1.

$(“#insert-form”).append(“……
Kode ini lah yang nantinya berfungsi untuk menabah form inputan ke dalam tag div insert-form yang sudah saya bahas sebelumnya.


STEP 6 – PROSES SIMPAN

Langkah terakhir adalah kita akan membuat sebuah file untuk melakukan proses simpan ke database. Buat sebuah file dengan nama proses.php, lalu simpan pada folder xampp/htdocs/multiple_insert/. Berikut ini kodenya :

<?php
// Include / load file koneksi.php
include "koneksi.php";

// Ambil data yang dikirim dari form
$nis = $_POST['nis']; // Ambil data nis dan masukkan ke variabel nis
$nama = $_POST['nama']; // Ambil data nama dan masukkan ke variabel nama
$telp = $_POST['telp']; // Ambil data telp dan masukkan ke variabel telp
$alamat = $_POST['alamat']; // Ambil data alamat dan masukkan ke variabel alamat

// Proses simpan ke Database
$sql = $pdo->prepare("INSERT INTO siswa VALUES(:nis,:nama,:telp,:alamat)");

$index = 0; // Set index array awal dengan 0
foreach($nis as $datanis){ // Kita buat perulangan berdasarkan nis sampai data terakhir
  $sql->bindParam(':nis', $datanis); // Set data nis
  $sql->bindParam(':nama', $nama[$index]); // Ambil dan set data nama sesuai index array dari $index
  $sql->bindParam(':telp', $telp[$index]); // Ambil dan set data telepon sesuai index array dari $index
  $sql->bindParam(':alamat', $alamat[$index]); // Ambil dan set data alamat sesuai index array dari $index
  $sql->execute(); // Eksekusi query insert
  
  $index++; // Tambah 1 setiap kali looping
}

// Buat sebuah alert sukses, dan redirect ke halaman awal (index.php)
echo "<script>alert('Data berhasil disimpan');window.location = 'index.php';</script>";
?>

Sedikit penjelasan dari kode diatas.

foreach($nis as $datanis){
Seperti yang saya jelaskan sebelumnya. Kita akan melakukan perulangan terhadap data array yang dikirim dari file form.php. Disini saya melakukan perulangan terhadap data nis.

$index = 0;
Mungkin anda bertanya-tanya variabel ini sebenarnya untuk apa? saya akan jelaskan terlebih dahulu apa itu array dalam php. Array ini adalah sebuah variabel dimana kita bisa mengisi lebih dari 1 data dalam variabel tersebut. Struktur kode array sendiri adalah seperti berikut ini :
$namaarray = array(“index”=>”value”, “index”=>”value”);
Index array ini dimulai dari angka 0. Contoh :
$array_baru = array(0=>”data ke 1″, 1=>”data ke 2″);
Untuk mengakses array diatas, caranya seperti ini : $array_baru[0] atau $array_baru[1]
Tetapi kita juga bisa mendeklarasikan nama index array itu sendiri. Contoh :
$array_baru = array(“namaindex1″=>”data ke 1”, “namaindex2″=>”data ke 2”)
Untuk mengakses array diatas, caranya seperti ini : $array_baru[‘namaindex1’] atau $array_baru[‘namaindex2’].

Balik lagi ke dalam kasus kita. Sekarang saya beri contoh misalnya saya menginput 2 data siswa pada form. Isinya seperti berikut :

  1. Data 1 :
    NIS : 11010470113
    Nama : Rizaldi Maulidia
    Telepon : 089772661722
    Alamat : Bandung
  2. Data 2 :
    NIS : 11010470114
    Nama : Siska Melina
    Telepon : 081772771662
    Alamat : Jakarta

Nanti, data yang akan diterima oleh file proses.php dari masing-masing variabel $nis, $nama, $telp, $alamat adalah seperti berikut ini :

$nis = $_POST[‘nis’];
Kode tersebut akan jadi array seperti berikut :
$nis = array(0=>”11010470113″, 1=>”11010470114″);

$nama = $_POST[‘nama’];
Kode tersebut akan jadi array seperti berikut :
$nama = array(0=>”Rizaldi Maulidia”, 1=>”Siska Melina”);

$telp = $_POST[‘telp’];
Kode tersebut akan jadi array seperti berikut :
$telp = array(0=>”089772661722″, 1=>”081772771662″);

$alamat = $_POST[‘alamat’];
Kode tersebut akan jadi array seperti berikut :
$alamat = array(0=>”Bandung”, 1=>”Jakarta”);


Mungkin sekian yang bisa saya jelaskan. Apabila Anda masih bingung, bisa langsung tanyakan pada form komentar dibawah ini. Terimakasih.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini
– Download versi PDO : Link download yang sesuai tutorial ini yakni menggunakan fungsi PDO untuk query ke databasenya
– Download versi MySQLi : Link download untuk Anda yang ingin source code versi MySQLi dari tutorial ini

Tutorial membuat multiple insert dengan php dan mysql, Tutorial membuat multi insert dengan php dan mysql, Cara mudah membuat multi insert dengan php dan mysql, cara buat multiple insert dengan php dan mysql, Tutorial buat multiple insert dengan php dan mysql, cara buat multi insert dengan php dan mysql, tutorial buat multi insert dengan php dan mysql, Input banyak data sekaligus dengan PHP, Membuat form multi input dengan php, script php input data banyak, multiple input data dengan php, Source Code multiple insert dengan php dan mysql

Multiple Insert

(Total : 91,277 viewers, 1 viewers today)
cara-mudah-membuat-multiple-insert-dengan-php-dan-mysql

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

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

Name *

Email *

Website

44 Comments

  1. fatah-fatah

    Agan Rizaldi memang keren. makasih banyak ilmunya

  2. Moch Azs

    Nnya gan, kalau misalnya mau input data pada 2 form berbeda terus disimpanya dalam 1 Tabel database itu kek gmna yah ?

  3. Pamungkas Andono W

    Bagus tulisannya sedikit berkomentar menurut saya lebih baik pake key nya aja.
    Foreach($nis as $index => $datanis)
    dari pada harus dadak bikin
    $index = 0; lalu nanti di increment $index++

  4. ugi cahyono putra

    ko sourcenya ga bisa di download ya

    • Maaf om, ada kesalahan pada link downloadnya, sudah saya perbaiki. Kalau masih belum bisa, coba Clear Cache browsernya dulu, lalu coba lagi. Mohon Maaf sebelumnnya.

  5. eeeeeeeee

    kok mysqlinya not work pas ngesave apa VALUES ya harus gw isi?

    • errornya apa? VALUES di query INSERT nya? ya harus diisi kalau ga diisi ga akan bisa insert data, perhatikan baik-baik tutorial ini

  6. Devaclone

    Mau tanya, bisa kah multiple input dengan gambar atau upload file juga?

  7. Reza Hardia Putra

    //Struktur Table Database//

    CREATE TABLE `download` (
    `id` int(10) UNSIGNED NOT NULL,
    `title` varchar(255) DEFAULT NULL,
    `vid_id` varchar(255) DEFAULT NULL,
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;


    — insert to `download`

    INSERT INTO `download` (`id`, `title`, `vid_id`) VALUES

    // Code di file.php//

    require(“./db.php”);
    $vidid = $videoId;
    $count = $database->count(“download”, array(“vid_id”=> “{$vidid}”,));
    if ($count insert(“download”, array(‘vid_id’=> $vidid));
    }

    $titled = $snippet_title;
    $count = $database->count(“download”, array(“title”=> “{$titled}”,));
    if ($count insert(“download”, array(‘title’=> $titled));
    }

    ———————————————————–
    Mas mau tanya, untuk kode php diatas fungsinya untuk insert 2 data ke database (vidid dan titled), tapi masalahnya masuknya ke beda id artinya masuk di 2 baris berbeda, jadi saya pertanyaan saya bagaimana agar 2 data tersebut bisa masuk di dalam 1 id yg sama dan dalam satu baris yg sama juga., Mkasih sebelumnya

    • kalau gitu ya berarti perintah pertama lakukan insert vidid nya, yang perintah kedua jangan insert lagi, tapi lakukan update

  8. anonymos

    mas kalau cara nambahkan button hapus kepada setiap input yang kita tambah bagaimana caranya mas??

  9. Aldi Aldi

    Mas.. minta bantuannya dong.. cara multiple insert dengan 1 field saja gimana ya mas ?

  10. Abdulhoni

    Pak tambabin filter agar data yang di register tidak double .

    Jika kita menginputkan nis yang sama apakah ada filter ??

    Mohon bimbinganya

    • untuk tutorial ini tidak ada filter itu om, bisa om improve sendiri untuk pengecekan filter nya.
      Alurnya ketika sebelum insert ke database, buat query dulu untuk cek ke database apakah data dengan nis tersebut sudah ada atau tidak, jika tidak ada maka insert datanya, gunakan if….else….

  11. ilsam putra

    mas kenapa kalo kita tambahkan jquery, misal function js timepicker di form pertama jalan, tapi di form kedua dan seterusnya kok nggak jalan ya?

    • soalnya itu form baru om, jadi ketika append form baru om panggil lagi fungsi untuk mengubah textbox jadi timepickernya. misal :

      $(“#insert-form”).append(“tag form html nya”)
      $(“.timepicker”).timepicker() // Tepat dibawah skrip append kita panggil lagi skrip timepicker

  12. Adi Ramadhan

    permisi mas rizal, link download jquery nya ndak bisa di download.. file tidak dapat ditemukan, gimana itu? harus pake jquery ya mas rizal?

    • sudah saya update om, mohon maaf baru sempat balas dan di perbaiki, dan terimakasih atas laporan kerusakan link nya

  13. Muhammad

    Mas kalau mau save dengan satu nis dengan banyak alamat gimana ya?

    • om nya tambahkan inputan nis di luar multiple insert, jadi misal tambahkan textbox nis diatas form multiple, jadi nanti pas di proses insert ke 2 tabel langsung, pertama tabel untuk menampung data nis nya, kedua tabel untuk menampung data-data alamat nis itu, jadi relasinya 1 – n antara tabel nis dan tabel alamat

  14. Rifky_Satria

    Thanks gan ane berhasil, cuma satu gan pas proses edit ane prosesnya memang ngedit berhasil tapi kok primary ane yg multiple insert itu juga keedit berubah kaya auto increment gitu ya

    • emang seperti itu om konsepnya, jadi pas edit di hapus dulu semua datanya lalu di insert ulang, ga masalah kok seperti itu juga

  15. 1nur trisari

    permisi mas Rizal, saya baru belajar php 7, nah kalau dalam kasus saya ini hmpir sama dengan yang ada di halaman ini, tapi source code saya hanya bisa insert satu record saja, mohon solusinya bagainmana agar bisa menyimpan seluruh data tang dihitung tersebut ke tabel, tidak hanya satu record saja.

    • coba copas skripnya ke pastebin*com. jangan disini mba. biar ga pusing bacanya hehe
      terus screenshot juga halaman yang di maksud seperti apa.

      atau bisa chat saja lewat fans page fb kami, upload file tsb dan screenshotnya

  16. Rendy Artg

    masih gak bisa mas ini code yang saya bikin

    var insert = $(“#insert”).append(‘Item ke ‘ + next + ‘ : Hapus’ +
    // Buat fungsi untuk mereset form ke semula
    $(“#reset”).click(function(){
    $(“#insert”).html(“”); // Kita kosongkan isi dari div insert-form
    $(“#jumlah”).val(“1”); // Ubah kembali value jumlah form menjadi 1
    });
    $(“#delete”).click(function(){
    $(“#insert”).remove();
    });
    });

  17. Rendy Artg

    mas itu yg default nya ketika ditambah langsung hapus semua, bisa gak di buat hapusnya satu persatu ?

    • sangat bisa om.

      1. Pada form.php, Ubah skrip ini (Line 54):
      $("#insert-form").append("<b>Data ke " + nextform + " :</b>" +

      jadi gini :
      $("#insert-form").append("<div class='form-row'><b>Data ke " + nextform + " :</b> <a href='javascript:void(0)' class='btn-delete-one'>Hapus</a>" +

      2. Pada form.php, Ubah skrip ini (Line 73):
      "<br><br>");

      ubah jadi gini:
      "<br><br></div>");

      3. Pada form.php,
      $("#btn-reset-form").click(function(){
      $("#insert-form").html(""); // Kita kosongkan isi dari div insert-form
      $("#jumlah-form").val("1"); // Ubah kembali value jumlah form menjadi 1
      });

      tambah skrip dibawah setelah skrip diatas :
      $("#insert-form").on("click", ".btn-delete-one", function(){
      $(this).closest(".form-row").remove();
      });

      • Rendy Artg

        masih gak bisa mas ini script saya

        $(document).ready(function(){ // Ketika halaman sudah diload dan siap
        $(“#add”).click(function(){ // Ketika tombol Tambah Data Form di klik
        var jumlah = parseInt($(“#jumlah”).val()); // Ambil jumlah data form pada textbox jumlah-form
        var next = jumlah + 1; // Tambah 1 untuk jumlah form nya

        // Kita akan menambahkan form dengan menggunakan append
        // pada sebuah tag div yg kita beri id insert-form
        var insert = $(“#insert”).append(‘Item ke ‘ + next + ‘ : Hapus’ +
        ” +
        ” +
        ‘Nama APD’ +
        ” +
        ‘- PILIH -‘ +
        ” +

        ‘<option value="”>’ +

        ” +
        ” +
        ” +
        ” +
        ” +
        ” +
        ‘* Ukuran’ +
        ” +
        ‘- PILIH -‘ +
        ‘ALL SIZE’ +
        ‘S’ +
        ‘M’ +
        ‘L’ +
        ‘XL’ +
        ‘XXL’ +
        ‘XXXL’ +
        ‘5/39’ +
        ‘6/40’ +
        ‘7/41’ +
        ‘8/42’ +
        ‘9/43′ +
        ’10/44’ +
        ” +
        ” +
        ” +
        ” +
        ” +
        ‘Keterangan’ +
        ” +
        ‘- PILIH -‘ +
        ‘KARYAWAN BARU’ +
        ‘PERGANTIAN BERJANGKA’ +
        ‘APD RUSAK’ +
        ” +
        ” +
        ”);

        $(“#jumlah”).val(next); // Ubah value textbox jumlah-form dengan variabel nextform
        });

        // Buat fungsi untuk mereset form ke semula
        $(“#reset”).click(function(){
        $(“#insert”).html(“”); // Kita kosongkan isi dari div insert-form
        $(“#jumlah”).val(“1”); // Ubah kembali value jumlah form menjadi 1
        });
        $(“#delete”).click(function(){
        $(“#insert”).remove();
        });
        });

      • Rendy Artg

        udah bisa mas tpi pengembalian nya tetep acak value jumlah formnya
        ini code saya
        $(“#jumlah”).val(next); // Ubah value textbox jumlah-form dengan variabel nextform
        });

        // Buat fungsi untuk mereset form ke semula
        $(“#reset”).click(function(){
        $(“#insert”).html(“”); // Kita kosongkan isi dari div insert-form
        $(“#jumlah”).val(“1”); // Ubah kembali value jumlah form menjadi 1
        });
        $(“#insert”).on(“click”, “#delete”, function(){
        $(this).closest(“#item”).remove();
        $(“#jumlah”).val(“1”);
        });

        • Kalau untuk itu sulit om. Makanya pada tutorial ini saya tidak menyediakan fitur hapur per satu form, melainkan hapus semua form. Kalau om nya tetap mau hapus per satu form, lebih baik urutan nomor form nya di hapus saja. Karena dari pengalaman saya selama bikin web, ketika ada fitur hapus per form, saya tidak pernah pakai nomor urut karena sulit saat mengurutkan kembalinya

          • Rendy Artg

            gak bisa pake perulangan no urut otoamis seperti php
            misal $no = 0;
            while () {
            $no++;
            }
            klo di javascriptnya gimana ya mas saya kurang paham klo pake javascript

          • Iya coba dipikirkan kembali, kalau misal kondisinya saya sudah add 5 form. Terus saya hapus form ke 2, berarti harus di loopig lagi dari awal form nya? Lalu value yang sudah di isiinya kaya gimana? Menurut saya lihat dari kondisi2 tadi kurang efektif kalau bikin fitur ini, makanya saya pun tidak pernah pakai fitur nomor urut untuk kasus form add yang bisa di hapus per satu form.

            Ya coba pelajari dasar-dasar javacsriptnya dulu biar paham hhe

  18. NoNameX00

    mas minta bantuan nya dong
    saya punya 4 field yang terdiri dari nama, jurusan, guru, dan jenis kelamin
    pada field jurusan dan guru mengambil data dari database
    jadi bagaimana ya mas agar bisa membuat multiple insert dengan mengambil data dari database?
    untuk jurusan dan gurunya dibuat select option mas
    terima kasih

  19. triayulestari

    maaf min boleh gak minta bantuannya banget. saya punya 2 file, jadi untuk POST nya di file yang satu dan simpan ke databasenya di file yang kedua. itu gimana cara penulisannya ya gan ?

  20. Thorga Park

    Mas, saat sudah selesai menginputkan, keluar error ‘Call to a member function bindParam() on boolean’ di proses.php nya. Terus saya coba var_dump($query), yang keluar bool(false).
    Kesalahannya dimana ya mas?

  21. simon wijaya

    Mas Rizal,
    apakah mungkin utk membatasi jumlah input, contohnya jika hanya ingin membatasi sampai 10 sebagai jumlah maksimum?
    Trimak kasih utk bantuannya.

    • Rizaldi Maulidia Achmad

      bisa om. paling ketika user mengklik tombol Tambah Data Form. disitu tambahkan if untuk cek apakah jumlah nya sudah lebih dari 10 atau belum. jika belum maka boleh tambah form. kurang lebih seperti ini contoh singkat kode nya :
      .
      if(jumlah <= 10){ // Jika kurang dari sama dengan 10 // maka boleh menambah form } // jika lebih dari 10 yah biarkan saja

NOTE ARCHIVES