Cara Memasukkan Data ke Database di WordPress Menggunakan Ajax
Diterbitkan: 2021-12-30
Apakah Anda mencari cara untuk memasukkan data ke dalam database di WordPress menggunakan Ajax? Baca terus, karena kami akan membagikan langkah-langkah sederhana yang perlu Anda ikuti untuk mencapai ini.
Penting untuk dicatat bahwa Anda memerlukan beberapa keterampilan pengkodean agar Anda dapat menerapkan solusi ini. Namun, kami akan mencoba menjelaskan setiap langkah secara rinci untuk menjelaskan bagaimana Anda dapat menerapkan solusi di situs WordPress Anda.
Ajax berarti mengirim data ke database atau server, tanpa memuat ulang halaman. Ini memastikan bahwa pengunjung tidak meninggalkan situs web Anda atau halaman saat ini. Selain itu, menghemat banyak waktu terutama saat mengisi formulir besar.
Mari kita langsung ke dalamnya.
Ringkasan
- Buat Formulir
- Ambil semua Data Formulir Menggunakan JQuery dan Kirim Data Melalui Ajax
- Ambil dan Sisipkan Data ke dalam Basis Data
Buat Formulir
Langkah pertama adalah membuat formulir. Saat mengirimkan formulir melalui permintaan Ajax di WordPress, Anda dapat mengirim data melalui Ajax dan mencapai fungsi di dalam tema Anda melalui URL admin_url('admin-ajax.php'); untuk mencapai admin dengan aman.
Anda dapat mempelajari lebih lanjut tentang URL ini di dokumentasi Ajax yang disediakan oleh WordPress.
Untuk membuat formulir, salin dan tempel kode ini di tempat Anda ingin menampilkannya. Anda dapat menampilkannya di file index.php, single.php, page.php, atau bahkan sidebar.php.
<div class="container">
<h1>WordPress AJAX Insert Post Demo</h1>
<form id="enquiry_email_form" action="#" method="POST" data-url="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data">
<div class="form-group">
<label for="">Enter Title</label>
<input type="text" class="form-control" name="post_title" id="post_title" placeholder="Enter Title" />
</div>
<div class="form-group">
<label for="">Enter Description</label>
<textarea name="post_description" id="post_description" cols="30" rows="10" class="form-control" placeholder="Enter Post Description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-pencil"></i> Submit</button>
</div>
</form>
</div>
Ambil semua Data Formulir Menggunakan JQuery dan Kirim Data melalui Ajax
Di bagian ini, kita akan menggunakan jQuery untuk mencapai hasilnya. Atau, Anda juga dapat menggunakan JavaScript vanilla untuk mencapai hasil yang sama.
Sebelum Anda melanjutkan, ingatlah untuk mencatat variabel aksi di dalam objek data di dalam fungsi $.ajax(). Ini karena kita akan menggunakan fungsi di dalam fungsi Ajax.
$("#enquiry_email_form").on("submit", function (event) {
event.preventDefault();
var form= $(this);
var ajaxurl = form.data("url");
var detail_info = {
post_title: form.find("#post_title").val(),
post_description: form.find("#post_description").val()
}
if(detail_info.post_title === "" || detail_info.post_description === "") {
alert("Fields cannot be blank");
return;
}
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
post_details : detail_info,
action: 'save_post_details_form' // this is going to be used inside wordpress functions.php
},
error: function(error) {
alert("Insert Failed" + error);
},
success: function(response) {
alert("Insert Success" + response);
}
});
})
Kode di atas memastikan bahwa data dikirim ke Ajax, setelah Anda mengklik tombol kirim. Kita perlu mengambil nilai di dalam functions.php tema menggunakan fungsi ajax WordPress.
Ambil dan Sisipkan Data ke dalam Basis Data
Pertama, mari kita tulis fungsi WordPress Ajax untuk mengambil data dan memasukkannya ke dalam database.
//Saving Ajax Data
add_action('wp_ajax_nopriv_save_post_details_form','save_enquiry_form_action');
String dalam kode di atas terdiri dari dua bagian utama. Mereka adalah nopriv dan save_post_details_form.
Bagian nopriv berarti Ajax akan gagal jika pengguna masuk. Namun, jika pengguna tidak masuk, pemicu Ajax berfungsi.
save_post_details_form adalah yang kita tulis pada kode JavaScript di dalam $.ajax() di objek data. Perlu disebutkan bahwa fungsi tersebut tidak akan berfungsi jika tidak dicocokkan dengan benar.
Argumen lain dalam fungsi add_action adalah nama fungsi untuk mengambil data dan melakukan apa pun yang kita inginkan.
Langkah terakhir adalah mengembalikan tindakan benar atau salah tergantung pada hasilnya, dan menampilkannya di ujung depan.
function save_enquiry_form_action() {
$post_title = $_POST['post_details']['post_title'];
$post_description = $_POST['post_details']['post_description'];
$args = [
'post_title'=> $post_title,
'post_content'=>$post_description,
'post_status'=> 'publish',
'post_type'=>post',
'post_date'=> get_the_date()
];
$is_post_inserted = wp_insert_post($args);
if($is_post_inserted) {
return "success";
} else {
return "failed";
}
}
Penting untuk dicatat bahwa Anda dapat menyesuaikan pesan untuk menampilkan output yang berbeda.
Kesimpulan
Dalam posting singkat ini, kami telah membagikan bagaimana Anda dapat memasukkan data dalam database di WordPress menggunakan Ajax. Kondisi 'jika lain' di bagian terakhir akan melakukan trik di dalam Ajax dan Anda dapat membuat pesan hasil lebih deskriptif.
Jika Anda tidak dapat menerapkan solusi ini, jangan ragu untuk menghubungi kami. Jika Anda membuat kesalahan, Anda dapat merusak situs Anda.
Kami harap postingan ini membantu Anda mempelajari cara mengirimkan data ke database tanpa memuat ulang halaman.
Artikel Serupa
- Cara Mendaftarkan Sidebars WordPress dengan Foreach loop
- Cara Menampilkan Nama Kategori di WordPress Menggunakan Contoh Praktis
- Cara Mendapatkan Informasi Pengguna yang Masuk di WordPress
- Cara Membuat Bidang Kotak Centang di Halaman Checkout WooCommerce