Published on

Best Practice Menggunakan admin-ajax.php di WordPress

Authors

Introduction

Hai, teman-teman wp dev! Kalian pasti sudah nggak asing lagi dengan AJAX di WordPress, kan? Nah, di artikel kali ini, kita akan bahas tentang penggunaan admin-ajax.php dan best practice-nya. Yuk, kita mulai!

Sebelum mulai, Kalian bisa download template yang sudah saya buat untuk bahan belajar atau implementasi. Theme ini dibuat menggunakan Tailwind dan Daisy UI.

Repo: https://github.com/apradipta10/gagapress-daisy

Apa itu admin ajax?

admin-ajax.php adalah salah satu endpoint di WordPress yang digunakan untuk menangani request AJAX. Endpoint ini biasanya digunakan untuk melakukan operasi yang melibatkan backend tanpa harus me-refresh halaman. Dengan kata lain, admin-ajax.php memungkinkan kita untuk membuat pengalaman pengguna yang lebih dinamis dan responsif.

Admin ajax vs REST API

Sebelum masuk ke tutorial, ada baiknya kita pahami dulu perbedaan antara admin-ajax.php dan REST API. Keduanya bisa digunakan untuk komunikasi antara frontend dan backend, tapi ada beberapa perbedaan mendasar:

  • admin-ajax.php: Mudah digunakan dan diintegrasikan dengan WordPress hooks, ideal untuk tugas-tugas sederhana dan operasi admin.
  • REST API: Lebih fleksibel dan scalable, cocok untuk aplikasi yang membutuhkan integrasi dengan sistem eksternal atau aplikasi kompleks.

Pilihan antara admin-ajax.php dan REST API tergantung pada kebutuhan proyek kalian. Untuk tugas-tugas sederhana atau operasi yang hanya melibatkan backend WordPress, admin-ajax.php bisa menjadi pilihan yang tepat.

Tutorial sederhana penggunaan admin ajax

Berikut adalah contoh sederhana penggunaan admin-ajax.php di WordPress. Kita akan membuat sebuah request AJAX untuk menampilkan pesan dari backend.

Langkah 1: Tambahkan JavaScript di frontend

Pertama, kita perlu menambahkan kode JavaScript untuk mengirim request AJAX. Tambahkan kode berikut di file JavaScript kalian:

jQuery(document).ready(function($) {
    $('#my-button').on('click', function() {
        $.ajax({
            url: ajaxurl, // ajaxurl sudah otomatis disediakan oleh WordPress di admin area
            type: 'POST',
            data: {
                action: 'my_ajax_action',
                message: 'Hello, World!'
            },
            success: function(response) {
                alert('Response from server: ' + response);
            }
        });
    });
});

Langkah 2: Daftarkan aksi di functions.php

Selanjutnya, kita perlu mendefinisikan aksi yang akan dijalankan di backend. Tambahkan kode berikut di functions.php:

function my_ajax_handler() {
    if (isset($_POST['message'])) {
        echo esc_html($_POST['message']);
    }
    wp_die(); // wajib memanggil wp_die() untuk mengakhiri AJAX request
}
add_action('wp_ajax_my_ajax_action', 'my_ajax_handler'); // untuk user yang sudah login
add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_handler'); // untuk user yang belum login

Langkah 3: Tambahkan HTML

Terakhir, tambahkan HTML berikut di template kalian:

<button id="my-button">Kirim AJAX Request</button>

Best practice

Nah, sekarang kita masuk ke best practice dalam penggunaan admin-ajax.php:

1. Gunakan Nonce untuk Keamanan: Selalu gunakan nonce untuk memverifikasi request dan mencegah CSRF. Contoh:

function my_ajax_handler() {
    check_ajax_referer('my_nonce', 'security'); //fokus inline code ini

    if (isset($_POST['message'])) {
        echo esc_html($_POST['message']);
    }
    wp_die(); //pastikan ada wp_die() diakhir
}

2. Validasi dan Sanitasi Data: Selalu validasi dan sanitasi data yang diterima dari frontend sebelum digunakan.

if (isset($_POST['message'])) {
    $message = sanitize_text_field($_POST['message']); 
//sanitize_text_field() validasi dan sanitasi data yang diterima dari frontend
    echo esc_html($message);
}

3. Gunakan wp_die(): Pastikan selalu memanggil wp_die() di akhir fungsi AJAX untuk menghentikan eksekusi script.

4. Handle Error dengan Baik: Berikan respon yang jelas saat terjadi error agar mudah di-debug.

if (!isset($_POST['message'])) {
    wp_send_json_error('Message tidak ditemukan');
} else {
    wp_send_json_success('Request berhasil');
}

5. Optimalkan Kinerja: Hindari melakukan operasi berat di dalam fungsi AJAX untuk menjaga kinerja server tetap optimal.

Untuk penjelasan lengkap mengenai tips dan best practice admin-ajax sudah saya buatkan videonya, bisa kalian lihat di video Youtube berikut.

Kesimpulan

Menggunakan admin-ajax.php di WordPress bisa sangat membantu untuk membuat aplikasi yang dinamis dan responsif. Dengan mengikuti best practice seperti penggunaan nonce, validasi data, dan handle error dengan baik, kalian bisa membuat aplikasi yang lebih aman dan efisien. Semoga artikel ini bermanfaat dan selamat mencoba!