SVEUČILIŠTE U RIJECI

TEHNIČKI FAKULTET

Preddiplomski sveučilišni studij računarstva

Završni rad

RAZVOJ JEDNOSTAVNOGA SUSTAVA ZA UPRAVLJANJE

SADRŢAJEM WEB STRANICA

Mentor: izv.prof.dr.sc. Miroslav Joler

Andrijana Balent

Rijeka, rujan 2015 0069054723

2

3

4

Sadrţaj

1 UVOD ................................................................................................................................................... 6

2 KORIŠTENE TEHNOLOGIJE I ALATI ............................................................................................. 7

2.1 HTML ........................................................................................................................................... 7

2.2 CSS ............................................................................................................................................... 7

2.3 PHP ............................................................................................................................................... 8

2.4 SQL ............................................................................................................................................... 8

2.5 JavaScript ...................................................................................................................................... 8

2.6 jQuery ........................................................................................................................................... 9

2.7 AJAX (Asynchronous JavaScript and XML) ............................................................................... 9

2.8 WampServer ................................................................................................................................. 9

2.9 MySQL Workbench ...................................................................................................................... 9

3 WEB APLIKACIJA ............................................................................................................................ 10

3.1 Index ........................................................................................................................................... 10

3.2 Login screen ................................................................................................................................ 10

3.3 Dvije vrste stranica ..................................................................................................................... 11

3.4 Administratorski dio ................................................................................................................... 12

3.4.1 Upravljanje administratorima ............................................................................................ 13

3.4.2 Uređivanje običnih stranica ................................................................................................ 14

3.4.3 UreĎivanje stranice u tipu strukturirane liste ...................................................................... 15

3.4.4 Stvaranje nove obične stranice ........................................................................................... 16

3.4.5 Stvaranje novih unosa u stranicu u tipu strukturirane liste ................................................ 17

3.4.6 Uređivanje izbornika........................................................................................................... 17

3.4.7 Promjena pozadine ............................................................................................................. 18

4 BAZA PODATAKA ........................................................................................................................... 20

4.1 Općenito o bazama podataka ...................................................................................................... 20

5

4.2 O korištenoj bazi podataka .......................................................................................................... 21

4.2.1 Entitet: menu ....................................................................................................................... 21

4.2.2 Entitet: page ........................................................................................................................ 22

4.2.3 Entitet: users ....................................................................................................................... 23

4.2.4 Entitet: backgrounds ........................................................................................................... 23

4.2.5 Entitet: pictures ................................................................................................................... 24

5 IMPLEMENTACIJA .......................................................................................................................... 25

6 INSTALACIJA ................................................................................................................................... 28

7 PRILOZI ............................................................................................................................................. 29

7.1 Slike ............................................................................................................................................ 29

6

1 UVOD

Zadatak ovog rada je izrada sustava za upravljanje sadržajem web stranica koja će se

koristiti za prezentaciju rada u CONS (Comunications and network systems) laboratoriju.

Potrebno je omogućiti stvaranje novih stranica iz aplikacije, ureĎivanje te brisanje istih,

premještanje stranica u druge izbornike te odabir izmeĎu obrasca obične stranice i strukturirane

liste kako bi novosti jednostavno mogle biti prezentirane u aplikaciji. Korištenje aplikacije u te

svrhe treba biti dopušteno samo za administratore aplikacije, dok je za ostale postjetitelje

moguće samo pregledavanje stranica.

Osim za praćenje radova u CONS laboratoriju, u aplikaciji će takoĎer biti prezentirana

oprema, odreĎeni projekti i istraživanja, popis sudionika te mogući kontakti.

Izrada tih funkcionalnosti aplikacije bit će opisani detaljnije u tekstu.

7

2 KORIŠTENE TEHNOLOGIJE I ALATI

U izradi web aplikacije korišteni su HTML, CSS, PHP, MySQL, JavaScript (jQuery),

WampServer i MySQL Workbench.

2.1 HTML

HTML (HyperText Markup Language) - što u prijevodu znači prezentacijski jezik za

izradu web stranica. On je kostur za izradu web stranica te je odgovoran za osnovno

rasporeĎivanje elemenata po stranici koristeći znakove (eng. tags, npr. <HTML></HTML>).

Vrlo je jednostavan za uporabu. Zbog toga, a i zbog činjenice da je besplatan i

dostupan svima, poprilično je popularan i rasprostranjen. Html datoteke su zapravo obične

tekstualne datotoeke koje koristi web preglednik za interpretaciju sadržaja stranice. HTML

semantički opisuje strukturu web stranice i daje upute za prezentaciju, a to ga čini tzv.

markup jezikom, a ne programskim.

Danas, najnovija, dostupna verzija je HTML 5.

2.2 CSS

CSS (Cascading Style Sheets) je stilski jezik koji se koristi za vizualnu prezentaciju

stranice napisane html-om. Definira stil prikazivanja elementa - izgled i raspored stranice.

U ovoj je aplikaciji korištena eksterna css datoteka, ali i in-line css ispisan u samim

html elementima. Eksterna datoteka uključuje se u html:

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

8

2.3 PHP

PHP (PHP: Hypertext Preprocessor) je programski jezik za programiranje dinamičnih

web stranica. Može kreirati, otvarati, čitati, pisati, brisati i zatvarati datoteke na serveru,

prikupljati podatke iz formi, slati i primati kolačiće (cookies), enkriptirati podatke.

Php radi na mnogim platformama, kompatibilan je sa skoro svim serverima koji se

koriste u današnje vrijeme, besplatan je te ga je jednostavno naučiti. Php se ističe širokom

podrškom raznih baza podataka i internet protokola kao i raspoloživosti brojnih

programerskih knjižnica. Php se izvršava na poslužitelju, zatim se vraća na web preglednik u

čistom HTML-u. To ga čini sigurnim kada su u pitanju lozinke.

2.4 SQL

SQL (Structured Query Language) je programski jezik dizajniran za upravljanje

podacima sadržanim u relacijskim bazama podataka. Postao je jedan od naješće korištenih

jezika u svom području. Koristi se u svrhu stvaranja upita za dohvaćanje podataka iz baze,

upisivanje podataka u bazu, brisanje podataka iz baze. Razvijen je 70-ih godina u IBM

Research Laboratoryy at San Jose - California u okviru relacijskog sustava za upravljanje

bazama podataka.

2.5 JavaScript

JavaScript je skriptni programski jezik koji se izvršava u web pregledniku na strani

korisnika. Koristi se zbog interaktivnosti stranice koju možemo postići njegovom primjenom.

Za njegovo korištenje nije potrebna licenca.

Najpopularniji je skriptni jezik na Internetu, a podržavaju ga gotovo svi poznati

preglednici (Internet Explorer, Mozzila Firefox, Netscape, Opera).S obzirom da je JavaScript

prevoditelj, skripta se odmah izvršava bez prethodnog prevoĎenja cijelog programa i

kreiranja izvršne datoteke.

JavaScript s AJAX (Asynchronous JavaScript and XML) tehnikom omogućuje web

stranicama komunikaciju sa serverskim programom, što čini aplikaciju interaktivnijom i

9

lakšom za korištenje. AJAX je u ovoj aplikaciji korišten za slanje JavaScript varijabli u php

datoteku koja bi ih obradila i pohranila.

Cross platformna JavaScript knjižnica - jQuery. jQuery je najpopularinija JavaScript

knjižnica koja olakšava izradu dinamičkih web stranica i aplikacija.

2.6 jQuery

jQuery je JavaScript knjižnica čija je svrha pojednostavljivanje korištenja JavaScripta

na web stranici - "write less, do more". jQuery koristi mnogo sličnih zadataka koji zahtjevaju

dosta linija JavaScript koda za izvršavanje te ih sprema u metode koje se mogu pozvati sa

jednom linijom koda.

jQuery omogućuje razne efekte i animacije, pojednostavljuje manipulaciju CSS-om te

olakšava kompliciranije programiranje poput AJAX poziva i manipulacije DOM-om.

2.7 AJAX (Asynchronous JavaScript and XML)

