WEB-es felületű, adatbázist oktató program készítése (HTML, PHP, JavaScript).

Átírás

1 NYÍREGYHÁZI FŐISKOLA TERMÉSZETTUDOMÁNYI FŐSIKOLAI KAR SZÁMÍTÁSTECHNIKA TANSZÉK WEB-es felületű, adatbázist oktató program készítése (HTML, PHP, JavaScript). Konzulens Dr. Iszáj Ferenc főiskolai tanár Készítette Petőh Sándor informatikus könyvtáros-számítástechnika szakos hallgató Nyíregyháza, 2007.

2 Tartalomjegyzék 1. Bevezetés 2. A HTML dokumentumról 2.1.Néhány szóban a HTML alapvető szabályairól 2.2.A HTML dokumentum elvi felépítése 2.3.A HTML dokumentum szövegtestének felépítése 2.4.A HTML dokumentum címszintjeinke felépítése 2.5.Bekezdések a HTML dokumentumban 2.6.Kereszthivatkozások HTML dokumentumok között 2.7.Karakterformátumok a HTML dokumentumban 2.8.Képek elhelyezése a HTML dokumentumban 2.9.Különböző listafomátumok a HTML dokumentumban 2.10.A HTML formátum táblázatai 2.11.Kérdőívek a HTML dokumentumban 2.12.Java Script használata a HTML dokumentumban 3. PHP 3.1.Egy kis történelem 3.2.Miért pont PHP? 3.3.Szintaktika 3.4.Függvények 3.5.Nyelvi struktúrák 4. Adatbázis-kezelés 4.1.Adatmodellezés 4.2.Adatfüggetlenség 4.3.Az adatbázis-kezelő rendszer részei 4.4.Az adatleíró nyelv (Data Definition Language) 4.5.Az adatkezelő nyelv (Data Manipulation Language) 4.6.Az adatbázis-kezelő rendszer 4.7.Adatmodellek 4.8.Az SQL nyelv Adatdefiníciós utasítások Adatkezelő utasítások Egyéb utasítások 5. Gyakorlati megvalósítás 5.1.Működés közben 6. Internet címek 7. Összegzés Felhasznált irodalom Mellékletek

3 1. Bevezetés Dolgozatom elég széles témát kíván kiemelni az informatikából, ezért csak a lényeges részekre fogok kitérni. A webes alkalmazások témakör napjainkban igen népszerű napjainkban, hiszen a talán egyik leggyorsabban fejlődő szegmense az informatikának. Az emberek napi mint nap kerülnek szembe webes alkalmazásokkal az Internet révén, elektronikus áruházak, busz menetrend, társas-, ismerkedő oldalak, ingyenes címek webes hozzáféréssel a végtelenségig sorolhatnám és mindegyik mögött web alapú alkalmazások álnak. Többféle futtatható környezetről beszélhetnénk, az asp-től a jsp-ig, vagy akár az Ajax-rol, ami mostanában egyre többet felüti a fejét. Én mégis a PHP, MySQL párosítást választottam, mert nagyon jelentős érvek szólnak ezen páros mellett. Nagyon egyszerű benne a fejlesztés, és ami napjainkban nem elhanyagolható, ingyenes. Dolgozatom része, hogy készítsek egy egyszerű webes alkalmazást amely, felölel a dolgozatom címében, igaz csak zárójelben felsorolt webes technológiákat: HTML, PHP, JavaScript. Természetesesen, hogy igazán lefedje a teljes témát az alkalmazás egy adatbázisszerverből fogja venni az adatokat, így adatbázis kezelést is megvalósítok az scripten belől, bár csak egyszerű lekérdezés formájában. A dolgozatom első részében ezen konkrét technológiák ismertetésé lesz a főszerepe, míg végén ezek felhasználásával következik a gyakorlati alkalmazás. Egy nagyon egyszerű weblap alapú tesztprogram kódjának elemzése és bemutatása zárja a dolgozatomat, amely HTML leíró nyelvet felhasználva jelenik meg, PHP scriptnyelven megírt kód segítségével tölti be az adatokat egy MySQL adatbázis kezelő megfelelő adatbázisának adattáblájából tölti be a kérdésélet, és a kérdések kiértékelésére JavaScript kódot használ, tehát ez a lépés már nem a szerver oldalon, hanem a kliens oldalon történik. 3

4 2. A HTML dokumentumokról A HTML formátumú dokumentumok megtekintése egy ún. "World Wide Web böngészőprogrammal" lehetséges. Hogy miért? A HTML dokumentum-formátumot tekinthetjük az ún. hyper-text egyik megvalósítási formájának is. A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML-tag"-eket - formázóutasításokat -, valamint megjelenítendő objektumokra történő hivatkozásokat is. Ezek a HTML formázóutasítások (más szóval: parancsok, elemek) befolyásolják a dokumentum megjelenítését, kapcsolatait. Ezeket az utasításokat a böngészőprogram értelmezi és végrehajtja. Ezen okból a formázóutasítás mindig megelőzi azt a részét a dokumentumnak, amelyre vonatkozik. A dokumentumkészítéshez használható HTML utasítások köre állandóan bővül, a nyelv fejlődik. A szabványosítás csak lassan követi a fejlődést. Ezért nem minden böngészőprogram tudja a HTML tasítások mindegyikét értelmezni. Egy böngésző, ha számára értelmetlen utasítással találkozik, akkor kihagyja, így nem okoznak problémát az újabb keletű - még szabványosítatlan - utasítások a régebbi kiadású WWW-böngészőknek sem. Sajnos a fentiek miatt ugyanazt a dokumentumot két különböző program nem biztos, hogy azonos formában fogja megjeleníteni. Más oka is van ennek. A WWW-n kalandozónál kicsi a valószínűsége annak, hogy rendelkezésére áll ugyanaz a betűtípus, mint a WWW-oldalt fejlesztőnek. Vagy képek esetén semmi garancia nincs arra, hogy minden böngészőprogram ugyanazon felbontásban és színszámmal tudja megjeleníteni a képet. És így tovább... A HTML-ben mégis az a nagyszerű, hogy nagymértékben megközelíti a platformfüggetlenséget. Egy HTML dokumentum - ha nem is azonos módon - mindenki számára megtekinthető. 2.1.Néhány szóban a HTML alapvető szabályairól A HTML dokumentum normál szövegfájl. Bármely szövegszerkesztővel létrehozható, ill. módosítható, amely nem használ különleges fájlformátumot vagy ha létezik TEXT formátumú mentési lehetőség benne. A HTML utasításokat a szövegben < és > jelek közé kell zárni. Egy-egy utasítás - HTML parancs, HTML elem - hatását általában a záró utasításpárja szünteti meg, amely megegyezik a nyitó utasítással, csak a / jel vezeti be (természetesen a < és a > jelek között). Az utasítások nagy része opcionális elemeket is tartalmazhat, melyek csak a nyitóutasításban szerepelhetnek, a záróban nem. Az opciók 4

5 értékadásánál az idézőjel nem mindig kötelező, csak ajánlott. A HTML utasítás kulcsszavaiban nem különböztetjük meg kisbetűket és nagybetűket. 2.2.A HTML dokumentum elvi felépítése Minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záróutasítással végződik. Ezen elemek közé kell zárni a teljes dokumentumot - formázóutasításokkal és hivatkozásokkal együtt. A HTML dokumentumot két részre lehet bontani a fejlécre és dokumentumtörzsre. (Egy harmadik rész lehet a keretek definíciója.) A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja. Ezt a részét a dokumentumnak általában az ablak címsorában jelenítik meg a böngészőprogramok. A dokumentumtörzs - amit voltaképpen a WEB-böngésző meg fog jeleníteni - a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)... <HTML> <HEAD> <TITLE>A dokumentum neve</title> Fejléc elemek... </HEAD> <BODY>A tulajdonképpeni dokumentumtörzs következik <H1>Ez itt egy alcím</h1> <P>Ez itt egy normál bekezdés </BODY> </HTML> Az kód eredménye megtekinthető az 1-es számú mellékletben. 5

6 2.3.A HTML dokumentum szövegtestének felépítése Minden HTML formátumú szövegfájl a <BODY> és a </BODY> utasításokkal közrezárt részében tartalmazza a megjelenítendő részét. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. A <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" ALINK="színkód"> utasításban a dokumentumtörzsre vonatkozó fenti előírások is szerepelhetnek opcióként. A BACKGROUND="elérési_út/fájlnév.kit" opcióval a dokumentum hátteréül szolgáló fájlt jelölhetjük ki. Háttérszínt a BGCOLOR="színkód" opcióval kiegészített utasítással definiálhatunk. A dokumentumban a szöveg színét a TEXT="színkód" opcióval jelölhetjük ki. A LINK="színkód" opció a hivatkozások megjelenési színét határozza meg. A VLINK="színkód" pedig, a már bejárt hivatkozásokat jelölő színt határozza meg. Természetesen egyszerre több opció is szereplhet - tehát nem kötelező egyik sem - a <BODY> utasításban, mint azt az alábbi példa mutatja: <BODY BACKGROUND="pelda3.gif" BGCOLOR="#FF3333" TEXT="#000099" LINK="#993399" VLINK="#009999"> <P> A szemléltetés kedvéért az alábbi szöveg széles szegéllyel határolt! <P> <TABLE BORDER=12> <TH><TD><H1><A HREF="#pelda">Ez itt egy hivatkozás,</a></h1> </TABLE> <P> <IMG SRC="k11.gif" ALT="Görgetősáv"> <P> <A NAME="pelda">Ide mutat a hivatkozás!</a> </BODY> 6

7 2.4.A HTML dokumentum címszintjeinek felépítése A HTML formátumú szövegfájlban definiálhatunk címeket, ill. alcímeket hat szint mélységig. A legfelső szintű címet a <H1 ALIGN="hely"> és a </H1> utasításpárral kell közrezárni. A második szintet a <H2 ALIGN="hely"> és a </H2> utasítások határolják, és így tovább a hatodik szintig... Minden szint más-más betűformátumban jelenik meg a dokumentumban, a böngészőprogram beállításától függően. A címek igazítását szabályozza az ALIGN opció, melynek lehetséges értékei: left, center, right. Amennyiben túl hosszú a cím, de egy sorosnak kell maradnia, akkor a NOWRAP opció megakadályozza a cím betördelését több sorba. Különleges címnek tekinthető a címszalag, melyet a <BANNER>, </BANNER> utasításpárral kell kijelölni. Tulajdonsága, hogy nem szkrollozódik a dokumentum többi részével ellentétben. A címek csak a szemlélő számára keltik a tagoltság érzetét, a valóságban nem tagolják fizikailag szakaszokra a dokumentumot. Ezt a tagolást a <DIV CLASS="osztály" ALIGN="hely">, </DIV> utasításokkal lehet meghatározni, ahol a CLASS opció sorolja a megfelelő SGML osztályba a szakaszt, az ALIGN pedig a szakasz igazítási formátumát írja elő. Az automatikus tördelést itt is megakadályozza a NOWRAP opció, ez esetben a szakasz tördelését a <P> vagy a <BR> utasításokkal lehet szabályozni. módon <BANNER>Címszalag</BANNER> <H1 ALIGN="left">Legfelső szintű címsor</h1> <H2 ALIGN="center">Második szintű alcímsor</h2> <H3 ALIGN="right">Harmaik szintű alcímsor</h3> <H4 NOWRAP>Negyedik szintű alcímsor</h4> <H5>Ötödik szintű alcímsor</h5> <H6>Hatodik szintű alcímsor</h6> <DIV ALIGN="center"> Ez egy szakasz, melyben a szöveg elvileg azonos - középre igazítva - kezelendő. </DIV> A kód böngészőben produkált eredménye a 2-es számú mellékletben található. 7

