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

Átírás

1 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ó Budapest, 2011

2 Tartalomjegyzék 1 Bevezetés A szakdolgozat célja Felhasználói dokumentáció Az oldal bemutatása Egy általános oldal felépítése Navigációs elemek az oldalon Általános látogatók A Kezdőlap felépítése A jelenlegi/egykori diákok oldala Az osztályoldalak felépítése Az Események oldal Vendégkönyv Galéria Keresés az oldalon További oldalak Az adminisztrációs felület Tartalom feltöltése, szerkesztése, törlése Fájlok feltöltése, törlése A CBG Tanulmányi Rendszer adatainak szerkesztése A statisztikai rendszer A CBG Tanulmányi Rendszer A diákok és a szülők felülete A tanárok felülete Hozzáférések az oldalhoz a szakdolgozat olvasója számára Fejlesztői dokumentáció Feladatspecifikáció Rendszerterv Fejlesztői környezet bemutatása A fejlesztői környezet telepítése Debian, valamint Debian alapú rendszereknél A weboldal telepítése Az adatbázis A cbg.hu weboldal felépítése Az oldal könyvtárszerkezete A hasonló felépítésű oldalak Az egyedi oldalak felépítése Statisztika Keresés Az admin felület felépítése...52

3 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

4 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

5 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

6 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

7 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 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

8 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

9 oldalak, amelyekre váltani lehetne 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

10 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 óta. Az oldal a látogatók IP-címei alapján készíti el a statisztikákat. 7

11 3.2 Általános látogatók 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

12 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

13 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 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

14 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 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

15 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

16 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

17 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

18 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

19 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

20 15. ábra. Tartalom feltöltése 16. ábra. Szerkesztés 17

21 17. ábra. Szerkesztés 2 18

22 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

23 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

24 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

25 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 ben 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

26 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 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

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

28 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ó 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

29 kattintva a pedagógusok egymásnak, és diákjaiknak tudnak üzeneteket küldeni akár ben 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

30 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

31 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

32 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

33 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

34 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

35 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: Szülő azonosítója: cbgwjsauakb Tanár azonosítója:

36 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

37 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

38 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, 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

39 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 <Directory /> és a <Directoy /var/www> 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

40 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 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 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

41 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

42 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

43 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

44 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 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

45 libraries ckeditor... mail... mediaplayer osztalyoldalak uptmp vendegkonyv videos tutorial 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

46 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

47 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

48 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