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
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>
