[API] Cách tạo Custom Api Endpoint Post Request trên WordPress (ok)

https://wolfactive.dev/cach-tao-custom-api-endpoint-post-request-tren-wordpress/?fbclid=IwAR2LSEt2uZOjhmBox3CApZjSdvZVy-gVsJr4uT0Ry7DAaG2Nd6bEAZUGcgU

Cách tạo Custom Api Endpoint Post Request trên WordPress

Trong bài Cách tạo Custom API Entry Point WordPress mình đã hướng dẫn các bạn tạo mình link api có thể truyền động parameter cũng như là tạo custom paramter trên link api đó. Thì với bài này mình sẽ hướng dẫn về cách tạo Custom Api Endpoint Post Request. Và cách sử dụng fetch của JavaScript để giao tiếp API với POST request. Đồng thời so sánh 2 cái giao tiếp API sử dụng POST request giữa Ajax jQuery với Fetch trong JavaScript. Và với bài hôm nay một là hướng dẫn các bạn các tạo API với POST request, hai là hướng dẫn các bạn cách lưu email data vào database và hiển thị trên admin panel khi submit.

Cách tạo Custom Api Endpoint Post Request

Khai báo API với WordPress

Cũng như các bài tạo custom API trước thì chúng ta sẽ khai báo đường dẫn api với WordPres bằng đoạn code sau:

add_action('rest_api_init','blogSubmitEmail');
function blogSubmitEmail(){
    register_rest_route('blog-api/v1','/save-data',array(
        'methods'   =>  "POST",
        'callback'  =>  'blogSubmitDataToDb',    
    ));
}

Nếu so sánh với bài Cách tạo Custom API Entry Point WordPress thì phần khai báo sẽ ngắn hơn. Do chúng ta không tạo custom paramter nên các viết sẽ ngắn hơn. Đoạn code trên mình đặt method là POST và khi có giao tiếp API với link trên sẽ thực thi lệnh blogSubmitDataToDb. Lúc này link API của bạn sẽ là http://example.com/wp-json/blog-api/v1/save-data

Tạo callback function thực thi

Tiếp tục chúng ta tiến hành tạo callback function để lấy email data khi giao tiếp api:

function blogSubmitEmailDb( $request ) {
    $submit = prefix_blogSubmitDB();
    return rest_ensure_response($submit);
}
function prefix_blogSubmitDB() {    
    $contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
    if ($contentType === "application/json") {
      //Receive the RAW post data.
      $content = trim(file_get_contents("php://input"));
      $decoded = json_decode($content, true);
      // setup default result data
      $result = array(            
        'status' => 0,
        'message' => '',
        'error'=>'',           
    );                     
    $checkEmailsubmit = checkEmailSubmit($decoded['email']);
    if(!$checkEmailsubmit){
        $subscriber_id =  wp_insert_post( 
            array(
                'post_type'=>'data_email',
                'post_title'=> explode("@",$decoded['email'])[0],
                'post_status'=>'publish',
            ), 
            true
        );
        // add/update custom meta data
        update_field('email_data',$decoded['email'], $subscriber_id);
        $result['message'] = "Đăng ký thành công";
    }else{
        $result['message'] = "Email này đã tồn tại";
    } 
  }
  // return result as json       
  email_return_json($result);   
}

Đoạn code này hơi dài mình sẽ giải thích từ từ, tuy nhiên chưa xong đâu nhé 😀 . Hàm function đầu tiên cũng không khác mấy so với bài trước chỉ là không có paramter truyền vào do ở đây chúng ta lấy dữ liệu theo POST request nên sẽ không có dữ liệu từ parameter để lấy. Tiếp tục chúng ta đến hàm function prefix_blogSubmitDB như các bạn thấy. Nó sẽ rất khác so với cách lấy dữ liệu từ POST request thông thường do mình dùng fetch để giao tiếp API. Nên $_POST[’email’] sẽ không lấy được dữ liệu khi fetch dữ liệu lên. Nên mình sẽ lấy từ $_SERVER[“CONTENT_TYPE”] do minh lúc fetch mình cầu hình :D. Lúc này mình sẽ lấy dữ liệu thông qua $decoded[’email’] với $decoded được lấy từ content trong $_SERVER[“CONTENT_TYPE”]. Tuy nhiên nếu các bạn giao tiếp bằng Ajax jQuery thì các bạn cần cần phần check này:

$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
 if ($contentType === "application/json") {}

Thay vào đó các bạn chỉ cần check và lấy $_POST[’email’] thay thế vào là được. Sau khi lấy dữ liệu thì mình tạo một array result để trả về khi giao tiếp API hoàn tất. Và mình cho $checkEmailsubmit hứng giá trị của hàm check checkEmailSubmit() để check xem email đó đã có trong database hay chưa. Nếu có trong database rồi thì hàm đó sẽ trả về id của email đó.

Tiếp tục mình đặt điều kiện để kiểm tra nếu email đó đã có tồn tại trong database thì message trả về string “Email này đã tồn tại” để thông báo rằng email này đã tồn tại trong hệ thống. Ngược lại khi chưa có thì mình sẽ cho biến $subscriber_id lưu giá trị trả về của hàm wp_insert_post với giá trị trả về là id khởi tạo data của email. Với hàm này email sẽ được lưu bên phần quản lý của email. Khúc này các bạn nên tạo custom post type data_email, và custom field trong post type data_email là email_data. Còn tạo như thế nào thì các bạn tham khảo 2 link sau nhé:

Sau khi khởi tạo và lưu email này tuy nhiên chỉ là lưu title thôi. Nên mình dùng hàm sau để lưu email vào custom field update_field( ’email_data’, $decoded[’email’], $subscriber_id ); .Thế là xong phần lưu dữ liệu vào database. Sau cùng là message trả về string thông bao đăng ký thành công.

