logo
Bahasa

Pembuatan Komponen

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

Pada engine PopojiCMS versi 2.x.x pembuatan komponen menjadi satu tempat saja yaitu pada folder po-content/component/. Dengan sistem satu tempat ini maka tampilan pada admin dan pada frontend terfokus di satu tempat saja.

Untuk komponen pada PopojiCMS menimal mempunyai 3 file ini :

  • admin_componentname.php --> file utama komponen untuk admin area, penamaan harus dimulai dengan 'admin_'
  • admin_javascript.js --> file javascript untuk admin area, penamaan harus dimulai dengan 'admin_'
  • componentname.php --> file utama komponen untuk frontend, bisa di abaikan jika komponen hanya untuk admin area saja

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

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

Setelah itu untuk komponen yang ingin support multi bahasa maka wajib membuat file bahasa pada folder po-content/lang/ :

  • componentname/id.php
  • componentname/gb.php
  • dan file bahasa lainnya jika dinginkan

Jika komponen membutuhkan tampilan di halaman depan website maka perlu dibuat file berikut :

  • po-content/themes/folderthemeactive/componentname.php

Dan terakhir jika komponen memiliki widget pelengkap silahkan buat widgetnya pada folder po-content/widget/componentname/componentname.php. Bagaimana? Cukup mudah bukan? Untuk lebih memahami pembuatan komponen mari langsung saja kita buat contoh komponennya.

 

I. Persiapan Awal

Pada contoh pembuatan komponen ini, kita akan membuat komponen Video. Mari ikuti langkah-langkah persiapannya :

1. Buat folder baru yaitu video pada folder po-content/component/. Kemudian buat 4 file utama komponen ini :

- po-content/component/video/
-- admin_video.php
-- admin_javascript.js
-- video.php
-- index.html (file 403 forbidden milik PopojiCMS, ada di semua folder)


2. Kemudian untuk bahasa komponen kita abaikan pada contoh kali ini.

3. Untuk file pengaturan sendiri (install.php dan uninstall.php) akan kita buat pada proses Distribusi Komponen.

4. Agar lingkungan pembuatan komponen bisa diakses pada halaman admin, maka berikan dulu permission CRUD component lewat pengaturan di level pengguna terus berikan saja akses ke level superadmin dulu. (Klik menu Pengguna lalu pilih Semua Pengguna terus klik tombol Level Pengguna)

5. Tambahkan akses menu komponen video lewat Menu Manager pada group menu Dashboard, pada contoh ini :

Title : Video
URL : admin.php?mod=video
Class :


Kemudian menu videonya di drag & drop di bawah menu Kontak, hal ini tentu saja terserah Anda mau di masukan ke bagian mana.

 

II. Pembuatan Database

Untuk database di sini akan dibuatkan tabel baru yaitu tabel video. Pembuatan tabel baru ini bisa melalui phpmyadmin dengan cara penambahan tabel dan field manual atau langsung dengan script sql di bawah ini :

DROP TABLE IF EXISTS `video`;

CREATE TABLE IF NOT EXISTS `video` (
  `id_video` int(5) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `date` date NOT NULL,
  `url` varchar(255) NOT NULL,
  `headline` enum('Y','N') NOT NULL DEFAULT 'Y',
  PRIMARY KEY (`id_video`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;

 

III. Pembuatan admin_video.php

Di file inilah komponen video untuk admin akan dibuat, pertama tentukan apakah komponen ini akan memiliki proses CRUD apa saja. Untuk script komponen video awal akan berbentuk seperti ini :

<?php
/*
 *
 * - PopojiCMS Admin File
 *
 * - File : admin_video.php
 * - Version : 1.0
 * - Author : Jenuar Dalapang
 * - License : MIT License
 *
 *
 * Ini adalah file php yang di gunakan untuk menangani proses admin pada halaman video.
 * This is a php file for handling admin process for video page.
 *
*/

/**
 * Fungsi ini digunakan untuk mencegah file ini diakses langsung tanpa melalui router.
 *
 * This function use for prevent this file accessed directly without going through a router.
 *
*/
if (!defined('CONF_STRUCTURE')) {
	header('location:index.html');
	exit;
}

/**
 * Fungsi ini digunakan untuk mencegah file ini diakses langsung tanpa login akses terlebih dahulu.
 *
 * This function use for prevent this file accessed directly without access login first.
 *
*/
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser']) AND $_SESSION['login'] == 0) {
	header('location:index.php');
	exit;
}

class Video extends PoCore
{

	/**
	 * Fungsi ini digunakan untuk menginisialisasi class utama.
	 *
	 * This function use to initialize the main class.
	 *
	*/
	function __construct()
	{
		parent::__construct();
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan halaman index video.
	 *
	 * This function use for index video page.
	 *
	*/
	public function index()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'read')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan data json pada tabel.
	 *
	 * This function use for display json data in table.
	 *
	*/
	public function datatable()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'read')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan dan memproses halaman tambah video.
	 *
	 * This function is used to display and process add video page.
	 *
	*/
	public function addnew()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'create')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan dan memproses halaman edit video.
	 *
	 * This function is used to display and process edit video.
	 *
	*/
	public function edit()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'update')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan dan memproses halaman hapus video.
	 *
	 * This function is used to display and process delete video page.
	 *
	*/
	public function delete()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'delete')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

	/**
	 * Fungsi ini digunakan untuk menampilkan dan memproses halaman hapus multi video.
	 *
	 * This function is used to display and process multi delete video page.
	 *
	*/
	public function multidelete()
	{
		if (!$this->auth($_SESSION['leveluser'], 'video', 'delete')) {
			echo $this->pohtml->error();
			exit;
		}
		
	}

}

 

Jika dilihat komponen ini terdiri dari :

- class Video extends PoCore --> setiap deklarasi komponen harus seperti ini, nama komponen ditulis huruf besar di awal
-- function __construct() --> diharuskan untuk memanggil library core PopojiCMS
-- public function index() --> diharuskan untuk tampilan awal komponen ketika dipanggil
-- public function datatable() --> digunakan jika ada tampilan tabel dengan datatable pada komponen tersebut
-- public function addnew() --> digunakan jika ada proses create
-- public function edit() --> digunakan jika ada proses update
-- public function delete() --> digunakan jika ada proses delete
-- public function multidelete() --> digunakan jika ada proses multi delete

 

Kemudian untuk hak akses pada setiap proses adalah dengan script seperti ini :

if (!$this->auth($_SESSION['leveluser'], 'video', 'read')) {
	echo $this->pohtml->error();
	exit;
}

- parameter video menunjukan nama komponen
- paramater read adalah hak aksesnya meliputi read, create, update dan delete
- untuk value aksesnya diambil dari hak akses Level Pengguna yang dibuat pada langkah sebelumnya
- penggunaan hak akses ini bisa dipakai bisa juga tidak, tergantung komponen yang dibuat

Langkah berikut adalah pembuatan function index, untuk komponen video ini pada tampilan index akan menampilkan data video dalam bentuk tabel :

?>
<div class="block-content">
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->headTitle('Video', '
				<div class="btn-title pull-right">
					<a href="admin.php?mod=video&act=addnew" class="btn btn-success btn-sm"><i class="fa fa-plus"></i> '.$GLOBALS['_']['addnew'].'</a>
				</div>
			');?>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->formStart(array('method' => 'post', 'action' => 'route.php?mod=video&act=multidelete', 'autocomplete' => 'off'));?>
				<?=$this->pohtml->inputHidden(array('name' => 'totaldata', 'value' => '0', 'options' => 'id="totaldata"'));?>
				<?php
					$columns = array(
						array('title' => 'Id', 'options' => 'style="width:30px;"'),
						array('title' => 'Title', 'options' => ''),
						array('title' => 'URL', 'options' => ''),
						array('title' => 'Date', 'options' => ''),
						array('title' => 'Headline', 'options' => 'style="width:50px;"'),
						array('title' => 'Action', 'options' => 'class="no-sort" style="width:50px;"')
					);
				?>
				<?=$this->pohtml->createTable(array('id' => 'table-video', 'class' => 'table table-striped table-bordered'), $columns, $tfoot = true);?>
			<?=$this->pohtml->formEnd();?>
		</div>
	</div>
</div>
<?=$this->pohtml->dialogDelete('video');?>
<?php

Pada pembuatan komponen halaman admin inilah akan dikenal class pohtml yang akan membuat tampilan html otomatis yang bisa dilihat pada file : po-includes/core/html.php. Pilihan penggunaan class ini tergantung dari developer, mau digunakan atau tidak.

Kemudian dilanjutkan dengan membuat function datatable untuk menampilkan data pada tabel di function index :

$table = 'video';
$primarykey = 'id_video';
$columns = array(
	array('db' => $primarykey, 'dt' => '0', 'field' => $primarykey,
		'formatter' => function($d, $row, $i){
			return "<div class='text-center'>n
				<input type='checkbox' id='titleCheckdel' />n
				<input type='hidden' class='deldata' name='item[".$i."][deldata]' value='".$d."' disabled />n
			</div>n";
		}
	),
	array('db' => $primarykey, 'dt' => '1', 'field' => $primarykey),
	array('db' => 'title', 'dt' => '2', 'field' => 'title'),
	array('db' => 'url', 'dt' => '3', 'field' => 'url',
		'formatter' => function($d, $row, $i){
			return "<a href='".$d."' target='_blank'>".$d."</a>n";
		}
	),
	array('db' => 'date', 'dt' => '4', 'field' => 'date'),
	array('db' => 'headline', 'dt' => '5', 'field' => 'headline',
		'formatter' => function($d, $row, $i){
			return "<div class='text-center'>".$d."</div>n";
		}
	),
	array('db' => $primarykey, 'dt' => '6', 'field' => $primarykey,
		'formatter' => function($d, $row, $i){
			return "<div class='text-center'>n
				<div class='btn-group btn-group-xs'>n
					<a href='admin.php?mod=video&act=edit&id=".$row['id_video']."' class='btn btn-xs btn-default' id='".$d."' data-toggle='tooltip' title='{$GLOBALS['_']['action_1']}'><i class='fa fa-pencil'></i></a>n
					<a class='btn btn-xs btn-danger alertdel' id='".$d."' data-toggle='tooltip' title='{$GLOBALS['_']['action_2']}'><i class='fa fa-times'></i></a>
				</div>n
			</div>n";
		}
	)
);
echo json_encode(SSP::simple($_POST, $this->poconnect, $table, $primarykey, $columns));

Untuk menampilkan data pada tabel disini menggunakan library class SSP dari datatable.

 

Setelah itu lanjut ke pembuatan function addnew :

if (!empty($_POST)) {
	$video = array(
		'title' => $this->postring->valid($_POST['title'], 'xss'),
		'url' => $_POST['url'],
		'date' => date('Y-m-d')
	);
	$query_video = $this->podb->insertInto('video')->values($video);
	$query_video->execute();
	$this->poflash->success('Video has been successfully added', 'admin.php?mod=video');
}
?>
<div class="block-content">
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->headTitle('Add Video');?>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->formStart(array('method' => 'post', 'action' => 'route.php?mod=video&act=addnew', 'autocomplete' => 'off'));?>
				<div class="row">
					<div class="col-md-6">
						<?=$this->pohtml->inputText(array('type' => 'text', 'label' => 'Title', 'name' => 'title', 'id' => 'title', 'mandatory' => true, 'options' => 'required', 'help' => '<small>&nbsp;</small>'));?>
					</div>
					<div class="col-md-6">
						<?=$this->pohtml->inputText(array('type' => 'text', 'label' => 'Url', 'name' => 'url', 'id' => 'url', 'mandatory' => true, 'options' => 'required', 'help' => '<small>Example : https://www.youtube.com/embed/_A9s8EN-mbw</small>'));?>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<?=$this->pohtml->formAction();?>
					</div>
				</div>
			<?=$this->pohtml->formEnd();?>
		</div>
	</div>
</div>
<?php

Dari script di atas terlihat bahwa form dan proses form bersamaan ada di satu function dengan pemisahnya adalah if (!empty($_POST)) {.

 

Lanjut lagi ke pembuatan function edit dimana form dan proses form bersamaan ada di satu function juga :

if (!empty($_POST)) {
	$video = array(
		'title' => $this->postring->valid($_POST['title'], 'xss'),
		'url' => $_POST['url'],
		'headline' => $this->postring->valid($_POST['headline'], 'xss')
	);
	$query_video = $this->podb->update('video')
		->set($video)
		->where('id_video', $this->postring->valid($_POST['id'], 'sql'));
	$query_video->execute();
	$this->poflash->success('Video has been successfully updated', 'admin.php?mod=video');
}
$id = $this->postring->valid($_GET['id'], 'sql');
$current_video = $this->podb->from('video')
	->where('id_video', $id)
	->limit(1)
	->fetch();
if (empty($current_video)) {
	echo $this->pohtml->error();
	exit;
}
?>
<div class="block-content">
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->headTitle('Update Video');?>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<?=$this->pohtml->formStart(array('method' => 'post', 'action' => 'route.php?mod=video&act=edit', 'autocomplete' => 'off'));?>
				<?=$this->pohtml->inputHidden(array('name' => 'id', 'value' => $current_video['id_video']));?>
				<div class="row">
					<div class="col-md-6">
						<?=$this->pohtml->inputText(array('type' => 'text', 'label' => 'Title', 'name' => 'title', 'id' => 'title', 'value' => $current_video['title'], 'mandatory' => true, 'options' => 'required', 'help' => '<small>&nbsp;</small>'));?>
					</div>
					<div class="col-md-6">
						<?=$this->pohtml->inputText(array('type' => 'text', 'label' => 'Url', 'name' => 'url', 'id' => 'url', 'value' => $current_video['url'], 'mandatory' => true, 'options' => 'required', 'help' => '<small>Example : https://www.youtube.com/embed/_A9s8EN-mbw</small>'));?>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<?php
							if ($current_video['headline'] == 'N') {
								$radioitem = array(
									array('name' => 'headline', 'id' => 'headline1', 'value' => 'Y', 'options' => '', 'title' => 'Y'),
									array('name' => 'headline', 'id' => 'headline2', 'value' => 'N', 'options' => 'checked', 'title' => 'N')
								);
								echo $this->pohtml->inputRadio(array('label' => 'Headline', 'mandatory' => true), $radioitem, $inline = true);
							} else {
								$radioitem = array(
									array('name' => 'headline', 'id' => 'headline1', 'value' => 'Y', 'options' => 'checked', 'title' => 'Y'),
									array('name' => 'headline', 'id' => 'headline2', 'value' => 'N', 'options' => '', 'title' => 'N')
								);
								echo $this->pohtml->inputRadio(array('label' => 'Headline', 'mandatory' => true), $radioitem, $inline = true);
							}
						?>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<?=$this->pohtml->formAction();?>
					</div>
				</div>
			<?=$this->pohtml->formEnd();?>
		</div>
	</div>
</div>
<?php

 

Lalu dibuat juga function untuk hapus data yaitu function delete :

if (!empty($_POST)) {
	$query = $this->podb->deleteFrom('video')->where('id_video', $this->postring->valid($_POST['id'], 'sql'));
	$query->execute();
	$this->poflash->success('Video has been successfully deleted', 'admin.php?mod=video');
}

 

Dan terakhir adalah pembuatan function multidelete :

if (!empty($_POST)) {
	$totaldata = $this->postring->valid($_POST['totaldata'], 'xss');
	if ($totaldata != "0") {
		$items = $_POST['item'];
		foreach($items as $item){
			$query = $this->podb->deleteFrom('video')->where('id_video', $this->postring->valid($item['deldata'], 'sql'));
			$query->execute();
		}
		$this->poflash->success('Video has been successfully deleted', 'admin.php?mod=video');
	} else {
		$this->poflash->error('Error deleted video data', 'admin.php?mod=video');
	}
}

 

Dari pembuatan komponen pada halaman admin bisa dilihat bahwa pembuatannya mengabungkan library :

- pohtml --> untuk pembuatan element html otomatis
- ssp datatable --> untuk menggenerate data json pada tabel
- fluentpdo --> untuk proses CRUD database
- plasticbrain flash message --> untuk menampilkan notifikasi form
- gump --> untuk validasi form

 

IV. Pembuatan admin_javascript.js

Pada file ini kita akan membuat deklarasi javascript datatable untuk menampilkan data video pada tabel.

/*
 *
 * - PopojiCMS Javascript
 *
 * - File : admin_javascript.js
 * - Version : 1.0
 * - Author : Author Name
 * - License : MIT License
 *
 *
 * Ini adalah file utama javascript PopojiCMS yang memuat semua javascript di halaman video.
 * This is a main javascript file from PopojiCMS which contains all javascript in video page.
 *
*/

$(document).ready(function() {
	$('#table-video').buildtable('route.php?mod=video&act=datatable');
});

 

Penjelasan :

  • #table-video : adalah id tabel pada admin_video.php merujuk ke public function index()
  • route.php?mod=video&act=datatable : adalah link json data yang akan ditapilkan pada tabel merujuk ke public function datatable()

 

V. Pembuatan video.php

Pada tahap ini akan dibuat tampilan komponen video untuk halaman depan website, untuk penamaan file pada halaman depan agar otomatis dikenali sistem maka nama filenya haruslah nama komponen, dikasus ini namanya video.php.

Pada engine PopojiCMS untuk bagian depan menggunakan library dari BramusPHP untuk proses routing url, sehingga pembahasan di bawah ini sangat berkaitan dengan library tersebut. Dengan bantuan BramusPHP maka PopojiCMS versi 2.x.x sudah tidak lagi menggunakan .htaccess untuk routingnya, karena nanti semua routing url akan di atur pada file video.php ini.

Pada komponen video ini akan dibuat halaman video yang terdiri dari 2 routing url, yaitu halaman video awal dan halaman video setelah diklik nomor halaman (pagination) :

<?php
/*
 *
 * - PopojiCMS Front End 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 halaman video.
 * This is a php file for handling front end process for video page.
 *
*/

/**
 * Router untuk menampilkan request halaman video.
 *
 * Router for display request in video page.
*/
$router->match('GET|POST', '/video', function() use ($core, $templates) {

});

/**
 * Router untuk menampilkan request halaman video dengan nomor halaman.
 *
 * Router for display request in video page with pagination.
 *
 * $page = integer
*/
$router->match('GET|POST', '/video/page/(d+)', function($page) use ($core, $templates) {

});

 

Setelah script awal di atas dimasukan ke video.php, untuk melihat hasilnya terlebih dahulu tambahkan menu baru lewat Menu Manager pada group menu id dan gb (default PopojiCMS) :

Title : Video
URL : video
Class :

 

Kemudian di contoh ini menu Video di drag & drop di atas menu Galeri. Setelah di klik menunya pada halaman depan maka akan muncul halaman blank, sampai disini berarti sukses. Lanjut ke pembuatan routing pertama :

$router->match('GET|POST', '/video', function() use ($core, $templates) {
	$lang = $core->setlang('home', WEB_LANG);
	$info = array(
		'page_title' => 'Video',
		'page_desc' => $core->posetting[2]['value'],
		'page_key' => $core->posetting[3]['value'],
		'social_mod' => 'Video',
		'social_name' => $core->posetting[0]['value'],
		'social_url' => $core->posetting[1]['value'].'/video',
		'social_title' => $core->posetting[0]['value'],
		'social_desc' => $core->posetting[2]['value'],
		'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
		'page' => '1'
	);
	$adddata = array_merge($info, $lang);
	$templates->addData(
		$adddata
	);
	echo $templates->render('video', compact('lang'));
});

 

Penjelasan scriptnya adalah sebagai berikut :

 

$lang = $core->setlang('home', WEB_LANG);

Script di atas memanggil file bahasa komponen, karena komponen video tidak memiliki file bahasa maka defaultnya dipanggil file bahasa dari komponen home.

 

$info = array(
	'page_title' => 'Video',
	'page_desc' => $core->posetting[2]['value'],
	'page_key' => $core->posetting[3]['value'],
	'social_mod' => 'Video',
	'social_name' => $core->posetting[0]['value'],
	'social_url' => $core->posetting[1]['value'].'/video',
	'social_title' => $core->posetting[0]['value'],
	'social_desc' => $core->posetting[2]['value'],
	'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
	'page' => '1'
);

Script di atas berguna untuk membuat title, meta description, meta keyword dan meta social halaman video.

 

$adddata = array_merge($info, $lang);
$templates->addData(
	$adddata
);

Script di atas diharuskan untuk memasukan value array dari data bahasa dan info ke template engine agar terbaca.

 

echo $templates->render('video', compact('lang'));

Script di atas berfungsi memanggil file video.php yang ada di folder theme aktif yang sebentar akan dibuat, kemudian memasukan array bahasa ke file video.php tersebut juga.

Lalu lanjut ke pembuatan routing kedua dengan nomor halaman yang scriptnya sama persis dengan routing pertama tadi hanya beda disini saja 'page' => $page :

$router->match('GET|POST', '/video/page/(d+)', function($page) use ($core, $templates) {
	$lang = $core->setlang('home', WEB_LANG);
	$info = array(
		'page_title' => 'Video',
		'page_desc' => $core->posetting[2]['value'],
		'page_key' => $core->posetting[3]['value'],
		'social_mod' => 'Video',
		'social_name' => $core->posetting[0]['value'],
		'social_url' => $core->posetting[1]['value'].'/video',
		'social_title' => $core->posetting[0]['value'],
		'social_desc' => $core->posetting[2]['value'],
		'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
		'page' => $page
	);
	$adddata = array_merge($info, $lang);
	$templates->addData(
		$adddata
	);
	echo $templates->render('video', compact('lang'));
});

 

Setelah dilihat hasilnya akan muncul tampilan error, ini dikarenakan file video.php pada folder theme aktif belum dibuat. Berikut isi file video.php pada folder theme chingsy (default theme) :

<?=$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>

 

Jika dilihat pembuatan video.php pada theme aktif sangat ringkas, akan lebih ringkas jika pemanggilan data video dan pagination video dibuat ke dalam widget. Untuk membuat widget video ini silahkan baca dokumentasi pembuatan widget.

 

VI. Distribusi Komponen

Jika keseluruhan bagian komponen telah selesai dikerjakan maka waktunya untuk mempaket komponen tersebut. Kegunaan pemaketan ini agar komponen bisa dipakai orang lain atau bisa dijual lewat toko PopojiCMS. Berikut cara mempaketnya :

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

2. Kemudian silahkan pindahkan hasil video.zip tadi ke sebuah folder baru (terserah folder baru tersebut di tempatkan dimana), kemudian copy juga file-file ini ke dalam folder baru tersebut :

  • po-content/themes/folderthemeactive/video.php
  • po-content/widget/video (jika ada widget)
  • po-content/lang/video (jika ada bahasa)

3. Kemudian buat file README pada folder baru tersebut untuk menerangkan cara memasang komponen ini nantinya, termasuk perintah pembuatan tabel baru pada database. Berikut contoh file README :

/*
 *
 * - Component Video
 *
 * - Author : Jenuar Dalapang
 * - Contact : djenuar@gmail.com
 * - License : MIT License
 *
*/

Cara memasang komponen video ini :

1. Extract file component-video.zip yang telah di download.

2. Login ke halaman admin web Anda, kemudian ke menu Komponen --> Tambah Baru

3. Isi form Tambah Baru seperti ini :

-- Nama Komponen : video
-- Tipe : Component
-- Berkas Komponen (.zip) : Isikan dengan file video.zip hasil extract tadi

Setelah menekan tombol submit maka halaman akan mengarah ke list tabel komponen, jika komponen video sudah ada berarti Anda telah berhasil memasangannya.

4. Buat tabel baru pada database, pembuatan tabel baru ini bisa melalui phpmyadmin dengan cara penambahan tabel dan field manual atau langsung dengan script sql di bawah ini :

DROP TABLE IF EXISTS `video`;

CREATE TABLE IF NOT EXISTS `video` (
  `id_video` int(5) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `date` date NOT NULL,
  `url` varchar(255) NOT NULL,
  `headline` enum('Y','N') NOT NULL DEFAULT 'Y',
  PRIMARY KEY (`id_video`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ;

5. Agar komponen video bisa diakses pada halaman admin, maka berikan dulu permission CRUD component lewat pengaturan di level pengguna terus berikan saja akses ke level superadmin dulu. (Klik menu Pengguna lalu pilih Semua Pengguna terus klik tombol Level Pengguna)

6. Tambahkan menu komponen video pada halaman admin lewat Menu Manager pada group menu Dashboard :

Title : Video
URL : admin.php?mod=video
Class : 

7. Tambahkan menu video pada halaman depan lewat Menu Manager pada group id dan gb (default)

8. Langkah terakhir copy file video.php hasil extract tadi ke dalam folder po-content/themes/folderthemeactive/

4. Langkah terakhir paket semua file yang ada di folder baru tersebut menjadi satu file zip, sehingga nantinya bisa didistribusikan ke orang lain atau dijual melalui toko PopojiCMS. Contoh pemaketannya bisa di download pada link berikut ini : component-video.zip.

 

Tentu saja cara pemaketan ini bisa lebih ringkas jika kita bisa membuat file install.php dan uninstall.php untuk proses pemasangan komponen ini yang meliputi : pembuatan tabel baru pada database, memasang file komponen pada halaman depan dan juga memasang file bahasa jika ada.