2012. november 4. IX. előadás: Statikus és dinamikus weboldalak, adatbázisok

Átírás

1 IX. előadás: Statikus és dinamikus weboldalak, adatbázisok november 4.

2 Előző óra tartalmából Az internet működését meghatározó TCP/IP protokollstruktúra rétegesen épül fel Fizikai & adatkapcsolati, hálózati, transzport és alkalmazási szinteket különböztetünk meg Ezek tulajdonképpen külön-külön megválaszthatóak Wifi hálózaton, TCP protokollal, levelezünk UPC kábeltévéjéről indulva, UDP protokolon, IPTV-t nézünk Alkalmazási szinthez tartozó protokollok például: DNS, Telnet, FTP, POP3, SMTP, HTTP

3 IP look-up Nézzük meg a saját IP címünket Nézzük meg tetszőleges IP címről, hogy kihez tartozik

4 Miről lesz szó? World Wide Web, a világháló URL HTTP HTML Böngésző programok Dinamikus weboldalak, adatbázisok Keresőmotorok

5 World Wide Web, a világháló

6 Mi a World Wide Web? Mi is az a Web? Csak egy a sok protokol, szerver és kliensprogram hármas közül. wikipediából Miután 1989-ben felvázolta egy az internet és a hipertext tulajdonságait összekapcsoló új tudástár lehetőségét, Tim Berners-Lee 1990 karácsonyára létrehozta a működő világhálóhoz szükséges összes eszközt: az első webböngészőt (amit WorldWideWeb-nek nevezett el, és ami egyben webszerkesztő is volt), az első webszervert (info.cern.ch), és az első weboldalakat, amelyek a projekt leírását tartalmazták. Webböngésző, browser. A felhasználó (kliens) gépén futó program, ami HTTP-vel kommunikál a webszerverrel. Ez szolgálja (serve) ki a kéréseket, küldi vissza alap esetben a weboldalakat, a HTML formátumú hipertext fájlokat.

7 World Wide Web A World Wide Webhez, röviden webhez tehát az kell, hogy webszerverek a HTTP protokoll segítségével HTML formátumú dokumentumokat juttassanak célba, amik URL formátumú hiperlinkekkel mutatnak egymásra (és esetlegesen más, nem HTML formátumú dokumentumokra). Tehát a három alapvető szabvány, amire a világháló épül a HTML hipertext oldalakat leíró nyelv, az ezeket az oldalakat az interneten beazonosító URL címzési szabvány, és az oldalak letöltését lehetővé tevő HTTP átviteli protokoll. Az első magyar webszerver: (lásd: h.html)

8 URL Az egységes erőforrás-azonosító (uniform resource locator, URL) az a címzési mód, ami ahhoz kell, hogy dokumentumokra hivatkozhassunk a neten, ez áll a HTML fájlok hiperlinkjeiben, ez a web alapja ben hozzák létre két létező konvenció összekapcsolásával: a domain nevek 1985 óta létező szabványa (pl. info.cern.ch) a mappák és állományok elérési útvonalának megadását szolgáló konvenció, amelyben a perjel (/) szolgál a mappa- és állománynevek elválasztására (pl. C:/Dokumentumok/orak 2012 osz/bevinf1213/bevinf pdf)

9 URL Az URL tipikusan három fő részből áll. Megadja: az elérési protokollt (http), a kiszolgáló gépet (index.hu) a dokumentum kiszolgálón belüli hivatkozási címét (tech/hardver/legh071107) URL-je van minden oldalnak, képnek, videónak, ami a weben van. Ezt használjuk az img src-ben, és az a href-ben (ezekről még később lesz szó).

10 Mi az URL-ben a? jel. Az URL-ek néha nagyon hosszúak és? & jelek vannak a végén. Ezek alapesetben az űrlapokba beírt, kiválasztott értékek Vagy bármilyen paraméterek Nem mind szükséges feltételei a megfelelő válasz megérkezésének

11 Miért szerepel a www előtag a webcímekben? annak a korábbi konvenciónak az eredménye, amely alapján az internet szervereket az alapján nevezik el, amilyen szolgáltatást biztosítanak ennek megfelelően a webszerverek gyakran a www megnevezést kapják, ahogy az ftp például az FTP szerverek elnevezése (de ezek nem szigorú szabályok, csak konvenciók, az URL első eleme rögzíti, hogy milyen protokoll segítségével kell kommunikálni)

12 Web Net Az eddigiek alapján már világos lehet, de kihangsúlyozzuk: A World Wide Web és az internet nem szinonimák. A WWW csak az egyik alkalmazás az interneten használt sok tucatnyi közül. (Levelezés, fájlcsere, stb.) Körülbelül 30 évvel az internet és az után született. A WWW a ma legelterjedtebb, a gyakorlatban legfontosabb alkalmazás a neten.

13 Miért lett olyan sikeres a WWW? I. Fogalmi-technológiai újdonság: A hipertexttel összekapcsolt tudástár elképzelése a hatvanas évek olyan projektjeihez kötődik, mint Ted Nelson Project Xanadu-ja, és Douglas Engelbart on-line System-je (NLS), és ezek pedig a Vannevar Bush által 1945-ben felvetett mikrofilm alapú memex-ből merítettek ihletet Fontos újítás volt a korábbi kétirányú hiperlink koncepciókhoz képest, hogy a web egyirányú kapcsolatok (linkek) létrehozásáre épül Ennek az újításnak az egyik eredménye a halott linkek jelenléte a weben

14 Miért lett olyan sikeres a WWW? II. Jogi-gazdasági okok: a World Wide Web szabad szabvány a web kezdeti időszakában még egy másik protokoll, a Gopher volt a meghatározó a webes tartalmak beazonosítása és keresése kapcsán 1993 februárjában a Gopher protokoll tulajdonosa a University of Minnesota bejelentette, hogy licencdíj fizetéséhez köti a Gopher szerverek használatát, és bár később aztán a Gopher-t a GNU GPL licenc alatt tették újra közzé, akkor már rég a web volt a meghatározó megoldás az online információ beazonosítására és keresésére A gyors váltás részben annak köszönhető, hogy 1993 áprilisában a CERN bejelentette, hogy a World Wide Web ingyenesen használható szabvány A váltást elősegítette a World Wide Web kötetlenebb formátuma és a keresési paradigmákban bekövetkezett változás (erről még a keresőmotoroknál részletesebben beszélünk)

15 A világháló egy részlete kép forrása: Wide Web

16 Mi kell ahhoz, hogy weboldalunk legyen? Kell egy internetre kötött számítógép, webszerverrel Egyetemen mindenkinek lehet, lásd Ingyenes tárhelyszolgáltatónál regisztrálunk Internet előfizetéshez sokszor adnak Tárhelyszolgáltatónál bérelünk helyet el kell készíteni a HTML oldalakat, képeket erre kifejlesztett programokkal, vagy haladó geekek egyszerű szövegszerkesztővel Fel kell tölteni. Ma már gyakran egy blogszolgáltatónál vagy közösségi oldalon készítenek a felhasználók maguknak oldalt

17 HTTP belseje Ez is csak egy kérés-válasz alapú protokoll Kérem erről a host-ról az adott címen lévő erőforrást. Például: GET /assets/images/index logo.gif HTTP/1.1 Szerver válaszában megadja, hogy mit fog küldeni: mime-type vagy content-type (tartalomtípus) És az adatot.

18 A következő példában használt protokoll a Telnet A Telnet a legegyszerűbb protokoll, ami létezhet: nem csinál semmit, csak bájtot küldd és fogad. Régen ezt használták távoli elérésre. Telefonon, céghez betárcsázós vonalon telnet távmunka már 30 éve volt. Viszont lehallgatható, mint a nyílt wifi is (ezért ma már inkább a biztonságosabb SSH protokollt használjuk helyette távoli gépekre való belépéshez) Telnet protokollal tudunk kézzel (processinggel) levelet küldeni, html oldalt letölteni, stb.

