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.

[php]
$config[‘base_url’] = "http://localhost/gallery/";
[/php]

Sedangkan pada autoload.php saya melakukan penyesuaian sebagai berikut :

[php]$autoload[‘helper’] = array(‘url’,’form’,’file’);[/php]


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

[php]
<?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’);
}
}

[/php]

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]<?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();
}
}[/php]

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 :

[php]<!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>[/php]

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

30 thoughts on “Membuat image gallery sederhana dengan Codeigniter – 1

    1. dwijonarko

      wah ga juga, masih belajar nih, Malah situ yang kayanya masih akif di Rails. Saya sudah agak lupa πŸ˜€

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

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

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

      Reply
  2. andi hakim

    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

    Reply
    1. dudu Post author

      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.

      Reply
  3. gama

    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…

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

    Reply
  5. syeehab

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

    Reply
  6. Taufik

    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

    Reply
    1. dudu Post author

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

      Reply
    1. dudu Post author

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

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.