Sabtu, Maret 6, 2021
Home > Contoh Kasus > Cara Membuat Perhitungan Otomatis Dengan Jquery Pemrograman PHP

Cara Membuat Perhitungan Otomatis Dengan Jquery Pemrograman PHP

total

Bagaimana caranya membuat auto calculate atau perhitungan otomatis pada pemrograman PHP ?. – Pada kasus ini admin akan berbagi bagaimana caranya menjumlahkan antara dua data secara otomatis tanpa harus mereload halaman website dengan menggunakan bahasa pemrograman php dan jquery.

  1. Buatlah sebuah file dengan nama index.php dan simpan di folder xampp/htdocs yang anda miliki.
  2. Copy dan paste kode program dibawah ini pada file index.php yang sudah anda buat tadi kemudian simpan.
<!-- PHP untuk memproses data dalam bentuk array yang dikirim oleh form -->
<?php
if(!empty($_POST['alltotal'])){
echo '<pre>';
echo 'Harga satuan:';
print_r($_POST['satuan']);
echo 'Harga jasa:';
print_r($_POST['jasa']);
echo 'Sub total:';
print_r($_POST['subtotal']);
echo 'All total: '.$_POST['alltotal'];
echo '</pre>';
exit;
}
?>

<!-- HTML -->
<form id="data">
<div id="box">
<p> Harga satuan : <input name="satuan[]" type="text" id="satuan-0" class="hitung"> </p>
<p> Harga jasa : <input name="jasa[]" type="text" id="jasa-0" class="hitung"> </p>
<p> Sub total (Tidak di isi) : <input name="subtotal[]" type="text" id="total-0" class="total" readonly="readonly"> </p>
</div>
<p> All total (Tidak di isi) : <input name="alltotal" type="text" id="total" readonly="readonly"> </p>
<button id="tambah">Tambah</button>
<button id="simpan">Simpan</button>
</form>
<div id="output"></div>

<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
// proses menambah inputan
$('#tambah').click(function() {

var i = $('input').size() + 1,
input = '<div id="box' + i + '"><a href="#" id="hapus" color="red">hapus</a>';
input += '<p> Harga satuan : <input name="satuan[]" type="text" id="satuan-' + i + '" class="hitung"> </p>';
input += '<p> Harga jasa : <input name="jasa[]" type="text" id="jasa-' + i + '" class="hitung"> </p>';
input += '<p> Sub total (Tidak di isi) : <input name="subtotal[]" type="text" id="total-' + i + '" class="total" readonly="readonly"> </p>';
input += '</div>';

$('#box').append(input);

i++;
return false;

});

// proses menghapus inputan
$('body').on('click', '#hapus', function() {

$(this).parent('div').remove();

});

// proses menghitung total value inputan
$('body').on('focus', '.hitung', function() {
var aydi = $(this).attr('id'),
berhitung = aydi.split('-');
$(this).keydown(function() {
setTimeout(function() {
var satuan = ($('#satuan-' + berhitung[1]).val() != '' ? $('#satuan-' + berhitung[1]).val() : 0),
jasa = ($('#jasa-' + berhitung[1]).val() != '' ? $('#jasa-' + berhitung[1]).val() : 0),
subtotal = parseInt(satuan) + parseInt(jasa);
if (!isNaN(subtotal)) {
$('#total-' + berhitung[1]).val(subtotal);
var alltotal = 0;
$('.total').each(function(){
alltotal += parseFloat($(this).val());
});
$('#total').val(alltotal);
}
}, 50);
});
});

// proses untuk mengirim semua data inputan yang ada di form menggunakan jquery POST atau GET ke server
$('#simpan').click(function() {
// contoh => var url_proses = proses.php
var url_proses = "<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>";
$.post(url_proses, $("#data").serialize(), function(response) {
$('#output').html(response);
});
return false;
});
</script>

 

Jalankan program sesuai nama folder xampp anda, contohnya folder yang saya gunakan adalah http://localhost/calculate dan semoga berhasil.

Jika ada kendala silahkan berikan komentar anda.