Latar Belakang
Sebetulnya sudah lama berangan-angan ingin membuat web app menggunakan WordPress. Dan setelah dicari-cari ternyata susah banget nyari tutorial yang kupas tuntas bagaimana membuat web app menggunakan CMS WordPress. Nah, kenapa WordPress? Saya udah nyoba pakai PHP native, Code Igniter, pernah icip diujung lidah aja menggunakan Laravel dan CakePHP tapi waktu dan kesibukan pula yang membuat terhalang untuk fokus dengan belajar dan mainan codingan dunia baru. Dan lagipula karena tiap harinya ketemu dengan WordPress, dan الحَمْدُ لِلّٰهِ pernah buat juga WordPress plugins dan pernah sekali buat theme tapi ya jadinya gak keurus juga dikarenakan kesibukan, akhirnya sekarang malah lupa bagaimana cara maintenancenya, hehehe. Ya, nanti mau coba-coba lagi tuk pluginsnya diupdate kembali, إِنْ شَاءَ اللّٰهُ.
Sebelumnya saya sudah membagikan tips n trick WordPress yang mana kumpulan code yang suka saya pakai ketika sedang bermain-main dengan CMS WordPress.
Nah, sebetulnya sih dah lama juga mau buat web app pakai WordPress, ya, kadang suka mikir, bisa gak yah, hehehe. Soalnya kan saya bukan programmer asli, cuma programmer copy paste atau modifikasi, hehehe. Dan sebetulnya sih banyak juga ide-ide project yang akhirnya karena pengen instan dan akhirnya bertanya kembali ke hati, bisa gak yah bikin web app menggunakan WordPress? Dan karena ragu, ya akhirnya selalu saja kandas. Apalagi kalau searching, gak ada tuh yang bahas gimana mengkonversi atau merubah WordPress menjadi web app, yang ada malah teori dan penjabaran dan terus penjabaran begini begitu dan contoh-contohnya tapi gak pernah dikasih tahu bagaimana caranya.
Tapi, kali ini kita seriusin yah, hehehe. Makanya sebagai memorial dibuat sekalian lah postingannya dan semoga juga bisa bermanfaat bagi yang lainnya atau setidaknya memberikan inspirasi, hehehe.
Web App Yang Akan Dibuat
Baik, web app yang akan saya contohkan disini adalah web app sederhana yang menggunakan WordPress, yaitu membuat output JSON tanggal dengan format hijriyah yang bisa digunakan oleh teman-teman media yang nantinya bisa digunakan sebaga data source di Vmix. Penanggalan hijriyah ini nantinya bisa kita atur melalui backend atau dashboard WordPress dari nama hari dan bulan masehi dan hijriyah.
Dan nantinya kita akan modifikasi dashboardnya, mmmm istilahnya white label berdasarkan role capabilitynya. Menu dan modifikasinya akan berpengaruh untuk user yang bukan Administrator.
Basic Concept
Salah satu keuntungan menggunakan WordPress untuk web app adalah sudah disediakannya backend atau admin dashboard dan frontend, karena kalau kita menggunakan PHP framework lainnya seperti laravel, CI, CakePHP dll kita harus buat terlebih dahulu backend dan frontendnya. Mmmmm, mungkin saya aja kali yah yang gak tahu kalau sebetulnya mereka punya juga dan tinggal generate menggunakan satu command aja. Tapi kalau WordPress sudah include keduanya, backend dan frontend. Nah, backend untuk megelola data input agar lebih mudah yang nantinya akan kita sajikan untuk user, baik untuk internal atau digunakan untuk public dan pastinya akan kita sesuaikan dengan role capabilitynya masing-masing dan frontend adalah output atau yang kita sajikan untuk public. Mmmmm…. mohon maaf kalau saya mendeskripsikannya kurang tepat karena saya mendeskripsikannya sesuai dengan pemahaman saya yang sederhana ini.
WordPress mengatur frontendnya menggunakan theme, artinya disinilah kita akan menggunakan struktur theme sebagai komponen yang kita pakai sebagai output tapi tanpa menggunakan feature theme seperti wp_head(), wp_footer() dan fungsi lainnya.
Persiapan
- WordPress fresh install.
- Text editor. Saya menggunakan Atom.
- FTP account untuk mengakses WordPress files.
Kita akan melakukan perubahan dasar tapi sebetulnya ini hanya optional saja, tidak dilakukan juga tidak mengapa karena nantinya toh yang akan kita sajikan untuk public tidak berlandaskan pada settingan perubahan dasar ini.
General Settings
Reading – Block Search Engine
Discussion – Matikan Fungsi Komentar dan Avatars
Untuk mematikan fungsi komentar tinggal uncheck (matikan cek lis) pada Allow people to submit comments on new posts.
Untuk mematikan fungsi avatar uncheck avatars yang settingannya berada di paling bawah di menu discussion.
Hapus Semua Posts, Pages dan Plugins
Permalinks
Tapi kalau settingan permalinks sepertinya harus menggunakan %postname% agar lebih indah dan mudah tuk diingat, tapi ya ini bisa juga sih disesuaikan dengan selera masing-masing maunya seperti apa.
Membuat Theme WordPress
Seperti yang sudah saya bahas diakhir Basic Concept, bahwa WordPress mengatur frontendnya menggunakan theme, artinya langkah awal kita untuk membuat web app menggunakan WordPress adalah membuat struktur theme. Biasanya theme default yang terinstall ada 3 saat pertama kali kita install WordPress, sisakan satu saja theme default sebagai fallback kalau ada masalah dan sisanya hapus saja. Kemudian kita akan membuat theme baru melalui text editor Atom dengan akses ftp account.
Buat folder yang nantinya akan difungsikan sebagai theme dengan nama tanpa spasi dan kalau bisa dengan huruf kecil semua. Saya contohkan dengan membuat folder dengan nama kloningspoon. Setelah itu kita buat 2 file, yaitu index.php dan style.css yang merupakan persyaratan mutlak template struktur WordPress. Untuk index.php tidak diisi apa-apa karena kita jadikan fallback kalau ada masalah dengan struktur theme. Kemudian style.css kita isi minimal seperti berikut:
Setelah itu, kita aktifkan theme yang baru saja kita buat. Setelah diaktifkan jangan kaget kalau kita buka halaman web kita menjadi putih kosong, hal ini karena kita tidak isi apa-apa index.php nya.
WordPress Template Hierarchy
Baik, sekarang kita mulai babak pembuatan aplikasinya. Jadi, kita akan memanfaatkan dari struktur template WordPress untuk page template. Pada dokumentasi WordPress Developer Resources dijelaskan bahwa kita bisa memanggil page yang sudah kita buat dengan membuat template file disertakan dengan id page tersebut.
Nah, disini peran pentingnya menggunakan permalinks menjadi %postname% agar page yang kita buat mengikuti pada slug yang sudah kita atur untuk page tersebut.
Kita akan buat page dengan nama Hijriyah dan menggunakan slug hijriyah dan kemudian kita akan membuat template file page disertakan dengan ID page tersebut. Kita tidak perlu mengisi apapun didalamnya karena kita akan mengatur output dari page tersebut melalui template file yang kita buat.
Dan untuk melihat ID dari page bisa dengan 2 cara, bisa melalui statusbar dengan terlebih dahulu kita hover mouse ke link page yang kita tuju.
Atau dengan melihat page ID melalui address bar pada browser.
OK. Membuat halaman yang nantinya akan kita jadikan output web app kita sudah dibuat, berdasarkan dari slug yang sudah kita buat maka halaman yang baru saja kita buat bisa diakses melalui url https://darto.id/app/hijriyah. Jangan kaget lagi yah kalau ketika dikunjungi webnya berisi putih kosong, karena kita memang tidak menyiapkan hal ini di file index.php. Setelah itu kita buat template file untuk page Hijriyah tersebut.
Kode PHP Untuk Penanggalan Masehi dan Hijriyah
Baik, saya akan langsung copy paste keseluruhan dari kode PHP untuk sistem penanggalan masehi dan hijriyah dengan output sebagai JSON. Mmmmm saya masih pakai analogi sederhana tuk merubah nama hari dan nama bulan, maklum masih newbie tapi dah nekat ngoding, jadinya begini, hehehe. Jika ada yang mau punya kode lebih sederhana mohon disharing yah.
Setelah أنتم mencopy paste kode diatas di file page-14.php yang mana ditujukan untuk url https://darto.id/app/hijriyah dan kemudian kita akses url tersebut maka yang muncul adalah JSON output mengenai penanggalan masehi dan hijriyah.
[{"kalender":"Masehi","tanggal":"Kamis, 27 Mei 2021"},{"kalender":"Hijriyah","tanggal":"al-Khamis, 15 Shawwal 1442"}]Membuat functions.php
Functions.php adalah file yang berada di dalam theme kita yang bisa berfungsi untuk mengatur semua ekosistem WordPress, seperti fungsi umum, hook, shortcode, mengatur dashboard dan lain-lain, yang pada intinya ini adalah file terpenting pada theme yang akan otomatis aktifasi saat kita mengaktifkan theme yang kita buat.
Membuat Halaman Admin
Karena tutorial ini sebagai bentuk inspirasi dan agar lebih mempercepat prosesnya makan untuk membuat admin pages saya akan menggunakan admin pages generator. Silakan langsung saja dicopy paste kode dibawah ini di file functions.php yang sudah kita buat sebelumnya.
Setelah di save kemudian kita refresh menu dashboard, maka akan muncul menu baru, yaitu Hijri Date yang baru saja kita buat dari kode diatas. Dan tampilan dari admin menu pages Hijri Date adalah:
Selain dengan menggunakan generator, anda bisa juga menggunakan plugin yang tentunya bisa memudahkan dan lebih cepat saat membuat admin pages, tapi saya belum pernah coba sih, karena biasanya malah ngoding dari awal tanpa ada bantuan generator atau plugin, hehehe, عَفْوًا. Eh, plugin tersebut adalah:
Setelah itu kita isi Nama hari masehi dengan Senin,Selasa,Rabu,Kamis,Jum`at,Sabtu,Ahad, Nama bulan masehi dengan Januari,Februari,Maret,April,Mei,Juni,Juli,Agustus,September,Oktober,November,Desember, Nama hari hijriyah dengan al-Itsnain,ats-Tsulatsa,al-Arbia,al-Khamis,aj-Jumu`ah,as-Sabt,al-Ahad dan Nama bulan hijriyah dengan Muharram,Safar,Rabi al-Awwal,Rabi ath-Thani,Jumada al-Ula,Jumada ath-Thaniya,Rajab,Sha’ban,Ramadan,Shawwal,Dhu al-Qa`da,Dhu al-Hijjah. Atau silakan diisi dengan keinginan أنتم, disesuaikan saja.
Hasilnya pun akan seperti:
Merubah Kode PHP Menyesuaikan Dengan Options Admin Menu
Baik, setelah kita membuat halaman admin dan juga sudah mengisi field nama hari masehi, nama bulan masehi, nama hari hijriyah dan nama bulan hijriyah, saatnya sekarang kita menerapkan agar field ini menjadi isian dari kode PHP yang sudah kita buat. Saya akan seluruh dari kode yang ada di file page-14.php, artinya, jika أنتم copy paste source code yang saya kasih maka sebelumnya أنتم harus hapus atau ctrl + a terlebih dahulu kode yang ada di file page-14.php. Langsung saja yah copy paste kode berikut ini:
Setelah أنتم copy paste kode diatas dan kita kunjungi url https://darto.id/app/hijriyah maka tidak ada yang berubah, hanya saja saat ini kita tidak bisa mengaturnya langsung dari dashboard WordPress.
Kesimpulan
WordPress bisa sangat mudah untuk dibuat menjadi web app sesuai dengan yang kita inginkan, tentu saja terlebih dahulu kita harus paham mengenai ekosistem WordPress itu sendiri, mmmm sebetulnya sih sama aja kalau kita menggunakan framework yang lainnya juga. Saya contohkan disini sebuah web app sederhana menggunakan WordPress dimana web app ini akan digunakan oleh software lain seperti Vmix untuk menampilkan tanggal hijriyah dengan format JSON. Mengapa JSON? Kalau dari pribadi saya sendiri agar lebih mudah melihatnya saat kita preview di browser karena kalau dengan format xml agak kesulitan juga karena safari tidak mendukung hal ini.
Baik, pembuatan web app sederhana menggunakan WordPress sudah kita praktekkan, sekarang tinggal mengelola dashboard admin ini agar bisa lebih secure dan juga bisa difungsikan untuk multi user. Untuk selanjutnya silakan tunggu tutorial selanjutnya, إِنْ شَاءَ اللّٰهُ .
