Salam. Selamat datang kembali di sistemit.com. Pada kesempatan kali ini saya akan share mengenai cara membuat progress atau loading pada saat input data biasa dengan PHP. Untuk mempercantik tampilan, hal ini juga perlu untuk diperhatikan. Karena bagaimanapun user akan senang dan menyukai halaman yang interaktif termasuk menambah progress loading pada saat input data.
Dengan ada nya ajax dan jquery, ada banyak hal atau pengembangan interface yang dapat kita lakukan. Termasuk menambah fitur fitur interaktif untuk mendukung pemrograman PHP. Maka dari itu blog ini merupakan sarana bagi saya dan teman teman semua untuk saling berbagi informasi mengenai update perkembangan pemrograman javascript, jquery, ajax, php hingga database.
Ok langsung saja kita masuk kepada langkah teknis pembuatan input data menggunakan progress bar dengan php.
1. Langkah 1 : Buat lah database bernama inputloading di bawah ini :
-- -- Database: `inputloading` -- -- -------------------------------------------------------- -- -- 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;
2. Langkah 2 : Buatlah file index.php seperti berikut ini :
<?php
//index.php
?>
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Input Data Dengan Progress atau Loading PHP</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">Cara Membuat Input Data Dengan Progress atau Loading PHP</h1>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Masukkan Data</h3>
</div>
<div class="panel-body">
<span id="success_message"></span>
<form method="post" id="sample_form">
<div class="form-group">
<label>Nama Awal</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>Nama Akhir</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>
file index.php di atas terdiri dari struktur html seperti biasa dan di tambah dengan script jquery untuk mendukung tampilan progress bar.
3. Langkah 3 : Buatlah file bernama proses.php berikut ini :
file proses.php ini berguna untuk melakukan aksi penyimpanan php. Yang mana aksi ini akan dibantu oleh jquery agar pada saat klik simpan progress bar akan muncul dan melakukan aksi penyimpanan ke proses.php sehingga data tersimpan ke database. Adapun database menggunakan PDO. Simpan kode berikut dengan nama proses.php
<?php
//proses.php
$connect = new PDO("mysql:host=localhost; dbname=inputloading", "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 'Selesai Disimpan';
}
?>
Nah, pada langkah ketiga ini pembuatan input data dengan loading php sudah selesai. Bagaimana mudah bukan ?
Catatan :
Catatan yang perlu diketahui adalah, pada bagian head terdapat library jquery yang diunduh secara online. Jadi untuk menjalankan script di atas, diperlukan koneksi internet. Jika anda ingin menjalankan nya offline, maka anda harus mendownload semua library dan menaruh file nya secara offline di localhost. Perhatikan kode berikut :
<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>
Nah, kode di atas merupakan library jquery berformat .js dan file tampilan bottstrap yang berekstensi .css yang dicall atau dipanggil secara online. Anda dapat menggantinya menjadi offline dengan mendownload file tersebut lalu meletakkan nya di localhost secara offline.
Demikianlah tutorial membuat loading pada saat input data dengan php. Semoga bermanfaat untuk kita semua.
Bagi anda yang berminat untuk memesan aplikasi berbasis web (php) dapat menghubungi Admin(saya) melalui kontak berikut ini :
