Implementasi Shortcode pada Codeigniter 3

Jika kalian pernah atau bahkan sering mengembangkan website Wordpress, mungkin kalian tidak asing lagi dengan fitur shortcode yang ada pada Wordpress. Nah, kira kira bagaimana jika kita implementasikan fitur shortcode tersebut pada Codeigniter 3?

Oke, langsung aja gua mau coba sharing cara implementasinya.

Sebelum lanjut, buat kalian yang belum tau apa itu fitur shortcode, gua coba jelaskan dikit ya sesuai apa yang gua ketahui hehe..

Jadi, shortcode adalah sebuah fitur yang memungkinkan pengguna untuk menyisipkan fungsionalitas tertentu ke dalam konten situs web tanpa perlu menulis kode HTML atau PHP secara langsung.

Dengan fitur shortcode ini, kita cukup menginputkan tag shortcode yang kita inginkan dan telah didefinisikan ke dalam content kita. Kemudian, program PHP akan mereplace tag shortcode tersebut sesuai dengan fungsi yang telah didefinisikan pada program. Contoh format tag shortcode adalah [nama_tag_shortcode] atau [nama_tag_shortcode id=1234]. Yang mana, id adalah parameter yang diberikan kepada fungsi yang akan handle shortcode tersebut.

Supaya tidak bingung, gua coba ke contoh kasus dasar ya. Contoh kasus nya, pada projek Codeigniter 3 kita, misalkan kita ingin membuat fungsi shortcode yang mana, shortcode tersebut akan generate kode youtube embed, lalu menampilkan nya ke layar. Misal, tag shortcode yang mau kita definisikan adalah [youtube_tag id=Ab123]. Yang mana, parameter id adalah id video youtube nya.

Langsung aja, gimana cara implementasikannya pada Codeigniter 3.

Konfigurasi Dasar Projek Codeigniter 3

Pertama, tentunya kita siapkan dulu projek Codeigniter 3 kita. Nah, pada tahap ini, gua anggap kalian sudah paham mengenai config dasar Codeigniter 3 dari proses download hingga siap digunakan.

Siapkan Library Shorcode untuk Codeigniter 3

Kedua, siapkan library shortcode nya. Setelah gua browsing, ternyata ada orang ‘baik’ yang telah membuat library untuk handle fitur shortcode ini pada Codeigniter. Jadi, kita tinggal pakai saja.

Ya, meskipun menurut gua pas awal lihat library ini, agak bingung cara menggunakannya. Apalagi jika kita belum mengetahui fitur shortcode versi wordpress nya. Tapi, sejauh gua mencoba library ini, belum pernah menemukan masalah sih.

Oke, langsung aja silahkan akses link ini untuk copy library shortcode dari sumber nya langsung. Atau boleh kalian copy library nya dari kode program di bawah ini.

Jika sudah, silahkan buat file baru dengan nama ‘Shortcode’ di dalam folder library pada projek Codeigniter 3 kalian. Lalu, paste kode program library shortcode yang sudah kalian copy ke file ini.

Implementasi Shortcode di Method yang Diinginkan

Langkah selanjutnya, implementasi fungsi shortcode di file controller dan method yang kita inginkan.

Jika file library shortcode sudah oke, buka file controller di mana terdapat method yang kalian ingin implementasi fitur shortcode tersebut. Kalau gua disini menggunakan file controller atau class dengan nama “Shortcode_pages” di method “index”. Silahkan kalian sesuaikan saja ya.

Pada method tersebut, silahkan load terlebih dahulu library “shortcode”-nya dengan kode program

$this->load->library('shortcode');

Atau bisa juga kalian load library tersebut melalui method constructor-nya. Atau bisa juga melalui file autoload yang ada pada /config/autoload.php.

Jika sudah, kita siapkan terlebih dahulu fungsi atau method yang akan handle tag shortcode nya. Seperti contoh kasus di awal, gua akan membuat fungsi yang akan mereplace shortcode tersebut dengan kode youtube embed sesuai parameter id youtube yang diberikan.

Dari yang gua pelajari, kita bisa mendefiniskan banyak tag shortcode dengan nama tag yang harus berbeda-beda. Dan best practice nya menurut gua, satu shortcode tag di handle oleh satu kode program fungsi atau method. Alasannya supaya lebih efisien dan efektif aja sih. Tapi, hal tersebut bukan suatu mandatory. Jadi, silahkan sesuaikan dengan studi kasus kalian masing-masing.

Ada dua cara yang dapat kita gunakan untuk membuat program yang akan handle tag shortcode pada Codeigniter 3.

