Membuat image gallery sederhana dengan Codeigniter – 1


Codeigniter memiliki library yang digunakan untuk upload, memang sih ini sedikit basi, tapi gapapa lah, karena saya masih banyak belajar dengan Codeigniter, semoga bisa bermanfaat paling tidak biar saya ga lupa 😀

Membuat image gallery sederhana dengan Codeigniter sangat mudah karena Codeigniter sudah memiliki library yang diperlukan yaitu File Uploading dan Image Manipulation yang sangat mudah digunakan. Untuk lebih lengkapnya dapat dibaca di User Guide Codeigniter yang menurut saya dokumentasinya sangat lengkap.

Langkah yang digunakan untuk membuat image gallery adalah membuat fungsi upload gambar menggunakan Library File Uploading. Terlebih dahulu lakukan penyesuaian di file configurasi Codeigniter pada direktori application/config/config.php.

$config['base_url']	= "http://localhost/gallery/";

Sedangkan pada autoload.php saya melakukan penyesuaian sebagai berikut :

$autoload['helper'] = array('url','form','file');


Kemudian buat controller dengan nama gallery.php, isi dari controller tersebut adalah sebagai berkut :

<?php
 class Gallery extends Controller{
 function Gallery(){
 parent::Controller();
 }

function index(){
 $this->load->model('MGallery');

if($this->input->post('upload')){
 $this->MGallery->do_upload();
 }

$this->load->view('gallery_view');
 }
 }

Keterangan dari controller tersebut adalah menjalankan proses do_upload pada model Mgallery (yang akan kita buat), kemudian memanggil view ‘gallery_view’.

Selanjutnya adalah membuat model yang saya beri nama mgallery.php. Isi dari model tersebut adalah sebagai berikut :

<?php
 class MGallery extends Model{

var $gallery_path;

function MGallery(){
 parent::Model();

$this->gallery_path = realpath(APPPATH . '../images');
 }

function do_upload(){
 $config = array(
 'allowed_types'=>'jpg|jpeg|gif|png',
 'upload_path' => $this->gallery_path,
 'max_size' => 2000
 );

$this->load->library('upload',$config);
 $this->upload->do_upload();
 $image_data = $this->upload->data();

$config = array(
 'source_image'=> $image_data['full_path'],
 'new_image'=>$this->gallery_path . '/thumbs',
 'maintain_ration'=>true,
 'width'=>160,
 'height'=>120
 );

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

Fungsi dari model di atas adalah meng-upload images dan membuat thumbnails dari images tersebut, menggunakan library ‘images_lib’. Jangan lupa membuat direktori images pada folder gallery (root ci application), dan membuat direktori thumb di dalam folder images., dan set permission kedua direktori tersebut menjadi 777.

Yang terakhir adalah membuat view dengan nama gallery_view, isinya adalah sebagai berikut :

<!DOCTYPE HTML>
 <html lang="en-US">
 <head>
 <title>Gallery With CI</title>
 <meta charset="UTF-8">
 </head>
 <body>
 <div id="gallery">
 </div>
 <div id="upload">
 <?php
 echo form_open_multipart('gallery');
 echo form_upload('userfile');
 echo form_submit('upload','Upload');
 echo form_close();
 ?>

</div>
 </body>
 </html>

View yang sangat sederhana, hanya terdapat form untuk upload file. Sekarang cobalah untuk upload gambar dengan aplikasi yang telah dibuat.. Good Luck.,,

Untuk fungsi menampilkan data/images, kita lanjutkan pada tulisan berikutnya..