Ajax je tehnika za kreiranje brzih i dinamičnih web stranica. Dopušta da web stranica

bude asinkrono ažurirana razmjenom malih količina podataka sa serverom - moguće je

ažurirati dijelove web stranice bez ponovnog učitavanja cijele stranice.

2.8 WampServer

WampServer je software koji imitira server na lokalnom računalu te tako omogućuje

razvoj aplikacije u lokalnom okruženju, a ne na Internetu.

2.9 MySQL Workbench

MySQL Workbench je grafički alat za dizajniranje baza podataka koji integrira SQL

razvoj, administraciju, dizajn i održavanje u zajedničko sučelje. Ima potpuno grafičko

korisničko sučelje. Postoji u besplatnom i komercijalnom izdanju.

10

3 WEB APLIKACIJA

3.1 Index

Na prilično jednostavnoj index stranici nalazi se button 'LOGIN' za prijavu

administratora, menu za kretanje po aplikaciji, tj. pregledavanje stranica te prostor u kojeg se

ispisuje sadržaj stranice.

Slika 3.1 - Index stranica

3.2 Login screen

U slučaju krivog unosa podataka u formu za prijavljivanje (Slika 3.2 - Stranica za

prijavu), odnosno u slučaju krivo unesene lozinke, ispisuje se pogreška da je lozinka netočna.

Kada je korisničko ime netočno upisano, ispisuje se pogreška - "Nepostojeći korisnik". Ako

su podaci ispravni korisnik prelazi u administratorski dio.

U lijevom, donjem uglu imamo poveznicu natrag na index gdje posjetitelj može

nastaviti pregledavati stranicu s ograničenim mogućnostima, tj. kao posjetitelj.

11

Slika 3.2 - Stranica za prijavu

3.3 Dvije vrste stranica

Kako bi organizacija sadržaja na stranici bila jednostavnija i efikasnija za različite

stranice, postoji mogućnost odabira izmeĎu:

obične stranice

stranice u tipu strukturirane liste.

Obična stranica se može koristiti kada se opisuje neka tema s više paragrafa teksta

koji se mogu poduprijeti sa slikom, dokumentom, videom i sl.

Stranica u tipu strukturirane liste je pak zamišljena kao stranica koja će sadržavati niz

odreĎenih paragrafa teksta tematski povezanih svaki sa jednom slikom. Na primjer, index

stranica je organizirana na isti način. Imamo neku objavu, s njom povezanu sliku, a ispod je

neka druga objava.

12

Slika 3.3 - Prikaz obične stranice

3.4 Administratorski dio

Kada se prijavi, administratoru se promijeni index stranica. Postaju mu vidljive opcije

koje su skrivene običnom korisniku. TakoĎer, umjesto "Login" buttona prikazuju se ime i

prezime administratora s nekim opcijama.

Slika 3.4 - Index stranica iz pogleda administratorskog dijela

13

Slika 3.5 - Podaci o administratoru

3.4.1 Upravljanje administratorima

Postoje dvije vrste administratora te posjetitelji. Imamo "power" administratora koji je

fiksni i može upravljati drugim administratorima. Može izmijeniti podatke o

administratorima u bazi, korisničko ime, obrisati svakog od njih, promijeniti im lozinku

(recimo u slučaju da je zaboravljena) te unijeti novog administratora.

Obični administrator nema mogućnost upravljanja drugim administratorima, ali ima

sve druge privilegije power administratora.

Dakle, podjela po ovlastima:

power administrator ima najveće ovlasti, iza njega je

obični administrator, a dalje slijede

posjetitelji

14

Slika 3.6 - Stranica za upravljanje administratorima

Posebno, svaki od administratora može promijeniti svoju lozinku. U desnom, gornjem

uglu ispisano je njihovo ime, link za logout te stranica za promjenu lozinke. Osim toga,

mogu izmjenjivati menu, unositi nove stranice, mijenjati postojeće te promijeniti sliku

pozadine.

3.4.2 Uređivanje običnih stranica

Pri naknadnom ureĎivanju već stvorene obične vrste stranice, moguće je brisati

