iwa

Iwa skripta

Uvod

Internet i Web. Povijest Interneta i Weba. Razvoj Interneta i Weba

Internet: fizička mreža koja povezuje milijune računala koristedi isti protokol za djeljenje/prijenos informacija

(TCP/IP)

u stvarnosti Internet je mreža manjih mreža

World Wide Web: kolekcija međusobno povezanih multimedijskih dokumenata koji su pohranjeni na

Internetu i kojima se pristupa koristedi zajednički protokol (HTTP)

Ključna razlika: Internet je sklopovlje, Web je softver

Internet je distribuiran i decentraliziran

svako računalo u mreži ima vlastitu jednoznačnu IP adresu npr., barok 161.53.120.3

svaka poruka koje se prenosi cijepa se u pakete (~1500 znakova)

svaki paket se označava s ishodišnom i odredišnom adresom, te brojem paketa

individualni paketi šalju se neovisno

računala posebne namjene, zvaniusmjerivači (routers), čitaju odredišnu

adresu i prosljeđuju paket prema njoj kada paketi stignu na odredište oni se ponovno sastavljaju u

poruku

Transmission Control Protocol (TCP): određuje kako se cijepaju i ponovno sastavljaju poruke

Internet Protocol (IP): određuje kako se paketi označavaju i usmjeravaju

Porast interneta

tijekom 70-ih veličina ARPANET-a udvostručavala se svake godine

u 80-tim vlada SAD uzela je vedu ulogu u razvoju Internet 1986

kreiran je NSFNET za akademska istraživanja ARPANET je ostavljen na vojna i vladina računala

do 90-tih Internet povezuje gotovo sve koledže i sveučilišta tvrtke i pojedinci povezuju se kako pada

cijena opreme ~1,000,000 računala do1992

u1992 kontrola nad Internetom prenešena je na neprofitne organizacije: Internet Society: Internet

Engineering Task Force , Internet Architecture Board, Internet Assigned Number Authority,World-

Wide-Web Consortium

Povijest Weba

1940. ideja hiperteksta (međusobno povezanih dokumenata) može se nadi kod Vannevar Busha

1989, Tim Berners-Lee s European Particle Physics Laboratory (CERN) dizajnira hipertekst sustav za povezivanje

dokumenata preko Interneta

dizajniran(Ne-WYSIWYG) je jezik za specificiranje sadržaja dokumenta koji je evolvirao u HyperText

Markup Language (HTML)

dizajniran je protokol za preuzimanje dokumenatai interpretiranje sadržajakoji je evolvirao u

HyperText Transfer Protocol (HTTP)

implementiran je prvi preglednik(tekstu-usmjeren)

1993 Marc Andreessen (student na the University of Illinois National Center for Supercomputing Applications)

razvijaMosaic, prvi grafički Web preglednik

intuitivno, klik temeljeno sučelje učinilo je da hipertekst postane dostupan masama

integracija multimedije (slika, video, zvuk, …) postaje jednostavnija

1994 Andreessen napušta NCSA da bi osnovaoNetscape » jeftin/besplatan preglednik koji je populariziraoWeb

(75% tržišnog udjela u 1996)

Arhitektura Web-a

Elementi Web-a (Web poslužitelj i preglednik), njihove uloge i osnovne značajke njihovog

konfiguriranja. Principi prijenosa poruka mrežom između Web poslužitelja i preglednika

u tipičnoj Web aplikaciji. Osnove HTTP.

Što je potrebno za komunikaciju na Interneta?

Komunikacijski medij: telefonske linije, ISDN, ADSL, radio valovi;lokalna mreža;linije posebne namjene

(ATM) i dr.

Komunikacijske naprave:modemi, mobilni telefoni;mrežne kartice; ATM preklopnici i dr.

Programska oprema – softver

Protokoli - opis formata poruke i pravila koja moraju slijediti dva računala da bi izmijenila poruke

OSI 7-slojni model

Razvijen odISO u1984 pruža apstraktni model umrežavanja dijeli poslove koji su uključeni u prijenos podataka

između računala u 7 grupa svakoj grupi poslova pridružen je sloj

Svaki sloj je samosadržan tako da može biti samostalno implementiran promjene/ažuriranja sloj ne utječu na

ostale slojeve

U 70-tim mreže su bile ad hoc i ovisile su o proizvođačim

Slojevi protokola:

Application layer opisuje kako aplikacije komuniciraju npr., HTTP, FTP, Telnet, SMTP

Presentation layer opisuje format podataka koji se prenose i osigurava da de biti čitljivprimatelju npr., floating

point format, data compression, encryption

Session layer opisuje organizaciju slijeda velike količine podataka i upravlja komunikacijskom sesijom

npr.,koordinira zahtjeve/odgovore

Transport layer opisuje kvalitetu i prirodu isporuke podataka npr., kako se koristi ponovno slanje za osiguranje

isporuke

Network layer opisuje kako se nizovi promjena preko različitih veza podataka mogu isporučiti podatke preko

mreženpr., adresiranje i usmjeravanje/rutanje

Data Link layer opisuje logičku organizaciju bitova podataka koji se prenose na pojedinačnom mediju

npr., slijed okvira, obavještavanje o pogreškama

Physical layer opisuje fizičke i električke osobine komunikacijskih medija npr., napon, prijenos podataka, max

razmaci

Preko mreže procesi na istom sloju mogu komunicirati npr., Web poslužitelj i preglednik izvršavaju se na sloju

aplikacije, a komuniciraju preko HTTP u stvarnosti, prava komunikacije obavlja se na fizičkom sloju

Gornji slojevi mogu komunicirati samo s onima iznad i ispod na ishodištu,

kako se podaci prenose prema donjim slojevima:

protokol za svaki sloj dodaje podacima kontrolne informacije na odredištu, kako se podaci prenose

prema višim slojevima:

protokol za svaki sloj skida i analizira kontrolne informacije tog sloja

Internet/intranet protokoli

POP -Post Office Protocol - protokol za prijenos e-mail poruka sa servera na zahtjev.

HTTP - Hypertext Transfer Protocol -protokol aplikacijske razine za raspodijeljene, hipermedijske informacijske

sustave koji međusobno surađuju. FTP (file transfer) iHTTP su građeni na vrhu TCP

Koristi se od WWW globalne informacijske inicijative 1990.

Prva verzija HTTP referencirana je kao HTTP/0.9.

tHTTP/1.0 verzija definirana je kao RFC 1945 (Request for Comments), poboljšala je protokol dopuštanjem da

poruke budu uformatu MIME (Multipurpose Internet Mail Extensions

HTTP/1.1 verzija (RFC 2068, 2616) definira ulogu hijerarhijskih zastupnika (proxy), zalihosti (caching),

permanentne veze, virtualne domadine (host)

HTTP protokol je protokol tipa zahtjev/odgovor. Klijent šalje zahtjev poslužitelju u obliku metode zahtjeva, (URI

-Uniform Resource Identifier), verzije protokola, slijedi MIME izgled porukkoja sadržava modifikatore, klijentove

informacije i mogude tijelo poruke. Šalje se preko veze sa poslužiteljem. Poslužitelj odgovara sa linijom statusa,

uključujudi verziju protokola poruke, i kod za uspjeh ili neuspjeh, slijedi MIME izgled poruke koja sadrži verziju

poslužitelja, metainformacije o entitetu i mogudi sadržaj tijela entiteta.

NNTP -News Network Transfer Protocol - protokol za prijenos mrežnih novosti

SMTP -Simple Mail Transfer Protocol - protokol za razmjenu elektroničke pošte između klijenata sa

zajedničkim pristupom do poslužitelja na kojem se pohranjuju poruke. Definira skup zaglavlja poruke, omotnicu

poruke i format sadržaja

poruke.

FTP -File Transfer Protocol - omogudava prijenos datoteka između dviju lokacija na Internetu/intranetu. FTP

(file transfer) iHTTP su građeni na vrhu TCP

SSL -Secure Socket Layer - protokol za mrežne komunikacije koji koristi tehnologiju kombinacije privatnih i

javnih ključeva.

TCP -Transfer (Transmission) Control Protocol - pruža virtualni krug preko kojeg procesi mogu komunicirati,

pruža logiku za sigurnu, vezi usmjerenu sesiju

UDP - User Datagram Protocol

IP -Internet Protocol - dodaje paketima informaciju o usmjeravanju (20 bytes)

Time-to-live (TTL): broj dozvoljenih pokušaja slanja paketa prije nego što se odbacuje

Source address: IP adresaračunala pošiljatelja paketa

Destination address: IP adreasaralčunala primatelja paketa

Options:opcije kao što su pošiljatelju specifična usmjeravanja ili sigurnost

On pruža generalizirano sučelje paketne mreže, bavi se usmjeravanjem proz Internet , nije usmjereno vezi i

nepouzdano je.

IP adrese

IP adrese duljine su 32 bita

10010011 10000110 00000010 00010100

ˇ pisano kao niz odvojen točkama

Npr.147.134.2.20

Podjela u 5 klasa

klasaA: počinje s 0, tada7-bitnikod 224

= 16,777,216 računala u podmreži

klasaB: počinje s 10, tada14-bitnikod 216

= 65,536 računala u podmreži

klasaC: počinje s 110, tada21-bitni koda 28 = 256 računala u podmreži

klasaD: počinje s 1110 koristi se za multicasting

klasaE: počinje s 11110

rezervirano za budude korištenje

IPv6 proširuje adresu na 128 bitova proširenja podržavaju autentikaciju, integritet podataka, povjerenje

Domain name system (DNS)

rijetko se aplikacije direktno bave s IP adresama

hijerarhijski sustav naziva domena može se koristiti umjesto IP adrese na najvišoj razini domane: hr,

de, at, edu, com, gov, org, net, …

uobičajeno: hostname.subdomain.domain (mogude više poddomena) npr., barok.foi.hr

Poslužitelj naziva domena (DNS) je računalo koje drži tablicu naziva i korespondirajude IP adrese

postoji 13 korijenskih poslužitelja u svijetu (zrcaljeni)

(http://www.root-servers.org/) kada aplikacija odredi naziv računala,

odlazi lolalnom DNS i pokuša pronadi ako ne uspije, tada lokalniDNS zahtjeva adresu od nadređenog

poslužitelja pa do korijenskog poslužitelja, korijenski poslužitelj utrđuje pripadajudi naziv i prosljeduje zahtjev

Proxy (zastupnik)

Gateway (vrsta)

HTML jezik (HyperText MarkUp Language)

Uvod u jezik HTML. Osnovne HTML oznake. Formatiranje dokumenta.

Povijest HTML-a

HTML razvio Tim Berners-Leena CERN-u, a popularnost dobija na pregledniku Mosaic koji je razvijen

na NCSA (National Center for Supercomputer Applications)

HTML+ (1993)

HTML 2.0 u studenom 1995 pod okriljem Internet Engineering Task Force (IETF)

HTML 3.0 (1995)

HTML 3.2 (siječanj 1997) razvija World Wide Web Consortium’s HTML Working Group

HTML 4.0 (prosinac 1997)

HTML 4.01 (prosinac 1999)

XHTML 1.0 (siječanj2000)

XHTML 1.1 (srpanj 2007.) –XHTML Basic 1.1 - Module-based XHTML

XHTML 2 (formirana radna grupa ožujak 2007) –7. listopada 2007. zadnji poziv za XHTML Role

Attribute Module

HTML 5

HTML jezik je jezik oznaka (predstavljaju strukturne, prezentacijske i semantičke informacije) koji podržava

SGML (Standard Generalized Markup Language), a sastoji se od hipertekst-hipermedijaosobina (tekst, slika,

zvuk, film i dr. koji se mogu međusobno povezati čime se dobije mreža informacija).

HTML jezik sastoji se od elemenata koji mogu biti prepoznati unutar HTML grafičkih i znakovnih preglednika i

kao takvi biti prikazani na specifičan način.

Element HTML jezika sastavlja se upisom određenih atributa unutar njegovih prepoznatljivih oznaka:

•početak <element>i

•kraj </element>

Kod nekih elemenata nije potrebna oznaka kraja jer oznake početka drugih elemenata pretpostavljaju kraj

prethodnih.

Korištenje HTML jezika temelji se na prisustvu:

•HTML dokumenata

•HTML preglednika.

HTML dokument je tekstualna datoteka (ASCII i sl. formati) koja sadrži podatke (sadržaj dokumenta) i oznake

HTML jezika

HTML preglednik je program koji poznaje sintaksu HTML jezika i na temelju prepoznatih elemenata iz HTML

dokumenta prikazuje na ekranu njima pripadajude objekte

SGML jezik temelji se na DTD (Document Type Definition) kojim se definira sintaksa konstrukata za oznake.

XHTML je stroži te zahjetva oznaku kraja i poštivanje redoslijeda otvaranja i zatvaranja po principu LIFO. XHTML

razlikuje velika i mala slova. Vrijednosti atributi moraju biti unutar navodnika.

Tip dokumenta: multimedijski/hipermedijski

Tip dokumenta prema formatu: text/html

Vrste sadržaja dokumenta prema vidljivosti:

vidljivi (naslov, tekst i sl)

nevidljivi (meta upute, upute dizajna, dinamički dijelovi –programski kod i sl)

Vrste sadržaja dokumenta prema uključivanju:

uključeni u dokumentu (naslov, tekst i sl)

sadržani u vanjskim datotekama/dokumentima (slike, uputedizajna, dinamički dijelovi –programski kod

i sl)

Vrste sadržaja dokumenta:

tekst

slika

veza

obrasci

Struktura Html-a

HTML dokument određen je svojom oznakom <html>...</html>

Oznaka HTML dokumenta može sadržavati atribute:

jezika lang= {en |en-US | fr | he | es | ja,…}

smjera prikaza teksta dir= LTR | RTL <html lang="en" dir="RTL">…</html>

HTML dokument podijeljen je u 2 sekcije:

Sekcija zaglavlja <head>...</head>

Zaglavlje HTML dokumenta najviše ima ulogu kod pretraživača (search engine) koji mogu dobiti temeljne

informacije o sadržaju dokumenta i dr. Zaglavlje HTML dokumenta može sadržavati elemente:

1) naslov <title>

2) meta podaci <meta> Meta podaci mogi biti za:

name=“” content=“”- opis atributa (autor, ključne riječi, i sl)

http-equiv=“” content=“”– irektive klijentu o sadržaju (obnavljanje, skup znakova)

3) veza <link> Vezom na vanjski dokument ostvaruje se njegovo uključivanje u način prikaza dokumenta.

4) stil <style> Stilskom uputom određuju se način prikaza cijelog dokumenta i/ili određenog dijela

sadržaja dokumenta. Detaljnije se obrađuje kod kaskadnog formatiranja dokumenta.

Sekcija tijela <body>...</body>

Tijelo HTML dokumenta sastoji se odelemenata kojima se opisuje (tekstom, zvukom, slikom) sadržaj

dokumenta.

Tijelo HTML dokumenta može sadržavati atribute:

pozadina background=uri

boja pozadine bgcolor=color

boja teksta text=color

boja veze link=color

boja korištene veze vlink=color

boja izabrane veze alink=color

Između oznaka sekcije tijela mogu se nalaziti drugi elementi kojima se definira i

prikazuje sadržaj dokumenta

Možemo razlikovati 3 stila formatiranja HTML dokumenta kada se radi o bojama:

Stari stil

Stari stil koristi brojčane pokazatelje boja.

<body bgcolor=”#0000ff" text=”#ffffff">...</body>

Black=“#000000“

White=“FFFFFF“

Unaprijeđen stari stil

Unaprijeđen stari stil koristi nazive boja umjesto njihovih brojčanih pokazatelja.

<body bgcolor=“blue” text=“white”>...</body>

Kaskadni stil

CSS

Glavni HTML elementi u sekciji tijela su:

•zaglavlja <h1>, <h2>, <h3>,... , <h6> razlikuju se po veličini fonta

•paragraf <p>

•prekid retka <br>

•liste:

•nesređena <ul>

•sređena <ol>

•element liste <li>

•linija <hr>

•tablica <table>

•redak tablice <tr>

•delija tablice <td>

•veza <a>

•slika <img>

•okvir <frame> <iframe>

•forma <form>

•applet, plug-in <applet, object>

Osnovni oblici formatiranja teksta

•Centriranje Prekid linije

<center>...</center>

•Prekid linije

<br clear="all"|"left"|"right“/>

•Naglašeno - bold

<b>...</b>

<strong>...</strong>

•Vodoravna crta

<hr

align="center"|"left"|"right"

noshade

size="thickness"

width="width"

/>

•Kurziv – italic

width="width"

<i>...</i>

<em>...</em>

Drugi oblici formatiranja

•Font

<font

color="color"

face="fontlist"

point-size="pointsize"

size="number"

weight="boldness"

>

...

</font>

•Odvajanje teksta

<span

class="styleclass"

id="namedplaceorstyle"

style="style"

>

...

</span>

Danas se ne preporučuje korištenje <FONT> oznake nego <SPAN> uz kaskadni stil.

Block oblik formatiranja

<div

class="styleclass"


lang="iso"

style="style"

>

...

</div>

Blok oblikom pokriva se format vedeg broja drugih oznaka koje zajedno formiraju određeni blok/pravokutnik.

Liste

•Sređena lista

<ol

start="value" //od kud početi brojati (value)

type="a"|“A"|"i"|“I"|"1" //kako de brojati

class="styleclass" //do tog du dod

id="namedplaceorstyle" //služi za javascript, css?

lang="iso" //zastarjelo, poslije ASCI, napredno UTF-8

style="style" //pišem css kod

>

...

</ol>

•Nesređena lista

<ul

type="circle"|"disc"|"square"

class="styleclass"


lang="iso"

style="style"

>

...

</ul>

•Element liste

<li

type="disc"|"circle"|"square"|"a"|"a"|"i"|"i"|"1"

value="number"

class="styleclass"


lang="iso"

style="style"

>

...

</li>

<ul>ovo je primjer elemenata

<li>prvi</li>

<li>drugi</li>

<li>treci</li>

</ul>

Veza

<a

name=“elementidentifier"

href="location"

onclick="clickjscode"

onmouseout="outjscode"

onmouseover="overjscode"

target="windowname"

>

...

</a>

Slika

<img

src="location"

lowsrc="location" //putanja do slike loše kvalitete

alt="alterntivetext" //ako se slika ne učita prikazat de se ovaj teks

align="alignment" //pozicija slike unutar teksta (left, right, center)

border="borderwidth"

height="height"

width="width"

hspace="horizmargin" //css

vspace="verticalmargin" //css

ismap //klikabilna pordučja na slici

usemap="#mapname" //id map elementa

name="imagename" ****** davit Vlatka

onabort="imgloadjscode"

onerror="errorjscode"

onload="imgloadjscode"

suppress="suppressornot"

>

Veza može biti temeljena na oblicima:

•Pravokutnik - određen sa koordinatama lx, ty, rx, by

•Krug - određen sa x, y, radius

•Poliedar - određen sa x1, y1, x2, y2,..., xn, yn

Sliku prati mapa s popisom oblika i njihovih veza.

Prikaz znakova

Preglednici uglavnom koriste skup znakova određen standardom ISO 8859-1odnosno Latin-1.

Problem uređivača teksta u pogledu prikaza manje korištenih tj. specijalnih znakova.

<!ENTITY nbsp CDATA " " -- no-break space , U+00A0 --> //

<!ENTITY copy CDATA "©" -- copyright sign, U+00A9 ISOnum --> //©

XMTML

XHTML je stroži te zahjetva oznaku kraja i poštivanje redoslijeda otvaranja i zatvaranja po principu LIFO. XHTML

razlikuje velika i mala slova. Vrijednosti atributi moraju biti unutar novodnika.

Vrste:

•XHTML 1.0 Strict–za čiste strukturne oznake, bez oznaka za izgled. CSS se koristi za font,

boju i izgled.

•XHTML 1.0 Transitional–kompromisno rješenje zbog starijih preglednika koji ne razumiju

CSS te se kod oznaka koriste atributi za boju, tekst i veze.

•XHTML 1.0 Frameset–kada se koriste okviri za podjelu prozora u dva ili više okvira.

Na početku XHTML dokumenta treba biti:

<?xml version="1.0" encoding="UTF-8"?> a zatim vrsta

•<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

•<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

•<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML i XHTML- validacija

Kontrola ispravnosti dokumenta može se ispitati pomodu alata s http://validator.w3.org/

Formatiranje primjenom kaskadnih stilskih listova.

CSS-Cascading Style Sheets

CSS je jednostavan mehanizam stilskih listova koji pruža autorima i čitateljima da prikvače stil (npr. font, boje i

razmake) HTML dokumentima.

Jedna od osnovnih osobina CSS-a je da stilski listovi padaju, preljevaju se:

autori mogu prikvačiti preferirani stilski list, dok čitatelj može imati osobni stilski list kojim si

prilagođava za ljudske ili tehnologijske nedostatke.

pravila za rješavanje konflikata između različitih stilskih listova definirani su u specifikaciji.

Danas postoje 3 specifikacije/razine CSS1, CSS2 i CSS3 (CSS level 1,2 i 3).

CSS1

CSS1 jezik ljudi mogu čitati i pisati te izraziti stil na uobičajeni način terminologije stolnog izdavaštva.

CSS2

http://validator.w3.org/

CSS2 podržava apsolutno pozicioniranje, brojanje, prekid stranice i sl. CSS2 podržava stilske listove posebnih

medija tako da autori mogu povezati prezentaciju svojih dokumenata s vizualnim preglednicima, glasovnim

napravama, pisačima, braille-ovim napravama i dr.

CSS3

CSS3 (u razvoju) dodaje nove selektore, rubove, pozadine, vertikalni tekst, govor, korisničku interakciju i sl.

Blok elementi

Blok element je samosadržavajuda jedinica sadržaja koja počinje na početnoj margini jedne linije i zvršava na

način koji prisiljava sljededi dio sadržaja da se pojavi u novoj liniji koja slijedi blok.

To su:

•oznake zaglavlja <h1>,...,<h6>

•paragraf <p>

•liste <ul>, <ol>

•element liste <li>

•blok <div>

Glavni stilski atributi:

•razmak –margin (transparentno, prozirno)

•granica -border

•podloga - padding

Dvije vrste sadžavanja

DOM Level 0 – hijerarhija objektnog sadržavanja

window

history

location

document

...

DOM Level 1 – elementno sadržavanje

definirano pozicijom oznake u dokumentu gdje vrijedi princip roditelj-dijete

