Spletna aplikacija RECVENTS za lažjo organizacijo in ...Večina teh aplikacij temelji na arhitekturi odjemalec-strežnik, kjer odjemalec vnaša informacije, medtem ko jih strežnik

Fakulteta za elektrotehniko, računalništvo in informatiko

Smetanova ulica 17 2000 Maribor, Slovenija

Vasil Josifovski

Spletna aplikacija RECVENTS za lažjo

organizacijo in spremljanje rekreativnih dogodkov

DIPLOMSKO DELO

Maribor, september 2013

II

Diplomsko delo univerzitetnega študijskega programa

Spletna aplikacija RECVENTS za lažjo organizacijo in

spremljanje rekreativnih dogodkov

Študent: Vasil Josifovski

Študijski program: UN ŠP Računalništvo in informacijske tehnologije

Mentor: doc. dr. Iztok Fister

Somentor: red. prof. dr Janez Brest

Maribor, september 2013

III

IV

ZAHVALA

Za pomoč in vodenje pri opravljanju

diplomskega dela se zahvaljujem mentorju doc.

dr. Iztoku Fisteru ter somentorju red. prof. dr.

Janezu Brestu. Posebna zahvala velja sestri

Jani, staršem in teti Vesni, ki so mi pomagali

pri študiju in me usmerjali skozi mojo

življenjsko pot. Hvala tudi punci Moniki za vso

dano razumevanje, podporo in pomoč.

V

Spletna aplikacija RECVENTS za lažjo organizacijo

in spremljanje rekreativnih dogodkov

Ključne besede: Spletna aplikacija, PHP, Strežniške tehnologije, Ogrodje

UDK: 004.777(043.2)

Povzetek

Za odlično izvedbo različnih rekreativnih športnih dogodkov je najpomembnejši faktor

sistematična priprava in organizacija celotnega dogodka, kot npr. prijava na dogodek,

spremljanje udeležencev in sama izvedba prireditve. Aplikacija RECVENTS ponuja rešitev

vsem, ki delajo na področju organizacije rekreativnih športnih dogodkov. Glavni poudarek

diplomske naloge je na organiziranju dogodkov s pomočjo aplikacije, informiranju o

dogodkih s programskim jezikom PHP in spremljanju doseženih rezultatov udeležencev s

pomočjo Node.js in Socket.io. Cilj diplomske naloge je izdelati spletno aplikacijo, ki

omogoča organizatorjem rekreativnih športnih prireditev enostavnejše in hitrejše

organiziranje, publiciranje (reklamiranje) informacij o rekreativnih dogodkih, ter lažji

pretok informacij na relacijah organizator-udeleženec in udeleženec-udeleženec.

Aplikacija omogoča uporabnikom lažjo in hitrejšo prijavo na dogodek, istočasno pa

ponuja tudi spremljanje rezultatov udeležencev športne prireditve v realnem času, njihovo

analizo, ter dostop do arhivov o rezultatih udeležencev vseh minulih prireditev. Cilj

diplomske naloge je aplikacija, ki omogoča uporabnikom hitro ustvarjanje, dostopanje in

komentiranje dogodkov, ter lažji pretok informacij.

VI

RECVENTS, web application to facilitate the

organization and monitoring of recreational events

Key words: Web application, PHP, Server-side scripting, Framework

UDK: 004.777(043.2)

Abstract

The most important factor for the excellent performance of the various recreational

sporting events is the systematic preparation and organization of the whole event. That

includes registration for the event, monitoring of the participants and implementation of

the event. RECVENTS application offers a solution for all who work in area of the

organization of recreational sports events. The main focus of the diploma work is to

organize events using the application, to inform about the events in the programming

language PHP and monitoring the performance of the participants using Node.js and

Socket.io. The general aim of the diploma work is to create a web application which makes

the organization of the recreational sports events simpler and faster, allows a promotion

(advertising) of the recreational events, as well as facilitating the flow of information on

the basis the organizer-participant and participant-participant. The application allows the

users to register for the event easier and faster, while also offers monitoring of the results

of the participants sporting events in real time and analyze them. It also allows to the user

easy access to the archives which consists of all of the results for all participants in past

events. Another aim of this diploma work is also to create an application that allows the

users to create, quickly access and comment the events, as well as to facilitate the flow of

the information in general.

VII

KAZALO

1 UVOD ............................................................................................................................. - 1 -

2 TEHNOLOGIJE ZA IZDELAVO SPLETNIH APLIKACIJ .......................................... - 3 -

2.1 Tehnologije s strani odjemalca ................................................................................................... - 3 -

2.1.1 Hipertekstovni označevalni jezik ............................................................................................. - 3 -

2.1.2 Kaskadne stilske podloge ........................................................................................................ - 5 -

2.1.3 JavaScript in jQuery ................................................................................................................ - 6 -

2.1.4 Asinhroni JavaScript in XML .................................................................................................... - 7 -

2.2 Strežniške tehnologije ................................................................................................................ - 7 -

2.2.1 Orodja za osebno spletno stran ............................................................................................... - 8 -

2.2.2 Node.js ................................................................................................................................... - 9 -

2.3 Tehnologije za upravljanje s podatkovnimi bazami .................................................................. - 10 -

2.3.1 MySQL .................................................................................................................................. - 10 -

2.4 Razvojno ogrodje Codeigniter .................................................................................................. - 11 -

2.5 Urejevalnik Sublime Text 2 ....................................................................................................... - 13 -

3 ORGANIZACIJA IN SPREMLJANJE REKREATIVNIH ŠPORTNIH DOGODKOV ......... - 14 -

3.1 Organizacija rekreativnih športnih dogodkov nekoč in danes ................................................... - 14 -

3.2 Načrtovanje aplikacije RECVENTS ............................................................................................. - 15 -

3.3 Implementacija aplikacije RECVENTS........................................................................................ - 18 -

3.3.1 Implementacija funkcionalnosti aplikacije ............................................................................. - 18 -

3.3.1.1 Spletna prijava.............................................................................................................. - 19 -

3.3.1.2 Organizacija dogodkov.................................................................................................. - 20 -

3.3.1.3 Prijava na dogodek ....................................................................................................... - 23 -

3.3.1.4 Spremljanje dogodkov .................................................................................................. - 24 -

3.3.1.5 Poročanje in spremljanje rezultatov v realnem času ...................................................... - 25 -

3.3.1.6 Arhiviranje in pregled informacij ................................................................................... - 27 -

3.3.2 Implementacija uporabniškega vmesnika .............................................................................. - 29 -

3.3.2.1 Glavni meni .................................................................................................................. - 29 -

3.3.2.2 Vsebina strani............................................................................................................... - 29 -

VIII

3.3.2.3 Noga strani ................................................................................................................... - 31 -

3.3.2.4 Komunikacija uporabnik-aplikacija ................................................................................ - 31 -

4 UPORABA APLIKACIJE RECVENTS V PRAKSI .................................................... - 34 -

4.1 Scenarij 1: Vloga organizatorja ................................................................................................. - 34 -

4.2 Scenarij 2: Vloga tekmovalca (udeleženca) ............................................................................... - 38 -

4.3 Scenarij 3: Vloga sodnika .......................................................................................................... - 40 -

4.4 Analiza delovanja aplikacije ..................................................................................................... - 40 -

5 ZAKLJUČEK ................................................................................................................ - 42 -

VIRI ...................................................................................................................................... - 43 -

PRILOGE ............................................................................................................................. - 45 -

Naslov Študenta.................................................................................................................................... - 45 -

Kratek življenjepis ................................................................................................................................. - 45 -

IX

KAZALO SLIK

SLIKA 1: STRUKTURA IMENIKA OGRODJA CODEIGNITER ........................................................................................ - 12 -

SLIKA 2: RAZVOJNO OGRODJE CODEIGNITER ..................................................................................................... - 13 -

SLIKA 3: ZGLED UREJEVALNIKA SUBLIME TEXT 2 ................................................................................................. - 13 -

SLIKA 4: APLIKACIJSKI MODEL APLIKACIJE RECVENTS ......................................................................................... - 15 -

SLIKA 5: PROJEKT RAZDELJEN NA PODPROJEKTE .................................................................................................. - 16 -

SLIKA 6: DIAGRAM E-R ZA PODATKOVNO BAZO ................................................................................................. - 17 -

SLIKA 7: GLAVNI MENI ................................................................................................................................. - 29 -

SLIKA 8: VSEBINA DOMAČE STRANI ................................................................................................................. - 31 -

SLIKA 9: NOGA SPLETNE STRANI ..................................................................................................................... - 31 -

SLIKA 10: VALIDACIJA FORMULARJA ................................................................................................................ - 32 -

SLIKA 11:OBVESTILA PRI ZAKLJUČEVANJU DOLOČENIH AKCIJ .................................................................................. - 32 -

SLIKA 12: PRIJAVNA STRAN ........................................................................................................................... - 35 -

SLIKA 13: USTVARJANJE DOGODKA ................................................................................................................. - 35 -

SLIKA 14: PODROBEN POGLED ORGANIZATORJA NA DOGODEK ............................................................................... - 36 -

SLIKA 15: ODLOČITEV O SPREJEMU ALI ZAVRNITEV UPORABNIKA PRI PRIJAVI NA DOGODEK ............................................ - 36 -

SLIKA 16: ŽREB TENIŠKEGA TURNIRJA .............................................................................................................. - 37 -

SLIKA 17: REZULTATI DOGODKA ..................................................................................................................... - 37 -

SLIKA 18:DOMAČA STRAN TEKMOVALCA .......................................................................................................... - 38 -

SLIKA 19: PODROBEN POGLED UPORABNIKA NA DOGODEK .................................................................................... - 39 -

SLIKA 20: LOKACIJA DOGODKA ...................................................................................................................... - 39 -

SLIKA 21: ZAČETEK SOJENJA TEKME ................................................................................................................ - 40 -

SLIKA 22: SPREMINJANJE REZULTATOV DOLOČENE TEKME ..................................................................................... - 40 -

- 1 -

