Sebuah image gallery merupakan aplikasi yang menarik untuk dikerjakan. Dengan menggunakan php biasa, image gallery tidak mudah untuk dibuat. Terutama bagian upload dan meresize gambar yang telah di upload. Dengan codeigniter pembuatan gallery menjadi lebih mudah dan
cepat. Dengan memanfaatkan library upload, resize serta beberapa helper, kita dapat membuat sebuah gallery yang menarik. Library upload codeigniter mudah untuk digunakan. Cara pemanggilannya juga sama dengan library lainnya
$this->load->library(‘upload’);
Untuk dapat menggunakan library ini kita harus mengkonfigurasi beberapa hal diantaranya dimana kita akan mengupload file tersebut, tipe dan ukuran file, dan lain-lain. Contohnya:
$config[‘upload_path’] = APPPATH . ‘uploads/’;
$config[‘allowed_types’] = ‘jpeg|jpg|gif|png’;
$config[‘max_size’] = ‘1024’;
$this->upload->initialize($config);
Setelah mensetting library upload kita tinggal memanggil fungsi do_upload untuk mengupload filefile yang terlah dimasukkan oleh user.
if ( ! $this->upload->do_upload())
{
//gagal mengupload file & error menyimpan error message dalam
//variabel erro
$error = array(‘error’ => $this->upload->display_errors());
}
else
{
//sukses mengupload file & informasi file disimpan dalam
// variabel data
$data = array(‘upload_data’ => $this->upload->data());
}
Image gallery yang akan kita buat memiliki fitur untuk mengupload file gambar, lalu merisize gambar tersebut. Setelah semua proses berhasil maka gallery akan menampilkan thumbnail dari image tersebut. Jika thumbnail tersebut di klik maka barulah gambar yang sebenarnya muncul
dalam bentuk popup.
Adapun langkah-langkah yang dilakukan untuk membuat image galerry adalah:
- Membuat folder upload_image dan thumb di root aplikasi anda dan jangan lupa untuk mengubah permisi dari folder tersebut sehingga bisa di tulis oleh php.
- Mengubah settingan Codeigniter. Settingan yang harus di ubah adalah $config[‘base_url’] di application/config/config.php, lalu sesuaikan dengan aplikasi.
- Membuat controller gallery. Controller ini akan berisi fungsi untuk mengupload dan meresize
gambar secara otomatis. Perhatikan controller gallery.php berikut
1. <?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
2.
3. class Gallery extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. }
9.
10. function index()
11. {
12. $config[‘upload_path’] = ‘./upload_image/’;
13. $config[‘allowed_types’]= ‘gif|jpg|png’;
14. $config[‘max_size’] = ‘1000’;
15. $config[‘max_width’] = ‘2024’;
16. $config[‘max_height’] = ‘1468’;
17.
18. $this->load->library(‘upload’, $config);
19. $this->load->library(‘template’);
20. $this->load->model(‘gallery_model’);
21. $this->load->helper(array(‘form’,’url’));
22. $data[‘message’]=”;
23. if ( ! $this->upload->do_upload())
24. { if (isset($_POST[‘submit’]))
25. $data[‘message’] = $this->upload->display_errors();
26. }
27. else
28. {
29. $data [‘upload_data’] = $this->upload->data();
30. $data[‘message’] = ‘Anda telah sukses mengupload gambar !!’;
31.
32. $config_resize = array(
33. ‘source_image’ => $data[‘upload_data’][‘full_path’],
34. ‘new_image’ => ‘./thumb/’,
35. ‘maintain_ration’ => true,
36. ‘width’ => 160,
37. ‘height’ => 120
38. );
39.
40. $this->load->library(‘image_lib’, $config_resize);
41. if ( ! $this->image_lib->resize())
42. {
43. $data[‘message’] = $this->image_lib->display_errors();
44. }
45. }
46.
47. $data[‘images’] = $this->gallery_model
48. ->fetch_image(FCPATH.’upload_image’);
49. $this->template->display(‘gallery’,$data);
50. ;
51. }
52. }
53.
54. /* End of file Gallery.php */
55. /* Location: ./application/controllers/Gallery.php */
Perhatikan baris 18-21, disana kita meload semua library dan helper yang dibutuhkan. Khusus untuk library upload kita menggunakan konfigurasi pada saat pemanggilan library $this->load->library(‘upload’, $config); Perhatikan parameter kedua (variabel $config). Variable tersebut berisi settingan dimana file tersebut akan diupload, apa saja file yang bisa diupload, size file yang boleh di upload dan lain-lain.
Pada baris 23, kita memanggil fungsi untuk mengupload jika image sukses diupload maka kita akan melakukan proses resize gambar (baris 32-44). Untuk meresize image kita juga perlu memberikan parameter khusus pada saat loading library – $this->load->library(‘image_lib’, $config_resize); pada konfigurasi itulah kita menentukan ukuran thumbnail yang akan dibuat beserta path thumbnail
- Membuat model gallery. Model ini hanya memiliki tugas yang sangat sederhana yaitu menampilkan file apa aja yang berada di sebuah folder. Untuk mempermudah maka kita menggunakan helper dari file untuk mendapatkan list nama dile dari folder tertentu
1. <?php
2. class Gallery_model extends CI_Model{
3. function __construct()
4. {
5. parent::__construct();
6. }
7.
8. function fetch_image($path)
9. {
10. $this->load->helper(‘file’);
11. return get_filenames($path);
12. }
13. }
Perhatikan baris 10 dan 11 baris tersbut akan mengembalikan daftar nama file yang berada di sebuah folder
- Membuat view gallery. View akan menampilkan dua komponen utama yaitu daftar gambar dan form yang akan digunakan untuk mengupload image.
1. <?php echo $message; ?>
2. <div id=”gallery”>
3. <?php
4. $atts = array(
5. ‘width’ => ‘800’,
6. ‘height’ => ‘600’,
7. ‘scrollbars’ => ‘yes’,
8. ‘status’ => ‘yes’,
9. ‘resizable’ => ‘yes’,
10. ‘screenx’ => ‘0’,
11. ‘screeny’ => ‘0’
12. );
13.
14.
15. foreach($images as $image):
16. ?>
17.
18. <div class=”thumb”>
19. <a href=”<?php echo base_url().’upload_image/’.$image; ?>”>
20. <?php echo anchor_popup(base_url().’upload_image/’.$image
21. , ‘<img src=”‘.base_url().’thumb/’.$image.'” alt=”” />’, $atts);
22. ?>
23. </a></div>
24. <?php
25. endforeach;
26. ?>
27. </div>
28. <div id=”upload”> Silakan Memilih file yang akan di upload:
29. <?php
30. echo form_open_multipart(‘gallery’);
31. echo form_upload(‘userfile’);
32. echo form_submit(‘upload’,’Upload’);
33. echo form_close();
34. ?>
35. </div>
Perhatikan baris ke empat. Disana kita men-setting anchor_popup (link popup) yang akan digunakan untuk menampilkan gambar secara detail (versi asli yang diupload). Pada baris 29-34 adalah bagian yang digunakan untuk mengupload form gambar tersebut. Jika semua installasi yang telah anda lakukan benar maka anda akan mendapatkan tampilan seperti berikut ini.
Untuk yang lebih advancenya anda dapat menggabungkan image berikut ini dengan menggunakan script gallery javascript lainnya atau mengkombinasikannya menggunakan database
Sumber : Buku Framework CodeIgniter
Andra Wisata's Blog 
Leave a comment