Membuat Kotak Meta WordPress yang Dapat Dipelihara: Menyimpan dan Mengambil

() translation by (you can also view the original English article)

Saat kita sampai di akhir serial ini, kita memiliki dua topik lagi untuk dibahas:

Menyimpan informasi dan mengambil informasi dari database
Refactoring kode sehingga menjadi lebih mudah dipelihara bagi kita

Pada artikel sebelumnya, kita melihat validasi, sanitasi, dan penerapan fungsi ini untuk elemen yang telah kita tampilkan di front-end. Pada artikel ini, kita akan melanjutkan prosesnya dengan menyimpan informasi ke database, mengambil informasinya, dan menampilkannya di front-end.

Sepanjang jalan, kita juga akan melihat beberapa fungsi API WordPress bawaan yang dirancang untuk membantu membuat ini sedikit lebih mudah bagi kita dan juga beberapa tip untuk memeriksa ulang pekerjaan kita di database untuk memverifikasi informasi kita yang disimpan persis seperti yang kita harapkan.

Kita punya sedikit lebih banyak untuk pergi agar plugin ini bisa hidup, jadi mari kita mulai.

Menyimpan Data

Untuk menampilkan data di front-end, jelas kita perlu memasukkannya ke database terlebih dahulu. Karena kita bekerja dengan kotak meta, maka kita dapat menggunakan fungsi yang tersedia melalui API Meta Box untuk menyimpan informasi ini.

Secara khusus, kita akan bekerja dengan fungsi berikut:

update_post_meta untuk menyimpan informasi ke database
delete_post_meta untuk menghapus informasi dari database

Ada lagi fungsi lainnya, add_post_meta, yang juga tersedia untuk menulis informasi ke database; namun, update_post_meta melakukan hal yang sama jika data belum ada di database.

Pertanyaan lain yang pernah saya lihat muncul ketika harus menghapus data meta posting adalah mengapa? Artinya, mengapa menghapus informasi daripada menyimpan nilai kosong?

Anda bisa berpendapat ini adalah preferensi pribadi - dan memang - tapi jika Anda bekerja dengan plugin yang rumit yang memiliki sejumlah field yang berbeda, dan field yang tidak memiliki nilai, maka masuk akal untuk tidak mempertahankan baris yang kosong.

Selanjutnya, kecuali jika tidak adanya nilai yang bermakna untuk sesuatu pada antarmuka pengguna, maka tidak ada alasan untuk mempertahankan nilai kosong saat kita membiarkan database lebih dekat mencerminkan informasi yang ditampilkan di layar.

Menjaga antarmuka pengguna, application layer code, dan database yang konsisten mungkin sangat membantu ketika mencoba menulis kode yang bisa dipelihara.

Jadi dengan itu, mari kita lihat proses penyimpanan field untuk masing-masing field masukan kita.

1. Draft

Ingat dari posting sebelumnya bahwa tab Draft berisi satu textarea yang dimaksudkan sebagai tempat bagi penulis untuk mengumpulkan berbagai catatan dan URL dari seluruh web yang relevan dengan konten yang ingin mereka publikasikan.

Saat terakhir kita meninggalkan kode ini, kita memiliki yang berikut:

<?php
 
// If the 'Drafts' textarea has been populated, then we sanitize the information.
if ( ! empty( $_POST['authors-commentary-drafts'] ) ) {
 
    // We'll remove all white space, HTML tags, and encode the information to be saved
    $drafts = trim( $_POST['authors-commentary-drafts'] );
    $drafts = esc_textarea( strip_tags( $drafts ) );
 
    // More to come...
 
}

Di sini, kita ingin melihat apakah konten array $_POST terisi. Jika demikian, kita kemudian membersihkan informasinya dengan menggunakan trim dan esc_textarea.

Pada titik ini, kita siap untuk menuliskannya ke database jadi mari kita ganti baris yang berbunyi // More to come... dengan kode berikut (perhatikan bahwa kita akan melihat kode yang lebih mendalam setelah bloknya):

<?php
    
// If the 'Drafts' textarea has been populated, then we sanitize the information.
if ( ! empty( $_POST['authors-commentary-drafts'] ) ) {

  // We'll remove all white space, HTML tags, and encode the information to be saved
	$drafts = trim( $_POST['authors-commentary-drafts'] );
	$drafts = esc_textarea( strip_tags( $drafts ) );

	update_post_meta( $post_id, 'authors-commentary-drafts', $drafts );

} else {
	
	if ( '' !== get_post_meta( $post_id, 'authors-commentary-drafts', true ) ) {
		delete_post_meta( $post_id, 'authors-commentary-drafts' );
	}
	
}

