Component

Mengenal dan mempelajari lebih jauh component di PopojiCMS.

Cara membuat komponen baru di PopojiCMS sebenarnya sangatlah mudah jika Anda sudah dengan baik memahami OOP PopojiCMS. Jika belum paham silahkan baca docs mengenai OOP PopojiCMS. Berikut adalah langkah-langkah membuat komponen baru pada PopojiCMS.

Ingat ini adalah contoh component default dari PopojiCMS. Jika ingin membuat component sendiri silahkan dibuat dengan codingan sendiri tanpa harus bertitik tolak pada tulisan ini.

Untuk membuat component baru di PopojiCMS, dibutuhkan 4 file utama yaitu :

nama-component.php -> adalah file yang berisi interface untuk menampilkan data, form inputan dan lain sebagainya yang berkaitan dengan user interface.
proses.php -> adalah file yang akan memproses data-data hasil inputan dari nama-component.php, meliputi Input - Update - Delete - dll.
datatable.php -> adalah file yang akan memproses setiap request pada table yang dikirim dari javascript.js dan ditampilkan pada nama-component.php.
javascript.js -> adalah file yang manampung semua javascript yang digunakan pada component.

Kemudian ada 3 file lagi yang harus dibuat yaitu :

nama-component.sql -> adalah file yang berisi perintah sql yang akan di install (file ini diperlukan apabila component baru yag akan dibuat membutuhkan tabel baru di database).
index.html -> merupakan file pengaman direktori yang ada di setiap direktori PopojiCMS.
README -> berisi instruksi mengenai cara penginstalan component ini baik pada back-end maupun pada frond-end.

Struktur Direktori

Untuk lebih memahami pembuatan component di PopojiCMS, maka kita langsung saja membuat contoh component itu sendiri. Contoh component yang akan dibuat disini adalah po-video. Selanjutnya untuk susunan direktori dan file yang harus dibuat adalah sebagai berikut :


po-video/
├── video.php
├── proses.php
├── datatable.php
├── javascript.js
├── video.sql
├── index.html
└── README

SQL File

Kemudian desain tabel yang akan dibuat adalah sebagai berikut :

Nama tabel : video

id_video	title	date	url	headline
int(10) PRIMARY KEY	varchar(100)	date	varchar(100)	enum('Y','N')

Dari kerangka tabel di atas maka struktur sql-nya adalah seperti di bawah ini, silahkan copy perintah sql di bawah ini ke dalam file video.sql.


DROP TABLE IF EXISTS `video`;

