VEB PROGRAMIRANJE PRIRUČNIK Nikola Vitković

Niš, 2017.

SADRŽAJ:

Uvod..................................................................................................5 Osnove VEB-a....................................................................................6 Dodatni elementi veb saobraćaja ...................................................................................... 6 Primer komunikacije na vebu......................................................................................... 7 Zahtev klijenta .................................................................................................................... 8 Odgovor servera................................................................................................................. 8 Ruteri i računari na vebu .................................................................................................... 8 Višeslojne arhitekture sistema........................................................................................... 9 Klijent server arhitektura u dva nivoa.......................................................................... 10 Klijent server arhitektura u tri nivoa ............................................................................ 11

HTML ...............................................................................................12 Istorijat HTML-a................................................................................................................ 12 Razvoj HTML-a.............................................................................................................. 13 Elementi HTML-a.............................................................................................................. 15 Deklarisanje i identifikacija HTML dokumenta ............................................................ 15 Element html................................................................................................................ 16 Elementi head i title ..................................................................................................... 16 Element meta ............................................................................................................... 18 Element body ............................................................................................................... 19 Komentari u HTML-u .................................................................................................... 19 Naslovi .......................................................................................................................... 19 Pasusi............................................................................................................................ 20 Oznaka za novi red ....................................................................................................... 20 Uređene liste ................................................................................................................ 22 Neuređene liste............................................................................................................ 23 Linkovi .......................................................................................................................... 25 1

Ubacivanje slika, medijalnog sadržaja i skriptova ........................................................ 29 Element img ................................................................................................................. 30 Ubacivanje skriptova .................................................................................................... 32 Kreiranje tabela ............................................................................................................ 33 Kreiranje formi ............................................................................................................. 41 Element form ............................................................................................................... 41 Frejmovi........................................................................................................................ 46

Cascading Style Sheets (CSS) ............................................................48 Anatomija CSS koda ......................................................................................................... 48 Različite vrste selektora ................................................................................................... 49 Neki elementi CSS-a ......................................................................................................... 50 Blok model.................................................................................................................... 50 CSS3 .................................................................................................................................. 53 CSS3 Rounded Corners ............................................................................................. 54 background-size ........................................................................................................... 55 CSS3 Colors................................................................................................................... 57 CSS3 Web Fonts - The @font-face Rule ....................................................................... 58 CSS3 transformacije ..................................................................................................... 59 CSS3 tranzicije .............................................................................................................. 63 CSS3 animacije ............................................................................................................. 64 CSS jedinice mere (UNITS)................................................................................................ 64

Uvod u JavaScript.............................................................................68 Osnove JavaScript jezika .................................................................................................. 68 Umetanje JavaScript-a u HTML dokument .................................................................. 68 Sintaksa jezika JavaScript ............................................................................................. 70 Funkcije ........................................................................................................................ 88 Objektno orijentisani JavaScript ...................................................................................... 90 Objekti .......................................................................................................................... 90 Klase ............................................................................................................................. 91

Exception objekat............................................................................................................. 97 Događaji u JavaScript-u ................................................................................................ 97 Greške u JavaScript-u i njihova primena ...................................................................... 98 Objektni model prikazivača (BOM – Eng. Browser Object Model) ................................ 101 Window objekat ......................................................................................................... 102 history objekat ........................................................................................................... 102 location objekat.......................................................................................................... 103 navigator objekat ....................................................................................................... 104 screen objekat ............................................................................................................ 104 Objektni model dokumenta (DOM – Eng. Document object model) ............................ 105

HTML DOM ....................................................................................107 Elementi HTML DOM standarda .................................................................................... 107 Atributi i metode HTML DOM čvorova .......................................................................... 109 Atributi ....................................................................................................................... 109 HTML Forme,JavaScript-a i HTML DOM......................................................................... 112

