Tulisan menjelaskan cara membuat form input yang dapat menambahkan baris input secara dinamis menggunakan jQuery dan PHP. Form dibuat menggunakan tabel dengan tombol tambah baris. jQuery fungsi append ditambahkan untuk menambah baris baru yang berisi input. Nama input diberi nomor urut yang dihitung dengan variabel. PHP menggunakan perulangan foreach untuk menyimpan data ke database sesuai jumlah baris yang dikirim.

1. UPLOD
Selamat berjumpa kembali dengan tutorial Media Kreatif, kali ini kami akan mencoba
mengangkat study sederhana dalam proses upload beberapa file secara bersamaan, atau yang
lebih kerennya kita sebut dengan multiple upload file dengan PHP. Bagaimana cara
pembuatannya, apakah cukup rumit atau mungkin hanya memerlukan kode yang tak lebih
dari 10 baris?
Setelah kita sederhanakan, ternyata prinsip dasar multiple upload juga sangat mudah, pada
tutorial kali ini kami berikan contoh sederhana dari proses upload file. Dengan konsep yang
sederhana ini, kami berharap pembaca dapat memahami bagaimana prinsip dasar dari proses
upload beberapa file tersebut, karena yang kita gunakan dalam contoh berikut adalah fungsi
-fungsi utamanya, yaitu belum di customisasi dengan aturan - aturan yang terkadang
membuat seorang pemula menjadi illfeel melihat kodenya
Adapun langkah - langkah yang harus dilakukan dalam hal ini adalah sebagai berikut :
1. Membuat form upload
Dalam contoh kali ini form kami buat dengan perulangan FOR supaya kode yang kita buat
terlihat lebih sederhana
1
2
3
4
5
6
7
8
9
include('do_upload.php');
<form method="post" enctype="multipart/form-data" action="">
<?php
for($i=1; $i<5; $i++){
?>
<input type="file" name="myfile[]"/><br/>
<?php } ?>
<input type="submit" name="upload" value="Upload"/>
</form>
Pada contoh diatas, form dapat kita simpan dengan nama upload.php
2. Membuat file do_upload.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
if(isset($_POST['upload'])){
foreach($_FILES['myfile']['name'] as $key => $val){
$name = $_FILES['myfile']['name'][$key];
$tmp = $_FILES['myfile']['tmp_name'][$key];
if(trim($name)!=''){
$new_name = date('YmdHis').$name; //rename file
if(move_uploaded_file($tmp,'upload/'.$new_name)){ //proses upload
echo 'Berhasil mengupload file '.$name.' ke Folder upload<br/>'; //p
berhasil
}
}
}
}
?>

2. Script diatas akan dipanggil oleh script upload.php yaitu dengan fungsi
include('do_upload.php'), sehingga ketika tombol upload ditekan, file akan diproses untuk
dikirimkan ke folder tujuan.
Kemana folder tujuan uploadnya ? Dalam contoh script diatas, nama folder tujuannya adalah
upload, maka kita harus membuat folder dengan nama upload yang bersebelahan dengan
script upload dan script do_upload.
Cobalah jalankan script upload dengan cara mengakses alamat :
1 http://localhost/nama_folder/upload.php
Supaya script tidak terpisah - pisah, kita juga bisa menyatukan script uplad dan do_upload
menjadi 1 file seperti pada contoh berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
if(isset($_POST['upload'])){
foreach($_FILES['myfile']['name'] as $key => $val){
$name = $_FILES['myfile']['name'][$key];
$tmp = $_FILES['myfile']['tmp_name'][$key];
if(trim($name)!=''){
$new_name = date('YmdHis').$name;
if(move_uploaded_file($tmp,'upload/'.$new_name)){
echo 'Berhasil mengupload file '.$name.' ke Folder upload<br/>';
}
}
}
}
?>
<form method="post" enctype="multipart/form-data" action="">
<?php
for($i=1; $i<5; $i++){
?>
<input type="file" name="myfile[]"/><br/>
<?php } ?>
<input type="submit" name="upload" value="Upload"/>
</form>
Simpan script diatas dengan extensi .php, kemudian coba jalankan dengan mengakses alamat
1 http://localhost/nama_folder/nama_script.php
Jika muncul pesan eror saat script dijalankan, periksa kembali apakah anda sudah membuat
folder dengan nama upload yang lokasinya bersebelahan dengan script diatas. Selamat
mencoba tutorial kami, semoga tulisan singkat ini dapat bermanfaat untuk kita semua

