Cara Membuat Aplikasi Pencetak Kartu Siswa dengan Google App Script

Membuat aplikasi pencetak kartu siswa sendiri kini bisa dilakukan dengan mudah dan gratis menggunakan Google Apps Script dan Google Sheets. Dalam tutorial ini, saya akan membagikan kode lengkap untuk membuat aplikasi web yang responsif, mendukung barcode otomatis, dan siap cetak di kertas A4.

Fitur Aplikasi:

✅ Database terintegrasi Google Sheets.
✅ Barcode otomatis (Scan-able).
✅ Desain kartu profesional (Depan & Belakang).
✅ Layout cetak A4 otomatis (4 Siswa/Lembar).
✅ Mobile Friendly (Bisa diakses dari HP).

Langkah 1: Persiapan Database

Buat Google Sheet baru, ubah nama sheet menjadi Sheet1, dan buat header kolom di baris pertama sebagai berikut:

Kolom A: NAMA
Kolom B: NIS
Kolom C: T.T.L
Kolom D: KELAS
Kolom E: ALAMAT

Langkah 2: Gunakan Prompt AI (Opsional)

Jika Anda ingin memodifikasi kode ini menggunakan AI (seperti ChatGPT atau Gemini), Anda bisa menggunakan prompt berikut:

Prompt AI

Saya ingin membuat aplikasi web menggunakan Google Apps Script dan HTML untuk mencetak Kartu Pelajar Siswa.

Spesifikasi:
1. Sumber data dari Google Sheet (Nama, NIS, TTL, Kelas, Alamat).
2. Tampilan Dashboard responsif di HP (Mobile Friendly).
3. Fitur Filter Kelas dan Pencarian Nama Siswa.
4. Desain Kartu: 
   - Ukuran standar ID Card.
   - Ada Logo Kabupaten dan Sekolah (timbul).
   - Ada Barcode otomatis berdasarkan NIS (gunakan JsBarcode).
   - Desain profesional warna Biru & Kuning.
5. Layout Cetak:
   - Kertas A4 Portrait.
   - Margin minimal.
   - Satu halaman A4 muat 4 siswa (8 sisi: depan & belakang).
6. Berikan kode lengkap file "Kode.gs" dan "Index.html".

Langkah 3: Kode Google Apps Script (Kode.gs)

Buka Ekstensi > Apps Script di Google Sheet Anda. Hapus semua kode yang ada, lalu salin kode di bawah ini:

Kode.gs (Back-end)

const SPREADSHEET_ID = 'GANTI_DENGAN_ID_SHEET_ANDA_DISINI';
const SHEET_NAME = 'Sheet1'; 

function doGet(e) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate()
      .setTitle('Aplikasi Kartu Pelajar')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function getStudentData() {
  try {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
    const sheet = ss.getSheetByName(SHEET_NAME);
    const data = sheet.getDataRange().getValues();
    
    if (data.length > 0) data.shift(); // Hapus Header
    
    // Mapping Data
    const students = data.map(row => {
      if (!row[0]) return null;
      return {
        nama: row[0],
        nis: row[1] ? row[1].toString() : "",
        ttl: row[2],
        kelas: row[3],
        alamat: row[4],
      };
    }).filter(item => item !== null);

    return JSON.stringify(students);
  } catch (e) {
    return JSON.stringify({error: e.message});
  }
}

*Jangan lupa ganti SPREADSHEET_ID dengan ID Google Sheet Anda.

Langkah 4: Kode Tampilan (Index.html)

Buat file baru di Apps Script, beri nama Index, lalu salin kode lengkap berikut ini:

Index.html (Front-end)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aplikasi Cetak Kartu Siswa</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
    <style>
        :root { --blue-primary: #083d56; --yellow-accent: #ffc800; --bg-light: #f4f6f8; }
        body { font-family: 'Roboto', sans-serif; background-color: var(--bg-light); margin: 0; color: #333; }
        
        /* DASHBOARD STYLE */
        .app-container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .dash-header { background: linear-gradient(135deg, var(--blue-primary), #052a3d); color: white; padding: 30px 20px; border-radius: 15px; text-align: center; margin-bottom: 25px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
        .controls-wrapper { background: white; padding: 20px; border-radius: 12px; position: sticky; top: 10px; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.08); display:none; }
        .controls-flex { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
        .input-group { flex: 1; min-width: 200px; }
        select, input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; }
        .btn { background-color: var(--yellow-accent); color: var(--blue-primary); border: none; padding: 12px 30px; border-radius: 50px; font-weight: bold; cursor: pointer; transition: 0.2s; }
        .btn-print { background-color: var(--blue-primary); color: white; }
        .loader { border: 5px solid #f3f3f3; border-top: 5px solid var(--blue-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; display: none; }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* PRINT STYLE A4 */
        #printArea { display: none; margin-top: 30px; }
        .page-a4 { width: 210mm; height: 297mm; background: white; padding: 10mm; box-sizing: border-box; display: grid; grid-template-rows: repeat(4, 1fr); gap: 5mm; margin: 0 auto 10mm auto; page-break-after: always; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
        .student-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #eee; }

        /* CARD DESIGN */
        .card-box { width: 8.6cm; height: 5.4cm; position: relative; background: white; border: 1px solid #ccc; overflow: hidden; display: flex; flex-direction: column; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
        .card-header { height: 1.4cm; background-color: var(--blue-primary); display: flex; align-items: center; padding: 0 5px; color: white; z-index: 5; }
        .header-text { text-align: center; flex-grow: 1; line-height: 1.1; }
        .logo-badge { width: 1.0cm; height: 1.0cm; background: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 3px 5px rgba(0,0,0,0.4); z-index: 10; }
        .logo-img { width: 80%; height: auto; object-fit: contain; }
        .footer-wave { position: absolute; bottom: 0; width: 100%; height: 1.5cm; z-index: 1; }
        .wave-shape { position: absolute; bottom: 0; width: 100%; height: 0.6cm; background: var(--blue-primary); border-radius: 100% 100% 0 0; z-index: 2; }
        .blob-left, .blob-right { position: absolute; bottom: -1cm; width: 3.5cm; height: 3cm; background: var(--yellow-accent); border-radius: 50%; z-index: 1; }
        .blob-left { left: -0.5cm; } .blob-right { right: -0.5cm; }
        
        /* CONTENT */
        .front-content, .back-content { flex-grow: 1; padding: 5px 10px; display: flex; align-items: center; position: relative; z-index: 5; }
        .foto-placeholder { width: 2.0cm; height: 2.6cm; background: #e0e0e0; border: 2px solid white; display:flex; align-items:center; justify-content:center; font-size:6pt; margin-right:10px; text-align:center; color:#555; }
        .data-area { flex: 1; }
        table.data-table { width: 100%; border-collapse: collapse; }
        table.data-table td { font-size: 6pt; font-weight: 700; padding: 1px 0; color: #000; vertical-align: top; }
        .barcode-svg { height: 25px; width: auto; max-width: 100%; margin-top: 2px; }
        
        ul.rules { font-size: 5.5pt; padding-left: 15px; margin:0; line-height:1.4; }
        .ttd-box { position: absolute; right: 10px; bottom: 1.2cm; text-align: center; width: 2.5cm; }
        .ttd-name { border-bottom: 1px solid black; font-size: 6pt; font-weight: 900; }

        @media print {
            body { background: white; }
            .app-container { display: none !important; }
            #printArea { display: block !important; margin:0; }
            .page-a4 { margin: 0; box-shadow: none; page-break-after: always; }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="dash-header">
            <h1>APLIKASI CETAK KARTU</h1>
            <p>SMP NEGERI 3 KERINCI</p>
        </div>
        <div style="text-align: center; margin-bottom: 20px;" id="initSection">
            <button class="btn" onclick="loadData()">🔄 MUAT DATA SISWA</button>
            <div class="loader" id="loader"></div>
        </div>
        <div class="controls-wrapper" id="controlPanel">
            <div class="controls-flex">
                <div class="input-group"><label>Filter Kelas</label><select id="filterKelas" onchange="renderCards()"><option value="all">Semua Kelas</option></select></div>
                <div class="input-group"><label>Cari Nama</label><input type="text" id="searchName" placeholder="Ketik nama..." oninput="renderCards()"></div>
                <div class="input-group"><label> </label><button class="btn btn-print" onclick="window.print()" style="width:100%">🖨️ CETAK KARTU</button></div>
            </div>
            <p style="text-align:center; font-size:0.8em; color:#666; margin-top:10px;">*Gunakan Kertas A4, Layout Portrait, Margin None.</p>
        </div>
    </div>
    <div id="printArea"></div>
    <script>
        let studentData = [];
        function loadData() {
            document.getElementById('initSection').querySelector('button').style.display = 'none';
            document.getElementById('loader').style.display = 'block';
            google.script.run.withSuccessHandler(onSuccess).withFailureHandler(alert).getStudentData();
        }
        function onSuccess(res) {
            document.getElementById('initSection').style.display = 'none';
            document.getElementById('controlPanel').style.display = 'block';
            document.getElementById('printArea').style.display = 'block';
            const data = JSON.parse(res);
            if(data.error) { alert(data.error); return; }
            studentData = data;
            const classes = [...new Set(data.map(s => s.kelas))].sort();
            const sel = document.getElementById('filterKelas');
            classes.forEach(c => { let opt = document.createElement('option'); opt.value = c; opt.innerText = c; sel.appendChild(opt); });
            renderCards();
        }
        function renderCards() {
            const container = document.getElementById('printArea'); container.innerHTML = '';
            const cls = document.getElementById('filterKelas').value;
            const key = document.getElementById('searchName').value.toLowerCase();
            const filtered = studentData.filter(s => { return ((cls === 'all') || (s.kelas == cls)) && s.nama.toLowerCase().includes(key); });
            if(filtered.length === 0) { container.innerHTML = '<p style="text-align:center; padding:20px;">Data tidak ditemukan.</p>'; return; }
            for(let i = 0; i < filtered.length; i += 4) {
                let page = document.createElement('div'); page.className = 'page-a4';
                let batch = filtered.slice(i, i + 4);
                batch.forEach(siswa => { page.appendChild(createCardRow(siswa)); });
                container.appendChild(page);
                setTimeout(() => { batch.forEach(s => { if(s.nis) JsBarcode("#bc-"+s.nis, s.nis, {format:"CODE128", width:1.3, height:25, displayValue:false, margin:0}); }); }, 100);
            }
        }
        function createCardRow(s) {
            let row = document.createElement('div'); row.className = 'student-row';
            const logoKab = "https://drive.google.com/thumbnail?id=1uZHh5ReKYrAL6ycC6nYXtnb6zhETXQlX";
            const logoSek = "https://drive.google.com/thumbnail?id=1QOvUSLtFM9-s0asnaZSCPXxsGOZnBUim";
            const header = `<div class="card-header"><div class="logo-badge"><img src="${logoKab}" class="logo-img"></div><div class="header-text"><div style="font-size:5pt">PEMERINTAHAN KABUPATEN KERINCI</div><div style="font-size:8pt;font-weight:900">SMP NEGERI 3 KERINCI</div></div><div class="logo-badge"><img src="${logoSek}" class="logo-img"></div></div>`;
            const footer = `<div class="footer-wave"><div class="blob-left"></div><div class="blob-right"></div><div class="wave-shape"></div></div>`;
            let back = `<div class="card-box">${header}<div class="back-content"><ul class="rules"><li>Kartu pelajar resmi.</li><li>Wajib dibawa setiap hari.</li><li>Dilarang merusak kartu.</li></ul><div class="ttd-box"><div style="font-size:5pt;font-weight:bold;margin-bottom:0.8cm">KEPALA SEKOLAH</div><div class="ttd-name">HAMDANI, S. PD</div></div></div>${footer}</div>`;
            let front = `<div class="card-box">${header}<div class="front-content"><div class="foto-placeholder">FOTO<br>3x4</div><div class="data-area"><div style="font-size:9pt;font-weight:900;font-style:italic;margin-bottom:3px">KARTU TANDA PELAJAR</div><table class="data-table"><tr><td style="width:1.2cm">NAMA</td><td>:</td><td>${s.nama}</td></tr><tr><td>NIS</td><td>:</td><td>${s.nis}</td></tr><tr><td>KELAS</td><td>:</td><td>${s.kelas}</td></tr></table><div style="margin-top:2px"><svg id="bc-${s.nis}" class="barcode-svg"></svg></div></div></div>${footer}</div>`;
            row.innerHTML = back + front; return row;
        }
    </script>
</body>
</html>