Cara Membuat Kalkulator Zakat Harta (Maal) Dan Zakat Pertanian di wordpress. Kami mengucapkan banyak terima kasih bagi para pengunjung yang sudah meluangkan waktu untuk mengunjungi web saya yang masih banyak kekurangan ini. Saya menerima segala masukkan dan kritikan agar web dan diri saya menjadi lebih baik lagi.
Dalam artikel kali ini saya akan berbagi cara membuat kalkulator Zakat Harta (Maal) Dan Zakat Pertanian di wordpress. Untuk membuatnya gampang-gampang susah. Tetapi tenang saja dalam kesempatan kali ini saya akan berbagi jadi sobat tinggal copy paste aja dan sedikit edit sesuai kebutuhan.
Kalkulator zakat merupakan suatu layanan agar mempermudah perhitungan jumlah zakat yang harus ditunaikan bagi setiap umat muslim sesuai dengan ketetapan syariah. Bagi yang ingin membuat sistem kalkulator zakat di website,nya maka bisa menggunakan sistem yang nanti akan kami bagikan.
Cara Membuat Kalkulator Zakat
Sistem kalkulator ini nantinya akan menghitung Zakat harta (maal) dan zakat pertanian.
Zakat Harta atau Maal yaitu sejumlah harta yang harus dikeluarkan apabila sudah mencapai batas minimal tertentu (nisab) dalam kurun waktu (haul) satu tahun kalender. Apabila harta sudah diatas nisab maka harta diwajibkan zakat. Nisab Zakat Harta (Maal) yaitu setara dengan 85 gram emas 24 karat. Katakanlah harga Emas Rp 800.000/gram maka Nisab: 85 x 800.000 = Rp. 68.000.000.
Sedangkan hasil pertanian juga wajib dikeluarkan zakatnya dengan ketentuan.
- Tanaman tersebut sengaja ditanam dan bukan tanaman liar.
- Nisab hasil pertanian adalah sebanyak 5 wasaq yaitu sekitar 653 kg dan dikeluarkan setiap kali panen.
- Apabila lahannya diairi dengan pengairan dan teknologi yang memerlukan modal kerja cukup banyak maka zakatnya adalah sebesar 5%.
- Jika lahannya diairi dengan air hujan maka zakatnya 10%.
- Harta yang dikeluarkan merupakan hasil bersih panen. Yakni hasil panen yang telah dikurangi dengan biaya pupuk, pengolahan lahan, pembelian bibit, ongkos buruh, obat-obatan, dll.
How to Make a Zakat Calculator
Katakanlah harga beras Rp 10.000 maka nisabnya adalah Nisab: 653 x 10000 = Rp. 6.530.000
Untuk tampilan kalkulator bisa dilihat dibawah ini.
Zakat Harta (Maal)
Zakat Pertanian
*Untuk harga beras dan harga emas bisa langsung diganti di form sesuai harga sebenarnya karena harga berubah-ubah.
Membuat Sistemnya
Silakan copy paste kode berikut di fuction atau page template. Kode ini saya menggunakan sistem shortcode agar bisa fleksible dipasang dimanapun.
Sistem ini mirip seperti kalkulator zakat yang pernah kami share sebelumnya hanya sedikit perbedaan di sistem javascriptnya.
NB: saya menggunakan tambahan CSS bootstrap yang bisa dicari panduannya di website ini. silakan cari saja menggunakan fitur pencarian dengan kata kunci “Cara Memasang Bootstrap 4 Di WordPress”.
function kalzakatnew() {
ob_start(); ?>
<div class="new-frame-kalkulator">
<div id="accordion" class="accordion w-100">
<div class="card">
<div class="card-header position-relative bg-danger" id="headingOne">
<h5 class="mb-0 text-white">
<div class="pointer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Zakat Harta (Maal)<i class="fa fa-angle-double-down position-absolute fa-lg" aria-hidden="true" style="right: 20px;"></i>
</div>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<form class="formzakat">
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">Harga Emas(gram)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control emas" value="800000">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">Jumlah Nisab (85 x Harga Emas(gram))</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control nisab" readonly>
</div>
</div>
</div>
<hr class="my-2">
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">a. Uang Tunai, Tabungan, Deposito atau sejenisnya</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control opsi1" value="1">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">b. Saham atau surat-surat berharga lainnya</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control opsi2" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">c. Real Estate (tidak termasuk rumah tinggal yang dipakai sekarang)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control opsi3" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">d. Emas, Perak, Permata atau sejenisnya</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control opsi4" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">e. Mobil (lebih dari keperluan pekerjaan anggota keluarga)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control opsi5" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">f. Jumlah Harta Simpanan (A+B+C+D+E)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control hartasimpanan" readonly>
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">g. Hutang Pribadi yg jatuh tempo dalam tahun ini</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control hutang" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">h. Harta simpanan kena zakat(F-G)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control kenazakat" readonly>
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"><b>I. JUMLAH ZAKAT ATAS SIMPANAN YANG WAJIB DIBAYARKAN PER TAHUN (2,5% x H)</b></label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control jumlahakhir" readonly>
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"><b>J. JUMLAH ZAKAT ATAS SIMPANAN YANG WAJIB DIBAYARKAN PER BULAN</b></label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control jumlahakhir2" readonly>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="card">
<div class="card-header position-relative bg-danger" id="headingTwo">
<h5 class="mb-0 text-white">
<div class="pointer" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Zakat Pertanian<i class="fa fa-angle-double-down position-absolute fa-lg" aria-hidden="true" style="right: 20px;"></i>
</div>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<form class="formzakat">
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">Harga Beras(Kg)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control beras" value="10000">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">Jumlah Nisab (653 x Harga Beras(Kg))</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control nisab2" readonly>
</div>
</div>
</div>
<hr class="my-2">
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label">A. Pendapatan hasil panen</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control data1" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"> B. Biaya produksi (biaya pengolahan lahan, ongkos buruh, pembelian bibit, pupuk, obat-obatan) </label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control data2" value="0">
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"> C. Hasil bersih panen (A dikurangi B)</label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Rp</div>
</div>
<input class="form-control hasiltanitotal" readonly>
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-12 col-form-label"><b> D. Jumlah zakat pertanian yang wajib dibayarkan</b></label>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"> Pengairan Buatan (5% x D) </label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="hasil">Rp</div>
</div>
<input class="form-control jumlahzakatharusdibayar" readonly>
</div>
</div>
</div>
<div class="row py-2 align-items-center">
<label for="static" class="col-sm-6 col-form-label"> Pengairan Air Hujan (10% x D) </label>
<div class="col-sm-6">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="hasil">Rp</div>
</div>
<input class="form-control jumlahzakatharusdibayar2" readonly>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</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(){
//Zakat Harta (Maal)
var emas = $('.emas').val();
var emas = emas.replace(/\D+/g, '');
$('.emas').val(addCommas(emas));
var a1 = $('.opsi1').val();
var a1 = a1.replace(/\D+/g, '');
$('.opsi1').val(addCommas(a1));
var b1 = $('.opsi2').val();
var b1 = b1.replace(/\D+/g, '');
$('.opsi2').val(addCommas(b1));
var c1 = $('.opsi3').val();
var c1 = c1.replace(/\D+/g, '');
$('.opsi3').val(addCommas(c1));
var d1 = $('.opsi4').val();
var d1 = d1.replace(/\D+/g, '');
$('.opsi4').val(addCommas(d1));
var e1 = $('.opsi5').val();
var e1 = e1.replace(/\D+/g, '');
$('.opsi5').val(addCommas(e1));
var g1 = $('.hutang').val();
var g1 = g1.replace(/\D+/g, '');
$('.hutang').val(addCommas(g1));
var f1 = (Number(a1)+Number(b1)+Number(c1)+Number(d1)+Number(e1));
$('.hartasimpanan').val(addCommas(f1));
var h1 = (Number(f1)-Number(g1));
$('.kenazakat').val(addCommas(h1));
var nisab = (85*emas);
$('.nisab').val(addCommas(nisab));
if (h1>=nisab) {
var i1 = ((h1*2.5)/100);
$('.jumlahakhir').val(addCommas(i1));
var j1 = (i1/12);
$('.jumlahakhir2').val(addCommas(j1));
} else {
$(".jumlahakhir").val('Tidak Kena Zakat');
$(".jumlahakhir2").val('Tidak Kena Zakat');
}
//Zakat Pertanian
var beras = $('.beras').val();
var beras = beras.replace(/\D+/g, '');
$('.beras').val(addCommas(beras));
var aa1 = $('.data1').val();
var aa1 = aa1.replace(/\D+/g, '');
$('.data1').val(addCommas(aa1));
var bb1 = $('.data2').val();
var bb1 = bb1.replace(/\D+/g, '');
$('.data2').val(addCommas(bb1));
var cc1 = (Number(aa1)-Number(bb1));
$('.hasiltanitotal').val(addCommas(cc1));
var nisab2 = (653*beras);
$('.nisab2').val(addCommas(nisab2));
if (cc1>=nisab2) {
var dd1 = ((cc1*5)/100);
$('.jumlahzakatharusdibayar').val(addCommas(dd1));
var dd2 = ((cc1*10)/100);
$('.jumlahzakatharusdibayar2').val(addCommas(dd2));
} else {
$(".jumlahzakatharusdibayar").val('Tidak Kena Zakat');
$(".jumlahzakatharusdibayar2").val('Tidak Kena Zakat');
}
}
$(document).on('change keyup', '.new-frame-kalkulator input', function() {
calculate();
});
calculate();
});
</script>
<?php return ob_get_clean(); }
add_shortcode('kalzakatnew', 'kalzakatnew');
Cara Memasangnya
Apabila ingin memasangnya di page template atau berbasis php maka bisa seperti ini dengan menghilangkan tanda bintang (*)
<?php echo do_shortcode('[*kalzakatnew*]'); ?>Jika dihalaman atau post maka tinggal copy paste dibawah ini dengan menghilangkan tanda bintang (*)
[*kalzakatnew*]Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan dan saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar