Source code buat aplikasi sertifikat online dengan drive + Google Apps Script
Source code buat aplikasi sertifikat online dengan drive + Apps Script
Apa itu fungsi sertifikat
Sertifikat merupakan suatu bukti fisik yang dapat digunakan untuk membuktikan suatu keahlian seseorang atau berpartisipasi dalam suatu kegiatan resmi. Pada kasus yang berbeda sertifikat juga digunakan sebagai bukti kepemilikan yang sah seperti sertifikat tanah, atau sertifikat aset lainnya.
Perlukah membangun sistem untuk sertifikat online?
Pada suatu kesempatan ketika kita membuat acara seminar dengan jumlah peserta yang hadir diatas 30 peserta sudah pasti akan merepotkan jika kita membuat sertifikat satu persatu dengan cara manual, era digitalisasi saat ini memungkinkan kita membangun sistem ini secara gratis tanpa perlu biaya tambahan.
Dengan memanfaatkan google drive serta aplikasi apps Script resmi dari google sudah bisa kita bangun aplikasi sertifikat online maker ini dengan memperhatikan beberapa syarat sebagai berikut.
1. Memilki gmail dan google drive
2. Paham Spreadsheet online
3. Paham google slide
4. Paham menggunakan google drive
Setelah memenuhi syarat diatas maka kita bisa lanjut untuk pembuatan aplikasi sertifikat online ini, adapun step by step pembuatannya ialah sebagai berikut.
1. Buat folder baru di google drive
Bagian ini isi dengan nama sertifikat online maker pada folder dan jangan lupa untuk akses nya dirubah menjadi siapa saja yang memiliki link dan di set up sebagai "Editor".
 |
| Gambar .1 : Folder sertifikat dengan akses editor |
2. Buat form Spreadsheet
 |
| Gambar.2 : Form Spreadsheet input data |
3. Template sertifikat
 |
