Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins

Membuat Halaman Administrasi WordPress Kustom, Bagian 3

by
Read Time:15 minsLanguages:
This post is part of a series called Creating Custom WordPress Administration Pages.
Creating Custom WordPress Administration Pages, Part 2
Creating Custom WordPress Administration Pages, Part 4

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam seri ini, kita telah melihat bagaimana membuat halaman administrasi kustom di WordPress tanpa menggunakan Settings API. Ini bukan untuk mengatakan bahwa Settings API tidak berguna (karena memang begitu!), tapi mungkin ada saat ketika kita perlu menerapkan beberapa fungsi kustom atau penerapan fitur lebih khusus dimana API yang tersedia tidak mampu.

Selain itu, kita melihat beberapa prinsip pengembangan perangkat lunak yang paling penting, seperti prinsip tanggung jawab tunggal, dan menerapkannya pada pekerjaan kita.

Jika Anda baru saja bergabung dalam serial ini, sebaiknya baca tulisan sebelumnya sehingga Anda terbiasa dengan apa yang telah kami lakukan hingga saat ini dan jadi Anda dapat memahami mengapa kita membuat beberapa keputusan saat menulis kode kita.

Sebuah Tinjauan Cepat

Meskipun saya tidak dapat meringkas semua hal yang telah kita bahas sejauh ini dalam serial, saya dapat memastikan bahwa saya menyoroti poin pentingnya.

  • Kita telah memperkenalkan plugin inti dan menambahkan item submenu dan halaman opsi untuk plugin di dashboard WordPress.
  • Kita telah membahas prinsip tanggung jawab tunggal dan peran yang dimainkannya dalam perkembangan kita.
  • Elemen input tunggal telah ditambahkan yang akan menerima masukan pengguna.
  • Kita telah menambahkan nilai nonce ke halaman, tapi kita belum benar-benar melakukan apapun dengannya.

Dengan semua itu, saya berasumsi bahwa Anda memiliki versi kode sumber terbaru (yang tersedia sebagai lampiran di artikel sebelumnya) dan Anda siap untuk melangkah maju.

Sebelum Kita Mulai

Seperti artikel lainnya, saya berasumsi bahwa Anda memiliki lingkungan pengembangan WordPress lokal yang disiapkan di komputer Anda.

Selanjutnya, saya berasumsi bahwa Anda memiliki versi kode sumber terbaru dan Anda siap untuk terus membangun di atasnya atau Anda merasa nyaman membaca melalui kode yang kami miliki di sini dan menerapkannya saat Anda memiliki lebih banyak waktu.

Akhirnya, kita akan melewati setiap potongan kode secara bertahap. Pertama, saya akan membicarakan apa yang akan kita lakukan, kemudian saya akan menunjukkan kodenya, dan kemudian saya akan menjelaskan apapun kode yang sedang dikerjakan sehingga tidak ada yang tersisa yang bisa membingungkan.

Jika, bagaimanapun, Anda merasa bingung dengan apa pun dalam kode dan tutorial tidak menjelaskan dengan baik apa yang sedang terjadi, lalu tolong tinggalkan komentar dan saya pasti akan menindaklanjuti dengan Anda.

Mari kita mulai.

Menerapkan Fitur Baru

Pada artikel terakhir, kita tinggalkan dengan sebuah plugin yang terlihat seolah-olah itu melakukan sesuatu namun sebenarnya tidak menyimpan apapun ke database, apalagi mengambil apapun dari database.

Singkatnya, kita memiliki sebuah plugin yang terlihat fungsional tapi tidak. Dan di situlah kita akan mengikuti tutorial ini.

Secara khusus, kita akan menangani topik berikut:

  • Kita akan memverifikasi nilai nonce yang kita buat dan mendefinisikan di tutorial sebelumnya untuk mendapatkan pemahaman tentang bagaimana satu komponen dari keamanan WordPress bekerja.
  • Kita akan memverifikasi bahwa pengguna yang ada memiliki izin untuk benar-benar mengirimkan informasi (dan mencegahnya melakukannya, jika mereka tidak memiliki izin).
  • Jika pengajuannya aman dan pengguna memiliki izin, kita kemudian akan membersihkan informasi tersebut untuk memastikan tidak ada konten yang berbahaya masuk ke dalam database.

Dengan itu sebagai peta jalan kita, kita siap untuk terjun kembali ke kode dan terus mengerjakan plugin.

Keamanan

Ingat dari posting sebelumnya, kita memanfaatkan fungsi WordPress API wp_nonce_field. Fungsi khusus ini melakukan sebagai berikut:

Field nonce digunakan untuk memvalidasi bahwa konten dari form permintaan berasal dari situs saat ini dan bukan di tempat lain. Sebuah nonce tidak menawarkan perlindungan mutlak, namun harus melindungi dari kebanyakan kasus. Sangat penting untuk menggunakan field nonce dalam form.

Jika Anda mencoba untuk menyimpan halaman opsi, kemungkinan Anda akan disajikan dengan layar putih. Itu tidak pernah bagus, tapi itulah yang kami harapkan mengingat kondisi plugin kita saat ini.

Kita perlu memperkenalkan fungsi yang akan terhubung ke salah satu hook Wordpress yang tersedia, dan akan memeriksa apakah nilai nonce adalah valid. Jika valid, maka akan membiarkan kita melanjutkan dengan menyimpan informasi; jika tidak, seharusnya tidak membiarkan kita melanjutkan.

Karena kita mengerjakan pembuatan halaman administrasi kustom, kita memerlukan hook yang berbeda dari pada yang biasa kita gunakan dalam situasi seperti ini. Dalam contoh ini, kita akan menggunakan hook admin_post.

Menjalankan pada permintaan posting admin terotentikasi dimana tidak ada tindakan yang diberikan.

Ingat dari diskusi sebelumnya, kita tidak ingin membebani kelas kita dengan tanggung jawab lebih dari yang seharusnya. Ingat, pertanyaan yang harus selalu kita tanyakan pada diri kita adalah: "Alasan apa yang kelas ini harus berubah?"

Saat ini, kita tidak memiliki kelas yang bisa mengatur opsi penyimpanan. Jadi mari kita memperkenalkan satu. Di direktori admin dari plugin, mari kita membuat kelas Serializer. Ini akan bertanggung jawab untuk menyimpan nilai opsi kita.

The Serializer class in our plugin directoryThe Serializer class in our plugin directoryThe Serializer class in our plugin directory

Seperti yang bisa Anda lihat, saya telah menamai file saya class-serializer.php. Kita tahu dari pengalaman dan dari kode di atas bahwa itu perlu menghubungkan ke hook admin_post yang disebutkan di atas, dan kita tahu bahwa kita memerlukan fungsi yang bertanggung jawab untuk menyimpan informasinya.

Mari kita mendefinisikannya sekarang.

Jelas, masih ada pekerjaan yang harus dilakukan (sebenarnya, kita bahkan belum menjalankan kelas ini!) tapi kode di atas bisa cukup untuk melihat ke mana kita menuju.

Percakapan Singkat Tentang Ketergantungan

Sebelum menambahkan fungsi apa pun, mari kita lanjutkan dan siapkan ini saat plugin kita pertama kali dimuat. Pertama, mengembalikan custom-admin-settings.php. Sekarang, pada titik ini, kita perlu bertanya pada diri kita sendiri apakah ada kelas yang ada yang seharusnya memiliki Serializer sebagai sebuah ketergantungan.

Saya pikir sebuah kasus dapat dibuat bahwa Submenu_Page harus memiliki referensi ke serializer karena halaman memiliki opsi untuk disimpan.

Selain itu, juga memungkinkan untuk membiarkan file ini benar-benar terpisah dan tersedia untuk pola lain. Jika kita melakukan itu, kita akan menyimpang dari topik yang ada. Meskipun saya pikir itu penting, itu diluar lingkup dari apa yang ingin kita lakukan.

Jadi mari menjalankan kelas Serializer, menginisialisasinya, dan kemudian menyampaikannya ke dalam constructor dari halaman submenu. Kode di file bootstrap plugin sekarang seharusnya terlihat seperti ini:

Dengan itu, kita siap untuk terus menyimpan opsi kita.

Kembali ke Pembangunan

Mari kembali ke Serializer. Sekarang setelah kita menghubungkannya ke seluruh plugin, saatnya untuk menulis beberapa kode, sesuai dengan komentar, mari memverifikasi nilai nonce yang telah kita buat di front-end.

