Egy iskola honlapjának tervezése, kivitelezése

Eötvös Loránd Tudományegyetem Informatikai Kar

Egy iskola honlapjának  tervezése, kivitelezése

Horváth Győző

Dózsa Bálint

adjunktus

nappali, web­programozó 55 481 04 0000 00 00

Budapest, 2011

Tartalomjegyzék  1  Bevezetés........................................................................................................1  2  A szakdolgozat célja.......................................................................................3  3  Felhasználói dokumentáció............................................................................4  3.1  Az oldal bemutatása........................................................................................4  3.1.1  Egy általános oldal felépítése.........................................................................4  3.1.2  Navigációs elemek az oldalon........................................................................6  3.2  Általános látogatók.........................................................................................8  3.2.1  A Kezdőlap felépítése.....................................................................................8  3.2.2  A jelenlegi/egykori diákok oldala...................................................................9  3.2.3  Az osztályoldalak felépítése.........................................................................10  3.2.4  Az Események oldal.....................................................................................10  3.2.5  Vendégkönyv.................................................................................................11  3.2.6  Galéria...........................................................................................................12  3.2.7  Keresés az oldalon........................................................................................13  3.3  További oldalak.............................................................................................14  3.4  Az adminisztrációs felület............................................................................15  3.4.1  Tartalom feltöltése, szerkesztése, törlése......................................................16  3.4.2  Fájlok feltöltése, törlése................................................................................19  3.4.3  A CBG Tanulmányi Rendszer adatainak szerkesztése..................................20  3.4.4  A statisztikai rendszer...................................................................................21  3.5  A CBG Tanulmányi Rendszer.......................................................................22  3.5.1  A diákok és a szülők felülete........................................................................23  3.5.2  A tanárok felülete..........................................................................................25  3.6  Hozzáférések az oldalhoz a szakdolgozat olvasója számára........................32  4  Fejlesztői dokumentáció...............................................................................33  4.1  Feladatspecifikáció.......................................................................................33  4.2  Rendszerterv.................................................................................................34  4.3  Fejlesztői környezet bemutatása...................................................................35  4.3.1  A fejlesztői környezet telepítése Debian, valamint Debian alapú rendszereknél...................................................................................................................36  4.3.2  A weboldal telepítése....................................................................................37  4.4  Az adatbázis..................................................................................................38  4.5  A cbg.hu weboldal felépítése........................................................................40  4.5.1  Az oldal könyvtárszerkezete.........................................................................41  4.5.2  A hasonló felépítésű oldalak.........................................................................42  4.5.3  Az egyedi oldalak felépítése............................................................................................47  4.5.4  Statisztika......................................................................................................50  4.5.5  Keresés..........................................................................................................51  4.5.6  Az admin felület felépítése...........................................................................52

 4.5.7   4.6   4.7   4.8   4.9   4.10   4.11   4.12   4.13   5   5.1   5.2   5.3   5.4   6   7 

A CBG Tanulmányi Rendszer felépítése......................................................54 A CKEditor beépítése az oldalakba..............................................................56 Google betűtípusok.......................................................................................57 Facebook widget...........................................................................................58 Biztonság a weblapon...................................................................................58 Média-elemek (hangok, videók)...................................................................60 Navigáció az oldalon....................................................................................61 Ergonómia.....................................................................................................63 Keresőoptimalizálás, keresőbarát linkek......................................................64 A honlap tesztelése több szempontból..........................................................66 Tartalmak feltöltése, törlése, módosítása......................................................66 Megjelenés tesztelése....................................................................................66 Bejelentkező felületek tesztelése..................................................................66 Biztonság tesztelése......................................................................................67 Továbbfejlesztési lehetőségek, tapasztalatok................................................68 Összegzés......................................................................................................69

 1 Bevezetés Az internet korában egyre több felhasználó jut a világhálóval kapcsolatba. Ennek köszönhető az internet ma tapasztalható, hatalmas mértékű növekedése, fejlődése is. Míg az internet terjedésének hajnalán csak statikus weboldalak léteztek, addigra manapság szinte már csak dinamikus weboldalakkal találkozunk. A dinamikus weboldalak térhódításával nőttek a fejlesztési lehetőségek is. A különböző nyílt forráskódú és ingyenes programozási nyelvek, keretrendszerek, webkiszolgálók gyorsan terjedtek. Ezeknek is köszönhető, hogy napjainkban eléggé olcsó egy-egy weboldal üzemeltetése, ezáltal is segítve az internet térhódítását. A weboldalak az elmúlt években egyre egyszerűbben használhatóvá váltak a könnyebb navigálás érdekében. A dizájn fejlődése ennek szerves része volt. Sokat javult az évek során, a különböző grafikus programokkal szebbnél szebb látványterveket lehet létrehozni, amelyeket aztán átültethetünk egy működő weboldalba. Több grafikus program létezik látványtervek, animációk készítésére, melyekkel szinte bármilyen merész ötlet, egyedi dizájn kivitelezhető. Ez a látványos fejlődés napjainkban is folyamatosan zajlik, valószínűleg nem is fog megállni a közeljövőben. Az internettel a korábbi papír alapú médiumok elektronikus változata és az újonnan létrejött modern média is ugyanolyan előnyökkel indulnak, hiszen egy internetelőfizetéssel bárki válogathat közöttük. Az egyszerű felhasználó médiumok sokaságából választhatja ki a neki tetszőket. Ezek az oldalak maguk is médiává váltak, sokkal gyorsabban kerülnek ki rájuk a hírek, mint ahogyan a nyomtatott sajtóban egy újság megjelenik, ezzel is hatalmas előnyre tesznek szert. Manapság cégeknek,

intézményeknek,

sőt

magánszemélyeknek

is

lehet

weboldaluk és/vagy bloguk. A különböző tartalomkezelő (CMS) rendszerekkel egy, az informatikában kevésbé jártas, kezdő felhasználó is könnyű szerrel építhet magának weboldalt vagy blogot, melyet tetszőlegesen testre szabhat, módosíthat, szerkeszthet. Ehhez csak egy tárhelyre, és kellő kitartásra van szükség. Manapság már sok ingyenes szolgáltató közül is válogathatunk, de a minőségi tárhelyek még mindig fizetősek. Cserébe nagyobb százalékban érhetők el (akár 99,9%), mint ingyenes társaik. 1

A nagy látogatottsággal rendelkező oldalak a reklámokból hatalmas bevételre tehetnek szert, ezzel is javíthatják oldaluk megjelenését, tartalmi minőségét vagy éppen a szerverek kapacitását. De a kívánt látogatottságszám eléréséhez szükségesek bizonyos praktikák, melyek segítségével weboldalunk a keresők találatai között az első helyeket foglalhatja el. Dolgozatomban ezekre is kitérek majd. A közösségi oldalak, videómegosztók, képmegosztók az internetes társadalom összefogására, illetve szórakoztatására készültek. Egy közösségi oldalon bárki bárkivel kapcsolatba léphet, legyen az új ismerős, vagy egy régi osztálytárs. Ezért fontos az is, hogy a készítendő weboldal a megosztó oldalak funkciót is használja lehetőség szerint. A dolgozat első felében egy felhasználói dokumentációt fogok bemutatni, amelyben szemléltetem az oldal működését az egyszerű látogatók, és az adminisztrátorok szemszögéből. A második részbe a fejlesztői dokumentáció kerül, ahol az oldal felépítését fogom részletezni. Rendszertervvel, adatbázis felépítéssel, a különböző biztonsági hibák bemutatásával, javításával és az oldal tesztelésével foglalkozom majd.

2

 2 A szakdolgozat célja Egyre több oktatási intézménynek van manapság honlapja, amellyel a működésüket, munkájukat mutatják be a szülőknek, diákoknak, vagy az éppen arra járóknak. Ezek a weboldalak elég sokszínűek, de sajnos Magyarországon még sok olyan iskola van, amelynek nincs honlapja, vagy van, de nem naprakész. Egy weboldal az iskolának jó reklám, hiszen manapság a fiatalok, a leendő diákok szinte kivétel nélkül az internetről tájékozódnak elsőként, ha valamit meg akarnak tudni egy oktatási intézményről, vagy bármi másról. Miért pont egy iskola honlapját kezdtem el fejleszteni? Nos mindenképpen egy olyan weboldalt akartam készíteni, ami a szakdolgozatom beadása után még akár évekig is

működhet,

és

ténylegesen

használja

is

az

internetes

társadalom.

Volt

gimnáziumomban kértek fel a tanárok, hogy készítsek az iskolának egy viszonylag könnyen kezelhető, de „okos” weboldalt, amely helyettesítheti végre az évek óta elhanyagolt régit. Az oldal az elmúlt fél évben rengeteget fejlődött, több szempontból is egyszerűsödött. Szakdolgozatomban ezeket a változásokat is be fogom mutatni. Szakdolgozatommal azt szeretném szemléltetni, hogy hogyan lehet teljesen ingyenes programokkal (szövegszerkesztők, grafikai programok) – csak a programozói és grafikai tudást felhasználva – egy szép, könnyen kezelhető, és egyedi weboldalt létrehozni. A weboldal így egy Apache webszerveren fut, PHP nyelven íródott, néhány animáció JavaScript segítségével készült. Az oldal MySQL adatbázist használ, a dizájnt pedig XHTML 1.0, és CSS 2 segítségével ültettem a honlapba. Néhány külső, nyílt forráskódú alkalmazás beépítését is bemutatom majd szakdolgozatomban, illetve Picasa webalbumok és Youtube videók is beágyazásra kerülnek az oldalon, ezzel is növelve a felhasználói élményt.

3

 3 Felhasználói dokumentáció A cbg.hu weboldalon háromféle látogatótípus létezik. Az egyszerű látogató, aki csak az oldal publikus szekcióit nézheti meg, az admin felhasználó, aki az oldal tartalommal való feltöltéséért felel, illetve a tanulmányi rendszer felhasználója, ők több alcsoportra bonthatók, úgy ahogyan az adminisztrátorok is. A felhasználói dokumentációban tehát a fenti három csoport, és alcsoportjaik szemszögéből fogom majd leírni a cbg.hu honlapot.

 3.1 

Az oldal bemutatása

Ebben a fejezetben a cbg.hu aloldalait általánosságban fogom szemléltetni, a későbbiekben térek ki az egyedi lapokra.

 3.1.1  Egy általános oldal felépítése

1. ábra. Egy általános oldal felépítése Az 1. és 2. ábrán egy általános lap felépítését láthatja a látogató. Az almenü alatt 4

az adott oldal címe látható (1. ábra: 1), majd következik a cikk címe (1. ábra: 2), egyéb információk (szerző, dátum, stb...) (1. ábra: 3, 4), és maga a tartalom (1. ábra: 5). A tartalom egyben, és külön szedve is szerepelhet. Ha egyben szerepel, akkor a tartalom után nincs 'Tovább' gomb. Ha a cikk szét van szedve két részre, akkor azonban a 'Tovább' gomb (1. ábra: 7) megjelenik, és rákattintva érhető el a cikk további része (2. ábra). Amennyiben a cikk több részre van darabolva, a „Tovább” gombra kattintva a 2. ábrához jut a látogató, ahol az előbbi dolgokon kívül még egy ajánló is megjelenik a weboldal jobb oldalán (2. ábra: 6). Itt az aktuálisan kiválasztott cikk előtt, és után található cikkeket (5 – 5 darab) ajánlja fel az oldal megtekintésre (2. ábra: 7).

