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:
@@ -33,6 +33,14 @@
|
||||
$jk = mysqli_real_escape_string($koneksi, $_GET['jekel']);
|
||||
$sql_filter = " AND p.jekel='$jk'";
|
||||
}
|
||||
if(isset($_GET['kategori'])){
|
||||
$kat = mysqli_real_escape_string($koneksi, $_GET['kategori']);
|
||||
if($kat=="Balita") $sql_filter .= " AND TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 0 AND 5";
|
||||
elseif($kat=="Anak") $sql_filter .= " AND TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 6 AND 12";
|
||||
elseif($kat=="Remaja") $sql_filter .= " AND TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 13 AND 17";
|
||||
elseif($kat=="Dewasa") $sql_filter .= " AND TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 18 AND 59";
|
||||
elseif($kat=="Lansia") $sql_filter .= " AND TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) >= 60";
|
||||
}
|
||||
|
||||
$sql = $koneksi->query("SELECT p.id_pend, p.nik, p.nama, p.jekel, p.desa, p.rt, p.rw, a.id_kk, k.no_kk, k.kepala from
|
||||
tb_pdd p left join tb_anggota a on p.id_pend=a.id_pend
|
||||
|
||||
115
dist/css/modern.css
vendored
Normal file
115
dist/css/modern.css
vendored
Normal file
@@ -0,0 +1,115 @@
|
||||
/* Modern Theme Overrides */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
background-color: #f4f6f9;
|
||||
}
|
||||
|
||||
/* Card Modernization */
|
||||
.card {
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent !important;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
|
||||
padding-top: 1.25rem !important;
|
||||
}
|
||||
|
||||
/* Navbar Modernization */
|
||||
.main-header {
|
||||
border-bottom: none !important;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Sidebar Modernization */
|
||||
.main-sidebar {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-item .nav-link {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
|
||||
}
|
||||
|
||||
/* Button Modernization */
|
||||
.btn {
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5rem 1rem;
|
||||
font-weight: 500;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4f46e5 !important;
|
||||
border-color: #4f46e5 !important;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #10b981 !important;
|
||||
border-color: #10b981 !important;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #ef4444 !important;
|
||||
border-color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #f59e0b !important;
|
||||
border-color: #f59e0b !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Form Controls */
|
||||
.form-control {
|
||||
border-radius: 8px !important;
|
||||
padding: 0.6rem 1rem !important;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #4f46e5 !important;
|
||||
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
|
||||
}
|
||||
|
||||
/* Login Page Specific */
|
||||
.login-page {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 400px !important;
|
||||
}
|
||||
|
||||
.login-card-body {
|
||||
border-radius: 20px !important;
|
||||
padding: 40px !important;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
.login-logo a {
|
||||
color: white !important;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* SweetAlert Overrides */
|
||||
.swal2-popup {
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
|
||||
.swal2-styled {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
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>
|
||||
14
index.php
14
index.php
@@ -41,6 +41,8 @@
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
<!-- Modern CSS -->
|
||||
<link rel="stylesheet" href="dist/css/modern.css">
|
||||
<!-- Alert -->
|
||||
<script src="plugins/alert.js"></script>
|
||||
</head>
|
||||
@@ -49,12 +51,12 @@
|
||||
<!-- Site wrapper -->
|
||||
<div class="wrapper">
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand navbar-red navbar-light">
|
||||
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="pushmenu" href="#">
|
||||
<i class="fas fa-bars text-white"></i>
|
||||
<i class="fas fa-bars text-secondary"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -65,7 +67,7 @@
|
||||
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="index.php" class="nav-link">
|
||||
<font color="white">
|
||||
<font color="black">
|
||||
<b>SISTEM INFORMASI DATA KEPENDUDUKAN</b>
|
||||
</font>
|
||||
</a>
|
||||
@@ -76,11 +78,11 @@
|
||||
<!-- /.navbar -->
|
||||
|
||||
<!-- Main Sidebar Container -->
|
||||
<aside class="main-sidebar sidebar-dark-primary elevation-4">
|
||||
<aside class="main-sidebar sidebar-dark-indigo elevation-4">
|
||||
<!-- Brand Logo -->
|
||||
<a href="index.php" class="brand-link">
|
||||
<img src="dist/img/izin.png" alt="AdminLTE Logo" class="brand-image" style="opacity: .8">
|
||||
<span class="brand-text"> SIDAK</span>
|
||||
<span class="brand-text font-weight-bold"> SIDAK WEB V2</span>
|
||||
</a>
|
||||
|
||||
<!-- Sidebar -->
|
||||
@@ -848,6 +850,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- ChartJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -22,6 +22,8 @@
|
||||
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="dist/css/adminlte.min.css">
|
||||
<!-- Modern CSS -->
|
||||
<link rel="stylesheet" href="dist/css/modern.css">
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user