multiple upload dengan jumlah dinamis menggunakan...

Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam Framework CodeIgniterCopyright Abdul Akbar Aziz [email protected]://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-javascript-dalam-framework-codeigniter/

Multiple Upload dengan Jumlah DinamisMenggunakan Javascript dalam FrameworkCodeIgniter

Biasanya jika kita membuat sebuah form inputan dalam php, inputan-inputan itujumlahnya statis artinya tidak bisa ditambah. Lalu bagaimana jika kita ingin inputan itu bisa ditambah sesuai keinginan? Baik ituberupa inputan text, combobox, atau upload file.

Pada prinsipnya tipe inputan itu sama saja prosesnya (menurut aku yg masihnewbie neh :D). Nah, disini saya akan mencoba membuat program dimana kita bisainput file gambar dengan jumlah yang dinamis beserta keterangannya. bisa ditambah atau dikurang sesuai keinginan.

Ok, kita langsung saja buat programnya. Mungkin bagi yang sudah jago coding sih, codingan dibawah ini ribet gak karuankali ya? :D

Pertama kita buat tabel dulu di database. kita berikan nama database "websitekita"dan tabel "gallery" dengan field : 1. id (autoincrement) 2. foto (varchar 100) 3. keterangan (text)

Lalu kita buat file view-nya dulu deh, biar nanti tidak tanya-tanya untuk apa sihbuat variable ini dan itu. Misal kita buat file view yang bernama "gallery_view.php"(saya langsung tulis isi page-nya ya, untuk templatenya silahkan buat sendiri)dalam codingnya :

page 1 / 16


===================================================================================== <script language="JavaScript" type="text/JavaScript"> // variable ini untuk memberi tahu kepada si "controller", jumlah foto yg diupload jml = 2; // jumlah awal mula inputan belum ditambah counter = 0;

// fungsi ketika akan tambah inputan function action() { counterNext = counter + 1;

// nantinya div "addfoto" akan terisi code html dibawah ini jika klik "tambah foto"(saya gk pke "enter" disini, soalnya dulu pernah ngaruh sama scriptnya :D) document.getElementById("addfoto"+counter).innerHTML = "<br /><inputtype='file' name='foto_" + jml + "' size='30' /><br /><input type='text'name='keterangan_" + jml + "' size='30' /> <div id="addfoto" + counterNext +""></div>";

counter++;

// nanti dalam form ada input hidden yang menyimpan jumlah foto yg akan diupload document.form.jml_foto.value = jml;

jml++; }

// fungsi ketika akan mengurangi inputan function remove() { no=counter-1; // isi div "addfoto" akan dihapus sesuai urutannya ("addfoto0", "addfoto1", dll)

page 2 / 16

document.getElementById("addfoto"+no).innerHTML = " ";

counter--; jml--;

bnyk = jml - 1; document.form.jml_foto.value = bnyk; } </script>

<?php // ambil flashdata bernama 'message' $message = $this->session->flashdata('message'); echo !empty($message) ? "<font color='red'>".$message."</font><br /><br />" :""; ?>

 <form name='form' method='post' action='<?PHP echo $form_action; ?>'enctype="multipart/form-data"> <input type='hidden' name='jml_foto' value='1' /> <table cellspacing='3'> <tr> <th align='left' valign='top'>Foto</th> <td>  <input type='file' name='foto_1' size='30' /><br />  <input type='text' name='keterangan_1' maxlength='50' size='30' />  <a href="javascript:action();">Tambah Foto</a>  <a href="javascript:remove();">Kurangi Foto</a><br />  <div id="addfoto0"> </div> </td> </tr>

page 3 / 16


<tr> <td></td> <td align='left'> <input type='submit' class='button' value='Simpan' name='Simpan' /> </td> </tr> </table> </form> <br />

=====================================================================================

Nah, setelah ini kita buat file controller dengan nama "gallery.php", dengan coding :

===================================================================================== <?php

