Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam Framework CodeIgniter

Transkripsi

1 v Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam Framework CodeIgniter Biasanya jika kita membuat sebuah form inputan dalam php, inputan-inputan itu jumlahnya statis artinya tidak bisa ditambah. Lalu bagaimana jika kita ingin inputan itu bisa ditambah sesuai keinginan? Baik itu berupa inputan text, combobox, atau upload file. Pada prinsipnya tipe inputan itu sama saja prosesnya (menurut aku yg masih newbie neh :D). Nah, disini saya akan mencoba membuat program dimana kita bisa input 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 karuan kali 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 sih buat 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

2 <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 /><input type='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 di upload 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

3 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

4 <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'); form tambah di file 'gallery_view.php' // value attribut action pada page 4 / 16

5 // memanggil file gallery_view.php (di folder view) dengan mengirim variable-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 di upload // 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 (buat saja 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 sesuai configuration) page 5 / 16

6 $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 penyimpanan ke 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 file ym_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 Baru Tersimpan' untuk ditampilkan di view page 6 / 16

7 $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 akan dihapus 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 Foto Gagal</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

8 class Gallery_model extends Model function Gallery_model() parent::model(); // inisial table = 'gallery' sebagai nama table di database yang akan digunakan di class 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 kutip juga code yg ini : counter - -; kalau dicopy malah jadi counter-; juga untuk comment html yg "" jd tidak berjalan (mungkin tergantung editornya kali ya :D) Biasanya jika kita membuat sebuah form inputan dalam php, inputan-inputan itu jumlahnya statis artinya tidak bisa ditambah. Lalu bagaimana jika kita ingin inputan itu bisa ditambah sesuai keinginan? Baik itu berupa inputan text, combobox, atau upload file. page 8 / 16

9 Pada prinsipnya tipe inputan itu sama saja prosesnya (menurut aku yg masih newbie neh :D). Nah, disini saya akan mencoba membuat program dimana kita bisa input 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 karuan kali 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 sih buat 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 : <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

10 document.getelementbyid("addfoto"+counter).innerhtml = "<br /><input type='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 di upload 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

11 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

12 <?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'); form tambah di file 'gallery_view.php' // value attribut action pada // memanggil file gallery_view.php (di folder view) dengan mengirim variable-variable yang berada dalam array $data $this->load->view('gallery_view', $data); // fungsi tambah foto gallery function tambah() page 12 / 16

13 // 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 di upload // 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 (buat saja 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 sesuai configuration) $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 penyimpanan ke database nantinya $nama[$i] = $data['upload_data']['file_name']; page 13 / 16

14 $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 file ym_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 Baru Tersimpan' 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 akan dihapus 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

15 $this->session->set_flashdata('message', '<font color="red">upload Foto Gagal</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 di class ini var $table='gallery'; // fungsi untuk menambah data foto dengan inputan dari controller gallery.php function tambah_foto($rec) page 15 / 16

16 $this->db->insert("foto", $rec); Nah...beres deh. Semoga tulisan ini bermanfaat. Terima kasih... page 16 / 16