Aplikasi Cetak Kartu Ujian Otomatis Format F4: Gratis, Mudah, dan Tanpa Install

Hallo Sobat Info Madrasah, saya seorang guru sekaligus merangkap operator madrasah, suka kewalahan Setiap kali musim ujian sekolah atau madrasah tiba (baik PAS, ASAS, PAT, maupun ASAT), salah satu tugas rutin yang paling menyita waktu kepanitiaan adalah membuat kartu peserta ujian. Selama ini, solusi paling umum adalah menggunakan fitur Mail Merge di Microsoft Word.

Tapi kalian tau lah, sebagai orang yang sering mengelola data massal di sekolah, saya tahu betul betapa menjengkelkannya metode ini. Harus melakukan ini itu, dan itu sangat menyita waktu, apalagi bagi yang belum paham dengan cara itu, bisa repot sekali. Banyak sekali masalah ketika menggunakan metode itu, dari mengatur margin agar pas di kertas Folio/F4 sering kali membuat tata letak bergeser. Dan belum lagi kalau ada nama siswa yang terlalu panjang, kotak kartu di bawahnya pasti akan ikut berantakan. Itu membuat frustasi para panitia, apalagi operator madrasah hehe

Nah, saya berfikir, apa ada solusi yang pas untuk masalah itu, bisa memudahkan guru dan operator madrasah dalam membuat kartu ujian madrasah. Oke, Berangkat dari kekesalan teknis tersebut, saya mencoba merancang sebuah solusi alternatif: Aplikasi Cetak Kartu Ujian Otomatis Berbasis Web (HTML). Aplikasi ini murni berbentuk satu file ringan, berjalan secara offline, dan dirancang agar otomatis membagi 10 kartu siswa dengan presisi di atas kertas F4 tanpa perlu setting margin yang rumit. Jujur, saya juga membuat aplikasi ini dibantu oleh Canvas di Gemini, ini sangat membantu sekali. Thkas gemini hehe

Konsep di Balik Pembuatan Aplikasi Kartu Ujian HTML

Sedikit tahu perihal HTML, dan itu membuat saya mengambil keputusan untuk membuatnya dalam HTML ini. Mengapa saya tidak membuat aplikasi desktop atau PHP? Ya jawabannya simpel saja siyh, portabilitas dan keamanan data. yang terpenting ringan tak perlu instal dong hehe

• Sistem Tanpa Server : Aplikasi ini tidak membutuhkan koneksi internet, tidak perlu sewa hosting, dan tidak perlu instalasi server lokal seperti XAMPP. Anda cukup mengklik ganda file .html-nya, dan aplikasi langsung berjalan di browser (Chrome atau Edge). Bagaimana mudahkan mengoperasikannya, tinggal double klik saja, maka aplikasi running di browser bapak ibu semuanya.

• Keamanan LocalStorage: Salah satu ketakutan terbesar saat menginput data secara online atau lewat web adalah data hilang saat mati lampu atau browser tidak sengaja ter-refresh. Untuk mengatasi hal itu, saya menanamkan fungsi LocalStorage pada sistem JavaScript-nya. Semua identitas sekolah dan data kepanitiaan akan terkunci aman di memori browser laptop Anda. Ingat, tidak boleh hapus cache atau memori brwosernya kalau cetak kartunya belum selesai yah!

• Sistem Cetak Bersih (Print CSS): Saya menulis kode CSS khusus untuk perintah cetak (@media print). Jadi, ketika Anda menekan tombol cetak, semua tombol navigasi dan latar belakang abu-abu aplikasi akan disembunyikan secara otomatis, menyisakan lembar kartu ujian yang putih bersih dan siap potong. Praktis tidak ada setting apapun, upload data siswa, boom kartu ujian jadi.

Fitur-Fitur Unggulan

Fitur-fitur pada aplikasi ini sangat mumpuni, untuk sekelas HTML, tapi jangan salah, manfaatnya banyak. Aplikasi ini dilengkapi fitur yang sangat fleksibel untuk berbagai jenjang sekolah (SD/SMP/SMA/SMK), tidak hanya itu bisa dipakai juga untuk Madrasah yah:

1. Import Data Massal (Excel)

