Saat ini blog Fusebox PHP Indonesia telah pindah ke http://blog.fbxphpindonesia.com

Terima Kasih

Kita pun dapat membangun sebuah aplikasi menggunakan metoda OOP dan pola MVC menggunakan fusebox, dalam fusebox.xml terdapat tag <classes> yang berfungsi untuk me-registrasi class-class pada aplikasi kita, yang nantinya dapat di akses melalui <instatiate> dan <invoke> pada circuit.xml. Dengan menggunakan konsep OOP secara tidak langsung aplikasi Anda akan mempunyai pola MVC (implicit MVC). Sekarang bayangkan dalam root direktori aplikasi Anda mempunyai direktori classes/ dan circuits/, kemudian masukkan semua class-class kedalam direktori classes/. Asumsi saya adalah class-class tersebut merupakan model dari aplikasi, kemudian di dalam direktori circuits/ adalah file circuit.xml dan file-file fuse, asumsikan circuit.xml adalah controller dan file-file fuse adalah view.

Idealnya sebuah class/model merupakan interface ke sumber data (database) atau sebuah pemrosesan yang tidak mengeluarkan output secara langsung, output-output haruslah berupa variabel yang nantinya dikeluarkan/dicetak oleh view (fuse file) dalam jendela browser (yang dibicarakan adalah aplikasi web/website) dan semua itu dikendalikan oleh controller(circuit.xml).

Jika Anda menggunakan FLiP sebagai metoda pengembangan, proses pemodelan (mengubah file-file fuse untuk query dan action ke dalam suatu class) akan menghilangkan penulisan fusedoc pada class karena class berbeda konsep dengan fuse. Namun demikian sebagai gantinya Anda dapat membuat class abstract yang dapat menjabarkan fungsi-fungsi dari class tersebut bagi fusecoder Anda (jika Anda bekerja dalam team, dan Anda adalah arsiteknya).

Dalam kesempatan lain akan saya berikan contoh penggunaan OOP ini, jadi tunggu aja yah

Anggap kita akan membuat aplikasi input data obat, berikut adalah salah satu contoh yang bisa kita terapkan :

<fuseaction name=”add”>
<do action=”login.checksession”/>
<set name=”withLayout” value=”true”/>
<set name=”titleContent” value=”TAMBAH DATA OBAT”/>

<xfa name=”submitPost” value=”obat.insert”/>
<xfa name=”list_obat” value=”obat.list”/>
<do action=”global.setPostBack”/>

<include template=”qry_listoptions” circuit=”pemasok”/>
<include template=”qry_listoptions” circuit=”pabrik”/>
<include template=”qry_listoptions” circuit=”kategori”/>
<include template=”qry_listoptions” circuit=”kelompok”/>
<include template=”dsp_add” contentvariable=”mainContent”/>
</fuseaction>

<fuseaction name=”insert”>
<do action=”login.checksession”/>

<include template=”act_validate”/>
<if condition=”$isValid”>
<true>
<include template=”act_insert”/>
<set name=”withLayout” value=”true”/>
<set name=”titleContent” value=”DATA OBAT”/>

<xfa name=”obat_list” value=”obat.list”/>
<xfa name=”obat_add” value=”obat.add”/>
<xfa name=”obat_edit” value=”obat.edit”/>

<include template=”dsp_insert” contentvariable=”mainContent”/>
</true>
<false>
<do action=”add”/>
</false>
</if>
</fuseaction>

Script diatas adalah potongan dari file circuit.xml, circuit tersebut mempunyai alias “obat” yang didefinisikan pada file fusebox.xml.

Disitu kita lihat ada 2 buah fuseaction add dan insert, fuseaction add adalah untuk menampilkan form tambah data, sedangkan insert adalah action jika form di-submit.

Pada kedua fuseaction tersebut kita akan lebih mudah membaca alur program daripada harus membaca script php secara langsung, dan ini dapat dirasakan ketika kita perlu mengubah aplikasi pada masa yang akan datang sebagai pengganti flow chart diagram jika Anda tidak (sempat) membuatnya atau paling tidak sebagai dokumentasi aliran program bagi Anda sendiri.

include(“path/globalFunction.php”);

di dalam file fusebox.init.php

