Studi Kasus Big Data: Sistem Sertifikat Seminar Online dari Google Form ke Google Sheet

Pernah bingung gimana caranya bikin sertifikat seminar yang keluar otomatis untuk ratusan peserta tanpa edit satu-satu di Canva atau Word? Di tutorial ini kita bikin sistemnya pakai Google Form, Google Sheet, dan Google Apps Script. Semuanya gratis, tanpa hosting, dan bisa jalan dalam satu sore.

Studi kasus ini dikerjakan oleh Kelompok 3 Mata Kuliah Big Data, dengan tema seminar fiktif "Peran Sistem Informasi dalam Pengambilan Keputusan Berbasis Big Data".

Hasil akhir: peserta membuka link, mengisi nama lengkap dan email, lalu sertifikat langsung tampil lengkap dengan nomor unik dan QR code verifikasi. Sertifikat bisa dicetak atau disimpan sebagai PDF.
Demo: https://bit.ly/sertifikat-bigdata

[ Hasil akhir sertifikat ]

Konsep dan Alur Sistem

Sistem ini mengikuti alur data sederhana dari pengumpulan sampai output:

Tahap	Komponen	Fungsi
Collection	Google Form	Mengumpulkan data pendaftaran peserta
Storage	Google Sheet	Menyimpan data otomatis, satu baris per peserta
Processing	Apps Script	Mencocokkan data, membuat nomor sertifikat dan QR code
Output	Web App	Menampilkan sertifikat online yang bisa dicetak atau diunduh

Google Form → Google Sheet → Apps Script → Sertifikat Online

Persiapan dan Tema Seminar

Yang perlu disiapkan:

Akun Google (Gmail)
Desain banner untuk header Form (opsional, ukuran lebar sekitar 1600 x 400 px)
Data seminar: judul, tanggal, tempat, nama penyelenggara

Data yang dipakai di tutorial ini:

Item	Isi
Judul	Peran Sistem Informasi dalam Pengambilan Keputusan Berbasis Big Data
Tanggal	Sabtu, 15 November 2026
Tempat	Zoom / Aula Fakultas
Penyelenggara	Kelompok 3 Big Data

Langkah 1: Membuat Google Form

Buka forms.google.com, klik Blank form.
Isi judul: Pendaftaran Seminar Nasional: Peran Sistem Informasi dalam Pengambilan Keputusan Berbasis Big Data.
Pasang banner lewat Customize Theme → Header.
Buat pertanyaan sesuai tabel berikut.

Penting: tiga pertanyaan pertama (Nama, Email, Instansi) harus berada di urutan itu, karena kode membaca data berdasarkan urutan kolom. Pertanyaan tambahan taruh setelahnya.

No	Pertanyaan	Tipe	Wajib	Kolom Sheet
1	Nama Lengkap (sesuai untuk sertifikat)	Short answer	Ya	B
2	Email	Short answer + validasi Email	Ya	C
3	Instansi / Asal Kampus	Short answer	Ya	D
4	Nomor WhatsApp	Short answer + validasi Number	Ya	E
5	Status	Multiple choice: Mahasiswa / Dosen / Praktisi / Umum	Ya	F
6	Program Studi / Jabatan	Short answer	Tidak	G
7	Mengetahui seminar ini dari	Dropdown: Instagram / WhatsApp / Teman / Dosen / Lainnya	Tidak	H
8	Apa yang ingin dipelajari dari seminar ini?	Paragraph	Tidak	I
9	Pertanyaan untuk pembicara	Paragraph	Tidak	J
10	Persetujuan penggunaan data	Checkbox: Ya, saya setuju	Ya	K

Pengaturan Form

Di tab Settings → Responses, matikan Collect email addresses. Kalau aktif, kolom Sheet bergeser dan kode salah baca data.
Jangan aktifkan Limit to 1 response kalau masih tahap uji coba.
Isi Confirmation message dengan link Web App setelah proses deploy selesai.

[ Tampilan Google Form lengkap dengan banner ]

Langkah 2: Menyambungkan ke Google Sheet

Di Form, buka tab Responses.
Klik Link to Sheets, pilih Create a new spreadsheet, lalu Create.
Cek header Sheet: A = Timestamp, B = Nama, C = Email, D = Instansi, F = Status.

[ Tampilan Google Sheet berisi header kolom ]

