Membuat Web App Menggunakan WordPress

Membuat Web App Menggunakan WordPress

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

Membuat Web App Menggunakan WordPress - General Settings
Membuat Web App Menggunakan WordPress – General Settings

Reading – Block Search Engine

Membuat Web App Menggunakan WordPress - Block Search Engine
Membuat Web App Menggunakan WordPress – 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.

Membuat Web App Menggunakan WordPress - Disable Comments
Membuat Web App Menggunakan WordPress – Disable Comments

Untuk mematikan fungsi avatar uncheck avatars yang settingannya berada di paling bawah di menu discussion.

Membuat Web App Menggunakan WordPress - Disable Avatars
Membuat Web App Menggunakan WordPress – Disable Avatars

Hapus Semua Posts, Pages dan Plugins

Membuat Web App Menggunakan WordPress - Delete All Posts
Membuat Web App Menggunakan WordPress – Delete All Posts
Membuat Web App Menggunakan WordPress - Remove All Pages
Membuat Web App Menggunakan WordPress – Remove All Pages
Membuat Web App Menggunakan WordPress - Remove All Plugins
Membuat Web App Menggunakan WordPress – Remove All Plugins

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.

Baca juga:  Install FreeBSD di Raspberry Pi
Membuat Web App Menggunakan WordPress - Setting Permalinks
Membuat Web App Menggunakan WordPress – Setting Permalinks

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.

Membuat Web App Menggunakan WordPress - Delete Themes
Membuat Web App Menggunakan WordPress – Delete Theme

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:

PHP
/wp-content/themes/kloningspoon/style.css
Membuat Web App Menggunakan WordPress - Create Theme
Membuat Web App Menggunakan WordPress – Create Theme
Membuat Web App Menggunakan WordPress - Theme Structure
Membuat Web App Menggunakan WordPress – Theme Structure

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.

Membuat Web App Menggunakan WordPress - Activate theme
Membuat Web App Menggunakan WordPress – Activate theme

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.

Membuat Web App Menggunakan WordPress - Create Page
Membuat Web App Menggunakan WordPress – Create Page

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.

Membuat Web App Menggunakan WordPress - Page ID in Status Bar
Membuat Web App Menggunakan WordPress – Page ID in Status Bar

Atau dengan melihat page ID melalui address bar pada browser.

Membuat Web App Menggunakan WordPress - Page ID in Address Bar
Membuat Web App Menggunakan WordPress – Page ID in Address Bar

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.

Membuat Web App Menggunakan WordPress - Create Page Template
Membuat Web App Menggunakan WordPress – Create Page Template

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.

PHP
/wp-content/themes/kloningspoon/page-14.php

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 Web App Menggunakan WordPress - Create WordPress Theme functions.php
Membuat Web App Menggunakan WordPress – Create WordPress Theme functions.php

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.

PHP
/wp-content/theme/kloningspoon/functions.php

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:

Membuat Web App Menggunakan WordPress - The Admin pages
Membuat Web App Menggunakan WordPress – The Admin pages

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:

Admin Page Framework

Admin Page Framework

Facilitates WordPress plugin and theme development.

Admin Page Framework

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:

Membuat Web App Menggunakan WordPress - Fill the settings page
Membuat Web App Menggunakan WordPress – Fill the settings page

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:

PHP
/wp-content/themes/kloningspoon/page-14.php

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, إِنْ شَاءَ اللّٰهُ .

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

× 8 = sixty four