CREATE TABLE IF NOT EXISTS `video` (
  `id_video` int(10) NOT NULL AUTO_INCREMENT,
  `title` varchar(100) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
  `date` date NOT NULL,
  `url` varchar(100) CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL,
  `headline` enum('Y','N') CHARACTER SET latin1 COLLATE latin1_general_ci NOT NULL DEFAULT 'Y',
  PRIMARY KEY (`id_video`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;

Script di atas didapatkan dari hasil export table pada phpmyadmin.

Untuk menghindari duplikasi tabel pada database maka di awal script harus dimasukan perintah berikut :

DROP TABLE IF EXISTS `video`;

Interface File

Untuk interface pada component PopojiCMS dibagi atas 3 bagian yaitu :

Bagian Pertama : Berisi script detail author, filter session dan bagian header interface component.

Bagian Kedua: Berisi script untuk show data, input data dan edit data.

Bagian Ketiga : Berisi script untuk penutup isi component.

Struktur di atas berlaku untuk semua component default di PopojiCMS.

Bagian Pertama

Langkah awal untuk membuat interface component adalah dengan menuliskan script berikut pada file video.php


<?php
//Author = 'Jenuar Dwi Putra Dalapang';
//Contact = 'mailto:djenuar@gmail.com';
session_start();
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
    header('location:404.php');
}else{
$aksi="po-component/po-video/proses.php";
?>
    <div class="content-header">
        <div class="header-section"><h1>Video Management</h1></div>
    </div>
    <ul class="breadcrumb breadcrumb-top">
        <li><a href="admin.php?mod=home"><?=$langmenu1;?></a></li>
        <li>Input, edit, delete video management</li>
    </ul>

Penjelasan script :


//Author = 'Jenuar Dwi Putra Dalapang';
//Contact = 'mailto:djenuar@gmail.com';

Merupakan info dari pembuat component.


session_start();
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
    header('location:404.php');
}else{

Filterisasi session, maksud script di atas adalah yang dapat mengakses component ini hanya user yang telah login saja.


$aksi="po-component/po-video/proses.php";

Setiap aksi yang ada pada component yaitu input, edit dan delete akan di arahkan ke variabel $aksi untuk pemprosesnya (file proses.php).


    <div class="content-header">
        <div class="header-section"><h1>Video Management</h1></div>
    </div>
    <ul class="breadcrumb breadcrumb-top">
        <li><a href="admin.php?mod=home"><?=$langmenu1;?></a></li>
        <li>Input, edit, delete video management</li>
    </ul>

Merupakan header interface dari sebuah component. Hasil lihat gambar :

Header Component

Bagian Kedua

Dari script di atas, maka sudah tergambarkan kerangka dalam membuat suatu component di PopojiCMS. Kemudian akan dibuat script untuk interface show data, input data dan edit data. Untuk membuatnya PopojiCMS menggunakan teknik switch dengan menangkap parameter $_GET[act] yang dikirim.


<?php
switch($_GET[act]){
    default:
?>
    <!-- Tulis script show data disini -->
<?php
    break;

    case "addnew":
?>
    <!-- Tulis script add new data disini -->

<?php
    break;

    case "edit":
?>
    <!-- Tulis script edit data disini -->

<?php
    break;
}
?>

Dari script di atas terlihat bahwa interface yang akan dibuat adalah show data, input data dan edit data.

Lanjut dengan membuat script untuk interface show data. Pada PopojiCMS untuk menampilkan interface data-data digunakan plugin DT Table. Kemudian untuk proses tabelnya akan diproses pada file javascript.js :


    <div class="block full">
        <div class="block-title">
            <h2>Video Management</h2>
            <div class="block-options pull-right">
                <a href="admin.php?mod=video&act=addnew" class="btn btn-sm btn-primary" title="Add New"><i class="fa fa-plus-square-o"></i> Add New</a>
            </div>
        </div>
        <div class="table-responsive">
            <form method="post" action="<?=$aksi;?>">
                <input type="hidden" name="mod" value="video">
                <input type="hidden" name="act" value="multidelete">
                <input type="hidden" value="0" name="totaldata" id="totaldata">
                <table cellpadding="0" cellspacing="0" border="0" class="dTableAjax table table-vcenter table-condensed table-bordered" id="dynamic">
                    <thead><tr>
                        <th style="width:80px;" class="text-center"><i class="fa fa-check-circle-o"></i></th>
                        <th>Id Data</th>
                        <th>Title</th>
                        <th>Url</th>
                        <th>Date</th>
                        <th>Headline</th>
                        <th>Action</th>
                    </tr></thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td style="width:80px;" class="text-center"><input type="checkbox" id="titleCheck" data-toggle="tooltip" title="<?=$langaction5;?>" /></td>
                            <td colspan="7">
                                <button class="btn btn-sm btn-danger" type="button" data-toggle="modal" data-target="#alertalldel"><i class="fa fa-trash-o"></i> Delete Selected Item</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </form>
        </div>
    </div>
    <div id="alertdel" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" action="<?=$aksi;?>" autocomplete="off">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 id="modal-title"><i class="fa fa-exclamation-triangle text-danger"></i> <?=$langdelete1;?></h3>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="mod" value="video">
                        <input type="hidden" name="act" value="delete">
                        <input type="hidden" id="delid" name="id">
                        <?=$langdelete2;?>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> <?=$langdelete3;?></button>
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-sign-out"></i> <?=$langdelete4;?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <p style="width:100%; height:150px;">&nbsp;</p>

Penjelasan script :


    <div class="block full">
        <div class="block-title">
            <h2>Video Management</h2>
            <div class="block-options pull-right">
                <a href="admin.php?mod=video&act=addnew" class="btn btn-sm btn-primary" title="Add New"><i class="fa fa-plus-square-o"></i> Add New</a>
            </div>
        </div>

Untuk membuat kotak yang akan diisi oleh tabel data beserta judul dan tombol Add New. Hasil lihat gambar :

Kotak Component


        <div class="table-responsive">
            <form method="post" action="<?=$aksi;?>">
                <input type="hidden" name="mod" value="video">
                <input type="hidden" name="act" value="multidelete">
                <input type="hidden" value="0" name="totaldata" id="totaldata">
                <table cellpadding="0" cellspacing="0" border="0" class="dTableAjax table table-vcenter table-condensed table-bordered" id="dynamic">
                    <thead><tr>
                        <th style="width:80px;" class="text-center"><i class="fa fa-check-circle-o"></i></th>
                        <th>Id Data</th>
                        <th>Title</th>
                        <th>Url</th>
                        <th>Date</th>
                        <th>Headline</th>
                        <th>Action</th>
                    </tr></thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <td style="width:80px;" class="text-center"><input type="checkbox" id="titleCheck" data-toggle="tooltip" title="<?=$langaction5;?>" /></td>
                            <td colspan="7">
                                <button class="btn btn-sm btn-danger" type="button" data-toggle="modal" data-target="#alertalldel"><i class="fa fa-trash-o"></i> Delete Selected Item</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </form>
        </div>
    </div>

Untuk menampilkan tabel. Hasil lihat gambar :

Table Head


            <form method="post" action="<?=$aksi;?>">
                <input type="hidden" name="mod" value="video">
                <input type="hidden" name="act" value="multidelete">
                <input type="hidden" value="0" name="totaldata" id="totaldata">
                <table cellpadding="0" cellspacing="0" border="0" class="dTableAjax table table-vcenter table-condensed table-bordered" id="dynamic">

Form yang terlihat beserta input hidden disini bertugas untuk manampung dan mengirim data ketika tombol Delete Selected Item ditekan.

Jangan lupa pada tablenya diberikan class dTableAjax untuk mengaktifkan plugins DT Table. Jika dilihat pada engine terbaru ini isi tabelnya tidak ada. Ini dikarenakan isi tabelnya dipanggil dan diproses melalui javascript.js yang memparsing data dari datatable.php.


    <div id="alertdel" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method="post" action="<?=$aksi;?>" autocomplete="off">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 id="modal-title"><i class="fa fa-exclamation-triangle text-danger"></i> <?=$langdelete1;?></h3>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="mod" value="video">
                        <input type="hidden" name="act" value="delete">
                        <input type="hidden" id="delid" name="id">
                        <?=$langdelete2;?>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> <?=$langdelete3;?></button>
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-sign-out"></i> <?=$langdelete4;?></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Form delete data yang akan dipanggil dengan teknik modal dialog. Hasil lihat gambar :

Modal Dialog Delete

Setelah membuat interface show data, sekarang akan dibuat interface input datanya, untuk interfacenya berupa form inputan, berikut scriptnya :


    <div class="block full">
        <div class="block-title"><h2>Add New</h2></div>
        <form id="form-validation" class="form-bordered" method="post" action="<?=$aksi;?>" autocomplete="off">
            <fieldset>
                <input type="hidden" name="mod" value="video">
                <input type="hidden" name="act" value="input">
                <div class="form-group">
                    <label>Title <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" id="title" name="title" required>
                </div>
                <div class="form-group">
                    <label>Url <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" id="url" name="url" required>
                    <p><i>Example : http://www.youtube.com/embed/psSqNRaHBgk?feature=player_detailpage</i></p>
                </div>
                <div class="form-group form-actions">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Submit</button>
                    <button type="reset" class="btn btn-sm btn-danger pull-right" onclick="self.history.back()"><i class="fa fa-times"></i> Cancel</button>
                </div>
            </fieldset>
        </form>
    </div>
    <p style="width:100%; height:500px;">&nbsp;</p>

Penjelasan script :


<form id="form-validation" class="form-bordered" method="post" action="<?=$aksi;?>" autocomplete="off">

Form akan diproses ke variabel $aksi yang di atas telah dideklarasikan sebelumnya. Hasil lihat gambar :

Form Input Data

Lanjutkan dengan membuat form edit data, berikut scriptnya :


<?php
    $valid = $val->validasi($_GET['id'],'sql');
    $table = new PoTable('video');
    $currentVideo = $table->findBy(id_video, $valid);
    $currentVideo = $currentVideo->current();
    if ($currentVideo == '0'){
?>
    <div class="block block-alt-noborder">
        <h3 class="sub-header">Ooops! <?=$langpagenotfound1;?></h3>
        <p>&nbsp;</p>
        <p align="center">
            <?php
                $url = rtrim("http://".$_SERVER['HTTP_HOST'], "/").$_SERVER['PHP_SELF'];
                $url2 = preg_replace("//(admin.php$)/","",$url);
                $siteurl = $url2;
            ?>
            <a title="Back to Previous page" class="btn btn-sm btn-primary" onClick="history.back();"><?=$langpagenotfound3;?></a>
            <a href="<?=$siteurl;?>" title="Back to the website" class="btn btn-sm btn-primary"><?=$langpagenotfound2;?></a>
        </p>
        <p>&nbsp;</p>
    </div>
    <p style="width:100%; height:500px;">&nbsp;</p>
<?php
    }else{
?>
    <div class="block full">
		<div class="block-title"><h2>Edit Video</h2></div>
		<form id="form-validation" class="form-bordered" method="post" action="<?=$aksi;?>" autocomplete="off">
            <fieldset>
                <input type="hidden" name="mod" value="video">
                <input type="hidden" name="act" value="update">
                <input type="hidden" name="id" value="<?=$currentVideo->id_video;?>">
                <div class="form-group">
                    <label>Title <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" id="title" name="title" value="<?=$currentVideo->title;?>" required>
                </div>
                <div class="form-group">
                    <label>Url <span class="text-danger">*</span></label>
                    <input class="form-control" type="text" id="url" name="url" value="<?=$currentVideo->url;?>" required>
                </div>
                <div class="form-group">
                    <div class="row">
                        <?php if ($currentVideo->headline=="N"){ ?>
                            <label class="col-md-2">Headline</label>
                            <div class="col-md-10">
                                <label class="radio-inline"><input type="radio" id="headline1" name="headline" value="Y">Y</label>
                                <label class="radio-inline"><input type="radio" id="headline2" name="headline" value="N" checked="checked">N</label>
                            </div>
                        <?php }else{ ?>
                            <label class="col-md-2">Headline</label>
                            <div class="col-md-10">
                                <label class="radio-inline"><input type="radio" id="headline1" name="headline" value="Y" checked="checked">Y</label>
                                <label class="radio-inline"><input type="radio" id="headline2" name="headline" value="N">N</label>
                            </div>
                        <?php } ?>
                        <p>&nbsp;</p>
                    </div>
                </div>
                <div class="form-group form-actions">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Submit</button>
                    <button type="reset" class="btn btn-sm btn-danger pull-right" onclick="self.history.back()"><i class="fa fa-times"></i> Cancel</button>
                </div>
            </fieldset>
		</form>
    </div>
    <p style="width:100%; height:450px;">&nbsp;</p>
<?php
    }
?>

Penjelasan script :


<form id="form-validation" class="form-bordered" method="post" action="<?=$aksi;?>" autocomplete="off">

Form akan diproses ke variabel $aksi yang di atas telah dideklarasikan sebelumnya. Hasil lihat gambar :

Form Edit Data

Logika scriptnya adalah mengambil data dari database dengan id data sesuai dengan request yg diterima. Kemudian menyeleksi data tersebut ada atau tidak jika tidak ada maka akan menampilkan pesan error.

Bagian Ketiga


<?php
}
?>

Bagian penutup dari body suatu component.

Maka isi script akhir dari file video.php bisa dilihat pada link ini : video.php

Datatable File

Untuk menampilkan data pada tabel yang berada pada file video.php maka diperlukan datatable.php untuk menerima request dari file javascript.js.


<?php
session_start();
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
    header('location:404.php');
}else{
include_once '../../../po-library/po-database.php';
include_once '../../../po-library/po-function.php';

    $aColumns = array( 'id_video', 'title', 'date', 'url', 'headline' );

    $sIndexColumn = "id_video";

    $sTable = "video";

    $gaSql['user']       = DATABASE_USER;
    $gaSql['password']   = DATABASE_PASS;
    $gaSql['db']         = DATABASE_NAME;
    $gaSql['server']     = DATABASE_HOST;

    $gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
        die( 'Could not open connection to server' );

    mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
        die( 'Could not select database '. $gaSql['db'] );

    $sLimit = "";
    if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
    {
        $sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
            mysql_real_escape_string( $_GET['iDisplayLength'] );
    }

    $sOrder = "";
    if ( isset( $_GET['iSortCol_0'] ) )
    {
        $sOrder = "ORDER BY  ";
        for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
        {
            if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
            {
                $sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
                    ".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
            }
        }

        $sOrder = substr_replace( $sOrder, "", -2 );
        if ( $sOrder == "ORDER BY" )
        {
            $sOrder = "";
        }
    }

    $sWhere = "";
    if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
    {
        $sWhere = "WHERE (";
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
        }
        $sWhere = substr_replace( $sWhere, "", -3 );
        $sWhere .= ')';
    }

    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
        if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
        {
            if ( $sWhere == "" )
            {
                $sWhere = "WHERE ";
            }
            else
            {
                $sWhere .= " AND ";
            }
            $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
        }
    }

    $sQuery = "
        SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
        FROM   $sTable
        $sWhere
        $sOrder
        $sLimit
    ";
    $rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());

    $sQuery = "
        SELECT FOUND_ROWS()
    ";
    $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
    $iFilteredTotal = $aResultFilterTotal[0];

    $sQuery = "
        SELECT COUNT(".$sIndexColumn.")
        FROM   $sTable
    ";
    $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    $aResultTotal = mysql_fetch_array($rResultTotal);
    $iTotal = $aResultTotal[0];

    $output = array(
        "sEcho" => intval($_GET['sEcho']),
        "iTotalRecords" => $iTotal,
        "iTotalDisplayRecords" => $iFilteredTotal,
        "aaData" => array()
    );

    $no = 1;
    while ( $aRow = mysql_fetch_array( $rResult ) )
    {
        $row = array();
        for ( $i=1 ; $i<count($aColumns) ; $i++ )
        {
            $urlcar = addhttp($aRow['url']);
            $checkdata = "<div class='text-center'><input type='checkbox' id='titleCheckdel' /><input type='hidden' class='deldata' name='item[$no][deldata]' value='$aRow[id_video]' disabled></div>";
            $row[] = $checkdata;
            $row[] = $aRow['id_video'];
            $row[] = $aRow['title'];
            $row[] = "<a href='$urlcar' target='_blank'>$urlcar</a>";
            $row[] = "<div class='text-center'>$aRow[date]</div>";
            $row[] = "<div class='text-center'>$aRow[headline]</div>";
            $row[] = "<div class='text-center'><div class='btn-group btn-group-xs'>
                    <a href='admin.php?mod=video&act=edit&id=$aRow[id_video]' class='btn btn-xs btn-default' id='$aRow[id_video]'><i class='fa fa-pencil'></i></a>
                    <a class='btn btn-xs btn-danger alertdel' id='$aRow[id_video]'><i class='fa fa-times'></i></a>
            </div></div>";
        }
        $output['aaData'][] = $row;
    $no++;
    }

    echo json_encode( $output );
}
?>

