Artikel kali ini masih berkaitan dengan artikel yang pernah saya tulis sebelumnya berkaitan dengan upload gambar. Sebelumnya saya sudah membuat artikel "Tutorial Singkat Membuat Upload Gambar Dengan Codeigniter" yang prosesnya setelah memilih gambar kita baru menekan tombol upload dan kemudian barulah gambar disimpan sehingga tidak diperlukan proses ajax.
Baca Juga :
Tutorial Singkat Membuat Upload Gambar Dengan Codeigniter
Perbedaan dalam artikel ini yang berjudul "Cara Membuat Button Upload Gambar langsung Codeigniter" yaitu terletak pada alur proses upload gambarnya. Proses yang dibuat nantinya user ketika menekan tombol "update" maka akan muncul dialog pilihan gambar dan ketika sudah dipilih sistem akan langsung menyimpan gambar dan merubah gambar yang lama menjadi gambar yang baru. Untuk Lebih jelasnya kalian bisa lihat contohnya pada gambar di atas.
Langsung saja sama seperti artikel sebelumnya kita masih menggunakan file-file yang sama speerti:
1. Framework Codeigniter
2. Framework css bootstrap (opsional untuk tampilan)
3. Library Jquery
4. dan terakhir siapkan satu buah database untuk menyimpan data gambarnya.
Database : db_gambar
Tabel : data_gambar(id_gambar,nama_gambar)
* Semua source dalam artikel ini dapat kalian download pada bagian akhir artikel di bawah.
Silahkan buat file untuk Controler, Model dan View serta copy script di bawah ini :
Buat File controler dengan nama dashboard.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Dashboard extends CI_Controller{
function __construct()
{
parent::__construct();
$this->load->model('m_dashboard');
}
function index() {
$data_gambar = $this->m_dashboard->getDataGambar();
$nama_gambar='';
$id_gambar='';
foreach ($data_gambar as $value) {
$id_gambar = $value['id_gambar'];
$nama_gambar = $value['nama_gambar'];
}
$data['nama_gambar']=$nama_gambar;
$data['id_gambar'] = $id_gambar;
$this->load->view('v_dashboard',$data);
}
function go_upload_gambar() {
//load library upload
$this->load->library('upload');
$id_gambar = $this->input->post('id_gambar',true);
//buat random nama gambar
$nmfile = "photo_".time().'_'.rand(1000,9999);
//path upload gambar
$config['upload_path'] = './files/';
//tipe file yang dibolehkan untuk diupload
$config['allowed_types'] = 'gif|jpg|png|jpeg|bmp';
//maksimal ukuran file yang diupload
$config['max_size'] = '2000';
//maksimal panjang gambar
$config['max_width'] = '6000';
//maksimal lebar/tinggi gambar
$config['max_height'] = '6000';
//nama gambar baru
$config['file_name'] = $nmfile;
$this->upload->initialize($config);
$pesan = '';
$data_json=array();
if($_FILES['file_gambar']['name'])
{
if ($this->upload->do_upload('file_gambar'))
{
$gbr = $this->upload->data();
$nama_gambar = $gbr['file_name'];
$data_to_upload=array(
'nama_gambar' => $nama_gambar
);
if($id_gambar=='') {
//gambar_baru
$data_gambar = $this->m_dashboard->insertGambar($data_to_upload);
$id_gambar = $data_gambar;
} else {
//update_gambar
$nama_gambar_prev =$this->input->post('nama_gambar_prev',true);
//hapus gambar sebelumnya
$target_delete='files/'.$nama_gambar_prev;
if(file_exists($target_delete)) {
unlink($target_delete);
}
$this->m_dashboard->updateGambar($id_gambar,$data_to_upload);
}
$pesan = 'Sukses Upload Gambar';
$data_json['pesan']=$pesan;
$data_json['id_gambar']=$id_gambar;
$data_json['nama_gambar']=$nama_gambar;
$data_json['st']=1;
} else {
$error = array('error' => $this->upload->display_errors());
$pesan='';
foreach ($error as $key => $value) {
$pesan=$pesan.','.$value;
}
$data_json['pesan']=$pesan;
$data_json['st']=0;
}
} else {
$pesan = 'Pilih Gambar!';
$data_json['pesan']=$pesan;
$data_json['st']=0;
}
echo json_encode($data_json);
}
}
?>
Kemudian file Model dengan nama m_dashboard.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class M_dashboard extends CI_Model
{
function __construct()
{
parent::__construct();
}
function getDataGambar() {
return $this->db->get('data_gambar')->result_array();
}
function insertGambar($data_to_upload){
$this->db->insert('data_gambar',$data_to_upload);
return $this->db->insert_id();
}
function updateGambar($id_gambar,$data_to_upload){
$this->db->where('id_gambar',$id_gambar)->update('data_gambar',$data_to_upload);
}
}
?>
Terakhir buat file View dengan nama v_dashboard.php
Script HTML
Script Javascript
$(document).ready(function(){
$('#file_gambar').change(function(){
if($(this).val()!='') {
$('#btn_upload').click();
}
});
$('#f_gambar').submit(function(evt){
evt.preventDefault();
$('#btn_gambar').button('loading');
var formData = new FormData(this);
$.ajax({
type : 'POST',
url : $(this).attr('action'),
data : formData,
cache : false,
contentType : false,
processData : false,
success:function(data) {
if(data.st==0) {
alert(data.pesan);
$('#btn_gambar').button('reset');
}
if(data.st==1) {
alert(data.pesan);
$('#img_gambar').removeAttr('src');
$('#img_gambar').attr("src","<?=base_url()?>files/"+data.nama_gambar);
$('#btn_gambar').button('reset');
$('#id_gambar').val(data.id_gambar);
$('#nama_gambar_prev').val(data.nama_gambar);
}
$('#file_gambar').val('');
},dataType :'json'
});
});
});
Simpan semua file file di atas, kemudian silahkan jalankan pada browser kesayangan kalian.
Jika kalian membutuhkan source dari artikel ini, kalian dapat mendownloadnya pada link di bawah ini.
No comments:
Post a Comment