2. ábra. Egy általános oldal felépítése – 2 A Facebook integrációnak köszönhetően a 'Tovább' gomb mellett található a Facebook 'Tetszik' vagy 'Like' gomb (1. ábra: 6), amelyre kattintva a látogató kifejezheti tetszését az egyes cikkekkel kapcsolatban. Az oldal alján található a lapozó rendszer (1. ábra: 8), amelynek köszönhetően a cikkek külön oldalakra vannak csoportosítva (általában nyolcasával), és nem egy oldalon fog megjelenni az összes. Az aktuális oldal mindig ki van emelve, és csak a többi oldalszámra lehet kattintani. Az oldalszámok alatt találhatók az oldalak között mozgásra használható gombok. Lehetőség van az első, a következő, az előző, és az utolsó oldalakra ugrani. A gombok szürkévé válnak, amikor már nincsenek további 5

oldalak, amelyekre váltani lehetne.

 3.1.2  Navigációs elemek az oldalon Az oldal a következőképpen épül fel: a legfelső – vörös – terület mindig teljesen kitölti a horizontálisan rendelkezésre álló területet. Itt található az iskola logója, a „Celldömölk Berzsenyi Dániel Gimnázium” felirat, a kereső, és a fő menürendszer. A honlap felülete vízszintes menüelrendezést használ, több almenüvel. Ez nagyban segít az oldalon a könnyű navigációt. Egy-egy főmenü alá almenük kerültek be, ezáltal a főmenüben csak a legfontosabb oldalak jelennek meg. A főmenüben különböző módon jelennek meg az oldalak. Annak az oldalnak a menüeleme, amit a látogató éppen megtekint, egy világosabb vörösből sötétebbe áttűnő háttérrel van ellátva, míg a nem nézett oldalak menüelemei e-nélkül a háttér nélkül jelennek meg. Az egeret bármelyik menüelemre rá víve az áttűnő háttéren kívül egy sötétebb alsó szegélyt kap az elem (3. ábra).

3. ábra. A főmenü Az oldalon történő keresés nagyon egyszerűen történik, csak be kell írni a keresendő szót a főmenü feletti keresőmezőbe, a fehér keresés ikonra kattintva vagy entert ütve már ki is listázza az oldal a találatokat (4. ábra). Fontos, hogy kitöltsük a mezőt, különben a keresés értelmetlen. A keresőben szinte minden tartalomra rá lehet keresni, legyen az egy kulcsszó, vagy az iskola egykori diákjának, tanárának a neve.

4. ábra. A kereső 6

A főmenü alatt az oldal almenüje látható (5. ábra), amelynek segítségével az egyes főmenükön belüli aloldalakat lehet meglátogatni. Almenüvel minden oldal rendelkezik.

5. ábra. Az almenü Az almenüben átváltozik a menüelem színe, hogyha az egeret fölévisszük (5. ábra). Itt a megnyitott oldal nincsen külön jelezve, hiszen az oldalon több helyről is kiderül, hogy melyik aloldalt nézi éppen a látogató. A honlap alján található a statisztika (6. ábra), és az összes aloldal, főmenünként csoportosítva. Itt találhatók a látogatottsági adatok, valamint az, hogy az oldal adminisztrátorai mit, és mikor módosítottak utoljára.

6. ábra. A statisztikai adatok Az összes egyedi látogatók száma a napi egyedi látogatók összesítése 2010.08.05. óta. Az oldal a látogatók IP-címei alapján készíti el a statisztikákat.

7

 3.2 

Általános látogatók

 3.2.1  A Kezdőlap felépítése

7. ábra. A Kezdőlap felépítése A kezdőlapon a főmenü alatt található az animáció, amely az iskola nagyobb eseményeiről készült, válogatott fotókat jelenít meg a látogatóknak. A kezdőlap egyedi felépítésű a többi oldalhoz képest, itt ugyanis nem egy-egy tartalomtípus cikkei, hanem a legfontosabb dolgokról készült, a kezdőlapra szánt rövid cikkelőzetesek, cikkek jelennek meg.

8

 3.2.2  A jelenlegi/egykori diákok oldala

8. ábra. A jelenlegi/egykori diákok oldala Ezen az oldalon egy harmadik menü is helyet kapott az évfolyamok listázásának segítésére. Itt lehet kiválasztani a ballagás évét, és diákra keresni is itt lehet. Ha nincs évfolyam kiválasztva, akkor a 'Jelenlegi diákok' oldal a végzős évfolyamot, míg az 'Egykori diákok' oldal az utoljára ballagott osztályt mutatja. A kereső itt is hasonlóan működik, mint a többi oldalon, annyi különbséggel, hogy itt csak diákra lehet keresni! A Facebook 'Tetszik' vagy 'Like' gombja itt is helyet kapott évfolyamonként. Az 'Egykori diákok'-nál az évfolyamválasztó menü háttere a látogatás ideje szerint változik. Az évszámok minden tanév végén automatikusan módosulnak, az éppen végzős diákok átkerülnek az 'Egykori diákok' közé, míg az új osztályok belépnek a 'Jelenlegi diákok' közé.

9

 3.2.3  Az osztályoldalak felépítése

9. ábra. Az osztályoldalak felépítése Az 'Osztályoldalak' hasonlóan működik mint a jelenlegi/egykori diákok oldala, csak itt osztályok közül lehet válogatni. Amennyiben nincsen kiválasztva osztály, úgy a legfrissebb híreket olvashatjuk az osztályokról.

 3.2.4  Az Események oldal

10. ábra. Az Események oldal Az események rendezését dátum szerint végzi az oldal. A 'Lesz' kategóriába kerülnek azok az események, amelyek még nem történtek meg, a 'Volt' kategóriába a már lezajlott események kerülnek. Viszont nem minden eseményt jelenít meg az oldal az utóbbi esetben. Csak a két hétnél nem régebbi események maradnak kinn a honlapon.

10

 3.2.5  Vendégkönyv

11. ábra. Vendégkönyv A Vendégkönyvben bárki bármihez fűzhet megjegyzéseket az oldalon. A név és az e-mail cím mellett értelemszerűen magát az üzenet mezőt is ki kell tölteni a sikeres feltöltéshez. A vendégkönyv oldalon a robotok elleni védelem céljából bevezetésre került a reCAPTCHA. Az általa kiírt karaktereket be kell gépelni, különben a rendszer nem tölti fel a hozzászólást. A hozzászólások időben visszafelé jelennek meg, és a hozzászólások is oldalakra vannak bontva a kényelmesebb használat érdekében.

11

 3.2.6  Galéria

12. ábra. Galéria A Galériában Picasa fotók, és Youtube videók jelennek meg. A fotók is és a képek is közvetlenül a feltöltés után láthatóvá válnak az oldalon. A Youtube videó beágyazás egy lejátszási lista videóit foglalja magában. Az albumok egy indexképpel jelennek meg az oldalon, amelyre rákattintva megnyílik az album, szintén az oldalon belül. Az egyes képekre kattintva ki lehet nagyítani őket, illetve lehet léptethetni őket. Az album végére érve pedig bezárható a képvetítés, és vissza lehet lépni az albumokhoz. Az weblap bal oldalán a sötét sávban pedig az iskola Picasa és Youtube oldala tekinthető meg.

12

 3.2.7  Keresés az oldalon

13. ábra. Keresés az oldalon A keresésről már írtam korábban. Ha a fenti keresőbe beír a felhasználó egy kulcsszót, akkor erre az oldalra kerül, ami kilistázza a találatokat. Természetesen nem a teljes találati listát tettem be ide képnek, a listát lerövidítettem az átláthatóság kedvéért. A találatokat egymás alatt felsorolja a rendszer, de mindegyiknél csak a címet, és egyéb rövid információkat listáz ki a helytakarékosság érdekében (természetesen keresni nem csak a címben és az egyéb információkban keres az oldal). A 'Tovább' gombra kattintva érhető el a részletes találat. A honlap ott is kiszínezi a keresett karaktereket a könnyebb észrevehetőség végett.

13

 3.3 

További oldalak

Az előbb bemutatott lapokon kívül a honlap még több oldalból áll, ezeket, illetve az egész honlap felépítését itt fogom részletezni. Kezdőlap

Kezdőlap Hírek Cikkek Séta Felvételizőknek Érettségizőknek/Továbbtanulóknak Újság

Kezdőlap, tartalmak összegzése Hírek Cikkek Sajtó és tanulás cikkek Az iskolába felvételizőknek szóló oldal Érettségizőknek, továbbtanulóknak Iskolaújság, link külső oldalra

Iskolánk

Iskolánk Berzsenyi Dániel Iskolánk története Alapítványok Házirend Dokumentumok Linkek Vendégkönyv E-Napló

Az iskoláról szóló oldal Berzsenyi Dániel Az iskola története Alapítványok oldal Házirend oldala Dokumentumok oldala Linkek Vendégkönyv, üzenetek küldése E-Napló, jegyek, órarend

Diákok

Újság Osztályoldalak Jelenlegi diákok Egykori diákok Kórus Sport Eredmények Diákönkormányzat CBGHSS

Iskolaújság, link külső oldalra Osztályok oldalai Jelenlegi diákok listázása Egykori diákok oldalai Az iskola kórusának oldala Sporttal foglalkozó oldal Eredmények Diákönkormányzati hírek Az iskola szervere

Dolgozók

Jelenlegi tanárok Egykori tanárok Munkatársak Pedagógiai program

Jelenlegi tanárok listája Egykori tanárok oldala Munkatársak oldala Pedagógiai program

Események

Események Tanév rendje Galéria Versenyek Diáknap Szalagavató Ballagás

Események dátum szerint Tanév rendjének oldala Galéria (fotó és videó) Versenyek oldala Diáknap hírek Szalagavató oldala Ballagás lapja

CBGTR

A tanulmányi rendszer elérhetősége

14

 3.4 

Az adminisztrációs felület

A honlap adminisztrációs felülete a cbg.hu/cbgadmin címen érhető el. Az adminisztrációs felületbe csak a kézzel az adatbázisba feltöltött tanárok tudnak bejelentkezni. A bejelentkező felületen (14. ábra) a felhasználó név mellett a jelszót kéri a rendszer, és azt, hogy a felhasználó bejelentkezve maradjon-e vagy ne. Ez azt jelenti, hogy a felhasználó böngészője a bezárás után is megjegyzi azt, hogy a felhasználó be van-e lépve, vagy sem.

14. ábra. A bejelentkező felület A bejelentkezés után az admin üzenőfal fogadja a felhasználót, illetve egy gombbal mód van a teljes adatbázis biztonsági mentésére is. Az adminisztrációs felület főmenüjében lehetőség van új oldal nyitására a '+' menüelemre kattintva. Az elhagyásra lépve az admin felületet kilépés nélkül hagyja el a felhasználó (a böngésző bezárása után is bejelentkezve marad az adminisztrátor), míg a kilépésre kattintva teljesen ki is léphet a felhasználó.

