ProgressBar with bootstrap : Working in RUN-Buttons and PHP-functions

Scriptcase 9 Discussion
#1

Hello, I tried a lot and at least was successful. You can try the following :slight_smile:
Create an internal library progress_bar with the following code :

<?php function update_bar ($aktueller_wert,$endwert) { if ([iss_progress_bar]) { // if there are a lot of records to calculte in the leading php Code, it makes no sense to // show every step . Therefore i devide the $endwert with 10. // so at least TEN steps in proressbar will finish the bar. $schwelle = intval($endwert / 10); if ($schwelle == 0 ) { $schwelle = 1; } // ONLY sho special steps, not all if (fmod($aktueller_wert,$schwelle) == 0 or $aktueller_wert > $endwert -1) { // Berechnen Sie den Fortschritt $progressPercentage = ($aktueller_wert / $endwert) * 100; // Rufen Sie JavaScript-Funktion auf, um den Fortschrittsbalken zu aktualisieren echo ""; // Flushe den buffer of Browser // for my windows installation this buffers works. echo str_repeat(' ',30000000); // Send output to browser immediately flush(); ob_flush(); } } } function isLinkAvailable($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_NOBODY, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10); // Timeout für die Verbindung curl_setopt($ch, CURLOPT_TIMEOUT, 10); // Timeout für die gesamte Anfrage curl_exec($ch); $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); return ($httpCode >= 200 && $httpCode < 400); } function init_progressbar() { [iss_progress_bar] = true; $url = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"; if (!isLinkAvailable($url)) { [iss_progress_bar] = false; } $url = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"; if (!isLinkAvailable($url)) { [iss_progress_bar] = false; } $url = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"; if (!isLinkAvailable($url)) { [iss_progress_bar] = false; } if ([iss_progress_bar]) { // Necessary HTML construct ?> 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Progress Bar Example</title>
	<!-- Fügen Sie Bootstrap CSS hinzu -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-5">
		<h3>Bitte warten</h3>
		<div class="progress">
			<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
		</div>
	</div>

	<!-- Fügen Sie Bootstrap JS und jQuery hinzu -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

	<!-- Ihr JavaScript-Code -->
	<script>
		function updateProgressBar(progressPercentage) {
			$(".progress-bar").css("width", progressPercentage + "%").attr("aria-valuenow", progressPercentage);
		}
	</script>

	<!-- Ihr PHP-Code -->
	<?php

}

}

function exit_progressbar() {
if ([iss_progress_bar]) {
?>


<?php
}
}

?>

Now you have your RUN-Button oder PHP-Function …
/* The following Link are necessary


If ONE of these links is not available, the progressbar is ignored, but teh controlling program will
do the job. 

This works in RunButtons and other parts of Scriptcase
In Runbuttons copy this code in the event and define your program in main_pgm. That's all

*/

// Public Session to store success of link-control
// you should define this variable as
init_progressbar();
main_pgm();
exit_progressbar();

main_pgm is YOUR Code that controls the progressbar.
for example …

for ($i = 1; $i <= 20; $i++) {
update_bar($i,20);
sleep(1);
}

Hope this may help some users …