31910-0003   การสร้างเว็บไซต์  

admin

31910-0003   การสร้างเว็บไซต์   Create website 223

อ้างอิงมาตรฐาน
มาตรฐานคุณวุฒิวิชาชีพ สถาบันคุณวุฒิวิชาชีพ (องค์การมหาชน)
สมรรถนะสนับสนุนการทำงานด้านการใช้ทักษะดิจิทัล ระดับ 3
ผลลัพธ์การเรียนรู้ระดับรายวิชา

สร้างเว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสำเร็จรูป ติดตั้งโปรแกรมจำลองเว็บเซิร์ฟเวอร์ (Web Server) และอัปโหลด (Upload) เว็บไซต์ด้วยความละเอียด รอบคอบ
จุดประสงค์รายวิชา

  1. เข้าใจกระบวนการและโครงสร้างการทำงานของเว็บไซต์
  2. มีทักษะการสร้างเว็บไซต์เบื้องต้น
  3. สามารถประยุกต์ใช้เว็บไซต์สำหรับองค์กร
  4. มีเจตคติและกิจนิสัยที่ดีในการปฏิบัติงานด้วยความรับผิดชอบ การสื่อสาร การคิดเชิงนวัตกรรม และการทำงานเป็นทีม


สมรรถนะรายวิชา

  1. แสดงความรู้เกี่ยวกับกระบวนการและโครงสร้างการทำงานของเว็บไซต์
  2. ออกแบบ สร้าง ทดสอบและอัปโหลดเว็บไซต์
  3. ประยุกต์ใช้เว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสำเร็จรูป


คำอธิบายรายวิชา

          ศึกษาและปฏิบัติเกี่ยวกับการใช้โปรแกรมสร้างเว็บไซต์ กระบวนการพัฒนาและโครงสร้างการทำงานของเว็บไซต์ การออกแบบส่วนติดต่อกับผู้ใช้ ลักษณะของส่วนติดต่อกับผู้ใช้ วิเคราะห์ความต้องการการใช้งานของส่วนติดต่อกับผู้ใช้ การจัดวางองค์ประกอบ การติดตั้งโปรแกรมจำลองเว็บเซิร์ฟเวอร์ ( Web Server)  การสร้างเว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสำเร็จรูป หน้าเว็บเพจถูกออกแบบได้เหมาะสมตามวัตถุประสงค์การใช้งาน หน้าเว็บเพจถูกแทรกวัตถุ ถูกเผยแพร่ได้อย่างถูกต้อง ตามคู่มือการใช้งาน และอัปโหลด (Upload) เว็บไซต์

กรณีศึกษา สร้างเว็บไซต์สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล วิชาการสร้างเว็บไซต์

🧱 โครงสร้างไฟล์ (DBT Website)

dbt-project/
│
├── assets/                # ไฟล์ตกแต่ง
│   ├── css/
│   ├── js/
│   └── images/
│
├── uploads/               # เก็บรูปข่าว (หลายรูป)
│
├── config.php             # เชื่อมฐานข้อมูล + session
├── db.sql                 # โครงสร้างฐานข้อมูล
│
├── index.php              # หน้าเว็บไซต์ (แสดงข่าว)
├── login.php              # เข้าสู่ระบบ
├── logout.php             # ออกจากระบบ
│
├── admin/                 # ระบบหลังบ้าน
│   ├── dashboard.php      # หน้า Dashboard
│   ├── news.php           # เพิ่ม/แก้ไข/ลบข่าว
│   ├── news_form.php      # ฟอร์มเพิ่ม/แก้ข่าว (ใช้ CKEditor)
│   ├── news_delete.php    # ลบข่าว
│   ├── upload.php         # จัดการอัปโหลดรูป
│   │
│   ├── users.php          # จัดการผู้ใช้ (Admin/Teacher)
│   ├── role.php           # จัดการสิทธิ์ผู้ใช้
│   │
│   └── includes/          # ส่วน reusable
│       ├── header.php     # Header Admin
│       ├── sidebar.php    # Sidebar เมนู
│       └── footer.php     # Footer
│
├── api/                   # (ถ้าจะต่อ API ในอนาคต)
│   ├── news_api.php
│   └── auth_api.php
│
└── README.md              # คู่มือระบบ
🧱 1. โครงสร้างฐานข้อมูล (db.sql)
CREATE DATABASE dbt_project CHARACTER SET utf8mb4;
USE dbt_project;

