Tutorial CodeIgniter 3 : Upload Gambar (Image), Rename dan Resize dengan MySQLi + Bootstrap Full Source Code
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.
1 . Setting Dan Database
- Karena kita menggunakan Bootstrap silahkan Download Bootstrap dan letakan di folder assets
- Setting default controller menjadi upload di config/routes.php
- Karena kita menggunakan library upload dan library image_lib serta penyimpanan data kedatabase. maka kita load libray tersebut secara otomatis di config/autoload.php
- Sebaiknya kita menghilangkan index.php pada url untuk mepercantik url. Silahkan Baca Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3)
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.
Untuk controllernya kita menggunakan satu controller yang memiliki beberapa fungsi antara lain :
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.
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.
Untuk menghubungkan kedatabase tentunya kita menggunakan modal. untuk modalnya kita beri nama model_upldgbr.php . Dalam modal ini terdapat 2 query , antara lain :
$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
);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=latin1Untuk 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'); //load model model_upldgbr yang berada di folder model
$this->load->helper(array('url')); //load helper url
}
public function index($page=NULL,$offset='',$key=NULL)
{
$data['query'] = $this->model_upldgbr->get_allimage(); //query dari model
$this->load->view('home',$data); //tampilan awal ketika controller upload di akses
}
public function add() {
//view yang tampil jika fungsi add diakses pada url
$this->load->view('fupload');
}
public function insert(){
$this->load->library('upload');
$nmfile = "file_".time(); //nama file + fungsi time
$config['upload_path'] = './assets/uploads/'; //Folder untuk menyimpan hasil upload
$config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
$config['max_size'] = '3072'; //maksimum besar file 3M
$config['max_width'] = '5000'; //lebar maksimum 5000 px
$config['max_height'] = '5000'; //tinggi maksimu 5000 px
$config['file_name'] = $nmfile; //nama yang terupload nantinya
$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); //akses model untuk menyimpan ke database
//dibawah ini merupakan code untuk resize
$config2['image_library'] = 'gd2';
$config2['source_image'] = $this->upload->upload_path.$this->upload->file_name;
$config2['new_image'] = './assets/hasil_resize/'; // folder tempat menyimpan hasil resize
$config2['maintain_ratio'] = TRUE;
$config2['width'] = 100; //lebar setelah resize menjadi 100 px
$config2['height'] = 100; //lebar setelah resize menjadi 100 px
$this->load->library('image_lib',$config2);
//pesan yang muncul jika resize error dimasukkan pada session flashdata
if ( !$this->image_lib->resize()){
$this->session->set_flashdata('errors', $this->image_lib->display_errors('', ''));
}
//pesan yang muncul jika berhasil diupload pada session flashdata
$this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-success\" id=\"alert\">Upload gambar berhasil !!</div></div>");
redirect('upload'); //jika berhasil maka akan ditampilkan view upload
}else{
//pesan yang muncul jika terdapat error dimasukkan pada session flashdata
$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'); //jika gagal maka akan ditampilkan form upload
}
}
}
}
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> <!-- variabel diambil dari controller -->
<link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>
body{
margin:20px 10%;
}
</style>
</head>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<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>
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"> <!-- Bootstrap core CSS -->
<link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>
body{
margin:20px 10%;
}
</style>
</head>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<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> <!-- /panel -->
</div> <!-- /container -->
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();
}
//fungsi untuk menampilkan semua data dari tabel database
function get_allimage() {
$this->db->from($this->tabel);
$query = $this->db->get();
return $query->result();
}
//fungsi insert ke database
function get_insert($data){
$this->db->insert($this->tabel, $data);
return TRUE;
}
}
?>
