David Zakelšek SPLETNA PODPORA UČENJU MATEMATIKE Diplomsko delo Maribor, september 2013

Transkripcija

1 David Zakelšek Diplomsko delo Maribor, september 2013

2 Diplomsko delo Študent: Študijski program: Smer: Mentor: Lektorica: David Zakelšek Univerzitetni študijski program Informatika in tehnologije komuniciranja Informacijski sistemi doc. dr. Matej Šprogar Špela Drevenšek, dipl. sloven. (UN) I

3 II

4 ZAHVALA Zahvaljujem se mentorju doc. dr. Mateju Šprogarju za pomoč, vodenje in napotke pri opravljanju diplomskega dela. Zahvaljujem se tudi svoji punci Tamari za podporo pri pisanju diplomske naloge. Posebna zahvala velja staršem, ki so mi omogočili študij in mi stali ob strani ter me z veliko mero razumevanja spodbujali na študijski poti. III

5 Spletna podpora učenju matematike Ključne besede: spletna učilnica, PHP, Warpit UDK: :[ :51](043.2) Povzetek V diplomskem delu predstavljamo spletno aplikacijo, ki nudi podporo učenju. Omejili smo se na področje matematike, ki zajema srednješolsko literaturo. Aplikacija ni namenjena le srednješolcem, ampak tudi učiteljem in inštruktorjem, saj jo lahko vključijo v učni proces. Namen spletne rešitve je trženje svojih storitev v zameno za plačilo. Vsebina diplomske naloge zajema preučevanje že obstoječih rešitev, predstavitev tehnologij, ki so omogočile izdelavo spletne strani, ter opis postopka izgradnje od analize zahtev do predstavitve in uporabe posameznih komponent. Prav tako so predstavljeni problemi, na katere smo naleteli v fazi razvoja. IV

6 Web based math tutoring Key words: virtual classroom, PHP, Warpit UDK: :[ :51](043.2) The purpose of this thesis is to introduce and represent a web application that offers help and support in the learning process. We limited ourselves to the field of literature that encompasses high school literature mathematics. The application is not meant to be used only by high school students but also by teachers and instructors as it can be integrated into the learning process. The purpose of the web solution is to market your own services in exchange for payment. The content of this thesis includes the study of already existing solutions, the presentation of the technology that enabled the creation of the website and the description of its formation from the analysis of demands to the presentation and use of the individual components. The thesis also includes explanations of problems that occurred during the phase of development. V

7 KAZALO 1 UVOD UPORABLJENE TEHNOLOGIJE HTML JavaScript CSS Apache PHP MySQL Warpit RAZVOJ SPLETNE APLIKACIJE Analiza zahtev Analiza obstoječih rešitev Wolfram E-UM Načrtovanje Vrste uporabnikov Funkcionalnosti Podatkovna baza Izdelava in strukturiranje nalog v sistemu Warpit Integracija sistema Warpit Plačilni sistem Implementacija PROBLEMI IN REŠITVE Internet Explorer Dinamično določanje velikosti elementa iframe VI

8 4.3 Dvojna prijava Dinamičen prikaz nalog UPORABA SPLETNE APLIKACIJE Prikaz in reševanje nalog Profil uporabnika Profil administratorja Paketi in plačilni sistem SKLEP VIRI IN LITERATURA VII

9 KAZALO SLIK SLIKA 2.1: PRIMER HTML ELEMENTOV... 2 SLIKA 2.2: PRIKAZ TROSLOJNE ARHITEKTURE... 4 SLIKA 2.3: PRIMER IZVAJANJA PHP KODE... 6 SLIKA 2.4: PRIKAZ UPRAVLJANJA PODATKOVNE BAZE... 8 SLIKA 2.5: SISTEM WARPIT... 9 SLIKA 3.1: SPLETNA STRAN WOLFRAM SLIKA 3.2: SPLETNA STRAN E-UM SLIKA 3.3: DIAGRAM PRIMEROV UPORABE SLIKA 3.4: E-R DIAGRAM SPLETNE STRANI SLIKA 3.5: E-R DIAGRAM SISTEMA WARPIT SLIKA 3.6: DREVESNA STRUKTURA PODATKOV SLIKA 3.7: PRIMER IZDELANIH OBRAZCEV SLIKA 3.8: UPORABNIŠKI VMESNIK ZA IZDELAVO OBRAZCEV SLIKA 3.9: STRUKTURA NALOG PRIKAZANA NA STANI SLIKA 3.10: GRAFIČNI UPORABNIŠKI VMESNIK SLIKA 5.1: PREGLED NALOG PO KATEGORIJAH SLIKA 5.2: PRIKAZ REŠEVANJA NALOG SLIKA 5.3: PROFIL UPORABNIKA SLIKA 5.4: PROFIL ADMINISTRATORJA SLIKA 5.5: PAKETI ČLANSTVA SLIKA 5.6: PLAČEVANJE PREKO PAYPAL VIII

10 SEZNAM KRATIC HTTP NCSA CGI SSI PHP HTML SQL AJAX SGML DHTML DOM URL Hyper Text Transfer Protocol National Center for Supercomputing Applications Comon Gateway Interface Server Side Includes PHP: Hypertext Preprocessor Hyper Text Markup Language Structure Query Language asynchronous JavaScript and XML Standard Generalized Markup Language Dynamic Hyper Text Markup Language Document Object Model Uniform Resource Locator IX

11 1 UVOD Z razvojem svetovnega spleta so se vsi vidiki našega življenja postopoma preselili nanj. V zadnjem času se to dogaja tudi z učenjem, ki ni več omejeno samo na učbenike in delovne zvezke, ampak so dobili učenci možnost, da svoje znanje pridobijo, preizkusijo ali razširijo tudi na svetovnem spletu. V tujini je že kar nekaj spletnih strani, ki so namenjene učenju in pridobivanju znanja. Zaradi slabe podpore v slovenskem prostoru smo se odločili za izdelavo spletne aplikacije, ki bo učencem v Sloveniji omogočila hitro in enostavno pot do novega znanja. V sklopu diplomske naloge smo izdelali spletno stran, na kateri lahko uporabnik rešuje naloge, s katerimi utrjuje ali pridobiva novo znanje. Naloge smo omejili na področje matematike. Učenje preko spleta je lažje, hitrejše ter učinkovitejše. Uporabniki spletne aplikacije takoj ugotovijo, če je njihova rešitev pravilna, prav tako jih čaka tudi razlaga na enostaven in razumljiv način, ki je iz učbenika ne dobijo pri čisto vsaki nalogi. Naloge, ki jih ponuja spletna stran, zajemajo snov srednjih šol in so torej namenjene predvsem učencem srednjih šol. V ciljno skupino spadajo tudi učitelji in inštruktorji, ki jo lahko uporabljajo v učnem procesu. Za lažji razvoj je pomembna dobra izbira primernih tehnologij, s pomočjo katerih bomo lahko dosegli zadane zahteve. V ospredju je uporabniško prijazen grafični vmesnik, ki mora zagotoviti dobro uporabniško izkušnjo. Cilj naše naloge je izdelati spletno stran, ki bo nudila svoje storitve v zameno za plačilo. Uporabnik bo moral za dostop do vseh storitev zakupiti željen paket, s katerim si bo pridobil dostop za določen čas. V diplomskem delu bomo predstavili tehnologije za izdelavo spletne strani in sistem Warpit, katerega funkcionalnosti bomo uporabili v kombinaciji z našo spletno stranjo. Preučili smo nekatere že obstoječe spletne učilnice in pridobili smernice za razvoj. Sledi predstavitev poteka izgradnje spletne strani, od analize zahtev in načrtovanja do implementacije in uporabe sistema. Predstavili bomo tudi nekatere probleme, ki so se pojavili v postopku izdelave spletne strani in načine, kako smo jih prebrodili. 1

