WEB PROGRAMIRANJE I API

INTEGRACIJA – HTTP, XML, JSON

Testiranje softvera
PROTOKOLI I SLOJEVI MREŽE
APLIKACIONI SLOJ

 Aplikacioni sloj (application layer) - definiše protokole koje direktno koriste

korisničke aplikacije u okviru svoje komunikacije
 Ovi protokoli su prilagodeni specifičnim zahtevima aplikacija
 Aplikacioni protokoli u protokoli kojima dva programa tj. dve aplikacije komuniciraju
 Najkorišćeniji protokoli ovoga sloja u okviru Interneta su:
 HyperText Transfer Protocol (HTTP) koji se koristi za prenos veb stranica
 SMTP, POP3, IMAP koji se koriste u za prenos elektronske pošte
 File Transfer Protocol (FTP) koji se koristi za prenos datoteka
 itd.
HTTP PROTOKOL I WEB SERVER

 Web se sastoji od ogromnog broja klijenata sa pregledačima (kao što su Chrome,

Mozzila, Yandex, Safari itd.)
 i od servera (koji koriste web servere kao što su Apache, JBoss, Tomcat, Microsoft
IIS itd.) koji su međusobno povezani kroz žičane i bezžične mreže.
FUNKCIONISANJE WEB SERVERA

 Korisnik preko veb pregledača šalje zahtev za resursom Veb server prihvata
zahtev, pronalazi traženi resurs i njega šalje korisniku
 Resurs može biti HTML strana, slika, PDF dokument ili nešto četvrto – što god da
je u pitanju, klijent zahteva resurs, a server šalje klijentu resurs koji je zahtevan
 U slučaju kada nema zahtevanog resursa, generiše se greška „404 Not found“
 Termin „server“ označava i sam računar (tj. hardver) i program koji perdstavlja veb
server (tj. softver)
 Ako iz konteksta nije jasno da li se radi o hardveru ili softveru, to će biti dodatno
istaknuto
FUNKCIONISANJE VEB KLIJENTA
FUNKCIONISANJE WEB KLIJENTA

 Kada se govori o klijentu, ima se u vidu korisnik, ali i veb pregledač – aplikacija
koju korisnik koristi za surfovanje.
 Korisnik preko web pregledača šalje zahtev za resursom
 Pregledač je softver (npr. Netscape, Chrome, Mozzila, Yandex, Safari, Edge, Opera i sl.)
koji komunicira sa veb serverom. Osim poslova komunikacije, pregledač treba da
interpretira HTML kod i da iscrta veb strane za korisnika
 Klijent može biti i ma koji drugi program koji komunicira sa serverom korišćenjem HTTP
protokola (curl, postman,…)
 Ako se eksplicitno ne navede drugačije, nadalje će termin „klijent“ će obuhvatiti i
softver (tj. pregledač) i čoveka (tj. korisnika)
 Drugim rečima, klijent je aplikacija - pregledač koja obavlja ono što korisnik zahteva da
se uradi
KLIJENT I SERVER KORISTE HTML I HTTP

 Kada server šalje odgovor na zahtev, on pregledaču obično šalje sadržaj datog
tipa, tako da pregledač može da prikaže dobijeni odgovor.
 Često je odgovor koji server šalje klijentu sekvenca znakova koji predstavljaju
dokument u HTML formatu. Taj HTML dokument potom biva prikazan od strane
pregledača
 Najveći deo konverzacije između klijenata i servera se realizuje korišćenjem HTTP
protokola
 Klijent tada šalje HTTP zahtev, a server odgovara sa HTTP odgovorom.
 Kada server pošalje HTML stranu klijentu, on to radi korišćenjem HTTP protokola.
HTTP PROTOKOL

 HTTP protokol se izvršava preko TCP/IP

protokola
 To je mrežni protokol sa karaktetistikama
koje se odnose na web, ali on se oslanja na
TCP/IP protokol radi obezbeđenja potpunog
prenosa zahteva i odgovora sa jednog mesta
na drugo
 Suština HTTP konverzacije je jednostavna
sekvenca zahtev/odgovor: pregledač
zahteva a server odgovara
HTTP PROTOKOL

 Sam HTTP protokol je opisan IETF dokumentom RFC 2616

 Veb serveri Apache, JBoss, Tomcat, Microsoft IIS i sl. su primeri servera koji
obrađuju HTTP zahteve
 Pregledači Netscape, Chrome, Mozzila, Yandex, Safari, Edge, Opera i sl.
obezbeđuju korisniku da generiše HTTP zahtev, uputi ga prema serveru i na
adekvatan način prikaže HTTP odgovor koji dobije od server
 Karakteristike HTTP protokola:
 1. HTTP ne održava konekciju (connectionless)
 2. HTTP je nezavistan od medijuma (media independent)
 3. HTTP ne podržava stanja (stateless)
HTML JE DEO HTTP ODGOVORA

 HTTP odgovor može sadržavati HTML

 HTTP dodaje informacije o zaglavlju na
početak sadržaja koji se vraća kao odgovor,
kakav god sadržaj bio u pitanju
 Pregledač koristi informacije iz zaglavlja
kao pomoć u procesiranju HTML sadržaja
 Dakle, HTML se može posmatrati kao
sadržaj umetnut u HTTP odgovor
 URL

 Svaki resurs na vebu ima svoju

jedinstvenu adresu, u URL
(Uniform Resource Locator)
formatu
HTTP METOD

 HTTP zahtev sadrži naziv metoda u svom zaglavlju

 Naziv metoda govori serveru o kakvoj se vrsti zahteva radi i kako će biti formatiran
ostatak poruke
 HTTP protokol podržava sledeće metode:
 GET - koristi se za preuzimanje informacija sa datog servera na osnovu date adrese.
Zahtevi koji koriste metod GET treba samo da pribavljaju podatke, a nikako ne treba da ih
menjaju
 HEAD - je vrlo sličan GET metodu, sa tim što se telo poruke ne vraća klijentu (vraća se samo
statusna linija i zaglavlje). Metod se može koristiti radi utvrđivanja da li je link izmenjen u
odnosu na prethodno stanje - izmenjeno stanje se testira upoređivanjem informacija
poslatih u zaglavlju zahteva sa informacijama iz zaglavlja generisanog odgovora
 POST - se koristi za zahtev da se pošalju podaci HTTP serveru korišćenjem HTML forme
HTTP METOD

 PUT - koristi se za zahtev HTTP serveru da se podaci poslati u okviru zahteva

smeste na mestu navedenog resursa
 DELETE - koristi se za zahtev serveru da se ukloni navedeni resurs
 TRACE – izvršava testiranje povratne poruke duž putanje kojom se zahtev kreće
prema ciljnom resursu
 OPTIONS – opisuje opcije komunikacije za ciljni resurs
 CONNECT – obezbeđuje tunelsku komunikaciju prema serveru određenim sa
datom adresom
METODI GET I POST

 Metod GET je najednostavniji HTTP metod

 Metod GET traži od servera da pribavi resurs i da ga vrati pozivaocu
 Resurs može biti HTML strana, PDF dokument, JPG slika ...
 Svrha metoda GET je da se dobije resurs od servera
METODI GET I POST

 Metod POST je moćniji od metoda GET

 Korišćenjem ovog metoda može se zahtevati nešto od i istovremno slati podatke
na server (pa server može procesirati prispele podatke)
METODI GET I POST

 Podaci se mogu slati na server i pomoću metoda GET i pomoću metoda POST
 Ukupan broj znakova koji se pomoću mogu poslati metoda GET je mnogo manji
od broja znakova koji se mogu poslati preko metoda POST, a to gornje
ograničenje zavisi od vrste veb servera i pregledača
 Podaci koji se šalju korišćenjem metoda GET se nalepljuju na adresu u adresnoj
liniji pregledača, pa je sve što se tim putem šalje na server direktno vidljivo
korisniku (i samim tim podložnije manipulaciji)
 Korisnik ne može postaviti marker na stranicu gde je sadržaj forme prosleđen
metodom POST, a može ako je za prosleđivanje korišćen metod GET
ANATOMIJA GET ZAHTEVA
ANATOMIJA POST ZAHTEVA
ANATOMIJA POST ZAHTEVA MVC

Baza podataka
ANATOMIJA HTTP ODGOVORA

 HTTP odgovor sadrži zaglavlje i telo

 Informacije u zaglavlju govore
pregledaču koji je protokol korišćen,
da li je zahtev bio uspešan i koja
vrsta sadržaja se nalazi u telu
zahteva, a telo sadrži sam sadržaj
koji pregledač prikazuje
ANATOMIJA HTTP ODGOVORA
HTTP ZAHTEV I HTTP ODGOVOR
STATUSNI KODOVI HTTP ODGOVORA

 Statusni kod HTTP odgovora je trocifren broj. Prva cifra statusnog koda HTTP
odgovora specificira o kojoj se od pet klasa odgovora radi
 Statusni kodovi su proširivi i HTTP klijenti nisu obavezni da razumeju značenje
svih statusnih kodova
 Pobrojani statusni kodovi su deo HTTP/1.1 standarda (dokument RFC 7231), osim
ako se ne istakne da je drugačije
STATUSNI KODOVI HTTP ODGOVORA

 1xx: Information – Zahtev je primljen i proces se nastavlja

STATUSNI KODOVI HTTP ODGOVORA

 2xx: Successful – zahtev je uspešno primljen, shvaćen i prihvaćen

STATUSNI KODOVI HTTP ODGOVORA

 3xx: Redirection – moraju se preduzeti dodatne akcije da bi se komletirao zahtev

STATUSNI KODOVI HTTP ODGOVORA

 4xx: Client Error – zahtev sadrži nekorektnu sintaksu ili ne može biti ispunjen
STATUSNI KODOVI HTTP ODGOVORA

 5xx: Server Error – server nije uspeo da ispuni naizgled valjan zahtev
PROTOKOL APLIKATIVNOG SLOJA - HTTP

 Hypertext Transfer Protocol (HTTP), je protokol aplikacionog sloja koji predstavlja osnovu
weba
 HTTP je implementiran u okviru dve vrste programa:
 klijentskim programima, najčešće pregledačima veba
 serverskim programima, najčešće veb serverima
 Ovi programi medusobno komuniciraju razmenom HTTP poruka
 HTTP definiše strukturu ovih poruka i način na koji klijenti i serveri razmenjuju ove poruke
 Neki od osnovnih pojmova weba:
 Web je distribuirana aplikacija zasnovana na web stranicama
 Web strane se sastoje od objekata – hipertekstualnih datoteka opisanih na jeziku HTML, slika u
