ตัวอย่างการสร้างปลั๊กอิน CRUD

ในเนื้อหาบทนี้เกี่ยวกับขั้นตอนในการสร้างปลั๊กอิน CRUD WordPress (CRUD : Create/Read/Update/Delete) ซึ่งเป็นเนื้อหาที่เข้าใจได้ง่าย สามารถเรียนรู้และนำไปดัดแปลงสร้างเป็นปลั๊กอิน

 

ขั้นที่ 1 สร้างไฟล์ชื่อ crud.php และทำการเปิดไฟล์

ขั้นที่ 2 เขียนส่วนเริ่มต้นของปลั๊กอินภายในไฟล์ crud.php

<?php
/**
* Plugin Name: CRUD Basic 
* Plugin URI: https://www.narasak.com/
* Description: ตัวอย่างการสร้างปลั๊กอินพื้นฐาน สามารถใช้งานได้จริง และยังสามารถนำไปพัฒนาต่อยอดได้ด้วย
* Version: 1.0
* Author: Pawin Khenphukhiaw
* Author URI: https://web.facebook.com/pawin.khenphukhiaw/
**/

 

ขั้นที่ 3 เขียนฟังก์ชันสร้างตารางฐานข้อมูล

register_activation_hook( __FILE__, 'createTable'); /* เมื่อมีการ Activate ปลั๊กอินจะทำการสร้างตารางข้อมูล */

function createTable() { /* ฟังก์ชันที่ใช้ในการสร้างตารางข้อมูล */
  global $wpdb;
  $charset_collate = $wpdb->get_charset_collate();
  $table_name = $wpdb->prefix . 'userstable';
  $sql = "CREATE TABLE `$table_name` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(220) DEFAULT NULL,
  `email` varchar(220) DEFAULT NULL,
  PRIMARY KEY(user_id)
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  ";
}

ข้อควรระวัง อย่าลืมกำหนด Charset เป็น utf8 เพื่อให้สามารถอ่านภาษาไทยได้

 

ขั้นที่ 4 สร้างฟังก์ชันส่วนที่ใช้ในการแสดงผลหน้าเว็บ

add_action('admin_menu', 'addMainPageContent');

function addMainPageContent() {
  add_menu_page('CRUD Basic', 'CRUD Basic', 'manage_options', __FILE__, 'crudMainPage', 'dashicons-wordpress');
}
function crudMainPage() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'userstable';
}

อธิบายเพิ่มเติมขั้นที่ 4

add_menu_page() ใช้ในการสร้างเมนูเพื่อเรียกไฟล์และฟังก์ชั่นที่ต้องการให้ทำงาน

ไวยากรณ์ของ add_menu_page()

add_menu_page(string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = ”, string $icon_url = ”, int $position = null)

  • $page_title แสดงข้อความในส่วนของแท็บเบราว์เซอร์
  • $menu_title แสดงชื่อของเมนู ในหน้า Dashboard
  • $capability แสดงคุณลักษณะที่จำเป็นต่อผู้ใช้งาน
  • $function = ” ใช้ในการเรีกฟังก์ชันที่ต้องการให้ดำเนินการ
  • $icon_url ใช้ในการกำหนดไอค่อนของเมนูในหน้า Dashboard

crudMainPage(){} คือฟังก์ชันที่เราสร้างขึ้นเองเพื่อที่จะใช้ในการเขียนโค้ดสำหรับแสดงผลหน้าเว็บ

 

ขั้นที่ 5 สร้างตารางสำหรับแสดงข้อมูล

<div class="wrap">
  <h2>CRUD Operations</h2>
  <table class="wp-list-table widefat striped">
    <thead>
      <tr>
        <th width="25%">User ID</th>
        <th width="25%">ชื่อ-สกุล</th>
        <th width="25%">ที่อยู่อีเมลล์</th>
        <th width="25%">ดำเนินการ</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

 

ขั้นที่ 6 สร้างฟอร์มสำหรับใช้ในการเพิ่มข้อมูล  และสร้างฟังก์ชันในการรับข้อมูลจากฟอร์มด้านบน และเพิ่มข้อมูลเข้าสู่ตารางจัดเก็บข้อมูล

ฟอร์มสำหรับส่งข้อมูล

<form action="" method="post">
  <tr>
    <td><input type="text" value="AUTO_GENERATED" disabled></td>
    <td><input type="text" id="newname" name="newname"></td>
    <td><input type="text" id="newemail" name="newemail"></td>
    <td><button id="newsubmit" name="newsubmit" type="submit">INSERT</button></td>
  </tr>