class Gallery extends Controller {

function Gallery() { parent::Controller();

// memanggil class gallery_model di folder model (akan kita buat setelah ini) $this->load->model("gallery_model","",true); }

function index() { $data['form_action']=site_url('gallery/tambah'); // value attribut action padaform tambah di file 'gallery_view.php'

page 4 / 16


// memanggil file gallery_view.php (di folder view) dengan mengirimvariable-variable yang berada dalam array $data $this->load->view('gallery_view', $data);

}

// fungsi tambah foto gallery function tambah() { // menyimpan nilai foto_1 dan jml foto inputan user $ada_foto = $this->input->post('foto_1'); $jml_foto = $this->input->post('jml_foto');

if((isset($jml_foto) && $jml_foto > 0) && isset($ada_foto)) // jika ada foto yang diupload { // inisial terlebih dahulu klo upload gagal dengan memberi nilai false pada variable$cek_upload $cek_upload = false;

// lakukan looping sebanyak foto diupload (disini saya mau upload semua foto dulu,baru insert data ke database) for($i=1;$i<=$jml_foto;$i++) { // setting file yg akan diupload $config['upload_path'] = 'gallery/'; // path folder foto akan disimpan (buatsaja setara dgn folder "system" CI $config['allowed_types'] = 'gif|jpg|png|jpeg'; // bisa diubah sesuai kebutuhan $config['max_size'] = '2000'; // maksimal size file $this->load->library('upload',$config); // panggil library 'upload' di CI $this->upload->initialize($config); // ======================

if(!$this->upload->do_upload('foto_'.$i)) // jika gagal upload (tidak sesuaiconfiguration) {

page 5 / 16


$cek_upload = false;

break; // keluar looping } else // jika berhasil upload { $data = array('upload_data'=>$this->upload->data()); // saya simpan nama2 filenya ke $nama[] menggunakan array untuk penyimpananke database nantinya $nama[$i] = $data['upload_data']['file_name'];

$cek_upload = true; } }

if($cek_upload == true) // jika semua upload berhasil { // lakukan sebanyak jumlah foto : for($i=1;$i<=$jml_foto;$i++) { // memasukkan nama file tadi (nama[]) $rec = array( 'foto' => $nama[$i], 'keterangan' => $this->input->post('keterangan_'.$i) );

// fungsi tambah data dengan memanggil fungsi tambah_data($rec) di fileym_model.php (di folder model) // dengan mengirim inputan di $rec $this->product_model->tambah_foto($rec); //======================================================== }

// menyimpan pesan pada flashdata dengan nama 'message' yang berisi 'Foto BaruTersimpan' untuk ditampilkan di view

page 6 / 16


$this->session->set_flashdata('message','Foto Baru Tersimpan'); // kembali menuju form redirect('gallery'); } else // jika ada yang gagal, maka semua foto sebelumnya yg berhasil diupload akandihapus { for($j=1;$j<=$jml_foto;$j++) { if(file_exists('public/foto produk/'.$nama[$j])) // cek apakah ada file sebelumnya { unlink('public/foto produk/'.$nama[$j]); // jika ada maka dihapus filenya } }

$this->session->set_flashdata('message', '<font color="red">Upload FotoGagal</font><br />'); redirect('gallery'); } } else { $this->session->set_flashdata('message','Data Tidak Tersimpan'); redirect('gallery'); } } ?>

=====================================================================================

terakhir kita buat modelnya dengan nama gallery_model.php

=====================================================================================

<?php

page 7 / 16

class Gallery_model extends Model { function Gallery_model() { parent::Model(); }

// inisial table = 'gallery' sebagai nama table di database yang akan digunakan diclass ini var $table='gallery';

// fungsi untuk menambah data foto dengan inputan dari controller gallery.php function tambah_foto($rec) { $this->db->insert("foto", $rec); } }

?>

=====================================================================================

Nah...beres deh. Semoga tulisan ini bermanfaat. Terima kasih...

catatan : karena penulisan coding di blog jadi aneh, harus dirubah tuh tanda kutipjuga code yg ini : counter - -; kalau dicopy malah jadi counter-; juga untuk commenthtml yg "" jd tidak berjalan (mungkin tergantung editornya kali ya :D)

Biasanya jika kita membuat sebuah form inputan dalam php, inputan-inputan itujumlahnya statis artinya tidak bisa ditambah. Lalu bagaimana jika kita ingin inputan itu bisa ditambah sesuai keinginan? Baik ituberupa inputan text, combobox, atau upload file.

page 8 / 16


Pada prinsipnya tipe inputan itu sama saja prosesnya (menurut aku yg masihnewbie neh :D). Nah, disini saya akan mencoba membuat program dimana kita bisa input file gambar dengan jumlah yang dinamisbeserta keterangannya. bisa ditambah atau dikurang sesuai keinginan.

Ok, kita langsung saja buat programnya. Mungkin bagi yang sudah jago coding sih, codingan dibawah ini ribet gak karuankali ya? :D

Pertama kita buat tabel dulu di database. kita berikan nama database "websitekita"dan tabel "gallery" dengan field : 1. id (autoincrement) 2. foto (varchar 100) 3. keterangan (text)

Lalu kita buat file view-nya dulu deh, biar nanti tidak tanya-tanya untuk apa sihbuat variable ini dan itu. Misal kita buat file view yang bernama "gallery_view.php" (saya langsung tulis isipage-nya ya, untuk templatenya silahkan buat sendiri) dalam codingnya :

===================================================================================== <script language="JavaScript" type="text/JavaScript"> // variable ini untuk memberi tahu kepada si "controller", jumlah foto yg diupload jml = 2; // jumlah awal mula inputan belum ditambah counter = 0;

// fungsi ketika akan tambah inputan function action() { counterNext = counter + 1; // nantinya div "addfoto" akan terisi code html dibawah ini jika klik "tambah foto"(saya gk pke "enter" disini, soalnya dulu pernah ngaruh sama scriptnya :D)

page 9 / 16


document.getElementById("addfoto"+counter).innerHTML = "<br /><inputtype='file' name='foto_" + jml + "' size='30' /><br /><input type='text'name='keterangan_" + jml + "' size='30' /> <div id="addfoto" + counterNext +""></div>";

counter++;

// nanti dalam form ada input hidden yang menyimpan jumlah foto yg akan diupload document.form.jml_foto.value = jml;

jml++; }

// fungsi ketika akan mengurangi inputan function remove() { no=counter-1; // isi div "addfoto" akan dihapus sesuai urutannya ("addfoto0", "addfoto1", dll) document.getElementById("addfoto"+no).innerHTML = " ";

counter--; jml--;

bnyk = jml - 1; document.form.jml_foto.value = bnyk; } </script>

<?php // ambil flashdata bernama 'message' $message = $this->session->flashdata('message');

page 10 / 16

echo !empty($message) ? "<font color='red'>".$message."</font><br /><br />" :""; ?>

 <form name='form' method='post' action='<?PHP echo $form_action; ?>'enctype="multipart/form-data"> <input type='hidden' name='jml_foto' value='1' /> <table cellspacing='3'> <tr> <th align='left' valign='top'>Foto</th> <td>  <input type='file' name='foto_1' size='30' /><br />  <input type='text' name='keterangan_1' maxlength='50' size='30' />  <a href="javascript:action();">Tambah Foto</a>  <a href="javascript:remove();">Kurangi Foto</a><br />  <div id="addfoto0"> </div> </td> </tr> <tr> <td></td> <td align='left'> <input type='submit' class='button' value='Simpan' name='Simpan' /> </td> </tr> </table> </form> <br />

=====================================================================================

Nah, setelah ini kita buat file controller dengan nama "gallery.php", dengan coding :

page 11 / 16


=====================================================================================

<?php