15

 3.4.1  Tartalom feltöltése, szerkesztése, törlése Tartalom feltöltésére a 'TARTALOM FELTÖLTÉS...' almenüben van lehetőség (15. ábra). Itt lehet kiválasztani, hogy milyen tartalmat akar az adminisztrátor feltölteni. A különböző oldalaknak más és más feltöltési felületet kínálnak. Van ahol több szövegszerkesztő jelenik meg, van, ahol egy sincs, attól függően, hogy mit tölt fel a bejelentkezett felhasználó. A megírt cikkeket feltölteni alul, a nyílra kattintva lehet. Lehetőség van a korábbi cikkek szerkesztésére is a ceruza ikonra kattintva (16. ábra). A szerkesztésnél lehet a tartalmakat módosítani, lejjebb, vagy feljebb helyezni, illetve törölni. Amennyiben valamilyen cikket tölt fel vagy szerkeszt a szerkesztő, a módosítások után az oldal alján, a statisztikáknál megjelenik a módosítás időpontja, és a módosítás tárgya. A lejjebb és feljebb helyező gombok csak akkor jelennek meg az oldalon, ha van a szerkesztendő cikk után, illetve előtt tartalom. A törlés gombra kattintva először megkérdezi az oldal, hogy biztosan töröljük-e a cikket, ha igen, akkor azonnal és véglegesen törlődik az oldalról (16. ábra). Törölni csak olyan tartalomnál lehet, ahol nincs megtiltva új cikkek feltöltése. Ha meg van tiltva a feltöltés, akkor csak szerkeszteni lehet a cikket, törölni, áthelyezni nem. Szerkesztésnél (17. ábra) a tartalom a szerkeszthető mező(k)ben, illetve a szövegszerkesztő(k)ben jelenik meg. Szerkesztés után a kék háttérrel ellátott nyíl gombbal lehet feltölteni a módosításokat.

16

15. ábra. Tartalom feltöltése

16. ábra. Szerkesztés

17

17. ábra. Szerkesztés – 2

18

 3.4.2  Fájlok feltöltése, törlése

18. ábra. Fájlok feltöltése

19. ábra. Fájlok feltöltése – 2 Az oldalra az adminisztrációs felületen keresztül lehetőség van fájlok feltöltésére, törlésére is (18., 19. ábra). Ha az oldalra egy hírt tölt fel a felhasználó képekkel ellátva, akkor ide kell a képeket feltölteni. A képek feltöltése után az oldal kiírja a képek elérhetőségét az oldalon, ezt kell bemásolni a szövegszerkesztő megfelelő ablakába, így a feltöltött tartalomban meg fog jelenni a kép. A feltöltött fájlokat a rendszer automatikusan átnevezi, a fájl nevének elejéhez hozzáfűzi a feltöltés dátumát, valamint egy hétjegyű véletlen számot, ezzel is csökkentve annak a lehetőségét, hogy két ugyanolyan nevű fájl kerüljön feltöltésre. A fájlok törlése hasonlóan zajlik, mint a cikkeké. Itt is megkérdezi az oldal az admintól, hogy biztosan törölni akarja-e a kiválasztott fájlt. Ha a törlésre kattint, a rendszer törli a fájlt. Frissítés után a fájlok listájában már nem fog szerepelni a fájl.

19

 3.4.3  A CBG Tanulmányi Rendszer adatainak  szerkesztése Az admin felületen a diákok, tanárok, és szülők feltöltésére van lehetőség, hiszen másképpen nem tudnak regisztrálni és belépni a CBGTR oldalán (cbg.hu/cbgtr). Az almenüben látható is a három kategória, amelyekre kattintva a diákok, szülők, illetve tanárok kerülnek kilistázásra. Lehetőség van a felhasználókat szerkeszteni, illetve törölni (20. ábra). A regisztrált felhasználók esetében a szürke 'X' gomb csak a regisztrációt törli. A teljes adatbázisból való törléshez a regisztráció törlése után még a piros 'X' gombot is meg kell nyomni. A nyíl gombra kattintva lehet felvinni a diákok és tanárok oktatási azonosítóit, és egyéb adataikat. A szülők saját azonosítót kapnak, mivel ők nem rendelkeznek oktatási azonosítóval. A diákok feltöltésénél speciális beállítási lehetőség a diákokhoz szülő(k) párosítása. Csak olyan szülő(ke)t lehet egy-egy diákhoz hozzáadni, akik már korábban fel lettek töltve a rendszerbe. A tanárok feltöltésénél ajánlott kiválasztani a tanár szakját/szakjait, illetve osztályát is, hiszen a feltöltés után a tanulmányi rendszerben a pedagógus ezek alapján az információk alapján kap jogosultságot az egyes tárgyakhoz (osztályfőnök esetén mindhez).

20. ábra. CBGTR adatbázisának szerkesztése

20

 3.4.4  A statisztikai rendszer A főmenüben a statisztikára kattintva érhetők el az oldal statisztikai adatai. A napi illetve havi statisztikai adatokat az oldal diagramok segítségével jeleníti meg oldalanként bontva (21. ábra). A rendszer minden oldalnak számolja a látogatottságát. Az oldal méri az egyedi látogatók számát (IP-cím alapján), illetve számolja az egy látogatóra jutó oldalletöltések számát is. Ezeket az adatokat össze is hasonlítja az előző napi statisztikákkal (nőtt-e, vagy csökkent a látogatottság). A statisztikai felületen azt is meg lehet nézni, hogy melyik nap honnan érkeztek a látogatók. Ezeket az adatokat szintén az IP-címekből állapítja meg a honlap. Lehetőség van a statisztikai adatok visszanézésére napi felbontásban egy hónapig, havi felbontásban egy évre visszamenőleg. Az országos statisztikákat szintén napi felbontásban egy hónapig lehet megtekinteni.

21. ábra. Statisztika

21

 3.5 

A CBG Tanulmányi Rendszer

A Tanulmányi Rendszer egy elektronikus-naplót, elektronikus-órarendet, és üzenetküldő rendszert foglal magában. A cbg.hu/cbgtr címen érhető el. A bejelentkező felülete (22. ábra) hasonló, mint az adminisztrációs felületé, csak itt lehetőség van a diákok, tanárok, és a szülők számára egy azonosítóval regisztrálni, illetve az elfelejtett jelszó opcióval új jelszót kérni, amit a rendszer e-mailben küld ki.

22. ábra. A CBG Tanulmányi Rendszer login oldala Ezen az oldalon is megvan a lehetőség arra, hogy a felhasználót ne léptesse ki a böngészője, amikor bezárja azt. Ez a funkció a „Bejelentkezve maradjon?” kérdésre válaszolva érhető el, a checkbox-ot bepipálva a válasz Igen lesz, míg ellenkező esetben Nem. A rendszerbe belépve a diákokat, tanárokat, és a szülőket is különböző felület fogadja. A kezdőlapon mindhárom csoportnak a személyes, illetve nem személyes, de a bejelentkezett felhasználó részére is elküldött üzenetek találhatók. A tanárok – az admin felülethez hasonlóan – itt is menthetik a teljes adatbázis tartalmát egy gombnyomásra. Ez is a biztonságot szolgálja.

22

A kezdőlap almenüjében különböző módon szűrhetők az üzenetek. Diákok esetében lehetőség van az évfolyam, az osztály, vagy akár a személyes üzenetek külön megjelenítésére is. Az adatok főmenüben a felhasználó megnézheti a személyes adatait, illetve jelszavát egyszerűen módosíthatja is.

 3.5.1  A diákok és a szülők felülete A diákok, és a szülők e-napló felülete nagyon hasonlít egymásra. Ezek az egyszerű felhasználók csak megtekinthetik az e-napló, illetve az e-órarend oldalait, módosítani nem tudnak bennük. Az apró különbség abban van, hogy míg egy diákhoz egy félévben csak egy e-napló, illetve órarend tartozik, addig a szülőkhöz több is tartozhat, hiszen egy szülőnek több gyermeke is járhat az iskolába. Ezért a szülőknél több gyermek esetén az e-naplók, és az órarendek egymás alatt jelennek meg. Gyerekenként külön-külön, az egyszerűség kedvéért a ballagás éve szerint csökkenően rendezve. Az e-napló oldalon (23. ábra) a diák adatai után azok a tárgyak jelennek meg, amelyekből az adott félévben vannak órái, vagy félévi jegyet kapott belőlük. Mindegyik félév 5 hónapból áll, ennek megfelelően a jegyek 5 cellába vannak elosztva a hónapoknak megfelelően. A jegyek a típusoknak megfelelően piros (témazáró), kék (szóbeli felelet), zöld (röpdolgozat), és sötétszürke (egyéb) színűek lehetnek. A jegyek alatt találhatók átlagok, információk a tárggyal kapcsolatban, illetve az órák a félévben linkre kattintva egy külön felugró ablakban megjelennek az adott tárgyból az egyes órák anyagai, valamint a hiányzási információk. Az oldal aljára került egy statisztikai összesítés a diák féléves, illetve éves teljesítményéről, továbbá a hiányzásokról, igazolásokról.

23

23. ábra. Az Elektronikus-napló felülete

24

24. ábra. Az Elektronikus-órarend felülete Az elektronikus-órarendben a kiválasztott félév órarendjét láthatja a felhasználó (24. ábra). Az órarend könnyen átlátható, egyszerű felületű oldal. A tárgyak mellett megjelenik benne a tanár neve, aki az órát tartja, illetve az hogy melyik teremben van az óra. Ütközés esetén a pirossal kiemelt „Óraütközés!” szöveg olvasható.

 3.5.2  A tanárok felülete A tanárok felülete jelentősen különbözik a diákok és a szülők interfészétől. Míg a felhasználók utóbbi csoportja csak megtekinteni tudja az adatokat, információkat, addig a tanároknak feltöltési, és szerkesztési hozzáférése van mindenhez. Az oldal felépítése hasonló, mint az egyszerű felhasználóknál, csak itt megjelennek a feltöltő és szerkesztő gombok. További változás még, hogy a főmenüben megjelenik az „ÜZENET” elem, amire 25

kattintva a pedagógusok egymásnak, és diákjaiknak tudnak üzeneteket küldeni akár emailben történő értesítés kiküldéssel (25. ábra).

25. ábra. Az üzenetküldő A tanárok a főmenüben az „E-NAPLÓ”-ra kattintva más felülettel találkoznak először, mint a felhasználók másik csoportjai. A 26. ábrán egy olyan oldal jelenik meg, ahol lehetőség van szűrni a diákokat osztályok szerint, majd pedig kiválasztani egy diákot.

26

26. ábra. Osztály, és diák kiválasztása A kiválasztást követően megjelenik az E-napló felülete hasonlóan, mint a diákoknál és a szülőknél, a következő különbségekkel:

Diák kiválasztó lista az almenü jobb oldalán

27. ábra. Kiválasztó gomb A 27. ábrán látható legördülő lista segítségével gyorsabban lehet a diákok között váltani. Nem kell gombra kattintani sem, az oldal a kiválasztott diák változására azonnal reagál. Ez a kiválasztó lista az elektronikus-órarendben és az összes feltöltő, szerkesztő oldalon is szerepel. A listából mindig csak a korábban kiválasztott osztály diákjai választhatók ki, és csak azok jelennek meg ABC sorrendben.

