´ Attekint´ es
Web programoz´as
2011–2012
I
Mi a web? / A web r¨ovid t¨ort´enete
I
Kliens–szerver architekt´ ura
I
N´eh´any alapfogalom
I
Kliens- illetve szerver oldali technol´ogi´ak ´attekint´ese
I
Mir˝ol lesz sz´o... (kurzus/labor/vizsga)
2 / 27
1 / 27
Internet vs. web
A web r¨ovid t¨ort´enete WWW (World Wide Web - Vil´agm´eret˝u H´al´ozat)
Internet: I
glob´alis adatk¨ozvet´ıt˝o rendszer / sz´am´ıt´og´epes h´al´ ozatok vil´agh´al´ozata
I
1989 – Tim Berners–Lee (CERN – Eur´opai R´eszecskegyors´ıt´o Int´ezet) javaslata: I
Az Internet ny´ujtotta n´eh´any alapszolg´altat´as: I
I
e-mail (elektronikus levelez´es)
I
levelez´esi list´ak
I
“chat” (cseveg´es)
I
´allom´anyok ´atvitele (ftp)
I
t´avoli termin´al el´er´ese (telnet, ssh)
I
“www” – hipersz¨oveg, hiperm´edia grafikus fel¨ uleten
I
I
3 / 27
“hipersz¨ oveg rendszer” alkalmaz´ asa kutat´ ok k¨ ozti kommunik´ aci´ o jav´ıt´ as´ ara sz¨ oveges inform´ aci´ o, k´epek, (mozg´ ok´ep, hanganyag) hiperhivatkoz´ asok (hyperlink) seg´ıts´eg´evel o ¨sszekapcsolt rendszere o ¨tlet: – a Gopher protokoll-t´ ol k¨ olcs¨ onz¨ ott – hipersz¨ oveg (hypertext), hiperhivatkoz´ as (hyperlink) elve ismert m´ ar a 1970-es ´evekben
1992 janu´ar, Genf – a WEB els˝o nyilv´anos haszn´alata
4 / 27
A web r¨ovid t¨ort´enete
A web r¨ovid t¨ort´enete – webhelyek sz´am´anak n¨oveked´ese
A WWW komponensei:
I
1993 k¨ozep´en – kb. 130 webhely, a v´ege fele – k¨ozel 600
1. HTML-nyelven ´ır´odott Web-oldalak – inform´aci´o, hyperlinkek
I
1994 – majdnem 3000
2. Web-szerverek – Web-oldalak rendelkez´esre bocs´at´asa (HTTP protokoll)
I
1996 elej´en – t¨obb mint 90 000
I
jelenleg . . . ∼324,697,205 webhely (netcraft)
3. Web-b¨ong´esz˝ok (Web-browser, u ¨gyf´el vagy kliens program) – inform´aci´o lek´er´ese (URL seg´ıts´eg´evel), form´azott megjelen´ıt´ese
A WWW elterjed´ese: I
NCSA Mosaic – az Illinois-i Egyetemen m˝ uk¨od˝o NCSA (National Center for Supercomputing Applications) ´altal kibocs´atott els˝o ingyenes b¨ong´esz˝o (Marc Andreessen ´es csapata)
I
egy ´even bel¨ ul m´ar kb. 2 milli´oan haszn´alt´ak
I
ny´ılt forr´ask´od´ u
5 / 27
B¨ong´esz˝ok I
Netscape Navigator (Marc Andreessen, Jim Clark)
I
Microsoft Internet Explorer (1995, ’99-t˝ol ez a legn´epszer˝ ubb)
I
Lynx (1993, Kansas) – sz¨oveges termin´alokra
I
Mozilla (2002, ny´ılt forr´ask´od´ u), Mozilla Firefox (2004)
I
Opera (1994, Norv´egia), Safari (2003, Mac OS), Chrome (2008)
6 / 27
t¨ort´enelmi ´erdekess´egek... I
Egyik legr´egebbi fennmaradt oldal (Egyike a Tim Berners-Lee ´altal k´esz´ıtett oldalaknak, ’92): World Wide Web
I
A legels˝o b¨ong´esz˝o (Tim Berners–Lee g´ep´en)
B¨ ong´esz˝ohaszn´alat (2008-t´ol napjainkig) forr´as: StatCounter
7 / 27
8 / 27
A web fejl˝od´ese
Kliens-szerver architekt´ura
Ig´eny a dinamikus tartalomra I I
A Web kliens-szerver architekt´ ur´at alkalmaz az inform´aci´ok megoszt´as´ara ´es terjeszt´es´ere.
kezdetben: statikus HTML oldalak interakt´ıv oldalak: I I I
A rendszer m˝uk¨od´ese:
adatok bevitele adatok feldolgoz´ asa aktu´ alis adatok megjelen´ıt´ese (pl. adatb´ azisb´ ol)
I
⇒ dinamikusan l´etrehozott HTML oldalak I
megjelen´ıt´esi lehet˝ os´egek sz´elesed˝o sk´al´aja
I
multim´edi´as tartalom
I
k´er´es kliens program (web-b¨ong´esz˝o) → Internetre r´akapcsolt web-szerver v´alasz web-szerver: ´ertelmezi az u ¨zenetet → kliens v´alasz = a k´ert dokumentum + kieg´esz´ıt˝o inform´aci´ok
I
b¨ong´esz˝o: ´ertelmezi a kapott ´allom´anyt, majd megjelen´ıti/lementi/futtatja azt a felhaszn´al´oi g´epen
I
az inform´aci´o-csere a HTTP protokoll seg´ıts´eg´evel t¨ort´enik
fejl˝od´es ir´anya I
a Web-es felhaszn´al´oi interf´esz k¨ozel´ıt´ese a desktop-alkalmaz´asok´ehoz
9 / 27
Statikus HTML oldal lek´er´ese
10 / 27
Dinamikusan l´etrehozott HTML oldal Web-szerver g´ ep
(Webkont´ ener)
HTML
Web-szerver -
Web szerver
filerendszer /home/. . . /public html
@ lap.htm
www.pl.edu/lap.htm
lek´er´ese B¨ ong´ esz˝ o
?
? megjelen´ıt´es
-
szerverek (adatb´ azis, mail, stb.)
6 filerendszer HTML
– Internet
6
H´ att´ er
?
6
?
k´ er´ es
Szkript o - ´ertelmez˝ motor
@
lap.php (lap.jsp)
?
<TITLE>bla
...
www.pl.edu/lap.php (www.pl.edu/lap.jsp)
HTML dokumentum
lek´ er´ ese
– Internet
6
B¨ ong´ esz˝ o
HTML old. ?
? megjelen´ıt´es Figure: Egyszer˝ u HTTP k´er´es Figure: HTTP k´er´es web-alkalmaz´ as eset´en 11 / 27
12 / 27
URL
MIME szabv´any Multipurpose Internet Mail Extensions/ T¨obbc´el´u internetes lev´elkiterjeszt´es
Minden er˝oforr´as a WEB-en egy c´ımmel rendelkezik, amelynek form´atum´at a Uniform Resource Locator (URL) hat´arozza meg
Egy URL a k¨ovetkez˝o r´eszekb˝ol ´all: [protokoll://][gazdag´ ep ][:port ][k´ er´ es ´ utvonala ]
I
protokoll: meghat´arozza a kommunik´aci´o m´odj´at (pl. http, https, ftp, mailto, stb.)
I
gazdag´ep: azonos´ıtja a sz´am´ıt´og´epet, amelynek a k´er´est c´ımezz¨ uk [g´ epn´ ev ].[altartom´ any(ok) ].[tartom´ any ]
I
port: http-n´el alap´ertelmezett a 80-as k´er´es u ´tvonala: a k´ert er˝oforr´as neve, el´er´esi u ´tk´ent megadva (esetleg param´eterekkel)
I
I
eredetileg e-mailek form´atum´anak jelz´es´ere lett kifejlesztve
I
a szerver ´altal visszat´er´ıtett dokumentum t´ıpus´at adja meg a b¨ong´esz˝o sz´am´ara
T´ıpus megad´asa I
´ altal´ anos alak: t´ıpus/alt´ıpus
I
Pl.:text/plain, text/html, text/css, image/jpeg, image/gif
I
k´ıs´erleti t´ıpus eset´en az alt´ıpus x-el kezd˝odik (pl. video/x-msvideo)
Tartalomt´ıpusok list´aja I
Internet Assigned Numbers Authority
http://www.cs.ubbcluj.ro/∼laura/webprg/index.htm 14 / 27
13 / 27
HTTP protokoll
HTTP protokoll
´ HyperText Transfer Protocol (Hipertext Atviteli Protokoll)
A k´er´es (request) tartalma:
HTTP
B¨ ong´esz˝o Web-szerver
tulajdons´agai: I
´allapot n´elk¨ uli
I
´altal´anos
I
egyszer˝ u, gyors
kliens ´es szerver k¨ozti kapcsolat fel´ep´ıt´ese (80-as port)
I
a kliens egy k´er´est (request) k¨ uld a szervernek
I
a szerver a k´er´es fogad´asa ´es a k´ert feladatok elv´egz´ese ut´an egy v´alaszt (response) k¨ uld vissza a kliensnek
I
mindk´et f´el bontja a kapcsolatot (HTTP 1.0) vagy a kapcsolat u ´jrahaszn´alhat´o (HTTP 1.1)
inform´aci´o a b¨ong´esz˝or˝ol (pl. ennek t´ıpusa ´es verzi´oja)
I
az alkalmazott form´atum (pl. az alkalmazott HTTP protokoll verzi´o)
I
param´ eterek (pl. form-ban megadott vagy a hivatkoz´asban szerepl˝o) http://cs.ubbcluj.ro/jegyek.jsp?diakID=100&felev=1
I
met´odus - megadja az elv´egzend˝o m˝ uvelet t´ıpus´at
met´odusok:
HTTP u¨zenetv´alt´as l´ep´esei: I
I
15 / 27
I
GET – a param´eterek az URL-ben lesznek elk¨ uldve (ink´abb lek´erdez´esre aj´anlott haszn´alni)
I
POST – a param´etereket az u ¨zenet t¨orzs´eben k¨ uldi a b¨ong´esz˝o a szervernek (aj´anlat: haszn´alhat´o adatm´odos´ıt´asra)
I
m´as, kev´esb´e haszn´alt: HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH 16 / 27
HTTP protokoll
Kliens oldali technol´ogi´ak
Visszajelz´es: I
a visszak¨ uld¨ott objektum jellemz˝oi: I I I
k´ odol´ asi form´ atum (sima sz¨ oveg, UUENCODE, zip, stb.) t´ıpus (sz¨ oveges inform´ aci´ o, k´ep, video, hang, bin´ aris ´ allom´ any, stb.) alkalmazott nyelv
I
“HTTP/1.1 200 OK” - siker eset´en
I
a k´ ert objektum (pl. HTML oldal)
I
hiba¨ uzenet (ha sz¨ uks´eges)
400 Bad Request The request contains bad syntax or cannot be fulfilled.
I
404 Not Found
I
414 Request-URI Too Long
I
500 Internal Server Error
a statikus HTML kliens oldali kieg´esz´ıt´esei
I
b¨ong´esz˝obe be´ep´ıtett (pl. JavaScript) vagy hozz´aadott seg´edprogram haszn´alata sz¨ uks´eges (pl. JVM-plugin, Java Applet futtat´as´ahoz)
Konkr´et kliens oldali technol´ogi´ak:
N´eh´any gyakoribb hibak´od: I
I
I
Egym´asba ´agyazhat´o st´ıluslapok (Cascading Style Sheets)
I
Kliens oldali script nyelvek: pl. JavaScript, JScript, VBScript
I
Java Appletek
I
Rich Internet Application (RIA) platformok: Adobe Flash, JavaFX, Microsoft Silverlight
AJAX - kliens ´es szerver k¨ozti aszinkron m´odon t¨ort´en˝o kommunik´aci´o 17 / 27
Kliens oldali technol´ogi´ak
Szerver oldali technol´ogi´ak
CSS I
HTML tag-ek megjelen´ıt´esi st´ılus´at adhatjuk meg a seg´ıts´eg´evel
I
egys´eges megjelen´ıt´est k¨olcs¨on¨oz a web-oldalnak
I
a HTML oldal kin´ezete k¨onnyen m´odos´ıthat´o a CSS ´allom´any m´odos´ıt´as´aval
18 / 27
´ anos jellemz˝ok, feladatok: Altal´ I
Weboldal dinamikus l´etrehoz´asa
I
a felhaszn´al´ot´ol j¨ov˝o lek´erdez´esekre adott v´alasz, a felhaszn´al´o ´altal bevitt adatok (HTML form) feldolgoz´asa
I
adatok lek´erdez´ese (adatb´azisb´ol, XML f´ajlb´ol vagy b´armilyen m´as adatforr´asb´ol) illetve az adatok megfelel˝o form´aban val´o elk¨ uld´ese
I
k¨ ul¨onb¨oz˝o Weboldalakhoz val´o hozz´af´er´es ellen˝orz´ese (pl. bizonyos oldalakat csak bejelentkezett felhaszn´al´o ´erhet el)
I
a v´alasz testreszab´asa a b¨ong´esz˝o t´ıpus´anak f¨ uggv´eny´eben
I
a h´al´ ozati forgalom cs¨okkent´ese (pl. az elk¨ uld¨ott tartalom be-/kit¨om¨or´ıt´ese)
Kliens oldali script nyelvek – JavaScript I
a HTML oldalak k´esz´ıt˝oi sz´am´ara egy programoz´asi eszk¨ozt biztos´ıt
I
m´odos´ıthatja a HTML tartalm´at, kin´ezet´et (a HTML DOM objektumaihoz val´o hozz´af´er´es ´altal)
I
esem´enyekre tud reag´alni
I
a bevitt adat helyess´eg´enek ellen˝orz´es´ere ad lehet˝os´eget
19 / 27
20 / 27
Szerver oldali technol´ogi´ak
Egyebek
Szerver oldalon gyakran haszn´alt egy´eb technol´ogi´ak Konkr´et szerver oldali technol´ogi´ak: I
CGI
I
Szerver-oldali script alap´ u technol´ogi´ak (pl. PHP, ASP)
I
Java alap´ u technol´ogi´ak (servlet, JSP)
I
SQL – adatb´azis lek´erdez˝o nyelv, s´ema m´odos´ıt´as
I
XML – Extensible Markup Language
webalkalmaz´as: alapgondolata: bizonyos webc´ımek m¨og¨ott nem statikus tartalom van (pl. HTML), hanem a szerver a b¨ongesz˝o k´er´es´ere dinamikus tartalmat hoz l´etre, ´es k¨ uld el a b¨ong´esz˝onek.
21 / 27
Legn´epszer˝ubb weboldalak ´altal haszn´alt technol´ogi´ak
...kil´at´asok... ´ ash´ırdet´esekben haszn´alt kulcsszavak gyakoris´aga All´ (Indeed.com):
alexa.com, 2011 nyara 1. Google Java, C++ (indexel´esre) 2. Facebook PHP 3. YouTube Flash, Python, Java 4. Yahoo! PHP, Java 5. Blogger.com Java
22 / 27
6. Baidu.com (k´ınai nyelv˝ u keres˝ooldal) ? 7. Wikipedia PHP 8. Windows Live .NET 9. Twitter Ruby on Rails, Scala, Java 11. MSN .NET
23 / 27
24 / 27
Tervezett kurzus-t´em´ak: I
HTML, (XHTML), HTML DOM
I
CSS
I
HTML + CSS
I
Kliens oldali technol´ogi´ak - Script nyelvek - JavaScript AJAX - Asinchronous JavaScript and XML
I
HTML Form + JavaScript
I
PHP
Szerver oldali technol´ogi´ak - PHP JAVA-alap´ u webalkalmaz´asok:
I
Servlet
I
JSP
I
JSP Tag-ek
I
JDBC
I
AJAX
I
Projekt
I I I
I I I I I I
Labort´em´ak:
Servletek JSP JSP - Tag-ek MVC elv (JDBC adatb´ azishozz´ af´er´es) Struts keretrendszer
I
ASP.NET ismertet˝o
I
Rich Internet Applications (RIA) – ismertet˝o
25 / 27
A tant´argy honlapja www.cs.ubbcluj.ro/∼laura/webprg
Vizsga: I
elm´elet
I
gyakorlat – projektbemutat´as
K´erd´esek...?!?
27 / 27
26 / 27
