Pada kesempatan kali ini, saya akan membahas bagaimana cara membuat script PHP untuk upload file dengan progress bar. Adapun konsep dari program ini adalah sama seperti script upload file yang pada umumnya namun dilengkapi dengan sebuah progress bar yang menggunakan script HTML5 dan Javascript. Progress bar merupakan tampilan secara grafis yang menunjukkan sudah berapa persen file tersebut diupload ke server. Untuk lebih jelasnya dapat anda lihat pada gambar berikut: Show
 Pada gambar diatas, tampak bahwa ketika selama proses uploading file, progress bar (warna hijau) akan bergerak dan menampilkan ukuran file yang telah terupload hingga file sempurna terupload. Sistem hampir mirip dengan sistem yang diterapkan oleh situs sharing video, misalnya Youtube ketika usernya akan mengupload video. Penasaran bagaimana cara membuat script php seperti gambar diatas ? Berikut adalah penjelasannya. Ide pembuatan script ini sebenarnya sederhana yakni ketika proses uploading file, besar data dari file yang telah terupload ini akan dihitung berdasarkan prosentase menggunakan formula matematika. Nah, ukuran prosentase inilah yang nanti akan membuat progress bar berjalan hingga 100% atau file terupload secara sempurna. Selanjutnya nilai prosentase ini ditampilkan ke dalam bentuk progress bar menggunakan komponen yang ada di HTML5. Untuk pembuatan script upload file + progress bar ini kita menggabungkan HTML5, PHP dan AJAX. Baik, sekarang kita buat form upload nya sbb: index.html <!DOCTYPE html>
