Web Technoló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)

Átírás

1 Web Technoló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 Tel: 2108

2 Mai program Weboldalak dinamikus előállítása Alapfogalmak Kliens oldali dinamikus oldal Szerver oldali dinamikus oldal JavaScript Nyelvi elemek HTML események JavaScript DOM CGI Modell Interfész Implementációs lehetőségek HTML űrlapok és feldolgozásuk

3 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

4 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)

5 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ő

6 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, SpiderMonkey, AppleScript

7 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.

8 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.

9 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

10 Document Object Model - DOM

11 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 <img src= kep.jpg onclick= self.src='kep2.jpg' />

12 Példa <body onload= document.getelemetbyid('hidepage').style.visibility= 'hidden' > <div id="hidepage">loading...</div> Ez egy nagy dokumentum, sok képpel, melyek betöltése időigényes! </body>

13 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

14 Példa kép átméretezés <html> <head> <script type="text/javascript"> function changesize() { document.getelementbyid("compman").height="250" document.getelementbyid("compman").width="300" } </script> </head> <body> <img id="compman" src="compman.gif" width="107" height="98" /> <br /><br /> <input type="button" onclick="changesize()" value="change height and width of image"> </body> </html>

15 Példa új oldal előállítása <html> <head> <script type="text/javascript"> function createnewdoc() { var newdoc=document.open("text/html","replace"); var txt="<html><body>learning about the DOM is FUN!</body></html>"; newdoc.write(txt); newdoc.close(); } </script> </head> <body> <input type="button" value="open and write to a new document" onclick="createnewdoc()"> </body> </html>

16 Példa új dokumentum több keretben <html> <frameset id="myframeset" cols="50%,50%"> <frame id="leftframe" src="frame_src.htm"> <frame id="rightframe" src="frame_a.htm"> </frameset> </html> <html> <head> <script type="text/javascript"> function newsrc() { parent.document.getelementbyid("leftframe").src= " parent.document.getelementbyid("rightframe").src= " } </script> </head> <body> <a href= # onclick="newsrc()">link</a> </body> </html>

17 Példa üzenetablak megjelenítés <html> <head> <script type="text/javascript"> function disp_alert() { alert("i am an alert box!!") } </script> </head> <body> <input type="button" onclick="disp_alert()" value="display alert box" /> </body> </html>

18 Példa input ablak <html> <head> <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?") } } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="display a prompt box" /> </body> </html>

19 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ó)

20 CGI környezet Http kérésből származó változók QUERY_STRING CONTENT_LENGTH, CONTENT_TYPE HTTP_USER_AGENT REMOTE_ADDR REQUEST_METHOD REMOTE_USER Server paraméterek SERVER_NAME, SERVER_PORT SCRIPT_NAME DOCUMENT_ROOT, PATH_INFO

21 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 <HTML><HEAD> <TITLE>output of HTML from CGI script</title> </HEAD><BODY> <H1>Sample output</h1> What do you think of <STRONG>this?</STRONG> </BODY></HTML>

22 CGI implementáció Tetszőleges futtatható program lehet (C/C++, Pascal, stb.) Speciális feladat a környezeti változók és a bemenet kódolásának kezelése. Egyszerűsítés: Függvénykönyvtárak (pl. libcgi) Scriptnyelvek segédkönyvtárral (pl. perl) Célnyelvek (pl. php)

23 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

24 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. Az alkalmazás webszerver függő. 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

25 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

26 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 Alkalmazásszerver használata Integrált szolgáltatásrendszerű futtató környezet Policy alapú biztonsági szabályozás Terhelésmegosztás, nagy rendelkezésreállás Számos termék: Java EE, JBoss, Oracle AS, Zope, stb.

27 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

28 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.

29 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ő. POST metódussal: A kért URL a form action értéke A http kérés fej tartalmaz content-type és contentlenght 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.)

30 Űrlap adatok feldolgozása Speciális lehetőség: action= mailto:< 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!