raznim formatima (npr. JPG, PNG, GIF), Java apleta i sli.
 Svaki pojedinačni objekat ima jedinstvenu adresu u obliku tzv. URI (Uniform Resource Identifier)
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 Važno je naglasiti da nakon slanja odgovora, server ne održava tj. ne koristi

apsolutno nikakve informacije o klijentu, odnosno da je HTTP protokol bez stanja
(stateless protocol)
 HTTP zahtevi i odgovori se navode u precizno specificiranom obliku
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 HTTP zahtev se šalje nakon što je uspostavljena TCP konekcija sa nekih host računarom
 U prvoj liniji, navodi se ime metoda, putanja (na serveru) do objekta koji se zahteva i verzija
HTTP protokola
 Najčešće korišćeni metodi su GET, POST i donekle HEAD
 HTTP zahtev sadrži i niz polja i njihovih vrednosti kojima klijent serveru saopštava neke
relevantne informacije:
 Host: - obavezno polje u HTTP/1.1 i sadrži ime hosta na koji se šalje zahtev
 User-Agent: - ovim se identifikuje klijentski softver koji šalje zahtev
 Accept: - ovim klijent navodi vrstu sadržaja (MIME tip) koju priželjkuje
 Accept-Language: - ovim klijent navodi jezik koji priželjkuje
 Accept-Charset: - ovim klijent navodi kodnu stranu koju priželjkuje
 Connection: - ovim se navodi da li se želi perzistentna (keep-alive) ili jednokratna (close) TCP
konekcija.
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 Niz polja u HTTP zahtevu: 

 If-modified-since: - ovim klijent serveru naglašava da mu objekat pošalje samo ako je
bio modifikovan od datuma navedenog u ovom polju (ukoliko objekat nije modifikovan,
on se ne šalje ponovo već klijent prikazuje verziju koja mu je prethodno bila dostavljena i
koja je sačuvana je u kešu)
 Nakon prijema HTTP zahteva, server šalje HTTP odgovor
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 Kod i status su u odgovoru najčešće nešto od sledećeg:

 200 OK - Zahtev je uspešan i informacija se vraća u okviru odgovora
 301 Moved Permanently - Zahtevani objekat je premešten na lokaciju koja je navedena
u polju Location: i klijentski program može automatski da pošalje novi zahtev na
dobijenu lokaciju
 304 Not Modified - Zahtevani objekat nije promenjen od datuma navedenog u zahtevu i
nema ga potrebe ponovo slati
 400 Bad Request - Server nije uspeo da razume zahtev
 404 Not Found - Zahtevani objekat nije naden na serveru
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 Kod i status su u odgovoru najčešće nešto od sledećeg:

 500 Internal Server Error - Došlo je do neke interne greške u radu serverskog
programa
 505 HTTP Version Not Supported - Server ne podržava verziju HTTP protokola
 Kodovi koji počinju sa 2 govore o tome da je sve proteklo kako treba, kodovi koji
počinju sa 3 obaveštavaju korisnika o nekoj redirekciji, kodovi koji počinju sa 4
govore o nekoj grešci u zahtevu (grešci koju je napravio klijent), a kodovi koji
počinju sa 5 govore o nekoj grešci na strani servera
PROTOKOL APLIKATIVNOG SLOJA – HTTP

 Neka od najčešće navedenih polja u HTTP odgovorima su:

 Date: - tačno vreme kada je odgovor poslat
 Server: - identifikacija veb server programa koji je poslao odgovor
 Content-Type: - vrsta sadržaja (MIME tip) poslata u okviru odgovora
 Content-Length: - dužina sadržaja u bajtovima
 Last-Modified: - vreme kada je sadržaj poslednji put modifikovan na serveru
STATIČKE WEB STRANE

 Statička veb strana se nalazi u direktorijumu na web serveru

 Veb server takvu stranu samo pronađe i prosledi klijentu, baš onakvu kakva je na serveru
 Svaki od klijenata dobija potpuno isti sadržaj kao odgovor
STATIČKE WEB STRANE

 Šta uraditi kada treba obezbediti da se web strana dinamički menja

DINAMIČKE WEB STRANE

 Sam veb server opslužuje samo statičke strane, ali se može koristiti posebna
pomoćna aplikacija, sa kojom komunicira veb server, a koja kreira dinamički
sadržaj
DINAMIČKE WEB STRANE

 Dinamički sadržaj može biti bilo šta: datum i vreme sa servera, spisak datoteka u
direktorijumu, slučajno izabrana slika itd.
 Dinamički sadržaj ne postoji sve dok ne stigne zahtev
 Po prispeću zahteva, pomoćna aplikacija „kreira“ HTML a onda veb server taj
HTML „spakuje“ u odgovor
DINAMIČKE WEB STRANE

 Kada korisnik prosledi serveru podatke sa forme, tada je za procesiranje

prosleđenih podataka (čuvanje podataka u bazi, radi generisanje odgovora na
osnovu podataka prosleđenih uz zahtev itd.) neophodno korišćenje pomoćne
aplikacije
 Kada server prepozna da se zahtev odnosi na pomoćnu aplikaciju, tada i
