Cara Membuat Sistem Cetak Kartu Ujian Dengan Menggunakan Appscript
Cara Membuat Kartu Ujian Massal yang Responsif Menggunakan Google Appscript
Google App Script menawarkan solusi luar biasa untuk otomatisasi kantor, termasuk pembuatan dokumen massal seperti kartu ujian. Tutorial ini menyediakan *blueprint* lengkap untuk membangun Web App sederhana namun profesional, yang mampu mencetak Kartu Peserta Ujian dalam format grid 2x3 yang efisien untuk kertas A4.
Salin dan gunakan prompt di bawah ini ke model AI favorit Anda untuk mendapatkan kode sumber Code.gs dan Index.html yang siap pakai.
Prompt Google Apps Script (Siap Salin)
Prompt:
"Bertindaklah sebagai Senior Google Apps Script & Web Developer. Saya ingin membuat Web App sederhana untuk mencetak Kartu Ujian Siswa secara otomatis tanpa menggunakan database Spreadsheet (gunakan data hardcoded di server).
1. Spesifikasi Teknis:
Backend (Code.gs): Simpan data siswa dalam array/objek statis untuk Kelas 7, 8, dan 9.
Frontend (Index.html): Gunakan HTML5, CSS3, dan Bootstrap 5. Gunakan elemen DOM murni (bukan Canvas) agar teks tajam saat dicetak.
CSS Print: Pastikan konfigurasi @media print diatur untuk kertas ukuran A4.
2. Fitur Antarmuka (UI): Buatkan panel konfigurasi yang rapi (tidak ikut tercetak) dengan input berikut:
Pilih Kelas: Dropdown (Kelas 7, 8, 9).
Pilih Ruang Ujian: Dropdown (R-01 sampai R-05).
Pilih Nama Siswa: Dropdown dinamis yang memuat nama sesuai kelas yang dipilih.
Berikan tombol 'Hapus/Silang' di sebelah dropdown nama.
Logika Cetak: Jika nama dipilih, cetak 1 kartu (tengah). Jika nama dikosongkan, cetak seluruh siswa di kelas tersebut (Massal).
Tombol Cetak: Memicu window.print().
3. Desain & Layout Kartu (PENTING):
Layout Massal: Gunakan Grid 2 Kolom x 3 Baris, sehingga muat 6 kartu per halaman A4.
Ukuran Kartu: Tinggi sekitar 9.3cm, Lebar menyesuaikan grid.
Styling: Berikan border ganda (double border) dan watermark logo sekolah transparan di tengah kartu.
Header (Kop Surat):
Kiri: Logo Kabupaten .....
Kanan: Logo Sekolah ....
Tengah: "PEMERINTAH .....", "DINAS PENDIDIKAN", "SMP NEGERI .....", Alamat: "Jl .... - Kode Pos ....".
Judul Kartu: "KARTU PESERTA SUMATIF AKHIR SEMESTER GANJIL T.P. 2025/2026".
Data Siswa:
Tampilkan: No. Peserta, Nama Siswa, Kelas, Ruang Ujian.
Hapus kolom NIS/NISN (tidak perlu ditampilkan).
Format No. Peserta: Generate otomatis dengan format 25-03-[Kelas]-[NoUrut 3 Digit]-8 (Contoh: 25-03-07-001-8).
Footer:
Kiri: Kotak pas foto ukuran 2 x 3 cm.
Kanan: Tanda tangan. Tempat & Tanggal: "........, Desember 2025". Jabatan: "Kepala Sekolah". Nama: ".........". NIP: "...........".
4. Data Siswa (Hardcoded): Masukkan data siswa berikut ke dalam Code.gs:
Kelas 7: [Nama Siswa 1, Nama Siswa 2, Nama Siswa 3, dst.].
Kelas 8: [Nama Siswa 1, Nama Siswa 2, Nama Siswa 3, dst.].
Kelas 9: [Nama Siswa 1, Nama Siswa 2, Nama Siswa 3, dst.].
Susun kode Code.gs dan Index.html yang siap pakai."
Langkah Selanjutnya:
- Salin & Proses: Gunakan prompt di atas pada AI Generatif untuk mendapatkan kode Apps Script (`Code.gs` dan `Index.html`).
- Implementasi: Deploy kode tersebut sebagai Web App di Google Apps Script editor Anda.
- Sesuaikan Data: Jangan lupa ganti data siswa hardcoded di `Code.gs` dengan data siswa sekolah Anda yang sebenarnya.