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

Pengaturan API WordPress, Bagian 7: Validasi, Sanitasi, dan Masukan

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called The Complete Guide to the WordPress Settings API.
The WordPress Settings API, Part 6: Menu Pages
The WordPress Settings API, Part 8: Validation, Sanitisation, and Input I

Indonesian (Bahasa Indonesia) translation by Fadil Abdillah (you can also view the original English article)

Jika Anda baru saja bergabung dengan kami, kami telah membahas banyak topik dalam seri ini - kami telah berusaha memberikan gambaran lengkap tentang API Pengaturan WordPress serta fungsi terkaitnya. Kami telah membahas pengaturan, opsi, navigasi, dan menu. Kami juga telah bekerja melalui contoh-contoh praktis yang menggunakan masing-masing topik yang telah kami diskusikan.

Kita hampir selesai. Dalam dua artikel terakhir dalam seri ini, kita akan melihat sanitasi, validasi, dan elemen masukan dasar yang dapat kita gunakan di plugin dan tema WordPress kami.

Sebelum kita mulai: Artikel ini mengasumsikan bahwa Anda telah mengikuti bersama dengan sisa seri, memiliki copy kode contoh yang diinstal, dan sekarang relatif akrab dengan API Pengaturan dan opsi tema. Jika Anda tidak yakin tentang hal-hal di atas, saya sangat menyarankan untuk membaca seluruh artikel sebelum masuk ke posting ini.


Memahami Validasi dan Sanitasi

Sebelum kita mulai menulis kode apa pun, kita perlu memahami dengan tepat apa yang akan kita capai - yaitu, validasi dan sanitasi. Sederhananya, ini adalah dua aspek dari menulis dan membaca data dengan aman dari halaman opsi WordPress dan basis data yang mendasari.

Kita akan menyelami lebih dalam hal ini ketika kita melihat masing-masing jenis masukan dan bekerja melalui contoh, tetapi mari kita memberikan beberapa konteks tentang apa yang sebenarnya akan kita lakukan:

  • Validasi adalah proses di mana kita memeriksa data yang masuk dari halaman opsi - atau, lebih tepatnya, input pengguna - dan menentukan apakah atau tidak itu dapat diterima untuk disimpan.
  • Sanitasi adalah proses dimana kami memastikan bahwa data yang keluar dari database bersih dan diformat dengan benar untuk rendering pada halaman.

Mungkin ringkasan yang paling ringkas adalah bahwa validasi harus dilakukan sebelum menulis data ke database dan sanitasi harus dilakukan antara membaca data dari database dan mengirimkannya ke browser.

Sering kali, validasi terkait dengan penyimpanan data dan sanitasi terkait dengan pengambilan data, tetapi juga sangat mungkin untuk membersihkan data setelah melewati validasi untuk memastikan bahwa hanya data bersih yang disimpan ke dalam database. Ketika kami bekerja dengan kode kami sendiri, lebih mudah untuk melakukan ini; namun, kami tidak dapat selalu bergantung pada pengembang lain untuk membersihkan data mereka sehingga tanggung jawab untuk membersihkan semua data yang keluar dari database jatuh pada kami.


Memperbarui Proyek Kami

Agar mudah untuk sepenuhnya memahami validasi dan sanitasi, mari memperkenalkan tab baru ke halaman opsi kami. Jika Anda telah memperkenalkan menu tingkat atas baru, ini juga akan mengharuskan kami menambahkan menambahkan item submenu baru, dan memperbarui tab tampilan opsi. Mari kita mengurus yang sekarang.

Pertama, temukan fungsi sandbox_example_theme_menu dan tambahkan item submenu berikut:

Selanjutnya, kita perlu melanjutkan dan mematikan fungsi yang akan membuat grup opsi untuk tab pengaturan baru kita. Dengan asumsi Anda telah mengikuti seri ini, ini seharusnya mudah diikuti:

Akhirnya, kita perlu memperbarui fungsi sandbox_theme_display untuk merender tab dan memilihnya dengan benar ketika sedang diakses baik melalui tab atau item submenu. Pertama, mari kita perbarui kondisional yang memeriksa string kueri dan argumen fungsi. Khususnya, perlu menangani kasus untuk contoh input. Perbarui kondisional agar terlihat seperti ini:

Selanjutnya, kita perlu menambahkan tab baru ke navigasi. Perbarui penampung nav-tab-wrapper untuk menyertakan jangkar baru ini:

Akhirnya, kita perlu menambahkan satu lagi kondisional ke elemen form yang bertanggung jawab untuk menampilkan opsi. Perbarui kondisional agar terlihat seperti ini:

Dengan asumsi bahwa Anda telah memasukkan semua kode dengan benar, panel admin Anda seharusnya sekarang terlihat seperti ini:

Initial Examples

Kami sekarang siap untuk mulai memperkenalkan elemen opsi baru dan fungsi validasi dan sanitasi. Jika kode di atas tampak tidak jelas, pastikan untuk memeriksa artikel sebelumnya di rangkaian karena pengaturan, halaman menu, dan tab semuanya telah dibahas.


Jenis Elemen