maka pada awal aplikasi di panggil akan menjalankan globalFunction.php terlebih dahulu.

Pada mode development fusebox melakukan parsing file fusebox.xml dan circuit.xml kemudian mengubahnya menjadi file .php. Hasil parsing tersebut kemudian disimpan dalam folder parsed. Folder parsed adalah folder yang kita buat untuk menyimpan hasil parsing file fusebox.xml dan circuit.xml, folder ini harus “exclusive” dalam kata lain mempunyai permission r-w-x-(0777).

Dalam file index.php kita dapat mendefinisikan variabel $FUSEBOX_APPLICATION_NAME yang jika tidak di definisikan maka variabel ini berisi “cachedata” sehingga pada folder parsed akan di-generate file app_cachedata.php yang merupakan hasil parsing file fusebox.xml. Dalam fusebox 5 file-file circuit.xml di parse kemudian di generate menjadi file _app_cachedata.php, sedangkan pada fusebox 4 fusebox.xml dan circuit.xml di-generate dalam satu file app_cachedata.php.

Terdapat 2 jenis mode development pada fusebox 5 yaitu development-full-load dan development-circuit-load, development-full-load berarti fusebox melakukan parsing terhadap file fusebox.xml dan circuit.xml pada setiap request, sedangkan development-circuit-load berarti fusebox melakukan parsing terhadap file fusebox.xml jika file app_cachedata.php belum ada dan parsing file circuit.xml pada setiap request.

Pada mode development seringkali aplikasi menjadi berat disebabkan file app_cachedata.php dan _app_cachedata.php menjadi membesar, solusinya adalah dengan menghapus file app_cachedata.php dan _app_cachedata.php tersebut.

Mode production digunakan ketika Anda telah siap untuk men-deploy aplikasi Anda, pada mode ini fusebox akan mengenerate file fusebox.php dan file-file circuit.xml jika file app_cachedata.php dan _app_cachedata.php (fusebox 5) tidak/belum ada. Hal ini mempercepat proses dari aplikasi yang Anda bangun, karena setelah file app_cachedata.php dan _app_cachedata.php di generate/create, fusebox tidak akan menulis ulang file-file tersebut sehingga proses menjadi lebih cepat seolah-olah aplikasi dibangun tanpa framework.

Bagaimanapun fusebox hanya memiliki sedikit core files (file-file inti) yang berukuran kurang dari 300kb, dibandingkan dengan framework lain yang core files-nya saja berukuran lebih dari 1M tentu akan membuat aplikasi yang dibangun dengan fusebox menjadi lebih cepat.

Berfikir untuk menggunakan fusedoc pada setiap fuse file adalah sebuah tindakan bijaksana bagi seorang fusebox architect, fusedoc mendokumentasikan serta mengkomunikasikan antara fusebox architect dan fusecoder. Fusedoc generasi kedua berbentuk XML vocabulary, sebagai sebuah standar fusedoc pastinya mempunyai DTD (Document Type Definition), dtd untuk fusebox 2 dapat dilihat pada link berikut http://trac.fuseboxframework.org/fusebox/browser/website/trunk/fusedoc.dtd.

Dalam menulis fusedoc, usahakan untuk memberikan rincian terhadap fuse, berikan semua informasi yang dibutuhkan oleh fusecoder, buat mereka agar tidak perlu mencari-cari variabel yang mereka butuhkan. Coba perhatikan contoh berikut ini:

<fusedoc fuse=”act_checkuser” language=”PHP” version=”2.0″>
<responsibilities>
Memeriksa username & password yang di-input oleh user dan mencocokannya dengan database.
</responsibilities>
<properties>
<history type=”create” date=”23-Jan-2009″ author=”Yerie Piscesa” role=”Architect” email=”yerie.piscesa@mycompany.com”></history>
<note author=”Yerie Piscesa” date=”23-Jan-2009″>
variabel koneksi mysql: $dbNews
fungsi mysql_select_db() telah dijalankan
variabel nama database: $database_dbNews

