Membuat image gallery sederhana dengan Codeigniter – 2

Setelah beberapa waktu lalu kita bermain dengan fungsi upload, selanjutnya adalah untuk menampilkan data tersebut.

Wah karena masih nuibe, mohon maaf kalo masih bingung ya 😀 semoga tidak tambah bingung 😀

Sekarang Ubahlah controller gallery yang telah dibuat sebelumnya, sehingga menjadi seperti berikut :

load->model('MGallery');

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

$data['images'] = $this->MGallery->get_images();

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

Controller di atas ditambahkan baris untuk memanggil fungsi get_images setelah proses upload. Sedangkan fungsi get_images pada model Mgallery adalah sebagai berikut :

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

function do_upload(){
...
//fungsi do_upload yang sudah dibuat terdahulu
...
}

function get_images(){
$files = scandir($this->gallery_path);
$files = array_diff($files, array('.','..','thumbs'));

$images = array();

foreach ($files as $file) {
$images[] = array(
'url' => $this->gallery_path_url . $file,
'thumb_url'=>$this->gallery_path_url .'thumbs/' . $file,
);
}

return $images;
}
}

Sedangkan pada view gallery_view dimodifikasi untuk menampilkan data dari fungsi get_images :



Gallery With CI

<!--
#gallery, #upload{
border: 1px solid #ccc; margin: 10px auto; width: 600px; padding: 10px;
}
#blank_gallery{
font_family: Arial; font-size: 18px; font-weight: bold; text-align: center;
}
.thumb{
float: left; width: 160px; height: 120px; padding: 10px; margin: 10px; background-color: #ddd;
}
.thumb:hover{
outline: 1px solid #999;
}
img{
border:0;
}
#gallery:after{
content: "."; visibility:hidden; display: block; clear: both; height: 0; font-size: 0;
}
-->
<div id="gallery">
    <?php
        foreach($images as $img){
    ?>
    <div class="thumb">
    <a href=" <?php  echo $img['url']; ?> ">
    <img src=" <?php echo $img['thumb_url']; ?>" alt="" />
     </div>
    <?php
        }
    ?>
    </a>

 </div>
<div id="upload">

</div>

