Tutorial CodeIgniter: Upload Image

Salah satu perbedaan besar dalam perjalanan hidup di era yang serba canggih ini adalah adanya kebebasan dan kemudahan dalam berinteraksi satu sama lain. Dan di masyarakat kita masa kini, berinteraksi melalui media sosial adalah hal yang sangat umum dan sudah menjadi kebiasaan. Tidak hanya untuk saling menyapa, media sosial pun bisa digunakan untuk berbagi foto. Melalui Facebook, Twitter, Instagram ataupun media sosial lainnya. Saat ada momen menarik dan instagram-able, biasanya orang akan langsung cekrek, cekrek lalu upload ke media sosial masing-masing.

Memperhatikan fenomena yang marak di lakukan oleh kebanyakan orang, saya pun berpikir, “bagaimana caranya gupload gambar ke media sosial?”. Dan kebetulan ada tugas kuliah untuk membuat contoh fungsi untuk upload gambar menggunakan CodeIgniter.

Jadi, pada postingan kali ini saya akan membahas cara mengunggah atau upload gambar menggunakan CodeIgniter.

Spesifikasi peralatan yang saya gunakan adalah sebagai berikut:

Xampp 1.8.0 (PHP 5.4)
Codeigniter 3.0.1
MYSQL

Berikut ini adalah langkah – langkahnya:

Step 1 - Membuat Controller Baru

Pertama kita akan membuat controller yang akan menangani halaman untuk upload dan juga proses upload. Buat file controller dengan nama Upload_controller.php, lalu simpan di folder controller. Selanjutnya kita deklarasikan class Upload_controller dan tambahkan dua method index() dan upload().

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Upload_controller extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->helper(array('url', 'html', 'form'));
    }

    function index()
    {
        $this->load->view('view_upload');
    }

    function upload()
    {
        $config = array(
            'upload_path' => './assets/uploads/img/', //lokasi gambar akan di simpan  
            'allowed_types' => 'jpg|jpeg|png|gif', //ekstensi gambar yang boleh di uanggah  
            'max_size' => '2000', //batas maksimal ukuran gambar  
            'max_width' => '600', //batas maksimal lebar gambar  
            'max_height' => '600', //batas maksimal tinggi gambar  
            'file_name' => url_title($this->input->post('userfile')) //nama gambar  
        );

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload()) {
            $error = $this->upload->display_errors();
            echo $error;
        } else {
            //sintak untuk menyimpan di database  
            /**
            *
            *
            $file = $this->upload->file_name;
            $ket = $this->input->post('ket');
            $tgl = date('Y-m-d');

            $data_gambar = array(
                'img' => $file,
                'ket' => $ket,
                'tgl' => $tgl
            );
            $this->latihan_model->upload_gambar($data_gambar);
            **/

            $data = array('upload_data' => $this->upload->data());

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

Step 2 - Buat file view

Selanjutnya kita buat file view dengan nama file view_upload.php, lalu simpan file tersebut di folder views. Setelah itu ketik sintaks di bawah ini:

 <!DOCTYPE html>
<html>
<head>
    <title>Tutorial CodeIgniter with Gun Gun Priatna</title>
</head>
<body>
    <h2>Upload Gambar</h2>
    <?php echo form_open_multipart('upload_controller/upload'); ?>
    <table>
        <tr>
            <td><input type="file" name="userfile"></td>
        </tr>
        <tr>
            <td><textarea name="ket" placeholder="Keterangan (Optional)"></textarea></td>
        </tr>
        <tr>
            <td><input type="submit" name="upload" value="upload"></td>
        </tr>
    </table>
    <?php echo form_close(); ?>
</body>
</html>

Dan yang terakhir, buat file untuk menampilkan keterangan sukses. Ketik sintaks di bawah ini, lalu simpan di folder views dengan nama sukses.php.

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial CodeIgniter with Gun Gun Priatna</title>
</head>
<body>
    <h3>Your file was successfully uploaded!</h3>
    <ul>
        <?php foreach ($upload_data as $item => $value) : ?>
            <li><?php echo $item; ?>: <?php echo $value; ?></li>
        <?php endforeach; ?>
    </ul>
    <p><?php echo anchor('upload_controller', 'Upload Another File!'); ?></p>
</body>
</html>

Step 3 - Buat direktori untuk upload

Pada tahapan ini kita akan buat folder khusus untuk menyimpan file hasil upload. Kita buka kembali file controller yang sudah kita buat, lalu perhatikan method upload(). Pada method upload() terdapat konfigurasi library upload.

        $config = array(
            'upload_path' => './assets/uploads/img/', //lokasi gambar akan di simpan  
            'allowed_types' => 'jpg|jpeg|png|gif', //ekstensi gambar yang boleh di uanggah  
            'max_size' => '2000', //batas maksimal ukuran gambar  
            'max_width' => '600', //batas maksimal lebar gambar  
            'max_height' => '600', //batas maksimal tinggi gambar  
            'file_name' => url_title($this->input->post('userfile')) //nama gambar  
        );

Pada baris kode di atas terdapat konfigurasi untuk upload_path. Sekarang kita buat folder sesuai dengan yang ada di upload_path yaitu assets/uploads/img.

direktori untuk image

Step 4 - Uji Coba

Sekarang kita uji coba projek sederhana kita. Buka browser, lalu coba run project untuk mengunggah gambar dengan mengetikkan alamat dengan format:

localhost/nama_folder_ci/index.php/nama_class/nama_method

Karena nama folder CI saya latihan_ci, saya ketik alamat seperti di bawah ini:

localhost/latihan_ci/index.php/upload_controller/index

Jika tidak ada error, akan muncul tampilan seperti di bawah ini:

first run

Selanjutnya, Klik tombol Choose File untuk memilih gambar yang akan diupload, lalu klik tombol Open. Isi keterangan (untuk deskripsi gambar), setelah itu coba kamu klik tombol upload. Kalau berhasil akan muncul tampilan seperti di bawah ini:

hasil upload

Klik link ‘Upload Another File’ untuk mengunggah file lainnya. :)

Penutup

Pada tutorial ini kita sudah belajar bagaimana cara upload gambar menggunakan framework codeigniter. Dimulai dari membuat controller, membuat file view dan membuat direktori untuk hasil upload. Selain itu kita sudah uji coba project kita dan gambar berhasil diupload ketika kita uji coba.

Seperti yang sudah kita coba, project ini masih sederhana dan masih bisa dikembangkan. Kita masih bisa kembangkan project ini dengan menambahkan fungsi untuk menyimpan data hasil upload di database misalnya. Selamat mencoba!

Codeigniter