SPRING Framework (programski okvir)...........................................116 Dependency Injection (DI).............................................................................................. 116 Aspect Oriented Programming (AOP) ............................................................................ 117 Instalacija potrebnog softvera ....................................................................................... 118 Java JDK (Java Develompent Kit)................................................................................ 118 Instalacija aplikacionog servera (Tomcat).................................................................. 118 Instalacija IDE (Integrated Develompent Environment) ............................................ 122 Preuzimanje Spring biblioteka ................................................................................... 126 Kreiranje prve Spring aplikacije...................................................................................... 132 Kreiranje opšte Java aplikacije ................................................................................... 132 Spring implementacija................................................................................................ 136 Definisanje vrednosti atributa iz properties fajla za DI.............................................. 144 Spring bean Scope (Oblast važenja) ........................................................................... 144 Životni ciklus Bean-a................................................................................................... 148

Java Annotations (Labele, Oznake) u Spring-u............................................................... 150 Spring Dependency Injection sa anotacijama i automatskim umrežavanjem ............... 151 Kreiranje DI preko konstruktora ................................................................................ 151 Setter injection........................................................................................................... 153 Anotacija preko Java polja (atributa) ......................................................................... 154 Automatsko umrežavanje više klasa .......................................................................... 155 Definisanje Oblasti Važenja Bean-a ........................................................................... 156 Definisanje anotacija za incijalizaciju i uklanjanje Bean-a - lifesycle ......................... 157 Definisanje Spring konfiguracije preko Java koda.......................................................... 157 Kreiranje Bean-a sa implementacijom DI................................................................... 159 Ubacivanje vrednosti iz properties fajla..................................................................... 160 SPRING MVC................................................................................................................... 162 Konfigurisanje Spring MVC......................................................................................... 163 Definisanje projekta u Eclipse .................................................................................... 164 Data Binding (Povezivanje podataka) ........................................................................ 174 Validacija Forme......................................................................................................... 177 Prilagođena validacija (Custom Validation) ............................................................... 182 Hibernate........................................................................................................................ 185 Hibernate razvojni ciklus (CRUD aplikacija) ............................................................... 192

Uvod Veb priručnik je sveobuhvatno uputstvo za kreiranje Veb aplikacija u Javi. Sastoji se od sledećih poglavlja: 

Uvod u veb – Ovo poglavlje prikazuje osnove funkcionisanja veb-a, kao i neke od primenjenih tehnologija



HTML – Kao jezik koji se koristi za prikaz sadržaja na veb-u, HTML je neizostavno element koji se mora poznavati. U ovom priručniku je dat kratak pregled HTML tagova i njihove primene.



Cascading Style Sheets (CSS) – CSS definiše skup elemenata kojima se uređuje dizajn veb strane. Zajedno sa HTML-om čini moćan alat za dizajnera veb aplikacija.



Uvod u JavaScript – JavaScript je skripting jezik namenjen kreiranju dinamičkih veb aplikacija.



HTML DOM – Document Object Model (DOM) je osnovni model veb dokumenata i sadrži specifikaciju elemenatat koji se koriste na veb



Spring framework – Spring je programski okvir koji omogućava kreiranje kompleksnih veb aplikacija. Spring čini mnogo implementiranih tehnologija, od kojih se u ovom priručniku obrađuju Spring MVC i Hibernate.

Osnove VEB-a Veb prostor čini mnoštvo uređaja povezanih na određeni način (po određenom standardu) koji komuniciraju među sobom putem određenih protokola (npr. HTTP). Računari koji su povezani na mrežu (WWW) se mogu podeliti na dve generalne grupe: klijente i servere.

Zahtev KLIJENT

SERVER

Odgovor Slika 1. Veza između klijenta i servera (uprošćena šema) 



Klijenti su najčešće uređaji koji su povezani na internet (ili lokalnu mrežu), a koji mogu da sadrže odgovarajući softver koji omogućava pristup vebu. Primer nekih od klijenata: o PC sa internet pregledačem (Chrome, Mozila, Internet Explorer), o Mobilni telefon sa odgovarajućim softverom o Pametni uređaji... Server su uređaji ili uređaj koji omogućavaju skladištenje aplikacija, veb strana, baza podataka i slično. Klijent kreira zahtev ka veb serveru, koji odgovara na zahtev i šalje podatke nazad ka klijentu u odgovarajućem formatu (npr. HTML).

Dodatni elementi veb saobraćaja  



Internet konekcija – Fizička konekcija koja omogućava prenos podataka (paketa) između povezanih uređaja TCP/IP – Prenosni protokol i internet protokol (Transmission Control Protocol/Internet Protocol) koji definišu način prenosa podataka kroz veb. Može se posmatrati kao transportno sredstvo koje prenosi poštanske pakete izmedju dva mesta (dve adrese), A i B. Mesto A je klijent, a mesto B je server. TCP Protokol omogućava prenos podataka, odnosno paketa u našem primeru, između mesta A i B. o Da bi komunikacija mogla da se ostvari potrebno je znati fizičku adresu koja je definisana IP brojem – U našem primeru to je na primer fizička adresa mesta gde se isporučuje paket. DNS – Računar (sa odgovarajućim softverom) koji omogućava pretvaranje fizičkih IP adresa računara (uređaja) u semantički oblik (tekstualnu adresu). To znači da ako je klijent otkucao adresu www.poseti.com, zadatak DNS servera je da tu adresu pretvori u IP adresu, koja može na primer biti 100.100.100.101.



HTTP – Aplikacioni protokol koji omogućava komunikaciju između servera i klijenta. Može se definisati kao specifičan jezik kojim komuniciraju server i klijent.

Primer komunikacije na vebu Postupak komunikacije na vebu je prikazan na slici 2. 1. Prvi korak je unos veb adrese u semantičkom obliku – www.poseti.com 2. Veb pregledavač poziva DNS server i vrši se transformacija semantičke adrese u IP adresu. 3. Veb pregledavač vrši formiranje HTTP zahteva i on se prosleđuje veb serveru korišćenjem TCP/IP-a. 4. Veb server sprema odgovor i u vidu paketa (malih fragmenata) šalje odgovor nazad klijentu. 5. Veb pregledavač skuplja pakete u jednu celinu i prikazuje veb stranu klijentu.

VEB KLIJENT Veb adresa www.poseti.com

DNS

IP adresa servera

HTTP zahtev

Veb Server

HTTP odgovor Slika 2. Komunikacija na vebu između servera i klijenta

Primer HTTP poruke Zahtev klijenta GET /hello.htm HTTP/1.1 User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT) Host: www.tutorialspoint.com Accept-Language: en-us Accept-Encoding: gzip, deflate Connection: Keep-Alive

Odgovor servera HTTP/1.1 200 OK Date: Mon, 27 Jul 2009 12:28:53 GMT Server: Apache/2.2.14 (Win32) Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT Content-Length: 88 Content-Type: text/html Connection: Closed

Hello, World!

Ruteri i računari na vebu Ruteri su računari opremljeni sa specifičnim softverom i predstavljaju veoma važan deo mreža. Kada ne bi bilo rutera računari bi morali da se povezuju svaki sa svakim, kao što je i prikazani na slici 3a, pri čemu bi svaki od računara morao da poseduje mnoštvo mrežnih priključaka. Ruteri omogućavaju centralno povezivanje računara, kao što je prikazano na Slici 3b. Glavna funkcija rutera je da pravilno usmeri poruku od izvornog računara ka odredišnom računaru. Na taj način potrebno je da računar bude povezan na mrežu samo sa ruterom jednim mrežnim priključkom. Ruter se brine za dalja povezivanja. Takođe, moguće je izvršiti povezivanje između pojedinačnih mreža sa idividualnim ruterima u globalnu mrežu, Slika 3c (to je način funkcionisanja interneta).

a) Računari povezani bez rutera

b) Računari povezani pomoću rutera

c) Mreža računara sa više povezanih rutera Slika 31. Mreža povezanih računara

Višeslojne arhitekture sistema Softverski sistemi su tokom istorije prošli kroz različite faze. Prva faza u primeni računara su bili tzv. mainframe računari. U pitanju je arhitektura sa jednim centralnim računarom, na kome 1

