Dalam aplikasi web modern, memberikan umpan balik visual kepada pengguna sangat penting, terutama saat mereka menunggu proses yang sedang berjalan. Widget Progress Bar JQuery UI adalah alat yang sempurna untuk tujuan ini. Ini adalah cara yang sederhana dan elegan untuk menampilkan kemajuan tugas, seperti mengunggah file, memproses data, atau memuat konten.
Widget Progress Bar mengubah elemen HTML menjadi bilah kemajuan yang dapat diperbarui secara dinamis menggunakan JavaScript. Ini membantu mengurangi kebingungan dan frustrasi pengguna saat menunggu.
Langkah 1: Mempersiapkan Struktur HTML
Widget Progress Bar bekerja dengan mengubah elemen wadah, biasanya <div>. Cukup tempatkan <div> kosong di dalam dokumen HTML Anda, dan JQuery UI akan mengisinya dengan bilah kemajuan.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JQuery UI #8: Progress Bar</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo-container { margin-top: 20px; }
</style>
</head>
<body>
<h1>Demonstrasi Progress Bar JQuery UI</h1>
<div class="demo-container">
<p>Proses Sedang Berjalan: <span id="progress-status">0%</span></p>
<div id="myProgressBar"></div>
<button id="startButton">Mulai Proses</button>
</div>
<script>
$( function() {
// Kode JQuery UI akan ditempatkan di sini
});
</script>
</body>
</html>
Di sini, kita memiliki <div> dengan ID myProgressBar yang akan kita ubah menjadi bilah kemajuan. Kita juga menambahkan tombol untuk memulai proses dan elemen <p> untuk menampilkan status dalam teks.
Langkah 2: Mengaktifkan Widget Progress Bar
Untuk mengaktifkan progress bar, panggil metode .progressbar() pada elemen <div> yang Anda pilih. Anda dapat mengatur nilai awal dengan opsi value.
$( function() {
var myProgressBar = $( "#myProgressBar" ).progressbar({
value: 0 // Nilai awal
});
});
Dengan kode ini, Anda akan melihat bilah kemajuan statis dengan nilai 0%.
Langkah 3: Mengubah Nilai Secara Dinamis
Untuk membuat bilah kemajuan menjadi dinamis, Anda perlu mengubah nilainya secara berkala. Ini biasanya dilakukan dalam fungsi atau event handler yang disesuaikan dengan proses Anda (misalnya, saat data dari server sedang dimuat).
Dalam contoh ini, kita akan membuat simulasi proses yang berjalan secara bertahap menggunakan fungsi setInterval(). Kita juga akan memperbarui teks status.
$( function() {
var myProgressBar = $( "#myProgressBar" ).progressbar({
value: 0
});
var progressStatus = $( "#progress-status" );
$( "#startButton" ).on( "click", function() {
var progressValue = 0;
var progressInterval = setInterval( function() {
if ( progressValue >= 100 ) {
clearInterval( progressInterval );
return;
}
progressValue += 5; // Tambah 5% setiap interval
myProgressBar.progressbar( "value", progressValue );
progressStatus.text( progressValue + "%" );
}, 200 ); // Update setiap 200 milidetik
});
});
Dalam kode di atas, kita:
- Mendapatkan referensi ke bilah kemajuan dan elemen status teks.
- Menggunakan event
clickpada tombol untuk memulai proses. - Menggunakan setInterval() untuk secara berkala:
a. Meningkatkan nilai progressValue.
b. Memperbarui nilai bilah kemajuan menggunakan metode .progressbar(“value”, …)
c. Memperbarui teks status.
- Saat kemajuan mencapai 100%, kita menghentikan interval menggunakan
clearInterval().
Langkah 4: Mendengarkan Event Progress Bar
Widget Progress Bar memiliki event yang bisa Anda gunakan untuk menjalankan kode saat sesuatu terjadi. Event yang paling umum adalah change dan complete.
change: Dipicu setiap kali nilai bilah kemajuan berubah.complete: Dipicu saat bilah kemajuan mencapai nilai maksimum (100).
$( function() {
var myProgressBar = $( "#myProgressBar" ).progressbar({
value: 0,
change: function( event, ui ) {
// Kode ini akan berjalan setiap kali nilai berubah
console.log( "Nilai bilah kemajuan berubah." );
},
complete: function( event, ui ) {
// Kode ini akan berjalan saat bilah kemajuan mencapai 100%
alert( "Proses Selesai!" );
}
});
var progressStatus = $( "#progress-status" );
// ... (kode dari langkah 3 untuk menjalankan progress)
});
Dengan event complete, Anda dapat dengan mudah menampilkan pesan “Selesai”, mengarahkan pengguna ke halaman lain, atau memicu tindakan lain setelah proses selesai sepenuhnya.
Kesimpulan
Widget Progress Bar JQuery UI adalah komponen yang sederhana namun sangat efektif untuk meningkatkan pengalaman pengguna. Dengan memberikan umpan balik visual yang jelas tentang status proses, Anda dapat membuat aplikasi Anda terasa lebih responsif dan profesional. Integrasi yang mudah dengan JavaScript memungkinkan Anda untuk mengikatnya dengan hampir semua proses asinkron dalam aplikasi web Anda.
