WP REST API: Membuat, Memperbarui, dan Menghapus Data

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Pada bagian sebelumnya dari seri ini, kita melihat bagaimana kita dapat menggunakan WP REST API untuk mengambil konten dari server. Kita belajar untuk mengambil konten untuk sumber daya yang berbeda termasuk postingan, meta post, tag, kategori, dll. Ini adalah fitur yang kuat karena konten ini dapat digunakan di mana saja di dalam atau di luar WordPress.

Kita juga belajar tentang request OPTIONS yang mendokumentasikan API-nya sendiri dengan daftar semua route, endpoint, dan masing-masing argumen. Ini mengurangi kebutuhan untuk mengandalkan dokumentasi eksternal untuk API-nya dan memungkinkan perubahan untuk ditemukan agak cepat jika API telah diperbarui atau diubah.

Setelah melihat fitur ini, pada tutorial saat ini, kita sekarang akan memfokuskan perhatian kita pada tiga operasi CRUD lainnya, yaitu membuat, memperbarui, dan menghapus data menggunakan WP REST API.

Pada tutorial ini, kita akan:

menganalisa sumber daya yang mendukung metode create, update, dan delete
belajar untuk untuk membuat, memperbarui, dan menghapus sumber daya
mencari cara untuk mengirim data bersama request untuk membuat suatu sumber daya
menganalisa respon server dan kode respon yang berbeda

Jadi mari kita mulai dengan menganalisa sumber daya yang mendukung metode create, update, dan delete menggunakan WP REST API.

Mengecek Metode Create, Update, dan Delete di Route

Sebelum kita menyelam langsung ke dalam untuk membuat dan memperbarui data dengan WP REST API, kita perlu menganalisa route mana yang mendukung metode pembuatan dan pembaruan. Kita melakukan ini dengan memeriksa route dan properti methods di endpoint-nya. Ini dapat dilakukan dengan mengirimkan request OPTIONS yang terpisah untuk masing-masing route, tetapi yang lebih mudah adalah untuk mengirim request GET ke route indeks /wp-json seperti yang kita lakukan pada bagian sebelumnya dari seri ini.

Mengirimkan request GET ke route /wp-json mengembalikan sebuah objek yang berisi semua route dan endpoint-nya di properti routes.

Hal ini dalam masing-masing route-nya kita dapat memeriksa jika sumber daya tertentu mendukung metode POST, PUT, dan DELETE. Mari kita mulai dengan menganalisa sumber daya Posts.

Sumber daya Posts memperlihatkan data dengan dua route berikut:

1	/wp/v2/posts
2	/wp/v2/posts/(?P<id>[\d]+)

Route pertama menunjuk ke koleksi objek post, dan properti method-nya adalah sebagai berikut:

1	"methods": [
2	"GET",
3	"POST"
4	],

Properti methods ini menunjukkan bahwa route /posts mendukung metode GET dan POST untuk mengambil dan menciptakan data secara berturut-turut.

Untuk route /posts/(?P<id>[\d]+), yang menunjuk ke suatu sumber daya Posts tunggal, properti methods-nya adalah sebagai berikut:

"methods": [
    "GET",
    "POST",
    "PUT",
    "PATCH",
    "DELETE"
],

Seperti yang dapat dilihat pada kode di atas, route /posts/(?P<id>[\d]+) mendukung metode GET, POST, PUT, PATCH, dan DELETE.

Dengan memeriksa kedua jalur di atas, kita dapat menyimpulkan bahwa route /posts mendukung pengambilan sumberdaya dan pembuatan. Dan route /posts/?P<id>[\d]+) mendukung pengambilan sumberdaya serta pembaruan dan penghapusan. Meskipun itu mendukung metode POST, route ini tidak mendukung penciptaan sumber daya seperti yang akan kita lihat pada contoh di bawah ini.

Oleh karena itu, route menunjuk ke sumber daya yang satu tidak dapat digunakan untuk membuat konten, meskipun mereka mendukung metode POST. Hal ini karena untuk rute ini, metode POST, PUT dan PATCH digunakan untuk memperbarui konten dalam WP REST API.

