Pada artikel kali ini saya akan menjelaskan bagaimana cara untuk membuat upload file dengan indikator sebuah progress bar. Tutorial ini dibuat dengan menggunakan PHP Native tanpa framework namun tentu akan cukup mudah untuk menggabungkannya dengan framework apapun selama anda memahami cara kerja dari file tutorial yang saya buat ini. Selain itu program tutorial ini juga sudah menggunakan Bootstrap 3 untuk membuat tampilan yang responsive.
Tujuan menggunakan progress bar dalam suatu proses upload adalah untuk memberikan informasi kepada user seberapa lama proses upload berjalan. Hal ini tentu akan memberikan kesan yang lebih baik dibandingkan tanpa adanya progress bar. Tanpa adanya progress bar, user tidak akan mengetahui progress dari proses upload yang mereka lakukan. Tutorial yang saya berikan ini bersifat sederhana dan bisa dikembangkan sesuai dengan kebutuhan yang lebih kompleks nantinya. Berikut ini langkah-langkahnya :
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Progress Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
Yang pertama kali perlu dilakukan adalah dengan menginclude css dari bootstrap. Disini saya menggunakan sistem cdn hanya untuk kepraktisan saja, namun anda dapat mendownload css bootstrap tersebut terlebih dahulu dan meloadnya secara lokal.
<div class="container" style="margin-top:10px;">
<div class="row">
<div class="col-xs-12">
<form method="POST">
<div class="form-group">
<label for="InputFile">File input</label>
<input type="file" id="InputFile" name="file">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Upload">
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="progress">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
</div>
</div>
</div>
Kode di atas digunakan untuk menampilkan sebuah form dengan 1 input tipe file dan kemudian pada baris berikutnya ditampilkan sebuah progress bar yang masih kosong. Kode penulisan dari progress bar ini merupakan kode standar dari bootstrap 3 jadi anda tidak perlu membuatnya dari awal. Tampilan form ini sangat sederhana karena hanya saya gunakan sebagai contoh saja bagaimana cara menggunakan progress bar. Silahkan sesuaikan sendiri tampilan dan ukuran sesuai keinginan anda.
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('form').on('submit', function(event){
event.preventDefault();
var formData = new FormData($('form')[0]);
$.ajax({
xhr : function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e){
var percent = Math.round((e.loaded / e.total) * 100);
$('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');
});
return xhr;
},
type : 'POST',
url : 'upload.php',
data : formData,
processData : false,
contentType : false,
success : function(response){
$('form')[0].reset();
},
error : function(response){
console.log(response);
}
});
});
});
</script>
Langkah berikutnya adalah menambah script untuk memproses file upload tersebut. Sama seperti sebelumnya, di contoh ini saya menggunakan cdn untuk menginclude jquery dan juga file js dari bootstrap. Dan masih sama seperti penjelasan sebelumnya, anda bisa mendownload terlebih dahulu file-file tersebut dan memakainya secara lokal. Nah cara kerja dari kode di atas adalah dengan membuaat event pada saat form di submit. Pada saat form disubmit, program akan melakukan request ajax ke file upload.php. Yang perlu anda perhatikan adalah pada bagian xhr, bagian inilah yang melakukan proses untuk membuat progress bar dengan perhitungan persen.
Disini saya menggunakan jQuery, dan tentu saja anda perlu memahami penggunaan jQuery terlebih dahulu untuk memahami kode di atas. Kemudian yang perlu kita lakukan berikutnya adalah membuat proses upload file tersebut yang terletak pada file upload.php. Berikut ini isi dari file upload.php tersebut
<?php
if (!empty($_FILES["file"])) {
$file = $_FILES["file"];
$ext = pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
$parts = pathinfo($file['name']);
$name = $parts["filename"]. "." . $parts["extension"];
move_uploaded_file($file["tmp_name"], 'upload/' . $name);
}
?>
Isi dari file ini hanyalah proses upload file biasa dan saya meletakkan hasil upload tersebut di dalam folder upload. Anda bisa menyesuaikan sendiri dimanakah anda meletakkan file hasil upload tanpa harus persis dengan contoh kode yang saya gunakan. Untuk keseluruhan kode yang lengkap bisa anda download melalui link berikut : https://github.com/Ozkadon/UploadProgressBar.
Demikianlah artikel Tutorial PHP - Upload File dengan Progress Bar (Bootstrap - Responsive) ini. Semoga penjelasan-penjelasan saya dapat mudah dipahami dan selamat mencoba,
Tutorial PHP - Upload File dengan Progress Bar (Bootstrap - Responsive)
Reviewed by Donny Winarto
on
October 01, 2018
Rating:
Reviewed by Donny Winarto
on
October 01, 2018
Rating:
No comments: