Web programoz as

Web programoz´as

2009–2010

´ Attekint´ es

I I I I I

A web r¨ovid t¨ort´enete Kliens–szerver architekt´ ura N´eh´any alapfogalom Kliens- illetve szerver oldali technol´ ogi´ak ´attekint´ese ´ Attekint´es: mir˝ol lesz sz´ o (kurzus/labor/vizsga)

A web r¨ovid t¨ort´enete

WWW (World Wide Web - Vil´agm´eret˝u H´al´ozat) I

1989 – Tim Berners–Lee (CERN – Eur´ opai R´eszecskegyors´ıt´o Int´ezet) javaslata: I

I

I

I

“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) hyperlinkek seg´ıts´eg´evel ¨ osszekapcsolt rendszere otlet: ¨ – 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

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: I

I 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) egy ´even bel¨ ul m´ar kb. 2 milli´ oan haszn´alt´ak ny´ılt forr´ask´od´ u

A web r¨ovid t¨ort´enete A WWW elterjed´ese: I I I I I

1993 k¨ozep´en – kb. 130 web-oldal 1993 v´ege – k¨ozel 600 1994 – majdnem 3000 1996 elej´en – t¨obb mint 90 000 jelenleg . . . ?

´ Ujabb b¨ong´esz˝ok megjelen´ese: I I I I

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), Firefox (2004), Opera (1994, Norv´egia), Google Chrome stb.

A web r¨ovid t¨ort´enete Ig´eny a dinamikus tartalomra I I

kezdetben: statikus HTML oldalak interakt´ıv oldalak: I I I

I I

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 I

a Web-es felhaszn´al´ oi interf´esz k¨ ozel´ıt´ese a desktop-alkalmaz´asok´ehoz

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: I

I

I

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

Statikus HTML oldal lek´er´ese Web-szerver -

filerendszer /home/. . . /public html

@ lap.htm

? www.pl.edu/lap.htm lek´er´ese

 

 – Internet 

6

B¨ ong´ esz˝ o

?

? megjelen´ıt´es

<TITLE>bla

...

HTML dokumentum

Figure: Egyszer˝ u HTTP k´er´es

Dinamikusan l´etrehozott HTML oldal Web-szerver g´ ep

(Webkont´ ener)

HTML

Web  szerver

k´ er´ es

Szkript o - ´ertelmez˝ motor

?

6

6 filerendszer HTML

@

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

H´ att´ er



?

? megjelen´ıt´es

Figure: HTTP k´er´es web-alkalmaz´ as eset´en

-

szerverek (adatb´ azis, mail, stb.)

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 ]

I

I

I I

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

http://www.cs.ubbcluj.ro/∼laura/webprg/index.htm

HTTP protokoll ´ HyperText Transfer Protocol (Hipertext Atviteli Protokoll) HTTP

B¨ong´esz˝o Web-szerver

tulajdons´agai: I I I

´allapot n´elk¨ uli ´altal´anos egyszer˝ u, gyors

HTTP u¨zenetv´alt´as l´ep´esei: I

I I

I

kliens ´es szerver k¨ozti kapcsolat fel´ep´ıt´ese (80-as port alap´ertelmez´es szerint) 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 protokoll A k´er´es (request) tartalma: I I I

I

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: I

I

I

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

HTTP protokoll Visszajelz´es: I

a visszak¨ uld¨ott objektum jellemz˝ oi: I I I

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

“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: I

I I I

400 Bad Request The request contains bad syntax or cannot be fulfilled. 404 Not Found 414 Request-URI Too Long 500 Internal Server Error

Kliens oldali technol´ogi´ak

I I

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: I I I

Egym´asba ´agyazhat´ o st´ıluslapok (Cascading Style Sheets) Kliens oldali script nyelvek: (pl. JavaScript, JScript, VBScript) Java Appletek

AJAX - kliens ´es szerver k¨ ozti aszinkron m´ odon t¨ ort´en˝ o kommunik´aci´o

Kliens oldali technol´ogi´ak CSS I I I

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

I I

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

Szerver oldali technol´ogi´ak ´ anos jellemz˝ok, feladatok: Altal´ I I

I

I

I I

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)

Szerver oldali technol´ogi´ak

Konkr´et szerver oldali technol´ogi´ak: I I I

CGI Szerver-oldali script alap´ u technol´ ogi´ak (pl. PHP, ASP) Java alap´ u technol´ogi´ak (servlet, JSP)

Egyebek

Szerver oldalon gyakran haszn´alt egy´eb technol´ogi´ak I I

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.

Tervezett kurzus-t´em´ak: I I I I I I

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: I I I I I I I

Servletek JSP JSP - Tag-ek MVC elv JDBC adatb´ azishozz´ af´er´es XML feldolgoz´ as JAVA-ban Struts keretrendszer

Labort´em´ak: I I I I I I I I I

HTML + CSS HTML Form + JavaScript PHP Servlet JSP JSP Tag-ek JDBC AJAX Projekt

A tant´argy honlapja www.cs.ubbcluj.ro/∼laura/webprg

Vizsga: I I

elm´elet gyakorlat – projektbemutat´as

K´erd´esek...?!?