feat: Modern Theme and Dashboard Enhancements
- 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
This commit is contained in:
127
home/admin.php
127
home/admin.php
@@ -40,6 +40,24 @@
|
||||
$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">
|
||||
@@ -195,4 +213,111 @@
|
||||
</div>
|
||||
</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>
|
||||
127
home/kaur.php
127
home/kaur.php
@@ -40,6 +40,24 @@
|
||||
$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">
|
||||
@@ -195,4 +213,111 @@
|
||||
</div>
|
||||
</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>
|
||||
Reference in New Issue
Block a user