Uvod u Web Tehnologije i Internet

Uvod

• Ovaj priručnik je dopuna materijala za predmete "Uvod u web tehnologije" (UWT) i "Osnove web tehnologija" (OWT).
• UWT je na preddiplomskom studiju Informacijske tehnologije, dok je OWT na sveučilišnom preddiplomskom studiju Informacijski i poslovni sustavi.
• UWT i OWT imaju zajedničke dijelove i dijelove koji su specifični za svaki predmet, označeni kraticom UWT ili OWT uz naslov.
• Sadrži dodatne sadržaje za studente koji žele proširiti znanje, označene uglatim zagradama u naslovima.

Uvod u Web tehnologije

• Danas je poslovanje gotovo nezamislivo bez računala i interneta.
• Internet omogućuje globalnu komunikaciju, ali potrebne su i aplikacije za jednostavnu interakciju.
• Web i grafički preglednici imali su velik utjecaj na popularnost interneta.
• Web je i dalje važan segment interneta, cilj je naučiti doprinijeti njegovom razvoju i stvaranju novih web stranica i aplikacija.

Internet nije Web

• Internet i Web se često miješaju; važno je razlikovati ih po definiciji.
• Internet je fizička mreža koja povezuje računala putem TCP/IP protokola.
• Web (World Wide Web) je kolekcija multimedijskih dokumenata na internetu, kojima se pristupa putem HTTP protokola i web preglednika.
• Postoje i druge aplikacije na internetu, poput e-pošte, ali nisu sve Web aplikacije.
• Mobilne aplikacije i Web aplikacije se isprepliću pa ih je teško razlikovati.

Osnovni pojmovi

• Web preglednik (web browser) je program za pristup Webu, poznaje HTML sintaksu i prikazuje objekte.
• Poslužitelj (server) je računalo s javnom IP adresom i programskom podrškom za primanje zahtjeva, npr. SMTP poslužitelj za e-poštu.
• Web poslužitelj (web server) je programska podrška koja omogućava primanje HTTP zahtjeva i vraćanje odgovora.
• Web mjesto (web site) je logički dio na web poslužitelju s jedinstvenom web adresom.
• Web stranica (web page) je hipermedijski sadržaj u HTML-u, spremljen na web poslužitelju ili vraćen kao rezultat zahtjeva,
• Web dokument (web document) je izvorni dokument koji se prikazuje kao dio web stranice ili samostalno, može biti u različitim formatima (js, css, slike, video, audio i dr).
• Web aplikacija (web application) je programski sustav koji generira web stranice i dokumente, štiti web stranice, preuzima podatke od korisnika i sprema ih.

Razvoj Interneta i Weba

• Internet i Web nisu isto, internet je nastao ranije.
• Ideja o povezivanju računala započela je 60-ih, dok se Web pojavio krajem 80-ih i početkom 90-ih.
• ARPANET, preteča interneta, osnovan je 1969., povezivao je računala s UCLA, SRI, UCSB i Utah, započela je s 56Kp/sec komunikacijskim linijama.
• U 70-ima se ARPANET udvostručavao svake godine, 1972. ARPANET se proširio s 4 na 15 čvorova; tijekom 70tih se pojavljuju ALOHANET, Telnet.
• 80-ih je vlada SAD-a preuzela veću ulogu u razvoju interneta, a 1986. je kreiran NSFNET za akademska istraživanja.

Kratka povijest Weba

• Godina rođenja Weba je 1989; Tim Berners-Lee je predložio prijenos informacija putem interneta korištenjem hiperteksta.
• Definirao je HTML, dizajnirao HTTP protokol, implementirao prvi tekstualni preglednik "WorldWideWeb" 1990.
• Web je postao dostupan izvan CERN-a 1991.
• Andreessen je 1993. razvio Mosaic, prvi grafički web preglednik.
• Andreessen je 1994. osnovao Netscape, a Microsoft je 1995. izdao Internet Explorer.