premda pojmovi roditelj i dijete impliciraju objektnu orijentaciju, u DOM-u to NE vrijedi

npr. u tablici postoji <img> u <td> elementu, on NE nasljeđuje roditeljeva <td> id svojstvo

element može naslijediti stilsku uputu koja je pridružena drugom elementu koji je više u hijerarhiji

elementnog sadržavanja

Nasljeđivanje

Lanac nasljeđivanja je bitan jer se stilska uputa koja je pridružena elementu prenosi na sve njegove slijednike u

hijerarhiji.

Treba napomenti da se svi stilski atributi NE nasljeđuju.

Kaskadno obilježje

Elementno sadržavanje igra važnu ulogu za preglednika prilikom utvrđivanja koja preklapajuda stilska uputa

treba biti primijenjena na neki element.

Mogude je pridružiti više stilova za isti element tako da se uključuje više datoteka definicija stilskih uputa i

definiranjem više stilova za isti element ili za njegovog roditelja.

Osnovni koncepti

Primjena CSS temelji se na poznavanju osnova HTML jezika i osnovne terminologije stolnog izdavaštva.

Pravilo CSS upute sadrži:

selektor { osobina: vrijednost }

Mogude su višestruke upute za jedan selektor, a odvajaju se znakom ;

selektor {

osobina1: vrijednost1;

osobina2: vrijednost2

}

Moguda su grupiranja uputa za više selektora:

selektor1 selektor2 selektor3 {

osobina1: vrijednost1;

osobina2: vrijednost2

}

Selektor može biti:

•oznaka (body, h1, p, img, a i sl.),

•oznaka.klasa (h1.glavni, p.citat, img.portret, a.izbornik i sl.)

•oznaka#id (h1#glavni, img#portret, a#izbornik i sl.)

•.klasa (.naslov, .vazno, i sl.)

•#id (#naslov, #vazno, i sl.)

Npr. potrebno je podesiti osobinu boje glavnog zaglavlja

h1 { color: blue }

ili da je odjeljak s klasom citatu kurzivu

p.citat { font-style: italic }

CSS upute mogu se primjeniti na različite razine elemenata:

•elemente unutar linije (inline)

•blok elemente

•unutar linije i blok elemente.

U određenim situacijama vrijedi nasljeđivanje i nadjačavanje osobina.

body { background: #a0a0a0; color: #000000;

font-family: "courier"; }

h1 { color: blue }