</form>

 

ฟังก์ชันสำหรับเพิ่มข้อมูล

if (isset($_POST['newsubmit'])) {
  $name = $_POST['newname'];
  $email = $_POST['newemail'];
  $data = "INSERT INTO $table_name (name,email) VALUES ('$name','$email')";
  $wpdb->query($data);
  
  echo "<script>location.replace('admin.php?page=crud/crud.php');</script>";
}

 

ขั้นที่ 7 ดึงข้อมูลจากตาราง userstable มาแสดงผล

<?php
  $result = $wpdb->get_results("SELECT * FROM $table_name");
  
  foreach ($result as $print) {
    echo "
      <tr>
        <td width='25%'>$print->user_id</td>
        <td width='25%'>$print->name</td>
        <td width='25%'>$print->email</td>
        <td width='25%'><a href='admin.php?page=crud/crud.php&upt=$print->user_id'><button type='button'>UPDATE</button></a> <a href='admin.php?page=crud/crud.php&del=$print->user_id'><button type='button'>DELETE</button></a></td>
      </tr>
    ";
  }
?>

 

ขั้นที่ 8 สร้างฟังก์ชันฟอร์มในการแก้ไขข้อมูล

<?php
  if (isset($_GET['upt'])) {
    $upt_id = $_GET['up'];
    $result = $wpdb->get_results("SELECT * FROM $table_name WHERE user_id='$upt_id'");
    foreach($result as $print) {
      $name = $print->name;
      $email = $print->email;
    }
    echo "
    <table class='wp-list-table widefat striped'>
      <thead>
        <tr>
          <th width='25%'>User ID</th>
          <th width='25%'>ชื่อ-สกุล</th>
          <th width='25%'>ที่อยู่อีเมลล์</th>
          <th width='25%'>ดำเนินการ</th>
        </tr>
      </thead>
      <tbody>
        <form action='' method='post'>
          <tr>
            <td width='25%'>$print->user_id <input type='hidden' id='uptid' name='uptid' value='$print->user_id'></td>
            <td width='25%'><input type='text' id='uptname' name='uptname' value='$print->name'></td>
            <td width='25%'><input type='text' id='uptemail' name='uptemail' value='$print->email'></td>
            <td width='25%'><button id='uptsubmit' name='uptsubmit' type='submit'>UPDATE</button> <a href='admin.php?page=crud/crud.php'><button type='button'>CANCEL</button></a></td>
          </tr>
        </form>
      </tbody>
    </table>";
  }
?> 

 

ขั้นที่ 9 สร้างฟังก์ชันในการอัพเดทข้อมูลด้วยไอดี

if (isset($_POST['uptsubmit'])) {
  $id = $_POST['uptid'];
  $name = $_POST['uptname'];
  $email = $_POST['uptemail'];
  $data = "UPDATE $table_name SET name='$name',email='$email' WHERE user_id='$id'";
  $wpdb->query($data);
  
  echo "<script>location.replace('admin.php?page=crud.php');</script>";
}

 

ขั้นที่ 10 สร้างฟังก์ชันสำหรับลบข้อมูล

if (isset($_GET['del'])) {
  $del_id = $_GET['del'];
  $data = "DELETE FROM $table_name WHERE user_id='$del_id'";
  $wpdb->query($data);
  
  echo "<script>location.replace('admin.php?page=crud.php');</script>";
}

 

ขั้นสุดท้าย

  • นำไฟล์ php ไปไว้ที่โฟลเดอร์ WebFolder\wp-content\plugins\crud\crud.php
  • เข้าเว็บไซต์ ไปที่หน้า Dashboard
  • คลิกเมนูปลั๊กอิน
  • Activate Plugin ที่เราสร้างขึ้น

เสร็จสิ้นกระบวนการสร้างปลั๊กอิน

 

รวมโค้ด

<?php
/**
* Plugin Name: CRUD Basic 
* Plugin URI: https://www.narasak.com/
* Description: ตัวอย่างการสร้างปลั๊กอินพื้นฐาน สามารถใช้งานได้จริง และยังสามารถนำไปพัฒนาต่อยอดได้ด้วย
* Version: 1.0
* Author: Pawin Khenphukhiaw
* Author URI: https://web.facebook.com/pawin.khenphukhiaw/
**/


register_activation_hook( __FILE__, 'createTable'); /* เมื่อมีการ Activate ปลั๊กอินจะทำการสร้างตารางข้อมูล */