8 2.5.Bekezdések a HTML dokumentumban Minden dokumentum, így a HTML formátumú dokumentum is, alapvetően bekezdésekre tagolódik. A HTML fájlban a bekezdések kezdetét a <P> utasítás jelzi a böngészőprogram számára. (Tehát ezen elem nem az előző bekezdés végét, hanem a következő kezdetét jelzi, vagyis mindig megelőzi azt a bekezdést, amelyre vonatkozik!) A bekezdés a következő bekezdés kezdetét jelző utasításig tart, tehát nincs záróutasításpárja a bekezdés elemnek. A legtöbb böngészőprogram két bekezdés között egy üres sort szúr be megjelenítéskor! A bekezdés elem hordozhat magában a bekezdés stílusát meghatározó opciókat. A bekezdés igazítását a <P ALIGN="hely"> formájú utasítással szabályozhatjuk. Az automatikus tördelést a NOWRAP opció tiltja meg a böngészőprogram számára. Amennyiben tördelhetetlen szóközt igényel a szöveg, akkor az egyszerű szóköz helyett alkalmazzuk a különleges karaktert. Amennyiben egy bekezdésen belül mindenképpen új sort szeretnénk kezdeni, akkor a <BR> utasítást kell használni. A Netscape Navigatorban az automatikus tördelés letiltható a <NOBR> és a </NOBR> utasításpár használatával a szöveg a két elem közé eső részére vonatkozóan. E két utasítás között a <WBR> utasítással lehet sortörést kikényszeríteni. Az alábbi példa tartalmazza az említett formázási lehetőségeket: <P>Ez alapértelmezett (balra igazított) bekezdés. <P ALIGN=left>Ez balra igazított bekezdés. <P ALIGN=center>Ez középre igazított bekezdés. <P ALIGN=right>Ez jobbra igazított bekezdés. <P ALIGN=justify>Ez sorkizárt bekezdés lenne. <P> <NOBR>Ez itt egy tördeletlen - jó hosszú - bekezdés, amelynek eltűnik a vége a semmiben...</nobr> <P> Itt egy sortörés elem található, <BR> A kód eredménye a 3-as számú mellékletben található. 8

9 2.6.Kereszthivatkozások HTML dokumentumok között A HTML formátum lényegét az egymásra és egymás tartalmára való hivatkozások jelentik (vagyis a hypertext lehetőség). A dokumentum bármely részéhez hivatkozást (linket) helyezhetünk el, amelyet aktivizálva, a hivatkozottal összefüggésban lévő szöveghez jutunk el. A hivatkozó utasítások megjelenési formája sokféle lehet, a célobjektumtól függően: A legegyszerűbb esetben a hivatkozás az adott fájl egy távolabbi részére mozdítja a böngészőablakot. A hivatkozás kezdetét a <A HREF="#jelző"> utasításnak a dokumentumban való elhelyezése jelzi. A hivatkozást a </A> utasítás zárja le. Ez az elempár közrezárhat szövegrészt, képet, stb. A közrezárt részt a böngészőprogram a dokumentum többi részétől eltérően jeleníti meg (pl. aláhúzással, kerettel,...), az egérkurzorral fölé érve a mutató alakja megváltozik. Azt a részt (praktikusan: könyvjelzőt), ahová a hivatkozás mutat a <A NAME="jelző"> és a </A> utasítások kell, hogy határolják. A legtöbb esetben a egy hivatkozás egy másik fájlra/dokumentumra mutat. A hivatkozás kezdetét ekkor a <A HREF="protokoll://elérési_út/fájlnév.kit"> utasítás jelzi, a hivatkozást ekkor is a </A> utasításelem zárja le. Mind a protokoll, mind az elérési út elhagyható, amennyiben azonos URL-en van a kiindulási dokumentum és a hivatkozott. A hivatkozott fájlnak e példában nincs külön névvel (könyvjelzővel) jelölt része. Működés szempontjából a fentebb leírtak vonatkoznak erre a hivatkozási formára is. A legbonyolultabb esetben a hivatkozás egy másik fájl valamely pontosan meghatározott részére mutat. A hivatkozás kezdetét a <A HREF="protokoll://elérési_út/fájlnév.kit#jelző"> utasítás jelzi, és a hivatkozást szintén a </A> elem zárja le. Ebben az esetben a hivatkozott fájl kell, hogy tartalmazzon egy olyan részt (könyvjelzőt), ahová a hivatkozás mutat. Ezt a részt a <A NAME="jelző"> és a </A> utasítások határolják. Megjegyzés: Ha az <A HREF=...>, </A> utasításpár képet fog közre, akkor a kép szegéllyel jelenik meg, amely szegély letiltható az <IMG SRC=...> utasításban elhelyezett BORDER=0 opció alkalmazásával. A képekkel kapcsolatos egyéb hivatkozási lehetőségeket lásd a képeknél. Az alábbi példadokumentum többféle hivatkozást tartalmaz, eredményét a 4-es számú melléklet mutatja: a hivatkozás. Ennek a fájlnak a <A HREF="#vege">végére</A> visz ez 9

10 <P> A makói Almási Utcai Általános Iskola honlapjára vonatkozik e <A HREF=" <P> A fenti iskola újságjának egy adott <A HREF=" repít e hivatkozás. Ezen leírással kapcsolatos véleményed <A HREF="mailto:paja@iif.u-szeged.hu">írd</A> meg! <P> <IMG SRC="k08.gif" ALT="Almási embléma balra"> <P ALIGN=center> <IMG SRC="k08.gif" ALT="Almási embléma középre"> <P ALIGN=right> <IMG SRC="k08.gif" ALT="Almási embléma jobbra"> <P> <A NAME="vege">Itt az oldal vége!</a> <P> 2.7.Karakterformátumok a HTML dokumentumban A HTML formátumú szövegfájlban is használhatjuk a szövegszerkesztőkben megszokott karakterformátumokat. Az alábbi táblázat a formázás kezdő és záróutasítása között a mintát is tartalmazza. A <FONT FACE="név" COLOR="színkód" SIZE="szám">, </FONT> utasításpárral direkt módon előírhatók a megjelenő szöveg betűinek a jellemzői. A FACE opciót nem szokás használni, mert nem valószínű, hogy minden rendszerben rendelkezésre áll pl. az ARIAL CE FÉLKÖVÉR betűtípus. A COLOR opció pontosan meghatározza a megjelenítendő szöveg színét. A SIZE opcióban egy számot megadva a betűméretet határozza meg direkt módon. (A SIZE opcióban előjeles szám is szerepelhet, ami az alapbetűtípushoz viszonyított méretet jelöl.) Az alábbi példadokumentumban elvileg meg kellene jelennie a fenti karakterformátumoknak (azért 10

11 elvileg, mert a megjelenő betűk formája a böngészőprogram beállításaitól függően nagymértékben különbözhet): <B>Vastag</B> <I>Dőlt</I> <U>Aláhúzott</U> <S>Áthúzott</S> <TT>Fixpontos</TT> <EM>Kiemelt</EM> <CITE>Idézet</CITE> <VAR>Változónév</VAR> <STRONG>Kiemelt</STRONG> <CODE>Kód</CODE> <SAMPLE>Minta</SAMPLE> <KBD>Billentyűfelirat</KBD> <BQ>Idézet</BQ> <BIG>Nagyméretű</BIG> <SMALL>Kisméretű</SMALL> <SUB>Alsóindex</SUB> <SUP>Felsőindex</SUP> <BLINK>Villogó</BLINK> <FONT COLOR="#FF3333" SIZE=1>Kicsi piros</font> <FONT SIZE=2>N</FONT> <FONT SIZE=3>ö</FONT> <FONT SIZE=4>v</FONT> <FONT SIZE=5>e</FONT> <FONT SIZE=6>k</FONT> <FONT SIZE=7>v</FONT> <FONT SIZE=8>ő</FONT> <FONT FACE="Arial CE" SIZE=9>ARIAL CE</FONT> <FONT FACE="Symbol" SIZE=10>SYMBOL</FONT> A kód eredményét a 5-ös számú melléklet mutatja. 11

12 2.8.Képek elhelyezése a HTML dokumentumban A HTML formátumú dokumentumban képeket - grafikákat - is is elhelyezhetünk. Az <IMG SRC="elérési_út/fájlnév.kit"> utasítás a szöveg aktuális poziciójába helyezi a megadott képet. Ennél azért a legegyszerűbb szövegszerkesztő program is többet nyújt. A HTML dokumentum csinosítására is vannak a képek elhelyezésének finomabb lehetőségei is. Ha ezeket mind kihasználjuk, akkor az utasítás a következőképpen fog kinézni: <IMG ALIGN="hely" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mmeret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">. Az ALIGN opció meghatározza a kép igazításának módját, lehetséges értékei: top, middle, bottom, left, right. A HSPACE a kép melletti vízszintes térközt, a VSPACE pedig a függőleges térközt (ha úgy tetszik: margókat) határozza meg. A WIDTH a szélességét, a HEIGHT pedig a magasságát adja a képnek, az UNITS által meghatározott egységben (pixel vagy en). Az ALT azt a szöveget adja meg, amelyet nem grafikus böngészők használata esetén meg fog jelenni a kép helyett. 2.9.Különböző listafomátumok a HTML dokumentumban A HTML formátumú szövegfájlban használhatunk listákat is, amelyek szövegszerkesztőkbeli megfelelői a felsorolások és bajuszos bekezdések. A számozott bekezdések (felsorolások) megfelelője a számozott lista, az ún. "bajuszos" bekezdések megfelelője pedig a számozatlan lista. A harmadik lista típus pedig a leíró lista, ahol az egyes lista elemekhez tartozhat egy hosszabb leírás is. A számozott listát az <OL> és az </OL> utasítások közé kell zárni. A számozatlan listát pedig az <UL>, </UL> utasításpár közé. Mindkét típusú listában használhatjuk a listafejlécet, melyet az <LH> utasítás vezet be - az </LH> pedig zár! Mindkét listatípusban a listák sorai az <LI> utasítással kezdődnek - és nem használatos a lezáró párjuk! A fentiekből közvetkezik, hogy a listasorok egy <LI> utasítástól a következő <LI> utasításig, ill. a lista záróeleméig tartanak. Számozott lista esetében a kezdő sorszám közvetlenül megadható az <OL SEQNUM="szám"> formájú kezdőutasítással. Másik lehetőség, hogy egy előzőelg definált lista számozása folytatható az <OL CONTINUE> kezdőutasítás használatával. Egyébként az <OL> utasítás 1-től kezdi a lista tagok számozását. A számozatlan listák kezdőeleme is hordozhat formázóinformációkat. Az <UL SRC="fájlnév.kit"> formájú utasítás például a listasort megelőző bajuszként a megadott 12

