30. Tương tác database với WordPress Meta boxes

Như vậy ở bài Tìm hiểu WordPress Metaboxes thì tôi đã hướng dẫn đầy đủ cách để bạn tạo mới một box nhưng mọi thứ chỉ dừng lại ở việc hiển thị một dòng text chứ không động chạm và tương tác gì tới database cả. Nhưng bạn đừng quá lo vì ngay sau đây tôi sẽ hướng dẫn bạn tạo ra các thành phần form và tiến hành đưa các giá trị được nhập từ textbox vào database, cũng như giới thiệu đến bạn các phương thức hỗ trợ Tương tác database với WordPress Metaboxes.

1/ Tạo mới các phần tử form

Tôi sẽ sử dụng lại plugin của bài trước và cấu trúc của tôi sẽ bổ sung vào folder metaboxes file data.php, file này dùng để xử lý tạo ra các thành phần form.

cau-truc-plugin-kenshin-metaboxes

Nội dung file data.php:

<?php

class Kenshin_Metaboxes_Data {

public function __construct(){

add_action('add_meta_boxes', array($this, 'create'));

}

public function create(){

add_meta_box('ks-mb-data', 'Book Metaboxes', array($this, 'display'), 'post');

}

public function display(){

}

Phương thức display() chính là nơi xử lý code tạo ra các thành phần form. Như vậy ví dụ mà tôi dùng để thực hiện trong bài sẽ bao gồm 3 ô textbox và một textarea dùng để thể hiện tiêu đề sách, giá tiền, tên tác giả, và mô tả quyển sách, và tôi sẽ xử lý code ở phương thức display() như sau.

<?php

class Kenshin_Metaboxes_Data {

public function __construct(){

add_action('add_meta_boxes', array($this, 'create'));

}

public function create(){

add_action('admin_enqueue_scripts', array($this,'add_css_file'));

add_meta_box('ks-mb-data', 'Book Metaboxes', array($this, 'display'), 'post');

}

public function display(){

echo '<div class="ks-mb-data">';

// Phần tử form Book Title

$inputID = '';

$inputValue = '';

$html = '';

$html .= '<label>Title :</label>';

$html .= '<input type="text" name="" id="" value="" size="25" />';

echo $html;

// Phần tử form Book Price

$inputID = '';

$inputValue = '';

$html = '';

$html .= '<label>Price :</label>';

$html .= '<input type="text" name="" id="" value="" size="25" />';

echo $html;

// Phần tử form Book Author

$inputID = '';

$inputValue = '';

$html = '';

$html .= '<label>Author :</label>';

$html .= '<input type="text" name="" value="" size="25" />';

echo $html;

// Phần tử form Book Title

$inputID = '';

$inputValue = '';

$html = '';

$html .= '<label>Infomation :</label>';

$html .= '<textarea name="" id="" rows="6" cols= "50"></textarea>';

echo $html;

echo '</div>';

}

public function add_css_file(){

wp_register_style('ks_mb_data', KENSHIN_METABOXES_CSS_URL . '/mb-data.css', array(),'1.0');

wp_enqueue_style('ks_mb_data');

}

Lúc này để cho Book Metaboxes hoạt động thì bạn phải nạp nó vào file main.php như sau.

<?php

class Kenshin_Metaboxes_Main {

private $_metabox_name = 'ks_metaboxes_option';

private $_metabox_options = array();

public function __construct(){

$metaOptions = array(

'ks-mb-simple' => false,

'ks-mb-data' => true

);

$this->_metabox_options = get_option($this->_metabox_name, $metaOptions);

if ( $this->_metabox_options['ks-mb-simple'] == true) $this->simple();

if ( $this->_metabox_options['ks-mb-data'] == true) $this->data();

}

public function simple(){

require_once KENSHIN_METABOXES_DIR .'/simple.php';

new Kenshin_Metaboxes_Simple();

}

public function data(){

require_once KENSHIN_METABOXES_DIR .'/data.php';

new Kenshin_Metaboxes_Data();

}

Lúc này tôi sẽ tạm thời tắt đi cái Box Simple kia và chỉ cho phép hiển thị mỗi cái Book Metaboxes mà thôi. Lúc này bạn vào vùng Posts và thử tạo mới bài viết, click vào Screen Options và xem kết quả có như hình không ha.

book-metaboxes

Và di chuyển chuột xuống phía dưới thì sẽ thấy một Block mới xuất hiện đó chính là Book Metaboxes.

form-book-metaboxes

2/ Sử dụng phương thức update_post_meta()

Phương thức update_post_meta() có tất cả là 4 tham số.

Cú pháp:

1	update_post_meta($post_id, $meta_key, $meta_value, $prev_value);

Tham số:

· $post_id: ID của bài viết

· $meta_key: Tương ứng với giá trị nằm trong filed meta_key của table wp_postmeta.

· $meta_value: Tương ứng với giá trị nằm trong field meta_value của table wp_postmeta.

· $prev_meta: Là giá trị cũ của custom field mà bạn muốn thay đổi, tức là các giá trị ở ô textbox.

Lúc này tôi cần phải đặt tên cho các phần tử textbox như sau, khởi tạo một biến toàn cục để chứa tiển tố và nối với ID của phần tử form là $_create_id = ‘ks-mb-data-‘.

<?php

class Kenshin_Metaboxes_Data {

private $_create_id = 'ks-mb-data-';

private $_meta_key = '_ks_mb_data_';

public function __construct(){

add_action('add_meta_boxes', array($this, 'create'));

add_action('save_post', array($this, 'save'));

}

public function create(){

add_action('admin_enqueue_scripts', array($this,'add_css_file'));

add_meta_box('ks-mb-data', 'Book Metaboxes', array($this, 'display'), 'post');

}

public function display(){

echo '<div class="ks-mb-data">';

// Phần tử form Book Title

$inputID = $this->_create_id . 'title';

$inputValue = '';

$html = '';

$html .= '<label>Title :</label>';

$html .= '<input type="text" name= "'.$inputID.'" id="'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Price

$inputID = $this->_create_id . 'price';

$inputValue = '';

$html = '';

$html .= '<label>Price :</label>';

$html .= '<input type="text" name = "'.$inputID.'" id = "'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Author

$inputID = $this->_create_id . 'author';

$inputValue = '';

$html = '';

$html .= '<label>Author :</label>';

$html .= '<input type="text" name = "'.$inputID.'" id = "'.$inputID.'" size="25" />';

echo $html;

// Phần tử form Book Info

$inputID = $this->_create_id . 'info';

$inputValue = '';

$html = '';

$html .= '<label>Infomation :</label>';

$html .= '<textarea name = "'.$inputID.'" id = "'.$inputID.'" rows="6" cols= "50"></textarea>';

echo $html;

echo '</div>';

}

public function add_css_file(){

wp_register_style('ks_mb_data', KENSHIN_METABOXES_CSS_URL . '/mb-data.css', array(),'1.0');

wp_enqueue_style('ks_mb_data');

}

Bạn F12 xem coi name & id của form có đúng như sự kỳ vọng của bạn không.

html-form-book-metaboxes

Phần form xem như tạm ổn lúc này tôi sẽ giới thiệu bạn một Hook Action mới đó là save_post. Hook này được gọi khi chúng ta bấm nút publish bài viết để lưu dữ liệu bài viết vào database. Để kiểm chứng thì tôi sẽ tạo thêm phương thức là save() và phương thức này sẽ được nạp vào Hook save_post.

<?php

class Kenshin_Metaboxes_Data {

private $_create_id = 'ks-mb-data-';

public function __construct(){

add_action('add_meta_boxes', array($this, 'create'));

add_action('save_post', array($this, 'save'));

}

public function save($post_id){

echo '<br />' . __METHOD__;

}

public function create(){

add_action('admin_enqueue_scripts', array($this,'add_css_file'));

add_meta_box('ks-mb-data', 'Book Metaboxes', array($this, 'display'), 'post');

}

public function display(){

echo '<div class="ks-mb-data">';

// Phần tử form Book Title

$inputID = $this->_create_id . 'title';

$inputValue = '';

$html = '';

$html .= '<label>Title :</label>';

$html .= '<input type="text" name= "'.$inputID.'" id="'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Price

$inputID = $this->_create_id . 'price';

$inputValue = '';

$html = '';

$html .= '<label>Price :</label>';

$html .= '<input type="text" name = "'.$inputID.'" id = "'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Author

$inputID = $this->_create_id . 'author';

$inputValue = '';

$html = '';

$html .= '<label>Author :</label>';

$html .= '<input type="text" name = "'.$inputID.'" value = "'.$inputID.'" size="25" />';

echo $html;

// Phần tử form Book Info

$inputID = $this->_create_id . 'info';

$inputValue = '';

$html = '';

$html .= '<label>Infomation :</label>';

$html .= '<textarea name = "'.$inputID.'" id = "'.$inputID.'" rows="6" cols= "50"></textarea>';

echo $html;

echo '</div>';

}

public function add_css_file(){

wp_register_style('ks_mb_data', KENSHIN_METABOXES_CSS_URL . '/mb-data.css', array(),'1.0');

wp_enqueue_style('ks_mb_data');

}

Kết quả trình duyệt sẽ in ra dòng Kenshin_Metaboxes_Data::save tức là bạn đang gọi tới phương thức này. Lúc này bạn thử in $post_id bằng hàm print_r() xem kết quả trả về là gì, là một con số và đó chính là ID bài viết của bạn, mỗi lần F5 con số đó sẽ tăng lên 1 đơn vị, tức là sau mỗi cú F5 thì bạn đã thêm mới một bài viết vào table wp_posts rồi đấy, và các bài viết ấy ở trạng thái chờ và không publish ra trang chủ. Bạn hãy tự in biến ra và tự kiểm tra nhé.

Nếu bạn từng học qua Lập trình PHP thì chắc hẳn còn nhớ thao tác thêm mới dữ liệu vào database thì sẽ phải sử dụng biến môi trường $_POST để gán vào tên phần tử của các textbox và trong ví dụ này cũng không ngoại lệ.

Và đồng thời tôi cũng khởi tạo thêm biến toàn cục $_meta_key = ‘_ks_mb_data’ cho giống với kiểu dữ liệu nằm trong table wp_postmeta.

<?php

class Kenshin_Metaboxes_Data {

private $_create_id = 'ks-mb-data-';

private $_meta_key = '_ks_mb_data_';

public function __construct(){

add_action('add_meta_boxes', array($this, 'create'));

add_action('save_post', array($this, 'save'));

}

public function save($post_id){

// Có giá trị tương đương với $_POST

$postVal = $_POST;

// Đưa dữ liệu vào table wp_postmeta

update_post_meta($post_id, $this->_meta_key . 'title',

sanitize_text_field($postVal[$this->_create_id . 'title']));

update_post_meta($post_id, $this->_meta_key . 'price',

sanitize_text_field($postVal[$this->_create_id . 'price']));

update_post_meta($post_id, $this->_meta_key . 'author',

sanitize_text_field($postVal[$this->_create_id . 'author']));

update_post_meta($post_id, $this->_meta_key . 'info',

strip_tags($postVal[$this->_create_id . 'info']));

}

public function create(){

add_action('admin_enqueue_scripts', array($this,'add_css_file'));

add_meta_box('ks-mb-data', 'Book Metaboxes', array($this, 'display'), 'post');

}

public function display(){

echo '<div class="ks-mb-data">';

// Phần tử form Book Title

$inputID = $this->_create_id . 'title';

$inputValue = '';

$html = '';

$html .= '<label>Title :</label>';

$html .= '<input type="text" name= "'.$inputID.'" id="'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Price

$inputID = $this->_create_id . 'price';

$inputValue = '';

$html = '';

$html .= '<label>Price :</label>';

$html .= '<input type="text" name = "'.$inputID.'" id = "'.$inputID.'" value="" size="25" />';

echo $html;

// Phần tử form Book Author

$inputID = $this->_create_id . 'author';

$inputValue = '';

$html = '';

$html .= '<label>Author :</label>';

$html .= '<input type="text" name = "'.$inputID.'" id = "'.$inputID.'" size="25" />';

echo $html;

// Phần tử form Book Info

$inputID = $this->_create_id . 'info';

$inputValue = '';

$html = '';

$html .= '<label>Infomation :</label>';

$html .= '<textarea name = "'.$inputID.'" id = "'.$inputID.'" rows="6" cols= "50"></textarea>';

echo $html;

echo '</div>';

}

public function add_css_file(){

wp_register_style('ks_mb_data', KENSHIN_METABOXES_CSS_URL . '/mb-data.css', array(),'1.0');

wp_enqueue_style('ks_mb_data');

}

Phương thức sanitize_text_field() là một phương thức đã có sẵn trong WordPress nó giúp bạn lọc sạch các dữ liệu trước khi nạp vào database. các tham số trong phương thức update_post_meta()thì tôi có giải thích ở phía trên rồi nên sẽ không nhắc lại. Bạn nhập liệu vào các ô textbox và nhấn publish, nhớ là điền luôn tên bài viết nha.

Lúc này để kiểm tra thì bạn truy cập vào phpmyadmin và click vào table wp_postmeta để xem kết quả có giống trong hình không nha.

record-in-table-wp-postmeta

Đưa được các giá trị trong textbox vào database rồi vậy thì gọi lại nó hiển thị trong form có được hay không ? câu trả lời là được , lúc này để làm được việc đó thì bạn sẽ phải dùng tới phương thứcget_post_meta().

Phương thức này có 3 tham số, bao gồm ID của bài viết, giá trị của meta_key nằm trong các filed mà bạn muốn lấy ra, và cuối cùng là kiểu dữ liệu muốn lấy nếu để là true thì nó sẽ lấy ra các kiểu dữ liệu ở dạng chuỗi, và tôi có đoạn code như sau.

Để xác định được ID bài viết thì bạn cần truyền tham số $post vào phương thức display().

<?php
class Kenshin_Metaboxes_Data {
  private $_create_id = 'ks-mb-data-';
  private $_meta_key  = '_ks_mb_data_';
  public function __construct() {
    add_action('add_meta_boxes', [$this, 'create']);
    add_action('save_post', [$this, 'save']);
  }
  public function save($post_id) {
    // Có giá trị tương đương với $_POST
    $postVal = $_POST;
    // Đưa dữ liệu vào table wp_postmeta
    update_post_meta($post_id, $this->_meta_key . 'title',
      sanitize_text_field($postVal[$this->_create_id . 'title']));
    update_post_meta($post_id, $this->_meta_key . 'price',
      sanitize_text_field($postVal[$this->_create_id . 'price']));
    update_post_meta($post_id, $this->_meta_key . 'author',
      sanitize_text_field($postVal[$this->_create_id . 'author']));
    update_post_meta($post_id, $this->_meta_key . 'info',
      strip_tags($postVal[$this->_create_id . 'info']));
  }
  public function create() {
    add_action('admin_enqueue_scripts', [$this, 'add_css_file']);
    add_meta_box('ks-mb-data', 'Book Metaboxes', [$this, 'display'], 'post');
  }
  public function display($post) {
    echo '<div class="ks-mb-data">';
    // Phần tử form Book Title
    $inputID    = $this->_create_id . 'title';
    $inputValue = get_post_meta($post->ID, $this->_meta_key . 'title', true);
    $html       = '';
    $html .= '<label>Title :</label>';
    $html .= '<input type="text" name= "' . $inputID . '" id="' . $inputID . '" value = "' . $inputValue . '" size="25" />';
    echo $html;
    // Phần tử form Book Price
    $inputID    = $this->_create_id . 'price';
    $inputValue = get_post_meta($post->ID, $this->_meta_key . 'price', true);
    $html       = '';
    $html .= '<label>Price :</label>';
    $html .= '<input type="text" name = "' . $inputID . '" id = "' . $inputID . '"  value = "' . $inputValue . '" size="25" />';
    echo $html;
    // Phần tử form Book Author
    $inputID    = $this->_create_id . 'author';
    $inputValue = get_post_meta($post->ID, $this->_meta_key . 'author', true);
    $html       = '';
    $html .= '<label>Author :</label>';
    $html .= '<input type="text" name = "' . $inputID . '" id = "' . $inputID . '" value = "' . $inputValue . '" size="25" />';
    echo $html;
    // Phần tử form Book Info
    $inputID    = $this->_create_id . 'info';
    $inputValue = get_post_meta($post->ID, $this->_meta_key . 'info', true);
    $html       = '';
    $html .= '<label>Infomation :</label>';
    $html .= '<textarea name = "' . $inputID . '" id = "' . $inputID . '" rows="6" cols= "50">' . $inputValue . '</textarea>';
    echo $html;
    echo '</div>';
  }
  public function add_css_file() {
    wp_register_style('ks_mb_data', KENSHIN_METABOXES_CSS_URL . '/mb-data.css', [], '1.0');
    wp_enqueue_style('ks_mb_data');
  }
}

Và đây là kết quả khi tôi edit bất kì bài viết nào thì nó cũng đểu hiển thị Book Metaboxes.

get-value-in-form-book-metaboxes

3/ Lời kết

Đây quả thực là một bài viết có độ khó được gọi là cao vì sử dụng khá nhiều thứ và hơi rối rắm một tí xíu, tuy nhiên tôi cũng đã code và tường minh rất rõ ràng vì thế bạn sẽ không gặp quá nhiều khó khăn khi viết lại code đâu. Hy vọng thông qua bài Tương tác database với WordPress Metaboxes thì bạn có cái nhìn tổng quát hơn về nó, cũng như biết cách tự tạo ra các box theo ý của bạn, ở bài kế tiếp tôi sẽ hướng dẫn bạn hiển thị dữ liệu Book Metaboxes ra ngoài trang chủ.

Series Navigation<< Tìm hiểu WordPress Meta boxes Bảo mật và tối ưu WordPress Meta boxes >>

Nguồn: laptrinhweb.org

Previous29. Hiển thị WordPress Meta boxes ngoài trang chủ.docx Next31. Bảo mật và tối ưu WordPress Meta boxes

Last updated 4 years ago