Dari script di atas yang hanya perlu diperhatikan dalam membuat suatu component adalah :


    $aColumns = array( 'id_video', 'title', 'date', 'url', 'headline' );

    $sIndexColumn = "id_video";

    $sTable = "video";

Penjelasan :

$aColumns = array( 'id_video', 'title', 'date', 'url', 'headline' ); adalah array yang berisi semua field dari tabel.
$sIndexColumn = "id_video"; adalah primary key dari tabel.
$sTable = "video"; adalah nama tabel yang dipilih untuk ditampilkan.

dan perhatikan pula baris ini :


    $urlcar = addhttp($aRow['url']);
    $checkdata = "<div class='text-center'><input type='checkbox' id='titleCheckdel' /><input type='hidden' class='deldata' name='item[$no][deldata]' value='$aRow[id_video]' disabled></div>";
    $row[] = $checkdata;
    $row[] = $aRow['id_video'];
    $row[] = $aRow['title'];
    $row[] = "<a href='$urlcar' target='_blank'>$urlcar</a>";
    $row[] = "<div class='text-center'>$aRow[date]</div>";
    $row[] = "<div class='text-center'>$aRow[headline]</div>";
    $row[] = "<div class='text-center'><div class='btn-group btn-group-xs'>
        <a href='admin.php?mod=video&act=edit&id=$aRow[id_video]' class='btn btn-xs btn-default' id='$aRow[id_video]'><i class='fa fa-pencil'></i></a>
        <a class='btn btn-xs btn-danger alertdel' id='$aRow[id_video]'><i class='fa fa-times'></i></a>
    </div></div>";

