Tidak jarang ketika kita develop sebuah website, salah satu requirment yang biasa nya ada (terutama website CMS) adalah fungsi untuk upload image atau foto. Pada artikel ini, gua akan mencoba berbagi ke kalian untuk membuat fungsi upload image dengan menggunakan Codeigniter 3.
Proses upload image yang gua terapkan pada artikel ini, memanfaatkan library upload bawaan dari Codeigniter. Mungkin, yang sedikit membedakan adalah gua mencoba menambahkan validasi input file berupa maksimal filesize upload dengan menggunakan jquery validation dan jquery validation additional methods. Untuk artikel mengenai implementasi dasar jquery validation, bisa di klik link ini ya Cara Menggunakan Jquery Validation dengan Bootstrap 4
Selain itu, gua juga mencoba menggunakan library GD versi 2 (GD2) untuk melakukan proses resize atau kompresi filesize image yang diupload. Untuk dapat menggunakan library GD2 ini, pastikan konfigurasi php kalian sudah me-load extension GD2 melalui file php.ini. Kalian dapat memastikannya dengan cara memanggil fungsi phpinfo() melalui projek Codeigniter kalian dan cek apakah library GD versi 2 sudah di load atau belum.
Oke, langsung aja ke tahap kode program. Untuk penjelasan kodingannya, gua mencoba selipkan di tiap baris potongan kode program ya..
1. Buat Table pada Database
Untuk database, gua mencoba membuat table dengan nama "images" disalah satu database di localhost gua. Yang mana, table tersebut memiliki field id, object_name, caption, source, path, dan added_at. Berikut kode SQL nya
CREATE TABLE `images` (
`id` int(11) NOT NULL,
`object_name` varchar(150) NOT NULL,
`caption` varchar(200) NOT NULL,
`source` varchar(75) DEFAULT NULL,
`path` varchar(255) NOT NULL,
`added_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
Untuk field pada table ini hanya contoh dan tidak bersifat baku. Silahkan sesuaikan kembali dengan kebutuhannya.
2. Membuat file View
Selanjutnya, yang gua lakukan adalah membuat file view untuk menampilkan form upload image. Pada file ini juga gua meletakkan script jquery validation untuk memvalidasi form input. Untuk validasi file foto, gua mencoba membatasi untuk ukuran file yang dapat di upload, tidak lebih dari 1 MB. Untuk implementasinya, silahkan nanti sesuaikan dengan kebutuhan ya..
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Upload dan Resize File Image</title>
<!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- load script package jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load jquery validation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load jquery additional methods -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js" integrity="sha512-6S5LYNn3ZJCIm0f9L6BCerqFlQ4f5MwNKq+EthDXabtaJvg3TuFLhpno9pcm+5Ynm6jdA9xfpQoMz2fcjVMk9g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load script package bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="box box-info">
<div class="box-body pad">
<!-- start cek flashdata dan tampilkan alert sesuai value session flashdata -->
<?php if($this->session->flashdata('message_name') == 'success'){ ?>
<div class="alert alert-success" role="alert">
Proses upload berhasil
</div>
<?php }else if($this->session->flashdata('message_name') == 'failed'){ ?>
<div class="alert alert-danger" role="alert">
Proses upload gagal
</div>
<?php }?>
<!-- end cek flashdata dan tampilkan alert sesuai value session flashdata -->
<!-- start tag form untuk input data -->
<form id="form" action="" method="POST" enctype='multipart/form-data'>
<!-- Field Row -->
<div class="row">
<!-- Field Left -->
<div class="col-md-12">
<div class="form-group">
<label for="object_name">Object Name</label>
<input type="text" name="object_name" class="form-control" id="object_name" placeholder="Object Name (Tidak lebih 100 karakter)" value="">
</div>
<div class="form-group">
<label for="caption">Caption</label>
<input type="text" name="caption" class="form-control" id="caption" placeholder="Photo Caption (Tidak lebih 150 karakter)" value="">
</div>
<div class="form-group">
<label for="source">Photo Source</label>
<input type="text" name="source" class="form-control" id="source" placeholder="Photo Source (jika photo diambil dari sumber lain)" value="">
</div>
<div class="form-group">
<label>File Upload</label>
<div class="custom-file mb-3">
<div class="custom-file">
<input type="file" name="image_files" class="custom-file-input" id="image_files">
<label class="custom-file-label" for="image_files">Choose file</label>
</div>
</div>
</div>
</div>
<!-- End Field Left -->
</div>
<!-- End Field Row -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- end tag form untuk input data -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready( function() {
//fungsi untuk menampilkan filename di tag input file
//khusus yang menggunakan class cstom-file di bootstrap 4.6
$('#image_files').on('change',function(){
//get the file name
var fileName = $(this).val();
fileName = fileName.replace("C:\\fakepath\\", "");
//replace the "Choose a file" label
$('.custom-file-label').html(fileName);
})
//membuat method jquery validation baru, yaitu "filesize"
//yang berfungsi untuk cek ukuran file tidak melebihi batas maksimal filesize yang diperbolehkan
// sebelum upload
$.validator.addMethod('filesize', function (value, element, param) {
return this.optional(element) || (element.files[0].size <= param * 1000000)
}, 'Ukuran file harus kurang dari {0} MB');
var $form = $('#form');
$form.validate({
//deklarasi rules jquery validation
rules: {
object_name: {
required : true,
},
caption: {
required : true,
},
image_files: {
required: true,
extension: "jpg,jpeg,png",
filesize: 1
},
},
//deklarasi message atau alert untuk setiap rules jquery validation
messages:{
object_name : {
required : "Object Name wajib diisi",
},
caption : {
required : "Caption wajib diisi",
},
image_files : {
required : "Silahkan upload foto terlebih dahulu",
extension : "Tipe file harus berupa JPG, JPEG, atau PNG"
}
},
//deklarasi tipe tag untuk menempatkan pesan error
errorElement: "div",
errorPlacement: function ( error, element ) {
// Menyisipkan class invalid-feedback di element error
error.addClass( "invalid-feedback" );
if ( element.prop( "type" ) === "checkbox" ) {
error.insertAfter( element.parent( "label" ) );
} else {
error.insertAfter( element );
}
},
//menyisipkan class is-invalid pada element form yang valuenya error
highlight: function ( element, errorClass, validClass ) {
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
},
//menyisipkan class is-valid pada element form yang valuenya sudah benar
unhighlight: function (element, errorClass, validClass) {
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
},
//proses submit form jika form sudah tervalidasi
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</body>
</html>
3. Membuat File Controller
Selanjutnya adalah membuat file class controller. Gua menamakan file class ini dengan nama "Files_upload". Kemudian, gua membuat method image() untuk menampilkan form upload serta untuk melakukan proses upload dan resize image.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Files_upload extends CI_Controller {
public function image()
{
if($this->input->post())
{
//path lokasi simpan file upload
$directory = "./assets/img/gallery";
//deklarasi filename file upload supaya unik
$file_name = time().rand(pow(10, 2), pow(10, 3)-1);
//fungsi untuk membuat directory jika directory belum dibuat
if (!is_dir($directory)) {
mkdir($directory, 0775, TRUE);
}
//configurasi library upload
//set path tempat simpan file upload
$config['upload_path']=$directory;
//tipe file yang diperbolehkan untuk diupload
$config['allowed_types']='gif|jpg|png|jpeg';
$config['encrypt_name'] = FALSE;
//file name photo, jika diset maka filename foto diubah sesuai dengan apa yang dideklarasikan
$config['file_name'] = $file_name;
//load library upload beserta config nya
$this->load->library('upload',$config);
//proses upload beserta fungsi untuk resize foto dengan GD2
if($this->upload->do_upload("image_files")){
$data = array('upload_data' => $this->upload->data());
//configurasi dan load image library yang ingin digunakan, yaitu GD2
//pastikan module GD2 sudah di load pada config php.ini kalian.
// Untuk memastikannya, dapat di cek melalui phpinfo()
$config['image_library'] = 'gd2';
//config untuk menentukan lokasi file yang ingin di resize
$config['source_image'] = $directory.'/'.$data['upload_data']['file_name'];
$config['create_thumb'] = FALSE;
$config['maintain_ratio'] = FALSE;
//set kualitas foto yang diinginkan. 100% merepresentasikan kualitas foto yang diupload saat ini
//jika ingin mengurangi file size foto, kurangi kualitas foto dari 100%.
//tapi, jangan berlebihan yaa. Karna dapat menyebabkan foto yang diupload menjadi blur (sesuaikan dengan kebutuhan hehe).
$config['quality'] = '80%';
//deklarasikan config width dan height jika ingin mengubah ukuran foto
// $config['width'] = 370;
// $config['height'] = 270;
// deklarasi nama file image setelah di resize.
// Jika ingin mereplace file foto sebelum diresize, samakan config ini dengan config['source_image']
$config['new_image'] = $directory.'/'.$data['upload_data']['file_name'];
// fungsi untuk load library dan proses resize file foto
$this->load->library('image_lib', $config);
$this->image_lib->resize();
//get image file name untuk di save ke db
$image= $data['upload_data']['file_name'];
$this->load->model('files_model');
//proses simpan data file image ke db
$result= $this->files_model->add($image);
//cek apakah proses upload dan simpan data berhasil, lalu set flashdata
if($result){
$this->session->set_flashdata('message_name', 'success');
}else{
$this->session->set_flashdata('message_name', 'failed');
}
// redirect lagi ke form upload
redirect("files_upload/image");
}
else
{
$this->session->set_flashdata('message_name', 'failed');
// redirect lagi ke form upload
redirect("files_upload/image");
}
}
//jika tidak ada post data, load view form
$this->load->view('files_management/form_upload');
}
}
4. Membuat File Model
Terakhir, yaitu membuat file class model. Gua memberikan nama pada file ini dengan nama "Files_model". Kemudian, gua membuat method add() untuk proses insert data ke database. Berikut kode programnya
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Files_model extends CI_Model{
private $table_img = "images";
function __construct(){
parent::__construct();
$this->db = $this->load->database('default',TRUE);
}
public function add($image_path="")
{
//buat array data yang ingin disimpan ke DB
$data = array(
'object_name' => $this->input->post('object_name'),
'caption' => $this->input->post('caption'),
'source' => $this->input->post('source'),
'path' => $image_path,
'added_at' => date('Y-m-d H:i:s')
);
//proses simpan data ke DB
$res = $this->db->insert($this->table_img,$data);
return $res;
}
}
Berikut beberapa capture hasil implementasinya:
oke, sekian artikel dari gua mengenai cara upload dan resize image dengan menggunakan Codeigniter dan GD2. Semoga bermanfaat ya..