Untuk mengakhiri bagian ini, maril kita simpulkan konsep-konsep yang telah kita pelajari disini:

Kita dapat memeriksa route mana yang mendukung metode GET, POST, dan DELETE dengan mengirimkan request OPTIONS.
Route yang menunjuk ke satu entitas tidak dapat digunakan untuk membuat konten. Mereka digunakan untuk memperbarui konten, meskipun mereka mendukung metode POST.

Setelah menganalisa route yang berbeda, kita sekarang siap untuk membuat konten menggunakan WP REST API, dan kita akan mulai dengan menjelajahi sumber daya Posts.

Membuat dan Memperbarui suatu Postingan

Mari kita buat postingan dengan mengirimkan request percobaan dari Postman atau HTTP client lainnya. Untuk melakukan ini, jalankan HTTP client-mu dan kirim suatu request POST ke route /posts. Tetapi sebelum itu, perlu diingat bahwa penciptaan sumber daya, penghapusan, dan pembaruan memerlukan otentikasi sebagai seorang pengguna dengan hak edit_posts. Jadi kita akan menggunakan metode otentikasi dasar yang kita pelajari pada bagian kedua dari seri ini.

Pada awalnya, kita mengirim request body yang kosong bersama request untuk tujuan percobaan:

1	$ POST /wp/v2/posts

Server akan mengembalikan error 400 - Bad Request karena argumen yang diperlukan hilang pada request body. Respon berikut akan dikembalikan oleh server:

Respon menyatakan bahwa salah satu content, title, atau excerpt diperlukan untuk menciptakan sebuah objek post. Argumen ini dapat dikirim bersama request dalam request body dengan salah satu dari tiga cara berikut:

Sebagai sebuah objek JSON
Dengan menggunakan form
Sebagai parameter URL

Ini hanya masalah pilihan untuk menggunakan salah satu metode ini, dan nanti kita akan melihatnya lebih dekat pada tutorial ini. Tetapi mari kita sekarang menggunakan metode pertama untuk membuat postingan.

Untuk mengirim argumen sebagai sebuah objek JSON di Postman, beralihlah ke tab Body dan pilih tombol radio raw. Kemudian dari drop-down di sebelah kanan, pilih opsi JSON (application/json). Pada area teks di bawah ini, kamu kemudian dapat menambahkan JSON body.

Saat ini, JSON body ini hanya memiliki satu properti untuk title postingan.

Mengirim request dengan mengklik tombol Send. Jika semuanya berjalan lancar, server akan mengembalikan status 201 - Created dengan objek post yang baru dibuat sebagai respon-nya.

Status default dari postingan yang baru dibuat ini adalah draft. Kita dapat memperbarui status, serta beberapa properti lainnya, dengan mengirimkan request POST, PUT, atau PATCH yang lain. ID dari postingan yang dikembalikan dalam kasus saya adalah 232, jadi saya akan mengirimkan request ke endpoint berikut:

1	$ POST /wp/v2/posts/232

Request body tersebut untuk memperbarui status dan properti content yang terlihat seperti ini:

1	{
2	"status": "publish",
3	"content": "This is the content of the post"
4	}

Setelah mengirim request, server akan mengembalikan status 200 - OK, yang berarti bahwa postingan telah berhasil diperbarui.

Pada contoh di atas, kita menemukan tiga argumen berikut untuk membuat suatu postingan:

title
status
content

Daftar lengkap argumen yang didukung untuk membuat postingan dapat diambil dengan request OPTIONS sederhana sebagaimana berikut:

1	$ OPTIONS /wp/v2/posts

Kita kemudian dapat memeriksa properti args dalam array metode POST.

Setelah kita mempelajari cara membuat dan memperbarui postingan, mari kita lihat beberapa sumber daya yang dapat kita kerjakan.

Membuat dan Memperbarui Meta Post

Pembaruan: Bekerja dengan meta post dan meta page di WP REST API sekarang membutuhkan plugin pengiring yang tersedia di GitHub oleh tim WP REST API.

Meta post dapat dibuat dengan mengirimkan request POST ke route berikut:

1	/wp/v2/posts/(?P<parent_id>[\d]+)/meta

