Használjunk sablont

A Weblaboron történt eszmecsere után merült fel bennem, hogy végre valahára fel kéne frissítenem egy rég elveszett cikkemet. Kérdés amire megpróbálom megtalálni a választ, hogy miért is használjunk template-t vagy sablont. Mindjárt az elején szeretnék megcáfolni egy régi téveszmét, mely szerint ha sablont akarunk használni akkor Smarty-t kell használnunk. A Smarty pusztán egy sablonmotor a sok közül, bizonyos szempontokból az egyik legjobb, de nem az egyetlen. A sablonmotor, legyen bármelyik is az csupán csak egy eszköz. Pusztán attól, hogy sablonmotort használunk nem lesz jobb és szebb a kódunk és az életünk.

Miért használjunk sablont?

Egy sablonmotor lehetővé teszi számunkra, hogy a „program kódot és a HTML kódot szétszaggasuk”. Két dolgot kell tehát szétválasztanunk az egyik a „mikor/kinek mi jelenjen meg” a másik pedig a „hol és hogyan jelenjen meg”. Talán e két kérdéssel sikerül közelebb kerülnünk a hoz, hogy könnyedén el tudjuk dönteni mi tartozik a működési(programkód) és mi a megjelenítési(sablonkód) logikához. Nézzünk egy példát. Az, hogy egy hírnél megjelenik-e a szerkesztés link nem a sablon feladata, hanem a működési logikáé. A programunk kódjába kell elhelyeznünk azokat a vizsgálatokat amik eldöntik, hogy kinek és mikor jelenjen meg a link.

Például adminisztrátornak mindig, sima felhasználónak csak akkor, ha ő hozta létre a cikket, névtelen felhasználónak meg soha. Ugyan ez egy fórum témánál kibővül azzal, hogy ha van hozzászólás akkor már ne lehessen módosítani az eredeti témát. Egy wiki-nél pedig mindig mindenkinek meg kell jeleníteni a linket. A sablonban pedig azt kell megoldanunk, hogy ha van egy „szerkesztés” linkünk akkor az hol jelenjen meg a hír alatt, felett, a cím mellett vagy mindenütt. Hogyan nézzen ki, lecseréljük-e egy kis ikonra vagy sem stb.

Csak ennyit megtéve elmondhatjuk, hogy lehetővé vált a szájtunk átbőrözése. Könnyedén el tudjuk adni az általunk kifejlesztett tartalomkezelő rendszert újra és újra, csak a megjelenését kell átszabnunk.

Hogyan válasszunk sablont?

Természetesen, ha csak egy személy dolgozik egy projekten, akkor szinte mindegy, hogy milyen eszközt használ a szétválasztásra. Nyílván azt fogja használni ami neki a legjobban megfelel. Azonban egy fejlesztői gárdánál már egyéb igények is felmerülnek. Az egyik legtipikusabb, hogy a grafikus/html kóder nem szeretne belenyúlni a kódba, hisz nem ért hozzá. Pontosan ezért örülne ennek a programozó is. Tehát kellene valami olyan eszköz amivel ez megoldható.

Ebben a rövid írásban egy eszközt szeretnék bemutatni.

Az eszköz neve csiri-biri sablonmotor. Ez egy egyszerű egy soros PHP program, ami képes a minimális szétválasztást megoldani. Mint később látni fogjuk, sajnos ez az eszköz nem minden esetben lesz használható, és nem old meg minden problémát. Természetesen bizonyos speciális esetekben ez a megoldás is nagyszerűen használható lesz.

a „sminkmotor”

Használata

a smink (sminkek/smink.tpl)

#TITLE #CONTENT

a program

Hurrá! - mondhatnánk. Azonban gondoljunk bele hogyan tudjuk ezzel a megoldással azt az egyszerű esetet megoldani, hogy az aktív link más színű legyen. Az, hogy egy link aktív az ugye a programkódba van benne. Ez eddig rendben is van, de hogyan tudjuk a sminknek ezt átadni? Egyetlen egy módon, ha átadjuk a html elemet(pl. egy class-t) ami jelzi, hogy ez az elem bizony az aktív.

link template

#SZOVEG

a program

Láthatólag megoldottuk a problémát valójában nem. Gondoljunk bele mi van akkor, ha egy másik osztályt akar a grafikus használni arra, hogy jelezze az aktív linket? Ekkor a kódba kell nyúlni, hisz az osztály neve a kódban van bedrótozva. Nem beszélve arról az esetről, ha valamilyen más módszerrel szeretné ezt megoldani. Természetesen, ha ilyen bonyolultságú feladatokat nem kell megoldanunk, akkor ez a módszer nagyszerűen használható.

Hozzászólások


Láthatólag megoldottuk a problémát valójában nem.

Ok. Egy rossz megoldást láthattunk, de most kérhetnénk egy jó megoldást is (pl. Smarty-ban, ha már erről volt szó a Weblaboron)?

Hát a sablon motor valóban nem tökéletes, de az említett problémát speciel meg lehet oldani. A BODY tag ID-jét kell állítani, nem a link class-al játszani és máris elővehetjük a CSS kiválasztókat. Az aktív link _megjelenítése_ inkább dizájn és nem logika kérdése, ha jól értettem a szándékot.

Az utóbbi időben megint felmerült bennem a template motor kérdés, hogy talán kellene egy már kész megoldást használni. Megint oda jukadtam ki, hogy elég nekem az egyfüggvényes megoldás.

Végiggondoltam azt, hogy annó miről is volt szó a weblabor-os topicban és arra jutottam, hogy többen arról beszélnek, hogy a működési logika előállítja az adatokat pl. DB-ből és azt átadja a megjelenítési rétegnek. A sablon motor majd eldönti adott esetben, hogy egy linket meg kell-e jeleníteni vagy sem. De ezzel már ott vagyunk, hogy a sablonban logika van, nem csak pusztán design (mert ugye kell egy IF szerkezet, hogy el tudjuk dönteni, hogy mit kezdünk a linkkel).

Nekem pusztán annyi kellett, hogy a HTML és PHP kód szétváljon (legfőképpen az átláthatóság és a programom szerkezeti felépítése miatt, no meg, hogy ne 5 millió echo legyen a kódban). A link megjelenítést én PHP szinten oldom meg, adott esetben van egy create_Menu függvény, ami összeállítja a menüt a felhasználói jogosultságoknak megfelelően (ennek mintájára van egy create_HTML_Head ami pedig a HTML file head-jét állítja elő, betöltve a modulnak megfelelő CSS, JS file-okat).

Jól gondolom, hogy az általad helyesnek vélt megoldásban a template-ben van pl. IF szerkezet és egy flag-et vizsgálva vagy megjelenik egy link vagy sem?

Belegondolva, hogy pl. egy listát a működési logika állít elő, mint adat és átadja a sablon motornak, ami majd megjeleníti, azon túlmenően, hogy mindkét helyen valójában programkód van felesleges művelet is zajlik.

Valójában két ciklus fut le. Az első amikor az adatokat (az átadandó tömböt) összeszedjük és egy a sablonmotorban amikor létrehozza a valós kimenetet. Mennyivel egyszerűbb (és sztem gyorsabb is) egy helyen összeszedni az adatokat és egyúttal elő is állítani az adott template részt. Ezt már csak hozzá kell csapni a fő template-hez.