Technology

Membuat Galeri Foto berbasis CodeIgniter

 

   

Nah pemilik website bisnis, jika siang ini anda sedang berdiskusi dengan developer anda untuk mencari cara menambahkan galeri foto pada website anda, maka tutorial kali ini sangat pas sekali untuk solusi anda. Kali ini kita akan membahas cara menggunakan library Photo Gallery CRUD yang berbasis Framework Codeigniter. Penjelasan mengenai CRUD (Create Read Update Delete) bisa anda temukan di sini: Library CRUD pada CodeIgniter. Sedangnkan library Photo Gallery CRUD sendiri memiliki fitur-fitur yang sudah built-in seperti: Upload gambar (lebih dari 1) secara bersamaan, Otomatis membuat gambar thumbnail, Otomatis cropping gambar pada saat upload, Mengatur priority daftar gambar, Mengubah teks judul gambar. Berikut cara penggunaannya.

1. Pertama, silakan download library CRUD disini. Dan Framework Codeigniter disini

2. Setelah anda download library CRUD. Anda bisa extract pada folder Codeigniter. Berikut beberapa file dasar dalam library Photo Gallery CRUD:

application/config/grocery_crud.php
application/libraries/grocery_crud.php
application/libraries/image_moo.php
application/libraries/grocery_crud_model.php
assets/grocery_crud/..
assets/uploads/..

3. Kemudian anda bisa create table pada database atau import SQL dari file examples_database.sql.

CREATE TABLE IF NOT EXISTS `example` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(250) NOT NULL,
`url` varchar(250) DEFAULT NULL,
`priority` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=182 ;

4. Berikutnya, hubungkan dengan database yang baru anda buat pada file application/config/database.php.

$db['default']['hostname'] = 'localhost'; -> isikan dengan hostname
$db['default']['username'] = 'root'; -> isikan dengan username database
$db['default']['password'] = 'password'; -> isikan dengan password database
$db['default']['database'] = 'ci_image'; -> isikan dengan nama database

5. Sekarang anda bisa memanggil library Photo Gallery CRUD pada controllers yang anda buat dengan menambahkan baris kode:

$this->load->library('grocery_CRUD');
$this->load->library('image_CRUD');
function __construct()
{
parent::__construct();
$this->load->library('grocery_CRUD');
$this->load->library('image_CRUD');
}

6. Pada function, anda bisa menambahkan kode baris berikut.

function example()
{
$image_crud = new image_CRUD();
$image_crud->set_primary_key_field('id');
$image_crud->set_url_field('url');
$image_crud->set_title_field('title');
$image_crud->set_table('example')
->set_ordering_field('priority')
->set_image_path('assets/uploads');
$output = $image_crud->render();
$this->_example_output($output);
}

Penjelasan :

set_table : mengeset nama table pada database
set_primary_key_field : mengeset primary field pada table database
set_url_field : untuk menambahkan field pada table yang akan menyimpan url gambar
set_image_path : mengatur folder upload gambar
render : untuk merender dan memasukkanya pada variable
set_ordering_field : mengatur urutan gambar
set_title_field : nenampilkan edit nama gambar

7. Berikut Hasil output render pada halaman view.

library-photo-gallery-crud

Untuk melihat DEMO, anda dapat membuka situs saya di sini: Hamfaz.web.id. Selamat mencoba.

Referensi:

http://www.grocerycrud.com
http://codeigniter.com


Artikel Terkait

3 komentar

  • 7 July 2013 - pukul 17:14

    Bagus artikel nya thx u

  • 3 September 2013 - pukul 15:51

    mungkin di blog ini bisa menjadi tambahan referensi juga buat temen2 yang sedang memperdalam ilmu ttg Codeigniter…

  • 10 February 2014 - pukul 21:47

    Sepertinya menarik bang, bookmark dulu dah bang :)

Berikan Komentar

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