View

By Default, Seme Framework loaded app/view/front directory as the default theme view.

Seme Framework has supported creation of theme for creating structured view and layout.

This theme also suitable for building small apps that need many themes in one framework.

Although load view manually is still possible.

Loading the View Manually

For loading the view, you have to create a view file first and then load it into controller.

Here is the example:

Create the View File

First create view file in app/view/template.php and fill it with this example html code.

–

<html>
<head>
  <title>Seme Framework Template</title>
</head>
<body>
  <h1>Yi-ha this is your first view!</h1>
</body>
</html>

After that, edit the home controller in app/controller/home.php change to this example.

–

<?php
class Home extends SENE_Controller{
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    $this->view('template'); //means loaded app/view/template.php file
    $this->render(); //this function allow to show view to browser
  }
}

Load the view file and render the web page by opened the controller file through uri browser. Assuming the base_url value is localhost/seme_framework/. So, we have to open the address from browser. And then open localhost/seme_framework/ and see the view.

Passing values to View

Seme Framework has supported passing variable from controller to view. Since the framework only allowed 1 parameter data to pass, so we can use array for populating values.

Modify the View File

First modify the view file that we create before in app/view/template.php and fill it with this example code. We can change the title on html page by using this example code.

–

<html>
<head>
  <title><?php echo $title; ?></title>
</head>
<body>
  <h1><?php echo $content; ?></h1>
  <ul>
    <?php foreach($members as $m){ ?>
      <li><?php echo $m; ?></li>
    <?php } ?>
  </ul>
</body>
</html>

After that, edit the home controller in app/controller/home.php change to this example. We declare the $data variable as array, and then put all values you want to pass to $data variable with this array key.

–

<?php
class Home extends SENE_Controller{
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    $this->view('template'); //means loaded app/view/template.php file
    $this->render(); //this function allow to show view to browser
  }
}

In controller, array key of $data variable will be plain variable when in view mode. For example $data['content'] will be $content if we want to echoing in view. Visit the web page by opened through browser and see what happened.

What if we pass the array values

We can pass any type of values such as array, array of object, integer, string, etc. But we must provide the way how to view of any type exactly is.

Theme and Layout

The theme is a directory that related between app/view/[skin_name] with skin/[skin_name]. In app/view/[skin_name] is the view that can be loaded by controller. But if you want put your CSS and JS related to skin, you can put in /skin/[skin_name]. The layout is a complete html file which is wrap the header code, content, and js.

Create Theme

Navigate to app/view create one folder name it front. And then create new file themes.json and script.json. themes.json contain array of string in JSON format will be loaded in head tag on layout. Same as themes.json, script.json contain about html script tag that loaded just before close body tag in layout. Leave it empty, because the framework only detect a folder in view which is contain script.json and theme.json. Here is the structure of Seme Framework Themes.

–

/
├── app/
│ └── view/
│  └── front/
│   ├── home
│   │ ├── home.php
│   │ └── home_bottom.php
│   ├── theme.json
│   ├── script.json
│   └── page/
│    ├── col-1.php
│    └── html/
│     └── head.php
└── skin/
  └── front/
   ├── css/
   ├── img/
   └── js/

Create new folder page under app/view/front and then create layout file with php extension, name it col-1.php. Then use this code.

–

<!DOCTYPE html>
<html lang="en">
<head>
  <?php $this->getThemeElement("page/html/head",$__forward); ?>
</head>
<body>
  <?php $this->getThemeElement('page/html/topbar',$__forward); ?>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <?php $this->getThemeContent(); ?>
      </div>
    </div>
  </div>
  <?php $this->getThemeElement('page/html/footer',$__forward); ?>

  <?php $this->getJsFooter(); ?>
  <script>
    <?php $this->getJsContent(); ?>
    $(document).ready(function(e){
    <?php $this->getJsReady(); ?>
    });
  </script>
</body>
</html>

Loading Layout

After theme is set, now start load themes in our controller.

–

<?php
class Home extends SENE_Controller{
  public function __construct(){
  parent::__construct();
    $this->setTheme('front'); //means load default for view app/view/front
  }
  private function __getMembers(){
    $members = array();
    $members[] = 'Daeng';
    $members[] = 'Andi';
    $members[] = 'Reza';
    return $members;
  }
  public function index(){
    $data = array();
    $data['title'] = 'EyeShield21 Yi Ha!';
    $data['content'] = 'This content are from controller, our member is:';
    $data['members'] = $this->__getMembers(); //obtained data from private function
    $this->putThemeContent('home/home',$data); //pass $data to view
    $this->loadLayout('col-1',$data); //must executed before render
    $this->render(); //this function allow to show view to browser
  }
}

Thats it.