CS SI Model

Dokument : Mrezne usluge i programiranje.DOC

Predavanja - biljeke

MRENE USLUGE

I

PROGRAMIRANJE

Reference :Revision :ADatum :16.05.01

Provjerio :Datum :Potpis

Odobrio:Datum :Potpis

Autor :Saa Mladenovi

Naziv kolegija:Mrene usluge i programiranje

Status kolegija:Izborni predmet V-og semestra programa raunarstva

Distribucijska lista:

POVIJEST IZMJENA

VERZIJADATUMIZMJENAAUTOR

A07.10.2001IzradaS.M.

1.Kratka povijest Interneta62.Osnovne mrene usluge72.1.Elektronika pota72.1.1.Simple Mail Transfer Protocol (SMTP)72.2.Prijavljivanje za udaljeni rad82.2.1.TELNET82.2.2.File Transfer Protocol FTP103.WWW - problemi projektiranja aplikacije103.1.Projektiranje cjelokupne aplikacije113.2.Izbor tehnologija i alata123.2.1.HTML 4.01123.2.2.CSS - Cascading Style Sheets123.2.3.XHTML budunost HTML-a133.2.4.XML alat za prijenos podataka133.2.5.XSL alat za transformaciju podataka133.2.6.Skript jezik na strani servera i klijenta133.2.7.Upravljanje podacima uporabom SQL-a134.Osnove izrade web stranica144.1.Standard za izradu HTML dokumenta144.2.Postavljanje strukture HTML-a154.2.1.Element html154.2.2.Zaglavlje dokumenta element head164.2.3.Naslov element title164.2.4.Tijelo dokumenta element body164.3.Ureivanje sadraja dokumenta pomou naslova174.4.Odlomak paragraph194.5.Formatiranje teksta204.5.1.Logiki stilovi204.5.1.1.Naglaavanje em element204.5.1.2.Pojaano naglaavanaje strong element204.5.1.3.Struktura za tehnike dokumente code, kbd, var, samp, dfn, cite elementi204.5.1.4.Preformatirani tekst pre element214.5.2.Fiziki stilovi224.5.2.1.Podebljana slova b oznaka224.5.2.2.Kosa slova i oznaka224.6.Liste ul, ol, dl, dt, dd i li oznake234.6.1.Neureena lista ul oznaka234.6.2.Ureena lista ol oznaka244.6.3.Definicijska lista dl dt i dd oznake264.6.4.Gnjeenje lista284.6.5.Pregled oznaka za liste294.7.Specijalni znakovi u HTML-u304.8.Linkovi304.8.1.Interni linkovi314.9.tABlice - element324.9.1.elije tablice344.9.2.Pregled oznaka za tablice:364.9.3.Primjeri razliitih tablica u html dokumentu364.10.Forme384.10.1.Kontrola unosa na formi394.10.2.Pitanja za HTML dio405.Java script415.1.Uvod u programiranje JavaScript-om415.1.1.JavaScript i Java415.1.2.Interpreteri i kompajleri425.1.3.O JavaScriptu425.1.4.Pitanja435.2.JavaScript sintaksa435.2.1.Ukljuivanje JavaScript-e u HTML dokument435.2.2.Smijetanje JavaScripta455.2.3.Sintaksa i konvencije455.2.3.1.Osjetljivost na velika i mala slova465.2.3.2.Toka-zarez465.2.3.3.Razmaci465.2.3.4.String i navodnici465.2.3.5.Backslash (\) i stringovi475.2.3.6.Otvaranje i zatvaranje zagrada485.2.3.7.Komentari485.2.3.8.Varijable i imena funkcija485.2.3.9.Rezervirane rijei495.2.4.Pitanja515.3.Osnove programiranja525.3.1.Deklariranje varijabli525.3.2.Tipovi varijabli525.3.3.Uporaba operatora535.3.4.Vidljivost varijable555.3.5.Upravljake strukture555.3.5.1.Uvjetne naredbe555.3.5.2.Petlje595.3.6.Funkcije625.3.6.1.Definicija funkcije635.3.6.2.Poziv funkcije635.3.6.3.Return naredba635.3.7.JavaScript objekti665.3.7.1.Booleov objekt665.3.7.2.String objekt665.3.7.3.Objekt polja675.3.7.4.Objekt datuma675.3.7.5.Matematiki objekt685.3.8.Pitanja695.3.9.DOM (Document Object Model)705.3.10.Dogaaji (events)715.3.10.1.onClick()715.3.10.2.onSubmit()725.3.10.3.onMouseOver()725.3.10.4.onMouseOut()725.3.10.5.onFocus()725.3.10.6.onChange()725.3.10.7.on Blur()735.3.10.8.onLoad()735.3.10.9.onUnload()735.3.11.Tablini prikaz dogaaja i elemenata HTML forme735.3.12.Pitanja736.xml ExTENSIBLE mARKUP lANGUAGE756.1.osnove XML-a766.2.Struktura xml dokumenta786.3.osnovni dijelovi xml dokumenta796.3.1.Prolog796.3.2.Elementi806.3.3.Atributi816.3.4.Procesne instrukcije816.3.5.Komentari826.4.xml sintaksa826.4.1.Svi XML elementi moraju imati poetnu i zavrnu oznaku826.4.2.XML oznake su osjetljive na velika i mala slova836.4.3.XML elementi moraju biti pravilno ugnijeeni836.4.4.XML dokument mora sadravati samo jedan poetni element836.4.5.Vrijednosti atributa moraju biti u navodnicima846.5.XML namespace846.6.Saetak887.povezivanje html-a i xml-a897.1.XML data islands907.2.povezivanje html elemenata sa xml podacima917.3.Saetak:968.xsl - extensible stylesheet language978.1.PRImjer XSL transformacije988.2.XSLT elementi1018.2.1.XSL namespace1018.2.2.xsl:template1028.2.3.xsl:value-of1048.2.4.xsl:for-each1058.2.5.xsl:sort1068.2.6.xsl:if1078.3.XSL transformacije iz javascripta108