Di sini, kita menggunakan fungsi update_post_meta untuk menambahkan atau memperbarui konten dalam database. Perhatikan bahwa fungsinya membutuhkan tiga parameter:

ID posting yang digunakan agar mengaitkan informasi ini dengan postingnya
Kunci meta yang digunakan untuk mengidentifikasi nilainya secara unik
Nilai meta sebenarnya yang terkait dengan kunci meta

Perhatikan juga bahwa jika nilai dari array $_POST kosong maka kita periksa apakah ada nilai untuk draft dalam database dan jika ada, maka kita akan menghapusnya.

2. Resources

Karena kita telah meletakkan semua pekerjaan dasar untuk membersihkan informasi dan kita telah melihat bagaimana memperbarui dan menghapus informasi di database, melakukan hal yang sama untuk tab Resources adalah sama.

Satu pengecualian adalah karena kita berurusan dengan kumpulan informasi dinamis, kita perlu secara dinamis mengaitkan posting dengan ID unik berdasarkan jumlah sumber daya yang kita simpan.

Di posting sebelumnya, kode kita terlihat seperti ini:

<?php

// If the 'Resources' inputs exist, iterate through them and sanitize them
if ( ! empty( $_POST['authors-commentary-resources'] ) ) {

    $resources = $_POST['authors-commentary-resources'];
    foreach ( $resources as $resource ) {

	    $resource = esc_url( strip_tags( $resource ) );

	    // More to come...

    }

}

Ketika sampai pada pengolahan informasi secara dinamis, sebuah loop foreach bekerja dengan baik; namun, saat menyimpan informasi, kita perlu mengaitkan kunci unik dengan setiap nilai.

Salah satu pilihannya adalah mengatur sebuah for loop agar memberi akhiran kunci meta dengan sebuah kunci unik (dengan menggunakan iterator untuk setiap nilai dalam loop), namun hal ini dapat menyebabkan masalah ketika harus menghapus informasi. Secara khusus, jika pengguna memasukkan nilai untuk input pertama, kedua, dan ketiga namun kemudian menghapus masukan kedua yang hanya menyisakan yang pertama dan ketiga saat memperbarui posting, kita perlu menghapus nilai-nilai kosong tersebut dengan benar dan menggeser semua record yang sesuai.

Hal ini dapat dilakukan dengan sejumlah cara yang berbeda, namun sebenarnya lebih mudah untuk menyimpan satu rangkaian serialisasi ke indeks yang unik daripada mencoba melakukan sesuatu yang mewah dengan baris database, kueri, dan sebagainya.

Dengan demikian, kita memperbarui kode di atas agar terlihat seperti ini:

<?php
    
// If the 'Resources' inputs exist, iterate through them and sanitize them
if ( ! empty( $_POST['authors-commentary-resources'] ) ) {

	$resources = $_POST['authors-commentary-resources'];
	$sanitized_resources = array();
	foreach ( $resources as $resource ) {

		$resource = esc_url( strip_tags( $resource ) );
    	if ( ! empty( $resource ) ) {
		    $sanitized_resources[] = $resource;
		}

	}
	
	update_post_meta( $post_id, 'authors-commentary-resources', $sanitized_resources );

}

Jika Anda mengintip ke dalam database dan melihat kunci spesifik ini, Anda akan melihat sesuatu seperti ini disimpan sebagai nilainya:

1	a:3:{i:0;s:22:"http://tommcfarlin.com";i:1;s:19:"http://tutsplus.com";i:2;s:17:"http://google.com";}

Kita akan melihat bagaimana ini dimainkan saat kita mengambil informasi dari database nanti di artikel ini. Perhatikan juga bahwa kita perlu memperhitungkan kasus ketika pengguna menghapus semua sumber daya.

Sama seperti yang kita lakukan di bagian pertama artikel, kita cukup menghapus data meta posting jika ada nilainya. Hal ini bisa dilakukan dengan menggunakan kode yang sangat mirip:

<?php
    
// If the 'Resources' inputs exist, iterate through them and sanitize them
if ( ! empty( $_POST['authors-commentary-resources'] ) ) {

	$resources = $_POST['authors-commentary-resources'];
	$sanitized_resources = array();
	foreach ( $resources as $resource ) {

		$resource = esc_url( strip_tags( $resource ) );
		$sanitized_resources[] = $resource;

	}

	update_post_meta( $post_id, 'authors-commentary-resources', $sanitized_resources );

} else {

	if ( '' !== get_post_meta( $post_id, 'authors-commentary-resources', true ) ) {
		delete_post_meta( $post_id, 'authors-commentary-resources' );
	}

}

Sekarang kita perlu menyimpan nilai untuk kotak meta terakhir.

3. Published