Spletna aplikacija RECVENTS za lažjo organizacijo in spremljanje rekreativnih dogodkov

1 UVOD

Vstopili smo v obdobje, v katerem ljudje vedno bolj trpijo za pomanjkanjem časa. Vsi

hitijo, želijo čim prej opraviti zadane obveznosti in nadaljevati z novimi. Danes igra vloga

rekreativnega ukvarjanja s športom pri ohranjanju zdravja ljudem vse pomembnejšo vlogo.

V vsakdanjem življenju se tako z rekreativnimi prireditvami ukvarja vse več ljudi. Po drugi

strani pa organizatorjem takih prireditev, ki so praviloma inovativni in ustvarjalni ljudje,

vse bolj zmanjkuje časa za uresničevanje njihovih ciljev in idej. Za odlično izvedbo

različnih športnih prireditev sta namreč najpomembnejša faktorja sistematična priprava in

organizacija celotnega dogodka, kot npr. prijava na rekreativno prireditev, njeno

spremljanje in sama izvedba dogodka.

Danes na spletu najdemo veliko število rešitev, ki lajšajo delo organizatorjem športnih

dogodkov, vendar trenutne rešitve na trgu praviloma ponujajo, da se uporabniki

medsebojno zbirajo v skupinah in se o udeležbi na športnih prireditvah dogovarjajo med

seboj. Delno so zasnovane na socialnih omrežjih in so primarno osredotočene na dejstvo,

da lahko vsak posameznik na spletu objavi, kateri šport obvlada, medtem ko ga drugi

uporabniki v primeru, da se želijo z njim pomeriti v tem športu izzovejo na dvoboj. Tako je

za nas razvoj nove aplikacije za spremljanje množičnih rekreativnih športnih prireditev

prestavljal nov izziv in motivacijo za delo.

Naša aplikacija, poimenovana RECVENTS, ponuja rešitev vsem, ki delajo na področju

celovite organizacije rekreativnih športnih prireditev, za vse njihove morebitne udeležence

in celo za športne sodnike v primeru, da gre za turnirja. Aplikacija, ki smo jo razvili,

zajema celoten proces organizacije dogodka, in je usmerjena predvsem na organizacijo

množičnih prireditev. Aplikacija RECVENTS po funkcijah deli uporabnike v tri skupine,

in sicer:

organizatorje, ki ustvarjajo dogodke in jih nadzorujejo,

udeležence oz. tekmovalce, ki se na prireditev prijavljajo oz. spremljajo dosežene

rezultate, in

sodnike, ki sodijo tekme in merijo dosežke tekmovalcev.

Tehnologije, ki smo jih uporabili pri razvoju aplikacije lahko porazdelimo v dva dela:

strežniške tehnologije PHP, ter

odjemalniške tehnologije HTML, CSS, JavaScript.

- 2 -


Za spremljanje rezultatov tekmovalcev in njihovo obveščanje uporabljamo platformo

Node.js in modul Socket.IO.

Ena izmed najpomembnejših funkcionalnosti programa je hranjenje podatkov v relacijski

podatkovni bazi MySQL, ki za njihov dostop uporablja jezik SQL (angl. Structured Query

Language). Pri razvoju aplikacije uporabljamo razvojni koncept model-pogled-krmilnik

(angl. Model-View-Controller, krajše MVC). Aplikacijo razvijamo v razvojnem ogrodju

Codeigniter PHP Framework, saj se nam je, na osnovi dosedanjih izkušenj, zdelo

najprimernejše za razvoj aplikacije.

Rezultati testiranja aplikacije so pokazali, da aplikacija deluje, kot smo od nje pričakovali

in s tem torej izpolnjuje zastavljene cilje. Aplikacija deluje hitro, njena uporaba pa je

enostavna. Različnim uporabnikom nudi različne funkcionalnosti aplikacije, s katerimi

lahko uresničijo zadane cilje (npr. ustvarjanje dogodka, prijava na dogodek itn.).

Organizatorjem npr. omogoča, da ti ustvarijo nov dogodek enostavno, vpišejo podrobne

informacije o njem in zagotavljajo njegovo zanesljivo spremljanje. Udeleženci, ki

nastopajo v vlogi tekmovalcev, se lahko na enostaven in hiter način prijavijo na prireditev

in s strani organizatorja hitro dobijo potrditev o uspešni prijavi (prek e-pošte). Sodniki

realno časovno poročajo o trenutnem rezultatu določene tekme.

Struktura diplomske naloge v nadaljevanju je naslednja: v drugem poglavju se

osredotočamo na tehnologije, s pomočjo katerih smo razvili aplikacijo RECVENTS. Tretje

poglavje prikazuje korake pri razvoju aplikacije ter vse funkcionalnosti, ki jih aplikacija

omogoča. Četrto poglavje se osredotoča na uporabo aplikacije v praksi, kar zajema

scenarije, ki prikazujejo različne uporabniške vidike, ter analizo delovanja aplikacije. V

zaključku diplomske naloge povzemamo celotno opravljeno delo in prikažemo smernice za

razvoj aplikacije v prihodnje. Izdelana diplomska naloga lahko služi tudi kot uporabniški

priročnik pri uporabi aplikacije RECVENTS.

- 3 -


2 TEHNOLOGIJE ZA IZDELAVO SPLETNIH APLIKACIJ

Razvoj spletnih aplikacij je širok pojem, ki zajema delo vključeno v razvoj spletnih strani.

Zajema lahko razvoj najenostavnejših strani s statičnim tekstom, do najbolj kompleksne

spletne aplikacije z dinamično vsebino [1]. Spletne aplikacije kot odjemalec za povezavo z

strežnikom uporabljajo spletni brskalnik. Večina teh aplikacij temelji na arhitekturi

odjemalec-strežnik, kjer odjemalec vnaša informacije, medtem ko jih strežnik shranjuje,

obdeluje in pridobiva nove informacije [2].

Za razvoj spletnih aplikacij uporabljamo naslednje tehnologij in orodja:

odjemalec: tehnologije za izdelavo in oblikovanje spletnih strani (npr. HTML, CSS,

JavaScript, jQuery, AJAX),

strežnik: tehnologije za pisanje strežniških aplikacij (npr. PHP, Node.js, knjižnice

Socket.IO),

upravljanje s podatkovnimi bazami: tehnologije za shranjevanje podatkov v

relacijske baze podatkov (npr. MySQL),

razvojna ogrodja: tehnologije, ki omogočajo razvoj spletnih aplikacij (npr.

Codeigniter PHP Framework in urejevalnik besedil Sublime Text 2).

V nadaljevanju diplomske naloge opisujemo zgoraj omenjene tehnologije podrobneje.

2.1 Tehnologije s strani odjemalca

Tehnologije s strani odjemalca (angl. client side technologies) so:

hipertekstovni označevalni jezik (angl. Hyper Text Markup Language, krajše

HTML),

kaskadne stilske podloge (angl. Cascading Style Sheets, CSS)

JavaScript in jQuery,

Asinhroni JavaScript in XML (angl. Asynchronous JavaScript and XML, krajše

AJAX)

V nadaljevanju naloge podrobneje predstavljamo osnove hipertekstovnega označevalnega

jezika.

2.1.1 Hipertekstovni označevalni jezik

HTML je »materni jezik« našega brskalnika. Hypertext predstavlja metodo, pri čemer se s

klikom na posebno povezavo, poimenovano tudi hiperpovezava, skočimo na naslednjo

spletno stran. Pri tem pomeni »Hyper« nelinearnost, kjer vrstni red strani pri povezovanju

- 4 -


ni pomemben [23].

Z uporabo značk HTML definiramo strukturo in oblikujemo vsebino spletnega dokumenta

(spletno stran), ki jo brskalnik bere in nato prikazuje [3]. Dokumenti HTML so v celoti

sestavljeni iz elementov HTML, ki imajo v splošnem tri komponente [4]:

par značk, t.j. začetno značko in končno značko,

atribute v začetni znački, in

vsebino med začetno in končno značko.

Splošna oblika HTML elementa je [4]:

<tag attribute1="value1" attribute2="value2">content</tag>.

Pravilna struktura dokumenta HTML je naslednja:

deklaracija <!DOCTYPE> [5]:

o označuje začetek dokumenta HTML in je obvezna,

o ni značka HTML, ampak inštrukcija, s pomočjo katere brskalnik določi tip

dokumenta.

značka <html> [6]:

o pove brskalniku, da gre za dokument HTML,

o predstavlja koren dokumenta in vsebuje vse elemente HTML, razen

<!DOCTYPE>.

značka <head> [7]:

o predstavlja glavo elementa in mora obvezno vsebovati naslov dokumenta

<title>; elementi kot <scrypt>, <style>, <meta>, <link> in ipd. so opcijski.

značka <body> [8]:

o definira telo dokumenta,

o element, ki vsebuje vse preostale značke HTML,

o predstavlja obliko in vsebino dokumenta.

Primer pravilne strukture dokumenta HTML je naslednji:

<!DOCTYPE html>

<html>

<head> <title>Title of the document</title>

</head>

<body>

The content of the document...... </body>

</html>

- 5 -


Za stiliziranje spletne strani uporabljamo kaskadne stilske podloge, s katerimi se bomo

spoznali v nadaljevanju.

2.1.2 Kaskadne stilske podloge

Kaskadne stilske podloge (angl. Cascading Style Sheets, CSS) je slogovni jezik, ki se

uporablja za oblikovanje strukturirane vsebine spletne strani HTML. To pomeni, da CSS

omogoča stiliziranje elementov HTML. Prav tako omogoča nadzor aktivnosti, ki jih

uporabnik izvaja nad elementi spletne strani [9].

Sintaksa vseh verzij CSS temelji na podobnem konceptu in je relativno enostavna. Jezik je

namreč sestavljen iz angleških besed, ki poimenujejo stilske lastnosti. Podlogo sestavljajo

[9]:

selektor: določa element, na katerega se stilska pravila nanašajo,

psevdo-razdred: predstavlja uporabnikovo aktivnost nad določenim elementom,

psevdo-element: je nabor okoliščin, v katerem se nahaja element,