27

Plusz információk a diákokról Az egyéb információk mellett itt még megjelenik a regisztrálható hozzátartozók neve, és cbg azonosítója.

Szerkesztő gombok a kiválasztott diák neve alatt

28. ábra. Szerkesztő gombok A gombok funkciói a következők: •

Az első gomb az óra anyagának a feltöltéséért felelős. Rákattintva tehát órákat lehet feltölteni, törölni.

•

A „H” betű a hiányzást jelzi, jelen esetben egy adott órán a hiányzások tölthetők fel vagy törölhetők erre a gombra kattintva.

•

A harmadik gomb funkciója a késések feltöltése.

•

Az „125” gombbal jegyeket lehet feltölteni az egyes tárgyakhoz. Itt különböző opciók állnak rendelkezésre a feltöltéshez, akár az egész osztálynak feltölthetők egy dolgozat eredményei.

•

A piros „H” betűs gomb az igazolások feltöltésére szolgál. Fontos, hogy csak olyan órát lehet igazolni, amihez korábban lett hiányzás feltöltve.

•

A piros „125” gombbal a félévi vagy év végi jegyek tölthetők fel tárgyanként.

•

A zöld rácsos gomb az órarend feltöltését jelképezi. Rákattintva tölthetők fel órák az órarendbe, illetve hozhatók létre csoportok az egyes osztályokból.

•

A kék hátterű „kisgyerek felnőttel” gomb nyomtatási nézetet ad az összes

28

diákról, és a szüleikről, illetve az oktatási és cbg azonosítókról. •

Az első nyomtató ikon az E-naplóról ad nyomtatási nézetet.

•

A második nyomtató ikon pedig az órarend nyomtatásáért felelős. Az egeret az ikonok fölé irányítva olvasható az adott gomb funkciója.

Szerkesztő gombok az egyes tárgyaknál Ezek a gombok (29. ábra) ugyanazokkal a funkciókkal bírnak, mint fenti társaik. Különbség csak a jegyek feltöltésénél van. Ezeknek a gomboknak a használatával ugyanis jegyek feltöltése esetén a gombra kattintva a feltöltéskor az a tárgy fog megjelenni a tárgyak közül alapértelmezetten, amelyik tárgynál a gombra kattintott a felhasználó.

29. ábra. Szerkesztő gombok a tárgyaknál

29

Jegyek feltöltésének bemutatása A jegyek feltöltéséhez tehát a zöld színű „125” feliratú gombra kell kattintani. Ekkor a 30. ábrán látható felület nyílik meg egy új ablakban vagy fülön.

30. ábra. Jegyek feltöltése A tantárgyak közül csak azok fognak megjelenni, amelyek a feltöltő tanárnak be vannak állítva szaktárgyként. Kivételt csak az osztályfőnökök képeznek, ők a saját osztályukban bármilyen tárgyhoz tölthetnek akármit. Módosíthatnak, törölhetnek bejegyzéseket, jegyeket. A félév és hónap mezők mindig az aktuális félévet és hónapot mutatják alapértelmezetten. Természetesen át lehet őket állítani. A jegyek a szokásos 1-estől 5-ösig választhatók. A rendszer feles jegyeket nem kezel. A megjegyzésnél állítható a jegyek típusa. Lehet röpdolgozat, egyéb, szóbeli felelet, és témazáró. A feltöltésre kattintás előtt ki kell választani, hogy csak a kiválasztott diáknak, vagy többnek is akar a tanár feltölteni ugyanolyan típusú jegyeket. A kiválasztás a rádiógomb melletti szövegre történő kattintással is megtörténik. Ebben az esetben a kis 30

pipákkal választhatja ki a pedagógus, hogy melyik diákoknak szeretne jegyeket feltölteni, illetve milyen érdemjegyet tölt fel. A feltöltésre kattintva megjelenik egy kis ablak (31. ábra), ami tájékoztatja a feltöltőt a művelet sikerességéről, vagy sikertelenségéről. Ha sikerült a feltöltés, az Enaplóban már látható(k) is a frissen kiosztott jegy(ek).

31. ábra. Sikeres feltöltés A törlés hasonlóképpen történik, de mivel törölni egyszerre csak egy (a kiválasztott) diáknál lehet, ezért törlés esetén nem kell kiválasztani a feltöltési opciók közül egyiket sem. A tanulmányi dolgok feltöltése minden esetben hasonló módon működik, ezért itt nem is mutatom be mindegyik működését külön-külön. A felső – vörösből sötétszürkébe átmenő – elem tartalmazza mindig a főbb opciókat, míg a normál oldalon (szürke háttérrel) azok a beállítások találhatók, hogy kinek vagy kiknek kerüljön feltöltésre a jegy vagy hiányzás vagy bármi más.

31

 3.6 

Hozzáférések az oldalhoz a szakdolgozat 

olvasója számára Az adminisztrációs felületen (cbg.hu/cbgadmin) a következő felhasználói névvel, illetve jelszóval lehet belépni:

Felhasználói név:

szakdolgozat

Jelszó:

x4sg25

A

cbg

tanulmányi

rendszerében

(cbg.hu/cbgtr)

az

admin

felületen

(cbg.hu/cbgadmin) a CBGTR főmenüben található „Szakdolgozat” nevű diák, tanár, és szülő oktatási/cbg azonosítójával regisztrálhat az olvasó. Ezek a következők:

Diák azonosítója:

00064271459

Szülő azonosítója:

cbgWJSAuAkb

Tanár azonosítója:

00047892316

32

 4 Fejlesztői dokumentáció Fejlesztőként egy alkalmazás elkészítésekor fontos az előzetes, részletekre kitérő terv készítése arról, hogy pontosan mit is szeretnénk készíteni. Hogy mitől jó egy fejlesztői dokumentáció? Erről megoszlanak a vélemények, de egy specifikáció akkor jó, ha minden olyan részletre kitér, amely segíti megérteni egy másik programozó számára az alkalmazás működését. Ez különösen fontos a több fővel dolgozó projektek esetén, de máshol is szükséges lehet. Például ha a fejlesztő pár hónapig nem dolgozik a projekten, akkor a dokumentációt fellapozva meg tudja nézni, hogy korábban mit miért, és hogyan csinált. A fejlesztői dokumentációban az oldalak felépítését tekintve a felhasználóihoz dokumentációhoz hasonlóan fogok haladni, bemutatom többek között az oldalak felépítését (az egyszerű és az egyedi oldalakét is), az adatbázis szerkezetét, a médiaelemeket, a navigációt, az ergonómiai elemeket, és végül, de nem utolsósorban az oldal tesztelése fog sorra kerülni.

 4.1 

Feladatspecifikáció

A cbg.hu weboldal alapvetően három részből épül fel, az egyszerű látogatók számára készülő oldalból, az adminisztrációs felületből, és a tanulmányi rendszerből. Az alapoldalak megjelenítéséért az egyedi oldalak kivételével ugyanazok a fájlok felelnek majd, ilyen oldalakat egyszerűen létre is lehet majd hozni. Az oldalnak egyszerűen kezelhetőnek kell lennie, így az adminisztrációs oldalon egy saját CMS rendszert csinálok majd, amely segítségével egyszerűen lehet majd cikkeket feltölteni, törölni, szerkeszteni az oldalon. Itt az előbbi funkciókon kívül még egy statisztikai rendszer is működni fog, valamint a tanulmányi rendszerbe regisztrálható felhasználók adatait is itt kell feltölteni majd (ugyanis csak az a látogató regisztrálhat a tanulmányi rendszerben, akinek az azonosítója már szerepel a cbg.hu oldal adatbázisában). Az oldal használni fog egy szövegszerkesztőt is az egyszerű szövegszerkesztés érdekében.

33

A tanulmányi rendszert alapvetően három típusú látogató látogathatja majd, ezek a diákok, tanárok és a szülők. Természetesen csak a tanároknak van szerkesztési joguk a cbgtr oldalán. A tanulmányi rendszerben lesz egy e-napló, valamint egy elektronikus órarend. Az előbbiben a tanuló jegyei, hiányzásai, késései jelennek majd meg félévekre bontva, míg az utóbbiban a kiválasztott félév órarendje fog feltűnni. A tanárok küldhetnek majd üzeneteket a diákoknak, szülőknek, és kollégáiknak is. Ezeket az üzeneteket mindenki a tanulmányi rendszer belépés utáni kezdőlapján láthatja majd. Az oldal készítésénél igyekszem figyelni a külső megjelenésre is, az oldal vízszintesen fog több menüt is használni, a főmenün kívül egy oldalon akár több almenü is lehet. A megjelenésnél azt is figyelembe kell venni, hogy ergonómiailag kényelmes legyen használni, valamint hogy esztétikailag is szép legyen. Az oldal használni fogja a Google betűtípus-adatbázisát az egyedi betűtípusok jó kezelése érdekében. A szövegek jó olvashatósága is egy ergonómiai szempont, erre is figyelek majd az oldal tervezése folyamán. Lényeges dolog manapság a biztonság, az oldal készítésekor ennek is nagy figyelmet szentelek majd. A vendégkönyv, a jelszavak biztonságos tárolása, de akár már az általános oldalak felépítésekor is figyelembe kell venni az esetleges támadási lehetőségeket.

 4.2 

Rendszerterv

Az oldal nyílt forrású eszközökkel készül, valamint szintén nyílt forrású programokat futtató szerveren fog működni. A

forráskódok

elkészítéséhez

egyszerű,

nyílt

forrású

szövegszerkesztő

programokat fogok használni, ilyen például a Gedit, vagy a Kate. A grafikai elemeket a szintén nyílt forrású és ingyenes GIMP (The GNU Image Manipulation Program) programmal készítettem, a tutorial videó RecordMyDesktop programmal készíült, míg a videóvágások a KDE-s Kdenlive programmal készültek.

34

•

Az oldal készítésekor először egy látványtervet csinálok a GIMP nevű alkalmazással. Ötletszerzés gyanánt több oldalt is meglátogatok.

•

Ezután elkészítek egy xhtml-ben és css-ben írt lapot, és ráhúzom a kész látványtervet. A különböző grafikai elemeket itt is GIMP-pel készítem majd.

•

Megtervezem, illetve létrehozom az oldal adatbázisának szerkezetét. Ez utóbbit a phpMyAdmin programmal végzem el.

•

Ezt követően az oldal könyvtárszerkezetét készítem el, majd az egyes php fájlokat, amelyek a különböző oldalak működéséért felelnek majd. A php fájlokba természetesen beleillesztem a látványért felelős xhtml és stílus elemeket is.

•

Beépítem az oldalba a biztonságért felelős modulokat, illetve folyamatosan tesztelem a biztonságot.

•

Az oldal készítése során folyamatosan tesztelem az egyes lapok működését, de természetesen a kész oldalt is több szempontból tesztelem majd.

 4.3 

Fejlesztői környezet bemutatása

A fejlesztés során használt programokat, fejlesztői eszközöket már részben bemutattam az előző fejezetben. Itt az alkalmazás futtatásához szükséges szerver programokat, valamint az elkészült oldal telepítését fogom részletezni. Az oldal futtatásához szükség van egy Apache HTTP szerverre, PHP-ra, valamint az adatbázishoz természetesen MySQL-re, illetve az egyszerűbb adatbázis kezeléshez phpMyAdmin-ra. Természetesen mindezek előtt szükség van egy operációs rendszerre. A fejlesztéshez a saját gépemen én Ubuntu-t használok, konkrétan a legújabb, 11.04-es kiadást. A cbg.hu szerverén pedig Debian GNU/Linux van telepítve. Az operációs rendszerek telepítését természetesen itt most nem fogom bemutatni, viszont a fent említett szerver programok telepítését igen.

35

 4.3.1  A fejlesztői környezet telepítése Debian,  valamint Debian alapú rendszereknél Mivel Debian és Debian alapú Linuxok (például Ubuntu) esetében hasonlóan zajlik a telepítés, így csak az Ubuntura történő telepítést fogom bemutatni. A műveletek elvégzéséhez szükség van egy terminálra, amit grafikus felületen is elindíthatunk, természetesen szerver operációs rendszerek esetében alapértelmezetten nincs grafikus felület. A terminálba a következő parancsokat kell írni: su Csak Debian-nál szükséges! sudo   apt­get   install   mysql­server   apache2   php5   libapache2­mod­php5 

Apache2 és PHP5 telepítése sudo /etc/init.d/apache2 restart sudo a2enmod php5 sudo /etc/init.d/apache2 force­reload sudo   joe   /etc/apache2/sites­available/default

Itt van lehetőség az

alapértelmezett Apache könyvtár megváltoztatására, valamint arra, hogy .htaccess konfigurációs fájlokkal felülírható legyen egy tetszőleges oldal elérhetősége (keresőbarát linkek). Ez utóbbihoz a és a szekciókban az AllowOverride értékét All-ra kell módosítani. Az alapértelmezett könyvtár megváltoztatása pedig a Directory utáni értékek módosításával történik. Pl.: /var/www → /home/xy/www . sudo /etc/init.d/apache2 restart sudo a2enmod rewrite sudo apache2ctl ­l sudo   apt­get   install   php­pear   php5­gd   php5­xsl   curl   libcurl3   libcurl3­dev  php5­curl modulok telepítése sudo   apt­get   install   libapache2­mod­auth­mysql  Apache és MySQL

összekötése sudo apt­get install php5­mysql

36

sudo apt­get install phpmyadmin phpMyAdmin telepítése sudo   joe   /etc/apache2/apache2.conf A fájl végére be kell szúrni ezt:

„Include /etc/phpmyadmin/apache.conf” a phpMyAdmin helyes működéséhez sudo /etc/init.d/apache2 restart

 4.3.2  A weboldal telepítése A mellékelt CD-n a CBGhu könyvtárban található config.php fájlban be kell állítani az adatbázis hozzáférést, hogy az oldal csatlakozni tudjon az adatbázishoz. A következő adatokat kell itt módosítani: $host = "localhost"; //database location  $user = ""; //database username  $pass = ""; //database password  $db_name = ""; //database name

A $host-ba kerül az adatbázis elérhetősége, ez általában a localhost. Az $user értéke az adatbázishoz tartozó felhasználói név, a $pass értéke pedig a jelszó. A $db_name értelemszerűen a használni kívánt adatbázis neve. Ezekután az egész CBGhu könyvtár tartalma feltölthető a szerverre abba a könyvtárba, ami az Apache szervernek meg lett adva alapértelmezett könyvtárként. Ez friss Apache telepítés után a /var/www könyvtár (Linux szerver esetén). A phpMyAdmin szinte minden esetben a http://cím/phpmyadmin oldalon érhető el. Itt kell létrehozni egy új adatbázist tetszőleges névvel (természetesen a névnek egyeznie kell a $db_name változóban megadottal). Majd a kiválasztott adatbázisba importálni lehet a CBGdb könyvtárban található adatbázis-mentések egyikét (.sql, vagy .zip fájl). Ezek után már el is érhető az oldal a tartalmával együtt.

37

 4.4 

Az adatbázis

Az adatbázis felépítését tekintve két részre bontható. Az egyik fő szekció a cikkek tárolásáért, az admin felületért (admin felhasználók tárolása), valamint a statisztikák rögzítéséért felelős (32. ábra). A másik rész pedig egyértelműen a tanulmányi rendszerhez köthető (33. ábra). Így ide tartozik a cbgtr felhasználók rögzítése, a regisztrált felhasználók adatainak a tárolása, valamint az órarendek, órák, tárgyak, jegyek és még sok más tanulmányi adat tárolása.

32. ábra. Az adatbázis felépítése – 1 (A tartalmak, a menürendszer és a statisztika)

38

33. ábra. Az adatbázis felépítése – 2 (A tanulmányi rendszer) A 32. ábrán látható táblák, és funkcióik: stats

Statisztikai adatok tárolása az egyes oldalakról napi szinten.

countrystats

Honnan érkeznek a látogatók? Országos adatok.

MENU_main

A főmenü elemeit tárolja.

MENU_sub

Az almenüket, illetve kapcsolataikat, az egyes oldalak adatait tárolja.

articles

A különböző cikkeket tárolja kategóriánként.

lastmod

Az utoljára módosított kategóriát, és a módosítás időpontját tárolja.

estats

Az egyedi látogatókat számolja napokra bontva.

39

eipstats

Az aznapi egyedi látogatók ip-címeit tárolja, ezzel segítve azt, hogy két ugyanarról a címről érkező látogató ne kerüljön kétszer számolásra az estats táblában.

WWWADMIN

Az admin felhasználók adatait tárolja (nick, jelszó, stb...).

adminstats

Azt tárolja, hogy melyik admin mikor lépett be az adminfelületre.

A tanulmányi rendszerhez köthető táblák (33. ábra), és funkcióik: WWWbd

A regisztrálható felhasználók adatait tárolja.

WWWbdr

A regisztrált felhasználók adatait tárolja (nick, jelszó, egyéb...).

cbgtrstats

Azt méri, hogy melyik felhasználó mikor lépett be.

enora

A megtartott órákat tárolja.

enorarend

Az órarendeket tárolja.

encsop

Ez a tábla azt tartalmazza, hogy melyik diák melyik félévben milyen csoport(ok)nak tagja.

entargyak

Ebben a táblában található az összes tantárgy, amelyek közül választani lehet a tanulmányi rendszerben.

enjegy

Az évközi jegyeket, és típusokat tárolja ez a tábla.

enfjegy

Ennek a táblának a félévi/év végi jegyek tárolása a feladata.

enhianyzas

Ez a tábla a hiányzásokat, valamint a hozzájuk tartozó igazolásokat tárolja.

enkeses

A késés táblában található meg az, hogy melyik diák, mikor és mennyit késett egy adott óráról.

enuzenet

Az üzenet tábla pedig az üzenetek tárolásáért, valamint a címzettek tárolásárt felel.

 4.5 

A cbg.hu weboldal felépítése

A cbg.hu honlap oldalai általában két részre bonthatók ahogy azt már a 40

felhasználói dokumentációban is láthattuk. Azokra az oldalakra, amelyek egyediek mind megjelenésben mind működésben, és azokra amelyek hasonló felépítésűek. Az oldal ennek megfelelően tehát több elemből épül föl, ezeket külön-külön bemutatom dolgozatomban. A hasonló felépítésű oldalak megjelenítéséért mindig ugyanazok a fájlok fognak felelni, míg az egyedi oldalak külön egyedi forrásfájlokkal rendelkeznek. Az oldal forrásának szerkesztéséhez nem szükséges semmilyen keretrendszer, elég egy egyszerű szövegszerkesztő. Én személy szerint a Linuxos GNOME felületnél alapértelmezett Gedit szövegszerkesztőt használom, KDE felületnél pedig a Kate-t.

 4.5.1  Az oldal könyvtárszerkezete A cbg.hu weboldal könyvtárszerkezete a következőképpen épül fel: CBGhu­­­­­­­cbg_admin­f13­­­­­­backup cbgadmin cbgtr egykoridiakok errors esemenyek galeria­­­­­­­­­­­­­­­­­­css img js images­­­­­­­­­­­­­­­­­flags main rounded­­­­­­­­bg­white border­black top vector jelenlegidiakok kereses kezdolap 41

libraries­­­­­­­­­­­­­­­­­ckeditor­­­­­­­­­... mail­­­­­­­­­­­­­­­... mediaplayer osztalyoldalak uptmp vendegkonyv videos­­­­­­­­­­­­­­­­­­tutorial

 4.5.2  A hasonló felépítésű oldalak Az ezekért az oldalakért felelős fájlok a weboldal gyökérkönyvtárában találhatók. Ilyen oldalak például a cbg.hu/hirek/, a cbg.hu/cikkek/, a cbg.hu/seta/, és a cbg.hu/jelenlegitanarok/.

Egy oldal kiszolgálásának bemutatása A cbg.hu/hirek/ oldal begépelése után működésbe lép a .htaccess fájl, és átirányítja az oldalt a cbg.hu/page.php?name=hirek oldalra, amely ezek után megkapja, hogy pontosan milyen oldalt is akar a látogató megtekinteni, ami jelen esetben a hirek. Ezek után a page.php kiolvassa az adatbázisból, hogy ennek az oldalnak (hirek) mik az adatai. Az admin dönthet például arról, hogy a cikkek két részletben jelenjenek meg, „Tovább” gombbal, vagy egyben, vagy legyen-e oldalszámozás a lap alján. Ezekről az opciókról a későbbiekben még olvashat az olvasó. Szintén ez a fájl hívja meg a config.php-t, valamint a libraries könyvtárból a cim_re.php-t, a date.php-t, illetve a sql-inj+xss.php-t. Ezen fájlok szerepe sorban: az első az adatbázis kapcsolatért felel, a második a keresőbarát linkekért, a harmadik dátumot konvertál (adatbázisból történő olvasás után), az utolsó pedig az SQL-Injection valamint az XSS támadások kivédésére készített függvényeket szállítja. Az oldal a libraries könyvtárban található pinfo.php fájlból olvassa ki az oldal általános információit, valamint a keywords.php fájlból olvassa ki a kiírni kívánt 42

kulcsszavakat, melyek a keresőket segítik az oldalak indexelésében. Ezek után hívja az oldal a writer.php-t, amely a tartalom kiírását végzi, illetve a write_cpr.php-t,

amely

az

oldal

alján

található

oldaltérkép,

és

statisztika

megjelenítéséért felelős. A fájl alján találhatók a statisztikai mérésekért felelős fájlok, melyek részletesebb működésére a későbbiekben még kitérek. Ezek a fájlok függvényeket tartalmaznak, amelyek hívása után a statisztikai rendszer növeli a látogatottságot, vagy éppen törli a már szükségtelenné vált adatokat. A default.php és a defaultwriter.php hasonló külső fájlokat tölt be meghívás során, így azokra most nem térek ki.

A különböző fájlok szerepe az oldalakon A page.php felel a tartalmak kilistázásáért a writer.php-val együtt. Az előbbi fájl egy GET metódussal lekéri a megtekintendő oldal címéből az oldal nevét, majd összeveti az adatbázisban található nevekkel. Amennyiben talált a táblában egyezést, úgy kiolvassa belőle az oldal megjelenítési adatait. Ezek a megjelenítési opciók a következők: •

A tartalom típusa, ez egyben az artciles táblában található típus.

•

Az oldal felső részében található logó fájl neve. Amennyiben üresen hagyjuk, az alapértelmezett kép fog megjelenni. A többitől különböző kép található például a cbg.hu/korus/ oldalon.

•

A pages az oldalszámozásért felelős. Amennyiben az értéke igaz, a számozás megjelenik.

•

A next opció a „Tovább” gomb megjelenítéséhez kell, akkor ha a tartalom több részre van bontva, és szükség van a cikkek külön megjelenítésére.

•

A mainid azért felel, hogy a megfelelő főmenü-elem legyen kiemelve.

•

A subid az almenü megjelenítéséért felel.

•

Itt kérdezi le az oldal azt is, hogy melyik tábla cellák jelenjenek meg. Az

43

egyes tartalmak címkéit is itt olvassa ki az oldal. Például: „Szerző:”, „Dátum:”. •

Oldalszámozás esetén azt az id-t kérdezi le az oldal amelyiktől visszafelé nyolc tartalmat megjelenít az oldal. Így például ha az id 42, akkor a 42, 41, 40, 39, 38, 37, 36, 35-ös id-vel ellátott cikkeket fogja megjeleníteni.

•

Az oldalon több include is szerepel, amelyek az adatbázis-hozzáférésért, linkek kezelésért, a dátum konvertálásáért, valamint a biztonságért felelnek.

A writer.php jeleníti meg a cikkeket, valamint – amennyiben engedélyezve van a megjelenítése – a „Tovább” gombo(ka)t, illetve a Facebook „Tetszik” vagy „Like” gombo(ka)t. A default.php felel egy cikk, valamint az ajánló megjelenítéséért. A defaultwriter.php – hasonlóan a writer.php-hoz – egy cikk kiírásáért felel. Annyi a különbség, hogy itt mindig teljes cikkek válnak láthatóvá. Ezen az oldalon a page.php opcióin kívül még a megjelenítendő tartalom id-ját is GET metódussal kéri le a fájl. Lényegében csak az id szükséges a cikk megjelenítéséhez, a page.php azonban az id-n kívül egy keresőbarát linket is készít a cikk címéből. A defaultwriter.php fájl írja ki az ajánlót az oldal jobb oldalán. Mindig 5-5 cikket mutat meg, a megnyitott cikken kívül még az előtte lévő ötöt, és az utána lévő ötöt (amennyiben van annyi cikk előtte vagy utána). A fájlok alján található a statisztikai rendszer alkalmazása, ahol is a libraries könyvtárból vannak beillesztve fájlok, illetve a statisztikai függvények vannak meghívva, sorrendben a következők: stats(); - estats(); - delete_eipstats(); delete_adminstats(); . Ezekről bővebben a Statisztika fejezetben olvashat az olvasó.

Oldalak felépítése az adatbázisban, és létrehozás Mivel mindegyik ilyen oldal megjelenítéséért ugyanaz a 4db fájl felel, ezért az oldal forráskódjába egyáltalán nem szükséges belenyúlnia az adminisztrátornak, ahhoz hogy egy új oldalt, és egy új menüelemet illesszen be a weboldalba. 44

Főmenü beillesztéséhez az adatbázisban a MENU_main táblához (34. ábra) kell egy sort hozzáadni, mégpedig úgy, hogy annak az id-ja egyedi legyen, illetve az id-k sorrendje stimmeljen. Egy almenü beillesztése már bonyolultabb feladat, hiszen itt több mindent is meg kell adni. Almenü beillesztése esetén a MENU_sub táblába (34. ábra) kell beilleszteni egy sort, mégpedig a következőképpen: Ebben a táblában az első oszlop (id) egy általános id, csak arra kell figyelni, hogy egyedi legyen. A mainid oszlopba az a szám kerül, ahányadik főmenüben meg kell jelennie a létrehozni kívánt almenünek. Ez a szám a MENU_main táblában szereplő id. A subid pedig egy olyan szám, amely meghatározza, hogy az egy főmenühöz tartozó almenük milyen sorrendben jelenjenek meg. A nev oszlop az almenüben megjelenő szöveget tartalmazza (mivel az almenük is csupa nagybetűsek, ezért itt mindegyik sorban nagybetűs elem szerepel). A nev1 ugyanazt tartalmazza, mint a nev, csak itt nem csupa nagybetűvel. Ez a szöveg például az oldalak címsorában jelenik meg. A nev2 és 3 az adminisztrációs felületen jelenik meg a szövegkörnyezetnek megfelelően, ezért itt kisebb változások találhatók. A cim_nev az oldal elérhetőségére utal, de magát a link címét a href oszlop tartalmazza. Az ab_nev az adatbázisban betöltött név, míg a stat_nev a statisztikai táblában szereplő névre utal. Ez előbbi név szerepel az articles tábla type oszlopában a különböző tartalmak egyszerű kategorizálása céljából. Amennyiben új oldalt hozunk létre, és szeretnénk a statisztikai rendszerben méretni a látogatottságot, úgy a stats táblában létre kell hozni egy olyan nevű oszlopot, amit a stat_nev-nek korábban megadtunk. A stat oszlop 0 vagy 1 értéke azt jelenti, hogy legyen-e az oldalon statisztika, vagy ne. Ha nincs, akkor az admin felületen sem jelenik meg az oldal a diagramban. A kereses oszlopában az állítható be, hogy az adott oldalon lehessen-e keresni vagy sem. Az admin valamint az admin_ltd oszlopok azért felelnek, hogy az admin, illetve a csökkentett jogosultságú admin felületén megjelenjen-e a tartalom szerkesztésének, feltöltésének a lehetősége. Az új cikk feltöltésének lehetőségét a new oszloppal állíthatjuk be, amelynek értéke szintén nulla vagy egy lehet az előzőekhez hasonlóan. Amennyiben nullát állítunk be itt, akkor nincs lehetőség új cikk feltöltésére a tartalomtípusnál, csak a régieket lehet szerkeszteni (törölni nem).

45

A cim oszlop tartalmazza azt, hogy megjelenjen-e, valamint szerkeszthető legyene a cím tartalma az adott tartalomtípusnál, illetve legyen-e kiírva valami a tartalom előtt. Például egy cikk címe elé nem szokták azt kiírni, hogy „Cím:” ezért itt az oszlop értéke simán csak „1”. De szerzőknél például ki szokták írni a szerző neve elé azt, hogy „Szerző:” ezért az oszlop értéke itt „Szerző:”. A cim2 oszlop az admin felületen a bemeneti mezők előtt szereplő szöveget tartalmazza. Itt a cím esetében is meg kell adni, hogy „Cím:”, különben a felhasználó nem tudja majd, hogy mit írjon ide. A cim-def oszlop az alapértelmezett tartalmat tárolja. Amennyiben azt szeretnénk, hogy az adott tartalomtípusnál a címnek „cbg” legyen alapértelmezett értéke felöltéskor, akkor ide a „cbg” szöveget írjuk. A többi típus hasonlóan működik, kivéve a dátum típust ahol is, ha a datum-def értékét date-ra állítjuk, akkor feltöltéskor a dátum az aznapi dátumot fogja alapértelmezettként kijelezni. A topbg az oldal tetején található „Celldömölk Berzsenyi Dániel Gimnázium” kép lecseréléséért felelős, amennyiben üresen hagyjuk, úgy az alapértelmezett jelenik meg. A pages értéke az oldalszámozás megjelenítéséért felel, amennyiben az értéke egy, akkor megjelenik oldalszámozás az oldal alján. A next nevű oszlop értéke a „Tovább” gomb mutatásáért, vagy elrejtéséért felel. Ha nem jelenik meg a gomb, akkor az oldalon a teljes cikk olvasható, ellenkező esetben egy rövid előzetes után látható a „Tovább” gomb, melyre kattintva a cikk teljes egésze láthetó, valamint az ajánló is előtűnik.

46

34. ábra. Oldalak felépítése az adatbázisban

 4.5.3  Az egyedi oldalak felépítése Az egyedi oldalak egyedi könyvtárakban foglalnak helyet, és egyedi forráskódfájlok felelnek a működésükért, ezért módosításuk sem olyan egyszerű. Az egyedi oldalak elérése a könyvtárnevek szerint történik. Például: cbg.hu/kezdolap/ . Ezek az oldalak megjelenésben, és működésben is különbözhetnek a többi oldaltól. A kezdőlapon az első, szemmel látható különbség az animáció. Ez egy JavaScript animáció, amely az oldal betöltésekor azonnal elindul, és az előre beállított képeket jeleníti meg. A script kód a dynamicdrive.com oldalról lett implementálva, és a következőképpen működik: <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 

Jquery beillesztése. <script type="text/javascript" src="fadeslideshow.js">  A slideshow

importálása.

47

<script type="text/javascript"> 
animáció. dimensions: [900, 250], Az animáció mérete. Imagearray: [ A képeket tartalmazó tömb. ["../images/main/welcomebg­szg2010­1.png", "", "", ""], Az egyes képek. ["../images/main/welcomebg­szg2010­2.png", "", "", ""] ],  displaymode: {type:'auto', pause:6000, cycles:0, wraparound:false,  randomize:false}, Különböző beállítási opciók például kép megjelenítésének hossza. persist: false, fadeduration: 500, Átmenet hosszúsága. descreveal: "none",  togglerid: ""  })  ­­> 

Az egyedi oldalak ugyan azokat a külső fájlokat hívják meg a libraries könyvtárból, mint a többi oldal. Az esetek nagy részében a hívások sorrendje is megegyezik, hiszen ezek az oldalak csak apróbb felépítésbeli különbségekkel rendelkeznek. Ezen az oldalon találkozik a látogató először az oldallal, így aztán több minden is elhelyezésre került itt. A kezdőlap elrendezése táblázatok segítségével lett megvalósítva, az elérhetőségnél sötétebb háttérrel jelenik meg a táblázat cellája. Lényegében az összes fontos tartalomtípusból lehet cikkeket olvasni a kezdőlapon. Az ezek megjelenítéséért felelős fájlok szintén a kezdolap könyvtárban foglalnak helyet. Ezek a fájlok rendre: index_cikkek.php,

index_eredmenyek.php,

index_esemenyek.php,

index_hirek.php, index_info.php, index_iskolank.php . Ezekben a fájlokban van meghatározva, hogy az egyes tartalmakból mennyi, milyen sorrendben, és milyen

48

formában kerüljön ki a kezdőlapra. Erre mindjárt mutatok is egy példát. A cikkek megjelenítése a kezdőlapon így történik: $open   =   mysql_query("SELECT   cim,datum,szerzo,tart   FROM   `articles`  WHERE type='$table_name' ORDER BY catid DESC LIMIT $minnum");  $number = mysql_numrows($open);