13 képfájlt használja. Az <UL DINGBAT="karakter"> a megadott bajuszkaraktert alkalmazza. Az <UL WRAP="irány"> pedig többoszlopos listák esetén az igazítás formáját határozza meg. (A WRAP opció a horiz és a vert értékeket veheti fel. A számozatlan listák speciális - külön HTML utasításokkal létrehozható - fajtái a könyvtárlista és a menülista. A könyvtárlista típus a <DIR> utasítással kezdődik és a </DIR> utasításra végződik. A menülista pedig <MENU> és a </MENU> utasításokkal határolt. Ezek a listaformák a normál számozatlan listáktól mindössze annyiban különböznek, hogy a könyvtárlista tagjai 20 karakteresnél, a menülista tagjai pedig egy sorosnál nem lehetnek hosszabbak és nincs "bajuszuk". A leíró listát a <DL> és a </DL> utasítások közé kell zárni. A lista fejléc megadása azonos az többi listatípusnál látottal. A listák egyes alkotóelemeinek kezdetét a <DT> utasítás jelzi, az ehhez tartozó leírás kezdetét pedig a <DD> utasítás határozza meg. Nincs egyik utasításnak sem záró párja, ezért a lista tag a <DT> elemtől a <DD>-ig, a hozzá tartozó leírás pedig a <DD> elemtől a következő <DT>-ig tart. Az alábbi példában látható, hogy a különböző listákat egymásba is ágyazhatjuk, akár több szint mélységben is. A böngészőprogramtól függ, hogy hány szintet tud egymástól megkülönböztetve megjeleníteni. Az alábbi kód eredménye a 6-os számú mellékletben található: <P> Normál szöveg <P> <OL> <LH>A számozott lista fejléce</lh> <LI>Első sor <OL> <LH>A beágyazott lista fejléce</lh> <LI>Első elem <LI>Második elem <LI>Harmadik elem </OL> <LI>Második sor <LI>Harmadik sor <LI>Negyedik sor </OL> 13

14 <P> Normál szöveg <P> <UL> <LH>A számozatlan lista fejléce</lh> <LI>Első sor <LI>Második sor <UL WRAP=horiz> <LH>A beágyazott lista fejléce</lh> <LI>Első sor <LI>Második sor </OL> <LI>Harmadik sor </OL> <P> Könyvtárlista: <BR> <DIR> <LI>Első tag <LI>Második tag <LI>Harmadik tag <LI>Negyedik tag </DIR> <P> Menülista: <BR> <MENU> <LI>Első menü <LI>Második menü </MENU> <P> Normál szöveg <P> <HR> 14

15 <P> <DL> <LH>A leíró lista fejléce</lh> <DT>Első sor <DD>Az első sorhoz tartozó leírás, lehet hosszabb szöveg is. A leírás tördelése automatikus. Szépen igazodnak a betördelt sorok az első sor kezdőpontjához. <DT>Második sor <DD>A második sorhoz tartozó leírás </DL> <P> Normál szöveg <P> 2.10.A HTML formátum táblázatai A HTML formátumnak ez az utasításcsoportja képes a legváltozatosabb szöveg-, és képmegjelenítési formák előállítására. A <TABLE> és a </TABLE> utasítások közé zárt részt tekintjük egy táblázatnak. A táblázatnak a címét a <CAPTION> és a </CAPTION> utasítások között kell megadni. (Figyelem! Az így megadott cím nem a táblázatban, hanem előtte fog megjelenni!) A cím <CAPTION ALIGN="hely"> formájú megadással igazítható. A táblázat minden sora a <TR> utasítással kezdődik és a következő <TR>-ig, ill. a táblázat végéig tart. Egy sor tartalmazhat oszlopfejléceket és adatokat. Az oszlopfejléceket a <TH> utasítás vezeti be és választja el egymástól. A táblázat adatcellái pedig a <TR>-rel megkezdett sorban egy <TD> utasítással kezdődnek és minden cella a következő <TD>-ig - ill. a következő sor elejét jelző elemig - tart, ahol értelemszerűen új cella kezdődik. Az oszlopfejléceknek és az adatcelláknak csak a kezdőutasítása használatos - habár van lezáró utasításuk is (</TH>, </TD>) -, mert a záróutasításuk elhagyható! A táblázat nyitóutasítása tartalmazhat a teljes táblázatra vonatkozó beállításokat: <TABLE BORDER="szám" ALIGN="hely" COLSPEC="oszlopjellemzők" UNITS="egység" NOWRAP CELLPADDING="pszám" CELLSPACING="kszám" BGCOLOR="színkód"> 15

16 Ahol a BORDER opció a rácsozat szélességét határozza meg. (0 esetén nincs rácsozat.) Az ALIGN a teljes tábla elhelyezkedését határozza meg ( left, right, center lehet). A COLSPEC egy oszlop igazítását és szélességét adja meg. Egy oszlopra vonatkozóan egy betű és szám egybeírva (pl.: L12 C24 R10), melytől a következő oszlop értékeit egy köz választja el. Az UNITS a számokhoz tartozó mértékegységet jelöli ki (en, relative - oszlopszélességhez -, pixel). A NOWRAP opció a cellák szövegének tördelését tiltja le. Végül a BGCOLOR a táblázat háttérszínét határozza meg. A táblázat oszlopfejlécei nem csak a legfelső oszlopban szerepelhetnek, hanem a táblázatban bárhol (pl. sorok címeként is). Mind az oszlopfejlécekben, mind az adatcellákban használhatók a következő formázásra való opciók: COLSPAN="szám": Egyesít több egymással szomszédos cellát - víszintesen. ROWSPAN="szám": Egyesít több egymással alatti cellát - függőlegesen. ALIGN="hely": Igazítja a cellák tartalmát - víszintesen. Lehetséges értékei: left, center, right, justify, decimal VALIGN="hely": Igazítja a cellák tartalmát - függőlegesen. Lehetséges értékei: top, middle, bottom, baseline Az alábbi példatáblázat tartalmaz példákat igazításra, cellaegyesítésre, üres cellára, kép elhelyezésére, stb.: <TABLE BORDER=5 ALIGN="center"> <CAPTION>A táblázat címe </CAPTION> <TR> <TH COLSPAN=2>Az oszlop közös fejléce <TH COLSPAN=3>A oszlop közös fejléce <TH ROWSPAN=2>A 6. (2 soros) oszlop fejléce <TR> <TH>Az 1. oszlop másodrendű fejléce <TH COLSPAN=2>A oszlop másodrendű fejléce <TH COLSPAN=2>A oszlop másodrendű fejléce 16

17 <TR> <TH>Az első adatsor címe <TD>Az első adatcella <TD>Adat (indexe: C3) <TD>Adat (indexe: D3) <TD>Adat (indexe: E3) <TD>Adat (indexe: F3) <TR> <TH>A 2. adatsor címe <TD>Adat (indexe: B4) <TD>Adat (indexe: C4) <TD>Adat (indexe: D4) <TD>Adat (indexe: E4) <TD>Adat (indexe: F4) <TR> <TH>Függőleges igazítások <TD ALIGN="center" VALIGN="bottom">Le <TD ALIGN="center" VALIGN="top">Fel <TD ALIGN="center" VALIGN="middle">Középre <TD> <TD>Adat (indexe: F5) <BR>Ettől a cellától balra egy üres cella, alatta pedig két üres cella összevonva <TR> <TH>Vízszintes igazítások: <TD>Alapértelmezés <TD ALIGN="left">Balra <TD ALIGN="center">Középre <TD ALIGN="right">Jobbra <TD ROWSPAN=2> <TR> <TD ALIGN="center" COLSPAN=5> <IMG SRC="k12.gif" ALT="Kép a cellában"> </TABLE> 17

18 A kód eredménye a 7-es számú mellékletben található Kérdőívek a HTML dokumentumban A HTML formátumú dokumentumban kérdőíveket is közzétehetünk, melyek feldolgozásához külön programot kell írni. (Nem HTML-alapút! Általában a kiszolgáló /cgi-bin/ könyvtárában található programról van szó.) A <FORM METHOD="mód" ACTION="elérési_út/fájlnév.kit"> és a </FORM> utasítások zárják közre a kitöltendő kérdőívet/űrlapot. Az opciókat ajánlott mindig megadni, már csak azért is, mert az ACTION határozza meg a feldolgozást végző programot, a METHOD pedig a kitöltött űrlap továbbítási módját a feldolgozó programnak. Lehetséges értékei: GET - az URL-ben, POST - adatcsomagban. Az alapértelmezés a GET, ami bizonyos veszélyeket rejt magában, mivel túl hosszúra nyúlhat az URL. A POST a biztonságosabb mód. Az <INPUT NAME="név" TYPE="típus" ALIGN="hely"> utasítással határozható meg egy kitöltendő űrlapmező. A NAME természetesen a mezőnév, amely alapján a feldolgozóprogram azonosítja a bevitt adatot. A TYPE pedig az adattípus, melyet vár a beviteli mező. Lehetséges típusok: TEXT - szöveg, PASSWORD - jelszó (nem jelenik meg bevitelkor!), HIDDEN - rejtett (ez sem jelenik meg), CHECKBOX - kapcsoló (több is kiválasztható egyszerre), RADIO - kapcsoló (egyszerre csak egyet lehet kiválasztani), RANGE - numerikus adat, FILE - csatolandó fájl, SUBMIT - adattovábbító gomb, RESET - inicializáló gomb, BUTTON - egyéb nyomógomb. Az <INPUT > utasításban további opciók is szerepelhetnek, a fő opciók értékeitől függően: A VALUE kiegészítő opcióval megadott értéket veszi fel alapértelmezésként a szöveges vagy numerikus beviteli mező. TEXT típusú mező esetén egy további opció, a SIZE="méret" opció határozza meg a beviteli ablak szélességét, a MAXLENGTH="érték" pedig a bevihető maximális szöveghosszt. A CHECKBOX és a RADIO típusú mezők további paramétere lehet a CHECKED opció, mely bekapcsolja a kapcsolót - alapértelmezésként. 18

19 RANGE típusú mező esetén megadható az a tartomány, melybe a bevitt értéknek bele kell esnie, a MAX="maximum" és a MIN="minimum" további opciókkal. A FILE típusú mezőben megadott fájl az ACCEPT kiegészítő opcióval megadott MIME módon csatolódik az elküldendő kérdőívhez. (Megjegyzés: Egy Browse nyomógombbal támogatott fájlkereső-ablakból lehet a fájlt kiválasztani.) A SUBMIT és a RESET gombokhoz tartozó kiegészítő opció a VALUE="felirat", amely a gombok feliratát jelöli ki. Egyébként a SUBMIT gomb lenyomásának hatására küldi el az űrlapadatokat a kérdőív a feldolgozó programnak, a RESET gomb lenyomása pedig az alapértékekkel tölti fel a beviteli mezőket. Hosszab szöveg bevitelére alkalmas a <TEXTAREA NAME="név" ROWS="magaság" COLS="szélesség" VALUE="szöveg">, </TEXTAREA> utasításpár, amely egy beviteli ablakot nyit a COLS-ban megadott szélességben és a ROWS-ban megadott sorban. A VALUE az alapértelmezésként megjelenítendő szöveget adja meg. Egy kérdésre adandó válasz egyszerű - menüből történő - kiválasztását teszi lehetővé a kérdőíven a <SELECT NAME="név" SIZE="sor">, </SELECT> utasításokkal létrehozott kiválasztásos menü, melynek menüpontjait az <OPTION> utasítással adhatjuk meg. A SIZE opció azt határozza meg, hogy hány sorban jelenjenek meg a választható menüpontok. Megadásával szkrollozható menüt kapunk. Elhagyása esetén, ún. legördülő menüből lehet választani. A MULTIPLE opció esetén több menüpont is kijelölhető egyszerre. Az <OPTION SELECTED> formájú utasítás adja meg az alapértelmezett választást! Az alábbi példa egy sokelemű kérdőívet mutat be, mely a 8-as számú mellékletben található: <CENTER> <H1>Adatfelvételi lap:</h1> <FORM METHOD="post" ACTION="program.bin"> <INPUT TYPE="reset" VALUE="Alapértelmezés"> <P> Vezetékneve: 19

20 <INPUT NAME="vezeteknev" TYPE="text" VALUE="Kovács" SIZE="25" MAXLENGTH="30"> Keresztneve: <INPUT NAME="keresztnev" TYPE="text" MAXLENGTH="50"> Férfi: <INPUT NAME="neme" TYPE="radio" CHECKED> Nő: <INPUT NAME="neme" TYPE="radio"> Kora: <INPUT NAME="kor" TYPE="range" SIZE="2" MIN="10" MAX="60"> <P> Érdeklődési köre: Windows: <INPUT NAME="erdek" TYPE="checkbox" CHECKED> Win95: <INPUT NAME="erdek" TYPE="checkbox"> LINUX: <INPUT NAME="erdek" TYPE="checkbox"> OS/2: <INPUT NAME="erdek" TYPE="checkbox"> <P> <TEXTAREA NAME="egyeb" COLS="40" ROWS="4">Közlendők:</TEXTAREA> <P> Foglakozása: <SELECT NAME="foglakozas"> <OPTION>diák <OPTION>tanár <OPTION SELECTED>nyugdíjas <OPTION>egyik sem </SELECT> <P> Csatolandó fájl(ok): <BR> <INPUT NAME="fajl" TYPE="file"> <P> <INPUT TYPE="submit" VALUE="Elküldés"> </CENTER> </FORM> 20

21 2.12.A JavaScript használata a HTML dokumentumban Egy HTML formátumú szövegfájl a tartalmazhat JavaScript "programnyelven" megírt kódsorokat is <SCRIPT LANGUAGE="JavaScript"> és a </SCRIPT> utasításokkal közrezárva. A JavaScript, mint programnyelv bemutására nem kerül most sor. Ezért csak röviden: A JavaScript változókat és függvényeket a dokumentum fejlécében szokás definiálni. (Vagyis a <HEAD> és a </HEAD> utasításokkal közrezárt részében a dokumentumnak. Az így definiált függvényeket lehet meghívni, a változókra lehet hivatkozni a szöveg HTML elemeiben. Figyelem! Nem tévesztendő össze a JavaScript a JAVA programozási nyelvvel. A JAVA nyelven önálló programokat lehet írni, melyeket az <APPLET CODE="osztály"> utasítással lehet meghívni. Az alábbi JavaScript programocska egy új böngészőablakot hoz létre WINDOWS alatt: <HTML> <HEAD> <TITLE>HTML leírás lap</title> <SCRIPT LANGUAGE="JavaScript"> <!-- // function Ablak() { msg=open("","displaywindow","toolbar=no,directories=no,menubar=no," + "resizable=no,width=300,height=200") msg.document.write("<body BGCOLOR=#009999>"); msg.document.write("<center><h2>új böngészőablak</h2>"); msg.document.write("<form>"); msg.document.write("<input TYPE='button' VALUE=' BEZÁR ÉS VISSZA '+ onclick='window.close()'>"); msg.document.write("</form></center>"); 21

22 msg.document.write("</body>"); } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <H1>JavaScript példa</h1> <FORM> <INPUT TYPE="button" VALUE=' ÚJ ABLAK MEGNYITÁSA ' onclick="ablak()"> </FORM> </CENTER> </BODY> </HTML> 22

23 3. PHP Napjainkban és az elmúlt néhány évben újabb és újabb programozási nyelvek születésének lehetünk (lehettünk) tanúi. Ezeknek az új nyelveknek nagy része a tradicionális, széles körben alkalmazható társaik (C, C++, Pascal) szintaxisát, logikáját veszi alapul, és úgy egészíti ki azokat, hogy valamilyen a nyelv által kitűzött célnak jobban megfeleljen, tehát specializálódjon. E nyelvek közül ebben a sorozatban a dinamikus weboldalak készítésére használható, egyre szélesebb körben elterjedő PHP-vel foglalkozunk. Napjainkban és az elmúlt néhány évben újabb és újabb programozási nyelvek születésének lehetünk (lehettünk) tanúi. Ezeknek az új nyelveknek nagy része a tradicionális, széles körben alkalmazható társaik (C, C++, Pascal) szintaxisát, logikáját veszi alapul, és úgy egészíti ki azokat, hogy valamilyen a nyelv által kitűzött célnak jobban megfeleljen, tehát jobban specializálódjon. Azt már elárultam, hogy mire specializálódott a PHP lássuk, hogy honnan indult, hogyan tett szert ekkora népszerűségre a fejlesztők körében és egyáltalán mekkora is ez a népszerűség. 3.1.Egy kis történelem A PHP születése 1994-re tehető, amikor Rasmus Lerdorf elkészítette első, a nyilvánosság számára nem elérhető verzióját, melyet csupán azért írt, hogy megkönnyítse olyan, egyszerű script-ek írását, mint például egy vendégkönyv vagy számláló. A program 1995 elején Personal Home Page Tools néven kezdett egyre ismertebbé válni. Még ebben az évben újraírta a szerző a program script-feldolgozó (parser) részét és kiadta a 2-es verziót PHP/FI néven. Az FI rész a névben az újonnan beépített form-feldolgozó részből adódott. De nem csak ez az egy extra került bele az új kiadásba: a nyelv immár támogatta az msql adatbázisok használatát, amely nagyban hozzájárult ahhoz, hogy újabb emberek kapcsolódjanak a fejlesztésbe, bővítve ezzel a nyelv palettáját re már több mint szerveren futott a PHP. Ekkor új irány vett a fejlesztés azzal, hogy társultak Rasmus-hoz más fejlesztők is, akik teljes egészében újraírták az interpretert, mely az 1998-ban megjelenő 3.0-s verzió alapja lett. 23

24 A nyelv sikerességét azt hiszem legjobban a statisztikai adatok bizonyítják: A NetCraft ( felmérése szerint 1998-ban domain név alatt futott PHP, ami már önmagában nem kis szám és mondhatni azóta se csökkent, mivel az novemberi felmérés szerint ez , tehát jóval meghaladja az egymilliót. A történetnek azonban még nincs vége, folytatódik a jelenben a PHP 4-es verziójával, melynek a script-értelmezője szintén teljesen újra lett írva, ami minimum 2-3- szoros, de előfordulhat, hogy 200-szoros sebességkülönbséget jelent a PHP3-hoz képest. Kapható lesz hozzá (sajnos nem ingyen) fordítóprogram is, mely a Java-éhoz hasonló hordozható, félig lefordított állapotba hozza a programunkat, ezáltal az még gyorsabban fog futni (3-4-szeres a különbség a PHP4-hez képest!!) és meg is védi a szerzőt attól, hogy mások az engedélye nélkül felhasználják a kódját. 3.2.Miért pont a PHP? Aki foglalkozott már dinamikus oldalak készítésével annak bizonyára ismerősek a következő nevek: Perl, Active Server Pages (ASP), Cold Fusion Markup Language (CFML). Ez a három script nyelv és a PHP a leggyakrabban használt a web-es világban. Nem szeretnék végletekbe menő összehasonlítást tenni közöttük, mivel ez elég nagy terjedelmű lenne, és nem feltétlenül lenne objektív az összehasonlítás. 3.3.Szintaktika Azért néhány szó a nyelvek fő különbségeiről: szintaktika szempontjából a Perl talán a legbonyolultabb, ha egy C-hez szokott programozó meglát egy összetettebb programot Perl-ben, akkor azt hiszem, egyből az jut az eszébe, hogy te jó Isten, hogy lehet ilyen rondán programozni. A Perl nagyon sokféle lehetőséget nyújt egy probléma megoldására. Ezt megalkotásakor előnynek szánták, azóta kiderült, hogy inkább hátrányára vált, mivel nagyon nehéz dokumentálni a programot és egy nem tökéletesen dokumentált Perl programról még a készítője se tudja két hónap múlva, hogy mit, hogyan, miért tesz. Az ASP, a Microsoft találmánya, az IIS szerverekkel együtt használható (bár már létezik Unix alá is ASP, de persze ezt nem az MS fejleszti). Maga a nyelv nagyon hasonlít a Visual Basic-re (talán nem véletlen), ennek megfelelően a Perl-hez képest könnyen átlátható. A Cold Fusion-t az Allaire készíti (ha ismerős a név, akkor az a HomeSite miatt lehet, mert ez is az ő termékük). Szintaktikája a HTML-éhez hasonló, aki ehhez a stílushoz szokott hozzá 24

25 az könnyen kiismeri magát egy ilyen programban. Mint már utaltam rá a PHP több nyelv formalitását ötvözi, ezek: C, Perl, Javascript. Leginkább a C-hez szokott fejlesztőknek lesz ismerős a szintaktika, elsajátítása azonban annyira egyszerű, hogy aki nem mozog otthonosan a programozásban az is könnyedén meg tudja tanulni. Ez egyébként a Perl kivételével, mindhárom nyelvről elmondható. 3.4.Függvények Persze a szintaktika nem minden egy programozási nyelvben, használhatóságához nagymértékben hozzájárul az is, hogy milyen segítséget nyújt (ebben az esetben) a web oldalak dinamikus felépítéséhez, magyarul milyen függvény-tárházat használhatunk a nyelvben. A PHP-t használó programozó ez miatt igazán nem panaszkodhat, íme egy lista a legfontosabb függvénycsoportokról: Adatbázis-kezelők elérése (MS-SQL, MySQL, Oracle, SyBase, PostgreSQL, dbase, filepro, Informix, InterBase, msql, dbm, ODBC), tömbkezelés, matematikai függvények, file-kezelés, programfuttatás, képlétrehozás/manipulálás, IMAP, LDAP, kódolás, hálózat, NIS, PDF, string, url, tömörítés, XML. Ezek persze csak a nyelvhez tartózó függvények voltak, azonban lehetőségünk van saját függvények létrehozására (a Cold Fusion-el ellentétben), ezáltal akár saját könyvtárakat is készíthetünk hasznosnak vélt függvényeinkből. Ezt már sokan meg is tették, így rengeteg hasznos könyvtárat tölthetünk le Internetről. A legismertebb ezek közül a PHPLib. 3.5.Nyelvi struktúrák Fontosak még a nyelv által strukturális szempontból nyújtott lehetőségek/korlátok. A PHP-ben megtalálhatóak a C-ben megszokott vezérlési struktúrák (if-else-if, while, do-while, for, break, continue, switch, include) és használhatóak a jól ismert operátorok is (string, matematikai, bitenkénti, logikai, összehasonlító és értékadás). A PHP ún.: "gyengén típusos" nyelv, ami azt jelenti, hogy nem kötöttek a változó-típusok és a változók egyeztetése (pl. értékadásnál) automatikus konverzióval történik. 25

26 Mivel a PHP-ben írt programok tulajdonképpen CGI-k ezért különösön érdekes a web szerver által átadott változók elérése. Háromféle külső változó típust különböztet meg a PHP, ezek: GET metódus által kapott adatok ugyanez POST metódus esetén HTTP Cookie változók. A kívülről kapott paraméterek kezelése nagyon egyszerűvé válik azáltal, hogy a PHP minden egyes paramétert automatikusan átalakítja a programban használható változókká. Például ha egy HTML form-ban a kitöltendő mező neve: cím, akkor a script meghívásakor ebből egy $cím nevű globális változó lesz (a $-el a változókat jelöli a nyelv a Perl-hez hasonlóan), amit ugyanúgy használhatunk, mint bármely más programváltozót. Néha persze kavarodást okozhat, hogy több helyről is kaphatunk változókat akár ugyanazzal a névvel is (GET/POST/Cookie), ezért felállíthatunk egy tetszőleges prioritást, vagy akár le is tilthatjuk az egyik forrás automatikus átalakítását. Négy féle változótípust használhatunk a programjainkban: egész szám, valós szám, string, tömb, objektum. Az utóbbiból kiderül, hogy a PHP támogatja objektumok/osztályok létrehozását. Azért nem kell mindjárt Java-szintű objektumorientáltságra gondolni, a PHP-ben az objektumokat elsősorban könyvtárak írásakor használják, mivel így az objektumokba zárt változók nem érintik a globális társaikat. A PHP az objektumokra vonatkozó zártságon kívül a konstruktorok használatát és az egy szülőtől való öröklést teszi lehetővé. Jól hasznosíthatóak az objektumok például adatbázis-szerverek absztrakt kezelésére, elősegítve ezzel a programjaink hordozhatóságát (a már említett PHPLib is objektumokat használ erre a célra). A tömbkezelés is a PHP egy nagyon fontos része, mivel az adatbázisból nyert adatainkat általában egy vektorban kapjuk vissza, ezt annak köszönhetően tehetjük meg, hogy a vektorokban nem csak azonos típusú elemeket tárolhatunk. Ezen kívül lehetőségünk van HTML űrlapokban elhelyezett adatokat is vektorként megkapni. Ez hasznos lehet például akkor, ha kiválasztó lista, vagy checkbox-ok adatait szeretnénk visszanyerni, mert vektorok használatával egyszerűbben végig tudunk haladni a kiválasztott elemeken. Az asszociatív tömbök használatával szintén könnyebbé tehetjük életünket (és persze olvashatóbbá a kódunkat), mivel sokkal egyszerűbb az adatbázis egy 26

27 rekordját tároló tömbből, úgy kiválasztani a megfelelő elemet, hogy nem kell emlékeznünk, hogy "hányadik a sorban", hanem egyszerűen a mezőnévvel hivatkozhatunk rá, pl.: személy["név"]. A fentieket megfejelve még számos (34) függvénnyel szolgál a PHP a tömbök igazán hasznossá tételéért, pl.: rendezés (véletlenszerűvé is), elem beszúrás, verem függvények (push, pop), elemcsere, elemeken való lépkedés... A PHP kódot bárhova beágyazhatjuk a standard HTML közé ezért jelölni kell a kezdetét és a végét, amit a következő módokon tehetünk meg: <? kód?> <?php kód?> <% kód %> (ASP stílus) <script language="php"> kód </script> 27

28 4. Adatbázis-kezelés Környezetünk leírásához meg kell azt figyelnünk, adatokat kell gyűjtenünk az objektumairól, összegeznünk kell azok tulajdonságait, valamint meg kell figyelnünk a köztük levő kapcsolatokat. Ezek után juthatunk a rendelkezésre álló, tárolt adatokból új ismeretekhez, információhoz. Az adatoknak egy jól struktúrált halmazát adatbázisnak nevezzük, amelyből a későbbiekben információt akarunk majd nyerni. Az információnyerés céljából pedig olyan szoftvereket használunk, amelyek lehetővé teszik az adatbázisok kezelését (lekérdezés, módosítás, törlés, karbantartás) és amelyeket együtt adatbázis-kezelő rendszernek nevezünk. Az olyan rendszereket, amelyek a hardveren tárolt adatokból szoftverek és egyéb alkalmazói programok segítségével lehetővé teszik a felhasználó számára az információ nyerését, információs rendszereknek nevezzük. Látható tehát, hogy egy információs rendszerhez szükség van adatokra, hardver eszközökre, szoftverekre és a felhasználóra. Szoftveren itt olyan programcsomagot értünk, amely gyorsítja a munka elvégzését, például szövegszerkesztők, táblázatkezelők, adatbázis-kezelő rendszerek. Az alkalmazói programok pedig egy-egy szakember által valamilyen programozási nyelven, egy konkrét feladatra írt programok. 4.1.Adatmodellezés Az adatmodellezés az adatállományok tervezésének korszerű módszere. Az adatmodellezéssel az a célunk, hogy egy információs rendszer adatait és az adatok között fennálló kapcsolatokat következetesen ábrázolva, elősegítsük a számítógépes információfeldolgozást. Az adathalmaz és az adathalmaz elemei között fennálló kapcsolatok struktúrált leírását adatmodellnek nevezzük. Az adatmodellek -mint ahogy a nevükből is következik-, általában nem írják le teljesen és hűen a modellezett rendszerben található adatokat és azok kapcsolatait, hanem azoknak csak egy részét. Egy kielégítő modellnek teljesítenie kell bizonyos feltételeket: átfogónak kell lennie, azaz minden lehetséges adatot és minden lehetséges kapcsolatot tudnia kell ábrázolni és kezelni; le kell tudnia írni a valóság általános, lényeges és tartós összefüggéseit; redundanciamentesnek kell lennie, azaz minden adatot lehetőleg csak egyszer tartalmazzon; következetesnek kell lennie; valamint az alkalmazott hardverrel és szoftverrel összhangban levőnek kell lennie 28

29 Az adatmodell nemcsak felsorolása a fileban tárolt mezőknek, hanem az adatok jelentését is tartalmazza. Így az adatmodellben világosan megkülönböztethetők az ábrázolt dolgok és a dolgok tulajdonságai; pontosan meghatározott, hogy melyek az ábrázolandó dolgok olyan tulajdonságai, amelyekkel a dolgok egyértelműen azonosíthatók; valamint az adatmodell expliciten definiálja az ábrázolt dolgok közötti kapcsolatokat. Az adatmodell a valóság egy szeletének a leképezését jelenti. A valós világhoz képest az adatmodellek tartalmaznak bizonyos megszorításokat és egyszerűsítéseket, sőt még a modellező személyétől függő vonásokat is. Egy adatmodell úgy viszonyul a valósághoz, mint a térkép az általa ábrázolt tájhoz: a térképrajzolónak egyszerűsíteni kell, ki kell jelölnie a térkép széleit, és el kell döntenie, hogy mit is akar egyáltalán a térképen feltüntetni. Ugyanígy, az adatmodell kialakításakor a rendszerszervezőnek is el kell döntenie, hogy melyek a modelljében az ábrázolandó információelemek, és ki kell választania a dolgok között fennálló lényeges kapcsolatok közül azokat, amelyeket be akar a modellbe építeni. A lényeges információelemek és a modellben ábrázolandó kapcsolatok kiválasztása párhuzamosan történik. Egy adatmodell a következő elemeket tartalmazza: egyed, tulajdonság, kapcsolat. Vagyis: Egyedek a valóság olyan dolgai, amelyek más dolgoktól megkülönböztethetők, azaz az egyed a valós világban létező, fogalmi vagy fizikai léttel rendelkező dolog, amelyet tulajdonságokkal akarunk leírni. (pl. dolgozó, tanuló, vevő, autó, stb.) Ugyanaz a dolog többféle egyednek is tekinthető (pl. egy személy lehet dolgozó), de a képviselt konkrét elemek halmazát egyedhalmaznak nevezzük. (a vevő, mint egyedhalmaz az összes vevőt tartalmazza) Tulajdonságnak nevezzük a valóság dolgainak azon jellemzőit, amelyekkel az egyedeket leírjuk. (pl. autónál tulajdonság a típus, szín, rendszám, stb. A típus értékei lehetnek: BMW, Opel, stb.) Az egyedek a tulajdonságértékeikkel azonosíthatók. Kapcsolatnak nevezzük az egyedek közötti viszonyok fogalmi tükörképeit. Objektumok közötti viszony pl. az, hogy a munkás a kft. dolgozója. Ennek egy konkrét előfordulása pl. 29

30 Kovács János a Zabhegyező kft. dolgozója. Ezen felsorolt adatmodell-elemek mindegyikének három szintje van: Belső, vagy fizikai szint: az adatok fizikai elhelyezését és fizikai elérési módját írja le. Azaz leírja a tárolás és az elérés módját. A tárolási mód megadja, hogy melyik lemezen fizikailag hol helyezkednek el az adatbázis adott rekordjai és azt, hogy milyen konverziót kell ahhoz elvégezni, hogy az adat a felhasználóknak megfelelő formájú legyen. Az elérési mód megadja, hogy hogyan, milyen sorrendben követik egymást a rekordok, hogyan érhetjük el őket. Tipikus elérési módok: fizikai sorrendben, valamilyen mező szerint rendezve, közvetlenül indexek alapján. Külső szint (view-k): melyek azt írják le, hogyan látják az egyes felhasználók az adatbázist. (view= alséma, szűkített adatbázis, amely az adatbázis rekordjait tartalmazza, de nem az összes mezővel.) Koncepcionális szint (fogalmi adatbázis): mely azt írja le, hogy logikailag egységbe vonva, hogyan néz ki ténylegesen az adatbázis. Azaz leírja. hogyan néznének ki az adatok, ha mindenki mindent láthatna belőlük. Ezt a leírást szoktuk az adatbázis sémájának nevezni. Ez tartalmazza a koncepcionális szint összes rekordtípusának tartalmi leírását, de az adatfüggetlenség érdekében nem tartalmazza az adatok helyét és a hozzáférési módot. Ugyancsak ez a szint írja le, milyen kapcsolatok vannak az egyes rekordok között. A kapcsolat leírásának módja az adatmodelltől függ. Még két fogalmat kell tisztáznunk a továbbiak miatt: Séma (típus): a konkrétan létező egyedek, tulajdonságok, kapcsolatok absztrakciója. Az egyedek bizonyos tulajdonságtípusaik alapján halmazokba rendeződnek. Egy-egy halmaz neve az egyed típusa, a halmazba tartozó egyedek az előfordulások, megfelelő tulajdonság előfordulásokkal. Ez a szint tartalmazza az egyedtípusok tartalmi leírását, de az adatfüggetlenség érdekében nem tartalmazza az adatok helyét és a hozzáférési módot. Ugyancsak ez a szint írja le, hogy milyen kapcsolatok vannak az egyedek (rekordok) között. A kapcsolatok leírásának módja az adatmodelltől függ. Előfordulás: konkrétan létező egyed, tulajdonságérték, kapcsolat. 4.2.Adatfüggetlenség Mivel ugyanazon adatokat több felhasználó és több program is használhatja, az adatokat és a programokat - amennyire lehetséges - függetleníteni kell egymástól: ha például valamelyik programban a rekordokat kibővítjük egy mezővel, akkor ne kelljen a 30

31 többi programot megváltoztatni. Az adatok fizikai leírását külön kell választani a programok által látott adatszerkezettől. Ez az adatfüggetlenség. Az adatfüggetlenségnek két fokozata van: fizikai adatfüggetlenségről beszélünk, ha a programok vagy felhasználók információkérései gyakorlatilag függetlenek az adatok tárolási és elérési módjától; logikai adatfüggetlenségről beszélünk, ha az adatbázis logikai szerkezetében létrehozott változások az adatbázist felhasználó programokat nem befolyásolják. A tényleges adatfüggetlenség e kettő együttes megvalósulása. 4.3.Az adatbázis-kezelő rendszer részei Kapcsolattartó: ez lehetővé teszi, hogy más alkalmazások kapcsolatba tudjanak lépni az adatbázissal. Feladat átkonvertáló: az adatbázis kezelő rendszer nyelvén kapott utasításokat elemzi, értékeli, és ha végrehajthatóak, meghatározza a végrehajtás várható leghatékonyabb módját. Elérés meghatározó: az objektumok elérésére meghatározott módszert átfordítja az operációs rendszer számára érthető parancsokká. Elindítja, majd értékeli ezen parancsok végrehajtását. 4.4.Az adatleíró nyelv (Data Definition Language) Séma: az adatmodellnek és a leírásnak további számítógépes feldolgozásra is alkalmas tartalmi és formai megfogalmazása. Az adatleíró nyelv a séma megfogalmazására szolgáló nyelv. Egy adatbázishoz egy séma tartozik, amely pontosan meghatározza az adatszerkezetet, a tárolási struktúrát, valamint az egyes adatelemek között fennálló logikai kapcsolatokat. Az alsémák mutatják meg, hogy az egyes alkalmazói programok az adatbázist hogyan látják. Egy adatbázis sémához akárhány alséma illeszthető. Más-más alsémákban lehet az adatoknak a típusa, neve, csoportosítása. Az adatleíró nyelv három szinten írja le az adatokat: a felhasználó szintjén, amely a tényleges adatbázis valamilyen alsémáját, az adatmodell egy külső szintjét jelenti. az adatok logikai kapcsolatának szintjén, mely a teljes logikai séma, a koncepciós modell leírását tartalmazza. 31

32 az adatok fizikai tárolásának meghatározása szintjén, mely az egyes adatok fizikai elérhetőségét, tárolási módját és a köztük fennálló fizikai kapcsolatokat (mutatók, indexek stb.) írja le. A tárolási módot és a fizikai kapcsolatokat rendszerint egy önálló nyelv segítségével valósítjuk meg. 4.5.Az adatkezelő nyelv (Data Manipulation Language) A feldolgozás céljaira szükség van egy adatkezelő nyelvre. Ennek segítségével a felhasználó az adatleíró nyelvvel definiált adatbázison műveleteket végezhet. A műveletek vonatkozhatnak az adatbázis adatainak: előállítására, módosítására, lekérdezésére. Az adatkezelő nyelv által az adatbázis megnyitható, zárható, kulcs vagy cím alapján kereshetünk benne, beolvashatunk, beszúrhatunk, törölhetünk, módosíthatunk rekordokat. 4.6.Az adatbázis-kezelő rendszer Az adatbázis-kezelő rendszer tehát egy szoftver, amely biztosítja az adatbázisban tárolt adatok létrehozását, kezelését, valamint leírja és kezeli az adatok közötti komplex kapcsolatokat. Az adatbázis-kezelő rendszernek támogatnia kell valamilyen adatmodellt, hogy a valóságot le tudja képezni egy számunkra megfogható objektumra. Két részből épül fel: jelölésrendszer: hogy valamilyen formában a valóságot ábrázolni tudjuk, műveletek halmaza: amely lehetővé teszi, hogy az előbbieket kezelni tudjuk. Az adatbázis-kezelő rendszernek biztosítania kell: különféle igények hatékony kielégítését, az adatbázis következetességét, vagyis, hogy csak valós adatokat tároljunk, az adatbázisbeli valamennyi adat elérését, (ezt egy filekezelő rendszer nem teszi meg) adatfüggetlenséget, (fizikai és logikai függetlenséget) 32

33 adatok közti komplex kapcsolatok kezelését és ábrázolását, redundancia mentességet és annak ellenőrzését (ne szerepeljen az adatbázisban többször is ugyanaz az adat), az adatok védelmét, [mind fizikai, mind emberi (véletlen vagy szándékos rongálás) értelemben] helyreállíthatóságot, több felhasználós rendszerekben az egyidejű hozzáférést (tranzakciókezelés), osztott adatbázisokban az adatok szétosztását, megtalálását, az adatforgalom optimalizálását. 4.7.Adatmodellek hierarchikus modell: az adatbázist irányított gráfként, fastruktúrában ábrázoljuk. A gráf csúcsai az objektumokat, az ágai pedig az objektumok közötti kapcsolatokat jelölik. Ennek az ábrázolásnak az a hátránya, hogy nem minden fajta kapcsolatot tud ábrázolni (például a sok-sok kapcsolatot nem tudja). hálós modell: ez a modell már megoldotta az előbbi problémát. Az adatokat mutatókon keresztül érhetjük el és ugyanígy reprezentálhatjuk a köztük levő kapcsolatokat is. Ezt a két modellt többnyire az adott feladatokra írt programokkal valósították meg. Ha olyan kérdés merült fel, ami nem volt beprogramozva, azt nem lehetett megválaszolni. relációs modell: a 70-es évektől kezdve terjedt el, és ma már szinte minden rendszer ezt támogatja. Jelölésrendszere táblázatokból áll. A kapcsolatok leírására bonyolult matematikai apparátust, relációkat használ. Ezt a modellt használja például az SQL nyelv is. Amikor létrehozunk egy adatbázist, bizonyos szabályoknak kell eleget tenni. Így érhetjük el, hogy az adatmodell mindig a valóságot tükrözze. Ha tényleges változás következik be, akkor az adatbázis-kezelő rendszer szerkezetét kell módosítani. 33

34 4.8.SQL nyelv Structured Query Language: Strukturált lekérdező nyelv. Angol nyelvterületen 'eszkjuel' a kiejtése. A hagyományokhoz való hűség jegyében sokan 'szíkvel'-nek ejtik, ugyanis korábban Structured English Query Language (SEQUEL) volt az elnevezés, és ezt rövidítették le. A relációs adatbázis-kezelők általában az SQL nyelven programozhatók. Az SQL alapvető utasításait közel egyformán valósítják meg, de a később beépült nyelvi elemek körében nagyon nagy az eltérés, az inkompatibilitás, emiatt számos SQL nyelvjárásról beszélhetünk. Jellegét tekintve ez a programozási nyelv részben procedurális, részben deklaratív. Az SQL alapjait az IBM-nél fektették le, még az 1970-es években. Elvi alapot a relációs adatmodell szolgáltatott, amit Edgar F. Codd híres 12 szabályával írt le először, 1970-ben. Az IBM, az Oracle és más gyártók is érdekeltek voltak egy szabványos lekérdező nyelv kifejlesztésében, amivel a relációs adatbázisok programozhatók. Az iparági összefogással létrejött ANSI NCITS (National Committee on Information Technology Standards) H2 csoport lerakta az SQL alapjait. A szabványt az ANSI (Amerikai Nemzeti Szabványügyi Intézet American National Standards Institute) ban, az ISO (Nemzetközi Szabványügyi Szervezet International Organization for Standardization) 1987-ben jegyezte be. Az első változatot SQL86 néven is szokták emlegetni. Az SQL-t folyamatosan továbbfejlesztették, és négy jelentős kiadást különböztetünk meg: SQL86 SQL89 SQL92 SQL99 Az első kivételével mindegyik szabvány többszintű megvalósítást tesz lehetővé a gyártóknak (belépő szintű, közepes vagy teljes). Általában a későbbi szabványok belépő szintjei az előző szabvány teljes szintjeinek felelnek meg. 34

35 A nyelvi elemeket szokásos adatdefiníciós (Data Definition Language, DDL) és adatkezelési (Data Manipulation Language, DML) részekre bontani. A nyelvben az utasításokat a pontosvessző választja el egymástól Adatdefiníciós utasítások CREATE Adatbázis objektum létrehozása. Példa adatbázis tábla definíciójára: CREATE TABLE Szamla ( Szamlaszam NUMERIC(24), Tulajdonos VARCHAR(60), Nyitas DATE, Allapot VARCHAR(1), PRIMARY KEY (Szamlaszam) ); A fenti példa létrehoz egy adatbázis táblát, 4 oszloppal. ALTER Adatbázis-objektum módosítása. Példa: ALTER TABLE Szamla MODIFY Szamlaszam VARCHAR(26); A fenti példa megváltoztatja egy adatbázis tábla egy oszlopának típusát. DROP Egy adatbázisbeli objektum megszüntetése. Példa: DROP INDEX Szamla_1; A fenti példa megszüntet egy indexet. DROP TABLE egy_tabla; Ez pedig egy adattáblát szüntet meg. 35

36 COMMENT Megjegyzést fűz egy adatbázis-objektumhoz. Példa: COMMENT ON TABLE Szamla IS 'Ügyfelek bankszámlaszámai'; COMMENT ON COLUMN Szamla.Allapot IS 'Számla állapota: "N" Normál, "D" Törölve'; A fenti példa megjegyzéseket fűz egy táblához és annak egy mezőjéhez Adatkezelő utasítások Az SQL talán leggyakrabban használt utasítása a lekérdezés. Ez a nyelvi elem inkább deklaratívnak tekinthető, mint procedurálisnak, hiszen a felhasználó (programozó) csak az eredményhalmaz mezőit (oszlopait) és a halmaz felépítésének feltételeit határozza meg, a leválogatási algoritmus elkészítése az adatbázis-kezelő feladata. A SELECT utasítás az adatok egy halmazát válogatja ki egy táblázatba a relációs adatbázisból, és teszi elérhetővé valamilyen technikával a felhasználó számára. Mivel elég nagy adatmennyiségekről lehet szó (szélsőséges esetben az egész adatbázisról), ezért a halmaz általában szekvenciálisan olvasható. Egy mutató (kurzor) mozgatható az eredmény halmazon előre vagy hátra, és kiolvasható, hogy milyen adatok vannak a mutató alatt. Ha a mutató az eredményhalmaz végére vagy elejére ért, azt különleges jelzéssel tudatja az adatbázis-kezelő (EOF End of File állomány vége, illetve BOF Beginning of File, állomány eleje) Példa: SELECT COUNT(*), Tulajdonos FROM Szamla WHERE Allapot = 'N' GROUP BY Tulajdonos HAVING COUNT(*) > 1 ORDER BY Tulajdonos A fenti példa kilistázza azokat a személyeket, akiknek egynél több aktív bankszámlája van. Az első oszlopban az aktív bankszámlák száma, a másodikban a tulajdonosok neve olvasható. A táblázat a tulajdonosok neve szerinti emelkedő sorrendben jelenik meg. A 36

37 SELECT utasítás több szakaszból állhat, amelyek közül majdnem mindegyik elhagyható, ha az szükséges. Az egyes szakaszok magyarázata: SELECT Az eredményhalmaz oszlopait kell itt felsorolni. Nagyon hasznos, hogy további SELECTek is lehetnek benne! Példa: SELECT Vevo.Nev, (SELECT SUM(Osszeg) FROM Rendeles WHERE VevoID = Vevo.ID) RendelesOsszeg A fenti példa a vevő neve mellett megjeleníti az eddigi rendeléseinek összegét is. Összetettebb példa: SELECT munka_szám FROM munka WHERE óraszám*óradíj = ( SELECT max(óraszám*óradíj) FROM munka ); A lekérdezés megkeresi a legnagyobb árbevételű munkáinkat. akkor használható jól, ha több is van belőle. FROM Meghatározza, hogy mely adatbázis-táblákból szeretnénk összegyűjteni az adatokat. Példa: SELECT * FROM Beteg, Kezeles A fenti példa az összes beteggel összepárosítja az összes kezelést (Descartes-szorzatot képez). Ennek persze nincs túl sok értelme, hiszen mi minden beteghez csak a hozzá tartozó kezelést szeretnénk látni. Ezt így fogalmazhatjuk meg: SELECT * 37

38 FROM Beteg KEY JOIN Kezeles A fenti példa akkor működik, ha van definiált külső kulcs a Kezeles tábláról a Beteg táblára. Egyes SQL kiszolgálók (pld. Oracle) ezt a fajta összekapcsolást nem támogatják, hiába definiálunk külső kulcsot. WHERE Szűrési feltételeket fogalmaz meg, amelyek szűkítik az eredményhalmazt (a Descartesszorzathoz képest). Példa: SELECT * FROM Beteg, Kezeles WHERE Beteg.ID = Kezeles.BetegID AND Kezeles.Datum = CURRENT DATE A fenti lekérdezés visszaadja, milyen kezeléseket végeztek ma, és melyik betegeken. A WHERE szakaszban a Boole-algebra kifejezései használhatók, OR, AND és NOT operátorokkal. GROUP BY Egyes sorok összevonását, csoportosítását írja elő az eredménytáblában. Példa: SELECT COUNT(*), Tulajdonos FROM Szamla WHERE Allapot = 'N' GROUP BY Tulajdonos A fenti példa a Tulajdonos oszlop alapján csoportosítja a sorokat. A SELECT részben lévő COUNT(*) egy-egy csoport sorainak számát adja vissza, az összevonás előtt. HAVING A WHERE-hez hasonlóan itt is szűrést fogalmazhatunk meg, azonban itt a csoportosítás utáni eredményhalmazra. Példa: SELECT COUNT(*), Tulajdonos FROM Szamla WHERE Allapot = 'N' 38

39 GROUP BY Tulajdonos HAVING COUNT(*) > 1 Az előző példához képest itt annyi a módosulás, hogy csak azok a csoportok jelennek meg, amelyek egynél több sorból lettek összevonva. ORDER BY Az eredményhalmaz rendezését adja meg. Példa: SELECT * FROM Beteg ORDER BY Szuletes DESC A fenti példa a betegek listáját adja vissza, születési dátum szerint sorba rendezve, elöl a legfiatalabb beteggel. INSERT Adatokat ad hozzá egy táblához. Példa: INSERT INTO Szamla (Szamlaszam, Tulajdonos, Nyitas, Allapot) VALUES (123456, 'H. Kovács Géza', ' ', 'N'); UPDATE Módosítást hajt végre az adatokon. Példa: UPDATE Szamla SET Allapot = 'D' WHERE Szamlaszam = ; A fenti utasítás megváltoztatja az egyik számla állapotát. DELETE Adatokat töröl egy táblából. Példa: DELETE FROM Beteg WHERE TAJ = ' '; Ez az utasítás annak a betegnek, akinek a TAJ száma: , törli az összes adatát a Beteg táblából. 39

40 Egyéb utasítások Az SQL-t az idők során kiegészítették olyan tulajdonságokkal, hogy a programozók képesek legyenek benne bonyolult algoritmusokat is írni. Ez akkor válhat szükségessé, ha például komoly adatkezelési feladatokat szeretnénk az ügyfél-oldalról a kiszolgáló-oldalra áthelyezni, az ott elérhető sokkal nagyobb tejesítmény miatt. De az is lehet, hogy csak egyszerűsíteni akarjuk a programozást felhasználói függvények létrehozásával (például szükségünk lenne egy olyan függvényre, ami a TAJ számból kiszedi a szóközöket). Az SQL nyelv részei a változókezelés, elágazások, ciklusok kezelése, kivételkezelés stb. 40

41 5. Gyakorlati megvalósítás Az eddig leírt elméleti ismereteket ültessük át a gyakorlatban. Az alábbiakban egy általam írt egyszerű webalapú, adatbázis-kapcsolatot használó php alkalmazást fogok részletesebben bemutatatni. Az alkalmazás lehetne sokkal bonyolultabb és sok biztonsági kérdést is felvet, amire ki is fogok térni, de az volt a célom, hogy egy egyszerű, mindenki számára könnyen áttekinthető kódot írjak, ami megvalósít egy egyszerű feladatot. A script adatbázisban tárolt adatokból tesz fel kérdéseket a válaszadások után, kiírja, hogy helyes volt-e a válasz, valamint a beállított feltett kérdés mennyiség után megadja a helyes válaszok számát. A programban minden olyan elemet felhasználtam, ami szakdolgozatom témája. A HTML leíró nyelvet, Java Scriptet, PHP scriptnyelvet, valamint adatbázis-kezelést MySQL adatbázis-kezelővel. Most pedig lássuk a konkrét programkódot valamint a kódrészletek magyarázatát: <? // Ebben a változóban megadható, hogy a script hány kérdést tegyen fel. $questions = 5; // Itt két külső fájl behívása történik. Az elsőben az adatbázis-kapcsolathoz szükséges beállítások vannak. Az adatbázis host-ja, adatbázis neve, felhasználói név, jelszó. include("inc/settings.inc.php"); include("inc/db.inc.php"); Itt a HTML kód rész kezdődik. Szabványos doctype HTML 4.01, metakód a helyes kódlap használatához, kevés CSS az alapvető formázások megadásához. Ezt követi a fejléc megadása, valamint a body kezdőtagja. 41

42 ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> <!-- body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } --> </style> <title>eteszt 1.0</title> </head> <body> <h2>eteszt 1.0</h2> <? Az alábbi kódrészlet lekérdezi az adatbázisból a kérdéseket és a hozzá tartozó válaszokat és egy tömbben tárolja. Ha nagyon sok kérdés lenne az adattáblába, ez nem lenne túl optimális megoldás, de mivel én tudtam, hogy kis kérdésszámra tervezem a programot, így egyenlőre megelégedtem ezzel a megoldással is. Ebből a tömbből választja ki majd véletlenszerűen a feltett kérdéseket a program. Egy alap SELECT SQL parancsot figyelhetünk meg a lekérdezésben. Az adatbázis-kezelő egy kétdimenziós tömbben adja vissza a találatokat, ami tulajdonképpen egy táblázatnak felel ebben a formában meg. Én ezt egy-egy tömbbe teszem bele, ahol az elnevezés a megfelelő indexel megadja egy kérdés össze adatát! Az adatokat az alább táblázat reprezentálja. Az index a tömbindex. Mivel a php nyelvről van szó, 0-tól kezdődik az indexelés. A questionid-ben található az adatbázisban megkapott azonosítója a kérdésnek. Ez egy autoincrement, tehát automatikusan definiált érték. A rendszer 1-től kezdi el az értékfeltöltést. A question változóba kerül maga a kérdés. Az answer1 answer4 változókba kerülnek a válaszok. A 42

43 correct változóba kerül a helyes válasz száma (pl.: ha a answer4 tartalmazza a helyes választ, akkor 4). Kérdések betöltése tömbbe index questionid question answer1 answer2 answer3 answer4 correct kérdés 1.kérdés 1.kérdés 1.kérdés 1.kérdés 1.kérdés 1.válasza 2.válasza 3.válasz 4.válasz helyes válasz száma kérdés 2.kérdés 2.kérdés 2.kérdés 2.kérdés 2.kérdés 1.válasza 2.válasza 3.válasz 4.válasz helyes válasz száma kérdés 3.kérdés 3.kérdés 3.kérdés 3.kérdés 3.kérdés 1.válasza 2.válasza 3.válasz 4.válasz helyes válasz száma kérdés 4.kérdés 4.kérdés 4.kérdés 4.kérdés 4.kérdés 1.válasza 2.válasza 3.válasz 4.válasz helyes válasz száma kérdés 5.kérdés 5.kérdés 5.kérdés 5.kérdés 5.kérdés 1.válasza 2.válasza 3.válasz 4.válasz helyes válasz száma.. És akkor itt megtekinthetjük a fentebb leírt kódrészletet! $command = <<<HTML SELECT * FROM questions HTML; $i = 0; $commandexec $kapcsolat); while ($row = mysql_fetch_row($commandexec)) { $questionid[$i] = $row[0]; $question[$i] = $row[1]; $answer1[$i] = $row[2]; $answer2[$i] = $row[3]; $answer3[$i] = $row[4]; 43

44 $answer4[$i] = $row[5]; $correct[$i] = $row[6]; $i++; } Itt levizsgálom, hogy a program elején beállított felteendő kérdések szám esetleg nem több-e, mint a betöltött kérdéseket száma. Erre azért van szükség, mert egy kérdést csak egyszer tesz fel a rendszer, így ha több kérdést akar feltenni, mint amennyit betöltött, akkor egy végtelen ciklusba beragadna a kód. Ez egy nagyon jó példa a kritikus érték vizsgálatra, amire nagyon oda kell figyelni a programozás során. Én itt úgy oldottam meg, hogyha több kérdés van beállítva mint amennyit a rendszer betöltött, akkor a felteendő kérdések számát a maximális kérdésszámra állítja be a rendszer. if ($i < $questions) { $questions = $i; } Itt már a kérdésfeltétellel foglakozik a kód. Egy számlálós segítségével figyelem hányadik kérdésnél járunk, amit egy rejtett mezőben viszek át a későbbiek folyamán. Ha ez a számláló elérte a felteendő kérdések számát, akkor kiírásra kerül az eredmény. Itt kiírja feltett kérdések számát, valamint a helyes válaszok számát! A kérdések számának kiírása azért is szükség, mert ahogy már erről fentebb volt szó, ez lehet nem egyezik meg a beállított értékkel, ha a betöltött kérdések száma kevesebb mint a feltett kérdéseké. if ($counter == $questions) { print <<<HTML <h4>eredmény</h4> Kérdések száma: <b>$counter</b><br> Helyes válasz: <b>$correctdata</b> HTML; } Ha a kérdés szám nem érte el még a kívánt értéket, akkor kérdést kell feltenni. 44

45 else { Egy rejtet mezőben, melynek neve questionsids, került átvitelre azon kérdések id-je, amelyeket már feltett. Mivel egy mezőben szerepel az összes érték a x speciálsi karaktersorral választotam el őket. Itt történek ezen id-k visszanyerése egy tömbe. A tömb neven usedids. $usedids = explode(" x ", $questionsids); Ebben a kódrészletben történik meg a véletlenszerű kérdés kiválasztása, persze annak a feltételnek megfeleltetve, hogy egy kérdést, csak egyszer tehet fel a rendszer. A flag változón mutatja, hogy a kérdés fel, volt-e már téve. Alapból ezt egyre állítjuk, azért hogy a rendszer elkezdjen véletlen számot generálni. Addig ismételjük, amíg olyan id-t nem generál számunkra a rendszer, amit még nem tettünk fel. $flag = 1; while ($flag) { $rand = rand(0, $i-1); A flag változónkat 0-ra állítjuk, tehát azt feltételezzük, hogy a kérdést még nem tettük fel. Az előzőleg visszanyert usedids tömbünkön végighaladva egy foreach ciklussal megnézzük, hogy a generált id, szerepel e benne. Ha szerepel, akkor a flag-et visszaállítjuk 1-re így a while ciklus ismét lefut és ujabb véletlen id-t generál. Ez addig történik, míg olyan id-t nem kapunk, ami nem szerepel az eddig feltett kérdések tömbjében. Ebben az esetben a flag változónk 0- marad és a while ciklus kilép. $flag = 0; foreach ($usedids as $k) { if ($k) { if ($k == $questionid[$rand]) { $flag = 1; } } 45

46 } } A kiválasztott kérdésnél a helyes válasz id-jét beletesszük a correct id változóba és egyel csökkentjük, hogy a javascript vizsgálatnál használható legyen. $correctid = $correct[$rand]-1; A counter változónkat, ami a feltett kérdéseket számolja, eggyel megnöveljük, hisz újabb kérdést tettünk fel. $counter++; A correctdata változóba kerül a helyes válaszok száma. Ha még ennek nincs értéke, 0-ra állítjuk, ezzel biztosítva hogy szám típusúnak vegye innentől a változót. A correctdata és counter változók egy rejtett mezőben kerülnek átvitelre. if (!$correctdata) { $correctdata = 0; } A helyes válaszok vizsgálata javascriptel történik. Ezt is rábízhattuk volna a PHP-ra, de igy kicsit látványosabb. Persze biztonsági kérdéseket felvet a dolog, mivel a javascipt kliens oldalon fut. És ha valaki nagyon ügyes, megnézi az oldal forráskódját, a javascript kódban megtalálhatja, hogy mi a helyes válasz. print <<<HTML <script language="javascript" type="text/javascript"> A válasz ellenőrzése egy Ellenőriz gomb megnyomásával történik. A válaszok előtt egy egy rádiógomb található. Nincs kiválasztva egyetlen válasz sem, hogy ez ne befolyásolja a válaszadót. Persze sokkal egyszerűbb lett volna, ha mindig az első választ bejelöltem volna, de ez így sokkal szebb megoldás. Amíg nem választ ki a felhasználó a 4 válaszlehetőségből egyet sem, addig az Ellenőriz gomb le van tiltva. Az enableonclick 46

47 javascript eljárás végzi el ennek a gombnak a feloldását. Ez akkor fut le, ha valaki az egy rádiógombon klikkel. function enableonclick() { document.form1.submit.disabled = false; } A checkanswer nevű javascript eljárásunk végzi el a kérdés kiértékelését. Ez akkor fut le, ha az Ellenőriz gombon klikkelünk. Vizsgáljuk meg kicsit részletesebben mi is történik ekkor. Ha a kiválasztott rádiógomb indexe megegyezik az előzőleg javascript számára meghatározott helyes válasszal, akkor erről egy alert ablakban értesít bennünket a rendszer, hogy a válasz helyes. Ha nem egyezik meg, a válasz hibás, és erről is figyelmeztetést kapunk. function checkanswer() { if (document.form1.answer[$correctid].checked == true) { document.form1.correctdata.value = parseint(document.form1.correctdata.value) + 1; alert('a válasz helyes!'); } else { alert('a válasz helytelen!'); } } Javascript kódrész lezárása. </script> Az alábbi HTML kódrészletben történik meg a kérdés, valalmint a rejtett mezők megjelenítése. Az űrlap egy form-ba van foglalva. Küldéskor meghívja az ellenőrző javascriptünket az OnSubmit eseménykezelővel. A rejtett mezőkbe szerepel az előzőleg megbeszélt counter és correctdata értékei. 47

48 <form method="post" name="form1" onsubmit="checkanswer()"> <input type="hidden" name="questionsids" value="$questionsids x $questionid[$rand]"> <input type="hidden" name="counter" value="$counter"> <input type="hidden" name="correctdata" value="$correctdata"> Itt megjelenik a feltett kérdés. <i>$question[$rand]</i><br> <br> Itt rádiógombbal megjelenek a válaszlehetőségek. Onclick eseménykezelővel meghívásra kerül az Ellenőriz gombot feloldó enableonclick eljárás. <input type="radio" name="answer" value="1" onclick="enableonclick()"> $answer1[$rand]<br> <input type="radio" name="answer" value="2" onclick="enableonclick()"> $answer2[$rand]<br> <input type="radio" name="answer" value="3" onclick="enableonclick()"> $answer3[$rand]<br> <input type="radio" name="answer" value="4" onclick="enableonclick()"> $answer4[$rand]<br> <br> Az űrlapot elküldő Ellenőriz felirattal ellátott gomb. <input type="submit" name="submit" value="ellenõriz" disabled> </form> HTML; } 48

