Monday, March 10, 2014

Upload and display gambar menggunakan database mysql dan framework codeigniter

Image merupakan salah satu komponen penting dalam design web. Menejemen upload image dalam web bisa ditangani menggunakan lokasi server sesuai path yang sudah ditentukan. Tetapi terkadang menyimpan file image dalam folder membuat sedikit ribet dalam mengolahnya. Saya mencoba menggunakan codeigniter dan mysql sebagai databasenya untuk mengolah upload file pada database. Sehingga saat pemanggilan atau ingin menampilkan image tinggal menggunakan Query seperti pengolahan data-data yang lazim diolah menggunakan database.

Codeigniter merupakan framework yang digunakan, menggunakan Codeigniter harus memahami konsep MVC. Berikut langkah pertama membuat database di MYSQL menggunakan type data blob:

1. Membuat database upload

CREATE DATABASE UPLOAD

2. Membuat table pada database upload

CREATE TABLE store ( id INT(11) NOT NULL AUTO_INCREMENT, name VARCHAR(50) NOT NULL, image BLOB NOT NULL, PRIMARY KEY (id) );

3. Setting database pada Application/database.php dengan nama database upload untuk menghubungkan dengan database.

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'upload';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;

4.  Masuk dalam Model pada codeigniter, diasumsikan konfigurasi awal pada codeigniter sudah terconfig dengan baik. Membuat file Model dengan nama m_upload.php

<?php
class m_upload extends CI_model{

function __construct  ()
{
parent::__construct();
}

function tampil_upload($k){
$query = $this->db->query("SELECT * FROM store where id='$k'");
foreach($query->result_array() as $ok){
//header('Content-type: image');
$image = $ok['image'];
}
//header("Content-type: image/*");
echo $image;
}

function simpan($image_name,$image){
$query = $this->db->query("INSERT INTO store (name,image) VALUES ('$image_name','$image')");
return $query;
}
}
?>

5. Setelah model selesai lanjut ke Controller. Membuat file Controller dengan nama upload_blob.php

<?php if(! defined('BASEPATH')) exit('No direct script access allowed');

class upload_blob extends MX_Controller{

public function __construct()
{
parent::__construct();
$this->load->model('m_upload');
}

function gambar(){
$this->load->view('upload');
}

function tampil_gambar($k){
$this->load->model('m_upload');
$this->m_upload->tampil_upload($k);
//echo "galih";
}

function simpan(){
$this->load->library('upload');
$file = $_FILES['file']['tmp_name'];
$image_name = mysql_real_escape_string($_FILES['file']['name']);
$image = mysql_real_escape_string(file_get_contents($file));
//echo $image;
$this->load->model('m_upload');
$this->m_upload->simpan($image_name,$image);
}
}

6. Setelah Controller selesai masuk ke view. Membuat file View dengan nama upload.php

<form enctype="multipart/form-data" method="post" action="<?php echo base_url(); ?>index.php/upload_blob/simpan">
File:
<input type="file" name="file" accept="image/*">
<button type="submit">Upload</button>
</form>

<img src="<?php echo base_url(); ?>index.php/upload_blob/tampil_gambar/29">


7. Proses sudah selesai tinggal mengakses alamat localhost/nama_folder_ci/index.php/upload_blob/gambar
8. Pilih gambar dan upload, setelah itu back ke localhost/nama_folder_ci/index.php/upload_blob/gambar
9. O iya silahkan ubah <img src="<?php echo base_url(); ?>index.php/upload_blob/tampil_gambar/29"> yang angka 29 sesuai dengan id gambar pada database karena id diset auto increment jadi akan terus bertambah saat ada gambar yang diupload masuk pada database.

10. Saya masih belajar dalam hal penyampaian, jadi mohon dimaafkan tulisan yang corat-coret diatas tidak jelas. Semoga kedepannya bisa lebih baik.... :)






5 comments:

  1. hasil gambar yang telah diupload masuk ke folder mna?

    ReplyDelete
  2. Maaf mas ga pernah cek blog ini jd ga tau ada koment,,, itu langsung di save di database mas fotonya... :)

    ReplyDelete
  3. masih bingung gan :3


    Mudahnya Isi Pulsa Menggunakan Aplikasi Android , Gak Ribet + Gak Capek Tinggal Pilih Klik Bayar.Selain Pulsa Juga Bisa Untuk Bayar BPJS dan PPOB Lainnya , Buruan Download Sekarang GRATIS di Play Store : https://play.google.com/store/apps/details?id=com.cendana2000.serbabayarmobile

    ReplyDelete
  4. ko aku salah ya untuk script ini => $image_name = mysql_real_escape_string($_FILES['file']['name']);

    ReplyDelete
  5. misi kalau misalnya mau nampilin gambar yang kia upload itu gmna ya caranya ?

    ReplyDelete