Kita buat method di class controller yang sama dengan method pemanggilnya. Jadi, dalam contoh gua ini, gua membuat method baru di class controller “Shotcode_pages”.
Kita bisa juga membuat fungsi di dalam file helper pada Codeigniter 3. Cara ini cocok apabila nantinya kita akan mendefiniskan banyak shortcode tag. Jadi, dalam satu file helper tersebut akan berisikan kumpulan fungsi yang akan handle satu atau beberapa tag shortcode.

Pada artikel ini, gua akan coba menggunakan cara yang pertama terlebih dahulu ya. Gua akan buat satu method baru di class “Shortcode_pages” dengan nama “youtube_embed” yang mana, method ini akan mengembalikan kode youtube embed berdasarkan id youtube yang diberikan. Berikut kode programnya.

public static function youtube_embed($attrs='', $content='')
  	{
  		$youtube_embed_code = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$attrs['id'].'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>';

  		return $youtube_embed_code;
  	}

Setelah itu, balik lagi ke method awal dimana kalian ingin implementasikan shortcode tag. Kalau gua disini, berarti method "index" di class “Shortcode_pages”. Lalu kita tambahkan terlebih dahulu method yang akan handle shortcode tag yang telah kita buat tadi. Kalau gua disini, berarti method “youtube_embed” ke dalam library shortcode dengan syntax

$this->shortcode->add('nama_shortcode_tag', array('nama_Class', 'nama_method'));

Nah, kalau yang gua contohkan disini, berarti kode yang gua masukkan adalah

$this->shortcode->add('youtube_tag', array('Shortcode_pages', ‘youtube_embed’));

Silahkan kalian sesuaikan saja dengan class, method dan nama tag shotcode yang kalian gunakan.

Selanjutnya, yaitu menjalankan library shorcode dan mengirimkan parameter berupa content yang dapat berisikan shortcode untuk mencari dan menjalankan shortcode tag sesuai dengan apa yang telah didefinisikan sebelumnya.

$out = $this->shortcode->run($content);

Dan berikut full kode program dari class controller “Shortcode_pages”.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Shortcode_pages extends CI_Controller {

	public static function youtube_embed($attrs='', $content='')
  	{
  		$youtube_embed_code = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$attrs['id'].'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>';

  		return $youtube_embed_code;
  	}

    public function index()
	{
		$this->load->helper('shortcode_fun');
		$this->load->library('shortcode');

        $this->shortcode->add('youtube_tag', array('Shortcode_pages', 'youtube_embed'));

        $content = '<p>Di awal tahun ini, port USB front panel pada casing PC lama gua rusak. Setelah beberapa hari mencari referensi mengenai casing PC yang sesuai budget gua, akhirnya gua memutuskan untuk mengganti casing PC gua dengan casing PC Digital Alliance (DA) Gaming N26. Alasan gua membeli merk dan tipe casing ini ya pertama karena sesuai budget dan kedua di paket pembeliannya, sudah termasuk 3 buah fan ARGB, 1 LED strip ARGB, 1 controller ARGB yang bisa sync ke motherboard beserta remote nya dan ada yang jual di toko komputer deket rumah gua.</p>

			[youtube_tag id=MPdkdOhtr48 /]

			<p>Casing ini gua beli di toko komputer dekat rumah gua secara offline. Yaa lumayan lah bisa menghemat biaya ongkir, biaya tambahan packing kayu dan ga perlu menunggu proses pengiriman haha. Selain itu, harga casing ini di toko tersebut, lebih murah, yaitu Rp 675.000 jika dibandingkan dengan harga di toko resmi Digital Alliance di Tokopedia yang harganya Rp 700.000. Gua ga tau alasannya sih kenapa bisa lebih murah. Tapi, yang sangat disayangkan, pada saat gua buat artikel ini, stok casing tipe ini sudah habis di toko tempat gua beli.</p>';
		
        $out = $this->shortcode->run($content);

		echo "<p><h4><strong>Konten Tanpa Melalui Library Shortcode</strong></h4></p>";
		echo $content;
		echo "<p><h4><strong>Konten Melalui Library Shortcode</strong></h4></p>";
		echo $out;
  	}
}

Selanjutnya, silahkan jalankan program kalian di browser. Dan lihat apakah fitur tag shortcode sudah berhasil atau belum. Gua sengaja memberikan perbedaan antara output menggunakan library shortcode dan output tanpa library shortcode.

Hasil Implementasi Shortcode pada Codeigniter 3 [docs/kuhomi.id].