Fejlett Programozási Technikák 2.

Slides:



Advertisements
Hasonló előadás
RESTful Web Service tesztelése
Advertisements

HTML nyelv.
Hálózati és Internet ismeretek
MSN-kompatibilis egyéni emotikonok kezelése XMPP/Jabber-ben Bemutatás Németh Ádám,
1 Internet. 2 WWW  World Wide Web  Hivatkozásokkal összekötött hipermédia dokumentumok rendszere  Dokumentumok -> Weboldalak  A weboldalak hipertext.
Webtech Vizsgakérdések. Fizikai alapok •MAC address •Vake on LAN •Egyenes és keresztkötésű kábel •Két gép keresztkötésű összekötése ábrán •Alháló:host+switch+router.
IPSec.
Felhasználói felületek és üzleti logika Bollobás Dávid ASP.NET
Social Networking alkalmazás fejlesztése ASP.NET 3.5-tel Árvai Zoltán Consultant, Trainer Számalk Oktatóközpont.
HTML5 alapú fejlesztő és futtató környezet megvalósítása
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
Amit a HTML-ről érdemes tudni
Fejlett Programozási Technikák 2.
HTML nyelv.
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Leírónyelvek: HTML és XHTML
Készítette: Rummel Szabolcs
Készítette: Nagy-Szakál Zoltán 2007.
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
WEB Technológiák A HTML és a CGI ME Általános Informatikai Tsz. dr. Kovács László.
WSDL alapismeretek A WSDL (Web Services Description Language – Web szolgáltatások leíró nyelv) egy XML-alapú nyelv a Web szolgáltatások leírására és azok.
Kliensoldali Programozás
SSL és TLS. Mi a TLS SSL – Secure Socket Layer TLS – Transport Layer Security Biztonságos transport layer a böngésző és a szerver között SSL v3.0 : Internet.
Szombathely Dinamikus WEB programozás: PHP és JSP.
Webszerkesztés Űrlapok a HTML-ben. Űrlap létrehozása Űrlapunk tartalma a … elemek között fog helyetfoglalni Egy lapon több űrlap is elhelyezhető Több.
SOAP alapismeretek A SOAP egy egyszerű XML alapú protokoll, ami lehetővé teszi, hogy az alkalmazások információt cseréljenek a HTTP-én keresztül. Forrás:
WEB Technológiák WEB-DB és XML ME Általános Informatikai Tsz. dr. Kovács László.
PHP III. Fájlok, űrlapok.
PHP VII Sütik, munkamenetek. Sütik Mi az a süti? A süti (cookie) állapotot tárol a felhasználó böngészőjében. Pl. ha egy oldalon beállítható, hogy milyen.
…az ISA Server 2006 segítségével Gál Tamás Microsoft Magyarország.
Készítette: Heizler Katalin (ddkl9n) Békési Erika (wz6phc)
XHTML – a tanultak összefoglalása
Űrlapok és keretek.
CSS A CSS bemutatása.
HTML nyelv.
Készítette: Lipp Marcell
Web Architecture. Development of Computing Architectures Monolithic mainframe programming Client Server Real Client Server Web Programming.
HTML5 alapú fejlesztő és futtató környezet megvalósítása
Web fejlesztés V. Illés Zoltán ELTE Informatikai Kar
HTML 2. Űrlapok
Illés Zoltán ELTE Informatikai Kar
Java web programozás 11..
Hálózat menedzsment Óravázlat Készítette: Toldi Miklós.
Html nyelv (HyperText Markup Language)
Webprogramozó tanfolyam Űrlapok (form-ok). Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció,
HTML ÉS PHP (Nagyon) rövid áttekintés. ADATBÁZISRENDSZEREK MŰKÖDÉSI SÉMÁJA Felh. interakció DB Connector MySQL ? A gyakorlaton:
Illés Zoltán ELTE Informatikai Kar
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Webprogramozó tanfolyam
Java web programozás 2..
Java web programozás 6..
Bevezetés az informatikába 11. előadás Internet. Egyetlen nagy egységes elveken működő világhálózat hálózatok összekapcsolása nagy világhálóvá csomagkapcsolt.
Webes technológiák 10/1. Bilicki Vilmos Árpád tér 50.-es szoba 3411-es mellék.
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv
HTML, XML szerkesztés Vezető: Majzik Zsuzsa
Webszervizek (JAX-WS, és JAX-RS) bemutatása
Alkalmazott Informatikai Tanszék
Fejlett Programozási Technikák 2.
Alkalmazott Informatikai Tanszék
Web technológia alapjai
Mobil hálózatok és alkalmazásaik tehetséggondozó program
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
Alkalmazott Informatikai Tanszék
Előadás másolata:

Fejlett Programozási Technikák 2. 14/1

Bilicki Vilmos bilickiv@inf.u-szeged.hu http://www.cab.u-szeged.hu/~bilickiv Árpád tér 50.-es szoba 3411-es mellék

Követelmények, tudnivalók Vizsga év végén 2 zárthelyi Jegyzet van (lesz) Weboldal lesz: http://www.cab.u-szeged.hu/~bilickiv/fpt2

Miért érdekes a téma Nők Pénz Autók

Miért érdemes használni? Vékony kliens technológia Elosztott rendszerek Platform független Elterjedt Sokoldalú

Tematika I. rész A World Wide Web alapjai A HTTP protokoll Az SHTTP protokoll A TLS protokoll A HTML nyelv CSS Az XML nyelv WEBDAV WAP

II. rész Dinamikus tartalom CGI Szerver oldali programozás Kliens oldali programozás Java

III. rész Web szerverek Apache Iplanet 3 rétegű architektúrák Servlet engine-k

IV. rész Alkalmazás szerverek Weblogic iPlanet JRun J2eesdk

Bevezető Vannevar Bush:As we may think (1945) Theodor Holm Nelson:Memex (hyprtext) CERN: HTML Átviteli protokol: HTTP

HTTP(Hyper Text Transfer Protocol) Kliens-szerver modell Állapotmentes Alkalmazásszintű protokol Megbízható átviteli közegre épül Új fogalmak: Webszerver Proxy szerver

HTTP 1.1 Kapcsolatorientált Részletes proxy specifikáció 80-as port URI (Universal Resource Identifier)

URI Rfc2396 <protokol>:<protokol specifikus rész> <protokol>://<azonosítás><elérési-útvonal>?<Lekérdezés> US-ASCII Más karaterek: %

URL HTTP specifikus: URL (Universal Resource Locator) http : // host [ : ] [ port ] [ abszolút-útvonal [ ? query ] ] ftp://felhasznalo:jelszo@amadea.inf.u-szeged.hu Relatív útvonal

HTTP üzenetek Kérés (request) Válasz (response) kezdő sor fejléc sorok üres sor az üzenet tartalma

Kérés üzenetek(kezdő sor) GET OPTIONS POST HEAD TRACE

GET GET / HTTP/1.1 Host: sirius.cab.u-szeged.hu HTTP/1.1 200 OK Date: Thu, 13 Dec 2001 16:55:37 GMT Server: Apache/1.3.20 (Unix) PHP/4.0.6 Transfer-Encoding: chunked Content-Type: text/html 8a0 <HTML> <HEAD> <TITLE>Irinyi Kabinet</TITLE> </HEAD> <body... </ADDRESS> </BODY> </HTML>

OPTIONS OPTIONS /cgi-bin/szotarE HTTP/1.1 Host: sirius.cab.u-szeged.hu HTTP/1.1 200 OK Date: Mon, 17 Dec 2001 10:05:54 GMT Server: Apache/1.3.20 (Unix) PHP/4.0.6 Content-Length: 0 Allow: GET, HEAD, POST, OPTIONS, TRACE

HEAD HEAD /teszt/ HTTP/1.1 Host: wilma.cab.u-szeged.hu HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Cache-Control: max-age=86400 Expires: Tue, 18 Dec 2001 14:47:33 GMT Content-Location: http://wilma.cab.u-szeged.hu/teszt/index.html Date: Mon, 17 Dec 2001 14:47:33 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Mon, 17 Dec 2001 14:03:32 GMT ETag: "fc50cd9c387c11:88e" Content-Length: 83

POST POST /teszt/ HTTP/1.1 Host: wiliam.u-szeged.hu adat: research

TRACE TRACE / HTTP/1.1 Host: wiliam.u-szeged.hu Adat: research HTTP/1.1 200 OK Server: Netscape-Enterprise/6.0 Date: Sun, 23 Dec 2001 12:49:45 GMT Content-type: message/http Content-length: 62

Egyéb CONNECT DELETE PUT

Fejléc mezők Host If-Modified-Since User-Agent Adat: research …

Válasz üzenet Állapot mező Válasz fejléc mezők Erőforrás erőforrás fejléc erőforrás tartalom

Állapot mezők 1xx – Információs 2xx – Siker 3xx – Átirányítás 4xx – Kliens oldali hiba 5xx – Szerver oldali hiba

Válasz fejléc WWW-Authenticate Age Cache-Control Expires Content-Type

MIME Text Plain Html Image Audio Video Application

Biztonság HTTP -> magas rendelkezésre állás Más szempontok: adatok titkossága adatok megbízhatósága egyének azonosítása

Azonosítási eljárások Basic Authentication Digest Authentication

Basic Authentication UID Password Realm HTTP/1.1 401 Authorization Required

Példa HTTP/1.1 401 Authorization Required Date: Fri, 28 Dec 2001 08:24:32 GMT Server: Apache/1.3.20 (Unix) PHP/4.0.6 X-Powered-By: PHP/4.0.6 WWW-Authenticate: Basic realm="My Realm" Transfer-Encoding: chunked Content-Type: text/html Authorization: Basic base64(user:pass)

Hátrányok Nem biztonságos Használata mellőzendő, veszélyes Lehallgatható Nem titkosított Nincs megoldva a jelszó elosztása Használata mellőzendő, veszélyes Ha mégis akkor: Csak generált jelszavakkal szabad

Digest Authentication challenge-response nonce URI Idő Véletlen szám … Kivonatoló függvény (hash) MD5 Nehéz visszafejteni

A kérés paraméterei Challenge Domain Nonce Opaque Stale Algorithm Qop-int

A válasz paraméterei username digest-URI message-qop cnonce nonce-count response

message-qop Nincs Auth Auth-int A1 = username-value:realm-value:passwd A2 = Method:digest-uri-value response = "KD(H(A1),nonce:H(A2))" Auth response = "KD(H(A1),nonce:nonce-count:cnonce:qop:H(A2))" Auth-int A2 = Method:digest-uri-value:H(entity-body)

Példa WWW-Authenticate: Digest realm="testrealm@host.com", HTTP/1.1 401 Unauthorized WWW-Authenticate: Digest realm="testrealm@host.com", qop="auth,auth-int", nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093", opaque="5ccc069c403ebaf9f0171e9517f40e41" Válasz: Authorization: Digest username="Mufasa", uri="/dir/index.html", qop=auth, nc=00000001, cnonce="0a4f113b", response="6629fae49393a05397450978507c4ef1",

Előnyök Titkosított jelszó Szótáras támadás védhető(cnonce) Megvéd a replay támadásoktól Biztosít bizonyos adatbiztonságot

Hátrányok Nem mond semmit a jelszó kiosztásáról Nincs titkosítva a tartalom Limitált integritás védelem A nonce használatának teljesítménybeni korlátai vannak

Felhasznált technológia Szimmetrikus kulcsú titkosítás Gyors Probléma a közös kulcs eljuttatása Aszimmetrikus (nyilvános) kulcsú titkosítás Lassú Nem jelent problémát a kulcs publikálása Digitális Aláírás Digitális Bizonyítvány

Új megoldások Két megközelítési mód: Új réteg: Módosított HTTP TLS SHTTP

SHTTP Felülről kompatibilis a HTTP protokollal Üzenetek becsomagolása CMS,MOSS Digitális aláírás MAC nonce Kulcssere és titkosítás Üzenet integritás és küldő azonosítás Aktualitás ellenőrzése Sok titkosító algoritmus

SHTTP Hasonló üzenet mint a HTTP protokollnál: Kérés: Secure * Secure-HTTP/1.4 Válasz: Secure-HTTP/1.4 200 OK

TLS (Tranport Layer Security) Új réteg bevezetése: Netscape SSL Microsoft PCT IETF TLS

TLS felosztása I. TLS Handshake Session identifier Peer certificate Compression method Cipher spec Master secret Is resumable

TLS felosztása II. TLS Record Fragmentálás Tömörítés Tartalom védelem Titkosítás

Kapcsolat felépítés Hello üzenetcsere Rejtjelezési paraméter csere Bizonyítvány csere Főkulcs Adatcsere

A HTML nyelv Megjelenítésre koncentrál Gépek számára nehezen értelmezhető Tag-ek segítségével épül fel a dokumentum(<elem>) Böngésző elrejti a kódot Jelenleg HTML 4.01 http://www.w3c.org

Felépítés információ a HTML verziójáról fejrész (header) törzs (body)

Egy egyszerű HTML oldal <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <TITLE>Ez a fejléc</TITLE> </head> <body> <p>Hello világ! </body> </html>

Megjelenítve

DTD (document type declaration) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Fejléc (header) Általában nem jelenik meg a képernyőn A dokumenturól és a kapcsolatról tartalmaz fontos információkat <title> <meta> <link>

Példa meta fejléc <META http-equiv="Cache-Control" content="no-cache"> <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-2"> <META name="Author" content="Bilicki Vilmos"> <META name="keywords" lang="hu" content="html, css, jegyzet">

Törzs <body> Célszerű a formázásra css-t alkalmazni Background Text Link Vlink Alink Célszerű a formázásra css-t alkalmazni

Logikai felépítést definiáló elemek Címsor elemek(<h1>,…) Szövegrészek csoportosítása <div> <span> Ennyi! az XML-t erre fejlesztették ki

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <TITLE>Bemutatkozás</TITLE> </HEAD> <body> <h1 id="munkatársak">Munkatársak</h1> <DIV id="beosztottak"> Cégünk munkatársai közé tartozik <SPAN id="portás">Kovács Lajos</SPAN> és <SPAN class="titkár">Nagy Péter</SPAN>. </DIV> <DIV id="kutatók"> A kutató osztály munkatársai <SPAN id="vegyészet">Kovács János</SPAN>, és <SPAN id="számítástechnika">Nagy Szabolcs</SPAN>. </body> </html>

Képernyőn

Szöveg formázása A beírt szöveg elveszíti formázását. Szöveg formázás megtartása (<pre>) Bekezdések (<p>) Sortörés (<br>) Nonbreakable space ( ) Kiemelés (<em>) Vastag betű (<strong>) Idézet (<cite>) Felső index (<sup>) Alsó index (sub)

Listák Számozatlan(<ul>) Számozott (<ol>) Az elem <li> Definició (<dl>) Az elem <dt> vagy <dd>

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <title>Listák</title> </HEAD> <body> <ul> <li>alma <li>körte <li>dió </ul> <ol> <dl> <dt>alma <dd>Az alma egyik legfotosabb vitaminforrásunk. <dt>dió <dd>A dió kemény gyümölcs </dl> </body> </html>

Képernyőn

Táblázatok Egyik legfontosabb pozicionáló elem <table> <tr> <td> <th> <thead> <tbody> <tfoot> <caption>

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>Táblázatok</title></head> <body> <table border="1"> <caption>Minta táblázat</caption> <tr> <th>1. oszlop</th> <th>2. oszlop</th> <th>3. oszlop</th> </tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella</td> <td>1. sor, 3. cella</td> <td>2. sor, 1. cella</td> <td>2. sor, 2. cella</td> <td>2. sor, 3. cella</td> </table> </body> </html>

Képernyő

Oszlop, sor formázás colspan rowspan colgroup col

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Táblázatok</title> </head> <body> <table border="1"> <caption>Minta táblázat</caption> <tr> <th colspan="2">1., 2. oszlop</th> <th>3. oszlop</th> </tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella</td> <td rowspan="2"> 1. sor, 3. cella, 2. sor, 3. cella </td> <td>2. sor, 1. cella</td> <td>2. sor, 2. cella</td> </table> </body> </html>

Képernyő

Hivatkozások <link> <a href=“elso.html#1”> <a name=“1”> <id=“1”>

Keretek <frameset> <frame> target

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Több keretes példa</title> </head> <frameset rows="10%,*" > <frame src="a.html" name="a"> <frameset cols="20%,*"> <frame src="b.html" name="b"> <frame src="c.html" name="c" > </frameset> </html>

Képernyő

Objektumok,képek, appletek <img> <map><area> <iframe> <object> classid codebase codetype Egymásba ágyazás

Példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> </html> <head> <title>Képek, térképek</title> </head> <table> <tr><td> <object data="menu.x" type="x/x" height="50" width="50"> <img src="../../graphics/menu.png" alt="menük" usemap="#terkep" border="0"> </object> </td> </tr> <tr><td><iframe src="12.html"> </table> <map name="terkep"> <area href="elsomenu.html" coords="30,50,39,31,110,31,110,50,30,50" shape="poly"> <area href="masodikmenu.html" coords="80,30,100,110" shape="rect"> </map> </body>

Képernyő

Űrlapok <form> action method get post name

Elemek <input> text password file hidden radio checkbox button submit reset

Elemek <select> <textarea> size multiple name option rows cols

Példa I. rész <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//HU" "http://www.w3.org/TR/html4/strict.dtd"> </html> <head> <title>Kérdoiv</title> </head> <body> <form action="ertekelo.php" method="post" name="form1"> <table> <tr><td>Vezetéknév:</td> <td><input type="text" name="vnev" size="20" maxlength="50"></td> </tr> <tr><td>Keresztnév:</td> <td><input type="text" name="knev" size="20" maxlength="50"></td> <tr><td>Nem:</td> <td><input type="radio" name="nem" value="f" checked> <input type="radio" name="nem" value="n"></td>

Példa II. rész <tr><td>Osztály:</td> <td><select name="osztaly"> <option value="a">A osztály</option> <option value="b" selected>B osztály</option> </select> </td> </tr> <tr><td colspan="2" align="left"> Leírás: <tr><td colspan="2" align="center"> <textarea name="leiras" cols="30" rows="5">Ide kell beírni a leírást </textarea> <input type="submit" value="Elküld"> </table> </form> </body> </html>

Képernyő