Ebben a részben az űrlapok megjelenítésével foglalkozom. A cél egy olyan függvénykönyvtár létrehozása, amellyel gyorsan hozhatunk létre új űrlapokat.
Űrlap megjelenítése
Minden párbeszédet folytató weboldal használ űrlapokat, űrlapelemeket.
A legegyszerűbb és a legrosszabb megoldás az, ha az űrlapot nem dinamikusan építjük fel. Ez alatt azt értem, hogy a hibás kitöltést a legegyszerűbben kezeljük le, azaz nem foglalkozunk az eddig beírt űrlap értékeivel: csak hibajelzést ad a honlap és az űrlapot üresen jeleníti meg, vagy jelzi ugyan a hibát, de az űrlapot már meg sem jeleníti. E két megoldás közül egyik sem felhasználóbarát: vagy kezdhetjük előlröl a kitöltést az üres űrlappal, vagy vissza kell lépni az előző oldalra és ott javítani a böngésző által elmentett kitöltést.
Egy input elemet könnyen kirakhatjuk html kóddal:
<input type="text" name="kerdes" />
Rengeteg kóddal találkozva állítom, hogy ezeket a legalapvetőbb módon használják egyes programozók:
<input type="text" name="kerdes" value="<?php echo $kerdes; ?>" />
Ismerős? Ránézni is rossz és még szőrnyűbb, ha ez több tucat helyen is így szerepel.
Alapvető hiba, hogy a value érték még kódolva sem, a helyes megoldás ez lenne:
<input type="text" name="kerdes" value="<?php echo htmlspecialcahrs($kerdes); ?>" />
De ezt mindig így használni, leírni a kódba még fárasztóbb lenne. Erre jó lenne valamit kitalálni, mert így a fejlesztési idő nagy részét az ilyen elemi dolgok fogják kitenni. Lássunk neki.
Az első lépés készíteni egy olyan függvényt, ami semmi mást nem csinál, csak a fentiek alapján kirak egy input elemet.
function formInput( $name, $value ) { ?> <input type="text" name="<?php echo $name; ?>" value="<?php echo html_special_cahrs($value); ?>" /> <?php }
Nem bonyolult és máris könnyebben kirakható egy input mező:
formInput( "kerdes", $kerdes );
Sokat nem értünk el vele, kicsit rövidebb lesz a kódunk, de új helyre másolva még így is cserélgetni kell a neveket.
Ha globális változót használunk, akkor az értékét automatikusan is le tudjuk kérdezni:
function formInput( $name, $value=null ) { if ( $value == null ) { $value = $GLOBALS["value"]; } ?> <input type="text" name="<?php echo $name; ?>" value="<?php echo html_special_cahrs($value); ?>" /> <?php }
A value paramétert így nem kell megadni, automatikusan lekérdezi, így a használata is egyszerűsödik:
formInput( "kerdes" );
Viszont meghagytuk, hogy szükség esetén más értéket is felvehessen. Ha ügyesen programozunk, akkor erre a lehetőségre ritkán van szükség:
formInput( "kerdes", "Írd ide a kérdésedet" );
Tökéletesnek azonban még most sem mondható, mert a sitebuilderek szeretik a stílusokat, javascript kódokat belecsempészni az elembe. A következő verzióban ennek megfelelően egy új paramétert raktam:
function formInput( $name, $attributes=array(), $value=null ) { if ( $value == null ) { $value = $GLOBALS["value"]; } ?> <input type="text" name="<?php echo $name; ?>" value="<?php echo html_special_cahrs($value); ?>" <? foreach ( $attributes as $attrKey=>$attrValue ) { echo "$attrKey=\"$attrValue\" "; } ?>/> <?php }
A $attributes paramétert azért tettem a $value elé, mert a gyakorlat azt igazolta, hogy ezt gyakrabban használom. Így az $attributes-be berakhatók az események (pl. onchange, onkeyup, stb.) éppúgy, mint a megjelenítésre hatással levő adatok (class, style), sőt akár teljesen egyedi attribútomok is, amiket a javascipt kódok tudnak értelmezni, például:
if ( isset($phpcode) ) $phpcode = "alapértelmezett érték"; formInput( "phpcode", array("onclick"=>"alert(1);", class=>"szeles") );
A kód futásának eredménye:
<input type="text" name="phpcode" value="alapértelmezett érték" onclick="alert(1);" class="szeles" />
Gondolhatod, hogy ezzel nem nyertünk sokat. Kb. annyit kell gépelni, mint függvény nélkül, de tapasztalatból állíthatom hogy az ilyen kis függvények nemcsak megkönnyítik a programozást, de átláthatóbbá is teszik a kódot. Ez pedig nagyon fontos szempont. Rögtön azután következik, hogy működik vagy sem a programkód.
Ennél bonyolultabb a select megvalósítása, ennek fix megoldása még szörnyűbben néz ki.
SELECT:
function formSelect( $name, $options=array(), $attributes=array(), $value=null ) { // ezt a részt neked kell megírni :) // $options: asszociatív tömb, kulcs az option value értéke, az értéke pedig az option tartalma // kiválasztott option: a $value-nak és az option-ok value értékének egyenlőségét kell vizsgálni }
Érdemes a többi elemre is létrehozni a megfelelő rutint:
TEXTAREA
function formTextarea( $name, $attributes=array(), $value=null ) { // ezt is :) }
A radio, checkbox, illetve a button és submit típust is hasonlóképpen meg tudod írni.