Cara Membuat Kalkulator Kredit Di WordPress

Cara Membuat Kalkulator Kredit Sederhana Di WordPress. Tanpa plugin dengan bermodalkan HTML, PHP dan Javascript yang cukup sederhana dan simple maka rekan-rekan bisa membuat kalkulator kredit secara sederhana dan simple di wordpress.

Fungsi Kalkulator Kredit adalah untuk memudahkan menghitung berbagai macam kalkulasi pinjaman misalnya kredit perumahan atau KPR atau kredit mobil dan untuk mengetahui jumlah cicilan.

Namun perusahaan pemberi kredit pada umumnya memiliki perhitungan tersendiri atau kolom biaya lain yang mungkin berbeda. Oleh karena itu maka sebaiknya menghubungi perusahaan pemberi kredit supaya lebih jelas dan lengkap.

Kalkulator dibawah ini hanya gambaran secara umum saja yang mungkin nanti akan berbeda hasilnya dalam proses kredit yang sebenarnya.

Sebelumnya kami mengucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang telah meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi.

Cara Membuat Kalkulator Kredit

Dan simulasi kredit dibawah ini adalah flat dan rumusnya seperti ini.

a = pokok pinjaman
b = suku bunga per tahun
c = lama kredit dalam bulan

Maka:

Cicilan pokok per bulan = a / c
Bunga per bulan = a x b / 12
Total  bunga yang harus dibayar atau angsuran perbulan = a x b / 12 x c

Langkah Pertama, silakan copas saja kode dibawah ini dan dalam hal ini kami buat dalam fungsi shortcode sehingga bisa diletakkan dimanapun yang diinginkan. Kode dibawah ini silakan copas di functions.php .

Kode dibawah ini bisa dikembangan lagi sekiranya lebih menarik atau sesuai keperluan.

function kpr2() {
    ob_start(); ?>
    
    <div class="kredit-frame">
        <div class="my-3 p-3 bg-light">   
            <label>Pinjaman</label>
            <div class="input-group">
                <div class="input-group-prepend">
                <div class="input-group-text">Rp</div>
                </div>
                <input class="pinjaman form-control " id="pinjaman" value ="150">
            </div>
        </div>
        
        <div class="my-3 p-3 bg-light">
            <label>Suku Bunga /tahun (%)</label>
            <div class="input-group">
                <input class="form-control bunga" id="bunga" value ="2">
                <div class="input-group-prepend">
                <div class="input-group-text">%</div>
                </div>
            </div>
        </div>
        
        <div class="my-3 p-3 bg-light">
            <label>Jangka Waktu (Tahun)</label>
            <div class="input-group">
                <input class="form-control tenor" id="tenor" value ="2">
                <div class="input-group-prepend">
                <div class="input-group-text">Tahun</div>
                </div>
            </div>
        </div>
        
        <div class="p-3 bg-info text-white my-3">
            <label>Cicilan Pokok Per Bulan</label>
            <div class="input-group">
                <div class="input-group-prepend">
                <div class="input-group-text">Rp</div>
                </div>
                <input class="form-control cpp" id="cpp">
            </div>
        </div>
        
        <div class="p-3 bg-primary text-white my-3">
            <label>Bunga Per Bulan</label>
            <div class="input-group">
                <div class="input-group-prepend">
                <div class="input-group-text">Rp</div>
                </div>
                <input class="form-control bpb" id="bpb" >
            </div>
        </div>
        
        
        <div class="p-3 bg-success text-white my-3">
            <label>Angsuran Per Bulan</label>
            <div class="input-group">
                <div class="input-group-prepend">
                <div class="input-group-text">Rp</div>
                </div>
                <input class="form-control ap" id="ap">
            </div>
        </div>


<script>
        jQuery(function($) {
            function addCommas(nStr)
            {   
                var nStr = nStr.toString();
                    nStr += '';
            x = nStr.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? ',' + x[1] : '';
            var rgx = /(\d+)(\d{3})/;
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + '.' + '$2');
            }
            return x1 + x2;
                //return nStr;
            }
            
            function calculate(){
            	var a1 = $('.pinjaman').val();
            	var a1 = a1.replace(/\D+/g, '');
            	$('.pinjaman').val(addCommas(a1));
            	var b1 = $('.bunga').val();
            	var b1 = b1.replace(/\D+/g, '');
            	$('.bunga').val(addCommas(b1));    	
            	var c1 = $('.tenor').val();
            	var c1 = c1.replace(/\D+/g, '');
            	$('.tenor').val(addCommas(c1));     	
            	
            	var d1 = (a1/(c1*12));
            	$('.cpp').val(addCommas(d1));
            	var e1 = ((a1*b1)/100/12);
            	$('.bpb').val(addCommas(e1));
            	var f1 = (d1+e1);
            	$('.ap').val(addCommas(f1));
            }
        
            
            
            $(document).on('change keyup', '.kredit-frame input', function() {
                calculate();
        	});
            calculate();
        });

</script>

    
</div>
    <?php return ob_get_clean();
}
add_shortcode('kpr2', 'kpr2');

Kedua, Jika sudah dicopas maka langkah selanjutnya adalah copas shortcode dibawah ini dimanapun yang diinginkan dengan menghapus tanda # .

[#kpr2#]

Ketiga, Hasilnya nanti kurang lebih akan seperti ini

Setelah mengisi di field yang telah disediakan maka nanti akan otomatis muncul hasilnya. 

NB: Kami menggunakan CSS tambahan dari Bootstrap

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.