Web Technológiák

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
Adminisztratív tudnivalók
Tárgy címe: Web technológiák

Neptun kód: GEIAL235N, GEIAL235L
Jegyző: Répási Tibor, konz.: péntek 9:00-11:00
Ütemterv, jegyzetek, fóliák letölthetők
http://www.iit.uni-miskolc.hu/iitweb/opencms/users/repasit/Webtech/
Ütemterv: 31k
Lezárás: aláírás, kollokvium (5 kredit)
házi feladat (kb. 60 óra), vizsga (í + sz)
Záróvizsga tárgy (egyes szakirányokon) !!!
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
Hipertext dokumentumok
Dokumentumok szerkezetét, használatát,

reprezentációját, tárolását modellezzük.
Szerkezeti szemléletű modellek
Hipertext Absztrakt Gép (HAM – Hypertext
Abstract Machine)
Dexter hipertext modell
Dinamikus (használati) modellek
Trellis modell
A World Wide Web hipertext modellje
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 ST  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: Tim-

Berners 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.
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ő)
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: <html> … </html>, <br/>
elemek egymásba ágyazhatók (kötött struktúra!)
attribútumok: <body id=”torzs”> … </body>
Példa HTML dokumentum
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>WWW Oldal</title>
</head>
<body>
<div align="center">
Ez egy példa HTML dokumentumra.
</div>
</body>
</html>
HTML elemek
Kép beillesztése:
<img src=”url”/>
Hiperhivatkozás
<a href=”url”>link szöveg</a>
Megjegyzés

HTML elemek - keretek
A böngésző területet osztják fel

<frameset cols=”20%,*,20%”>
<frame name=”bal” src=”url1”/>
<frame name=”kozep” src=”url2”/>
<frame name=”jobb” src=”url3”/>
</frameset>
Hivatkozásokban:
<a href=”url”
target=”frame_name”>...</a>
spec. targetek: _blank, _parent, _self, _top
HTML elemek - táblázat
<table>
<tr>
<th>elso oszlop</th>
<th>második oszlop</th>
<th>harmadik oszlop</th>
</tr>
<tr>
<td>1. adat</td>
<td colspan=”2”>2-3. adat</td>
</tr>
</table>
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
<!DOCTYPE html PUBLIC "- body {