-- ตารางผู้ใช้
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) UNIQUE,
    password VARCHAR(255),
    role ENUM('admin','teacher') DEFAULT 'teacher',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- ตารางข่าว
CREATE TABLE news (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    content TEXT,
    created_by INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (created_by) REFERENCES users(id) ON DELETE SET NULL
);

-- ตารางรูปภาพข่าว (หลายรูป)
CREATE TABLE news_images (
    id INT AUTO_INCREMENT PRIMARY KEY,
    news_id INT,
    image VARCHAR(255),
    FOREIGN KEY (news_id) REFERENCES news(id) ON DELETE CASCADE
);

⚙️ 2. config.php (เชื่อม DB + session)

<?php
session_start();

$conn = new mysqli("localhost", "root", "", "dbt_project");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

/* ===== SESSION TIMEOUT ===== */
$timeout = 900; // 15 นาที

if (isset($_SESSION['LAST_ACTIVITY'])) {
    if (time() - $_SESSION['LAST_ACTIVITY'] > $timeout) {

        session_unset();
        session_destroy();

        header("Location: login.php?timeout=1");
        exit;
    }
}

$_SESSION['LAST_ACTIVITY'] = time();
?>

🔐 3. login.php แบบ (เพิ่มปุ่มแสดง/ซ่อนรหัสผ่าน)
ตัวอย่างหน้า UI การล็อกอินเข้าสู่ระบบ

<?php
include 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $username = $_POST['username'];
    $password = md5($_POST['password']);

    $sql = "SELECT * FROM users WHERE username='$username' AND password='$password'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $_SESSION['user'] = $result->fetch_assoc();
        header("Location: admin/dashboard.php");
    } else {
        $error = "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง";
    }
}
?>
<?php
if(isset($_GET['timeout'])){
    echo "<div class='alert alert-warning'>⏱ หมดเวลาใช้งาน กรุณาเข้าสู่ระบบใหม่</div>";
}
?>

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>เข้าสู่ระบบ | DBT Project</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
    background: #f1f4f8;
    font-family: "Tahoma", sans-serif;
}

/* header */
.topbar {
    background: #0d2c6c;
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
}

/* กล่อง login */
.login-container {
    max-width: 400px;
    margin: 80px auto;
}

.login-card {
    background: white;
    border-radius: 8px;
    padding: 30px;
    border: 1px solid #ddd;
}

/* input */
.form-control {
    border-radius: 6px;
}

/* ปุ่ม */
.btn-login {
    background: #0d2c6c;
    color: white;
    font-weight: bold;
}

.btn-login:hover {
    background: #0a2354;
}

/* password toggle */
.password-box {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 38px;
    cursor: pointer;
    color: #555;
}
</style>

</head>

<body>

<div class="topbar">
    เข้าสู่ระบบบริหารจัดการเว็บไซต์ สาขาวิชาเทคโนโลยีธุรกิจดิจิทัล (DBT Website)
</div>

<div class="login-container">

<div class="login-card">

<h5 class="text-center mb-4">🔐 เข้าสู่ระบบ</h5>

<?php if(isset($error)) echo "<div class='alert alert-danger'>$error</div>"; ?>

<form method="POST">

    <div class="mb-3">
        <label>ชื่อผู้ใช้</label>
        <input type="text" name="username" class="form-control" required>
    </div>

    <div class="mb-3 password-box">
        <label>รหัสผ่าน</label>
        <input type="password" name="password" id="password" class="form-control" required>
        <span class="toggle-password" onclick="togglePassword()">👁</span>
    </div>

    <button class="btn btn-login w-100">เข้าสู่ระบบ</button>

</form>

</div>

</div>

<script>
function togglePassword() {
    let pass = document.getElementById("password");
    pass.type = pass.type === "password" ? "text" : "password";
}
</script>

</body>
</html>

เพิ่มผู้ใช้ในฐานข้อมูล

✅ 🔐 เพิ่ม admin 

INSERT INTO users (username, password, role)
VALUES ('admin', MD5('123456'), 'admin');

แก้ไขโครงสร้างตารางไม่ให้ใส่ค่าว่างได้

ALTER TABLE users
MODIFY username VARCHAR(100) NOT NULL,
MODIFY password VARCHAR(255) NOT NULL;

ให้ทำการทดลองเข้าระบบ เมื่อล็อกอินได้สำเร็จจะเจอหน้า Dashboard ของ Admin

