navodila za pisanje diplomskih nalog um feri - core.ac.uk · skripta na strani odjemalca se ukvarja...

Mitja Rogl

Sistem za spletno arhiviranje

Diplomsko delo

Maribor, september 2012


Diplomsko delo

Študent: Mitja Rogl

Študijski program: Univerzitetni študijski program

Informatika in tehnologije komuniciranja

Smer: Tehnologije komuniciranja

Mentor: Dr. Marko Hölbl

Somentor: Asistent Jaka Polutnik

ii

.

ZAHVALA

Zahvaljujem se mentorju za pomoč in

vodenje pri opravljanju diplomskega dela.

Prav tako se zahvaljujem somentorju za

koristne napotke med izdelavo

diplomskega dela.

Posebna zahvala velja staršem, ki so mi

omogočili študij, ter moji punci Tinkari, ki

mi je stala ob strani.

iii


Ključne besede: spletna aplikacija, PHP, MySQL, spletni arhiv, AJAX, JQuery, Javascript

UDK: 004.738.5:005.921.1¨746¨(043.2)

Povzetek

V diplomski nalogi je predstavljena aplikacija, ki smo jo razvili v sklopu diplomskega dela.

Spletna aplikacija je namenjena uporabnikom, ki želijo hraniti svoje osebne vsebine in

imeti pregled nad njimi.

Vsebina diplomske naloge obsega predstavitev primarnih tehnologij PHP in MySQL ter

drugih podpornih tehnologij. Prav tako zajema opis aplikacije od analize zahtev, do

predstavitev posameznih komponent aplikacije in predstavitve delovanja ter uporabe

spletne aplikacije.

Rezultat dela je spletna aplikacija, s katero lahko dodajamo različne vsebine. Aplikacija

nam omogoča pregled statističnih podatkov, hitro iskanje in pregledovanje vsebin v

arhivu.

iv

System for web archiving

Key words: web application, PHP, MySQL, web archive , AJAX, JQuery, Javascript

UDK: 004.738.5:005.921.1¨746¨(043.2)

Abstract

The degree presents a web application, which we developed within the degree work. The

web application is designed for users who want to store their personal content and have a

control on them.

The degree’s content includes the presentation of the primary technologies PHP and

MySQL and other assistive technologies. It also includes a description of the application,

requirements analysis, presentation of individual application components and it also

presents how the application works.

The result of our work is web application, which enables us to add different contents. The

application enables us to view statistics, search faster and browse contents in the archive.

v

KAZALO

1 UVOD ....................................................................................................................................... 1

2 SPLETNE APLIKACIJE .................................................................................................... 2

2.1 Programski jezik PHP .................................................................................................................. 3

2.2 Delovanje programskega jezika PHP ........................................................................................... 4

2.3 Podatkovna baza MySQL ............................................................................................................. 7

2.4 SQL ............................................................................................................................................... 9

3 SPLET 2.0 ............................................................................................................................ 11

3.1 Značilnosti Spleta 2.0 .................................................................................................................. 11

3.2 Tehnologija HTML5 in CSS3 ..................................................................................................... 13

3.3 Tehnologija Javascript ................................................................................................................ 13

3.4 Tehnologija AJAX ...................................................................................................................... 14

4 NAČRTOVANJE SPLETNE APLIKACIJE ............................................................... 17

4.1 Analiza zahtev ............................................................................................................................. 17

4.2 Podatkovna baza ......................................................................................................................... 18

4.3 Uporabniški vmesnik .................................................................................................................. 20

4.4 Poslovna logika ........................................................................................................................... 22

5 DELOVANJE SPLETNE APLIKACIJE ..................................................................... 24

5.1 Prijava in registracija ................................................................................................................. 24

5.2 Vpisovanje in pregled vsebin ...................................................................................................... 24

vi

5.3 Statistika ..................................................................................................................................... 25

6 ZAKLJUČEK ...................................................................................................................... 27

7 VIRI IN LITERATURA ................................................................................................... 28

8 PRILOGE ............................................................................................................................. 30

8.1 CD z datotekami spletne aplikacije ............................................................................................ 30

KAZALO SLIK

SLIKA 2.1 MODEL DELOVANJA SPLETNE APLIKACIJE [6] ......................................................... 3

SLIKA 2.2 KLIC DINAMIČNE SPLETNE STRANI ......................................................................... 5

SLIKA 2.3 KLIC STATIČNE SPLETNE STRANI ............................................................................ 5

SLIKA 2.4 PRIMER IZVAJANJA PHP KODE ............................................................................... 7

SLIKA 2.5 SPLETNA APLIKACIJA Z UPORABO PODATKOVNE BAZE ........................................... 8

SLIKA 3.1 SESTAVLJANKA SPLET 2.0 .................................................................................... 12

SLIKA 3.2 KORAKI IZDELOVANJA SPLETNE APLIKACIJE ........................................................ 12

SLIKA 3.3 PRIMERJAVA KLASIČNE SPLETNE APLIKACIJE IN SPLETNE APLIKACIJE Z UPORABO

AJAX-A [10] ................................................................................................................. 15

SLIKA 4.1 E-R DIAGRAM SPLETNE APLIKACIJE ..................................................................... 19

SLIKA 4.2 PRIMARNI MENI IN SPODNJI DEL (NOGA) SPLETNE APLIKACIJE .............................. 21

SLIKA 4.3 PRIKAZ VSEBINSKEGA DELA SPLETNE APLIKACIJE ................................................ 21

SLIKA 4.4 STRUKTURA IZGRADNJE SPLETNE APLIKACIJE ...................................................... 23

SLIKA 5.1 REGISTRACIJA IN PRIJAVA V SISTEM ..................................................................... 24

SLIKA 5.2 PRIKAZ STATISTIČNIH PODATKOV ........................................................................ 26

vii

SEZNAM KRATIC

PHP –– Hypertext Preprocessor/Hipertekstovni preprocesor

SQL –– Structured Query Language/Strukturiran poizvedovalni jezik

AJAX –– Asynchronous JavaScript And XML/Asinhroni JavaScript in XML

HTML –– HyperText Markup Language/Hipertekstovni označevalni jezik

XHTML –– Extensible HyperText Markup Language/Razširljiv Hipertekstovni

označevalni jezik

CSS –– Cascading Style Sheets/Kaskadni slog

ANSI –– American National Standards Institute/Ameriški Nacionalni inštitut za

standarde

ISO –– International Organization for Standardization/Mednarodna organizacija

za standardizacijo

API –– Application Programming Interface/Aplikacijski programski vmesniki

ASP –– Active Server Pages/Aktivne strežniške strani

IIS –– Internet Information Services/Internetne informacijske storitve

RSS –– Rich Site Summary/Zgoščeni povzetek strani

URL –– Uniform Resource Locator/Enolični krajevnik vira

Sistem za spletno arhiviranje UM FERI

1

1 UVOD

V okviru diplomskega dela smo izdelali spletno aplikacijo, ki je namenjena shranjevanju