Dimana (?P<parent_id>[\d]+) adalah ID dari postingan induk. Saya akan menggunakan ID dari postingan yang kita buat pada bagian sebelumnya, yang itu adalah 232.

Dengan cara yang sama untuk bagaimana kita mengirim request body untuk membuat objek post, suatu objek JSON yang terdiri dari dua properti yang dapat dikirim untuk membuat meta post. Kedua sifat ini adalah key dan value.

1	{
2	"key": "name",
3	"value": "Bilal"
4	}

Nilai-nilai properti key dan value adalah name dan Bilal berturut-turut.

Kirimkan request dan server akan mengembalikan kode 201 - Created, yang menunjukkan bahwa meta post telah berhasil dibuat. Posting baru dibuat meta objek juga akan dikembalikan dalam respon:

Harap dicatat bahwa pada saat menulis tutorial, WP REST API tidak mendukung nilai-nilai integer untuk membuat meta post. Jika kita mencoba untuk mengirimkan nilai integer dalam objek JSON untuk membuat meta post, suatu kode status 400 - Bad Request akan dikembalikan oleh server.

1	{
2	"key": "value",
3	"value": 12345
4	}

Perhatikan tanda kutip yang hilang di sekitar nilai 12345. Respon yang dikembalikan akan terihat seperti berikut:

Jadi apa pun yang kamu kirim bersama request untuk membuat meta post harus dalam format string.

Metode Pembuatan dan Pembaruan Data

Sejauh ini, pada tutorial ini, kita telah menggunakan format JSON di request body untuk membuat dan memperbarui sumber daya. Mari kita lihat semua opsi yang disediakan WP REST API untuk membuat dan memperbarui data.

Mengirim Data Sebagai Parameter URL

Cara termudah untuk mengirim data bersama request adalah mengirimnya sebagai parameter URL. Pertimbangkan request POST berikut untuk membuat suatu postingan:

1	$ POST /wp/v2/posts?title=the+title&content=this+is+the+content

Permintaan di atas mengirim dua parameter ke server untuk title dan content postingan.

Demikian pula, untuk membuat meta post untuk postingan yang memiliki ID 232, kita menggunakan request POST berikut:

1	$ POST /wp/v2/posts/232/meta?key=name&value=Bilal

Permintaan di atas akan membuat objek meta berikut:

Metode ini yang paling cocok saat parameternya adalah string pendek, seperti pada contoh di atas. Tetapi karena jumlah parameter dan panjang nilainya meningkat, akan menjadi sulit untuk mengelolanya sebagai parameter URL.

Mengirim Data Sebagai Sebuah Objek JSON

Dengan menggunakan metode ini, kita mengambil argumen sebagai pasangan key/value dalam objek JSON untuk meneruskannya bersama request. Sampai sekarang, kita telah menggunakan Postman untuk mengirimkan request ke server. Sekarang kita akan melihat bagaimana kita dapat mengimplementasikan metode ini menggunakan HTML dan jQuery.

Pertimbangkan form sederhana berikut yang terdiri dari tiga field untuk title, status, dan content:

<form name="post-form" id="post-form">
    <label for="title">Title</label>
    <input type="text" name="title" id="title">
    
    <label for="status">Status</label>
    <select name="status" id="status">
      <option value="publish">Publish</option>
    	<option value="draft">Draft</option>
    </select>
    
    <label for="content">Content</label>
    <textarea name="content" id="content"></textarea>
    
    <input type="submit" name="submit" value="Submit">
</form>

Ketika form di atas dikirimkan, kode JavaScript (jQuery) berikut akan dijalankan:

var postForm = $( '#post-form' );

var jsonData = function( form ) {
    var arrData = form.serializeArray(),
        objData = {};
    
    $.each( arrData, function( index, elem ) {
        objData[elem.name] = elem.value;
    });
    
    return JSON.stringify( objData );
};

postForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    $.ajax({
        url: 'https://your-dev-server/wp-json/wp/v2/posts',
        method: 'POST',
        data: jsonData( postForm ),
        crossDomain: true,
        contentType: 'application/json',
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        },
        error: function( error ) {
            console.log( error );
        }
    });
});