🚪 logout.php (กลับหน้าแรก)

<?php
session_start();
session_destroy();
?><!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ออกจากระบบ</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>
body {
    background: #f1f4f8;
    font-family: "Tahoma", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}.logout-box {
    background: white;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #ddd;
    text-align: center;
    max-width: 400px;
}.icon {
    font-size: 60px;
}.btn-home {
    background: #0d2c6c;
    color: white;
    font-weight: bold;
}.btn-home:hover {
    background: #0a2354;
}
</style><!-- redirect ไปหน้าแรก -->
<meta http-equiv="refresh" content="3;url=index.php"></head><body><div class="logout-box"><div class="icon mb-3">✅</div><h5 class="mb-3">ออกจากระบบเรียบร้อย</h5><p class="text-muted">
กำลังนำท่านกลับสู่หน้าแรก...
</p><a href="index.php" class="btn btn-home mt-3 w-100">
กลับหน้าแรก
</a></div></body>
</html>

หน้าจอการออกจากระบบ

🧑‍💻 6. admin/dashboard.php

การทำหน้า Dashboard เมื่อมีการล็อกอินเข้ามาในระบบ

<?php
include '../config.php';

if(!isset($_SESSION['user'])){
  header("Location: ../login.php");
  exit;
}

// 🔐 เช็คสิทธิ์
if($_SESSION['user']['role'] != 'admin'){
  echo "ไม่มีสิทธิ์เข้าถึงหน้านี้";
  exit;
}

// 📊 ข้อมูล
$total_news = $conn->query("SELECT COUNT(*) as total FROM news")->fetch_assoc()['total'];
$total_users = $conn->query("SELECT COUNT(*) as total FROM users")->fetch_assoc()['total'];

$total_admin = $conn->query("SELECT COUNT(*) as total FROM users WHERE role='admin'")->fetch_assoc()['total'];
$total_teacher = $conn->query("SELECT COUNT(*) as total FROM users WHERE role='teacher'")->fetch_assoc()['total'];

