Szakdolgozat

Miskolci Egyetem

Multidimenzionális tanszéki oktatási tabló

Készítette: Tóth Béla Programtervező informatikus Korszerű web-technológiák

Témavezető: Dr. Dudás László egyetemi docens

Miskolc, 2016 Miskolci Egyetem Gépészmérnöki és Informatikai Kar Alkalmazott Matematikai Tanszék Szám:

Szakdolgozat Feladat

Tóth Béla Hallgató (HVQ0DL) programtervező informatikus jelölt részére.

A szakdolgozat tárgyköre: Webfejlesztés

A szakdolgozat címe: Multidimenzionális tanszéki oktatási tabló

A feladat részletezése:

WAMP kiszolgáló programcsomag bemutatása. Felhasznált technológiák (AJAX, Microsoft Office Excel makrók), keretrendszer (Boot- strap), komponens (Select2), programkönyvtár (jQuery) áttekintő jellegű ismertetése. A fenti technológiák felhasználásával webalkalmazás létrehozása, melynek célja: Kényelmes áttekinthetőséget nyújtani egy tanszék oktatott tárgyairól, azok tematika- nézetén, oktatói kötődések nézetén és szak, szakirány kötődések nézetén keresztül. Funkciói, szolgáltatásai:

• A tanszék oktatott tárgyainak listája.

• Egy kiválasztott tárgy tantárgyi lapja.

• Egy kiválasztott tárgy megjelenése az elmúlt 3 félév órarendjében.

• Egy kiválasztott tárgy oktatójához tartozó további tárgyak megjelenítése.

• Egy kiválasztott tárgy kapcsán azon szakok, szakirányok, sávok megjelenítése, amelyeken a tárgyat oktatja a tanszék.

Ezen nézetek között kényelmes, egy-két kattintásos átmenetek biztosítása az áttekin- tések könnyű realizálása érdekében.

Témavezető: Dr. Dudás László, egyetemi docens

A feladat kiadásának ideje: 2016.01.18.

A feladat beadásának határideje: 2016.11.18.

...... szakfelelős

2 Eredetiségi Nyilatkozat

Alulírott Tóth Béla Neptun-kód: HVQ0DL a Miskolci Egyetem Gépészmérnöki és Informatikai Karának végzős Programtervező informatikus szakos hallgatója ezennel büntetőjogi és fegyelmi felelősségem tudatában nyilatkozom és aláírásommal igazolom, hogy Multidimenzionális tanszéki oktatási tabló című szakdolgozatom/diplomatervem saját, önálló munkám, az abban hivatkozott szakirodalom felhasználása a forráskezelés szabályai szerint történt.

Tudomásul veszem, hogy szakdolgozat esetén plágiumnak számít:

• szószerinti idézet közlése idézőjel és hivatkozás megjelölése nélkül;

• tartalmi idézet hivatkozás megjelölése nélkül;

• más publikált gondolatainak saját gondolatként való feltüntetése.

Alulírott kijelentem, hogy a plágium fogalmát megismertem, és tudomásul veszem, hogy plágium esetén szakdolgozatom visszautasításra kerül.

Miskolc, 2016.11.18.

...... Hallgató

3 1. szükséges (módosítás külön lapon) A szakdolgozat feladat módosítása nem szükséges

...... dátum témavezető(k) 2. A feladat kidolgozását ellenőriztem: témavezető (dátum, aláírás): konzulens (dátum, aláírás): ...... 3. A szakdolgozat beadható: ...... dátum témavezető(k)

4. A szakdolgozat ...... szövegoldalt ...... program protokollt (listát, felhasználói leírást) ...... elektronikus adathordozót (részletezve) ...... egyéb mellékletet (részletezve) ...... tartalmaz...... dátum témavezető(k) 5. bocsátható A szakdolgozat bírálatra nem bocsátható A bíráló neve: ......

...... dátum szakfelelős 6. A szakdolgozat osztályzata a témavezető javaslata: ...... a bíráló javaslata: ...... a szakdolgozat végleges eredménye: ......

Miskolc, ...... a Záróvizsga Bizottság Elnöke

4 Tartalomjegyzék

1. Bevezetés 7 1.1. Feladatbemutatás ...... 7 1.2. Hasonló rendszerek felkutatása ...... 8 1.2.1. Miskolci Egyetem ...... 8 1.2.2. University of Bedfordshire ...... 9 1.2.3. University of Dundee ...... 9 1.2.4. Harvard University ...... 10 1.3. Saját modell és programterv ...... 11 1.3.1. Folyamatábra ...... 11 1.3.2. EER modell ...... 12

2. Felhasznált eszközrendszer ismertetése 13 2.1. Visual Basic ...... 13 2.2. WampServer környezet ...... 15 2.3. A webalkalmazás felülete ...... 19 2.3.1. HTML ...... 19 2.3.2. CSS ...... 20 2.3.3. Bootstrap ...... 20 2.4. JavaScript ...... 21 2.4.1. jQuery ...... 21 2.4.2. Select2 ...... 21 2.5. Egyéb fejlesztést segítő eszközök ...... 22 2.5.1. NetBeans ...... 22 2.5.2. GIMP ...... 23

3. Megvalósítás 25 3.1. Adatok kinyerése ...... 25 3.2. Adatok feldolgozása ...... 27 3.2.1. Feltöltése a szerverre ...... 27 3.2.2. Adatbázis táblák létrehozása az Excelből exportált adatokkal . . 27 3.2.3. Adatok lekérdezése az alkalmazás számára ...... 29 3.3. Webalkalmazás fejlesztése ...... 30 3.3.1. A webalkalmazás szerkezetének kialakítása ...... 30 3.3.2. Nézetek ...... 32

4. Felhasználói dokumentáció 37 4.1. Felhasználói üzemmódok ...... 37 4.1.1. KI ...... 37 4.1.2. MIT ...... 39

5 4.1.3. MIKOR ...... 40 4.1.4. KINEK ...... 41 4.1.5. HOL ...... 42 4.2. Admin üzemmód ...... 43

5. Összefoglalás 44

6. Köszönetnyilvánítás 46

Irodalomjegyzék 47

Adathordozó használati útmutató 51

6 1. fejezet

Bevezetés

1.1. Feladatbemutatás

Az intézmények alapvető feladata és kötelessége a nyilvántartás. Nyilván kell min- dent amire igény merülhet fel, az ott dolgozó embereket, feladataikat, munkaköreiket és a további szükséges adatokat. Ez rendkívül időigényes és összetett feladat. Régen ez papír alapon zajlott és több ember munkafeladata volt. Nehézséget jelentett a nagy mennyiségű iratanyag archiválása, raktározása, kezelése is. A számítógépek megjelenésével mindez megváltozott. Hatalmas fejlődésen ment ke- resztül a dokumentálás folyamata. A számítógép alkalmas arra, hogy szinte korlátlan mennyiségű adatot raktározzon, kezeljen. Az első időkben az adatbázisok csak lokálisan voltak elérhetőek. Az Internet feltalálása és elterjedése azonban további lehetőségeket nyitott meg az adatok kezelésében. A 90-es években végrehajtott informatikai infrastruktúra fejlesztéseknek köszönhe- tően az oktatási intézmények adminisztrációja is komplex átalakuláson ment keresztül, így a felsőoktatásé is. A szakokon belüli hallgatói csoportok számának váltakozásával, és a különböző szakirányok megjelenése miatt sokszor merülnek fel olyan kérdések az oktatókban mint a „Melyik csoportnak is tartom a holnap 8-kor kezdődő gyakorlatot?”. Ezt a problémát vázolta fel, egyik beszélgetésünk során témavezetőm, Dr. Dudás László, egyetemi docens. Felajánlotta ezt a témát kidolgozásra, így lett a szakdolgoza- tom témája egy webalapú multidimenzionális tanszéki oktatási tabló létrehozása. A témaválasztást követően konzultációk következtek, melyeken pontosítottuk a kö- vetelményeket a létrehozandó rendszerrel szemben. Témavezetőm biztosította számomra azokat az adatokat, információkat melyek az elinduláshoz nélkülözhetetlenek voltak.

7 1.2. Hasonló rendszerek felkutatása

Fejlesztésem a hasonló rendszerek felkutatásával kezdődött. A különböző egyetemek órabeosztási rendszerét vizsgálva arra voltam kíváncsi, mit lát az odalátogató hallgató vagy az oktató, milyen szűrési lehetőséget biztosítanak, hány szemesztert mutatnak, milyen nézetek vannak az adott rendszeren belül. A vizsgált rendszereket összevetettem a témám követelményeivel, így született meg a saját elképzelésem.

1.2.1. Miskolci Egyetem Első körben a Miskolci Egyetem központi órarend megtekintő rendszerét (1.1. ábra) vizsgáltam.

1.1. ábra. A Miskolci Egyetem központi órarend megtekintő rendszere [1]

A weblap csoportkereső funkciója főként a hallgatók számára készült. Itt, az idelá- togató hallgatók ki tudják keresni a saját karukon belül a csoportjukat, így láthatják az órarendjüket. Az előadótermek kihasználtsági funkciója viszont sokkal inkább az okta- tókat segíti, például teremfoglalás esetén. Azonban az oktatói órarendek megtekintése nem megoldott, jellemzője továbbá még az is, hogy csak az aktuális félévet mutatja.

8 1.2.2. University of Bedfordshire Következő találatom az angliai Univerity of Bedfordshire órarend megtekintője (1.2. ábra).

1.2. ábra. A University of Bedfordshire időbeosztási rendszerének staff nézete [2]

Itt már található oktató nézet, de megnehezíti a használatát, hogy miután a sze- mesztert, vagy az adott kart kiválasztottam, nem szűri ki a releváns oktatókat, ezért az ide látogató a nagy név adatbázis miatt nem biztos, hogy a megfelelő egyént találja meg.

1.2.3. University of Dundee A Skóciában található University of Dundee rendszere (1.3. ábra) az oktató ID-je alapján keres, ami csak az egyetem hallgatói és oktatói számára elérhető.

1.3. ábra. A University of Dundee időbeosztási rendszerének staff nézete [3]

9 1.2.4. Harvard University Az Amerikai Egyesült Államokban található Harvard University keresője (1.4. ábra) jól használható külső érdeklődő számára is.

1.4. ábra. A Harvard egyetem órakeresője [4]

Kilistázhatom az egész szemeszter óráit, az adott intézményen belül, továbbá van lehetőség kulcsszavas keresésre, ahol megadhatom az engem érdeklő oktató nevét. A keresés eredményéből megtudhatom, hogy egy oktató mikor, hol és milyen órát tart.

10 1.3. Saját modell és programterv

1.3.1. Folyamatábra A weblap adatbázisa létrehozásának és a weblap használatának fő adatáramlási folyamatai az 1.5 ábrán követhetők.

1.5. ábra. Az alkalmazás folyamatábrája

11 1.3.2. EER modell Az oktatási tabló phpMyAdmin rendszerben szerkesztett összetevő-kapcsolat (en- hanced entity-relationship, EER) modelljét az 1.6 ábrán adtam meg.

1.6. ábra. Az alkalmazás adatbázisának EER Modellje

12 2. fejezet

Felhasznált eszközrendszer ismertetése

Az Alkalmazott Informatikai Intézeti Tanszék órarendjei Microsoft Excel munka- füzetekben érhetőek el a tanszék honlapján, melyeket bárki letölthet és megnyithat. Ezen dokumentumok megnyitása és rövid elemzése után az a kérdés fogalmazódott meg bennem, hogy hogyan fogom az adatokat egy számomra használhatóbb formába hozni. Az Excelnek ugyan van saját adatexportálója, de ez nem vesz figyelembe olyan számomra fontos részleteket, mint az óra elhelyezkedése. Továbbá nem blokkonként, hanem cellánként exportálja az adatokat, ami szintén probléma volt számomra. Kis kutatómunka után megszületett a megoldás, mégpedig az Excelben egy makró felprog- ramozása, amit Visual Basic nyelven lehet megtenni. Ehhez az Excel beépített Visual Basic For Application szerkesztőjét használtam.

2.1. Visual Basic

A Visual Basic (2.1. ábra) első verziója a Microsoft Windows 3.0-ás rendszeren jelent meg először, 1991-ben. Szintaxisához a nagy múlttal rendelkező, főként Com- modore korszakból ismert BASIC nyelv szolgált alapul. A Visual Basic-be bekerültek modern eszközök, így egy eseményvezérelt, de nem teljesen objektumorientált nyelv született. Nagyon hamar népszerű lett, hiszen egy gyors és hatékony vizuális eszközt adott a Windows alkalmazás fejlesztők kezébe a Microsoft, továbbá az előd népsze- rűsége is számottevő volt. Az utolsó verziót (Visual Basic 6.0) 1998-ban adták ki. A továbbiakban sikeres fejlesztések alapjául szolgált. Ilyen fejlesztés volt a VBA (Visual Basic for Application), amely az Microsoft Office programcsomag makrónyelve, vala- mint a VBScript (Visual Basic Scripting Edition), ami pedig a Windows operációs rendszer szkriptnyelve lett [6].

2.1. ábra. Visual Basic logója [5]

13 Visual Basic for Application A Microsoft Windows alatt futó Excel makrók Prog- ramozási nyelve a VBA azaz Visual Basic for Application (2.2. ábra). Ez a Visual Basic leegyszerűsített változata, melyet mellékelnek a legtöbb Microsoft Office csomaghoz. A makrók programozásához szükség van a Visual Basic editorra ami a fejlesztőeszközök fül alatt, a forráskód ikonra kattintva érhető el [6]. Az Excel programozásában kevésbé járatos személyeknek is lehetőségük van makrót készíteni, bizonyos lépéseket előre felvenni, melyből szintén Visual Basic kód generáló- dik, amit aztán szabadon módosíthatunk, lefuttathatunk. A makrók űrlap vezérlőelemekhez, vagy billentyűkombinációkhoz is kapcsolhatók, melyek aktiválva lefuttathatók. Az Excel makrókban lehetőségünk van:

• Változókat létrehozni

• Algoritmus szerkezeteket irányítani

• Adat be/kivitelre

• Eljárásokat és függvényeket készíteni

Valamint az összes Excel funkció rendelkezésre áll ebben a környezetben is. Léteznek kiegészítések is, amelyekkel további funkciók adhatók hozzá a VBA ké- pességéhez, ilyen a Microsoft VBScript Regular Expressions 5.5, ami a reguláris kife- jezéseket teszi elérhetővé.

2.2. ábra. Visual Basic for Application logója [7]

Reguláris kifejezések A reguláris kifejezések, röviden regexp, vagy regex a stringek- ben való rugalmas keresési kulcsszavak megadására használható, kereső és helyettesítő programokban. A regex egy minta, amelyre sokszor egynél több konkrét string is illesz- kedik. Amikor nem tudjuk megnevezni a minta összes elemét, az azt leíró szabályokat adjuk meg [8, 9]. A legtöbb programnyelv támogatja, vagy létezik hozzá kiegészítés (lásd Microsoft VBScript Regular Expressions 5.5-t). A Visual Basic-kel generált .csv fájl-t valamivel fel kellett dolgoznom, és adatbázis- ba tennem. Ehhez írtam PHP-ban egy feldolgozó szkriptet, ami a létrehozott MySQL adatbázisba teszi be az adatokat, melyek a saját gépemen kialakított WAMP szerver- környezet elemei. Ezen környezet kialakításához a Romain Bourdon által összeállított WampServer 3.0.0 64-bites verzióját használtam [10].

14 2.2. WampServer környezet

A WampServer környezet (2.3. ábra) összetevői:

• Apache 2.4.17

• MySQL 5.7.9

• PHP 5.6.15

• phpMyAdmin 4.5.1

• phpSysInfo 3.2.3

• SQLBuddy 1.3.3

• Xdebug 2.3.3

2.3. ábra. A WampServer logója [11]

Apache A dinamikus webalkalmazás fejlesztéséhez szükségem volt egy webszerverre, amin majd a webalkalmazás futhat. Erre a saját infrastruktúra hiánya miatt a máig népszerű Apache (2.4. ábra) alkalmazásszervert használtam, melynek nagy szerepe volt az Internet elterjedésében. Az Apache projektet rendszergazdák, webmesterek kezdték el. Az Apache projekt célja egy olyan webszerver applikáció létrehozása, karbantartása és fejlesztése, amely megfelel a gyorsan változó Internet követelményeinek. Továbbá biztonságos, illetve üzleti és vállalati felhasználásra is egyaránt megfelelő valamint sza- badon használható, módosítható. Az Apache webszervert a legtöbb modern operációs rendszerre elkészítették, nyílt forráskódú, és az Apache szoftverlicenc 2.0 verziója alatt módosítható, terjeszthető [12].

2.4. ábra. Apache logója [13]

15 MySQL A nagy mennyiségű feldolgozott adatot valahol tárolnom kellett, méghozzá olyan formában, hogy a későbbiekben a lehető leggyorsabban és leghatékonyabban el tudjam érni a számomra szükséges adathalmazt. Erre a célra ismereteim szerint legal- kalmasabb egy adatbázisszerver. Adatbázis szervernek az egyik legnépszerűbb, nyílfor- ráskódú MySQL (2.5. ábra) szervert választottam. Ez a megoldás egyébként a teljesen nyílt forráskódú, költséghatékony LAMP (Linux-Apache-MySQL-PHP) összeállításnak is része. Talán ennek köszönheti népszerűségét. A szoftvert eredetileg a svéd MySQL AB fejlesztette, melyet 2008-ban felvásárolt a Sun. Jelenleg a MySQL az Oracle tulajdonában van, miután a Sun-t 2010-ben felvásá- rolta. Szolgáltatásai az egyedi interfészekkel a legkülönfélébb programozási nyelvekből is elérhetőek, de natív nyelven programozni ANSI C-ben lehet [14]. A megfelelő tárolómotor kiválasztására nagy gondot kell fordítani. A MySQL több- féle adatbázis motort támogat, az 5.7-es verziószámtól alapértelmezetten az InnoDB van kiválasztva, de itt is érvényes az az alapelv, hogy ha valami sokat ad, az lassabb. Az InnoDB támogatja az idegenkulcsokat, és a sorszintű lockolást, azaz ha csak egy sort szeretnénk megváltoztatni, nem lockolja az egész táblát, hanem csak az adott sort a művelet idejére. Én is az InnoDB adatbázismotort használtam [14].

2.5. ábra. MySQL logója [15]

PHP Az Excelből kinyert, majd a szerverre feltöltött csv-fájlok feldolgozására, és az adatbázis műveletek elvégzésére PHP (2.6. ábra) szkripteket használtam. A PHP egy szerveren futó általános szkriptnyelv, melynek első verzióját Rasmus Lerdorf 1995-ben adta ki. Kezdetben csak egy eszközkészlet volt, melyet a személyi honlapok karbantartására használtak. Innen ered a név is, Personal Home Page tools. Később egyre több minden került bele, önálló nyelvvé fejlődött, így a nevét is módosították, PHP Hypertext pre- processor lett. Napjainkban a The PHP Group felel a fejlesztésért. A PHP is szabad szoftver, de nem GNU licenc alatt, mert a nevére megkötések vannak érvényben. Dinamikus weblapok készítésére használják. A PHP szkripteket az Apache kiszolgáló egy PHP motoron futtatja le, majd a kimenetet elküldi a kliensnek, aki valamilyen formában feldolgozza, vagy megjeleníti azt. Magát a szkriptet nem kül- dik el a kliensnek [16]. PHP-t szokták alkalmazni az olyan kritikus műveletekhez, melyekhez a kliensnek nem szabad hozzáférni, mint például az adatbázis kezelése vagy a jelszókezelés.

