📚 Formulir PPDB SMK Muhammadiyah

Sistem Penerimaan Peserta Didik Baru (PPDB) SMK Muhammadiyah 1 Prambanan Klaten

Aplikasi web responsif untuk formulir pendaftaran siswa baru dengan validasi form yang canggih, penyimpanan data otomatis, dan integrasi dengan Google Apps Script untuk pengelolaan data pendaftaran.

🎯 Fitur Utama

✨ Formulir Pendaftaran Lengkap

• Data Pribadi Siswa: Nama, jenis kelamin, tempat/tanggal lahir, agama, NISN, NIK, No. KK
• Informasi Kontak: Nomor handphone dengan validasi format Indonesia (628xxx), email
• Pilihan Kompetensi: Dual choice system dengan pilihan utama dan cadangan
• Data Orang Tua: Informasi lengkap ayah dan ibu termasuk pekerjaan dan alamat

🔧 Teknologi & Validasi

• Validasi Real-time: Validasi input saat pengguna mengetik
• Format Validation: NISN (10 digit), NIK/KK (16 digit), nomor HP Indonesia
• Age Validation: Validasi umur 13-20 tahun
• Auto-Save: Penyimpanan otomatis data form di localStorage
• Form Recovery: Pemulihan data form jika browser ditutup secara tidak sengaja

📱 User Experience

• Responsive Design: Optimal di desktop, tablet, dan mobile
• Progressive Enhancement: Bekerja bahkan tanpa JavaScript
• Loading States: Indikator loading dan feedback visual
• Success Confirmation: Konfirmasi pendaftaran dengan nomor registrasi
• Error Handling: Pesan error yang jelas dan helpful

🔗 Integrasi Backend

• Google Apps Script: Integrasi dengan Google Sheets untuk penyimpanan data
• Duplicate Prevention: Sistem pencegahan pendaftaran ganda
• Registration Number: Generate nomor registrasi otomatis (format: 26XXXX)

🏗️ Struktur Project

formulir/
├── index.html                 # File HTML utama
├── script/                    # Folder JavaScript modules
│   ├── config.js             # Konfigurasi aplikasi & konstanta
│   ├── main.js               # Entry point & controller utama
│   ├── form-handler.js       # Handler untuk event form
│   ├── validation.js         # Modul validasi form
│   ├── storage.js            # Manajemen localStorage
│   ├── modals.js             # Sistem modal & dialog
│   └── appscript.js          # Google Apps Script integration
├── style/                    # Folder CSS modular
│   ├── main.css              # CSS utama (import semua modul)
│   ├── base.css              # Reset & base styles
│   ├── layout.css            # Layout & grid system
│   ├── forms.css             # Styling komponen form
│   ├── header-footer.css     # Header & footer styles
│   ├── responsive.css        # Media queries responsif
│   ├── utilities.css         # Utility classes
│   └── README.md             # Dokumentasi CSS

🚀 Cara Penggunaan

1. Setup Project

# Clone atau download project
git clone [repository-url]
cd formulir

# Buka dengan web server lokal (opsional)
python -m http.server 8000
# atau
npx serve .

2. Konfigurasi Backend (Opsional)

Jika ingin menggunakan integrasi Google Apps Script:

1. Buat Google Apps Script Project:

   • Buka script.google.com
   • Buat project baru
   • Copy code dari script/appscript.js

2. Setup Google Sheets:

   • Buat Google Sheets untuk menyimpan data
   • Setup header kolom sesuai dengan field form

3. Deploy Web App:

   • Deploy sebagai web app
   • Set permission "Anyone"
   • Copy URL dan update di script/config.js

3. Kustomisasi

Update Konfigurasi (script/config.js)

const PPDB_CONFIG = {
  // Ganti dengan URL Google Apps Script Anda
  SCRIPT_URL: "https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec",

  // Kustomisasi validation rules
  VALIDATION: {
    MIN_AGE: 13,
    MAX_AGE: 20,
    // ... other settings
  },
};

Update Pilihan Kompetensi (index.html)

<select id="kompetensi1" name="kompetensi1" required>
  <option value="Farmasi Klinis & Komunitas">Farmasi Klinis & Komunitas</option>
  <option value="Teknik Komputer dan Jaringan">
    Teknik Komputer dan Jaringan
  </option>
  <!-- Tambah opsi sesuai jurusan sekolah -->
</select>

🎨 Kustomisasi Tampilan

Color Scheme

File: style/base.css

