Programozás | PHP » Mester Gyula - Webprogramozás

Szabadkai Műszaki Főiskola WEB PROGRAMOZÁS Szabadka Mester Gyula, 2004. Előszó A kézirat a „Web technológiák” XHTML, CSS és PHP korszerű témaköreinek alapjaival foglalkozik. A tantárgy keretében a hallgatók megismerkednek a WEB programozás alapjaival, önálló feladatok megoldásán keresztül elsajátítják a WEB programozás, a dinamikus weboldalak készítésének technikáját. Az XHTML és CSS fejlődését a Word Wide Web Consortium (W3C, 1994) vállalta. A témaköröket a szerző az 2002/2003. tanévtől kezdve oktatja A témakör feldolgozása a nemzetközi szakirodalom utóbbi években publikált eredményein és a W3C ajánlásain alapszik. Az olvasó a kéziratban szereplő ismeretek elsajátításával korszerű tudás birtokába kerül, de szembe kell nézni azzal a ténnyel is, hogy a tudásanyag rövid időn belül elavul. A kézirat elektronikus formában elérhető a szerző honlapján: http://www.gmesterwebcom/e-tananyag Az első

témakör az XHTML jelölőnyelv alapjaival foglalkozik és 14 fejezetből áll. Az első fejezet az XHTML alapfogalmaival, alapszabályaival és a dokumentumtípus definíciókkal foglalkozik. A kéziratban az XHTML-1.0- Transitional DTD-t használjuk Az XHTML dokumentumok alapszerkezete a második fejezet tartalma. A harmadik fejezetben pedig XHTML nyelv attribútumait tárgyaljuk. A szövegblokk XHTML formázása a negyedik fejezet tartalma. A szöveges dokumentum XHTML sorformázásával pedig az ötödik fejezetben foglalkozunk. A hatodik fejezetben a hiperhivatkozásokat a hetedik fejezetben pedig a képek beágyazását tárgyaljuk. A nyolcadik fejezet a listák létrehozásával foglalkozik Kitérünk a: sorszám nélküli listák, sorszámozott listák és a leíró listák vizsgálatára. A kilencedik fejezet az XHTML táblázatokat, a tizedik fejezet pedig a kereteket tárgyalja. A Java-appletek beillesztése az XHTML dokumentumba a tizenegyedik fejezetben tekintjük át. A

tizenkettedik fejezet pedig az XHTML űrlapokkal foglalkozik. A következő fejezet a beágyazott, külső szkriptekkel és az eseményszkriptekkel foglakozik. Az utolsó fejezet az XHTML kódrészletek ellenőrzését mutatja be. A második témakör az CSS (Cascading Style Sheet- lépcsőzetes stíluslapok) alapjaival foglalkozik és 5 fejezetből áll. Az XHTML a dokumentum megjelenítését a stíluslapokra bízza A stíluslapok segítségével az XHTML dokumentum szerzője a Web oldal minden megjelenésbeli jellemzőjét beállíthatja az igényeknek megfelelően. A CSS specifikációnak több verziója létezik A mai 2 böngészők kezelni tudják az első két verziót (CSS1 és CSS2). A W3C jelenleg a harmadik verzió fejlesztésén dolgozik (CSS3). A bevezetés után a második fejezetben a beépített- és csatolt stíluslapok felépítését tárgyaljuk. A harmadik fejezet a stílusosztályokkal foglalkozik. A negyedik fejezet áttekinti a szövegformázást stíluslapok

alkalmazásával. Az ötödik fejezet pedig a előtérszín – háttérszín tematikát tárgyalja A témakör végén egy ellenőrzött XHTML és CSS átfogó feladatot mutatunk be. A könyvben nagyszámú példát mutatunk be a Jegyzettömb és a megfelelő böngészőprogram felhasználásával. A harmadik témakör a PHP alapjaival foglalkozik és 11 fejezetből áll. Az alapfogalmak áttekintése után a PHP programfejlesztés eszközeit tekintjük át. Következő fejezet tartalma programkészítés a PHP fejlesztői környezetben. A negyedik fejezet a PHP nyelv alkotóelemeit tárgyalja Az ötödik fejezet a vezérlőszerkezetekkel foglalkozik, tartalma: feltételes utasítások, elágazások, ciklusszerkezetek. A hatodik fejezetben a PHP függvényekkel foglalkozunk, majd az állományok beágyazását és a tömbök használatát tekintjük át. A harmadik témakör kilencedik fejezete a PHP és MySQL adatbázis-kezelést tárgyalja. Majd külön foglalkozunk a PHP szkriptek

hozzáférés-korlátozásával és a MySQL, Apache és PHP telepítésével és konfigurálásával. Külön szeretnék köszönetet mondani a jegyzet lektorának Dr. Pletl Szilveszter főiskolai tanárnak Kérem az olvasókat, hogy észrevételeiket a: gmester@subotica.net címre juttassák el. Szabadka, 2004. december Mester Gyula 3 XHTML jelölőnyelv 1. Az XHTML nyelv alapfogalmai 1.1 Bevezetés Az XHTML (Extensible HyperText Markup Language) egy struktúrában gazdag jelölőnyelv, amely a megjelenítést a stíluslapokra bízza, moduláris alapokra épül és együttműködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal. Az XHTML jelölőnyelv megjelenése és alkalmazása az Internet fejlődésének egy fontos lépcsőfokát jelenti. Az XHTML fejlődését a Word Wide Web

