View

By Default, Seme Framework loaded app/view/front directory as the default skin view. Seme Framework has supported themes for creating many themes and layout without changing view. Seme Framework suitable for building small apps that need many themes in one engine. Beside that, Seme Framework allows load view manually.

Load the View

For loading the view, you have to create the view file first and then load it on 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.

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 http://localhost/yourproject/.


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 with

<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 is array key.

class Home extends Sene_Controller{
	public function __construct(){
		parent::__construct();
	}
	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->view('template',$data); //pass $data to view
		$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 exaclty 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/
---themes.json
---script.json
---page/
----col-1.php
----col-2-left.php
----html/
-----head.php
-----header.php
-----topbar.php
-----footer.php
-----sidemenu.php
skin/
-front
--css
--js
--img
          

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.

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.