Kadang kala kita membutuhkan form inputan yang membutuhkan perhitungan nilai baik perkalian, pembagian, penjumlahan maupun pengurangan secara otomatis. Nah, kali ini kita akan mencoba membuatnya secara sederhana.
Penasaran seperti apa dan bagaimana cara membuatnya? Kita ikuti langkah-langkah berikut:
Membuat Controller
Buat sebuah cotroller dengan nama Autosumajax.php, kemudian ketikkan script dibawah:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php defined('BASEPATH') or exit('No direct script access allowed'); class Autosumajax extends CI_Controller { public function __construct() { parent::__construct(); } public function index() { $this->load->view('autosumajax'); } } |
Membuat View
Buat view dengan nama autosumajax.php, kemudian ketikkan script di bawah:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<!DOCTYPE html> <html> <head> <title>Codeigniter - Auto Sum JQuery CodeIgniter</title> <!-- Font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&display=swap" rel="stylesheet"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <!-- JQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <style> body { font-family: 'Oswald', sans-serif; font-weight: 300; } </style> </head> <body> <div class="container"> <div class="row mt-4"> <div class="col-12"> <h4 class="text-center">Penghitungan Otomatis Berdasarkan Inputan</h4> <hr> <form id="form-filter" class="mt-3"> <div class="row mt-4"> <div class="col-md-6"> <div class="form-group row"> <label for="" class="col-sm-12 col-form-label"><strong> A. Pendapatan</strong></label> </div> <div class="form-group row"> <label for="gaji" class="col-sm-4 col-form-label">Gaji Pokok</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="gaji" id="gaji" value=""> </div> </div> <div class="form-group row"> <label for="tunjangan" class="col-sm-4 col-form-label">Tunjangan</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="tunjangan" id="tunjangan" value=""> </div> </div> <div class="form-group row"> <label for="um" class="col-sm-4 col-form-label">Uang Makan</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="um" id="um" value=""> </div> </div> <hr> <div class="form-group row"> <label for="sub_pendapatan" class="col-sm-4 col-form-label">Sub Total Pendapatan</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="sub_pendapatan" id="sub_pendapatan" value=""> </div> </div> <hr> </div> <div class="col-md-6"> <div class="form-group row"> <label for="bank" class="col-sm-12 col-form-label"><strong> B. Potongan</strong></label> </div> <div class="form-group row"> <label for="bank" class="col-sm-4 col-form-label">Bank</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="bank" id="bank" value=""> </div> </div> <div class="form-group row"> <label for="koperasi" class="col-sm-4 col-form-label">Koperasi</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="koperasi" id="koperasi" value=""> </div> </div> <div class="form-group row"> <label for="pot_lain" class="col-sm-4 col-form-label">Lain-lain</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="pot_lain" id="pot_lain" value=""> </div> </div> <hr> <div class="form-group row"> <label for="sub_potongan" class="col-sm-4 col-form-label">Sub Total Potongan</label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="sub_potongan" id="sub_potongan" value=""> </div> </div> <hr> <div class="form-group row"> <label for="sisa" class="col-sm-4 col-form-label"><strong>Sisa (A - B)</strong></label> <div class="col-md-5 mb-2"> <input type="text" class="form-control form-control-sm text-right item" name="sisa" id="sisa" value=""> </div> </div> </div> </div> </form> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#gaji").val('0'); $("#tunjangan").val('0'); $("#um").val('0'); $("#sub_pendapatan").val('0'); $("#bank").val('0'); $("#koperasi").val('0'); $("#pot_lain").val('0'); $("#sub_potongan").val('0'); $("#sisa").val('0'); }); $(document).on("change", ".item", function() { var gaji = $("#gaji").val(); var tunjangan = $("#tunjangan").val(); var um = $("#um").val(); var sub_pendapatan = $("#sub_pendapatan").val(); var bank = $("#bank").val(); var koperasi = $("#koperasi").val(); var pot_lain = $("#pot_lain").val(); var sub_potongan = $("#sub_potongan").val(); var pendapatan = parseInt(gaji) + parseInt(tunjangan) + parseInt(um); $("#sub_pendapatan").val(pendapatan); var potongan = parseInt(bank) + parseInt(koperasi) + parseInt(pot_lain); $("#sub_potongan").val(potongan); var sisa = parseInt(pendapatan) - parseInt(potongan); $("#sisa").val(sisa); }); </script> </body> </html> |
Jika langkah-langkah di atas sudah sesuai maka akan didapatkan hasil seperti berikut ini:
Jika kita mengisikan angka-angka pada poin pendapatan dan potongan maka secara otomatis pada bagian Sub Total Pendapatan, Sub Total Potongan dan Sisa akan menghitung nilai penjumlahan dan pengurangan dari masing-masing bagian.
Nah, demikian pembahasan kita kali ini tentang penghitungan otomatis memanfaatkan JQuery di CodeIgniter. Semoga bermanfaat.
