Kursus WordPress

Appearance

Create & Delete Pet dari Front-End + Konversi ke Block Type ​

Gambaran Umum ​

Dua video terakhir + satu text lesson mengajarkan cara create dan delete data dari front-end menggunakan admin-post.php, serta cara mengkonversi plugin menjadi block type.

Part 1: Create Pet dari Front-End ​

Form HTML di Template ​

php
<?php if (current_user_can('administrator')) { ?>
  <form 
    action="<?php echo esc_url(admin_url('admin-post.php')); ?>" 
    method="POST" 
    class="create-pet-form"
  >
    <p>Enter just the name for a new pet. Its species, weight and other details will be randomly generated.</p>
    <input type="hidden" name="action" value="create_pet">
    <input type="text" name="incoming_pet_name" placeholder="Name...">
    <button>Add Pet</button>
  </form>
<?php } ?>

Konsep penting:

  • current_user_can('administrator') → form hanya tampil untuk admin
  • admin_url('admin-post.php') → URL tujuan submit form
  • esc_url() → sanitasi URL untuk keamanan
  • Hidden input name="action" → wajib bernama "action", nilai create_pet kita tentukan sendiri
  • method="POST" → data dikirim via POST request

Hook di Main Plugin File (new-database-table.php) ​

php
// Untuk user yang SUDAH login
add_action('admin_post_create_pet', [$this, 'createPet']);

// Untuk user yang BELUM login (no privileges)
add_action('admin_post_nopriv_create_pet', [$this, 'createPet']);

Pola nama hook: admin_post_{action_value} dan admin_post_nopriv_{action_value}

Function createPet() ​

php
function createPet() {
  if (current_user_can('administrator')) {
    $pet = generatePet();
    $pet['petname'] = sanitize_text_field($_POST['incoming_pet_name']);
    
    global $wpdb;
    $wpdb->insert($this->tableName, $pet);
    
    wp_safe_redirect(site_url('/pet-adoption'));
  } else {
    wp_safe_redirect(site_url());
  }
  exit;
}

Poin keamanan:

  • sanitize_text_field() → bersihkan input user
  • current_user_can('administrator') → double-check di function (jangan hanya rely pada form visibility)
  • wp_safe_redirect() → pastikan redirect hanya ke URL lokal (bukan wp_redirect())
  • exit → wajib dipanggil setelah redirect untuk menghentikan eksekusi PHP

Part 2: Delete Pet dari Front-End ​

Tambah Kolom Delete di Table Header ​

php
<?php if (current_user_can('administrator')) { ?>
  <th>Delete</th>
<?php } ?>

Tambah Delete Button per Baris ​

php
<?php if (current_user_can('administrator')) { ?>
  <td style="text-align: center;">
    <form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="POST">
      <input type="hidden" name="action" value="delete_pet">
      <input type="hidden" name="id_to_delete" value="<?php echo $pet->id; ?>">
      <button class="delete-pet-button">X</button>
    </form>
  </td>
<?php } ?>

Hook & Function untuk Delete ​

php
add_action('admin_post_delete_pet', [$this, 'deletePet']);
add_action('admin_post_nopriv_delete_pet', [$this, 'deletePet']);

function deletePet() {
  if (current_user_can('administrator')) {
    $id = sanitize_text_field($_POST['id_to_delete']);
    
    global $wpdb;
    $wpdb->delete($this->tableName, ['id' => $id]);
    
    wp_safe_redirect(site_url('/pet-adoption'));
  } else {
    wp_safe_redirect(site_url());
  }
  exit;
}

Perbedaan key method:

MethodFungsiContoh
$wpdb->insert()Tambah row baru$wpdb->insert($table, $dataArray)
$wpdb->delete()Hapus row$wpdb->delete($table, ['id' => $id])

Part 3: Konversi Plugin Jadi Block Type (Text Lesson) ​

Langkah-langkah: ​

1. Buat Folder & File Baru ​

our-blocks/
  ├── petslist.js
  └── petslist.php

2. File JavaScript (petslist.js) ​

js
wp.blocks.registerBlockType("ourdatabaseplugin/petslist", {
  title: "Fictional University Pets List",
  edit: function () {
    return wp.element.createElement(
      "div",
      { className: "our-placeholder-block" },
      "Pets List Placeholder"
    );
  },
  save: function () {
    return null;
  },
});

3. File PHP (petslist.php) ​

  • Copy isi inc/template-pets.php
  • Ganti require_once menjadi:
    php
    require_once(NEWDATABASETABLEPATH . 'inc/GetPets.php');
  • Hapus: get_header(), get_footer(), div .page-banner, wrapper div .container
  • Sisakan: hanya konten unik (tabel, form, dll.)

4. Definisikan Path Constant ​

Di main plugin file (new-database-table.php):

php
define('NEWDATABASETABLEPATH', plugin_dir_path(__FILE__));

5. Class OurPluginPlaceholderBlock ​

php
class OurPluginPlaceholderBlock {
  function __construct($name) {
    $this->name = $name;
    add_action('init', [$this, 'onInit']);
  }

  function ourRenderCallback($attributes, $content) {
    ob_start();
    require plugin_dir_path(__FILE__) . 'our-blocks/' . $this->name . '.php';
    return ob_get_clean();
  }

  function onInit() {
    wp_register_script(
      $this->name, 
      plugin_dir_url(__FILE__) . "/our-blocks/{$this->name}.js", 
      array('wp-blocks', 'wp-editor')
    );
    
    register_block_type("ourdatabaseplugin/{$this->name}", array(
      'editor_script' => $this->name,
      'render_callback' => [$this, 'ourRenderCallback']
    ));
  }
}

new OurPluginPlaceholderBlock("petslist");

6. Hapus Template Override ​

Hapus baris ini dari plugin utama:

php
add_filter('template_include', array($this, 'loadTemplate'), 99);

7. Gunakan Block di WordPress ​

  • Edit halaman "Pet Adoption" → Insert block → cari "Pets List"
  • Block akan muncul sebagai placeholder di editor, tapi di front-end menampilkan data real

Catatan: Nama di new OurPluginPlaceholderBlock("petslist") harus cocok dengan nama file: petslist.js dan petslist.php. Jika nama berbeda, plugin tidak akan bekerja.

Ringkasan Chapter 26 ​

TopikKonsep Utama
Custom TabledbDelta(), register_activation_hook
CRUD Operations$wpdb->insert(), $wpdb->delete(), $wpdb->get_results()
Security$wpdb->prepare(), sanitize_text_field(), current_user_can()
Dynamic QueriesClass dengan method builder, switch statement
Front-end Formsadmin-post.php, hidden action field, hooks
Block ConversionOurPluginPlaceholderBlock, render_callback, ob_start