logo
Bahasa

Pembuatan Widget

PopojiCMS - CMS Indonesia, Buat Sendiri Rasa Webmu, Karena Kami CMS Gratis Indonesia.

Pada engine PopojiCMS versi 2.x.x hadir fitur baru yaitu Widget, fitur ini seperti fitur plugin pada CMS lainnya. Dimana dengan widget ini akan membuat website lebih powerfull lagi. Engine widget ini dibagun di atas library PlatesPHP, silahkan pelajari library tersebut untuk mengetahui lebih jauh fungsinya.

Fungsi hadirnya widget adalah agar dapat membuat suatu potongan script yang dapat di inject ke seluruh bagian theme dan nantinya bisa dipanggil kapan saja. Untuk pembuatan widget sangat mudah karena tinggal membuat file widgetnya di folder po-content/widget/ dan widget tersebut akan terpanggil otomatis pada theme.

Agar lebih memahami pembuatan widget, mari ikuti contoh pembuatan widget berikut ini. Di mana contoh pembuatan ini berkaitan dengan dokumentasi komponen yang sudah ada yaitu contoh pembuatan komponen video.

Dalam pembuatan contoh widget video ini yang perlu dipersiapkan adalah membuat folder dan file widget pada folder :

  • po-content/widget/video/
  • po-content/widget/video/video.php

Kemudian jika developer menginginkan widgetnya memiliki pengaturan sendiri, maka 2 file ini wajib dibuat :

  • install.php --> file yang akan dijalankan ketika widget di install
  • uninstall.php --> file yang akan dijalankan ketika widget di uninstall

Setelah itu isi script awal widget adalah seperti ini :

<?php
/*
 *
 * - PopojiCMS Widget File
 *
 * - File : video.php
 * - Version : 1.0
 * - Author : Jenuar Dalapang
 * - License : MIT License
 *
 *
 * Ini adalah file php yang di gunakan untuk menangani proses di bagian depan untuk widget video.
 * This is a php file for handling front end process for video widget.
 *
*/

/**
 * Memanggil class utama PoTemplate (diharuskan).
 *
 * Call main class PoTemplate (require).
 *
*/
use PoTemplateEngine;
use PoTemplateExtensionExtensionInterface;

/**
 * Mendeklarasikan class widget diharuskan dengan mengimplementasikan class ExtensionInterface (diharuskan).
 *
 * Declaration widget class must with implements ExtensionInterface class (require).
 *
*/
class Video implements ExtensionInterface
{

	/**
	 * Fungsi ini digunakan untuk menginisialisasi class utama (diharuskan).
	 *
	 * This function use to initialize the main class (require).
	 *
	*/
	public function __construct()
	{
		$this->core = new PoCore();
	}

	/**
	 * Fungsi ini digunakan untuk mendaftarkan semua fungsi widget (diharuskan).
	 *
	 * This function use to register all widget function (require).
	 *
	*/
    public function register(Engine $templates)
    {
        $templates->registerFunction('video', [$this, 'getObject']);
    }

	/**
	 * Fungsi ini digunakan untuk menangkap semua fungsi widget (diharuskan).
	 *
	 * This function use to catch all widget function (require).
	 *
	*/
    public function getObject()
    {
        return $this;
    }

}

Yang harus diperhatikan dalam script widget adalah :

class Video implements ExtensionInterface --> deklarasi class Video dengan mengimplementasi class ExtensionInterface
$templates->registerFunction('video', [$this, 'getObject']); --> register semua function video yang akan dimasukan ke theme

Kemudian kita tentukan fungsi widget yang akan dibuat, disini akan dibuat 3 fungsi widget video, yaitu fungsi mengambil data video yang nantinya akan digunakan pada halaman video, fungsi pagination video pada halaman video dan fungsi video headline pada sidebar. Berikut ketiga fungsi tersebut :

/**
 * Fungsi ini digunakan untuk mengambil daftar video.
 *
 * This function use to get list of video.
 *
 * $limit = integer
 * $order = string
 * $page = integer from get active page
*/
public function getVideo($limit, $order = 'id_video DESC', $page)
{
	$offset = $this->core->popaging->searchPosition($limit, $page);
	$video = $this->core->podb->from('video')
		->orderBy($order)
		->limit($offset.','.$limit)
		->fetchAll();
	return $video;
}

/**
 * Fungsi ini digunakan untuk membuat nomor halaman pada halaman album
 *
 * This function use to create pagination in album page.
 *
 * $limit = integer
 * $page = integer from get active page
 * $type = 0 or 1
 * $prev = string previous text
 * $next = string next text
*/
public function getVideoPaging($limit, $page, $type, $prev, $next)
{			
	$totaldata = $this->core->podb->from('video')->count();
	$totalpage = $this->core->popaging->totalPage($totaldata, $limit);
	$pagination = $this->core->popaging->navPage($page, $totalpage, BASE_URL, 'video', 'page', $type, $prev, $next);
	return $pagination;
}

/**
 * Fungsi ini digunakan untuk mengambil daftar headline video.
 *
 * This function use to get list of headline video.
 *
 * $limit = integer
 * $order = string
*/
public function getHeadlineVideo($limit, $order = 'id_video DESC')
{
	$video = $this->core->podb->from('video')
		->where('headline', 'Y')
		->orderBy($order)
		->limit($limit)
		->fetchAll();
	return $video;
}

