Web fejleszts II Ills Zoltn ELTE Informatikai Kar

Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar zoltan. illes@elte. hu E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a

Félévi tematika • HTML interaktív elemek • SSI, CGI jelentése, használata • Javascript – http: //developer. mozilla. org/en/docs/Java. Script/ – http: //developer. mozilla. org/en/docs/DOM/ • Shell script • PHP – http: //www. php. net • AJAX – http: //developer. mozilla. org/en/docs/AJAX/ E L T E I n f o r m a ti k a

HTTP protokoll • RFC 2068 - HTTP 1. 0, 1990 • RFC 2616 - HTTP 1. 1, 1999 • Letölthető: www. w 3. org – http: //www. w 3. org/Protocols/rfc 2616. 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 E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a

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 WWWAuthenticate fejléccel megadott módon • Tartalom – Fejlécsor(ok)(Content-Type: text/html ) – CRLF – HTML oldal E L T E I n f o r m a ti k a

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. E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a

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) E L T E I n f o r m a ti k a

HTML interaktív elemei I. • Input elem – <input type=típus name=. . value=. . size=. . > – type=text • Readonly paraméter – type=hidden – type=password E L T E I n f o r m a ti k a

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 …> E L T E I n f o r m a ti k a

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> E L T E I n f o r m a ti k a

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> E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a

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&b arack=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 E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a

SSI, Server Side Include • • Nem készít teljes html oldalt  Parancsok száma erősen kiszolgálófüggő  – Irix-en a file név relatív!! •  – Az irix-en a parancsnév teljes név!! A HTML oldalon is van X jog! • #!/usr/bin/sh • Példa: ssi. htm E L T E I n f o r m a ti k a

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. E L T E I n f o r m a ti k a

SSI, CGI programeszközei • Tetszőleges programozási nyelv (c++) • Shell script • PHP (Programmable Hypertext Preprocesszor) • …és még sokan mások E L T E I n f o r m a ti k a

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 E L T E I n f o r m a ti k a