Buat sendiri tempalte webmu menggunakan PopojiCMS

Untuk membuat theme front-end PopojiCMS sebenarnya mudah karena tidak ada rules yang mengatur, theme bisa dikreasikan semau pembuatnya.

Tutor theme ini hanya berlaku untuk PopojiCMS versi 1.2.0 ke atas, dengan engine theme yang baru.

Berikut akan dijelaskan langkah-langkah untuk membuat theme baru yang simple tapi powerfull. Di dalam tutor ini akan digunakan Bootstrap sebagai frameworks themenya. Jadi theme yang akan dihasilkan nantinya sudah pasti responsive dan cocok dengan engine PopojiCMS.

Pertama-tama yang harus dibuat adalah mempersiapkan lingkungan pembuatan theme baru. Karena theme baru yang akan dibuat belum terinstall maka kita akan memakai folder theme chingsy sebagai tempat pembuatan theme sementara. Tetapi agar theme chingsy tidak rusak maka rename folder theme chingsy misalnya menjadi chingsy_1. Kemudian buat folder baru lagi dengan nama chingsy, disinilah akan ditempatkan semua folder dan file theme yang akan dibuat. Adapun struktur direktorinya adalah :


folder-popojicms/
├── po-content/
│   ├── chingsy/
│	│	├── css/
│	│	├── font-awesome/
│	│	├── images/
│	│	├── js/
│	│	├── category.php
│	│	├── contact.php
│	│	├── detailpost.php
│	│	├── footer.php
│	│	├── function.php
│	│	├── gallery.php
│	│	├── header.jpg
│	│	├── home.php
│	│	├── index.html
│	│	├── pages.php
│	│	├── preview.jpg
│	│	├── searchresult.php

Penjelasan tiap folder dan file bisa dibaca disini : Front End Directory

Untuk nama dari tiap file php di atas sudah harus begitu jangan diganti lagi karena akan menyebabkan beberapa element theme tidak berfungsi. Sebelum lanjut ke tahap selanjutnya maka download terlebih dahulu panduan penulisan dari tiap file php di atas : blanktheme.zip

Disini sebagai file induk yang harus dibuat pertama kali adalah file header.php, footer.php dan home.php. Dimana header.php akan berisi script yang akan menampilkan bagian header website termasuk menu, kemudian footer.php adalah script yang akan menampilkan bagian footer website dan terakhir home.php berisi script yang akan menampilkan isi content halaman home atau beranda.

Semua style theme yang digunakan adalah pure dari Bootstrap.

File header.php

Kalo dilihat ada script yang ditulis dua kali, yaa benar satu untuk content bahasa inggris dan satu untuk content bahasa indonesia. Jadi PopojiCMS menangkap parameter $_GET[lang] sebagai pengenalan bahasa :


<?php 
    if ($lang=="en"){
        echo "Hello World";
    }else{
        echo "Halo Dunia";
    }
?>

Kira-kira begitulah konsep sederhana dari switch bahasa di PopojiCMS, dan konsep ini dipakai pada semua script theme sebagai pengenal bahasa.

Kemudian ada script aneh seperti ini juga :

Script 1 :


<?php
    $instance = new PoController;
    $menu = $instance->popoji_menu(1, 'class="dropdown-menu"');
?>
<?php echo $menu; ?>

Script 2 :


<?php
    $instance = new PoController;
    $menu = $instance->popoji_menu(2, 'class="dropdown-menu"');
?>
<?php echo $menu; ?>

Penjelasan : script 1 memanggil menu bahasa Indonesia dan script 2 memanggil menu bahasa Inggris (menu diatur lewat admin page di component menu manager).

File footer.php

File home.php

Jika dilihat maka ada file baru yang di include-kan :


<?php include_once "po-content/$folder/function.php"; ?>

Tugas file function.php disini adalah untuk menampilkan content post perkategori sesuai kategori yang ingin ditampilkan :


<?php if ($lang=='en'){ $contenthome = contenthome('8', 'en'); }else{ $contenthome = contenthome('8', 'id'); } ?>

Script tersebut memanggil function contenthome yang ada di file function.php, kemudian menampilkan content post dari kategori ber-id 8.

Tiga file induk sudah berhasil dibuat, kemudian setelah dilakukan testing pada browser tampilannya adalah sebagai berikut :

Terlihat tampilannya masih berantakan, hal ini karena file bootstrap belum dimasukkan ke dalam folder css dan js. Berikut struktur direktorinya :