16 2.6. ábra. PHP logója [16] phpMyAdmin Az adatbázis struktúrájának kialakítására, és az alapadatok felvite- lére a phpMyAdmin (2.7. ábra) grafikus adatbázis-kezelő alkalmazást használtam, ami egy nyílt forráskódú PHP-alkalmazás, mely MySQL szerver és adatbázisok kezelésére alkalmas. Táblák, mezők módosítása, valamint SQL parancsok futtatására használják. Admin jogosultság esetén képesek vagyunk segítségével a felhasználók menedzselésére, jogainak korlátozására. Ezt az eszközt Tobias Ratschiller 1998-ban kezdte fejleszteni, azzal a céllal, hogy lét- rehozzon egy PHP-alapú MySQL-kezelőfelületet. 2001-ben Olivier Müller, Marc Delisle és Loic Chapeaux vette át az eszköz fejlesztését, és bejegyezték a The phpMyAdmin Project -et. Jelenleg, 2016-ban már a 4.6.4-es verziója is elérhető és folyamatosan frissül. Maga a program igen népszerű, széles körben elterjedt, mára már 72 nyelven elérhető és sok Linux disztribúció is tartalmazza. Számos elismerést kapott (SourceForge.net hónap projektje és Community Choice Awards díj) [17].

2.7. ábra. A phpMyAdmin logója [17] phpSysInfo Michael Cramer és Uriah Welcome 1999-ben hozták létre a phpSysInfo (2.8. ábra) projektet, ők 2008 és 2009-ben kiszálltak a fejlesztésből, jelenleg Mieczyslaw Nalewaj fejleszti, aki 2009-ben csatlakozott a projekthez. A phpSysInfo egy PHP-ban írt nyílt forráskódú segédeszköz, aminek segítségével, a hálózaton keresztül egy böngé- szőben figyelhető a szerver állapota. GNU GPL v2 licenc vonatkozik rá [18].

2.8. ábra. phpSysInfo logója [19]

A phpSysInfo az őt futtató szerverről a kiinduló konfigurációval az alábbi informá- ciókat szolgáltatja:

17 • Hardver (milyen eszközökből áll össze a gép)

• Az operációs rendszer adatai (verzió, architektúra, utolsó újraindítás dátuma, futásidő, nyelv, kódlap, processzek száma)

• Memória használat (az összmemória mérete, abból mennyi a felhasznált és mennyi szabad)

• Csatlakoztatott fájlrendszerek (csatlakozási pontja, fájlrendszer típusa, eszköz típusa, partíció mérete, abból mennyi a felhasznált és mennyi szabad)

• Hálózat adatai (eszközök, fogadott és küldött adatmennyiség, hibaszám)

Tudása bővítményekkel bővíthető, például a ventilátorok fordulatszámát is lehetőség van figyelni az lm-sensors bővítménnyel. Felülete témázható, sok nyelvet támogat, töb- bek között a magyart is. A legtöbb modern operációs rendszert támogatja.

2.9. ábra. A saját asztali számítógépem adatai az alapkonfigurációval

SQLBuddy Az SQLBuddy (2.10. ábra) szintén egy nyílt forráskódú, MIT szoftver- licenc alatt lévő, könnyűsúlyú adatbázis-kezelő segédeszköz. 2008-ban kezdte el fejlesz- teni Calvin Lough. Sokan kedvelték a könnyű telepíthetőség és az egyszerű használat miatt. A telepítés annyiból áll, hogy a weboldalunk gyökerébe kell kicsomagolni, és már használható is. Támogatja a SQLite és MySQL adatbázisokat. 2011-ben a fejlesz- tés abbamaradt, azóta a projekt mögött lévő github projekt is megszűnt, ezért csak korlátozott információ állt rendelkezésemre [20].

2.10. ábra. SQLBuddy logója [20]

18 Xdebug Az Xdebug (2.11. ábra) egy nyílt forráskódú kiegészítés a php-hoz, melyet Derick Rethans hozott létre 2002-ben, saját licenc alatt. Az Xdebug elsődleges célja a futás közbeni hibafeltárás. Segítségével olyan hasznos információkhoz juthatunk me- lyeket másképpen csak igen nehezen, vagy egyáltalán nincs lehetőség kideríteni. Ilyen például, hogy egy adott függvényt melyik függvény hívta meg, ez az Xdebug haszná- latával a xdebug_call_function() függvénnyel azonnal kideríthető [21].

2.11. ábra. Xdebug logója [21]

Ezzel az összeállítással sok időt és energiát spóroltam meg, hiszen csak minimá- lis konfigurációra volt szükség. Igaz, hogy így nem tudtam teljes egészében a saját kezemben tartani a rendszerem, ezért egy éles rendszerre nem ajánlott az alkalmazása, de számomra, hogy megalkossam a saját tesztrendszerem, tökéletesen megfelelt.

2.3. A webalkalmazás felülete

A szerverkörnyezet feltelepítése és bekonfigurálása, valamint az adatbázis létreho- zása után következett a webalkalmazás felületének kidolgozása, amihez HTML, CSS elemeket és a Bootstrap3 keretrendszert alkalmaztam.

2.3.1. HTML A HTML (2.12. ábra) (HyperText Markup Language) a legnépszerűbb jelölőnyelv, melyet a weboldalak szerkesztéséhez fejlesztettek ki. Mára szabványosították, a szab- ványt a W3C felügyeli. A HTML5 a korábbi HTML verziók átdolgozásából született meg, mely során a legfőbb szempont volt hogy ne legyen szükség külső bővítmények (Pl: Adobe Flash player) telepítésére a webalkalmazások megfelelő működéséhez [22].

2.12. ábra. HTML5 logója [22]

19 2.3.2. CSS A CSS (2.13. ábra) (Cascading Style Sheets) egy stílusleíró nyelv, ami strukturált dokumentumok megjelenését írja le. Elsősorban HTML vagy XHTML típusú dokumen- tumokhoz használják, de használható bármilyen XML alapú dokumentum leírására is. Megadhatjuk vele, hogy a HTML egyes elemei hogyan és hol jelenjenek meg az oldalon. Pozícionálhatjuk őket, módosíthatjuk azok elhelyezkedését, színét és méretét is [22]. A CSS-t Hakon Wium Lie és Bert Bros fejlesztette ki. Az első verziója 1996-ben jelent meg hivatalosan, majd 1998-ban a második verziója is megjelent. A harmadikat jelenleg is fejlesztik, de pár késznek nyilvánított funkcióját már támogatják a modern böngészők, így a fejlesztők is használhatják. 1997 elejétől a w3c felügyeli a szabványt [22, 23]. A CSS szintaxisa az elem kiválasztásával kezdődik, hivatkozhatunk magának az elemnek a nevével, létrehozhatunk új elemeket, de legtöbbször csak az elem osztályne- vével vagy azonosítójával hivatkozunk egy-egy elemre. A hivatkozáson belül tudjuk az adott elem tulajdonságait megadni [24]. A tulajdonságokat a következő formában adhatjuk meg: a tulajdonság neve, egy kettőspont, majd az adott tulajdonság értéke. A CSS3-ban egyéb módosító kulcssza- vak is megjelentek, valamint lehetőség van az egyes böngésző motoroknak más más parancsokat adni.

2.13. ábra. CSS3 logója [25]

2.3.3. Bootstrap A Bootstrap (2.14. ábra) napjaink legnépszerűbb front-end keretrendszere, melyet Mark Otto és Jacob Thornton Twitter-alkalmazottak belső használatra fejlesztettek ki. Később, 2011-ben közzétették MIT licenc alatt. Népszerűségét misem bizonyítja job- ban, minthogy a GITHUB projektmegosztó portálon az első helyek között található a projekt. Az alap HTML struktúra és a CSS tulajdonságok mellett rendelkezik számos JavaScript bővítménnyel is. A hármas verzió rácsrendszerét a kis kijelzőkhöz is opti- malizálták, ami a mai okostelefonos világban elengedhetetlen [26]. Jelenleg a négyes verzión dolgoznak, mely 2016. október végén az alpha5-ös státuszban volt elérhető. Ezek után az oldal működésének biztosítása volt a feladat, ami JavaScript-ben van implementálva, melyhez a jQuery könyvtárat használtam. Az oldalon található selectboxok pedig Select2 alapúak.

20 2.14. ábra. Bootstrap logója [27]

2.4. JavaScript

A JavaScript (2.15. ábra) egy könnyűsúlyú, interpretált szkriptnyelv. Általában a böngésző JavaScript motorja futtatja, de manapság megjelentek más, nem böngészőre épülő futtatókörnyezetek is. Az ECMA szabványok alapján kiadott változata az EC- MAScript. Jelenleg az ECMAScript 5.1-es verzióját támogatják a modern böngészők [28, 29].

2.15. ábra. JavaScript nem hivatalos logója [30]

2.4.1. jQuery A jQuery (2.16. ábra) egy nyílt forráskódú JavaScript függvénykönyvtár, melynek első stabil kiadása 2006. augusztus 26-án jelent meg. Készítője, John Resig, a Mozilla alapítvány egyik legkiválóbb JavaScript fejlesztője, aki MIT és GNU kettős licence- léssel tette elérhetővé azt. Támogatja az eseménykezelést, CSS manipulációt, illetve az AJAX technológiát. A jQuery fejlesztői közössége számos plugint hozott létre, me- lyekkel tudását bővíthetjük. Ilyen például az általam is használt Select2 [31, 32, 33].

2.16. ábra. jQuery logója [32]

2.4.2. Select2 A Select2 (2.17. ábra) egy jQuery alapú nyílt forráskódú selectbox komponens, ame- lyet egy kis létszámú közösség fejleszt. A komponenst a MIT licenc alatt adják ki. Első verziója 2012 márciusában jelent meg. A Select2 jQuery segítségével felülírja a HTML alap selectboxát. Jelenleg több mint 40 nyelvet támogat, köztük az RTL (jobbról balra

21 írás) nyelveket is. Segítségével lehetőségünk van a selectbox tartalmát jQuery segít- ségével egyszerűen egy megfelelő struktúrájú adathalmaz megadásával feltölteni, akár adatbázisból is. A Select2 támogatja az elemek közti keresést. Teljesen testreszabható, témázható. Maximálisan támogatja a Bootstrap keretrendszert [34].

2.17. ábra. Select2 logója [34]

2.5. Egyéb fejlesztést segítő eszközök

2.5.1. NetBeans Az oldal fejlesztésére a NetBeans (2.18. ábra) integrált fejlesztőkörnyezetet hasz- náltam. A NetBeans egy Java alapú integrált fejlesztői környezet (IDE), mely szintén a Sun Microsystems, majd az Oracle Corporation tulajdona. 2000 júniusában jelent meg. Bár Java nyelven íródott, de más programozási nyelveket is támogat. Lehetővé teszi prog- ramok írását, tesztelését. Teljesen ingyenes, nyílt forráskódú termék.

2.18. ábra. NetBeans logója [35]

Elsősorban a modern Java technológiákhoz szánták a fejlesztők. Ettől függetlenül az IDE rendelkezik más technológiákhoz szükséges telepítő csomaggal is. Így egy PHP- projekt létrehozása sem okoz gondot neki [35].

22 2.19. ábra. NetBeans fejlesztés közben

2.5.2. GIMP A munkámhoz felhasznált képek, animációk az Internetről származnak, melyeket a GIMP (2.20. ábra) képszerkesztő szoftver segítségével alakítottam át, az általam kívánt formára. A GIMP (GNU Image Manipulation Program) egy képszerkesztő program, mely elérhető a legtöbb operációs rendszeren, így a Windows, Linux és Mac is támogatja. Linux esetén valószínű, hogy a disztribúció tartalmazza, Windows és Mac esetén viszont telepíteni szükséges. Ez a pixelgrafikus képszerkesztő program Spencer Kimball és Peter Mattis nevéhez fűződik, mely közel 21 éves pályafutása alatt igen népszerűvé vált. Folyamatosan frissül, szabadon terjeszthető és ingyenesen használható [36].

2.20. ábra. Wilber a művész, Tuomas Kuosmanen rajza, melyet 1997-óta használják logóként [37]

1996-ban jött létre az első, igazán használható változat. A Photoshop mintájára készült, de ekkora már olyan elemeket is tartalmazott, amiket a Photoshop nem (pl. több lépcsős visszavonás). Ennek a 0.54-es verziónak az elterjedése a Linuxhoz köthető (jelenleg a 2.8.18-as is elérhető), mellyel a híres TUX figura, a Linux kabalaállata (2.21. ábra) is készült. Számos tévhittel ellentétben a GIMP nem a Photoshop utánzata, hanem inkább egy kiegészítése. A webszerkesztő cégek előszeretettel használják a drága licencek helyett az ingyenes szoftvereket, így a GIMP-et is [37].

23 2.21. ábra. A korai verzió és TUX [37]

A program használatakor, az alapos munka és képkidolgozás érdekében szükség lehet nagy betekintési szögű monitorra, hogy a képernyő teljes egészén ugyanúgy lássuk a színeket. Igazán profi munkák készítéséhez koloriméter és nyomásérzékeny digitalizáló tábla is ajánlott, de nem feltétlenül szükséges [38].

24 3. fejezet

Megvalósítás

Az alkalmazás létrejöttének számos előzménye volt, egészen az adatok kinyerésé- től kezdve, az adatbázis létrehozásán át, az oldal megjelenési stílusának kialakításáig. Minden lépés során szükség volt olyan eszközök (részletes ismertetésük a 2. fejezetben) alkalmazására, melyek lehetővé tették az adatok feldolgozását, a fejlesztői környezet kialakítását, az adatbázis létrehozását és elősegítették a webalkalmazás végleges for- májának kialakítását.

3.1. Adatok kinyerése

Az általam felhasznált Alkalmazott Informatikai Intézeti Tanszék órarendjei Mic- rosoft Excel táblákban (3.1. ábra) vannak eltárolva. Ezeket egy VBA makró segítségével hoztam számomra megfelelő alakra. Melyhez a Microsoft VBScript Regular Expressions 5.5 kiegészítését telepítettem. Az adatok kinyerésének menete a következő volt:

• Mivel egy héten 6 oktatási nap van, ezért az első, a napokon végigmenő FOR ciklusnak 6-szor kellett lefutnia. Ez rögzítve van.

• Egy nap több egymással párhuzamos óra is fut, melyek a nap összevont cellája alatt vannak több oszlopban elrendezve, ezért lekérdeztem az összevont oszlopok számát. Ezt a Cells(sorIndex, oszlopIndex).MergeArea.Count függvénnyel lehet megtenni, mivel a számomra itt szükséges adat a második sorban helyezkedik el, ezért a sorindex mindig 1, az oszlopindex pedig egy változó, melynek kez- dőértéke 2. Az összevont oszlopok száma azt adja meg, hogy mennyiszer kell a második FOR ciklusnak lefutnia, mely a napokon végigmenő FOR ciklusba van beleágyazva.

• A második FOR cikluson belül fut egy harmadik is, mely a napokon belüli órá- kat szimbolizálja. Ennek a ciklusnak, mivel az órarendben 8 - 20 óráig vannak felsorolva az időpontok, 12-szer kellett lefutnia. Ez is rögzített.

25 3.1. ábra. Tanszéki órarendek [39]

Szükséges változók deklarálása, alapértékek megadása.

For nap = 1 To 6 For oszlop = 0 To Cells(1, oszlop).MergeArea.Count - 1 For sor = 2 To 13

Ellenőrző műveletek, adatok összeszedése, szűrése regexp-pel, majd hozzáadása a binary stream-hez.

Next sor Next oszlop

Az oszlopindex változót megnövelése az aktuális cella összevont oszlopainak számával.

Next nap Az adatok kiirása a bináris folyamból .csv fájlba, a bináris folyam lezárása.

• Ezek után különbséget kellett tenni az üres és foglalt cellák között. Az adott cella háttérszínének vizsgálatával eldönthető, hogy ami a fehértől eltérő, ott óra van. Ekkor újabb elágazásokra volt szükség. Ezekben megvizsgáltam:

– Rögzítve van-e az óra kezdete. Ha nincs, akkor rögzítem. – Az óra adatait összeszedő String változó üres-e? Ha üres, egyenlővé tesszük a cella tartalmával. Ha nem üres, akkor hozzáadjuk a cella tartalmát, továbbá ekkor a hossz változóhoz is hozzá kell adni egyet.

26 – Ha az aktuális cellának az alsó szegélye xlContinuous típusú, akkor ott az órának vége van. Ezután megállapítottam az óra típusát és regexp-pel ki- szűrtem a zavaró adatokat, majd a hasznos adatokat hozzáadtam a bináris folyamhoz. Végül ezeket a változókat visszaállítottam az eredeti értékükre.

• Mielőtt a következő napra ugrottam volna, a következő körben vizsgálandó osz- lopindexet meg kellett növelem a mostani körben kapott értékkel.

• Miután lefutott mind a 6 nap, kimentettem a bináris folyamot egy .csv fájlba, majd lezártam a folyamot.

A fenti algoritmussal a következő formára hoztam az órákat: műsz. inf. Kné F. M. GEIAK210-B G1BG2 A1/201 ; gyakorlat ; 12 ; 2 ; 2

Ami nem más mint: ; <óratípus> ; ; ;

3.2. Adatok feldolgozása

3.2.1. Feltöltése a szerverre Az előző fejezetben bemutatott Excel makró segítségével kimentett .csv fájlt feltöl- töttem a webszerverre, egy egyszerű admin felületen lévő HTML Form segítségével és PHP-val feldolgoztam. A fájlfeltöltéshez a PHP motorban engedélyezni kellett a fájl- feltöltést. Ezt a php.ini fájlban a file_uploads értékének on-ra állításával tettem meg. A saját számítógépemen kialakított WAMP szerverkörnyezet elemei közé tartozik a MySQL adatbázis szerver, melybe az adatok kerültek.

3.2.2. Adatbázis táblák létrehozása az Excelből exportált ada- tokkal A fájl feltöltése után kezdődhetett el a feldolgozás, mely a következő lépésekből állt:

• A feltöltött fájlt ellenőriznem kellett, hogy megfelelő-e a mérete és a kiterjesztése, ha nem, hibaüzenetet küldtem.

• Csatlakoztam az adatbázis szerverhez, lekérdeztem a Neptun kódokat a tárgyak táblából, a rövidítéseket az oktatók táblájából, és a csoportkódokat a csoport táb- lából. Ezeket a táblákat előzetesen kézzel hoztam létre és töltöttem fel adatokkal. A lekérdezések után külön-külön, egy-egy tömbben lettek tárolva.

• Létrehoztam az adatbázis táblákat az aktuális félév számára, amelyet az Admin felületen lehetett kiválasztani.

• Egy WHILE ciklus segítségével végigmentem a feltöltött .csv fájl minden egyes során, melyek mind-mind külön órának felelnek meg. Az órákat feldolgozó ciklus a következő lépésekből állt:

27 – A feldolgozás kezdetén az aktuális órának megfelelő sort pontosvesszők men- tén feldaraboltam a explode függvénnyel. Ezután kiírtam az így kapott ré- szeket, melyek már nem tartalmaztak pontosvesszőt. – Megállapítottam az aktuális óra helyét, típusát, időpontját és időtartamát. Ezek az adatok a sorban mindig ugyanazon a helyen voltak megtalálhatók, továbbá mindegyikből csak egy van, így ezeket elég egy-egy változóba tenni. – A korábbiakban lekérdezett és "oktatok" nevű tömbben eltárolt oktató rövi- dítéseken elindítottam egy FOREACH ciklust. Az "oktato" nevű ciklusvál- tozó tartalmazza az aktuális elemet. Amennyiben az aktuális sor tartalmazza a változó értékét, akkor ezt az értéket kimentettem egy másik változóba. Az aktuális sorban, tőle balra található részt is eltároltam az elválasztó szóköz kihagyásával, az ellenőrző sorok kiírása céljából. Mivel a soron belüli oktató megvan, a break paranccsal megszakítottam a ciklust. – A lekérdezett Neptun kódok tömbjéből megkerestem azokat a Neptun kó- dokat, melyek az adott tárgyhoz tartoznak, majd ezeket egy másik tömbbe tettem, mert egyes tárgyaknak több Neptun kódja is lehet. Hasonlóképpen jártam el a csoportkódokkal is. Bizonyos sorokban azonban nem található Neptun kód vagy csoportkód, mint például a konzultációknál. Ezért ezeket a sorokat kiszűrtem az alábbi kóddal, mert az előzetesen rögzített szoftverspecifikációk alapján ezen be- jegyzések nem kerülnek be az adatbázis táblákba. A szűrést megvalósító kódrészlet: foreach ($neptunkodok as $neptunkod) { if (strpos($line, "konzultáció") !== false) { break; } if (strpos($line, "Konzultáció") !== false) { break; } if (strpos($line, "LEVELEZŐS") !== false) { break; } if (strpos($line, "kari referensi feladatok") !== false) { break; } if (strpos($line, "Referensi feladatok") !== false) { break; } if (preg_match("#\\s".strtolower($neptunkod)."\\s#",strtolower($line))) { $targyneptunkodok[$ss] = $neptunkod; $ss++; $szukseges = 1; } } – Ha nem találtam meg a tárgy oktatóját, vagy nem találtam Neptun kódot, illetve csoportkódot, hibaüzenetet hagyok és megyek a következő sorra. Ez nem azt jelenti, hogy az összes csoportot, vagy Neptun kódot megtaláltam, de ez is egyfajta biztosíték. – Ha azonban megtaláltam a tárgy oktatóját, Neptun kódot és csoportot is találtam legalább egyet, az eredetihez hasonló stílusban kiírok egyet a talált adatokkal is a változókból, így ha valamit nem talált meg, vagy rosszul van beírva, azt lehetőségem van észrevenni és korrigálni. Amennyiben mindent helyesen megtaláltam az aktuális bejegyzésen belül, a szkript kimenete a következő lesz:

28 műsz. inf. Kné F. M. GEIAK210-B G1BG2 A1/201 gyakorlat 12 2 2 műsz. inf. Kné F. M. GEIAK210-B G1BG2 A1/201 gyakorlat 12 2 2

– Ezek után a talált adatokat soronként beillesztettem az adatbázisba, a 3. lépésben létrehozott táblákba a következő kód szerint:

$sqlinsert = "INSERT INTO ‘szakdolgozat‘.‘ev" . $felev . "‘ (‘Id‘, ‘nap‘, ‘kezdodik‘, ‘hanyoras‘, ‘terem‘, ‘tipus‘, ‘OID‘) VALUES (’" . $sqlid . "’, ’" . $nap . "’, ’" . $kezdodik . "’, ’" . $hossz . "’, ’" . $hely . "’, ’" . $oratipus . "’, ’" . $targyoktato . "’);"; if (!$conn->query($sqlinsert)) { echo ’Az adatbevitel sikertelen!’; } else { foreach ($targyneptunkodok as $neptunkod) { $sqlinsert = "INSERT INTO ‘szakdolgozat‘.‘targyak_ev" . $felev . "‘ (‘oraID‘, ‘neptunkod‘) VALUES (’" . $sqlid . "’ , ’" . $neptunkod . "’);"; if (!$conn->query($sqlinsert)) { echo $neptunkod . ’Az adatkapcsolat létrehozása sikertelen!’; } else { echo ’Az adatbázisba bekerült!’; } echo ’
’; } foreach ($targycsoportkodok as $csoportkod) { $sqlinsert = "INSERT INTO ‘szakdolgozat‘.‘csoportok_ev" . $felev . "‘ (‘oraID‘, ‘csoportkod‘) VALUES (’" . $sqlid . "’, ’" . $csoportkod . "’);"; if (!$conn->query($sqlinsert)) { echo $csoportkod . ’ Az adatkapcsolat létrehozása a csoportkóddal sikertelen!’; } else { echo ’Az adatbázisba bekerült!’; } echo ’
’; } echo ’Az adatbázisba bekerült!’; }

• Végül, ha az összes órán végigmentem, lezárom a fájlt és az adatbázis kapcsolatot, majd kiírok egy „success” üzenetet.

3.2.3. Adatok lekérdezése az alkalmazás számára A PHP-ban íródott lekérdezőt JavaScript-tel egy GET típusú AJAX kéréssel aktivá- lom, az oldalon található elemek interakcióival, majd egy JSON objektum formájában kapom meg a választ.

$.getJSON("DBConnect.php", {’query’: "targydataid", ’id’: "1", ’semester’: "2015/2016/1"}, function (json){ Itt már tudom használni a kapott json objektumot. }); Ezt a kérést fogadja a DBConnect.php fájlban lévő, az adatbázis kapcsolatot bizto- sító szkript, mely a neki szóló kérés érkezése esetén a megadott adatok alapján kapcso- lódik az adatbázisszerverhez. Beállítja, hogy a lekérdezéseim milyen kódlapon fussanak (UTF-8). Ezután lekérdezi a query kérésparamétert, melyben egy kulcsszó találha- tó. Ezen kulcsszó alapján keresi meg a megfelelő prepared statement-et. A prepared statement-ek megfelelő használatával elkerülhetőek a kódinjektálással történő támadá- sok. Viszont ezek nem támogatják a dinamikus táblamegadást, így ezt ahol szükséges, egyfajta input validációval értem el, regexp-ek használatával. Szoftverbiztonsági szem- pontból a 2*4+1 validált karakter kedvezőbb megoldás. A megtalált prepared state- ment-be, amennyiben szükséges, behelyettesíti a megfelelő kérésparamétereket. Az így

29 előkészített prepared statement-et lefuttatja. Az eredményét egy tömbbe teszi, amit az echo paranccsal ír ki a kimenetre. Végül lezárja a prepared statement-et és bontja a kapcsolatot az adatbázisszerverrel.

$conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->query("SET NAMES utf8"); $sql = $_GET[’query’];

.... további elágazások

if ($sql == "targydataid") { $hy = $_GET[’semester’]; preg_match_all("/\d{4}/ ", $hy, $matchs); preg_match("/\b\d\b/ ", $hy, $match); $halfyear = "ev" . $matchs[0][0] . "/" . $matchs[0][1] . "/" . $match[0]; $stmt = $conn->prepare("SELECT * FROM targyak WHERE targynev=(SELECT szakdolgozat.targyak.targynev FROM szakdolgozat.‘" . $halfyear . "‘ INNER JOIN ‘targyak_" . $halfyear . "‘ ON ‘" . $halfyear . "‘.Id = ‘targyak_" . $halfyear . "‘.oraID INNER JOIN targyak ON ‘targyak_" . $halfyear . "‘.neptunkod = targyak.neptunkod INNER JOIN oktatok on ‘" . $halfyear . "‘.OID = oktatok.rovidites where szakdolgozat.‘" . $halfyear . "‘.Id =? group by szakdolgozat.‘" . $halfyear . "‘.Id)"); $stmt->bind_param(’i’, $_GET[’id’]); } ....

$stmt->execute(); $rows = array(); $result = $stmt->get_result(); if ($result->num_rows > 0) { while ($r = $result->fetch_assoc()) { $rows[] = $r; } echo json_encode($rows); } else { echo json_encode(NULL); } $stmt?close(); $conn?close();

3.3. Webalkalmazás fejlesztése

3.3.1. A webalkalmazás szerkezetének kialakítása A webalkalmazás kinézetének alapszerkezetét a Bootstrap keretrendszer biztosítot- ta, melynek használatához az alábbi JavaScript, és . fáljokat kellett hozzáadnom az index.php-hoz. A Bootstrap megköveteli a jQuery osztálykönyvtárat, így azt is hozzá kellett itt adnom.

Az oldal hátterét, egy a Miskolci Egyetem Informatikai épületéről készült nagy fel- bontású kép (3.2. ábra) adja, amely a NanoPro Kft. referencia képe. Mivel nagy felbon- tású képre volt szükségem, ezért a kisebb fájlméret elérésének érdekében a minőségét GIMP-el le kellett rontanom, melynek optimális aránya 70 % volt.

30 3.2. ábra. A Miskolci Egyetem Informatikai épülete [40]

Az oldal tetején található a navigációs léc, rajta látható az alkalmazás ikonja (3.3. ábra) és neve. Mellettük vannak az egyes nézetekhez tartozó listaelemek (

  • ), ezek segítségével tudunk lépkedni az egyes nézetek között.

    3.3. ábra. Az alkalmazás ikonja, talár kalap [41]

    Alapértelmezettként a „Ki” nézet van kiválasztva. De a P attribútum segítségével felül lehet ezt bírálni. Az elemek közötti váltáskor a P attribútum értéke is megváltozik.

    A navigációs léc egyik eleme:

  • "> Mikor
  • Az aktuálisan kiválasztott elem kap egy „active” class-t, amely hatására a kivá- lasztott listaelem kiemelődik. Alatta a konténer DIV-en belül egy üveghatású DIV van elhelyezve, melyek tartalma a navigáción lépkedés során változik. A nézetek közötti vál- tásokért egy PHP-szkript felel, amely a P attribútum alapján, a különböző nézetekhez tartozó .php fájlokat illeszti be. Az üveghatást CSS formázással értem el:

    .glass_effect { padding: 10px 30px 40px 30px; border: 1px solid rgba(0,0,0,0.5); border-radius: 10px 10px 2px 2px; background: rgba(0,0,0,0.80); box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); --box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); }

    31 A nézetek közötti váltásért felelős PHP-szkript pedig a következő:

    if (!isset($_GET[’p’])) { include("who.php"); } elseif ($_GET[’p’] == "who") { include("who.php"); } elseif ($_GET[’p’] == "what") { include("what.php"); } elseif ($_GET[’p’] == "when") { include("when.php"); } elseif ($_GET[’p’] == "whose") { include("whose.php"); } elseif ($_GET[’p’] == "where") { include("where.php"); } else { include("who.php"); }

    Mindegyik nézetben található a Select2 elemből. Ezt az elemet egy sima HTML-es select elemként kellett definiálni, egy letiltott, és egyben kiválasztott opcióval, a HTML kódban, ugyanis ez az opció lesz, amin megjelenik az alapértelmezett szöveg. A Select2 elemeket az alábbi módon hoztam létre:

    HTML elem deklaráció:

    Majd az alábbi JavaScript kóddal változtattam meg Select2 elemmé:

    $.getJSON("DBCOnnect.php", {’query’: "oktatok"}, function (json) { $(’#oktatoselect’).select2({ data: json, placeholder: "Oktatók", dropdownAutoWidth: true, width: "resolve", theme: "classic", language: "hu" }); });

    A 3.2.3-as fejezetben bemutatott PHP-szkriptnek küldtem tehát egy GET kérést a query= ”oktatok” kérésparaméterrel. A PHP-szkript fogadja, elágazással megkeresi a megfelelő select függvényt, majd lekérdezi az adatbázisból. Végül JSON formában visszaadja az eredményt alakban. A jQuery selector-ral megkeres- tem a megadott ID-vel rendelkező select elemet, és megváltoztattam Select2-vé. Ezután a beállítás paraméterekkel, a PHP-szkripttől kapott JSON objektummal beállítottam a tartalmát (data), illetve amikor megjelenik, azt is, hogy milyen felirat (placeholder) legyen benne. Itt állítottam be, hogy lenyitása esetén automatikusan átméretezze-e magát, továbbá a szélesség, téma és nyelv paraméterét. Kis módosításokkal a fenti paraméterbeállításokkal dolgoztam minden Select2 esetében.

    3.3.2. Nézetek Ez a fejezet ismerteti a felhasználó által választható nézeteket. A főmenüből itt lehet kiválasztani, hogy mely szempont alapján szeretnénk rákeresni a kérdéses információra (Ki, Mit, Mikor, Kinek, Hol).

    32 KI Itt az oktatók közül választhat az oldalra látogató. A „Ki” nézeten látható egy Farnsworth professzor logó (3.4. ábra), amire ha ráviszem a kurzort, egy CSS3 animáció (pörgés) indul el. A nézeten található még egy Select2 elem is. Ennek a Select-nek a beállításait az előző fejezetben leírtam.

    3.4. ábra. Farnsworth professzor [42]

    Az oktató kiválasztása egy „select2:select” eseményt generál, amit figyel egy ese- ménykezelő. Az esemény észlelésekor egy kéréssel lekérem az oktató adatait és megje- lenítem. Utána lekérdezem a legfrissebb félévet, amely fel van töltve az adatbázisba, melyet beírok a félévek között lapozó gombok közé. A gombokkal a félévek között lapoz- hatunk. Melyek, ha nincs több félév, átváltanak succes(zöld)-típusúról warning(piros)- ra, de ha ellapozunk a másik irányba, az időben visszaváltanak zölddé.

    2016/2017/2

    Alattuk található az órákat tartalmazó táblázat, melynek a megvalósítása talán az egyik legnagyobb kihívást jelentette számomra. Az órákat tartalmazó táblázat maga egy a table.php fájlban lévő HTML

    elem, amelyben az üres órarendet valósítottam meg. Ebbe kerülnek bele az órák. Az órákat JavaScript-tel tettem a megfelelő helyre. Megbonyolítja a dolgot, hogy a több órás órák miatt a többi óra elcsúszhat, így a táblázat is szétcsúszhat ilyenkor. Erre a megoldás egy tömb, melyben rögzítettem a több órás órák által létrehozott soronkénti elcsúszást, majd ezzel korrigálom a helyzetüket, és végül a táblát is. A másik nagy nehézséget az jelentette, hogy egy időpontban több ugyanolyan óra is futhat más oktatóval, illetve az órarendben az olyan anomáliák is nehézséget okoztak, amikor egy oktatónak több órája is fut egy időben. Ezt végül egy kétdimenziós tömbbel oldottam meg, melynek minden eleme egy-egy a napon belüli órának felel meg. A tömbben az aktuálisan vizsgált óra megfelelő elemeinek értékét az első adott időpontban átváltoztatom „van” értékre, amely azt jelenti, hogy ott, abban az időpontban van már óra. Így ellenőrizhetővé válik, hogy az aktuális óra számára kell-e létrehozni új oszlopot. A táblázatban az új oszlop létrehozását az alábbi kóddal oldottam meg:

    $("#tbody").find(’tr’).each(function () { var trow = $(this).find("td").eq(nap + eltolas); trow.after(’

    ’); })

    33 Ez a szkript végigmegy a táblázat sorain és minden sorba beszúr egy TD elemet a megfelelő helyre, így egy új oszlop jön létre. Ezt korrigálni kell a napokat jelző felső sorban a colspan attribútum segítségével. Ha az órákat tartalmazó cellák fölé visszük az egeret, a táblában kiemelésre kerül az óra, annak időintervalluma, és hogy melyik napon tartják. Rákattintva mindig az ellenkező nézet fog előjönni, vagyis oktató („Ki”) nézetben a tárgynak a nézete fog megjelenni, tárgy („Mit”) nézetben pedig az oktatóé jelenik meg. Ezeket az eseményeket is egy JavaScript eseménykezelő figyeli és hajtja végre, a színezés pedig a CSS dolga volt.

    MIT Az előző nézethez hasonló felépítésű oldal, melyen az oktatott tárgyakra kereshe- tünk rá. Itt egy SpongeBob SquarePants animáció (3.5. ábra) van elhelyezve, melynek a háttérszínét átlátszóvá tettem a GIMP képszerkesztő alkalmazás segítségével.

    3.5. ábra. A SpongeBob animáció egyik pillanatképe [43]

    Alatta szintén egy Select2 elem van elhelyezve „Tárgyak” felirattal, melyben az oktatott tárgyak vannak feltüntetve. A tárgy kiválasztását követően, itt is megjelennek a kiválasztott tárgy adatai, órarendje.

    MIKOR Ebben a nézetben az órák időpontjaira kereshet rá a látogató félév, nap, óra szerint. A felhasznált animáció Salvador Dalí: Az elfolyó idő c. alkotásából (3.6. ábra) született. A képből készült animációt körbevágtam és lelassítottam, így született meg a nézet animációja.

    3.6. ábra. Salvador Dalí: Az elfolyó idő [44]

    Ezt követi három Select2 elem, ezekben lehet kiválasztani a félévet, majd a napot, és ha szükséges, az órát is. Ezen adatok segítségével lekérdezem az adatbázisból az

    34 adott időintervallumban található órákat, majd egy táblázat segítségével az összeset kilistázom. Ha az egérmutató a kilistázott tárgyak fölé kerül, azt a sort kiemelem CSS segítsé- gével. Ha azonban rá is kattintunk a táblázat valamely órát tartalmazó sorára, akkor az, egy eseményfigyelőnek köszönhetően betölti az adott óra adatlapját („Mit” nézet).

    KINEK Felépítése hasonló az előző nézethez. Itt az adott képzésekre kereshetünk rá. Ki- választhatjuk a félévet, szakot, esetleg szakirányt. Az animációt a Miskolci Egyetem hivatalos bemutatkozó videójából vágtam ki (3.7. ábra) és alakítottam GIF animációvá a webes Imgur video converter [45] segítségével.

    3.7. ábra. A Miskolci Egyetem videójának pillanatképe [46]

    Az innen származó gif-et, GIMP segítségével tovább alakítottam a nekem megfelelő formára. Az oldalon alapesetben két Select2 elem található, egy félév, és egy csoport kiválasztó. Azonban, ha az adott csoporton belül található specializálódás, akkor az is megjelenik. Ezen adatok segítségével az előző fejezetben bemutatott táblázatot itt is legenerálom.

    HOL Ebben a nézetben a termekre kereshetünk rá, az adott félévet kiválasztva. Az itt található animáción látható, amint John Travolta frusztráltan érzi magát a Miskolci Egyetem XXXII. előadójában, mert nem tudja biztosan jó helyen jár-e (3.8. ábra). Ezt egy előadóról készült fénykép [47] és a „Confused Travolta” mém animációjából [48] állítottam össze, a GIMP képszerkesztő program segítségével.

    3.8. ábra. John Travolta a XXXII. előadóban [47, 48]

    35 Itt kettő Select2 elem található, félév és termek. Azonban a „Terem” kiválasztása mindaddig tiltva van, amíg a „Félév” nem kerül kiválasztásra. A félév kiválasztása után itt is azt a táblázatot generálom le, mint az előző két nézetben.

    36 4. fejezet

    Felhasználói dokumentáció

    Az oldal elsődleges célja az Intézeti / Tanszéki adminisztráció megkönnyítése, mely az immár hagyományossá vált Excel táblázatban készült, sokszor átláthatatlan óra- rendek elemeit teszi elérhetőbbé és követhetőbbé. Hasonló rendszerek már évek óta léteznek, nem csak egyetemek, hanem más intézmények körében is. Kisebb módosítá- sokkal ez a program az élet más területein való adminisztrációs helyzetekhez könnyen adaptálható.

    4.1. Felhasználói üzemmódok

    Az oldalra fellépve a látogatót az oldal felső részén egy navigációs léc fogadja, mely tulajdonképpen a főmenü, ahonnan a látogató kiválaszthatja, mire szeretne rákeresni. Kezdő beállításként az oktatókra kereső (Ki) menüpont van beállítva, de további lehetőségként rákereshetünk az adott tárgyakra (Mit), az időpontokra (Mikor), a hall- gatóságot kitevő szakokra (Kinek) és az órák helyszínére (Hol). Ezek a nézetek mind összehangoltan tartalmazzák a keresett információkat, más-más keresési paraméter sze- rint beállítva és kilistázva. Minden egyes menüpont további szűrési lehetőségeket tartalmaz, melyeket egy ál- landó, félig átlátszó és üveghatású általános tárolóelem foglal magába. Minden nézetnek saját animációja van, mely egyedivé teszi az oldalt.

    4.1.1. KI A Farnsworth professzorral egyedivé tett nézetben az oktatókról lehet további in- formációkhoz jutni. Az animáció alatt egy „Oktató” feliratú legördülő lista található, melyet lenyitva első sorában láthatjuk a kereső mezőt, alatta pedig az oktatók neveit (4.1. ábra). A kereső használatával szűkíthetjük a listát.

    37 4.1. ábra. A ”Ki„ nézet

    Az oktató kiválasztása után az adott oktató adatlapjára lépünk, amely az alábbi adatokat tartalmazza az adott oktatóról:

    • neve

    • beosztása

    • honlapja, ha van

    • email címe, ha van

    • az oktató által a jelenlegi félévben oktatott tárgyai egy órarendbe foglalva.

    Tartalmaz továbbá két gombot, melyekkel lapozgathatunk a félévek között. A gombok, amennyiben az adott irányban nincs több félév feltöltve, zöldről pirosra váltanak (4.2. ábra). A táblázatban, az egérmutatóval rámutatva az adott óra cellájára, kiemelődik az adott cella, továbbá az időintervallum, és a nap is. Az órára a bal egérgombbal rákat- tintva átkerülünk a kiválasztott tárgy adatlapjára, mely a következő fejezetben kerül bemutatásra.

    38 4.2. ábra. Az oktató adatlapja

    4.1.2. MIT Ebben a nézetben az oktatott tárgyakra kereshetünk rá, ahol egy SpongeBob ani- máció fogadja az idelátogatót. Alatta szintén egy legördülő lista található, tárgyak felirattal, melyben a tanszék által oktatott tantárgyak vannak felsorolva (4.3. ábra).

    4.3. ábra. A ”Mit„ nézet

    39 A adott tárgyat kiválasztva, szintén egy adatlapot eredményez, amely a következő információkat tartalmazza:

    • a tárgy neve

    • neptunkódja

    • kreditértéke

    • oktatási nyelve

    • adatlapja, ha van.

    Szintén tartalmazza az előző részben bemutatott táblázatot, itt természetesen az adott tárgy órái jelennek meg, továbbá ha a bal egérgombbal rákattintunk egy kiválasztott tárgyra, akkor az azt tartó oktató adatlapja jelenik meg (4.4. ábra).

    4.4. ábra. A tantárgy adatlapja

    4.1.3. MIKOR A „Mikor” nézetben az oktatott tárgyak időpontjára kereshetünk rá félév, nap és óra szerint, melyet Salvador Dalí: Az elfolyó idő c. alkotásának digitális képéből készült animációja színesít (4.5. ábra). További 3 legördülő lista is található az oldalon:

    • félév itt azt a félévet kell kiválasztani, amelyre a látogató kíváncsi

    • nap a hét oktatási napjai közül lehet választani

    • óra az adott napon belül mikor kezdődjön az óra, melyet meg akar tekinteni.

    40 A félév és a nap kiválasztása után egy táblázat generálódik, a kiválasztott napon lévő órák adataival. Az így kapott táblázatot tovább szűkíthetjük az óra kezdetének meg- adásával. Ha azonban a félév vagy a nap nincs kiválasztva, az óra kezdete kiválasztása esetén egy piros keret jelenik meg a hiányzó adat listája körül. Amennyiben a kurzort rávisszük a táblázat valamely tárgyat tartalmazó sorára, az adott sor kiemelődik, to- vábbá a bal egérgombbal történő kattintás esetén az adott sorban lévő tárgy adatlapja töltődik be.

    4.5. ábra. A ”Mikor„ nézet

    4.1.4. KINEK A „Kinek” nézet a képzéseket jeleníti meg, félévenkénti lebontásban. Itt lehet kivá- lasztani a keresett szakot, esetleg szakirányt. Az oldalon egy, a miskolci egyetemistákat bemutató videó egy részlete látható, alatta pedig kezdetben 2 legördülő lista. Amennyi- ben az adott képzésnek különböző szakirányai is vannak, egy harmadik is megjelenik (4.6. ábra):

    • félév: itt azt a félévet kell kiválasztani, amelyre a látogató kíváncsi

    • csoportok: azon csoportok közül lehet választani, amelyeket a tanszék oktat

    • szakirányok (opcionális): ha a kiválasztott csoporton belül van olyan szakirány, amelyen a tanszéknek az adott félévben van órája, akkor az megjelenik, így a felhasználó tovább szűkítheti a megjelent táblázatot.

    41 4.6. ábra. A ”Kinek„ nézet

    4.1.5. HOL A „Hol” nézetben az órák helyszíneire kereshetünk rá, szintén félévenkénti lebon- tásban. Az oldalon John Travolta animációja látható, a Mickolci Egyetem XXXII. előadójában (4.7. ábra). Itt két legördülő lista elem található:

    • félév, a már szokásos funkcióval

    • terem, amely mindaddig tiltva van amíg a félévet ki nem választottuk.

    Ezután a kiválasztott teremben lévő órák jelennek meg a már ismert táblázatban.

    4.7. ábra. A ”Hol„ nézet

    42 4.2. Admin üzemmód

    A feltöltési felületre belépéskor az adminisztrátori nevet és jelszót kell megadni. Itt belépés után egy HTML form segítségével lehet feltölteni az egyes félévekhez való .csv fájlokat. A HTML form-ban található egy file-input, ahol kiválasztható a feltöltendő .csv fájl, alatta 2 db legördülő lista található, amelyek segítségével kiválaszthatjuk a feltöltendő félévet. Ezek után a feltölteni kívánt félév látható, ellenőrzés céljából. Végezetül megjelenik egy elküldés gomb, amely segítségével elindul a feltöltés, majd az adatok feldolgozása.

    4.8. ábra. Az admin form

    43 5. fejezet

    Összefoglalás

    Az egyetemekre, csak úgy mint minden intézményre, komoly feladat hárul, mivel manapság mindent nyilván kell tartani. Az oktatói munka során nagy segítséget nyújt- hat egy számítógépes nyilvántartás az órarendről, tárgyakról, szakokról, termekről és ezek kapcsolatrendszeréről. A gyorsan bekövetkező változások (új szakirányok megje- lenése, csoportok számának váltakozása) pedig már egyenesen követhetetlenné teszik az oktatók számára az órarendben való kiigazodást, hogy adott időben éppen, kivel és hol, milyen órájuk van. A szakdolgozatomban kidolgozott webalkalmazás ebben nyújt az oktatóknak segít- séget, egy olyan webalapú többdimenziós oktatási tabló létrehozásával, mely az Alkal- mazott Informatikai Intézeti Tanszék oktatott tárgyainak órarendjét foglalja magába. Jelen esetben egyetlen tanszék óráinak adatbázisát töltöttem fel, de az alkalmazás ter- mészetesen feltölthető más tanszékek adataival is. Munkám kiterjed egészen az adatok feldolgozásától kezdve, a webalkalmazás létre- hozásán keresztül, egészen a webfelület design-jának kialakításáig. Hasonló rendszerek már több hazai és külföldi egyetemen léteznek. Az adatok, vagyis az Excel táblázatban készült órarendek elemeinek átalakítását és feldolgozását Excel makró hozzáadásával végeztem, amely az összeszedett adatot egy .csv fájlba írja ki. Ezt a .csv fájl-t importáltam a MySQL adatbázis szerverre, egy PHP- szkript segítségével. Így a szükséges adatokhoz már könnyedén hozzá tudtam férni. Az adatok lekérdezése PHP-ban definiált prepared statement-ekkel történik, a kliensoldal kezdeményezésére. Ezt követően a kliens oldalon a JavaScript a jQuery könyvtárával kiegészülve végzi az alkalmazás az adatok feldolgozását. A megfelelő megjelenés érdekében a Bootstrap keretrendszert alkalmaztam, kiegé- szítve saját CSS bejegyzésekkel és Select2 komponenssel. Segítségemre volt az adatbá- zis tervezésnél a phpMyAdmin nevű segédprogram is, mely grafikus felületet nyújt az adatbázis kezeléséhez. Ezek a rendszerek és eszközök nem csak az oldal megfelelő működését biztosították, hanem nagy szerepük volt a webalkalmazás személyes stílusának kialakításában. A felhasználó egy áttekinthetőbb képet kap az órarendekről, melynek keresett ele- meit szűrők segítségével választhatja ki. A főmenüben kiválaszthatja, mely informáci- óra szeretne rákeresni (Ki, Mit, Mikor, Kinek, Hol), majd ezt legördülő választéklisták segítségével tovább szűrheti, például: Oktató, Félév, Tárgy stb. szerint. A webalkalmazást egyedi design és részben saját szerkesztésű animációk teszik szí- nesebbé, mely nem volt elsődleges célkitűzése a munkámnak, viszont manapság elen- gedhetetlen egy webalkalmazás népszerűsítéséhez.

    44 Véleményem szerint ez a fejlesztés nem csak egy egyetemi órarend könnyebb értel- mezéséhez adhat segítséget, hanem több vagy kevesebb dimenzió megadásával számos területen alkalmazható. Bárhol, ahol komplex feladatok különböző nézetek alapján való megjelenítésére van szükség (pl. munkahelyi beosztások, időpont- és helyfoglalások).

    Summary

    The main aim of my project was to make it easier to see through the timetables for the Department of Information Engineering (Faculty of Mechanical Engineering and Infomatics, University of Miskolc, Hungary). Nowadays, this kind of web application plays an important role in the University administration and it offers a solution for the difficulties. During my work I tried to create a multi-dimensional education information panel which involves data such as teachers, subjects and lectures, furthermore time and place of these. Similar systems have already been available in different countries for more years. At first I had to process the details of timetables made in Excel. I used macros with MS Excel VBA and I saved the worksheets as .csv file type. I imported the file into MySQL database using PHP. Thereafter the client-side processing was made in JavaScript with jQuery. I applied Bootstrap framework for designing my site. It contains HTML elemenst and CSS-based templates. Additionally I used other tools (e.g. NetBeans, Select2) for my Web Application in order to develop the custom style (background, animations... etc.) of the site. Users will be able to filter the data according to different options, for example teachers, lectures, semesters, degree program and lecture halls. In my opinion this application can help not only in the University Administration, but it may also provides support in other areas of life.

    45 6. fejezet

    Köszönetnyilvánítás

    Elsősorban köszönettel tartozom témavezetőmnek, Dr. Dudás László egyetemi do- censnek, aki útmutatásaival segített megvalósítani munkámat. Egyúttal köszönöm családom támogatását és türelmét, akik időt és fáradságot nem kímélve segítettek végig a tanulmányaim során. Nem csupán anyagilag járultak hozzá tanulmányaim elvégzéséhez, hanem biztatásuk és türelmük is nagy segítség volt szá- momra. Továbbá köszönet illeti mindazon családtagot és barátot, akik jó tanáccsal láttak el munkám és a dolgozatírás során.

    46 Irodalomjegyzék

    [1] Miskolci Egyetem: A Miskolci Egyetemi központi órarend megtekintő rendszere. http://www.uni-miskolc.hu/orarend/ (2016.11.07)

    [2] University of Bedfordshire: Az angliai Bedfordshire Egyetem időbeosztási rendsze- rének staff nézete. ://timetable.beds.ac.uk/sws1617/staff.asp (2016.11.07)

    [3] University of Dundee: A skóciai Dundee Egyetem időbeosztási rendszerének staff nézete. https://timetable.dundee.ac.uk/Scientia/SWS/Dundee1617/staff.htm (2016.11.07)

    [4] Harvard University: Az amerikai Harvard Egyetem órakeresője. https://courses.harvard.edu/index.html (2016.11.07)

    [5] Pinterest: A Visual Basic logója. Online ötlettár. https://hu.pinterest.com/pin/376683956310540165/ (2016.11.07)

    [6] Bíró Csaba, Kovács Emőd (2011): Alkalmazói Ismeretek. Visual Basic és Makrók. Digitális Tankönyvtár. http://www.tankonyvtar.hu/hu/tartalom/tamop425/0038_informatika_ AlkIsm/ar01s16. (2016.11.07)

    [7] I Programmer: A Visual Basic for Application logója. Online magazin programozók számára. http://www.i-programmer.info/professional-programmer/i-programmer/ 2465-classic-vb-is-20-and-still-missed-by-many.html (2016.11.07)

    [8] ELTE Informatikai Kar: Programozási Környezet. Reguláris kifejezések. http://progkor.inf.elte.hu/regkif.htm (2016.11.07)

    [9] Wikipedia: Reguláris kifejezés. Szócikk a Wikipedia-ról. https://hu.wikipedia.org/wiki/Regul\%C3\%A1ris_kifejez\%C3\%A9s (2016.11.07)

    [10] Romain Bourdon: WampServer, a Windows web development environment. A WampServer hivatalos oldala. http://www.wampserver.com/en/ (2016.11.07)

    [11] Clubic: A WampServer logója http://www.clubic.com/telecharger/windows/serveurs/ (2016.11.07)

    47 [12] General wiki: Apache HTTP Server. http://wiki.apache.org/httpd/FAQ (2016.11.07) [13] Rasun Hegoda: Az Apache Server logója. Rasun Hegoda hivatalos oldala. http://dasunhegoda.com/hardening-securing-apache-http-server/699/ (2016.11.07)

    [14] MySQL Developer Zone: MySQL Documentation. MySQL 5.7 Reference Manual. http://dev.mysql.com/doc/refman/5.7/en/ (2016.11.07) [15] Servaux Sistemas Technologias: MySQL logója. http://www.servaux.com.mx/sistemas/ (2016.11.07) [16] PHP Documentation Group (1997-2006): PHP Manual (szerk: Peter Cowburn). https://secure.php.net/manual/en/ (2016.11.07) [17] phpMyAdmin Contributors (2003-2016): Bringing MySQL to the web (szerk: Michal Cihar). https://www.phpmyadmin.net/ (2016.11.07) [18] GitHub: phpSysInfo. README.md https://github.com/phpsysinfo/phpsysinfo (2016.11.07) [19] GitHub Pages: phpSysInfo logója. http://phpsysinfo.github.io/phpsysinfo/ (2016.11.07) [20] SQL Buddy: Web based MySQL administration. http://sqlbuddy.com/ (2016.11.07) [21] Derick Rethans (2002-2016): Xdebug Extension for PHP. Documentation. https://xdebug.org/docs/ (2016.11.07) [22] World Wide Web Consortium: Web design and applications. https://www.w3.org/standards/webdesign/htmlcss.html (2016.11.07) [23] World Wide Web Consortium: Cascading Style Sheets. https://www.w3.org/Style/CSS/software (2016.11.07) [24] w3schools: CSS. http://www.w3schools.com/cssref/css_selectors.asp (2016.11.07) [25] RAN Techologies (2014): A CSS3 logója. Web development. http://www.rantech.co.za/web-development/ (2016.11.07) [26] Laki Ádám: Bootstrap bemutató. Laki Ádám oldala. https://adamlaki.com/bootstrap-bemutato/ (2016.11.07) [27] Bootstrap: A Bootstrap logója. A Bootstrap hivatalos oldala. http://getbootstrap.com/ (2016.11.07) [28] Knoji: JavaScript. Computer programming languages. Knoji Consumer Knowledge. https://computer-programming-languages.knoji.com/ mocha-livescript-javascript-2/

    48 [29] GitHub Pages: ECMAScript 5 compatibility table (szerk.: „kangax”) http://kangax.github.io/compat-table/es5/ (2016.11.07) [30] Codementor: A JavaScript nem hivatalos logója. Online Learn JavaScript Course. https://www.codementor.io/learn-javascript-online (2016.11.07) [31] jQuery: History. A jQuery Foundation hivatalos oldala. https://jquery.org/history/ (2016.11.07) [32] jQuery: API Documentation. A jQuery Foundation hivatalos oldala. http://api.jquery.com/ (2016.11.07) [33] Chaffer J., Swedberg K. (2013): Learning JQuery, Fourth Edition. interaction, design, and web development with simple JavaScript techniques. June, 2013. E-book. Packt Publishing. https://www.packtpub.com/mapt/book/Web\%20Development/ 9781782163145/1/ch01lvl1sec08/What+jQuery+does (2016.11.07) [34] GitHub Pages: Select2. The jQuery replacement for select boxes. https://select2.github.io/ (2016.11.07) [35] NetBeans Community: Mi az a NetBeans? Oracle Corporation. https://netbeans.org/index_hu.html (2016.11.07) [36] Gimp: Mi az a Gimp? A Gimp magyar nyelvű oldala. FSF.hu Alapítvány. http://www.gimp.hu/ (2016.11.07) [37] Kisantal Tibor (2015): Boldog 20. szülinapot, GIMP! 2015. november 23. GRAFIt- ahol a grafika és technika találkozik. Kisantal Tibor honlapja. http://grafit.netpositive.hu/boldog-20-szulinapot-gimp/ (2016.11.07) [38] Baráth Gábor (2014): GIMP könyv, FSF.hu Alapítvány. http://www.gimp.hu/konyv/gimp_konyv_kicsi.pdf (2016.11.07) [39] Az Alkalmazott Informatikai Intézeti Tanszék órarendje. ME-GÉIK-IAK oldala. http://ait2.iit.uni-miskolc.hu/index.php/oktatas/orarend (2016.11.07) [40] A NanoPro Kft. honlapja. http://www.nanopro.hu/?page=7 (2016.11.07) [41] Az alkalmazás ikonforrása. http://www.iconsdb.com/custom-color/graduation-cap-icon.html (2016.11.07) [42] Gedeon Maheux: Farnsworth professzor ikonjának forrása. http://www.veryicon.com/icons/movie--tv/futurama-vol-1/ farnsworth.html (2016.11.07) [43] Reading SpongeBob GIF forrása. http://giphy.com/gifs/spongebob-squarepants-sea-1C0ibNXMKQeCk (2016.11.07) [44] Salvador Dalí: Az elfolyó idő animációjának forrása. http://giphy.com/gifs/ZN4iv0dl3JkpW (2016.11.07)

    49 [45] Imgur: Video to GIF. Video converter. http://imgur.com/vidgif (2016.11.07)

    [46] Miskolci Egyetem: Egy sokszínű hétköznap a Miskolci Egyetemen. Youtube video. https://youtu.be/ClEJbVOs2iE?t=3m36s (2016.11.07)

    [47] Szakválasztó. Miskolci Egyetem. Az előadóterem képének forrása. http://www.szakvalaszto.hu/intezmeny/me (2016.11.07)

    [48] Imgur. Confused Travolta animáció forrása. https://i.imgur.com/e1IneGq.jpg (2016.11.07)

    50 Adathordozó használati útmutató

    A dolgozathoz mellékelt CD a következő szerkezetben tartalmazza a Szakdolgozat- ban bemutatott munkát:

    • A Szakdolgozat .pdf formátumban.

    • A webalkalmazás forráskódja .zip formátumban, melyet kitömörítve kell elhelyez- ni a webszerver gyökérmappájába.

    • A webalkalmazás phpMyAdmin-nal exportált adatbázisa, melyet az adatbázis- szerverre kell feltölteni egy előzetesen létrehozott adatbázisba.

    • Egy "félévek" mappa, melyben a feltöltött órarendek találhatók .xlsm formátum- ban, az általam létrehozott Excel makrókkal. Továbbá az órarendek .csv fájljai, melyek az exportált adatokat tartalmazzák.

    • A futtatható alkalmazás hivatkozása (link).

    51