Ayuk Coding : Tutorial CI untuk meresize dan membuat thumbnail pada upload file

CodeIgniter memang framework yang cukup populer dan banyak digunakan (termasuk saya juga) walau rilis tiap versinya cukup lama😀 Di sini saya akan mencoba berbagi pengetahuan tentang mengupload, meresize, dan membuat thumbnail menggunakan library yang ada di CI. Seringkali ketika kita membuat website/aplikasi web yang menggunakan gambar pasti mendefinisikan dulu ukurannya (mis: 300×300), lalu jika ada kebutuhan untuk membuat thumbnail baru sekalian kita buat thumbnailnya. Hanya saja, pengguna biasanya malas untuk menyesuaikan gambar dengan ukuran yang telah didefinisikan tadi, jadilah developernya yang harus repot.. hehehehe.. Tapi untungnya di CI sudah disediakan library yang mudah digunakan untuk memanipulasi file image ini. Bagaimana cara kerjanya??

1. Buat file view.php

File view.php ini merupakan file yang digunakan untuk mengupload gambar. Kira-kira contoh kodenya seperti ini:

<form action="fileupload/add" enctype="multipart/form-data" method="post">
File : <input type="file" name="userfile" /><br/>
<input type="submit" name="submit" value="upload" />

2. Copy file libraries/Image_lib.php lalu pastekan di folder application/libraries dan rename menjadi MY_Image_lib.php. Setelah itu kita ganti nama kelasnya dari :

class CI_Image_lib {

menjadi

class MY_Image_lib extends CI_Image_lib {

Lalu kita lihat di baris 37, kita edit value untuk var $thumb_maker menjadi ” (kosong).

3. Kita buat file controller uploadfile.php

Class Uploadfile extends Controller {

 function __construct() {
 parent::Controller();
 }

 function add() {
 /* validasi dan pengecekan saya skip*/
 ...
 $config['upload_path'] = $_SERVER['DOCUMENT_ROOT'].'app/image/';
 $config['allowed_types'] = 'gif|jpg|png|doc|pdf|ppt';
 $config['max_size']    = '500';
 $config['max_width']  = '1024';
 $config['max_height']  = '768';
 $this->load->library('upload', $config);

 if ( ! $this->upload->do_upload()) {
 echo 'gagal upload';
 }
 else {
 /* apabila file yang diupload terlalu besar, kita resize ke ukuran yang diinginkan */
 $config['image_library'] = 'gd2';
 $config['source_image'] = $_SERVER['DOCUMENT_ROOT'].'app/image/'.$_FILES['userfile']['name'];
 $config['maintain_ratio'] = FALSE;
 $config['width'] = 320;
 $config['height'] = 288;

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

 /* setelah diresize kita buat thumbnailnya */
 $conf['image_library'] = 'gd2';
 $conf['source_image'] = $_SERVER['DOCUMENT_ROOT'].'app/image/'.$_FILES['userfile']['name'];
 $conf['new_image'] = $_SERVER['DOCUMENT_ROOT'].'app/thumb/'.$_FILES['userfile']['name'];
 $conf['create_thumb'] = TRUE;
 $conf['maintain_ratio'] = FALSE;
 $conf['width'] = 120;
 $conf['height'] = 108;

 $this->load->library('image_lib', $conf);
 $this->image_lib->initialize($conf);
 $this->image_lib->resize();
 }
 }
}

4. Jalankan pada web browser, cobalah untuk memasukkan file dengan ukuran yang besar. Apabila ternyata file berhasil diresize dan diciptakan thumbnail pada folder thumb/ maka anda berhasil menjalankan tutorial ini. Silakan berkreasi dengan kasus lain yang anda hadapi.

Semoga tutorial yang sederhana ini bermanfaat.

One thought on “Ayuk Coding : Tutorial CI untuk meresize dan membuat thumbnail pada upload file

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