folder-popojicms/
├── po-content/
│   ├── chingsy/
│	│	├── css/
│	│	│	├── bootstrap.css
│	│	│	├── index.html
│	│	│	├── modern-business.css
│	│	│	├── prettyPhoto.css
│	│	├── font-awesome/
│	│	├── images/
│	│	├── js/
│	│	│	├── bootstrap.js
│	│	│	├── index.html
│	│	│	├── jquery.js
│	│	│	├── jquery.pajinate.js
│	│	│	├── jquery.prettyPhoto.js
│	│	│	├── modern-business.js

Silahkan download file pelengkapnya disini : supplementary-theme.zip kemudian ekstrak dan masukkan ke dalam folder theme yang sedang dibuat ini.

Setelah file bootstrapnya dimasukkan maka tampilannya akan seperti ini :

Kemudian berturut-turut file yang harus dibuat adalah :

Disini akan diberikan cheatsheet cara-cara menampilkan data yang digunakan pada theme PopojiCMS.

Menampilkan menu :


<?php
    $instance = new PoController;
    $menu = $instance->popoji_menu(1, 'class="dropdown-menu"');
?>
<?php echo $menu; ?>

Menampilkan slider :


<?php
    $tableslider = new PoTable('post');
    $sliders = $tableslider->findAllLimitBy(id_post, active, 'Y', DESC, '5');
    foreach($sliders as $slider){

    }
?>

Menampilkan banner 480px :


<?php
    $tablebann = new PoTable('banner');
    $banns = $tablebann->findAllLimitByRand(size, '480', '1');
    foreach($banns as $bann){

    }
?>

Menampilkan content post perkategori :


<?php if ($lang=='en'){ $contenthome = contenthome('8', 'en'); }else{ $contenthome = contenthome('8', 'id'); } ?>

Menampilkan gallery image di home :


<?php
    $tablegallery = new PoTable('gallery');
    $gallerys = $tablegallery->findAllLimit(id_gallery, DESC, '4');
    foreach($gallerys as $gallery){

    }
?>

Menampilkan total subscribe :


<?php
    $tablesubs = new PoTable('subscribe');
    $totalsubs = $tablesubs->numRow();
?>

Menampilkan popular post :


<?php
    $tablepop = new PoTable('post');
    $pops = $tablepop->findAllLimitBy(hits, active, 'Y', DESC, '5');
    foreach($pops as $pop){

    }
?>

Menampilkan recent post :


<?php
    $tablerec = new PoTable('post');
    $recs = $tablerec->findAllLimitBy(id_post, active, 'Y', DESC, '5');
    foreach($recs as $rec){

    }
?>

Menampilkan komentar terbaru :


<?php
    $tablecom = new PoTable('comment');
    $coms = $tablecom->findAllLimitBy(id_comment, active, 'Y', DESC, '5');
    foreach($coms as $com){

    }
?>

Menampilkan banner 180px :


<?php
    $tableban = new PoTable('banner');
    $bans = $tableban->findAllLimitByRand(size, '180', '4');
    foreach($bans as $ban){
	
    }
?>

Menampilkan detail post :


<?php
    $dbhostsql = DATABASE_HOST;
    $dbusersql = DATABASE_USER;
    $dbpasswordsql = DATABASE_PASS;
    $dbnamesql = DATABASE_NAME;
    $connection = mysql_connect($dbhostsql, $dbusersql, $dbpasswordsql) or die(mysql_error());
    mysql_select_db($dbnamesql, $connection) or die(mysql_error());
    $detail=mysql_query("SELECT * FROM post,users,category WHERE users.id_user=post.editor AND category.id_category=post.id_category AND category.active='Y' AND post.active='Y' AND post.id_post = '".abs((int)$_GET[id])."'");
    $d = mysql_fetch_array($detail);
    $dcari = mysql_num_rows($detail);
	
    if ($dcari > 0){
	
    }else{
	
    }
?>

Menampilkan tags :


<?php
    $s = "select * from tag order by tag_title";
    $r = mysql_query($s);
    $_arrNilai = explode(',', $d[tag]);
    $str = '';
    while ($w = mysql_fetch_array($r)) {
        $_ck = (array_search($w[tag_seo], $_arrNilai) != false)? '' : 'display:none;';
        echo "<a href='#' title='$w[tag_title]' style='$_ck'>$w[tag_title]</a> ";
    }
?>

Menampilkan post sebelumnya :


