Web fejlesztés dinamikus Weben keresztül

Jónás Richárd

jonasr@math.klte.hu

Debreceni Egyetem

Kivonat

Napjainkban gombamód szaporodnak az internetes portálok, nagy számban jelennek meg valamilyen szervezésben lévõ dinamikus tartalommal rendelkezõ HTML oldalak. A Web-alkalmazások fejlesztésének különleges ismertetõjegye a gyorsan változó követelmények, így a webes alkalmazások fejlesztése rövid visszacsatolt ciklusokból áll, azaz gyorsan kell reagálni az új ötletekre, új felhasználói problémákra.

A cikkben egy olyan rendszerrel ismerkedhetünk meg, amellyel gyorsan és hatékonyan tudunk Web alkalmazásokat fejleszteni, ráadásul ez az eszköz vékony klienseken is futtatható, hiszen a fejlesztés tulajdonképpen az Interneten keresztül történik.

1.1. Bevezetés

Manapság az internetes portálok gyorsan, nagy számban fejlõdnek. Fejlesztésük esetén rendkívül fontos, hogy a követelményeket gyorsan mérjük fel és rájuk gyorsan tudjunk reagálni (különben megteszik mások), azaz szükségünk van olyan eszközökre, amelyekkel a követelményeket hatékonyan lehet elemezni, és olyan eszközökre is, amelyekkel a rendszert a lehetõ leghamarabb olyan állapotba lehet hozni, hogy az bemutatható, tesztelhetõ legyen. Ez azért fontos, mert a megrendelõkkel fenntartott kapcsolat révén módosulhatnak a követelmények, így természetesen elõfordulhatnak olyan változások is, amelyek a rendszer gyökeres módosítását igénylik. Ezekrõl minél elõbb tudomást kell szereznünk!

A legjobban egy prototípus tudja a felhasználónak megmutatni azt, hogy õ illetve a tervezõk és fejlesztõk mit gondoltak az adott feladatról. Ennek gyors és kevés idõt igénylõ elkészítése azért fontos, mert ha esetleg a szóban forgó prototípus a ,,szemetesbe fog kerülni”, akkor ezzel együtt csak kevés emberi munka jut ugyanilyen sorsra.

2.2. Fejlesztõeszközök

Elsõdleges célunk egy olyan fejlesztõeszköz létrehozása, amely segítségével a megfelelõ tervezés után könnyedén hozhatók létre rendszer-prototípusok. A rendszer egy Web-alkalmazás lesz, azaz a jövõbeli rendszerünket a Weben keresztül tudjuk majd megtervezni. Természetesen egy fejlesztõeszközzel csak akkor lehet gyorsan dolgozni, ha speciális dolgokat tudunk vele létrehozni. Jelen esetben a fejlesztõeszközünkkel internetes portálokat fogunk tudni könnyedén felépíteni.

Ehhez szükségünk van egy adatbázisra és egy adatbázis-kezelõre, amely tulajdonképpen a leendõ internetes portál adatforrása lesz. Továbbá szükségünk lesz egy olyan nyelvre, amellyel dinamikus generálható HTML oldalakat tudunk szerkeszteni. Szükségünk van még egy böngészõre is, amelyen keresztül a fejlesztést el tudjuk végezni.

2.1. A rendszer arhitektúrája

A rendszer kliens-szerver architektúrával rendelkezik. A szerveroldalon a következõ alkalmazásoknak és szolgáltatásoknak kell futniuk:

• egy adatbázis-szervernek, amely jelen esetben a MySQL 3.23-as adatbázis-kezelõ

• egy Web-szervernek, amely egy Apache 1.3.20-as verziójú Web-szerver

• és a PHP futtató rendszerének, amely jelenleg a 4.0.6-os verziójú PHP.

A kliensoldalon csak egy böngészõre van szükségünk, így tulajdonképpen bárhol, ahol csak elérhetõ az Internet, tudunk fejleszteni, módosítani, hiszen a fejlesztés is Interneten keresztül történik. Természetesen a szervert úgy is konfigurálhatjuk, hogy intranetes fejlesztõeszközt kapjunk.

2.2. A fejlesztés menete

A fejlesztés során meg kell terveznünk egy PHP oldalt. Ennek készítésébõl akkor lesz gyártás, ha egyszerûen és gyorsan tudjuk a megjelenítõ és a funkcionális kódrészleteket megírni.

A rendszer rendelkezik egy WYSIWYG editorral, amellyel HTML oldalakat lehet tervezni, így a fejlesztés ,,design” része megoldottnak tekinthetõ. Ez jelen esetben az Internet Explorer 5.0-ás verziójába beépített HTML editorra épül, melynek használata megegyezik a Microsoft Word-ével, tehát betûtípusokat, betûméreteket, elõtér és háttérszíneket tudunk választani, majd azzal szöveget, táblázatokat szerkeszteni, stb.