Az SQL-lekérdezés lényegében rendezi a tartalomtípus cikkeit ID szerint csökkenő sorrendben, valamint meghatározza azt a mennyiséget, amit meg szabad belőle jeleníteni. Ezután egy ciklus ki is írja az egyes cikkeket. Az eseményeket dátum szerint növekvően rendezi az oldal, és csak egy bizonyos mennyiség jelenik meg a kezdőlapon. A jelenlegi/egykori diákokat megjelenítő oldalak szintén hasonlóan működnek. Lekérdezik egy GET-tel a ballagás évét, és ha nincs megadva az oldal címében az év, akkor beállítanak egy értéket, amely szerint az oldal listázza az abban az évben ballagott osztályokat. Amennyiben nem szabályos az évszám, (nagyobb vagy kisebb a megengedettnél) úgy az oldal az „error 404” lapra irányítja a látogatót. A menüt jelenlegi_menu.php/egykori_menu.php, a névsorokat a classwriter.php jeleníti meg. A menü mögötti háttér változtatásáról az egykori diákok esetében szintén JavaScript kód felelős. A menüt itt JavaScript írja ki, az a szerepe, hogy a jelenlegi diákoknál csak azok az évszámok jelenjenek meg, amelyekhez tartozó osztályok még nem érettségiztek le, valamint hogy az egykori diákoknál csak azok az évszámok jelenjenek meg, amelyekhez tartozó évfolyamok már elhagyták a gimnáziumot. Az osztályoldalak hasonló elven működnek mint a jelenlegi/egykori diákok oldalai, csak itt nem évfolyamokra lehet bontani az iskolában tanult diákokat, hanem a jelenlegi osztályok szerint csoportosíthatók a megjelenítendő „üzenetek”. Az események oldalon pedig bizonyos feltételeknek megfelelően jelennek vagy nem jelennek meg az események (volt, lesz), ezért is volt szükséges itt is egyedi oldalt létrehozni. A fő, illetve almenü elemei az egyedi oldalaknál is hasonlóképpen kerülnek a 49

képernyőre, mint a többi oldalaknál, melyeket korábban már bemutattam.

 4.5.4  Statisztika A statisztikai rendszer megjelenítését a felhasználói dokumentációban korábban már bemutattam, most a működésére fogok részletesebben kitérni. A statisztika működéséért a libraries könyvtárban található fájlok felelősek, ezek minden oldal aljába be vannak illesztve, amiről korábban már szintén írtam. A szimpla statisztikai tábla (stats) az általános statisztikai adatokat tárolja napi bontásban. Amennyiben az aktuális dátumhoz még nincs a táblában sor feltöltve, úgy a stats.php fájl létrehozza a bejegyzést. Ha volt már bejegyzés a táblában az aktuális dátummal, akkor nem hoz létre újat, hanem az adott oldal adott napra vonatkozó látogatottsági értékét növeli eggyel. A stats() függvényt meghívva meg kell adni, hogy melyik oldalra vonatkozik a statisztika, a függvénynek ez az egyetlen bemenete. Az egyedi statisztikai adatok mérése már bonyolultabban működik. Ezek az adatok az estats és az eipstats táblák segítségével kerülnek mérésre. A méréseket az estats.php fájlban található estats() függvény végzi. Ennek a függvénynek a feladata az egyedi látogatók mérésén kívül még az országadatok rögzítése is, azaz hogy melyik egyedi látogató melyik országból érkezik. A függvény indításakor ellenőrzi, hogy van-e már ilyen dátum érték az estats táblában. Amennyiben nem talál ilyet, úgy létrehozza, majd a látogatók mérése a következő módon történik: a függvény először ellenőrzi, hogy a látogató ip-címe megtalálható-e az aktuális dátummal az eipstats táblában, ha nem talál ilyet, akkor az estats táblában növeli eggyel az aznapi egyedi látogatók számát, majd hozzáadja az ip-címet az aktuális dátummal az eipstats táblához, így ha a látogató több oldalt is megnéz, akkor már szerepelni fog a táblában és a függvény nem fogja ismét növelni az egyedi látogatók számát. Amennyiben a látogató egyedi volt, akkor az estats() függvény a GeoLiteCity adatbázis segítségével meghatározza a látogató országát, városát, és ezeket az adatokat a pontos dátummal és idővel egyetemben beilleszti a countrystats táblába. Az oldal a továbbiakban már nem szükséges adatokat bizonyos idő után törli. Ezt 50

a műveletet szintén a libraries könyvtárból beillesztett függvénnyel oldja meg. Ez a függvény a delete-eipstats.php fájlban található, és a delete_eipstats() névre hallgat. Ez a metódus törli az előző napi ip-címeket az eipstats táblából, hiszen azokra már nincsen a továbbiakban szükség.

 4.5.5  Keresés A keresés során az oldal az adatbázisban keres, ott ahol azt az oldal adminisztrátora megengedte. Már korábban írtam arról, hogy hogyan lehet engedélyezni a keresést a MENU_sub táblában, most lássuk azt, hogy hogyan működik ez az oldalon. Lehetőség van a fő kereső mellett a jelenlegi/egykori diákok oldalain is keresni, ezt most nem fogom bemutatni, hiszen hasonlóan működik mint a fő kereső, csak éppen kevesebb helyen keres. Amennyiben az oldal tetején beír a felhasználó egy szót, a keresés ikonra kattintva, vagy entert ütve, az oldal elküldi ezt a stringet a keresőnek. A kereső először rövid előzeteseket ír a találatokból a könnyebb átláthatóság érdekében. Ezt a kereso mappában található search.php végzi. A postolt adatot először szűri az oldal, erre még a biztonsággal foglalkozó fejezetben kitérek majd. Ezután elkezdi keresni az adatbázisban a találatokat. Az oldal nem érzékeny a kis- és nagybetűkre, valamint az ékezetekre sem. Azokat a tartalomtípusokat, amelyekben lehet keresni, a következő SQL-lekérdezéssel listázza ki az oldal: $sqlstr_stat=mysql_query("SELECT   *   FROM   `MENU_sub`   WHERE   kereses=1   ORDER BY mainid, subid ASC");

Ezután egy ciklus kezdődik, amiben az egyes típusok cikkeiben keresi a kereső a beírt szót. Amennyiben van találat, úgy azt a cikket kiírja az oldal. Természetesen a cikkeket tartalomtípus szerint rendezi a kereső. Ha a kiírt szövegben szerepel a keresett szó, akkor azt a search_color() függvény színes (sárga) háttérrel fog megjelenni. Az egyes találatok után a „Tovább” gombra kattintva az oldal kiírja a teljes cikket, amelyben a keresett szó legalább egy helyen szerepelt. A searchX.php felel a találatok 51

részletesebb megjelenítéséért. Ennek a fájlnak az előző oldal a link címében küldi tovább a tartalom típusát, az id-t, és a keresett stringet. Ezután a kód get-tel lekérdezi ezeket az adatokat, majd kiírja a kért cikket, és kiemeli benne az összes találatot.

 4.5.6  Az admin felület felépítése Az admin felület forráskódja a cbg_admin-f13 könyvtárban található, de a felület a cbg.hu/cbgadmin linkről is elérhető .htaccess átirányításokkal. Az általános adminfelületi fájlok a padm előtaggal kezdődnek, a statisztikai fájlok stat előtaggal, a belépést végző fájlok user illetve login előtaggal, a cikkek feltöltéséért felelős fájlok articles előtaggal, míg a tanulmányi rendszer adminisztrálásával foglalkozó fájlok cbgtr előtaggal kezdődnek. A könyvtáron belül a backup mappa az adatbázis-visszaállításokat tárolja, az összes többi fájl a cbg_admin-f13 könyvtárban található. A bejelentkezésért a login_a, login_b, user_normal, és az user_csokkentett PHP fájlok felelnek. A bejelentkező felület a padm_kezdolap.php fájlban található, amennyiben a felhasználó bepipálja azt, hogy ő bejelentkezve marad, úgy a „Belépés” gombra kattintva a kezdőlap POST metódussal továbbküldi a felhasználói néven, és a jelszón kívül ezt az információt is, a login_a.php, vagy login_b.php fájloknak. Amennyiben a felhasználó nem korábbról maradt bejelentkezve, akkor az oldal sütikben raktározza el ezeket az információkat, így a felhasználó nem kerül később sem kijelentkeztetésre. Minden védett fájlba be van illesztve a bejelentkezési rendszer, amely minden egyes alkalommal ellenőrzi azt, hogy a látogató tényleg be van-e lépve, és ha igen, akkor jogosult-e az adott oldal megtekintésére. Ha nem, akkor a jogosulatlan látogató a bejelentkező felületre lesz átirányítva. Ez a fájl a login_a.php, és a loin_b.php lehet, attól függően, hogy az oldal megtekintéséhez normál admin jogosultság, vagy csökkentett admin jogosultság szükségeltetik. Tartalmak feltöltését, szerkesztését, módosítását minden esetben ugyanazok 52

fájlok végzik, ezek a .htaccess konfigurációs fájl segítségével (hasonlóan, mint a keresőbarát linkek kialakításánál) kapják meg azokat az adatokat, amelyek alapján kiderül, hogy melyik tartalmat akarja az admin szerkeszteni. Feltöltéskor az articles_up.php jeleníti meg a feltöltendő feltöltésért felelős mezőket, és szövegszerkesztőket. Az articles_uploading.php fájl a cikkek felöltéséért felel, az adatokat POST-tal kapja, és biztonsági szűrést végez rajtuk. Majd egy INSERT INTO MySQL utasítással beilleszti az articles nevű adatbázis táblába az új sort. Az

egy

kategóriában

írt

cikkek

listázása

szerkesztése,

törlésre,

az

artciles_edit.php fájl feladata. Amennyiben szerkesztünk egy cikket, úgy a artciles_edit_view.php nyílik meg, ami annyiban különbözik az articles_up.php-tól, hogy itt a beviteli mezőkben a szerkeszteni kívánt cikke jelenik meg (tehát nem üresek). A feltöltést itt az articles_edit_uploading.php végzi, amely szintén szűri a beküldött tartalmat, így az oldal nem fog SQL utasításokat értelmezni ott, ahol nem kell. A diákok, tanárok, szülők feltöltése az adatbázisba azért szükséges, mert máshogyan nem tudnának regisztrálni a cbg.hu/cbgtr oldalon (mivel a rendszer úgy van megoldva, hogy bárki ne regisztrálhasson). A már feltöltött tagok megjelenítését a cbgtr_read.php, cbgtr_read_tanar.php, és a cbgtr_read_szulo.php fájlok végzik. A diákok itt osztályonként, és névsorban kerülnek megjelenítésre, a többi tag egyszerűen csak névsorban kerül kiírásra. Új tagok feltöltését a cbgtr_up.php, és a cbgtr_uploading.php fájlok végzik a WWWbd nevű táblába. Az előbbi kiírja a megfelelő mezőket, attól függően, hogy diákot, tanárt, vagy éppen szülőt akarunk feltölteni. Az utóbbi fájl feladata pedig a feltöltés az adatbázisba. Tagok szerkesztése esetén, hasonlóan a cikkekhez, a cbgtr_edit.php fájl felel a mezők

megjelenítéséért,

amelyek

jelen

esetben

nem

üresek,

a

cbgtr_edit_uploading.php pedig a módosítások feltöltését végzi.

