MINI

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

require_once __DIR__ . '/config/database.php';


/*
|--------------------------------------------------------------------------
| KONEKSI ORACLE
|--------------------------------------------------------------------------
*/
list($conn, $error) = oracle_connect();

if (!$conn) {
    die(
        '<div style="font-family:Arial;padding:30px;color:#b91c1c;">' .
        '<h2>Gagal Koneksi Oracle</h2>' .
        '<div>' . htmlspecialchars($error) . '</div>' .
        '</div>'
    );
}


/*
|--------------------------------------------------------------------------
| FUNGSI QUERY ANGKA
|--------------------------------------------------------------------------
*/
function get_count($conn, $sql)
{
    $stmt = oci_parse($conn, $sql);

    if (!$stmt) {
        return 0;
    }

    if (!oci_execute($stmt)) {
        oci_free_statement($stmt);
        return 0;
    }

    $row = oci_fetch_assoc($stmt);

    oci_free_statement($stmt);

    if (!$row) {
        return 0;
    }

    $value = reset($row);

    return $value !== null ? (int)$value : 0;
}


/*
|--------------------------------------------------------------------------
| TOTAL PENDUDUK
|--------------------------------------------------------------------------
*/
$total_penduduk = get_count(
    $conn,
    "
    SELECT COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    "
);


/*
|--------------------------------------------------------------------------
| LAKI-LAKI
|--------------------------------------------------------------------------
|
| Umumnya SIAK:
| 1 = Laki-laki
| 2 = Perempuan
|
|--------------------------------------------------------------------------
*/
$laki = get_count(
    $conn,
    "
    SELECT COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    WHERE JENIS_KLMIN = '1'
    "
);


/*
|--------------------------------------------------------------------------
| PEREMPUAN
|--------------------------------------------------------------------------
*/
$perempuan = get_count(
    $conn,
    "
    SELECT COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    WHERE JENIS_KLMIN = '2'
    "
);


/*
|--------------------------------------------------------------------------
| NOMOR HP TERISI
|--------------------------------------------------------------------------
*/
$ada_hp = get_count(
    $conn,
    "
    SELECT COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    WHERE SMS_PHONE IS NOT NULL
      AND LENGTH(TRIM(SMS_PHONE)) > 0
    "
);


/*
|--------------------------------------------------------------------------
| NOMOR HP KOSONG
|--------------------------------------------------------------------------
*/
$tanpa_hp = get_count(
    $conn,
    "
    SELECT COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    WHERE SMS_PHONE IS NULL
       OR LENGTH(TRIM(SMS_PHONE)) = 0
    "
);


/*
|--------------------------------------------------------------------------
| DATA STATUS PERKAWINAN
|--------------------------------------------------------------------------
*/
$status_kawin = array();

$sql = "
    SELECT
        NVL(TRIM(STAT_KWN), 'TIDAK DIKETAHUI') AS LABEL,
        COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    GROUP BY NVL(TRIM(STAT_KWN), 'TIDAK DIKETAHUI')
    ORDER BY COUNT(*) DESC
";

$stmt = oci_parse($conn, $sql);

if ($stmt && oci_execute($stmt)) {

    while ($row = oci_fetch_assoc($stmt)) {

        $status_kawin[] = array(
            'label' => $row['LABEL'],
            'total' => (int)$row['TOTAL']
        );
    }
}

if ($stmt) {
    oci_free_statement($stmt);
}


/*
|--------------------------------------------------------------------------
| DATA AGAMA
|--------------------------------------------------------------------------
*/
$agama = array();

$sql = "
    SELECT
        NVL(TRIM(AGAMA), 'TIDAK DIKETAHUI') AS LABEL,
        COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    GROUP BY NVL(TRIM(AGAMA), 'TIDAK DIKETAHUI')
    ORDER BY COUNT(*) DESC
";

$stmt = oci_parse($conn, $sql);