Langkah 3: Mengisi Minimal 20 Data

Ada dua cara mengisi data:

Lewat Form (disarankan): sebarkan link Form ke teman dan anggota kelompok. Data masuk otomatis ke Sheet.
Data dummy: ketik langsung di Sheet mulai baris 2, atau isi Form berulang kali dengan email berbeda.

Contoh data:

Nama	Email	Instansi	Status
Andi Pratama	andi.pratama@mail.com	Universitas Indonesia	Mahasiswa
Siti Nurhaliza	siti.nur@mail.com	Universitas Gunadarma	Mahasiswa
Budi Santoso	budi.santoso@mail.com	UPN Veteran Jakarta	Dosen

Pastikan jumlah data minimal 20 baris dan tidak ada email yang kembar.

[ Tampilan Google Sheet berisi 20 data peserta ]

Langkah 4: Memasang Kode Apps Script

Di Google Sheet, klik Extensions → Apps Script.
Hapus semua isi file Code.gs bawaan.
Tempel kode di bawah ini.
Ubah bagian CONFIG di paling atas sesuai seminar kalian.
Klik ikon Save.

Fitur kode ini: pengisian nama dan email wajib sebelum sertifikat tampil, nomor sertifikat otomatis (SEM-2026-001, dst), QR code verifikasi keaslian, tampilan responsif di HP, dan layout cetak A4 landscape.

Copy paste kode dibawah, bisa pakai link ini juga: https://pastebin.com/SVghECu7

/**
 * SERTIFIKAT SEMINAR ONLINE (FINAL - TEMA BIRU KUNING)
 * Google Form -> Google Sheet -> Apps Script Web App
 * Kolom Sheet: A=Timestamp, B=Nama, C=Email, D=Instansi, ... F=Status
 */

// ===== KONFIGURASI =====
var CONFIG = {
  judul: 'Peran Sistem Informasi dalam Pengambilan Keputusan',
  judulSorot: 'Berbasis Big Data',
  tanggal: 'Sabtu, 15 November 2026',
  tempat: 'Zoom / Aula Fakultas',
  penyelenggara: 'Kelompok 3 Big Data',
  penandatangan: 'Ketua Panitia',
  prefix: 'SEM-2026-',
  sheetIndex: 0
};

// ===== ROUTER =====
function doGet(e) {
  var p = e.parameter || {};
  if (p.no) return halamanVerifikasi_(p.no);
  if (p.email || p.nama) return halamanSertifikat_(p.email, p.nama);
  return halamanCari_();
}

// ===== DATA & HELPER =====
function ambilData_() {
  var sh = SpreadsheetApp.getActiveSpreadsheet().getSheets()[CONFIG.sheetIndex];
  return sh.getDataRange().getValues();
}

function buatNomor_(baris) {
  return CONFIG.prefix + ('000' + (baris - 1)).slice(-3);
}

function norm_(s) {
  return String(s || '').toLowerCase().replace(/\s+/g, ' ').trim();
}

