We all know how to insert data using PHP and Ajax, but if you know how to increase a progress bar when inserting data into the mysql database in PHP using Ajax and jQuery and Bootstrap. There are many readers that our reader asked to publish: How to show how to insert data into the progress bar with PHP using Ajax jQuery and Bootstrap.
First, we want to know why we used the progress bar in web development. There are many different ways to use the progress bar in our web application. For example, we used the progress bar to download display files. To illustrate the process of uploading files, we used the progress bar on our website. For each process of sending form data, e.g. For example, inserting data or updating the data process, we can also display the progress bar. Then the user can understand that his data has been processed. This is how we used the progress bar in our web development.
Now we come to our topic on how to create a process bar when inserting data with PHP and Ajax. This is a type of feature that improves the user interface of your website. Because you have defined the data processing on the website via the progress bar element.
In the following example we have defined how jQuery Bootstrap is used to create a progress bar with Ajax and PHP. Here we used PHP script for server side data processing and for client side we used Ajax jQuery and Bootstrap. Ajax was used to send data to the server, jQuery was used to validate the form data and continue executing the function, and finally Bootstrap was used to build the progress bar. After the user has filled out the form and validated all data correctly, he sends data to the server with Ajax. At this point, when the data has been inserted into the mysql database table, the insertion of data is displayed in the progress bar, so that the user interface of the website is increased. This way we can illustrate the process of inserting data into the progress bar in PHP using Ajax, jQuery and Bootstrap. Below is the full source with online demo.
First, we want to know why we used the progress bar in web development. There are many different ways to use the progress bar in our web application. For example, we used the progress bar to download display files. To illustrate the process of uploading files, we used the progress bar on our website. For each process of sending form data, e.g. For example, inserting data or updating the data process, we can also display the progress bar. Then the user can understand that his data has been processed. This is how we used the progress bar in our web development.
Now we come to our topic on how to create a process bar when inserting data with PHP and Ajax. This is a type of feature that improves the user interface of your website. Because you have defined the data processing on the website via the progress bar element.
In the following example we have defined how jQuery Bootstrap is used to create a progress bar with Ajax and PHP. Here we used PHP script for server side data processing and for client side we used Ajax jQuery and Bootstrap. Ajax was used to send data to the server, jQuery was used to validate the form data and continue executing the function, and finally Bootstrap was used to build the progress bar. After the user has filled out the form and validated all data correctly, he sends data to the server with Ajax. At this point, when the data has been inserted into the mysql database table, the insertion of data is displayed in the progress bar, so that the user interface of the website is increased. This way we can illustrate the process of inserting data into the progress bar in PHP using Ajax, jQuery and Bootstrap. Below is the full source with online demo.
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 Using PHP Ajax To Insert Data Display On Progress bar</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 Using PHP Ajax To Insert Data Display On Progress bar </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';
}
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.