if ($stmt && oci_execute($stmt)) {

    while ($row = oci_fetch_assoc($stmt)) {

        $agama[] = array(
            'label' => $row['LABEL'],
            'total' => (int)$row['TOTAL']
        );
    }
}

if ($stmt) {
    oci_free_statement($stmt);
}


/*
|--------------------------------------------------------------------------
| DATA PENDIDIKAN
|--------------------------------------------------------------------------
*/
$pendidikan = array();

$sql = "
    SELECT
        NVL(TRIM(PDDK_AKH), 'TIDAK DIKETAHUI') AS LABEL,
        COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    GROUP BY NVL(TRIM(PDDK_AKH), 'TIDAK DIKETAHUI')
    ORDER BY COUNT(*) DESC
";

$stmt = oci_parse($conn, $sql);

if ($stmt && oci_execute($stmt)) {

    while ($row = oci_fetch_assoc($stmt)) {

        $pendidikan[] = array(
            'label' => $row['LABEL'],
            'total' => (int)$row['TOTAL']
        );
    }
}

if ($stmt) {
    oci_free_statement($stmt);
}


/*
|--------------------------------------------------------------------------
| DATA GOLONGAN DARAH
|--------------------------------------------------------------------------
*/
$darah = array();

$sql = "
    SELECT
        NVL(TRIM(GOL_DRH), 'TIDAK DIKETAHUI') AS LABEL,
        COUNT(*) AS TOTAL
    FROM BIODATA_WNI
    GROUP BY NVL(TRIM(GOL_DRH), 'TIDAK DIKETAHUI')
    ORDER BY COUNT(*) DESC
";

$stmt = oci_parse($conn, $sql);

if ($stmt && oci_execute($stmt)) {

    while ($row = oci_fetch_assoc($stmt)) {

        $darah[] = array(
            'label' => $row['LABEL'],
            'total' => (int)$row['TOTAL']
        );
    }
}

if ($stmt) {
    oci_free_statement($stmt);
}


/*
|--------------------------------------------------------------------------
| KELOMPOK UMUR
|--------------------------------------------------------------------------
|
| Menggunakan MONTHS_BETWEEN Oracle.
|
|--------------------------------------------------------------------------
*/
$umur = array();

$sql = "
    SELECT
        KELOMPOK_UMUR AS LABEL,
        COUNT(*) AS TOTAL
    FROM
    (
        SELECT
            CASE

                WHEN TGL_LHR IS NULL
                    THEN 'TIDAK DIKETAHUI'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 5
                    THEN '0 - 4 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 10
                    THEN '5 - 9 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 15
                    THEN '10 - 14 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 20
                    THEN '15 - 19 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 30
                    THEN '20 - 29 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 40
                    THEN '30 - 39 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 50
                    THEN '40 - 49 Tahun'

                WHEN MONTHS_BETWEEN(SYSDATE, TGL_LHR) / 12 < 60
                    THEN '50 - 59 Tahun'

                ELSE '60 Tahun Keatas'

            END AS KELOMPOK_UMUR

        FROM BIODATA_WNI
    )
    GROUP BY KELOMPOK_UMUR
";

$stmt = oci_parse($conn, $sql);

if ($stmt && oci_execute($stmt)) {

    while ($row = oci_fetch_assoc($stmt)) {

        $umur[] = array(
            'label' => $row['LABEL'],
            'total' => (int)$row['TOTAL']
        );
    }
}

if ($stmt) {
    oci_free_statement($stmt);
}


/*
|--------------------------------------------------------------------------
| DATA JSON CHART
|--------------------------------------------------------------------------
*/
$status_labels = array();
$status_values = array();

foreach ($status_kawin as $item) {

    $status_labels[] = $item['label'];
    $status_values[] = $item['total'];
}


$agama_labels = array();
$agama_values = array();

foreach ($agama as $item) {

    $agama_labels[] = $item['label'];
    $agama_values[] = $item['total'];
}