117

1. Kratka povijest Interneta

Danas Internet i Intranet nastavljaju svoje irenje poput poara. Gotovo da i nema tvrtke koja na ovaj ili onaj nain ne koristi usluge koje Internet prua. Sve je vie banaka koje omoguavaju izvriti sloene novane transakcije koristei raunalo koje je spojeno preko Interneta na poseban server.

Kod tvrtki koje imaju vie desetaka raunala u svojoj mrei uoava se trend formiranja vlastitog Intranet posluitelja na kojem se pohranjuju informacije bitne za radnike tvrtke.

Neka industrijska istraivanja pokazuju kako e Intranet posluitelji postati deset puta brojniji od Internet posluitelja. U 2000 godini utroeno je preko milijardu amerikih dolara na poslove vezane uz Intranet.

Uz sva dogaanja vezana uz Web lako se zaboravlja kako su temelji razvoja postavljeni jo kasnih 60-ih godina realizacijom ARPAnet-a. Izvorni ARPAnet podravao je samo tri servisa: remote login (telnet, udaljeni rad uporabom terminala), file transfer (prijenos datoteka) i remote printing (udaljeni ispis).

U listopadu 1972 ARPAnet je slubeno predstavljen javnosti na Meunarodnoj konferenciji o raunalnim komunikacijama u Washington-u. Idue godine TCP/IP predloen je kao standard za ARPAnet.

1979. jo je jedna od znaajnih godina za budui razvoj Interneta. Znanstvenici se sastaju kako bi uspostavili istraivaku raunalnu mreu nazvanu Usenet. Ova mrea pruala je news i mail servise (elektroniku potu i novosti).

U sijenju 1983. TCP/IP je standard preko kojeg je spojeno 500 raunala.

Do 1990. osnovne Internet aplikacije bile su e-mail, telnet i FTP. 1991. pojavljuje se Gopher - hijerarhijska struktura izbornika koja pomae organiziranju dokumenata pogodnih za prezentaciju na Internetu.

1992. Tim Berners-Lee fiziar koji radi u CERN-u (eneva, vicarska) razvija protokol za World Wide Web (WWW). U pokuaju spajanja znanstvenih dokumenata stvorio je Hypertext Markup Language (HTML).

1993. National Center for Supercomputing (NCSA) objavljuje inaicu Mosaic-a koji slui za pregled dokumenata raenih prema HTML standardu.

Iz prvih HTML dokumenata danas se dolo do HTML dokumenata koji u sebi ukljuuju slike, zvuk, video i dinamiki prikaz sadraja

2. Osnovne mrene usluge

2.1. Elektronika pota

Elektronika pota jedan je od najee rabljenih naina komunikacije meu korisnicima mree. E-mail omoguava primanje i slanje poruka, odgovaranje na pristigle poruke, snimanje poruke u posebnu datoteku i jo dosta toga, a bez potrebe za poznavanjem naina na koji poruka putuje od izvorita do odredita.

Kako protokol koji koristi e-mail radi tako da pohranjuje i proslijeuje primljeno, nitko ne moe jamiti isporuku poslanog maila. Mail koji se alje prvo se pohrani na lokalnom raunalu. Sustav elektronike pote provjerava je li adresa odredita razliita od lokalne adrese. Mail se tada proslijeuje drugom raunalu uz naznaku kako je mail proslijeen. Raunalo koje je primilo poruku sada ponavlja postupak. Postupak se nastavlja sve dok se mail uspjeno ne isporui ili dok ne doe do fatalne pogreke. Cijeli ovaj postupak moe trajati od nekoliko minuta do nekoliko dana. O ovome treba voditi rauna za sluaj kada se izmjena podataka izmeu dvaju udaljenih raunala namjerava organizirati iskljuivo mailom. Preporuljivo je osigurati barem jedan alternativni nain izmjene podataka.

2.1.1. Simple Mail Transfer Protocol (SMTP)

Ovaj protokol u nazivu ima rije jednostavan (jednostavan protokol za prijenos elektronike pote). Rije jednostavan (simple) odnosi se na protokol, a nikako ne na programe koji taj protokol trebaju primijeniti. Dva RFC-a definiraju SMTP izmeu dva raunala.

To su:

RFC 821 koji definira protokol za prijenos mail-a izmeu dva raunala

RFC 822 koji definira strukturu poruke

Sustav za rukovanje elektronikom potom (MHS mail handling system) opisuje komponente potrebne za podrku elektronike pote.

Sl. 1 Dijelovi sustava za rukovanje elektronikom potomSustav za rukovanje elektronikom potom (MHS) sastoji se od agenta za prijenos elektronike poruke MTA, dijela za pohranu ili potanskog sanduia (MS) i agenta korisnika (UA). MTA (poput sendmail servisa na UNIX strojevima) prima poruku koju mu alje UA (korisnik) i proslijeuje poruku drugom agentu za prijenos poruke (MTA). Kako MTA za SMTP prima svu potu preko porta 25, nije u mogunosti razlikovati poruke koje dolaze od drugog MTA i one koje mu alje korisnikov agent (UA). MS pohranjuje sve poruke namijenjene agentu za prijenos (MTA). UA ita poruke koje su pohranjene MS i alje poruke prema MTA.

Ako se agent korisnika izvrava na istom raunalu na kojem se nalazi i agent za prijenos, tada je dovoljno itati iz potanskog sanduia poruke kao obine datoteke. Ako se pak agent korisnika nalazi u mrenom okruenju, potreban mu je protokol koji e omoguiti itanje pote i upravljanje potanskim sanduiem.

Najpopularniji protokol za udaljeno itanje pote je Post Office Protocol version 3 (POP-3) kako je definirao RFC 1725. POP-3 prebacuje sve poruke klijentu i omoguava zadravanje poruka u potanskom sanduiu ili njihovo brisanje. Uobiajeno je izabrati brisanje uitanih poruka sa servera jer se u protivnom svaki put prilikom spajanja poruke sa servera ponovno uitavaju na klijenta. Ovakav je pristup zadovoljavajui ako korisnik ita potu uvijek sa istog raunala. Ako to nije sluaj treba koristiti Internet Mail Access Protocol (IMAP) definiran RFC-om 1732 koji opisuje verziju 4 IMAP-a. Prilikom uporabe IMAP-a mail server postaje i upravljaem baze poruka (mail database manager). Ovakav pristup omoguava upravljanje potanskim sanduiem sa razliitih radnih stanica, a bez gubitka informacije.

2.2. Prijavljivanje za udaljeni rad

Prijavljivanje za rad na udaljenim raunalima omoguavaju naredbe telnet i rlogin.

2.2.1. TELNET

TELNET je jedan od najstarijih i najsloenijih aplikacijskih protokola. Ovaj protokol osigurava emulaciju terminala preko mree. Iako telnet standard podrava mnoge emulacije terminala, najee je u upotrebi na Internetu vt100 emulacija. Telnet ukljuuje i standard za udaljenu prijavu rada (remote login). Telnet je ostao primarni protokol za udaljenu prijavu rada na server.

telnet je program koji podrava TELNET protokol preko TCP-a (Transmission Control Protocol).

Veza sa udaljenim raunalom uspostavlja se naredbom:

telnet [naziv raunala | IP adresa ]

Na ovaj nain uspostavlja se virtualni mreni terminal (Network Virtual Terminal NVT) koji omoguava udaljeni rad na odredinom raunalu.

Sl. 2 Ostvarivanje veze s udaljenim raunalom pomou telnet naredbe

Kako je telnet generiki TCP klijent to znai kako e serveru poslati sve to se utipka i to na TCP socket. Na zaslon raunala ispisat e sve to server vraa preko TCP socketa.

Telnet program bio je ugraivan u terminale. Terminali su u biti bili samo udaljena tipkovnica i zaslon. Svako radno mjesto otvaralo je svoj virtualni terminal na centralnom raunalu (obino UNIX stroju) te se tako virtualno ostvarivalo ono to mi danas podrazumijevamo pod mreom raunala. Danas se telnet uglavnom koristi za udaljenu administraciju raunala ili pregled pote ako se ele izbjei problemi koji su spomenuti prilikom opisivanja POP-3 protokola.

Evo kako izgleda tipian primjer komunikacije pomou telnet programa.

> telnet cs.st.com

Trying 192.168.1.33...

Connected to cs.st.com (192.168.1.33).

Escape character is '^]'.

Pozdrav svima

Pozdrav svima

Prekini

Prekini

^]

telnet> quitConnection closed.2.2.2. File Transfer Protocol FTP

Ovo je jedan od najee koritenih protokola za prijenos datoteka. Definiciju FTP-a daje RFC 959. Njegova neobinost je u tome to ostvaruje istovremeno dvije veze s raunalom. Prva veza koristi telnet kako bi prijavila korisnika za rad i obradila naredbe, a druga se veza koristi za proces prijenosa datoteka. Prva se veza dri stalno aktivnom, a druga se zatvara prilikom svakog prijenosa datoteke. FTP protokol omoguava uspostavu veze sa dva servera, a FTP tada slui kao posrednik za razmjenu datoteka izmeu ta dva servera. Novi FTP klijenti mogu se nai svakodnevno. Klijenti se razlikuju prema broju naredbi koje podravaju. Iako je FTP protokol orijentiran upisu naredbenih linija novi klijenti skrivaju tu njegovu prirodu pod krinkom lijepog grafikog suelja.

3. WWW - problemi projektiranja aplikacije

Veliki broj ljudi kree se Web-om (Internet mreom) ponukani grafikim sueljem i relativno jeftinim pristupom nebrojenoj koliini podataka svih vrsta. Mnoge tvrtke u korisnicima Web-a vide potencijalne kupce te u tom dijelu trita ele zauzeti to bolje pozicije. Web moe biti izvrstna infrastruktura za novu aplikaciju. Pod infrastrukturom podrazumijevam kako Internet osigurava zajedniki transportni mehanizam, a preko suelja Web preglednika daje dobro znano suelje aplikaciji.

Ovo je posebno tono za sluaj kada aplikacija mora omoguiti:

Unos narudbi od strane krajnjeg kupca preko on-line kataloga

Podrku korisnicima

Pregled najnovijih cjenika udaljenim komercijalistima

Prodaju proizvoda na meunarodnom tritu

Rad iz kue (pristup katalogu i izdavanje narudbe)

Za realizaciju bilo kojieg od ovih zahtjeva trebaju telekomunikacije. Za mnoge potrebno je programirati grafiko suelja (GUI Graphical User Interface), a za neke potrebno je prikazati sliku proizvoda.

Prije nego krenete u razvoj Web aplikacije samo zato jer je to neto moderno i zanimljivo razmotrite tradicionalne naine rjeavanja problema.

Dizajn Internet aplikacije je zahtjevan jer se prije svega radi o klijent-server arhitekturi aplikacije. Potrebno je dobro razluiti koji se dijelovi aplikacije mogu izvriti nezavisno od servera (posluitelja). Nadalje treba voditi rauna kako veina resursa nije pod vaom kontrolom. Kakva korist od aplikacije koja izgleda predivno, izraena je u najmodernijim alatima, ali nije dostupna korisniku kada mu to treba jer njegova veza prema Internetu nije stabilna ili ako korisnik nije ni sa kime u mogunosti izmijeniti podatke jer koristi protokol koji je toliko napredan da ga ne koristi nitko drugi. Najgori je sluaj kada je Web aplikacija u svom izvoenju toliko spora da ometa korisnika u radu. Zapamtite kako je aplikacija tu kako bi pomogla korisnicima u izvravanju njihovih svakodnevnih zadaa, a ne kako bi lijepo izgledala. Znajte kako postoje i korisnici koji nemaju optike veze prema Internetu i kako treba voditi rauna da se na lokalnoj mrei pored Internet/Intranet aplikacije vjerojatno izvode i druge aplikacije.

3.1. Projektiranje cjelokupne aplikacije

Klju uspjene izrade aplikacije uvijek je isti. Postupak projektiranja zapoinje definicijom zahtjeva. Na temelju zahtjeva izrauju se detaljne tehnike specifikacije sustava. Nakon izrade aplikacije preostaje jo testirati aplikaciju.

Korisniki zahtjevi trebaju sadravati opis funkcija sustava i oekivano optereenje. Nije svejedno hoe li aplikaciju istovremeno koristiti pet ili pet tisua korisnika. Isto tako, ne moe se rei kako je svejedno hoe li se u bazi nalaziti pet ili pet milijuna slogova. O ovim zahtjevima ovisit e izbor alata i nekih tehnikih rjeenja. Nije isplativo utroiti vrijeme na optimizaciju SQL upita ako se zna kako e u bazi postojati samo stotinjak slogova. Treba voditi rauna o pravilnom dimenzioniranju rjeenja koje se predlae. Nije razumno koristiti kamion nosivosti 20t za dostavu pizze na kunu adresu. Potrebno je dobro razmisliti o tome prije prijedloga ili izbora alata za izradu aplikacije. Kao primjer pretpostavit emo kako je korisnik postavio sljedei zahtjev pismenim putem:

Grupa Enterprise

Videoteka Star Trek

Poljudsko etalite b.b.

ZAHTJEV ZA IZRADOM PROGRAMSKE PODRKE

Aplikacija koju traimo sluit e za odabir DVD naslova iz posebne ponude koju ima naa videoteka preko Interneta. Cilj je omoguiti pojedincima uvid u izbor filmova koje nudimo po povoljnim cijenama kako bi se poboljala kvaliteta usluge. Najee jednom dnevno (na kraju radnog vremena) katalog iz videoteke treba uskladiti sa katalogom na webu. Potrebno je omoguiti brzo pojedinano prelistavanje ponuenih naslova. U posebnoj ponudi pojavit e se najvie 100 naslova. Katalog je namijenjen rasprodaji rabljenih DVD naslova. Aplikacija mora omoguiti slaganje naslova po naslovu, redatelju i cijeni. Katalog na webu mora biti dostupan i u tablinom obliku. Zadovoljavajue je pretpostaviti kako veina korisnika pristupa naim stranicama IE 5.5 ili viim preglednikom. Ovi podaci dobiveni su praenjem pristupa tvrtkinim stranicama.

Ovo je tipian zahtjev korisnika koji nije detaljan, ali korisnik od Vas oekuje aplikaciju koja e biti u zaokruena cjelina koja e mu pomoi u ostvarivanju cilja. U ovom sluaju aplikacija mora pomoi poboljanju prodaje DVD naslova iz posebne ponude korisnika. Iako aplikacija moe biti izraena prema svim pravilima struke to ne znai da e korisnik ispuniti svoje ciljeve samom uporabom aplikacije i to je potrebno naglasiti. Funkcije aplikacije nisu dovoljno detaljne za izradu koda, a specificirat emo ih tijekom izrade aplikacije. Iz zahtjeva je jasno kako je potrebno izraditi Internet aplikaciju. Idua faza je izbor tehnologija i alata potrebnih za izradu aplikacije.

3.2. Izbor tehnologija i alata

Jedna od stvari na koje se ne smije zaboraviti je stalna promjena funkcionalnosti web siteova. Mogu se ve uoiti promjene nastale odmakom od statikih prema dinamikim stranicama. Novu ulogu u izboru tehnologija i alata imaju i brojni preglednici koji se pojavljuju na platformama kao to su mobilni telefoni i runa raunala. Uzimajui u obzir trendove trita smatram kako bi se svaki web programer trebao usredotoiti na:

HTML 4.01

CSS

XHTML

XML i XSL

Skript jezik na strani servera i klijenta

Upravljanje podacima uporabom SQL-a

3.2.1. HTML 4.01

Ovo je vrlo znaajan web standard jer je to najnoviji standard, ali i standard koji je vrlo razliit od HTML 3.2 standarda.

U HTML 4 standardu formatiranje stranice mogue je izmjestiti iz HTML dokumenta u poseban Style Sheet. HTML 4.01 znaajan je i stoga to je XHTML 1.0 (eXtended Hyper Text Markup Language) idui HTML standard reformuliran kao XML aplikacija.

Uporabom HTML 4.01 standarda budue unapreivanje iz HTML u XHTML standard postaje vrlo jednostavan postupak. HTML se koristiti za izradu korisnikog suelja.

3.2.2. CSS - Cascading Style Sheets

Style (stil) odreuje nain prikaza elemenata HTML-a to je identino dijelu font tag (oznaka vrste slova) u HTML 3.2. Stilovi se uobiajeno pohranjuju u datotekama izdvojenim od HTML dokumenata. Ovakav nain organizacije omoguava promjenu izgleda stranica na webu jednostavnom ispravkom CSS datoteke. Prednost uporabe CSS datoteka naroito dolazi do uzraaja kod izmjena boja ili vrste slova vie stotina HTML dokumenata.

3.2.3. XHTML budunost HTML-a

XHTML 1.0 je najnoviji HTML standard kojeg je objavila institucija W3C (World Wide Web Consortium) koja odreuje pravila na webu. Ovaj standard postao je slubena preporuka u 26. sijenja 2000. Dobiveni status preporuke znai kako je specifikacija stabilna i kako je to sada novi web standard.

XHTML je reformulacija HTML 4.01 standarda u XML i moe se odmah poeti koristiti postojeim preglednicima uz potivanje nekoliko jednostavnih pravila.

3.2.4. XML alat za prijenos podataka

Vano je razumjeti kako XML nije zamijena za HTML. U razvoju web aplikacije XML se koristi za opis i prijenos podataka dok se HTML koristi za prikaz podataka.

Najbolji opis XML-a je: alat za prijenos informacija neovisan o programskoj podrci i sklopovlju (hardware and software independent tool). Vanost XML-a mogue je usporediti sa vanosti HTML-a u samim poecima weba. Pokazatelji upuuju kako e XML postati najee koriten alat za prijenos i rad s podacima na webu.

3.2.5. XSL alat za transformaciju podataka

Podatke je potrebno isporuiti u razliitim formatima, razliitim preglednicima i razliitim serverima. Kako bi se omoguila transformacija XML podataka W3C preporuio je XSL standard.

XSL moe transformirati XML datoteku u format prepoznatljiv za web preglednik. Jedan od tih formata je HTML. Jo jedan od danas popularnih formata je WML (jezik za oznaavanje koriten u mnogim mobilnim ureajima).

XSL omoguava dodavanje, brisanje, slaganje, testiranje, odluivanje o prikazu elemenata i jo mnogo toga.

3.2.6. Skript jezik na strani servera i klijenta

Kako bi se omoguila isporuka dinamikog sadraja na webu potrebno je izraditi skripte na strani servera dok za provjeru unosa podataka i neke lokalne obrade treba izraditi skripte na strani klijenta. Postoje mnogi skript jezici, a jedan od onih koji se mogu koristiti na obje strane je JavaScript.

3.2.7. Upravljanje podacima uporabom SQL-a

SQL (Structured Query Language) je standard za pristup bazama podataka kao to su SQL Server, Oracle, Sybase, Access itd. Znanje SQL-a potrebno je svima koji ele pohraniti, izmijeniti ili preuzeti podatke iz baze podataka.

Odluka

Sada imamo opu ideju sustava koji treba realizirati.

Za izradu suelja koristit emo HTML.

Za prijenos podataka iz kataloga i njihov prikaz koristit emo XML i XSL

Kontrolu unosa podataka potrebnih za pretragu kontrolirat e JavaScript

Neemo koristiti bazu podataka koja e kao rezultat upita davati XML datoteku, za sada. Kako bismo mogli izraditi traenu aplikaciju potrebno je savladati barem osnove alata koji e se koristiti pri izradi. Najbolje je zapoeti s HTML-om.

4. Osnove izrade web stranica

Jedino to je potrebno za izradu web stranice je jednostavan ureiva (editor) teksta. Postoje deseci razliitih alata za pomo pri izradi web stranica, ali za dobro razumijevanje HTML dokumenta najbolje je koristiti obian ureiva teksta ili neki od jednostavnijih ureivaa HTML dokumenata. Potrebno je oduprijeti se porivu uporabe naprednih alata za izradu stranica poput Front Page-a

4.1. Standard za izradu HTML dokumenta

Kada se novi web programeri susretnu po prvi put sa izradom HTML dokumenta jedna od stvari koju je teko prihvatiti je injenica kako e dokument u ureivau izgledati drukije u zavisnosti od koritenog web preglednika. Na webu nema mogunosti kontrole nad sustavom na kojem e se pregledavati izraeni dokument. Sustav moe biti Pocket PC sa monokromatskim zaslonom sa pozadinskom osvijetljenjem veliine 3x6 ina ili grafika radna stanica sa zaslonom veliine 21 in podeena na prikaz 16 milijuna boja. Kako bi osigurali kvalitetan dokument koji e zadrati svoje osobine na razliitim platformama mnogi autori prihvatili su standard koji se sastoji od dvije faze: faze izrade i faze pregledavanja.

Autor prvo zapoinje rad na dokumentu i prestaje kada je potrebno provjeriti izgled izraenog dijela dokumenta

Dokument koji je snimljen pregledava se pomou to vie razliitih web preglednika na to vie razliitih platformi. Ovakav pristup omoguava autoru uvid u interpretiranje ideja iz jezika za oznaavanje na razliitim ureajima.

Ako se otkrije razlika u prikazu koja bitno mijenja ideju zamiljenog dokumenta, dokument se dorauje i ponovno pregledava.

Ovo je evolucijski pristup izradi web stranica koji na jednostavan nain omoguava korekciju u ranoj fazi realizacije dokumenta. Broj preglednika i platformi bit e razliit u zavisnosti od ciljane skupine korisnika buduih dokumenata. U naem primjeru dovoljno je testirati izraene stranice na jednom pregledniku Internet Exploreru i to verzije 5.5 ili 6.0, jer je naruitelj odluio kako nije potrebno podrati ostale preglednike jer je najvjerojatniji izbor ciljane skupine korisnika upravo taj web preglednik.

4.2. Postavljanje strukture HTML-a

HTML je zasnovan na oznaavanju kao nainu prijenosa strukturnih instrukcija. Oznaavanje se sastoji od elemenata ili oznaka (tag-ova). Svaka oznaka (tag) prua informaciju koju e web preglednik koristiti za prezentaciju i prikaz HTML sadraj elementa. HTML dokument obavezno mora imati nastavak htm ili html. Ova dva nastavka daju do znanja web serveru i web pregledniku kako je dokument HTML tipa i kako ga treba tretirati kao takvog. HTML dokument moe se izraditi pomou jednostavnog ureivaa teksta poput notepad-a.

Evo jednostavnog primjera HTML dokumenta:

Naslov stranice

Ovo je moja prva stranica. Ovo je podebljani tekst

Primjer 1: MojaStranica.html

Objanjenje primjera 1.:

4.2.1. Element html

Sav sadraj HTML dokumenta, izuzev deklaracije tipa dokumenta mora se nai unutar elementa .... . Prva oznaka jezika za oznaavanje koja se koristi u bilo kojem HTML dokumentu treba biti , a posljednja oznaka mora biti .

4.2.2. Zaglavlje dokumenta element head

Nakon oznake HTML, slijede podaci koji ine zaglavlje dokumenta. Ovaj dio sadravat e opisne informacije o dokumentu, kao to su naslov i metapodaci. Metapodaci su podaci koji opisuju podatke i sadre informacije poput kljunih rijei, imena autora dokumenta ili bilo koji drugi podatak koji nije sadran u samom dokumentu. Ove informacije ne prikazuju se u pregledniku. Unutar elementa svaki dokument mora imati element .

4.2.3. Naslov element title

Tekst umetnut izmeu oznaka ... se pojavljuje u naslovu prozora web preglednika nakon uitavanja html dokumenta. Za razliku od bilo kojeg drugog teksta unutar html dokumenta nije mogue postaviti bilo kakvu oznaku za formatiranje teksta unutar ovih oznaka.

4.2.4. Tijelo dokumenta element body

Kao to samo ime kae, tijelo dokumenta nosi sadraj dokumenta. Tijelo dokumenta moe se smatrati stvarnim sadrajem knjige u odnosu na omot knjige. Sadraj dokumenta mora biti smjeten izmeu oznaka .... Element body otvara se odmah iza zavrnog elementa head, a ostaje otvoren sve do zavrnog elementa html.

