Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-611.26.1.el9_7.x86_64

PHP Version:

8.4.15

User:

u892747680

Directory:

/home/u892747680/domains/sisteminformasic.com/public_html/smkalhadad

Free Space:

9.88 TB

🔧 Quick Actions

✏️ Editing: pendaftaran.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulir Pendaftaran - SMK AL-HADAD</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-purple: #8B5CF6;
            --secondary-purple: #A855F7;
            --dark-purple: #7C3AED;
            --light-purple: #C4B5FD;
            --purple-gradient: linear-gradient(135deg, #8B5CF6 0%, #A855F7 100%);
            --background-gradient: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
            --text-dark: #1F2937;
            --text-light: #6B7280;
            --white: #FFFFFF;
            --border-radius: 16px;
            --shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.1), 0 4px 6px -2px rgba(139, 92, 246, 0.05);
            --shadow-hover: 0 20px 40px -10px rgba(139, 92, 246, 0.2), 0 8px 16px -4px rgba(139, 92, 246, 0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
            background: var(--background-gradient);
            color: var(--text-dark);
            line-height: 1.6;
            min-height: 100vh;
        }

/* Header Modern */
        header {
            background: var(--purple-gradient);
            backdrop-filter: blur(10px);
            padding: 1rem 2rem;
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

.header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
        }

.title-logo {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.title {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--white);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            letter-spacing: -0.025em;
        }

.logo-container {
            display: flex;
            gap: 0.75rem;
        }

.logo-container img {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

.logo-container img:hover {
            transform: scale(1.1);
        }

/* Navigation Modern */
        nav.navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            margin: 2rem auto;
            max-width: 1200px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            padding: 0.75rem;
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            overflow-x: auto;
        }

nav.navbar a {
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
            padding: 0.75rem 1.25rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            white-space: nowrap;
            position: relative;
            font-size: 0.9rem;
        }

nav.navbar a:hover, nav.navbar a.active {
            background: var(--purple-gradient);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

nav.navbar a:active {
            transform: translateY(0);
        }

/* Form Container */
        .form-container {
            max-width: 1000px;
            margin: 0 auto 3rem;
            padding: 0 2rem;
        }

.form-card {
            background: var(--white);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-hover);
            overflow: hidden;
            position: relative;
        }

.form-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--purple-gradient);
        }

.form-title {
            background: var(--purple-gradient);
            color: var(--white);
            padding: 1.5rem 2rem;
            font-size: 1.5rem;
            font-weight: 700;
            text-align: center;
            margin: 0;
        }

.form-content {
            padding: 2rem;
        }

.note {
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid var(--light-purple);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 2rem;
            color: var(--dark-purple);
            font-weight: 600;
            text-align: center;
            font-size: 0.9rem;
        }

/* Section Titles */
        .section-title {
            background: linear-gradient(135deg, var(--light-purple) 0%, rgba(196, 181, 253, 0.3) 100%);
            padding: 1rem 1.5rem;
            font-weight: 700;
            margin: 2rem -2rem 1.5rem -2rem;
            border-left: 4px solid var(--primary-purple);
            color: var(--dark-purple);
            font-size: 1.1rem;
            position: relative;
        }

.section-title:first-of-type {
            margin-top: 0;
        }

.section-title i {
            margin-right: 0.5rem;
        }

/* Form Layout */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 1.25rem;
            gap: 1rem;
        }

.form-group {
            flex: 1;
            min-width: 200px;
        }

.form-group-small {
            flex: 0.5;
            min-width: 120px;
        }

.form-group-medium {
            flex: 0.8;
            min-width: 160px;
        }

.form-group-full {
            flex: 1;
            width: 100%;
        }

/* Labels */
        label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 600;
        }

.required:after {
            content: " *";
            color: #EF4444;
            font-weight: bold;
        }

/* Form Inputs */
        input[type="text"],
        input[type="date"],
        input[type="number"],
        input[type="file"],
        select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #E5E7EB;
            border-radius: 12px;
            box-sizing: border-box;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            background: var(--white);
            color: var(--text-dark);
        }