53

 4.5.7  A CBG Tanulmányi Rendszer felépítése A tanulmányi rendszernél a beléptetés hasonló módon zajlik, mint az adminisztrációs felületen, néhány plusz szolgáltatással kiegészítve. Így a sima bejelentkező felület működését most újra nem mutatom be, csak a különbségekre térek ki. Az egyik különbség, hogy ezen az oldalon lehetőség van regisztrálni, azaz a korábban az admin felületen feltöltött tagok az azonosítóikkal regisztrálhatnak az oldalon, majd ezután be is léphetnek. A regisztrációs oldalt a register.php fájl jeleníti meg, és a regisztrációt register-proc.php oldal dolgozza fel. Természetesen a .htaccessel történő átirányítás során ezek az oldalak is egyszerűbb elérési lehetőséget kaptak. A feldolgozó fájl feladata elsősorban az, hogy az adatok kitöltése után a regisztráló gombra kattintva az oldal ellenőrzi a kapott adatokat. Így azt is megnézi, hogy a regisztrációkor megadott azonosító kód szerepel-e az adatbázisban. Amennyiben nem, úgy a regisztrálás sikertelen, erről a felhasználót az oldal tájékoztatja is. Ha már regisztráltak a kapott azonosítóval, az oldal akkor is hibát jelez. Az azonosítón kívül az oldal ellenőrzi még a felhasználói nevet, valamint az email címet is, hiszen ezeknek egyedieknek kell lenniük. Amennyiben valamelyik legalább egyszer szerepel az adatbázisban, a regisztráció ismét megszakad. Bizonyos adatoknak van minimális hossza is, a regisztráció során ezt is ellenőrizzük, valamint vannak az egyes mezőkben tiltott karakterek is, például e-mail címben nem szerepelhet szóköz. A bejelentkezés után hasonló felület fogadja a felhasználót, mint az admin oldal esetében, csak itt az adott felhasználóknak szóló személyes, vagy csoportos üzenetek jelennek meg. Kiemelem még a tanulmányi rendszerben az elektronikus naplót és órarendet, hiszen ezek viszonylag egyedi funkciók az oldalon. Az e-napló megjelenítéséért a bden.php fájl a felelős. Ez az oldal először 54

meghatározza, hogy milyen típusú felhasználó látogatja éppen az e-naplót. Ez a típus csak három fajta lehet: diák, tanár, és szülő. Az oldal, és a funkciók megjelenését, vagy elrejtését ezek a típusok határozzák meg. Ciklusok segítségével ír ki több gyereket (amennyiben a felhasználó szülő), valamint szintén ciklusokkal írja ki az oldalra az adott félév tárgyait, és jegyeit. A félévet egy GET-tel kéri le az oldal címéből, amennyiben nincs megadva ilyen, akkor egy alapértelmezett értéket használ. Ha a felhasználó típusa tanár, akkor megjeleníti az adatok szerkesztéséhez szükséges gombokat, illetve néhány plusz adatot is a kiválasztott diákról. Az almenüben lehetőség nyílik az egy osztályba járók közötti gyors váltásra, melyet egy legördülő listával oldottam meg. A lista értékének változásakor a rendszer automatikusan jeleníti meg a kiválasztott diák adatait, anélkül, hogy bármilyen gombot meg kellene nyomni. Ezt a funkciót a select-ben egy onchange opció oldja meg, amely változáskor POST-tal elküldi az adatokat a kiválasztó fájlnak, s az átirányítja az oldalt a kiválasztott diák e-naplójához. Az órarendet a bdenorarend.php fájl jeleníti meg, amely hasonlóan működik mint az e-napló megjelenítése, csak itt a jegyek, hiányzások, egyéb adatok helyett egy órarend jelenik meg táblázatba rendezve, szintén ciklusok segítségével. Arról már korábban írtam, hogy a tanárok tudják csak a jegyeket, órarendet, hiányzásokat, egyéb tanulmányi adatokat szerkeszteni. Ezeket a dolgokért külön-külön forrásfájlok felelősek, általában mindegyik opcióhoz három tartozik: en_*.php, en_*_kival.php, és az en_*_up.php fájlok. A csillag helyén természetesen lehet hianyzas, keses, vagy bármi. Az első fájl mindig magát a feltöltő-felületet adja, ahol ki lehet választani a feltöltési opciókat. A kiválasztó php fájl (en_*_kival.php) a diákok kiválasztásáért felel az előbb – az e-naplónál – már bemutatott módon. Végül, de nem utolsósorban az utolsó fájl az adatok (jegy, késés, hiányzás, stb.) feltöltéséért felel. Ez a fájl tölti fel az adatbázisba az en* nevű táblákba (pl.: enkeses) az adatokat. Az en_jegy_sendmail.php fájl egy negyedik típusba tartozik. Ennek a feladata jegyek feltöltése, vagy törlése esetén értesítő e-mailt küldeni. Akár több címzettnek is tud külön-külön egyedi leveleket kiküldeni.

55

Üzenetküldés esetében a message.php fájl jeleníti meg az üzenetküldő felületet a szövegszerkesztővel együtt. Valamint a címzettek listája is itt jelenik meg. Az üzenetek nem

szerkeszthetők,

ezért

csak

egy

feltöltő

kódra

van

szükség,

ez

a

message_uploading.php fájlban található. Mivel van lehetőség az üzenetekről e-mail értesítők kiküldésére is, ezért egy harmadik fájlban kapott helyet a leveleket kiküldő kód. A message_sendmail.php fájl segítségével az oldal először meghatározza a címzetteket (a legördülő listából POST-tal kapja meg), majd akiknek van e-mail címük a címzettek közül (vagyis a regisztrált felhasználók), azoknak kiküldi az értesítő levelet arról, hogy lépjenek be a rendszerbe, mert üzenetet kaptak.

 4.6 

A CKEditor beépítése az oldalakba

A CKEditor egy nagy tudású, ingyenes, egyszerűen használható, JavaScript nyelven írt webes felületű szövegszerkesztő program (35. ábra), amely a weboldal könyvtárszerkezetében a libraries könyvtárban kapott helyet [1, CKSource Docs].

35. ábra. A CKEditor A CKEditor szövegszerkesztőt az oldal több helyen használja. Többek között az admin felületen a különböző tartalmak feltöltésekor is alkalmazza az oldal ezt a programot. <script type="text/javascript" src="../libraries/ckeditor/ckeditor.js">

56

<script type="text/javascript"> // 

A program alkalmazása a fenti módon történik. Egy textarea mezőt használ a CKEditor a megjelenítéshez, azután pedig az a script következik, ami beilleszti a textarea helyére az editort.

 4.7 

Google betűtípusok

Az oldalakon az elegáns megjelenés céljából, egyedi – kézírás hatását keltő – betűtípust is használok. Ez a betűtípus a Google webes betűtípusadatbázisából származik [2, Google web fonts], így aztán a megjelenítéséhez nem szükséges a látogató számítógépén telepíteni. Ezt egyetlen sor beillesztésével oldja meg a weboldal, amely sort a libraries könyvtárban található webfonts.php fájl head-be történő beillesztésével lehet megcsinálni. A webfonts.php tartalma: '); ?>

Ezek után a css fájlban, vagy bárhol máshol az oldalon használhatóvá válik az új betűtípus, esetünkben ez a Reenie Beanie.

57

A html kódba ezt a forrást kell hozzáadni, és máris elérhető a betűtípus. A Google adatbázisából természetesen több betűtípus is lekérhető és ingyenesen használható.

 4.8 

Facebook widget

Manapság a Facebook közösségi oldal hatalmas népszerűségnek örvend. Lehetőség van Facebook widgeketek elhelyezésére egyes oldalakon, és „Like”-olni az egyes cikkeket, eseményeket. Nézzük meg a hírek lájkolásának módját [3, Like Button]: echo(' <script type="text/javascript"> \'); ­­> ');

Egy iframe ablakot kell beilleszteni az oldalba. Mivel más – valid – kóddal nem minden böngészőben jelenik meg a like gomb, ezért kénytelen voltam ezt alkalmazni itt. A validitás megőrzése érdekében azonban lehetőség van a hibás kódot scriptbe tenni és azzal kiíratni, így a validátor a közötti részeket nem ellenőrzi.

 4.9 

Biztonság a weblapon

A biztonság nagyon fontos egy honlapon, hiszen manapság sokan, sokféle módszerekkel próbálkoznak az egyes oldalak feltörésével. Ez a weboldal is többféle módon védekezik a támadások ellen. A libraries könyvtárban található a biztonságért 58

felelős függvényeket tartalmazó fájl is. A cbg.hu weboldal szinte egészében használatosak függvények, melyek az oldal feltörése, támadása ellen védenek. Az sql-inj+xss.php fájban találhatók a biztonságért felelős függvények. A fontosabb függvények az sql_inj() és az xss() nevűek. Mint az a függvények neveiből kiderül, az egyik az SQL Injection, a másik pedig az XSS (Crosssite scripting) támadások kivédésére szolgál. A cbg.hu oldalainak jelentős része linkből határozza meg, hogy mit jelenítsen meg, ezért szinte minden oldalon szűrve vannak az sql_inj() függvénnyel a get-ből beérkező adatok. A belépés során szintén fontos a bejövő adatok szűrése, hiszen az SQL Injection támadással egy szűretlen login felületen a támadók akár a teljes adatbázist törölhetik, vagy módosíthatják. A jelszavak biztonságos, titkosított tárolása is elengedhetetlen egy olyan oldal számára, amit sok regisztrált felhasználó használ. Így az oldal többféle visszafejthetetlen titkosítást is használ a bejelentkezések folyamán. Az admin felületen md5 titkosítással dolgozik az oldal, ami azt jelenti, hogy bejelentkezéskor a beírt jelszót az oldal titkosítja md5-tel, majd ezt a titkosított jelszót hasonlítja össze az adatbázisban található szintén titkosított jelszóval. A tanulmányi rendszer bejelentkező felülete az md5-nél már komolyabb titkosítást, és úgynevezett „sózást” is használ. Ezek a jelszavak egy bizonyos stringsorozattal (só) együtt kerülnek titkosításra, így a rövidebb jelszavak is biztonságosan tárolhatók, méghozzá ebben az esetben sha512-es kódolással. A vendégkönyv esetében különösen fontos a biztonságra figyelni, hiszen ez az egyetlen felület, ahol az oldalra bárki bármit feltölthet. Ez a bármi lehet akár egy rosszindulatú link, vagy JavaScript tartalom. A védelem érdekében itt az sql_inj() függvény mellett az xss() függvény is szűri a beküldött tartalmakat. A vendégkönyvön kívül még a kereső-oldal is duplán le van védve a támadások ellen.

59

 4.10  Média­elemek (hangok, videók) A hangoknak, videóknak, fotó-albumoknak nagy szerepe van egy oldal látogatottságában. Főleg egy gimnázium esetében, hiszen a diákok mindig kíváncsiak arra, hogy az egyes rendezvények fotóin, videóin hol találhatják meg saját magukat. A galériában találhatók az oldalra beillesztett Picasa webes albumok, valamint Youtube videók is, amiket én vágtam szintén nyílt forráskódú és ingyenes alkalmazás segítségével (Kdenlive). Az admin felületre egy általam készített tutorial videó is be lett illesztve. A picasa albumok beillesztésére szolgáló script a galeria mappában található. A JavaScript fájlok a js könyvtáron, míg a stílus fájlok a css könyvtáron belül találhatók. A képek az img könyvtárban tekinthetők meg. Maguknak az albumoknak a beillesztése az index.php fájlban történik a következőképpen: