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..

  • wow … mas dudu sekarang dah expert nih maen CI … 🙂
    btw, gimana Rails nya mas ?

    • dwijonarko

      wah ga juga, masih belajar nih, Malah situ yang kayanya masih akif di Rails. Saya sudah agak lupa 😀

  • ice

    itu maksud set permission buat apa ya mas?

    • dwijonarko

      mas nya pake windows apa linux? Kalo pake windows ya ga usah.

      Kalo pake linux, set permissions pake chmod 777 -R nama_foldernya, biar bisa upload.

  • noe

    kok aq nyoba ga jadi ya?
    setelah button upload klik, keluar error The requested URL /gallery/index.php/gallery was not found on this server.
    padahal aq uda mengikuti semua langkah2nya.
    dan mo tanya lagi, model di sini buat database ga ya? kok ga ada databasenya? terimakasih

    • dwijonarko

      Ga ada databasenya, kan ga nyimoen data. Cuma upload gambar terus di tampilin lagi.

      Bisa tau controllernya kaya gimana? Biar nanti kita cek errornya

  • saya udah rubah permission “sudo chmod -R 777 /gambarupload”
    dan upload pun sukses,
    tapi masalahny setiap saya refresh browser “localhost/web/index.php/controlgallery”
    maka file gambar akan terus bertambah.
    misal upload pertama = “test.jpg”, maka abis d refresh jadi “test1.jpg”, “test2.jpg” dst tiap d refresh

    mohon bantuuanny

    • ya emang gitu gan 😀 biar ga gitu, coba controllernya diubah.
      Jadi dua controller, index sama submit. tar kalo udah berhasil upload di redirect ke controller index lagi.

  • agus

    bang mau tanya,, itu yg d maksud nya set permission 777 apa yah???

    • Untuk set permission direktori jika anda menggunakan Linux / Unix

  • yo mas, untuk membuat galery yang dinamis di bahas dong mas, jadi link imagenya di upload ke database, nanti tinggal di panggil untuk di tampilkan…

    • nanti ya, belum ada waktu nih…

  • qaribun

    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.

    kang dudu ini maksud nya pa

    • set permission, jika pake Linux. Tidak dilakukan jika memakai windows

      thx

  • syeehab

    kang….law bkin fungsi upload gmbar mesti disesuain di file configurasi Codeigniter di direktori application/config/config.php.

  • qaribun

    kang masih ngerti

  • syeehab

    kang law folder images d smpan’a d dlm folder system bukan????

    • dir folde codeigniter

      thx

  • Salam kenal bang,

    lg belajar ci juga nih, ikutin tutorial nya kenapa ga jalan di ci 2.0 yah?
    beda apanya yah?
    agar bisa jalan di ci 2.0 yg di rubah apanya sih?

    best regard’s
    Taufik

    • coba di class nya diubah yang dulunya extends Controller jadi extends CI_Controller, extends model diubah jadi extends CI_Model

  • JPO

    newbie mau tanya..klo ingin disimpan dalam database codingnya kaya gmn ya..mohon pencerahannya..thanks

    • image di simpan di database? belum pernah coba, tapi kemungkinan scriptnya berbeda dengan yang upload, dan hampir sama dengan yang CRUD biasa

  • JPO

    bukan imagenya, tapi link imagenya..maksut saya biar filenya bisa dihapus dan diedit mas..mohon pencerahannya..

  • dwi

    saya udah coba,, kembali lagi harus ngebrowse n upload dan juga di folder images nya ga ada mas.. itu kenapa ya mas.. mohon bantuannya.. terima kasih..

  • dwi

    gambarnya kok g di foldernya jadi di direktori C..itu kenapa ya mas?

  • dwijonarko

    ditambahkan folder thumbs sama images

    untuk form multipart, adalah form yang digunakan untuk mengupload file, silakan baca di sini

    http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.2

    • rolin

      folder thums sama images di buat dimana ya? setelah folder aplication atau seblumnya ? 

      • dwijonarko

        dalam directory codeigniter nya