input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="number"]:focus,
        input[type="file"]:focus,
        select:focus {
            outline: none;
            border-color: var(--primary-purple);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
            transform: translateY(-1px);
        }

input[type="text"]:hover,
        input[type="date"]:hover,
        input[type="number"]:hover,
        select:hover {
            border-color: var(--secondary-purple);
        }

/* File Upload Sections */
        .file-upload-section {
            margin: 2rem -2rem 0 -2rem;
            background: rgba(139, 92, 246, 0.02);
            padding: 2rem;
            border-top: 1px solid rgba(139, 92, 246, 0.1);
        }

.file-upload-title {
            background: var(--purple-gradient);
            color: var(--white);
            padding: 1rem 1.5rem;
            font-weight: 700;
            margin: -2rem -2rem 1.5rem -2rem;
            font-size: 1.1rem;
        }

.file-upload-title i {
            margin-right: 0.5rem;
        }

.file-upload-group {
            margin-bottom: 1.5rem;
            background: var(--white);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: var(--shadow);
            border: 1px solid rgba(139, 92, 246, 0.1);
        }

.file-upload-label {
            display: block;
            margin-bottom: 0.75rem;
            font-weight: 600;
            color: var(--text-dark);
            font-size: 0.9rem;
        }

.file-upload-note {
            font-size: 0.8rem;
            color: var(--text-light);
            margin-top: 0.5rem;
            font-style: italic;
        }

/* Submit Button */
        .submit-section {
            margin-top: 2rem;
            text-align: center;
            padding: 2rem;
            background: rgba(139, 92, 246, 0.02);
            margin-left: -2rem;
            margin-right: -2rem;
            border-top: 1px solid rgba(139, 92, 246, 0.1);
        }

