Pályaválasztási oktató honlap Készítette: Péter Ottó tanuló Márton Áron Gimnázium Csíkszereda 2013 1/10
1. Tartalomjegyzék Pályaválasztási oktató honlap... 1 1. Tartalomjegyzék... 2 2. Pályázási adatok... 3 2.1. A pályázó személyes adatai... 3 2.2. Az iskola adatai... 3 2.3. A program elérhetősége... 3 3. Bevezető... 4 3.1. Célkitűzés... 4 3.2. A webalkalmazás bemutatása... 4 3.3. A pályaválasztási projekt Áradat egyesület... 5 4. Megvalósítás... 6 4.1. Használt szoftverek és programozási nyelvek... 6 4.1.1. Használt szoftverek... 6 4.1.2. Használt programozási nyelvek... 6 4.2. Adatok tárolása... 7 4.3. Könyvtár struktúra... 7 5. Statisztika... 9 6. Képek a weboldalról... 9 2/10
2.1. A pályázó személyes adatai 2. Pályázási adatok Név: Péter Ottó Cím: Románia, Hargita megye, Csíkszereda,... E-mail cím:... Telefonszám:... Szak: Matematika Informatika intenzív Osztály: XII. E Informatika tanár: Demeter István-Hunor 2.2. Az iskola adatai Név: Márton Áron Gimnázium Cím: Románia, Hargita megye, Csíkszereda, Márton Áron utca 80. Weboldal: www.mag.ro E-mail cím: mag_suli@yahoo.com 2.3. A program elérhetősége URL: http://palyavalasztas.picnicpanzio.ro/ 1. Adminisztrátor felület adatai: Felhasználónév:... Jelszó:... 2. Rendszergazda felület adatai: Felhasználónév:... Jelszó:... 3. Felügyelő (tanár) felület adatai: Felhasználónév:... Jelszó:... 4. Felhasználó (diák) felület: Felhasználónév:... Jelszó:... 3/10
3. Bevezető 3.1. Célkitűzés Környezetünkben nagyon sok olyan embert láthatunk, aki nem leli örömét a munkájában amiatt, hogy azt a munkát, amit nap mint nap végeznie kell nem szereti, tehát rosszul választotta meg szakmáját. A pályaválasztási webalkalmazás célja, hogy egy olyan internetes felületet biztosítson a fiatalok számára, ahol tesztek kitöltésével egyértelmű választ kapnak arra, hogy milyen beállítottságúak, és hogy milyen szakma, foglalkozás illik a személyiségükhöz. Ez nagy segítség lehet a továbbtanulás irányának eldöntésében, szakmaválasztásban és egész életükben. Fontosnak tartom azt is, hogy a honlap iskolákban alkalmazható legyen, és osztályokra bontva áttekinthető legyen az osztályfőnökök, iskola pszichológusok számára, hogy melyik diák milyen képességekkel bír. A kitöltött tesztek lehetőséget biztosítanak arra, hogy a diákok a későbbiekben jó szakmát választhassanak. 3.2. A webalkalmazás bemutatása A honlap jogosultságok alapján kezeli a felhasználókat. Négy különböző jogú felhasználó van. Az adminisztrátor felel a honlap összes funkciójáért: iskolák és rendszergazdák létrehozásáért, bármely felhasználó vagy iskola törléséért, tesztek feltöltéséért, módosításáért, törléséért, iskolák adatainak kezeléséért. Amikor az adminisztrátor létrehoz egy új iskolát, akkor vele együtt megadhatja, hogy az adott iskola maximálisan hány felhasználót regisztrálhat. Ugyanakkor létrehoz egy rendszergazda felhasználót is, aki az iskola összes felhasználójáért felel. A rendszergazda létrehozhat új felügyelőket (tanárokat), és törölheti is őket, ugyanakkor megtekintheti iskolája összes felhasználóját vagy csak bizonyos felügyelő diákjait. A tanár, vagy más néven felügyelő csak felhasználói (diák) jogosultsággal rendelkező felhasználókat hozhat létre, szám szerint 35 felhasználót (megközelítőleg egy osztály maximális létszáma). A tanár felhasználó törölheti a diák felhasználót, és ellenőrizheti a diák által megoldott tesztek számát is. A diák felhasználó a tesztekhez fér hozzá, és a saját tesztjeinek eredményeihez, amiket szabadon törölhet, ugyanakkor újraoldhatja bármikor a teszteket. Ezeken kívül minden típusú felhasználónak jogosultsága van a saját jelszavát és e-mail címét változtatni, a diák felhasználók kivételével pedig lehetőségük van a felhasználónevük megváltoztatására is. Elfelejtett jelszó esetén a felhasználók kérhetnek jelszócserét. Ez esetben egy (HTML) e-mail érkezik az e-mail címükre, melyben többek közt egy link szerepel, amelyre rákattintva lehetőség nyílik a jelszó megváltoztatására. A jelszóváltoztatás után a kapott link használhatatlanná válik. A fent említett jogosultságokon kívül vannak úgynevezett szabad felhasználók is, akik egyik iskolához sem tartoznak. Ők szabadon regisztrálhatnak a főoldalon. Nekik ugyanannyi jogosultságuk van, mint a diák felhasználóknak. Minden típusú felhasználónál található egy üzenőfal. Általa a diákok osztálytársaiknak, felügyelőjüknek vagy akár egyénileg kiválasztott címzetteknek küldhetnek üzeneteket, akár tesztoldás közben is. Ugyanez az üzenőfal a másik három 4/10
felhasználói felületre is be van építve, így a felügyelő küldhet üzenetet a rendszergazdának, a saját osztályának vagy csak bizonyos személyeknek. A rendszergazda az iskolájának, felügyelőknek, az adminisztrátornak vagy egyénileg kiválasztott személyeknek küldhet üzenetet. Az adminisztrátor mindenkinek küldhet. Az üzenőfal mindig a weboldal jobb alsó sarkában helyezkedik el, így tesztoldás közben nem kell visszagörgetni, ha üzenetet kap az illető, vagy éppen írni/válaszolni akar. Ha nem kívánja látni az üzenőfalat egy kattintással lecsúsztathatja, vagy visszaállíthatja azt. Mindemellett kedvére formázhatja az üzenetet. A felhasználó az oldal frissítése nélkül, a neki szánt üzenetet az üzenetküldés pillanatában kapja meg. Ezen kívül tervben van egy olyan elem az üzenőfalon, amelyre ha rákattintanank, előjön, hogy kik vannak bejelentkezve és kik nem. Így a felügyelő (ha osztályfőnöki órán tesztet oldat) ellenőrizni tudja, hogy ki az, aki tesztet old, és ki az, aki nem, illetve megkíméli a felhasználókat attól, hogy várniuk kelljen a válaszra, mert így fogják tudni, hogy a címzett épp be van-e jelentkezve vagy sem. A szabad tagok nem férhetnek hozzá az üzenőfalhoz. Az adminisztrátor felületről 4 típusú tesztet lehet feltölteni (és a felhasználó ilyen típusú tesztekkel találkozik): igen vagy nem válaszos teszt 3 pont elosztása két szakma között egyszerű kérdésre válaszolás egy szövegmezőben (ennek a célja, hogy a diák elgondolkodjon, és meg tudja fogalmazni magának, később pedig meg tudja beszélni a felügyelő tanárral is a válaszát) a 4. típusnál csoportos foglalkozások vannak, ezért csak letölthetőek (és feltölthetőek) ezek a tesztek. 3.3. A pályaválasztási projekt Áradat egyesület Napjainkban nem újdonság az internet. A háztartások többsége rendelkezik internet hozzáféréssel. Mivel a fiatalok ezen generációja nagy mértékben internet fogyasztó, ezért őket internet segítségével lehet a legkönnyebben elérni. Az iskolán kívüli pályaválasztási körök, csoportok sokat segíthetnek abban, hogy valaki komolyabb segítséget kapjon ahhoz, hogy a neki megfelelő szakmát válassza. A honlap segítségével fiatalok százait lehet elérni iskolákban. Ahhoz, hogy rendezett és kiegyensúlyozott társadalmunk legyen, fontos az, hogy minden ember azt tegye, amit szeret, és ne unottan végezze a munkáját (csak a pénzért). Ha a fiatalokat segítjük, hogy jól válasszanak, akkor kiegyensúlyozottak lesznek azon a területen, ahol dolgoznak és a sikereik motiváltabbá, teljesebbé teszik őket. Az ötletem az Áradat Egyesület (Lelki egészségvédelmi központ, Csíksomlyó) tevékenységeiből született, ahol különböző pályaválasztási csoportokat szerveznek fiataloknak. Az egyesület a továbbiakban támogatni fog abban, hogy ez a honlap élővé váljon, és iskolákban használják a fiatalok (a támogatás csakis a weboldal terjesztésére utal, a megírására, szerkesztésére NEM). Az egyesület rendelkezésemre bocsátott több tesztet is. Ezeket használtam fel a honlapon. 5/10
4. Megvalósítás 4.1. Használt szoftverek és programozási nyelvek 4.1.1. Használt szoftverek Notepad++: ingyenes forráskódszerkesztő, a weboldal forráskódját ebben írtam meg. Gimp 2.8: ingyenes képszerkesztő program, a weboldal grafikus elemeit készítettem vele. 4.1.2. Használt programozási nyelvek HTML5: leíró nyelv, amellyel a weboldalon található elemeket (gombok, képek beillesztése, táblázatok, dobozok stb.) hoztam létre. CSS3: mindazt, amit létrehoztam, ezzel formáztam át (hátterek, képek mérete, betűtípusok, színek, szövegmezők, táblázatok formázása, sarkak lekerekítése, az elemek elrendezése stb.). JavaScript (jquery): ez az a nyelv, amitől a weboldal kilépik a hagyományos várj, míg újratöltődik az oldal, s ha elrontottál valamit, kezdd elölről kategóriából. Ennek segítségével oldottam meg az űrlapoknál az azonnali visszajelzést, a becsúszásokat, az előbukkanásokat, az oldalfrissítés nélküli szerverrel való kommunikációt (pl. a bejelentkezett diák, ha csak nem akarja a profil menüt megnézni, egyszer sem frissül az oldal, hanem mindent azonnal megkap. Tesztek kitöltésénél azonnal jelez, ha hiba van és menti az eredményt, ha nincs hiba. Ahogy lementette, egyből jelzi is az eredményt, és akármit csinál, egyből megjelenik, mivelhogy nem kell mindig újratölteni az oldalt. Másik példa a saját (vagy akinek van joga a többi felhasználó) adatainak megváltoztatása: a táblázatban, ahol az adatait látja, belekattint a kívánt cellába, és ha megváltoztatja a cella tartalmát, ahogy kikattint a cellából máris jelzi, ha hiba van, és ha nincs, akkor küldi az adatokat a PHP fájlnak, ahonnan az adatbázisba kerülnek az adatok. Mindez a másodperc töredéke alatt. Tehát véleményem szerint a jquery a weboldalam lelke. PHP: régóta használatban levő szerver oldali nyelv, amelynek segítségével hozzáfértem az adatbázishoz. Ezt használtam minden oldalnál, mert a főoldalon feltétlenül szükség van az adatbázisra (bejelentkezés, regisztráció, jelszócsere ) és bejelentkezés után meg ezzel ellenőrzöm, hogy a felhasználó be van-e jelentkezve, illetve mindenhol, ahol adatbázis szükséges, ott ezt használtam (természetesen a gyorsaság érdekében jquery-vel fűszerezve). Az e-mail küldésénél is szerepet kapott. MySQL: az egyik legelterjedtebb adatbázis-kezelő. Az adatok egyszerű tárolásához, lekérdezéséhez, felülírásához és törléséhez elengedhetetlen. 6/10
4.2. Adatok tárolása Az adatbázis szerkezete, ha csak 1-1 teszt van. Több esetén sokszorosódik a táblák száma. 4.3. Könyvtár struktúra A weboldal 161 elemet tartalmaz 10 mappába csoportosítva annak megfelelően, hogy milyen funkciót látnak el. Az admin mappában találhatóak az adminisztrátor felületen található oldalak forráskódjai. A classes mappába osztályok sorát szerettem volna tenni, de a bejelentkezés osztály után rájöttem, hogy az időhiány miatt nem lesz lehetőségem mindent objektum orientáltan megírni. A css mappában találhatóak a weboldalon szereplő css formázások. A feltoltve mappában azok a fájlok vannak, amelyeket az adminisztrátor a 4-es típusú tesztekhez feltöltött, és amelyeket a felhasználók letölthetnek. A felugyelo mappában azok a fájlok szerepelnek, amelyek a felügyelő felületen érhetőek el. Az images mappába tettem a weboldalon megjelenő összes képet. A javascript mappában sorakoznak a JavaScript/jQuery scriptek, amelyek élvezetesebbé teszik a weboldal használatát. A php mappába tettem a csak segédfájlként szolgáló fájlokat, melyek nagyrészt az adatbázissal való kommunikációt teszik lehetővé (ezeket a felhasználók soha nem láthatják meg). A rendszergazda mappában a rendszergazda által látható oldalak forráskódja van. A user mappában a diák felületen megjeleníthető php fájlok foglalnak helyet. 7/10
Amint látható, a weboldalnak saját 404-es oldala is van, ami akkor jön elő, ha az oldalt látogató nem létező linket ad meg, vagy olyan fájlt szeretne megtekinteni, amit nem szabad (php mappában szereplő fájlok). 8/10
5. Statisztika A projekt elkészítésére szánt idő: kiszámíthatatlan, 400-500 óra között. A forráskódot tartalmazó fájlok száma: 108 fájl A forráskód ennyi sorból épül fel: Látható oldalak (HTML + PHP + MYSQL): 2.275 sor CSS formázás: 2.069 sor PHP + MYSQL segédfájlok: 2.608 sor Javascript (jquery): 7.720 sor Összesen: 14.672 sor 6. Képek a weboldalról A főoldal 9/10
A felügyelő kezeli a diákok adatait Példa egy teszt kitöltésére Egy teszt eredménye 10/10