49 ?> A HTML tagokat valamint PHP kódot lezáró rész. </body> </html> No ezzel sikerült átnéznünk mi miért történik a programban és mi hogyan működik, minek mi a szerepe. 5.1.Működés közben Nézzünk néhány képet a programról működés közben hogyan is jelenik meg a böngészőben. A program megtekinthető az interneten is és kipróbálható a címen. Kérdésfeltétel még válasz megadása előtt. Válasz kiválasztás után az ellenőriz gomb is használhatóvá válik. 49

50 Helytelen válasz esetén az alábbi ablakot kapjuk. 50

51 Helytelen válasz esetén az alábbi ablakot kapjuk. Végül az eredmény megjelenítése. Megkapjuk a feltett kérdések számát és, hogy hány helyes választ adtunk. 51

52 6. Internet címek A HTML leíró nyelv hivatalos szabványait találjuk meg az oldalon. Mivel több HTML szabvány is forgalomban van, így mindegyik megtalálhatjuk itt. A PHP hivatalos oldala, itt minden megtalálható, amit a PHP-ról tudni kell, többek között az online manual, valamint innen tölthető le a PHP futtatatásához szükséges szoftver is többféle platformra. A mysql hivatalos oldala. Itt is szintén megtalálható az online manual, valamint innen is letölthető maga az adatbázis-kezelő szoftver többféle platformra is. A legnépszerűbb webszerver szoftver hivatalos oldala. Szintén elérhető többféle platformra Linuxtól a Windowsig. Egy nagyon jó kis összeállított szoftvercsomag Windows platform alá. A rendszer előre beállítva tartalmazza az apache-ot, php interprrtert, mysql adatbázis-kezelőt, valamint a phpmyadmin szoftvereket. Ideális webfejlesztők részére, mert nem nekünk kell a modulok és szoftverek összehangolását elvégezni. Egy nagyon jó magyar programozó portál, ahol többek között webfejlesztéssel kapcsolatos anyagokat találhatunk, vagy kérdezhetünk másoktól a fórumon. Egy másik programozóknak szóló magyar internetes portál, ahol többségében egyedi tippeket, trükköket találhatunk, amiket felhasználhatunk webes fejlesztésünk során. 52

