We all know how to insert data using PHP with Ajax but if you know how to increment a progress bar while insert data into mysql database in php using Ajax with jQuery and Bootstrap. There are many viewers reader of our blog has requested us to publish post on How to display data inserting process on progress bar with PHP using Ajax jQuery and Bootstrap.
First we want to know why we have use progress bar in web development. There are many different ways we have use progress bar in our web application. e.g For display file downloading process we have use progress bar. For display file uploading process we have use progress bar in our web page. And event for any form data submission process like inserting of data or updating of data process we can also display progress bar. So, user can understand their data has been process. So, this way we have use progress bar in our web development.
Now we have come to our topic like how to create process bar while inserting of data using PHP with Ajax. This is one type of feature which will increase your website user interface. Because it has define processing of data on web page using progress bar element.
In below example, we have define how to make progress bar by using jQuery Bootstrap with Ajax and PHP. Here we have use PHP script for server side processing of data and for client side we have use Ajax jQuery and Bootstrap. Ajax has been used for send data to server, jQuery has been used for form data validation and continue execution of function and lastly bootstrap has been used for make progress bar. Now when user has filled form and all data successfully validated then it will send data to server using Ajax, when data has insert into mysql database table, then at that time it will display inserting of data in progress bar, so it will increase website UI. So, this way we can display insert data process in progress bar in PHP with Ajax, jQuery and Bootstrap. Below you can find complete source with online demo also.
Source Code
Database
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_sample`
--
CREATE TABLE `tbl_sample` (
`id` int(11) NOT NULL,
`first_name` varchar(250) NOT NULL,
`last_name` varchar(250) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Indexes for table `tbl_sample`
--
ALTER TABLE `tbl_sample`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_sample`
--
ALTER TABLE `tbl_sample`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
index.php
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>How to Create Progress Bar for Data Insert in PHP using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<br />
<div class="container">
<h1 align="center">How to Create Progress Bar for Data Insert in PHP using Ajax</h1>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Enter Data</h3>
</div>
<div class="panel-body">
<span id="success_message"></span>
<form method="post" id="sample_form">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control" />
<span id="first_name_error" class="text-danger"></span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control" />
<span id="last_name_error" class="text-danger"></span>
</div>
<div class="form-group" align="center">
<input type="submit" name="save" id="save" class="btn btn-info" value="Save" />
</div>
</form>
<div class="form-group" id="process" style="display:none;">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#sample_form').on('submit', function(event){
event.preventDefault();
var count_error = 0;
if($('#first_name').val() == '')
{
$('#first_name_error').text('First Name is required');
count_error++;
}
else
{
$('#first_name_error').text('');
}
if($('#last_name').val() == '')
{
$('#last_name_error').text('Last Name is required');
count_error++;
}
else
{
$('#last_name_error').text('');
}
if(count_error == 0)
{
$.ajax({
url:"process.php",
method:"POST",
data:$(this).serialize(),
beforeSend:function()
{
$('#save').attr('disabled', 'disabled');
$('#process').css('display', 'block');
},
success:function(data)
{
var percentage = 0;
var timer = setInterval(function(){
percentage = percentage + 20;
progress_bar_process(percentage, timer);
}, 1000);
}
})
}
else
{
return false;
}
});
function progress_bar_process(percentage, timer)
{
$('.progress-bar').css('width', percentage + '%');
if(percentage > 100)
{
clearInterval(timer);
$('#sample_form')[0].reset();
$('#process').css('display', 'none');
$('.progress-bar').css('width', '0%');
$('#save').attr('disabled', false);
$('#success_message').html("<div class='alert alert-success'>Data Saved</div>");
setTimeout(function(){
$('#success_message').html('');
}, 5000);
}
}
});
</script>
process.php
<?php
//process.php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
if(isset($_POST["first_name"]))
{
$data = array(
':first_name' => trim($_POST["first_name"]),
':last_name' => trim($_POST["last_name"])
);
$query = "
INSERT INTO tbl_sample
(first_name, last_name)
VALUES (:first_name, :last_name)
";
$statement = $connect->prepare($query);
$statement->execute($data);
echo 'done';
}
?>
good
ReplyDeleteCan you help me . i want to display progress bar while saving data . I am currently using Cakephp 2.x .
ReplyDeleteNice post sir www.gajabwap.blogspot.in
ReplyDeletehttps://youtu.be/Gnfu07GpsDs
not working
ReplyDeleteThanks much for your hard work bro. this source code has helped me much but i only have a problem of modifying the process.php, i wanted to include file upload because i have to a upload a file. could you help me please. this is my email address (vashdesigners@gmail.com)
ReplyDeletei have subscribed already to your channel!
Thank you for this code , but I think it doesn't gave real time execute. also it doesn't gave me error when it doesn't connect with correct database
ReplyDelete