//W3C//DTD XHTML 1.1//EN" background-color: #AABBCC
"http://www.w3.org/TR/xhtml11/ }
DTD/xhtml11.dtd">
<html> div {
<link rel="stylesheet" font-family: arial, helvetica;
type="text/css" text-align: center
href="proba.css"/> }
<head>
<title>WWW Oldal</title> div.kiemelt {
</head> text-decoration: underline;
<body> font-weight: bold
<div>Ez egy példa HTML }
dokumentumra.</div>
<div class="kemelt">Kiemelt
szöveg.</div>
</body>
</html>
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
Referenciák, tutoriálok
www.w3schools.com
www.w3c.org
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 (?)
HTTP/1.1 -től lehetőség Keepalive
kapcsolatra!
Üzenetformátum
RFC2616
Kérés (egyszerű):
<method> <url> <crlf>
Teljes kérés:
<method> <path> <protocol version> <crlf>
*(message-header <crlf>)
<crlf>
[<content-data>]
Válasz:
kérés metódusától függ
Kérés metódusok
GET
dokumentum kérése
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
Státusz kódok
100-199: informális üzenetek
200-299: sikeresség
300-399: átirányítás
400-499: ideiglenes hiba
500-599: fatális hiba
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<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
Miskolc Egyetem

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
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)
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
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'”/>
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>
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
<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>
Példa – új oldal előállítása
<html>
<head>
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>
Példa – új dokumentum több
keretben
<html> <html>
<frameset id="myFrameset" <head>
cols="50%,50%"> <script type="text/javascript">
function newSrc()
<frame id="leftFrame" {
src="frame_src.htm">
parent.document.getElementById("leftFrame"
<frame id="rightFrame" ).src= "http://w3schools.com"
src="frame_a.htm"> parent.document.getElementById("rightFrame").
src= "http://google.com"
</frameset> }
</html> </script>
</head>
<body>
<a href=”#” onclick="newSrc()">link</a>
</body>
</html>
Példa – üzenetablak
megjelenítés
<html>
<head>
function disp_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="Display alert box" />
</body>
</html>
Példa – input ablak
<html>
<head>
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>
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
<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>
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 védelem
PHP, CGI kiszolgálóként
Gyenge teljesítmény
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
Feladatok:
Állapot mentes protokollon állapot nyilvántartás
Felhasználó azonosítása név/jelszó megadásával
Biztonságos kommunikáció (lopás, csalás)
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
1. Válasz:
HTTP/1.1 401 Unauthorised
WWW-Authenticate: Basic realm="Privát"
Content-Length: 311
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Error</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-1">
</HEAD>
<BODY><H1>401 Unauthorised.</H1></BODY>
</HTML>
2. Kérés:
Host: localhost
Authorization: Basic QwxhZGRpbjpvcGVuIHNlc2FtZQ==
2. Válasz:
HTTP/1.0 200 OK
Date: Sat, 27 Nov 2004 10:19:07 GMT
Content-Length: 10476
...
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
Challange/Response azonosítás
1. Kérés:
Host: localhost
1. Válasz:
HTTP/1.0 401 Unauthorised
Date: Sun, 10 Apr 2005 20:26:47 GMT
WWW-Authenticate: Digest realm="testrealm@host.com",
qop="auth,auth-int",
nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093",
opaque="5ccc069c403ebaf9f0171e9517f40e41"
Content-Length: 311
...
2. Kérés:
Host: localhost
Authorization: Digest username="Alladin",
realm="testrealm@host.com",
nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093",
uri="/dir/index.html",
qop=auth,
nc=00000001,
cnonce="0a4f113b",
response="6629fae49393a05397450978507c4ef1",
opaque="5ccc069c403ebaf9f0171e9517f40e41"
2. Válasz:
HTTP/1.0 200 OK
Date: Sun, 10 Apr 2005 20:27:03 GMT
Content-Length: 7984
HA1=md5(user+”:”+realm+”:”+passwd)
HA2=md5(query)
Response=md5(HA1+”:”+nonce+”:”+nc+”:”
+cnonce+”:auth:”+HA2)
A felhasználói adatbázis rekordja:

user:realm:HA1
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
Alkalmazási terület:
testreszabás, beállítások mentése
munkafolyamat követés (session-cookie)
HTTP-Cookie
Kérés:
GET /index.html HTTP/1.1
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
Miskolc Egyetem

Tel: 2101
Mai program
Webalkalmazás fogalma, tulajdonságai
Alkalmazások anatómiája
állapotok és átmenetek
párhuzamos folyamatok
Folyamatok modellezése
Johnson, Petri
Webalkalmazás állapota, állapotátmenetei
megvalósítási alternatívák
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á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)
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
Két típus:
instrukció folyam (code flow): Neumann-gép
adat folyam (data flow): adatfolyam-gép
Folyamat modellezés
Másik slideshow
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.
Megvalósítás:
Alkalmazásban egyedileg
Keretrendszerben
Munkafolyamat megvalósítás
Feladat:
Adatok tárolása az alkalmazás egyes állapotai
között
Független tranzakciók számára közös környezet
Megvalósítási lehetőségek:
Round-trip
Alkalmazás session, azonosító round-trip:
Session Cookie
Hidden input
URL rewrite
(ábrák!)
Biztonsági kérdések (session)
Hamisítás (fraud):
Session adatok védelme (alkalmazás session)
Azonosító lopás (theft):
Újrafelhasználás
Más munkafolyamatának ellopása
Alkalmazás túlterhelés (DoS)
Elvesztett session
Elhagyott session
Tömeges nyitás
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
Miskolc Egyetem

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
CGI programok gyűjteménye