https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work

se nalazi sav softver koji zna da nešto uradi. Korisnici sa tim računarom komuniciraju preko terminala (koji može da prihvati samo unos sa tastature), koji centralnom računaru šalje unete podatke. Centralni računar te podatke obraĎuje, nakon čega se nekakav tekstualni rezultat ponovo prikazuje na terminalu. Ograničenje koje postoji kod ovakve arhitekture je da nije lako podržati grafički korisnički interfejs, ili pristup do različitih distribuiranih baza podataka. Druga faza u razvoju arhitekture softvera je bila arhitektura sa deobom datoteka. U početku su mreže PC računara radile sa ovom arhitekturom. Postoji server koji preuzima datoteke sa neke zajedničke lokacije i prebacuje ih kod konkretnog korisnika. Korisnik dalje svoj posao radi u okruženju svog računara. Ovakva arhitektura može da funkcioniše ako se ne prebacuju velike količine podataka, ako nema stalnog ažuriranja i sl. Klijent server arhitektura u dva nivoa Ova arhitektura nastaje kao rezultat ograničenja u prethodnoj arhitekturi. Server koji radi sa datotekama je sada zamenjen sistemom za upravljanje relacionim bazama podataka. Uz pomoć takvog sistema korisničke aplikacije mogu da direktno postavljaju upite u bazi. Ova arhitektura smanjuje saobraćaj koji se šalje preko mreže jer se ne prebacuju cele datoteke, već samo odgovor na upit. Kod osnovne klijent server arhitekture postoje tri komponente, koje su rasporeĎene u dva nivoa. Nivoi su klijent (aplikacija koja traži usluge) i server (aplikacija koja pruža usluge). Komponente koje tu postoje su:   

Grafički korisnički interfejs Poslovna logika (logika programa) Baza podataka

Grafički korisnički interfejs se u ovom slučaju postavlja isključivo kod klijentske mašine. Baza podataka je obavezno na serveru, dok se poslovna logika može nalaziti i na jednom i na drugom nivou. Rad ovakvih sistema se najčešće odvija tako što klijent preko GUI-ja traži usluge od servera sa bazom podataka. Glavni deo obrade tih podataka, odnosno programske logike, je na klijentu. Na serveru se obično implementira deo logike vezan za pristup podacima (uskladištene procedure). Klijent sa serverom uglavnom komunicira preko SQL iskaza. I pored toga što je predstavljala napedak u odnosu na mainframe arhitekturu, klijent server arhitektura u dva nivoa ipak ima i svoje nedostatke. Prilagodljivost. Ispitivanja su pokazala da ovakva arhitektura može da posluži kod mreža koje sadrže do 100 klijenata. Ako broj klijenata pređe tu brojku peformanse značajano opadaju. Razlog je u tome što stalno postoji živa veza između klijenta i servera, čak i kad se ništa ne šalje.

Ako se poslovna logika implementira u obliku uskladištenih procedura, onda se može desiti da opadnu performanse, jer se dosta posla obavlja na serveru (za sve korisnike). Upotreba sa različitim bazama podataka. Ako se koriste uskladištene procedure za implementaciju neke složene logike, onda je vrlo teško promeniti bazu, jer se procedure pišu u jeziku specifičnom za određenu bazu podataka. Administracija i konfigurisanje sistema. Kod ovakve arhitekture može biti teško administrirati i održavati aplikaciju, pošto se aplikacije nalaze na klijentu. Pošto klijenata može biti više, treba na svakoj od klijentskih mašina izvršiti istu instalaciju. Klijent server arhitektura u tri nivoa Arhitektura u tri niova nastaje kao odgovor na nedostatke arhitekture u dva nivoa. Ovde se uvodi treći nivo koji se nalazi između klijenta i servera. Na ovom srednjem nivou se nalazi poslovna logika. Srednji nivo može da opsluži na hiljade korisnika, upotrebom naprednih tehnika za upravljanje većim brojem korisnika. Arhitektura u tri nivoa se koristi u slučajevima kada je potrebna klijent server arhitekura, ali se traže bolje performanse, fleksibilnost, lakše održavanje i prilagodljivost (u poređenju sa arhitekturom u dva nivoa), pri čemu korisnik i dalje ne treba da bude svestan složenosti celog sistema. Ove karakteristike su učinile da je arhitektura u tri nivoa postala popularan izbor za aplikacije koje rade na internetu.

