Source Code untuk Aplikasi Absensi, Input Nilai, Jurnal Mengajar Online dengan Appscript

Tanpa Login & Auto Sheet

Source Code Aplikasi Sekolah Digital
Absensi, Nilai & Agenda

Versi Ringan, Cepat, dan Modern (Apps Script)

Ini adalah versi pembaruan dari aplikasi manajemen sekolah berbasis Google Spreadsheet. Versi ini telah dioptimalkan untuk kecepatan dan kemudahan penggunaan dengan fitur utama:

Tanpa Login: Akses langsung ke dashboard untuk efisiensi.
Clean UI: Menggunakan ikon vektor, tanpa gambar berat.
Auto-Generate Database: Sheet (Tab) akan dibuat otomatis jika belum ada.
Full Responsive: Tampilan menyesuaikan layar HP, Tablet, dan Laptop.

Langkah 1: Kode Back-End (Server) Buka editor Apps Script, lalu salin kode di bawah ini ke file Code.gs. Kode ini menangani pembuatan database otomatis dan penyimpanan data.
Penting: Jangan lupa ganti ID Spreadsheet di baris ke-3.

Code.gs

// --- KONFIGURASI ---
// GANTI ID DI BAWAH INI DENGAN ID SPREADSHEET KOSONG ANDA
const SHEET_ID = "GANTI_DENGAN_ID_SPREADSHEET_ANDA_DISINI"; 

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

// --- HELPER (OTOMATIS BUAT SHEET & HEADER) ---
function getSheet(name) { 
  const ss = SpreadsheetApp.openById(SHEET_ID);
  let sheet = ss.getSheetByName(name);
  
  // Jika Sheet belum ada, buat baru dan kasih Header otomatis
  if (sheet == null) {
    sheet = ss.insertSheet(name);
    
    if (name === "DataSiswa") {
      sheet.appendRow(["No", "Nama Siswa"]); 
    } else if (name === "Absensi") {
      sheet.appendRow(["Waktu", "Nama", "Status"]); 
    } else if (name === "Nilai") {
      sheet.appendRow(["Waktu", "Jenis Ujian", "Nama", "Nilai", "Keterangan"]); 
    } else if (name === "Agenda") {
      sheet.appendRow(["Tanggal", "Jam", "Kelas", "Materi", "RPP", "Status", "Absen Siswa", "Keterangan"]); 
    }
  }
  return sheet; 
}

// --- SISWA ---
function getDaftarSiswa() {
  const sheet = getSheet("DataSiswa");
  if (sheet.getLastRow() < 2) return [];
  return sheet.getRange(2, 2, sheet.getLastRow() - 1, 1).getValues().flat();
}

function tambahSiswaBaru(nama) { 
  const sheet = getSheet("DataSiswa");
  sheet.appendRow([sheet.getLastRow(), nama]); 
}

function hapusSiswaPermanen(i) { 
  getSheet("DataSiswa").deleteRow(i + 2); 
}

// --- ABSENSI ---
function simpanAbsensiServer(data) {
  const sheet = getSheet("Absensi");
  const time = new Date();
  const rows = data.map(d => [time, d.nama, d.status]);
  if (rows.length > 0) {
    sheet.getRange(sheet.getLastRow()+1, 1, rows.length, 3).setValues(rows);
  }
  return "Absensi Tersimpan!";
}

function getRekapAbsensi(b, t) {
  const sheet = getSheet("Absensi");
  if (sheet.getLastRow() < 2) return [];
  const data = sheet.getRange(2, 1, sheet.getLastRow()-1, 3).getValues();
  const filtered = data.filter(r => { 
    let d = new Date(r[0]); 
    return d.getMonth() === (b-1) && d.getFullYear() == t; 
  });
  return filtered.map(r => [new Date(r[0]).toLocaleString('id-ID'), r[1], r[2]]);
}

// --- NILAI ---
function simpanNilaiServer(jenis, ket, dataNilai) {
  const sheet = getSheet("Nilai");
  const time = new Date();
  const rows = dataNilai.map(d => [time, jenis, d.nama, d.nilai, ket]);
  if (rows.length > 0) {
    sheet.getRange(sheet.getLastRow()+1, 1, rows.length, 5).setValues(rows);
  }
  return "Nilai Tersimpan!";
}

function getAllNilaiData() {
  const sheet = getSheet("Nilai");
  if (sheet.getLastRow() < 2) return [];
  const data = sheet.getRange(2, 1, sheet.getLastRow()-1, 5).getValues();
  return data.map(r => [new Date(r[0]).toLocaleDateString('id-ID'), r[1], r[2], r[3], r[4]]);
}

// --- AGENDA ---
function tambahAgenda(data) {
  getSheet("Agenda").appendRow(data);
  return "Agenda Disimpan!";
}

function hapusAgenda(i) { 
  getSheet("Agenda").deleteRow(i + 2); 
}

function getAgenda() {
  const sheet = getSheet("Agenda");
  if (!sheet || sheet.getLastRow() <= 1) return [];
  return sheet.getRange(2, 1, sheet.getLastRow()-1, 8).getDisplayValues();
}

function getAllAgendaData() {
  const sheet = getSheet("Agenda");
  if (sheet.getLastRow() < 2) return [];
  return sheet.getRange(2, 1, sheet.getLastRow()-1, 8).getDisplayValues();
}

Langkah 2: Tampilan Aplikasi (Front-End) Buat file baru bernama Index.html di Apps Script. Kode ini sudah mencakup CSS (Desain), HTML (Kerangka), dan JavaScript (Logika) dalam satu file. Tidak ada logo/gambar yang perlu di-upload.

Index.html

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

  <style>
    body { font-family: 'Roboto', sans-serif; background-color: #f4f6f9; overflow-x: hidden; }
    .hidden { display: none !important; }
    
    /* HEADER FIXED */
    .header-top {
        background: #ffffff;
        height: 70px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center; /* Center Content */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        border-bottom: 3px solid #1a1a40;
        position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
    }
    
    .header-text { text-align: center; }
    .header-text h1 { 
        font-family: 'Playfair Display', serif; 
        font-size: 1.2rem; 
        color: #1a1a40; 
        margin: 0; 
        font-weight: 700; 
        text-transform: uppercase; 
    }
    .header-text p { font-size: 0.85rem; color: #666; margin: 0; font-weight: bold; }

    @media (max-width: 480px) {
        .header-text h1 { font-size: 0.9rem; } 
        .header-text p { font-size: 0.7rem; }
    }

    /* SIDEBAR */
    .wrapper { display: flex; margin-top: 70px; }
    #sidebar {
        min-width: 260px; max-width: 260px; background: #1a1a40; color: #fff;
        min-height: calc(100vh - 70px); position: fixed; z-index: 1040; left: 0; top: 70px;
        transition: all 0.3s; box-shadow: 4px 0 10px rgba(0,0,0,0.1);
    }
    #sidebar.active { margin-left: -260px; } 

    .sidebar-profile { padding: 30px 20px; text-align: center; background: #131330; border-bottom: 1px solid #2c2c54; }
    .guru-icon {
        color: #cfd8dc; margin-bottom: 10px;
    }
    .guru-name { font-weight: bold; font-size: 1rem; margin-bottom: 2px; color: #fff; }
    .guru-role { font-size: 0.8rem; color: #aaa; }

    #sidebar ul { padding: 10px 0; list-style: none; }
    #sidebar ul li a { padding: 12px 25px; display: block; color: #cfd8dc; text-decoration: none; font-size: 0.9rem; border-left: 4px solid transparent; transition: 0.2s; }
    #sidebar ul li a:hover, #sidebar ul li a.active { background: #2c2c54; color: #fff; border-left: 4px solid #f1c40f; }

    /* CONTENT */
    #content { width: 100%; margin-left: 260px; padding: 20px; transition: all 0.3s; }
    #content.active { margin-left: 0; } 
    .btn-menu-float { display: none; margin-bottom: 15px; }

    @media (max-width: 768px) {
        #sidebar { margin-left: -260px; } 
        #sidebar.active { margin-left: 0; } 
        #content { margin-left: 0; }
        .btn-menu-float { display: block; } 
    }

    .card-custom { border: none; border-radius: 8px; box-shadow: 0 3px 6px rgba(0,0,0,0.05); background: white; margin-bottom: 20px; }
    .card-header-custom { background: #fff; border-bottom: 1px solid #eee; padding: 15px; font-weight: bold; color: #1a1a40; }
    .card-body-custom { padding: 20px; }
    
    .menu-card { cursor: pointer; border-radius: 10px; color: white; height: 100%; border:none; transition: 0.3s; position: relative; overflow: hidden; }
    .menu-card:hover { transform: translateY(-3px); }
    .bg-1 { background: #3498db; } .bg-2 { background: #2ecc71; }
    .bg-3 { background: #9b59b6; } .bg-4 { background: #e67e22; }
  </style>
</head>
<body>

<!-- HEADER TANPA LOGO -->
<header class="header-top" id="main-header">
    <div class="header-text">
        <h1>SISTEM INFORMASI SEKOLAH</h1>
        <p>APLIKASI GURU DIGITAL</p>
    </div>
</header>

<!-- APP WRAPPER (LANGSUNG TAMPIL) -->
<div id="app" class="wrapper">
  
  <nav id="sidebar">
    <div class="sidebar-profile">
       <!-- Ganti Foto dengan Ikon -->
       <i class="fas fa-user-circle fa-4x guru-icon"></i>
       <div class="guru-name">Administrator</div>
       <div class="guru-role">Panel Guru</div>
    </div>
    <ul>
      <li><a onclick="nav('home')" id="m-home" class="active"><i class="fas fa-home"></i> Dashboard</a></li>
      <li><a onclick="nav('siswa')" id="m-siswa"><i class="fas fa-users"></i> Data Siswa</a></li>
      <li><a onclick="nav('absen')" id="m-absen"><i class="fas fa-calendar-check"></i> Absensi</a></li>
      <li><a onclick="nav('nilai')" id="m-nilai"><i class="fas fa-edit"></i> Input Nilai</a></li>
      <li><a onclick="nav('agenda')" id="m-agenda"><i class="fas fa-book"></i> Agenda Mengajar</a></li>
    </ul>
  </nav>

  <div id="content">
    <button class="btn btn-primary btn-menu-float" onclick="toggleSidebar()"><i class="fas fa-bars"></i> Menu</button>

    <!-- DASHBOARD -->
    <div id="v-home" class="view">
      <div class="alert alert-primary">Selamat Datang di <strong>Aplikasi Sekolah Digital</strong>. Silakan pilih menu di bawah.</div>
      <div class="row g-3">
        <div class="col-6 col-md-3"><div class="card menu-card bg-1 p-4 text-center" onclick="nav('siswa')"><i class="fas fa-users fa-2x mb-2"></i><h5>Siswa</h5></div></div>
        <div class="col-6 col-md-3"><div class="card menu-card bg-2 p-4 text-center" onclick="nav('absen')"><i class="fas fa-calendar-check fa-2x mb-2"></i><h5>Absen</h5></div></div>
        <div class="col-6 col-md-3"><div class="card menu-card bg-3 p-4 text-center" onclick="nav('nilai')"><i class="fas fa-star fa-2x mb-2"></i><h5>Nilai</h5></div></div>
        <div class="col-6 col-md-3"><div class="card menu-card bg-4 p-4 text-center" onclick="nav('agenda')"><i class="fas fa-book fa-2x mb-2"></i><h5>Agenda</h5></div></div>
      </div>
    </div>

    <!-- SISWA -->
    <div id="v-siswa" class="view hidden">
       <div class="card card-custom"><div class="card-header-custom">Data Siswa</div><div class="card-body-custom">
         <div class="input-group mb-3"><input id="nama-baru" class="form-control" placeholder="Nama Siswa Baru"><button class="btn btn-success" onclick="addSiswa()">Simpan</button></div>
         <table class="table table-striped"><tbody id="list-siswa"></tbody></table>
       </div></div>
    </div>

    <!-- ABSEN -->
    <div id="v-absen" class="view hidden">
      <div class="card card-custom mb-3"><div class="card-header-custom">Input Absensi</div><div class="card-body-custom">
          <div class="row g-2 mb-2">
              <div class="col-6"><button onclick="setAll('Hadir')" class="btn btn-success w-100">Hadir Semua</button></div>
          </div>
          <div class="table-responsive"><table class="table table-bordered"><thead class="table-dark"><tr><th>Nama</th><th>Status</th></tr></thead><tbody id="tbl-absen"></tbody></table></div>
          <button onclick="saveAbsen()" class="btn btn-primary w-100 mt-2">SIMPAN ABSENSI</button>
      </div></div>
      <div class="card card-custom"><div class="card-header-custom">Rekap</div><div class="card-body-custom">
          <div class="row g-2"><div class="col-4"><input type="number" id="f-bln" class="form-control" placeholder="Bln"></div><div class="col-4"><input type="number" id="f-thn" class="form-control" value="2025"></div><div class="col-4"><button onclick="loadRekapAbsen()" class="btn btn-info w-100 text-white">Cek</button></div></div>
          <div class="table-responsive mt-2"><table class="table table-sm table-bordered" id="tbl-rekap-absen"></table></div>
          <div class="d-flex gap-2 mt-3"><button onclick="dlAbsenPDF()" class="btn btn-danger w-100">Download PDF</button></div>
      </div></div>
    </div>

    <!-- NILAI -->
    <div id="v-nilai" class="view hidden">
      <div class="card card-custom mb-3"><div class="card-header-custom">Input Nilai</div><div class="card-body-custom">
          <div class="row g-2 mb-2">
             <div class="col-6"><select id="j-ujian" class="form-select"><option>UH</option><option>UTS</option><option>UAS</option></select></div>
             <div class="col-6"><input id="ket-ujian" class="form-control" placeholder="Keterangan"></div>
          </div>
          <div class="table-responsive"><table class="table table-bordered"><thead class="table-dark"><tr><th>Nama</th><th>Nilai</th></tr></thead><tbody id="tbl-input-nilai"></tbody></table></div>
          <button onclick="saveNilai()" class="btn btn-primary w-100 mt-2">SIMPAN NILAI</button>
      </div></div>
      <div class="card card-custom"><div class="card-header-custom">Data Nilai</div><div class="card-body-custom">
          <button onclick="loadDataNilai()" class="btn btn-info text-white mb-3">Cek Nilai</button>
          <div class="table-responsive"><table class="table table-bordered table-sm" id="tbl-view-nilai"><thead class="table-secondary"><tr><th>Tgl</th><th>Jns</th><th>Nama</th><th>Nil</th><th>Ket</th></tr></thead><tbody id="tbl-body-nilai"></tbody></table></div>
          <div class="d-flex gap-2 mt-3"><button onclick="dlNilaiCSV()" class="btn btn-success w-50">CSV</button><button onclick="dlNilaiPDF()" class="btn btn-danger w-50">PDF</button></div>
      </div></div>
    </div>

    <!-- AGENDA -->
    <div id="v-agenda" class="view hidden">
      <div class="card card-custom mb-3"><div class="card-header-custom">Isi Agenda</div><div class="card-body-custom">
          <form id="f-agenda" class="row g-2">
             <div class="col-6"><label>Tgl</label><input type="date" id="a-tgl" class="form-control"></div>
             <div class="col-3"><label>Jam</label><input type="text" id="a-jam" class="form-control"></div>
             <div class="col-3"><label>Kls</label><input type="text" id="a-kls" class="form-control"></div>
             <div class="col-12"><label>Materi</label><input type="text" id="a-materi" class="form-control"></div>
             <div class="col-4"><label>RPP</label><input type="text" id="a-rpp" class="form-control"></div>
             <div class="col-4"><label>Sts</label><select id="a-sts" class="form-select"><option>Selesai</option><option>Belum</option></select></div>
             <div class="col-4"><label>Absen</label><input type="text" id="a-absen" class="form-control"></div>
             <div class="col-12"><label>Ket</label><input type="text" id="a-ket" class="form-control"></div>
             <div class="col-12 mt-2"><button type="button" onclick="addAgenda()" class="btn btn-primary w-100">SIMPAN</button></div>
          </form>
      </div></div>
      <div class="card card-custom"><div class="card-header-custom">Data Agenda</div><div class="card-body-custom">
          <button onclick="loadAgenda()" class="btn btn-info w-100 text-white mb-2"><i class="fas fa-sync"></i> Cek Agenda</button>
          <div class="table-responsive"><table class="table table-bordered table-sm" id="tbl-view-agenda"><thead class="table-secondary"><tr><th>Tgl</th><th>Kls</th><th>Materi</th><th>Sts</th><th>Hapus</th></tr></thead><tbody></tbody></table></div>
          <div class="d-flex gap-2 mt-3"><button onclick="dlAgendaCSV()" class="btn btn-success w-50">CSV</button><button onclick="dlAgendaPDF()" class="btn btn-danger w-50">PDF</button></div>
      </div></div>
    </div>

  </div>
</div>

<script>
  let G_SISWA=[], RAW_NILAI=[], RAW_AGENDA=[], RAW_ABSEN=[];
  const { jsPDF } = window.jspdf;

  // INITIALIZE SAAT WEB DIBUKA
  window.onload = function() {
      initData();
  };

  function toggleSidebar(){ document.getElementById('sidebar').classList.toggle('active'); }
  function nav(id){
      if(window.innerWidth <= 768) document.getElementById('sidebar').classList.remove('active');
      document.querySelectorAll('.view').forEach(e=>e.classList.add('hidden'));
      document.getElementById('v-'+id).classList.remove('hidden');
      document.querySelectorAll('#sidebar a').forEach(e=>e.classList.remove('active'));
      if(document.getElementById('m-'+id)) document.getElementById('m-'+id).classList.add('active');
  }

  function initData(){
      // Ambil data siswa saat pertama kali load
      google.script.run.withSuccessHandler(d=>{ G_SISWA=d; renderSiswa(); }).getDaftarSiswa();
      loadAgenda();
  }

  function renderSiswa(){
      let hS='', hA='', hN='';
      G_SISWA.forEach((n,i)=>{
         hS+=`<tr><td>${i+1}</td><td>${n}</td><td><button class='btn btn-danger btn-sm' onclick='delS(${i})'>X</button></td></tr>`;
         hA+=`<tr><td class='n-ab'>${n}</td><td><select class='s-ab form-select form-select-sm'><option value='Hadir'>Hadir</option><option value='Sakit'>Sakit</option><option value='Izin'>Izin</option><option value='Alpa'>Alpa</option></select></td></tr>`;
         hN+=`<tr><td class='n-ni'>${n}</td><td><input type='number' class='v-ni form-control form-select-sm'></td></tr>`;
      });
      document.getElementById('list-siswa').innerHTML=hS;
      document.getElementById('tbl-absen').innerHTML=hA;
      document.getElementById('tbl-input-nilai').innerHTML=hN;
  }
  function addSiswa(){ let n=document.getElementById('nama-baru').value; if(n){G_SISWA.push(n);renderSiswa();google.script.run.tambahSiswaBaru(n);} }
  function delS(i){ if(confirm('Hapus?')){G_SISWA.splice(i,1);renderSiswa();google.script.run.hapusSiswaPermanen(i);} }

  function setAll(v){ document.querySelectorAll('.s-ab').forEach(e=>e.value=v); }
  function saveAbsen(){ 
      let d=[]; document.querySelectorAll('#tbl-absen tr').forEach(r=>{d.push({nama:r.querySelector('.n-ab').innerText, status:r.querySelector('.s-ab').value});});
      google.script.run.withSuccessHandler(alert).simpanAbsensiServer(d);
  }
  function loadRekapAbsen(){
      let b=document.getElementById('f-bln').value, t=document.getElementById('f-thn').value;
      google.script.run.withSuccessHandler(d=>{
          RAW_ABSEN=d; let h='<thead class="table-light"><tr><th>Wkt</th><th>Nama</th><th>Sts</th></tr></thead><tbody>';
          d.forEach(r=>h+=`<tr><td>${r[0]}</td><td>${r[1]}</td><td>${r[2]}</td></tr>`);
          document.getElementById('tbl-rekap-absen').innerHTML=h+'</tbody>';
      }).getRekapAbsensi(b,t);
  }
  function dlAbsenPDF(){ genPDF(RAW_ABSEN,['Waktu','Nama','Status'],'Absensi.pdf'); }

  function saveNilai(){
      let j=document.getElementById('j-ujian').value, k=document.getElementById('ket-ujian').value, d=[];
      document.querySelectorAll('#tbl-input-nilai tr').forEach(r=>{ let v=r.querySelector('.v-ni').value; if(v) d.push({nama:r.querySelector('.n-ni').innerText, nilai:v}); });
      if(d.length==0) return alert("Kosong");
      google.script.run.withSuccessHandler(()=>{ alert('Tersimpan'); loadDataNilai(); }).simpanNilaiServer(j,k,d);
  }
  function loadDataNilai(){
      google.script.run.withSuccessHandler(d=>{
          RAW_NILAI=d; let h=''; d.forEach(r=>h+=`<tr><td>${r[0]}</td><td>${r[1]}</td><td>${r[2]}</td><td>${r[3]}</td><td>${r[4]}</td></tr>`);
          document.getElementById('tbl-body-nilai').innerHTML=h||'<tr><td colspan="5">Kosong</td></tr>';
      }).getAllNilaiData();
  }
  function dlNilaiCSV(){ genCSV(RAW_NILAI,['Tgl','Jns','Nama','Nilai','Ket'],'Nilai.csv'); }
  function dlNilaiPDF(){ genPDF(RAW_NILAI,['Tgl','Jns','Nama','Nilai','Ket'],'Nilai.pdf'); }

  function addAgenda(){
      let ids=['a-tgl','a-jam','a-kls','a-rpp','a-materi','a-sts','a-absen','a-ket'];
      let v=ids.map(i=>document.getElementById(i).value);
      if(!v[0]||!v[4]) return alert('Tgl & Materi Wajib');
      google.script.run.withSuccessHandler(()=>{ alert('Disimpan'); loadAgenda(); }).tambahAgenda(v);
  }
  function loadAgenda(){
      google.script.run.withSuccessHandler(d=>{
          RAW_AGENDA=d; let h='';
          d.forEach((r,i)=>{ h+=`<tr><td>${r[0]}</td><td>${r[2]}</td><td>${r[4]}</td><td>${r[5]}</td><td><button class='btn btn-danger btn-sm' onclick='delAg(${i})'>X</button></td></tr>`; });
          document.querySelector('#tbl-view-agenda tbody').innerHTML = h || '<tr><td colspan="5" class="text-center">Belum ada agenda</td></tr>';
      }).getAgenda();
      google.script.run.withSuccessHandler(d=>{ RAW_AGENDA=d; }).getAllAgendaData();
  }
  function delAg(i){ if(confirm('Hapus?')) google.script.run.withSuccessHandler(loadAgenda).hapusAgenda(i); }
  function dlAgendaCSV(){ genCSV(RAW_AGENDA,['Tgl','Jam','Kls','RPP','Materi','Sts','Absen','Ket'],'Agenda.csv'); }
  function dlAgendaPDF(){ genPDF(RAW_AGENDA,['Tgl','Jam','Kls','RPP','Materi','Sts','Absen','Ket'],'Agenda.pdf'); }

  function genCSV(data,head,fname){
      if(!data.length) return alert('Data Kosong');
      let c = head.join(",") + "\n" + data.map(r=>r.join(",")).join("\n");
      let l=document.createElement("a"); l.href="data:text/csv;charset=utf-8,"+encodeURI(c); l.download=fname; l.click();
  }
  function genPDF(data,head,fname){
      if(!data.length) return alert('Data Kosong');
      const doc = new jsPDF();
      doc.text("Laporan: " + fname, 14, 15);
      doc.autoTable({ head:[head], body:data, startY:20, theme:'grid', styles:{fontSize:8} });
      doc.save(fname);
  }
</script>