MINI

files >> C:/siak/app/ktpel/preview.php
 <?php

require_once __DIR__ . '/app/person.php';

$nik = isset($_GET['nik']) ? trim($_GET['nik']) : '';

if ($nik === '') {
    die('NIK tidak diberikan.');
}

$result = find_person($nik);

if (!$result['ok']) {
    die(htmlspecialchars($result['error']));
}

$p = $result['data'];

function e($v)
{
    return htmlspecialchars(
        isset($v) ? $v : '',
        ENT_QUOTES,
        'UTF-8'
    );
}

function jk($v)
{
    if ((string)$v === '1') {
        return 'LAKI-LAKI';
    }

    if ((string)$v === '2') {
        return 'PEREMPUAN';
    }

    return $v;
}

/*
 * FOTO MANUAL
 *
 * Lokasi:
 * uploads/foto/NIK.jpg
 */
$fotoFile = __DIR__ . '/uploads/foto/' . $p['NIK'] . '.jpg';

$fotoUrl = '';

if (file_exists($fotoFile)) {
    $fotoUrl = 'uploads/foto/' . rawurlencode($p['NIK']) .
               '.jpg?v=' . filemtime($fotoFile);
}

?>

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

<title>
Preview KTP-el - <?=e($p['NIK'])?>
</title>

<style>

* {
    box-sizing:border-box;
}

body {
    margin:0;
    padding:30px;
    background:#e5e7eb;
    font-family:Arial, Helvetica, sans-serif;
}

.toolbar {
    width:856px;
    max-width:100%;
    margin:0 auto 20px auto;
    text-align:right;
}

.btn {
    display:inline-block;
    padding:10px 18px;
    margin-left:5px;
    border-radius:6px;
    text-decoration:none;
    border:0;
    cursor:pointer;
    font-weight:bold;
}

.btn-primary {
    background:#2563eb;
    color:white;
}

.btn-dark {
    background:#111827;
    color:white;
}

.ktp {
    width:856px;
    height:540px;
    max-width:100%;
    margin:auto;

    background:
        linear-gradient(
            135deg,
            #d9f99d,
            #bfdbfe 45%,
            #bae6fd
        );

    border:1px solid #94a3b8;

    border-radius:20px;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);
}

.ktp:before {

    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.12) 2px,
            transparent 2px,
            transparent 8px
        );

    pointer-events:none;
}

.header {

    position:relative;

    text-align:center;

    padding-top:25px;

    font-size:22px;

    font-weight:bold;

}

.header-small {

    font-size:18px;

    margin-top:5px;

}

.content {

    position:relative;

    display:flex;

    padding:25px 35px;

    gap:30px;

}

.identity {

    flex:1;

}

.photo-area {

    width:210px;

    text-align:center;

}

.photo {

    width:180px;

    height:230px;

    margin:auto;

    background:#e5e7eb;

    border:1px solid #64748b;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#64748b;

    font-weight:bold;

    overflow:hidden;

}

.photo img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.row {

    display:flex;

    margin-bottom:10px;

    font-size:17px;

}

.label {

    width:190px;

}

.colon {

    width:20px;

}

.value {

    flex:1;

    font-weight:bold;

}

.nik {

    font-size:22px;

    letter-spacing:1px;

}

.footer {

    position:absolute;

    bottom:20px;

    left:35px;

    right:35px;

    display:flex;

    justify-content:space-between;

    font-size:14px;

}

.photo-status {

    margin-top:8px;

    font-size:12px;

    color:#475569;

}

@media print {

    @page {

        size:landscape;

        margin:0;

    }

    body {

        padding:0;

        background:white;

    }

    .toolbar {

        display:none;

    }

    .ktp {

        margin:0;

        box-shadow:none;

        border:0;

        border-radius:0;

    }

}

@media(max-width:900px) {

    body {

        padding:10px;

    }

}

</style>

</head>

<body>


<!-- TOOLBAR -->

<div class="toolbar">

    <a
        href="index.php?nik=<?=urlencode($p['NIK'])?>"
        class="btn btn-primary">

        ← Kembali

    </a>


    <button
        onclick="window.print()"
        class="btn btn-dark">

        🖨 CETAK

    </button>

</div>


<!-- KTP -->

<div class="ktp">


    <div class="header">

        PROVINSI KALIMANTAN UTARA

        <div class="header-small">

            KABUPATEN BULUNGAN

        </div>

    </div>


    <div class="content">


        <!-- DATA -->

        <div class="identity">


            <div class="row">

                <div class="label">
                    NIK
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value nik">
                    <?=e($p['NIK'])?>
                </div>

            </div>


            <div class="row">

                <div class="label">
                    Nama
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">
                    <?=e($p['NAMA_LGKP'])?>
                </div>

            </div>


            <div class="row">

                <div class="label">
                    Tempat/Tgl Lahir
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

<?=e($p['TMPT_LHR'])?>

,

<?=e(substr($p['TGL_LHR'], 0, 10))?>

                </div>

            </div>


            <div class="row">

                <div class="label">
                    Jenis Kelamin
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

                    <?=e(jk($p['JENIS_KLMIN']))?>

                </div>

            </div>


            <div class="row">

                <div class="label">
                    Gol. Darah
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

                   <?php
$gol_darah = array(
    '1'  => 'A',
    '2'  => 'B',
    '3'  => 'AB',
    '4'  => 'O',
    '5'  => 'A+',
    '6'  => 'A-',
    '7'  => 'B+',
    '8'  => 'B-',
    '9'  => 'AB+',
    '10' => 'AB-',
    '11' => 'O+',
    '12' => 'O-',
    '13' => 'TIDAK TAHU'
);

$kode_gol_darah = isset($p['GOL_DRH'])
    ? trim($p['GOL_DRH'])
    : '';

echo e(
    isset($gol_darah[$kode_gol_darah])
        ? $gol_darah[$kode_gol_darah]
        : $kode_gol_darah
);
?>

                </div>

            </div>
<div class="row">

    <div class="label">
        Status Perkawinan
    </div>

    <div class="colon">
        :
    </div>

    <div class="value">

        <?php
        $status_kawin = array(
            '1' => 'BELUM KAWIN',
            '2' => 'KAWIN',
            '3' => 'CERAI HIDUP',
            '4' => 'CERAI MATI'
        );

        $kode_status_kawin = isset($p['STAT_KWN'])
            ? trim($p['STAT_KWN'])
            : '';

        echo e(
            isset($status_kawin[$kode_status_kawin])
                ? $status_kawin[$kode_status_kawin]
                : $kode_status_kawin
        );
        ?>

    </div>

</div>

            <div class="row">

                <div class="label">
                    Alamat
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

                    <?=e($p['ALAMAT'])?>

                </div>

            </div>


            <div class="row">

                <div class="label">
                    RT/RW
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

                    <?=e($p['NO_RT'])?>
                    /
                    <?=e($p['NO_RW'])?>

                </div>

            </div>


            <div class="row">

                <div class="label">
                    Dusun
                </div>

                <div class="colon">
                    :
                </div>

                <div class="value">

                    <?=e($p['DUSUN'])?>

                </div>

            </div>


        </div>


        <!-- FOTO -->

        <div class="photo-area">


            <div class="photo">

                <?php if ($fotoUrl): ?>

                    <img
                        src="<?=e($fotoUrl)?>"
                        alt="Foto Penduduk">

                <?php else: ?>

                    <span>
                        FOTO BELUM ADA
                    </span>

                <?php endif; ?>

            </div>


            <?php if ($fotoUrl): ?>

                <div class="photo-status">

                    ✓ Foto penduduk tersedia

                </div>

            <?php else: ?>

                <div class="photo-status">

                    ⚠ Foto belum diupload

                </div>

            <?php endif; ?>


        </div>


    </div>


    <div class="footer">

        <div>

    
    <div>
    MASA BERLAKU : SEUMUR HIDUP
</div>


       


</div>


</body>

</html>