Dalam memproses data untuk dikirim melalui form ke server, validasi merupakan hal yang penting untuk memeriksa data yang dimasukkan oleh pengguna. Validasi disini bisa berupa file inputan tidak boleh kosong, format yang telah ditentukan, tipe file yang diperbolehkan untuk di upload, jumlah maksimum ukuran file dan sebagainya. Validasi digunakan untuk meminimalisir kesalahan inputan yang dilakukan oleh pengguna, validasi file upload yang tidak sesuai dan berbahaya. Sebenarnya Codeigniter telah menyedikan fungsi untuk validasi bidang form, akan tetapi dalam upload file validasi seperti required tidak akan bekerja.
Pembuatan sebuah sistem aplikasi fitur upload file merupakan kebutuhan yang mendasar. Contoh penggunaannya seperti upload foto profil, foto produk, bukti transaksi, file dokumen, dan sebagainya. Pada tutorial kali ini, kita akan belajar membuat form validasi upload file untuk inputan tidak boleh kosong, tipe file tertentu dan ukuran file pada framework Codeigniter.
Baca juga Tutorial CRUD Codeigniter 3 sederhana
Membuat Validasi Upload File Codeigniter 3
Strukter folder Aplikasi codeigniter 3 yang kita gunakan seperti dibawah ini. kita akan membuat sebuah controller bernama Upload.php view upload_view.php dan satu folder dengan nama uploads untuk menyimpan file-file yang berhasil diupload ke server.
Setting config.php
Buka config.php yang berada pada folder config/config.php, ganti base url dan index page seperti gambar dibawah ini.
Autoload.php
Buka folder config/autoload.php, cari libraries dan helper kemudian isikan seperti dibawah ini.
$autoload['libraries'] = array('session', 'form_validation', 'upload');
$autoload['helper'] = array('url', 'form', 'file');
Buka routes.php
Buka folder config/routes.php, Kemudian ubah default controllernya.
$route['default_controller'] = 'upload';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
Buat file .htaccess
htaccess disini digunakan untuk menghilangkan index.php pada url sehingga url akan lebih rapi.
buat file baru pada root folder uploadfile, kopikan script dibawah ini kemudian simpan dengan nama .htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Buat controller Upload.php
Buka folder controllers, Kemudian buat file baru dengan nama Upload.php. isikan kode seperti ini.
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Upload extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function index()
{
//panggil library form validasi
$this->load->library('form_validation');
//setting rules validasi pada input file name FileUpload
$this->form_validation->set_rules('FileUpload', 'File Upload', 'callback_validate_image'); // penamaan callback, calback_nama fungsi
//kondisi jika validasi terpenuhi
if ($this->form_validation->run() == TRUE) {
$config['upload_path'] = 'uploads/'; //folder tempat file file upload
$config['allowed_types'] = 'gif|jpg|png|jpeg'; // tipe file yang diperbolehkan
$this->upload->initialize($config);
if ($this->upload->do_upload('FileUpload')) {
$uploadData = $this->upload->data();
$this->session->set_flashdata('message', '<div class="alert alert-success alert-dismissible fade show" role="alert">
File berhasil diupload.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button></div>');
}
}
$this->load->view('upload_view');
}
//method validate image yang nantinya akan di panggil dalam validasi form menggunakan callback
public function validate_image()
{
$check = TRUE;
if ((!isset($_FILES['FileUpload'])) || $_FILES['FileUpload']['size'] == 0) {
$this->form_validation->set_message('validate_image', 'The {field} field is required');
$check = FALSE;
} else if (isset($_FILES['FileUpload']) && $_FILES['FileUpload']['size'] != 0) {
$allowedExts = array("gif", "jpeg", "jpg", "png", "JPG", "JPEG", "GIF", "PNG");
$allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
$extension = pathinfo($_FILES["FileUpload"]["name"], PATHINFO_EXTENSION);
$detectedType = exif_imagetype($_FILES['FileUpload']['tmp_name']);
$type = $_FILES['FileUpload']['type'];
if (!in_array($detectedType, $allowedTypes)) {
$this->form_validation->set_message('validate_image', 'Invalid Image Content!');
$check = FALSE;
}
if (filesize($_FILES['FileUpload']['tmp_name']) > 2097152) {
$this->form_validation->set_message('validate_image', 'The Image file size shoud not exceed 2MB!');
$check = FALSE;
}
if (!in_array($extension, $allowedExts)) {
$this->form_validation->set_message('validate_image', "Invalid file extension {$extension}");
$check = FALSE;
}
}
return $check;
}
}
Buat View upload_view.php
Buka folder views, Kemudian buat file baru dengan nama upload_view.php. isikan kode seperti ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 4.5.2-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style></style>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Aplikasi Upload</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= base_url('upload'); ?>">Upload File</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container pt-5">
<div class="row">
<div class="col-md-8">
<div class="mb-2">
<!-- Menampilkan flashh data (pesan saat data berhasil disimpan)-->
<?php if ($this->session->flashdata('message')) :
echo $this->session->flashdata('message');
endif; ?>
</div>
<?php
//form upload file menggunkan type form enctype form_open_multipart
$attributes = array('id' => 'FrmUploadFile', 'method' => "post");
echo form_open_multipart('', $attributes);
?>
<div class="form-group row">
<label for="Nama" class="col-sm-2 col-form-label">File Upload</label>
<div class="col-sm-10">
<input type="file" class="form-control" id="FileUpload" name="FileUpload" accept=".png,.jpg,.jpeg,.pdf">
<small>File type: gif, png, jpeg, jpg<br>Max size:2MB</small>
<small class="text-danger">
<?php echo form_error('FileUpload') ?>
</small>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-md-2">
<button type="submit" class="btn btn-primary">Upload</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Keterangan:
flashdata digunakan untuk menampilkan pesan setelah file berhasil di upload.
form_open_multipart merupakan helper form dari codeigniter untuk menangani form upload file.
Tampilan pesan error jika tipe file tidak sesuai.
