Theme

Seme Framework support theme creation by separating the view into 2 different view parts, the reusable view component(s) and specific view component(s).

The Reusable 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.

The Specific Component(s)

The Specific Component(s) is the view component that only show up for a specific page. This specific component(s) on Seme Framework usually separated by Controller class name and its method.

How It Works

The view template on Seme Framework will be related to a directory name inside app/view. The reusable component(s) will be placed inside theme directory under page/html directory. The specific component(s) will be placed inside theme directory, the directory name will be represented the controller name, and then the method will be a file name inside the same directory.

Basic File and Directory Structure

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

–

| app/
|- view/
|-- [THEME_NAME]/
|--- theme.json
|--- script.json
|--- page/
|---- col-1.php (layout file)

Theme Directory

A directory inside app/view that represent the theme name. The directory theme name always in lowercase, 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.

–

<!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 String Example

Here is the example codes for theme.json file using json string.

–

[
"<link rel=\"stylesheet\" href=\"{{base_url}}skin/front/css/nprogress.css\" />",
"<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css\" />",
"<link rel=\"stylesheet\" href=\"{{cdn_url}}assets/css/jquery.gritter.css\" />"
]

theme.json JSON Object Example

Here is the example codes for theme.json file using json object.

This method only supported from Seme Framework 4.0.2 above.

–

{
  "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 JSON String Example

Here is the example codes for script.json file using json string.

–

[
  "<script src=\"{{base_url}}skin/front/js/nprogress.js\"></script>",
  "<script src=\"{{base_url}}skin/front/js/moment.min.js\"></script>",
  "<script src=\"{{base_url}}skin/front/js/moment-with-locales.min.js\"></script>"
]

script.json JSON Object Example

Here is the example codes for script.json file using json object.