deklaracijski blok: v katerem zapišemo lastnosti in atribute.

Splošni zapis podloge je naslednji [9]:

selector [, selector2, ...] [:pseudo-class] {

property: value;

[property2: value2; ...]

}

/* comment */

Stilske podloge v dokumentu HTML lahko vključimo s tremi različnimi stili, kot so [10]:

Vrstični stil: definiramo ga kot atribut <style> značke znotraj elementa HTML.

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Vgrajeni stil: definiramo ga kot značko <style> znotraj glave dokumenta HTML.

<head>

<style>

hr {color:sienna;} p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style> </head>

Zunanji stil: je definiran znotraj dokumenta CSS in je vključen v dokumentu

HTML. Idealen je, kadar želimo uporabiti slog na več straneh.

o Vključitev v dokumentu HTML:

<head>

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

- 6 -


</head>

o Definicija v dokumentu CSS:

hr {color:sienna;}

p {margin-left:20px;} body {background-image:url("images/back40.gif");}

Po tem, ko smo definirali stilske predloge, želimo v nadaljevanju prikazati osnove

programskega jezika JavaScript in knjižnice jQuery.

2.1.3 JavaScript in jQuery

JavaScript je objektno orientirani programski jezik, ki se uporablja pri ustvarjanju

interaktivnih spletnih strani. Skripta lahko sodeluje s kodo HTML in s tem omogoča

komunikacijo z uporabnikom, nadzor brskalnika, asinhrono komunikacijo in spreminjanje

vsebine spletni strani. Zadnje čase ga pogosto uporabljamo za programiranje strežniških

aplikacij. Znan primer, ki smo ga uporabili pri razvoju aplikacije, je Node.js. Node.js je

programska platforma, ki uporablja JavaScript kot programski jezik [11]. Z njim se

podrobneje seznanjamo v poglavju 2.2.2.

Skripto JavaScript lahko vključimo v dokument HTML s pomočjo značke <script> na dva

načina [33][33]:

znotraj dokumenta HTML, in

z vključevanjem skript v zunanjih datotekah JavaScript.

Primer funkcije JavaScript:

<script> function myFunction()

{

document.getElementById("demo").innerHTML="My First JavaScript Function";

} </script>

jQuery je knjižnica za skriptni jezik JavaScript, ki prinaša zbirko funkcij za hitrejši razvoj

spletnih aplikacij. Sledi idejo, da z manj kode naredimo več, kar je zapisano tudi v sloganu

"Write Less, Do More" [29]. Poleg tega rešuje težave v zvezi z različnimi spletnimi

brskalniki, kjer mora iste stvari implementirati drugače. Če določen brskalnik podpira

jQuery, potem iste funkcije jQuery delujejo v vseh enako[12].

Spodnja funkcija nam prikazuje primer jQuery kode, ki se sproži ob določenem dogodku, v

tem primeru klik na povezavo.

$('#content').on('click', 'a.delete_club', function(e){

//content

});

- 7 -


Poglavje, ki sledi, prikazuje osnove za delo s tehnologijo za asinhrono izmenjavo podatkov

AJAX.

2.1.4 Asinhroni JavaScript in XML

AJAX je tehnologija za asinhrono izmenjavo podatkov med odjemalcem in strežnikom (v

ozadju) ter posodabljanje delov spletne strani, brez potrebe po ponovnem nalaganju.

Komunikacija AJAX se opravi asinhrono, t.j. odjemalec generira poizvedbo na strežnik,

medtem, ko aplikacija čaka na njegov odziv. Uporabnik lahko med čakanjem na podatke

nemoteno uporablja spletno stran, saj določene funkcije te obdelujejo in prikazujejo brez

potrebe po ponovnem nalaganju. Posledica tega je večja odzivnost spletne aplikacije ter

zmanjševanje obremenitev spletnega strežnika, saj večino obdelave podatkov naredimo na

strani samega odjemalca [13][14].

Primer komunikacije s pomočjo knjižnic AJAX in jQuery lahko zapišemo kot:

$('#content').on('click', 'a.delete_club', function(e){

var data = {

"club_id" : $(this).attr('attr-id') };

$.({

dataType : "json", type : "POST",

cache : false,

url : "clubs/delete_club",

data : data, success: function(data) {

if(data!=='0'){

//console.log(1); }

});

e.preventDefault();});

V nadaljevanju diplomske naloge nadaljujemo s spoznavanjem strežniških tehnologij, ki

smo jih uporabili pri razvoju naše aplikacije.

2.2 Strežniške tehnologije

Pri razvoju aplikacije uporabljamo sledeče tehnologije:

orodja za osebno spletno stran (angl. PHP Hypertext Preprocessor, krajše PHP) in

programska platforma Node.js.

V naslednjem poglavju najprej podrobneje opišemo orodje PHP, nato pa se osredotočamo

na prikaz lastnosti programske platforme Node.js.

- 8 -


2.2.1 Orodja za osebno spletno stran

PHP je široko uporabljen odprtokodni skriptni jezik primeren za razvoj dinamičnih

spletnih vsebin. Zanj je značilno, da je lahko vgrajen v HTML. PHP je strežniški

programski jezik, kar pomeni, da primarno teče na spletnem strežniku. Prevajalnik PHP za

vhod jemlje izvorno PHP kodo in generira skripto PHP kot izhod. Za izvajanje skripte PHP

potrebujemo spletni strežnik [15].

Za razvoj naše aplikacije smo izbrali arhitekturo LAMP (angl. Linux, Apache, MySQL and

PHP), ki je kombinacija štirih odprtokodnih programskih platform, kot so: operacijski

sistem Linux, spletni strežnik Apache, podatkovna baza MySql in orodja za osebno spletno

stran PHP. Te štiri komponente so glavni sestavni del za izgradnjo popolnoma delujočega

spletnega strežnika, ki je sposoben gostiti dinamične spletne strani [16].

Sintaksa PHP je dokaj enostavna. Osnovni simboli in stavki pa so naslednji [17]:

PHP izvede samo kodo med začetno oznako »<?php« in končno oznako »?>« ,

vse spremenljivke imajo prefiks »$«, ki mu sledijo velike in male črke,

vsak ukaz končamo s podpičjem »;«,

spremenljivki priredimo vrednost z operaterjem »=«,

besedilo prikažemo z uporabo ukaza »echo«,

nadzorni stavki programa so: if, while, for, foreach, in switch,

za ustvarjanje funkcije uporabljamo besedo »function«,

komentarje vstavljamo na dva načina, in sicer kot:

o več vrstične komentarje z /* komentar */ ali

o eno vrstične komentarje z // komentar.

metodi za pošiljanje podatkov iz odjemalca na strežnik: $_GET in $_POST

Primer PHP v kombinaciji z HTML:

<td>

<select name="sport_club"> <?php

foreach ($sport_clubs as $club) { //comment

echo '<option value="'.$club['id'].'">'.$club['name'].'</option>'; }

?>

</select>

</td>

PHP omogoča objektno orientirano programiranje, zato razvijanje naše aplikacije temelji

na uporabi razredov. Naslednji primer prikazuje osnovno uporabo teh razredov :

- 9 -


class Test extends Test2

{

function __construct()

{ $str = "str test";

}

public static function testFunction() {

$str_fun = "str test function";

}

}

Naslednjo strežniško tehnologijo, ki jo bomo spoznali je programska platforma Node.js, ki

nam v aplikaciji služi za implementacijo realno časovne funkcionalnosti.

2.2.2 Node.js

Node.js je programska platforma, ki uporablja JavaScript kot svoj programski jezik in se

uporablja za razvoj spletnih aplikacij. Platforma uporablja »asinhrono dogodkovno vodeni

model« (angl event-driven), ki omogoča lahko in učinkovito uporabo pri razvijanju

aplikacije, ki imajo realno časovne funkcionalnosti. »Asinhrono dogodkovno vodeni

model« pomeni, da tok programa določajo dogodki in da je komunikacija asinhrona [18].

Node.js vsebuje vgrajeno knjižnico HTTP Server, ki omogoča uporabo strežnika brez

uporabe zunanje programske opreme [34].

Primer kreiranja spletnega strežnika s programsko platformo Node.js:

var http = require('http');

var server = http.createServer(function(req, res) {

res.writeHead(200, { 'Content-type': 'text/html'}); res.end('Hello');

}).listen(1337, function() {});

Za realno časovno komunikacijo uporabljamo knjižnico Socket.IO. Knjižnica je

sestavljena iz dveh delov: knjižnica za odjemalca, ki teče na brskalniku in strežniška

knjižnica za Node.js. Socket.IO, ki primarno uporablja protokol WebSocket [19].

Primer komunikacije s knjižnico Socket.IO:

program na odjemalcu:

<script src="/socket.io/socket.io.js"></script>

<script> var socket = io.connect('http://localhost');

socket.on('news', function (data) {

console.log(data);

socket.emit('my other event', { my: 'data' }); });

</script>

- 10 -


strežniški program:

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {

socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) {

console.log(data);

});

});

Po razlagi strežniških tehnologij nadaljujemo z enim izmed najpomembnejših delov pri

razvijanju spletnih aplikacij, in sicer hranjenje podatkov v podatkovni bazi.

2.3 Tehnologije za upravljanje s podatkovnimi bazami

Obstaja veliko tehnologij za upravljanje s podatkovnimi bazami. V času študija smo imeli

možnost spoznati MySQL, ki je najbolj razširjen odprtokodni sistem za upravljanje z

relacijskimi podatkovnimi bazami. V nadaljevanju tehnologijo MySQL razlagamo

podrobneje.

2.3.1 MySQL

Najprej definirajmo pojem podatkovna baza - »Podatkovna baza je zbirka med seboj

pomensko povezanih podatkov, ki so shranjeni v računalniškem sistemu. Dostop do njih je

centraliziran in omogočen s pomočjo sistema za upravljanje s podatkovno bazo« [20].

Da bi lahko ustvarjali, vzdrževali in nadzirali dostop do podatkov v podatkovnih bazah