:root {
  --primary-color: #2563eb; /* Biru utama */
  --primary-light: #3b82f6; /* Biru terang */
  --success-color: #10b981; /* Hijau success */
  --error-color: #ef4444; /* Merah error */
  --warning-color: #f59e0b; /* Kuning warning */
}

Typography

Font utama menggunakan Inter dari Google Fonts dengan fallback ke system fonts.

Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

📋 API Documentation

Google Apps Script Endpoint

POST Request Format

{
  "namaLengkap": "string",
  "jenisKelamin": "string",
  "tempatLahir": "string",
  "tanggalLahir": "string", // Format: DD/MM/YYYY
  "agama": "string",
  "nisn": "string", // 10 digits
  "nik": "string", // 16 digits
  "nomorKK": "string", // 16 digits
  "nomorHP": "string", // Format: 628xxxxxxxxx
  "alamatEmail": "string",
  "kompetensi1": "string",
  "kompetensi2": "string",
  "namaAyah": "string",
  "pekerjaanAyah": "string",
  "namaIbu": "string",
  "pekerjaanIbu": "string",
  "alamatOrangTua": "string"
}

Response Format

// Success Response
{
  "status": "success",
  "message": "Data berhasil disimpan",
  "registrationNumber": "26XXXX"
}

// Error Response
{
  "status": "error",
  "message": "Error description"
}

🧪 Testing & Validasi

Field Validation Rules

• NISN: Exactly 10 digits
• NIK/No.KK: Exactly 16 digits
• Phone: Format 628xxxxxxxxx (8-10 digits after 628)
• Email: Valid email format
• Age: 13-20 years old
• Birth Date: Between Jan 1, 2000 and today

Test Cases

1. Form Validation: Coba input data invalid di setiap field
2. Auto-Save: Refresh halaman dan cek data tersimpan
3. Responsive: Test di berbagai ukuran layar
4. Duplicate Prevention: Coba submit form yang sama 2x
5. Network Error: Test dengan koneksi internet terputus

🔧 Troubleshooting

Common Issues

Form tidak bisa disubmit

• Cek console browser untuk error JavaScript
• Pastikan semua field required telah diisi
• Verify format input sesuai validasi

Data tidak tersimpan ke Google Sheets

• Cek URL Google Apps Script di config.js
• Verify Web App sudah di-deploy dengan permission "Anyone"
• Check quota limit Google Apps Script

Styling tidak muncul

• Pastikan semua file CSS ada di folder style/
• Cek import statements di main.css
• Verify web server serve static files dengan benar

Auto-save tidak bekerja

• Cek localStorage support di browser
• Verify tidak ada error di console
• Test dengan private/incognito mode

📝 Development Notes

Code Architecture

• Modular JavaScript: Setiap functionality dalam module terpisah
• Event-Driven: Menggunakan event listeners untuk interaksi
• Progressive Enhancement: Fallback untuk browser yang tidak support JavaScript
• Mobile-First: CSS ditulis dengan pendekatan mobile-first

Performance Optimizations

• CSS Minification: Bisa di-minify untuk production
• JavaScript Bundling: Modules bisa di-bundle jika diperlukan
• Image Optimization: Menggunakan SVG icons via Font Awesome
• Lazy Loading: Auto-save menggunakan debouncing

Security Considerations

• Input Sanitization: Validasi di frontend dan backend
• XSS Prevention: Escape user input saat display
• CSRF Protection: Google Apps Script provides built-in protection

👥 Contributors

• Created by: UTDI (Universitas Teknologi Digital Indonesia)
• GitHub: Catur Setyono
• Institution: SMK Muhammadiyah 1 Prambanan Klaten

📄 License

Project ini dibuat untuk keperluan edukasi dan dapat digunakan secara bebas dengan tetap mencantumkan credit kepada pembuat asli.

---

💡 Tips & Best Practices

Untuk Developer

1. Testing: Selalu test di multiple browser dan device
2. Validation: Implementasi validasi di frontend DAN backend
3. Error Handling: Berikan pesan error yang jelas dan actionable
4. Performance: Monitor dan optimize loading time
5. Security: Jangan simpan data sensitif di localStorage

Untuk Pengguna

1. Internet Connection: Pastikan koneksi stabil saat submit
2. Browser Support: Gunakan browser modern (Chrome, Firefox, Safari, Edge)
3. Data Accuracy: Double-check data sebelum submit
4. Mobile Usage: Form fully responsive untuk penggunaan mobile

---

📧 Contact: Untuk pertanyaan atau support, silahkan hubungi tim pengembang melalui repository GitHub atau website UTDI.