najrazličnejših vsebin. Namen diplomske naloge in aplikacije je omogočiti učinkovito

hranjenje vsebin na spletu, dosleden pregled nad njimi in hitro iskanje zahtevane vsebine.

Za razvoj te aplikacije smo se odločili zato, ker se v današnjem svetu soočamo s hrambo

velikih količin najrazličnejših vsebin doma, v službi ali kje drugje, in zato je preglednost

nad vsebinami pomanjkljiva, določene vsebine pa pogosto pozabljene.

V diplomski nalogi smo naredili spletno aplikacijo, ki bo hranila podatke o najrazličnejših

vsebinah (knjige, avdio vsebine, video vsebine, besedila, grafični izdelki ...). Spletna

aplikacija, ki smo jo izdelali, predstavlja arhiv vsebin, ki nam opisujejo dejanske fizične

vsebine. S to aplikacijo bo posamezniku omogočeno dodajanje ali urejanje osebnih vsebin.

Vse vsebine so zbrane na enem mestu in jih lahko na enostaven način spremenimo ali

odstranimo. Za gradnjo aplikacije smo uporabili strežniški skriptni jezik PHP v

kombinaciji s podatkovno bazo MySQL.

Pri gradnji spletnih aplikacij je priporočljivo, da jih zgradimo tako, da lahko katerokoli

funkcionalnost odvzamemo in brez večjih težav dodamo novo funkcionalnost. S tem si

olajšamo kasnejše spreminjanje in nadaljnje razvijanje aplikacije. To smo upoštevali tudi v

tej diplomski nalogi pri razvijanju zgoraj omenjene aplikacije.

V drugem in tretjem poglavju bomo predstavili in opisali tehnologije, ki smo jih uporabili

pri razvijanju spletne aplikacije. Izpostavili bomo nekaj njihovih prednosti in slabosti ter

njihovo uporabo v spletni aplikaciji. Sledi opis načrtovanja spletne aplikacije, ki se nanaša

na analizo zahtev in posameznih komponent gradnje spletne aplikacije. Na koncu sledi še

predstavitev delovanja in uporabe spletne aplikacije.


2

2 SPLETNE APLIKACIJE

Spletna aplikacija je kakršnakoli aplikacija, ki uporablja spletni brskalnik v smislu

odjemalca in je dostopna preko omrežja [9].

Odjemalec je v tem primeru vsak računalnik, ki je povezan z gostiteljskim računalnikom

(strežnik). Strežnik predstavlja računalnik, ki v omrežju zagotavlja neko storitev.

Odjemalec se uporablja v okolju odjemalec–strežnik za sklicevanje na program, ki ga

oseba uporablja, da zažene aplikacijo. Okolje odjemalec–strežnik je tisto, v katerem več

računalnikov izmenjuje informacije, kot na primer vnos podatkov v bazo podatkov [9].

Spletne aplikacije pogosto uporabljajo kombinacijo skript na strani strežnika (ASP (ang.

Active Server Pages), PHP (ang. Hypertext Preprocessor), itd.) in skripte na strani

odjemalca (Javascript). Skripta na strani odjemalca se ukvarja s predstavitvijo informacij,

medtem ko se skripta na strani strežnika ukvarja z vsemi kompleksnimi zadevami, kot so

shranjevanje, obdelovanje in pridobivanje informacij. Spletne aplikacije so se pojavile že

preden si je splet pridobil svojo obširno popularnost. Prve spletne aplikacije so bile

preproste, a v poznih devetdesetih se je začel tudi razvoj v smeri bolj kompleksnih

aplikacij. Večina današnjih spletnih aplikacij temelji na zgradbi odjemalec–strežnik.

Obstajajo pa tudi aplikacije, ki ne potrebujejo strežnika za shranjevanje podatkov [9].

Spletne aplikacije ne potrebujejo posebnih posodobitev, saj se vse nove funkcionalnosti

izvajajo na strežniku in se samodejno posredujejo uporabnikom. Spletna aplikacija lahko v

primerjavi z namizno aplikacijo zagotovi enake funkcionalnosti in ima prednost, ker deluje

na več platformah hkrati. Za delovanje potrebuje le spletni brskalnik. Za svoje delovanje

potrebujejo malo ali nič prostora na uporabnikovem disku. Spletna aplikacija lahko na

primer deluje kot urejevalnik besedil, shranjuje podatke in omogoča, da prenesemo

dokumente na naš osebni trdi disk [9].

Struktura naše spletne aplikacije je zgrajena iz triplastnega aplikacijskega modela, kot

prikazuje Slika 2.1. Prva plast predstavlja spletni brskalnik ali uporabniški vmesnik, preko

katerega vnašamo in pregledujemo podatke. Druga plast predstavlja tehnologije strežniških

jezikov kot so PHP… in spletni strežnik. S pomočjo le teh se podatki obdelajo in shranijo v


3

podatkovno bazo oziroma jih lahko pridobimo in prikažemo v spletnem brskalniku. Tretja

plast je podatkovna baza, ki hrani različne podatke.

Slika 2.1 Model delovanja spletne aplikacije [6]

V okviru drugega poglavja smo v nadaljevanju predstavili primarne tehnologije PHP v

kombinaciji s podatkovno bazo MySQL in poizvedovalni jezik SQL (ang. Structured

Query Language). Ostale podporne tehnologije, ki smo jih omenili v uvodu, smo

predstavili v drugem poglavju.

2.1 Programski jezik PHP

PHP je bila prvotno kratica, ki je označevala osebno domačo stran (ang. Personal Home

Page). Ko se je pri uporabi PHP-ja zvišala njegova uporabnost in zmogljivost (in ko je bil

uporabljen v različne profesionalne namene), je prešel pomen kratice PHP v

»Hipertekstovni Predprocesor« [18].

Na uradni strani PHP-ja lahko zasledimo, da je PHP skriptni jezik, ki se široko uporablja v

splošne namene, poleg tega pa je še posebej primeren za razvoj spleta in je lahko vgrajen


4

v HTML (ang. HyperText Markup Language). Da je lahko PHP vgrajen v obliki HTML

pomeni, da lahko v standardno HTML stran dodamo PHP in na koncu dobimo dinamične

rezultate. Ta atribut omogoča, da je PHP lahko dostopen za vsakogar, ki pri svojem delu

uporablja HTML jezik [18].

PHP je skriptni jezik, ki je nasproten programskemu jeziku: PHP je bil zasnovan za

ustvarjanje spletnih skriptov in ne za ustvarjanje samostojnih aplikacij (čeprav lahko z

nekaj dodatnega truda tudi v PHP ustvarimo aplikacije). PHP skript začne teči šele po

dogodku; na primer, ko uporabnik že predloži obliko ali pa gre na URL (ang. Uniform

Resource Locator) [18].

PHP deluje na strani strežnika, kar pomeni, da za izvajanje le tega potrebujemo namenski

strežnik. Strežniška aplikacija, kot je Apache ali IIS (ang. Internet Information Services),