potrebujemo sistem za upravljanje s podatkovnimi bazami. MySQL je najbolj razširjen

odprtokodni sistem za upravljanje z relacijskimi bazami, ki uporablja jezik SQL in prav

tako deluje na principu odjemalec–strežnik [21].

SQL (strukturiran povpraševalni jezik za delo s podatkovnimi bazami) je standardiziran

povpraševalni jezik za delo s podatkovnimi bazami. Jezik je enostaven, ker s programskimi

stavki posnema ukaze v naravnem jeziku [23]. Osnovne operacije za delo z jezikom SQL

so naslednje [24]:

CREATE TABLE: ustvari novo tabelo.

CREATE TABLE table_name

( column_name1 data_type(size),

column_name2 data_type(size),

column_name3 data_type(size), ....

);

SELECT: pridobi podatke iz baze.

SELECT column_name,column_name

- 11 -


FROM table_name;

UPDATE: posodobi podatke v bazi.

UPDATE table_name

SET column1=value1,column2=value2,... WHERE some_column=some_value;

DELETE: briše podatke iz baze.

DELETE FROM table_name

WHERE some_column=some_value;

INSERT INTO: vstavi podatke v bazo.

INSERT INTO table_name (column1,column2,column3,...)

VALUES (value1,value2,value3,...);

ORDER BY: stavek za sortiranje pridobljenih podatkov, padajočih (DESC) ali

naraščajočih (ASC).

SELECT column_name,column_name FROM table_name

ORDER BY column_name,column_name ASC|DESC;

WHERE: stavek, ki se uporablja za filtriranje pridobljenih podatkov.

SELECT column_name,column_name FROM table_name

WHERE column_name operator value;

AND oz. OR: stavek, za filtriranje podatkov z več kot enim pogojem.

SELECT column_name,column_name1, column_name2 FROM table_name

WHERE column_name operator value AND column_name1 operator value1

OR column_name2 operator value2

SQL JOIN: stavki se uporabljajo za združevanje vrstic iz dveh ali več tabel.

Za razvoj programske logike aplikacije obstaja veliko ogrodij, med katerimi omenjamo

razvojno ogrodje Codeigniter, ki smo ga uporabili pri razvoju naše aplikacije.

2.4 Razvojno ogrodje Codeigniter

Razvojno ogrodje Codeigniter (angl. Codeigniter PHP Framework) je odprtokodno ogrodje

za hiter razvoj spletnih aplikacij v PHP. Izbrali smo ga zato, ker ima bogat nabor knjižnic

in preprosto logično strukturo za njihov dostop [25][26]. Za začetek na sliki 1 prikazujemo

strukturo imenika, ki ga uporablja ogrodje Codeigniter.

- 12 -


Slika 1: Struktura imenika ogrodja Codeigniter

Ena izmed najbolj pomembnih lastnosti ogrodja Codeigniter je, da ta temelji na razvojnem

modelu MVC. MVC je razvojni model za organiziranje programske logike spletne strani,

ki jo lahko razdelimo na tri dele [32]:

model (angl. Model): predstavlja našo podatkovno strukturo. Običajno vsebuje

funkcije za manipulacijo podatkov iz podatkovne baze,

pogled (angl. View): predstavlja informacije prikazane uporabniku. Običajno

pogled predstavlja spletno stran (uporabniški vmesnik),

in krmilnik (angl. Controller): služi kot posrednik med modelom in pogledom, pri

čemer funkcije v krmilniku obdelujejo informacije pridobljene iz modela in jih

posredujejo prek pogleda uporabniku.

Celotna arhitektura aplikacije RECVENTS temelji na ogrodju Codeigniter, kar je razvidno

na sliki 2 [27].

- 13 -


Slika 2: Razvojno ogrodje Codeigniter

Za pisanje in urejanje izvorne kode vseh zgoraj omenjenih tehnologij potrebujemo

urejevalnik besedil. Pri razvoju aplikacije RECVENTS smo uporabili Sublime Text 2

urejevalnik besedil, ki ga obravnavamo v naslednjem poglavju.

2.5 Urejevalnik Sublime Text 2

Sublime Text 2 je zelo popularen urejevalnik besedil z bogatimi lastnostmi in dobro

zmogljivostjo. Ima veliko vtičnikov, kar uporabniku daje možnost spreminjanja ozadja,

velikosti črk, okno se lahko razdeli na več manjših oken. Vsak uporabnik ga lahko

modificira po svojih željah. Podpira več programskih jezikov za razvoj aplikacij [28].

Primer uporabe urejevalnika Sublime Text 2 lahko vidimo na sliki 3 [32].

Slika 3: Zgled urejevalnika Sublime Text 2

Iz slike 3 lahko vidimo, da je na levi strani urejevalnika izpisana struktura imenika

projekta, ki ga razvijamo. Večji del ekrana zavzema urejevalnik besedil, v katerem lahko

urejamo tudi več datotek hkrati. Pri tem različne odprte datoteke izbiramo s posameznimi

zavihkih. Desna stran urejevalnika je namenjena prikazu celotne strukture odprte datoteke

in se uporablja za premik po njeni vsebini

- 14 -


3 ORGANIZACIJA IN SPREMLJANJE REKREATIVNIH

ŠPORTNIH DOGODKOV

Pri implementaciji aplikacije uporabljamo orodje Codeigniter, ki uporablja arhitekturo

MVC in omogoča delitev podprojektov in modulov definiranih v fazi načrtovanja, v t. i.

krmilnike (ang. controllers). Vsak podprojekt razvijamo v posebnem krmilniku, ta pa je

povezan z modelom. Model shranjuje podatke v podatkovno bazo in te prikazuje v pogledu

(angl. view), t.j. uporabniškem vmesniku.

Faze razvoja aplikacije so:

načrtovanje, in

implementacija.

Preden pa se posvetimo omenjenima fazama razvoja podrobneje, pa obravnavamo

organizacijo rekreativnih športnih prireditev nekoč in danes.

3.1 Organizacija rekreativnih športnih dogodkov nekoč in danes

Ideja za razvoj aplikacije RECVENTS se je rodila na osnovi dileme organizatorjev

rekreativnih športnih prireditev, kako reducirati čas organizacije in spremljanje določenega

dogodka. Pri tem smo izhajali iz zgodovine, t.j. kako so bili organizirani nekateri

rekreativni športni dogodki v preteklosti. Rezultat razvoja je s pomočjo računalniške

tehnologije najti enostavno rešitev za uporabnika, ki v celoti zadovoljuje njegove zahteve,

in je dinamična, t.j. se lahko spreminja in razvija sproti. S pomočjo računalnika vsakdanja

opravila postajajo veliko lažja, hitrejša in dostopna vsem.

Če se vrnemo kakšnih deset let nazaj, lahko ugotovimo, da se je v tem času na področju

organizacije rekreativnih športnih prireditev marsikaj spremenilo. Včasih se je celotna

organizacija takih prireditev odvijala ročno na osnovi papirnatih dokumentov. Na teh so

organizatorji včasih vodili celotne sezname, liste udeležencev, načrte dela in izvedbe.

Čeprav so te dokumente sicer pisali s pomočjo računalnikov, podatki niso bili shranjeni v

podatkovni bazi. Tako je bilo potrebno vsakega posameznega udeleženca posebej

obveščati o lokaciji in o času tekmovanja sprva po navadni, kasneje pa po elektronski

pošti. Največkrat so se tekmovalci na prireditev prijavili neposredno pred začetkom

prireditve. Tudi startne številke so se žrebale ročno. Vsi ti dejavniki zahtevajo tako od

udeležencev kot tudi organizatorjev ogromno nepotrebnega časa.

Z aplikacijo RECVENTS lahko vse zgoraj omenjene zadeve poenostavimo. Aplikacija s

pomočjo spletne prijave udeležencem zagotavlja prihranek časa, zmanjša materialne

stroške, in omogoča obveščanje v realnem času. Udeležencem se tako ni potrebno

- 15 -


prijavljati preko navadne pošte, saj je prijavo mogoče izvesti od doma prek spleta.

Organizatorji pa lahko prek spleta udeležence prireditve sprotno obveščajo o vseh

spremembah v zvezi s prireditvijo.

3.2 Načrtovanje aplikacije RECVENTS

Za uspešen razvoj vsake zahtevnejše aplikacije je potrebno najprej narediti dober načrt

celotnega projekta za razvoj programske opreme [31]. Na podlagi dobro definiranih zahtev

uporabnikov izdelamo grafični načrt aplikacije, ki prikazuje celoten koncept delovanja

aplikacije RECVENTS (slika 4).

Slika 4: Aplikacijski model aplikacije RECVENTS

Uporabniki aplikacije RECVENTS lahko nastopajo v treh različnih vlogah, t.j. kot:

organizator,

udeleženec (tekmovalec), in

sodnik.

Vsaka vloga uporabnika ima lahko različne uporabniške prioritete, zato se aplikacija za

vsak tip uporabnika odziva drugače. Organizator dogodkov zahteva funkcionalnost, ki mu

omogoča ustvarjanje in organizacijo dogodkov. Prioriteta tekmovalcev sta funkcionalnosti

prijave in spremljanja določenih dogodkov. Edina funkcionalnost sodnikov je poročanje in

merjenje rezultatov dogodka.

Na osnovi zgoraj navedenega načrta aplikacijskega modela, celotni projekt razdelimo na

manjše podprojekte, ki so za obvladovanje enostavnejši in predstavljajo implementacijo

- 16 -


posamezne funkcionalnosti. Vsak podprojekt je običajno sestavljen iz več modulov, kar je

razvidno na sliki 5.

Slika 5: Projekt razdeljen na podprojekte

Aplikacijo RECVENTS razdelimo na naslednje podprojekte in module:

Spletna prijava je (namenjena vsem vlogam uporabnikov aplikacije):

o ustvarjanje novega uporabnika,

o prijava uporabnika,

o in pozabljeno geslo.

Organizacija dogodkov (namenjena vlogi organizatorja):

o ustvarjanje prireditev,

o sprejem ali zavrnitev uporabniške prijave na prireditev,

o žrebanje številk,

o zapiranje prireditve,

o ustvarjanje športnih klubov, sodnikov.

Prijava na dogodek (namenjena vlogi tekmovalca):

o prijava na dogodek,

o in prejem obvestila o odločitvi ali je bil tekmovalec sprejet na dogodek.

Spremljanje dogodka (namenjena vlogam tekmovalec in organizator):

o komentiranje dogodka,

o in prikaz podrobnih informacij o dogodku.

Poročanje in spremljanje rezultatov v realnem času (poročanje namenjeno vlogi

sodnika, spremljanje pa vlogam tekmovalec in organizator):

o sprememba rezultatov dogodka,

o in spremljanje rezultatov dogodka v živo.

arhiviranje in pregled informacij:

o vstavljanje podatkov,

- 17 -


o pridobivanje podatkov,

o posodabljanje podatkov.

Po končanem načrtovanju vseh funkcionalnosti naše aplikacije se lahko lotimo načrtovanja

modela podatkovne baze, saj so informacije eden izmed najpomembnejših delov naše

aplikacije. Na podlagi aplikacijskega modela in funkcionalnosti določenih v prejšnji fazi

izdelamo diagram podatkovne baze E-R predstavljen na sliki 6.

Slika 6: Diagram E-R za podatkovno bazo

Diagram E-R prikazuje strukturo naše podatkovne baze, ki je sestavljena iz devetih tabel.

Te tabele hranijo referenčno povezane podatke naše aplikacije. Imamo tabelo:

- 18 -


uporabnikov ('users'): hrani podatke o registriranih tekmovalcih,

organizatorjev ('admins'): hrani podatke o organizatorjih,

dogodkov ('events'): hrani splošne podatke o dogodkih, in je povezana z vsemi

ostalimi tabelami z referenčnimi povezavami,

informacije o dogodkih ('events_user_infos'): hrani podatke o dogodku, ki so

pomembni tekmovalcem,

panoge športnega tekmovanja ('event_matches'): hrani panoge športnega

tekmovanja,

prijava tekmovalcev ('users_registrations'): hrani prijave tekmovalcev na določeni

dogodek,

komentarji za dogodek ('events_comments'): hrani vse komentarje uporabnikov za

določeni dogodek,

športni klubi ('sport_clubs'): hrani matične podatke športnega kluba, kjer določen

dogodek poteka,

sodniki ('referees'): hrani informacije o sodnikih na dogodku.

3.3 Implementacija aplikacije RECVENTS

Aplikacijo razvijamo na lokalnem strežniku Apache, ker ta podpira vse tehnologije

potrebne pri razvoju aplikacije. Pozneje želimo aplikacijo prenesti na spletni strežnik.

Ker gre za spletno aplikacijo, so odjemalci seveda različni spletni brskalniki. Aplikacija

trenutno podpira naslednje vrste spletnih brskalnikov:

Google Chrome,

Chromium,

in Mozilla Firefox.

Internet Explorer ne podpira vseh komponent aplikacije, zato ga v tem trenutku ne

priporočamo kot odjemalca aplikacije, saj ne deluje na tem brskalniku v celoti.

Ogrodje Codeigniter pri razvoju aplikacije podpira model MVC, ki ločuje programsko

logiko od predstavitve [32]. Zato implementacijo aplikacije porazdelimo na:

implementacijo funkcionalnosti aplikacije, in

implementacijo uporabniškega vmesnika,

ki ju podrobneje predstavimo v nadaljevanju.

3.3.1 Implementacija funkcionalnosti aplikacije

Aplikacija RECVENTS podpira naslednje funkcionalnosti:

- 19 -


spletno prijavo,

organizacijo dogodkov,

prijavo na dogodek,

spremljanje dogodkov,

poročanje in spremljanje rezultatov v realnem času, ter

arhiviranje in pregled podatkov.

Nekatere funkcionalnosti opisujemo z algoritmi, implementiranimi s pomočjo

programskega jezika PHP, ostale pa s funkcijami jQuery, ki ob proženju določenega

dogodka asinhrono komunicirajo s strežnikom.

3.3.1.1 Spletna prijava

Spletna prijava je sestavljena iz treh modulov:

- registracija tekmovalca,

- prijava uporabnika in

- ponastavljanje pozabljenega gesla.

Tekmovalec lahko uporablja aplikacijo šele, ko opravi registracijo. Funkcija 'take_register',

prikazana v izvorni kodi 1, obravnava podatke poslani s strani odjemalca pri registraciji

novega uporabnika z metodo POST. Ta najprej preveri ali uporabnik z enakim e-naslovom

že obstaja v podatkovni bazi. V primeru, da ta že obstaja, obvesti uporabnika, da je prišlo

do napake. V naslednjem koraku uporabniku priredimo izbrano identifikacijsko sliko in

vneseno geslo šifriramo z algoritmom MD5 (ang. Message-Digest algorithm 5). Vse

podatke novo registriranega uporabnika shranjujemo v podatkovni bazi.

Izvorna koda 1: Preverjanje pravilnosti in obdelovanje informacij

- 20 -


Že registrirani uporabnik se lahko enostavno prijavi v aplikacijo. Po opravljeni prijavi,

aplikacija določi vlogo uporabnika in sicer: organizator, tekmovalec ali sodnik. Modul

prijave, ki je razviden na izvorni kodi 2, pridobi informacije o uporabniku iz podatkovne

baze in jih shrani v sejno spremenljivko.

Izvorna koda 2 Kreiranje sejne spremenljivke z informacijami uporabnika

Ponastavljanje pozabljenega gesla pomeni, da lahko uporabnik, ki je pozabil svoje geslo,

zahteva ponastavitev svojega gesla. Algoritem (razviden v izvorni kodi 3) dobi elektronski

naslov uporabnika, nato preveri, če uporabnik obstaja v podatkovni bazi. Če uporabnik

obstaja v podatkovni bazi, algoritem generira novo geslo in novo geslo pošlje uporabniku

po elektronski pošti.

Izvorna koda 3: Sprememba pozabljenega gesla in pošiljanje novega prek e-pošte

3.3.1.2 Organizacija dogodkov

Podprojekt organizacija dogodkov razčlenimo na šest modulov:

ustvarjanje prireditev,

sprejem ali zavrnitev uporabniške prijave na prireditev,

žrebanje številk,

zapiranje prireditve,

ustvarjanje športnih klubov,

ustvarjanje sodnikov.

- 21 -


Ustvarjanje prireditev je najbolj pomembna funkcionalnost za vse organizatorje dogodkov.

Funkcija, ki skrbi za ustvarjanje dogodkov, je razvidna v izvorni kodi 4. Funkcija prejme

vse informacije o dogodku, poslane s strani odjemalca in jih obdela. Najprej priredi

identifikacijsko sliko dogodka, nato vse prejete informacije shrani v polje. Vsebino polja

pošlje v funkcijo v modelu, ki dogodek shrani v podatkovno bazo.

Izvorna koda 4: Obdelava informacij, ki se shranjujejo v podatkovno bazo

Potem, ko dogodek ustvarimo, se nanj tekmovalci lahko prijavljajo. Prijave na dogodek

lahko organizatorji sprejmejo ali zavrnejo. Izvorna koda 5 prikazuje funkcijo, ki skrbi za

prijavo uporabnika na dogodek. Funkcija prejme ključ registracije in uporabniku pošlje

potrdilo prek elektronske pošto. Funkcija, ki skrbi za zavrnjene registracije deluje na

podoben način, le da uporabniku pošlje obvestilo, da na dogodek ni bil sprejet.

Izvorna koda 5: Sprejem prijave na dogodek ter pošiljanje e-pošte za potrditev prijave

- 22 -


Čeprav glavni del športnega dogodka predstavlja tekmovanje, pa so za vse udeležence zelo

privlačna tudi različna presenečenja, ki jih zanje pripravijo organizatorji. Mednje prav

gotovo sodijo tudi srečelovi, zato je ena izmed najbolj zanimivih funkcionalnosti aplikacije

žrebanje startnih številk, ki prejmejo določen dobitek. Ta proces, ki se je nedavno tega

izvajal ročno, smo v naši aplikaciji avtomatizirali. Na samem začetku pridobi polje, ki

vsebuje informacije o vseh sprejetih tekmovalcev (izvorna koda 6). Nato se v odvisnosti

od tipa športnega dogodka algoritem odloča ali žrebati:

shemo tekmovanja med naključno izbranimi tekmovalci,

ali naključne začetne številke tekmovalcev.

Za vsako tekmo algoritem določi sodnika za poročanje rezultatov določene tekme. Vse

informacije o tekmah določenega dogodka hranimo v podatkovni bazi.

Izvorna koda 6: Ustvarjanje žreba za maratone in za tekmovanja

Po zaključku vseh tekmovanj na določenem dogodku lahko organizator tega zapre.

Funkcija, prikazana v izvorni kodi 7, posreduje informacijo do funkcije v modelu, ki

spremeni status dogodka v »closed«. Zaprt dogodek onemogoča komentiranje in prikazuje

uradne končne rezultate zaprtega dogodka.

- 23 -


Izvorna koda 7: Zapiranje dogodka

Vsak dogodek je povezan s športnim klubom, kjer se bo odvijal. ki ga organizira.

Ustvarjanje športnih klubov dovoljujemo samo vlogi organizatorja. Funkcija za ustvarjanje

športnega kluba, prikazana v izvorni kodi 8, prejme ime, lokacijo in tip športa športnega

kluba in vse omenjene informacije shrani v podatkovno bazo.

Izvorna koda 8: Ustvarjanje športnega kluba

Funkcionalnost aplikacije za ustvarjanje vloge sodnika je omogočena samo vlogi

organizatorja. Sodniki so pomemben del aplikacije, saj poročajo o rezultatu na določeni

tekmi dogodka v realnem času. Izvorna koda 9 prikazuje funkcijo, ki prejme informacije o

sodniku in jih shrani v podatkovno bazo. Pomembno je, da pri ustvarjanju sodnika

