Memulai Project CodeIgniter : Part 9 Upload File

Pada sebuah form input php, pasti kita tidak lepas dari input file atau input gambar untuk mendukung sebuah artikel kita. Maka dari itu saya akan share skrip upload files pada codeigniter. Karena itu masih dalam seri Memulai Project Codeigniter saya sarankan agar membaca artikel sebelumnya dan core codeigniternya saya dari artikel sebelumnya.

Pada codeigniter librari upload sendiri sudah tersedia tanpa kita harus membuat librari baru lagi. Pada codeigniter kita tinggal memanggil $this->load->library('upload') pada contoller atau supaya otamatis bisa dipanggil pada setiap controller tambahkan library upload pada autoload.php untuk mempersingkat waktu mari kita mulai implementasinya.

Langkah 1 : Setting

Agar file berhasil disimpan buat folder ./assets/uploads karna path folder uploadnya saya buat seperti itu agan bisa ubah sesuai dengan selera agan

Setting pada config/routes.php agar langsung otomatis mengakses controller upload ketika url diakses di browser

$route['default_controller'] = "upload";

Setting pada config/autoload.php agar terload otomatis

$autoload['libraries'] = array('database','session','form_validation','pagination','upload');

Kemudian pada models pada autoload tambahkan model mupload

$autoload['model'] = array('mbarang','mupload');

Langkah 2 : Tabel database

CREATE TABLE `tb_uploadimage` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `nm_gbr` varchar(35) DEFAULT NULL,
  `tipe_gbr` varchar(10) DEFAULT NULL,
  `ket_gbr` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1

Langkah 3 : Views

Pada kasus kali, yang akan kita buat adalah proses upload untuk file gambar, pertama buat view untuk tampilan awalnya dimana semua data yang ada didatabase ditampilkan beri nama vupload.php simpan di folder ./application/views/upload/

<section>
<div class="container"> 
 <h1>Data File Gambar</h1>
  <a href="<?php echo base_url();?>upload/tambah" class="button">Tambah</a>
  <div class="pesan-sukses"><?php echo $this->session->flashdata("pesan");?></div> 
 
  <table class="table">
   <tr>
    <th style="width: 5%;">No</th>
    <th>Keterangan File</th>
    <th>Tipe File</th>
    <th>Gambar File</th>
    <th></th>
 
   </tr>
   <?php if(!$queryupload){?>
    <tr><td colspan="9">Data Masih Kosong</td> </tr>
   <?php }else{
     $no =0; 
     foreach ($queryupload as $rstupld) {$no++;
   ?>
   <tr>
    <td><?php echo $no;?></td>
    <td><?php echo $rstupld->ket_gbr;?></td>
    <td><?php echo $rstupld->tipe_gbr;?></td>
    <td><img style="width: 200px;"> src="<?php echo base_url();?>assets/uploads/<?php echo $rstupld->nm_gbr;?>"></td> 
    <td><a href="<?php echo base_url()?>upload/edit/?id=<?php echo $rstupld->id;?>" class="button3 button-sm">EDIT</a>
     <a onclick="return KonfirmasiHapus()" href="<?php echo base_url()?>upload/hapus/?id=<? echo $rstupld->id;?>" class="button4 button-sm">HAPUS</a>
    </td>
   </tr>
   <?php }}?>
  </table>
 
</div>
</section>
<script type="text/javascript">
function KonfirmasiHapus() {
  return confirm("Apa anda yakin akan menghapus data ini?");
}
</script>
 

Kemudian untuk view form nya simpan dengan nama vformupload.php dan simpan juga di ./application/views/upload/

<?php 
if($aksi=='aksi_tambah'){
 $kode = "";
 $filegambar = "";
 $keterangan = @$aket;
}elseif($aksi=='aksi_edit'){
 $kode = $row->id;
 $filegambar = $row->nm_gbr;
  $keterangan = $row->ket_gbr;
}
?>
<section>
<div class="container"> 
 <h1>Form Upload Gambar</h1>
  <div class="form">
  <div class="pesan-error"><?php echo $this->session->flashdata("pesan");?></div> 
 <form method="post" enctype="multipart/form-data" action="<?php echo base_url()?>upload/<?php echo $aksi?>"> 
  <label>Keterangan</label>
    <textarea name="keterangan"><?php echo $keterangan;?></textarea>

  <label>File Gambar</label>
    <input type="file" name="gambar" class="w1">
    <input type="hidden" name="gambarold" value="<?php echo $filegambar;?>"> 
    
    <input type="submit" class="button" name="simpan" value="Simpan">
    <a href="<?php echo base_url();?>upload" class="button2">Kembali</a>
    <input type="hidden" name="kode" value="<?php echo $kode;?>">

   </form>
   
  </div>
</div>
</section>

Langkah 4 : Controllers