je nujno potrebna in vsi PHP skripti morajo biti dostopni preko URL naslova. Različica

križne-platformne tehnologije pomeni, da PHP deluje na različnih operacijskih sistemih

kot so Windows, Unix (in njegove številne različice) in Macintosh. Potrebno pa je

poudariti še eno pozitivno lastnost PHP-ja. To je, da PHP skripti, ki so napisani na enem

strežniku, običajno delujejo tudi na drugem strežniku, z malo spremembami ali pa celo

brez njih [18].

PHP predstavlja temelj naše spletne aplikacije, saj nam predstavlja celotno strukturo, s

katero smo zgradili spletno aplikacijo. Prednost pri samem kodiranju je bila ta, da za

razvoj nismo potrebovali nikakršnih posebnih razvijalskih orodij, saj smo lahko kodo pisali

neposredno v beležnico. Vendar smo zaradi večje podpore uporabili tudi druga brezplačna

razvijalska orodja.

2.2 Delovanje programskega jezika PHP

PHP je strežniško naravnan jezik, kar pomeni, da se napisana skripta izvaja na

gostiteljevem računalniku, ki ga imenujemo strežnik. Ko gre obiskovalec na spletno stran,

ki je napisana v PHP, jo strežnik prebere in procesira glede na scenarije, ki so zapisani v

skripti (Slika 2.2). PHP koda narekuje strežniku, kako naj se spletna stran sestavi, pošlje se

tudi HTML koda do spletnega brskalnika, ki jo brskalnik prebere kot standardno HTML

stran [18].


5

Slika 2.2 Klic dinamične spletne strani

Slika 2.3 prikazuje klasični klic strani in odgovor na zahtevo. Če strežniška skriptna koda

ni vključena, lahko zaženemo HTML strani v brskalniku brez uporabe strežnika. Za spletni

brskalnik in za uporabnika ni opazne razlike med dokumentoma domov.html in

domov.php, toda bistvena razlika je v tem, kako je bila spletna stran zgrajena [18].

Slika 2.3 Klic statične spletne strani


6

Spodaj so navedene nekatere glavne značilnosti PHP-ja, ki predstavljajo prednost pri

njegovem delovanju in uporabi:

Odprto koden.

Enostavno ga vključimo v HTML.

Platformno neodvisen, deluje na vseh platformah.

Enostavna povezava z MySQL.

Veliko spletne podpore.

Dokumentacija v različnih jezikih.

Enostaven za učenje.

Stabilen.

Enostavna povezava z uporabnimi knjižnicami.

Visok nivo varnosti [17].

V PHP poznamo proceduralno in objektno orientirano programiranje. Slednje je

namenjeno za ponovno uporabo in lažje vzdrževanje ter pregledovanje. V okviru PHP se je

razvilo tudi veliko okvirov, ki nam omogočajo gradnjo blokov in oblikovno strukturo za

hiter razvoj aplikacij. Okvirji kot so CakePHP, Symfony, CodeIgniter, Yii Framework in

Zend okvirji omogočajo podobne funkcionalnosti kot drugi aplikacijski okvirji.

Spodnja Slika 2.4 prikazuje izvajanje PHP kode, ki se izvede na strežniku in se nato pošlje

na uporabnikov brskalnik v obliki HTML. HTML se dinamično sestavi na strežniku.

V času razvijanja aplikacije nam je bila v veliko pomoč spletna podpora, ki nam je nudila

veliko pomoči in primerov pri gradnji spletne aplikacije.


7

Slika 2.4 Primer izvajanja PHP kode

2.3 Podatkovna baza MySQL

Podatkovna baza je skupek podatkov, ki opisujejo isto temo oz. cilj. Uporabnik dostopa do

teh podatkov, ne da bi moral vedeti, kako so ti podatki organizirani v podatkovni bazi. Do

te podatkovne baze lahko dostopajo le uporabniki, ki imajo dovoljen dostop [1].

MySQL je svetovno znana odprtokodna podatkovna baza. Najpogosteje se uporablja v

kombinaciji s PHP. MySQL programska oprema se nahaja v podatkovnem strežniku, ki

shranjuje dejanske podatke [19].

MySQL je relacijska baza podatkov, ki lahko deluje kot samostojen podatkovni strežnik ali

pa v kombinaciji z ostalimi tehnologijami. Vse poizvedbe se izvršujejo z jezikom SQL [2].

MySQL odlikuje visoka zanesljivost, hitro delovanje, prilagojenost in nenehen razvoj.

Strežnik MySQL lahko upravljamo na dva načina: s pomočjo grafičnega uporabniškega

vmesnika (MyAdmin,MySQL Front …) ali pa z ukazno vrstico. Slednje je počasnejše in

pri veliki bazi podatkov postane tudi precej nepregledno [2].

Z vključitvijo podatkovne baze v spletno aplikacijo je lahko nekaj podatkov generiranih s

strani PHP, pridobljenih iz MySQL, kot to prikazuje Slika 2.5. To omogoča, da je vsebina


8

na strani generirana dinamično in je tudi bolj prilagodljiva, namesto, da je direktno

zapisana v HTML. MySQL je odprtokodna aplikacija, podobno kot PHP – to pomeni, da je

namenjena za prosto uporabo in z možnostjo direktnega spreminjanja izvorne kode [18].

PHP nam v kombinaciji s podatkovno bazo MySQL omogoča hitro in zanesljivo

delovanje, kot bomo tudi kasneje spoznali. Prav tako ima MySQL integriranih nekaj

funkcionalnosti v obliki generiranja kode PHP, kar nam je še dodatno olajšalo delo pri

razvijanju aplikacije.

Slika 2.5 Spletna aplikacija z uporabo podatkovne baze

Spodaj smo navedli nekatere glavne značilnosti, ki ponazarjajo, zakaj smo uporabili

podatkovno bazo MySQL.

Glavne značilnosti so:

Večprocesorski način delovanja.

Podpira različne programerske vmesnike.

Podpira različne operacijske sisteme.

Podpira več različnih in daljših nizov v stolpcih.

Hitro združevanje podatkov.

Podpora funkcijam SQL z lastno optimizirano knjižnico.

Mešanje tabel iz različnih zbirk pri povpraševanju za podatki.

Podpira različne pisave in nabore znakov.


9

Fiksna in prilagodljiva dolžina vpisov.

Pomoč v spletni obliki.

2GB+ podatkov na tabelo.

Licenca GNU.

Podpira različne nabore znakov [15].

2.4 SQL

SQL je standarden, interaktiven in programski jezik za pridobivanje informacij in

posodabljanje informacij v podatkovni bazi. Čeprav je SQL ANSI (ang. American

National Standards Institute) in ISO (ang. International Organization for Standardization)

standard, veliko podatkovnih baz podpira lastniške SQL razširitve standardnega jezika

[13].

SQL jezik se ne uporablja za splošne namene, kot npr. C++ ali Java. Namesto tega je

strogo namenjen delu s podatki v relacijskih bazah [16].

S SQL lahko [16]:

Ustvarimo bazo, z vključno vsemi tabelami in relacijami.

Napolnimo podatkovne tabele.

Spremenimo podatke v tabelah.

Brišemo podatke iz tabel.

Pridobimo specifične informacije iz tabel.

Odobravamo in preklicujemo dostop do podatkovnih tabel.

Zaščitimo tabele pred korupcijo zaradi možnih konfliktov ali uporabniških napak.

Navedli smo nekaj osnovnih SQL ukazov za delo z bazo, ki prikazujejo uporabo SQL

ukazov. SELECT ukaz je namenjen za pridobivanje podatkov iz baze. Z UPDATE

ukazom posodobimo obstoječe podatke, ki so že v podatkovni bazi. DELETE ukaz je

namenjen brisanju podatkov iz podatkovne baze. Ukazom SELECT, UPDATE in

DELETE lahko dodamo tudi WHERE stavek, ki omogoča dodatno filtriranje podatkov.

Z INSERT ukazom izberemo in dodamo podatke v podatkovno bazo.


10

Primeri uporabe osnovnih SQL ukazov

SELECT (izbiranje)

SELECT *

FROM uporabniki

WHERE Uporabnisko_ime='Mico' and Geslo='Rogl'

UPDATE (posodabljanje)

UPDATE uporabniki

SET Ime='Mitja', Priimek='Rogl',

Email='[email protected]',Uporabnisko_ime='Mico'

WHERE Uporabnisko_ime='Mico'

DELETE (brisanje)

DELETE FROM uporabniki

WHERE Uporabnisko_ime='Mico'

INSERT (dodajanje)

INSERT INTO uporabniki

VALUES('','Mitja','Rogl','[email protected]','Mico','Rogl')


11

3 SPLET 2.0

Pojem Splet 2.0 razumemo kot drugo generacijo svetovnega spleta. Splet 2.0 v ospredje

postavlja:

splet kot platformo,

splet udeležencev,

večjo dinamičnost in boljšo organizacijo spletnih medijev.

Termin ne temelji na spremembi specifikacij, ampak na spremembah v dojemanju, razvoju

in uporabi svetovnega spleta [11].

3.1 Značilnosti Spleta 2.0

Pri spletu 2.0 se uporabljajo standardi HTML in CSS (ang. Cascading Style Sheets), saj to

omogoča delo v številnih platformah in pomaga pri večji dostopnosti. AJAX (ang.

Asynchronous JavaScript And XML) tehnologija se uporablja za gradnjo bogatih

uporabniških vsebin. Z uporabo AJAX so lahko spletne strani bolj funkcionalne in

intuitivne. V spletu 2.0 se podatki izmenjujejo z uporabo spletnih virov in spletnih storitev.

To pomeni, da enostavno prejemamo posodobitve vsebin iz spletnih mest, ki uporabljajo

spletne vire (npr. RSS (ang. Rich Site Summary)). Poleg tega lahko spletne storitve

omogočajo, da ena stran pridobi podatke iz drugih mest. V spletne strani pogosto

vključimo orodje za socialno mreženje, kot so npr. blogi in forumi, ki omogočajo

komuniciranje uporabnikov med seboj [20].

Čeprav nobena od teh funkcij ali vidikov razvoja, ki jih uporabljamo za izraz splet 2.0, ni

nova, opisuje sedanjo generacijo spletnih strani, ki dobro izkoristijo HTML in CSS.

Vendar pa to ne pomeni, da je stran, ki uporablja katero od teh funkcij, nujno tudi dobra

[20]. V naši spletni aplikaciji smo uporabili veliko elementov HTML5 in CSS3, ki so

naredili stran bolj bogato, s tem pa smo tudi izboljšali uporabniško izkušnjo.

Kot prikazuje spodnja Slika 3.1, vidimo tri glavne sestavine, ki predstavljajo splet 2.0:


12

Preporod spletnega gospodarstva.

Nova raven tehnološke interaktivnosti med spletnimi stranmi in storitvami.

Digitalni domorodci predstavljajo novo družbo, ki izhaja iz nove vrste spletnih

skupnosti in socialnih mrež (spletni sistemi).

Slika 3.1 Sestavljanka splet 2.0

V okviru spleta 2.0 in razvijanja naše aplikacije smo se držali načela, kot ga prikazuje

naslednja Slika 3.2, s čimer smo olajšali spreminjanje in vzdrževanje spletne aplikacije.

Slika 3.2 Koraki izdelovanja spletne aplikacije

Splet 2.0

Ljudje Digitalni

domorodci

Proces Internetna ekonomija

Tehnologija Bralno/Pisalni

splet

HTML

vsebina

CSS Predstavitev

Javascript Obnašanje

Bogata uporabniška izkušnja


13

3.2 Tehnologija HTML5 in CSS3

Tehnologija HTML5 je zadnja iteracija označevalnega jezika, ki vsebuje nove funkcije oz.

izboljšave obstoječih funkcij. Pri HTML5 ne gre za preoblikovanje prejšnjih različic

jezika, saj HTML5 vsebuje vse veljavne elemente iz prejšnjih različic HTML4 in XHTML

(ang. Extensible HyperText Markup Language) 1.0. Bil je zasnovan z osnovnimi načeli, da

deluje na vseh platformah, ter da je kompatibilen s starejšimi verzijami spletnih

brskalnikov. HTML5 ne predstavlja revolucije, ampak evolucijo. HTML5 zagotavlja, da

lahko spletni oblikovalci na enostaven način dosežejo večjo odzivnost spletne strani [5].

HTML5 nam ponujajo veliko različnih elementov, ki jih lahko uporabimo namesto

dosedanjih <div> elementov. Omogočajo nam lažje opisovanje in postavljanje elementov.

Prednost HTML5 je, da večina brskalnikov že v celoti podpira nove elemente [7].

V naši aplikaciji smo uporabili le nekaj elementov, ki jih je bilo smotrno uporabiti.

Še en ločen, a nič manj pomemben del oblikovanja spletne strani je Cascading Style Sheets

(CSS). CSS je stil jezika, ki opisuje, kako je HTML označevanje predstavljeno in

oblikovano. CSS3 je najnovejša različica CSS standarda. CSS3 vsebuje skoraj vse, kar je

vključeno v CSS2.1 (prejšnja različica). Prav tako dodaja nove funkcije, da bi razvijalcem

pomagala rešiti številne težave brez potrebe po kompleksnih skriptih in dodatnih slikah.

Nove funkcije v CSS3 omogočajo podporo za dodatne selektorje, dodajanje senc,

ukrivljanje robov, gradiente, več ozadij, animacije, transparentnost in mnogo več [5].

CSS3 nam je pomagal pri oblikovanju izgleda same spletne aplikacije, saj smo lahko

namesto vstavljanja slik uporabili nove gradnike iz CSS3. Z ustreznimi gradniki smo

povečali dinamičnost in izboljšali uporabniško izkušnjo pri uporabi spletne aplikacije.

3.3 Tehnologija Javascript

Javascript je interpretiran (in ni preveden) objektno orientiran programski jezik, ki je bil

razvit za uporabo skupaj z ostalimi spletnimi orodji. Ni namenjen za uporabo kot

samostojen programski jezik. Zasnovan je tako, da deluje skupaj z HTML za kreiranje

interaktivnih spletnih strani. Javascript se uporablja za pisanje aplikacij na strani

uporabnikovega brskalnika, kar pomeni, da se bo Javascript koda poslala na uporabnikov

računalnik, ko se spletna stran naloži. Koda JavaScript se potem izvaja po vrsticah, ki jih

nato interpretira uporabnikov brskalnik. Javascript je eden izmed skriptnih jezikov, katerih

namen je dostop in spreminjanje komponent obstoječega vmesnika – v tem primeru je


14

vmesnik HTML dokument. Javascript je omejen na probleme, ker ne podpira dostopa do

zunanjih virov podatkov, ne glede na to, ali se nahajajo na lokalnem računalniku ali na

oddaljenem strežniku. Glavni izziv pri učenju HTML/JavaScript je, da ni popolnoma

standardizirano okolje. Raznolike oblike HTML in JavaScript povzročata težave tudi za

izkušene programerje. HTML ali Javascript dokumente lahko ustvarimo s katerim koli

tekstovnim oblikovalnim programom, ker sta tako HTML kot tudi Javascript tekstovna

dokumenta. Tudi najosnovnejša aplikacija Windowsa, beležnica, je ustrezna izbira. Ko

enkrat ustvarimo HTML ali Javascript dokument, lahko le tega poženemo v brskalniku [4].

Knjižnica JQuery je ustvarjena za pomoč spletnim oblikovalcem in razvijalcem pri pisanju

in JavaScript interakciji za hitro in jedrnato vrsto zavitih metod okoli domačih funkcij

Javascript. JQuery ne ponuja novih funkcionalnosti, vendar prevzame obstoječe Javascript

APIje (ang. Application Programming Interface) in jih ponudi na enostaven način skozi

JQuery sintakso [14].

Knjižnica JQuery nam je bila v veliko pomoč pri doseganju dinamičnosti in interaktivnosti

spletne aplikacije; to smo dosegli s pomočjo gradnikov Slider, Slide-up/down. Tehnologija

JavaScript nam je v kombinaciji z knjižnico JQuery omogočala, da smo razvili določene

funkcionalnosti na strani samega odjemalca.

3.4 Tehnologija AJAX

Ajax je kratica za asinhroni Javascript in XML (ang. Extensible Markup Language).

Čeprav AJAX ne predstavlja tehnologije, ampak stil programiranja na nevsakdanji način,

ki omogočajo razvijalcu izgradnjo aplikacije, ki je bolj privlačna in prijazna do

uporabnika, brez osveževanja celotne strani. AJAX nam omogoča dodatno plast med

uporabnikovim brskalnikom in strežnikom. Hkrati izvede strežniško komunikacijo v

ozadju, strežniku odda zahteve ter nato prikaže obdelane rezultate, kot to prikazuje Slika

3.3. Rezultate lahko enostavno integriramo na spletno stran brez osveževanja ali

ponovnega nalaganja strani [8].

AJAX uporablja asinhroni prenos podatkov med brskalnikom in strežnikom, ki omogoča,

da zahteva manjše dele informacij namesto celotne strani [12].

AJAX lahko izboljša izkušnjo uporabnikov strani, vendar jo lahko tudi poslabša, kadar se

le ta uporablja neustrezno. Pomembno je, da uporabniki krmarijo skozi vsebine z dobrimi


15

starimi hiperpovezavami. AJAX je najbolje uporabiti poleg tradicionalnih spletnih

razvojnih paradigem, namesto da jih spreminjamo ali nadomeščamo [3].

Slika 3.3 prikazuje razliko med klasično spletno aplikacijo, ki za vsak zahtevek osveži

celotno stran, medtem, ko s pomočjo AJAX-a obdelamo in osvežimo le del strani. Razliko

pri uporabi AJAX-a lahko vidimo, kadar stran vsebuje veliko podatkov, naloženih iz

podatkovne baze in bi vsako ponovno osveževanje pripeljalo do počasnega nalaganja

spletne strani.

Tehnologijo AJAX smo uporabili v aplikaciji, da smo nekatere funkcionalnosti izvedli v

ozadju (asinhrono), brez ponovnega osveževanja strani.

Slika 3.3 Primerjava klasične spletne aplikacije in spletne aplikacije z uporabo AJAX-a

[10]

Spodaj so naštete nekatere glavne prednosti in slabosti AJAX-a.

PREDNOSTI:

Omogoča, da se ustvarjajo hitre in intuitivne spletne aplikacije.

Spodbuja razvoj vzorcev in okvirov, ki zmanjšujejo čas razvoja skupnih nalog.

Omogoča uporabo obstoječih tehnologij in funkcij, ki so že na voljo v vseh

sodobnih spletnih brskalnikih.


16

Omogoča uporabo mnogih obstoječih razvijalskih znanj[3].

SLABOSTI:

Dodajanje AJAX-a na spletno stran brez predhodnega analiziranja ali razloga lahko

zmanjšuje učinkovitost spletne strani.

Ker iskalni mehanizmi ne izvedejo JavaScript kode med indeksiranjem strani, ne

morejo indeksirati kakršne koli vsebine, ki je ustvarjena s JavaScriptom.

JavaScript je lahko onemogočen na brskalnikovi strani, zaradi katere je AJAX

neuporaben.

Nazaj in Naprej gumbi v brskalnikih ne proizvedejo enakega rezultata tako kot pri

klasičnih spletnih straneh, razen, če je AJAX aplikacija programirana tako, da

podpira nalaganje in shranjevanje stanja [3].


17

4 NAČRTOVANJE SPLETNE APLIKACIJE

4.1 Analiza zahtev

V sklopu analize zahtev smo sprva predstavili problem, ki se navezuje na arhiviranje

različnih vsebin. Potrebno je bilo definirati začetne zahteve, za katere je bilo zaželeno, da

bi se implementirale v spletni aplikaciji. Naš cilj je bil, da bi spletna aplikacija omogočala

shranjevanje različnih vrst spletnih vsebin, ki bi nam predstavljale opis dejanske fizične

vsebine. Aplikacija bi omogočala dodajanje različnih vsebin, ki bi jih vsak uporabnik

opisal s svojimi atributi. Vse vsebine bi bile zbrane na enem mestu, poleg tega pa bi jih

bilo možno na enostaven način spreminjati ali odstraniti iz arhiva. Spletna aplikacija bi

omogočala enostavno in hitro iskanje po arhivu oziroma napredno za zahtevnejše

uporabnike. Vse vsebine bi bile pod nadzorom uporabnika, ki bi za dostop do podatkov v

arhivu potreboval avtorizacijo. V sklopu analize pa je bilo poleg tega potrebno narediti tudi

okviren uporabniški vmesnik. Naš cilj je bil uporabiti tehnologiji HTML5 in CSS3, s

pomočjo katerih lahko na enostaven način dosežemo bogate učinke na uporabniškem

vmesniku.

Za širši pregled in informacije o vsebinah smo dodali statistiko celotne spletne aplikacije.

Glede na vsebine v arhivu bi bile na voljo različne statistike:

Število vseh vsebin v arhivu.

Število vsebin glede na tip vsebine.

Vsebine glede na letnice.

V okviru študije problema arhiviranja smo identificirali različne funkcionalnosti, ki naj bi

jih vključili v spletno aplikacijo. Glede na različne možne funkcionalnosti, smo vsaki

izmed njih določili prioriteto. Na podlagi prioritet smo se odločili za iterativen razvoj

spletne aplikacije. Spodaj so naštete glavne funkcionalnosti glede na iteracije.

1. Iteracija:

a. Osnoven uporabniški vmesnik.

b. Prijava in registracija.

c. Vpisovanje in izpisovanje vsebin.


18

d. Osnovno iskanje.

e. Spreminjanje vsebin.

f. Dodajanje poljubnih tipov in atributov.

2. Iteracija:

a. Statistika vsebin.

b. Napredno iskanje.

c. Uporaba tehnologij AJAX in JQuery.

3. Iteracija:

a. Uporaba grafov za prikaz statistike.

b. Izpis vsebin v .pdf dokument.

4.2 Podatkovna baza

Podatkovna baza predstavlja temelj spletne aplikacije, saj je kasnejše spreminjanje

strukture le te težavno in zamudno. Pri kreiranju E-R diagrama smo morali biti pazljivi, še

posebej pri povezavah med entitetami, ki so morale biti premišljeno narejene. Potrebno je

identificirati posamezne entitete in v okviru le teh dodati še ustrezne atribute, ki bodo

opisovali posamezno vsebino. Ker so se atributi in tipi dodajali dinamično je bilo potrebno

optimizirati entitete, ki bi lahko bile med seboj odvisne. V podatkovni bazi imamo tri

glavne entitete (Slika 4.1): Tip, Atributi in Uporabniki. V ospredju je vmesna entiteta

Vsebine, ki je odvisna od vseh treh entitet. Uporabnik ima možnost, da sam dodaja

poljubne tipe in atribute vsebin. Tip predstavlja vsako vrsto vsebine, kot je npr. knjiga,

film, video … Entiteta Atributi pa opisuje atribute, s katerimi lahko opišemo posamezno

vsebino, npr. naziv, letnica, avtor … Entiteta Uporabniki je namenjena evidenci

uporabnikov, ki so registrirani v spletno aplikacijo. Posebej je potrebno izpostaviti tudi

atribut st_dela, ki združuje posamezne zapise v tabeli v celoto, kar pomeni, da vemo,

katero vsebino sestavljajo posamezni zapisi. Vsaka točno določena vsebina je sestavljena

iz: tipa (npr. knjiga, film …), opisnih atributov (naziv, letnica …) in uporabnika, ki je to

vsebino vnesel v arhiv.


19

E-R diagram, ki je prikazan na spodnji Slika 4.1, smo kreirali s programom MySQL

WorkBench. Tabele smo kreirali s pomočjo spletne aplikacije PHP myAdmin in ročno

dodali nekaj testnih podatkov.

Slika 4.1 E-R diagram spletne aplikacije

SQL poizvedbe smo napisali in preizkušali neposredno s pomočjo spletne aplikacije PHP

myAdmin, ki nam nudi tudi dodatno pomoč pri pisanju SQL poizvedb. Razvili smo

poseben PHP razred, ki je vseboval funkcije s poizvedbami. To nam je omogočilo, da smo

lahko določene poizvedbe večkrat uporabili, namesto da bi jih neposredno vpisovali v

skripte.

V spodnjem delu je prikazan primer funkcije za osnovno iskanje po arhivu, ki nam

omogoča prikaz vsebin glede na podan vhodni parameter »$iskalni_niz«.

S pomočjo spodnje poizvedbe najprej povežemo tabele preko tujih ključev in prikažemo le

tiste rezultate, ki so enaki parametru »$iskalni_niz«. Nato rezultate grupiramo glede na

»st_dela«. Atribut »st_dela« povezuje med seboj vse zapise v tabeli, ki se navezujejo na

isto vsebino.


20

SELECT tip.naziv,(atributi.naziv) AS Naziv,

vsebine.vrednost,uporabniki.ime,st_dela

FROM tip,vsebine,atributi, uporabniki

WHERE tip.id_tipa=vsebine.id_tipa AND

atributi.id_atributa=vsebine.id_atributa AND

uporabniki.id=vsebine.id_uporabnika AND vsebine.vrednost like

'%$iskalni_niz%'

GROUP BY st_dela

Programska koda 1: Iskanje podatkov iz baze

4.3 Uporabniški vmesnik

Namen uporabniškega vmesnika je, da je uporabniku čim bolj prijazen in mu omogoča, da

na enostaven način doseže želen učinek. Upoštevali smo dobre prakse in ločili vsebino

(HTML) od dejanske predstavitve (CSS). Manj pozornosti smo namenili oblikovanju

ozadja in se v večji meri osredotočili na oblikovanje same vsebine. Uporabili smo 3D

učinke, ki pritegnejo pozornost na samo vsebino. Kot lahko zasledimo, so vse sodobne

spletne aplikacije zelo odzivne in dinamične in tudi mi smo sledili temu trendu. To smo

dosegli z uporabo novih funkcij HTML5 in CSS3, ki omogočajo, da brez večjega napora

dosežemo želen učinek. Naš cilj je bil, da bi uporabili čim več sedanjih tehnologij, kot so

HTML5 in CSS3, saj nam te omogočajo izgradnjo bogatega uporabniškega vmesnika. Z

uporabo knjižnice JQuery smo poskrbeli za bogate učinke na strani samega brskalnika.

Uporabniški vmesnik ima centrirano orientacijo in fiksno postavitev, kar nam je omogočilo

dober nadzor nad prikazom strani. Uporabili smo mnogo beline, s pomočjo uporabe

mešanice treh barv, ki prinašajo primerno razpoloženje. Z uporabo gradientov smo

zmanjšali »plastičnost« spletne strani in dosegli mehak občutek prostora v ozadju. Želeli

smo narediti vmesnik, ki je zgrajen na osnovi posameznih gradnikov, ki jih lahko na

enostaven način odstranimo oziroma dodamo. Izogibali smo se klasičnemu izgledu strani,

ki je uokvirjen in nasičen z nepotrebnimi elementi. Zato smo na strani uporabili le tiste

gradnike, ki imajo nekakšen smisel.


21

Vmesnik je sestavljen iz štirih glavnih delov: primarnega vrhnjega menija, sekundarnega

stranskega menija, vsebinskega dela in spodnjega dela (noge). Primarni meni (Slika 4.2) je

pritrjen na vrh zaslona, sestavljen je iz logotipa, navigacijskih povezav ter hitrega iskanja

po strani. V hitro iskanje je vključena funkcija za samo dokončanje, ki uporabniku olajša

iskanje po spletnem arhivu. Spodnji del oziroma noga dodaja povezave iz primarnega

menija.

Slika 4.2 Primarni meni in spodnji del (noga) spletne aplikacije

V vsebinskem delu, ki ga prikazuje Slika 4.3, se nahajajo posamezne vsebine, ki so

predstavljene s pomočjo tabele. Vsebinski del se prilagaja glede na število vrstic v tabeli.

Vsebuje osnovno iskanje in napredno iskanje, ki se na klik raztegne. Vsako vsebino lahko

po potrebi tudi pregledamo in uredimo njene podrobnosti.

Slika 4.3 Prikaz vsebinskega dela spletne aplikacije


22

4.4 Poslovna logika

Poslovna logika zajema funkcionalno delovanje celotne aplikacije. Naš namen je bil, da

poslovno logiko aplikacije ločimo od kreiranja uporabniškega vmesnika (Slika 4.4). To

smo dosegli s tem, da smo naredili razred, ki je sestavljen iz posameznih funkcij. Funkcije

so nam omogočale prikaz posameznih podstrani spletne aplikacije. To nam je omogočilo,

da lažje spreminjamo in vzdržujemo spletno aplikacijo. Sklice na nove podstrani smo

naredili preko ID-jev, namesto da bi vedno znova ustvarili nov PHP dokument. Kot

prikazuje spodnja koda, za vsak unikaten ID uporabimo funkcijo, ki nam vrne vsebinski

del strani. ID v našem primeru predstavlja niz »dodajVsebino«. Spodnji primer prikazuje

dodajanje vsebin, kjer pridobimo izbran niz »dodajVsebino«in izvedemo funkcijo »$fun-

>DodajVsebino();«, ki nam vrne rezultat v obliki forme za dodajanje vsebin.

<a href="index.php?izbira=dodajVsebino">Dodaj vsebino</a>

switch($izbira)

{ case 'dodaj'://izberemo tip vsebine

$fun->Tip();

break;

case 'dodajVsebino'://dodajanje vsebine

$fun->DodajVsebino();

break;

.

.

.

default:

$fun->Index();

break;

}

Programska koda 2: primer klicanja posameznih podstrani

V nasprotnem primeru bi morali za vsako novo funkcionalnost narediti nov PHP

dokument, kar bi nam otežilo delo, ker bi imeli veliko število dokumentov. Prav tako bi se

pri nalaganju nove funkcionalnosti osvežila celotna stran. Spletna aplikacija je zgrajena

tako, da se osvežuje oziroma spreminja le vsebinski del strani, s čimer doprinesemo k višji

hitrosti nalaganja.


23

Slika 4.4 prikazuje, kako je sestavljena struktura celotne spletne aplikacije, prednost takšne

strukture je lažje spreminjanje in dodajanje novih funkcionalnosti. Struktura je rahlo

sklopljena, kar omogoča, da lahko kakšen del strukture zamenjamo in dodamo novega.

Slika 4.4 Struktura izgradnje spletne aplikacije

Za bolj optimizirano delovanje spletne aplikacije smo poskrbeli z uporabo AJAX

tehnologije. Z uporabo AJAX-a smo v funkciji, ki uporablja knjižnico JQuery, pridobili

vse podatke iz forme in jih poslali dokumentu PHP, ki je te podatke obdelal ter vrnil

rezultat, ki smo ga nato izpisali na zaslon. Spodnja koda pridobi vse vhodne podatke iz

forme »#search« in jih pošlje dokumentu »Iskanje_napredno.php«, ki zahtevo obdela

in vrne rezultat, ki se izpiše v div »#seek«.

$.post('Iskanje_napredno.php', $("#search").serialize(),

function(data)

{$('#seek').html(data)});

Programska koda 3: primer obdelave podatkov z AJAX klicem

Uporabniški vmesnik

Poslovna logika

Podatkovna baza


24

5 DELOVANJE SPLETNE APLIKACIJE

5.1 Prijava in registracija

Spletna aplikacija zahteva, da se za uporabo najprej registriramo v sistem. Pri registraciji

smo dodali vtičnik, ki pregleda moč gesla, ki daje uporabniku povratno informacijo o

ustreznosti gesla. Za vpis gesla v bazo smo uporabili šifrirni algoritem MD5, ki geslo

pretvori v unikatne nize cifer. Algoritem MD5 se uporablja v sodobnih aplikacijah za

zaščito gesla. V prijavo smo dodali obrazec za pozabljeno geslo, ki nam na elektronsko

pošto pošlje novo geslo, ki si ga lahko kasneje spremenimo.

Spodnja Slika 5.1 prikazuje obrazca za prijavo in registracijo novega uporabnika. Namen

prijave in registracije je, da ima vsak uporabnik svoj račun, preko katerega dostopa do

svojih vsebin.

Slika 5.1 Registracija in prijava v sistem

5.2 Vpisovanje in pregled vsebin

Za vpis in pregled vsebin moramo biti prijavljeni v sistem. Če želi uporabnik dodati novo

vsebino, mora najprej potrditi tip same vsebine, kar omogoča, da se vsebina kasneje shrani

pod ustrezen tip.


25

Za vpisovanje novih vsebin smo uporabili seznam vseh možnih atributov, s katerimi lahko

uporabnik opiše svojo vsebino. S pomočjo tehnologije Javascript smo poskrbeli, da

atribute poljubno dodaja oziroma jih odstrani, brez da bi se stran ponovno naložila.

Takšen pristop omogoča uporabniku več svobode, saj mu ni potrebno izpolniti atributov, ki

niso relevantni. Pregled vsebin je narejen v tabelarični obliki, kar omogoča strukturiran

pregled vsebin. Vsako vsebino lahko na enostaven način izbrišemo iz arhiva. Tabela

vsebin ima svoj CSS stil; s tem smo dosegli, da je uporabniku čim bolj prijazna in odzivna.

Dodali smo osnovno in napredno iskanje po arhivu. Osnovno iskanje je namenjeno

iskanju po ključnih besedah v primeru, da uporabnik ne ve, kaj točno išče. Zato je

osnovnemu iskanju dodana še funkcionalnost za »samodokončevanje« iskalnih nizov, ki

uporabniku olajšajo iskanje po arhivu. Poleg tega je bilo dodano še napredno iskanje, ki

nam omogoča, da hitreje najdemo želeno vsebino. Napredno iskanje je namenjeno iskanju

točno določene vsebine, preko izbranega tipa in atributa. Uporabi se, ko imamo veliko

število vsebin v arhivu in z osnovnim iskanjem ne pridobimo iskane vsebine.

5.3 Statistika

Pod zavihkom statistika lahko najdemo več različnih statistik spletnega arhiva:

Število vseh vsebin.

Število vsebin glede na vrsto vsebine.

Število vsebin po letnicah.

Prikaz vsebin med dvema letnicama.

Statistika nam nudi dodatno informacijo o vsebinah, ki so shranjene v arhivu. Skozi

statistiko lažje beležimo stanje v arhivu. Za lažjo predstavitev smo dodali tudi grafičen

prikaz v obliki tortnega diagrama, ki slikovno prikaže število vsebin glede na tip vsebine. S

statistiko smo želeli doseči, da uporabniku ponudimo širši pregled nad vsebinami in da

dobi informacijo o količini vsebin v arhivu.

Slika 5.2 prikazuje dejanski izgled statistike, ki se prikaže navadnemu uporabniku.

Sestavljena je iz prikaza števila vseh vsebin v arhivu. Dodani sta še dve tabeli, ki

prikazujeta število vsebin glede na letnico in število vsebin glede na tip vsebine, kot to

prikazuje Slika 5.2. V spodnjem delu je spustni seznam za prikaz po letnicah. Na koncu


26

smo dodali še interaktiven drsnik, ki je namenjen prikazu vsebin med dvema letnicama.

Drsnik je bil izdelan s pomočjo knjižnice JQuery-ui, s katerim smo želeli uporabniku

olajšati iskanje vsebin med dvema letnicama.

Slika 5.2 Prikaz statističnih podatkov


27

6 ZAKLJUČEK

V diplomskem delu smo najprej spoznali tehnologije, ki smo jih uporabili pri razvijanju

spletne aplikacije. Dodali smo še nekaj osnovnih primerov, ki prikazujejo delovanje

posamezne tehnologije. V drugem delu smo predstavili praktični del diplomskega dela.

Prikazali smo celoten cikel gradnje spletne aplikacije. Začeli smo pri ideji in zahtevah,

načrtovanju, opisu gradnje posameznih komponent in končali s prikazom delovanja

aplikacije. Pri razvijanju spletne aplikacije smo preizkusili in uporabili nove tehnologije, s

katerimi do zdaj še nismo delali, zato smo morali iskati pomoč preko spletnih virov. Kot

je že omenjeno, smo aplikacijo razvijali po iteracijah, kar nam je omogočilo, da smo

najprej razvili funkcionalnosti, ki so najbolj pomembne. S tem smo prišli do postopnega

dograjevanja spletne aplikacije.

Težave so se pojavile pri uporabi novih tehnologij, ki jih še nismo uporabljali, zato smo

morali v takšnem primeru najprej narediti demo primerek in ga nato vstaviti v spletno

aplikacijo. Spoznali smo, da je za dobro narejeno spletno aplikacijo potrebno imeti dober

načrt, saj le ta predstavlja temelje za kasnejšo gradnjo spletne aplikacije. Prav tako smo

ugotovili, da je pomembno, da si dobro pripravimo temelje in standarde kodiranja, saj nam

to omogoča lažje strukturiranje spletne aplikacije. Veliko smo se naučili pri uporabi

knjižnice JQuery, ki ima zares veliko spletno podporo in mnogo prednosti pri gradnji

današnjih spletnih aplikacij. Prednosti celotnega diplomskega dela predstavljata uporaba in

opis širokega spektra tehnologij, saj se nismo omejili le na primarne tehnologije, ampak

smo vključili tudi druge podporne tehnologije, ki dajejo aplikaciji večjo dinamičnost.

Zaključimo lahko, da nobena spletna aplikacija ni končna, vedno še lahko dodajamo nove

funkcionalnosti oziroma posodabljamo obstoječe. Potrebno se je zavedati, da ima razvita

spletna aplikacija svoje prednosti in pomanjkljivosti, kot vse druge spletne aplikacije.


28

7 VIRI IN LITERATURA

[1] Bilke, Petra. Spoznajmo PHP in MySQL. Nova Gorica: Flamingo, 2002.

[2] Bohinc, Petra. e-uspeh. 17. Marec 2009. Dostopno na: http://www.e-

uspeh.com/kaj-je-mysql.html [8. avgust 2012].

[3] Brinzarea-Iamandi, Bogdan, Christian Darie, in Audra Hendrix. AJAX and PHP

Building Modern Web Applications,2ed. Birmingham: Packt, 2009.

[4] Brooks, David R. Guide to HTML, Javascript. Eagleville, PA 194403: Springer,

2011.

[5] Goldstein, Alexis, Louis Lazaris, in Estelle Weyl. HTML5 & CSS3 for the Real

World. Collingwood: SitePoint Pty. Ltd., 2011.

[6] Greenspan, Jay, in Brad Bulger. MySQL/PHP Database Applications. Foster City:

M&T Books, 2001.

[7] Kyrnin, Jennifer. Web design. brez datuma. Dostopno na:

http://webdesign.about.com/od/html5/a/html_5_whats_new.htm[13. avgust 2012].

[8] Moncur, Michael, in Phil Ballard. Teach Yourself Ajax, JavaScript and PHP All in

One. Indiana: Sams, 2008.

[9] Nations, Daniel. What is a Web Application? 2012. Dostopno na:

http://webtrends.about.com/od/webapplications/a/web_application.htm [1. avgust

2012].

[10] PHP Letter. brez datuma. Dostopno na: http://www.phpletter.com/Ajax-Center/

[13. avgust 2012].

[11] Polančič, Gregor. Socialno programje. Neobljavljeno delo. 2009.

[12] Refsnes, Hege, Ståle Refsnes, Jim Kai Refsnes, Egil Jan Refsnes, in Dobbs Kelly

Henthorne. Learn Javascript and AJAX with w3schools. Indianapolis, Indiana:

Wiley Publishing, Inc., 2010.

[13] Rouse, Margaret. SearchSQLServer. September 2005. Dostopno na:

http://searchsqlserver.techtarget.com/definition/SQL [9. avgust 2012].

[14] Rutter, Jake. Smashing JQuery. West Sussex: Wiley, 2011.


29

[15] Štrancar, Matjaž, in Simon Klemen. PHP in MySQL na spletnem strežniku

Apache. Ljubljana: Pasadena, 2002.

[16] Taylor, Allen G. SQL all in one desk reference for dummies. Hoboken: Wiley

Publishing, 2007.

[17] tutorialchip.com. Web design library. 17. avgust 2012.

http://www.webdesign.org/web-programming/php/advantages-of-php-

programming.21905.html (poskus dostopa 20. avgust 2012).

[18] Ullman, Larry. PHP 6 and MySQL 5 for Dynamic Web Sites. Berkeley: Peachpit

Press, 2008.

[19] Ullman,Larry. PHP and MySQL for Dynamic Web Sites, Fourth Edition. Berkeley:

Peachpit Press, 2012.

[20] Zervaas, Quentin. Practical Web 2.0 Applications with PHP. New York: Apress,

2008.


30

8 PRILOGE

8.1 CD z datotekami spletne aplikacije

Diplomski nalogi je priložen CD, na katerem se nahajajo datoteke spletne aplikacije, ki

smo jo razvili.

navodila za pisanje diplomskih nalog um feri - core.ac.uk · skripta na strani odjemalca se ukvarja...

Documents