1. ábra: WYSIWYG HTML editor az Internet Explorer 5.0 eszközrendszerének segítségével

A PHP kódrészletek szerkesztésére kétféle módon is támogatást ad a rendszerünk. Elõször is, lehetõség nyílik egyszerû PHP kód írására, és definiálhatunk web komponenseket is, amelyek a következõ jellemzõkkel rendelkeznek:

• az adataikat egy SQL utasítás segítségével határozzák meg,

• majd az adatokat egy minta segítségével konvertálják át HTML formátumba.

Tehát miután megszerkesztettük a PHP oldalunkat ez elõbbi támogatások segítségével, a mentés gombra kattintva a böngészõ elpostázza a Web-szervernek a PHP oldalt, majd a fejlesztõrendszerünk elhelyezi a neki megfelelõ helyre. Ezután tesztelhetjük az oldalt, nem kell mást tennünk, mint beírni a böngészõbe a rendszertõl kapott URL-t, így a böngészõben megjelenik a PHP oldal futási eredménye.

3.3. Web komponensek

Nézzük meg, hogy épül fel egy web-komponens! Minden web-komponensnek két fõ része van, az egyik egy SQL lekérdezés, a másik egy HTML minta, amely további három részre bontható. Hogy ezek a részek mire valók, megtudhatjuk, ha megértjük egy komponens kiértékelõdését!

1. A komponens által megadott SQL lekérdezés kiértékelõdik.

2. A komponens mintájának elsõ része behelyettesítõdik (azaz beíródik a HTML oldalba), tehát ezzel lehet megadni az adatok megjelenítése elõtti HTML részt.

3. A minta második része az SQL eredményének minden sorára lefut, azaz behelyettesítõdik a következõ szabállyal:

   1. Ha %n-t írunk, akkor az SQL által megadott eredmény adott sorának n-edik oszlopának az értéke fog behelyettesítõdni, ahol a %0 az elsõ oszlop értékét jelöli.

4. Végül behelyettesítõdik a minta harmadik része is, ezzel végezhetjük el azon HTML elemek lezárását, amelyeket a 2. lépésben nyitottunk ki.

A 2. és a 3. ábrákon egy példát láthatunk egy web komponensre, amely hallgatók adatait jeleníti meg. Láthatjuk a 3. ábrán a komponens által megadott mintát. Az elsõ sor csak egyszer fog kiértékelõdni, ahogy az utolsó is. A második sorban található a komponens ismétlõdõ része, amely az elõbbi SQL minden sorára kiértékelõdik, így egy táblázatot kapunk, amely tartalmazza a hallgatók neveit és szakjait.

SELECT NAME, SPECIALIZATION

FROM STUDENT

ORDER BY NAME

2. ábra: Egy komponens SQL része

1: <TABLE border="1">

2: <TR><TD>

3: </TABLE>

3. ábra: Egy komponens mintája

3.1. Viselkedés

Eddig megnéztük, hogy hogyan épül fel a komponensek adatrésze. Ha MVC módon gondolkozunk, akkor definiálnunk kell a komponens modelljét, nézetét és vezérlõjét. A komponens ,,modell” része az SQL lekérdezés, ez definiálja a komponens adatait. A ,,nézet” a HTML és a CSS által definiált megjelenésnek felel meg, ezt esetünkben a minta definiálja. Hogyan lehet a komponens viselkedését, a vezérlését definiálni? Erre több megoldás is kínálkozik, nézzük meg õket!

Elõször is el kell különítenünk a szerver illetve a kliensoldali viselkedéseket! A szerveroldali viselkedés a PHP kód kiértékelõdését jelenti, azaz amíg a HTML oldal dinamikusan generálódik. Ekkor a szerveroldalon a PHP nyelvû programok definiálják a komponens viselkedését. Ezután a HTML oldal letöltõdik a kliens böngészõje által, majd a kliensoldali vezérlés fogja a komponenst feltölteni élettel. A komponens a kliensoldali viselkedését JavaScript kódrészletek segítségével írhatja le.

3.2. Navigáció

Egy internetes portált dinamikus generált (generálható) HTML oldalak hiperkapcsolt rendszere alkotja. Ebbõl következik, hogy a HTML oldalak közötti kapcsolatot is definiálnia kell egy komponensnek. Nyilvánvaló, hogy a kapcsolatokat hiperlinkek fogják jelenteni, amelyek megadják, hogy egy bizonyos HTML oldalról mely HTML oldalakra lehet eljutni. Világos, hogy ez alternatívákat jelent, hiszen a hiperlink által megadott céloldal megváltoztatható, mind a szerveroldalon, mind a kliensoldalon, így a navigáció erõsen függ a modelltõl és a viselkedéstõl.

3.3. Implementáció

