UJIAN AKHIR SEMESTER

Matematika Diskrit - Generator Kartu Digital

Dosen: Edy Wihardjo, M.Pd., MCE., MCF. | Semester: Ganjil 2025/2026

Informasi Penting

Kelas 1SC (32 Mahasiswa)
6 Kelompok:
  • Kelompok 1: 6 orang (Project Kartu Mahasiswa)
  • Kelompok 2: 5 orang (Project Tiket Konser)
  • Kelompok 3: 5 orang (Project Undangan Pernikahan)
  • Kelompok 4: 6 orang (Project Kartu Seminar)
  • Kelompok 5: 5 orang (Project Kartu Pasien)
  • Kelompok 6: 5 orang (Project ID Card Karyawan)
Kelas 1SD (16 Mahasiswa)
3 Kelompok:
  • Kelompok 7: 6 orang (Project Tiket Workshop)
  • Kelompok 8: 5 orang (Project Kartu Donatur)
  • Kelompok 9: 5 orang (Project Kartu Peserta Lomba)

9 Project Pilihan (Lokasi Jember & Sekitarnya)

1

Kartu Mahasiswa Digital

Pendidikan

Institusi: Institut Teknologi Sains Mandala, Jember, Jawa Timur

Alamat: Jl. Sumatra No.118-120, Tegal Boto Lor, Sumbersari, Kec. Sumbersari, Kabupaten Jember, Jawa Timur 68121

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama, NIM, Semester, Program Studi, Fakultas
  • Kartu dengan logo ITS Mandala
  • QR Code untuk presensi kuliah
  • Statistik kehadiran mahasiswa
  • Kirim ke WhatsApp grup kelas
Untuk: Kelompok 1 (1SC) 6 orang
2

E-Ticket Konser

Hiburan

Event: Konser "Sound of Harmony"

Lokasi: GOR PKPSO, Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Pembeli, No Tiket, Jenis Tiket (VIP/Regular)
  • Desain tiket artistic dengan tema musik
  • QR Code untuk check-in venue
  • Countdown waktu konser
  • Modul presensi penonton
Untuk: Kelompok 2 (1SC) 5 orang
3

Undangan Pernikahan Digital

Sosial

Acara: Pernikahan Andi & Sari

Lokasi: Gedung Auditorium Universitas Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Tamu, Jumlah Orang, Hubungan, Doa
  • Undangan elegan dengan tema pernikahan
  • QR Code untuk RSVP (konfirmasi kehadiran)
  • Modul presensi tamu di resepsi
  • Hitung total tamu yang konfirmasi
Untuk: Kelompok 3 (1SC) 5 orang
4

Kartu Peserta Seminar

Profesional

Seminar: Seminar "Digital Marketing 2025"

Lokasi: Aula PB Sudirman Pemkab Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama, Instansi, No Registrasi, Seminar
  • Kartu peserta profesional
  • QR Code untuk presensi dan sertifikat
  • Modul presensi sesi seminar
  • Generate sertifikat kehadiran (dummy)
Untuk: Kelompok 4 (1SC) 6 orang
5

Kartu Berobat Digital

Kesehatan

Klinik: IHC RS Perkebunan Jember Klinik

Alamat: Jl. PB. Sudirman No.67, Kaliwates, Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Pasien, No RM, Alamat, Golongan Darah, Alergi
  • Kartu pasien dengan kode warna urgensi
  • QR Code untuk antrian dan riwayat
  • Modul presensi kunjungan
  • Reminder kontrol via WhatsApp
Untuk: Kelompok 5 (1SC) 5 orang
6

ID Card Karyawan Digital

Perusahaan

Perusahaan: Senyum Media, Jember

Alamat: Jl. Mastrip No.99, Krajan Timur, Sumbersari, Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama, NIK, Jabatan, Departemen, Tanggal Masuk
  • ID card perusahaan resmi dengan logo
  • QR Code untuk presensi masuk kerja
  • Absensi online harian
  • Laporan kehadiran bulanan
Untuk: Kelompok 6 (1SC) 5 orang
7

E-Ticket Workshop

Pelatihan

Workshop: Workshop "Web Development"

Lokasi: Plaza Bitcom, Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Peserta, Workshop, Level, No Sertifikat
  • Tiket dengan informasi sesi workshop
  • QR Code untuk presensi dan evaluasi
  • Modul presensi dan feedback
  • Generate sertifikat penyelesaian
Untuk: Kelompok 7 (1SD) 6 orang
8

Kartu Donatur Digital

Kemanusiaan

Lembaga: Lembaga Zakat RIZKI, Jember

Alamat: Jl. Mastrip No.111, Krajan Timur, Sumbersari, Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Donatur, Jenis Donasi, Nominal, Tanggal
  • Kartu donatur dengan logo lembaga
  • QR Code untuk verifikasi donasi
  • Modul presensi event amal
  • Laporan donasi (ringkasan)