buat file controller beri nama Upload.php dan simpan difolder application/controllers

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Upload extends CI_Controller {
/******************************************************
  | Upload
  | controller Upload view, create, update, delete
  | by gTech
  *****************************************************/
  public function __construct() {
    parent::__construct();
  }
  
    //fungsi awal ketika kita panggil controller gambar
    public function index(){
      $data['judul'] = 'Upload Gambar'; //judul title      
      $data['queryupload'] = $this->mupload->getallimage(); //model semua file 
      
      //template views
      $this->load->view('header',$data); //load header
      $this->load->view('upload/vupload',$data); //load views
      $this->load->view('footer',$data); //load footer
    }
     
    //fungsi form tambah ketika kita panggil pada link 
    public function tambah(){     
      $data['judul'] = 'Tambah Gambar';
      $data['aksi'] = 'aksi_tambah';

      //template views
      $this->load->view('header',$data);
      $this->load->view('upload/vformupload',$data);
      $this->load->view('footer',$data);
    }
    //fungsi form edit ketika kita panggil pada link
    public function edit(){
      $id = $this->input->get('id');
      $data['row'] = $this->mupload->getbyid($id);
      $data['judul'] = 'Edit Gambar';
      $data['aksi']  = 'aksi_edit';

      //template views
      $this->load->view('header',$data);
      $this->load->view('upload/vformupload',$data);
      $this->load->view('footer',$data);
    }
    //fungsi untuk menangani pemanggilan aksi tambah ketika form di submit
    public function aksi_tambah(){
        //deklarasikan variabel dari form
        $nama     = addslashes($this->input->post('nama'));
        $keterangan    = addslashes($this->input->post('keterangan'));
 
        //validasi 
        $this->form_validation->set_rules('gambar', 'File Gambar', 'trim|xss_clean'); //file gambar

        //configurasi upload
        $nmfile = "file_".time(); //nama file saya beri nama langsung dan diikuti fungsi time
        $config['upload_path'] = './assets/uploads/'; //path folder
        $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
        $config['max_size'] = '2048'; //maksimum besar file 2M
        $config['max_width']  = '1288'; //lebar maksimum 1288 px
        $config['max_height']  = '768'; //tinggi maksimu 768 px
        $config['file_name'] = $nmfile; //nama yang terupload nantinya
        $this->upload->initialize($config);

        if ($this->form_validation->run() == TRUE) {
            if ($this->upload->do_upload('gambar')){
                $gbr = $this->upload->data();
                $data = array(
                  'nm_gbr'  => $gbr['file_name'],
                  'tipe_gbr' => $gbr['file_type'],
                  'ket_gbr'=> $keterangan
                );
                $this->mupload->getinsert($data); //model insert data
                $this->session->set_flashdata("pesan", "Data berhasil di insert"); //pesan yang tampil setalah berhasil di insert
                redirect('upload');
            }else{
              $info = array(
                'aket'=>$keterangan,
                'judul' => 'Tambah Gambar',
                'aksi' => 'aksi_tambah'
              );
              $err = $this->upload->display_errors(); //error upload
              $this->session->set_flashdata("pesan", "Data Gagal di insert
".$err);
              //ketika error terjadi halaman akan tetap di form 
              $this->load->view('header',$info); 
              $this->load->view('upload/vformupload',$info);
              $this->load->view('footer',$info); 

            }
        }else{
          //ini berfungsi agar field form tidak menjadi kosong, dibuat dalam array
          //variabel akan tetap dibawa jika error terjadi pada saat validasi
          $info = array(
            'aket'=>$keterangan,
            'judul' => 'Tambah Gambar',
            'aksi' => 'aksi_tambah'
          );
          $err = validation_errors(); //error validasi akan dimunculkan pada pesan

          $this->session->set_flashdata("pesan", "Data Gagal di insert
".$err);

          //ketika error terjadi halaman akan tetap di form barang
          $this->load->view('header',$info); 
          $this->load->view('upload/vformupload',$info);
          $this->load->view('footer',$info); 
        }
      }
}

/* End of file Upload.php */
/* Location: ./application/controllers/Upload.php */

Pada skrip saya sudah buatkan keterangannya agar lebih mudah dipahami, kemudian saya juga.

Langkah 5 : Model

Kemudian selanjutnya kita buat skrip untuk modelnya, beri nama Mupload.php simpan di folder ./application/models/

<?php class Mupload extends CI_Model {
    var $tabel = 'tb_uploadimage'; //buat variabel tabel 

    //fungsi untuk menampilkan semua data dari tabel database
    function getallimage() {
        $this->db->from($this->tabel);
        $query = $this->db->get();

        //cek apakah ada data
        if ($query->num_rows() > 0) {
            return $query->result();
        }
    }
    //query untuk satu data dari tabel
    function getbyid($id) {
        $this->db->from($this->tabel);
        $this->db->where('id', $id);

        $query = $this->db->get();
        if ($query->num_rows() == 1) {
            return $query->row();
        }
    }
    //query insert ke database
    function getinsert($data){
       $this->db->insert($this->tabel, $data);
       return TRUE;
    }
}
?>

Output

Gambar tampilan upload

gambar tampilan form upload

gambar tampilan hasil upload berhasil 

sampai disini kita sudah berhasil mengupload gambar dan menyimpannya ke dalam database, untuk edit dan hapus file upload akan kita bahas pada artikel selanjutnya. Tetap ikut
Sekian dan terimakasih

Bersambung