Pada penyerahan formulir di atas, kita mengirimkan suatu request AJAX ke route /wp/v2/posts. Metode jsonData() menerima instance jQuery dari form HTML dan mengonversi datanya ke dalam format JSON. Data JSON ini kemudian digunakan dalam properti data pada metode $.ajax(). Selain itu, kita mengatur tipe konten ke application/json dengan menggunakan properti contentType.

Sebelum mengirimkan permintaan, kita menetapkan header untuk menyertakan header Authorization untuk menggunakan metode otentikasi dasar. Kita telah belajar untuk mengatur dan menggunakan metode otentikasi dasar di bagian kedua dari seri ini.

Akhirnya, request dikirim ke route /wp/v2/posts, dan suatu postingan baru dibuat. Objek postingab yang baru dibuat ini dikembalikan oleh server sebagai respon dan kita cukup mencatatnya ke konsol di dalam metode success().

Contoh di atas menunjukkan penggunaan format JSON untuk mengirim data bersama request. Sumber objek JSON ini bisa berupa apa saja selain form HTML, tergantung pada arsitektur aplikasimu.

Harap diperhatikan bahwa agar kode di atas dapat berfungsi dengan benar, kamu mungkin perlu mengatur field header Access-Control-Allow-Headers untuk menyertakan nilai Authorization dan Content-Type. Ini dapat dilakukan dengan menambahkan kode berikut di file .htaccess WordPress-mu:

1	Header set Access-Control-Allow-Headers "Content-Type, Authorization"

Mari sekarang lihat pengiriman data melalui form HTML.

Mengirim Data Menggunakan Form

Cara terakhir mengirim data bersama request adalah dengan menggunakan form HTML. Form ini seharusnya berisi field dengan atribut name. Atribut name berfungsi sebagai penamaan argumen seperti title, status, content, dll. Nilai-nilai field ini berfungsi sebagai nilai argumen ini.

Kita dapat menggunakan form HTML yang sama yang dibuat pada contoh sebelumnya, dan kemudian menggunakan kode berikut untuk membuat postingan baru:

var postForm = $( '#post-form' );

postForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    $.ajax({
        url: 'http://your-dev-server/wp-json/wp/v2/posts',
        method: 'POST',
        data: postForm.serialize(),
        crossDomain: true,
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        }
    });
});

Kode di atas sama dengan contoh sebelumnya, kecuali kita menghapus metode jsonData() dan kita sekarang mengirim data form dalam format string menggunakan metode serialize() jQuery. Kode jQuery di atas menggunakan tipe konten application/x-www-form-urlencoded default yang mengirimkan data dalam bentuk string yang sangat besar dengan argumen yang dipisahkan oleh tanda & dan nilai-nilainya diberikan menggunakan tanda =. Ini agak menyerupai pengiriman data sebagai parameter URL, kecuali itu tidak mengekspos data. Ini adalah cara yang efisien untuk mengirim data jika data hanya berisi karakter alfanumerik.

Untuk mengirim data biner (non-alfanumerik), kita menggunakan tipe konten multipart/form-data. Metode ini dapat digunakan jika kita perlu meng-upload gambar atau file lain menggunakan WP REST API.

Untuk mengirim data form di Postman, kamu dapat beralih ke tab Body dan kemudian menggunakan pilihan form-data atau x-www-form-urlencoded.

Argumen kemudian dapat didefinisikan dalam pasangan key/value untuk dikirim bersama request tersebut.

Informasi rinci mengenai berbagai jenis tipe form dapat ditemukan dalam spesifikasi W3C.

Mengunggah Media Menggunakan Tipe Konten `multipart/form-data`

Setelah melihat tipe form x-www-form-urlencoded, yang mengirimkan data dalam bentuk string, mari kita mulai menjelajahi tipe encoding form yang lebih canggih, yaitu multipart/form-data.

Tipe konten multipart/form-data digunakan ketika berhadapan dengan data biner, dan karenanya dapat digunakan untuk mengunggah foto atau jenis file lainnya ke server.

Pada contoh berikut, kita menggunakan form HTML sederhana yang terdiri dari input[type=”file”] dan sedikit jQuery untuk mengunggah gambar ke server menggunakan route /wp/v2/media.

Tinjau form HTML berikut:

<form name="image-form" id="image-form">
    <label for="image-input">File</label>
    <input name="image-input" id="image-input" type="file">
    
    <input type="submit" value="Upload">
</form>

JavaScript berikut akan dijalankan apabila form di atas dikirimkan:

var imageForm = $( '#image-form' ),
    fileInput = $('#file'),
    formData = new FormData();

imageForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    formData.append( 'file', fileInput[0].files[0] );
    
    $.ajax({
        url: 'http://your-dev-server/wp-json/wp/v2/media',
        method: 'POST',
        data: formData,
        crossDomain: true,
        contentType: false,
        processData: false,
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        },
        error: function( error ) {
            console.log( error );
        }
    });
});

Di sini kita pertama kali mendapatkan instance jQuery dari form dan field inputnya. Kemudian kita menginisialisasi suatu objek FormData baru. Antarmuka FormData menyediakan cara untuk membangun suatu set field form dengan pasangan key/value dan menggunakan format yang sama sebagai tipe enconding form multipart/form-data.

Saat form dikirimkan, kita mencegah pengirimannya dengan memanggil metode .preventDefault() pada objek persitiwa. Kita kemudian menambahkan sebuah field baru ke instance formData yang menggunakan metode .append(). Metode .append() menerima dua argumen untuk field name dan value. WP REST API memberlakukan atribut nama field input file untuk file. Itulah sebabnya kita menetapkan argumen pertama — name — untuk menjadi file, dan untuk argumen kedua kita meneruskan objek file blob dengan merujuk ke elemen inputan.

Secara default, data yang diteruskan ke dalam properti data pada metode jQuery.ajax() diolah menjadi string kueri. Karena kita mengunggah file gambar di sini, kita tidak ingin itu terjadi, dan untuk itu kita menetapkan properti processData menjadi false. Kita juga mengatur properti contentType menjadi false untuk mencegah application/x-www-form-urlencoded dikirim sebagai tipe konten default ke server.

Dan terakhir, kita menetapkan header Auhorization untuk mengautentikasi diri kita sebagai pengguna dengan hak khusus edit_posts.

Pastikan untuk menjalankan script di atas dari dalam server. Jika semua berjalan dengan baik dan file telah diunggah, server akan mengembalikan objek media yang baru dibuat.

Gambar ini kemudian dapat ditetapkan sebagai gambar utama untuk sebuah postingan.

Setelah mempelajari cara-cara untuk membuat dan memperbarui sumber daya menggunakan WP REST API, mari kita lihat bagaimana cara menghapusnya.

Menghapus Data Dengan WP REST API

Menghapus data dengan WP REST API adalah sesederhana mengirim request DELETE ke sumber daya tertentu.

Jika kita perlu menghapus postingan yang memiliki ID 10, kita mengirim request DELETE berikut:

1	$ DELETE /wp/v2/posts/10

Ini akan memindahkan postingan ke tempat sampah tetapi tidak akan menghapusnya secara permanen. Untuk menghapus postingan secara permanen, kita menggunakan argumen force:

1	$ DELETE /wp/v2/posts/10?force=true

Perhatikan bahwa argumen force diperlukan saat menghapus sumber daya yang tidak mendukung pembersihan. Contoh sumber daya seperti itu adalah meta dan media.

Karena itu, kita sekarang dapat mengakhiri bagian saat ini dari seri ini.

Apa Selanjutnya?

Dalam tutorial panjang ini, kita melihat pembuatan, pembaruan, dan penghapusan berbagai jenis sumber daya menggunakan WP REST API. Kita belajar tentang berbagai cara untuk mengirim data bersamaan request, termasuk mengirim data sebagai parameter URL, dalam format JSON, dan dengan menggunakan form. Di akhir tutorial, kita belajar tentang menghapus sumber daya dengan mengirimkan request DELETE.

Pada seri berikutnya dan bagian akhir dari seri ini, kita akan belajar tentang struktur internal WP REST API dan class-class-nya. Kita juga akan belajar untuk memperluas API untuk mengubah respons server. Sampai jumpa di bagian selanjutnya dari seri ini—nantikanlah ...