function createTable() { /* ฟังก์ชันที่ใช้ในการสร้างตารางข้อมูล */
  global $wpdb;
  $charset_collate = $wpdb->get_charset_collate();
  $table_name = $wpdb->prefix . 'crudtable';
  $sql = "CREATE TABLE `$table_name` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(220) DEFAULT NULL,
  `email` varchar(220) DEFAULT NULL,
  PRIMARY KEY(user_id)
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
  ";
}

add_action('admin_menu', 'addMainPageContent');

function addMainPageContent() {
  add_menu_page('CRUD Basic', 'CRUD Basic', 'manage_options', __FILE__, 'crudMainPage', 'dashicons-wordpress');
}

function crudMainPage() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'crudtable';
  if (isset($_POST['newsubmit'])) {
    $name = $_POST['newname'];
    $email = $_POST['newemail'];
    $data = "INSERT INTO $table_name(name,email) VALUES('$name','$email')";
    $wpdb->query($data);
    echo "<script>location.replace('admin.php?page=crud/crud.php');</script>";
  }
  if (isset($_POST['uptsubmit'])) {
    $id = $_POST['uptid'];
    $name = $_POST['uptname'];
    $email = $_POST['uptemail'];
    $data = "UPDATE $table_name SET name='$name',email='$email' WHERE user_id='$id'";
    $wpdb->query($data);
    echo "<script>location.replace('admin.php?page=crud/crud.php');</script>";
  }
  if (isset($_GET['del'])) {
    $del_id = $_GET['del'];
    $data = "DELETE FROM $table_name WHERE user_id='$del_id'";
    $wpdb->query($data);
    echo "<script>location.replace('admin.php?page=crud/crud.php');</script>";
  }
  ?>
  <div class="wrap">
    <h2>CRUD Basic</h2>
    <table class="wp-list-table widefat striped">
      <thead>
        <tr>
          <th width="25%">User ID</th>
          <th width="25%">ชื่อ-สกุล</th>
          <th width="25%">ที่อยู่อีเมลล์</th>
          <th width="25%">ดำเนินการ</th>
        </tr>
      </thead>
      <tbody>
        <form action="" method="post">
          <tr>
            <td><input type="text" value="AUTO_GENERATED" disabled></td>
            <td><input type="text" id="newname" name="newname"></td>
            <td><input type="text" id="newemail" name="newemail"></td>
            <td><button id="newsubmit" name="newsubmit" type="submit">INSERT</button></td>
          </tr>
        </form>
        <?php
          $result = $wpdb->get_results("SELECT * FROM $table_name");
          foreach ($result as $print) {
            echo "
              <tr>
                <td width='25%'>$print->User ID</td>
                <td width='25%'>$print->ชื่อ-สกุล</td>
                <td width='25%'>$print->ที่อยู่อีเมลล์</td>
                <td width='25%'><a href='admin.php?page=crud/crud.php&upt=$print->user_id'><button type='button'>UPDATE</button></a> <a href='admin.php?page=crud/crud.php&del=$print->user_id'><button type='button'>DELETE</button></a></td>
              </tr>
            ";
          }
        ?>
      </tbody>  
    </table>
    <br>
    <br>
    <?php
      if (isset($_GET['upt'])) {
        $upt_id = $_GET['upt'];
        $result = $wpdb->get_results("SELECT * FROM $table_name WHERE user_id='$upt_id'");
        foreach($result as $print) {
          $name = $print->name;
          $email = $print->email;
        }
        echo "
        <table class='wp-list-table widefat striped'>
          <thead>
            <tr>
              <th width='25%'>User ID</th>
              <th width='25%'>Name</th>
              <th width='25%'>Email Address</th>
              <th width='25%'>Actions</th>
            </tr>
          </thead>
          <tbody>
            <form action='' method='post'>
              <tr>
                <td width='25%'>$print->user_id <input type='hidden' id='uptid' name='uptid' value='$print->user_id'></td>
                <td width='25%'><input type='text' id='uptname' name='uptname' value='$print->name'></td>
                <td width='25%'><input type='text' id='uptemail' name='uptemail' value='$print->email'></td>
                <td width='25%'><button id='uptsubmit' name='uptsubmit' type='submit'>UPDATE</button> <a href='admin.php?page=crud/crud.php'><button type='button'>CANCEL</button></a></td>
              </tr>
            </form>
          </tbody>
        </table>";
      }
    ?>
  </div>
  <?php
}

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: