Besedilo - FIŠ - Fakulteta za informacijske študije
FAKULTETA ZA INFORMACIJSKE ŠTUDIJE V NOVEM MESTU D I P L O M S K A NALOGA VISOKOŠOLSKEGA STROKOVNEGA ŠTUDIJSKEGA PROGRAMA PRVE STOPNJE PETER ZUPANČIČ FAKULTETA ZA INFORMACIJSKE ŠTUDIJE V NOVEM MESTU D I P L O M S K A NALOGA RAZVOJ SPLOŠNO NAMENSKEGA CMS SISTEMA NA OSNOVI ODPRTOKODNEGA MVC OGRODJA Mentor: viš. pred. mag. Andrej Dobrovoljc Novo mesto, junij 2015 Peter Zupančič IZJAVA O AVTORSTVU Podpisani Peter Zupančič, študent FIŠ Novo mesto, izjavljam: da sem diplomsko nalogo pripravljal samostojno na podlagi virov, ki so navedeni v diplomski nalogi, da dovoljujem objavo diplomske naloge v polnem tekstu, v prostem dostopu, na spletni strani FIŠ oz. v elektronski knjižnici FIŠ, da je diplomska naloga, ki sem jo oddal v elektronski obliki, identična tiskani verziji, da je diplomska naloga lektorirana. V Novem mestu, dne _________________ Podpis avtorja ______________________ ZAHVALA Zahvaljujem se mentorju za strokovno pomoč in vodenje pri diplomskem delu. Posebna zahvala gre staršema, ki sta me v času celotnega študija podpirala in mi stala ob strani. POVZETEK CMS sistem oziroma sistem za urejanje vsebine je v današnjem času vse bolj popularna spletna aplikacija, ki se uporablja predvsem na spletnih straneh, kjer je potrebno pogosto posodabljati vsebine in s tem izboljšati učinkovitost spletne strani. Smotrno je, da za izdelavo spletne aplikacije uporabimo MVC Framework (slov. ogrodje), ki omogoča bolj kakovostno in predvsem bolj optimizirano izdelavo spletnih aplikacij. Prednost MVC ogrodij je tudi ta, da je mogoče logiko spletne aplikacije ločiti na tako imenovan model, ki skrbi za podatkovno logiko, View, ki skrbi za predstavitveni sloj aplikacije, ter Controller, ki skrbi za poslovno logiko delovanja spletne aplikacije. Glede na to, da je na voljo večje število ogrodij, ki so večinoma brezplačna, smo se za razvoj naše spletne aplikacije odločali med petimi najbolj učinkovitimi, ki se uporabljajo za razvoj kompleksnih spletnih aplikacij. V diplomski nalogi bomo tako predstavili razvoj splošno namenskega CMS sistema na PHP ogrodju, ki bo najbolj učinkovito služil našemu namenu. KLJUČNE BESEDE: PHP, Framework, CMS, Codeigniter, Bootstrap ABSTRACT CMS or content management system is nowadays increasingly popular Web application that is mainly used on websites, which mostly want to update the content and thereby improve the efficiency of the website. In order to tackle the manufacturing of such a web application it is advisable to use the MVC Framework, which provides better quality and more especially optimized to create Web applications. The advantage of MVC frameworks is also in this, because we have separated the logic of Web applications on the so-called Model, which is responsible for the data logic View which caters to the presentation layer of applications, and Controller - which is responsible for the business logic of Web applications. Given that we have a larger number of frameworks, most of which are free, we have to develop our web applications to decide during the current five most effective frameworks to be used for the development of complex web applications. In this thesis, we will present the general development of dedicated CMS system to PHP Framework that will most effectively serve our purpose. KEY WORDS: PHP, Framework, CMS, Codeigniter, Bootstrap KAZALO 1. 2. UVOD................................................................................................................................. 1 1.1 Opis problema .............................................................................................................. 1 1.2 Hipoteze ....................................................................................................................... 2 1.3 Cilj raziskave ............................................................................................................... 2 IZDELAVA SPLETNE STRANI ...................................................................................... 3 2.1 Kaj je spletna stran ....................................................................................................... 3 2.2 Vrste spletnih strani ..................................................................................................... 3 2.2.1 Statična spletna stran ........................................................................................... 3 2.2.2 Dinamična spletna stran....................................................................................... 3 2.3 Spletna aplikacija ......................................................................................................... 4 2.4 Tehnologije za izdelavo spletnih strani ....................................................................... 4 2.4.1 Označevalni jezik HTML ...................................................................................... 4 2.4.2 Jezik CSS .............................................................................................................. 5 2.4.3 Skriptni jezik Javascript ....................................................................................... 7 2.4.4 Odzivni dizajn za mobilne naprave ...................................................................... 9 2.4.5 Programski jezik PHP ........................................................................................ 11 2.4.6 Podatkovni jezik MySQL .................................................................................... 12 2.4.7 Templating system .............................................................................................. 13 2.5 PHP MVC ogrodje ..................................................................................................... 16 2.5.1 Kaj je PHP ogrodje ............................................................................................ 16 2.5.2 Uporaba PHP ogrodja ....................................................................................... 16 2.5.3 Najpopularnejša PHP ogrodja ........................................................................... 17 2.5.4 Primerjava spletnih ogrodij ............................................................................... 20 2.5.5 Analiza zastavljenih hipotez ter izbira spletnega ogrodja ................................. 22 3. 4. PREDSTAVITEV CMS SISTEMA ................................................................................. 30 3.1 Predstavitev sistema ................................................................................................... 30 3.2 Predstavitev modulov ................................................................................................ 31 3.2.1 Template editor ................................................................................................... 32 3.2.2 Page editor ......................................................................................................... 34 3.2.3 Menu editor ........................................................................................................ 35 3.2.4 News ................................................................................................................... 37 3.2.5 Gallery ................................................................................................................ 37 3.2.6 Slider................................................................................................................... 38 3.2.7 Contact form ....................................................................................................... 39 3.2.8 Language ............................................................................................................ 39 3.2.9 User .................................................................................................................... 40 PREDSTAVITEV IZDELAVE SISTEMA...................................................................... 41 4.1 Uporabljena orodja za izdelavo spletne aplikacije .................................................... 41 4.2 Podatkovna struktura spletne aplikacije..................................................................... 41 4.2.1 ContactForm....................................................................................................... 42 4.2.2 ContactFormLog ................................................................................................ 42 4.2.3 Gallery ................................................................................................................ 43 4.2.4 GalleryCategory ................................................................................................. 43 4.2.5 Slider................................................................................................................... 44 4.2.6 Language ............................................................................................................ 45 4.2.7 Menu ................................................................................................................... 45 4.2.8 MenuCategory .................................................................................................... 46 4.2.9 News ................................................................................................................... 46 4.2.10 NewsCategory..................................................................................................... 47 4.2.11 Page .................................................................................................................... 48 4.2.12 PageCategory ..................................................................................................... 49 4.2.13 TemplateBlock .................................................................................................... 50 4.2.14 TemplateCss ....................................................................................................... 50 4.2.15 TemplateHtml ..................................................................................................... 51 4.2.16 User .................................................................................................................... 51 4.3 5. Integracija ogrodja .................................................................................................... 52 4.3.1 Model .................................................................................................................. 52 4.3.2 View .................................................................................................................... 54 4.3.3 Controller ........................................................................................................... 54 ZAKLJUČEK ................................................................................................................... 56 PRILOGA KAZALO SLIK Slika 2.1: Primer uporabe CSS ................................................................................................... 5 Slika 2.2: Primer uporabe LESS ................................................................................................. 6 Slika 2.3: Primer uporabe jQuery ............................................................................................... 8 Slika 2.4: Odzivne spletne strani .............................................................................................. 10 Slika 2.5: Primer uporabe PHP kode ........................................................................................ 11 Slika 2.6: Primer SQL poizvedbe ............................................................................................. 13 Slika 2.7: Primer uporabe templating sistemov ........................................................................ 13 Slika 2.8: Primer uporabe Blade ............................................................................................... 14 Slika 2.9: Primer uporabe Twig ................................................................................................ 15 Slika 2.10: Primer uporabe Smarty........................................................................................... 15 Slika 2.11: MVC vzorec ........................................................................................................... 17 Slika 2.12: Primerjava uporabe ogrodij .................................................................................... 18 Slika 3.1: CSS/Less stilski urejevalec ...................................................................................... 33 Slika 3.2: Html urejevalnik....................................................................................................... 34 Slika 3.3: Vsebinski urejevalnik ............................................................................................... 35 Slika 3.4: Menijska struktura .................................................................................................... 36 Slika 3.5: Izpis objavljenih novic v sistemu ............................................................................. 37 Slika 3.6: Prikaz foto galerije ................................................................................................... 38 Slika 3.7: Prikaz slider modula ................................................................................................. 38 Slika 3.8: Kontaktni obrazec za povpraševanje ........................................................................ 39 Slika 3.9: Prijava v sistem ........................................................................................................ 40 Slika 4.1: Primer Controllerja za Gallery modul ...................................................................... 55 KAZALO TABEL Tabela 2.1: Primerjava ogrodij ................................................................................................. 21 Tabela 2.2: Primerjava med odprtokodnim in lastnim sistemom ............................................. 26 Tabela 2.3: Primerjava med Codeigntier in Laravel ogrodjem ................................................ 28 Tabela 4.1: Tabela ContactForm .............................................................................................. 42 Tabela 4.2: Tabela ContactFormLog ........................................................................................ 43 Tabela 4.3: Tabela Gallery ....................................................................................................... 43 Tabela 4.4: Tabela GalleryCategory......................................................................................... 44 Tabela 4.5: Tabela Slider .......................................................................................................... 44 Tabela 4.6: Tabela Language.................................................................................................... 45 Tabela 4.7: Tabela Menu .......................................................................................................... 46 Tabela 4.8: Tabela MenuCategory ........................................................................................... 46 Tabela 4.9: Tabela News .......................................................................................................... 47 Tabela 4.10: Tabela NewsCategory ......................................................................................... 48 Tabela 4.11: Tabela Page.......................................................................................................... 49 Tabela 4.12: Tabela PageCategory ........................................................................................... 49 Tabela 4.13: Tabela TemplateBlock ......................................................................................... 50 Tabela 4.14: Tabela TemplateCss ............................................................................................ 51 Tabela 4.15: Tabela TemplateHtml .......................................................................................... 51 Tabela 4.16: Tabela User .......................................................................................................... 52 1. UVOD V današnjem času spletna stran igra pomembno vlogo na področju oglaševanja. Ljudje se za izdelavo strani odločajo po tehtnem premisleku in glede na to, da jim lahko takšen način oglaševanja prinese bistveno boljše rezultate kot drugi načini oglaševanja. Smisel spletne strani je predstaviti izdelek, storitev ali tisto, kar želimo, da je vidno vsem. Namen je pridobiti maksimalni delež povpraševanj ali pa zgolj predstaviti svoje podjetje z naborom osnovnih informacij, ki jih določena ciljna skupina ravno tisti trenutek potrebuje. Na izvedbo spletnih strani vpliva več različnih faktorjev, s pomočjo katerih definiramo uporabnost strani. V samem izhodišču je pomembno, ali bo spletna stran statična, za kar se večinoma odločajo podjetja, ki potrebujejo zgolj predstavitev, ali pa bo spletna stran dinamična, kar pomeni, da se bo na njej dnevno, tedensko ali mesečno posodabljala vsebina. Vse to je odvisno od tipa želene predstavitve. Glede na to, da se podjetja bolj zanimajo za dinamične spletne strani oziroma CMS spletne strani, smo se tudi v podjetju odločili za celovito izdelavo omenjene spletne aplikacije. CMS sistem oziroma »Content Managment System« je spletna aplikacija, s pomočjo katere lahko uporabnik ureja vsebino neodvisno od lokacije, podjetja, ki je poskrbelo za izdelavo strani, ter ostalih uporabnikov. Pri tem sistemu namreč uporabnik dobi le spletni naslov, kjer mu je na voljo urejevalnik vsebin. Sistem je grajen na osnovi ogrodja (angl. framework), ki omogoča bistveno boljšo izvedbo programiranja, ker pri procesu uporablja t. i. objektno programiranje, ki naredi kodo veliko bolj optimizirano, lažje razumljivo in bolj enostavno. V diplomski nalogi je predstavljen celoten koncept izdelave spletne aplikacije CMS s pomočjo ogrodja, ki smo ga na podlagi analize izbrali med različnimi ponudniki. Diplomska naloga je razdeljena na dva dela, in sicer na teoretični ter praktični del. Teoretični del obsega splošna teoretična pojasnila glede izdelave spletne aplikacije, primerjavo trenutno najbolj uporabljenih ogrodij ter njihovo analizo. V praktičnem delu pa je opisan postopek izdelave lastnega CMS sistema glede na predhodno izbrano ogrodje. 1.1 Opis problema Največji problem podjetij, ki se ukvarjajo z izdelavo spletnih strani, je vprašanje, zakaj se sploh odločiti za izdelavo lastnega CMS sistema in ustrezna določitev, v čem bo ta boljši od že obstoječe izdelanih odprtokodnih (angl. opensource) sistemov. V diplomski nalogi smo 1 poskušali pojasniti, zakaj smo se odločili za izdelavo CMS sistema kar v lastni režiji. Že v osnovi je mogoče izpostaviti kar nekaj prednosti. Vsak del kode, ki je bil napisan s strani programerja, je v celoti osmišljen in je natančno določeno, čemu je namenjen. Prav tako pomembno vlogo igra varnost – glede na to, da kot programerji poznamo kar nekaj ranljivosti sistemov, lahko vse potencialne nevarnosti pri izvedbi lastnega sistema predvidimo in odpravimo. Kadar se odločamo za izvedbo izdelave lastnega CMS sistema ali katere koli druge spletne aplikacije, se vedno poraja vprašanje, ali je boljša izbira izdelati sistem povsem na novo ali začeti izdelavo s pomočjo že narejenih ogrodij. Tudi ta problem smo v diplomski nalogi pojasnjevali ter na koncu ugotovili, katero je najbolj smiselno in najbolj uporabno ogrodje za izdelavo želene spletne aplikacije. 1.2 Hipoteze Pri izvedbi diplomske naloge smo si zastavili nekaj hipotez, s pomočjo katerih smo lažje analizirali rezultate. Naše hipoteze so: Odprtokodni CMS sistemi imajo bistveno več prednosti kot CMS sistemi, izdelani v lastni izvedbi. Ogrodja se močno razlikujejo med seboj po razpoložljivih virih, ki jih programer nujno potrebuje pri razvoju produkta (navodila, skupnost, rešitve problemov ...). Ogrodja se med seboj razlikujejo po podprtih funkcionalnostih, zato verjetno nekatera ne podpirajo vseh komponent in funkcionalnosti, ki jih bomo potrebovali pri izdelavi želenega sistema. 1.3 Cilj raziskave Naš cilj v diplomski nalogi je seznanitev z različnimi ogrodji za izdelavo spletnih aplikacij, ki olajšajo proces izdelave s pomočjo že izdelanih funkcionalnosti. Naslednji cilj je analizirati pet najbolj uporabljenih ogrodij in izbrati tistega, ki bo najbolj ustrezal specifikacijam glede na želene zahteve samega sistema. Končni cilj je izdelati spletno aplikacijo, tako imenovani CMS sistem za urejanje vsebin, s pomočjo enega od vnaprej izbranih ogrodij. 2 2. IZDELAVA SPLETNE STRANI 2.1 Kaj je spletna stran Spletna stran je dokument, ki je kodiran v HTML jeziku. Omogoča nam, da svoje storitve, dejavnosti in ponudbo predstavimo na spletu ter na ta način poskrbimo za oglaševanje, prepoznavnost in lažji pretok informacij. V nadaljevanju so opisane osnove spletnih strani, ki jih je potrebno poznati za učinkovito izdelavo. 2.2 Vrste spletnih strani Glede na trenutni trend ločimo kar nekaj različnih tipov spletnih strani, pri čemer jih v osnovi delimo na statične strani, ki se ne posodabljajo vsakodnevno, in dinamične spletne strani, ki omogočajo kontinuirano posodabljanje in spreminjanje vsebin. 2.2.1 Statična spletna stran Statična spletna stran je kodirana in napisana v HTML jeziku. Te strani so uporabne predvsem v primerih, kjer vsebina ostane nespremenjena dlje časa. Slaba stran je, da moramo v primeru sprememb znotraj vsebine ročno kodirati stran, pri čemer je mogoče uporabiti tudi programsko opremo za tovrstno urejanje. Vsakršna sprememba dizajna strani je veliko bolj zahtevna in dolgotrajna, zato lahko to dolgoročno za podjetje predstavlja velik strošek. Statične strani imajo torej kar nekaj omejitev na področju spreminjanja vsebin in dizajna, ena izmed ključnih prednosti pa je hitrost nalaganja vsebine, ki posledično pomeni boljšo odzivnost. (Vining, 2008) 2.2.2 Dinamična spletna stran Dinamične spletne strani so narejene tako, da se urejajo s pomočjo CMS urejevalnika, v katerem so ločene oblika, menijska struktura, slike itd. na vsak strani posebej. Videz je nadzorovan preko urejevalnika, vsebinski del pa se nahaja v podatkovni bazi. Večina CMS sistemov, pa tudi forumi, blogi ter ostale spletne aplikacije delujejo na podoben način. Sistem je odličen za hitre in enostavne posodobitve, saj omogoča enostavno manipulacijo s celotnim spletnim mestom. (Vining, 2008) 3 Dinamična stran ima v primerjavi s statično kar nekaj prednosti, saj omogoča nenehno posodabljanje spletnih vsebin. S pomočjo sistema lahko izdelamo nove spletne strani, dodamo članke, uredimo menijsko strukturo itd. brez dejanskega znanja programiranja. Tudi, če želimo spremembe opraviti na ravni grafične podobe, jo lahko enostavno uredimo in dodamo preko vmesnika ter jo integriramo v sam sistem. (Vining, 2008) 2.3 Spletna aplikacija Spletna aplikacija je vsaka spletna stran, ki v ozadju dinamično generira določen del izpisa spletne strani in ima vnaprej določen namen. Prednost spletne aplikacije v primerjavi s standardnimi spletnimi stranmi je, da omogoča izvajanje zahtevanih nalog brez kakšnih koli večjih posegov v ozadju spletne strani. Spletna aplikacija se običajno povezuje s podatkovno bazo in operacije se izvajajo na strani strežnika. Spletne aplikacije se večinoma izdelujejo v skriptnem jeziku PHP, vse bolj pogosta pa je tudi uporaba jezika »Ruby«. Aplikacije so uporabne predvsem v primerih, kjer je potrebna dinamika spletne strani in kjer se izvajajo naloge, ki jih ni mogoče izvajati na statičnih spletnih straneh. 2.4 Tehnologije za izdelavo spletnih strani 2.4.1 Označevalni jezik HTML HTML je kratica za HyperText Markup Language, ki je jezik za objavljanje na svetovnem spletu. Je podmnožica mednarodnega standarda za izmenjavo elektronskih dokumentov imenovan SGML (Standard Generalized Markup Language). Računalniki potrebujejo programsko opremo, da lahko ta jezik razumejo. Ta programska oprema vključuje grafične brskalnike, tekstovne in govorne naprave. (Breščak, 2010a) HTML je označevalni jezik (angl. Markup Language). S posebnimi elementi se označi besedilo, ki brskalniku pove, kako naj strukturo dokumenta prikaže. Obstaja način, kako označiti naslove, odstavke, sezname, tabele in mnoge druge elemente. HTML je hipertekstovni jezik (angl. Hypertext Language). Hipertekst uporablja postopek sklicevanja na druge spletne dokumente, ki so med seboj povezani. Ko se v spletnem dokumentu klikne povezavo, se v resnici kliče hiperpovezavo. (Breščak, 2010a) HTML ponuja: elektronsko objavo dokumentov z besedili, tabelami, fotografijami ..., 4 preusmeritev in napotitev na druge informacije s pomočjo hiperpovezav, uporabo obrazcev, ki omogočajo iskanje po spletu, naročanje izdelkov ..., dodajanje video izrezkov, zvoka in drugih aplikacij v dokumente. (Breščak, 2010a) 2.4.2 Jezik CSS CSS je kratica, ki pomeni »Cascading Style Sheets«. Gre za predlogo, ki določa, kako bo videti spletna stran v brskalniku. Razvoj se je začel kot poskus, da izdelovalcem spletnih strani omogoči ločevanje vsebine spletnih strani od dizajna, kar je tudi v celoti uspelo. Preboj CSS-a se je zgodil, ko se je pojavila potreba po lepših, boljših in predvsem zahtevnejših spletnih straneh, saj je bistveno poenostavil doseganje teh učinkov. Ena od njegovih značilnosti je namreč, da je podoba spletnih strani ločena od kode, kar v praksi pomeni, da je tudi menjavanje videza spletne strani enostavnejše, saj lahko npr. z nekaj preprostimi ukazi zamenjamo celotno grafiko spletne strani. (Šunta, 2012) Glede na to, da se tehnologije izdelave spletnih strani vse bolj razvijajo, smo tudi pri naši spletni aplikaciji uporabili eno od predprocesorskih tehnologij za stilsko oblikovanje spletne strani. Spodaj sta opisani tudi dve tehnologiji, ki sta vse bolj v uporabi, in sicer LESS ter SASS. Slika 2.1: Primer uporabe CSS Vir: Zupančič, lastni prikaz (2015) 5 2.4.2.1 Predprocesorski jezik LESS LESS uporablja samo eno sintakso, ki se zgleduje po CSS sintaksi in je tudi zelo podobna SCSS sintaksi. Uporablja zavite oklepaje za označevanje posameznih blokov kode in podpičja za ločevanje vrstic. Datoteke imajo končnico .less. LESS je bil prvotno programiran v programskem jeziku Ruby, v novejših verzijah pa je le-ta zamenjan z JavaScriptom. Za razliko od tehnologije SASS lahko LESS teče tako na strani strežnika (angl. server-side) kot na strani uporabnika (angl. client-side). (Polc, 2012) Slika 2.2: Primer uporabe LESS Vir: Zupančič, lastni prikaz (2015) 2.4.2.2 Predprocesorski jezik SASS SASS (angl. Syntactically Awesome Stylesheets) uporablja dve različni sintaksi. Prva sintaksa je bila podobna sintaksi Haml, ki uporablja zamike za ločevanje posameznih blokov kode in nove vrstice brez ločil na koncu. Druga z imenom SCSS se zgleduje po CSS sintaksi in uporablja zavite oklepaje za označevanje posameznih blokov kode ter podpičja za ločevanje vrstic. Datoteke imajo končnico .sass oziroma .scss. 6 SASS je bil prvotno programiran v programskem jeziku Ruby, kasneje pa so se pojavile tudi druge oblike, na primer PHP za Drupal. SASS lahko uporabljamo le na strežniški strani (server-side). (Polc, 2012) 2.4.3 Skriptni jezik Javascript JavaScript je skriptni jezik, ki se uporablja pri izdelavi interaktivnih spletnih strani. JavaSript nam omogoča, da na spletno stran dodamo interaktivne funkcionalnosti, validacijo spletnih obrazcev, funkcije za komunikacijo s strežnikom, … (Presentia, 2008) Sintaksa JavaScript jezika je podobna sintaksi jezika C, mnogo značilnosti in struktur pa si deli z Javo, s katero sicer ni povezana. Java in JavaScript imata zelo različno semantiko. (Presentia, 2008) JavaScript je predmetno orientiran programski jezik, ki se uporablja za izračunavanje in rokovanje z objekti na uporabniški strani. JavaScript sam po sebi ni uporaben – vanj ne moremo vnašati podatkov in nam jih tudi ne vrača. Sodelovati mora s predmeti na uporabniški strani ter njihovimi lastnostni in postopki. JavaScript omogoča integracijo dokumentov HTML, spletnih komponent (Java, ActiveX...) in komponent plug-in tako, da postanejo spletne strani dinamične. JavaScript je primer predmetno orientiranega skriptnega jezika, ki se izvaja na strani uporabnika. Namenjen je izračunavanju in rokovanju s predmeti v brskalniku. Sam po sebi ni uporaben, temveč potrebuje aplikacijo, znotraj katere se nahaja. Uporablja se na mnogih področjih, in sicer: upravljanje z okni in okvirji, meniji, predstavitev besedila in slik, upravljanje z zgodovino in s povezavami, delo s piškotki (cookies), oblikovanja integriranih uporabniških vmesnikov, preverjanje vnesenih podatkov, pošiljanje podatkov, časovni nadzor. (Breščak, 2010b) 7 2.4.3.1 jQuery knjižnica jQuery je JavaScript ogrodje ali knjižnica, ki vsebuje vnaprej napisane JavaScript funkcije. Filozofija ogrodja jQuery se glasi: »Write less, do more« (z manj pisanja narediti več), kar pomeni, da je programerjem z uporabo tega ogrodja potrebno napisati bistveno manj, da dosežejo boljše rezultate. Le z nekaj kratkimi klici funkcij lahko s tem ogrodjem na stran dodamo veliko animacij in efektov ter vizualnih učinkov, za katere bi brez ogrodja porabili veliko več časa. jQuery knjižnica se navezuje na naslednje funkcije uporabe: izbor elementov HTML, manipulacija elementov HTML, manipulacija dokumentov CSS, učinki in animacije JavaScript-a, spreminjanje HTML DOM objekta, uporaba tehnologije Ajax. (Lemajič, 2010) Slika 2.3: Primer uporabe jQuery Vir: Zupančič, lastni prikaz (2015) 2.4.3.2 AJAX - asihroni JavaScript Asynchronous Javascript + XML (AJAX) ni tehnologija, temveč skupek tehnologij za izdelavo interaktivnih spletnih aplikacij. Tehnika AJAX vključuje: XHTML in CSS standarda, 8 interakcijo s stranjo preko DOM (Domain Object Model), izmenjavo podatkov s pomočjo označevalnega jezika XML in XSLT, objekt XMLHttpRequest za asinhrono pridobivanje podatkov, programski jezik JavaScript za povezavo vsega naštetega. V klasičnih spletnih aplikacijah poteka interakcija med odjemalcem in strežnikom tako, da vsaka uporabnikova akcija v spletnem vmesniku povzroči HTTP zahtevek, ki se pošlje spletnem strežniku. Strežnik obdela zahtevek in pošlje rezultate nazaj k odjemalcu. Pri naslednji akciji se celoten postopek ponovi. AJAX tehnika po drugi strani prispeva k temu, da so spletne aplikacije bolj podobne namiznim. Deluje namreč tako, da se zahtevki k strežniku pošiljajo asinhrono, kar pomeni, da lahko – medtem ko odjemalec čaka na odgovor strežnika – uporabnik nemoteno uporablja spletno aplikacijo. Ko so podatki pripravljeni, jih s pomočjo JavasScript-ta prikažemo na spletni strani, ne da bi pri tem morali osvežiti celotno stran. Posebnost tehnike AJAX je tudi ta, da se pri komunikaciji med odjemalcem in strežnikom prenese veliko manj podatkov, saj se osvežujejo le deli spletne aplikacije in ne celotna stran. Posledica tega je bolj odzivna in do uporabnika prijaznejša spletna aplikacija. (Marinšek, 2010) 2.4.4 Odzivni dizajn za mobilne naprave Porast tabličnih računalnikov in pametnih telefonov vse bolj zahteva, da se sodobne spletne strani poleg standardne verzije izdelajo tudi v mobilni verziji – responsive design. To pomeni, da je videz strani na računalniku klasičen, medtem ko se stran ustrezno prilagodi različnim tabličnim računalnikom in pametnim telefonom na način, da uporabniku zagotavlja enostavno brskanje in učinkovit ogled strani. Odzivni dizajn spletnih strani obsega oblikovanje strani na način, da se vedno prilagodijo napravi, s katero uporabnik dostopa do spletne strani. Pri odzivnem oblikovanju strani je tudi upoštevano, da se funkcionalnost prilagodi zaslonom na dotik. Namen tega je, da se pripravi le ena spletna stran, ki je prilagojena različnim napravam. Mobilne spletne strani so narejene tako, da sistem samodejno zazna uporabnike, ki stran obiščejo preko mobilnega telefona ali tabličnega računalnika, ter prikaže vsebine v mobilni različici, prilagojeni specifiki posamezne naprave. Grafična prilagoditev: ekran mobilnega telefona oz. tablice zahteva posebne grafične prilagoditve spletne strani, pri čemer je potrebno poskrbeti, da izhodiščna predstavitev tudi na novem mediju doseže želeni namen. 9 Prilagoditev funkcionalnosti: brskanje po internetu z mobilnih telefonov in tablic ima določene omejitve, zato je potrebno mobilne spletne strani prilagoditi tako, da uporabnik hitro in enostavno najde informacije ter lahko dostopa do vseh funkcij, ki jih zagotavlja klasična spletna stran. Trenutno najbolj uporabljena ogrodja za izdelavo mobilnih spletnih strani so: Boostrap, Foundation, Yaml, Kube in Toast. (1A Internet , 2014) Slika 2.4: Odzivne spletne strani Vir: 1A Internet (2014) 2.4.4.1 Twitter Bootstrap ogrodje za izdelavo odzivnih spletnih strani Twitter Boostrap je zbirka sodobnih orodij, s katerimi lahko na enostaven način zastavimo osnovno ogrodje sodobnih spletnih strani. Je odprtokoden način, ki je zaščiten z licenco Apache License 2.0. Vsebuje številne sodobno oblikovane HTML komponente, kot so tipografija, tabele, obrazci, gumbi, ikone, navigacija, poleg njih pa tudi JavaScript komponente, kot so modalna okna, zaslonski namigi, spustni meniji idr. ter mrežo, ki omogoča enostavno razporeditev elementov. V zadnjem času je na trgu prisotnih vse več različnih brskalnikov in naprav, zato je enoten videz spletnih strani zelo težko doseči. Ravno to je glavna prednost Twitter Bootstrap-a, saj razvijalcem omogoča doseganje enotnega videza v skoraj vseh brskalnikih. Vse bolj popularen postaja tudi zato, ker na enostaven način omogoča ustvarjanje modernega in funkcionalnega vmesnika. Njegovo popularnost dokazuje tudi trenutno prvo mesto na GitHub-ovi lestvici najbolj popularnih projektov. (Župec, 2012) 10 2.4.5 Programski jezik PHP PHP je jezik, ki je prerasel svoje ime. V osnovi je bil namreč zamišljen kot niz makrov, ki bi piscem kode pomagali pri vzdrževanju osebnih domačih strani, ime pa se je razvilo iz njegovega namena. Od takrat so bile zmožnosti PHP-ja razširjene iz niza pripomočkov v programski jezik s številnimi možnostmi, s katerim je mogoče upravljati velika spletna okolja, ki jih poganjajo zbirke podatkov. (Zandstra 2004, str. 7) PHP je uradno znan kot PHP:Hypertext Preprocessor. Je strežniški skripnti jezik, pogosto zapisan v povezavi s HTML-jem. V nasprotju z običajno HTML stranjo se PHP skripta izvaja na strani strežnika, medtem ko se HTML izvaja na strani uporabnika. Elementi HTML v skripti so izpuščeni, koda PHP pa je prevedena in izvedena. S kodo PHP v skriptu lahko poizvedujemo po zbirkah podatkov, izdelujemo slike, beremo in zapisujemo datoteke, komuniciramo z oddaljenimi strežniki. (Zandstra 2004, str. 8) Je fleksibilen, dinamičen jezik, ki podpira celo vrsto programskih tehnik. Ima celoten nabor lastnosti objektnega programiranja, ki vključujejo podporo za razrede (angl. classes), abstraktne razrede, vmesnike (angl. interfaces), dedovanje, konstruktorje, kloniranje, izjeme in še več. Podpira prvorazredne funkcije, kar pomeni, da je lahko funkcija dodeljena spremenljivki. Tako uporabniško definirane ali vgrajene funkcije se lahko sklicujejo na spremenljivko in se jih kliče dinamično. Funkcije se lahko podaja kot argumente drugim funkcijam (lastnost višji red – higher-order funkcije) in tako lahko funkcije vrnejo tudi druge rezultate podanih funkcij. Rekurzija, lastnost, ki dovoljuje funkciji, da kliče samo sebe, je podprta v jeziku, vendar se večina PHP kode osredotoča na iteracije. (Lockhart, 2015) Slika 2.5: Primer uporabe PHP kode Vir: Zupančič, lastni prikaz (2015) 11 2.4.5.1 PHP Composer Composer je orodje za upravljanje z odvisnostmi v PHP. Omogoča deklariranje odvisnih knjižnic, ki jih izbrani projekt potrebuje, in jih ustrezno namesti vanj. Composer ni paketni urejevalec, temveč je njegov namen, da pakete na ravni določenega projekta namesti v izbrani direktorij in poskrbi za pravilno integracijo. Paketov nikdar privzeto ne namesti globalno, temveč preveri odvisnosti oziroma razlike med drugimi paketi in na podlagi tega izdela posodobitev oziroma namestitev. Composer tako vedno najde, katero verzijo paketa je potrebno namestiti ter jo po potrebi prenese in namesti v projekt. Eden od osnovnih repozitorijev za prenos in namestitev paketov je Packagist, med drugimi pa se uporabljajo tudi Bitbucket in GitHub. (Adermann in Boggiano, 2015) 2.4.6 Podatkovni jezik MySQL SQL (angl. Structured Query Language) je standardiziran jezik za upravljanje zbirk podatkov RDBMS (angl. Relational DataBase Managenent System), torej zbirk, v katerih so podatki shranjeni v povezanih dvodimenzionalnih tabelah. Temeljni elementi relacijske zbirke podatkov so tabela (angl. table), stolpec (angl. column), vrstica (angl. row) in polje (angl. field), ki predstavlja presek stolpca in vrstice. V celici je shranjen posamezen podatek oz. vrednost. Na voljo je cela paleta sistemov za upravljanje relacijskih zbirk podatkov. Med najbolj razširjene sodijo Oracle DB, IBM DB2, IBM Informix, PostgreSQL, MySQL, MS Access in MS SQL Server. Čeprav je jezik SQL standardiziran, se lahko sintaksa jezika med različnimi sistemi RDBMS precej razlikuje, saj so številni razvijalci uvedli različne omejitve in razširitve (npr. T-SQL, PL/SQL). S stališča uporabe to pomeni, da je uspeh vrivanja SQL pogojen s poznavanjem specifičnih lastnosti ciljne zbirke podatkov. Izvajanje ukazov ob pomoči stavkov SQL imenujemo poizvedba (angl. query). (Strosar, 2008) Večina aplikacij za zbirke podatkov, kot je na primer MySQL, se izvaja kot strežniška storitev, na katero se lahko priključujejo uporabniki iz istega ali celo iz oddaljenih računalnikov. Ko je uporabnik priključen na strežnik in ima ustrezne pravice, lahko izbere zbirko podatkov. (Zandstra 2004, str. 246) Zbirka podatkov vsebuje različno število tabel s podatki, vsaka pa je urejena v vrstice in stolpce. Vsak stolpec sprejema le vnaprej določen tip podatkov, INT na primer za celo število ali VARCHAR za spremenljivo število znakov do določene meje. (Zandstra 2004, str. 246) 12 Slika 2.6: Primer SQL poizvedbe Vir: Zupančič, lastni prikaz (2015) 2.4.7 Templating system »Templating system« je način prikazovanja PHP kode v HTML sintaksi brez uporabe PHP sintaks. Uporablja tako imenovane HTML spremenljivke, ki so ob prikazu spletne strani zamenjane s PHP kodo. Pri tem sistemu je prednost predvsem v tem, da je HTML sintaksa ločena od PHP sintakse, kar pomeni, da je prikazovalni del v celoti ločen od logike, ki se izvaja v ozadju. Dodatna prednost je tudi enostavna uporaba »Template« sintaks, saj ni potrebno predhodno znanje PHP skriptnega jezika. Najpogosteje trenutno uporabljeni »Templating« sistemi so: Blade, Twig in Smarty. Pomembne prednosti, zaradi katerih se odločimo za tak sistem prikaza spletnih strani, so: nova enostavna sintaksa, avtomatsko izpuščanje kode, enostavnejša uporaba za ne-razvijalce spletnih aplikacij, varnost, saj je prikaz ločen od logike, ki se izvaja v ozadju. (Underwood, 2014) Slika 2.7: Primer uporabe templating sistemov Vir: Zupančič, lastni prikaz (2015) 13 2.4.7.1 Blade Blade je preprost, a zmogljiv templating sistem, ki je v osnovi integriran v Laravel ogrodju. Za razliko od ostalih postavitvenih sistemov deluje na principu dedovanja elementov in razdelitvi po več sekcijah. Vse Blade predloge se označuje s končnico .blade.php. Omenjen template sistem ima možnost uporabe enostavnih izpisov, uporabo if pogojev, uporabo zank, podajanje komentarjev, izpisovanje jezikovnih značk ter prepisovanje sekcij. (Laravel, 2014) Slika 2.8: Primer uporabe Blade Vir: Zupančič, lastni prikaz (2015) 2.4.7.2 Twig Prednosti uporabe Twig templating sistema so: hitrost, varnost in fleksibilnost. Twig pretvori predlogo v navadno optimizirano PHP kodo. Ta pretvorba omogoča zmanjšanje v primerjavi z regularnim PHP-jem na njegov minimum. Vgrajen ima sistem za preverjanje kode in s tem prepreči blokiranje neprimerne kode uporabnikom, ki imajo direkten dostop do spletnih predlog. V ta namen se lahko Twig uporablja predvsem tam, kjer do predlog dostopajo tudi uporabniki sami in imajo tako popoln nadzor nad podano kodo. Razvijalcem omogoča tudi definiranje poljubnih tagov in filtrov, ki jih lahko uporabijo kasneje v kodi. (Twig, 2012) 14 Slika 2.9: Primer uporabe Twig Vir: Zupančič, lastni prikaz (2015) 2.4.7.3 Smarty Smarty je template sistem za PHP, ki ima predstavitveno plast (HTML/CSS) ločeno od logike same aplikacije. To pomeni, da je PHP koda logika aplikacije, ki je ločena od predstavitve. Je enostaven sistem tako za frontend kakor za backend izdelavo spletnih strani. Omogoča zelo enostavno in hitro razvijanje tako dizajnerjem kot tudi programerjem. Je relativno enostaven za vzdrževanje z zelo enostavno razumljivo sintakso, kjer predznanje PHP-ja ni pogoj. Tako lahko s pomočjo tega sistema izdelamo fleksibilne spletne strani in pri tem uporabljamo poljubno določanje sintakse. (Ohrt, 2015) Slika 2.10: Primer uporabe Smarty Vir: Zupančič, lastni prikaz (2015) 15 2.5 PHP MVC ogrodje 2.5.1 Kaj je PHP ogrodje PHP je svetovno znan skriptni jezik, ki je tolikšen uspeh dožive zaradi več razlogov, kot so fleksibilnost, preprostost in veliko število uporabnikov. Programiranje v PHP-ju ali katerem drugem jeziku lahko postane monotono in ponavljajoče (angl. Boilerplate), zato si je mogoče v takem primeru pomagati s PHP ogrodjem. PHP ogrodje racionalizira razvoj spletnih aplikacij, napisanih v PHP, saj zagotavlja osnovno strukturo za izdelavo spletnih aplikacij. Drugače povedano PHP ogrodje pomaga spodbuditi hiter razvoj aplikacij, prihrani čas, omogoča izgradnjo bolj stabilnih aplikacij in zmanjšuje količino ponavljajočega kodiranja za razvijalce. Ogrodje lahko pomaga tudi začetnikom graditi bolj stabilno aplikacijo z zagotavljanjem ustrezne interakcije s podatkovno bazo in kodiranje na predstavitvenem sloju. (Reyes, 2009) Splošna ideja ogrodja se navezuje na tako imenovani »Model View Controller« (MVC). MVC je arhitekturni vzorec v programiranju, ki loči poslovno logiko od uporabniškega vmesnika. Črka M označuje tako imenovani Model, ki se nanaša na podatkovno strukturo, črka V View, ki se nanaša na predstavitveni sloj oziroma grafični vmesnik, ter C Controller, ki se nanaša na poslovno logiko delovanja spletne aplikacije. V bistvu MVC razbije razvojni proces na način, da individualno delamo na določenem segmentu, ki je večinoma neodvisen od drugih, zaradi česar je kodiranje v PHP bistveno hitrejše in manj zahtevno. (Reyes, 2009) 2.5.2 Uporaba PHP ogrodja Eden izmed ključih razlogov za uporabo PHP ogrodij je skrajšanje časa razvoja spletnih aplikacij. Pri izdelavi spletnih aplikacij se razvijalci vedno srečujejo z istimi težavami, in sicer: zasnova uporabniškega vmesnika, poslovna logika, manipulacija podatkovne baze, nadzor uporabniškega dostopa. Drugi razlog je stabilnost izdelka. PHP ima enostavno sintakso, zaradi česar ga mnogi začetniki izberejo za učenje. Hkrati je PHP zelo neobčutljiv na napake in mnogokrat se lahko zgodi, da razvijalec sploh ne ve, da je naredil napako, saj spletna stran vseeno deluje, vendar 16 pa obstaja nevarnost, da se zaradi napake ogrozi varnost spletne strani. Problematiko enostavnosti kodranja v PHP-ju pomaga zmanjševati uporaba primernega PHP ogrodja. K stabilnosti prispeva tudi dejstvo, da ogrodje razvijajo profesionalni razvijalci, ki spremljajo odkrite napake in skrbijo za popravke ogrodja. To še posebej velja za odprtokodna ogrodja, kjer lahko za popravke poskrbi kar skupnost, ki pregleda ogrodje in ugotavlja morebitne napake. Razvijalcu spletne aplikacije, ki ogrodje uporablja, tako ni potrebno skrbeti za napake, ampak le uveljavi popravek ogrodja, ko je ta na voljo. Na ta način lahko na enostaven način odpravi napake v vseh aplikacijah, ki to ogrodje uporabljajo. (Kovačič, 2010) Slika 2.11: MVC vzorec Vir: DITEA (2015) 2.5.3 Najpopularnejša PHP ogrodja PHP ogrodja so skupek že izdelanih funkcij, s pomočjo katerih lahko spletno aplikacijo izdelamo bistveno hitreje in bistveno bolj varno. Na spletu je trenutno na voljo okoli dvajset 17 različnih PHP ogrodij, ki vsebujejo približno enake funkcionalnosti, vendar se glede na način delovanja in lastnosti med seboj razlikujejo po učinkovitosti. Glede na to, da smo za razvijanje sistema potrebovali PHP ogrodje, smo se odločili za analizo trenutno petih najpopularnejših ogrodij ter glede na razpoložljive vire določili, katero je najbolj primerno za izdelavo našega CMS sistema. Na spodnji sliki je razvidna trenutna popularnost uporabe PHP ogrodij. Slika 2.12: Primerjava uporabe ogrodij Vir: Skvorc (2013) Na podlagi grafa popularnosti smo se odločili, da najbolj primerno PHP ogrodje izberemo med naslednjimi: Laravel, Phalcon, Symfony2, Codeigniter in Yii. 2.5.3.1 Laravel Laravel je spletno aplikacijsko ogrodje z izrazito elegantno sintakso. Poskrbi namreč, da so najtežja opravila, kot so avtorizacija, preusmerjanje, seje ipd., opravljena lažje in bolj enostavno. Ogrodje pomaga pri tem, da razvoj spletne aplikacije poteka enostavno brez žrtvovanja funkcionalnosti aplikacije. Ogrodje bodo v bodoče tudi funkcionalno integrirali v jezike, kot so Ruby on Rails, ASP.NET MVC ter Sinatra. 18 Je enostavno dosegljivo orodje, ki se ga uporablja predvsem za bolj kompleksne in robustne aplikacije. Še posebej dobra funkcionalnost je migracija sistema in enostavno integrirana testna podpora, ki celostno poskrbi za dobro uporabniško izkušnjo. (Laravel, 2014) 2.5.3.2 Phalcon Phalcon je večnamensko spletno ogrodje. Izdelano je na MVC arhitekturi, ki ponuja dodatke, kot so ORM, objektno orientirane knjižnice, templating sistem, caching, paginacijo in kup ostalih dodatkov, ki jih najdemo na njihovi spletni strani. Ogrodje Phalcon je unikatno ogrodje, ker se ga ne prenese le na strežnik in tam naloži, kot je to praksa ostalih ogrodij, ampak se ga namesti kot dodaten PHP modul. Namestitev ne vzame več kot nekaj minut in namestitvena dokumentacija je vidna na njihovi spletni strani. Pomembno je tudi dejstvo, da je to ogrodje odprtokodno, kar pomeni, da lahko uporabnik po svoji želji prilagodi kodo. (Cogneau, 2013) 2.5.3.3 Symfony2 Symfony je skupek PHP komponent in eno vodilnih PHP ogrodij za izdelavo spletnih strani ter spletnih aplikacij, ki so grajene na Symfony komponentah. Na tem ogrodju je grajenih kar nekaj znanih spletnih aplikacij, kot so: Drupal, phpBB(forum) ter eZ Publish. Za vzdrževanje skrbi velika skupnost uporabnikov in razvijalcev, ki skrbijo za redne popravke in novosti. Njihova filozofija poudarja profesionalnost, uvajanje najboljših praks, standardizacijo in interoperabilnost aplikacij. (SensioLabs, 2014) 2.5.3.4 CodeIgniter CodeIgniter je aplikacijsko razvijalno ogrodje za vse, ki gradijo spletne strani z uporabo PHP skriptnega jezika. Njihov glavni cilj je omogočiti hiter razvoj spletnih aplikacij od samega začetka, saj vsebuje mnogo knjižic, ki so potrebne za enostavno implementacijo želenih ciljev. Ogrodje omogoča kreativno izvedbo projekta z minimaliziranjem celotne kode, ki je potrebna za določeno nalogo. Ogrodje je primerno predvsem za uporabnike, ki potrebujejo majhno ogrodje, želijo učinkovito izvajanje, 19 želijo dobro združljivost na vseh standardnih spletnih strežnikih (lahko deluje na več različnih verzijah), imajo minimalne zahteve glede konfiguracije, ne želijo uporabljati komandne vrstice, nimajo želje po dodatnih templating sistemih, potrebujejo dobro dokumentacijo. (Technology, 2015) 2.5.3.5 Yii Yii je visokozmogljivo PHP ogrodje za izdelavo spletnih 2.0 aplikacij. Razvijalcem pomaga izdelati kompleksno spletno aplikacijo v najkrajšem možnem času. Yii je definirana kot "Yee" oziroma "ji" in je akronim za besedo "Yes It Is". Je brezplačno odprtokodno ogrodje, izdelano v PHP5 skriptnem jeziku, ki promovira enostavno oblikovanje in podpira hiter razvoj. Glavni cilj je omogočiti hiter, enostaven in učinkovit končni produkt. (LLC, 2015) 2.5.4 Primerjava spletnih ogrodij Pri izbiri spletnega ogrodja se je potrebno vprašati, katere funkcionalnosti bomo potrebovali pri izvedbi spletne aplikacije. Najbolje je vnaprej določiti faktorje, na podlagi katerih bomo lahko ovrednotili različna ogrodja za izdelavo spletne aplikacije. Spodnja tabela prikazuje prej omenjenih pet najbolj uporabljenih ogrodij in njihove specifikacije. 20 Tabela 2.1: Primerjava ogrodij Phalcon BSD Maj 2015 2.0.1 PHP 5.3 / / Servisi Laravel MIT Maj 2015 5.1 PHP 5.3.7 CLI ELOQUENT ORM / Templating sistem Avtentikacija XSS CSRF SQL vrivanje Enostavnost Blade, PHP Da Da Da Da 5 / Licenca Zadnja posodobitev Verzija Minimalne zahteve Generacija kode ORM / Ne Da Da Da 3 Symfony2 MIT Maj 2015 2.6.7 PHP 5.3.2 CLI Doctrine2, Propel / Codeigniter BSD Marec 2015 3.0 PHP 5.1.6 / AR Yii BSD Marec 2015 2.0.3 PHP 5.4 Yii CLI, Gii AR, DAO XML-RPC PHP, Twig Da Da Da Da 3 PHP Soap / Web Service PHP, Prado Ne Da Da Da 4 Ne Da Da Da 5 Vir: Zupančič, lastna raziskava (2015) Iz zgornje tabele je mogoče razbrati prednosti oziroma slabosti posameznih ogrodij, ki jih bomo analizirali. Za lažje razumevanje smo v nadaljevanju opisali posamezno lastnost. Licenca posameznega ogrodja sicer ni toliko pomembna pri sami uporabi, kljub vsemu pa poda osnovno informacijo o posameznem ogrodju. Med izbranimi ogrodji Laravel in Symfony2 uporabljata licenco MIT, medtem ko ogrodja Phalcon, Codeginiter, Yii uporabljajo BSD licenco. Zadnja posodobitev, ki je trenutno na voljo, je pomemben podatek, saj lahko razberemo, kako redno posamezna ogrodja spremljajo trenutne trende in skrbijo za posodobitve tekom celotnega leta. Iz tabele je razvidno, da so verzije posameznih ogrodij dokaj redno posodobljene. Codeigniter in Yii sta zadnji verziji pridobila v mesecu marcu, ostala ogrodja pa so bila zadnjič posodobljena v mesecu maju. Minimalne zahteve so bistvenega pomena, še posebej v primeru, če naš strežnik ne omogoča določenih zahtev, ki so potrebne za popolno funkcionalnost ogrodja. Večina izmed izbranih ogrodij za uporabo potrebuje verzijo PHP-ja na strežniku 5.3, izjema pa je Codeigniter, ki lahko deluje še na starejši verziji PHP 5.16. Posebnost je tudi Laravel, ki potrebuje dodatno vključen modul mcrypt, namenjen kriptiranju in dekriptiranju podatkov. Za generacijo kode (angl. Code Generation) Laravel in Symfony2 uporabljata CLI (angl. Command line interface) oziroma ukazno vrstico, s pomočjo katere lahko lažje izvedemo namestitev posebnih paketov in celotno namestitev ogrodja, Codeginiter in 21 Phalcon v osnovi ne uporabljata nobenega vmesnika, medtem ko Yii uporablja Yii CLI, ki je identičen Laravel ter Symfony 2 vmesniku, ter tudi Gii vmesnik, ki je vezan na spletno okolje, do katerega lahko dostopamo preko spleta. Spletnih servisov izbranima ogrodja nima integriranih, pri čemer Codeginiter po privzeti namestitvi že vsebuje XML-RPC servis, Yii pa vsebuje Soap. Avtentikacija je proces, pri katerem strežnik, na katerega se uporabnik povezuje, preveri vnesene podatke in na ta način potrdi identiteto posameznega uporabnika. Avtentikacijo imata nameščeno Laravel in Symfony 2, ostala tri ogrodja pa ne, kar je lahko velika pomanjkljivost. XSS (angl. Cross-site scripting) je tip napada, kjer se v ozadju brez naše vednosti križno izvaja več skriptov, ki pošiljajo podatke na našo spletno stran in lahko s tem povzročijo veliko škodo. Vsa obravnavana ogrodja vsebujejo zaščito pred XSS napadom. CSRF (angl. cross-site request forgeries) je vrsta napada, kjer napadalec uporabnikov zahtevek na spletni strani prevzame in s tem brez njegove vednosti dostopa do določenih podatkov. Tudi to zaščito vsebujejo vsa obravnavana ogrodja. SQL vrivanje je vrsta napada na spletno aplikacijo, kjer pri generiranju SQL poizvedb s pomočjo vrivanja različnih simbolov napadalec pridobi podatke, ki so shranjeni v podatkovni bazi. Napada se lahko ubranimo z uporabo raznih ORM modelov, preko katerih se vsa vnosna polja filtrira in tako izloči nepotrebne oziroma nedovoljene znake. Glede na zadnjo postavko v naši tabeli smo podali tudi lastno mnenje glede enostavnosti uporabe in splošne uporabnosti posameznih ogrodij. Zaključili smo, da si najvišjo oceno pet (5) zaslužita Codeigniter ter Laravel, sledi pa jima ogrodje Yii z oceno štiri (4). Najslabše ocenjena sta Phalcon in Symfony2, ker sta zelo kompleksna in zahtevna za uporabo, poleg tega pa imata tudi slabšo dokumentacijo. 2.5.5 Analiza zastavljenih hipotez ter izbira spletnega ogrodja Izbira spletnega ogrodja za izdelavo spletnih aplikacij je eden prvih korakov, potrebnih pred začetkom izvedbe, zato je potrebno predhodno ovrednotiti naše zahteve in potrebe. Izbirali smo med trenutno najbolj uporabljenimi ogrodji, ki jih najdemo na spletu, in sicer Laravel, Phalcon, Symfony2, Codeigniter in Yii. Vsa ogrodja so si relativno podobna, saj imajo 22 podobne lastnosti in funkcionalnosti, vendar je za optimalno izbiro potrebno upoštevati še nekaj ključnih faktorjev. V našem primeru so to bili sledeči: dokumentacija, enostavna uporaba in implementacija. 2.5.5.1 Dokumentacija Dokumentacija za posamezno ogrodje je zelo pomembna predvsem zato, ker nam omogoča, da določeno aplikacijo izdelamo točno tako, kot smo si jo zamislili. Pomembno je, da je dokumentacija napisana zelo nazorno, saj tako pripomore k poenostavitvi izdelave spletne aplikacije. V nadaljevanju je predstavljen kratek pregled posameznih dokumentacij. Laravel – vsebuje zelo dobro dokumentirane posamezne segmente funkcij, ki jih vsebuje. Obsežno dokumentacijo vsebujeta tako domača privzeta stran http://laravel.com/ kot tudi stran https://laracasts.com/. Laracasts spletna stran vsebuje še posebej dokumentirane video posnetke, kjer je nadzorno prikazanih večina segmentov. Phalcon – spletna stran z dokumentacijo je suhoparna in nezanimiva. Predvsem moteče je to, da na njihovi spletni strani nimajo podanih konkretnih iztočnic in bolj podrobno razloženih posameznih segmentov. Na splošno je to ogrodje slabše dokumentirano in ima tudi slabšo podporo s strani uporabnikov. Symfony2 – The Symfony Book, kakor so poimenovali svoj dokumentacijski vzorec, je eden izmed zelo dobrih primerov, kako uporabniku na enostaven in razumljiv način razložiti dokumentacijo. Pogrešali smo le iskalnik po dokumentaciji, ki bi olajšal proces iskanja. Codeigniter – njihova dokumentacija je odlično predstavljena, saj so nazorno razloženi konkretni primeri z logičnimi zaključki. Potek dokumentacije je enostavno sledljiv. Imajo tudi kar nekaj spletnih strani, kjer so objavljeni video vodiči za posamezne segmente. Podpora uporabnikov je še posebej velika, saj je forum Codeigniter zelo dobro obiskan in se na njem dnevno pojavlja veliko objav. Yii – dokumentacija ogrodja na njihovi spletni strani je precej ohlapna. Podanih je nekaj osnovnih primerov s kodo in kratkimi komentarji, vendar je to z vidika uporabnika premalo. Slabost njihove dokumentacije je tudi ta, da imajo na uradni strani ogrodja dokumentacije podane v obliki knjig, ki jih je mogoče kupiti preko 23 Amazona, kar pomeni, da celotna dokumentacija ni brezplačna, temveč je zanjo treba odšteti 10 € in več. Glede na opravljeno analizo v kategoriji Dokumentacija izstopata ogrodji Laravel in Codeigniter. Njuna dokumentacija je enostavno razumljiva ter dobro podprta tako s strani uporabnikov kot na forumih in Youtube kanalih. Kot zmagovalno smo izbrali ogrodje Codeginiter, predvsem zato, ker je bistveno boljše najdeno na spletnih iskalnikih in je podpora uporabnikov občutno večja. Ena od prednosti je tudi ta, da je že pred prihodom nove verzije Codeginiterja podana nova dokumentacija, medtem ko Laravel še ni v celoti posodobil dokumentacije v skladu z novo verzijo ogrodja. 2.5.5.2 Enostavna uporabna in implementacija Enostavna uporaba je predvsem ob prvi uporabniški izkušnji s posameznim ogrodjem še posebej pomembna. Glede na to, da se pri večini ogrodij uporablja tako imenovani MVC vzorec programiranja, ki ima ločeno logiko od predstavitvenega vzorca, je koncept na začetku še toliko težji. Enostavno uporabo smo testirali predvsem na primeru inštalacije kompletnega sistema ter konfiguracije za pripravo uporabe ogrodja. Implementacijo posameznega ogrodja pa smo testirali na podlagi namestitve oziroma izdelave dodatnega modula. Laravel Namestitev ogrodja je ob prvi uporabi precej zahtevna. Laravel uporablja tako imenovani Composer za direktno namestitev s spletnega mesta GitHub. Slabost je ta, da je v primeru, če nimamo direktnega dostopa do spletnega strežnika, potrebna precej zahtevna ročna namestitev. Prednost ogrodja je ta, da omogoča izredno enostavno posodobitev obstoječe spletne aplikacije na popolnoma novo verzijo. Enako enostavna je namestitev tako imenovanih paketov. Phalcon Namestitev je enostavna, ker poteka s snemanjem celotnega ogrodja in namestitvijo ogrodja direktno v želen direktorij. Kljub temu pa je glede na slabo podporo ogrodja težje izdelati in pridobiti že prej izdelane knjižnice. Glede na to, da je za izdelavo novega vtičnika potrebnega ogromno časa za razumevanje koncepta tega ogrodja, bi ga začetniku odsvetovali. 24 Symfony2 Namestitev je podobna namestitvi Laravel ogrodja, saj tudi Symfony2 uporablja CLI vmesnik za namestitev ogrodja in dodatnih knjižic ter paketov. Glede na podano dokumentacijo je namestitev dokaj enostavna. Programiranje v Symfony2 ogrodju je zahtevno in za začetnika dokaj neprijazno. Prednost pripisujemo predvsem zelo dobro zamišljeni arhitekturi, čeprav je ta za uporabnika precej kompleksna. Codeigniter Namestitev Codeigniter-ja je relativno enostavna. Postopek je podoben kot pri Phalcon ogrodju. Z uradne spletne strani prenesemo kompletno verzijo sistema, razširimo v podan direktorij in nastavimo nekaj najosnovnejših nastavitev za pravilno delovanje. Namestitev je enostavna tudi za začetnika, k temu pa dodatno pripomore zelo dobra dokumentacija. Glede na to, da ogrodje privzeto ne vsebuje Composerja, je namestitev dodatnih paketov otežena. Pri namestitvi novih paketov je tako potrebno s spletne strani prenesti celoten paket, ga razširiti v pravilne mape in nadaljevati z implementacijo paketa v sistem. Yii Namestitev poteka zelo enostavno kot pri Codeigniter in Plahcon ogrodju. Integracija novih vtičnikov je dokaj otežena, saj je potrebno dobro razumevanje navodil, ki so napisana precej ohlapno. Vsekakor tega ogrodja ne bi priporočali začetniku, saj je za splošno razumevanje ogrodja potrebnega več časa, poleg tega pa je tudi koncept dokaj nerazumljiv. Enostavnost uporabe ogrodja je zelo pomembna še posebej za začetnike. V ožjem izboru pri tej kategoriji so bila ogrodja Laravel, Symfony2 in Codeigniter, ko so najbolj enostavna za uporabo in so, kot je bilo že prej omenjeno, tudi zelo dobro dokumentirana. Symfony2 sicer izpade iz kategorije enostavnejše uporabe predvsem zaradi preveč kompleksne strukture. Tako smo se na koncu odločali med dvema ogrodjema, in sicer Laravel ter Codeigniter. Sicer je Laravel po namesitvi zelo enostaven za uporabo, konfiguracijo in implementacijo novih vtičnikov oziroma knjižic, vseeno pa je preveč zahteven za začetnika. Če bi se odločali med omenjeni ogrodji kot začetniki, bi vsekakor izbrali ogrodje Codeigniter, ki je namenjeno za enostavnejše, manjše in manj kompleksne projekte. 2.5.5.3 Analiza hipotez V diplomski nalogi smo oblikovali naslednje hipoteze: 25 Odprtokodni CMS sistemi imajo bistveno več prednosti kot CMS sistemi, izdelani v lastni izvedbi. Ogrodja se močno razlikujejo med seboj po razpoložljivih virih, ki jih programer nujno potrebuje pri razvoju produkta (navodila, skupnost, rešitve problemov …). Ogrodja se med seboj razlikujejo glede na podprte funkcionalnosti, zato verjetno nekateri ne podpirajo vseh komponent in funkcionalnosti, ki jih bomo potrebovali pri izdelavi želenega sistema. Na opredelitev prve hipotezi vpliva kar nekaj faktorjev. Odprtokodni (angl. Opensource) sistemi so sistemi, ki so jih izdelala podjetja ali posamezniki in so namenjena brezplačni uporabi, če ta zadostuje njihovi licenci uporabe. Prednost takšnih sistemov je, da so dobro podprti. Običajno imajo večje število uporabnikov, ki v skupnosti ažurno sporočajo napake in poskrbijo, da so le-te hitro in učinkovito odpravljene. Tako je poskrbljeno za redne izboljšave in posodobitve sistema. Prednost je tudi ta, da je vsaka sprememba v relativno kratkem času vidna na spletu in uporabnik je hitreje obveščen o vseh novostih oziroma spremembah. CMS sistemi, izdelani v lastni izvedbi, se večinoma uporabljajo v privatne namene in niso izpostavljeni javni uporabi – posledično imajo manjše število uporabnikov. Njihova prednost je predvsem varnost, saj je koda vidna le redkim in tako obstaja manjša verjetnost za zlorabo sistema. Če že pri sami izvedbi poskrbimo za maksimalno varnost, se lahko tako izogibamo večini varnostnih lukenj in smo izpostavljeni manjšim grožnjam. Še ena od dodatnih prednosti izdelave sistema v lastni režiji je, da dejansko poznamo vsak delček kode, ki smo ga implementirali v sistem, in lahko tako samostojno hitreje najdemo rešitve v primeru težav. Spodnja tabela prikazuje prednosti/slabosti uporabe odprtokodnih oziroma v lastni izvedbi izdelanih CMS sistemov. Tabela 2.2: Primerjava med odprtokodnim in lastnim sistemom - Odprtokodni sistemi Konstantne posodobitve Večji nabor uporabnikov Enostavnost implementacije Večja podpora uporabnikom dodatnih spremembah Večja ranljivost Možno lastno poseganje popravljanje kode - ob in Vir: Zupančič, lastna raziskava (2015) 26 Sistemi izdelani v lastni izvedbi Manjši po velikosti, saj vsebujejo le določene funkcionalnosti Dobro poznavanje vsakega dela kode Boljša varnost zaradi manjšega nabora uporabnikov Večinoma namenjeni privatni uporabi Glede na podane prednosti/slabosti posameznih sistemov lahko sklepamo, da je ne glede na njihovo ranljivost uporaba odprtokodnih sistemov bistveno boljša in enostavnejša, in sicer predvsem zato, ker večji nabor uporabnikov skrbi za konstantno posodabljanje in posredno tudi za izboljšanje ranljivosti. Tako lahko to hipotezo potrdimo. Druga hipoteza »Ogrodja se močno razlikujejo med seboj po razpoložljivih virih, ki so za programerja nujno potrebni pri razvoju produkta (navodila, skupnost, rešitve problemov …)« smo podrobneje analizirali v predhodnem poglavju, ko smo primerjali pet najpogosteje uporabljenih ogrodij in ugotavljali razlike oziroma skupne lastnosti. Ugotovili smo, da se ogrodja že v osnovi razlikujejo med sabo po dokumentaciji. Pri večini ogrodij težavo predstavlja površna oziroma nepopolno razložena dokumentacija, ki bi sicer pripomogla k bolj učinkovitem in hitrejšem razvijanju želene aplikacije. Kot je bilo omenjeno, je glede dokumentacije vsekakor najbolje razdelano ogrodje Codeigniter, ki poskrbi, da je vsak segment posebej zelo nazorno in kvalitetno razložen in tako omogoča uporabniku z najmanj truda narediti sistem, kot si ga želi. Prav tako smo tudi ugotovili, da ima vsako ogrodje različno podporo skupnosti. Laravel in Codeigniter imata zelo dobro podprto skupnost tako z video zapisi kot z objavami na forumih, kar nam omogoča hitrejšo pot do rešitve posameznega problema pri razvoju spletne aplikacije. Tudi to hipotezo je mogoče potrditi, saj se je izkazalo, da se sistemi močno razlikujejo po razpoložljivih virih. Glede zadnje hipoteze se je izkazalo, da imajo nekatera ogrodja kar nekaj prednosti oziroma slabosti v primerjavi drugimi. Pri podrobni analizi petih ogrodij smo namreč med njimi opazili kar nekaj razlik Pri naši spletni aplikaciji je pomembno predvsem, da je poskrbljeno za varnost, torej za dobro zaščito pred XSS, CSRF in SQL napadi. Prav tako je pomembna tudi velikost ogrodij. Med obravnavanimi je kar nekaj ogrodij zelo velikih, kar pomeni, da vsebujejo tudi mnogo za nas nepotrebnih knjižic. To pomeni, da pri našem procesu izdelave ne bodo uporabne in smo jih zato izločili iz ožjega izbora. Pomembna je tudi čim lažja integracija določenih knjižic, paketov in modulov v ogrodje z najmanjšim vložkom dela. Na tem segmentu izstopa ogrodje Laravel. Tudi zadnjo hipotezo je mogoče potrditi, saj vsako ogrodje ne podpira vseh funkcionalnosti, ki jih potrebujemo, oziroma podpira tiste funkcionalnosti, ki jih ne potrebujemo, pri čemer je zaradi tega sistem prevelik, zahtevnejši in počasnejši. 27 2.5.5.4 Izbira ogrodja Kljub opravljeni analizi izbira najbolj optimalnega ogrodja ni bila enostavna, saj so si po funkcionalnostih med seboj zelo podobna. Za lažjo odločitev smo določili nekaj ključnih faktorjev, ki so najpomembneje vplivali na končno izbiro. Dva ključna faktorja, ki sta odtehtala pri odločitvi, sta dostopnost in kvaliteta dokumentacije ter enostavnost namestitve in integracije oziroma programiranje novih funkcionalnosti. V ožjem izboru sta bili ogrodji Laravel in Codeigniter. Glavna prednost ogrodja Laravel je ta, da uporablja Composer, s pomočjo katerega lahko z enostavno namestimo nove knjižnice oziroma pakete, ki jih potrebujemo. Poleg tega omogoča tudi Eloquent ORM – tako imenovano orientacijsko dostopanje do podatkovne baze, medtem ko Codeigniter uporablja AR – active record dostop do podatkovnega modela. Glavni prednosti Codeigniter ogrodja sta enostavna namestitev in enostavna nadaljnja uporaba. Na podlagi analize smo oblikovali tudi primerjalno tabelo in se s pomočjo tega lažje odločali, katero ogrodje bo za nas najboljše za izdelavo omenjenega sistema. Tabela 2.3: Primerjava med Codeigntier in Laravel ogrodjem Codeigniter - Odlična dokumentacija - Enostavna uporaba za začetnika - Majhna velikost - Podpora na starejših strežnikih - Dobra podpora s strani skupnosti Laravel - Zelo dobro razdelan arhitekturni vzorec ogrodja - Težji za uporabo za začetnike - Primernejši za izdelavo kompleksnejših aplikacij - Enostavna implementacija dodatnih paketov Vir: Zupančič, lastna raziskava (2015) Kot je razvidno iz zgornje tabele imata obe ogrodji tako prednosti kot slabosti. Obe sodita med boljša ogrodja na trgu z zelo dobro podporo tako s strani proizvajalcev kot tudi s strani skupnosti. Glede na to, da je bila za nas ena izmed pomembnih lastnosti enostavnost – tako namestitev kot konfiguracija in implementacija novih knjižic oziroma paketov, je izstopalo ogrodje Laravel, saj je pri CodeIgniter-ju je ta del bolj težaven. Ena od prednosti Codeigniter ogrodja je, da deluje tudi na starejših strežnikih, ki imajo ohlapnejšo podporo. Za Laravel ogrodje po drugi strani še dodatno potrebujemo tudi vtičnik za kriptiranje oziroma dekriptiranje posredovanih podatkov, ki ga je potrebno posebej naložiti na strežnik. 28 Odločali smo se tudi, če bi uporabili odprtokodni sistem ali bi se lotili izdelave lastnega CMS sistema. Sicer je odprtokodni sistem že izdelan z vsemi funkcionalnostmi, vendar smo se kljub temu odločili, da izdelamo sistem v lastni izvedbi, in sicer predvsem zaradi varnostnega vidika in zaradi tega, ker v osnovi nima že v naprej izdelanih funkcionalnosti, ki jih potrebujemo. Na podlagi celotne analize prednosti in slabosti ter s pomočjo podanih hipotez smo se odločili, da bomo spletno aplikacijo izdelali v lastni izvedbi na Codeigniter ogrodju. 29 3. PREDSTAVITEV CMS SISTEMA 3.1 Predstavitev sistema CMS sistem za urejanje vsebine je eno najenostavnejših orodij za spreminjanje vsebine kjer koli na spletu. S pomočjo orodja lahko ne glede na čas in kraj dostopamo do celotnih vsebin spletne strani ter jih urejamo. Glede na dolgoletno prakso, znanje in želje naročnika smo se izdelave CMS sistema lotili na takšnem nivoju, da lahko tudi uporabnik začetnik dostopa do urejevalnika in ima celotno kontrolo nad urejanjem vsebine. Sistem je sestavljen iz nekaj glavnih sekcij, ki so med sabo ločene. Vsaka sekcija ima popolnoma ločen vsebinski urejevalnik ter ločene funkcije znotraj njega. Pri takšnem sistemu je zelo pomembno, da poskrbimo za enostavno urejanje, saj zna večina naročnikov uporabljati le osnovne funkcionalnosti, na primer stilske predloge, menjavanje velikosti pisave, vnos poljubnih slik ipd. Sistem za integracijo posameznega modula uporablja tako imenovan »templating system«, pri katerem navedemo določeno značko v določen del kode in potem na tem delu kode značko zamenjamo z želeno funkcijo, ki izpiše rezultate. Najpogosteje uporabljen »templating system« je sicer Smarty, vendar ima drugačno shematiko, zato je izdelava lastnega sistema veliko bolj enostavna in lažja za implementacijo. Sistem, ki smo ga razvili, je izdelan na Codeigniter ogrodju, ki omogoča bistveno lažjo izvedbo, hkrati pa tudi zadostno varnost sistema, ki preprečuje vdore. V osnovi se v podatkovno bazo shranjujejo vsi podatki razen podatkov modula »Template editor«. Pri tem modulu je posebnost ta, da sistem fizično na serverju izdela celotno direktorijsko sturkturo in znotraj nje shranjuje posamezne datoteke v .tpl in .css oziroma .less formatu. Cilj takšnega načina shranjevanja je predvsem ta, da sistem ne bere celotne stilske predloge, HTML predloge ali posameznega bloka direktno iz podatkovne baze, ampak le iz datoteke, kar pripomore k hitrejšemu nalaganju spletne strani. Tudi manipulacija z datotekami je lažja, saj lahko do njih dostopamo tudi preko FTP strežnika in jih tako urejamo. Trenutno je v sistemu 30 razvitih kar nekaj modulov, ki so uporabni tako pri enostavnih kot tudi pri kompleksnih spletnih straneh. Razviti moduli so naslednji: Template editor – modul, s katerim urejamo stilsko (CSS) in shematsko (HTML) spletno predlogo; Page editor – urejevalnik, kamor vnašamo spletno vsebino, določamo splošne meta podatke, ki so pomembni tako za optimizacijo kot za samega uporabnika; Menu editor – menijski urejevalnik, v katerem gradimo celotno menijsko strukturo spletne strani; News – urejevalnik objav, kamor pišemo aktualne objave, ki bodo prikazane na spletni strani; Gallery – urejevalnik slik, v katerem izdelamo spletne albume, ki bodo prikazani na spletni strani; Slider – nalagalnik slik, ki bodo prikazane na vstopnih oziroma naslovnih straneh; Contact form – urejevalnik kontaktnih obrazcev, kjer definiramo polja in izdelamo obrazec za oddajo povpraševanja; Language – urejevalnik večjezičnosti; User – urejevalnik uporabnikov, kjer dodajamo nove uporabnike, ki jim omogočimo dostop do spletne aplikacije. Ključna funkcionalnost sistema je, da imajo uporabniki celoten nadzor nad urejanjem spletne strani in lahko na postavljeni spletni predlogi samostojno urejajo vsebino. Dodajajo lahko nove spletne strani, nove menijske postavke, objavljajo novosti, dodajajo nove albume s slikami in še mnogo več. Glede na zahteve strank je mogoče tudi prilagoditi in dodati nove module, ki olajšajo delo. 3.2 Predstavitev modulov Cilj modulov je predvsem ta, da na uporabniku na enostaven način in z najmanj dodatnega dela omogočimo različne po meri prilagojene funkcionalnosti. Glede na to, da je sistem izdelan s pomočjo ogrodja, nam to še olajša delo v primeru izdelave celotnega sistema oziroma pri dodelavi obstoječih ali novih modulov. Našteti so trenutno razviti moduli, ki so privzeto integrirani v vsakem nameščenem sistemu in omogočajo samostojno delo. Vsak posamezni modul vsebuje svojo tabelo v bazi, svoj »controller« in svoj »view«, da so moduli med sabo res ločeni. Prav tako ima vsak modul svojo jezikovno datoteko, kar pomeni, da ga v 31 primeru potrebe po spletni strani v tujem jeziki zelo enostavno prevedemo. Integracija novih modulov je trenutno še malo težji korak, saj uporabnik nima nadzora nad namestitvijo oziroma ne more sam dodajati dodatnih modulov, tako da je ta del še vedno odvisen od nas, ki mu storitev ponujamo. 3.2.1 Template editor Urejevalnik spletne predloge oziroma tako imenovan »Template editor« je modul, ki nam omogoča urejanje spletne predloge. Modul zajema »CSS editor« oziroma stilski urejevalec spletne strani, »Html editor« oziroma označevalni jezik za opisovanje spletnih dokumentov in »Block editor«, ki omogoča izdelavo posameznih delov spletne strani, katere kasneje integriramo vanjo. 3.2.1.1 CSS editor »CSS editor« omogoča neomejeno število dodajanja stilskih predlog, ki so definirane v CSS jeziku. Novo stilsko predlogo kasneje definiramo pri izdelavi nove spletne strani in tako spletna stran pridobi določen stil. Urejevalnik je prilagojen lažjemu in bolj enostavnemu vnašanju novih stilov. Ta urejevalnik je v osnovi namenjen administratorju, od katerega se pričakuje osnovno poznavanje CSS oz. LESS, ki je neke vrste naprednejši CSS. Posamezen stil shranjuje v dveh ločenih datotekah. Najprej stil shrani kot .less datoteko, za tem pa sistem s pomočjo skripta prevede celotno stilsko predlogo v tako imenovano »minify css«, ki je neke vrste okleščena CSS datoteka, ki ne vsebuje presledkov ter drugih neuporabnih komentarjev. Ta način je še posebej učinkovit, saj tako povečamo hitrost nalaganja spletne strani. Spodnja slika prikazuje videz CSS kode znotraj urejevalnika. 32 Slika 3.1: CSS/Less stilski urejevalec Vir: Zupančič, lastni prikaz (2015) 3.2.1.2 HTML editor »Html editor« ravno tako kot »CSS editor« omogoča neomejeno število spletnih predlog. Pri tem urejevalniku je zelo pomembno, da najprej definiramo postavitve posameznih blokov znotraj HTML kode, kjer se potem bloki zamenjajo z namensko določeno kodo. Nekatere izmed osnovnih značk za tako imenovan »templating system« so: Header, Left, Content, Right in Footer. Te značke je potrebno definirati za kasnejšo integracijo blokov. Ta način definiranja značk omogoča enostavnejše manipuliranje s spletnimi predlogami, saj za posamezno značko poznamo točno določeno pozicijo, kjer bo ta definirana. HTML urejevalnik je viden na spodnji sliki. 33 Slika 3.2: Html urejevalnik Vir: Zupančič, lastni prikaz (2015) 3.2.1.3 Block Editor »Block editor« je urejevalec posameznega bloka, katerega kasneje postavimo v spletno stran. V tem urejevalniku je definirana določena koda – bodisi HTML ali JS, ki jo lahko neprestano prilagajamo in dodeljujemo. Prednost takšnega sistema je predvsem ta, da lahko posamezen del kode spremenimo le v eni datoteki, ta pa nato vpliva na spremembo vseh ostalih vsebin oziroma delov kode na določeni spletni strani. 3.2.2 Page editor Urejevalnik strani je namenjen vsebinskem urejanju novo dodanih, podvojenih ali že prej obstoječih strani. Ko sta vneseni celotna HTML struktura in stilska CSS oziroma LESS predloga, je naslednji korak vzpostavljanje spletne strani. Sekcija omogoča dodajanje, urejanje, brisanje ter podvajanje spletnih strani, pa tudi ostale možnosti, kot je na primer nastavitev za primarno stran, kar pomeni, da se posamezna stran naloži kot naslovna. Za dodajanje spletne strani je potrebno v prvem delu definirati naslov strani v administraciji, 34 naslov dejanske strani ter izbrati HTML in CSS stilsko predlogo. Pomembno je, da v primeru dveh različnih tipov izpisov strani ločimo videz posamezne predloge. Prav tako je potrebno izpolniti dejansko ime strani, ki bo vidno na spletu, ter vnesti »Meta« podatke, ki lahko pripomorejo k boljši optimizaciji in posledično boljši najdenosti spletne strani. Osnovni princip je zmeraj takšen, da je HTML predloga naslovne spletne strani ločena od HTML predloge podstrani, saj tako kasneje najlažje urejamo popravke. Drugi del urejevalnika vsebuje »Page Content Title«, torej naslov vsebine v sekciji, in »Page Content«, torej vsebino posamezne strani. Urejevalnik za vsebino je napredni WYSIWYG editor, ki je identičen Word urejevalniku. Tretji del urejevalnika vsebuje blokovsko postavitev, pri kateri določimo pet različnih pozicij, že v naprej dodanim blokom. Osnovno določeni bloki so: Header, Left, Content, Right, Footer. Možnosti dodajanja blokov, brisanja in sortiranja so neomejene. Ta sekcija dejansko omogoča tako imenovano graditev spletne strani s pomočjo blokov. Spodnja slika prikazuje izdelavo spletne strani z naprednim urejevalnikom vsebin. Slika 3.3: Vsebinski urejevalnik Vir: Zupančič, lastni prikaz (2015) 3.2.3 Menu editor Menijska struktura posamezne spletne strani je zelo pomemben oziroma celo ključen del pri izdelavi spletne strani. S pomočjo menijske strukture uporabnik dostopa do vseh ostalih strani in podstrani spletne strani. Sistem omogoča popolno svobodo pri izdelavi menijske strukture, pri čemer je pomembno upoštevati nekaj pravil, in sicer: 35 1. Spletna stran mora biti najprej dodana v modulu »Page editor« in mora imeti status prikazana oziroma aktivirana. 2. Vsak meni se dodaja posebej glede na predhodno določen jezik. Če smo dodali novo spletno stran v slovenskem jeziku, bo ta vidna le pri dodajanju menijske postavke na slovenskem jeziku. 3. Da je stran dosegljiva, je potrebno stran dodati v meniju, kar pomeni, da pri dodajanju izberemo določeno spletno stran, določimo naslov menija, url strani, njegovega starša (v katerem glavnem meniju je stran umeščena) in status strani. Ko so vsi te pogoji izpolnjeni, je podstran vidna na spletni strani. Na videz je sistem kompleksen, ker je potrebno prvotno dodati stran in potem še menijsko postavko, vendar dolgoletne izkušnje potrjujejo, da se ta pristop zelo dobro obnese, še posebej pri velikem številu spletnih strani, zato ga uporabljamo še naprej. Urejevalnik menijev med drugim omogoča tudi urejanje menijske postavke, skrivanje oziroma prikaz postavke ter sortiranje postavke znotraj določenega menija/podmenija, kar pomeni, da lahko meniju določimo tudi pozicijo oziroma spremenimo vrstni red. Globina menijske strukture je neomejena, kar pomeni, da ima lahko menijska postavka nad sabo še veliko število menijev. Spodnja slika prikazuje menijsko strukturo dodanih strani v urejevalniku. Slika 3.4: Menijska struktura Vir: Zupančič, lastni prikaz (2015) 36 3.2.4 News Novice na spletni strani omogočajo nenehno posodabljanje in osvežitev vsebin, kar zagotavlja boljšo SEO optimizacijo spletne strani, ki pripomore k boljši najdenosti. Urejevalnik novic omogoča objavljanje zadnjih obvestil, ki bodo prikazana na določenih straneh. Obvestila vsebujejo naslov, splošen opis, logotip za posamezno novico, možnost izbire kategorij, če so le te predhodno dodane, ter vsebino obvestila oziroma novice. Izpis novice je prilagojen željam naročnika. Običajna praksa je, da določeno število novic z naslovom in kratkim opisom predstavimo na naslovnici, ostale novice pa na podstrani, kjer so na voljo vse novice. Ob kliku na novico se odpre podstran s podrobnejšo vsebino novice. Slika 3.5: Izpis objavljenih novic v sistemu Vir: Zupančič, lastni prikaz (2015) 3.2.5 Gallery Foto galerija je del, kjer lahko stranke nalagajo poljubne fotografije. Modul omogoča dodajanje novih kategorij oziroma albumov. Ko je dodan nov album, se vanj naložijo fotografije. Sistem pri nalaganju slike izdela tudi tako imenovano sličico (angl. Thumbnail), ki je namenjena optimizaciji spletne strani in boljši pregledanosti. Galerije, ki so vidne na spletni strani, imajo vgrajen tudi pregledovalnik slik, s pomočjo katerega se sličice ob kliku 37 odprejo v »pop-up« oknu in jih lahko s pritiskom na smerne tipke ali z miško enostavno pregledujemo. Slika 3.6 prikazuje izgled foto galerije v administraciji. Slika 3.6: Prikaz foto galerije Vir: Zupančič, lastni prikaz (2015) 3.2.6 Slider Slider je modul, ki omogoča nalaganje slik, ki bodo prikazane na naslovni oziroma uvodni strani. Modul omogoča neomejeno nalaganje slik, spreminjanje vrstnega reda slik, vstavljanje napisa na sliko, pripenjanje datotek oziroma URL naslova do določene spletne strani ter spreminjanje statusa, torej če želimo naloženo sliko na spletni strani prikazati oziroma skriti. Slika 3.7: Prikaz slider modula Vir: Zupančič, lastni prikaz (2015) 38 3.2.7 Contact form Kontaktni obrazec je modul, ki omogoča pošiljanje povpraševanj s spletne strani na enega ali več e-mail naslovov. Kontaktni obrazec se izdela po želji naročnika, v osnovi pa vsebuje nekaj osnovnih polj, kot so: Ime in priimek, Naslov, Email, Telefon ter polje Vaše sporočilo. V administraciji definiramo vsa polja, ki jih bo kontaktni obrazec vseboval, ter določimo, katera polja so obvezna za izpolniti. Obrazec vsebuje tudi »anti-spam« zaščito, ki v prvem koraku preveri, če je izpolnjeno tudi skrito polje, v drugem koraku pa preveri verodostojnost vnesenega e-mail naslova, kar pomeni, da preveri, če vneseni e-mail naslov resnično obstaja. Slika 3.8: Kontaktni obrazec za povpraševanje Vir: Zupančič, lastni prikaz (2015) 3.2.8 Language Večjezične spletne strani so zelo pomembne za številne naročnike, saj omogočajo prikaz izhodiščne spletne strani v različnih jezikih. Jezikovni modul omogoča neomejeno dodajanje jezikov za posamezno spletno stran. Praksa pri omenjenem modulu je, da pred lansiranjem projekta dodamo jezike ter razdelimo strani in vsebine na način, da stranka kasneje pregledno dostopa do posameznih jezikov in ureja popravke oziroma spremembe. 39 3.2.9 User Uporabniški modul omogoča dodajanje novih uporabnikov ter določanje njihovih pravic. Uporabniški dostop je potrebno omejiti zaradi svobode pri določanju pravic posameznemu uporabniku, pri čemer je na voljo več možnosti. Uporabnik, ki ima status »Super admin«, ima nadzor nad celotnim sistemom. Uporabnik s statusom »Admin« ima podobne pravice, le da ne more odstraniti »Super admin« uporabnika in ne vidi posameznih segmentov. Navadni uporabnik, ki ima status »User«, ima na voljo le določene opcije. Nima vpogleda v uporabniško sekcijo, nima vpogleda v sekcijo, kjer se ureja spletno predlogo, ter dostopa do nekaterih drugih modulov, ki so načeloma zanj neuporabni. Slika 3.9: Prijava v sistem Vir: Zupančič, lastni prikaz (2015) 40 4. PREDSTAVITEV IZDELAVE SISTEMA 4.1 Uporabljena orodja za izdelavo spletne aplikacije Sistem je zasnovan na Codeigniter MVC ogrodju, ki omogoča bistveno lažjo izvedbo aplikacije. Za izdelavo smo uporabili skriptni jezik PHP, podatkovno bazo MySQL, JavaScript knjižico jQuery z AJAX asihronim posredovanjem podatkov ter osnovni HTML5 in CSS3. Prednost tega sistema je tudi mobilna dostopnost do spletne aplikacije, saj temelji na Bootstrap ogrodju, ki omogoča prilagajanje spletne strani glede na dimenzije našega ekrana. Codeigniter ogrodje je znano že kar nekaj časa. Glede na obsežno podporo in dobro dokumentacijo lahko rečemo, da je eno boljših ogrodij, ki jih najdemo na trgu. Sicer se je nadgradnja sistema za določen čas ustavila zaradi problemov v podjetju avtorjev, vendar je naslednik tega ogrodja nadaljeval z delom in poskrbel za nove verzije. Izdelave s pomočjo ogrodja smo se lotili predvsem zato, ker nam je bistveno olajšalo izdelavo želene spletne aplikacije, poskrbelo za boljšo varnost ter omogočilo bolj pregleden in sistematski način programiranja. Dodatna prednost je tudi ta, da smo imeli dostop do nabora že vnaprej izdelanih knjižic, ki jih je mogoče zelo enostavno implementirati in kasneje uporabiti pri sami izvedbi. 4.2 Podatkovna struktura spletne aplikacije Ob pričetku izdelave sistema smo se najprej lotili priprave podatkovne strukture aplikacije, ki je naše vodilo skozi celoten projekt. Podatkovna struktura MySQL, ki se uporablja pri omenjenem sistemu, je smiselno strukturirana na način, da so poizvedbe v podatkovno bazo čim manj zahtevne in čim hitrejše, saj je to ključno predvsem takrat, ko do spletne strani dostopa uporabnik z manj znanja. Nekatere tabele vsebujejo kar nekaj tujih ključev, ki se navezujejo na druge tabele. Tuj ključ je v tem primeru Primarni ključ druge tabele. Kar nekaj tujih ključev se ponavlja skoraj pri vsaki tabeli, in sicer LanguageID – primarni ključ v tabeli Language, ki se navezuje na izbran jezik, ter AuthorID – primarni ključ tabele User, kjer so shranjeni vsi uporabniki in s pomočjo tega ključa dostopamo do podatkov uporabnika, ki je shranil vnos v podatkovno bazo. Določenih je tudi nekaj atributov, ki so v več tabelah, na primer Status, kjer je shranjeno stanje objave z 1 oziroma 0, kar pomeni, da je posamezni element viden oziroma skrit pri 41 prikazu v administraciji ali na strani, ter atribut TimeStamp oziroma TimeStampAdded, v katerega se beleži čas, ko je bilo izvedeno shranjevanje v administraciji. CMS Sistem vsebuje petnajst tabel. V spodnjem delu sta prikazana struktura posamezne tabele ter opis posameznega atributa v tabeli. V posamezni tabeli je podan vsak atribut posebej in njegov tip. Pri večini tabel smo uporabljali naslednje tipe atributov: Int – celo število (angl. Integer), dovoljuje največ štiri bite; Text – tekstovni format, ki ima največji dovoljen prostor 64 kilo bitov; LongText – tekstovni format, ki ima na voljo do 4 giga bite prostora; Varchar – tekstovni format, ki je omejen glede na število podanih znakov; BigInt – celo število, ki dovoljuje največ osem bitov. 4.2.1 ContactForm V tabelo ContactForm shranimo podatke o kontaktnem obrazcu. Podatkovna struktura ContactForm vsebuje atribute ContactFormID – primarni ključ te tabele, LanguageID – tuji ključ tabele Language, Form – atribut, kamor so shranjeni podatki kontaktnega obrazca, ter Message – kamor so shranjeni podatki o izpisu obvestil, ko je kontaktni obrazec posredovan. Tabela 4.1: Tabela ContactForm ContactForm Atribut ContactFormID LanguageID Tip int(255) int(255) Form Message text text Vir: Zupančič, lastna raziskava (2015) 4.2.2 ContactFormLog V tabelo ContactFormLog so shranjeni podatki povpraševanj, ki jih uporabnik izpolni ter pošlje na določen e-mail naslov. Struktura tabele je sledeča: ContactFormLogID – primarni ključ te tabele, LanguageID – tuj ključ, ki se navezuje na tabelo Language, Message – sporočilo, ki ga izpolni pošiljatelj, Tip – vrsta povpraševanja za lažjo filtracijo posredovanih sporočil, TimteStamp – čas, ko je bilo povpraševanje posredovano. 42 Tabela 4.2: Tabela ContactFormLog ContactFormLog Atribut ContactFormLogID LanguageID Message Tip TimeStamp Tip int(255) int(255) text varchar(255) bigint(255) Vir: Zupančič, lastna raziskava (2015) 4.2.3 Gallery Tabela Gallery se uporablja za shranjevanje slik za želeno fotogalerijo. Struktura tabele je zgrajena iz atributov: GalleryID – primarni ključ te tabele, Title – naslov slike oziroma kratek opis slike, Image – ime naložene slike na strežniku, GalleryCategoryID – tuji ključ, ki se navezuje na tabelo GalleryCategory, AuthorID – tuji kjuč, ki se navezuje na tabelo User, TimeStampAdded – čas naložene slike na strežnik in Status – kamor se beleži status prikazane oziroma skrite slike. Tabela 4.3: Tabela Gallery Gallery Atribut GalleryID Title Image GalleryCategoryID AuthorID Tip int(255) varchar(255) varchar(255) int(255) int(10) TimeStampAdded Status bigint(20) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.4 GalleryCategory V tabeli GalleryCategory so shranjeni tako imenovani albumi galerij oziroma kategorije galerij. Vsebuje sledeče atribute: CategoryID – primarni ključ te tabele, Title – naslov kategorije, Content – kratek opis kategorije, CategoryUrl – url kategorije glede na podani Title, AuthorID – tuj ključ, ki se navezuje na tabelo User, TimeStampAdded – shranjen čas 43 dodane kategorije, LanguageID – tuj ključ tabele Language ter Status – status prikazane oziroma skrite kategorije. Tabela 4.4: Tabela GalleryCategory GalleryCategory Atribut CategoryID Title Content Tip int(255) varchar(255) longtext CategoryUrl AuthorID TimeStampAdded LanguageID Status varchar(255) int(10) bigint(20) int(255) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.5 Slider Tabela Slider se uporablja za shranjevanje slik za prikaz naslovnih slik. Struktura tabele je zgrajena iz sledečih atributov: SliderID – primarni ključ te tabele, Title – naslov slike oziroma kratek opis slike, Image – ime naložene slike na strežniku, Order – atribut, kjer je shranjena pozicija slike, ki se uporablja za sortiranje po določenem vrstnem redu, AuthorID – primarni ključ tabele User, TimeStampAdded – shranjen čas dodanega »slida« in Status – kjer lahko prikažemo oziroma skrijemo določeno sliko. Tabela 4.5: Tabela Slider Slider Atribut SliderID Title Image Order AuthorID Tip int(255) varchar(255) varchar(255) int(255) int(10) TimeStampAdded Status bigint(20) int(1) Vir: Zupančič, lastna raziskava (2015) 44 4.2.6 Language Tabela vsebuje shranjene jezike, ki bodo uporabljeni na spletnih straneh. Atribut LanguageID – primarni ključ te tabele, Title – ime jezika, TitleShort – kratica jezika, ki je uporabljena kot url jezika, AuthorID – tuj ključ, ki se navezuje na tabelo User, TimeStampAdded – čas shranjenega jezika, DefaultLanguage – definira, kateri jezik je nastavljen kot privzet jezik ter Status – kjer lahko jezik začasno skrijemo oziroma prikažemo. Tabela 4.6: Tabela Language Language Atribut LanguageID Title TitleShort Tip int(255) varchar(255) longtext AuthorID TimeStampAdded DefaultLanguage Status int(10) bigint(20) int(1) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.7 Menu V tej tabeli je shranjena celotna menijska struktura spletne strani. Atribut MenuID – primarni ključ omenjene tabele, Title – ime menijske postavke, PageID – tuj ključ, ki se nanaša na tabelo Page, AuthorID – tuj ključ, ki se nanaša na tabelo User, TimeStampAdded – čas, ko je bila menijska postavka shranjena, MenuUrl – url spletne strani, ki jo generira na podlagi imena spletne strani, MenuCategoryID – tuj ključ, ki se nanaša na MenuCategory, ParentMenuID – tuj ključ, ki se nanaša na tabelo Menu, kamor se shrani MenuID menijske postavke, ki bo v tem primeru nad nivojem novo dodanega menija, Path – shranjeni MenuID ključi vključno z vsemi ParentMenuID ključi, LanguageID – tuj ključ tabele Language, Status – status, ali bo menijska postavka skrita ali prikazana. 45 Tabela 4.7: Tabela Menu Menu Atribut MenuID Title PageID AuthorID TimeStampAdded MenuUrl Tip int(255) varchar(255) int(255) int(10) bigint(20) varchar(255) MenuCategoryID ParentMenuID Path Position LanguageID Status int(255) int(255) varchar(255) int(255) int(255) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.8 MenuCategory MenuCategory je tabela, kamor se shranjujejo kategorije za menijske postavke. CategoryID – primarni ključ tabele, Title – naslov kategorije, Content – kratek opis kategorije, AuthorID – tuj ključ tabele User, TimeStampAdded – čas dodane kategorije, LanguageID – tuj ključ tabele Language in Status – stanje kategorije skrito oziroma prikazano. Tabela 4.8: Tabela MenuCategory MenuCategory Atribut CategoryID Title Content AuthorID Tip int(255) varchar(255) longtext int(10) TimeStampAdded LanguageID Status bigint(20) int(255) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.9 News News podatkovna struktura se uporablja za shranjevanje novic. NewsID – primarni ključ tabele, Title – naslov novice, Description – kratek opis novice, ki obsega 250 znakov, Content 46 – vsebina novice, Logo – shranjeno ime slike za novico, NewsUrl – povezava, s katero dostopamo do novice, ki je generirana na podlagi Title novice, NewsCategoryID – tuj ključ tabele NewsCategory, AuthorID – tuj ključ tabele User, TimeStampAdded – čas dodane novice, LanguageID – tuj ključ tabele Language in Status – kjer je shranjeno stanje objave novice. Tabela 4.9: Tabela News News Atribut NewsID Title Description Tip int(255) varchar(255) text Content Logo NewsUrl NewsCategoryID AuthorID TimeStampAdded LanguageID text varchar(255) varchar(255) int(255) int(10) bigint(20) int(255) Status int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.10 NewsCategory Tabela NewsCategory vsebuje shranjene kategorije, ki jih lahko uporabljamo pri novicah. Struktura tabele je naslednja: CategoryID – primarni ključ tabele, Title – naslov kategorije, Content – kratek opis kategorije, AuthorID – tuj ključ tabele, ki se navezuje na tabelo User, TimeStampAdded – čas dodane kategorije, LanguageID – tuj ključ, ki se navezuje na tabelo Language in Status – kjer je shranjeno stanje skrite oziroma prikazane kategorije. 47 Tabela 4.10: Tabela NewsCategory NewsCategory Atribut CategoryID Title Content AuthorID TimeStampAdded LanguageID Tip int(255) varchar(255) longtext int(10) bigint(20) int(255) Status int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.11 Page Tabela Page je namenjena shranjevanju spletnih strani, ki so prikazane, ko so le-te hkrati dodane tudi v tabelo Menu. Tabela vsebuje sledeče atribute: PageID – primarni ključ tabele, Name – ime strani, vidne v administraciji za lažje filtriranje in iskanje, Title – naslov spletne strani, ki je izpisan na spletni strani, PageContentTitle – naslov vsebine spletne strani, PageContent – vsebina spletne strani, AuthorID – tuj ključ, ki se navezuje na tabelo User, CssID – tuj ključ, ki se navezuje na tabelo TemplateCss, HtmlID – tuj ključ, ki se navezuje na tabelo TemplateHtml, Block – pozicije ter ključi vseh dodanih blokov iz tabele TemplateBlock, PageCategoryID – tuj ključ za tabelo PageCategory, MetaKeywords – tagi, ki se uporabljajo za optimizacijo spletne strani, MetaDescription – opis, ki se uporablja za optimizacijo spletne strani, ContactForm – možnost, če želimo na določeni spletni strani prikazati kontaktni obrazec, TimeStampAdded – čas dodane spletne strani, DefaultPage – določitev privzete spletne strani, LanguageID – tuj ključ, ki se nanaša na tabelo Language in Status – shrani stanje, če bo spletna stran prikazana oziroma skrita pred objavo. 48 Tabela 4.11: Tabela Page Page Atribut PageID Name Title Tip int(255) varchar(255) varchar(255) PageContentTitle PageContent AuthorID CssID HtmlID Block varchar(255) longtext int(10) int(255) int(255) text PageCategoryID MetaKeywords MetaDescription ContactForm TimeStampAdded DefaultPage int(255) text text int(11) bigint(20) int(1) LanguageID Status int(255) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.12 PageCategory Tabela PageCategory vsebuje shranjene kategorije, ki jih lahko uporabljamo pri dodajanju novih spletnih strani. Struktura tabele je naslednja: CategoryID – primarni ključ tabele, Title – naslov kategorije, Content – kratek opis kategorije, AuthorID – tuj ključ tabele, ki se navezuje na tabelo User, TimeStampAdded – čas dodane kategorije, LanguageID – tuj ključ, ki se navezuje na tabelo Language in Status – ki prikazuje stanje prikazane oziroma skrite kategorije. Tabela 4.12: Tabela PageCategory PageCategory Atribut CategoryID Title Content AuthorID TimeStampAdded LanguageID Tip int(255) varchar(255) longtext int(10) bigint(20) int(255) Status int(1) Vir: Zupančič, lastna raziskava (2015) 49 4.2.13 TemplateBlock TemplateBlock tabela je namenjena shranjevanju vseh blokov, katere uporabimo pri dodajanju oziroma urejanju spletne strani. Sestavljena je iz sledečih atributov: BlockID – primarni ključ tabele, Title – naslov bloka, BlockFile – pot do datoteke, kjer je shranjena koda, AuthorID – tuj ključ, ki se navezuje na tabelo User, TimeStampAdded – čas shranjevanja bloka v podatkovno bazo, LanguageID – tuj ključ, ki se navezuje na tabelo Language in Status – ki shrani stanje prikaza oziroma skritosti bloka. Tabela 4.13: Tabela TemplateBlock TemplateBlock Atribut BlockID Tip int(255) Title BlockFile AuthorID TimeStampAdded LanguageID Status varchar(255) varchar(255) int(10) bigint(20) int(255) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.14 TemplateCss TemplateCss tabela je namenjena shranjevanju vseh stilskih predlog, ki jih uporabimo pri dodajanju oziroma urejanju spletne strani. Sestavljena je iz sledečih atributov: CssID – primarni ključ tabele, Title – naslov stilske predloge, CssFile – pot do datoteke, kjer je shranjena stilska predloga formata .css, CssFileLess – pot do datoteke, kjer je shranjena stilska predloga formata .less, AuthorID – tuj ključ, ki se navezuje na tabelo User, TimeStampAdded – čas shranjevanja bloka v podatkovno bazo, LanguageID – tuj ključ in Status – ki shrani stanje prikaza oziroma skritosti stilske predloge. 50 Tabela 4.14: Tabela TemplateCss TemplateCss Atribut CssID Title CssFile CssFileLess AuthorID TimeStampAdded Tip int(255) varchar(255) varchar(255) varchar(255) int(10) bigint(20) Status int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.15 TemplateHtml TemplateHtml tabela je namenjena shranjevanju vseh spletnih predlog, ki jih uporabimo pri dodajanju oziroma urejanju spletne strani. Sestavljena je iz sledečih atributov: HtmlID – primarni ključ tabele, Title – naslov spletne predloge, HtmlFile – pot do datoteke, kjer je shranjena spletna predloga v formatu .tpl, AuthorID – tuj ključ, ki se navezuje na tabelo User, TimeStampAdded – čas shranjevanja bloka v podatkovno bazo, LanguageID – tuj ključ in Status – ki shrani stanje prikaza oziroma skritosti spletne predloge. Tabela 4.15: Tabela TemplateHtml TemplateHtml Atribut HtmlID Title HtmlFile Tip int(255) varchar(255) varbinary(255) AuthorID TimeStampAdded Status int(10) bigint(20) int(1) Vir: Zupančič, lastna raziskava (2015) 4.2.16 User V tabeli User so shranjeni vsi uporabniki, ki lahko dostopajo do administracije za urejanje vsebine. Tabela vsebuje atribute UserID – primarni ključ, UserName – uporabniško ime za prijavo v sistem, Password – shranjeno kriptirano geslo za prijavo v sistem, TimeStampAdded – čas dodanega uporabnika, TimeStampLoged – čas zadnje prijave v sistem, IP – naslov 51 uporabnika, ki se je prijavil v sistem, Type – tip uporabnika (uporabnik, administrator), Status – status uporabnika, ki posledično definira, ali je možna prijava v sistem. Tabela 4.16: Tabela User User Atribut UserID UserName Password Tip int(255) varchar(255) varchar(255) TimeStampAdded TimeStampLogged IP Type Status bigint(20) bigint(20) varchar(255) int(11) int(11) Vir: Zupančič, lastna raziskava (2015) 4.3 Integracija ogrodja Za izdelavo spletne aplikacije smo uporabili Codeigniter ogrodje, ki uporablja MVC arhitekturni vzorec programiranja, da loči poslovno logiko od uporabniškega vmesnika. Tako smo se odločili razdeliti poslovno logiko na najbolj logičen način, da lahko poskrbimo za optimalno predelavo obstoječega modula brez večjih posegov v celotnem sistemu. »Controllerje« smo ločili glede na posamezni modul in »View«, ki je znotraj »Controllerja« deljen še na tri različne dele, in sicer view, edit ter add. 4.3.1 Model Model je del, ki se nanaša na podatkovno strukturo in delo z njo. Razdeljen je na home_model in admin_model. Home_model je razred, v katerem so definirane vse metode, ki jih uporabljamo v home »Controllerju«, in sicer: recordCount – metoda iz določene tabele vrne število zadetkov glede na določen kriterij; fetchDbPage – metoda glede na določen URI vrne vsebino spletne strani; fetchDbTemplate – metoda glede na določen parameter PageID pridobi iz baze podatke o spletni predlogi (CssID, HtmlID, BlockID); fetchDbLanguage – metoda glede na vhodni parameter PageID vrne TitleShort in LanguageID iz podatkovne baze; 52 fetchDbNews – metoda glede na vhodne parametre LanguageID, CategoryID vrne izpis novic; fetchDbGallery – metoda glede na vhodne parametre CategoryID vrne izpis galerije; fetchDbGalleryCategory – metoda vrne izpis vseh dodanih kategorij oziroma albumov za galerijo; fetchDbMenu – metoda vrne izpis menijev glede na vhodni parameter PageID,LanguageID in ParentID v primeru, da gre za podmenije; getFieldValue – metoda glede na vhodne parametre vrne izpis določenega atributa. Admin model se uporablja v »Controllerjih«, ki jih uporabljamo v administratorskem dostopu. Poskrbi za izpis določenih podatkov iz baze in vsebujejo naslednje metode: checkLogin – metoda v podatkovni bazi glede na podana parametra Username in Password preveri, ali uporabnik dejansko obstaja in glede na pravilnost podatkov vrne informacijo kot true oziroma false; recordCount – metoda iz določene tabele vrne število zadetkov glede na določen kriterij; getFieldValue – metoda glede na vhodne parametre vrne izpis določenega atributa; getMaxFieldValue – metoda glede na vhodni parameter vrne največje število, ki je shranjeno v tabeli; fetchDb – metoda vrne izpis posameznega tabele iz podatkovne baze glede na zahtevane parametre; fetchDbEdit – metoda vrne podatke za urejanje glede na vhodni parameter ID iz posamezne tabele; fetchDbLimit – metoda vrne podatke glede na določene omejitve, ki se uporabljajo za paginacijo elementov pri izpisu iz baze. Kot vhodne parametre definiramo Limit – število elementov na stran, Table – tabelo iz katere izpisujemo, OrderType – vrstni red izpisa ter LanguageID – parameter, ki ga pridobimo glede na izbran jezik; fetchDbSearch – metoda vrne izpis zadetkov iz podatkovne baze glede na vnos iskanega niza. 53 4.3.2 View Vsak modul v administraciji uporablja svoj »Controller« oziroma del, ki se nanaša na poslovno logiko, ter skrbi za logiko celotnega modula. Prav tako ima vsak posamezni modul ločene »View« oziroma predstavitvene sloje, in sicer: X_view.php – predstavitveni sloj, ki skrbi za izpis vseh dodanih elementov v podatkovni bazi določenega modula; X_add_view.php – predstavitveni sloj, ki vsebuje formular za vnos podatkov v podatkovno bazo; X_edit_view.php – predstavitveni sloj, ki vsebuje formular za urejanje vnosa iz podatkovne baze. V zgornjem primeru je X – ime posameznega modula, na katerega se nanaša. 4.3.3 Controller Posamezni »Controller« v administraciji vsebuje metode, kot so index, add, edit, delete, post in status. Opis posameznih metod so sledeči: Index – metoda skrbi za izpis podatkov iz podatkovne baze in uporablja »View« X_view.php za izpis podatkov; Add – izpiše formular za dodajanje podatkov v podatkovno bazo in uporablja »View« X_add_view.php; Edit – metoda dobi kot vhodni parameter ID elementa, katerega želimo urejati. V primeru, da ID v podatkovni bazi ne obstaja, se izvede preusmeritev na Index() metodo. Kot predstavitveni sloj uporablja X_edit_view.php za prikaz formularja za urejanje elementa z vnesenimi podatki; Delete – metoda se uporablja za brisanje vnosa. Kot vhodni parameter pridobi ID, katerega preveri v podatkovni bazi in v primeru, da zapis obstaja, poskrbi za odstranitev; Post – metoda skrbi za shranjevanje podatkov v bazo. Glede na to, da se uporablja AJAX za asihrono pošiljanje podatkov formularja, imamo v vsakem »Controllerju« posledično post metodo, ki se sproži ob pošiljanju formularja. Ta poskrbi za validacijo vseh vnosnih polj, za izpis napak v primeru nepravilnosti ter za shranjevanje podatkov v podatkovno bazo. 54 V home »Controllerju« imamo le index metodo, ki skrbi za izpis glede na vhodni parameter URI. URI je lahko sestavljen največ iz dveh nizov. V primeru, da uporabljamo več jezikov, je URI sestavljen iz dveh nizov. Prvi niz je ime jezika oziroma TitleShort atribut iz podatkovne tabele Language, drugi niz pa je MenuUrl, ki je shranjen v tabeli Menu. Če imamo več jezikov in je jezik nastavljen kot privzet, se nivo zmanjša v URI-ju na izpis MenuUrl - ja. URI z dvema nivojema je zapisan v obliki »si/ime-zelene-spletne-strani.html«, kadar imamo le en nivo, torej samo en jezik, pa je URI-ja zapisan v obliki »ime-zeljene-spletne-strani.html«. Slika 4.1: Primer Controllerja za Gallery modul Vir: Zupančič, lastni prikaz (2015) Glavno delo »home controller«- ja je, da glede na vhodni parameter izpiše spletno stran, ki je definirana z določenim URL naslovom. Tako glede na vhodni parameter preveri, če menijska postavka s tem URL naslovom obstaja in hkrati če obstaja spletna stran, ki je bila dodana na ta URL naslov. V primeru, da je URL naslov enak tistemu v podatkovni bazi, izpiše spletno stran z vsemi dodanimi elementi in blokovsko ureditvijo, kakor smo jo definirali v administraciji. V nasprotnem primeru nas preusmeri na privzeto nastavljeno spletno stran določenega jezika. 55 5. ZAKLJUČEK Izdelava spletne aplikacije je v današnjem času relativno enostavna, saj je na spletu na voljo kar nekaj tako imenovanih spletnih ogrodij, s pomočjo katerih lahko spletne aplikacije izdelamo v zelo kratkem času in na višjem nivoju. Medtem ko samostojne PHP skripte uporabljajo proceduralni način programiranja, je izdelava spletnih aplikacij s pomočjo spletnih ogrodij objektno orientirana. Ogrodja uporabljajo MVC vzorec, ki ima predstavitveni sloj ločen od poslovne logike delovanja celotne aplikacije, kar je še posebej pri večjih kompleksnih aplikacijah velika prednost. V diplomski nalogi smo opravili analizo izbire optimalnega spletnega ogrodja za izdelavo spletne aplikacije. Podrobneje smo obravnavali pet najpogosteje uporabljenih ogrodij in na podlagi analize izbrali tisto, ki bi bilo najbolj smiselno za našo aplikacijo. V ožjem izboru sta bili ogrodji Laravel in Codeigniter, ki sta kvalitetno dokumentirani in dokaj enostavni za uporabo. Codeigniter je primeren predvsem za manj kompleksne aplikacije, medtem ko je Laravel bistveno boljši za izdelavo kompleksnih aplikacij. Prednost Laravel-a je predvsem v uporabi Composerja, s pomočjo katerega zelo enostavno implementiramo dodatne knjižnice in druge pakete, ki jih potrebujemo v projektu. Ugotavljali smo tudi, ali je bolj smiselno izdelati spletno aplikacijo povsem v lastni izvedbi oziroma uporabiti že v naprej izdelane odprtokodne sisteme. Na podlagi celotne analize in presoje smo se odločili, da izdelamo sistem v lastni izvedbi, saj se tako najbolj približamo realizaciji naših želja in potreb. Za izdelavo splošno namenskega CMS sistema v lastni izvedbi smo kot optimalno ogrodje izbrali Codeigniter, predvsem zato, ker smo že imeli kar nekaj predhodnih izkušenj z uporabo omenjenega ogrodja. V uvodu naloge smo določili tri hipoteze, ki so nam bile v pomoč pri izbiri spletnega ogrodja za izdelavo spletne aplikacije. Prvo hipotezo, ki se glasi: »Odprtokodni CMS sistemi imajo bistveno več prednosti kot CMS sistemi, izdelani v lastni izvedbi«, smo po opravljeni analizi potrdili. Drugo hipotezo, ki se glasi: »Ogrodja se med seboj močno razlikujejo po razpoložljivih virih, ki so za programerja nujno potrebni pri razvoju produkta (navodila, skupnost, rešitve problemov …)«, smo po analizi prav tako potrdili. Tretja hipoteza se glasi: »Ogrodja se med seboj razlikujejo po podprtih funkcionalnostih, zato verjetno nekatera ne podpirajo vseh komponent in funkcionalnosti, ki jih bomo potrebovali pri izdelavi želenega 56 sistema«. Na podlagi hipotez smo se lažje odločili za izvedbo splošno namenskega CMS sistema s pomočjo spletnega ogrodja Codeigniter. V praktičnem delu diplomske naloge smo v celoti opisali postopek izdelave spletne aplikacije, funkcionalnost posameznih modulov, njihovo podatkovno strukturo in opisali vse funkcije, ki so uporabljene v sistemu ter opredelili njihov namen. Če bi se danes ponovno odločali za izdelavo spletnega sistema s pomočjo katerega koli ogrodja, bi se najverjetneje odločili za Laravel, saj se je v praksi izkazalo, da je kljub kompleksnosti eno izmed najboljših spletnih ogrodij, ki trenutno obstajajo na trgu. 57 58 6. LITERATURA IN VIRI 1. 1A INTERNET (2014) Izdelava mobilnih spletnih strani - responsive design. Dostopno prek: http://www.1ainternet.net/izdelava-mobilne-strani.html (23.4.2015). 2. ADERMANN, NILS in BOGGIANO, JORDI (2015) Composer: Introduction. Dostopno prek: https://getcomposer.org/doc/00-intro.md (22.5.2015). 3. BREŠČAK, BORUT (2010a) Kaj je HTML? Dostopno prek: http://www.ssers.mb.edus.si/gradiva/rac/moduli/spletne_aplikacije/20_html/02_datoteka.html (7.2.2015). 4. BREŠČAK, BORUT (2010b) Uvod v JavaScript. Dostopno prek: http://www.ssers.mb.edus.si/gradiva/rac/drugo/javascript/01_mapa/01_datoteka.html (14.5.2015). 5. COGNEAU, ALEXANDER (2013) Yet Another PHP Framework? Dostopno prek: http://www.sitepoint.com/phalconphp-yet-another-php-framework/ (3.5.2015). 6. DITEA (2015) Model–View–Controller – MVC. Dostopno prek: http://www.ditea.si/sl/tehnologije/ (22.4.2015). 7. KOVAČIČ, MATJAŽ (2010) Analiza in primerjava PHP ogrodij na primeru izdelave spletnega dnevnika. Diplomsko delo. Maribor: Univerza v Mariboru, Fakulteta za elektrotehniko, računalništvo in informatiko. Dostopno prek: https://dk.um.si/Dokument.php?id=18449&lang=eng (7.2.2015). 8. LARAVEL (2014) Laravel: Introduction – Laravel. Dostopno prek: http://laravel.com/docs/4.2/introduction (3.5.2015) 9. LEMAJIČ, JANI (2010) JavaScript ogrodje jQuery. Diplomsko delo. Maribor: Univerza v Mariboru, Fakulteta za elektrotehniko, računalništvo in informatiko. Dostopno prek: https://dk.um.si/Dokument.php?id=20870 (12.5.2015) 10. LLC (2015) About Yii. Dostopno prek: http://www.yiiframework.com/about/ (3.5.2015). 11. LOCKHART, JOSH (2015) PHP: The right way. Dostopno prek: http://sl.phptherightway.com/ (14.5.2015). 12. MARINŠEK, BOŠTJAN (2010) Razvoj predstavitvene logike spletnih aplikacij z uporabo sodobnih ogrodij. Diplomsko delo. Maribor: Univerza v Mariboru, Fakulteta za elektrotehniko, računalništvo in informatiko. Dostopno prek: https://dk.um.si/Dokument.php?id=13892 (12.5.2015). 59 60 13. OHRT, MONTE (2015) All about Smarty. Dostopno prek: http://www.smarty.net/about_smarty (22.5.2015). 14. POLC, ŽIGA (2012) Kaj so SASS, LESS in Stylus? Dostopno prek: http://www.pomagalnik.com/slovar/kaj-so-sass-less-in-stylus/ (12.5.2015). 15. PRESENTIA (2008) Kaj je javascript? Dostopno prek: http://www.presentia.si/bazaznanja-helpdesk/2008/kaj-je-javascript/ (7.2.2015). 16. REYES, JOEL (2009) Discussing PHP Frameworks: What, When, Why and Which? Dostopno prek: http://www.noupe.com/development/discussing-php-frameworks.html (24.12.2014). 17. SENSIOLABS (2014) What is Symfony. Dostopno prek: http://symfony.com/what-issymfony (03.05.2015). 18. SKVORC, BRUNO (2013) Best PHP Frameworks for 2014. Dostopno prek: http://www.sitepoint.com/best-php-frameworks-2014/ (22.12.2014). 19. STROSAR, EDI (2008) Vrivanje SQL od A do Ž. Dostopno prek: http://www.monitor.si/clanek/vrivanje-sql-od-a-do-z/123404/ (12.5.2015). 20. ŠUNTA, BLAŽ (2012) Kaj pomeni oznaka CSS? Dostopno prek: http://www.spletninasveti.si/kaj-je-css/ (7.2.2015). 21. TECHNOLOGY, BRITISH COLUMBIA INSTITUTE (2015) Welcome to CodeIgniter. Dostopno prek: http://www.codeigniter.com/userguide3/general/welcome.html (3.5.2015). 22. TWIG (2012) TWIG: Introduction. Dostopno prek: http://twig.sensiolabs.org/doc/intro.html (22.5.2015). 23. UNDERWOOD, PAUL (2014) Pauland - PHP Template Engines. Dostopno prek: http://www.paulund.co.uk/php-template-system (23.4.2015). 24. VINING, ROBERT (2008) Static HTML Web Pages vs. Content Management Systems. Dostopno prek: http://www.robertswebdesign.com/blog/website-design/12static-html-web-pages-vs-content-management-systems (24.12.2014). 25. ZANDSTRA, MATT (2004) Naučite se PHP v 24 urah. Ljubljana: Pasadena. 26. ŽUPEC, NEJC (2012) Twitter Bootstrap in razvoj spletnega repozitorija za Cacti. Diplomsko delo. Ljubljana: Univerza v Ljubljani, Fakulteta za računalništvo in informatiko, Fakulteta za matematiko in fiziko. Dostopno prek: http://eprints.fri.unilj.si/1862/1/%C5%BDupec-1.pdf (14.5.2015). 61 62 PRILOGA Uporabljene kratice Priloga: Uporabljene kratice Kratica Angleški pomen PHP Hypertext Preprocessor HTML Hyper Text Markup Language Hipertekstovni označevalni jezik CSS Cascading Style Sheets Stilska predloga za videz spletne strani LESS Less Predprocesorski CSS CI Codeigniter Framework Codeigniter ogrodje AJAX Asynchronous Slovenski pomen JavaScript XML Skriptni jezik za razvoj dinamičnih spletnih strani and Asihroni Javascript in Xml URI Uniform Resource Identifier Enolični identifikator vira URL Uniform Resource Locator Enolični krajevnik vira SQL Structured Query Language Strukturni povpraševalni jezik CMS Content Managment System Sistem za upravljanje s vsebinami MVC Model View Controller Model, pogled, kontrolnik
© Copyright 2024