SPLETNA APLIKACIJA ZA UČENJE SLOVENŠČINE

Transkripcija

1 UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO Aleksander Thomas Weingerl SPLETNA APLIKACIJA ZA UČENJE SLOVENŠČINE Diplomsko delo Maribor, september 2017

2 SPLETNA APLIKACIJA ZA UČENJE SLOVENŠČINE Diplomsko delo Študent: Študijski program: Mentor: Somentor: Lektorica: Aleksander Thomas Weingerl Visokošolski strokovni študijski program Računalništvo in informacijske tehnologije doc. dr. Borko Bošković red. prof. dr. Janez Brest Lucija Hrženjak, prof. slov. in biol.

3 i

4 Zahvala Zahvaljujem se mentorju doc. dr. Borku Boškoviću, in somentorju prof. dr. Janezu Brestu za pomoč in vodenje pri diplomskem delu. Prav tako se zahvaljujem za podporo in pomoč svoji družini, punci in prijateljem. ii

5 Spletna aplikacija za učenje slovenščine Ključne besede: slovenščina, spletna aplikacija, tehnologija ASP.NET, WebForms UDK: : (043.2) Povzetek: V okviru diplomskega dela je bila implementirana spletna aplikacija za učenje slovenščine. V teoretičnem delu je predstavljena tehnologija ASP.NET Web Forms in izpostavljene so njene prednosti ter slabosti. Posebni poudarek je na dinamičnosti aplikacije in na možnosti prilagajanja oziroma spreminjanja vsebine, kar lahko opravi uporabnik z določenim statusom. Naloge so v aplikaciji organizirane hierarhično. iii

6 Web application for learning slovene language Key words: slovene, web application, technology ASP.NET, WebForms UDK: : (043.2) Povzetek: Within this thesis we implemented a web application for learning Slovene language. In the theoretical part we presented the ASP.NET Web Forms technology and highlighted its advantages and disadvantages. Special attention was placed on the dynamics of the application itself and enabled to customize and modify the content from a user with a certain status itself. Exercises in the application are organized hierarchically. iv

7 KAZALO VSEBINE 1. UVOD SORODNA DELA UPORABLJENE TEHNOLOGIJE NAČRTOVANJE APLIKACIJE IMPLEMENTACIJA APLIKACIJE TESTIRANJE ODZIVNOSTI SKLEP v

8 KAZALO SLIK Slika 2.1: E-učenje slovenščine Slika 2.2: Aplikacija Devetka.net Slika 2.3: Aplikacija Thatquiz Slika 3.1: Hierarhija komponent ogrodja.net Slika 3.2: Povezava odjemalec strežnik Slika 3.3: Razvojni model ASP.NET MVC Slika 3.4: Datoteka.aspx Slika 3.5: Datoteka.cs Slika 3.6: Uporabniški vmesnik Visual Studio Slika 4.1: Diagram primerov uporabe Slika 4.2: Razredni diagram Slika 4.3: ER diagram Slika 5.1: Lastnost IsPostBack Slika 5.2: Registracija Slika 5.3: Koda za prijavo v aplikacijo Slika 5.4: Pogled učenec Slika 5.5: Prikaz podpoglavja izbrane snovi Slika 5.6: Koda shrani postavitev v bazo Slika 5.7: Prikaz naloge Slika 5.8: Urejanje podatkov naloge Slika 5.9: Pregled rezultatov s statusom učitelj Slika 6.1: Test odzivnosti pri 20 zahtevah Slika 6.2: Test odzivnosti pri 200 zahtevah vi

9 UPORABLJENE KRATICE ASP Active Server Pages Aktivne strežniške strani - Odprtokodno ogrodje za implementacijo strežniških aplikacij. AJAX Asynchronous JavaScript and XML Asinhroni JavaScript in XML - Spletna razvojna tehnika za ustvarjanje interaktivnih spletnih aplikacij. ASPX Active Server Page Extension Strežniška razširjena datoteka - Končnica za datoteke ustvarjene v ogrodju.net WebForms. CSS Cascading Style Sheets Kaskadne stilske podloge - Skrbijo za prezentacijo spletnih strani. HTML HyperText Markup Language Označevalni jezik Za izdelavo spletnih strani. HTTP HyperText Transfer Protocol Komunikacijski protokol Glavni protokol za prenos informacij na spletu. HTTPS HyperText Transfer Protocol Secure Varnejši komunikacijski protokol Zavarovana različica HTTP, ki za šifriranje uporablja SSL in TLS. MVC Model View Controller Model, pogled, krmilnik Razvojni model ogrodja ASP.NET. SQL Structured Query Language Strukturiran povpraševalni jezik Standardni jezik za delo s podatkovnimi bazami. vii

10 SSL Secure Socket Layer Kriptografski protokol Omogoča varno komunikacijo na medmrežju. TLS Transport Layer Security Naslednik kriptografskega protokola SSL Nekoliko izboljšana varnost za komunikacijo na medmrežju v primerjavi s SSL. URL Uniform Resource Locator Enolični krajevnik vira Naslov spletne strani v svetovnem spletu. XML Extensible Markup Language Razširljiv označevalni jezik Podoben jezik kot HTML, ki omogoča format za opisovanje strukturiranih podatkov. viii

11 1. UVOD Danes so elektronske naprave vseprisotne tako doma, v službi kot tudi v šoli. Lahko jih uporabljamo za delo, komunikacijo ali za krajšanje časa, lahko pa tudi za učenje, saj jim je mlajša populacija bolj naklonjena kot klasičnim učbenikom ali zvezkom. Veliko šol zato vedno bolj uvaja spletna gradiva, saj se je ta način izkazal prijazen učiteljem, učencem in tudi staršem. Cilj diplomskega dela je bil implementirati spletno aplikacijo v ogrodju ASP.NET WebForms, ki bo dinamična in bo omogočala zanimivo učenje slovenščine skozi različne naloge in snovi. Diplomsko delo je razdeljeno na dva dela: na teoretičnega in praktičnega. V teoretičnem delu diplomskega dela smo proučili podobne spletne aplikacije. Opisali smo izbrano razvojno okolje in izbrano ter uporabljeno ogrodje, vključno z razvojnim modelom. V praktičnem delu smo na osnovi ugotovitev iz pregledanih aplikacij nato implementirali našo aplikacijo in jo pozneje tudi testirali. Glavna težava, s katero smo se soočili pri aplikaciji, je bila dinamičnost, saj smo hoteli doseči prilagodljivost nalog in vsebin ter posledično tudi stalno ažurnost. Oboje bo lahko uporabnik z določenim statusom oziroma v našem primeru učitelj urejal oziroma nastavljal sam, kar se nam zdi zelo pomembno in uporabno. V nasprotnem primeru oziroma v primeru statičnih nalog aplikacija ni smiselna za večkratno uporabo. S tem smo dosegli, da bo lahko aplikacija oziroma njena vsebina kadarkoli prirejena določeni težavnosti ali pa ji bodo podani specifični primeri nalog, ki jih izbere učitelj. V drugem poglavju smo predstavili nekaj sorodnih aplikacij in izpostavili njihove prednosti ter slabosti. V tretjem poglavju smo opisali ogrodje ASP.NET in njegova razvojna modela ASP.NET WebForm, ki smo ga pozneje tudi uporabili pri implementaciji in ASP.NET MVC. Načrtovanje aplikacije, razvoj zamisli in funkcionalnosti smo opisali v četrtem poglavju, v petem poglavju pa postopki implementacije, prikaz uporabljenih gradnikov, logika in oblika aplikacije ter opis funkcionalnosti, ki smo jim namenili posebno pozornost. 1

12 2. SORODNA DELA Preden začnemo z implementacijo želene aplikacije, je dobro predhodno raziskati sorodna dela. Na spletu je že moč najti tudi nekaj spletnih aplikacij za učenje slovenščine. Te smo primerjali z našo rešitvijo in nato navedli ugotovljene prednosti ter slabosti. E-UČENJE SLOVENŠČINE Aplikacija e-učenje slovenščine je del obsežnejše zbirke nalog, ki ne zajema samo predmeta slovenščina. Aplikacija je dobro podprta s slikami in zaobjema naloge v dveh skupinah, kot lahko vidimo na sliki 2.1. V prvem delu od 1. do 5. razreda in v drugem od 6. do 9. razreda osnovne šole. Aplikacija je sestavljena kot nekakšna zbirka nalog in povezav na že implementirane naloge, saj z izbiro nalog obiščemo različne spletne naslove, ponekod pa se nam prenese kar datoteka z nalogami. Aplikacija ne omogoča dodajanja ali prilagajanja nalog in je zelo nekonsistentna tako po obliki kot uporabniškem vmesniku. Dostopna je na povezavi Slika 2.1: E-učenje slovenščine. 2

13 DEVETKA.NET Druga aplikacija, ki prav tako omogoča učenje slovenščine prek spleta, je Devetka.net. Tudi ta aplikacija ima nekaj svojih nalog, v večini pa uporabnike preusmerja drugam. Tudi ta aplikacija naloge razvršča po razredih, kot dodano vrednost aplikacije pa izpostavljamo, da so nekatere naloge prikazane v stilu igre in ena od teh je igra vislice. Aplikacija je v osnovi precej nepregledna in ima prekomerno zgoščene možnosti že na začetni strani, kot je razvidno s slike 2.2. Prav tako ne omogoča neposrednega spreminjanja in prilagajanja nalog. Dostopna je na povezavi Slika 2.2: Aplikacija Devetka.net. 3

14 THATQUIZ Tretja aplikacija, ki omogoča spletno učenje slovenščine, se imenuje Thatquiz in se nekoliko razlikuje od obeh predhodno omenjenih. Aplikacija je namenjena izključno učiteljem. Oblikovati morajo svoj razred z vsaj enim učencem, pozneje pa lahko svoji ciljni skupini oziroma razredu pripravijo test iz različnih snovi. Aplikacija je zbirka dodanih nalog uporabnikov oziroma učiteljev in ima precej slabo razdelane predmete in snovi, kot je razvidno s slike 2.3. Delitve snovi glede na razred sploh ne podpira, ima pa možnost vpogleda v ocene. Za konsistentnost je tukaj bolje poskrbljeno, saj ima vse naloge v zelo podobnem stilu in nima povezav na druge spletne strani. Dostopna je na povezavi Slika 2.3: Aplikacija Thatquiz. 4

15 3. UPORABLJENE TEHNOLOGIJE OGRODJE.NET Ogrodje.NET je ime za skupino tehnologij, kot je razvidno s slike 3.1. Razvija jih Microsoft pod imenom.net Framework in je sestavni del operacijskega sistema Windows. Ogrodje je samo po sebi zelo bogato, saj nam ponuja kopico rešitev, kot so razvoj uporabniških vmesnikov, razvoj namiznih aplikacij, razvoj spletnih rešitev, razvoj mobilnih aplikacij in še bi lahko naštevali. Slika 3.1: Hierarhija komponent ogrodja.net. Ogrodje.NET temelji na konceptih objektno naravnane tehnologije in omogoča preprost način gradnje aplikacij. Koda implementiranih rešitev ni prevedena neposredno v strojno kodo. Prevede se jo v tako imenovano vmesno kodo, v katero se lahko prevedejo vsi za.net prirejeni jeziki. To je zelo dobro sprejeto med razvijalci, saj lahko uporabljajo jezik po svoji izbiri. 5

16 Ogrodje je zelo dobro podprto s številnimi knjižnicami, ki vsebujejo vnaprej definirane funkcionalnosti, kot so delo s podatkovnimi bazami, matematične funkcije, delo z dokumenti XML itd. Knjižnice so organizirane po imenskih prostorih (angl. namespaces), vključijo pa se z besedo "using". Najbolj pogosto oziroma že avtomatsko vključeni imenski prostori so: - System, - System.Collections.Generic, - System.Linq, - System.Web, - System.Web.UI, - System.Web.UI.WebControls. Vključili smo tudi naslednji knjižnici: - System.Data.SqlClient in - System.Configuration. 6

17 ASP.NET ASP.NET je tehnologija za kreiranje dinamičnih spletnih strani oziroma aplikacij, ki deluje po načelu odjemalec strežnik, kot prikazuje slika 3.2. Slika 3.2: Povezava odjemalec strežnik. Odjemalec pošlje zahtevo strežniku, ki kodo s končnico.aspx prevede v kodo HTML. Ta pa je pozneje poslana nazaj odjemalcu, ki je v večini primerov spletni brskalnik. Na osnovi prejete kode HTML, brskalnik prikaže določen uporabniški vmesnik oziroma aplikacijo. Tudi za implementacijo naše spletne aplikacije smo uporabili ogrodje ASP.NET, vendar smo se morali odločiti med dvema razvojnima modeloma: - ASP.NET WebForms in - ASP.NET MVC. 7

18 3.2.1 Razvojni model ASP.NET MVC ASP.NET MVC (Model View Controler) je alternativa in sorodni razvojni model ASP.NET WebForms. ASP.NET MVC je razdeljen na tri sloje, in sicer na model, pogled in krmilnik. Ti sloji so namenjeni doseganju večje modularnosti in lažjemu vzdrževanju aplikacije, kar prikazuje slika Naloga modela oziroma ogrodja (angl. Model) je manipuliranje s podatki. V ta namen vsebuje funkcije, ki uporabljajo podatkovno bazo. - Pogled (angl. View) skrbi za prikazovanje uporabniškega vmesnika in podatkov. - Krmilnik (angl. Controller) pa predstavlja interakcijo med modelom in pogledom. Ukaze ali podatke, pridobljene s strani uporabnika, procesira in vrača želen rezultat. Slika 3.3: Razvojni model ASP.NET MVC. Zelo pomembna funkcionalnost, ki jo omogoča ASP.NET MVC, je ločevanje pristojnosti. Drugače povedano, njegove komponente so šibko sklopljene, kar omogoča lažje testiranje in spreminjanje ter dopolnjevanje aplikacije. 8

19 3.2.2 Razvojni model ASP.NET WebForms Razvojni model ASP.NET WebForms, ki smo ga uporabili pri implementaciji naše aplikacije, predstavlja koncept spletnih obrazcev in je predhodnik ASP.NET MVC. Ključne lastnosti oziroma prednosti modela ASP.NET WebForms: - ločevanje kode na dve datoteki: prva za urejanje uporabniškega vmesnika oziroma koda HTML in druga, ki implementira funkcionalnosti, oziroma koda C#; - na voljo imamo široko paleto strežniških kontrol oziroma gradnikov za raznorazna opravila; - preprost razvoj uporabniškega vmesnika, preprosto dodajanje gradnikov in pripadajočih dogodkov. Ločevanje kode v ASP.NET WebForms se deli v dve datoteki. V prvi uporabnik najprej oblikuje svoj uporabniški vmesnik s končnico.aspx, kjer doda želene strežniške gradnike ali zapiše kodo HTML na spletni obrazec, kot prikazuje slika 3.4. Seveda je mogoče dodati tudi obliko in vpeljati oblikovanje s CSS. Slika 3.4: Datoteka.aspx. 9

20 Ko je gradnik oziroma v našem primeru gumb dodan na spletni obrazec, mu dodamo lastnost "OnClick" za proženje dogodka. Tako se v drugi datoteki s končnico.cs generira istoimenska metoda, ki omogoča implementiranje logike oziroma funkcionalnosti izbranega gradnika, kar je razvidno s slike 3.5. Slika 3.5: Datoteka.cs. Na voljo je seveda več različnih gradnikov, ki imajo različne funkcionalnosti in jih lahko preprosto izberemo iz orodjarne. 10

21 3.2.3 Izbira razvojnega modela Pri implementaciji naše aplikacije smo se odločili za razvojni model ASP.NET WebForms oziroma za uporabo spletnih obrazcev. Za to smo se odločili predvsem iz razloga, ker imamo z omenjenim modelom že nekaj izkušenj. Kot bistveno prednost izpostavljamo tudi vizualni predogled modela WebForms, ki zapisano kodo prikazuje v končni obliki kar v brskalniku, ne da bi jo zagnali. Vizualni pogled je grafični uporabniški vmesnik, ki omogoča enostavno pozicioniranje elementov HTML, saj podpira funkcionalnost "povleci in spusti" (angl. drag and drop). Torej, ko element povlečemo na želeno mesto, se v ozadju samodejno generira koda za izbran gradnik, velika prednost tega pa je, da se samodejno poskrbi za odpravljanje razlik med različnimi spletnimi brskalniki. Podobno tudi pri povezovanju aplikacije do podatkovne baze, saj lahko tudi to določimo s pomočjo grafičnega vmesnika. 11

22 RAZVOJNO ORODJE Za implementacijo naše spletne aplikacije smo uporabili programsko orodje Microsoft Visual Studio 2015, ki je prikazano na sliki 3.6. Podatke shranjujemo s pomočjo SQL Express 2015, ki je vgrajen v orodje od različice 2012 naprej. Razlog za izbiro omenjenega orodja je ta, da nenehno prejemajo popravke in izboljšave, imajo pa tudi zelo dobro podporo. Karkoli se zalomi ali če potrebujemo napotke, so ti na voljo na uradni spletni strani podjetja in na številnih forumih. Orodje ima zelo uporabne funkcije, ki nam omogočajo, da je implementacija hitra, možnost napak pa je zmanjšana do določene mere. Za testiranje spletne aplikacije smo uporabili brskalnika Google Chrome in Mozilla Firefox. Slika 3.6: Uporabniški vmesnik orodja Visual Studio

23 4. Načrtovanje aplikacije Ko smo začeli načrtovati aplikacijo, smo določili, kaj mora aplikacija ponujati oziroma opravljati in koliko različnih pogledov oziroma uporabnikov bo imela. Sklenili smo, da bo aplikacija delovala kot nekakšno spletno preverjanje znanja z različnimi vrstami nalog, ki pa ne bodo vse implementirane vnaprej. Zamisel je namreč, da bo aplikacijo možno spreminjati in zato ni potrebe po velikih količinah statično kodiranih primerov, saj jih bo možno še pozneje dodati ali spremeniti. Podpirala bo tri tipe uporabnikov z različnimi pravicami. To bo tudi jasno razvidno že ob vpisu, saj je glede na status prilagodljiva tudi oblika strani. Ob prvem prihodu v aplikacijo bo zahtevana registracija, kjer uporabnik pridobi svoj status, pozneje pa še prijava. Uporabnik učitelj bo postavljen v vlogo administratorja, ki bo imel na voljo vse funkcionalnosti aplikacije. Njegove možnosti bodo: - reševanje nalog, - urejanje pogleda oziroma postavitev nalog, - urejanje podatkov oziroma snovi iz nalog, - shranjevanje rezultatov reševanja in - pregledovanje rezultatov vseh učencev in po potrebi tudi brisanje, ne bo jih pa mogel urejati oziroma prilagajati. Uporabnik učenec bo imel le osnovne možnosti, in sicer: - reševanje nalog, - rezultate bo lahko po želji shranil za evidenco, - lahko bo pregledal svoje rezultate reševanja, brisati pa jih ne bo mogel, - v smislu tekmovanja bo primerjal svoj rezultat z ostalimi uporabniki. 13

24 Uporabnik starš ima: - možnost vpogleda v rezultate, vendar samo za svojega otroka, ki ga je določil ob registraciji, in - pregled nad tem, katere naloge otrok rešuje. Diagram primerov uporabe na sliki 4.1 predstavlja osnovne funkcije in uporabnike, ki smo si jih zamislili. Vsak uporabnik je ob vstopu v aplikacijo usmerjen na stran prijave. Če še nima vpisnih podatkov, je preusmerjen na stran registracije, kjer se lahko registrira in nato se vrne na prijavo. Ko uspešno opravi prijavo, ima na voljo želene funkcionalnosti, ki so predvidene zanj glede na status. 14

25 Slika 4.1: Diagram primerov uporabe. 15

26 Na sliki 4.2 je razredni diagram, v katerem so prikazani razredi, njihovi atributi in glavne metode. Predstavljenih imamo 10 razredov z njihovimi atributi in metodami. Osrednji razred je razred Uporabnik, od katerega dedujejo razredi Učitelj, Učenec in Starš. Prav tako imamo nanj speljano agregacijo oziroma šibko vsebovanje s strani razreda Rezultat. Od razreda Naloga dedujejo razredi Pomenke, Spol in poklici, Težke besede in Predlogi. Razreda Naloga in Uporabnik sta v relaciji mnogo proti mnogo. 16

27 Slika 4.2: Razredni diagram. 17

28 Na sliki 4.3 je ER diagram podatkovne baze s tabelami in atributi. Predstavljenih imamo 7 tabel z njihovimi primarnimi ključi in atributi. Osrednja tabela je Naloga, na katero so vezane tabele Snov, Postavitev in Rezultat. Njihove kardinalnosti povezav so: - tabeli Naloga in Snov imata povezavo ena proti mnogo. Tip naloge lahko ima več snovi, - tabeli Naloga in Postavitev prav tako povezavo ena proti mnogo. Tip naloge ima več postavitev in - tabeli Naloga in Rezultat povezavo mnogo proti mnogo. Več nalog ima lahko več rezultatov. Zanimiva je tudi tabela Uporabnik, na katero so vezane tabele Status, Rezultat in Aplikacija. Njihove kardinalnosti povezav so ena proti mnogo: - tabeli Uporabnik in Status. Več uporabnikov lahko ima en status, - tabeli Uporabnik in Rezultat. En uporabnik lahko ima več rezultatov in - tabeli Uporabnik in Aplikacija. V aplikaciji je lahko več uporabnikov. Ostane še tabela Aplikacija, ki je vezana na tabele Naloga, Uporabnik in Rezultat. Njihove kardinalnosti povezav so ena proti mnogo: - tabeli Aplikacija in Naloga. Aplikacija lahko ima več nalog, - tabeli Aplikacija in Uporabnik. Aplikacija lahko ima več uporabnikov in - tabeli Aplikacija in Rezultat. Aplikacija lahko ima več rezultatov. 18

29 Slika 4.3: ER diagram. 19

30 5. IMPLEMENTACIJA APLIKACIJE Pri implementaciji aplikacije je bilo najprej treba spoznati samo delovanje oziroma obnašanje ogrodja ASP.NET WebForms, saj vse ne poteka enako kot na primer pri namiznih aplikacijah. Zelo pomembno je razumeti osveževanja (angl. postbacks). Spletne strani ASP.NET se osvežijo vedno, kadar se zgodi kak dogodek, ob tem pa strežnik ponovno prevede in pošlje kodo HTML spletne strani. Ob vsaki osvežitvi strani se proži tudi privzeta metoda Page_Load, v kateri so velikokrat zapisani tudi odseki kode, za katere ne želimo večkratnega izvajanja. Temu se lahko izognemo z uporabo lastnosti IsPostBack. Z omenjeno metodo preverimo, ali se je osveževanje že zgodilo, kar je razvidno s slike 5.1. Drugače povedano, koda v odseku IsPostBack se izvede samo ob prvem nalaganju spletne strani. Slika 5.1: Lastnost IsPostBack. REGISTRACIJA IN PRIJAVA UPORABNIKA Vsak nov uporabnik se mora najprej registrirati. Ob tem si izbere uporabniško ime, geslo in status, pri čemer lahko izbira med možnostmi učenec, učitelj ali starš. Kadar je izbran status starš je potrebno vpisati tudi ime otroka za poznejše preverjanje rezultatov, ki jih je otrok dosegel. Staršu se ob pregledu rezultatov prikažejo le rezultati njegovega otroka. 20

31 Registracija je implementirana tako, da se za vsako polje, ki ga uporabnik izpolni, sproti preveri ustreznost vpisanega s pomočjo gradnika RequiredFieldValidator. Omenjeni gradnik ob napačnem vnosu izpiše napako in nas tako sproti popravlja, kot je razvidno s slike 5.2. Slika 5.2: Registracija. Ko so podatki vpisani in preverjeni ter uporabnik to tudi potrdi, se vse skupaj shrani v podatkovno bazo pod pogojem, da uporabnik z enakimi podatki še ne obstaja. Če je ta pogoj izpolnjen, nas aplikacija samodejno preusmeri na stran za prijavo. Če smo registracijo že opravili, le vnesemo svoje vpisne podatke. Ti se ponovno preverijo na strežniku s podatki iz podatkovne baze, kot prikazuje slika

32 Slika 5.3: Koda za prijavo v aplikacijo. Če so podatki pravilni, nas aplikacija preusmeri na začetno stran in lahko začnemo z delom. V postopku prijave se v našem primeru ne preverita le vpisano uporabniško ime in geslo, ampak tudi status uporabnika. Vsak status pomeni drugačne pravice in aplikacija se temu primerno tudi prilagodi. V našem primeru je to vidno predvsem iz oblike spletnih strani in dodatnih možnosti, ki jih aplikacija ponuja uporabniku. Status se ob prijavi shrani v sejo. 22

33 Za varnost spletne aplikacije je poskrbljeno z uporabo protokola HTTPS, ki je varnejša oblika standarda HTTP, ki se uporablja za varno komunikacijo na spletu. HTTPS nam v nezavarovanem omrežju ustvari varen kanal za izmenjavo podatkov. Podatki, ki se prenašajo, pa so ustrezno šifrirani. Omenjeni protokol za šifriranje potrebuje ustrezne certifikate, in sicer SSL in TLS, uporablja pa vrata številka 443. ŠABLONA SPLETNIH STRANI Vsem stranem je v naši aplikaciji implementirana skupna šablona, ki določa obliko spletnih strani ob prvem nalaganju. Prilagodi se glede na status, ki je shranjen v seji. Ob vstopu je tako že iz oblike spletnih strani razvidno, ali gre za uporabnika s statusom učenec, učitelj ali starš Pogled starš Starši so že ob vpisu preusmerjeni v seznam rezultatov, kjer lahko preverijo čas reševanja in odstotek uspešnosti za posamezno nalogo. Imajo tudi možnost branja nalog, ki so pripravljene za reševanje Pogled učitelj Uporabnika s statusom učitelj ob vpisu pričakajo pozdrav, prilagojeno ozadje in meni z nalogami, ki so na voljo za reševanje. Meni, ki zajema celotno širino strani, smo postavili na vrh aplikacije. Implementiran je s pomočjo HTML in CSS, sestavljen pa iz tekstovnih polj, ki nas preusmerjajo na željeno stran. 23

34 5.2.3 Pogled učenec Uporabnika s statusom učenec ob vpisu pričakata prilagojen nagovor in prilagojeno ozadje, kot je razvidno s slike 5.4. Nadaljuje se lahko s pregledom in reševanjem pripravljenih nalog. Slika 5.4: Pogled učenec. 24

35 JEDRO APLIKACIJE Osrednja ideja navigacije po aplikaciji oziroma med snovmi je začetna izbira snovi. Na primer pomenke, pozneje pa izbira želenega podpoglavja, na primer nadpomenke, kot prikazuje slika 5.5. Slika 5.5: Prikaz podpoglavja izbrane snovi. Ko si učenec izbere želeno snov za reševanje, se prikaže naloga na izbrano tematiko. Pripravljena oziroma prikazana naloga vsebuje primere, ki jih je predhodno izbral učitelj. V njegovi domeni je, da se odloči, s katerimi podatki bodo učenci operirali. Če so snov šele začeli obravnavati bodo primeri lažji, v nasprotnem primeru pa nekoliko težji. Učitelj izbere tudi postavitev oziroma prikaz naloge po lastni izbiri. 25

36 Izbira snovi in gradnikov naloge je izključno v domeni uporabnika s statusom učitelj saj aplikacija le njemu omogoča urejanje obojega. Tukaj možnost uredi v pojavnem oknu prikaže spustni seznam, ki vsebuje vse možne postavitve naloge, ki so na voljo. Uporabnik izbere želeno postavitev in izbiro shrani neposredno v podatkovno bazo. Shranjevanje v sejo bi bilo tukaj neprimerno, saj mora biti izbira trajna. Shranjevanje postavitve smo implementirali tako, da se pred vsakim zapisom tabela najprej izprazni z ukazom truncate table, pozneje pa se v njo zapiše željena vrednost, kot prikazuje slika 5.6. Po opravljenem shranjevanju nas aplikacija preusmeri na stran s predhodno izbrano snovjo. Slika 5.6: Koda shrani postavitev v podatkovno bazo. 26

37 Ko uporabnik izbere nalogo, se le ta prikaže s pomočjo določene postavitve. Stran z nalogo prikazuje tudi navodilo za reševanje naloge, gumb za preverjanje odgovorov in odstotek pravilnih odgovorov, ki se izračuna po potrditvi, kot je razvidno s slike 5.7. Slika 5.7: Prikaz naloge. Ko uporabnik nalogo reši se sproži logika, ki preveri ujemanje vpisanega s tistim, kar je določil učitelj. Ob ujemanju podatkov se vnosno polje obarva zeleno, sicer rdeče. Gumb za preverjanje rezultatov je aktiven le enkrat. Tako se izognemo morebitnemu popravljanju tekstovnih polj po ugotovitvi napake, kar bi vodilo v nepošten končni rezultat. Istočasno se pod nalogo izračuna tudi odstotek uspešnosti za trenutno nalogo. Uspešnost je lahko zgolj informativna za vajo ali pa je poslana v vpogled učitelju. Učenec oziroma uporabnik, ki rešuje naloge, se sam odloči, ali bo naloge oddal ali ne. Rezultat se začasno shrani v sejo in če so naloge oddane, se le ta shrani še v podatkovno bazo za vsako nalogo posebej. V podatkovno bazo tukaj shranimo tudi datum in čas reševanja. 27

38 Dodatna funkcionalnost uporabnika s statusom učitelj, je možnost spreminjanja vsebine nalog, kot prikazuje slika 5.8. Slika 5.8: Urejanje podatkov naloge. Implementirana aplikacija vsebuje več tipov nalog, ki so dinamično nastavljivi glede na določeno snov. Tipi nalog, ki smo jih implementirali, so navedeni v nadaljevanju Tip naloge - dopiši Pri tipu naloge dopiši, uporabnik na primer prebere določeno besedilo ali nekaj besed in poskuša ugotoviti smiselno skupno nadpomenko. Zapisani niz se primerja z rezultatom, ki ga je določil učitelj Tip naloge - izberi Pri tipu naloge izberi, uporabnik na primer prebere nekaj besed in iz ponujenih možnosti izbere smiselno nadpomenko. Primerja se izbrani niz s tistim, ki ga je določil učitelj. 28

39 5.3.3 Tip naloge - poveži Pri tipu naloge poveži uporabnik na primer prebere besedo s prvega seznama, ki je oštevilčen, in nato v drugem seznamu poišče v našem primeru sopomenko ter ji pripiše številko izpred ujemajoče besede s prvega seznama. Preveri se vpisana številka s pričakovano, ki jo je določil učitelj. REZULTATI NALOG Ko uporabnik predela oziroma reši želene naloge iz želenih snovi, ima možnost rezultate posredovati v podatkovno bazo za poznejši pregled bodisi učitelja, staršev ali za lastno evidenco. Kot smo že navedli, se rezultati vsake rešene naloge začasno shranijo v sejo, kjer čakajo na morebitno nadaljnjo shranjevanje. Uporabnik to stori na način, da v meniju poišče razdelek rezultati. Tam se mu ponudi možnost, da točkovanje nalog, ki jih je rešil, shrani v podatkovno bazo, prav tako ima na voljo vpogled v svoje rezultate. Tudi tukaj ima učitelj določene privilegije oziroma dodatne funkcije. Lahko pogleda rezultate vseh uporabnikov, ki so naloge reševali, in lahko jih tudi izbriše, kot je razvidno s slike 5.9. Ne more pa rezultatov spreminjati oziroma prilagajati. Slika 5.9: Pregled rezultatov s statusom učitelj. Ena zanimivejših funkcionalnosti, ki jih nudi aplikacija, je tudi tekmovanje med učenci. Zasnovano je tako, da se njihovo število točk primerja s številom točk, ki so jih zbrali ostali učenci, in se jih tako razvršča. Ta na videz majhna funkcionalnost lahko ima pozitiven učinek, saj učence spodbuja k doseganju čim boljšega rezultata. 29

40 POJAVNA OKNA V aplikaciji smo pogosto uporabili pojavna okna, kjer je bilo to smiselno. Za vsako predvideno okno smo implementirali uporabniško kontrolo (angl. UserControl) namesto strani. Odločili smo se za pojavna okna s knjižnico AJAX Control Toolkit. Knjižnico smo morali dodatno namestiti v orodje Visual Studio, s tem pa smo dobili možnost uporabe gradnikov AJAX. Iz navedene knjižnice smo uporabili gradnika ToolkitScriptManager in ModalPopupExtender, ki omogočata implementacijo pojavnih oken. Tukaj smo naleteli na težavo, saj se v primeru urejanja podatkov v pojavnem oknu to zapre ob vsakem osveževanju. Ta problem smo rešili s preučitvijo delovanja ogrodja ASP.NET, pri katerem se ob vsaki uporabnikovi akciji na spletni strani, proži mehanizem PostBack oziroma ponovno nalaganje strani. Težavo smo rešili z gradnikom UpdatePanel, ki omogoči, da se osveževanje zgodi le za našo uporabniško kontrolo in ne za celotno stran, na kateri se nahajamo. Tako smo obdržali pojavno okno odprto tudi med urejanjem. 30

41 6. TESTIRANJE ODZIVNOSTI Ker je odzivnost danes vedno bolj pomembna in smo uporabniki vedno bolj neučakani, smo naredili nekaj testov z različnimi parametri in jih med seboj primerjali. Uporabili smo brezplačno aplikacijo za preverjanje odzivnosti spletnih strani x0bench, ki omogoča tudi testiranje lokalnih naslovov URL. Na osnovi več zahtev smo merili čas odzivnosti oziroma čas, ki je potreben, da se stran vzpostavi. - Najprej smo začeli z 20 zahtevami, kar je razvidno s slike 6.1. Slika 6.1: Test odzivnosti pri 20 zahtevah. V testu z 20 zahtevami je bil povprečni odzivni čas 72,25 ms, najslabši 98 ms, najboljši pa 60 ms. Vsaka zahteva je obsegala 7,2 KB, kar je ob seštevku vseh 20 zahtev zneslo 144,1 KB. 31

42 - Test smo ponovili z 10-krat več oziroma 200 zahtevami, kot je razvidno s slike 6.2. Slika 6.2: Test odzivnosti pri 200 zahtevah. Tokrat je pri 200 zahtevah bil povprečni odzivni čas 79,155 ms, najslabši kar 239 ms, najboljši pa 61 ms. Tudi tokrat je posamezna zahteva obsegala 7,2 KB, kar je ob seštevku vseh 200 zahtev naneslo 1,4 MB. Odzivnost je po povečanju števila zahtev ostala skoraj enaka, čeprav smo obremenjenost povečali za kar 10-krat. Zaenkrat dodatna optimizacija aplikacije ni potrebna, če pa bi se obseg funkcionalnosti povečal, bi bilo smiselno aplikacijo ponovno testirati. 32

43 7. SKLEP V diplomskem delu smo implementirali spletno aplikacijo v ogrodju ASP.NET za učenje slovenščine, ki vsebuje različne tipe nalog. Aplikacija zahteva registracijo, kjer so podprti trije tipi uporabnikov in sicer učitelj, učenec in starš. Ob prijavi ima vsak uporabnik glede na svoj status omogočene različne funkcionalnosti, prilagaja pa se tudi oblika. Naloge so strukturirane v hierarhijo in posledično lepo pregledne. Implementirane so s pomočjo spustnega menija. Aplikacija omogoča učiteljem izdelavo novih nalog glede na pripravljene predloge, kjer lahko spremenijo tudi snov. V njihovi domeni je tudi pregled rezultatov za posameznega učenca in urejanje le teh. Učenci imajo v aplikaciji v prvi vrsti možnost reševati naloge, ki jih je pripravil učitelj. Po reševanju lahko rešene naloge shranijo in posredujejo v ocenjevanje, lahko pa jih tudi zavržejo in rešujejo znova. Starši imajo v aplikaciji dostop le do podatkov in ne morejo uporabljati njenih funkcionalnosti. Lahko pregledajo rezultate za svojega otroka in naloge, ki so pripravljene za reševanje. Pri aplikaciji bi lahko še nekoliko izboljšali uporabniški vmesnik in dodali animacije ter slikovno gradivo. Gradnike bi lahko prilagodili tudi za mobilne naprave in s tem dosegli lepši prikaz tudi na manjših zaslonih. V prihodnosti bi lahko aplikaciji dodali še kakšno funkcionalnost, kot je na primer povratna informacija učitelja učencu. Lahko bi jo tudi naredili popolnoma dinamično in implementirali možnost urejanja tudi za meni, nagovor oziroma pozdrav in za besedila nalog. S tem bi dosegli, da bi bila aplikacija popolnoma neodvisna od snovi. 33

44 VIRI IN LITERATURA [1] Cameron R., Michalk D., Pro ASP.NET 3.5 Server Controls and AJAX Components, Apress, [2] Coderesource, Working with postback. Dostopno na: [julij, 2017]. [3] Dykstra T., The Entity Framework 4.0 and APS.NET Web Forms: Getting Started, [4] Devexpress, ASP.NET AJAX Control Toolkit. Dostopno na: [julij, 2017]. [5] Esposito D., Programming Microsoft ASP.NET MVC Third Edition, Microsoft Press, [6] Esposito D., Programming Microsoft ASP.NET 4, Microsoft Press, [7] Hurwitz D., Libery J., Maharry D., Programming ASP.NET 3.5, Fourth Edition, O'Reilly Media, [8] Microsoft msdn, ASP.NET page life cycle overview. Dostopno na: [julij, 2017]. [9] Microsoft TechNet, SQL Server Database. Dostopno na: [julij, 2017]. 34

45 [10] Microsoft support, ASP.NET server controls. Dostopno na: [julij, 2017]. [11] Wikipedia, Model View Controller. Dostopno na: [julij, 2017]. [12] Wikipedia, ASP.NET. Dostopno na: [julij, 2017]. [13] Wikipedia,.NET Framework. Dostopno na: [julij, 2017]. [14] W3schools, ASP.NET Web Pages Tutorial. Dostopno na: [julij, 2017]. 35

46 IZJAVA O AVTORSTVU IN ISTOVETNOSTI TISKANE IN ELEKTRONSKE OBLIKE ZAKLJUČNEGA DELA Ime in priimek študent a/ ke: Študijski program: Naslov zaključnega dela: Mentor: Somentor: Podpisan i/ a študent/ ka izjavljam, da je zaključno delo rezultat mojega samostojnega dela, ki sem ga izdelal/ a ob pomoči mentor ja/ ice oz. somentor ja/ ice; izjavljam, da sem pridobil/ a vsa potrebna soglasja za uporabo podatkov in avtorskih del v zaključnem delu in jih v zaključnem delu jasno in ustrezno označil/ a; na Univerzo v Mariboru neodplačno, neizključno, prostorsko in časovno neomejeno prenašam pravico shranitve avtorskega dela v elektronski obliki, pravico reproduciranja ter pravico ponuditi zaključno delo javnosti na svetovnem spletu preko DKUM; sem seznanjen/ a, da bodo dela deponirana/objavljena v DKUM dostopna široki javnosti pod pogoji licence Creative Commons BY NC ND, kar vključuje tudi avtomatizirano indeksiranje preko spleta in obdelavo besedil za potrebe tekstovnega in podatkovnega rudarjenja in ekstrakcije znanja iz vsebin; uporabnikom se dovoli reproduciranje brez predelave avtorskega dela, distribuiranje, dajanje v najem in priobčitev javnosti samega izvirnega avtorskega dela, in sicer pod pogojem, da navedejo avtorja in da ne gre za komercialno uporabo; dovoljujem objavo svojih osebnih podatkov, ki so navedeni v zaključnem delu in tej izjavi, skupaj z objavo zaključnega dela; izjavljam, da je tiskana oblika zaključnega dela istovetna elektronski obliki zaključnega dela, ki sem jo oddal/ a za objavo v DKUM. Uveljavljam permisivnejšo obliko licence Creative Commons: (navedite obliko) Začasna nedostopnost: Zaključno delo zaradi zagotavljanja konkurenčne prednosti, zaščite poslovnih skrivnosti, varnosti ljudi in narave, varstva industrijske lastnine ali tajnosti podatkov naročnika: (naziv in naslov naročnika/institucije) ne sme biti javno dostopno do (datum odloga javne objave ne sme biti daljši kot 3 leta od zagovora dela). To se nanaša na tiskano in elektronsko obliko zaključnega dela. 36

47 Temporary unavailability: To ensure competition priority, protection of trade secrets, safety of people and nature, protection of industrial property or secrecy of customer's information, the thesis (institution/company name and address) must not be accessible to the public till (delay date of thesis availability to the public must not exceed the period of 3 years after thesis defense). This applies to printed and electronic thesis forms. Datum in kraj: Podpis študent a/ ke: Podpis mentor ja/ ice: (samo v primeru, če delo ne me biti javno dostopno) Ime in priimek ter podpis odgovorne osebe naročnika in žig: (samo v primeru, če delo ne sme biti javno dostopno) 37

48 Koroška cesta Maribor, Slovenija IZJAVA O USTREZNOSTI ZAKLJUČNEGA DELA Podpisani mentor/-ica : (ime in priimek mentor-ja/-ice) in somentor/-ica (eden ali več, če obstajajo): (ime in priimek somentor-ja/-ice) Izjavlja-m/-va/-mo, da je študent/-ka Ime in priimek:, ID številka:, vpisna številka:, na študijskem programu: izdelal/-a zaključno delo z naslovom: (naslov zaključnega dela v slovenskem jeziku) v skladu z odobreno temo zaključnega dela, navodili o pripravi zaključnih del in mojimi (najinimi/našimi) navodili. Preveril/-a/-i in pregledal/-a/-i sem/sva/smo poročilo o preverjanju podobnosti vsebin z drugimi deli (priloga) in potrjujem/potrjujeva/potrjujemo, da je zaključno delo ustrezno. Datum in kraj: Podpis mentor-ja/-ice: Datum in kraj: Podpis somentor-ja/-ice (če obstaja): Priloga: - Poročilo o preverjanju podobnosti vsebin z drugimi deli. 38

49 Koroška cesta Maribor, Slovenija IZJAVA O OBJAVI OSEBNIH PODATKOV Ime in priimek diplomant a/ magistrant-/-ke: ID številka: Študijski program: Naslov zaključnega dela: Mentor/ ica: Somentor/ ica: Podpisan-i/-a izjavljam, da dovoljujem objavo osebnih podatkov, vezanih na zaključek študija (ime, priimek, leto zaključka študija, naslov zaključnega dela) na spletnih straneh Univerze v Mariboru in v publikacijah Univerze v Mariboru. Datum in kraj: Podpis diploman ta/magistran ta/ ke: 39