elemente te mijenjati njihov redoslijed klikom na jednu od dviju ponuĎenih strelica

(gore/dolje).

15

Slika 3.7 - Uređivanje obično strukturirane stranice

Ako želimo unijeti nove elemente u postojeću stranicu koristimo Insert page (

Insert regular ) te upisujemo ime stranice koju želimo nadopuniti te kliknemo start. Na

desnoj strani, gdje je slobodni prostor ispisuje se postojeći sadržaj stranice, biramo vrstu

elementa kojeg želimo dodati, a zatim i element.

3.4.3 UreĎivanje stranice u tipu strukturirane liste

UreĎivanje stranice koja je u tipu strukturirane liste ima mogućnosti brisanja cijelog

unosa te ureĎivanja slike. Ukoliko obrišemo unos, brišemo i tekst i sliku. A ukoliko želimo

urediti sliku, nude nam se dvije opcije:

skrivanje slike (koju je moguće ponovo prikazati),

promjena veličine slike na način da upišemo njezinu širinu u pikselima (tada

će se njena visina automatski prilagoditi u istom omjeru kao što je promjena

širine).

Promjena veličine slike bitna je zbog organiziranja stranice. Tako administrator može

odlučiti je li bitan sadržaj slike u detalje pa će ju staviti u većoj rezoluciji ili je to nepotrebno

i samo zauzima prostor te će ju smanjiti na slabiju vidiljivost.

Sve promjene koje smo učinili na slikama, bilježe se u tablicu "pictures" u bazi

podataka te se kod svakog prikazivanja slike provjeravaju postavke u bazi i s obzirom na njih

se slika prikazuje.

16

Slika 3.8 - Uređivanje stranice u tipu strukturirane liste

3.4.4 Stvaranje nove obične stranice

Kada želimo stvoriti novu, obično strukturiranu stranicu spremamo je i unosimo

elemente na isti način kao i kod već opisanog unosa elemenata u stranicu koja već postoji.

Jedina razlika je u tome što je kod stvaranja nove stranice potrebno, nakon odabira imena

stranice, odabrati na koju poziciju u menu-u ju želimo spremiti. Kada spremimo svoj odabir,

nastavljamo unositi elemente.

Slika 3.9 - Tijek izrade nove stranice

17

3.4.5 Stvaranje novih unosa u stranicu u tipu strukturirane liste

Kod stranice koja je u tipu strukturirane liste, na sljedeći način unosimo elemente.

Kliknemo na ikonu koja prikazuje stranicu sa strukturiranim unosima. Korištenjem animacija

jQuery-a animira se pojavljivanje obrasca za spremanje teksta. Kada spremimo tekst

možemo izabrati želimo li odabrati sliku koja će biti pridružena prethodno unesenom tekstu.

Ako ju odaberemo, upišemo naziv slike te kliknemo 'Upload image'.

Ako kliknemo na "Cancel picture upload" spremamo samo spremljeni tekst koji se

prikazuje sam, bez slike na stranici.

Slika 3.10 - Novi unos u stranicu u tipu strukturirane liste

Po završetku se stranica ponovno učita i promjene postaju vidljive.

3.4.6 Uređivanje izbornika

Klikom na link "Edit menu" otvara se stranica za izmjene u menu-u. Uz pomoć

jQuery-a stranica radi na principu "drag-and-drop" (povuci-i-spusti) principu.

Ime svake pojedine stranice moguće je "povlačiti" po radnom prostoru s razlogom da

je ispustimo na jednom on naziva izbornika. Tada će se ista prebaciti u odabrani izbornik na

kojem je "spuštena".

Ukoliko se spusti na blok u kojem piše "Delete" sa ikonom koša za smeće, stranica će

se obrisati, a ukoliko ju spustimo na "Rename" otvara mogućnost preimenovanja

18

stranice.

Slika 3.11 - Stranica za izmjene izbornika

3.4.7 Promjena pozadine

Kako bi aplikaciju bilo lakše "osvježiti" iznutra, s vremena na vrijeme nešto

promijeniti kako bi postala ugodnija oku, omogućeno je promijeniti sliku pozadine.

Slike su na stranici prikazane u bloku, smanjene, crno-bijele ili sepia boje. Moguće je

unijeti novu sliku, tada se stranica osvježi te nam i ona bude prikazana. Kada prijeĎemo

mišem preko jedne od slika, ona se radi efekta malo uveća i dobije pravu boju. Ako kliknemo

na nju otvori se lightbox sa slikom u realnoj veličini te neke opcije, a to su:

Close - zatvara lightbox

Set as background - postavlja sliku kao pozadinu

Delete - briše sliku

Slika 3.12 - Prikaz ved unesenih slika za pozadinu

19

Slika 3.13 - Lightbox

20

4 BAZA PODATAKA

4.1 Općenito o bazama podataka

Termin baza podataka izvorno je nastao u računalnoj industriji, a do sad se proširio te

uključuje i neelektronske baze podataka unutar svoje definicije.

Jedna od definicija je da je baza podataka skup zapisa spremljenih u računalu na

sustavni način, takav da joj se računalni program može dati smisleni upit za informacijama, a

predmeti vraćeni u odgovoru na upite postaju informacije koje se mogu koristiti za donošenje

odluka.

Takav računalni program nazvan je SUBP - sustav upravljanja bazom podataka (eng.

DBMS - database management system). To softverska aplikacija koja vrši interakciju s

korisnikom, drugim aplikacijama i sa bazom podataka kako bi se podaci spremili i

analizirali. Takav softver je najčešće dizajniran za definiranje, stvaranje, ispitivanje,

ažuriranje i administriranje podataka.

Poznati DBMS sustavi su: MySQL, MariaDB, PostgreSQL, SQLite, Microsoft SQL

Server, Oracle, SAP HANA, dBASE, MongoDB, FoxPro, IBM DB2, LibreOffice Base,

FileMaker Pro, Microsoft Access i InterSystems Caché.

Postojeći DBMS pružaju različite funkcije koje omogućavaju upravljanje bazom

podataka i samim podacima, a te funkcije mogu biti klasificirane u četiri glavne funkcijske

skupine:

definicija podataka - kreiranje, modifikacija i uklanjanje definicija koje

definiraju organizaciju podataka

ažuriranje - ubacivanje, modifikacija i brisanje stvarnih podataka

dohvaćanje - pruža informacije u formi koju je direktno moguće koristiti u

daljnjem procesiranju od strane drugih aplikacija.

21

administracija - registriranje i nadzor korisnika, provedba sigurnosti

podataka, nadzor performansi, održavanje integriteta podataka, vraćanje

informacija koje su bile koruptirane zbog nekog dogaĎaja

4.2 O korištenoj bazi podataka

Baza podataka sadrži ukupno svega 5 entiteta.

U ovoj aplikaciji, korištena je baza podataka sa sljedećim tablicama:

menu

page

users

backgrounds

pictures

4.2.1 Entitet: menu

Kako bi aplikacija mogla imati promjenjive izbornike potrebno je u bazu spremati

trenutno postavljene vrijednosti. Tablici 'menu' nazivi stranica povezani su sa nazivima

izbornika u kojima se nalaze.

Recent equipment

Ako na stranici "Edit page" prebacimo Recent u neki drugi izbornik, npr. news, to će

se spremiti u bazu podataka:

Recent news

Sada kad želimo ispisati izbornik news, korišten je upit: $query = "SELECT * from

`menu` where parent like '%equipment'";

22

4.2.2 Entitet: page

Kako bi mogli unositi različite elemente u stranicu, brisati samo dijelove stranice ili

ureĎivati posebno neke dijelove stranice u tablici 'page' imamo informacije o svim

elementima svake stranice.

Atribut onPage govori nam za svaku stranicu kakav je raspored elemenata, ako

mijenjamo raspored, mijenja se i onPage. Atribut name govori naziv stranice na koju se

elementi trebaju ispisati. Atribut 'text' daj potrebni sadržaj o kojem god elementu da je riječ.

typeOfData daje informacije i vrsti podataka. OdreĎene vrste podataka ćemo ispisivati u

različite html oznake stoga nam je bitno znati koja vrsta podataka je spremljena u 'text'

atribut.

if ($type == "pic") {

echo '<img id="'.$id.'_pic" class=" " alt=""

src="' . $text . '" >';

}

if ($type == "text") {

echo '<p>' . $text .'</p>';

}

if ($type == "doc") {

<a href='" . $text . "'><iframe class=''

id='viewer' src = '" . $text . "' width='400' height='300'

autofocus='false'></iframe></a>";

}

23

4.2.3 Entitet: users

Kako bi mogli manipulirati administratorima, davati ovlasti i dopuštenja, imamo

tablicu users koja sadrži podatke o administratorima. Ona sadrži id korisnika, username,

password, firstname, lastname, status, type.

U datoteci login.php koja započinje sjednicu, u $_SESSION varijablu se sprema

oznaka pristupa:

$_SESSION['pristup'] = vrsta_korisnika($login);

Ako nije postavljena varijabla $_SESSION['pristup'], korisnik nema administratorska

prava, dakle preusmjeren je na index stranicu.

if (!(isset($_SESSION['pristup']))) {

header ("Location: index.php");

}

Tako u aplikaciji kontroliramo tko je administrator, a tko posjetitelj. Dovoljno je

provjeriti postojanje varijable $_SESSION['pristup']. Na isti način pristupamo informaciji

koja daje razliku izmeĎu običnog i power administratora.

U tablici 'users' spremljene su lozinke korisnika koje takoĎer kontroliramo prilikom

prijavljivanja. U formu unesena lozinka se hashira md5 algoritmom koji se tada usporeĎuje

sa zapisom u bazi koji je u istom obliku.

4.2.4 Entitet: backgrounds

Da bi pozadina bila učitana stalno, svaki put kada se pokrene aplikacija, nakon

ponovnog učitavanja i sl. potrebno je da aplikacija pročita od nekud koju sliku treba učitati

za pozadinu. Kod promjene na isto mjesto spremamo informaciju o tome za koju sliku

želimo da bude na pozadini stranica.

24

4.2.5 Entitet: pictures

Za svaku sliku za koju koristimo opcije ureĎivanja u tablici 'pictures' spremljen je

njezin id, postavljena širina za skaliranje veličine slike te 'showHide' koji govori aplikaciji

treba li ili ne prikazati pojedinu sliku.

Dio koda koji koristi tu informaciju je:

<?php

echo '<img id="'.$id.'_pic" style="';

if (checkHide($id)) { echo 'display:none;'; } else

{ echo 'display:block;" width="'; }

if (checkScale($id) != NULL && checkScale($id)!=

1)

{

$scale = checkScale($id);

echo $scale;

}

echo '" height:auto; class=" " alt="" src="' .

$text . '" ></td>';

?>

25

5 IMPLEMENTACIJA

Jedan primjer korištenja AJAX-a je:

$.ajax({

type: "POST",

url: "updateText.php",

data:{ id: regularId, text: editedContent },

beforeSend: function() {

$('#'+save).text("Saving...");

},

success: function(){

$('#'+save).text("Save");

$('#'+ regularId +'_note').text("Saved.");

}

})

U navedenom primjeru ajax šalje varijable 'id' i 'text' u php datoteku updateText.php

gdje će se spremiti u bazu (php). Prije aktiviranja skripte button mijenja vrijednosti. ('Save' -

> 'Saving...' -> 'Saved.')

Za validaciju inputa korišten je jquery odnosno JavaScript.

var value=$.trim($("#pageName").val());

var len = value.length;

26

if (len == 0) {

alert('You must enter a valid name.');

return;

}

Za spriječavanje pritiska na button više od jednom kada to želimo:

var timesClicked = 0;

(...)

timesClicked++;

if ( timesClicked >= 1 ) {

$( this ).unbind( event );

}

Primjer SQL upita s mysql_real_escape_string(); funkcijom za rad sa stringovima.

$query = "INSERT INTO page (onPage, name, text,

typeOfData) VALUES ( '$onPage', '$name', '" .

mysql_real_escape_string($text) . "', 'text')";

jQuery JavaScript knižnice (online zbog bržeg učitavanja):

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.1

1.2/jquery.js"></script>

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.1

1.2/jquery.min.js"></script>

27

aplikacija ima modularan dizajn - pristup koji dijeli sistem u manje dijelove (module)

koji se mogu samostalno kreirati i koristiti u različitim sustavima. Svojstva

modularnog dizajna:

1 Funkcionalna podjela u skalabilne i ponovno iskoristive module koji se

sastoje od izoliranih funkcionalnih elemenata.

2 Objektno orijentirana funkcionalnost.

3 Jednostavna izmjena pojedinih modula.

Podjela sustava u manje dijelove (module) napravljena pomoću php koda. Jedan dio

koda je u drugoj php datoteci. Po potrebi pozivamo ju php funkcijama.

PHP funkcije za uključivanje jedne php datoteke u drugu su:

include 'path/to/file';

require 'path/to/file';

include_once 'path/to/file';

require_once 'path/to/file';

Razlika izmeĎu naredbi je u tome što će include u slučaju greške javiti samo warning

(E_WARNING), kompilacija skripte se nastavlja dalje, suprotno tome, kod require se u

slučaju greške javlja fatal error (E_COMPILE_ERROR) te se kompilacija skripte zaustavlja.

"_once" nastavak znači da je potrebno samo jedno učitavanje php datoteke.

28

6 INSTALACIJA

Mapu u kojoj se nalaze datoteke koje čine aplikaciju potrebno je prebaciti u 'www' folder

gdje je instaliran WampServer (C:\wamp\www)

Pokretanje aplikacije odvija se iz web preglednika pretraživanjem adrese

'127.0.0.1/cons/index.php' ili 'http://localhost/cons/index.php'

29

7 PRILOZI

7.1 Slike

Slika 3.1 - Index stranica ........................................................................................................ 10

Slika 3.2 - Stranica za prijavu ................................................................................................. 11

Slika 3.3 - Prikaz obične stranice ........................................................................................... 12

Slika 3.4 - Index stranica iz pogleda administratorskog dijela ............................................... 12

Slika 3.5 - Podaci o administratoru ......................................................................................... 13

Slika 3.6 - Stranica za upravljanje administratorima .............................................................. 14

Slika 3.7 - UreĎivanje obično strukturirane stranice .............................................................. 15

Slika 3.8 - UreĎivanje stranice u tipu strukturirane liste ........................................................ 16

Slika 3.9 - Tijek izrade nove stranice ..................................................................................... 16

Slika 3.10 - Novi unos u stranicu u tipu strukturirane liste .................................................... 17

Slika 3.11 - Stranica za izmjene izbornika ............................................................................. 18

Slika 3.12 - Prikaz već unesenih slika za pozadinu ................................................................ 18

Slika 3.13 - Lightbox .............................................................................................................. 19

30

LITERATURA

[1] Oracle Corporation: „MySQL Workbench“, s Interneta,

http://www.oracle.com/us/products/mysql/mysql-workbench-066221.html,

lipanj, 2015.

[2] W3Schools: „HTML contenteditable Attribute“, s Interneta,

http://www.w3schools.com/tags/att_global_contenteditable.asp, lipanj, 2015.

[3] W3Schools: „HTML Drag and Drop“, s Interneta,

http://www.w3schools.com/html/html5_draganddrop.asp, srpanj 2015.

[4] Oracle Corporation: „MySQL :: MySQL 5.0 Reference Manual :: 13.2.5.3 INSERT

... ON DUPLICATE KEY UPDATE Syntax“, s Interneta,

http://dev.mysql.com/doc/refman/5.0/en/insert-on-duplicate.html, srpanj 2015.

[5] W3Schools: „jQuery Tutorial“, s Interneta,

http://www.w3schools.com/jquery, kolovoz 2015.

[6] jQuery: „jQuery.ajax() “, s Interneta,

http://api.jquery.com/jquery.ajax/, kolovoz 2015.

[7] The PHP Group: „PHP: unlink - Manual“, s Interneta,

http://php.net/manual/en/function.unlink.php, rujna 2015.