Generacije Weba

• Web 1.0: statične stranice pisane od strane vlasnika
• Web 2.0: društvene mreže, Web aplikacije, CSS i JavaScript
• Web 3.0: semantički Web, automatski agenti, velika važnost JavaScripta i objektnog modela dokumenta (DOM)

Arhitektura Interneta

• Internet je distribuirani sustav od milijuna računala, uključujući klasična i mobilne uređaje.
• Uređaji su ili krajnji koji pružaju/koriste usluge ili usmjerivači (router) koji omogućuju transport poruka.
• Komunikacija zahtijeva komunikacijske medije, komunikacijske naprave, programsku opremu i protokole.
• Krajnji uređaji dijele se na klijente i poslužitelje
• Klijent šalje zahtjev poslužitelju, koji ga obrađuje i vraća odgovor. Taj model zovemo klijent-server arhitektura.

OSI model

• Internet arhitektura se temelji na OSI modelu, koji je razvijen 1984. od strane ISO-a.
• OSI model organizira protokole, hardver i softver u slojeve, svaki sloj nudi usluge sloju više razine, ali ne utječe na njega.

Slojevi OSI modela

• Fizički sloj: prijenos bitova između dva susjedna čvora ovisno o mediju prijenosa.
• Sloj podatkovne veze: isporuka paketa od čvora do čvora, opisuje logičku organizaciju bitova, primjeri su Ethernet i PPP.
• Mrežni sloj: preusmjeravanje paketa od jednog do drugog računala, adrese i usmjeravanje, Internet Protocol (IP).
• Transportni sloj: transport poruka između aplikacija, Transfer (Transmission) Control Protocol (TCP) i User Datagram Protocol (UDP).
• Sloj sesije: organizacija slijeda podataka i upravljanje sesijom, Secure Socket Layer (SSL).
• Prezentacijski sloj: opisuje format podataka i osigurava da je čitljiv.
• Aplikacijski sloj: opisuje kako aplikacije komuniciraju i predstavlja mrežne aplikacije; Hypertext Transfer Protocol (HTTP), Simple Mail Transfer Protocol (SMTP), File Transfer Protocol (FTP) i Domain Name System (DNS).
• Klijent šalje zahtjev, dijeli se na pakete, usmjerivači (eng. routers) čitaju odredišnu adresu dok se paketi ne sastave u poruku i predaju aplikacijskom sloju.
• Na sigurnoj vezi poruka se prvo kriptira na sloju sesije, a zatim se šalje.

IP adrese

• Svako računalo na internetu ima jedinstvenu IP adresu, prema protokolu IP (primjer: barok.foi.hr ima IP adresu 161.53.120.3).
• Dvije vrste IP adresa: IPv4 (32 bita) i IPv6 (128 bitova).
• Domenski sustav (DNS) prevodi IP adrese u nazive i obrnuto.
• Ista računala mogu imati više IP adresa
• IPv4 adrese su duljine 32 bita i dijele se u 5 klasa.
  • klasa A: počinje s 0 i koristi se 7-bitni kod za IP mrežu, ostatak za broj domaćina
  • klasa B: počinje s 10 i koristi se 14-bitni kod za IP mrežu, a ostatak za broj domaćina
  • klasa C: počinje s 110 i koristi se 21-bitni kod za IP mrežu, a ostatak za broj domaćina
  • klasa D: počinje s 1110 i koristi se za multicasting
  • klasa E: počinje s 11110 i rezervirana je za buduće korištenje i koristiti se za multicasting

IPv6

• IPv6 proširuje IP adresu na 128 bitova.
• IPv6 ima novi format zaglavlja; djelotvornije i slojevitije adresiranje i jednostavnije usmjeravanje; automatsko podešavanje mrežnih parametara i ugrađena podrška za sigurnost i bolja podrška za osiguranje kvalitete usluge (QoS).
• Struktura IPv6 je veličine 64 bita za broj mreže i 64 bita za broj domaćina.