12 2 UPORABLJENE TEHNOLOGIJE 2.1 HTML HTML (ang. Hyper Text Markup Language) je označevalni jezik, ki ponuja nabor oznak za izgradnjo spletne strani. Je osnova spletnega dokumenta. Z njim določimo strukturo naše spletne strani ter ji dodamo semantičen pomen [17]. Prikaz teh tekstovnih dokumentov nam omogočajo spletni brskalniki (Mozilla, Chrome, Internet Explorer itd.) Oznake v HTML jeziku spletnemu brskalniku povedo, kako naj prikaže spletno stran. Vsaka označevalna oznaka se imenuje element. Večina elementov pride v parih, ki kažejo, kdaj se določen zaslonski učinek začne in kdaj zaključi, kot prikazuje slika 2.1 [6]. Slika 2.1: Primer HTML elementov Tim Berners-Lee je leta 1990 iznašel označevalni jezik HTML, ko je bil zaposlen na inštitutu CERN. Povod za razvoj je bil počasen in zapleten način izmenjavanja dokumentov med znanstveniki v CERN-u. Do tedaj to ni bilo mogoče storiti preko interneta, ampak je bilo mogoče uporabljati le skrivne ukaze za prenos preprostih tekstovnih sporočil. Za osnovo je bil uporabljen jezik SGML (ang. Standard Generalized Markup Language). Prvi javno dostopen dokument z opisom HTML je izšel leta Vseboval je osemnajst elementov, ki predstavljajo začetno in razmeroma preprosto osnovo jezika HTML. Pripomogel je k hitremu razvoju svetovnega spleta. Nekaj let po prvotni izdaji sta bili uradno izdani različici HTML 2.0 in HTML 3.0, ki sta precej razširili označevalni jezik. Leta 1996 je HTML 3.2 postal standard [20]. Zadnja različica, ki še je trenutno v razvoju, je HTML 5. Ta različica prinaša dodatne elemente, poenostavlja delo programerjev, zmanjšuje potrebo po vtičnikih, kot je Flash itd. Podprt je na vseh napravah, zelo priljubljen postaja tudi na mobilnih napravah in tablicah [13]. 2

13 2.2 JavaScript JavaScript je skriptni programski jezik, ki je namenjen za pomoč pri gradnji interaktivnih spletnih strani. Razvilo ga je podjetje Netscape leta Jezik je neodvisno razvit od programskega jezika Java, a si kljub temu delita nekatere skupne strukture in lastnosti. Vgradimo ga lahko direktno v HTML, stran pa poživi z dinamičnim izvajanjem [3]. JavaScript je skriptni jezik, ki se izvaja na strani odjemalca, v našem primeru je to brskalnik. Ob prenosu spletne strani na stran odjemalca se JavaScript naloži v spletni brskalnik in se tam izvaja. Namen jezika je spreminjanje uporabniškega vmesnika, brez potrebnega vmesnega koraka, da pošlje informacije strežniku in jih prejme. Odjemalec (brskalnik) prebere in implementira JavaScript kodo, ki nam lahko procesira podatke, in vrne rezultate brez povezave na strežnik. Ta proces omogoča hitrejši prikaz podatkov uporabniku brez dodatne obremenitve strežnika [16]. Z JavaScript lahko preprosto in hitro spreminjamo uporabniški vmesnik in procesiramo nekatere podatke brez obremenitve strežnika. Njegova šibka točka je dostopanje do zunanjih virov podatkov, bodisi na lokalnem računalniku ali strežniku [18]. JQuery je JavaScript knjižnica, ki vsebuje vnaprej pripravljene JavaScript funkcije. S klici posameznih funkcij te knjižnice lahko na stran enostavno dodamo veliko animacij, efektov in vizualnih učinkov, za katere bi drugače porabili veliko časa. Omogoča nam tudi izmenjavo podatkov s strežnikom s pomočjo AJAX (ang. asynchronous JavaScript and XML) zahtevkov. JQuery nam rešuje težave s spletnimi brskalniki, saj se ista stvar v različnih brskalnikih implementira drugače. Če JQuery podpira brskalnik, dobimo s klicem ene funkcije enake rezultate na vseh podprtih brskalnikih, JQuery pa poskrbi za posamezno implementacijo. Kombinacija JavaScripta in knjižnice JQuery omogoča razvoj določenih funkcionalnosti na strani odjemalca in urejanje uporabniškega vmesnika [5]. 2.3 CSS Cascading Style Sheets (CSS) je preprosti slogovni jezik, ki določa videz spletne strani v brskalniku. S pomočjo pravil lahko definiramo stil HTML elementov in določimo, kako naj se na strani prikažejo. Določamo lahko lastnosti, kot so hiperpovezave, barve, pozicije, 3

14 odmiki in še mnogo drugih atributov. Uporabniku omogoča tudi nadzor nad aktivnostmi, ki se izvajajo na strani (npr. kurzor miške prekrije element) [22]. Namen CSS je predvsem ločevanje vsebine in pravil obnašanja spletne strani od njene predstavitve, kot prikazuje slika 2.2. Ta ločitev zmanjša kompleksnost strani, poveča fleksibilnost, nadzor nad specifikacijo lastnosti, predvsem pa poskrbi za večjo preglednost in olajša urejanje stilov. Velikost kode se namreč z uporabo istih predlog na več straneh zelo zmanjša, manjše pa je tudi ponavljanje kode [19]. Slika 2.2: Prikaz troslojne arhitekture [20] Dandanes imamo na voljo ogromno različnih brskalnikov in ker trenutno ne obstaja enotni CSS standard za vse brskalnike in prikazovalnike, to predstavlja poseben izziv, saj vsak brskalnik prikazuje spletno stran malce drugače. CSS omogoča rešitev težave, saj lahko za vsak brskalnik posebej napišemo svojo predlogo, s čimer poskrbimo, da se spletna 4

