1 v Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam Framework CodeIgniter Biasanya jika kita membuat sebuah form inputan dalam php,...
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-ja vascript-dalam-framework-codeigniter/
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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
================================================== =================================== <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 = "
";
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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
Nah, setelah ini kita buat file controller dengan nama "gallery.php", dengan coding :
================================================== ===================================
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 pada form tambah di file 'gallery_view.php'
page 4 / 16
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
// 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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
$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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
$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', 'Upload Foto Gagal '); redirect('gallery'); } } else { $this->session->set_flashdata('message','Data Tidak Tersimpan'); redirect('gallery'); } } ?> ================================================== ===================================
terakhir kita buat modelnya dengan nama gallery_model.php
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
// 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 = " ";
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
Nah, setelah ini kita buat file controller dengan nama "gallery.php", dengan coding :
page 11 / 16
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
// 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 pada form tambah di file 'gallery_view.php'
// 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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
// 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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
$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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
$this->session->set_flashdata('message', 'Upload Foto Gagal '); redirect('gallery'); } } else { $this->session->set_flashdata('message','Data Tidak Tersimpan'); redirect('gallery'); } }
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
Catatan Maya | Multiple Upload dengan Jumlah Dinamis Menggunakan Javascript dalam F Copyright Abdul Akbar Aziz [email protected] http://akbaraziz.staff.ipb.ac.id/2011/02/02/multiple-upload-dengan-jumlah-dinamis-menggunakan-jav ascript-dalam-framework-codeigniter/