3. kedua
Akhirnya saya pulang kampung juga kemarin sore, lantaran udah kangen banget sama keluarga dan
hmm,,,’pacar’. Memang sih sebenarnya sampai bulan depan, perkuliahan belum dimulai. Tapi gara-gara
proyek yang kliennya sering ngajakin ketemuan mendadak, membuat saya harus tetap standby di pulau
seberang. Berhubung sang pacar berulang tahun hari ini, saya memilih untuk pulang ke Bali. Kan gak lucu
pas pacar lagi ulang tahun, tapi kita malah gak hadir di hari spesialnya. Dan tadi siang, saya mengajak si
doi kencan kilat di siang hari. “Kenapa siang hari..???”. Kalau siang pasti akan meminimalisir perbuatan-
perbuatan yang tidak diinginkan, sepertigrayang-grayang gak jelas pas lagi berduaan di tempat sepi :D. Pas
ngajak doi makan ke sebuah restoran di Denpasar, secara tidak sengaja saya melihat aplikasi pembayaran
yang digunakan oleh kasirnya. Aplikasi pembayarannya berbasis web, dan yang membuat menarik adalah
metode inputnya yang dinamis. Field-field inputnya bersifat dinamis, dalam artian jumlahnya tidak
terbatas. Dimana data yang diinputkan ke dalam database, bisa lebih dari satu data. Hmm, rasanya patut
dicoba cara pembuatannya setelah sampai di rumah nanti. Setelah mengantar pacar pulang, saya pun
bergegas pulang juga. Sudah gak sabar untuk membuat metode input seperti yang saya lihat di restoran
tadi.
Setelah mencari refrensi di web jQuery.com, akhirnya saya menemukan caranya. Yaitu dengan
menggunakan fungsi .append() yang sudah disediakan oleh jQuery. Silahkan baca dokumentasi
selengkapnya di http://api.jquery.com/append/. Setelah membaca dokumentasinya, kira-kira script yang
berhasil saya buat kira-kira seperti di bawah ini :
1 $(document).ready(function() {
2 var nomor = 0;
3 $(".tambah").click(function(){
4 nomor ++;
5 $('#konten').append(
6 '<tr class="baris">'
7 + '<input name="nomor[]" value="'+ nomor +'"
type="hidden"></td>'
8 + '<td><input name="kode_barang_'+ nomor +'"
type="text"></td>'
9 + '<td><input name="nama_barang_'+ nomor +'"
type="text"></td>'
10 + '<td><input name="harga_barang_'+ nomor +'"
type="text"></td>'
11 + '<td><input type="button" id="hapus"
value="Hapus"></tr>'
12 );
13 });
14 });
Saya tambahkan sebuah textbox nomor, yang berfungsi untuk menjumlahkan berapa baris yang dikirimkan,
nama textbox ini saya buat array, sehingga penamaannya menjadinomor[]. Sehingga akan lebih mudah
menentukan berapa kali perulangan yang akan dilakukan ketika menyimpannya ke dalam database. Untuk
tombol tambah data, saya tempatkan pada sebuah link yang saya beri class dengan nama tambah. Dengan
fungsi $(‘#konten’).append(), saya menambahkan beberapa field ke dalam tbody dengan idkonten.
Jika field yang disiapkan terlalu banyak, maka perlu ditambahkan tombol untuk menghapus. Nah, disini
saya fungsi hapusnya, yaitu $(this).parents(“.baris”).remove();. Script selengkapnya kira seperti di bawah
ini :

4. 1 $(document).ready(function() {
2 var nomor = 0;
3 $(".tambah").click(function(){
4 nomor ++;
5 $('#konten').append(
6 '<tr class="baris">'
7 + '<input name="nomor[]" value="'+ nomor +'"
type="hidden"></td>'
8 + '<td><input name="kode_barang_'+ nomor +'"
type="text"></td>'
9 + '<td><input name="nama_barang_'+ nomor +'"
type="text"></td>'
10 + '<td><input name="harga_barang_'+ nomor +'"
type="text"></td>'
11 + '<td><input type="button" id="hapus"
value="Hapus"></tr>'
12 );
13 });
14 $("#hapus").live('click', function () {
15 $(this).parents(".baris").remove();
16 });
17 });
Dan yang terakhir, script php untuk menyimpannya ke dalam database. Buat sebuah file baru dengan
namasimpan.php, disini saya menggunakan foreach sebagai perulangannya, kira-kira script php untuk
menyimpannya ke dalam database seperti di bawah ini :
1 <?php
2 foreach ($_POST['nomor'] as $i)
3 {
4 /*query insert ke database taruh disini
5 mysql_query = "insert into tbl_barang (kd_brng,nm_brng,hrga)
6
values('$_POST['kode_barang_'.$i]','$_POST['nama_barang_'.
$i]','$_POST['harga_barang_'.$i]')";
7 */
8 echo '<tr>
9 <td>'.$_POST['kode_barang_'.$i].'</td>
10 <td>'.$_POST['nama_barang_'.$i].'</td>
11 <td>'.$_POST['harga_barang_'.$i].'</td>
12 </tr>';
13 }
14 ?>
Saya berikan perintah perulangan, agar mudah untuk menentukan berapa kali proses penyimpanan
dilakukan ke database sesuai dengan jumlah data yang dikirimkan dari form. Bagaimana, mudah kan???
Bagi yang belum jelas, di bawah postingan ini sudah saya sediakan link untuk mendownload source kode
lengkapnya dan sebuah file demo hasil akhirnya.
Happy Blogging and Keep Coding

5. udulnya mbois browww….
KETIGA
Begini ceritanya.pernah suatu ketika saya dikasih tugas di tempat kerja saya yang dulu,
untuk membuat aplikasi web. Nah pada aplikasi tersebut terdapat fungsi memasukkan data
tetapi secara dinamis (ga satu persatu). Yang dimaksudkan dinamis adalah, kita bisa
menambahkan baris dengan sebuah tombol, jadi setiap tombol tersebut di klik, maka akan
muncul 1 baris baru di bawahnya untuk menampilkan field inputan. Kalo masih belum
mudeng, bisa di lihat di halaman DEMO.
Nah dulu sih, ada contohnya, buatnya pake DOM Javascript, karena fieldnya banyak, maka
scriptnya jadi spagetti alias amburadul.. Susah dipelajari, mana yang child, mana yang
parent. Ternyata eh ternyata, setelah belajar pake jquery, jquery memiliki
fungsi .append()yang bisa digunakan untuk ini.
Dalam demo ini contohnya saya akan menginputkan data mahasiswa dengan field nim,
nama depan, nama belakang. Untuk databasenya bisa dibuat sendiri lah (sesuaikan dengan
milik Anda). Pada form inputnya dibuat script input seperti biasa, tetapi saya menggunakan
tabel agar tampilannya bisa lebih rapi. Kemudian jangan lupa panggil jquerynya ya.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script> <!-- ini disesuaikan -
<script type="text/javascript" src="jquery_append.js"></script> <!-- yang ini j
</head>
<body>
<form id="id_form" action="jquery_dom_save.php" method="post">
<table>
<tr>
<td><input type="button" name="add_btn" value="Add" id="add_btn"></td><t
</tr>
<tr>
<td>No</td><td>NIM</td><td>Nama Depan</td><td>Nama Belakang</td><t
</tr>
<tbody id="container">

6. 17
18
19
20
21
22
23
24
25
26
27
28
<!-- nanti rows nya muncul di sini -->
</tbody>
<tr>
<td><input type="submit" name=submit value="Save"></td><td>&nbsp;</td><t
</tr>
</table>
</form>
</body>
</html>
Kemudian saya memisahkan file javascriptnya, yang digunakan untuk membuat elemen
baru,saya namakan jquery_append.js yang scriptnya sebagai berikut :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
var count = 0;
$("#add_btn").click(function(){
count += 1;
$('#container').append(
'<tr class="records">'
+ '<td ><div id="'+count+'">' + count + '</div></td>'
+ '<td><input id="nim_' + count + '" name="nim_' + count +
+ '<td><input id="nama_depan_' + count + '" name="nama_dep
+ '<td><input id="nama_belakang_' + count + '" name="nama_
+ '<td><a class="remove_item" href="#" >Delete</a>'
+ '<input id="rows_' + count + '" name="rows[]" value="'+
);
});
$(".remove_item").live('click', function (ev) {
if (ev.type == 'click') {
$(this).parents(".records").fadeOut();
$(this).parents(".records").remove();
}
});
});
Script di atas adalah script javascript yang menggunakan jquery append() untuk membuat
elemen. Dan nama elemennya saya buat nama_elemen_ agar nanti setiap penambahana
elemen akan ditambahkan prefik dari variabel count yang isinya adalah nomor / angka
berurutan. Sehinga pada baris pertama, nama inputnya akan menjadi nim_1,
nama_depan_1, nama_belakang_1, kemudian pada baris selanjutnya nim_2,
nama_depan_2, nama_belakang_2 dan seterusnya.

7. Baris
1 <input id="rows_' + count + '" name="rows[]" value="'+ count +'" type="text"></td></t
digunakan untuk nantinya menghitung berapa row yang sudah dibuat, digunakan ketika
perulangan insert data ke dalam tabel.
Saya juga menambahkan link untuk menhapus row jika sekiranya di perlukan. Menggunakan
jquery live() karena row yang ditambahkan dibuat menggunakan javascript, sehingga harus
menggunakan jquery.live() silahkan baca dokumentasi jquery .live() di sini
Akhirnya script untuk input datanya adalah sebagai berikut:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
if(isset($_POST['submit'])){
$connection = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("latihan") or die(mysql_error());
foreach ($_POST['rows'] as $key => $count ){
$nim = $_POST['nim_'.$count];
$nama_depan = $_POST['nama_depan_'.$count];
$nama_belakang = $_POST['nama_belakang_'.$count];
$query_2 = "INSERT INTO kelas_mahasiswa (nim,nama_depan,nama_belaka
mysql_query($query_2) or die(mysql_error());
}
echo "Data Berhasil disimpan <br>";
echo "<a href="jquery_dom.php">Kembali</a>";
mysql_close($connection);
}else{
header('Location: jquery_dom.php');
}
?>
Menggunakan perulangan foreach dengan menghitung $_POST[‘rows’]. Jangan lupa untuk
setiap perulangan ditambahkan $count untuk mengambil nilai dari form input yang kita
namai setiap field nya dengan name_1, 2 3 dst tadi.
Ada pertanyaan? Silahkan berkomentar, jika ada kesalahan mohon diperbaiki ya,,,

