Web fejleszt s ii
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

Web fejlesztés II. PowerPoint PPT Presentation


  • 62 Views
  • Uploaded on
  • Presentation posted in: General

Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar [email protected] 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. Félévi tematika.

Download Presentation

Web fejlesztés II.

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web fejleszt s ii

Web fejlesztés II.

Illés Zoltán

ELTE Informatikai Kar

[email protected]


A web programoz s jelent se

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


F l vi tematika

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/


Http protokoll

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


Kliens szerver egy ttm k d s

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


V lasz jellemz k

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


Http kapcsolat p lda

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.


Kliens pull tartalomcsere

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


Szerver push tartalomfriss t s

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)


Html interakt v elemei i

HTML interaktív elemei I.

  • Input elem

    • <input type=típus name=..value=..size=..>

    • type=text

      • Readonly paraméter

    • type=hidden

    • type=password


Html interakt v elemei ii

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


Html interakt v elemei iii

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>


Html interakt v elemei iv

HTML interaktív elemei IV.

  • File feltöltés

    • <input type=file name=filetolt value=„Tallóz”>

  • Form

    • <form action=mailto:[email protected]>

    • <form action=program method=post v. get Enctype=„multipart/form-data”>

      • Input elemek

    • </form>


Form post adatk ld s

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


Form get adatk ld s

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


Legfontosabb k rnyezeti v ltoz k

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


Ssi server side include

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


Cgi common gateway interface

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.


Ssi cgi programeszk zei

SSI, CGI programeszközei

  • Tetszőleges programozási nyelv (c++)

  • Shell script

  • PHP (Programmable Hypertext Preprocesszor)

  • …és még sokan mások


Web fejleszt s ii

Köszönöm a figyelmet!

Illés Zoltán

Budapest, Pázmány Péter sétány 1/c

[email protected]


  • Login