Catatan Coding: [CodeIgniter] Upload dan Resize Gambar Secara Otomatis

Saya sering mondar-mandir membaca pertanyaan-pertanyaan member di group CodeIgniter Indonesia dan tak jarang ada yang bertanya atau mempertanyakan bagaimana cara mengupload gambar dan meresize gamber tersebut secara otomatis. Nah, maka dari itu kali ini saya akan memberikan sedikit bahkan secuil contoh penggunaannya.

Buat project baru dengan codeigniter, kemudian buka controller welcome.php, kemudian isi seperti berikut.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

    public function __construct()

    {

        parent::__construct();

        $this->load->helper(array('form', 'url', 'html'));

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

    }

    public function index()

    {

        $data = array();

        $data['error'] = '';

        $data['output'] = '';

        if(isset($_FILES['userfile']))

        {

            $this->upload->initialize(array(

                'upload_path' => './assets/',

                'allowed_types' => 'png|jpg|gif',

                'max_size' => '5000',

                'max_width' => '3000',

                'max_height' => '3000'

            )); 

            if($this->upload->do_upload())

            {

                $data_upload = $this->upload->data();

                $this->image_lib->initialize(array(

                    'image_library' => 'gd2',

                    'source_image' => './assets/'. $data_upload['file_name'],

                    'maintain_ratio' => false,

                    'create_thumb' => true,

                    'quality' => '20%',

                    'width' => 240,

                    'height' => 172

                ));

                if($this->image_lib->resize())

                {

                    $output = '<h4>Thumb - hasil Resize</h4>';

                    $output .= img('./assets/'.$data_upload['raw_name'].'_thumb'.$data_upload['file_ext']);

                    $output .= '<h4 style="margin-top: 30px">Gambar Original</h4>';

                    $output .= img('./assets/'.$data_upload['file_name']);

                    $data['output'] = $output;

                }

                else

                {

                    $data['error'] = $this->image_lib->display_errors();

                }

            }

            else

            {

                $data['error'] = $this->upload->display_errors();

            }

        }

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

    }

}

/* End of file welcome.php */

/* Location: ./application/controllers/welcome.php */

Kemudian buka folder views/welcome_message.php dan isi seperti berikut.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Welcome to CodeIgniter</title>

    <style type="text/css">

    ::selection{ background-color: #E13300; color: white; }

    ::moz-selection{ background-color: #E13300; color: white; }

    ::webkit-selection{ background-color: #E13300; color: white; }

    body {

        background-color: #fff;

        margin: 40px;

        font: 13px/20px normal Helvetica, Arial, sans-serif;

        color: #4F5155;

    }

    a {

        color: #003399;

        background-color: transparent;

        font-weight: normal;

    }

    h1 {

        color: #444;

        background-color: transparent;

        border-bottom: 1px solid #D0D0D0;

        font-size: 19px;

        font-weight: normal;

        margin: 0 0 14px 0;

        padding: 14px 15px 10px 15px;

    }

    code {

        font-family: Consolas, Monaco, Courier New, Courier, monospace;

        font-size: 12px;

        background-color: #f9f9f9;

        border: 1px solid #D0D0D0;

        color: #002166;

        display: block;

        margin: 14px 0 14px 0;

        padding: 12px 10px 12px 10px;

    }

    #body{

        margin: 0 15px 0 15px;

    }

    p.footer{

        text-align: right;

        font-size: 11px;

        border-top: 1px solid #D0D0D0;

        line-height: 32px;

        padding: 0 10px 0 10px;

        margin: 20px 0 0 0;

    }

    #container{

        margin: 10px;

        border: 1px solid #D0D0D0;

        -webkit-box-shadow: 0 0 8px #D0D0D0;

    }

    </style>

</head>

<body>

<div id="container">

    <h1>Upload dan Resize Gambar Otomatis <span style="float: right">Dida Nurwanda</span></h1>

    <div id="body">

        <form method="post" enctype="multipart/form-data">        

            <?php echo $error; ?>

            <div>

                <label for="userfile">Pilih gambar yang akan di upload : </label>

                <br />

                <input type="file" name="userfile" />

            </div>

            <div style="margin-top:20px">

                <input type="submit" value="Upload" />

            </div>

        </form>

        <div>

            <?php echo $output; ?>

        </div>

    </div>

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>

</div>

</body>

</html>