prosleđene parametre prosledi pomoćnoj aplikaciji, pa ta aplikacija generiše
odgovor za koji se potom prosledi klijentu
ŠTA JE XML

 XML je na prvom mestu tehnologija (XML (Extensible Markup Language – proširiv jezik
za označavanje))
 Nakon toga dolazi definicija da je XML jezik mada je XML manje jezik a više konvencija za
kodiranje.
 XML je i skup srodnih tehnologija i sam za sebe ne predstavlja nešto posebno već tek sa
srodnim tehnologijama daje pune rezultate.
PREGLED XML-A I NJEGOVE OSOBINE

 XML služi za transfer jer u sebi pored informacije ima i njenu poziciju u
odnosu na ostale informacije – XML pored informacije opisuje i strukturu.
 XML je u svojoj osnovi informacija o informaciji.
 Više nije dovoljno imati samo informaciju jer to u današnjim uslovima znači tražiti
i pronaći istu
 već je potreban način da opišemo informaciju a da taj opis informacije
upotrebimo dalje za pronalaženje iste i za njenu dalju obradu.
PREGLED XML-A I NJEGOVE OSOBINE

 Za bolje razumevanje su nam potrebni:

<?xml version="1.0" ?>

<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</subject>
<body>Puno pozdrava iz Beograda</body>
</note>
PREGLED XML-A I NJEGOVE OSOBINE

 Ovako bi mogao da izgleda jedan običan i jednostavan XML fajl kada ga posmatramo iz
Notepada.
 Odmah je uočljivo da postoje neki tagovi (oznake) koje uokviruju neki tekst.
 Upravo te oznake su ono što XML čini XML-om.
 One opisuju sadržaj odnosno informaciju.
PREGLED XML-A I NJEGOVE OSOBINE

 Međutim postoji još nešto što ovaj primer možda ne oslikava jasno – XML može da opiše
svojom strukturom i strukturu informacija odnosno njihov odnos u smislu hijerarhije.
 Dve veoma bitne stvari.
 Informacija o informaciji i informacija o strukturi u jednom dokumentu.
XML ČINJENICE

 XML je metod za smeštanje strukuiranih podataka u tekstualni fajl

 XML ima podatke i strukturu u tekstualnom fajlu.
 To ga kvalifikuje za rad sa bazama podataka.
 XML liči na HTML ali nije HTML Iako koristi tagove kao i HTML on se suštinski
razlikuje od HTML-a jer proizvoljno proširiv tagovima koje sami izmišljate.
PREGLED XML-A I NJEGOVE OSOBINE
 XML je tekst ali nije namenjen čitanju od strane ljudi već mašina Iako je
tekst nije namenjen čitanju već parsiranju od strane računara.
 XML se može koristiti za razvoj novih jezika
 XML ne pripada nikome, ne zavisi od platforme i dobro je podržan
 XML je samo specifikacija W3 konzorcijuma. Ujedno je i preporuka priznatog
autoriteta.
 Nema profitnu pozadinu i slobodan je za upotrebu.
 Da biste ga koristili niste ničim obavezani, ni platformom, ni proizvođačima,
ni licencama i ugovorima.
 Shvatite njegovu suštinu i koristite ga onako kako vama odgovara.
NAMENA XML-A

 Koristi se da pruži podatke i njihov opis a sam prikaz često i ne postoji.

 Jednostavno, XML služi kao format između dve aplikacije koja od jedne prihvata
podatke i pruža je drugoj aplikaciji.
KAKO RADI XML

 Za funkcionalnost koji pruža XML potreban je parser.

 U Internet Exploreru 5.0 i nadalje postoji ugrađen parser a za parsiranje
 Parsiranje, kada je XML u pitanju znači sledeće – rasčlanjivanje tekstualnog fajla i
pravljenje strukture koja se rekurzivno puni elementima XML stabla.
KAKO RADI XML

 To znači da parser izvodi sledeće operacije:

 1. Isčitava preprocesorski deo dokumenta (deo na početku dokumenta
između ? znakova) da bi došao od informacija koje se odnose na dokument a nisu
deo samog XML stabla. Na primer: <?xml version="1.0" encoding="windows-
1252"?>
KAKO RADI XML

 2. Zatim se isčitava prvi tag u XML strukturi i zapisuje njegovo ime – ovo je top
level ili startni tag.
 3. Zatim se zapisuje ime elementa.
 4. Zatim se isčitavaju ostali elementi redom da bi se odredilo koja svojstva ima
dati element strukture i zatim se ta svojstva upisuju - ako je u pitanju element
upisuje se njegova vrednost ili u formi uređenih parova atribut = vrednost ako je u
pitanju atribut.
KAKO RADI XML

 5. Ako sledeći tag nakon prvog nađenog nije oznaka za zatvaranje isčitava se
sledeći tag i on se definiše kao dete trenutnog elementa.
 Onda se parser vraća na korak 3. Ako je nađeni tag oznaka za zatvaranje onda je
element definisan.
 6. Ovaj proces se ponavlja dok se ne obradi čitav dokument.
IMENOVANJE ELEMENATA

