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-Viewdan PHP-View.

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

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 :

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

<? Php
session_start ();
membutuhkan __DIR__ . /../vendor/autoload.php ;
// Konfigurasi Slim
$ config = array yang (
DisplayErrorDetails => benar ,
AddContentLengthHeader => palsu ,
);
$ app = baru \ Slim \ App ([ pengaturan => $ config ]);
// Muat Rute kami
membutuhkan __DIR__ . /routes.php ;
melihat bakuapp.php host dengan ❤ oleh GitHub

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

<? Php
membutuhkan __DIR__ . /../app/app.php ;
$ app -> menjalankan ();
melihat bakuindex.php host dengan ❤ oleh GitHub

Instalasi Twig-View

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

Layar Ditembak 2017/02/19 di 17.16.46

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 :

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

<? Php
session_start ();
membutuhkan __DIR__ . /../vendor/autoload.php ;
// Konfigurasi Slim
$ config = array yang (
DisplayErrorDetails => benar ,
AddContentLengthHeader => palsu ,
);
$ app = baru \ Slim \ App ([ pengaturan => $ config ]);
// Dapatkan Dependency Injection Kontainer
$ kontainer = $ app -> getContainer ();
// Daftar Ranting View Helper
$ kontainer [ pandangan ] = function ( $ kontainer ) {
$ pandangan = baru \ Slim \ Views \ Ranting ( __DIR__ . / Views , [
Cache => palsu ,
Men-debug => benar
]);
// Tambahkan Ekstensi
$ pandangan -> addExtension ( baru \ Slim \ Views \ TwigExtension (
$ kontainer -> router ,
$ kontainer -> request -> getUri ()
));
kembali $ pandangan ;
};
// Muat Rute kami
membutuhkan __DIR__ . /routes.php ;
melihat bakuapp.php host dengan ❤ oleh GitHub

Yang perlu diperhatikan :

  • baris 20 : pada baris ini kita membuat variabel $view sebagai new instancedari \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 :

<? Php
$ app -> mendapatkan ( / , fungsi ( $ permintaan , $ respon ) {
kembali $ ini -> pandangan -> render ( $ respon , home.twig );
});
melihat bakuroutes.php host dengan ❤ oleh GitHub

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 :

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

Gambar 2

Pada bisa kan ? Mari kita lanjutkan bermainnya 😀

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 :

<? Php
$ app -> mendapatkan ( / , fungsi ( $ permintaan , $ respon ) {
kembali $ ini -> pandangan -> render ( $ respon , home.twig );
});
$ app -> mendapatkan ( / halo / {nama} , fungsi ( $ permintaan , $ respon , $ args ) {
kembali $ ini -> pandangan -> render ( $ respon , hello.twig , array yang ( nama => $ args [ nama ]));
});
melihat bakuroutes.php host dengan ❤ oleh GitHub

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

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

Gambar 3

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 :

Menambahkan File Layout

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

<! DOCTYPE html>
<html lang=en>
< Kepala >
< Meta charset = UTF-8 >
< Title > Slim & Ranting </ title >
< Link di rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css integritas = SHA384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4u crossorigin = anonymous >
< Link di rel = stylesheet href = {{base_url ()}} / css / style.css >
</ Kepala >
< Body >
{% Termasuk layout / navigation.twig %}
< Div class = container >
{% Blok konten %} {% endblock %}
</ Div >
< Script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js > </ Script >
< Script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js integritas = SHA384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa crossorigin = anonymous > </ Script >
</ Body >
</ Html >
melihat bakudasar-layout.twig host dengan ❤ oleh GitHub

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/layoutsdan isikan dengan kode berikut :

<nav class=navbar navbar-inverse navbar-fixed-top>
< Div class = container >
< Div class = navbar-header >
< Button jenis = button class = navbar-ubah runtuh Data-ubah = runtuh Data-sasaran = #navbar aria-diperluas = palsu aria-kontrol = navbar >
< Rentang class = sr-satunya > Beralih navigasi </ rentang >
< Rentang class = icon-bar > </ rentang >
< Rentang class = icon-bar > </ rentang >
< Rentang class = icon-bar > </ rentang >
</ Button >
< A class = navbar-merek href = # > Slim & Ranting </ a >
</ Div >
< Div id = navbar class = runtuhnya navbar-runtuh >
< Ul class = nav navbar-nav >
< Li > < a href = # > Home </ a > </ li >
</ Ul >
< Ul class = nav navbar-nav navbar-benar >
< Li class = dropdown >
< A href = # class = dropdown-ubah Data-ubah = dropdown peran = tombol aria-haspopup = benar aria-diperluas = palsu > Friandy Dwi Noviandha < rentang class = tanda sisipan > </ rentang > </ a >
< Ul class = dropdown-menu >
< Li > < a href = # > Ubah sandi </ a > </ li >
< Li > < a href = # > Keluar </ a > </ li >
</ Ul >
</li>
</ Ul >
</ Div >
</ Div >
</ Nav >
melihat bakunavigation.twig host dengan ❤ oleh GitHub

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

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

body {
padding-top : 80 px ;
padding-bottom : 50 px ;
}
melihat bakustyle.css host dengan ❤ oleh GitHub

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 :

{% Meluas layout / dasar-layout.twig %}
{% Blok konten %}
<h3>Ini adalah halaman utama</h3>
{% Endblock %}
melihat bakuhome.twig host dengan ❤ oleh GitHub

Penjelasan :

  • baris 1 : kita meng-extends atau memanggil file layout/base-layout.twigke 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

Gambar 4

Nampaknya berhasil 😀 Navigasi dan kode html yang kita taruh pada blockcontent berhasil tampil.

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

{% Meluas layout / dasar-layout.twig %}
{% Blok konten %}
Senang Coding, < b > {{ nama | atas }} </ b >!
{% Endblock %}
melihat bakuhello.twig host dengan ❤ oleh GitHub

dan hasilnya adalah :

Gambar 5

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 !