Ada lima jenis elemen dasar yang dapat kita gunakan untuk input di halaman opsi WordPress kami. Ini adalah input, textareas, kotak centang, tombol radio, dan kotak pilih. Di sisa artikel ini, kita akan melihat elemen input dan textareas dan kami akan meninjau tiga terakhir di artikel terakhir dalam seri.

Masukan

Elemen masukan ideal untuk situasi di mana kita perlu menangkap sejumlah kecil teks dari pengguna. Ini bisa berupa nama atau nomor telepon mereka atau sesuatu yang sedikit lebih rumit seperti URL, alamat email mereka, atau kunci API. Faktanya, kita sebenarnya sudah menggunakan kolom input pada halaman 'Social Options' ketika kita menanyakan alamat profil jejaring sosial pengguna.

Memvalidasi input teks dapat menjadi operasi yang rumit terutama jika Anda ingin menerapkan batasan tertentu. Misalnya, nomor telepon mengikuti format tertentu dan jika Anda meminta pengguna untuk nomor teleponnya, Anda dapat mengatur fungsi yang menentukan apakah nomor telepon mematuhi format ketat. Tentunya, kami tidak dapat menangkap semua kasus penggunaan tersebut dalam contoh kami di sini karena bidangnya terlalu luas.

Sebaliknya, apa yang akan kita lakukan adalah memastikan bahwa tidak ada kode berbahaya yang ditulis ke dalam database. Ini berarti bahwa ketika pengguna memasukkan teks ke dalam kotak teks kami, kami akan menghapus semua tag HTML dan karakter yang berpotensi bermasalah. Namun sebelum melakukan itu, mari memperkenalkan opsi baru, memahami markup, dan kemudian melihat apa yang terjadi jika kami tidak menerapkan jenis validasi apa pun.

Lanjutkan dan perkenalkan bagian dan bidang baru menggunakan fungsi sandbox_theme_initialize_input_examples:

Selanjutnya, tentukan callback untuk bagian:

Terakhir, perkenalkan elemen masukan yang sebenarnya yang akan kita gunakan untuk menangkap masukan:

Halaman opsi Anda sekarang harus terlihat seperti gambar berikut:

Input Element

Memahami Markup

Sampai titik ini, kami telah menciptakan elemen pilihan kami dan saya telah menyebutkan bahwa kami akhirnya akan mendiskusikan masing-masing atribut nanti dalam seri. Ini adalah artikel di mana kita mulai melihat pentingnya atribut id dan nama.

Perhatikan bahwa pada awal fungsi, kita membaca opsi untuk tab khusus ini menggunakan fungsi get_option WordPress. Fungsi ini akan mengembalikan opsi dalam larik. Atribut id dari elemen input mengidentifikasi nilai elemen ini dalam larik. Atribut name adalah nama array yang dikunci dengan ID. Masuk akal?

Agar lengkap, pikirkan seperti ini:

  • WordPress akan membuat larik berdasarkan nama bagian yang telah Anda tetapkan. Dalam hal ini, ini adalah sandbox_theme_input_examples
  • Setiap elemen akan diidentifikasi oleh atribut id. Dalam contoh ini, itu 'input_example'
  • Anda dapat membaca nilai larik ini dengan menggunakan sandbox_theme_input_examples [input_example]

Jadi, id elemen mewakili kunci dari nilai dalam array opsi, atribut name mewakili nama array dengan kunci nilai dalam array.

Menambahkan Validasi dan Sanitasi

Pada titik ini, sangat mungkin untuk mulai memasukkan nilai ke dalam elemen input dan menyimpan opsi. Silakan dan coba - set nilai, klik 'Simpan Perubahan,' dan Anda akan melihat elemen input menampilkan nilai yang baru saja Anda buat. Tapi di sini masalahnya: coba menempelkan sesuatu seperti ini ke dalam bidang input:

Selanjutnya, lompat ke index.php dan tambahkan blok kode berikut:

Segarkan beranda dan Anda akan melihat iframe muncul di tengah-tengah beranda tema Anda:

Input Element

Sepertinya masalah yang relatif kecil, tapi ini persis jenis hal yang perlu kita cegah. Kami tidak ingin pengguna memiliki kontrol semacam itu atas basis data, halaman situs, dan sebagainya. Tentu saja, menyimpan iframe sederhana adalah contoh kecil - jika pengguna dapat memasukkan JavaScript, maka mereka dapat mempengaruhi aspek-aspek tertentu dari seluruh situs Anda. Bahkan yang lebih serius, jika pengguna dapat memasukkan SQL jahat, basis data Anda dapat dikompromikan.

Jadi mari kita perkenalkan beberapa validasi. Seperti yang disebutkan di atas, kami ingin menghapus markup dan karakter yang bermasalah. Untuk melakukan ini, pertama-tama kita perlu mendefinisikan callback validasi untuk bagian elemen input kami. Untuk melakukan ini, mari kita tinjau kembali panggilan register_setting dan perbarui agar terlihat seperti ini:

Selanjutnya, mari kita definisikan fungsi itu:

Perhatikan bahwa fungsi ini menerima satu parameter yang kami beri nama input. Argumen ini mewakili kumpulan opsi yang tidak divalidasi yang dikirimkan WordPress ke fungsi ini dari halaman opsi yang baru saja kita simpan. Perhatikan juga bahwa ketika kami menambahkan elemen opsi tambahan, kami akan menggunakan fungsi yang sama ini.

Membuat fungsi validasi biasanya mengikuti tiga langkah:

  1. Buat larik yang akan digunakan untuk menyimpan opsi yang divalidasi
  2. Validasi (dan bersihkan, bila perlu) semua opsi yang masuk
  3. Kembalikan larik yang telah kami buat sebelumnya

Ayo lakukan itu sekarang. Lihatlah penerapan berikut yang memperhatikan komentar-komentar ini:

Sebagian besar kode harus relatif lurus ke depan, tetapi dua aspek terpenting datang pada pernyataan di dalam pernyataan bersyarat dan kembali.

  • Kami menggunakan fungsi strip_tags, yang asli dari PHP, untuk menghapus semua tag HTML dan PHP
  • Kami menggunakan fungsi stripslashes, yang merupakan fungsi PHP asli, yang akan menangani tanda kutip di sekitar string.

Akhirnya, kita bisa saja mengembalikan array $output pada akhir fungsi, tetapi mengembalikan hasil dari panggilan ke apply_filters adalah praktik terbaik. Meskipun melebihi lingkup artikel ini, perlu dicatat bahwa pernyataan ini pada dasarnya memanggil fungsi lain apa pun yang difilter oleh fungsi khusus ini sebelum mengembalikan nilainya.

Sekarang, coba berikan beberapa input sampel ke elemen input. Coba sediakan string sederhana, nomor telepon, alamat email, URL, blok HTML, sebaris JavaScript, dan sebagainya. Rapi, ya?

Terakhir, mari kembali ke index.php dan berikan satu perubahan terakhir untuk menunjukkan bagaimana kita dapat melakukan sanitasi output. Ingat, itu adalah praktik yang baik untuk membersihkan opsi bahkan jika Anda bekerja dengan nilai-nilai yang tidak berasal dari pekerjaan Anda sendiri.

Temukan baris yang berbunyi:

Dan perbarui sehingga terbaca:

Fungsi sanitize_text_field adalah fungsi asli WordPress yang secara khusus dimaksudkan untuk membersihkan input pengguna dari kolom teks atau dari database.

Kami akan melihat lebih banyak di seluruh artikel ini dan berikutnya, tetapi ada daftar lengkap fungsi-fungsi ini tersedia di Codex WordPress.

Textarea

Ketika melihat elemen input, kami mencakup banyak hal. Untungnya, banyak dari prinsip yang sama berlaku untuk tidak hanya textareas, tetapi sisa elemen juga. Karena itu, kita tidak perlu menghabiskan banyak waktu dengan masing-masing elemen. Ini akan membebaskan kita untuk melihat beberapa keanehan yang datang dengan masing-masing tipe elemen.

Untuk saat ini, mari memperkenalkan elemen textarea. Dalam contoh kita, elemen khusus ini akan memungkinkan pengguna memasukkan beberapa kalimat tentang diri mereka - menganggapnya sebagai bio singkat. Pertama, tambahkan panggilan berikut ke fungsi sandbox_theme_initialize_input_examples:

Selanjutnya, mari kita mendefinisikan callback yang diperlukan untuk rendering textarea:

Perhatikan bahwa panggilan ini berfungsi sangat mirip dengan elemen input yang didefinisikan di atas. Secara khusus, kami telah menyediakan atribut id untuk memberikan nilai ini kunci dalam array opsi dan kami telah menentukan nama dan kunci yang tepat dalam atribut nama elemen. Kami juga telah memberi ukuran textarea ukuran tertentu, meskipun ini sepenuhnya sewenang-wenang.

Ingat bahwa karena elemen ini termasuk bagian yang sama dengan elemen input, ini diproses menggunakan fungsi validasi yang sama. Dengan demikian, kami mendapatkan tingkat validasi yang sama secara gratis. Cobalah - mencoba menyimpan markup, skrip, dan jenis kode lainnya menggunakan textarea.

Terakhir, mari kita perbarui halaman yang menghadap publik dari tema kami untuk mengambil nilai ini dan membersihkannya dengan benar untuk ditampilkan. Di index.php, tambahkan blok kode berikut:

Meskipun praktis sama dengan bidang input, kami perlu memastikan bahwa kami lengkap dalam validasi dan sanitasi kami.


Kesimpulan

Meskipun kami hanya melihat dua jenis elemen, kami mencakup banyak hal. Selain membawa tema kami up-to-date, kami juga telah menerapkan validasi dasar dan mulai mengeksplorasi fitur sanitasi WordPress.

Dalam artikel terakhir, kita akan melihat tiga tipe elemen yang tersisa dan bagaimana mengelolanya menggunakan validasi dan sanitasi. Sementara itu, bereksperimenlah dengan beberapa hal yang kami bahas di sini dan ingat untuk meninjau artikel sumber terkait yang terkait di bagian bawah pos.


Sumber Terkait

Advertisement
Advertisement
Advertisement
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.