MINI

files >> C:/siak/app/monitor - Copy.php
 <?php
//-----------------------------------------
// KONEKSI ORACLE
//-----------------------------------------
$host="10.65.0.3";
$port="1521";
$sid ="SIAKDB";

$user="siakoff";
$pass="bobbytgs13";

$conn = oci_connect(
    $user,
    $pass,
    "(DESCRIPTION=
        (ADDRESS=(PROTOCOL=TCP)(HOST=$host)(PORT=$port))
        (CONNECT_DATA=(SID=$sid))
    )"
);

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

//-----------------------------
// GUNUNG SARI
//-----------------------------
$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);
$gunungsari=number_format($row['JUMLAH'],0,",",".");

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

$stid=oci_parse($conn,$sql);
oci_execute($stid);
$row=oci_fetch_array($stid,OCI_ASSOC);
$apung=number_format($row['JUMLAH'],0,",",".");

oci_close($conn);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Dashboard Monitoring Penduduk</title>

<style>

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

.header{
background:#0B5CAD;
padding:10px;
text-align:center;
border-bottom:4px solid gold;
}

.header img{
width:170px;
}

.marquee{
background:#1976D2;
color:#fff;
padding:12px;
font-size:22px;
font-weight:bold;
}

.container{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-top:60px;
}

.card{
width:420px;
background:#fff;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,.25);
padding:30px;
text-align:center;
}

.card h2{
margin:0;
color:#444;
}

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

.ket{
font-size:20px;
color:#666;
line-height:35px;
}

.footer{
margin-top:50px;
text-align:center;
font-size:20px;
color:#444;
}

#timer{
font-weight:bold;
color:red;
}

</style>

</head>

<body>

<div class="header">
<img src="images/kaltara.png">
</div>

<div class="marquee">
<marquee>
DASHBOARD MONITORING JUMLAH PENDUDUK KECAMATAN TANJUNG SELOR
</marquee>
</div>

<div class="container">

<div class="card">

<h2>GUNUNG SARI</h2>

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

<div class="ket">
Jumlah Penduduk Siak Terpusat<br>
2863
</div>

</div>

<div class="card">

<h2>APUNG</h2>

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

<div class="ket">
Jumlah Penduduk Siak Terpusat<br>
3913
</div>

</div>

</div>

<div class="footer">

Refresh otomatis dalam
<span id="timer">30</span> detik

</div>

<script>

let sisa=30;

setInterval(function(){

sisa--;

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

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

},1000);

</script>

</body>
</html>