Ako se tekst smjesti izmeu oznaka i bit e u pregledniku prikazan podebljano.

Ako se dokument MojaStranica.html uita u web preglednik kao to je IE dobit e se slijedei rezultat:

Sl 3. Primjer 1: MojaStranica.html

Ukratko:

HTML oznake koriste se kako bismo oznaili HTML elemente

HTML oznake okruene su dvama znakovima < i >

HTML oznake dolaze u paru kao npr. i

Prva oznaka u paru naziva se poetnom oznakom (start tag), a druga oznaka u paru naziva se krajnjom oznakom (end tag)

Tekst izmeu poetne i krajnje oznake naziva se sadrajem elementa.

HTML oznake nisu osjetljive na uporabu velikih i malih slova, to znai da se interpretira identino kao i .Iako je HTML vrlo tolerantan na pogreke treba voditi rauna o prijelazu sa HTML 4.01 standarda na XHTML 1.0 standard. Kod pisanja HTML dokumenta stoga treba voditi rauna o nekoliko jednostavnih pravila koja e omoguiti bezbolan prijelaz na novi Internet standard:XHTML elementi moraju biti pravilno ugnjeeniXHTML moraju biti ispravno formiraniOznake moraju biti napisane malim slovimaSvaki XHTML element mora biti zatvoren4.3. Ureivanje sadraja dokumenta pomou naslovaGotovo svaki dokument moe biti razloen na blokove teksta ili druge informacije predoene ilustracijama. Kako bi bilo mogue organizirati tekst mogue je izabrati razliite naslove. Naslovi su definirani u est razina od do . H1 ukazuje na najznaajniju informaciju, a h6 na informaciju s najmanjim znaajem.Naslovi h1...h6Koristite oznake naslova samo za naslove, a ne kako biste prikazali neki dio teksta poveano. Za tu svrhu koristite druge oznake.Ovo je naslov 1 h1 Ovo je naslov 2 h2 Ovo je naslov 3 h3 Ovo je naslov 4 h4 Ovo je naslov 5 h5 Ovo je naslov 6 h6Ako se dokument Naslovi.html uita u web preglednik kao to je IE dobit e se slijedei rezultat:Sl 4. Primjer 2: Naslovi.htmlOdlomak paragraphTekst koji ima naslove ima i odlomke. Odlomak se prema novoj HTML specifikaciji definira oznakom . Iako zatvaranje oznake nije obavezno treba je koristiti kako bi se zadrala pravila definirana XHTML-om Odlomci Ovo je odlomak (paragraph). I ovo je odlomak. Ovo je odlomak. Odlomci se definiraju p oznakom. Primjer 3: Odlomci.htmlAko se dokument Odlomci.html uita u web preglednik kao to je IE dobit e se sljedei rezultat:Sl 5. Primjer 3: Odlomci.html4.4. Formatiranje tekstaIako naizgled ideja o formatiranju teksta nije sukladna ideji o HTML-u kao standardu koji daje samo strukturu dokumenta ipak se moe vidjeti kako se jo uvijek govori samo o strukturi, a ne prezenataciji dokumenta.Osnovno formatiranje teksta je grupiranje reenica u odlomke (paragraph). Odlomkom se obino smatra dio teksta koji opisuje meusobno povezanu grupu informacija.4.4.1. Logiki stilovi4.4.1.1. Naglaavanje em elementU svakom tekstu postoje neke rijei koje je potrebno posebno naglasiti. HTML moe osigurati naglaavanje pojedinih rijei u tekstu uporabom elementa .... Tradicionalno se naglaavanje realizira uporabom kurziva (iskoenih slova). 4.4.1.2. Pojaano naglaavanje strong elementKao i u stvarnom ivotu, u naglaavanju postoji gradacija (stupnjevanje). Dio informacije moe biti vaan, ali drugi dio moe biti vrlo vaan. Jai naglasak moe se dodijeliti dijelu teksta u html dokumentu uporabom elementa . Tradicionalno se pojaano naglaavanje realizira uporabom podebljanih slova.4.4.1.3. Struktura za tehnike dokumente code, kbd, var, samp, dfn, cite elementiTekst koji predstavlja raunalni kod moe se posebno naglasiti ako se koristi element . Za naglaavanje varijabli ili drugih argumenata programa moe se koristiti element. Za prikaz teksta koji bi trebao unijeti korisnik rabi se element . Ovaj element posebno je dobro koristiti ako se piu upute za korisnika. ... element prikazuje primjer izlaza iz programa ili skripti. element naglaava definicije rijei ili fraza. element oznaava da je obiljeeni tekst citat ili referenca na neki drugi rad.Vano je napomenuti kako svi web preglednici ne podravaju sve ove elemente, a i ako ih podravaju ne znai da e nain na koji ih tretiraju biti identian. Vano je znati kako ovi elementi izdvajaju odreeni tekst dozvoljavajui korisniku razlikovanje oznaenih primjera od ostatka teksta.4.4.1.4. Preformatirani tekst pre elementKada je u tekstu koji se prikazuje na web stranici potrebno zadrati razmake i poetak novog retka, bez obzira na mogunost prikaza dva retka u jednom koristi se oznaka. Ova oznaka pregledniku kae kako je tekst koji slijedi u tono onakvom obliku u kakvom ga treba prikazati. Najbolje se uinak ove oznake vidi kada se prikae isti tekst sa pre oznakom i bez nje. Prikaz teksta bez pre oznake U glavi nestrunjakaPostoje mnoge mogunosti.U glavi strunjakaima ih malo. Primjer 4: Prikaz teksta bez pre oznake.htmlSl 6. Primjer 4: Prikaz teksta bez pre oznake.html Prikaz teksta sa pre oznakom U glavi nestrunjakaPostoje mnoge mogunosti.U glavi strunjakaima ih malo. Primjer 5: Prikaz teksta sa pre oznakom.htmlSl 7. Primjer 5: Prikaz teksta sa pre oznakom.html4.4.2. Fiziki stilovi4.4.2.1. Podebljana slova b oznakaOva je oznaka vrlo poznata svima koji su ikada radili neku stranicu, a koristi se za prikaz teksta koji se u pregledniku prikazuje masnim slovima. Primjer uporabe ove oznake imali smo u Primjeru 1.4.4.2.2. Kosa slova i oznakaOva oznaka znak je pregledniku za prikaz teksta u kurzivu.4.5. Liste ul, ol, dl, dt, dd i li oznakeListe se u HTML-u pojavljuju u tri oblika:neureena listaureena listadefinicijska listaPrve dvije, neureena i ureena, imaju samo po dva elementa: LIST - ili , respektivno i element LIST ITEM - Svakoj pojedinoj stavci koja se ukljuuje u listu, dodjeljuje se oznaka .4.5.1. Neureena lista ul oznakaNeureena lista je ona u kojoj raspored stavki koje ona nabraja nije bitan, iako se same stavke prikazuju onim redom kojim su pobrojane u izvornom dokumentu. Ideja je omoguiti izdvajanje skupa stavki ili ideja. Veina preglednika neureenu listu prikazuje sa tokom ispred svake stavke. Neureena lista Nazivi raunala u mrei SaturnMarsNeptunJupiter Primjer 6: Neureena lista.htmlSl 7. Primjer 6: Neureena lista.html4.5.2. Ureena lista ol oznakaUreena lista je ona koja zavisi od redoslijeda kojim su prikazane stavke liste. Primjerice, faze u izradi aplikacije ili koraci prilikom testiranja smjetaju se u ureenu listu. Ureena lista Postupak testiranja Provjera konvencija kodiranjaTest funkcionalnostiIzrada izvjea o stanju modulaDonoenje odluke o objavi verzije Primjer 7: Ureena lista.htmlSl 7. Primjer 7: Ureena lista.htmlUporabom Type atributa mogue je definirati razliite oblike ureene i neureene liste.Ureena lista:Atribut:Vrijednosti:Napomena:type1AaIIPrema novom standardu ovi se atributi ne koriste Neureena lista:Atribut:Vrijednosti:Napomena:typecirclediscsquarePrema novom standardu ovi se atributi ne koriste Uporaba ovih atributa rezultira slijedeim izgledom lista:Ureena lista razliiti primjeri Neureena lista razliiti primjeri4.5.3. Definicijska lista dl dt i dd oznakeDefinicijske liste razlikuju se od ureenih i neureenih lista samo po tome to se svaka stavka sastoji od dva dijela: definicijskog termina i definicijskog opisa.Lista se otvara oznakom definicijske liste . Svaka definicija mora imati i termin i opis. Definicijska lista oznake dl, dt i dd Rjenik kratica RAM Random Access Memory (eng) BIOS Basic Input Output System (eng) Primjer 8: Definicijska lista.htmlU pregledniku to izgleda ovako:Sl 8. Primjer 8: Definicijska lista.htmlNije nuno koristiti definicijsku listu samo za aplikacije tipa rjenika. Definicijska lista moe se rabiti bilo kada, ako je potrebno postaviti tekst koji je povezan sa nekim kratkim terminom ili idejom.4.5.4. Gnjeenje listaDozvoljeno je definirati listu unutar druge liste. Nije bitno koji se tip liste ugnjeuje u definiranu listu. Gnjeenje lista Ugnjeena lista: Prirodni sok Borovnica Vinja aj Crni aj Zeleni aj Mlijeko Primjer 9: Gnjezdjenje lista.htmlU pregledniku to izgleda ovako:Sl 8. Primjer 8: Definicijska lista.html4.5.5. Pregled oznaka za listeNN: Netscape, IE: Internet Explorer, W3C: Web StandardPoetna oznakaNNIEW3CNamjena3.03.03.2Definira ureenu listu3.03.03.2Definira neureenu listu3.03.03.2Definira element liste3.03.03.23.03.03.2Definira definicijski termin3.03.03.2Definira definicijski opisStari standard. Koristiti Stari standard. Koristiti 4.6. Specijalni znakovi u HTML-uNeki znakovi imaju posebno znaenje u HTML-u, poput znaka za manje (