Tema Tampilan

Seme Framework support theme creation by separating the view into 2 different view parts, the reusable view component(s) and specific view component(s). Seme Framework telah menyediakan fitur untuk pembuatan tema tampilan untuk mempermudah dalam penyusunan tampilan HTML. Penyusunan tampilan HTML ini akan dipecah berdasarkan jumlah penggunaannya, seperti sering digunakan berulang kali (reusable) atau hanya digunakan 1 kali saja untuk tampilan tertentu (specific).

Komponen Spesifik

Komponen spesifik merupakan tampilan yang hanya digunakan untuk halaman itu saja, hampir tidak pernah digunakan dihalaman lain. Pada Seme Framework, komponen spesifik biasanya disimpan pada folder sesuai dengan nama kelas Controller dan method-nya. Contoh kelas Controller Produk Method detail, maka file viewnya adalah produk/detail/home.php.

View Spesifik untuk JavaScript

Pada seme framework, setiap file JavaScript yang spesifik akan disimpan didalam file tampilan berkahiran _bottom.php. Contoh untuk kelas Controller Produk Method detail, maka file view khusus untuk javascriptnya adalah produk/detail/home_bottom.php.

View Spesifik untuk Modal

Modal merupakan sebuah tampilan yang ada pada lapisan terdepan dan menutup tampilan yang ada, yang bertujuan untuk memberikan informasi tambahan terhadap pengguna. Dalam Seme Framework, penggunaan modal ini akan dipecah juga, karena home.php hanya akan dipergunakan untuk tampilan yang langsung tampil saja. Untuk itu setiap tampilan Modal akan disimpan didalam file tampilan berkahiran _modal.php. Contoh untuk kelas Controller Produk Method detail, maka file view khusus untuk Modal-nya adalah produk/detail/home_modal.php.

Contoh View Komponen Spesifik

Berikut ini adalah contoh ilustrasi struktur file dan direktori untuk view komponen yang spesifik dalam sebuah tema.

x
–
+
app/
└── view/
 └── front/ ( untuk tema)
  ├── home/
  │ ├── home.php
  │ ├── home_modal.php
  │ └── home_bottom.php
  ├── produk/
  │ ├── home.php
  │ ├── home_modal.php
  │ ├── home_bottom.php
  │ ├── detail.php
  │ ├── detail_modal.php
  │ └── detail_bottom.php
  └── profile/
    ├── home.php
    ├── home_modal.php
    └── home_bottom.php

Komponen Reusable

Komponen Reusable adalah komponen yang sering digunakan berulangkali ketika menampilkan sebuah website. Contoh dari komponen yang sering digunakan didalam tampilan adalah bagian tag head, navigation bar, side menu, footer, dan komponen lainnya.

Cara Kerja

Tema tampilan pada Seme Fraework berada didalam direktori app/view. Sementara untuk komponen reusable disimpan didalam app/view/theme_name/page/html. Kemudian untuk komponen spesifik disimpan didalam app/view/theme_name/nama_controller/nama_method/home.php.

Syarat Dasar Tema Tampilan

Seme Framework membutuhkan sebuah direktori untuk mengumpulan tema tampilan. Kemudian, sebuah tema tampilan dikatakan valid jika memiliki file script.json, theme.json dan sebuah direktori page yang berisi file layout. Untuk lebih jelasnya bisa dilihat pada ilustrasi struktur file dan direktori dibawah ini.

x
–
+
app/
└── view/
 └── [THEME_NAME]/
  ├── theme.json
  ├── script.json
  └── page/
   └── col-1.php

Syarat Direktori Tema

Direktori Tema merupakan sebuah direktori yang ada didalam app/view dan nama dari direktori tersebut akan mewwakili nama tema. Syarat dari direktori ini adalah hanya memiliki huruf kecil kemudian bisa diikuti oleh angka dan atau underscore.

Syarat File Layout

File layout merupakan sebuah file yang berisikan layout atau tata letak dari html. File layout ini merupakan file utama untuk menyimpan komponen reusable. Letak dari file layout ini harus didalam app/view/theme_name/page/. Kemudian barulah layout tersebut bisa dipanggil dengan menggunakan metode loadLayout().

Contoh Source Code File Layout

Berikut ini adalah contoh source code untuk file layout col-1.php.

x
–
+
<!DOCTYPE html>
<html>
 <head>
  <title><?=$this->getTitle()?></title>

  <!-- CSS link from theme.json -->
  <?php $this->getAdditional(); ?>
 </head>
 <body>
  <?php $this->getThemeContent() ?>

  <!-- from script.json -->
  <?php $this->getJsFooter(); ?>

  <!-- Load and execute javascript -->
  <script>
   //javascript loaded from putJsReady()
   <?php $this->getJsReady(); ?>

   //javascript loaded from putJsContent()
   <?php $this->getJsContent(); ?>
 </script>
</body>
</html>

Syarat theme.json

File theme.json ini adalah salah satu syarat untuk pembuatan tema tampilan di Seme Framework. File ini akan menyimpan semua tag yang nantinya akan ada didalam tag HTML head. File ini diproses oleh metode Konstruktor kelas SENE_Controller dan dioutputkan oleh metode getAdditional().

Contoh Source Code theme.json

Berikut ini adalah contoh source code untuk file theme.json untuk Seme Framework minimal versi 4.0.2.

x
–
+
{
  "link":
  [
    {
      "rel": "stylesheet",
      "href": "https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"
    },
    {
      "rel": "stylesheet",
      "href": "{{cdn_url}}assets/css/jquery.gritter.css"
    },
    {
      "rel": "stylesheet",
      "href": "{{base_url}}skin/v2/css/app.css"
    }
  ]
}

Pelajari selengkapnya

Penggunaan kode {{base_url}} dan {{cdn_url}} untuk theme.json.

Syarat script.json

File script.json ini adalah salah satu syarat untuk pembuatan tema tampilan di Seme Framework. File ini akan menyimpan semua tag script yang nantinya akan disimpan pada bagian akhir halaman HTML sebelum tutup tag body. File ini diproses oleh metode Konstruktor kelas SENE_Controller dan dioutputkan oleh metode getJsFooter().

Contoh Source Code script.json

Berikut ini adalah contoh source code untuk file script.json untuk Seme Framework minimal versi 4.0.2.

x
–
+
{
  "script":
  [
    {
      "src": "https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"
    },
    {
      "src": "{{base_url}}skin/v2/css/jquery.min.js"
    },
    {
      "src": "{{cdn_url}}assets/js/jquery.moneyFormat.min.js"
    }
  ]
}

Pelajari selengkapnya

Penggunaan kode {{base_url}} dan {{cdn_url}} untuk script.json.

theme.json
View