1995: interpreterrel kombinálva PHP/FI -
Personal Home Page Tools, később PHP 2
1997 PHP 3: izraeli továbbfejlesztés, „PHP:
Hytertext Preprocessor” (megjelenés 1999)
2000 PHP 4: Zend Engine 1.0
2004 PHP 5: OOP kiegészítés
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 … ?>
PHP példa
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php echo '<p>Hello World</p>'; ?>
</body>
</html>
PHP példa 2 (kicsit értelmesebb)
<?php
echo $_SERVER['HTTP_USER_AGENT'];
?>
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:
<?php
$var = 'Bob';
$Var = 'Joe';
echo "$var, $Var"; // 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
<form action="action.php" method="post">

<p>Your name: <input type="text" name="name" /></p>
<p>Your age: <input type="text" name="age" /></p>
<p><input type="submit" /></p>
</form>
Hi <?php echo htmlspecialchars($_POST['name']); ?>.

You are <?php echo (int)$_POST['age']; ?> 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ó: <csoport>_<függvény>
Függvény csoportok:
session kezelés
adatbázis elérés (csoportok)
fájlkezelés
hibakezelés, naplózás
képkezelés
hálózatkezelés
stb.
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)
DBX Példa
<?php
foreach ($result->data as $row) {
$link = dbx_connect(DBX_PGSQL, "giediprime",
"users", "username", "password") echo "<tr>\n";
or die("Could not connect"); foreach ($row as $field) {
echo "<td>$field</td>";
$result = dbx_query($link, 'SELECT id, parentid, }
description FROM table');
echo "</tr>\n";
}
if (is_object($result) ) {
echo "</table>\n";
echo $result->rows; // number of records
}else {
echo $result->cols; // number of fields
exit("Query failed");
echo "<table>\n";
}
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

<form enctype="multipart/form-data" action=" URL " method="POST">

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

Send this file: <input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
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)
Tartalomkezelő függvények:
is_uploaded_file() : tényleg feltöltött fájl
move_uploaded_file() : feltöltött fájl tartalmának
mentése
Fájl feltöltés
<?php
$uploaddir = '/var/www/uploads/';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
echo '<pre>';
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 "</pre>";
?>
Fájl feltöltés
Korlátozások:
lehet tiltva
feltöltési méret korlátozás (def. 2M)
PHP script futásidő korlátozás
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
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
<?php
if (!isset($_GET['image']))
{
include('na.html');
exit(0);
}
$qstr = "select fname, upload, ftype, fcontent from arlista inner join docs
on arlista.arlista = docs.fid where arlista.id =
'".pg_escape_string($_GET['image'])."'";
$conn = pg_connect(„connstr”);
pg_query($conn, "BEGIN");
$res = pg_query($conn, $qstr);
if (pg_num_rows($res) != 1)
{
include('na.html');
pg_free_result($res);
exit(0);
}
$ftype = pg_fetch_result($res, 0, "ftype");

$fname = pg_fetch_result($res, 0, "fname");
$ftime = pg_fetch_result($res, 0, "upload");
$fcontent = pg_fetch_result($res, 0, "fcontent");
header('Content-type: '.$ftype);
header('Content-Disposition: attachment; filename="'.$fname.'"');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s", $ftime) . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
$lo = pg_lo_open($conn, $fcontent, "r");

pg_lo_read_all($lo);
pg_lo_close($lo);
pg_query($conn, "END");
pg_free_result($res);
?>
Tanszéki PostgreSQL
Regisztráció:
http://www-db.iit.uni-miskolc.hu
e-mail jön, ha elkészült a felhasználó
adatbázis:
host=giediprime.iit.uni-miskolc.hu port=5432
database=users
user=<ldap login>
password=<változó>
jelszó parancssori kliensről: LDAP jelszó
jelszó PHP scriptből: beállítható „alter user
<jelhnev> encrypted password 'jelszo';”
Tanszéki PostgreSQL
Kliens:
Linux labor: psql, pgadmin3
Sun labor: psql
Windows labor: pgadmin3
Objektum orientált programozás
PHP-ban
OOP alapelvek (ismétlés):
egységbezárás
adat rejtés
öröklés (kiterjesztés)
többalakúság (polymorphism)
üzenet vezérlés (message-passing)
Alapfogalmak:
objektum, osztály
tag: adattag, metódus; osztálytagok
konstruktor, destruktor
felüldefiniálás, elfedés, túlterhelés
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.
„szennyes titkok” - mágikus
metódusok
Minden osztálynak vannak mágikus
metódusai:
Példánykezeléshez: construct(), destruct()
Örökléshez: set(), get(), isset(), unset(),
__call()
Állapotkezeléshez: sleep(), wakeup(),
__toString(), set_state()
Mágikus metódusok implicite hívódnak.
Minden -al kezdődő nevű metódus
potenciálisan mágikus.
Ami kimaradt
Objektum iterátorok.
A final kulcsszó.
Objektumok klónozása.
Objektumok összehasonlítása.
Késői kötés.
Reflexió.
Kivételek PHP-ban
Van kivételkezelés
try … catch blokk definiálható
throw kulcsszó
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
Miskolc Egyetem

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!
Nagyvállalati alkalmazások
Nagyvállalati alkalmazáskörnyezet igényei:

elosztottság
komponensalapúság
tranzakcióvezéreltség
hordozhatóság
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
Webalkalmazás komponensek:
Java Servlet
JSP
webszolgáltatás végpont
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
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.)
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
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 HTTP-
metó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
javax.servlet.Servlet interface
metódusok: init(), getServletConfig(), service(),
getServletInfo(), destroy()
javax.servlet.GenericServlet osztály
implementálja a Servlet, ServletConfig és
Serializable interfészeket
Java Servlet
javax.servlet.ServletConfig interfész
metódusok: getInitParameter(),
getServletContext(), getInitParameterNames(),
getServletName()
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
Java Servlet - életciklus
Példányosítás:
constructor hívás
Inicializáció
init() hívás
Kérés kiszolgálás
service() hívás 2 paraméterrel:
ServletRequest (HttpServletRequest) request objektum
ServletResponse (HttpServletResponse) response
objektum
Leállítás
destroy() hívás
Megszüntetés: JVM GC
Java Servlet
package hu.uni_miskolc.iit.webtech;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class Servlet1 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet Servlet1</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet Servlet1 at " + request.getContextPath () + "</h1>");
out.println("</body>");
out.println("</html>");
out.close();
}
}
Java Servlet - Cookie
Fogadott cookie-k:
request objektumból:
Cookie[] sutik = request.getCookies();
használat:
out.println("<hr>Cookies:<ul>");
for (int i=0; i<sutik.length; i++)
out.println("<li>"+sutik[i].getName()+" : "
+sutik[i].getValue()+"</li>");
out.println("</ul>");
Java Servlet - Cookie
Küldés:
létrehozás
Cookie suti = new Cookie("nev", "ertek");
egyéb tulajdonságai: setValue(), setMaxAge(),

setDomain(), setPath(), stb.
küldés:
response.addCookie(suti);
Java Servlet – Session kezelés
Container szolgáltatás
Session objektum:
hozzáférés
HttpSession sess = request.getSession();
metódusok: getAttribute(), setAttribute(), stb.

attribútumai névvel indexelt objektumok
perzisztens, alk. szerver cluster fölött osztott
Default értékeket a web.xml-ben állíthatunk.
Web Technológiák
Répási Tibor
Miskolc Egyetem

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 ...>…</jsp:element>
egyedi JSP elem: <prefix:element ...>...</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
Objektumok osztott használata:
különös gondosságot igényel (több-szálú
feldolgozás)
<%@ page isThreadSafe="true|false" %>
Scriptlet használata
<%@page contentType="text/html" pageEncoding="UTF-8"%>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JSP Page</title>
</head>
<body>
<h2>Bart's penalty</h2>
<%
for (int i=0; i < 100; i++)
out.println("I'm not going to use scriptlets this way.<br/>");
%>
</body>
</html>
JavaBean -ek használata
<%@page contentType="text/html" pageEncoding="UTF-8"%>
"http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="naptar" class="java.util.Date"/>
<li>Nap: <jsp:getProperty name="naptar" property="date"/></li>

<li>Honap: <jsp:getProperty name="naptar” property="month"/></li>
<li>Ev: <jsp:getProperty name="naptar" property="year"/></li>
<li>Ora: <jsp:getProperty name="naptar" property="hours"/></li>
<li>Perc: <jsp:getProperty name="naptar" property="minutes"/></li>
Egy HTML űrlap feldolgozása:

<form action="beallit.jsp">
Név: <input type="text" name="nev"/>
<br/>Szül.év: <input type="text" name="evszam"/>
<br/><input type="submit"/>
</form>
package csomag; public void setEvszam(final int

evszam) {
public class peldaBean { this.evszam = evszam;
private int evszam; }
private String nev;
public String getNev() {
public peldaBean() { return new String(nev);
evszam = 2008; }
}
public void setNev(final String
public int getEvszam() { nev) {
return evszam; this.nev = new String(nev);
} }
}
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="*"/>
</jsp:useBean>
Csináljuk valami hasznosat:

<jsp:useBean class="csomag.peldaBean" id="szemely"
scope="session"/>
<jsp:useBean id="naptar" class="java.util.Date"/>
Hello <jsp:getProperty name="szemely" property="nev"/>.

Iden <%= naptar.getYear() - szemely.getEvszam() %> eves leszel.
JSP TagLibrary
A JSP elemkészletének kiegészítése
JSTL : szabványos elemekkel
Custom TagLib: egyedi elemekkel
Használata:
<%@ taglib prefix="tt"
[tagdir=/WEB-INF/tags/dir | uri=URI ] %>
<prefix:tag attr1="value" ... attrN="value" />
<prefix:tag attr1="value" ... attrN="value">

body</prefix:tag>
JSTL -ek: Core, XML, Internationalization,
SQL, Functions
Alternatív szintaxis
Két JSP szintaxis használatos:

Standard JSP: egyszerű
JSP XML-syntax: szabványos XML
scriptlet: <jsp:scriptlet> .. </jsp:scriptlet>
comment: 
direktíva: <jsp:directive.page .. />
kifejezés: <jsp:expression> .. </jsp:expression>
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.
<c:if test="${sessionScope.cart.numberOfItems > 0}">...</c:if>
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
param: a kérés paramétereinek map-je
paramValues: paraméter értékek tömbje
header: http kérés fejrész paraméterek
Implicit objektumok
headerValues: http kérés fejrész paraméter

értékek tömbje
cookie: http-cookiek map-je
initParam: servlet init paraméterek map-je
Változó hatáskör objektumok:
pageScope: page hatáskör objektumainak map-je
requestScope: kérés hatáskörű objektumok map-je
sessionScope: ülés hatáskörű objektumok map-je
applicationScope: alkalmazás hatáskörű objektumok
map-je
Webtechnológiák
Répási Tibor
Miskolc Egyetem,Gépészmérnöki kar,


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)
Megjelenítési:
table-less layout design
aszinkron webalkalmazás
hatékony navigációt segítő design,
akadálymentes web
Előfutárok
Üzemeltetés:
Google: progressive storage
Fejlesztés:
Java Server Faces
Megjelenítés:
table-less layout design div-elemekkel és
CSS-sel
aszinkron webalkalmazás: hidden frame,
AJAX
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
AJAX
Előnyei:
sávszélesség kihasználás
modell, nézet és vezérlő elkülönítése
felhasználói élmény
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
xajax feldolgozó beindítása
JavaScript generálás
függvények meghívása
XAJAX példa
multiply.php
<?php
require("multiply.common.php");
?>
<html>
<head>
<title>xajax Multiplier</title>
<?php $xajax->printJavascript('../../'); ?>
</head>
<body>
<input type="text" name="x" id="x" value="2" size="3" /> *
<input type="text" name="y" id="y" value="3" size="3" /> =
<input type="text" name="z" id="z" value="" size="3" />
<input type="button" value="Calculate"
onclick="xajax_multiply(document.getElementById('x').value,
document.getElementById('y').value);return false;" />
</body>
</html>
XAJAX Példa
multiply.common.php
<?php
require_once ("../../xajax.inc.php");
$xajax = new xajax("multiply.server.php");