DNS

• Domen je hijerarhijski sustav naziva s najvišom razinom: hr, de, at, edu, com, gov, org, net.
• DNS poslužitelj drži tablicu naziva i IP adresa.
• Aplikacija odlazi lokalnom DNS poslužitelju da pronađe adresu.
• Korijenski Poslužitelji (njih 13) utvrđuju pripadajući naziv i prosljeđuju zahtjev ako tražena adresa ne postoji na lokalnim poslužiteljima
• Lokalni DNS poslužitelji također imaju tablice ranije traženih naziva i korespondirajućih IP adresa te se vraća onaj iz DNS poslužitelja kod kojeg se prvo pronađe traženi naziv.

Arhitektura Weba

• Klijent-server arhitektura.
• Klijent je Web preglednik, poslužitelj je Web poslužitelj s instaliranom programskom podrškom i pripremljenim Web mjestom.
• Poslužitelj ima dvije glavne kategorije:
  • Web mjesto sa statičkim Web stranicama
    • Statične web stranice imaju statičan HTML sadržaj, poslužitelj ne obrađuje.
  • Web mjesto s dinamičkim Web stranicama (češće aplikacijama)
    • Dinamičke Web se vraćaju generirani HTML sadržaj, kad se radi o dinamičkoj Web stranici, poslužitelj ga prvo mora obraditi.

URL adrese

• Uniform Resource Locator - URL jedinstvena je adresa nekog dokumenta na Web
• Sastoji se od: protokol, naziv servera (tzv. domena) i putanja do traženog resursa.
• Primjeri: http://owt.foi.hr/index.html, https://uwt.foi.hr/index.html ili https://spider.foi.hr/UWT/materijali/slike/foi.jpg
• Na jednom web poslužitelju može biti više Web mjesta pri čemu se koriste vrata (eng. port) za definirati kamo treba ići zahtjev, npr. http://owt.foi.hr:8080/.

Princip rada Web mjesta

• Nakon što zahtjev stigne do poslužitelja vraća traženi resurs, a ako stranica ima adresu na neke druge Web dokumente preglednik automatski zahtjeva dohvaćanje i tih Web dokumenata.
• Poveznice (eng. link) omogućuju korisniku da se kreće između Web stranica (internih ili vanjskih).
• Specijalne Web aplikacije ili Web pretraživači (npr. Google, Bing, Yahoo) pokušavaju kategorizirati stranice i omogućiti upisom nekog pojma pronalaženje relevantna Web mjesta.

Vrste i elementi Web aplikacija

• LMS i LCMS (eng. Learning (Content) Management System - Moodle – elf.foi.hr)
• CMS (eng. Content Management System - WordPress, Drupal, Joomla! – www.foi.hr)
• DMS (eng. Document Management System - Alfresco – dr.foi.hr)
• e-portfolio (Mahara – eportfolio.foi.hr)
• Web 2.0 (Facebook, Twitter, Google Docs, Google Mail), novinski i slični portali (www.cnn.com, www.time.com, www.index.hr), portali tvrtki i organizacija (www.php.net, www.mysql.org, www.w3.org), e-trgovine (amazon.com, ebay.com, links.hr, njuskalo.hr) i specifične (FOI radovi, FOI planer)
• Zajednički elementi: registracija korisnika, prijavljivanje korisnika, razne uloge korisnika (uloga administratora ostale uloge korisnika), razni prikazi, košarica, galerija i vođenje dnevnika.

Veličina Weba

• Web se dijeli na dva dijela s obzirom na mogućnosti pristupa, a to su: površinski Web i duboki (nevidljivi) Web.
• Površinski Web je dio Web prostora koji je pokriven (indeksiran) standardnim pretraživačima (eng. search engines), no ti razlozi mogu biti razlikovanje sadržaja s obzirom na kontekst pristupa, dinamički sadržaj, ograničen pristup robotima, privatnost Web-a s pristupom na bazi registracije i autentikacije itd..

HTTP Protokol

• Klijenti i poslužitelji komuniciraju putem HTTP protokola (HyperText Transfer Protocol), protokol aplikacijskog sloja u OSI modelu.
• Definiran je u RFC (Request For Comment) dokumentima, trenutno RFC 9110.
• HTTP protokol omogućuje komunikaciju između web preglednika (klijenta) i web poslužitelja

Kratka povijest HTTP-a

• Koristi se od 1990. godine.
• HTTP/0.9 (1991.): jednostavan protokol za prijenos podataka
• HTTP/1.0 (RFC 1945, 1996.): poboljšan protokol s metainformacijama (MIME)
• HTTP/1.1 (RFC 2068, 1997.): hijerarhijski zastupnici (proxy), zalihosti (caching), permanentne veze i virtualni domaćini
• HTTP/2 (RFC 7540, 2015.): više zahtjeva/odgovora preko iste TCP konekcije, prioriteti, server push, bolja kompresija
• HTTP/3 je u radnoj verziji, koristi QUIC transportni protokol

Brzine učitanja HTTP protokola

• Prednosti HTTP/2 (i HTTP/3): brzina.
• HTTP/3 protokol do 1200 milisekundi brže učitava stranice na udaljenim serverima

Princip rada HTTP/1.1

• Protokol aplikacijskog sloja, lagan i brz, za distribuirane sustave.
• Koristi se za sustave za nazivanje servera i distribuirane objektno upravljačke sustave.
• Ključna značajka HTTP je tipizacija podataka reprezentacije.
• HTTP je protokol tipa zahtjev/odgovor, klijent šalje zahtjev poslužitelju u formatu koji sadrži URI (Uniform Resource Identifier), verziju protokola i MIME izgled poruke, a poslužitelj odgovara s linijom statusa i MIME izgled poruke.

URI i URL

• Uniform Resource Locator (URL) je zadužen za lociranje nekog resursa na Webu te je unikatna adresa resursa.
• URL je podskup URI-a: svaki URL je URI, ali nije svaki URI URL.
• URI je apstraktniji koncept od URL. URI je ništa drugo nego identifikator. URI identificira, URL alocira te se može dereferencirati, tj. računalo može uzeti URL i napraviti reprezentaciju resursa na se odnosi.

HTTP Poruka

• HTTP zahtjev jest poruka koju preglednik šalje poslužitelju.
• HTTP odgovor jest poruka koju šalje poslužitelj pregledniku s informacijama o traženom resursu.
• Svaka HTTP poruka sastoji se od zaglavlja (headers) i tijela (body). Sintaksa HTTP protokola obično se piše u ABNF notaciji (Augmented BNF for Syntax Specifications).

Zaglavlje poruke zahtjeva

• Prve dvije linije HTTP poruke su najvažnije.
• Prva linija je linija zahtjeva (request line), a sastoji se od: metode, putanje i HTTP verzije.
• HTTP metoda govori o kakvoj vrsti HTTP zahtjeva se radi (OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE i CONNECT). Ravna crta (|) označava logičko „ili”, drugim riječima u jednoj poruci može se odabrati samo jedna od navedenih metoda. Opcija extension-method znači da je moguće u budućnosti dodati nove neke tipove metoda ako bude potrebno.
  • GET metoda koristi se za dohvat nekog resursa sa Weba
  • HEAD metoda dozvoljava klijentu da dobije sve metainformacije za traženi resurs bez preuzimanja samog resursa

Razlika POST i GET metode

• Metoda GET je zamišljena za samo dohvaćanje resursa ona također kao i POST omogućuje slanje nekih podataka.
• URL se može sastojati dodatno i od dva opcionalna dijela: Parametri se pišu u obliku ključ-vrijednost i dio koji se obrađuje od strane klijenta i ne šalje se u zahtjevu na poslužitelj.
• GET podaci šalju se u tijelu poruke, a POST u samom zaglavlju i vidljivi su u URL adresi.

Značenje ostalih linija zaglavlja

• Request-Line je već bila objašnjena. Simbol zvjezdice označava da može biti jedan ili više polja zaglavlja, a postoje tri vrste polja zaglavlja. Na kraju nakon zaglavlja ide tijelo poruke, ali ono je u zahtjevu opcionalno i ne mora postojati i zato je u uglatim zagradama.

Zaglavlje poruke odgovora

• Kada jednom poruka zahtjeva stigne na poslužitelj on mora obraditi tu poruku tj. pronaći taj resurs te ga vratiti klijentu u poruci odgovora.
• Najvažniji dio je Status-Line što je prva linija u zaglavlju odgovora HTTP poruke, kod statusa: grupe 1xx (informacija), grupe 2xx (uspješno), grupe 3xx (redirekcija), grupe 4xx (pogreška klijenta) i grupe 5xx (pogreška poslužitelja).
  • grupa 2xx - uspješno
    • "200" : OK; "201" : Created; "202" : Accepted; "203" : Non-Authoritative Information ; "204" : No Content ; "205" : Reset Content | "206" Partial Content
  • Grupa 3xx - redirekcija
    • "300" : Multiple Choices | "301" : Moved Permanently | "302" , Found|"303" : See Other | "304" : Not Modified ; "305" : Use Proxy ; "307" : Temporary Redirect
  • Grupa 4xx - pogreška klijenta
    • "400" : Bad Request | "401" : Unauthorized | "402" : Payment Required | "403" : Forbidden | "404" : Not Found | "405" : Method Not Allowed | "406" : Not Acceptable| "407" :" Proxy Authentication Required | "408" : Request Time-out| "409" : Conflict ; "410" : Gone; "411" : Length Required | "412": Precondition Failed "; 413" : Request Entity Too Large| "414" : Request-URI Too Large "415" ; Unsupported Media Type 416" : Requested range not satisfiable 417" : Expectation Failed
  • Grupa 5xx - pogreška poslužitelja
    • "500" : Internal Server Error ; "501" : Not Implemented; "502" : Bad Gateway | "503": Service Unavailable: "504" Gateway Time-out | "505" HTTP Version not supported

Primjeri statua

• Kod 200 (OK) je standardni kod za uspješan zahtjev.
• Česti kod 404 (Not Found) pojavljuje se kada URL ne postoji.
• Čest je i kod 403 (Forbidden) kada se pokuša pristupiti stranici za koju se nema pristup.
• Kod 304 (Not Modified) znači da se resurs nije promijenio.

Istaknute linije zaglavlja

• content-type – koja govori kakva je vrsta resursa prema MIME standardu
• content-length – koji govori koliko je veliko tijelo poruke,
• expires – datum koji govori kada je potrebno ponovo slati resurse u tijelu poruke nakon što je isti već jednom dohvaćen

Princip rada HTTP/2

• Glavna prednost HTTP protokola verzije 2 je bolja verzija jesu bolje performanse, te zahtijeva manje zahtjeva.
• Klijent šalje zahtjev za stranicom a Poslužitelj analizira što je još potrebno klijentu od resursa za tu Web stranicu i šalje mu izvorni kod (HTML) Web stranice i sve popratne resurse u ovom primjer prvu i drugu sliku.

HTTPS - Sigurni HTTP

• Sigurnost je jedan od glavnih problema Weba.
• HTTPS protokol umjesto HTTP to radi drugačije.

Od poslova tu je su

• Klijent šalje poruku pozdrava pri čemu javlja svoje kriptografske mogućnosti
• Server odgovara sa porukom pozdrava gdje odabire HTTPS protokol prema mogućnostima klijenta i svojim mogućnostima
• Klijent provjerava certifikat poslužitelja i šalje svoj certifikat ako je potrebno
• Server se prebacuje na kriptiranu konekciju i javlja da je spreman za rad