Các hàm bổ trợ cho callback function

Sau đây mình tổng hợp lại các hàm bổ trợ:

Hàm kiểm email có tồn tại hay không?

function checkEmailSubmit($email){
    $check_submit = 0;
    $subscriber_query = new WP_Query( 
        array(
            'post_type'     =>  'submit_email',
            'posts_per_page' => 1,
            'meta_key' => 'email_data',
            'meta_value' => $email,
        )
    );  
    // IF the subscriber exists...
    if( $subscriber_query->have_posts() ):    
        // get the subscriber_id
        $subscriber_query->the_post();
        $check_submit = get_the_ID();        
    endif;
    return $check_submit;
}

Hàm chuyển array thành chuổi json trả về khi giao tiếp api:

function email_return_json( $php_array ) {  
    // encode result as json string
    $json_result = json_encode( $php_array );   
    // return result
    die( $json_result );    
    // stop all other processing 
    exit;
}

Vậy là xong phần tạo custom API và lưu dữ liệu rồi tiếp theo chúng ta cùng đi đến phần giao tiếp api, hiện thị kết quả cho người dùng.

Gọi API ngoài giao diện và hiển thị kết quả

Như bài lần trước mình có để cập tới Giao tiếp API giữa JQuery và Vanilla JavaScript có gì khác nhau? thì với bài này mình sẽ thực hiện giao tiếp với api bằng fetch trong javascript. Trước tiên các bạn khởi tạo lệnh như sau, và tuy nhiên đợt này sẽ khác so với đợt trước.

import {toastShow} from './toast';
let email = document.querySelector('input[name="email"]');
let emailSubmit = document.querySelector('input[id="submitEmail"]');
let toast = document.getElementById("toast");
let protocol = window.location.protocol;
let hostname = window.location.hostname;
let isEmail = false;
let isValidated = false;
/* Check Validate*/
function checkEmailSubmitEmpty(){
        isEmail = false;
        toastShow(toast,"Bạn chưa nhập email","warning");
}
function checkEmailSubmit(){
    var patternSubmitEmail = new RegExp(
        "^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@" +
        "[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$"
    );
    if (!patternSubmitEmail.test(email.value)) {
        toastShow(toast,"Bạn chưa nhập đúng định dạng email","warning");
        isEmail = false;
    }else{
        isEmail = true;
    }
}
function checkValidateForm(){ 
    emailFooter.value ? checkEmailSubmit() : checkEmailSubmitEmpty();
    isEmail == true ? isValidated = true : isValidated = false;
}
/*excute*/
emailFooterSubmit.onclick = () =>{
    checkValidateForm();    
    let apiUrlMail =`${protocol}//${hostname}/wp-json/blog-api/v1/save-data`;       
        fetch(apiUrlMail,{
            method: 'POST',
            mode:    'cors',
            headers: {
            'Content-Type': 'application/json',  // sent request
            'Accept':       'application/json'   // expected data sent back
            },
            body: JSON.stringify({'email': emailFooter.value})
        })
        .then(response => response.json())
        .then(data => {
            if(data.message === "Email này đã tồn tại"){
                toastShow(toast,data.message,"warning");
            } else if(data.message === "Đăng ký thành công"){
                toastShow(toast,data.message,"succeed");
            } 
            return  data;          
        })
        .then(data => data.message === "Đăng ký thành công" ? location.reload() : {})
}
// Execute a function when the user releases a key on the keyboard
email.addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
        event.preventDefault();
      // Trigger the button element with a click
        emailSubmit.click();
    }
});
/*excute*/

Vậy là xong rồi á còn lại là các bạn muốn hiện như thế nào ở ngoài giao diện thôi. Đoạn code trên gồm phần check validate của phần input email và phần gửi dữ liệu. Thông báo tức là phần message của api trả về sẽ hiện trên toast. Và hàm toast mình tự viết chia sẽ ở đoạn sau:

const toastShow = (toast,toastContent,toastClass) =>{
    toast.innerHTML = toastContent;
    toast.classList.add(toastClass);
    setTimeout(()=>{ toast.classList.remove(toastClass);toast.innerHTML=""}, 3000);
}
module.exports = {toastShow}

Và sau đây là phần css và html cho toast:

Đoạn code html:

<div id="toast"></div>

Đoạn code css:

/*---Toast---*/
#toast {
    visibility: hidden;
    min-width: 250px;
    height: max-content;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1500;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    font-size: 17px;
  }
  
  #toast.warning {
    visibility: visible;
    background-color: #dc3545;
    -webkit-animation: fadein 0.5s 2.5s;
    animation: fadein 0.5s 2.5s;
  }
  #toast.succeed {
    visibility: visible;
    background-color: #28a745;
    -webkit-animation: fadein 0.5s 2.5s;
    animation: fadein 0.5s 2.5s;
  }
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  /*---Toast---*/

Tổng kết

Và đây là kết quả 😀 . Các bạn có thể test phần submit đăng ký ở dưới footer để trải nghiệm 😀 😀

Tụi mình đã chia sẻ các bạn về cách tạo một Custom Api Endpoint Post Request rồi. Có thắc mắc hay đóng góp gì các bạn hãy inbox vào fanpage tụi mình nhé!!! Tụi mình sẽ phản hồi kịp thời. Cảm ơn các bạn đã theo dõi

https://www.facebook.com/Wolfactiveweb.design.SEO/

Previous[API] Cách tạo Custom API Entry Point WordPress Next[API] Add a custom endpoint to WordPress REST API with Pagination

Last updated 3 years ago