CGI Script 3

Megnéztük az alapjait annak, mi kell ahhoz, hogy CGI scriptet írjunk, megnéztük, milyen szabályokat illik betartanunk, ha jó CGI scriptet akarunk írni, most azonban látszólag valami nem teljesen a CGI scriptekhez kapcsolódó dologról fogunk beszélni, ami azonban lényegesebb eleme a CGI scriptek világának, semmint gondolnánk.

Jelen cikkünkben ugyanis a form nevezetû HTML tagot fogjuk alaposabban megvizsgálni. A form nélkül ugyanis igencsak unalmas lenne az életünk, és jóformán semmi értelmeset nem tudnánk közölni a CGI scriptünkkel, valamint nélküle meglehetôsen nehezen valósítható meg a felhasználóval való igazi kommunikáció.

A form html tag voltaképpen nem más, mint egy a megjelenített kódban láthatatlan, befoglaló valami, mégcsak nem is különösebben izgalmas, sôt, kezdeni sem sok mindent lehet vele. Ebben a valamiben azonban mindenféle dolgok lehetnek, amiket hívhatunk input, vagy form objecteknek. Lássunk néhányat:

<input type="text" name="nev" size="12" maxlength="12" value="alma">

Ô egy szövegbeviteli mezô. Mint láthatjuk, a form objecteket a type paraméterrel azonosítjuk be, a name, vagyis név pedig bármilyen HTML objektumnak szokásos paramétere. Ezt a kettôt követik a form tagok saját paraméterei. Jelen esetben a size adja meg a beviteli mezô szélességét, a maxlength, hogy hány karakter bevitelét engedélyezzük (ennek egyáltalán nem< kell egyenlônek lennie a szélességgel, lehet annál kisebb és nagyobb is), valamint utolsó paraméterünk, a value adja meg, hogy milyen szöveget tartalmazzon induláskor a textfield.

<textarea name="text" cols="12" rows="3">alma</textarea>

Lám, lám, alkossuk meg a szabályt, máris itt az elsô kivétel. A textarea ugyanis a textfield nagytestvére, és mint láthatjuk, nem is input tag jelöli ôt, hanem az egész tag neve lesz textarea. Ô egy több soros szövegbeviteli mezô, ilyenekbe szokták az ember üzeneteit, elküldendô e-mail-jeit összegyûjteni. A cols paraméter adja meg, hogy hány karakter férjen el egy sorban (ennél több karaktert nem tudunk majd egy sorba írni), a rows pedig azt, hogy hány sorból is áll ez a szövegbeviteli mezô. A kezdô és lezáró tag közé kerülô szöveg (jelen esetben a változatosság kedvéért megint alma) a szövegbeviteli mezô default tartalmát adja meg.

<input type="password" name="text2" size="12" maxlength="12" value="alma">

Ígérem, szövegbeviteli vackokból az utolsóval találkozhatunk. Ô gyakorlatilag mindenben megegyezik az elsôként bemutatott text-el: az egyetlen különbség, hogy ô egy password mezô, tehát a beírt karaktereket nem fogja megmutatni, hanem minden egyes beírt karakter helyén majd egy csillagot láthatunk. Ettôl függetlenül természetesen a CGI-nk a beírt szöveget fogja megkapni, a dolog célja csupán annyi, hogy a beírt kód ne legyen szemmel leleshetô a képernyôrôl. (Nagyon hatékony módszer mondjuk a cím megadására szolgáló mezôket password mezôként definiálni... A felhasználók biztos értékelni fogják a leleményességünket.)

<input type="submit" name="neve" value="labelje">

Ezzel át is tértünk a gombok birodalmába. Legelsô ezek közül is a submit névre hallgató, amelynek feladata az, hogy a form mezô (pontosabban a benne található form objectek) tartalmát elküldje. (például a CGI-nk felé.) A submit button value paramétere adja meg azt a szöveget, amely a gombra kiírásra kerül.

<input type="reset" name="neve" value="labelje">

A változatosság, és fôként az egyszerûség kedvéért nagyon sok a hasonló form object. Ez például annyiban különbözik az elôzôtôl, hogy nem elküldi a formban található form objectek tartalmát, hanem ezeket visszaállítja azok default értékére.

<input type="button" name="neve" value="labelje">

És végül itt a teljesen normális gomb, ami nem csinál semmi különöset.

<input type="checkbox" name="neve" value="checked value" checked>

Bemutatnám a tesztek nélkülözhetetlen résztvevôjét, a kis pici valamit, amibe lehet pipákat rakni: igen, ô a checkbox. Value paraméter alatt találjuk meg azt az értéket, illetve szöveget, amit tartalmazni fog, ha a form elküldésekor ki van ikszelve. Ezt az állapotát (márminthogy van-e pipa benne avagy sem) pedig a legutolsóként megadott, önmagában álló checked paraméter jelenléte, vagy hiánya jelöli.

<input type="radio" name="neve" value="checked value" checked>

Ô pedig a radio button. Ugyanúgy kiikszelhetô, mint a checkbox, viszont akárhány radio button is található egy form-on belül, azokból mindig csak egy lehet az aktív, tehát egyikük kiválasztasakor a többi radio button kikapcsolódik.

<select name="neve">
<option value="item value 1">item label 1</option>
<option value="item value 2" selected>item label 2</option>
</select>

Ohh, ohh, egész vad lesz már a gui-nk eszköztára. Ez itt ugyanis egy lenyíló menü. A form elküldésekor a select, tehát a menü fog átadni egy értéket, azonban hogy ez melyik lesz, az a kiválasztott menüponttól (option-tól) függ, és hogy milyen érték van beállítva hozzá. A select a megfelelô option value értékét fogja felvenni, miközben a lenyíló menü aktuális pozícióján az option kezdô és lezáró tag közötti szöveg fog megjelenni.

<select name="select" size="5" multiple>
<option value="item value 1">item label 1</option>
<option value="item value 2" selected>item label 2</option>
</select>

A multiple selection pedig mindössze annyiban különbözik az elôzôtôl, hogy lenyíló menü helyett egy listview-et láthatunk, amely listából a size paraméterben megadott számú option látszik majd egyszerre. Ez a listview, ha a select paramétereként a multiple-t is megadjuk lehetôséget ad több listaelem egyidejû kiválasztására, amelyeket a select mind felvesz majd tulajdonságként, amikor a továbbításra kerül majd a sor.

<input type="file" name="neve" size="12" maxlength="20">

Ki nem találná szerintem senki, mire is való ez a beviteli vacak: igen, filenév bevitelére. Megjelenésre két részbôl áll, egy textfield-bôl és egy buttonból. A textfieldbe lehet kézzel írkálgatni, de a button megnyomása esetén egy requesterben is kiválaszthatjuk a file-t.

<input type="image" name="neve" src="file://URL/alma.gif" width="75" height="64" value="alma">

Számos helyen láthattuk azt, hogy a szabvány (egész ronda) button helyett nagyon szép kis kép buttonokat lehet nyomkorászni: ô lenne a dolgok hátterében. Ugyanúgy viselkedik, mint a már megismert buttonok, annyi különbséggel, hogy ô egy kép. A kép elérési útvonalát az src paraméterben az URL helyére illesszük, opcionálisan megadhatjuk (mint képeknek egyébként is lehet) a szélességet és magasságot, amibe beméretezze, végül a value segítségével adjuk meg az értéket, amit CGI-nknek megnyomásakor (a többiek között) átad.

<input type="hidden" name="neve" value="alma">

És elérkeztünk végig az utolsó form objectig. Ô egy egész fura kis vacak, ugyanis nem látszik, és egyetlen célja, hogy a saját értékét majd átadja a cgi-nknek. Célja így elsôre talán nem egészen érthetô, de arra nagyon jó, hogy a html (mondjuk a saját magát, vagy a felhasználót azonosító) paramétereit ne a cgi neve utáni kérdôjelet követô felsorolásként (ami az URL-ben megjelenik, és a felhasználó belebuzergálhat), hanem a felhasználó számára teljesen rejtetten, és hozzá nem férhetôen küldje el.

Ez így mind szép, form tagunkat most már szépen megpakolhatjuk minden földi jóval, az eredményt átpasszolhatjuk a cgi-scriptünknek, és ezzel már minden elénk kerülô feladatot mosolyogva tudunk megoldani.

Vagy mégsem? Lássunk egy rövid példát. Csinálunk egy megrendelôsdit, ahol egy táblázatban felsoroljuk a megrendelhetô termékeket, és mindegyik mellé teszünk egy lenyíló menüt, amiben a felhasználó kiválaszthatja, hogy mibôl hány darabot kíván megrendelni. El is helyezgetjük ôket szép egészségesen, azonban még mindig itt áll elôttünk a probléma, hogy hogyan küldjük el az összes értékét EGYSZERRE a CGI Scriptünknek? Talán tegyünk mindegyik mellé egy submit gombot, és a vásárlónak kelljen mindig végignyomkorásznia?

Hoppá, ez a táblázatosdi egy látszólag megoldhatatlan probléma elé állított bennünket. Be kell ismernünk, alaposan és gyorsan elvéreztünk. De van valami megoldás arra, hogy mégis gyôztesen kerüljünk ki a problémából?

Természetesen. Csináljunk EGYETLEN form tagot, és ebbe pakoljuk be a teljes táblázatunkat szövegestôl, lenyíló menühegyestôl, úgy ahogy van, és dobjunk bele egyetlen submit gombot.

A form tagnak megvan ugyanis az a nem éppen megvetendô tulajdonsága, hogy nem érdekli, mi is van tulajdonképpen benne, ô csak a form objectekkel törôdik. Amikor pedig elküldésre kerül a sor, szépen összeszedi, milyen form objectek is találhatóak a területén belül, és az egészet szép libasorban, egymás mögé rendezve és ha kell sorszámmal ellátva felcimkézi és útnak indítja a CGI Script felé. A végén tehát mégiscsak megkapjuk amire szükségünk van, méghozzá különösebben nagy ügyeskedés, neadjisten javascript közbeiktatása nélkül is.

Ennyi lett volna erre a cikkre a CGI, azon belül is a form tag tartalmának ismertetése. Lehet jókat kisérletezni vele, milyen form objectek milyen beállításokkal hogyan is jelentkeznek a CGI scriptünk bemenetén: ha pedig már egész magabiztosan tudjuk megjósolni, mit is fogunk kapni, nekiláthatunk telehinteni eddig unalmas oldalainkat komplexebbnél komplexebb form-okkal, és egész lélegzetelállító dolgokat gyárthatunk... Még mindig JavaScript és Java akár csak futólagos használata nélkül, mert míg ezeket nem minden böngészô támogatja, a form objecteket, és a server oldali cgi-ket kevés kivételtôl eltekintve gyakorlatilag az összes...

Jó szórakozást a form objectekkel...

Emeric SH