Organizacija in management informacijskih sistemov Spletna informacijska rešitev za klub Mentor: doc. dr. Uroš Rajkovič Kandidat: Davor Dragić Kranj, junij 2011
ZAHVALA Zahvaljujem se mentorju doc. dr. Uroš Rajkoviču za vso podporo in strokovno pomoč pri izdelavi diplomske naloge. Zahvala ge. Živi Lorenčič iz podjetja Klub Top za pomoč in nasvete pri izdelavi diplomskega dela. Zahvaljujem se tudi lektorici mag. Neži Perko, ki je lektorirala mojo diplomsko nalogo. Posebna zahvala gre staršem za podporo ves čas študija.
Povzetek Diplomsko delo obravnava prenovo spletne strani v podjetju Klub Top iz Ljubljane in izdelavo aplikacije za vodenje evidence rezervacije miz v prostoru. Programske rešitve temeljijo na internetnih tehnologijah, kot so PHP in jquery. Podatki pa se shranjujejo v MySql podatkovno bazo. Spletne rešitev vsebuje tudi preprost, uporabniku prijazen vmesnik za ažuriranje podatkov na spletni strani in aplikacijo za vodenje evidence rezervacij miz. S tehnologijo RSS pa se bodo podatki, o prihajajočih dogodkih, vnešeni na spletni strani, avtomatično prenašali na druge spletne portale, ki objavljajo datume dogodkov po vsej Sloveniji. Celotna spletna rešitev bo zaposlenim prinesla večjo ažurnost podatkov, manj porabljenega časa za urejanje spletne strani in ostalih vnosov prihajajočih dogodkov v podjetju. Ključne besede - PHP - MySql - Spletna stran - Internet - RSS Abstrack In this diploma we will describe how we renovated a website for a company Klub Top from Ljubljana, and how we made an application for a management of table reservations. Software solutions are based on an internet technology, such as PHP and jquery. All data are stored in MySql database. IT solutions include simple and user-friendly interface made especially for editing the webpage. With RSS technology the users can synchronize data with other web portal which publishes event information of the club. IT web solution will accomplish more up to date information of club events with fewer mistakes on published data. Keywords - PHP - MySql - Website - Internet - RSS
Kazalo 1. Uvod...1 1.1. Predstavitev problema...1 1.2. Predpostavke in omejitve...1 2. Opis podjetja...3 3. Analiza obstoječega stanja...4 4. Predstavitev uporabljenih tehnologij...5 4.1. HTML...5 4.2. CSS...6 4.3. PHP...7 4.4. JavaScript, jquery...8 4.5. MySql... 10 4.6. CMS... 11 4.7. RSS... 11 5. Predlog rešitve za spletni portal... 13 5.1. Odprtokodni CMS sistemi... 13 5.2. Plačljivi spletni portali... 14 5.3. Lastna spletna rešitev... 14 5.4. Izbrana rešitev... 15 6. Opis spletne strani... 16 6.1. Uvodna stran... 16 6.2. Galerija... 18 6.3. Zvezde... 19 6.4. Rezervacije... 20 6.5. Kartice ugodnosti... 21 6.6. Partnerji... 23 6.7. Lokacija... 23 6.8. Kontakt... 24 6.9. Opis uporabniškega vmesnika... 25 7. Predlog rešitve za rezervacije... 29 8. Kritična ocena predlaganih rešitev... 31 9. Zaključek... 32 Literatura in viri... 33 Kazalo slik... 34 Kratice in Akronimi... 35 Priloga... 36
1. Uvod 1.1. Predstavitev problema Podjetje se pri svojih vsakodnevnih opravkih v poslovanju srečuje s kar nekaj težavami in neučinkovitimi rešitvami. Za svoje delovanje potrebuje tedensko obveščanje potencialnih obiskovalcev kluba o dogodkih, ki bodo potekali v klubu. Trenutna rešitev, ki jo uporabljajo, zahteva veliko časa, saj je potrebno za vsak teden izdelati letak v digitalni obliki in nato tega naložiti na spletno stran. Poleg tega je spletna stran povsem statična, kar predstavlja novo težavo. Danes se od vsakega resnega podjetja, še posebej od kluba, pričakuje, da bo imel spletno stran, ki je bogata z informacijami. Zato bomo v diplomski nalogi predstavili postopek prenove spletne strani, razložili bomo tudi nekaj glavnih funkcij, ki jih bo vsebovala nova spletna stran. Opisane bodo vse uporabljene tehnologije in nekaj primerov uporabe tehnologije na novi spletni strani. Poleg problema, s katerim se podjetje srečuje pri osveževanju spletne strani, se bomo v diplomski nalogi še posvetili izboljšavi procesa vodenja evidence rezervacij miz. Metoda, ki jo podjetje trenutno uporablja za vodenje evidence rezervacij miz, jim povzroča nemalo težav. Prihaja do nesporazumov med vodjo oddelka in zaposlenimi, ki skrbijo za stranke. Da ne bo prihajalo do omenjenih težav, bomo v diplomski nalogi opisali izdelavo aplikacije, ki bo uporabljena v podjetju. Opisana bo tudi uporabljena tehnologija, njene prednosti za zaposlene in stranke. 1.2. Predpostavke in omejitve Podjetje je na tržišču prisotno dve leti. V tem sicer kratkem času so si že izoblikovali celostno grafično podobo (slika 1), ki smo jo na njihovo željo upoštevali pri oblikovanju nove spletne strani. Celostna grafična podoba vsebuje vzorec na črni podlagi. Uporabljena je bela pisava in za besedilo pod logotipom je pisava Gotham. Slika 1: Celostna grafična podoba Kluba Top Davor Dragić: Spletna informacijska rešitev za klub stran 1
Slika 2: Grafična podoba notranjosti Kluba Top Za izdelavo aplikacije za vodenje evidence miz pa smo na podlagi resničnega stanja v klubu (slika 2) izdelali šablono kot osnovo aplikacije, ki bo predstavljala tloris prostora in privzeta mesta razporeda miz v prostoru. Podjetje je tudi že imelo zakupljene strežniške kapacitete, ki jih ni želelo menjati, zato smo izbirali med tehnologijam, ki jih omogoča že obstoječa strežniška kapaciteta. Spletni strežnik podpira naslednje tehnologije: - PHP 5.3.6 - MySql 5.5.11 Tehnologije, ki jih trenutni strežnik omogoča, so posodobljene, tako da pri uporabi omenjene tehnologije ne bomo imeli dodatnih omejitev. Davor Dragić: Spletna informacijska rešitev za klub stran 2
2. Opis podjetja Podjetje je bilo ustanovljeno aprila 2009 kot poslovni subjekt z omejeno odgovornostjo. Polno ime podjetja je Klub TOP gostinstvo in druge storitve d.o.o. s sedežem podjetja na Tomšičevi ulici 2 v Ljubljani. Ustanovitelja in zastopnika sta Primož Ogrizek in Peter Jones. Podjetje se ukvarja z organizacijo večernih zabav, ki potekajo vsako sredo, petek in soboto. Najbolj pogosti dogodki, ki se odvijajo v podjetju, so že dobro znani, ob sredah potekajo zabave z imenom»top RNB - THE PLACE TO BE«, ob petkih»top of the LINE«in ob sobotah zabave z imenom»black MAGIC«ali»WHITE MAGIC«. V vmesnih dnevih pa potekajo občasno zabave drugačne narave in s posebnimi gosti. Podjetje ima 10 zaposlenih, ki skrbijo, da klub obratuje nemoteno in vsak dan. Le tako poskrbijo za najboljšo zabavo v Ljubljani. Davor Dragić: Spletna informacijska rešitev za klub stran 3
3. Analiza obstoječega stanja Podjetje ima zelo preprosto spletno strani, ki je sestavljena iz ene slike (slika 3) in povezave na facebook profil podjetja. Za izdelavo slike, na kateri napišejo kateri dogodki se bodo odvijali v prihajajočem tednu, uporabljajo programsko orodje Photoshop, ki zna biti zamudno za osebe, ki niso dobri poznavalci dotičnega orodja, tako kot zaposleni, ki trenutno ureja spletno stran. Ker trenutno uporablja pripravljeno šablono za orodje Photoshop, je tudi zelo omejen pri izdelavi omenjene slike. Poleg tega, podjetja objavlja slike samo na Facebook profilu, vendar le-ta ni dostopen vsem, pač pa samo registriranim uporabnikom portala. Slika 3: Prvotna spletna stran Kluba Top Trenutne težave in omejitve, ki jih ima podjetje, bomo analizirali in poskušali poiskati najbolj primerno rešitev, ki bo podjetju prinesla tudi prednosti pred ostalo konkurenco. Analizirali bomo več možnih rešitev in izbrali ter izdelali novo spletno stran podjetja. Podjetje se tudi sooča z težavami pri vodenju evidence rezervacije miz v klubu. Trenutna uporaba žepnega koledarja za vpisovanje rezervacij je nekoliko nepregledna, nedostopna ostalim zaposlenim v trenutku, ko informacijo potrebujejo. Tudi zapisi so lahko nepregledni, še posebej, kadar prihaja do odpovedi rezervacij in nove rezervacije za isti prostor. Lahko prihaja do napačnih zapisov in dvojnih rezervacij. Proces v podjetju bomo analizirali in poskušali najti optimalno rešitev za podjetje in zaposlene v dobrobit strank, saj bo manj slabe volje zaradi morebitnih naštetih težav in napak. V diplomski nalogi bo tudi predstavljena končna rešitev, ki bo izdelana, testirana in uporabljena pri delovanju podjetja. Davor Dragić: Spletna informacijska rešitev za klub stran 4
4. Predstavitev uporabljenih tehnologij 4.1. HTML Ideja programskega jezika HTML je bila na začetku zelo skromna. Avtor prve različice jezika HTML, Tim Berners-Lee, je oblikoval označevalni jezik. Za osnovo mu je služil jezik SGML, s katerim je mogoče opisati poljuben označevalni jezik (Wikipedia, HTML, 10. 5.2011). Z željo, da se ga lahko vsakdo hitro nauči in s poljubnim urejevalnikom besedila napiše lasten dokument, je bil HTML zasnovan tekstovno, z minimalnim številom oznak. Ko se je splet začela množično uporabljati in rasti, so naraščale tudi potrebe po dodatnih oznakah v jeziku HTML. Ker Tim Barners-Lee ni bil pripravljen prevzeti nadaljnjega razvoja HTML, so to storili proizvajalci pregledovalnikov. Z izdajo novih različic pregledovalnikov so tako proizvajalci dodajali nove oznake. Takšen razvoj se nadaljuje in po mnenju mnogih postaja vse bolj neurejen. Veliki proizvajalci pregledovalnikov so razvijali lastne različice jezika HTML, vse dokler se v dogajanje ni vmešal konzorcij W3C in oblikoval enoten HTML standard in tako prevzel skrb za razvoj HTML standarda. Urejanje HTML dokumenta je zelo preprosto, saj lahko uporabimo poljuben urejevalnik besedila, kot so beležka, brezplačni program notepad++, ki je že nekoliko bolj napreden program za urejanje tovrstnih dokumentov, saj HTML oznake obarva in s tem olajša pisanje dokumenta. Danes so za uporabo na voljo tudi urejevalniki WYSIWYG (angleška kratica za What You See Is What You Get; slovensko: Kar vidiš, dobiš). To so grafični urejevalniki, ki uporabniku pomagajo s tem, da že med delom vidi, kakšen bo končni dokument, in mu poznavanje HTML kode in pravil za pisanje le-te ni potrebno, saj program sam poskrbi za to. Osnovne sestavine HTML dokumenta so značke (angleško: tags). Značke se uporabljajo med znakoma < in >, na primer: <body>. Poznamo dve vrste značk: - samostojne značke, na primer: <br> - začetne in končne značke, na primer <body> in </body> Samostojne značke ne potrebujejo zaključka (na primer <br> - nova vrstica), saj vsaka naslednja uporaba iste značke prekliče prejšnjo. Pri večini ostalih značk pa moramo povedati, do kod seže učinek značke (na primer: odebeljen napis, povezava). V tem primeru uporabimo končno značko, ki je enaka začetni, le da vsebuje še t.i. poševnico (/) (Vir: World's largest web development site, 8. 4. 2011). Slika 4 prikazuje osnovno strukturo HTML dokumenta. Davor Dragić: Spletna informacijska rešitev za klub stran 5
Slika 4: Oblika preprostega HTML dokumenta Prikaz HTML dokumenta v brskalniku prikazuje spodnja slika (slika 5). Slika 5: Prikaz izpisa preprostega HTML dokumenta Vsak HTML dokument se začne z značko <html>, ki pove, kje se začne naš dokument, končamo ga z značko </html>, ki predstavlja konec našega dokumenta. Znotraj značk <head> in </head> napišemo informacije o dokumentu, ki sledi. Te informacije se na sami predstavitveni strani ne prikažejo. V primeru (slika 3) je uporabljena značka <title>, ki pregledovalniku pove naslov našega dokumenta. Vse, kar napišemo znotraj značk <body> in </body>, pa se bo prikazalo na predstavitveni strani. V našem primeru smo uporabili značko <h1>, ki ponazarja naslov na prvem (najvišjem) nivoju. Sledi značka <p>, s katero označimo odstavek (angleško paragraphs). Omeniti je treba še nekaj osnovnih značk za oblikovanje besedila: - <strong> označuje odebeljeno besedilo, - <i> označuje ležeče besedilo, - <u> označuje podčrtano besedilo. Omenjene značke se ne izključujejo med seboj. Več značk lahko uporabimo na istem besedilu ali celo isti besedi v dokumentu. 4.2. CSS Naslednji korak pri izdelavi pregledne spretne strani je uporaba CSS. To so predloge, ki določajo videz spletne strani. CSS je zgrajen iz blokov, ki opisujejo slog (Wikipedia, Cascading Style Sheets, 10. 5. 2011). Slog je skupek lastnosti, ki opredeljujejo, kako Davor Dragić: Spletna informacijska rešitev za klub stran 6
se element besedila, za katerega slog velja, prikaže. Slika 6 prikazuje primer uporabe CSS v HTML dokumentu. Slika 6: primer CSS oblikovanja Pisanje CSS oznak začnemo z značko <style> v HTML dokumentu. V primeru so navedene različne lastnosti nekaterih značk v dokumentu. Označili smo, da je barva celotnega dokumenta zelena, nato smo navedli barvo naslova na prvem nivoju in povedali, da bo besedilo v tem bloku odebeljeno. Za poglavje smo uporabili tudi belo barvo pisave in ležečo pisavo. Slika 7 (spodaj) prikazuje izpis primera HTML dokumenta v pregledovalniku. Slika 7: Izgled HTML dokumenta z uporabo CSS oblikovanja 4.3. PHP Programski jezik PHP je razvil Kanadčan Rasmus Lerdorf. Z njim je hotel zagotoviti predvsem preprost dostop do podatkovnih zbirk. Na začetku se jezik ni imenoval PHP, ampak PHP/FI. Nova kratica danes v angleščini pomeni Php Hyptertext Preprocessor. Skozi čas se je programski jezik razvijal do različnih verzij, leta 2004 je bila dokončana verzija PHP5, ki je stabilna in združljiva s starejšimi verzijami programskega jezika. Davor Dragić: Spletna informacijska rešitev za klub stran 7
PHP je zelo priljubljen skriptni programski jezik, ki spletnim razvijalcem omogoča hitrost ustvarjanja dinamičnih spletnih aplikacij in ga vključimo v opisni jezik HTML, kar omogoči izdelavo dinamičnih spletnih strani, ki so osnova za široko paleto storitev (Zandstra, 2004). Za vključitev potrebujemo posebne značke <?php in za konec php kode?>. Dokument je treba tudi poimenovati drugače, in sicer namesto končnice.html je treba sedaj uporabiti končnico.php, le tako bo strežnik vedel, da je datoteko, preden jo pošlje obiskovalcu, treba obdelati. Slika 8 prikazuje primer uporabe PHP kode v dokumentu. Slika 8: Primer uporabe PHP kode v dokumentu Slika 9 prikazuje kako pregledovalnik prikaže dokument. Slika 9: Izpis PHP kode PHP kot programski jezik podpira dostop do različnih vrst podatkovnih baz, podpira tudi storitev, kot je poštni strežnik. Za izvajanje lahko skrbi veliko različnih platform, kot so Linux, Windows. Vse, kar potrebujemo, je Apache programski paket. 4.4. JavaScript, jquery JavaScript je objektni skriptni programski jezik. Razvil ga je Netscape z namenom pomagati spletnim programerjem pri ustvarjanju interaktivnih spletnih strani. Jezik je razvit neodvisno od Java programskega jezika, vendar si z njim deli številne lastnosti in strukture. JavaScript lahko sodeluje s HTML kodo in s tem poživi stran z dinamičnim izvajanjem. JavaScript je podprt s strani velikih programskih podjetij; ker je odprt jezik, ga lahko uporablja vsak, ne da bi pri tem potreboval licenco (Wikipedia, JavaScript, 10. 5. 2011). Davor Dragić: Spletna informacijska rešitev za klub stran 8
Sintaksa jezika JavaScript ohlapno sledi programskemu jeziku C. Prav tako kot C, JavaScript nima vgrajenih vhodno-izhodnih funkcij, zato je izvedba teh funkcij odvisna od gostitelja. JavaScript se veliko uporablja za ustvarjanje dinamičnih spletnih strani. Program se vgradi ali pa vključi v HTML z namenom, da opravlja naloge, ki niso mogoče s samo statično stranjo. Na primer odpiranje novih oken, preverjanje pravilnosti vnešenih podatkov, enostavni izračun itd. Slika 10 prikazuje primer uporabe JavaScript in jquery knjižice (spletna stran jquery, 2. 2. 2011) na spletni strani. Slika 10: Primer uporabe JavaScript Slika 11 kaže primer JavaScript kode, ki uporabniku prepreči vnos neveljavnih podatkov. Slika 11: Primer JavaScript kode za vnos veljavnih podatkov Davor Dragić: Spletna informacijska rešitev za klub stran 9
4.5. MySql SQL ali strukturirani povpraševalni jezik za delo s podatkovnimi bazami (npr. MySql, Access, Oracle itd.) je najbolj razširjen in standardiziran povpraševalni jezik za delo s podatkovnimi zbirkami, s programskimi stavki, ki posnamejo ukaze v naravnem jeziku (Rajkovič, 2006). SQL je nastal v začetku 80. let prejšnjega stoletja. Razvili so ga v laboratorijih IBM in kmalu je postal veljaven in zelo priljubljen po vsem svetu. Sedaj ga razume že vsaka relacijska baza in je nepogrešljiv pripomoček marsikateri aplikaciji. MySql je program, s katerim uporabljamo SQL podatkovne zbirke. Narejen je tako, da omogoča omrežno uporabo in je zdržljiv s PHP programskim jezikom, brezplačen in lahko dostopen (Welling, Thomso, 2008). Za upravljanje MySql podatkovnih baz lahko uporabimo izdelana orodja (ukazni MySql ali phpmyadmin). Slika 12 prikazuje izpis SQL poizvedbe v phpmyadmin. Slika 12: SQL poizvedba v phpmyadmin Davor Dragić: Spletna informacijska rešitev za klub stran 10
4.6. CMS Sistem za upravljanje vsebine (kratica CMS) omogoča samostojno urejanje vsebin na spletni strani brez znanja označevalnega jezika HTML. Lastniku spletne strani je tako omogočeno spreminjanje in dodajanje besedila, slik in drugih elementov na spletni strani (Wikipedia, CMS, 10. 5. 2011). S takim sistemom upravljanja spletne strani lahko uporabniku omogočimo, da spletno stran ureja tako pogosto, da so na spletni strani vedno najnovejši podatki, kot v primeru, ki ga obravnavamo v diplomski nalogi. Slika 13: TinyMCE urejevalnik besedila 4.7. RSS RSS je družina XML datotečnih oblik za spletno zlaganje (angleško web syndication), ki ga uporabljajo spletne strani. Izvorna različica RSS je bila 0.9, ki jo je zasnovalo podjetje Netscape Communications Corporation za uporabo v njihovem portalu. Izvorno je temeljila na standardu RDF (angleško Resource Description Framework, slovensko okvir za opis virov). Vendar so se v podjetju Netscape odločili, da poenostavijo zapis. To poenostavljeno različico so preimenovali v Rich Site Summery (slovensko zgoščen povzetek strani). Ta standard so kasneje razširili, tako da je lahko vseboval možnosti, prisotne v Scripting News XML obliki (slovensko XML oblika za novičarske skripte), ki ga je zasnoval Dave Winer z UserLand Software (Wikipedia, RSS, 10. 5. 2011). Slika 14 prikazuje primer izpisa RSS v pregledovalniku Firefox. Davor Dragić: Spletna informacijska rešitev za klub stran 11
Slika 14: RSS izpis strani Kluba Top Davor Dragić: Spletna informacijska rešitev za klub stran 12
5. Predlog rešitve za spletni portal Za izdelavo spletnega portala smo zbrali nekaj možnosti in jih preučili, primerjali prednosti in slabosti vsake rešitve in se na podlagi le-teh odločili za eno izmed možnih rešitev. Prvi predlog za izdelavo spletnega portala je uporaba obstoječih prosto dostopnih CMS rešitev. Na izbiro imamo nekaj znanih in zelo razširjenih sistemov, kot so Joomla, Wordpress, Drupal idr. Druga možnost, ki je na voljo, so plačljivi spletni portali, ki jih ponujajo podjetja z uporabo različnih tehnologij. Tretja možnost pa je, da celoten portal izdelamo sami s pomočjo brezplačnih tehnologij, kot so PHP in MySql baza, ki jo obstoječa strežniška kapaciteta tudi podpira. 5.1. Odprtokodni CMS sistemi Joomla je sistem za upravljanje vsebin (slika 15), ki omogoča postavitev dinamičnega spletnega mesta, tako enostavnega kot kompleksnega. Sistem za upravljanje z vsebinami temelji na tehnologijah Apache, MySql in PHP (Spletna stran Joomla, 2. 2. 2011). Aplikacija je dostopna pod licenco GPL. Sistem sestavljajo osnovne komponente (osrednje in skrbniške), komponente modulov in predlog. Aplikacija ponuja: - predstavitev spletnih multimedijskih gradiv, - galerijo slik, - spletni forum in klepetalnico, - spletne dnevnike, - skladišča različnih vsebin, - spletne koledarje, - spletne trgovine in - objavo aktualnih novic ter spletnih anket. Prednosti sistema Joomla so: - enostavna uporaba, - urejanje preko spletnega brskalnika, - dodeljevanje pravic upravljanja, - fleksibilnost, - upravljanje brez potrebnega predznanja spletnih jezikov in - neodvisnost od operacijskega sistema. Sistem Joomla ponuja tudi veliko že pripravljenih predlog oblike spletne strani, ki so na voljo brezplačno, ali pa plačljive verzije. Davor Dragić: Spletna informacijska rešitev za klub stran 13
Slika 15: Joomla CMS 5.2. Plačljivi spletni portali Podjetje ima na voljo tudi nakup celotne rešitve pri podjetjih, ki ponujajo tovrstne produkte in storitve. Prednost te rešitve je, da zunanje podjetje v celoti poskrbi za izvedbo izdelave spletnega portala. Vendar pri iskanju podjetja, ki bo tudi ugodilo kar nekaj zahtevam naročnika, zahteva več povpraševanja in iskanja. Problem pri teh rešitvah je, da ta podjetja ponujajo že pripravljene spletne rešitve, ki jih nato samo nekoliko spremenijo in prilagodijo željam strank. Tukaj se pojavi težava, ker večina plačljivih rešitev ponuja proizvode, ki temeljijo na Microsoftovih tehnologijah ASP, ki pa jih obstoječa strežniška kapaciteta ne podpira. Druga težava pa je urejanje tega portala, saj podjetja za določen znesek ponujajo urejanje vsebine na strani, vendar bodo glede na obseg in pogostost dodajanja novih vsebin na portal ti stroški zelo visoki. 5.3. Lastna spletna rešitev Tretja možnost je, da podjetje izdela spletni portal v celoti samo. Kot osnovo se uporabi odprtokodni sistem za prijavo UserCake (Spletna stran UserCake, 2. 2. 2011), ki ponuja že izdelano rešitev za prijavo uporabnika, podpira večjezičnost in omogoča dodeljevanje pravic glede na skupino uporabnika. Za izdelavo spletnega portala so to opcije, ki so nujno potrebne, in glede na to, da deluje na osnovi tehnologij PHP in MySql, ustreza tudi pogoju za uporabo obstoječe strežniške kapacitete. Izdelava CMS vmesnika pa bo prilagojena vsebini spletne strani, tako da bo preprosta za uporabo. Davor Dragić: Spletna informacijska rešitev za klub stran 14
Lastna rešitev podjetju ponuja veliko večjo fleksibilnost in spletno stran, prilagojeno potrebam podjetja. Celotna rešitev bo izdelana s pomočjo programske opreme Adobe Dreamweaver (Adobe Dreamweaver, 5. 2. 2011). 5.4. Izbrana rešitev Na podlagi vseh predlogov je podjetje izbralo izdelavo lastne spletne rešitve z uporabo UserCake sistema kot osnovo spletne strani, ker nam ta rešitev dopušča največjo mero izdelave spletnega mesta po željah stranke in le na tak način bomo dejansko spletne rešitve prilagodili procesom in željam v podjetju. UserCake sistem tudi vsebuje že kar nekaj pripravljenih PHP rezredov (angleško class), ki jih je mogoče uporabiti v nadaljnjem razvoju, zato bo izdelava hitrejša in predvsem zelo varna, saj je v sistemu UserCake zelo dobro poskrbljeno za varnost spletne strani pred različnimi načini vdorov, ki bi lahko podjetju naredili veliko škode. Za izdelavo preostalih rešitev bomo uporabili metode, ki jih opisuje Bates (2006). Davor Dragić: Spletna informacijska rešitev za klub stran 15
6. Opis spletne strani Glavna želja stranke je, da se uporabi že obstoječa grafična podoba, ki je predstavljena v uvodu diplomske naloge. Spletna stran mora biti dvojezična, saj klub obiskuje tudi veliko ljudi iz tujine, zato smo se odločili, da bo spletna stran izdelana v slovenskem jeziku, ki bo tudi osnovni jezik, in v angleškem jeziku. Obiskovalec bo lahko poljubno menjal jezike na spletni strani. Spletna stran je oblikovana na podlagi obstoječe grafične podobe. Vzorec, ki uporabljajo tudi na stenah v klubu, smo uporabili za ozadje spletne strani. Povzeli smo tudi barvne vzorce kluba in jih uporabili na spletni strani. Uporabljena je vijolično-črna kombinacija barv. 6.1. Uvodna stran Na vstopni strani (slika 16, HTML izpis strani v prilogi 1) se bodo obiskovalcu pojavile novice o prihajajočih dogodkih, ki se odvijajo v klubu. V prvem in večjem oknu bodo podane informacije za dogodek, ki je po datumu najbližji današnjemu, vseboval bo široke informacije o dogodku, o času začetka, ceni vstopnine itd. V manjšem oknu, spodaj, se pojavijo dogodki, ki sledijo le tem, vendar vsebujejo le osnovne informacije. Obiskovalec pa ima možnost, da za vsako vsebino posebej klikne in dobi celotno informacijo o dogodku, kar prikazuje slika 17. Na voljo je tudi navigacijski meni, ki obiskovalcu omogoča prikaz dogodkov za točno določen teden v mesecu. Obiskovalec lahko izbere leto in mesec in nato se mu prikažejo številke tednov v tistem mesecu. S klikom na izbrani teden se mu prikažejo dogodki, ki se bodo ali so se že odvijali v izbranem tednu. S to opcijo lahko obiskovalci hitro pridobijo informacije o dogodkih, ki jih zanimajo v prihodnje ali dogodkih, ki so se že zgodili. Spletna stran je tudi povezana z več socialnimi omrežji, kot so Facebook, Twitter. Davor Dragić: Spletna informacijska rešitev za klub stran 16
Slika 16: Spletna stran - Uvodna stran Slika 17: Spletna stran - Podrobne informacije o dogodku Davor Dragić: Spletna informacijska rešitev za klub stran 17
Obiskovalcu je na voljo tudi arhiv vseh dogodkov (slika 18), ki so se odvijali v klubu, in sicer v spodnjem desnem kotu spletne strani. Obiskovalec izbere leto (privzeto izbrano tekoče leto), nato pridobi seznam vseh dogodkov, razporejenih po mesecih. Podrobnejše informacije o dogodku se prikažejo s klikom na izbrano povezavo. Slika 18: Spletna stran - Arhiv dogodkov 6.2. Galerija V podjetju imajo vedno tudi prisotne fotografe, ki naredijo veliko število fotografij na večer dogodka; te slike želi stranka vsakokrat objaviti na svoji spletni strani. Zato je drugi pomemben element prav galerija slik (slika 19). Galerija slik je sestavljena iz treh večjih galerij, ki pomenijo zadnje dodane galerije in nato še manjše galerije od preteklih dogodkov. Galerija ima možnost tudi pregleda galerij za starejše dogodke preko možnosti izbire leta in meseca ali arhivskega pregleda. Tudi na strani galerije smo omogočili pregled galerij po izbranem letu in mesecu, ki ju uporabnik izbere na dnu strani. Tako lahko uporabnik vidi galerije tudi za nazaj. Za še boljšo preglednost vseh vnešenih galerij smo izdelali tudi arhivski pregled galerij po letu. Uporabnik v zgornjem Davor Dragić: Spletna informacijska rešitev za klub stran 18
delu strani izbere leto, za katero želi videti galerije, nato pa se mu odpre seznam, tj. galerije, združene po mesecih. Slika 19: Spletna stran - Galerija 6.3. Zvezde Spletna stran vsebuje tudi pregled didžejev (slika 20), ki v klubu predvajajo različne glasbene zvrsti. S tem bodo obiskovalci lahko dobili popolno informacijo o tem, kaj se bo na določen večer dogajalo v klubu. Spletna stran omogoča tudi podrobnejši opis vsake posamezne zvezde v Klubu Top (slika 21). Zvezde kluba so didžeji, ki skrbijo za glasbeni del zabave v klubu. Na spletni strani pa lahko navedejo daljši opis, povezave na svoje spletne strani, Facebook profile itd, ter posebno okno na desni strani, kjer lahko navedejo poljuben opis ali citat, po želji vsakega didžeja posebej. Integracija vtičev socialnih omrežjih omogoča tudi večjo povezanost spletne strani, didžeja in uporabnikov socialnih omrežij. Davor Dragić: Spletna informacijska rešitev za klub stran 19
Slika 20: Spletna stran - Zvezde Slika 21: Spletna stran - Podroben opis zvezde 6.4. Rezervacije Pomemben segment v klubu je tudi poseben prostor, namenjen samo obiskovalcem, ki imajo v lasti kartice ugodnosti, ki bodo opisane v naslednjem poglavju, in plačljivim rezervacijam. Na spletni strani so dostopne osnovne informacije, slike prostora in način rezervacije miz (slika 22). Ker gre tukaj za zelo individualne želje strank, poteka sama rezervacija osebno ali po telefonu, ki je naveden na spletni strani. Davor Dragić: Spletna informacijska rešitev za klub stran 20
Strankam podjetje ponuja dva različna načina rezervacije. Na voljo imajo rezervacijo mize v klubu ob zabavah javnega značaja, ki so na spletni strani tudi objavljene, ali ekskluzivni zakup kluba. Slika 22: Spletna stran - Rezervacije 6.5. Kartice ugodnosti Obiskovalci lahko na spletni strani pridobijo vse informacije o možnostih nakupa posebnih kartic, ki omogočajo večje ugodnosti v klubu (slika 23). Poleg tega vsebuje tudi povezavo do nakupa kartice s pomočjo spleta. Na spletni strani (slika 24), ki jo odpre povezava, obiskovalec lahko naroči svojo kartico ugodnosti. Izpolniti mora zahtevana polja s svojimi podatki, priložiti sliko, nato pa po pošti prejme kartico ugodnosti, ki jo uporabi pri obisku kluba. Sistema nismo razvili mi. Davor Dragić: Spletna informacijska rešitev za klub stran 21
Slika 23: Kartice posebne ugodnosti Slika 24: Obrazec za nakup kartice ugodnosti Davor Dragić: Spletna informacijska rešitev za klub stran 22
6.6. Partnerji Podjetje posluje z veliko drugimi podjetji, ki jih želi tudi izpostaviti (slika 25). Na strani so prikazani črno-beli logotipi podjetij in povezave do njihove domače spletne strani. Slika 25: Spletna stran - Partnerji 6.7. Lokacija Spletna stran vsebuje izdelavo zemljevida okolice lokacije podjetja in opis, kako se pride do kluba iz različnih krajev; le tako bodo obiskovalci lažje in hitreje našli klub (slika 26). Izdelali smo zemljevid po željah stranke, saj ni želela uporabe že pripravljenih rešitev Google Maps ali Najdi.si zemljevida. Stranka je želela svoje barve zemljevida, zato je izdelan z uporabo Photoshop orodja, oblika ulic pa povzeta po Najdi.si zemljevidu. Obiskovalcu se ob kliku na sliko zemljevida odpre večja in bolj natančna slika zemljevida. Davor Dragić: Spletna informacijska rešitev za klub stran 23
Slika 26: Spletna stran - Lokacija 6.8. Kontakt Obiskovalci lahko na strani dobijo podatke o telefonskih številkah kontaktov v podjetju. Imajo pa tudi možnost, da kar preko obrazca na spletni strani (slika 27) pošljejo elektronsko pošto. Obrazec pošlje vpisane podatke obiskovalca na osnovni elektronski naslov podjetja (info@klubtop.si). Za ta pristop smo se odločili, ker tako v podjetju ne bodo imeli dodatnega dela, ampak poizvedbe iz spletne strani dobijo v svoj poštni predal enako kot do sedaj. Davor Dragić: Spletna informacijska rešitev za klub stran 24
Slika 27: Spletna stran - Kontakt 6.9. Opis uporabniškega vmesnika Ker se spletna stran pogosto posodablja, je bilo treba izdelati preprost in uporabniku prijazen urejevalnik spletne strani. Za dostop do tega dela spletne strani potrebujemo uporabniško ime in geslo, ki ju imajo samo osebe, ki urejajo vsebino spletne strani (slika 28). Slika 28: Prijava v administratorski del spletne strani Klub Top Davor Dragić: Spletna informacijska rešitev za klub stran 25
Administratorski vmesnik vsebuje možnosti dodajanja in urejanje sledečih vsebin: - dogodkov, - galerij, - zvezd (didžej), - rezervacij, - kartic, - partnerjev, - lokacij, - kontaktov in - povezav. Administrator za dodajanje dogodka izbere opcijo "dodaj dogodek" in nato se mu pojavi izbrano okno za vpis vseh potrebnih informacij o dogodku (slika 29). V polje»title«(slovensko naslov) vpiše ime oz. naslov dogodka, v polje Date (slovensko datum) vpiše datum ali ga preprosto izbere datum iz koledarja. V polje More Info (slovensko več informacij) vpiše dodatne podatke o dogodku. Slika 29: Dodajanje vsebine dogodka Klub Top Davor Dragić: Spletna informacijska rešitev za klub stran 26
Dodajanje ostale vsebine poteka na zelo podoben in preprost način. Urejanje vsebine poteka tako, da uporabnik na sami spletni strani poišče vsebino, ki jo želi urediti, nato se mu v zgornjem desnem kotu prikažejo vse možnosti, ki jih ima in tam izbere "edit" (slovensko uredi, slika 30). Pojavi se mu enako okno kot za dodajanje vsebine (slika 29), le da so že vpisani predhodno vnešeni podatki (slika 31). Slika 30: Možnosti urejanja spletne strani Slika 31: Urejanje vsebine spletne strani Davor Dragić: Spletna informacijska rešitev za klub stran 27
Če želi uporabnik določeno vsebino izbrisati, na spletni strani, kjer ima možnosti urejanja (slika 30), izbere možnost "delete" (slovensko izbriši). Nato se mu pojavi varnostno obvestilo, da se preveri, ali uporabnik resnično želi vsebino v celoti izbrisati (slika 32). Če uporabnik potrdi izbris vsebine, je le ta trajno izbrisana. Slika 32: Obvestilo pred trajnim izbrisom vsebine Urejanje ostale vsebine na spletni strani poteka po enakem postopku. Pri problemu ponovnega vnašanja vseh podatkov na ostale portale pa smo izbrali rešitev RSS za avtomatiziran prenos podatkov na spletne strani. RSS je družina XML datotečnih oblik za spletno zlaganje. Spletni portal enkrat dnevno pregleda RSS zaznamke in vse nove zapise prenese na svojo spletno stran ter jih objavi. S tem imajo zaposleni v klubu dvakrat manj dela, saj vsebino dogodkov vnesejo samo enkrat. RSS prenos podatkov je urejen z naslednjimi spletnimi portali: - epublika.si, - dogaja.se, - lajf.com, - mydestionation.si/slovenia in - studentarija.net. Davor Dragić: Spletna informacijska rešitev za klub stran 28
7. Predlog rešitve za rezervacije Za izdelavo aplikacije, ki bo pomagala pri vodenju evidence rezervacij miz, smo se odločili, da bomo aplikacijo naredili sami. Že obstoječe primerne rešitve nismo našli, saj je stranka zahteva, da mora biti aplikacija dostopna na spletu, ker zaposleni velikokrat vnašajo rezervacije tudi iz oddaljenih lokacij, od doma. Aplikacija mora omogočati določanje pravic vpogleda in urejanja posebej, saj bodo natakarji imeli samo vpogled v rezervacije, medtem ko mora vodja oddelka imeti tudi opcijo urejanja rezervacij. Odločili smo se, da bo aplikacija narejena na osnovi enakih tehnologij kot spletna stran, uporabili bomo grafično podobo podjetja tudi v aplikaciji. Slika 33: Aplikacija za vodenje evidence rezervacij miz Uporabnik aplikacije s preprostim klikom na koledar izbere datum, za katerega želi vpogled, oziroma vnesti spremembo. Ko vnese spremembo, uporabniku ni treba za vsako spremembo pritiskati gumba "shrani", saj ga tudi ni. Sistem vsako spremembo avtomatično shrani. Avtomatično shranjevanje je doseženo z uporabo jquery tehnologije (slika 34). Deluje tako, da ob vsakem kliku v polje preveri vrednost polja pred začetkom vnosa sprememb in po končanem spreminjanju. Če sistem zazna spremembo, avtomatično pošlje podatke v bazo MySql. Davor Dragić: Spletna informacijska rešitev za klub stran 29
Slika 34: jquery koda za avtomatično shranjevanje podatkov Sistem tudi omogoča spreminjanje postavitve miz s preprostim sistemom Drag and Drop (slovensko povleci in izpusti, doseženo z uporabo jquery IU). Uporabnik spremembe postavitve miz vnaša ločeno za vsak dan posebej, če ne pride do spremembe, pa sistem uporabi privzete nastavitve postavitve miz, kot je prikazano na sliki 33. Davor Dragić: Spletna informacijska rešitev za klub stran 30
8. Kritična ocena predlaganih rešitev Nove spletno informacijske rešitve so podjetju prinesle številke prednosti in izboljšave. Do sedaj zaposleni, ki je skrbel za urejanje spletne strani in vnašanje podatkov o dogodkih na ostale portale, ima veliko več časa za druge kritične procese. Posledično ima tudi podjetje manjše stroške dela, ker za urejanje spletne strani ne potrebujejo tako velikega števila porabljenih ur. Poleg tega se vsa ostala spletna mesta sinhronizirajo z enotnim virom podatkov, tako da ne prihaja do različnih podatkov, predvsem v primerih, ko pride do naknadnih sprememb. Podatki o storitvah in dogodkih, ki jih podjetje ponuja, so tudi uporabnikom veliko bolj dostopni in pregledni. Rešitev na področju urejanja evidence rezervacij miz je prinesla veliko pozitivno spremembo, saj od začetka uporabe aplikacije ni več prihajalo do nesporazumov in večkratnih vpisovanj. Celotna evidenca je zelo pregledna, vsi podatki so zbrani na enem mestu in dostopni vsem, ki potrebujejo določeno informacijo v tistem trenutku, ko pride nova stranka, ki želi rezervirati določen prostor v klubu. Nov sistem ima tudi eno veliko slabost, saj je v celoti odvisen od internetne povezave in strežnika, na katerem poteka. Če bo prišlo do izpada internetne povezave v podjetju, pomeni, da bo aplikacija za vodenje evidence rezervacije miz nedostopna, kar v tistem trenutku lahko pripelje do velike zmede. Drugi problem ki se lahko pojavi, je nedelovanje oddaljenega strežnika, ki je zopet odvisen od internetne povezave. Vendar ponudnik storitve zagotavlja 99,9% zanesljivost in v primeru okvare kratek odzivni čas; podjetje pa bi bilo v tem času brez dostopa do aplikacije. Davor Dragić: Spletna informacijska rešitev za klub stran 31
9. Zaključek Pri izdelavi spletnih strani ne moremo govoriti o zaključku projekta, ker je to dinamičen proces. Izdelava spletne strani je zaključena, vendar sledijo njeno vzdrževanje in manjše spremembe. Procesi v podjetju se lahko spremenijo, kar pomeni, da je informacijske rešitve treba tudi prilagoditi novemu procesu; s tehnologijo se namreč prilagajamo procesu in ne prilagajamo procesa tehnologiji. Poleg tega je treba slediti spremembam iskalnikov, da ohranimo spletno stran kluba še vedno na vrhu med zadetki iskanja, treba je slediti spremembam socialnega omrežja ter tako ohraniti ali povečati konkurenčnost pred ostalimi. Podjetje Klub Top je bilo z rešitvami, ki smo jim jih uvedli v poslovanje, zelo zadovoljno, zato bomo s podjetjem ostali v kontaktu. Izrazili so željo po nadaljnjem sodelovanju, saj se podjetje širi in bodo še potrebovali našo pomoč pri svojem poslovanju. Med izdelavo spletnih rešitev sem se tudi sam naučil veliko novega. Velik del literature sem našel na spletu, vendar sem veliko virov zaradi varnosti preveril tudi v pisni literaturi, tako da so uporabljeni le zanesljivi in preverljivi viri. Davor Dragić: Spletna informacijska rešitev za klub stran 32
Literatura in viri - Bates (2006). Web programming: building internet, Building internet applications, Hobokone: -Wiley. ISBN-10:9780470017753. - Rajkovič, V., (2006). Baze podatkov, http://lopes1.fov.uni-mb.si/, obiskano 15. 4. 2011. - Štrancar Matjaž in Klemen Simon (2005). PHP in MySQL na spletnem strežniku Apache, druga izdaja. Ljubljana: Založba Pasadena. ISBN-10: 9616361538. - Welling Luke in Thomson Laura (2008). PHP and MySQL web development, četrta izdaja. Harlow: Addison-Wesley. ISBN-13: 978-0672329166. - Zandstra Matt (2004). Naučite se PHP v 24 urah. Ljubljana: Založba Pasadena. ISBN-13: 9789616361620. - World's largest web development site, http://www.w3schools.com/, obiskano 8. 4. 2011. - Programska oprema Adobe Dreamweaver, http://www.adobe.com/si/products/dreamweaver.html, obiskano 5. 2. 2011. - Spletna stran Joomla, http://www.joomla.org/, obiskano 2. 2. 2011. - Spletna stran jquery, http://jquery.com/, obiskano 2. 2. 2011. - Spletna stran UserCake, http://usercake.com/, obiskano 2. 2. 2011. - Wikipedia, Cascading Style Sheets, http://en.wikipedia.org/wiki/css, obiskano 10. 5. 2011. - Wikipedia, CMS, upravljavec spletnih vsebin, http://en.wikipedia.org/wiki/content_management_system, obiskano 5. 3. 2011. - Wikipedia, HTML, http://en.wikipedia.org/wiki/html, obiskano 10. 5. 2011. - Wikipedia, JavaScript, http://en.wikipedia.org/wiki/javascript, obiskano 10. 5. 2011. - Wikipedia, RSS, http://en.wikipedia.org/wiki/rss, obiskano 10. 5. 2011. Davor Dragić: Spletna informacijska rešitev za klub stran 33
Kazalo slik Slika 1: Celostna grafična podoba Kluba Top...1 Slika 2: Grafična podoba notranjosti Kluba Top...2 Slika 3: Prvotna spletna stran Kluba Top...4 Slika 4: Oblika preprostega HTML dokumenta...6 Slika 5: Prikaz izpisa preprostega HTML dokumenta...6 Slika 6: primer CSS oblikovanja...7 Slika 7: Izgled HTML dokumenta z uporabo CSS oblikovanja...7 Slika 8: Primer uporabe PHP kode v dokumentu...8 Slika 9: Izpis PHP kode...8 Slika 10: Primer uporabe JavaScript...9 Slika 11: Primer JavaScript kode za vnos veljavnih podatkov...9 Slika 12: SQL poizvedba v phpmyadmin... 10 Slika 13: TinyMCE urejevalnik besedila... 11 Slika 14: RSS izpis strani Kluba Top... 12 Slika 15: Joomla CMS... 14 Slika 16: Spletna stran - Uvodna stran... 17 Slika 17: Spletna stran - Podrobne informacije o dogodku... 17 Slika 18: Spletna stran - Arhiv dogodkov... 18 Slika 19: Spletna stran - Galerija... 19 Slika 20: Spletna stran - Zvezde... 20 Slika 21: Spletna stran - Podroben opis zvezde... 20 Slika 22: Spletna stran - Rezervacije... 21 Slika 23: Kartice posebne ugodnosti... 22 Slika 24: Obrazec za nakup kartice ugodnosti... 22 Slika 25: Spletna stran - Partnerji... 23 Slika 26: Spletna stran - Lokacija... 24 Slika 27: Spletna stran - Kontakt... 25 Slika 28: Prijava v administratorski del spletne strani Klub Top... 25 Slika 29: Dodajanje vsebine dogodka Klub Top... 26 Slika 30: Možnosti urejanja spletne strani... 27 Slika 31: Urejanje vsebine spletne strani... 27 Slika 32: Obvestilo pred trajnim izbrisom vsebine... 28 Slika 33: Aplikacija za vodenje evidence rezervacij miz... 29 Slika 34: jquery koda za avtomatično shranjevanje podatkov... 30 Davor Dragić: Spletna informacijska rešitev za klub stran 34
Kratice in Akronimi HTML: SGML: CSS: JavaScript: PHP: PHP/FI: XML: MySql: SQL: JAVA: RSS: CMS: WYSIWYG: W3C: ASP: GPL: Hyper Text MArkup Language (sln. jezik za označevanje nadbesedila) Standard Generalized Markup Language Cascading Style Sheets objektni skriptni programski jezik Hypertext Preprocessor Personal Home Page / Form Interpreter extensible Markup Language (sln. razširljiv označevalni jezik) SQL Database Management System (sln. sistem za upravljanje z bazami podakov) Structured Query Language (sln. strukturirani poizvedovalni jezik) za uporabo poizvedb v podatkovnih zbirkah objektno usmerjeni, prenosljivi programski jezik Really Simple Syndication (sln. zares preprosto zlaganje) Content Management System (sln. sistem za upravljanje vsebine) What You See Is What You Get World Wide Web Consortium Active Server Pages General Public License Davor Dragić: Spletna informacijska rešitev za klub stran 35
Priloga Priloga 1: HTML koda vstopne spletne strani Davor Dragić: Spletna informacijska rešitev za klub stran 36
Davor Dragić: Spletna informacijska rešitev za klub stran 37
Davor Dragić: Spletna informacijska rešitev za klub stran 38
Davor Dragić: Spletna informacijska rešitev za klub stran 39
Davor Dragić: Spletna informacijska rešitev za klub stran 40