CodeIgniter Talk : Basic Image Uploader

Pengunggahan image pada suatu website nampaknya merupakan salah satu backbone aplikasi yang tak dapat dipungkiri lagi keberadaannya. Dengan adanya fungsi ini, suatu website dapat menyediakan banyak fungsi-fungsi lain yang berhubungan dengan image, e.g., Change Profile Picture, Change Avatar, Share Image, Picture Editor, etc. Tutorial ini dibuat sesuai dengan salah satu request dari pengunjung.

Tutorial Details

  • Program : Codeigniter v2.1.0
  • Topic : Basic Image Uploader
  • Difficulty : Easy to Intermediate
  • Estimated Completion Time : About 30 minutes

Assumptions

  • Anda sudah memahami cara kerja framework CodeIgniter.
  • Anda sudah mengerti bagaimana URL terbentuk dalam framework CodeIgniter.
  • Anda mengerti tentang penggunaan mod_rewite dalam CodeIgniter merupakan suatu nilai tambah.
  • Anda sedang mengalami kesulitan dalam pembuatan halaman yang dapat mengunggah image.

Step 1. Configuring CodeIgniter

Unduh framework CodeIgniter versi 2.1.0 disini dan extract di folder xampp/htdocs/. Setelah itu rename folder CodeIgniter_2.1.0 menjadi tutorial-ci-image-uploader. Buka dengan web browser halaman http://localhost/tutorial-ci-image-uploader, anda akan melihat halaman default CodeIgniter yang belum dikonfigurasi.

Untuk mengkonfigurasi CodeIgniter anda harus mengubah beberapa script PHP yang ada pada folder /tutorial-ci-image-uploader/application/config/.

  • Configuring config.php file

cari script seperti berikut :

$config['base_url'] = '';

dan diubah menjadi,

$config['base_url'] = 'http://' . $_SERVER['HTTP_HOST'] . '/tutorial-ci-image-uploader';

base_url digunakan untuk menentukan alamat domain kita, dalam hal ini halaman awal kita berarti http://localhost/tutorial-ci-image-uploader. Script $_SERVER[‘HTTP_HOST’] berfungsi untuk mengambil alamat domain kita secara dinamis, dikarenakan kita menggunakan server local maka script tersebut akan menghasilkan localhost. Penambahan path /tutorial-ci-image-uploader itu sendiri berhubungan dengan folder website yang kita buat sebelumnya.

  • Configuring routes.php file

Dikarenakan CodeIginiter merupakan implementasi dari OOP, maka fungsi-fungsi CodeIgniter selalu diakses melalui Controller. Controller yang pertama kali diakses oleh browser yang merequest halaman domain kita dinamakan default_controller. default_controller ini dapat diubah-ubah sesuai dengan keinginan kita. Untuk kali ini, ubah script berikut ini :

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

dengan,

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

Script diatas akan mengubah default controller halaman web kita ke controller upload yang kan kita buat nanti.

Step 2. Creating Views

Buatlah file form_view.php pada folder application/views, lalu isikan dengan script berikut.

