Tutorial Singkat Membuat Upload Gambar Dengan Codeigniter

Dalam artikel ini saya ingin membuat tutorial cara membuat upload gambar sacara singkat dengan Codeigniter. Mungkin temen-temen yang membaca artikel ini sudah ada yang tau caranya, namun tidak ada salahnya jika artikel ini tetap saya buat karena masih banyak yang belum memahami cara upload gambar dengan framework codeigniter. Oh ya, data gambar yang disimpan ke dalam database hanya namanya saja ya, bukan file gambarnya.

Baca Juga :
                   Cara Membuat Button Upload Gambar Langsung Codeigniter

Baik langsung saja, silahkan siapkan file file pendukung seperti :

1. framework codeigniter
2. framework css bootstrap (opsional untuk tampilan)
3. Jquery
4. Siapkan 1 buah database dengan 1 tabel untuk menampung data gambar (dalam contoh ini saya membuat database db_gambar dengan tabel data_gambar)

* Jika kalian tidak mau report report menyiapkan semua kebutuhan di atas, kalian dapat mendownloadnya pada akhir artikel dibawah ini.

Disini saya membuat masing masing 1 buah file pada Controler, Model dan View

Controler, buat file dengan nama dashboard.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
 class Dashboard extends CI_Controller{
  function __construct()
     {
      parent::__construct();
            $this->load->model('m_dashboard');
     }

     function index() {
      $data_gambar = $this->m_dashboard->getDataGambar();
            $nama_gambar='';
            $id_gambar='';
            foreach ($data_gambar as $value) {
                $id_gambar = $value['id_gambar'];
                $nama_gambar = $value['nama_gambar'];
            }

            $data['nama_gambar']=$nama_gambar;
            $data['id_gambar'] = $id_gambar;

      $this->load->view('v_dashboard',$data);
     }

        function go_upload_gambar() {
            //load library upload
            $this->load->library('upload');

            $id_gambar = $this->input->post('id_gambar',true);

            //buat random nama gambar
            $nmfile = "photo_".time().'_'.rand(1000,9999);
            //path upload gambar 
            $config['upload_path'] = './files/';
            //tipe file yang dibolehkan untuk diupload 
            $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; 
            //maksimal ukuran file yang diupload
            $config['max_size'] = '2000'; 
            //maksimal panjang gambar
            $config['max_width']  = '6000'; 
            //maksimal lebar/tinggi gambar
            $config['max_height']  = '6000'; 
            //nama gambar baru
            $config['file_name'] = $nmfile;

            $this->upload->initialize($config);

            $pesan = '';

            if($_FILES['file_gambar']['name'])
            {
                if ($this->upload->do_upload('file_gambar'))
                {
                    $gbr = $this->upload->data();
                    $nama_gambar = $gbr['file_name'];

                    $data_to_upload=array(
                        'nama_gambar' => $nama_gambar
                    );

                    if($id_gambar=='') {
                        //gambar_baru
                        $this->m_dashboard->insertGambar($data_to_upload);
                    } else {
                        //update_gambar
                        
                        $nama_gambar_prev =$this->input->post('nama_gambar_prev',true);
                        //hapus gambar sebelumnya
                        $target_delete='files/'.$nama_gambar_prev;
                        if(file_exists($target_delete)) {
                            unlink($target_delete);
                        }

                        $this->m_dashboard->updateGambar($id_gambar,$data_to_upload);
                    }
                    $pesan = 'Sukses Upload Gambar';

                } else {
                    $error = array('error' => $this->upload->display_errors());
                    $pesan='';    
                    foreach ($error as $key => $value) {
                        $pesan=$pesan.','.$value;
                    }
                }
            } else {
                $pesan = 'Pilih Gambar!';
            }


            redirect(base_url(),'refresh');
        }


    }
?>

Untuk keterangannya sudah saya sertakan dalam script di atas, namun jika masih ada yang belum dipahami bisa tinggalkan komentar di bawah

Model, buat file m_dashboard.php

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 class M_dashboard extends CI_Model
 {
  
  function __construct()
  {
   parent::__construct();
   
  }

  function getDataGambar() {
   return $this->db->get('data_gambar')->result_array();
  }

  function insertGambar($data_to_upload){
   $this->db->insert('data_gambar',$data_to_upload);
  }

  function updateGambar($id_gambar,$data_to_upload){
   $this->db->where('id_gambar',$id_gambar)->update('data_gambar',$data_to_upload);
  }

 }
?>

Dalam model di atas hanya ada 3 fungsi untuk mengambil data gambar, menambahkan gambar baru dan update gambar

View, buat file v_dashboard.php

<center>
<h4>
Upload Gambar</h4>
</center>
<div class="container">
        <form method="POST" id="f_gambar" name="f_gambar" action="<?=base_url()?>
dashboard/go_upload_gambar/"  enctype="multipart/form-data">
            <input type="hidden" name="id_gambar" value="<?=$id_gambar?>">
            <input type="hidden" name="nama_gambar_prev" value="<?=$nama_gambar?>">
            <div class="col-sm-5">
                <label class="control-label">File Gambar</label>
                <input type="file" name="file_gambar" id="file_gambar" class="form-control" accept="image/*">
            </div>
<div class="col-sm-5">
                <button style="margin-top: 25px" type="submit" name="btn_upload" id="btn_upload" class="btn btn-success">Upload</button>
            </div>
<div class="col-sm-3">
                <img alt="contoh gambar" class="img img-responsive img-thumbnail" src="<?=base_url()?>files/<?=$nama_gambar?>">
            </div>
</form>
</div>

Jika diperhatikan dari file view di atas, saya menyisipkan file hidden untuk menyimpan data ID gambar dan nama gambar sebelumnya yang diperlukan untuk proses upload gambar pada controler

Jika sudah siap semuanya, silahkan jalankan pada browser kesayangan kalian.