Halo ! Cuma Coder kali ini akan membagikan tutorial mengenai Upload Gambar (Image) pada framework CodeIgniter 3. Tutorial ini selain membahas tentang Upload Gambar kita akan sekaligus membahas mengenai fungsi rename (mengubah nama file gambar) dan resize (merubah ukuran gambar ) setelah kira melakukan upload.
Di dalam framework CodeIgniter sendiri juga sudah disediakan library upload dan image_lib (library untuk manipulasi gambar) . Pastikan kedua library tersebut sudah ada pada folder library CodeIgniter 3. Biasanya sih sudah ada kalau kita mendownload CodeIgniter dari web resminya.
Oke langsung saja kira masuk ke Tutorial CodeIgniter 3 : Upload Image, Rename dan Resize.
Dalam tutorial kali ini kita menggunakan database driver MySQLi jadi kita set dulu database driver nya di file database.php yang berada pafa folder /application/config/ . Untuk pengaturannya bisa di sesuaikan.
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'img_db',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
Selanjutnya kita buat database dan tabelnya . Untuk tabelnya bisa dengan menjalankan script dibawah ini di comand console.
CREATE TABLE `upload_img` (
`id` int(3) NOT NULL AUTO_INCREMENT,
`namafile` varchar(35) DEFAULT NULL,
`type` varchar(10) DEFAULT NULL,
`keterangan` text,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1
2. Controller Untuk controllernya kita menggunakan satu controller yang memiliki beberapa fungsi antara lain :
- Function Index (Fungsi untuk menampilkan halaman home yang berisi file yang telah di upload)
- Function Add ( Fungsi untuk menampilkan form upload gambar)
- Function Insert ( Fungsi untuk upload gambar , rename , dan resize. Serta menyimpan ke database )
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Upload extends CI_Controller {
var $limit=10;
var $offset=10;
public function __construct() {
parent::__construct();
$this->load->model('model_upldgbr');
$this->load->helper(array('url'));
}
public function index($page=NULL,$offset='',$key=NULL)
{
$data['query'] = $this->model_upldgbr->get_allimage();
$this->load->view('home',$data);
}
public function add() {
$this->load->view('fupload');
}
public function insert(){
$this->load->library('upload');
$nmfile = "file_".time();
$config['upload_path'] = './assets/uploads/';
$config['allowed_types'] = 'gif|jpg|png|jpeg|bmp';
$config['max_size'] = '3072';
$config['max_width'] = '5000';
$config['max_height'] = '5000';
$config['file_name'] = $nmfile;
$this->upload->initialize($config);
if($_FILES['filefoto']['name'])
{
if ($this->upload->do_upload('filefoto'))
{
$gbr = $this->upload->data();
$data = array(
'namafile' =>$gbr['file_name'],
'type' =>$gbr['file_type'],
'keterangan' =>$this->input->post('textket')
);
$this->model_upldgbr->get_insert($data);
$config2['image_library'] = 'gd2';
$config2['source_image'] = $this->upload->upload_path.$this->upload->file_name;
$config2['new_image'] = './assets/hasil_resize/';
$config2['maintain_ratio'] = TRUE;
$config2['width'] = 100;
$config2['height'] = 100;
$this->load->library('image_lib',$config2);
if ( !$this->image_lib->resize()){
$this->session->set_flashdata('errors', $this->image_lib->display_errors('', ''));
}
$this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-success\" id=\"alert\">Upload gambar berhasil !!</div></div>");
redirect('upload');
}else{
$this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Gagal upload gambar !!</div></div>");
redirect('upload/add');
}
}
}
}
3. Views Dalam tutorial ini kita akan membuat 2 view . View yang pertama yang berfungsi untuk menampilkan daftar gambar yang telah di upload. View pertama kita beri nama home.php . File home,php ini akan menampilkan berupa gambar yang ada di folder /assets/hasil_resize yaitu gambar yang hasil upload yang telah di resize sebagai thumbnailnya. Untuk tampilan dan source code home.php bisa anda tiru source code dibawah ini.
<head>
<title>Upload Gambar (Image), Rename dan Resize</title>
<link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
<style>
body{
margin:20px 10%;
}
</style>
</head>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"><b> Daftar File IMage</b></div>
<div class="panel-body">
<?=$this->session->flashdata('pesan')?>
<p>
<a href="<?=base_url()?>upload/add" class="btn btn-success">Tambah</a>
</p>
<table class="table table-bordered table-striped">
<tr>
<th>Nama File</th>
<th>Tipe File</th>
<th>Gambar File</th>
<th>Keterangan</th>
</tr>
<? foreach ($query as $row)
{
?>
<tr>
<td><?=$row->namafile;?></td>
<td><?=$row->type;?></td>
<td><img src="<?=base_url()?>assets/hasil_resize/<?=$row->namafile;?>"></td>
<td><?=$row->keterangan;?></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
Tampilan view home dengan source code seperti diatas akan menampilakan seperti gambar dibawah ini.
Selanjutnya view kedua merupakan tampilan untuk form upload yang berfungsi sebagai input gambar yang akan di upload. View kedua ini kita beri nama fupload.php. Untuk source code nya seperti dibawah ini.
<head>
<title>Upload Gambar (Image), Rename dan Resize</title>
<link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
<style>
body{
margin:20px 10%;
}
</style>
</head>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading"><b>Form Upload Image</b></div>
<div class="panel-body">
<?=$this->session->flashdata('pesan')?>
<form action="<?=base_url()?>upload/insert" method="post" enctype="multipart/form-data">
<table class="table table-striped">
<tr>
<td style="width:15%;">File Foto</td>
<td>
<div class="col-sm-6">
<input type="file" name="filefoto" class="form-control">
</div>
</td>
</tr>
<tr>
<td style="width:15%;">Keterangan Foto</td>
<td>
<div class="col-sm-10">
<textarea name="textket" class="form-control"></textarea>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="btn btn-success" value="Simpan">
<button type="reset" class="btn btn-default">Batal</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
4. Modal Untuk menghubungkan kedatabase tentunya kita menggunakan modal. untuk modalnya kita beri nama model_upldgbr.php . Dalam modal ini terdapat 2 query , antara lain :
- function get_allimage ( fungsi untuk menampilkan semua data dari tabel)
- function get_insert ( fungsi untuk menyimpan data gambar ke database pada saat proses upload)
Source code model_upldgbr.php seperti dibawah ini :
<?php
class model_upldgbr extends CI_Model {
var $tabel = 'upload_img';
function __construct() {
parent::__construct();
}
function get_allimage() {
$this->db->from($this->tabel);
$query = $this->db->get();
return $query->result();
}
function get_insert($data){
$this->db->insert($this->tabel, $data);
return TRUE;
}
}
?>
Untuk contoh source code yang sudah jadi silahkan anda download source code dan database dibawah ini. Semoga tutorial ini bisa bermanfaat. Untuk pertanyaan, kritik dan saran. silahkan dituangkan di form komentar di akhir portingan ini
Download Source CodeDownload Database
