Upload dan resize image menggunakan codeigniter

Upload dan resize image menggunakan codeigniter

Hello sahabat programmer, gimana kabarnya? Semoga sehat selalu ya..!

Sebelumnya saya mohon maaf karena beberapa hari belakangan banyak kegiatan, mengerakan project dan semacamnya, jadi gak sempat posting. Tapi sekarang saya kembali lagi.

Hmm.., 

Pada kesempatan kali ini saya ingin posting tentang sesuatu yang sangat menarik nih, yaitu upload image sekaligus resize image pada saat diupload.

 

Hmm.., Mengapa kita perlu merize image saat di upload?

Banyak alasan mengapa kita perlu meresize image saat di upload, akan tetapi saya hanya akan memaparkan beberapa alasan saja. Diantaranya sebagai berikut:

 

#1. Kecapatan, website yang cepat merupakan dambaan setiap developer web diseluruh dunia. Tapi taukah anda bahwa salah satu penyebab website menjadi lambat adalah banyaknya gambar/image yang berukuran besar yang diload oleh suatu website. Sehingga membuat performa website tersebut menjadi lambat. Itulah mengapa kita perlu meng-compress image saat diupload. Beberapa website populer yang menggunakan fitur compress image ini yaitu facebook.com, instagram.com, twitter.com, dan banyak lagi lainnya.

 

#2. Dimensions, Ukuran (lebar dan tinggi) gambar yang tidak seragam akan membuat suatu halaman website menjadi berantakan dan tidak enak dilihat. Oleh sebab itu kita perlu meresize image yang diupload agar menjadi seragam dalam arti kata memiliki ukuran (lebar dan tinggi) yang sama.

 

#3 User Friendly, beragamnya user yang memiliki hak akses dalam menggunakan suatu aplikasi berbasis web. Berarti beragam juga kemungkinan ukuran gambar yang akan diupload. Nah, sebagai developer web, kita tidak mungkin terus-terusan membatasi ukuran gambar yang akan diupload oleh user, karena hal itu tentunya menyebalkan bagi mereka. Dikarenakan mereka harus memperkecil ukuran gambar yang ingin diupload menggunakan photoshop atau tools lainnya.  Oleh karena itu, kita harus membuat fitur compress image saat diupload dan langsung di resize sesuai dengan ukuran image yang dibutuhkan. Dengan begitu, berapapun ukuran image yang akan diupload tidak jadi masalah dikarenakan image akan di compress otomatis oleh sistem sesuai dengan ukuran image yang diperlukan.

 

Ok, saya rasa cukup tiga point saja penjabaran tentang mengapa kita perlu mengresize image saat di upload. Sekarang kita masuk ke proses pembuatan.

Pertama-tama tentu saja anda harus mendownload codeigniter terlebih dahulu. Hehe...,pastinya. Untuk mendownload codeigniter, silahkan download di official websitenya www.codeigniter.com.

 

Disini saya menggunakan Codeigniter 3.1.3.

Ok, Untuk proses pembuatannya silahkan ikuti langkah berikut:

 

1. Buat database dan tabel dengan mengeksekusi query berikut:

CREATE DATABASE db_upload;
USE db_upload;

CREATE TABLE tbl_galeri(
id INT PRIMARY KEY AUTO_INCREMENT,
judul VARCHAR(50),
gambar VARCHAR(40)
)ENGINE=INNODB; 

 

2. Install codeigniter

Extract codeigniter ke www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP). Kemudian rename project codeigniter anda sesuai dengan project Anda. Disini penulis memberi nama ci_resize.

Setelah installasi, buat folder assets di dalam ci_resize dan buat folder images didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

 

aplication

assets

      images

system

 

nah, folder images ini nantinya kita gunakan untuk menampung images yang di upload.

 

3. Konfigusai beberapa file berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

 

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_resize/';

 

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_upload',
	'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
);

 

4. Buat model dengan nama M_upload.php dengan coding sebagai berikut:

<?php
class M_upload extends CI_Model{