53 A phpmyadmin egy nagyon jó php alapú adatbázis-kezelő szoftver, amivel egyszerűen menedzselhetjük mysql alapú adatbázisainkat. A jogosultság beállítástól, az export/importálásig mindent elvégezhetünk vele, parancsmódjában kipróbálhatjuk az SQL parancsokat, így SQL parancsok gyakorlására is kiváló. Az aktuális a Java Script dokumentáció, természetese angol nyelven. Nagyon jó webes scriptgyűjtemény, ahol minden létező webes nyelven találhatóak ingyenes és fizetős scriptek. Természetesen a témához kapacsolódó PHP és Java Script nyelveken is. 53

54 Összegzés Remélem mindenki számára kiderült, mekkora távlatokat nyitnak a webes lehetőségek a neten. EZ kis egyszerű program jó alap lehet további fejlesztésekhez. Például készülhetne hozzá egy adminisztrációs felület ahol fel lehet vinni a kérdéseket a program számára. Lehetnek a kérdésekhez és válaszokhoz ábrákat is csatolni. Ki lehetne bővíteni, hogy külön tantárgyakat kezeljen. Az ellenőrző programot ki lehetne bővíteni, hogy meg kelljen adni a program elején személyes adatokat, valamint a végén a program értékelné is a helyes válaszok arányában a tesztalanyt. Eredményeket szintén ki lehetne gyűjteni adatbázisba. Persze itt láthatjuk, hogy komoly webes alkalmazás fejlesztés esetén, ami sok adattal dolgozik elengedhetetlen adatbázis-kezelő használata, mivel csak annak segítségével tudjuk maximálisa kiaknázni a lehetőségeket. Ezért fontos, hogy ahol komolyan foglalkoznak számítástechnika oktatásával, ott nem maradjon ki a tananyagból az adatbázis-kezelés oktatása sem. Sok webes keresőben is gyakorlati hasznát vehetjük a keresőkérdések megfogalmazásakor, ha a kereső parancsmódban is használható. Persze ez egyre ritkább, mert a kereső szoftverek leveszik a vállunkról ezt a terhet, de ha valamilyen komolyabb, komplexebb keresőkérdést akarunk megfogalmazni az gyakran csak parancssori megfogalmazással lehetséges. Ezekkel a fejlesztésekkel akár távoktatásra is alkalmas lenne a program, de ez már egy másik érdekes téma, ami nem profilja ennek a dolgozatnak. Láthatjuk, hogy a webes felületű alkalmazások fejlesztésében nagy lehetőségek vannak, és ezek tovább bővülnek majd a folyamatosan fejlődő háttérszoftverekkel együtt. Hiszen a PHP-ból és MySQL adatbázis-kezelőből is már kint van a fejeltebb 5-ös verzió és ez a fejlődési tendencia minden bizonnyal nem fog megállni. Az előzőekben sokat említett Apache webszerverből is kint van a 2-es verzió, de sajnos ez már elődjétől eltérően nem ingyenes. Zárszóként csak önmagamat tudom ismételni, mert ez a mondta már így vagy úgy de többször szerepelt a dolgozatban. A számítástechnika, informatika jövője az internetes, webes technológiákban van 54

55 Felhasznált irodalom Bártfai Barnabás / Weblapkészítés házilag Budapest: BBS-E K., 2001 Holczer József / Webszerkesztés egyszerűen Budapest: JOS, 2005 Julie C. Meloni / A PHP, a MySQL és az Apache használata Budapest: Panem, 2004 Moulding Peter / PHP haladóknak: fekete könyv Budapest: Perfact-Pro Kft., 2002 Nagy Péter / JavaScript 1.2: kézikönyv Budapest: Kiskapu, 1998 Paczona Zoltán / HTML technikák a gyakorlatban Budapest: Computer Panoráma, 2001 Péter Gábor / HTML 4.0: a világnyelv Budapest: University Press, 1998 Reese, George / A MySQL kezelése és használata Budapest: Kossuth, 2003 Sági Gábor / Webes adatbázis-kezelés MySQL és PHP használatával Budapest: BBS-Info, 2005 Sikos László / JavaScript kliens oldalon Budapest: BBS-Info,

56 Melléklettek 1. melléklet 2. melléklet 56

57 3. melléklet 4. melléklet 57

58 5. melléklet 58

59 6. melléklet 59

60 7. melléklet 60

61 8. melléklet 61