Consortium (W3C, 1994) vállalta. A W3C ajánlások formájában adja ki és fejleszti az XHTML szabványait (http://www.w3org) Az ajánlásokat és a szabványokat munkacsoportok dolgozzák ki. Így elmondható, hogy a HTML (HyperText Markup Language) jelölőnyelv az SGML ( Standard Generalized Markup Language – szabványosított általános jelölőnyelv) egy leegyszerűsített részhalmazaként jött létre, a W3C pedig átalakította a HTML-t XHTML alkalmazássá. A továbbiakban az XHTML 10 SE (második kiadás) verziójával foglalkozunk (XHTML 1.0 ajánlás: 2000 január 26; felülvizsgálva: 2002 augusztus 1) Az XHTM jelölőnyelv alkalmazásának az előnyei a következők: ™ Az XHTML dokumentumok megfelelnek az XML kiterjeszthető jelölőnyelv előírásainak. ™ Az XHTML dokumentumok kompatibilisek a HTML 4 jelölőnyelvben írt dokumentumokkal. ™ Az XHTML dokumentumok alkalmazhatják a szkripteket és appleteket. ™ Az XHTML nyelv tisztább és merevebb kódot

biztosít mint a HTML. ™ Az XHTML jelölőnyelv továbbfejlődik (a HTML nem!), jelenleg az XHTML 2.0 verzió fejlesztésénél tartunk. Az XHTML dokumentumok elkészítése szempontjából a következő eszközökre lesz szükségünk: 4 a. Szövegszerkesztő A szövegszerkesztő az XHTML dokumentum megszerkesztésére szolgál. Megfelel bármilyen egyszerű szövegszerkesztő, amely formázás nélküli ASCII-szöveget állít elő, például a Jegyzettömb (Notepad). Az XHTML dokumentum fejlesztés leghatásosabb eszköze (a munka és a kényelem szempontjából) a: Macromedia Dreamweaver MX 2004 használata (rendelkezik kódszínezéssel és kifejezés-szerkesztővel.)! b. Webböngésző A böngésző az XHTML dokumentumok számítógépen való megjelenítésére szolgáló program. Célszerű alkalmazni a széleskörűen használt webböngészőket mint például a: • Microsoft Internet Explorer • Netscape Navigator • Mozilla • Opera 1.2 Az XHTML jelölőnyelv

alapszabályai Az XHTML jelölőnyelv alapszabályai kis számú, egyszerű és jól érthető szintaktikai szabályokból áll: a. Minden jelölőelem tartalmaz nyitó- és záró jelölőelemet. Tehát minden megnyitott jelölőelemet be kell zárni! A nyitó- és záró jelölőelem neve megegyező kell, hogy legyen. Helyes példa: <p>Internet alkalmazásfejlesztés</p> Helytelen példa: <p>Internet alkalmazásfejlesztés b. Minden jelölőelem szabályosan egymásba ágyazandó. Az egymásba ágyazott jelölőelemeket a deklarálás sorrendjével ellentétesen kell lezárni. Tehát az utoljára megnyitott jelölőelem kerül először bezárásra. Helyes példa: <b><i>Nyugaton a helyzet változatlan</i></b> Helytelen példa: <b><i>Nyugaton a helyzet változatlan</b></i> 5 c. Az XHTML dokumentumok szabályosan formázandók. Az XML által bevezetett jó formázottság követelményei: - Az XHTML dokumentumban -

gyökér-jelölőelemet megelőzően - DOCTYPE (Document Type Definition – dokumentumtípus- definíció) deklarációt helyezünk el. - A title dokumentumcím használata kötelező. - Az XHTML dokumentumban a: <html> </html> gyökér jelölőelem a legmagasabb szintű jelölőelem. - Az összes (tetszőleges számú) jelölőelemet a gyökér jelölőelembe kell szabályosan beágyazni. - Egy nyitó- és záró jelölőelem között tetszőleges számú további jelölőelemet (vagy szöveges adatot) helyezhetünk el. Az XHTML dokument alapfelépítése a következő: <!DOCTYPE .> <html> <head> <title> </title> </head> <body> . </body> </html> 1.1 kódrészlet Az XHTML dokument alapstruktúrája A jól formázott XHTML dokumentum betartja az összes XHTML szabályt! d. A jelölőelem- és attribútumnevek kisbetűvel írandók. Az XHTML jelölőelem- és attribútumnevek érzékenyek a kis és nagybetűkre.

Minden XHTML jelölőelemet kisbetűvel kell írni! Helyes példa: <b>Leben und leben lassen</b> Helytelen példa: <B>Leben und leben lassen</B> 6 e. Az attribútum értékeket mindig idézőjelelek közzé írandók. A nyitó jelölőelemben az attribútumok értékeit mindig nyitó- és záró idézőjelek között szükséges megadni. Helyes példa: <table width=”50%”> Helytelen példa: <table width=50%> f. Az üres jelölőelemek per jellel (/) lezárandók. Abban az esetben, ha az XHTML jelölőelemhez nem tartozik adat, a nyitó- és záró jelölőelem összevonható úgy, hogy a perjelet a nyitó jelölőjelem végére helyezzük. Az üres karakter (white space) – szóköz megadása a per jel (/) előtt kötelező! Helyes példa: <br /> Helytelen példa: <br> g. Az attribútum-érték párok teljességükben kiírandók. Az XHTML nem támogatja az attribútumok minimalizációját! Helyes példa: <option

selected=”selected”> Helytelen példa: <option selected> h. A name attribútum helyett id attribútum használandó. Az XHTML-ben a name attribútumot lecserélték az id attribútummal! Helyes példa: <img src=”kep.jpg id=”London” /> Helytelen példa: <img src=”kep.jpg name=”London” /> 1.3 Dokumentumtípus definíciók A dokumentumban - gyökér-jelölőelemet megelőzően - DOCTYPE deklarációt kell elhelyezni. A DTD dokumentumtípus definíció (Document Type Definition), olyan XML leírások összessége, amelyek meghatározzák a dokumentumtípus definíciót használó dokumentum érvényes struktúráját. A DTD meghatározza a dokumentum által elérhető jelölőelemeket és attribútumokat. 7 Az XHTML jelölőnyelvnél három típusú DTD-t ismerünk: a. XHTML-10-Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-strictdtd"> 1.2 kódrészlet Az XHTML

-10-Strict DTD Az XHTML-1.0-Strict DTD (szigorú megfelelésű dokumentumok) használata akkor célszerű ha szigorú jelölőnyelv struktúrát használunk és a megjelenítést a stíluslapokra bízzuk a CSS technológia alkalmazásával. Alkalmazása esetében az XHTML dokumentumunk teljes egészében megfelel a szabványnak. b. XHTML 10 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> 1.3 kódrészlet Az XHTML -10- Transitional DTD Az XHTML-1.0- Transitional1 DTD (átmeneti dokumentumok) használata akkor célszerű, ha az XHTML alkalmazása mellet kompatibilitást szeretnénk elérni a meglévő Weboldalakkal és a régebbi típusú böngészőkkel. c. XHTML 10 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-framesetdtd"> 1.4 kódrészlet Az XHTML -10- Frameset DTD Az XHTML-1.0-

Frameset DTD (keretes dokumentumok) használata akkor célszerű ha az XHTML alkalmazása mellet kompatibilitást szeretnénk elérni a HTML keretek alkalmazásával, amelyek a Weblapot keretekre (régiókra) osztják. 1 A könyv további részében az XHTML-1.0- Transitional DTD-t használjuk 8 2. Az XHTML dokumentumok alapszerkezete Egy XHTML dokumentum három szerkezeti egységre bontható: a. Az első rész egy deklarációs rész, amely arról ad információt, hogy a dokumentumunk az XHTML nyelv melyik verziójában íródott: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns=http://www.w3org/1999/XHTML xml:lang="xx" lang="xx"> 2.1 kódrészlet Az XHTML dokument alapstruktúrája A deklarációs rész első sora: <?xml version="1.0"

encoding="UTF-8"?> azt határozza meg, hogy a dokumentumunk egy XML dokument unicode (UTF-8) kódolással. A deklarációs rész második sora: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> 1.0 Transitional//EN" meghatározza, hogy a Weboldalunkon átmeneti DTD-t használunk. A deklarációs rész harmadik sora: <html xmlns=http://www.w3org/1999/XHTML xml:lang="xx" lang="xx"> meghatározza, hogy itt kezdjük a Weboldalunk XHTML részét és megadjuk a névtér deklarációját. Fontos megjegyzés: A deklarációs rész megadása kötelező és nem hagyható ki! A deklarációs rész megadása után, következik az XHTML dokumentum fejléce és a törzse, amely közé zárjuk a teljes dokumentumot. Az XHTML dokumentum a </html> záró jelölőelemmel fejeződik be. b. A második rész egy fejléc jelölőelem: <head> . </head> amely olyan

információkat tartalmaz, amelyek az egész dokumentumra vonatkoznak. A <head> és a </head> fejléc jelölőelem között helyezzük el a dokumentumcímet a: <title> dokumentumcím </title> jelölőelem segítségével, melynek szöveges tartalma a böngésző címsorában jelenik meg (nem a Weblapon!). Példa: <head> <title>My Life</title> </head> 2.2 kódrészlet Fejléc jelölőelem dokumentumcímmel 9 Fontos megjegyzés: Minden XHTML dokumentum tartalmaz <title> jelölőelemet a <head> jelölőelembe beágyazva. c. A harmadik rész a dokumentum törzse: <body> . </body> ide kerül az a tartalom, amelyet meg szeretnénk jeleníteni a böngészőkben (szöveg, kép, hivatkozások, listák stb.) A következő egyszerű példadokumentum tartalmazza a deklarációs részt, valamint a fejléc és törzs jelölőelemet: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>XHTML iskolapélda</title> </head> <body> Ez egy egyszerű XHTML dokumentum. </body> </html> 2.3 kódrészlet Egy egyszerű XHTML feladat kódrészlete A kódblokkunk forrásszövegét mentsük el a iskola-pelda.html nevű állományba (a fájlnévválasztás tetszőleges, a html kiterjesztés kötelező!). Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 2.1 ábrán látható eredményt kapjuk 2.1 ábra A feladat kódrészlet eredménye a böngészőprogramban 10 3. XHTML nyelv attribútumai A nyitó jelölőelemek, a jelölőelem azonosítón kívül, különféle attribútum értéket is tartalmazhatnak: attribútum=”érték” alakban (a záró jelölőelemek nem

tartalmazhatnak attribútumokat)! Az attribútumokkal tovább szabályozhatjuk a körülfogott szöveg formázását. Az XHTML attribútumok listája: accesskey class dir id lang style tabindex title A továbbiakban bemutatjuk az XHTML fontosabb attribútumait. 3.1 class attribútum Az XHTML jelölőelemeknek olyan neveket adhatunk, amelyek bizonyos osztályokhoz kötődnek, így mindezekre az jelölőelemekre rövidített írásmóddal stíluslapokat alkalmazhatunk. A: class=”name” attribútum alkalmazása esetében a name azt az osztálynevet határozza meg, amelyikhez tartozik. 3.2 id attribútum Az id=”name” attribútum alkalmazása estében a name egyedileg meghatározza a jelölőelemet. Az XHTML dokumentumban minden jelölőelem id attribútuma egyedi kell, hogy legyen! 3.3 title attribútum A title=”string” attribútum lehetővé teszi, hogy a Weboldal részeit megcímezzük. A string az a szöveg, amely megjelenik, ha a felhasználó az egérrel rámutat. 3.4 lang

attribútum Az xml: lang=”xx” lang=”xx” attribútum, ahol az xx kétbetűs kód, meghatározza a Weboldalnál használt nyelvet (magyar: hu, angol: en, el görög , fr francia stb.) 11 A következő egyszerű példadokumentum a lang attribútum alkalmazását mutatja be: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="en" lang="en"> <head> <title>XHTML lang attributum példa</title> </head> <body> <p xml:lang=”en” lang="en"> The future is fuzzy</p> </body> </html> 3.1 kódrészlet Az XHTML lang attribútum példa A kódblokkunk forrásszövegét mentsük el a lang-pelda.html nevű állományba Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe,

ekkor a 3.1 ábrán látható eredményt kapjuk 3.1 ábra A kódrészlet eredménye a böngészőprogramban 3.5 style attribútum A style=”string” attribútum helyi jellegű stilúsmeghatározást tesz lehetővé. Az idézőjelbe írjuk be a kívánt stílusformát. Például: style=”color: red, border: solid” A következő egyszerű példadokumentum a style attribútum alkalmazását mutatja be: 12 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="en" lang="en"> <head> <title>XHTML style attribútum pelda</title> </head> <body> <p style="color: green; font-size: 24px; font-family: Times New Roman;"> The future is fuzzy</p> </body> </html> 3.2 kódrészlet A

style attribútum alkalmazása A kódblokkunk forrásszövegét mentsük el a style-pelda.html nevű állományba Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 3.2 ábrán látható eredményt kapjuk 3.2 ábra A kódrészlet eredménye a böngészőprogramban 4. Szövegblokk XHTML formázása A továbbiakban áttekintünk néhány szövegblokk formázó XHTML jelölőelemet. 4.1 p és br jelölőelemek Az XHTML nyelv a <p>szöveg</p> jelölőelemet használja az új bekezdés (paragrafus) létrehozására. Az új bekezdés előtt üres sort hagy. 13 Ha egy bekezdésen belül új sort szeretnénk kezdeni, akkor a: <br /> jelölőelemet használjuk soremelésre. Amikor a böngésző egy <br /> jelölőelemhez ér, akkor az utána következő szöveget új sorban a bal margónál kezdi (4.1 ábra) Megjegyzés: a „br” és a „/” jelek közötti szóköz használata kötelező! Példa: <?xml version="1.0"

encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>p és br jelölőelem példa</title> </head> <body> Minden XHTML dokumentum bekezdésekből áll. <p>Ez egy új bekezdés.</p> Itt pedig sortörés történik<br />amelynek hatására új sorban folytatódik a szöveg. </body> </html> 4.1 kódrészlet A p és br jelölőelem példa A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 4.1 ábrán látható eredményt kapjuk 4.1 ábra A kódrészlet eredménye a böngészőprogramban 14 4.2 hx jelölőelem Az XHTML nyelvben 6 címsor-szint létezik a címek és alcímek jelölésére: <hx>cím</hx> ahol x

egy szám 1 és 6 között, ami a címszintet jelöli. Az első (legfelső) szintű cím jelenik meg legnagyobb, a hatodik szintű cím pedig a legkisebb betűmérettel. A címek megjelenítésekor nincs megadva pontosan a betűtípus és a fontméret, ezért a különböző böngészők másként jelenítik meg azokat (4.2 ábra) A <hx> jelölőelem alkalmazása után üres sor következik Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>hx jelölőelem példa</title> </head> <body> <h1>Főcímsor</h1> <h2>Alcímsor</h2> </body> </html> 4.2 kódrészlet A hx jelölőelem példa Töltsük be a megszerkesztett és elmentett XHTML

fájlt a webböngészőbe, ekkor a 4.2 ábrán látható eredményt kapjuk. 4.2 ábra A kódrészlet eredménye a böngészőprogramban 15 4.3 hr jelölőelem Vízszintes vonalakat a: <hr /> jelölőelem segítségével tudunk létrehozni. A <hr /> jelölőelem egy vízszintes elválasztó vonalat helyez el a Weboldalon, a rendelkezésre álló szélességben. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>hr jelölőelem példa</title> </head> <body> <hr /> <h1>XHTML</h1> <hr /> </body> </html> 4.3 kódrészlet A hx jelölőelem példa A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a

webböngészőbe, ekkor a 4.3 ábrán látható eredményt kapjuk 4.3 ábra A kódrészlet eredménye a böngészőprogramban 16 4.4 pre jelölőelem A <pre>szöveg</pre> jelölőelem segítségével előre formázott szöveget tudunk létrehozni. A szövegblokk ilyenkor pontosan úgy jelenik meg, ahogy azt begépeltük az XHTML dokumentumba (4.4 ábra): Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>pre jelölőelem példa</title> </head> <body> <pre> $i= 2; if ($i<0) { echo "$i kisebb mint a nulla "; } else { echo "$i nagyobb mint a nulla "; } </pre> </body> </html> 4.4 kódrészlet A pre jelölőelem

példa A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 4.4 ábrán látható eredményt kapjuk 4.5 blockquote jelölőelem A <blockquote cite=”URL cím”>idézés</ blockquote> jelölőelem hosszabb idézetek megjelenítésére szolgál. Az URL cím az idézetforrás Web címe 17 4.4 ábra A kódrészlet eredménye a böngészőprogramban 4.6 div jelölőelem A: <div>szöveg</div> jelölőelem segítségével a Weboldalt részekre tudjuk osztani. Ez akkor célszerű, amikor az Weboldalrészekre önálló stílust szeretnénk alkalmazni. A div jelölőelemmel a következő attribútumokat használhatjuk: • Az id=”name” attribútum alkalmazásával a name egyedileg meghatározza a jelölőelemet. • A class=”name” attribútum alkalmazásával a name azt az osztálynevet határozza meg, amelyikhez tartozik a jelölőelem. 4.7 address jelölőelem Az

<address>szöveg</address> jelölőelem segítségével a Weboldal szerzőjének az email címét adjuk meg. Az address jelölőelem általában a Weboldal kezdetén vagy végén található. Példa: <address href=”mailto:webmester@subotica.net”>Webmester</address> 4.5 kódrészlet Az address jelölőelem alkalmazása 18 5. Szöveges dokumentum XHTML sorformázása A XHTML dokumentumokban az információ egyik fő hordozója a szöveg. Szöveges dokumentumok kezelésénél igen fontos feladat a szövegek formázása. A szöveg formázására a CSS stílustechnikát alkalmazzuk, a szöveg alapformázására viszont az XHTML nyelvben számos jelölőelem létezik. A továbbiakban áttekintünk néhány szövegkarakter-formázó XHTML jelölőelemet. 5.1 b, strong, em és i jelölőelemek Félkövér karaktereket a: <b>szöveg</b> általánosnál vastagabb (kiemelt) szöveget: <strong>szöveg</strong> általánosnál jobban

hangsúlyozott szöveget: <em>szöveg</em> dőlt karaktereket pedig az: <i>szöveg </i> jelölőelemek segítségével tudunk létrehozni (5.1 ábra) Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>b, strong, em és i jelölőelem példa</title> </head> <body> <b>Internet</b> <strong>HTTP</strong> <em>Web</em> <i>HTML</i> </body> </html> 5.1 kódrészlet A b, strong, em és i jelölőelem példa 19 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.1 ábrán látható eredményt kapjuk 5.1 ábra A kódrészlet

eredménye a böngészőprogramban 5.2 big és small jelölőelemek A környező szöveghez viszonyítva nagyobb betűformátumot a: <big>szöveg</big> kisebb betűformátumot pedig a: <small>szöveg</small> jelölőelem alkalmazásával hozhatunk létre (5.2 ábra): Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>big és small jelölőelem példa</title> </head> <body> Az XHTML az <big> Internet publikálás és alkalmazásfejlesztés</big> nyelve. A HTML <small> (Hypertext Markup Language) </small> nyelvet eredetileg szövegalapú dokumentumok kezelésére fejlesztették ki. </body> </html> 5.2 kódrészlet A

big és small jelölőelem példa 20 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.2 ábrán látható eredményt kapjuk 5.2 ábra A kódrészlet eredménye a böngészőprogramban 5.3 sub és sup jelölőelemek Alsóindexet a: _{alsó index} felsőindexet pedig a: ^{felső index} jelölőelemek segítségével tudunk létrehozni. Példa (53 ábra): <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>sub és sup jelölőelem példa</title> </head> <body> H₂O x³ </body> </html> 5.3 kódrészlet A sub és sup

jelölőelem példa A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 5.3 ábrán látható eredményt kapjuk 21 ábra Az kódrészlet 5.3 eredménye a böngészőprogramban 5.4 cite, dfn és var jelölőelemek Idézeteket a: <cite>idézet</cite> jelölőelem használatával, definíciókat: <dfn>definíció</dfn> jelölőelemek alkalmazásával hozhatunk létre. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>dfn példa</title> </head> <body> <dfn>Az XHTML (Extensible HyperText Markup Language) egy struktúrában gazdag jelölõnyelv, amely a megjelenítést a stíluslapokra bízza,

moduláris alapokra épül és együttmûködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal.</dfn> </body> </html> 5.4 kódrészlet A dfn jelölőelem példa 22 A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor a 5.4 ábrán látható eredményt kapjuk 5.4 ábra Az kódrészlet eredménye a böngészőprogramban Változónevet pedig a: <var>változónév</var> jelölőelemek alkalmazásával hozhatunk létre. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>var jelölőelem példa</title> </head> <body> <var>$x=2</var> </body>

</html> 5.5 kódrészlet Az var jelölőelem példa 23 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.5 ábrán látható eredményt kapjuk 5.5 ábra A kódrészlet eredménye a böngészőprogramban 5.5 tt, code, kbd, samp jelölőelemek Fixpontos betűket eredményez a: <tt>szöveg</tt> jelölőelem használata, ekkor a szöveg azonos térfoglalású, az írógép kimenetéhez hasonló karakterekkel jelenik meg. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>tt példa</title> </head> <body> <tt> print ("Hello from xHTML"); </tt> </body>

</html> 5.6 kódrészlet A tt jelölőelem példa 24 A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor a 5.6 ábrán látható eredményt kapjuk 5.6 ábra Az kódrészlet eredménye a böngészőprogramban Kódrészleteket: <code>kódrészlet</code> jelölőelemek segítségével tudunk létrehozni. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>code példa</title> </head> <body> <code> $autok []= "Audi"; $autok []= "BMW"; $autok []= "Fiat"; $autok []= "Ford"; $autok []= "Honda"; $autok []= "Toyota"; print $autok[5]; </code>

</body> </html> 5.7 kódrészlet A code jelölőelem példa 25 A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor a 5.7 ábrán látható eredményt kapjuk 5.7 ábra Az kódrészlet eredménye a böngészőprogramban Billentyűfelirat jelzését: <kbd>szöveg</kbd> minták bemutatását pedig: <samp>példa</samp> jelölőelemek segítségével tudunk létrehozni. 5.6 acronym jelölőelem Az: <acronym title=”rövidítés magyarázata”>rövidítés</acronym> jelölőelem egy szóból álló rövidített fogalmak magyarázatára szolgál (5.8 ábra) Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head>

<title>acronym jelölőelem példa</title> </head> <body> <acronym title="United States of America">USA</acronym> </body> </html> 5.8 kódrészlet Az acronym jelölőelem példa 26 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.8 ábrán látható eredményt kapjuk 5.8 ábra A kódrészlet eredménye a böngészőprogramban 5.7 ins, del jelölőelemek Az <ins>beágyazott szöveg</ins> jelölőelem beágyazott szöveg bemutatására szolgál (a beágyazott szöveg aláhúzott). Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>ins jelölőelem

példa</title> </head> <body> <ins>Az XHTML kódrészlet ellenõrzése igen fontos feladat. Az ellenõrzéssel módunkban van betartani a W3C ajánlásait és kiküszöbölni a hibákat az XHTML kódrészletekben.</ins> </body> </html> 5.9 kódrészlet Az ins jelölőelem példa A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.9 ábrán látható eredményt kapjuk 27 5.9 ábra A kódrészlet eredménye a böngészőprogramban Szövegtörlést a: <del>kitörölt szöveg</del> jelölőelem segítségével valósítjuk meg. A kitörölt szöveg áthúzott Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu"

lang="hu"> <head> <title>del jelölőelem példa</title> </head> <body> <del>Jelenleg az xHTML 1.0 verzió fejlesztésénél tartunk</del> </body> </html> 5.10 kódrészlet Az del jelölőelem példa A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 5.10 ábrán látható eredményt kapjuk 5.8 span jelölőelemek A <span>szöveg</span> in-line jelölőelem szerepe az, hogy komplett szövegblokkot magába zárva, a többi szövegtől elkülönített, önálló stílust rendelhessünk hozzá. Attribútumai: style=”string”, class =“name” vagy id=”name”. 28 5.10 ábra A kódrészlet eredménye a böngészőprogramban 6. Hiperhivatkozások Az XHTML dokumentumok egymáshoz csatolásából adódik az XHTML jelölőnyelv hatékonysága. Az XHTML dokumentum részeihez hivatkozásokat (linkeket) helyezhetünk el, amelyeket

aktivizálva, a hivatkozottal összefüggésben lévő szöveghez juthatunk el. A hiperhivatkozások létrehozására az: <a href=”page.html”></a> jelölőelemet használjuk. A pagehtml a hivatkozott Weboldal URL címe A nyitó jelölőelem legfontosabb attribútuma a href (hypertext reference), ami azt a Webcímet azonosítja, ahová a hiperhivatkozás aktivizálása esetében kell elugrania a böngészőnek. Tehát az <a> jelölőelembe írt szövegmezőre rákattintva a href-ben megadott Webcímre kerülünk. A saját Weboldalaink esetében relatív, idegen Weboldalak esetében pedig abszolút URL címeket használunk. Amikor a felhasználó az egérrel rámutat a hivatkozásra a megfelelő URL cím megjelenik, ha pedig rákattint megjelenik a kért Weboldal. Példa – hiperhivatkozás Weboldalra: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Hiperhivatkozás Weboldalra</title> </head> <body> <h1>Hiperhivatkozás Weboldalra</h1> <a href=”Volleyball.html”> 29 Volleyball </a> <!- - A kiindulási- és a hivatkozott dokumentum azonos könyvtárban van.--> </body> </html> 6.1 kódrészlet Hiperhivatkozás Weboldalra Példa – hiperhivatkozás Webcímre: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Hiperhivatkozás Webcímre</title> </head> <body>

<h1> Hiperhivatkozás a W3C Web címére</h1> <a href=”http://www.w3org”> W3C Web site</a> </body> </html> 6.3 kódrészlet Hiperhivatkozás Webcímre A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a böngészőbe és a 6.1 ábrán látható eredményt kapjuk 6.1 ábra A kódrészlet eredménye a böngészőprogramban 30 Ha a felhasználó az egérrel rákattint a hivatkozásra, akkor megjelenik a kért Weboldal: 6.2 ábra Az egérkattintás eredménye a böngészőprogramban A fent bemutatott eljárások a kezdő Weboldalra vezetnek bennünket ( az index.html vagy default.html fájlokra), ha viszont a hivatkozásnak egy másik fájl valamely pontosan meghatározott részére kell mutatnia, akkor hivatkozott Weboldalon ún. horgonyt kell elkészíteni ahová a hivatkozás mutat: <a name=”jelző”></a> ahol a jelző szöveg, amely meghatározza a hivatkozott Weboldalt. Az így

elkészített horgonyra való hivatkozás felírható következőképpen: ™ ha a horgony ugyanabban a dokumentumban található: <a href=”#jelző”></a> ™ ha a horgony az XHTML dokumentummal megegyező könyvtárban található: <a href=”page.html#jelző”></a> ™ ha a horgony egy másik Webcímen található , akkor a teljes URL címet kell felírnunk: <a href=”http://www.sitecom/pagehtml#jelző”></a> 7. Képek beágyazása A képek beágyazására az: <img{src, height, width, border, id} /> jelölőelem szolgál. Több attribútuma is van tehát, például: src=”image.url“ A képfájl helyét (URL-jét) tartalmazza height - Megadja a kép magasságát képpontokban. width - A kép szélességét adja meg képpontokban. border - képkeret vastagságát határozza meg képpontokban. id=”képazonosító“ 31 Ha a képfájl a XHTML dokumentummal megegyező könyvtárban található, akkor csak a fájlnevet kell megadnunk.

Példa: guru.gif Ha a képfájl a XHTML dokumentumhoz képest egy másik könyvtárban található, akkor a fájlnevet egy útvonallal kell kiegészíteni. Példa: images/guru.gif Ha a képfájl egy másik Web címen található, akkor megadjuk a teljes http címet. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Kepek beagyazasa</title> </head> <body> <img src="guru.gif" align="right" border="4" width="84" height="75" id="kep1" /> <img src="guru.gif" align="left" border="2" width="84" height="75" id="kep2" /> </body> </html> 7.1

kódrészlet Képbeágyazási példa A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 7.1 ábrán látható eredményt kapjuk 7.1 ábra A kódrészlet eredménye a böngészőprogramban 32 8. Listák létrehozása Az XHTML nyelvben: ♦ sorszám nélküli, ♦ sorszámozott és ♦ leíró listát használunk, melyek egymásba ágyazhatók, így komplex listák hozhatók létre. A Weboldal tartalma leghatékonyabban listák alkalmazásával valósítható meg. 8.1 Sorszám nélküli listák Akkor használjuk, ha nincs szükség a listasorok számozására. A sorszám nélküli listát (unordered list): <ul></ul> jelölőelem segítségével tudjuk megnyitni. A listaelemet (list item): <li></li> jelölőelem alkalmazásával tudjuk elhelyezni a listában bajusz mögött. Ahány listaelemünk van, annyi <li></li> jelölőelemsort írunk fel. A sorszám nélküli listák

alapértelmezett bajuszos bekezdésjele: • (disc). Sorszám nélküli listapélda kódrészlete (8.1 ábra): <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Sorszámozatlan lista</title> </head> <body> <h1>Sorszámozatlan lista</h1> <ul> <li>Első listasor</li> <li>Második listasor</li> <li>Harmadik listasor</li> </ul> </body> </html> 8.1 kódrészlet Sorszámozatlan lista feladat 33 A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 8.1 ábrán látható eredményt kapjuk 8.1 ábra A kódrészlet eredménye a böngészőprogramban 8.2

Sorszámozott listák Sorszámozott listát akkor használunk ha szükséges a listaelemek számozása. A sorszámozott listát (ordered list): <ol></ol> jelölőelem használatával valósíthatjuk meg. A listaelemeket <li></li> jelölőelemsorokkal tudjuk elhelyezni a listában sorszám mögött. Ebben az esetben is ahány listasorunk van, annyi <li></li> jelölőelemet írunk fel. A sorszámozott listák alapértelmezett bekezdésjele: 1,2,3,. Sorszámozott listapélda kódrészlete: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Sorszámozott lista</title> </head> <body> <h1>Sorszámozott lista</h1> <ol> <li>Első

listasor</li> 34 <li>Második listasor</li> <li>Harmadik listasor</li> </ol> </body> </html> 8.2 kódrészlet Sorszámozott lista A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 8.2 ábrán látható eredményt kapjuk 8.2 ábra A kódrészlet eredménye a böngészőprogramban Az <ol> utasítás 1-től kezdi a listasorok számozását. A sorszámozott lista esetében a kezdő sorszám közvetlenül megadható a: <ol start=”n”> formájú nyitó jelölőelemmel, ahol az ”n” a kezdő sorszám. A stíluslapokban a: list-style-type: marker stílusjelölőelem bevitelével a következő formájú bajusz vagy sorszámjelölést kapjuk meg: MARKER ÉRTÉK: BAJUSZ/SORSZÁMJELÖLÉS marker ="disc" marker =" circle " marker =" square " marker ="decimal" marker ="upper-alpha" marker

="lower-alpha" marker ="upper-roman" marker ="lower-roman" • ○ □ 1, 2, 3, . A, B, C, . a, b, c, . I, II, III, . i, ii, iii, . 8.1 táblázat 35 A stíluslapokban a: list-style-image: url(image.gif) stílusjelölőelem bevitelével kép formájú bajusz vagy sorszámjelölést kapunk (az image.gif képfájlt használja). 8.3 Leíró listák Leíró listát (definition list) akkor használunk ha az egyes lista jelölőelemekhez tartozhat egy hosszabb leírás is. A leíró listát a: <dl></dl> nyitó-és záró jelölőelemek közé kell zárni. A listák egyes kifejezéseit a: <dt></dt> (terms) jelölőelemekben, a kifejezésekhez tartozó leírásokat pedig a: <dd></dd> jelölőelemekben tudjuk elhelyezni. Leíró listapélda kódrészlete (8.3 ábra): <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Leíró lista</title> </head> <body> <h1>Leiró lista</h1> <dl> <dt>Első kifejezés</dt> <dd>Az első kifejezés hosszabb leírása</dd> <dt>Második kifejezés</dt> <dd> A második kifejezés hosszabb leírása</dd> <dt>Harmadik kifejezés</dt> <dd> A harmadik kifejezés hosszabb leírása</dd> </dl> </body> </html> 8.3 kódrészlet Leíró lista feladat 36 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 8.3 ábrán látható eredményt kapjuk 8.3 ábra A kódrészlet eredménye a böngészőprogramban 9. XHTML táblázatok Egy XHTML táblázatot a: <table {align, bgcolor, border,

cellpadding, cellspacing, width}></table> jelölőelemmel hozunk létre. A táblázat egészére érvényes egyes attribútumokat a nyitó jelölőelemben adjuk meg a következőképpen: border=”szám” – keretméret, cellpadding=”szám” – meghatározza az üres hely nagyságát a cellákon belül az adatok körül, cellspacing=”szám” – meghatározza az üres hely nagyságát a cellák között, width=”szám” – táblázatméret, bgcolor=”színkód” – háttérszín. Egy XHTML táblázat táblázatsorokból és cellákból áll. A táblázatsorokat a: <tr></tr> jelölőelemmel hozunk létre és ezek között kell az adott táblázatsor egyes celláit meghatározni. 37 A táblázatcellákat a: <td{colspan, rowspan}></td> jelölőelem segítségével hozunk létre. XHTML táblázatok programtörzse: 1 sor és 2 cella: <body> 2 sor és 2 cella: <body> <table> <table> <tr> <tr>

<td></td> <td></td> <td></td> <td></td> </tr> </tr> </table> <tr> </body> <td></td> <td></td> 9.1 kódrészlet Az egysoros kétoszlopos </tr> táblázat kódrészlete </table> </body> 9.2 kódrészlet A kétsoros kétoszlopos táblázat kódrészlete Példa: egysoros kétoszlopos táblázat <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Egyszerű táblázat</title> </head> <body> <table border="2" align="left"> <tr> <td>Cella 11</td> <td>Cella 12</td> 38 </tr> </table>

</body> </html> 9.3 kódrészlet Az egysoros kétoszlopos táblázat kódrészlete A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 9.1 ábrán látható eredményt kapjuk 9.1 ábra A kódrészlet eredménye a böngészőprogramban Példa: kétsoros háromoszlopos táblázat <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Kétsoros és három oszlopos táblázat</title> </head> <body> <table border="2" align="left"> <tr> <td>Cella 11</td> <td>Cella 12</td> <td>Cella 13</td> </tr> <tr> <td>Cella 21</td> 39

<td>Cella 22</td> <td>Cella 23</td> </tr> </table> </body> </html> 9.4 kódrészlet A kétsoros három oszlopos táblázat A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 9.2 ábrán látható eredményt kapjuk 9.2 ábra A kódrészlet eredménye a böngészőprogramban A táblázatnak a: <caption ></caption> jelölőelemmel címet adhatunk amely a táblázat felett jelenik meg. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Egyszeru tablazat </title> </head> <body> <table border="2" align="left"

cellpadding="10" cellspacing="15"> 40 <caption>XHTML táblázat</caption> <tr> <td>Cella 11</td> <td>Cella 12</td> <td>Cella 13</td> </tr> <tr> <td>Cella 21</td> <td>Cella 22</td> <td>Cella 23</td> </tr> </table> </body> </html> 9.5 kódrészlet A kétsoros háromoszlopos táblázat cím és cella elrendezéssel A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 9.3 ábrán látható eredményt kapjuk 9.3 ábra A kódrészlet eredménye a böngészőprogramban 41 A rowspan és a colspan attribútumok segítségével sorokat és oszlopokat lehet összevonni egy táblázatban: rowspan =”szám” – az összevont sorok száma colspan =”szám” – az összevont oszlopok száma Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Összevont oszlopos táblázat</title> </head> <body> <table border="2" align="left" cellpadding="10" cellspacing="15"> <caption>XHTML táblázat</caption> <tr> <td colspan="2">Cella 11+12</td> <td>Cella 13</td> </tr> <tr> <td>Cella 21</td> <td>Cella 22</td> <td>Cella 23</td> </tr> </table> </body> </html> 9.6 kódrészlet A kétsoros háromoszlopos táblázat, cím és cella elrendezéssel valamint két összevont oszloppal A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 9.4 ábrán látható

eredményt kapjuk A táblázat fejlécének létrehozására a: <thead></thead> jelölőelem szolgál. A fejlécben lévő adatok félkövér karakterekkel íródnak ki 42 A táblázat láblécének létrehozására a: <tfoot></tfoot> jelölőelem szolgál. A láblécben lévő adatok is félkövér karakterekkel íródnak ki A táblázat törzsét: <tbody></tbody> jelölőelemmel hozhatjuk létre (a lábléc után kell megadni). A <colgroup></colgroup> jelölőelem segítségével a táblázat több oszlopát tudjuk egyszerre létrehozni. Az itt megadott attribútumok az összes létrehozott oszlopra érvényesek! A <col></col> jelölőelem segítségével megadhatjuk a táblázat egy oszlopát a <colgroup></ colgroup > jelölőelemen belül. 9.4 ábra A kódrészlet eredménye a böngészőprogramban Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> 43 <head> <title>Összevont soros táblázat</title> </head> <body> <table border="2" align="left" cellpadding="10" cellspacing="15"> <caption>XHTML táblázat</caption> <tr> <td rowspan="2">Cella 11+21</td> <td>Cella 12</td> <td>Cella 13</td> </tr> <tr> <td>Cella 22</td> <td>Cella 23</td> </tr> </table> </body> </html> 9.7 kódrészlet A kétsoros háromoszlopos táblázat, cím és cella elrendezéssel valamint két összevont sorral A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 9.5 ábrán látható

eredményt kapjuk 9.5 ábra A kódrészlet eredménye a böngészőprogramban 44 A <th></th> jelölőelemet használjuk a cella megadására ha azt akarjuk, hogy a cella úgy viselkedjen mintha fejléc lenne. A cella szövege félkövér lesz Példa: <tr><th> Fejléc </th></tr> 9.8 kódrészlet A fejléc kódrészlete Az XHTML táblázatok egymásba ágyazhatók, A cellák tartalmazhatnak szöveget, képet, de akár egy új táblázatot is! Összetett Weblapot megjeleníthetünk táblázatként is. 10. XHTML keretek Az XHTML keretek alkalmazásával a Weblapot részekre (régiókra) oszthatjuk. A régiókban az egy-egy önálló XHTML dokumentum tartalmát jeleníthetjük meg. A keretek alkalmazása akkor célszerű, ha a Weboldal egyes részeinek a tartalma nem változik (így akkor nem kell mindig újra tölteni). A XHTML kereteket az ún. frameset dokumentumban a: <frameset {cols, rows}></frameset > jelölőelem segítségével

adjuk meg. Meghatározza a keretek számát és méretét A <frameset> jelölőelem használata esetében nem használhatunk <body> jelölőelemet! A <frameset> nyitó jelölőelem cols és rows attribútumában az egyes keretek mérete függőleges vagy vízszintes irányban, % -ban vagy pixelben adható meg. A maradék képernyőterületre * karakter használatával lehet hivatkozni. A: <frame /> jelölőelem szolgál a tényleges kerettartalmak megadására. Egy <frameset> jelölőelem annyi <frame /> jelölőelemet tartalmaz, ahány részre osztottuk a Weboldalt. A kerethatároló vonalak egér segítségével elmozdíthatók a böngészőben. Az <iframe {frameborder, height, longdesc, marginheight, marginwidth, name, scrolling. scr, width} ></iframe> jelölőelem Weboldalon belüli keret létrehozását teszi lehetővé. Felhasználható egy XHTML oldal beágyazására egy másik XHTML oldalba. 45 A következő feladat két

vízszintes keretet mutat be. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Vízszintes keretek</title> </head> <frameset rows="25%,75%"> <frame /> <frame /> </frameset> </html> 10.1 kódrészlet Vízszintes keretfeladat A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 10.1 ábrán látható eredményt kapjuk 10.1 ábra A kódrészlet eredménye a böngészőprogramban A következő feladat három függőleges keretet mutat be. 46 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Függőleges keretek</title> </head> <frameset cols="30%,50%,*"> <frame /> <frame /> <frame /> </frameset> </html> 10.2 kódrészlet Függőleges keretfeladat A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 10.2 ábrán látható eredményt kapjuk 10.2 ábra A kódrészlet eredménye a böngészőprogramban A következő példa esetében vegyes keretmegoldást mutatunk be: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu"

lang="hu"> 47 <head> <title>Vegyes keret példa</title> </head> <frameset cols="40%,*"> <frame /> <frameset rows="70%,*"> <frame /> <frame /> </frameset> </frameset> </html> 10.3 kódrészlet Vegyes keretfeladat A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 10.3 ábrán látható eredményt kapjuk 10.3 ábra A kódrészlet eredménye a böngészőprogramban 11. Java-appletek beillesztése az XHTML dokumentumba A Java magasszintű, objektum-orientált, internet-programozási nyelv. A Javában ihatók Javaappletek, amelyek nem önálló Java-programok, mivel az Applet megjelenítéséhez Java-kompatibilis webböngészőt igényelnek. A Java-applet beillesztésére az XHTML dokumentumba a: <object {codetype=”application/java” classid=”java:file.class” width=”szélesség”

height=”magasság”}> </object> jelölőjelölőelemet használjuk. 48 A classid=”java:file.class” attribútummal a lefordított .class kiterjesztésű Java-applet nevét adjuk meg A width=”szélesség” attribútummal a képernyőn megjelenő Applet szélességét adjuk meg képpontokban (pixel). A height=”magasság” attribútummal a képernyőn megjelenő Applet magasságát adjuk meg képpontokban (pixel). A nyitó és záró object jelölőelem közé a: <param {name=”paraméter” value=”érték”} /> jelölőelem segítségével megfelelő számú paramétert helyezhetünk el. A Java-applet futtatásához, az Applet meghívására a szövegszerkesztővel szerkesztenünk kell tehát egy megfelelő XHTML-dokumentumot (11.1 ábra) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd">

<html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Udvozlet2</title> </head> <body> <object codetype=”application/java” classid=”java:udvozlet2.class” width=”300” height=”200”></object> </body> </html> 11.1 kódrészlet Java-applet XHTML dokumentum Mentsük el a megszerkesztett XHTML-dokumentumot tetszőleges néven .html kiterjesztéssel ugyanabba a könyvtárba ahol a Java-applet is található. Töltsük be a megszerkesztett XHTML fájlt a Java-kompatibilis webböngészőbe (vagy a Java Applet Viewer-be), ekkor az Applet végrehajtódik (11.1 ábra) Amikor a webdokumentum szolgáltatója megírja a Java-appletet, a megfelelő XHTML dokumentumba hivatkozást helyez el az Appletre, majd a Java-appletet és a XHTML dokumentumot a szerveren helyezi el. Ha egy internetfelhasználó webböngészője segítségével letölti az XHTML dokumentumot, akkor

az Applet végrehajtódik. Fontos megjegyzés: Egy Java-applet csak a webböngészővel együttműködve tud lefutni! 49 11.1 ábra Az Applet megjelenése a böngészőprogramban 12. XHTML űrlapok Az űrlapok (szövegablakok, adat- és jelszóbeviteli mezők, gombok, választógomb csoportok) az XHTML dokumentumban a párbeszédet teszik lehetővé. Feldolgozásukhoz külön programot kell használni (például PHP programokat). 12.1 Űrlapkészítés Minden űrlap jelölőelem a: <form{action, enctype, method=”post”}>Űrlaptartalom</form> jelölőelem között kell, hogy elhelyezkedjen amely a kitöltendő űrlap tartalmát jelöli ki. A tartalmat az action attribútumban megadott szkript program dolgozza fel: action=”script.url” ahol a script.url a PHP szkript elérési útvonala A form jelölőelem action paramétere arra a PHP fájlra mutat, amely feldolgozza az űrlapon megadott adatokat. Ha az action attribútum csak a fájlnak a nevét adja meg, akkor

az XHTML és a PHP programot tartalmazó fájloknak egy könyvtárban kell lenniük. A: method=”POST” attribútum meghatározza a kitöltött űrlap továbbítási módját a feldolgozó szkript program felé. Lehetséges értékei: 50 ♦ GET – az URL-ben, ♦POST – adatcsomagban (biztonságosabb mód) továbbítja az adatokat. Ha nem tartjuk célszerűnek, hogy az űrlap adatait egy szkript program dolgozza fel, akkor választhatjuk azt a megoldást, hogy a felhasználó által kitöltött adatokat elektronikus postával továbbítjuk. Ekkor a küldendő szöveg formattálására felhasználjuk a következő attribútumot: enctype=”text/plain” Az action attribútumban pedig megadjuk az e-mail címet ahová az adatokat továbbítjuk: action=”mailto:e-mail cím” 12.2 Adatbeviteli mezők Az adatbeviteli mezőket az: <input {accept, accesskey, align, alt, checked, disabled, ismap, maxlength, name, onblur, onchange, onfocus, onselect, readonly, size, scr, tabindex,

type, type="button“, type="checkbox“, type="file“, type="hidden“, type="image“, type="password“, type="radio“, type="reset“, type="submit“, type="text“, usemap, value} /> jelölőelemmel hozhatjuk létre. A name attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt adatot. A type attribútum határozza meg a beviteli mező adattípusát. Lehetséges adattípusok: 1. Nyomógomb: type=”button” 2. Kapcsoló (több is kiválasztható egyszerre): type=”checkbox” A checkbox típusú mező esetében a: checked=”checked” attribútum alkalmazásával alapértelmezésként bekapcsoljuk a kapcsolót. 3. Csatolandó fájl: type=”file” 4. Rejtett adattípus (bevitelkor nem jelenik meg): type=”hidden” 5. Kép: type=”image” 6. Jelszó (bevitelkor nem jelenik meg): type=”password” 7. Rádiókapcsoló (egyszer csak egyet lehet kiválasztani):

type=”radio” 51 A radio típusú mező esetében a: checked=”checked” attribútum alkalmazásával alapértelmezésként bekapcsoljuk a rádiókapcsolót. 8. Inicializáló gomb: type=”reset” A reset gomb lenyomása alapértékkel tölti fel az adatbeviteli mezőket. 9. Adattovábbító gomb: type=”submit” A submit gomb lenyomásának hatására küldjük el az űrlapok adatait a feldolgozó szkript (PHP) programnak. A submit és a reset gombokhoz tartozó: value=”felirat” attribútum alkalmazásával a gombok feliratát határozzuk meg . 10. Szöveg: type=”text” A text és password adattípusú beviteli mező esetén a beviteli ablak szélességét a: size=”méret” az ablakba bevihető maximális szöveghossz pedig a: maxlenght=”érték” attribútumokkal határozzuk meg. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Jelszó megadás</title> </head> <body> <form> Jelszó megadás: <input type="password"> </form> </body> </html> 12.1 kódrészlet A jelszó megadása 52 A kódblokkunk forrásszövegét mentsük el. Töltsük be az XHTML fájlt a webböngészőbe, ekkor az 12.1 ábrán látható eredményt kapjuk 12.1 ábra A kódrészlet eredménye a böngészőprogramban A: value=”szöveg” attribútum alkalmazásával a „szöveg” adatot veszi fel alapértelmezés-ként a szöveges beviteli mező. A: <textarea {cols, name, rows}>szöveg</textarea> jelölőelemmel hozhatjuk létre a többsoros szövegbeviteli mezőt. A name attribútum értéke a mezőnév. A: rows=”érték” és cols=”érték” attribútumok a

megnyíló beviteli ablak sorainak számát és szélességét adják meg. A: value=”szöveg” attribútum alkalmazásával az alapértelmezésként megjelenítendő szöveg adható. Ha a felhasználónak egy lista készletből szeretnénk választási lehetőséget adni akkor ezt a: <select {multiple, name, size} >szöveg</select> jelölőelem alkalmazásával tudjuk megtenni. A <select> nyitó jelölőelem jelzi a lista kezdetét, alapbeállításban egy legördülő menüt eredményez. A: name=”név” attribútum értéke a mezőnév, amely alapján a feldolgozó szkript program azonosítja a bevitt listakészlet nevét. 53 A: size=”sorok” attribútum meghatározza, hogy hány sorban jelenjenek meg a választható listajelölőelemek. Megadásával szkrollozható menüt kapunk (alapértelmezés szerint legördülőt). A <select> listába az <option>szöveg</option> jelölőelem segítségével tudunk listajelölőelemeket elhelyezni.

Egyszerre több listajelölőelem kijelölésére a: multiple=”multiple” attribútumot használjuk. Példa: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Legördülő menü</title> </head> <body> <form> Halasbolt:<br /><br /> <select> <option>csuka</option> <option>harcsa</option> <option>ponty</option> <option>keszeg</option> </select> </form> </body> </html> 12.2 kódrészlet A legördülő menű kódrészlete 54 A kódblokkunk forrásszövegét mentsük el. Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor az 12.2 ábrán látható eredményt kapjuk

12.2 ábra A kódrészlet eredménye a böngészőprogramban Egyszerű gombot a: <button {name, type, value} >. </button> jelölőelem segítségével tudunk létrehozni. A gombhoz szkripteket rendelhetünk, melyek gombnyomással aktiválódnak. Az információk csoportosítására a: <fieldset>szövegblokk</fieldset> jelölőelemet használjuk, mely jelölőelem közötti szövegblokkot a böngésző (a többi szövegtől elkülönítve) bekeretezve jeleníti meg. A: <legend{align}>címkeszöveg</legend> jelölőelem alkalmazásával a keret bal felső szélén címkeszöveget is írhatunk. A mezők a: <label {for}>felirat</label> jelölőelemmel feliratozhatók. Példa: 55 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/XHTML1/DTD/XHTML1-transitionaldtd"> <html

xmlns="http://www.w3org/1999/XHTML" xml:lang="hu" lang="hu"> <head> <title>Űrlap kitöltés</title> </head> <body> <form> <fieldset> <legend>Személyi adatok</legend><br /> <label>Vezetéknév</label> <input type="text" name="vezeteknev" /><br /><br /> <label>Keresztnev</label> <input type="text" name="keresztnev" /><br /><br /> <label>Születési dátum</label> <input type="text" name="szuletesidatum" /> </fieldset> </form> </body> </html> 12.3 kódrészlet Űrlapkitöltés 12.3 ábra A kódrészlet eredménye a böngészőprogramban 56 13. XHTML szkriptek 13.1 Alapfogalmak, beágyazott és külső szkriptek Szkripteknek azokat a kis programokat nevezzük, amelyek a XHTML oldalakkal együtt, vagy azokba ágyazva töltődnek le

a kliens számítógépére. Tehát a szkriptek lehetnek: • beágyazottak az XHTML programba, vagy • külső szkriptek. A szkripteket a böngészőprogramok futtatják. Az XHTML dokumentum fejlécében a: <script type=”text/language-name”>Script-tartalom</script> elemet használjuk a beágyazott szkript kód elhelyezésére. A script elem segítségével futatni tudjuk a JavaScript, JScript és VBScript programokat. A language-name meghatározza a szkript nyelvet, amelyet alkalmazunk. Külső szkriptek használata esetében: <script type=”text/language-name” src=”script.url” charset=”code”>Szkripttartalom</script> a szkript meghívására a következő attribútumot használjuk: src=”script.url” ahol a script.url a külső szkript elérési útvonalát határozza meg A charset=”code” attribútum segítségével a külső szkript jelölőkészletét határozhatjuk meg ha a code helyébe a külső szkript jelölőkészletének a

nevét írjuk be. Példa: <script type=”text/javascript” src=”http://subotica.net/prog”>JavaScript-tartalom</script> A fenti példa esetében JavaScript-tet használunk, amelynek az elérési útvonala: http://subotica.net/prog Nem minden böngésző támogatja a szkriptek használatát. Azok számára, akik ilyen böngészőt használnak, alternatív megoldást nyújt a <nonscript>Szöveges megjegyzés</nonscript> elem. A nonscript elem nyitó- és záró jelölőeleme közé tehát szöveges megjegyzést tehetünk Ez a szöveg akkor jelenik meg, ha a böngésző nem tudja futtatni a szkriptet. Futtatásuk szempontjából a szkripteket feloszthatjuk: 57 a. Automatikusan futtató szkriptek – ezek akkor aktiválódnak, ha a böngésző beolvassa őket A felhasználó ezekre a szkriptekre nem tud kihatni. b. Eseményszkriptek – akkor aktiválódnak, ha a felhasználó aktiválja őket 13.2 Eseményszkriptek Az XHTML dokumentumokban a következő

eseményeket (events) használhatjuk: onload - aktiválódik, ha a böngésző beolvassa a Web oldalt, a body elemmel használható. onunload - aktiválódik, ha a böngésző kitörli a Web oldalt, a body elemmel használható. onclick - aktiválódik, ha a felhasználó rákattint a Web oldal elemére. ondblclick - aktiválódik, ha a felhasználó kétszer rákattint a Web oldal elemére. onmousedown - aktiválódik, ha a felhasználó rámutat az XHTML elemre. onmouseup - aktiválódik, ha a felhasználó rámutatva az XHTML elemre, elengedi az egér gombját. onmouseover - aktiválódik, ha a felhasználó rámutat a Web oldal elemére. onmouseout - aktiválódik, ha a felhasználó az egérkurzorral elhagyja a Web oldal elemét. onmousemove - aktiválódik, ha a felhasználó az egérkurzorral elmozdul a Web oldal elemén. onselect - aktiválódik, ha a felhasználó kiválaszt valamilyen szöveget a Web oldalon. onfocus - aktiválódik, ha a felhasználó kiválaszt valamilyen

elemet a Web oldalon. onblur – aktiválódik, ha a felhasználó elhagyja az előzőleg “fókuszált” elemet. onkeypress - aktiválódik, ha a felhasználó beír valamilyen jelet a Web oldal űrlapjára. onkeydown - aktiválódik, mielőtt a felhasználó felengedi a gombot. onkeyup - aktiválódik, amikor a felhasználó a beírás után felengedi a gombot. onsubmit - aktiválódik, ha a felhasználó megnyomja az űrlap gombját. onreset - aktiválódik, ha a felhasználó megsemmisíti az űrlapot. onchange - aktiválódik, ha a felhasználó megváltoztatja az űrlapon az értéket. 14. XHTML kódrészletek ellenőrzése Az XHTML kódrészlet ellenőrzése igen fontos feladat. Az ellenőrzéssel módunkban van betartani a W3C ajánlásait és kiküszöbölni a hibákat az XHTML kódrészletekben. 58 Az ellenőrzéshez a W3C Weboldalán található oldalakat használhatjuk, webcíme: http://validator.w3org vagy valamilyen ellenőrzési programot, mint pl. a: CSE HTML

Validator Lite v 3.50 amelynek webcíme: http://www.htmlvalidatorcom A W3C ellenőrzési oldala olyan formot tartalmaz, ahová beírhatjuk az oldalunk URL-jét. Az ellenőrző program az állományunkban megadott DTD-t fogja használni. Ha kitöltöttük a formot a weboldalunk ellenőrzése megtörténik. Az ellenőrzés eredménye lehet: ™ hibákat tartalmazó, vagy ™ érvényes, a W3C ajánlásainak megfelelő oldal. A következő ellenőrzési példánál bemutatjuk a CSE HTML Validator Lite v 3.50 ellenőrző program használatát. A kitűzött cél egy XHTML táblázat kódrészletének az ellenőrzése A 141-es kódrészlet bemutatja az ellenőrzött XHTML dokumentumot (az ellenőrzést a F6-os gombbal indítottuk el). 14.1 kódrészlet Ellenőrzött hibás XHTML dokumentum Az elvégzett ellenőrzés után világosan leolvashatók a hibajelzések! A hibák kijavítása és az újabb ellenőrzés után már látható, hogy az XHTML dokumentumunk megfelel a W3C ajánlásainak

(14.2es kódrészlet)! 59 14.2 kódrészlet Ellenőrzött, a W3C ajánlásainak megfelelő XHTML dokumentum 14.3 ábra Az ellenőrzött és kijavított kódrészlet eredménye a böngészőprogramban 60 CSS technológia 1. Bevezetés A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet- lépcsőzetes stíluslapok) specifikációt. A CSS technológia alkalmazásának alapvető célja: • bevezetni a stíluslapok (Style Sheet) alkalmazását az XHTML dokumentum formázási utasításai helyet, • szétválasztani az XHTML dokumentum tartalmi részét a megjelenítési stílusjelölőelemektől. Az XHTML tehát a dokumentum megjelenítését a stíluslapokra bízza. A stíluslapok segítségével az XHTML dokumentum szerzője a Web oldal minden megjelenésbeli jellemzőjét beállíthatja az igényeknek megfelelően. A kaszkád (Cascading) elnevezés arra utal, hogy egy Web dokumentum megjelenítése több stíluslap együttes hatásának

eredménye. A CSS specifikációnak több verziója létezik. A mai böngészők kezelni tudják az első két verziót (CSS1 és CSS2). A W3C jelenleg a harmadik verzió fejlesztésén dolgozik (CSS3) 2. Stíluslapok felépítése 2.1 Alapfogalmak A stíluslap a stílusinformációt önálló stílusdefiníciók sorozataként adja meg. A stílusdefiníció struktúrája két részből áll: 1. Tételnév, amely meghatározza, hogy a stílusinformáció melyik jelölőelemekre vonatkozik A tételnév lehet egy XHTML jelölőelem neve (ez esetben az jelölőelem nevét nem tesszük kisebbnagyobb jelek közé!), vagy egy globális osztálynév. 2. Deklarációs blokk, amelyben pontosvesszőkkel elválasztva stílusdeklarációk szerepelnek A deklarációs blokkot kapcsos nyitó- és csukó zárójelek közé zárjuk. 61 Minden stílusdeklaráció szintaktikailag négy részből áll (2.1 ábra): ™ ™ ™ ™ az attribútum nevéből, kettőspontból, az attribútum adott

értékéből és pontosvesszőből: tételnév{ attribútum: érték; } 2.1 ábra A stílusdefiníció struktúrája Egy egyszerű stíluslapstruktúra példát az 2.1 kódrészlet mutat be: h1 { color: red; } 2.1 kódrészlet Egyszerű stíluslapstruktúra példa A 2.1 kódrészletben bemutatott stíluslap egy stílusdeklarácíót tartalmaz, amely a h1 jelölőelemre vonatkozik és azt írja elő, hogy a hatókörébe található összes h1 jelölőelem szövegblokkja piros színnel jelenjen meg. A fenti példa esetében: h1 – a tételnév, { color: red; } a deklarációs blokk, color: az attribútum neve kettősponttal, red; az attribútum értéke pontosvesszővel. A 2.2 kódrészletben bemutatott stíluslap két stílusdeklarácíót tartalmaz, amely a h1 jelölőelemre vonatkozik és azt írja elő, hogy a hatókörébe található összes h1 jelölőelem szövegblokkja 12 pontos betűvel és piros színnel jelenjen meg. Ez esetben az attribútumok nevét és értékeit

felsorolás közben pontosvesszővel választjuk el egymástól: h1 { font-size: 12px; color: red; } 2.2 kódrészlet Két stílusdeklarációt tartalmazó példa 62 Megjegyzés: Az utolsó attribútum érték után nem kötelező kiírni a pontosvesszőt. Ha szükséges több jelölőelemre ugyanazt a deklarációs blokkot alkalmazni, akkor a tételnév helyén több jelölőelem nevét (csoportmegadás) is megadhatjuk (2.3 kódrészlet) Ez esetben a tételneveket felsorolás közben vesszővel választjuk el egymástól: h1, h2, h3 { font-size: 12px; color:red; } 2.3 kódrészlet Három jelölőelemre vonatkozó stílusdeklaráció A 2.3 kódrészlet annyiban különbözik az 22 kódrészlettől, hogy a deklarációs blokk a h1 jelölőelem mellett még a h2 és h3 jelölőelemekre is vonatkozik. A CSS-XHTML közötti kapcsolatot megoldhatjuk: ™ Beépített stíluslapokkal. ™ Csatolt stíluslapokkal. ™ Jelölőelembe rendelt stíluslappal. ™ Importált stíluslap

segítségével. A következő fejezetekben csak az első két CSS-XHTML kapcsolat megvalósítását tárgyaljuk. 2.2 Beépített stíluslapok A beépített stíluslapokat az XHTML dokumentum fejrészében a: < style type = ”text/css” > stílusdefiníciók </ style > jelölőelem segítségével definiáljuk. A type attribútum a stíluslapra történő hivatkozás formáját adja meg (text/css). A következő egyszerű példa két beépített stílusdefiníciót tartalmaz amelyek a font típusára, színére nagyságára és a h1 és h2 jelölőelemekre vonatkozik. Az első stílusdefiníció a h1 jelölőelemre vonatkozik és előírja, hogy az összes h1 jelölőelem szövegblokkja Ariel típusú, piros színű és 18 pontos nagyságú betűvel jelenjen meg. A második stílusdefiníció a h2 jelölőelemre vonatkozik és előírja, hogy az összes h2 jelölőelem szövegblokkja Verdana típusú, fekete színű és 12 pontos nagyságú betűvel jelenjen meg. 63

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Beépített stíluslap példa</title> <style type="text/css"> h1 { font-family: Arial; color: #ff0000; font-size: 18px; } h2 { font-family: Verdana; color: #000000; font-size:12px; } </style> </head> <body> <h1>Intelligence everywhere</h1> <h2>The future is Fuzzy</h2> </body> </html> 2.4 kódrészlet Beépített stíluslap példa A kódblokkunk forrásszövegét mentsük el a beepitettstiluslappelda.html nevű állományba Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 2.2 ábrán látható eredményt kapjuk 2.2 ábra A feladat eredménye a

böngészőprogramban 64 2.3 Csatolt stíluslapok A beépített stíluslapok alkalmazása több Web dokumentum esetében két okból nem célszerű: ™ minden Web dokumentumhoz külön-külön le kell tölteni a stílusdefinicíókat (időigényes és hálózatterhelő), ™ A stílusdefiníció megváltoztatása megköveteli a változtatást külön-külön minden Web dokumentumban. A csatolt (külső) stíluslapok használata ideális arra az esetre, ha a Web dokumentjainknál ugyanazt a stílus szeretnénk alkalmazni. Ez esetben a külső stíluslapot mint szövegállományt (Text Only, Text Document vagy ASCII) megszerkesztjük majd egy .css kiterjesztéssel tároljuk Az így elkészített (külső) stíluslapra a fejléc jelölőelemébe hivatkozunk a következő módon: <link type="text/css" rel="stylesheet" href="url.css" /> ahol a href=”url.css” a ccs állomány (relatív) elérési útvonala Célszerű az XHTML dokumentumot és a

.css fájlt ugyanabban a könyvtárban elhelyezni! A következő példa esetében csatolt stíluslapot alkalmazunk a 2.3 ábrákon látható példánál (a font típusára, színére és nagyságára vonatkozik alkalmazva a h1 és h2 jelölőelemekre). A külső stíluslapot mint szövegállományt megszerkesztjük majd stiluslap.css néven tároljuk: h1 { font-family: Arial; color: #ff0000; font-size: 36px; } h2 { font-family: Verdana; color: #000000; font-size:18px; } 2.5 kódrészlet A stiluslapcss szövegállománya Az így elkészített külső stíluslapra az XHTML dokumentum fejléc jelölőelemébe hivatkozunk a következő módon: <link type="text/css" rel="stylesheet" href="stiluslap.css" /> 65 ahol a href=”stiluslap.css” a ccs állomány (relatív) elérési útvonala Példánknál az XHTML dokumentumot és a stiluslap.css fájlt ugyanabban a könyvtárban helyeztük el! Az XHTML dokumentum kódrészlete a következő:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Csatolt stíluslap példa</title> <link type="text/css" rel="stylesheet" href="stiluslap.css" /> </head> <body> <h1>Intelligence everywhere</h1> <h2>The future is Fuzzy</h2> </body> </html> 2.6 kódrészlet Az XHTML dokumentum A kódblokkunk forrásszövegét mentsük el a csatoltstiluslap.html nevű állományba Töltsük be a megszerkesztet XHTML fájlt az IE 6.0 böngészőprogramba, ekkor a 23 ábrán látható eredményt kapjuk. 2.3 ábra Az XHTML kódrészlet eredménye a böngészőprogramban 66 Ha pedig a csatolt stíluslapnál a h1 és h2

jelölőelemekre ugyanazt a stílust szeretnénk alkalmazni, akkor a stíluslap új szövegállománya a következő: h1, h2 { font-family: Arial; color: #ff0000; font-size: 18px; } 2.7 kódrészlet A stiluslapcss új szövegállománya Így a csoportmegadásos csatolt stíluslap (2.4 ábra) eredménye az IE 60 böngészőprogramban a következő: 2.4 ábra Az új stíluslap eredménye a böngészőprogramban 3. Stílus osztályok A CSS technológia lehetővé teszi a stílusosztályok létrehozását. A stílusosztályokat az XHTML dokumentum fejrészének style jelölőelemében adhatjuk meg. Az így megadott stílusdefiníció az összes olyan szövegblokkra vonatkozik, amelynél a nyitó jelölőelem tartalmazza a megadott stílusosztály nevét. Szövegmegjelenítéskor a nyitó jelölőelem CLASS attribútumában hivatkozhatunk a stíluslapon definiált osztályra. Létrehozhatunk osztályokat, amelyek az utód osztályok alapjául szolgálnak. Ezt nevezzük

öröklődésnek, amely lehetővé teszi, hogy az osztályokból (ősosztályok) új osztályokat származtassunk (utód osztályok). A utód osztályok öröklik és kiterjeszthetik az ősosztály tulajdonságait, kivéve, ha felülírjuk őket. Például ha a body jelölőelemet kékre állítjuk, akkor, mivel a b jelölőelem a body-n belül van, a b jelölőelem kék színben és félkövéren jelenik meg. 67 3.1 Stílusosztályok létrehozása egy adott tételnéven belül Egy adott tételnéven belül számtalan stílusdefinicíót hozhatunk létre, melyeket egy-egy osztályazonosítóval különítünk el egymástól. Például a 3.1 kódrészleten látható stílusdefiníció hatóköre csak a news osztályhoz tartozó h1 jelölőelemekre vonatkozik. h1.news { color: red; } 3.1 kódrészlet A news osztályhoz tartozó h1 jelölőelemekre vonatkozó stílusdeklaráció 3.2 Beépített stílusosztályok létrehozása Egy beépített osztály esetén a stílusdefinicíó

elején csak az osztálynevet adjuk meg. Ez esetben a stílusdefinicíó az összes olyan szövegblokkra vonatkozik, amelynél a nyitó jelölőelem tartalmazza az adott osztálynevet. Tehát a 32 kódrészleten látható stílusdefinicíó hatóköre minden news osztályhoz tartozó jelölőelemre vonatkozik. .news{ color: red; } 3.2 kódrészlet A news osztályhoz tartozó stílusdeklaráció A stílusosztályok alkalmazását bemutatjuk a következő példa esetében: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Beépitett stílusosztály példa</title> <style type="text/css"> .nagy { font-size: 36px; } </style> 68 </head> <body> Intelligence

everywhere<br /><br /> <span class = "nagy">The future is Fuzzy</span> </body> </html> 3.3 kódrészlet A stílusosztály feladat kódblokkja Létrehoztuk tehát a következő stílusosztályt: .nagy { font-size: 36px; } 3.4 kódrészlet A nagy osztályhoz tartozó stílusdefinicíó A fejrészbe beépített osztály esetén a stílusdefinicíó elején csak a .nagy osztálynevet adtuk meg Szövegmegjelenítéskor a span nyitó jelölőelem CLASS attribútumában hivatkoztunk a stíluslapon definiált .nagy osztályra A példánknál tehát a nagy osztály csak a span jelölőelem által közrefogott szöveg (The future is Fuzzy) betűnagyságát állítja be 36 pontra. A kódblokkunk forrásszövegét mentsük el a stilusosztaly.html nevű állományba Töltsük be a megszerkesztett XHTML fájlt a webböngészőbe, ekkor a 3.1 ábrán látható eredményt kapjuk 3.1 ábra A stílusosztály feladat eredménye a böngészőprogramban Az

XHTML dokumentumok stílusdefiníciója több osztályt is tartalmazhat, amelyeket egymásba ágyazhatunk. Két osztály alkalmazását szemléletesen bemutatjuk a következő példa esetében: 69 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>Beágyazott stílusosztály példa</title> <style type="text/css"> .nagy { font-size: 36px; } .szin { color: green; } </style> </head> <body> <span class = "szin">Intelligence everywhere</span> <span class = "nagy">The <span class = "szin">future</span> is Fuzzy</span> </body> </html> 3.5 kódrészlet A beágyazott stílusosztály feladat

kódblokkja A .nagy osztály után létrehoztuk a szin stílusosztályt is, amely zöld szövegszínt állít be A weblap body részében a .szin osztályt alkalmazzuk az „Intelligence everywhere” szöveg megjelenítésére, valamint beágyaztuk a .nagy osztályba a future szöveg zöld színű megjelenítése céljából A kódblokkunk forrásszövegét mentsük el a beagyazottosztaly.html nevű állományba Töltsük be a megszerkesztet XHTML fájlt a webböngészőbe, ekkor a 3.2 ábrán látható eredményt kapjuk 3.2 ábra A beágyazott stílusosztály feladat eredménye a böngészőprogramban 70 Az előző példához viszonyítva, most az „Intelligence everywhere” és a „future” szöveg zöld színben jelenik meg! Mivel a .szin osztály a nagy osztályba van ágyazva, örökli a nagy osztály összes beállításait (font-size: 36px). A szin osztály csak azokat a betűtípus-jellemzőket változtatja meg, amelyeket maga a .szin osztály ad meg (color:green)

4. Szövegformázás stíluslapokkal Az XHTML dokumentumban az információ egyik fő hordozója a szöveg. A szöveg formázása igen fontos feladat és e célra a stíluslapokat használjuk. A továbbiakban röviden bemutatjuk a karakter formázás CSS technológiáját. 4.1 Karakter formázás Betűtípusok kiválasztása A különféle betűtípusok felhasználásával széleskörű lehetőségeink vannak a megjelenítendő szöveg formázására. A betűtípusok kiválasztásánál a stílusdeklaráció általános alakja: {font-family:”name”} ahol a ”name”egy vagy több kiválasztott betűtípus neve. A font-family attribútummal tehát egy jelölőelem betűkészletét adhatjuk meg. Példák: body { font-family: ”Arial”, ”Times New Roman”,”sans-serif”; } 4.1 kódrészlet Betűtípusok kiválasztása h1, h2, h3 { font-family: ”Verdana”, ”Courier”,”sans-serif”; } 4.2 kódrészlet Betűtípusok kiválasztása Célszerű tehát több betűtípust

kiválasztani mivel nem biztos, hogy minden böngésző rendelkezik a fontkészletünkkel. A font-family öröklődik. Dőltbetűs betűformátum Dőltbetűs betűformátumot eredményez a következő stílusdeklaráció: 71 {font-style : italic} vagy {font-style: oblique} Példa: p{ font-style: italic; } 4.3 kódrészlet Dőltbetűs betűformátum A dőltbetűs formátumot a következő stílusdeklarációval változtathatjuk meg: {font-style: normal} A font-style öröklődik. Betűvastagság A betűvastagságot a következő stílusdeklaráció alkalmazásával határozzuk meg: {font-weight: value} ahol a value lehetséges értékei: value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 A fenti értékek esetében: normal = 400 bold = 700 Példa: p{ font-weight: lighter; } 4.4 kódrészlet Betűvastagság megadása A félkövér – bold - betűformátumot a következő stílusdeklarációval változtathatjuk meg: {font-weight: normal} A

font-weight öröklődik. Betűméret A betűméretet (betűnagyság) a következő stílusdeklaráció alkalmazásával határozzuk meg: {font-size: value} ahol a value lehetséges értékei: 72 value: absolute-size | relative-size | length | percentage absolute-size (abszolút-méret): xx-small | x-small | small | medium | large | x-large | xx-large | Példa: p{ font-size: xx-large; } 4.5 kódrészlet Abszolút-betűméret relative-size (relatív-méret): larger | smaller Példa: p{ font-size: larger; } 4.6 kódrészlet Relatív-betűméret length: Length centimeters ems inches millimeters picas pixels points rövidítés Cm em in mm pc px pt 4.1 táblázat Példa: p{ font-size: 16pt; } 4.7 kódrészlet Pontokban megadott betűméret percentage (százalékérték): a kiválasztott százalékkal növeli vagy csökkenti a betűnagyságot. Példa: p{ font-size: 80%; } 4.8 kódrészlet Százalékértékkel megadott betűméret A font-size öröklődik. Kiskapitális

forma A kiskapitális formát (kisbetűs méretű nagybetűk) a következő stílusdeklaráció alkalmazásával határozzuk meg: {font-variant: value} 73 ahol a value lehetséges értékei: value: normal | small-caps Példa: h2 { font-variant: small-caps; } 4.9 kódrészlet Kiskapitális forma A kiskapitális formátumot a következő stílusdeklarációval változtathatjuk meg: p{font-variant: normal} A font-variant öröklődik. 4.2 Szövegformázás Sorköz A sorok közötti távolságot a következő stílusdeklaráció alkalmazásával határozzuk meg: {line-height: value} ahol a value lehetséges értékei: value: normal | number | length | percentage A normal érték változatlanul hagyja a sorok közötti távolságot. A megadott számot (number) a betűméret szorzószámaként alkalmazzuk. A lenght a sormagasság abszolút értékét jelenti A százalékérték (percentage) a betűméretre vonatkozik. Példák: { line-height: 1.2 } /* number / 4.10 kódrészlet number

sorköz állítás { line-height: 1.2em } /* length / 4.11 kódrészlet length sorköz állítás { line-height: 150% } /* percentage / 4.12 kódrészlet percentage sorköz állítás A line-height öröklődik. Szóköz A szóközt a következő stílusdeklaráció alkalmazásával határozzuk meg: {word-spacing: value} 74 ahol a value lehetséges értékei: value: normal |length Értéke lehet negatív is, ez esetben csökethetjük a szavak közti távolságot. Példa (em – az m betű szélessége): h1 { word-spacing: 1em; } 4.13 kódrészlet Szóközbeállítás A word-spacing öröklődik. Betűköz A betűközt a következő stílusdeklaráció alkalmazásával határozzuk meg: {letter-spacing: value} ahol a value lehetséges értékei: value: normal |length Példa: BLOCKQUOTE { letter-spacing: 0.1em; } 4.14 kódrészlet Betűköz beállítás A letter-spacing öröklődik. Szövegdíszítés A szöveg kiegészítő díszítését határozza meg,

stílusdeklarációja: {text-decoration: value} ahol a value lehetséges értékei: value: none | [ underline || overline || line-through || blink ] none – semmi, underline – aláhúzott, overline – felülhúzott, line-through – áthúzott, blink – villogó. 75 Példa: {text-decoration: overline} 4.15 kódrészlet Szövegdíszítés Vízszintes szövegblokk igazítás A szövegblokk vízszintes igazítását a következő stílusdeklaráció alkalmazásával határozzuk meg: {text-align: value} ahol a value lehetséges értékei: value: left | right | center | justify left – balra igazított bekezdés, right – jobbra igazított bekezdés, center – középre igazított bekezdés, justify – szövegblokk sorkiegyenlített elrendezése. Példa: p{ text-align: center; } 4.16 kódrészlet Középre igazított bekezdés A text-align öröklődik. A bekezdések első sorának behúzása A bekezdések első sorának behúzását a bal margótól a következő

stílusdeklaráció alkalmazásával határozzuk meg: {text-indent: value} ahol a value lehetséges értékei: value: length | percentage Példa: p{ text-indent: 2em; } 4.17 kódrészlet A bekezdések első sorának behúzása a bal margótól A text-indent öröklődik. 76 Kisbetű-nagybetű csere Átalakítja a szöveg kis- és nagybetűit. A kisbetű-nagybetű cserét a következő stílusdeklaráció alkalmazásával határozzuk meg: {text-transform: value} ahol a value lehetséges értékei: value: capitalize | uppercase | lowercase | none capitalize – minden szó első betűjét nagybetűvel írja ki, uppercase – minden betűt nagybetűre cserél, lowercase – minden betűt kisbetűre cserél, none – semmi (megmaradnak az eredeti betűméretek). Példa: h1 { text-transform: uppercase; } 4.18 kódrészlet A kisbetű-nagybetű csere A text-transform öröklődik. 5. Előtérszín-háttérszín 5.1 Előtérszín Az előtérszínt (szövegszín) a következő

stílusdeklaráció alkalmazásával határozzuk meg: {color: value} ahol a value lehetséges értékei megadhatók: ™ Névvel - colorname - 16 szabványos színnévvel a következő táblázat szerint: Színnevek és hexadecimális/RGB értékek táblázata aqua #00ffff rgb(0,255,255) gray #808080 rgb(128,128,128) silver #c0c0c0 rgb(192,192,192) navy #000080 rgb(0,0,128) black #000000 rgb(0,0,0) green #008000 rgb(0,128,0) teal #008080 rgb(0,128,128) olive #808000 rgb(128,128,0) blue #0000ff rgb(0,0,255) lime #00ff00 rgb(0,255,0) white #FFFFFF rgb(255,255,255) purple #800080 rgb(128,0,128) fuchsia #ff00ff rgb(255,0,255) maroon #800000 rgb(128,0,0) yellow #ffff00 rgb(255,255,0) red #ff0000 rgb(255,0,0) 4.2 táblázat 77 Példa: p{ color: navy; } 5.1 kódrészlet Előtérszín beállítás szabványos színnévvel ™ Hex értékkel - #rrggbb - hexadecimálisan, ahol az rrggbb a szín hexadecimális kódja a fenti táblázat szerint. Példa: p{ color: #000080; }

5.2 kódrészlet Előtérszín beállítás Hex értékkel ™ rgb értékkel - rgb(r,g,b) - ún. rgb színekkel a fenti táblázat szerint Példa: p{ color: rgb(0,0,128); } 5.3 kódrészlet Előtérszín beállítás rgb színekkel Az alapértelmezett előtérszín: fekete (black). A color attribútum tehát egy jelölőelem szövegszínét állítja be! A color öröklődik. 5.2 Háttérszín Ez az attribútum egy jelölőelem háttérszínét állítja be (nem pedig az egész oldalt). A háttérszín beállítást következő stílusdeklaráció alkalmazásával határozzuk meg: {background-color: value} ahol a value lehetséges értékei megadhatók: ™ color - 16 szabványos színnévvel vagy hexadecimális módon a fenti táblázat szerint. Példák: pre { background-color: red; } 5.4 kódrészlet Háttérszín beállítás szabványos színnévvel 78 pre { background-color: #ff0000; } 5.5 kódrészlet Háttérszín beállítás Hex értékkel ™ transparent –

átlátszó (látszik a mögötte lévő szöveg színe). Példa: pre { background-color: transparent; } 5.6 kódrészlet Átlátszó háttérszín beállítás 5.3 Háttérszínmegadás képpel Ha a háttérszínt képpel adjuk meg stílusdeklarációja: {background-image: url(image.gif)} Ez az attribútum egy jelölőelem (nem a teljes oldal) háttérképét állítja be. Példa: p{ background-image: url(marble.gif); } 5.7 kódrészlet Háttérszín beállítás képpel ™ A kép megadása esetén az url után beírhatók a következő ún. utótagok: repeat – a képet vízszintesen és függőlegesen ismételve jeleníti meg, Példa: pre { background-image: url(marble.gif); background-repeat: repeat; } 5.8 kódrészlet repeat háttérszín beállítás képpel repeat-x – a képet csak vízszintesen ismételve jeleníti meg, Példa: body { background-image: url(marble.gif); background-repeat: repeat-x; } 5.9 kódrészlet repeat-x háttérszín beállítás képpel 79

repeat-y – a képet csak függőlegesen ismételve jeleníti meg, Példa: body { background-image: url(marble.gif); background-repeat: repeat-y; } 5.10 kódrészlet repeat-y háttérszín beállítás képpel no-repeat – csak egyszer jeleníti meg a képet. Példa: pre { background-image: url(marble.gif); background-repeat: no-repeat; } 5.11 kódrészlet no-repeat háttérszín beállítás képpel 5.4 Háttérfüggelék A háttérfüggelék (háttérkép) stílusdeklarációja: {background – attachment: value} ahol a value lehetséges értékei: value: scroll | fixed A scroll vagy fixed utótag meghatározza, hogy ha van beállított háttérfüggelék (háttérkép), az fixen marad-e vagy a tartalommal együtt gördíthető. Példa: body { background-image: url(marble.gif); background-repeat: repeat; background- attachment: scroll; } 5.12 kódrészlet scroll háttérfüggelék beállítás pre { background-image: url(marble.gif); background-repeat: repeat; background-

attachment: fixed; } 5.13 kódrészlet fixed háttérfüggelék beállítás Megjegyzés: A szövegformázást rendszerint egy stílusdeklarácíóval oldjuk meg. 80 XHTML és CSS átfogó feladat Jegyzettömb segítségével készítse a mellékelt Weblapot XHTML és CSS technológiák alkalmazásával. 1.1 ábra Feladatmegadás A Weblap tartalmazzon: ™ XHTML-1.0- Transitional DTD-t, ™ csatolt stíluslapot, ™ 3 stílusosztályt és ™ 4 kapcsolatot. Mutassa be a böngészőben a feladatok XHTML és CSS forráskódjait, valamint a Weblapot. Megoldások: A feladat XHTML kódblokkja: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> <html xmlns="http://www.w3org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title>XHTML és CSS</title> <meta

http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link type="text/css" rel="stylesheet" href="stillap.css" /> 81 </head> <body> <h1>XHTML és CSS technológiák</h1> <img src="DUF.jpg" border="2" width="50" height="50" /> <table width="90%" border="0" align="left"> <tr> <td width="200" align="left"> <a href="XHTML.html"><b>XHTML</b></a><br /><br /> <a href="CSS.html"><b>CSS</b></a><br /><br /><br /> <a href="http://www.dufhu">Dunaújvárosi Főiskola</a><br /><br /> <a href="http://www.gmesterwebcom/e-tananyag"> e-tananyag</a><br /> </td> <td align="left"> <p><span

class="szoveg1">Az XHTML (Extensible HyperText Markup Language) egy struktúrában gazdag jelölőnyelv, amely a megjelenítést a stíluslapokra bizza, moduláris alapokra épül és együttműködik az XML (Extensible Markup Language) alapú felhasználói alkalmazásokkal. Az XHTML jelölőnyelv megjelenése és alkalmazása az internet fejlődésének egy fontos lépcsőfokát jelenti. A továbbiakban az XHTML 1.0 SE (második kiadás) verziójával foglalkozunk (XHTML 10 ajánlás: 2000 január 26; felülvizsgálva: 2002. augusztus 1)</span></p> <p><span class="szoveg2">A W3C (World Wide Web Consortium) hozta létre a CSS (Cascading Style Sheet- lépcsőzetes stíluslapok) specifikációt. A CSS technológia alkalmazásának alapvető célja: bevezetni a stíluslapok (Style Sheet) alkalmazását az XHTML dokumentum formázási utasításai helyet, és szétválasztani az XHTML dokumentum tartalmi részét a megjelenítési

stílusjelölőelemektől.</span></p> </td> </tr> </table> </body> </html> 1.1 kódrészlet A feladat XHTML kódblokkja A feladat CSS forráskódja: h1 { font-family: Verdana; color:#ff0000; font-size: 30; } .szoveg1{ 82 font-family: Arial; color:#800000; font-size: 16; } .szoveg2{ font-family: Arial; color:#008000; font-size: 16; } 1.2 kódrészlet A feladat stillapcss szövegállománya 1.2 ábra Ellenőrzött, a W3C ajánlásainak megfelelő XHTML dokumentum 83 PHP nyelv 1. Alapfogalmak A PHP szerveroldali internet-programozási, nyílt forráskódú, platformfüggetlen szkript nyelv, a dinamikus, interaktív weboldalak létrehozásának egyik legegyszerűbb és leghatékonyabb eszköze. A PHP rövidítés a Hypertext Preprocessor elnevezésből ered. A PHP forrásprogram elkészített forráskódját először

interpreter segítségével értelmezzük és a programfutás alatt lefordítjuk a számítógép gépi kódjára. A World Wide Web gyors fejlődése és elterjedése következtében a PHP első változatát Personal Home Page Tools néven Rasmus Lerdorf készítette 1994-ben. A könyv írásának a pillanatában az ajánlott PHP verzió: 4.36 A PHP webes programozási nyelv, alkalmazásával az adatbázisok kezelése igen egyszerű. A PHP programok jól hordozhatóak és biztonságosak. Együttműködnek különböző szerverekkel, operációs rendszerekkel és adatbázis kezelőkkel. A PHP tehát: ¾ szerveroldali beágyazott nyelv ¾ ingyenes ¾ keresztplatformos és ¾ széleskörben elterjedt. A PHP egyik legelterjedtebb alkalmazása az Apach webszerverből és a MySQL adatbázisrendszerből álló PHP-Apache-MySQL együttes (PHP Triad‡). A PHP Triad‡ webcíme: http://www.sourceforgenet/projects/phptriad/ ahonnan a PHP-Apache-MySQL együttes (phptriad2-2-1.exe)

ingyenesen letölthető Komolyabb munka szempontjából viszont célszerűbb a PHP értelmezőt, az Apache webkiszolgálót és a és MySQL adatbáziskezelő programot külön – külön telepíteni! 84 A PHP szerveroldali beágyazott nyelv. A PHP programok a szerveren futnak le oly módon, hogy a megfelelő kiterjesztésű állományt a PHP értelmező: – átfésüli, – értelmezi, – azokat megfelelő módon végrehajtja, és – a kimeneteket beilleszti a HTML-oldalba. A felhasználó csak a programunk által generált tartalmat látja, és nem magát a PHP programot. A szerveroldali programozás (Server-Side Scripting) esetében a szerveroldali szkriptek a Web szerveren futnak le és dinamikus HTML oldalakat hoznak létre. A szerveroldali programozás előnye könnyen megérthető a következő példából: ™ Célkitűzés: az aktuális dátum leolvasása a Web lapról. Statikus HTML oldalon minden nap be kell írni az aktuális dátumot. A PHP technológia lehetővé

teszi egy szkript megírását amely a beolvasott Web űrlapon megjeleníti az aktuális dátumot. Mielőtt a felhasználó beolvassa a Web lapot, a szerver lefutatja a szkriptet és így a beolvasott Web lapon mindig az aktuális dátum jelenik meg. A szerveroldali programozás több szempontból is előnyös a Web fejlesztő számára: 1. A szerveroldali szkriptek fejlesztése teljesen független a felhasználó által alkalmazott böngészőtől. Így a szerveroldali szkripteket olyan programnyelvben is fejleszthetjük amelyet a felhasználó böngészője nem támogat. 2. A szerveroldali szkriptek forrásnyelvi változata nem olvasható a felhasználó böngészőjében Ez a tény igen fontos a forrásnyelvi változat védettsége szempontjából (biztosítja a PHP programfejlesztő szerzői jogait.) 3. A letöltendő HTML dokumentum mérete csökken (mivel a böngészőben csak a szerveroldali szkriptek végrehajtási eredménye látszik). Így a Web oldal beolvasása is gyorsabb

4. Egy szerveroldali komponens alkalmazásával leolvashatjuk a felhasználó gép operációs rendszerét és böngészőprogramját, így a szerveroldalról leküldött HTML dokumentum a kliens gép környezetére alakítható. 5. A PHP program az adatbázis szerverről adatbázist használhat fel a megjelenítendő Web lap feldolgozására. A PHP nyelv alkalmazásának legfontosabb lehetőségei: ™ hatékony fájlkezelés, ™ változók rugalmas használata, ™ a tömbök rugalmas használata, 85 ™ reguláris kifejezések használata, ™ képek készítése és manipulációja, ™ adatbázisrendszerek igen széles körének használhatósága. A ZDNet (www.zdnetcom) sebességteszt eredményei a programnyelvek alkalmazása szempontjából az egy másodperc alatt előállított oldalak számát tekintve: ™ PHP 47 oldal ™ ASP 43 oldal ™ Allaire (Macromedia) Coldfusion 29 oldal ™ SUN Java JSP 13 oldal 2. A PHP programfejlesztés eszközei A PHP programok

elkészítése szempontjából a következő eszközökre lesz szükségünk: a. PHP-értelmező Először be kell szereznünk, telepítenünk és beállítanunk az operációs rendszerünkhöz megfelelő PHP-értelmezőt. A PHP hivatalos webhelye: http://www.phpnet ahonnan ingyenesen letölthető. b. Szövegszerkesztő A PHP forrásprogram megszerkesztésére szolgál. Megfelel bármilyen egyszerű szövegszerkesztő, amely formázás nélküli ASCII-szöveget állít elő (általában minden operációs rendszerben megtalálható), például a Jegyzettömb (Notepad). A PHP forrásprogram fájlainak kiterjesztése: .php Kényelmesebb munka szempontjából célszerűbb a HTML-kit használata, webcíme: http: //www.chamicom/html-kit) vagy a ConText ingyenes kódszerkesztőket alkalmazni amelyek rendelkeznek kódszínezéssel és kifejezés-szerkesztővel. A PHP programfejlesztés leghatásosabb eszköze a: Macromedia Dreamweaver MX 2004 használata, webcíme: http: //www.macromediacom

86 c. Webböngésző A Webböngésző a PHP programok kimenetének a kliens számítógépen való megjelenítésére szolgál. Célszerű alkalmazni a széleskörűen használt webböngészőket mint például a: • Opera • Mozilla • Microsoft Internet Explorer • Netscape Navigator. d. Webkiszolgáló Az Apache webkiszolgáló a legnépszerűbb nyílt forráskódú és platformfüggetlen webkiszolgáló. Az Apache program ingyenesen letölthető az Internetről az Apache cég Web címéről: http://www.apacheorg Ha az Apache webkiszolgálót a saját számítógépünkre telepítjük, akkor is a számítógépünk IP címe: 127.001 neve pedig: localhost lesz. Tehát, ha a böngészőnkkel az Apache webkiszolgáló gyökérkönyvtárában lévő program 01.php fájlt szeretnénk megnyitni, akkor a fájlt következő címen érhetjük el: http://localhost/program 01.php e. Adatbáziskezelő Számos adatbáziskezelő program közvetlenül alkalmazható a PHP-vel.

Legelterjedtebb adatbáziskezelő program a nyílt forráskódú, gyors és egyszerűen kezelhető: MySQL A MySQL adatbázisrendszer webcíme: http://www.mysqlcom ahonnan a MySQL adatbáziskezelőprogram ingyenesen letölthető. A webalapú: phpMyAdmin felület nagy segítséget nyújt az adatbáziskezelésnél, webcíme: http://www.phpmyadminnet Ingyenes szolgáltatók PHP programok futtatására: http://www.freewebhu http://www.ultrawebhu http://www.free-php-hostingcom http://www.free-phpcjbnet 87 3. Programkészítés a PHP fejlesztői környezetben Ha a számítógépünkön rendelkezünk megfelelő szövegszerkesztővel amely ASCII-szövegként ment, pl. Jegyzettömb és helyesen telepített PHP fejlesztői környezettel, akkor bemutathatunk három egyszerű PHP programot. A továbbiakban feltételezzük, az Apache webkiszolgálót a saját számítógépünkre telepítettük. 3.1 Első PHP programunk Egy egyszerű PHP program előállítása a következő lépésekből áll:

1. Hívjuk be a Jegyzettömböt, nyissunk meg a szerkesztőben egy új állományt és gépeljük be példaként a következő PHP forráskód szövegét. 1: 2: 3: <?php print("Hello from PHP"); ?> 3.1 PHP szkript Az első PHP programunk forráskódja A fenti példából látható, hogy a PHP program nyitóeleme: <?php, záróeleme pedig: ?>. A nyitóés záróelemek közzé írjuk be a PHP program utasításait Az utasítás végén kötelező az “;“ utasításvégjel A programunkban csak egy utasítást használtunk a: print (“Hello from PHP”); függvényt, amely egy karakterláncot ír ki a képernyőre. Gépelés közben ügyeljünk arra, hogy a PHP különbséget tesz a kis- és nagybetűk között! A forrásszöveget mentsük el az Apache szerver gyökérkönyvtárában (pl. c://apache/htdocs) hello név alatt php kiterjesztéssel 2. A http://127001/hellophp webcím begépelésével töltsük be a megszerkesztet PHP fájlt a webböngészőbe,

ekkor a PHP program a webkiszolgálón végrehajtódik és a következő ábrán a program kimenetét láthatjuk a web-böngészőben 3.1 ábra A 31 PHP szkript kimenete a webböngészőben 88 3.2 HTML oldal PHP programmal A PHP kód beépítése egy HTML oldalba egyszerűen a PHP kódblokk beírásából áll az HTML elemek közé. Egy HTML dokumentumba tetszőleges számú PHP kódblokk írható A következő példában, amely HTML és PHP kódot tartalmaz egy oldalon, bemutatjuk az aktuális dátum leolvasását a Web lapról: 1. Hívjuk be a Jegyzettömböt, nyissunk meg a szerkesztőben egy új állományt és gépeljük be a következő HTML és PHP forráskód szövegét. 1: <html> 2: <head> 3: <title>PHP datumkezeles</title> 4: </head> 5: <body> 6: A mai dátum: 7: <?php 8: print (Date("F d, Y")); 9: ?> 10: </body> 11: </html> 3.2 PHP szkript A HTML/PHP program forráskódja A PHP kódblokkban felhasznált

Date() függvény a dátumot formázott karakterlánc formájában adja vissza. A forrásszöveget mentsük el az (aktív) Apache szerver gyökérkönyvtárában datumphp néven. 2. A http://127001/datumphp webcím begépelésével töltsük be a megszerkesztet PHP fájlt a webböngészőbe. Mielőtt a felhasználó beolvassa a Web lapot, a szerver lefutatja a szkriptet és így a beolvasott Web lapon mindig az aktuális dátum jelenik meg: 3.2 ábra Az aktuális dátum megjelenítése 89 3.3 Adatfeldolgozás A következő példánál a HTML és PHP kódot külön állományban tároljuk: 1. Hívjuk be a Jegyzettömböt, nyissunk meg a szerkesztőben egy új állományt és gépeljük be egy egyszerű HTML űrlap forráskódjának a szövegét. 1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: <html> <head> <title>xHTML ûrlap</title> </head> <body> <form action="pingvin.php" method="POST"> <input type="text"

name="tetszolegesnev" /> <input type="submit" value="rendben" /> </form> </body> </html> 3.3 PHP szkript Az xHTML űrlap forráskódja Egy HTML űrlapot hoztunk létre, amely egy „tetszolegesnev” szövegmezőt és egy gombot tartalmaz. A form jelölőelem action attribútuma a pingvinphp fájlra mutat, amely feldolgozza az űrlapon megadott adatot (a HTML és PHP fájloknak most egy könyvtárban kell lenniük!). A forrásszöveget mentsük el az (aktív) Apache szerver gyökérkönyvtárában html urlap.html néven 2. Írjuk meg a következő pingvin.php nevű PHP programot, amely kiírja a felhasználó által megadott adatot: 1: 2: 3: <?php print „Üdvözöljük $ POST[tetszolegesnev]"; ?> 3.4 PHP szkript A pingvinphp program forráskódja A $ POST azt a változót tartalmazza, amelyet a szkript a POST eljárás révén kapott meg. A $ POST[tetszolegesnev] változó az űrlap „tetszolegesnev” nevű

mezőjéből nyeri értékét. A pingvin.php fájlban lévő kódot akkor hívjuk meg amikor a felhasználó kitölti a html urlaphtml űrlapját. A program a $ POST[tetszolegesnev] változó értékét írja ki A változók nevét mindig egy dollárjellel „$” kell bevezetni, a PHP erről ismeri fel a változót! 3. A http://127.001/ html urlaphtml webcím begépelésével töltsük be a megszerkesztet HTML fájlt a webböngészőbe. A szövegmezőt töltsük ki “Katalin” névvel és nyomjuk meg a “rendben“ gombot. 90 3.3 ábra A HTML űrlap szövegmezőjének kitöltése 4. Ekkor meghívódik a pingvinphp nevű program a szerveren, amely a felhasználó böngészőjében kiírja az üdvözlőszöveget. 3.4 ábra Az üdvözlet megjelenítése Fontos megjegyzés: A HTML űrlap action attribútumának a pingvin.php értéke és a php program pingvin.php neve megegyező kell hogy legyen! A fenti példából látható, hogy a PHP programok alkalmazásával milyen

egyszerűen kezelhetőek a HTML űrlapok. 4. A PHP nyelv alkotóelemei 4.1 PHP operátorok A PHP-ben az operátoroknak több típusa is létezik, amelyekkel alakíthatjuk az adatokat. 91 Aritmetikai operátorok A PHP-ben használható aritmetikai operátorok a következők: PHP operátor A művelet jelentése + Összeadás - kivonás * szorzás / % osztás maradékképzés Példa Eredmény $x=3 $x+5 $x=4 6-$x $x=2 4*x 20/4 8 7%3 1 2 8 5 Relációs operátorok A PHP-ben használható relációs (összehasonlító) operátorok a következők: A művelet jelentése PHP operátor Példa érték egyenlő == 6==7 hamis érték nem egyenlő != 6!=7 igaz érték és típus egyenlő === === kisebb < 6<7 igaz nagyobb > 7>6 igaz kisebb vagy egyenlő <= 6<=7 igaz nagyobb vagy egyenlő >= 6>=7 hamis A PHP-ben használható a (.) karakterlánc összefűző operátor is Példa: “Auto” . ”mobil” kifejezés értéke:

“Automobil” Értékadó operátorok A PHP-ben használható értékadó operátorok a következők: PHP operátor A művelet jelentése Példa Ezzel egyenértékű = értékadás $x=$y $x=$y += összeadás és értékadás $x+=$y $x=$x+$y -= kivonás és értékadás $x- = $x=$x-$y *= szorzás és értékadás $x*=$y $x=$x*$y /= osztás és értékadás $x/=$y $x=$x/$y %= egész osztás és értékadás $x%=$y $x=$x%$y .= konkatenálás $x.=” szöveg” $x=$x.” szöveg” 92 Fontos megjegyezni, hogy mi a különbség az = és az == között. Az elsővel értéket rendelünk valamihez, a másodikkal pedig értékeket hasonlítunk össze Logikai operátorok A PHP-ben használható logikai operátorok a következők: PHP operátor A művelet jelentése A művelet jelentése ! negáció and logikai és művelet Igaz a bal és a jobb oldal is && logikai és művelet Igaz a bal és a jobb oldal is or logikai vagy művelet

Vagy a jobb vagy a bal oldal igaz || logikai vagy művelet Vagy a jobb vagy a bal oldal igaz xor logikai kizáró vagy Vagy a jobb igaz, vagy a bal, de nem mind a kettő Az egyetlen operandus sem igaz 4.2 A műveletek kiértékelési sorrendje A műveletek elsőbbségét csökkenő sorrendben a következő táblázatban mutatjuk be: ! ++ -- (típus-átalakítás) / * % + - . < <= => > === === != !== && || = += -= /= %= .= and xor or 4.3 Konstansok A PHP-ben a konstansokat: define() függvénnyel deklaráljuk. A konstansok használatával azt érjük el, hogy a program futása során az adott név alatt tárolt érték nem változik. A konstans nevét mint karakterláncot és a tárolt értéket vesszővel elválasztva a zárójelbe nagybetűvel írjuk és nem tartalmaz dollárjelet. Példa: define (Pi , 3.14159); 93 4.4 Változók A PHP program az adatokat (számokat, karakterláncokat, objektumokat, tömböket és logikai értékeket) változókban

tárolja. Minden változónak van neve és adattípusa A változó deklarálásához egy dollárjel $ és egy tetszőlegesen választott név szükséges. A név betűket, számokat és aláhúzás karaktereket tartalmazhat, számmal azonban nem kezdődhet. Amikor a változót létrehozzuk rendszerint értéket is adunk a változónak. Példák: $x; $y=10; $z=”Karakterlánc”; Példák helyes és helytelen változónevekre: Helyes: $első = 10; $reakció idő = 0.8; Helytelen: $1első = 10; (számmal nem kezdődhet) $reakció idő = 0.8; (szóközt nem tartalmazhat) A változók nevénél a kis- és nagybetűk nem egyenértékűek! Példa három különböző változóra: – $átló – $Átló – $ÁTLÓ Az inkrementáló (növelő) operátor a változó értékét növeli meg eggyel: $a++; Hasonlóképpen működik csökkentésre: $a--; formában. Ezeket az operátorokat leginkább ciklusokban használjuk gyakran valamely változó értékének léptetésére. A következő

példában, a $szoveg változóhoz, a „Hello from PHP” karakterláncot rendeljük: 1: <html> 2: <head> 3: <title>PHP változó</title> 4: </head> 5: <body> 94 6: <?php 7: $szoveg=„Hello from PHP”; 8: print $szoveg; 9: ?> 9: </body> 10: </html> 4.1 PHP szkript A PHP változó A kódblokkunk forrásszövegét (4.1 PHP szkript) mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: Hello from PHP 4.5 Adattípusok A PHP-ben 6 adattípussal rendelkezünk. A PHP automatikusan felismeri a változók adattípusát Egy változó az értékadáskor különféle számadattípust vehet fel: Integer (egész típusú), Double (lebegőpontos). Feltölthetjük szöveges adattal: String (karakterlánc, karakterek sorozata), logikai adattal: Boolen (csak True vagy False

logikai értéket vehet fel), hozzárendelhetünk objektumot is: Object és tömböt: Array. A PHP programban a változó típusának a meghatározására a gettype() függvényt használjuk. Ha a gettype() függvény meghívásánál zárójelei köze a változót tesszük, egy karakterlánccal tér vissza, amely a változó típusát eredményezi. 4.6 Megjegyzések a PHP programokban 4.61 Egysoros megjegyzések Az egysoros megjegyzéseket (komment) két perjellel (//) vagy egy kettős kereszt karakterrel kezdjük (#), ezek jelzi a PHP-értelmezőnek, hogy ami a sorban a két perjel vagy a kettős kereszt karakterrel karakter után van, azt hagyja figyelmen kívül a sor végéig. Például: //kirajzolás #kirajzolás 95 4.62 Többsoros megjegyzések A többsoros megjegyzéseket a /* és / jelek közzé tesszük. Például: /* A PHP-ben írt programok kódsorokból épülnek fel, amelyeket utasításoknak hívunk. */ 5. Vezérlőszerkezetek A PHP nyelv vezérlőszerkezetei a

következők: ™ Feltételes utasítások: if struktúra, if.else struktúra, if.else ifelse struktúra ™ Elágazások – switch struktúra ™ Ciklusszerkezetek: for while do . while 5.1 Feltételes utasítások Változók és számok értékének összehasonlítására szolgál. Alkalmazásával webhelyünk rugalmasan reagálhat a felhasználó által bevitt adatokra. Az if struktúra A PHP programban a feltételes if - utasítás az azt követő utasítás végrehajtását vezérli. Az if struktúra alakja a következő: if (feltétel) { [utasítás] //ha a feltétel értéke igaz, az utasítás végrehajtódik } 96 A feltétel rendszerint egy összehasonlítás, amelynek van numerikus értéke. A PHP ezeket az értékeket True vagy False értékként értelmezi. Ha a feltétel eredménye True, akkor az utasítás végrehajtódik. Ha a feltétel False - hamis, akkor az utasítás nem hajtódik végre Példa feltételes if- utasításra: <?php $i= -1; if ($i<0) { print

"$i kisebb mint a nulla "; } ?> 5.1 PHP szkript if utasítás A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: -1 kisebb mint a nulla Ha a $i értékét 0 vagy pozitív számra változtatjuk és úgy futatjuk a szkriptet, akkor az if utasításban lévő feltétel False értéket ad és a PHP árugorja a kódblokkunkat (nem kapunk programfuttatási eredményt!). if.else struktúra Ha azt szeretnénk, hogy a Fals esetben egy másik utasítás hajtódjon végre akkor az if - else elágazást alkalmazzuk: if (feltétel) { [utasítás] //ha a feltétel értéke igaz, az utasítás végrehajtódik } else { //ha a feltétel értéke hamis, ez az utasítás hajtódik végre [utasítás] } 97 Példa feltételes if – else elágazásra: <?php $i= 2; if ($i<0)

{ print "$i kisebb mint a nulla "; } else { print "$i nagyobb mint a nulla "; } ?> 5.2 PHP szkript if – else elágazás A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: 2 nagyobb mint a nulla Tehát a fenti példaprogram esetében az else utáni utasítás hajtódik végre! A következő példa (a feltételes if- else utasításra) leolvassa az aktuális dátumot és a leolvasási eredménytől függően két különböző üdvözletet ír ki: <?php $d= date("D"); if ($d=="Fri") { print "Kellemes hétvégét! "; } else { print "Jó napot!"; } ?> 5.3 PHP szkript if – else elágazás – újabb példa A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük

be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn (pl. szerdai napon) a következő eredményt kapjuk: Have a nice day! Ha pedig a programot pénteken futatjuk a kiírási eredmény: Have a nice weekend 98 if.else ifelse struktúra A PHP lehetőséget biztosít, hogy egymás után több feltételt is kiértékeljünk. A feltételes if – else if – else utasítások (döntések) alakja a következő: if (első feltétel) { [utasítás] //ha a feltétel értéke igaz, ez az utasítás végrehajtódik } else if (második feltétel) { [utasítás] //ha a második feltétel igaz, és az előző feltétel hamis, ez az utasítás hajtódik végre } else { [utasítás] //ez az utasítás akkor kerül végrehajtásra, ha egyik feltétel sem volt igaz } Tehát, ha az első feltétel értéke igaz, akkor a hozzá tartozó utasítás végrehajtódik. Ha az első feltétel értéke hamis, akkor a hozzá tartozó

utasítás nem kerül végrehajtásra és a PHP megvizsgálja az else if (második) feltételt. Ha a második feltétel igaz, akkor a hozzá tartozó utasítás végrehajtódik Ha egyik feltétel sem igaz, akkor az else utáni utasítás kerül végrehajtásra. Programunkban több else if utasítást is használhatunk. Példa feltételes if – elseif – else elágazásra: <?php $i=0; if ($i<0) { print "$i kisebb mint a nulla "; } else if ($i>0) { print "$i nagyobb mint a nulla "; } else { print "$i egyenlo nullaval "; } ?> 5.4 PHP szkript if – elseif – else elágazás 99 A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: 0 egyenlo nullaval A fenti példaprogram esetében is az else utáni utasítás hajtódik végre. 5.2

Elágazások – switch utasítás A switch struktúra az if else blokkal egyező szolgáltatást nyújt, de hatékonyabb és áttekinthetőbb módon. Alkalmazásával könnyen megoldhatjuk a PHP programunk többirányú elágazását A switch utasítás általános alakja: switch (tesztkifejezés) { case érték1: [utasítás 1] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték 1. break; case érték2: [utasítás 2] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke érték 2. break; . default: [utasítás n] //ez az utasítás végrehajtódik, ha a tesztkifejezés értéke egyik felsorolt értékkel sem egyezett meg. break; } A switch struktúra egy tesztkifejezéssel dolgozik, amelyet a struktúra elején kiértékel. A kiértékelés eredményét összehasonlítja a case struktúra tesztlistájával (amely egynél több elemet is tartalmazhat) és az egyezőségtől függően végrehajtja a megfelelő case-hez tartozó utasítást. Ha a

tesztkifejezés értéke egyik előző értékkel sem egyezik meg akkor a default címke utáni utasítás hajtódik végre. A break utasítás hatására a program futása a switch blokk utáni részre kerül Fontos megjegyzés: A case utasítások utáni kódrészletből a break utasítást nem szabad kihagyni, mert ez esetben a PHP program futtatása mindig a következő case utasítással folytatódna (így más eredményt kapnánk)! 100 Példa a switch utasítás alkalmazására: <?php $name="Ági"; switch ($name) { case "Péter": print "A nevem Péter"; break; case "Pál": print "A nevem Pál"; break; case "Ági": print "A nevem Ági"; break; default: print "Más nevek"; } ?> 5.5 PHP szkript swich utasítás A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a

webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: A nevem Ági A fenti példánál tehát a case „Ági”– hoz tartozó print "A nevem Ági"; utasítás fog lefutni. Újabb Példa a switch utasítás alkalmazására: <?php $x=2; switch ($x) { case 1: print "1"; break; case 2: print "2"; break; case 3: print "3"; break; default: print "Nincs szám 1-3 között "; } ?> 5.6 PHP szkript swich utasítás 101 A kódblokkunk forrásszövegét mentsük el az Apache webkiszolgáló gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a webkiszolgálón végrehajtódik és a képernyőn a következő eredményt kapjuk: 2 5.3 Ciklusszerkezetek A ciklusszerkezetek ismétlődő tevékenységek végrehajtására szolgálnak. Alkalmazásukkal dinamikus Web oldalakat kapunk. 5.31 For ciklusszerkezet Ha ismerjük, hogy egy utasítást hányszor kell

végrehajtani, akkor a for ciklusszerkezetet használjuk. A for ciklusszerkezet általános alakja: for (ciklusváltozó = kezdőérték; feltétel - végérték; számláló növelése) { [utasítás] } A ciklusváltozó, a kezdőérték, a végérték és a lépésköz mind numerikus értékek. A ciklusváltozó határozza meg a az utasítások végrehajtásának a számát a kezdőértéktől, a végértékig a lépésköz függvényében. Ha nem adjuk meg a lépésközt, akkor annak értéke alapértelmezés szerint 1 lesz Amikor a ciklusváltozó eléri a végértéket, a ciklus befejeződik. A for ciklusszerkezet működése tehát a következő: ™ A ciklusváltozó értéke felveszi a kezdőértéket. ™ Végrehajtja az utasításokat. ™ Ellenőrzi, hogy a ciklusváltozó értéke nagyobb e a végérték értékénél. Ha igen, akkor kilép a ciklusból. ™ Növeli a ciklusváltozó értékét a lépésköz értékével (vagy 1-gyel). ™ Ismétli a 2. és 4 közötti

lépéssorozatot Példa a for ciklus alkalmazására: <?php for ($i=0; $i<=10; $i++) { print $i; } ?> 5.7 PHP szkript For ciklusszerkezet A ciklusváltozó $i kezdőértéke 0, ezzel indul a ciklus végrehajtása és addig folytatódik amíg a változó értéke el nem éri a 10-et. Az egyetlen utasítás az $i változó mindenkori értékének a kiírása: 102 print $i; A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a programfuttatás eredménye a: 012345678910 számsor kiírása! Hasonló példa a for ciklus alkalmazására: <?php $t="PHP udvozlet<br> "; for ($i=0;$i<10;$i++) { print $t; } ?> 5.8 PHP szkript Egy másik For ciklusszerkezet A fenti példánál a programfuttatás eredménye: a „PHP udvozlet” tízszeres kiírása! 5.32 While ciklusszerkezet Az elöltesztelő while

ciklusszerkezet a while kulcsszót használja, ahol az utasításblokk a feltétel = True értéke esetében kerül végrehajtásra. A while ciklusszerkezet utasításai tehát a feltétel kiértékelésének az eredményétől hajtódnak vagy nem hajtódnak végre (előfordulhat, hogy az utasításblokk egyszer sem kerül végrehajtásra). Ha egyszer végrehajtódik az utasításblokk, akkor a vezérlés visszakerül a while utasítássorra, ahol elkezdődik a feltétel újbóli kiértékelése. Az elöltesztelő while ciklusszerkezet általános alakja tehát: while (feltétel) { [utasítás] } Példa a while ciklus alkalmazására: <?php $i=1; while ($i<6) { print $i; $i++; } ?> 5.9 PHP szkript Egy while ciklusszerkezet 103 A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a programfuttatás eredménye a: 12345 számsor

kiírása! A ciklusváltozó $i kezdőértéke 1, ezzel indul a ciklus végrehajtása és addig folytatódik amíg a feltétel teljesül, vagyis a változó értéke kisebb mint 6. Az egyetlen utasítás az $i változó mindenkori értékének a kiírása print $i. Újabb példa a while ciklusszerkezet alkalmazására: <?php $t="PHP udvozlet<br> "; $i=0; while ($i<10) { print $t; $i++; } ?> 5.10 PHP szkript Egy másik while ciklusszerkezet A fenti példánál a programfuttatás eredménye: a „PHP udvozlet” tízszeres kiírása! 5.33 dowhile ciklusszerkezet Hasonlít a while ciklusszerkezethez. A hátultesztelő do while ciklusszerkezet általános alakja: do { [utasítás] } while (feltétel); A hátultesztelő do . while ciklusszerkezet utasításai a feltétel kiértékelésének az eredményétől hajtódnak (feltétel = True) vagy nem hajtódnak (feltétel = False) végre, de egyszer biztosan végrehajtásra kerül az utasításblokk, mivel a

kiértékelésre mindig csak az utasításblokk végrehajtása után kerül sor. A do while ciklus előnye az, hogy előbb mindenképpen végrehajtja az utasítást és csak ezután vizsgálja meg a feltételt! Példa a do.while ciklus alkalmazására: 104 <?php $i=1; do { print $i; $i++; } while ($i<6); ?> 5.11 PHP szkript Egy do while ciklusszerkezet A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a programfuttatás eredménye a: 12345 számsor kiírása! Most az $i=1helyett legyen $i=7, ez esetben a programfuttatás eredménye csak a 7es szám kiírása! Újabb példa a do.while ciklusszerkezet alkalmazására (a 58 PHP szkript példa eredményét kapjuk): <?php $t="PHP udvozlet<br> "; $i=0; do { print $t; $i++; }while ($i<10); ?> 5.12 PHP szkript Egy másik dowhile ciklusszerkezet A fenti

példánál a programfuttatás eredménye: a „PHP udvozlet” tízszeres kiírása! 6. Függvények 6.1 Alapfogalmak A PHP nyelv alkalmazása áttekinthetőbb, rövidebb és strukturáltabb ha a logikailag összetartozó programrészeket modulokba foglaljuk össze, melyeket függvényeknek hívunk. A függvény egy zárt, önálló kódrészlet, amelyet a PHP programból meghívhatunk és a meghívás után a függvény lefut (a függvényben lévő kód végrehajtódik). 105 A függvények az utasítások sorozatából állnak, amelyek az eljárásmeghíváskor végrehajtódnak. Ahogy a program nagyobbá válik, a függvények bevezetése is hasznosabb lesz, mivel a programkód áttekinthető marad. A függvények használatának másik nagy előnye az, hogy a függvényeket a PHP programban többször, különféle paraméterrel hívhatjuk, ezáltal nem kell ugyanazokat a programrészeket feleslegesen kis változtatással többször leírni. A PHP nyelv függvényeit a

következőképpen oszthatjuk fel: PHP függvények A PHP nyelvbe beépített függvények A programozó által létrehozott függvények 6.1 ábra A PHP nyelv függvényeinek felosztása A PHP nyelvben tehát kétféle függvény létezik: a PHP nyelvben beépített függvény és a programozó által létrehozott függvény. A PHP nyelv nagyszámú beépített függvénnyel rendelkezik Például: print (); Date(); Include();. 6.2 Függvények definiálása A függvényt a function kulcsszó segítségével hozzuk létre, majd a függvény neve következik és egy zárójelpár. A függvény felépítésének általános formája tehát: function függvénynév (paraméterlista) { utasítások; } függvénynév – A function függvény neve, megadása szükséges, ( ) – megadása kötelező, paraméterlista (opcionális) - a function függvény meghívásakor elküldött változok listáját reprezentáló paraméterek, melyeket vesszővel választunk el egymástól

($paraméter 1, $paraméter2, stb.) A zárójelpárt akkor is ki kell írni, ha a függvény nem vesz át paramétereket! 106 6.3 Függvényhívások A function függvényt tehát a nevével és a zárójelben lévő paraméterlistával hívjuk meg: függvénynév (paraméterlista); A PHP függvényeket a programban a függvénymeghívás előtt kell megadni. A függvényhívás egy függvénynévből és az utána lévő zárójelből áll, amely vagy üres vagy paramétereket tartalmaz. A paraméter a függvénynek átadott érték, amelyet a függvényhívás zárójelébe írjuk. A függvények kódrészleténél a paramétereket formális, a függvényeket hívó utasításban szereplő paramétereket aktuális paramétereknek nevezzük. A formális és aktuális paramétereknek számban, típusban és megadási sorrendben meg kell egyezniük. Több paraméter esetében, az egyes paramétereket vesszővel választjuk el egymástól. 6.4 Függvények visszatérési értékei A

függvény visszatérési értékét a return utasítással kapjuk meg. A return utasítás befejezi a függvény futtatását és az utána írt kifejezés értékét adja vissza a hívó programnak. A return utasítással a vezérlést a függvényből visszaadjuk a meghívó programba. Példa: A negyzetszamitas függvénynek az lesz a feladata, hogy az x értéknek meghatározza a négyzetét: <?php function negyzetszamitas($x) { return $x*$x; } print negyzetszamitas (10); //kiírja hogy "100 ?> 6.1 PHP szkript A negyzetszamitas függvény forráskódja A függvény meghívása: print square (10); A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a függvény futási eredménye (az x értéknek a négyzete) a böngészőben látható: 100 Példa: A “volumen” nevű függvénynek az lesz a feladata, hogy az adott r és h

értékre meghatározza a henger köbtartalmát: <?php function volumen($r, $h) { 107 $v = 3.14*$r$r$h; return $v; } print volumen (2, 10);//kiírja hogy 125.6 ?> 6.2 PHP szkript A volumen függvény forráskódja A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a függvény futási eredménye (a henger köbtartalma) a böngészőben leolvasható. Példa: A következő példa esetében kamatoskamat számítással foglalkozunk. Ha a bankban az elhelyezett tőkét egy éven túl is benthagyjuk, akkor a következő évben már az első év végén esedékes kamat is kamatozik. A kamatos kamat függvénynek a kamatos kamat számítása lesz a feladata: function kamatos kamat ($lekötött betét, $kamat, $lekötési idő) { $kamatozott betét = $lekötött betét*pow(1+$kamat, $lekötési idő); return $kamatozott betét; } 6.3 PHP

szkript A kamatos kamat függvény Számítási adatok: ™ a lekötött betét nagysága: 1000 EUR, ™ a kamatláb: 6.6%, ™ a lekötési idő: 4 év, ™ kiszámítandó a kamatozott betét nagysága. 6.2 ábra A program forráskódja 108 A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik. A függvény meghívása: kamatos kamat (1000, 0.066, 4); A függvény futási eredménye, vagyis a kamatozott betét nagysága tehát: 1291 EUR. 6.5 A phpinfo() függvény A phpinfo() függvény a PHP információk megjelenítésére szolgál: ™ magáról a PHP-ről, ™ a kiszolgálói környezetről, ™ a PHP program változóiról. A phpinfo () hibakereső eszköz, nem használ semmilyen paramétert, csak logikai értéket ad vissza és egy HTML oldalt küld a böngészőnek. A következő phpinfo () függvény: <?php phpinfo (); ?>

6.4 PHP szkript A PHPinfo () függvény futtatás utáni eredményét a következő ábrán láthatjuk: 6.3 ábra A PHP információk Így tehát információt kapunk a PHP-változatról, a kiszolgálói környezetről, a PHP program beállításairól és változóiról. 109 7. Állományok beágyazása a PHP programokba Az állományok beágyazására a PHP programokba az: include (); függvény szolgál. Az include () függvény paramétere a fájl elérési útja Tehát a gyakran használt függvényeket külső fájlba menthetjük és az include ( ) függvénnyel futási időben töltjük be a PHP programunkba. Az include () függvény használatának előnyei: ™ a beágyazott PHP programkód úgy hajtódik végre, mintha a fődokumentum része lenne, ™ ha a beágyazott PHP programkódot többször akarjuk felhasználni nem kell minden egyes helyre bemásolni, ™ az esetleges hibát a programkódban egy helyen kell javítani, ™ a programkód esetleges bővítését is

csak egy helyen kell elvégezni. Példa: A következő példából látható, hogyan ágyazható be egy salute.php fájl a fődokumentumba az include() függvény segítségével. A PHP fődokumentum a következő struktúrájú: <?php include("salute.php"); print $koszontes3; ?> 7.1 PHP szkript A fődokumentum A PHP kódot tartalmazó salute.php nevű beágyazott fájl: <?php $koszontes1 = "Jó reggelt!"; $koszontes2 = "Jó napot!"; $koszontes3 = "Jó estét!"; ?> 7.2 PHP szkript A salutephp nevű beágyazott fájl A két kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fődokumentumot a webböngészőbe, ekkor a PHP program a szerveren (a salute.php fájl beágyazódásával) végrehajtódik és a böngészőben a következő eredményt kapjuk: Jó estét! 110 8. Tömbök 8.1 Alapfogalmak A tömbök értékek indexelt listái, rugalmas adatszerkezetek és

nagy méretű, összetett adatok tárolására és kezelésére szolgálnak. A tömbök használatának az igazi értelme a nagyobb mennyiségű adatok rendszerezése szempontjából fontos. A tömbök olyan programelemek, amelyekben az adatok indexek segítségével érhetők el. Az indexelés: ™ számmal vagy ™ karakterlánccal valósítható meg. Alapértelmezés szerint a tömböket számokkal indexeljük, az első elem indexe mindig 0. Tehát bármely elem indexe eggyel kisebb az elem tömbbéli helyétől és az elem utolsó indexe mindig eggyel kisebb a tömb méreténél. Tömbhöz értéket kétféleképpen rendelhetünk: ™ az array() függvény segítségével, ™ szögletes zárójelek alkalmazásával. 8.2 Az array() függvény alkalmazása Hozzunk létre egy $autók nevű tömböt az array() függvény segítségével és rendeljünk hozzá öt elemet: $autok = array(“Audi”, ”BMW”, ”Fiat”, ”Ford”, ”Honda”); Ha a tömbből információt szeretnénk

nyerni, akkor két adatra van szükségünk: – a tömb nevére (a fenti példa esetében: $autok), – a megjelenítendő elem sorszámára. Írassuk ki az $autok tömb negyedik elemét, amelynek az indexe 3 (az indexet a tömb neve után szögletes zárójelbe kell írni): print $autók[3]; A kiírás eredménye a következő karakterlánc: ”Ford”. 8.3 A szögletes zárójelek alkalmazása A szögletes zárójelek alkalmazása esetében a tömb neve után index nélküli szögletes zárójelpárt írunk (a PHP automatikusan meghatározza az indexértéket). Hozzunk létre újra egy $autók nevű tömböt a szögletes zárójelek alkalmazásával és rendeljünk hozzá öt elemet: 111 $autok [] = “Audi”; $autok [] =”BMW”; $autok [] =”Fiat”; $autok [] = ”Ford”; $autok [] =”Honda”; Szögletes zárójel alkalmazásával az array() függvény segítségével létrehozott tömbhöz új elemet adhatunk: $autok [5] = “Toyota”; 8.4 A foreach ciklus A tömb

tartalmát a foreach ciklussal jeleníthetjük meg a képernyőn: foreach ($tombnev as $tombelemlista) { } A $tombnev a tömb neve, amelynek a tartalmát meg szeretnénk jeleníteni a képernyőn. A $ tombelemlista pedig egy változó amelybe a tömbelemek kerülnek. Példa: A Toyotát is tartalmazó $autok tömb elemeinek a foreach ciklussal való kiírásánál: <?php $autok []= "Audi"; $autok []= "BMW"; $autok []= "Fiat"; $autok []= "Ford"; $autok []= "Honda"; $autok []= "Toyota"; foreach($autok as $tombelemlista) { print "$tombelemlista<br>"; } ?> 8.1 PHP szkript A foreach ciklus a következő elemeket látnánk a képernyőn: Audi BMW Fiat Ford Honda Toyota 112 8.4 Asszociatív tömbök A karakterláncokkal indexelt tömböket asszociatív tömböknek hívjuk. Az asszociatív tömbök esetében megnevezzük a tömb elemeit. Létrehozhatók az: ™ array() függvény, vagy a ™ szögletes

zárójel segítségével. Az array() függvény alkalmazásánál minden elemnek meg kell adni a kulcsát és értékét. A következő programrészlet egy $adatok nevű asszociatív tömböt hoz létre három elemmel: <?php $adatok = array ( "nev"=> "Pista", "eletkor" => 25, "igazolvanyszam" => "054222BB", ); print $adatok["igazolvanyszam"]; 7.5 PHP szkript Az asszociatív tömb létrehozása az array() függvénnyel A fenti tömb harmadik elemét a következő módon érhetjük el: print $adatok [“igazolványszám”]; 9. PHP/MySQL ADABÁZISKEZELÉS 9.1 A MYSQL ELŐKÉSZÍTÉSE Ahhoz, hogy a nyílt forráskódú, gyors és egyszerűen kezelhető MySQL-hez kapcsolódni tudjunk, létre kell hozni egy MySQL adatbázist és meghatározni egy felhasználót (user) teljeskörű jogokkal a létrehozott adatbázisra. 1. A MySQL monitor elindításához meg kell nyitni egy MS-DOS parancssort (elérési útvonala:

Start menü> Programok> Kellékek> Parancssor) és be kell lépni a MySQL bin könyvtárába a következő parancs begépelésével: C: cd mysqlin 2. Hozzunk létre egy szemelyiadatok nevű adatbázist a következő parancssor begépelésével: mysqladmin create szemelyiadatok 113 3. Maradva a mysqlin könyvtárban létrehozunk egy gmester felhasználót, akinek teljeskörű írási/olvasási jogokat adunk a létrehozott szemelyiadatok adatbázisra. A szemelyiadatok adatbázis gmester felhasználójának a jelszava legyen: sesame. Gépeljük be tehát a következő parancssorokat: mysql –uroot GRANT ALL ON szemelyiadatok.* TO gmester@localhost IDENTIFIED BY ”sesame”; A MySQL a felhasználói jogokat táblákba tárolja, így az alábbi parancs begépelésével ezeket a táblákat feltöltjük: FLUSH PRIVILEGES A MySQL monitor elindítása és csatlakozása után a MySQL kiszolgálóhoz, valamint a szemelyiadatok adatbázis és a gmester teljeskörű jogosult

felhasználó létrehozása után a következő képernyő tárul elénk: 9.1 ábra A szemelyiadatok adatbázis és a gmester teljeskörű jogosult felhasználó létrehozása Az ”exit;“ parancs begépelésével kilépünk a MySQL monitorból. A GRANT parancs használatának az általános alakja a következő: GRANT jogosultságok ON adatbázisnév.táblanév TO felhasználónév@host IDENTIFIED BY ”jelszó”; A fenti példánk esetében a következő megoldásokat alkalmaztuk: 114 jogosultságok=>ALL így a felhasználó megkapta az össz jogosultságot, adatbázisnév => szemelyiadatok táblanév => * A „*“ jelentése: a megadott jogosultságok a szemelyiadatok adatbázis összes táblájára vonatkoznak, felhasználónév => gmester host => localhost jelszó => sesame A jogosultságok visszavonására a GRANT parancs helyet a REVOKE parancsot használjuk! A PHP használható a MySQL adatbázis webes felületének elkészítésére. Indítjuk el a

MySQL kiszolgálót és lépjünk vele kapcsolatba. Az adatbázisunk elkészítéséhez a phpMyAdmin programot használjuk (webcíme: http://www.phpmyadminnet) 9.2 A PHPMyAdmin A PHPMyAdmin a böngésző által elérhető, PHP programokat tartalmazó vizuális rendszer az adatbázis kezeléshez. Alkalmazásával létrehozhatunk új adatbázist, módosíthatjuk a meglévőt és az egyes mezők tartalmát. Töltsük le a merevlemezünkre és csomagoljuk ki a phpMyadmin-256zip állományt. Másoljuk be az állományt a webkiszolgáló gyökérkönyvtárába (pl C:Program Filesapachehtdocs). Adjunk a mappának phpMyAdmin nevet Következik a phpMyAdmin konfigurációs állományának: config.incphp beállítása. Nyissuk meg a configincphp fájt a Jegyzettömbbel vagy WordPad-el és a következő sorban: $cfg[PmaAbsoluteUri] = ; adjuk meg a phpMyAdmin teljes elérési útját: http://localhost/phpMyAdmin vagyis: $cfg[PmaAbsoluteUri] = http://localhost/phpMyAdmin; Majd állítsuk be a

felhasználó nevet (amely jogosult az adatbázist elérni): $cfg[Servers][$i][user] = ; // MySQL user 115 Legyen a felhasználónév: gmester vagyis: $cfg[Servers][$i][user] = gmester; Az adatbázis felhasználójának jelszavát itt állíthatjuk be: $cfg[Servers][$i][password] = ; // MySQL password Legyen az adatbázis felhasználójának jelszava: sesame vagyis: $cfg[Servers][$i][password] = sesame; Állítsuk be az adatbázis nevét: $cfg[Servers][$i][only db] = ; Legyen az adatbázis neve: szemelyiadatok vagyis: $cfg[Servers][$i][only db] = szemelyiadatok; A szükséges módosítások elvégzése után mentsük el a config.incphp fájlt Most írjuk be a böngészőbe a következő címet: http://localhost/phpMyAdmin/index.php és a következő phpMyAdmin induló képernyő jelenik meg (a bal oldali oszlopban leolvasható az adatbázis neve!) 9.2 ábra A phpMyAdmin induló képernyő 116 Az új adattáblák létrehozásához meg kell adni: ™ a tábla

nevét ™ a mezők nevét, ™ az egyes mezők definícióját. Legyen az új adattábla neve: adatok. Az új adattáblában öt mezőben tároljuk az adatokat, amelyek: ID, családi név (Csaladi nev), utónév (Utonev), telefon (Telefon) és lakcím (Lakcim). Tehát az előbbi ábrán írjuk be: a. a Neve mezőben: adatok b. Mezők száma: 5 így a Végrehajt gomb megnyomása után létrehozzuk az új adatok nevű adattáblát (9.3 ábra) 9.3 ábra A phpMyAdmin táblaválasztás 1. Az első mezőt használjuk a rekordok indexelésére, neve: ID, típusa: INT, maximális hossza 10 Az extra oszlopban beállítjuk az auto increment értéket és kiválasztjuk az elsődleges kulcsot (primary key). Így minden alkalommal, amikor egy új rekord kerül az adattáblába az id értéke eggyel megnő. 2. A második mező neve Csaladi nev, a típusa VARCHAR, hossza 30 3. A harmadik mező neve Utonev, a típusa VARCHAR hossza 30 4. A negyedik mező neve Telefon, a típusa VARCHAR, hossza 30 5.

Az ötödik mező neve Lakcím, a típusa VARCHAR és a hossza 60 117 A 9.4 ábrán bemutatjuk az adatok nevű tábla adatokkal való kitöltését a phpMyAdmin segítségével. A 95 ábra pedig láthatjuk az adatok tábla struktúráját 9.4 ábra A phpMyAdmin tábla adatkitöltése 9.5 ábra A phpMyAdmin adattábla struktúrája 9.3 PHP csatlakozás a MySQL-hez 9.31 Kapcsolatkialakítás a PHP és a MySQL adatbáziskezelő között A mysql connect az első PHP függvény, amelyet a MySQL-hez való csatlakozásnál meg kell hívnunk. Ez építi fel az összeköttetést a MySQL adatbáziskezelőhöz A mysql connect függvény általános alakja: mysql connect (“kiszolgálónév“, “felhasználónév“, “jelszó“); A mi esetünkben a mysql connect függvény így írható fel: mysql connect (“localhost“, “gmester“, “sesame“); 118 Ha a csatlakozás sikerrel jár, akkor a függvény egy összeköttetés – azonosítót ad vissza, sikertelen csatlakozás

esetén pedig a False értéket. A következő PHP szkript egy egyszerű példát mutat be a csatlakozás kiépítésére: <?php $kapcsolat = mysql connect ("localhost", "gmester", "sesame"); print "$kapcsolat"; ?> 9.1 PHP szkript Kapcsolatkialakítás a PHP és a MySQL között A fenti példa estében a kapott összeköttetés – azonosítót a $kapcsolat nevű változóhoz rendeljük és kiíratjuk a változó értéket, így meggyőződünk a kapcsolat kialakításáról. A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a képernyőn a következő eredményt kapjuk: Resource id #1 9.32 A PHP és a MySQL kapcsolatának megszakítása Az összeköttetés a PHP és a MySQL között a fenti programkód lefutása után automatikusan megszűnik, de a: mysql close (összeköttetés –

azonosító); függvény meghívásával a PHP szkript végén az összeköttetést mi is megszüntethetjük. Ez esetben az előbbi programkód a következőre módosul: <?php $kapcsolat = mysql connect ("localhost", "gmester", "sesame"); print "$kapcsolat"; mysql close($kapcsolat); ?> 9.2 PHP szkript A PHP és a MySQL kapcsolatának megszakítása 9.33 Az adatbázis kiválasztása Az adatbázis kiválasztásához, a PHP & MySQL összeköttetés kiépítése után, a: mysql select db (”adatbázis név”, összeköttetés – azonosító) függvényt használjuk. A szemelyiadatok adatbázishoz először tehát a mysql connect () majd a mysql select db () függvényeket kell használni a következő módon: 119 <?php $kapcsolat = mysql connect („localhost“, „gmester“, „sesame“); mysql select db (”szemelyiadatok”, $kapcsolat); ?> 9.3 PHP szkript A szemelyiadatok adatbázis kiválasztása A fenti szkript

lehetővé teszi számunkra: ™ a PHP&MySQL csatlakozás kiépítését, ™ a $kapcsolat összeköttetés – azonosító ismeretét, ™ A szemelyiadatok adatbázis kiválasztását. 9.34 Lekérdezések végrehajtása A lekérdezések végrehajtását a: mysql query (lekérdezés, összeköttetés – azonosító); függvény alkalmazásával végezzük el. A lekérdezés sikeres végrehajtása esetében un igaz eredményindexet kapunk (1), sikertelen végrehajtás esetében pedig a kimenet hamis (0). 9.35 Hibaüzenetek kiolvasása A mysql error () függvény a PHP die () függvényével együtt használva a következő módon: die (mysql error ()); hasznos hibaüzenetet ad vissza. 9.36 Adattáblák létrehozása PHP segítségével Mint már említettük, új MySQL táblák létrehozásához meg kell adni: a tábla nevét, a mezők nevét és az egyes mezők definícióját. A megfelelő utasítás általános alakja: CREATE TABLE táblanév (oszlopnév, oszloptípus); Az

alábbi példában egy autoadatok nevű táblát hozunk létre a PHP segítségével és egyben bemutatjuk a mysql query () és a die (mysql error ()) függvények használatát. Az új adattáblában hat mezőben tároljuk az adatokat, amelyek: ID, auto marka, teljesitmeny, hengerurtartalom, ABS, elektronikus klima, legzsakszam. 120 A példa kódblokkja: <?php //kiépítjük az összeköttetést: $kapcsolat = mysql connect("localhost", "gmester", "sesame"); //kiválasztjuk az adatbázist: mysql select db("szemelyiadatok", $kapcsolat); //létrehozzuk az új auto adattáblát: $sql = "CREATE TABLE autoadatok (ID int (10) not null primary key auto increment, auto marka varchar (30), teljesitmeny varchar (20), hengerurtartalom varchar (20), ABS varchar (20), elektronikus klima varchar (20), legzsakszam varchar (20))"; //végrehajtjuk a lekérdezést és a hibaüzenet kiolvasását: $eredmeny = mysql query($sql, $kapcsolat) or

die (mysql error ()); //kiíratjuk az eredmeny azonosítóját: print "$eredmeny"; ?> 9.4 PHP szkript Az autoadatok nevű tábla létrehozása A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába. Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a képernyőn a következő eredményt kapjuk: 1 Az autoadatok új adattábla létrehozása most szemléletesen kiolvasható a PHPMyAdmin segítségével. A 96 ábrán látható, hogy a szemelyiadatok adatbázis most már két adattáblát tartalmaz (adatok és autoadatok)! 9.6 ábra A táblák bemutatása 121 Az auto új adattábla struktúráját pedig a 9.7 ábrán mutatjuk be 9.7 ábra Az autoadatok adattábla struktúrája 9.37 Adatok bevitele a PHP segítségével Az adatok bevitelének legegyszerűbb módja az INSERT utasítás használata. Az INSERT utasítás általános alakja: INSERT INTO tábla neve (oszlopok

listája) VALUES (oszlopok értékei); A zárójelek közötti értékek listájában a karakterláncokat egyszeres idézőjelek közé kell tenni! A következő példánál vigyünk be a Mitsubishi Carisma adatait az autoadatok táblába: <?php //kiépítjük az összeköttetést: $kapcsolat = mysql connect("localhost", "gmester", "sesame"); //kiválasztjuk az adatbázist: mysql select db("szemelyiadatok", $kapcsolat); //létrehozzuk az INSERT INTO adatbeviteli utasítást: $sql = "INSERT INTO autoadatok VALUES(, Mitsubishi Carisma, 92 KW, 1834 cmcm, van, van, 4)"; //végrehajtjuk a lekérdezést és a hibaüzenet kiolvasását: $eredmeny = mysql query($sql, $kapcsolat) or die (mysql error ()); //kiíratjuk az eredmeny azonosítóját: print "$eredmeny"; ?> 9.5 PHP szkript Az autoadatok nevű tábla adatbevitele 122 A kódblokkunk forrásszövegét mentsük el az Apache szerver gyökérkönyvtárába.

Töltsük be a megszerkesztet PHP fájlt a webböngészőbe, ekkor a PHP program a szerveren végrehajtódik és a szkript futatása után egy új sor jelenik meg az autoadatok adattáblában. Az új sor létrehozása szemléletesen kiolvasható a PHPMyAdmin segítségével: 9.8 ábra A Mitsubishi Carisma adatbevitele az autoadatok adattáblába Ha az adattáblába több új sort be akarunk vinni, akkor több SQL utasítást használunk, amelyeket végrehajthatjuk a mysql query(); utasítással. Ettől azonban jobb megoldás a beviteli űrlapok használata! 9.38 PHP adatbevitel űrlapokkal Egy HTML űrlapot hoztunk létre, amely hat szövegmezőt és egy gombot tartalmaz. A form tag action attribútuma az urlapbevitel.php fájlra mutat, amely feldolgozza az űrlapon megadott adatot (a HTML és PHP fájloknak most egy könyvtárban kell lenniük!). A HTML forrásszöveget mentsük el az (aktív) Apache szerver gyökérkönyvtárában html urlapbevitel.html néven <html>

<head><title>Urlapbevitel</title></head> <body> <form action="urlapbevitel.php" method="POST"> <p>Automárka és típus</p> <input type="text" name="auto marka" size="30" maxlength="30"><br> <p>Motorteljesítmény</p> 123 <input type="text" name="teljesitmeny" size="30" maxlength="20"><br> <p>Hengerűrtartalom</p> <input type="text" name="hengerurtartalom" size="30" maxlength="20"><br> <p>Blokkolásgátló</p> <input type="text" name="ABS" size="30" maxlength="20"><br> <p>Légkondiciónáló</p> <input type="text" name="elektronikus klima" size="30" maxlength="20"><br> <p>Légzsákszám</p>

<input type="text" name="legzsakszam" size="30" maxlength="20"><br><br> <input type="submit" value="rendben"> </form> </body> </html> 9.1 HTML űrlap Írjuk meg a következő urlapbevitel.php nevű PHP programot, amely kiírja a felhasználó által megadott adatot: <?php //kiépítjük az összeköttetést: $kapcsolat = mysql connect("localhost", "gmester", "sesame"); //kiválasztjuk az adatbázist: mysql select db("szemelyiadatok", $kapcsolat); //létrehozzuk az INSERT INTO adatbeviteli utasítást: $sql = "INSERT INTO autoadatok VALUES(, $ POST[auto marka], $ POST[teljesitmeny], $ POST[hengerurtartalom], $ POST[ABS], $ POST[elektronikus klima],$ POST[legzsakszam])"; //végrehajtjuk a lekérdezést és a hibaüzenet kiolvasását: $eredmeny = mysql query($sql, $kapcsolat) or die (mysql error ()); //kiíratjuk az eredmeny

azonosítóját: print "$eredmeny"; ?> 9.6 PHP szkript urlapbevitelphp Mivel az ID mező növelése önműködő, így az űrlap készítéséhez csak hat mezőre van szükségünk. Az urlapbevitel.php fájlban lévő kódot akkor hívjuk meg amikor a felhasználó kitölti a html urlapbevitel.html űrlapját A szövegmezőket egymás után töltsük ki a következő adatokkal: 124 9.9 ábra A Mitsubishi Pajero adatbevitele űrlappal 9.10 ábra A kibővített autoadatok adattábla 9.39 Lekérdezések PHP-vel A táblából az összes adatot a SELECT utasítással kaphatjuk meg. Általános alakja: SELECT * FROM táblanév; A „ * ” jelentése: az összes mező. Ha nem az összes mező tartalmát akarjuk lekérdezni, akkor a kiválasztott mezők neveit írjuk be a csillag helyére. 125 Táblasorok számának lekérdezése A táblasorok számának lekérdezésére a: mysql num rows () függvényt használjuk. Visszatérési értékkel rendelkezik, ezért az

eredményindexet tároljuk az $eredmeny változóba. A következő példa esetében a mysql num rows () függvény alkalmazásával lekérdezzük az autoadatok tábla összes sorát: <?php //kiépítjük az összeköttetést: $kapcsolat = mysql connect("localhost", "gmester", "sesame"); //kiválasztjuk az adatbázist: mysql select db("szemelyiadatok", $kapcsolat); //SQL lekérdezési utasítás: $sql = "SELECT * FROM autoadatok"; //végrehajtjuk a lekérdezést és a hibaüzenet kiolvasását: $eredmeny = mysql query($sql, $kapcsolat) or die (mysql error ()); //beolvassuk és kiírjuk a táblasorok számát: $sorok szama = mysql num rows ($eredmeny); print "Az autoadatok tabla sorainak szama: $sorok szama"; ?> 9.7 PHP szkript Az autoadatok tábla sorszámának lekérdezése Az eredmény: Az autoadatok tabla sorainak szama: 2 MySQL rekordok kiolvasása A MySQL rekordok kiolvasása szempontjából a legegyszerűbb

ha a sorokat tömbökként kezeljük. Erre a célra a while ciklusszerkezetet és a: mysql fetch array () függvényt használjuk. A while ciklusszerkezettel végighaladunk a rekordokon és az egyes mezők értékét változóba helyezzük majd megjelenítjük a képernyőn. A mysql fetch array () függvény formája tehát a következő: $tomb = mysql fetch array ($eredmeny); 126 Példa: <?php //kiépítjük az összeköttetést: $kapcsolat = mysql connect("localhost", "gmester", "sesame"); //kiválasztjuk az adatbázist: mysql select db("szemelyiadatok", $kapcsolat); //SQL lekérdezési utasítás: $sql = "SELECT * FROM autoadatok"; //végrehajtjuk a lekérdezést és a hibaüzenet kiolvasását: $eredmeny = mysql query($sql, $kapcsolat) or die (mysql error ()); //soronként megjelenítjük az adatokat: while ($tomb = mysql fetch array ($eredmeny)) { //nevet adunk a mezőknek: $azonosito = $tomb[azonosito]; $auto marka =

$tomb[auto marka]; //a böngészőben látható eredmény: print "$azonosito; $auto marka<br>"; } ?> 9.8 PHP szkript MySQL rekordok kiolvasása az autoadatok táblából Eredmény: 1; Mitsubishi Carisma 2; Mitsubishi Pajero 9.4 Információk az adatbázisokról A mysql list dbs () függvény használatával listát kérhetünk az összes adatbázisról. Amelyek az adott kapcsolaton keresztül hozzáférhetőek. A mysql list tables () függvény segítségével egy adott adatbázis tábláinak nevét sorolhatjuk fel. 9.5 A WinMySQLadmin A MySQL bin könyvtárában találhatjuk a winmysqladmin.exe Windows-alkalmazást Két kattintással az állományra elindítjuk a programot, ekkor a tálcánkon megjelenik egy közlekedési lámpa ikonja. Az indítás után beírjuk a megfelelő felhasználónevet és jelszót és a következő grafikus felhasználói felület tárul elénk: 127 9.11 ábra A WinMySQLadmin induló felülete A WinMySQLadmin automatikusan

tárolja a környezetében talált rendszerinformációkat (pl. számítógépünk nevét, felhasználó nevét, számítógépünk IP-címét stb.) A megfelelő i-fülek választásával megtekinthetjük a rendszerinformációkat és módosíthatjuk a MySQL beállításait. Az adatbázisunk nevét (szemelyiadatok) és táblaadatait leolvashatjuk, ha a databases fülre kattintunk: 9.12 ábra Adatbázisunk/tábláink áttekintése a WinMySQLadmin segítségével A MySQL szerver/WinMySQLadmin leállítására kattintsunk a tálca közlekedési lámpa ikonjára és válasszuk ki a STOP the Service opciót. 128 10. PHP SZKRIPTEK HOZZÁFÉRÉS-KORLÁTOZÁSA 10.1 Az Apache webkiszolgáló alkalmazása a PHP szkriptek hozzáférésének korlátozására A felhasználói jogosultságok kezelése és hitelesítése a web-es alkalmazásoknál alapkövetelménynek számít. Az alkalmazásokhoz való hozzáférés korlátozása, a felhasználó hitelesítése, több módon is

megoldható. Ebben a fejezetben bemutatjuk, hogyan lehet az Apache webkiszolgáló segítségével korlátozni a php szkriptekhez való hozzáférést a felhasználónév és jelszó alapján. 1. A Jegyzettömb/WordPad segítségével nyissuk meg az Apache webkiszolgáló httpdconf konfigurációs fájlát és keressük meg az alábbi sorokat: <Directory /> Options FollowSymLinks AllowOverride None </Directory> Az idézett rész utáni üres sorba írjuk be a következő tartalmat: <Directory "C:/Program Files/Apache Group/Apache2/htdocs/php scripts/"> AuthType Basic AuthName "Require valid-user" AuthUserFile C:/Passwords Require valid-user </Directory> Megjegyzés: A<Directory "C:/Program Files/Apache Group/Apache2/ htdocs/php scripts/"> sor a C: / meghajtóra telepített Apache webkiszolgáló htdocs gyökérkönyvtárában lévő php scripts mappa elérési útvonala, amely persze az adott esetben másmilyen is lehet!

Mentsük el az így módosított httpd.conf konfigurációs fájlt és indítsuk újra az Apache webkiszolgálót. 2. A Jegyzettömb/WordPad segítségével írjuk fel az engedélyezett felhasználónevet és jelszót, például: gmester:sesame és mentsük el a fájt a c: meghajtó gyökérkönyvtárában Password néven: c:Passwords A felhasználónevek és jelszavak listája később persze kibővíthető 129 3. Írjuk be a megszerkesztet PHP fájl címét a webböngészőbe, ekkor a következő ablak tárul elénk: 10.1 ábra A php szkriptekhez való hozzáférés korlátozása a felhasználónév és jelszó alapján Így csak a c:Passwords fájlban tárolt felhasználónév (gmester) és jelszó (sesame) begépelése után hajtódik végre a PHP szkript. A hitelesítési folyamat a következő: 1. A felhasználó a webkiszolgáló lévő védett php szkriptet próbálja elérni 2. Az Apache webkiszolgáló ellenőrzi, hogy a felhasználó megadta e a felhasználónevét és

jelszavát, ha nem akkor HTTP 401 státuskódot küld vissza. 3. Az előugró ablak segítségével a felhasználó megadja a felhasználónevét és jelszavát 4. A kliensgép újra megpróbálja elérni a php szkriptet 5. Az Apache webkiszolgáló ellenőrzi a kapott adatok érvényességét és dönt a hozzáférés engedélyezéséről vagy megtagadásáról. 11. A MySQL, Apache és PHP telepítése és konfigurálása A programozási munka szempontjából célszerű a fejlesztőrendszer három összetevőjét külön telepíteni és konfigurálni. 130 11.1 A MySQL adatbáziskezelő telepítése és konfigurálása A fejlesztői környezet kialakitásának első lépése a MySQL adatbázis-kezelő telepítése és konfigurálása a következő lépések szerint: 1. A MySQL honlapjáról: http://www.mysqlcom/downloads töltsük le a MySQL nyílt forráskódú Windows rendszerű változatát, amely a könyv írásának a pillanatában: mysql-4.018-winzip 2. Az így letöltött

állományt csomagoljuk ki egy ideiglenes könyvtárba 3. Keressük meg és indítsuk el a setupexe állományt Ekkor megjelenik a következő ábrán látható telepítő varázsló első képernyője. Kattintsunk kétszer a Next gombra. 11.1 ábra A MySQL telepítő varázsló 4. Válasszuk ki a telepítés helyét: C:mysql Majd kattintsunk a Next gombra. 5. Válasszuk a Typical telepítési módot majd kattintsunk a Next gombra 6. Ekkor megkezdődik a tényleges telepítés A telepítés végéről a Setup Complete képernyőn látható üzenet értesít bennünket. A telepítés befejezéséhez kattintsunk a Finish gombra 131 11.2 ábra A MySQL telepítési helyének a kiválasztása 11.3 ábra A MySQL telepítés befejezése 7. Nyissuk meg a C:mysqlin könyvtárat majd indítsuk el a winmysqladmin alkalmazást 8. MySQL konfigurálása a 9.1 fejezetben leírt eljárás szerint történik! 11.2 Az Apache webkiszolgáló telepítése és konfigurálása A fejlesztői

környezet kialakításának második lépése az Apache webkiszolgáló telepítése és konfigurálása a következő lépések szerint: 1. Az Apache honlapjáról: http://www.apacheorg töltsük le az Apache nyílt forráskódú Windows rendszerű változatát, amely a könyv írásának a pillanatában: apache-2.049-win32 132 2. Dupla kattintással elindítjuk a telepítő varázslót (Installations Wizard) Ekkor megjelenik a következő ábrán látható telepítő varázsló első képernyője ahol látható az Apache webkiszolgáló verziószáma. Kattintsunk a Next gombra 11.4 ábra A Apache telepítő varázsló 3. A következő képernyőn megjelenik az Apache licencszerződése Fogadjuk el a feltételeket Kattintsunk kétszer a Next gombra. 11.5 ábra Az Apache licencszerződése 4. A következő lépésben a kiszolgáló információs (Server Information) képernyője tárul elénk Itt be kell állítani a webkiszolgálót: c. a két felső szövegmezőbe gépeljük

be a localhost szöveget, d. az alsó szövegmezőbe gépeljük be az e-mail címünket 133 Válasszuk ki a: for All users, on Port 80, as a service – Recommended opciót, amely automatikus webkiszolgáló indítást eredményez minden felhasználó számára. Kattintsunk a Next gombra. 11.6 ábra Az Apache webkiszolgáló beállításai 5. Válasszuk a Typical telepítési módot majd kattintsunk a Next gombra 6. Válasszuk ki a webkiszolgáló telepítés helyét Alapértelmezett telepítési hely: C:Program FilesApache Group Majd kattintsunk a Next gombra. 11.7 ábra A webkiszolgáló telepítési módjának kiválasztása 134 11.8 ábra A webkiszolgáló telepítési helyének kiválasztása 7. Kattintsunk az Install gombra, ekkor megkezdődik a tényleges telepítés (a fájlok másolása, beállítása). 8. A telepítés végéről az Installation Wizard Completed képernyőn látható üzenet értesít bennünket. A telepítés befejezéséhez kattintsunk a Finish

gombra 11.9 ábra A webkiszolgáló tényleges telepítése 9. Következik a webkiszolgáló működésének a tesztelése Gépeljük be a böngésző címsorába a következő szöveget: http://localhost és ha telepítéssel minden rendben van, akkor a böngészőben megjelenik az Apache tesztoldala (11.11 ábra) 135 11.10 ábra A webkiszolgáló telepítésének befejezése 11.11 ábra Az Apache webkiszolgáló tesztoldala 11.3 A PHP telepítése és konfigurálása A fejlesztői környezet kialakitásának harmadik lépése a PHP telepítése és konfigurálása a következő lépések szerint: 1. A PHP honlapjáról: http://www.phpnet/ 136 kövessük a Downloads linket és töltsük le a: php-4.36-Win32zip Windows rendszerű változatát. 2. Az így letöltött állományt csomagoljuk ki a lemezmeghajtó gyökérkönyvtárába Így létrejön a C:php-4.36 mappa Nevezzük át ezt a mappát C:php-re 3. Nevezzük át a phpinidist fájlt phpini-re és másoljuk át a

Windows könyvtárába: C:Windows Másoljuk be a php4ts.ddl fájlt a Windows rendszerkönyvtárába: C:WindowsSYSTEM32 (oda ahol a ddl fájlok vannak). 4. Megadjuk az Apache webkiszolgálónak a PHP telepítési helyét Nyissuk meg az Apache webkiszolgáló httpd.conf fájlát a WordPad segítségével Keressük meg a következő kódrészletet: ScriptAlias /cgi-bin/ "C:/Program Files/Apache Group/Apache2/cgi-bin/" és utána írjuk be a következő sort: ScriptAlias /php/ "C:/php/" 5. Most keressük meg a következő kódrészletet: # AddType allows you to add to or override the MIME configuration # file mime.types for specific file types # és utána írjuk be a következő kódrészletet: AddType application/x-httpd-php .php AddType application/x-httpd-php .php4 így az Apache webkiszolgálonk minden .php vagy php4 kiterjesztésű fájlt PHP állománynak fogja tekinteni. 6. Keressük meg a következő kódrészletet: # Format: Action handler-name

/cgi-script/location # utána írjuk be a következő kódrészletet: Action application/x-httpd-php /php/php.exe 7. Mentsük el a httpdconf fájlt és zárjuk be a WordPad-et 8. Állítsuk le az Apache webkiszolgálót és indítsuk újra 137 Tartalomjegyzék Előszó . 2 XHTML jelölőnyelv . 4 1. Az XHTML nyelv alapfogalmai 4 1.1 Bevezetés 4 1.2 Az XHTML jelölőnyelv alapszabályai 5 1.3 Dokumentumtípus definíciók 7 a. XHTML-10-Strict 8 b. XHTML 10 Transitional 8 c. XHTML 10 Frameset 8 2. Az XHTML dokumentumok alapszerkezete 9 3. XHTML nyelv attribútumai 11 3.1 class attribútum 11 3.2 id attribútum 11 3.3 title attribútum 11 3.4 lang attribútum 11 3.5 style attribútum 12 4. Szövegblokk XHTML formázása 13 4.1 p és br jelölőelemek 13 4.2 hx jelölőelem 15 4.3 hr jelölőelem 16 4.4 pre jelölőelem 17 4.5 blockquote jelölőelem 17 4.6 div jelölőelem 18 4.7 address jelölőelem 18 5. Szöveges dokumentum XHTML sorformázása 19 5.1 b, strong, em

és i jelölőelemek 19 5.2 big és small jelölőelemek 20 5.3 sub és sup jelölőelemek 21 5.4 cite, dfn és var jelölőelemek 22 5.5 tt, code, kbd, samp jelölőelemek 24 5.6 acronym jelölőelem 26 5.7 ins, del jelölőelemek 27 5.8 span jelölőelemek 28 6. Hiperhivatkozások 29 7. Képek beágyazása 31 138 8. Listák létrehozása 33 8.1 Sorszám nélküli listák 33 8.2 Sorszámozott listák 34 8.3 Leíró listák 36 9. XHTML táblázatok 37 XHTML táblázatok programtörzse: . 38 10. XHTML keretek 45 11. Java-appletek beillesztése az XHTML dokumentumba 48 12. XHTML űrlapok 50 12.1 Űrlapkészítés 50 12.2 Adatbeviteli mezők 51 13. XHTML szkriptek 57 13.1 Alapfogalmak, beágyazott és külső szkriptek 57 13.2 Eseményszkriptek 58 14. XHTML kódrészletek ellenőrzése 58 CSS technológia. 61 1. Bevezetés 61 2. Stíluslapok felépítése 61 2.1 Alapfogalmak 61 2.2 Beépített stíluslapok 63 2.3 Csatolt stíluslapok 65 3. Stílus osztályok 67

3.1 Stílusosztályok létrehozása egy adott tételnéven belül 68 3.2 Beépített stílusosztályok létrehozása 68 4. Szövegformázás stíluslapokkal 71 4.1 Karakter formázás 71 Betűtípusok kiválasztása. 71 Dőltbetűs betűformátum . 71 Betűvastagság . 72 Betűméret . 72 Kiskapitális forma . 73 4.2 Szövegformázás 74 Sorköz. 74 Szóköz . 74 Betűköz. 75 Szövegdíszítés . 75 Vízszintes szövegblokk igazítás . 76 A bekezdések első sorának behúzása . 76 Kisbetű-nagybetű csere. 77 139 5. Előtérszín-háttérszín 77 5.1 Előtérszín 77 5.2 Háttérszín 78 5.3 Háttérszínmegadás képpel 79 5.4 Háttérfüggelék 80 PHP nyelv . 84 1. Alapfogalmak 84 2. A PHP programfejlesztés eszközei 86 a. PHP-értelmező 86 b. Szövegszerkesztő 86 c. Webböngésző 87 d. Webkiszolgáló 87 e. Adatbáziskezelő 87 3. Programkészítés a PHP fejlesztői környezetben 88 3.1 Első PHP programunk 88 3.2 HTML oldal PHP programmal 89 3.3

Adatfeldolgozás 90 4. A PHP nyelv alkotóelemei 91 4.1 PHP operátorok 91 Aritmetikai operátorok. 92 Relációs operátorok . 92 Értékadó operátorok. 92 Logikai operátorok. 93 4.2 A műveletek kiértékelési sorrendje 93 4.3 Konstansok 93 4.4 Változók 94 4.5 Adattípusok 95 4.6 Megjegyzések a PHP programokban 95 4.61 Egysoros megjegyzések 95 4.62 Többsoros megjegyzések 96 5. Vezérlőszerkezetek 96 5.1 Feltételes utasítások 96 Az if struktúra. 96 if.else struktúra 97 if.else ifelse struktúra 99 5.2 Elágazások – switch utasítás 100 5.3 Ciklusszerkezetek 102 5.31 For ciklusszerkezet 102 5.32 While ciklusszerkezet 103 140 5.33 dowhile ciklusszerkezet 104 6. Függvények 105 6.1 Alapfogalmak 105 6.2 Függvények definiálása 106 6.3 Függvényhívások 107 6.4 Függvények visszatérési értékei 107 6.5 A phpinfo() függvény 109 7. Állományok beágyazása a PHP programokba 110 8. Tömbök 111 8.1 Alapfogalmak 111 8.2 Az array()

függvény alkalmazása 111 8.3 A szögletes zárójelek alkalmazása 111 8.4 A foreach ciklus 112 8.4 Asszociatív tömbök 113 9. PHP/MySQL ADABÁZISKEZELÉS 113 9.1 A MYSQL ELŐKÉSZÍTÉSE 113 9.2 A PHPMyAdmin 115 9.3 PHP csatlakozás a MySQL-hez 118 9.31 Kapcsolatkialakítás a PHP és a MySQL adatbáziskezelő között 118 9.32 A PHP és a MySQL kapcsolatának megszakítása 119 9.33 Az adatbázis kiválasztása 119 9.34 Lekérdezések végrehajtása 120 9.35 Hibaüzenetek kiolvasása 120 9.36 Adattáblák létrehozása PHP segítségével 120 9.37 Adatok bevitele a PHP segítségével 122 9.38 PHP adatbevitel űrlapokkal 123 9.39 Lekérdezések PHP-vel 125 Táblasorok számának lekérdezése . 126 MySQL rekordok kiolvasása . 126 9.4 Információk az adatbázisokról 127 9.5 A WinMySQLadmin 127 10. PHP SZKRIPTEK HOZZÁFÉRÉS-KORLÁTOZÁSA 129 10.1 Az Apache webkiszolgáló alkalmazása a PHP szkriptek hozzáférésének korlátozására 129 11. A MySQL, Apache és

PHP telepítése és konfigurálása 130 11.1 A MySQL adatbáziskezelő telepítése és konfigurálása 131 11.2 Az Apache webkiszolgáló telepítése és konfigurálása 132 11.3 A PHP telepítése és konfigurálása 136 141 Irodalomjegyzék [1] http://www.w3org [2] http://www.gmesterwebcom/e-tananyag [3] Mester Gyula Internet technológiák Szabadkai Műszaki Főiskola, 2002. [4] Mester Gyula Web alkalmazásfejlesztés Szegedi Tudományegyetem, 2002. [5] Endrődi Tamás Internet alapú alkalmazásfejlesztés Gábor Dénes Főiskola, Budapest, 2002. [6] Elisabeth Castro HTML for World Wide Web with XHTML and CSS Peachpit Press, 2003. [7] Dan Livingston CSS & DHTML Webfejlesztőknek Kossuth Kiadó, 2003. [8] Julie C. Meloni A PHP, a MySQL és az Apache használata Webvilág, Panem, 2004. [9] Matt Zandstra Tanuljuk meg a PHP használatát 24 óra alatt Sams, Kiskapu, 2001. [10] George Schlossnagle PHP fejlesztés felsőfkon Sams, Kiskapu, 2004. [11] Julie C. Meloni

Tanuljuk meg a MySQL használatát 24 óra alatt Sams, Kiskapu, 2003. 142