MINI

files >> C:/siak/app/gunung_sari.php
 <?php
//-------------------------------------
// KONEKSI ORACLE
//-------------------------------------
$conn = oci_connect(
    "SIAKOFF",
    "bobbytgs13",
    "(DESCRIPTION=
        (ADDRESS=(PROTOCOL=TCP)(HOST=10.65.0.3)(PORT=1521))
        (CONNECT_DATA=(SID=SIAKDB))
    )"
);

if (!$conn) {
    $e = oci_error();
    die($e['message']);
}

//-------------------------------------
// WARNA BACKGROUND
//-------------------------------------
$bg = array("#67695E","#4CAF50","#1565C0","#5E35B1");
$warna = $bg[array_rand($bg)];

//-------------------------------------
// QUERY JUMLAH PENDUDUK
//-------------------------------------
$sql = "
SELECT COUNT(*) JUMLAH
FROM BIODATA_WNI
WHERE NO_KAB=1
AND NO_KEC=5
AND NO_KEL=2006
";

$stid = oci_parse($conn,$sql);
oci_execute($stid);
$row = oci_fetch_array($stid,OCI_ASSOC);

$jumlah = number_format($row['JUMLAH'],0,",",".");

oci_free_statement($stid);
oci_close($conn);
?>

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

<meta charset="utf-8">

<title>Monitoring Penduduk</title>

<style>

body{
    margin:0;
    background:#eef3f8;
    font-family:Arial, Helvetica, sans-serif;
}

/* HEADER */
.header{
    background:#0B5CAD;
    padding:12px;
    text-align:center;
    border-bottom:4px solid #FFD700;
}

.header img{
    width:180px;
    height:auto;
}

/* RUNNING TEXT */
.marquee{
    background:#1565C0;
    color:#fff;
    padding:10px;
    font-size:20px;
    font-weight:bold;
}

/* KARTU */
.card{
    width:600px;
    margin:60px auto;
    background:#fff;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    text-align:center;
    padding:30px;
}

.nama{
    font-size:28px;
    color:#444;
    font-weight:bold;
}

.jumlah{
    font-size:80px;
    font-weight:bold;
    color:#1565C0;
    margin:20px 0;
}

.wilayah{
    font-size:20px;
    color:#666;
    line-height:32px;
}

</style>

</head>

<body>

<div class="header">

<img src="images/kaltara.png">

</div>

<div class="marquee">

<marquee>
SELAMAT DATANG DI MONITORING DATA GREB PIAK KALTARA
</marquee>

</div>

<div class="card">

<div class="nama">
JUMLAH PENDUDUK GUNUNG SARI GREB
</div>

<div class="jumlah">
<?=$jumlah;?>
</div>

<div class="wilayah">
Kabupaten : Bulungan<br>
Kecamatan : Tanjung Selor<br>
Kelurahan : Gunung Sari

<div id="timerBox" style="margin-top:20px;color:#888;">
Refresh dalam <span id="timer">30</span> detik
</div>

</div>

</div>

<script>
let sisa = 30;

setInterval(function () {
    sisa--;

    if (sisa <= 0) {
        location.reload();
    }

    document.getElementById("timer").innerHTML = sisa;

}, 1000);
</script>

</body>
</html>