Elektronikus szolgáltatások (vitt4100) WEB-es alkalmazások alapok, HTTP. Lukovszki Csaba lukovszki@tmit.bme.hu QoS Információs Technológiák Laboratórium (QoSITLab) Nagysebességű Hálózatok Laboratórium (HSNLab)
Kliens-szerver modell kliens oldal szerver oldal pluginok DB LDAP FS IMAP erőforrások kliens alkalmazás HTTP/HTTPS szerver alkalmazás Böngésző TCP IP adatkapcsolati réteg fizikai réteg WWW szerver TCP IP adatkapcsolati réteg fizikai réteg TCP port (80) IP next header Eth next header protokollok 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 2
Tematika Adatok elérése Erőforrások lehivatkozása, URI Erőforrások lekérése, HTTP Kliens oldal Adatok megjelenítése, HTML, XML, CSS WEB szerverek felépítése, Apache 1.3 Statikus oldalak felépítése Dinamikus oldalak előállítása, CGI, perl, php, asp Állapotinformációk tárolása, session kezelés (php) WEB alkalmazások Szerver oldali alkalmazások felépítése Erőforrások használata Levelezőrendszer Adatbázis kapcsolat Sablon rendszerek, smarty Portál rendszerek.net keretrendszer, PHP libs, PHPNuke 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 3
URI (Uniform Resource Identifier) Interneten elérhető erőforrások, dokumentumok egyértelmű hivatkozásához és eléréséhez Erőforrás minden olyan entitás, mely egyértelműen azonosítható URI lehet, Lokátor: Az elérési mechanizmus alapján azonosítjuk az erőforrást Név: Az erőforrásra vonatkozó egységes leírás, mely az erőforrás létezésétől függetlenül leírja azt Mindkettő: Hivatkozás típusa szerint Abszolút: Relatív: hierarchikus eléréseknél a bázisból való erőforrás lehivatkozás 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 4
Az URI fejlődése RFC 1738 (1994)/1808/2368/2396 Uniform Resource Locators (URL) RFC 1808 (1995)/2368/2396 Relative Uniform Resource Locators RFC 2368 (1998) The mailto URL scheme RFC 2396 (1998)/2732 Uniform Resource Identifiers (URI) RFC 2732 (1999) Format for Literal IPv6 Addresses in URL's 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 5
URI/URL felépítése Általános felépítés: <scheme>:<scheme-specific-part> Karakterek kódolása: %xx két hexadecimális számmal (%00-%FF) Minden karaktert kódolni kell, mely mely nem írható le az US-ASCII kódolással (80-FF,00-1F) amely nem biztonságos (space,<,>,,,#,%,{,},,\,^,],[,20) amelyet már az URL leírása során lefoglaltunk (;,/,?,:,@,=,&,$) Az interneten használt URL-ek általános felépítése //<user>:<password>@<host>:<port>/<url-path> HTTP-ben használt URL-ek felépítése http://<host>:<port>/<path>?<searchpart> A <host> kivételével minden mező opcionális A port alapértelmezett értéke 80 Mind a <port>, mind a <searchpart> részben a (/,?,;) karakterek foglaltak 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 6
URI/URL sémák ftp File Transfer Protocol http Hypertext Transfer Protocol gopher The Gopher protocol mailto Electronic mail address news USENET news nntp USENET news, NNTP-n keresztül telnet interaktív kapcsolatra való hivatkozás wais Wide Area Information Serverc file Hoszt specifikus állomány elérés prospero Prospero állomány szolgáltatás etc.. e.g. (nfs) 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 7
HTTP (Hypertext Transfer Protocol) Applikációs rétegbeli protokoll elosztott, csoportos, média átviteli rendszer Egységes interfészt definiál az Interneten erőforrások elérésére Állapotmentes: Kérelmekre válaszol, nem tart fenn állapotokat a kapcsolatokra vonatkozólag (request-response model) Kérés és válasz formátumokat specifikál Fejlődése 1991-93, Berners-Lee, HTTP/0.9 1993-97, RFC 1945, HTTP/1.0 1996-xx, RFC 2068/2616, HTTP/1.1 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 8
HTTP kapcsolat Nem perzisztens kapcsolat Legfeljebb egy objektum küldhető át egy TCP kapcsolaton keresztül HTTP/1.0 használja Perzisztens kapcsolat Több objektum is átküldhető a kliens és a szerver között egy TCP kapcsolaton keresztül HTTP/1.1 alapértelmezésben ezt használja 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 9
HTTP kapcsolat felépítés kliens szerver kliens szerver 1.) TCP kapcsolat kiépítése 2.) TCP válasz 1.) TCP kapcsolat kiépítése 2.) TCP válasz 3.) HTTP kérelem 4.) HTTP válasz 3.) HTTP kérelem 4.) HTTP válasz 5.) TCP kapcsolat bontása Nem perzisztens kapcsolat Perzisztens kapcsolat 5.) TCP kapcsolat bontása 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 10
HTTP kapcsolat tulajdonságai Nem perzisztens Egy objektum lekéréséhez 2 RTT időre van szükség A hosztoknak és szervereknek minden TCP kapcsolathoz allokálni kell erőforrásokat Perzisztens kapcsolat A szerver nyitva hagyja a TCP kapcsolatot az objektum letöltése után Pipleline használata nélkül Minden újabb objektum kérésnek meg kell előznie az előző befejezését Egy objektum lekéréséhez 1 RTT időre van szükség Pipeline használatával (HTTP/1.1) A kliensek elküldik az objektumra vonatkozó kérésüket, mihelyst az felmerül Megfelelő kapcsolat esetében az összes objektum lekérhető 1 RTT idő alatt 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 11
HTTP üzenetek típusai HTTP üzenetek két típusa van HTTP kérelem HTTP válasz Minden üzenet ASCII-ben van ábrázolva 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 12
HTTP kérelem felépítése parancs sor fejrész sorok metódus sp URL sp protokoll cr lf fejrész mező név : érték cr lf fejrész mező név : érték cr lf cr fejrész mező név lf... : érték cr lf specifikus adat 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 13
HTTP kérelem, példa bázis protokoll verzió GET metódus relatív URL GET /index.html HTTP/1.1 Host: www.tmit.bme.hu User-agent: Mozilla/4.0 Connection: close Accept-language: hu kliens szoftver kapcsolat zárása nyelv specifikáció 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 14
HTTP kérelem, mező jelentések Metódus GET (HTTP/1.0): Az erőforrás bemeneteként jelentkező adatok az URL részben helyezkednek el POST (HTTP/1.0): Az erőforrás bemeneteként jelentkező adatok a specifikus adat részben helyezkednek el HEAD (HTTP/1.0): Az URL-ben lehivatkozott erőforrást hagyja figyelmen kívül a válasz során PUT (HTTP/1.1): A specifikus adat részben lévő állományt töltse fel az URL-ben megadott helyre DELETE (HTTP/1.1): Az URL-ben specifikált erőforrás törlésére vonatkozó kérelem 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 15
HTTP válasz felépítése státusz sor fejrész sorok protokoll sp státusz kód sp státusz szöveg cr lf fejrész mező név : érték cr lf fejrész mező név : érték cr lf cr fejrész mező név lf... : érték cr lf adat 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 16
HTTP válasz, példa protokoll verzió státusz kód státusz szöveg HTTP/1.1 200 OK Connection: close Date: Thu, 08 Sep 2004 12:00:15 CET Server: Apache/1.3.2 (Unix) Last-Modified: Mon, 22 Aug 2004 16:12:11 CET Content-Length: 5534 Content-Type: text/html Data pl. HTML oldal adat mező hossza (byte) adat típusa 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 17
HTTP státusz kódok 1xx = információs státusz kódok 2xx = sikeres objektum elérést leíró státuszkódok 3xx = átirányítást reprezentáló státusz kódok 4xx = hiba a kliensnél 5xx = hiba a szervernél Példák 200 OK A kérelem feldolgozva, a kért objektum az adat részben megtalálható 301 Moved Permanently A kért objektum helye megváltozott, az új URL megtalálható később az adat részben 400 Bad Request A kérelem nem értelmezhető 404 Not Found A kérelem értelmezhető, de a megadott objektum nem található a megadott helyen 505 HTTP Version Not Supported A szerver nem támogatja a megadott protokoll verziót 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 18
HTTP válasz, az adat típusa MIME típusok (Content-type) (Multipurpose Internet Mail Extensions) text/html Megjelenítés a böngészőben application/msword Megjelenítés MS Word-ben application/octet-stream Mentés-Megnyitás dialógus application/x-zip Mentés-Megnyitás dialógus image/gif Megjelenítés a képmegjelenítővel Adott böngésző esetében definiálva vannak az összerendelések 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 19
Felhasználó azonosítás Felhasználó jogosultság ellenőrzése az erőforrások hozzáféréséhez Meghatalmazás (credentials) Felhasználónév Jelszó HTTP állapot mentes Minden kérelemnél a felhasználónak azonosítania kell magát Automatikus azonosítás megoldása Kliens oldalon, Cookies Szerver oldalon, Session kezelés (állapotok létrehozása) 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 20
HTTP felhasználó azonosítása kliens szerver Cookie 1.) TCP kapcsolat kiépítése 3.) HTTP kérelem 2.) TCP válasz 4.) 401 Authorization Request 5.) HTTP kérelem Authorization: <cred> 7.) HTTP kérelem Authorization: <cred> 6.) HTTP válasz 8.) HTTP válasz Authorization 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 21
Cookies Összetevői Specifikus fejléc mező a válasz üzenetben Specifikus fejléc mező a kérelem üzenetben Cookie-k nyilvántartása a kliens oldalon (a böngésző menedzseli) Adatbázis a szerver oldalon 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 22
Cookies, példa kliens szerver 1.) HTTP kérelem 3.) Hitelesítés 2.) 401 Authorization Request szerver DB 4.) HTTP válasz Set-cookie: 3256 Cookie nyilvántarás: index: 3256 5.) HTTP kérelem Cookie: 3256 6.) HTTP válasz 3.) HTTP kérelem Cookie: 3256 4.) HTTP válasz 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 23
Feltételes GET kérelem A cél: a kliens ne töltse le a szerverről az adott objektumot, ha a kliens cache állományában szerepel a legutóbbi verzió A kliens egy feltételes GET kérelmet küld a szervernek, melyben megadja a cache állományában tárolt objektum dátumát A szerver összehasonlítja az általa nyilvántartott objektum dátumával és annak megfelelően küld választ a kliensnek 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 24
Feltételes kérelem, példa kliens szerver Nem módosult: 3.) HTTP kérelem If-modified-since: dátum 4.) HTTP válasz HTTP/1.1 304 Not Modified Módosult: 3.) HTTP kérelem If-modified-since: dátum 4.) HTTP válasz HTTP/1.1 200 OK 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 25
HTML (Hypertext Markup Language) Nem programozási nyelv Dokumentumok megjelenítése Megjelenített adatok Megjelenítés struktúrája Hibatűrő Az egyes hibák a nyelvi szintaktikában nem minden esetben okoznak fatális hibát a megjelenítés során Megjelenítendő szövegek felcímkézése Kezdő és vég címkék Hierarchikusan egymásba ágyazhatóak bizonyos elemek Nem kisbetű-nagybetű érzékenyek 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 26
HTML oldalak felépítés Dokumentum típusa Dokumentum fejléc Szövegtörzs <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"... > <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2"> <TITLE>vitt4100</TITLE> <SCRIPT Language = "JavaScript"> var os = navigator.useragent; </SCRIPT> </HEAD> <BODY> <CENTER>Hello World!</CENTER> </BODY> </HTML> Tartalom típusa Használt karakter kódtábla A böngészőben megjelenő cím JavaScript kód Kliens oldali dinamikus működés 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 27
Alapvető HTML címkék Szöveg formázása <p></p>: paragrafus, <h1></h1>,<h2></h2> : címsorok <center>: középre igazít, Szöveg kiemelés <em></em>: szöveg kiemelése Szöveg strukturálása <ul></ul>: nem sorszámozott lista, <li></li>: lista elem <ol></ol>: sorszámozott lista, <li></li>: lista elem <dl></dl>: definíció lista, <dt></dt>: meghatározás, <dd></dd>: definíció Táblázatok létrehozása <table></table>: táblázat létrehozása, <tr></tr>: sorok létrehozása, <td></td>: táblázat cella megadása Linkek létrehozása <a href= <url target= <cél ablak,keret> ></a>: kapcsolat leírása egy másik URL által megadott obejktummal Képek beágyazása <img src= <url> >: az URL-lel megadott kép beillesztése Minden címke egyedi attribútumokkal testreszabható 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 28
Keretek Keretek struktúrájának megadása <frameset cols= 110,* >: a képernyőn két oszlopot hoz létre egyiket 110px szélesen a másikat a fennmaradó helyre igazítva (rows: oszlopok szerinti szétválasztás) Keret tartalom leírása <frame name= main src= <URL> >: az adott URL-lel leírt objektumot tölti a böngésző a megadott keretbe Egymásba ágyazhatóak <frameset rows= 120,* > <frame name= header src= header.html > <frameset cols= 120,*> <frame name= menu src= menu.html > <frame name= content src= content.html > </frameset> </frameset> 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 29
Dinamikus HTML oldalak Alkalmat ad a böngészőn keresztül való adatmegadásra <form method= GET action= process.php target= top > Metódus (method) GET: Az oldalon megadott adatok a következő HTTP kérelem URL részében adódnak át POST: Az oldalon megadott adatok a következő HTTP kérelem speciális adat részében adódnak át Akció (action) A következő HTTP kérelem URL-jét adja meg Cél (target) Megadja, hogy a böngésző a HTTP kérelemre érkezett választ melyik ablakban, vagy keretben jelenítse meg 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 30
Dinamikus HTML oldalak Adatmezők I. <input type= text size= 10 name= index value= alap > Name Megadja annak a változónak a nevét, amely az adott adatmező értékét fogja tartalmazni Type=text Szöveges adatok megadására Type=password Jelszó megadására Type=submit/button Egyszerű nyomógomb megadására Type=radio Egy elem kiválasztására Type=checkbox Több elem kiválasztására 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 31
Dinamikus HTML oldalak Adatmezők II. <select name= component > <option selected>leg</option> <option>stomach</option> </select> Egy elem kiválasztása Több elem kiválasztása (<select multiple>) <textarea name= description cols= 80 rows= 20 > alapérték </textarea> Hosszabb szövegek megadására 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 32
Dinamikus HTML oldalak - Példa kliens szerver login: pwd: 3.) HTTP kérelem administrator ******* login 5.) HTTP kérelem <BODY> <FORM ACTION= login.php METHOD= post > login: <INPUT TYPE= text NAME= login ><br> pwd: <INPUT TYPE= password NAME= pswd ><br> <INPUT TPYE= submit VALUE= login > </FORM> </BODY> 4.) HTTP válasz login.php <? echo $login; echi $pswd;?> 6.) HTTP válasz 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 33
CSS (Cascading Style Sheets) Web dokumentumok megjelenítésének leírása Független az adatok megadásától Adott megjelenítési elemekhez tulajdonságok definiálása Pl. szélesség, magasság, háttér, betűméret, betűszín 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 34
Stílusok használata HTML címkékben HTML dokumentumban Külön fájlban <INPUT TYPE= text STYLE= font-weight:bold; > <HEAD> <STYLE type= text/css >.boldface {font-weight:bold;} </STYLE> </HEAD>... <INPUT TYPE= text CLASS= boldface > //style.css.boldface {font-weight:bold;} <HEAD> <LINK rel= stylesheet type= text/css href= style.css > </HEAD>... <INPUT TYPE= text CLASS= boldface > 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 35
CSS Elemek Címkék alapértelmezett stílusai p {} h1 {} table {} input {} button {} body {} Címkék specifikus stílusai p.colored {} h1.highlighted {} button.flat {} Címkefüggetlen stílusok.boldface {}.intalicface {} Oldal margók megadása body { margin-left: 10%; margin-right: 10%; } Paragrafus közök megadása p { margin-top: 8pt; margin-bottom: 18pt; } Karakterek stílusai em { font-style: italic; font-weight: bold; font-size: 150%;} Karaktercsalád megadása h1 { font-family: verdana, arial, helvetia; } Keretek megadása p.color { border: 1px #336699 dotted; } 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 36
SGML (Standardized General Markup Language) A HTML nyelv általánosítása Szabványosított elemeket tartalmaz (ISO 8879) A HTML 4.0 megfelel ennek a szabványnak 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 37
XML (Extensible Markup Language) Nyílt szabvány szöveges adatok ábrázolására Platform és szoftver gyártó független Adatábrázolás Strukturált, adatleíró szöveges meta-nyelv Megkönnyíti az adatok struktúrájának gépi felismerését Könnyen olvasható Nem olvasásra szánt Platform független Támogatja a nyílt adatformátumot SGML-ből származtatott Hasonlít a HTML-re Címkék használata A címkéknek nincs előre definiált jelentésük Nem adattárolásra optimalizált Sok helyet foglal az adatok leírása folytán 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 38
XML 2. Internetre optimalizált HTML > XHTML: olyan nyelv, ami XML szabályoknak megfelel Megköti a megengedett címkék használatának körét A címkékhez explicit megjelenítési szemantikát rendel Az XML moduláris A szemantikus WEB alapja A platform független web-es szolgáltatások, elosztott rendszerek kommunikációjának alapja XML dokumentum Bármilyen adatállomány (Szöveges fájl, socket byte-folyam, adatbázis objektum) 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 39
XML adatok megjelenítése Az XML nem támogatja az adatok megjelenítésének megadását, önálló megadás kell XSL Kiterjeszthető stílus nyelv, mely két részből áll XSLT, transzformációk Megadja, hogy alakítsunk át XML dokumentumot egy másik XML dokumentummá Forrás fa -> Cél fa XPath, útvonal nyelv Az XML dokumentumok adott részére vonatkozó hivatkozást tesz lehetővé előre definiált sablonok segítségével A hivatkozott rész átkerül a cél fa objektumba XSLT is alkalmazható az adatok transzformációjára 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 40
XML példa message to from subject text <message> <to>info@info.hu</to> <from>me@me.hu</from> <subject>darkness</subject> <text> Imprisoning me, All I that see Absolute horror. </text> </message> 2004. 10. 26. vitt4100 - WEB-es alkalmazások alapok, lukovszki@tmit.bme.hu 41