Bikin Website Kalkulator Potongan Gaji

14 Jun, 2025

Klik di sini untuk langsung coba kalkulatornya — gratis!

Pertengahan Juni 2025.

Di tengah tumpukan pekerjaan yang HARUS diselesaikan, saya justru kepikiran satu hal sederhana:

Sebenarnya, seberapa besar sih potongan gaji orang Indonesia yang gajinya dua digit ke atas?

Rasa penasaran itu muncul bukan karena saya HR, bukan juga karena saya lagi ngurus payroll.

Tapi karena saya sadar... banyak orang (termasuk saya di masa depan) gak pernah tahu hitungan pastinya.

Bukan Mulai dari Logo — Tapi Undang-Undang

Biasanya kalau mulai proyek iseng, saya buka Figma dulu, cari inspirasi warna, mikirin nama domain.

Tapi proyek ini agak berbeda.

Saya malah harus buka dokumen resmi dari:

Undang-Undang PPh 21
Peraturan BPJS Kesehatan
Aturan iuran Ketenagakerjaan

Dan meskipun terlihat rumit di awal, setelah saya pecah dan tarik logikanya — ternyata cukup bisa disederhanakan jadi beberapa rumus dasar.

Makanya, gak heran kalau masih banyak kantor yang pakai Excel untuk ngitung ini secara manual. Karena secara prinsip, matematika potongan gaji itu gak serumit yang kita bayangkan.

Satu File HTML, Cukup

Awalnya saya kira ini harus dibikin pakai framework atau tools modern.

Ternyata... cukup satu file index.html aja.

Kurang dari 150 baris kode, udah bisa jalan sebagai:

Kalkulator PPh 21
Kalkulator potongan BPJS Kesehatan & Ketenagakerjaan
Dan bahkan sudah saya sisipkan slot kecil untuk iklan Google AdSense

Semua bisa berjalan langsung di browser. Bahkan sebenarnya tidak perlu internet.

Bisa disimpan dan dijalankan offline — cocok buat dibagikan ke teman, HR, bahkan mahasiswa akuntansi.

Silakan Pakai, Sebebas-bebasnya

Saya bikin ini awalnya untuk diri sendiri. Tapi kalau kamu juga penasaran, atau sedang butuh alat bantu cepat untuk cek potongan gaji, silakan gunakan.

Mau dimodif? Boleh.
Mau dijadikan referensi tugas? Monggo.

Linknya ada di sini:
👉 https://sisagaji.com

<!DOCTYPE html><html lang="id"><head>
  <meta charset="UTF-8">
  <meta name="description" content="Hitung gaji bersih karyawan bulanan secara otomatis berdasarkan potongan BPJS dan PPh 21. Termasuk status menikah, anak, dan NPWP.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator Gaji Bersih - Indonesia</title>
  </head>