| Gambar.3: Template sertifikat google slide |
4. Coding aplikasi
Ada dua kode yang harus kita tempatkan di apps Script ini agar dapat bekerja yang terdiri dari kode gs dan kode Index. Silahkan buka aplikasi apps Script tadi dari browser, sekedar saran lebih mudah pakai laptop atau komputer.
a. Code gs.
// ==========================================
// KONFIGURASI SISTEM (GANTI ID DI SINI)
// ==========================================
const SPREADSHEET_ID = '159Jy6rX6nyC87oxniwa_hVW2c36QlLblTlQ_CdaLuxg';
const TEMPLATE_ID = '15OOmI2-lKnTKXWnrlVPMv8MhOaHy5qF1Rr-77PCEWdc';
const FOLDER_ID = '1GfEQLx_d74IeayTjUqBlGXsfF8-VlyCw';
/**
* Fungsi untuk menampilkan Dashboard HTML
*/
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setTitle('Dashboard Sertifikat - javasetid')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
/**
* Mengambil data peserta dari Google Sheets
*/
function getSheetData() {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
const sheet = ss.getSheets()[0]; // Mengambil tab pertama
const lastRow = sheet.getLastRow();
if (lastRow < 2) return [];
const data = sheet.getRange(2, 1, lastRow - 1, 4).getValues();
// Filter baris kosong agar dashboard tetap bersih
return data.filter(row => row[0] !== "" || row[1] !== "");
}
/**
* Proses generate sertifikat dan kirim email
*/
function processCertificate(index) {
const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
const sheet = ss.getSheets()[0];
// Ambil data baris yang dipilih (Index dimulai dari 0 di JS, baris 2 di Sheet)
const rowIndex = index + 2;
const rowData = sheet.getRange(rowIndex, 1, 1, 4).getValues()[0];
const [nama, email, event, status] = rowData;
if (status === 'Sent') return 'Sertifikat sudah pernah dikirim sebelumnya.';
try {
// 1. Duplikasi Template ke Folder Tujuan
const folder = DriveApp.getFolderById(FOLDER_ID);
const copy = DriveApp.getFileById(TEMPLATE_ID).makeCopy(`${nama} - Sertifikat ${event}`, folder);
const copyId = copy.getId();
// 2. Isi Data ke Slide (Variabel {{Nama}} dan {{Event}})
const slide = SlidesApp.openById(copyId);
slide.replaceAllText('{{Nama}}', nama);
slide.replaceAllText('{{Event}}', event);
slide.saveAndClose();
// 3. Konversi Slide ke PDF
const pdfBlob = copy.getAs(MimeType.PDF);
// 4. Kirim ke Email Peserta
MailApp.sendEmail({
to: email,
subject: `Sertifikat Digital: ${event}`,
body: `Halo ${nama},\n\nTerima kasih telah mengikuti kegiatan ${event}. Terlampir adalah sertifikat digital Anda sebagai bentuk apresiasi kami.\n\nSalam,\nAdmin javasetid`,
attachments: [pdfBlob]
});
// 5. Update Status di Sheet & Hapus file duplikat (Slide) agar Drive tidak penuh
sheet.getRange(rowIndex, 4).setValue('Sent');
copy.setTrashed(true);
return `Berhasil! Sertifikat untuk ${nama} telah dikirim.`;
} catch (err) {
return `Gagal: ${err.toString()}`;
}
}b.kode Index
<!DOCTYPE html >
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { padding: 40px; background: #f1f5f9; font-family: 'Segoe UI', sans-serif; }
.main-card { border: none; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); background: white; }
.table thead { background: #1e293b; color: white; }
.btn-send { border-radius: 10px; transition: 0.3s; }
.btn-send:hover { transform: translateY(-2px); }
</style>
</head>
<body>
<div class="container">
<div class="main-card p-5">
<div class="d-flex justify-content-between align-items-center mb-5">
<h2 class="fw-bold text-dark m-0">Admin Dashboard javasetid</h2>
<span class="badge bg-primary px-3 py-2">System Active</span>
</div>
<div class="table-responsive">
<table class="table table-hover align-middle">
<thead>
<tr>
<th class="ps-4">Nama Peserta</th>
<th>Email</th>
<th>Nama Event</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody id="tableBody">
<tr><td colspan="4" class="text-center py-5">Menghubungkan ke Google Sheets...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
// Load data saat dashboard dibuka
window.onload = () => {
google.script.run.withSuccessHandler(renderTable).getSheetData();
};
function renderTable(data) {
let html = '';
if (data.length === 0) {
html = '<tr><td colspan="4" class="text-center text-muted">Data kosong. Silakan isi spreadsheet Anda.</td></tr>';
} else {
data.forEach((row, index) => {
const sent = row[3] === 'Sent';
html += `<tr>
<td class="ps-4 fw-bold">${row[0]}</td>
<td class="text-muted">${row[1]}</td>
<td><span class="badge bg-light text-dark border">${row[2]}</span></td>
<td class="text-center">
<button id="btn-${index}" class="btn btn-sm btn-send ${sent ? 'btn-secondary disabled' : 'btn-success'}"
onclick="${sent ? '' : `sendCert(${index})`}">
${sent ? '✓ Terkirim' : 'Kirim Sertifikat'}
</button>
</td>
</tr>`;
});
}
document.getElementById('tableBody').innerHTML = html;
}
function sendCert(index) {
const btn = document.getElementById('btn-' + index);
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
btn.disabled = true;
google.script.run.withSuccessHandler((msg) => {
alert(msg);
google.script.run.withSuccessHandler(renderTable).getSheetData();
}).processCertificate(index);
}
</script>
</body>
</html>
Untuk penerapan kode ini jangan sampai salah, perlu diperhatikan huruf besar dan keccilnya sebab satu saja kodenya tidak sama maka sudah dipastikan gagal. Berikut gambar penerapaanya:
Gambar.4 : Penerapan kode pada apps script
5. Tampilan dasboard admin
 |
| gambar 5. : Dashboard Sertifikat online |
KESIMPULAN
Membangun sistem aplikasi ini bertujuan untuk mempermudah sobat dalam membuat sertifikat cepat dan efisien sebaba cukup dengan nama, email dan jenis event yang digunakan sudah bisa membuat sertifikat tersebut, jangan sampai keliru setiap codenya karena ini sangat pengaruh terhadap kerja dari aplikasi tersebut. Buat kamu yang mau kode google apps scritpnya dapat di dwonload atau unduh disini: Source code buat aplikasi sertifikat online dengan drive + Apps Script
Penulis
Posting Komentar