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:
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 .css 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 (
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:
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); -webkit-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
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
| ’); }) |