- Your demo file, index.html
- Your post handler, posthandler.php
- Your empty data file, datafile.dat which is writeable
So let's start with index.html. Get the basic template from http://getbootstrap.com/getting-started/
and make the following additions (in red). This file:
- Creates a progress bar
- Kicks off the post handler using the submit button
- Checks the value contained in the data file
- Uses the data gathered to increase the width of the progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body
{
padding-top:2em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<form role="form">
<button type="submit" class="btn btn-default">Submit</button>
</form><br />
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
(function()
{
$('form').submit(function()
{
$.post('posthandler.php', function(data1)
{
console.log(data1)
});
var refreshId = setInterval(function()
{
$.get('datafile.dat', function(data2)
{
$('.progress-bar').css('width',data2+'%');
if(data2 >= 100)
{
console.log('finished');
$('.progress').removeClass('active');
$('.progress').removeClass('progress-striped');
$('.progress-bar').text('Complete');
clearInterval(refreshId);
}
});
}, 100);
return false;
});
})();
</script>
</body>
</html>
Now for the posthandler.php
This script:
- Clears the data file
- Every so often, updates the data file contents
<?php
file_put_contents('datafile.dat', '');
for($i = 1; $i <= 100; $i++)
{
usleep(200000);
file_put_contents('datafile.dat', $i);
}
?>
Enjoy!