Untungnya, WordPress membuatnya mudah melalui fungsi API built-in: wp_verify_nonce. Fungsi ini menerima dua argumen:

  1. Tindakan
  2. Nama

Jika Anda ingat dari artikel sebelumnya, kita menggunakan acme-settings-save sebagai tindakan dan acme-custom-message sebagai nilai nonce kita. Untuk memvalidasinya, kita perlu memeriksa apakah itu ada dalam koleksi $_POST dan lolos dari pemeriksaan asli dari WordPress.

Untuk melakukan ini, saya ingin membuat metode private yang memungkinkan saya merangkum logika ini ke fungsi yang dapat saya gunakan dalam fungsi save yang telah kita definisikan di atas.

Setelah selesai, saya dapat menggabungkan panggilan ke fungsi ini yang memungkinkan kita memeriksa keabsahan pengajuan dan keluar dari routine atau melanjutkan ke pemeriksaan berikutnya (yang akan kita dapatkan untuk sesaat).

Perhatikan bahwa hanya mengembalikan false dalam kondisional ini bukanlah cara yang tepat untuk menangani hal ini. Sebagai gantinya, akan lebih bersih untuk memperkenalkan pesan kesalahan yang ditampilkan di dashboard WordPress. Ini adalah sesuatu yang akan kita tinjau ulang di tutorial masa depan.

Untuk saat ini, kami terutama memperhatikan dengan memastikan bahwa kita dapat mengirimkan data dengan sukses. Ini membawa kita ke bagian selanjutnya dari kode kita.

Izin

Meskipun nomor digunakan sekali (atau nonce) validasi memeriksa, masih ada satu hal lagi yang perlu kita periksa: kita perlu memastikan bahwa pengguna saat ini memiliki izin untuk menyimpan datanya.

Untuk tujuan kita, kita ingin memastikan pengguna saat ini adalah administrator. Untuk melakukannya, kita bisa melihat kemampuan pengguna saat ini (Anda dapat melihat halaman ini memberikan referensi untuk setiap peran dan kemampuan yang terkait).

Perhatikan bahwa salah satu kemampuan dari administrasi adalah mengatur opsi. Kita sekarang dapat menggunakan fungsi WordPress API current_user_can untuk memeriksa apakah pengguna saat ini dapat menyimpan opsi di halaman ini.

Tapi pertama-tama, ini menimbulkan pertanyaan: Jika pengguna tidak dapat menyimpan opsi, mengapa mereka boleh benar-benar diizinkan melihat halaman dari awal?

Jika Anda ingat dari seri sebelumnya, kami menulis sedikit kode berikut ini:

Ini memastikan bahwa halaman opsi hanya tersedia bagi administrator; namun, kita ingin ekstra hati-hati dan melakukan pemeriksaan untuk hal ini selama proses serialisasi kita juga.

Sekarang kita dapat memperbarui persyaratan dimana kita juga memeriksa nilai nonce juga untuk memeriksa izin pengguna saat ini:

Sekarang kita memiliki kode untuk memastikan nilai nonce ditetapkan dan bahwa pengguna saat ini dapat menyimpan nilainya, kita dapat bergerak maju dengan sanitasi.

Ingat, kita akan kembali ke tempat di mana dikatakan kita perlu menampilkan pesan kesalahan. Tapi itu tidak ada dalam tutorial ini.

Sanitasi

"Tapi tunggu dulu," Anda mengatakan. "Saya pikir kita bersiap untuk menyimpan opsi itu!" Iya, tapi sebelum kita bisa melakukannya kita harus melalui proses sanitasi. Singkatnya, sanitasi adalah ide untuk memastikan data yang bersih, aman, dan, ahem, sanitasi untuk database.

Sederhananya, ini mencegah pengguna jahat memasukkan informasi ke dalam database yang pada akhirnya dapat mempengaruhi situs kita secara negatif.

Untungnya, WordPress menyediakan fungsi pembantu yang bagus yang memungkinkan kita untuk memastikan hal ini semudah mungkin. Bagi yang berminat, Anda bisa membaca semua tentang validasi dan sanitasi data (meski kita akan melihat validasi pada tutorial selanjutnya).