XML elementi moraju da poštuju sledeća pravila:

 Imena mogu sadržavati slova brojeve i druge karaktere.
 Imena ne smeju počinjati brojem ili interpunkcijskim karakterom.
 Imena ne smeju počinjati slovima xml ili XML ili Xml.
 Imena ne mogu imati prazan prostor u sebi.
IMENOVANJE ELEMENATA

Neke opšte preporuke bi bile:

 Imena treba da budu samo opisujuća.

<prezime>, <adresa_stanovanja>
IMENOVANJE ELEMENATA

Imena treba da budu kratka i jasna jer to olakšava rukovanje:

<naslov_knjige>
a ne:
<naslov_knige_u_biblioteci>
IMENOVANJE ELEMENATA

 XML dokumenti imaju često odgovarajuću bazu podataka pa nazivi elemenata

treba da odgovaraju poljima u bazi.
 Moguće je koristiti i karaktere koji nisu engleski ali to vodi upotencijalni rizik da
stvar ne funkcioniše zbog nekog od elemenata softvera tako da bi naša lokalno
važeća preporuka bila da se ovo izbegava.
IMENOVANJE ELEMENATA

 Karakter ":" se ne treba koristiti u imenima jer je rezervisan za nešto drugo

(namespace) o čemu će kasnije biti reči.
XML ATRIBUTI

 XML elementi mogu imati atribute u otvarajućem tagu kao i HTML. Oni se koriste
za dodatne informacije o elementu.
 Iz HTML-a se sećamo ovoga:

<IMG SRC="slika.gif">
XML ATRIBUTI

 SRC atribut daje dodatne informacije o IMG elementu.

 Atributi često pružaju informacije koje nisu deo podataka.
 U sledećem primeru tip fajla je irelevantan za podatke ali je veoma bitan za softver koji
manipuliše elemenom:

<file type="gif">slika.gif</file>
XML ATRIBUTI

 Znaci navoda
 Vrednosti atributa moraju uvek biti unutar znaka navoda.
 Međutim moguće je koristiti jednostruke ili dvostruke znake navoda:

<ime=“Pera">
ili:
<ime=‘Pera'>
XML ATRIBUTI

 Dupli znaci navoda su češći međutim nekada je neophodno koristiti jednostruke

kao u sledećem primeru:

<ime=‘Petar “Pera" Petrovic'>

XML ATRIBUTI

 Šta koristiti - element ili atribut?

 Podaci se mogu skladištiti ili u elementima ili u atributima. Element ima sledeću
formu:

<ime>Pera</ime>

dok je atribut u formi:

<nesto ime=“Pera">
XML ATRIBUTI

Pogledajmo sledeća dva primera:

<komintent tip="nabavljač">
<ime>Pera</ime>
<prezime>Perić</prezime>
</komintent>

<komintent>nabavljač</komintent>
<ime>Pera</ime>
<prezime>Perić</prezime>
XML ATRIBUTI

 U prvom primeru tip je atribut. U drugom primeru tip je element.

 Oba primera daju iste informacije.
 Ne postoje određena pravila kada koristiti atribute a kada elemente.
 Neka načelna preporuka je da se elementi koriste kada je u pitanju nešto što je
samo po sebi celokupna informacija a ne neki njen pomoćni deo.
XML VALIDACIJA

 XML dokument sa ispravnom sintaksom je ispravno formirani XML dokument.

 XML proveren u odnosu na definiciju tipova dokumenata (DTD) je ispravan XML
dokument.
ISPRAVNO FORMIRANI XML DOKUMENTI

 Ispravno formirani XML dokumenti

 Ispravno formirani XML dokumenti ima ispravnu XML sintaksu.
<?xml version="1.0" ?>
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</subject>
<body>Puno pozdrava iz Beograda</body>
</note>
SINTAKSA XML-A

 Prva linija XML dokumenta - XML deklaracija - određuje XML verziju dokumenta.
 U ovom slučaju dokument poštuje specifikaciju 1.0 XML-a koju propisuje
W3Consortium.
 Ovaj red ujedno i govori Internet Exploreru da parsira (rasčlani) dokument XML
parserom odnosno da dokument tretira kao XML fajl a ne kao HTML fajl.
 SINTAKSA XML-A

 Bez ove linije dobili bismo poruku o grešci od pretrazivača.

 Ova linija nema svoj zatvarajući ekvivalent jer ona nije deo XML dokumenta već njegova
deklaracija.
 Sledeće je osnovni tag koji dokument formira kao poruku (<note>).
 Moguć je samo jedan osnovni tag inače opet dobijamo poruku o grešci.
 Sledeće četiri linije opisuju četiri podčlana osnovnog člana(to, from, subject, i body).
 Poslednja linija zatvara osnovni tag (</note>).
SINTAKSA XML-A

 Svi XML elementi moraju da budu zatvoreni

 U XML-u, izostavljanje završnog taga vodi u grešku. Dok je u HTML-u prolazilo:

<p>ovo je paragraf<p>ovo je još jedan paragraf

SINTAKSA XML-A

 u XML-u ovo ne bi bilo ispravno već bi ispravan dokument izgledao ovako:

<p>ovo je paragraf</p><p>ovo je još jedan paragraf</p>

SINTAKSA XML-A

 XML tagovi razlikuju mala i velika slova

 Za razliku od HTML-a, XML tagovi su case sensitive.
 U XML-u, tag <Poruka> nije isti kao tag <poruka>. Stoga treba voditi računa da
otvarajući i zatvarajući tagovi budu potpuno identični.
 I po nazivu i po upotrebljenim karakterima:

<Poruka>Ovo je neispravno</poruka>
<poruka>Ovo je ispravno</poruka>
SINTAKSA XML-A

 Svi XML elementi moraju biti propisno ugnežđeni

 Neispravno ugnežđeni elementi nemaju smisla u XML-u.
 Dok se u HTML-u elementi mogu preklapati u XML to nikako nije slučaj.
 Pogledajmo sledeći primer:

HTML ispravno
<b><i>Ovo je tekst</b></i>
XML ispravno
<b><i>Ovo je tekst</i></b>
SINTAKSA XML-A

 Svi XML dokumenti moraju da imaju osnovni (top level) ili startni tag
 Prvi tag u XML dokumentu je osnovni tag.
 Svi XML dokumenti moraju da imaju jedan par tagova koji definiše osnovni tag.
 Svi ostali elementi su ugnežđeni u osnovni tag.
 Gnežđenje u dubinu je neograničeno.
 Znači element može imati neograničen broj elemenata-dece.
 Odnos koji vlada je takozvani roditelj-dete odnos.
SINTAKSA XML-A
<note>
<to>Pera</to>
<from>Mika</from>
<subject>pozdrav</ subject>
<body>Puno pozdrava iz Beograda</body>

</note>
 Ovde je par osnovnih tagova <note> i </note> dok su podčlanovi parovi:
<to> i </to>
<from> i </from>
<subject> i </ subject>
<body> i </body>
SINTAKSA XML-A

 Vrednosti atributa moraju biti pod znacima navoda

 U XML-u se vrednosti atributa moraju uokviriti znacima navoda.
 XML elementi mogu imati atribute i formi ime=vrednost parova (kao i u HTML).
 Pogledajmo ova dva XML dokumenta.
 Prvi je neispravan a drugi je ispravan:
SINTAKSA XML-A

 U XML-u je sačuvan prazan prostor

 Korišćenjem XML-a prazan prostor je prikazan u parsiranom dokumentu. Na
primer:

<body>Puno pozdrava iz Beograda</body>

 će u parseru biti:

Puno pozdrava iz Beograda

 dok to sa HTML-om nije slučaj.

SINTAKSA XML-A

 XML može da sadrži ne-engleske karaktere (č,ć,ž,đ...) međutim tada je potrebno

dokument sačuvati u Unicode formatu.
 Stoga je u samu deklaraciju XML fajla uveden i atribut encoding (engl.
dešifrovanje) što zapravo govori browseru koju kodnu stranu da koristi.
 <?xml version="1.0" encoding="windows-1252"?>
JSON

 JSON je skraćenica od JavaScript Object Notation i predstavlja tekstualni format za skladištenje i transport
podataka
 JSON je „samoopisujući“ i lako ga je razumeti, tako da se koristi za slanje podataka između računara
 JSON je nezavisan od jezika, ekstenzija JSON fajlova je .json
 Ovaj primer je JSON string:
 '{"name":"John", "age":30, "car":null}’
 Definiše objekat sa 3 svojstva:
 Ime
 Godine
 Auto
 Svaka osobina ima vrednost.
 Ako se raščlani JSON string pomoću JavaScript programa, može se pristupiti podacima kao objektu:
 let personName = obj.name;
let personAge = obj.age;
ZAŠTO KORISITI JSON

 JSON format je sintaktički sličan kodu za kreiranje JavaScript objekata. Zbog toga,
JavaScript program može lako da konvertuje JSON podatke u JavaScript objekte.
 Pošto je format samo tekstualni, JSON podaci se lako mogu slati između računara i
koristiti bilo kojim programskim jezikom.
 JavaScript ima ugrađenu funkciju za pretvaranje JSON stringova u JavaScript objekte:
 JSON.parse()
 JavaScript takođe ima ugrađenu funkciju za pretvaranje objekta u JSON string:
 JSON.stringify()
 Prilikom skladištenja podataka, podaci moraju biti određenog formata, i bez obzira na
to gde odaberete da ih čuvate, tekst je uvek jedan od legalnih formata.
 JSON omogućava skladištenje JavaScript objekata kao teksta.
 JSON SINTAKSA

Primer pokazuje kako da koristite JSON za čuvanje informacija

 JSON sintaksa je podskup JavaScript sintakse, tako u vezi sa knjigama na osnovu njihove teme i izdanja.
da važe pravila:
 Podaci su u parovima ime:vrednost
 Parovi podataka su međusobno odvojeni zarezima
 Vitičaste zagrade skladište objekte
 Uglaste zagrade skladište nizove
 JSON podržava sledeće dve strukture podataka
 Kolekcija parova ime/vrednost – Ova struktura
podataka je podržana od strane različitih programskih
jezika.
 Uređena lista vrednosti – uključuje niz, listu, vektor ili
niz itd.
JSON PRIMER

 Ukoliko se razume kod sa prethodnog slajda potrebno je sačuvati kod sa slike dole
levo kao json.htm
 Ukoli se kod potom pokrene pomoću IE ili bilo kojeg drugog pregledača sa
omogućenim javascriptom biće prikazan rezultat kao sa desne strane
JSON TIPOVI PODATAKA

 JSON format podržava sledeće tipove podataka

