Meningkatkan Alur Kerja Anda - Memisahkan Mark-Up Anda dari Logika Anda!

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

Dalam tutorial ini saya akan menjelaskan teknik yang memungkinkan Anda memanfaatkan file template untuk semua kebutuhan HTML Anda! Tidak lagi Anda perlu 'echo' string dari dalam fungsi Anda, atau khawatir tentang masuk dan keluar dari PHP hanya untuk mengeluarkan beberapa mark-up.

Saya telah menghabiskan bertahun-tahun memanfaatkan kerangka kerja MVC (seperti Zend dan sekarang Laravel) di mana praktik terbaik adalah memisahkan 'logika pemrograman' (fungsi atau metode) dari 'tampilan' Anda (mark-up HTML yang dihasilkan). Ini selalu mengarah pada basis kode yang lebih mudah dipelihara dan sebenarnya lebih mudah untuk menulisnya. Dengan latar belakang ini, saya diminta untuk membuat solusi serupa saat mengembangkan plugin untuk WordPress! Tidak ada yang terlalu mewah - hanya sedikit 'helper' yang memungkinkan Anda menghapus semua cuplikan HTML dan 'escape' yang canggung dari fungsi Anda dan menempatkannya dengan aman di file 'template' mereka sendiri.

Jadi, semoga tutorial ini terdengar menarik bagi Anda dan tanpa basa-basi lagi, mari kita mulai!

Langkah 1 Memahami Apa yang Akan Kita Tingkatkan

Mari kita mulai tutorial ini dengan melihat apa yang akan kita perbaiki.

Sangat umum untuk melihat sesuatu seperti ini di dalam sebuah plugin: (cuplikan ini sebenarnya berasal dari salah satu tutorial saya sendiri di situs ini: p)


add_shortcode( 'faq', function() {
  $posts = get_posts( array(  // Get the FAQ Custom Post Type
		'numberposts' => 10,
		'orderby' => 'menu_order',
		'order' => 'ASC',
		'post_type' => 'faq',
	));
	$faq = '<div id="wptuts-accordion">'; // Open the container
	foreach ( $posts as $post ) { // Generate the markup for each Question
		$faq .= sprintf( ( '<h3><a href="">%1$s</a></h3><div>%2$s</div>' ),
			$post->post_title,
			wpautop( $post->post_content )
		);
	}
	$faq .= '</div>'; // Close the container
	return $faq; // Return the HTML.
});

Apakah Ada yang Salah?

Tidak ada, sungguh. Tapi itu bisa lebih bersih, lebih mudah untuk menskala dan lebih mudah dipelihara!

Berjalan dari atas ke bawah, kita dapat melihat bahwa semua dalam satu fungsi kita adalah:

Melakukan kueri database untuk posting dari jenis tertentu
Menetapkan string HTML ke variabel
Melakukan sebuah perulangan dan menggabungkan markup lebih lanjut ke string
Mengembalikan string yang dibangun

Sekarang Anda mungkin akan melihat ini dan berpikir "Masalah besar! Ini hanya beberapa baris HTML, apa masalahnya? "Dalam beberapa hal, Anda berada dalam hak untuk berpikir seperti itu. Tapi ingat, itu hanya 17 baris kode saat ini - apa yang terjadi saat Anda memperluas/memperbaiki plugin? Apa yang terjadi saat plugin Anda tumbuh menjadi 50/100/1000 baris kode (atau lebih!). Apakah Anda masih senang memiliki string HTML di sekitar fungsi Anda di berbagai tempat? Apa yang terjadi ketika Anda ingin menampilkan beberapa HTML yang membutuhkan beberapa 'escaping' yang canggung untuk bekerja dengan benar sesuai kode PHP Anda?

Mudah-mudahan Anda dapat melihat bahwa pendekatan untuk menciptakan dan menghasilkan Markup HTML ini bisa menjadi sangat bermasalah! Belum lagi itu menjadi sangat sulit untuk mempertahankan dan memperbaiki HTML saat itu hanya berserakan.

Jadi, dengan semua ini, saya telah memikirkannya untuk mengubah cara Anda berpikir tentang menghasilkan HTML di WordPress. Selama-lamanya.

Langkah 2 Membangun Plugin View Renderer

Ok, mari kita memecahkannya dengan ini.

Membuat File & Folder

Membuat folder plugin baru bernama View
Di dalam folder itu, buat file plugin view_renderer.php
Sekarang buat sebuah file bernama View.php - ini akan menjadi kelas kita

Menyertakan Kelasnya

Plugin kita sederhana, itu hanya mencakup kelas View sehingga kita dapat menggunakannya di salah satu plugin kita yang lain.

1
2	/* view_renderer.php */
3
4	include('View.php');

Ok, sekarang kita sudah menyertakan kelas View, saatnya untuk benar-benar membangunnya.

Kelas View

Di sini kita memiliki sebuah kelas bernama View dengan satu fungsi static yang disebut render (ini akan memungkinkan kita untuk menggunakan sintaks View::render( $template ) dari manapun dalam plugin kita) dan dibutuhkan dua parameter:

$filePath - Path ke file template. Jangan lupa kita akan menyimpan template kita di dalam folder View yang kita buat sebelumnya
$viewData - Setiap variabel yang ingin kita akses ke dalam template (lebih banyak lagi nanti)

Salin kode di bawah ini ke dalam View.php:


<?php

/** View.php **/

class View {

	/**
	 * -------------------------------------
	 * Render a Template.
	 * -------------------------------------
	 * 
	 * @param $filePath - include path to the template.
	 * @param null $viewData - any data to be used within the template.
	 * @return string - 
	 * 
	 */
	public static function render( $filePath, $viewData = null ) {

		// Was any data sent through?
		( $viewData ) ? extract( $viewData ) : null;

		ob_start();
		include ( $filePath );
		$template = ob_get_contents();
		ob_end_clean();

		return $template;
	}
}
?>

Jadi Apa yang Sebenarnya Terjadi di Sini?

Pertama-tama, kita memeriksa apakah variabel $viewData memiliki sebuah nilai (yaitu apakah kita mengirim sesuatu untuk digunakan dalam template?). Jika iya, kita mengekstrak isinya (lebih lanjut tentang ini nanti)
Kemudian kita memanfaatkan buffer output dari PHP. Ini memungkinkan kita untuk mengurai file PHP dan menyimpan isinya ke sebuah variabel
Akhirnya kita mengembalikan string-nya

Catatan: Jangan lupa untuk mengaktifkan plugin sekarang dari panel Admin

Sepertinya cukup sederhana ya? Tepat sekali! Tapi sementara tampaknya hanya menjadi fungsi kecil yang sangat sederhana, ini benar-benar memberi kita kemewahan untuk bisa menulis plugin kita dengan mode super terorganisir, terskala, dan mudah dipelihara. Tolong, izinkan saya untuk menunjukkan...

Langkah 3 Contoh Dunia Nyata

Mari membuat plugin sederhana bernama Slider

** Catatan: Ini untuk tujuan demonstrasi saja. Jangan ragu untuk menggunakan plugin Anda sendiri di sini.

Buat folder bernama Slider
Di folder itu, buat file bernama Slider.php
Salin kode di bawah ini ke Slider.php


<?php
/*
Plugin Name: Slider
Plugin URI: https://wp.tutsplus.com
Description: Generic Slider plugin to demonstrate View Renderer.
Author: Shane Osbourne
Version: 0.1
Author URI: http://wp.tutsplus.com/author/shaneosbourne/
*/
?>

Menambahkan shortcode

Oke, sekarang kita akan menambahkan shortcode yang akan mengambil 5 posting terbaru dan menampilkannya dalam daftar dengan judul dan kontennya. (Demi singkatnya, kita akan menambahkan kelas plugin kita dan hook tindakan kita ke file plugin yang sama, tapi tolong jangan lakukan ini dalam 'kehidupan nyata': p)


/**
 * Add the Shortcode (PHP 5.3 and above)
 */
add_shortcode( 'slider', function() {

	return Slider::display();

} );

Itu akan memungkinkan kita untuk hanya menggunakan [slider] di posting/halaman manapun dan akan menampilkan hasil dari Slider::display()

Menambahkan Metode Slider Class & `display()`


class Slider {

	public static function display() {

		// Return HTML HERE.

	}
}

Mendapatkan 5 Posting Terbaru.



/*
 * Get the latest 5 posts
 */
public static function display() {

	$posts = get_posts( array( 'numberposts' => 5 ) );

}

