Sekarang kita membuat halaman utama bernama home.page yang disimpan di dalam direktori \www\Menu\protected\pages

Code:

<com:TContent ID="body">

<div class="intro">
<p id="001001" >Selamat datang. <br>
Teks ini berada di halaman paling depan (halaman utama).
<br>
</p>
</div>
</com:TContent>

Halaman ini akan ditampilkan di bawah menu dan menjadi halaman pertama yang akan dilihat oleh pengguna web anda. Nama halaman tidak harus home.page, anda bebas menggunakan nama apapun tetapi jangan lupa untuk mengarahkan halaman standarnya ke nama halaman yang anda buat (jika bukan home.page) pada file konfigurasi aplikasi.

Sekarang kita membuat halaman 1, 2, dan 3 untuk menampilkan halaman yang ditentukan di dalam sub menu halaman. Karena dalam contoh ini lebih mengutamakan penggunaan sistem menu css, maka halaman 1 sampai 3 isinya hampir sama, dan sederhana.

Masing-masing halaman terdiri dari dua file yaitu file template halaman (.page) dan file kontrol halaman (.php). Keduanya harus bernama sama atau yang berbeda hanyalah ekstensi filenya saja.

Halaman1.page:

Code:

<com:TContent ID="body">

<div class="info">
<b>INI HALAMAN 1</b>
</div>

</com:TContent>

Halaman1.php

Code:

<?php

class Halaman1 extends TPage
{
}

?>

Seperti sudah disebutkan sebelumnya bahwa halaman 1,2,3 hampir sama atau memang sama.

Halaman2.page

Code:

<com:TContent ID="body">

<div class="info">
<b>INI HALAMAN 2</b>
</div>

</com:TContent>

Halaman2.php

Code:

<?php

class Halaman2 extends TPage
{
}

?>

Halaman3.page

Code:

<com:TContent ID="body">

<div class="info">
<b>INI HALAMAN 3</b>
</div>

</com:TContent>

Halaman3.php

Code:

<?php

class Halaman3 extends TPage
{
}

?>

Sampai di sini, anda sudah dapat menjalankan sistem menu css menggunakan kerangka kerja Prado.

Untuk menjalankannya, arahkan direktori dokumen pada server web anda ke \www\Menu dan pastikan index.php bisa dibuka secara otomatis oleh server web.

Selamat mencoba.

Sekarang kita akan membuat file index.php, file ini nantinya merupakan file pertama kali yang diakses oleh browser anda.
Tempatkan file ini di direktori \www\Menu.

Code:

<?php

$basePath=dirname(__FILE__);
// ini adalah lokasi distribusi Prado anda. Jika anda menginstalasi ke tempat
// yang berbeda, tetapkan direktori tersebut di sini.
$frameworkPath='C:/prado/framework/prado.php';
$assetsPath=$basePath.'/assets';
$runtimePath=$basePath.'/runtime';

if(!is_writable($assetsPath))
	die("Pastikan direkroti $assetsPath bisa ditulis oleh proses server Web.");

require_once($frameworkPath);
$application=new TApplication;
$application->run();

?>

File index.php ini selanjutnya akan melihat konfigurasi aplikasi web anda yang berada di direktori protected.

Sekarang kita akan membuat file application.xml, file ini berfungsi sebagai file konfigurasi aplikasi web anda.

Code:

<?xml version="1.0" encoding="utf-8"?>

<application id="contohMenu" mode="Debug">
  <paths>
    <using namespace="Application.Komponen.*"/>
  </paths>

  <!-- configuration for available services -->
  <services>
    <service id="page" class="TPageService" DefaultPage="Home">
      <pages MasterClass="Application.TataLetak.Utama" Theme="Gayaku">
      </pages>
	</service>
  </services>
</application>

Anda perhatikan bahwa halaman yang ditampilkan pertama adalah halaman Home, atau Home.page yang akan kita buat nanti di direktori pages. Akan tetapi, sebelumnya akan mengambil dahulu tata letak halaman web yang berada di direktori TataLetak dengan file template Utama.tpl dan file kontrol Utama.php.

Selain itu, anda juga melihat bahwa kita menggunakan tema, yang akan kita gunakan adalah tema Gayaku.

Dan ini adalah pasangannya, file CSS.
Silahkan copy dan simpan dengan nama file Navigator.css di direktori Public.

div.Menu
    {
        position: absolute !important;
    	padding:2px;
		padding-right:10px;
		background:#EDEDED;
		border-bottom: 1px solid #A6A6A6;
		border-top: 1px solid #DCDCDC;
		text-align:left;
		font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
		font-size: 10pt;
  		display: block;
  		margin: 0 0 0 0;
    }

    div.Menu table,
    div.Menu table a
    {
        display: none !important;
    }

    div.Menu div.MenuSpacer
    {
        position: relative !important;
        float: left;
    }

    div.Menu div.MenuItem
    {
        position: relative !important;
        width: 90px;
        height: 31px;
        cursor: pointer;
        float: left;
    }

    div.Menu a.MenuItem
    {
        display: block !important;
        width: 90px;
        line-height: 31px;
        text-decoration: none;
        text-align: center;
        color: #000000;
        cursor: pointer;
    }

    div.Menu div.MenuItem:hover a.MenuItem,
    div.Menu div.MenuItem a.MenuItem:hover
    {
        position: absolute !important;
        width: 90px;
        background-color: #88A6C0;
        color: #ffffff;
    }

    div.Menu div.MenuItem:hover
    {
        width: 90px;
        margin-left: -2px;
    }

    div.Menu div.MenuItem:hover a.MenuItem:hover
    {
        margin-left: 0px;
    }

    div.Menu div.MenuItem a.MenuItem:hover
    {
        margin-left: -2px;
    }

    div.Menu a.MenuItem:hover table,
    div.Menu div.MenuItem:hover table
    {
        display: block !important;
        position: absolute !important;
        left: 0px;
        top: 31px;
        border-bottom: 2px solid #000000;
        border-top: 1px solid #9b9b9b;
        background-color: #F6F6F6;
    }

    div.Menu a.MenuItem:hover table a,
    div.Menu div.MenuItem:hover table a
    {
        display: block !important;
        width: 200px;
        line-height: 14px;
        margin: 0px 0px 0px 0px;
        padding: 3px 0px 3px 8px;
        border-right: 1px solid #9b9b9b;
        border-left: 1px solid #9b9b9b;
        color: #6a6a6a;
        text-decoration: none;
        text-align: left;
        cursor: pointer;
    }

    div.Menu a.MenuItem:hover table a:hover,
    div.Menu div.MenuItem:hover table a:hover
    {
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
        background-color: #ff0000;
        color: #ffffff;
    }

Sampai sejauh ini kita sudah mempunyai dua file yakni TNavigator.php di
direktori \www\Menu\protected\Komponen dan file Navigator.css pada
direktori \www\Menu\protected\Komponen\Public.

Pada contoh ini, kita akan membuat susunan direktori seperti ini.

www
|__ Menu
|——assets
|——protected
| |——-Komponen
| |_____Public
| |——-pages
| |——-runtime
| |_____TataLetak
|_____themes
|_____Gayaku

Kita membuat direktori ini secara manual, hal ini dimaksudkan agar anda dapat mengikuti langkah demi langkah secara praktis dalam mengimplementasikan komponen sistem menu css (TNavigator). Menu ini tidak (belum) disertakan dengan distribusi Prado. Akan tetapi anda dapat men-download di Repository Component maupun yang saya lampirkan.

Susunan direktori di atas masih kosong.

Karena keterbatasan ukuran Lampiran, kode TNavigator seperti di bawah ini, silahkan anda copy dan simpan sebagai TNavigator.php di direktori Komponen.

<?php

class TNavigator extends TControl
{
    const PATH_PUBLIC               = 'Public';
    const FILE_STYLE                = 'Navigator.css';

    /* TNavigator only accepts TNavigatorItem & TNavitorSpacer children. */
    public function addParsedObject($object)
    {
        if ($object instanceof TNavigatorItem ||
            $object instanceof TNavigatorSpacer)
            parent::addParsedObject($object);
    }

    /* We publish our worker CSS file. */
    public function onPreRender($param)
    {
        /* Publish worker CSS file */
        $publish = dirname(__FILE__) . '/' . self::PATH_PUBLIC;
        $url = Prado::getApplication()->getAssetManager()->publishFilePath($publish);
        $this->getPage()->getClientScript()->registerStyleSheetFile($url, $url . '/' . self::FILE_STYLE);
    }

    /* Menu rendering. */
    public function render($writer)
    {
        $writer->addAttribute("class", "Menu");
        $writer->renderBeginTag("div");
        parent::renderChildren($writer);
        $writer->renderEndTag();
    }
}

class TNavigatorItem extends TControl
{
    public function getUrl()            {return $this->getControlState("Url", "#");}
    public function setUrl($value)      {$this->setControlState("Url",TPropertyValue::ensureString($value));}

    public function getTarget()         {return $this->getControlState("Target", "_self");}
    public function setTarget($value)   {$this->setControlState("Target", TPropertyValue::ensureString($value));}

    public function getText()           {return $this->getControlState("Text", $this->getID());}
    public function setText($value)     {$this->setControlState("Text", TPropertyValue::ensureString($value));}

    public function addParsedObject($object)
    {
        if ($this->getParent() instanceof TNavigator &&
            $object instanceof TNavigatorItem)
            parent::addParsedObject($object);
    }

    public function render($writer)
    {

        if (!$this->getVisible()) return;

        if ($this->getParent() instanceof TNavigator)
        {

            $tagDiv = new TPanel();
            $tagA = new THyperLink();
            $tagTable = new TTable();
            $tagBR = new TLiteral();

            $tagDiv->setCssClass("MenuItem");
            $tagA->setCssClass("MenuItem");
            $tagA->setNavigateUrl($this->getUrl());
            $tagA->setTarget($this->getTarget());
            $tagA->setText($this->getText());
            $tagTable->setCellPadding(0);
            $tagTable->setCellSpacing(0);
            $tagBR->setText("<br />");

            $tagDiv->renderBeginTag($writer);
            $tagA->renderBeginTag($writer);
            $tagA->renderContents($writer);
            $tagBR->render($writer);

            if ($this->getHasControls())
            {
                $tagTable->renderBeginTag($writer);
                $this->renderChildren($writer);
                $tagTable->renderEndTag($writer);
            }
            $tagA->renderEndTag($writer);
            $tagDiv->renderEndTag($writer);
        }
        else if ($this->getParent() instanceof TNavigatorItem)
        {

            $tagTR = new TTableRow();
            $tagTD = new TTableCell();
            $tagA = new THyperLink();

            $tagA->setNavigateUrl($this->getUrl());
            $tagA->setTarget($this->getTarget());
            $tagA->setText($this->getText());

            $tagTR->renderBeginTag($writer);
            $tagTD->renderBeginTag($writer);
            $tagA->render($writer);
            $tagTD->renderEndTag($writer);
            $tagTR->renderEndTag($writer);
        }
    }
}

class TNavigatorSpacer extends TControl
{
    public function getWidth()          {return $this->getControlState("Width", "10px");}
    public function setWidth($value)    {$this->setControlState("Width", TPropertyValue::ensureString($value));}

    public function render($writer)
    {

        if (!$this->getVisible()) return;
        $tagDiv = new TPanel();
        $tagDiv->setCssClass("MenuSpacer");
        $tagDiv->setWidth($this->getWidth());
        $tagDiv->render($writer);
    }
}

?>