Script ini bertugas untuk menampilkan data ke dalam tabel. Dimana $row[] ada sebanyak 7 sesuai dengan tabel head yang tertulis pada file video.php di atas. Pada row yang terakhir berisi script untuk menampilkan aksi pada tabel :

Tombol Action

Dari script di atas maka data bisa ditampilkan pada tabel seperti gambar di bawah ini.

Tabel Video

Isi script lengkap dari file datatable.php bisa dilihat pada link ini : datatable.php

Javascript File

Pada setiap component secara default penggunaan javascript ditampung pada file javascript.js yang akan dibaca secara otomatis oleh engine PopojiCMS.


oTable = $('.dTableAjax').dataTable({
    "sAjaxSource": "po-component/po-video/datatable.php",
    "sDom": "<'row'<'col-sm-6 col-xs-5'l><'col-sm-6 col-xs-7'f>r>t<'row'<'col-sm-5 hidden-xs'i><'col-sm-7 col-xs-12 clearfix'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_",
            "sSearch": '<div class="input-group">_INPUT_<span class="input-group-addon"><i class="fa fa-search"></i></span></div>',
            "sInfo": "<strong>_START_</strong>-<strong>_END_</strong> of <strong>_TOTAL_</strong>",
            "oPaginate": {
                "sPrevious": "",
                "sNext": ""
            }
    },
    "bJQueryUI": false,
    "bAutoWidth": false,
    "aaSorting": [[2, "desc"]],
    "bStateSave": true,
    "bServerSide": true,
    "iDisplayLength": 10,
        "aLengthMenu": [
            [10, 30, 50, -1],
            [10, 30, 50, "All"]
        ],
    "fnDrawCallback": function( oSettings ) {
        $("#titleCheck").click(function() {
            var checkedStatus = this.checked;
            $("table tbody tr td div:first-child input[type=checkbox]").each(function() {
                this.checked = checkedStatus;
                if (checkedStatus == this.checked) {
                    $(this).closest('table tbody tr').removeClass('danger');
                    $(this).closest('table tbody tr').find('input:hidden').attr('disabled', !this.checked);
                    $('#totaldata').val($('form input[type=checkbox]:checked').size());
                }
                if (this.checked) {
                    $(this).closest('table tbody tr').addClass('danger');
                    $(this).closest('table tbody tr').find('input:hidden').attr('disabled', !this.checked);
                    $('#totaldata').val($('form input[type=checkbox]:checked').size());
                }
            });
        });	
        $('table tbody tr td div:first-child input[type=checkbox]').on('click', function () {
            var checkedStatus = this.checked;
            this.checked = checkedStatus;
            if (checkedStatus == this.checked) {
                $(this).closest('table tbody tr').removeClass('danger');
                $(this).closest('table tbody tr').find('input:hidden').attr('disabled', !this.checked);
                $('#totaldata').val($('form input[type=checkbox]:checked').size());
            }
            if (this.checked) {
                $(this).closest('table tbody tr').addClass('danger');
                $(this).closest('table tbody tr').find('input:hidden').attr('disabled', !this.checked);
                $('#totaldata').val($('form input[type=checkbox]:checked').size());
            }
        });
        $('table tbody tr td div:first-child input[type=checkbox]').change(function() {
            $(this).closest('tr').toggleClass("danger", this.checked);
        });
        $(".alertdel").click(function(){
            var id = $(this).attr("id");
            $('#alertdel').modal('show');
            $('#delid').val(id);
        });
    }
});