<html>
    <head>
        <title>Upload File</title>
        <style>
            body{
                width: 960px;
                margin: 0 auto;
                text-align: center;
                padding: 20px 0px 20px 0px;
            }
            input.button {
                font-family: Helvetica,arial,freesans,clean,sans-serif;
                font-size: 12px;
                font-weight: bold;
                background: linear-gradient(#419B36,#357F2C);
                background: -moz-linear-gradient(#419B36,#357F2C);
                background: -webkit-linear-gradient(#419B36,#357F2C);
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#419b36',endColorstr='#357f2c')";
                background: linear-gradient(#419B36,#357F2C);
                text-align: center;
                color: white;
                text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
                padding: 8px 15px;
                line-height: normal;
                border: 1px solid #DDD;
                border-bottom-color: #BBB;
                border-radius: 3px;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }
        </style>
    </head>
    <body>
        <?php
        echo $error;
        echo form_open_multipart('upload/do_upload');
        ?>

        <input class="button" type="file" name="userfile" size="20" />
        <?php
        echo br(2);
        ?>
        <input class="button" type="submit" value="upload" />

        <?php
        echo form_close();
        ?>
    </body>
</html>

Dapat dilihat pada script-script PHP, pertama kita mengeluarkan nilai error yang dikirimkan dari controller, lalu dengan memanfaatkan form library, kita membuat tag pembuka form dengan menggunakan fungsi form_open_multipart dengan 1 parameter yaitu halaman yang akan digunakan sebagai action dari form tersebut. Lalu setelah itu terdapat  pembentukan 2 tag <br> dengan menggunakan PHP yang memanfaatkan html library. Dan yang terakhir dalam script PHP dalam penutupan tag <form> yang juga memanfaatkan form library.

Sedangkan untuk pembuatan button yang akan menjadi tombol untuk memilih image adalah tag <input> dengan type yang bernilai file. Dimana tag tersebut diberikan name userfile yang akan digunakan sebagai variable saat pengiriman data.

Buatlah file success_view.php pada folder application/views yang akan digunakan ketika image berhasil diunggah, lalu isikan dengan script berikut.

<html>
    <head>
        <title>Upload File</title>
        <style>
            body{
                width: 960px;
                margin: 0 auto;
                text-align: center;
                padding: 20px 0px 20px 0px;
            }
        </style>
    </head>
    <body>
        <h3>Your image was successfully uploaded!</h3>
        <?php
        $attr = array(
            "src" => "images/" . $upload_data['orig_name'],
            "height" => 300
        );
        echo img($attr);
        echo br(2);
        echo anchor('upload', 'Upload Another Image!');
        ?>
    </body>
</html>

Perhatikanlah script PHP diatas, pertama-tama kita membuat variable $attr dimana variable ini bertipe associative array yang berisikan atribut-atribut yang akan digunakan untuk membentuk tag <img>. Lalu setelah itu dengan memanfaatkan html library, kita dapat membuat tag <img> dengan atribut yang sudah kita spesifikasikan menggunakan fungsi img(). Fungsi anchor() sendiri merupakan fungsi dari url helper yang akan menghasilkan tag <a>.

Step 3. Creating Controller

Buatlah file upload.php pada folder application/controllers. Lalu isikan dengan script berikut.

<?php

class Upload extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->helper(array('form', 'url', 'html'));
    }

    function index() {
        $this->load->view('form_view', array('error' => ' '));
    }

    function do_upload() {
        $config['upload_path'] = './images/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '100';
        $config['max_width'] = '1024';
        $config['max_height'] = '768';

        $name = $_FILES['userfile']['name']; // get file name from form
        $fileNameParts = explode('.', $name); // explode file name to two part
        $default_name = $fileNameParts[0]; // get raw name from client
        $config['file_name'] = $default_name . "_desired_name"; //constructing a new name


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

        if (!$this->upload->do_upload()) {
            $error = array('error' => $this->upload->display_errors());

            $this->load->view('form_view', $error);
        } else {
            $data = array('upload_data' => $this->upload->data());

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

Pada konstruktor class ini kita mengeload 3 macam library, yaitu

  1. url, yang akan membantu kita dalam memanipulasi atau menciptakan suatu url.
  2. form yang akan membantu kita dalam pembuatan tag <form> pada html.
  3. dan html yang akan membantu kita dalam pembuatan berberapa tag html lainnya.

Lalu pada fungsi index(fungsi yang secara default di load apabila tidak ada fungsi yang didefinisikan dalam url) kita menge-load halaman form_view dengan data error bernilai string kosong. Kenapa “error” bernilai kosong? karena ini merupakan bentuk inisialisasi tidak ada error pada saat page pertama kali diakses.

Berlanjut pada fungsi do_upload, fungsi inilah yang akan memproses file yang diunggah melalui view yang sudah kita buat. Didalam fungsi ini, terdapat konfigurasi dasar untuk library upload. Konfigurasi ini nantinya akan memberikan batasan-batasan yang harus dipenuhi oleh file yang akan diunggah, salah satu yang penting adalah “allowed_types” dimana akan memberikan list tipe file yang dapat diunggah.

Selanjutnya pada konfigurasi “file_name” kita dapat memberikan nama file baru pada image yang akan diunggah.

Pada akhir script, terdapat pemanggilan fungsi do_upload() yang digunakan untuk mengunggah file. Fungsi ini akan mengembalikan nilai true jika file berhasil diunggah sesuai dengan konfigurasi yang ditentukan, dan akan mengembalikan nilai false jika kebalikannya. Jika File berhasil diupload, maka success_view akan di-load, bersamaan dengan itu controller akan memberikan data yang berkaitan dengan image yang baru saja diunggah. Data ini terdefinisi pada variable $data[“upload_data”] yang dapat diakses dengan $upload_data pada view. Jika file gagal diupload, maka form_view akan kembali di-load, bersamaan dengan itu, controller akan memberikan nilai error yang diambil dari fungsi display_errors() pada upload library.

The Results

Gambar 1 : Uploader page

Gambar 2 : Choose an Image to be uploaded

Gambar 3 : The image was uploaded.

Summary

Tutorial ini bukan hanya bisa digunakan untuk mengunggah image, melainkan bisa juga untuk berbagai macam file. Hanya pada nantinya kita perlu melakukan sidikit perubahan pada konfigurasi batasan pada saat mengunggah file dan rancangan halaman sukses ketika file berhasil diunggah. Jika anda expert dalam AJAX, anda bisa mengkombinasikannya agar penampilan halaman uploader menjadi lebih menarik.

Anda bisa mendukung saya untuk tetap melakukan update tutorial dengan cara mem-follow blog saya, atau mem-follow twitter saya disini, bisa juga dengan meninggalkan komentar dan atau me-request tutorial yang anda inginkan. Best regards, eSDhee

Advertisements

9 thoughts on “CodeIgniter Talk : Basic Image Uploader

  1. Bro.. saya sudah ikutin tutorial upload image ini, kenapa sesudah memilih file path-nya ga muncul di textbox ya? trims..

    • udah bisa bro, ternyata pada class button, warna fontnya “white” jadinya ga keliatan.. trims..

  2. postingannya bagus, tutorialnya lengkap dengan contoh, diuraikan secara bertahap / step by step. namun karna aku masih gaptek, setelah selesai dibaca tetep aja bingung :D, tp mudah2an kedepannya aku pinter kaya mas stefanus
    Gak apa-2 dech, yang penting bisa mampir berkunjung N sapa teman2 blogger ajang silaturahmi mingguan

  3. bro, makasih ya tutorialnya. belom dicoba sih 😀
    mau tanya dong. stefanus embed source code nya di postingan pakai apa sih ? biar kelihatan line number sama colouring tag nya gitu ?

    ini pakai blog wordpress biasa kan ? bukan yg CMS nya ?

    • eh, bisa ding. pake tag di editor nya.
      maaf ya, gw udah malu2in. 😛 tadinya komen di atas mau gw apus, tapi ga bisa.hehe.

      btw, blogmu ku follow ya.happy posting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s