Configure Template Application Symfony


tempe or template
ini tempe, bukan template

Berikut ini kita akan coba bahas secara singkat pengaturan template application di symfony. Template layout yang dimaksud adalah seperti design web site yang dibuat. Mirip seperti pergantian themes pada cms wordpress.

Pada setiap level symfony, sebenarnya kita bisa melakukan konfigurasi template layout. Namun pada pembahasan kali ini akan dibatasi hanya pada Level Application.

Asumsi, kita akan membuat 2 buah aplikasi. Aplikasi pertama template nya berwana dominan blue, sedangkan aplikasi kedua dominan warna hijau.

Agar lebih mudah membayangkan nya, silahkan perhatikan ilustrasi template layout berikut ini,

layout application symfony
layout application symfony

Yang dimaksud layout template pada level application, berbeda dengan template pada module (merupakan tampilan dari action.class). Sehingga ketika kita membuat layout pada level application, maka akan berlaku bagi seluruh tampilan action.class pada semua module yang ada dibawah struktur application tersebut. Bagian template pada gambar diatas akan berubah-ubah, tergantung dari action.class apa yang akan kita tampilkan.

Berikut ini 3 hal penting, yang berkaitan dengan configure layout pada level application.

1. Edit Layout (tampilan HTML)

Untuk melakukan perubahan layout, bisa langsung menggunakan file : appsbackendtemplateslayout.php

Anda bisa menambahkan script HTML, JS, CSS maupun PHP dengan sesuka hati. Tapi disarankan untuk tidah mengubah script yang ada  di dalam <head> </head> (tag head). Dan tidak menghilangkan script content yang dimiliki symfony,

<?php echo $sf_content ?> //script content dari symfony

variable diatas akan memanggil content symfony dari masing-masing action.class yang telah diinginkan.

2. Edit Design (design CSS)

CSS berisi pengaturan warna, ukuran, posisi dan attribute lainnya yang berkaitan dengan element layout yang telah kita buat.

Modifikasi CSS dapat dilakukan pada : appswebcssmain.css

Anda bisa langsung menggunakan file tersebut, dengan memasukkan script CSS di dalam nya.

3. Konfigurasi view.yml (setting config tampilan aplikasi)

Anda bisa menambahkan template layout baru, dengan cara membuat file layout tersendiri di dalam direktori template pada level application (apps). Begitu juga ketika ingin membuat file CSS baru, Anda bisa menambahkan nya kedalam direktori webcss.

Setiap melakukan penambahan tersebut, atau mengubah layout template yang akan diaktifkan, Anda harus melakukan konfigurasi nya di file appsbackendconfigview.yml

Berikut ini isi dari file view.yml,

default:
  http_metas:
    content-type: text/html

  metas:
    #title:        symfony project
    #description:  symfony project
    #keywords:     symfony, project
    #language:     en
    #robots:       index, follow

  stylesheets:    [main.css]

  javascripts:    []

  has_layout:     true
  layout:         layout

File .yml mirip dengan penggunaan xml. hanya saja hirarki setiap element nya menggunakan spasi, dan case sensitive. Pada contoh diatas kita bisa melihat, bahwa settingan untuk stylesheets yang digunakan adalah file main.css, sedangkan untuk layout pada direktori template yang digunakan adalah file layout.php.

Hal yang sama juga dapat Anda lakukan jika ingin menambahkan file css baru atau file javascript baru. Cukup dengan menuliskan nama file nya pada bagian yang telah disediakan diatas. Khusus untuk penggunaan Javascript, file nya bisa diletakkan pada direktori webjs.

Selain itu file view.yml, juga dapat digunakan untuk melakukan konfigurasi property dari halaman web pada template yang digunakan. Property tersebut adalah yang biasanya kita gunakan pada bagian <head></head> (tag head). Misalnya, title, meta keyword, meta description, meta language, dsb. Caranya dengan mengisikan value dari property tersebut pada bagian yang telah disediakan diatas.

Penggunaan tanda (#) pagar pada file .yml , berarti komentar.

 

Sekarang Anda telah berhasil membuat template layout pada application. Sehingga tampilan setiap halaman untuk berbagai module akan bisa sama dan seragam.

Gampang kah?? buaanngeett… 🙂

 

info lebih lanjut bisa dilihat disini : http://www.symfony-project.org/gentle-introduction/1_4/en/07-Inside-the-View-Layer


Leave a Reply

Your email address will not be published. Required fields are marked *