<?php
    $tableprev = mysql_query("SELECT * FROM post WHERE id_post < '".abs((int)$_GET[id])."' AND active='Y' ORDER BY id_post DESC");
    $prev = mysql_fetch_array($tableprev);
    $totprev = mysql_num_rows($tableprev);
	
    if ($totprev!="0"){
	
    }else{
	
    }
?>

Menampilkan post sesudahnya :


<?php
    $tablenext = mysql_query("SELECT * FROM post WHERE id_post > '".abs((int)$_GET[id])."' AND active='Y'");
    $next = mysql_fetch_array($tablenext);
    $totnext = mysql_num_rows($tablenext);
	
    if ($totnext!="0"){
	
    }else{
	
    }
?>

Menampilkan post terkait :


<?php
    $pisah_kata  = explode(",",$d[tag]);
    $jml_katakan = (integer)count($pisah_kata);
    $jml_kata = $jml_katakan-1; 
    $ambil_id = substr($val->validasi($_GET['id'],'sql'),0,4);

    $cari = "SELECT * FROM post WHERE (id_post<'$ambil_id') AND (id_post!='$ambil_id') AND (" ;
    for ($i=0; $i<=$jml_kata; $i++){
        $cari .= "tag LIKE '%$pisah_kata[$i]%'";
        if ($i < $jml_kata ){
            $cari .= " OR ";
        }
    }
    $cari .= ") AND active='Y' ORDER BY id_post DESC LIMIT 5";
    $hasil  = mysql_query($cari);
    while($h=mysql_fetch_array($hasil)){
	
    }
?>

Menampilkan daftar komentar pada detail post :


<?php
    mysql_query("UPDATE post SET hits=$d[hits]+1 WHERE id_post='".$val->validasi($_GET['id'],'sql')."'"); 
    $komentar = mysql_query("select count(comment.id_comment) as jml from comment WHERE id_post='".$val->validasi($_GET['id'],'sql')."' AND active='Y'");
    $k = mysql_fetch_array($komentar);
    $sql = mysql_query("SELECT * FROM comment WHERE id_post='".$val->validasi($_GET['id'],'sql')."' AND active='Y'");
    $jml = mysql_num_rows($sql);
	
    if ($jml > 0){
        while ($s = mysql_fetch_array($sql)){

        }
    }else{
	
    }
?>

Menampilkan detail pages :


<?php
    $id = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($_GET['idp'],ENT_QUOTES))));
    $tablepag = new PoTable('pages');
    $currentPag = $tablepag->findByAnd(id_pages, $id, active, 'Y');
    $currentPag = $currentPag->current();
	
    if ($currentPag != "0"){
	
    }else{
	
    }
?>

Menampilkan album gallery :


<?php
    $tablealb = new PoTable('album');
    $albums = $tablealb->findByDESC(active, 'Y', id_album);
    foreach($albums as $album){
	
    }
?>

Menampilkan gallery images per album :


<?php
    $tablegal = new PoTable('gallery');
    $gallerys = $tablegal->findAllRand();
    foreach($gallerys as $gallery){
        if ($currentCalb->active == 'Y'){
		
        }else{
		
        }
    }
?>

Menampilkan post per kategori pada halaman category post:


<?php
    $iddcat = mysql_real_escape_string(stripslashes(strip_tags(htmlspecialchars($_GET['idc'],ENT_QUOTES))));
    $tabledcat = new PoTable('category');
    $currentDcat = $tabledcat->findByAnd(id_category, $iddcat, active, 'Y');
    $currentDcat = $currentDcat->current();

    if ($currentDcat != "0"){
        $tabledcpost = new PoTable('post');
        $dcposts = $tabledcpost->findByAndDESC(id_category, $iddcat, active, 'Y', id_post);
        foreach($dcposts as $dcpost){
		
		}
    }else{
	
    }
?>

Menampilkan hasil pencarian di halaman pencarian :


<?php
    $dbhostsql = DATABASE_HOST;
    $dbusersql = DATABASE_USER;
    $dbpasswordsql = DATABASE_PASS;
    $dbnamesql = DATABASE_NAME;
    $connection = mysql_connect($dbhostsql, $dbusersql, $dbpasswordsql) or die(mysql_error());
    mysql_select_db($dbnamesql, $connection) or die(mysql_error());
    $kata = trim($_POST['search']);
    $kata = htmlentities(htmlspecialchars($kata), ENT_QUOTES);

    $pisah_kata = explode(" ",$kata);
    $jml_katakan = (integer)count($pisah_kata);
    $jml_kata = $jml_katakan-1;

    $cari = "SELECT * FROM post WHERE " ;
        for ($i=0; $i<=$jml_kata; $i++){
            $cari .= "title_id OR title_en OR content_id OR content_en LIKE '%$pisah_kata[$i]%'";
            if ($i < $jml_kata ){
                $cari .= " OR ";
            }
        }
    $cari .= " AND active='Y' ORDER BY id_post DESC";
    $hasil  = mysql_query($cari);
    $ada = mysql_num_rows($hasil);

    if ($ada > 0){
        while($t=mysql_fetch_array($hasil)){

        }
    }else{

    }