Cape kalau harus ketik manual satu-satu, bapak ibu bisa melakukannya dengan mudah, yaitu cukup unduh template yang disediakan, isi data ratusan siswa di Excel, lalu upload. Boommm, dalam hitungan detik, ratusan kartu siap cetak.

2. Kustomisasi KOP & Logo

Fitur ini untuk KOP pada Kartu Ujiannya yah. Bapak/Ibu bisa mengubah Nama Sekolah, Alamat, Judul Ujian, hingga Tahun Pelajaran sesuai kebutuhan. Agar lebih keren tambahkan logo sekolahnya, logo sekolah pun bisa di-upload langsung dari komputer.

3. Tanda Tangan & Stempel Digital

Cape kalau harus tanda tangan dan stample satu satu yah. Nah, Fitur ini memungkinkan Anda mengupload scan tanda tangan Ketua Panitia dan stempel sekolah. Posisi stempel otomatis diatur agar terlihat menimpa tanda tangan (efek multiply), persis seperti cap basah asli. Dengan begitu lebih efesien, baik waktu maupun tenaga.

4. Mode Preview & Cetak Bersih

Tampilan saat mengedit dan saat mencetak dibedakan. Saat dicetak, tombol-tombol navigasi akan hilang, latar belakang menjadi putih bersih, dan margin kertas otomatis disesuaikan. Jadi jangan khawatir, pasti kartu ujiannya rapih dan beres deh. tinggal cetak saja.

Panduan Tutorial Penggunaan

Berikut adalah langkah mudah menggunakan aplikasi ini:

Langkah 1: Persiapan Data Sekolah

Buka file aplikasi dengan double klik saja pada aplikasi.html-nya. Ketika sudah terbuka. Lihat pada kolom kiri, isi data  (Nama, Alamat, dll). Jangan lupa upload Logo Sekolah Anda (format PNG transparan lebih baik). Ini bertujuan untuk data KOP Kartu Ujian. (Lihat Gambar)

Langkah 2: Pengaturan Tanda Tangan

Tanda tangan kepala sekolah atau ketua panitia tidak perlu manual. Cukup lengkapi, Isi data Panitia Ujian (Kota, Tanggal, Nama Ketua, NIP). Upload gambar scan tanda tangan yang sudah disatukan dengan stempel (atau terpisah) pada kolom yang tersedia.

Langkah 3: Input Data Siswa

1. Klik tombol “Template” berwarna hijau di sebelah kanan.
2. Buka file Excel yang terunduh.
3. Isi data siswa (Nama, No Peserta, Kelas, Ruang) sesuai kolom. Jangan ubah judul kolom header.
4. Simpan file Excel tersebut.
5. Kembali ke aplikasi, klik area “Upload File Excel” dan pilih file yang baru Anda simpan.

Kelebihan sistem ini adalah pemanfaatan library pembaca Excel berbasis JavaScript. Anda cukup mengisi draf ratusan siswa di Excel sesuai kolom yang disediakan tanpa mengubah header-nya, lalu unggah. Sistem akan langsung merendernya menjadi puluhan halaman siap cetak dalam hitungan milidetik.

Langkah 4: Proses Mencetak

1. Klik tombol Preview & Cetak di pojok kanan atas.
2. Pastikan tampilan kartu sudah rapi (10 kartu per halaman).
3. Klik Cetak Sekarang.
4. PENTING: Pada pengaturan printer browser, pastikan:
   • Paper Size: Pilih F4 atau Folio (215mm x 330mm). Jika tidak ada, buat Custom Size.
   • Scale: Set ke 100% (Default).
   • Margins: Set ke Default atau None.

Tips Tambahan dari Pengalaman Saya: Karena ukuran F4 (215mm x 330mm) sering kali belum tersedia secara bawaan di pengaturan printer Windows, pastikan Anda masuk ke Printers & Scanners di Control Panel, lalu buat ukuran kertas kustom (Custom Paper Size) terlebih dahulu agar saat mencetak dari browser, pemotongan halaman tidak terpotong di bagian bawah.

Kesimpulan

Mencetak kartu ujian kini tidak perlu ribet lagi. Dengan aplikasi sederhana ini, pekerjaan panitia ujian menjadi lebih efisien, cepat, dan profesional.

Download di bawah ini!

https://drive.google.com/uc?export=download&id=1sOSC3yyaQDB1a1EcfHCloR1jyZvOI9zD