Cara membuat kalkulator zakat di wordpress. Saya ucapkan 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 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 kalkulator zakat di website,nya maka bisa menggunakan sistem yang nanti akan kami bagikan.

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.

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 diganti 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.

NB: saya menggunakan tambahan CSS bootstrap yang bisa dicari di google. Atau di getbootstrap.com

function kalzakat() {
ob_start(); ?>

 <div class="row m-0">

<?php
$harga_beras = 10000;
$harga_emas = 800000;
 ?>

<form style="width: 100%;">
    <div class="row m-0 py-2 ">
      <div class="row" style="width: 100%;">
       <div class="col-sm-6">
           <div class="row m-0 py-2 align-items-center">
     <label for="static" class="col-sm-3 p-1 col-form-label">Harga Beras</label>
     <div class="col-sm-9 p-1">
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Rp</div>
        </div>
        <input type="text" class="form-control bg-white font-weight-bold" readonly id="inlineFormInputGroup" 
        placeholder="<?php echo number_format( $harga_beras ,0 , ',','.' ); ?>">
   <div class="input-group-append">
    <span class="input-group-text">/kg</span>
  </div>
      </div>
     </div>
     </div>
     </div>
     
      <div class="col-sm-6">
          <div class="row m-0 py-2 align-items-center">
     <label for="static" class="col-sm-3 p-1 col-form-label">Harga Emas</label>
      <div class="col-sm-9 p-1">
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Rp</div>
        </div>
        <input type="text" class="form-control bg-white font-weight-bold" readonly id="inlineFormInputGroup" 
        placeholder="<?php echo number_format( $harga_emas ,0 , ',','.' ); ?>">
    <div class="input-group-append">
    <span class="input-group-text">/gram</span>
  </div>
      </div>
     </div>
     </div>
    </div>
    </div>
    </div>
  
</form> 


<div id="accordion" class="accordion w-100">
<div class="card">
    <div class="card-header position-relative" id="headingOne">
      <h5 class="mb-0">
        <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 action="" method="post" name="Kalkulator" id="zakatcalc" class="formzakat">
                <div>
                    <label for="static" class="col-sm-12 col-form-label keterangan"><blockquote>
Nisab: 85 x <?php echo $harga_emas;?> = Rp. <span class="min-harta d-none"><?php echo 85*$harga_emas;?></span> <span><?php $minharta = 85*$harga_emas;  echo number_format( $minharta ,0 , ',','.' ); ?></span> 
                   </blockquote> </label>
                </div>
                
<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 autocoma" id="inlineFormInputGroup" name="fa" onchange="calc_zakat()" value="0">
                  </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 autocoma" id="inlineFormInputGroup" name="fb" onchange="calc_zakat()" 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 autocoma" id="inlineFormInputGroup" name="fc" onchange="calc_zakat()" 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 autocoma" id="inlineFormInputGroup" name="fd" onchange="calc_zakat()" 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 autocoma" id="inlineFormInputGroup" name="fe" onchange="calc_zakat()" 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 autocoma" id="inlineFormInputGroup" name="ff"  readonly onchange="calc_zakat()" value="0">
                  </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 autocoma" id="inlineFormInputGroup" name="fg"  onchange="calc_zakat()" 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, jika nisab)</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 autocoma" id="inlineFormInputGroup" name="fh" readonly onchange="calc_zakat()" value="0">
                  </div>
                 </div>
</div>                 
                 
<div class="row py-2 align-items-center ifzakat">
                 <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 akhir" id="inlineFormInputGroup" name="z1" readonly onchange="calc_zakat()" value="0">
                  </div>
                 </div>
</div> 

<div class="row py-2 ifzakat 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 vkbulan" id="inlineFormInputGroup" name="zb1" readonly onchange="calc_zakat()" value="0">
                  </div>
                 </div> 
</div>                  
        </form>
         </div>
      </div>
</div>
<div class="card">
    <div class="card-header position-relative" id="headingTwo">
      <h5 class="mb-0">
        <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 action="" method="post" name="Kalkulator" id="zakatcalcpertanian" class="formzakat">
                <div>
                    <label for="static" class="col-sm-12 col-form-label keterangan"><blockquote>
Nisab: 653 x <span id="riceValue"><?php echo $harga_beras; ?></span> = Rp.<span class="nisab d-none"><?php echo $harga_beras*653;?></span> <span class=""><?php $nisab = $harga_beras*653; echo number_format( $nisab ,0 , ',','.' );?></span> 
                    </blockquote></label>
                </div>
                
<div class="row py-2 align-items-center">                
                <label for="static" class="col-sm-6 col-form-label">A. Jenis pengairan </label>
                 <div class="form-check col-sm-6 pl-sm-4 ml-sm-0 ml-5 pl-0">
                     <div class="py-1">
                      <input class="form-check-input pointer" onclick="calc_zakat_pertanian('5')" type="radio" name="pengairan" id="exampleRadios1" value="5" checked>
                      <label class="form-check-label pointer" for="exampleRadios1">
                        Buatan
                      </label>
                    </div>
                    <div class="py-1">
                      <input class="form-check-input pointer" onclick="calc_zakat_pertanian('10')" type="radio" name="pengairan" id="exampleRadios2" value="10">
                      <label class="form-check-label pointer" for="exampleRadios2">
                        Air Hujan
                      </label>
                    </div>
                    </div>
</div>                    
<div class="row py-2 align-items-center">                 
                <label for="static" class="col-sm-6 col-form-label">B. 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 pendapatanbertani autocoma" id="inlineFormInputGroup" name="pendapatanpertanian"  onchange="calc_zakat_pertanian()" value="0">
                  </div>
                 </div>
</div>                    
<div class="row py-2 align-items-center">                  
                 <label for="static" class="col-sm-6 col-form-label"> C. 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 kenazakatperatanian autocoma" id="inlineFormInputGroup" name="biayaproduksi"  onchange="calc_zakat_pertanian()" value="0">
                  </div>
                 </div>
</div>                    
<div class="row py-2 align-items-center">                  
                 <label for="static" class="col-sm-6 col-form-label"> D. Hasil bersih panen (B dikurangi C, jika B > nisab)</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" id="inlineFormInputGroup" name="hasiltani" readonly onchange="calc_zakat_pertanian()" value="0">
                  </div>
                 </div>
</div>                    
<div class="row py-2 ifzakat2 align-items-center">                  
                 <label for="static" class="col-sm-6 col-form-label"><b>  I. Jumlah zakat pertanian yang wajib dibayarkan (<span class="persentase">5</span>% x D)  </b></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" id="hasil" name="jumlahzakatharusdibayar" readonly onchange="calc_zakat_pertanian()" value="0">
                  </div>
                 </div>
</div>                    
        </form>
      </div>
    </div>
</div>

</div>
			
    <script>
    jQuery(document).ready(function ($) {
        calc_zakat = function(){
        var hasil = $('#zakatcalc').serializeArray();
        var isi = Number(0);
        var hartasimpanan = Number(0);
          $.each(hasil, function(i, field){
            isi += Number(field.value);
            if(field.name == 'fa' || field.name == 'fb' || field.name == 'fc' || field.name == 'fd' || field.name == 'fe') {
                hartasimpanan += Number(field.value.replace(/,/g, ''));
            }
          });
          $(".fieldzakat").val(isi);
          var simpanharta = String(hartasimpanan).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          $(".hartasimpanan").val(simpanharta);
          var kenazakat = hartasimpanan-($(".hutang").val().replace(/,/g, ''));
           var kenazakat2 = String(kenazakat).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
          if (kenazakat<=$(".min-harta").text()) {
              $(".kenazakat").val(kenazakat2);
              $(".akhir").val('Tidak Kena Zakat');
              $(".vkbulan").val('Tidak Kena Zakat');
              $(".ifzakat").removeClass('kenazakataktiv');
          }else {
              var checkedNew = String(kenazakat*(2.5/100)).split('.')[0];
              var vvkbulan = String(kenazakat*(2.5/100/12)).split('.')[0];
            $(".ifzakat").addClass('kenazakataktiv');
            $(".kenazakat").val(String(kenazakat).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
            $(".akhir").val(String(checkedNew).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
            $(".vkbulan").val(String(vvkbulan).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
          }
          
        }
    });
    
    
     jQuery(document).ready(function ($) {
        calc_zakat_pertanian = function(data=5){
            $(".persentase").text(data);
             //alert(data); 
        
            var hasiltani = ($(".pendapatanbertani").val().replace(/,/g, ''))-($(".kenazakatperatanian").val().replace(/,/g, ''));
            var hasiltani2 = String(hasiltani).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            $(".hasiltanitotal").val(hasiltani2);
            if (hasiltani <=$(".nisab").text()) {
                $(".jumlahzakatharusdibayar").val('Tidak Kena Zakat'); 
                 $(".ifzakat2").removeClass('kenazakataktiv2');
            } else {
                var zakatpertanian = (($(".persentase").text()/100)*hasiltani);
                var zakatpertanian2 = String(zakatpertanian).split('.')[0];
                var zakatpertanian3 = String(zakatpertanian2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              $(".ifzakat2").addClass('kenazakataktiv2');
             $(".jumlahzakatharusdibayar").val(zakatpertanian3);   
            }
            // if (hasiltani>=$(".nisab").val()){
            //     $(".jumlahzakatharusdibayar").val(($(".persentase").text()/100)*hasiltani);
            // }

          };
     });
    </script> 
  <style>   
  .pointer {
    cursor: pointer;
}  
   </style>  
		</div>
<?php return ob_get_clean(); }
add_shortcode('kalzakat', 'kalzakat');

Cara Memasangnya

Apabila ingin memasangnya di page template atau berbasis php maka bisa seperti ini dengan menghilangkan tanda bintang (*)

<?php echo do_shortcode('[*kalzakat*]'); ?>

Jika dihalaman atau post maka tinggal copy paste dibawah ini dengan menghilangkan tanda bintang (*)

[*kalzakat*]

Terima kasih telah mengunjungi website kami.

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

12 thoughts on “Membuat Kalkulator Zakat Di WordPress”

Anton Toni Agung
December 15, 2020 at 5:08 pm

Bagaimana caranya supaya harga beras dan emas bisa di input manual?

1. adminteknologi
  December 15, 2020 at 5:16 pm
  
  untuk yang $harga_beras = 10000; $harga_emas = 800000; angka tersbut bisa diganti atau bisa menggunakan reduxframework atau kirkycustomizer atau themoption lainnya agar bisa diubah di backend.
  
Deden Ahmad Saputra
December 29, 2020 at 9:18 am

Cara masukin codingannya dimana min, saya kurang mengerti, terimakasih

1. adminteknologi
  December 29, 2020 at 9:23 am
  
  untuk diatas saya menggunakan sistem shortcode jadi saya pasang di fuction.php. jika sudah maka cara memasangnya juga sudah ada diatas
  
fikri
May 9, 2021 at 2:35 pm

Kenapa Drop down nya tidak bisa ya

1. adminteknologi
  May 9, 2021 at 8:42 pm
  
  dropdown yang mana.?
  saya cek hanya sistem input tidak ada yang dropdown.
  jika dari maksudnya dropdown adalah hal lain mungkin karena belum terpasang boostrap karena seperti yang saya jelaskan diatas tambahan CSS bootstrap
  
Muhammad Fauzi
June 22, 2021 at 6:06 pm

assalamu ‘alaykum

ijin bertanya, kalau ingin pasang kalkulator zakat tsb kedalam page elementor bagaimanakah caranya?

terima kasih atas jawabannya, semoga rezekinya dilancarkan. aamiin

1. adminteknologi
  June 22, 2021 at 7:48 pm
  
  wa’alaykumussalam warahmatullahi wabarakatuhu
  Jika mengikuti cara diatas maka itu dimasukkan di fuction.php terlebih dulu baru nanti di elementor dimasukkan shortcode tersebut menggunakan text editor.
  
  jika ingin dipasang langsung maka bisa dengan menggunaka HTML contohnya https://teknologi.visitklaten.com/load-more/
  
Yandi
June 23, 2021 at 2:13 am

hallo, saya masih gagal load css nya bagaimana yaa ?ada tutorial lengkapnya ?? sekarang form nya standar tidak sama seperti demo

1. adminteknologi
  June 24, 2021 at 7:20 pm
  
  seperti yang dijelaskan diatas saya menggunakan bootstrap. untuk panduanya belum saya posting . bisa langsung dicari di google atau getbootstrap.com
  
im
February 21, 2022 at 9:13 am

bootsrapnya versi brp ya?

1. adminteknologi
  February 21, 2022 at 10:01 am
  
  versi 4

Membuat Kalkulator Zakat Di WordPress

Membuat Kalkulator Zakat

Zakat Harta (Maal)

Zakat Pertanian

Membuat Sistemnya

Cara Memasangnya

Komentar

12 thoughts on “Membuat Kalkulator Zakat Di WordPress”

Leave a Comment Cancel Reply

Membuat Kalkulator Zakat

Zakat Harta (Maal)

Zakat Pertanian

Membuat Sistemnya

Cara Memasangnya

Bagikan :

Postingan Terkait

Komentar

12 thoughts on “Membuat Kalkulator Zakat Di WordPress”

Leave a Comment Cancel Reply

Start typing and press enter to search