<html>
<head>
<script>
function uploadFile() {
// membaca data file yg akan diupload, dari komponen 'fileku'
var file = document.getElementById("fileku").files[0];
var formdata = new FormData();
formdata.append("datafile", file);
// proses upload via AJAX disubmit ke 'upload.php'
// selama proses upload, akan menjalankan progressHandler()
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.open("POST", "upload.php", true);
ajax.send(formdata);
}
function progressHandler(event){
// hitung prosentase
var percent = (event.loaded / event.total) * 100;
// menampilkan prosentase ke komponen id 'progressBar'
document.getElementById("progressBar").value = Math.round(percent);
// menampilkan prosentase ke komponen id 'status'
document.getElementById("status").innerHTML = Math.round(percent)+"% telah terupload";
// menampilkan file size yg tlh terupload dan totalnya ke komponen id 'total'
document.getElementById("total").innerHTML = "Telah terupload "+event.loaded+" bytes dari "+event.total;
}
</script>
</head>
<body>
<h2> HTML5 Upload File</h2>
<form id="upload_form" enctype="multipart/form-data">
<input type="file" name="datafile" id="fileku"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="total"></p>
</form>
</body>
</html>
Dalam form HTML di atas, terdapat komponen dengan tag sbb: <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> Komponen tersebut merupakan komponen progress bar yang dikenal di HTML5. Adapun komponen Apabila tombol upload diclick, maka akan menjalankan function ‘ Selanjutnya, kita buat script upload.php nya upload.php <?php
// baca nama file
$fileName = $_FILES["datafile"]["name"];
// baca file temporary upload
$fileTemp = $_FILES["datafile"]["tmp_name"];
// baca tipe file
$fileType = $_FILES["datafile"]["type"];
// baca filesize
$fileSize = $_FILES["datafile"]["size"];
// proses upload file ke folder /upload
if (move_uploaded_file($fileTemp, 'upload/'.$fileName)){
echo "Upload $fileName selesai";
}
?>
Dalam contoh script upload di atas, diasumsikan file akan diupload ke dalam folder /upload jadi pastikan sebelum Anda mencoba scriptnya, sudah dibuat folder ‘upload’ terlebih dahulu. Folder ini jadi satu dalam direktori yang sama dengan script di atas. Progress Bar Bootstrap 4 – Setelah pada tutorial bootstrap 4 sebelumnya kita belajar tentang komponen popovers pada bootstrap, Pada tutorial bootstrap 4 kali ini kita akan membahas tentang sebuah komponen lagi dari bootstrap, Yaitu komponen progress bar. Sebelum mengikuti tutorial ini, pastikan teman-teman sudah bisa menghubungkan file bootstrap, jika belum silahkan baca tutorial sebelumnya tentang cara menggunakan bootstrap 4. Progress Bar Bootstrap 4Progress bar merupakan sebuah komponen yang berguna untuk membuat gambaran kemajuan sebuah proses dari suatu kinerja. teman-teman pasti sudah tidak asing lagi dengan progress bar, karena ada banyak website-website diluar sana yang menggunakan progress bar. Salah satu contohnya teman-teman bisa lihat pada website dikialfarabi.com. contoh progress bar Pada website tersebut progress bar digunakan untuk menggambarkan suatu keahlian yang dinilai dengan persen (%). Membuat Progress Bar Dengan Bootstrap 4Pada tahap ini kita akan mencoba membuat progress bar sederhana menggunakan bootstrap 4. Yang akan kita coba buat pada tutorial ini adalah membuat progress bar sederhana, membuat text pada progress bar, dan terakhir kita akan mencoba menerapkan efek animasi pada progress bar. Jika teman-teman pernah belajar HTML 5, pasti teman-teman juga pernah belajar membuat progress bar dengan menggunakan tag <progress> .. </progress>. Tapi di sini kita tidak akan menggunakan tag <progress> .. </progress> untuk membuat progress bar, melainkan kita akan membuat progress bar dengan class yang sudah disediakan oleh bootstrap. Perhatikan contoh cara membuat progress bar berikut berikut. 1 2 3 <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> Untuk membuat progress bar dengan bootstrap, kita menggunakan 2 elemen <div> .. </div>. Kita menggunakan class .progress pada <div> yang pertama, Kemudian di dalam <div> tersebut kita buat elemen <div> lagi dengan menuliskan class .progress-bar juga. Di dalam elemen div yang menggunakan class .progress-bar terdapat beberapa atribut yang fungsinya seperti berikut.
Silahkan isi nilai pada atribut tersebut. Perhatikan contoh berikut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div>
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div> dan hasilnya seperti berikut. progress bar bootstrap 4 Seperti yang terlihat pada gambar hasil di atas. proress bar tampil sesuai dengan nilainya masing-masing. Label Text Progress BarKita juga bisa menuliskan text pada progress bar. caranya sangat mudah. kita tinggal langsung menuliskan text di dalam element <div> .. </div> yang menggunakan class .progress-bar. Contoh 1 2 3 4 5 6 7 8 9 10 11 12 13 Label Text
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><strong>80%</strong></div> </div>
<br/>
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 46%" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100"><strong>46%</strong></div> </div> Dan hasilnya seperti berikut. label text yang kita tulis pun tampil di dalam progress bar. text progress bar Mengatur Tinggi Progress BarUntuk mengatur tinggi progress bar, kita bisa langsung menerapkan inline css pada elemen <div> yang memiliki class .progress. Perhatikan contoh berikut. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Mengatur Tinggi Progress Bar <br/> <br/>
<div class="progress" <strong>style="height: 5px"</strong>> <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div> </div>
<br/>
<div class="progress" <strong>style="height: 20px"</strong>> <div class="progress-bar" role="progressbar" style="width: 46%" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100">46%</div> </div>
<br/>
<div class="progress" <strong>style="height: 50px"</strong>> <div class="progress-bar" role="progressbar" style="width: 46%" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100">46%</div> </div> Pada contoh di atas kita membuat 3 buah progress bar, progress bar yang pertama kita atur tingginya sebesar 5px, progress bar kedua 20px dan yang ketiga 50px. Kita lihat hasilnya. tinggi progress bar Oke mantap. Warna Progress BarUntuk mengubah warna progress bar, kita bisa langsung menuliskan class warna dari bootstrap pada class .progress-bar. adapun class warna yang bisa kita gunakan adalah sebagai berikut.
Contoh 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 Warna Progress Bar <br/>
<div class="progress"> <div class="progress-bar <strong>bg-primary</strong>" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>bg-danger</strong>" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>bg-warning</strong>" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>bg-info</strong>" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>bg-success</strong>" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>bg-dark</strong>" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div> Dan hasilnya. warna progress bar Efek Garis-Garis (striped) Pada Progress BarBootstrap juga menyediakan class untuk membuat efek garis-garis pada progress bar. gunakan class .progress-bar-striped beriringan dengan class .progress-bar. contohnya 1 2 3 4 5 6 7 8 9 10 11 12 Striped Progress Bar <br/>
<div class="progress"> <div class="progress-bar <strong>progress-bar-striped</strong> bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>progress-bar-striped</strong> bg-danger" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div> </div> dan hasilnya striped progress bar Animasi Garis-Garis (animated striped)Jika sudah menggunakan class .progress-bar-striped untuk memberi efek garis-garis pada progress bar, alangkah lebih keren lagi jika kita tambahkan efek animasi. Caranya sangat mudah, silahkan teman-teman tambahkan class .progress-bar-animated beriringan dengan class .progress-bar-striped. Contoh 1 2 3 4 5 6 7 8 9 10 11 12 13 Animasi Striped Progress Bar <br/> <br/>
<div class="progress"> <div class="progress-bar <strong>progress-bar-animated</strong> progress-bar-striped bg-primary" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div>
<br/>
<div class="progress"> <div class="progress-bar <strong>progress-bar-animated</strong> progress-bar-striped bg-danger" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90%</div> </div> Dan hasilnya seperti berikut. efek garis-garis yang kita buat akan diberi animasi secara otomatis, garis-garis akan seolah-olah berjalan. efek animasi progress bar Oke selesai. Sampai tahap materi tutorial tentang komponen progress bar pada bootstrap 4 sudah selesai. Silahkan teman-teman bereksperimen lebih jauh. Seluruh source code dan demo nya bisa teman-teman lihat pada link berikut. Terima kasih 🙂
DEMO Download Source Code
Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: Animasi Progress Bar Bootstrap 4, Belajar HTML Format Text Pada HTML, bootstrap progress bar animate, bootstrap progress bar loading page, box in bootstrap 4, cara membuat progress bar dengan bootstrap 4, contoh bootstrap 4, download bootstrap, download bootstrap 4, Efek Progress Bar, komponen bootstrap 4, komponen progress bar bootstrap 4, membuat progress bar, Membuat progress bar dengan bootstrap, Panduan Bootstrap 4, progress bar android, progress bar bootstrap 3, progress bar bootstrap jquery, progress bar css, progress bar html, Situs Belajar Bootstrap, situs belajar pemrograman indonesia, striped progress bar, text label progress bar, tutorial bootstrap 4 lengkap, Tutorial Lengkap Bootstrap 4 Bahasa Indonesia, warna progress bar bootstrap 4 Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYABorder Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ... Diki Alfarabi Hadi Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ... Diki Alfarabi Hadi Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ... Diki Alfarabi Hadi Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ... |
Cara menggunakan progress bar in php
Pos Terkait
Copyright © 2024 apacode Inc.
