KSD News

บุคลากร

<?php
// เชื่อมต่อฐานข้อมูล (ปรับให้ตรงกับฐานข้อมูลจริงของคุณ)
$host = 'localhost';
$dbname = 'ksdacth_lesson_plan_db';
$username = 'ksdacth_admin';
$password = 'Abc9988771';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die("Error: " . $e->getMessage());
}

// ดึงข้อมูลบุคลากรแยกตามกลุ่มสาระ/แผนก
$stmt = $pdo->query("SELECT * FROM users WHERE role IN ('admin', 'teacher') ORDER BY department ASC, id ASC");
$personnel = $stmt->fetchAll(PDO::FETCH_ASSOC);

// จัดกลุ่มข้อมูลตามแผนก
$grouped = [];
foreach ($personnel as $p) {
    $dept = $p['department'] ?: 'ไม่ระบุกลุ่มสาระ';
    $grouped[$dept][] = $p;
}
?>

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ทำเนียบส่วนบุคลากร | KSD System</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Sarabun', sans-serif; background-color: #f4f7f6; color: #444; }
        .hero-section { background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); color: white; padding: 60px 0; margin-bottom: 40px; text-align: center; }
        .dept-title { border-left: 5px solid #4e73df; padding-left: 15px; margin-bottom: 30px; font-weight: 600; color: #2e59d9; }
        .person-card { border: none; border-radius: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; background: white; text-align: center; padding: 20px; height: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .person-card:hover { transform: translateY(-10px); box-shadow: 0 12px 20px rgba(0,0,0,0.1); }
        .profile-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 5px solid #f8f9fc; margin-bottom: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .name { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; color: #333; }
        .position { font-size: 0.9rem; color: #4e73df; font-weight: 500; margin-bottom: 10px; }
        .contact-info { font-size: 0.8rem; color: #888; border-top: 1px solid #eee; pt-2; }
    </style>
</head>
<body>

<div class="hero-section">
    <div class="container">
        <h1>บุคลากรทางการศึกษา</h1>
        <p class="lead">วิทยาลัยเทคนิคสารภี (KSD) - มุ่งมั่นสร้างสรรค์ พัฒนาฝีมือ</p>
    </div>
</div>

<div class="container mb-5">
    <?php foreach ($grouped as $deptName => $members): ?>
        <h3 class="dept-title mt-5"><?php echo htmlspecialchars($deptName); ?></h3>
        <div class="row g-4">
            <?php foreach ($members as $m): ?>
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="person-card">
                        <?php 
                            $img = $m['image_path'] ?: 'https://ui-avatars.com/api/?name=' . urlencode($m['full_name']) . '&size=200&background=4e73df&color=fff';
                        ?>
                        <img src="<?php echo $img; ?>" class="profile-img" alt="Profile">
                        <div class="name"><?php echo htmlspecialchars($m['full_name']); ?></div>
                        <div class="position"><?php echo htmlspecialchars($m['position']); ?></div>
                        <div class="contact-info mt-2">
                            <div><i class="bi bi-envelope"></i> <?php echo htmlspecialchars($m['email'] ?: '-'); ?></div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endforeach; ?>
</div>

<footer class="text-center py-4 bg-white border-top">
    <p class="text-muted mb-0">© 2026 Personnel Information System - KSD</p>
</footer>

</body>
</html>