Bevezetés a kliens-szerver architektúrákba, a statikus és dinamikus webprogramozás különbségei, történeti áttekintés.
A világháló az interneten egymással hivatkozásokkal összekötött dokumentumok rendszere. A dokumentum itt egy tágabb értelemben vett tartalom. Általában egy weboldalt értünk alatta, amely HTML (HyperText Markup Language, Hiperszöveg jelölőnyelv) formában tartalmazza a megfelelően strukturált információkat, amely azonban további hivatkozásokat tartalmazhat HTML állományokra, stílusállományokra, képekre, hangokra, videókra, stb. Dokumentum tehát lehet HTML állomány, kép, hang, videó, egyszerű szöveges állomány, tömörített állomány, tulajdonképpen bármi, amit a weben el tudunk érni. Az eléréshez megfelelő módon kell a tartalomra hivatkozni, ezt határozza meg az URL szabvány (Uniform Resouce Locator, azaz Egységes erőforrás helymeghatározó). A dokumentumokat a web szerverek teszik elérhetővé az interneten keresztül az ún. HTTP protokoll (HyperText Transfer Protocol, Hiperszöveg átviteli protokoll) segítségével. A világhálón megjelenő weboldalakat pedig megfelelő ügyfél (kliens) program, a webböngésző segítségével tekinthetjük meg.
A világhálón a dokumentumok elérése kliens-szerver architektúrában valósul meg. Egy dokumentum kérését mindig a böngésző (a kliens) kezdeményezi. A böngésző címsorába beírva a tartalom URL-jét, vagy egy URL-t tartalmazó hivatkozást aktiválva a böngésző a kérést a HTTP protokollon keresztül elküldi a szervernek, ahol a tartalom található. A szerver feldolgozza a kérést, majd a megfelelő feladatok elvégzése után visszaküldi a kívánt tartalmat a böngészőnek, amely megjeleníti azt (ha tudja). A folyamat sematikus ábrázolását az alábbi ábra mutatja.
Sematikus kliens-szerver architektúraA fenti ábrához még annyit jegyezzünk meg, hogy ez csak a logikai ábrázolása az architektúrának. Fizikailag akár egy gépen is elhelyezkedhet a kliens és a szerver. Tipikus példája ennek egy fejlesztői gép, amelyen egyszerre futhat egy webkiszolgáló program és egy böngésző is. Ebben az esetben minden kommunikáció a gépen belül történik meg (localhost).
A kliens-szerver architektúra filozófiájába illeszkedik egy weboldal publikálása is. A lokálisan elkészített HTML, CSS, kép és egyéb állományokat (amelyeket a böngésző webszerver nélkül a file protokollon keresztül meg tud jeleníteni) egy megfelelő programmal feltöltjük egy publikus webszerverre. Ekkor ezek a dokumentumok a webszerver segítségével elérhetőek lesznek az interneten, azaz a megfelelő URL birtokában bárki elérheti és megtekintheti azokat (most már a HTTP protokollon keresztül).
Ha készítünk egy HTML állományt, és azt publikáljuk a weben, akkor annak tartalmát csak úgy tudjuk megváltoztatni, ha magát a HTML forráskódot szerkesztjük és újra közzé tesszük. E beavatkozás nélkül a tartalom állandó, nem változik, más szóval statikus. Ez a dolog érhető is, hiszen a HTML nyelv alapvetően egy jelölőnyelv, a tartalom strukturálására, szerkezetének leírására szolgál, nincsenek benne olyan elemek, amelyek a tartalom változtatásáért felelnek.
Mivel egy weboldal megjelenítése két komponens együttműködése (kliens és szerver) révén történik, ezért mindkét komponens esetében érdemes megnézni, mikor nevezzük az adott oldalt statikusnak.
A webszerver szempontjából akkor tekintünk statikusnak egy oldalt, ha a kérés indításának pillanatában a szerveren már szerepel az a tartalom, amely végül megérkezik a válaszban. A szervernek ebben az esetben nem kell mást tennie, mint a kérésben megfogalmazott erőforrást ki kell keresnie a fájlrendszerben, és egy az egyben visszaküldenie a kliensnek. Ez tehát egy egyszerű fájlkiszolgálás. Ha például elhelyezünk egy alma.html fájlt a szerveren, akkor a böngészőben ezt a fájlt betöltve a kérés pillanatában már létezik az a tartalom, ami meg fog érkezni, hiszen az alma.html tartalma adott, és nem fog megváltozni.
A kliens szempontjából már jóval nehezebb megfogalmazni a statikusságot. Ha azt mondjuk, hogy az oldal semmilyen tekintetben nem változik a felhasználói interakciónak köszönhetően, akkor kizárjuk a CSS pszeudo elemek által elért hatásokat. Pedig CSS-sel megoldható, hogy egy elem fölé víve az egeret, vagy egy elemet aktiválva különböző stílusszabályok érvényesüljenek, amik látványos változásokat idézhetnek elő az oldalon. Gondoljunk csak a különböző CSS menükre, ahol a :hover pszeudo stílusosztály segítségével egymásba ágyazott menühierarchiák jeleníthetők meg; vagy a CSS3 által bevezetett átmenetekre, ahol látványos animációk írhatók le stílusszabályok által. A CSS deklaratív megközelítést alkalmaz (ami nagyon jó!), ami azt jelenti, hogy előre megadott elemekkel írja le bizonyos elemek viselkedését. Ezek az oldalak valóban reagálnak a felhasználói interakciókra, mégis olyan értelemben statikusak, hogy viselkedésüket csak a forráskód átírásával lehet megváltoztatni.
A statikusságot tehát olyan szempontból is megközelíthetjük, hogy egy ilyen oldalon csak olyan szerkezet, megjelenés és viselkedés jöhet létre, mint ami a szervertől érkezett válaszban megtalálható. A letöltött és a létrejött tartalom az oldal élettartamának a végéig (amíg a böngésző le nem cseréli az oldalt) ugyanaz marad. Nem változik meg sem a betöltött oldal szerkezete, sem a böngésző ablakának az állapota.
Legegyszerűbb azonban a statikusságot úgy megközelíteni, hogy statikus az az oldal, amelyben nem fut le programkód. A programkód ugyanis a deklaratív megközelítés ellentéte, ahol előre meghatározott eszközkészletből használunk fel elemeket, hanem egy programozási nyelv rugalmasságát kihasználva manipuláljuk az elemeket. Ahol viszont nem fut le programkód, ott nem is változhat meg semmi.
Dinamikusnak nevezünk egy oldalt akkor, ha az oldal képes változtatni tartalmát, állapotát a felhasználói interakciónak, a böngésző állapotának, és bizonyos külső körülményeknek megfelelően. Ebben az esetben elképzelhető, hogy ugyanazt az URL-t meghívva más oldal jelenik meg, vagy azért például, mert az oldal az aktuális időnek megfelelően más tartalmat generál, vagy azért, mert az oldal mögötti adatszerkezetek frissültek. Egy tőzsdei oldal például nem beégetett adatokat jelenít meg, hanem mindig az aktuális tőzsdei árfolyamokat listázza ki.
Itt is érdemes megkülönböztetnünk a szerver- és kliensoldali dinamizmust. Szerveroldalon dinamikusnak tekintünk egy oldalt akkor, ha a kérés pillanatában még nem létezik az a tartalom, amely a válaszban leküldésre kerül. Hogyan lehetséges ez? Hát úgy, hogy a választ egy program állítja elő a megfelelő paraméterek és adatok alapján. Ha a paraméterek vagy az adatok változnak, változni fog a leküldött tartalom is.
Kliensoldalon maradjunk annál az egyszerű megközelítésnél, hogy akkor dinamikus egy oldal, ha benne programkód fut le. Ez a programkód megváltoztathatja az oldal és a böngészőablak állapotát is. (Jó kérdés ugyanakkor, hogy statikusnak vagy dinamikusnak tekintsük-e azokat az oldalakat, amelyekben olyan programkód fut le, amely nem változtatja az oldal állapotát. Megjelenését illetően ezek statikus oldalak, ugyanakkor a definíció szerint dinamikusak. Szerencsére ez elvi kérdésnek mondható, hiszen kevés olyan valós alkalmazás van, amely így működne.)
A dinamikus oldalak nagyon elterjedtek, hiszen a legtöbb weboldal mögött nem statikus adatok állnak, hanem állandóan változó adattartalmat tároló és kiszolgáló adatbázisok, a felhasználói felületek pedig manapság olyan szintre fejlődtek, hogy elérték, sőt bizonyos tekintetben el is hagyták a hagyományos asztali programok felhasználói felületének az élményét, ez pedig megvalósíthatatlan lenne a böngészőben futó programok nélkül.
Ez a tananyag a dinamikus kliens- és szerveroldali programozás világába vezeti be az olvasót. A dinamikus webprogramozásban a cél közös: bizonyos paraméterektől függő tartalmat előállítani, reagálni a felhasználói cselekvésekre; a platformok, az eszközök és a felhasznált technológiák azonban lényegesen különböznek kliens- és szerveroldalon. Éppen ezért a tananyag két nagy részre osztható. Az első felében a kliensoldali dinamikus webprogramozás alapjaival, a kapcsolódó technológiával, és az ezeket vezérlő programozási nyelvvel, a JavaScripttel ismerkedünk meg, míg a második részben a szerveroldali dinamikus webprogramozás filozófiáját, technológiáit, tipikus feladatait tekintjük át, programozási nyelvként pedig a PHP-t használjuk céljaink elérésére.
Fontos hangsúlyozni, hogy ez a tananyag csupán bevezetést ad a technológiákba. Sokat foglalkozik az alapok megértésével, amire később bonyolultabb ismeretek építhetők. Bevilágítást enged nyújtani a különböző technológiákba és programozói interfészekbe, de elmélyedni nincsen módja egyikben sem. Ezek azonban a referenciák olvasásával elsajátíthatók. A tananyag igyekszik mindenki számára érthetővé tenni a webes technológiák alapjait, amivel kisebb alkalmazások elkészítése lehetővé válik.
A tananyag feldolgozásához bizonyos előismeretekre szükség lehet. Feltételezzük, hogy az olvasó ismeri az alapvető programozási fogalmakat, úgymint elemi és összetett típusok, vezérlési szerkezetek, programozási tételek, és jártas a C szintaxisú nyelvekben. Weboldalak programozásáról lévén szó elengedhetetlen a biztos HTML és CSS tudás is. Ha ezeket nem ismerjük, akkor nem fogjuk tudni ezeket programból sem megszólítani. Látni fogjuk, hogy a CSS ismereteket intenzíven használja fel a JavaScript világ, nemcsak a stílus manipulálására, de az egyes elemek kijelölésére is.
A világháló létezésének bő két évtizedében rengeteg fejlődés történt. Kezdetben természetesen csak statikus oldalakból állt a világháló. A kezdeti években főleg a technológia bevezetése és a megfelelő eszközök kidolgozása volt a cél. Így is a web olyan gyorsan terjedt el a világon, mint még azelőtt egyetlen informatikai újítás sem. Néhány év alatt a kezdeti pár száz oldal majdnem 100000-re duzzadt, és a világháló kilépett a kutatóintézetek világából. Elterjedésével egyre nagyobb igény lett arra, hogy cégek, vállalatok, közszolgálati intézmények is megjelenjenek a weben. Az elterjedtség technikai igényeket is szült, a megvalósítandó oldalak feszegették a statikus oldalak határait. Így 1995 környékén elkezdődött a JavaScript nyelv fejlesztése, mely a böngészőbe ágyazottan a kliensoldali interakció kiszolgálására szolgált, és ugyanekkor jelent meg a PHP első publikus verziója is, amely program által állította elő az oldalakat.
A 1990-es évek második fele ezeknek és más webes technológiáknak a finomítgatásával és szabványosításával telt. Ekkorra tehető a böngészők háborúja, ahol kliensoldalon a Netscape és az Internet Explorer küzdött újabb és újabb, sokszor egymásnak szándékosan ellentmondó megoldásokat bevezetve, ezeket részben szabványosítva, míg végül 1999-re a Netscape gyakorlatilag megszűnt. A kliensoldalon ezután 2005-ig nem történik semmi számottevő, a fejlesztések inkább a szerveroldali megoldásokra koncentrálnak. Ez idő alatt az Internet Explorer árnyékában több új böngésző fejlesztése kezdődik meg, amelyek szabványosságukkal és új funkciójukkal jól tömik be az Internet Explorer által hagyott rést. Ekkor jelenik meg a Mozilla Firefox, az Opera, a Safari.
2005-ben az AJAX technológia megjelenésével a kliensoldalon is egyre bonyolultabb logika jelenik meg, ami a JavaScript nyelv újrafelfedezéséhez vezet. Ekkoriban már az internetet széles körökben használják, egyre több alkalmazás jelenik meg a weben, és a széles felhasználói réteg egyre gyorsabb és szebb felhasználói felületet igényel. Az igény és a technológia egymást erősítik. A kifinomult felhasználói felületek bonyolultabb kliensoldali kódot követelnek, az egyre nagyobb kódmennyiség egyre jobb megoldásokat igényel, és egyre gyorsabb böngészőmotorokat. Újabb böngészőverseny veszi kezdetét, ahol a cél a minél gyorsabb JavaScript motor létrehozása. A Google megjeleníti Chrome böngészőjét, amely gyorsan a többi böngésző vetélytársa lesz.
Manapság az internet és a web mindennapjaink egyre több területén jelenik meg: ezt használjuk a munkánkban, tanuláshoz, kapcsolattartásra, információszerzésre, ügyintézésre, adataink tárolására és megjelenítésére, szórakozásra, és még sorolhatnánk. Az internetre kötött eszközök száma évről évre egyre nagyobb mértékben növekszik, a különböző mobileszközök iránti kereslet is egyre nagyobb. A világhálón megjelenő alkalmazások száma is fokozatosan gyarapodik. Mára a web egy univerzális futtató platformmá nőtte ki magát, ahol minden mindenki számára elérhető.
A webes platform erősödését mutatják az álláshirdetések is. A következő grafikonokon világszinten látható, hogy a webes technológiákhoz kapcsolódó álláshirdetések az elmúlt években folyamatosan növekedtek.
HTML5 álláshirdetések (forrás: http://www.indeed.com/jobtrends)
JavaScript álláshirdetések (forrás: http://www.indeed.com/jobtrends)
PHP álláshirdetések (forrás: http://www.indeed.com/jobtrends)
 |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.