Script HTML Kalkulator Kredit Profesional: Solusi Cerdas untuk Perencanaan Keuangan Anda

Apakah Anda sedang merencanakan pinjaman untuk kebutuhan pribadi atau bisnis? Kalkulator Kredit Profesional berbasis HTML, CSS, dan JavaScript ini adalah alat yang wajib Anda coba! Dirancang dengan antarmuka yang ramah pengguna dan fitur canggih, script ini membantu Anda menghitung angsuran pinjaman dengan cepat dan akurat. Dalam artikel ini, kami akan membahas fungsi utama script ini, manfaatnya, dan mengapa alat ini menjadi solusi ideal untuk perencanaan keuangan Anda.

Apa Itu Kalkulator Kredit Profesional?

Kalkulator Kredit Profesional adalah aplikasi web interaktif yang memungkinkan pengguna menghitung angsuran pinjaman berdasarkan jumlah pinjaman, tenor, suku bunga, dan jenis bunga (flat, efektif, atau anuitas). Dengan desain responsif dan modern menggunakan Tailwind CSS, kalkulator ini tidak hanya fungsional tetapi juga nyaman digunakan di berbagai perangkat, baik desktop maupun ponsel.

Fungsi Utama Kalkulator Kredit Profesional

Script ini menawarkan sejumlah fitur unggulan yang membuatnya menonjol:

1. Perhitungan Beragam Jenis Bunga
   Kalkulator mendukung tiga jenis perhitungan bunga:
   • Bunga Flat: Angsuran tetap dengan bunga dihitung dari pokok awal.
   • Bunga Efektif: Bunga dihitung berdasarkan sisa pinjaman, sehingga angsuran pokok meningkat seiring waktu.
   • Bunga Anuitas: Angsuran tetap dengan komposisi bunga dan pokok yang berubah setiap bulan.
2. Tampilan Tabel Amortisasi
   Setelah perhitungan, script menampilkan tabel amortisasi yang rinci, mencakup:
   • Bulan ke berapa.
   • Jumlah angsuran.
   • Komponen pokok dan bunggs yang dibayarkan.
   • Sisa pinjaman.
     Tabel ini dilengkapi dengan scroll independen, sehingga tetap mudah dibaca meskipun data panjang.
3. Ekspor ke CSV
   Pengguna dapat mengunduh hasil perhitungan dalam format CSV, lengkap dengan format Rupiah (Rp) dan pemisah ribuan untuk kemudahan analisis di spreadsheet.
4. Format Rupiah Otomatis
   Input dan output keuangan ditampilkan dalam format Rupiah dengan pemisah ribuan, memastikan kejelasan dan kemudahan pemahaman.
5. Antarmuka Responsif dan Scrollable
   Desain menggunakan Tailwind CSS memastikan tampilan menarik dan responsif. Kalkulator memiliki fitur scroll vertikal untuk menjaga semua konten, termasuk input dan tabel, tetap dapat diakses bahkan pada layar kecil atau saat tabel panjang.
6. Validasi Input
   Script dilengkapi dengan validasi untuk memastikan semua kolom (jumlah pinjaman, tenor, dan suku bunga) diisi dengan benar sebelum perhitungan dilakukan.

Manfaat Menggunakan Kalkulator Kredit Profesional

Mengintegrasikan Kalkulator Kredit Profesional ke situs web atau blog Anda memberikan banyak keuntungan, baik untuk pengguna maupun pemilik situs:

1. Meningkatkan Pengalaman Pengguna
   Dengan antarmuka yang intuitif dan hasil yang jelas, pengunjung situs Anda dapat dengan mudah merencanakan pinjaman mereka tanpa perlu keahlian keuangan mendalam. Ini meningkatkan waktu kunjungan dan keterlibatan pengguna di situs Anda.
2. SEO-Friendly untuk Blog Anda
   Menyediakan alat interaktif seperti kalkulator pinjaman dapat meningkatkan peringkat SEO situs Anda. Konten interaktif cenderung menarik lebih banyak backlink dan berbagi sosial, serta mengurangi bounce rate karena pengunjung menghabiskan waktu lebih lama untuk menggunakan kalkulator.
3. Mendukung Keputusan Keuangan yang Lebih Baik
   Pengguna dapat membandingkan skenario pinjaman dengan berbagai jenis bunga, membantu mereka memilih opsi yang paling hemat biaya. Tabel amortisasi memberikan gambaran transparan tentang bagaimana pembayaran mereka dialokasikan.
4. Fleksibilitas untuk Berbagai Kebutuhan
   Kalkulator ini cocok untuk berbagai jenis pinjaman, seperti KPR, kredit kendaraan, atau pinjaman pribadi. Fitur ekspor ke CSV juga memudahkan pengguna untuk menyimpan dan menganalisis data lebih lanjut.
5. Mudah Diintegrasikan
   Script ini ringan dan hanya memerlukan Tailwind CSS dari CDN, sehingga mudah diintegrasikan ke blog atau situs web tanpa membebani server.

Mengapa Harus Menggunakan Script Ini di Blog Anda?

Menambahkan Kalkulator Kredit Profesional ke blog Anda bukan hanya tentang menyediakan alat yang bermanfaat, tetapi juga tentang meningkatkan nilai situs Anda di mata pengunjung dan mesin pencari. Berikut adalah alasan utama untuk memanfaatkan script ini:

• Konten Interaktif: Kalkulator meningkatkan interaksi pengguna, yang merupakan sinyal positif untuk algoritma Google.
• Relevansi Tinggi: Cocok untuk blog bertema keuangan, properti, otomotif, atau gaya hidup yang membahas perencanaan keuangan.
• Kemudahan Penggunaan: Desain responsif dan scrollable memastikan pengalaman pengguna yang mulus di semua perangkat.
• Fitur Ekspor: Memungkinkan pengguna menyimpan hasil perhitungan, meningkatkan nilai tambah alat ini.

Cara Menggunakan Kalkulator Kredit Profesional

1. Masukkan jumlah pinjaman dalam Rupiah.
2. Tentukan tenor pinjaman dalam bulan.
3. Masukkan suku bunga tahunan (dalam persen).
4. Pilih jenis bunga (flat, efektif, atau anuitas).
5. Klik “Hitung” untuk melihat hasil perhitungan, termasuk angsuran bulanan, total bunga, dan total pembayaran.
6. Gunakan tombol “Ekspor ke CSV” untuk mengunduh data dalam format spreadsheet.

Kesimpulan

Kalkulator Kredit Profesional adalah alat canggih yang membantu pengguna merencanakan pinjaman dengan mudah dan akurat. Dengan fitur seperti perhitungan berbagai jenis bunga, tabel amortisasi yang jelas, dan ekspor ke CSV, script ini adalah tambahan berharga untuk blog Anda. Tidak hanya meningkatkan pengalaman pengguna, tetapi juga membantu mengoptimalkan SEO situs Anda dengan konten interaktif yang relevan. Integrasikan kalkulator ini ke blog Anda hari ini dan berikan nilai lebih kepada pengunjung Anda!

