7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Creative Coding

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

Scroll to top
Read Time: 11 mins

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)

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:

  1. Melakukan kueri database untuk posting dari jenis tertentu
  2. Menetapkan string HTML ke variabel
  3. Melakukan sebuah perulangan dan menggabungkan markup lebih lanjut ke string
  4. 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

  1. Membuat folder plugin baru bernama View
  2. Di dalam folder itu, buat file plugin view_renderer.php
  3. 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.

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:

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

Salin kode di bawah ini ke dalam View.php:

Jadi Apa yang Sebenarnya Terjadi di Sini?

  1. 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)

  2. Kemudian kita memanfaatkan buffer output dari PHP. Ini memungkinkan kita untuk mengurai file PHP dan menyimpan isinya ke sebuah variabel

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

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

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)

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

Menambahkan Metode Slider Class & display()

Mendapatkan 5 Posting Terbaru.

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

  1. Buat folder yang disebut templates
  2. 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.

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.

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):

  1. Pertama kita perlu menyimpan referensi ke template kita di properti static
  2. Kemudian kita perlu memeriksa apakah kelas View ada
  3. Kemudian kita menghasilkan path lengkap ke file template kita dengan mengambil referensi ke direktori plugin saat ini dan menggabungkan properti static $template kita
  4. 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

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:

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

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

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

Dan di file template:

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 :)

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.