Custom Form untuk Cek Ongkos Kirim melalui API RajaOngkir

Ingin website WordPress Anda dapat melakukan proses tertentu sesuai keinginan dan kebutuhan bisnis ? Tutorial ini akan memberikan contoh untuk cek ongkos kirim dengan memanfaatkan API dari RajaOngkir.

Sebelum Memulai

Sebelum melangkah lebih jauh ada beberapa hal yang dibutuhkan oleh plugin yang akan kita buat, pastikan Anda sudah menyiapkannya terlebih dahulu. Berikut adalah kebutuhannya:

• Akses SSH ( jika harus remote ) atau Terminal. Beberapa shared hosting memberikan akses SSH seperti Domainesia, Hostinger dan DewaWeb.
• WP CLI <opsional>, silahkan lihat tutorial ini untuk lebih jelasnya.
• Composer, Anda dapat mengunduhnya disini. Jika Anda menggunakan managed WordPress hosting biasanya sudah termasuk WP-CLI, Git dan Composer.
• PHP 5.6 atau yang lebih baru
• API Key RajaOngkir. Silahkan daftar disini untuk mendapatkan API Key. Untuk tutorial ini saya menggunakan paket Starter ( FREE ).

Tips: Baiknya Anda mengikuti tutorial ini pada instalasi lokal (localhost). Jika harus online, pastikan aktivitas koding pada staging environtment.

Menyiapkan Plugin Baru

Silahkan buat plugin baru dengan nama direktori sp-custom-form (atau yang lainnya sesuka hati Anda). Anda dapat menggunakan WP-CLI dengan memberi perintah sebagai berikut:

wp scaffold plugin sp-custom-form

atau dengan membuat manual seperti pada tutorial sebelumnya. Pastikan Anda membuat file sp-custom-form.php sebagai file utama.

Siapkan Library Pendukung

Kita akan menggunakan layanan API dari RajaOngkir, untuk itu kita memerlukan API Key untuk authentication. Sebagai best practice saya menyimpan informasi-informasi penting pada sebuah file .env (dot env). Tujuannya adalah agar file .env tidak saya publikasikan pada git repository. Berikut ini file-file yang saya masukkan dalam .gitignore

.DS_Store
phpcs.xml
phpunit.xml
Thumbs.db
.env
wp-cli.local.yml
node_modules/
*.sql
*.tar.gz
*.zip
vendor/

Untuk membaca file .env kita membutuhkan library bernama phpdotenv, yang dapat diunduh pada repository ini : https://github.com/vlucas/phpdotenv. Untuk pemasangan via Composer adalah sebagai berikut:

cd wp-content/plugins/sp-custom-forms    # pastikan berada pada root direktori plugin kita
composer require vlucas/phpdotenv

Jangan lupa membuat file .env yang dapat Anda isi dengan API Key dari RajaOngkir

Library selanjutnya adalah WP_AJAX, saya membutuhkan library ini dikarenakan untuk mengambil cost ongkir membutuhkan kota asal dan kota tujuan, dimana syarat mendapatkan kota harus menentukan provinsi terlebih dahulu. Disini saya akan menggunakan teknik chained select untuk menentukan kota asal & tujuan.

Anda dapat mengunduh library tersebut pada repository ini: https://github.com/anthonybudd/WP_AJAX lalu pasang menggunakan composer seperti pada gambar dibawah ini.

Menulis Kode Program

Sebelum menulis kode, silahkan buat terlebih dahulu file-filenya. Berikut adalah file-file yang perlu Anda buat:
sp-custom-form.php ( otomatis ter-create jika menggunakan wp scaffold )
sp-class-administrative.php
sp-class-calculate-ongkir.php
views/form-ongkir.php

Dibawah ini adalah source code untuk file sp-custom-form.php

Jika Anda melihat kode ini:

wp_enqueue_style( 'sp-css-grid' );

Itu adalah kode dari tutorial sebelumnya, karena masih dalam project yang sama, maka kita dapat menggunakannya kembali.

Dua file berikut adalah handler untuk Ajax request menggunakan library WP_AJAX. Jika Anda ingin lebih 'native', coba cek tutorial ini.

WordPress sudah menyediakan banyak fungsi untuk developer, diantaranya adalah:

wp_remote_get 
wp_remote_post

Biasanya fungsi-fungsi diatas digunakan untuk mengambil raw Response dari suatu HTTP Request, seperti mengambil data dari Web Services atau RESTful API.

Membuat Form

Untuk membuat form, Anda hanya butuh tag-tag HTML standar yang biasa Anda gunakan untuk membuat formulir yang dapat diinput oleh user pada sebuah aplikasi web. Silahkan buka tutorial form HTML jika belum terbiasa menggunakannya.

Source code lengkapnya dapat dilihat disini: https://github.com/yeriepiscesa/cek-ongkir-sample

Uji Coba Plugin

Aktifkan plugin terlebih dahulu kemudian buat page/post baru, lalu tempelkan shortcode [sp_form_ongkir].

Happy WordPressing 🙂