?>

Jika keseluruhan bagian theme telah selesai dikerjakan maka waktunya untuk mempaket theme tersebut. Berikut cara mempaketnya :

Memberi nama theme baru, dan disini saya beri nama theme baru ini dengan nama Modernbiz.

Buat dahulu image screenshoot dari theme yang sedang dibuat ini, kemudian berinama preview.jpgyang nantinya gambar ini akan dijadikan gambar screenshoot pada admin page.

Buat file README untuk menerangkan cara penginstalan dan informasi dari si pembuat theme. Berikut contoh isi file README :


Cara Install Tema Modernbiz :

1. Login ke halaman administrator website Anda.

2. Klik menu Appearance --> Themes

3. Klik tombol Add New

4. Masukkan data berikut pada kotak isian :

	Title = Modernbiz

	Author = Dwira Survivor

	Folder = modernbiz

	File = Silahkan browse file "modernbiz.zip" yang ada di dalam folder ini

5. Tekan tombol Submit.

6. Untuk mengaktifkan tema silahkan tekan tombol "Active" pada kolom tema modernbiz.

7. Tema moderbiz sudah terpasang, silahkan cek di halaman front-end website Anda pasti temanya sudah terganti.

Kemudian paket semua file theme menjadi file zip (ingat harus file zip), kemudian beri nama file zip tersebut dengan nama modernbiz.zip

Contoh pemaketan theme bisa di download pada link berikut ini : modernbiz.zip.

Pada theme chingsy sebenarnya warna dasarnya bisa diganti-ganti sesuai dengan keinginan. Coba buka file footer.php dan perhatikan script berikut :


<script type="text/javascript">
    $('body').append('<link rel="stylesheet" type="text/css" href="po-content/chingsy/css/customizer/blue.css">');
    $('#header .logo img').attr('src', 'po-content/chingsy/css/customizer/images/blue/logo.png');
    e.preventDefault();
</script>

Secara default theme chingsy menyediakan 3 pilihan warna yaitu :

Blue :


<script type="text/javascript">
    $('body').append('<link rel="stylesheet" type="text/css" href="po-content/chingsy/css/customizer/blue.css">');
    $('#header .logo img').attr('src', 'po-content/chingsy/css/customizer/images/blue/logo.png');
    e.preventDefault();
</script>

Orange :


<script type="text/javascript">
    $('body').append('<link rel="stylesheet" type="text/css" href="po-content/chingsy/css/customizer/orange.css">');
    $('#header .logo img').attr('src', 'po-content/chingsy/css/customizer/images/orange/logo.png');
    e.preventDefault();
</script>

Green :


<script type="text/javascript">
    $('body').append('<link rel="stylesheet" type="text/css" href="po-content/chingsy/css/customizer/green.css">');
    $('#header .logo img').attr('src', 'po-content/chingsy/css/customizer/images/green/logo.png');
    e.preventDefault();
</script>

Jika ingin membuat warna sendiri caranya :

Buat satu file css misalkan black.css di folder :


folder-popojicms/
├── po-content/
│   ├── chingsy/
│	│	├── css/
│	│	│	├── customizer/
│	│	│	│	├── black.css

Kemudian masukkan script berikut pada file black.css yang telah dibuat tadi :


.figure-overlay a div p i, a:hover, .home-slider2 .flexslider li .content .number, .home-slider3 .flexslider.home-slider3-gallery ul li .content .date .day, .search-page h2 i, .search-page .search-info i, .widget ul.social-subscribers li p { color:#4d4d4d; }

ul.list-arrow li { list-style-image:url(images/blue/list-arrow.png); }
ul.list-arrow-bold li { list-style-image:url(images/blue/list-arrow-bold.png); }

ul.nav-tabs li a:hover, ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover, #main-navigation ul li a:hover, #main-navigation ul li.active > a, .home-slider .flexslider.home-slider-carousel ul li.flex-active-slide .date, .home-slider2 .flexslider .flex-control-nav li a.flex-active, .home-slider3 .flexslider.home-slider3-carousel ul li:hover, .home-slider3 .flexslider.home-slider3-carousel ul li.flex-active-slide, .headlines .base, .breadcrumb .base, .post figure .cat-name .base, .home-reviews .header .base, .home-galleries .header .base, .home-reviews .item figure .base-val, .home-reviews .item .content .base-rate .rate-val, .nav-pagination ul li.active a, .nav-pagination ul li a:hover, .blog-reviews .post figure .base-val, .blog-reviews .post .text .base-rate .rate-val, .portofolio ul.portofolio-filter li a, .single .tags a, .single .post-author .content a, .single .rate-details .base-rate .rate-val, .page .rate-details .base-rate .rate-val, #main.single .header h4, #main.page .header h4, .widget .header h4, .widget .enews-tab ul.nav-tabs li a:hover, .widget .enews-tab ul.nav-tabs li.active a, .flex-control-paging li a.flex-active { background-color:#4d4d4d; }

input[type="submit"], input[type="button"], input[type="reset"], button, .btn { background-color:#4d4d4d; }

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover, .btn:hover { background-color:#3c3c3c; }

.single figure.head-section .head-section-content h1 { background-color:#c3c3c3; }

.portofolio ul.portofolio-filter li a:hover, .portofolio ul.portofolio-filter li a.active { background-color:#3c3c3c; }

blockquote { border-left:3px solid #4d4d4d; }
.post figure .cat-name .arrow { border-right: 10px solid #222222; }
.home-reviews .header .arrow.arrow-left, .home-galleries .header .arrow.arrow-left { border-right: 10px solid #222222; }
.home-reviews .header .arrow.arrow-right, .home-galleries .header .arrow.arrow-right { border-left: 10px solid #222222; }

.pricing-table .table-column.table-popular .table-header {
    border-bottom:1px solid #0a78bc;
    background-color:#178ad2;
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#2193da), to(#1186d0));
    background:-webkit-linear-gradient(top, #2193da, #1186d0);
    background:-moz-linear-gradient(top, #2193da, #1186d0);
    background:-ms-linear-gradient(top, #2193da, #1186d0);
    background:-o-linear-gradient(top, #2193da, #1186d0);
}
.pricing-table .table-column.table-popular .table-price { background-color:#3ea5e5; }

.active_page{ color:#FFF !important; background-color:#4d4d4d !important; }

@media (min-width: 768px) and (max-width: 979px) {
    .headlines { border-left:5px solid #4d4d4d; }
}

@media (max-width: 767px) {
    .headlines { border-left:5px solid #4d4d4d; }
}

Kemudian ganti script pada file footer.php menjadi :


<script type="text/javascript">
    $('body').append('<link rel="stylesheet" type="text/css" href="po-content/chingsy/css/customizer/black.css">');
    $('#header .logo img').attr('src', 'po-content/chingsy/css/customizer/images/blue/logo.png');
    e.preventDefault();
</script>

Hasilnya bisa dilihat pada gambar berikut :

Buat sendiri tempalte webmu menggunakan PopojiCMS

Pengantar

Tutor theme ini hanya berlaku untuk PopojiCMS versi 1.2.0 ke atas, dengan engine theme yang baru.

Create Step by Step

Cheetsheet Data

Disini akan diberikan cheatsheet cara-cara menampilkan data yang digunakan pada theme PopojiCMS.

Menampilkan menu :

Menampilkan slider :

Menampilkan banner 480px :

Menampilkan content post perkategori :

Menampilkan gallery image di home :

Menampilkan total subscribe :

Menampilkan popular post :

Menampilkan recent post :

Menampilkan komentar terbaru :

Menampilkan banner 180px :

Menampilkan detail post :

Menampilkan tags :

Menampilkan post sebelumnya :

Menampilkan post sesudahnya :

Menampilkan post terkait :

Menampilkan daftar komentar pada detail post :

Menampilkan detail pages :

Menampilkan album gallery :

Menampilkan gallery images per album :

Menampilkan post per kategori pada halaman category post:

Menampilkan hasil pencarian di halaman pencarian :

Distribusi Theme

Jika keseluruhan bagian theme telah selesai dikerjakan maka waktunya untuk mempaket theme tersebut. Berikut cara mempaketnya :

Trik Chingsy Theme

Pada theme chingsy sebenarnya warna dasarnya bisa diganti-ganti sesuai dengan keinginan. Coba buka file footer.php dan perhatikan script berikut :

2 Komentar untuk "Buat sendiri tempalte webmu menggunakan PopojiCMS"