Cara Mudah Membuat Multiple Insert dengan PHP dan MySQL
Rizaldi Maulidia Achmad
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
- Download plugin JQUERY, klik link berikut : Download.
- Buat sebuah folder dengan nama multiple_insert lalu simpan pada folder xampp/htdocs/
- 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 :
- Buat sebuah database dengan nama mynotescode
- Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
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 :
<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 :
<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 :
- Data 1 :
NIS : 11010470113
Nama : Rizaldi Maulidia
Telepon : 089772661722
Alamat : Bandung - 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
POST YOUR COMMENTS