$pendidikan_labels = array();
$pendidikan_values = array();

foreach ($pendidikan as $item) {

    $pendidikan_labels[] = $item['label'];
    $pendidikan_values[] = $item['total'];
}


$darah_labels = array();
$darah_values = array();

foreach ($darah as $item) {

    $darah_labels[] = $item['label'];
    $darah_values[] = $item['total'];
}


$umur_labels = array();
$umur_values = array();

foreach ($umur as $item) {

    $umur_labels[] = $item['label'];
    $umur_values[] = $item['total'];
}

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

<head>

<meta charset="UTF-8">

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

<title>
    Statistik Data SIAK
</title>


<!--
|--------------------------------------------------------------------------
| CHART.JS
|--------------------------------------------------------------------------
-->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<style>

* {
    box-sizing: border-box;
}

body {

    margin: 0;

    background:
        #f1f5f9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        #1e293b;
}


.container {

    width:
        94%;

    max-width:
        1450px;

    margin:
        25px auto;
}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.header {

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #084298
        );

    color:
        white;

    padding:
        26px;

    border-radius:
        15px;

    margin-bottom:
        20px;

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

.header h1 {

    margin:
        0;

    font-size:
        28px;
}

.header p {

    margin:
        8px 0 0;

    opacity:
        .9;
}


/*
|--------------------------------------------------------------------------
| CARD STATISTIK
|--------------------------------------------------------------------------
*/

.cards {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        18px;

    margin-bottom:
        20px;
}


.stat-card {

    background:
        white;

    padding:
        22px;

    border-radius:
        12px;

    min-height:
        125px;

    position:
        relative;

    overflow:
        hidden;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.06);
}


.stat-title {

    color:
        #64748b;

    font-size:
        13px;

    font-weight:
        bold;

    margin-bottom:
        10px;
}


.stat-number {

    font-size:
        30px;

    font-weight:
        bold;

    color:
        #0f172a;
}


.stat-icon {

    position:
        absolute;

    right:
        15px;

    top:
        15px;

    font-size:
        35px;

    opacity:
        .15;
}


.blue {
    border-left: 5px solid #0d6efd;
}

.green {
    border-left: 5px solid #198754;
}

.red {
    border-left: 5px solid #dc3545;
}

.orange {
    border-left: 5px solid #fd7e14;
}

.purple {
    border-left: 5px solid #6f42c1;
}


/*
|--------------------------------------------------------------------------
| CHART
|--------------------------------------------------------------------------
*/

.charts {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        20px;
}


.chart-card {

    background:
        white;

    border-radius:
        12px;

    padding:
        20px;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.06);
}


.chart-title {

    font-size:
        17px;

    font-weight:
        bold;

    margin-bottom:
        15px;
}


.chart-container {

    position:
        relative;

    height:
        330px;
}


.full {

    grid-column:
        span 2;
}


/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.footer {

    text-align:
        center;

    color:
        #64748b;

    font-size:
        13px;

    margin:
        25px 0;
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .cards {

        grid-template-columns:
            repeat(3, 1fr);
    }
}