Setelah widget selesai dibuat maka cara menggunakannya adalah sebagai berikut. Jika melihat ke dokumentasi pembuatan komponen pada video.php di bagian frontend akan didapatkan script seperti ini :

<?=$this->layout('index');?>

<section id="page-title" class="page-title-mini" style="margin-top:-80px;">
	<div class="container clearfix">
		<ol class="breadcrumb">
			<li><a href="<?=BASE_URL;?>"><?=$this->e($front_home);?></a></li>
			<li><a href="<?=BASE_URL.'/video';?>">Video</a></li>
		</ol>
	</div>
</section>

<section id="content">
	<div class="content-wrap">
		<div class="container clearfix">
			<div id="portfolio" class="portfolio-masonry clearfix">
			<?php
				$videos = $this->pocore()->call->podb->from('video')
					->orderBy('id_video')
					->limit('8')
					->fetchAll();
				foreach($videos as $video){
			?>
				<article class="portfolio-item">
					<div class="portfolio-image">
						<iframe src="<?=$video['url'];?>" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
					</div>
					<div class="portfolio-desc">
						<h5><?=$video['title'];?></h5>
					</div>
				</article>
			<?php } ?>
			</div>
			<div class="col-md-12 text-center" style="margin-top:30px;">
				<ul class="pagination nobottommargin">
					<?php
						$totaldata = $this->pocore()->call->podb->from('video')->count();
						$totalpage = $this->pocore()->call->popaging->totalPage($totaldata, '8');
						echo $this->pocore()->call->popaging->navPage($this->e($page), $totalpage, BASE_URL, 'video', 'page', '1', $this->e($front_paging_prev), $this->e($front_paging_next));
					?>
				</ul>
			</div>
			<script type="text/javascript">
				jQuery(window).load(function(){
					var $container = $('#portfolio');
					$container.isotope({ transitionDuration: '0.65s' });
					$(window).resize(function() {
						$container.isotope('layout');
					});
				});
			</script>
		</div>
	</div>
</section>

Lalu script di atas akan kita ganti dengan penggunaan widget seperti berikut :

<?=$this->layout('index');?>

<section id="page-title" class="page-title-mini" style="margin-top:-80px;">
	<div class="container clearfix">
		<ol class="breadcrumb">
			<li><a href="<?=BASE_URL;?>"><?=$this->e($front_home);?></a></li>
			<li><a href="<?=BASE_URL.'/video';?>">Video</a></li>
		</ol>
	</div>
</section>

<section id="content">
	<div class="content-wrap">
		<div class="container clearfix">
			<div id="portfolio" class="portfolio-masonry clearfix">
			<?php
				$videos = $this->video()->getVideo('8', 'id_video ASC', $this->e($page));
				foreach($videos as $video){
			?>
				<article class="portfolio-item">
					<div class="portfolio-image">
						<iframe src="<?=$video['url'];?>" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
					</div>
					<div class="portfolio-desc">
						<h5><?=$video['title'];?></h5>
					</div>
				</article>
			<?php } ?>
			</div>
			<div class="col-md-12 text-center" style="margin-top:30px;">
				<ul class="pagination nobottommargin">
					<?=$this->video()->getVideoPaging('8', $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>
				</ul>
			</div>
			<script type="text/javascript">
				jQuery(window).load(function(){
					var $container = $('#portfolio');
					$container.isotope({ transitionDuration: '0.65s' });
					$(window).resize(function() {
						$container.isotope('layout');
					});
				});
			</script>
		</div>
	</div>
</section>

Terlihat perubahan yang cukup drastis saat digunakannya widget, dari script seperti ini :

$videos = $this->pocore()->call->podb->from('video')
	->orderBy('id_video')
	->limit('8')
	->fetchAll();

menjadi :

$videos = $this->video()->getVideo('8', 'id_video ASC', $this->e($page));

kemudian dari script seperti ini :

$totaldata = $this->pocore()->call->podb->from('video')->count();
$totalpage = $this->pocore()->call->popaging->totalPage($totaldata, '8');
echo $this->pocore()->call->popaging->navPage($this->e($page), $totalpage, BASE_URL, 'video', 'page', '1', $this->e($front_paging_prev), $this->e($front_paging_next));

menjadi :

<?=$this->video()->getVideoPaging('8', $this->e($page), '1', $this->e($front_paging_prev), $this->e($front_paging_next));?>

Lebih dimudahkan bukan? Kita lanjut dengan membuat tampilan fungsi headline video pada sidebar. Silahkan buka file po-content/themes/chingsy/sidebar.php, kemudian tempatkan script berikut ini paling bawah pada element sidebar :

<div class="widget clearfix">
	<h4>Video</h4>
	<?php
		$video_headlines = $this->video()->getHeadlineVideo('1', 'id_video DESC');
		foreach($video_headlines as $video_headline){
	?>
	<iframe src="<?=$video_headline['url'];?>" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	<?php } ?>
</div>

Hal terakhir adalah jika ingin widget buatan kita bisa digunakan oleh orang lain ataupun dijual pada toko PopojiCMS maka perlu dilakukan pendistribusian widget. Berikut adalah caranya :

1. Masuk ke folder po-content/widget/video/, kemudian paket semua file widget menjadi file zip (ingat harus file zip), kemudian beri nama file zip tersebut dengan nama widget-video.zip

2. Kemudian buat file README untuk menerangkan cara memasang widget ini nantinya.

3. Widget siap untuk didistribusikan.