Membuat template layout dengan Twig serta Twtitter Bootstrap pada Slim Framework

http://www.informulate.net/wp-content/uploads/2013/02/symfony-twitter-bootstrap.jpg

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.

Untuk templating menggunakan twig, kita meletakkan filenya pada direktori templates (yang sudah kita buat pada artikel sebelumnya). Kemudian dalam direktori tersebut kita buat file untuk layoutnya. Kita bisa memakai layout halaman yang ada di Internet ataupun bisa membuat sendiri. Karena akan menggunakan twitter bootstrap, unduh dahulu file css dan javascript yang kita butuhkan dari situs twitter bootstrap. Kemudian ekstrak dan letakkan dalam direktori projek kita. Sehingga susunannya akan menjadi seperti gambar berikut
Buat sebuah file dengan nama layout.tpl pada direktori templates, kemudian ubah isinya agar menjadi layout sebuah halaman html dan panggil file css dan javascript dari twtter bootstrap. Kurang lebih isi dari layout.tpl adalah seperti berikut
<!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>
Nah pada layout.tpl kita memberikan tag dengan tulisan seperti ini “{% block content %}{% endblock %}” pada baris 30. Pada bagian inilah nanti letak dari halaman-halaman yang kita sertakan di layout. Atau bahasa lainnya adalah halaman yang di include kan.
Untuk mencobanya sekarang buat sebuah file lagi pada direktori templates dengan nama biodata.tpl. Pada halaman ini akan kita buat menjadi halaman yang menampilkan isi array (di tampilkan dengan twig tentunya) sekaligus me-load layout yang kita buat. Kemudian buat fungsi pada index php untuk array yang akan kita tampilkan
#index.php get('/biodata') nanti kita akses pada alamat misalnya http://localhost/slim/biodata<

$app->get('/biodata',function() use($app){
 $data['biodata'] = array('name'=>'dwi','last'=>'wijonarko','address'=>'Indonesia','email'=>'[email protected]');
 $app->view()->setData(array());
 $app->render('biodata.tpl', $data);
 });

Kemudian isi dari file layout.tpl adalah seperti berikut
{% 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 %}

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

Artikel selanjutnya adalah membuat aplikasi crud menggunakan phpactiverecord yang digabungkan dengan slim serta twig. Semoga berkenan 🙂