resource untuk fungsi terkait database ada pada :
apps/common/circuits/db/func.inc.php
</note>
</properties>
<io>
<in>
<string name=”strSalt” scope=”variables” comment=”variabel salt untuk fungsi crypt”/>
<string name=”username” scope=”form” />
<string name=”password” scope=”form” comment=”crypt() sebelum melakukan cek pada database” />
</in>
<out>
<boolean name=”authorized” scope=”variables” />
<string name=”loginUsername” scope=”session” oncondition=”jika login sukses/authorized” />
<string name=”loginPassword” scope=”session” oncondition=”jika login sukes/authorized” />
<string name=”loginLevel” scope=”session” oncondition=”jika login sukses/authorized” />
<string name=”loginNama” scope=”session” oncondition=”jika login sukses/authorized” />
</out>
</io>
</fusedoc>

Jelaskan apa yang harus dilakukan oleh fuse pada tag <responsibility>, tag-tag dibawah <properties> merupakan informasi tambahan dari suatu fuse. Tag <io> adalah tag input-output, dalam tag <in> masukkan semua variabel input yang diperlukan, lalu <out> adalah variabel(-variabel) yang perlu dihasilkan setelah proses.  Yang perlu ditekankan dalam membuat fusedoc adalah “apa” yang harus dilakukan fuse, bukan “bagaimana” fuse harus dibuat. Dengan fusedoc yang detail dan mudah dipahami akan memudahkan fusecoder untuk melakukan tugasnya, bahkan bagi coder yang tidak terbiasa/tidak pernah bekerja dengan fusebox.

Berikut adalah versi lengkap dari fuse act_checkuser.php, ini adalah versi saya, Anda dapat membuat dengan cara Anda sendiri asal sesuai dengan apa yang dijelaskan oleh fusedoc.

<?php
/*
<fusedoc fuse=”act_checkuser” language=”PHP” version=”2.0″>
<responsibilities>
Memeriksa username & password yang di-input oleh user dan mencocokannya dengan database.
</responsibilities>
<properties>
<history type=”create” date=”23-Jan-2009″ author=”Yerie Piscesa” role=”Architect” email=”yerie.piscesa@mycompany.com”></history>
<note author=”Yerie Piscesa” date=”23-Jan-2009″>
variabel koneksi mysql: $dbNews
fungsi mysql_select_db() telah dijalankan
variabel nama database: $database_dbNews

resource untuk fungsi terkait database ada pada :
apps/common/circuits/db/func.inc.php
</note>
</properties>
<io>
<in>
<string name=”strSalt” scope=”variables” comment=”variabel salt untuk fungsi crypt”/>
<string name=”username” scope=”form” />
<string name=”password” scope=”form” comment=”crypt() sebelum melakukan cek pada database” />
</in>
<out>
<boolean name=”authorized” scope=”variables” />
<string name=”loginUsername” scope=”session” oncondition=”jika login sukses/authorized” />
<string name=”loginPassword” scope=”session” oncondition=”jika login sukes/authorized” />
<string name=”loginLevel” scope=”session” oncondition=”jika login sukses/authorized” />
<string name=”loginNama” scope=”session” oncondition=”jika login sukses/authorized” />
</out>
</io>
</fusedoc>
*/
if ($_POST['username'] == “” && $_POST['password'] == “”) {
$authorized = false;
} else {
$sql = sprintf(“select * from apt_user where username=%s and password=%s”,
quote_smart($_POST['username'],’string’),
quote_smart(crypt($_POST['password'],$strSalt),’string’));
$query = mysql_query($sql,$dbNews) or die(mysql_error());
$found = mysql_num_rows($query);
if ($found == 0){
$authorized = false;
} else {
$authorized = true;
$row = mysql_fetch_assoc($query);
$_SESSION['loginUsername'] = $row['username'];
$_SESSION['loginPassword'] = $row['password'];
$_SESSION['loginLevel'] = $row['level'];
$_SESSION['loginNama'] = $row['nama_lengkap'];
}
}
?>

FLiP (Fusebox Lifecycle Process) adalah pendekatan manajemen proyek (project management approach) dalam merencanakan(planning), merancang(architecting), meng-kode-kan(coding) dan melakukan uji coba(testing) sebuah aplikasi yang dikembangkan dengan Fusebox. Dalam FLiP terdapat beberapa fase yaitu :
1. Wireframing
2. Front End Development
3. Prototype w/ DevNotes
4. Architecture & Fusedocs
5. Coding
6. Testing

Dalam metodologi FLiP sebuah pengembangan proyek difokuskan pada bagaimana klien/user memberikan persetujuan terhadap sistem sebelum sistem itu benar-benar dibuat, sehingga proses produksi menjadi lebih efisien.

Bayangkan Anda telah merancang suatu aplikasi dengan rancangan database, class diagram dan flow-chart yang menurut klien Anda sudah memenuhi kebutuhan (ingat tidak semua klien mengerti ini, mereka mungkin hanya meng-iyakan agar proses pengembangan segera dilakukan, yang mereka tunggu adalah hasilnya bukan rancangannya), kemudian Anda (dan tim Anda) mulai melakukan coding. Oke beberapa modul selesai dan dapat diperlihatkan pada klien, namun bagaimana jika setelah aplikasi dibuat ternyata klien merasa tidak sesuai dengan harapan mereka? Mungkin kita perlu mengubah coding atau mengubah tabel atau yang paling parah mengubah rancangan dasar. Whew… benar-benar memakan biaya yang besar.

FLiP memberikan solusi dalam perspektif ini, fase pertama dalam FLiP adalah wireframing. Wireframing adalah aplikasi text based yang dapat di-klik yang memperlihatkan semua proses dalam aplikasi yang akan dibangun. Wireframe memberikan gambaran kepada klien bagaimana alur aplikasi yang akan dibangun.

Setelah wireframe disetujui langkah selanjutnya adalah  pembuatan front end. Front-end adalah user interface dari aplikasi yang akan dibangun. Fase ini adalah represntasi dari wireframe yang telah dibuat, dimana bentuk teks diubah menjadi bentuk yang sesungguhnya, jika klien merasa perlu mengubah-ubah tampilan, bentuk form atau apa-pun, dapat dengan mudah kita tangani karena kita belum masuk ke programming. Dalam fase ini kita memperlihatkan tampilan statis dari aplikasi kita, tanpa sedikitpun melakukan programming (walaupun mungkin kita perlu menambahkan sedikit javascript pada tampilan statis) dengan data-data dummy.

Wireframe + front end yang sudah disetujui merupakan prototype dari aplikasi kita, Anda dapat menambahkan DevNote(developer note) sebagai alat bantu pengembangan ke depan  pada setiap halaman/tampilan.

Sekarang kita siap melakukan arsitektur aplikasi fusebox. Lakukan pemilahan dari prototype, identifikasikan mana fuseaction, exit fuseaction, fuse, kemudian tambahkan fusedoc (sebuah cara untuk menjelaskan apa yang seharusnya dilakukan oleh fuse) pada masing-masing fuse.

Jika proses-proses sebelumnya telah dilakukan dengan baik, coding seharusnya menjadi perkerjaan yang tidak memberatkan . Testing aplikasi Anda untuk memastikan semuanya berjalan sesuai prosedur.

Tertarik lebih dalam? kunjungi website fusebox http://www.fusebox.org, presentasi dari Christian Ready juga bagus untuk Anda pelajari: Using Flip as a Sole Developer (Presentation)

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

Kita sudah mendefinisikan 3 circuit (global,layout dan page) dan direktorinya pun telah kita buat. Pada masing-masing direktori buatlah file circuit.xml.php

Circuit global akan kita gunakan untuk menempatkan segala sesuatu yang bersifat global untuk semua fuseaction. berikut adalah isi file circuit.xml.php pada direktori global/

<?xml version=”1.0″ encoding=”utf-8″?>
<circuit access=”internal”>
<fuseaction name=”settings”>
<set name=”withLayout” value=”false”/>
<include template=”myGlobals”/>
</fuseaction>
</circuit>

Jika kita lihat pada struktur circuit diatas, kita membutuhkan file myGlobals.php, untuk itu buatlah file myGlobals.php pada direktori global/

Berikut ini adalah isi dari myGlobals.php:

<?php
$self = “index.php”;
$myself = $self.”?”.$_fba->fuseactionVariable.”=”;
?>

$_fba adalah object dari kelas FuseboxApplication dalam core fusebox, fungsi file diatas adalah untuk mengambil fuseactionVariable dari fusebox.xml yang akan digunakan dalam link.

Alih-alih kita membuat link <a href=”index.php?fuseaction=home.main”>Link</a> lebih baik kita buat <a href=”<?php echo $myself; ?>home.main”>Link</a> karena mungkin saja di tengah-tengah pengembangan kita ingin mengubah fuseactionVariable.

Pada bagian sebelumnya kita definisikan globalfuseactions:

<preprocess>
<do action=”global.settings”/>
</preprocess>

<do action=”"/> adalah tag untuk memanggil fuseaction lain dalam sebuah fuseaction, dalam hal ini kita memanggil fuseaction global.settings. Jika kita trace maka dapat di artikan: “cari circuit global, lihat pada fusebox.xml dimana posisi path, kemudian cari fuseaction settings dalam file circuit.xml dari posisi path yang didefinisikan oleh fusebox.xml”.

Dalam fuseaction settings fusebox mengeksekusi file myGlobals.php, maka variabel-varibel dari file tersebut dapat digunakan pada fuseaction yang memanggilnya. Sehingga variabel $self dan $myself dapat digunakan pada fuseaction/fuse yang memanggil fuseaction ini.

Pada aplikasi ini berarti variabel $self dan $myself dapat digunakan pada setiap pemanggilan fuseaction manapun, karena dipanggil dalam globalfuseaction termasuk variabel $withLayout karena didefinisikan di dalam fuseaction settings <set name=”withLayout” value=”false”/>.

Circuit global telah kita buat, sekarang kita lanjutkan dengan membuat circuit layout.  Buka file circuit.xml.php pada direktori layout/ dan berikut adalah isi dari file tersebut :

<?xml version=”1.0″ encoding=”utf-8″?>
<circuit access=”internal”>
<fuseaction name=”wrap”>
<if condition=”$withLayout == ‘true’”>
<true>
<include template=”lay_main”/>
</true>
</if>
</fuseaction>
</circuit>

Tag <if> adalah untuk melakukan percabangan pada circuit, jika Anda teliti fuseaction wrap dari circuit layout dipanggil pada setiap akhir fuseaction, sehingga variabel $withLayout masih dapat digunakan dalam fuseaction ini.

Tag <if> disini untuk menentukan apakah fuseaction menggunakan layout? jika ya/true maka fuse/file lay_main.php akan dieksekusi/dijalankan. Jika Anda teliti(lagi) pada fuseaction global.settings ada deklarasi variabel ini (<set name=”withLayout” value=”false”/>) maka nilai awal untuk variabel $withLayout adalah “false” (string, bukan boolean).

File lay_main.php sudah kita buat pada bagian sebelumnya bukan? baca kembali jika Anda lupa

Saatnya kita buat page, buka file circuit.xml.php pada direktori page/ berikut adalah isi file tersebut:

<?xml version=”1.0″ encoding=”utf-8″?>
<circuit access=”public”>
<fuseaction name=”home”>
<set name=”withLayout” value=”true”/>
<set name=”pageTitle” value=”Homepage”/>
<include template=”dsp_home” contentvariable=”mainContent”/>
</fuseaction>
</circuit>

buat juga file dsp_home.php pada direktori ini, berikut isi file dsp_home.php :

<h2>Homepage</h2>
<p>Page for home</p>

Perhatikan tag ini:

<set name=”withLayout” value=”true”/>

berarti kita mengubah variabel withLayout dengan “true” (sebelumnya “false” pada pemanggilan global.settings), sehingga nanti ketika di eksekusi oleh <if> dalam layout.wrap akan bernilai true dan include lay_main akan dieksekusi.

Perhatikan tag ini :

<set name=”pageTitle” value=”Homepage”/>

dalam file lay_main.php, kita mendefinisikan variabel $pageTitle, dan variabel itu di cetak (echo) dalam tag title (<title><?php echo $pageTitle; ?></title>), dengan ini maka halaman yang dibuka akan mencetak judul sesuai dengan yang kita tentukan.

Terakhir, perhatikan tag ini :

<include template=”dsp_home” contentvariable=”mainContent”/>

ini berarti: eksekusi file/fuse dsp_home.php kemudian simpan(semua output yang dihasilkan setelah mengeksekusi file ini) pada variabel mainContent. Masih ingat pada file lay_main.php kita mendefiniskan variabel ini?

<!– Primary content start –>
<?php echo $mainContent;  ?>
<!– Primary content end –>

disitulah nanti isi variabel mainContent akan di cetak(echo).

Ok sekarang saatnya uji coba, silahkan luncurkan browser dan arahkan ke http://localhost/fbxlayout atau http://localhost/fbxlayout/index.php?fuseaction=page.home

Sekian untuk bagian kedua ini, pada bagian ketiga nanti kita akan menambahkan page pada website tersebut, dan memasang link untuk ber-navigasi antar page beserta file komplit yang sudah jadi dari aplikasi ini

Salam.

Pertama buat dahulu file layout yang akan digunakan untuk seluruh halaman web, jika repot download saja dari internet :p. Dalam contoh ini saya mendownload template dari http://www.freecsstemplates.org/preview/primitive.

Buat direktori kerja dibawah root apache, misal fbxlayout/ sehingga nanti dapat diakses dengan http://localhost/fbxlayout/. Buat susunan direktori sebagai berikut:

fbxlayout/
————/circuits/
———————–/global/
———————–/layout/
———————–/page/
————/fbxphp/
————/parsed/

Copy fusebox core files pada direktori fbxphp/ (download dulu versi 5.0.1 jika belum punya di http://www.fusebox.org/) kemudian download file fusebox.xml yang masih kosong disini lalu letakkan dalam direktori root (fbxlayout/).

Layout sudah di download ?? Jika belum jangan lanjutkan. Jika sudah buka file index.html, cari kode ini:

<title>Primitive by Free CSS Templates</title>

ganti dengan :

<title><?php echo $pageTitle; ?></title>

Kemudian cari blok <!– Primary content start –> dan <!– Primary content end –> hapus semua teks yang berada diantaranya, kemudian ganti dengan kode berikut:

<?php echo $mainContent;  ?>

Apa tujuannya? yaitu agar tag title dan isi halaman dapat diubah-ubah sesuai dengan pemanggilan fuseaction yang aktif. Simpan file index.html (save as …) dengan nama lay_main.php, kemudian letakkan pada direktori fbxlayout/circuits/layout/. Jangan lupa copy file style.css kedalam direktori root (fbxlayout/).

Buat file index.php pada root, berikut isi file index.php :

<?php
$FUSEBOX_APPLICATION_NAME = “mywebsite”;
$FUSEBOX_APPLICATION_PATH = “”;
$FUSEBOX_APPLICATION_KEY = “fusebox”;
@include($FUSEBOX_APPLICATION_PATH.”parsed/app_”.$FUSEBOX_APPLICATION_NAME.”.php”);
include(“fbxphp/fusebox5.php”);
?>

Buka file fusebox.xml.php yang masih kosong. Tambahkan circuit pada tag circuits

<circuits>
<circuit alias=”global” path=”circuits/global/” parent=”"/>
<circuit alias=”layout” path=”circuits/layout/” parent=”"/>
<circuit alias=”page” path=”circuits/page/” parent=”"/>
</circuits>

Ubah parameter default fuseaction:

<parameter name=”defaultFuseaction” value=”page.home” />

Tambahkan setting pada global fuseaction:

<globalfuseactions>
<appinit>
</appinit>
<preprocess>
<do action=”global.settings”/>
</preprocess>
<postprocess>
<do action=”layout.wrap”/>
</postprocess>
</globalfuseactions>

Global fuseactions adalah fuseaction yang dipanggil pada saat aplikasi di inisialisasi (<appinit>, dipanggil hanya sekali pada saat pemanggilan fuseaction pertama kali), kemudian dipanggil sebelum pemanggilan fuseaction (<preprocess>), dan dipanggil setelah pemanggilan fuseaction (<postprocess>) jika didefinisikan. Misal kita mengetikkan url: http://www.domain.com/index.php?fuseaction=page.about, fuseaction yang akan kita panggil adalah page.about, namun sebelum itu fusebox akan mengeksekusi fuseaction pada <appinit>(jika belum dikesekusi) dan <preprocess> jika didefinisikan, dan setelah fuseaction page.about dieksekusi fusebox akan mengeksekusi fuseaction pada <postprocess> jika didefinisikan.

Oke sekian dulu untuk bagian pertama, kita lanjutkan pada bagian selanjutnya.