Stran

Vladimir Popovski SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Diplomsko delo Maribor, september 2011

II Stran

Stran III Diplomsko delo univerzitetnega študijskega programa SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Študent: Študijski program: Mentor: Somentor: Lektorica: Vladimir Popovski Računalništvo in informacijske tehnologije doc. dr. Marko Hölbl izr. prof. dr. Milan Ojsteršek Bojana Samarin, univ. dipl. slov. Maribor, september 2011

IV Stran

Stran V

VI Stran

Stran VII ZAHVALA Zahvaljujem se mentorju in somentorju za pomoč in vodenje pri nastajanju diplomskega dela. Prav tako se zahvaljujem vsem prijateljem in članom druţine. Posebna zahvala velja staršem, ki so mi omogočili študij.

VIII Stran

Stran IX SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Ključne besede: spletna stran, PHP, podatkovne baze, JavaScript, jquery, internet UDK: 004.43:004.738.5(043.2) Povzetek V diplomski nalogi smo predstavili spletni portal za prostovoljno gasilsko društvo. Portal je namenjen predstavitvi društva javnosti ter obiskovalcem spletnega portala ponuditi možnost, da prijavijo požar. Pri izdelavi diplomske naloge smo uporabili označevalni jezik (X)HTML, CSS predloge, programski jezik PHP, skriptni jezik JavaScript, knjižnico jquery, tehnologijo AJAX v okviru knjižnice jquery in MySQL podatkovno bazo.

X Stran

Stran XI WEB PORTAL FOR VOLUNTEER FIREFIGHT DEPARTMENT Key words: web page, PHP, databases, JavaScript, jquery, internet UDK: 004.43:004.738.5(043.2) Abstract In the dissertation we are presenting a web portal of a volunteer firefight department. This portal is intended for public presentation and offers fire reporting for visitors. In the construction of the dissertation we are using the markup language (X)HTML, CSS templates, PHP programing language, JavaScript script language, library jquery, AJAX technology within jquery library and MySQL database.

XII Stran

Stran XIII VSEBINA 1 UVOD... 1 2 UPORABLJENE TEHNOLOGIJE... 2 2.1 OZNAČEVALNI JEZIKI XHTML, HTML IN XML... 2 2.2 CSS PREDLOGE... 6 2.3 PROGRAMSKI JEZIK PHP... 9 2.4 SKRIPTNI JEZIK JAVASCRIPT IN TEHNOLOGIJA AJAX... 12 2.4.1 JavaScript... 12 2.4.2 DOM (Document Object Model)... 13 2.4.3 Tehnologija AJAX... 14 2.4.4 Knjiţnica jquery... 16 2.5 SISTEM ZA UPRAVLJANJE S PODATKOVNIMI BAZAMI MYSQL... 21 3 SNOVANJE IN PREDSTAVITEV SPLETNEGA PORTALA... 26 3.1 NAČRTOVANJE... 26 3.2 IMPLEMENTACIJA... 27 4 SKLEP... 42 5 VIRI, LITERATURA... 43 6 PRILOGE... 45 6.1 SEZNAM SLIK... 45 6.2 SEZNAM PREGLEDNIC... 45 6.3 NASLOV ŠTUDENTA... 46 6.4 KRATEK ŢIVLJENJEPIS... 46

XIV Stran

Stran XV UPORABLJENE KRATICE HTML XML DOM CSS PHP AJAX PGD W3C SGML DTD CGI HyperText Markup Language Extensible Markup Language Document Object Model Cascading Style Sheets Hypertext Preprocessor Asynchronous JavaScript and XML Prostovoljno gasilsko društvo World Wide Web Consortium Standard Generalized Markup Language Document Type Definition Common Gateway Interface RISC OS Operativni sistem MAC OS Operativni sistem Apache IIS PCRE libxml2 HTTP streţnik Internet Information Services Perl compatible regular expressions Programska knjiţnica za razčlenjevanje XML dokumentov JavaScript skriptni programski jezik Perl Awk XSLT TXT JSON Visoko-nivojski programski jezik Programski jezik (Aho, Weinberger, Kernighan) Extensible Stylesheet Language Transformations Text JavaScript Object Notation

