Membuat Fungsi Perhitungan Otomatis

Membuat Perhitungan Otomatis dengan PHP
Membuat Perhitungan Otomatis dengan PHP

Membuat Perhitungan Otomatis dengan PHP - Pertemuan kali ini saya akan berbagi cara sederhana tentang jQuery yaitu Cara Menjumlahkan Otomatis Nilai dengan jQuery, tentu dengan jQuery banyak sekali yang bisa kalian lakukan selain membuat efek dan animasi kalian tentu juga bisa manipulasi data. Seperti yang akan saya buat berikut ini yaitu melakukan proses perhitungan secara otomatis, penasaran seperti apa dan bagaimana cara membuatnya ? ikuti langkah - langkahnya berikut ini.

Membuat Fungsi Perhitungan Otomatis


<script>
  function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;
    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
      document.getElementById('txt3').value = result;
    }
  }
</script>

Nah pada script diatas ini , berfungsi untuk menghitung otomatis , ini admin jelaskan dulu , sebelum penerapannya , javascript di atas diletakan pada bagian head html/ php sobat. Dan sobat perlu perhatikan script di atas, admin menggunakan nama jml_brg, m_barang, dan jumlah untuk nama-nama field form admin. Nah sedangkan untuk formnya admin menggunakan nama autoSumForm. nah dalam penulisan kode,  jml_brgm_barang,  admin menggunakan kode txt1, txt2, dan txt3 untuk penjumlahannya, sobat bisa lihat kode diatas ya sudah terpampang jelas , Sehingga nantinya penulias kode nya seperti ini :

    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;

Jika sobat sudah paham , dan ingin membuat form dengan jumlah field lebih dari dua, maka silahkan sobat  dengan menambahkan txt1, txt2, … dst, sesuaikan dengan kebutuhan sobat sendiri. dan untuk menghitung otomatis kodenya seperti ini :

    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
      document.getElementById('txt3').value = result;

Nah untuk masing-masing field input menggunakan atribut onkeyup="sum();" dan untuk men-tag setiap id="namaid" contoh penulisan id="txt1" dst. Nah , sekarang sobat buat folder baru latihan_auto silahkan taro di local server (htdocs) , dan buat file baru dengan nama index.php pada folder latihan_auto , seperti gambar diatas , kemudian sobat ketikkan script dibawah ini :



<html>
<head>
<script>
  function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;
    var result = parseInt(txtFirstNumberValue) - parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
      document.getElementById('txt3').value = result;
    }
  }
</script>

</head>
<body bgcolor="#E6E6FA">
<table border='0' width='80%'  align='center' >
<tr>
<td><b>Jumlah Barang</b> </td>
<td><input type='text' name='jml_brg' style="text-align:right;"  size='23'   id="txt1" onkeyup="sum();" /></td>
</tr>
<tr>
<td><b>Memakai Barang</b> </td>
<td><input type='text' name='m_barang'  style="text-align:right;"  size='23'   id="txt2" onkeyup="sum();" /></td>
</tr>
<tr>
<td>Sisah Barang</td>
<td><input readonly type=text value='0' id="txt3" onkeyup="sum();"> </td>
</tr>
<tr><td colspan='2'>
</td></tr>
</table>
</form>

</body>
</html>

Nah , silahkan sobat sesuaikan , dengan kebutuhan sobat , sudah paham juga kan dimana letak buat perhitungan otomatisnya , sudah admin jelaskan juga diatas, disini admin hanya mencontohkan pengurangan stok , hasilnya jadi seperti dibawah ini :



Penutup

Nah bisa sobat lihat pengurangan diatas , admin memasukkan jumlah barang dengan angka = 10 dan memakai barang dengan angka = 5 , maka akan otomatis menghitung dan mengisi sisah barang = 5 , itu otomatis keluar ya angkanya , jadi sobat tidak perlu mengetik , ya sesuai judul otomatis , nah mungkin tutorial Membuat Penjumlahan atau Perhitungan Otomatis dengan PHP sampai sini saja dulu , semoga bermanfaat buat sobat , dan terimakasih sudah berkunjung