มาลองโค้ด PHP CRUD ภาค 1 นินจาโค้ด #codeofaninja

Leave a Comment / PHP, PHP CRUD / By / มกราคม 30, 2021

        ขั้นตอนที่ 1 เตรียมความพร้อม

       สิ่งที่เราต้องเตรียมให้พร้อมเบื้องต้นสำหรับโปรเจคนี้คือฐานข้อมูล

        1.1 สร้างฐานข้อมูลชื่อ php_crud_ep1

ให้เราสร้างฐานข้อมูลชื่อ php_crud_ep1 โดยสามารถคัดลอกโค้ดด้านล่างนี้ไปใช้ไ้ด้เลย

--
-- Table structure for table `products`
--
 
CREATE TABLE IF NOT EXISTS `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(128) NOT NULL,
  `description` text NOT NULL,
  `price` double NOT NULL,
  `created` datetime NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;
        1.2 เตรียมข้อมูลตัวอย่างสำหรับการทดสอบ

        เตรียมข้อมูลสำหรับการทดสอบเบื้องต้นโดยสามารถคัดลอกโค้ดคำสั่ง sql สำหรับสร้างข้อมูลตัวอย่างด้านล่างต่อไปนี้

--
-- Dumping data for table `products`
--
 
INSERT INTO `products` (`id`, `name`, `description`, `price`, `created`, `modified`) VALUES
(1, 'Basketball', 'A ball used in the NBA.', 49.99, '2019-08-02 12:04:03', '2019-08-06 06:59:18'),
(2, 'Gatorade', 'This is a very good drink for athletes.', 1.99, '2019-08-02 12:14:29', '2019-08-06 06:59:18'),
(3, 'Eye Glasses', 'It will make you read better.', 6, '2019-08-02 12:15:04', '2019-08-06 06:59:18'),
(4, 'Trash Can', 'It will help you maintain cleanliness.', 3.95, '2019-08-02 12:16:08', '2019-08-06 06:59:18'),
(5, 'Mouse', 'Very useful if you love your computer.', 11.35, '2019-08-02 12:17:58', '2019-08-06 06:59:18'),
(6, 'Earphone', 'You need this one if you love music.', 7, '2019-08-02 12:18:21', '2019-08-06 06:59:18'),
(7, 'Pillow', 'Sleeping well is important.', 8.99, '2019-08-02 12:18:56', '2019-08-06 06:59:18');

        ขั้นตอนที่ 2 C (Create)

        เริ่มจาก C ซึ่งหมายถึง create ซึ่งก็คือการสร้างข้อมูลใหม่หรือการเพิ่มข้อมูลใหม่ลงในตารางฐานข้อมูล
        2.1 สร้างไฟล์ add.php

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

<!DOCTYPE HTML>
<html>
<head>
    <title>PDO - Create a Record - PHP CRUD Tutorial</title>    
    <!-- ลิงค์ Bootstrap CDN เพื่อใช้งาน Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">

    <!-- ลิงค์สำหรับฟ้อนต์ภาษาไทย -->
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">     

    <style> body{ font-family: 'Mitr', sans-serif; } </style>
</head>
<body> 
    <!-- container -->
    <div class="container"> 
        <div class="page-header mt-5">
            <h1>เพิ่มรายการผลิตภัณฑ์</h1>
        </div> 
        <?php
            if($_POST){                             
                include 'controller/create.php';                                                     
            }
        ?>    
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
            <table class='table table-hover table-responsive table-bordered'>
                <tr>
                    <td>ชื่อผลิตภัณฑ์</td>
                    <td><input type='text' name='name' class='form-control' /></td>
                </tr>
                <tr>
                    <td>คำอธิบาย</td>
                    <td><textarea name='description' class='form-control'></textarea></td>
                </tr>
                <tr>
                    <td>ราคา</td>
                    <td><input type='text' name='price' class='form-control' /></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="d-flex justify-content-between">
                        <input type='submit' value='บันทึก' class='btn btn-primary' />
                        <a href='index.php' class='btn btn-danger'>กลับสู่หน้ารายการผลิตภัณฑ์</a>
                    </td>
                </tr>
            </table>
        </form>        
    </div> <!-- end .container -->     
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2.2 สร้างโฟลเดอร์สำหรับเก็บไฟล์คำสั่งจัดการกับฐานข้อมูล

        สร้างโฟลเดอร์ชื่อ controller เพื่อเก็บไฟล์คำสั่งที่ใช้จัดการกับฐานข้อมูล

2.3 สร้างไฟล์เชื่อมต่อกับฐานข้อมูล

        สร้างไฟล์ใหม่ชื่อ connect_db.php ไว้ในโฟลเดอร์ชื่อ controller เพื่อเก็บไฟล์คำสั่งที่ใช้เชื่อมต่อกับฐานข้อมูลแล้วพิมพ์โค้ดคำสั่งดังนี้

<?php
// used to connect to the database
$host = "localhost";
$db_name = "php_crud_ep1";
$username = "root";
$password = "mysql";
try {
    $conn = new PDO("mysql:host={$host};dbname={$db_name}", $username, $password);
}
// show error
catch(PDOException $exception){
    echo "เกิดข้อผิดพลาดในการเชื่อมต่อ: " . $exception->getMessage();
}
?>
2.4 สร้างไฟล์บันทึกข้อมูล

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

<?php
// include database connection
include 'connect_db.php';
try{
    // insert query
    $query = "INSERT INTO products SET name=:name, description=:description, price=:price, created=:created";                
    // prepare query for execution
    $stmt = $conn->prepare($query);
    // posted values
    $name=htmlspecialchars(strip_tags($_POST['name']));
    $description=htmlspecialchars(strip_tags($_POST['description']));
    $price=htmlspecialchars(strip_tags($_POST['price']));
    $created=date('Y-m-d H:i:s'); // specify when this record was inserted to the database
    // bind the parameters
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':description', $description);
    $stmt->bindParam(':price', $price);
    $stmt->bindParam(':created', $created);
    // Execute the query
    if($stmt->execute()){
        echo "<div class='alert alert-success'>บันทึกรายการใหม่เสร็จสมบูรณ์</div>";
    }else{
        echo "<div class='alert alert-danger'>เกิดข้อผิดพลาด ไม่สามารถบันทึกข้อมูลได้</div>";
    } 
}               
// show error
catch(PDOException $exception){
    die('ERROR: ' . $exception->getMessage());
}
$conn = null;
?>
2.5 ทดลองรันโปรแกรม

        รันโปรแกรมจำลองเซิฟเวอร์ แล้วเปิดเบราเซอร์แล้วพิมพ์ url ดังนี้

localhost/php_crud_ep1/add.php

จะได้ผลลัพธ์ประมาณนี้

ทดลองบันทึกข้อมูลแล้วคลิกปุ่มบันทึกก็จะได้ผลลัพธ์ดังนี้

เมื่อไปดูในฐานข้อมูลก็จะพบว่ามีข้อมูลใหม่ที่เราเพิ่งบันทึกเพิ่มลงไป

        ขั้นตอนที่ 3 R (Read)

        R ย่อมาจาก read ซึ่งก็คือการอ่านข้อมูลในตารางฐานข้อมูลมาแสดง

        3.1 สร้างไฟล์ index.php

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

<!DOCTYPE HTML>
<html>
<head>
    <title>PDO - อ่านข้อมูลในเรคคอร์ด - PHP CRUD Tutorial</title>    
    <!-- Latest compiled and minified Bootstrap CSS -->
    <!-- ลิงค์ Bootstrap CDN เพื่อใช้งาน Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <!-- ลิงค์สำหรับฟ้อนต์ภาษาไทย -->
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200&display=swap" rel="stylesheet">     
    <style> body{ font-family: 'Mitr', sans-serif; } </style>        
    <!-- custom css -->
    <style>
        .m-r-1em{ margin-right:1em; }
        .m-b-1em{ margin-bottom:1em; }
        .m-l-1em{ margin-left:1em; }
        .mt0{ margin-top:0; }
    </style> 
</head>
<body>
    <!-- container -->
    <div class="container">
        <div class="page-header mt-5">
            <h1>รายการผลิตภัณฑ์</h1>
        </div>
        <hr />
        <div class="d-flex justify-content-end">
            <a href='add.php' class='btn btn-primary m-b-1em px-5'>เพิ่มรายการใหม่</a>
        </div>
        <!-- PHP code to read records will be here -->
        <?php include 'controller/read.php'; ?>
    </div> <!-- end .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
        3.2 สร้างไฟล์ read.php

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

<?php
// include database connection นำเข้าไฟล์คำสั่งเชื่อมต่อกับฐานข้อมูล
include 'controller/connect_db.php';
// delete message prompt will be here (สำหรับแสดงข้อควาเตือนการลบข้อมูล ซึ่งจะอธิบายในขั้นตอนถัดไป)
// select all data คำสั่งsql เลือกข้อมูล
$query = "SELECT id, name, description, price FROM products ORDER BY id ASC";
$stmt = $conn->prepare($query);
$stmt->execute();
// this is how to get number of rows returned ตรวจสอบจำนวนแถวข้อมูลที่ได้
$num = $stmt->rowCount();
//check if more than 0 record found หากมีข้อมูลอยู่ในฐานข้อมูล
if($num>0){
    //สร้างตาราง
    echo "<table class='table table-hover table-responsive table-bordered'>";//start table
    //creating our table heading สร้างหัวตาราง 
    echo "<tr class='text-center'>";
        echo "<th>ลำดับที่</th>";
        echo "<th>ชื่อ</th>";
        echo "<th>คำอธิบาย</th>";
        echo "<th>ราคา</th>";
        echo "<th>ปฏิบัติการ</th>";
    echo "</tr>";
    // retrieve our table contents 
    // fetch() is faster than fetchAll()
    // http://stackoverflow.com/questions/2770630/pdofetchall-vs-pdofetch-in-a-loop
    $i=1;
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    // extract row
    // this will make $row['firstname'] to
    // just $firstname only
    extract($row);
     
    // creating new table row per record
    echo "<tr>";
        echo "<td class='text-center'>{$i}</td>";
        echo "<td>{$name}</td>";
        echo "<td>{$description}</td>";
        echo "<td class='text-center'>$ {$price}</td>";
        echo "<td class='text-center'>";
            // read one record 
            echo "<a href='view.php?id={$id}' class='btn btn-info m-r-1em'>แสดง</a>";             
            // we will use this links on next part of this post
            echo "<a href='edit.php?id={$id}' class='btn btn-primary m-r-1em'>แก้ไข</a>";
            // we will use this links on next part of this post
            echo "<a href='#' onclick='delete_user({$id});'  class='btn btn-danger'>ลบ</a>";
        echo "</td>";
    echo "</tr>";
    $i++;
} 
// end table
echo "</table>";    
} 
// if no records found
else{
    echo "<div class='alert alert-danger'>ไม่มีรายการข้อมูล.</div>";
}
$conn = null;
?>
        3.3 สร้างไฟล์ read_one.php

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

<?php
// get passed parameter value, in this case, the record ID
// isset() is a PHP function used to verify if a value is there or not
$id=isset($_GET['id']) ? $_GET['id'] : die('ERROR: ไม่พบข้อมูล.');
//include database connection
include 'controller/connect_db.php';
// read current record's data
try {
    // prepare select query
    $query = "SELECT id, name, description, price FROM products WHERE id = ? LIMIT 0,1";
    $stmt = $conn->prepare( $query ); 
    // this is the first question mark
    $stmt->bindParam(1, $id); 
    // execute our query
    $stmt->execute();
    // store retrieved row to a variable
    $row = $stmt->fetch(PDO::FETCH_ASSOC); 
    // values to fill up our form
    $name = $row['name'];
    $description = $row['description'];
    $price = $row['price'];
} 
// show error
catch(PDOException $exception){
    die('ERROR: ' . $exception->getMessage());
}
?>
        3.4 สร้างไฟล์ view.php

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

<!DOCTYPE HTML>
<html>
<head>
    <title>PDO - Read Records - PHP CRUD Tutorial</title>    
    <!-- Latest compiled and minified Bootstrap CSS -->
    <!-- ลิงค์ Bootstrap CDN เพื่อใช้งาน Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <!-- ลิงค์สำหรับฟ้อนต์ภาษาไทย -->
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400&display=swap" rel="stylesheet">     
    <style> body{ font-family: 'Mitr', sans-serif; } </style>        
    <!-- custom css -->
    <style>
        .m-r-1em{ margin-right:1em; }
        .m-b-1em{ margin-bottom:1em; }
        .m-l-1em{ margin-left:1em; }
        .mt0{ margin-top:0; }
    </style> 
</head>
<body>
    <!-- container -->
    <div class="container">
        <div class="page-header mt-5">
            <h1>รายการผลิตภัณฑ์</h1>
        </div>
        <hr />
        <div class="d-flex justify-content-end m-b-1em">
            <a href='index.php' class='btn btn-danger'>กลับสู่หน้ารายการผลิตภัณฑ์</a>
        </div>
        <!-- PHP code to read records will be here -->
        <?php include 'controller/read_one.php'; ?>

        <!--we have our html table here where the record will be displayed-->
        <table class='table table-hover table-responsive table-bordered'>
            <tr>
                <td>ชื่อ</td>
                <td><?php echo htmlspecialchars($name, ENT_QUOTES);  ?></td>
            </tr>
            <tr>
                <td>คำอธิบาย</td>
                <td><?php echo htmlspecialchars($description, ENT_QUOTES);  ?></td>
            </tr>
            <tr>
                <td>ราคา</td>
                <td><?php echo htmlspecialchars($price, ENT_QUOTES);  ?></td>
            </tr>

        </table>
    </div> <!-- end .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

จะได้ผลลัพธ์หน้า view.php ประมาณนี้

        ขั้นตอนที่ 4 U (Update)

        U ย่อมาจาก Update ซึ่งก็คือการแก้ไขเปลี่ยนแปลงข้อมูลที่มีอยู่ในตารางฐานข้อมูล

        4.1 สร้างไฟล์ update.php

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

<?php //controller/update.php ?>
<?php
// check if form was submitted
if($_POST){     
    try{
        // include database connection
        include 'connect_db.php';
        // write update query
        // in this case, it seemed like we have so many fields to pass and 
        // it is better to label them and not use question marks
        $query = "UPDATE products 
                    SET name=:name, description=:description, price=:price 
                    WHERE id = :id"; 
        // prepare query for excecution
        $stmt = $conn->prepare($query);
        // posted values
        $name=htmlspecialchars(strip_tags($_POST['name']));
        $description=htmlspecialchars(strip_tags($_POST['description']));
        $price=htmlspecialchars(strip_tags($_POST['price'])); 
        // bind the parameters
        $stmt->bindParam(':name', $name);
        $stmt->bindParam(':description', $description);
        $stmt->bindParam(':price', $price);
        $stmt->bindParam(':id', $id);         
        // Execute the query
        if($stmt->execute()){
            echo "<div class='alert alert-success'>บันทึกการเปลี่ยนแปลงเสร็จสิ้น</div>";
        }else{
            echo "<div class='alert alert-danger'>ไม่สามารถบันทึกการเปลี่ยนแปลงได้ โปรดลองใหม่อีกครั้ง</div>";
        }         
    }     
    // show errors
    catch(PDOException $exception){
        die('ERROR: ' . $exception->getMessage());
    }
    $conn = null;
}
?>
        4.2 สร้างไฟล์ edit.php

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

<!DOCTYPE HTML>
<html>
<head>
    <title>PDO - แก้ไขข้อมูล - PHP CRUD Tutorial</title>    
    <!-- Latest compiled and minified Bootstrap CSS -->
    <!-- ลิงค์ Bootstrap CDN เพื่อใช้งาน Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <!-- ลิงค์สำหรับฟ้อนต์ภาษาไทย -->
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400&display=swap" rel="stylesheet">     
    <style> body{ font-family: 'Mitr', sans-serif; } </style>        
    <!-- custom css -->
    <style>
        .m-r-1em{ margin-right:1em; }
        .m-b-1em{ margin-bottom:1em; }
        .m-l-1em{ margin-left:1em; }
        .mt0{ margin-top:0; }
    </style> 
</head>
<body>
    <!-- container -->
    <div class="container">
        <div class="page-header mt-5">
            <h1>แก้ไขรายการผลิตภัณฑ์</h1>
        </div>
        <hr />
        <!-- PHP read record by ID will be here -->
        <?php include 'controller/read_one.php'?>
        
        <!-- PHP post to update record will be here --> 
        <?php include 'controller/update.php'?>
        <!--we have our html form here where new record information can be updated-->
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"] . "?id={$id}");?>" method="post">
            <table class='table table-hover table-responsive table-bordered'>
                <tr>
                    <td>ชื่อ</td>
                    <td><input type='text' name='name' value="<?php echo htmlspecialchars($name, ENT_QUOTES);  ?>" class='form-control' /></td>
                </tr>
                <tr>
                    <td>คำอธิบาย</td>
                    <td><textarea name='description' class='form-control'><?php echo htmlspecialchars($description, ENT_QUOTES);  ?></textarea></td>
                </tr>
                <tr>
                    <td>ราคา</td>
                    <td><input type='text' name='price' value="<?php echo htmlspecialchars($price, ENT_QUOTES);  ?>" class='form-control' /></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="d-flex justify-content-between">
                        <input type='submit' value='บันทึกการเปลี่ยนแปลง' class='btn btn-primary' />
                        <a href='index.php' class='btn btn-danger'>กลับสู่หน้ารายการผลิตภัณฑ์</a>
                    </td>
                </tr>
            </table>
        </form>
    </div> <!-- end .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

จะได้ผลลัพธ์หน้า edit.php ประมาณนี้

        ขั้นตอนที่ 5 D (Delete)

        D ย่อมาจาก Delete ซึ่งก็คือการลบข้อมูลที่มีอยู่ในตารางฐานข้อมูล

        5.1 สร้างไฟล์ delete.php

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

<?php
// include database connection
include 'connect_db.php';
try {	
	// get record ID
	// isset() is a PHP function used to verify if a value is there or not
	$id=isset($_GET['id']) ? $_GET['id'] : die('ERROR: Record ID not found.');
	// delete query
	$query = "DELETE FROM products WHERE id = ?";
	$stmt = $conn->prepare($query);
	$stmt->bindParam(1, $id);	
	if($stmt->execute()){
		// redirect to read records page and 
		// tell the user record was deleted
		header('Location: ../index.php?action=deleted');
	}else{
		die('Unable to delete record.');
	}
}
// show error
catch(PDOException $exception){
	die('ERROR: ' . $exception->getMessage());
}
?>
        5.2 แก้ไขไฟล์ index.php

        ให้แก้ไขไฟล์ index.php  ให้เป็นดังต่อไปนี้

<!DOCTYPE HTML>
<html>
<head>
    <title>PDO - Read Records - PHP CRUD Tutorial</title>    
    <!-- Latest compiled and minified Bootstrap CSS -->
    <!-- ลิงค์ Bootstrap CDN เพื่อใช้งาน Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <!-- ลิงค์สำหรับฟ้อนต์ภาษาไทย -->
    <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300&display=swap" rel="stylesheet">     
    <style> body{ font-family: 'Mitr', sans-serif; } </style>        
    <!-- custom css -->
    <style>
        .m-r-1em{ margin-right:1em; }
        .m-b-1em{ margin-bottom:1em; }
        .m-l-1em{ margin-left:1em; }
        .mt0{ margin-top:0; }
    </style> 
</head>
<body>
    <!-- container -->
    <div class="container">
        <div class="page-header mt-5">
            <h1>รายการผลิตภัณฑ์</h1>
        </div>
        <hr />
        <?php
            $action = isset($_GET['action']) ? $_GET['action'] : "";          
            // if it was redirected from delete.php
            if($action=='deleted'){                
                echo "<div class='alert alert-success'>ลบข้อมูลเรียบร้อยแล้ว.</div>";
            }
        ?>
        <div class="d-flex justify-content-end">
            <a href='add.php' class='btn btn-primary m-b-1em px-5'>เพิ่มรายการใหม่</a>
        </div>
        <!-- PHP code to read records will be here -->
        <?php include 'controller/read.php'; ?>


    </div> <!-- end .container -->

<script type='text/javascript'>
    // confirm record deletion
    function delete_user( id ){        
        var answer = confirm('ยืนยันการลบข้อมูล ?');
        if (answer){
            // if user clicked ok, 
            // pass the id to delete.php and execute the delete query
            window.location = 'controller/delete.php?id=' + id;
        } 
    }
</script>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

เป็นอันเสร็จสิ้นโปรแกรมฝึกทักษะ PHP CRUD ภาค 1 หวังว่าคงเป็นประโยชน์สำหรับผู้อ่านไม่มากก็น้อย หากทำตามแล้วเกิดปัญหาติดขัดตรงใหนก็ฝากคอมเม้นต์มาบอกกันได้เลยน่ะครับ

ขอขอบคุณ แหล่งข้อมูลอ้างอิง
  1. https://codeofaninja.com/2011/12/php-and-mysql-crud-tutorial.html
  2. https://getbootstrap.com/docs/5.0/getting-started/introduction/
  3. https://www.w3schools.com/php/default.asp

Leave a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *