Membuat progress bar dengan php

Progress Bar dengan PHP

Table of Contents Show

Progress Bar dengan PHP
Membuat Progress Bar
Tambahkan Label

Jika Anda memiliki script PHP berjalan lama yang mengeksekusi banyak proses, Anda mungkin perlu untuk menginformasikan pengguna tentang kemajuan proses ketika script masih berjalan dan belum selesai. Menggunakan progress bar dapat menjadi pilihan terbaik. Kita bisa menggabungkan fungsi PHP flush(), Javascript, dan CSS juga untuk membuat progress bar yang bagus.

Berikut adalah teknik pembuatan progress bar.

Buat setidaknya satu elemen div dengan lebar tertentu dalam dokumen HTML Anda untuk menampilkan progress bar.
Memperkirakan persentase kemajuan dalam script PHP Anda. Nomor ini akan digunakan untuk menentukan panjang progress bar.
"Echo" Javascript untuk memperbarui isi dari elemen div di atas dengan div bahwa persentase lebar sama seperti kemajuan yang dihitung. Juga memberikan div warna latar belakang yang berbeda atau gambar latar belakang sehingga kita bisa melihatnya.
"Flush" ke browser.

Kodenya.


    Progress Bar

Semoga bermanfaat
Sumber: http://w3shaman.com/article/php-progress-bar-script

Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

Di bawah ini kita akan mempelajari cara membuat Progress Bar menggunakan JavaScript. Progress bar biasanya digunakan untuk membuat gambaran suatu proses dari suatu kinerja. Seperti ini :

<!DOCTYPE html>
<html>
<style>
#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #00BFFF;
}
</style>
<body>

<h1>Contoh JavaScript Progress Bar</h1>

<div id="myProgress">
  <div id="myBar"></div>
</div>

<br>
<button onclick="move()">Klik di sini</button> 

<script>
var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}
</script>

</body>
</html>

Membuat Progress Bar

Langkah 1) Tambahkan HTML:
Contoh

<div id="myProgress">
  <div id="myBar"></div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: #00BFFF;
}

Langkah 3) Tambahkan JavaScript:
Buat Progress Bar Dinamis (animasi) Menggunakan JavaScript:
Contoh

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
}

Tambahkan Label

Jika ingin menambahkan label untuk menunjukkan seberapa jauh pengguna dalam proses, tambahkan elemen baru di dalam (atau di luar) progress bar:

Pagi semuanya kita lanjut lagi belajarnya, untuk kali ini saya akan memberikan sebuah tutorial sering kita gunakan dan sering kita liat juga yaitu sebuah progress bar dimana fungsi progress bar sendiri bisa di gunakan untuk sebuah efek ketika kita mengupload sebuah file, bahkan saat mendownload, oke jadi seperti apa cara membuat fungsi progress bar, simak terus ya teman-teman.

Bagi teman-teman yang pernah menggunakan sebuah bootstrap pasti pernah ya melihat sebuah tampilan progress bar tetapi bagaimana cara menggunakannya supaya menjadi dinamis, sesuai uploadan yang kita mau, tetapi untuk cara membuat fungsi progress bar saya menggunakan jquery saja jadi belum benar-benar kita mengupload sebuah file, karena jika masih offline proses upload mash sangat cepat, beda jika kita sudah online ya, oke langsung saja seperti yang tadi saya tulis di atas, saya menggunakan bootstrap karena sudah di sediakan.

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.progress-bar{

width: 0%;

}

</style>

</head>

<body>

<h1 class="text-center pb-2">Cara Membuat fungsi progress bar</h1>

</div>

<button class="btn btn-primary btn-sm mt-3">start</button>

</div>

$(document).ready(function(){

$(".btn").click(function(){

$(".progress-bar").addClass("bg-danger");

var size = 0;

var interval = setInterval(function(){

size = size + 10;

$(".progress-bar").css('width', size + '%');

$(".progress-bar").text(size+"%");

if(size >= 50 && size < 100){

$(".progress-bar").removeClass("bg-danger");

$(".progress-bar").addClass("bg-warning");

}else if(size>= 100){

clearInterval(interval);

$(".progress-bar").removeClass("bg-warning");

$(".progress-bar").addClass("bg-success");

$(".progress-bar").text("done");

}

}, 1000);

})

</script>

</body>

</html>

silahkan teman-teman copy file di atas, cukup simple ya, jadi di dalam progressnya kita buat valunya min dan maxnya, jadi itulah yang kita atur, dan hasilnya akan seperti ini

Gambar di atas adalah proses ketika saya baru tekan start dan jika sudah 50% maka akan saya rubah warnanya hinga 100% oke seperti inilah cara membuat fungsi progress bar semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.