$xajax->registerFunction("multiply");
?>
Webes keresőrendszerek
XAJAX Példa
multiply.server.php
<?php
function multiply($x, $y)

{
$objResponse = new xajaxResponse();
$objResponse->addAssign("z", "value", $x*$y);
return $objResponse;
}
require("multiply.common.php");
$xajax->processRequests();
?>
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
Adatbányászat:
nagy adatmennyiségek
strukturált adatok
rejtett összefüggések felderítése
Szövegbányászat:
adatbányászat kiterjesztése strukturálatlan
adatokra
osztályozási, klaszterezési feladatok
Web-bányászat:
szövegbányászat kiterjesztése a web,
szemi-strukturált, hipertext-rendszerére
Keresőmotorok feladatai:
feldolgozandó dokumentumok kijelölése
dokumentumok letöltése
dokumentumok szóhalmazának előállítása
dokumentumok metaadatainak előállítása
dokumentumok hatákony tárolása
keresési adatszótárak nyilvántartása
keresésfeldolgozó megvalósítása
keresési megaadatok feldolgozása
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
eliminálhatóság (eliminalibity): irreleváns

dokumentumok felismerhetősége
érthetőség (clarity): a kulcsszavak
közérthetősége
megjósolhatóság (predictability): keresési
eredmények előrejelezhetősége
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.
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
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
Ú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
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)
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
Indexelés
Kivonatolás:
kulcsszavak kinyerése
szelektivitás biztosítása
Indexstruktúra:
indexek hatékony tárolása
kulcsszavak hozzárendelése
dokumentumokhoz
Dokumentum kivonatok tárolása.
Keresés feldolgozás
Keresési szavakra illeszkedő

dokumentumok kiválasztása:
logikai kapcsolatok
stopszavak szűrése
szemantikus kapcsolatok
szinomímák kezelése
gépelési hibák felismerése
finomítható keresés
Tucatnyi technika
Rangsorolás
Kiválasztott dokumentumok rendezése

Google PageRank:
számítása:
kulcsszavak gyakorisága
hivatkozások (linkek) fontossága (PR)
felkeresési gyakoriság (hitrate)
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
Miskolc Egyetem,Gépészmérnöki kar,


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 szerver-
oldali 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
Miskolc Egyetem

Tel: 2101
Webtechnológiák - összefoglalás
Fejlesztői keretrendszerek
Java EE web-tier:
Servlet, JSP, JTL,
JSF: szabványos, JSP + JTL megoldás
Struts: nyílt-forrású, Servlet API-ra épül
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
Megkülönböztetünk:
Webes tartalomkezelők
Nagyvállalati (enterprise) tartalomkezelők
Tulajdonságai:
tartalom tárolása, szerkeszthetőség biztosítása
tartalom publikálása, verziókövetése
webes megjelenésű
testre szabható megjelentés (look&feel)
sablon alapú megjelenítés
felhasználók és szerepkörök azonosítása
jogosultságok odaítélése
munkafolyamatok definiálása, betartatása
kereső funkciók biztosítása
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
Á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
- Vezérlés menetét mutatja
- Programkód orientált
feldolgozás - Alacsony szintű
- Elemi funkciók
- Általános eszköz
IO - elemei :
- szekvencia
- elágazás
- ciklus
elágazás
vezérlési folyam
Alap folyamatábra modell
start
tojás, tej, cukor
I
záp? kuka stop
N
összedolgoz
N
habos?
sütőedénybe tesz
működés?
odaégett?
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
Forrás tranzíció (nincs forrás) bármikor tüzelhet

Nyelő tranzíció (nincs célhely) bármikor fogadhat
Tüzelés
1
1
2
2
1
Tüzelés
1
1
2
2
1
Petri hálók mátrix modellje
W: tranzíció-hely mátrix
helyek
-1 2 0 0 Wij: az i. tranzícióból a j. helyre vezető