@media (max-width: 800px) {

    .cards {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .charts {

        grid-template-columns:
            1fr;
    }

    .full {

        grid-column:
            span 1;
    }
}


@media (max-width: 500px) {

    .container {

        width:
            100%;

        margin:
            0;
    }

    .header {

        border-radius:
            0;
    }

    .cards {

        grid-template-columns:
            1fr;

        padding:
            10px;
    }

    .charts {

        padding:
            10px;
    }

    .chart-card {

        padding:
            15px;
    }

    .chart-container {

        height:
            280px;
    }
}

</style>

</head>


<body>


<div class="container">

    <a href="index.php" class="back-button">
        ← Kembali ke Halaman Utama
    </a>


    <!-- =====================================================
         HEADER
    ====================================================== -->

    <div class="header">

        <h1>
            📊 Statistik Data SIAK
        </h1>

        <p>
            Statistik penduduk berdasarkan
            tabel BIODATA_WNI
        </p>

    </div>


    <!-- =====================================================
         KARTU UTAMA
    ====================================================== -->

    <div class="cards">


        <!-- TOTAL -->

        <div class="stat-card blue">

            <div class="stat-icon">
                👥
            </div>

            <div class="stat-title">
                TOTAL PENDUDUK
            </div>

            <div class="stat-number">

                <?= number_format(
                    $total_penduduk,
                    0,
                    ',',
                    '.'
                ) ?>

            </div>

        </div>


        <!-- LAKI -->

        <div class="stat-card green">

            <div class="stat-icon">
                👨
            </div>

            <div class="stat-title">
                LAKI-LAKI
            </div>

            <div class="stat-number">

                <?= number_format(
                    $laki,
                    0,
                    ',',
                    '.'
                ) ?>

            </div>

        </div>


        <!-- PEREMPUAN -->

        <div class="stat-card red">

            <div class="stat-icon">
                👩
            </div>

            <div class="stat-title">
                PEREMPUAN
            </div>

            <div class="stat-number">

                <?= number_format(
                    $perempuan,
                    0,
                    ',',
                    '.'
                ) ?>

            </div>

        </div>


        <!-- HP -->

        <div class="stat-card orange">

            <div class="stat-icon">
                📱
            </div>

            <div class="stat-title">
                MEMILIKI NO. HP
            </div>

            <div class="stat-number">

                <?= number_format(
                    $ada_hp,
                    0,
                    ',',
                    '.'
                ) ?>

            </div>

        </div>


        <!-- TANPA HP -->

        <div class="stat-card purple">

            <div class="stat-icon">
                📵
            </div>

            <div class="stat-title">
                BELUM ADA NO. HP
            </div>

            <div class="stat-number">

                <?= number_format(
                    $tanpa_hp,
                    0,
                    ',',
                    '.'
                ) ?>

            </div>

        </div>


    </div>


    <!-- =====================================================
         GRAFIK
    ====================================================== -->

    <div class="charts">


        <!-- JENIS KELAMIN -->

        <div class="chart-card">

            <div class="chart-title">
                👥 Jenis Kelamin
            </div>

            <div class="chart-container">

                <canvas id="genderChart"></canvas>

            </div>

        </div>


        <!-- NO HP -->

        <div class="chart-card">

            <div class="chart-title">
                📱 Kepemilikan Nomor HP
            </div>

            <div class="chart-container">

                <canvas id="phoneChart"></canvas>

            </div>

        </div>


        <!-- STATUS PERKAWINAN -->

        <div class="chart-card">

            <div class="chart-title">
                💍 Status Perkawinan
            </div>

            <div class="chart-container">

                <canvas id="marriageChart"></canvas>

            </div>

        </div>


        <!-- AGAMA -->

        <div class="chart-card">

            <div class="chart-title">
                🕌 Agama
            </div>

            <div class="chart-container">

                <canvas id="religionChart"></canvas>

            </div>

        </div>


        <!-- PENDIDIKAN -->

        <div class="chart-card full">

            <div class="chart-title">
                🎓 Pendidikan
            </div>

            <div class="chart-container">

                <canvas id="educationChart"></canvas>

            </div>

        </div>


        <!-- GOLONGAN DARAH -->

        <div class="chart-card">

            <div class="chart-title">
                🩸 Golongan Darah
            </div>

            <div class="chart-container">

                <canvas id="bloodChart"></canvas>

            </div>

        </div>


        <!-- UMUR -->

        <div class="chart-card">

            <div class="chart-title">
                👶 Kelompok Umur
            </div>

            <div class="chart-container">

                <canvas id="ageChart"></canvas>

            </div>

        </div>


    </div>


    <div class="footer">

        Data diambil langsung dari
        <strong>BIODATA_WNI</strong>

    </div>


</div>


<script>

/*
|--------------------------------------------------------------------------
| DATA UTAMA
|--------------------------------------------------------------------------
*/

const laki =
    <?= (int)$laki ?>;

const perempuan =
    <?= (int)$perempuan ?>;

const adaHp =
    <?= (int)$ada_hp ?>;

const tanpaHp =
    <?= (int)$tanpa_hp ?>;


/*
|--------------------------------------------------------------------------
| JENIS KELAMIN
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'genderChart'
    ),

    {

        type:
            'doughnut',

        data: {

            labels: [
                'Laki-laki',
                'Perempuan'
            ],

            datasets: [{

                data: [
                    laki,
                    perempuan
                ]

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false

        }

    }

);


/*
|--------------------------------------------------------------------------
| NOMOR HP
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'phoneChart'
    ),

    {

        type:
            'doughnut',

        data: {

            labels: [
                'Ada No. HP',
                'Belum Ada No. HP'
            ],

            datasets: [{

                data: [
                    adaHp,
                    tanpaHp
                ]

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false

        }

    }

);


/*
|--------------------------------------------------------------------------
| STATUS PERKAWINAN
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'marriageChart'
    ),

    {

        type:
            'bar',

        data: {

            labels:
                <?= json_encode(
                    $status_labels,
                    JSON_UNESCAPED_UNICODE
                ) ?>,

            datasets: [{

                label:
                    'Jumlah Penduduk',

                data:
                    <?= json_encode(
                        $status_values
                    ) ?>

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,

            scales: {

                y: {

                    beginAtZero:
                        true

                }

            }

        }

    }

);


/*
|--------------------------------------------------------------------------
| AGAMA
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'religionChart'
    ),

    {

        type:
            'bar',

        data: {

            labels:
                <?= json_encode(
                    $agama_labels,
                    JSON_UNESCAPED_UNICODE
                ) ?>,

            datasets: [{

                label:
                    'Jumlah Penduduk',

                data:
                    <?= json_encode(
                        $agama_values
                    ) ?>

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,

            scales: {

                y: {

                    beginAtZero:
                        true

                }

            }

        }

    }

);


/*
|--------------------------------------------------------------------------
| PENDIDIKAN
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'educationChart'
    ),

    {

        type:
            'bar',

        data: {

            labels:
                <?= json_encode(
                    $pendidikan_labels,
                    JSON_UNESCAPED_UNICODE
                ) ?>,

            datasets: [{

                label:
                    'Jumlah Penduduk',

                data:
                    <?= json_encode(
                        $pendidikan_values
                    ) ?>

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,

            scales: {

                y: {

                    beginAtZero:
                        true

                }

            }

        }

    }

);


/*
|--------------------------------------------------------------------------
| GOLONGAN DARAH
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'bloodChart'
    ),

    {

        type:
            'bar',

        data: {

            labels:
                <?= json_encode(
                    $darah_labels,
                    JSON_UNESCAPED_UNICODE
                ) ?>,

            datasets: [{

                label:
                    'Jumlah Penduduk',

                data:
                    <?= json_encode(
                        $darah_values
                    ) ?>

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,

            scales: {

                y: {

                    beginAtZero:
                        true

                }

            }

        }

    }

);


/*
|--------------------------------------------------------------------------
| KELOMPOK UMUR
|--------------------------------------------------------------------------
*/

new Chart(

    document.getElementById(
        'ageChart'
    ),

    {

        type:
            'bar',

        data: {

            labels:
                <?= json_encode(
                    $umur_labels,
                    JSON_UNESCAPED_UNICODE
                ) ?>,

            datasets: [{

                label:
                    'Jumlah Penduduk',

                data:
                    <?= json_encode(
                        $umur_values
                    ) ?>

            }]

        },

        options: {

            responsive:
                true,

            maintainAspectRatio:
                false,

            scales: {

                y: {

                    beginAtZero:
                        true

                }

            }

        }

    }

);

</script>


</body>

</html>