Simon Cedula SPLETNA APLIKACIJA ZA SPREMLJANJE PODATKOV O FILMIH Diplomsko delo Maribor, december 2012
I Diplomsko delo univerzitetnega študijskega programa SPLETNA APLIKACIJA ZA SPREMLJANJE PODATKOV O FILMIH Študent: Študijski program: Smer: Mentor: Somentor: Lektorica: Simon Cedula UN ŠP Računalništvo in informacijske tehnologije Računalništvo in informacijske tehnologije (UN) red. prof. dr. Janez Brest doc. dr. Borko Bošković Mojca Pacek, prof. nem. in slov. Maribor, december 2012
II
III ZAHVALA Za pomoč in vodenje pri pisanju diplomske naloge se zahvaljujem mentorju prof. dr. Janezu Brestu ter somentorju doc. dr. Borku Boškoviću. Še posebej se zahvaljujem svojim staršem, ki so mi omogočili šolanje ter me pri tem tudi podpirali.
IV SPLETNA APLIKACIJA ZA SPREMLJANJE PODATKOV O FILMIH Ključne besede: PHP, C#, spremljanje podatkov, pridobivanje podatkov, filmi, serije, razčlenjevanje UDK: 004.777:791(043.2) Povzetek V diplomskem delu opisujemo izbiro ogrodja za izdelavo spletne aplikacije, načine pridobivanja podatkov, izgled in funkcionalnost aplikacije ter načine optimizacije. Rezultat diplomskega dela je spletna aplikacija, ki je napisana v programskem jeziku PHP s pomočjo tehnologij HTML, JavaScript, CSS in SVG. Aplikacija omogoča spremljanje uporabnikovih podatkov o serijah in filmih ter dodajanje novih vnosov v podatkovno bazo naslovov. Kot dopolnilo spletne aplikacije je bila izdelana še namizna aplikacija. Namizna aplikacija je napisana v jezikih XAML in C#, omogoča pa hiter in učinkovit pregled podatkov. Namenjena je uporabnikom operacijskega sistema Windows 8.
V WEB APPLICATION FOR MANAGING DATA ABOUT MOVIES Key words: PHP, C#, data monitoring, obtaining data, movies, series, parsing UDK: 004.777:791(043.2) Abstract This thesis describes the process of choosing a framework used to build a web application. It also describes application design, functionality and used optimisation patterns. The result of this thesis is a web application. Web application is written in priogramming language PHP with the following technologies: HTML, JavaScript, CSS and SVG. It enables us to manage user movie and series information and to insert new entries to title database. In addition to web application a desktop application was built. Desktop application is written in computer languages XAML and C#. It allows user a fast and efficient data overview. It is designed for users of Windows 8 operating system.
VI VSEBINA 1 UVOD... 1 2 NAMEN IN CILJI DIPLOMSKE NALOGE... 2 3 SPLETNA IN NAMIZNA APLIKACIJA... 3 3.1 SPLETNA APLIKACIJA... 3 3.2 NAMIZNA APLIKACIJA... 3 4 PRIDOBIVANJE PODATKOV IZ SPLETNIH VIROV... 4 4.1 PRIDOBIVANJE PODATKOV... 4 4.1.1 Razpoznavanje... 5 4.2 UPORABA DREVESA... 8 4.3 PRIDOBIVANJE PODATKOV O SERIJI... 9 4.4 PRIDOBIVANJE PODATKOV O EPIZODI... 11 5 APLIKACIJI... 14 5.1 PHP-SPLETNA APLIKACIJA... 14 5.1.1 Izbira ogrodja... 14 5.1.2 Opis ogrodja... 15 5.1.3 Izgled... 16 5.1.4 Funkcionalnost... 17 5.2 NAMIZNA APLIKACIJA... 21 5.2.1 Izbira ogrodja... 21 5.2.2 Opis ogrodja... 22 5.2.3 Izgled... 23 5.2.4 Funkcionalnost... 24 6 OPTIMIZACIJA... 25 6.1 PODATKOVNA BAZA... 25 6.2 SPLETNA APLIKACIJA... 25 6.3 NAMIZNA APLIKACIJA... 26 6.4 REZULTATI OPTIMIZACIJE... 27 7 ZAKLJUČEK... 29
VII VIRI, LITERATURA... 31 PRILOGE... 32 SEZNAM SLIK... 32 NASLOV ŠTUDENTA... 33 KRATEK ŽIVLJENJEPIS... 33
VIII UPORABLJENE KRATICE PHP PHP Hypertext Preprocessor (v originalu Personal Home Page Tools) XAMPP X (»cross«za cross-platform) Apache MySQL PHP Perl WPF Windows Presentation Fundation XML Extensible Markup Language XAML Extensible Application Markup Language IMDB Internet Movie Database DOM Document Object Model HTML HyperText Markup Language SVG Scalable Vector Graphics SQL Structured Query Language http Hypertext Transfer Protocol WinRT Windows runtime ARM Advanced RISC Machine RISC Reduced Instruction Set Computer UI User Interface XHTML Extensible HyperText Markup Language
Spletna aplikacija za spremljanje podatkov o filmih Stran 1 1 UVOD Ljudje se dandanes srečujejo z vedno večjo količino podatkov, zaradi česar si stvari vse težje zapomnijo. To velja tudi za gledanje serij in filmov. Nič kolikokrat se zgodi, da želimo pogledati film, a že po nekaj minutah ugotovimo, da smo točno ta film že videli. Lahko pa se pripeti, da si ogledamo nekaj epizod serije in nato pozabimo, koliko smo si jih že ogledali. Ko želimo nadaljevati, nas seveda čaka pregledovanje delov, da bi ugotovili, ali smo jih že videli ali ne. V diplomskem delu želimo izdelati spletno aplikacijo, ki bi ljudem olajšala spremljanje serij s pomočjo vodenja statistike. Aplikacija naj vsebuje še funkcije za spremljanje in vodenje statistike. Nekatere izmed teh funkcij so vstavljanje datumov začetka in konca uporabnikovega spremljanja serije in ocenjevanje. S pomočjo tehnologije SVG bo dodan tudi grafični pregled statistike ocen naslovov. V dopolnilo spletni aplikaciji bo izdelana še namizna aplikacija. V nadaljevanju bodo predstavljeni namen in cilji diplomske naloge. Razložene bodo odločitve, zakaj je bilo izbrano določeno ogrodje za namizno in spletno aplikacijo. Opisan bo način pridobivanja podatkov, prikazana bosta tudi izgled in funkcionalnost posameznih aplikacij. Na koncu bo beseda tekla o uporabljenih optimizacijah.
Spletna aplikacija za spremljanje podatkov o filmih Stran 2 2 NAMEN IN CILJI DIPLOMSKE NALOGE Cilj diplomskega dela je izdelati spletno aplikacijo, ki bo uporabniku omogočala prijazno sledenje ogledanih serij oz. filmov, ter orodje, ki bo omogočalo hitro pridobivanje novih, v aplikaciji uporabljenih podatkov. V ta namen bo razvita spletna aplikacija, ki bo podatke predstavila na uporabniku prijazen način, na drugi strani pa bo izdelana aplikacija, ki bo služila pridobivanju novih podatkov iz različnih virov, predvsem spletnih. V času razvoja spletne aplikacije je izšel tudi nov operacijski sistem Windows 8. Za uporabnike le-tega bo razvita še namizna aplikacija, ki omogoča hiter pregled podatkov. V namen izdelave spletne in namizne aplikacije bomo preučili metode optimizacije pridobivanja podatkov in metode optimizacije kode. Spletna aplikacija bo zasnovana v programskem jeziku PHP. PHP je uporabljen tako na strežnikih Linux kot na strežnikih Windows. Namizna aplikacija bo zasnovana v jeziku C#, ki omogoča hitro gradnjo aplikacije in enostavno razhroščevanje.
Spletna aplikacija za spremljanje podatkov o filmih Stran 3 3 SPLETNA IN NAMIZNA APLIKACIJA Kljub temu, da diplomsko delo v naslovu omenja le eno aplikacijo, sta bili izdelani dve. Razlog za to je bil prikaz primera, kako bi se lahko aplikacija preselila tudi v drugačno obliko. Z različnimi oblikami dostopa bi aplikacija lahko dobila več uporabnikov, kar je v končni fazi cilj vsake uspešne aplikacije. 3.1 Spletna aplikacija Spletna aplikacija je skupek spletnih strani. Na teh straneh lahko uporabnik dostopa do funkcij, ki mu omogočajo označevanje ogledanih serij in filmov, dostop do sistema ocenjevanja naslovov, pregled statistike in podobno. Zaradi spremembe namena namizne aplikacije ima spletna aplikacija še nadzorno ploščo. Nadzorna plošča je dostopna le upravljavcem in omogoča urejanje uporabnikov in dodajanje novih naslovov v podatkovno bazo. 3.2 Namizna aplikacija Zaradi izida operacijskega sistema Windows 8 je namizna aplikacija Modern UI. Aplikacija omogoča uporabniku hitrejši pregled podatkov. Modern UI-aplikacije so razvite za operacijski sistem Windows 8 in so dostopne preko aplikacije Windows Store. Prednost Modern UI-aplikacije je predvsem možnost uporabe iste kode tako na Intel kot ARM-arhitekturi procesorjev. To omogoča enostavno uporabo tako na namiznih kot prenosnih in tabličnih računalnikih.
Spletna aplikacija za spremljanje podatkov o filmih Stran 4 4 PRIDOBIVANJE PODATKOV IZ SPLETNIH VIROV 4.1 Pridobivanje podatkov Pridobivanje podatkov o serijah iz spletnih virov je zelo enolično in dolgočasno delo, ki ga ljudje neradi opravljajo. Ravno zaradi tega postane računalnik idealen pripomoček za pohitritev in poenostavitev le-tega. Samega pridobivanja podatkov se lahko lotimo na več načinov, odvisno od tega, kako so podatki shranjeni in kako do njih dostopamo. Za potrebe diplomskega dela smo dostopali do podatkov na strani IMDB.com. IMDB.com je spletna aplikacija, namenjena predstavitvi podatkov o filmih in serijah. Z 2.300.843 naslovi je največja tovrstna baza podatkov (število naslovov za 11. 9. 2012) [1]. Do podatkov na strani IMDB lahko dostopamo na več načinov. Najbolj očiten je seveda shranjevanje vsebine spletne strani in analiza le-te. Tako metodo imenujemo razpoznavanje. Drug, manj pogost način dostopanja do podatkov na strani IMDB je tako imenovan»database dump«. Kopije tabel baze podatkov,»database dump«, so različno zapisane. Nekatere tabele vsebujejo navodila za uporabo, statistike, po drugi strani pa druge tabele vsebujejo zgolj izpis. Na srečo so zapisi v vseh podobni, zato ni težko najti načina razčlenjevanja podatkov. V primeru, da so podatki zapisani v jeziku, ki je definiran z jasnimi pravili in je pogosto uporabljen, recimo jezik XML, nam je delo olajšano. Razlog za to tiči v dejstvu, da imamo v programskih jezikih na voljo že pripravljene pripomočke, razrede oziroma funkcije, ki omogočajo hitro brskanje po drevesih in tako relativno hiter dostop do podatkov.
Spletna aplikacija za spremljanje podatkov o filmih Stran 5 4.1.1 Razpoznavanje Slika 4.1: Potek razčlenjevanja Razpoznavanje poteka v treh korakih: leksikalna analiza (tvori leksikalne simbole), sintaktična analiza in semantična analiza. Primer razpoznavanja bomo v nadaljevanju prikazali na naslednjem izrazu: ( ) 4.1.1.1 Leksikalna analiza Leksikalna analiza je proces pretvorbe niza znakov v niz leksikalnih simbolov. Program oz. funkcijo, ki opravlja to delo, imenujemo leksikalni analizator [2]. Svoje delo le-ta opravlja s pomočjo leksikalne gramatike. Gramatika je sestavljena iz niza pravil, ki so definirana z regularnimi izrazi, definira pa način, kako mora leksikalni analizator tvoriti posamezne leksikalne simbole [3]. Leksikalni simbol je niz, ki se podreja leksikalnim vzorcem. Vsak leksikalni simbol je sestavljen iz leksema, tipa in opisa vzorca. Leksem je niz znakov, ki predstavlja leksikalni simbol v vhodnem nizu. Vrednost je vrednost leksema, na primer v vhodnem nizu in v leksemu je število 12 shranjeno kot niz»12«, vrednost pa je število 12. Tip pa ime pravila, po katerem je bil leksem izluščen iz vhodnega niza.
Spletna aplikacija za spremljanje podatkov o filmih Stran 6 Leksem Tip x Identifikator = Operator dodelitve 12 Število + Operator 3 Število * Operator ( Oklepaj 4 Število - Operator 2 Število ) Zaklepaj ; Podpičje Slika 4.2: Vhodni niz po leksikalni analizi 4.1.1.2 Sintaktična analiza Sintaktična oz. skladenjska analiza zgradi drevo izpeljav. Da lahko to stori, se morajo leksikalni simboli podrejati skladenjskim pravilom jezika. Če se pravilom jezika leksikalni simboli ne podrejajo, sintaktični analizator javi napako. V jezikih C in C++ so najpogostejše tovrstne napake manjkajoča podpičja oziroma manjkajoči ali odvečni oklepaji oziroma zaklepaji. Slika 4.3: Primer drevesa na stavku x = 12 + 3 * ( 4 2 ) 1;
Spletna aplikacija za spremljanje podatkov o filmih Stran 7 Slika 4.4: Drevo, zgrajeno na stavku x = 12 + 3 * ( 4 2 ); 4.1.1.3 Semantična analiza Samo razčlenjevanje je z izgradnjo drevesa načeloma končano, a za potrebe pridobivanja podatkov ga moramo še semantično oz. pomensko analizirati. Pomenska analiza se v primeru prevajanih jezikov vrši tako v času prevajanja kot v času izvajanja aplikacije. Računalnik je v vseh primerih ne more vršiti sam, ampak moramo v ključnih delih sami pregledovati vrednosti. Tipičen primer take logične napake je naslednja vrstica kode C++: const int PI = 31.4159265; Kljub temu, da je koda skladenjsko pravilna, vsebuje kar dve pomenski napaki. Prvo pomensko napako lahko ugotovi že računalnik. Ta napaka je napačna povezava tipa in vrednosti spremenljivke π. Tip int določa cela števila, kar podana vrednost ni. Druge pomenske napake računalnik ne more ugotoviti sam. Število π ima vrednost 3.14159265, podana vrednost je desetkratnik tega števila. V pridobivanju podatkov o serijah je tipičen primer take napake: <serija> <naslov>eureka</naslov> <stevilosezon>5</stevilosezon> <datumprveepizode>jul. 18, 2006</datumPrveEpizode> <datumnajnovejseepizode>jun. 11, 2004</datumNajnovejseEpizode> </serija> Skladenjsko so slednji podatki ustrezni, a pomensko niso, saj ni logično, da bi najnovejša epizoda izšla približno dve leti pred prvo epizodo.
Spletna aplikacija za spremljanje podatkov o filmih Stran 8 4.2 Uporaba drevesa Ker imamo vhodne podatke v obliki spletne strani, se ni potrebno ubadati s pisanjem programa, ki bi le-te razčlenil. Slika 4.5: Primer DOM-drevesa Spletne strani so že v obliki DOM-drevesa, kar znatno olajša delo. Uporabimo lahko že napisane rešitve v obstoječih programskih jezikih. Ker se elementi obnašajo kot objekti, je dostop do sinov v večini primerov možen na način: element.podelement[indeks pod elementa] Dostop do atributov pa bodisi: element.atribut[»ime atributa«] bodisi: element.imeatributa.
Spletna aplikacija za spremljanje podatkov o filmih Stran 9 4.3 Pridobivanje podatkov o seriji V tem podpoglavju bo predstavljen in razložen psevdokod, ki služi kot osnova pridobivanja podatkov o seriji. Ob začetku izvajanja pridobimo vsebino želene strani in jo razčlenimo v XML. Ker pridobivamo podatke iz strani, spisane v XHTML, je pretvorba enostavna. XHTML je namreč član družine jezikov XML. Po razčlenitvi strani v XML lahko začnemo pridobivati dejanske podatke. Najprej pridobimo XML-element z imenom»overviewtop«, ki hrani podatke o naslovu. V elementu»overview-top«poiščemo element tipa H1, kjer preberemo besedilo pred zadnjo pojavitvijo znaka '(' in shranimo kot naslov. stran = pridobi_vsebino_strani(); stran_xml = razcleni_vsebino_v_xml(stran); naslovno_polje = stran_xml.pridobi_element_z_idjem("overview-top"); dokler(element = pridobi_pod_element_elementa(naslovno_polje)) { ce_je(element.tip == "h1") { besedilo = element.vsebina; oklepaj = besedilo.zadnja_pojavitev("("); naslov = besedilo.pod_zaporedje(0, oklepaj); prekini zanko; } ce_ni nadaljuj; } Ko smo pridobili naslov serije, moramo pridobiti seznam sezon. To naredimo tako, da poiščemo element z imenom»maindetails_center_bottom«. Za tem preberemo vsebino podelementa globine 3 z imenom razreda»see-more inline«. podatki_o_seriji = stran_xml.pridobi_element_z_idjem("maindetails_center_bottom"); sezone = podatki_o_seriji.pod_element[0].pod_element[0].pod_element[1];
Spletna aplikacija za spremljanje podatkov o filmih Stran 10 V pridobljenem elementu gremo skozi podelemente, jim preverimo ustreznost in izvedemo ustrezno dejanje. dokler(sezona_element = pridobi_pod_element_elementa(sezone)) { V primeru, da je podelement tipa A, preberemo njegovo lastnost HREF in jo shranimo kot povezavo do seznama epizod v sezoni. ce_je(sezona_element.tip == "a") { pot_do_sezone = sezona_element.oznaka["href"]; Ko smo pridobili povezavo do podatkov o sezoni, pridobimo vsebino nove strani in jo razčlenimo v elemente XML. Za tem pridobimo seznam epizod, ki se nahaja v elementu z IDjem»episodes_content«; stran_s_sezonami = pridobi_vsebino_strani(pot_do_sezone); sezone_xml = razcleni_vsebino_v_xml(stran_s_sezonami); seznam_epizod = stran_s_sezonami.pridobi_element_z_idjem("episodes_content"); V elementih seznama epizod poiščemo elemente z imenom lastnosti»class«in njeno vrednostjo»clear«. Prav tako morajo imeti lastnost»itemtype«nastavljeno vrednost na»htpp://schema.org/tvseason«. dokler(pod_element = pridobi_pod_element_elementa(seznam_epizod)) { ce_je(pod_element.oznaka["class"] == "clear" && pod_element.oznaka["itemtype"] == "http://schema.org/tvseason") {
Spletna aplikacija za spremljanje podatkov o filmih Stran 11 Ko smo pridobili element s podatki o sezoni, pridobimo podatke o podelementih in poiščemo tistega, ki je tipa DIV in ima lastnost»class«z vrednostjo»list detail eplist«. Ta element vsebuje seznam epizod. Ko smo pridobili seznam epizod, preberemo vse elemente seznama in pridobimo povezave do strani s podatki o epizodi. } dokler(pod_pod_element = pridobi_pod_element_elementa(pod_element)) { ce_je(pod_pod_element.tip == "div" && pod_pod_element.oznaka["class"] == "list detail eplist") { dokler(epizoda = pridobi_pod_element_elementa(pod_pod_element)) { slika_div = epizoda.pod_element[0]; slika_a = slika_div.pod_element[0]; naslov_do_epizode = slika_a.oznaka["href"]; } prekini zanko; } ce_ni nadaljuj; } } ce_ni nadaljuj; } } ce_ni nadaljuj; 4.4 Pridobivanje podatkov o epizodi V tem podpoglavju bo predstavljen psevdokod, ki je uporabljen za pridobivanje podatkov o epizodi s seznama epizod. Podobno kot pri pridobivanju podatkov o seriji, tudi tu najprej pridobimo vsebino strani. Pridobljeno vsebino razčlenimo v XML ter preberemo vsebino elementa z ID-jem»overview-top«. Ko smo pridobili vsebino elementa, se sprehodimo po seznamu podelementov in izvedemo dodatna dejanja glede na njihov tip.
Spletna aplikacija za spremljanje podatkov o filmih Stran 12 stran = pridobi_vsebino_strani(); stran_xml = razcleni_vsebino_v_xml(); pomembno = stran_xml.pridobi_vsebino_elementa_z_idjem("overview-top"); dokler(element = pridobi_pod_element_elementa(pomembno)) { primerjaj(element.tip) { V primeru, da je tip podelementa H2, lahko iz njegove vsebine pridobimo identifikacijsko številko serije, številko sezone in zaporedno številko epizode. Vse to lahko pridobimo z nekaj preprostimi operacijami nad nizi znakov. primerjaj_z "h2": { naslov_serije = element.pod_element[0].vsebina; id_serije = element.pod_element[0].oznaka["href"].vrednost; sezona_in_epizoda = element.pod_element[1].vsebina; vejica = sezona_in_epizoda.zadnja_pojavitev(","); sezona = sezona_in_epizoda.pod_zaporedje(0, vejica); sezona = sezona.pod_zaporedje(7); epizoda = sezona_in_epizoda.pod_zaporedje(vejica+1); epizoda = epizoda.pod_zaporedje(8); }prelomi; V primeru, da je podelement tipa H1, lahko izluščimo datum izida epizode. Tudi to postorimo z nekaj operacijami nad nizi znakov. primerjaj_z "h1": { besedilo = odstrani_xml_tage(element.vsebina); oklepaj = besedilo.zadnja_pojavitev("("); besedilo = besedilo.pod_zaporedje(oklepaj); datum = spremeni_besedilo_v_datum(besedilo); }prelomi;
Spletna aplikacija za spremljanje podatkov o filmih Stran 13 Če je podelement tipa P in ima oznako»itemprop«ter vrednost»description«, lahko pridobimo kratek opis dogajanja epizode. primerjaj_z "p": { ce_je(ali_obstaja(p.oznaka["itemprop"] && p.oznaka["itemprop"] == "description") { opis = p.vsebina; } }prelomi; } Če ni element nobenega izmed prej opisanih tipov, izvajanje nadaljujemo z naslednjim podelementom.
Spletna aplikacija za spremljanje podatkov o filmih Stran 14 5 APLIKACIJI 5.1 PHP-spletna aplikacija Osnovo diplomskega dela predstavlja spletna aplikacija, razvita v ogrodju CoreEngine. Slika 5.1: Pozdravna stran spletne aplikacije 5.1.1 Izbira ogrodja Za izdelavo spletnih aplikacij v programskem jeziku PHP je dandanes ogromno različnih ogrodij. To je seveda otežilo izbiro tistega pravega ogrodja. Pri izbiri ogrodja smo se odločali med pogosteje uporabljenimi PHP ogrodji, in sicer CodeIgniter, Zend Framework, Joomla in med našim ogrodjem. Na koncu smo se odločili, da uporabimo naše ogrodje. Samo ogrodje smo uporabljali že lep čas. Dodano je bilo uporabljanje modulov, možnost gradnje strani s pomočjo gradnikov po meri in kodnih vtičnikov. To je znatno pohitrilo samo pisanje strani, preglednost kode delovanja in kode uporabniškega vmesnika.
Spletna aplikacija za spremljanje podatkov o filmih Stran 15 5.1.2 Opis ogrodja Ogrodje za izdelavo je poimenovano CoreEngine. Ime izhaja iz dejstva, da je bilo ogrodje na začetku razdeljeno na dva večja dela, in sicer Core in Engine. Core skrbi za nalaganje osnove uporabniškega vmesnika, ki je shranjena pod imenom template, nalaganje razredov s funkcionalnostmi in nalaganje kodnih vtičnikov, ki so omogočali izpis vrednosti v uporabniški vmesnik. Engine po drugi strani skrbi za to, da se je vsaka stran razčlenila in zgradila. Razčlenjevanje temelji na preprostem iskanju vzorcev in uporabi različnih funkcionalnih razredov, ki so naloženi v Core. Po razčlenitvi se zažene glavni del Engine in v uporabniški vmesnik vstavi vrednosti, ki so bile označene s pomočjo kodnih vtičnikov. Zaradi potrebe po funkcionalnosti in modularnosti sta bila Core in Engine združena in nastal je CoreEngine, ki je združeval lastnosti obeh predhodnikov, z nekaj izboljšavami. Funkcionalni razredi so bili preimenovani v module. Dostop do katerega koli modula je dinamičen skozi osnovni razred, kar je odstranilo potrebo po nalaganju vsakega modula v zahtevanem vrstnem redu. V primeru, da modul še ni naložen, ga CoreEngine poišče sam in naloži ter takoj pripravi za uporabo. Tudi samo grajenje uporabniškega vmesnika je bilo deležno večje predelave. Za vključitev dodatnih graditeljev so bili dodani moduli, ki preiščejo vsebino strani, naložijo ustrezne gradnike, jih obdelajo ter izpišejo ustrezno vsebino na izhod. CoreEngine ne omogoča pisanja kode PHP neposredno v kodo HTML. V ta namen uporabimo tako imenovane elemente Addon in elemente Control. Elementi Addon so uporabni za dostop in izpis vrednosti v uporabniški vmesnik. Elementi Control so uporabljene za hitrejše grajenje uporabniškega vmesnika. Omogočeno je gnezdenje obojih.
Spletna aplikacija za spremljanje podatkov o filmih Stran 16 Slika 5.2: Primer kode strani, napisane v ogrodju CoreEngine 5.1.3 Izgled Izgled aplikacije je preprost. Uporabnik takoj opazi naslov spletne aplikacije, ki služi tudi za vrnitev na prvo stran. Takoj pod tem so na voljo povezave do strani, ki jih lahko obiščemo. Na desnem delu strani se nahaja hiter iskalnik. Pod hitrim iskalnikom so povezave do strani, ki so povezane z uporabniškim računom.
Spletna aplikacija za spremljanje podatkov o filmih Stran 17 Na sliki 5.3 je razvidna osnovna predloga spletne strani. Le ta je prazna, saj je tu prikazana pred obdelavo v CoreEngine. Slika 5.3: Predloga spletne strani 5.1.4 Funkcionalnost Zaradi spremembe funkcionalnosti C# aplikacije so bile v nadzorni plošči dodane dodatne strani. Zaradi preglednosti bodo prikazane zgolj funkcionalnosti, ki so pomembne za samo urejanje serij, skratka brez povezav do osebnih nastavitev. 5.1.4.1 Dodajanje serije Dodajanje serij je zelo pomemben del spletne aplikacije, saj olajša delo z ogromno količino podatkov. Slika 5.4: Obrazec, namenjen dodajanju nove serije S pomočjo obrazca za dodajanje serije (prikazan na sliki 5.4) imamo zelo preprost nadzor dodajanja. V polje»imdb url«vnesemo povezavo do IMDB-strani s serijo. V»Title«vnesemo vrednost, če želimo dodati naslov, ki se razlikuje od tistega na IMDBju. Enako velja za sliko, le da vnesemo v polje»poster URL«.
Spletna aplikacija za spremljanje podatkov o filmih Stran 18 Po potrditvi vnosov aplikacija pridobi podatke o seriji iz podanega naslova in iz dokumenta HTML izlušči pomembne podatke. Za tem jih aplikacija shrani v podatkovno bazo. 5.1.4.2 Prikaz epizod po sezonah Za lažje iskanje epizod je omogočen prikaz po sezonah. V primeru, da je uporabnik prijavljen, ima na voljo še možnost spreminjanja vrednosti, ali je epizodo pogledal ali ne. Vsaka epizoda je označena s s[prvo število]e[drugo število] kjer je prvo število številka sezone in drugo število zaporedna številka epizode v sezoni. Tak zapis hitrega označevanja številke epizode je zelo pogost med uporabniki spleta in gledalci serij. S klikom na naslov epizode se premaknemo na prikaz podatkov o izbrani epizodi. Slika 5.5: Seznam epizod, razvrščenih po sezonah
Spletna aplikacija za spremljanje podatkov o filmih Stran 19 5.1.4.3 Urejanje uporabnikovih podatkov Kljub vsem podatkom pa bi le-ti bili brez uporabne vrednosti, če jih uporabnik ne bi mogel urejati ali videti. V ta namen je ustvarjena podstran»my data«, kjer lahko uporabnik nastavi osnovne podatke, poda oceno, nastavi status gledanja, nastavi datum začetka in datum zaključka gledanja serije. Možni statusi gledanja serije: watching uporabnik spremlja serijo, completed uporabnik je pregledal celotno serijo, on hold zaradi nevšečnosti ne more spremljati serije, a v prihodnosti načrtuje nadaljevanje ogleda serije, dropped iz različnih razlogov je opustil spremljanje serije in planned uporabnik načrtuje ogled serije. Slika 5.6: Stran z uporabniškimi nastavitvami in odprtim menijem za nastavljanje datuma Na tem mestu je še pomembno poudariti prednost uporabe orodja CoreEngine. Generirana koda HTML s tabelo nastavitev je dolga 72 vrstic, medtem ko je koda CoreEngine za isto spletno stran dolga zgolj 36 vrstic.
Spletna aplikacija za spremljanje podatkov o filmih Stran 20 5.1.4.4 Statistika Vsako serijo spremlja tudi statistika. Le-ta se zaradi potratnosti poizvedb osveži največ enkrat na uro. Med statistiko so uvrščene naslednje kategorije: število uporabnikov, ki ima serijo nastavljeno na»watching«, število uporabnikov, ki ima serijo nastavljeno na»completed«, število uporabnikov, ki ima serijo nastavljeno na»on hold«, število uporabnikov, ki ima serijo nastavljeno na»dropped«, število uporabnikov, ki ima serijo nastavljeno na»planned«, skupno število uporabnikov, ki imajo serijo na seznamu, povprečna ocena serije s strani uporabnikov, grafični prikaz porazdelitve ocen glede na število uporabnikov. Grafični prikaz statistike je narejen s pomočjo CoreEngine gradnika DisplayRatingGraph, ki iz podatkovne baze pridobi podatke o seriji in jih prikaže s sliko, izdelano s pomočjo označevalnega jezika SVG. SVG je označevalni jezik. Namenjen je opisovanju 2D grafičnih aplikacij in slik [4]. Slika 5.7:Grafični prikaz statistike
Spletna aplikacija za spremljanje podatkov o filmih Stran 21 5.2 Namizna aplikacija Namizna aplikacija je Windows 8 Modern UI-aplikacija. Modern UI-aplikacije so namenjene uporabnikom operacijskega sistema Windows 8. Tak tip aplikacij se vedno izvaja v polno zaslonskem načinu. Prikazovanje elementov je relativno, saj operacijski sistem poskrbi za ustrezno skaliranje. Slika 5.8: Izgled prve strani metro aplikacije 5.2.1 Izbira ogrodja Zaradi izbire programskega jezika C# je bila izbira ogrodij za namizno aplikacijo manjša. Na začetku smo se odločali zgolj med Windows Forms in WPF, a pozneje smo v obzir vzeli še Windows 8 Modern UI-aplikacije, ki so na koncu zaradi trenutne aktualnosti in novega operacijskega sistema Windows 8 tudi prevladale. Aplikacije WPF in aplikacije Modern UI so si zelo podobne. Oboje za funkcionalni del uporabljajo C#, za izdelavo uporabniškega vmesnika pa derivat jezika XML, in sicer XAML. Največja razlika je namen. Aplikacije Modern UI so namenjene polnozaslonskemu načinu, kjer ima uporabnik pregleden dostop nad informacijami. Vse Modern UI-aplikacije uporabljajo enak osnoven izgled, ki je predpisan s strani
Spletna aplikacija za spremljanje podatkov o filmih Stran 22 Microsofta. Razlog za to je enostaven. Želijo namreč, da bi se uporabniki v aplikaciji čim prej počutili domače in jih lahko uporabljali brez večjega preučevanja. 5.2.2 Opis ogrodja Za izdelavo namizne aplikacije nismo napisali svojega ogrodja, ampak smo uporabili že obstoječe. WinRT oziroma Windows Runtime služi kot hrbtenica aplikacijam Modern UI. Da niso nadgrajevali tehnologije Avalon, ampak naredili novo tehnologijo, je razlog selitev tudi na arhitekture ARM. Avalon oz. Windows Presentation Foundation predstavlja enoten programski model, namenjen gradnji funkcionalno bogatih aplikacij [5]. Slabost Avalona je, da je zelo težko prenosljiv med arhitekturama Intel in ARM. Aplikacije, spisane v WinRT, lahko uporabljamo brez dodatnih modifikacij tako na arhitekturi ARM kot na Intel. Vse, kar potrebujemo, je novo prevajanje za ustrezno arhitekturo, medtem ko koda aplikacije ostane enaka. Windows Runtime podpira programiranje v naslednjih kombinacijah jezikov: XAML in C#, XAML in C++/CX, XAML in VisualBasic, HTML5, JavaScript in CSS. Odločili smo se za kombinacijo jezikov XAML in C#. Zaradi predhodnih izkušenj z aplikacijami SilverLight in WPF nam tak način programiranja ni bil tuj.
Spletna aplikacija za spremljanje podatkov o filmih Stran 23 Slika 5.9: Primer XAML-kode, uporabljene v aplikaciji 5.2.3 Izgled Microsoft je postavil tudi smernice, kako morajo aplikacije izgledati [6]. Na primer: naslov (»My Tv List«) o 60 pik od zgornjega roba, o 125 pik od desnega roba, podnaslov oziroma naslovi skupin, o 50 pik pod naslovom, o 120 pik od desnega roba, razmik med skupinami je 90 pik. Vse te smernice zagotavljajo podobne aplikacije, v katerih se bodo uporabniki lahko počutili domače, ne glede na to, katero aplikacijo uporabljajo.
Spletna aplikacija za spremljanje podatkov o filmih Stran 24 5.2.4 Funkcionalnost Z dotikom t.i. živih ploščic (»live tiles«) nam aplikacija prikaže nove informacije. Trenuten seznam funkcionalnosti je: pregled naslovov, pregled epizod, pregled izpostavljenih naslovov oz. epizod, pregled najnovejših naslovov oz. epizod, pregled novic, pregled zasebnih sporočil, pregled časovnice izidov naslovov, urejanje osebnih nastavitev. Slika 5.10: Prikaz izpostavljene serije in epizode
Spletna aplikacija za spremljanje podatkov o filmih Stran 25 6 OPTIMIZACIJA Cilj vsake aplikacije je, da deluje in to čim hitreje. Glavni razlog za počasnost aplikacije so lahko zahtevne računske operacije ali neoptimalna koda. Tako spletna kot namizna aplikacija sta bili deležni optimizacije kode. Optimizirana je bila tudi podatkovna baza MySQL, kjer so bile popravljene shranjene procedure. 6.1 Podatkovna baza Podatkovna baza je bila deležna enostavnih optimizacij. Optimizirana je bila tako enostavnost poizvedb kot hitrost. Enostavnost poizvedb je bila optimizirana tako, da so bile vse poizvedbe preseljene v shranjene procedure na strežniku. To zagotavlja enakost vrnjenih podatkov ne glede na to, kje poizvedbe kličemo. Poizvedbe so bile optimizirane s pomočjo odstranjevanja podatkovnih pogledov (»views«). V nekaterih poizvedbah je uporaba podatkovnih pogledov upočasnila hitrost poizvedbe za polovico. 6.2 Spletna aplikacija Tudi optimizacija spletne aplikacije je predstavljala izziv. Kmalu smo našli rešitev, in sicer prenovitev ogrodja, ki sprva ni bilo narejeno za obdelavo bolj kompleksnih in gnezdenih strani. Ko je bilo ogrodje očiščeno, se je lahko začelo delo na optimizaciji kontrol (CoreEngine Control) in kodnih vtičnikov (CoreEngine Addon). Prvi izziv je bilo zmanjšanje porabe pomnilnika, ki ga porabijo kontrole. Rešitev je bila preprosta. Namesto večih primerkov ene kontrole smo ustvarili samo enega. Ta primerek kontrole je pred vsako obdelavo podatkov počistil porabljen pomnilnik kontrole. Za to je bila uporabljena metoda
Spletna aplikacija za spremljanje podatkov o filmih Stran 26 parent::flush(); Z enkratnim nalaganjem kodnih vtičnikov ter uporabo statičnih lastnosti, ki so skupne vsem instancam, se je pospešilo tudi izvajanje. Kljub temu se je aplikacija v nekaterih primerih odzivala relativno počasi. Zelo dober primer je prikaz statistike serije. Tak prikaz je zelo potraten, saj zahteva poizvedbo SQL, analizo podatkov, izračun statistik in generacijo kode SVG za prikaz grafa. Da bi odstranili taka ozka grla, smo dodali začasno shranjevanje podatkov (angleško»data caching«). Le to shrani izpis v datoteko in jo hrani eno uro. Po eni uri se po potrebi podatki osvežijo. To je učinkovito zmanjšalo število poizvedb ter čas obdelave strani. Ozka grla so se še vedno pojavljala v nekaterih specifičnih primerih, npr. prikaz serij. Poizvedba mora najprej pregledati vse serije, nato prešteti vse epizode, za tem pa še prešteti število ogledanih. Ko je s tem končala, je morala rezultate še kategorizirati glede na stanje gledanja. Zaradi velikega števila korakov lahko poizvedba zahteva ogromno časa. V ta namen smo dodali še»poosebljeno«začasno shranjevanje. Le to deluje na podoben način kot navadno začasno shranjevanje podatkov, le da namesto v datotekah hrani podatke v sejah. 6.3 Namizna aplikacija Namizna aplikacija je zasnovana na drugačen način kot spletna aplikacija. Podatkovni sloj sestavljajo trije deli, in sicer: razred, namenjen poizvedbam SQL, razred, namenjen obdelavi in pripravi podatkov in razred, namenjen medpomnjenju podatkov. Ko aplikacija dostopa do podatkov, so dostopi asinhroni, saj nočemo blokirati uporabniškega vmesnika. Aplikacija neposredno ne operira s poizvedbami SQL. To bi bilo zelo nepregledno. Če bi hoteli posodobiti aplikacijo, bi se izkazalo za slabo rešitev. V kodi bi morali iskati in spreminjati poizvedbe SQL. Zaradi enotnosti aplikacij je bolje uporabiti shranjene procedure. Te skrbijo, da vsaka aplikacija prejme ustrezne podatke. Namizna aplikacija uporablja ločen sloj za dostop do podatkovne baze, saj s tem
Spletna aplikacija za spremljanje podatkov o filmih Stran 27 zmanjšamo število pisanj poizvedb v kodi. Večje kot je število poizvedb v višjih slojih kode, več je možnosti, da pride do napake. Taka napaka lahko povzroči napačen prikaz podatkov. Slika 6.1: Prikaz delovanja podatkovnega sloja Kot je razvidno iz slike 6.1, je podatkovni sloj neke vrste črna škatla, s pomočjo katere aplikacija dostopa do podatkov. V podatkovnem sloju se izvajajo SQLpoizvedbe, rezultate le teh obdela vmesni sloj, medpomnilnik pa določene podatke hrani dlje časa ali pa celo trajno. Medpomnilnik, tako kot v PHP-spletni aplikaciji, služi za shrambo podatkov. Medpomnjenih podatkov ni potrebno vsakič osveževati, saj se ne spreminjajo pogosto. Tak primer so recimo slike. 6.4 Rezultati optimizacije Razlike v hitrosti zaradi optimizacije so najbolj opazne v spletni aplikaciji, zato smo na njej izvedli tudi meritve. Za meritve smo uporabili vgrajeno funkcijo ogrodja CoreEngine. Rezultate smo pridobili na naslednji način. Stran smo naložili 1000-krat. Potem smo odstranili 10 najvišjih in najnižjih vrednosti. S tem smo se izognili anomalijam v meritvah.
Spletna aplikacija za spremljanje podatkov o filmih Stran 28 Spletna stran, ki smo jo preizkušali, je vsebovala 10 zaporednih izrisov grafa ocen za serijo z identifikatorjem 1 (serija»terra Nova«). Meritve smo opravili: pred optimizacijo podatkovne baze, po optimizaciji podatkovne baze, po optimizaciji porabe pomnilnika CoreEngine Control in po vključitvi medpomnilnika. Rezultati meritev: Povprečni čas (sekunde) Meritev 0,148 Pred optimizacijo podatkovne baze 0,079 Po optimizaciji podatkovne baze 0,057 Po optimizaciji porabe pomnilnika CoreEngine Control 0,021 Po vključitvi medpomnilnika Slika 6.2: Prikaz rezultatov meritev 0,16 0,14 0,12 0,1 0,08 0,06 0,04 0,02 0 Pred optimizacijo podatkovne baze Grafični prikaz rezultatov meritev Po optimizaciji podatkovne baze Po opzimizaciji porabe pomnilnika CoreEngine Control Po vključitvi medpomnilnika Čas (sekunde) Slika 6.3: Grafični prikaz rezultatov meritev
Spletna aplikacija za spremljanje podatkov o filmih Stran 29 7 ZAKLJUČEK V diplomskem delu smo si ogledali ogrodja za izdelavo spletnih aplikacij s pomočjo programskega jezika PHP in izbrali lastno ogrodje. Prav tako smo si ogledali ogrodja za izdelavo namiznih aplikacij in izbrali ogrodje za izdelavo aplikacij Modern UI. Uspešno smo izdelali tako spletno kot aplikacijo Modern UI in se pri tem izpopolnili na področju programskih jezikov PHP in XAML. Uporabili smo podatkovno bazo MySQL. Enotnost poizvedb SQL smo rešili s pomočjo shranjenih procedur. Pri implementaciji smo upoštevali smernice dobrega programiranja. Obe aplikaciji, spletna in namizna, sta zato enostavni ter z ustrezno dokumentacijo. S pomočjo modularnosti je poskrbljeno za razširljivost aplikacij. Za izdelavo aplikacije PHP smo uporabili phpdesigner 7 podjetja mpsoftware, različice 7.2.5, za preizkušanje in razhroščevanje pa spletni brskalnik Google Chrome. Prednost orodja phpdesigner je močna podpora objektni kodi, kar je zaradi dinamičnosti in mehke tipizacije programskega jezika PHP zelo dobrodošla lastnost. Za Google Chrome smo se odločili zaradi tega, ker ga uporabljamo kot privzeti brskalnik in ker ima vgrajena zelo uporabna in močna orodja za razvijalce. Kot strežnik smo uporabili predpripravljen strežnik XAMPP različice 1.7.7. Programski jezik PHP je bil različice 5.3.8, strežnik Apache HTTP je bil različice 2.2.21, različica strežnika MySQL pa 5.5.16. Za nadzor in dostop do podatkovne baze smo uporabljali orodje Navicat Premium različice 10.0.10. Za razvoj namizne aplikacije smo uporabili Microsoft Visual Studio 2011 beta, ki je bil zagnan v operacijskem sistemu Windows 8 Consumer Preview. Ko smo aplikaciji izdelali, smo nekaj časa namenili še optimizaciji. Največji preskok v hitrosti delovanja je bil po optimizaciji podatkovne baze. Povprečna hitrost prikaza strani je padla iz 0,148 sekunde na 0,079 sekunde. Manjši preskok v hitrosti delovanja se je pojavil po optimizaciji porabe pomnilnika ogrodja CoreEngine. Povprečen čas je padel na 0,057 sekunde. Ko smo v ogrodju CoreEngine uporabili medpomnilnik, se je povprečni čas prikaza strani zmanjšal na 0,021 sekunde. Skupno je to prineslo približno sedemkratno pohitritev.
Spletna aplikacija za spremljanje podatkov o filmih Stran 30 Aplikacije se vedno razvijajo, saj se spreminjajo tudi uporabniki. Na spletnih straneh moramo prikazovati vedno več podatkov in nuditi čim več funkcionalnosti. Tako spletna kot namizna aplikacija imata veliko možnosti za spremembe in nadgradnje. V nadaljnjem delu bi lahko dodali možnost diskusije o naslovih oziroma epizodah. Druga možnost je razširitev aplikacije z integracijo spletnega foruma.
Spletna aplikacija za spremljanje podatkov o filmih Stran 31 VIRI, LITERATURA [1] http://www.imdb.com/stats [2] http://www.princeton.edu/~achaney/tmve/wiki100k/docs/lexical_analysis.html [3] http://en.wikipedia.org/wiki/lexical_analysis [4] http://www.w3.org/graphics/svg/ [5] http://msdn.microsoft.com/en-us/library/ms754130.aspx [6] http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx [7] M. Praznik, T. Welzer-Družovec: Optimizacija podatkovne baze : diplomska naloga visokošolskega strokovnega študijskega programa. Univerza v Mariboru, Fakulteta za elektrotehniko, računalništvo in informatiko: 2003. [8] J.D. Meier, S. Vasireddy, A. Babbar, A. Mackman: Improving. NET Application Performance and Scalability. Microsoft Corporation, 2004. [9] Matt Zandstra: PHP Objects, Patterns, and Practice, Third edition. Apress, 2010. [10] http://en.wikipedia.org/wiki/windows_presentation_foundation [11] http://en.wikipedia.org/wiki/xml [12] http://en.wikipedia.org/wiki/xaml [13] http://en.wikipedia.org/wiki/document_object_model [14] http://en.wikipedia.org/wiki/parsing [15] http://php.net/ - opisi PHP funkcij [16] http://msdn.microsoft.com/ - opisi razredov in metod v.net okolju
Spletna aplikacija za spremljanje podatkov o filmih Stran 32 PRILOGE Seznam slik Slika 4.1: Potek razčlenjevanja... 5 Slika 4.2: Vhodni niz po leksikalni analizi... 6 Slika 4.3: Primer drevesa na stavku x = 12 + 3 * ( 4 2 ) 1;... 6 Slika 4.4: Drevo, zgrajeno na stavku x = 12 + 3 * ( 4 2 );... 7 Slika 4.5: Primer DOM-drevesa... 8 Slika 5.1: Pozdravna stran spletne aplikacije... 14 Slika 5.2: Primer kode strani, napisane v ogrodju CoreEngine... 16 Slika 5.3: Predloga spletne strani... 17 Slika 5.4: Obrazec, namenjen dodajanju nove serije... 17 Slika 5.5: Seznam epizod, razvrščenih po sezonah... 18 Slika 5.6: Stran z uporabniškimi nastavitvami in odprtim menijem za nastavljanje datuma... 19 Slika 5.7:Grafični prikaz statistike... 20 Slika 5.8: Izgled prve strani metro aplikacije... 21 Slika 5.9: Primer XAML-kode, uporabljene v aplikaciji... 23 Slika 5.10: Prikaz izpostavljene serije in epizode... 24 Slika 6.1: Prikaz delovanja podatkovnega sloja... 27 Slika 6.2: Prikaz rezultatov meritev... 28 Slika 6.3: Grafični prikaz rezultatov meritev... 28
Spletna aplikacija za spremljanje podatkov o filmih Stran 33 Naslov študenta Simon Cedula Kajžar 59 2275 Miklavž pri Ormožu Telefon: 031-516-865 e-mail: simon.cedula@uni-mb.si ali simon.cedula@gmail.com Kratek življenjepis Rojen: 12. 05. 1989 na Ptuju Šolanje: Osnovno šolanje sem začel na Osnovni šoli Miklavž pri Ormožu leta 1996 in ga leta 2004 z odliko in srebrnim odlikovanjem občine Ormož za posebne dosežke tudi končal. Šolanje sem nadaljeval na Ekonomski šoli Ptuj v Šolskem centru Ptuj, kjer sem leta 2008 zaključil srednješolsko izobrazbo in maturo s prav dobrim uspehom. Moje trenutno šolanje poteka na Univerzi v Mariboru na Fakulteti za elektrotehniko, računalništvo in informatiko, po programu računalništvo in informacijske tehnologije, kjer trenutno zaključujem šolanje na 1. bolonjski stopnji.
Spletna aplikacija za spremljanje podatkov o filmih Stran 34
Spletna aplikacija za spremljanje podatkov o filmih Stran 35
Spletna aplikacija za spremljanje podatkov o filmih Stran 36