Layout dengan Fusebox (bag.3)

Pada bagian ketiga ini kita akan menambahkan page dalam website kita. Jika dilihat dari template/layout yang kita download disitu terdapat 6 buah menu (link) pada bagian top (header), jadi kita perlu menambahkan 5 halaman lagi.

Buka kembali file circuit.xml.php pada direktori fbxlayout/circuits/page/ kemudian tambahkan fuseaction seperti ini :

    <fuseaction name="products">
        <set name="withLayout" value="true"/>
        <set name="pageTitle" value="Products and Services"/>
        <include template="dsp_products" contentvariable="mainContent"/>
    </fuseaction>
    <fuseaction name="awards">
        <set name="withLayout" value="true"/>
        <set name="pageTitle" value="Awards"/>
        <include template="dsp_awards" contentvariable="mainContent"/>
    </fuseaction>       
    <fuseaction name="employment">
        <set name="withLayout" value="true"/>
        <set name="pageTitle" value="Employment"/>
        <include template="dsp_employment" contentvariable="mainContent"/>
    </fuseaction>       
    <fuseaction name="press">
        <set name="withLayout" value="true"/>
        <set name="pageTitle" value="Press Releases"/>
        <include template="dsp_press" contentvariable="mainContent"/>
    </fuseaction>       
    <fuseaction name="contact">
        <set name="withLayout" value="true"/>
        <set name="pageTitle" value="Contact Us"/>
        <include template="dsp_contact" contentvariable="mainContent"/>
    </fuseaction>

Jangan lupa untuk membuat fuse yang diperlukan (dsp_products, dsp_awards, dsp_employment, dsp_press dan dsp_contact) pada direktori yang sama. Isi file-file tersebut sesuai keinginan Anda.

Untuk bernavigasi antar halaman, kita perlu menambahkan link di layout kita, buka kembali file circuit.xml.php pada direktori fbxlayout/circuits/layout/ kemudian ubahlah sehingga menjadi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<circuit access="internal">
    <fuseaction name="wrap">
        <if condition="$withLayout == 'true'">
            <true>
                <xfa name="home" value="page.home"/>
                <xfa name="products_services" value="page.products"/>
                <xfa name="awards" value="page.awards"/>
                <xfa name="employment" value="page.employment"/>
                <xfa name="press_releases" value="page.press"/>
                <xfa name="contact_us" value="page.contact"/>
                <include template="lay_main"/>
            </true>
        </if>
    </fuseaction>
</circuit>

xfa adalah tag untuk menentukan fuseaction mana yang dapat keluar dari fuseaction aktif, xfa merupakan kependekan dari exit fuseaction. Tanpa menentukan xfa di circuit pun sebenarnya tidak masalah, tetapi untuk memudahkan dikemudian hari ada manfaatnya juga.

Buka kembali fuse lay_main (fbxlayout/circuits/layout/lay_main.php) kemudian cari kode berikut :

        <li id="first" class="active"><a href="#">Homepage</a></li>
        <li><a href="#">Products and Services</a></li>
        <li><a href="#">Awards</a></li>
        <li><a href="#">Employment</a></li>
        <li><a href="#">Press Releases</a></li>
        <li><a href="#">Contact Us</a></li>

lalu ubahlah dengan kode berikut :

        <li<?php if($myFusebox->originalFuseaction == 'home') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['home']; ?>">Homepage</a>
        </li>
        <li<?php if($myFusebox->originalFuseaction == 'products') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['products_services']; ?>">Products and Services</a>
        </li>
        <li<?php if($myFusebox->originalFuseaction == 'awards') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['awards']; ?>">Awards</a>
        </li>
        <li<?php if($myFusebox->originalFuseaction == 'employment') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['employment']; ?>">Employment</a>
        </li>
        <li<?php if($myFusebox->originalFuseaction == 'press') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['press_releases']; ?>">Press Releases</a>
        </li>
        <li<?php if($myFusebox->originalFuseaction == 'contact') echo ' id="first" class="active"'; ?>>
          <a href="<?php echo $myself.$XFA['contact_us']; ?>">Contact Us</a>
        </li>

$myFusebox->originalFuseaction adalah properti yang menyimpan fuseaction mana yang sedang di-request oleh user,  kita memerlukan itu untuk menentukan “tab” mana yang aktif.

Perhatikan tag <a> diatas, kita menggunakan XFA yang kita atur dalam circuit, XFA biasanya digunakan dalam link ataupun action dari form.

Saatnya uji coba, luncurkan browser lalu arahkan ke http://localhost/fbxlayout, klik link-link menu pada header website dan perhatikan hasilnya. Anda juga bisa bereksperimen bagaimana jika kita tidak ingin menggunakan layout pada salah satu halaman. Misal fuseaction page.press tidak ingin menggunakan layout, maka fuseaction dalam circuit menjadi seperti ini :

    <fuseaction name="press">
        <include template="dsp_press"/>
    </fuseaction>

Variabel “withLayout” dan “pageTitle” kita hilangkan serta atribut contentvariable pada include juga kita hilangkan.

Ok, sekian dulu untuk kesempatan kali ini, file lengkap untuk aplikasi kali ini dapa di download di http://www22.brinkster.com/yerieonweb/fbxlayout.zip