Pendahuluan

Theme atau tema tampilan dibutuhkan untuk membuat antar muka aplikasi. Supaya dapat digunakan dengan mudah, aplikasi harus memiliki tampilan yang konsisten sehingga membentuk suatu tema tertentu. Tema sendiri terdiri dari beberapa bagian seperti menu navigasi, isi utama, dan kaki.

Struktur Tema

Untuk membuat tema di Seme Framework, dapat memulai dengan cara masuk ke folder app/view.

Seme Framework Versi 2

Adapun panduan standar dari Seme Framework yaitu dengan memisahkan tampilan depan (frontend) dengan tampilan admin (Backend). Setelah terbagi barulah membuat folder baru dengan nama template.

app/view/frontend/namatema/
app/view/backend/admin/

atau

app/view/frontend/namatemautama/temadasar
app/view/backend/mainadmin/operator

Folder app/view/frontend/base ini wajib ada untuk penggunaan Seme Framework versi 2.

Seme Framework Versi 3

Sementara untuk versi 3, penamaan default untuk tema di seme framework adalah

app/view/front/

Folder app/view/front ini menjadi wajib ketika anda menggunakan sistem layout dari Seme Framework versi 3.

Dari penamaan nama inilah, tema dapat diatur dengan cara tema utama dan tema dasar ataupun langsung dengan tema utama. Untuk tema utama dan dasar, akan digunakan fallback mode, jadi kalau misalkan sudah tidak ada tema yang coock di folder akan dikembalikan ke default.

Struktur File Tema theme.json dan script.json

Setelah membuat folder, syarat selanjutnya adalah menambahkan dua file json untuk menandakan bahwa folder tersebut adalah tema. File json pertama diberi nama dengan theme.json ini digunakan untuk mengisi file atau meta yang harus di panggil didalam skrip header. File kedua adalah script.json file ini berisi javascript yang akan dieksekusi sebelum body ditutup.

Adapun contoh file theme.json adalah

[
"<meta charset=\"utf-8\" \/>",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/foundation3.css\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/font-awesome.css\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/open_sans.css\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/nprogress.css\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/app.css\" \/>",
"<link rel=\"stylesheet\" href=\"{{base_url}}assets/css/normalize2.css\" \/>"
]

sementara contoh file script.json adalah

[
"<script src=\"{{base_url}}assets/js/vendor/modernizr.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/jquery.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/foundation.min.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/nprogress.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/jquery.lazyload.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/jquery.cookie.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/slick.min.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/foundation-datetimepicker.js\"><\/script>",
"<script src=\"{{base_url}}assets/js/vendor/jquery.price_format.2.0.js\"><\/script>"
]

Dengan demikian tema kini sudah siap digunakan.