Artikel

Referensi dan panduan untuk membuat Tema Apricot CMS

    Dibaca 4257 kali

Hello Semuanya, selamat pagi

Pada artikel ini saya mau membagikan cara melakukan pembuatan dan mendistribusikan Tema.
Kemarin hari, pada hari saya merilis CMS saya bersyukur sekali karena antusias dan support dari teman teman sekalian.

 

Banyak yang sudah mendownload dan sudah sangat ingin melakukan kustomasi dan bahkan membuat tema sendiri. Buktinya dari kemarin pagi (17 Apr) sampai saat saya menulis artkel ini (18 Apr, pukul 4:20 pagi) inbox facebook saya selalu ramai dan saya sebisa mungkin berusaha membantu. Namun baru sehari saja sudah merasa kecapean. Maka dari itu saya memutuskan untuk sesegera mungkin membuat tutorial tentang bagian yang paling banyak orang tanyakan yaitu 'pembuatan tema serta melakukan kustomasi'.

 

Saya akan berusaha menjelaskan sesederhana mungkin supaya bisa dimengerti oleh semua orang.

 


Pada dasarnya CMS ini dibuat dengan tujuan dimana ketika seseorang mau membuat sebuah template/tema baru, dia tidak perlu lagi dipusingkan dengan segala macam algorithma maupun query query database.

 

Dengan CMS ini, saat kamu mau membuat tema, kamu bisa 100% persen focus pada design. Karena kamu sebagai seorang designer akan dibebaskan dari segala macam yang berhubungan dengan API maupun aktivitas 'hard programming'.
Pekerjaan kamu sebagai designer disini adalah sebagai 'penampil' data dan bukan sebagai 'pengolah data'. Semua data penting yang perlu ditampilkan, sudah dikerjakan oleh engine, dan kamu tinggal menampilkannya saja. Misalnya ketika kamu mau menampilkan sebuah artikel, kamu tidak perlu lagi bersusa-susa mengambilnya dari database melainkan kamu tinggal 'menampilkan' saja.

 

Ibaratnya dalam konsep restorant, kerjaan kamu adalah sebagai seorang yang mengantarkan makanan siap saji kepada tamu,dan bukan lah sebagai seorang yang memasak atau mengolah makanan tersebut. Karena sudah ada divisi kusus (dapur) yang mengerjakan semuanya itu. Jadi kerjaan kamu adalah sebagai seorang penyaji makanan siap saji yang diserahkan dari dapur.

 


Apricot CMS mengadopsi konsep tersebut. Dalam membuat sebuah tema, Didalam engine CMS ini, telah terdapat komponen komponen yang bertugas sebagai juru masak maupun pengelolah bahan baku. Tapi yang diolah disini jelas bukanlah makanan melainkan 'Data'. Dan kamu yang membuat template, kamu adalah sang waiter yang akan meneruskan dan menampilkan data kepada user.

 

Data yang kamu terima sudah berbentuk berupa variable-variable.
Dan variable variable ini dibagi dalan 2 jenis.

 

 

Yaitu 'variable umum' dan 'variable khusus'.
Saya akan menjelaskan maksud dari kedua jenis variable ini.

 


I .Pengenalan Variable

pertama coba buka template/tema default kamu.

buka folder berikut

/application/views/ando


disitu kamu akan menemukan 16 buah file view .php

about_us.php
artikel_per_kategori.php
artikel_per_tag.php
detail_artikel.php
disclaimer.php
footer.php
header.php
home.php
page.php
privacy.php
semua_artikel.php
syarat_ketentuan.php
detail_galeri.php
semua_galeri.php
galeri_per_kategori.php
search_artikel.php

Masing masing dari view tersebut bertugas untuk menampilkan halaman sesuai dengan namanya. Misalnya view 'about_us.php' itu adalah view yang akan menampilkan data ketika kita mengakses halaman 'http://localhost/apricot/about-us'

berikut ini adalah keterangannya masing masing termasuk contoh url yang dihander oleh mereka masing masing

 

'about_us.php'
Bertanggung jawab menghandel halaman 'tentang kami'
Contoh: http://localhost/apricot/about-us

 


'artikel_per_kategori.php'
Bertanggung jawab menghandle halaman yang menampilkan artikel per kategori.
Dalam halaman ini biasanya artikel artikel hanya ditapilkan dalam bentuk highlight saja bukan dalam betuk detail. Dan biasanya masing masing artikel di berikan link mengarah kehalaman 'detail artikel'
Contoh: http://localhost/apricot/kategori/1-sains
Halaman ini juga memiliki pagination
Contoh: http://localhost/apricot/kategori/1-sains/1
Contoh: http://localhost/apricot/kategori/1-sains/2
Contoh: http://localhost/apricot/kategori/1-sains/3 dan seterusnya

 


'artikel_per_tag.php'
Bertanggung jawab menghandle halaman yang menampilkan artikel per tag.
Dalam halaman ini biasanya artikel artikel hanya ditapilkan dalam bentuk highlight saja bukan dalam betuk detail. Dan biasanya masing masing atikel di berikan link mengarah kehalaman 'detail artikel'
Contoh: http://localhost/apricot/tag/2-impian
Halaman ini juga memiliki pagination
Contoh: http://localhost/apricot/tag/2-impian/1
Contoh: http://localhost/apricot/tag/2-impian/2
Contoh: http://localhost/apricot/tag/2-impian/3 dan seterusnya

 

 


'semua_artikel.php'
Bertanggung jawab menghandle halaman yang menampilkan Semua Artikel, dari yang terbaru sampai ke yang paling lama.
Dalam halaman ini biasanya artikel artikel hanya ditapilkan dalam bentuk highlight saja bukan dalam betuk detail. Dan biasanya masing masing artikel di berikan link mengarah kehalaman 'detail artikel'
COntoh: http://localhost/apricot/artikel
Halaman ini juga memiliki pagination
Contoh: http://localhost/apricot/artikel/1
Contoh: http://localhost/apricot/artikel/2
Contoh: http://localhost/apricot/artikel/3 dan seterusnya

 

 

"detail_artikel.php"
Bertanggung jawab untuk menghandel halaman yang akan menampilkan detail atau badan artikel secara lengkap mulai dari judul, gambar,isi, dan koleksi gambarnya.
Contoh: http://localhost/apricot/artikel/5-judul-artikel-kamu

 


"semua_galeri.php"
Bertanggung jawab menghandle halaman yang menampilkan Semua galeri, dari yang terbaru sampai ke yang paling lama.
Dalam halaman ini biasanya galeri galeri hanya ditapilkan dalam bentuk highlight saja bukan dalam betuk detail. Dan biasanya masing masing galeri di berikan link mengarah kehalaman 'detail galeri'

COntoh: http://localhost/apricot/artikel
Halaman ini juga memiliki pagination
Contoh: http://localhost/apricot/artikel/1
Contoh: http://localhost/apricot/artikel/2
Contoh: http://localhost/apricot/artikel/3 dan seterusnya

 

 

"detail_galeri.php"
Bertanggung jawab untuk menghandel halaman yang akan menampilkan detail atau badan galeri secara lengkap mulai dari judul, gambar,isi, dan koleksi gambarnya.
Contoh: http://localhost/apricot/galeri/1-wedding

 


"disclaimer.php"
Bartanggung jawab menghandle halaman yang akan menampilkan discalimer
Contoh: http://localhost/apricot/disclaimer

 


"home.php"
Untuk menghandel halaman depan
Contoh: http://localhost/apricot/

 


"page.php"
Untuk menghandle halaman page buatan kita
contoh http://localhost/apricot/page/1-page-baru

 

 

"privacy.php"
Bartanggung jawab menghandle halaman yang akan menampilkan privacy
Contoh: http://localhost/apricot/privacy

 


"syarat_ketentuan.php"
Bartanggung jawab menghandle halaman yang akan menampilkan privacy
Contoh: http://localhost/apricot/syarat-dan-ketentuan

 

 

"header.php" dan "footer.php"
Bertanggung jawab menghandle bagian header dan footer SEMUA halaman

 


"search_artikel.php"
Bertanggung jawab untuk menampilkan hasil pencarian

 


Pada masing masing view memiliki variable-variable yang siap digunakan.
Dan variable-variable ini semacam variable milik pribadi dari dari masing masing view.
Variable yang dimiliki oleh salah satu view, tidak bisa digunakan kepada view lain. Maka dari itulah disebutkan sebagai variable khusus.

Berikut ini adalah variable-variable kusus masing masing view beserta penjelasannya


(1) 'home.php'


- $banner_depan type array multidimensi
berisi banner yang biasa ditampilkan pada halaman depan
cara penggunaan biasanya

 foreach ($banner_depan as $banner){
$banner['id'];
$banner['header'];
$banner['caption'];
$banner['link_href'];
$banner['link_text'];
$banner['gambar']; 
}

 

-  $artikel_headline type array multidimensi
berisi artikel yang sedang headline.
cara penggunaan biasanya

 

foreach($artikel_headline as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['nama_kategori'];
$artikel['id_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //sebagai featured image
$artikel['slug'];
$artikel['tags']; //Array multi dimensi dalam menggunakannya harus menggunakan foreach
foreach($artikel['tags'] as tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}

}

 


(2) 'semua_artikel.php'


-  $semua_artikel type array multi dimensi
berisi semua artikel.
cara penggunaan biasanya

foreach ($semua_artikel as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

- $pagination //akan menghasilkan tombol2 dan link paging

 

(3) 'artikel_per_kategori.php'


- $semua_artikel type array multidimensi
berisi semua artikel yang sesuai per kategori
cara penggunaan biasanya

foreach ($semua_artikel as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

- $pagination //akan menghasilkan tombol2 dan link paging


(4) 'artikel_per_tag.php'


$semua_artikel type array multidimensi
berisi semua artikel yang sesuai per tags
cara penggunaan biasanya

foreach ($semua_artikel as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

- $pagination //akan menghasilkan tombol2 dan link paging

 

(5) 'detail_artikel.php'


- $artikel type array
Berisi detail artikel
Penggunaan tidak perlu diloop. Langsung saja invoke menggunakan index-nya

$artikel['id'];
$artikel['judul'];
$artikel['isi'];
$artikel['tanggal'];
$artikel['tanggal_edit'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['galeri']; type data array multidimensi berisi kumpulan foto
cara menggunakan biasanya
foreach($artikel['galeri'] as $foto){
$foto['id'];
$foto['nama'];
}

 

 

- $artikel_related_per_kategori type data Array multy dimensi
Berisi artikel artikel yang memiliki hubungan kategori (dipilih secara acak)
Penggunaan biasanya

foreach ($artikel_related_per_kategori as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

 

(6) 'search_artikel.php'


- $semua_artikel type data array multidimensi
berisi semua artikel yang sesuai dengan kata kunci

 

foreach ($semua_artikel as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

2.$pagination //akan menghasilkan tombol2 dan link paging

 


(7) 'semua_galeri.php'


- $semua_galeri type data array multidimensi
berisi data semua galeri
Penggunaan biasanya

 

 

foreach($semua_galeri as $galeri){
$galeri['id'];
$galeri['nama'];
$galeri['deskripsi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($galeri['deskripsi'],'all')
$galeri['slug'];
$galeri['tanggal'];
$galeri['tanggal_edit'];
$galeri['id_kategori'];
$galeri['nama_kategori'];
$galeri['slug_kategori'];
$galeri['nama_admin'];
$galeri['id_admin'];
$galeri['foto']; //featured image

//untuk mengambil semua foto ,lalkukan lagi loping menggunakan fungsi ambil_foto_galeri()

foreach(ambil_foto_galeri($galeri['id']) as $foto){
$foto['id_foto'];
$foto['nama_foto'];
$foto['deskripsi_foto']; 
}
}

 

- $pagination //akan menghasilkan tombol2 dan link paging

 

 

(8) 'detail_galeri.php'


- $galeri type data array
Penggunaan tinggal invoke menggunakan index

 

$galeri['id'];
$galeri['nama'];
$galeri['deskripsi'];
$galeri['slug'];
$galeri['tanggal'];
$galeri['tanggal_edit'];
$galeri['id_kategori'];
$galeri['nama_kategori'];
$galeri['slug_kategori'];
$galeri['nama_admin'];
$galeri['id_admin'];
$galeri['foto']; //fetaured image

//untuk mengambil semua foto ,lalkukan lagi loping menggunakan fungsi ambil_foto_galeri()

foreach(ambil_foto_galeri($galeri['id']) as $foto){
$foto['id_foto'];
$foto['nama_foto'];
$foto['deskripsi_foto']; 
}

 

 

 

 

(9) 'galeri_per_kategori'


- $semua_galeri type data array multidimensi
berisi data semua galeri per kategori
Penggunaan biasanya

 

 

foreach($semua_galeri as $galeri){
$galeri['id'];
$galeri['nama'];
$galeri['deskripsi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($galeri['deskripsi'],'all')
$galeri['slug'];
$galeri['tanggal'];
$galeri['tanggal_edit'];
$galeri['id_kategori'];
$galeri['nama_kategori'];
$galeri['slug_kategori'];
$galeri['nama_admin'];
$galeri['id_admin'];
$galeri['foto']; //featured image

//untuk mengambil semua foto ,lalkukan lagi loping menggunakan fungsi ambil_foto_galeri()

foreach(ambil_foto_galeri($galeri['id']) as $foto){
$foto['id_foto'];
$foto['nama_foto'];
$foto['deskripsi_foto']; 
}
}

 

- $pagination //akan menghasilkan tombol2 dan link paging

 

 

(10) 'page.php'


-$page type data array
Berisi data untuk page/halaman
Penggunaan tinggal invoke menggunakan index

 

$page['id'];
$page['judul'];
$page['slug'];
$page['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($page['isi'],'all')
$page['foto']; //featured image

 

 

 

(11) 'header.php'
tidak ada variable khusus

 

 

(12) 'footer.php'
tidak ada variable khusus

 

 

(13) 'about_us.php'
tidak ada variable khusus

 

(14) 'disclaimer.php'
tidak ada variable khusus

 

(15) 'privacy.php'
tidak ada variable khusus

 

(16) 'syarat_ketentuan.php'
tidak ada variable khusus

 


Itulah semua variable khusus yang tersedia pada masing masing view.

 

Nah, kalo variable khusus adalah variable yang tersedia hanya untuk view tertentu saja, sudah bisa ditebak maksud dari 'variable umum'.
Yup! itu adalah variable yang bisa digunakan dan berlaku disemua view.
Walaupun secara aturan maupun teori mengatakan bahwa 'variable umum' ini bisa digunakan pada semua view, pada prakteknya variable variable ini kemungkinan besar hanya akan digunakan pada view 'header.php' dan 'footer.php'. Namun tetap dipersilahkan jika mau dipake di view lainnya.

Berikut ini variable variable yang dimaksud

1. $informasi type data array, tidak perlu foreach dalam penggunaan. Tinggal gunakan menggunakan index.



$informasi['title']; //title halaman
$informasi['nama']; //nama website
$informasi['meta_keyword'];
$informasi['meta_deskripsi'];
$informasi['favicon'];
$informasi['custom_css']; //berisi code CCS custom . Gunakan variable ini didalam tag 'head'
$informasi['logo']; // logo website
$informasi['featured_image']; //default featured image

$informasi['og-url']; //untuk og:url
$informasi['og-type']; //untuk og:type
$informasi['og-title']; //untuk "og:title
$informasi['og-description']; //untuk og:description
$informasi['og-site_name']; //untuk og:site_name
$informasi['og-image']; //untuk og:image

$informasi['article-author']; //untuk article:author
$informasi['article-publisher']; //untuk article:publisher
$informasi['article-published_time']; //article:published_time


$informasi['custom_javascript']; //berisi code custom javascript. gunakan variable ini pada bagian bawah sebelum tag penutup /body

$informasi['uniqueid']; //variable ini akan memberikan id unik untuk semua halaman baih itu page, kategori,galeri,artikel dll


$informasi['current_page']; //variable ini digunakan sebagai pengenal untuk mengenali view mana yang sedang aktif berikut ini




about_us.php = 'about-us'
artikel_per_kategori.php = 'artikel-per-kategori'
artikel_per_tag.php = 'artikel-per-tag'
detail_artikel.php = 'detail-artikel'
disclaimer.php = 'disclaimer'
footer.php
header.php 
home.php = 'home'
page.php = 'page'
privacy.php = 'privacy'
semua_artikel.php = 'semua-artikel'
syarat_ketentuan.php = 'syarat_ketentuan'
detail_galeri.php = 'detail-galeri'
semua_galeri.php = 'semua-galeri'
galeri_per_kategori.php = 'galeri-per-kategori'
search_artikel.php = 'pencarian-artikel'

 

 


2. $kategori_artikel type data array multi dimensi
berisi daftar kategori artikel
penggunaan biasanya

 

foreach($kategori_artikel as $kategori){
$kategori['id'];
$kategori['nama'];
$kategori['slug'];
}

 


3. $kategori_galeri type data array multi dimensi
berisi daftar kategori galeri
penggunaan biasanya

foreach($kategori_galeri as $kategori){
$kategori['id'];
$kategori['nama'];
$kategori['slug'];
}

 


4. $biodata type data array
Berisi informasi mengenai profil pribadi pemilik web maupun profil perusahaan
Tidak perlu foreach dalam penggunaan. Tinggal gunakan menggunakan index.

 

 

$biodata['nama'];
$biodata['foto'];
$biodata['deskripsi_singkat'];
$biodata['deskripsi']; //penggunaannya harus gunakan fungsi reversequote() Contoh:

reversequote($biodata['deskripsi'],'all')

 

 

5. $tags type data array multi dimensi
Berisi daftar tag
penggunaan biasanya

 

foreach($tags as $tag){
$tag['id'];
$tag['nama'];
$tag['slug'];
}

 

 

6. $news_ticker type data array multi dimensi
berisi daftar news ticker
penggunaan biasanya

foreach($news_ticker as $news ){
$news['id'];
$news['berita'];
$news['link'];
$news['tanggal'];
}

 

 

7. $disqus['unique_name'];


8. $recaptcha['key']; //key google recaptcha

 

9. $google_analytics['script'] //berisi code google analytics

 

10. $artikel_populer type data array multi dimensi

 

foreach ($artikel_populer as $artikel){
$artikel['id'];
$artikel['judul'];
$artikel['isi']; //penggunaannya harus gunakan fungsi reversequote() Contoh: reversequote($artikel['isi'],'all')
$artikel['tanggal'];
$artikel['dibaca'];
$artikel['slug'];
$artikel['id_kategori'];
$artikel['nama_kategori'];
$artikel['nama_admin'];
$artikel['id_admin'];
$artikel['foto']; //featured image
$artikel['tags']; // data masih mentah. Penggunaanya harus menggunakan fungsi ambil_tag(). Penggunaannya seperti ini
foreach(ambil_tag($artikel['tags']) as $tag){
$tag['id_tag'];
$tag['nama_tag'];
$tag['slug_tag'];
}
}

 

$menu_horizontal (menu utama) type data array multi dimensi
berisi menu
cara penggunaan biasanya

 

 

foreach($menu_horizontal as $menu){
$menu['id'];
$menu['nama'];
$menu['url'];
$menu['target'];
}

 


$menu_horizontal (menu samping) type data array multi dimensi
berisi menu
cara penggunaan biasanya

 

foreach($menu_vertikal as $menu){
$menu['id'];
$menu['nama'];
$menu['url'];
$menu['target'];
}

 

Perhatian! Kedua menu ini hanya mendukung satu level menu (tanpa sub menu).
Awalnya saya mau menyediakan sebuah variable berisi menu sudah jadi yang semua sub menunya telah tersedia.
Namun dtidak dilakukan dengan perimbangan membuat menu yang sudah jadi akan menyusahkan siapapun yang membuat tema.
Tapi tenang gan, artikel berikut saya akan berikan tutorial cara membuat menu beserta semua submenunya.


II. Menyiapkan Workspace untuk pembuatan template

Setelah mengenal dan memahami konsep dari variable yang akan kita gunakan dalam pembuatan tema, kini waktu menyiapkan workspace untuk pengerjaan.

Ikuti baik baik langkah langkah ini

1. Login kehalaman Admin

 

2. Pada panel menu, klik menu "Tema" > "Buat/Distribusi Tema"
Maka kamu akan berada halaman ini

 


3. Pada form 'Buat Tema Baru',
Masukan masukan nama tema apa saja.
Tapi dalam menentukan nama tema, hanya diizinkan menggunakan karakter underscore "_", hyphen '-', huruf dan angka. Tidak bole ada space dan haru minimal 7 karakter.
Dalam membuat nama ussahakanlah buat se unique mungkin. SUpaya mencegah terjadi kesamaan nama dengan tema buatan orang lain. kalo perlu silahkan gunakan nama sendiri.
Misalnya "john_wick_123"

 

 

4. Klik tombol "buat tema".
Jika berhasil kamu akan mendapatkan pemberitahuan bahwa baru telah dibuat 2 buah directory yaitu 'assets' dan 'views'.

 

 


- Directory assets adalah tempat kita menampung semua file assets website baik itu file CSS, javasript, gambar, icon icon, dan sebagainya.
- Dan directory views adalah tempat menyimpan file views yang sudah kita bahas diatas.

Coba kamu masuk pada kedua directory tersebut

 

'Assets'

Directory ini masih kosong, nantinya akan terisi dengan file file CSS, JS, dan lain-lain

 


'views'

Telah terbentuk 16 file view yang masih belum memiliki code didalamnya

 


5. Sekarang waktunya mulai mengerjakan.
Agar memudahkan proses pengolahan tema, alangkah baiknya jika kita switch tema sekarang ke tema yang baru kita bentuk

Pada panel menu, klik menu "Tema" > "Buat/Pengaturan Tema"
Disitu tema buatan kita sudah ada.
Untuk mengaktifkan, klik icon 'check' yang berwarna hijau

 

 

 

Jika tema baru kita sudah berhasil diaktifkan maka akan muncul bulatan check hijau seperti pada gambar dibawah ini

 


Tandanya tema buatan kita sudah aktif

 


6. Sekarang coba kamu buka halaman depan.
Kamu akan mendapati halaman 'blank'

 


Halaman blank itu dikarenakan file2 view belum disentu sama sekali

 

Sekarang waktunya kamu mengedit dan memainkan file file view tersebut


Btw saya gak akan kasih contoh coding pembuatan template, belum sekarang tapi dilain artikel.
Karena saya rasa kamu bisa mengambil contoh pada tema default yang sudah ada terinstal.

 


III. Tips

Kalo kamu sudah terbiasa dengan codeigniter, kamu bole gunakan helper bawaan codeigniter. Tapi kususnya untuk helper 'base_url' saya ganti dengan 'baseURL'

berikut ini tambahan tambahan helper yang bisa digunakan

 

 

1. img_artikel_url($uri,$thumb=false)
helper ini berfungsi untuk menghasilkan absolute url ke gambar artikel.
Misalnya:
img_artikel_url('gambar.jpg');
menghasilkan http://localhost/apricot/an-component/media/upload-gambar-artikel/gambar.jpg
Dan jika parameter kedua di atur 'true'
img_artikel_url('gambar.jpg',true);
hasilnya akan mengarah ke gambar thumbnail
menghasilkan http://localhost/apricot/an-component/media/upload-gambar-artikel-thumbs/gambar.jpg

 

 

2. img_galeri_url($uri,$thumb=false)
Cara kerjanya sama dengan fungsi img_artikel_url() tapi bedanya ini untuk gambar galeri
img_galeri_url('gambar.jpg');
akan menhasilkan
http://localhost/an-component/media/upload-galeri/gambar.jpg

 


3. artikel_url($id,$slug='')
Akan memberikan link ke halaman 'detail artikel'
artikel_url(2,'contoh-slug-artikel');
akan menghasilkan
http://localhost/artikel/2-contoh-slug-artikel

 

 

4. galeri_url($id,$slug='');
Akan memberikan link ke halaman 'detail galeri'
galeri_url(15,'contoh-slug-galeri');
akan menghasilkan
http://localhost/galeri/15-contoh-slug-galeri

 

 

5. tag_url($id,$slug='');
Akan memberikan link ke halaman yang memuat artikel berdasarkan tag
tag_url(20,'huru-hara');
akan menghasilkan
http://localhost/tag/20-huru-hara

 


6. kategori_url($id,$slug='');
Akan memberikan link ke halaman yang memuat artikel berdasarkan kategori
kategori_url(10,'berita');
akan menghasilkan
http://localhost/kategori/10-berita

 


7. kategori_galeri_url($id,$slug='')
Akan memberikan link ke halaman yang memuat galeri berdasarkan kategori
kategori_url(14,'panorama-indah');
akan menghasilkan
http://localhost/kategori-galeri/14-panorama-indah

 

 

8. page_url($id,$slug='')
Akan memberikan link ke halaman page
page_url(4,'pertemuan-presiden-se-asean');
akan menghasilkan
http://localhost/page/4-pertemuan-presiden-se-asean

 

9. assets_url();

Ini adalah fungsi yang lumayan penting dalam pembuatan tema.
Gunanya adalah untuk memanggil dan mengakses semua file asset yang ada didalam folder assets.
Misalnya kumpulan file asset kamu seperti ini 

cara memanggilnya hanya dengan menggunakan

assets_url('animate.css');

assets_url('bootstrap.min.css');

assets_url('jquery.fancybox.css');

dan seterusnya...

kalo misalnya assetnya ada berada didalam folder, lakukan seperti ini

assets_url('social-icon/color/main.js');

 

 

 

Demikian dulu artikel untuk saat ini, kalo ada pertanyaan atau ada yg kurang jelas, silahkan tinggalkan komentar dibawa.

Semoga artikel ini bermanfaat bagi teman sekalian dan sampai jumpa pada artikel selanjutnya.