19 HTTP működése $ telnet index.hu 80 Trying Connected to index.hu. Escape character is ^]. GET / HTTP/1.1 Host: index.hu Connection: Close

23 HTTP válasz HTTP/ OK Date: Thu, 08 Nov :48:12 GMT Server: Apache/ (Debian GNU/Linux) mod_fastcgi/2. X-Powered-By: PHP/5.0.5-Debian-0.8~sarge1 Cache-Control: max-age=300 Expires: Thu, 08 Nov :53:12 GMT Connection: close Transfer-Encoding: chunked Content-Type: text/html És a HTML file jön itt.

24 Néhány szó még a HTML-ről Mi tud? Formázott szöveget tárolni Különböző stílusú betűket, jeleket. Dobozokat, táblázatokat Felsorolásokat, fejléceket Űrlapokat kezelni (textbox, list, button) Sokféle médiafájlt tud beágyazni hivatkozás segítségével: akár másik gépről is Hiperlinkeket tartalmazhat: valamire rábökünk egy másik URL-re ugrik

25 HTML és a képek HTML fájl (hipertext markup language) egy szövegfájl, kis formázással Nem lehet benne kép beszúrva Csak hivatkozás rá: <img src="/assets/images/index_logo.gif"> Hány HTTP kérés van minimum egy 5 képet tartalmazó HTML oldal betöltésénél?

26 A hiperlink A HTML-dokumentumokban hiperlinkek (röviden linkek) lehetnek. A link lehetővé teszi, hogy a dokumentum olvasója átugorjon egy másik dokumentumra,...vagy akár egy dokumentum valamelyik kijelölt szakaszára,...majd vissza. Leginkább a lexikonok és tudományos cikkek hivatkozásaihoz hasonĺıt, de ahelyett, hogy el kellene mennyi a hivatkozott szövegért a könyvtárba, csak rá kell klikkelni. Ez forradalmi változás a szöveg-befogadás módjában, nem véletlenül írták a hiperlinkről lelkendező esszék tucatjait.

27 A hiperlink, egy példa A hiperlinkek elhelyezésének a szintaktikája HTML-ben: <a href="linkcím">tartalom, amihez a linket kötjük</a> lehet szöveges elemhez hiperlinket kapcsolni: <a href=" de akár képhez is: <a href=" src=" index.hu/assets/images/index_logo.gif"></a>

28 Böngésző programok

29 Böngésző Hiába a webszerver, a HTML oldal és az URL, ha nincs, ami a szolgáltatott tartalmat a felhasználó gépén megjelenítse. Ezt a feladatot a böngésző látja el. A legelterjedtebb böngészőprogramok: MS Internet Explorer: A Windows operációs rendszerekhez mellékelt böngésző Mozilla Firefox: Népszerű, szinte minden operációs rendszeren működő böngésző (nyílt forráskódú) Google Chrome: A Google által fejlesztett böngésző (részben nyílt forráskódú) Opera: Bár vannak olyan országok, ahol ez a legnépszerűbb böngésző asztali gépeken, nemzetközi sikert a mobil böngészők piacán ért el Safari: A Mac OS X operációs rendszerhez mellékelt böngésző

30 Böngészőhasználat megoszlásának alakulása Kép forrása: usage share

31 Plugin A böngésző nem minden médiaformátumot tud megjeleníteni. A böngészőhöz letölthető kis programok, ún. beépülő modulok (plugin) feladata leggyakrabban az, hogy valamilyen formátum megjelenítésére alkalmassá tegyék a böngészőt. Példák ilyenekre: Flash, Quicktime, PDF.

32 Böngésző kiegészítés Van egy másik módja is, hogy kis programok módosítsák a böngésző működését. Ezek neve kiegészítés (extension). Ezt a módszert főleg a Mozilla Firefox böngésző alkalmazza. Több ezer hasznos és kevésbé hasznos kiegészítés létezik hozzá, a reklám-letiltótól a folyamatos időjárásjelentésig.

33 Szabványok A HTML egy szabvány, mire mit kell megjeleníteni. A böngészőprogramok fejlesztői azonban nem mindig mindent a szabvány szerint csinálnak. Éppen a legelterjedtebb, az Internet Explorer tér el a legtöbb helyen a szabványtól. Néhány éve még sok olyan szabálytalan weboldal volt, amit csak az Explorer tudott megjeleníteni, ma már szerencsére egyre kevesebb.

34 HTTP/Web/browser Cookie Az a baj az eddig megismert HTTP-vel, hogy senki nem tudja megjegyezni, hogy mi volt ezelött Egy olyan beszélgetés, amiben egyik mondat sem hivatkozhat az előzőre Megoldás a süti (HTTP-süti, avagy böngészősüti, avagy websüti), ami egy kis szöveges adatcsomag (nem tartalmazhat programkódot) amit a szerver küld a böngészőnek, ahol a sütik hosszabb-rövidebb ideig tárolásra kerülnek és amiket a böngésző is vissza tud küldeni a szervernek

35 HTTP-sütik előnyei és veszélyei Előnye, hogy lehetővé teszi: adott oldal egy-egy látogatásának, vagy folytatólagos munkamenetek menedzselését (például online bevásárlókosár tatalmának kezelését) a személyreszabást a nyomonkövetést Veszélyek: a sütik alkalmazhatóak felhasználókról való adatgyűjtéshez a sütik és a bennük tárolt tartalom ellopható a sütik, ha nicsenek titkosítva, lehallgathatóak

36 Flash sütik (Local Shared Objects) HTTP sütihez hasonló, DE: nem a böngésző felügyeli a tárolását és törlését egy operációs rendszer alatt futó több különböző böngésző tevékenysége között is képes kapcsolatot teremteni Firefox használata esetén például a BetterPrivacy kiterjesztéssel tudunk ellene védekezni

37 Dinamikus weboldalak, adatbázisok

38 Dinamikus tartalom Legegyszerűbb esetben a webszerver a HTTP kérésre visszaad egy a merevlemezén előre letárolt HTML formátumú oldalt. Ez még ma is előfordul, de ma már sokkal gyakoribb, hogy a webszerver a kérésre válaszul helyben álĺıtja elő a HTML oldalt. Egyszerű esetben ilyenkor egy HTML sablont egy adatbázisból tölti fel adatokkal. Így napra- vagy akár másodpercre kész adatokat tud szolgáltatni, illetve személyre tudja szabni a szolgáltatást.

39 Nagyon dinamikus tartalom Egy modern web-alkalmazás úgy működik, hogy a webszerver gépen egy bonyolult program fut, amely felelős a felhasználók felé küldött weboldalak tartalmáért, és akár összetett számításokat is elvégez a kívánt HTML oldal legyártásához.

40 Adatbázisok A számítástechnikában, az információ feldolgozásban nagyon fontos szoftverek az adatbáziskezelők: Képzeljünk el egy Excel táblát, ami pár millió sorból áll Ebben nagyon gyorsan tudunk keresni és szűrni egy oszlopra Egyszerre több táblázatot tudunk összekapcsolni neptunkód awspf4gd88 dkrt9x220d yz8clvvg32 kurzuskód BMEGT BMEGT BMETT982321

41 Tipikus dinamikus web-alkalmazás ma Fogadja a kérést a felhasználótól. Ennek megfelelő adatokat kikeresi az adatbázisból. Összeálĺıt egy HTML oldalt, amit visszaküld. A felhasználó kitölt egy űrlapot, vagy kiválaszt valamit egy listából. Ennek megfelelően a szerveren a program valamit módosít az adatbázisban. Esetpélda: iwiw ismerem, Facebook like, Neptun tárgyfelvétel

42 egy dinamikus web-alkalmazás

43 JavaScript A Netscape, az első igazán elterjedt böngésző készítői vezették be a JavaScript-et, aminek ma már ECMAScript a hivatalos neve. Ez egy programozási nyelv, ami lehetővé teszi, hogy a weboldal programokat futtasson, és ezek megváltoztassák magát a weboldalt is, és mindezt a kliens oldalon, anélkül, hogy közben a webszerverrel kéne kommunikálni.

44 JavaScript Hello World program <html> <head><title>simple page</title></head> <body> <script type="text/javascript"> document.write( Hello World! ); </script> <noscript> <p>your browser either does not support JavaScript, or you have JavaScript turned off.</p> </noscript> </body> </html> Forrás:

45 AJAX - Aszinkron JavaScript & XML A JavaScript lehetővé teszi, hogy a weboldal a böngészőben mindenféle okosat csináljon a webszerver nélkül is. De persze még okosabb dolgokat tud csinálni, ha a JavaScript programnak van módja a webszerverrel is kommunikálni, annak kérdéseket feltenni. Ennek külön előnye, hogy nem kell minden klikkelés után megvárni, hogy az ablak kiürül, majd újra benépesedik: Az AJAX hasznosságára jó példa a Google Mail szolgáltatása. (köv. ábra) A HTML5 szabványnál korábbi szabványt használó böngészők esetén az AJAX például rosszul működik együtt a népszerű, sokat használt Vissza gombbal.

46

47 Google suggest

48 Flash Hamar megjelent az igény arra, hogy vizuálisan gazdag, dinamikus, interaktív tartalmak is lehessenek a weben. Erre a HTML alkalmatlan, és ma még az AJAX-féle foltozások után sem igazán megfelelő. Az űrt a Macromedia cég Flash nevű alkalmazása/adatformátuma töltötte be. A Flash tartalom interaktív és dinamikus, és beágyazható egy weboldal belsejébe. A beágyazás kényszermegoldás, részleges integráció, például nem mindig lehet egérrel kijelölni a Flash-en belüli szöveget, vagy megnagyítani a betűméretet.

49 Flash mint médialejátszó A Flash alkalmazást fejlesztői néhány éve alkalmassá tették médialejátszásra. Tehát ahelyett, hogy a felhasználónak valamilyen videóformátum lejátszóját kellene installálnia, megkaphatja a lejátszóprogramot Flash-ben a weboldalba ágyazva. Ezen az elven működik például a youtube.com.

50 Keresőmotorok

51 Keresők és címtárak A web hőskorában nem léteztek keresők Csak egyik oldalról a másikra mehettünk Az első keresők hierarchikus és emberek által karbantartott fájlrendszerekre és címtárakra épültek (pl. a Gopher protokollra épülő keresők) A Yahoo! is címtárával ( lett sikeres, amiről csak 2002-ben tértek át crawler alapú keresésből származó eredmények feltüntetésére

52 Keresők felépítése Crawling: letöltjük a webet, folyamatosan. A Google 100 milliárd weboldalt tárol Index: szó-weboldal táblázat Search: az indexet használó program Ranking: rangsorolás kulcsszó: keresőre optimalizálás Google egyik nagy újítása a PageRank rangsorolás volt: az oldalakat a rájuk mutató linkek száma és azok fontossága szerint rangsorolja A láthatatlan háló (invisible web) avagy mély háló (deep web) a világháló azon része, amely nem szerepel a keresőmotorok nyílvántartásaiban

53 Google PageRank Kép forrása:

54 Internet Archive és a Wayback Machine Miért ne mentsük le a web tartalmát rendszeresen, annak érdekében, hogy visszakereshető legyen, hogy mi volt fenn mikor