<body class="bg-gray-50 p-6 font-sans">
  <div class="max-w-xl mx-auto bg-white p-6 rounded-lg shadow-md">
    <h1 class="text-2xl font-bold mb-4">Kalkulator Gaji Bersih Karyawan</h1>
    <label class="block mb-2">Gaji Pokok (Rp)</label>
    <input id="gaji" type="number" class="w-full p-2 border mb-4 rounded" placeholder="Contoh: 10000000">

    <label class="block mb-2">Tunjangan Tetap (Rp)</label>
    <input id="tunjangan" type="number" class="w-full p-2 border mb-4 rounded" placeholder="Contoh: 2000000">

    <label class="block mb-2">Tunjangan Tidak Tetap / Bonus (Rp)</label>
    <input id="bonus" type="number" class="w-full p-2 border mb-4 rounded" placeholder="Contoh: 3000000">

    <label class="block mb-2">Status Perkawinan</label>
    <select id="status" class="w-full p-2 border mb-4 rounded">
      <option value="TK">Tidak Kawin</option>
      <option value="K">Kawin</option>
    </select>

    <label class="block mb-2">Jumlah Anak</label>
    <input id="anak" type="number" class="w-full p-2 border mb-4 rounded" placeholder="Maksimal 3">

    <label class="block mb-2">Memiliki NPWP?</label>
    <select id="npwp" class="w-full p-2 border mb-4 rounded">
      <option value="ya">Ya</option>
      <option value="tidak">Tidak</option>
    </select>

    <label class="block mb-2">Apa yang ingin dihitung?</label>
    <div class="mb-4 space-y-1">
      <label class="block"><input type="checkbox" id="cekBpjs" checked="" disabled=""> Potongan BPJS (wajib dikurangkan untuk PPh 21)</label>
      <label class="block"><input type="checkbox" id="cekPajak" checked=""> Potongan PPh 21</label>
    </div>

    <button onclick="hitungGajiBersih()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Hitung Gaji Bersih</button>

    <div id="hasil" class="mt-6 text-gray-800 text-sm"></div>

    <p class="text-xs text-gray-500 mt-4">
      <strong>Disclaimer:</strong> Perhitungan ini bersifat estimasi dan bertujuan edukatif. Untuk keperluan resmi, harap konsultasikan dengan HR atau konsultan pajak.
    </p>

    <p class="text-center text-xs text-gray-500 mt-6">
      a tiny project by <a href="https://idearik.com" class="text-blue-500 hover:underline" target="_blank">@idearik</a>
    </p>
  </div>

  <script>
    function hitungGajiBersih() {
      const gaji = parseFloat(document.getElementById("gaji").value) || 0;
      const tunjangan = parseFloat(document.getElementById("tunjangan").value) || 0;
      const bonus = parseFloat(document.getElementById("bonus").value) || 0;
      const status = document.getElementById("status").value;
      const anak = Math.min(parseInt(document.getElementById("anak").value) || 0, 3);
      const punyaNpwp = document.getElementById("npwp").value === "ya";
      const cekPajak = document.getElementById("cekPajak").checked;

      const penghasilanTetap = gaji + tunjangan;
      const penghasilanKenaPajak = penghasilanTetap + bonus;

      let bpjsKesehatan = Math.min(0.01 * penghasilanTetap, 120000);
      let bpjsJHT = 0.02 * gaji;
      let bpjsJP = Math.min(0.01 * gaji, 99400);
      let totalBpjs = bpjsKesehatan + bpjsJHT + bpjsJP;

      let pphBulanan = 0;
      if (cekPajak) {
        let ptkp = 54000000;
        if (status === "K") ptkp += 4500000;
        ptkp += anak * 4500000;

        const penghasilanNettoSetahun = (penghasilanKenaPajak - totalBpjs) * 12;
        const pkp = Math.max(penghasilanNettoSetahun - ptkp, 0);

        let pph21 = 0;
        if (pkp <= 60000000) {
          pph21 = pkp * 0.05;
        } else if (pkp <= 250000000) {
          pph21 = 60000000 * 0.05 + (pkp - 60000000) * 0.15;
        } else if (pkp <= 500000000) {
          pph21 = 60000000 * 0.05 + 190000000 * 0.15 + (pkp - 250000000) * 0.25;
        } else {
          pph21 = 60000000 * 0.05 + 190000000 * 0.15 + 250000000 * 0.25 + (pkp - 500000000) * 0.3;
        }

        if (!punyaNpwp) pph21 *= 1.2;
        pphBulanan = pph21 / 12;
      }

      const gajiBersih = penghasilanKenaPajak - totalBpjs - pphBulanan;

      document.getElementById("hasil").innerHTML = `
        <p><strong>Rincian Potongan per Bulan:</strong></p>
        <ul class="list-disc pl-5">
          <li>BPJS Kesehatan: Rp ${bpjsKesehatan.toLocaleString()}</li>
          <li>BPJS JHT: Rp ${bpjsJHT.toLocaleString()}</li>
          <li>BPJS JP: Rp ${bpjsJP.toLocaleString()}</li>
          ${cekPajak ? `<li>PPh 21: Rp ${pphBulanan.toLocaleString()}</li>` : ''}
        </ul>
        <p class="mt-4"><strong>Gaji Bersih per Bulan: Rp ${gajiBersih.toLocaleString()}</strong></p>
      ;
    }
  </script>


</body></html>

#jurnal