Završni rad

SVEUČILIŠTE U MOSTARU
FAKULTET STROJARSTVA I RAČUNARSTVA
ZAVRŠNI RAD
Web Škola (HTML, CSS, JavaScript, PHP)
Nermin Marić
840/RR
Mostar, listopad 2013
SVEUČILIŠTE U MOSTARU FAKULTET STROJARSTVA I
RAČUNARSTVA
Prediplomski studij
Smjer: Računarstvo
Ime: Nermin
Prezime: Marić
Br. indeksa: 840/RR
ZADATAK ZAVRŠNOG RADA
Naslov: Web Škola ( HTML, CSS, JavaScript, PHP)
Prijava rada: 01.10.2013.
Rok za predaju: 30.11.2013.
Rad predan: 29.10.2013.
Mentor:
_________________________
prof. dr. sc. Mirjana Bonković
IZJAVA
Izjavljujem da sam ovaj završni rad uradio samostalno uz pomoć navedene literature i uz
konzultacije s mentoricom prof. dr. sc. Mirjanom Bonković kojoj se ovim putem posebno
zahvaljujem.
Nermin Marić
_____________
SADRŢAJ
1.
2.
UVOD ............................................................................................................................1
1.1
Web stranice .............................................................................................................1
1.2
Internet preglednik ...................................................................................................1
1.3
Web Server...............................................................................................................2
WEB DEVELOPMENT .................................................................................................3
2.1
HTML i CSS ............................................................................................................4
2.2
JavaScript (JS)..........................................................................................................7
2.3
PHP ..........................................................................................................................9
2.3.1
3.
PHP Framework .............................................................................................. 10
PRAKTIČNI DIO ZAVRŠNOG RADA ....................................................................... 11
3.1
Početna stranica ...................................................................................................... 11
3.2
Zaglavlje ................................................................................................................ 15
3.3
Navigacija .............................................................................................................. 19
3.4
Stranice i podnožje ................................................................................................. 20
3.5
Online editor „TryIT“ ............................................................................................. 21
4.
ZAKLJUČAK............................................................................................................... 23
5.
LITERATURA ............................................................................................................. 24
6.
SLIKE .......................................................................................................................... 25
7.
KRATICE .................................................................................................................... 26
1. UVOD
1.1
Web stranice
Internetke stranice ili web stranice se sastoje od niza HTML/xHTML dokumenata kojima se
može pristupiti uz pomoć web preglednika. Web je jedan od servisa Interneta, koji upravo
služi za prezentaciju web stranica pomoću HTTP protokola.
Web stranica (web page) je HTML dokument koju omogućava prezentaciju teksta i
poveznica, a dostupan je preko sve URL (web) adrese. Na web stranici se osim teksta mogu
prikazati i multimedijski elementi (resursi) kao što su slike u digitalnom formatu, flash i
shockwave animacije, zvuk, video i slično.
Web stranice (web site) su kolekcija Internetskih resursa – HTML dokumenata,
multimedijskih sadržaja, podataka i skripti. Složeniji sustavi web stranica (npr. Web shop)
čine aplikaciju baziranu na posebnom hardveru i softveru.
Dokumentima unutar web stranica se pristupa preko zajedničkog korijenskog URL-a,
odnosno web adrese, koja se često naziva i homepage. Svi dokumenti su najčešće spremljeni
na istom web serveru. Poveznice unutar HTML dokumenata povezuju dokumente u ureĎenu
hijerarhijsku strukturu i time odreĎuje način na koji posjetitelj doživljava sadržaj stranica.
Složenije web stranice koriste web aplikacije pisane u nekom od programskih jezika (PHP,
ASP, JSP,...) za stvaranje sadržaja spajanjem pripremljenih grafičkih predložaka i sadržaja iz
baze podataka (na poslužiteljskoj strani) i neki skriptni jezik poput JavaScript-a ili VBScript-a
( na klijentskoj strani).
1.2
Internet preglednik
Internetski preglednik (web preglednik, web browser, Internet browser) je program koji
korisniku omogućuje pregled web stranica i multimedijalnih sadržaja vezanih uz njih.
Najpopularniji preglednici danas su: Google Chrome, Firefox, Opera, Safari. Svi navedeni su
grafički programi (tj. osim teksta mogu prikazivati i vizualne sadržaje).
1
Osim grafičkih postoje i tekstualni preglednici koji mogu prikazivati samo tekst (npr. Links i
lynx) i specijalizirani govorni preglednici kakve mogu koristiti slijepe osobe.
HTML kao meta-jezik kojim se hipertekstualni dokumenti mogu opisivati je izmislio Tim
Berners-Lee (djelatnik CERN-a) 1990./1991. godine. Prvi preglednici su bili strogo
tekstualni, a veliku promjenu je 1993. godine donio NCSA Mosaic koji je izvorno bio UNIX
aplikacija ali je ubrzo prenijet i na druge operativne sustave.
Svaki Internetski preglednik je interpreter. Dakle, stranica je pisana u kodu koji preglednik
nakon toga interpretira kao nešto svakome razumljivo.
1.3
Web Server
Web server je računalo na kojem se nalaze web stranice. Kako je pristup svakom računalu
odreĎen portovima (ulazima) koji su predstavljeni brojevima, tako je i pristup web serveru
odreĎen portom, port za pristup web serveru je 80. Svaki server ima IP adresu, tako da kada
se neka stranica posjećuje, odnosno neki server, zapravo se posjećuje adrea kao
98.34.65.243:80, gdje broj 80 govori da se radi o web serveru. Prostor na web serveru se
može zakupiti kod davatelja usluga hostinga (posluživanja) stranica.
Dakle, prilikom izraĎivanja stranica, da bi one bile dostupne na Internetu, potrebno je da se
smjeste na neki web server. Web serveri obično dolaze u vidu clustera s velikim centrima
podataka (en. data center). Naravno moguće je i od običnog računala napraviti web server, no
to nije tako dobro rješenje iz nekoliko razloga. Kao prvo, web stranice smještene na serveru
moraju biti stalno dostupne, što znači da računalo mora biti stalno uključeno i spojeno na
Internet. TakoĎer je potrebno imati statičku IP adresu (iako postoje odreĎene „tehnike“ za
instalaciju servera na računalo koje nema statički IP). Web server bi trebao imati stalnu IP
adresu, kako bi mogli regitrirati domenu i tu domenu usmjeriti na dotični IP. Na taj način
posjetitelji ne moraju pamtiti brojeve (IP) servera već samo adresu.
2
2. WEB DEVELOPMENT
Web development je engleski naziv za sveukupan rad koji je potrebno uložiti za razvoj web
stranice za Internet (World Wide Web) ili za intranet (privatnu mrežu). Web development ili
razvoj web stranica se proteže od pravljenje najednostavnijih jednostraničnih, statičkih,
stranica samo od teksta pa do najsloženijih Internet aplikacija za web.
Web development se može podijeliti u mnogo kategorija, ali najčešća i najosnovnija podjela
je na:

Client side coding – kod koji se izvršava unutar korisnikovog pretraživača (klijenta)

Server side coding – kod se izvršava na serveru
Client side coding je kod kao HTML koji se izvršava u samom pretraživaču korisnika,
lokalno, dok Server side coding kod se izvršava na web serveru koji generira odgovarajuću
HTML stranicu koja se pošalje korisniku.
Client side coding:
 AJAX (Asynchronus JavaScript) [Asinkroni JavaScript] pruža nove metode korištenja
JS-a i drugih jezika kako bi poboljšao korisničko iskustvo.
 Flash – sveprisutni dodatak pretraživačima.
 JavaScript (JS) sveprisutna platforma za pravljenje i pružanje bogatih web aplikacija
koje mogu raditi na mnogim ureĎajima.
 jQuery JS biblioteka dizajnirana da olakša i ubrza client-side kodiranje HTML-a.
 Microsoft Silverlight – Microsoft-ov dodatak pretraživačima koji omogućuje
animacije, vektorsku grafiku i video visoke rezolucije, programirane korištenjem
XAML i .NET programskih jezika.
 HTML 5 i CSS 3 – najnoviji predloženi HTML standard kombiniran sa najnovijim
predloženim CSS standardom, podržava mnoge client-side funkcionalnosti koje
pružaju drugi programski okviri kao što su Flash i Silverlight.
3
Server side coding:
 ASP - vlasništvo Microsoft-a
 ActiveVFP – otvoreni kod
 CSP – server-side ANSI C
 ColdFusion – vlasništvo Adobe-a (prethodno poznato kao Macromedia, a prije toga
Allaire).
 CGI
 Erlang
 Groovy
 Java
 Lotus Domino
 Node.js
 Perl – otvoreni kod
 PHP – otvoreni kod
 Python – otvoreni kod
 Ruby – otvoreni kod
 WebDNA – vlasništvo WSC-a
 Websphere – vlasništvo IBM-a
 .NET – vlasništvo Microsoft-a
2.1
HTML i CSS
HTML je kratica za HyperText Markup Language, što znači prezentacijski jezik za izradu
web stranica. Hipertekst dokument stvara se pomoću HTML jezika. HTML jezikom oblikuje
se sadržaj i stvaraju se hiperveze hipertext dokumenta. HTML je jednostavan za uporabu i
lako se uči, što je jedan od razloga njegove opće prihvaćenosti i popularnosti. Svoju raširenost
zahvaljuje jednostavnosti i tome što je od početka bio zamišljen kao besplatan i tako dostupan
svima. Prikaz hipertekst dokumenta omogućuje web preglednik. Temeljna zadaća HTML
jezika jest uputiti web preglednik kako prikazati hipertext dokument. Pri tome se nastoji da taj
dokument izgleda jednako bez obzira o kojemu je web pregledniku, računalu i operacijskom
sustavu riječ. HTML nije programski jezik niti su ljudi koji ga koriste programeri. Njime ne
možemo izvršiti nikakvu zadaću, pa čak ni najjednostavniju operaciju zbrajanja ili
4
oduzimanja dvaju cijelih brojeva. On služi samo za opis naših hipertekstualnih dokumenata.
Html datoteke su zapravo obične tekstualne datoteke, ekstenzija im je .html ili .htm. Osnovni
graĎevni element svake stranice su znakovi (tags) koji opisuju kako će se nešto prikazati u
web pregledniku. Povezice unutar HTML dokumenata povezuju dokumente u ureĎenu
hijerarhijsku strukturu i time odreĎuju način na koji posjetitelj doživljava sadržaj stranica.
Prva verzija HTML jezika objavljena je 1993. godine. U to je vrijeme bio još poprilično
ograničen, pa nije bilo moguće čak ni dodati slike u HTML dokumente. Razvoj HTML-a
nastavljen je prvom "imenovanom" verzijom – 2.0, no ni ona nije postala standardom.
U ožujku 1995. W3C objavljuje verziju 3.0, koja donosi mogućnosti definicije tablica. Daljnji
razvoj ove verzije HTML-a označilo je prihvaćanje "specifičnih" oznaka podržanih u tada
najvećim i najprihvaćenijim web preglednicima. Tako su nastale mnoge duplikacije, pa je
postojalo više oznaka koje su imale istu funkciju. Podebljani text, primjerice bilo je moguće
definirati oznakom <b>, ali i oznakom <strong> .
HTML4 predstavljen je u prosincu 1997., nastavio je s prihvaćanjem oznaka nametnutih od
strane proizvoĎača različitih web preglednika, no istovremeno je pokrenuto i "čišćenje"
standarda proglašavanje nekih od njih suvišnim. Manje promjene u specifikaciji ovog
standarda predstavljene su u prosincu 1999., kada je predstavljena konačna verzija ovog
jezika HTML4.01.
Svaki HTML dokument sastoji se od osnovnih graĎevnih blokova - HTML elemenata. Svaki,
pak, HTML element sastoji se od para HTML oznaki (engl. tag). TakoĎer, svaki element
može imati i atribute kojim se definiraju svojstva tog elementa. Na samom početku HTML
dokumenta preporučljivo je postaviti <!DOCTYPE> element, kojim se označava DTD (engl.
Document Type Declaration), čime se definira točna inačica standarda koja se koristi za
izradu HTML dokumenta. Nakon <!DOCTYPE> elementa, <html> elementom označava se
početak HTML dokumenta. Unutar <html> elementa nalaze se i <head> element te <body>
element. <head> element predstavlja zaglavlje HTML dokumenta u kojemu se najčešće
specificiraju jezične značajke HTML dokumenta kao i sam naslov (engl. title) stranice.
Pomoću odreĎenih HTML elemenata unutar zaglavlja dodaju se i stilska obilježja stranice,
bila ona direktno ugraĎena (engl. embedded) ili dodana kao referenca na vanjsku CSS
datoteku. Često se unutar zaglavlja još definiraju i skripte kreirane u JavaScript jeziku. U
<body> elementu kreira se sadržaj HTML dokumenta, odnosno, stranice koju on reprezentira.
5
Svaka HTML oznaka (koja u paru kreira HTML element) počinje znakom < (manje od), a
završava znakom > (više od). Zatvarajuća HTML oznaka kreira se na isti način kao i
otvarajuća, ali se prije završnog znaka > dodaje i kosa crta / (engl. slash).
Slika 1 Primjer jednostavnog HTML koda
CSS je kratica od (eng.) Cascading Style Sheets. Radi se stilskom jeziku, koji se rabi za opis
prezentacije dokumenta napisanog pomoću markup (HTML) jezika.
Kako se web razvijao, prvotno su u HTML ubacivani elementi za definiciju prezentacije (npr.
tag <font>), ali je dovoljno brzo uočena potreba za stilskim jezikom koji će HTML osloboditi
potrebe prikazivanja sadržaja (što je prvenstvena namjena HTML-a) i njegovog oblikovanja
(čemu danas služi CSS). Drugim riječima, stil definira kako prikazati HTML elemente. CSSom se ureĎuje sam izgled i raspored stranice.
CSS možemo pisati unutar same HTML stranice, na dva načina:

kao stilove u zaglavlju HTML dokumenta (tj. izmeĎu <style> i </style> elementa)
Slika 2 Primjer pisanja stila unutar style tagova u zaglavlju

unutar samih HTML tagova, npr. <p style="color: magenta;">Neki tekst</p> što daje:
Neki tekst
6
ili ga možemo definirati u posebnom dokumentu i koristiti pomoću poziva:

<link rel="stylesheet" href="dizajn.css" type="text/css">
ili na sljedeći način:
Slika 3 Pozivanje vanjskog stila preko @import
2.2
JavaScript (JS)
JavaScript je objektno orjentisan programski jezik namenjen dinamičkoj izradi web stranica.
Koristi se u mnogim web stranicama za poboljšanje funkcionalnosti, validaciju formi,
detekciju browsera, asinkronu komunikaciju sa serverom i još mnogo toga. Razvijen je 1995.
godine od strane Netscape-a i koristi se kao client-side internet programski jezik. To znači da
se izvršava na korisnikovom računalu u samom browser-u čime se postiže veća brzina rada,
web aplikacije odgovaraju brže na korisnikove akcije i samim tim se postiže veća efikasnost.
Predstavlja skripting jezik, što u prijvodu znači lagan programski jezik.
JavaScript se u HTML dokument može dodati na dva načina. Pisanjem u sami HTML kod ili
pisanjem u zasebnu datoteku (sa ekstenzijom .js) koju zatim pozivamo u HTML dokumentu.
Obadva načina su pravila i ne postoji razlika u radu skripti. Pozivanje vanjskog fajla je dobro
u slučaju kada se ista skripta koristi na više stranica.
Browser čita HTML stranicu i prikazuje elemente redom kako dolazi do njih (interpreter),
kada doĎe do JS skripte u kodu, prvo se izvrši kod skripte pa se nastavlja prikazivanje ostalih
elemenata html-a.
Slika 4 Primjer pozivanja javaskript koda iz vanjske datoteke
7
Slika 5 Primjer pisanja JS u HTML-u
Postoje različiti načini pozivanja JavaScript koda, tj. različita mjesta gdje se on može smjestiti
u kodu stranice. Prvi način je da se JavaScript kod stavi u zaglavlju, unutar <head> i </head>
tagova, dok je drugi način da se piše unutar <body> </body> tagova tj. tijela stranice. Kod
prvog načina skripta se učitava odma, prije učitavanja čitave stranice, dok se kod drugog
načina skripta izvršava čim brovser naiĎe na nju. Moguće je postaviti neograničen broj skripti
u stranicu, bilo da se radi o prvom ili o drugom načinu.
JavaScrip je case-sensitiv, što znači da je osjetljiv na velika i mala slova, to znači da varijabla
naziva test nije ista kao TEST ili Test i sl. Zbog toga je veoma važno paziti na velika i mala
slova.
JS za razliku od nekih drugih programskih jezike na zahtijeva specificiranje tipa varijable, to
čak nije ni dozvoljeno. Ista varijabla može se koristiti za vrijednosti različitih tipova podataka,
kao što su nizovi podataka, tj string (Hello world!), cijeli brojevi (42), vrijednost realnog broja
(3,14) ili logičke vrijednosti (true / false). JS interpreter automatski konvertira tip podatka koji
se nalazi u varijabli. Varijable se deklariraju ključnom riječi var.
Slika 6 Primjer deklariranja varijabli u JS
8
Kao i u većini ostalih jezika i u JavaScript-u postoje biblioteke. Biblioteka predstavlja skup
gotovih funkcija koje imaju širu primjenu i time omogućava korisniku lakše programiranje.
Primjenjuju se kod olakšavanja i ubrzavanja programiranja, proširivanja funkcionalnosti
pomoću gotovoih komponenti itd. Neke od popularnijih JavaScript biblioteka su jQuery,
MooTools, Prototype i mnoge druge.
2.3
PHP
PHP (rekursivni akronym i backronym za „PHP: Hypertext Preprocessor“, prije „Personal
Home Page Tools“) je jedan programski jezik koji se orjentira po C i Perl sintaksi, namijenjen
prvenstveno programiranju dinamičnih web stranica. PHP je kao slobodni softver distribuiran
pod PHP licensnim uvjetima. PHP se ističe širokom podrškom raznih baza podataka i internet
protokola kao i raspoloživosti brojnih programerskih knjižnica.
Prve verzije su se zvale PHP/FI (Personal Home Page Tools/Forms Interpreter) i bile su skup
perl skripti, koje je razvio Rasmus Lerdorf za brojanje posjeta na svojoj privatnoj web
stranici. To je bilo negdje oko 1995. godine.
Poslije, kada je nastala potreba za više funkcija razvio je novu verziju u programskom jeziku
C, koja je mogla raditi s bazama podataka i omogućila je korisnicima programirati
jednostavne dinamične web stranice. Rasmus je odlučio objaviti PHP kao slobodni softver,
tako da ga svatko može poboljšati.
Danas je PHP jedan od najzastupljenijih programskih jezika za programiranje web aplikacija.
Vrline su mu jer je jako sličan C-u, lako se pamti, i lako se pamti svi većina kodova.
1997. godine PHP/FI 2.0 (druga inačica) bila je kult za nekoliko tisuća korisnika širom
svijeta. Oko 50.000 webstranica imalo je potpis instalacije 'PHP/FI 2.0', što znači da je onda
1% svih web stranica na internetu koristilo PHP. Iako su i drugi korisnici doprinijeli izvornom
kodu, bio je to projekt jedne jedine osobe.
Ukratko nakon službenog izdanja 'PHP/FI 2.0'-a u studenom `97, bio je zamijenjen prvom alfa
verzijom PHP-a 3 (PHP3).
9

PHP3

PHP4

PHP5
Sintaksa prve verzije je bila slična perlu, ali jednostavnija i skučena. Ipak je imala varijable
kao perl, automatsku interpretaciju varijabli web formi i u HTML-u ukorijenjenu sintaksu.
2.3.1 PHP Framework
PHP je jedan od najčešćih skriptnih jezika koji se koriste iz mnogo opravdanih razloga.
Veoma je fleksibilan i lagan za korištenje. Dogaša se da je kodiranje u PHP-u često
repetativno i dosadno. Upravo tu dolazi PHP framewoek, koji će poboljšati promociju i brže
razvijanje aplikacije. Što štedi vrijeme i takoĎe pomaže u razvijanju aplikacija koje su
stabilnije i smanjuje količinu nepotrebnog kodiranja. Ovo je jedan od glavnih razloga zašto
mnogi developeri koriste framework, takoĎer je dobro i za početnike. Umjesto trošenja
vremena na pisanje koda koji se ponavlja, dobiva se više vremena za kreiranje web aplikacije.
Postoji više razloga zašto bi trebali koristiti PHP framework, prvi razlog je ubrzan proces
razvijanja aplikacija, korištenje istog koda u sličnim projektima, što značajno štedi vrijeme i
trud. Framework omogućava korištenje predefiniranih modela za obavljanje zadataka koji se
šesto ponavljaju. Na ovaj način moguće je više se koncetrirati na samo razvijanje aplikacije,
umjesto pravljenja osnova za razvijanje aplikacije. Još jedan veliki razlog zbog kojeg se
koristi framework a to je stabilnost. Jednostavnost je jedan od najvećih aduta PHP-a i zbog
toga mnogi preferiraju korištenje tog skriptnog jezika. Mešutim upravo to moće biti i najveća
mana, za početnike je savršen jer je jednostavan za koristiti, ali je lako moguće da se piše
pogrešan kod, tako da PHP aplikacija funkcionira, ali slučajno je otvorena neka sigurnosna
rupa u kodu. To može dodatno da izloži aplikaciju napadima. Veoma je važno imati na umu
koliko je PHP fleksibilan i da dopušta velik nivo slobode. Važno je pronaći sve propuste i
mane u kodu i ispraviti ih.
Za početnike i iskusne programere, framework će ubrzati cijeli proces programiranja i
maksimalno eliminirati šanse za greške u kodu.
10
3. PRAKTIČNI DIO ZAVRŠNOG RADA
Za praktični dio rada sam napravio stranicu web škole, koja korisnicima koji je posjete pruža
materijale za učenje HTML-a, CSS-a, JavaScript-a i PHP-a. Na stranici se takoĎer nalazi
online editor u kojem mogu pisati HTML kod i vidjeti u realnom vremenu kako izgleda dio
koda koji su pisali.
3.1
Početna stranica
U ovom dijelu završnog rada ću proći kroz dijelove kodova PHP datoteka koje pokreću ovu
stranicu. Kako i pretraživač kada pristupi stranici prvu datoteku koju otvori je index, pa ću i ja
tako početi sa kodom te stranice.
Prve linije datoteke index.php, koja je ujedno početna i glavna stranica, čini funkcija za
provjeru browsera. Zadatk ove funkcije je da provjeri s kojim browserom ili pretraživačem
korisnik pristupa stranici, ako se radi o Internet Exploreru (IE) onda se otvori stranica
„noIE.php“, koja korisnika upozorava da stranica ne radi kako treba u tom pretraživaču, u
protivnom se nastavi normalno učitavati stranica.
Slika 7 Funkcija provjere browsera
11
Funkcija u php se piše iza klučne riječi „function“, zatim se piše naziv funkcije, u ovom
slučaju „get_user_browser()“ , funkcija ne prima nikakve parametre, a kao povratni podatak
vraća točno (true) ako se radi o IE odnosno netočno (false) ako se radi o bilo kojem drugom
pretraživaču. U varijablu „$u_agent“ spremamo podatak o kojem se agentu radi, tj. o kojem
pretraživaču je riječ. Zatim korištenjem funkcije „preg_match“ usporedimo varijablu
$u_agent sa stringom '/MSIE/i' i ako su stringovi jednaki onda se radi o IE i rezultat funkcije
get_user_browser je true.
Razlog zašto smo provjeravali o kojem je pretraivaču je riječ je to što stranica sadrži dijelove
pisane u HTML5 i CSS3 i dijelove koji nisu optimizirani za IE,a rade na ostalim
pretraživačima. Kada korisnik posjeti stranicu sa IE, otvori mu se stranica u kojoj je upozoren
da ne radi stranica u IE i ponudi se par browsera koje može preuzeti i koristiti, kao na slici
ispod.
Slika 8 Prikaz stranice korištenjem IE
Sljedeća linija koda je ujedno jedna od vaznijih zato što je ključna za učitavanje dijelova
stranice.
Slika 9 Globalna varijabla, ključ
12
Korištenjem naredbe „define“ definiramo globalnu varijablu naziva „theKey“ i postavimo joj
vrijednost na 1. Ova varijabla je ključ koji se inicijalizira samo u index.php, i na taj način
osigurava da je korisnik pristupio indexu, a index poziva ostale dijelove stranice kao što su
zaglavlje, meni (izbornik), sadržaj, podnožje.
Ovaj dio koda je prvi dio, a njegov drugio dio se nalazi u svim drugim source datotekama, kao
što možemo vidjeti na sljedećoj slici dio koda iz header.php.
Slika 10 Drugi dio koda vezan za ključ
Slika 7 nam pokazuje u kodu da ako ključ nije definiran onda se stranica neće učitati, nego će
se preusmjeriti pretraživač (browser) na index i na taj način osigurat da korisnik uvijek
pristupa početnoj stranici, a ne slučajno da učita samo izbornik ili samo zaglavlje.
Nakon što je ključ definiran u index.php, sljedeće linije koda služe za dinamičko pozivanje
dijelova stranice, neki dijelovi su uvijek pozvani, a neki u ovisnosti od onoga što želimo, tj.
koji dio smo odabrali putem izbornika.
Slika 11 Pozivanje zaglavlje i izbornika
U PHP-u možemo pozvati druge datoteke da se učitaju kao da su pisane u samom fajlu koji
smo pokrenuli, korištenjem naredbe include 'naziv'; . Zaglavlje i meni su nam važni na svakoj
stranici, zato se oni pozivaju (include-aju) bezuvijetno.
Nakon zaglavlja i meni-a slijedi sadržaj stranice odijeljen u jednom div tagu, koji koristi klasu
(class), id=“content“, gdje je definiran izgled sadržaja stranice. Sadržaj stranice se bira
izbornikom, nakon što odaberemo šta želimo html,css,js ili php i odaberemo koje poglavlje
želimo, dio koda prikazan na slici 9 pokazuje kako se korištenjem 2 varijable učitava datoteka
13
sa sadržajem onoga što smo odabrali. Varijabla cont može imati vrijednost html,css,js ili php
da se učita datoteka sa željenim sadržajem ili može imati vrijednost „tryit“ da bi se učitao
editor u kojem korisnik može pisati kod i vidjeti kako bi izgledao u istom browseru. Ako
varijabla cont nema nikakvu dodijeljenu vrijednost, onda se učitava početna stranica
dobrodošlice.
Slika 12 Kod odrabira sadrţaja stranice
Korištenjem $_GET preuzimamo vrijednost varijabli cont i n, varijabla n sadrži samo broj
kojeg poglavlja želimo otvoriti. U varijablu $inc spremamo putanju do datoteke koju smo
odabrali izbornikom, sav sadržaj se nalazi u zasebnom folderu content, a unutar tok foldera se
nalaze folderi zasebno za html, css, js i php, au svakom od tih foldera se nalaze datoteke sa
nazivom chapter_ i onda slijedi broj poglavlja i na kraju završava sa .html. Prateći sintasku
php-a u jednu varijablu $inc smo spojili nekoliko stringova, gdje je jedan od tih stringova
broj, tj. varijabla n. Nakon dodijeljivanja vrijednosti varijabli $inc, sljedeća varijabla samo
učitava sadržaj datoteke include $inc; i na taj način smo dobili željeni sadržaj prikazan na
stranici.
14
Slika 13 Kod dugmeta za vraćanje na vrh
Slika 10 nam pokazuje liniju koda za prikazivanje dugmeta u desnom donjem kutu stranice za
odlazak na početak (vrh) stranice. Naredbom echo samo ispišemo html kod u browseru gdje
se treba pojaviti dugme, a njegov točan položaj izgled i uloga definirani su u klasi „go-top“.
Slika 14 Dugmad za naprijed i nazad
Datoteka page.php sadrži kod za listanje sadržaja unaprijed i nazad, ovu datoteku učitavamo
na stranicu ako se ne radi o početno stranici i ako se ne radi o online editoru, to smo rješili na
način da provjeravamo da je varijabla cont postavljena, i da njena vrijednost nije tryit. Ako je
uvijet ispunjen, samo includamo page.php.
Nakon page.php includamo podnožje stranice, footer.php, takoĎer bezuvijetno, jer nam je
potrebno na svakoj stranici bez obzira koji sadržaj se nalazi na stranici. Poslije podnožja
naredbom echo ispisujemo posljednje html tagove, za zatvaranje div-a, tijela (body) i html
end tag. Na kraju svega, zadnja linija index.php-a je „?>“ što označava kraj php koda i ujedno
kraj datoteke.
3.2
Zaglavlje
Unutar header.php se nalazi otvoreni tag za pocetak html dokumenta, i kompletno zaglavlje
html dokumenta, tj. sve što se nalazi izmeĎu <head> i </head> tagova. Prvi element u
zaglavlju je meta tag koji služi da uputi browser da koristi UTF-8 standard, kako bi se na
stranici prikazivala slova sa kvakama. Zatim se nalazi izmeĎu tagova <title> </title> naslov
stranice, iza kojeg slijedi par linkova na vanjske dizajne tj. na css datoteke. Osim vanjskih
15
datoteka sa stilovima tu se nalazi još jedan stil koji koristi za navigaciju, koji postavlja meni u
fiksnu poziciju na vrhu, kao što prikazuje sljedeća slika.
Slika 15 Početak zaglavlja
Zatim u zaglavlju imamo JavaScript kod za dugmat koja se pojavljuju na stranici, Go Top,
Next i Previous. U JS kodu napisana je funkcija koja upravlja s fade (izbljeĎivanjem) ili
transparentosti dugmadi. Dugmad next i previous se pojavljuju na stranici samo kada
skrolamo, spustimo se po stranici, za 10 pixela, uprotivnom su nevidljivi. Dugme Go Top se
pojavljuje kada se spustimo za 200 od vrha. Ako se radi o kraćoj stranici i nije dovoljno
velika da se možemo udaljiti od vrha za 200, onda se dugme Go Top neće ni pojaviti na
stranici.
Nakon funkcije koja uvjetno prikazuje ili sakriva dugmad, slijedi funkcija dugmeta Go Top,
tj. kada se klikne na dugme, izvrši se funkcija koja nas vraća na početak (vrh) stranice.
Slika 16 Funkcija dugmeta Go Top
16
Slika 17 JS kod dugmadi
Skripta sa slike 14 koristi jquery googleapi, koji se poziva putem url link sa google-ove
stranice.
Slika 18 Google API jquery
U zaglavlju se nalaze skripte koje uključuju lokalne JS skripte koje se koriste za rad
navigacije, zatim se nalazi funkcija dropdown koja mijenja status podajućeg izbornika.
17
Navigacija ima još jednu skriptu u zaglavlju, koja prati da li smo skrolanjem se pomjerili
prema dol, kada se pomjerimo navigacija se ukloni sa stranice kako bi se povećala
preglednost stranice. Ova skripta prati da li smo pošli skrolat prema gore, ako jesmo
navigacija se fiksno pojavi na vrhu prozora.
Slika 19 JS skripte za navigaciju
Zadnje linije datoteke header.php su zatvaranje head tag-a i otvaranje body taga za tijelo
stranice.
18
3.3
Navigacija
Navigacija stranice se nalazi u datoteci menu.php kako bi sve bilo na jednom mjestu i
olakšalo ureĎivanje linkova koji će biti na cijeloj stranici, uprotivnom bi se svaka datoteka
trebala ureĎivati kako bi svi linkovi bili namješteni.
Unutar menu.php datoteke imamo kao i u header.php datoteci na samom početku provjeru
ključa koji index postavi, uprotivnom preusmjerava na index, tako da se ne može otvoriti
samo menu.php, mora biti pozvan u index.php, tj početnu stranicu. Navigacija je smještena
unutar div tagova i koristi klase iz stilova koji su pozvani u header.php zaglavlju.
Aktivan je onaj link gdje se trenutno nalazimo, ako smo na početnoj stranici onda je Home
označen kao active, takoĎer kada smo na online editoru, onda TryIT link je označen kao
aktivan. Provjera za home je realizirana provjerom varijable cont, ako nije postavljena
vrijednost, pretpostavka je da se nalazimo na početnoj stranici.
Slika 20 Podešavanja klase active na Home buttonu
Na sličan način je realizirana provjera za tryit editor, ali za editor je postavljena varijabla cont
na tryit, pa to je upravo ono što i provjeravama.
Slika 21 Klasa active za button TryIT
Linkovi unutar liste meni-a su realizirani na nacin da usmjeravaju na index.php i kao dodatne
GET parametre prosljeĎuju varijable cont za sadržaj (html,css,js, php ili tryit) i varijablu n
koja označava broj poglavlja koji želimo.
19
Slika 22 Linkovi u navigaciji
3.4
Stranice i podnoţje
Napravljena je posebna datoteka page.php kojoj je jedini zadatak korištenjem dugmadi Next i
Previous, prebacivanje na sljedeće poglavlje ili na prethodno. Unutar datoteke se takoĎer
nalazi provjera ključa, zatim se nalazi funkcija koja provjerava folder onog sadržaja koji smo
odabrali, nalazi se u varijabli cont.
Slika 23 Funcija brojanja poglavlja
Na slici 20 vidimo funkciju brojanja poglavlja, funkcija provjerava koliko fajlova postoji u
folderu koji smo odabrali za sadržaj. Korištenjem petlje foreach prolazi kroz datoteke unutar
foldera i prebrojava koliko ih ima, broj fajlova (poglavlja) je spremljen u varijablu $max.
Varijabla max se koristi kao krajnja granica pojavljivanja dugmeta next na stranici. Dugmad
previous i next su vidljivi na stranici samo onda kada postoji prethodna odnosno sljedeća
stranica (poglavlje) u odnosu na ono na kojem se trenutno nalazimo, tako kada se nalazimo na
prvoj stranici, previous dugme se neče pojaviti, ali next hoće, isto se dogaĎa kada smo na
zadnjem poglavlju koje postoji u folderu, next dugme više se neće pojaviti, samo dugme
previous.
20
Slika 24 Button-i Previous i Next
Podnožje ili footer stranice takoĎer sadrži provjeru ključa i sadrži informacije o Copyright-u
kao i informacije Ime,Prezime broj indeksa koje su ujedno i link za slanje e-maila.
3.5
Online editor „TryIT“
Jedna od opcija na stranici je TryIT editor, koji omogućava posjetiocima da u samom
browseru mogu pokušati pisati html kod i vidjeti kako izgleda. Editor se sastoji od 2 datoteke,
index.php i result.php, unutar index datoteke se nalazi forma koja prosljeĎuje sadržaj
tekstualnog polja datoteci result.php kako bi prikazala html kod, i tablice od 2 polja. Prvo
polje tablice sadrži textarea u koji je početno upisana poruka da se tu upisuje CSS i HTML
kod, a drugo polje sadrži iframe koje služi da se učita stranica result.php kojoj smo proslijedili
html kod i na taj način prikažemo u istoj stranici kod koji korisnik upiše i pregled kako to
izgleda.
Slika 25 Index stranica online editora
21
Slika 26 Kod stranice result.php
Stranica result.php sadrži minimalan potreban kod kako bi uradila što je potrebno. Preko
varijable code iz forme u stranici index.php prima kod koji korisnik unese u tekstualno polje i
zatim naredbom print ispiše taj kod na stranici. Kako smo result.php preko iframe učitali u
index.php, onda se taj ispis prikaže na istoj stranici.
22
4. ZAKLJUČAK
Za izradu dobre web aplikacije je prvobitno potrebna dobra ideja i odabrati odgovarajući jezik
u kojem bi radili aplikaciju. Pored velikok izbora open source jezika i sve većeg broja
biblioteka postalo je lakše realizirati ideju. Prilikom pravljenja bilo kakve web aplikacije
potrebno je dobar dio vremena uložiti u istraživanje sličnih ideja kako bi znali na koji dio
trebamo posebno obratiti pozornost u smislu sigurnosti i kvalitete, a isto tako potražiti ukoliko
postoje neke biblioteke sa gotovoim najčešće korištenim funkcijama kako bi ubrzali i olakšali
svoj rad. Web aplikacije su bolje od aplikacija na računalu zbog toga što su nam uvijek
dostupne, sve što nam je potrebno je internet pretraživač da bi pristupili i koristili što nam je
potrebno, bez brigo o kojem se operativnom sustavu radi i da li je podržana aplikacije ili ne.
23
5. LITERATURA
1. HTML, XHTML, and CSS, Sixth Edition, Elizabeth Castro
2. PHP - Creating Interactive Internet Applications, 1999 Jirka Kosek
3. http://en.wikipedia.org/wiki/HTML
4. http://en.wikipedia.org/wiki/Cascading_Style_Sheets
5. http://en.wikipedia.org/wiki/JavaScript
6. http://en.wikipedia.org/wiki/PHP
7. http://en.wikipedia.org/wiki/Web_development
8. http://www.w3schools.com/
9. http://webarena.rs/javascript-jezik-weba
24
6. SLIKE
Slika 1 Primjer jednostavnog HTML koda ..............................................................................6
Slika 2 Primjer pisanja stila unutar style tagova u zaglavlju ....................................................6
Slika 3 Pozivanje vanjskog stila preko @import .....................................................................7
Slika 4 Primjer pozivanja javaskript koda iz vanjske datoteke .................................................7
Slika 5 Primjer pisanja JS u HTML-u .....................................................................................8
Slika 6 Primjer deklariranja varijabli u JS ...............................................................................8
Slika 7 Funkcija provjere browsera ....................................................................................... 11
Slika 8 Prikaz stranice korištenjem IE ................................................................................... 12
Slika 9 Globalna varijabla, ključ ........................................................................................... 12
Slika 10 Drugi dio koda vezan za ključ ................................................................................. 13
Slika 11 Pozivanje zaglavlje i izbornika ................................................................................ 13
Slika 12 Kod odrabira sadržaja stranice ................................................................................ 14
Slika 13 Kod dugmeta za vraćanje na vrh ............................................................................. 15
Slika 14 Dugmad za naprijed i nazad .................................................................................... 15
Slika 15 Početak zaglavlja .................................................................................................... 16
Slika 16 Funkcija dugmeta Go Top ....................................................................................... 16
Slika 17 JS kod dugmadi ...................................................................................................... 17
Slika 18 Google API jquery .................................................................................................. 17
Slika 19 JS skripte za navigaciju ........................................................................................... 18
Slika 20 Podešavanja klase active na Home buttonu ............................................................. 19
Slika 21 Klasa active za button TryIT ................................................................................... 19
Slika 22 Linkovi u navigaciji ................................................................................................ 20
Slika 23 Funcija brojanja poglavlja ....................................................................................... 20
Slika 24 Button-i Previous i Next ......................................................................................... 21
Slika 25 Index stranica online editora ................................................................................... 21
Slika 26 Kod stranice result.php ........................................................................................... 22
25
7. KRATICE
NCSA - National Center for Supercomputing Applications
HTTP – Hyper Text Transfer Protocol
HTML – Hyper Text Markup Language
CSS - Cascading Style Sheets
PHP - PHP: Hypertext Preprocessor
IE – Internet Explorer
URL - Uniform Resource Locator
JS – Java Script
26

Download Report