WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Web programoz´as
2011–2012
1 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
´ Attekint´ es
Mi a web? / A web r¨ ovid t¨ ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese Mir˝ ol lesz sz´ o... (kurzus/labor/vizsga)
2 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
´ Attekint´ es
Mi a web? / A web r¨ ovid t¨ ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese Mir˝ ol lesz sz´ o... (kurzus/labor/vizsga)
3 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
´ Attekint´ es
Mi a web? / A web r¨ ovid t¨ ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese Mir˝ ol lesz sz´ o... (kurzus/labor/vizsga)
4 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
´ Attekint´ es
Mi a web? / A web r¨ ovid t¨ ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese Mir˝ ol lesz sz´ o... (kurzus/labor/vizsga)
5 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
´ Attekint´ es
Mi a web? / A web r¨ ovid t¨ ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese Mir˝ ol lesz sz´ o... (kurzus/labor/vizsga)
6 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Internet vs. web Internet: glob´alis adatk¨ ozvet´ıt˝ o rendszer / sz´am´ıt´ og´epes h´al´ ozatok vil´agh´al´ ozata
Az Internet ny´ ujtotta n´eh´any alapszolg´altat´as: e-mail (elektronikus levelez´es) levelez´esi list´ak “chat” (cseveg´es) ´allom´anyok ´atvitele (ftp) t´avoli termin´al el´er´ese (telnet, ssh) “www” – hipersz¨ oveg, hiperm´edia grafikus fel¨ uleten 7 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
A web r¨ovid t¨ort´enete WWW (World Wide Web - Vil´agm´eret˝ u H´al´ ozat)
1989 – Tim Berners–Lee (CERN – Eur´ opai R´eszecskegyors´ıt´ o Int´ezet) javaslata: “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
8 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
A web r¨ovid t¨ort´enete A WWW komponensei: 1
HTML-nyelven ´ır´ odott Web-oldalak – inform´aci´ o, hyperlinkek
2
Web-szerverek – Web-oldalak rendelkez´esre bocs´at´asa (HTTP protokoll)
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: 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) egy ´even bel¨ ul m´ar kb. 2 milli´ oan haszn´alt´ak ny´ılt forr´ask´ od´ u 9 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
A web r¨ovid t¨ort´enete – webhelyek sz´am´anak n¨oveked´ese 1993 k¨ ozep´en – kb. 130 webhely, a v´ege fele – k¨ ozel 600 1994 – majdnem 3000 1996 elej´en – t¨ obb mint 90 000 jelenleg . . . ∼485,173,671 webhely (netcraft)
10 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
B¨ong´esz˝ok Netscape Navigator (Marc Andreessen, Jim Clark) Microsoft Internet Explorer (1995, ’99-t˝ ol ez a legn´epszer˝ ubb) Lynx (1993, Kansas) – sz¨ oveges termin´alokra Mozilla (2002, ny´ılt forr´ask´ od´ u), Mozilla Firefox (2004) Opera (1994, Norv´egia), Safari (2003, Mac OS), Chrome (2008) B¨ ong´esz˝ ohaszn´alat (2008-t´ ol napjainkig) forr´as: StatCounter
11 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
t¨ort´enelmi ´erdekess´egek... Egyik legr´egebbi fennmaradt oldal (Egyike a Tim Berners-Lee ´altal k´esz´ıtett oldalaknak, ’92): World Wide Web A legels˝ o b¨ ong´esz˝ o (Tim Berners–Lee g´ep´en)
12 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
A web fejl˝od´ese Ig´eny a dinamikus tartalomra kezdetben: statikus HTML oldalak interakt´ıv oldalak: adatok bevitele adatok feldolgoz´ asa aktu´ alis adatok megjelen´ıt´ese (pl. adatb´ azisb´ ol)
⇒ dinamikusan l´etrehozott HTML oldalak megjelen´ıt´esi lehet˝ os´egek sz´elesed˝ o sk´al´aja multim´edi´as tartalom fejl˝ od´es ir´anya a Web-es felhaszn´al´ oi interf´esz k¨ ozel´ıt´ese a desktop-alkalmaz´asok´ehoz
13 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Kliens-szerver architekt´ura A Web kliens-szerver architekt´ ur´at alkalmaz az inform´aci´ok megoszt´as´ara ´es terjeszt´es´ere. A rendszer m˝ uk¨ od´ese: 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 b¨ ong´esz˝ o: ´ertelmezi a kapott ´allom´anyt, majd megjelen´ıti/lementi/futtatja azt a felhaszn´al´ oi g´epen az inform´aci´ o-csere a HTTP protokoll seg´ıts´eg´evel t¨ort´enik
14 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Statikus HTML oldal lek´er´ese
Web-szerver -
filerendszer /home/. . . /public html
@ lap.htm
? www.pl.edu/lap.htm
– Internet
6
lek´er´ese B¨ ong´ esz˝ o
?
? megjelen´ıt´es
<TITLE>bla
...
HTML dokumentum
Figure: Egyszer˝ u HTTP k´er´es
15 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Dinamikusan l´etrehozott HTML oldal Web-szerver g´ ep
(Webkont´ ener)
HTML
Web szerver
k´ er´ es
Szkript o - ´ertelmez˝ motor
?
6
filerendszer HTML
H´ att´ er
-
szerverek (adatb´ azis, mail, stb.)
6
@
lap.php (lap.jsp)
? www.pl.edu/lap.php (www.pl.edu/lap.jsp) lek´ er´ ese
– Internet
6
HTML old.
B¨ ong´ esz˝ o
?
? megjelen´ıt´es
Figure: HTTP k´er´es web-alkalmaz´ as eset´en 16 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
URL 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 ] protokoll: meghat´arozza a kommunik´aci´ o m´ odj´at (pl. http, https, ftp, mailto, stb.) 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 ] 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) http://www.cs.ubbcluj.ro/∼laura/webprg/index.htm 17 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
MIME szabv´any Multipurpose Internet Mail Extensions/ T¨ obbc´el´ u internetes lev´elkiterjeszt´es eredetileg e-mailek form´atum´anak jelz´es´ere lett kifejlesztve a szerver ´altal visszat´er´ıtett dokumentum t´ıpus´at adja meg a b¨ ong´esz˝ o sz´am´ara T´ıpus megad´asa ´ altal´ anos alak: t´ıpus/alt´ıpus Pl.:text/plain, text/html, text/css, image/jpeg, image/gif k´ıs´erleti t´ıpus eset´en az alt´ıpus x-el kezd˝ odik (pl. video/x-msvideo) Tartalomt´ıpusok list´aja Internet Assigned Numbers Authority 18 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
HTTP protokoll ´ HyperText Transfer Protocol (Hipertext Atviteli Protokoll) HTTP
B¨ ong´esz˝ o Web-szerver tulajdons´agai: ´allapot n´elk¨ uli ´altal´anos egyszer˝ u, gyors HTTP u ¨zenetv´alt´as l´ep´esei: kliens ´es szerver k¨ ozti kapcsolat fel´ep´ıt´ese (80-as port) a kliens egy k´er´est (request) k¨ uld a szervernek 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 mindk´et f´el bontja a kapcsolatot (HTTP 1.0) vagy a kapcsolat u ´jrahaszn´alhat´ o (HTTP 1.1)
19 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
HTTP protokoll A k´er´es (request) tartalma: inform´aci´ o a b¨ ong´esz˝ or˝ ol (pl. ennek t´ıpusa ´es verzi´oja) az alkalmazott form´atum (pl. az alkalmazott HTTP protokoll verzi´o) param´ eterek (pl. form-ban megadott vagy a hivatkoz´asban szerepl˝ o) http://cs.ubbcluj.ro/jegyek.jsp?diakID=100&felev=1 met´ odus - megadja az elv´egzend˝ o m˝ uvelet t´ıpus´at met´ odusok: GET – a param´eterek az URL-ben lesznek elk¨ uldve (ink´abb lek´erdez´esre aj´anlott haszn´alni) 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) m´as, kev´esb´e haszn´alt: HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT, PATCH
20 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
HTTP protokoll Visszajelz´es: a visszak¨ uld¨ ott objektum jellemz˝ oi: 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
“HTTP/1.1 200 OK” - siker eset´en a k´ ert objektum (pl. HTML oldal) hiba¨ uzenet (ha sz¨ uks´eges) N´eh´any gyakoribb hibak´ od: 400 Bad Request The request contains bad syntax or cannot be fulfilled. 404 Not Found 414 Request-URI Too Long 500 Internal Server Error 21 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Kliens oldali technol´ogi´ak a statikus HTML kliens oldali kieg´esz´ıt´esei 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: Egym´asba ´agyazhat´ o st´ıluslapok (Cascading Style Sheets) Kliens oldali script nyelvek: pl. JavaScript, JScript, VBScript Java Appletek 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 22 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Kliens oldali technol´ogi´ak CSS HTML tag-ek megjelen´ıt´esi st´ılus´at adhatjuk meg a seg´ıts´eg´evel egys´eges megjelen´ıt´est k¨ olcs¨ on¨ oz a web-oldalnak a HTML oldal kin´ezete k¨ onnyen m´ odos´ıthat´ o a CSS ´allom´any m´ odos´ıt´as´aval Kliens oldali script nyelvek – JavaScript a HTML oldalak k´esz´ıt˝ oi sz´am´ara egy programoz´asi eszk¨ozt biztos´ıt m´ odos´ıthatja a HTML tartalm´at, kin´ezet´et (a HTML DOM objektumaihoz val´ o hozz´af´er´es ´altal) esem´enyekre tud reag´alni a bevitt adat helyess´eg´enek ellen˝ orz´es´ere ad lehet˝ os´eget
23 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Szerver oldali technol´ogi´ak
´ anos jellemz˝ Altal´ ok, feladatok: Weboldal dinamikus l´etrehoz´asa 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 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 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) a v´alasz testreszab´asa a b¨ ong´esz˝ o t´ıpus´anak f¨ uggv´eny´eben a h´al´ ozati forgalom cs¨ okkent´ese (pl. az elk¨ uld¨ ott tartalom be-/kit¨ om¨ or´ıt´ese)
24 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Szerver oldali technol´ogi´ak
Konkr´et szerver oldali technol´ ogi´ak: CGI Szerver-oldali script alap´ u technol´ ogi´ak (pl. PHP, ASP) Java alap´ u technol´ ogi´ak (servlet, JSP)
25 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Egyebek
Szerver oldalon gyakran haszn´alt egy´eb technol´ ogi´ak SQL – adatb´azis lek´erdez˝ o nyelv, s´ema m´ odos´ıt´as 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.
26 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Legn´epszer˝ubb weboldalak ´altal haszn´alt technol´ogi´ak
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
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
27 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
...kil´at´asok... ´ ash´ırdet´esekben haszn´alt kulcsszavak gyakoris´aga All´ (Indeed.com):
28 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Tervezett kurzus-t´em´ak: HTML, (XHTML), HTML DOM CSS Kliens oldali technol´ ogi´ak - Script nyelvek - JavaScript AJAX - Asinchronous JavaScript and XML Szerver oldali technol´ ogi´ak - PHP JAVA-alap´ u webalkalmaz´asok: Servletek JSP JSP - Tag-ek MVC elv (JDBC adatb´ azishozz´ af´er´es) Struts keretrendszer
ASP.NET ismertet˝ o Rich Internet Applications (RIA) – ismertet˝ o
29 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
Labort´em´ak: HTML + CSS HTML Form + JavaScript PHP Servlet JSP JSP Tag-ek JDBC AJAX Projekt
30 / 31
WWW
Kliens-szerver
Alapfogalmak
Technol´ ogi´ ak
Terv
A tant´argy honlapja www.cs.ubbcluj.ro/∼laura/webprg Vizsga: elm´elet gyakorlat – projektbemutat´as K´erd´esek...?!?
31 / 31