wartana
80951b57a0
- Implemented Modern Theme (Inter font, Rounded UI, Indigo/White palette) - Updated Login Page with gradient background and modern card - Added Age Demographics to Dashboard (Stats count) - Integrated Chart.js for Population Donut Chart - Made Dashboard Info Boxes clickable with Age Category filtering - Updated Resident Data table to support age filtering
323 lines
9.4 KiB
PHP
323 lines
9.4 KiB
PHP
<?php
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_pend) as pend from tb_pdd where status='Ada'");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$pend=$data['pend'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_kk) as kartu from tb_kk");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$kartu=$data['kartu'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_pend) as laki from tb_pdd where jekel='LK' AND status='Ada'");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$laki=$data['laki'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_pend) as prem from tb_pdd where jekel='PR' AND status='Ada'");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$prem=$data['prem'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_lahir) as lahir from tb_lahir");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$lahir=$data['lahir'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_mendu) as mendu from tb_mendu");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$mendu=$data['mendu'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_datang) as datang from tb_datang");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$datang=$data['datang'];
|
|
}
|
|
|
|
$sql = $koneksi->query("SELECT COUNT(id_pindah) as pindah from tb_pindah");
|
|
while ($data= $sql->fetch_assoc()) {
|
|
$pindah=$data['pindah'];
|
|
}
|
|
|
|
// Demografi Umur
|
|
$balita = 0; $anak = 0; $remaja = 0; $dewasa = 0; $lansia = 0;
|
|
|
|
$sql_balita = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 0 AND 5 AND status='Ada'");
|
|
if($d = $sql_balita->fetch_assoc()) $balita = $d['c'];
|
|
|
|
$sql_anak = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 6 AND 12 AND status='Ada'");
|
|
if($d = $sql_anak->fetch_assoc()) $anak = $d['c'];
|
|
|
|
$sql_remaja = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 13 AND 17 AND status='Ada'");
|
|
if($d = $sql_remaja->fetch_assoc()) $remaja = $d['c'];
|
|
|
|
$sql_dewasa = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 18 AND 59 AND status='Ada'");
|
|
if($d = $sql_dewasa->fetch_assoc()) $dewasa = $d['c'];
|
|
|
|
$sql_lansia = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) >= 60 AND status='Ada'");
|
|
if($d = $sql_lansia->fetch_assoc()) $lansia = $d['c'];
|
|
|
|
?>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $pend; ?>
|
|
</h3>
|
|
|
|
<p>Penduduk</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-person-add"></i>
|
|
</div>
|
|
<a href="index.php?page=data-pend" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $kartu; ?>
|
|
</h3>
|
|
|
|
<p>Kartu Keluarga</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-card"></i>
|
|
</div>
|
|
<a href="index.php?page=data-kartu" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-red">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $laki; ?>
|
|
</h3>
|
|
|
|
<p>Laki-laki</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-male"></i>
|
|
</div>
|
|
<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $prem; ?>
|
|
</h3>
|
|
|
|
<p>Perempuan</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-female"></i>
|
|
</div>
|
|
<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $lahir; ?>
|
|
</h3>
|
|
|
|
<p>Lahir</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-android-happy"></i>
|
|
</div>
|
|
<a href="index.php?page=data-lahir" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $mendu; ?>
|
|
</h3>
|
|
|
|
<p>Meninggal</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-android-sad"></i>
|
|
</div>
|
|
<a href="index.php?page=data-mendu" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-red">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $datang; ?>
|
|
</h3>
|
|
|
|
<p>Pendatang</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-android-download"></i>
|
|
</div>
|
|
<a href="index.php?page=data-datang" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- ./col -->
|
|
<div class="col-lg-3 col-6">
|
|
<!-- small box -->
|
|
<div class="small-box bg-warning">
|
|
<div class="inner">
|
|
<h3>
|
|
<?php echo $pindah; ?>
|
|
</h3>
|
|
|
|
<p>Pindah</p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="ion ion-android-upload"></i>
|
|
</div>
|
|
<a href="index.php?page=data-pindah" class="small-box-footer">Selengkapnya
|
|
<i class="fas fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h4 class="mt-4 mb-2">Demografi Umur</h4>
|
|
<div class="row">
|
|
<!-- Balita -->
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-info">
|
|
<div class="inner">
|
|
<h3><?php echo $balita; ?></h3>
|
|
<p>Balita (0-5)</p>
|
|
</div>
|
|
<div class="icon"><i class="fas fa-baby"></i></div>
|
|
<a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Anak -->
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-success">
|
|
<div class="inner">
|
|
<h3><?php echo $anak; ?></h3>
|
|
<p>Anak (6-12)</p>
|
|
</div>
|
|
<div class="icon"><i class="fas fa-child"></i></div>
|
|
<a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Remaja -->
|
|
<div class="col-lg-2 col-6">
|
|
<div class="small-box bg-purple">
|
|
<div class="inner">
|
|
<h3><?php echo $remaja; ?></h3>
|
|
<p>Remaja (13-17)</p>
|
|
</div>
|
|
<div class="icon"><i class="fas fa-user-graduate"></i></div>
|
|
<a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Dewasa -->
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box bg-primary">
|
|
<div class="inner">
|
|
<h3><?php echo $dewasa; ?></h3>
|
|
<p>Dewasa (18-59)</p>
|
|
</div>
|
|
<div class="icon"><i class="fas fa-user-tie"></i></div>
|
|
<a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- Lansia -->
|
|
<div class="col-lg-3 col-6">
|
|
<div class="small-box bg-secondary">
|
|
<div class="inner">
|
|
<h3><?php echo $lansia; ?></h3>
|
|
<p>Lansia (>60)</p>
|
|
</div>
|
|
<div class="icon"><i class="fas fa-blind"></i></div>
|
|
<a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Selengkapnya <i class="fas fa-arrow-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-info mt-4">
|
|
<div class="card-header">
|
|
<h3 class="card-title">
|
|
<i class="fas fa-chart-pie"></i> Statistik Penduduk
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Data from PHP
|
|
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
|
|
var donutData = {
|
|
labels: [
|
|
'Balita',
|
|
'Anak-anak',
|
|
'Remaja',
|
|
'Dewasa',
|
|
'Lansia'
|
|
],
|
|
datasets: [
|
|
{
|
|
data: [
|
|
<?php echo $balita; ?>,
|
|
<?php echo $anak; ?>,
|
|
<?php echo $remaja; ?>,
|
|
<?php echo $dewasa; ?>,
|
|
<?php echo $lansia; ?>
|
|
],
|
|
backgroundColor : ['#17a2b8', '#28a745', '#6f42c1', '#007bff', '#6c757d'],
|
|
}
|
|
]
|
|
}
|
|
var donutOptions = {
|
|
maintainAspectRatio : false,
|
|
responsive : true,
|
|
}
|
|
new Chart(donutChartCanvas, {
|
|
type: 'doughnut',
|
|
data: donutData,
|
|
options: donutOptions
|
|
})
|
|
});
|
|
</script>
|