http://www.informulate.net/wp-content/uploads/2013/02/symfony-twitter-bootstrap.jpg
Setelah pada artikel sebelumnya kita membahas tentang memasang twig pada framework slim, pada artikel ini akan saya tuliskan cara pembuatan templating menggunakan twig dan slim framework.
Templating akan sangat berguna dalam membuat layout aplikasi, dengan templating kita tidak perlu lagi melakukan “copy-paste” seluruh halaman web. Kita cukup membuat sebuah layout halaman inti yang memuat struktur html dasarnya, memanggul file css dan javascript. Selanjutnya halaman yang berisi data yang sering berubah kita pisahkan dari halaman layout tersebut. Sehingga jika suatu saat kita akan mengganti layout tidak perlu mengubah seluruh halaman yang sudah kita buat. Dalam artikel ini nantinya pengaturan halaman akan menggunakan twitter bootstrap untuk mempermudah dan memperindah tampilan yang akan dibuat.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta charset=utf-8>
<title>Slim task project</title>
<!–[if lt IE 9]> HTML5Shiv
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<!– start navigation–>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Slim Task Project</a>
<ul class="nav">
<li><a href="/index.php">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<!– end navigation–>
<!– start container–>
<div class="container">
{% block content %}{% endblock %}
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>[/php]
$app->get(‘/biodata’,function() use($app){
$data[‘biodata’] = array(‘name’=>’dwi’,’last’=>’wijonarko’,’address’=>’Indonesia’,’email’=>’d.wijonarko@gmail.com’);
$app->view()->setData(array());
$app->render(‘biodata.tpl’, $data);
});
[/php]
{% extends "layout.tpl" %}
{% block content %}
<ul>
<li>Name = {{biodata.name}}</li>
<li>Last Name = {{biodata.last}}</li>
<li>Address = {{biodata.address}}</li>
<li>Email = {{biodata.email}}</li>
</ul>
{% endblock %}
[/php]
baris pertama yaitu extends, menunjukkan bahwa file ini adalah bagian dari layout.tpl yaitu file layout aplikasi. Kemudian content dari halaman ini diapit oleh tah block content dan endblock. Hasil dari tampilan yang kita buat