8. Posted in Jquery, PHP, Programming
Tagged DOM, Jquery, MySql, php
Empat
Membuat form Input atau edit dengan multiform (banyak data)
Dalam sebuah kasus kita ingin menambah record atau meng edit record dengan sekaligus
beberapa data. Prosesnya adalah, kita mengisi beberapa form dengan data yg berbeda dan
dengan satu kali klik kita dapat menyimpan 2 data atau lebih. Berikut kode yang saya
gunakan :
Untuk Input data :
Buat file : form.php
Jumlah Form : <input type="text" id="form" size="2" onchange="document.location='?
form='+(this).value;" /><br /><br /> <!-- Untuk menentukan jumlah form (Isi Lalu klik
Enter dalam Penggunaan) -->
<form name="add" action="proses.php?form=<? echo $_GET['form'];?>" method="post">
<?php
$form = $_GET['form'];
for ($i=1;$i<=$form;$i++){?>
Nama : <input type="text" name="nama<? echo $i;?>" /><br />
Umur : <input type="text" name="umu<? echo $i;?>r" /><br />
<hr width="300" align="left" /><br />
<? } ?>
<input type="submit" value="Tambah" />
</form>
Setelah itu buat file : proses.php
<?php
$form = $_GET['form'];

9. for($i=1;$i<=$form;$i++){
$nama = $_POST['nama'.$i];
$umur = $_POST['umur'.$i];
mysql_connect("$dbhost","$dbuser","$dbpass");
mysql_query("INSERT INTO `anggota` ('$nama', '$umur')");
}
?>
Sekian Tutorial untuk membuat multiform. Contoh diatas hanyalah konsep dasar untuk Anda
kembangan lebih lanjut sesuai dengan kebutuhan Anda.
Maaf bila kurang jelas, saya tidak ahli dalam membuat tutorial. Semoga membantu.
Home » Codeigniter » Framework » PHP » Tips & Trik » Cara Membuat Multi Insert Dengan Php Codeigniter
lima
Cara Membuat Multi Insert Dengan Php Codeigniter
10:05:00 AM
Cahya Dyazin
3
Hmm sudah lama juga saya tidak pernah posting, akhirnya sekarang saya bisa posing lagi. untuk
kali ini saya akan membahas cara menyimpan data lebih dari satu atau yang biasa disebut multi
insert.
Untuk pembuatan multi insert kali ini saya akan menggunakan PHP CODEIGNITER sebagai bahasa
dan framework yang saya pilih. Berikut adalah detail spesifikasi alat-alat dan code yang saya
gunakan :

