CodeIgniter layout és nézetek (views) kezelése

A CodeIgniter szerencsére, egy gyors könnyen testreszabható kis keretrendszer. Most egy példát mutatunk arra, hogyan lehet egy dinamikus weboldalt különböző elrendezések alapján felépíteni. Az elrendezés(layout) kialakítása sokkal egyszerűbbnek tűnik mint Zend Framework használatával. Kevesebb a megkötés szabadabb a fejlesztő.

Működési elvét tekintve megegyezik a legtöbb MVC felépítéssel bíró PHP-s keretrendszerrel, a Vezérlők(Controller), Események(Action), Nézetek(Views) itt is megtalálhatóak, és ugyanazon elv szerint működnek mint bármelyik hasonló keretrendszerben.

De mi is ez működési elv?

Az összes szerverhez érkező kérést a public_html könyvtárban található .htaccess fájllal az  index.php fájlra irányítjuk.

A public_html fájlban található .htaccess tartalmát módosítsuk erre:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ index.php?$1 [L]

Ehhez Apache szerverünkön a mod_rewrite modulnak természetesen be kapcsolt állapotban kell lennie.

Ha meghívjuk a http://ci.tld/welcome URL címet, akkor a Welcome vezérlő Index eseménye kerül meghívásra azaz ez a kérés: http://ci.tld/welcome/index kerül kiszolgálásra. A kérés hatására betöltődik a welcome vezérlő index eseményében meghatározott nézet, alapesetben ez:

$this->load->view(‘welcome_message’);

azaz a CodeIgniter betölti a views könyvtárunkban található welcome_message.php nevezetű fájl tartalmát. Ha minden egyes eseményhez elkészítünk egy ilyen nézetet, akkor egy szál híján visszatérünk a statikus oldalak világába.

Az elrendezések kialakítását ezerféleképpen el lehet készíteni bonyolíthatja mindenki kénye kedve szerint kinek ahogy tetszik, úgy csinálja. Én egy egyszerű elképzelés mentén készítem el weboldalam. Lesz egy menüsor, egy tartalmi rész és egy lábléc. A menüsor, és a lábléc tartalma az esetek 90 százalékában, ugyanaz. A tartalmi részek, nyilván menüpontonként változnak. Ezen elképzelés mentén a következőképpen is kialakítható egy elrendezés:

A views könyvtárban, hozzunk létre egy layouts és egy partials könyvtárat. A layouts könyvtárban, hozzunk létre egy layout.php-t. A partials könyvtárban, hozzunk létre egy menu.php és egy footer.php nevű, egyenlőre üres fájlt.

A views/welcome_message.php fájl tartalmát másoljuk be a layouts könyvtárunk layout.php fájljába.

A welcome vezérlőban pedig a következő nézetet töltsük be: $this->load->view(‘layouts/layout.php’);

Codeigniter, elrendezés kialakításának egy lehetséges módozata

Ha most újra meghívjuk a böngészőnkben a http://ci.tld/welcome URL címet, akkor ha mindent jól csináltunk, ugyanaz fog megjelenni mint legelsőre.

Most, hogy ezt megtettük, itt az ideje gyökeresen átalakítani az elrendezések felépítését:

A views/partials/menu.php fájlunkba vigyünk fel pár menüpontot, ehhez használjunk HTML kódot:

<div style="text-align:center;padding:10px 0px;"><a href="/welcome/index">Menu_1</a> | <a href="#">Menu_2</a> | <a href="#">Menu_3</a> | <a href="#">Menu_4</a> | <a href="#">Menu_5</a></div>

A views/partials/footer.php fájlunkba pedig gépeljük az alábbit:
<div align=”center”>Az első CodeIgniter alkalmazásom ami layout-ot használ az elrendezésre!</div>

Most fogjuk meg a views/layouts/layout.php fájlunk forrását, és a container div-en belül a tartalom legyen:

<?php
$this->load->view('partials/menu');
if(isset($subview)){
$this->load->view($subview);
}else{
echo 'Hiba az oldal betöltése közben, a kért nézet nem található!';
}
$this->load->view('partials/footer');
?>

A $this->load->view(‘partials/footer’); paranccsal a views/partials/ könyvtárban található footer.php fájlt olvassuk be illetve ennek tartalmát.
A $subview változóban tudjuk átadni, mely tartalmi részt kell megjeleníteni. Ha a változóban érték szerepel, akkor a views könyvtárban található .php fájlok között keresve, ha talál megegyezőt a CI akkor azt beolvassa. Például ha a $subview értéke menu1 és a views könyvtárban szerepel egy menu1.php fájl akkor ennek tartalma kerül beolvasásra.

Most lépjünk a welcome vezérlőnk index eseményébe és a forrást változtassuk meg az alábbira:

public function index()
{
$data['subview'] = 'menu1';
$this->load->view('layouts/layout.php', $data);
}

A data tömb subview kulcsú elemének a menu1 értéket adjuk, és a nézet beolvasásakor ezt a tömböt átadjuk a nézetnek, a tömb kulcsai a nézetben változóként jelennek meg, így lesz a $data[‘subview’]-ből a nézetben egy $subview változónk.

Most hozzuk létra a views/menu1.php fájlunkat melyben helyezzünk el tetszőleges tartalmat.

Meghívva a http://ci.tld/welcome/index URL-t megjelenik a menüsor a tartalom és a lábléc is. Ezzel a módszerrel az egyes menüpontokhoz különböző tartalmi részeket tudunk adni.

Advertisements

CodeIgniter layout és nézetek (views) kezelése” bejegyzéshez egy hozzászólás

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