การพัฒนาเว็บไซต์แนะนำผลิตภัณฑ์ “ของดีเมืองศรีสะเกษ”

ฐานข้อมูล MySQL ใน XAMPP
เทคโนโลยีที่ใช้
XAMPP (Apache + MySQL)
PHP
MySQL Database
HTML / CSS

🎯 จุดประสงค์การเรียนรู้

ผู้เรียนสามารถ

สร้างฐานข้อมูล MySQL ได้
พัฒนาเว็บไซต์ด้วย PHP ได้
เชื่อมต่อฐานข้อมูลกับเว็บไซต์ได้
สร้างระบบ Login Admin
สร้างระบบ เพิ่ม แก้ไข ลบ ดูข้อมูล (CRUD)
ออกแบบหน้าเว็บไซต์ให้ใช้งานได้จริง

โครงสร้างระบบเว็บไซต์ (Website Structure)

หน้าแรก (index.php)
│
├── ดูสินค้าแนะนำ
├── ไปหน้าสินค้า (products.php)
│ │
│ ├── ดูรายละเอียดสินค้า (product_detail.php)
│ │ │
│ │ └── ดู/เขียนรีวิว (reviews.php)
│ │ │
│ │ └── บันทึกรีวิว (save_review.php)
│ │
│ └── ถ้าเป็น Admin
│ ├── เพิ่มสินค้า (add_product.php → save_product.php)
│ ├── แก้ไขสินค้า (edit_product.php → update_product.php)
│ └── ลบสินค้า (delete_product.php)
│
├── ดูรายงานสินค้า (report.php)
│
└── เข้าสู่ระบบ Admin
├── login.php
├── check_login.php
└── logout.php

หน้าที่ของแต่ละไฟล์ในระบบเว็บไซต์หน้าที่ของแต่ละไฟล์ในระบบเว็บไซต์

1️⃣ config.php
หน้าที่ ใช้สำหรับ เชื่อมต่อฐานข้อมูล MySQL การทำงาน เว็บไซต์ → config.php → ฐานข้อมูล MySQL
ไฟล์อื่น ๆ จะใช้คำสั่ง include(“config.php”);
เพื่อเรียกใช้การเชื่อมต่อฐานข้อมูล

🔁 การทำงานของระบบทั้งหมด

ผู้ใช้
  │
  ▼
หน้าแรก (index.php)
  │
  ▼
รายการสินค้า (products.php)
  │
  ▼
รายละเอียดสินค้า (product_detail.php)

สำหรับ Admin

Login
   │
   ▼
Dashboard
   │
   ├── เพิ่มสินค้า
   ├── แก้ไขสินค้า
   ├── ลบสินค้า
   │
   ▼
แสดงสินค้าในเว็บไซต์
ขั้นตอนการสอน: การสร้างฐานข้อมูลและตารางสินค้า
1️⃣ เปิดโปรแกรม XAMPP
    ให้นักศึกษาทำตามขั้นตอน เปิดโปรแกรม XAMPP Control Panel
    กด Start
    Apache
    MySQL
    เมื่อทำงานแล้วจะเป็นสีเขียว

2️⃣ เข้า phpMyAdmin

เปิด Browser แล้วพิมพ์ http://localhost/phpmyadmin จะเข้าสู่หน้าจัดการฐานข้อมูล

3️⃣ สร้างฐานข้อมูล (Database)

ให้นักศึกษาคลิก New ตั้งชื่อฐานข้อมูล sisaket_products เลือก utf8mb4_general_ci แล้วกด Create
การสร้างโครงสร้างฐานข้อมูลระบบเว็บไซต์สินค้า OTOP ศรีสะเกษ
ระบบเว็บไซต์จะประกอบด้วย 5 ตารางหลัก

1 categories
2 products
3 product_views
4 reviews
5 users

ชื่อฐานข้อมูล sisaket_products
1. ตารางประเภทสินค้า โครงสร้างตาราง Table structure for table categories