XVI Stran URL SQL PB SUPB Uniform Resource Locator ali Universal Resource Locator Structured Query Language Podatkovna baza Sistem za upravljanje s podatkovnimi bazami ORACLE Objektno orientiran SUPB MySQL Relacijski SUPB MD5 Message-Digest algorithm 5

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 1 1 UVOD Prostovoljno gasilstvo predstavlja neizogibno sestavino današnje druţbe, posebej v Sloveniji, kjer je prostovoljno gasilstvo v primerjavi z ostalimi drţavami precej razvito. Zaradi strmega naraščanja uporabnikov svetovnega spleta ţelimo le-tem predstaviti delovanje in naloge prostovoljnih gasilcev prostovoljnega gasilskega društva»dpd Pegaz«. Odločili smo se za najboljši in najučinkovitejši način predstavitve društva in letega pribliţati ljudem, izdelati spletni portal. Zakaj? Zaradi dostopnosti in preproste uporabe, saj spletni portal ne zahteva nameščanja dodatne programske opreme. Končni izdelek bo omogočal obiskovalcu spletne strani seznanjanje z najnovejšimi novicami o društvu, članih društva, preteklih in prihodnjih dejavnostih, ogledom galerij ipd. S pomočjo spletnega portala za prostovoljno gasilsko društvo bomo prikazali uporabo tehnologije za postavitev spletne strani. V prvem delu diplomske naloge opisali bomo tehnologije, ki smo jih uporabili pri izgradnji spletnega portala. Začeli bomo z osnovo spletnih strani, z označevalnim jezikom (X)HTML. Nadaljevali bomo s CSS predlogami, programskim jezikom PHP, skriptnim jezikom JavaScript, DOM, knjiţnico jquery, tehnologijo AJAX v okviru jquery-ja, in končali bomo z opisom sistema za upravljanje s podatkovnimi bazami MySQL. Pri vsakem opisu bomo podali tudi konkretne primere, da bi čim bolj pojasnili uporabo posamezne tehnologije. Drugi del diplomske naloge obsega opis načrtovanja in snovanja spletnega portala. Pri načrtovanju in izgradnji portala smo prišli do nekaterih teţav, katere smo omenili in dokaj uspešno rešili. Implementacija diplomskega dela nam je prinesla veliko izkušenj in veliko novega uporabnega znanja.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 2 2 UPORABLJENE TEHNOLOGIJE 2.1 Označevalni jeziki XHTML, HTML in XML Extensible HyperText Markup Language ali XHTML je označevalni jezik, naslednik jezika HTML HyperText Markup Language. XHTML je skoraj enak HTML-ju 4.01. Najbolj jedrnata razlika je v tem, da je XHTML zgrajen na osnovi Extensible Markup Language XML. 26. januarja leta 2000 je XHTML 1.0 postal priporočilo inštituta World Wide Web Consortium W3C. Vsi današnji spletni brskalniki podpirajo XHTML [1]. HTML je označevalni jezik, namenjen opisovanju spletnih strani [2].Omogoča nam načrtovanje spletnih strani. HTML organizira dokumente in pove spletnemu brskalniku, kakšna naj bo podoba spletne strani na naših zaslonih. Barve, slike, ozadja itd. spletne strani so določene s pomočjo HTML značk oziroma elementov [3]. Označevalnik jezik XML je preprosta, zelo fleksibilna oblika besedila, ki izhaja iz jezika Standard Generalized Markup Language SGML (ISO 8879). XML igra zelo pomembno vlogo pri izmenjavi najrazličnejših podatkov na spletu in drugje [4]. Značke, iz katere je sestavljen XML dokument, niso definirani z nobenim standardom. Le-te so ustvarjene s strani avtorja dokumenta. Torej, XML nima vnaprej določenih značk, kot jih ima HTML. Jezik je zelo prilagodljiv, saj uporabniku omogoča definiranje svoje značke ter definiranje svoje strukture dokumenta. Postal je priporočilo inštituta W3C 10 februarja 1998. [5] V naslednjem primeru kode si bomo ogledali preprost primer XML dokumenta. <note> <to>janez</to> <from>horvat</from> <heading>naslov</heading> <body>besedilo!</body> </note> Izvorna koda 2.1 Primer XML dokumenta

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 3 Veliko število spletne strani vsebuje»slab«html, kar pomeni, da HTML dokument vsebuje semantične oziroma sintaktične napake, vendar pa se bo spletna stran pokazala normalno v našem spletnem brskalniku. Pri XML-u pa mora biti vsaka značka pravilno zapisana in ugnezdena, ker gre za označevalni jezik. V primeru nepravilno napisane značke XML dokument ne bo deloval. Načeloma je XML namenjen opisovanju podatkov, HTML pa prikazovanju podatkov. Zaradi tega je z zdruţevanjem moči HTML-a in XML-a W3C ustvaril bolj učinkovitejši in preglednejši označevalni jezik. Najbolj pomembne razlike med jezikoma XHTML in HTML so naslednje [1]: XHTML elementi morajo biti pravilno ugnezdeni XHTML elementi morajo biti vedno zaprti XHTML elementi morajo biti napisani z malimi črkami XHTML dokumenti imajo samo en korenski element XHTML dokument je sestavljen iz treh glavnih delov [1]: <!DOCTYPE> deklaracija deklaracija o vrsti dokumenta <!DOCTYPE> se nanaša na Deklaracijo o Vrsti Dokumenta DTD. DTD določa pravila za vsebino dokumenta, zapisanega s pomočjo označevalnega jezika, da bi brskalniki prikazali pravilno vsebino. <head> oddelek glava dokumenta <body> oddelek telo dokumenta V naslednjem primeru kode si bomo ogledali primer preprostega XHTML dokumenta [1]: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>naslov dokumenta</title> </head> <body> </body> </html> Izvorna koda 2.2 Primer preprostega XHTML dokumenta

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 4 Torej, XHTML dokument je sestavljen iz nabora predpisanih elementov (značk) po ţelji razvijalca. Obstaja veliko število različnih elementov za oblikovanje spletne strani. V naslednji preglednici bomo prikazali le nekaj uporabljenih gradnikov iz praktičnega dela diplomske naloge. Tabela 2.1: Seznam HTML4.01 / XHTML 1.0 značk [6] Značka <!DOCTYPE> <a> <b>, <strong> <body> <br /> <caption> <div> <fieldset> <form> <h1> to <h6> <img /> <legend> <li> <option> <select> <table> <tbody> <tr> <td> Pomen Tip dokumenta Povezava Krepko besedilo Telo dokumenta Nova vrstica Naslov tabele Del (sekcija) dokumenta Okvir okoli določenega elementa HTML obrazec HTML naslovi Slika Naslov <fieldset> elementa Element seznama Opcija v select seznamu Select seznam Tabela Telo tabele Vrstica v tabeli Celica v tabeli

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 5 <textarea> <title> <ul> Večvrstični vnos besedila Naslov dokumenta Nerazvrščeni seznam V letu 2006 je inštitut W3C pokazal zanimanje za sodelovanje pri razvoju novega HTML standarda in je leta 2007 skupaj s skupino WHATWG Web Hypertext Application Technology Working Group ustanovil skupino razvijalcev za razvoj HTML 5 standarda. HTML 5 je še vedno v razvoju in ni uradni standard W3C inštituta ter noben brskalnik nima popolne HTML 5 podpore. Ne glede na to večina najbolj uporabljenih spletnih brskalnikov (Safari, Chrome, Firefox, Opera, Internet Explorer) še naprej dodaja HTML 5 funkcionalnosti v svoje novejše različice [7] [8]. HTML 5 ponuja veliko novih funkcionalnosti. Najbolj zanimive funkcionalnosti za razvijalce so: canvas element, ki omogoča risanje, novi elementi za predvajanje multimedijske vsebine (avdio, video), geolokacija (najde našo trenutno lokacijo), izboljšana podpora za lokalno shranjevanje, novi vsebinski elementi (article, footer, header, nav, section), novi obrazci (forms), kot so: calendar, date, time, e-mail, url, search [7]. Iz vseh naštetih novih funkcionalnosti smo uporabili geolokacijo, njeno praktično uporabo pa bomo opisali v naslednjem poglavju. Zaradi velikega števila novih funkcionalnosti, ki jih HTML 5 uvaja, s tem tudi veliko število novih elementov (značk), so v novejši različici HTML-a izboljšani nekateri elementi iz starega HTML-a 4.01, nekateri pa (zastareli in neuporabni) so izbrisani [8].

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 6 Tabela 2.2 Seznam nekaterih novih značk v HTML 5 Značka <audio> Pomen Avdio vsebina <canvas> Za izdelavo grafike 1 <command> <datalist> <embed> <mark> <nav> <progress> <time> <video> Gumb, radiobutton ali checkbox Seznam moţnosti Vgrajena vsebina (plug-in) Označeno besedilo Sekcija za navigacijo Stanje izvajanja Čas ali datum Video vsebina 2.2 CSS predloge Cascading Style Sheets CSS je skriptni jezik, ki se uporablja za predstavitev spletne strani, napisane v označevalnih jezikih. Predstavitev strani vključuje barve, pisave, razporedov ipd. CSS omogoča prilagoditev predstavitve na različnih vrstah naprav, kot so veliki in majhni zasloni ali tiskalniki. Le-ti popolnoma neodvisni od (X)HTML-a in se lahko uporablja v kombinacijo s katerimkoli označevalnim jezikom, ki temelji na XML-u. Ločitev od (X)HTML-a olajša vzdrţevanje spletne strani, porazdelitev predlog med posameznimi stranmi ter prilagaja spletne strani različnim okoljem [9]. Na izbiro imamo nekaj moţnosti, kako uporabiti CSS predlog, in sicer: 1 Element <canvas> uporablja JavaScript za ustvarjanje risb na spletni stani

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 7 Ugnezdeno: predloge opišemo sproti (med besedilom) kot atribut določene značke. Večini elementov namreč lahko predpišemo lastnost style, ki določa obliko elementa. <p style="...">... </p> Izvorna koda 2.3 Primer ugnezdenega CSS-a Notranje: celoten opis stilov vključimo v glavo dokumenta HTML kot vsebino elementa <style>. <style type="text/css">... </style> Izvorna koda 2.4 Primer notranjega CSS-a Zunanje: opise pripravimo v posebni (zunanji) datoteki (običajno ji damo končnico css) ter jo z elementom <link> vključimo v glavo dokumenta HTML. Na tak način lahko vključimo tudi več datotek z opisi stilov [10]. <link rel="stylesheet" type="text/css" href="oblika.css" /> Izvorna koda 2.5 Primer zunanjega CSS-a Sintaksa CSS predlog se razlikuje od (X)HTML sintakse, čeprav sintaksa CSS-a sploh ni zapletena. Sestavljena je samo iz treh delov, kot prikazuje spodaj navedeni primer kode: izbirnik { lastnost : vrednost } Izvorna koda 2.6 CSS izbirnik kjer izbirnik predstavlja (X)HTML element, kateremu opisujemo predstavitev, lastnost predstavlja ime lastnosti, ki jo opisujemo, vrednost pa predstavlja vrednost, ki je dodeljena lastnosti.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 8 Vsak izbirnik lahko ima več lastnosti in vsaka lastnost v tem izbirniku ima lahko svojo vrednost. Lastnost in vrednost med seboj ločimo z dvopičjem, naštejemo jih pa v zavitih oklepajih. Če naštejemo več lastnosti, jih ločimo s podpičjem, več vrednosti, ki pripadajo eni sami lastnosti, pa ločimo z vejico, in če ena vrednost vsebuje več kot ena beseda, vrednost zapišemo v narekovajih, tako kot je prikazano v spodnjem primeru kode [11]. body { background: #eeeeee; font-family: Trebuchet MS, Verdana, Arial, serif; } Izvorna koda 2.7 CSS izbirnik z več lastnostmi V prejšnjem primeru smo si ogledali izbirnik glede tipa elementa (X)HTML dokumenta. CSS nam tudi omogoča, da bi sami določili svoj izbirnik s pomočjo izbirnikov»id«in»class«. Izbirnik»id«uporabljamo v primeru, kadar ţelimo izbrati en sam element iz (X)HTML dokumenta. Izbira značke iz (X)HTML dokumenta je moţna z uporabo atributa id, ki ga dodelimo (X)HTML znački s pomočjo znaka»#«. V primeru kode, ki sledi, se definirani stil nanaša na elementa z id-em»para1«[12]: #para1 { text-align:center; color:red; } Izvorna koda 2.8 CSS izbirnik z id-em Obstaja še en izbirnik, podoben izbirniku»id«. To je izbirnik»class«oziroma razred. Izbirnik»class«uporabljamo v primeru, kadar ţelimo uporabiti isti stil za skupino elementov. Za razliko od izbirnika»id«se izbirnik»class«najbolj pogosto uporablja na več elementih. Izbira značke iz (X)HTML dokumenta je moţna z uporabo atributa class, ki ga dodelimo (X)HTML znački s pomočjo znaka».«. V primeru, ki sledi, bodo vsi (X)HTML elementi z atributom»class=center«sredinsko poravnani [12]:.center {text-align:center;} Izvorna koda 2.9 CSS razredni izbirnik

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 9 Obstaja velik nabor CSS lastnosti, s katerimi oblikujemo predstavitev spletne strani. Lastnosti so razvrščene v več skupin, glede na način in cilj oblikovanja. Sledi preglednica najbolj uporabljenih lastnostnih skupin: Tabela 2.3 Lastnostne skupine [12] Skupina Cilj oblikovanja CSS 1 Animation Animacija določenega elementa 3 Background Ozadje določenega elementa 1, 3 Color Barva določenega elementa 3 Dimension Velikost določenega elementa 1, 2 Font Pisava določenega elementa 1, 3 List Seznam določenega elementa 1 Margin Rob(ovi) določenega elementa 1 Padding Nastavitev določenega elementa 1 Positioning Poloţaj določenega elementa 1, 2 Table Tabela 2 Text Besedilo določenega elementa 1, 2, 3 2.3 Programski jezik PHP PHP (rekurzivna kratica za PHP: Hypertext Preprocessor) je široko uporaben odprto-kodni streţniški skriptni jezik, ki je še posebej primeren za razvoj spletnih strani in ga z lahkoto vgradimo v (X)HTML dokumentu. PHP je osredotočen predvsem na streţniško skriptiranje, tako da lahko storimo vse, kar naredi kateri koli drugi Common Gateway Interface CGI program (pridobivanje podatkov iz obrazcev, ustvarjanje dinamične vsebine strani ali pošiljanje in prejemanje piškotkov). Vendar lahko PHP naredi veliko več. 1 Stolpec CSS prikazuje, kateri CSS različici pripadajo lastnosti skupine (CSS1, CSS2, ali CSS3).

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 10 Lahko ga uporabljamo na vseh večjih operacijskih sistemih, vključno z Linux, veliko različic Unix-a, Microsoft Windows, Mac OS X, RISC OS itd. Podpira tudi veliko število današnjih spletnih streţnikov, kot so Apache, Internet Information Services - IIS itd. Omogoča nam dva načina programiranja, strukturirano in objektno orientirano programiranje ali kombinacijo obeh načinov. Eno izmed najrobustnejših in najpomembnejših funkcij v PHP-ju predstavlja podpiranje širokega spektra podatkovnih baz. Ustvarjanje spletne strani s podatkovno bazo je precej preprosto z uporabo ene od določenih razširitev podatkovnih baz (na primer za MySQL). PHP vsebuje uporabne funkcije za urejanje besedil, ki jih vključuje Perl compatible regular expressions PCRE, in veliko število razširitev in orodja za razčlenjevanje in dostop do XML dokumentov. PHP standardizira vse XML razširitve na podlago libxml2 in razširja nabor funkcij z dodajanjem SimpleXML, XMLReader in XMLWriter podporo [13]. Slika 2.1 Način delovanja PHP-a [14] Sintakso PHP-ja ločimo od (X)HTML sintakse s pomočjo značke <?php?>. Kodo, ki jo ţelimo napisati, ugnezdimo znotraj značke, blok se začne z <?php, konča pa se z?>. Nasploh sintaksa PHP-a temelji na sintaksi višjih programskih jezikov, kot so C, C++, Java itd. Primer v nadaljevanju opisuje uporabo PHP sintakse znotraj (X)HTML dokumenta. V primeru bomo opisali tudi deklariranje spremenljivk in pisanje komentarjev [13].

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 11 <p>html odstavek 1.</p> <?php?> echo 'Izpis besedila'; $spremenljivka = "abc"; //enovrstičen komentar /* */ večvrstičen komentar <p>html odstavek 2.</p> Izvorna koda 2.10 PHP sintaksa Začenši s PHP 5 različico, je bil objektni model PHP-a popolnoma predelan, da bi omogočal večjo zmogljivost ter da bi ponujal večje število funkcij. To je bil velik korak naprej v primerjavi s PHP 4. PHP 5 vsebuje popoln objektni model. Ustvarjanje, definiranje in uporaba razredov v PHP-ju so zelo podobni ostalim višjim programskim jezikom. V nadaljevanju bomo prikazali primer definiranja in uporabe razreda [13]. <?php class EnostavenRazred { // deklariranje lastnosti public $spremenljivka = 'Vrednost'; // deklariranje metode public function prikazispremenljivko() { echo $this->spremenljivka; } } $razred = new EnostavenRazred(); $razred->prikazispremenljivko();?> Izvorna koda 2.11 PHP razred

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 12 2.4 Skriptni jezik JavaScript in tehnologija AJAX 2.4.1 JavaScript Javascript pripelje do dinamične funkcionalnosti spletnih strani. Vsakič, ko vidimo pojavno okno pri gibanju miške, ali se na spletni strani pojavi novo besedilo, se spreminjata barva ali slika pred našimi očmi vse te stvari so omogočene z JavaScript-om. Ponuja veliko učinkov, katerih ne moremo doseči z ostalo programsko opremo, ker se JavaScript izvaja znotraj spletnega brskalnika in ima dostop do vseh elementov spletne strani. Prvič se je pojavil leta 1995 v Netscape-ovem brskalniku»navigator«. Zaradi prvega vtisa, da JavaScript predstavlja različico programskega jezika Jave, je nastala dolgoročna zmeda o povezanosti JavaScripta in Jave. Čeprav nimata ničesar skupnega, je JavaScript pridobil veliko koristi od Jave pri pridobivanju popularnosti. JavaScript je skriptni jezik, ki se izvaja v celoti znotraj spletnega brskalnika, torej na odjemalčevi strani. Za sklicevanje JavaScript-a uporabljamo (X)HTML značko <script> </script>. Namesto da bi se sklicevali v (X)HTML dokumentu, JavaScript datoteke lahko vključimo na dva načina, in sicer: Datoteka z naše spletne strani <script type="text/javascript" src="script.js"> Datoteka, ki se nahaja na svetovnem spletu <script type="text/javascript" src="http://someserver.com/script.js"> Vključevanje JavaScript skriptne datoteke v (X)HTML dokument je najbolj priporočljiv način uporabljanja JavaScript-a [15]. Sintaksa je zelo podobna s sintakso programskega jezika Java ter Pearl in Awk. Sledi primer kode, v katerem je razviden način delovanja JavaScript-a. JavaScript sklicevanje se nahaja v glavi (X)HTML dokumenta. <html> <head> <script type="text/javascript"> function Datum() { document.getelementbyid("prikaz").innerhtml=date(); }

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 13 </script> </head> <body> <h1>moja prva spletna stran</h1> <p id="prikaz">tukaj se bo prikazal datum.</p> <button type="button" onclick="datum()">prikazi Datum</button> </body> </html> Izvorna koda 2.12 Sklic JavaScript v glavi XHTML dokumenta 2.4.2 DOM (Document Object Model) Oblikovalci JavaScript-a so zelo dobro postavili osnove jezika. Namesto da bi ustvarjali še en skriptni jezik (čeprav bi ta rešitev bila dobra rešitev v tistem času), so imeli vizijo razviti skriptni jezik okoli Document Object Model-a DOM. DOM razdeli (X)HTML dokument na posamezne sestavne dele, ki jih imenujemo objekte. Vsakemu objektu pripadajo svoje lastnosti ter metode. JavaScript ločuje objekte, lastnosti in metode s pomočjo pike».«. Zaradi laţjega razumevanja si oglejmo primer. Recimo, da imamo vizitko kot objekt, objekt pa bomo imenovali card. Objekt naj vsebuje lastnosti: ime, naslov, telefonska številka itd. V JavaScript sintaksi bodo te lastnosti take: card.ime card.telefonska card.naslov Metode pa so funkcije, ki vračajo, spreminjajo ali drugače vplivajo na lastnosti objekta. Na primer, da bi poklicali metodo, ki bo prikazala lastnosti objekta card, lahko uporabimo naslednjo sintakso: card.display() Znotraj JavaScript-a obstaja hierarhija starši otrok (parent and child hierarchy), ki dejansko prestavlja oziroma je znana kot DOM.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 14 Slika 2.2 Primer hierarhije DOM-a Na Slika 2.2 Primer hierarhije DOM-a smo prikazali primer hierarhije starši-otrok s pomočjo (X)HTML značk. Kot je razvidno na sliki, dokument vsebuje več vrst (X)HTML elementov. Če ţelimo pridobiti povezavo <a>, ki se nahaja v telesu elementa <body>, in jo shraniti v spremenljivko, moramo uporabiti naslednjo kodo: url = document.links.linkname.href Poglejmo si pot do povezave. Prvi del poti, document, se nanaša na znački <html> in <body>, links.linkname se nanaša na značko <a...>, href pa se nanaša na element href=... [15]. 2.4.3 Tehnologija AJAX Termin»AJAX«se je začel uporabljati leta 2005. Pomen kratice je Asynchronous JavaScript and XML, kar dejansko pomeni uporabo nabora metod, vgrajenih v JavaScriptu za prenos podatkov v ozadju med spletnim brskalnikom in streţnikom. Dober primer za uporabo tehnologije AJAX so Google Maps, kjer vsako novo sekcijo zemljevida, ki jo je potrebno prikazati, brskalnik sname s streţnika brez osveţevanja spletne strani. Z uporabo AJAX-a ne doseţemo samo zmanjševanja količine podatkov, ki jo moramo poslati na streţnik in pridobiti s strani streţnika, ampak tudi doseţemo dinamičnost spletne strani.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 15 Posledica AJAX-a so precej izboljšani uporabniški vmesniki in boljša oziroma hitrejša odzivnost spletne strani. Začetki današnjega AJAX-a so bili leta 1999 z objavljanjem Internet Explorer 5, ki je uvedel novi ActiveX objekt, XMLHttpRequest. ActiveX je Microsoftova tehnologija za pridobivanje vtičnikov ki dodajajo programsko opremo na našem računalniku. Razvijalci ostalih spletnih brskalnikov so, namesto da bi implementirali ActiveX tehnologijo, raje funkcijo implementirali kot domači del JavaScript interpreterja [15]. Poglejmo si, kaj vse vključuje tehnologija AJAX: standardizirana predstavitev s pomočjo XHTML-a in CSS-a, dinamično prikazovanje in interakcija s pomočjo DOM-a, izmenjava podatkov ter njihova manipulacija s pomočjo XML-a in XSLT-a, asinhrono pridobivanje podatkov s pomočjo XMLHttpRequest-a, vse te zadeve so zdruţene s pomočjo JavaScript-a. Na Slika 2.3 Klasični model spletne aplikacije (levo) v primerjavi z AJAX modelom [16] sta predstavljena dva modela spletnih aplikacij, klasični model in AJAX model. Prvič bomo opisali delovanje klasičnega modela. Večina uporabniških ukrepov na uporabniškem vmesniku sproţijo HTTP zahtevo na spletnem streţniku. Streţnik obdela podatke in nato pošlje HTML dokument odjemalcu. Zaradi prejemanja celotnega HTML dokumenta se odjemalcu osveţi celotna vsebina spletne strani. Model je funkcionalen, ni pa uporabniku prijazen. Z vpeljavo AJAX-a namesto osveţevanja celotne spletne stani osveţimo samo del dokumenta, kjer se AJAX izvaja. Spletni brskalnik na začetku seje, namesto da bi naloţil celotno spletno stran, naloţi samo AJAX del, ki je napisan v JavaScript-u in pogosto zloţen v skriti okvir. AJAX je odgovoren tako za obdelavo uporabniškega vmesnika kot za komunikacijo s streţnikom na strani odjemalca [16].

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 16 Slika 2.3 Klasični model spletne aplikacije (levo) v primerjavi z AJAX modelom [16] Z uporabo AJAX-a uporabnik nikoli ne bo gledal v prazno okno brskalnika in čakal na obdelavo podatkov na streţniku. 2.4.4 Knjižnica jquery jquery je hitra in jedrnata JavaScript knjiţnica, ki bistveno poenostavlja spreminjanje (X)HTML dokumenta, obravnavanje dogodkov, animacije na spletni strani ter interakcija AJAX-a [16]. Da bi uporabljali knjiţnico jquery, je potrebno osnovno znanje HTML-a, CSS-a, ter najbolj pomembno, JavaScript-a. Knjiţnica vsebuje naslednje značilnosti: izbira (X)HTML elementov, manipulacija (X)HTML elementov,

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 17 manipulacija CSS predlog, (X)HTML dogodkovne funkcije, JavaScript učinki in animacije, spreminjanje HTML DOM objektov, uporaba AJAX tehnologije. Glede tega, da jquery predstavlja knjiţnico JavaScript-a, je vključevanje jquery-ja v (X)HTML dokumente je skoraj enako z vključevanjem navadne JavaScript datoteke, saj sama knjiţnica predstavlja JavaScript datoteko. Knjiţnico lahko shranimo na streţniku in jo kličemo lokalno, lahko pa uporabimo jquery knjiţnico iz Googlovega ali Microsoftovega streţnika. V naslednjih dveh primerih bomo prikazali klic knjiţnice jquery. V prvem primeru je sklic knjiţnice lokalen, v drugem pa iz Googlovega streţnika. Klic se v vsakem primeru nahaja v glavi (X)HTML dokumenta. <head> <script type="text/javascript" src="jquery.js"></script> </head> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min. js"></script> </head> Izvorna koda 2.13 Sklic jquery knjiţnice Sintaksa jquery-ja je posebej prilagojena izbiri elementov ter spreminjanju oziroma modificiranju (X)HTML elementov. Sledi osnovni primer uporabe jquery-ja: $(selector).action() kjer, znak»$«opredeljuje jquery knjiţnico (selector) predstavlja izbirnik (X)HTML elementa action() predstavlja akcijo, ki se bo izvajala nad izbranim elementom

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 18 Izbira elementa oziroma elementov z izbirnikom je moţna na več načinov. Lahko izbiramo glede na ime elementa, ime atributa ali vsebino. V naslednji preglednici bomo prikazali nekaj primerov uporabe izbirnika [17]. Tabela 2.4 Primeri jquery izbirnika Sintaksa $(this) $("p") $("p.intro") $("p#intro") $("p#intro:first") $(".intro") $("#intro") $("ul li:first") $("[href$='.jpg']") $("div#intro.head") Opis Aktualni element Vsi <p> elementi Vsi <p> elementi razreda intro Vsi <p> elementi z id-jem intro Prvi <p> element z id-jem intro Vsi elementi razreda intro Vsi elementi z id-jem intro Prvi <li> element vsakega <ul> elementa Vsi elementi s href atributom, ki ima končnico.jpeg Vsi elementi razreda intro znotraj <div> elementa z id-jem intro jquery metode za upravljanje dogodkov predstavljajo jedro knjiţnice. Metode za upravljanje dogodkov so tiste metode, ki se sklicujejo, kadar se zgodi sprememba v (X)HTML dokumentu. V primeru uporabe metode pravimo, da se je sproţil upravljavec dogodka. Običajno upravljavca dogodka vedno dodajamo v glavo (X)HTML dokumenta, ali pa v zunanjo datoteko, ki jo vključimo tudi v glavo dokumenta. Poleg upravljanja dogodkov knjiţnica ponuja veliko več ostalih značilnosti. V tem segmentu spadajo jquery efekti, spreminjanje oziroma dodajanje CSS predlog, spreminjanje oziroma modificiranje (X)HTML dokumenta, veliko zanimive animacije, preprosta uporaba AJAX-a. V nadaljevanju sledi primer jquery kode, s katerim

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 19 prikazujemo uporabo metode hide(). Metoda se bo izvedla nad vsemi objekti razreda test, sproţila pa se bo s klikom na gumb [18]. <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("#test").hide(); }); }); </script> </head> Izvorna koda 2.14 Metoda hide() v jquery-ju Ena izmed najpomembnejših, lahko rečemo tudi najpomembnejša, značilnost jquery-ja je uporaba tehnologije AJAX. Namreč knjiţnica jquery ponuja širok spekter metod, ki razvijalcem spletnih sistemov ponujajo moţnost gradnje spletne strani, ki temelji na AJAX tehnologiji. Z jquery AJAX-om lahko zahtevamo TXT, HTML, XML ali JSON podatke s streţnika tako s HTTP GET kot s HTTP POST zahtevo. Omogoča tudi neposredno nalaganje podatkov v določenih (X)HTML elementih spletne strani. Obstajajo tako enostavnejše kot zahtevnejše metode za klicanje AJAX-a. Sledi preprost primer uporabe enostavnejše metode load(). <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $("div").load('test1.txt'); }); }); </script> </head> <body> <div><h2>ajax bo spremenil to besedilo.</h2></div> <button>spremeni</button> </body> </html> Izvorna koda 2.15 Uporaba metode load() v jquery-ju

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 20 Kot vidimo v primeru kode, se bo s klikom gumba spremenila vsebina <div> elementa. Novo vsebino pa pridobivamo iz tekstovne datoteke test1.txt, ki se nahaja na streţniku. V tem preprostem primeru smo prikazali samo pridobivanje podatkov s pomočjo jquery AJAX-a. Seveda metode omogočajo tudi asinhrono pošiljanje podatkov. Če bi v prejšnjem primeru ţeleli tudi poslati podatke, bi lahko dodali parameter data, ki bi vseboval podatke, ki jih ţelimo poslati. Naslednji primer kode vsebuje pošiljanje podatkov s pomočjo funkcije $.ajax [19]. $.ajax({ type: "POST", url: "some.php", data: "&ime=janez&mesto=maribor", success: function(msg){ alert( "Podatki so shranjeni: " + msg ); } }); Izvorna koda 2.16 Uporaba metode $.ajax v jquery-ju S primerom bomo pojasnili nekatere parametre metode $.ajax, in sicer: type: izberemo način pošiljanja podatkov (v tem primeru POST) url: podamo URL datoteke, v katero se bo izvajala obdelava podatkov data: navedemo podatke, katere pošiljamo. (v tem primeru smo poslali smo dve spremenljivki, ime, ki ima vrednost Janez, in mesto, ki ima vrednost Maribor) success: funkcija se izvede, če je zahteva uspela (v tem primeru uporabniku sporočimo, da so podatki poslani) V preglednici, ki sledi, bomo prikazali in opisali bolj pomembne jquery AJAX metode. Tabela 2.5 Seznam bolj pomembnih jquery AJAX metod [19] Metoda $.ajax() $.get() $.getjson() Opis Izvede AJAX zahtevo Naloţi podatke s streţnika s pomočjo AJAX HTTP GET zahteve Naloţi JSON podatke iz streţnika s pomočjo

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 21 HTTP GET zahteve load() $.post() Naloţi podatke s streţnika in vstavi vrnjeni (X)HTML v izbranem elementu Naloţi podatke s streţnika s pomočjo AJAX HTTP POST zahtevo 2.5 Sistem za upravljanje s podatkovnimi bazami MySQL Z več kot desetimi milijoni namestitev MySQL je verjetno najbolj priljubljen sistem za upravljanje s podatkovnimi bazami SUPB za spletne storitve. Razvit je v sredini 90. let, trenutno predstavlja zrelo tehnologijo, ki jo uporablja veliko današnjih najbolj obiskanih spletnih destinacij. Eden od razlogov uspeha je dejstvo, da je odprto-kodni oziroma da je brezplačen uporabnikom. Seveda odprtokodnost ter moţnosti brezplačne uporabe nista največja vzroka velikega uspeha MySQL-a. MySQL je tudi zelo robusten in izjemno hiter ter se lahko izvaja celo na najbolj osnovni računalniški opremi. MySQL je zelo razširljiv, kar pomeni, da lahko narašča z naraščanjem spletne strani. V primerjavi z ostalimi podatkovnimi bazami sta MySQL in Oracle najbolj zmogljiva in sta najbolj razširljiva SUPB-ja. Če govorimo o SUPB, seveda moramo vedeti, kaj podatkovna baza je. Podatkovna baza PB predstavlja strukturirana zbirka zapisov ali podatkov, shranjenih na računalniškem sistemu, in organizirani tako, da bi bil moţen hiter dostop do zapisov oziroma podatkov. SQL v MySQL pomeni Structured Query Language oziroma strukturiran povpraševalni jezik za delo s podatkovnimi bazami. Osnova jezika temelji na angleškem jeziku in se uporablja tudi na ostalih podatkovnih bazah, kot so Oracle ali MicrosoftSQL Server. Namenjen je, da bi omogočal enostavnejši dostop do podatkovne baze preko ukaza, kot je naslednji: SELECT naslov FROM publikacije WHERE avtor = 'William Shakespeare' Izvorna koda 2.17 Dostop do PB s SQL-om

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 22 MySQL podatkovna baza vsebuje eno ali več tabel, vsaka tabela pa je sestavljena iz zapisov in vrstic. V teh vrsticah so različni stolpci ali polja, ki vsebujejo podatke. Sledi primer tabele štirih publikacij, ki so opisane z avtorjem, naslovom, tipom ter letom [15]. Tabela 2.6 Primer enostavne podatkovne baze Avtor Naslov Tip Leto William Shakespeare Romeo and Juliet Play 1594 Charles Dickens The Old Curiosity Shop Fiction 1841 Charles Darwin The Origin of Species Non-fiction 1856 Jane Austen Pride and Prejudice Fiction 1811 Vsaka vrstica tabele predstavlja vrstico v MySQL tabeli ter vsak element v vrstici predstavlja polje v MySQL tabeli. Obstajajo tri načine za interakcijo z MySQL-om: preko ukazne vrstice, preko spletnega vmesnika (na primer phpmyadmin), preko programskega jezika (na primer PHP). Pri praktičnem delu diplomske naloge smo uporabili tretji način interakcije preko programskega jezika PHP, saj smo spletni portal razvili s streţniškim skriptnim jezikom PHP. Ustvarjanje podatkovne baze, vpis v PB, brisanje iz PB, aţuriranje PB itd. naredimo s pomočjo SQL poizvedb. Če bi ţeleli ustvariti podatkovno bazo, kot je prikazano na Tabela 2.6 Primer enostavne podatkovne baze, si najprej moramo ustvariti PB. Kreiranje podatkovne baze je opisano z naslednjim ukazom [15]. CREATE DATABASE publikacij; Izvorna koda 2.18 Ustvarjanje podatkovne baze v MySQL-u

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 23 Da bi dodali tabele podatkovni bazi, moramo najprej izbrati podatkovno bazo, v našem primeru je to podatkovna baza publikacij [15]. USE publikacij; Izvorna koda 2.19 Izbira podatkovne baze v MySQL-u Sedaj ko smo ustvarili podatkovno bazo in jo izbrali, je potrebno kreirati tudi uporabnike podatkovne baze. Za kreiranje novih uporabnikov uporabljamo ukaz GRANT. Za interakcijo s podatkovno bazo bi se morali prijaviti z določenim uporabniškim imenom in geslom. Po izbiri in prijavi v MySQL-a sledi ustvarjanje tabele. Naslednji blok kode prikazuje primer ustvarjanja tabele z imenom classics [15]. CREATE TABLE ( avtor VARCHAR(128), naslov VARCHAR(128), tip VARCHAR(16), leto CHAR(4)) ENIGNE MyISAM Izvorna koda 2.20 Ustvarjanje tabele v MySQL-u Če bi ţeleli preveriti, ali se je tabela kreirala, uporabimo ukaz: DESCRIBE classics; Tabelo smo ţe ustvarili, sedaj pa lahko shranimo podatke v tabelo. Shranjevanje podatkov izvedemo z ukazom INSERT. Sledi primer shranjevanja podatkov v tabeli classic. INSERT INTO classic(avtor, naslov, tip, leto) VALUES ('William Shakespeare', 'Rome and Juliet', 'Play', '1594'); Izvorna koda 2.21 Shranjevanje podatkov v MySQL-u Na koncu dodajanja podatkov v podatkovno bazo lahko izpišemo vsebino tabele z ukazom: SELECT * FROM classics; Izvorna koda 2.22 Izbir podatkov iz tabele v MySQL-u

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 24 V naslednji preglednici bomo opisali nekaj ostalih pomembnejših ukazov SQL-a. Ukaze bomo podali kar v praktičnih primerih zaradi laţjega razumevanja. Tabela 2.7 Primeri najbolj pomembnih ukazov SQL-a Ukaz 1 ALTER TABLE classics RENAME novoime; ALTER TABLE classics MODIFY year SMALLINT; ALTER TABLE classics ADD pages SMALLINT UNSIGNED; ALTER TABLE classics CHANGE type category VARCHAR(16); ALTER TABLE classics DROP pages; DROP TABLE classics; DELETE FROM classics WHERE naslov='naslov'; UPDATE classics SET avtor='jane Austen & Mark' WHERE avtor='jane Austen'; SELECT COUNT(*) FROM classics; SELECT avtor,naslov FROM classics LIMIT 3; SELECT avtor,naslov FROM classics ORDER BY avtor DESC; Opis Preimenovanje tabele Spreminjanje podatkovnega tipa stolpca Dodajanje novega stolpca Preimenovanje stolpca Brisanje stolpca Brisanje tabele Brisanje vrstice Aţuriranje zapisov Pridobivanje število vrstic Omeji število pridobljenih vrstic Uredi pridobljene podatke 1 Podčrtane besede predstavljajo ključne ukaze

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 25

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 26 3 SNOVANJE IN PREDSTAVITEV SPLETNEGA PORTALA Praktični del diplomske naloge obsega izdelavo spletnega portala za prostovoljno gasilsko društvo»dpd Pegaz«iz Bitole, Republike Makedonije. Širši javnosti smo ţeleli podrobno predstaviti društvo in seznaniti obiskovalce z vsemi morebitnimi informacijami, povezanimi s PGD-em. Da bi dosegli čim boljši končni rezultat, smo morali preštudirati in analizirati veliko število današnjih spletnih strani, tako najbolj znane in zanesljive kot tudi bolj strokovne in usmerjene v gasilstvo. 3.1 Načrtovanje Naš cilj je bil izdelati sodoben ter preprost dinamični spletni portal, ki bo sluţil gasilskemu društvu za obveščanje o morebitnih informacijah, zanimivih za javnost. Izbira tehnologij, s katerimi smo razvili spletni portal, je bila lahka, saj smo izbrali eno izmed najbolj pogosto uporabljenih kombinacij današnjih spletnih strani: programski jezik PHP in podatkovna baza MySQL na spletnem streţniku Apache. Načrtovanje spletnega portala lahko razdelimo na tri dele: načrtovanje uporabniškega vmesnika, načrtovanje vsebine portala, načrtovanje podatkovne baze. Začeli smo z načrtovanjem uporabniškega vmesnika. Pri načrtovanju uporabniškega vmesnika smo si zastavili cilj: poskušali bomo sestaviti ustrezen vmesnik, da bi pri uporabnikih oziroma obiskovalcih naredili čim večji vtis. Dinamično spreminjane vsebine spletnega portala, drsni efekti, efekti izginjanja ter prikazovanja itd. bodo le delček malenkosti, ki bodo obdrţali pozornost uporabnika. Nato smo se lotili načrtovanja podatkovne baze. Podatkovna baza je temelj vsake spletne strani. Načrtovali smo jo tako, da bi shranjevanje in posodobitev podatkov bila čim bolj

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 27 optimalna. Za določene zapise v PB (geslo administratorja) bomo upoštevali zasebnost administratorja, v podatkovno bazo pa bomo shranili zakodiran zapis. Kodiranje bomo opravili s PHP funkcijo md5, ki temelji na kodirni funkciji MD5. Nazadnje smo se lotili načrtovanja vsebine portala. Vsebinsko smo načrtovali, da bomo portal prilagodili zahtevam PGD-a»DPD Pegaz«. Sestavili ga bomo iz dveh delov: uporabniško področje, namenjeno uporabnikom oziroma obiskovalcem, in administrativno področje, namenjeno administratorjem spletnega portala. Dodali bomo tudi funkcionalnosti o prikazovanju vremena in vremenske napovedi ter prijavo poţara z enim samim klikom. 3.2 Implementacija Ko smo zaključili z načrtovanjem portala, smo se lotili implementacije načrta. Podobno kot pri načrtovanju smo tudi pri implementaciji prvič začeli z implementacijo uporabniškega vmesnika. Osnovo uporabniškega vmesnika smo gradili s pomočjo XHTML-a in iz CSS predlog. Z XHTML-om smo dodajali elemente, ki jih ţelimo prikazati, CSS pa je bil zadolţen za grafično podobo elementov (pisava, barva, ozadje, robovi itd.) in pozicioniranje elementov (način pozicioniranja, odmik od določenega elementa itd.). Vmesnik je razdeljen na 5 modulov, in sicer: glava, meni, vsebina, stranska orodna vrstica, noga. Modul glava vsebuje logo, simbolično fotografijo in obrazec za prijavo, ki se dinamično prikazuje po ţelji uporabnika. Namen menuja, kot pove samo ime, je navigirati uporabnika do posamezne vsebine. S pomočjo JavaScripta smo naredili spustni (drop-down) menu, ki je bolj pregleden in bolj interaktiven. V modulu Vsebina prikazujemo večino podatkov, ki jih vidimo na spletnem portalu. Zapolnitev modula je odvisna od navigacije uporabnika. S klikom na posamezni podmeni, se vsebina modula spremeni in se prikaţejo podatki, ustrezni izbiri uporabnika. Stransko orodno vrstico lahko razdelimo na štiri podmodule:

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 28 prijava poţara vsebuje pasico, ki uporabniku omogoča prijavljanje poţara, novice predstavljajo bliţnjico do podmenija Novice in vsebuje samo zadnji dve novici, in povezava do podmenija, socialna omreţja vsebuje povezave do socialnih omreţij (Facebook stran društva, Twitter, Youtube kanal), vreme in vremenska napoved vsebuje današnje vreme in vremensko napoved za naslednje tri dni, Zaradi olajšanja navigacije smo v nogi dodali še en preprost meni. Slika 3.1 Zgled uporabniškega vmesnika z uporabnikove strani

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 29 Seveda v tej fazi implementiranja še nismo imeli shranjenih podatkov, pa je vmesnik bil tako rekoč prazen, saj je implementacija podatkovne baze sledila po implementaciji uporabniškega vmesnika. Po uspešno zaključeni implementaciji uporabniškega vmesnika smo nadaljevali z implementacijo podatkovne baze. Za izdelavo podatkovne baze smo izbrali orodje phpmyadmin. Veliko število razvijalcev spletnih strani, ki delajo z MySQL podatkovnimi bazami, uporablja phpmyadmin zaradi številnih prednosti v primerjavi s konkurenčnimi orodji. Orodje je predvsem popolnoma brezplačno, delovanje z orodjem je enostavno in ponuja veliko operacij za delo s podatkovnimi bazami. Torej, s pomočjo phpmysql-a smo ustvarili podatkovno bazo, ki vsebuje 11 tabel, in sicer: aktivnosti, administracija, člani, donator, društvo, lokacija poţara, kontakt, galerija, novice, račun, slike. Vsaka tabela je sestavljena iz določenega števila zapisov. Nekateri izmed zapisov so opcijski, zato na Slika 3.2 Shranjeni podatki iz tabele Novice na kateri je prikazan primer shranjenih podatkov v tabeli Novice, opazimo tudi prazna polja.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 30 Slika 3.2 Shranjeni podatki iz tabele Novice Ko smo uspešno končali implementacije tako uporabniškega vmesnika kot tudi podatkovne baze, smo nadaljevali z najpomembnejšim delom spletnega portala, njuno povezovanje in procesiranje podatkov. Glavno vlogo v tej fazi razvoja je imel programski jezik PHP. Nič manj pomembni nista bila niti skriptni jezik JavaScript in knjiţnica jquery. Načeloma smo PHP koristili pri branju, posodabljanju ali vpisovanju podatkov v podatkovno bazo, pa tudi pri pridobivanju podatkov iz obrazcev. Sicer pa smo pri pridobivanju podatkov z obrazcev, bodisi pri vpisovanju, brisanju ali posodobitvi podatkov, na mestih, kjer smo hoteli osveţiti le del dokumenta, uporabili jquery AJAX tehnologijo. Pri preverjanju različnih vhodnih podatkov, opozoril itd. smo uporabili JavaScript-a. Tako kot smo načrtovali pri fazi načrtovanja, je portal je sestavljen iz dveh delov: uporabniško področje in administrativno področje. Na uporabniškem področju so prikazane vsebine, namenjene uporabnikom, razvrščene po kategorijah, in sicer: aktivnosti društva: uporabnik si lahko ogleda vse dosedanje aktivnosti, ki so razvrščene v 4 kategorije izobraţevanje, tečaji, intervencije in preventiva, galerije slik: ogled galerij raznih dogodkov, intervencij itd., novice: ogled vseh dodanih novic, člani društva: ogled članov PGD-ja, podatki za donacijo: ogled podatkov za doniranje, seznam donatorjev: seznam dosedanjih donatorjev, podatki o društvu in o zgodovini društva, kontaktni podatki: ogled kontaktnih podatkov društva. Uporabnikom omogočamo še naslednje storitve:

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 31 pošiljanje sporočil: uporabnik pošlje sporočilo administratorju. Sporočilo se shrani v podatkovno bazo, prav tako se pošlje na elektronski naslov društva, prijava poţara: uporabnik prijavi poţar v okolici z enim samim klikom, vreme in vremenska napoved: ogled vremena in vremenske napovedi okolice. Primeri uporabe, ki jih ponujamo uporabnikom, so vidni iz sheme primerov uporabe za uporabnika, ki je prikazana na Slika 3.3 Shema primerov uporabe za uporabnika. Slika 3.3 Shema primerov uporabe za uporabnika

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 32 Najbolj zanimiva funkcionalnost portala je moţnost prijave poţara. Funkcionalnost»prijavi poţar«uporabniku oziroma obiskovalcu omogoča prijavljanje poţara z enim samim klikom. Implementirali smo jo s pomočjo nove HTML 5 funkcionalnosti o geolokaciji. Za uspešno delovanje funkcionalnosti mora uporabnik uporabljati enega izmed naslednjih spletnih brskalnikov: Internet Explorer 9.0+, Firefox 3.5+, Safari 5.0+, Chrome 5.0+, Opera 10.6+ [20]. Danes večina uporabnikov uporablja najnovejše različice spletnih brskalnikov, a še vedno obstajajo uporabniki, ki uporabljajo starejše različice. Da bi funkcionalnost»prijavi poţar«delala tudi na starejših različicah brskalnikov, smo implementirali tudi podporo, ki deluje neodvisno od različice brskalnika. Podporo smo razvili s pomočjo yql geo knjiţnice, razvite s strani druţbe Yahoo. Z Izvorna koda 3.1 Klic funkcije za geolokacijo, prikazujemo klic funkcije za geolokacijo. Če brskalnik ne podpira HTML 5, kličemo nadomestno funkcijo za geolokacijo iz knjiţnice yqlgeo. function initiate_geolocation() { if (navigator.geolocation) { } navigator.geolocation.getcurrentposition(handle_geolocation_que ry, handle_errors); } else { yqlgeo.get('visitor', normalize_yql_response); } Izvorna koda 3.1 Klic funkcije za geolokacijo Ko je poţar prijavljen, na zaslonu izpišemo lokacijo poţara na zemljevidu ter kritično območje poţara, določeno z naslovom in polmerom. Izpis je v primeru uspešno prijavljenega poţara je viden na Slika 3.4 Primer prikaza prijavljenega poţara.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 33 Slika 3.4 Primer prikaza prijavljenega poţara Portal smo obogatili tudi s funkcionalnostjo, ki bo prikazovala vreme in vremensko napoved za naslednje tri dni. Funkcionalnost»vreme in vremenska napoved«smo razvili na podlagi Googlovih vremenskih storitev Google weather API. Pridobili smo XML podatke o vremenu in vremenske napovedi za določeno mesto in nato smo razčlenili XML podatke in jih ustrezno obdelali. Pridobitev podatkov je enostavna, saj storitev zahteva samo en parameter, ime mesta, za katerega ţelimo pridobiti podatke. V Izvorna koda 3.2 Pridobitev podatkov iz Google weather API prikazujemo dostop do XML podatkov o vremenu. $xml = simplexml_load_file("http://www.google.com/ig/api?weather=$town"); $information = $xml-> xpath("/xml_api_reply/weather/forecast_information"); $current = $xml->xpath("/xml_api_reply/weather/current_conditions"); $forecast_list = $xml-> xpath("/xml_api_reply/weather/forecast_conditions"); Izvorna koda 3.2 Pridobitev podatkov iz Google weather API Vreme in vremensko napoved smo postavili v stransko orodno vrstico, tako da vreme lahko opazujemo v vsakem trenutku, dokler pregledujemo vsebino spletnega portala. Prikazani podatki o vremenu in vremenski napovedi so dinamični. Kaj to pomeni? To pomeni, da so podatki, ki jih prikazujemo, odvisni od mesta, v katerem se nahajamo. Recimo, da do spletnega portala dostopamo iz Ljubljane. V tem primeru bi se pokazala

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 34 vreme in vremenska napoved za Ljubljano. Če pa bi dostopali iz Maribora, bi se prikazali vremenski podatki o Mariboru. Pri tem smo si ponovno pomagali z geolokacijo, s ciljem pridobiti mesta. Administrativno področje administratorju ponuja dodajanje novih vsebin, brisanje in posodobitev obstoječih vsebin. Načrtovali in razvili smo ga tako, da je vsaka vsebina portala spremenljiva. S tem smo administratorju omogočili popoln nadzor nad vsebinami spletne strani. Da bi dodajal, urejal ali brisal vsebine na portalu, se mora administrator najprejprijaviti s svojim uporabniškim imenom in geslom in nato lahko opravi ţelene akcije. Kaj vse lahko počne administrator po uspešni prijavi, je razvidno iz sheme primerov uporabe za administratorja, ki je prikazana na Slika 3.5 Shema primerov uporabe za administratorja.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 35 Slika 3.5 Shema primerov uporabe za administratorja Sledi seznam funkcionalnosti, ki so namenjene administratorju: spreminjanje uporabniškega imena ali gesla, urejanje domače strani, dodajanje, brisanje in urejanje aktivnosti, dodajanje, brisanje in urejanje galerij, dodajanje, brisanje in urejanje novic, dodajanje, brisanje in urejanje članov društva,

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 36 dodajanje, brisanje in urejanje donatorjev in informacij o doniranju, urejanje vsebine o društvu in o zgodovini društva, urejanje informacij o kontaktu, pregled in brisanje prejetih sporočil, pregled in brisanje prijavljenih poţarov. V nadaljevanju bomo podrobno predstavili implementacijo prikazovanja članov na uporabniškem področju in dodajanje, brisanje ter urejanje članov društva na administrativnem področju. Implementacija ostalih vsebin je podobna. Vsak član društva je opisan z naslednjimi lastnostmi: ime, priimek, fotografija, spol, datum rojstva, datum včlanitve, mesto, naziv, izobraţevanje, ţivljenjepis (opcijski). Uporabnikom oziroma navadnim obiskovalcem spletnega portala ponujamo ogled članov društva. Na začetku si obiskovalci lahko ogledajo 3 člane. Ogled ostalih članov je moţen z moţnostjo SEE ALL, pri čemer razširimo prikaz članov na vseh članih, shranjenih v podatkovno bazo. Člani so razvrščeni padajoče, glede svojega naziva (predsednik, podpredsednik, gasilec). Da bi lahko prebrali kakršenkoli podatke, se moramo najprej povezati s podatkovno bazo. Kako se povezujemo s podatkovno bazo in izberemo ţeleno tabelo s PHP-jem, je razvidno iz Izvorna koda 3.3 Povezovanje z bazo in izbira tabele. $link = mysql_connect("localhost", "root"); mysql_set_charset("utf8", $link);

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 37 if (!$link) { die('could not connect: '. mysql_error()); } mysql_select_db("firedep"); Izvorna koda 3.3 Povezovanje z bazo in izbira tabele V Izvorna koda 3.4 Poizvedba za branje članov društva iz podatkovne baze prikazujemo primer branja podatkov iz podatkovne baze. Lahko opazimo, da bomo pri branju podatkov omejili število prebranih vrstic na tri s pomočjo spremenljivke $counter ter prebrane podatke razvrstili naraščajoče glede na naziv. $counter = 3; $result = mysql_query("select * FROM members ORDER by mem_title ASC LIMIT $counter"); Izvorna koda 3.4 Poizvedba za branje članov društva iz podatkovne baze Po pisanju poizvedbe sledi ukaz za branje podatkov iz podatkovne baze in izpisovanje podatkov. Branje podatkov o članih in njihov izpis je razviden iz Izvorna koda 3.5 Branje podatkov o članih in njihov izpis. Naziv člana je v podatkovni bazi shranjen kot ena številka in ima lahko vrednost 0, 1 ali 2, kjer 0 predstavlja predsednik, 2 pa gasilec. Zaradi tega moramo najprej urediti izpis naziva za vsakega člana. Da bi izpisali starost člana, jo moramo najprej izračunati. Izračun starosti člana naredimo s funkcijo calculateage, ki smo jo mi napisali. Omenili smo, da za vsakega člana hranimo tudi avtentično fotografijo v podatkovni bazi. Velikost fotografije pri izpisu moramo uskladiti z izpisom ostalih podatkov. Funkcija scale_image nam omogoča spremeniti velikost fotografije glede ţelene višine in širine fotografije. Rezultat funkcije je sorazmerno zmanjšana fotografija. Oblike datumov, ki jih izpisujemo, določimo s PHP funkcijo date. Izpis datuma rojstva v obliki 5th of April 1966 doseţemo, če uporabimo ukaz date("js \of F Y",$DateBorn), pri čemer "js \of F Y" določa oblika datuma, $DateBorn pa je datum, ki je bil shranjen v podatkovni bazi. Prej smo napisali, da je zapis življenjepis opcijski, kar pomeni, da vpisovanje tega zapisa pri dodajanju novega člana ni obvezno. Zaradi tega pri izpisovanju podatkov vedno preverjamo, ali ima član ţivljenjepis. Če ga ima, uporabniku ponudimo bolj podroben ogled posameznega člana, ki je moţen s klikom na gumbom More.

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 38 while($myrow = mysql_fetch_array($result)) { switch($myrow['mem_title']) { case '0': $title = "President"; break; case '1': $title = "Vice president"; break; case '2': $title = "Firefighter"; break; default: $title = "Firefighter"; break; } $DateBorn = strtotime($myrow['mem_date_born']); $DateJoin = strtotime($myrow['mem_date_join']); $Age = calculateage($dateborn); $bio = $myrow['mem_bio']; echo "<fieldset>"; echo "<legend><strong>". $title. "</strong></legend>"; echo "<span class='flt-lft'><a href='". $myrow['mem_photo']."' rel='prettyphoto' title='". $myrow['mem_name']. " ". $myrow['mem_surename']."'>". scale_image($myrow['mem_photo'],$mw='150',$mh='150'). "</a></span>"; echo "<table>"; echo "<tr><td><strong>name </strong></td><td>". $myrow['mem_name']. "</td></tr>"; echo "<tr><td><strong>surename </strong></td><td>". $myrow['mem_surename']. "</tr>"; echo "<tr><td><strong>age </strong></td><td>". $Age. "</tr>"; echo "<tr><td><strong>education </strong></td><td>". $myrow['mem_education']. "</tr>"; echo "<tr><td><strong>born </strong></td><td>". date("js \of F Y",$DateBorn). "</tr>"; echo "<tr><td><strong>joined </strong></td><td>". date("js \of F Y",$DateJoin). "</tr>"; echo "<tr><td><strong>from </strong></td><td>". $myrow['mem_town']. "</tr>"; echo "<tr><td><strong>title </strong></td><td>". $title. "</tr>"; if(!empty($bio)) { echo "<tr><td><strong>bio </strong></td><td>". substr($myrow['mem_bio'],0,20). "...</tr>"; echo "<tr><td><td></td><td><span class='flt-rgt'><a href='?str=singlemember&id=". $myrow['mem_id']."'>more</a></span></td></tr>"; } echo "</table>"; echo "</fieldset>"; } Izvorna koda 3.5 Branje podatkov o članih in njihov izpis

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 39 Na Slika 3.6 Zgled izpis članov je prikazan zgled izpisovanja podatkov o članih društva. Slika 3.6 Zgled izpis članov Administrator ima popoln nadzor nad vsemi podatki. Konkretno v tem primeru lahko doda novega člana, lahko odstrani člana in uredi ţe obstoječega člana. Vmesnik pri administratorju je malo drugačen, saj smo dodali še gumbe za brisanje, dodajanje in urejanje članov. Gumba za brisanje in urejanje sta prisotna pri izpisu vsakega člana, medtem ko je gumb za dodajanje novega člana samo eden in se nahaja na koncu seznama članov. Z njegovim klikom se prikaţe obrazec za dodajanje novega člana. Bodisi pri brisanju, dodajanju ali urejanju mora administrator potrditi akcijo, ki jo ţeli izvesti. Na

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 40 Slika 3.7 Izpis le enega člana v administrativnem področju vidimo izpis enega člana v administrativnem področju. Slika 3.7 Izpis le enega člana v administrativnem področju Dodajanje novih članov in urejanje obstoječih je enostavno in interaktivno. Za vsako vnosno polje obstaja kriterij, ki mora biti izpolnjen, da bi dodajanje novega člana bilo uspešno. V primeru, da vnosni podatki ne zadovoljujejo kriterijev, se dodajanje ne bo izvedlo in o tem ustrezno obvestimo administratorja. Če so kriteriji izpolnjeni, se bo dodajanje izvedlo uspešno, novi član se bo dodal k seznamu članov in izpisalo se bo obvestilo o uspešnem dodajanju. Enako velja tudi za urejanje članov. Ker postopek dodajanja in urejanja članov izvedemo s pomočjo jquery AJAX-a, smo imeli teţavo pri nalaganju fotografij, saj z JavaScript-om ni moţno nalaganje datotek na streţniku. Teţavo smo rešili z vključevanjem jquery Form vtičnika [20], ki omogoča delo z XHTML obrazcev in precej olajša nalaganje datotek. Poleg vtičnika jquery Form smo vključili tudi vtičnike za prikaz galerij in izbiro datuma. var options = { target : '#leftmember', url : 'Administration/Members/addMember.php', success: function() { alert('iha'); $("#loadingadmin").fadeout(200).hide(); $("p.notaddedmember").fadeout().hide(); $('p.addedmember').css({"font-size":"18px","color":"green"}); $("p.addedmember").fadein(500).show(); $("p.addedmember").fadeout(4000).show(); $("div.addmember").fadeout().hide(100); $("input#addmember").fadein(4000).show(); $("form#addmember").clearform(); $('html, body').animate( {

SPLETNI PORTAL ZA PROSTOVOLJNO GASILSKO DRUŠTVO Stran 41 scrolltop: $("p.addedmember").offset().top }, 2000); } }; $.when($('form#addmember').ajaxsubmit(options)).done(function() { $.ajax( { url: "Administration/Members/MembersAppend.php", cache: false, success: function(msg) { $("#membersappend").html(msg); } }); }); Izvorna koda 3.6 Del jquery kode za dodajanje novega člana V Izvorna koda 3.6 Del jquery kode za dodajanje novega člana prikazujemo del jquery kode, kjer izvedemo dodajanje novega člana s pomočjo jquery Form vtičnika. Izgled obrazca za dodajanje novega člana je razviden s Slika 3.8 Zgled obrazca za dodajanje novega člana. Slika 3.8 Zgled obrazca za dodajanje novega člana