Dalam pembuatan sebuah website/sistem informasi template merupakan elemen penting dalam penyajian tampilan sebuah website, disini akan dijelaskan penggunaan template pada Kohana 3.2, agar pembuatan suatu website lebih efisien dan simpel.
Melanjutkan Blog sebelumnya, defaultnya template kohana membuat controller turunan dari Controller_Template, namun jika kita membuat 1 template untuk semua kita harus menyertakan title, javascript, css dll yang membuat wasting code. Oleh karena itu dibutuhkan sebuah suatu controller template baru yang akan diturunkan ke controller kita yang mempunyai template yang sama.
1. kita buat template kita yang berbentuk HTML (dalam hal ini menggunakan Twitter Bootstrap), tinggal menambahkan beberapa tag php.
- title (string) : title dari page
- scripts (array) : array dari javascripts yang dibutuhkan pada page
- styles (array) : array dari CSS yang dibutuhkan pada page
- content (string/array) : isi dari konten website
ok, just show the code :)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kohana 3.2 Templating with Twitter Bootstrap <?php echo ( ! empty($title)) ? Html::chars(" - ".$title) : ''; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<style>
body '{
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}'
</style>
<?php foreach ($styles as $file => $type) echo HTML::style($file, array('media' => $type)), "\n" ?>
<?php foreach ($scripts as $file) echo HTML::script($file), "\n" ?>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Jefri</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<?php echo $content ?>
</div> <!-- /container -->
</body>
</html>
</p>
2. Buat Controller_Template baru untuk turunan controller yang akan kita pakai dengan template yang sama. sehingga akan terlihat seperti ini :
- Controller_Template_Layout extends Controller_Template
- Controller_Page extends Controller_Template_Layout
Jadi setiap controller akan meng-extends Controller_Template_Layout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php defined('SYSPATH') or die('No direct access allowed.');
class Controller_Template_Layout extends Controller_Template
{
public $template = 'template/layout';
/**
* The before() method is called before your controller action.
* In our template controller we override this method so that we can
* set up default values. These variables are then available to our
* controllers if they need to be modified.
*/
public function before()
{
parent::before();
$this->session = Session::instance();
if ($this->auto_render)
{
// Initialize empty values
$this->template->title = '';
$this->template->content = '';
$this->template->templates = '';
$this->template->styles = array();
$this->template->scripts = array();
}
}
/**
* The after() method is called after your controller action.
* In our template controller we override this method so that we can
* make any last minute modifications to the template before anything
* is rendered.
*/
public function after()
{
if ($this->auto_render)
{
$styles = array(
'assets/css/bootstrap.css' => 'screen, projection',
'assets/css/bootstrap-responsive.css' => 'screen, projection',
);
$scripts = array(
'assets/js/jquery-1.7.2.min.js',
'assets/js/bootstrap.js',
);
$this->template->styles = array_merge( $styles, $this->template->styles );
$this->template->scripts = array_merge( $scripts, $this->template->scripts );
}
parent::after();
}
}
3. Membuat controller yang akan menggunakan template yang sudah kita buat.
1
2
3
4
5
6
7
8
9
10
11
12
<?php defined('SYSPATH') or die('No direct script access.');
class Controller_Page extends Controller_Template_Layout {
public function action_index()
{
$this->template->title = __('Welcome to kohana 3.2 Template');
$this->template->content = View::factory('page/home');
}
}
</p>
Template untuk kohana 3.2 siap di pakai.
Download melalui github Kohana Template
Sumber Bacaan :
- http://kerkness.ca/kowiki/doku.php
- http://kohanaframework.org/3.2/guide/kohana/mvc/views