💻 Full Working Code
📁 dashboard.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Interactive Dashboard kwa AJAX - Faulink</title>
<style>
body { font-family: Arial; background: #eef2f3; text-align: center; padding: 40px; }
.card { display: inline-block; background: white; padding: 20px; margin: 10px; border-radius: 10px; width: 200px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
button { margin-top: 15px; background: #007bff; color: white; border: none; padding: 8px 15px; border-radius: 6px; cursor: pointer; }
</style>
</head>
<body>

<h2>📊 Interactive Dashboard kwa AJAX</h2>
<div id="dashboard">
<div class="card">
<h3>Wanafunzi</h3>
<p id="students">0</p>
<button onclick="loadData('students')">Pakia</button>
</div>

<div class="card">
<h3>Walimu</h3>
<p id="teachers">0</p>
<button onclick="loadData('teachers')">Pakia</button>
</div>

<div class="card">
<h3>Masomo</h3>
<p id="subjects">0</p>
<button onclick="loadData('subjects')">Pakia</button>
</div>
</div>

<script>
function loadData(type){
fetch("dashboard_data.php?type=" + type)
.then(res => res.text())
.then(data => document.getElementById(type).innerHTML = data)
.catch(err => alert("Hitilafu: " + err));
}
</script>

</body>
</html>
📁 dashboard_data.php
<?php
$type = $_GET['type'] ?? '';
$data = [
"students" => 157,
"teachers" => 12,
"subjects" => 9
];
echo $data[$type] ?? "0";
?>
________________________________________
🎥 YouTube Description
Dashboard ni sehemu muhimu ya mifumo ya kisasa ya web.
Katika somo hili tumejenga Interactive Dashboard inayotumia AJAX kuonyesha data papo kwa papo.
💡 Mbinu hii inafaa kwa mifumo ya shule, biashara, au uhasibu.
👨💻 Jifunze hatua kwa hatua na tengeneza dashboard yako mwenyewe kupitia Faulink YouTube Channel.
________________________________________
🏷️ Hashtags
#Dashboard #AJAX #PHP #JavaScript #Faulink #WebDevelopment #Coding #Frontend #WebDesign
________________________________________
🎬 YouTube Description
Tumejifunza kutengeneza interactive dashboard inayobadilika kwa kutumia AJAX, PHP, na Chart.js — real-time updates!
🔖 Hashtags
#AJAXDashboard #ChartJS #RealTimeData #PHP #JavaScript #FullStack #WebDevelopment