class Gallery extends Controller {

function Gallery() { parent::Controller();

// memanggil class gallery_model di folder model (akan kita buat setelah ini) $this->load->model("gallery_model","",true); }

function index() { $data['form_action']=site_url('gallery/tambah'); // value attribut action padaform tambah di file 'gallery_view.php'

// memanggil file gallery_view.php (di folder view) dengan mengirimvariable-variable yang berada dalam array $data $this->load->view('gallery_view', $data);

}

// fungsi tambah foto gallery function tambah() {

page 12 / 16


// menyimpan nilai foto_1 dan jml foto inputan user $ada_foto = $this->input->post('foto_1'); $jml_foto = $this->input->post('jml_foto');

if((isset($jml_foto) && $jml_foto > 0) && isset($ada_foto)) // jika ada foto yang diupload { // inisial terlebih dahulu klo upload gagal dengan memberi nilai false pada variable$cek_upload $cek_upload = false;

// lakukan looping sebanyak foto diupload (disini saya mau upload semua foto dulu,baru insert data ke database) for($i=1;$i<=$jml_foto;$i++) { // setting file yg akan diupload $config['upload_path'] = 'gallery/'; // path folder foto akan disimpan (buatsaja setara dgn folder "system" CI $config['allowed_types'] = 'gif|jpg|png|jpeg'; // bisa diubah sesuai kebutuhan $config['max_size'] = '2000'; // maksimal size file $this->load->library('upload',$config); // panggil library 'upload' di CI $this->upload->initialize($config); // ======================

if(!$this->upload->do_upload('foto_'.$i)) // jika gagal upload (tidak sesuaiconfiguration) { $cek_upload = false;

break; // keluar looping } else // jika berhasil upload { $data = array('upload_data'=>$this->upload->data()); // saya simpan nama2 filenya ke $nama[] menggunakan array untuk penyimpananke database nantinya $nama[$i] = $data['upload_data']['file_name'];

page 13 / 16


$cek_upload = true; } }

if($cek_upload == true) // jika semua upload berhasil { // lakukan sebanyak jumlah foto : for($i=1;$i<=$jml_foto;$i++) { // memasukkan nama file tadi (nama[]) $rec = array( 'foto' => $nama[$i], 'keterangan' => $this->input->post('keterangan_'.$i) );

// fungsi tambah data dengan memanggil fungsi tambah_data($rec) di fileym_model.php (di folder model) // dengan mengirim inputan di $rec $this->product_model->tambah_foto($rec); //======================================================== }

// menyimpan pesan pada flashdata dengan nama 'message' yang berisi 'Foto BaruTersimpan' untuk ditampilkan di view $this->session->set_flashdata('message','Foto Baru Tersimpan'); // kembali menuju form redirect('gallery'); } else // jika ada yang gagal, maka semua foto sebelumnya yg berhasil diupload akandihapus { for($j=1;$j<=$jml_foto;$j++) { if(file_exists('public/foto produk/'.$nama[$j])) // cek apakah ada file sebelumnya { unlink('public/foto produk/'.$nama[$j]); // jika ada maka dihapus filenya } }

page 14 / 16


$this->session->set_flashdata('message', '<font color="red">Upload FotoGagal</font><br />'); redirect('gallery'); } } else { $this->session->set_flashdata('message','Data Tidak Tersimpan'); redirect('gallery'); } }

=====================================================================================

terakhir kita buat modelnya dengan nama gallery_model.php

=====================================================================================

class Gallery_model extends Model { function Gallery_model() { parent::Model(); }

// inisial table = 'gallery' sebagai nama table di database yang akan digunakan diclass ini var $table='gallery';

// fungsi untuk menambah data foto dengan inputan dari controller gallery.php function tambah_foto($rec) {

page 15 / 16


$this->db->insert("foto", $rec); } }

=====================================================================================

Nah...beres deh. Semoga tulisan ini bermanfaat. Terima kasih...

page 16 / 16

multiple upload dengan jumlah dinamis menggunakan...

Documents