organizator določi uporabniško ime in geslo, s katerim se lahko sodnik prijavi v

aplikacijo.

Izvorna koda 9: Ustvarjanje vloge sodnika

3.3.1.3 Prijava na dogodek

Tekmovalci se lahko prijavljajo na določen dogodek. Vse prijave tekmovalcev se pošiljajo

organizatorju, ki se odloči ali tekmovalca uvrsti na startno listo ali ne. Obvestilo o

odločitvi organizatorja prejme uporabnik po elektronski pošti.

Najbolj pomembna funkcionalnost aplikacije je prijava tekmovalca na želeni dogodek. V

izvorni kodi 10 prikazujemo implementacijo zahtev AJAX, ki se sprožijo ob kliku

uporabnika na gumb za prijavo na dogodek. Zahteva AJAX pošlje strežniku informacijo,

ki vsebuje ključ dogodka.

- 24 -


Izvorna koda 10: Funkcija jQuery, ki sproži zahtevo AJAX za registracijo uporabnika na prireditev

Potem ko se uporabnik prijavi na dogodek, se mora organizator odločiti ali bo prijavo

sprejel ali zavrnil. To odločitev smo implementirali tako, da tekmovalec dobi obvestilo

prek elektronske pošte, način pošiljanja obvestil pa smo opisali v izvorni kodi 5.

3.3.1.4 Spremljanje dogodkov

Vsak dogodek vsebuje informacije, ki so pomembne za vse tekmovalce in organizatorje

dogodka. Zaradi lažje implementacije ta podprojekt razdelimo na dva modula:

- prikaz podrobnih informacij o dogodku, in

- komentiranje dogodka.

Tekmovalci in organizatorji imajo vpogled v vse podrobnosti določenega dogodka.

Algoritem s pomočjo funkcij modela iz podatkovne baze pridobi vse informacije,

komentarje, prijave in žreb dogodka. Nato vse informacije posreduje pogledu, ki jih

ustrezno predstavi. Implementacija algoritma je razvidna v izvorni kodi 11.

Izvorna koda 11: Funkcija PHP za pridobivanje in prikaz podrobne informacije dogodka

- 25 -


Za medsebojno izmenjavo mnenj med uporabniki omogoča aplikacija komentiranje

dogodka. Izvorna koda 12 prikazuje funkcijo jQuery, ki se sproži asinhrono pri

komentiranju določenega dogodka. Zahteva AJAX posreduje strežniku ključ dogodka in

vsebino komentarja.

Izvorna koda 12: Komunikacija AJAX pri komentiranju dogodka

3.3.1.5 Poročanje in spremljanje rezultatov v realnem času

Pri spremljanju določenih športnih dogodkov je najbolj pomembno poročanje uvrstitev

tekmovalcev v realnem času. Tako funkcionalnost omogoča tudi naša aplikacija. Celotni

proces poročanja in spremljanja je razdeljen v tri dele, t.j. dva odjemalca (en odjemalec

sporoča, medtem ko drugi spremlja spremembe rezultatov), ki asinhrono komunicirata z

enim strežnikom. Najprej prikažemo skripto strežnika, ki je bila ustvarjene na platformi

Node.js. Kasneje pa opišemo asinhrono komunikacijo odjemalec1-strežnik-odjemalec2

implementirano s pomočjo knjižnico Socket.IO.

V izvorni kodi 13 je razvidna skripta Node.js za ustvarjanje spletnega strežnika. Skripta se

najprej poveže s strežnikom HTTP in določi naslov IP, prek katerega ta komunicira z

odjemalci. Nato se poveže še s podatkovno bazo MySQL. Za vsako različno zahtevo

- 26 -


odjemalca, je v strežniku implementirana funkcija. V našem primeru se za zahtevo

»change_result_to_server« sproži funkcija, ki na vhodu od odjemalca prejme ključ

tekmovanja in spremenjen rezultat tekme.

Izvorna koda 13: Spletni strežnik implementiran z Node.js platformo

Pri poročanju in spremljanju rezultatov ločimo dva tipa odjemalcev. Prvi tip odjemalca

služi za poročanje rezultatov strežniku. Drugi tip odjemalca pa iz strežnika dobi določeno

zahtevo, da je prišlo do spremembe in šele nato sledi reakcija.

Skripto z implementacijo prvega odjemalca lahko vidimo v izvorni kodi 14. Skripta najprej

poveže odjemalca s strežnikom na naslov IP, kjer strežnik »posluša« zahteve odjemalca.

Skripta čaka, da se zgodi določen dogodek , nato sproži funkcijo, ki strežniku pošlje polje,

ki vsebuje ključ in nov rezultat določene tekme.

Izvorna koda 14: Skripta na strani odjemalca, ki »poroča« strežniku spremembe rezultata

- 27 -


Ko prvi tip odjemalca »sporoči« spremembe strežniku, strežnik shrani podatke v

podatkovno bazo in na koncu odda spremembe drugemu odjemalcu. Skripta drugega

odjemalca, ki je vidna v izvorni kodi 15, se najprej poveže z naslovom, na katerem bo

strežnik oddajal zahteve in nato čaka zahtevo »change_result«, da bi sprožil funkcijo,

katera dinamično prikaže spremenjene rezultate določenega dogodka na spletni strani.

Izvorna koda 15: Skripta odjemalnika, ki dobi zahtevo da se je zgodila sprememba rezultata

3.3.1.6 Arhiviranje in pregled informacij

Ta podprojekt zajema:

- vstavljanje,

- pridobivanje in

- posodabljanje podatkov v podatkovno bazo.

Funkcionalnost vstavljanja podatkov v podatkovno bazo omogoča shranjevanje različnih

informacij. V izvorni kodi 16 prikazujemo implementacijo vstavljanja podatkov

določenega dogodka. Najprej naredimo polje, ki vsebuje dva ukaza MySQL za vstavljanje

podatkov v bazo. Informacije o dogodku so shranjene v dveh tabelah v podatkovni bazi,

zato smo vstavljanje implementirali s pomočjo transakcije MySQL. Transakcijo v ogrodju

Codeigniter naredimo s pomočjo nabora metod iz razreda 'db' in sicer metoda:

'trans_begin': označuje začetek transakcije,

'query': prejme in sproži ukaz SQL,

'trans_status': vrne status transakcije, t.j. če ni prišlo do napake vrne <TRUE>, če

pa je do nje prišlo, vrne <FALSE>,

'trans_rollback': zavrne transakcijo in prekliče vse spremembe,

'trans_commit': uspešno konča transakcijo in potrdi vse spremembe.

- 28 -


Izvorna koda 16: Funkcija za vstavljanje informacije v podatkovni bazi

Naslednja pomembna funkcionalnost aplikacije je pridobivanje podatkov iz baze podatkov.

Implementacija za pridobivanje filtriranih podatkov pri iskanju po dogodkih je

predstavljena v izvorni kodi 17. Ukaz SQL za pridobivanje podatkov izvedemo s stavkom

'SELECT', in nato rezultate filtriramo s pomočjo rezervirane besedice 'WHERE' in z

operatorji 'AND' in 'OR' za več pogojno filtriranje.

Izvorna koda 17: Iskanje prireditve iz baze podatkov

Tretja funkcionalnost tega podprojekta je posodabljanje podatkov. V izvorni kodi 18 je

prikazano posodabljanje podatkov pri spremembi rezultatov v realnem času. Ukaz SQL s

pomočjo stavka 'UPDATE' posodablja vrednosti eno ali več vrstic določenih z rezervirano

besedico 'WHERE'.

Izvorna koda 18: Posodabljanje rezultatov na določeni tekmi v podatkovni bazi

- 29 -


3.3.2 Implementacija uporabniškega vmesnika

Uporabniški vmesnik je okolje, v katerem uporabnik komunicira z aplikacijo. V našem

primeru načrtujemo enostaven uporabniški vmesnik, ki uporabniku omogoča lažjo

interakcijo z aplikacijo in boljši nadzor nad njenimi funkcionalnostmi.

Uporabniški vmesnik razdelimo na štiri komponente, in sicer:

glavni meni,

vsebina,

noga strani, in

komunikacija uporabnik-aplikacija.

Prve tri komponente uporabniku omogočajo boljši nadzor nad funkcionalnostmi aplikacije,

četrta komponenta pa omogoča boljšo komunikacijo z aplikacijo.

3.3.2.1 Glavni meni

Za dostop uporabnika do večine funkcionalnosti aplikacije implementiramo komponento

'Glavni meni', prikazano na sliki 7. Komponenta uporabniku omogoča dostop do:

domače strani,

seznama dogodkov,

strani za ustvarjanje dogodka (omogočena samo organizatorjem),

strani za ustvarjanje sodnikov (omogočena samo organizatorjem),

seznama sodnikov,

strani za ustvarjanje športnih klubov (omogočena samo organizatorjem),

seznama športnih klubov in

polja za iskanje dogodkov.

Slika 7: Glavni meni

Glavni meni je enak za vse strani aplikacije.

3.3.2.2 Vsebina strani

Vsaka stran ponuja drugačno vsebino za različne strani. Vsebine teh strani spletne

aplikacije so naslednje:

- 30 -


začetna stran (namenjena vsem vlogam uporabnikov aplikacije):

o registracija tekmovalca,

o prijava uporabnika v aplikacijo,

o ponastavitev pozabljenega gesla.

domača stran (namenjena vlogi organizatorja in tekmovalca):

o podroben pogled dogodka.

seznam dogodkov (namenjena vlogi organizatorja in tekmovalca):


stran za ustvarjanje dogodka (namenjena samo vlogi organizatorja):

o ustvarjanje dogodka.

stran za ustvarjanje sodnikov (namenjena vlogi organizatorja):

o ustvarjanje sodnikov.

seznam sodnikov (namenjen vlogi organizatorja in tekmovalca).

stran za ustvarjanje športnih klubov (namenjena vlogi organizatorja):

o ustvarjanje športnih klubov.

seznam športnih klubov (namenjena vlogi organizatorja in tekmovalca).

stran, ki prikazuje iskanih rezultatov (namenjena vlogam organizatorja in

tekmovalca):


stran za podroben pogled dogodka (namenjena vlogi organizatorja in tekmovalca):

o podrobne informacije dogodka,

o prijava na dogodek,

o prikaz komentarjev dogodka,

o komentiranje na dogodka,

o lokacija dogodka,

o žrebanje štartnih številk (namenjena samo vlogi organizatorja),

o spremljanje rezultatov v živo,

o zaključitev dogodka (namenjena samo vlogi organizatorja).

sodniška stran za poročanje rezultatov v realnem času (namenjena samo vlogi

sodnika).

Na sliki 8 lahko vidimo vsebine uporabnikove domače strani.

- 31 -


Slika 8: Vsebina domače strani

3.3.2.3 Noga strani

Noga strani predstavlja del, v katerem je zapisano ime prijavljenega uporabnika in

omogoča opcijo za odjavo iz aplikacije. Komponento lahko vidimo na sliki 9.

Slika 9: Noga spletne strani

3.3.2.4 Komunikacija uporabnik-aplikacija

Komunikacija uporabnik-aplikacija je ena izmed najpomembnejših lastnosti uporabniškega

vmesnika in v naši aplikaciji poteka na dva načina, t.j.:

Komunikacija pri izpolnjevanju kateregakoli formularja poteka s pomočjo

prilagojenega vtičnika jQuery za verifikacijo polj (slika 10).

- 32 -


Slika 10: Validacija formularja

Primer HTML kode:

<td> Height:<input class="validate[required,custom[integer],max[250]]text-input"

type="text" name="height"> cm<br>

Weight:<input class="validate[required,custom[integer],max[150]] text-input" type="text" name="weight"> kg

</td>

Primer Jquery skripte:

$(document).ready(function(){

$("#register").validationEngine();

});

Drugi način komunikacije lahko vidimo na sliki 11. To so obvestila, ki se sprožijo

pri zaključevanju določene akcije s pomočjo vtičnika jQuery 'noty':

Slika 11:Obvestila pri zaključevanju določenih akcij

- 33 -


Primer skripte jQquery za prikaz obvestila:

function generate(type, layout, text) {

var n = noty({

text: text,

type: type, dismissQueue: true,

layout: layout,

theme: 'defaultTheme', buttons: false

});

} function generateAll() {

generate('information', 'top', 'Your registration was successfull!');

}

- 34 -


4 UPORABA APLIKACIJE RECVENTS V PRAKSI

V tem poglavju prikazujemo uporabo aplikacije RECVENTS v praksi. V ta namen podamo

tri scenarije, ki kažejo različne vloge uporabe aplikacije, t.j. vloga:

organizatorja,

tekmovalca in

sodnika.

Vzemimo primer ustvarjanja teniškega turnirja, ki ga sproži določeni organizator. Turnir,

poimenovan 'US OPEN', poteka v športnem klubu TK Jug. Na turnirju se prijavi devet

tekmovalcev, od katerih organizator sprejeme samo osem, in sicer:

Matej Dzajkovski,

Denis Rukelj,

Bojan Saftic,

Miha Korenjak,

Amadej Cater,

Martin Rmus,

Vasil Josifovski,

Tose Dimkov.

Po sprejetju vseh osmih tekmovalcev na turnir, organizator žreba številke, ki določajo

vrstni red nastopanja tekmovalcev na turnirju. Turnir je izločilni in sestoji iz štirih tekem v

prvem krogu, dveh tekem v polfinalu ter eno tekmo v malem in eno v velikem finalu. Za

vsako tekmo določimo sodnika, ki poroča o rezultatih dvoboja v realnem času. Ob

zaključku vseh tekmovanj organizator zapre dogodek, proglasi zmagovalca, ter objavi

uradne rezultate tekmovanja.

V nadaljevanju predstavljamo tri različne scenarije, ki prikazujejo zahtevan obseg dela pri

organizaciji omenjenega teniškega turnirja glede na vse tri različne vloge uporabnikov

aplikacije RECVENT.

4.1 Scenarij 1: Vloga organizatorja

Skrbniki aplikacije (tudi administratorji) najprej ustvarijo uporabniške profile za določene

organizatorje. S podatki iz uporabniškega profila se organizatorji lahko prijavijo na

začetno stran aplikacije (slika 12).

- 35 -


Slika 12: Prijavna stran

Po prijavi organizator lahko ustvari nov dogodek. Pri tem izpolni obrazec z vsemi

zahtevanimi informacijami. V našem primeru kot ime dogodka izbrali 'US OPEN', datum

njegovega začetka je 23.09.2013, in traja sedem dni. Dogodek poteka športnem klubu TK

Jug, ki je že vpisan v našo podatkovno bazo. Končno organizator vpiše še kontaktno osebo,

njegovo elektronsko pošto in določi spol tekmovalcev, ki nastopajo na turnirju. Po

izpolnitvi obrazca s klikom na gumb <Predloži> dogodek ustvarimo (slika 13).

Slika 13: Ustvarjanje dogodka

- 36 -


Ko dogodek ustvarimo, aplikacija preusmeri uporabnika na stran, kjer se prikažejo vse

informacije o ustvarjenem dogodku (slika 14).

Slika 14: Podroben pogled organizatorja na dogodek

Prijave na dogodek lahko organizator vidi na strani 'čakajoče prijave' (slika 15), kjer ta

lahko prijavo sprejme ali zavrne. Na dogodek 'US OPEN' se je, na primer, prijavilo devet

tekmovalcev, od katerih jih organizator sprejeme samo osem. Tekmovalke Jana Josifovska

ne sprejmemo, saj gre za moški turnir.

Slika 15: Odločitev o sprejemu ali zavrnitev uporabnika pri prijavi na dogodek

Po poteku časa za prijave organizator s klikom na povezavo 'ustvari žreb' žreba pare

teniškega turnirja. Pari prvega kroga so naslednji:

prvi par: Amadej C. - Bojan S.,

drugi par: Denis R. - Matej Dz.,

tretji par: Tose D. - Vasil J.,

četrti par: Martin R. - Miha K.

- 37 -


V prvem polfinalu se srečata zmagovalec prvega in zmagovalec drugega para, v drugem

polfinalu se srečata zmagovalec tretjega in zmagovalec četrtega para. V malem finalu se

srečata poraženca polfinala, v finalu se srečata zmagovalca polfinala. Izžrebani pari

teniškega turnirja US OPEN so prikazani na sliki 16.

Slika 16: Žreb teniškega turnirja

Po končanem turnirju lahko organizator dogodek zapre in proglasi uradne rezultate. Na

sliki 17 je razvidna stran z rezultati teniškega turnirja 'US OPEN'.

Slika 17: Rezultati dogodka

- 38 -


4.2 Scenarij 2: Vloga tekmovalca (udeleženca)

Registracijo v aplikacijo lahko opravi tekmovalec na začetni strani, ki jo lahko vidimo na

sliki 12. Pri registraciji tekmovalec vpiše osebne informacije in sicer:

ime in priimek,

datum rojstva,

spol,

višina,

teža,

in športe, s katerimi se ukvarja.

Po opravljeni registraciji se tekmovalec lahko prijavi v aplikacijo in jo začne uporabljati.

Glavni cilj tekmovalca je prijava na dogodek. Zato ponuja domača stran (prikazana na sliki

18) tekmovalcu seznam vseh dogodkov, na katere se lahko prijavi. Iz slike je razvidno, da

se tekmovalec prijavlja na teniški turnir 'US OPEN'.

Slika 18:Domača stran tekmovalca

Stran za pogled podrobnosti dogodka 'US OPEN' (prikazana na sliki 19) ima povezave do

vseh podrobnosti. Običajno tekmovalca najbolj zanima lokacija ter športni klub, kjer

dogodek poteka. V tem primeru dobi stran kot jo prikazuje slika 20. Po tem ko tekmovalcu

- 39 -


lokacija dogodka postane zanimiva, lahko ta svojo prijavo pošlje organizatorju s

enostavnim klikom na gumb <Prijavi se>.

Slika 19: Podroben pogled uporabnika na dogodek

Slika 20: Lokacija dogodka

Po obvestilu, da je organizator sprejel prijavo tekmovalca na dogodek 'US OPEN', se ta

tega dogodka lahko udeleži. Po poteku časa za prijavo, lahko tekmovalec vidi tudi pare

- 40 -


prvega kola in spozna svojega prvega nasprotnika. Pozneje lahko rezultate tekmovanja

spremlja tudi v živo.

4.3 Scenarij 3: Vloga sodnika

Sodnik ima v aplikaciji RECVENTS eno samo funkcijo, t.j. poročanje in spremljanje

rezultatov določenih tekem v realnem času. Po prijavi v aplikacijo lahko sodnik na prvi

strani vidi seznam tekem, ki jih mora soditi (slika 21).

Slika 21: Začetek sojenja tekme

S klikom na gumb <Začetek>, aplikacija preusmeri sodnika na spletno stran, na kateri

lahko spreminja rezultate ter o njih poročal (slika 22). Po vsaki igri (gemu) je sodnik

dolžan poročati o trenutnem rezultatu dvoboja, ki ga sodi. Po končanem turnirju sodniki

proglasijo zmagovalca.

Slika 22: Spreminjanje rezultatov določene tekme

4.4 Analiza delovanja aplikacije

Po zaključku razvoja aplikacije smo želeli preveriti, če funkcionalnosti programa

zadostujejo zahtevam uporabnikov. Delovanje aplikacije smo preverili tako, da smo se

najprej postavili v vlogo organizatorja, nato v vlogo tekmovalca in na koncu še v vlogo

sodnika. Z vidika organizatorja dogodka (scenarij 1) aplikacija izpolnjuje naša

pričakovanja. Ustvarjanje dogodka traja le nekaj minut. Organizator poda vse pomembne

informacije o dogodku (športni klub, kjer bo potekal dogodek, začetek dogodka, konec

dogodka, vrsta športa, kontaktne podatke, itn.). Organizator ima možnosti sprejeti ali