Sekarang kita memiliki array objek post dan kita siap untuk membangun HTML kita melalui perulangan melalui mereka. Tapi kita tidak akan hanya mulai memasukkan string HTML ke dalam fungsi kita disini! Sebagai gantinya, kita akan mengirimkan objek array ke file template dan membuat semua HTML dihasilkan jauh dari cara yang berbahaya.

Membuat Template

Buat folder yang disebut templates
Di dalam folder itu, buatlah sebuah file bernama 01.template.php

Template ini akan menampung semua markup kita dan akan memungkinkan kita untuk mengakses data yang kita kirimkan nanti.

Mengirimkan Data ke Template

Setiap kali kita ingin menggunakan variabel apapun dalam template kita, kita cukup mengirimkannya dengan menetapkan nilai pada array $viewData. Siapapun yang terbiasa menggunakan kerangka kerja MVC akan merasa betah dengan pendekatan ini.

1
2	$viewData = array( 'posts' => $posts );

Kunci array di sini ('posts') adalah penting karena begitulah cara kita merujuk data dari dalam template. (Anda bisa menyebut ini apapun yang Anda suka, tapi tetap berpeganglah pada sesuatu yang masuk akal.)

Membangun Template

Ok, jadi kita sudah melihat bagaimana cara mengambil 5 posting terbaru dan cara mengirimkan objek array ke template, sekarang saatnya menyempurnakan file template.

1
2	<div>
3	<ul>
4	<?php foreach ($posts as $post ) : ?>
5	<!-- Loop -->
6
7	<li>
8	<h1><?= $post->post_title ?></h1>
9	<p><?= $post->post_content ?></p>
10	</li>
11
12	<!-- Loop End -->
13	<?php endforeach; ?>
14	</ul>
15	</div>

Ah! Seberapa bagus rasanya memiliki semua markup itu dalam file terpisahnya sendiri, jauh dari pengambilan data dan logika pemrograman kita? Bagus, saya tahu! Bagian terpenting dari pendekatan ini adalah bahwa kita hanya 'mengakses' data dari variabel dalam template. Semua 'logika' harus dilakukan di dalam metode yang memanggil template. Hal ini mengarah pada alur kerja yang sangat bagus karena Anda memiliki keterpisahan yang lengkap.

Bayangkan betapa mudahnya sekarang ketika Anda siap untuk membangun plugin ini. Tidak ada lagi penggabungan string dan karakter escape dalam fungsi.

Mengembalikan Template yang Di-render

Ok, kita sudah melihat semua komponen, mari kita lihat bagaimana semuanya cocok untuk memungkinkan kita me-render template dan mendapatkan string kembali (yang kita bisa kembali ke shortcode kita):

Pertama kita perlu menyimpan referensi ke template kita di properti static
Kemudian kita perlu memeriksa apakah kelas View ada
Kemudian kita menghasilkan path lengkap ke file template kita dengan mengambil referensi ke direktori plugin saat ini dan menggabungkan properti static $template kita
Akhirnya, kita memanggil metode View::render() dan meneruskan dua parameter yang dibutuhkan

Dalam kasus ini, kita return hasil dari template yang di-render karena begitulah cara shortcode bekerja. Tapi jika Anda perlu meng-echo hasilnya sebagai gantinya (misalnya, ketika Anda membuat halaman Admin, callback mengharapkan keluaran Anda dicetak secara langsung), maka ganti return dengan echo.

Metode `display()` Secara Penuh


	class Slider {

		static $template = '/templates/01.template.php';

		public static function display() {

			if ( class_exists( 'View' ) ) {

				// Get the last 5 posts
				$posts = get_posts( array( 'numberposts' => 5 ) );

				// Set view Data
				$viewData = array(
					'posts' => $posts
				);

				// Get the full path to the template file.
				$templatePath = dirname( __FILE__ ) . static::$template;

				// Return the rendered HTML
				return View::render( $templatePath, $viewData );

			}
			else {
				return "You are trying to render a template, but we can't find the View Class";
			}
		}
	}

Saya harap Anda dapat menghargai tingkat organisasi pendekatan ini akan membayar Anda! Sekarang fungsi display Anda hanya bertanggung jawab untuk mengumpulkan data yang dibutuhkan dan mengembalikan hasil dari template yang di-render.

Lebih Jauh

Contoh kita di atas adalah tentang dasar yang didapatnya. Meski begitu, ini masih merupakan alur kerja yang jauh lebih baik. Sekarang mari kita lihat contoh lain yang menunjukkan betapa membantunya hal itu.