No. Tipovi i opis

1 Number
format sa pomičnim zarezom dvostruke preciznosti u JavaScript-u

2 String
Unicode u dvostrukim navodnicima sa izlaznom kosom crtom

3 Boolean
true ili false

4 Array
uređeni niz vrednosti

5 Value
može biti string, broj, true ili false, null itd

6 Object
neuređena kolekcija parova ključ:vrednost

7 Whitespace
može se koristiti između bilo kog para tokena

8 null
Prazno polje
 JSON TIPOVI PODATAKA - NUMBER

 Number tim
 To je format sa pomičnim zarezom dvostruke preciznosti u JavaScript-u i zavisi od
implementacije.
 Oktalni i heksadecimalni formati se ne koriste.
 U Number se ne koristi NaN ili Infinity.  Sintaksa
 Sledeća tabela prikazuje tipove brojeva  var json-object-name = { string :
Sr. Tipovi i opis number_value, .......}
No.
 Primer koji prikazuje Number tip
1 Integer podataka , vrednost ne treba
Cifre 1-9, 0 i pozitivne i negativne vrednosti stavljati pod znake navoda
2 Fraction
Razlomic poput .3, .9 var obj = {marks: 97}
3 Exponent
Eksponenti poput e, e+, e-, E, E+, E-
 JSON TIPOVI PODATAKA - STRING

 String – Niska karaktera No. Type & Description

 Sintaksa
 To je niz od nula ili više unikod 1 " var json-object-name = { string :
"string value", .......}
Dupli navodnici
znakova sa dvostrukim 2 \
navodnicima sa izlaznom kosom obrnuta kosa crta
crtom. 3 /  Primer
kosa crta
 Znak je niz od jednog karaktera, 4 b var obj = {name: 'Amit'}
tj. niz dužine 1. backspace
5 f

 Tabela prikazuje različite 6

form feed
n
specijalne znakove koje možete Novi red

da koristite u nizovima JSON 7 r

carriage return
dokumenta 8 t
horizontalni tab
9 u
četiri heksadecimalne cifre
JSON TIPOVI PODATAKA - NIZ

 Niz  Sintaksa
 To je uređena zbirka vrednosti. [ value, .......]

 One su zatvorene u uglastim

zagradama što znači da niz počinje
 Primer
sa .[. i završava se sa .]..
 Vrednosti su odvojene sa ,
(zarezom).
 Indeksiranje niza može da se
započne sa 0 ili 1.
 Nizovi treba da se koriste kada su
imena ključeva uzastopni celi
brojevi.
 JSON TIPOVI PODATAKA - OBJEKAT

 Objekat  Sintaksa
 To je neuređen skup parova ime/vrednost. { string : value, .......}

 Objekti su zatvoreni u vitičaste zagrade,

odnosno počinju sa '{' i završavaju se sa '}'.
 Primer
 Posle svakog imena sledi ':' (dvotačka), a parovi
ključ/vrednost su razdvojeni sa , (zarezom).
 Ključevi moraju biti niske karaktera (string) i
treba da se razlikuju jedan od drugog.
 Objekte treba koristiti kada su imena ključeva
proizvoljni stringovi.
JSON TIPOVI PODATAKA – RAZMAK, NULL

 Razmak  Sintaksa
 Može se umetnuti između bilo kog para tokena. {string:" ",....}

 Može se dodati da bi kod bio čitljiviji.

 Primer
 Primer pokazuje deklaraciju sa i bez razmaka

 Null  Sintaksa
 Označava prazan tip. null

 Primer
JSON TIPOVI PODATAKA - BOOLEAN

 Boolean - uključuje true ili false vrednosti.

 Sintaksa var json-object-name = { string : true/false, .......}

 Primer var obj = {name: 'Amit', marks: 97, distinction: true}

• JSON vrednosti ne mogu biti jedan od sledećih tipova podataka:

• Funkcija
• Datum
• undefined
JSON.PARSE()

 Uobičajena upotreba JSON-a je razmena podataka sa web serverom.Kada

primate podatke sa veb servera, podaci su uvek string.Parsiranjem podatka
pomoću JSON.parse() funkcije podaci postaju JavaScript objekti.
 Ukoliko se primi tekst sa web servera:

 Upotrebom JSON.parse() funkcije tekst se može konvertovati u JavaScript

obejkat:


Treba se uveriti da je tekst u JSON formatu, inače će se dobiti sintaksička greška.
JSON.PARSE() - NIZ KAO JSON

 Kada se koristit JSON.parse() nad JSON izvedenim iz niza, metoda će vratiti
JavaScript niz, umesto JavaScript objekta.
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);

console.log(myArr);

 Rezultat u konzoli:
JSON.PARSE() - IZUZECI - DATUMI

 Parsiranje Date objekta

 Objekti datuma nisu dozvoljeni u JSON-u.
 Ako treba uključiti datum, potrebno je napisati ga kao string. Kasnije se može
ponovo pretvoriti u objekat datuma.
 Primer konvertovanja stringa u datum:
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

console.log(obj.name + ", " + obj.birth);

 Rezultat u konzoli:
JSON.PARSE() - IZUZECI - DATUMI

 Ili, se može koristiti drugi parametar, funkcije JSON.parse(), koji se zove reviver
