Membuat Progressbar Dinamis dengan Ajax

Hallo semuanya, penggunaan media simulasi pengganti angka pada saat ini sangat penting untuk dikuasi, dengan tujuan melakukan demonstrasi tentang perkembangan atau perubahan suatu data yang sudah kita miliki. Ada banyak sekali macam-macam media simulasi data yang dapat kita gunakan misalnya untuk melakukan presentasi kepada client, atasan dalam perusahaan atau rekan kerja lainnya. Media simulasi tersebut bias berupa pie chart, diagram batang, diagram garis, progressbar, menggunakan video atau media lainnya yang bias mewakili data yang berupa angka menjadi media simulasi untuk memudahkan membaca data yang tersedia.

Dengan menggunakan media simulasi seperti diagram, chart, atau progressbar, contohnya, missal kita memiliki sebuah website dengan fitur penjualan, maka dengan menggunakan diagram, chart, atau progressbar, kita dapat memantau siklus penjualan dengan mudah agar dapat mengambil keputusan yang bermanfaat untuk tahap selanjutnya dalam berbisnis. Dan bisa juga kalian gunakan untuk mendemonstrasikan kemampuan kalian pada website portfolio milik kalian pribadi.

Nahh, kesempatan kali ini saya akan memberikan sebuah trik tentang bagaimana cara untuk membuat progressbar dengan menggunakan data dinamis yang diambil dari database. Pada beberapa website pasti kalian pernah melihat sebuah progressbar dimana terisi nilai berupa persentase. Kali ini akan saya ajarkan dengan mudah bagaimana cara membuat progressbar dengan data dinamis menggunakan ajax

Baiklah teman-teman, kali ini kitra akan membuat progressbar biasa menggunakan JQueryUI.

Pertama kita hubungkan javascript dan CSS dari JQueryUI

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Lalu kita buat div dengan id #progressbar sebagai indikatornya.

<div id="progressbar"></div>

Jika sudah, kita akan membuat fungsi javascript seperti berikut untuk meminta request pada data berupa json.

$(function() {
    $.ajax({ dataType:"json",
        url: "https://gist.githubusercontent.com/quannt/d60905a978058de2312b/raw/2d4ab1df422dc19b7214d10ffd5e80795e2aa0a5/gistfile1.txt",
            success: function(data){
                $( "#progressbar" ).progressbar({
                    value: data.progressbar
                });
            }
    });
});

Pada property url diatas, bisa kalian isikan dengan link menuju ke file JSON . Untuk demo lebih jelasnya bisa kalian lihat pada demo di bawah ini

Baiklah teman-teman demikian artikel kali ini yang membahas tentang bagaimana cara membuat progress bar dinamis dengan ajax. Semoga dapat bermanfaat. Terima kasih.