15 stran v različnih brskalnikih prikaže pravilno. Predloge lahko oblikujemo tudi za različne prikazovalnike, kot so mobilne naprave, tablice, konzole [1]. 2.4 Apache Apache je danes prepoznan kot najpopularnejši HTTP (ang. Hyper Text Transfer Protocol) strežnik. Je uveljavljen standard za distribucijo storitev spletne strani, ki je dal začetni zagon širjenju svetovnega spleta. Je odprtokodna strežniška platforma, ki nam zagotavlja dostopnost večine aktivnih spletnih strani. Strežnik danes služi mnogim priljubljenim platformam in informacijskim sistemom, kot so Unix, Windows, Solaris, Mac OS itd. [7]. Prvo različico spletne programske opreme strežnika Apache je ustvaril Robert McCool, ki je z NCSA (ang. National Center for Supercomputing Applications) sodeloval na projektu HTTPD. McCool je leta 1994 zapustil NCSA in pričel z razvojem Apache strežnika. Strežnik je razvijalo približno dvajset programerjev, ki so se imenovali 'Apache group'. Postal je prva alternativa NCSA spletnemu strežniku. Aprila leta 1996 je Apache prevzel vlogo kot najpopularnejši HTTP strežnik na svetu. Ob koncu leta 2007 je na Apache strežniku gostovalo približno 48% vseh spletnih strani [10]. Leta 2009 je postal prvi strežnik, ki je gostoval več kot sto milijonov spletnih strani [21]. Apache je odprtokoden produkt, podobno kot operacijski sistem Linux. Njegova izvorna koda je javno dostopna, kar pomeni, da lahko vsakdo prilagodi strežnik za svoje potrebe. Obstaja tudi velika javna knjižnica z Apache dodatki [9]. Danes obstaja veliko modulov, ki so bili ustvarjeni za Apache strežnik in ki podpirajo različne skripte ter omogočajo dinamične vsebine, ki se izvajajo na strežniku. Zato se lahko strežnik pohvali s široko paleto zmogljivosti, npr. omogoča podporo za CGI (ang. Comon Gateway Interface), standardni protokol za komunikacijo z zunanjo aplikacijo, strežnik SSI (ang. Server Side Includes) ter preprost strežniški skriptni jezik. Ti moduli se namestijo že med inštalacijo. Kasneje lahko strežniku dodajamo dinamične module [7]. 5

16 2.5 PHP PHP (ang. PHP: Hypertext Preprocessor) je strežniški programski jezik, ki je namenjen izdelavi dinamičnih spletnih aplikacij. Spada med najbolj priljubljene skriptne jezike, saj je odprtokoden in brezplačen. S PHP kodo lahko obogatimo svojo spletno stran. Ob vsakem obisku strežnika nam generira HTML in ostalo strukturo strani, ki jo vidi uporabnik [12]. Slika 2.3 prikazuje izvajanje in delovanje PHP kode. Slika 2.3: Primer izvajanja PHP kode [2] Leta 1994 je bila uradno izdana prva različica PHP-ja, ki je bila rezultat dela Ramusa Lerdorfa. Prva verzija je bila pisana v programskem jeziku Perl in je bila namenjena beleženju obiskov na njegovi spletni strani. V letu 1997 je bila izdana druga različica, imenovana 'PHP/FI 2.0', ki je bila nameščena na domenah [11]. Istega leta sta Andi Gutmans in Zeev Suraski prevzela razvoj PHP-ja. Junija 1998 je bila izdana verzija PHP 3.0. Nova verzija je podpirala objektno programiranje in jo je bilo moč 6

17 namestiti na različne platforme. Priljubljenost je naraščala in leta 1998 je PHP uporabljalo spletnih strani [11]. Kmalu po izdaji PHP 3.0 sta se pričela Andi Gutmans in Zeev Suraski ukvarjati z razvojem novejše različice. Njun cilj je bil izboljšati modularnost kode in izvedbo pri kompleksnejših aplikacijah. Leta 2000 je bila izdana različica PHP 4.0, ki jo je poganjalo novo jedro, imenovano 'Zend Engine'. Izboljšana je bila podpora strežnikom in večja zmogljivost [11]. Zadnja verzija PHP 5 je bila izdana julija 2004, poganja pa jo Zend Enigine 2.0. Najnovejša verzija je bila istega leta nameščena na več kot 17 milijonov domen po vsem svetu [11]. 2.6 MySQL MySQL je hiter in robusten sistem za upravljanje z relacijskimi podatkovnimi bazami. Podatkovna baza nam omogoča učinkovito shranjevanje, iskanje, sortiranje in pridobivanje podatkov. Za nadzor podatkov skrbi MySQL strežnik, ki avtoriziranim uporabnikom omogoča enostaven in učinkovit dostop do podatkov. Lahko deluje kot samostojen podatkovni strežnik ali pa v kombinaciji z ostalimi tehnologijami. Uporabnik lahko upravlja podatkovno bazo preko grafičnega vmesnika (MyAdmin, MySQL Front) ali preko ukazne vrstice. Poizvedbe v podatkovni bazi MySQL se vršijo s strukturiranim poizvedovalnim jezikom SQL (ang. Structure Query Language) [8]. Leta 1995 je MySQL razvilo švedsko podjetje MySQL AB. Uporabljena razvojna jezika sta bila C in C++. Je svetovno najbolj priljubljena odprtokodna podatkovna baza, in sicer po zaslugi hitrosti delovanja, zanesljivosti, nenehnem razvoju in prilagojenosti. Nameščena je na več kot 8 milijonov sistemov in je podprta na več kot 20 operacijskih sistemih [15]. MySQL ima integrirane funkcionalnosti, preko katerih omogoča PHP-ju dostop do podatkovne baze, kot je razvidno na sliki 2.4. Tako smo naši spletni aplikaciji dodali shrambo podatkov in omogočili dinamično generiranje tekstovne vsebine v spletni aplikaciji. Omogoča tudi posodobitve podatkovne baze in interakcijo z uporabniki v realnem času [4]. 7

18 Slika 2.4: Prikaz upravljanja podatkovne baze [14] Nekatere lastnosti, ki kažejo prednosti podatkovne baze MySQL: visoka zmogljivost, vmesnik do različnih podatkovnih sistemov, objektno orientirana podpora, je brezplačna, variabilnost, dostop do izvorne kode. 2.7 Warpit Warpit je informacijski sistem, ki nudi podporo anketiranju. Z njim lahko enostavno izdelamo kompleksen vprašalnik in preko njega ankete tudi izpolnjujemo. Ponuja enostaven uporabniški vmesnik, kot prikazuje slika 2.5. Omogoča nam tudi nadzor, pregled in razne statistike nad rešenimi anketami. Sistem je zgrajen na JavaScript ogrodju Ext JS, ki je namenjeno izdelavi interaktivnih spletnih strani z uporabo tehnik, kot so AJAX, DHTML (ang. Dynamic HTML) in DOM (ang. Document Object Model). V našem primeru bomo sistem Warpit uporabili kot osnovni mehanizem za izgradnjo in prikaz nalog. 8

19 Slika 2.5: Sistem Warpit 9

20 3 RAZVOJ SPLETNE APLIKACIJE 3.1 Analiza zahtev V sklopu analize zahtev smo pričeli z zbiranjem podatkov in zahtev naročnika. Izdelati bo potrebno spletno stran za učenje, kjer bodo lahko uporabniki pridobivali in utrjevali svoje znanje. Glavni namen je prenos procesa učenja na splet. Spletna aplikacija bo omogočala reševanje nalog različnih tipov in zvrsti. Na željo naročnika se bomo osredotočili na naloge matematične zvrsti. Spletno učenje prinaša nov in enostaven način pridobivanja znanja. Stran bo uporabnikom zraven reševanja nalog nudila tudi pomoč pri reševanju. Omejili smo se na matematične naloge, ki zajemajo srednješolski nivo. S tem smo tudi določili, da so dijaki in osebe zaposlene v izobraževalnem sektorju naša ciljna skupina. Sistem Warpit in spletna učilnica sta ločeni aplikaciji, ki sta medsebojno neodvisni. Izdelava in prikaz nalog bosta potekala preko sistema Warpit, zato bo med aplikacijama potrebno izdelati povezavo, ki bo spletni strani omogočala dostop do posameznih nalog ter njihov prikaz. Prijavljen uporabnik bo imel dostop do celotnega nabora nalog, s katerimi bo lahko nadgrajeval svoje znanje. Zraven reševanja nalog bo imel uporabnik pregled nad svojimi transakcijami in možnost urejanja profila. Nadzor spletne strani bo potekal preko administrativnega centra. Ta bo administratorju omogočal pregled in nadzor uporabnikov ter transakcij spletne strani. Spletna stran bo storitve nudila v zameno za plačilo. Najprej bo potrebno določiti način, kako bo spletna aplikacija tržila svoje storitve. Izbrati bo potrebno načine plačila, ki bodo podprti na spletni strani. Zaradi trženja storitev se je pojavila zahteva po preprečevanju možnosti, da se preko enega uporabniškega računa prijavi več oseb hkrati. Na strani bo potrebno implementirati funkcionalnost, ki bo nadzorovala prijave uporabnikov, in bo preko enega uporabniškega računa dovoljevala le enega prijavljenega uporabnika. 10