Script HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Kredit Profesional</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 1rem;
        }
        .calculator-container {
            background: white;
            border-radius: 1.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            padding: 2.5rem;
            width: 100%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .result-card {
            background: #f8fafc;
            border-radius: 1rem;
            padding: 2rem;
            margin-top: 2rem;
            transition: all 0.3s ease;
        }
        .input-group {
            position: relative;
            display: flex;
            align-items: center;
            background: #f9fafb;
            border-radius: 0.75rem;
            border: 2px solid #e5e7eb;
            transition: all 0.3s ease;
            padding: 0.5rem 1rem;
        }
        .input-group:focus-within {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }
        .input-field {
            background: transparent;
            border: none;
            outline: none;
            width: 100%;
            padding: 0.5rem;
            font-size: 0.875rem;
            color: #1f2937;
        }
        .input-icon {
            color: #6b7280;
            margin-right: 0.5rem;
        }
        .btn-primary {
            background: #3b82f6;
            transition: background 0.3s ease, transform 0.2s ease;
        }
        .btn-primary:hover {
            background: #1d4ed8;
            transform: translateY(-2px);
        }
        .btn-secondary {
            background: #6b7280;
            transition: background 0.3s ease, transform 0.2s ease;
        }
        .btn-secondary:hover {
            background: #4b5563;
            transform: translateY(-2px);
        }
        .table-container {
            max-height: 400px;
            overflow-y: auto;
            border-radius: 0.75rem;
            margin-top: 1rem;
        }
        table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        th, td {
            border-bottom: 1px solid #e5e7eb;
            padding: 0.75rem 1.5rem;
        }
        th:first-child, td:first-child {
            border-left: 1px solid #e5e7eb;
        }
        th:last-child, td:last-child {
            border-right: 1px solid #e5e7eb;
        }
        th {
            background: #f1f5f9;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        @media (max-width: 640px) {
            .calculator-container {
                padding: 1.5rem;
            }
            .table-container {
                max-height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="calculator-container">
        <h1 class="text-3xl font-extrabold text-gray-800 mb-8 text-center">Kalkulator Kredit Profesional</h1>
        <div class="grid gap-8">
            <!-- Input Jumlah Pinjaman -->
            <div>
                <label for="loanAmount" class="block text-sm font-medium text-gray-700 mb-2">Jumlah Pinjaman (IDR)</label>
                <div class="input-group">
                    <span class="input-icon">Rp</span>
                    <input type="text" id="loanAmount" class="input-field" placeholder="Masukkan jumlah pinjaman" required>
                </div>
            </div>
            <!-- Input Tenor -->
            <div>
                <label for="loanTerm" class="block text-sm font-medium text-gray-700 mb-2">Tenor (Bulan)</label>
                <div class="input-group">
                    <span class="input-icon">📅</span>
                    <input type="number" id="loanTerm" class="input-field" placeholder="Masukkan tenor" required>
                </div>
            </div>
            <!-- Input Suku Bunga -->
            <div>
                <label for="interestRate" class="block text-sm font-medium text-gray-700 mb-2">Suku Bunga (% per Tahun)</label>
                <div class="input-group">
                    <span class="input-icon">%</span>
                    <input type="number" id="interestRate" step="0.01" class="input-field" placeholder="Masukkan suku bunga" required>
                </div>
            </div>
            <!-- Pilih Jenis Bunga -->
            <div>
                <label for="interestType" class="block text-sm font-medium text-gray-700 mb-2">Jenis Bunga</label>
                <div class="input-group">
                    <span class="input-icon">⚙️</span>
                    <select id="interestType" class="input-field">
                        <option value="flat">Bunga Flat</option>
                        <option value="effective">Bunga Efektif</option>
                        <option value="annuity">Bunga Anuitas</option>
                    </select>
                </div>
            </div>
            <!-- Tombol Hitung dan Ekspor -->
            <div class="flex space-x-4">
                <button onclick="calculateLoan()" class="w-full btn-primary text-white font-semibold py-3 rounded-lg shadow-md">Hitung</button>
                <button onclick="exportToCSV()" class="w-full btn-secondary text-white font-semibold py-3 rounded-lg shadow-md hidden" id="exportButton">Ekspor ke CSV</button>
            </div>
        </div>
        <!-- Hasil Perhitungan -->
        <div id="result" class="result-card hidden">
            <h2 class="text-xl font-semibold text-gray-800 mb-6">Hasil Perhitungan</h2>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="font-medium text-gray-700">Angsuran Bulanan</p>
                    <p id="monthlyPayment" class="text-lg font-bold text-blue-600"></p>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="font-medium text-gray-700">Total Bunga</p>
                    <p id="totalInterest" class="text-lg font-bold text-blue-600"></p>
                </div>
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="font-medium text-gray-700">Total Pembayaran</p>
                    <p id="totalPayment" class="text-lg font-bold text-blue-600"></p>
                </div>
            </div>
            <div id="amortizationTable">
                <h3 class="text-lg font-semibold text-gray-700 mb-4">Tabel Angsuran</h3>
                <div class="table-container">
                    <table class="w-full text-sm text-left text-gray-600">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="px-6 py-3 rounded-tl-lg">Bulan</th>
                                <th class="px-6 py-3">Angsuran</th>
                                <th class="px-6 py-3">Pokok</th>
                                <th class="px-6 py-3">Bunga</th>
                                <th class="px-6 py-3">Sisa Pinjaman</th>
                            </tr>
                        </thead>
                        <tbody id="amortizationBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Format Rupiah dengan pemisahan ribuan
        function formatRupiah(number) {
            return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 2 }).format(number);
        }

        // Format Rupiah untuk CSV, mengganti non-breaking space dengan space biasa
        function formatRupiahForCSV(number) {
            return formatRupiah(number).replace(/\u00A0/g, ' ');
        }

        // Format input dengan pemisahan ribuan
        function formatInputNumber(value) {
            value = value.replace(/[^\d]/g, '');
            return value.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        // Parse input ke angka
        function parseRupiah(value) {
            return parseFloat(value.replace(/[^\d]/g, '')) || 0;
        }

        // Event listener untuk input jumlah pinjaman
        document.getElementById('loanAmount').addEventListener('input', function(e) {
            const cursorPosition = e.target.selectionStart;
            const value = e.target.value.replace(/[^\d]/g, '');
            e.target.value = formatInputNumber(value);
            const newValue = e.target.value;
            const newCursorPosition = cursorPosition + (newValue.length - value.length);
            e.target.setSelectionRange(newCursorPosition, newCursorPosition);
        });

        function calculateLoan() {
            const loanAmount = parseRupiah(document.getElementById('loanAmount').value);
            const loanTerm = parseInt(document.getElementById('loanTerm').value);
            const interestRate = parseFloat(document.getElementById('interestRate').value) / 100 / 12; // Bulanan
            const interestType = document.getElementById('interestType').value;
            const resultDiv = document.getElementById('result');
            const exportButton = document.getElementById('exportButton');
            const amortizationBody = document.getElementById('amortizationBody');

            if (!loanAmount || !loanTerm || !interestRate) {
                alert('Harap isi semua kolom dengan benar.');
                return;
            }

            let monthlyPayment, totalInterest = 0, totalPayment;
            let schedule = [];

            if (interestType === 'flat') {
                monthlyPayment = (loanAmount / loanTerm) + (loanAmount * interestRate);
                totalInterest = loanAmount * interestRate * loanTerm;
                totalPayment = loanAmount + totalInterest;

                let remainingBalance = loanAmount;
                for (let i = 1; i <= loanTerm; i++) {
                    const interest = loanAmount * interestRate;
                    const principal = monthlyPayment - interest;
                    remainingBalance -= principal;
                    schedule.push({
                        month: i,
                        payment: monthlyPayment,
                        principal,
                        interest,
                        balance: remainingBalance,
                        principalPercent: (principal / monthlyPayment * 100).toFixed(2),
                        interestPercent: (interest / monthlyPayment * 100).toFixed(2)
                    });
                }
            } else if (interestType === 'effective') {
                monthlyPayment = loanAmount * interestRate / (1 - Math.pow(1 + interestRate, -loanTerm));
                let remainingBalance = loanAmount;

                for (let i = 1; i <= loanTerm; i++) {
                    const interest = remainingBalance * interestRate;
                    const principal = monthlyPayment - interest;
                    remainingBalance -= principal;
                    totalInterest += interest;
                    schedule.push({
                        month: i,
                        payment: monthlyPayment,
                        principal,
                        interest,
                        balance: remainingBalance,
                        principalPercent: (principal / monthlyPayment * 100).toFixed(2),
                        interestPercent: (interest / monthlyPayment * 100).toFixed(2)
                    });
                }
                totalPayment = loanAmount + totalInterest;
            } else if (interestType === 'annuity') {
                monthlyPayment = loanAmount * (interestRate * Math.pow(1 + interestRate, loanTerm)) / (Math.pow(1 + interestRate, loanTerm) - 1);
                let remainingBalance = loanAmount;

                for (let i = 1; i <= loanTerm; i++) {
                    const interest = remainingBalance * interestRate;
                    const principal = monthlyPayment - interest;
                    remainingBalance -= principal;
                    totalInterest += interest;
                    schedule.push({
                        month: i,
                        payment: monthlyPayment,
                        principal,
                        interest,
                        balance: remainingBalance,
                        principalPercent: (principal / monthlyPayment * 100).toFixed(2),
                        interestPercent: (interest / monthlyPayment * 100).toFixed(2)
                    });
                }
                totalPayment = loanAmount + totalInterest;
            }

            // Tampilkan hasil
            document.getElementById('monthlyPayment').textContent = formatRupiah(monthlyPayment);
            document.getElementById('totalInterest').textContent = formatRupiah(totalInterest);
            document.getElementById('totalPayment').textContent = formatRupiah(totalPayment);
            resultDiv.classList.remove('hidden');
            exportButton.classList.remove('hidden');

            // Tabel Angsuran
            amortizationBody.innerHTML = '';
            schedule.forEach(row => {
                const tr = document.createElement('tr');
                tr.classList.add('hover:bg-gray-50');
                tr.innerHTML = `
                    <td class="px-6 py-3">${row.month}</td>
                    <td class="px-6 py-3">${formatRupiah(row.payment)}</td>
                    <td class="px-6 py-3">${formatRupiah(row.principal)}</td>
                    <td class="px-6 py-3">${formatRupiah(row.interest)}</td>
                    <td class="px-6 py-3">${formatRupiah(row.balance)}</td>
                `;
                amortizationBody.appendChild(tr);
            });

            // Simpan data untuk ekspor
            window.loanData = {
                loanAmount,
                loanTerm,
                interestRate: interestRate * 12 * 100, // Kembali ke tahunan
                interestType,
                monthlyPayment,
                totalInterest,
                totalPayment,
                schedule
            };
        }

        function exportToCSV() {
            if (!window.loanData) {
                alert('Silakan hitung terlebih dahulu.');
                return;
            }

            const { loanAmount, loanTerm, interestRate, interestType, monthlyPayment, totalInterest, totalPayment, schedule } = window.loanData;

            // Metadata Pinjaman
            let csvContent = 'data:text/csv;charset=utf-8,';
            csvContent += 'Informasi Pinjaman\n';
            csvContent += `Jumlah Pinjaman,"${formatRupiahForCSV(loanAmount)}"\n`;
            csvContent += `Tenor (Bulan),${loanTerm}\n`;
            csvContent += `Suku Bunga (% per Tahun),${interestRate.toFixed(2)}\n`;
            csvContent += `Jenis Bunga,${interestType.charAt(0).toUpperCase() + interestType.slice(1)}\n`;
            csvContent += '\nRingkasan\n';
            csvContent += `Angsuran Bulanan,"${formatRupiahForCSV(monthlyPayment)}"\n`;
            csvContent += `Total Bunga,"${formatRupiahForCSV(totalInterest)}"\n`;
            csvContent += `Total Pembayaran,"${formatRupiahForCSV(totalPayment)}"\n`;
            csvContent += '\n';

            // Tabel Amortisasi
            const headers = [
                'Bulan',
                'Angsuran (IDR)',
                'Pokok (IDR)',
                'Bunga (IDR)',
                'Sisa Pinjaman (IDR)',
                'Persentase Pokok (%)',
                'Persentase Bunga (%)'
            ];
            const rows = schedule.map(row => [
                row.month,
                `"${formatRupiahForCSV(row.payment)}"`,
                `"${formatRupiahForCSV(row.principal)}"`,
                `"${formatRupiahForCSV(row.interest)}"`,
                `"${formatRupiahForCSV(row.balance)}"`,
                row.principalPercent,
                row.interestPercent
            ]);

            csvContent += 'Tabel Amortisasi\n';
            csvContent += headers.join(',') + '\n';
            rows.forEach(row => {
                csvContent += row.join(',') + '\n';
            });

            const encodedUri = encodeURI(csvContent);
            const link = document.createElement('a');
            link.setAttribute('href', encodedUri);
            link.setAttribute('download', 'kalkulator_kredit_detail.csv');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
</body>
</html>