Penjelasan :

Secara default javascript.js berisi script seperti di atas yang bertugas untuk mengambil isi tabel dari file datatable.php dan menampilkannya ke file video.php,
Setelah itu bertugas juga untuk menangani request ketika tombol ceklist pada tabel untuk penghapusan banyak data ditekan,
Terakhir untuk memunculkan dialog box ketika tombol aksi hapus (delete) ditekan.

Yang berlu diketahui hanyalah : "sAjaxSource": "po-component/po-video/datatable.php", yang bertujuan memanggil file datatable.php berada.

Isi script lengkap dari file javascript.js bisa dilihat pada link ini : javascript.js

Proses File

Untuk memproses data inputan dari interface data di video.php, maka buatlah script berikut pada file proses.php :


<?php
session_start();
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
	header('location:../../404.php');
}else{
include_once '../../../po-library/po-database.php';
include_once '../../../po-library/po-function.php';

$val = new Povalidasi;
$mod = $_POST['mod'];
$act = $_POST['act'];

}
?>

Struktur script di atas dipakai pada semua file proses.php pada component yang ada di PopojiCMS. Penjelasan script :


session_start();
if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){
	header('location:../../404.php');
}else{

Filter session, jadi file proses.php ini hanya boleh diakses oleh user yang telah login sebelumnya.


include_once '../../../po-library/po-database.php';
include_once '../../../po-library/po-function.php';

Script ini berfungsi untuk memanggil file po-database.php dan po-function.php dalam pemprosesan data nantinya. Pemanggilan ini mutlak pada setiap file proses.php


$val = new Povalidasi;
$mod = $_POST['mod'];
$act = $_POST['act'];

Maksud script ini adalah untuk pendeklarasian variabel Povalidasi untuk memfilter data yang diinputkan oleh user dan juga pendeklarasian variabel $mod dan $act untuk menerima POST method yang akan digunakan dalam switch kondisi pada pemprosesan data nantinya.

Pada component po-video ini, data yang akan diproses meliputi input, edit dan delete. Pertama yang akan dibahas adalah script untuk delete data. Script delete data ini, memproses data yang dikirimkan dari file video.php sebelumnya.

Berikut adalah script yang harus dituliskan pada file proses.php untuk memproses kiriman data dari script penghapusan data :


// Delete Video
if ($mod=='video' AND $act=='delete'){
    $id = $val->validasi($_POST['id'],'sql');
    $tabledel = new PoTable('video');
    $tabledel->deleteBy('id_video', $id);
    header('location:../../admin.php?mod='.$mod);
}

// Multi Delete Video
elseif ($mod=='video' AND $act=='multidelete'){
    $totaldata = $val->validasi($_POST['totaldata'],'xss');
    if ($totaldata != "0"){
    $itemdel = $_POST['item'];
        $tabledel = new PoTable('video');
        foreach ($itemdel as $item){
            $id = $val->validasi($item['deldata'],'xss');
            $tabledel->deleteBy('id_video', $id);
        }
        header('location:../../admin.php?mod='.$mod);
    }else{
        header('location:../../404.php');
    }
}

Script di atas menggunakan seleksi kondisi if untuk memproses data yang sesuai. Jadi jika $mod = video dan $act = delete maka lanjutkan ke proses delete data. Kemudian proses delete datanya mengunakan OOP PopojiCMS, yaitu mendelete data sesuai id yang dikirimkan. Kemudian untuk proses multi delete data adalah dengan melakukan pengulangan proses penghapusan sesuai banyaknya id data yang ingin diproses. Untuk script proses hapus data ini merupakan script yang diharuskan dalam penggunaan di setiap component.

Lanjut untuk script input data, script input data ini memproses data yang dikirim dari file video.php di bagian form input data. Berikut adalah script yang harus dituliskan pada file proses.php untuk memproses kiriman data dari script input data yang ada pada file video.php :


// Input Video
elseif ($mod=='video' AND $act=='input'){
$title = $val->validasi($_POST['title'],'xss');
$url = $_POST['url'];
    $table = new PoTable('video');
    $table->save(array(
        'title' => $title,
        'url' => $url,
        'date' => $tgl_sekarang
    ));
    header('location:../../admin.php?mod='.$mod);
}

Script di atas menggunakan seleksi kondisi elseif untuk memproses data yang sesuai. Jadi jika $mod = video dan $act = input maka lanjutkan ke proses input data. Kemudian proses input datanya mengunakan OOP PopojiCMS, dengan lebih dahulu memfilter hasil inputan sebelum dimasukan ke dalam database.

Kemudian lanjut pada proses edit data, pada proses edit data, data hasil inputan diterima dari file video.php sebelumnya. Berikut script yang harus dituliskan pada file proses.php untuk memproses kiriman data dari script edit data pada file video.php :


// Update Video
elseif ($mod=='video' AND $act=='update'){
$id = $val->validasi($_POST['id'],'sql');
$title = $val->validasi($_POST['title'],'xss');
$url = $_POST['url'];
$headline =  $val->validasi($_POST['headline'],'xss');
    $data = array(
        'title' => $title,
        'url' => $url,
        'headline' => $headline
    );
    $table = new PoTable('video');
    $table->updateBy('id_video', $id, $data);
    header('location:../../admin.php?mod='.$mod);
}

Script di atas menggunakan seleksi kondisi elseif untuk memproses data yang sesuai. Jadi jika $mod = video dan $act = update maka lanjutkan ke proses edit data. Kemudian proses edit datanya mengunakan OOP PopojiCMS, dengan lebih dahulu memfilter hasil inputan sebelum dimasukan ke dalam database, dan data ini di edit menurut id data yang dikirimkan.

Maka isi akhir file proses.php dapat dilihat pada link berikut : proses.php

Langkah terakhir adalah dengan membuat file README dimana file ini berfungsi sebagai instruksi penginstalan bagi user, berikut adalah contoh file README tersebut.

Agar component baru ini bisa didistribusikan ke semua orang, maka component harus dipaketkan terlebih dahulu. Caranya adalah dengan membuat file zip dengan nama video.zip yang di dalamnya berisi 5 file yaitu video.php, datatable.php, javascript.js, proses.php dan index.html. Kemudian buatlah satu folder baru dan beri nama sesuai nama component tersebut, lalu masukan file zip yang tadi telah dibuat beserta file video.sql dan file README ke dalamnya. Sehingga struktur direktorinya menjadi :


po-video/
├── video.zip
├── video.sql
└── README

Download contoh paket po-video berikut ini : po-video.zip

Untuk mencoba apakah component ini bisa digunakan maka akan dilakukan proses uji coba penginstalan pada back-end. Untuk proses penginstalan akan mengacu pada file README yang telah dibuat tadi, adapun proses penginstalan bisa dilihat pada gambar di bawah ini :

Instalasi Component

Penginstalan tabel pada database :

Instalasi Tabel Component

Test input data baru pada component po-video :

Test Input Data

Hasil akhir setelah instalasi dan input data :

Hasil Akhir Component Video

Ternyata component ini berfungsi dengan baik tanpa ada error.

Agar di frond-end component ini bisa berfungsi maka akan dilakukan peletakan script component po-video secara manual pada file theme. Adapun caranya adalah tambahkan baris code berikut pada file po-content -> chingsy -> sidebar.php -> di bawah baris ke 103 :


    <div class="video-box widget row-fluid">
        <?php
            $tablevid = new PoTable('video');
            $currentVid = $tablevid->findByDESC(headline, 'Y', id_video);
            $currentVid = $currentVid->current();
        ?>
        <h3 class="title"><span style="background-color: #;color: #;"><?=$currentVid->title;?></span></h3>		
            <iframe width="369" height="188" src="<?=$currentVid->url;?>" frameborder="0" allowfullscreen></iframe>
    </div>

Silahkan refresh browser Anda dan lihat apakah komponennya sudah ada atau belum di sidebar. Berikut hasil akhir dari component po-video setelah diletakan pada frond-end :

Hasil Akhir Component Video Frond-end

Component

Component PopojiCMS

Ingat ini adalah contoh component default dari PopojiCMS. Jika ingin membuat component sendiri silahkan dibuat dengan codingan sendiri tanpa harus bertitik tolak pada tulisan ini.

Pengantar

Studi Kasus

Struktur Direktori

SQL File

Interface File

Bagian Pertama

Bagian Kedua

Bagian Ketiga

Datatable File

Javascript File

Proses File

Distribusi Paket

Instalasi Pada Back-end

Instalasi Pada Frond-end