	function simpan_upload($judul,$gambar){
		$hasil=$this->db->query("INSERT INTO tbl_galeri(judul,gambar) VALUES ('$judul','$gambar')");
		return $hasil;
	}
	
}

 

5. Buat controller dengan nama Upload.php dengan kode sebagai berikut:

<?php 
class Upload extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->model('m_upload');
		$this->load->library('upload');
	} 

	function index(){
		$this->load->view('v_upload');
	}

	function upload_image(){
		$config['upload_path'] = './assets/images/'; //path folder
	    $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
	    $config['encrypt_name'] = TRUE; //Enkripsi nama yang terupload

	    $this->upload->initialize($config);
	    if(!empty($_FILES['filefoto']['name'])){

	        if ($this->upload->do_upload('filefoto')){
	            $gbr = $this->upload->data();
	            //Compress Image
	            $config['image_library']='gd2';
	            $config['source_image']='./assets/images/'.$gbr['file_name'];
	            $config['create_thumb']= FALSE;
	            $config['maintain_ratio']= FALSE;
	            $config['quality']= '50%';
	            $config['width']= 600;
	            $config['height']= 400;
	            $config['new_image']= './assets/images/'.$gbr['file_name'];
	            $this->load->library('image_lib', $config);
	            $this->image_lib->resize();

	            $gambar=$gbr['file_name'];
				$judul=$this->input->post('xjudul');
				$this->m_upload->simpan_upload($judul,$gambar);
				echo "Image berhasil diupload";
			}
	                 
	    }else{
			echo "Image yang diupload kosong";
		}
				
	}

} 

 

6. Buat view dengan nama v_upload.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Upload dan resize image</title>
</head>
<body>
	<form action="<?php echo base_url().'index.php/upload/upload_image'?>" method="post" enctype="multipart/form-data">
		<input type="text" name="xjudul" placeholder="Judul">
		<input type="file" name="filefoto">
		<button type="submit">Upload</button>
	</form>
</body>
</html>

 

7. Jalankan project dengan mengunjungi URL berikut:

http://localhost/ci_resize/index.php/upload

Masukan judul dan image kemudian klik tombol upload. Jika muncul pesan image berhasil diupload, berarti berhasil.  

 

Cek image yang diupload di folder assest/image dan bandingkan ukuran image sebelum diupload dengan yang telah diupload untuk melihat perbedaannya.

 

Sekian tutorial tentang Upload dan resize image menggunakan codeigniter. Jangan lupa share siapa tahu tutorial ini bermanfaat untuk teman Anda!

Download Source

 

Share:



Komentar (6)

Miftah Regyana, 18 June 2017 07:46 - Reply

A PHP Error was encountered

Severity: Parsing Error

Message: syntax error, unexpected ' ' (T_STRING), expecting function (T_FUNCTION)

Filename: models/ModelUpload.php

Line Number: 3

Backtrace:


// Model
<?php
class ModelUpload extends CI_Model{
 
function simpan_upload($gambar)
{
$hasil = $this->db->query("INSERT INTO home(gambar) VALUES ('$gambar')");
return $hasil;
}


}



itu kenapa ya? udah saya ulik error nya tetap disitu. Btw thx udah sharing.

M Fikri, 15 January 2018 20:45 - Reply

Coba cek form multipart nya!
udah di add belum?

Agus Setiawan, 04 August 2017 13:21 - Reply

ini kenapa yaa kok ga ada error tp gambarnya nga mau ke resize ?

Fahmi, 05 August 2017 16:01 - Reply

Download aja source nya gan!
Pelajari aja dari sana!
Saya coba bisa kok.

Oh ya thanks udah sharing.

thoriq, 15 April 2018 14:52 - Reply

mas kali untuk form uliadnya dibuat tidak wajib gmn ya?

Donald, 26 June 2018 18:33 - Reply

Keren pokok nya tutorial nya kang lanjutkan dengan bahasa dan kata2 yang mudah di mengerti kang

Leave a Comment