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. 108. Tel: 2108

Mai program ●

Weboldalak dinamikus előállítása – – –

●

JavaScript – – –

●

Nyelvi elemek HTML események JavaScript DOM

CGI – – –

●

Alapfogalmak Kliens oldali dinamikus oldal Szerver oldali dinamikus oldal

Modell Interfész Implementációs lehetőségek

HTML űrlapok és feldolgozásuk

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, SpiderMonkey, 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 Ez egy nagy dokumentum, sok képpel, melyek betöltése időigényes! …

További JavaScript objektumok ●

Window: – –

●

Navigator: – –

●

A megjelenítő képernyő tulajdonságait hordozza

History: –

●

Böngészőt reprezentáló objektum A JavaScript runtime hozza létre

Screen: –

●

A böngésző megjelenítő területe A DOM hierarchia gyökere

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

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

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

Teljesítmény ●

Minden kérést új processzben futó kiszolgáló program szolgál ki. – –

●

Minden kiszolgáló processz a webszervert működtető gépen fut. –

●

A kiszolgáló program befejeződésével a processz megszűnik. Új processzek létrehozása időigényes.

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

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 ●

–

Könnyű túlterhelni a gépet ●

–

A SU-CGI igen időigényes

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

●

PHP, CGI kiszolgálóként – – –

●

Elfogadható teljesítmény Nincs terhelésmegosztás Nincs védelem 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.

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

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

Űrlap adatok feldolgozása ●

Speciális lehetőség: –

●

Szerver oldali feldogozó program által: – – –

●

Beviteli elemek értékének kinyerése Adatellenőrzés méretre, típusra! Tartalom értelmezése

Veszély: –

●

action=”mailto:<email cím>”

Egy feldolgozó bárhonnan kaphat bemenetet, nem csak a hozzá tartozó űrlaptól!

Alapelv: „A felhasználói bemenet megbízhatatlan!”