Hogyan valósulnak meg a komponensek a rendszeren belül? Komponens bevitelekor meg kell adnunk a lekérdezést, majd a HTML mintát. Ekkor a rendszer egy olyan PHP kódot generál, amely azt eredményezi, mint a minta kiértékelõdése. Ezt tulajdonképpen egy komponensbõl PHP-ba való fordításnak felel meg. Nézzük meg, hogy fordítható le egy komponens egy PHP kódra!

mysql_select_db( "$dbname" );

$res = mysql_query( "$sql" );

print $minta1;

while ( $data = mysql_fetch_row( $res ) ){

for ( i = mysql_num_fields( $res ) - 1; $i >= 0; $i-- )

$minta2 = str_replace( " print $minta2;

}

print $minta3;

4. ábra: Egy komponens fordítása

A dbname változó az adatbázis nevét tartalmazza, az sql változó az SQL lekérdezést, a mintaX változók pedig a minta X-edik részét tartalmazzák. Vegyük észre, hogy a ciklus csökkenõ, hiszen a %12-t hamarabb kell kicserélni, mint a %1-et.

4.4. Komponens könyvtárak

Akkor követjük az MVC elvet, ha olyan komponensek létrehozását támogatjuk, amelyek modell, nézet illetve vezérlõ része külön-külön kezelhetõ, definiálható. Ez több szempontból is elõnyös. Elõfordulhat, hogy táblázatos formában történõ megjelenítés sok esetben megjelenik a leendõ rendszerünkben. Ekkor kényelmes egy már meglévõ mintát újra felhasználni, és nem egy újat definiálni erre a célra. Ez vonatkozik az SQL-ekre és a vezérlõkre is. Ehhez természetesen nyilván kell tartani az eddig definiált mintákat, az SQL lekérdezéseket, és a különbözõ vezérléseket. Ez megoldható egy adatbázissal, hiszen egy adatbázis-kezelõ már a háttérben van.

Így egy konkrét komponens egy hármas lesz, amelyet definiál az MVC-nek megfelelõ három alkotórész.

5.5. Konténerek

A web komponensek tehát egy PHP oldalban fognak elhelyezkedni. Természetesen ennek legegyszerûbb módja az, hogy minden konkrét komponenst elhelyezünk a PHP oldalon, de a komponensek ettõl magasabb szintû elrendezése több kényelmet ad a fejlesztõnek. A web komponenseket web konténerekben helyezhetjük el. Minden konténer rendelkezik egy elrendezési és egy megjelenítési stratégiával. Az elrendezési stratégia azt írja le, hogy egy konténeren belül milyen sorrendben fognak a komponensek megjelenni, a megjelenítés pedig az elrendezéstõl független lesz, ez határozza meg a konténer HTML oldalon való megjelenését.

A web konténerek akkor lesznek egymásba ágyazhatók, ha a konténerek komponensek is egyben. Ehhez az kell, hogy hasonlóan mûködjenek, mint a komponensek. Egy konténer ,,modell” része a komponenseinek listája, a nézet része pedig definiálható egy minta segítségével, így megkapjuk a konténer ,,nézet” részét is.

Ha például olyan konténert szeretnénk létrehozni, amely a komponenseit egy sorban jeleníti meg, akkor a következõ mintával kell a konténernek rendelkeznie:

1: <TABLE border="0"><TR>

2: <TD>%0</TD>

3: </TR></TABLE>

Így a konténer kiértékeli a komponenslista összes elemét miközben kiértékeli a mintát, ezzel megkapva a kívánt eredményt. Természetesen a konténereket is adatbázisban kell tartani, az újrafelhasználhatóság kiaknázása miatt.

6.6. Konklúzió

Elkészült egy konkrét rendszer, amely megvalósítja a cikkben leírt elveket. A rendszer védett HTML oldalakon keresztül biztosítja a komponensek és a konténerek létrehozását, így minden felhasználónak külön lemezterülete is van a HTML és a PHP oldalak tárolására. A kétféle elven lehet tárolni a komponenseket: ez elsõ esetben a komponensek lefordítva tárolódnak el a szerveren. Ebben az esetben gyorsabban futó kódokat kapunk, de a rendszer nem változtatható és nehezen kivitelezhetõ az újrafelhasználhatóság elve. A másik esetben a komponensek és a konténerek adatbázisban tárolódnak, tehát a dinamikus HTML oldalak az adatbázisból generálódnak. Ebben az esetben a szerverünk többet fog dolgozni, de elértük célunkat a változtatások sokkal hamarabb tükrözõdnek vissza az eredeti rendszeren.

A rendszer mellé elkészült egy Interneten keresztüli web alkalmazás, amel­lyel az adatbázist lehet adminisztrálni és egy szintén web alkalmazás, amely az adatbázisban lévõ táblákhoz legenerálja a beviteli alkalmazást.

Cím:

Jónás Richárd

Debreceni Egyetem, TTK, Matematikai és Informatikai Intézet

4010 Debrecen Pf. 12.