Katakanlah, misalnya, plugin Anda menggunakan kotak meta kustom. Untuk melakukannya kita harus:

Menambahkan fungsi constructor ke kelas Slider
Menambahkan sebuah metode untuk menambahkan metabox ke setiap posting
Menambahkan sebuah metode callback untuk me-render HTML untuk kotak meta
Menambahkan hook yang sesuai di file plugin untuk menginstansiasi kelas hanya saat menambahkan/mengedit posting
Akhirnya, kita akan menambahkan file template seperti yang kita lakukan sebelumnya, dan menambahkannya sebagai properti di awal kelas


	class Slider {

		static $metaBox = '/templates/metabox.template.php';

		public function __construct() {
			add_action( 'add_meta_boxes', array( $this, 'add_some_meta_box' ) );
		}

		/**
		 * Adds the meta box container
		 */
		public function add_some_meta_box() {
			add_meta_box(
				'some_meta_box_name',
				'Some Meta Box Headline',
				array( $this, 'render_meta_box_content' ),
				'post',
				'advanced',
				'high',
			);
		}

		/**
		 * Render Meta Box content
		 */
		public function render_meta_box_content() {
			/** From the Codex **/
			echo '<h1>TEST OUTPUT - this gets rendered inside the meta box.</h1>';
		}
	} // class

	// add the action hook
	function call_Slider() {
		return new Slider();
	}

	if ( is_admin() )
		add_action( 'load-post.php', 'call_Slider' );

Lihatlah metode render_meta_box_content di sana. Ini adalah kesempatan sempurna untuk menggunakan View Renderer! Bayangkan contoh yang lebih realistis seperti ini:


	/**
	 * Render Meta Box content
	 */
	public function render_meta_box_content( $post ) {

		$name = get_post_meta( $post->ID, "name" );
		$fieldName = static::$fieldName;

		echo '<h3>Your name: </h3>';
		echo '<label for="' . $fieldName . '">Name: </label>';
		echo '<input id="' . $fieldName . '" name="' . $fieldName . '" value="' . $name . '" placeholder="Enter your name here" />';
		echo '<button class="button">Update</button>';
	}

Urg! Tentu, itu berhasil, tapi sangat sulit melakukannya dengan cara ini! Bagaimana kalau kita menggunakan View Renderer kita sebagai gantinya.


	/**
	 * Render Meta Box content
	 */
	public function render_meta_box_content( $post ) {

		$viewData = array(
			'name'  => get_post_meta( $post->ID, 'name' ),
			'field' => static::$fieldName
		);

		$templatePath = dirname( __FILE__ ) . static::$metabox;
		echo View::render( $templatePath, $viewData );

	}

Dan di file template:


	<h3>Your name: </h3>
	<label for="<?= $field ?>">Name: </label>
	<input id="<?= $field ?>" name="<?= $field ?>" value="<?= $name ?>" placeholder="Enter your name here" />
	<button class="button">Update</button>

Ini mungkin hanya tampak seperti manfaat yang sangat kecil dalam contoh ini. Tapi percayalah, jika Anda tetap mempedulikan pemisahan seperti ini, Anda akan menjadi pengembang WordPress yang jauh lebih baik dengan cukup cepat.

Kesimpulan

Saya pikir sekarang Anda mungkin memiliki pemahaman yang baik tentang apa yang ingin kita capai di sini dan saya mendorong Anda untuk mencoba menggunakan teknik ini saat membuat plugin di masa depan. Mudah-mudahan Anda akan menemukan 'pemisahan perhatian' bermanfaat bagi Anda.

Catatan Tutorial:

Meskipun kita membuat View Renderer menjadi plugin dengan sendirinya, Anda cukup mudah menambahkannya ke plugin yang ada. Ini akan menghapus langkah ekstra karena harus memastikan plugin diaktifkan sebelum Anda menggunakannya di mana saja.
Anda tidak terbatas pada kasus penggunaan yang dijelaskan dalam tutorial ini, bisa digunakan dimanapun Anda biasanya menampilkan HTML (Bagaimana dengan menggunakan file template untuk menampilkan beberapa JavaScript 'in-line'? atau bagaimana dengan beberapa aturan CSS spesifik berdasarkan pilihan yang diambil dari database?)

Saya akan tertarik untuk mengetahui kegunaan apa yang telah Anda temukan untuk teknik ini, jadi mohon bagikan di komentar :)