Dalam kode kita, kita akan menggunakan sanitize_text_field (seperti yang yang terkait di atas). Fungsi ini akan melakukan hal berikut:

  • Memeriksa UTF-8 yang tidak valid
  • Mengonversi satu karakter `<` ke entitas
  • Strip semua tag
  • Menghapus jeda baris, tab, dan spasi ekstra
  • Strip oktet

Cukup bagus untuk memiliki ini tersedia, bukan? Mari kita mulai bekerja. Untuk melakukannya, temukan fungsi save yang telah kita kerjakan dan perbarui agar terlihat seperti ini:

Perhatikan bahwa kita sedang membaca masukan dari koleksi $_POST, membersihkannya, dan kemudian menyimpan hasilnya dalam variabel terpisah. Selanjutnya, variabel itu sedang ditulis ke database menggunakan fungsi update_option.

Untuk artikel ini, saya memilih untuk menggunakan kunci tutsplus-custom-data. Apa pun yang Anda gunakan, penting untuk diawali dengan sesuatu yang unik sehingga plugin atau tema lain tidak menimpa opsi dan Anda tidak menimpa opsi yang ada.

Akhirnya, kita perlu mengarahkan kembali ke halaman opsi. Karena kita tidak menggunakan API bawaan, kita harus menulis sebuah fungsi untuk melakukan ini untuk kita. Untungnya, ini sangat mudah.

Pertama, buat fungsi yang disebut redirect, dan pastikan tampilannya seperti ini:

Kode di atas seharusnya cukup jelas, tapi untuk memastikannya sudah jelas, lakukan hal berikut:

  1. Ini memeriksa untuk memastikan nilai WordPress pribadi ada di koleksi $_POST. Jika tidak diset, maka akan ditetapkan sama dengan URL login WordPress. Ini akan memaksa orang ke halaman login jika URL referral tidak ditetapkan; namun, tidak ada alasan mengapa hal itu tidak seharusnya terjadi.
  2. Selanjutnya, kita mengambil perujuk dan membersihkan data. Ini adalah sesuatu yang dibutuhkan oleh standar pengkodean, dan ini memastikan data bersih.
  3. Akhirnya, kita menginisialisasi wp_safe_redirect ke URL sehingga kita kembali ke halaman opsi.

Setelah semua ini selesai, tambahkan ini sebagai baris terakhir di fungsi save di atas. Versi terakhir dari kode akan terlihat seperti ini:

Ada satu hal: Kita punya keamanan, sanitasi, serialisasi, dan pengalihan di tempatnya. Tapi kita tidak menunjukkan pesan kesalahan, dan kita tidak mengambil data.

Di situlah kita akan mengikuti tutorial selanjutnya.

Kesimpulan

Pada titik ini, kita mendapatkan plugin yang semi-fungsional, namun masih banyak lagi pekerjaan yang harus dilakukan. Jelas, informasi yang kita kirimkan ke database tidak ditampilkan di manapun, dan itu bukan hal yang baik.

Tapi sama seperti dengan menyimpan informasi, ada hal penting yang harus diperhatikan saat mengambil informasi. Pada tutorial berikutnya, kita akan melihat pengambilan informasi, menampilkannya di front-end, menampilkannya di halaman opsi, dan juga memperbarui informasi saat pengguna mengubah nilai elemen input.

Sementara itu, jika Anda mencari utilitas lain untuk membantu Anda membangun perangkat Anda yang berkembang untuk WordPress atau kode untuk dipelajari dan menjadi lebih berpengalaman di WordPress, jangan lupa untuk melihat apa yang tersedia di Envato Market.

Ingat, Anda dapat menangkap semua kursus dan tutorial saya di halaman profil saya, dan Anda dapat mengikuti saya di blog dan/atau Twitter di @tommcfarlin dimana saya berbicara tentang berbagai praktik-praktik pengembangan perangkat lunak dan bagaimana kita dapat menggunakannya di WordPress.

Akhirnya, jangan ragu untuk meninggalkan pertanyaan atau komentar di feed di bawah ini. Saya melakukan yang terbaik untuk berpartisipasi dan menjawab setiap pertanyaan atau kritik yang Anda tawarkan sehubungan dengan proyek ini.

Sumber daya

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.