21 Izdelati bo potrebno uporabniško prijazen grafični vmesnik, ki bo omogočal dobro uporabniško izkušnjo. Grafični vmesnik mora biti pregleden in enostaven za uporabo, saj bo spletna stran namenjena tudi uporabnikom z nižjo stopnjo informacijske pismenosti. V vseh pomembnejših spletnih brskalnikih (Mozilla, Chrome, Opera, Internet Explorer), mobilnih napravah in na tablicah se mora prikazovati pravilno. Aplikacija bo izdelana za komercialno uporabo in bo dostopna na spletu. Izdelana bo po zahtevah naročnika. 3.2 Analiza obstoječih rešitev V analizo smo vključili tudi pregled obstoječih rešitev. Podrobneje smo preučili spletni aplikaciji Wolfram ( in E-UM ( Analizirali smo strukturo posamezne strani, način prenosa novega znanja na uporabnika in prijaznost uporabniškega vmesnika Wolfram Wolfram je spletna aplikacija, pri kateri uporabnik vnese enačbo, za katero želi dobiti rešitev (slika 3.1). V ozadju ima močne in zahtevne algoritme, s katerimi izračuna zahtevano enačbo. Omogoča tudi ogled postopka korak po korak, torej kako smo prišli do rešitve. Za to dodatno funkcionalnost moramo biti prijavljeni. Zahtevni algoritmi aplikacije Wolfram omogočajo računanje različnih enačb. Naloge na naši spletni strani bodo pripravljene vnaprej, zato algoritmi za računanje niso potrebni. Za hiter izračun naključne enačbe se spletna aplikacija Wolfram izkaže kot boljša izbira. V primeru pridobivanja novega znanja pa bo imela naša stran nekatere prednosti. Naloge na naši strani bodo kategorizirane po področjih in si bodo sledile od lažje proti težji. Uporabniku tudi ni potrebno iskati primerov nalog za reševanje, saj so naloge že izdelane vnaprej. Aplikacija Wolfram prikazuje vmesne rezultate, ki uporabnika vodijo do pravilnega rezultata. Naša stran bo prikazala celoten postopek, kako nalogo pripeljati od začetka do konca. S tem načinom lahko uporabnika hitreje pripeljemo do novega znanja. V postopku so vključeni tudi grafični prikazi in besedna razlaga, s katero bomo pripomogli k poenostavitvi učnega procesa in pridobivanju novega znanja. 11

22 Slika 3.1: Spletna stran Wolfram E-UM E-UM je spletna stran, ki je osredotočena na učenje matematike. Zajema snov osnovnih in srednjih šol. Zraven matematike vsebuje še nekatera poglavja iz fizike, kemije in biologije, kot je razvidno iz slike 3.2. Na spletni strani lahko najdemo gradivo za posamezno snov, rešujemo naloge ali mini teste. Spletna stran zajema velik obseg snovi. Ponuja tudi teoretična gradiva in reševanje mini testov. Naloge so strukturirane v kategorije. Podobno strukturo nalog bo vsebovala naša spletna aplikacija. Za pravilno delovanje strani in za prikaz animacij, ki omogočajo reševanje nalog, mora uporabnik na svoj računalnik namestiti dodatno programsko opremo, kot je Java in Flash Player. Takšne zahteve lahko uporabnika odvrnejo od uporabe aplikacije, zato bo naša stran delovala brez dodatnih programov in namestitev. Optimalno delovanje spletne strani lahko dosežemo v brskalniku Mozilla, medtem ko bo naša spletna stran podprta v vseh večjih brskalnikih. Pri reševanju nalog se na ekran izpišejo vse naloge izbrane kategorije, kar na ekranu povzroči zmedo. Širina okvirja, v katerem se prikazujejo naloge, je fiksna in je zato potrebno za ogled celotne naloge premikanje drsnika levo in desno. Grafični uporabniški vmesnik naše spletne strani bo uporabniško prijaznejši in enostavnejši za uporabo. Naloge bomo prikazovali postopoma 12

23 eno po eno. S tem bo uporabnik namenil pozornost posamezni nalogi, ki bo predstavljena na ekranu. Zaradi lažje preglednosti in berljivosti bomo uporabili večjo velikost pisave. Slika 3.2: Spletna stran E-UM 3.3 Načrtovanje Pri načrtovanju je največji izziv predstavljala tranzicija, kako učenje preseliti na splet. Definirati je bilo potrebno način, kako uporabniku nazorno prikazati naloge ter mu omogočiti enostavno reševanje. Zaradi želje naročnika smo se omejili na matematične naloge, ki zajemajo snov srednjih šol. Stran bo v splošnem zasnovana kot e-učilnica, ki bo podpirala naloge različnih tipov in s tem omogočala tudi izdelavo ter reševanje nalog iz drugih področij (npr. fizika, biologija, kemija, itd.). Naloge bodo uporabniku ponujene v paketih, s katerimi bo lahko hitro in enostavno pridobil novo znanje. Zaradi preglednosti in lažjega iskanja nalog bodo te združene v kategorije glede na področje in težavnostno stopnjo. Sistem Warpit bo skrbel za izdelavo in prikaz nalog na naši spletni strani. Izdelati je bilo potrebno načrt, kako vzpostaviti komunikacijo med aplikacijama, ki sta med seboj neodvisni in imata vsaka svojo podatkovno bazo. Določiti je bilo potrebno način izdelave 13

24 nalog v sistemu Warpit in njihove strukture, ki bo služila za kategorizacijo nalog. Med aplikacijama smo definirali način komunikacije, preko katere bo spletna stran od sistema Warpit pridobivala podatke o nalogah in jih prikazovala. Veliko pozornosti smo namenili določitvi najprimernejšega načina prikaza nalog za reševanje. Želeli smo izdelati povezavo, ki ne bo po nepotrebnem obremenjevala strežnika in nam bo omogočala nadzor ter spremembe nad prikazom posamezne naloge. Dobro uporabniško izkušnjo lahko zagotovi le dober uporabniški vmesnik. Izbrati je bilo potrebno očem prijazne barve, ki se med seboj ujemajo in uporabnika ne odvrnejo od uporabe spletne strani. Velikost teksta na posameznih straneh smo morali določiti tako, da je bila vsebina enostavno berljiva in pomembnejše besedilo izpostavljeno. Pozornost je predvsem padla na izdelavo strukture spletne strani. Najtežje je bilo določiti porazdelitev strani. Stran mora biti enostavna, pregledna in zapolnjena. Kadar uporabnik rešuje nalogo, mora ta zavzemati večinski del ekrana, drugi gradniki pa morajo biti manj vidni in nemoteči. Stran bo ponujala storitve v zameno za plačilo. Definirali smo način, kako bo spletna stran tržila svoje storitve. Uporabnik bo imel za nakup na voljo več paketov. Vsak zakupljen paket bo uporabniku dodelil časovni interval, v katerem bo imel dostop do vseh nalog in nekaterih dodatnih storitev. Uporabnik bo imel na izbiro dve plačilni metodi, in sicer PayPal in nakazilo na transakcijski račun. Zaradi vprašanja o zagotovitvi dodatne varnosti na strani smo preučili dokumentacijo plačilnih sistemov. Ugotovili smo, da niso potrebni dodatni varnostni ukrepi, saj se odgovornost o pravilni izvedbi transakcije prenese na aplikacijo plačilnega sistema. 3.4 Vrste uporabnikov Spletna učilnica ima tri vrste uporabnikov: neregistriran uporabnik, ki ima na voljo omejen nabor funkcionalnosti, spozna in preizkusi lahko delovanje spletne strani, registriran uporabnik, ki ima na voljo razširjen nabor funkcionalnosti za pridobivanje novega znanja, administrator, ki ima dostop do funkcionalnosti administrativnega profila. 14

25 3.5 Funkcionalnosti Naš sistem zajema tri akterje, ki imajo dostop do različnih funkcionalnosti sistema. Slika 3.3 nam prikazuje povezavo med funkcionalnostmi sistema in akterji, ki se nahajajo znotraj sistema. Slika 3.3: Diagram primerov uporabe Zraven zgoraj prikazanih funkcionalnosti sistem onemogoča prijavo večih uporabnikov hkrati preko enega uporabniškega računa. V primeru dvojne prijave sistem uniči sejo uporabnika in ga odjavi iz sistema (funkcionalnost je podrobneje opisana v poglavju 4.3). 15

26 3.6 Podatkovna baza Podatkovno bazo spletne strani sestavlja šest tabel (slika 3.4). Med implementacijo sistema smo podatkovno bazo prilagajali glede na potrebe funkcionalnosti. Opisali bomo le zahtevnejše tabele in njihove povezave. Osrednja tabela, imenovana '_uporabnik', shranjuje osnovne informacije o uporabniku ter atribute, ki služijo kot zastavice za določeno stanje. Pri povezavi s tabelo '_paket_info' se pojavi vmesna tabela z imenom '_paket', kjer se beležijo zakupljeni paketi uporabnikov. Tabela '_user_session' beleži vsako sejo prijavljenega in neprijavljenega uporabnika. V tabeli se beležijo podatki o času prihoda na stran, času prijave, času odjave, uspešnosti prijave in veljavnosti seje. S pomočjo tabele lahko nadziramo promet na strani ter ugotavljamo dvojne prijave. Slika 3.4: E-R diagram spletne strani 16

27 Sistem Warpit ima svojo podatkovno bazo, ki je ločena od podatkovne baze spletne strani. Zaradi obsežnosti podatkovne baze bomo predstavili le ključne tabele, ki so potrebne za izgradnjo nalog. Pri vsakem poglavju se ustvarijo štiri tabele, v katerih je zajeta vsebina in struktura nalog posameznega poglavja. Primer je prikazan iz poglavja 'koreni' na sliki 3.5. Tabela 'koreni_tree' določa strukturo nalog. Iz te tabele lahko razberemo, kako si po vrstnem redu sledijo naloge ter katera je prva in zadnja naloga. Tabela 'koreni' vsebuje podatke o nalogi. Določa tudi njeno logiko izvajanja. Vsebuje veliko število atributov, ki služijo kot zastavice in filtri za izvajanje nalog. Posamezna naloga je sestavljena iz 3 do 5 obrazcev in s pomočjo ustvarjenih pogojev sistem prikazuje obrazce glede na izbran rezultat uporabnika. Tabela 'koreni_script' omogoča shranjevanje JavaScript kode, ki se izvede ob izvajanju posamezne naloge. Tabela 'koreni_language' shranjuje vso tekstovno vsebino naloge, ki nam omogoča tudi izdelavo nalog v več jezikih. Slika 3.5: E-R diagram sistema Warpit 17

28 3.7 Izdelava in strukturiranje nalog v sistemu Warpit Naloge, ki jih bo uporabnik lahko reševal na naši spletni strani, bodo izdelane v sistemu Warpit. Ta ponuja enostaven uporabniški vmesnik za izdelavo in strukturiranje nalog. Uporabnikom sistema lahko tudi dodelimo pravice za dostop do posameznih funkcionalnosti. Sprva smo se lotili strukturiranja nalog v kategorije. Posamezne naloge bodo združene v poglavja, več poglavij pa bo predstavljalo letnik srednje šole. Zaradi velikega števila nalog v vsakem poglavju smo ta razdelili še na podpoglavja. Dobili smo drevesno strukturo, kot je prikazana na sliki 3.6. To strukturo smo prenesli v sistem Warpit. Ta omogoča izdelavo projektov (v našem primeru nalog). Določimo lahko, kateri projekt pripada kateri kategoriji. Posamezne kategorije pa lahko združimo v nadkategorijo in tako pridobimo zadano drevesno strukturo. Slika 3.6: Drevesna struktura podatkov Vsaka naloga je sestavljena iz večih obrazcev, ki bodo uporabniku omogočali postopek reševanja. Kot prikazuje slika 3.7, bo vsaka naloga sestavljena iz najmanj treh obrazcev. Prvi bo predstavil nalogo, podal besedilo naloge in omogočal vnosna polja za vpis ali izbiro rešitve. Kadar uporabnik izbere pravilen odgovor, ga sistem preusmeri na naslednjo nalogo. V primeru nepravilnega odgovora se uporabniku prikaže drugi obrazec, ki mu ponudi možnost, da ponovno poskusi reševanje ali si ogleda postopek reševanja naloge z razlago. Tretji obrazec mu predstavi postopek za rešitev naloge, če uporabnik izbere to možnost. 18

29 Slika 3.7: Primer izdelanih obrazcev Za vsak obrazec je potrebno definirati videz in vsebino. To nam omogoča enostaven uporabniški vmesnik sistema Warpit, ki je prikazan na sliki 3.8. Vsaka vrstica na sliki predstavlja en obrazec, ki je razdeljen na štiri dele. Na vrhu je predstavitveni del, kamor lahko zapišemo napotke in opombe naloge. Osrednji del je namenjen za vprašanja in vnosna polja, ki predstavljajo nalogo. Na koncu obrazca je legenda, ki lahko vsebuje dodatna pojasnila naloge. Velikost obrazca se dinamično prilagaja glede na zajeto vsebino. Vnesenemu tekstu lahko določamo velikost, stil pisave in barvo. V obrazec lahko zraven teksta vključimo tudi slike in video vsebine, kar razširi možne načine izdelave nalog. Sistem omogoča za vpis rezultata različne tipe vnosnih polj, ki omogočajo vpis rešitve ali izbiro med ponujenimi odgovori. Slika 3.8: Uporabniški vmesnik za izdelavo obrazcev Pri izdelavi obrazcev se avtomatsko kreirajo povezave med njimi in te določajo vrstni red prikaza. Povezave lahko spremenimo in določimo preskoke med obrazci. To dosežemo tako, da dodamo obrazcu pogoje, ki so vezani na podan odgovor uporabnika. Glede na izveden pogoj pa lahko določimo, kateri bo naslednji prikazan obrazec. Na ta način lahko določimo preskoke med obrazci glede na podan odgovor. 19

30 3.8 Integracija sistema Warpit Sistem Warpit bo prevzel nalogo kreiranja in prikazovanja nalog na naši spletni strani. Vzpostaviti bo potrebno komunikacijo in prenos podatkov med spletno aplikacijo in sistemom Warpit. Aplikaciji bosta nameščeni na istem strežniku, vendar sta medsebojno neodvisni in imata ločeni podatkovni bazi. Prvotno smo se lotili prikaza nabora nalog na spletni strani. Podatkovna baza sistema Warpit vsebuje tabelo '_projecttree', kjer je shranjena celotna struktura nalog in kategorij. Kategorije na vrhu drevesa predstavljajo letnike srednje šole. Kadar uporabnik odpre stran za reševanje nalog, se pokliče funkcija, ki dostopa do podatkovne baze sistema Warpit. Iz tabele '_projecttree' pridobi kategorije, ki predstavljajo letnike, in jih izpiše na ekran. Ob izbiri letnika stran pokliče funkcijo, ki iz enake tabele pridobi kategorije in podkategorije izbranega letnika ter jih prikaže na strani. Na ta način smo izdelali povezavo za pridobivanje strukture nalog iz sistema Warpit in prikaz nabora nalog na spletni strani, kot prikazuje slika 3.9. Slika 3.9: Struktura nalog prikazana na strani Za reševanje nalog na spletni strani je bilo potrebno vzpostaviti komunikacijo med aplikacijama. Ta nam bo omogočala prikaz obrazcev na naši spletni strani, ki smo jih kreirali v sistemu Warpit. Vsaka naloga, ki je shranjena v sistemu Warpit, ima določen enolični identifikator, ki ga za vsako nalogo pridobimo že s funkcijo za prikaz nalog na naši spletni strani. Warpit omogoča kreiranje naloge na zahtevo druge aplikacije. Zunanja aplikacija mora poznati URL (ang. Uniform Resource Locator) sistema Warpit ter enolični identifikator naloge, da lahko pošlje zahtevo. Na strani bomo izdelali funkcijo, ki bo 20

31 sestavila URL iz dveh delov. Prvi del je lokacija sistema; v našem primeru je na enakem strežniku kot spletna stran. Drugi del vsebuje parameter, v katerem bo zapisan enolični identifikator naloge. S tem sestavljenim URL-jem lahko naša spletna aplikacija pošlje zahtevo za nalogo sistemu Warpit. Ko Warpit sprejme zahtevo od zunanje aplikacije, zgradi nalogo in ji v obliki HTML dokumenta vrne prvi obrazec naloge. Vrnjen dokument prikažemo na strani s pomočjo elementa iframe. Ta omogoča prikaz HTML dokumenta znotraj drugega HTML dokumenta. Ko uporabnik rešuje nalogo, je povezava ves čas vzpostavljena. Ob vsaki potrditvi obrazca se pošlje nova zahteva sistemu Warpit. Ta pridobi podatke, ki jih je vnesel uporabnik in jih analizira. Glede na pogoje, ki smo jih ustvarili pri vsakem obrazcu, sistem primerja vrnjen rezultat in določi, kateri je naslednji obrazec za prikaz. Tega ponovno kreira in ga pošlje nazaj na stran. Izmenjava poteka, dokler uporabnik rešuje nalogo. Med reševanjem se izmenjujejo podatki med brskalnikom uporabnika in sistemom Warpit, saj se spreminja le vsebina elementa iframe. S tem se tudi zmanjša obremenitev strežnika. Povezava se prekine, ko uporabnik preneha z reševanjem. 3.9 Plačilni sistem Spletna stran namerava svoje storitve tržiti, zato smo morali razviti plačilni sistem. Na strani bomo podprli dva načina plačila, to sta PayPal in nakazilo na transakcijski račun. Uporabnik bo imel za nakup na voljo več paketov, s katerimi si bo za določen časovni interval pridobil dostop do vseh nalog, ki jih ponuja spletna stran. V primeru, da uporabnik izbere možnost nakazila na transakcijski račun, se uporabniku prikažejo podatki računa, na katerega mora izvesti nakazilo. Ko je nakazilo izvedeno in potrjeno, se uporabniku dodeli zakupljen paket, o tem pa je obveščen tudi preko svojega elektronskega naslova. Za plačilo preko plačilnega načina PayPal bomo uporabili njihov spletni vmesnik. Za tovrsten način plačila mora imeti uporabnik PayPal račun. Vmesnik deluje na principu črne škatle. Mi vmesniku pošljemo ustrezne podatke, ki zajemajo opis paketa, njegovo ceno ter nekatere unikatne identifikatorje. Ob izbiri tega plačilnega načina se vmesniku pošljejo ti podatki in izvede se preusmeritev na njihovo stran. Uporabnik nadaljuje s plačilnim procesom na njihovi strani, ki omogoča izvedbo transakcije preko PayPala. V primeru 21

32 uspešne ali neuspešne transakcije se izvede preusmeritev na našo spletno stran. Ob uspešno izvedeni transakciji uporabniku dodelimo zakupljen paket in ga obvestimo o uspešnosti transakcije. V nasprotnem primeru pa ga opozorimo, da je bila transakcija neuspešna. Podatki, ki se prenašajo, morajo biti skriti pred uporabnikom, prav tako se morajo ustvariti tik preden se izvede prenos podatkov Implementacija Razvoj spletne aplikacije se je pričel z namestitvijo razvojnega okolja Zend Studio. Zanj smo se odločili zaradi dobre podpore PHP okolja in preprostega vmesnika, ki nam omogoča hiter in enostaven razvoj. Preučili smo dokumentacijo javanske knjižnice JQuery, kjer so nas predvsem zanimale funkcionalnosti, ki so vezane na AJAX. Dodatno preučevanje je bilo potrebno zaradi vpeljave plačilnega sistema PayPal. Izdelati je bilo potrebno grafični uporabniški vmesnik, ki se pravilno prikazuje v vseh spletnih brskalnikih, mobilnih napravah in tablicah. Zaradi pomanjkanja izkušenj in znanja na področju prilagajanja grafičnega vmesnika za mobilne naprave in tablice smo za izdelavo najeli zunanjega izvajalca. Ta je izdelal grafično predlogo in osnovno strukturo spletne aplikacije po naših načrtih (slika 3.10). V tem času smo na strežniku izdelali podatkovno bazo in namestili sistem Warpit. 22

33 Slika 3.10: Grafični uporabniški vmesnik Pripravljen uporabniški vmesnik smo namestili na strežnik in pričeli z izdelavo funkcionalnosti. Prvotno smo izdelali posamezne podstrani ter logiko za navigacijo in prikaz posameznih strani. Vsebina na strani se menjuje, medtem ko ostala navigacija, ki se nahaja v glavi in nogi, ostaja nespremenjena. Za izmenjavo podatkov smo izbrali metodo POST, ki prenaša podatke v ozadju. Po vzpostavitvi osnovne logike strani smo izdelali metode, ki omogočajo dostop do podatkovne baze, ter pričeli z implementacijo funkcionalnosti, kot so prikaz novic, prijava in registracija. Največji izziv je predstavljala vzpostavitev komunikacije med spletno aplikacijo in sistemom Warpit. V sistemu smo morali omogočiti dostopnost za zunanje aplikacije in določiti strukturo ter pravila za izdelavo nalog. Na strani smo izdelali metode, ki bodo omogočale komunikacijo s sistemom Warpit. S temi metodami smo omogočili pridobivanje nalog in njihove strukture ter prikaz vseh nalog na spletni strani. Dodali smo tudi povezavo, preko katere pridobiva spletna aplikacija obrazce od sistema Warpit, in z njimi izvaja reševanje nalog. 23

34 Nadaljevali smo z izdelavo profilne strani uporabnika, na kateri lahko uporabnik spreminja svoje osebne podatke, zamenja geslo ali pregleda zgodovino zakupljenih paketov. Za nadzor spletne strani smo implementirali center za administratorja. Ta omogoča dodajanje in urejanje uporabnikov, dodajanje paketov uporabniku ter dodajanje in urejanje novic na spletni strani. V tej fazi smo implementirali tudi nekaj manjših funkcionalnosti, kot je pošiljanje uporabniškega mnenja in pozabljeno geslo. Spletna stran bo ponujala svoje storitve v zameno za plačilo, zato smo implementirali plačilni sistem. Izdelali smo pakete za zakup časovnega intervala, s katerim lahko uporabnik dostopa do vseh nalog. Za nakazilo preko transakcijskega računa smo na strani pripravili potrebne podatke. Ob potrjenem plačilu administrator aktivira paket uporabniku. Več truda smo vložili pri implementaciji plačila preko PayPala. Uporabili smo njihov spletni vmesnik. V primeru izbire tega plačilnega načina uporabnika preusmerimo na njihovo stran. Ta poskrbi za izvedbo transakcije in zanjo prevzame odgovornost. Po končanem postopku njihov vmesnik pošlje povratne informacije o uspešnosti transakcije in uporabnika preusmeri nazaj na našo stran. 24

35 4 PROBLEMI IN REŠITVE V fazi implementacije smo ugotovili nekatere nepravilnosti in probleme, ki smo jih morali razrešiti. V nadaljevanju je predstavljenih nekaj problemov ter načini, kako smo jih razrešili. 4.1 Internet Explorer Pri izgradnji grafičnega uporabniškega vmesnika spletne strani so se pojavili problemi prikazovanja spletne stran v Internet Explorerju. Brskalnik je v primerjavi z drugimi brskalniki znan po slabi podpori določenih CSS elementov. Zato je bilo potrebno posebej izdelati CSS dokument za brskalnik Internet Explorer. Ta dokument deduje osnovni CSS dokument in priredi lastnosti elementov tako, da je prikaz v brskalniku pravilen. Spletna stran prepozna brskalnik in mu posreduje CSS dokument, ki bo omogočil pravilen prikaz. Pri izboljšavi smo se omejili na novejše različice brskalnika Internet Explorer. 4.2 Dinamično določanje velikosti elementa iframe Iframe je HTML element, preko katerega prikazujemo naloge, ki nam jih posreduje sistem Warpit. Prvotno smo s statično vrednostjo določili višino in širino elementa. Pri prvem testiranju smo ugotovili, da se naloge glede na velikost precej razlikujejo. Nekatere zajemajo delček ekrana, medtem ko se druge raztezajo preko celotnega ekrana. Če nastavimo statično višino na maksimum, vsebuje stran veliko praznega prostora. Ugotovili smo, da predstavlja problem višina elementa iframe, medtem ko lahko širina ostane statično določena. Višino moramo spreminjati vsakič, ko nam sistem Warpit posreduje nov obrazec. To smo dosegli s pomočjo poslušalca 'onload', ki zazna vsak nov obrazec, ki je poslan od sistema Warpit. S pomočjo knjižnice JQuery smo pridobili višino poslanega obrazca in elementu iframe določili primerno višino za prikaz obrazca. 4.3 Dvojna prijava Zaradi trženja storitev naše spletne strani se je pojavilo vprašanje, kako onemogočiti prijavo več uporabnikov hkrati preko enega uporabniškega računa. Odločili smo se, da bomo problem rešili preko nadzora uporabniških sej. V podatkovni bazi smo ustvarili 25

36 tabelo 'user_session', v katero shranjujemo vse seje uporabnikov. Seja hrani podatke o uporabniku, vsebuje časovne značke prijave in odjave ter nekatere atribute, ki služijo kot zastavice za neko stanje. Zastavici, ki sta tukaj pomembni, sta 'validity' in 'logged_in'. Ob uspešni prijavi uporabnika se na obeh zastavicah postavijo vrednosti na 1. Ko se uporabnik odjavi ali mu poteče seja, zastavica 'logged_in' spremeni vrednost na 0. Kadar je uporabnik prijavljen in se drugi uporabnik prijavi na stran z enakim uporabniškim računom, se uporabniku, katerega seja že obstaja dlje časa, postavi vrednost zastavice 'validity' na 0. Ob vsaki uporabniški zahtevi se preverja 'validity' uporabniške seje. V primeru, da ima vrednost 0, se uporabniku uniči seja in se mu izpiše opozorilo, da se je na spletno stran preko istega uporabniškega računa prijavil nekdo drug. Ko uporabnik rešuje naloge, njegov brskalnik komunicira samo s sistemom Warpit, ki ne preverja seje uporabnika iz spletne strani. Zato smo na strani za reševanje nalog implementirali števec, ki vsake toliko časa pošlje zahtevo na strežnik in preveri veljavnost seje uporabnika. 4.4 Dinamičen prikaz nalog Posamezne naloge, ki se prikazujejo na spletni strani, se izdelujejo v sistemu Warpit. Ob vsaki shranjeni spremembi v sistemu Warpit se mora sprememba poznati tudi na naši spletni strani. Ta povezava predstavlja težavo, saj sta aplikaciji medsebojno neodvisni. Problem smo rešili tako, da smo spletni strani omogočili dostop do tabele '_ProjectsTree' v podatkovni bazi sistema Warpit. V tej tabeli je shranjena struktura nalog v drevesni obliki. Pomemben atribut v tabeli je 'is_sup' in 'is_leaf'. Atribut 'is_sup' določa starša, ki mu pripada zapis, medtem ko atribut 'is_leaf' določa, ali je zapis list v drevesni strukturi. V primeru, da atribut 'is_sup' zavzame vrednost 0, je ta zapis na vrhu drevesne strukture in predstavlja letnik srednje šole. Zapisi, ki predstavljajo področja nalog, imajo vrednost atributa 'is_leaf' postavljeno na 0 in vrednost atributa 'is_sup' je večja od 0. Zapisi, ki imajo atribut 'is_leaf' postavljen na vrednost 1, pa predstavljajo naloge posameznega področja. 26

37 5 UPORABA SPLETNE APLIKACIJE 5.1 Prikaz in reševanje nalog Uporabnik ima možnost reševanja različnih nalog. Slika 5.1 prikazuje stran, kjer si lahko uporabnik izbere nalogo za reševanje. Te so strukturirane po letnikih, poglavjih in podpoglavjih. Najprej izbere željen letnik, na podlagi katerega se mu prikažejo poglavja. Večja poglavja so razdeljena še na podpoglavja, ki vsebujejo nabor nalog za učenje določene snovi. Slika 5.1: Pregled nalog po kategorijah Ko uporabnik izbere želeno nalogo, je preusmerjen na stran za reševanje nalog. Naloge so si različne po tipu reševanja. Pri nekaterih nalogah izbiraš med ponujenimi odgovori, pri drugih pa sam vnašaš podatke. Vsebino naloge sestavlja navodilo, vnosna polja in gumb za potrditev, kot je razvidno iz slike 5.2. Uporabnik vpiše ali izbere rezultat in če je 27

38 ta pravilen, ga sistem o tem obvesti in mu prikaže naslednjo nalogo. V primeru, da izbere napačen odgovor, pa mu sistem ponudi možnost za ponovitev poskusa ali ogled postopka za reševanje naloge. Uporabnik navigira med nalogami, ki jih lahko izbere iz seznama nalog. Slika 5.2: Prikaz reševanja nalog 5.2 Profil uporabnika Registrirani uporabniki imajo možnost urejanja profila. Tukaj lahko uporabnik ureja svoje osebne podatke ter spreminja geslo, kot je razvidno iz slike 5.3. Uporabnik ima tudi možnost, da se prijavi ali odjavi za prejemanje elektronskih novic. Na profilni strani lahko 28

39 uporabnik pregleda zgodovino nakupov, kjer je tudi zabeležen datum poteka zakupljenega paketa. Iz profilne strani lahko uporabnik tudi opravi nakup novega paketa. Slika 5.3: Profil uporabnika 5.3 Profil administratorja Zaradi potrebe po nadzoru uporabnikov in vsebine na spletni strani smo izdelali profil za administratorja (slika 5.4), do katerega ima dostop le skrbnik strani. Tukaj imamo pregled nad uporabniki, lahko jih dodajamo, jim urejamo profil ali jim blokiramo uporabniški račun. Profil omogoča tudi dodajanje paketov uporabnikom in urejanje novic na strani. 29

40 Slika 5.4: Profil administratorja 5.4 Paketi in plačilni sistem Plačilni sistem omogoča nakup paketov, ki uporabniku omogočajo dostop do vseh nalog. Izdelali smo tri različne pakete, s katerimi lahko uporabnik pridobi dostop. Vsak paket vsebuje informacije o ceni in časovnem intervalu dostopa, kar prikazuje slika 5.5. Kadar se uporabnik odloči za nakup, najprej izbere paket. Potem se zgodi preusmeritev na stran, kjer uporabnik izbere vrsto plačila. V primeru, da izbere nakup preko transakcijskega računa, se mu prikaže stran z vsemi podatki o računu. Ob poravnanem računu mu skrbnik sistema aktivira račun. Druga omogočena plačilna vrsta je PayPal. V tem primeru se uporabnika preusmeri na njihovo spletno stran. Tam se uporabniku izpišejo vsi podatki o paketu, kot je razvidno na sliki 5.6. Uporabnik na strani nadaljuje postopek do izvedbe transakcije. Po izvedeni transakciji uporabnika preusmerimo nazaj na našo spletno stran. 30

41 Slika 5.5: Paketi članstva Slika 5.6: Plačevanje preko PayPal 31

42 6 SKLEP Učenje na spletu je dandanes zelo v porastu, saj se mnogi zavedajo prednosti, ki jih prinaša. Učenci imajo na primer hitrejši dostop do znanja, prihranijo lahko denar, saj ni potrebno kupovati dodatnih knjig in učbenikov ali plačevati inštruktorja, samostojno lahko obnavljajo znanje. V zelo kratkem času pridobijo povratno informacijo o svojem znanju, prav tako lahko snov grafično, slikovno, filmsko in glasovno opremimo, zaradi česar je njihovo učenje intenzivnejše in tudi zanimivejše. Prav tako so si mladi dandanes veliko bliže z računalnikom in spletom kot pa s knjigami. V začetku diplomske naloge smo predstavili tehnologije, ki smo jih uporabili pri razvoju spletne aplikacije. Izbira tehnologij je bil prvi veliki korak v procesu izdelave strani. Nekaj časa smo porabili za preučevanje posameznih tehnologij, da smo ugotovili, katere tehnologije omogočajo izvedbo zastavljenih ciljev. Zahtevnejše tehnologije smo za lažje razumevanje predstavili s slikovnimi prikazi delovanja. Sledil je proces izdelave spletne strani. Pričeli smo z analizo zahtev naročnika in preučevanjem že obstoječih konkurenčnih rešitev. Določili smo funkcionalnosti in akterje spletne strani. Iz analize smo razbrali tudi potrebo po razvoju plačilnega sistema. Zaradi pomanjkanja izkušenj z vključevanjem plačilnih sistemov v spletne aplikacije smo nekaj časa namenili preučevanju tega področja. Ugotovili smo, da ima večina plačilnih sistemov svoj vmesnik, ki ga lahko uporabimo za izvedbo transakcije. Po analiziranju zahtev smo se lotili izdelave načrta podatkovne baze in posameznih funkcionalnosti. Določili smo osnovno strukturo in barve uporabniškega vmesnika. Največ časa smo namenili načrtovanju povezave med sistemom Warpit in našo spletno stranjo, ki sta med seboj neodvisna. Analizi zahtev in načrtovanju smo namenili tretjino celotnega časa izdelave sistema. Zavedali smo se, da s temeljito analizo in dobro pripravljenim načrtom pridemo hitreje do želenega cilja. Drugi sklop opisuje implementacijo spletne strani. Predstavili smo izdelavo grafičnega uporabniškega vmesnika in postopno izdelavo funkcionalnosti. Podrobno je opisana izdelava nalog v sistemu Warpit in povezava med aplikacijama, ki omogoča prikaz nalog na spletni strani. Predstavili smo tudi probleme, ki so se pojavili v fazi izdelave, in njihove rešitve. V zadnjem sklopu je prikazano delovanje aplikacije, kjer smo opisali in predstavili pomembnejše funkcionalnosti. 32

43 Izdelava spletne aplikacije je dinamičen proces, ki se ne zaključi. Po končanem procesu izdelave je potrebno aplikacijo vzdrževati. V tej fazi skrbimo za njeno pravilno in neprekinjeno delovanje. Velikokrat se pojavijo potrebe po izboljšavah in razširitvah. Komponente in funkcionalnosti spletne aplikacije smo zasnovali tako, da omogočajo enostavne spremembe ter enostavno vpeljavo novih funkcionalnosti v sistem. 33

44 7 VIRI IN LITERATURA [1] Module for hosting, [Elektronski]. Available: [Poskus dostopa ]. [2] T. A. S. Foundation, Apache, [Elektronski]. Available: [Poskus dostopa ]. [3] Webopedia, [Elektronski]. Available: [Poskus dostopa ]. [4] T. A. S. Foundation, Apache Commons, [Elektronski]. Available: [Poskus dostopa ]. [5] L. T. Luke Welling, PHP and MySQL Web Development, Indianapolis: Sams Publishing, [6] T. P. Group, PHP, [Elektronski]. Available: [Poskus dostopa ]. [7] Petra, e-uspeh, [Elektronski]. Available: [Poskus dostopa ]. [8] P. DuBois, MySQL Cookbook, Cambridge: O'Reilly Media, [9] roseindia, [Elektronski]. Available: [Poskus dostopa ]. [10] javascripter, [Elektronski]. Available: [Poskus dostopa ]. [11] J. Pollock, JavaScript: A Beginner's Guide, San Franciscio: McGraw Hill Professional,