โครงสร้างคำสั่ง SQL 
CREATE TABLE `categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB 
AUTO_INCREMENT=6 
DEFAULT CHARSET=utf8mb4 
COLLATE=utf8mb4_general_ci;
การเพิ่มข้อมูลในตาราง ประเภทสินค้า
INSERT INTO `categories` (`id`, `category_name`) VALUES
(1, 'อาหาร'),
(2, 'ผลไม้'),
(3, 'ผ้า'),
(4, 'ของฝาก'),
(5, 'สมุนไพร');
2. ตารางสินค้า-- Table structure for table `products`
SQL
CREATE TABLE `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_name` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `price` int(11) DEFAULT NULL,
  `image` varchar(255) DEFAULT NULL,
  `category` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB 
AUTO_INCREMENT=20
DEFAULT CHARSET=utf8mb4 
COLLATE=utf8mb4_general_ci;

3.ตารางการเข้าชมสินค้า Table structure for table `product_views`
SQL
CREATE TABLE `product_views` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) DEFAULT NULL,
  `view_date` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB
DEFAULT CHARSET=utf8mb4
COLLATE=utf8mb4_general_ci;

4.Table structure for table `reviews`
SQL
CREATE TABLE `reviews` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) DEFAULT NULL,
  `customer_name` varchar(255) DEFAULT NULL,
  `comment` text DEFAULT NULL,
  `rating` int(11) DEFAULT NULL,
  `review_date` date DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB 
AUTO_INCREMENT=6
DEFAULT CHARSET=utf8mb4 
COLLATE=utf8mb4_general_ci;

5. ตารางผู้ใช้ Table structure for table `users`
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(100) DEFAULT NULL,
  `password` varchar(100) DEFAULT NULL,
  `role` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB 
AUTO_INCREMENT=2
DEFAULT CHARSET=utf8mb4 
COLLATE=utf8mb4_general_ci;
เพิ่มข้อมูลผู้ดูแลระบบ Dumping data for table `users`
INSERT INTO `users` (`id`, `username`, `password`, `role`) VALUES
(1, 'admin', '1234', NULL);

1. การเชื่อมต่อฐานข้อมูลกับเว็บไซต์ (Database Connection)

สร้างโฟลเดอร์ชื่อ sisaket ที่ C:\xampp\htdocs\
การใช้ โปรแกรม VS Code สร้างไฟล์ config.php เชื่อมต่อ MySQL

ไฟล์ config.php

ตัวอย่างโค้ด

<?php
$host="localhost";
$user="root";
$pass="";
$db="sisaket_products";
$conn=mysqli_connect($host,$user,$pass,$db);
if(!$conn){
die("Database error");
}
?>

ผลลัพธ์ที่นักศึกษาต้องได้

สามารถเชื่อมต่อฐานข้อมูลจากเว็บไซต์ได้สำเร็จ

สร้าง CSS

ขั้นที่ 1 สร้างโครงสร้างหน้าเว็บไซต์ (HTML Layout)

ให้นักศึกษาสร้างโฟล์เดอร์ assets ซึ่งมีไฟล์ชื่อ style.css
โฟล์เดอร์ images/ เก็บไว้อยู่ด้านในโฟลเดอร์ assets

ขั้นที่ 1 แนะนำโครงสร้างไฟล์ CSS
สร้างไฟล์ Style.CSS โดยพิมพ์ดังนี้

body{
margin:0;
font-family:Tahoma;
background:#f4f6f9;
}
/* HEADER */
.header{
background:#ff7a00;
color:white;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}
nav a{
color:white;
margin-left:15px;
text-decoration:none;
}
/* HERO IMAGE */
.hero{
height:300px;
background:url(‘../images/banner.jpg’);
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}
/* กล่องข้อความ */
.hero-content{
background:rgba(0,0,0,0.45);
padding:40px;
border-radius:10px;
}
.hero h1{
font-size:40px;
margin-bottom:10px;
}
.hero p{
font-size:20px;
margin-bottom:20px;
}
.btn{
background:#28a745;
padding:12px 20px;
color:white;
text-decoration:none;
border-radius:6px;
font-size:18px;
}
/* PRODUCT GRID */
.products{
padding:40px;
}
.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}
/* PRODUCT CARD */
.card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.2);
text-align:center;
transition:0.3s;
}
/* hover */
.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}
/* รูปสินค้า */
.card img{
width:100%;
height:160px;
object-fit:cover;
border-radius:6px;
transition:0.4s;
}
/* zoom */
.card:hover img{
transform:scale(1.08);
}
/* REVIEW */
.review-box{
border:1px solid #ddd;
padding:15px;
margin-bottom:10px;
border-radius:8px;
background:#fafafa;
}
/* ================= RESPONSIVE ================= */
/* Tablet */
@media (max-width: 1024px) {
.header {
flex-direction: column;
text-align: center;
gap: 10px;
}
.hero {
height: 250px;
}
.hero h1 {
font-size: 30px;
}
.hero p {
font-size: 18px;
}
}
/* Mobile */
@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: center;
}
nav {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
}
.hero {
height: auto;
padding: 40px 20px;
}
.hero h1 {
font-size: 24px;
}
.hero p {
font-size: 16px;
}
.hero-content {
padding: 20px;
}
.btn {
font-size: 16px;
padding: 10px 16px;
}
.products {
padding: 20px;
}
.product-grid {
grid-template-columns: 1fr;
}
.card img {
height: 140px;
}
}
/* Mobile เล็ก */
@media (max-width: 480px) {
.hero h1 {
font-size: 20px;
}
.hero p {
font-size: 14px;
}
.btn {
width: 100%;
display: block;
text-align: center;
}
}

🎓 ชุดคำสั่งของไฟล์แต่ละหน้ามีดังนี้

หน้า index.php

<?php
session_start();
include("config.php");
$sql="SELECT * FROM products LIMIT 6";
$result=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ของดีเมืองศรีสะเกษ</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<header class="header">
<div class="logo">
ของดีเมืองศรีสะเกษ
</div>
<nav>
<a href="index.php">หน้าแรก</a>
<a href="products.php">สินค้า</a>
<?php
// ถ้า Login แล้ว
if(isset($_SESSION['admin'])){
?>
<span class="admin-name">
ยินดีต้อนรับ : <?php echo $_SESSION['admin']; ?>
</span>
<a href="logout.php">Logout</a>
<?php
}else{
?>
<a href="login.php">Login</a>
<?php
}
?>
</nav>
</header>
<section class="hero">
<div class="hero-content">
<h1>แนะนำผลิตภัณฑ์ ของดีเมืองศรีสะเกษ</h1>
<p>รวมสินค้า OTOP และผลิตภัณฑ์ท้องถิ่นคุณภาพ</p>
<a href="products.php" class="btn">
ดูสินค้าทั้งหมด
</a>
</div>
</section>
<section class="products">
<h2>สินค้าแนะนำ</h2>
<div class="product-grid">
<?php
while($row=mysqli_fetch_assoc($result)){
?>
<div class="card">
<img src="images/<?php echo $row['image']; ?>">
<h3><?php echo $row['product_name']; ?></h3>
<p><?php echo $row['price']; ?> บาท</p>
<a href="product_detail.php?id=<?php echo $row['id']; ?>">
รายละเอียด
</a>
</div>
<?php } ?>
</div>
</section>
</body>
</html>

การแสดงผลสามารถเปิดโปรแกรมเว็บเบราว์เซอร์ พิมพ์ localhost/sisaket/index.php
จะพบว่าไม่มีภาพแบนเนอร์แสดงที่หน้าจอ สามารถใช้โปรแกรม canva ออกแบบแบนเนอร์เว็บไซต์ โดยตัวอย่างใช้ขนาด 1024×300 px บันทึกไฟล์ banner.jpg เก็บไฟล์ไว้ใน โฟลเดอร์ images ที่เก็บอยู่ภายใต้ โฟลเดอร์ assets

ดังรูป

เมื่อใส่รูปภาพ banner แล้ว ให้แสดงผลเว็บไซต์ จะได้ผลลัพธ์ดังภาพ ให้ตรวจสอบ part การแสดงผลของรูปภาพ

assets/images

การจัดการโครงสร้างไฟล์ใน xampp

sisaket/
 ├── index.php
 ├── config.php
 ├── assets/
 │    ├── style.css
 │    └── images/
 │         └── banner.jpg
 └── images/

ส่วนที่ต้องตรวจสอบของไฟล์ style.css เป็นดังนี้

.hero{
  height:300px;
  background:url('images/banner.jpg') no-repeat center;
  background-size:cover;
}

การสร้างระบบล็อกอิน

สอนระบบ Login สำหรับ Admin เพื่อให้เข้าใจแนวคิด Authentication และ Session และสามารถควบคุมสิทธิ์การจัดการสินค้าได้

1️⃣ สร้างหน้าฟอร์ม Login

สร้างไฟล์ login.php

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
<title>Admin Login</title>
<style>
body{
font-family:Tahoma;
background:#f4f6f9;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login-box{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
width:300px;
}
input{
width:100%;
padding:10px;
margin-top:10px;
}
button{
width:100%;
padding:10px;
margin-top:15px;
background:#ff7a00;
color:white;
border:none;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Admin Login</h2>
<form action="check_login.php" method="POST">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button>เข้าสู่ระบบ</button>
</form>
</div>
</body>
</html>

2️⃣ ตรวจสอบ Username และ Password

สร้างไฟล์ check_login.php

โค้ด

<?php
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
if($username == "admin" && $password == "1234"){
$_SESSION['admin'] = $username;
header("location:index.php");
}else{
echo "Username หรือ Password ไม่ถูกต้อง";
}
?>

อธิบาย

session_start()
คือการเริ่มใช้งาน Session
Flow การทำงานของระบบ
login.php
     │
     ▼
check_login.php
     │
สร้าง SESSION admin
     │
     ▼
index.php
     │
แสดงชื่อ Admin

3️⃣ สร้างระบบ Logout

ไฟล์

logout.php

โค้ด

<?php
session_start();
/* ลบข้อมูล session */
session_unset();
session_destroy();
/* กลับไปหน้าแรก */
header("location:index.php");
exit();
?>

การสร้างระบบจัดการสินค้า

1️⃣ หน้าแสดงสินค้าทั้งหมด

ไฟล์ products.php

หน้าที่ แสดงสินค้าทั้งหมดจากฐานข้อมูล
สิ่งที่สอนนักศึกษา
การใช้ SQL การใช้ `while loop` การแสดงข้อมูลจาก Database

ตัวอย่าง SQL
SELECT * FROM products

ตัวอย่างการใช้งาน
สินค้า สินค้า สินค้า สินค้า
ตัวอย่างเว็บไซต์

<?php
session_start();
include("config.php");

$sql = "SELECT * FROM products";
$result = mysqli_query($conn,$sql);
?>

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>รายการสินค้า ของดีเมืองศรีสะเกษ</title>

<style>

body{
margin:0;
font-family:Tahoma;
background:#f4f6f9;
}

/* HEADER */

.header{
background:#ff7a00;
color:white;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:22px;
font-weight:bold;
}

.menu a{
color:white;
text-decoration:none;
margin-left:20px;
font-size:16px;
}

.menu a:hover{
text-decoration:underline;
}

/* CONTAINER */

.container{
width:90%;
margin:auto;
margin-top:30px;
}

/* TOP BUTTON */

.top-bar{
display:flex;
justify-content:space-between;
margin-bottom:20px;
flex-wrap:wrap;
gap:10px;
}

/* BUTTON */

.btn{
padding:8px 14px;
text-decoration:none;
border-radius:5px;
color:white;
font-size:14px;
display:inline-block;
}

.add{
background:#28a745;
}

.home{
background:#007bff;
}

.edit{
background:#ffc107;
color:black;
}

.delete{
background:#dc3545;
}

.report{
background:#6f42c1;
}

.btn:hover{
opacity:0.8;
}

/* PRODUCT GRID */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
}

/* CARD */

.card{
background:white;
border-radius:10px;
padding:15px;
box-shadow:0 3px 10px rgba(0,0,0,0.15);
text-align:center;
}

.card img{
width:100%;
height:160px;
object-fit:cover;
border-radius:6px;
}

.card h3{
margin:10px 0;
}

.price{
color:#e60000;
font-weight:bold;
}

.action{
margin-top:10px;
}

</style>

</head>

<body>

<!-- HEADER -->
<div class="header">

<div class="logo">
ของดีเมืองศรีสะเกษ
</div>

<div class="menu">
<a href="index.php">หน้าแรก</a>
<a href="products.php">สินค้า</a>

<?php
if(isset($_SESSION['admin'])){
?>
<a href="report.php">รายงานสินค้า</a>
<a href="add_product.php">เพิ่มสินค้า</a>
<a href="logout.php">ออกจากระบบ</a>
<?php
}else{
?>
<a href="login.php">Login Admin</a>
<?php
}
?>

</div>

</div>

<div class="container">

<h2>รายการสินค้า OTOP ศรีสะเกษ</h2>

<div class="top-bar">

<div>
<a href="index.php" class="btn home">🏠 กลับหน้าหลัก</a>
</div>

<div>
<?php
if(isset($_SESSION['admin'])){
?>
<a href="report.php" class="btn report">📊 รายงานสินค้า</a>
<a href="add_product.php" class="btn add">➕ เพิ่มสินค้า</a>
<?php
}
?>
</div>

</div>

<div class="product-grid">

<?php
while($row=mysqli_fetch_assoc($result)){
?>

<div class="card">

<img src="images/<?php echo $row['image']; ?>">

<h3><?php echo $row['product_name']; ?></h3>

<p class="price"><?php echo $row['price']; ?> บาท</p>

<div class="action">

<a href="product_detail.php?id=<?php echo $row['id']; ?>" class="btn home">
รายละเอียด
</a>

<?php
if(isset($_SESSION['admin'])){
?>

<a href="edit_product.php?id=<?php echo $row['id']; ?>" class="btn edit">
แก้ไข
</a>

<a href="delete_product.php?id=<?php echo $row['id']; ?>"
class="btn delete"
onclick="return confirm('คุณต้องการลบสินค้า <?php echo $row['product_name']; ?> ใช่หรือไม่ ?')">
ลบ
</a>

<?php
}
?>

</div>

</div>

<?php
}
?>

</div>

</div>

</body>
</html>

หลังจากนักศึกษา สร้างหน้าแสดงสินค้า (products.php) เสร็จแล้ว ขั้นตอนถัดไปที่เหมาะมากคือ

5️⃣ ปรับเมนูหน้าเว็บไซต์

ใน index.php

เพิ่มเงื่อนไข

<?php
session_start();
?><nav><a href="index.php">หน้าแรก</a>
<a href="products.php">สินค้า</a><?php
if(isset($_SESSION['admin'])){
?><a href="dashboard.php">Dashboard</a>
<a href="logout.php">Logout</a><?php
}else{
?><a href="login.php">Login</a><?php
}
?></nav>

หน้า index และระบบ Login แล้ว ขั้นตอนถัดไปที่เหมาะมากคือ สอนหน้า Product Detail (รายละเอียดสินค้า) เพราะจะทำให้นักศึกษาเข้าใจ

การส่งค่า ID ผ่าน URL
การใช้ GET Method
การดึงข้อมูลจากฐานข้อมูลเฉพาะรายการ
การเชื่อมโยงหน้าระหว่าง products → product_detail

ผมจัด แนวการสอนในห้องเรียน + โค้ดตัวอย่าง ให้ดังนี้

1️⃣ อธิบายแนวคิดหน้า Product Detail

โครงสร้างการทำงาน

products.php
     │
คลิกสินค้า
     │
     ▼
product_detail.php?id=1
     │
ดึงข้อมูลสินค้า
     ▼
แสดงรายละเอียด

ตัวอย่าง URL
product_detail.php?id=3
อธิบายให้นักศึกษาเข้าใจว่า

id = รหัสสินค้า

2️⃣ สร้างไฟล์ product_detail.php

<?php

include(“config.php”);
/* ตรวจสอบว่ามี id ส่งมาหรือไม่ */
if(isset($_GET[‘id’])){
$id = $_GET[‘id’];
/* ดึงข้อมูลสินค้า */
$sql = “SELECT * FROM products WHERE id=’$id'”;
$result = mysqli_query($conn,$sql);
/* ตรวจสอบว่ามีข้อมูลหรือไม่ */
$row = mysqli_fetch_assoc($result);
if(!$row){
echo “ไม่พบข้อมูลสินค้า”;
exit();
}
}else{
echo “ไม่พบสินค้า”;
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>รายละเอียดสินค้า</title>
<style>
body{
font-family:Tahoma;
background:#f2f6fc;
margin:0;
padding:40px;
}
/* กล่องสินค้า */
.container{
max-width:900px;
margin:auto;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
/* Layout */
.product-box{
display:flex;
gap:30px;
align-items:flex-start;
}
/* รูปสินค้า */
.product-img img{
width:350px;
border-radius:10px;
transition:0.3s;
}
.product-img img:hover{
transform:scale(1.05);
}
/* รายละเอียดสินค้า */
.product-detail{
flex:1;
}
.product-detail h2{
margin-top:0;
color:#333;
}
.product-detail p{
line-height:1.6;
color:#555;
}
/* ราคา */
.price{
color:#e63946;
font-size:26px;
font-weight:bold;
margin-top:15px;
}
/* ปุ่ม */
.btn{
display:inline-block;
margin-top:15px;
padding:10px 18px;
background:#2c7be5;
color:white;
text-decoration:none;
border-radius:6px;
margin-right:10px;
transition:0.3s;
}
.btn:hover{
background:#1a5fd1;
}
/* ปุ่มรีวิว */
.btn-review{
background:#28a745;
}
.btn-review:hover{
background:#1e7e34;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”product-box”>
<div class=”product-img”>
<img src=”images/<?php echo $row[‘image’]; ?>”>
</div>
<div class=”product-detail”>
<h2><?php echo $row[‘product_name’]; ?></h2>
<p><?php echo $row[‘description’]; ?></p>
<p class=”price”>
ราคา : <?php echo $row[‘price’]; ?> บาท
</p>
<a class=”btn” href=”products.php”>
← กลับหน้าสินค้า
</a>
<a class=”btn btn-review” href=”reviews.php?product_id=<?php echo $row[‘id’]; ?>”>
⭐ ดูรีวิวสินค้า
</a>
</div>
</div>
</div>
</body>
</html>

สิ่งที่นักศึกษาจะได้เรียนรู้จากบทนี้

1 การรับค่าจาก URL

$_GET['id']

2 การดึงข้อมูลเฉพาะรายการ

SELECT * FROM products WHERE id=1

3 การเชื่อมโยงหน้าระบบเว็บไซต์

products
   │
   ▼
product_detail

อธิบายหน้าเพิ่มสินค้า add_Product.php

ตัวอย่างชุดคำสั่ง

<?php
session_start();
/* ตรวจสอบสิทธิ์ Admin */
if(!isset($_SESSION[‘admin’])){
header(“location:index.php”);
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>เพิ่มสินค้า</title>
<style>
body{
font-family:Tahoma, Arial;
background:#f4f6f9;
margin:0;
padding:0;
}
/* กล่องฟอร์ม */
.container{
width:500px;
margin:60px auto;
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
h2{
text-align:center;
color:#333;
margin-bottom:20px;
}
/* label */
label{
font-weight:bold;
display:block;
margin-top:10px;
}
/* input */
input, textarea{
width:100%;
padding:10px;
margin-top:5px;
border:1px solid #ccc;
border-radius:5px;
box-sizing:border-box;
}
/* ปุ่ม */
button{
margin-top:20px;
width:100%;
padding:12px;
background:#28a745;
border:none;
color:white;
font-size:16px;
border-radius:6px;
cursor:pointer;
}
button:hover{
background:#218838;
}
/* ปุ่มกลับ */
.back{
display:block;
text-align:center;
margin-top:15px;
text-decoration:none;
color:#007bff;
}
</style>
</head>
<body>
<div class=”container”>
<h2>เพิ่มสินค้า</h2>
<form action=”save_product.php” method=”POST” enctype=”multipart/form-data”>
<label>ชื่อสินค้า</label>
<input type=”text” name=”product_name” required>
<label>รายละเอียดสินค้า</label>
<textarea name=”description” rows=”4″></textarea>
<label>ราคา</label>
<input type=”number” name=”price” required>
<label>ประเภทสินค้า</label>
<select name=”category” required>
<option value=””>– เลือกประเภทสินค้า –</option>
<option value=”อาหาร”>อาหาร</option>
<option value=”ผลไม้”>ผลไม้</option>
<option value=”ผ้า”>ผ้า</option>
<option value=”ของฝาก”>ของฝาก</option>
<option value=”สมุนไพร”>สมุนไพร</option>
</select>
<label>รูปภาพสินค้า</label>
<input type=”file” name=”image” accept=”image/*”>
<button type=”submit”>บันทึกสินค้า</button>
</form>
<a class=”back” href=”products.php”>← กลับหน้ารายการสินค้า</a>
</div>
</body>
</html>

อธิบายชุดคำสั่งที่สำคัญ

1 เริ่มต้น Session

session_start();
ใช้สำหรับ เก็บข้อมูลผู้ที่ Login

2 ตรวจสอบสิทธิ์ Admin

if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}

ความหมาย

ถ้าไม่ได้ Login เป็น Admin
→ กลับไปหน้า index

ดังนั้นเฉพาะ Admin เท่านั้นที่เพิ่มสินค้าได้

3 ฟอร์มเพิ่มสินค้า

<form action="save_product.php" method="POST" enctype="multipart/form-data">

อธิบาย

คำสั่ง	ความหมาย
POST	ส่งข้อมูลไปบันทึก
save_product.php	หน้าเก็บข้อมูล
multipart/form-data	ใช้สำหรับ Upload รูป

4️⃣ ช่องกรอกข้อมูลสินค้า

ชื่อสินค้า

<input type="text" name="product_name">

รายละเอียดสินค้า

<textarea name="description"></textarea>

ราคา

<input type="number" name="price">

รูปสินค้า

<input type="file" name="image">

ใช้สำหรับ

Upload รูปสินค้า

5️⃣ ปุ่มบันทึก

<button type="submit">บันทึกสินค้า</button>

เมื่อกดปุ่ม

ข้อมูลจะถูกส่งไป save_product.php

6️⃣ CSS ที่ใช้สอนนักศึกษา

กล่องฟอร์ม

container

ทำให้ฟอร์มอยู่ตรงกลาง

ปุ่ม

button:hover

ทำให้

เอาเมาส์ชี้แล้วเปลี่ยนสี

7️⃣ สิ่งที่นักศึกษาจะได้เรียนรู้

จากหน้านี้จะเข้าใจ

Session
การตรวจสอบสิทธิ์
Form HTML
POST Method
Upload รูปภาพ
CSS Layout

การบันทึกสินค้าที่เพิ่ม

หลังจากสร้าง add_product.php แล้ว ต้องสอนต่อทันทีคือ หน้า save_product.php

หน้านี้คือไฟล์ save_product.php ซึ่งเป็นหน้าที่ทำหน้าที่ รับข้อมูลจากฟอร์มเพิ่มสินค้า แล้วบันทึกลงฐานข้อมูล พร้อมอัปโหลดรูปภาพสินค้า ถือเป็นหน้าที่สำคัญมากของระบบ Admin เพราะเป็นส่วนที่ทำให้ สินค้าใหม่ถูกเพิ่มเข้าสู่เว็บไซต์

ซึ่งจะสอน

Upload รูปภาพ
move_uploaded_file
INSERT ข้อมูลลง database

ตัวอย่าง SQL

INSERT INTO products
(product_name,description,price,image)
VALUES(...)

ตัวอย่างหน้าจอ

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

<?php
session_start();
if(!isset($_SESSION[‘admin’])){
header(“location:index.php”);
exit();
}
?>
<?php
include(“config.php”);
/* ตรวจสอบว่ามาจากฟอร์มหรือไม่ */
if($_SERVER[“REQUEST_METHOD”] == “POST”){
$name = $_POST[‘product_name’];
$desc = $_POST[‘description’];
$price = $_POST[‘price’];
$category = $_POST[‘category’];
$image = $_FILES[‘image’][‘name’];
$tmp = $_FILES[‘image’][‘tmp_name’];
/* อัปโหลดรูป */
move_uploaded_file($tmp,”images/”.$image);
/* บันทึกข้อมูล */
$sql = “INSERT INTO products
(product_name,description,price,image)
VALUES
(‘$name’,’$desc’,’$price’,’$image’)”;
mysqli_query($conn,$sql);
echo “เพิ่มสินค้าสำเร็จ”;
}else{
echo “ไม่สามารถเข้าหน้านี้โดยตรงได้”;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>บันทึกสินค้า</title>
<style>
body{
margin:0;
font-family:Tahoma;
background:#f4f6f9;
}
/* HEADER */
.header{
background:#ff7a00;
color:white;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:22px;
font-weight:bold;
}
.menu a{
color:white;
text-decoration:none;
margin-left:20px;
font-size:16px;
}
/* CONTENT */
.container{
width:500px;
margin:80px auto;
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.2);
text-align:center;
}
.success{
color:green;
font-size:20px;
margin-bottom:20px;
}
/* BUTTON */
.btn{
display:inline-block;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
color:white;
margin:5px;
}
.home{
background:#007bff;
}
.product{
background:#28a745;
}
.btn:hover{
opacity:0.8;
}
</style>
</head>
<body>
<!– HEADER –>
<div class=”header”>
<div class=”logo”>
เว็บไซต์แนะนำผลิตภัณฑ์ ของดีเมืองศรีสะเกษ
</div>
<div class=”menu”>
<a href=”index.php”>หน้าแรก</a>
<a href=”products.php”>สินค้า</a>
<a href=”add_product.php”>เพิ่มสินค้า</a>
</div>
</div>
<!– CONTENT –>
<div class=”container”>
<div class=”success”>
✅ เพิ่มสินค้าสำเร็จ
</div>
<a href=”index.php” class=”btn home”>
🏠 กลับหน้าหลัก
</a>
<a href=”products.php” class=”btn product”>
📦 ดูรายการสินค้า
</a>
</div>
</body>
</html>

จุดสำคัญของโค้ดหน้านี้

1️⃣ การเริ่มต้น Session และตรวจสอบสิทธิ์ Admin

session_start();if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}

ความหมาย

session_start()
ใช้สำหรับ เปิดระบบ Session
$_SESSION['admin']
เก็บข้อมูลผู้ที่ Login เป็น Admin

การทำงาน

ถ้าไม่ได้ Login เป็น Admin
→ กลับไปหน้า index

ดังนั้น

เฉพาะ Admin เท่านั้นที่เพิ่มสินค้าได้

นี่คือแนวคิด Security ของระบบ

2️⃣ เชื่อมต่อฐานข้อมูล

include("config.php");
ไฟล์ config.php จะมีคำสั่ง
$conn = mysqli_connect("localhost","root","","sisaket");

หน้าที่คือ เชื่อมต่อเว็บไซต์กับฐานข้อมูล

3️⃣ ตรวจสอบว่าข้อมูลมาจากฟอร์มหรือไม่

if($_SERVER["REQUEST_METHOD"] == "POST")

ความหมาย

ตรวจสอบว่าหน้านี้ถูกเรียกจาก Form เพราะฟอร์มใช้ method="POST" ถ้าไม่มีการส่งฟอร์มมา จะขึ้นข้อความไม่สามารถเข้าหน้านี้โดยตรงได้

4️⃣ รับค่าจากฟอร์ม

$name = $_POST['product_name'];
$desc = $_POST['description'];
$price = $_POST['price'];

ข้อมูลที่รับมา

ตัวแปร	มาจากฟอร์ม
$name	ชื่อสินค้า
$desc	รายละเอียดสินค้า
$price	ราคา

ตัวอย่างค่าที่รับมา

$name = "ทุเรียนภูเขาไฟ"
$price = 1200

5️⃣ รับไฟล์รูปภาพ

$image = $_FILES['image']['name'];
$tmp = $_FILES['image']['tmp_name'];

อธิบาย

เมื่อผู้ใช้เลือกไฟล์ <input type=”file” name=”image”> ระบบจะเก็บข้อมูลใน $_FILES

ตัวแปร	ความหมาย
name	ชื่อไฟล์
tmp_name	ที่เก็บไฟล์ชั่วคราว

6️⃣ อัปโหลดรูปภาพ

move_uploaded_file($tmp,"images/".$image);

ความหมาย

ย้ายไฟล์จาก Temporary Folder ไปยัง images/
ตัวอย่าง
temp/image123.jpg
→ images/image123.jpg

7️⃣ คำสั่งบันทึกข้อมูลลงฐานข้อมูล

$sql = "INSERT INTO products
(product_name,description,price,image)
VALUES
('$name','$desc','$price','$image')";

ความหมาย

เพิ่มข้อมูลสินค้าใหม่

ตัวอย่างข้อมูล

product_name	description	price	image
ทุเรียนภูเขาไฟ	ทุเรียน GI ศรีสะเกษ	1200	durian.jpg

คำสั่ง SQL

INSERT INTO products

หมายถึง เพิ่มข้อมูลใหม่ในตาราง

8️⃣ สั่งให้ฐานข้อมูลทำงาน

mysqli_query($conn,$sql);

ความหมาย ส่งคำสั่ง SQL ไปยังฐานข้อมูล

9️⃣ แสดงผลลัพธ์เมื่อเพิ่มสินค้าสำเร็จ

หน้า HTML ด้านล่างจะแสดงข้อความ

เพิ่มสินค้าสำเร็จ พร้อมปุ่ม กลับหน้าหลัก ดูรายการสินค้า
โค้ดส่วนนี้คือ
<div class="success">
✅ เพิ่มสินค้าสำเร็จ
</div>

🔟 โครงสร้างการทำงานของระบบเพิ่มสินค้า

Admin Login
     │
     ▼
add_product.php
     │
กรอกข้อมูลสินค้า
     │
     ▼
save_product.php
     │
Upload รูป
     │
Insert Database
     ▼
แสดงข้อความสำเร็จ

สิ่งสำคัญที่นักศึกษาจะได้เรียนรู้จากหน้านี้

นักศึกษาจะเข้าใจเรื่อง

Session
Security Admin
POST Method
Upload File
PHP + MySQL
INSERT Database

ซึ่งเป็นพื้นฐานของ Web Application Development

หน้านี้คือไฟล์ edit_product.php (หน้าแก้ไขสินค้า)
มีหน้าที่ แสดงข้อมูลสินค้าเดิมจากฐานข้อมูล แล้วให้ Admin แก้ไขข้อมูล ก่อนส่งไปอัปเดตในฐาน

ตัวอย่างหน้าจอการแก้ไข

<?php
session_start();

if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}
?>
<?php
include("config.php");

/* ตรวจสอบว่ามี id หรือไม่ */
if(isset($_GET['id'])){

$id = $_GET['id'];

$sql = "SELECT * FROM products WHERE id='$id'";
$result = mysqli_query($conn,$sql);

$row = mysqli_fetch_assoc($result);

if(!$row){
echo "ไม่พบข้อมูลสินค้า";
exit();
}

}else{
echo "ไม่พบรหัสสินค้า";
exit();
}
?>

<!DOCTYPE html>
<html>
<head>

<title>แก้ไขสินค้า</title>

<style>

body{
font-family:Tahoma;
background:#f5f5f5;
padding:30px;
}

.container{
width:500px;
margin:auto;
background:white;
padding:20px;
box-shadow:0 2px 10px rgba(0,0,0,0.2);
border-radius:10px;
}

input, textarea, select{
width:100%;
padding:8px;
margin-top:5px;
margin-bottom:15px;
}

button{
background:#28a745;
color:white;
border:none;
padding:10px 15px;
border-radius:5px;
cursor:pointer;
}

button:hover{
background:#218838;
}

</style>

</head>

<body>

<div class="container">

<h2>แก้ไขข้อมูลสินค้า</h2>

<form action="update_product.php" method="POST">

<input type="hidden" name="id" value="<?php echo $row['id']; ?>">

<label>ชื่อสินค้า</label>
<input type="text" name="product_name"
value="<?php echo $row['product_name']; ?>">

<label>รายละเอียดสินค้า</label>
<textarea name="description"><?php echo $row['description']; ?></textarea>

<label>ราคา</label>
<input type="number" name="price"
value="<?php echo $row['price']; ?>">
<label>ประเภทสินค้า</label>
<select name="category">
<option value="อาหาร" <?php if($row['category']=="อาหาร") echo "selected"; ?>>อาหาร</option>
<option value="ผลไม้" <?php if($row['category']=="ผลไม้") echo "selected"; ?>>ผลไม้</option>
<option value="ผ้า" <?php if($row['category']=="ผ้า") echo "selected"; ?>>ผ้า</option>
<option value="ของฝาก" <?php if($row['category']=="ของฝาก") echo "selected"; ?>>ของฝาก</option>
<option value="สมุนไพร" <?php if($row['category']=="สมุนไพร") echo "selected"; ?>>สมุนไพร</option>
</select>
<br><br>
<label>รูปภาพปัจจุบัน</label><br>
<img src="images/<?php echo $row['image']; ?>" width="150">
<br>
<button type="submit">บันทึกการแก้ไข</button>

</form>

</div>

</body>
</html>

1️⃣ หน้าที่ของหน้าแก้ไขสินค้า

หน้าที่หลักคือดึงข้อ มูลสินค้าเดิมจากฐานข้อมูล → แสดงในฟอร์ม → ให้ Admin แก้ไข → ส่งข้อมูลไป update_product.php

โครงสร้างการทำงาน
products.php
│
คลิกปุ่ม “แก้ไข”
│
▼
edit_product.php?id=5
│
ดึงข้อมูลสินค้า
│
แสดงในฟอร์ม
│
▼
update_product.php
│
UPDATE Database

2️⃣ สิ่งสำคัญส่วนที่ 1 : ตรวจสอบสิทธิ์ Admin

session_start();if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}
ความหมาย ถ้าไม่ได้ Login เป็น Admin→ ห้ามเข้าแก้ไขสินค้า เหตุผลเพื่อความปลอดภัยของระบบ

3️⃣ สิ่งสำคัญส่วนที่ 2 : รับค่า id จาก URL

$id = $_GET['id'];
ตัวอย่าง URL 
edit_product.php?id=3
ความหมาย id = รหัสสินค้า ใช้สำหรับ ดึงข้อมูลสินค้าเฉพาะรายการ

4️⃣ สิ่งสำคัญส่วนที่ 3 : ดึงข้อมูลจากฐานข้อมูล

$sql = "SELECT * FROM products WHERE id='$id'";
$result = mysqli_query($conn,$sql);$row = mysqli_fetch_assoc($result);
คำสั่ง SQL
SELECT * FROM products
ความหมาย ดึงข้อมูลสินค้าจากตาราง products
ตัวอย่างข้อมูลที่ได้

id	product_name	price
3	ทุเรียนภูเขาไฟ	1200

5️⃣ ตรวจสอบว่ามีข้อมูลหรือไม่

if(!$row){
echo "ไม่พบข้อมูลสินค้า";
exit();
}
ความหมาย ถ้าไม่มีสินค้า id นี้ในฐานข้อมูล → แจ้งเตือนผู้ใช้

6️⃣ สิ่งสำคัญส่วนที่ 4 : ฟอร์มแก้ไขสินค้า

<form action="update_product.php" method="POST">
ความหมาย
ส่งข้อมูลที่แก้ไข ไปยังหน้า update_product.php
ใช้ method
POST

7️⃣ ส่ง id แบบ Hidden

<input type="hidden" name="id" value="<?php echo $row['id']; ?>">
ความหมาย ส่งรหัสสินค้าไปด้วย เพื่อให้ระบบรู้ว่าจะแก้ไขสินค้าใด ตัวอย่างค่าที่ส่ง  id = 3

8️⃣ แสดงข้อมูลเดิมในช่องกรอก

ชื่อสินค้า

<input type="text" name="product_name"
value="<?php echo $row['product_name']; ?>">
ตัวอย่างที่แสดง
ทุเรียนภูเขาไฟ

รายละเอียดสินค้า

<textarea name="description">
<?php echo $row['description']; ?>
</textarea>

ราคา

<input type="number" name="price"
value="<?php echo $row['price']; ?>">

9️⃣ แสดงรูปภาพสินค้าเดิม

<img src="images/<?php echo $row['image']; ?>" width="150">

ความหมาย

แสดงรูปสินค้าเดิม
เพื่อให้ Admin เห็นก่อนแก้ไข

ตัวอย่าง

images/durian.jpg

🔟 ปุ่มบันทึกการแก้ไข

<button type="submit">บันทึกการแก้ไข</button>

เมื่อกดปุ่ม ข้อมูลจะถูกส่งไป update_product.php เพื่อทำ UPDATE Database

1️⃣1️⃣ CSS ที่ใช้ในหน้านี้

กล่องฟอร์ม

.container ทำให้ฟอร์ม อยู่ตรงกลางหน้าจอ

ปุ่ม

button:hover ทำให้ เอาเมาส์วางแล้วสีเปลี่ยน

1️⃣2️⃣ สิ่งที่นักศึกษาจะได้เรียนรู้

จากหน้านี้นักศึกษาจะเข้าใจ

Session
Security
GET Method
SELECT Database
Form Editing
การส่งข้อมูล POST

ซึ่งเป็นพื้นฐานของ Web Application

หน้าอัปเดตข้อมูลสินค้า

หน้านี้คือไฟล์ update_product.php (หน้าแก้ไขสินค้า) มีหน้าที่ รับข้อมูลที่แก้ไขจากฟอร์ม แล้วอัปเดตข้อมูลสินค้าในฐานข้อมูล โดยสามารถ เปลี่ยนข้อมูลสินค้า และเปลี่ยนรูปภาพสินค้าได้
เหมาะมากสำหรับใช้สอนนักศึกษาเรื่อง UPDATE Database + Upload File

ส่วนสำคัญของโค้ด อธิบายดังนี้

<?php
session_start();

if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}
?>
<?php
include("config.php");

/* รับค่าจากฟอร์ม */
$id   = $_POST['id'];
$name = $_POST['product_name'];
$desc = $_POST['description'];
$price= $_POST['price'];
$category=$_POST['category'];


/* ตรวจสอบว่ามีการอัปโหลดรูปใหม่หรือไม่ */
if(isset($_FILES['image']) && $_FILES['image']['name'] != ""){

    $image = $_FILES['image']['name'];
    $tmp   = $_FILES['image']['tmp_name'];

    /* อัปโหลดรูป */
    move_uploaded_file($tmp,"images/".$image);

    /* อัปเดตข้อมูลพร้อมรูป */
    $sql = "UPDATE products 
            SET product_name='$name',
                description='$desc',
                price='$price',
                category='$category'
                image='$image'
            WHERE id='$id'";

}else{

    /* อัปเดตข้อมูลโดยไม่เปลี่ยนรูป */
$sql="UPDATE products SET
product_name='$name',
description='$desc',
price='$price',
category='$category'
WHERE id='$id'";
}

/* สั่งให้ฐานข้อมูลทำงาน */
mysqli_query($conn,$sql);

/* กลับไปหน้ารายการสินค้า */
header("Location: products.php");

?>

หน้า update_product.php

ไฟล์นี้คือ update_product.php ซึ่งเป็นหน้าที่ใช้ บันทึกการแก้ไขสินค้า (Update Product) หลังจากที่ Admin แก้ไขข้อมูลในหน้า edit_product.php แล้วกดปุ่มบันทึก ระบบจะส่งข้อมูลมาที่หน้านี้เพื่อ อัปเดตข้อมูลในฐานข้อมูล

หน้านี้ถือเป็นส่วนสำคัญของระบบ CRUD (Update)

1️⃣ หน้าที่ของหน้า update_product.php

หน้าที่หลักคือ รับข้อมูลที่แก้ไขจากฟอร์ม
→ ตรวจสอบรูปภาพใหม่
→ อัปเดตข้อมูลสินค้าในฐานข้อมูล
→ กลับไปหน้ารายการสินค้า

โครงสร้างการทำงาน

edit_product.php
      │
แก้ไขสินค้า
      │
      ▼
update_product.php
      │
UPDATE Database
      │
      ▼
products.php

2️⃣ ตรวจสอบสิทธิ์ Admin (Security)

session_start();if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}

ความหมาย เปิดระบบ Session

ตรวจสอบว่า ผู้ใช้เป็น Admin หรือไม่

การทำงาน

ถ้าไม่ได้ Login เป็น Admin
→ ไม่สามารถแก้ไขสินค้าได้
→ ระบบจะกลับไปหน้า index

เหตุผล เพื่อป้องกันผู้ใช้ทั่วไปแก้ไขข้อมูลสินค้า

3️⃣ เชื่อมต่อฐานข้อมูล

include("config.php");
หน้าที่ เชื่อมต่อเว็บไซต์กับฐานข้อมูล MySQL ตัวอย่างใน config.php

$conn = mysqli_connect("localhost","root","","sisaket");

4️⃣ รับข้อมูลจากฟอร์ม

$id   = $_POST['id'];
$name = $_POST['product_name'];
$desc = $_POST['description'];
$price= $_POST['price'];
ข้อมูลที่รับมาจากฟอร์ม

ตัวแปร	ข้อมูล
id	รหัสสินค้า
product_name	ชื่อสินค้า
description	รายละเอียดสินค้า
price	ราคา

ตัวอย่าง

id = 3
product_name = ทุเรียนภูเขาไฟ
price = 1200

5️⃣ ตรวจสอบว่ามีการอัปโหลดรูปใหม่หรือไม่

if(isset($_FILES['image']) && $_FILES['image']['name'] != "")

ความหมาย ตรวจสอบว่าผู้ใช้เลือกอัปโหลดรูปใหม่หรือไม่ จะแบ่งออกเป็น 2 กรณี
กรณีที่ 1 เปลี่ยนรูปใหม่ระบบจะอัปโหลดรูปใหม่และอัปเดตชื่อรูปในฐานข้อมูล

กรณีที่ 2 ไม่เปลี่ยนรูป

ระบบจะอัปเดตเฉพาะข้อมูลสินค้าโดยใช้รูปเดิม
นี่คือแนวคิดสำคัญของระบบ Edit Data

6️⃣ การอัปโหลดรูปภาพ

$image = $_FILES['image']['name'];
$tmp   = $_FILES['image']['tmp_name'];move_uploaded_file($tmp,"images/".$image);

การทำงาน รับชื่อไฟล์ รับตำแหน่งไฟล์ชั่วคราว ย้ายไฟล์ไปเก็บในโฟลเดอร์ images ตัวอย่าง
temp/abc.jpg
→ images/abc.jpg

7️⃣ คำสั่ง UPDATE ฐานข้อมูล

กรณีเปลี่ยนรูป

$sql = "UPDATE products 
SET product_name='$name',
description='$desc',
price='$price',
image='$image'
WHERE id='$id'";

ความหมายแก้ไขข้อมูลสินค้า พร้อมเปลี่ยนรูปใหม่

กรณีไม่เปลี่ยนรูป

$sql = "UPDATE products 
SET product_name='$name',
description='$desc',
price='$price'
WHERE id='$id'";

ความหมาย แก้ไขเฉพาะชื่อ รายละเอียด และราคา รูปภาพยังใช้รูปเดิม

8️⃣ สั่งให้ฐานข้อมูลทำงาน

mysqli_query($conn,$sql);

หน้าที่ส่งคำสั่ง SQL ไปให้ MySQL ทำงาน

9️⃣ กลับไปหน้ารายการสินค้า

header("Location: products.php");

ความหมายหลังจากแก้ไขเสร็จ
→ กลับไปหน้าแสดงรายการสินค้า

เหตุผลเพื่อให้ Admin เห็นรายการสินค้าที่อัปเดตแล้ว

🔟 สิ่งสำคัญที่นักศึกษาจะได้เรียนรู้จากหน้านี้

จากไฟล์นี้นักศึกษาจะเข้าใจ

Session และการตรวจสอบสิทธิ์
การรับค่าจากฟอร์ม (POST)
การอัปโหลดไฟล์
เงื่อนไข if / else
การใช้คำสั่ง UPDATE ในฐานข้อมูล
การ Redirect หน้าเว็บ

ซึ่งทั้งหมดเป็นพื้นฐานของการพัฒนา Web Application

“แก้ไข (Edit)” กับ “Update” จริง ๆ แล้ว ความหมายใกล้กัน แต่หน้าที่ในระบบเว็บต่างกัน

1️⃣ แก้ไข (Edit)

Edit คือ หน้าแบบฟอร์มสำหรับแก้ไขข้อมูล

หน้าที่ของ Edit ดึงข้อมูลเดิมจากฐานข้อมูล
→ แสดงในฟอร์ม
→ ให้ผู้ใช้แก้ไข
ตัวอย่างไฟล์ edit_product.php
ตัวอย่าง URL
edit_product.php?id=3
หน้าจอที่เห็น
ชื่อสินค้า : ทุเรียนภูเขาไฟ
รายละเอียด : ทุเรียน GI ศรีสะเกษ
ราคา : 1200[บันทึกการแก้ไข]
ดังนั้น
Edit = หน้าแสดงข้อมูลเพื่อแก้ไข

2️⃣ Update

Update คือ การบันทึกข้อมูลที่แก้ไขลงฐานข้อมูล
หน้าที่ของ Update
รับข้อมูลจากฟอร์ม
→ แก้ไขข้อมูลในฐานข้อมูล
→ บันทึกข้อมูลใหม่
ตัวอย่างไฟล์
update_product.php
ตัวอย่าง SQL
UPDATE products
SET product_name=’ทุเรียนภูเขาไฟ’,
price=’1200′
WHERE id=’3′
ดังนั้น
Update = การบันทึกข้อมูลที่แก้ไขลง Database

3️⃣ เปรียบเทียบให้เข้าใจง่าย

คำ	ความหมาย	ตัวอย่างไฟล์
Edit	หน้าแก้ไขข้อมูล	edit_product.php
Update	บันทึกข้อมูลที่แก้ไข	update_product.php

4️⃣ ลำดับการทำงานจริงในระบบ

products.php
      │
คลิกปุ่ม แก้ไข
      │
      ▼
edit_product.php
      │
แก้ไขข้อมูลสินค้า
      │
กดปุ่มบันทึก
      │
      ▼
update_product.php
      │
UPDATE Database
      ▼
products.php

5️⃣ เปรียบเทียบให้เข้าใจง่าย (ตัวอย่างชีวิตจริง)

เหมือนกับ

แก้ไข (Edit)
= เปิดเอกสาร Word เพื่อแก้ข้อความUpdate
= กด Save บันทึกไฟล์

6️⃣ สิ่งที่นักศึกษาควรเข้าใจ

ในระบบเว็บไซต์

Edit = หน้า Form
Update = การบันทึก Database

ทั้งสองอย่างทำงานร่วมกัน

Edit → Update

💡 เทคนิคสอนนักศึกษาให้เข้าใจเร็ว

ให้จำสูตรนี้

Edit = Form
Update = Database

หน้าลบสินค้า

ไฟล์นี้คือ delete_product.php (หน้าลบสินค้า) มีหน้าที่ ลบข้อมูลสินค้าออกจากฐานข้อมูล และลบรูปภาพสินค้าออกจากโฟลเดอร์ในเว็บไซต์ โดยอนุญาตให้ เฉพาะ Admin เท่านั้นที่สามารถลบสินค้าได้

หน้านี้เป็นส่วนหนึ่งของระบบ CRUD ในส่วนของ

D = Delete

1️⃣ หน้าที่ของหน้า delete_product.php

หน้าที่หลักคือ

รับรหัสสินค้า (id)
→ ค้นหารูปภาพของสินค้า
→ ลบรูปภาพในโฟลเดอร์
→ ลบข้อมูลสินค้าในฐานข้อมูล
→ กลับไปหน้ารายการสินค้า

โครงสร้างการทำงาน

products.php
     │
คลิกปุ่ม ลบสินค้า
     │
     ▼
delete_product.php?id=3
     │
ลบรูปภาพ
ลบข้อมูลใน database
     │
     ▼
กลับไปหน้า products.php

2️⃣ ตรวจสอบสิทธิ์ Admin (Security)

session_start();if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}

ความหมาย

เปิดระบบ Session
ตรวจสอบว่าผู้ใช้เป็น Admin

การทำงาน

ถ้าไม่ได้ Login เป็น Admin
→ ไม่สามารถลบสินค้าได้

เหตุผลเพื่อป้องกันผู้ใช้ทั่วไปลบสินค้า

3️⃣ เชื่อมต่อฐานข้อมูล

include("config.php");

หน้าที่

เชื่อมต่อเว็บไซต์กับฐานข้อมูล MySQL

4️⃣ รับค่า id ของสินค้า

$id = $_GET['id'];
ตัวอย่าง URL
delete_product.php?id=5
ความหมาย
id = รหัสสินค้า
ใช้สำหรับ
ระบุว่าสินค้าไหนต้องถูกลบ

5️⃣ ค้นหารูปภาพของสินค้า

$sql = "SELECT image FROM products WHERE id='$id'";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);$image = $row['image'];

คำสั่ง SQL
SELECT image FROM products WHERE id=’5′
ความหมาย
ดึงชื่อไฟล์รูปภาพของสินค้า

ตัวอย่างข้อมูล
image = durian.jpg

6️⃣ ลบรูปภาพออกจากโฟลเดอร์

if(file_exists("images/".$image)){
unlink("images/".$image);}

อธิบาย

คำสั่ง	ความหมาย
file_exists()	ตรวจสอบว่าไฟล์มีอยู่หรือไม่
unlink()	ลบไฟล์

การทำงาน
ถ้ามีไฟล์รูป
→ ลบรูปออกจากโฟลเดอร์ images

ตัวอย่าง
images/durian.jpg
→ ถูกลบออก

เหตุผลที่ต้องลบรูปเพื่อไม่ให้มีไฟล์ค้างในระบบ

7️⃣ ลบข้อมูลสินค้าในฐานข้อมูล

$sql = "DELETE FROM products WHERE id='$id'";
mysqli_query($conn,$sql);

คำสั่ง SQL
DELETE FROM products WHERE id=’5′
ความหมาย
ลบข้อมูลสินค้าออกจากตาราง products

8️⃣ กลับไปหน้ารายการสินค้า

header("location:products.php");

ความหมาย
หลังจากลบสินค้า
→ กลับไปหน้ารายการสินค้า

เหตุผลให้ผู้ใช้เห็นรายการสินค้าที่อัปเดตแล้ว

9️⃣ สิ่งสำคัญที่นักศึกษาจะได้เรียนรู้จากหน้านี้

จากไฟล์นี้นักศึกษาจะเข้าใจเรื่อง

Session และการตรวจสอบสิทธิ์
การรับค่าจาก URL (GET)
การใช้คำสั่ง DELETE ในฐานข้อมูล
การจัดการไฟล์ใน PHP
การลบไฟล์ด้วย unlink()
การ Redirect หน้าเว็บ

ซึ่งเป็นพื้นฐานของการสร้าง Web Application

🔟 สรุประบบ CRUD ของเว็บไซต์นี้

Create  → add_product.php
Read    → products.php
Update  → edit_product.php + update_product.php
Delete  → delete_product.php

💡 คำแนะนำสำหรับการสอนนักศึกษา

ในหน้า products.php ควรเพิ่มปุ่มลบแบบนี้

<a href="delete_product.php?id=<?php echo $row['id']; ?>"
onclick="return confirm('ต้องการลบสินค้านี้หรือไม่?')">
ลบสินค้า
</a>

ตัวอย่างการแสดงผลหน้าจอ

<?php
session_start();
include("config.php");
/* ตรวจสอบว่าเป็น Admin หรือไม่ */
if(!isset($_SESSION['admin'])){
header("location:index.php");
exit();
}
/* รับค่า id */
$id = $_GET['id'];
/* ค้นหารูปภาพก่อนลบ */
$sql = "SELECT image FROM products WHERE id='$id'";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
$image = $row['image'];
/* ลบรูปภาพในโฟลเดอร์ */
if(file_exists("images/".$image)){
unlink("images/".$image);
}
/* ลบข้อมูลสินค้า */
$sql = "DELETE FROM products WHERE id='$id'";
mysqli_query($conn,$sql);
/* กลับไปหน้ารายการสินค้า */
header("location:products.php");
?>

หน้า reviews.php (ระบบรีวิวสินค้า)
ใช้สำหรับ แสดงรีวิวของลูกค้า และให้ลูกค้าเขียนรีวิวสินค้าได้ โดยรีวิวจะถูกบันทึกลงในตาราง reviews ในฐานข้อมูล สรุป ส่วนสำคัญของหน้านี้ ได้ดังนี้

ชุดคำสั่ง

<?php
include("config.php");
/* ตรวจสอบว่ามี product_id หรือไม่ */
if(isset($_GET['product_id'])){
$product_id = $_GET['product_id'];
}else{
echo "ไม่พบสินค้า";
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>รีวิวสินค้า</title>
<style>
body{
font-family:Tahoma;
background:#f2f6fc;
margin:0;
padding:40px;
}
/* container */
.container{
max-width:800px;
margin:auto;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
}
/* หัวข้อ */
h2{
margin-top:0;
}
/* กล่องรีวิว */
.review-box{
border-bottom:1px solid #eee;
padding:15px 0;
}
.review-name{
font-weight:bold;
color:#333;
font-size:16px;
}
.review-star{
color:#f4b400;
font-size:18px;
margin-top:3px;
}
.review-comment{
margin-top:5px;
color:#555;
}
.review-date{
font-size:12px;
color:#888;
margin-top:5px;
}
/* ฟอร์มรีวิว */
.form-box{
margin-top:30px;
padding:20px;
background:#fafafa;
border-radius:10px;
border:1px solid #eee;
}
input,select,textarea{
width:100%;
padding:10px;
margin-top:5px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
}
button{
background:#2c7be5;
color:white;
border:none;
padding:10px 20px;
border-radius:6px;
cursor:pointer;
font-size:15px;
}
button:hover{
background:#1a5fd1;
}
.back-btn{
display:inline-block;
margin-bottom:20px;
text-decoration:none;
color:white;
background:#6c757d;
padding:8px 15px;
border-radius:6px;
}
.back-btn:hover{
background:#555;
}
.no-review{
color:#888;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="container">
<a class="back-btn" href="products.php">← กลับหน้าสินค้า</a>
<h2>รีวิวจากลูกค้า</h2>
<?php
$sql="SELECT * FROM reviews WHERE product_id='$product_id' ORDER BY id DESC";
$result=mysqli_query($conn,$sql);
if(mysqli_num_rows($result) > 0){
while($row=mysqli_fetch_assoc($result)){
?>
<div class="review-box">
<div class="review-name">
<?php echo htmlspecialchars($row['customer_name']); ?>
</div>
<div class="review-star">
<?php echo str_repeat("⭐",$row['rating']); ?>
</div>
<div class="review-comment">
<?php echo htmlspecialchars($row['comment']); ?>
</div>
<div class="review-date">
<?php echo $row['review_date']; ?>
</div>
</div>
<?php
}
}else{
echo "<p class='no-review'>ยังไม่มีรีวิวสินค้า</p>";
}
?>
<div class="form-box">
<h3>เขียนรีวิวสินค้า</h3>
<form action="save_review.php" method="post">
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
<label>ชื่อผู้รีวิว</label>
<input type="text" name="customer_name" required>
<label>คะแนน</label>
<select name="rating">
<option value="5">⭐⭐⭐⭐⭐ (5 ดาว)</option>
<option value="4">⭐⭐⭐⭐ (4 ดาว)</option>
<option value="3">⭐⭐⭐ (3 ดาว)</option>
<option value="2">⭐⭐ (2 ดาว)</option>
<option value="1">⭐ (1 ดาว)</option>
</select>
<label>ความคิดเห็น</label>
<textarea name="comment" rows="4" required></textarea>
<button type="submit">
ส่งรีวิว
</button>
</form>
</div>
</div>
</body>
</html>

1️⃣ หน้าที่ของระบบรีวิวสินค้า

หน้าที่หลักของไฟล์นี้คือ รับ product_id
→ แสดงรีวิวของสินค้านั้น
→ แสดงฟอร์มให้ลูกค้าเขียนรีวิว
→ ส่งข้อมูลไปบันทึกที่ save_review.php

โครงสร้างการทำงาน

product_detail.php
        │
กดปุ่ม รีวิวสินค้า
        │
        ▼
reviews.php?product_id=3
        │
แสดงรีวิวทั้งหมด
        │
ลูกค้าเขียนรีวิว
        │
        ▼
save_review.php
        │
บันทึกลง Database

2️⃣ ตรวจสอบว่าเลือกสินค้าหรือไม่

if(isset($_GET['product_id'])){
$product_id = $_GET['product_id'];
}else{
echo "ไม่พบสินค้า";
exit();
}

ความหมาย ตรวจสอบว่า URL มี product_id หรือไม่ ตัวอย่าง URL
reviews.php?product_id=3
ถ้าไม่มี
ไม่พบสินค้า

3️⃣ ดึงรีวิวจากฐานข้อมูล

$sql="SELECT * FROM reviews WHERE product_id='$product_id' ORDER BY id DESC";
$result=mysqli_query($conn,$sql);

คำสั่ง SQL

SELECT * FROM reviews
WHERE product_id='3'
ORDER BY id DESC

ความหมาย ดึงรีวิวของสินค้านั้น
เรียงจากรีวิวล่าสุดก่อน

4️⃣ แสดงข้อมูลรีวิว

while($row=mysqli_fetch_assoc($result)){

ข้อมูลที่แสดงในรีวิว

ฟิลด์	ความหมาย
customer_name	ชื่อผู้รีวิว
rating	คะแนนดาว
comment	ความคิดเห็น
review_date	วันที่รีวิว

5️⃣ ป้องกัน XSS (ความปลอดภัย)

htmlspecialchars($row['customer_name'])
และ
htmlspecialchars($row['comment'])
หน้าที่
ป้องกันการแทรกโค้ด HTML หรือ JavaScript
ตัวอย่าง

ถ้ามีคนพิมพ์<
script>alert(“hack”)</script>

ระบบจะไม่รันโค้ด

6️⃣ แสดงดาวรีวิว

<?php echo str_repeat("⭐",$row['rating']); ?>

ความหมาย สร้างดาวตามจำนวนคะแนน ตัวอย่าง

rating	ผลลัพธ์
5	⭐⭐⭐⭐⭐
3	⭐⭐⭐

7️⃣ แสดงข้อความเมื่อไม่มีรีวิว

if(mysqli_num_rows($result) > 0)
ถ้าไม่มีรีวิว
echo "<p class='no-review'>ยังไม่มีรีวิวสินค้า</p>";
ผู้ใช้จะเห็น
ยังไม่มีรีวิวสินค้า

8️⃣ ฟอร์มเขียนรีวิวสินค้า

<form action="save_review.php" method="post">

ข้อมูลที่จะส่งไปบันทึก

field	ความหมาย
product_id	รหัสสินค้า
customer_name	ชื่อผู้รีวิว
rating	คะแนน
comment	ความคิดเห็น

9️⃣ ส่ง product_id แบบ hidden

<input type="hidden" name="product_id" value="<?php echo $product_id; ?>">

ความหมาย

ส่งรหัสสินค้าไปด้วย
เพื่อให้รู้ว่ารีวิวสินค้าอะไร

🔟 ระบบให้คะแนนดาว

<select name="rating">

ตัวเลือก

⭐⭐⭐⭐⭐ (5 ดาว)
⭐⭐⭐⭐ (4 ดาว)
⭐⭐⭐ (3 ดาว)
⭐⭐ (2 ดาว)
⭐ (1 ดาว)

ข้อมูลจะถูกบันทึกเป็นตัวเลข 1 – 5

1️⃣1️⃣ CSS ที่ใช้ในหน้านี้

ส่วนสำคัญ กล่องรีวิว .review-box ทำให้รีวิว แสดงเป็นรายการ
มีเส้นแบ่ง

ฟอร์มรีวิว

.form-box

ทำให้ ฟอร์มดูเป็นกล่องสวยขึ้น

1️⃣2️⃣ โครงสร้างตาราง reviews

ตารางในฐานข้อมูล reviews โครงสร้าง

field	type
id	int
product_id	int
customer_name	varchar
comment	text
rating	int
review_date	datetime

ไฟล์นี้คือ save_review.php

    ไฟล์นี้คือ save_review.php มีหน้าที่ รับข้อมูลรีวิวจากฟอร์ม แล้วบันทึกลงฐานข้อมูลจากนั้นจะพาผู้ใช้กลับไปหน้ารีวิวสินค้า เพื่อให้เห็นรีวิวที่เพิ่งส่ง
หน้านี้ทำงานร่วมกับหน้า reviews.php
โครงสร้างการทำงานของระบบรีวิว

reviews.php
     │
ลูกค้าเขียนรีวิว
     │
กดปุ่ม "ส่งรีวิว"
     │
     ▼
save_review.php
     │
บันทึกข้อมูลลง Database
     │
     ▼
กลับไป reviews.php

<?php
include(“config.php”);
/* ตรวจสอบว่ามีการส่งข้อมูลมาหรือไม่ */
if(isset($_POST[‘product_id’])){
$product_id = $_POST[‘product_id’];
$customer_name = $_POST[‘customer_name’];
$comment = $_POST[‘comment’];
$rating = $_POST[‘rating’];
/* ป้องกัน XSS */
$customer_name = htmlspecialchars($customer_name);
$comment = htmlspecialchars($comment);
/* บันทึกข้อมูลรีวิว */
$sql=”INSERT INTO reviews(product_id,customer_name,comment,rating,review_date)
VALUES(‘$product_id’,’$customer_name’,’$comment’,’$rating’,NOW())”;
mysqli_query($conn,$sql);
/* กลับไปหน้ารีวิว */
header(“location:reviews.php?product_id=$product_id”);
exit();
}else{
echo “ไม่พบข้อมูล”;
}
?>

1️⃣ เชื่อมต่อฐานข้อมูล

include("config.php");
หน้าที่ เชื่อมต่อเว็บไซต์กับฐานข้อมูล MySQL ตัวอย่างในไฟล์ config.php
$conn = mysqli_connect("localhost","root","","sisaket");

2️⃣ ตรวจสอบว่ามีการส่งข้อมูลมาหรือไม่

if(isset($_POST['product_id'])){
ความหมาย ตรวจสอบว่าฟอร์มถูกส่งมาจริงหรือไม่
ถ้ามีการกดปุ่ม ส่งรีวิว ข้อมูลจะถูกส่งมาแบบ POST
ตัวอย่างข้อมูลที่ส่งมา
product_id = 3
customer_name = สมชาย
rating = 5
comment = สินค้าดีมาก

3️⃣ รับค่าจากฟอร์ม

$product_id = $_POST['product_id'];
$customer_name = $_POST['customer_name'];
$comment = $_POST['comment'];
$rating = $_POST['rating'];

ข้อมูลที่รับมาจากฟอร์ม

ตัวแปร	ความหมาย
product_id	รหัสสินค้า
customer_name	ชื่อผู้รีวิว
comment	ความคิดเห็น
rating	คะแนนดาว

4️⃣ ป้องกัน XSS (Security)

$customer_name = htmlspecialchars($customer_name);
$comment = htmlspecialchars($comment);
หน้าที่
ป้องกันการแทรกโค้ด HTML หรือ JavaScript
ตัวอย่าง ถ้ามีคนพิมพ์ <script>alert("hack")</script> ระบบจะไม่รันโค้ดนั้น แต่จะแสดงเป็นข้อความธรรมดา

5️⃣ บันทึกข้อมูลลงฐานข้อมูล

$sql="INSERT INTO reviews(product_id,customer_name,comment,rating,review_date)
VALUES('$product_id','$customer_name','$comment','$rating',NOW())";
คำสั่ง SQL
INSERT INTO reviews
ความหมายเพิ่มข้อมูลใหม่ลงในตาราง reviews
ข้อมูลที่บันทึก

field	ข้อมูล
product_id	รหัสสินค้า
customer_name	ชื่อผู้รีวิว
comment	ความคิดเห็น
rating	คะแนน
review_date	วันที่รีวิว

6️⃣ ฟังก์ชัน NOW()

NOW() ความหมายบันทึกวันและเวลาปัจจุบัน
ตัวอย่าง 2026-03-16 10:25:30

7️⃣ สั่งให้ฐานข้อมูลทำงาน

mysqli_query($conn,$sql);
หน้าที่ ส่งคำสั่ง SQL ไปให้ MySQL ทำงาน 
ผลลัพธ์
รีวิวถูกบันทึกลงฐานข้อมูล

8️⃣ กลับไปหน้ารีวิวสินค้า

header("location:reviews.php?product_id=$product_id");
exit();

ความหมาย หลังจากบันทึกรีวิว→ กลับไปหน้า reviews
ตัวอย่าง URL
reviews.php?product_id=3

ผู้ใช้จะเห็นรีวิวที่เพิ่งส่ง

9️⃣ กรณีไม่มีข้อมูลส่งมา

}else{
echo "ไม่พบข้อมูล";
}

ความหมายถ้ามีคนเปิดไฟล์ save_review.php โดยตรง
ระบบจะแจ้งว่า “ไม่พบข้อมูล”เพื่อป้องกันการใช้งานผิดวิธี

🔟 สิ่งสำคัญที่นักศึกษาจะได้เรียนรู้

จากหน้านี้ นักศึกษาจะเข้าใจ

การรับข้อมูลจาก POST
การบันทึกข้อมูลด้วย INSERT
การใช้ NOW()
การป้องกัน XSS
การ Redirect หน้าเว็บ
การทำงานของ Form + Database

ซึ่งเป็นพื้นฐานของการพัฒนา Web Application

หน้ารายงาน report.php

ตัวอย่างหน้าเว็บไซต์ หน้า report.php

หน้ารายงาน report.php มุมมองพิมพ์

ตัวอย่างชุดคำสั่ง


<?php
session_start();

/* อนุญาตเฉพาะ Admin */
if(!isset($_SESSION['admin'])){
header("location:login.php");
exit();
}

include("config.php");

/* ดึงข้อมูลสินค้า */
$sql = "SELECT * FROM products ORDER BY id DESC";
$result = mysqli_query($conn, $sql);

/* ตรวจสอบการ query */
if(!$result){
die("เกิดข้อผิดพลาดในการดึงข้อมูล: " . mysqli_error($conn));
}

/* นับจำนวนสินค้า */
$total = mysqli_num_rows($result);
?>

<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>รายงานสินค้า</title>

<style>
body{
margin:0;
font-family:Tahoma, sans-serif;
background:#eef2f7;
color:#333;
}

/* HEADER */
.header{
background:linear-gradient(90deg,#ff7a00,#ff9a3c);
color:white;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.logo{
font-size:24px;
font-weight:bold;
}

.menu a{
color:white;
text-decoration:none;
margin-left:15px;
padding:8px 12px;
border-radius:6px;
transition:0.3s;
display:inline-block;
}

.menu a:hover{
background:rgba(255,255,255,0.2);
}

/* CONTAINER */
.container{
max-width:1100px;
margin:30px auto;
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

/* TITLE */
.title-bar{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}

.title-bar h2{
margin:0;
font-size:28px;
color:#222;
}

/* TOP BAR */
.top-bar{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}

.search-box input{
padding:10px 12px;
width:260px;
border:1px solid #ccc;
border-radius:8px;
font-size:14px;
}

/* BUTTON */
.btn{
padding:10px 16px;
border:none;
border-radius:8px;
cursor:pointer;
color:white;
font-size:14px;
text-decoration:none;
display:inline-block;
transition:0.3s;
}

.home{
background:#007bff;
}

.print{
background:#28a745;
}

.btn:hover{
opacity:0.9;
transform:translateY(-2px);
}

/* TABLE */
.table-wrap{
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
border-radius:10px;
overflow:hidden;
}

th{
background:#007bff;
color:white;
padding:12px;
text-align:left;
font-size:15px;
}

td{
padding:12px;
border-bottom:1px solid #eee;
font-size:14px;
}

tr:nth-child(even){
background:#f9fbfd;
}

tr:hover{
background:#eef6ff;
}

/* IMAGE */
.product-img{
width:70px;
height:70px;
object-fit:cover;
border-radius:8px;
border:1px solid #ddd;
}

/* PRICE */
.price{
color:#d60000;
font-weight:bold;
}

/* EMPTY DATA */
.no-data{
text-align:center;
padding:30px;
color:#777;
font-size:16px;
}

/* FOOTER */
.footer{
margin-top:20px;
padding-top:12px;
border-top:1px solid #ddd;
font-size:15px;
color:#555;
}

/* PRINT */
@media print{
.header,
.top-bar,
.btn{
display:none;
}

body{
background:white;
}

.container{
box-shadow:none;
margin:0;
max-width:100%;
border-radius:0;
}
}
</style>

<script>
function searchProduct(){
let input = document.getElementById("search");
let filter = input.value.toLowerCase();
let table = document.getElementById("productTable");
let tr = table.getElementsByTagName("tr");

for(let i = 1; i < tr.length; i++){
let td = tr[i].getElementsByTagName("td")[2];
if(td){
let text = td.textContent || td.innerText;
tr[i].style.display = text.toLowerCase().indexOf(filter) > -1 ? "" : "none";
}
}
}
</script>

</head>
<body>

<div class="header">
<div class="logo">📊 ระบบรายงานสินค้า</div>

<div class="menu">
<a href="index.php">หน้าแรก</a>
<a href="products.php">สินค้า</a>
<a href="report.php">รายงานสินค้า</a>
<a href="add_product.php">เพิ่มสินค้า</a>
<a href="logout.php">ออกจากระบบ</a>
</div>
</div>

<div class="container">

<div class="title-bar">
<h2>📦 รายงานสินค้า</h2>
<a href="products.php" class="btn home">← กลับหน้าสินค้า</a>
</div>

<div class="top-bar">
<div class="search-box">
<input type="text" id="search" onkeyup="searchProduct()" placeholder="🔍 ค้นหาชื่อสินค้า...">
</div>

<button class="btn print" onclick="window.print()">🖨 พิมพ์รายงาน</button>
</div>

<div class="table-wrap">
<table id="productTable">
<tr>
<th>ลำดับ</th>
<th>รูปภาพ</th>
<th>ชื่อสินค้า</th>
<th>ราคา</th>
<th>ประเภท</th>
</tr>

<?php
if($total > 0){
$i = 1;
while($row = mysqli_fetch_assoc($result)){
?>
<tr>
<td><?php echo $i++; ?></td>
<td>
<?php
if(!empty($row['image']) && file_exists("images/".$row['image'])){
?>
<img src="images/<?php echo htmlspecialchars($row['image']); ?>" class="product-img">
<?php
}else{
echo "ไม่มีรูป";
}
?>
</td>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td class="price"><?php echo number_format($row['price']); ?> บาท</td>
<td><?php echo htmlspecialchars($row['category']); ?></td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="5" class="no-data">ยังไม่มีข้อมูลสินค้า</td>
</tr>
<?php
}
?>
</table>
</div>

<div class="footer">
จำนวนสินค้าทั้งหมด <b><?php echo $total; ?></b> รายการ
</div>

</div>

</body>
</html>

Post Views: 302

การพัฒนาเว็บไซต์แนะนำผลิตภัณฑ์ “ของดีเมืองศรีสะเกษ”

🎯 จุดประสงค์การเรียนรู้

🔁 การทำงานของระบบทั้งหมด

สำหรับ Admin

2️⃣ เข้า phpMyAdmin

3️⃣ สร้างฐานข้อมูล (Database)

1. การเชื่อมต่อฐานข้อมูลกับเว็บไซต์ (Database Connection)

ตัวอย่างโค้ด

ผลลัพธ์ที่นักศึกษาต้องได้

สร้าง CSS

ขั้นที่ 1 สร้างโครงสร้างหน้าเว็บไซต์ (HTML Layout)

การสร้างระบบล็อกอิน

1️⃣ สร้างหน้าฟอร์ม Login

2️⃣ ตรวจสอบ Username และ Password

3️⃣ สร้างระบบ Logout

1️⃣ หน้าแสดงสินค้าทั้งหมด

หน้าที่ แสดงสินค้าทั้งหมดจากฐานข้อมูลสิ่งที่สอนนักศึกษาการใช้ SQL การใช้ while loop การแสดงข้อมูลจาก Database

5️⃣ ปรับเมนูหน้าเว็บไซต์

1️⃣ อธิบายแนวคิดหน้า Product Detail

2️⃣ สร้างไฟล์ product_detail.php

สิ่งที่นักศึกษาจะได้เรียนรู้จากบทนี้

1 การรับค่าจาก URL

2 การดึงข้อมูลเฉพาะรายการ

3 การเชื่อมโยงหน้าระบบเว็บไซต์

ตัวอย่างชุดคำสั่ง

1 เริ่มต้น Session

2 ตรวจสอบสิทธิ์ Admin

3 ฟอร์มเพิ่มสินค้า

4️⃣ ช่องกรอกข้อมูลสินค้า

ชื่อสินค้า

รายละเอียดสินค้า

ราคา

รูปสินค้า

5️⃣ ปุ่มบันทึก

6️⃣ CSS ที่ใช้สอนนักศึกษา

กล่องฟอร์ม

ปุ่ม

7️⃣ สิ่งที่นักศึกษาจะได้เรียนรู้

การบันทึกสินค้าที่เพิ่ม

1️⃣ การเริ่มต้น Session และตรวจสอบสิทธิ์ Admin

ความหมาย

การทำงาน

2️⃣ เชื่อมต่อฐานข้อมูล

3️⃣ ตรวจสอบว่าข้อมูลมาจากฟอร์มหรือไม่

ความหมาย

4️⃣ รับค่าจากฟอร์ม

ข้อมูลที่รับมา

5️⃣ รับไฟล์รูปภาพ

อธิบาย

6️⃣ อัปโหลดรูปภาพ

ความหมาย

7️⃣ คำสั่งบันทึกข้อมูลลงฐานข้อมูล

ความหมาย

8️⃣ สั่งให้ฐานข้อมูลทำงาน

9️⃣ แสดงผลลัพธ์เมื่อเพิ่มสินค้าสำเร็จ

🔟 โครงสร้างการทำงานของระบบเพิ่มสินค้า

สิ่งสำคัญที่นักศึกษาจะได้เรียนรู้จากหน้านี้

1️⃣ หน้าที่ของหน้าแก้ไขสินค้า

2️⃣ สิ่งสำคัญส่วนที่ 1 : ตรวจสอบสิทธิ์ Admin

3️⃣ สิ่งสำคัญส่วนที่ 2 : รับค่า id จาก URL

4️⃣ สิ่งสำคัญส่วนที่ 3 : ดึงข้อมูลจากฐานข้อมูล

5️⃣ ตรวจสอบว่ามีข้อมูลหรือไม่

6️⃣ สิ่งสำคัญส่วนที่ 4 : ฟอร์มแก้ไขสินค้า

7️⃣ ส่ง id แบบ Hidden

8️⃣ แสดงข้อมูลเดิมในช่องกรอก

ชื่อสินค้า

รายละเอียดสินค้า

ราคา

9️⃣ แสดงรูปภาพสินค้าเดิม

🔟 ปุ่มบันทึกการแก้ไข

1️⃣1️⃣ CSS ที่ใช้ในหน้านี้

กล่องฟอร์ม

ปุ่ม

1️⃣2️⃣ สิ่งที่นักศึกษาจะได้เรียนรู้

1️⃣ หน้าที่ของหน้า update_product.php

2️⃣ ตรวจสอบสิทธิ์ Admin (Security)

3️⃣ เชื่อมต่อฐานข้อมูล

4️⃣ รับข้อมูลจากฟอร์ม

5️⃣ ตรวจสอบว่ามีการอัปโหลดรูปใหม่หรือไม่

กรณีที่ 2 ไม่เปลี่ยนรูป

หน้าที่ แสดงสินค้าทั้งหมดจากฐานข้อมูล
สิ่งที่สอนนักศึกษา
การใช้ SQL การใช้ `while loop` การแสดงข้อมูลจาก Database