Google App Script : Cetak Kwitansi Online dengan Google Apps Script dan Google Sheets

Tutorial Google App Script : Cetak Kwitansi Online dengan Google Apps Script dan Google Sheets

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function include(index) {
  return HtmlService.createHtmlOutputFromFile(index)
      .getContent();
}

function addDataToSpreadsheet(noKwitansi, namaPenerima, alamat, items) {
  var ss = SpreadsheetApp.openById("Ganti dengan ID Googel Spreadsheet anda");
  var ws = ss.getSheetByName("data");
  
  items.forEach(function(item) {
    var rowData = [noKwitansi, namaPenerima, alamat].concat(item);
    ws.appendRow(rowData);
  });
}

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kwitansi</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        input[type="text"],
        input[type="number"],
        button {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
        }
        .button-print {
            background: #808280;
            background-image: -webkit-linear-gradient(top, #808280, #262626);
            background-image: -moz-linear-gradient(top, #808280, #262626);
            background-image: -ms-linear-gradient(top, #808280, #262626);
            background-image: -o-linear-gradient(top, #808280, #262626);
            background-image: linear-gradient(to bottom, #808280, #262626);
            -webkit-border-radius: 28px;
            -moz-border-radius: 28px;
            border-radius: 28px;
            font-family: Arial;
            color: #ffffff;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            cursor: pointer;
        }
        .button-print:hover {
            background: #9e9e9e;
            background-image: -webkit-linear-gradient(top, #9e9e9e, #6b6b6b);
            background-image: -moz-linear-gradient(top, #9e9e9e, #6b6b6b);
            background-image: -ms-linear-gradient(top, #9e9e9e, #6b6b6b);
            background-image: -o-linear-gradient(top, #9e9e9e, #6b6b6b);
            background-image: linear-gradient(to bottom, #9e9e9e, #6b6b6b);
            text-decoration: none;
        }
        .button-submit {
            background-color: #4285F4;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 28px;
            -moz-border-radius: 28px;
            border-radius: 28px;
            font-family: Arial;
            color: #ffffff;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            cursor: pointer;
        }
        .button-submit:hover {
            background: #3cb0fd;
            background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
            background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
            text-decoration: none;
        }
        .button-add {
            background: #00c400;
            background-image: -webkit-linear-gradient(top, #00c400, #009118);
            background-image: -moz-linear-gradient(top, #00c400, #009118);
            background-image: -ms-linear-gradient(top, #00c400, #009118);
            background-image: -o-linear-gradient(top, #00c400, #009118);
            background-image: linear-gradient(to bottom, #00c400, #009118);
            -webkit-border-radius: 28px;
            -moz-border-radius: 28px;
            border-radius: 28px;
            font-family: Arial;
            color: #ffffff;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            cursor: pointer;
        }
        .button-add:hover {
            background: #4CAF50;
            background-image: -webkit-linear-gradient(top, #4CAF50, #31a34d);
            background-image: -moz-linear-gradient(top, #4CAF50, #31a34d);
            background-image: -ms-linear-gradient(top, #4CAF50, #31a34d);
            background-image: -o-linear-gradient(top, #4CAF50, #31a34d);
            background-image: linear-gradient(to bottom, #4CAF50, #31a34d);
        }
        .button-new {
            background: #F4B400;
            background-image: -webkit-linear-gradient(top, #F4B400, #c9a814);
            background-image: -moz-linear-gradient(top, #F4B400, #c9a814);
            background-image: -ms-linear-gradient(top, #F4B400, #c9a814);
            background-image: -o-linear-gradient(top, #F4B400, #c9a814);
            background-image: linear-gradient(to bottom, #F4B400, #c9a814);
            -webkit-border-radius: 28px;
            -moz-border-radius: 28px;
            border-radius: 28px;
            font-family: Arial;
            color: #ffffff;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            cursor: pointer;
        }
        .button-new:hover {
            background: #afdea5;
            background-image: -webkit-linear-gradient(top, #afdea5, #31a34d);
            background-image: -moz-linear-gradient(top, #afdea5, #31a34d);
            background-image: -ms-linear-gradient(top, #afdea5, #31a34d);
            background-image: -o-linear-gradient(top, #afdea5, #31a34d);
            background-image: linear-gradient(to bottom, #afdea5, #31a34d);
            text-decoration: none;
        }
        .disabled-button {
            background-color: #ccc;
            color: #999;
            cursor: not-allowed;
        }
        .form label {
            display: block;
            margin-bottom: 8px;
        }
        .info, .form {
            margin-bottom: 15px;
        }
        .info {
            display: flex;
            flex-direction: column;
        }
        .info p {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .info label {
            width: 150px;
            flex-shrink: 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid black;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        .footer .left, .footer .right {
            width: 45%;
        }
        .footer .right {
            text-align: right;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        @media print {
            .button-submit {
                display: none;
            }
            .button-print {
                display: none;
            }
            .form {
                display: none;
            }
            .print-button {
                display: none;
            }
            .aksi-column {
                display: none;
            }
        }
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #06940B;
            background-color: rgba(255, 255, 255, 0.9);
            z-index: 9999;
        }
        .loading-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Kwitansi</h1>
</div>
<div id="loading" class="loading">
    <div class="loading-text"><h2>Loading...</h2></div>
</div>
<form id="myForm" onsubmit="event.preventDefault(); simpanData()">
    <div class="form">
        <label>No Kwitansi <input type="text" id="inputNoKwitansi" placeholder="" readonly ></label>
        <label>Nama Penerima<input type="text" id="inputNamaPenerima" placeholder="Penerima" required></label>
        <label>Alamat<input type="text" id="inputAlamat" placeholder="Masukan Alamat" required></label>
        <label>Deskripsi<input type="text" id="inputDeskripsi" placeholder="Isi Deskripsi" required></label>
        <label>Kuantitas<input type="number" id="inputKuantitas" placeholder="Isi Kuantitas dengan angka" required></label>
        <label>Harga Satuan<input type="text" id="inputHargaSatuan" placeholder="Isi Harga dengan angka" required></label>
        <div class="button-container">
            <button class="button-add" type="button" onclick="addItem()">Add</button>
            <button class="button-new" type="button" onclick="reloadPage()">New</button>
            <button id="printButton" class="button-print disabled-button" onclick="checkAndPrint()">Print</button>
        </div>
    </div>
</form>
<div class="info">
    <p><label>No Kwitansi</label>:&nbsp;<span id="noKwitansi"></span></p>
    <p><label>Tanggal:</label>:&nbsp;<span id="tanggal"></span></p>
    <p><label>Nama Penerima</label>:&nbsp;<span id="namaPenerima"></span></p>
    <p><label>Alamat:</label>:&nbsp;<span id="alamat"></span></p>
</div>
<table>
    <thead>
    <tr>
        <th>No</th>
        <th>Deskripsi</th>
        <th>Kuantitas</th>
        <th>Harga Satuan</th>
        <th>Total</th>
        <th class="aksi-column">Aksi</th>
    </tr>
    </thead>
    <tbody id="itemTableBody">
    </tbody>
</table>
<div class="footer">
    <div class="left">
        <p><strong>Terbilang:</strong> <span id="terbilang"></span></p>
    </div>
    <div class="right">
        <p><strong>Grand Total:</strong> <span id="total"></span></p><br>
    </div>
</div>
<button class="button-submit" type="submit" onclick="simpanData()">Save</button>
<script>
let isDataSaved = false;  // Flag to check if data is saved

function reloadPage() {
    document.getElementById('loading').style.display = 'block';
    window.open("https://script.google.com/macros/s/ganti-dengan-id-deploy/exec",'_top');
    setTimeout(function(){
        document.getElementById('loading').style.display = 'none';
    }, 3000);
}

function generateNoKwitansi() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const noKwitansi = `KW${year}${month}${day}${Math.floor(Math.random() * 1000)}`;
    document.getElementById('inputNoKwitansi').value = noKwitansi;
}

window.onload = generateNoKwitansi;

function updateKwitansi() {
    document.getElementById('noKwitansi').textContent = document.getElementById('inputNoKwitansi').value;
    document.getElementById('namaPenerima').textContent = document.getElementById('inputNamaPenerima').value;
    document.getElementById('alamat').textContent = document.getElementById('inputAlamat').value;
}

function lockRecipientAddress() {
    document.getElementById('inputNamaPenerima').readOnly = true;
    document.getElementById('inputAlamat').readOnly = true;
}

function clearFormInput() {
    document.getElementById('inputDeskripsi').value = '';
    document.getElementById('inputKuantitas').value = '';
    document.getElementById('inputHargaSatuan').value = '';
}

function addItem() {
    const deskripsi = document.getElementById('inputDeskripsi').value;
    const kuantitas = parseInt(document.getElementById('inputKuantitas').value);
    const hargaSatuan = parseInt(document.getElementById('inputHargaSatuan').value.replace(/\D/g, ''));
    const total = kuantitas * hargaSatuan;

    if (deskripsi === "" || isNaN(kuantitas) || isNaN(hargaSatuan) || kuantitas <= 0 || hargaSatuan <= 0) {
        alert("Harap lengkapi semua field sebelum menambahkan item.");
        return;
    }

    const tbody = document.getElementById('itemTableBody');
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td>${tbody.rows.length + 1}</td>
        <td>${deskripsi}</td>
        <td>${kuantitas}</td>
        <td>Rp ${hargaSatuan.toLocaleString('id-ID')}</td>
        <td>Rp ${total.toLocaleString('id-ID')}</td>
        <td class="aksi-column">
            <button onclick="editItem(this)">Edit</button>
            <button onclick="deleteItem(this)">Delete</button>
        </td>
    `;
    tbody.appendChild(tr);

    updateTotal();
    updateKwitansi();
    lockRecipientAddress();
    clearFormInput();
}

function editItem(button) {
    const tr = button.parentElement.parentElement;
    const cells = tr.getElementsByTagName('td');

    document.getElementById('inputDeskripsi').value = cells[1].textContent;
    document.getElementById('inputKuantitas').value = cells[2].textContent;
    document.getElementById('inputHargaSatuan').value = cells[3].textContent.replace(/[^0-9]/g, '');

    deleteItem(button);
}

function deleteItem(button) {
    const tr = button.parentElement.parentElement;
    tr.parentElement.removeChild(tr);

    updateTotal();
    updateKwitansi();

    const tbody = document.getElementById('itemTableBody');
    for (let i = 0; i < tbody.rows.length; i++) {
        tbody.rows[i].cells[0].textContent = i + 1;
    }
}

function updateTotal() {
    const tbody = document.getElementById('itemTableBody');
    let total = 0;
    for (let i = 0; i < tbody.rows.length; i++) {
        const row = tbody.rows[i];
        const hargaSatuanText = row.cells[3].textContent.trim();
        const hargaSatuan = parseInt(hargaSatuanText.split(' ')[1].replace(/\./g, ''));
        const kuantitas = parseInt(row.cells[2].textContent);
        const rowTotal = hargaSatuan * kuantitas;
        total += rowTotal;
    }
    document.getElementById('total').textContent = `Rp ${total.toLocaleString('id-ID')}`;
    document.getElementById('terbilang').textContent = terbilang(total) + ' rupiah';
}

function terbilang(angka) {
    const bilangan = ["", "satu", "dua", "tiga", "empat", "lima", "enam", "tujuh", "delapan", "sembilan", "sepuluh", "sebelas"];
    if (angka < 12) {
        return bilangan[angka];
    } else if (angka < 20) {
        return bilangan[angka - 10] + " belas";
    } else if (angka < 100) {
        return bilangan[Math.floor(angka / 10)] + " puluh " + bilangan[angka % 10];
    } else if (angka < 200) {
        return "seratus " + terbilang(angka - 100);
    } else if (angka < 1000) {
        return bilangan[Math.floor(angka / 100)] + " ratus " + terbilang(angka % 100);
    } else if (angka < 2000) {
        return "seribu " + terbilang(angka - 1000);
    } else if (angka < 1000000) {
        return terbilang(Math.floor(angka / 1000)) + " ribu " + terbilang(angka % 1000);
    } else if (angka < 1000000000) {
        return terbilang(Math.floor(angka / 1000000)) + " juta " + terbilang(angka % 1000000);
    } else if (angka < 1000000000000) {
        return terbilang(Math.floor(angka / 1000000000)) + " milyar " + terbilang(angka % 1000000000);
    } else if (angka < 1000000000000000) {
        return terbilang(Math.floor(angka / 1000000000000)) + " triliun " + terbilang(angka % 1000000000000);
    } else {
        return "Angka terlalu besar";
    }
}

function formatCurrency(input) {
    let cleanedInput = input.replace(/\D/g, '');
    let number = parseInt(cleanedInput);
    let formattedInput = number.toLocaleString('id-ID');
    return formattedInput;
}

document.getElementById('inputHargaSatuan').addEventListener('input', function() {
    let formattedValue = formatCurrency(this.value);
    this.value = formattedValue;
});

function simpanData() {
    var noKwitansi = document.getElementById('inputNoKwitansi').value;
    var namaPenerima = document.getElementById('inputNamaPenerima').value;
    var alamat = document.getElementById('inputAlamat').value;

    var items = [];
    var tbody = document.getElementById('itemTableBody');
    for (var i = 0; i < tbody.rows.length; i++) {
        var cells = tbody.rows[i].cells;
        var deskripsi = cells[1].textContent;
        var kuantitas = parseInt(cells[2].textContent);
        var hargaSatuan = parseInt(cells[3].textContent.replace(/\D/g, ''));
        items.push([deskripsi, kuantitas, hargaSatuan]);
    }

    console.log("No Kwitansi:", noKwitansi);
    console.log("Nama Penerima:", namaPenerima);
    console.log("Alamat:", alamat);
    console.log("Items:", items);

    google.script.run
        .withSuccessHandler(function() {
            alert("Data berhasil disimpan!");
            isDataSaved = true;  // Set the flag to true when data is saved
            document.getElementById('printButton').disabled = false;  // Enable the print button
            document.getElementById('printButton').classList.remove('disabled-button');
        })
        .addDataToSpreadsheet(noKwitansi, namaPenerima, alamat, items);
}

function checkAndPrint() {
    if (!isDataSaved) {
        alert("Data Belum siap di cetak, Anda Harus simpan terlebih dahulu");
        return;
    }
    updateKwitansi();
    window.print();
}

const options = { timeZone: 'Asia/Jakarta', year: 'numeric', month: 'long', day: 'numeric' };
const tanggal = new Date().toLocaleDateString('id-ID', options);
document.getElementById('tanggal').textContent = tanggal;
</script>
</body>
</html>

Search This Blog

Search

Google App Script : Cetak Kwitansi Online dengan Google Apps Script dan Google Sheets

Sidebar Ads

Adsense Sidebar AMP

Popular Posts

Labels