tranzíciók: -2 0 1 0
él előjeles értéke
0 -1 -1 2
2
1 1
2 1
1
Petri hálók mátrix modellje
Tüzelés leírása
M : állapotvektor
M = M + WT * e
1 1 -1 -2 0
1
0 0 2 0 -1
M = + * 0
0 0 0 1 -1
0
0 0 0 0 2
1 -1
2 0 2
1 1 M = +
0 0
0 0
2
0
2 1 2
M =
1 0
0
Vezérlési elemek
szekvencia, megelőzés
p1 t1 p2 t2 p3
szinkronizáció
t1
Vezérlési elemek
t1 párhuzamosítás
t2
versengés
t1 t1
t2 t2
Minta Petri háló (étterem)
pincér szabad
vendég 1 vendég 2
rendelés rendelés
v. várakozás v. várakozás
p. nyugtázás
fogyasztás fogyasztás
konyhába
kész
rendelés kiszolgálás
kiszolgálás leadás
főzés
T
Minta Petri háló (étkező filozófusok)
szabad pálcika gondolkodik

evőeszköz szabad
esznek
induló
tokenek van egy tojás
van tej
kukába dob
rendben vége
van záp
edény
összedolgoz
sütőedénybe tesz
adatok finomítása ?
Minta Petri háló (adatok küldése két processz között)

Web Technológiák

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technológiák

Uploaded by

Copyright:

Available Formats

Web Technológiák

Általános Informatikai Tanszék

Iroda: Inf.Int. 108.

Tárgy címe: Web technológiák

A World Wide Web kialakulása, működése.

Az írás és a beszéd az emberi kommunikáció

Az írás változásának társadalmi hatásai:

A szöveg hiperhivatkozásokat tartalmaz,

Hypermedia paradigma: a dokumetum

Dokumentumok szerkezetét, használatát,

Réteges felépítésű, referencia modell:

Három rétegű modell:

Modellezi a felhasználó és a hipertext

Dokumentum-szerkezeti modellje alapját a

WWW dokumentumok technológiai

'80-as évek: Tim-

Robbanásszerű fejlődés kezdődik.

Hipertext dokumentumok reprezentációját

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

A böngésző területet osztják fel

A stílus elemhez kötődik, stíluslap alapján

<!DOCTYPE html PUBLIC "- body {

Hipertext átvitelre tervezett

Szerver küldi a fejrészt és a tartalmat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Félév kezdési adminisztratív teendők

Általános Informatikai Tanszék

Iroda: Inf.Int. 108.

Weboldalon felhasználó által kitölthető űrlap

Speciális lehetőség: fájl feltölés, mint beviteli

A HTML dokumentum a böngészőben

Általános modell XML dokumentum OO

Ez egy nagy dokumentum, sok képpel, melyek betöltése

<input type="button" onclick="disp_alert()" value="Display alert box" />

<input type="button" onclick="disp_prompt()" value="Display a prompt

Célja, hogy a http kérés kiszolgálását egy

Http kérésből származó változók

Tetszőleges futtatható program lehet

Igény: felhasználó azonosítása

A bejelentkezést az alkalmazás valósítja meg

A http protokoll szolgáltatása.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

A felhasználói adatbázis rekordja:

Válasz, cookie beállítás:

Általános Informatikai Tanszék

Iroda: Inf.Int. 108.

Alkalmazás: együttműködő programok

Számos matematikai megközelítés

Adatátvitel során átvitt adatok védelme

Alkalmazás védelme visszaélések ellen:

Általános Informatikai Tanszék

Iroda: Inf.Int. 108.

1994 Rasm us Lerdorf: Personal Homepage

CGI programok gyűjteménye

Reflektív programozási nyelv

Szintaxis: hasonlít az ANSI C-re

$4site = 'not yet'; // invalid; starts with a number

Beépített változók (tömbök)

<form action="action.php" method="post">

Hi <?php echo htmlspecialchars($_POST['name']); ?>.

Script beállíthat HTTP-Cookie-t (HTTP-head)

A session_start() fgv. indítja ill. használja

Timeout értéket a php.ini rögzít