Slika 4. Arhitektura aplikacija u tri nivoa

Srednji nivo je taj koji pruža usluge koje su zajedničke za više aplikacija. Ovaj nivo može da poboljša performanse i sve ostale karakteristike time što se logika centralizuje. Centralizovana logika olakšava održavanje i administriranje, jer se promene postavljaju samo na jednom mestu. Ponekad se srednji nivo može podeliti na dva ili više delova, sa različitom funkcijom. U takvim slučajevima se koristi termin arhitektura u više nivoa. To na primer, može biti slučaj kod pojedinih internet aplikacija. Kod takvih aplikacija obično postoje tanki klijenti, sa grafičkim interfejsom u HTML jeziku. Sa druge strane je aplikacioni server pisan u jezicima C++ ili Java. Praznina između ova dva nivoa je suviše velika da bi direktna komunikacija bila jednostavna. U takvim slučajevima se postavlja još jedan nivo (web server). Taj nivo prihvata zahteve koji dolaze sa interneta i kreira html odgovor uz pomoć usluga koje pruža nivo sa poslovnom logikom. Dodatni nivo obezbeĎuje izolaciju GUI-ja i poslovne logike.

HTML HTML (HyperText Markup Language) je markup (opisni) jezik kojim se definiše sadržaj veb strane, kao i način prikaza datog sadržaja. HTML nije programski jezik. HTML dokument se sastoji od niza elemenata, a koji omogućavaju potpunu definiciju šta, i na koji način će nešto biti prikazano. Ti elementi mogu biti: stilovi, slike, audio i video sadržaj, programski kod (JavaScript) i drugo. Osnova HTML-a su tagovi, ili objekti koji definišu strukturu kompletnog dokumenta.

Istorijat HTML-a 1988 godine fizičar Tim Berners Lee, koji je bio zaposlen kao istraživač pri CERN institutu u Švajscarskoj, predlaže nov način razmene dokumenata među istraživačima instituta – ENQUIRE. Nov sistem je zasnovan na hipertekstu (linkovan tekt) . 1989 godine zajedno sa sistem inženjerom sa CERN-a, Robert Cailiao-om, Tim Berners Lee predlaže novi sistem za razmenu podataka pod nazivom W3 projekt (World Wide Web) koji je prihvaćen od strane CERN-a. Tom Berners Lee je definisao osnovne karakteristike WWW-a, a koje su: 1. WWW mora biti nezavisan od platformi na kojima se koristi (DOS, UNIX) 2. Sposobnost korišćenja i ugnježdavanja u postojeće informacione sisteme. 3. Transportni mehanizam za prebacivanje podataka i dokumenata kroz mrežu (danas je to HTTP) 4. Identifikaciona shema za lociranje kako lokalnih tako i udaljenih dokumenata (URL danas) 5. Standardni jezik za formatiranje sadržaja dokumenata. (HTML)

Razvoj HTML-a

