Menggunakan Komponen Twig-View pada Slim Framework

Halo ! Pada kesempatan kali ini, kita akan belajar bagaimana menggunakan Slim Framework dan Twig sebagai template engine-nya. Slim menyediakan 2 komponen yang dapat membantu untuk me-render template, yaitu Twig-View dan PHP-View.

Baru mendengar tentang Slim Framework dan Twig? Silahkan berkenalan dulu disini ya :

• Mengenal Slim Framework, Microframework Berbasis PHP
• Menggunakan Twig sebagai Template Engine

Persiapan

Langsung saja kita praktekan, saya anggap temen-temen sudah mengginstall Slim Framework pada direktori kerjanya masing-masing. Bagi yang belum, bisa melihat cara instalasi Slim Framework disini.

Selanjutnya silahkan membuat struktur folder awal sebagai berikut :

myproject/
|── app/
|   |── Views/
|   |── app.php
|   |── routes.php
|── public/
|   |── .htaccess
|   |── index.php
|── vendor/

Tambahkan kode berikut ini pada file app/app.php :

Tambahkan kode berikut ini pada file public/index.php :

Instalasi Twig-View

Untuk instalasi komponen Twig-View sangat mudah menggunakan Composer, silahkan jalankan perintah di bawah ini :

composer require slim/twig-view

Integrasi dengan Slim

Selanjutnya adalah mengintegrasikan komponen Twig-View yang sebelumnya sudah kita install dengan Slim. Caranya adalah dengan menambahkan kode berikut ini pada file app/app.php :

// Get Dependency Injection Container
$container = $app->getContainer();

// Register Twig View Helper
$container['view'] = function($container){
    $view = new \Slim\Views\Twig(__DIR__ . '/Views', [
        'cache' => false,
        'debug' => true
    ]);

    // Add Extension
    $view->addExtension(new \Slim\Views\TwigExtension(
        $container->router,
        $container->request->getUri()
    ));

    return $view;
};

Maka isi file app/app.php setelah kita tambahkan kode diatas adalah :

Yang perlu diperhatikan :

• baris 20 : pada baris ini kita membuat variabel $view sebagai new instance dari \Slim\Views\Twig yang memiliki 2 parameter. Parameter pertama adalah letak folder tempat kita menyimpan file-file template kita. Pada contoh kode di atas kita memberikan nilai __DIR__ .'/Views', karena folder tempat penyimpanan file-file template kita adalah di folder app/Views. Silahkan sesuaikan dengan letak folder Anda jika Anda ingin mengubahnya. Sedangkan parameter kedua adalah array options untuk konfigurasi Twig, untuk lengkapnya bisa dilihat disini

Membuat tampilan halaman utama

Sampai langkah ini seharusnya kita sudah bisa menggunakan Twig untuk me-render template. Untuk mencobanya mari kita membuat sebuah route yang akan mengatur tampilan utama web kita.

Tambahkan kode berikut pada file app/routes.php :

Penjelasan :

• baris 3 : membuat route untuk halaman index (/)
• baris 4 : me-render file home.twig sebagai template untuk tampilan halaman index

Selanjutnya, buat file baru bernama home.twig di dalam folder app/Views dan tuliskan sebuah pesan berikut :

Hai, hari ini saya sedang belajar menggunakan Twig dan Slim Framework.

Jika tidak ada masalah, maka tampilan halaman index web Anda adalah sebagai berikut :

Pada bisa kan ? Mari kita lanjutkan bermainnya :D

Kita coba tambahkan satu route yang bisa menangkap satu parameter yaitu name yang kemudian akan kita tampilkan pada template. Kode pada file app/routes.php menjadi sebagai berikut :

Karena kita akan me-render template pada file hello.twig, maka silahkan buat file baru app/Views/hello.twig dengan kode sebagai berikut :

Happy Coding, <b>{{ name | upper}}</b> !

Sekarang kita coba untuk mengakses route yang sudah kita buat tadi. Jika tidak ada masalah, tampilannya sebagai berikut :

Membuat Layout

Selanjutnya kita akan mencoba membuat layout dengan Twig. Biasanya pada view ada file-file template yang dipisah agar ketika diperlukan cukup meng-include kan saja file yang diperlukan tersebut. Bagaimana melakukan hal tersebut dengan Twig ? Mari kita coba.

Update Struktur Folder

Ada beberapa folder tambahan yang kita gunakan, silahkan update struktur folder menjadi seperti berikut :

myproject/
|── app/
|   |── Views/
|   |   └── layouts/
|   |── app.php
|   └── routes.php
|── public/
|   |── css/
|   |   └── style.css
|   |── .htaccess
|   └── index.php
└── vendor/

Menambahkan File Layout

Selanjutnya kita buat file base-layout.twig di dalam folder app/Views/layouts/ dan isikan dengan kode berikut :

Yang perlu diperhatikan :

• baris 6 : load file css bootstrap
• baris 7 : load file style.css
• baris 11 : meng-include file layouts/navigation.twig
• baris 13 : membuat sebuah block dengan nama content. Disini lah nanti akan ditampilkan semua kode yang ada di dalam block content.
• baris 16 : load file jquery
• baris 17 : load file js bootstrap

Berikutnya membuat file navigation.twig di dalam folder app/Views/layouts dan isikan dengan kode berikut :

Kode diatas berguna untuk membuat contoh navigasi pada halaman web menggunakan style dari bootstrap.

Selanjutnya kita tambahkan sedikit script css pada file style.css :

Menggunakan File Layout

Pada tahap sebelumnya kita sudah membuat beberapa file yang merupakan potongan-potongan dari layout kita. Selanjutnya adalah menggunakan file-file tersebut.

Mari kita update file home.twig kita menjadi seperti ini :

Penjelasan :

• baris 1 : kita meng-extends atau memanggil file layout/base-layout.twig ke dalam file home.twig
• baris 3 - 5 : membuat block dengan nama content dan mengisikan kode <h3>Ini adalah halaman utama</h3>

Mari kita lihat hasilnya

Nampaknya berhasil :D Navigasi dan kode html yang kita taruh pada block content berhasil tampil.

Mari kita lakukan hal yang sama pada file hello.twig. Update kodenya sebagai berikut :

dan hasilnya adalah :

Mudah bukan ? Sekian dulu tutorial kali ini. Sampai jumpa pada tutorial berikutnya, Insya Allah. Untuk source code full bisa didownload pada repositori codepolitan-slim-twig

Selamat belajar. Selamat Mencoba. Happy Coding !

Referensi

• https://www.slimframework.com/docs/features/templates.html
• http://twig.sensiolabs.org/doc/1.x/
• https://github.com/slimphp/Twig-View
• https://github.com/freyandhy/codepolitan-slim-twig