Untuk: Kelompok 8 (1SD) 5 orang
9

Kartu Peserta Lomba

Kompetisi

Lomba: Olimpiade Sains Tingkat Kabupaten

Lokasi: SMA Negeri 1 Jember

Google Maps: Lihat Lokasi

Fitur Wajib:
  • Input: Nama Peserta, Sekolah/Universitas, Lomba, No Kontingen
  • Kartu peserta dengan nomor dada
  • QR Code untuk presensi dan hasil lomba
  • Modul presensi peserta lomba
  • Jadwal lomba dan pengumuman hasil (dummy)
Untuk: Kelompok 9 (1SD) 5 orang
Ketentuan Umum Semua Project
Fitur Wajib:
  1. Login: user: admin, password: sandi234
  2. Text-to-speech: "Selamat datang, [nama]!" setelah login
  3. QR Code generator dan scanner (simulasi input manual)
  4. Kirim kartu via WhatsApp dan Email
  5. Responsif untuk smartphone (mobile-first design)
  6. LocalStorage untuk penyimpanan data
  7. Export data ke CSV format
  8. About page dengan credits kelompok
Teknologi Wajib:
  • Single HTML file (embedded CSS & JS)
  • Bootstrap 5 untuk layout
  • Font Awesome 6 untuk icons
  • QRCode.js library
  • Web Speech API untuk text-to-speech
  • LocalStorage API untuk database
  • Google Fonts untuk typography
Timeline Pengerjaan (120 menit)
Menit 1-20: Setup Awal

Struktur HTML, login system, layout dasar dengan Bootstrap

Menit 21-50: Form Input & Generator Kartu

Form data sesuai tema, preview kartu/tiket, QR Code generator

Menit 51-80: Sistem Presensi

Scanner QR (simulasi), pencatatan kehadiran, statistik

Menit 81-100: Fitur Tambahan

Kirim WhatsApp/Email, text-to-speech, export data ke CSV

Menit 101-115: Testing & Debugging

Testing responsif, validasi form, perbaikan bug

Menit 116-120: Persiapan Presentasi

Demo aplikasi, penjelasan fitur, jawab pertanyaan

Pembagian Tugas (5-6 orang per kelompok)
👨‍💻
Frontend Lead

HTML structure, Bootstrap layout, responsive design

🎨
UI/UX Designer

CSS styling, warna, typography, desain kartu/tiket

⚡
JavaScript Developer

Form logic, LocalStorage, QR Code generator, text-to-speech

📊
Data Manager

Presensi system, statistik, export/import data CSV

🔍
Quality Tester

Testing, bug fixing, validation, user experience testing

📝
Documentation

Code comments, presentation preparation, demo script

Template Starter Code

Download template dasar untuk memulai project:

Template sudah termasuk: login system, layout Bootstrap, struktur tab, dan fungsi dasar yang dibutuhkan.

Struktur File Template:
📁 template-starter.html
├── 💻 HTML Structure
│   ├── Login Screen
│   ├── Main Application
│   │   ├── Header dengan waktu
│   │   ├── Navigation Tabs
│   │   ├── Home Tab
│   │   ├── Input Data Tab
│   │   ├── Presensi Tab
│   │   ├── About Tab
│   │   └── Footer
│   └── JavaScript Functions
├── 🎨 Embedded CSS
│   ├── Bootstrap 5
│   ├── Custom Styles
│   └── Responsive Design
└── ⚡ JavaScript Logic
    ├── Login System
    ├── LocalStorage Database
    ├── QR Code Generator
    ├── Text-to-Speech
    └── Basic Functions
Kriteria Penilaian

40%

Fungsionalitas

Login, QR Code, presensi, kirim data berfungsi

30%

Design & UX

Responsif, UI menarik, sesuai tema, user-friendly

20%

Kelengkapan

Semua fitur wajib ada, LocalStorage, validation, error handling

10%

Presentasi

Demo lancar, penjelasan jelas, teamwork, jawaban pertanyaan

Mata Kuliah: Matematika Diskrit | Semester: Ganjil 2025/2026
Dosen: Edy Wihardjo, M.Pd., MCE., MCF. | Waktu Ujian: 120 menit
© Fakultas Sains & Teknologi Informasi - 2025

Nama Aplikasi

-

Selamat Datang!

Preview Kartu/Tiket

Belum ada data

Input data terlebih dahulu di tab Input Data
Statistik

Total Data: 0

Hadir Hari Ini: 0

`; // Create blob and download const blob = new Blob([template], { type: 'text/html' }); const url = URL.createObjectURL(blob); const downloadLink = document.createElement('a'); downloadLink.href = url; downloadLink.download = 'template-starter.html'; downloadLink.style.display = 'none'; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); URL.revokeObjectURL(url); alert('Template starter berhasil didownload! Silakan buka file template-starter.html dan mulai koding.'); });