p { font-style: italic; background: #a0a000; }

Kaskadni stil formatiranja

Kaskadni stil (CSS - Cascading Style Sheets) temelji se na elementu <STYLE>sadrži atribut:

•tip type="text/css"

nakon kojeg se definiraju stilovi koji de se koristiti u pojedinim elementima.

Stariji preglednici NE podržavaju CSS stil.

<html>

<head>

<title>ovo je primjer</title>

<meta name=“Author" content="foi webmaster">

<meta name=“Copyright" content=”© 2000 foi">

<meta name=“Date" content="2000-11-10 22:03:17">

<style type="text/css">

body { background : blue; color: white }

a:link { color : red }

a:visited { color: green }

a:active { color : yellow }

</style>

</head>

<body>...</body>

</html>

Smještaj CSS uputa

Postoji više načina smještaja CSS uputa:

Jednom u dokumentu

<html>

<head>

<title>css primjer 0.</title>


body { background: maroon; color: red}

h1 { color: blue }

</style>

</head>

<body>

<h1>css formatiranje</h1>

ovdje dolazi tekst!

</body>

</html>

Po potrebi u dokumentu

Svaki puta kada je potrebno određuje se osobina stila korištenjem atributa style:

<html>

<head>


</head>

<body style="background: maroon; color: red">

<h1 style="color: blue">css formatiranje</h1>

ovdje dolazi tekst!

</body>

</html>

U vanjskoj datoteci

U zaglavlju dokumenta koristi se oznaka link kojom se odredi naziv datoteke (URL) koja sadrži CSS upute:

<html>

<head>


<link href="pzaweb.css" rel="stylesheet" type="text/css">

</head>

<body>


ovdje dolazi tekst!

</body>

</html>

U zaglavlju dokumenta koristi se oznaka link kojom se odredi naziv datoteke(URL) koja sadrži CSS upute:

<html>

<head>


<link href="pzaweb.css" rel="stylesheet" type="text/css">

</head>

<body>


ovdje dolazi tekst!

</body>

</html>

U zaglavlju dokumenta koristi se oznaka styleu kojoj se putem @import pravila odredi naziv datoteke (URL)

koja sadrži CSS upute:

<html>

<head>



@import url("pzaweb.css“);

</style>

</head>

<body>


ovdje dolazi tekst!

</body>

</html>

Datoteka CSS uputa

Datoteka PzaWeb.css sadrži potrebne CSS upute:

body

{

background : maroon;

color: red

}

h1

{

color: blue

}

Korištenje CSS uputa

Postoji više načina korištenja CSS uputa:

Implicitno

CSS uputa koristi se bez posebnog navođenja:

<html>

<head>



body { background: yellow; color: blue }

h1 { color: brown }

</style>

</head>

<body>


<p>ovo je paragraf</p>

ovdje dolazi tekst!

</body>

</html>

Eksplicitno

CSS uputa koristi se uz atribut class:

<html>

<head>



body { background: yellow; color: blue }

h2 { color: red }

h2.crno { color: black } Vrijedi samo za klasu crno kod h2 oznake

.bijelo { color: white } Vrijedi samo za klasu crno kod h2 oznake

</style>

</head>

<body>


<h2>implicitno formatiranje</h2>

<h2 class=“crno”>eksplicitno formatiranje</h2>

<p>ovo je paragraf 1.</p>

<p class=“bijelo”>ovo je paragraf 2.</p>

<p class=“crno”>ovo je paragraf 3.</p> Ne postoji klasa crno koja bi se mogla primjeniti na p oznaku

</body>

</html>

Jednoznačno

CSS uputa koristi se uz atribut id koji garantira jedinstvenu vrijednost u cijelom dokumentu:

<html>

<head>



body { background: yellow; color: green }

h1#plavo { color: blue }

#plavo { color: brown }

</style>

</head>

<body>

<h1 id=“plavo”>css formatiranje</h1>

<p id=“plavo”>ovo je paragraf</p>

ovdje dolazi tekst!

</body>

</html>

Pseudo-klasa

CSS uputa koristi pseudo klase kod oznaka koje imaju unaprijed pripremljene poddijelove kojima se mogu

promijeniti osnovne osobine koji se odvajaju simbolom:. Najčešde se koristi oznaka a.

<html>

<head>

<title>css primjer 5.1.</title>


a:link { color: blue }

a:active { color: black }

a:visited { color: pink }

a:hover { color: pink; font-size: 150% }

</style>

</head>

<body>


web adresa <a href='http://www.foi.hr'>foi</a>

</body>

CSSUpute/Primjer05_1.html

</html>

Kaskadna pravila prednosti

Ako se nekom elementu pridruži više više stilskih atributa (id, style, class) te cijeli dio implicitnih uputa, pitanje

je konačnog rezultata.


body { color: yellow; font-size: 40px }

p { color: red }

p1.tekst3 { color: blue }

.tekst4 { color: black }

#tekst5 { color: pink }

</style>

</head><body>


<p>Tekst 1</p><p style=“color: maroon”>Tekst 2</p>

<p class=“tekst3”>Tekst 3</p>

<p class=“tekst4”>Tekst 4</p>

<p id=“tekst5”>Tekst 5</p>

<p class=“tekst4” id=“tekst5” style=“color: maroon”>Tekst

6</p>

Jedinice CSS uputa

Jedinice CSS uputa mogu biti:

Duljina(može biti s – ili +, slijedi broj pa jedinica bez razmaka)

relativne jedinice

em – visina fonta elementa

ex – visina slova x

px – relativno rezoluciji platna

apsolutne jedinice

in, cm, mm

pt – 1pt=1/72in

pc – 1pc=12pt

Postotka (može biti s – i +, slijedi broj pa %bez razmaka)

Boja

opisna

RGB brojčana

#rrggbb

#rgb

rgb(x,x,x) – 0 > x < 255

rgb(y%,y%,y%) – 0.0 > y < 100.0

URL

url(http://www.foi.hr)

url("http://www.foi.hr")

url('http://www.foi.hr')

Područja primjene CSS uputa

CSS uputa koristi se kod sljedećih osobina:

•font

•boja i pozadina

•tekst

•kutija

•klasifikacija

CSS upute za font

CSS uputa za font može odrediti:

•obitelj fonta

{ font-family: "Courier" }

•stil fonta

{ font-style: italic }

•varijantu fonta

{ font-variant: small-caps }

•težinu fonta

{ font-weight: bold }

•veličinu fonta

{ font-size: large }

{ font-size: 90% }

{ font-size: larger }

{ font-size: 12px }

•skup osobina fonta

{ font: "Courier" italic bold 12px }

CSS upute za font / 1.

<html>

<head>




.stil1 { color: blue; font-family: "courier";

font-weight: bold; font-size: large }

</style>

</head>

<body>


<p class=“stil1”>ovo je paragraf</p>

ovdje dolazi tekst!

</body>

</html>

CSS upute za boju i pozadinu

CSS uputa za boju i pozadinu može odrediti:

•boju

{ color: blue }

{ color: #0000f0 }

{ color: #0c0 }

•boju pozadine

{ background-color: white }

•sliku pozadine

{ background-image: url(http://www.foi.hr/foi.gif) }

•ponavljanje pozadine

{ background-repeat: repeat-x }

•prikvačenje pozadine

{ background-attachment: fixed }

•pozicija pozadine

{ background-position: bottom left }

•skup osobina pozadine

{ background: white url(pozadina.jpg)

fixed bottom left }

CSS upute za boju i pozadinu / 1.

<html>

<head>



body { background: yellow; color: green;

background-image: url(pozadina.jpg);

background-repeat: repeat-x }

</style>

</head>

<body>



ovdje dolazi tekst!

</body>

</html>

CSS upute za tekst

CSS uputa za tekst može odrediti:

•razmak između riječi

{ word-spacing: 0.4em }

•razmak između slova

{ letter-spacing: -0.2em }

•dekoraciju

{ text-decoration: blink }

•vertikalno poravnanje

{ vertical-align: middle }

•poravnanje

{ text-align: center }

•transformaciju

{ text-transform: uppercase }

•uvlačenje

{ text-indent: 10em }

•visinu linije

{ line-height: 200% }

CSS upute za tekst / 1.

<html>

<head>




.stil1 { text-align: center;

text-transform: uppercase }

</style>

</head>

<body>


<p class=“stil1”>ovo je paragraf</p>

ovdje dolazi tekst!

</body>

</html>

CSS upute na razini linije

CSS upute vrlo često trebaju biti primjenjene u složenim oblicima formatiranja kod kojih se unutar jedne linije

teksta trebaju mijenjati osobine dijelova teksta.

Tu se primjenjuje oznaka <span>:

<html>

<head>




.primjer { text-align: center;


.code { color: black; font-weight: bold;

font-size: larger }

.komentar { color: green }

.vazno { color: red }

</style>

</head>

<BODY>

CSS upute na razini linije / 1.



<span class=“primjer”>primjer 9.</span>

<pre class=“code”> //??pitati Vlatka

int main(int argc, char* argv)

{

<span class=“vazno”>int broj;</span>

...

return broj; <span class=“komentar”>// vraca broj

komada</span>

}

</pre>

</body>

</html>

CSS pogled na kutiju

CSS omogudava pogled na svaki element kao na kutiju kojoj se mogu dodjeliti određene osobine:

CSS uputa za kutiju

CSS uputa za kutiju može odrediti margine (odmak od ostalih elemenata):

•gornju marginu

{ margin-top: 2em }

•desnu marginu

{ margin-right: 5% }

•donju marginu

{ margin-bottom: auto }

•lijevu marginu

{ margin-left: 2em }

•skup margina

{ margin: 2em }

{ margin: 2em 4em }

{ margin: 2em 4em 1em 3em }

CSS uputa za kutijumože odrediti praznine (prostor između margina i sadržaja):

•gornju, desnu, donju, lijevu prazninu, skup praznina

{ padding-top: 2em }

{ padding-right: 4em }

{ padding-bottom: 4em }

{ padding-left: 6em }

{ padding: 2em 3em 4em 6 em }

CSS uputa za kutijumože odrediti granice (crte oko elementa):

•debljina gornje, donje, desne, lijeve granice, skup debljina granica

{ border-top-width: thin }

{ border-bottom-width: medium }

{ border-right-width: thick }

{ border-left-width: 6em }

{ border-width: 2em 3em 4em 6 em }

•boju granice

{ border-color: red }

•stil granice

{ border-style: outset }

•skup granica:

{ border: thin red dotted }

CSS uputa za kutiju može način prikaza elementa:

•širina

{ width: 40% }

•visina

{ height: 40px }

•mogu se spojiti

{ width: auto; height: 40px }

•tijek – omogudava omatanje teksta oko elementa

{ float: left }

•brisanje –način prikaza prijelaznih elemenata uz strane elementa

{ clear: both }

•prikaz

{ display: block }

•"bijelu prazninu"

{ white-space: nowrap }

CSS uputa za pozicioniranje može odrediti različite osobine smještaja:

•koordinate

{ top: 0px }

{ right: 4em }

{ bottom: auto }

{ left: 10% }

•pozicije

{ position: absolute }

•pomak

{ float: right }

•broj sloja

{ z-index: 2 }

•preljevanje

{ overflow: scroll }

•rezanje

{ clip: rect(t, r, b, l) }

•vidljivost

{ visibility: hidden }

Npr.

<html>

<head>

<meta http-equiv="content-type" content="text/html;

charset=windows-1250">




.naslov { text-align: center;


.paragraf { background: white; text-indent: 5em;

margin: 0em 1em; padding: 1em 0.5em;

border: thick red outset }

</style>

</head>

<body>

<h1 align=“center”>css formatiranje</h1>

<p class=“naslov”>studentski zbor</p>

<p class=“paragraf”>

Na studentskim izborima, koji se održavaju svake druge...

CSS upute za korisničko sučelje

CSS uputa za korisničko sučeljemože odrediti:

•kursor

{ cursor: crosshair }

Npr.

<html>

<head>




.naslov { text-align: center;

text-transform: uppercase;

cursor: wait }

</style>

</head>

<body>


<p class=“naslov”>ovo je paragraf</p>

ovdje dolazi tekst!

</body>

</html>

CSS upute za klasifikaciju

CSS uputa za klasifikaciju može odrediti:

•tip stila liste

{ list-style-type: square }

•slika stila liste

{ list-style-image: url(tocka.gif) }

•pozicija stila liste

{ list-style-position: inside }

•skup stila liste

{ list-style: square inside }

Npr.

<html>

<head>




ul { list-style-position: inside }

li.square { list-style-type: square }

</style>

</head>

<body>



<ul>dani u tjednu su:

<li class=“square”>nedjelja

<li>ponedjeljak

<li>utorak

<li>srijeda

...

CSS upute na razini bloka

CSS upute vrlo često trebaju biti primjenjene u složenim oblicima formatiranja kod kojih se trebaju postaviti

zajedničke osobine na vedi dio teksta. Tu se primjenjuje oznaka div:

...

<div class=“blok1”>


<p class=“paragraf1”>

Na studentskim izborima,...</p>

</div>

<div class=“blok2”>


<p class=“paragraf2”>

Na studentskim izborima, ...</p>

</div>

CSS –validacija

Kontrola ispravnosti dokumenta može se ispitati pomodu alata s http://jigsaw.w3.org/css-validator/

Tablice. Okviri.

Tablica

Prikazivanje grupnih podataka kao i strukturiranje dokumenata vrlo često podliježu modelu tablice. Oznake

tablice <table>... </table>

summary %Text; -- purpose/structure for speech output //alt =summary ako se tablica ne može prikazati,

primitivan uređaj

width %Length; -- table width

border %Pixels; -- controls frame width around table

frame %Tframe; -- which parts of frame to render

rules %TRules; -- rulings between rows and cols

cellspacing %Length; -- spacing between cells

cellpadding %Length; -- spacing within cells

Elementi tablice

Elementi tablice možemo podijeliti u dvije grupe:

•glavni elementi– potrebni za definiranje naslova, redaka i delija

•pomodni elementi– pružaju dodatne mogudnosti kod definiranja tablice. Uglavnom se manje koriste.

Glavni elementi tablice su:

•Naslov <caption>...</caption> //naslove preko cijele tablice

•Redak <tr>...</tr>

•Delija <td>...</td> //th naslov kolone

Obična tablica

<table>

<caption>Stanje robe na skladištu</caption>

<tr>

<td>Sifra</td>

<td>Naziv</td>

<td>Kolicina</td>

<td>Cijena</td></tr>

<tr>

<td>747851025010</td>

<td>Internet Info</td>

<td>1</td>

<td>100</td></tr>

<tr>

http://jigsaw.w3.org/css-validator/

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

Formatiranje rubova i razmaka ćelija

<table border=“1” cellpadding=“5” cellspacing=“1”>


<tr>

<td>Sifra</td>

<td>Naziv</td>

<td>Kolicina</td>


<tr>

<td>747851025010</td>


<td>1</td>

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

Formatiranje širine tablice

<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”> //width=“780“


<tr>

<td>Sifra</td>

<td>Naziv</td>

<td>Kolicina</td>


<tr>

<td>747851025010</td>


<td>1</td>

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

Formatiranje širine ćelija

<table border=“1” cellpadding=“5” cellspacing=“1” width=“75%”>


<tr>

<td width=“25%”>Sifra</td>

<td width=“40%”>Naziv</td>

<td width=“15%”>Kolicina</td>

<td width=“20%”>Cijena</td></tr> //width=“80“

<tr>

<td>747851025010</td>


<td>1</td>

width=“80”

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

Formatiranje boja ćelija

<table border=“1” cellpadding=“5” cellspacing=“1” width="75%">

<caption><b>Stanje robe na skladištu</b></caption>

<tr bgcolor=“chocolate”>

<td width="25%">Sifra</td>

<td width="40%">Naziv</td>

<td width="15%">Kolicina</td>

<td width="20%">Cijena</td></tr>

<tr bgcolor=“sandybrown”>

<td>747851025010</td>


<td>1</td>

<td>100</td></tr>


<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td></tr>

</table>

Spajanje ćelija


<tr bgcolor=“chocolate” align=“middle”>

<td width="25%">Sifra</td>

<td width="40%">Naziv</td>

<td width="10%">Kolicina</td>

<td width="12%">Cijena</td>

<td width="13%">Iznos</td></tr>


<td align=“middle”>747851025010</td>


<td align=“right”>1</td>


<td align=“right”>100</td></tr>


<td align=“middle”>401997601419</td>

<td>Iomega ZIP</td>




<tr bgcolor=“brown”>

<td colspan=“4” align=“middle”>u k u p n o</td> //rowspan=“2” probat?? Ni isto


</table>

Pomoćni elementi tablice

Pomodni elementi elementi tablice su:

•Grupa stupaca <colgroup>...</colgroup>

•Stupac <col>...</col>

•Zaglavlje tablice <thead>...</thead>

•Tijelo tablice <tbody>...</tbody>

•Delija zaglavlja tablice <th>...</th> //baš i nije

Pr.

<table border=“1” cellpadding=“5” cellspacing=“1” width="75%">


<colgroup>

<col align="center">

<colgroup>

<col align="left">

<colgroup>

<col span="3" align="right">

<thead valign="middle" bgcolor=“chocolate” align=“center”>

<tr>

<th width="25%">Sifra</td>

<th width="40%">Naziv</td>

<th width="10%">Kolicina</td>

<th width="12%">Cijena</td>

<th width="13%">Iznos</td></tr>

Pr. 2

<tbody bgcolor=“sandybrown”>

<tr>

<td>747851025010</td>


<td>1</td>

<td>100</td>

<td>100</td></tr>

<tr>

<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td>

<td>380</td></tr>

<tr bgcolor=“brown”>

<td colspan=“4” align=“middle”>u k u p n o</td>

<td>480</td></tr></tbody>

</table>

Formatiranje tablice primjenom CSS

<html><head>

<link href=“PzaWeb.css" rel="stylesheet" type="text/css">

<body>

<table class=“tablica1” border=“1” cellpadding=“5” cellspacing=“1” width="75%">

<caption class=“tablica1”><b>Stanje robe na skladištu</b></caption>

<colgroup>

<col align="center">

<colgroup>

<col align="left">

<colgroup>

<col span="3" align="right">

<thead class=“tablica1”>

<tr>

<th width="25%">Sifra</td>

<th width="40%">Naziv</td>

<th width="10%">Kolicina</td>

<th width="12%">Cijena</td>

<th width="13%">Iznos</td></tr>

<tbody class=“tablica1”>

<tr class=“tablica1_redak1”>

<td>747851025010</td>


<td>1</td>

<td>100</td>

<td>100</td></tr>


<td>401997601419</td>

<td>Iomega ZIP</td>

<td>4</td>

<td>95</td>

<td>380</td></tr>

<tr class=“tablica1_podnozje”>

<td colspan=“4” align=“middle”>u k u p n o</td>

<td>480</td></tr></tbody>

</table>

</body>

</html>

Tablica u tablici

<tbody class=“tablica1”>


<td>knuth, d.e.</td>

<td>

<table border="1" width="100%"> //Tablica kao sadržaj delije

<tr>

<td width="50%">the art of computer programming</td>

<td width="50%">

<p align="center">book</td>

</tr>

<tr>

<td width="50%">tex</td>

<td width="50%">

<p align="center">computer language</td>

</tr>

<tr>

<td width="50%">concrete mathematics</td>

<td width="50%">

<p align="center">book</td>

</tr>

</table>

</td>

</tr>

Okvir

Okvir je neovisan prozor odnosno podprozor. Podaci mogu biti prikazani u više okvira tako da se može jedan

okvir puniti podacima iz drugog okvira i sl.

Mogude je:

•grupirati okvire u skupove,

•uključiti okvir u drugi okvir.

Okvir 1 Skup okvira

<frameset

cols="columnwidthlist"

rows="rowheightlist"

border="pixwidth"

bordercolor="color"

frameborder="yes"|"no"

onblur="jscode"

onfocus="jscode"

onload="jscode"

onunload="jscode"

>

...

</frameset>

Okvir 2

<frame

bordercolor="color"


marginheight="marginheight"

marginwidth="marginwidth"

name="framename"

noresize

scrolling="yes"|"no"|"auto"

src="url"

>

Okvir 3

<frameset rows="80,*" frameborder="0" border="0" framespacing="0">

<frame src="gore.html" name="gore"> //gornje crveno

<frameset cols="*,30%" frameborder="0" border="0" framespacing="0">

<frame src="dolje_lijevo.html" name="dolje_lijevo"> //lijepo plavo

<frame name="dolje_desno"> //desno crveno

<noframes>

<body>

<P>Ovaj preglednik ne podrzava okvire!

</body>

</noframes>

</frameset>

<p><img src="slika.jpg" usemap="#mapa1"></p>

<map name="mapa1">

<area href="pravokutnik.html" alt="pravokutnik" target="dolje_desno"

shape="rect" coords="123,66,270,133">

<area href="krug.html" alt="krug" target="dolje_desno" shape=“circle”

coords="392,200,60">

<area href="poliedar.html"alt="poliedar" target="dolje_desno" shape="poly"

coords="125,265,152,193,240,190,267,264,197,310">

Interni okvir

Interni okvir je pravokutni prostor unutar normalnog toka sadržaja dokumenta. U taj prostor može se puniti

bilo koji HTML dokument ili dinamičkim putem upisivati sadržaj.

U svojem ponašanju ima sličnosti s <frame> elementom samo bez potrebe za <frameset>.

Pr.

Interni okvir

<iframe

name=“elementidentifier"

src="location"

align="alignment"

height="height"

width="width"

scrolling=“featureswitch"


>

</iframe>

<iframe src="dolje_lijevo.html" frameborder=“no" width="800" height="500">

</iframe>

Formulari/forme

Formulari

Web se sve više koristi za prikupljanje podataka o korisnicima, a posebno kod elektroničkog trgovanja jer su

potrebni podaci kupaca.

HTML jezik ima mogudnost upisa podataka i njihovog slanja poslužitelju putem elementa formular:

action %URI; #REQUIRED -- server-side form handler

method (GET|POST) -- HTTP method used to submit the form--

enctype %ContentType; -- "application/x-www-form-urlencoded" //difoltna vrijednost

accept %ContentTypes -- list of MIME types for file upload -- //upload slike

name CDATA -- name of form for scripting -- //bilo što upisat

onsubmit %Script; #IMPLIED -- the form was submitted -- //poziva javascript nakon submit

onreset %Script; #IMPLIED -- the form was reset -- // poziva javascript nakon resett

accept-charset %Charsets; #IMPLIED -- list of supported charsets -- //http request header

<FORM

ACTION="serverURL"

ENCTYPE="encodingType"

METHOD="GET"|"POST"

NAME="formName"

ONRESET="JScode"

ONSUBMIT="JScode"

TARGET="windowName"

>

...

</FORM>

Elementi formulara

Formular je sekcija dokumenta koja sadrži:

•normalan sadržaj

•oznake

•posebne elemente zvane kontrole

•labele za kontrole.

Kontrole u formulara mogu imati nekoliko različitih oblika:

•standardni

•posebni.

Standardni oblik kontrole u formulara

Standardni tipovi formulara najčešde se koriste i imaju iste atribute.

<!ENTITY % InputType

"(TEXT | PASSWORD | CHECKBOX |

RADIO | SUBMIT | RESET |

FILE | HIDDEN | IMAGE | BUTTON)"

>

TEXT - kontrola za unos teksta u jednoj liniji

PASSWORD - kao TEXT ali se unos podataka ne prikazuje na ekranu

CHECKBOX - kontrola za izbor po binarnom kriteriju (Y/N)

RADIO - kontrola za izbor jednog između više

SUBMIT - kontrola za gumb kojim se šalju podaci formulara

RESET - kontrola za gumb kojim se inicijaliziraju podaci formulara

FILE - kontrola koja omogudava korisniku izbor datoteke čiji sadržaj se prenosi sa formularom

(upload)

HIDDEN - kontrola za sakrivanje odnosno pohranjivanje podataka između izmjena klijent/poslužitelj

IMAGE - kontrola za gumb sa slikom koji služi za prijenos koordinata

BUTTON - kontrola za gumb kojem se pridružuje određena akcija



<!ELEMENT INPUT - O EMPTY -- form control -->

<!ATTLIST INPUT

%attrs; -- %coreattrs, %i18n, %events --

type %InputType; TEXT -- what kind of widget is needed --

name CDATA #IMPLIED -- submit as part of form --

value CDATA #IMPLIED -- Specify for radio buttons and checkboxes

checked (checked) #IMPLIED -- for radio buttons and check boxes --

disabled (disabled) #IMPLIED -- unavailable in this context --

readonly (readonly) #IMPLIED -- for text and passwd --

size CDATA #IMPLIED -- specific to each type of field --

maxlength NUMBER #IMPLIED -- max chars for text fields --

src %URI; #IMPLIED -- for fields with images --

alt CDATA #IMPLIED -- short description --

usemap %URI; #IMPLIED -- use client-side image map --

ismap (ismap) #IMPLIED -- use server-side image map --

tabindex NUMBER #IMPLIED -- position in tabbing order --

accesskey %Character; #IMPLIED -- accessibility key character --

onfocus %Script; #IMPLIED -- the element got the focus --

onblur %Script; #IMPLIED -- the element lost the focus –

onselect %Script; #IMPLIED -- some text was selected --

onchange %Script; #IMPLIED -- the element value was changed --

accept %ContentTypes; #IMPLIED -- list of MIME types for file upload –

>

Gumbi (button)

Gumbi su posebno važne kontrole jer se preko njih pokredu akcije. Gumbi submit i reset mogu biti definirani

putem elementa INPUT ili BUTTON. Posljednji pruža vede mogudnosti prikazivanja.

<!ELEMENT BUTTON - -

(%flow;)* -(A|%formctrl;|FORM|FIELDSET)

-- push button -->

<!ATTLIST BUTTON


name CDATA #IMPLIED

value CDATA #IMPLIED -- sent to server when submitted

type button|submit|reset) submit -- for use as form button --





onblur %Script; #IMPLIED -- the element lost the focus --

>

Tekst

<INPUT TYPE="TEXT"

MAXLENGTH="maxChars"

NAME="name"

ONBLUR="Scode"

ONCHANGE="JScode"

ONFOCUS="Scode"

ONSELECT="JScode“

SIZE="charLength"

VALUE="text"

>

Gumb

<INPUT TYPE="BUTTON"

NAME="buttonName"

VALUE="buttonText"

ONCLICK="JScode" //pitat Vlatka

>

Šalji

<INPUT TYPE="SUBMIT"

NAME="name"

VALUE="label"

>

Obriši

<INPUT TYPE="RESET"

NAME="name"

ONCLICK="JScode"

VALUE="label"

>

Lozinka i sakriveno

Lozinka

<INPUT TYPE="PASSWORD"

MAXLENGTH="maxChar"

NAME="name"

ONSELECT="JScode"

SIZE="charLength"

VALUE="textValue"

>

Sakriveno

<INPUT TYPE="HIDDEN"

NAME="name"

VALUE="value"

>

Izbornici

Križid - da/ne

<INPUT TYPE="CHECKBOX"

CHECKED

NAME="name"

ONCLICK="JScode"

VALUE="checkboxValue"

>

Kružid – izbor između više izbora

<INPUT TYPE="RADIO"

CHECKED

NAME="name"

ONCLICK="JScode"

VALUE="buttonValue"

>

Ostali elementi

Slika

<INPUT TYPE="IMAGE"

ALIGN="LEFT"|"RIGHT"|"TOP"|"ABSMIDDLE"|"ABSBOTTOM"|

"TEXTTOP"|"MIDDLE"|"BASELINE"|"BOTTOM"

NAME="name"

SRC="location"

>

Datoteka

<INPUT TYPE="FILE"

NAME="name"

VALUE="filename"

>

Posebni elementi formulara

Posebni tipovi formulara rijeđe se koriste i nemaju iste atribute.

SELECT - kontrola za izbornik s mogudnošdu jednog ili više izbora

TEXTAREA - kontrola za unos teksta u više redaka

LABEL - dodaje informaciju jednoj kontroli

Izbornik u formularu

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector -->

<!ATTLIST SELECT


name CDATA #IMPLIED -- field name --

size NUMBER #IMPLIED -- rows visible --

multiple (multiple) #IMPLIED -- default is single selection --






>

Padajući izbor i opcije izbora

Izbor

<SELECT

NAME="selectName"

MULTIPLE

ONBLUR="JScode"

ONCHANGE="JScode"

ONCLICK="JScode"

ONFOCUS="fScode"

SIZE="listLength"

>

<OPTION...>

...

<OPTION ...>

</SELECT>

Opcija izbora

<OPTION

VALUE="optionValue"

SELECTED

>

...

</OPTION>

Unos teksta u više redaka u formularu

<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field -->

<!ATTLIST TEXTAREA


name CDATA #IMPLIED

rows NUMBER #REQUIRED

cols NUMBER #REQUIRED


readonly (readonly) #IMPLIED

tabindex NUMBER #IMPLIED -- position in tabbing order –




onselect %Script; #IMPLIED -- some text was selected --


>

Tekst u više redaka

Tekst u više redaka

<TEXTAREA

COLS="columns"

NAME="name"

ONBLUR="Scode"

ONCHANGE="JScode"

ONFOCUS="JScode"

ONSELECT="JScode"

ROWS="rows"

WRAP="OFF"|"HARD"|"SOFT"

>

tekst koji se prikazuje

</TEXTAREA>

Labela u formularu

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->

<!ATTLIST LABEL


for IDREF #IMPLIED -- matches field ID value --




>

Primjer formulara

<FORM method=post name="form1" action="primjer13ok.html">

<P>

<LABEL for="ime">Ime i prezime: </LABEL>

<INPUT name="ime"></BR>

<LABEL for="email">Email adresa: </LABEL>

<INPUT name="email"></BR>

<LABEL for="pristup">Kako ste došli do ove stranice? </LABEL>

<select name="pristup">

<option value=0 selected>Odaberite jedno...

<option value=1>Upisom URL

<option value=2>Adresom iz bookmark

<option value=3>Pretraživacem

<option value=4>Vezom sa druge stranice

<option value=5>Ostalo</option>

</select></BR>

<LABEL for="rating">Rating sadržaja? Slabo </LABEL>

<input type="radio" name="rating" value=1> 1


<input type="radio" name="rating" value=3 CHECKED> 3


<input type="radio" name="rating" value=5> 5 Izvrsno </BR>

<INPUT name=submit1 type=submit value=Šalji>

<INPUT name=reset1 type=reset value=Obriši>

</FORM>

Punjenje datoteke –upload

<form enctype="multipart/form-data" action=“primjer14ok.html"

method="post">

<input type="hidden" name="MAX_FILE_SIZE" value="30000" />

Preuzmi datoteku: <input name="userfile" type="file" /><br>

<input type="submit" value="Pošalji" />

</form>

Dizajn

Proces dizajna

Dizajn sučelja

Korisnici Web dokumenata ne promatraju informaciju, oni međudjeluju s njima na potpuno novi način koji

nema prethodnike u dizajnu papirnatih dokumenata

.

Dizajn Web stranice prema konvencionalnom dizajnu dokumenta.

Koncept strukturiranja informacija najvedim dijelom danas proizlazi iz tiskanih knjiga, periodika i bibliotečnih

indeksa i kataloških sustava koji su razvijeni oko tiskanih dokumenata. Svaka osobina knjige, od sadržaja do

indeksa razvijala se kroz stoljeda tako da su čitatelji raznih knjiga imali neke od sličnih organizacijskih problema

koje danas imaju korisnici hipermedijskih dokumenata. Web dokumenti prolaze fazu evolocije i standardizacije.

Web stranice razlikuju se od knjiga po tome što svakoj stranici može pristupati bez predgovora. Zbog toga Web

stranica treba biti samostalnijaod knjige pa de zaglavlja i podnožja biti informativnija od tiskanih stranica.

Najbolja strategija dizajna odnosi se na konzistentnu primjenu nekoliko temeljnih principa dizajna dokumenta u

svakoj Web stranici koja se kreira.

Ti osnovni elementi dokumenta nisu složeni i nemaju gotovo ništa s Internet tehnologijom:

• Tko

• Što

• Kada

• Gdje.

Svaka Web stranica treba:

• Informativni naslov

• Identitet kreatora (autor ili institucija)

• Najmanje jednu vezu na polaznu stranicu ili stranicu izbornika

• URL polazne stranice na glavnim stranicima izbornika Web mjesta.

Grafičko korisničko sučelje dizajnirano je da se ljudima pruža kontrolu nad njihovim osobnim računalima.

Jasna navigacijska potpora

Izbjegavati stranice u kojima nema veza (mrtva ulica) ///??

BITNO

Direktni pristup - korisnik želi dobiti informaciju u što je manje mogude koraka

Širina pojasa i interakcija - korisnik ne e tolerirati dugo čekanje

Jednostavnost i konzistentnost

Integritet i stabilnost dizajna

Povratna veza i dijalog

Pristupačnost - Neovisno o fizi koj i tehnološkoj spremnosti, alternativna verzija (bez slika, okvira i sl),

korištenje CSS-a, smjernice pristupa nosti, dostojanstvena degradacija)

Navigacija - Povratak i prijelaz na prethodnu i sljede u stranicu, Brži prijelaz na ciljnu stranicu kod

velikog skupa stranica

Dizajn Web mjesta

Dizajn Web mjesta određuje organizacijski kostur.

U ovoj fazi donose se taktičke dizajnerske odluke:

što publika želi, može očekivati,

što se želi red i, prikazati i

kako de se aranžirati sadržaj da najbolje odgovara potrebama publike

Organiziranje informacija:

1. Podjela sadržaja u logičke jedinice

2. Uspostavljanje hijerarhije važnosti između jedinica

3. Korištenje hijerarhije za strukturiranje relacija između jedinica

4. Izgradnja Web mjesta koje tijesno slijedi informacijsku strukturu

5. Analiza funkcionalnog i estetskog uspjeha sustava.

Struktura Web mjesta:

Osnovne informacijske strukture

Slijedovi

Hijerarhije

Paučina

Teme dizajna Web mjesta:

Elementi Web mjesta:

Početna stranica: Izbornička

Usmjerene vijestima

Putanji usmjereno

Grafika ili tekst?

Izbornici ili Web mjesta niže razine

Liste resursa i stranice srodnih Web mjesta

Vodid za Web mjesto (sadržaj, indeks, mapa)

Što je novo?

Pretraživanje

Informacije za kontakt i povratnu vezu od korisnika

FAQ ( PP)

Prilagođene stranice pogrešaka

Dizajn stranice

Traže se jasnoda, uređenost i pouzdanost u informacijskim izvorima bez obzira radi li se o tradicionalnim

papirnatim dokumentima ili Web stranicama. Efektivni dizajn stranice može pribaviti to povjerenje. Prostorna

organizacija grafike i teksta na Web stranici može zaokupiti čitatelje grafičkim utjecajem, usmjeriti njihovu

pažnju, prioritizirati informacije koje vide te učiniti njihovu interakciju s Web stranicom ugodnijom i

efikasnijom.

Grafički dizajn kreira vizualnu logiku i traži optimalni balans između vizualna dojma i grafičke informacije. Bez

vizualnog utjecaja oblika, boje i kontrasta, stranice su grafički neinteresantne i nede motivirati gledatelja.

Gusti tekstualni dokumenti bez kontrasta i vizualne pomodi također se teže čitaju, posebno na ekranima

relativno male rezolucije.

Ali bez dubine i složenosti teksta, stranice s mnogo grafike također mogu razočarati korisnika zbog lošeg

balansa vizualnog dojma, informacija u tekstu i interaktivnih hipermedijskih veza.

U traženju tog idealnog balansa, primarni pritisak na dizajn predstavljaju ograničenja HTML-a i granice

propusnosti korisničkog pristupa, koji može biti u rasponu od sporih modema do vrlo brzih veza kao što su

Ethernet ili DSL.

Vizualna i funkcionalna kontinuiranost u organizaciji Web stranice, grafičkom dizajnu i tipografiji bitni su za

uvjeravanje publike da im Web mjesto nudi pravovremene, točne i korisne informacije. Pažljiv, sistematički

pristup dizajnu Web stranice može pojednostaviti navigaciju, smanjiti pogreške korisnika i čitateljima učiniti

jednostavnije dobijanje prednosti od informacija i osobina Web mjesta.

Vizualna hijerarhija

Kontrast

Konzisentnost

Dimenzije stranice

Prostor stranice

Duljina stranice:

Za određivanje pravilne duljine svake Web stranice treba balansirati 4 faktora:

1. Odnos između stranice i veličine ekrana

2. Sadržaj dokumenta

3. Očekuje li čitatelj da online pregledava sadržaj ili ispisuje na pisaču ili preuzima dokument za kasnije čitanje

4. Brzina veza kod publike.

Pitanje kretanja po Web stranici:

• scroll – kretanje po sadržaju s pogledom u veličini ekrana

• indeks elemenata

• skok na početak, kraj

Rešetka dizajna stranice

Zaglavlja i podnožja:

Zaglavlja Web stranica daju identitet Web mjesta.

Podnožja Web stranica daju informaciju o porijeklu i starosti stranice.

Izgled:

Fleksibilnost dizajna

CSS vrlo koristan na in postavljanja osobina elemenata Web stranice

Tablč ni oblik je najčešdi i način postavljanja izgleda stranice

Duljina linije

Margine

Stupci i njihovi razmaci

Obrub

Odabir između fiksnog i fleksibilnog

Razmak i poravnanje

Bojanje pozadine

Rad sa slikama

Okviri

Problem prijenosa na razne platforme

Tipografija

Tipografija je balans i međuigra oblika slova na stranici, verbalna i vizualna jednadžba koja pomaže čitatelju da

razumije oblik i upije bit sadržaja stranice.

Tipografija igra dualnu ulogu, kao verbalna i vizualna komunikacija.

Važna je uloga CSS-a.

Čitljivost

Izbor vrste fonta, veličine fonta, velika/mala slova, naglašavanje (bold, italic, potcrtano, boja)

Problemi prijenosa na drugu platformu

Relativna veličina fonta

Vrsta fonta

Grafika slova

antialiased

Urednički stil

Naslovi i podnaslovi.

Formatitanje Web dokumenta.

Veze.

Postavljanje veza.

Grafika

Osobine Web grafike:

Ekran u boji

Broj piksela i dubina boje

Rezolucija

Gamma (stupanj kontrasta između srednjih sivih vrijednosti na slici.)

Grafika i brzina prijenosa

Formati grafičkih datoteka

GIF (običan, transparentni i animirani)

JPEG

PNG

Mapa slike

Multimedija

Primjene Web multimedije:

Samo audio

Slide show

Video

Animacija

WEB autorski alati: alati za sastavljanje sadržaja Web dokumenata i izradu Web mjesta.

Pojam "authoring tool – autorski alat" odnosi se na široku paletu softvera koji se koristi za kreiranje Web

sadržaja, uključujudi:

alati za uređenje (editing tools) posebno dizajnirani da proizvode Web sadržaj (npr. WYSIWYG HTML i

XML uređivači);

alati koji nude opciju pohranjivanja meterijala u Web format (npr.procesori teksta ili paketi za stolno

izdavaštvo);

alati koji transformiraju dokumente u Web formate (npr. filteri za transformiranje formata stolnog

izdavaštva u HTML);

alati koji proizvode multimedijske elemente, posebno kada su namijenjeni za korištenje na Web-u

(npr. video proizvodnja i uređivački kompleti, SMIL -Synchronized Multimedia Integration Language

autorski paketi);

alati za upravljanje web mjestom ili izdavaštvom web mjesta, uključujudi alate koji automatsko

generiraju dinamičke sadržaje iz baze podataka, alate za neposrednu konverziju i alate za izdavaštvo

Web mjesta;

alati za upravljanje izgledom (npr. alati za formatiranje CSS).

Smjerice za razvoj WAT

W3C smjernice:

1. podržavati pristupačne autorske prakse.

2. generirati standardno označavanje.

3. podržavati kreiranje pristupačnog sadržaja.

4. pružati puteve provjere i ispravljanja nepristupačnog sadržaja.

5. integrirati pristupačna rješenja u opdi "look and feel".

6. promovirati pristupačnost u pomodi i dokumentaciji.

7. osigurati da je autorski alat pristupačan autorima s tjelesnim oštedenjima.

Kriteriji za ocjenu - 1. Dio

PC MAGAZINE

•cijena

•kompatibilnost s Windows 3.x/95

•kompatibilnost s Windows NT 3.5/NT 4.0

• čarobnjaci stranice/web mjesta

•primjeri/predlošci

•WYSIWYG/HTML ure ivanje koda

•validacijaHTML koda

•dopuštanje korisni ko definiranih oznaka i predložaka

•dopuštanje korisni ko definiranog ponovno korištenog koda

•klik desnog miša/provjera pisanja

•kreiranjeDHTML

•kreira/ure uje CSS1 upute stila

•urđiva tablica/formi/okvira

•uređivač JavaScript

•proširenja Internet Explorer/Navigator

•korisnik može izabrati preglednik

•korisnik može izabrati sposobnosti prijelaza preglednika

•podržava Java aplete/ActiveX kontrole

•podržava CGI/botove ili agente/cookies

•podržava zaštičena/sakrivena polja

•uređivač slika/alat za upravljanje

•uključuje.BMP/.PCX datoteke

•automatski konvertira slike u GIF/JPEG

•alati za preslikavanje slika klijentske/poslužiteljskim strane

•uključuje primjere slika i pozadina

•predlošci web mjesta s temom

•automatska verifikacija veza/navigiranje uživo za vezama

•može publicirati/upload samo promjena

•preslikavanje web mjesta

•integrirani FTP klijent

PC magazin usporedba, Thinkydink /// slike

Osobine

Složenost/potrebna ekspertiza

Programiranje na strani poslužitelja

Uvod u programiranje na strani poslužitelja/CGI

Programiranje na strani korisnika

JavaScript pruža skriptiranje na strani korisnika

izvorni kod se preuzima sa HTML stranicom

interpretira se u pregledniku tijekom preuzimanja stranice

jednostavni model izvršavanja, jezik je integriran sa HTML

visoku razinu sigurnosti korisnika

Java pruža programiranje na strani korisnika

izvorni kod se kompilira u Java byte code na poslužitelju (applet)

byte code se preuzima sa HTML stranicom

interpretira se u Java Virtual Machine preglednika

složeniji model, zahtijeva razvojnu okolini, može se brže izvršavanja, puno osobina podržano je kroz

dodatne biblioteke kontroliranu razinu sigurnosti korisnika

povezivanje na bazu podataka na poslužitelju (JDBC)

korištenje raznih servisa i sl.

Flash pruža izvršavanje “programa” na strani korisnika

izvorni kod se kompilira u .swf

izvršni kod se preuzima sa HTML stranicom

interpretira se u Flash dodatku preglednika

složeniji model, zahtijeva razvojnu okolinu

brže izvršavanja, puno osobina podržano je kroz dodatne bibliotekekontroliranu razinu sigurnosti

korisnika

sva tri pristupa postižu neovisnost o platformi

potreban je preglednik koji podržavaJavaScript/Java/Flashza traženu platform

Usmjereno je na:

grafički prikaz sadržaja stranice

ograničenu dinamiku u prikazu sadržaja stranice

lokalnu kontrolu unosa podataka

primitivno, kratkotrajno i lokalno pohranjivanje podataka

Nije mogude:

pohraniti veliku količinu podataka

povezeti s drugim sustavima (npr. bazom podataka osim Java koja to može)

Programiranje na strani poslužitelja PnSP

Od PnSP može se očekivati:

pristup do komandi operacijskog sustava

pristup do datotečnog sustava

pristup do baze podataka

povezivanje s drugim servisima (email, LDAP, SOAP, itd)

dinamičko kreiranje sadržaja stranice

Sustavi koji se temelje PnSP:B2C, B2B, B2G, G2C

Mogudi problemi kod PnSP:sigurnost poslužitelja, podataka na poslužitelju i lokalne mreže

Vrste programskih jezika za PnSP

Kompilatorski:potpuno pripremljeni izvršni kod aplikacijskog programa

Interpreterski:aplikacijski program je u izvornom kodu kojeg interpetira poseban program koji je dodan Web

poslužitelju

Interpreterski/kompilatorski:aplikacijski program sekompilira u međukod kojeg interpetira poseban program

koji je dodan Web poslužitelju

Interpreterski/kompilatorski (nakon 1. izvršavanja) :dodani program Web poslužitelja prilikom prvog

izvršavanja kompilira aplikacijski program u međukod kojeg interpetira poseban program koji je dodan Web

poslužitelju

Ugrađen u HTML:aplikacijski program je pisan unutar posebnih HTML oznaka za skriptiranje

Prošireni HTML:aplikacijski program je pisan u posebnim HTML oznakama

Programski jezici za PnSP

CGI – Common Gateway Interface

sučelje kojim se proširuje funkcionalnost poslužitelja

metoda kojom poslužitelj može prikupljati podatke (ili slati podatke) iz baze podataka, dokumenata i

drugih programa, i prezentirati te podatke preko Weba

obično se naziva programiranje za Web (na strani poslužitelja)

Programski jezici za CGI

Potrebne osobine programskog jezika da bi se koristio za CGI:

pisanje na standardni izlaz

čitanje sa standardnog ulaza

čitanje varijabli okoline.

CGI može biti pisan u gotovo bilo kojem programskom jeziku.

Pitanje je kompromisa poželjnih osobine:

prenosivost

ugrađene osobine (obrada teksta – parsing i dr.)

brzina izvršavanja

sigurnost (zaštita od čitanja koda).

Na početku se najčešde koristio Perl jer ima visoku razinu za prve dvije osobine, ali je interpreterski jezik zbog

čega je sporiji.

Uz Perl najviše se koriste C i C++ pogotovo kada je brzina najkritičnijosobina.

PHP

C/C++

//kod od svakog programskog jezika

ASP (Microsoft)

Skriptirajude oznake

<% i %>

- označava da se kod izvršava na poslužitelju

@LANGUAGE

određuje se skriptirajudi jezik (default VBScript)

–<% @LANGUAGE = “VBScript” %>

Potrebno je i mogude konfigurirati poslužitelj da provodi operacije na određeni i/ili zahtjevani način.

Problem/prednost je stroga veze na Windows platformu (IIS i PWS).

Postoji i nezavisni Web poslužitelj pod Linux-om koji je ASP usmjeren (Chil!iSoft)

C#

Proizveden u Microsoft-u (see-sharp)

Izveden iz C/C++ (čitaj Java)

Razvijen s ciljem:brzog učega, ponovnog korištenja, komponentnog razvoja

Temeljni jezik .NET tehnologije

Komplira se pod .NET SDK iliVisual Studio.NET

Može se povezati na vedinu baza podataka i koristiti razne servise

Može se koristiti za razvoj stolnih i Web aplikacija

PHP

Autor: Rasmus Lerdorf, 1994. g.

Sličan C jeziku


<?php i ?>

–označava da se kod izvršava na poslužitelju

Open Source

Od verzije 4.0 može biti integriran u Apache Web server


PHP

<html>

<head>

<title>Example<title>

</head>

<body>

<?php echo "Hi, I’m a PHP script!"; ?>

</body>

</html>

Perl

Autor: Larry Wall, 1987. g.

Sličan C jeziku

Na početku kreiran za korištenje na UNIX-u, danas se može instalirati na svim važnijim platformama

Open Source


Na početku Web boom-a bio je najrašireniji jezik za Web programiranje

mod_Perl može biti integriran u Apache Web server

Java servlet

Razvijeno u Sun Microsystems

Sličan C++ jeziku

Temelji se na virtualnom stroju (JVM)

Posebne klase kojima se postiže obrada HTML zahtjeva

Open Source

Može se povezati na vedinu baza podataka (JDBC) i koristiti razne servise

Skalabilano rješenje

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class HelloFoi extends HttpServlet {

public void doGet(HttpServletRequest request,

HttpServletResponse response)

throws ServletException, IOException {

PrintWriter out = response.getWriter();

out.println("Hello FOI");

}

}

JSP

Razvijeno u Sun Microsystems


<% i %>

–označava da se kod izvršava na poslužitelju

@LANGUAGE

–određuje se skriptirajudi jezik (default Java)

–<%@ page language = “java” %>

Potrebno je i mogude konfigurirati poslužitelj da provodi operacije na određeni i/ili zahtjevani način.

<html>

<head>

<title>

Demo of a JSP page

</title>

</head>

<body>

<%@ page language="java" %>

<%! char c = 0; %>

<%

for (int i = 0; i < 26; i++) {

for (int j = 0; j < 26; j++) {

c = (char)(0x41 + (26 - i + j)%26);

%>

<%= c %>

<%

}

%>

<br>

<%

}

%>

</body>

</html>

Cold Fusion

Proširenja HTML oznaka Cold Fusion Markup Language (CFML)


Ruby on Rails

Aplikacijski okvir za razvoj Web aplikacija, napisan u programskom jeziku Ruby

Autor RoR: David Heinemeier Hansson, 2004. g.

Autor Ruby-a: Yukihiro "Matz" Matsumoto, 1995. g.

Inspiriran Perl-om s objektno orijentiranim osobinama koje sliče Smalltalk-u

Interpreterski jezik a postoje razne implementacije Rubinius, JRuby, IronRuby i sl.


Programski jezik PHP

PHP je skriptni jezik za programiranje na strani poslužitelja. Za njegovo izvođenje potreban je Web poslužitelj

(Apache, IIS i dr.) s ugrađenom instalacijom PHP modula ili kao CGI binary.

Kratica: “PHP: Hypertext Preprocessor”

Sintaksa PHP sliči jezicima: C, Javai Perl.

PHP programski kod ugrađuje se u tekst HTML dokumenta.

Svaki programski jezik određen je svojom sintaksom.

Bogatstvo programskog jezika izražava se brojem i raznolikošdu biblioteka funkcija ili klasa koje stoje na

raspolaganju (besplatno ili se kupuje).

Što može PHP

Sve što i bilo koji drugi CGI program:

Preuzimati podatke iz formi

Generirati dinamičke web stranice

Slati i primati cookie

Rad sa bazama podataka (Adabas D, Dbase, FrontBase, Solid,Empress, mSQL, Sybase, FilePro (read-

only), Direct MS-SQL, Velocis, IBM DB2, MySQL, Unix dbm, Informix, ODBC, Ingres, Oracle)

Podržava i druge protokole: IMAP, SNMP, NNTP, POP3, HTTP

LDAPMogude je korištenje XML (SAX i DOM standardi su podržani) za Web servise, RSSGeneriranje PDF

i drugih formata

Što je potrebno za PHP

Povijest PHP-a

Autor: Rasmus Lerdorf, jesen 1994

Prva verzija koja je bila dostupna za korištenje izašla je negdje početkom 1995 pod imenom “Personal Home

Page Tools”.

Krajem 1996 odprilike 15,000 web mjesta je koristilo PHP, a sredinom 1997 više od 50,000. Krajem 1999

procjenjeno je da više od 1,000,000 web mjesta koristi PHP.

Primjer

<html>

<head>

<title>Example</title>

</head>

<body> <?php echo "Opa, ovo je PHP!"; ?> </body>

</html>

Korisnik nakon izvođenja prima čisti HTML

<html>

<head>

<title>PHP - Primjer 01</title>

</head>

<body> Opa, ovo je PHP! </body>

</html>

Sintaksa jezika

Instrukcije su odvojene kao u jezicima C i Perl (točka-zarez):

<?php echo "1. način"; ?>

ILI

<?php

echo " 2. način ";

?>

Izlazak iz HTML-a i ulaz u “PHP kod”.

Postoje nekoliko načina prijelaza iz HTMLa u PHP:

1. <?php echo(“1. način \n"); ?>

2. <? echo (“2. način \n"); ?> - ovisi o konfiguraciji PHP-a

Postoji razlika između jednostrukih i dvostrukih navodnika!

Jednostruki navodnici doslovno prikazuju tekst dok dvostruki provode zamjenu varijabli s njihovim

vrijednostima.

$a = 1;

$b = 7;

<? echo "$a + $b " . ($a + $b) . "\n"; ?> <br>

<? echo '$a + $b ' . ($a + $b) . '\n'; ?> <br>

Komentari

Php koristi ‘C’, ‘C++’ i ‘Unix shell’ tipove komentara.

<?php

echo "Ovo je komentar"; // c++ komentar

?>

<br>

<?php

/* višelinijski komentar u stilu C-a */

echo "Ovo je kraj komentara"; # unix shell komentar

?>

Nije dozvoljeno ugnjezditi višelinijske komentare npr.

/* ovo je u redu /* ovo nije u redu */ */

Tipovi podataka

PHP podržava sljedede tipove podataka:

Arrays – niz

Floating-point numbers – decimalni brojevi

Integer –cjelobrojni

Object –objekt

String – znakovni

Integer

Integer možemo specificirati na jedan od sljededih načina:

$a = 1234; # decimalni broj

$a = -123; # negativan broj

$a = 0123; # oktalni broj (83 decimalno)

$a = 0x12; # heksadecimalni broj (18 decimalno)

Veličina integer-a zavisi od platforme na kojoj se izvodi PHP, iako je obično 32-bitan.

Floating point – decimalni tip

Sintaksa:

$a = 1.234;

$a = 1.2e3;

Polja/nizovi

Nizovi se u PHPu ponašaju:

kao hash tablice odnosno asocijativni nizovi i

kao vektori odnosno indeksirani nizovi

Jednodimenzionalni nizovi

Niz možemo kreirati koristedi list() i array() funkcije ili možeme eksplicitno pridružiti vrijednost svakom

elementu niza

$a[0] = "abc";

$a[1] = "def";

$b["foo"] = 13;

Možemo koristiti i prazne zagrade pa de element biti automatski dodan na kraj zagrade

$a[] = "hello"; // $a[2] == "hello"

$a[] = "world"; // $a[3] == "world"

Funkcije za sortiranje nizova:

asort()–sortira niz i održava redoslijed pridruživanja

arsort()– sortira niz u obrnutom redoslijedu i zadržava redoslijed pridruživanja

ksort()– sortira niz po ključu

rsort()–sortira niz u obrnutom redoslijedu (od najvedeg prema najmanjem

sort()– sortira niz od najmanjeg prema najvedem elementu

uasort(), usort(), uksort() - sortiraju nizove po funkcijama koje im se zadaju

Višedimenzionalni nizovi

Za svaku novu dimenziju dodamo novi [indeks+ ili *ključ+.

$a[1][0] = $f; # dvodmenzionalni niz

$a*"foo"+*2+ = $f; # ( možemo miješati numeričke i)

$a*3+*"bar"+ = $f; # ( asocijativne ključeve)

$a*"foo"+*4+*"bar"+*0+ = $f; # četiri dimenzionalni niz!

Višedimenzionalne nizove ne možemo direktno referencirati unutra stringova

echo “Ovo nede raditi: $a*3+*bar+";

echo " Ovo hode raditi : " . $a*3+*bar+; // PHP3

echo " Ovo hode raditi : ,$a*3+*bar+-"; // PHP4

Nizove možemo puniti na slijedeće načine:

Prvi način:

$a["color"] = "red";

$a["taste"] = "sweet";

$a["name"] = "apple";

$a[3] = 4;

Drugi način:

$a = array( "color" => "red",

"taste" => "sweet",

"name" => "apple",

3 => 4 );

Funkcija array() može biti ugnježđena kod višedimenzionalnih nizova:

<? $a = array(

"more" => array("boja" => "plava", "okus" => "slano"),

"jezero" => array("boja" => "zelena", "okus" => "slatko"),

"bara" => array( "boja" => "smeđa", "okus" => "bljutavo"));

echo $a["more"]["boja"]; ?>

Objekti Da bi instancirali klasu (kreirali njen objekt) u varijablu koristi se new:

<?php

class proba {

function probaj() {

echo "Probam.";

}

}

$bar = new proba;

$bar->probaj();

?>

Rukovanje tipovima podataka

PHP, kao i drugi skriptni jezici, ne zahtjeva deklariranje tipa podatka.

Postupak se provodi automatski:

$foo = "0"; // $foo je string (ASCII 48)

$foo++; // $foo je string "1" (ASCII 49)

$foo += 1; // $foo je integer (2)

$foo = $foo + 1.3; // $foo sada je double (3.3)

$foo = 5 + "10 Little Piggies"; // $foo je integer (15)

$foo = 5 + "10 Small Pigs"; // $foo je integer (15)

$foo = 5 + "Small Pigs"; // $foo je integer (5)

$foo = "Small Pigs" + 5; // $foo je integer (5)

$foo = 5 . "Small Pigs"; // $foo je string ("5Small Pigs")

$foo = "Small Pigs" . 5; // $foo je string ("Small Pigs5")

Još malo primjera:

$foo = 1 + "10.5"; // $foo is double (11.5)

$foo = 1 + "-1.3e3"; // $foo is double (-1299)

$foo = 1 + "bob-1.3e3"; // $foo is integer (1)

$foo = 1 + "bob3"; // $foo is integer (1)

$foo = 1 + "10 Small Pigs"; // $foo is integer (11)

$foo = 1 + "10 Little Piggies"; // $foo is integer (11)

$foo = 1 + "10.7 Small Pigs"; // $foo is double (11.7)

$foo = 1 + "10.7 Little Piggies"; // $foo is double (11.7)

$foo = "10.7 pigs " + 1; // $foo is double (11.7)

$foo = "10.7 pigs " + 1.0; // $foo is double (11.7)

Pretvaranje tipova podataka

Ako se strogo želi koristiti određeni tip podataka to se čini funkcijom

int settype (string var, string type)

Pretvara varijablu ‘var’ u tip podataka ‘type’, koji može imati sljedede vrijednosti:

“integer“, ”double“,

“string“, “array“, “object"

Funkcija vrada ‘true’ ako je promjena uspješna u suprotnom vrada ‘false’.

Suprotno radi funkcija: string gettype (mixed var)

Pr.

<?

$foo = 1 + "10.5"; // $foo is double (11.5)

print $foo . " " . gettype($foo) . "<br>";

settype($foo, "string");


settype($foo, "int");


?>

Testiranje tipa podatka Ako se strogo želi ispitati određeni tip podataka to se čini funkcijom

is_array()

is_double(), is_float(), is_real()

is_long, is_int(), is_integer()

is_string()

is_object()

<?

$foo = 10.5;

echo "int? " . is_int($foo) . "<br>";

echo "double? " . is_double($foo) . "<br>";

echo "string? " . is_string($foo) . "<br>";

?>

Testiranje statusa varijable Provjera postojanja varijable, njeno brisanje i imali livrijednost:

isset()

unset()

empty()

"" (prazan string)

0 (0 kao broj)

"0" (0 kao string)

NULL

FALSE

array() (prazno polje)

var $var; (deklarirana varijabla bez vrijednosti)

<?

echo "postoji? " . isset($foo) . "<br>";

$foo = 10.5;


unset($foo);


echo "sadrzaj? " . empty($foo) . "<br>";

?>

String

Označavamo ih navodnicima. Ako koristimo obične navodnike( " ) varijable unutar stringa de biti zamijenjene

pravim vrijednostima. Drugi način za označavanje stringova su jednostruki navodnici ( '). Unutar jednostrukih

navodnika varijable se ne zamjenjuju svojim vrijednostima. Za specijalne znakove koristi se \ (backslash):

Slijed Značenje

\n linefeed (LF or 0x0A in ASCII)

\r carriage return (CR or 0x0D in ASCII)

\t horizontal tab (HT or 0x09 in ASCII)

\\ backslash

\$ dollar sign

\“ double-quote

\[0-7]{1,3} znak u oktalnaj notaciji

\x[0-9A-Fa-f]{1,2} znak u heksadecimalnoj notaciji

<?php

$str = "Ovo je string";

$str = $str . " sa još malo nadodanog teksta.";

$str .= " I još malo teksta \n";

print $str . "<br>";

$num = 9;

$str = "Broj: $num<br>"; // 'Broj: 9<br>'

print $str;

$num = 9;

$str = 'Broj: $num<br>'; // 'Broj: $num<br>'

print $str;

$str = 'Ovo je test.';

print $str . "<br>";

$first = $str[0]; // Uzimanje prvog

$last = $str[strlen($str)-1]; // i zadnjeg znaka

print $first . " " . $last;

?>

String u više redova Još jedan način je korištenje (<<<) oznake:

<?php

$str = <<<EOD

iza 3 znaka manje koristimo oznaku

kojom označavamo

početak i kraj stringa.

EOD;

?>

Varijable Imena varijabli se mogu kreirati po sljededem pravilu:

[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*

<?php

$foo = 'Bob'; // Pridružujemo vrijednost 'Bob'

echo $foo . "<br>";

$bar = &$foo; // Referenciramo $foo preko $bar.

$bar = "Pero"; // Mijenjamo $bar i $foo je promijenjen.

echo $foo . "<br>"; // 'Pero '

echo $bar . "<br>"; // 'Pero '

$bar = "Moje ime je $bar";

echo $foo . "<br>"; // 'Moje ime je Pero '

?>

Unaprijed definirane varijable U PHP-u postojiveliki broj unaprijed definiranih varijabli.

Sljedede varijable vezane su uz Apache server

Posebne osobine varijabli U PHP-u vrijednost varijable može i sama postati varijabla:

<?php

$a = "Hello";

$$a = "world"; // sadržaj varijable a je nova varijabla

echo "$a <br>"; // ispisuje: Hello

echo "$$a <br>"; // ispisuje: $Hello

echo "${$a} <br>"; // ispisuje: world

echo "$Hello <br>"; // ispisuje: world

echo "$a ${$a} <br>"; // ispisuje: Hello world

echo "$a $Hello"; // ispisuje: Hello world

?>

Konstante Konstante definiramo sa define() funkcijom. UPHPu postoje i predefinirane konstante:

TRUE -istina

FALSE -laž

__FILE__ -ime skripte

__LINE__ -linija u skripti

PHP_VERSION PHP_OS

E_ERROR E_WARNING

E_PARSE E_NOTICE

E_ALL

Primjer za definiciju konstante:

<?php

define("CONSTANT", "Hello world.");

echo CONSTANT;

?>

Konstante kontrole programa

Primjer za __FILE__ i __LINE__ :

<?php

print "Ovo je: " . __FILE__ . " u liniji broj: " . __LINE__;

?>

Operatori

U PHP-u postojesljedede vrste operatora:

1. Aritmetičke operatore

2. Operatore pridruživanja

3. Operatore uspoređevanja

4. Operatore na razini bitova

5. Operatore za kontrolu grešaka

6. Operatore izvršavanja

7. Operatore za povedavanje i smanjivanje

8. Logičke operatore

9. Operatore za rad sa stringovima

+, -, /, *, %, ++, --

Operatori uspoređivanja

Logički operatori

Operatori tipa

PHP podržava samo jedan operatora tipa, a to je:

instanceof instanca klase

String operatori

PHP podržava samo dva string operatora, a to su:

. Operator spajanja stringova

.= Operator pridruživanja stringova

if instrukcija

<?php

$a = 1;

$b = 2;

print ‘$a=‘ . $a . ‘, $b=‘ . $b . "<br>";

if ($a > $b) {

print "a > b";

}

elseif ($a == $b){

print "a == b";

}

else {

print "a < b";

}

?>

switch instrukcija

<?php

$i = 1;

switch ($i) {

case 0: print "i = 0"; break;



}

?>

while instrukcija

<?php

$a = 0;

$b = 10;

while ($a < $b) {

print "$a <br>";

$a++;

}

do {

print "$a <br>";

$a--;

} while ($a > 0);

?>

for instrukcija

<?php

for ($i=0;$i < 10;$i++) {

print "$i <br>";

if($i == 7)

break;

}

?>

foreach instrukcija

<?php

$arr = array('jedan', 'dva', 'tri');

foreach ($arr as $i)

{

echo "$i<br>\n";

}

?>

<?php

$arr['jedan'] = 1;

$arr['dva'] = 2;

$arr['tri'] = 3;

foreach ($arr as $k => $vr)

{

echo "$k=$vr<br>\n";

}

?>

Funkcije Funkcije možemo definirati na slijededi način:

Bez argumenata:

function foo() {

...

}

S argumentima:

function foo ($arg_1, $arg_2, ..., $arg_n) {

...

}

S pretpostavljenim vrijednostima argumenata:

function foo ($arg_1 = pretpostavljena vrijednost) {

...

}

<?php

square(4);

function square ($num) { echo $num * $num; }

?>

<?php

square(); // nema argument

function square ($num) { echo $num * $num; }

?>

<?php

square(); // nema argument

echo "<br>";

square(3);

function square ($num = 7) { echo $num * $num; }

?>

Kod funkcije kojima nisu definirani argumenati:

global $a;

$a++;

return $a;

}

?>

<?php

list ($zero, $one, $two) = small_numbers();

echo $zero . " " . $one . " " . $two . "<br>";


?>

funkciom list(...)varijablama iz liste argumenata pridružuju se korespondirajude vrijednosti niza. Skraduje se

postupak jer zamjenjuje vedi broj pridruživanja prema indesiranim pozicijama iz niza.

Dinamički poziv funkcije

Dinamičko definiranje naziva fukcije koja se poziva dobije setako da varijabla sadrži ime funkcije pa tu varijablu

možemokoristiti da pozovemo funkciju:

<?php

function foo() { echo "foo()<br>\n"; }

function bar( $arg = '' ) {

echo "bar(); argument je '$arg'.<br>\n";

}

$func = 'foo';

$func();

$func = 'bar';

$func( 'test' );

?>

Vidljivost varijabli

U PHP-u postoje 4 vrste vidljivosti varijabli:

1. Ugrađene superglobalne varijable koje su vidljive bilo gdje u

skripti

2. Globalne varijable definirane u skripti vidljive su kroz cijelu

skriptu ali ne u funkcijama

3. Varijable definirane u funkcijama su lokalne varijable funkcije

4. Varijable definirane u funkcijama kao globalne odnose se na

globalne varijable istog imena

Superglobalne varijable (njihov popis je u $GLOBALS):

<?php

foreach($GLOBALS as $k => $vr) {

echo $k . "<br>";

}

?>

Pr 1.

<?php

$a = 1;

echo "a=" . $a . "<br>";

foo();

function foo()

{

echo "foo: a=" . $a . "<br>"; // varijaba a nije definirana

$a = 2;

echo "foo: a=" . $a . "<br>";

}

echo "a=" . $a . "<br>";

?>

Pr 2.

<?php

$a = 1;

echo "a=" . $a . "<br>";

foo();

echo "a=" . $a . "<br>";

function foo()

{

global $a;

echo "foo: a=" . $a . "<br>";

$a = 2;

echo "foo: a=" . $a . "<br>";

}

?>

CGI varijable okoline

<?php

foreach ($_SERVER as $k => $vr)

{


}

?>

Prijenos podataka iz formulara –GET

Za prijenos podataka iz formulara također se koristi varijabla okoline QUERY_STRING u koju su upisani podaci

svih kontrola iz formulara. Skripta sama obrađuje tu varijablu ali sada je jednostavnije jer se zna format po

kojem su upisani podaci. NIJE sigurna metoda slanja podataka jer se podaci šalju kao dio URL-a! U PHP-u postoji

asocijativni niz $HTTP_GET_VARS, a u novim verzijama $_GET koji sadrži podatke.

<head>

</head>

<body>

<form id="form1" method="get" name="form1" action="primjer29.php">

<p><label for="ime">Ime: </label>

<input name="ime" size="20"><br>

<label for="prezime">Prezime: </label>

<input name="prezime" size="20"><br>

<input id="submit1" name="submit1" type="submit" value="Šalji">

<input id="reset1" name="reset1" type="reset" value="Obriši"> </p>

</form>

</body>

</html>

Prijenos podataka iz formulara -POST / 1.

WWW poslužitelj provodi određeno pretvaranje nekih znakova:

alfanumeričke prenosi bez promjene

praznine pratvara u +

ostale znakove pretvara u oblik %HH gdje je HHASCII kod znaka u bazi 16.

To znači da CGI skripta treba provesti vradanje u izvorni oblik.U PHP-u postoji asocijativni niz

$HTTP_POST_VARS, a u novim verzijama $_POST koji sadrži podatke.

<?php

foreach ($_POST as $k => $vr)

{


}

?>

Prijenos podataka iz formulara Prijenos podataka iz formulara različit je za pojedine vrste kontrole kao što su checkbox, radio button i sl. kada

se koriste u grupi.

Pr 1.

<form id="form1" method="post" name="form1" action="primjer30.php">

<p>Odaberi omiljeni programski jezik: <br />

<input type="checkbox" name="p_jezik1" value="1" /> C/C++<br />

<input type="checkbox" name="p_jezik2" value="1" /> Basic<br />

<input type="checkbox" name="p_jezik3" value="1" checked="checked" /> PHP<br />

<input type="checkbox" name="p_jezik4" value="1" /> Java<br />

<input type="checkbox" name="p_jezik5" value="1" />C#<br />

<input type="submit" value="Šalji" /> <input type="reset" value="Obriši" />

</p>

</form>

Pr 2.



<input type="checkbox" name="p_jezik" value="1" /> C/C++<br />

<input type="checkbox" name="p_jezik" value="2" /> Basic<br />

<input type="checkbox" name="p_jezik" value="3" checked="checked" /> PHP<br />

<input type="checkbox" name="p_jezik" value="3" /> Java<br />

<input type="checkbox" name="p_jezik" value="5" />C#<br />

<input type="submit" value=" Šalji " /> <input type="reset" value=" Obriši " />

</p>

</form>

Pr. 3



<input type="checkbox" name="p_jezik" value="1" /> C/C++<br />

<input type="checkbox" name="p_jezik" value="2" /> Basic<br />

<input type="checkbox" name="p_jezik" value="3" checked="checked" /> PHP<br />

<input type="checkbox" name="p_jezik" value="3" /> Java<br />

<input type="checkbox" name="p_jezik" value="5" />C#<br />

<input type="submit" value=" Šalji " /> <input type="reset" value=" Obriši " />

</p>

</form>

Pr. 4



<input type="radio" name="p_jezik1" value="1" /> C/C++<br />

<input type="radio" name="p_jezik2" value="1" /> Basic<br />

<input type="radio" name="p_jezik3" value="1" checked="checked" /> PHP<br />

<input type="radio" name="p_jezik4" value="1" /> Java<br />

<input type="radio" name="p_jezik5" value="1" />C#<br />

<input type="submit" value="Šalji" /> <input type="reset" value="Obriši" />

</p>

</form>

Rad s datotekama

Aplikacijska logika najčešče traži da WWW poslužitelj pohranjuje i čita podatke iz datoteke (razne postavke npr.

vezanu uz pristup do baze podataka, aktivnost pojedinih modula i sl.). Danas se sve više koristi zapis u XML

formatu.

Postoje glavne funkcije:

fopen - otvaranje

fclose - zatvaranje

fread – čitanje

file - učitavanje u polje fwrite – upisivanje

flock – zaključavanje

fseek – pozicioniranje

Otvaranje datoteke

Datoteka može biti otvorena za jednu ili više vrsta operacija:

$fp = fopen ("podaci.txt", "r"); - čitanje

$fp = fopen ("podaci.txt", "w+"); - upisivanje tj. prepisivanje

$fp = fopen ("podaci.txt", “a+"); -dodavanje na kraj

Pr. 1


<p><label for="ime">Ime: </label>

<input name="ime" size="20" /><br />

<label for="prezime">Prezime: </label>

<input name="prezime" size="20" /><br />

<input id="submit1" name="submit1" type="submit" value="Šalji" />

<input id="reset1" name="reset1" type="reset" value="Obriši" /> </p>

</form>

Pr.2

<?php

$ime = $_POST["ime"];

$prezime = $_POST["prezime"];

$fp = fopen ("podaci/ADRESAR.TXT", "a+");

fwrite ($fp, $ime);

fwrite ($fp, " | ");

fwrite ($fp, $prezime);

fwrite ($fp, "\n");

fclose ($fp);

?>

Čitanje datoteke

Datoteka se može čitati:

zapis po zapis ili

cijela.

<?php

$fn = "podaci/ADRESAR.TXT";

$fp = fopen ($fn, "r");

$contents = fread ($fp, filesize ($fn));

fclose ($fp); //čitanje svih znakova u string $contents

echo $contents;

?>

<?php


$fcontents = file ($fn); //čitanje zapisa u polje $fcontents

while (list ($line_num, $line) = each ($fcontents)) {

echo "<b>Line $line_num:</b> " . htmlspecialchars ($line) .

"<br>\n";

}

?>

Upisivanje u datoteku

<?php




fwrite ($fp, $ime);



fwrite ($fp, "\n");

fclose ($fp);

?>

Zatvaranje datoteke

<?php




fwrite ($fp, $ime);



fwrite ($fp, "\n");

fclose ($fp);

?>

Zaključavanje datoteke

Simultano korištenje datototeke od strane 2 ili više skripata koji može dovesti do nekonzistentnosti podataka

datoteke ukoliko se ne ograniči pristup samo jednoj skripti u datom vremenu. To znači da ostale skripte trebaju

čekati dok prva ne završi svoj rad s datotekom. Zaključavanje datoteke biti de pouzdano rješenje samo u slučaju

kada sve skripte traže zaključavanje datoteke. Ukoliko jedna skripta ne koristi taj princip nego direktno pristupa

podacima, cijeli koncept gubi smisao jer u slučaju paralelnog rada nede postojati mehanizam međusobnog

isključivanja. Ovisi o operacijskom sustavu!

Funkcija zaključavanje ima sintaksu:

flock(broj_veze_datoteke, operacija);

Uglavnom se koriste dvije operacije zaključavanja:

ekskluzivno zaključavanje (LOCK_EX )

otključavanje ranijeg zaključavanja (LOCK_UN )

Pozicioniranje u datoteci

Kod otvaranja datoteke važede pozicija datoteke je njen početak. Mogude je realizirati datoteku sa zapisima

fiksne duljine kod koje je mogude ažuriranje podataka. Za to je potrebno postaviti važedu poziciju u datoteci na

početak zapisa koji se ažurira i nakon toga provesti zapis podataka.

Drugi slučaj kod kojeg je potrebno primjeniti pozicioniranje u datoteci odnosi se na zaključavanje datoteke. Kod

poziva zaključavanja datoteke može se čekati dok druga skripta ne završi svoj posao, a ona može promijeniti

neke podatke u datoteci kao npr. dodati novi zapis(e). Ako se dodaje na kraj datoteke potrebno je postaviti

važedu poziciju u datoteci na njen novi kraj. Ovisi o operacijskom sustavu!

Funkcija pozicioniranja u datoteci ima sintaksu:

fseek (fseek (fseek (fseek (broj_veze_datoteke, pomak, [,odakle];

Pomak je broj bajtova, a odakle može biti:

SEEK_SET – početak datoteke

SEEK_CUR - važeda pozicija u datoteci

SEEK_END - kraj datoteke.

Obrada pogreške u radu s datotekama //to moram znat

Rad s datotekama temelji se na određenim pretpostavkama koje mogu biti ispunjenje, ali i ne. Različiti utjecaji

uvjetuju da pretpostavke mogu biti pogrešne zbog čega bi izvršavanje skripte krenulo u neželjenom smjeru.

Kao primjer može poslužiti otvaranje datoteke za čitanje koja ne postoji ili nisu ispravno podešena prava za tu

operaciju, otvaranje datoteke za upisivanje kada nije dozvoljeno upisivanje, izvršavanje operacije koja nije u

skladu s modom otvaranja datoteke i sl.

PHP u slučaju pojavljivanja pogreške u nekoj liniji nastavlja sa sljededom kao da nije došlo do pogreške.

Potrebno je uključiti obradu pogrešaka kod vedine U/I operacija s datotekama.

Za obradu pogreške U/I funkcija povezuje se operatorom or s funkcijom za obradu pogreške.

Kada U/I funkcija završi s kodom neuspješnosti tada se aktivira funkcija za obradu pogreške.

U/I_funkcija(...) or funkcija_za_obradu_pogreske(...);

Obrada pogreške

<?php

$fn = "podaci/ADRESAR.TXT.1";

$fcontents = file ($fn) or pogreska("Problem kod otvaranja: $fn");


echo "<b>Line $line_num:</b> " . htmlspecialchars ($line) .

"<br>\n";

}

function pogreska($poruka)

{

echo "$poruka \n";

exit;

}

?>

Razina izvještaja o pogreškama

int error_reporting ( [int level] )

Funkcijom error_reporting može se postaviti ili utvrditi važeda razina izvještavanja o pogreškama u skriptama.

Pretpostavljena razina izvještavanja postavljena je varijablom error_reportingu konfiguracijskoj datoteci PHP-a

– php.ini

Pr.

<?php

if($_SERVER["REQUEST_METHOD"] != "GET") {

echo "Samo za GET metodu!";

exit;

}

if(! isset($_GET["vrsta"])) {

$vrsta = 99;

} else {

$vrsta = $_GET["vrsta"];

}

echo "Postojeda razina: " . error_reporting() . "<br>";

switch ($vrsta) {

case 0: $razina = E_ALL;

break;

case 1: $razina = E_ALL ^ E_NOTICE;

break;

case 2: $razina = E_ERROR | E_WARNING | E_PARSE | E_NOTICE;

break;

case 3: $razina = E_ERROR | E_WARNING | E_PARSE;

break;

case 4: $razina = E_ERROR | E_WARNING;

break;

case 5: $razina = E_ERROR;

break;

default: $razina = 0;

break;

}

error_reporting($razina);

echo "Postavljena razina: " . error_reporting() . "<br>";

echo $varijabla;

echo 3/0;

?>

Rukovanje s pogreškama

mixed set_error_handler ( callback error_handler [, int error_types] )

Funkcijom set_error_handler može se preusmjeriti izvržavanje skripte nadefiniranu funkciju za rukovanje s

pogreškama u slučaju određene razine pogreške u skriptama.

Pretpostavljena razina izvještavanja postavljena je varijablom error_reporting u konfiguracijskoj datoteci PHP-a

– php.ini

Funkcija za rukovanje s pogreškama ima sljededi format:

handler ( int errno, string errstr [, string errfile [, int errline [, array errcontext]]] )

errno – razina pogreška koja se desila

errstr – poruka pogreške

errfile – naziv datoteke u kojoj se desila pogreška

errline – broj linije u kojoj se desila pogreška

errcontext – vektor varijabli koje postoje u pogledu dešavanja pogreške.

NE smiju se mijenjati!

function obradaPogresaka($errno, $errstr, $errfile, $errline,

$errcontext) {

echo "Desila se pogreška kod izvršavanja!<br>";

echo "Datoteka: $errfile<br>";

echo "Linija: $errline<br>";

echo "Opis: $errstr<br>";

echo "Kod: $errno<br>";

exit;

}



exit;

}

if(! isset($_GET["vrsta"])) {

$vrsta = 99;

} else {

$vrsta = $_GET["vrsta"];

}

switch ($vrsta) {

case 0: $razina = E_ALL;

break;

case 1: $razina = E_ALL ^ E_NOTICE;

break;

case 2: $razina = E_ERROR | E_WARNING | E_PARSE | E_NOTICE;

break;

case 3: $razina = E_ERROR | E_WARNING | E_PARSE;

break;

case 4: $razina = E_ERROR | E_WARNING;

break;

case 5: $razina = E_ERROR;

break;

default: $razina = 0;

break;

}

error_reporting($razina);

echo "Postavljena razina: " . error_reporting() . "<br>";

set_error_handler(obradaPogresaka);

echo $varijabla;

echo 3/0;

Ignoriranje pogrešaka

Operatorom @ može se ignoriratipogreška u izrazu koji slijedi operator

<?php

@$varijabla = 3/0;

?>

Generiranje pogrešaka

bool trigger_error( string error_msg [, int error_type] )

Funkcijom trigger_error može se generirati pogreška željene poruke i razine te preusmjeriti izvršavanje skripte

na postavljenog rukovatelja pogrešaka.



exit;

}

if(! isset($_GET["a"])) {

$a = 5;

} else {

$a = $_GET["a"];

}

if(! isset($_GET["b"])) {

$b = 1;

} else {

$b = $_GET["b"];

}

if($b == 0) {

trigger_error("Djeljenje s nulom!", E_USER_ERROR);

}

echo "Rezultat: " . $a / $b;

Evidencija pogrešaka

bool error_log ( string message [, int message_type [, string

destination [, string extra_headers]]]

Funkcijom error_log može se evidentirati pogreška u dnevniku web poslužitelja, poslati na TCP port ili u

datoteku.

Vrste:

0–poruka se šalje PHPsistemskom dnevniku

1 –poruka se šalje kao email na adresu

2 - poruka se šalje na vezu PHP debugera

3 –poruka se dodaje na kraj datoteke



exit;

}

if(! isset($_GET["a"])) {

$a = 5;

} else {

$a = $_GET["a"];

}

if(! isset($_GET["b"])) {

$b = 1;

} else {

$b = $_GET["b"];

}

if($b == 0) {

error_log("Djeljenje s nulom!");

error_log("Djeljenje s nulom!", 3, "dnevnik_pogresaka.txt");

exit;

}

echo "Rezultat: " . $a / $b

Slanje e-mail poruke. Generiranje HTML stranica.

Ponovno korištenje koda.

Objektna orijentacija. Rad s datumom i vremenom.

Korištenje i administriranje baze podataka (MySQL).

Slanje e-mail poruke

Vrlo često se koristi mogudnost prikupljanja mišljenja putem formulara pri čemu se podaci ne upisuju u

datoteke ili baze podataka nego se šalju kao e-mail poruke određenoj osobi-grupi.

S druge strane, moderni oblici poslovanja kao što su elektronička kupovina (amazon.com), elektronička

nadmetanja-dražbe (ebay.com) i drugi slični oblici poslovanja primjenjuju informiranje poslovnih partnera

putem elektroničke pošte.

Predložak za funkciju mail:

bool mail (string to, string subject, string message

[, string additional_headers

[, string additional_parameters]])

<HTML><HEAD>

</HEAD>

<BODY>

<FORM id=form1 method=post name="form1" action=“primjer35.php">

<P>

<LABEL for="email">E-mail adresa: </LABEL>

<INPUT name="email"></BR>

<LABEL for="subjekt">Subjekt: </LABEL>

<INPUT name="subjekt"></BR>

<LABEL for="tekst">Tekst: </LABEL>

<TEXTAREA rows="4" cols="50" name="tekst"></TEXTAREA></BR>

<INPUT id=submit1 name=submit1 type=submit value=Šalji>

<INPUT id=reset1 name=reset1 type=reset value=Obriši>

</FORM>

</BODY>

</HTML>

<?php

$mail_to = $_POST["email"];

$mail_from = “From: [email protected]";

$mail_subject = $_POST["subjekt"];

$mail_body = $_POST["tekst"];

if(mail($mail_to, $mail_subject, $mail_body, $mail_from))

{

echo("Poslana poruka za: '$mail_to'!");

} else {

echo("Problem kod poruke za: '$mail_to'!");

}

?>

Generiranje HTML stranica

Statičke HTML stranice danas ne zadovoljavaju potrebe modernog WWW poslovanja. Sve više postoji ideja za

povezivanjem WWW stranica i podataka koji su unešeni preko HTML stranica i pohranjeni u spremnike

(datoteke, baze podataka) ili koji ved postoje iz drugih aplikacija.

Kao primjer može poslužiti adresar poslovnih partnera. Treba li pružiti mogudnost izbora poslovnog partnera

tada više ne dolazi u obzir statička HTML stranica koja bi sadržavala izbornik sa njihovim popisom jer adresar se

neprestano dopunjuje. Zbog toga jedino preostaje da se podaci generiraju kod svakog zahtjeva.

<FORM id=form1 method=post name="form1" action="primjer36.php">

<P>

<LABEL for="email">E-mail adresa: </LABEL>

<select name="email">

<?php


$fcontents = file ($fn);


$value = $line;

print "<option value=\"$value\">$value</option>\n";

}

?>

</select><br>

<LABEL for="subjekt">Subjekt: </LABEL>

<INPUT name="subjekt"></BR>

<LABEL for="tekst">Tekst: </LABEL>

<TEXTAREA rows="4" cols="50" name="tekst"></TEXTAREA></BR>

<INPUT id=submit1 name=submit1 type=submit value=Šalji>

<INPUT id=reset1 name=reset1 type=reset value=Obriši>

</FORM>

Cookie

Programiranje na strani klijenta i na strani poslužitelja moraju imati više dodirnih točaka-sučelja putem kojih se

ostvaruje njihova komunikacija. Prije svega to su standardni ulaz i standardni izlaz na strani poslužitelja kojima

se primaju podaci od klijenta i kojima se šalju podaci klijentu. Druga važna točka su varijable okoline koje služe

strani poslužitelja za prikupljanje podataka o klientu i njegovom radnom okruženju.Personalizacija se obavlja na

strani klijenta, a identifikator korisnika se zapisuje kao vrijednost određenog cookie-a.

Ostaje pitanje kako poslužiteljska strana čita i zapisuje cookie?

Upisivanje:

int setcookie (string name [, string value [, int expire [,

string path [, string domain [, int secure]]]]])

<html>

<head>

<title>PHP - Primjer 37</title>

</head>

<body>

<?php

$naziv = "PzaWeb";

$id = "dkermek";

$vrijedi_do = time() + 60*60*24*7;

setcookie($naziv, $id, $vrijedi_do);

print "<b>Cookie:</b> $naziv <b>vrijedi do:</b> $vrijedi_do.\n";

?>

<?php

$naziv = "PzaWeb";

$id = "dkermek";

$vrijedi_do = time() + 60*60*24*7;

setcookie($naziv, $id, $vrijedi_do);

?>

<html>

<head>

<title>PHP - Primjer 37_1</title>

</head>

<body>

<?php

print "<b>Cookie:</b> $naziv <b>vrijedi do:</b> $vrijedi_do.\n";

?>

</body>

</html>

Čitanje Cookie-a

Varijable $HTTP_COOKIE_VARS ili $_COOKIEsadrže cookie.

<?php

$naziv = "PzaWeb";

$id = $_COOKIE[$naziv];

print "<b>Cookie:</b> $naziv=$id\n";

?>

Ponovno korištenje koda

Razvoj PHP aplikacija može biti jednostavnije i brže ako se provodi strukturiranje sadržaja Web stranice s ciljem

stvaranje predložaka stranica.Rezultat toga je izdvajanje pojedinih dijelova koji se ponavljaju u svim

stranicama (zaglavlja, podnožja, izbornici i sl) u zasebne datoteke koje se uključuju u kod pojedinačnih stranica.

To se može provreti na 2 načina:

include(nazivdatoteke); include_once(nazivdatoteke);

require(nazivdatoteke); require_once(nazivdatoteke);

Između njih postoji malo razlika jer require generira fatalnu pogrešku kada datoteka ne postoji dok include

samo upozorenje.

Objektna orijentacija u PHP-u

Veza prema objektnoj orijentaciji definirana je ulogama:

OO PHP

klasa -klasa

metoda -funkcija

objek t -referenca prema nekom podatku unutar klase

Moguda je realizacija vedine OO osobina.

Klase Programiranje u PHP-u može biti jednostavnije i brže ako se koriste gotove klase. Može se redi da su to

biblioteke funkcija koje stoje na raspolaganju (ukoliko su instalirane na računalu).

Klasa se uključuje u skriptu

include('nazivKlase.php');

Vlastite klase

Realizacija vedeg projekta zahtjeva drugačiji pristup nego što je slučaj kod malih projekata sa nekoliko skripata.

Inženjerski pristup radu na projektu sigurno de biti usmjeren stvaranju vlastitih funkcija koje de se modi koristiti

u više skripata. Te funkcije mogu se objediniti prema srodnosti u nekoliko klasa i tako višestruko koristiti u

skriptama tog i kasnijih projekata.

Konstruktor mora imati isti naziv kao i klasa.

Kontruktor može imati naziv __construct(...)

Destruktor ima naziv __destruct ( void )

Vlastita klasa ima nastavak .php kao i svaka druga PHP skripta.

Vlastita klasa –Red

<?

class Red //naziv klase

{

public $broj; //varijable klase

public $elementi;

function Red() { //kostruktor klase

$this->broj = 0;

$this->elementi = array();

}

function broj() { //funkcija klase

return $this->broj;

}

function dodaj($noviElement) {

$this->elementi[] = $noviElement;

$this->broj++;

}

function uzmi() {

if($this->broj == 0) {

return null;

}

$odlazi = array_shift($this->elementi);

$this->broj--;

return $odlazi;

}

function elementi() {

return $this->elementi;

}

}

?>

<? include('Red.php');

$red = new Red;

$red->dodaj("Jedan");

$red->dodaj("Dva");

$red->dodaj("Tri");

$red->dodaj("Pet");

brojElemenata($red->broj());

ispisiElemente($red->elementi());

$elem = $red->uzmi();

print "Uzet element: $elem <br>";



function brojElemenata($broj) {

print "Ukupno elemenata: $broj<br>";

}

function ispisiElemente($lista) {

foreach ($lista as $i) {

print $i . "<br>";

}

}

Vlastita klasa – Red /4

<? // Red_1.php

class Red // naziv klase

{

public $broj; // varijable klase

public $elementi;

function __contruct() { // kostruktor klase

$this->broj = 0;

$this->elementi = array();

}

destruktor klase

function __destruct() { // destruktor klase

print "<br><b>Brišem elemente reda!</b><br>";

while ($this->broj != 0) {

print $this->uzmi() . "<br>";

}

}

function broj() {

return $this->broj;

}


$this->elementi[] = $noviElement;

$this->broj++;

<? include('Red_1.php');

$red = new Red;

$red->dodaj("Jedan");

$red->dodaj("Dva");

$red->dodaj("Tri");

$red->dodaj("Pet");



$elem = $red->uzmi();






}



print $i . "<br>";

}

}

Vlastita klasa –Stog

<? include('Red.php'); //uključene klase

class Stog extends Red //proširenje klase

{


array_unshift($this->elementi, $noviElement);

$this->broj++;

}

function uzmi() {

if($this->broj == 0) {

return null;

}

$odlazi = array_pop($this->elementi);

$this->broj--;

return $odlazi;

}

}

?>

<? include('Stog.php');

$stog = new Stog;

$stog->dodaj("Jedan");

$stog->dodaj("Dva");

$stog->dodaj("Tri");

$stog->dodaj("Pet");

brojElemenata($stog->broj());

ispisiElemente($stog->elementi());

$elem = $stog->uzmi();


brojElemenata($stog->broj());

ispisiElemente($stog->elementi());



}



print $i . "<br>";

}

}

Rad s datumom i vremenom

Datumski i vremenski podaci imaju značajnu ulogu u mnogim dijelovima Web aplikacija.

checkdate - validacija gregorijanskog datuma

date - formatira lokalno vrijeme/datuma

getdate - daje informaciju u datumu/vremenu

gettimeofday - daje važede vrijeme

gmdate - formatira GMT lokalno vrijeme/datuma

gmmktime - postavlja UNIX timestamp za GMT datum

gmstrftime - formatira GMT lokalno vrijeme/datum prema lokalnim postavkama

localtime - daje lokalno vrijeme

microtime - daje UNIX timestamp s mikrosekundama

mktime - daje UNIX timestamp za datum

strftime - formatira vrijeme/datuma prema lokalnim postavkama

strtotime - parsira engleski tekstualni opis datuma/vremena u UNIX timestamp

time - daje važedi UNIX timestamp

Kodovi za date funkciju:

d,j - dan u mjesecu (01-31, 1-31)

D,l - dan u tjednu (Mon-Sun, Monday-Sunday)

F,M - mjesec u godini (January-December, Jan-Dec)

g,h - sat u danu u 12 satnom formatu (1-12, 01-12)

G,H - sat u danu u 24 satnom formatu (0-23, 00-23)

m,n - mjesec u godini (01-12, 1-12)

s - sekunde u minuti (00-59)

t - ukupan broj dana u mjesecu

U - ukupan broj sekundi od 01.01.1970.

w - dan u tjednu (0-6)

y - godina u 2 brojnom formatu

Y - godina u 4 brojnom formatu

z - dan u godini (0-365)

Pr.

<?php

echo "Danas je " . date("d.m.Y") . "<br>";

echo "Sada je " . date("H:i:s") . "<br>";

echo "Ovo je " . date("w.") . " dan u tjednu" . "<br>";

echo "Ovo je " . date("z.") . " dan u godini" . "<br>";

?>

RAD S BAZAMA PODATAKA

Složeni projekti uglavnom su temeljeni na primjeni baza podataka. U posljednje vrijeme kada se spominje

ozbiljna poslovna primjena WWW-a tada on nije iznimka od nepisanog pravila primjene baza podataka.

Otvorenost WWW donosi znatno više problema na području sigurnosti i rada na zaštiti baza podataka.

Na predmetu “Izgradnja Web aplikacija" koristi se baza podataka MySQLkojoj se pristupa iz PHP-a.

Otvaranje veze prema poslužitelju MySQL-a

Prvi korak je otvaranja veze prema poslužitelju baze podataka:

resource mysql_connect ( [string server

[, string username [, string password

[, bool new_link [, int client_flags]]]]])

Svi paremetri su opcionalni tako da se uzimaju pretpostavljene vrijednosti,a to su “localhost” za server,

username se preuzima od vlasnika procesa i password je prazan

Veza sa MySQL se može uspostaviti funkcijom mysql_pconnect koja otvara stalnu vezu prema bazi koja se ne

zatvara ni sa mysql_close funkcijom

Povezivanje na BP kod MySQL-a

Nakon otvaranja veze prema poslužitelju baze podataka slijedi odabir baze podataka

bool mysql_select_db ( string database_name

[, resource link_identifier])

Izvršavanje operacija na BP kod MySQL-a

Operacije se mogu izvršiti na nekoliko načina pri čemu izbor ovisi o operaciji i

načinu rada s dobivenim podacima.

int mysql_query (string query [, int link_identifier])

mysql_fetch_row(),

mysql_fetch_array(),

mysql_fetch_object().

SQL SELECT kod MySQL-a

<?

$dbc = mysql_connect("localhost", "PzaWeb2002", "FOI");

if(! $dbc) {

echo "Problem kod povezivanja na bazu podataka!";

exit;

}

$db = mysql_select_db("PzaWeb", $dbc);

if(! $db) {

echo "Problem kod selektiranja baze podataka!";

exit;

}

$sql = "select prezime, ime, maticni_broj FROM POLAZNICI " .

"order by prezime, ime";

$rs = mysql_query($sql);

if(! $rs) {

echo "Problem kod upita na bazu podataka!";

exit;

}

print "<TABLE><TR><TD>Prezime<TD>Ime<TD>Maticni_broj\n";

while( list($prezime, $ime, $maticni_broj) = mysql_fetch_array($rs)) {

print "<TR><TD>$prezime<TD>$ime<TD>$maticni_broj\n";

}

mysql_close($dbc);

?>

SQL INSERT kod MySQL-a

if(! $rs) {

echo "Problem kod upisa u bazu podataka!<br>";

echo mysql_error();

exit;

}

mysql_close($dbc);

?>

PHP funkcije kod MySQL-a

mysql_affected_rows -broj redakakoji su obuhvadeni prethodnom operacijom

mysql_change_user -promjena korisnika aktivne veze

mysql_close -zatvaranje veze

mysql_connect -otvaranje veze prema MySQL poslužitelju

mysql_create_db -kreiranje baze podataka

mysql_data_seek -pomak internog pokazivača rezultata

mysql_db_query -slanje SQL upita

mysql_drop_db -brisanje baze podataka

mysql_errno -vrada vrijednost poruke pogreške prethodne operacije

mysql_error -vrada tekst poruke pogreške prethodne operacije

mysql_fetch_array -preuzima redak rezultata kao asocijativno polje

mysql_fetch_field -vrada informaciju o stupcu iz rezultata kao objekt

mysql_list_tables -lista tablica u MySQL DMBS-u

mysql_num_fields -vrada broj polja u rezultatu

mysql_num_rows -vrada broj redaka u rezultatu

mysql_pconnect -otvara perzistentnu vezu prema MySQL poslužitelju

mysql_result -vrada rezultat

mysql_tablename -vrada naziv tablice

Proširenje funkcioalnosti rada s MySQL-a

Sastoji se on nekoliko klasa:

mysqli – predstavlja vezu između PHP i MySQL baze podataka

mysqli_stmt –predstavlja pripremljenu naredbu

mysqli_result –predstavlja rezultat izvršenja naredbe nad bazom podataka

Može se korisititi u objektno orijentiranom ili proceduralnom stilu.

Prvi korak je otvaranja veze prema poslužitelju baze podataka i bazi podataka:

mysqli mysqli_connect ( [string host [, string username [,

string passwd [, string dbname [, int port [, string

socket]]]]]] )

Svi paremetri su opcionalni tako da se uzimaju pretpostavljenevrijednosti,a to su “localhost” za server,

username se preuzima od vlasnika procesa i password je prazan.

mysqli i result operacije

<?

$mysqli = new mysqli("localhost", "PzaWeb2002", "FOI", "PzaWeb", 3306);

if (mysqli_connect_errno()) {

echo "Problem kod povezivanja na bazu podataka! " .

mysqli_connect_error();

exit;

}



$result = $mysqli->query($sql);

if(! $result) {


exit;

}


while( list($prezime, $ime, $maticni_broj) = $result->fetch_array()) {


}

$result->close();

$mysqli->close();

Otvaranje veze prema poslužitelju PostgreSQL-a

Prvi korak je otvaranja veze prema poslužitelju baze podataka s izborom baze podataka:

resource pg_connect ( string connection_string [, int

connect_type] )

Connection_string sadrži elemente/parametre za uspostavljanje veze:

"host= port= dbname= user= password="

Svi paremetri su opcionalni tako da se uzimaju pretpostavljenevrijednosti.

Izvršavanje operacija na BP kod MySQL-a

Operacije se mogu izvršiti na nekoliko načina pri čemu izbor ovisi o operaciji i

načinu rada s dobivenim podacima.

int pg_query (resource connection, string query )

pg_fetch_row(),

pg_fetch_array(),

pg_fetch_object()

SQL SELECT kod PostgreSQL-a

<?

$dbc = pg_connect("host=localhost port=5432 dbname=PzaWeb

user=PzaWeb2002 password=FOI");

if(! $dbc) {


exit;

}



$rs = pg_query($dbc, $sql);

if(! $rs) {


exit;

}


while( list($prezime, $ime, $maticni_broj) = pg_fetch_array($rs)) {


}

pg_close($dbc);

Kreiranje baze podataka – MySQL

Za kreiranje baze podataka treba imati dozvolu za tu vrstu operacije.

-kreiranje baze podataka

CREATE DATABASE FOI_PzaWeb;

-kreiranje korisnika s lozinkom

CREATE USER FOI_PzaWeb IDENTIFIED BY 'foi2007';

-pridruživanje dozvola korisniku za rad s bazom podataka

GRANT DELETE, INSERT, SELECT, UPDATE

ON `FOI_PzaWeb`.*

TO 'PzaWeb2007'@'localhost' IDENTIFIED BY 'foi2007';

-mogudnost korištenja stare verzije lozinke (bez kripriranja)

SET PASSWORD FOR 'FOI_PzaWeb'@'localhost' = OLD_PASSWORD('foi2007');

Kreiranje tablice – MySQL

Za kreiranje tablice u bazi podataka treba imati dozvolu za tu vrstu operacije.

CREATE TABLE POLAZNICI (

maticni_broj CHAR(10) NOT NULL,

prezime CHAR(25) NOT NULL,

ime CHAR(25) NOT NULL,

lozinka CHAR(20) NOT NULL,

email_adresa CHAR(40) NOT NULL,

datum_kreiranja datetime NOT NULL,

datum_promjene datetime NOT NULL,

PRIMARY KEY (maticni_broj),

INDEX prezime_ime (prezime, ime)

);

SQL

Skup naredbi za upravljenje i rad s podacima baze podataka.

DDL-Data Definition Language (DDL)

DML -Data Manipulation Language (DML)

DCL -Data Control Language (DCL)

TCL -Transaction Control (TCL)

SQL – DDL

Data Definition Language (DDL) – za definiranje strukture baze statements ili sheme.

CREATE

ALTER

DROP

TRUNCATE

COMMENT

RENAME

Data Manipulation Language (DML) – za upravljenje/manipulaciju s podacima u shemi.

SELECT

INSERT

UPDATE

DELETE

Data Control Language (DCL) –za postavljenje dozvola.

GRANT

REVOKE

SQL – TCL

Transaction Control (TCL) –za upravljenje promjenama koje DML proizvode, formiranje grupa naredbi -

transakcije.

COMMIT

SAVEPOINT

ROLLBACK

SET TRANSACTION

SQL DCL – MySQL 1.

Imenički servisi –LDAP

LDAP definira kako klijenti trebaju pristupiti do podataka na poslužitelju. On ne određuje kako podaci trebaju

biti spremljeni na poslužitelju.

LDAP je organiziran u stablo pod nazivom DIT – Director Information Tree.

Svaki list u DIT-u naziva se element (entry). Prvi element u DIT-u naziva se korijenski element .

Element se sastoji od DN – Distinguished Name i bilo kojeg broja parova atribut/vrijednost. DN je naziv

elementa i mora biti jednoznačan.

LDAP poslužitelji podržavaju uputnice tj. kazaljke na druge LDAP direktorije tako da jedan LDAP poslužitelj

može pretražiti milijun elemenata temeljem jednog zahtjeva korisnika.

LDAP – CMU – AAI@EduHr

Imenički servisi kao što je LDAP sve više se koriste zbog centralizacije autentifikacijskih podataka, a time i

uklanjanja redundancije podataka za lozinku. Tada se koriste kao dodatak bazi podataka koja u tablici sadrži

skup korisnika kojima se dozvoljava rad, a može se i u LDAP-u uvesti atribut koji sadrži domene za koje korisnik

ima pristup.

Prednost LDAP je što omogudava kreiranje vlastite sheme (atributi, ponavljanjeatributa i sl.) a ujedno je

podržana autentikacija i autorizacija – na razini atributa. LDAP ima ugrađen vrlo snažan sigurnosni model

korištenjem ACL za zaštitu podataka na poslužitelju i podržava SSL –Secure Socket Layer protokol.

Za CMU i FOI Moodle koristi se AAI@EduHr, shema na

http://schema.aaiedu.hr/shema/

LDAP klase

http://schema.aaiedu.hr/shema/

LDAP atributi

LDAP stablo

LDAP – pretraživanje, listanje i ispitivanje

LDAP imenički servisi omogudava pretraživanje po raznim kriterijima te izlistavanje izabranih atributa za

zadovoljene element. Može se ispitivati vrijednost izabranog atributa i sl.

$ds=ldap_connect("barok.foi.hr");

$r=ldap_bind($ds);

$sr=ldap_search($ds, "dc=foi,dc=hr", "sn=K*");

$nr = ldap_count_entries($ds, $sr)

$info = ldap_get_entries($ds, $sr);

for ($i=0; $i < $info["count"]; $i++) {

echo $info["count"]["dn"];

}

ldap_close($ds);

Realizacija autentikacije i autorizacije korisnika.

Autentikacija

Korištenje svih ili samo određenih dijelova aplikacije treba biti dozvoljeno samoograničenom i poznatom skupu

korisnika.

Svaki korisnik identificira se svojim korisničkim imenom koje je zaštideno pripadajudom lozinkom.

Web autentikacija može biti provedena:

internom autentikacijom Web poslužitelja –Apache s datotekom (autentikacija/admin1)

internom autentikacijom Web poslužitelja –Apache s bazom podataka (autentikacija/admin1_1)

vlastitom autentikacijom s formularom, bazom podataka i pohranom privremenih podataka u cookie

(autentikacija/admin2)

vlastitom autentikacijom s formularom, bazom podataka i pohranom privremenih podataka u session

(autentikacija/admin3)

vlastitom autentikacijom s formularom, bazom podataka i pohranom privremenih objekata u session

(autentikacija/admin3_1)

Interna autentikacija Apache poslužitelja s datotekom

Konfiguracijom Web poslužitelja može se dopustiti autentikacija od određenog dijela stabla direktorija. Cijeli

sustav autentikacije temelji se na datoteci .htaccess

U njoj se određuju konfiguracija autentikacije.

Da bi se mogla primijeniti autentikacija metodom .htaccess potrebno je u datoteci konfiguracija httpd.conf

postaviti

AllowOverride AuthConfig

Poželjno je da se postavi u datoteci konfiguracija httpd.conf da se uz index.html

i index.php tretira kao indeksna datoteka

DirectoryIndex index.html index.php

.htaccess

AuthType Basic //tip autentikacije

AuthUserFile D:/Apache/htdocs/PzaWeb/PHP_Primjeri/autentikacija/- //naziv datoteke autentikacije

admin1/korisnici.txt

AuthName "Administracija sustava" //naziv autentikacije

Require valid-user //potrebno za autentikaciju

Unos korisnika

Da bi autentikacija bila od koristi potrebno je kreirati datoteku korisnika i upisivati korisnike i njihove

pripadajude lozinke. Koristi se komanda htpasswd

Kreiranje datoteke provodi se opcijom –c i koristi se samo kod prvog korisnika.

htpasswd -c korisnici.txt dkermek

New password: ****

Re-type new password: ****

Adding password for user dkermek

Dodavanje korisnika provodi se u nastavku.

htpasswd korisnici.txt pero

New password: ****

Re-type new password: ****

Adding password for user pero

Autentikacija Apache poslužiteljem

Kada se zatraži prikaz bilo kojeg dokumenta s tog direktorija odnosno bilo kojeg direktorija koji ga slijedi tada

Web poslužitelj pokrene postupak autentikacije korisnika i prikazuje se maska za unos podataka:

Nakon uspješne autentikacije Web poslužitelj upisuje podatke o korisniku u varijablama okoline:

Korisnik:

REMOTE_USER

$_SERVER["PHP_AUTH_USER"]

Lozinka:

$_SERVER["PHP_AUTH_PW"]

<html>

<body>

<?

print "Dobrodošao: <b>" . $_SERVER["PHP_AUTH_USER"] . "</b>";

?>

</body>

</html>

<html>

<body>

<center>

<table border="0" cellspacing="5" cellpadding="5">

<form action="dodaj.php" method="POST">

<tr>

<td>Korisnik</td>

<td><input type="text" size="10" name="f_user"></td>

</tr>

<tr>

<td>Lozinka</td>

<td><input type="password" size="10" name="f_pass"></td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit"

name="submit" value="Dodaj"></td> </tr> </form> </table>

</center>

</body>

</html>

<?

$f_user = $_POST["f_user"];

$f_pass = $_POST["f_pass"];

$sname = $_SERVER["SCRIPT_FILENAME"];

$pos = strrpos($sname, "/");

$dir = substr($sname, 0, $pos + 1);

$dat = $dir . "korisnici.txt";

$rez = shell_exec(“D:/Apache/bin/htpasswd -b $dat $f_user $f_pass");

echo "<h1>Upis korisnika u datoteku autentikacije</h1>";

if(strlen($rez) != 0) {

echo "<pre>$rez</pre>";

}

else {

echo "Uspješan upis korisnika <b>$f_user</b>";

}

?>

Interna autentikacija Apache poslužitelja s bazom podataka

Konfiguracijom Web poslužitelja može se dopustiti autentikacija od određenog dijela stabla direktorija. Cijeli

sustav autentikacije temelji se na datoteci .htaccess

U njoj se određuju konfiguracija autentikacije.

Da bi se mogla primijeniti autentikacija metodom .htaccess potrebno je instalirati mod_auth_mysql.so na

direktorij modules i u datoteci konfiguracija httpd.conf postaviti

LoadModule mysql_auth_module modules/mod_auth_mysql.so

Poželjno je da se postavi u datoteci konfiguracija httpd.conf da se uz index.html i index.php tretira kao

indeksna datoteka

DirectoryIndex index.html index.php

.htaccess

Autentikacija Apache poslužiteljem

Kada se zatraži prikaz bilo kojeg dokumenta s tog direktorija odnosno bilo kojeg direktorija koji ga slijedi tada

Web poslužitelj pokrene postupak autentikacije korisnika i prikazuje se maska za unos podataka:

Nakon uspješne autentikacije Web poslužitelj upisuje podatke o korisniku u varijablama okoline:

Korisnik:

REMOTE_USER

$_SERVER["PHP_AUTH_USER"]

Lozinka:

$_SERVER["PHP_AUTH_PW"]

<html>

<body>

<?

print "Dobrodošao: <b>" . $_SERVER*"PHP_AUTH_USER"+ . "</b>";

?>

</body>

</html>

Autentikacija cookiem

Vlastita autentikacija s unosom podataka u formular koji poziva skriptu u kojoj se provjeravaju podaci u odnosu

na bazu podataka.

U cookie se upisuju podaci o uspješnoj autentikaciji koji se brišu nakon odjave.

Cookie evidencija obavlja se na strani korisnika i svi podaci koji se odnose na korišteni poslužitelj (ili njegov dio)

prenose se u svakom zahtjevu prema poslužitelju!

Potreban je dodatni dio u kojem se de administrirati korisnici.

<html>

<body>

<center>


<form action="login.php" method="POST">

<tr>

<td>Korisnik</td>


</tr>

<tr>

<td>Lozinka</td>


</tr>

<tr>


name="submit" value="Log In"></td> </tr> </form> </table>

</center>

</body>

</html>

<? include('../autentikacija.php');



$status = autentikacija($f_user, $f_pass);

if ($status == 1) {

$PzaWeb = "PzaWeb";

$PzaWeb_korisnik = $f_user;

setcookie("PzaWeb", "PzaWeb", time() + 60*60*2);

setcookie("PzaWeb_korisnik", $PzaWeb_korisnik, time() +

60*60*2);

header("Location: aplikacija.php");

exit();

}

else {

header("Location: error.php?e=$status");

exit();

}

?>

<?

function autentikacija($user, $pass)

{

$result = -1;

$dbc = mysql_connect("localhost", "PzaWeb2002", "FOI");

if(! $dbc) {


exit;

}

$db = mysql_select_db("PzaWeb", $dbc);

if(! $db) {

echo "Problem kod selektiranja baze podataka!";

exit;

}

$sql = "select prezime, ime, lozinka FROM POLAZNICI where

maticni_broj = '$user'";

$rs = mysql_query($sql);

if(! $rs) {


exit;

}

$broj = mysql_num_rows($rs);

if($broj == 1) {

list($prezime, $ime, $lozinka) = mysql_fetch_array($rs);

if($lozinka == $pass) {

$result = 1;

}

else {

$result = 0;

}

}

else {

$result = -1;

}

mysql_close($dbc);

return $result;

}

?>

<?

if (! isset($_COOKIE["PzaWeb"]) || !

isset($_COOKIE["PzaWeb_korisnik"]))

{

header("Location: error.php?e=2");

exit();

}

?>

<html>

<body>

<center>

Pozdrav korisniku: <b>

<? echo $_COOKIE["PzaWeb_korisnik"];

?>

</b></center>

<p align="right"> <font size="-1"><a

href="logout.php">Odjava</a></font>

</body>

</html>

<?

$e = $_GET["e"];

$message = "";

switch($e) {

case -1: $message = "Korisnik ne postoji.";

break;

case 0: $message = "Neispravno korisničko ime/lozinka.";

break;

case 2: $message = "Neautorizirani pristup.";

break;

default: $message = "Nepoznata pogreška.";

break;

}

print $message;

?>

<?

setcookie("PzaWeb", "PzaWeb", time() - 60*60*2);

setcookie("PzaWeb_korisnik", "", time() - 60*60*2);

header("Location: index.html");

?>

Autentikacija sessionom

Vlastita autentikacija s unosom podataka u formular koji poziva skriptu u kojoj se provjeravaju podaci u odnosu

na bazu podataka.

U session se upisuju podaci o uspješnoj autentikaciji koji se brišu nakon odjave.

Session evidencija obavlja se na strani poslužitelja, a obično se preko cookie podatka (PHPSESSID) ostvaruje

veza prema bazi session podataka na poslužitelju. Ukoliko nije dopušten upis cookie podataka tada se podatak

prenosi kao parametar u URL-u.

Potreban je dodatni dio u kojem se de administrirati korisnici.

Može se odrediti u datoteci konfiguracije php.inirazni elementi vezani uz session kao što su vrijeme trajanja

podataka u session evidenciji.

; Whether to use cookies.

session.use_cookies = 1

; Name of the session (used as cookie name).

session.name = PHPSESSID

; Initialize session on request startup.

session.auto_start = 0

; Lifetime in seconds of cookie or, if 0, until browser is

restarted.

session.cookie_lifetime = 0

session.cookie_path = /

session.cookie_domain =

session.serialize_handler = php

session.gc_maxlifetime = 1440

<html>

<body>

<center>


<form action="login.php" method="POST">

<tr>

<td>Korisnik</td>


</tr>

<tr>

<td>Lozinka</td>


</tr>

<tr>


name="submit" value="Log In"></td> </tr> </form> </table>

</center>

</body>

</html>

<? include('../autentikacija.php');



$status = autentikacija($f_user, $f_pass);

if ($status == 1) {

$PzaWeb = "PzaWeb";

$PzaWeb_korisnik = $f_user;

session_start();

$_SESSION["PzaWeb"] = "PzaWeb";

$_SESSION["PzaWeb_korisnik"] = $PzaWeb_korisnik;

header("Location: aplikacija.php");

exit();

}

else {

header("Location: error.php?e=$status");

exit();

}

?>

<?

session_start();

if (!isset($_SESSION["PzaWeb"]) ||

!isset($_SESSION[ "PzaWeb_korisnik"])) {

header("Location: error.php?e=2");

exit();

}

?>

<html>

<body>

<center>

Pozdrav korisniku: <b>

<? echo $_SESSION["PzaWeb_korisnik"];

?>

</b></center>

<p align="right"> <font size="-1"><a

href="logout.php">Odjava</a></font>

</body>

</html>

<?

session_start();

unset($_SESSION["PzaWeb"]);

session_destroy();

header("Location: index.html");

?>

Autentikacija sessionom s klasom

Umjesto pohranjivanja niza varijabli u sesiju može se koristiti vlastita klasa tako da se putem OO osobina diže

kvaliteta programskog koda. PHP dopušta pohranjivanje objekata u sesiju i kasnije preuzimanje objekta iz sesije

bez gubitka osobina objekta i podataka. Postoje podaci koji se NE mogu pohraniti u sesiju npr. resursi kao što

je veza prema bazi podataka i sl.

Autorizacija

Provođenje pojedinih operacija u svim ili samo određenim dijelovima aplikacije treba biti dozvoljeno samo

ograničenom i poznatom skupu autentičnih korisnika.

Vrlo često korisnici se grupiraju u grupe prema organizacijskim, projektnim i sličnim shemama.

Autorizacija se može provoditi na sličan način kao što je ACL –Access Control Lists (Novell NetWare, Windows).

To znači da se svakom korisniku, grupi određuje koje operacije smije obavljati, odnosno kojim stranicima smije

pristupiti.

U takvim modelima autorizacije efektivna prava korisnika proizlaze iz sinteze osobnih dozvola i grupnih svih

grupa u kojima ima članstvo.

Autorizacija se treba provoditi za svaki zahtjev korisnika čime se usporava rad poslužitelja. Uobičajeno je da se

podaci autorizacije upisuju u bazu podataka.

Zbog toga je praktično podijeliti web aplikaciju na javni i privatni dio, pri čemuse samo privatni dio štiti

autorizacijskim mehanizmom.

Metode autorizacije u odnosu na skriptu mogu biti statičkog i dinamičkog tipa.

Kod statičkog tipa sama skripta sadrži podataka o zahtjevanom elementu autorizacije te ih provjerava u odnosu

na korisnikove atribute koji su obično upisani u tablici/cama.

Kod dinamičkog tipa skripta provjerava dozvole izvođenja na temelju svog ID ili naziva u odnosu na podatke iz

tablica.

Metode autorizacije:

1. autentikacijska:temelji se na vrsti korisnika: anonimni i prijavljeni. Skripta provjerava zapis

prijavljivanja u sesiji.

2. na temelju uloge: korisnicima se dodjeljuje uloga (u tablici “KORISNIK” postoji stupac “uloga” koji je

vanjski ključ na tablicu “ULOGA”). Skripta provjerava zahtjevanu ulogu (ili jednu od više njih) za

izvršavanje skripte u odnosu na ulogu korisnika.

3. na temelju uloga: korisnicima se dodjeljuju uloge (postoji tablica “KORISNIK_ULOGA” u kojoj su zapisi

uloga pojedinog korisnika, vanjski ključevi prema tablicama “KORISNIK“ i “ULOGA”). Skripta provjerava

zahtjevanu ulogu (ili jednu od više njih ili nekoliko od više njih) za izvršavanje skripte u odnosu na

uloge korisnika.

4. na temelju ovlaštenja: korisnicima se dodjeljuje izvršavanje određene skripte (postoji tablica

“KORISNIK_SRIPTA” u kojoj su zapisi skripata pojedinog korisnika, vanjski ključ prema tablici

“KORISNIK”). Skripta provjerava da li korisnik ima dozvolu izvršavanja skipte tog naziva.

5. na temelju akcija: korisnicima se dodjeljuju akcije koje smiju izvršavati (postoji tablica

“KORISNIK_AKCIJA” u kojoj su zapisi akcija pojedinog korisnika, vanjski ključevi prema tablicama

“KORISNIK“ i “AKCIJA”). Skripta provjerava zahtjevanu akciju (ili jednu od više njih ili nekoliko od više

njih) za izvršavanje skripte u odnosu na akcije korisnika.

6. mješovite: grupama i korisnicima dodjeljuje se izvršavanje određene skripte, grupama i korisnicima

dodjeljuje se izvršavanje akcija i sl. Važeda dozvola je kumulativ dodjela kao pojedincu i na temelju

grupa u kojima je član.

Dnevnik rada –log

Vrlo često postoji potreba za pradenjem rada korisnika, od prijavljivanja, preko svake zahtjevane stranice, do

odjavljivanja.

Postoji dva načina pradenja rada korisnika:

Apache log

vlastita evidencija

Apache log

Prema potrebama postavlja se u datoteci konfiguracija httpd.conf format zapisa podataka

ErrorLog logs/error.log

LogLevel warn

LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-

Agent}i\"" combined

LogFormat "%h %l %u %t \"%r\" %>s %b" common

LogFormat "%{Referer}i -> %U" referer

LogFormat "%{User-agent}i" agent

CustomLog logs/access.log common

Primjer kod autentikacije metodom .htaccess

127.0.0.1 - - [08/Jan/2004:09:28:24 +0100] "GET

/PzaWeb/PHP_Primjeri/autentikacija/admin1/ HTTP/1.1" 401 475

127.0.0.1 - dkermek [08/Jan/2004:09:28:30 +0100] "GET

/PzaWeb/PHP_Primjeri/autentikacija/admin1/ HTTP/1.1" 200 70

127.0.0.1 - dkermek [08/Jan/2004:09:30:26 +0100] "GET

/PzaWeb/PHP_Primjeri/autentikacija/admin1/dodaj.html HTTP/1.1"

304 –

127.0.0.1 - dkermek [08/Jan/2004:09:30:46 +0100] "POST

/PzaWeb/PHP_Primjeri/autentikacija/admin1/dodaj.php HTTP/1.1"

200 95

Za pretraživanja podataka mogu se koristiti razni alati koji su razvijeni za tu namjenu, ili se može razviti vlastiti

alat.

Vlastiti dnevnik rad

Uobičajeno je da se podaci za dnevnik rada upisuju u bazu podataka, čime se otvara mogudnost jednostavnijih

upita, odnosno pretraživanja.

Obično se upisuju sljededi podaci:

vrijeme

url

adresa računala korisnika

korisnik

status

Dnevnički okvir (Log framework)

Zbog različitih analiza (ispitivanje funkcionalnosti, testiranje, pradene rada korisnika, pradenje rada sustava i sl)

korisno je ako se mogu korisiti različiti sustavi za spremanje, prikaz i pretraživanje podataka (konzola, sistemski

dnevnik, vlastita tekstualna datoteka, baza podataka, mail i sl.).

Postoje gotovi dnevnički sustavi (klase) koji sadrže traženo rješenje npr. Log

(http://pear.php.net/package/Log)

PROGRAMIRANJE NA STRANI KORISNIKA:Uvod u Javascript jezik i koncept programiranja.

Programiranje događaja. Dozvoljeni izrazi. Razvoj dinamičkih osobina dokumenata.

Objektni model dokumenta

(Document Object Model -DOM). AJAX –na korisničkoj strani.

Uvod u Javascript jezik i koncept programiranja.

http://pear.php.net/package/Log

Prva verzija HTML jezika temeljila se na jednostavnim hipertekst/hipermedija osobinama. Stranice su bile

kreirane na poslužitelju i njihov sadržaj jedino je bio mijenjan radnjama čovjeka – webmastera. Uskoro se

uočavaju potrebe za promjenama postojedeg načina i dešava se bitan napredak tako da se omogudava

dinamičko sastavljanje sadržaja stranica po zahtjevu korisnika.

Sadržaj stranica može se sastavljati:

1. statički– unaprijed pripremljeni i jednaki sadržaj za sve korisnike

2. dinamički – sadržaj se sastavlja u ovisnosti o:

Lokalno pohranjenom identifikatoru korisniku (cookie) koji zahtijeva stranicu –personalizacija

stranica

Upisanim podacima formulara koji poziva zahtjevanu stranica

Podacima iz baze podataka

Statički sadržaj stranica

To je tzv. poznati dio Web-a koji ulazi u baze podataka pretraživača. Danas je glavni problem gubitak veza

prema stranicima jer veliki broj stranica nestaje, a stranice koje sadrže veze prema tim stranicima nisu

ažurirane pa upuduju na nepostojede stranice.

Prema rezultatima istraživanja radi se o 10% u razdoblju od 12 mjeseci dok je u

ranijem razdoblju bilo 7%.

Utvrđeno je da 25% Web stranica ima barem jednu izgubljenu vezu.

Dinamički sadržaj stranica

To je tzv. nepoznati dio Web-a koji ne može udi u potpunosti u baze podataka pretraživača jer postoji

neograničeni broj različitih mogudnosti sadržaja stranica.

Najvedi dio sadržaj stranice uglavnom se sastavlja na strani poslužitelja, neovisno o kojoj se vrsti sastavljanja

sadržaja radi.

Poslužiteljska strana mora imati programske mogudnosti kojima se sadržaj generira prema zahtjevima

korisnika. To je programiranje na strani poslužitelja, a ono se detaljnije obrađuje u kasnijem dijelu.

Korisnička strana također je dobila programske mogudnosti kojima se sadržaj koji se dobiven od

poslužiteljaprilagođava zahtjevima korisnika.

Efikasnost rada podiže se smanjenjem nepotrebnih interakcija korisnik-poslužitelj kada se radi o unosu i

kontroli podataka. Sve kontrole koje se mogu realizirati na strani korisnika treba ih provesti na tom mjestu, a

poslužitelj se kontaktira nakon upisivanja ispravnih podataka.

Aktivnost stranica Osnovni elementi prve verzije HTML jezika uglavnom su bili usmjereni na pradenje sadržaja stranica putem

ugrađenih veza. Dalji razvoj HTML jezika trebao je omoguditi dodatne osobine kojima bi stranice postale

aktivne.

Stranica prema tome može biti:

pasivna/statička –ne prati rad korisnika

aktivna/dinamička –prati rad korisnika i prema njemu se može mijenjati izgled i sadržaj stranice.

Pasivne/statičke stranice

Pasivne stranice i dalje ostaju za potrebe jednostavnih sadržaja kao npr. informacije koje ne očekuju interakciju

i sl.

Aktivne/dinamičke stranice

Aktivnost stranica postiže se ugradnjom programskim mogudnosti na korisničkoj strana, kojima se sadržaj

dobiven od poslužitelja prilagođava zahtjevima korisnika i njegovom radu.

Brojnost preglednika i njihova raznolikost u izvršavanju standarda HTML jezika uvjetovala je ugradnju

programskih sposobnosti u preglednike kojima de se modi prilagođavati osobine pojedinih preglednika prema

očekivanom načinu izvršavanja.

Sve veda potreba za prikupljanjem podataka putem Weba imala je utjecaj na omogudavanje kontrole rada

korisnika i podataka koje on onosi.

Efikasnost rada podiže se smanjenjem nepotrebnih interakcija korisnik-poslužitelj kada se radi o unosu i

kontroli podataka. Sve kontrole koje se mogu realizirati na strani korisnika treba ih provesti na tom mjestu.

Jezici skriptiranja

HTML jezik omoguduje izbor između više jezika skriptiranja pri čemu se najčešde radi o slijdedim:

JavaScript (JScript)

VBScript

a rijeđe:

o Tcl

o Perl

o

Preglednik treba imati ugrađenu potporu zahtjevanom jeziku skriptiranja.

U nastavku objašnjavaju se principi skriptiranja na primjeru JavaScript (JScript)jezika.

Definiranje jezika skriptiranja

Postoje dva načina definiranje jezika skriptiranja:

globalno–odnosi se na sve skripte u dokumentu

lokalno– odnosi se na jednu skriptu unutar dokumenta

Skripta se definira oznakom <SCRIPT> ... </SCRIPT>

U jednom dokumentu može biti više odvojenih skripata i svaka od njih može biti napisana u drugom jeziku

skriptiranja.

Postoji mogudnost da preglednik ne podržava skriptiranje ili je onemogudeno izvršavanje skripata pa se u tom

slučaju može koristiti oznaku <NOSCRIPT> ... </NOSCRIPT> u kojem se objašnjava da nije mogude postidi

predviđenu funkcionalnost. Osim toga, obično se stavlja oznaka početka komentara  prije oznake </SCRIPT>. Time se izbjegavaju

mogudi problemi kod starijih preglednika koji ne podržavaju skripte.

Globalni jezik skriptiranja

Ukoliko se u cijelom dokumentu koristi samo jedan jezik skriptiranja ili postoji jedan dominantan jezik tada se

može primijeniti globalno određivanje jezika skriptiranja:

<META http-equiv="Content-Script-Type" content="type">

Kao "type" može se upisati:

"text/javascript"

"text/vbscript"

"text/tcl"

i dr.

Kod skripata koje nisu napisane u globalnom jeziku skriptiranja potrebno je koristiti lokalno definiranje.

<HTML><HEAD>

<META http-equiv="Content-Type" content="text/html; charset=windows-1250">

<META http-equiv="Content-Script-Type" content="text/javascript">

<TITLE>FOI - Programiranje za Web : JavaScript - Primjer broj 00</TITLE></HEAD>

<BODY><h1>JavaScript skripte: Primjer broj 00</h1>

<SCRIPT>



</SCRIPT>

<NOSCRIPT>

<B> Preglednik NE može izvršiti JavaScript!

</NOSCRIPT>

</BODY>

</HTML>

<HTML><HEAD>


<META http-equiv="Content-Script-Type" content="text/javascript">



<SCRIPTica> //oznaka <SKRIPTica> NE postoji

Ovo je skriptica

<SKRIPTica>

</SCRIPTica>

<SCRIPT>




</SCRIPT>

<NOSCRIPT>

</NOSCRIPT>

</BODY>

Lokalni jezik skriptiranja

HTML element za definiranje lokalnog jezika skriptiranja:

<!ELEMENT SCRIPT - - %Script; -- script statements -->

<!ATTLIST SCRIPT

charset %Charset; #IMPLIED -- char encoding of linked resource --

type %ContentType; #REQUIRED -- content type of script language --

src %URI; #IMPLIED -- URI for an external script --

defer (defer) #IMPLIED -- UA may defer execution of script --

>

Ovo je puni oblik elementa <SCRIPT>.

Kao "type" može se upisati:

"text/javascript"

"text/vbscript"

"text/tcl"

i dr.

<HTML><HEAD>




<SCRIPT type="text/javascript">




</SCRIPT>

<NOSCRIPT>


</NOSCRIPT>

</BODY>

</HTML>

Postoji i stariji oblik definiranja jezika skriptiranja, koji se polako napušta:

<HTML><HEAD>




<SCRIPT language="JavaScript">




</SCRIPT>

<NOSCRIPT>


</NOSCRIPT>

</BODY>

</HTML>

Smještaj skripata

Skripte mogu biti sastavni dio sadržaja dokumenta, ali mogu biti pohranjene i kao zasebne datoteke i vezom

uključene u dokument.

<HTML><HEAD>




<SCRIPT type="text/javascript" src="Primjer03.js">

</SCRIPT>

<NOSCRIPT>


</NOSCRIPT>

</BODY>

</HTML>

Sadržaj datoteke Primjer03.js:




JavaScript jezik

JavaScript jezik je objektno orijentirani programski jezik skriptiranja koji semože izvršava unutar različitih

preglednika zbog čega nije ovisan o platformi pa se može izvršavati na različitim platformama.

Razvila ga je tvrtka Netscape prema uzoru na programski jezik Java tvrtke Sun Microsystems. JavaScript je

temelj za ECMA-262 (European Computer Manufacturers Association) .

Razvijen je za preglednik Netscape 2.0, kasnije ga prihvadaju i druge tvrtke koje proizvode preglednike i

ugrađuju podršku u svoje verzije preglednika.

Postoje 3 razine JavaScript jezika:

•središnji dio

•za programiranje na strani klijenta

•za programiranje na strani poslužitelja

Korištenje JavaScript jezika

Središnji dio JavaScript jezika

Središnji dio JavaScript jezika čine:

vrijednosti

varijable

literali –doslovne vrijednosti

izrazi

operacije

dozvoljeni izrazi

instrukcije

funkcije

objekti

Vrijednosti

Vrijednosti mogu biti:

brojčane -34 ili 8383.3434

logičke -true ili false

stringovi -"Programiranje za Web"

null -posebna ključna riječ kojom se određuje nul vrijednost

undefined -svojstvo najviše razine čija vrijednost nije definirana

JavaScript jezik razlikuje velika i mala slova!

Prevođenje tipa podataka

JavaScript jezike je jezik dinamičkog tipa zbog čega nije potrebno specificirati tip varijable kada se deklarira.

Tipovi podataka prevode se automatski prema potrebi za vrijeme izvršavanja i dolazi do generiranja pogreške.

var mjesec = 11;

mjesec = "studeni ";

Pojavljivanje stringa i brojčane vrijednosti kod operatora + za JavaScript jezik znači prevođenje brojčane

vrijednosti u string.

datum = mjesec + 29; daje "studeni 29";

Kod drugih operatora može se obaviti operacija uz brojčani rezultat.

Varijable

Naziv odnosno identifikator varijable može se sastojati od :

prvi znak može biti slovo ili _

ostali mogu biti sastavljeni od slova, brojaka i znaka _

Varijable se mogu deklarirati na 2 načina:

korištenjem ključne riječi var

primjer var dan = 29;

koristi se unutar funkcija

pridruživanjem vrijednosti

primjer dan = 29;

Područje primjene varijable može biti:

globalno– vrijedi za sve funkcije kada je varijabla deklarirana izvan funkcija

lokalno– vrijedi unutar funkcije/bloka u kojoj je deklarirana.

Literali – doslovne vrijednosti

Postoje sljedede vrste literala:

polja -prog_jezici = ["JavaScript", "VBScript", "C++"]

boolovi -true i false

klizni zarez -25.4343 -5.11E11cijelibroj -44 -343 0xFF7

objekt -PC = {mp: "Pentium III 600", ram: "128 MB", disk:"10 GB"}

string -"Danas je ... ".

Literali – doslovne vrijednosti

Postoje sljedede vrste literala:

•polja -prog_jezici = ["JavaScript", "VBScript", "C++"]

•boolovi -true i false

•klizni zare z-25.4343 -5.11E11

•cijelibroj -44 -343 0xFF7

•objekt -PC = {mp: "Pentium III 600", ram: "128 MB", disk:"10 GB"}

•string -"Danas je ... ".

Izrazi

Izraz je svaki pravilanskup literala, varijabli, operatora i izraza koji daje pojedinačnuvrijednosti. Vrste izraza:

•aritmetički

•string

•logički

Operatori

Vrste operatora:

•pridruživanja (kao C/C++)

•uspoređivanja (kao C/C++) uz

•striktnu jednakost === ista vrijednosti i tip

•striktna nejednakost !== nije ista vrijednosti i/ili isti tip

•aritmetički (kao C/C++)

•razinabitova (kao C/C++)

•logički (kao C/C++)

•string + dodaje drugi string na kraj prvog

•posebni

•uvjetni ? : (kao C/C++)

•zarez (kao C/C++)

•delete (kao C/C++) i brisanje elementa u polju

•new (kao C/C++)

•this (kao C/C++)

•instanceof (kao C/C++)

•typeof (kao C/C++)

•void void (izraz) izraz se izvršava bez vradanja vrijednosti

Instrukcije

Vrste instrukcija:

•uvjet (kao C/C++)

•petlja (kao C/C++)

•manipulacija objektom

•komentar (kao C/C++)

Instrukcije uvjeta

if (uvjet) {

instrukcije1

}

[else {

instrukcije2

}]

switch (izraz) {

case labela1:

instrukcije1

break;

case labela2:

instrukcije2

break;

...

default:

instrukcije

}

Instrukcije petlje

for (*početni izraz+; *uvjet+; *izraz povedavanja+) ,

instrukcije1

}

do {

instrukcije

} while (uvjet);

while (uvjet) {

instrukcije

}

label:

break [label];

continue [label];

Instrukcije manipulacije s objektom

for (varijabla in objekt) {

instrukcije

}

with (objekt) {

instrukcije

}

Instrukcije obrade iznimaka i pogrešaka

try {

instrukcije

} catch (errorInfo) {

obrada pogreške

}

throw // okidanje uvjeta iznimke

<body>

<h1>JavaScript skripte: Primjer broj 03_1</h1>

<script type="text/javascript">

var broj_1 = 2;

var broj_2 = 0;

var broj_3 = broj_1 / broj_2;

alert("Rezultat: " + broj_1 + "/" + broj_2 + "=" + btoj_3);

</script>

</body>

</html

<body>



var broj_1 = 2;

var broj_2 = 1.3;


try {

alert("Rezultat: " + broj_1 + "/" + broj_2 + "=" + btoj_3);

} catch (e) {

alert("Pogreška: " + e.name + " \n" + e.message);

}

</script>

</body>

</html>

<body>



try {

var broj_1 = 2;

var broj_2 = 0;

if(broj_2 == 0) {

var pogreska = new Error("Djeljenje s nulom!");

throw pogreska;

}


alert("Rezultat: " + broj_1 + "/" + broj_2 + "=" + broj_3);

} catch (e) {

alert("Pogreška: " + e.name + " \n" + e.message);

}

</script>

</body>

Funkcije

function naziv ([argumenti]) {

instrukcije

}

Predefinirane funkcije:

•eval -izvrši string kao dio koda

•isFinite -ispituje je li konačan broj

•isNaN -ispituje je li ne broj

•parseInt -vrada int od stringa

•parseFloat -vrada float od stringa

•Number -pretvara objekt u broj

•String -pretvara objekt u string

•escape -pretvara tekst u oblik za URL

•unescape -vrada tekst iz URL oblika u narmalan oblik

Predefinirani objekti u JavaScript jeziku

To su objekti koji postoje u središnjem dijelu JavaScript jezika. Pogledati u Client-Side JavaScript Guide. Svaki

objekt ima svoj skup atributa i metoda.

To su:

•Object

•Array

•Boolean

•Date

•Function

•Math

•Number

•String

•RegExp -posebno se obrađuje

Object

Atributi:

Funkcije:

•toSource -vrada objekt koji predstavlja specificirani objekt.

•toString -vrada string koji predstavlja specificirani objekt.

•valueOf -vrada primitivnu vrijednosti specificiranog objekta.

Array

Atributi:

•length -broj elemenata u polju

Funkcije:

•concat -spaja 2 polja i vrada novo polje.

•join -spaja sve elemente polja u string.

•pop -briše posljednji element u polju i vrada taj element.

•push -dodaje jedan ili više elemenata na kraj polja i vrada novu veličinu polja.

•reverse -zamjenjuje elemente polja, prvi postaje posljednji, a posljednji prvi.

•shift -briše prvi element iz polja i vrada taj element.

•slice -izdvaja dio polja i vrada novo polje.

•splice -dodaje i/ili briše elemente iz polja.

•sort -sortira elemente polja.

•toString -vrada string koji predstavlja polje i njegove elemente.

•valueOf -vrada primitivnu vrijednost polja.

Boolean

Atributi:

Funkcije:

•toString -vrada string koji predstavlja specificiraniobjekt.

•valueOf -vrada primitivnu vrijednost Boolean objekta.

Date

Atributi:

Funkcije:

•getDate -vrada dan u mjesecu.

•getDay -vrada dan u tjednu.

•getFullYear -vrada godinu.

•getHours -vrada sat.

•getMilliseconds -vrada milisekunde.

•getMinutes -vrada minute.

•getMonth -vrada mjesec.

•getSeconds -vrada sekunde.

•getTime -vrada brojčanu vrijednosti koja odgovara vremenu.

•getYear -vrada godinu.

•toSource -vrada objekt koji predstavlja Date objekt.

•toString -vrada string koji predstavlja Date objekt.

•valueOf -vrada primitivnu vrijednosti Date objekta.

Atributi:

Funkcije:

•setDate -postavlja dan u mjesecu.

•setDay -postavlja dan u tjednu.

•setFullYear -postavlja godinu.

•setHours -postavlja sat.

•setMilliseconds -postavlja milisekunde.

•setMinutes -postavlja minute.

•setMonth -postavlja mjesec.

•setSeconds -postavlja sekunde.

•setTime -postavlja brojčanu vrijednosti koja odgovara vremenu.

•setYear -postavlja godinu.

Math

Atributi:

•E -Eulerova konstanta i baza prirodnog, aproks.2.718.

•LN10 -prirodni logaritam od 10, aproks.2.302.

•LN2 -prirodni logaritam od 2, aproks.0.693.

•LOG10E -baza10 logaritmaodE (aproks. 0.434).

•LOG2E -baza2 logaritmaodE (aproks. 1.442).

•PI -aproks. 3.14159.

Funkcije:

•abs -vrada apsolutnu vrijednost broja.

•acos -vrada arc cos vrijednosti broja.

•asin -vrada arc sin vrijednosti broja.

•atan -vrada arc tan vrijednosti broja.

•ceil -vrada najmanji cijeli broj vedi ili jednak broju.

•cos -vrada cos vrijednosti broja.

Funkcije:

•floor -vrada najvedi broj manji ili jednak broju.

•log -vrada prirodni logaritam broja.

•max -vrada vedi broj od dva broja.

•min -vrada manji broj od dva broja.

•random -vrada pseudo slučajni broj u intervalu 0 i 1.

•round -vrada vrijednost broja zaokruženu na najbliži cijeli broj.

•sin -vrada sin vrijednost broja.

•sqrt -vrada drugi korijen vrijednost broja.

•tan -vrada tan vrijednost broja.

Number

Atributi:

•MAX_VALUE -najvedi broj koji se može predstaviti.

•MIN_VALUE -najmanji broj koji se može predstaviti.

•NaN -posebna"nije broj" vrijednost.

•NEGATIVE_INFINITY -posebna vrijednost koja predstavlja negativnu beskonačnost, vrada se kod

prekoradenja.

•POSITIVE_INFINITY -posebna vrijednost koja predstavlja beskonačnost, vrada se kod

prekoradenja

Funkcije:



String

Atributi:

•length -duljina stringa.

Funkcije:

•anchor -kreira HTML vezu koja se koristi kao hipertekstni cilj

•charAt -vrada znak na određenom indeksu.

•concat -združuje dva stringa i vrada novi string.

•indexOf -vrada indeks u stringu za prvo pojavljivanje tražene vrijednosti, ili -1 ako nije pronađeno.

•lastIndexOf -vrada indeks u stringu za posljednje pojavljivanje tražene vrijednosti, ili -1 ako nijepronađeno.

•slice -izdvaja dio stringa i vrada novi string.

•split -cijepa string u polje stringova prema izabranom znaku

Funkcije:

•substr -vrada znakove u stringu koji počinju od određene lokacije do određenog broja znakova.

•substring -vrada znakove u stringu između dva indeksa u stringu.

•toLowerCase -vrada string pretvoren u mala slova.

•toSource -vrada objekt koji predstavlja specificirani objekt.


•toUpperCase -vrada string pretvoren u velika slova.


Programiranje na strani korisnika

Jedan od glavnih problema odnosi se na postojanje više verzija preglednika koji prepoznaju različite verzije

JavaScript jezika.

To je jedan od glavnih razloga za primjenu starijeg načina određivanje verzije jezika skriptiranja.

<SCRIPT LANGUAGE="JavaScript">

<!-- Komentar da se izbjegne pogreška kod starijih preglednika

document.write("<P>JavaScript 1.0");


</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">




</SCRIPT>





</SCRIPT>





</SCRIPT>

Programiranje događaja.

Razvoj dinamičkih osobina dokumenata.

Upravljanje događajima

Mnoge događaje koje se izvršavaju u pregledniku mogu se upravljati pomodu njihovih rukovatelja. Slučaj u

kojem se najviše koristi upravljanje događajima su formulari.

Ti različiti događaji odnose se na određene elemente (dokumenta, forme i dr.) i dešavaju se nakon neke

provedene radnje (korisnika, preglednika i dr.), a pridružen im je određeni rukovatelj događaja.

Programiranjem rukovatelja događaja dokumenti postaju dinamički i aktivni.

Hijerarhija ugrađenih objekata

Window

Atributi:

•closed -? zatvoren prozor.

•document -sadrži informaciju o važedem dokumentu i pruža metode za prikaz HTML za korisnika.

•frames -polje svih okvira u prozoru.

•history -sadrži informaciju o URL-ovima koje je korisnik posjetio u prozoru.

•innerHeight -određuje vertikalu dimenziju sadržaja prozora u pixelima.

•innerWidth -određuje vodoravnu dimenziju sadržaja prozora u pixelima.

•length -broj okvira u prozoru.

•location -informacija o važedem URL-u.

•name -jednoznačni naziv prozora.

Atributi:

•opener -naziv prozora dokumenta koji je otvorio prozor.

•outerHeight -određuje vertikalu dimenziju vanjske granice prozora u pixelima.

•outerWidth -određuje vodoravnu dimenziju vanjske granice prozora u pixelima

•pageXOffset -x-koordinata u pixelima.

•pageYOffset -y-koordinata u pixelima.

•parent -sinonim za prozor ili okvir čiji skup okvira sadrži važedi okvir.

•screenX -x-koordinata lijevog ruba prozora.

•screenY -y-koordinatagornjeg ruba prozora.

•self -sinonim za važedi prozor.

•status -tekst poruke statusa.

•top -sinonim za najgornji prozor.

•window -sinonim za važedi prozor.

•menubar -izbornik

•toolbar -alatna traka

•locationbar -adresna traka

•personalbar -osobna traka

•scrollbars -klizajude trake

•statusbar -statusna traka

Funkcije:

•resizeBy -mijenja cijeli prozor mičudi donji desni ugao za određenu količinu.

•resizeTo -mijenja veličinu prozora na određenu visinu i širinu.

•setInterval -ispituje izraz ili poziva fukciju nakon svakog proteka broja milisekundi.

•setResizable -određuje može li korisnik mijenjati veličinu prozora.

•setTimeout -ispituje izraz ili poziva fukciju nakon svakog proteka broja milisekundi.

•setZOptions -postavlja z-order prozora.

•stop -zaustavlja važedi download.

Rukovatelji događaja:

•onBlur

•onDragDrop

•onError

•onFocus

•onLoad

•onMove

•onResize

•onUnload

Window – onLoad() na funkciju

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

<Title>FOI - Programiranje za Web : JavaScript - Primjer broj 05</title></head>

<script language=javascript>

<!--

function dolaznaPoruka() {

alert('Poruka iz prozora ' + window.name + ': Stigao sam!!!'); }

function odlaznaPoruka() {

alert('Poruka iz prozora ' + window.name + ': Odlazim...'); }

function pozdravnaPoruka() {

alert('Poruka iz prozora ' + window.name + ': Opet sam u akciji!!!'); }

// -->

</script>

<body onLoad=“dolaznaPoruka();” onUnload=“odlaznaPoruka();”

onFocus=“pozdravnaPoruka();”>

<h1>JavaScript skripte: Primjer broj 05</h1>

</body>

</html>

<html><head>


<Title>FOI - Programiranje za Web : JavaScript - Primjer broj 05</title></head>

<script language=javascript>



</script>

<body>

<h1>JavaScript skripte: Primjer broj 05-0</h1>

</body>

</html>

Window – onLoad() na JavaScript kod

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_1</title></head>

<body

onLoad="alert('Poruka iz prozora ' + window.name + ': Stigao sam!!!');"

onUnload="alert('Poruka iz prozora ' + window.name + ': Odlazim...');"

onFocus="alert('Poruka iz prozora ' + window.name + ': Opet sam u

akciji!!!');"> //neposredan upis JavaScript kodaunutar navodnika


</body>

</html>

<html><head>

<body

onLoad="alert('Poruka iz prozora ' + window.name + ': Stigao sam 1!!!');

alert('Poruka iz prozora ' + window.name + ': Stigao sam 2!!!'); "

//neposredan upis više linija JavaScript koda unutar navodnika

onUnload="alert('Poruka iz prozora ' + window.name + ': Odlazim...');"

onFocus="alert('Poruka iz prozora ' + window.name + ': Opet sam u

akciji!!!');">


</body>

neposredan upis više

</html>

Window – resize(), preudo veze

<html><head>



<body>


<script language="JavaScript">



</scripT>

Aktiviraj <a href="javascript:window2.focus();">dijete</a>.<br> //pseudo veza-poziva se

javascript funckija kojom se

prebacuje fokus na drugi prozor

</body>

</html>

Window – prozor djeteta

<html><head>



<BODY>


Aktiviraj <a href="javascript:self.opener.focus();">roditelj</a>.<br> //pseudo veza–poziva se

javascript funkcija kojom

se prebacuje fokus na

prozor roditelja

</body>

</html>

Window – timer

<script language="JavaScript">

</script>

<body onLoad=“start();” onUnLoad=“stop();”>


<form id=form1 name=form1>

<input type="text" name="display" size="20">

</form>

Pokreni <a href="javascript:start();">sat</a>.<br>

Zaustavi <a href="javascript:stop();">sat</a>.<br>

Mogude su kompleksnije varijante korištenja timera. Posebno kada se pokretanje i zaustavljanje timera veže na

događaje.

Potrebno je voditi brigu o broju instanci timera!

Svaka instanca radi samostalno i ukoliko se poveda njihov broj može dodi do padanja performansi računala!

Window – ispis na pisač

<html><head>


<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_A</title></head>

<body>

<h1>JavaScript skripte: Primjer broj 05_A</h1>

Pokreni <a href="javascript:self.print();">ispis</a> na pisač.<br>

</body>

</html>

Window – pogreška

<html><head>

<title>FOI - Programiranje za Web : JavaScript - Primjer broj 05_B</title></head>

<body>

<h1>JavaScript skripte: Primjer broj 05_B</h1>

<script language="JavaScript"> naziva



</script>

</body>

</html>

Window – povezivanje prozora

17 scripta 26 str.

Document

Atributi:

•anchors -polje veza u dokumentu.

•applets -polje appleta u dokumentu.

•bgColor -string koji određuje BGCOLORBGCOLORBGCOLORBGCOLORatribut.

•cookie -određuje cookie-kolačid.

•embeds -polje za plug-in dokumenta.

•fgColor -string koji određuje TEXTTEXTTEXTTEXTatribut.

•formName -posebno svojstvo za svaki imenovani formular u dokumentu.

•forms -polje formulara u dokumentu.

•images -polje slika u dokumentu.

•lastModified -string koj određuje datum posljednje promjene dokumenta.

•layers -polje za slojeve u dokumentu.

•linkColor -string koji određuje LINKLINKLINKLINKatribut.

•links -polje veza u dokumentu.

•location -informacija o važedem URL-u.

•plugins -polje za plug-in udockmentu.

•title - string koji određuje TITLETITLETITLETITLEoznaku.

•URL -string koji određuje puni URL dokumenta.

•vlinkColor -string koji određuje VLINKVLINKVLINKVLINKatribut.

Funkcije:

•close -zatvori izlazni tok i prikaži podatke.

•open -otvara tok za preuzimanje izlaza funkcija write ili writeln.

•write -ispisuje jedan ili više HTML izraza u dokument.

•writeln -ispisuje jedan ili više HTML izraza u dokument i znak za novu liniju.


•onClick

•onDblClick

•onKeyDown

•onKeyPress

•onKeyUp

•onMouseDown

•onMouseUp

History

Atributi:

•current -važeda adresa.

•length -broj elemenata u povijesti.

Funkcije:

•back -prijelazi na prethodni element u povijesti.

•forward -prijelazi na sljededi element iz povijesti.

•go -prijelaz za +/-elemenata u povijesti

Navigator

Atributi:

•appCodeName Kodno ime preglednika.

•appName Naziv preglednika.

•appVersion Verzija preglednika.

•language Prijevod korištenog preglednika.

•mimeTypes Polje svih MIME tipova koje podržava klijent.

•platform Platforma za koju je preglednik kompiliran.

•plugins Polje svih umetaka (plug-in-ova) koju su trenutno instalirani na klijentu.

•userAgent Zaglavlje korisničkog agenta

Form

Atributi:

•action -atribut ACTION

•elements -polje elemenata formulara

•encoding -atribut ENCTYPE vrsta encodiranja

•length -broj elemenata u formularu

•method -atribut METHOD –metoda slanja

•name -atribut NAME –naziv formulara

•target -atribut TARGET naziv prozora u koji se dokument

Funkcije:

•handleEvent -poziv specificiranog događaja

•reset -simulira klik miša na tipku vrste reset

•submit -šalje formular


•onReset

•onSubmit

Submit

Atributi:

•form -formular u kojem se nalazi

•name -atribut NAME –naziv

•type -atribut TYPE– vrsta

•value -atribut VALUE–vrijednost

Funkcije:

•blur -uzimanje fokusa

•click -simulira klik miša na tipku

•focus -postavljanje fokusa



•onBlur

•onClick

•onFocus

Reset

Atributi:



•type -atribut TYPE– vrsta


Funkcije:






•onBlur

•onClick

•onFocus

Button

Atributi:



•type -atribut TTTYPETYPEYPEYPE–––– vrstavrstavrstavrsta


Funkcije:






•onBlur

•onClick

•onFocus

•onMouseDown

•onMouseUp

Text

Atributi:

•defaultValue -atribut VALUE–vrijednost




•value -trenutna vrijednost

Funkcije:




•select -selektira ulazno područje objekta


•onBlur

•onChange

•onFocus

•onSelect

Password

Atributi:






Funkcije:






•onBlur

•onFocus

Textarea

Atributi:






Funkcije:






•onBlur

•onChange

•onFocus

•onKeyDown

•onKeyPress

•onKeyUp

OnSelect

Checkbox

Atributi:

•checked -trenutno stanje

•defaultChecked -atribut CHECKED–stanje




•value -atribut VALUE –vrijednost

Funkcije:






•onBlur

•onClick

•onFocus

Radio

Atributi:

•checked -trenutno stanje (osobina pojedinog gumba)

•defaultChecked -atribut CHECKED–stanje (osobina pojedinog gumba)

•form -formular u kojem se nalazi (osobina polja gumba)

•name -atribut NAME –naziv(osobina polja gumba)

•type -atribut TTTYPETYPEYPEYPE–––– vrsta vrsta vrsta vrsta (osobina polja gumba)

•value -atribut VALUE –vrijednost (osobina polja gumba)

Funkcije:






•onBlur

•onClick

•onFocus

Select

Atributi:


•length -broj opcija u izborniku

•options -polje opcija u izborniku


•selectedIndex -index selektirane opcije izbornika

•type - vrsta izbornika vrsta izbornika –vrsta izbornika vrsta izbornika ––– jedan ili višejedan ili višejedan ili

višejedan ili više

Funkcije:





•onBlur

•onChange

•onFocus

Option

Atributi:

•defaultSelected -inicijalnostanje opcije

•index -indeks u polju opcija (Select.options)

•selected -trenutno stanje opcije

•text -tekst opcije

•value -vrijednost koja se vrada ako je izabrana opcija

Document – cookie

Privremeno pohranjivanje podataka o stanju rada korisnika na pojedinom

dokumentu.

Obično se koristi za pohranjivanje podataka o korisnikovom identitetu (korisnički

račun), aktivnosti (košarica), personalizacija (jezik,...).

Može biti zloupotrebljavano zbog čega postoji mogudnost zabrane upisa odnosno traži

se potvrda prije upisa.

Cookie/kolačid se tretira kao par naziv=vrijednost

Može biti upisano 20 takvih parova za jednu domenu.

Ukupno može biti pohranjeno 4000 znakova s time da se ne preporučuje više od 2000.

Podaci se lokalno upisuju na računalu korisnika. Ovisi o pregledniku gdje i kako se

spremaju podaci.

(Windows IE npr. C:\Documents and Settings\Dragutin Kermek\Cookies)

Kod IE podaci svakog web mjesta upisani su u vlastitu datoteku

dkermek@google[1].txt

dkermek@scripts[1].txt

[email protected][1].txt



Sadržaj datoteke je djelomično kriptiran (binarni zapis vremena)

PREFID=0f37144db5c1e8a7:TM=1163740575:LM=1163740575:S=Vs9udXGz

3sCNVZT9?google.hr/?1024?261887833632111634?21750326882982144

7?*?

cms_user dkermek?www.foi.hr/?1024?1089675648?29827687?436676?

20829821452?*?