// 📈 Chart
$chartData = [];
$result = $conn->query("
  SELECT DATE(created_at) as d, COUNT(*) as total 
  FROM news 
  GROUP BY d 
  ORDER BY d ASC
");

while($row = $result->fetch_assoc()){
  $chartData[] = $row;
}

// 🔥 ข่าวยอดนิยม
$popular = $conn->query("SELECT * FROM news ORDER BY views DESC LIMIT 5");
?>

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>Dashboard</title>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
body { font-family: Tahoma; }
.topbar { background:#0d2c6c; }
</style>
</head>

<body class="bg-gray-100">

<!-- 🔷 Topbar -->
<div class="topbar text-white p-4 flex justify-between">
  <h1 class="font-bold">ระบบจัดการข่าวสาร</h1>
  <div>
    👤 <?= $_SESSION['user']['username'] ?> 
    (<?= $_SESSION['user']['role'] ?>)
    | <a href="../logout.php" class="underline">ออกจากระบบ</a>
  </div>
</div>

<div class="flex">

<!-- Sidebar -->
<aside class="w-64 bg-white shadow min-h-screen p-4">
  <h2 class="font-bold mb-4 text-gray-700">เมนูระบบ</h2>
  <ul class="space-y-2">
    <li><a href="dashboard.php" class="block p-2 bg-blue-100 rounded">📊 Dashboard</a></li>
    <li><a href="news.php" class="block p-2 hover:bg-gray-100 rounded">📰 ข่าว</a></li>
    <li><a href="users.php" class="block p-2 hover:bg-gray-100 rounded">👤 ผู้ใช้</a></li>
    <li><a href="../index.php" class="block p-2 hover:bg-gray-100 rounded">🏠 เว็บไซต์</a></li>
  </ul>
</aside>

<!-- Content -->
<main class="p-6 w-full">

<h2 class="text-xl font-bold mb-6">ภาพรวมระบบ</h2>

<!-- Cards -->
<div class="grid grid-cols-4 gap-6 mb-6">

  <div class="bg-white p-5 rounded shadow border-l-4 border-blue-600">
    <p>ข่าวทั้งหมด</p>
    <h3 class="text-3xl font-bold"><?= $total_news ?></h3>
  </div>

  <div class="bg-white p-5 rounded shadow border-l-4 border-green-600">
    <p>ผู้ใช้ทั้งหมด</p>
    <h3 class="text-3xl font-bold"><?= $total_users ?></h3>
  </div>

  <div class="bg-white p-5 rounded shadow border-l-4 border-purple-600">
    <p>Admin</p>
    <h3 class="text-3xl font-bold"><?= $total_admin ?></h3>
  </div>

  <div class="bg-white p-5 rounded shadow border-l-4 border-yellow-600">
    <p>Teacher</p>
    <h3 class="text-3xl font-bold"><?= $total_teacher ?></h3>
  </div>

</div>

<!-- Charts -->
<div class="grid grid-cols-2 gap-6">

  <div class="bg-white p-6 rounded shadow">
    <h3 class="font-bold mb-4">สถิติข่าวรายวัน</h3>
    <canvas id="lineChart"></canvas>
  </div>

  <div class="bg-white p-6 rounded shadow">
    <h3 class="font-bold mb-4">สัดส่วนข้อมูล</h3>
    <canvas id="pieChart"></canvas>
  </div>

</div>

<!-- Popular -->
<div class="bg-white p-6 rounded shadow mt-6">
  <h3 class="font-bold mb-4">ข่าวยอดนิยม</h3>

  <table class="w-full">
    <thead class="bg-gray-100">
      <tr>
        <th class="p-2">หัวข้อ</th>
        <th class="p-2">ยอดวิว</th>
      </tr>
    </thead>
    <tbody>
    <?php while($row=$popular->fetch_assoc()){ ?>
      <tr class="border-b">
        <td class="p-2"><?= $row['title'] ?></td>
        <td class="p-2">👁 <?= $row['views'] ?? 0 ?></td>
      </tr>
    <?php } ?>
    </tbody>
  </table>

</div>

</main>
</div>

<!-- Chart -->
<script>
new Chart(document.getElementById('lineChart'), {
  type: 'line',
  data: {
    labels: [<?php foreach($chartData as $r){ echo "'".$r['d']."',"; } ?>],
    datasets: [{
      label: 'จำนวนข่าว',
      data: [<?php foreach($chartData as $r){ echo $r['total'].","; } ?>],
      borderWidth: 2,
      tension: 0.3
    }]
  }
});

new Chart(document.getElementById('pieChart'), {
  type: 'doughnut',
  data: {
    labels: ['ข่าว', 'ผู้ใช้'],
    datasets: [{
      data: [<?= $total_news ?>, <?= $total_users ?>]
    }]
  },
  options: { cutout: '70%' }
});
</script>

</body>
</html>

การทำหน้า 🎨 ✅ news.php เพื่อใช้ในการเพิ่มข่าวสาร

เมื่อเพิ่มข้อข่าวสารจะแสดงดังภาพ

ตัวอย่างชุดคำสั่ง หน้า news.php

<?php
include '../config.php';

if(!isset($_SESSION['user'])){
  header("Location: ../login.php");
}

// เพิ่มข่าว
if(isset($_POST['add'])){
  $title = $_POST['title'];
  $content = $_POST['content'];
  $user_id = $_SESSION['user']['id'];

  // เพิ่มข่าว
  $conn->query("INSERT INTO news(title, content, created_by)
  VALUES('$title','$content','$user_id')");

  $news_id = $conn->insert_id;

  // 🔥 อัปโหลดรูป
  if(!empty($_FILES['images']['name'][0])){
    foreach($_FILES['images']['name'] as $key => $name){

      $tmp = $_FILES['images']['tmp_name'][$key];
      $newName = time().'_'.$name;

      move_uploaded_file($tmp, "../uploads/".$newName);

      $conn->query("INSERT INTO news_images(news_id,image)
      VALUES('$news_id','$newName')");
    }
  }
}

// ดึงข่าว
$res=$conn->query("SELECT * FROM news ORDER BY id DESC");
?>

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex bg-gray-100">

<!-- Sidebar -->
<aside class="w-64 bg-gray-900 text-white min-h-screen p-4">
  <h2 class="text-xl font-bold mb-6">Admin</h2>

  <ul>
    <li class="mb-3"><a href="dashboard.php" class="block p-2 hover:bg-gray-700 rounded">📊 Dashboard</a></li>
    <li class="mb-3"><a href="news.php" class="block p-2 bg-gray-700 rounded">📰 จัดการข่าว</a></li>
    <li class="mb-3"><a href="../index.php" class="block p-2 hover:bg-blue-600 rounded">🏠 หน้าเว็บไซต์</a></li>
    <li class="mt-6"><a href="../logout.php" class="block p-2 bg-red-600 text-center rounded">🔓 ออกจากระบบ</a></li>
  </ul>
</aside>

<!-- Content -->
<main class="p-6 w-full">

<h1 class="text-2xl font-bold mb-6">📰 จัดการข่าว</h1>

<!-- ฟอร์ม -->
<div class="bg-white p-6 rounded shadow mb-6">
  <h2 class="text-lg font-bold mb-4">➕ เพิ่มข่าว</h2>

  <!-- 🔥 เพิ่ม enctype -->
  <form method="POST" enctype="multipart/form-data" class="space-y-4">

    <input name="title" placeholder="หัวข้อข่าว"
    class="w-full border p-2 rounded" required>

    <textarea name="content" placeholder="รายละเอียดข่าว"
    class="w-full border p-2 rounded h-32" required></textarea>

    <!-- 🔥 อัปโหลดรูป -->
    <input type="file" name="images[]" multiple
    class="w-full border p-2 rounded">

    <button name="add"
    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
      ➕ เพิ่มข่าว
    </button>

  </form>
</div>

<!-- ตาราง -->
<div class="bg-white p-6 rounded shadow">
  <h2 class="text-lg font-bold mb-4">📋 รายการข่าว</h2>

  <table class="w-full border">
    <thead class="bg-gray-200">
      <tr>
        <th class="p-2">ID</th>
        <th class="p-2">รูป</th>
        <th class="p-2">หัวข้อ</th>
        <th class="p-2">วันที่</th>
        <th class="p-2">จัดการ</th>
      </tr>
    </thead>

    <tbody>
    <?php while($row=$res->fetch_assoc()){ 

      // ดึงรูปแรก
      $img = $conn->query("SELECT * FROM news_images 
      WHERE news_id=".$row['id']." LIMIT 1")->fetch_assoc();
    ?>
      <tr class="border-t hover:bg-gray-50">
        <td class="p-2"><?=$row['id']?></td>

        <td class="p-2">
          <?php if($img): ?>
            <img src="../uploads/<?=$img['image']?>" width="80" class="rounded">
          <?php else: ?>
            -
          <?php endif; ?>
        </td>

        <td class="p-2"><?=$row['title']?></td>
        <td class="p-2"><?=$row['created_at']?></td>
     <td class="p-2">
  <a href="news_edit.php?id=<?=$row['id']?>"
  class="bg-yellow-500 text-white px-3 py-1 rounded hover:bg-yellow-600">
  ✏️ แก้ไข
  </a>

  <a href="news_delete.php?id=<?=$row['id']?>"
  class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600">
  ลบ
  </a>
</td>
        </td>      
      </tr>
    <?php } ?>
    </tbody>
  </table>
</div>
</main>
</body>
</html>

สร้างหน้า view.php (หน้าอ่านข่าว + Slide รูปสวย ๆ) ให้เชื่อมกับปุ่ม

🎯 ✅ เป้าหมาย

เมื่อกด:

view.php?id=1

จะได้:

  • 🖼️ Slide รูปหลายรูป (Carousel)
  • 📰 เนื้อหาข่าวเต็ม
  • 👁 เพิ่มวิวอัตโนมัติ
  • ❤️ รองรับ Like (เผื่ออนาคต)

⚠️ สำคัญ (ต้องมี)

ต้องตรวจสอบฐานข้อมูล ตาราง news ต้องมี field views

SQL

ALTER TABLE news ADD views INT DEFAULT 0;

🔥 การเพิ่ม likes ให้ระบบ

SQL
ALTER TABLE news ADD likes INT DEFAULT 0;

🧱 1. สร้างไฟล์ API

📁 สร้างไฟล์: api/like.php

<?php
include '../config.php';$id = $_POST['id'];// เพิ่ม like
$conn->query("UPDATE news SET likes = IFNULL(likes,0)+1 WHERE id=$id");// ดึงค่าใหม่
$result = $conn->query("SELECT likes FROM news WHERE id=$id");
$row = $result->fetch_assoc();echo json_encode([
    "likes" => $row['likes']
]);

🎨 2. แก้หน้า view.php

🔥 เพิ่มปุ่ม Like

<p class="text-muted">
📅 <?= $news['created_at'] ?> |
👁 <?= $news['views'] ?? 0 ?> |
❤️ <span id="likeCount"><?= $news['likes'] ?? 0 ?></span>
</p><button onclick="likeNews(<?= $news['id'] ?>)"
class="btn btn-danger">
❤️ กดถูกใจ
</button>

⚡ 3. ใส่ JavaScript (AJAX)

ใส่ก่อน </body>

<script>
function likeNews(id){
    fetch('api/like.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'id=' + id
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById('likeCount').innerText = data.likes;
    });
}
</script>

สร้างไฟล์ใหม่ : news_edit.php เพื่อให้สามารถแก้ไขข้อมูลข่าวได้

<?php
include '../config.php';
// 🔐 ตรวจสอบการ login
if(!isset($_SESSION['user'])){
    header("Location: ../login.php");
    exit();
}
// 🔎 ตรวจสอบ id
if(!isset($_GET['id']) || !is_numeric($_GET['id'])){
    die("ไม่พบข้อมูล");
}
$id = $_GET['id'];
/* =========================
   📥 ดึงข้อมูลข่าว
========================= */
$stmt = $conn->prepare("SELECT * FROM news WHERE id=?");
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();

/* =========================
   🔄 อัปเดตข่าว
========================= */
if(isset($_POST['update'])){

    $title = $_POST['title'];
    $content = $_POST['content'];
    // อัปเดตข้อมูล
    $stmt = $conn->prepare("UPDATE news SET title=?, content=? WHERE id=?");
    $stmt->bind_param("ssi", $title, $content, $id);
    $stmt->execute();
    // 📷 อัปโหลดรูป
    if(!empty($_FILES['images']['name'][0])){
        foreach($_FILES['images']['name'] as $key => $name){
            $tmp = $_FILES['images']['tmp_name'][$key];
            // ตั้งชื่อไฟล์ใหม่ (กันซ้ำ)
            $newName = time().'_'.$name;
            move_uploaded_file($tmp, "../uploads/".$newName);
            // บันทึก DB
            $stmt = $conn->prepare("INSERT INTO news_images(news_id,image) VALUES(?,?)");
            $stmt->bind_param("is", $id, $newName);
            $stmt->execute();
        }
    }
    // redirect
    header("Location: news.php");
    exit();
}
/* =========================
   🖼 ดึงรูปภาพ
========================= */
$images = $conn->query("SELECT * FROM news_images WHERE news_id=$id");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-3xl mx-auto bg-white p-6 rounded shadow">
<h2 class="text-xl font-bold mb-4">✏️ แก้ไขข่าว</h2>
<!-- 📌 ฟอร์ม -->
<form method="POST" enctype="multipart/form-data" class="space-y-4">
    <!-- หัวข้อ -->
    <input name="title" value="<?= htmlspecialchars($data['title']) ?>"
    class="w-full border p-2 rounded" required>
    <!-- เนื้อหา -->
    <textarea name="content"
    class="w-full border p-2 rounded h-32" required><?= htmlspecialchars($data['content']) ?></textarea>
    <!-- อัปโหลด -->
    <input type="file" name="images[]" multiple
    class="w-full border p-2 rounded">
    <!-- ปุ่ม -->
    <div class="flex gap-2">
        <button name="update"
        class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
        💾 บันทึก
        </button>
        <a href="news.php"
        class="bg-gray-500 text-white px-4 py-2 rounded">
        ↩ กลับ
        </a>
    </div>
</form>
<!-- 📷 แสดงรูป -->
<div class="mt-6">
<h3 class="font-bold mb-2">รูปภาพข่าว</h3>
<?php while($img=$images->fetch_assoc()){ ?>
    <div class="inline-block m-2 text-center">
        <img src="../uploads/<?= $img['image'] ?>" width="100" class="rounded shadow">
        <br>
        <a href="delete_image.php?id=<?= $img['id'] ?>"
        class="text-red-500 text-sm">ลบ</a>
    </div>
<?php } ?>

</div>

</div>

</body>
</html>

หน้าแรกของเว็บไซต์ index.php

<?php include 'config.php'; ?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>DBT Project</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
    background: #f4f6f9;
    font-family: "Tahoma", sans-serif;
}

/* Navbar */
.navbar {
    background: #0d2c6c;
}

/* Slide */
.carousel-item img {
    height: 400px;
    object-fit: cover;
}

/* ข่าว */
.news-card img {
    height: 200px;
    object-fit: cover;
}
</style>

</head>

<body>

<!-- 🔷 Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">

    <a class="navbar-brand fw-bold">DBT Project</a>

    <!-- ปุ่มมือถือ -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">

        <!-- เมนูซ้าย -->
        <ul class="navbar-nav me-auto">

            <li class="nav-item">
                <a class="nav-link text-white" href="index.php">หน้าแรก</a>
            </li>

            <?php if(isset($_SESSION['user'])): ?>
            <!-- ⭐ แสดงเมื่อ login -->
            <li class="nav-item">
                <a class="nav-link text-warning fw-bold" href="admin/news.php">
                    📰 จัดการข่าว
                </a>
            </li>
            <?php endif; ?>

        </ul>
        <!-- เมนูขวา -->
        <div class="d-flex align-items-center">
        <?php if(isset($_SESSION['user'])): ?>
            <span class="text-white me-3">
                👤 <?= $_SESSION['user']['username']; ?>
            </span>

            <a href="logout.php" class="btn btn-outline-light btn-sm">
                🔓 ออกจากระบบ
            </a>
        <?php else: ?>
            <a href="login.php" class="btn btn-light btn-sm">
                🔐 เข้าสู่ระบบ
            </a>
        <?php endif; ?>
        </div>
    </div>
</div>
</nav>
<!-- 🎞 Slide -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="assets/images/slide1.jpg" class="d-block w-100">
    </div>
    <div class="carousel-item">
        <img src="assets/images/slide2.jpg" class="d-block w-100">
    </div>
    <div class="carousel-item">
        <img src="assets/images/slide3.jpg" class="d-block w-100">
    </div>
</div>
<button class="carousel-control-prev" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<!-- 📰 ข่าว -->
<div class="container mt-5">
<h4 class="mb-4">📢 ข่าวประชาสัมพันธ์</h4>
<div class="row">
<?php
$result = $conn->query("SELECT * FROM news ORDER BY id DESC LIMIT 6");
while ($row = $result->fetch_assoc()) {
    $img = $conn->query("SELECT * FROM news_images WHERE news_id=".$row['id']." LIMIT 1")->fetch_assoc();
?>
<div class="col-md-4 mb-4">
<div class="card news-card shadow-sm">
<?php if($img): ?>
<img src="uploads/<?= $img['image'] ?>" class="card-img-top">
<?php else: ?>
<img src="assets/images/no-image.png" class="card-img-top">
<?php endif; ?>
<div class="card-body">
    <h6><?= $row['title'] ?></h6>
    <p class="text-muted small">
        👁 <?= $row['views'] ?? 0 ?> |
        ❤️ <?= $row['likes'] ?? 0 ?>
    </p>
    <a href="view.php?id=<?= $row['id'] ?>" class="btn btn-primary btn-sm">
        อ่านเพิ่มเติม
    </a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<!-- Footer -->
<footer class="text-center mt-5 p-3 bg-light">
    © 2026 DBT Project | ระบบเว็บไซต์หน่วยงาน
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

การจัดการสิทธิ์ Admin

เพิ่มฟิลด์ ในตาราง users

  • 👤 fullname
  • 📧 email
  • 📱 phone
  • 🟢 status (active / inactive)

ชุดคำสั่ง ไฟล์ users.php

<?php
include '../config.php';
// 🔒 ตรวจสอบ login
if(!isset($_SESSION['user'])){
    header("Location: ../login.php");
    exit();
}
// 🔒 เฉพาะ admin
if($_SESSION['user']['role'] != 'admin'){
    exit("❌ ไม่มีสิทธิ์เข้าถึง");
}
/* =========================
   ➕ เพิ่มผู้ใช้
========================= */
if(isset($_POST['add'])){
    $username = $_POST['username'];
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
    $fullname = $_POST['fullname'];
    $email = $_POST['email'];
    $role = $_POST['role'];
    $status = $_POST['status'];
    $stmt = $conn->prepare("INSERT INTO users(username,password,fullname,email,role,status)
    VALUES(?,?,?,?,?,?)");
    $stmt->bind_param("ssssss",
        $username,
        $password,
        $fullname,
        $email,
        $role,
        $status
    );
    $stmt->execute();
}
/* =========================
   🔄 อัปเดต role + status
========================= */
if(isset($_POST['update'])){
    $id = $_POST['id'];
    $role = $_POST['role'];
    $status = $_POST['status'];
    $stmt = $conn->prepare("UPDATE users SET role=?, status=? WHERE id=?");
    $stmt->bind_param("ssi", $role, $status, $id);
    $stmt->execute();
}
/* =========================
   ❌ ลบผู้ใช้
========================= */
if(isset($_GET['delete'])){
    $id = $_GET['delete'];
    $conn->query("DELETE FROM users WHERE id=$id");
}
/* =========================
   📋 ดึงข้อมูล
========================= */
$users = $conn->query("SELECT * FROM users ORDER BY id DESC");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex bg-gray-100">
<!-- Sidebar -->
<aside class="w-64 bg-gray-900 text-white min-h-screen p-4">
  <h2 class="text-xl font-bold mb-6">Admin</h2>
  <ul>
    <li class="mb-3"><a href="dashboard.php" class="block p-2 hover:bg-gray-700 rounded">📊 Dashboard</a></li>
    <li class="mb-3"><a href="news.php" class="block p-2 hover:bg-gray-700 rounded">📰 จัดการข่าว</a></li>
    <li class="mb-3"><a href="users.php" class="block p-2 bg-gray-700 rounded">👤 ผู้ใช้</a></li>
    <li class="mt-6"><a href="../logout.php" class="block p-2 bg-red-600 text-center rounded">🔓 ออกจากระบบ</a></li>
  </ul>
</aside>
<!-- Content -->
<main class="p-6 w-full">
<h1 class="text-2xl font-bold mb-6">👤 จัดการผู้ใช้</h1>
<!-- ➕ เพิ่มผู้ใช้ -->
<div class="bg-white p-6 rounded shadow mb-6">
  <h2 class="text-lg font-bold mb-4">➕ เพิ่มผู้ใช้</h2>
  <form method="POST" class="grid grid-cols-2 gap-4">
    <input name="username" placeholder="Username"
    class="border p-2 rounded" required>
    <input type="password" name="password" placeholder="Password"
    class="border p-2 rounded" required>
    <input name="fullname" placeholder="ชื่อ-นามสกุล"
    class="border p-2 rounded col-span-2">
    <input name="email" placeholder="Email"
    class="border p-2 rounded col-span-2">
    <select name="role" class="border p-2 rounded">
      <option value="teacher">Teacher</option>
      <option value="admin">Admin</option>
    </select>
    <select name="status" class="border p-2 rounded">
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
    <button name="add"
    class="bg-blue-600 text-white px-4 py-2 rounded col-span-2">
      ➕ เพิ่มผู้ใช้
    </button>
  </form>
</div>
<!-- 📋 ตาราง -->
<div class="bg-white p-6 rounded shadow">
<h2 class="text-lg font-bold mb-4">📋 รายการผู้ใช้</h2>
<table class="w-full border text-sm">
<thead class="bg-gray-200">
<tr>
  <th class="p-2">ID</th>
  <th class="p-2">ชื่อ</th>
  <th class="p-2">Username</th>
  <th class="p-2">Email</th>
  <th class="p-2">Role</th>
  <th class="p-2">Status</th>
  <th class="p-2">จัดการ</th>
</tr>
</thead>
<tbody>
<?php while($row=$users->fetch_assoc()){ ?>
<tr class="border-t">
  <td class="p-2"><?= $row['id'] ?></td>
  <td class="p-2"><?= $row['fullname'] ?></td>
  <td class="p-2"><?= $row['username'] ?></td>
  <td class="p-2"><?= $row['email'] ?></td>
  <td class="p-2">
    <form method="POST" class="flex gap-2">
      <input type="hidden" name="id" value="<?= $row['id'] ?>">
      <select name="role" class="border p-1">
        <option value="teacher" <?= $row['role']=='teacher'?'selected':'' ?>>Teacher</option>
        <option value="admin" <?= $row['role']=='admin'?'selected':'' ?>>Admin</option>
      </select>
  </td>
  <td class="p-2">
      <select name="status" class="border p-1">
        <option value="active" <?= $row['status']=='active'?'selected':'' ?>>Active</option>
        <option value="inactive" <?= $row['status']=='inactive'?'selected':'' ?>>Inactive</option>
      </select>
  </td>
  <td class="p-2">
      <button name="update"
      class="bg-yellow-500 text-white px-2 rounded">✔</button>
      <a href="?delete=<?= $row['id'] ?>"
      onclick="return confirm('ลบผู้ใช้นี้?')"
      class="bg-red-500 text-white px-2 py-1 rounded">
        ลบ
      </a>
    </form>
  </td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</main>
</body>
</html>
Post Views: 27