zavrniti prijavo udeleženca. Po izteku roka za prijavo, organizator izvede žrebanje med

vsemi sprejetimi tekmovalci. Žrebanje štartnih številk ali žreb vrstnega reda tekmovanja

- 41 -


se izvede v zelo kratkem času (manj kot sekundo), s čemer se nadomesti dolgotrajni proces

klasičnega žrebanja. Takoj, ko se dogodek zaključi, ima organizator možnost zapreti

dogodek in objaviti uradne rezultate dogodka, kot so: zmagovalec dogodka, drugo, tretje in

četrto uvrščeni, itd.

Nato smo aplikacijo preverili z vidika tekmovalca (scenarij 2). Tekmovalec lahko izbere

dogodek, na katerega se želi prijaviti. Po prijavi dobi uporabnik o tem potrdilo po

elektronski pošti. V primeru, da je bil uporabnik sprejet na dogodek, si lahko ogleda žreb

štartnih številk in rezultate tekmovanja. Celoten proces prijave in prejema potrdila je

relativno kratek.

Sodniki (scenarij 3) pridobivajo podatke (uporabniško ime in geslo) od organizatorja, s

katerim se lahko prijavijo v aplikacijo. Aplikacija sodnikom ponuja seznam tekem, ki jih

sodijo in jim ponuja opcijo za začetek sojenja. Med sojenjem sodniki beležijo rezultat v

aplikacijo v realnem času in sporočajo trenutni rezultat določene tekme ali pa vrstni red

tekmovalcev sprotno.

- 42 -


5 ZAKLJUČEK

Na samem začetku diplomske naloge smo si zastavili cilj ustvariti aplikacijo, ki

udeležencem/tekmovalcem, organizatorjem, in sodnikom športnih rekreativnih prireditev

omogoča hitrejše opravljanje njihovega dela, ter prihrani njihov čas. Dela smo se lotili z

obširnim načrtovanjem.

Skozi razvoj diplomske naloge smo najprej analizirali in spoznali tehnologije razvijanja

dinamičnih spletnih aplikacij, ter se naučili nekaj o novih tehnologijah. V procesu

načrtovanja smo naredili natančen načrt aplikacije in določili podprojekte, na podlagi

katerih smo implementirali posamezne funkcionalnosti aplikacije. Ti so nam služili kot

osnova, na kateri smo izdelali diagrame E-R za uspešno upravljanje z relacijsko

podatkovno bazo MySQL. Naslednji korak je bil implementacija funkcionalnosti

aplikacije, pri tem smo uporabljali tehnologije: PHP, MySQL, HTML, CSS, JavaScript,

jQuery, Ajax, Node.Js.

V nadaljevanju smo izdelali uporabniški vmesnik, ki zajema uporabniška orodja za

upravljanje z aplikacijo. Uporabniški vmesnik omogoča različne funkcionalnosti različnim

vlogam uporabnikov aplikacije, kot npr.: udeleženec/tekmovalec, organizator, in sodnik.

Pri razvoju aplikacije, smo se naučili veliko novih stvari, pridobili dodatne izkušnje in

znanja na področju razvoja spletnih aplikacij. Najbolj zanimivo je bilo učenje platformo

Node.Js, za katerega smo prepričani, da ga v prihodnosti lahko še velikokrat uporabimo,

saj bodo funkcije v realnem času v prihodnje čedalje bolj uporabne pri razvoju spletnih

aplikacij.

Izdelano aplikacijo želimo v prihodnje še naprej razvijati, ker verjamemo, da trenutna

verzija ne more zadovoljiti še čisto vseh potreb uporabnikov. V nadaljevanju bomo

aplikacijo razvijali v smeri, da bi ta lahko postala celovita dinamična platforma za

organizacijo in spremljanje športnih dogodkov vseh tipov.

- 43 -


VIRI

[1] http://en.wikipedia.org/wiki/Web_development, zadnji dostop 20.8.2013

[2] http://webtrends.about.com/od/webapplications/a/web_application.htm, zadnji

dostop 20.8.2013

[3] http://www.w3schools.com/html/html_intro.asp, zadnji dostop 20.7.2013

[4] http://en.wikipedia.org/wiki/HTML, zadnji dostop 20.7.2013

[5] http://www.w3schools.com/tags/tag_doctype.asp, zadnji dostop 24.7.2013

[6] http://www.w3schools.com/tags/tag_html.asp, zadnji dostop 23.7.2013

[7] http://www.w3schools.com/tags/tag_head.asp, zadnji dostop 26.7.2013

[8] http://www.w3schools.com/tags/tag_body.asp, zadnji dostop 31.7.2013

[9] http://sl.wikipedia.org/wiki/CSS, zadnji dostop 3.8.2013

[10] http://www.w3schools.com/css/css_howto.asp, zadnji dostop 4.8.2013

[11] http://en.wikipedia.org/wiki/JavaScript, zadnji dostop 4.8.2013

[12] http://ussi.feri.uni-mb.si/index.php/vaje/vaja08/123-uvod-v-jquery, zadnji dostop

29.8.2013

[13] http://sl.wikipedia.org/wiki/Ajax_(programiranje), zadnji dostop 11.8.2013

[14] http://www.w3schools.com/ajax/, zadnji dostop 12.8.2013

[15] http://sl.wikipedia.org/wiki/PHP, zadnji dostop 12.8.2013

[16] http://sl.wikipedia.org/wiki/LAMP, zadnji dostop 15.8.2013

[17] http://en.wikipedia.org/wiki/PHP_syntax_and_semantics, zadnji dostop 15.8.2013

[18] http://nodejs.org/, zadnji dostop 20.8.2013

[19] http://en.wikipedia.org/wiki/Socket.IO, zadnji dostop 20.8.2013

[20] http://sl.wikipedia.org/wiki/Podatkovna_zbirka, zadnji dostop 20.8.2013

[21] http://sl.wikipedia.org/wiki/MySQL, zadnji dostop 22.8.2013

[22] http://sl.wikipedia.org/wiki/SQL, zadnji dostop 22.8.2013

[23] http://www.yourhtmlsource.com/starthere/whatishtml.html, zadnji dostop 2.9.2013

[24] http://www.w3schools.com/sql/, zadnji dostop 24.8.2013

[25] http://ellislab.com/codeigniter/user-guide/, zadnji dostop 24.8.2013

[26] http://en.wikipedia.org/wiki/CodeIgniter, zadnji dostop 27.8.2013

[27] http://www.seanpro.com/services/bespoke-web-applications/codeigniter,zadnji

dostop 27.8.2013

[28] http://www.sublimetext.com/, zadnji dostop 27.8.2013

[29] http://www.w3schools.com/jquery/jquery_intro.asp, zadnji dostop 11.8.2013

http://en.wikipedia.org/wiki/Web_development

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

http://en.wikipedia.org/wiki/HTML

http://www.w3schools.com/tags/tag_doctype.asp

http://www.w3schools.com/tags/tag_html.asp

http://www.w3schools.com/tags/tag_head.asp

http://www.w3schools.com/tags/tag_body.asp

http://sl.wikipedia.org/wiki/CSS

http://www.w3schools.com/css/css_howto.asp

http://en.wikipedia.org/wiki/JavaScript

http://sl.wikipedia.org/wiki/Ajax_(programiranje)

http://www.w3schools.com/ajax/

http://sl.wikipedia.org/wiki/PHP

http://sl.wikipedia.org/wiki/LAMP

http://en.wikipedia.org/wiki/PHP_syntax_and_semantics

http://nodejs.org/

http://en.wikipedia.org/wiki/Socket.IO

http://sl.wikipedia.org/wiki/Podatkovna_zbirka

http://sl.wikipedia.org/wiki/MySQL

http://sl.wikipedia.org/wiki/SQL

http://www.yourhtmlsource.com/starthere/whatishtml.html

http://www.w3schools.com/sql/

http://ellislab.com/codeigniter/user-guide/

http://en.wikipedia.org/wiki/CodeIgniter

http://www.seanpro.com/services/bespoke-web-applications/codeigniter

http://www.sublimetext.com/

http://www.w3schools.com/jquery/jquery_intro.asp

- 44 -


[30] http://www.sublimetext.com/, zadnji dostop 2.9.2013

[31] https://labraj.uni-mb.si/vaje/file.php/52/Prak02-slo.pdf, zadnji dostop 3.9.2013

[32] http://ellislab.com/codeigniter/user-guide/overview/mvc.html, zadnji dostop

3.9.2013

[33] http://www.w3schools.com/js/js_howto.asp, zadnji dostop 1.9.2013

[34] http://en.wikipedia.org/wiki/Nodejs, zadnji dostop 22.8.2013

https://labraj.uni-mb.si/vaje/file.php/52/Prak02-slo.pdf

http://ellislab.com/codeigniter/user-guide/overview/mvc.html

http://www.w3schools.com/js/js_howto.asp

http://en.wikipedia.org/wiki/Nodejs

- 45 -


PRILOGE

Naslov Študenta

Vasil Josifovski

Franc List 25 a

1000 Skopje

Makedonija

Telefon: 040-755-807

e-mail: [email protected]

Kratek življenjepis

Rojen: 26.02.1990 v Skopju, R.Makedonija

Šolanje:

Osnovno šolanje sem začel na Osnovni šoli O.U Kočo Racin v Skopju leta

1996 in ga leta 2004 z osemletnim odličnim uspehom tudi končal. Šolanje

sem nadaljeval v S.U.G.S Gimnazija Josip Broz Tito v Skopju, kjer sem leta

2008 zaključil srednješolsko izobrazbo in maturo z odličnim uspehom.

Trenutno sem študent na Univerzi v Mariboru na Fakulteti za elektrotehniko

računalništvo in informatiko, smer računalništvo in informacijske tehnologije,

kjer trenutno zaključujem šolanje na prvi bolonjski stopnji.

mailto:[email protected]

Documents

Spletna aplikacija RECVENTS za lažjo organizacijo in ...Večina teh aplikacij temelji na arhitekturi odjemalec-strežnik, kjer odjemalec vnaša informacije, medtem ko jih strežnik