Web fejlesztés II.

1. Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar zoltan.illes@elte.hu

2. A Web programozás jelentése • Statikus oldalak hiányosságai • Kliens-Szerver együttműködés • Kliens Pull, szerver push • Interaktív HTML elemek • Kliens programok • Szerver oldali programok • SSI, CGI

3. Félévi tematika • HTML interaktív elemek • SSI, CGI jelentése,használata • Javascript • http://developer.mozilla.org/en/docs/JavaScript/ • http://developer.mozilla.org/en/docs/DOM/ • Shell script • PHP • http://www.php.net • AJAX • http://developer.mozilla.org/en/docs/AJAX/

4. HTTP protokoll • RFC 2068 - HTTP 1.0, 1990 • RFC 2616 - HTTP 1.1, 1999 • Letölthető: www.w3.org • http://www.w3.org/Protocols/rfc2616/rfc2616.html • Default TCP port: 80 • HTTP üzenet: Kérés vagy Válasz • A kérés, válasz formátumok azonosak • Formátum: fejlécsor(ok) CRLF törzs • Kérés fejléc felépítése: Típus(GET,HEAD,stb) SP URI SP [HTTP version] • Kérés fejlécek közt a Host fejlécsor használata gyakori. • A válasz fejlécsor felépítése: HTTP version SP Status Code SP Status szöveg

5. Kliens szerver együttműködés • Kliens • Egy kliens program(jellemzően böngésző) a 80-as TCP portra küld egy http kérést • Böngésző címsorban adott oldal megadás • (http, https, ftp) • HTML oldal egy eleme (form) kérést küld • Szerver • HTTP kiszolgáló elküldi a válaszlapot • Elindít egy programot, aminek eredményét, mint válaszlapot küldi el. • Elindít egy vagy több programot ami(k)nek eredménye a válaszlap része

6. Válasz jellemzők • HTTP szerver verzió • Válasz státuszkódja (200=OK, stb.) • 300-as kódcsoport, kliensnek valamit tenni kell még • 400-as kódcsoport, hiba • 500-as kódcsoport, szerver hiba • Válasz fejléc, kódhoz tartozik • Pl. 401, jelszó kell, kérjen a kliens és küldje el a WWW-Authenticate fejléccel megadott módon • Tartalom • Fejlécsor(ok)(Content-Type: text/html ) • CRLF • HTML oldal

7. HTTP kapcsolat példa • telnet parancs kiadása • Set crlf // return==CR&LF, nem fontos • o gépnév 80 ; port szám:80 • GET / HTTP/1.1 ; fődokumentum • Host: gépnév • A telnet miatt a HTTP/1.1 verzió adat nem kell(het). • CRLF • … • Válasz • Természetesen akár a putty terminál kliens is használható. • A http protokoll verziószám IIS esetén nem kell.

8. Kliens Pull tartalomcsere • A html oldal tartalmaz egy frissítési utasítást (refresh) • <meta http-equiv=refresh • Content=„4;URL=másikcím > • http://maxim.inf.elte.hu/~illes/hajra.html

9. Szerver push tartalomfrissítés • A szerver gépen a választ adó program, több oldalt küld, egymás után. • Content-type= multipart/x-mixed; boundary=elvalasztas • --elvalasztas • Szabályos html oldal • --elválasztás • Újabb szabályos oldal • Stb. • --elvalasztas– (vége)

10. HTML interaktív elemei I. • Input elem • <input type=típus name=..value=..size=..> • type=text • Readonly paraméter • type=hidden • type=password

11. HTML interaktív elemei II. • <input type=button name= …> • <button> Alma </button> • <input type=submit ….> • <input type=reset value=„Mégse”> • <input type=radio……checked> • <input type=checkbox …. checked> • <input type=image src=filenév …>

12. HTML interaktív elemei III. • Szövegterület mező • <textarea name=velemeny rows=3 cols=50> Írj ide valamit…. • </textarea> • Select (választó) elem • <select name=ar size=5 multiple> • <option value=100> 100 Ft. • <option value=200> 200 Ft. • … • </select>

13. HTML interaktív elemei IV. • File feltöltés • <input type=file name=filetolt value=„Tallóz”> • Form • <form action=mailto:alma@jonatan.hu> • <form action=program method=post v. get Enctype=„multipart/form-data”> • Input elemek • </form>

14. Form Post adatküldés • Post • A form összes input adata a feldolgozó program std. input-jára kerül. • Az adatokat az & jel köti össze. • .,?,!,+,stb. kódolva (%xx), hexa formában • Az adatok a HTTP kérés törzsében!!! utaznak • Példa: POST /program.php HTTP/1.1 Host: almafa.elte.hu …ez egy üres sor…. alma=golden&barack=sárga

15. Form GET adatküldés • Get • QUERY_STRING környezeti változóba kerül az adat • Ez az adat a böngésző címsorában is látszik • http://almafa.elte.hu/program.php?alma=golden&barack=sárga • Ez a HTTP 1.1 alapján az alábbi kérésnek felel meg: • POST /program.php?alma=golden&barack=sárga HTTP/1.1 • Host: almafa.elte.hu

16. Legfontosabb környezeti változók • REQUEST_METHOD (Get,Post) • REMOTE_ADDR • Kérést küldő gép ip. Címe (a.b.c.d) • REMOTE_HOST • Kérést küldő gép neve (valami.elte.hu) • HTTP_USER_AGENT • A kérést küldő böngésző típusa

17. SSI, Server Side Include • Nem készít teljes html oldalt • <!--#parancs név=érték --> • Parancsok száma erősen kiszolgálófüggő • <!--#include file=„alma.txt” --> • Irix-en a file név relatív!! • <!--#exec cmd=„parancsnév” --> • Az irix-en a parancsnév teljes név!! A HTML oldalon is van X jog! • #!/usr/bin/sh • Példa: ssi.htm

18. CGI, Common Gateway Interface • Nem programozási nyelv • Teljes oldal küldés • Kliens->szerver közötti adatátadás módja(karakteres adatcsere)(get,post) • Kötelező tartalomleíró fejlécsort küldeni • A fejlécsor(ok) után üres sort is kötelező küldeni (RFC 2616) • Irix-en az action értéke relatív név, kiterjesztése cgi vagy pl.

19. SSI, CGI programeszközei • Tetszőleges programozási nyelv (c++) • Shell script • PHP (Programmable Hypertext Preprocesszor) • …és még sokan mások

20. Köszönöm a figyelmet! Illés Zoltán Budapest, Pázmány Péter sétány 1/c Zoltan.Illes@elte.hu