10. • PHP 5.4.4
• Codeigniter 2.1.4
• Xampp 1.8.0
Tanpa banyak basa-basi mari kita langsung ke praktiknya.
Langkah pertama anda buat terlebih dahulu controllernya. anda bisa langsung copy paste sintak di
bawah ini. simpan pada folder controller dengan nama multi_insert.php
<?php
class Multi_Insert extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->library('form_validation'); // digunakan untuk proses
validasi yg di input
$this->load->database(); // Load our cart model for our entire class
$this->load->helper(array('url','form')); // Load our cart model for
our entire class
}
function index() {
$this->load->view('form_insert'); // Display the page
}
function insert_keDB() {

11. $this->form_validation->set_rules('nama[]', 'nama', 'required|trim|
xss_clean');
$this->form_validation->set_rules('umur[]', 'umur', 'required|trim|
xss_clean');
$this->form_validation->set_rules('asal[]', 'asal', 'required|trim|
xss_clean');
if ($this->form_validation->run() == FALSE){
echo validation_errors(); // tampilkan apabila ada error
}else{
$nm = $this->input->post('nama');
$result = array();
foreach($nm AS $key => $val){
$result[] = array(
"nama" => $_POST['nama'][$key],
"umur" => $_POST['umur'][$key],
"asal" => $_POST['asal'][$key]
);
}
$test= $this->db->insert_batch('list_name', $result); // fungsi
dari codeigniter untuk menyimpan multi array
if($test){
echo "nama sukses di input";
redirect('multi_insert'); }else{
echo "gagal di input";
}
}
}
}

12. /* End of file multi_insert.php */
/* Location: ./application/controllers/multi_insert.php */
?>
Setelah controller d buat, selanjutnya anda tinggal membuat formnya. anda bisa copy paste sintak
di bawah ini. simpan pada folder views dengan nama form_insert.php
<form method="POST" action="<?php echo
site_url('multi_insert/insert_keDB');?>">
<input type="text" name="nama[]">
<input type="text" name="umur[]">
<input type="text" name="asal[]">
<input type="text" name="nama[]">
<input type="text" name="umur[]">
<input type="text" name="asal[]">
<input type="text" name="nama[]">
<input type="text" name="umur[]">
<input type="text" name="asal[]">
<button type="submit" name="submit">Simpan</button>
</form>
Selesai.
Sekaian artikel dari saya, jika ada yang di tanyakan anda bisa menanyakannya melalui form
komentar yang sudah tersedia di bawah.
Cara Install Codeigniter

13. Tutorial Codeigniter
Pada bagian ini saya akan menjelaskan bagaimana cara install Framework Codeinginer pada komputer
lokal Anda. Tutorial ini ditujukan bagi mereka yang baru mengenal yang namanya Codeigniter (sangat
pemula) dan ini merupakan bagian teknis atau langsung praktek. Bagi yang ingin mengenal secara teori apa
itu Codeigniter, dapat dibaca pada artikel saya sebelumnya tentang Framework Codeigniter disini. Selain
menginstall Codeigniter, saya akan berikan sedikit cara kerja Framework ini berdasarkan pengalaman
pribadi saya menggunakan Framework ini. Mari kita mulai dengan mempersiapkan beberapa kebutuhan
untuk dapat mempraktekan tutorial ini.
Beberapa hal yang harus disiapkan dalam praktek tutorial ini antara lain:
1. Program PHP sebagai bahasa pemrograman, karena Codeigniter ditulis menggunakan bahasa
pemrograman PHP.
2. Web Server, dalam hal ini saya menggunakan Apache sebagai web servernya.
3. Database, dalam hal ini MySQL (optional, karena kita belum memanfaatkan database dalam
praktek ini)
4. IDE (Editor), dalam hal ini saya menggunakan Dreamweaver.
5. Codeigniter, sebagai Framework yang dapat didownload di halaman ini, saya menggunakan versi
2.1.3 pada saat membuat tutorial ini.
6. Untuk program PHP-MySQL-Apache, sudah banyak package yang tinggal install, artinya dengan
satu kali install, dikomputer kita sudah terinstall tiga aplikasi tersebut (PHP-MySQL-Apache).
Misalnya WampServer, Xampp, dll
7. Jangan lupa sediakan segela susu agar otak lebih encer :)
Mari kita mulai langkah demi langkah untuk menginstall Framework Codeigniter ini. Oh iya saya
menggunakn Sistem Operasi Windows 7 dan menggunakan Wamp 2.0 untuk membuat tutorial ini.
1. Download program Codeigniter seperti pada nomor 5 diatas. Nanti anda akan menemukan bentuk
zip dengan ukuran file 2,2 MB.
2. Unzip program Codeigniter (orang menyebutnya CI) dan simpan ke folder root server kita (ke
folder ‘www’ kalau di wamp atau ‘htdocs’ atau ‘public_html’ tergantung package PHP nya),
kemudian rename (ubah) nama foldernya dari “CodeIgniter_2.1.3″ menjadi “codeigniter”, seperti
pada gambar dibawah ini:
Tutorial CI – Menyimpan di Root Server
Dalam folder CI, terdiri dari 3 folder, “application” ini folder untuk developer yang nanti kita akan
obrak abrik, “system” berisi library atau kumpulan fungsi-fungsi dasar CI, dan “user_guide” berisi
tuntunan semacam help-nya.
3. Kalau sudah dicopy, tinggal akses “localhost/codeigniter” dan kalau berhasil maka akan muncul
halaman selamat datang. Ini merupakan kesksesan Anda, jika belum silahkan coba ulangi langkah-
langkahnya.

14. Tampilan Sukses Install CI
4. Untuk mengubah pesan diatas, kita bisa masuk ke folder
codeigniter/application/views/welcome_message.php disitu Anda bisa mengubahnya secara bebas
dengan kata-kata sendiri, silahkan dicoba dan wajib dicoba.
5. Selanjutnya kita akan menjelaskan cara kerjanya.
Pertama tentu akan membaca index.php di bawah folder codeigniter, kemudian index.php tersebut akan
membaca file yang ada di config, seperti application/config/autoload.php yang akan me-load fungsi-fungsi
sesuai konfigurasi (kalau install pertama, file ini tidak me-load file atau masih kosong).
Selanjutnya akan membaca file application/coonfig/route.php yang akan memetakan kemana file
selanjutnya dibaca (menunjuk controller apa yang akan dibaca pertama), pertama install controller yang
pertama kali dibaca adalah application/controller/welcome.php dan dari controller tersebut akan dilempar
ke view di application/views/wecome_message.php.
Ingat konsep MVC pada Codeigniter, dalam hal ini M (model) belum ada, sedangkan V (views) adalah
“application/views/wecome_message.php” dan C (controller) application/controller/welcome.php
Konsep MVC