MINI
C:
/
siak
/
app
/
ktpel
/
Upload File:
files >> C:/siak/app/ktpel/index - Copy (3).php
<?php require_once __DIR__ . '/app/person.php'; $nik = isset($_GET['nik']) ? trim($_GET['nik']) : ''; $result = null; $data = null; if ($nik !== '') { $result = find_person($nik); if ($result && isset($result['ok']) && $result['ok']) { $data = $result['data']; } } function e($value) { return htmlspecialchars( isset($value) ? $value : '', ENT_QUOTES, 'UTF-8' ); } /* * Konversi kode jenis kelamin */ function jenis_kelamin($value) { if ((string)$value === '1') { return 'LAKI-LAKI'; } if ((string)$value === '2') { return 'PEREMPUAN'; } return $value; } /* * Foto berdasarkan NIK */ $fotoUrl = ''; if ($data && !empty($data['NIK'])) { $fotoFile = __DIR__ . '/uploads/foto/' . $data['NIK'] . '.jpg'; if (file_exists($fotoFile)) { $fotoUrl = 'uploads/foto/' . rawurlencode($data['NIK']) . '.jpg?t=' . filemtime($fotoFile); } } ?> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KTPEL - Administrasi Cetak KTP-el</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <style> * { box-sizing:border-box; } body { margin:0; background:#f1f5f9; font-family:Arial, Helvetica, sans-serif; color:#1e293b; } /* SIDEBAR */ .sidebar { min-height:100vh; background:#0f172a; color:white; } .brand { padding:20px; font-size:22px; font-weight:bold; border-bottom:1px solid #334155; } .brand small { display:block; color:#94a3b8; font-size:12px; margin-top:4px; } .sidebar-menu { padding:12px 0; } .sidebar-menu a { display:block; padding:13px 20px; color:#cbd5e1; text-decoration:none; transition:.2s; } .sidebar-menu a:hover, .sidebar-menu a.active { background:#2563eb; color:#fff; } .sidebar-menu .icon { display:inline-block; width:28px; } /* TOPBAR */ .topbar { min-height:70px; background:#fff; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; padding:0 25px; } .system-status { background:#dcfce7; color:#166534; border-radius:30px; padding:7px 14px; font-size:13px; font-weight:bold; } /* MAIN */ .main-content { padding:25px; } .page-title { font-weight:bold; margin-bottom:3px; } .page-subtitle { color:#64748b; } /* CARD */ .card { border:0; border-radius:15px; box-shadow:0 3px 15px rgba(15,23,42,.07); } .card-header { background:#fff; border-bottom:1px solid #e2e8f0; border-radius:15px 15px 0 0 !important; } /* SEARCH */ .search-card { background:linear-gradient( 135deg, #1d4ed8, #2563eb ); color:white; } .search-card .form-control { border:0; height:52px; border-radius:10px; } .search-card .btn { height:52px; border-radius:10px; font-weight:bold; } /* DATA */ .section-title { font-size:17px; font-weight:bold; border-bottom:1px solid #e2e8f0; padding-bottom:10px; margin-bottom:18px; } .data-row { display:flex; margin-bottom:12px; line-height:1.45; } .data-label { width:190px; min-width:190px; color:#64748b; } .data-colon { width:18px; } .data-value { font-weight:600; word-break:break-word; } /* PHOTO */ .photo-box { width:180px; height:230px; background:#e2e8f0; border:2px dashed #94a3b8; border-radius:10px; display:flex; align-items:center; justify-content:center; margin:auto; color:#64748b; font-weight:bold; text-align:center; } .photo-box img { width:100%; height:100%; object-fit:cover; border-radius:8px; } /* BUTTON */ .btn { border-radius:8px; } /* MOBILE */ @media(max-width:991px) { .sidebar { min-height:auto; } .sidebar-menu { display:flex; overflow-x:auto; white-space:nowrap; } .sidebar-menu a { padding:12px 15px; } .main-content { padding:15px; } .topbar { padding:0 15px; } } @media(max-width:575px) { .topbar { min-height:60px; } .topbar-title { font-size:14px; } .system-status { font-size:11px; padding:6px 9px; } .data-row { display:block; } .data-label { width:auto; min-width:0; font-size:12px; } .data-colon { display:none; } .data-value { margin-bottom:12px; } .photo-box { width:150px; height:190px; } } /* PRINT */ @media print { .sidebar, .topbar, .search-card, .no-print { display:none !important; } .main-content { padding:0; } body { background:#fff; } } </style> </head> <body> <div class="container-fluid"> <div class="row"> <!-- ================= SIDEBAR ================= --> <div class="col-lg-2 col-md-3 p-0 sidebar"> <div class="brand"> 🪪 KTPEL <small> Administrasi Cetak KTP-el </small> </div> <div class="sidebar-menu"> <a href="index.php" class="active"> <span class="icon">🏠</span> Dashboard </a> <a href="#cari"> <span class="icon">🔎</span> Cari Penduduk </a> <?php if ($data): ?> <a href="preview.php?nik=<?=urlencode($data['NIK'])?>"> <span class="icon">👁</span> Preview </a> <?php endif; ?> <a href="#"> <span class="icon">🖨</span> Cetak KTP-el </a> <a href="#"> <span class="icon">📊</span> Statistik </a> </div> </div> <!-- ================= CONTENT ================= --> <div class="col-lg-10 col-md-9 p-0"> <!-- TOPBAR --> <div class="topbar"> <div class="topbar-title"> <strong> Administrasi Cetak KTP-el </strong> <div class="text-muted small"> Sistem pelayanan administrasi kependudukan </div> </div> <div class="system-status"> ● SIAK ONLINE </div> </div> <!-- MAIN --> <main class="main-content"> <h3 class="page-title"> Dashboard KTPEL </h3> <div class="page-subtitle mb-4"> Pencarian data penduduk dan administrasi KTP-el </div> <!-- ================= SEARCH ================= --> <div id="cari" class="card search-card mb-4"> <div class="card-body p-4"> <h5 class="fw-bold mb-1"> 🔎 Cari Data Penduduk </h5> <div class="mb-3"> Masukkan NIK 16 digit untuk mengambil data dari SIAK. </div> <form method="get"> <div class="row g-2"> <div class="col-md-9"> <input type="text" name="nik" maxlength="16" pattern="[0-9]{16}" inputmode="numeric" autocomplete="off" class="form-control form-control-lg" value="<?=e($nik)?>" placeholder="Masukkan NIK 16 digit" required> </div> <div class="col-md-3"> <button type="submit" class="btn btn-light w-100 fw-bold"> 🔎 CARI DATA </button> </div> </div> </form> </div> </div> <!-- ================= ERROR ================= --> <?php if ($result && !$result['ok']): ?> <div class="alert alert-warning shadow-sm"> <strong>⚠ Data tidak ditemukan</strong> <br> <?=e($result['error'])?> </div> <?php endif; ?> <?php if ($data): ?> <!-- ================= DATA INDIVIDU ================= --> <div class="card mb-4"> <div class="card-header p-3"> <strong> 👤 DATA INDIVIDU </strong> <span class="badge bg-success float-end"> DATA DITEMUKAN </span> </div> <div class="card-body p-4"> <div class="row g-4"> <!-- DATA --> <div class="col-lg-8"> <div class="section-title"> Biodata Penduduk </div> <div class="data-row"> <div class="data-label"> NIK </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NIK'])?> </div> </div> <div class="data-row"> <div class="data-label"> No. KK </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NO_KK'])?> </div> </div> <div class="data-row"> <div class="data-label"> No. KTP </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NO_KTP'])?> </div> </div> <div class="data-row"> <div class="data-label"> Nama Lengkap </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NAMA_LGKP'])?> </div> </div> <div class="data-row"> <div class="data-label"> Tempat Lahir </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TMPT_LHR'])?> </div> </div> <div class="data-row"> <div class="data-label"> Tanggal Lahir </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TGL_LHR'])?> </div> </div> <div class="data-row"> <div class="data-label"> Jenis Kelamin </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e(jenis_kelamin($data['JENIS_KLMIN']))?> </div> </div> <div class="data-row"> <div class="data-label"> Golongan Darah </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['GOL_DRH'])?> </div> </div> <div class="data-row"> <div class="data-label"> Agama </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['AGAMA'])?> </div> </div> <div class="data-row"> <div class="data-label"> Status Perkawinan </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['STAT_KWN'])?> </div> </div> <div class="data-row"> <div class="data-label"> Pendidikan </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['PDDK_AKH'])?> </div> </div> <div class="data-row"> <div class="data-label"> Pekerjaan </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['JENIS_PKRJN'])?> </div> </div> <div class="data-row"> <div class="data-label"> Hubungan Keluarga </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['STAT_HBKEL'])?> </div> </div> </div> <!-- ================= FOTO ================= --> <div class="col-lg-4"> <div class="section-title text-center"> Foto Penduduk </div> <div class="photo-box"> <?php if ($fotoUrl): ?> <img src="<?=e($fotoUrl)?>" alt="Foto Penduduk"> <?php else: ?> <div> 📷<br> FOTO BELUM ADA </div> <?php endif; ?> </div> <!-- UPLOAD --> <form action="upload_foto.php" method="post" enctype="multipart/form-data" class="mt-3 no-print"> <input type="hidden" name="nik" value="<?=e($data['NIK'])?>"> <input type="file" name="foto" class="form-control" accept=".jpg,.jpeg,.png" required> <button type="submit" class="btn btn-primary w-100 mt-2"> 📷 <?= $fotoUrl ? 'GANTI FOTO' : 'UPLOAD FOTO' ?> </button> </form> </div> </div> </div> </div> <!-- ================= ALAMAT ================= --> <div class="card mb-4"> <div class="card-header p-3"> <strong> 🏠 DATA KELUARGA / ALAMAT </strong> </div> <div class="card-body p-4"> <div class="row"> <div class="col-lg-8"> <div class="data-row"> <div class="data-label"> Kepala Keluarga </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NAMA_KEP'])?> </div> </div> <div class="data-row"> <div class="data-label"> NIK Kepala Keluarga </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NIK_KK'])?> </div> </div> <div class="data-row"> <div class="data-label"> Alamat </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['ALAMAT'])?> </div> </div> <div class="data-row"> <div class="data-label"> RT / RW </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['NO_RT'])?> / <?=e($data['NO_RW'])?> </div> </div> <div class="data-row"> <div class="data-label"> Dusun </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['DUSUN'])?> </div> </div> <div class="data-row"> <div class="data-label"> Kode Pos </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['KODE_POS'])?> </div> </div> <div class="data-row"> <div class="data-label"> Telepon </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TELP'])?> </div> </div> </div> </div> </div> </div> <!-- ================= STATUS KTP ================= --> <div class="card mb-4"> <div class="card-header p-3"> <strong> 🪪 STATUS KTP-el </strong> </div> <div class="card-body p-4"> <div class="row"> <div class="col-md-6"> <div class="data-row"> <div class="data-label"> Status KTP </div> <div class="data-colon"> : </div> <div class="data-value"> <span class="badge bg-primary"> <?=e($data['STAT_KTP'])?> </span> </div> </div> <div class="data-row"> <div class="data-label"> Status e-KTP </div> <div class="data-colon"> : </div> <div class="data-value"> <span class="badge bg-success"> <?=e( $data['EKTP_CURRENT_STATUS_CODE'] )?> </span> </div> </div> </div> <div class="col-md-6"> <div class="data-row"> <div class="data-label"> Tanggal Cetak </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TGL_CETAK_KTP'])?> </div> </div> <div class="data-row"> <div class="data-label"> Tanggal Ganti </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TGL_GANTI_KTP'])?> </div> </div> <div class="data-row"> <div class="data-label"> Tanggal Perpanjang </div> <div class="data-colon"> : </div> <div class="data-value"> <?=e($data['TGL_PJG_KTP'])?> </div> </div> </div> </div> </div> </div> <!-- ================= ACTION ================= --> <div class="card mb-4 no-print"> <div class="card-body p-4"> <div class="d-flex justify-content-between align-items-center flex-wrap gap-2"> <div> <strong> 🖨 Administrasi Cetak </strong> <div class="text-muted small"> Periksa data dan foto sebelum preview/cetak. </div> </div> <div> <a href="preview.php?nik=<?=urlencode($data['NIK'])?>" class="btn btn-primary"> 👁 PREVIEW </a> <a href="preview.php?nik=<?=urlencode($data['NIK'])?>" target="_blank" class="btn btn-dark"> 🖨 CETAK </a> </div> </div> </div> </div> <?php endif; ?> </main> </div> </div> </div> <script> document.addEventListener( 'DOMContentLoaded', function () { var input = document.querySelector( 'input[name="nik"]' ); if (input) { input.focus(); } } ); </script> </body> </html>
Copyright ©2021 || Defacer Indonesia