function esc_(s) {
  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
    .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

// ===== TEMPLATE HALAMAN =====
function bungkus_(isi) {
  var css = [
    '*{box-sizing:border-box}',
    'body{margin:0;padding:16px;background:#e9eef7;font-family:Poppins,Arial,sans-serif;',
    '-webkit-print-color-adjust:exact;print-color-adjust:exact}',

    /* kotak form & verifikasi */
    '.box{max-width:430px;margin:50px auto;background:#fff;padding:32px;text-align:center;',
    'border-radius:16px;border-top:8px solid #fbb724;box-shadow:0 8px 30px rgba(10,36,99,.15)}',
    '.box h2{color:#0a2463;margin:0 0 8px}',
    '.box p{color:#445}',
    '.box input{padding:12px;width:100%;margin:10px 0;font-size:16px;border:2px solid #c9d8f5;border-radius:10px}',
    '.btn{padding:12px 26px;font-size:16px;font-weight:700;cursor:pointer;border:0;border-radius:999px;',
    'background:#0a2463;color:#fff}',
    '.btn.y{background:#fbb724;color:#0a2463}',

    /* sertifikat */
    '.wrap{width:100%;overflow:hidden}',
    '.stage{width:1000px;height:707px;position:relative;transform-origin:top left}',
    '.cert{position:absolute;inset:0;overflow:hidden;color:#0a2463;text-align:center;',
    'background:radial-gradient(circle at 1px 1px,rgba(47,111,219,.13) 1.5px,transparent 1.6px) 0 0/22px 22px,',
    'linear-gradient(135deg,#ffffff 0%,#eaf2ff 55%,#dbe8ff 100%)}',
    '.frame{position:absolute;inset:20px;border:2px solid rgba(10,36,99,.18);border-radius:14px}',

    /* sudut dekoratif */
    '.sd{position:absolute;width:330px;height:200px;background:#fbb724;clip-path:polygon(0 0,100% 0,0 100%)}',
    '.sn{position:absolute;width:290px;height:172px;background:#0a2463;clip-path:polygon(0 0,100% 0,0 100%)}',
    '.sb{position:absolute;width:210px;height:125px;background:#2f6fdb;clip-path:polygon(0 0,100% 0,0 100%)}',
    '.tl{top:0;left:0}',
    '.br{bottom:0;right:0;transform:rotate(180deg)}',

    /* isi */
    '.isi{position:absolute;left:110px;right:110px;top:46px}',
    '.pill{display:inline-block;background:#0a2463;color:#fff;font-weight:700;letter-spacing:6px;',
    'font-size:15px;padding:8px 28px;border-radius:999px}',
    '.judul{font-size:62px;font-weight:800;letter-spacing:8px;margin:12px 0 0;line-height:1;color:#0a2463}',
    '.nomor{font-size:13px;color:#2f6fdb;font-weight:600;margin-top:8px;letter-spacing:1px}',
    '.kecil{font-size:16px;color:#34456b;margin:20px 0 4px}',
    '.nama{display:inline-block;font-size:44px;font-weight:800;color:#0a2463;padding:0 26px 4px;',
    'border-bottom:6px solid #fbb724;line-height:1.15;max-width:100%}',
    '.inst{font-size:17px;font-weight:600;color:#2f6fdb;margin-top:10px}',
    '.ket{font-size:16px;color:#34456b;margin:16px 0 8px;line-height:1.5}',
    '.ket b.role{background:#0a2463;color:#fff;padding:2px 14px;border-radius:999px;font-size:14px;letter-spacing:1px}',
    '.tema{font-size:25px;font-weight:800;line-height:1.25;color:#0a2463}',
    '.sorot{display:inline-block;background:#fbb724;color:#0a2463;font-weight:800;font-size:25px;',
    'padding:3px 22px;border-radius:999px;margin-top:8px}',
    '.tgl{font-size:14px;color:#34456b;margin-top:12px}',

    /* footer */
    '.qr{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;width:300px;background:#fff;',
    'padding:10px 10px 8px;border-radius:14px;border:2px solid #fbb724;text-align:center;',
    'box-shadow:0 4px 14px rgba(10,36,99,.2);color:#0a2463}',
    '.qr img{display:block;width:86px;height:86px;margin:0 auto}',
    '.qr .cap{font-size:11px;font-weight:600;margin-top:6px;line-height:1.35}',
    '.qr .nm{font-size:13px;font-weight:800;margin-top:2px}',

    '.noprint{text-align:center;margin:18px}',

    /* cetak */
    '@page{size:A4 landscape;margin:0}',
    '@media print{body{padding:0;background:#fff}.noprint{display:none}',
    '.wrap{height:794px!important;overflow:hidden}',
    '.stage{transform:scale(1.1225)!important}}'
  ].join('');

  var js =
    '<script>function fit(){var w=document.getElementById("wrap");if(!w)return;' +
    'var s=document.getElementById("stage");var k=Math.min(1,(window.innerWidth-32)/1000);' +
    's.style.transform="scale("+k+")";w.style.height=(707*k)+"px";}' +
    'window.addEventListener("resize",fit);window.addEventListener("load",fit);' +
    'window.addEventListener("beforeprint",function(){var w=document.getElementById("wrap");' +
    'var s=document.getElementById("stage");if(!w)return;' +
    'w.style.height="794px";s.style.transform="scale(1.1225)";});' +
    'window.addEventListener("afterprint",fit);</script>';

  return HtmlService.createHtmlOutput(
    '<!DOCTYPE html><html><head><meta charset="utf-8">' +
    '<meta name="viewport" content="width=device-width,initial-scale=1">' +
    '<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">' +
    '<title>Sertifikat Seminar</title><style>' + css + '</style></head><body>' +
    isi + js + '</body></html>'
  ).setTitle('Sertifikat Seminar')
   .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

// ===== HALAMAN =====
function halamanCari_(pesan) {
  return bungkus_(
    '<div class="box"><h2>Unduh Sertifikat Seminar</h2>' +
    '<p>' + esc_(CONFIG.judul) + ' ' + esc_(CONFIG.judulSorot) + '</p>' +
    (pesan ? '<p style="color:#d32f2f;font-weight:700">' + esc_(pesan) + '</p>' : '') +
    '<p>Isi data berikut sesuai saat pendaftaran untuk membuka sertifikat.</p>' +
    '<form method="get" action="' + ScriptApp.getService().getUrl() + '" target="_top" style="text-align:left">' +
    '<label style="font-weight:700;color:#0a2463">Nama Lengkap</label>' +
    '<input type="text" name="nama" placeholder="Nama sesuai pendaftaran" required>' +
    '<label style="font-weight:700;color:#0a2463">Email</label>' +
    '<input type="email" name="email" placeholder="email@contoh.com" required>' +
    '<div style="text-align:center;margin-top:8px">' +
    '<button class="btn" type="submit">Tampilkan Sertifikat</button></div></form></div>'
  );
}

function halamanSertifikat_(email, nama) {
  email = norm_(email);
  nama = norm_(nama);
  if (!email || !nama) return halamanCari_('Nama lengkap dan email wajib diisi.');
  var rows = ambilData_();
  for (var i = 1; i < rows.length; i++) {
    if (norm_(rows[i][2]) === email && norm_(rows[i][1]) === nama) {
      var nomor = buatNomor_(i + 1);
      var urlVerif = ScriptApp.getService().getUrl() + '?no=' + nomor;
      var qr = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&margin=0&data=' +
        encodeURIComponent(urlVerif);
      var status = rows[i][5] ? ' &bull; ' + esc_(String(rows[i][5]).toUpperCase()) : '';
      var namaSize = String(rows[i][1]).length > 28 ? 'style="font-size:34px"' : '';

      var cert =
        '<div class="wrap" id="wrap"><div class="stage" id="stage"><div class="cert">' +
        '<div class="frame"></div>' +
        '<div class="sd tl"></div><div class="sn tl"></div><div class="sb tl"></div>' +
        '<div class="sd br"></div><div class="sn br"></div><div class="sb br"></div>' +
        '<div class="isi">' +
          '<div class="pill">SEMINAR NASIONAL</div>' +
          '<div class="judul">SERTIFIKAT</div>' +
          '<div class="nomor">No. ' + esc_(nomor) + '</div>' +
          '<div class="kecil">Diberikan kepada</div>' +
          '<div class="nama" ' + namaSize + '>' + esc_(rows[i][1]) + '</div>' +
          '<div class="inst">' + esc_(rows[i][3]) + '</div>' +
          '<div class="ket">atas partisipasinya sebagai <b class="role">PESERTA' + status + '</b> dalam seminar</div>' +
          '<div class="tema">' + esc_(CONFIG.judul) + '</div>' +
          '<div class="sorot">' + esc_(CONFIG.judulSorot) + '</div>' +
          '<div class="tgl">' + esc_(CONFIG.tanggal) + ' &bull; ' + esc_(CONFIG.tempat) + '</div>' +
        '</div>' +
        '<div class="qr"><img src="' + qr + '" alt="QR">' +
          '<div class="nm">' + esc_(CONFIG.penandatangan) + ' &bull; ' + esc_(CONFIG.penyelenggara) + '</div>' +
          '<div class="cap">Tanda tangan digital &bull; scan untuk verifikasi</div></div>' +
        '</div></div></div>' +
        '<div class="noprint"><button class="btn y" onclick="window.print()">Cetak / Simpan PDF</button></div>';
      return bungkus_(cert);
    }
  }
  return halamanCari_('Data tidak cocok. Pastikan nama lengkap dan email sama persis dengan saat mendaftar.');
}

function halamanVerifikasi_(no) {
  no = String(no).trim();
  var rows = ambilData_();
  for (var i = 1; i < rows.length; i++) {
    if (buatNomor_(i + 1) === no) {
      return bungkus_('<div class="box"><h2 style="color:#12a150">&#10004; SERTIFIKAT VALID</h2>' +
        '<p>Nomor: <b>' + esc_(no) + '</b></p>' +
        '<p>Atas nama: <b>' + esc_(rows[i][1]) + '</b></p>' +
        '<p>' + esc_(CONFIG.judul) + ' ' + esc_(CONFIG.judulSorot) + '</p></div>');
    }
  }
  return bungkus_('<div class="box"><h2 style="color:#d32f2f">&#10006; TIDAK VALID</h2>' +
    '<p>Nomor sertifikat tidak ditemukan.</p></div>');
}

Langkah 5: Deploy sebagai Web App

Klik Deploy → New deployment.
Klik ikon roda gigi, pilih Web app.
Isi Execute as: Me dan Who has access: Anyone.
Klik Deploy, lalu Authorize access, pilih akun, klik Advanced → Go to (project) → Allow.
Salin Web app URL. Itulah link sertifikat kalian.

Catatan: setiap kali kode diubah, lakukan Deploy → Manage deployments → Edit → New version. Kalau tidak, link masih memakai kode lama.

[ Tampilan jendela Deploy dan Web app URL ]

Langkah 6: Pengujian

Buka Web app URL. Akan muncul halaman Unduh Sertifikat Seminar.
Isi nama lengkap dan email sesuai data di Sheet, lalu klik Tampilkan Sertifikat.
Coba isi nama atau email yang salah. Harusnya muncul pesan "Data tidak cocok".
Klik Cetak / Simpan PDF, pilih Save as PDF, dan centang Background graphics supaya warna ikut tercetak.
Scan QR code dengan HP. Harusnya muncul SERTIFIKAT VALID beserta nama pemilik.

[ Tampilan halaman input nama dan email ]

[ Tampilan hasil sertifikat peserta ]

[ Tampilan halaman verifikasi sertifikat valid ]

Troubleshooting

Masalah	Solusi
Data tidak cocok padahal sudah benar	Cek kolom Sheet: Nama di kolom B, Email di kolom C. Pastikan ejaan nama sama persis dengan yang diisi di Form.
Halaman kosong atau error izin	Ulangi proses Authorize pada langkah deploy.
Kode diubah tapi tampilan tidak berubah	Buat versi baru: Deploy → Manage deployments → Edit → New version.
QR code tidak muncul	Pastikan koneksi internet aktif, QR diambil dari layanan online.
Warna tidak tercetak	Centang Background graphics di dialog print.
Kolom bergeser	Matikan Collect email addresses di pengaturan Form dan jangan ubah urutan pertanyaan.

10. Kaitan dengan Big Data, Kekurangan, dan Pengembangan

Kaitan dengan Big Data

Dengan 20 data, sistem ini belum termasuk Big Data. Tapi alurnya mewakili pipeline data yang sama: collection, storage, processing, output. Kalau jumlah pesertanya mencapai ratusan ribu, Google Sheet akan lambat dan punya batas kapasitas. Solusinya, penyimpanan diganti database atau data warehouse seperti BigQuery, dan pemrosesannya memakai layanan cloud yang lebih skalabel.

Kekurangan sistem

Verifikasi masih memakai nama dan email, yang masih bisa ditebak kalau datanya diketahui orang lain.
Nomor sertifikat bergantung pada urutan baris, jadi bisa berubah kalau baris dihapus atau diurutkan ulang.
QR code memakai layanan pihak ketiga (qrserver.com), jadi butuh internet.
Sheet punya batas ukuran dan kecepatan untuk data berskala besar.

Ide pengembangan

Tambah verifikasi ke tiga, misalnya 4 digit terakhir nomor WhatsApp atau kode unik.
Kirim sertifikat otomatis ke email peserta.
Simpan nomor sertifikat permanen di kolom Sheet.
Ganti Sheet dengan database untuk skala besar.

11. Kesimpulan

Dengan Google Form, Google Sheet, dan Apps Script, kita bisa membangun sistem sertifikat otomatis tanpa biaya dan tanpa server sendiri. Peserta cukup mendaftar lewat Form, lalu mengunduh sertifikat sendiri dengan nomor unik dan QR code verifikasi. Sistem ini sederhana, tapi memperlihatkan alur dasar pengolahan data dari pengumpulan sampai penyajian informasi.