Prva specifikacija HTML 1.0 1991 godine se pojavljuje prva zvanična specifikacija HTML-a pod nazivom HTML tags. Ova psecifikacija je sadržala 22 elemenata, od kojih se danas u upotrebi koriste 13 elemenata. Tokom sledećih nekoliko godina ideja ovog genijalnog fizičara je postajala sve prihvaćenija i mreža se širila. Nastajali su pretraživači – aplikacije namenjena pregledavanju HTML dokumenata. Pretraživači su postajali multiplatformski, tj. nezavisni od operativnog sistema na kome rade. U toku ravoja jezika2 bilo je nekoliko pokušaja da se jezik kodira (da se definišu elementi jezika). Januara 1992 godine pojavila se prva verzija tekstualnog pretraživača, kreirana od strane CERN-a. U isto vreme biblioteka koda sa prvim struktuiranim sadržajem jezika se pojavila i razvijala. Međutim, problem se javio, jer se pojavljivalo sve više pretraživača, koji su imali različite mogućnosti, i različite načine rada sa HTML-om, što je dovelo do još većeg problema u standrdizaciji jezika. 1993 godine Tim Berners Lee i Dave Ragget definišu prvu zvaničnu verziju sintakse HTML jezika pod nazivom HTML 1.0. Prilikom objavljivanja ovog nacrta glavna tema je bila da se održi kontinuitet sa već kreiranim elementima HTML-a

Druga specifikacija HTML 2.0 April 1994. godine Dan Conolly kreira novi nacrt specifikacije jezika pod nazivom HTML 2.0. Vrlo brzo nakon objavljivanja ovaj nacrt je modifikovan. Jul 1994. Karen Muldrow modifikuje postojeći nacrt. Glavna promena se odnosila na usklađivanje načina pisanja HTML dokumenata i pretraživača koji ih prikazuju. 22. septembra 1995. godine se verifikuje nova verzija i HTML 2.0.

Treća specifikacija HTML 3.0 Marta 1995. godine prva verzija nobog nacrta predložena. Ovaj nacrt predstavlja uvođenje dosta novih elemenata u HTML (tabele, tekst oko slika,…), ali i drugačiji način predstavljanja elemenata. Zbog velike razlike u odnosu na HTML 2.0, uvođenje ovog nacrta u sistem standardizacije je napušteno.

2

HTML nije programski jezik. U tekstu se pod jezikom misli na semantičku strukturu.

Septembra 1995. – Nacrt se napušta (ne u potpunosti jer mnogo elemenata i predloga ulazi u HTML 3.2 i HTML 4.0)

Četvrta specifikacija HTML 3.2 Maja 1996. godine predstavlja se nacrt novog predloga za standardizaciju HTML-a. U ovaj nacrt su ušli HTML 2.0 specifikacija i svi elementi koji su se pokazali kao dobri u nacrtu HTML 3.0. Januar 1997. W3C konzorcijum prihvata novi nacrt i HTML 3.2 postaje novi standard.

Peta specifikacija HTML 4.0 i HTML 4.01 Jula 1997. godine pojavljuje se nacrt nove veryije standarda – HTML 4.0 U novom predlogu se pojavljuju novi elementi: Stilovi, Skriptovi, Internacionalizacija, proširene forme i tabele, objekti. Decembra 1997. Postaje W3C preporuka za korišćenje i prikazivanje u pretraživačima. Avgust 1999 HTML 4.01 postaje predložena preporuka za korišćenje Decembar 1999 HTML 4.01 postaje W3C preporuka. HTML 4.01 standard postaje zadnja zvanična HTML verzija.

XHTML 1.0 i XHTML 1.1 1998 godine pojavljuje se nova specifikacija HTML-a koja u sebi objedinjuje HTML specifikaciju i XML specifikaciju. Nova XHTML specifikacija predstavlja prevedenu HTML specifikaciju po pravilima XML sintakse. Avgusta 2002 XHTML 1.0 druga revizija postaje zvanična preporuka W3C-a. U isto vreme se razvija i XHTML 1.1 koji je dosta striktniji od XHTML 1.0 i po tom standardu se još više razdvaja struktura dokumenta od načina njjegovog prikazivanja. XHTML 1.1 standard postaje preporuka W3C-a Maja 2001. godine Bitno je napomenuti da XHTML predstavlja novi standard HTML jezika i prema tome to je samo još jedan korak napred u razvoju Interneta i HTML-a.

HTML 5 U oktobru 2014. godine trenutno aktuelni standard (sa određenim unapređenjima)pojavio se HTML 5.

Novi HTML elementi:      

Semantički elementi:

,