Tab terakhir dari kotak meta, tab Published, akan menjadi yang termudah bagi kita untuk memperbarui karena menggabungkan semua yang telah kita lihat sejauh ini di artikel.

Secara khusus, kita iterasi melalui kumpulan nilai, menuliskannya ke array, dan kemudian membuat serialisasi array ke database. Mungkin hal yang paling penting untuk dicatat adalah bahwa kita menggunakan array asosiatif dan kita mengindeks setiap nilai berdasarkan nilai ID komentar.

Seperti yang akan kita lihat nanti di artikel, ini akan membuat lebih mudah untuk mengatur nilai pada antarmuka pengguna.

<?php
    
// If there are any values saved in the 'Resources' input, save them
if ( ! empty( $_POST['authors-commentary-comments'] ) ) {

	$comments = $_POST['authors-commentary-comments'];
	$sanitized_comments = array();
	foreach ( $comments as $comment_id => $comment_value ) {

		$comment = strip_tags( stripslashes( $comment_value ) );
		$sanitized_comments[ $comment_id ] = $comment;

	}
	
	update_post_meta( $post_id, 'authors-commentary-comments', $sanitized_comments );

}

Sama seperti yang kita lakukan di bagian sebelumnya, jika tidak ada yang ditentukan dalam array $_POST, maka kita memeriksa keberadaan nilai dalam database dan, jika ada, kita menghapusnya:

<?php
    
// If there are any values saved in the 'Resources' input, save them
if ( ! empty( $_POST['authors-commentary-comments'] ) ) {

	$comments = $_POST['authors-commentary-comments'];
	$sanitized_comments = array();
	foreach ( $comments as $comment_id => $comment_value ) {

		$comment = strip_tags( stripslashes( $comment_value ) );
		$sanitized_comments[ $comment_id ] = $comment;

	}
	
	update_post_meta( $post_id, 'authors-commentary-comments', $sanitized_comments );

} else {

	if ( '' !== get_post_meta( $post_id, 'authors-commentary-comments', true ) ) {
		delete_post_meta( $post_id, 'authors-commentary-comments' );
	}

}

Seperti yang disebutkan, contoh terakhir ini mengumpulkan segala sesuatu bersama-sama yang telah kita lihat untuk dua tab terakhir, jadi seharusnya kode yang relatif jelas untuk diikuti pada saat ini.

Sebuah Kata Tentang Database

Sebelum melangkah lebih jauh, mari luangkan waktu untuk memahami bagaimana kita bisa kueri informasi dari database.

Katakanlah Anda memiliki sebuah posting dengan ID 9000 (milik Anda akan bervariasi berdasarkan pengaturan Anda). Anda dapat mengambil ID tersebut dan melihat tabel wp_postmeta untuk melihat semua informasi meta yang terkait dengan posting.

Selanjutnya, Anda dapat menentukan kunci untuk menarik kembali hanya informasi yang terkait dengan ID dan kunci posting.

Jika Anda hanya menentukan ID posting, Anda akan melihat semua informasi meta yang terkait dengan posting tersebut. Jika Anda hanya menentukan kuncinya, Anda akan melihat semua ID posting yang berisi konten untuk draf mereka. Jika Anda menentukan ID posting dan kuncinya, Anda akan menarik kembali hanya informasi draf yang telah Anda tentukan untuk posting tunggal.

Berbicara tentang mengambil data, mari kita lihat langkah-langkah yang diperlukan untuk menampilkan data meta posting di dashboard plugin kita.

Mengambil Data

Setelah semua informasi tersimpan ke database, kita bisa mengenalkan kode yang akan mengambilnya dan menampilkannya di tab yang tepat pada setiap plugin. Yang menyenangkan tentang ini adalah bahwa ia akan menggunakan fungsi dan constructor (seperti get_post_meta dan for) yang telah kita gunakan.

1. Draft

Temukan admin/views/partial/drafts.php. Dengan asumsi Anda telah mengikuti semua hal sampai saat ini, kodenya akan terlihat seperti ini:

1	<div class="inside">
2	<textarea id="authors-commentary-drafts" name="authors-commentary-drafts"></textarea>
3	</div>

Untuk mengisi textarea ini, kita perlu membuat panggilan ke get_post_meta menggunakan ID posting saat ini dan kunci yang kita gunakan untuk menyimpan informasi lebih awal di artikel ini. Lihatlah kode berikut ini:

1	<div class="inside">
2	<textarea id="authors-commentary-drafts" name="authors-commentary-drafts"><?php echo get_post_meta( get_the_ID(), 'authors-commentary-drafts', true ); ?></textarea>
3	</div>

Perhatikan bahwa kita mengirimkan tiga parameter:

Yang pertama adalah ID posting yang diambil dengan menggunakan fungsi get_the_ID.
Yang kedua adalah kunci yang telah kita tentukan saat menyimpan data untuk mengidentifikasinya secara unik.
Yang ketiga adalah nilai boolean true yang memberi tahu fungsinya untuk mengembalikan nilai kita sebagai string dan daripada dalam array.

Jika nilainya tidak ada, maka itu hanya mengembalikan sebuah string kosong sehingga textarea-nya kosong.

2. Resources

Untuk Resources, kita membuat panggilan yang sama; namun, kali ini kita ingin iterasi melalui hasilnya sehingga kita bisa secara dinamis membuat antarmuka pengguna.

Karena cara WordPress melakukan serialisasi array, kita masih ingin informasi dikembalikan dalam format string (meskipun akan menjadi array de-serial) yang memungkinkan kita untuk menggunakan loop foreach untuk iterasi melewatinya.

<div class="inside hidden">
    <div id="authors-commentary-resources">
		<?php $resources = get_post_meta( get_the_ID(), 'authors-commentary-resources', true ); ?>
		<?php foreach ( $resources as $resource ) { ?>
			<input type="text" value="<?php echo $resource; ?>" />
		<?php } ?>
	</div><!-- #authors-commentary-resources -->
	<p><input type="submit" id="authors-commentary-add-resource" value="Add Resource" class="button" />
</div>

Singkatnya, kita mengambil informasi dari database, mengulanginya dengan menciptakan elemen input untuk setiap nilai dan kemudian me-render ke halaman.

Ini juga memungkinkan kita untuk menghapus elemen dengan hanya menghapus sebuah nilai dan kemudian memperbarui posting. Dari sana, tampilannya akan me-render ulang ia sendiri sehingga tidak ada elemen input yang kosong.

3. Published

Bisa dikatakan, ini adalah bagian termudah dari plugin. Karena kita sudah memiliki banyak kode dalam template, satu-satunya hal yang perlu kita lakukan adalah menentukan apakah nilai kotak centang diatur dalam array data meta.

Karena kita menggunakan ID komentar sebagai indeks numerik dari array, kita dapat dengan mudah memeriksa untuk melihat apakah ID komentar terdapat dalam array dari kunci meta yang dikembalikan dari data meta.

Begini caranya:

<div class="inside hidden">
    <?php $comments = $this->load_post_comments(); ?>
	<ul id="author-commentary-comments">
		<?php foreach ( $comments as $comment ) { ?>
			<li>
				<label for="authors-commentary-comment-<?php echo $comment->comment_ID ?>">
					<?php $comments = get_post_meta( get_the_ID(), 'authors-commentary-comments', true ); ?>
					<input type="checkbox" name="authors-commentary-comments[<?php echo $comment->comment_ID ?>]" id="authors-commentary-comment-<?php echo $comment->comment_ID ?>" <?php echo array_key_exists( $comment->comment_ID, $comments ) ? 'checked="checked"' : ''; ?> />
					This comment has received a reply.
				</label>
				<p>
					<em><?php echo $comment->comment_author; ?></em>:
					<?php echo $comment->comment_content; ?>
				</p>
				<hr />
			</li>
		<?php } ?>
	</ul>
</div>

Perhatikan bahwa kita mengambil nilai dari database, sekali lagi mengirimkan true sebagai nilai ketiga.

Selanjutnya, kita mengambil ID komentar saat ini dan memeriksa untuk melihat apakah nilai tersebut terdapat dalam kunci array (dengan menggunakan array_key_exists) dari data meta posting yang dikembalikan. Jika demikian, kita menandai kotak centang dicentang; jika tidak, kita tidak melakukan apapun.

Berikutnya

Pada titik ini, kita memiliki plugin yang berfungsi penuh yang memenuhi semua persyaratan yang kita tetapkan untuk dibuat mulai dari artikel pertama dalam serial.

Meskipun begitu apakah plugin itu sendiri bisa dipelihara? Artinya, apakah itu memenuhi tujuan utama serial ini?

Dalam suatu waktu, ya tapi ada ruang untuk perbaikan. Karena bagian dari pembangunan harus bekerja dengan kode yang kita warisi, kita akan melihat bagaimana cara refactor beberapa kode yang telah kita tulis agar lebih mudah dipahami dan lebih mudah dipelihara.

Selain itu, kita akan melihat alasan mengapa kita melakukan beberapa refactoring yang sedang kita lakukan. Bagaimanapun, tidak masuk akal untuk menyederhanakan kode atau memindahkannya tanpa alasan apapun

Tapi sebelum melakukan itu, teruskan dan kerjakan artikel ini dan lihat kode dari repositori GitHub yang terkait dan tinggalkan komentar, pertanyaan, atau umpan balik umum di bawah ini.