Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
A tárgy célja, tematikája A World Wide Web kialakulása, működése. A hipertext fogalma, jelentősége. Hipertext rendszerek modelljeinek megismerése. Technológiai alapok (HTML, CSS, http) Webalkalmazások problémaköre, megoldási lehetőségei. Webalkalmazás technológiák (PHP, JavaEE web tier) Korszerű webtechnológiák (Web2.0): AJAX, HTML5
Bevezetés Az írás és a beszéd az emberi kommunikáció sajátsága. A tudás forrásának számít. Írástörténelem: kézírás, kódexek 1450 Guttenberg: nyomdászat, könyvtárak 1945 Vannevar Bush: „As We May Think” c. sci-fi írása, a MEMEX gép fikciója a „csatolt szöveg” koncepció
1970 Ted Nelson: a hipertext, mint felhasználói interfész paradigma. Igény szerint szétágazó vagy megjelenő szöveg.
Bevezetés Az írás változásának társadalmi hatásai: Guttenberg előtt: kevesen tudnak írni, olvasni kevesen férnek hozzá könyvekhez kiváltság (első sorban szerzeteseké, papoké)
Guttenberg után: egyre szélesebb körben hozzáférhetőek a könyvek uralkodók döntenek iskolarendszer bevezetéséről erősödő népművelés, az írás és olvasás általános műveltséggé válik
A HyperText paradigma A szöveg hiperhivatkozásokat tartalmaz, mely egy szövegelemhez másik szöveget (dokumentumot/dokumentumrészt) csatol. Megszűnik a lineáris olvasás kényszere, az olvasó a csatolt szövegek között „navigálva” olvassa a tartalmat. HyperText dokumentumok böngészéséhez speciális eszköz szükséges. Számos implementáció készül. (Hypertext Editing System - HES, Xanadu, oN-Line System – NLS, stb.)
A Hypertext kiegészítései Hypermedia paradigma: a dokumetum multimédia elemekből áll (nem csak szöveg) pl. kép is lehet hivatkozás, képre is lehet hivatkozni
Kiterjesztés hálózati közegre: a link leíró egy URL (Universal Resource Locator) URL elemei: Hogyan? Honnan? Mit? séma (protokoll), pl. http:// domain név vagy IP cím, pl. users.iit.uni-miskolc.hu ösvény, pl. /~repasi pl. http://users.iit.uni-miskolc.hu/~repasi
HAM – Hipertext absztrakt gép Réteges felépítésű, referencia modell: felhasználói felület rétege alkalmazási réteg tárolási réteg operációs rendszer réteg
A dokumentumkezelés környezetét modellezi, elkülönítve a tárolás és feldolgozás moduljait. Réteges felépítésű: lehetőség minden rétegben több implementációra
A Dexter-féle referenciamodell Három rétegű modell: megjelenítési réteg tárolási réteg komponens réteg
A hipertext dokumentum egymással hivatkozási kapcsolatban álló komponensek rendszere.
A Dexter-féle referenciamodell Komponensek: atom: atomi komponens (pl. szöveg paragrafus, kép, stb.) kompozit: összetett komponens, konténerbe szervezett komponensek együttese link: kapcsolati komponens, hivatkozás egy másik komponensre
Egyszerűségének köszönhetően igen elterjedt: több hipertext-rendszer alapját képzi a Dexter-modell.
Trellis-féle (használati) modell Modellezi a felhasználó és a hipertext rendszer interakcióját is. Három réteg: absztrakt, tartalom, megjelentítés A Trellis-modell, mint Petri-háló: <S,T,F> S : dokumentumok halmaza T : állapotátmeneti csomópontok (link szövegek) halmaza F : kapcsolatok halmaza F ST T S
A WWW hipertext-modell Dokumentum-szerkezeti modellje alapját a Dexter-modell alkotja, annak megvalósítása. WWW dokumentumok technológiai rétegmodellje: tartalmi réteg: hipertext dokumentum reprezentációs réteg: HTML, DOM, SGML tárolási réteg: file, memória
A World Wide Web születése '80-as évek: TimBerners Lee a CERN mérnöke 1989 december: cikk a CERN-nél bevezetett ENQUIRE rendszerről: Egyik lehetőségként említi a World Wide Web fantázianevű dokumentumhálót.
A World Wide Web születése Robbanásszerű fejlődés kezdődik. A '90-as évek közepétől kereskedelmi célú alkalmazások veszik át a mozgatórúgó szerepét. Az eredeti elképzelés (dokumentumkezelő rendszer) kiegészül: alkalmazások felhasználói felülete lesz a WWW egy időben több felhasználó hozzáférhet (osztott alkalmazás) multi-tier alkalmazás (legalább kettő)
A World Wide Web születése 1994: megalakul a World Wide Web Consortium (W3C) az MIT-n Elnöke: Tim-Berners Lee Kompetenciája: a Web fejlődését biztosító technológiai kutatás és fejlesztés számos területen folyik a munka: architektúrák: DOM, XML, i18n, WS, stb. interakció: SVG, WebCGM, HTML, Style, stb. minőségbiztosítás: QA technológia és társadalom: szabadalmak, magánszféra, biztonság, stb. stb.
A WWW napjainkban Üzletiesített média Hírek, reklámok, magazinok, stb. On-line rádió és televízió
Szolgáltatási csatorna Webáruházak, InternetBanking, árverés
Közösségi tér Kommunikáció, közösség (iwiw, myspace, youtube, stb.)
Tartalomkereső rendszerek Yahoo, Google, AskGeeves, stb.
Vigyázat, fogalomzavar World Wide Web hipertext (hipermédia) dokumentumrendszer szinonim nevek: WWW, web
Internet globális kiterjedésű számítógéphálózat szinonim nevek: világháló
internet / intranet az Internet technológiáját használó, de attól elszigetelt (vagy korlátozottan kapcsolt) számítógéphálózat
Az Internet (vagy egy internet) szolgáltatása lehet a WWW hozzáférés.
A HTML nyelv Hipertext dokumentumok reprezentációját szolgáló leírónyelv Szöveghez adott meta-adatok szabályozzák a dokumentum megjelenítését Az XHTML szabvány az XML szintaxisát veszi át HTML szabványok HTML 4.01 XHTML 1.0 következő: HTML 5 (még tervezet)
A HTML nyelv A dokumentum felépítése: fej: dokumentumra vonatkozó meta-adatok erőforrások (pl. script, stíluslap, stb.) erőforrás hivatkozások
törzs: dokumentum tartalom beágyazott erőforrások (pl. script)
Szintaxis: ASCII karakterkészlet spec. karakterek: entitás hivatkozás (pl. á) elem: … , elemek egymásba ágyazhatók (kötött struktúra!) attribútumok: …
Példa HTML dokumentum WWW Oldal
Ez egy példa HTML dokumentumra.
HTML elemek Kép beillesztése: Hiperhivatkozás link szöveg Megjegyzés
HTML elemek - keretek A böngésző területet osztják fel Hivatkozásokban: ... spec. targetek: _blank, _parent, _self, _top
HTML elemek - táblázat
elso oszlop
második oszlop
harmadik oszlop
1. adat
2-3. adat
Stílusok A probléma: egységes webhely arculat (sok oldal) sok egyedi szerkesztési igény nem tárolt oldalakra is arculatváltás
Az igény: stílust szabályozó meta-adatok dokumentumból való kiemelhetőség
A megoldás STYLE attribútum bevezetése stíluslapok CLASS attribútum bevezetése
Stílus kaszkád A stílus elemhez kötődik, stíluslap alapján Stíluslapok 1. böngésző (beépítve a böngészőprogramba) 2. külső stíluslap (külső stílusállományban) 3. belső stíluslap (a dokumentumfejben) 4. in-line stílus (az elem STYLE attribútumában)
Minden elem a legmagasabb definiált precedenciájú stílusban jelenik meg.
HTML + CSS példa WWW Oldal
Ez egy példa HTML dokumentumra.
Kiemelt szöveg.
body { background-color: #AABBCC } div { font-family: arial, helvetica; text-align: center } div.kiemelt { text-decoration: underline; font-weight: bold }
Pszeudo-stílusok Hivatkozás szövegre: a:link a:visited a:hover a:active Szöveg részekre: :first-line :first-letter Média szelektorok: @media print | screen | print,screen
A http protokoll Hipertext átvitelre tervezett MIME által tartalomfüggetlen 7. szintű protokoll Állapot mentes Igénybe vett <7 szolgáltatások: összeköttetésalapú, duplex átvitel
TCP/IP fölött működhet?
A http protokoll Kérés-válasz protokoll Két szereplője: kliens: aki kérdez szerver: aki válaszol
Szcenárió (a kliens szemszögéből): kapcsolat felépítés (TCP) kérés küldés válasz fogadás kapcsolat bontás (?)
POST dokumentum kérése, de van paraméterátadás a kérés tartalom részében
HEAD dokumentum meta-adatok kérése
PUT, MKCOL, DELETE, OPTION, stb. speciális alkalmazások (pl. WebDAV) számára fenntartott metódusok
Egy forgatókönyv Böngészőbe beírtuk a http://users.iit.uni-miskolc.hu/~repasi/ URL-t domain névfeloldása után kapcsolódás a 80-as porthoz fejrész kérése: HEAD /~repasi/ HTTP/1.1 Host: users.iit.uni-miskolc.hu
Várakozás válaszra
Egy forgatókönyv 2 Szerver válasza: HTTP/1.1 200 OK Date: Tue, 19 Feb 2008 12:19:16 GMT Server: Apache/2.0.54 (Debian GNU/Linux) mod_jk2/2.0.4 PHP/4.3.10-22 mod_ssl/2.0.54 OpenSSL/0.9.7e Last-Modified: Mon, 15 Mar 2004 12:58:20 GMT ETag: "247db87b-310-929f300" Accept-Ranges: bytes Content-Length: 784 Content-Type: text/html
Egy forgatókönyv 3 Böngésző kéri a dokumentum tartalmát: GET /~repasi/ HTTP/1.1 Host: users.iit.uni-miskolc.hu
Szerver küldi a fejrészt és a tartalmat: HTTP/1.1 200 OK Date: Tue, 19 Feb 2008 12:47:43 GMT Server: Apache/2.0.54 (Debian GNU/Linux) mod_jk2/2.0.4 PHP/4.3.10-22 mod_ssl/2.0.54 OpenSSL/0.9.7e Last-Modified: Mon, 15 Mar 2004 12:58:20 GMT ETag: "247db87b-310-929f300" Accept-Ranges: bytes Content-Length: 784 Content-Type: text/html ...
Összefoglalás Félév kezdési adminisztratív teendők Hypertext rendszerek kialakulása Hypertext modellek A World Wide Web létrejötte A HTML nyelv alapjai Stílusok használata A http protokoll
Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
HTML űrlapok Weboldalon felhasználó által kitölthető űrlap A form elem tartalmazza. Attribútumai: Action: az URL, ami az adatokat fogadja Method: a küldéshez használandó http metódus
Űrlap elemek: Szövegbeviteli mező Jelszóbeviteli mező Többsoros szöveg beviteli mező Lista, egy vagy több kijelölhető elemmel Legördülő lista Kiválasztó-, nyomó- és rádió- gombok Küldés és visszaállítás gombok
HTML űrlapok Speciális lehetőség: fájl feltölés, mint beviteli mező Minden beviteli elemnek van NAME attribútuma, tartalma egyedi. Beviteli elemek eseményei: onChange: érték megváltozásakor onSubmint: az űrlap küldésekor (előtt) onReset: az űrlap visszaállításakor onSelect: kijelölés alkalmával onBlur: fókusz elvesztésekor onFocus: fókusz megszerzésekor
Kliens oldali validáció lehetősége.
Adatküldés http kérésben GET metódussal: URL-encoding A form elem action attribútumában lévő URL-t kiegészíti a beviteli elemek név=érték listájával. Az URL hossza korlátos, csak kis mennyiségű adat küldhető.
Adatküldés http kérésben POST metódussal: A kért URL a form action értéke A http kérés fej tartalmaz content-type és content-lenght attribútumokat A beviteli elemek név=érték listája a http kérés tartalom részében kerülnek átadasra Fájl feltöltés csak ezzel a metódussal lehetséges, ”multipart/mime” kódolással (form elem encoding att.)
Űrlap adatok feldolgozása Speciális lehetőség: action=”mailto:<email cím>”
Szerver oldali feldogozó program által: Beviteli elemek értékének kinyerése Adatellenőrzés méretre, típusra! Tartalom értelmezése
Veszély: Egy feldolgozó bárhonnan kaphat bemenetet, nem csak a hozzá tartozó űrlaptól!
Alapelv: „A felhasználói bemenet megbízhatatlan!”
Weboldalak dinamikus előállítása Statikus weboldal: Tárolt oldal, ált. a szerver fájlrendszerén Módosítása automatizálható Lehet program által generált Előállítása a felhasználói eseményekkel asszinkron Dinamikus weboldal: Általában nem tárolt oldal Program állítja elő vagy módosítja Előállítása felhasználói eseménnyel szinkron Az előállító program a webszervertől szeparált, futhat A böngészőben! CGI környezetben Beépülhet a webszerverbe, mint content handler
Weboldalak dinamikus előállítása
Kliens oldali megvalósítás: a böngészőben fut Beágyazott objektum (pl. Java Applet, ActiveX vezérlő, Flash, stb.) A megjelenítő terület egy téglalap alakú részét kezeli A beágyazó dokumentumtól független Saját eseménykezelővel rendelkezik Gyakran korlátozott jogosultságú „kisalkalmazás” Futtató környezetét a böngésző (plug-in) biztosítja A dokumentum részét képző script A böngésző értelmezi A dokumentumhoz kötött program Böngésző és dokumentum objektumokon tud manipulálni A dokumentum elemeinek és a böngésző eseményeit kezeli Nyelve többféle lehet (pl. JavaScript, VBScript)
Weboldalak dinamikus előállítása Szerver oldali megvalósítás: CGI szabvány: Bizonyos (konfigurált) URL-ek kezelésére a szerver az URL-hez kötött programot indít (gyerekprocesszben) Paramétereket környezeti változóként adja át A http kérés fejrésze paraméter, adat tartalma stdin A kiszolgáló processz kimenete (stdout) a http válasz lesz A kiszolgáló processz hibakimenetét (stderr) a szerver naplózza
Content handler (webszerver tulajdonság): A webszerver beépülő modulja (plug-in) -> értéknövelt webszerver, alkalmazásszerver URL-hez vagy fájltípushoz köthető A http kérésre a választ a content handler állítja elő
JavaScript Netscape fejlesztés, korábbi neve LiveScript A „Java” megnevezés üzleti fogás, a Sun Java technológiájához nincs köze! Weboladlak dinamikussá tételére fejlesztették ki Szerver és kliensoldali használatra egyaránt alkalmas, de csak kliens oldali használata terjedt el Szintaxisa C szerű, gyengén típusos, semantikája a Self nyelvhez áll közel. ECMA-262 (ECMAScript) szabvány implementációja, sok kiegészítéssel. Rokonok: JScript, VBScript, ActiveScript, JSON, AppleScript
HTML események A HTML dokumentum a böngészőben példányosul, elemeit objektumok reprezentálják OOP alapelv az eseményvezérlés, azaz objektumok reagálhatnak eseményekre Az objektum reakciója egy eseményre, az eseménykezelő lefuttatása Dokumentum objektumok eseménykezelőjét a dokumentum elemeihez kötjük, attribútum formájában.
HTML események Esemény attribútumok: onMouseOver: egér fölötte van az elemnek onMouseOut: egér lement az elemről onMouseMove: egér mozog az elemen onMouseDown: egér gomb lenyomás onMouseUp: egér gomb elengedés onClick: kattintás az elemre onDblCllick: dupla kattintás az elemre onLoad: a dokumentum betöltése
Elemhez kötődnek, de vannak megszorítások! Az attribútum értéke az eseménykezelő script.
Document Object Model - DOM Általános modell XML dokumentum OO példányosítására. Objektum hierarchia reprezentálja a dokumentum elemeit. A JavaScript HTML DOM a dokumentum elemeket reprezentálja Minden elemhez létezik azonos nevú objektum Objektumok között az elembeágyazással analóg szülő-gyermek kapcsolatok
Document Object Model - DOM
Document Object Model - DOM Legfontosabb elemek: Document: a dokumentumot reprezentálja Anchors, forms, images, links tömb tagok URL, body, domain, cookie adattagok Open, close, write metódusok GetElementById, getElementsByName, getElementsByTagName navigációs metódusok
Példa
Loading...
Ez egy nagy dokumentum, sok képpel, melyek betöltése időigényes! …
További JavaScript objektumok Window: A böngésző megjelenítő területe A DOM hierarchia gyökere
Navigator: Böngészőt reprezentáló objektum A JavaScript runtime hozza létre
Screen: A megjelenítő képernyő tulajdonságait hordozza
History: A böngészővel meglátogatott URL-ek listája
Location: Címsor, ami az URL-t tartalmazza
Példa – kép átméretezés <script type="text/javascript"> function changeSize() { document.getElementById("compman").height="250" document.getElementById("compman").width="300" }
Példa – új oldal előállítása <script type="text/javascript"> function createNewDoc() { var newDoc=document.open("text/html","replace"); var txt="Learning about the DOM is FUN!"; newDoc.write(txt); newDoc.close(); }
Példa – új dokumentum több keretben
<script type="text/javascript"> function newSrc() {
parent.document.getElementById("leftFrame" ).src= "http://w3schools.com" parent.document.getElementById("rightFrame"). src= "http://google.com" } link
Példa – üzenetablak megjelenítés <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!") }
Példa – input ablak <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?") } }
CGI Célja, hogy a http kérés kiszolgálását egy program végezze. A webszerver „csak” közvetít A kiszolgáló program a webszerver gyermekprocesszeként fut Környezeti változókban paramétereket kap Bemenetén a http kérés tartalma (ha van ilyen) Kimenete a http válasz lesz Hibakimenetét a szerver naplózza (konfiguráció)
Server paraméterek SERVER_NAME, SERVER_PORT SCRIPT_NAME DOCUMENT_ROOT, PATH_INFO
CGI kimenet Fej és tartalom részből áll Fejben legalább „Content-Type” attribútum kell Üres sor az elválasztó jel Tetszőleges tartalmat adhat Példa: Content-type: text/html <TITLE>output of HTML from CGI script
Sample output
What do you think of <STRONG>this?
CGI implementáció Tetszőleges futtatható program lehet (C/C++, Pascal, shell script, stb.) Speciális feladat a környezeti változók és a bemenet kódolásának kezelése. Speciális eszközök: Függvénykönyvtárak (pl. libcgi) Scriptnyelvek segédkönyvtárral (pl. perl) Célnyelvek (pl. php)
Teljesítmény Minden kérést új processzben futó kiszolgáló program szolgál ki. A kiszolgáló program befejeződésével a processz megszűnik. Új processzek létrehozása időigényes.
Minden kiszolgáló processz a webszervert működtető gépen fut. Nincs terhelésmegosztás
A kiszolgáló programnak időkorlátja van A böngésző bontja a kapcsolatot, ha nem kap választ A felhasználó türelmetlen, a frissítés csak ront a helyeten
Content handler Egyes webszerverek képesek értéknövelt szolgáltatást nyújtani. URL vagy erőforrás típushoz kötött feldolgozó lehet a webszerverben. Nem szabványos megoldás, de elterjedt. Az alkalmazás webszerver függő lehet. Előnye: Nem kell külön processz a kiszolgáláshoz A worker több kérést is kiszolgálhat eletciklusában A feldolgozó példányok erőforrásokon osztozhatnak
Biztonság Content handler: Minden feldolgozó a szerver jogosultságával fut Hibás működés a webszerver stabliltását befolyásolja Konkurenciakezelés hiánya a megosztott erőforrásokra.
CGI: Gyakran a webszerver jogosultságával fut A SU-CGI igen időigényes
Könnyű túlterhelni a gépet A védelmet minden programban egyedileg kell megvalósítani
Speciális alkalmazáskörnyezet, szokatlan programozói megoldásokat kíván meg
Elterjedt megoldások PHP, mint content handler Elfogadható teljesítmény Nincs terhelésmegosztás Nincs védelem PHP, CGI kiszolgálóként Gyenge teljesítmény Nincs terhelésmegosztás Védelem lehetséges, de jelentős teljesítményveszteség az ára Alkalmazásszerver használata Integrált szolgáltatásrendszerű futtató környezet Policy alapú biztonság, jól szabályozható Terhelésmegosztás, nagy rendelkezésreállás Számos termék: Java EE, JBoss, Oracle AS, Zope, stb.
Felhasználó azonosítása Igény: felhasználó azonosítása Megoldási lehetőségek: Alkalmazás szintű: külön bejelentkező oldal Protokoll szintű: HTTP-Auth mechanizmus Böngésző/OS szintű: csak Windows domain-ben
Alkalmazás szintű megoldás A bejelentkezést az alkalmazás valósítja meg Külön bejelentkező oldal (űrlap) Külön felhasználói adatbázis Külön biztonsági rendszer az alkalmazásban
Sok fejlesztői feladat, sok hiba lehetőség: Biztonságos azonosítás, titkosított átvitel Felhasználói adatbázis megvalósítása Hozzáférés szabályozása Kivételek kezelése
Azonos feladatok, minden alkalmazásban újbóli fejlesztés?
HTTP-Auth A http protokoll szolgáltatása. Többféle mechanizmus (basic, digest) Szokásos felhasználói adatbázisok használata Böngésző támogatás szükséges (van) Alkalmazástól független Biztonságos (bizonyos feltételek mellett) Implementálhatja a webszerver vagy az alkalmazás Nem mindenre megoldás
Basic authentication 1. Kérés: GET /private HTTP/1.1 Host: localhost
2. Válasz: HTTP/1.0 200 OK Date: Sat, 27 Nov 2004 10:19:07 GMT Content-Type: text/html Content-Length: 10476 ...
Basic authentication Probléma: a kód a „felhasználó:jelszó” -t tartalmazza a base64 kód nem titkosítás a böngésző minden kérésben küldi nincs kilépés / kiléptetés jelszóátvitellel járó eljárás
Lehetséges biztonsági megoldás: https kommunikáció (http ssl titkosítású csatornán)
Digest authentication Előnyök: nincs tárolt jelszó (lásd felh. adatbázis) nincs jelszó átvitel (a HA1-ből md5 hash) a szerver válasza nem hamisítható (nonce) a kliens válasza nem hamisítható (cnonce) egy kihívásra csak egyszer lehet próbálkozni (nc) azonosított munkafolyamat (opaque)
Hátrányok: egyedi felhasználói adatbázis bonyolult számítás (gyenge gépeken)
HTTP-Cookie Cookie: korlátos méretű adatcsomag kliens/szerver kommunikáció sajátsága szerver készíti és küldi kliens tárolja és visszaadja
Válasz, cookie beállítás: HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value, expire=timestamp, domain=mydom, path=/, secure=false (content of page)
Kérés: GET /spec.html HTTP/1.1 Cookie: name=value Accept: */*
HTTP-Cookie Cookie attribútumok: név: változó azonosító érték: változó érték lejárati idő: időpecsét, ameddig érvényes domain: a szerver ahonnan jött ösvény: az URL ösvény része ahova visszajuthat titkos: logikai érték, titkosított kapcsolatot igényel-e Egy domain/ösvény párhoz több cookie is tartozhat. A böngésző mindet küldi a kérés fejlecében. Küldéskor (c->s) csak név/érték kerül átadásra. Szerver csak név, érték, lejárat, ösvény és titkos tulajdonságokat állíthatja be.
Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Mai program Webalkalmazás fogalma, tulajdonságai Alkalmazások anatómiája állapotok és átmenetek párhuzamos folyamatok
Biztonsági kérdések session biztonsága adatbiztonság védelem visszaélések ellen
Webalkalmazások Definíció: olyan szoftver alkalmazás, melynek hozzáférését web böngésző biztosítja Internet vagy intranet hálózaton keresztül. Nézőpontok: felhasználói felület (UI) szoftver architektúra szolgáltatási csatorna elosztott alkalmazás platform
Webalkalmazás, mint UI Felhasználó szemszögéből: felhasználói felület minden webalkalmazás hasonló felülettel bír egységes kliens (böngésző) vékony kliens -> kis erőforrásigény
Tulajdonságai: bárhonnan hozzáférhető + tetszőleges eszközön használható hagyományos alkalmazásoktól eltérően viselkedik hálózati kapcsolat elengedhetetlen +
Webalkalmazás, mint szoftver architektúra Programozó szemszögéből: több részes (multi-tier) architektúra (min. 2) egyszerű, megjelenítő független UI leíró számos fejlesztőkörnyezet áll rendelkezésre
Tulajdonságai: egyszerű UI megvalósítás + kötetlen fejlesztői környezet állapot mentes UI kapcsolat szokatlan fejlesztési módszertanok nem általános biztonsági követelmények +
Webalkalmazás, mint szolgáltatási csatorna Üzleti szempontból: egy szolgáltatás nyújtására lehetőséget adó eszköz
Tulajdonságai: felfogható üzlethelységként + olcsón üzemeltethető + széles körben elterjedt, mindenütt jelenlévő + nagy célcsoport a szolgáltatás automatizált nyújtását követeli meg meglévő szolgáltatások átstrukturálása költséges +
Webalkalmazás, mint elosztott alkalmazás platform Rendszer integrátor szempontjából: a szolgáltatás nyújtása decentralizálható nem csak UI szolgáltatás, ún. Webservice is lehetséges
Tulajdonságai: szolgáltatások decentralizálhatók + WS jól integrálható a SOA szemléletbe + nagy rendelkezésre állás, nagy terhelhetőség + hibatűrő architektúra publikus interfész, támadási felület sok egyedi fejlesztési igény +
Webalkalmazások Népszerűségének okai: Kliense: Web böngésző Mindenhol hozzáférhető Vékony kliens Alkalmazás: Központi szoftver Terjesztés nélkül frissíthető Gyakori alkalmazások: webmail, áruház, aukció, csapatmunka szervezés, vitafórum, wiki, blog szerepjáték, stb.
Webalkalmazások kialakulása Kezdeti kliens-szerver alkalmazások egyedi klienssel -> telepítés, frissítés kényszere Webalkalmazás Felhasználói felülete: dinamikusan előállított weboldal Kliense: szabványos web böngésző Interaktivitás növelése: kliens oldali script (JavaScript) A HTML/XHTML szabvány bővíthető weboldalak előállítását teszi lehetővé. Bővítés: (Java, JavaScript, Flash, stb.) Funkcionális: az UI viselkedését befolyásolja Megjelenítési: egyedi megjelenítés lehetősége Vastag kliens
Webalkalmazások napjainkban Igen elterjedtek, dinamikusan fejlődnek. Számos alkalmazási terület: hírek, közösség, bank, árverezés, kereskedelem, stb. A HTML, CSS, JavaScript DOM szabványok eltérő implementációi komoly gondokat okoznak. Tipikusan három rétegű (three-tire) alkalmazás Többnyire vékony kliens; a flash nem ritkaság Alkalmazás logika, adatháttér: igen változatos lehet, sokféle elterjedt technológia Szabványos: Java alapú, .NET alapú Gyakori még: PHP/MySQL, Oracle AS, stb.
Alkalmazások anatómiája Alkalmazás: együttműködő programok Program = Adatstruktúrák + Algoritmusok (N. Wirth) Adatstruktúrák: értékei állapotot tükröznek. Algoritmusok: állapot átmenetet valósítanak meg. Állapot: adatstruktúrák, adatbázisok Állapot átmenet: algoritmus, vezérlés néha: alkalmazás (vagy üzleti) logika (AL / BL)
Alkalmazások anatómiája Elosztott alkalmazások: egyetlen AL sok munkafolyamat (session)
Munkafolyamat: az alkalmazás egy állapotváltozási fonala állapota a munkafolyamatnak van az AL feldolgozási környezete (kontextusa)
Nem összetévesztendő a session felhasználóval klienssel
Munkafolyamatok modellezése Számos matematikai megközelítés Johnson Petri
Munkafolyamat webalkalmazásokban Probléma webalkalmazások esetén: Az alkalmazásprotokoll (http) állapotmentes Nincs viszony szolgáltatás (session service) a hálózati (TCP/IP) stack-ben.
Biztonsági kérdések (adat) Adatátvitel során átvitt adatok védelme lehallgatás ellen újrahasznosítás ellen hamisítás ellen
Lehetséges megoldások: titkosított csatorna - http alatti – SSL titkosítás jelszó átvitelének mellőzése (ch/resp) adatok digitális aláírása
Visszaélés elleni védelem Alkalmazás védelme visszaélések ellen: automatizált használat (pl. tömeges regisztráció) nem kívánt műveletek végrehajtása
Megvalósítás: Fordított Turing próba audiovizuális kihívás (captcha) az automatizált használat elleni védelem kijátszható (pl. relay támadással)
szoftver validáció és verifikáció védelem nem kívánt műveletek ellen az alkalmazás logikában a tesztelés nehézkes, gyakran egyedi eszközökre szorul, módszertana komplex
Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Mai program A PHP nyelv architektúra működési modell nyelvi elemek API Adatbázis elérés
Fájl feltöltés kezelése PostgreSQL nagy objektumok
Objektum orientált programozás PHP-ban
A PHP nyelv kialakulása 1994 Rasm us Lerdorf: Personal Homepage Rasmus Lerdorf
A PHP nyelv Reflektív programozási nyelv Célnyelv: dinamikus weboldalak előállítására Szerver oldali script nyelv Interpretált Szintaxis: C-hez hasonló Szemantika: Self Gyengén típusos HTML beágyazás:
PHP példa PHP Test Hello World'; ?>
PHP példa 2 (kicsit értelmesebb)
PHP – Nyelvi elemek Szintaxis: hasonlít az ANSI C-re Szemantika: Self Gyengén típusos Kiterjedt API Típusok: boolean, integer, float (double), string array, object resource, NULL mixed, number, callback
Tömb: asszociatív van foreach szerkezet
PHP – Nyelvi elemek változók $ jellel kezdődik neve '[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*' pl:
// outputs "Bob, Joe"
$4site = 'not yet'; // invalid; starts with a number $_4site = 'not yet'; // valid; starts with an underscore $täyte = 'mansikka'; // valid; 'ä' is (Extended) ASCII 228. ?>
PHP – nyelvi elemek Beépített változók (tömbök) $_SERVER: a CGI környezet változói $_GET: http GET kérés paraméterei $_POST: http POST kérés paraméterei $_REQUEST: http kérés paraméterei $_COOKIE: a kérésben kapott cookie-k $_SESSION: session változók
Űrlapok feldolgozása
Hi . You are years old.
Cookie kezelés Script beállíthat HTTP-Cookie-t (HTTP-head) setcookie() függvény: a script elején, minden output-ot megelőzve name, value, expire, path, domain, secure
a request cookie-kat a $_COOKIE tömb tartalmazza
Session kezelés A session_start() fgv. indítja ill. használja $_SESSION változó globális változója a munkafolyamatnak Megavalósítás: PHPSESSID azonosító Cookie-ban hidden menzőben URL-ben
a kérések között a $_SESSION változó filbe-ba szerializálódik
A session_start() -ra hasonló követelmények vonatkoznak, mint setcookie()-ra.
Session kezelés Timeout értéket a php.ini rögzít A session_destroy() fgv. törli a munkafolyamatot bárhol hívható
PHP – API Kiterjedt függvénykönyvtár Dinamikusan betölthető modulok Funkció szerinti csoportosítás névkonvenció: _
PHP – adatbázis elérés Több függvénycsoport: MySQL, MS SQL, PostgreSQL, Oracle, ODBC, stb. Hasonló funkcionalitású függvények minden csoportban: connect: kapcsolódás query: lekérdezés insert, update, delete: gyakran csak query resultset kezelők close: kapcsolat zárás pconnect: perzisztens kapcsolódás
Univerzális adatbáziskapcsolati réteg: DBX
Adatbázis hozzáférés - DBX DBMS független API natív DBMS API függvényeket használ Használata: kapcsolat nyitás (dbx_connect) SQL utasítás feldolgozás (dbx_query) kurzor feldolgozás (dbx_fetch_row) kurzor rendezés (dbx_sort, dbx_compare) hibakezelés (dbx_error) sztring kvótázás (dbx_escape_string) kapcsolat bontás (dbx_close)
$result = dbx_query($link, 'SELECT id, parentid, description FROM table');
} echo "
\n"; }
if (is_object($result) ) { echo $result->rows; // number of records
echo "\n"; }else {
echo $result->cols; // number of fields echo "
\n";
exit("Query failed"); }
dbx_close($link); ?>
Teljesítmény Kapcsolatfelépítés időigénye: Perzisztens kapcsolat
SQL parsing: tárolt eljárások
hosszú feldolgozási idő: asszinkron végrehajtás (DBX nem támogatja!)
Biztonsági kérdések SQL injection: dinamikus SQL utasítás felhasználói inputtal megoldás: (DBMS függő) sztring kvótázás, (pl. dbx_escape_string)
HTML injection: felhasználói input kerül a válaszoldalra megoldás: HTML tag-ek kvótázása (htmlspecialchars)
PHP hibakezelés és kivételkezelés
Fájl feltöltés Fájl feltöltés feltételei HTML űrlapon: POST metódus űrlap kódolás: "multipart/form-data" „file” típusú beviteli elem fájlméret korlátozható „MAX_FILE_SIZE” nevű hidden elemmel, a fájl elem előtt
A szerveroldali alkalmazásnak kezelni kell: feltöltés tényét (fájlok neve, mérete, tartalom típusa) fájlok tartalma
Fájl feltöltés
Fájl feltöltés $_FILES változó tartalmazza a feltöltött fájlok meta-adatait: 2 dim. asszociatív tömb: 1. dim: input elem neve 2. dim: $_FILES['userfile']['name']: fájl név $_FILES['userfile']['type']: MIME típus $_FILES['userfile']['size']: mérete byte-ban $_FILES['userfile']['tmp_name']: feltöltési neve $_FILES['userfile']['error']: hibakód (PHP 4.2-től)
Fájl feltöltés '; if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { echo "File is valid, and was successfully uploaded.\n"; } else { echo "Possible file upload attack!\n"; } echo 'Here is some more debugging info:'; print_r($_FILES); print ""; ?>
Biztonsági megfontolások: feltöltött script futtatás meglévő script futtatása nem feltöltött fájlokon
Postgres – nagy objektumok Adatbázisban tárolhatók nagy objektumok Oracle: LOB (CLOB, BLOB) mezőtípus PostgreSQL: mezőn kívüli LO MySQL: nincs igazán (text mezőtípussal helyettesíthető)
PostgreSQL saját függvényekkel kezeli, az adatbázis fájlrendszerszerűen használható lo_import, lo_export lo_open, lo_close lo_read, lo_read_all lo_unlink
Postgres – nagy objektumok Haszna: nagy mennyiségű, strukturálatlan adat tarolásra bináris adatok tárolására
Használata: létrehozás pl. lo_import -tal fájlból van oid-ja, amit táblában tárolni kell pg_lo_real_all() kiolvassa az egész lo-t és a PHP script kimenetére másolja
Objektum orientált programozás PHP-ban PHP 4: kezdetleges OOP nyelvi elemek fejlesztési zsákutca
PHP 5: más OOP nyelvekből átvett nyelvi elemek, de PHP 4 örökség nem igazi OOP nyelv!
Osztályok, objektumok Osztály definició: class class SimpleClass { // member declaration private $var = 'a default value'; // method declaration public function displayVar() { echo $this->var; } }
Példányosítás Csak dinamikus példányosítás van: $a = new SimpleClass(); // echo $a->$var ; $a->displayVar();
Referencia alapján hivatkozhatóak a tagok. Objektumok megszüntetése: csak automatikusan: a referencia nélküli objektumok megszűnnek a program befejeződésekor
Automatikus betöltés Az osztály kódját példányosítás előtt be kell tölteni (include-olni a forrást). Lehet automatikusan is: function autoload($class_name) { require_once $class_name . '.php'; }
Következetes kódolást és névkonvenciót követel meg!
Konstruktor Osztálynak lehet construct() metódusa. Példányosításkor meghívódik, paramétert kaphat. Nincs implicit szülő konstruktor hívás. Explicit hivatkozás: parent:: construct(); PHP 4 örökség: ha nincs construct() metódus, akkor meghívódik az osztálynévvel egyező nevű metódus!
Destruktor Osztálynak lehet destruct() metódusa. Objektum megszüntetése előtt hívódik, nincs paramétere. Nincs implicit szülő destruktor hívás. Objektumok csak a program leállásakor szűnnek meg.
Láthatóság Tagok láthatóságát szabályozhatjuk: public, protected, private Nem látható tag hivatkozása fatális hiba. Örökölt, szülőben privát tag nem definiáltnak tűnik.
Láthatóság class MyClass { public $public = 'Public'; protected $protected = 'Protected'; private $private = 'Private'; function printHello() { echo $this->public; echo $this->protected; echo $this->private; } } $obj = new MyClass(); echo $obj->public; // Works echo $obj->protected; // Fatal Error echo $obj->private; // Fatal Error $obj->printHello(); // Shows Public, Protected and Private
Láthatóság
class MyClass2 extends MyClass { // We can redeclare the public and protected method, but not private protected $protected = 'Protected2'; function printHello() { echo $this->public; echo $this->protected; echo $this->private; } } $obj2 = new MyClass2(); echo $obj2->public; // Works echo $obj2->private; // Undefined echo $obj2->protected; // Fatal Error $obj2->printHello(); // Shows Public, Protected2, Undefined
Scope operátor (::) Célja: osztálytagok és konstansok hivatkozása szülő osztály hivatkozás parent::tag
Osztálytagok Minősítés: static Nem példányosul, hivatkozni csak osztály alapján lehet. Nem hivatkozhat nem statikus tagra. Csak a definiáló osztályban hivatkozható. Nem definiálható felül, csak elfedhető!
Konstansok osztályban Minősítés: const Változónévben nem szükséges a $ jel. Inicializálása csak konstans kifejezéssel. Nem adható neki érték. Hivatkozása az osztálytaghoz hasonló.
Absztrakt metódus és osztály Absztrakt metódus: nincs törzse csak metódus deklaráció nem lehet osztálytag minősítése: abstract
Absztrakt osztály: nem példányosítható ha van absztrakt metódusa, akkor az osztálynak is absztraktnak kell lenni minősítése: abstract
Interfészek Osztályhoz hasonló definició az interface kulcsszóval. Publikus metódusokat deklarál. Megvalósíthatja osztály az implements kulcsszó után felsorolt interfészeket kell megvalósítania az osztálynak. Interfészben deklarált, meg nem valósított metódus az osztályban absztraktnak látszik! Azonos nevű metódus deklarációt tartalmazó interfészek nem valósíthatók meg egyidejűleg.
Exception osztály konstruktor kivételével minden final csak kiegészíteni lehet.
Kivétel destruktorból nem dobható. Konstruktorból dobott kivétel automatikus betöltés esetén fatális hibát okoz.
Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Webalkalmazások Java EE környezetben A Java: programozási nyelv programozói interfész (API) platformfüggetlen futtató környezet (JVM)
Célterületi: általános célú szoftvertechnológia: SE mobil eszközök alkalmazáskörnyezete: ME nagyvállalati alkalmazáskörnyezet: EE
Az ME és EE az alkalmazáskörnyezetnek megfelelő kiegészítése az SE elemeinek. Minden az SE elemekre épül!
Fejlesztési kihívások: gyors fejlesztési ciklusok olcsó fejlesztés kis erőforrásigény
Nagyvállalati alkalmazások Az ideális fejlesztőkörnyezet tulajdonságai: robosztus, de nem bonyolult programozási nyelv kiterjedt és konzisztens általános célú API elosztottságot biztosító futtatókörnyezet komponensmodell független az alkalmazás futtatókörnyezetétől integrált szolgáltatások: tranzakcióvezérlés, perzisztencia, szolgáltatási csatornák, kommunikáció, erőforráshozzáférés, stb. nyílt szabványok olcsó, gyorsan elsajátítható fejlesztőkörnyezet
Java EE Java SE alapú Alkalmazásmodell: elosztott komponensalapú többrétegű (4)
Futtatókörnyezet: nyílt specifikáció komponens konténerek konténer szolgáltatások egységes interfésszel
Csomagolt alkalmazások
Java EE Alkalmazásmodell rétegek: EIS: adatbázisok, háttérrenszerek Business Tier: alkalmazáslogikai komponensek Web Tier: megjelenítési és szolgáltató komponensek Client Tier: alkalmazások kliens és/vagy web böngésző
Java EE Konténer típusok: Java EE server: EJB és Web konténer EJB konténer: perzisztens entitás objektumok, munkafolyamat komponensek, üzenetvezérelt komponensek Web konténer: JSP lapok, Servletek esetleg JavaBean komponensek Alkalmazás kliens konténer: alkalmazások Applet konténer: kisalkalmazások
Java EE – web tier Webalkalmazás: dinamikus web/alkalmazás szerverkiegészítés Két alkalmazástípus: Megjelenítés-orientált Szolgáltatás-orientált
Java EE – web tier 1.kérés a konténerhez 2.megfelelő komponens metódus hívás 3.JavaBean hívás 4.erőforrás hozzáférés 5.válasz készítés 6.válasz küldés
Java EE – web tier Servlet: Java nyelven írt osztály, mely kérések dinamikus kiszolgálását végzi JSP: szöveg dokumentum, mely servletként fut le. Statikus tartalom előállítása természetesebben történik. Servelt és JSP felcserélhető, de mindkettőnek megvannak az előnyei: Servlet: webszolgáltatás végpont, megjelenítő alkalmazás vezérlésfeldolgozója JSP: jelölt szöveg előállítására (HTML, SVG, XML, WML, stb.)
Java EE – web tier További technológiák: JSTL: JSP jelöléskészlet kiegészítésére JSF: MVC alkalmazásmodell megvalósítása
Mindennek az alapja: Java Servlet
Java EE – web tier A web konténer szolgáltatásai: kérés dispatcher biztonság menedzser konkurrencia menedzser életciklus menedzser erőforrás menedzser
Webalkalmazás telepítése (deploy) alkalmazás csomag (.war): program, statikus tartalom, konfiguráció (deployment descriptor) az alkalmazásszerver (web konténer) menedzsment felületén történik
Webalkalmazás Életciklus 1.web komponens kódjának fejlesztése 2. deployment descriptor fejlesztése 3. web komponensek és segédosztályok fordítása 4. alkalmazáscsomag készítése (opcionális) 5. telepítés a webkonténerbe 6. használat (web böngészővel)
Web erőforrások: web komponensek, statikus állományok együttese Web modul: web erőforrások legkisebb telepíthető és használható egysége
Webalkalmazások Web modul tartalma: web erőforrások szerver oldali erőforrások: adat és kapcsolati komponensek (JavaBean) alkalmazás konfiguráció alkalmazás kiegészítések (TagLibrary)
kliens oldali erőforrások: Java Applet programok kódja Applet segédkomponensek
A modul tartalma rögzített szerkezetű jegyzékstruktúra, melynek csúcsa az “assembly root”.
Webalkalmazások A modul jegyzékstruktúrája kötött, case sensitive. A modul egyetlen állományba jar tömörítéssel, .war végződéssel tárolódik. Fájlnév = alkalmazásnév
Webalkalmazások A Java EE 5 -től az erőforrás leírók előállítása annotációk útján automatizált. Erőforrások JNDI név alapján érhetők el. A konténer szolgáltatót kapcsol a névhez. A konténer gondoskodik: kapcsolat kötegelésről kapcsolat perzisztenciáról terhelésmegosztásról
JDBC kapcsolatok létrehozását a konténer SecurityManager-e korlátozhatja és rugalmatlanná teszi az alkalmazást.
Java Servlet Java nyelven írt osztály. Megvalósítja a javax.servlet.Servlet interfészt. Kérésekre válaszol, általában HTTP -n. Fejlesztéshez a GenericServlet osztályt terjesztjük ki. HTTP szervlet fejlesztéshez a HttpServlet osztályt: doGet, doPost, stb. metódusokat biztosít HTTP kérés, válasz, munkafolyamat és cookie támogatást biztosít
Java Servlet Életciklus: egy servlet-re leképzett kérés kiszolgálásakor a konténer: Ha még nem létezik a servlet a konténerben: betölti az osztályt példányosítja azt inicializálja a servlet-et, az init metódus meghívásával
meghívja a service metódust és átadja a kérés és a válasz interfészt megvalósító objektumokat.
A konténer megszüntetheti a servlet-et: meghívja a destroy metódusát eldobja a referenciát, a gc-re bízza a takarítást
Java Servlet A Web kontextus: a servlet példány számára rendelkezésre álló futásidejű eszközök: nemzetköziesítés paraméterei erőforrás hozzárendelések objektum értékű attribútumok naplózási lehetőségek
minden servlet lekérdezheti kontextusát a getServletContext metódussal a kontextus, nem része a servlet-nek
Java Servlet Életciklus események figyelhetők, reagálhatnak komponensek rá: eseményfigyelőt és kezelőosztályt kell írni figyelhető események: web kontextus létrehozás, megszünés, attribútum változás munkafolyamat események kérés
Adatok megosztása: JavaBean példányokkal történik Scope: web context, session, request, page
Java Servlet Kiszolgáló metódus írása: HTTP servlet esetén dispatcher a HTTPmetódusnak megfelelő nevű taghoz minden kérést egyetlen servlet példány szolgál ki, a service metódust külön szálon hívja a konténer
Java Servlet Kérés információk kinyerése: a Service metódus első paramétere egy ServletRequest interfészt megvalósító objektum minden információt tartalmaz a kérésről paramétereket a getParameter() metódussal név alapján kérjük le HTTP servlet esetén, az interfész a HttpServletRequest
Java Servlet Válasz előállítása a Service metódus második paraméterea ServletResponse (HttpServletResponse) a getWriter() metódus visszaadja a servlet kimeneti adatfolyamát bináris adatok küldésére a getOutputStream() által adott ServletOutputStream objektumot használjuk a setContentType() metódussal beállítjuk a válasz MIME típusát a kimenet pufferelhető: setBufferSize()
Java Servlet Kérés továbbítása: a RequestDispatcer objektummal getRequestDispatcher(“URL”) include() metódus másik erőforrás beágyazása forward() metódus a kiszolgálás vezérlésének átadása minden esetben a request és response objektumok átadása szükséges
Java Servlet Munkamenet (session) kezelés: a konténer automatikusan kezeli a request.getSession() visszaad egy HttpSession interfészt megvalósító objektumot a session attribútumok névvel azonosított objektumok [get|set]Attribute a session események figyelhetők: HttpSessionBindingListener HttpSessionActivationListener
session timeout: [get|set]MaxInactiveInterval() invalidate() metódus a session megszüntetésére
Java Servlet HTTP-Cookie kezelés: Cookie osztály reprezentálja response.addCookie() metódus küldi request.getCookies() metódus adja vissza a kapott Cookie-k tömbjét
Java Servlet Java osztály nem final, nem abstract javax.servlet.Servlet interface-t implementálja
A GenericServlet implementálja az interfészeket log() metódust ad hozzá általános célú servlet váz nincs (L7) protokollhoz kötve
Java Servlet javax.servlet.http.HttpServlet osztály kiterjeszti a GenericServlet osztályt L7 protokollhoz specializált servlet metódusok: doDelete(), doGet(), doOption(), doPost(), doTrace(), getLastModified(), service() a HTTP-metódushoz tartozó default kiszolgáló metódus “Bad Request” választ ad a service() dispatcher funkciót lát el kiterjesztése többnyire a doXXX() metódusokat definiálja felül
Web Technológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Java Server Pages - JSP JSP technológia: szöveg alapú dokumentumok előállítása tartalmaz statikus és dinamikus szakaszokat jelölő nyelv szerver oldali objektumok elérésére lehetőség a jelölő nyelv kiterjesztésére
JSP lap tartalma: statikus szakaszok: szöveg (lehet strukturált is, pl. HTML, XML, WML, stb.) dinamikus tartalmat előállító JSP elemek
JSP lapok (javasolt) tárolása: .jsp : teljes JSP oldal .jspf : egy JSP oldal részlete
Java Server Pages - JSP JSP elemek: feldolgozásra kerülnek dinamikus tartalommal helyettesítődnek típusai: scriptlet: <% … %> direktíva: <%@ directive … %> standard JSP elem: <jsp:element ...>… egyedi JSP elem: <prefix:element ...>... JSP kifejezés: ${ … }
JSP lapok életciklusa A JSP lap, mint web komponens: kéréseket szolgál ki, servlet-ként elő feldolgozás: servlet forráskód előállítása a jsp szöveg alapján fordítás: server osztály lefordítása kérés kiszolgálás: a servlet életciklusa szerint
JSP lapok életciklusa Az elő feldolgozás menete: Java osztály előállítása sablon alapján direktívákkal befolyásolható statikus szakaszok alapján output utasítások generálása scriptlet kódjának átemelése a servlet forrásba kifejezések átadása a JSP kifejezés kiértékelőnek JSP elemek helyén meghívódik az azokat megvalósító osztály megfelelő metódusa
Statikus tartalom előállítása Szükséges beállítások: Milyen MIME típus lesz a statikus tartalomból? Milyen kódolású lesz? Milyen a JSP statikus tartalmának kódolása?
A kódolást az elő feldolgozó végzi, direktívák alapján: <%@ page contentType="text/html; charset=UTF-8" %> <%@ page pageEncoding="UTF-8" %> lehet egyetlen page direktívába is írni.
Dinamikus tartalom előállítása Java objektumok metódushívásai eredménye képen jön létre. implicit objektumok: létrehozásukról a servlet sablon gondoskodik (pl. pageContext, param, paramValues, cookie, stb.) explicit objektumok: scriptlet kódban létrehoztuk, később használhatjuk
JavaBean -ek használata Egy HTML űrlap feldolgozása:
JavaBean -ek használata package csomag; public class peldaBean { private int evszam; private String nev;
public void setEvszam(final int evszam) { this.evszam = evszam; } public String getNev() { return new String(nev); }
public peldaBean() { evszam = 2008; }
public void setNev(final String nev) { this.nev = new String(nev); }
public int getEvszam() { return evszam; } }
JavaBean -ek használata Létrehozzuk a JavaBean-t és felöltjük az űrlap adataival <jsp:useBean class="csomag.peldaBean" id="szemely" scope="session"> <jsp:setProperty name="szemely" property="*"/>
Unified Expression Language (EL) A JSP specifikációban definiált leíró nyelv Célja, dinamikusan kiértékelt kifejezések beillesztése a JSP szövegbe. Elemek attribútumába való behelyettesítéshez szükséges. pl. ...
Explicit és implicit objektumok hivatkozhatók
Implicit objektumok pageContext: a lap végrehajtási kontextusa, további objektumok elérését szolgálja servletContext: a lapból generált servlet kontextusa session: a session objektum request: a kérés objektum response: a válasz objektum
Webtechnológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
A Web fejlődése 1989: tudományos közlemények hivatkozási hálója '90-es évek első fele: széleskörű fejlődés '90-es évek második fele: komolyodó üzleti, pénzügyi alkalmazások felülete Hogyan tovább?
Célok és akadályok A Web felhasználói felület, de egyedi viselkedésű állapot mentes megjelenítő felület minden eseményt kommunikáció követi minden kommunikáció eredménye egy új dokumentum megjelenése
Igény a Web, mint alkalmazás felület kiterjesztése: új szemlélet új technológiák
Új elnevezés: „Web 2.0” (O'Reilly)
Új szemlélet A Web csupán felület, a tartalmat a közösség (felhasználók) szolgáltatáják: pl. iwiw, youtube, Google AdSense, Flickr, BitTorrent, Wikipedia, stb.
Átalakul a web használata: személyes weblap --> blog Britannica on-line --> Wikipedia mp3.com --> Napster Akamai --> BitTorrent directory --> tagging hírcsoport --> RSS feed
Új technológiák Üzemeltetési: hoszting technológiák storage technológiák
Fejlesztési: egységes fejlesztési módszertanok bevezetése (pl. MVC)
Aszinkron webalkalmazás Célja, megszüntetni a webalkamazás eseménykezelésének és megjelenítésének szinkronitását. Megjelenítés és kommunikáció egymástól független megoldása. Lehetséges megvalósítás: rejtett IFRAME tartalmának újratöltése JavaScript segítségével a rejtett keret tartalmának felhasználása a megjelenített tartalom változtatására.
AJAX Asynchronus Javascript And Xml Nem igazán új technológia, csupán gyűjtőnév. XMLHTTPRequest JavaScript osztály tetszőleges tartalmú (pl. XML) kérést küld aszinkron küldés, fogadás JavaScript változtatja a megjelenített oldalt
Hátrányai: böngésző integráció („Vissza” gomb!) válaszidő probléma keresőrendszerek felderítése („deep web”) JavaScript függőség (szabvány hiánya) Web statisztikák
AJAX és PHP kapcsolat több fejlesztőkörnyezet is nyújt támogatást AJAX alkalmazások fejlesztéséhez: XAJAX: PHP oldal: include-oldja az xajax.inc.php -t xajax osztály példányosítása függvények regisztrálása függvények implementálása xajaxResponse objektum visszaadása
Webes keresőrendszerek A keresés lehetősége egyidős a hipertext ötlettel. Keresés a weben: Nagyon nagy adatmennyiség: nagyon sok olda nagyon gyakori változás sok új oldal
adatbázis jellegű keresés igénye hipertext tartalom: többnyire szöveg linkek a szövegben
Webes keresőrendszerek Adatbányászat: nagy adatmennyiségek strukturált adatok rejtett összefüggések felderítése
Webes keresőrendszerek Minőségi mérőszámok: pontosság (precision): releváns válaszok aránya válasz dokumentumaihoz felidézés (recall): kiválaszott dokumentumok aránya a releváns dokumentumokhoz tartalomegyezés (exhaustivity): kiválasztott dokumentumok és a keresőkifejezés egyezésének mértke kifejezőerő (power): a leíró kulcsszavak szelektivitásának és hosszának aránya
Webes keresőrendszerek A keresőmotor felhasználói igényei: széleskörűség: minden fontos weboldalt megtaláhasson naprakészség: az index legyen aktuális, kövesse nyomon a web változásait randsorolás: a lekérdezés által kiválasztott dokumentumok legyenek rangsorolhatóak relevanciájuk szerint megjelenítés: eredmények megjelenítése legyen lényegre törő, informatív és használható
Webrobot - begyűjtő Hármas szerep a web kapcsolatrendszerének felderítése dokumentumok letöltése indexelésre indexelt dokumentumok ismételt letöltése
Teljes letöltés lehetetlen, a web mérete végtelennek tekinthető. A robotok korlátos erőforrásokat igényelnek, működésüket szabályozni kell.
Webrobot - begyűjtő Szabályozó elvek: kiválasztási elv (selection policy): mely dokumentumok töltsük le? újralátogatási elv (re-visit policy): melyik dokumentumot kell újra letölteni? udvariassági elv (politeness policy): milyen hatást gyakorolhat a robot a webre? párhuzamos feldolgozási elv (parallelization policy): párhuzamosan dolgozó robotok összehangolása
Webrobot - begyűjtő kiválasztási elv: minden dokumentum tartalmaz linkeket minden link újabb dokumentumot tár fel Melyeket érdemes letölteni? Header-ből kiderül a tartalom típusa, nem szöveges tartalmat nem érdemes
Headerek letöltésének csökkentésére vizsgáljuk az URL-t
Aratórobot begyűjti a csonkolt URL-ek dokumentumait is
relevancia alapú kiválasztás
Webrobot - begyűjtő Újralátogatási elv: az index naprakészsége múlik rajta nagyobb index --> több újralátogatás több újralátogatás --> kevesebb új dokumentum az újralátogatási arány igen érzékeny paramétere a keresőrendszernek újralátogatás aging algoritmus alapján: uniform: minden dokumentum egyformán öregszik arányos: dokumentumonként hangolt újralátogatási gyakoriság
Webrobot - begyűjtő Udvariassági elv: a robot sokkal gyorsabban olvas, mint az ember a robot nagyon „kíváncsi” két alapelv: a robot ne okozzon jelentősen nagyobb terhelést egy webszerveren, mint egy ember a weblap gazdájának legyen lehetősége a robotot befolyásolni (robots.txt, HTML fejrész)
Webrobot - begyűjtő Párhuzamos feldolgozási elv: több robot --> nagyobb letöltési teljesítmény elosztott robotok --> elosztott hálózati terhelés többes letöltés veszélye a letöltendő URL-eket hozzá kell rendelni a robotokhoz: dinamikus hozzárendelés statikus hozzárendelés
véletlen szörföző modell kiválaszt egy lapot követheti a lap valamelyik linkjét, vagy új lapra ugorhat
Deep web – a mély háló A „mély háló” (deep web): közvetlenül el nem érhető dokumentumok sziget dokumentumok lekérdezés eredményeként előállított dokumentumok dinamikusan (AJAX alkalmazásban) előállított dokumentumok
Hagyományos robot számára elérhetetlen! Keresőrendszerekben nem kereshető!
Ajánlott irodalom Tikk Domonkos (szerk.) Szövegbányászat, Typotex kiadó, 2007
Webtechnológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Java Server Faces Szerver-oldali UI komponens keretrendszer a UI megjelenítése webalkalmazásban JSF összetevők: API a UI komponensek szerver-oldali leképzésére JSP TagLib -ek (core, html) a UI komponensek JSP-be való beillesztéséhez és a szerver-oldali objektumokhoz való kötéshez
Közelíti a webalkalmazás fejlesztést a hagyományosnak tekintett MVC módszertanhoz.
Java Server Faces Webalkalmazások UI létrehozásához támogatja: a „Drop-in” komponensek kezelését grafikus IDE funkciók támogatása
UI komponens események kötése szerver-oldali kezelőkhöz UI komponens tartalom (adatok) kötése szerveroldali adat-objektumokhoz (JavaBeans) újrahasznosítható és bővíthető UI komponensek UI állapot mentés és visszaállítás lehetősége
Ezek mind szokásosak GUI fejlesztésben (pl. Swing)
JSF felhasználói felület
JSF UI létrehozásának menete: a kérést egy jsp oldal dolgozza fel a UI (myUI) megvalósító objektumaira hivatkozik a JSP eseményeket köt az UI objektumokhoz kommunikációról belsőleg gondoskodik (pl. AJAX) a UI objektumok megjeleníthetők a böngésző által ismert formában (HTML)
JSF felhasználói felület Előnyei: függetleníti a megjelenítést és a viselkedést függetleníti az alkalmazás logikát a megjelenítéstől (vö. MVC) felépítése egyezik a megszokott UI technológiákkal (pl. swing, mfc, .net, motif, Qt, stb.) nem korlátozódik egyetlen leíró nyelvre sem (HTML független) gazdag környezet komponens állapotok és adatok kezelésére, felhasználói bemenet ellenőrzésre és eseménykezelésre
JSF alkalmazások Egy JSF alkalmazás a következőkből áll: JSP lapok halmaza JavaBean-ek halmaza konfiguráció deployment leíró (web.xml) egyedi objektumok (validátorok, konverterek, figyelők, stb.) egyedi JSP elemek halmaza
Webtechnológiák Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
PHP: interpretált célnyelv kiterjedt API fél-professzionális megoldás
Egyéb: Oracle AS .Net: ASPX Python alapú: pl. Zope
Google Web Toolkit Nyílt-forrású AJAX keretrendszer Java nyelv alapú Hatékony fejlesztési és debug lehetőségek Nem GUI keretrendszer (vö. JSF) Webalkalmazások segédkomponenseinek (widget) előállítását szolgálja Két üzemmód: hosted: Java bytekódként fut (plug-in kell) web: tiszta HTML + JavaScript megvalósítás
Google Web Toolkit Főbb komponensei: Java-to-JavaScript Compiler: Java forrást képes JavaScript-re fordítani GWT Hosted Web Browser: GWT alkalmazások futtatására alkalmas böngésző (natív JVM) JRE emulation library: JavaScript implementációja a Java API egyes részeinek GWT Web UI class library: előkészített UI komponensek gyüjteménye
Google Web Toolkit Tulajdonságai: újrahasznosítható UI komponensek egyszerűsített RPC böngésző history kezelés debug lehetőség JUnit integráció (teszteléshez) böngészők különbözőségeinek feloldása egyszerű többnyelvűség letöltésre optimalizált és cache-elhető JavaScript kód előállítása (az olvashatóság rovására)
Webtechnológiák - összefoglalás Felhasználói keretrendszerek számos, előre elkészített funkcionalitású webalkalmazás gyenge együttműködés
komplex funkcionalitású tartalomkezelő rendszerek gyenge együttműködés
portlet alapú keretrendszerek portlet: egy komplex funkcionalitású portál egy modulja, mely hordozható
Tartalomkezelő rendszerek Keretrendszer „tartalom” kezelésének elősegítésére tartalom: pl. minden olyan információ vagy tapasztalat, mely értékes lehet egy adott célcsoport számára
Webes tartalomkezelők Specializált tartalomkezelők Blog lehet személyes vagy tematikus vezércikk alapú hozzászólás támogatása
Wiki enciklopédia jellegű egymásra hivatkozó szócikkek gyűjteménye kiemelt keresési funkcionalitás kollaboráció alapú szerkesztés lehetősége
Webes tartalomkezelők Általános célú tartalomkezelők szöveg (hypertext), képek, multimédia tartalom tárolására, szerkesztésére, verziókövetésére, publikálására nyújt lehetőséget sablon alapján biztosítja a megjelenítést számos kész termék: Typo3, OpenCMS, Mamboo, Drupal, jAPS, esettanulmány: OpenCMS (tanszéki Web)
ECM – Nagyvállalati tartalomkezelés Célja, nagyvállalati – de legalább több személy – munkafolyamatainak támogatása Szolgáltatásai: naptár: egyéni- és csoporteseményekkel címtár: kapcsolatok kezelésére levelezés: gyakran MUA-ként erőforrás gazdálkodás: eszköznyilvántartás, foglalások, ütemezések projekt tervező: projektek kezelése, ütemtervezés, munkacsomagok kezelése, mérföld kövek, stb.
ECM – Nagyvállalati tartalomkezelés TTS: gyakran bugtrack mintára, de kiterjesztve egyéni ToDo listák: feladatok kezelése, nyomon követése Dokumentumtár: egyéni és közös dokumentumok tárolása, verziókövetése tudástár: egyfajta zártkörű wiki hírek, események
Mindezt gyakran webfelületen hozzáférhető Számos alkalmazás: Lotus Notes, eGroupware, GroupWise
DAM, MAM (?) Digital Asset Management: digitális eszköznyilvántartás tulajdonképpen az ECM, dokumentum, email és egyéb szogláltatásai
Media Asset Management: a DAM része, többnyire audiovizuális tartalom kezelésére
Folyamat modellek (Petri hálók)
Alap folyamatábra modell
start stop feldolgozás IO
elágazás
vezérlési folyam
-
Vezérlés menetét mutatja Programkód orientált Alacsony szintű Elemi funkciók Általános eszköz elemei : - szekvencia - elágazás - ciklus
Alap folyamatábra modell start tojás, tej, cukor
záp?
I
kuka
stop
N összedolgoz
habos?
N
sütőedénybe tesz
odaégett?
működés? adatok ?
Petri hálók
A modell szerepe: - vezérlési szerkezet, folyamatok struktúráját adja meg - időbeliséget, állapotváltozást is követni tud - párhuzamos, kunkurrens folyamatokat kezel - működési szabályok adhatók meg - matematikai megalapozottság - determinisztikus vagy sztochasztikus működés
Petri háló szerkezete:
P = (H,T, E, J, A, S, K) H : helyek (elemi állapotok) T : tranzíció (helyek közötti átmenetek) E: élek (hely-tranzíció vagy tranzício-hely) J: tokenek, jelölő elemek A: háló állapota (mely token mely helyen van) S: élek súlyfüggvénye K: háló kezdőállapota
Petri háló állapota
Megadja a tokenek eloszlását (eloszlás vektor) a helyekre vonatkozólag. A vektor komponense értéke a tartalmazott tokenek darabszáma
1 0 1 0 0 2 0 1
Petri háló dinamikája
Megadott feltételek esetén a tokenek eloszlása megváltozhat, ha erre a tranzíciók lehetőséget adnak Ez a folyamat a tüzelés Tüzelés szabályai: - akkor lehet feltöltött egy tranzíció, ha minden forrásállapotában legalább annyi token van, emennyi az oda vezető él súlya - egy feltöltött tranzíció tetszőlegesen tüzelhet vagy passzív maradhat - a tüzelés során minden forrás helyen csökken a tokenszám az élsúllyal és minden célhelyen nő a tokenszám a bevezető él súllyával
