File: /var/www/w230/html/behavior/dashboard.php
<?php
session_start();
$user_class = $_SESSION['user_class'];
if (!isset($_SESSION['user_id'])) {
header("Location: index.php");
exit();
}
include 'db.php';
// ดึงรูปผู้ใช้
$user_id = $_SESSION['user_id'];
$user_result = $conn->query("SELECT img FROM users WHERE id = '$user_id'");
$user_data = $user_result->fetch_assoc();
$user_img = !empty($user_data['img']) ? $user_data['img'] : 'default.png'; // กรณีไม่มีรูป
$summary_sql = "SELECT s.fullname, 100 + IFNULL(SUM(b.points), 0) AS total_points
FROM students s
LEFT JOIN behavior b ON s.id = b.student_id
WHERE s.class='$user_class'
GROUP BY s.id
ORDER BY s.id ASC";
$summary_result = $conn->query($summary_sql);
$labels = [];
$data = [];
foreach ($summary_result as $row) {
$labels[] = $row['fullname'];
$data[] = $row['total_points'];
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>แดชบอร์ด</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Prompt', sans-serif;
background: linear-gradient(to right, #f0fff0, #ffffe0);
}
.footer-custom {
background: linear-gradient(to right, #a8e063, #fcd34d); /* เขียว -> เหลือง */
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
</style>
</head>
<body>
<div class="container-fluid p-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
<img src="uploads/<?= htmlspecialchars($user_img) ?>" class="rounded-circle me-2" width="120" height="125">
<h4 class="mb-2 mb-md-0">ยินดีต้อนรับคุณ <?= $_SESSION['user_name'] . " Class: " . $_SESSION['user_class']; ?></h4>
<a href="logout.php" class="btn btn-danger">ออกจากระบบ</a>
</div>
<div class="row g-3 mb-4">
<div class="col-12 col-sm-6 col-md-4">
<a href="add_behavior.php" class="btn btn-primary w-100"><i class="fa fa-blind"></i> บันทึกคะแนนพฤติกรรม</a>
</div>
<div class="col-12 col-sm-6 col-md-4">
<a href="dashboard.php" class="btn btn-info w-100"><i class="fa fa-line-chart"></i> รายงานคะแนน</a>
</div>
<div class="col-12 col-sm-6 col-md-4">
<a href="view_behavior.php" class="btn btn-success w-100"><i class="fa fa-user-o" aria-hidden="true"></i> รายงานคะแนนบุคคล</a>
</div>
</div>
<div class="bg-white p-3 rounded shadow-sm mb-4" style="overflow-x: auto;">
<canvas id="behaviorChart" style="width: 100%; min-height: 400px;"></canvas>
</div>
<div class="text-end">
<a href="export_csv.php" class="btn btn-outline-primary">📥 ส่งออก CSV</a>
</div>
</div>
<script>
const labels = <?= json_encode($labels) ?>;
const data = <?= json_encode($data) ?>;
const colors = data.map(value => {
if (value >= 90) return 'hsl(120, 80%, 60%)'; // เขียว
if (value >= 70) return 'hsl(60, 100%, 60%)'; // เหลือง
return 'hsl(0, 80%, 60%)'; // แดง
});
const ctx = document.getElementById('behaviorChart').getContext('2d');
const behaviorChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'คะแนนคงเหลือจาก 100',
data: data,
backgroundColor: colors
}]
},
options: {
responsive: true,
indexAxis: 'y',
maintainAspectRatio: false,
scales: {
x: {
beginAtZero: true,
max: 100
}
},
plugins: {
legend: {
display: false
}
}
}
});
</script>
<?php include 'footer.php'; ?>
</body>
</html>