Sekarang cobalah aplikasi tersebut, semoga berhasil…
Jika ingin melihat versi video nya, silahkan lihat di :
http://net.tutsplus.com/tutorials/php/codeigniter-from-scratch-file-uploading-and-image-manipulation/

  • Kelik

    bos aku coba yg pertama oke, cuman pas yang kedua ada error kayak ginian
    mo tanya ini bikin foldernya yg gallery/images/thumb…sebelah mana ya boss, kesulitan nih,….

    tengkiu…

    A PHP Error was encountered

    Severity: Warning

    Message: scandir() [function.scandir]: Directory name cannot be empty

    Filename: models/mgallery.php

    Line Number: 39
    A PHP Error was encountered

    Severity: Warning

    Message: array_diff() [function.array-diff]: Argument #1 is not an array

    Filename: models/mgallery.php

    Line Number: 40
    A PHP Error was encountered

    Severity: Warning

    Message: Invalid argument supplied for foreach()

    Filename: models/mgallery.php

    Line Number: 44

    • dwijonarko

      Saya coba jawab ya Om 😀

      1. Membuat folder thumbs ada di dalam folder images. Pas tutorial pertama kan buat folder images tuh, buat nyimpen gambarnya, Nah di dalem folder itu buat lagi folder thumbs

      2. Kesalahan pada “$files = scandir($this->gallery_paths);” Coba di chek pada baris 4 sampai 10 dulu. OK!!

      • ice

        koq saya sama kayak kelik ya…error msg nya juga seperti itu…

        cek baris 4 sampe 10 keliatane ga ada yg salah..

        mohon reply na….

        TQ

        • dwijonarko

          OK, tadi saya cpba lagi berhasil 🙂 ga error.

          Kemudian saya coba hapus code “$this->gallery_path = realpath(APPPATH . '../images');” maka muncul error tersebut. Coba check baris tersebut? Oh ya sebelunya yang upload pertama sudah berhasil belum? Imagenya udah berhasil di upload?

          Apa baris tersebut udah benar? Coab saya liat code pada model nya 🙂

          Semoga berhasil

  • aryo

    A PHP Error was encountered

    Severity: Warning

    Message: scandir() [function.scandir]: Directory name cannot be empty

    Filename: models/mgallery.php

    Line Number: 38
    A PHP Error was encountered

    Severity: Warning

    Message: array_diff() [function.array-diff]: Argument #1 is not an array

    Filename: models/mgallery.php

    Line Number: 39
    A PHP Error was encountered

    Severity: Warning

    Message: Invalid argument supplied for foreach()

    Filename: models/mgallery.php

    Line Number: 43
    Gallery With CI
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: image

    Filename: views/gallery_view.php

    Line Number: 27
    “>
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: image

    Filename: views/gallery_view.php

    Line Number: 28
    ” alt=”” />
    Please Upload an Images
    ============================================

    begini keluarnya bos
    salah dimananya yah?

  • Syihab

    kang law gallery_path_url sama galler_path_url apa bedanya???

    • bedah huruf y

      thx.

  • tsuyadi26

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined index: url

    Filename: views/gallery_view.php

    Line Number: 30
    ” >
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined index: thumb_url

    Filename: views/gallery_view.php

    Line Number: 31
    ” alt=”” />

    kalo error seperti itu, slah nya dimana ya mas..???

    • thumb_url dan url adalah index array $image yang dikirimkan dari modelnya.
      undefined index, artinya index tersebut tidak ditemukan. Bisa karena arraynya yang salah atau penulisan indexnya yang salah. Perhatikan code pada model

      foreach ($files as $file) {
      $images[] = array(
      'url' => $this->gallery_path_url . $file,
      'thumb_url'=>$this->gallery_path_url .'thumbs/' . $file,
      );
      }
      

      url dan thumb_url di ambil dari array tersebut 🙂

  • tsuyadi26

    atau karena sama pake CI 1.7.2 ya mas..?

    • tidak, ini juga masih pake CI 1.7

  • A PHP Error was encountered

    Severity: Warning

    Message: scandir() [function.scandir]: Directory name cannot be empty

    Filename: models/mgallery.php

    Line Number: 36

    A PHP Error was encountered

    Severity: Warning

    Message: array_diff() [function.array-diff]: Argument #1 is not an array

    Filename: models/mgallery.php

    Line Number: 37

    A PHP Error was encountered

    Severity: Warning

    Message: Invalid argument supplied for foreach()

    Filename: models/mgallery.php

    Line Number: 40

    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: image

    Filename: views/gallery_view.php

    Line Number: 3

    “>
    A PHP Error was encountered

    Severity: Notice

    Message: Undefined variable: image

    Filename: views/gallery_view.php

    Line Number: 4

    ” alt=”” />
    Please Upload an Images
    GIMANA MAS SOLUSINYA??? MAKASIH

    • sudah buat direktorinya belum?

    • Biasanya kalo kaya gitu, direktorinya belum ada, Atau kemungkinan Anda pake windows ya??? coba tanda “/” di ganti “\”

  • udah mas, kan buat’ny di folder codeigniter..

    salahnya koq mirip2 dengn orang2 yang ats..

    diriku udah pusing, mhon bantuan..

    • sebenernya memang ada yang salah, kalo Anda teliti harusnya tahu 🙂

      Jika Anda menggunakan Windows, setting pathnya kan kebalik dengan UNIX

  • bebex

    untuk validasinya biar ketika upload yang diupload hanya file gambar saja gmn mas?
    mohon pencerahannya…terimakasih

    • kan sudah ada

      function do_upload()
      	{
      		$config['upload_path'] = './uploads/';
      		$config['allowed_types'] = 'gif|jpg|png';
      		$config['max_size']	= '100';
      		$config['max_width']  = '1024';
      		$config['max_height']  = '768';
      
      		.......
      	}
      
  • ozie

    unutk cara menghapus gambarnya gmn mas??supaya tidak hanya databasenya yang hilang, tapi file imagenya juga ilang.terimakasih

  • ozie

    mungkin bisa kasih contoh skripnya ky gmn mas,klo di implementasikan ke CI. soalnya saya masih nyubi tentang CI. terimakasih

  • Error dengan pesan :
    Message: scandir() [function.scandir]: Directory name cannot be empty
    atau
    Message: array_diff() [function.array-diff]: Argument #1 is not an array

    Solusinya :
    coba masuk ke config. php kemudian edit :
    $config[‘index_page’] = “index.php”;
    menjadi
    $config[‘index_page’] = ” “;

    Semoga berhasil.
    Thanks. 🙂

  • Jimmy

    tanya dong, kalo saya mau nampilin gambar yang di upload gmna ya ? cuma bukan di form upload nya, tapi di form laen

    begitu button submit (upload) di click gambar itu muncul di form lain,..

    tolong bantuan nya..
    thanks
    ^^

    • simpan linknya di table, kemudian panggil

  • pajar

    mantap tutor nya mas…
    mas mau tanya dong.. kalo misalkan pengen nampilin images yg dari database gmn script nya ya??

    mohon bantuannya segera mas hehe… saya udh coba utak atik tp gabisa bisa 😐

  • Deniel

    Ketika saya mencoba di localhost.. mengapa selalu muncul thumbs.db dlm tag 

    Thanks…

    • dwijonarko

      thumbs.db adalah file bawaan windows

  • Dj

    aplikasi udah jalan lancar, tapi bug nya. pas udh klik tombol upload. terus ketika page di refresh, itu bakal autoupload terus walaupun di inputannya kosong.

    jd misal saya upload 1 gambar -> klik upload -> berhasil
    kemudian saya refresh page. tiba2 muncul 1 file lg.
    kalo di refresh page, bakal muncul 1 file lg yang sama. jd total ada 3 file
    gmn pencerahannya? 🙂

    • dwijonarko

      Bukan bug sih,setiap aplikasi web apabila setelah mengirim data pakai POST kalo di refresh ya ngirim lagi.. Solusinya bisa dilakukan redirect ke halaman lain

  • kula

    kalo muncul kayak begini :

    Fatal error: Call to undefined method CI_Controller::Controller() in C:xampphtdocsgaleriapplicationcontrollersgallery.php on line 5

    gimana ya?