(„funkcija za oživljavanje“).
 Parametar reviver je funkcija koja proverava svako svojstvo, pre nego što vrati
vrednost.
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

JSON.PARSE() - IZUZECI - FUNKCIJE

 Funkcije nisu dozvoljene u JSON-u.

 Ako treba uključiti funkciju, napiše se kao string.Kasnije se možete ponovo
pretvoriti u funkciju.
 Konvertovanje stringa u funkciju
const text = '{"name":"John", "age":"function () {return 30;}",
"city":"New York"}';
const obj = JSON.parse(text);

// eval funkcija nije bezbedna za korišćenje

obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

JSON.STRINGIFY()

 Uobičajena upotreba JSON-a je razmena podataka sa web serverom.

 Kada se šalju podaci na web server, podaci moraju biti string.
 Konvertovanje JavaScript objekat u string se izvršava pomoću JSON.stringify()
funkcije.
 Ukoliko postoji objekat definisan u JavaScript na sledeći način:
const obj = {name: "John", age: 30, city: "New York"};

 Upotrebom JavaScrip funkcije JSON.stringify() može se konvertovati u string:

const myJSON = JSON.stringify(obj);
JSON.STRINGIFY() – STRINGOVANJE NIZA

 „Stringovanje“ JavaScript nizova

 Takođe je moguće stringovati JavaScript nizove
 Ukoliko se posmatra niz u JavaScript-u:
const arr = ["John", "Peter", "Sally", "Jane"];

 Upotrebom funkcije JSON.stringify() niz se konvertuje u string na sledeći način:

const myJSON = JSON.stringify(arr);

 myJSON je sada string i može se proslediti ka sevreru.

JSON.STRINGIFY() – IZUZECI - DATUM

 Funkcija JSON.stringify() će pretvoriti sve datume u nizove.

const obj = {name: "John", today: new Date(), city : "New York"};
const myJSON = JSON.stringify(obj);
 String se možete konvertovati nazad u objekat datuma prilikom prijema.
JSON.STRINGIFY() – IZUZECI - FUNKCIJE

 U JSON-u funkcije nisu dozvoljene kao vrednosti objekata.

 Funkcija JSON.stringify() će ukloniti sve funkcije iz JavaScript objekta, i ključ i
vrednost:
const obj = {name: "John", age: function () {return 30;},
city: "New York"};
const myJSON = JSON.stringify(obj);

console.log(myJSON);
 Rezultat je : {"name":"John","city":"New York"}
 Ovo se može izbeći ako se funkcije konvertuju u stringove pre pokretanja funkcije
JSON.stringify(). const obj = {name: "John", age: function ()
{return 30;}, city: "New York"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
 JSON OBJEKTI

 JSON objekti se mogu kreirati pomoću JavaScript-a.

 Različiti načini kreiranja JSON objekata koristeći JavaScript su:
 Kreiranje praznog objekta:
 var JSONObj = {}
 Kreiranje objekta pomoću konstruktora new Object:
 var JSONobj = new Object();

 Primer: Kreiranje objekta sa atributom bookname sa vrednošću tipa string, atribut price sa
numeričkom vrednošću. Atributu se pristupa korišćenjem '.' tačka operatera
 var JSONObj = { "bookname ":"VB BLACK BOOK", "price":500 };
 JSON OBJEKTI PRIMER KREIRANJA

<html>
<head>
<title>Creating Object JSON with JavaScript</title>
<script language = "javascript" >
var JSONObj = { "name" : "tutorialspoint.com", "year" : 2005 };

document.write("<h1>JSON with JavaScript example</h1>");

document.write("<br>");
document.write("<h3>Website Name = "+JSONObj.name+"</h3>");
document.write("<h3>Year = "+JSONObj.year+"</h3>");
</script>
</head>
<body>
</body>
</html>
<html>
   <head>
      <title>Creation of array object in javascript using JSON</title>
      <script language = "javascript" >
         document.writeln("<h2>JSON array object</h2>");
         var books = { "Pascal" : [
            { "Name"  : "Pascal Made Simple", "price" : 700 },
            { "Name"  : "Guide to Pascal", "price" : 400 }],  
               
            "Scala"  : [
               { "Name"  : "Scala for the Impatient", "price" : 1000 },
               { "Name"  : "Scala in Depth", "price" : 1300 }]    
         }    
         var i = 0
         document.writeln("<table border = '2'><tr>");
           
         for(i = 0;i<books.Pascal.length;i++) {
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Pascal[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Pascal[i].price +"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }

         for(i = 0;i<books.Scala.length;i++) {
            document.writeln("<td>");
            document.writeln("<table border = '1' width = 100 >");
            document.writeln("<tr><td><b>Name</b></td><td width = 50>" + books.Scala[i].Name+"</td></tr>");
            document.writeln("<tr><td><b>Price</b></td><td width = 50>" + books.Scala[i].price+"</td></tr>");
            document.writeln("</table>");
            document.writeln("</td>");
         }
           
         document.writeln("</tr></table>");
      </script>
   </head>
   
   <body>
   </body>
</html>
SKLADIŠTENJE I PRIJEM PODATAKA

// skladištenje podataka:
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// prijem podataka:
//localStorage – služe za skladištenje podataka lokalno u klijent pretraživača
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;