View

View atau tampilan digunakan oleh Seme Framework untuk menampilkan sebuah tampilan.

Biasanya tampilan disimpan di dalam direktori app/view/front sebagai tema bawaan (default).

Disamping View, Seme Framework juga mendukung untuk pembuatan tema. Tema merupakan sekumpulan view dengan struktur tertentu.

Biasany suatu tema disimpan pada sebuah folder di dalam direktori view, contoh tema front ada diapp/view/front.

Memanggil view secara manual

View dapat dipanggil secara otomatis melalui tema, atau dapat juga di panggil secara manual. Berikut ini adalah cara pemanggilan menu secara manual (tanpa tema):

Seperti biasa, diasumsikan Seme Framework telah diinstal di dalam D:\XAMPP\htodcs\seme_framework dan ketika di buka melalui alamat URL http://localhost/seme_framework sudah mengarah ke Seme Framework yang berjalan dengan baik dan tidak error.

Membuat file view

Pertama-tama buat file view didalam direktori app/view/template.php. Kemudian tambahkan source code seperti ini:

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

Setelah itu edit controller Home yang ada di app/controller/home.php dan ubah seperti source code ini:

<?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
	}
}

Jika telah selesai, cobalah buka alamat http://localhost/seme_framework/ apakah akan muncul seperti HTML yang sudah disetel sebelumnya?


Mengirim data dari Controller ke View

Seme Framework memiliki kemampuan untuk mengirim data yang telah dipanggil atau dibuat di controller kedalam view.

Tapi, hanya mengizinkan satu variabel saja yang dapat dimasukan kedalam view. Oleh karena itu, kita harus membuat variabel tersebut bertipe data array supaya dapat menampung banyak variabel didalamnya.

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.

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 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/
---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>
        

Memanggil layout

Setelah tema di setel, sekarang saatnya untuk memanggil tema dari 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
	}
}
            

Demikian.