Theme

Theme is a set of files and directories that contain view for serving completed webpage interface. Seme Framework support theme creation by separating the view into 2 different parts, the reusable view component(s) and specific view component(s).

The Specific View Component(s)

The Specific View Component(s) is the view component that only show up for a specific page. This specific View component(s) on Seme Framework usually separated by Controller class name and its method. Also this specific component will separated again by its content like specific content for Main HTML Content, JavaScript, and Additional HTML Content.

Specific view Component for Javascript Content

In the seme framework, each specific JavaScript file will be stored in a view file ending in _bottom.php. Example for Product class controller and detail method, so the special view file for the javascript is product/detail/home_bottom.php.

Example

Here is the files and directories example for specific view component.

x
–
+
app/
└── view/
 └── front/
  ├── home/
  │ ├── home.php (for Main HTML)
  │ ├── home_modal.php (for HTML Modal)
  │ └── home_bottom.php (for JS)
  ├── product/
  │ ├── 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

The Reusable View Component(s)

The reusable component(s) is the view component(s) that always included on each view, such as inside head tag, navigation bar, side menu, footer, and many more.

Requirement

There is some requirements for building a theme in Seme Framework. Seme Framework requires a directory for a theme that will created inside app/view and its directory name will be repesented as theme name.

File and Directory Structure Requirement

And then Seme Framework theme requires a directory named page, a layout file inside page directory, script.json file, and theme.json file. For more detailed information you can see the directory structure ilustration below.

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

Theme Directory Name Rules

A theme required a directory inside app/view. The directory name represent the theme name. The theme name should in lowercase, and after that the number character can be followed. Only use underscore for special character.

The Layout File

Layout file is main file for the reusable component. The location of layout file is under page directory inside theme directory. This layout file can be loaded by using loadLayout() method from SENE_Controller class.

Here is the example codes for a layout file named col-1.php file.

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>

theme.json File

The theme.json file contain about css links tags to use in inside head tag. This file are processed by SENE_Controller class constructor and outputed by getAdditional().

theme.json JSON Example

Here is the example codes for theme.json file using json object, this method only supported from Seme Framework 4.0.2 above.

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"
    }
  ]
}

script.json File

The script.json file contain about script tags for javascript source file. This file are processed by SENE_Controller class constructor and outputed by getJsFooter().

script.json Example

Here is the example codes for script.json file using json object, This method only supported from Seme Framework 4.0.2 above.

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"
    }
  ]
}

Using {{cdn_url}} and {{base_url}} Keyword

Both of theme.json and script json, support {{cdn_url}} and {{base_url}} keyword for replacing value from Seme Framework configuration.

View
View: Layout