button[type="submit"] {
            background: var(--purple-gradient);
            color: var(--white);
            border: none;
            padding: 1rem 3rem;
            font-size: 1rem;
            font-weight: 700;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

button[type="submit"]:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

button[type="submit"]:active {
            transform: translateY(0);
        }

/* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 1.5rem;
            cursor: pointer;
        }

/* Responsive Design */
        @media (max-width: 768px) {
            header {
                padding: 1rem;
            }

.title {
                font-size: 1.25rem;
            }

.logo-container img {
                width: 40px;
                height: 40px;
            }

nav.navbar {
                margin: 1rem;
                padding: 0.5rem;
                gap: 0.25rem;
            }

nav.navbar a {
                padding: 0.5rem 0.75rem;
                font-size: 0.8rem;
            }

.form-container {
                padding: 0 1rem;
            }

.form-content {
                padding: 1.5rem;
            }

.section-title {
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                padding: 0.75rem 1rem;
                font-size: 1rem;
            }

.file-upload-section {
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                padding: 1.5rem 1rem;
            }

.file-upload-title {
                margin: -1.5rem -1rem 1rem -1rem;
                font-size: 1rem;
            }

.submit-section {
                margin-left: -1.5rem;
                margin-right: -1.5rem;
                padding: 1.5rem 1rem;
            }

.form-row {
                flex-direction: column;
                gap: 0.75rem;
            }

.form-group,
            .form-group-small,
            .form-group-medium {
                min-width: 100%;
            }
        }

@media (max-width: 480px) {
            .header-container {
                flex-direction: column;
                text-align: center;
            }

nav.navbar {
                flex-direction: column;
                align-items: stretch;
            }

nav.navbar a {
                text-align: center;
            }

.mobile-menu-toggle {
                display: block;
            }

button[type="submit"] {
                padding: 0.875rem 2rem;
                font-size: 0.9rem;
            }
        }

/* Loading Animation */
        .loading {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(139, 92, 246, 0.9);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

.spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid var(--white);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

/* Smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }

/* Focus styles for accessibility */
        a:focus,
        button:focus {
            outline: 2px solid var(--primary-purple);
            outline-offset: 2px;
        }

/* Fade in animations */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.6s ease-out forwards;
        }

@keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.fade-in.delay-1 { animation-delay: 0.1s; }
        .fade-in.delay-2 { animation-delay: 0.2s; }
        .fade-in.delay-3 { animation-delay: 0.3s; }
    </style>
</head>
<body>
    <div class="loading" id="loading">
        <div class="spinner"></div>
    </div>

<header class="fade-in">
        <div class="header-container">
            <div class="title-logo">
                <span class="title">SMK AL-HADAD</span>
                <div class="logo-container">
                    <img src="smk.png" alt="Logo SMK" />
                    <img src="yayasan.png" alt="Logo Yayasan" />
                </div>
            </div>
            <button class="mobile-menu-toggle" id="mobileMenuToggle">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

<nav class="navbar fade-in delay-1" id="navbar">
        <a href="dashboard.php"><i class="fas fa-home"></i> Dashboard</a>
        <a href="profil.php"><i class="fas fa-school"></i> Profil Sekolahan</a>
        <a href="info_jurusan.php"><i class="fas fa-graduation-cap"></i> Informasi Jurusan</a>
        <a href="visi.php"><i class="fas fa-eye"></i> Visi & Misi</a>
        <a href="view_kegiatan.php"><i class="fas fa-calendar-alt"></i> Kegiatan</a>
        <a href="pendaftaran.php" class="active"><i class="fas fa-user-plus"></i> Pendaftaran</a>
        <a href="login.php"><i class="fas fa-sign-in-alt"></i> Login</a>
    </nav>

<div class="form-container fade-in delay-2">
        <div class="form-card">
            <div class="form-title">
                <i class="fas fa-user-graduate"></i> Formulir Pendaftaran Peserta Didik Baru
            </div>
            
            <div class="form-content">
                <div class="note">
                    <i class="fas fa-exclamation-triangle"></i> PASTIKAN DATA ANDA BENAR DAN SESUAI DENGAN DATA ASLI!
                </div>

<div class="section-title">
                        <i class="fas fa-user"></i> A. KETERANGAN PRIBADI
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">NISN</label>
                            <input type="text" name="nisn" required />
                        </div>
                        <div class="form-group">
                            <label class="required">Nama Lengkap</label>
                            <input type="text" name="nama_lengkap" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-medium">
                            <label class="required">Jenis Kelamin</label>
                            <select name="jenis_kelamin" required>
                                <option value="">Pilih Jenis Kelamin</option>
                                <option value="Laki-laki">Laki-laki</option>
                                <option value="Perempuan">Perempuan</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="required">Tempat Lahir</label>
                            <input type="text" name="tempat_lahir" required />
                        </div>
                        <div class="form-group-medium">
                            <label class="required">Tanggal Lahir</label>
                            <input type="date" name="tgl" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-medium">
                            <label class="required">Agama</label>
                            <select name="agama" required>
                                <option value="">Pilih Agama</option>
                                <option value="Islam">Islam</option>
                                <option value="Kristen">Kristen</option>
                                <option value="Katolik">Katolik</option>
                                <option value="Hindu">Hindu</option>
                                <option value="Buddha">Buddha</option>
                                <option value="Konghucu">Konghucu</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="required">NIK</label>
                            <input type="text" name="nik" required maxlength="16" />
                            <p class="file-upload-note">Pastikan Nomor Induk Kependudukan sesuai (16 Digit)</p>
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-full">
                            <label class="required">Alamat Rumah</label>
                            <input type="text" name="alamat" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-small">
                            <label class="required">RT</label>
                            <input type="text" name="rt" required />
                        </div>
                        <div class="form-group-small">
                            <label class="required">RW</label>
                            <input type="text" name="rw" required />
                        </div>
                        <div class="form-group">
                            <label class="required">Desa/Kelurahan</label>
                            <input type="text" name="desa" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">Kecamatan</label>
                            <input type="text" name="kecamatan" required />
                        </div>
                        <div class="form-group">
                            <label class="required">Kabupaten/Kota</label>
                            <input type="text" name="kabupaten" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">Provinsi</label>
                            <input type="text" name="provinsi" required />
                        </div>
                        <div class="form-group-medium">
                            <label class="required">Kode Pos</label>
                            <input type="text" name="kode_pos" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-medium">
                            <label class="required">Nomor Telepon</label>
                            <input type="text" name="no_telp" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group-small">
                            <label class="required">Anak ke-</label>
                            <input type="number" name="anak_ke" required min="1" />
                        </div>
                        <div class="form-group-small">
                            <label class="required">Jumlah Saudara</label>
                            <input type="number" name="jumlah_saudara" required min="0" />
                        </div>
                        <div class="form-group">
                            <label class="required">Asal Sekolah</label>
                            <input type="text" name="asal_sekolah" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">Jurusan</label>
                            <select name="jurusan" required>
                                <option value="">Pilih Jurusan</option>
                                <option value="Teknik Komputer dan Jaringan">Teknik Komputer dan Jaringan</option>
                                <option value="Rekayasa Perangkat Lunak">Rekayasa Perangkat Lunak</option>
                                <option value="Multimedia">Multimedia</option>
                                <option value="Akuntansi">Akuntansi</option>
                                <option value="Administrasi Perkantoran">Administrasi Perkantoran</option>
                            </select>
                        </div>
                    </div>

<div class="section-title">
                        <i class="fas fa-users"></i> B. KETERANGAN ORANG TUA
                    </div>

<div class="form-row">
    <div class="form-group-medium">
        <label class="required">Tanggal Lahir Ayah</label>
        <input type="date" name="lahir_ayah" required 
               max="<?php echo date('Y-m-d', strtotime('-15 years')); ?>" 
               min="<?php echo date('Y-m-d', strtotime('-80 years')); ?>" />
    </div>
    <div class="form-group-medium">
        <label class="required">Tanggal Lahir Ibu</label>
        <input type="date" name="lahir_ibu" required 
               max="<?php echo date('Y-m-d', strtotime('-15 years')); ?>" 
               min="<?php echo date('Y-m-d', strtotime('-80 years')); ?>" />
    </div>
</div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="required">Pendidikan Terakhir Ayah</label>
                            <select name="pendidikan_ayah" required>
                                <option value="">Pilih Pendidikan</option>
                                <option value="SD/MI">SD/MI</option>
                                <option value="SMP/MTs">SMP/MTs</option>
                                <option value="SMA/SMK/MA">SMA/SMK/MA</option>
                                <option value="Diploma">Diploma</option>
                                <option value="S1">S1</option>
                                <option value="S2">S2</option>
                                <option value="S3">S3</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="required">Pendidikan Terakhir Ibu</label>
                            <select name="pendidikan_ibu" required>
                                <option value="">Pilih Pendidikan</option>
                                <option value="SD/MI">SD/MI</option>
                                <option value="SMP/MTs">SMP/MTs</option>
                                <option value="SMA/SMK/MA">SMA/SMK/MA</option>
                                <option value="Diploma">Diploma</option>
                                <option value="S1">S1</option>
                                <option value="S2">S2</option>
                                <option value="S3">S3</option>
                            </select>
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">Pekerjaan Ayah</label>
                            <input type="text" name="pekerjaan_ayah" required />
                        </div>
                        <div class="form-group">
                            <label class="required">Pekerjaan Ibu</label>
                            <input type="text" name="pekerjaan_ibu" required />
                        </div>
                    </div>

<div class="form-row">
                        <div class="form-group">
                            <label class="required">Keterangan Ayah</label>
                            <select name="keterangan_ayah" required>
                                <option value="">Pilih Keterangan</option>
                                <option value="Masih Hidup">Masih Hidup</option>
                                <option value="Sudah Meninggal">Sudah Meninggal</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label class="required">Keterangan Ibu</label>
                            <select name="keterangan_ibu" required>
                                <option value="">Pilih Keterangan</option>
                                <option value="Masih Hidup">Masih Hidup</option>
                                <option value="Sudah Meninggal">Sudah Meninggal</option>
                            </select>
                        </div>
                    </div>

<div class="file-upload-section">
                        <div class="file-upload-title">
                            <i class="fas fa-file-upload"></i> C. BERKAS YANG DIPERLUKAN
                        </div>

<div class="file-upload-group">
                            <label class="file-upload-label required">Pas Foto (3x4)</label>
                            <input type="file" name="pas_foto" accept="image/*" required />
                            <p class="file-upload-note">Format: JPG/PNG, Maksimal 2MB</p>
                        </div>

<div class="file-upload-group">
                            <label class="file-upload-label required">Kartu Keluarga</label>
                            <input type="file" name="kartu_keluarga" accept="image/*,.pdf" required />
                            <p class="file-upload-note">Format: PDF/JPG, Maksimal 5MB</p>
                        </div>

<div class="file-upload-group">
                            <label class="file-upload-label required">Surat Keterangan Lulus (SKL)</label>
                            <input type="file" name="skl" accept="image/*,.pdf" required />
                            <p class="file-upload-note">Format: PDF/JPG, Maksimal 5MB</p>
                        </div>
                    </div>

<div class="submit-section">
                        <button type="submit" name="simpan">
                            <i class="fas fa-paper-plane"></i> KIRIM FORMULIR
                        </button>
                    </div>

</form>
            </div>
        </div>
    </div>

// Mobile menu toggle
        const mobileMenuToggle = document.getElementById('mobileMenuToggle');
        const navbar = document.getElementById('navbar');
        
        mobileMenuToggle.addEventListener('click', () => {
            if (navbar.style.display === 'none' || navbar.style.display === '') {
                navbar.style.display = 'flex';
                mobileMenuToggle.innerHTML = '<i class="fas fa-times"></i>';
            } else {
                navbar.style.display = 'none';
                mobileMenuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });

// Form validation
        document.querySelector('form').addEventListener('submit', function(e) {
            const fileInputs = document.querySelectorAll('input[type="file"]');
            let hasError = false;

fileInputs.forEach(input => {
                if (input.files.length > 0) {
                    const file = input.files[0];
                    const maxSize = input.name === 'pas_foto' ? 2 * 1024 * 1024 : 5 * 1024 * 1024; // 2MB or 5MB
                    
                    if (file.size > maxSize) {
                        alert(`File ${input.name} terlalu besar. Maksimal ${input.name === 'pas_foto' ? '2MB' : '5MB'}`);
                        hasError = true;
                    }
                }
            });

// Validate NIK (16 digits)
            const nik = document.querySelector('input[name="nik"]').value;
            if (nik.length !== 16 || !/^\d+$/.test(nik)) {
                alert('NIK harus terdiri dari 16 digit angka');
                hasError = true;
            }

if (hasError) {
                e.preventDefault();
            }
        });

// Add hover effects to navigation
        document.querySelectorAll('.navbar a').forEach(link => {
            link.addEventListener('mouseenter', function() {
                if (!this.classList.contains('active')) {
                    this.style.transform = 'translateY(-2px)';
                }
            });
            
            link.addEventListener('mouseleave', function() {
                if (!this.classList.contains('active')) {
                    this.style.transform = 'translateY(0)';
                }
            });
        });

// Initialize fade-in animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

// Observe all fade-in elements
        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

// Auto-format phone number
        document.querySelector('input[name="no_telp"]').addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            if (value.startsWith('0')) {
                e.target.value = value;
            } else if (value.startsWith('62')) {
                e.target.value = '0' + value.substring(2);
            }
        });

// Auto-format postal code
        document.querySelector('input[name="kode_pos"]').addEventListener('input', function(e) {
            e.target.value = e.target.value.replace(/\D/g, '').substring(0, 5);
        });
        // Validasi tanggal lahir orang tua
document.querySelectorAll('input[name="lahir_ayah"], input[name="lahir_ibu"]').forEach(input => {
    input.addEventListener('change', function() {
        const selectedDate = new Date(this.value);
        const minDate = new Date(this.min);
        const maxDate = new Date(this.max);
        
        if (selectedDate < minDate || selectedDate > maxDate) {
            alert('Tanggal lahir orang tua harus antara 15-80 tahun yang lalu');
            this.value = '';
        }
    });
});
    </script>
</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: pendaftaran.php

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation