Zend Framework – Céges Demo portál – Zend Framework működésre fogása III. rész

Korábban elkészítettük a

  • .htaccess,
  • config.ini fájlt,
  • BaseControllert,
  • IndexControllert két eseménnyel,
  • a hozzátartozó nézetekkel.

Azonban még nem látunk semmit. A config.ini fájlban megadtuk a layoutok helyét, ezek a layoutok szolgálnak az elrendezés kialakítására, amelyekkel többfelé lehet szedni a végső képet.

Az index.php fájlban megadtuk anno, hogy melyik layout legyen az alap értelmezett:

Zend_Layout::startMvc(array('layoutPath' => Globals::getConfig()->dirs->layouts, 'layout' => 'Main' )); // layout beállítása

Mint látható ez nálunk a Main. A Zend MVCban láthatjuk, hogy a /demo/application/views/layouts/ könyvtár helyét:

Zend Framework Céges Demo Portál - MVC
Zend Framework Céges Demo Portál - MVC

Itt hozzunk létre egy main.phtml fájlt, ami tulajdonképpen a portál képének a “magját” alkotja. Szóval hozzuk létre a /demo/application/views/layouts/ helyen a main.phtml fájlt. A main.phtml első sora legyen:

<?PHP echo $this->doctype('XHTML1_TRANSITIONAL') ?>

Ezzel beállítottuk az oldal kodolásának a szabványát, ami szerint dolgozni fogunk. Úgy kell felépítenünk mint egy sima .html fájlt. Itt is megjelenik a <html> <head></head> tagek. A<head></head> tagek között kell megadni egy sima html fájlban a css, js fájlok elérési útvonalát a karakterkódolást valamint a kulcsszavakat. Itt a <head></head> tagek között ezt az alábbi sorokkal váltjuk ki:

<?PHP echo $this->headTitle()->setIndent(4)?>
<?PHP echo $this->headMeta()->setIndent(4)?>
<?PHP echo $this->headLink()->setIndent(4)?>
<?PHP echo $this->headStyle()->setIndent(4)?>
<?PHP echo $this->headScript()->setIndent(4)?>

Itt a BaseControllerben átadott css,js fájlokat hívjuk be a html kódban linkek formájában. Adjuk meg a karakterkódolást s állítjuk be az oldal kulcsszavait.

BaseController init() metódusában a $this->view->headScript()->appendFile('../js/c_config.js');
utasítás segítségével adjuk át a nézetnek a c_config.js fájlt a <?PHP echo $this->headScript()->setIndent(4)?> utasítssal pedig kiíratjuk, ugyanígy a css fájlokat, kulcsszavakat, karakterkódolást.

Ezután mint minden html fájlban jönnek a <body></body> tagek. Lássuk a tartalmát:

<body>
<div id="wrapper">
<div id="header">
<?PHP echo $this->partial('header.phtml') ?>
</div>
<div id="content">
<?php echo $this->layout()->content;?>
</div>
<div id="footer">
<?PHP echo $this->partial('footer.phtml')?>
</div>
</div>
</body>

Nos láthatunk egy div=”wrapper” utasítást, ez szolgál arra, hogy a portált középre igazítsuk(style.css ben találhatjuk). Három részre bontottuk a portált, egy fej azaz head rész, egy tartalom azaz content, illetve egy lábléc azaz footer. Eszerint a

<div id="header">
<?PHP echo $this->partial('header.phtml') ?>
</div>

Szolgál a fejrész tartalmának megjelenítéshez, mint látható ehhez egy header.phtml fájlra van szükségünk. Ennek tartalmát később ismertetni fogjuk.

A

<div id="content">
<?php echo $this->layout()->content;?>
</div>

utasítás szolgál arra, hogy az eseményekhez tartozó nézeteket berántsa a tartalomba. Azaz pl IndexController cegunkAction esemény hatására a cegunk.phtml tartalmát fogja betenni ide a Zend Framework s az fog megjelenni számunkra.

Végül a

<div id="footer">
<?PHP echo $this->partial('footer.phtml')?>
</div>

utasítás szolgál arra, hogy a footer.phtml fájlunk tartalmát beszúrja nekünk.
Így készül el számunkra a tartalom.

Most lássuk a main.phtml fájl tartalmát egyben:


<?PHP echo $this->doctype('XHTML1_TRANSITIONAL') ?>
<html>
<head>
<?PHP echo $this->headTitle()->setIndent(4)?>
<?PHP echo $this->headMeta()->setIndent(4)?>
<?PHP echo $this->headLink()->setIndent(4)?>
<?PHP echo $this->headStyle()->setIndent(4)?>
<?PHP echo $this->headScript()->setIndent(4)?>
</head>
<body>
<div id="wrapper">
<div id="header">
<?PHP echo $this->partial('header.phtml') ?>
</div>
<div id="content">
<?php echo $this->layout()->content;?>
</div>
<div id="footer">
<?PHP echo $this->partial('footer.phtml')?>
</div>
</div>
</body>
</html>

A haeder.phtml valamint a footer.phtml:

Nos akkor kezdjük is a header.phtmlel, hozzuk létre a /demo/application/views/layouts/ könyvtárba. Tartalma legyen egy <ul><li></li><ul> tagekből álló lista <a></a> tagekkel megbolondítva, mivel egy javascript alapú menü kirajzoló fogja megjeleníteni számunkra. Tartalma legyen:


<ul id="Menu1" class="MM">
<li><a href="/demo/public_html/index/index">Főoldal</a></li>
<li><a href="/demo/public_html/index/cegunk">Cégünk</a></li>
</ul>

A id="Menu1" class="MM"kifejezés a javascriptes menü miatt kell.

Most lássuk a footer.phtml-t, ugyanoda /demo/application/views/layouts/ helyre hozzuk létre a footer.phtml fájlt az alábbi szerény tartalommal:

<!--footer layout-->
<p>Demo Portál lábléc</p>

Advertisements

Zend Framework – Céges Demo portál – Zend Framework működésre fogása III. rész” bejegyzéshez 2 hozzászólás

    1. A portál anno a Zend 1.7-es változatával futott, ebben van egy olyan objektum, hogy Zend_View_Helper_Placeholder_Container_Abstract, itt található a setIndent() metódus, ami a kimeneti HTML kód formázásáért felelős. A setIndent(4) azt jelenti, hogy a HTML kód elé beszúr 4 db szóközt. Ezzel a megoldással, ha használjuk akkor a végén egy szépen formázott HTML kódot kapunk, ami pl.: hibakeresés közben jöhet jól. Az újabb bejegyzéseimben azonban már a Zend 1.11-es változata fut, ebben még nem néztem utána a működésnek…

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s