Nagy Gusztáv

Web programozás

0.6. verzió

2008. január

2. oldal

Web programozás (0.6. verzió)

Jogi nyilatkozat

Nevezd meg! - Ne add el! 2.5 Magyarország

A következőket teheted a művel:
• • szabadon másolhatod, terjesztheted, bemutathatod és előadhatod a művet származékos műveket (feldolgozásokat) hozhatsz létre

Az alábbi feltételekkel:
Jelöld meg! A szerző vagy a jogosult által meghatározott módon kell megjelölni a művet (pl. a szerző és a cím feltüntetésével).

Ne add el! Ezt a művet nem használhatod fel kereskedelmi célokra. A szerzői jogok tulajdonosának írásos engedélyével bármelyik fenti feltételtől eltérhetsz. A fentiek nem befolyásolják a szabad felhasználáshoz fűződő, illetve az egyéb jogokat. Ez a Legal Code (Jogi változat, vagyis a teljes licenc) szövegének közérthető nyelven megfogalmazott kivonata. Ez a kivonat a http://creativecommons.org/licenses/by-nc/2.5/hu/ oldalon is olvasható. A teljes licensz a http://creativecommons.org/licenses/by-nc/2.5/hu/legalcode oldalon érhető el. E jegyzet hivatalos honlapjáról (http://nagygusztav.hu) tölthető le a mindenkori legfrissebb verzió.

3. oldal

Bevezetés
Felhasználás
Ezzel a jegyzettel arra vállalkozok, hogy a Kecskeméti Főiskola GAMF Karán tanuló műszaki informatikus hallgatók „kezébe” olyan írásos anyagot adjak, amely az előadások mellett további segítséget ad a Web kliens és szerver oldali nyelvei, technológiái alapszintű megismerésére. A jegyzet használatához nem nélkülözhetetlen, de erősen javasolt az előadások látogatása. A jegyzet alapvetően a tanórák menetéhez kapcsolódó lineáris feldolgozásra készült, de a fejezetek egy része nem épít a közvetlen megelőző fejezetekre. Az egyes fejezetek tananyagának elsajátításához az elméleti rész átolvasása után az ellenőrző kérdések alapos átgondolását, valamint a gyakorló feladatok megoldása javasolt. E nélkül a tantárgy teljesítése a hallgatók többsége számára nem lesz eredményes. A jegyzet feltételezi az alapvető programozási és hálózati alapismeretek meglétét. Ennek hiányában az anyag elsajátítására több időt kell fordítani.

Köszönet
A jegyzet elkészítéséhez elsősorban a W3Schools1 oktatóanyagait használtam fel. Az anyagok fordításában résztvevő hallgatókat szintén köszönet illeti. Végül szeretnék köszönetet mondani a Weblabor2 szakmai közösségének, akiktől a legtöbbet tanultam – többek között – szemléletmódban. Kecskemét, 2007. szeptember a szerző

1 2

http://www.w3schools.com/ http://weblabor.hu/

4. oldal

Web programozás (0.6. verzió)

Tartalomjegyzék
1. Fejlesztőkörnyezet kialakítása..........................................................................................8 1.1. Szerver operációs rendszer.........................................................................................8 1.2. Szerveralkalmazások..................................................................................................9 1.2.1 XAMPP integrált telepítő csomag.........................................................................9 1.2.2 Az Apache telepítése............................................................................................11 1.2.3 A PHP telepítése..................................................................................................12 1.3. Fejlesztőeszközök......................................................................................................13 1.4. Grafikus programok..................................................................................................14 2. A webfejlesztés alapjai.....................................................................................................16 2.1. Tervezési, fejlesztési szempontok.............................................................................16 2.1.1 Honlaptervezés....................................................................................................16 2.1.2 Navigációs struktúra...........................................................................................16 2.1.3 Oldaltervezés.......................................................................................................18 2.1.4 Figyeljünk a látogatók visszajelzéseire.............................................................. 20 2.1.5 Milyen monitort használnak a látogatók?..........................................................21 2.1.6 Milyen böngészőt használnak a látogatók?........................................................21 2.1.7 Mi van a sérültekkel?..........................................................................................22 2.2. A web szabványai...................................................................................................... 2 2 2.2.1 A World Wide Web Consortium (W3C).............................................................23 2.2.2 Validátorok.........................................................................................................23 2.3. Ellenőrző kérdések...................................................................................................23 3. HTML..............................................................................................................................24 3.1. Bevezetés...................................................................................................................24 3.2. Tagok........................................................................................................................26 3.3. Alapvető HTML tagok..............................................................................................27 3.4. Hogy nézzük meg egy oldal HTML kódját?.............................................................31 3.5. Formázás................................................................................................................... 3 3 3.6. Karakter entitások....................................................................................................36 3.7. Linkek........................................................................................................................ 7 3 3.8. Keretek...................................................................................................................... 9 3 3.9. Táblázatok................................................................................................................42 3.10. Listák....................................................................................................................... 5 4 3.11. Űrlapok....................................................................................................................48 3.12. Képek.......................................................................................................................53 3.13. Oldal háttere............................................................................................................ 5 5 3.14. Színek......................................................................................................................56 3.15. Szabványosság......................................................................................................... 6 5 3.16. Stílusok....................................................................................................................57 3.17. Fejrész...................................................................................................................... 9 5 3.18. Szkriptek.................................................................................................................59 3.19. Általános tulajdonságok..........................................................................................61 3.20. Esemény tulajdonságok.........................................................................................61 3.21. URL-kódolás...........................................................................................................63 3.22. Szemantikus HTML...............................................................................................63 3.23. Ellenőrző kérdések.................................................................................................63 3.24. Feladatok................................................................................................................67 3.25. További források.....................................................................................................67 4. XML.................................................................................................................................68

5. oldal 4.1. Mire használjuk az XML-t?......................................................................................68 4.2. XML szintaxis...........................................................................................................69 5. XHTML............................................................................................................................71 5.1. XHTML a gyakorlathoz képest.................................................................................71 5.2. Dokumentumtípus-deklaráció.................................................................................72 5.2.1 XHTML 1.0 DTD-k..............................................................................................73 5.2.2 XHTML 1.1 DTD.................................................................................................73 5.3. Visszafelé kompatibilitás..........................................................................................73 5.4. Feladat....................................................................................................................... 4 7 5.5. További források.......................................................................................................74 6. CSS...................................................................................................................................75 6.1. Bevezetés...................................................................................................................75 6.2. A CSS nyelvtana........................................................................................................77 6.3. A background tulajdonságok...................................................................................79 6.3.1 Háttérszín............................................................................................................79 6.3.2 Háttérkép............................................................................................................ 0 8 6.4. Szövegek megjelenítése............................................................................................81 6.5. Betűk formázása.......................................................................................................82 6.6. Szegélyek..................................................................................................................83 6.7. Térközök a szegélyen belül és kívül.........................................................................85 6.8. Listák........................................................................................................................85 6.9. Méretek.....................................................................................................................87 6.10. Megjelenítés............................................................................................................87 6.10.1 A lebegtetés.......................................................................................................88 6.10.2 Pozicionálási sémák..........................................................................................93 6.10.3 Láthatóság.........................................................................................................95 6.10.4 Z-index..............................................................................................................95 6.11. Látszólagos osztályok..............................................................................................95 6.11.1 Linkek viselkedése.............................................................................................95 6.11.2 Első gyermek.....................................................................................................96 6.11.3 Első betű és első sor..........................................................................................96 6.12. Média típusok.........................................................................................................96 6.13. Validátor..................................................................................................................97 6.14. Esettanulmány........................................................................................................98 6.14.1 Happy Holidays.................................................................................................98 6.15. Ellenőrző kérdések................................................................................................102 6.16. Feladatok...............................................................................................................105 6.17. További források...................................................................................................105 7. JavaScript .....................................................................................................................106 7.1. Bevezetés a JavaScript nyelvbe...............................................................................106 7.1.1 Változók..............................................................................................................107 7.1.2 Elágazások.........................................................................................................108 7.1.3 Operátorok......................................................................................................... 09 1 7.1.4 Dialógusablakok.................................................................................................112 7.1.5 Függvények.........................................................................................................113 7.1.6 Ciklusok..............................................................................................................114 7.1.7 Eseménykezelés..................................................................................................116 7.1.8 Kivételkezelés.....................................................................................................118 7.2. Objektumorientált programozás............................................................................119 7.2.1 Fontosabb objektumok röviden.........................................................................121 7.3. HTML DOM............................................................................................................122 7.3.1 getElementById.................................................................................................123

..........3........................1 Előugró ablak példa..............2 getElementsByClass................................1........... 44 1 9.................................... Adatbázis-kapcsolat kezelése PHP-ben........................................127 7.............2 Változók............165 9..............................................6.......................................124 7....................169 9.................. PHP...............4 Elágazások....... Kódtárak.........................................................................................................................4..........................................8.........................................................................................................................1 MySQL alapok..............................2 Hosszú listák böngészése helyett..............................................................................4.6 Munkamenet-kezelés...................................................................................................................................3 addEvent.....2........................123 7...................8............................3....3...........6 Tömbök.....131 7.......163 9..............2............................................................................129 7................................................................................................................2...........................................................................................................................3.......................................8 PHP hibakezelés......2....................................................................4.......................................................8 Függvények...3 Az Event objektum....................142 8...............................................1........187 9.................1......191 9.. verzió) 7...........................156 9...................151 9.......................5.......................185 9...5............................................7...... Gyakran használt függvények..........126 7..............1.................................................................................................2 A document objektum........11 A $_POST tömb......................................3...................................160 9.........................................................2..........................185 9.......162 9...3 Adatbázisok és táblák létrehozása.....130 7............1..........................................................3...........................171 9..162 9............................1.....141 8........190 9............................................................................................................................................. Alkalmazások...5 Lekérdezés..................... 134 7......................5..5.....1 Dátumok kezelése..................................................................................................................................132 7.........................1.......................................................................................................................................................................................................................................................3...............172 9........161 9.....................................139 8....7 Levélküldés............10 A $_GET tömb.........................................................2................. Diszkrét JavaScript................................2.....................148 9....................4 addLoadEvent...........................2 Az include és társai.......1 Sütik kezelése...........................7 Ciklusok............3 Operátorok..........................6... Felhasználói élmény...............................................8........2..124 7............150 9.................................................................3..............................................5..................................................144 9................6 A WHERE záradék......................................................143 8.....140 8..1..................................... oldal Web programozás (0................................................................................... 54 1 9...................... Haladó témák....................1 Szintaxis....................................146 9........180 9...................133 7........127 7...... Bevezető példa............................................................................................................... Elavult technikák.......................................... AJAX.............. A böngészők AJAX támogatása....5 A switch szerkezet..............................................................................................124 7.....................................................144 9.6.................................................130 7............1 Kliens oldali űrlap ellenőrzés.....................................9 Űrlapok és felhasználói adatbevitel.............9 Kivételkezelés..................1.....5 Sütik kezelése..186 9................................................................................................10.........................1....................................................................1.....................................3...................................159 9......................1.................143 9......3 Fájlkezelés.....2.......................175 9.............................167 9..................193 .....4...... További források.............................................................4 Adatok bevitele adatbázisba...................................4 Fájl feltöltése...............................2 Kapcsolódás egy MySQL adatbázishoz .............................................................................................. 46 1 9....................................... XML-kommunikáció...... Alapok.............................................................2...............................2.138 7.................................................2 E-mail cím elrejtése..............................................1...................................9................................ További források.....132 7...................................................................3..................................................

. A PHP.......................................................................................248 13..................................2............. XML kezelés..................................234 12.....................6.........................................................................................................3.........................2..............3 Vezérlési szerkezetek................................ 51 2 13.......4 Gyorstárazás........................1 Smarty alapok.............201 9................................1.......................2 A .................................................................235 12............................ 98 1 9...................... Feladat.......4.................................2...................................................................................................NET építőkövei.................................8 Adatok módosítása.........................................2.... 34 2 12.............3 Konfiguráció...............208 10....................................10 ODBC kapcsolat létesítése.... Data Access Object.......................252 ..............5 Nézetek...... Smarty....................................................231 12............... Microsoft ...................................229 11..4 GyorsVáz azaz Scaffolding képességek..............................243 12.....2....................................................4..3...... CakePHP....................................................209 10..................................................................2........................194 9...1 Alapkoncepció...............................2 XML DOM................................2 A CakePHP telepítése......................... Ruby on Rails.................................2 Változó módosítók ................................................................222 11............................................................................................................200 9...........................2.................................................................................... Strategy.................................................................................................................219 10.......4..............................................................217 10.......2.............................................................................................................1.........................................................................3...............194 9.................................................................................................1..........................................................1.................................................................1..........................3 ................................2.................247 13...............2.....................................1 Sablon osztály.....1 Beléptető-rendszer.........................................................................2................................2 Blogbejegyzés........................................................................................................................241 12..... Tervezési minták.............201 9.........................................................................................................2................. További szerver platformok.....................196 9.4...247 13............1..... 98 1 9....................1................5.............4 SQL Server 2000.................4...........................................................207 9..........NET Keretrendszer............... Python.................1......................................... További források..2 Objektum-orientált megvalósítás.........................9 Adatok törlése az adatbázisból.........235 12..225 11....................................... Code Igniter............................. Tartalomkezelő rendszerek............2.....................................................................................................................4............................214 10..........................237 12..................................1 A .....................................................................................1 Expat XML elemező.................................................................5..................... Esettanulmányok.................................................................6 Komponensek..........................................230 11......................1 Nem objektum-orientált megvalósítás.................................................................................................................3....7...................................251 14...........................4..................207 9....................2 Az URL-ek felépítése............................................................ Keretrendszerek..............................................................................1....238 12....................................5.........................................................................................................7.....................3 SimpleXML..........................220 11.........211 10............................................NET Szoftver.............2........224 11..............1 Telepítés.................................. 47 2 13..............................................235 12...198 9...............................221 11........................................................................ 47 2 13.........NET...245 13.......................................................250 13.................. mint sablonnyelv..........221 11......230 11............235 12...................2 Könyvtári kölcsönző rendszer...........195 9.................................... MVC............ J2EE.......218 10...........4.. Front Controller....... További források......................................................... oldal 9..............209 10............................................................3.3..........5........................................1... Sablonrendszerek.....................................................2.........................................................7 Az ORDER BY kulcsszó..2...............................249 13....

Linux Szerver operációs rendszer Az elterjedtebb. hogy webes fájl esetén nagybetű soha ne szerepeljen a fájlnévben. Hasonló okok miatt nem célszerű az állománynevekben ékezetes betűket vagy egyéb speciális karaktereket alkalmazni. A nagy nevű disztribúciók friss verziói a mai csúcsgépek meghajtására és csúcs igények kiszolgálására alkalmas. BSD Kevésbé közismert. és nagybetű között.totalcommander. érdemes egy bevezető fejezetet szentelni a hasznos (és többnyire szükséges) előismeretek áttekintésének. de ha a kész munkát más operációs rendszert futtató gépre kell átvinni. Önálló szerver üzemeltetése nélkül. Általános esetben a szerver környezet kialakítása a rendszergazda feladatköréhez tartozik. akkor érdemes néhány technikai dologra figyelni. így nagyszerűen alkalmasak a webes kérések kiszolgálásához.hu/ http://tarhely.hu/ http://www. 1. Akár régebbi.bsd.8.lap. A tanulás szakaszában azonban sokszor a legkézenfekvőbb megoldás az egyetlen (többnyire Windows operációs rendszerrel működő) számítógépünket szerverré alakítani. szintén könnyen telepíthető lehetőséget nyújtanak a rendszergazdáknak. akkor Windows alatt még működni fog az oldal. hogy alapszinten átlássuk a feladatokat. oldal Web programozás (0. mégis fontos. egy kisebb forgalmú honlapot tökéletesen képes kiszolgálni. ezért ha pl. Fejlesztőkörnyezet kialakítása Mielőtt a web nyelveinek. de egyes rendszergazdák körében stabilitása miatt nagy népszerűségnek örvendő Unix5 operációs rendszerek.1.hu/ . Javasolható. 3 4 5 6 http://www. és nem kimondottan asztali (desktop) használatra szánt Linux3 disztribúciók telepítésével alapból egy működő web-. Megjegyzés: Ha a fejlesztéshez Windows operációs rendszert alkalmazunk. Az alapvető változatok szerver feladatokra optimalizáltak. web-hosting szolgáltatás4 igénybe vételével is többnyire Linux alapú szerverekkel találkozhatunk. verzió) 1. azért előfordul az alkalmazása. Először is az állománynevekben a Windows nem tesz különbséget kis-. más felhasználások számára értéktelen vasra is telepíthetünk Linuxot. A Total Commander6 az ilyen jellegű hibák elkerülése érdekében lehetővé teszi az FTP-ver átvitt állományaink kisbetűsítését is. lehetőségeket. akkor nagy bajban leszünk. HTML-ben vagy CSS-ben nem vagyunk következetesek. technikáinak részleteiben elvesznénk. Windows Bár éles webes környezetben nem jelentős a részesedése. A fejezet további részében ezzel a témával fogunk foglalkozni.6. és adatbázis szervert kapunk.linux.hu/ http://www.

hogy bár többnyire működnek.2.2.4. Az XAMP for Windows 1. 1. A telepítő-csomagok hátránya.11. oldal Végül szintén fontos.org/en/xampp-windows.6 + Openssl 0.7 phpMyAdmin 2.3 FileZilla FTP Server 0. legfontosabb a telepítés helye: 7 8 http://www. A szerző által leginkább ajánlott integrált tepepítő csomag az XAMPP7. Ezek közül csak egyet nézünk meg közelebbről. egy esetleges hiba előállása esetén a hiba megszüntetése eléggé bajos lehet.apachefriends.24 Mercury Mail Transport System 4.0.9.gif">.9. és minden szükséges alkalmazást telepítő és bekonfiguráló programokkal is. A szolgáltatások körében lehetnek jelentősebb eltérések is.1. mivel kevésbé tudunk a csomag működésébe belelátni. próbálkozhatunk előre csomagolt.2.1 XAMPP integrált telepítő csomag Mivel a szerver alkalmazások telepítése nem mindig egyszerű feladat.51 PHP 5. pl.6. a többi alkalmazása hasonló.2. Szerveralkalmazások 1.52 A letöltött telepítőprogram lényegében a szokásos kérdéseket tesz fel.Fejlesztőkörnyezet kialakítása 9.apachefriends.org/ http://www.html .5 PHP 4.5 változata8 a következő szoftvereket telepíti és konfigurálja: • • • • • • • Apache HTTPD 2. <img src="C:\www\kep. hogy a könyvtárnevek megadásánál a \ helyett mindig a / jelet használjuk. és soha ne adjunk meg Windows alatt érvényes teljes elérési utat.8g MySQL 5.

oldal Web programozás (0.6.10. verzió) A telepítés végezhető parancssorból is a setup-xampp. de legegyszerűbb az XAMPP Control Panel alkalmazása: A telepítés után a feltelepült rendszer kipróbálása és a jelszavak megadása célszerű a Security oldalon: .bat parancsállomány futtatásával: A telepítés után a Start menüből és parancssorból is vezérelhetjük az alkalmazásokat.

2 Az Apache telepítése9 Az Apache webszerver letöltési oldaláról10 töltsük le a megfelelő telepítő állományt. az e-mail címnek ebben az esetben nincs jelentősége. vagy más hasonló komplex programcsomag alkalmazása mellett döntünk. akkor a fejezet hátralevő részében bemutatott önálló alkalmazástelepítéseket már nem kell elvégeznünk.cgi 10 .apache.1. Érdemes szolgáltatásként (service) telepíteni a szervert.hu/cikkek/apachephptelepites http://httpd. A telepítő varázsló ablakai közül a következőket érdemes kiemelni: Saját gépre telepítés esetén kétszer localhost megadása javasolt. a rendszerünk kész a webfejlesztés tanulására. 1.org/download. oldal Ha az XAMPP. 9 További forrás: http://weblabor.2.Fejlesztőkörnyezet kialakítása 11.

Természetesen szolgáltatásként telepítve is van lehetőség a szerver manuális menedzselésére. esetleg a DocumentRoot beálltása lehet szükséges. és egy konzol ablak állandóan a tálcánkon fog csücsülni. leállítani. A képen látható zöld háromszög (mint a szokásos Play gomb) jelzi a szerver futását is. Telepítés után a gép biztonsági beállításait. így annak változása esetén a szervert újra kell indítani.windows. 11 További források: http://weblabor. Sikeres telepítés esetén hasonlót kell látnunk: Az óra mellett megjelenik az Apache Monitor: A Monitor ikonnal egyszerűen tudjuk indítani.12. amelyben a szerver konfigurációja található.php. Megjegyzés: A konfigurációs állományt a szerver csak az indulásakor veszi figyelembe. ha máshova szeretnénk a webre szánt állományainkat helyezni. verzió) ugyanis ellenkező esetben csak manuálisan lehet indítani. Megjegyzés: A konfigurációs állományban az operációs rendszertől függetlenül mindig a / jelet kell használni elérési utak megadásához. 1. hogy a telepítő varázslót (installer) vesszük igénybe. A konfigurálással kapcsolatban meg kell még említeni a httpd.6. stb.hu/cikkek/apachephptelepites. Az alapkonfiguráció kezdetben tökéletesen megfelel. vezérelni a szervert. vagy pedig a kézi telepítést választjuk (zip package).net/downloads. tehát ettől még nem kell a szervernek állandóan futnia.php.conf állományt. pl. A kipróbálás a böngészőbe beírt localhost címmel történhet. A letöltési oldalon 12 választhatunk. szoftvereit (elsősorban a tűzfalat) valószínűleg konfigurálni kell a sikeres használat érdekében.php .net/manual/hu/install. oldal Web programozás (0. http://hu.php 12 http://www.3 A PHP telepítése A PHP telepítése11 is a kívánt telepítőkészlet letöltésével kezdődik.2. az Apache Monitor segédprogrammal.

hu/cikkek/phpfastcgimodban 14 http://notepad-plus. és mi legyen az alapértelmezett kiterjesztése a PHP állományainknak.php elfogadása. Kiválaszthatjuk még.html állományokat is dolgozza fel.conf állományhoz.net/ . Megjegyzés: Kérhetjük azt is az Apache szerverünktől. Egy jobb szerkesztő (például NotePad++14) viszont már igen jól használható. A feltett kérdések alapján a php. ezért talán ezt érdemes választani. Arra érdemes figyelni. Ezt a következő sorral tudjuk előírni: AddType application/x-httpd-php . ezért még vissza kell nyúlnunk a httpd. hogy ha az elérési út nem tartalmaz állománynevet.php Szükséges a php. hogy a folyamatot a fejlesztő. Ehhez először is a megfelelő dll állomány használatát elő kell írnunk (az elérési utakat a PHP telepítése alapján kell megadni): LoadModule php5_module "c:/php/php5apache2. A prog13 A modul használata itt a tanulás idejére ajánlható. Apache konfiguráció ismét Rossz hír. Fejlesztőeszközök Fejlesztőeszközök témájában érdemes először a szélsőséges példákat áttekinteni. Az említésre érdemes kérdések közé tartozik a hiba megjelenítés (error reporting) szintje. és nem a program vezérli.dll" A php kiterjesztéssel rendelkező állományokat a PHP értelmezőnek át kell adni. A szerző véleménye szerint a webfejlesztőnek olyan eszközökre van szüksége. hogy (első ránézésre) semmilyen programozói.php-t próbálja az Apache betölteni elsőként. bár több okból sem célszerű.sourceforge. amivel még többé-kevésbé lehet webfejlesztést végezni. Éles környezet esetén érdemes megfontolni a jóval biztonságosabb FastCGI módban való futtatást.3. A telepítési folyamat során többnyire az alapértelmezett beállítások elfogadása elegendő. mégis erősen korlátozzák azt.php nevet. amelyek úgy teszik lehetővé az oldal elkészítését.Fejlesztőkörnyezet kialakítása 13.ini konfigurációs állomány is elkészül. Ajánlott modulként13 telepíteni a PHP-t. amelyek úgy adnak támogatást. hogy a . és csak annak kimenetét visszaadni a felhasználónak. oldal Varázsló használata esetén kicsit kevesebb dolgunk lesz. Itt is javasolt az alapértelmezett . hogy az Apache még nem tud a PHP-nkről. További információ: http://weblabor. 1. Ebbe a kategóriába tartozik például a népszerű FrontPage. hogy milyen webszervert használunk. A másik végletet azok a WYSIWYG (What You See Is What You Get) programok képviselik. hogy Standard helyett Advanced telepítést válasszunk.1.ini helyét is megadnunk: PHPIniDir "C:/php" Végül a DirectoryIndex felsorolásába érdemes első helyre tenni az index. de ezt ritkán alkalmazzuk. Az eszközök közül a Jegyzettömb az a minimum. akkor az index. hogy legyen lehetőségünk néhány beállítás megadására. ahol a tanulás idejére mindenképpen a legtöbb támogatást nyújtó alapértelmezett beállítást érdemes választani. Ezen eszközöknek az előnyük a hátrányuk: bár adnak lehetőséget a kódszintű szerkesztésre. webes tudásra nincs szükség.

de érdemes valamivel komolyabb szoftvert alkalmazni. színkorrekciót.net/ . E feladatok ellátására részben a Paint is megfelel. és „ráhúzza” minderre a dizájnt. Ezen kívül rendkívül hasznos szolgáltatása a könnyen konfigurálható sablonbeillesztés. 15 16 http://www. a szöveget és a fényképeket. valamilyen szöveges formátumban a szöveges részt. javítani. Grafikus programok Mivel ez a jegyzet nem grafikusok vagy dizájnerek. A szerző sokáig a shareware Jasc (azóta Corel) Paint Shop Pro híve volt. ezért itt csak néhány alapvető dologról lesz szó.14.6.cx/ http://www. A kódszínezést nyújtó programok közül a szerző kedvence a Context15. verzió) ramozói szerkesztőprogramok e középső kategóriájának két alapvető szolgáltatása a kódszínezés és a kódkiegészítés. Ebben az esetben a fejlesztő feladata az. A grafikus programok szempontjából ez azt jelenti. és nyers formában a tartalomhoz kapcsolódó fényképeket. oldal Web programozás (0. a fényképeket pedig méretre hozni. egy üres HTML állomány esetén 4-5 billentyűleütéssel egy 5-6 soros minimális HTML oldalt hozhatunk létre.4. (Pl. azt is általában csak 1-2 nyelvre.context. hanem webfejlesztők számára készült.getpaint. 1.NET16 programra. amely – többek között – magyar felülettel több. világosítást stb. hogy a dizájnt alkotó képet téglalap alakú részekre kell vágni. végrehajtani. hogy a látványterv alapján elkészítse az oldal HTML és CSS kódját. mint 200 nyelv színezését tudja megoldani. de a közelmúltban áttért a teljesen ingyenes Paint. A fejlesztő a valós életben többnyire kép(ek) formájában kapja meg az oldal látványtervét. Ingyenes szoftverek közül kevés tud kódkiegészítést.

Az alapvető szükséges szolgáltatások: • • • • • Mentés GIF.Fejlesztőkörnyezet kialakítása 15. oldal Gyakorlatilag itt is ízlés.1. hogy ki melyik programot választja. szokás kérdése. JPG és PNG formátumban. Átméretezés Kivágás Korrekciók Szűrés .

1. az oldalak közötti navigáció és az egyes oldalak navigációs lehetőségei teljes egységet alkossanak. hivatkozások a gyártó oldalára. hogy a látogatók fejével gondolkozzunk.1.2 Navigációs struktúra A honlap szerkezetének kialakításában nagyon fontos. fejlesztési szempontok Egy weboldal színvonalas elkészítését mindig komoly tervezés előzi meg. valamint alapos bemutatása (képek.16. és a számukra áttekinthető oldalszerkezetet alakítsuk ki. Nem magától érthető az sem. de csak látszólag. Tipikus hiba lehet. pontos és részletes adatok. termék-összehasonlítási lehetőség) sokkal fontosabb. A végcél a felhasználók megfelelő kiszolgálása. verzió) 2. Kinek szól? Mit szeretnénk közölni. videofelvételek. hogy egy céges honlapon a cég belső szerkezete kap hangsúlyt ahelyett.6. A következő ábra egy zavaros szerkezetű honlapot mutat (az összekötő vonalak a másik oldalra átvezető linkeket jelentik): Általában faszerkezetű hierarchia kialakítására érdemes összpontosítani. igényeit figyelembe vegyük. Ha például a honlapon keresztül termékeket szeretnénk eladni. hogy egy menü mennyi elemet tartalmazzon. hogy a felhasználók viselkedését. 2. akkor a termékek több szempont szerinti kategorizálása. Megjegyzés: A művészi önkifejezés.1 Honlaptervezés A honlaptervezés a célok megfogalmazásával kezdődik. A webfejlesztés – mint az ipari alkotó tevékenység általában – a felhasználók igényeit nem hagyhatja figyelmen kívül. minthogy kik a cég vezetői és mi a cég szerkezeti felépítése. ezért fontos. 2. és szükség esetén gráffá tovább bővíteni. A webfejlesztés alapjai Weboldalakat azért készítünk (és készíttetnek velünk). 2. oldal Web programozás (0. átadni? Milyen felhasználói interakciókra lesz szükség? Egy nagyobb honlap tervezésénél különösen fontos. Tervezési. kereshetősége.1. hogy a tartalmi szerkezet. vagy éppen a blogolás látszólag háttérbe szorítja ezt az elvet. mert szeretnénk valamit nyújtani a felhasználóknak. ahol a sok lehetőség közül nehéz választani: . hogy a látogatók igényeire összpontosítana. Az egyik véglet az egyszintű felépítés.

milyen problémával találja szemben magát a látogató. akár felfele és oldalra is: . A más oldalak esetén jellemző (egy vagy többszintű) kategóriába való sorolás és a keresés alap navigáció természetesen itt is jellemző. Külső oldalról (pl. oldal A másik véglet esetén a sokszintű felépítésben nem egyszerű megtalálni az adott tartalmat: Meg kell tehát keresni az arany középutat a két véglet között. és további alternatív navigációt is lehetővé tenni. Mindig gondoskodni kell tehát arról.2. De ezen kívül még fontosabbá vált az időbeli elhelyezkedés. a címkék (tagok) menti gyors elérési lehetőség.A webfejlesztés alapjai 17. ha a nyilakkal jelzett módon a navigációs irány csak fentről lefelé létezik. A navigáció irányai A következő ábra jól mutatja. hogy bármilyen irányban tovább tudjunk lépni egy adott oldalról. Google keresési oldal) érkezve a továbblépés nem igazán lehetséges. sőt a más blogokkal való kapcsolatok is. Megjegyezés: Jól megfigyelhető a tipikus blog oldalak többféle navigációt lehetővé tevő felépítése.

értékes információt tartalmaz-e. hogy jobban tájékozódik az oldalon. Már a címben konkrétan ki kell fejtenünk. gondolatok a bekezdéseink legyenek rövidek és lényegre törők a fejezetek legyenek rövidek és áttekinthetők hagyjunk megfelelő távolságot az egyes bekezdések. rövid összefoglaló a cím után (szokás félkövéren vagy nagyobb betűmérettel kiemelni). nyomtatásban megjelenő írásokkal szemben itt a csattanót. linkekkel és egyéb jelölésekkel kiemelt kulcsszavak. témafelvetés. és természetesen a kezdőoldalra való ugrás is alapvető. Ez nem csupán egy bevezetés. verzió) A „felfelé” irány elsősorban közvetlen szülőt is jelenti. A következő elvek tehát elsődlegesen a webre írt tartalom esetén érvényesek. Megjegyzés: Természetesen itt is vannak kivételek. akkor a látogató valószínűleg nem kezdi el az oldalt bogarászni. amely sűrítve az egész mondandót kifejti. Ha nem látszik első ránézésre. Az olvasók pásztáznak Ha azt hisszük. a meglepetést nem szabad a végére tartogatnunk. vizuálisan is (jellemzően félkövér szedéssel) jelzett összefoglalót talál.1. de HTML formában is elérhető). Ez után következhet a tényleges. mit is kap az olvasó ezzel az oldallal. hogy a keresett információ itt van (pl.3 Oldaltervezés Vizsgálódásunkat az egész honlap tervezéséről az egyes oldalak tervezésére helyezzük át. hogy az oldal számára fontos. vagy a jellegénél fogva az olvasó tudja. Tartalmi piramis A hagyományos. Ha felkeltettük az érdeklődését. akkor „csupán” annyi a következő szempontok jelentősége. egy törvény szövegét olvassa). akkor jó. oldal Web programozás (0. részletes kifejtés. a hosszra mindenképpen érdemes figyelni) . Mivel az interneten rengeteg forrás van. a látogató néhány másodperc alatt eldönti. hogy a látogatónk a teljes oldalt el fogja olvasni. hogy mik is segítik az oldal gyors áttekintését: • • • • • • • kifejező fő és alfejezetcímek. akkor tévedünk. ha a cím alatt következő.6.18. 2. ez a jegyzet elsődlegesen A4-es méretű nyomtatásra van tervezve. Ha az oldal tartalma elsődlegesen más médiumon jelenik meg (pl. fejezetek és címek között egy sorba lehetőleg ne kerüljön 70-nél több betű (bár a 70-es számban nincs teljes megegyezés. mert akkor a többség nem fogja az oldalt végigolvasni. Érdemes átgondolni a saját tapasztalatok alapján. hanem egy olyan tartalmi összefoglaló. hogy mit is tartalmaz az oldal.

és keresné az oldalhoz kapcsolódó egyéb oldalakat. Oldal navigáció A honlap minden oldalán egységes szerkezetű. hogy az éppen aktuális oldal egy cikk (Cikkek) az adatbázis (Adatbázis) kategóriából Megoszlanak a vélemények arról. cikkeit17 javasoljuk tanulmányozni. Viszonylag kevés honlapon használják.hu/cikk/cikk. hiszen ha nem olvassa. oldal ha mégis hosszú az oldal (néha indokolt lehet). névhez vagy kifejezéshez jól kapcsolhatók. akkor segítsük az oldalon belüli navigációt bevezető tartalomjegyzékkel. halszálkás menü. akkor nem is veszi észre azokat. Másodlagos szerepet azonban sokszor betölt. amelyek egy szóhoz. Megjegyzés: Az oldalon elhelyezett egyetlen JavaScript-es vissza link (<a href="javascript:history.hu/ . Az oldal alján levő hivatkozások nem mindig szerencsések. pedig sokszor célszerű megoldás az ún.) A látogató mindig tudja. hogy legyenek hasznos hivatkozások a szövegben és a szöveg mellett is. (Hasznos lehet az oldalon elhelyezett másodlagos navigáció is. 17 18 http://www. hogy a szövegben levő. vagy görgeti végig az oldalt a látogató.III. hogy hol van a honlapon belül.2. és tudjon a megfelelő irányba navigálni. amelyek az oldal egészéhez kapcsolódnak. ami az adott oldal tartalmi szerkezeten belüli helyzetét mutatja. hiszen a link a Google oldalára fogja visszavinni. A Weblabor honlapja18 jól mutatja a fő navigációs elemeket: • • • a WL logó a kezdőoldalra visz.hu/) Webdesign alapok I.back()">Vissza</a>) a lehető legrosszabb megoldás.phtml?id=38 http://weblabor. Az azonban mindenképpen fontos.pszichologia. bárhol is vagyunk kétszintű főmenü (itt túl sok helyet foglalna. A látogató lehet. de így nem találja. vagy valamelyik oldalsó részének felső részén. hogy a Google oldaláról jutott egy belső oldalra.pszichologia. jól áttekinthető menürendszer legyen az oldal felső. ha egyszerre látszana a két szint összes választási lehetősége) halszálkás menü mutatja.A webfejlesztés alapjai • • az oldalaink ne legyenek túl hosszúak 19. mindenképpen oldalra érdemes tenni. Megjegyzés: A szerző véleménye szerint a szövegben célszerű azokat a hivatkozásokat elhelyezni. linkekkel A témához a Pszichológia Online (http://www. vagy a szöveg melletti hivatkozások hasznosabbak. Ezzel szemben olyan hivatkozásokat.

hálózati elérés nélkül fejleszti a honlapot. vagy az egyre elterjedtebb mobil böngészésre is érdemes gondolni. Soha nem lesz minden felhasználónak olyan sebességű internet kapcsolata. mint egy újabb lehetőséget. oldal Web programozás (0. Néhány tipp arra nézve. és a látvány sem csak a teljes letöltődésre fog összeállni.4 Figyeljünk a látogatók visszajelzéseire Ha egy látogató nem csak az orra alatt zsörtölődik. Adjuk meg a képek méretét a HTML forrásban. hogy a fejlesztő a saját gépén.1. verzió) Alternatív navigáció A hierarchikus felépítés nem minden esetben jó megközelítés. hogy leírja a véleményét. Mindig lesznek olyan felhasználók.6. Több kisebb táblázat egyébként is áttekinthetőbb lehet. és nem veszi figyelembe. mint esetleg a fejlesztőnek. hogy a képek letöltődéséig is tudja a felhasználó hasznosan tölteni az idejét. A letöltési sebesség Általános hiba. akkor azt valószínűleg érdemes figyelembe venni. hanem szöveggel (is) jelenjenek meg. • • 2. nehezen használható részeket. ahol az egyes címkék. Az oldal címei tehát ne képpel. ha az oldalnak legalább egy része nem lesz használható (olvasható). és az oldalak között több-több kapcsolat van. . hogy a látogatóknak meg kell majd várni az oldal letöltődését. hanem a több gép között megosztott hálózati kapcsolatra. így nem fog „ugrálni” az oldal a képek tényleges letöltődése után. A címkéket összefoglaló oldalakon a betűmérettel is szokás jelezni a címkék relatív gyakoriságát: Talán érdemes lenne ezt is egyre több oldalnál alkalmazni. Ne használjunk nagy méretű táblázatot az oldalon (főleg az oldal szerkezetének kialakításához ne). Egy felmérés szerint 7 másodperc után a látogató másik oldalra megy.20. Egy külső szemlélő gyakran könnyebben észreveszi a hibákat. Ha mindenképpen képet használunk. mert a teljes táblázat letöltődéséig nem fog összeállni a látvány. akik ilyen hibás tervezés miatt nem fogják az oldalt látogatni. nem elfelejtve a logikai hierarchiából következő lehetőségeket sem. Itt nem csak a ma már egyre jelentéktelenebb számú modemes elérésre. akkor legalább az img tag alt tulajdonságát adjuk meg. Főleg blog típusú oldalak esetén terjed a címkék (tag) vagy kulcsszavak használata. hogy mit tehetünk a kevésbé gyors kapcsolattal rendelkező látogatók megtartásáért: • Az oldal képek nélkül is olvasható legyen. hanem még veszi is a fáradtságot.

A gyakorlatban azonban sokkal jobban beválik. 2. Ráadásul (már a drágább technológia használatából sejthetően) fizetőképesebb látogatói rétegről lehet szó. de ez nagyon szegényes információ több okból is. „Mi a véleményetek az új oldalról?” című fórum 24 óra alatt 32 hozzászólást eredményezett. hogy az ő esetében jól működjön az oldal: átlátható és esztétikus legyen. A szerző még nem találkozott egyetlen felhasználóval sem. Az utóbbi évek szerencsére pozitív tendenciákat mutat: a kb. hogy a böngésző ablakon belül mennyi eszközsort alkalmaz. hogy foglalkozzon a látogatók igényeivel. aminek nagy részét még aznap be is építették a dizájnba! Megjegyzés: Ennél a pozitív példánál azért figyelembe kell venni. 30-40% részesedéssel rendelkező egyéb böngészőt alkalmazó felhasználóról is kezdenek tudomást venni a fejlesztők. pl. hogy milyen böngésző-beállításokat alkalmaz. Végül azt a súlyos (tév)hitet is érdemes górcső alá venni. akik az Explorerre írt kódjukat szeretnék a többi böngészőre is használhatóvá alakítani. Komolyabb problémáik főleg azoknak a fejlesztőknek vannak. 19 http://joomla. Nem tudjuk azt sem. Sőt azt is érdemes figyelembe venni. Nem tudjuk. A felhasználó nem biztos. A felhasználónak egyetlen igénye az.2. El lehet azt mondani. ha csak a saját környezetén teszteli az oldalt. hogy teljes képernyős méretben használja a böngészőt.1.hu/ . aki képernyőképeket összehasonlítgatva pixel-eltéréseket keresne egy oldalon :). hogy nagy hibát követ el a fejlesztő. mekkora a tényleges képernyő méret. amiből a sok dicséret mellett több mint 10 építő kritikai vélemény volt. 2. miszerint az oldalnak minden böngészőn és minden felbontásban pixelre pontosan ugyanúgy kell kinézni. hogy a honlap látogatói jelentős részt maguk is webfejlesztők vagy tartalomfejlesztők. hogy 1-2 éven belül a mobil telefonról böngészők számottevő résztvevői lehetnek a látogatóknak. és hogy fog kinézni az oldal a képernyőn. Innen általában kisebb lépés az egyes böngészők speciálisabb igényeinek kielégítése. 2008-ban célszerű az 1024x768-tól legalább az 1600x1200-as felbontásig tesztelni többféle operációs rendszer és többféle böngésző alatt. Az a probléma. oldal Például a Joomla! Magyarország honlapján19 történt 2006 augusztusi dizájn (és ebből következően navigáció) váltás után a kezdőoldalra linkelt. hogy nem vette a fáradtságot. és azok pontosan hogyan befolyásolják a megjelenítést. nagy monitorok (19. Statisztikai eredményeket egyedül a képernyő felbontásokról lehet tudni. ha a szabványok pontos ismerete alapján felépített oldal készítünk.5 Milyen monitort használnak a látogatók? Alapvetően több kérdést is fel kell vetni: mekkora a képernyő felbontás. Bár pontosabb úgy fogalmazni. hogy ezekről nem sok biztosat tudunk megállapítani. 21 col) esetén.A webfejlesztés alapjai 21.1. vagy éppen a tálcája melyik oldalon és milyen méretben van.6 Milyen böngészőt használnak a látogatók? Sok fejlesztő az utóbbi években kizárólag egy böngészőre (Microsoft Internet Explorer) és egyetlen képernyőfelbontásra „optimalizálta” az elkészült oldalt.

22. Sőt érdemes belegondolni.hu/forditasok/wai_quick_tips. mint ahogy a programozás során alkalmazott kódolási konvenciók egységes betartása is megtérül a csapatmunkánál vagy a későbbi karbantartásnál. például a közismert Total Commander Nézőkéjével (F3) egy HTML állományt megnyitunk. egyszerűbb lesz a mások szabványos kódját megérteni és módosítani. (A gyakorlatban a böngészők szabvány-követése az új verziók megjelenésével javulni szokott. Ebben a helyzetben különösen fontos. de nem áttekinthető vizuálisan.7 Mi van a sérültekkel? Vannak emberek. a W3C WAI gyors tippek21 oldalán. hogy a tartalmaink a sérült emberek számára is elérhetők legyenek. az a rendszeresen frissülő és minőségi tartalom.6.hu/ajanlasaink. semmi flash. hogy egy weboldalt szöveges böngészővel nézünk meg (semmi kép. és a szövegben történő navigáció is elég körülményes. vagy teljesen hiányzik. esetleg stagnál. a Paramédia Ajánlásaink20 oldalán.html http://w3c.html http://weblabor. Sok „álszakértő” ajánl nyakatekert trükköket a keresőoptimalizálás érdekében. Vakok és látássérültek számára felolvasó szoftverek vagy Braille perifériák teszik a weboldalak szöveges tartalmát hozzáférhetővé. hogy a szöveg az elejétől a végéig sorosan olvasható. Tudatos odafigyeléssel lényeges plusz munka nélkül elérhető.) Ha csapatban dolgozunk. hogy egy – a számítógép kezelését ismerő – vak vagy látássérült több esetben rá van kényszerülve. mint ami megköti a kezüket. oldal Web programozás (0. hogy a teendőit interneten végezze. majd olyan kicsire méretezzük az ablakot. A témához további információk találhatók pl.hu/cikkek/akadalymentesweb1 Ami még ennél is fontosabb. 2. A web szabványai A webfejlesztők gyakran küzdenek a különböző böngészőkben és böngészőverziókban is használható oldalak kialakításáért. 20 21 22 23 http://www. hogy egyszerre csak egy szót lássunk. verzió) 2. legalábbis a szabvány adott verzióját tekintve.2. . Ráadásul ez azt is jelenti. akik úgy tekintenek a szabványokra. Hosszú távon azonban ez a hozzáállás nem lesz kifizetődő.) Vannak fejlesztők. hallásuk sérült. hogy a webes szabványoknak megfelelő oldalakat hozzunk létre. semmi formázás :). mint a jól látók. Ők is szeretnék használni a webet.paramedia. (Hasonlóan. vagy a Weblabor Akadálymentes weboldalak22 cikksorozatában. A szabványok alkalmazása ezen kívül a jövőben megjelenő verziókkal is jó eséllyel használható oldalakat eredményez. Végül a keresőrobotok is jobban tudják értelmezni a szabványos oldalakat. hiszen már a fizikai közlekedés is problémás lehet számára.1. és ezért böngésző-specifikus trükköket alkalmaznak az oldalak készítésénél. Ezt a helyzetet látókként úgy próbálhatjuk ki. pedig a szabványok követése az egyik23 legalapvetőbb teendő. akiknek a látásuk.

honlapokat.3.w3c. W3C? Mi a W3C feladata? Melyek jelenleg a szabványkövető böngészők? Milyen verziónál tartanak ma a népszerűbb böngészők? 24 25 http://www. Ellenőrző kérdések • • • • • Melyik a böngészők által támogatott legmagasabb HTML (nem XHTML!) verzió? Minek a rövidítése: HTML.w3. A legfontosabb tagjai: • • • • • • • • IBM Microsoft America Online Apple Adobe Macromedia Sun Microsystems Budapesti Műszaki és Gazdaságtudományi Egyetem (2006 óta) Akár személyesen is bekapcsolódhatunk az ajánlások kidolgozásába a W3C Magyar Iroda25 által koordinált módon. Célja.2. oldal 2. amelyekkel a honlapunk szabványossága (szabványnak való megfelelése) tesztelhető.org/ http://www. 2. a WWW kitalálója által 1994-ben alapított szervezet. 2. hogy a webből a lehető legtöbbet lehessen kihozni. Elsődleges tevékenysége a web szabványok (egész pontosan ajánlások) kidolgozása.1 A World Wide Web Consortium24 (W3C) A W3C Tim Berners-Lee.hu/ . A fontosabb validátorokkal a későbbiekben fogunk ismertetni.2 Validátorok A W3C és más szervezetek is készítenek olyan programokat. A hibák mellett sokszor segítséget is kapunk a szolgáltatások igénybevételével.2.2.A webfejlesztés alapjai 23.

Bizonyos tagok.html állományt! (További lehetőségünk. A HTML a mai gyakorlatban már tisztán csak az információra. és annak struktúrájára figyel. így ezeket a gyakorlatban is csak kevesen használják.24. • 3. HTML A HTML nyelv az az alap. hogyan kell megjelenítenie az oldalt A HTML állomány html kiterjesztéssel rendelkezik A HTML állományt egyszerű szöveges (editor) programokkal (pl. Bevezetés Mi az a HTML? • • • • • A HTML a Hyper Text Markup Language rövidítése A HTML állomány egyszerű szövegállomány.html néven! Nyissuk meg a böngészőnket. A terjedelmi okokon kívül a következőkre kell elsősorban gondolni: • Bizonyos HTML jellemzők a mai napra elavultnak tekinthetők. A CSS használatával ugyanis sokkal több és jobb lehetőségünk lesz a kinézet leírására. Ezt egyébként szemantikus kódolásnak is nevezzük. verzió) 3. hogy a Windows Intézőnkben duplán kattintunk az állomány nevére. tulajdonságok a böngészők által nem egységesen támogatottak. majd gépeljük be a következő szöveget: <html> <head> <title>Az oldal címe</title> </head> <body> Ez az első honlapom. <b>Ez a szöveg félkövér</b> </body> </html> Mentsük el az oldalt oldal. Itt elsősorban a kinézet esztétikai megjelenésére kell gondolni. de sok nyelvi elemet már nem tartalmaz. Ez a fejezet segítséget ad a HTML lehetőségeinek megismeréséhez.1.6. amivel minden webfejlesztőnek alaposan tisztában kell lenni. Jegyzettömb) is létrehozhatunk Hogyan kezdjünk neki? Windows operációs rendszer alatt indítsuk el a Jegyzettömböt (vagy inkább egy komolyabb editort). de az állomány böngészőre vonszolásával is célt érünk. majd a Fájl menü megnyitás parancsát választva keressük meg az előbb elmentett oldal. amely rövid jelölő tagokat tartalmaz A jelölő tagok alapján tudja a böngésző. oldal Web programozás (0.) A következőhöz hasonlót kell látnunk a böngészőnkben: .

Kérdés: Melyik böngészőt használjam? . pl. A <body> tagok közötti szöveg jelenik meg a böngésző ablakában. vagy a Word. ugyanakkor kiegészítő szolgáltatásokkal (pl. HTML szerkesztők Léteznek olyan szerkesztőprogramok. de a változások nem jelentek meg a böngészőben. Ezeket a programokat WYSIWYG (what you see is what you get) editoroknak hívjuk. ha minőségi HTML oldalakat szeretnénk létrehozni.) Bizonyos esetekben a böngésző gyorsítótárából veszi az oldalt. tehát az állománynév (annak ellenére. ismertebb. hogy ez nem is látszik): oldal.html. és nem küld újabb kérést a szerver felé. A <head> és </head> tagok közötti rész a fejléc információ. Miért? Válasz: A Windows alapértelmezett beállítása szerint a Jegyzettömb a html kiterjesztés után még egy txt kiterjesztést is tesz. amelyekkel tényleges HTML ismeretek nélkül is lehet HTML oldalakat létrehozni. (Elrettentésként érdemes megnézni egy Word-ből mentett weblapot. tagok beszúrása gombnyomásra stb. pl. itt ér véget a dokumentum a böngésző számára. vagy a Mappa beállításai között a bűnös „Ismert állománytípusok esetén a kiterjesztés elrejtése” beállítást kikapcsolni. ezek azonban kerülendők. (Nem szükséges semelyik programot bezárni. Ilyenkor a gyorsítótár kiürítése vagy a Ctrl+F5 billentyűkombináció alkalmazása segít. a FrontPage.3. csak menet közben váltogatni a két program között.) gyorsítani lehet a munkát. színkiemelés. Az utolsó tag a </html>. Miért? Válasz: A szerkesztő programban menteni. hogy hol kezdődik a HTML oldal. Ezek a programok ugyanis kisebb-nagyobb mértékben „teleszemetelik” a kódot. majd a böngészőben frissíteni kell a dokumentumot.) Érdemes inkább olyan szerkesztőprogramot választani. A <b> és </b> tagok hatására a szöveg félkövéren (bold) jelenik meg. Kérdés: Változtattam a HTML dokumentumon. ahol a HTML kód fölött teljes ellenőrzéssel bírunk. A böngésző erről fogja tudni. Total Commandert alkalmazni. A <title> tagok közötti szöveget a böngésző a címsorában jeleníti meg. Érdemes más szerkesztő programot.HTML 25. Gyakran ismételt kérdések Kérdés: A böngésző a HTML tagokkal együtt jeleníti meg a begépelt szöveget. oldal A példa magyarázata A dokumentum első tagja a <html>. Az itt megjelenő szöveget a böngésző nem jeleníti meg közvetlenül.txt.

<b>Ez a szöveg félkövér</b> </body> Az elem kezdő tagja <body> és a záró tagja </body> Miért alkalmazzunk kisbetűs tagokat? Maga a HTML nyelv nem érzékeny a kis-. A következő is egy HTML elem: <body> Ez az első honlapom. 2007 nyarán hazánkban és a környező országokban a böngészők 30-40%-a Firefoxot használ. és a záró tag </b>. hogy milyen háttérszínnel kell az oldalt megjeleníteni. mint a <b> és </b> A pár első tagja a kezdő. amely rövid jelölő tagokat tartalmaz. Tagok A HTML állomány egyszerű szövegállomány. 3. a következő szöveget kell begépelnünk: <body bgcolor="red"> . A <body> tag definiálja az oldal body elemét. A profi fejlesztőnek egyébként is minden elterjedtebb böngészőn és verzión tesztelni kell az oldalt. de a HTML továbbfejlesztésének tekinthető XHTML már igen. és nagybetűkre. amely a szabványokat a lehető legjobban követi. jellemzők) A tagok tartalmazhatnak tulajdonságokat is. verzió) Válasz: A tanuláshoz célszerű olyan böngészőt választani. amiből tudja a böngésző. a tartalmazott szöveg Ez a szöveg félkövér. HTML tagok jellemzői • • • • • • A HTML tagok jelölik ki a HTML elemeket A HTML tagot a < és > írásjelek veszik körül (ezek az írásjelek az egyszerű szövegekben nem engedélyezettek) A HTML tagok általában párban vannak. ha piros háttérszínt szeretnénk. a második a záró tag A szöveg (tartalom) a kezdő és a záró tag között helyezkedik el A HTML tagok kis-.6. Tag tulajdonságok (attribútumok. Érdemes tehát ezt az írásmódot megszokni. Például. ami tartalmazhat egy bgcolor tulajdonságot. A HTML tagok segítségével elemek definiálhatók. oldal Web programozás (0. és nagybetűvel is írhatók HTML elemek Az előző példában a következő példa egy elem: <b>Ez a szöveg félkövér</b> A HTML elem kezdő tagja <b>. Ezek a jellemzők járulékos információk az elem egészére nézve.26.2.

Bekezdések A bekezdéseket a <p> taggal lehet definiálni: .3. 3. Bizonyos esetekben (pl. Címek A címek a <h1> … <h6> tagok segítségével adhatók meg.) A következő példa bemutatja mind a 6 címet: <h1>Ez <h2>Ez <h3>Ez <h4>Ez <h5>Ez <h6>Ez egy egy egy egy egy egy cím</h1> cím</h2> cím</h3> cím</h4> cím</h5> cím</h6> A címsorokhoz a böngésző alapértelmezetten térközöket is kapcsol. bekezdéseket és sortöréseket lehet létrehozni. a h1 és h2 alkalmazható. A böngészők az aposztróf jelet is elfogadják. ekkor pl. mégis érdemes inkább a hagyományos idézőjelet alkalmazni. Alapvető HTML tagok A HTML legalapvetőbb és leggyakrabban használt tagjai azok. <h1> a legnagyobb (legfelsőbb szintű) címet jelenti. soron belüli JavaScript kód) a kettőt keverten kell alkalmaznunk. A következő példa szegély nélkül jeleníti meg a táblázatot: <table border="0"> A tulajdonságok név-érték párokkal adhatók meg. Melyik idézőjelet alkalmazzuk? A nyelv elsősorban a (dupla) idézőjel alkalmazását írja elő. amelyek segítségével címeket.3. hogy milyen vastag szegéllyel jelenjen meg a táblázat. A tag tulajdonságaként megadható. egymástól szóközzel elválasztva akár több is. (Általában egy oldalon legfeljebb 2-3 szintet indokolt alkalmazni. oldal A <table> elem egy táblázat elemet definiál.HTML 27. <h6> pedig a legkisebbet.

</p> .6. A következő példában hiába szerepel az újsor és a több szóköz karakter. verzió) A bekezdésekhez a böngésző alapértelmezetten térközöket is kapcsol. <p> Ez egy több sorból álló és sok szóközt tartalmazó bekezdés. oldal <p>Ez egy bekezdés</p> <p>Ez egy másik bekezdés</p> Web programozás (0.28. Az istenért! hisz az ördög elvisz. a böngésző minden elválasztó karakter-sorozatot egy szóközként értelmez és jelenít meg. Ha még soká így folytatod. </p> A következő példa jól mutatja a kötött szerkezetű szöveg (például vers) idézésének nehézségét: <p> Mikor térsz már az eszedre. A tényleges tördelést mindig a böngésző ablakmérete és a benne levő szöveg határozza meg. te Sándor? Tivornya éjjeled és napod.

A böngésző nem veszi figyelembe a megjegyzésbe írt szöveget. A br kikényszeríti a sortörést. hogyan lehet háttérszínt megadni a HTML oldalunkhoz. vagyis nincs külön záró tagja. Színes háttér A következő példa bemutatja.) <!—Ez egy megjegyzés --> A megjegyzésben nem fordulhat elő két kötőjel a > nélkül. (Természetesen a megjegyzés megtekinthető a forráskódban. ha új sort szeretnénk kezdeni. <html> <head> <title>Sárga</title> </head> <body bgcolor="yellow"> <h2>Színes háttér!</h2> </body> </html> .3. oldal Sortörések A <br> tag használható.HTML 29. Megjegyzések A megjegyzés tagot megjegyzések elhelyezésére használjuk. <p>Ez itt<br>egy több<br>sorra tördelt bekezdés</p> A br elem üres. de nem akarunk új bekezdést kezdeni.

és egyetlen szóközként veszi figyelembe. mindig nézzük meg más böngészőben.… --> Leírás HTML dokumentumot definiál A dokumentum törzsét definiálja Címsorokat definiál Bekezdést definiál Egyszerű sortörést szúr be Vízszintes elválasztó vonalat szúr be Megjegyzést definiál Feladat Készítsen egy tetszőleges költő verseit tartalmazó oldalt! ● ● Az oldal főcíme a költő neve legyen Legalább három verset tartalmazzon: ○ A verscímek alacsonyabb szintű címek legyenek .30. verzió) Hasznos tippek • • • • • • Amikor HTML oldalakat hozunk létre. Összefoglaló táblázat Tag <html> <body> <h1> … <h6> <p> <br> <hr> <!-. Soha ne szóközökkel és Enterrel akarjunk szöveget formázni. Üres p tagok használata szintén nem javasolt. oldal Web programozás (0. inkább a br tag segítségével érdemes a sortörést kikényszeríteni. más képernyő (ablak) felbontásban is.6. A böngésző eldobja a szövegben talált többszörös szóközöket. Az oldal szakaszokra töréséhez alkalmazható a hr vízszintes vonallal elválasztó tag. Sokan elhagyják a p záró tagot a bekezdés végéről. Ez a tag is üres. záró pár nélküli. Az XHTML szigorúbb szabályai miatt ezt nem érdemes alkalmazni.

hanem belső motiváló erő hat. Tidy HTML Validator26 A képen látható. ahogy a színkiemelés alatt a szintaktikai hibák és a hibák részletes leírása is megtekinthetők. és több ezer kiterjesztése (plug-in) közül jó néhány a HTML forrás könnyen áttekinthető megjelenítését szolgálja. 26 http://users. a sorok végén sortöréssel A verseket egy vízszintes vonal is válassza el egymástól 3.) Hogyan tehetjük ezt meg? Keressük meg a böngészőnk Nézet menüjét.skynet. Kis ügyességgel (Forráskód javítása gomb) akár a hibák egy részétől is megszabadulhatunk. (A szerző véleménye szerint ez az egyik legjobb módszer a tanulásra. amely eleve webfejlesztők számára lett kifejlesztve. Következzen a teljesség igénye nélkül néhány kapcsolódó kiterjesztés.be/mgueury/mozilla/ .4.HTML ○ ○ 31.3. Hogy nézzük meg egy oldal HTML kódját? Gyakran előfordul. hogy a weben böngészve megtetszik egy oldal. oldal Versszakonként egyetlen bekezdést alkalmazzon. vagy Oldal forrása (vagy valami hasonló nevű) menüpontot. hiszen ekkor nem külső. és szeretnénk megnézni a forrását. majd Forrás. A szerző javasolja a fejlesztéshez a Firefox nevű böngészőt.

com/software/firebug/ .joehewitt. verzió) View Source Chart27 Ennek a kiterjesztésnek fő szolgáltatása a kód színezéssel történő megjelenítése. Ráadásul az ábrán látható módon az egymásba ágyazási hierarchia követhető a vonalak alapján. és ezek a dobozok kattintásra kinyílnak-becsukódnak. 27 28 http://jennifermadden.32.com/scripts/ViewRenderedSource.html http://www. oldal Web programozás (0. FireBug28 A kiterjesztés az oldalt és a forráskódját teljesen szimultán mutatja.6. érdemes megfigyelni az egérkurzorral irányítható kék dobozokat.

mint pl. Formázás A HTML definiál néhány formázásra szolgáló elemet. Szövegformázó tagok Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Leírás Félkövér szöveget definiál Nagyobb szöveget definiál Kiemeli a szöveget Dőlt szöveget definiál Kisebb szöveget definiál Erősebb kiemelés Alsó indexet definiál Felső indexet definiál Beszúrt szöveget jelöl Törölt szöveget jelöl A következő példa mutatja a tagok hatását: <b>Ez a szöveg félkövér</b> <br> <strong>Ez a szöveg kiemelt</strong> <br> <big>Ez a szöveg nagyobb</big> <br> <em>Ez a szöveg hangsúlyos</em> <br> <i>Ez a szöveg dőlt</i> <br> <small>Ez a szöveg kisebb</small> <br> Ez a szöveg tartalmaz <sub>alsó</sub> indexet <br> Ez a szöveg tartalmaz <sup>felső</sup> indexet . félkövér vagy dőlt szöveg formázásához.HTML 33. oldal 3.3.5.

kiemelés és definíciós tagok Tag <abbr> <acronym> <address> <bdo> Leírás Rövidítést definiál Mozaikszót definiál Cím elemet definiál Szöveg írásirányt határoz meg . oldal Web programozás (0. hanem direkt módon értelmezi Idézet.6. verzió) Számítógép kimenetet definiáló tagok Tag <code> <pre> Leírás Forráskódot definiál Előformázott szöveget definiál: az elválasztó (white space) karaktereket nem a HTML-ben szokásos.34.

oldal <address> Nagy Gusztáv<br> Kecskemét </address> <br> <abbr title= "United Nations">UN</abbr> <br> <acronym title="World Wide Web">WWW</acronym> <br> <bdo dir="rtl"> Ez a szöveg jobbról olvasható </bdo> <blockquote> Az ilyen hosszabb idézeteket a böngésző térközökkel is kiemeli </blockquote> .3.HTML <blockquote> <q> <cite> <dfn> Hosszú (akár több bekezdéses) idézetet jelöl Rövid (általában bekezdésen belüli) idézetet jelöl Idézetet jelöl Definíciót jelöl 35.

3. akkor a dokumentumba az &lt. ezért nem használhatók a folyó szövegben.6. karaktersorozatot kell gépelnünk. verzió) Feladat Készítsen HTML oldalakat. amelyek a következő két képen 29 látható HTML tartalomra a lehető legjobban hasonlítanak.6. akkor karakter entitást kell alkalmaznunk.html oldal felhasználásával készült . oldal Web programozás (0. Ha egy ilyen speciális karaktert akarunk megjeleníteni. A karakter entitás három részből áll: & az elején.36. Karakter entitások Bizonyos karakterek (mint például a < és >) speciális jelentésűek a HTML-ben. Megjegyzés: az entitások kis-nagybetű érzékenyek! 29 A kép a http://design.scolar. vagy # és számkód. a végén.hu/tipografia. a kettő között pedig egy entitás név. . Ha például a < jelet szeretnénk megjeleníteni. vagy a &#60.

&lt. &#169. &gt. Ez azonban nem felel meg a HTML eredeti céljának. 3.3. white space) karaktereket csak egy szóközként jeleníti meg. Entitás számkód &#160. &sect. További karakter entitások Leírás Jelentés Nem törhető szóköz < > & " ' § © Kisebb.HTML 37. . Az entitások teljes listáját a HTML referenciában érdemes keresni. &amp. &#34. hanem mindenképpen egy sorba kerüljenek. Linkek A HTML linkeket (hivatkozásokat) használ arra. hogy a több szóból álló kifejezések (például tulajdonnév) esetén a sor végén ne törje szét a böngészőnk a kifejezést.) Ennek az entitásnak eredetileg az a célja (és a szerző véleménye szerint csak ilyen esetben szabadna alkalmazni). &#39. oldal Nem törhető szóköz A gyakorlatban talán a legtöbbet alkalmazott karakter entitás a nem törhető szóköz. ezért a szerző véleménye szerint teljesen indokolatlan az entitások alkalmazása. &#60. A HTML a több egymást követő elválasztó (ún. &copy. entitást egymás után többször alkalmazni.7.Gusztáv Ékezetes karakterek Az angol abc-ben nem szereplő karakterek (így a magyar nyelv ékezetes karakterei is) sokáig problémát okoztak a HTML szerkesztés során. mint És Idézőjel Aposztróf Paragrafus Copyright Entitás név &nbsp. hogy az oldalunkhoz más tartalmakat kapcsolhassunk. &apos. mint Nagyobb. Például a következő név mindig egy sorba. A mai napra azonban ezek a problémák lényegében megszűntek. &#167. és a mai technikai lehetőségeknek sem. (Stílus formázások segítségével ezek a problémák sokkal elegánsabban oldhatók meg. ugyanis ezeket ténylegesen figyelembe veszi a böngésző. &#38. &quot. tördelés nélkül fog kerülni: Nagy&nbsp. Ilyen esetekben szokás a &nbsp. Ezért korábban szokás volt az ékezetes karaktereket is entitások segítségével megadni. Helyette inkább a pontos karakterkódolásra érdemes figyelmet fordítani. &#62.

és nem a kezdőpontja. akkor a következő módon kell alkalmaznunk: <a href="http://weblabor. Néha azonban praktikus.38. egy képre. Sokan felteszik a kérdést: Miért? Itt elsősorban azt a szemléletet kell látni. Ez azonban módosítható. Ha erre a pontra akarunk hivatkozni egy linkkel. hogy mi hol jelenjen meg. A name tulajdonság Egy hivatkozás alapértelmezetten a HTML oldal tetejét jelenti. ha nincs mögötte / karakter. A következő módon tudunk létrehozni egy ugrási célpontot: <a name="term107">PHP</a> Ez az elem vizuálisan nem fog megjelenni (pl. Így a webkiszolgáló egy felesleges próbálkozást megspórolva gyorsabban fogja megtalálni a keresett könyvtár tartalmát.hu/" target="_blank">Weblabor</a> Ez a tag mára már elvesztette a jelentőségét.hu/">Weblabor</a> honlapja. és akár gyorsbillentyű (accesskey) is rendelhető egy horgonyhoz. A következő példa egy linket definiál a Weblabor honlapjára: <p>A <a href="http://weblabor. Erre szolgál ez a tulajdonság.) A kezdő és a záró tag közötti szöveg (vagy akár bonyolultabb tartalom) lesz kattintható. aláhúzással). (Először a könyvtárnevet állománynévként próbálja értelmezni. pl. egy HTML oldalra. (Itt nem csak kattintás jöhet szóba. oldal Web programozás (0. hogy a böngésző hogyan reagáljon a link kiválasztására. és (alapértelmezetten) kék színnel aláhúzott link.hu/szojegyzek#term107"> Természetesen akár az oldalon belül is lehet ilyen linkeket alkalmazni: <a href="#tipp">Ugrás</a> Hasznos tippek Ha egy alkönyvtárra akarunk hivatkozni. A következő link egy új ablakban nyitja meg a Weblabor honlapját: <a href="http://weblabor. hiszen billentyűzetről is lehet linket kiválasztani a TAB segítségével. Nem szerencsés.) . hogy a felhasználó dönthesse el. A horgony szintaxisa a következő: <a href="url">Megjelenő szöveg</a> A href tulajdonságoz rendelt érték határozza meg. zenére stb. hiszen ez a kapcsolat végpontja lehet. az URL végére tegyük ki a / karaktert.6. verzió) A horgony (<a>) tag és a href tulajdonság Egy horgony hivatkozni tud egy tetszőleges webes erőforrásra.</p> A target tulajdonság Alapértelmezetten egy link kiválasztása esetén az új oldal az aktuális helyett jelenik meg. az XHTML már nem is teszi lehetővé a tulajdonság használatát. ha erről a webfejlesztő helyette dönthet. ha egy oldalon belül is pontosítani tudjuk a link célját.

) A teljesség igénye nélkül néhány hátrány. hogy egy-egy ablakrész milyen HTML állományt jelenítsen meg. Ezen kívül szokás az oldal végén (vagy akár több helyen is) az oldal tetejére (elejére) mutató linket alkalmazni (erre a href="#" használható). a tervezettnél kisebb méretű megjelenítés esetén a keret kilógó részei lényegében elérhetetlenek lesznek A sort lehetne folytatni a szerver oldali programozás nehézségeivel.8. A keretek néhány évvel ezelőttig nagy népszerűségnek örvendtek. . Megjegyzés: frameset esetén nincs szükség a body elemre. Feladat A korábban elkészített verseket tartalmazó oldalt bővítse ki a következőkkel: ● A költő neve alá szúrjon be egy „tartalomjegyzéket”. oldal Hosszú oldal esetén tegyünk az elejére egy tartalomjegyzéket a fontosabb fejezetekre mutató belső linkekkel. és egyben oldalon belüli linkként is működik Minden vers után helyezzen el egy tartalomjegyzék feliratú linket. Ennek a megoldásnak az a hátránya.3. Mára azonban már egyre kevesebb helyen indokolt. A frameset tag A <frameset> tag határozza meg. hiszen az URL-ben csak a főoldal címe szerepel Az előzőhöz hasonlóan nem lehet egy oldalra hivatkozni Ha – esztétikai okokból – letiltjuk a keret görgetősávját. mielőtt belekezdenénk a keretek használatába: • • • • • A fejlesztőnek több dokumentumot kell karbantartani Nagyon nehéz kinyomtatni egy keretes oldalt Nem lehet könyvjelzőt rakni egy állapothoz. (Érdemes belegondolni. vagy függőleges irányban oszthatjuk fel az ablakot. a második 75%-át fogja elfoglalni. CSS) összetett oldalakat lehet létrehozni. Segítségükkel pusztán kliens oldali eszközökkel (HTML. hogy nagy portálok szinte egyáltalán nem alkalmazzák. Egy frameset esetén vagy vízszintes. és egyre kevesebb helyen is használják. hogy a vissza gomb hatására is az oldalon belül fog a felhasználó ugrálni. A következő példa két oszlopra bontja az ablakot.HTML 39. Keretek A keretek segítségével egynél több HTML oldalt is meg tudunk jeleníteni egyetlen böngésző ablakban. amivel a tartalomjegyzékre ugorhatunk vissza ● 3. Az első keret a böngésző ablak 25%-át. hogy az ablakot hogyan akarjuk felosztani keretekre. A src tulajdonságokban megadott oldalak lesznek az oldal keretei. amely az összes vers címét tartalmazza. A frame tag A <frame> tag azt határozza meg.

Akik mégis vették a fáradtságot. hamarosan rájöttek. Ha ezt szeretnénk elkerülni. hanem az oldal keretek nélkül működő változatára. akkor a felhasználó vonszolással át tudja méterezni a kereteket. oldal <frameset cols="25%. Itt azonban nem a – korábban elterjedt – „töltse le az XY böngészőt” típusú üzenetekre érdemes gondolni. ami akkor jut szerephez. adjuk meg a frame tagnak noresize="noresize" tulajdonságot. verzió) A százalékos megadás helyett pixeles mennyiség is alkalmazható.htm tartalma az ablak felső felét foglalja el. A következő példában a frame_a. A szerző tapasztalata és tudomása szerint eddig nagyon kevés oldal vette a fáradtságot. hogy a keretes változat mellett keretek nélkül is tökéletes funkcionalitással bíró változatot készítsen. Igen speciális esetekben engedhető meg.50%. A noframes tag Ha igazán korrektek akarunk lenni. így a kérdés eldőlt. Ezt a tagot is többnyire érdemes elkerülni. Hasznos tippek Ha a keretnek van látható szegélye.htm"> </frameset> Web programozás (0. Nézzünk egy minimális példát az alkalmazására: <html> <frameset cols="25%.25%"> <frame src="frame_a. és – legfeljebb egyszer – használhatjuk a * karaktert a fennmaradó hely kitöltéséhez.htm"> <frame src="frame_b.6. Egymásba ágyazás A keretek egymásba ágyazásának segítségével akár összetettebb szerkezetek is kialakíthatók. hogy a látogatók zöme a keret nélküli változatot részesíti előnyben. akkor alkalmazhatjuk a <noframes> tagot. az alsó felében pedig vízszintesen 25%:75% arányban felosztva a másik két oldal osztozik: .40.htm"> <frame src="frame_b.htm"> <noframes> <body>Ez a böngésző nem jeleníti meg a kereteket!</body> </noframes> </frameset> </html> Az iframe tag Az iframe tag dobozszerű keretet definiál.75%"> <frame src="frame_a.htm"> <frame src="frame_c. ha a megjelenítő eszköz nem tudja kezelni a kereteket.

50%"> <frame src="frame_a.htm">Frame a</a><br> <a href ="frame_b.) A főoldal kódjában a name tulajdonsággal adhatunk nevet a jobb oldali keretnek: <html> <frameset cols="120.*"> <frame src="tryhtml_contents.3. (E nélkül a link a saját keretét cserélné ki. ha a navigációs keret HTML kódjában megadjuk a linkek esetén alapértelmezett cél keret nevét a head elem base tagjának href tulajdonságával. oldal Navigációs keret Navigációs keret alkalmazása esetén a link segítségével cserélni kívánt keretet névvel kell ellátni.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm"> <frame src="frame_c.htm"> <frame src="frame_a.htm" target ="showframe">Frame b</a><br> <a href ="frame_c. hogy a link hivatkozása egyértelmű lehessen. Az előző példa így módosulna: <html> <head><base href="showframe"></head> <a href ="frame_a.75%"> <frame src="frame_b.htm" name="showframe"> </frameset> </html> A bal oldali navigációs keretben a linkek target tulajdonságában kell ezt a keretet megadni: <a href ="frame_a.htm" target ="showframe">Frame c</a> Ügyes megoldás az is.htm"> <frameset cols="25%.HTML <html> <frameset rows="50%.htm">Frame b</a><br> <a href ="frame_c.htm"> </frameset> </frameset> </html> 41.htm">Frame c</a> Összefoglaló táblázat Tag <frame> <frameset> <noframes> <iframe> Leírás keretet definiál keret-csoportot definiál a keretet nem ismerő böngésző esetén megjelenő tartalom soron belüli keretet definiál .

képet.) Táblázat fejléc A táblázat első sorába szokás fejléc információkat elhelyezni. 2. </tr> <tr> <td>2. cella</td> <td>1. sor. sor. sor. sor.9. 1. <td>1. űrlapokat. hogy szegélyek is megjelenjenek az oldalon: az előző példában is látható border tulajdonsággal lehet beállítani a szegély szélességét. 2•2 cellás táblázatot: <table border="1"> <tr> <td>1. (A szám képpontban értendő.6. sor. listát. 1. 1.42. <td>2. verzió) 3. fejléc</th> </tr> <tr> <td>1. 1. és minden sor cellákat (<td> tag). fejléc</th> <th>2. 2. 2. 2. Táblázatok Táblázatokat a <table> tag segítségével lehet létrehozni. Ez magyarázza az alatta található értékek jelentését. újabb táblázatokat is tartalmazhatnak. Nézzünk egy egyszerű. cella</td> <td>2. sor. sor. cella</td> </tr> . </tr> </table> cella</td> cella </td> cella </td> cella </td> Táblázat szegélyek Alapértelmezetten a táblázatok szegélyek nélkül jelennek meg. cella</td> </tr> <tr> <td>2. sor. Ebben az esetben az első sort celláit <th> tagokkal kell megadni: <table border="1"> <tr> <th>1. Egy tábla sorokat tartalmaz (<tr> tag). A tábla cellái szöveget. Van azonban lehetőség arra. bekezdést. oldal Web programozás (0.

ami kikényszeríti a szegély megjelenítését. Táblázat cím Méltatlanul keveset használt elem a <caption>.HTML </table> 43. A caption elemnek a table első elemének kell lennie. Lehetőség van annak kiválasztására is.3. ha használjuk: <table border="1"> <caption>Táblázat címe</caption> <tr> <th>1. oldal Természetesen fejléc információt az első oszlopban is lehet alkalmazni. Például az utolsó cella tartalmának törlése esetén a következőt láthatjuk: Szokás ilyenkor egy nem törhető szóközt (&nbsp.) tenni a cellába. Üres cellák A tartalom nélküli (üres) cellák a legtöbb böngésző esetén nem jelennek meg. fejléc</th> </tr> . amivel a táblázat címét tudjuk korrekt módon megadni. fejléc</th> <th>2. ekkor a sorok első celláját kell th taggal megadni. hogy a négy lehetséges oldal közül hol jelenjen meg a cím.

oldal Web programozás (0. amivel összetett szerkezetek alakíthatók ki.<tbody> és <tfoot> elemek a céljuk szerint nagyon hasznos elemek lennének.6. Összefoglaló táblázat Tag <table> <th> <tr> <td> <caption> <thead> <tbody> <tfoot> Leírás táblázatot definiál fejlécet definiál sort definiál cellát definiál címet definiál fejlécet definiál táblázat törzset definiál láblécet definiál .44. ezért a gyakorlatban nem is szokás alkalmazni. de sajnos a böngészők igen változó módon támogatják őket. A táblázat cellák további táblázatokat is tartalmazhatnak. verzió) Cellák összevonása A colspan és rowspan tulajdonságok segítségével cellákat lehet egyesíteni: <table border="1"> <tr> <th>Név</th> <th colspan="2">Telefon</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> Tippek A <thead>.

Felsorolt lista A felsorolt listák olyan elemeket tartalmaznak. A felsorolt lista az <ul> elemmel írható le. <ul> <li>Kávé</li> <li>Tea</li> </ul> . ehelyett egy felsorolási szimbólum (alapértelmezetten egy fekete karika) jelzi vizuálisan a listaelemek kezdetét. a lista elem pedig <li> elemmel.3. amelyik a lehető leginkább hasonlít a következő oldalra: 3.HTML 45. amelyeket nem kell számozással azonosítanunk.10. oldal Feladat Készítsen HTML oldalt. Listák A HTML támogatja a számozott. felsorolt és definíció-listák létrehozását.

a lista elemek az előzőhöz hasonlóan li-vel definiálhatók. A számozott listát <ol> taggal kell létrehozni. <ol> <li>Kávé</li> <li>Tea</li> </ol> Definíciós lista A definíciós lista nem csupán egy felsorolás. a definiált elem <dt> taggal.46. verzió) Számozott lista A számozott listák elemei (többnyire) számmal azonosítottak. szőrös állat</dd> <dt>kutya</dt> <dt>eb</dt> <dd>ugaró. maga a definíció pedig <dd> taggal definiálható. <dl> <dt>macska</dt> <dd>nyávogó. kergeti a macskát</dd> </dl> . hanem a definiált elemek és a definícióik sorozata.6. A definíciós lista <dl> taggal. Egy definícióhoz akár több elem is megadható. oldal Web programozás (0. szőrös állat.

A következő lista az angol abc kisbetűit írja ki: <ol type="a"> <li>alma</li> <li>banán</li> <li>citrom</li> </ol> A listák egymásba is ágyazhatók. oldal További példák Felsorolt és számozott listák esetén a szimbólumok választhatók. így hierarchikus szerkezeteket is kialakíthatunk. <ul type="square"> <li>kávé</li> <li>Tea <ul> <li>Fekete tea</li> <li>Zöld tea</li> </ul> </li> <li>Tej</li> </ul> .HTML 47.3.

48. Űrlapok Az űrlapokat arra használhatjuk. 3. verzió) Összefoglaló táblázat Tag <ol> <ul> <li> <dl> <dt> <dd> Leírás számozott listát definiál felsorolást definiál lista elemet definiál definíciós listát definiál definiált elem definíció Feladat Készítsen HTML oldalt.11. A type tulajdonságával állítható be. amely egy számozott listába ágyazott felsorolt listákkal demonstrálja a felsorolt listák összes lehetőségét. írásjelekből álló karaktersorozatot lehessen begépelni. Ezek az űrlap elemek teszik lehetővé az adatbevitelt. <form> Vezetéknév: <input type="text" name="vezeteknev"> <br> Keresztnév: <input type="text" name="keresztnev"> </form> . vagyis adatok megadására. Az input tag A leggyakrabban használt elem az <input>. hogy különböző módokon lehetőséget adjunk a látogatónak visszajelzésre. hogy betűkből. hogy pontosan milyen adatbeviteli módot szeretnénk. Szöveges mezők A szöveges mezők lehetővé teszik. számokból.6. oldal Web programozás (0. A <form> elem más elemeket tartalmaz.

oldal Érdemes megfigyelni. (Tehát ebből a szempontból sem a vizuális elrendezés számít!) <form> <input type="radio" name="nem" value="no">Nő</input> <br> <input type="radio" name="nem" value="ferfi">férfi</input> </form> Ha valamelyik választási lehetőséget alapértelmezettnek tekintjük. Az elemek közül mindig csak az egyik lehet aktív. a legtöbb böngésző alapértelmezetten 20 karakter szélesen jeleníti meg. Ez viselkedésében csak annyiban tér el a text típustól. hogy a begépelt szöveg helyett * karakterek jelennek meg. hogy a name tulajdonság azonossága rendeli a rádiógombokat logikailag egy csoporttá.3. hogy maga a form elem vizuálisan nem látható. akkor ezzel könnyíthetjük is az űrlap kitöltését: <input type="radio" name="nem" value="no" checked="checked">Nő</input> .HTML 49. a hálózaton egyszerű adatként utazik a jelszó. Rádiógombok A rádiógombokat akkor használhatjuk. vagyis egymást kizáró választási lehetőségekké. Ez azonban nem korlátozza a ténylegesen begépelhető szöveg hosszát. Jelszavak begépeléséhez password típusú (type="password") beviteli mezőt szokás létrehozni. Megjegyzés: Az elrejtés csak a képernyőre vonatkozik. csak a benne elhelyezett elemek. Ha (ahogy ebben a példában is) nem adjuk meg a mezők szélességét. ha a látogatónak néhány választható elem közül kell választási lehetőséget adni. Érdemes megfigyelni a következő listában.

hogy adatokat tudjon a szerver felé küldeni valamilyen hatás érdekében. . <form> <input <label <br> <input <label </form> type="radio" name="nem" value="no" id="no"> for="no">Nő</label> type="radio" name="nem" value="ferfi" id="ferfi"> for="ferfi">férfi</label> Az előző verzióhoz képest fontos kiegészítés. Űrlap adatok elküldése Az esetek jelentős részében a felhasználó azért tölt ki egy űrlapot. <form> <input type="checkbox" name="bicikli"> Van biciklim <br> <input type="checkbox" name="auto"> Van autóm </form> Itt is van lehetőségünk az alapértelmezetten ki nem választott állapot helyett bejelölve megjeleníteni a jelölőnégyzetet: <input type="checkbox" checked="checked" name="bicikli"> A label elem Érdemes megfigyelni. vagy bekapcsolt állapotban lehet. hogy lehet kattintani a szövegre is. hogy a felhasználó egy vagy több elemet is ki tudjon választani a rendelkezésre álló lehetőségek közül. hogy egy jelölőnégyzet ki-. hogy a value mellett az id is megkapta az azonosító szövegeket. Az elemek mellett megjelenő szövegek a böngésző számára függetlenek a jelölő elemektől. függetlenül más beviteli elemektől. oldal Web programozás (0. A label elem használatával ez a függetlenség megszüntethető: a szöveget a jelölőelemmel aktív kapcsolatba hozhatjuk.6. Ez azt jelenti. verzió) Jelölőnégyzetek A jelölőnégyzetek arra szolgálnak.50. csupán a vizuális helyzet jelzi nekünk az összefüggést. Más megközelítésben úgy is lehetne fogalmazni. hogy rádiógomb és jelölőnégyzet esetén a kattintható terület a kör illetve négyzet alakú területre korlátozódik. mivel a label tag for tulajdonsága az id alapján azonosítja az elemeket.

akkor az első elem lesz a kiválasztott betöltődéskor. hogy erre kattintva kezdeményezhesse az adatok elküldését. <form name="input" action="feldolgoz. Másrészt a form tag – egyébként kötelezően kitöltendő – action tulajdonsága határozza meg. Ha ez nem szerepel a forrásban. . (Itt elsősorban terjedelmi. míg az option tagok a választható elemeket. Nyomógombokat a button taggal is létre lehet hozni.) Két tag használatára lesz szükség: először is a select tag adja meg a lista kereteit. Először is a felhasználó számára szokás biztosítani egy küldés (vagy valami hasonló feliratú) gombot. ahol egyszerre akár több elem is kiválasztható. hogy melyik oldalnak kell a kérést feldolgoznia. akkor a szöveg továbbításra kerül a feldolgoz. Lehetőség van olyan lista létrehozására is. <form> <select name="autok"> <option value="audi">Audi <option value="fiat">Fiat <option value="skoda">Skoda <option value="suzuki" selected="selected">Suzuki </select> </form> A selected tulajdonság lehetővé teszi az alapértelmezett elem kijelölését.php számára. Lenyíló lista Bizonyos esetekben rádiógombok helyett célszerű inkább a lenyíló listák alkalmazása.php" method="get"> Felhasználói név: <input type="text" name="nev"> <input type="submit" value="Küldés"> </form> Ha a felhasználó begépeli a nevet. áttekinthetőségi okokra kell gondolni. majd kattint a Küldés gombra.3. oldal Az eddigi példákból két fontos rész kimaradt.HTML 51.

verzió) Több soros szöveges mezők Lehetőség van hosszabb szöveg begépelését. oldal Web programozás (0. Erre szolgál a textarea elem.52. A következő példán a méretek megadásán túl a kezdőszöveg is definiált: <textarea rows="10" cols="30">Kezdőszöveg</textarea> Összefoglaló táblázat Tag <form> <input> <textarea> <label> <select> <option> <button> Leírás űrlapot definiál beviteli mezőt definiál többsoros beviteli mezőt definiál címkét definiál lenyíló listát definiál lenyíló lista elemet definiál nyomógombot definiál Feladat Készítsen egy oldalt.6. szerkesztését lehetővé tevő beviteli mezőt is létrehozni. . ami a Google Mail szolgáltatásának regisztrációját utánozza.

A szabvány szerint tehát ennek a szövegnek akkor kell a böngészőben láthatóvá válni. Lassú kapcsolat vagy sok nagy képesetén kimondottan zavaró lehet. Erre mutat példát a következő kód: . vagy akár torzítás is lehet az eredmény.3.HTML 53.gif"> Az alt tulajdonság Az alt tulajdonság alternatív szöveg definiálását teszi lehetővé. Kép használata linkként Link aktív felületéhez szöveg mellett vagy helyett kép is rendelhető. mégis célszerű a width és height tulajdonságokat megadni.gif"> Abszolút. a base href-ben megadott helytől.12. A kép megjelenítéséhez először is meg kell adni a src tulajdonságot. Képek A HTML nyelvben az <img> tag segítségével tudunk képeket definiálni. A szintaxis a következő: <img src="url"> Az url lehet abszolút vagy relatív megadású is. a HTML könyvtárában keresi: <img src="kep.gif"> Relatív. még nem töltődött le. nem érhető el vagy eleve ki van kapcsolva a képek letöltése). <img src="hajo. vagyis meg kell adni a kép állomány helyét és nevét.gif" width="144" height="50"> Természetesen a kép fizikai méretétől eltérő méretek is megadhatók. amikor egy újabb kép letöltődésekor – az ekkor ismertté vált méret adatok alapján – a félig megjelent oldal „ugrik”. ha a kép valamilyen oknál fogva nem jeleníthető meg (pl.hu/kep. Abszolút: <img src="http://valami. <img src="hajo. ekkor kicsinyítés. oldal 3. ennek hiányában a szerver gyökerében keres: <img src="/kep. ha az egérkurzort visszük a kép fölé. Megjegyzés: a Microsoft Internet Explorer akkor is megjeleníti ezt a szöveget.gif" alt="1 árbócos vitorlás hajó"> Méret megadása A böngésző ugyan a méret megadása nélkül is meg tudja jeleníteni a képet. de ez eltér a HTML eredeti céljától. Ez az elem üres. és nincs záró tagja sem (hasonlóan a br és hr elemekhez). nagyítás.

58.gif" width="145" height="126" usemap="#bolygoterkep"> <map id="bolygoterkep" name="bolygoterkep"> <area shape="rect" coords="0. Ennek értéke köti össze a képet a területi felosztást leíró map elemmel.htm"> </map> Érdemes megfigyelni először is a usemap tulajdonság használatát. Ekkor a kép egyes területeihez más-más link kapcsolható.htm"> <img border="0" src="kovetkezo.3" alt="Merkúr" href="mercur.58. verzió) <a href="lastpage.126" alt="Nap" href="sun.gif" width="65" height="38"> </a> </p> Képtérkép Még érdekesebb lehetőség a kliens oldali képtérképek alkalmazása.htm"> <area shape="circle" coords="90. míg a maradék terület nem reagál a kattintásra. oldal <p> Web programozás (0. A map elem akárhány area elemet tartalmazva írhatja le a linkek jellemzőit.54. valamint a Merkúr és Vénusz bolygóhoz más-más linket rendelünk.8" alt="Vénusz" href="venus. <img src="bolygok.0.82.htm"> <area shape="circle" coords="124. Példánkban a Naphoz.6. .

Az img elem helye határozza meg. Szerver oldali képtérkép is létezik. Ezt a tulajdonságot azonban a CSS lehetőségei miatt felesleges használni. A bgcolor tulajdonság az oldal háttérszínét határozza meg. amelyek az egész oldal hátterét határozzák meg.hu/hatter. A background tulajdonság az oldalhoz háttérképet határoz meg. Viszont ha a bekezdés belsejében van. alattuk címmel.0.gif"> . RGB értékként vagy szín-névvel: <body bgcolor="#000000"> <body bgcolor="rgb(0. Például ha két bekezdés (p) elem között szerepel.) Összefoglaló táblázat Tag <img> <map> <area> Leírás kép elemet definiál képtérképet definiál területet definiál Feladat Készítsen egy több oldalból álló képgaléria honlapot! Az index oldal 3x4-es táblázatba szervezve tartalmazza a bélyegképeket. hogy a kép egyes részei közt a felhasználó nem tud különbséget tenni.gif"> <body background="http://honlapom. akkor a bekezdés részeként a szöveggel akár körbefuttathatóvá is válik. <body background="hatter.) Hasznos tippek Az align tulajdonság kép igazítását határozza meg. oldal Megjegyzés: Az előbb felvázolt lehetőséget kliens oldali képtérképnek nevezzük. A színt háromféle módon lehet megadni: hexadecimális számként. Oldal háttere A body tag rendelkezik két tulajdonsággal. érdemes azonban a felhasználó kényelme érdekében a kliens oldali lehetőséget alkalmazni.13. (A szerver oldali megoldás hátránya. ahol a kép címe és a kép jelenik meg.HTML 55. 3.0)"> <body bgcolor="black"> Mindhárom példa feketére állítja az oldal háttérszínét. hogy a megjelenített oldalon hol fog szerepelni. A bélyegképekre kattintva egy olyan oldalra jussunk. (Maga a körbefuttatás szintén CSS-el végzendő. a böngésző csak a koordinátákat küldi el a szerver számára.3. akkor a bekezdésektől jól elkülöníthetően jelenik meg. A paraméter értéke lehet relatívan vagy abszolút módon megadott URL.

dtd"> 30 31 A Netscape 2007 utolsó heteiben – hosszú haldoklás után – befejezte pályáját. CSS segítségével sokkal több és jobb lehetőségünk lesz a háttér beállítására. A Microsoft Internet Explorer és a Netscape Navigator30 harcának egyik mellékterméke. oldal Web programozás (0.56. A következő elemet kell a dokumentum első elemeként elhelyezni: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. green.org/TR/html4/loose. ami után egyáltalán számon kérhető lenne a böngészők gyártóitól.org/TR/html4/strict. Szabványosság A HTML nyelv a kezdetektől fogva szigorú szabályokra épült. és egyáltalán alkalmazható lenne a gyakorlati fejlesztésben. értelmeznek olyan HTML oldalakat is. 3. hogy melyik verzióhoz tartjuk magunkat. ha a dokumentum elején pontosan leírjuk.01//EN" "http://www. hogy a szöveg színe eléggé elüssön a háttérétől (elég nagy legyen a kontraszt). valamint a kereteket. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. red. lime. Ezzel a módszerrel tehát a 3 bájton ábrázolható 16 millió szín közül bármelyik kiválasztható. 3. A legpontosabb (strict) változat nem engedélyezi az elavult részek (többnyire formázó elemek és tulajdonságok) használatát.w3. és yellow). verzió) Hasznos tippek Háttérkép és szöveg alkalmazása esetén figyelni kell arra. hogy a kép lassú letöltődése esetén se legyenek olvashatósági problémák. .01 változata31 3 féle DTD-vel érvényesíthető. zöld (green). éppen ezért a webfejlesztésben is általános RGB megközelítést alkalmazzuk. Az RGB színek három összetevőből állnak. fuchsia.01 Transitional//EN" "http://www. gray. A HTML 5-ös verziójának kidolgozása 2007 végén előrelépett ugyan. Itt most a monitorok képmegjelenítésénél használatos. blue. A HTML nyelv minden verziója. Mindhárom érték egy bájton tárolt előjel nélküli számként határozható meg. silver. mintha a szabványok létéről sem hallott volna még.15. mint piros (red). és kék (blue).6. és a háttérszínt is hasonlóra beállítani. de még mindig nem jutott el a hivatalos ajánlásig. teal.dtd"> Az átmeneti (transitional) DTD megengedi az elavult részek használatát is.w3. érdemes azt előnyben részesíteni. navy. black. amelyek nem felelnek meg a szabványnak. vagyis értéke 0 és 255 között (hexában 0 és FF között) lehet. változata egy úgynevezett Document Type Definition (DTD) segítségével definiált. Háttérképként viszonylag homogén (közel egyszínű) képet érdemes alkalmazni. A böngészők számára segítség. és ami az informatikaoktatás egyik szégyenfoltja: sok „szakíró” is úgy használja a szabványtól elrugaszkodott téves gyakorlatokat. A HTML 4. white. Sőt a webfejlesztők ezekre a pontatlanságokra rá is szoktak. maroon. Ezen kívül 16 alapszín névvel is rendelkezik (aqua.14. purple. olive. Színek A színeket többféle módon közelíthetjük meg. hogy a böngészők felismernek.

3. 32 33 http://users.. A stílus információkat háromféle módon rendelhetjük hozzá a HTML dokumentumunkhoz. 3.w3.css"> . oldal Az oldalunk HTML szabványosságának ellenőrzésére több lehetőségünk van. • • http://validator.. XSL. DSSSL. Stílusok A HTML 4.HTML Keretek használata esetén a következő DTD-t kell megjelölni: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. </head> Külső stíluslap fájlt nem HTML oldalanként külön-külön. </head> Más megközelítés.org/TR/html4/frameset.w3.01 minden formázási információt elkülönített stíluslapokra33 bíz. pl. A HTML oldalhoz a head elemben elhelyezett <link> tag segítségével csatolhatunk külső CSS állományt: <head> <link rel="stylesheet" type="text/css" href="stilus. és szükség esetén korrigálja a W3C validátorát felhasználva. Így a további oldalak látogatása esetén nincs szükség a CSS fájl újbóli letöltésére. de szintén alkalmazható: <head> <style type="text/css"> @import url("stilus. hanem akár egy egész portálhoz egyetlen (vagy néhány) fájlként szokás készíteni.org/ online használata Firefox böngészőbe beépülő Tidy HTML Validator32 Feladat A fejezet eddigi példáit ellenőrizze..16. </style> .skynet.01 Frameset//EN" "http://www. Elvileg más megoldások is vannak.css"). Ekkor a HTML állomány az oldal informatív részér tartalmazza. .. a külső CSS állomány pedig összegyűjtve a megjelenítésre vonatkozó formázásokat.dtd"> 57. de nem az egyetlen stílusdefiníciós lehetőség a CSS. Külső stíluslap A külső stíluslap alkalmazása a legideálisabb eset.be/mgueury/mozilla/ Ma a legfontosabb.

verzió) Beágyazott stíluslap Beágyazott stíluslapot kész oldalnál akkor szokás alkalmazni. míg a span soron belüli (mint pl. amelyik sehol máshol nem fordul elő. Nem mindig van szükség rájuk. akkor bizonyos formázó tagok helyett más tagokat kell alkalmaznunk. </head> Soron belüli stílus Soron belüli stílust esetleg akkor szokás alkalmazni. oldal Web programozás (0. a p vagy table). Beágyazott stíluslapot a head elemben szereplő <style> tag segítségével definiálhatunk. hogy a div blokk szintű (mint pl. Összefoglaló táblázat Tag <style> <link> <div> <span> Leírás stílus definíciót hoz létre külső stíluslapot kapcsol az oldalhoz blokk szintű elemet definiál soron belüli elemet definiál . ha az oldal egyedi (a külső stíluslapot nem lehetne másik oldalhoz felhasználni).. A div és span tagok célja az. Persze a dizájn kialakításának fázisában is jó megoldás lehet. a strong vagy a) elem. ha nincs más alkalmas tag (vagy az túl erőltetett lenne) a HTML kódban. vagy nagyon egyszerű stílusról van szó.58. hiszen az egyébként már szereplő tagok is formázhatók.6. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> . A két tag között egyetlen különbség. A következő példa csak e bekezdés megjelenítését változtatja meg: <p style="color: red. és tényleg minden formázást külső CSS fájl segítségével adunk meg. hogy rá lehessen akasztani valamilyen CSS formázást. Soron belüli stílus alkalmazásához a kiválasztott elemet kell style tulajdonsággal ellátni. Megjegyzés: A szerző véleménye szerint még ilyen esetekben sem érdemes ezt alkalmazni.. ha olyan egyedi stílusról van szó. margin-left: 20px">Ez egy bekezdés</p> A div és span tagok Ha az ajánlásokhoz ragaszkodunk. a CSS alapos megismerésével és ügyes szervezéssel ezt el lehet kerülni.

<meta>. . A szerző véleménye szerint a sokféle. Összefoglaló táblázat Tag <head> <title> <base> <link> <meta> Leírás a dokumentum egészére vonatkozó információkat definiál a böngésző címsorában megjelenő szöveget definiálja relatív linkek számára bázis hivatkozás külső fájlok kapcsolása meta-információkat definiál 3.HTML 59. Megjegyzés: A JavaScript egyetlen korábbi említésre méltó vetélytársa a Visual Basic Script volt. Néhány példa: <meta name="keywords" content="HTML. akkor a relatív hivatkozások az aktuális HTML fájl könyvtárához képest lesznek értelmezve. A <script> elem segítségével tudunk a HTML oldalba szkripteket elhelyezni. hogy milyen szkriptnyelvet szeretnénk használni. hogy nem erre a könnyen manipulálható információra épít. A Google nagy ötlete volt. <meta name="description" content="Web programozás jegyzet" /> Rövid összefoglaló az oldaltól. 6/10/99" /> Az utolsó módosítás napja. hogy hamis képet mutassanak magukról. amelyek a HTML dokumentum egészére vonatkoznak. egymással sem kompatibilis Basic rendszerével a Microsoft öngólt rúgott. <link>. A base elem az oldal relatív linkjeinek működésére lesz hatással.3. A href megadása esetén a megadott URL lesz az indulási hely. A fejrész a <base>. így ma a meta tagok jelentősége ma jóval kisebb. 34 A keresőoldalak egy korábbi generációja lényegében a meta tagokra építette a keresési szolgáltatását. CSS. Ezt a fejlesztők egy idő után arra használták. XHTML. A meta34 elem meta-információt definiál az oldalhoz. <meta name="revised" content="Hege Refsnes. és ezzel jobb helyet érjenek el a találati listákon. <title>. mint ahogy azt a régi források hirdetik. Szkriptek Kliens oldali szkriptek segítségével az oldal interaktívabbá tehető. Ennek type tulajdonságában kell megadni. Fejrész A head elem olyan információkat tartalmaz. JavaScript" /> A kereső robotok számára fontos kulcsszavakat emeli ki.17. <style> és <script> tagokat tartalmazhatja. Ha nincs a base elem href tulajdonsága megjelölve. oldal 3.18.

6. de a W3C célja szerint az applet és img elemek kiváltására is alkalmas.60.) Az object és param tagok Az <object> tag beágyazott objektumot definiál. A noscript tag Ha a böngésző valamilyen ok miatt nem tudja végrehajtani a script elem tartalmát (pl.mov" type="video/quicktime" title="példavideó" width="200" height="200"> <param name="pluginspage" value="http://quicktime. (Az okokról a JavaScript kapcsán lesz szó. ennek tartalma jelenik meg beágyazott objektumot definiál beágyazott objektum számára paramétert definiál .") </script> <noscript> A JavaScript nem támogatott. verzió) Az oldalt böngészőben megjelenítve a Hello Világ! szöveg jelenik meg a képernyőn.com"> <param name="autoplay" value="true"> </object> A param tag segítségével futásidejű paramétereket adhatunk át a beágyazott objektumnak. oldal <html> <body> <script type="text/javascript"> document. <script type="text/javascript"> document. (Pl. Az object tagok akár egymásba is ágyazhatók. Összefoglaló táblázat Tag <script> <noscript> <object> <param> Leírás szkriptet definiál ha nem fut le a szkript.mov állomány lejátszását kezdeményezi. </noscript> Általában nem javasolt a használata. a belső object tag akkor lesz figyelembe véve.write("Hello Világ!") </script> </body> </html> Web programozás (0. Az object tipikusan multimédia tartalom beágyazására használható. letiltott Flash objektum esetén egy állókép jelenjen meg. ha a külső object nem futtatható. <object data="pelda. akkor a noscript elem tartalma fog megjelenni.write("A böngésző támogatja a JavaScriptet. A következő példa egy pelda. a JavaScript ki van kapcsolva).apple.

Alap tulajdonságok Nem használhatók a base. param.20. frame. html. és title elemekben. script. param. hogy különböző (többnyire felhasználói) események esetén szkriptek segítségével programozható tevékenységet lehessen definiálni. oldal 3. frameset.19. Ebben a fejezetben az általánosan használható tulajdonságok kerülnek a középpontba. Ablak események Egyedül a body és a frameset elemek esetén használhatók. Az eddig bemutatott tagok speciális tulajdonságairól már a korábbiakban olvashattunk.Esemény tulajdonságok A böngésző programok lehetőséget adnak arra. Tulajdonság onload Leírás akkor fut le a szkript. Tulajdonság dir lang Leírás az írás irányát definiálja a nyelvet adja meg Billentyűzet tulajdonságok Tulajdonság accesskey tabindex Leírás gyorsbillentyűt rendel az elemhez tabulátorral történő elemváltás sorrendjét befolyásolja 3. hr. Tulajdonság class id style title Leírás az elem osztálya az elem egyedi azonosítója soron belüli stílus definíció rövid segítség definiálása Nyelvi tulajdonságok Nem használhatók a base. head. iframe. Például egy HTML elemen való kattintás hatására az oldal egy része megváltozik. Általános tulajdonságok A HTML tagoknak különböző tulajdonságaik lehetnek. style.3. ha az oldal betöltődött . meta.HTML 61. és script elemekben. br.

ha egy billentyűt felengedett a felhasználó Egér események Nem használható a base. ha egy billentyűt lenyomott és felengedett a felhasználó akkor fut le a szkript. ha egérklikkelés történt akkor fut le a szkript. param. ha az elem megkapja a fókuszt Billentyűzet események Nem használható a base. br. ha dupla egérklikkelés történt akkor fut le a szkript. meta. ha a felhasználó az adott elemről elmozgatja . és title elemekben. style. és title elemekben. ha egy billentyűt lenyomott a felhasználó akkor fut le a szkript. Tulajdonság Leírás onchange onsubmit onreset onselect onblur onfocus akkor fut le a szkript. Tulajdonság onkeydown onkeypress onkeyup Leírás akkor fut le a szkript. frame. bdo. head. ha az egérgombot lenyomta a felhasználó akkor fut le a szkript. vagy más oldalra lép tovább Űrlap elemek eseményei Egyedül űrlap elemek esetén használhatók. html. iframe. ha a felhasználó az oldalt bezárja. param. ha az űrlap elküldését kéri a felhasználó akkor fut le a szkript. bdo. ha a felhasználó az adott elem felett mozgatja a kurzort akkor fut le a szkript. oldal onunload Web programozás (0. Tulajdonság onclick ondblclick onmousedown onmousemove onmouseout Leírás akkor fut le a szkript. ha az elemet kiválasztja a felhasználó akkor fut le a szkript. meta. script. frame.62. frameset. ha az elem elveszti a fókuszt akkor fut le a szkript. verzió) akkor fut le a szkript. script. iframe. frameset. ha az elem megváltozott akkor fut le a szkript. html. ha az űrlap kezdőállapotba áll akkor fut le a szkript.6. br. style. head.

oldal akkor fut le a szkript. ha az egérgombot felengedi a felhasználó 3.. A kódolt karakterek egy % jellel és a két számjeggyel leírt hexadecimális értékükkel írhatók le. majd jönnek a továbbiak Az oldalnak egyedi címet adunk a fejlécben (title): az egész webhely címe + oldal címe). (A menüpontok is egyfajta listát jelentenek. ha jól meg van formázva a HTML.22. URL-kódolás Az URL egy erőforrások megcímzésére alkalmas eszköz kötött karakterkészlettel. HTML értelmezők ez alapján tudják kategorizálni az oldal tartalmait. ha a felhasználó az adott elemre mozgatja a kurzort akkor fut le a szkript. egy bekezdést nem használunk fel menü kialakításához. vagy egy keresőgép tud idézetekre keresni egy bizonyos szerzőtől. A gyakrabban előforduló hibákkal szemben néhány jó megközelítés: • • • A címsorokat a <h*> elemekkel adjuk meg. (<ul>. ékezetes betűk. hiszen egy begépelt űrlapmezőben bármilyen karakter előfordulhat. automatikus katalógusok. de kódolt formában már igen. A különböző listákat a lista elemekkel definiáljuk. Ilyen esetben is fontos szerepet kap a kódolás. Például a szóköz kódolva %20. <dl>).23.</head><title>Cím</title><body>A dokumentum . mert a keresőgépek. Bizonyos karakterek (pl.21. Azért fontos ez. Például egy felolvasóprogram egy címsort ki tud emelni felolvasás közben is. de a menüket is ul elemmel érdemes megadni.HTML a kurzort onmouseover onmouseup 63. Űrlapok adatainak GET metódussal való elküldése esetén az űrlap adatok az URL-ben kerülnek továbbításra. az új bekezdésnél nem csak a kurzort visszük új sorba egy <br /> elemmel. Például.3. Szemantikus HTML A szemantikus HTML nem más.. 3. A bekezdések szövegeit <p> elemekbe tagoljuk. egyes írásjelek) közvetlenül nem szerepelhetnek az URL-ben. <ol>. Talán nem triviális. ez az oldal címe. a <h1>-el kezdjük. rendeltetésszerű használata. mint a HTML tagok jelentésének betartása.) • 3. úgy ahogy a tartalom strukturálódik. <html><head>. Ellenőrző kérdések Melyik a helyes HTML dokumentum felépítés? a. hanem valóban jelezzük a bekezdés végét és egy új kezdetét.

b.64.gamf.6. d. Ez itt egy próba szöveg Ez itt egy próba szöveg c. d. ha egy weboldalra mutató linket szeretnénk létrehozni ? a.hu</a> .</head><title>Cím</title></html><body>A dokumentum szövegtörzse</body> Hogyan jelenik meg a következő szövegrész? <p>Ez itt egy próba szöveg </p> a. <dl> <ol> <ul> <list> Melyik tag segítségével készíthetünk egyszerű felsorolás listát? a. b.. c. h1 h6 h7 Melyik tag segítségével készíthetünk sorszámozott listát? a. oldal szövegtörzse</body></html> b.. c. <a>http://www. Web programozás (0. verzió) <html><head><title>Cím</title></head><body>A dokumentum szövegtörzse</body></html> c. Ez itt egy próba szöveg Melyik a legnagyobb méretű fejléc? a. b. c. <html><head>. <ul> <dl> <ol> <list> Melyik hiperhivatkozás formája megfelelő. b.

hogy rákattintva az alapértelmezett levelezőprogram induljon el? a. <a name="http://www. b. c.hu">GAMF Honlap </a> 65. <table><tr><tt> <thead><dt><tr> <table><tr><td> <table><head><caption> Mi történik. d.hu">GAMF Honlap </a> <a url="http://www. b. automatikusan beállítja a böngésző a cellák tartalma szerint hibát okoz a lap teljes szélességével lesz egyenlő a táblázat szélessége Melyik megoldás használható kép beillesztésére? a. c.hu"> szöveg </a> <mail href="gipszjakab@nemtudom.hol. hogy először egy kisebb méretű képet töltsön ezzel adhatunk nevet a képünknek.hol.gif"> <img scr="image.hol.HTML b.hu">GAMF Honlap </a> <a href="http://www. d. c.gif> <img src="image. <img src="kids. oldal Hogyan tehetünk úgy linkké egy e-mail címet. csak számok esetén értelmezhető. c. c.hol. c.hu"></mail> Melyik tagok szerepelhetnek táblázat megadásánál? a. d. ezzel adhatjuk meg a böngészőnek. b.3.hu</mail> <a href="mailto:gipszjakab@nemtudom.gamf. be. <image src="image. és később ezzel a névvel hivatkozhatunk rá a képek letöltésére nem alkalmas böngészőknek kínál szöveges magyarázatot. d.gif"> Mi a szerepe az alt paraméternek? Pl.hu"> szöveg </a> <mail>gipszjakab@nemtudom. b. b. csak számformátum elfogadását teszi lehetővé . Melyik helyes? A value paraméter a.jpg" alt="gyerekek"> a.gif"> <img href="image.gamf. <a href="gipszjakab@nemtudom.gamf. ha egy táblázatban nem állítunk be szélességeket? a.

b. verzió) c. oldal b. b. alapértékek kiválasztására szolgál Ha egyszerű egy soros szöveget szeretnék bekérni a szöveges űrlapelemet melyik módon írhatom helyesen? a b c <input type="text"> <input type="textarea"> <textinput> A submit vagy reset típusú gombokon hogyan tüntethetek fel tetszőleges szöveget? a. a megjelenítéskor látható alaphelyzet beállítására.. c.6. aktív gombok feliratozására. b.hu/"> a.url=http://vww. c.gamf. a helyes érték/szöveg azonosítására használják Web programozás (0. semmi.66. <meta http-equiv="Content-Type" lang="hu"> <meta name="description" content="hu"> <meta http-equiv="Content-Type" content="text/html. ez csak információ a keresőprogramok számára kiírja az utolsó frissítés dátumát 5 másodperc múlva automatikusan betölti a megadott url-ről a dokumentumot . c..... <input type="checkbox">……… <checkbox> …………. <input type="reset"> szöveg</input> <input type="submit" szöveg> <input type="submit" value="szöveg"> Melyik a helyes forma? a.. <textarea>. c. b. hogy a magyarul írt ékezetes betűket a használt böngésző meg tudja jeleníteni? a. c. charset=iso-8859-2"> A következő sornak mi lesz a hatása? <meta http-equiv="Refresh" content="5. b.</checkbox> <input type="check"> Melyik helyes? a.</textarea> <input type="textarea"> <input type="text" option="area"> Milyen módon érhetem el.

Vizsgálja meg. Feladatok Oldal elemzés Keressen meg egy tetszőleges portált (pl. Origo).hu/html_ref/main. oldal 3. Címe: http://htmlinfo.polyhistor. Index.HTML 67. fejlesztés közbeni napi használathoz a legalkalmasabb a HTMLinfo HTML referenciáját alkalmazni. 3. majd a forráskód megnézése nélkül próbálja reprodukálni az oldalt. a fentihez hasonlóan állítsa elő az oldal tisztán HTML változatát.htm . hogyan épül fel az oldal HTML forrása.25. és a Web Developer segítségével kapcsoljon ki minden Javascriptet és CSS-t.3. Oldal reprodukció Keressen meg egy másik portált. További források A HTML alaposabb megismeréséhez.24.

0) Az XML nem a HTML helyett jött létre.1. átadására van szükség. XML Ebben az alfejezetben röviden áttekintjük az XML alapjait. Az XML tetszőleges célú szöveges adatok leírásával. ahol adatok struktúrált leírására. és a két rendszerhez csupán egy XML csatolófelületet adunk hozzá. Tulajdonképpen bárhol. Erre pedig a legegyszerűbb megoldás. azok minden egyes XML alkalmazás esetén egyedileg definiálhatók a nyelvtani szabályai Document Type Definition (DTD) vagy XML Schema segítségével írhatók le az XML formátum önleíró a W3C ajánlása (jelenleg 1. Példa: Képzeljünk el egy olyan vállalatot. Mire használjuk az XML-t? A HTML webre szánt tartalmak leírására szolgál. de a vállalatvezetés új igényei szükségessé teszik. A bekebelezés folyamatának végcélja lehet a bekebelezett cég információs rendszerének teljes integrációja. hogy a független rendszerek közötti adatcsere megvalósulhasson. Így a két rendszer költséges újraírása helyett jóval kisebb költséggel megoldható az integráció.6. Ma minden komoly kereskedő cégnek van webes megjelenése. ha „csupán” a rendszerek közötti aktív adatcserét teremtjük meg.68. mára nagyon fontossá váló terület a B2B (Business To Business) kapcsolatok megvalósítása. de ez sokszor eléggé nehézkes lehet. Ehhez képest az XML tetszőleges más esetekben is alkalmazható. Természetesen integrációs törekvések más esetben is előfordulhatnak. Mi az XML? • • • • • • • eXtensible Markup Language a HTML-hez hasonló jelölőnyelv adatok leírására szolgál nincsenek előre definiált tagok. B2B Egy másik. oldal Web programozás (0. továbbítására. 4. ha definiálunk egy XML nyelvtant az adatcsere definiálására. hogy célszerű. hogy az XHTML újdonságait megérthessük. hiszen az XML céljaiban sokkal nagyobb területet fed le. amelyik önálló informatikai infrastruktúrával. az első komoly elterjedési területe a heterogén rendszerek közötti adatcsere megvalósítása volt. vállalatirányítási rendszerrel rendelkező kisebb cégeket kebelez be. de egyre nagyobb az igény az üzleti partnerek közötti szorosabb kommunikáció megvalósu- . hogy egy vállalaton belül hosszú évek vagy évtizedek óta hibátlanul működő rendszerek egymástól elkülönülten működnek. míg a HTML a weben megjelenítendő tartalommal foglalkozik. Jellemző eset még az is. verzió) 4. Adatcsere Mivel az XML teljesen platform és alkalmazás-független módon írja le az adatokat. Sokszor célravezetőbb megoldás lehet. és nem is biztos.

és a további paramétereket. amelyik nem csak egy. Ez akár teljes emberi munkafolyamatokat is kiválthat. egyedi alkalmazásunkhoz saját. szoftveres megoldásokkal) minél gyorsabban megtaláljuk. 4. de ha csak egy hét határidővel vállalja a szállítást. hogy adatokat tároljunk fájlokban vagy adatbázisokban. A példák sorát sokáig lehetne folytatni. akkor nem az kapja a megrendelést.4. hogy lássuk: az XML alapú adatcserében hatalmas lehetőségek vannak. így a szoftver automatikusan olyan szállítót keres. Alkalmazásokat lehet írni hogy elmentsen és visszaolvasson információkat az adatbázisból. hogy adatokat jelenítsen meg. Adatok megosztása Az XML-ben tárolt adatok hardver-. szállítási határidővel és egyéb feltételekkel lehet megszerezni. A kommunikáció nyelve itt is az XML lesz. Más ügyfelek és alkalmazások hozzá tudnak férni az XML fájljainkhoz.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> . majd a megrendelést szintén az XML alkalmazásával leadja. oldal lásának is. hogy XML alapon (például egy webszolgáltatás formájában) bármikor le tudják kérdezni a rendelhető mennyiséget. hogy lenne valamivel olcsóbb szállító is. egy jegyzettömb bejegyzést: <?xml version="1. és általános alkalmazásokat használhatunk arra. Sokkal könnyebbé teszi olyan adatok létrehozását. és nagyon szigorú. Saját nyelv létrehozása Az XML arra lett kitalálva. amelyekkel különböző alkalmazások is dolgozni tudnak.XML 69. és így akár ugyanazt a könyvet is más-más nagykereskedőtől más-más áron. Lehet. Példa: Képzeljünk el egy könyvesboltot. Ilyen értelemben az XML-t talán pontosabb lenne „nyelv” helyett „meta-nyelvnek” nevezni.2. hogy saját nyelveket definiálhassunk általa. hogy az üzleti partnereket (természetesen nem emberi. hogy a könyvesbolt alkalmazottjának nagyvonalú instrukciói alapján megtalálja az ideális beszerzési módot és a szállítót. ennyi azonban elegendő ahhoz. a céljainknak megfelelő nyelveket hozhatunk létre. Az XML-t használhatjuk arra is. hogy a nagykereskedők lehetővé teszik a vásárlóik (a könyvesboltok) számára. hanem több nagykereskedővel áll kapcsolatban. például a népszerű könyvek pillanatnyi eladásai alapján látszik. és könnyen használható. mint adatforráshoz. amelyik 2 napon belül vállalja a leszállítást (és esetleg a korábbi szállítási tapasztalatok alapján ez valószínűleg meg is fog történni). Itt az XML arra használható. XML szintaxis Az XML szintaxisa nagyon egyszerű. Nézzünk egy egyszerű példát. Tegyük fel. hogy 2-3 napon belül egy könyv készlete ki fog merülni. Saját. hanem automatizált. és szoftver független adatmegosztást tesznek lehetővé. Ekkor egy megfelelően elkészített alkalmazás képes lehet arra. Könnyen megtanulható.

Érvényes dokumentum Az esetek egy részében az érvényesség (validation) egy további kritérium. és mindössze a lehetséges tagokkal. hogy ez a sor a 7-bites ASCII kódolással mindig leírható.. és az egymásba ágyazás is korrekt. többször alkalmazott) lehetőség a DTD (Document Type Definition) segítségével való érvényesítés. A tagok kisbetű-nagybetű érzékenyek. verzió) Az első sor a dokumentum formátumát adja meg: a (jelenleg egyetlen létező) verziószámot. Az XML dokumentumnak egy gyökér eleme van (a példában note). A <note> és </note> tagok határolják az egész dokumentumot kitöltő gyökér elemet. Az elválasztó (white space) karaktereknek lehet szerepe (az XML alkalmazástól függ). mintha csak egyet tartalmazna. ha minimum jól formázott (well formed): • • • • Ahogy a példában is látszik.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "InternalNote.body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend</body> </note> . A következő példa nem külső állományban. hanem helyben definiálja a DTD-t. (Érvényes dokumentum csak jól formázott lehet.6. Itt tehát – eltérően a HTML-től – a több elválasztó karakter nem ugyanazt jelenti.. és a karakterkódolást. milyen módon ágyazhatók egymásba. a további sorok olvasásánál már ismert lesz a karakterkódolás.) Az egyik (és a régebbi.0"?> <!DOCTYPE note [ <!ELEMENT note (to.dtd"> <note> . milyen módon ismétlődhetnek. valamint a gyökérelem nevével foglalkozik: <?xml version="1. és mindig megadottak. A következő XML dokumentum egy külső DTD állományra hivatkozik: <?xml version="1. (Érdemes belegondolni.heading. A tulajdonság értékei mindig idézőjelek között szerepelnek. stb.70. Jól formázott dokumentumok XML dokumentumról akkor beszélhetünk.from. hogy a dokumentumban milyen tagok szerepelhetnek. Nagyon röviden megfogalmazva a DTD azt tartalmazza. oldal Web programozás (0. minden tagnak van záró párja. milyen tulajdonságaik lehetnek a tagoknak. ezekből melyek kötelezőek. A közbülső négy sor a bejegyzés adatait tartalmazza.

A weben látható oldalak többségéhez képest nagyobb az eltérés.01 leváltására35 hozták létre.</p> <p>Ez egy másik bekezdés.</p> </body> Elemek lezárása A HTML elemeket le kell zárni. Ugyanakkor a csak HTML-t ismerő böngészőknek és egyéb programokat sem kell kidobni. és ráadásul roszszul használnak.XHTML 71. XHTML Az XHTML (EXtensible HyperText Markup Language – kiterjeszthető HTML) a HTML pontosabb és „tisztább” verziója.1. Hibás: <p>Ez egy bekezdés. A helyes: <p>Ez egy bekezdés. Egyesek a HTML 5-ös. Egymásba ágyazás Az elemek csak megfelelően egymásba ágyazva és mindig lezárva lehetnek.1-es. hiszen az XHTML lényegében felülről kompatibilis a HTML 4. oldal 5. Az XHTML az XML egy alkalmazása. 5.</P> </BODY> A helyes változat: <body> <p>Ez egy bekezdés. Az XHTML tehát a HTML-re és XML-re egyaránt épít. mások az XHTML irányában látják a kiutat. .0-ás ajánlását 2000-ben tette közzé. hogy 5-10 éves szabványokat. Sokakat nem zavar. A HTML 4. A következő példában az egymásba ágyazással van probléma: <b><i>Ez egy félkövér és dőlt szöveg</b></i> A helyes megoldás: <b><i>Ez egy félkövér és dőlt szöveg</i></b> A tagok neveit kisbetűvel kell írni A tagok neveit kisbetűvel kell írni. Jelenleg legfrissebb verzió az 1. XHTML a gyakorlathoz képest Az XHTML igazából nem sok mindenben tér el a szabványos HTML nyelvtől.5. és dolgoznak a 2-esen.</p> 35 A szakma a mai napig is megosztott. hiszen a legtöbb weblap eleve nem szabványos.01-el. ezért a következő hibás: <BODY> <P>Ez egy bekezdés. <p>Ez egy másik bekezdés. vagyis XML eszközökkel is feldolgozható. A W3C az XHTML 1.

<!DOCTYPE dokumentum-típus> <html xmlns="http://www. <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> A name tulajdonság helyett az id használandó Hibás tehát: <img src="picture. szóközt tartalmazott. hogy a csak HTML-t ismerő böngészők is meg tudják jeleníteni az oldalt.2.) A tulajdonság-értékeket mindig idézőjelbe kell tenni Ez praktikus volt HTML-nél is.6.gif" id="kep" /> Megjegyzés: A régi böngészőkkel való kompatibilitás miatt mindkettőt is szokták alkalmazni: <img src="picture.gif" id="kep" name="kep" /> 5. (Ez azt jelenti. az XHTML nem igényli. oldal Web programozás (0.72. Ezen kívül a gyökér elem névterét is meg szokás határozni. XHTML-ben azonban mindig kötelező: <table width="100%"> A tulajdonságok kötelezően tartalmaznak értéket is Ha a HTML nem írt elő értéket (vagyis a tulajdonság lényegében logikai jelzőként működik). Itt azonban egy rövidített írásmód is alkalmazható: Sortörés<br /> Elválasztó vonal<hr /> Kép <img src="happy. ha a tulajdonság értéke pl.gif" name="kep" /> Helyes: <img src="picture. ezt alig néhány oldalon használják ténylegesen.w3.org/1999/xhtml"> <head> <title>Cím</title> </head> <body> Az oldal törzse </body> </html> . verzió) Záró pár nélküli elemek Záró pár nélküli elemek esetén is le kell zárni. akkor az érték megegyezik a tulajdonság nevével. Dokumentumtípus-deklaráció Bár a HTML is előírja a DTD meghatározását.gif" alt="Happy face" /> Megjegyzés: a / előtti szóköz csak a visszafele kompatibilitás miatt kell.

csak azért hozták létre. hogy az 1.2. hogy az oldalaink (lehetőleg) a csak HTML-t ismerő böngészők által is értelmezhetők legyenek.XHTML 73.org/TR/xhtml1/DTD/xhtml1-transitional. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3. A következő felsorolás összefoglalja a lényegesebb információkat: • • önálló tag esetén szóköznek kell a / jelet megelőzni önálló tag nem mindig alkalmazható (pl.2.0 Strict//EN" "http://www.1//EN" "http://www. Az XHTML-re való váltás ennél valamivel több figyelmet igényel.org/TR/xhtml1/DTD/xhtml1-strict.2 XHTML 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.dtd"> Strict A legszigorúbb változat.1 DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. közbülső lépést tudjanak tenni a régi szokásokhoz képest. legszabadabb.1-es verzió nem támogatja a keretek használatát. a látogatók egy része még akár évekig régebbi böngészőt fog alkalmazni. hogy milyen szintaktikai szabályoknak felel meg a dokumentum. 5.dtd"> Frameset Egy másik ideiglenes változat kereteket használó oldalakhoz. oldal A DTD pontosan meghatározza.0 Transitional//EN" "http://www. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.dtd"> 5.w3.org/TR/xhtml11/DTD/xhtml11.org/TR/xhtml1/DTD/xhtml1-frameset. hogy egy kisebb. Megjegyzés: A HTML nyelv sikerének egyik oka az volt. Érdemes tehát arra is figyelni. lényegében az újabb verziók ezt viszik tovább. hogy a régebbi böngészők általában minden gond nélkül értelmezték az esetleg újabb verziójú HTML oldalakat is.w3. Visszafelé kompatibilitás Attól.0 Frameset//EN" "http://www.1 XHTML 1.dtd"> A jelenleg használható legfrissebb verzió. bekezdés esetén nem) .3. hogy webfejlesztőként törekszünk a szabványok betartására.w3. legfeljebb az újabb tagokat és tulajdonságokat nem vették figyelembe.5. Itt már csak egyféle verzió van: Ebből is következik. 5.0 DTD-k Transitional Ez a típus a legmegengedőbb.

verzió) külső stíluslapot.hu/xml_ref/rec-xml. ha nem használható karaktereket tartalmaz (pl. <. mind meta elemként érdemes megadni.74.1 szerint nem szabványos. 5.polyhistor. akkor mind az XML deklarációban.5. 36 37 http://htmlinfo.html http://htmlinfo. két -) lang és xml:lang is megadható A karakterkódolást elsősorban a HTTP content-type megadásával határozzuk meg.4.polyhistor.6. Ugyanitt megtalálható az XML igen alapos definíciója37 is. (Használja a Firefox HTML Validator kiegészítőjét!) 5.hu/xhtml1se/cover. Feladat Keressen néhány weboldalt. oldal • • • Web programozás (0. szkript fájlt kell alkalmazni. és alakítsa át azokat szabványossá.html . További források Magyar nyelven a HTMLInfo oldalán36 olvasható a W3C ajánlásának fordítása. amely XHTML 1. Ha ez nem megoldható.

milyen óriási lehetőségek vannak a dizájner kezében. és bemutassa. Ezen az oldalon ugyanazt a HTML oldalt láthatjuk sok-sok különböző dizájnná formálva – csupán a CSS állomány (és természetesen a dekorációs képek) cseréjével. hogy a CSS-el szembeni ellenérzéseket lerombolja. Ez az oldal azzal a céllal jött létre. azoknál jóval több lehetőséget biztosítva A stílusok meghatározzák.csszengarden.com/tr/magyar/ .1.CSS 75. hogy hogyan jelenjenek meg vizuálisan a HTML elemek A stíluslapok segítségével könnyen szét lehet választani az oldal tartalmát annak kinézetétől (a dizájntól) A stílusokat általában külön állományban tároljuk (.6. Bevezetés Mi a CSS? • • • • • • • A CSS a Cascading Style Sheets rövidítése A stílusok a HTML megjelenítési elemei és attribútumai helyett használhatók. mindenképpen célszerű a CSS Zen Garden38 oldalát meglátogatni. ha a CSS-t komolyan és szakszerűen használja.css kiterjesztéssel) Külső stíluslapokkal gyorsítani tudjuk a munkavégzést Több stílus is hatással lehet egy elem megjelenésére Kedvcsináló Mielőtt a CSS alapos megismeréséhez kezdenénk. A teljesség igénye nélkül néhány képernyőkép: 38 Magyar oldal: http://www. CSS 6. oldal 6.

Amikor egy címet.css kiterjesztésű állományban szokás elhelyezni. bekezdést vagy táblázatot akarunk létrehozni. Mára minden jelentősebb böngésző támogatja a CSS-t.org/ . a font tag. hogy a független szabványokat (a szerző véleménye szerint) tudatosan és szándékosan figyelmen kívül hagyja azt remélve. A HTML 4. lényegében csak ezt az egyetlen oldalt kell módosítanunk. Így könnyedén lehet ugyanazt a megjelenítést adni a honlap összes oldalához. oldal Web programozás (0. A stíluslapokkal munkát spórolhatunk A stíluslapok azt definiálják. verzió) A stílusok használatával megoldható nehézségek A HTML tagok eredetileg arra lettek megalkotva. (Mellesleg a böngészők csak részben és később támogatták a vetélytárs újításait. szabványokat alkotó szervezet oldotta meg. Később a két nagy böngésző (a Netscape Navigator és az Internet Explorer) újabb és újabb HTML tagokat és tulajdonságokat adott a böngésző által felismert HTML nyelvhez (pl. vagy a color tulajdonság). mindössze egyetlen CSS állomány szerkesztésével. A stíluslapokat külön .) A problémát a World Wide Web Consortium39 (W3C). hogy a dokumentum tartalmát definiálják. a felhasználó beállításai alapján.6. A jövőt megjósolni azonban ezen a területen is nagyon nehéz. magát a saját területén monopolhelyzetben tudó cég) módszere. Ha bármit változtatni kell a dizájnon. A tényleges megjelenítés a böngészőre van bízva. hogy mit hogyan jelenítsen meg a tagok. egy non-profit. eldöntheti. hogy a versenytársak helyzetét ezzel lehetetlenné teszi. Így belekeveredtek a HTML nyelvbe a megjelenítést befolyásoló elemek. akkor használhatjuk a h1. Egészen a Firefox megjelenéséig és a felhasználók körében való viharos sebességű elterjedéséig ez a taktika sikeresnek látszott. bár a támogatottság mértékében vannak eltérések.76. hogy hogyan jelenjenek meg az egyes HTML elemek. Megjegyzés: A Microsoft (és több más. az ablakméret. 39 http://www.0-ás verziójával és a vele párhuzamosan fejlesztett CSS segítségével létrejött egy jól használható eszközpáros a webfejlesztők részére. p és table tagokat.w3.

6.CSS 77. mindössze pontosvesszővel kell elválasztani a tulajdonság-érték párokat. 1. A CSS nyelvtana A nyelvtan három elemet különböztet meg: kiválasztó. color:red} A stílusdefiníciók jobb olvashatósága érdekében inkább több sorba érdemes tagolni a sort: p { text-align: center. head elemben definiált stílus 4. tulajdonság és érték: kiválasztó {tulajdonság: érték} A kiválasztó legegyszerűbb esetben egy HTML tag. font-family: arial } . body {color: black} Ha az érték több szóból áll. A tulajdonságot és az értéket egy kettősponttal kell egymástól elválasztani. a tulajdonság azt határozza meg. a head elembeli formázás és akár külső CSS állomány is. Megfordítva: egy elemre hatással lehet a soron belüli stílusa. és a kettőt együtt kapcsos zárójelbe tenni. míg az érték a változást határozza meg. a böngésző alapbeállítása 2. oldal Egy elemre több stílusdefiníció is hatással van A stílusok egy vagy több elemre. tehát felülír minden alacsonyabb szintű formázást. color: black. vagy akár az egész oldalra is hatással lehetnek (ez utóbbi a body elem formázásával). külső stíluslap 3. Lépcsős elrendezés Melyik stílus fog érvényesülni. és egy CSS állományt is több különböző HTML állományhoz rendelhetünk. p {text-align:center.2. soron belüli stílus Tehát a soron belüli stílus a legmagasabb prioritású. Sőt egy HTML oldalhoz akár több külső CSS állományt is rendelhetünk. idézőjelbe kell tenni: p {font-family: "sans serif"} Ha egy kiválasztó esetén többféle tulajdonságot is módosítani szeretnénk. hogy milyen jellemzőt akarunk módosítani. ha több stílust is definiálunk ugyanahhoz a HTML elemhez? A következő négy beállítás érvényesül egyre nagyobb prioritással (tehát ütközés esetén a későbbi felülírja az előzőt). könnyedén megtehetjük. 6.

CSS-ben a # segítségével tudunk elemet id alapján kiválasztani.h5.h4. (Már amelyik HTML elemnél egyáltalán van értelme a középre igazításnak. Ekkor a kiválasztókat vesszővel elválasztott listaként kell felsorolni.center {text-align: center} A formázás minden center osztályú tagot középre igazít: <h1 class="center"> Ez egy középre igazított cím. </p> Azonosító alapú kiválaszás A HTML elemeknek megadhatjuk az egyedi id tulajdonságot.right {text-align: right} p.center {text-align: center} Ez a két stílus a következő két bekezdés megjelenésére hatással lesz: <p class="right"> Ez egy jobbra igazított bekezdés. lehet tagoktól független.6. Így az egyedi id-vel rendelkező elemhez speciális formázást határozhatunk meg. A következő példában a menu azonosítójú elem betűszínét zöldre állítjuk: #menu {color: green} A para1 azonosítójú bekezdést középre igazítva és piros színnel definiáljuk: .) .h2. Az osztály szintű kiválasztást nem kötelező taghoz kötni. oldal Web programozás (0.h3. vagy akár más is lehet a class értéke. </p> A p HTML tagoknak nem kötelező megadni class tulajdonságot.h6 { color: green } Osztály kiválasztó Osztály kiválasztó segítségével más-más módon tudjuk megjeleníteni az egyes osztályokba sorolt elemek tartalmát. A példában a két különböző osztályhoz tartozó bekezdések más-más formázást kapnak: p. A példában minden címet zölden szeretnénk megjeleníteni: h1.78. A példa minden center osztályú elemet középre igazít. </h1> <p class="center"> Ez egy középre igazított bekezdés. verzió) Felsorolás Egyszerre akár több kiválasztóra is érvényesíthetjük a formázást. de ezekben az esetekben a fenti stílusoknak nem lesz hatása a bekezdésekre. </p> <p class="center"> Ez egy középre igazított bekezdés. általános osztály szelektort is definiálni.

. vízszintesen.. Például: body {.1 Háttérszín A background-color tulajdonság segítségével meghatározhatjuk az elemek háttérszínét.3.. /* Ez itt egy másik megjegyzés */ color: black. font-family: arial } A CSS lépcsős formázása Bár a gyakorlatban még nem terjedt el.. nagyobb CSS állományok esetén az áttekinthetőséget jelentősen javítani tudja a CSS forrás (a C nyelven megszokotthoz hasonló) behúzása.} p {. oldal Megjegyzés A CSS fájlba azért szoktunk megjegyzéseket tenni.} table {. többféleképpen is lehet a logikai csoportosítást szervezni..balra {. color: red } 79.} Természetesen ez a leírási mód nem egyértelmű... A korábban megismert színmegadási módok közül itt is tetszőlegesen választhatunk. CSS megjegyzésként egyedül a C nyelvből ismert /*. és lehet a böngészőabrakhoz vagy a görgetett tartalomhoz ragasztott.. 6.} table#egyik td {.CSS p#para1 { text-align: center.. 6.*/megjegyzés használható: /* Ez itt egy megjegyzés */ p { text-align: center..3..6.. További lehetőség a transparent megadása. A background tulajdonságok Egy elem hátterét háttérszín és háttérkép segítségével változatosan formázhatjuk. A háttérkép ismétlődhet is függőlegesen.} p. ami átlátszó háttért fog jelenteni. hogy a későbbi megértést és módosítást könnyebbé tegye. .

Háttérkép ragasztva Elsősorban hosszabb görgethető tartalom esetén van jelentősége annak. A következő példában az ablak felső részén.jpg'). oldal body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250.2 Háttérkép Az egyszínű háttér helyett akár látványos háttérképet is elhelyezhetünk az elemek háttereként a background-image tulajdonság segítségével. hogy a háttérkép nem csak a görgetősávval együtt mozogva.jpg') Ismétlődés A háttérkép alapértelmezés szerint kitapétázva jelenik meg. bottom és left. A következő példában csak y irányban ismétlődik a háttérkép: background-image: url('bgdesert. Pozíció A háttérkép pozíciója is megváltoztatható: az alapértelmezett bal felső sarok helyett máshol is lehet a háttérkép.6. background-position: top center. mind függőleges irányban megtilthatjuk az ismétlődést. Megjegyzés: Ennek még akkor is van jelentősége. ha a teljes hátteret kitapétázva látjuk. . background-image: url('smiley.255)} Web programozás (0. Megjegyzés: Még a kettő közül az egyiket is elhagyhatjuk. majd a vízszintes pozíciót kell megadnunk. background-repeat: repeat-y. A 3-3 konstans (top. right) mellett százalékos és pixeles pozícionálás is lehetséges. background-repeat: no-repeat.3.0.gif'). Az érték megadásnál először a függőleges. center. középen jelenik meg a smiley-nk. ha az egyetlen megadott érték egyértelművé teszi a fejlesztő szándékát. Természetesen ez megváltoztatható.80. background-image: url('bgdesert. verzió) 6. Sok érdekes megoldás érhető el ezzel az apró trükkel. center. mind vízszintes. hanem fixen pozicionálva is kérhető. ha az elem mérete ezt szükségessé teszi. A mindkét irányú ismétlődés kikapcsolásához a no-repeat értéket kell adnunk. ugyanis a kezdő tapétát van értelme máshol és máshol megadni.

6.gif') no-repeat fixed center.CSS background-image: url('smiley. hogyan lehet a szöveget balra. Szövegek megjelenítése A CSS szöveg tulajdonságai segítségével a szövegek vizuális megjelenítését lehet testre szabni. oldal Mindent bele Ha többféle háttértulajdonságot is állítunk. background-attachment: fixed. A szöveg színe A szöveg színét a color tulajdonság határozza meg: h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0. tömörebb írásmódot eredményez az összevont background tulajdonság.0. background-repeat: no-repeat. Az alapértelmezett a balra igazítás. középre. Így egyszerre akár mindent is beállíthatunk.4. A szöveg igazítása A következő példa bemutatja. Keskeny szövegblokk esetén különösen kerülendő. Megjegyzés: A sorkizárt igazítással érdemes csínján bánni. 81.5cm} Szótávolság A betűtávolsághoz hasonló módon adható meg a word-spacing tulajdonság segítségével. 6. a negatív pedig sűrítést: h1 {letter-spacing: -3px} h4 {letter-spacing: 0. . background: #00ff00 url('smiley. mivel az automatikus elválasztás hiánya miatt a szóközök nagyon csúnyán megnyúlhatnak. A pozitív érték ritkítást eredményez. jobbra vagy sorkizártan igazítani: h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} p {text-align: justify} Természetesen az igazítás meghatározásának csak blokk szintű elem esetén van értelme.255)} Betűtávolság A betűk közötti távolság a letter-spacing tulajdonsággal módosítható.gif').

Praktikusabb azonban. verzió) A szöveg dekorációja A következő példa bemutatja. Az alapértelmezett kikapcsolt (none) mellett lehetőség van az előformázott értelmezés (pre) és a több sorra tördelést megtiltó (nowrap) beállításra. tabulátor vagy újsor) függetlenül mindig egy szóköznek számítanak. aláhúzott vonallal megjeleníteni: h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} A szöveg behúzása A bekezdés első sorát a következő módon tudjuk 1 cm-el behúzni: p {text-indent: 1cm} Kis-. hogy a böngésző nem ismert típus esetén is tudjon hasonlót választani.6. és nagybetű formázás A következő példa a nagybetűs. a képernyőn jól olvasható típusokat megadni.uppercase {text-transform: uppercase} p.capitalize {text-transform: capitalize} Elválasztó karakterek értelmezése Ahogy már a korábbiakban volt szó róla. h3 {font-family: times} p {font-family: courier} p. Kevésbé elterjedt betűtípus esetén érdemes elterjedtebb alternatívákat is felsorolni. elválasztó karakterek (white-spaces) számától és típusától (szóköz. 6.sansserif {font-family: sans-serif} A betűtípusok közül érdemes általánosan használt. hogy az elválasztó karakterek értelmezését ennél finomabban tudjuk szabályozni a white-space tulajdonság segítségével.lowercase {text-transform: lowercase} p.5. . majd kis-kapitális formázást mutatja be: p. oldal Web programozás (0. Betűk formázása Betűtípus megadása A következő példában a h3 címeknek és a bekezdéseknek más-más betűtípust használunk. a HTML oldalakon az ún. áthúzott. Ez alól az egyetlen kivétel a pre tag alkalmazásával érhető el.82. hogy hogyan lehet a szövegünket fölé húzott. Az eddigi lehetőségeken túl az írásirányt is beállíthatjuk a direction tulajdonsággal. kisbetűs.

x-large. bolder és lighter) mellett 100.inset p. smaller és larger.CSS 83.ridge p.6. A megadásnál kötelező mértékegységet is alkalmazni.6. Szegélyek A CSS border tulajdonságaival szegélyeket rajzolhatunk az elemek köré. hogy a felhasználó a saját igényei szerint tudja azt kicsinyíteni vagy nagyítani.double p. large. és általában érdemes relatív megadási módot alkalmazni.1em} h1 {font-size: 130%} A számszerű megadáson túl szövegesen is megadhatjuk a méretet: xx-small.solid p.vastagabb {font-weight: bold} p.dashed p.dotted p. 200. p. A következő példa az összes lehetséges vonalstílust bemutatja. oldal Betűméret A betűk méretét a font-size tulajdonsággal állíthatjuk be. Megjegyzés: Nem minden böngésző az előírásoknak megfelelően rajzolja a szegélystílust. Az így megadott méretek is relatívak. x-small. bold.legvastagabb {font-weight: 900} Betűformázások összevonása Az összes betűfornázás összevonható akár egyetlen deklarációvá: p {font: italic small-caps 900 12px arial} 6. … 900 értékek használhatók.groove p.outset {border-style: {border-style: {border-style: {border-style: {border-style: {border-style: {border-style: {border-style: dotted} dashed} solid} double} groove} ridge} inset} outset} . xx-large. p {font-size: 1. Szöveges konstansok (normal. p. medium.normal {font-weight: normal} p. Betűstílus A dőlt betűstílus alkalmazására láthatunk egy példát: p {font-style: italic} Betűvastagság A betűk vastagsága a font-weight tulajdonsággal befolyásolható. small.

a második a bal és jobb oldali szegélyt befolyásolja.6. például a bal oldalit: p { border-style: solid. border-left-width: 15px } Több érték egyszerre Ha több oldal szegély vastagságát más-más értékekre. oldal Web programozás (0. A következő példa folyamatos vonallal szegélyezi a bekezdést.0. Két érték megadása esetén az első szám a felső és alsó szegély. de egyszerre szeretnénk állítani. alsó és bal oldali) szegényre fog vonatkozni. hanem akár külön-külön is lehet állítani. az óramutató járásának megfelelő sorrendben (felső. p. #ff0000 #0000ff solid. .255) A szegély vastagsága A szegély vastagságát a border-width tulajdonsággal állíthatjuk be.haron { border-style: border-color: } p. Ha négy értéket adunk meg.egy { border-style: border-color: } p. #ff0000 #00ff00 #0000ff solid. jobb oldali. de a szegély vastagságát megnöveli az alapértelmezett 1px-hez képest: p { border-style: solid.negy { border-style: border-color: } solid. #0000ff solid.ketto { border-style: border-color: } p. border-width: 15px } A négy oldal szegélyeit nem csak egyszerre. akkor a felső szegélytől indulva. #ff0000 #00ff00 #0000ff rgb(250. arra is van lehetőségünk.84. verzió) Szegélyszín A szegélyek színét is beállíthatjuk a border-color tulajdonsággal.

Térközök a szegélyen belül és kívül A CSS szintaktikailag két nagyon hasonló tulajdonság-csoportot tartalmaz.8. hogy egyszerre mind a négy oldal értékét. A margin tulajdonsággal a szegélyen (border) kívüli. img { margin: 0. h1. h3. A szintaktikai hasonlóság miatt ebben az alfejezetben csak a (külső) margó szintaxisa fog következni. de más-más értékkel: p {margin: 2cm 5px 2em 5%} Minden oldali margót egységesen nulláz: p {margin: 0} Megjegyzés: Az egyes böngészők bizonyos alapértelmezett margóbeállításokat eltérően értelmezhetnek. A következő összefoglaló ábra mutatja az alapfogalmakat: Margók esetén is van lehetőségünk. hogy egy új oldal CSS állományát valahogy így kezdi: body.7. a padding tulajdonsággal pedig a tartalom és a szegély közötti belső margót lehet beállítani.6.CSS 85. } 6. tr. Csak a bal oldali margót definiálja: p. table. de minden példa hasonlóan leírható lenne a belső margóra is. padding: 0. a lista elem vagy lista kép állítható be. td. Például az alsó szegély több tulajdonságának beállítása: p {border-bottom: medium solid #ff0000} 6. Az ebből eredő kellemetlenségek és bosszúságok elkerülése érdekében a szerző szokása. oldal Közös deklaráció Az eddigi szegély tulajdonságok (hasonlóan a korábbi tulajdonságcsoportokhoz) összevonhatók a border tulajdonság segítségével. akár különbözőre is beállíthassuk. Listák A CSS lista formázásai segítségével a lista előtti térközök. vagy csak egyetlen oldalét változtassuk meg. th. p.leftmargin {margin-left: 2cm} Minden oldalét definiálja. . h2.

lalpha {list-style-type: lower-alpha} ol.circle {list-style-type: circle} ul.square {list-style-type: square} ul. Érdemes megfigyelni a következő példában. oldal Web programozás (0.uroman {list-style-type: upper-roman} ol. ul. hogy a formázás a lista (ul) és nem az egyes listaelemek (li) tekintetében történik.decimal {list-style-type: decimal} ol.gif') A listajelölő pozíciója A listajelölő a szöveg belsejében.none {list-style-type: none} Számozott listák esetén jóval több lehetőségünk van. ezért minden listaelem előtt ugyanazt a jelölőt szokás alkalmazni.ualpha {list-style-type: upper-alpha} Az előre adott lehetőségeket magunk is tovább bővíthetjök azzal. bár ezek közül is csak néhány tartozik a gyakrabban használtak közé.86. verzió) Lista jelölők Felsorolt listák esetén az egyes listaelemek sorrendisége nem jelent információt.outside { list-style-position: outside } . vagy az előtt is szerepelhet: ul. ol.6.inside { list-style-position: inside } ul.lroman {list-style-type: lower-roman} ol.disc {list-style-type: disc} ul. hogy tetszőleges képet alkalmazhatunk listajelölőnek: list-style-image: url('arrow.

0 változatában a width/height és padding tulajdonságok tekintetében egy bosszantó hiba van. vagy a navigációs sáv szélességét gyakran állítjuk be ilyen módon.wikipedia.org/wiki/Internet_Explorer_box_model_bug . rövidebb írásmódot lehetővé tevő közös deklaráció. Nézzünk egy példát: div#doboz { width: 200px.gif') 6. padding: 10px. hogy az Internet Explorer 6. Méretek Az elemek szélesség (width) és magasság (height) tulajdonsága segítségével az elem mérete befolyásolható.9. Itt kell megemlítenünk.10.0 és 7. A következő ábra40 mutatja a probléma lényegét (a vízszintes kiterjedésre koncentrálva): A W3C szándéka szerint a width és a padding megadása esetén a width a tartalom (content) tényleges szélességét jelenti. Erre is láthatunk egy példát: list-style: square inside url('arrow. A tulajdonság három legalapvetőbb értéke a block.6. Elsősorban doboz-jellegű elemeknél van értelme használni: például egy kép méretét. Megjelenítés A megjelenítés módja A display tulajdonság egy elem más elemekhez viszonyított megjelenését befolyásolja. 6. Ezzel szemben az Explorer a width értékét csökkenti a padding értékével. } A dobozban levő szöveg az Explorerben 180. míg a többi böngészőben 200 pixel széles lesz.CSS 87. inline és none. és a content mérete így kisebb lesz. oldal Közös deklaráció A listaelemek esetén is használható a már jól megszokott. 40 forrás: http://en.

div) a block az alapértelmezése. és a div elemek eltüntetésére: p {display: inline} div {display: none} <p>Első bekezdés. A kép a bekezdés belsejében. hogy a navigáció áttekinthetőbb legyen.</p> <p>Második bekedés. mintha egy nagy méretű betű lenne a szövegben: <p> Ez egy szöveg. és a környező tartalom körül tudja futni az elemet. Ez egy szöveg. Ez egy szöveg. h1.) Itt praktikus.h6.1 A lebegtetés Hagyományosan képeknél használt.6. Ez egy szöveg. <img src="logocss. small. oldal Web programozás (0. körbefuttatva a következő tartalommal: .10.88. Sok érdekes eset közül csak egy faszerkezetű navigációs elemet nézzünk meg közelebbről. span) az inline. Nézzünk egy képes példát először CSS nélkül. vagy akár nagyobb részeket is be lehet csukni. 6. Ezt a példát a következőkben még alaposabban megvizsgáljuk. Ez egy szöveg. a kép jobb oldalt jelenik meg. ami szerint az oldal főmenüjét felsorolt listával is szokás létrehozni. p. és a CSS szintjén inline listaelemekkel megoldani a menüpontok egymás mellé kerülését.gif" width="95" height="84" /> Ez egy szöveg. Felmerülhet a kérdés. Ez egy szöveg. ol. Ez egy szöveg. Ez egy szöveg.</p> <div>Nem látható div elem. ha egyes faelemeket. Ez egy szöveg. verzió) Egyes HTML elemeknek (pl. (A Windows Intéző bal oldali panelére érdemes gondolni. Ez egy szöveg. Ez egy szöveg. míg másoknak (pl. Ez egy szöveg. Nézzünk egy egyszerű példát a bekezdések inline-ként való használatára. ul. Ennek segítségével a soron belül megjelenő elemet ki tudjuk emelni a sorfolytonosságból. img. hogy mi értelme van egy elem láthatóságát kikapcsolni.</div> Egy másik – gyakorlati szempontból érdekes – példa. bár más elemeknél is praktikus lehetőség a float tulajdonság alkalmazása. Ha a kép elem megkapja a float: right formázását.. Ez egy szöveg. sorfolytonosan szerepel (pont úgy. Ezt JavaScripttel támogatva egyszerűen meg lehet tenni: kattintás hatására egy bizonyos elem display tulajdonságát kell none vagy block értékre váltani.

akkor ezt a kép margin tulajdonságaival tehetjük meg. width:120px.CSS 89.. margin:0 0 15px 20px. és ezt a csoportosító div elemet lebegtetjük. div { float:right. A menü egyszerű HTML lista: <ul> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> </ul> A következő eredményt szeretnénk látni: Megjegyzés: A képen nem látszik. akkor ez egy apró trükkel megvalósítható. hanem egy div elem segítségével egységbe zárjuk a képet és a feliratát. text-align:center. hogy az egérkurzot a Menü 1 felett van..6. hogy tudjunk formázást hozzákapcsolni.gif" width="95" height="84" /><br /> A CSS szuper! </div> <p>Ez egy szöveg. hogy nem közvetlenül a képet lebegtetjük. Tipp: a bekezdés első betűjét tegyük egy span elembe. Ez egy szöveg. . } <body> <div> <img src="logocss. Ha a képhez feliratot is szeretnénk társítani. Az eddigiek alapján egy iniciálé lebegtetése egyszerű feladat. border:1px solid black. . A megoldás lényege. padding:15px. oldal Ha a kép és a körbefuttatott tartalom közt nagyobb helyet szeretnénk kihagyni. Horizontális menü Nézzük most meg a korábban beígért menüs példát.

a:hover { background-color:#ff3300} Az egérkurzorra színváltással reagál a menüpont. A keretek indokolatlan használatánál talán már csak a táblázatos oldalkialakítás okozott több bonyodalmat és felesleges munkát. li {display:inline} Ez a sor oldja meg. border-right:1px solid white. az egyesített cellák.6.6em. hogy a menüpontok egymás mellé kerüljenek. megjelentek a 2-3-4 szinten egymásba ágyazott táblázatok. A következőt szeretnénk elérni: . text-decoration:none. pozicionálásához a táblázatok használata. } A menün kívüli háttérszín és a jobb oldali szegély színe itt meg kell. Ne legyen aláhúzva a link. Példaként nézzünk egy alap oldalelrendezést fejléccel. hogy egyezzen. Régi “jól bevált”. mert ha a szöveg nem fér ki. a csak térköz kialakításához létrehozott sorok és oszlopok – vagy ami még ennél is elvetemültebb ötlet – a “távtartó gif-ek”. hogy néhány ősz hajszállal “gazdagodott”. lábléc alulra stb. margin:0. list-style-type:none. padding:0.2em 0. A módszer rövidesen elkezdett burjánzani. A CSS 2-es verziója óta semmi szükség az ilyen elavult és értelmetlen technikákra. Felesleges táblázatok nélküli oldalkialakítás A webfejlesztés elmúlt éveiben sok zsákutcát megjártak a szakma művelői. padding:0. lábléccel és baloldali (például menü kialakítására alkalmas) sávval. width:6em. Web programozás (0. Érdemes azonban vigyázni ezzel a módszerrel. } Csak maga a szöveg felesleges térközök és jelölő nélkül. a { float:left. color:white. esetleg a dizájn megváltoztatni. hogy a link a teljes li területét elfoglalja. ul { float:left. ezért a teljes li elem linkként működik. és sokak által még a mai napig is legjobbnak ítélt módszer a menük oldalra. fejléc felülre. birtokolja a teljes vízszintes sávját. width:100%. az lehet. Fix szélességű gombok érhetők el.90. Érdemes megfigyelni. verzió) A menü az alatta levő szövegtől elválik. a dizájn szétesik. Aki már megpróbált egyszer egy ilyen szerkezetű oldalt megérteni. background-color:purple. oldal Nézzük meg közelebbről a példa fontosabb pontjait.

. hogy a lényegi információtól haladjunk a kevésbé lényeges felé. Érdemes még azt is megfigyelni.. bár bizonyos esetekben ez is szükséges lehet. hogy a left és content doboz nincsenek egy közös dobozba összefogva. margin: 0px.. line-height: 150%. oldal A HTML szerkezet kialakításánál alapvetően a fentről lefelé..6.. azon belül balról jobbra haladó tervezést érdemes követni.</p> <p>Adipiscing elit praesent.. és legtöbb esetben többféle megoldás is adható.</h1> </div> <div class="left"> <p>Phasellus wisi nulla. Másrészt az is egy fontos szempont. border: 1px solid gray..container { width: 100%.</div> </div> </body> A container nevet gyakran alkalmazzák az oldal fő tárolójának azonosításához.</p> </div> <div class="footer">Praesent.. } . div.</p> </div> <div class="content"> <h2>Aenean nummy odio orci</h2> <p>Phasellus wisi nulla..) Az oldal HTML szerkezete: <body> <div class="container"> <div class="header"> <h1 class="header">Praesent..CSS 91. (Természetesen összetettebb esetben ez a sorrend nem ilyen egyszerű.

} A példa talán legérdekesebb részéhez értünk: a left és content egymás mellé helyezéséhez.left { float: left. Ezen kívül még fontos.footer { padding: 0. Megfigyelhető a 190 pixel széles. padding: 1em. clear: left. hogy a forráskódban utána következő content doboz ne alatta. } div. Alap tulajdonságokkal ez a két doboz egymás alá kerülne.content { margin-left: 190px. padding: 1em. } Az utolsó sor megakadályozza. sárgával színezett bal oldali margin terület. verzió) A container szélessége alapvetően az egész oldal szélességét határozza meg. hogy a content elem bal margója (margin-left) is be lett állítva. amikor a content doboz van kijelölve (ez a bal alsó részen jól látszik). csak erre a dobozra lesznek hatással. . Ehhez hasonlóan színeket. border-left: 1px solid gray.div. margin: 0. width: 160px. hogy az oldal ki fogja tölteni a teljes ablakszélességet. A margin és border tulajdonságok már ismerősek. } div. oldal Web programozás (0.header { padding: 0.6. Az ábra azt a pillanatot mutatja. h1. margin: 0. de a left elem float formázása lehetővé teszi. és a konkrét számérték is a jobb alsó Layout elemben. míg a line-height öröklődni fog a tartalmazott dobozok irányába. így a left és content dobozok soha nem fogják egymást zavarni. color: white. hanem mellette (is) jelenjen meg. hogy a két doboz bal oldalán lebegő (float) elem legyen. betűtípusokat szokás ilyen módon.header. egységesen megadni.92.5em. A megértéshez érdemes a működő példát a FireBug kiegészítő Layout nézetével is megnézni. background-color: gray. Látszik. div.

6. hogy a táblázat celláinál megszokott háttérbeállítások itt nem úgy működnek.6.) . nehézkes lehet. Relatív pozíció Az elemeket alapértelmezett (static) helyzetüktől el tudjuk mozgatni a relatív pozicionálás segítségével vízszintes és függőleges irányban. Az így eltolt elem “eredeti” helye üresen marad. right. Hosszú távon azonban busásan meg fogja hálálni a befektetett energia. és a háttér ügyes beállításával el lehet azt a hatást érni. oldal Megjegyzés: A táblázatos oldalkialakítási módszer után a tisztán CSS-re építő megoldás logikája furcsa. hiszen itt nem két egyforma magasságú celláról van szó. Tehát nem az egymás melletti dobozok.CSS 93. amit szeretnénk. hanem az őket közösen tartalmazó doboz hátterét kell beállítanunk. A relatív eltolás mértékét a left. (Ez lényeges eltérés a lebegtetett elemekhez képest.2 Pozicionálási sémák A position tulajdonság segítségével az alapértelmezett static beállítás helyett relatív és abszolút pozicionálást is kérhetünk. Ilyen jellegű probléma esetén van egy egyszerű megoldás: az egymás mellé kerülő dobozokat egy közös tartalmazó dobozba helyezzük. top és bottom tulajdonságokkal határozhatjuk meg. oda más elem nem fog becsúszni.10. Az előző példánál maradva talán az szokta a legtöbb nehézséget okozni.

</p> h1 { font-size: } h1. -0. black. és más színnel jelennek meg.. Nézzük a példát: <h1 class="shadow">Főcím</h2> <h1 class="main">Főcím</h2> <p> Bekezdés. h1 { font-size: margin: } h1. #bbb. Bekezdés.94. Ezzel szemben az abszolút módom pozicionált elem nem tart fenn egy területet. .6. de jól szemlélteti a relatív pozicionálás lehetőségeit. A megoldás hátránya is jól látszik a képen: a címet követő bekezdés nem követi közvetlenül a címet. A megadott pozíciók itt a tartalmazott dobozon belüli abszolút pozíciók.shadow { color: margin: } 2em.shadow { color: } 2em. 6px. absolute. oldal Web programozás (0. 6px. Bekezdés. Abszolút pozíció A relatív pozíció esetén csak eltoltuk az elemet a helyéről. és a következő elemek számára nem is léteznek. de vizuálisan majdnem egymást elfedve.1em.9em. A megoldás lényege. de az eltolás a környezetére nem volt más hatással. 2px. relative. black. 0px. hogy a cím szövege két példányban szerepel a HTML forrásban. -1..main { color: position: top: left: } h1. Az előző példa így megoldható abszolút pozicionálással is a korábbi hátrány nélkül. verzió) A következő árnyékkal ellátott cím példa szemantikusan ugyan nem szerencsés.main { color: top: left: position: } h1. #bbb. Természetesen ez a hátrány további trükkökkel kiküszöbölhető.

minden fül-kattintás esetén újratöltődő megoldás helyett JavaScript segítségével látványosabb megoldást is alkalmazhatunk. Az elem itt is kikerül a pozicionálási sémából. a hagyományos keretek (frame-k) kiváltására41. Hagyományosan más-más színnel szokás jelezni az egyszerű linkeket. a már meglátogatott linkeket. Ekkor a hagyományos. pl. 6.11. akkor alapértelmezetten a (HTML-ben) későbbi elem takarja el a korábbit. szituációban válnak különlegessé. de mindig csak egy látható. Megjegyzés: Az Explorer nem teljes körűen támogatja. 6. a többi nem. hogy ugyanazon a helyen több doboz helyezkedik el.4 Z-index Legtöbb esetben az elemek nem takarják egymást.456bereastreet.11.3 Láthatóság A visibility tulajdonság segítségével az elem alapértelmezett láthatósága (visible érték) helyett el is rejthetjük azt (hidden érték). hogy egy bonyolultabb adminisztrációs felületet könnyebben áttekinthetővé tehet egy több füles elrendezés. Nagyszerűen alkalmazható. A megoldás alapja. Ha ez nem megfelelő. Ha mégis.de/jquery/tabs/ 6. az éppen az egérkurzor alatt levő és a kattintás közben levő linkeket: a:link a:visited a:hover a:active {color: {color: {color: {color: #FF0000} #00FF00} #FF00FF} #0000FF} Ma talán a :hover látszólagos kiválasztóval találkozhatunk a legtöbbször. míg az előző aktuális elemet láthatatlanná kell tenni. Példaként érdemes megnézni a következő példát: http://stilbuero. oldal Fix pozíció A fix pozíció az előző speciális esete. és nem is csupán a betűszínek. hanem az adott környezetben.10. hanem akár komolyabb „viselkedés” is megvalósítható vele.CSS 95.10. Ezek ugyanis olyan elemekre vonatkoznak. A fület megvalósító elemek kattintás eseménye esetén azt a dobozt kell láthatóvá tenni.6. amelyik az adott fülhöz tartozik. ahol a felhasználó tetszőleges fülre kattintva csak az adott részletekkel akar foglalkozni. amelyek nem fizikailag. hanem a látótér (képernyő) a viszonyítási pont. Látszólagos osztályok A kiválasztók között speciális feladatot látnak el a látszólagos osztályok. de itt nem a tartalmazott doboz. 6. Példaként megemlíthetjük. akkor a z-index értékek meghatározásával manipulálhatjuk a vizuális takarást.com/archive/200609/css_frames_v2_fullheight/ .1 Linkek viselkedése Valószínűleg legismertebb látszólagos osztályok a linkekhez kapcsolódnak. 41 Egy nagyon szép megoldás: http://www.

6. font-size:300%. verzió) 6.gamf.3 Első betű és első sor A :first-letter kiválasztó segítségével az első betű. } 6. mobiltelefonon.gamf. Például: <p>Nézze meg a <a href="http://www.2 Első gyermek A :first-child látszólagos osztály egy adott elem első gyermekét képes kiválasztani. vertical-align: top. akkor az adott környezetben ennek a formázásnak semmilyen hatása nem lesz.96. } p:first-line { font-variant: small-caps.11. Nézzünk példaként egy iniciálét. Média típusok Ha már egy weboldalt többféle környezetben használhatunk. valamint egy félkövér első sort: <p> Tetszőleges szövegű bekezdés </p> p:first-letter { color: #ff0000.hu">GAMF</a> . Nézzük a következő példát: a:first-child { text-decoration:none } Ennek hatására minden első gyermekként előforduló a elemre érvényes lesz a fenti formázás. vagy akár kinyomtatva is.11.hu">GAMF</a> és az <a href="http://informatika. A következő verzióban a strong elem átvette az első gyermek szerepét: <p> <strong>Nézze meg</strong> a <a href="http://www. Egy weboldalt megnézhetünk képernyőn. .12.. míg a :first-line segítségével az első sor kaphat speciális formázást. kéziszámítógépen.hu"> Informatika tanszék</a> honlapját!</p> Ha az adott elemben (itt p) nem link (a) az első gyermek elem.. float: left. oldal Web programozás (0.gamf. 6.

com/eric/tools/s5/ http://jigsaw. font-size: 10px} } @media screen.org/css-validator/ .w3.css" media="print" /> A fontosabb médiatípusok: all aural handheld print projection screen minden eszköz felolvasó szoftver kézi megjelenítő lapozható (nyomtatás) vetítés (mint egy kirakati reklám. 42 43 http://meyerweb. font-size: 14px} } @media print { p.CSS 97.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print. Arra azért figyelni kell. amikor a HTML kódhoz külön-külön stíluslap állományokat készítünk: <link rel="stylesheet" type="text/css" href="screen. Nyomtatásban és képernyőn más-más méretet és betűtípust alkalmazhatunk a következő stílusokkal: @media screen { p. ezért természetesen hasznos lehetőség a médiatípusok szerint eltérő formázás alkalmazása.13. serif.test {font-family: verdana.test {font-family: times. sans-serif. oldal Bizonyos formázások csak egyes médiák esetén értelmezhetők.test {font-weight: bold} } Másik gyakran alkalmazott lehetőség. hogy csak érvényes HTML kóddal érdemes a CSS érvényességét vizsgálni.6. Nézzünk példát a betűtípusok eltérő kezelésére. vagy az S542 módszer) képernyő 6. Validátor A CSS kód ellenőrzésére az online is használható W3C CSS Validation Service43 egy nagyon jó eszköz. print { p.

A következő bemutatott példa is innen származik. A legfontosabb felhasznált eszközök az editoron kívül a Firefox két kiegészítője: a FireBug és a Web Developer. divatosnak tekinthető. hogy hasonló módszerrel érdemes általában is egy dizájn felépítését megismerni.com/ .org/ Letöltve: http://www. A szerző az ingyenesen használható webhely-gyűjtemények körül legjobbnak az OpenDesigns44 gyűjteményét tartja. amelyik jól illusztrálja a dizájn fontosabb részeit.6. Többféle oldalelrendezést is tartalmaz.1 Happy Holidays Ebben a fejezetben egy olyan komplex oldal bemutatására kerül sor. oldal Web programozás (0. Ez a dizájn45 sokféle szempontból korszerűnek. Nézzük meg először a kész oldalt: Szemet gyönyörködtető. eredeti forrás: http://www.14. 44 45 http://www.org/preview/?template=1181.opendesigns. verzió) 6. Esettanulmány 6. jól áttekinthető kezdőoldal kialakítására nagyszerűen megfelel.98. Elsősorban a kezdőoldalra fogunk koncentrálni. A bemutatás során érdemes megfigyelni.opendesigns.ramblingsoul.14.

(Itt a nyomtatás korlátai miatt először csak a bal felső sarkot tudjuk megnézni. és a bal felső sarkában néhány információt is megmutat: 1. a div HTML-en belüli sorrendjét Ha ehhez a nézethez hozzávesszük a FireBug kiegészítő HTML faszerkezetű nézetét. Egy komolyabb elemzéshez érdemes a teljes oldalt ilyen módon kinyomtatni. a div szót 2. .6.CSS 99.) A kiegészítő piros vonalakkal berajzolja az oldalon található div-ek határait. érdemes a divek felépítésével kezdeni. a div elem id-jét 3. egy igen jó áttekintést kaphatunk az oldal szerkezeti felépítéséről. oldal Mivel az oldalkialakítás váza alapvetően egymásba ágyazott div-ekből áll. Ennek áttekintésére egyik leggyorsabb módszer a Web Developer kiegészítő Information/Display div order menüpontját megnézni.

#header. body { background:#F0E7AC url(images/bg. body A háttérképe egy vízszintesen ismétlődő kép. A sorrendnél a fa szerint a szülőktől a gyermekekig érdemes haladni.100. az oldal aktív részének szélességét határozza meg. } A body #wrap és #footer részre oszlik. verzió) Nézzük meg az elemek néhány fontosabb CSS formázását. jobbra lebegtetett lista a menühöz. az oldal nagy része (#top. hogy a #main ezt nem fogja semmivel felülírni.6. #top A felső szöveges sort (Happy … FORMS) tartalmazza. Háttérszíne az oldal törzsének háttérszíne lesz majd. Ez azt is jelenti. A width: 940px. oldal Web programozás (0. Tartalmazza a #sitename (ami egy h1-es cím) és #topmenu elemeket. #topmenu Felsorolt. . ami felső szöveges sor (Happy … FORMS) és a piros sáv háttere lesz.jpg) repeat-x scroll center top. #wrap Ez egy „összefogó” elem. a sáv magasságát határozza meg. #main) bele tartozik. A height:45px.

display:block. a 32%-os méretek ezt éppen lehetővé teszik. min-width:400px. benne egy h2-es címmel. A háttérképe 940x228 pixeles. width:32%. padding:5px. padding:5px.CSS #topmenu { display:block. padding:55px 25px 25px 300px.clear { clear:both. A dizájn tartalmaz (blog. Az „összeérést” a padding: 5px zárja ki. } A #main mindkét esetben egy üres blokkal záródik: <div class="clear"/> .col { float:left.6. oldal #header A fenti piros sáv. hogy a következő #footer kezdetéig tartson a #main. } #sidebar { float:right. } Ennek célja. amelyek formázása: #main . } A három doboz egymás mellé csúszik.html) egy más típusú oldalelrendezést is. A fenti ábrán 3 „hasábot” tartalmaz. ahol a #content és #sidebar részek 2:1 arányban a tartalmat és az oldalsó sávot tartalmazzák. padding:5px. (Ez azért nem triviális.description { color:#FFFFCC. font-size:24px. } #main Az oldal fő tartalmi része. akkor a háttér nem fog mind- . Ezek formázása: #content { float:left. list-style-position:outside. padding-top:11px. list-style-type:none. A h2-es cím formázása: #header . } 101. float:right. width:32%. width:65%. list-style-image:none. mert ha egy doboznak csak lebegtetett gyermekei vannak.

css"> A HTML dokumentum melyik részében kell a külső stíluslapra hivatkozni? • • • • A body tagban A dokumentum elején A dokumentum végén A head tagban Milyen HTML tulajdonsággal lehet soron belüli stílusmegadást alkalmazni? • • • font styles style .15.css"> <link rel="stylesheet" type="text/css" href="mystyle. Ellenőrző kérdések Minek a rövidítése a CSS? • • • • Colorful Style Sheets Cascading Style Sheets Computer Style Sheets Creative Style Sheets Hogyan tudunk külső stíluslapot HTML oldalhoz kapcsolni? • • • <stylesheet>mystyle.clear elem nélkül a #footer (és lényegében annak háttere) felcsúszna: #footer A #footercontents (csíkos hátterű) és a #credits elemeket tartalmazza.102. oldal Web programozás (0.css</stylesheet> <style src="mystyle.) A . 6.6. verzió) egyik „alatt” kitartani.

. color: ..h1 {background-color:#FFFFFF} h1.all {background-color:#FFFFFF} Hogyan lehet egy tag szövegszínét beállítani? • • • • text-color=..color:black} body {color: black} {body:color=black(body} body:color=black Hogyan lehet megjegyzést beszúrni a CSS fájlba? • • • • // this is a comment // this is a comment // /* this is a comment */ ' this is a comment Melyik tulajdonság határozza meg a háttérszínt? • • • color background-color bgcolor Hogyan tudunk minden h1 tagnak háttérszínt beállítani? • • • h1 {background-color:#FFFFFF} all.6. Milyen tulajdonsággal állítható be a szöveg mérete? • • • • text-size text-style font-size font-style . oldal Melyik helyes CSS szintaxis? • • • • {body. fgcolor: ..CSS • class 103.... text-color: ..

ha minden p tagot félkövéren akarunk megjeleníteni? • • • • p {font-weight:bold} <p style="text-size:bold"> p {text-size:bold} <p style="font-size:bold"> Hogyan tudjuk a linkeket aláhúzás nélkül megjeleníteni? • • • • a {decoration:no underline} a {text-decoration:no underline} a {underline:none} a {text-decoration:none} Hogyan tudjuk a szöveg betűtípusát beállítani? • • • font= font-family: f: Hogyan tudunk szöveget félkövéren megjeleníteni? • • • font-weight:bold font:b style:bold Hogyan tudjuk beállítani egy tag bal margóját? • • • • margin-left: indent: text-indent: margin: Hogyan tudjuk beállítani.104. verzió) Melyik helyes. oldal Web programozás (0.6. hogy a lista elemek négyzettel jelenjenek meg? • • • • list-type: square list-style-type: square type: square type: 2 .

és ízlés szerint módosítsa a felépítését. amelyik tetszetős a számunkra.17.16.org/en-US/firefox/addon/3408 . blogmarkok foglalkoznak a legújabb technikákkal. Szabványosítás Ha az előző keresés folyamán talált nem szabványos oldalt.hu gyűjteményét érdemes megemlíteni.6.) Készítsünk teljes HTML+CSS dizájnt a kép feldarabolt részeit is felhasználva. Az első cikk címe: http://weblabor.CSS 105. hogy szabványossá váljon! Teljes dizájn készítése Keressünk egy olyan oldalt a weben. 46 https://addons. a fenti esettanulmányhoz hasonlóan elemezze. ugyanakkor legyen szabványos is! 6. A cikksorozaton kívül további fórumtémák. (Használhatjuk a Firefox Save As Image46 kiegészítőjét is. akkor módosítsa úgy a CSSt. Az Alt+PrintScrn billentyűkombinációval helyezzük vágólapra.lap. Feladatok Elemzés Keressen például az OpenDesigns oldalán (X)HTML és CSS szerint szabványos oldalakat. majd egy képszerkesztő programmal mentsük el. oldal 6. hírek. További források Magyar nyelven messze a legfontosabb forrás a Weblabor ide vonatkozó cikksorozata több mint 10 cikkel. ami a lehető legjobban hasonlít a fényképre. Ezen kívül összefoglaló oldalként a http://css.hu/cikkek/cssalapjai1.mozilla.

ahol az alkalmazott JavaScript kód öncélú.6. a felhasználói élmény növeléséhez. akkor látható. Weboldalak milliói használják űrlapok helyes kitöltésének ellenőrzéséhez. vagy attól jobban elszeparálható kód Események kezelésére alkalmazható A neve ellenére nincs szoros kapcsolatba a Java nyelvvel C++ és Java szintaxisra alapoz A szabvány leírását az ECMAScript specifikáció tartalmazza Kód beillesztése a HTML oldalba A HTML script tagja használható arra. a felhasználói élmény növelését. sütik kezeléséhez. Végül meg kell még említeni. Sajnos sok olyan oldal van. A script tag tartalma közvetlenül nem jelenik meg a böngésző ablakában. hogy ott az eredeti. Jól látszik a példán. Bevezetés a JavaScript nyelvbe Mi a JavaScript? • • • • • • • Szkriptnyelv (tehát értelmezett. Nagyon egyszerű kódok kivételével nem szokás47 a JavaScript kódot a body tagba tenni. oldal Web programozás (0. .1. Például a következő kód a HTML aktuális helyére a Hello Világ! szöveget jeleníti meg: <body> <script type="text/javascript"> document.write("Hello Világ!") </script> </body> Megjegyzés: Ha megnézzük a böngészőben az oldalunk forrását. sőt meglehetősen zavaró az oldal használója számára. Összetettebb működést inkább önálló függvények formájában szoktunk elhelyezni a head tagba. 7. hanem a böngésző fogja azt futtatni. hogy JavaScriptben elfelejthetjük a sorokat lezáró pontosvesszőket. és nem a JavaScript által „módosított”. verzió) 7. vagy még inkább külső JavaScript állományba.write módszerét a mai korszerű megközelítésben nem illik alkalmazni. JavaScript A JavaScript ma az egyetlen jelentős kliens oldali szkriptnyelv. A document. Nézzük meg ezek módjait: 47 A könnyebb áttekinthetőség érdekében a demonstrációs példákban. hogy az AJAX és hasonló technikák ismét erősítik a JavaScript hasznos felhasználását. letöltött verzió látszik. a böngésző értelmezi) Interaktivitást (működést) ad a HTML oldalhoz HTML oldalba építhető. vagy éppen a fejlesztés közben ezt a szabályt időnként áthágjuk. hogy az oldalhoz JavaScript kódot kapcsoljunk.106.

7.JavaScript

107. oldal

<head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> ... </body>

A példán látszik, hogy a body tag betöltődésekor (onload esemény) fog lefutni a message nevű függvény, ami egy figyelmeztető dialógusablakot dob fel. Ha a message függvény kódját egy message.js állományban helyeztük volna, akkor a head részbe a következő kód lenne szükséges:
<script type="text/javascript" src="message.js"></script>

7.1.1

Változók

A változók olyan tárolók, amelyekbe adatokat helyezhetünk. A változó értékét meg tudjuk változtatni a szkript futása során. A változóra a nevével tudunk hivatkozni, és az értékét bármikor lekérdezni vagy módosítani. A változó nevek (mint ahogy az egész JavaScript nyelv) kis-nagybetű érzékenyek, és betűvel vagy aláhúzás karakterrel kezdődnek.

Változó deklaráció
A var kulcsszó segítségével a következő módon tudunk változót létrehozni:
var strname = "Hege"

Létre lehet hozni változót var nélkül is:
strname = "Hege"

Ahogy a példákban is látszik, egyből értéket is adtunk a változóknak.

Változók élettartalma, láthatósága
Ha egy változót függvényen belül hozunk létre, a változó csak a függvényen belül érhető el. Ha kilépünk a függvényből, a változó megszűnik. Ezeket a változókat lokális változóknak nevezzük. Ha több különböző függvényben használjuk ugyanazt a változónevet, akkor azok egymástól független változók lesznek, mindegyik csak abban a függvényben látható, ahol létrehoztuk. Ha egy változót a függvényeinken kívül deklarálunk, akkor az oldal minden függvényéből el tudjuk érni azt. A változó akkor jön létre, amikor deklaráljuk, és akkor szűnik meg, ha az oldalt bezárja a felhasználó.

Típusok
Egyszerű példák esetén nem túl sokat kell foglalkoznunk a típusok kérdésével, hiszen a JavaScript más szkriptnyelvekhez hasonlóan dinamikus típusrendszerű, vagyis a változó aktuális értéke határozza meg a típusát, ami bármikor megváltoztatható, pl. egy más típusú kifejezés értékadásával.

108. oldal

Web programozás (0.6. verzió)

A változók típusa lehet objektum, primitív érték (undefined, null, boolean, string, number) vagy metódus (függvény objektum).

7.1.2

Elágazások

Egy egyszerű lineáris kód csak nagyon egyszerű feladatokat tud megoldani. Legtöbbször szükségünk lesz különböző vezérlési szerkezetekre, hogy a kódunk megoldhassa a feladatát. Kód írása közben nagyon gyakran alkalmazunk elágazásokat, hogy különböző esetek között különbségeket tudjunk tenni. A JavaScript a C-hez és Javához hasonlóan többféle elágazást ismer.

if utasítás
Akkor használjuk, ha egy adott feltétel beteljesülése esetén szeretnénk valamit végrehajtani. Szintaxis:
if (feltétel) { utasítás }

A következő kód Jó reggelt kíván, ha még nincs 9 óra.
<script type="text/javascript"> var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>Jó reggelt!</ strong >") } </script>

A következő példa az ebédidőre figyelmeztet.
<script type="text/javascript"> var d=new Date() var time=d.getHours() if (time==12) { document.write("<strong >Ebédidő!</ strong >") } </script>

if-else utasítás
Akkor van szükségünk erre az utasításra, ha a feltételünk teljesülése mellett a nem teljesülés esetén is kell valamilyen feladatot ellátni. Szintaxis:
if (feltétel) { utasítás ha igaz } else { utasítás ha hamis }

Egészítsük ki a „Jó reggelt” példánkat:

7.JavaScript
<script type="text/javascript"> var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>Jó reggelt!</ strong >") } else { document.write("Jó napot!") } </script>

109. oldal

switch utasítás
Ez az utasítás akkor alkalmazható nagyszerűen, ha egy adott kifejezés különböző értékei esetén más-más feladatot kell a kódnak végrehajtani. Szintaxis:
switch(n) { case 1: utasítás 1 break case 2: utasítás 2 break default: utasítás }

Először az n kifejezés kiértékelése történik meg, majd a lehetséges case esetek között próbál a böngésző megegyezőt találni. Ha esetleg nincs, akkor a default címke fog aktiválódni. A break pedig azért szükséges, hogy a programunk ne tudjon a másik esetre rácsorogni. A következő példa a hét napjától függően a munkahelyi hangulatot képes megjeleníteni.
<script type="text/javascript"> var d=new Date() theDay=d.getDay() switch (theDay) { case 5: document.write("Végre péntek!") break case 6: case 0: document.write("Jó kis hétvége!") break default: document.write("Mikor lesz hétvége?") } </script>

7.1.3

Operátorok

Aritmetikai operátorok
operátor név + összeadás példa x=2 eredmény 4

110. oldal y=2 x+y kivonás x=5 y=2 x-y x=5 y=4 x*y 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x--

Web programozás (0.6. verzió)

3

*

szorzás

20

/ %

osztás maradék képzés

3 2.5 1 2 0 x=6 x=4

++ --

növelés 1-el csökkentés 1-el

Értékadó operátorok
operátor = += -= *= /= %= példa x=y x+=y x-=y x*=y x/=y x%=y eredmény x=y x=x+y x=x-y x=x*y x=x/y x=x%y

Összehasonlító operátorok
operátor == === név egyenlő egyenlő típus és érték példa 5==8 x=5 y="5" x==y x===y eredmény hamis

igaz hamis

7.JavaScript != > < >= <= nem egyenlő nagyobb, mint kisebb, mint nagyobb, vagy egyenlő, mint kisebb, vagy egyenlő, mint 5!=8 5>8 5<8 5>=8 5<=8 igaz hamis igaz hamis igaz

111. oldal

Logikai operátorok
operátor && név és példa x=6 y=3 (x < 10 && y > 1) eredmény

igaz

|| !

vagy nem

(x==5 || y==5) !(x==y)

hamis igaz

Sztring operátor
Sztringek összefűzésére a + operátor egyszerűen alkalmazható:
txt1="Ez egy nagyon " txt2="szép nap!" txt3=txt1+txt2

Ekkor txt3 értéke: "Ez egy nagyon szép nap!".

Feltételes operátor
A háromoperandusú feltételes operátor egyszerű esetekben egy if-else utasítást is kiválthat. Szintaxis:
változónév=(feltétel)?kifejezéshaigaz:kifejezéshahamis

A feltétel teljesülése esetén változónév értéke kifejezéshaigaz értéke lesz, különben pedig kifejezéshahamis értéke. A következő példa a Jó reggelt újabb verziója:
<script type="text/javascript"> var d=new Date() var time=d.getHours() var message = "Jó " + ((time<9)?"reggelt":"napot") + "!" document.write(message) </script>

112. oldal

Web programozás (0.6. verzió)

7.1.4

Dialógusablakok

Időnként szükségünk lehet egy honlapon arra, hogy a felhasználó figyelmét ráirányítsuk valamilyen fontos információra egy dialógusablak segítségével. Ezek a dialógusablakok típusuktól függően más-más függvénnyel érhetők el. Nézzük meg a fontosabb lehetőségeket példákon keresztül.

Üzenetablak
Az üzenetablak csupán egy egyszerű információt közöl, ezért az alert függvénynek is csak egy paramétert kell megadnunk. A felhasználó mindössze tudomásul veheti a közölt üzenetet.
<head> <script type="text/javascript"> function disp_alert() { alert("Figyelmeztető ablak!") } </script> </head> <body> <form> <input type="button" onclick="disp_alert()" value="Gomb"> </form> </body>

Kérdés
Bizonyos esetekben hasznos, ha a felhasználótól külön dialógusablakból kérünk választ egy eldöntendő kérdésre. Bizonyos esetekben ez praktikusabb, mint egy oldalon elhelyezett űrlap. Érdemes azonban arra is figyelni, hogy csak tényleg indokolt esetben alkalmazzunk üzenetablakokat! A confirm függvény visszatérési értéke jelzi, hogy a felhasználó melyik gombot választotta.
<head> <script type="text/javascript"> function disp_confirm() { if (confirm("Kérdés")) { document.write("OK") } else { document.write("Mégse") } } </script> </head> <body> <form> <input type="button" onclick="disp_confirm()" value="Gomb"> </form>

de a zárójeleket ekkor is alkalmaznunk kell.5 Függvények A függvények az újra felhasználható kód egyszerű eszközei.7. (Egy jól megírt függvényt akár egymástól jelentősen eltérő weboldalakon is használhatunk. amikor valamilyen esemény bekövetkeztekor egy eseménykezelő függvénynek adjuk át a vezérlést. A kerek zárójelek között a függvények paramétereit adhatjuk meg.. (Hasonlóan. de a kulcsszó nem elhagyható. Itt is a függvény visszatérési értékén keresztül juthatunk a felhasználó válaszához.par2. mint ahogy a megjelenítést meghatározó CSS-t is elkülönítjük.JavaScript </body> 113.) <head> <script type="text/javascript"> function disp_prompt() { var name=prompt( "Add meg a neved". a második pedig az alapértelmezett válasz (nem kötelező megadni).) A függvények használatának egyik legegyszerűbb esete."Névtelen") if (name!=null && name!=""){ document. A függvény első paramétere az üzenet szövege. null a visszaadott érték.. Egy egyszer megírt függvényt a kód különböző helyein tetszőlegesen sokszor meghívhatjuk.) Másrészt a függvények teszik lehetővé. Az előző fejezet példái is jól mutatják ezt a megközelítést. hogy a HTML kódtól minél jobban elválasszuk a viselkedési réteget megvalósító JavaScriptet. Függvénydeklaráció A deklaráció szintaxisa: function függvénynév(par1. oldal Egyszerű adatbevitel A prompt függvénnyel egy egysoros szöveg bevitelét kérhetjük a felhasználótól.write( "Szia " + name + "!") } } </script> </head> <body> <form> <input type="button" onclick="disp_prompt()" value="Gomb"> </form> </body> 7.1. így meg kell szokni a használatát.) ..parX) { függvénytörzs } A function kulcsszó szükségessége egy kicsi furcsa lehet a C/C++ nyelv után.. (Természetesen paraméter nélküli függvényeket is készíthetünk. (Ha a felhasználó a Mégse gombot választotta.

a ciklus futási feltétele valamilyen más módon áll össze.b) { return a*b } A függvényt például a következő módon tudjuk meghívni: product=prod(2. i++) { document.6.) while (feltétel) { cikusmag } . A ciklusmag lefutásának száma a ciklusváltozó kezdő és végértékétől. oldal Web programozás (0. A kód a return hatására a függvényből kilépve a vezérlést is visszaadja az őt hívó kódnak. (Akár „végtelen” ciklus is lehet logikailag. amelyet ciklusváltozónak is szokás hívni. i <= 10.3) A függvény 6-os visszatérési értéke bekerül a product változóba. A visszatérési érték a return utasítással adható meg. hányszor kell a ciklusmagnak lefutnia. Általában ciklusváltozóra nincs is szükség. for ciklus A for ciklust akkor szokás alkalmazni. A következő egyszerű függvény a két paramétere szorzatát adja vissza: function prod(a.1. változó <=végérték. <script type="text/javascript"> for (i = 1. Gyakorlatilag a böngésző egy idő után leállítja a túl sokáig futó szkriptet.write("<input type=button value=" + i + " onclick=\"alert("+ i +")\"> ") } </script> while és do-while ciklusok Ezeket a ciklusokat akkor szokás alkalmazni. A következő példa egy számkitaláló játék alapja lehet. A while ciklus magja addig fut. 7. Jellemző szintaxis: for (változó=kezdőérték. változó++) { ciklusmag } Fontos szerepet tölt be a változó. ha a ciklus elkezdése előtt lehet tudni. valamint a változó növelési módjától függ. hogy egy kódot többször végrehajtsunk. ha nem tudjuk előre. hányszor kell majd a ciklusnak lefutnia. amíg a feltétel igaz.114. verzió) Visszatérési érték Egyes függvények visszatérési értéket is előállíthatnak.6 Ciklusok A ciklusok lehetővé teszik.

pedig a kód simán lefut. hol. Megjegyzés: Ellenőrző kérdésnek is beillik a következő trükkös kérdés: Ad-e hibát a következő kód. mert nem a szokásos tagolást alkalmazza. hogy mindenképpen lefut egyszer a ciklusmag. hogy valamilyen tároló elem. látszani fog. A C alapú nyelvekben a break és continue utasítások használhatók a ciklus teljes. i++) { if (i%3 == 0) continue. Ilyen esetekben a szintaxist egyszerűsíteni tudja a forin ciklus.write("<input type=button value=" + i + " onclick=\"alert("+ i +")\"> ") } </script> for-in ciklus A for ciklust gyakran használjuk arra. document. például tömb minden elemével csináljunk valamit. oldal A do-while ciklus logikája csak abban más. ha igen.7. de a 3-al osztható számokat kihagyja: <script type="text/javascript"> for (i = 1. vagy csak az aktuális ciklusmag futás megszakítására. Ha az előző kódot egyetlen sortöréssel módosítjuk a következő formára. változó++) { ciklusmag } while (feltétel). amennyi az objektum elemeinek száma. A következő példa egy tömb elemeit írja ki egymás alá: . Első ötletként mondhatjuk. változó <=végérték. Sőt a ciklusmagban a változó kifejezéssel közvetlenül hivatkozhatunk az éppen bejárt elemre. (A break a switch-case szerkezetben már bemutatta kiugrási feladatát.): for (változó=kezdőérték. a második törzs nélkül (. A feladat azért becsapós. mit csinál: for (változó=kezdőérték. hogy ilyen ciklust nem lehet írni.JavaScript 115. i <= 10. hogy ez két független ciklus.) A következő példa a korábbihoz hasonlóan gombokat hoz létre. Ezért a strukturált nyelvek szűk keretek között teszik csak lehetővé a vezérlésátadó utasítások használatát. és csak ez után értékelődik ki a feltétel: do { cikusmag } while (feltétel). Szintaxis: for (változó in objektum) { ciklusmag } A ciklusmag annyiszor fog lefutni. változó++) { ciklusmag } while (feltétel). változó <=végérték. Vezérlésátadás Nem kevés fejtörést okozott a programozás történetében a strukturálatlan nyelvek goto utasítása. ha nem.

116. oldal
<script type="text/javascript"> var mycars = new Array() var x mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br />") } </script>

Web programozás (0.6. verzió)

7.1.7

Eseménykezelés

JavaScript segítségével készíthetünk dinamikus weblapokat. Alapvetően ez azt jelenti, hogy a honlap különböző felhasználói (és böngésző) eseményeket képes érzékelni, és azokra valamilyen módon reagálni. Jellemző események a következők: • • • • • • egérkattintás a weboldal vagy egy objektum letöltődött az egeret érzékeny területen mozgatjuk listából egy elem kiválasztásra kerül űrlap elküldés billentyűleütés

A teljes lista referenciákban elérhető. Az egyes események bekövetkezése esetén egy függvénnyel szokás a szükséges funkciót végrehajtani.

onload és onUnload
Ezek az események akkor következnek be, ha az oldal betöltése befejeződött, illetve mikor a felhasználó az oldal elhagyását kezdeményezi. Nézzünk néhány hasznos példát (haszontalant, feleslegeset sajnos sokat találhatunk a weben): • • A sütikben tárolt felhasználói beállításokat (pl. a felhasználó által preferált betűméret) szeretnénk betölteni és elmenteni. Oldal elhagyása előtt ellenőrizhetjük, hogy az űrlapban történt-e változás. (Ha van begépelt adat, és véletlen kattintunk egy linkre, elveszhet a begépelt szövegünk.) Ha van változás, csak kérdés után engedjük el az oldalról a felhasználót. Oldal betöltődése után (onload) a spammer robotok miatt elkódolt e-mail címeket visszakódolhatjuk. (Ha saját, egyedi elkódolást alkalmazunk, a spammer robot programok nem fogják azt ismerni, tehát a kitett e-mail címet nem tudják ellopni.)

7.JavaScript

117. oldal

onFocus, onBlur és onChange
Ezek az események elsősorban űrlapok ellenőrzésére, vagy az űrlapok használatának kényelmesebbé tételére szolgálnak. Az onFocus akkor következik be, ha az elem megkapja a fókuszt (például kattintás vagy a tab billentyű hatására). Az onBlur az elem elhagyásakor, az onChange pedig bármilyen, a bevitt adatban történő változás esetén következik be. Nézzünk egy példát az e-mail cím helyes szintaxisának ellenőrzésére:
<input type="text" size="30" id="email" onchange="checkEmail()">

Összetettebb logikájú űrlapokon hasznos lehet, ha az összefüggéseket vizuálisan is jelezzük a felhasználónak. Például ha a felhasználó egy jelölőnégyzeten kattintva jelzi, hogy van munkája, adjunk lehetőséget a munkahely mező kitöltésére. Egy ehhez hasonló esetben megoldás lehet a következő példa:
<input type="checkbox" onclick= "document.getElementById('info').style.visibility = this.checked ? 'visible' : 'hidden'"> Dologozok <br> <div id="info" style="visibility:hidden"> Munkahely: <input name="munkahely" type="text"> </div>

onSubmit
Űrlap elküldése előtt az összes ellenőrzést el lehet végezni ennek az eseménykezelőnek a segítségével. Az eseménykezelő logikai értékével jelezhetjük a böngészőnek, hogy az űrlap elküldhető-e:
<form method="post" action="check.php" onsubmit="return checkForm()">

A checkForm függvény visszatérési értékét az űrlap adatai érvényességének függvényében kell beállítanunk.

onClick, onMouseDown és onMouseUp
Az onClick esemény akkor következik be, ha a felhasználó kattint az elemen. Csak akkor érdemes ezt az eseményt kezelni, ha tényleg a kattintáshoz kell kötni egy feladatot, például egy Tili-toli játéknál a mozgatandó kép kijelölésére, vagy egy fényképalbum esetén a mozaikképre kattintva egyből megjelenjen a nagy méretű kép a nézőke dobozban. Az utóbbi példa vázlata:

118. oldal

Web programozás (0.6. verzió)

<img src="sbergamot.jpg" alt=" " onmousedown="document.images['large'].src='bergamot.jpg'"> <img src="sfoxglove.jpg" alt=" " onmousedown="document.images['large'].src='foxglove.jpg'"> <img src="spansy.jpg" alt=" " onmousedown="document.images['large'].src='pansy.jpg'"> <br> <img src="space.jpg" alt=" " id="large">

Még speciálisabban alkalmazható az onMouseDown és onMouseUp esemény kezelése, ami az egérgomb lenyomásakor és felengedésekor következik be. Példaként esetleg játékprogramokat lehetne említeni. Sok helyen alkalmazott felesleges és rossz gyakorlat, hogy a HTML link helyett is valamelyik eseményt alkalmazzák. Szintén elavult megoldás az oldalunk menüpontjait képekkel megvalósítani és a képeket az onMouseDown és onMouseUp események esetén cserélgetni. (CSS-el is megoldható a csere, másrészt az aktivitást jelző kép lassú kapcsolat esetén nem jelenik meg azonnal, ami nagyon zavaró.)

7.1.8

Kivételkezelés

A szkriptjeink futása közben előfordulnak különböző hibák, amelyeket kezelnünk kell. A látogatók se a felbukkanó (számukra) értelmetlen hibaüzeneteket, se a nem működő oldalakat nem szeretik. A JavaScript nyelvben két lehetőség van a hibák kezelésére. A modern megoldás a kivételkezelés módszerén alapul, a hagyományos pedig az onerror esemény kezelésén. (Ebben a jegyzetben elsősorban a korszerűbb megoldással fogunk foglalkozni.)

try-catch szerkezet
A try-catch nyelvtani szerkezet a normál kód és a hibakezelő kód szétválasztására épül. Szintaxis:
try { // normál kód } catch(err) { // hibakezelő kód }

A try blokkban szereplő kód fog futni mindaddig, amíg valamilyen hiba (kivétel) miatt a kód normális futása lehetetlenné nem válik. Ilyen hiba bekövetkezése esetén a try blokk futása megszakad, és a catch blokkban fog folytatódni. A catch kód lefutása a vezérlés soha nem tér vissza a try blokkba. Nézzünk egy egyszerű példát. (Mint a legtöbb egyszerű példa, ez sem túl hasznos ebben a formában.) Tegyük fel, hogy egy függvény nevét elgépeltük: alert helyett adlert-et gépeltünk. Ekkor a szkript futása a hibás sornál megáll, és a JavaScript értelmező hibát jelez. (Lehet, hogy ezt a felhasználó észre sem veszi.) Ha azonban alkalmazzuk a try-catch szerkezetet, a hibáról értesülhetünk.

7.JavaScript

119. oldal

<head><script type="text/javascript"> var txt="" function message() { try { adlert("Welcome guest!") } catch(err) { txt = "Hiba történt.\n" txt += "Hiba leírása: " + err.description + "\n" alert(txt) } } </script></head> <body> <input type="button" value="Üzenet" onclick="message()" /> </body>

Kivétel dobása
Kivételt nem csak elkapni, hanem dobni is tudunk. A throw utasítás után meg kell adnunk a kivétel információtartalmát, ami lehet szöveg, szám, logikai érték vagy objektum. Nézzünk egy ellenőrzött adatbevitel példát:
var x=prompt("Írjon be egy számot 0 és 10 között:","") try { if(x>10) throw "Err1" else if(x<0) throw "Err2" else if(isNaN(x)) throw "Err3" } catch(err) { if(err=="Err1") alert("A szám túl nagy!") if(err == "Err2") alert("A szám túl kicsi!") if(err == "Err3") alert("Ez nem szám!") }

Ez a példa első ránézésre valószínűleg senkit sem fog meggyőzni arról, hogy a kivételkezelés módszerével kezelje a felmerülő hibákat. Nagyobb bonyolultságú alkalmazások esetén és hosszabb távon a látszólagos többletmunka már inkább kevesebbet fog jelenteni.

7.2. Objektumorientált programozás
A JavaScript objektumorientált nyelv. Mielőtt azonban a részletekbe mennénk, érdemes megjegyezni, hogy a C++, Java, PHP stb. nyelvekkel szemben itt valódi objektumorientáltságról beszélhetünk, míg az előbb említett nyelveket pontosabb lenne osztály-orientált nyelveknek nevezni. A böngésző JavaScript kód futtatásakor jó néhány objektumot bocsájt a rendelkezésünkre, amiken keresztül a weboldal egyes jellemzőit, részeit érhetjük el, vagy akár manipulálhatjuk is.

120. oldal

Web programozás (0.6. verzió)

Kezdő JavaScript programozóként tehát nem sokban fog különbözni a dolgunk más nyelvi környezetekhez képet, komoly feladatok megoldásához már igen mély JavaScriptes OOP ismeretekre lesz szükségünk. Definíció: Az objektum különböző adatok gyűjteménye. Tulajdonságokkal és metódusokkal rendelkezik.

Tulajdonságok
A következő példa bemutatja, hogy hogyan lehet egy objektum tulajdonságát lekérdezni:
<script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script>

A futás eredménye 12.

Metódusok
A metódusok valamilyen tevékenységet hajtanak végre az objektumon. A következő példa egy String objektum toUpperCase metódusát használja a nagybetűs kiírás érdekében:
<script type="text/javascript"> var str="Hello world!" document.write(str.toUpperCase()) </script>

Az eredmény: Hello world!

Objektumok létrehozása
A JavaScriptben nincsenek klasszikus értelemben vett osztályok. Az objektumokat függvényekkel hozhatjuk létre. Ennek speciális szintaxisa a new operátort alkalmazza. A következő példából az is látszik, hogy a függvényen belül a this kifejezéssel hozhatunk létre objektum-tulajdonságokat.
function osztaly() { //”osztály” létrehozása this.tulajdonsag = 5; } var objektum = new osztaly(); // objektum példányosítása alert(objektum.tulajdonsag);

A kód eredménye 5.

További forrás
A téma hátteréhez Hodicska Gergely Objektum orientált JavaScript programozás a felszín alatt48 című cikkét javasoljuk.

48

http://weblabor.hu/cikkek/oojsafelszinalatt

A következő példa a mai napi dátumhoz képest 5 napot előre számol: var myDate=new Date() myDate. Date Az aktuális dátum és idő lekérdezését a paraméter nélküli hívással tudjuk megtenni.indexOf("World") + "<br />") Az eredmény 6. elsősorban példákon keresztül.7. document. hogyan tudunk tömböt létrehozni. getSeconds metódusokat.polyhistor. Részletes referencia található pl.hu/js13ref/contents.getDate()+5) Array A következő példában is látszik. Hasonló módon használhatjuk például a getHours.2.") Az eredmény: Ma péntek van.htm .write(str. oldal 7. a HTMLinfo49 oldalon. hogy valós számként kerül ábrázolásra.write(Date()) Eredmény: Fri Aug 18 2006 15:15:11 GMT+0200 A Date objektumtól további információkat kérhetünk. Például a hét napját a következő módon írhatjuk ki a getDay metódus segítségével: var d=new Date() var weekday=new Array(7) weekday[0]="vasárnap" weekday[1]="hétfő" weekday[2]="kedd" weekday[3]="szerda" weekday[4]="csütörtök" weekday[5]="péntek" weekday[6]="szombat" document.write("Ma " + weekday[d.setDate(myDate.JavaScript 121. 49 http://htmlinfo.getDay()] + " van. és hogyan tudjuk azt egyszerű for-in ciklussal bejárni. A dátum belső formátumáról érdemes tudni. A következő kód az indexOf metódus segítségével megkeresi egy szöveg első előfordulását: var str="Hello world!" document. String A String hosszának lekérdezésére már láttunk példát. getMinutes. vagyis számolhatunk is vele.1 Fontosabb objektumok röviden Ez a fejezet csupán néhány alapvető objektum felületes bemutatására vállalkozhat.

A következő példa az oldalon való kattintás hatására sárga hátteret állít be: <head> <script type="text/javascript"> function ChangeColor() { document. amelynek segítségével a böngésző a HTML dokumentum struktúráját faszerkezetben ábrázolja és teszi elérhetővé. Az előző példában látott document. . Lehet tömböket összefűzni a concat metódussal. :) A fastruktúra minden pontja egy objektum. manipulálhatóvá a JavaScript számára. verzió) Érdemes megfigyelni. HTML DOM A HTML Document Object Model egy olyan szabvány. hogy a for-in ciklus az x kifejezéssel az éppen bejárt elem indexét kapjuk.background="yellow" A fejezet hátralévő részében különböző objektumok fontosabb szolgáltatásait (metódusait) fogjuk áttekinteni példákon keresztül.body. Ezen kívül megkülönböztetünk Level 1/2/3 DOM-okat. amelyek együttesen a HTML dokumentumot reprezentálják. String-gé összefűzni egy tömb elemeit a join metódussal.bgColor az oldal (body) háttérszínét képviseli. mint az előző. A document. 7. oldal var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.body. Az elemek tartalmazhatnak szöveget és tulajdonságokat is.body. Az objektumok tulajdonságai egyszerűen elérhetők. A style tulajdonság a CSS-ben beállítható tulajdonságokat foglalja össze: document. A következő példa eredményében ugyanazt nyújtja. amit az objektumokból ki is lehet nyerni.122. ami egy elemet reprezentál.3. XML DOM és HTML DOM.style. vagy éppen a sort-tal.write(mycars[x] + "<br />") } Web programozás (0.body objektum a body tagnak felel meg.6. Megjegyzés: A DOM három részre osztható: Core DOM.bgColor="yellow" } </script> </head> <body onclick="ChangeColor()"> Klikkeljen az oldalon! </body> A document objektum tartalmazza az összes további objektumot. azonban a megközelítése más. illetve manipulálhatók.

ilyen alkalmazása nem javasolt.forms tömb az oldalon található összes űrlapot indexelve teszi elérhetővé. A focus praktikus lehet. A következő példa egy link elemet keres meg. hogy ha később változik a HTML oldalunk. azon például valamilyen manipulációt elérni. hiszen ennek segítségével lehet a HTML dokumentum egy adott elemét elérni. A következő példa az oldal címét (title) szúrja be az oldal szövegébe is: <head> <title>Cím</title> </head> <body> <p>Az oldal címe: <script type="text/javascript"> document.microsoft. A JavaScript kód: var link = document.3. Elavult szolgáltatások A document nyújt még más olyan szolgáltatásokat is. Helyette általában az elemet szokás valamilyen módon „megkeresni” (pl. hogy ez egy barátságos oldal. amelyek bizonyos gyakran hivatkozott elemeket egy-egy tömbben adják vissza. hogy a write metódus használata már elavult szemléletű.href="http://www. Ekkor a hibaüzenet megjelenítése után vissza lehet küldeni a kurzort. és újabb űrlapot szúrunk be az oldal elejére. oldal 7..7. Vannak ugyanis olyan tagjai. 7.getElementById('micro') link.com"> Microsoft</a> . ha a JavaScriptet űrlap adatok ellenőrzésére használjuk. hogy csak az id-vel rendelkező elemeket érhetjük el a segítségével.com" link. Megjegyzés: Talán feleslegesnek tűnik az ilyen aprólékos kódolás. majd több jellemzőjét megváltoztatja: <body> <a id="micro" href="http://www. amelyek elavultnak tekinthetők.2 A document objektum A document objektum segítségével elsősorban az egész dokumentumra vonatkozó információkat tudunk kinyerni. majd az innerHTML segítségével a szövegét elérni. akkor az .JavaScript 123..3. Például a document.title) </script> </p> </body> Érdemes megjegyezni.target="_blank" A getElementById metódussal megkapott objektum további érdekes szolgáltatásokat nyújt: például egy elem megkaphatja a fókuszt a focus metódus meghívásával. a hibát tartalmazó beviteli mezőre.write(document. vagy éppen elvesztheti a blur metódus hatására. de sokszor az ilyen apró praktikus segítségek miatt érzi azt a felhasználó. getElementById). vagy módosítani. A következő példából fontos megfigyelni. így egy kattintást megspórol a felhasználó.1 getElementById Az egyik leggyakrabban alkalmazott metódus.w3schools.innerHTML="Visit W3Schools" link. Ezeknek a használatában az okozhat problémát.

majd a return(false). Vannak azonban olyan szempontok is.124. hogy melyik egérgomb volt lenyomva. A feladat egy előugró (popup) ablak nyitása lesz. Sok felhasználó fél a biztonsági kockázatoktól. A JavaScript csak a plusz kényelmi szolgáltatásokat adja.hu/cikkek/diszkretjavascript . vagy éppen milyen koordinátákon van az egérkurzor. hogy a csak JavaScripttel használható (tolakodó) szolgáltatások helyett olyan oldalakat készítsünk. hogy mindenki másnál is futni fog.1 Előugró ablak példa A téma rövid bevezetéseként nézzünk meg egy feladat többféle megoldását. A diszkrét JavaScript50 kifejezés azt az alapelvet jelenti.open('popup.html'. de mégis működnek.'popup'). JavaScript használata esetén az előugró ablak megnyílik (window. Diszkrét JavaScript A JavaScript segítségével sok hasznos funkcionalitást adhatunk hozzá oldalainkhoz. 7."> popup nyitás</a> A link a dokumentum elejére mutat (#).6. amelyek az okos használatra ösztönöznek.html'.open('popup. Másrészt a kódot később olvasni is egyszerűbb ezzel a megközelítéssel. getElementById('azon')). JavaScript nélkül azonban az oldal elejére ugrik a böngésző. pedig ez nincs így.html" onclick="window. miatt a böngésző nem fogja a tényleges link célt (#) figyelembe venni.open('popup."> popup nyitás</a> A következő megoldás szintén elérhetetlen JavaScript nélkül: <a href="#" onclick="window. oldal Web programozás (0. akkor hajlamos azt feltételezni.4. Ha e helyett az űrlapokat az azonosítójuk segítségével keresnénk meg (document. Ebből az objektumból lehet kinyerni például. 7.'popup'). Ezen kívül a robotok sem értelmezik a JavaScript kódokat. vagyis az oldal nem lesz kereshető a Google-lel.return(false). vagy valami más ok miatt kapcsolja ki a JavaScriptet. Egy jó megoldás lehet a következő: <a href="popup. így például a JavaScripttel megoldott navigációt a Google nem fogja figyelembe venni.3.4.3 Az Event objektum Egérrel vagy billentyűvel kiváltott felhasználói események kezelésekor az eseménykezelő függvény egy esemény objektumot kap paraméterként. verzió) összes indexszel hivatkozott űrlap mást fog jelenteni. extrák nélkül. Ha a JavaScript fut a fejlesztő oldalán. 7. Az első megoldás kézenfekvőnek tűnek. esetleg kényelmetlenebbül.html'. de az előző megfontolások miatt nem célravezető: <a href="javascript:window.return(false). akkor ez soha nem fog nehézséget okozni.open). amelyek JavaScript nélkül is működnek."> popup nyitás</a> 50 Nagyon jó cikk a témához: http://weblabor.'popup').

és a következő sort: addEvent(window. nekünk elég felhasználni az ő munkájukat. Még diszkrétebb A diszkrét JavaScript elvével még ennél is tovább mehetünk.'click'. } } } Először is a (később bemutatásra kerülő) getElementsByClass metódus egy tömbbe kigyűjti a popup osztályú elemeket. for(i=0. és hátradőlni a karosszékünkben.event). . :) A HTML kódon nem is látszik.JavaScript 125. classPopupHandler). (Ennek kevésbé szép megoldása lenne a body onload="classPopupHandler" a HTML kódban).i<elems.html-t. A feladatot megoldó JavaScript állomány tartalmaz több függvényt.doPopup). azok pedig külön . Célszerű tehát a JavaScriptet a lehető legjobban elkülöníteni a HTML dokumentumtól. Az addEvent metódus és egy segédmetódusa a fejezet későbbi részében kerülnek bemutatásra. Megjegyzés: Ennek az elvnek megnyilvánulása az a cél.js állomány betöltése mutatja.html-re ugorjon. Az ev esemény objektum elvileg a függvény paramétereként áll rendelkezésre. hogy itt JavaScriptről lenne szó: <a href="popup. de nem szabad elfelejteni. Következzék a tényleges eseménykezelő. mint ahogy a HTML tartalom és a megjelenítés mikéntjét definiáló CSS összekeverése sem az. hogy a megoldás gerincét alkotó elveket és függvényeket már mások kidolgozták. hogy a window objektum load eseményéhez hozzákapcsoljuk a classPopupHandler metódust.7. A ciklusban a megadott href értékkel bíró tagokat szűrjük.i++) { if (elems[i].href!='') { addEvent(elems[i].html" class="popup">popup nyitás</a> Az egész HTML kódban csak a .length. JavaScript nélkül pedig a főablak jeleníti meg a popup. és false visszatérési értékkel megakadályozza. Megjegyzés: a kevésbé diszkrét megoldás ugye pont azt jelentené. hogy a JavaScript kódunk jelentős része függvényekben.href && elems[i]. itt csak az eseménykezelő függvényt minden egyes popup osztályú linkhez kapcsoló classPopupHandler metódus és a tényleges eseménykezelő doPopup metódus következik. és hozzárendeljük a click eseményhez a doPopup metódust. hogy a HTML kód tartalmazza minden helyen az onclick="…" szöveget. A következő verzió ugyan feleslegesen bonyolultnak tűnhet. ami a kattintáskor fog lefutni: function doPopup(ev) { ev || (ev = window. hogy a főoldal a popup. hogy itt JavaScript kód fog futni. oldal Ekkor a JavaScript gondoskodik az előugró ablak megnyitásáról. ezért a window objektumból kell kinyerni. function classPopupHandler() { var elems=getElementsByClass('popup'). Ennek a sornak az a feladata. A JavaScript kód HTML oldalba keverése ugyanúgy nem praktikus.js állományokban legyenek. 'load'. de Internet Explorer alatt ezt nem kapjuk meg.

} Megpróbáljuk kideríteni. verzió) var source. a kódolt címnek az emberi felhasználó számára értelmezhetőnek kell lenni. hogy a weben hol vannak kint levő e-mail címek. hogy a látogató nem biztos. és a találatokat egy központi szerverre gyűjtik. amit a böngészőben futó JavaScript visszaalakít eredeti formájára.kefo.stopPropagation().open(source.6.target. oldal Web programozás (0. fennáll a tévesztés lehetősége.4.'popup'). A tényleges feladat. ev.) 7. } else if (typeof ev. hogy melyik objektum váltotta ki az eseményt. ami szintén diszkrét JavaScriptre épít. de a spam robot nem (hacsak nem foglalkozik karakterfelismeréssel). Az ilyen e-mail gyűjteményeket aztán eladják.href.gusztav#KUKAC#gamf.srcElement. Korábban elterjedt megoldás volt a képek alkalmazása: a képszerkesztővel elkészített email címet a látogató el tudja olvasni.126.preventDefault(). A megoldás lénye.kefo. (Emlékeztetőül: az eredeti a tag href tulajdonsága volt a HTML oldal. és jön a megszámlálhatatlanul sok kéretlen levél. Ebben a környezetben jön jól a következő megoldás. hogy az e-mail címet egy meghatározott algoritmus szerint kódoljuk. az ablak megnyitása.cancelBubble = true.preventDefault) { ev.hu/cikkek/what .gusztav#KUKAC#gamf. window. ev.body. function whatCorrector() { var replaces = 0. if (typeof ev. } else { ev.hu" >nagy. } else { return(true).indexOf('#'+'KUKAC#')!=-1 && replaces<10000) { 51 A témáról részletesebben: http://weblabor.innerHTML. Arra is gondolva. Itt a biztonság ugyan megvan.2 E-mail cím elrejtése51 Nagyon felelőtlen dolog egy e-mail címet kitenni egy weboldalra.target != 'undefined') { source = ev. vagyis a főablak maradjon eredeti állapotában. A HTML kód tehát lehet például: <a href="mailto:nagy. akkor a #KUKAC# karaktersorozatot visszacseréljük a @ karakterre. Webfejlesztőként gondoskodnunk kell tehát az illetéktelen hozzáférés megakadályozásáról.hu</a> Ha a böngészőben fut a JavaScript. } return false. while (document. Másik elterjedt megoldás a szöveges kódolás. hogy engedélyezi a JavaScript alkalmazását.srcElement != 'undefined') { source = ev. if (ev. A többféle próbálkozás itt is a különböző böngészők miatt szükséges. } Végül arról is gondoskodnunk kell. ahol a pont és kukac írásjelek szövegesen jelennek meg.returnValue = false. de kényelmetlen egy ilyen esetben begépelni az e-mail címet. Úgynevezett spam robotok pont azt keresik. hogy az eseményt még egyszer ne kezelje le a böngésző.

hogy a @ karakter nem szerepel a kódban. 'load'. amelyek sokféle feladat esetén alkalmazhatók. amelyek az adott webhely különböző weblapjai közötti navigálás és a webhely későbbi meglátogatásának megkönnyítése érdekében állapotadatokat tárolnak. 7.innerHTML = document. Bár a sütiket szerver oldalról is kezelhetjük. hanem a String.String. A következő HTTP példák segíthetik a megértést. Az indexOf a cserélendő karaktersorozatot kutatja.1 Sütik kezelése A sütik (cookie-k) a HTTP alapú kérésekben és válaszokban megtalálható szöveges karakterláncok. Gyakran használt függvények52 Ebben a fejezetben olyan függvények következnek. http://www.html HTTP/1.dustindiaz.1 HOST: felho. A szerver az első oldal megtekintésekor beállít egy sütit. Egy biztonsági intézkedés az esetleg valami problémai miatt fennálló végtelen ciklus elkerülése érdekében.fromCharCode(64) segítségével állítjuk elő. whatCorrector).7. és a legközelebbi oldalletöltés esetén automatikusan beléptetjük a látogatót. 7. A replace a tényleges cserét végzi. Az első kérés: GET /cikkek. Végül a csere elindítása: addEvent(window. ha ezeket elmentjük. amit a böngésző minden egyes további kéréskor elküld a szervernek. hogy legfeljebb 10. időnként szükségünk lehet a JavaScript alapú megközelítésre is. document.body.com/top-ten-javascript/ . } } replaces++. De maga a session azonosító is sütiben utazik a kliens és szerver között.5.JavaScript 127.body.innerHTML. bár egy továbi trükk. jelszó begépelése) könnyíthetjük meg.5. Egy egyszerű példa: egy adott oldal bejelentkezési procedúráját (név.fromCharCode(64)).000 futtatás engedélyezett.replace( '#'+'KUKAC#'. oldal Az innerHTML hozzáfér a teljes body szöveghez.hu Válasz: 52 Forrás: pl.

Sütik fül.hu Cookie: sessionId=krixkrax A következő ábra a weblabor. Ennek megszerzése ugyanis – hozzáértő kezekben – a szerveren levő „személyiségemmel” kapcsolatos visszaélésekre adnak lehetőséget53.html HTTP/1. charset=iso-8859-2 <html> <head> <title>Cikkek</title> </head> <body> <a href="cikk.hu domainhez kapcsolt sütik közül a session azonosítót (PHPSESSID) mutatja. Megjegyzés: Az ábrán a session azonosító kisatírozva látszik.hu/cikkek/munkamenetkezeles2 . (Firefox. Nézzük meg ezek egyszerűbb verzióit: 53 További információk: http://weblabor. Eszközök/Beállítások menü.6. verzió) HTTP/1. Sütik megtekintése. 25 Apr 2006 13:57:03 GMT Set-Cookie: sessionId=krixkrax Content-Length: 177 Content-Type: text/html. oldal Web programozás (0.12 (Unix) Debian GNU/Linux PHP/6.php?id=2">2.php?id=1">1.0 Last-Modified: Sun.4.x 200 OK Server: Apache/2. Sütik kezelésével kapcsolatban két alapvető feladat szokott felmerülni: a süti elmentése és visszatöltése. cikk</a> </body> </html> Minden további kérés: GET /cikkek. cikk</a> <a href="cikk.1 HOST: felho.0.128.

Ahogy a metódus első sorában látható. var elems = new Array().cookie.value) { document. Sütit kiolvasni hasonlóan egyszerű lesz: function getCookie( name ) { var name = name + "=". Lehetne szűkíteni a keresést. A következő egyszerű verzió csak a keresett osztály nevét várja. A süti lejárata a példában 2028-ban lesz (bejelentkezési információkat például tipikusan 30 percig szokás érvényesnek tekinteni). vagy adott azonosítójú elem leszármazottaiban. Találatok megszámolásához és tárolásához két segédváltozó.split('. és visszaadja az értékét. A visszaadott érték lehet null is.cookie menedzseli a sütiket. Minden tag lekérdezése.substring(name.c. } return null.path=/. például h* a címekben. i++) { var c = cs[i]. 7. function getElementsByClass(name) { var found = 0. A split metódus darabolja fel a sztringet sütikre.2 getElementsByClass A getElementById DOM függvény mintájára hasznos lenne.substring(1. } A sütiket egy adott tartományhoz (domain-hez) és útvonalhoz (path-hoz) rendeljük (ez alapján a böngésző automatikusan tudja elküldeni az adott helyre küldött kérésekkel együtt a hozzá tartozó sütiket is). for (var i=0.indexOf(name) == 0) return c. például csak egy típusú elemekre.getElementsByTagName("*"). var alltags = document. while (c.cookie=name + "=" + escape(value) + ". var cs = document. amiben a . A sütik egyetlen sztringben tárolódnak.length. if (c. stb. A * helyett lehetne csak bizonyos elemekben is keresni.length). A példában ez az a domain.c. oldal function setCookie (name.').7.expires=Thu Feb 10 2028 12:00:00 GMT+0100.charAt(0)==' ') c = c. ezért ezt ki kell szűrni: .length.length). a document.domain segítségével megszerezve).domain=" + document. i<cs. ahonnan az oldal érkezett (document. ha egy adott osztályú elemeket könnyen ki tudnánk gyűjteni.5.domain. választja el őket. valamint a gyökér (/).JavaScript 129. } Megkeresi a cs tömbben szereplő sütik közül a keresettet.

} else { return false. fn).length. verzió) if (alltags) { for (i=0.6.3 addEvent Ez a függvény egy adott böngésző objektum egy adott eseményéhez csatol hozzá egy adott függvényt. } } } return(elems). func(). fn) { if (obj. function addEvent(obj. .className==name) { elems[found++]=alltags[i]. fn.) 7.addEventListener(evType.attachEvent) { var r = obj.130. hogy az új függvényt eseménykezelővé téve mindkettőt futtassa. return r. i < alltags. hogy van-e eseménykezelő rendelve az onload-hoz.5.onload. egyszerű a dolgunk. oldal Web programozás (0.4 addLoadEvent Ez a metódus az előző probléma speciális esetének is tekinthető. evType.5.onload = function() { oldonload().onload != 'function') { window. azért könnyen átlátható. míg a következő megoldás igen. true). melyeket paraméteréül kap. szokás szerint az Internet Explorer jár külön utakon. } else if (obj.onload = func. if (typeof window. Ha nem. } Először is megnézzük. } } } Ellenkező esetben egy új függvénybe kell összefoglalni az eddigi és az új kódot. i++) { if (alltags[i]. return true. (A DOM az addEventListener-t tartalmazza. else { window. } 7. Az előző ugyanis a body tagra nem minden böngésző alatt működik.attachEvent("on"+evType. } } Bár a megoldás böngészőfüggő.addEventListener) { obj. function addLoadEvent(func) { var oldonload = window.

com/ . A JavaScript komoly felhasználását sokáig az is hátráltatta. Egy bekezdés animált összecsukása: 54 55 56 57 58 http://prototype.html http://rrd.conio.6.7.js54 egy nagyon jól használható JavaScript keretrendszer.hu/prototype. prototype. Így a JavaScript fejlesztésére fordított idő nem igazán gazdaságos anyagi oldalról.style. Főbb területek: ● ● ● ● ● animációk drag and drop AJAX vezérlők DOM kiegészítők tesztelés JQuery A JQuery58 animáció. de egyéb környezetekben is vannak nagyon jól használható részei. vagy éppen van jobb megoldás is a használatánál (jellemzően a CSS váltott ki sok korábbi „effektet”. Scriptaculous Effects Library A Scriptaculous57 – nevéhez hűen – vizuális effektusok készítésére alkalmas.0 fejlesztésekhez készült (számos program/rutingyűjtemény épít rá). Gazdag felhasználói élményt nyújtó alkalmazások készíthetők a segítségével. mely főként AJAX/Web 2. osztályainak fejlesztői leírása magyarul is olvasható55. A rendszer függvényeinek. amelyek a programozók számára többé-kevésbé jól dokumentáltak.cc/prototype-mintadarabok-1/ http://script.hide().rajmi. Példaként egy elem (lablec) eltüntetése prototype nélkül.js. és komoly funkcionalitást (más megközelítésben felhasználói élményt) nyújtanak a felhasználónak.1108.net/ http://prototype. például a :hover látszólagos kiválasztóval).aculo. eseménykezelés és AJAX témakörben egészíti ki a JavaScript lehetőségeit.display = 'none'.JavaScript 131. Megjegyzés: A Javascript első néhány évében rengeteg olyan kódot készítettek. hogy a kódot (minden ellenkező irányú törekvés ellenére) viszonylag egyszerűen „el lehet lopni”. ami mai felhasználói szemmel nézve inkább hártáltatja az oldal használatát. Ezen kívül érdemes Radharadhya dasa Prototype mintadarabok56 cikksorozatát is megnézni.us/ http://jquery.hu. Kódtárak Az elmúlt néhány év a JavaScript nagykorúvá válásáról szólt.js A prototype.getElementById('lablec'). Elkészültek olyan nyílt forrású kódtárak. oldal 7. illetve vele: document. $('lablec').

E fejezetben néhány egyszerűbb példán keresztül megvizsgáljuk. Lightbox A Lightbox JS v2.com/yui/ http://mootools. Felhasználói élmény A felhasználói élmény elérése a JavaScript korszerű használatának egyik legfontosabb oka. oldal Web programozás (0. de akár komplett alkalmazások is készíthetők. illetve naptár. drag&drop és eseménykezeléssel kapcsolatos lehetőségeket kínál.firstparagraph:visible") . akár élményszerűvé tenni.8.com/ http://dev. csúszka és faszerű lista komponenseket is közzétesz. hogy az oldalainkon felhasználjuk. DOM manipulációs. érdemes inkább online megtekinteni.hu/index.pixelszabaszat. 59 60 61 62 63 64 http://www. moduláris. Következzen itt egy példa. amely gyors és egyszerű lehetőséget ad látvány-effektusok alkalmazására. A Rövid telepítési útmutató segítségével 10 perc alatt hasonlót varázsolhatunk egy honlapra. 7. ExtJS Az ExtJS59 egy elsőrangú Javascript könyvtár. .yahoo.063 a Prototype Framework és a Scriptaculous Effects Library 64 felhasználásával egy igen látványos. Megjegyzés: Ehhez a témához nincs értelme képet mutatni. milyen módon lehet a felhasználó munkáját könnyebbé.7.aculo. Magyar nyelven Tarsoly András ExtJS Hogyan I. diszkrét JavaScriptet alkalmazó fényképalbumot bocsát a rendelkezésre.net/ http://www. amelyet a szerző előszeretettel alkalmaz.php/2007/04/26/extjs-hogyan-i-alapok/ http://developer.huddletogether. verzió) $("div.132. RSS olvasótól képrendezőig. MooTools A MooTools62 egy olyan platformfüggetlen.contentToChange p.extjs. A rutinkönyvtár animációk. objektumorientált keretrendszer. Yahoo! User Interface Library A Yahoo fejlesztői honlapján61 nagyon sok hasznos kódot bocsájt a rendelkezésünkre. tele olyan komponensekkel.slideUp("slow"). 7. melyek minden fejlesztésben központi szerepet kaphatnak.us/ .Alapok60 cikkét érdemes megkeresni. Alkalmazások Manapság a kódtárakon kívül nagyszerű alkalmazások is várnak arra.6. XMLHTTPRequest.com/projects/lightbox2/ http://script.

szürke színű. Az itt következő példa a szerző honlapjának egy 2006-os változatán a hozzászólás beküldésére szolgáló űrlap lesz.1 Kliens oldali űrlap ellenőrzés Felhasználóként rendkívül kiábrándító tud lenni. Akinek volt már „szerencséje” ilyen oldallal találkozni. Egy űrlap áttekinthető megtervezése. hogy rátalált a weboldalra. az valószínűleg a szerzőhöz hasonlóan azt is megbánta. ha egy komolyabb űrlap kitörlése értelmetlenül felesleges munkát okoz. egy hosszabb űrlap esetén akár többet is. de még jobb a megoldásunk. Rendkívül rontja a felhasználói élményt. Csak akkor válik használhatóvá. Először is érdemes megfigyelni. hogy a felhasználó hibát követ el. . ha a felhasználó minden szükséges mezőt korrekten kitöltött. egy pipa megjelenésével. hogy egyáltalán a hibaüzenetekkel szembesülhessen. ha az adatok elküldése előtt jelezzük a hibákat.7. vagy éppen a háttérszín vagy a szegély zöldre állításával jelezzük az adott elem helyes kitöltését. oldal 7. ha a beviteli elem környékén pl. hogy az összes hibaüzenetet egyszerre (és a beviteli elem környékén) mutatjuk meg. az elküldött adatokban levő első hibát a webalkalmazás hibaüzenettel jelzi. hogy a Küldés gomb induló állapotában nem használható. A jelzésre egy praktikus lehetőség. a magyarázó szövegek pontos megfogalmazása gyakran nehéz feladat. hogy a felhasználóval nem egy kitalálós játékot játszunk. és így a felhasználó akár jó néhányszor kénytelen az adatokat javítani-újraküldeni.8. Egy űrlap esetén az a minimum. hanem a lehető legrészletesebb magyarázatot adjuk a beviteli mezőkhöz: Az ábrán talán nem egyértelműen látszik.JavaScript 133. De még jól megtervezett űrlapok esetén is előfordulhat. ha a hibákat csak hosszas procedúra után lehet kijavítani: pl.

'keypress'. urlapEllenoriz).value. e-mail cím szintaxis-ellenőrzésére.getElementById('hozzaszolaskuld'). ízlés szerint továbbfejleszthető pl.134. addEvent(document. function urlapEllenoriz() { document. Ha a JavaScript nincs engedélyezve.length<1). 'keypress'. oldal Web programozás (0. Ezen kívül minden billentyűfelengedésre beregisztráljuk az urlapEllenoriz függvényt: addEvent(document. de nem lesz kiszolgáltatva a spam robotok számára. minimum 3 betű):</label> <input id="nev" name="nev" type="text" size="20" value="" /> <label for="email"><strong>E-mail cím</strong>:</label> <p>(Az e-mail cím megadása nem kötelező.</p> <input id="email" name="email" type="text" size="20" value="" /> <label for="human">Humán ellenőrzés. hol stb.) 65 http://lekt. A diszkrét működés érdekében a gomb igazából lenyomható.gamf.disabled = (document.getElementById('nev'). nem is látszik közvetlenül a HTML kódban. } 7.getElementById('szoveg'). de az űrlap elküldhető. hogy a JavaScript kód diszkrét.value.length<3) || (document.2 Hosszú listák böngészése helyett A GAMF-on működő BME Nyelvvizsgahely65 honlapján minden nyelvvizsga előtt tájékozódniuk kell a vizsgázóknak. hogy pontosan milyen körülmények között (mikor.hu/BME/ .getElementById('nev'). urlapEllenoriz). urlapEllenoriz).length<10) || (document.value. A következő függvény csak a minimális szöveghosszakat ellenőrzi. a következő JavaScript kód teszi használhatatlanná (disabled): document.getElementById('hozzaszolaskuld'). verzió) HTML kód <h2>Új hozzászólás</h2> <form id="hozzaszolas" action="index. akkor a kényelmi szolgáltatás nélkül ugyan. <strong>Negyvenhét</strong> számmal:</label> <input id="human" name="human" type="text" size="5" value="" /> <button name="hozzaszolaskuld" id="hozzaszolaskuld" type="submit" value="kuld">Küldés</button> </form> Érdemes megfigyelni.getElementById('human'). minimum 10 betű):</label> <textarea id="szoveg" name="szoveg"></textarea> <label for="nev"><strong>Név</strong> (kötelező.php" method="post"> <label for="szoveg">(kötelező. addEvent(document.8. Megadása esetén megjelenik az oldalon.getElementById('human').disabled = true.6.getElementById('szoveg'). 'keypress'.

egy Excel táblázat).) Néhány hagyományos megoldási lehetőség: ● valamilyen offline médium használata (pl. A Végeredmény működés közben: . (Az ábrán csak az információk töredéke látszik. ami szintén nem túl szép megoldás) ● Az itt következő megoldás az előző megközelítések nehézségeit próbálja kiküszöbölni. ebben történik a szervezési információk előállítása és publikálása is hosszú táblázatos oldal kialakítása.7. Mivel elég sok vizsgázó van. amiben már lehet szövegesen is keresni (nagyon hosszú tartalom esetén a lapozás szükségessé válhat. nem triviális. hogy az információt hogyan is nyújtsuk a vizsgázóknak.JavaScript 135. oldal fog lezajlani a vizsga.

) Egyszerűbb esetekben és kisebb adatmennyiség (néhány kb) esetén tökéletesen megfelel az adatok tömbben való tárolása. hogy a számára fontos információk jelenjenek meg az oldalon (időpont.) Második lépésként egyetlen kattintás elegendő. (Példánkon a Kov begépelése látszik.6. hogy a vizsgázóknak lesz egyáltalán írásbeli vizsgája."> Az űrlap tényleges adatküldést nem fog megvalósítani. <form method="get" action="#" onSubmit="return false. Az űrlap felépítése A megoldás logikája röviden az.136. ami a találati lista megjelenítéséért felelős. Szükséges még bemutatni." gondoskodik."> </select> </form> A listára kattintáskor a valaszt() fut le. <label accesskey="n"> Név:<br /> <input type="text" id="nev" name="nev" value="" onKeyUp="gepel(). hogy a név minden egyes karakterének leütése után automatikusan meghívódik a gepel() függvény. mi itt csak a JavaScript változó használatát vizsgáljuk meg. helyszín stb. hogy honnan fogja venni a kódunk a megjelenítendő adatokat."></input> </label><br /> Minden karakter felengedésre (onKeyUp) meghívódik a gepel() függvény. verzió) A vizsgázónak elegendő a neve 1-3 betűs részét beírnia ahhoz. amelyikből már könnyedén ki tudja választani a saját nevét. A névlistán való kattintás esetén a valaszt() függvény gondoskodik a keresett adatok megjelenítéséről. Több megközelítés is szóba jöhet. hogy hol is fognak megjelenni a keresett adatok. oldal Web programozás (0.). Megjegyzés: a következő kódrészletek nem a forráskódban előforduló sorrendben. Másrészt érdemes megfigyelni a (most még) üres span elemeket: itt fognak megjelenni a keresett adatok. Adatok tárolása Mielőtt a gepel() függvényt megvizsgálnánk. hogy a sok név közül csak azt a néhányat lássa. át kell gondolnunk. Erről az onSubmit="return false. hanem a végrehajtás sorrendjében kerülnek bemutatásra. Jelen megoldás ezt az egyszerű módszert alkalmazza: . hiszen nem biztos. <select size="10" id="lista" name="lista" onChange="valaszt(). (További megoldási lehetőségek az AJAX fejezet alapján kitalálhatók. Például az írásbeli vizsga adatai: <div id="irasbeli" style="display: none"> <h2>Írásbeli vizsga</h2> <p>Időpont: <span id="iido"></span><br /> Hely: <span id="ihely"></span></p> </div> Alapértelmezetten a doboz nem jelenik meg (display: none).

"8:45"..">' + str + '</select>' } else { lista. Ha nem üres a név mező."n".indexOf(nev.outerHTML = '<select size="10" id="lista" name="lista"' .display = 'none' var irasbeli = document."B". var str = '' Az str változóban fogjuk felépíteni a névsort."1"."". hogy a fenti eredményt kapjuk.' onChange="valaszt()."8")."".value) != -1) { str += '<option value="o' + i + '">' + vnev + '<' + '/option>\n' } } Ha üres a név mező. hogy PHP-vel az adatbázisból származó adatokat JavaScript tömbbé írjuk ki. akkor jó nevet találtunk: if (vnev. oldal Megjegyzés: Jelen fejezetben azzal nem foglalkozunk."C".7.length.getElementById('lista') Kinyerjük a név begépelésére és a névlista megjelenítésére szolgáló objektumot."a".style. így nincs annak sem akadálya. new Array("Bera Berta". ."7".getElementById('szobeli') szobeli.display = 'none' } Végül egy „technikai” érdekesség: Az Internet Explorer hibásan működik. Még egyszerűbb esetekben a tömb „kézi” módszerekkel is előállítható. hogy ezt a tömböt hogyan is állítsuk elő. hogy szerver oldalon nem csak HTML. .. A gepel függvény A gepel() függvény néhány fontosabb részlete: function gepel(){ var nev = document."k".getElementById('irasbeli') irasbeli.JavaScript var vizsgazok = new Array( new Array("Antal Alma". hanem akár JavaScript kódot is generálhatunk."". Ha az aktuális név tartalmazza a minta szöveget (nev.value.style. ) 137. ha az innerHTML adattagot select elemre használjuk. i<vizsgazok. listát generálunk: if (nev. meg kell azonban említeni. i++) { var vnev = vizsgazok[i][0]."a".value).getElementById('nev') var lista = document.outerHTML) { lista." "). Mint lehetőség. Ezért – a nem szabványos – outerHTML-t kell alkalmaznunk helyette: if (lista.innerHTML = str } A valaszt függvény Az előző függvény alapján sok részfeladat már könnyen elkészíthető. törölni kell mindent: } else { var szobeli = document.length>0) { for (i=0.

onclick="javascript:" A JavaScript kódot a lehető legkevésbé keverjük a HTML tartalommal. 66 http://weblabor. Elavult technikák A JavaScript számos hasznos nyelvi lehetőséggel támogatja munkánkat. Jobb esetben valami szerényebb helyettesítő tartalom definiálására alkalmazták. document. href="javascript: ". A korszerű megközelítés a diszkrét JavaScript kapcsán már kifejtésre került. hogy az oldal nem fog menni JavaScript nélkül.hu/we05-1 7. verzió) var nev = lista. hogy a látogató tudomást szerezzen arról. noscript Ezt a HTML tagot korábban döntően arra használták. i++) { if (vizsgazok[i][0] == nev) { break } } Megjegyzés: A példán jól látszik. például getElementById vagy getElementsByTagName a tartalom keresésére valamint createElement és createTextNode a tartalom beszúrására. Megjegyzés: Ezeket a technikákat nagyon jól demonstrálja a Dinamikus betűméret választó66 cikk is. onmouseover="…" A CSS :hover kiválasztója segítségével szebb megoldást kaphatunk.hu/cikkek/betumeretvalaszto .internet-marketing. de a DOM filozófiája sokkal jobb alternatívákat ad. A függvény további része a talált adatok megfelelő beillesztésére szolgál.6. amit érdemes elkerülni. és helyette korszerűbbet alkalmazni. i<vizsgazok.length.138.write A HTML oldalt csupán szövegként tekintve logikus e metódus alkalmazása. hogy a tömb melyik indexén találhatóak a keresett adatok: for (i=0.options[lista. oldal A kiválasztott név kinyerése: Web programozás (0.9.selectedIndex]. de sok elemét elavultnak tekinthetjük. További források ● Web Essentials 2005 – Internetes világkonferencia Sydney-ben http://www. Pozitív megoldásokra itt is láttunk példákat.text Megkeressük. hogy a kód csak egyedi nevek esetén működik hibátlanul. Néhány lehetőség következik.

Egyedül a leírások részletessége miatt érdemes megemlíteni a HTMLInfo anyagait (ahogy az URL-en is látszik.htm Szabó Attila: Hard Core JavaScript http://javascript. oldal 7.JavaScript 139. A ma elérhető források jelentős része a ’90-es évek végén készült.hu/js13ref/contents.hu/js13guide/contents.eu .w3net.htm Kliensoldali JavaScript Referencia http://htmlinfo. mára nagyon elavult szemléletet közvetít.polyhistor.polyhistor.7.3-as verzió idején készült): • • • Kliensoldali JavaScript Útmutató http://htmlinfo. További források Nem egyszerű magyar nyelven jó forrást ajánlani. az 1.10.

Megjegyzés: Ezen a ponton érdemes kiemelni. A webfejlesztők régóta kísérleteznek azzal. AJAX-szal azonban a weboldalak úgy küldhetnek és fogadhatnak adatokat a kiszolgálónak. Miután az feldolgozta az adatokat. ahelyett. Az AJAX egy technológia. hogy az oldal a háttérben küld egy HTTP kérést a kiszolgáló felé. AJAX kommunikáció A hagyományos webalkalmazások a felhasználó által bevitt adatokat egy űrlap formájában küldik el a kiszolgálónak. ez inkább csak egy „mellékhatásként” jelentkezik. Mivel minden felhasználói adatbevitel után a kiszolgáló új oldalt küld. Tévedés tehát azt hinni. A látogató regisztrálni szeretne. Habár bármilyen formátumot használhatunk az adatok küldésére/fogadására (akár egyszerű szöveget is). majd JavaScript segítségével csak a weboldal egy részét módosítjuk.org/ . hogy az AJAX alkalmazás az oldal letöltődése után további kéréseket küld a szerver felé a HTTP protokollon keresztül. 67 68 http://www.adaptivepath. Lényege. hogy a szintaxis ellenőrzést elvégezhetjük (például a minimum hosszúság megvan-e. verzió) 8.) AJAX szerver nem létezik. Nézzünk meg egy nagyon egyszerű helyzetet. és csak megengedett karaktereket adott-e meg).json.6. oldal Web programozás (0. (Bár a JSON68 népszerűsége is egyre növekszik. Az AJAX segítségével könnyedén lehet ilyen „gazdag” alkalmazásokat készíteni. Míg a hagyományos navigáció esetén az egész oldal minden esetben újratöltődik. A felhasználók számára jobb. ezek az alkalmazások általában lassúak és kevésbé felhasználóbarátok. hogy nem szükséges az egész oldalt újra letölteni. ha megérkezik a válasz. és ezért felhasználói nevet választ magának. gyorsabb és barátságosabb webes alkalmazások hozhatók létre a segítségével. hogy nem az adatmennyiség csökkentése az AJAX célja. legelterjedtebb az XML használata. AJAX Jesse James Garrett 2005 elején publikált cikkében67 alkalmazta először az AJAX kifejezést. Az azóta eltelt időben nem volt más. rugalmasan használható webes felületeket készíteni. A kérések küldése és fogadása a JavaScript felhasználásával és aszinkron módon történik. egy teljesen új oldalt küld vissza a böngészőnek. Az AJAX nem egy új nyelv. hanem a létező szabványok (bizonyos értelemben) újszerű alkalmazása.com/publications/essays/archives/000385. Az AJAX az Asynchronous JavaScript And XML kifejezés rövidítéseként jött létre. ami a böngészőn fut.140. az AJAX alkalmazásával az adatcsere a minimumra csökkenthető. Ez úgy lehetséges. Hagyományos JavaScript módszerrel itt annyi kényelmi szolgáltatást adhatunk.php http://www. vagy pedig AJAX segítségével akár azonnal jelezhető. amennyire szükség van. hogy az egész oldalt töltenénk le újra. ami ennyire felpezsdítette volna a webes szakmai közösséget. csak az űrlap elküldése után. hogy a régi keretes oldalak helyett az AJAX oldja meg a menük újratöltésének problémakörét. Azt azonban. hogyan lehetne az asztali alkalmazásokhoz hasonló. Aszinkron adatkapcsolat segítségével a kiszolgálótól éppen annyi információt kér. hogy a név már foglalt.

Egy ilyen helyzetben pont az az AJAX megoldás előnye. Bevezető példa A következő példa azt mutatja be.true) xmlHttp. akkor nincs javaslat (innerHTML=""). Itt egyenlőre annyi lényeges.url.length==0){ document.onreadystatechange=stateChanged xmlHttp. a lényegi kód a függvény végén található: function showHint(str) { if (str. és ehhez kell alkalmazkodni a kérés kliens . (Például az „A” begépelésére megjelenik az összes „A” betűvel kezdődő név.value)"> </form> <p>Javaslat: <span id="txtHint"></span></p> showHint Minden egyes billentyűleütés (pontosabban felengedés: onkeyup) esetén lefut a showHint JavaScript függvény. hogyan tud egy weboldal kommunikálni a szerverrel az oldal teljes újratöltése nélkül. akkor az URL összeállítása következik. A függvény néhány kötelező ellenőrzéssel kezd. hogy a megszólításra kerülő gethint. oldal 8.php a paraméterek alapján tud arról. hogy itt mi a kérés: az „A” betű begépelése esetén az url a következő lesz: gethint. akkor a lényeg veszne el. amelyik egy név begépelését teszi lehetővé. Érdemes megfigyelni az átadott paramétert: a this.value az aktuális input elem (this) begépelt értékét (value).open("GET". (Mivel ez a lépés böngészőfüggő.length==0). Következő lépés az AJAX működés lelkét adó (példánkban xmlHttp) objektum létrehozása.AJAX 141.) <form> Keresztnév: <input type="text" id="txt1" onkeyup="showHint(this.send(null) } Ha a beviteli mező üres (str. Nézzünk egy egyszerű szöveges beviteli mezőt.innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="gethint.php?q=A Természetesen itt a tényleges kódolás előtt az összes lehetséges helyzet alapján rögzíteni kell valamilyen paraméterátadási módszert.php" url=url+"?q="+str xmlHttp. HTML A kezdetben üres javaslatlista a txtHint span mezőbe fog kerülni.1.) Ha létrejött a kommunikációs objektum. az éppen begépelt szövegnek megfelelően. Megjegyzés: ha ilyenkor a teljes listát kiadná.8. hanem minden esetben csak egy jóval szűkebb találati listát. később részletesen visszatérünk erre.getElementById("txtHint"). hogy nem kell előre letölteni a több ezer választási lehetőséget egy select tagba.

stateChanged function stateChanged() { if (xmlHttp.open függvény a kérést írja le: GET metódussal szeretnénk a kérést küldeni az url számára. hogy a visszaérkező választ feldolgozza.innerHTML= xmlHttp. hogy itt nem XML válasz érkezik a szervertől.readyState==4 || xmlHttp.getElementById("txtHint"). A böngészők AJAX támogatása Az XMLHttpRequest objektum nélkül nincs AJAX. hogy a szerver oldalon a q paraméter értéke alapján kell a javaslatokat összeállítani. hogy a szerver felé küldött kérésre a JavaScript nem várja (nem is várhatja) meg a választ. oldal Web programozás (0. a következőhöz hasonló lekérdezésre lesz szükség: SELECT nev FROM nevek WHERE nev like "A%" Az utolsó három sor kicsit több magyarázatot igényel.6.send függvény végzi a kérés tényleges elküldését. Egyszerűbb esetekben ez tökéletes megoldás lehet. ez a példa az alapok rövid áttekintését tűzi ki célul. Másként fogalmazva: a stateChanged függvényt kell képessé tennünk arra. 8. és nem a teljes és komplex megoldást. Megjegyzés: Aszinkronitás nélkül a böngésző lemerevedne a válasz megérkezéséig. Végül az xmlHttp. Ahogy eddig is látszott. hogy a stateChanged függvény kapja meg a vezérlést. Megjegyzés: Itt még nem témánk a szerver oldal tárgyalása. Ez (különösen lassabb hálózati kapcsolat esetén) nem a felhasználói élményt növelné. akkor a JavaScript kódunk erről úgy fog értesülni.readyState=="complete"){ document.142. Amikor a szervertől viszszaérkezik a válasz. Az AJAX aszinkron működése azt jelenti. hogy például egy adatbázis táblában tárolt nevek esetén egy egyszerű. hanem a felhasználót hagyja tovább dolgozni (esetünkben gépelni). a következőhöz hasonló kóddal a probléma jól kézben tartható: 69 http://www. a true paraméter pedig az aszinkronitást írja elő.onreadystatechange=stateChanged sor. Sajnos a böngészők nem teljesen egységesen kezelik az (egyébként szabványban 69 rögzített) XMLHttpRequest objektumot. de könnyen látható.org/TR/XMLHttpRequest/ . Ez azonban nem olyan nagy probléma.) A példában jól látszik. de az esetek túlnyomó többségében elég akkor foglalkozni vele. A válasz esetén is látható. A kommunikációs objektumunk számára tehát egy ún.w3. verzió) oldali összeállításakor és szerver oldali feldolgozásakor is.2. hogy a kliens és szerver közti kommunikációra egy interfészt vagy protokollt dolgozunk ki. callback (visszahívható) függvény nevét adja meg az xmlHttp. amikor a teljes válasz megérkezett (readyState==4). Az xmlHttp. hanem inkább korlátozná a munkát.responseText } } A függvény többször is meghívódik a válasz teljes megérkezéséig. (Ezt úgy is mondhatjuk. hanem szöveges (akár HTML).

4. További források • • • • HTMLInfo: AJAX (http://htmlinfo.XMLHTTP") } return objXMLHttp } 143.gluon. 8.polyhistor. XML. Összetettebb esetekben többnyire XML vagy JSON alapú kommunikáció szükséges.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window. hogy az AJAX használatához a JavaScripten túl az ActiveX engedélyezésére is szükség van Explorer esetén.3.8.html) Szalai Ferenc: AJAX válasz adattípusok: XHTML.AJAX function GetXmlHttpObject(handler) { var objXMLHttp=null if (window.Asynchronous JavaScript and XML (http://pagerank.g-easy. vagy JSON? (http://www.hu/ajax_response) Radharadhya dasa: Ajax alkalmazások építése .lépésről lépésre (http://rrd. oldal A függvény először a Mozilla alapú böngészőkön alkalmazható megoldással kezd.cc/ajax-alkalmazasok-epitese-lepesrol-lepesre/) G-easy: Ajax . A kódból az is következik. 8.hu/blog/2007/10/09/ajax-asynchronous-javascript-and-xml/) ajaxian (http://ajaxian.1108.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft. XML-kommunikáció Az előző példa egyszerű szöveges kommunikációt valósított meg.com/) • . majd Explorerben ActiveX vezérlőt próbál létrehozni.hu/ajax/index.

?> Szokás még használni egy rövidebb jelölést is. A nyelv szintaxisa nagyon hasonlít a C/C++. Sybase. ?> A következő „Hello World” példa jól mutatja. Leggyakrabban az Apache webszerverrel használjuk együtt különböző operációs rendszerek alatt. hogy az éppen aktuális beállítások szerint a . bár a webszerver beállításai akár ettől eltérő megoldásokat is lehetővé tesznek. Ott mindig csak a PHP által előállított HTML kimenet látható. Megjegyzés: A fejezet példaprogramjai – helytakarékossági okokból . A versenytársakkal szemben (mint például az ASP) széles körben alkalmazott és alkalmazható. hogy minden konfiguráció esetén működik: <? . jól alkalmazható dinamikus és interaktív weboldalak elkészítéséhez. verzió) 9.1.1. oldal Web programozás (0. A PHP kód még a szerveren lefut. Java. mielőtt a webszerver a látogató kérését kiszolgálná. Alapok Egy PHP állomány szöveget. de ez nem biztos. A látogató kérésére egyszerű HTML állománnyal válaszol. PHP A PHP (PHP: Hypertext Preprocessor) erőteljes szerver-oldali szkriptnyelv... Ennek többféle módja közül leginkább a következő ajánlható: <?php . Informix.a legtöbb esetben nem teljes vagy nem szabványos HTML oldalakat készítenek.) A PHP nyílt forrású.. ODBC) is.. ?> </body> </html> . (Előfordul pl. 9. A HTML oldalba ágyazott PHP kód kezdetét és végét egyértelműen jelölni kell a PHP értelmező számára. 9.6. hogyan ágyazzuk be a PHP kódot a HTML oldalba: <html> <body> <?php echo "Hello World".1 Szintaxis Figyelem! Egy weboldal PHP forrását nem tudjuk a böngészőnk segítségével megnézni. MySQL. szabadon letölthető és használható.144.html állományokat is értelmezi a PHP motor. Futása során kommunikálhat adatbázis-szerverrel (pl. HTML tagokat és PHP kódokat (szkripteket) tartalmazhat.. Javascript vagy Perl nyelvekhez. PostgreSQL. A PHP használata esetén a PHP kódot közvetlenül a HTML kódba ágyazhatjuk be. A PHP állomány szokás szerint . szabad és hatékony alternatíva. Oracle.php kiterjesztésű.

Ehhez az érték kiírására szolgáló szintaxis használható: <?= kifejezés ?> A kifejezés kiértékelődik. általában nem javasolt. „fogyasztja” a sávszélességet. sablonrendszerekről szóló fejezet példái elsősorban a következő példához hasonlóan. és értéke a tag helyére kerül beszúrásra. A HTML megjegyzés a kliens gépén is megjelenik. Egy példa a szerző korábbi honlapjáról: <? /* Az előzetes megjelenítésére.-vel kell végződnie.PHP 145. hanem fordítva: a fix HTML szövegbe szúrjuk be a PHP kifejezéseket (elsősorban változók beszúrásához szükséges utasításokat). hogy a HTML állományba kimenetet szúrjunk be: echo és print. az ilyen megjegyzéseket a PHP nem továbbítja a kimenetre. print és echo nélkül kezelik a kimenetet: <acronym class="datum" title="<?= $datum['hosszu'] ?>"> <span class="honap"><?= $datum['honap'] ?></span> <span class="nap"><?= $datum['nap'] ?></span> </acronym> A példa lényege. Ezzel szemben a PHP megjegyzések nem kerülnek el a klienshez.9. Sablonszerű megközelítés A későbbi. Megjegyzések A PHP kódban egysoros (sorvégi) és többsoros megjegyzéseket is használhatunk: <html> <body> <?php //This is a comment /* This is a comment block */ ?> </body> </html> Nem szabad összekeverni a HTML és a PHP megjegyzések szerepét. (Kivétel: a PHP záró tag előtt elhagyható. hogy nem a PHP-be illesztjük a HTML-t készítő függvénysorokat. oldal Majdnem minden PHP utasításnak . de az olvashatóság kedvéért nem illik keverni a kettőt egy kódon belül.) Két egyszerű lehetőségünk van arra. a hozzászólások számával */?> <div class="hir"> <? if ($lehethozza || $tartalom) { ?> <h2><a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>"> <?= $hirCim ?></a></h2> <? } else { ?> <h2><?= $hirCim ?></h2> <? }?> . A két függvény közül szabadon választhatunk.

számokat és tömböket tartalmazhatnak. csupán az operátorokat tartalmazó kifejezések eredményéről van szó. A fejezetben egy gyors összefoglaló következik az operátorokról. verzió) 9. de nem kezdődhetnek számmal.3 Operátorok Az operátorok műveleteket végeznek az operandusaikkal. A nevek szóközt nem tartalmazhatnak. echo $txt. (pont) operátor használható: <html> <body> <?php $txt1="Hello World". mivel itt nem komplett kódrészletekről. akkor a . . 9. számokból és az aláhúzás (_) karakterből állhatnak. $txt2="1234". így az összetett változónevek esetén az aláhúzás karaktert ($my_string) . A változók alapvetően szövegeket. oldal Web programozás (0.1. " " . vagy a közbülső szó nagy kezdőbetűjét ($myString) alkalmazzuk.146. echo $txt1 .6.2 Változók A PHP nyelvben minden változó neve $ karakterrel kezdődik. ?> </body> </html> Ha két vagy több szöveges kifejezést össze akarunk fűzni. A következő példa a $txt változót használja a kiírandó szöveg tárolására: <html> <body> <?php $txt="Hello World". ?> </body> </html> A programunk a következő kimenetet állítja elő: Hello World 1234 Változónevek A változónevek az ABC betűiből.1. $txt2 . Aritmetikai operátorok Megjegyzés: A táblázat példái nem tartalmaznak .-t.

oldal Eredmény 4 - Kivonás 3 * Szorzás 20 / Osztás 3 2.9. Értékadó operátorok Operátor = += -= *= /= %= Példa $x=$y $x+=$y $x-=$y $x*=$y $x/=$y $x%=$y Jelentés $x=$y $x=$x+$y $x=$x-$y $x=$x*$y $x=$x/$y $x=$x%$y . tehát soha nem maradékos osztás történik.5 1 2 0 $x=6 % Maradékos osztás maradéka ++ Növelés -- Csökkentés $x=4 Figyelem! Az osztás eredménye mindig valós.PHP Operátor + Művelet Összeadás Példa $x=2 $x+2 $x=2 5-$x $x=4 $x*5 15/5 5/2 5%2 10%8 10%2 $x=5 $x++ $x=5 $x-- 147.

hogy különféle lehetőségekhez más-más viselkedést rendeljünk. oldal Web programozás (0. verzió) Összehasonlító operátorok Operátor == != > < >= <= === Művelet egyenlő nem egyenlő nagyobb kisebb nagyobb-egyenlő kisebb-egyenlő típus és érték egyenlő Példa 5==8 5!=8 5>8 5<8 5>=8 5<=8 ”5”===5 Eredmény false true false true false True false Logikai operátorok Operátor && Művelet és $x=6 $y=3 ($x < 10 && $y > 1) || vagy $x=6 $y=3 ($x==5 || $y==5) ! nem $x=6 $y=3 !($x==$y) true false Példa Eredmény true 9.4 Elágazások Az if. . elseif és else kulcsszavak használatosak a PHP-ben feltételhez kötött utasítások végrehajtására.1.148.6. Ennek megoldására használhatjuk a feltételes kifejezéseket. Feltételes kifejezések Sok esetben merül fel egy-egy programozási feladat kapcsán annak szükségessége.

az elseif szerkezetet használjuk. if ($d=="Fri") echo "Have a nice weekend!". ha a feltétel nem teljesül.else szerkezet Egy feltétel teljesülése esetén futtat egy kódrészletet. akkor egy másikat. Az if. A következő példa kimenete a Have a nice weekend! szöveg lesz.9. else végrehajtandó kód. ha azt szeretnénk. ha a feltétel teljesül. oldal if-else . hogy egy adott kódrészlet akkor fusson. } ?> </body> </html> Az elseif szerkezet Ha több feltételből egy teljesülés esetén szeretnénk adott kódot futtatni. a sorokat kapcsos zárójelek közé kell írnunk: <html> <body> <?php $d=date("D"). hamis volta esetén egy másik kódot szeretnénk futtatni. ha a feltétel teljesül. ha a feltétel teljesül.Akkor használjuk. ?> </body> </html> Ha egy sornyinál több kódot szeretnénk futtatni a feltétel teljesülése/nem teljesülése mellet. elseif (feltétel) végrehajtandó kód.. echo "Have a nice weekend!". amennyiben a feltétel nem teljesül. . ha a feltétel nem teljesül. else echo "Have a nice day!".. echo "See you on Monday!". ha épp péntek van. if ($d=="Fri") { echo "Hello!<br />".Az if…else kifejezéssel együtt használjuk. egyébként pedig a Have a nice day!: <html> <body> <?php $d=date("D").PHP 149. elseif . else végrehajtandó kód. Szintaxis: if (feltétel) végrehajtandó kód. ha több feltétel közül csak egy teljesül. Szintaxis: if (feltétel) végrehajtandó kód. ha a feltétel igaz volta esetén egy adott kódot.

egyébként pedig Have a nice day!: <html> <body> <?php $d=date("D").else blokkok. amelyek egy case utasításban sem voltak kezelve Egy példa: . if ($d=="Fri") echo "Have a nice weekend!". értékeket is.. hogyha más-más kódot szeretnénk végrehajtani különböző feltételek alapján.6. hogy le tudjuk kezelni azokat a kifejezéseket. break. verzió) Az alábbi példa kimenete Have a nice weekend! ha ma péntek van. break..elseif. } Működése: • • • • • Egy egyszerű kifejezés (leggyakrabban egy változó) egyszer kiértékelődik A kifejezés értéke összehasonlításra kerül mindegyik case kifejezéssel a blokkon belül Ha egyezést talál. a break utasítás leállítja az utasítások végrehajtását A default utasítás arra használható.5 A switch szerkezet A switch utasítást a PHP-ben akkor használjuk. case cimke2: a végrehajtandó kód. Have a nice Sunday! ha ma vasárnap van. ha a kifejezés = cimke1. akkor az adott case-ben található kód végrehajtódik Miután ez megtörtént.1. elseif ($d=="Sun") echo "Have a nice Sunday!". A switch használatával bizonyos esetekben elkerülhetőek a hosszú if. ha a kifejezés = cimke2. ?> </body> </html> 9. oldal Web programozás (0. else echo "Have a nice day!". default: a végrehajtandó kód ha a kifejezés különbözik cimke1 és cimke2-től. A switch utasítás általános formája: switch (kifejezés) { case cimke1: a végrehajtandó kód.150.

"Joe"). 151. hogy konstansok legyenek. $names[1] = "Quagmire". A tömb minden elemének egyedi azonosítója van. default: echo "No number between 1 and 3".1. break. A tömböknek három70 különböző típusa van: ● Numerikus tömb – Olyan tömb. melyben minden azonosítókulcshoz egy érték társul Többdimenziós tömb – Olyan tömb. akkor előbb vagy utóbb valószínűleg szeretnénk több hasonló változót létrehozni.9. . Több változó használata helyett az adatot tömb elemeiként is tárolhatjuk.PHP <html> <body> <?php switch ($x) { case 1: echo "Number 1". case 2: echo "Number 2". 70 Hamarosan pontosítani fogjuk: igazából egyféle tömb van. } ?> </body> </html> Megjegyzés: Más nyelvektől eltérően a case értékei nem kell. Ebben a példában azonosítókulcsot manuálisan rendelünk hozzá: $names[0] = "Peter". amelynek egyedi numerikus azonosítókulcsa van Asszociatív tömb – Olyan tömb. Ebben a példában az azonosítókulcsok (indexek) automatikusan kerülnek hozzárendelésre az elemekhez: $names = array("Peter". mely egy vagy több tömböt tartalmaz ● ● Numerikus tömbök A numerikus tömb minden eleméhez egy numerikus azonosítókulcsot tárol. de háromféle tipikus felhasználás szokott előfordulni. oldal 9. case 3: echo "Number 3". $names[2] = "Joe". A numerikus tömb létrehozásának több módja van."Quagmire". break.6 Tömbök A tömb egy vagy több értéket tárolhat egyetlen változónévvel. break. így könnyen hozzáférhető. Ha PHP-vel dolgozunk.

"'s neighbors".". Ez a példa az előzővel azonos értékű. "Quagmire"=>30. Az asszociatív tömb értékeit kulcsként használhatjuk. $ages['Peter'] . $ages['Joe'] = "34". Megjegyzés: Bizonyos értelemben pontosabb lenne úgy fogalmazni. Többdimenziós tömbök Egy többdimenziós tömbben a fő tömb minden eleme lehet maga is egy tömb. $names[2] . Ha elhagyjuk. Megjegyzés: ahogy az eddigiek alapján sejthető. Asszociatív tömbök Az asszociatív tömb minden azonosítókulcsához egy értéket rendelünk hozzá. oldal Az azonosítókulcsokat felhasználhatjuk szkriptekben: <?php $names[0] = "Peter".152. s értékeket rendelhetünk a kulcsokhoz. és mellesleg a kulcs lehet szám is. " and " . $ages['Joe'] = "34". . $names[0] . akkor a legnagyobb használt index után folytatja a számozást. Az előző kód kimenete: Peter is 32 years old. hogy különböző személyekhez életkorokat rendeljünk: $ages = array("Peter"=>32. verzió) Az előző kódrészlet kimenete: Quagmire and Joe are Peter's neighbors Tömbök feltöltésekor az index megadása sem kötelező. Az azonosítókulcsot így használhatjuk szkriptben: $ages['Peter'] = "32". $ages['Quagmire'] = "30". de a tömb létrehozásának más módját mutatja: $ages['Peter'] = "32". és így tovább. "Joe"=>34). $names[1] = "Quagmire". echo "Peter is " . $ages['Quagmire'] = "30". " years old. Ebben a példában tömböt használunk. Az altömb minden eleme lehet szintén tömb. nem feltétlenül a numerikus tömb a legjobb megoldás erre.6. hogy a PHP csak az asszociatív tömböket ismeri. ?> Web programozás (0. Ha egyedi értékeket szeretnénk tárolni. echo $names[1] . Az előző példát folytatva a 3-as index alá kerül Jack: $names[] = "Jack". " are ". $names[2] = "Joe". az index-számok nem csak folytonosak lehetnek.

"Brown"=>array ( "Cleveland". 'tipus' => 'statikus' ) // .PHP 153.. 'magamrol' => array( 'cim' => 'Magamról'. oldal Ebben a példában olyan többdimenziós tömböt hozunk létre. [Brown] => Array ( [0] => Cleveland [1] => Loretta [2] => Junior ) ) A szerző oldalának 2006-os verziójában a honlap szerkezete a következő tömb alapján generálódik: $oldalak = array ( 'Személyes' => array( 'elerhet' => array( 'cim' => 'Elérhetőségek'. "Megan" ). [Quagmire] => Array ( [0] => Glenn ). ). melynek azonosítókulcsai automatikus hozzárendeléssel rendelkeznek: $families = array ( "Griffin"=>array ( "Peter". . "Lois". "Loretta". "Quagmire"=>array ( "Glenn" ). 'tipus' => 'statikus' )..9. A fenti tömb így nézne ki a kimenetre írva (print_r($families)): Array ( [Griffin] => Array ( [0] => Peter [1] => Lois ). "Junior" ) ).

amíg egy adott feltétel igaz. Szintaxis: while (feltétel) ciklusmag Az alábbi példa egy olyan ciklust mutat be.154. ). ). hogy egy adott programrészt többször szeretnénk lefuttatni. mint 5. // .while – egyszer lefuttatja az adott programrészt és megismétli a ciklust ha a feltétel igaz..while utasítás legalább egyszer lefuttat egy adott programrészt. mely addig fut. Mikor programozunk. amíg egy adott feltétel igaz for – az adott programrészt meghatározott számban futtatja le foreach – az adott programrészt a tömb minden elemére lefuttatja ● ● ● A while utasítás A while utasítás lefuttat egy programrészt ha és amíg egy adott feltétel igaz.. amíg az i változó kisebb vagy egyenlő. oldal Web programozás (0.6. } ?> </body> </html> A do…while ciklus A do.7 Ciklusok A ciklusokat a PHP-ben ugyanazon programrész adott számú futtatására használjuk.1. ). Ezt elérhetjük ciklusok használatával. nagyon gyakran fordul elő.. Az i értéke a ciklus minden lefutása után 1-el növekszik: <html> <body> <?php $i=1.. majd annyiszor ismétli azt. "<br />". 'tipus' => 'blog'. 'felirat' => 'Tantárgyi információk'. verzió) 'Oktatás' => array( 'java' => array( 'cim' => 'Java programozás'... 9. PHP-ben a következő ciklusok használhatók: ● while – lefuttat egy programrészt. Szintaxis: .. ha a feltétel igaz. $i++. $i . és addig.. és addig amíg az adott feltétel igaz do. // . while($i<=5) { echo "The number is " .

Ha több mint egy változó is szerepel az értékadásban vagy az inkrementáló részben. amely a képernyőre írja az adott tömb értékeit. 155. majd addig növeli it. ?> </body> </html> A for utasítás A for utasítást akkor használjuk. vesszővel válasszuk el őket. do { $i++. A $value minden ciklusban az adott tömbelem értékét kapja meg. echo "The number is " . <html> <body> <?php_ $i=0. A következő példa azt a ciklust mutatja be. $i . hányszor kell futtatni egy adott utasítást vagy utasítás listát. $i++) { echo "Hello World!<br />". } while ($i<5). } while (feltétel). } ?> </body> </html> A foreach utasítás A foreach utasítást tömbelemekre alkalmazzuk. "<br />". . és a tömb mutató egygyel továbblép – így a következő ciklusban már a következő tömbelemre mutat. Az első ad értéket a változóknak. amikor előre tudjuk. a második tartalmazza a feltételt és a harmadikban van az inkrementáló utasítás. ami a ciklust vezérli. condition. oldal Az alábbi példaprogram legalább egyszer növeli az i változó értékét. amíg annak értéke kisebb. Szintaxis: foreach ($array as $value) { ciklusmag } Megjegyzés: A $value értéke alapértelmezetten egy másolata a tömb elemének.PHP do { code to be executed. $i<=5. } Megjegyzés: A for utasításnak három paramétere van. Az alábbi példa ötször írja a képernyőre a Hello World! szöveget: <html> <body> <?php for ($i=1. mint 5.9. Szintaxis: for (initialization. increment) { code to be executed. A feltétel igaznak vagy hamisnak bizonyul a futás során.

ha meghívjuk: . Ezen kívül betűvel kezdődjön vagy alsó vonással. amely a nevemet írja ki. $value . végül írjunk egy } jelet.156. "two". amit akkor futtathatunk. milyen feladatot végez el a függvény. verzió) <html> <body> <?php $arr=array("one". hogy utaljon rá. amikor csak akarjuk. de ne számmal. Minden függvény így kezdődik: function() A függvény nevét lehetőleg úgy válasszuk meg. } ?></body> </html> Bizonyos esetekben szükségünk lehet nemcsak a tömb elemeire. Aztán megírjuk a függvény kódját. A PHP-ben közel ezer beépített függvény érhető el. Aztán írjunk egy { jelet. Ekkor a következő szintaxis alkalmazható: foreach (tömb as kulcs =>tömbelem) { ciklusmag } A szerző oldalán a korábban bemutatott kétdimenziós tömb alapján a következő kód generálja a főmenüt: <? foreach ($fomenu as $cim => $menublokk) { ?> <h2><?= $cim ?></h2> <ul> <? foreach ($menublokk as $azon => $menupont) { ?> <? if ($aktualisFomenu == $azon) { ?> <li><?= $menupont['cim'] ?></li> <? } else { ?> <li><a <? if ($menupont['felirat']) { ?>title="<?= $menupont['felirat'] ?>" <? } ?> href="<?= $index ?>?<?= $azon ?>"><?= $menupont['cim'] ?></a></li> <? } ?> <? } ?> </ul> <? } ?> </div> 9. "three"). A függvény kód a nyitó kapcsos zárójel után kezdődik. Ebben a fejezetben megmutatjuk. PHP függvény készítése Egy függvény tulajdonképpen egy kód blokk.8 Függvények A PHP igazi ereje a függvényeiből ered. foreach ($arr as $value) { echo "Value: " . oldal Web programozás (0.1. A függvény kódját mindig egy kapcsos zárójel zárja. hanem a kulcsokra is. "<br />". Példa: Egy egyszerű függvény.6. hogyan készítsünk saját függvényeket.

} echo "Hello world!<br />". ?> </body> </html> 157. ". echo "My name is ". echo ". writeMyName().". (angol nyelvű példa lévén a keresztnév van előbb. Függvények paraméterezése Első függvényünk (writeMyName) egy igen egyszerű függvény. paramétereket adhatunk hozzá. Pusztán egy egyszerű szöveget ír ki. A paraméter olyan mint egy változó.<br />". Ha szeretnénk több funkcióval ellátni egy függvényt.9. ?> </body> </html> A felső kódnak ez lesz a kimenete: Hello world! My name is Kai Jim Refsnes. } . echo " is my name. A következő példa különböző keresztneveket ír ki azonos vezetéknevek után. } writeMyName().<br />That's right. " Refsnes.PHP <html> <body> <?php function writeMyName() { echo "Kai Jim Refsnes". That's right.) html> <body> <?php function writeMyName($fname) { echo $fname . oldal Egy függvény használata Most az iménti függvényt használjuk egy PHP szkriptben: <html> <body> <?php function writeMyName() { echo "Kai Jim Refsnes". A paramétereket a zárójelen belül adhatjuk meg. writeMyName(). Kai Jim Refsnes is my name.

A következő függvénynek két paramétere van: <html> <body> <?php function writeMyName($fname. echo "My name is ". echo "My name is ".6.158. } echo "My name is ". ?> </body> </html> Web programozás (0. echo "My name is ".. . oldal echo "My name is ". <html> <body> <?php function add($x.$y) { $total = $x + $y. } echo "1 + 16 = " . verzió) A kód kimenete a következő: My name is Kai Jim Refsnes.". return $total..").16) ?> </body> </html> A fenti kód kimenete ez lesz: 1 + 16 = 17 A szerző 2006-os oldalán a következő függvény segítségével kereshetők meg az egy hírhez (blogbejegyzéshez) tartozó hozzászólások: function hozzaszolasok($kod) { $eredmeny = mysql_query ( "SELECT * FROM hozzaszolas WHERE kod='{$kod}' "). Függvények visszatérési értéke A függvények használhatnak visszatérési értékeket is. ?> </body> </html> A kód kimenetet a következő lesz: My name is Kai Jim Refsnes. writeMyName("Kai Jim")."). " Refsnes" . writeMyName("Stale").. writeMyName("Hege")."!"). "<br />". echo "My name is ".. My name is Hege Refsnes. writeMyName("Hege".". add(1. writeMyName("Ståle".$punctuation) { echo $fname . writeMyName("Kai Jim". $punctuation . My name is Hege Refsnes! My name is Ståle Refsnes. My name is Stale Refsnes.

php fájl tartalma a következő: <html> <body> Welcome <?php echo $_POST["name"]. Ha a felhasználó kitölti a szövegmezőket.PHP if ($eredmeny) { $sorok = array(). } else { return 0.<br /> You are <?php echo $_POST["age"]. oldal 9. .php fájlhoz továbbítódnak. } 159. ?> years old.php" method="post"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> A fenti példaoldal két beviteli mezőt és egy továbbító gombot tartalmaz. You are 28 years old. hogy az űrlap adatait az űrlapot is tartalmazó szkript dolgozza fel. ?>.9 Űrlapok és felhasználói adatbevitel A PHP $_GET és $_POST változói használatosak az információ űrlapokból való továbbítására.1. Adatok érvényessége A felhasználó által bevitt adatok érvényességét minden esetben vizsgálni kell. így nincs szükség arra. } return $sorok. hogy az adatokat egy újabb oldalra küldjük. A kliensoldali vizsgálat gyorsabb és csökkenti a szerver terheltségét. Minden HTML oldalon található űrlapelem automatikusan elérhető a PHP szkriptek számára.9. különösen. Ezért az adatok szerver oldali vizsgálata is szükséges. de önmagában sosem elegendő. az űrlap adatai a welcome. A $_GET és $_POST változók használatáról hamarosan több szó esik. Az adatok ellenőrzésére bevett módszer. A welcome. </body> </html> A fenti szkript egy lehetséges kimenete: Welcome John. } mysql_free_result($eredmeny). és a gombra kattint. while ($sor = mysql_fetch_array($eredmeny)) { $sorok[] = $sor. ha az űrlapnak egy adatbázishoz kell hozzáférnie. Példa: <html> <body> <form action="welcome.

a változó hossza nem haladhatja meg a 100 karaktert.6. Tehát ennek a metódusnak a használata nem ajánlott jelszó és egyéb bizalmas információk küldésekor. Az elküldhető információ mennyisége korlátozva van (maximum 100 karakter).com/welcome. ahol az űrlap található. ?>. Megjegyzés: Hasonló okokból szokás űrlapba rejtett (hidden) mezőt elhelyezni. az URL-ben megjelennek az adatok: http://www. .160. A GET-tel mindenki számára látható módon tudunk adatokat küldeni az űrlapból (megjelenik a böngésző címsorában.php" method="get"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> Amikor a felhasználó a submit gombra kattint. A $_REQUEST változó A PHP $_REQUEST tartalmazza a $_GET. oldal Web programozás (0. A $_GET változót arra használjuk. $_GET űrlap nélkül Elsőre talán meglepőnek tűnik. de a $_GET tömb elemei nem csak űrlap kitöltésével jöhetnek létre.w3schools. akkor az összes változó neve és értéke megjelenik az URL-ben.php?name=Peter&age=37 A welcome.<br /> You are <?php echo $_GET["age"]. hogy értékeket gyűjtsünk az űrlapról. $_POST és $_COOKIE változók elemeit. Megjegyzés: Egy komplex megoldás is bemutatásra kerül a későbbiekben.10 A $_GET tömb A $_GET változót arra használjuk. ?> years old! Miért használjuk a $_GET-et? Megjegyzés: Amikor használjuk a $_GET változót. máskor kifejezetten hátrányos lehet.1. Ez sok esetben hasznos. hogy elkapja az űrlap adatait (megjegyezzük. amelyben a HTTP GET metódussal elküldött változók nevei és értékei szerepelnek. hogy az URL eleve tartalmazzon kulcs-érték párokat. ha az űrlap method tulajdonsága get. verzió) Ebben az esetben a felhasználó a hibaüzeneteket ugyanazon az oldalon láthatja. Semmi akadálya annak. Viszont pont emiatt lehetséges könyvjelző elhelyezése. hogy az űrlap mezők nevei automatikusan a $_GET tömb azonosítói lesznek): Welcome <?php echo $_GET["name"].php fájl arra használja a $_GET változót. egész pontosan az URL-ben).php?id=23”>Masik oldal</a> Ebben az esetben űrlap nélkül is lesz tartalma a $_GET tömbnek. Megjegyzés: A HTTP GET metódus nem alkalmas nagy méretű változók értékeinek küldésére. Példa: <form action="welcome. hogy értékeket gyűjtsünk az űrlapról a GET metódussal. például a link eleve ilyen volt: <a href=”index. A $_GET egy tömb. 9. így megkönnyítve a hiba felfedezését és kijavítását. A kitöltött adatokkal együtt ezek az adatok is el fognak jutni a $_GET tömbbe.

9.PHP

161. oldal

Arra használjuk, hogy megkapja a GET és POST metódussal történt adatküldés eredményét. Példa:
Welcome <?php echo $_REQUEST["name"]; ?>.<br /> You are <?php echo $_REQUEST["age"]; ?> years old!
Megjegyzés: Biztonsági okokból a $_REQUEST használata általában kerülendő. Meg kell ugyanis győződnünk arról, hogy a fontos adatok tényleg onnan érkeztek-e, ahonnan mi várjuk, és nem valahonnan máshonnan.

9.1.11

A $_POST tömb

A $_POST változó értékeket gyűjt össze azokból az űrlapokból, melyek POST metódust használnak. A $_POST változó neveket és értékeket tartalmazó tömb, melyek a HTTP POST metódussal lettek továbbítva. Az az információ, melyet egy űrlapról küldenek POST metódussal, láthatatlan a többi felhasználó részére, és nincs korlátozva az információ mennyiségét illetően. Példa:
<form action="welcome.php" method="post"> Enter your name: <input type="text" name="name" /> Enter your age: <input type="text" name="age" /> <input type="submit" /> </form>

Amikor a felhasználó a submit gombra kattint, az URL nem fog semmilyen űrlap adatot tartalmazni, és a valahogy így fog kinézni:
http://www.w3schools.com/welcome.php

Így a welcome.php fájl most már használhatja a $_POST változót, hogy az űrlap adatokat elérhesse (észre kell venni, hogy az űrlap mezők neve automatikusan az azonosító kulcsok a $_POST tömbből):
Welcome <?php echo $_POST["name"]; ?>.<br /> You are <?php echo $_POST["age"]; ?> years old!

Miért használjunk $_POST–ot?
• • A HTTP POST-al küldött változók nem láthatók az URL-ben A változóknak nincs hosszúsági korlátjuk

Egyébként, mivel az URL-ben nem láthatók a változók, nem lehetséges az oldalakat könyvjelzővel ellátni. (Ez általában nem is lenne praktikus.)

162. oldal

Web programozás (0.6. verzió)

A $_REQUEST változó
A $_REQUEST változó tartalmazza a $_GET, $_POST, és $_COOKIE tartalmát. Ez a változó használható a GET és a POST metódusokkal elküldött űrlap adatok elérésére. Példa:
Welcome <?php echo $_REQUEST["name"]; ?>.<br /> You are <?php echo $_REQUEST["age"]; ?> years old!
Megjegyzés: Biztonsági okokból a $_REQUEST használata általában kerülendő. Meg kell ugyanis győződnünk arról, hogy a fontos adatok tényleg onnan érkeztek-e, ahonnan mi várjuk, és nem valahonnan máshonnan.

9.2. Haladó témák
A nyelvi és nyelvtani alapok áttekintése után lépjünk egy kicsit tovább.

9.2.1

Dátumok kezelése

A PHP a dátumok kezelésére az ún. Unix időbélyeg (timestamp) megközelítést alkalmazza. (A Unix időbélyeg az 1970. január 1-óta eltelt másodpercet jelenti.)

A date függvény
A PHP date függvény tetszőlegesen formáz egy adott dátumot/időt. Szintaxis:
date(format,timestamp)

A format paraméter kötelező, a kinézetet fogja meghatározni. A timestamp elhagyása esetén az aktuális (szerver) időt fogja formázni. A dátum formázására a legalapvetőbb lehetőségeket nézzük meg: d: m: Y: a hónap napja 2 jeggyel a hónap száma 2 jeggyel az év 4 jeggyel

Nézzünk egy egyszerű példát:
<?php echo echo echo echo echo ?> date("Y/m/d"); "<br />"; date("Y.m.d"); "<br />"; date("Y-m-d");

Az eredmény:
2006/07/11 2006.07.11 2006-07-11

9.PHP A date (elhagyható) második paramétere egy időbélyeg lehet.

163. oldal

Az mktime függvény
Az mktime függvény egy időbélyeget képes előállítani. Szintaxis:
mktime(hour,minute,second,month,day,year,is_dst)

A következő példa a honlapi dátumot írja ki:
<?php $tomorrow = mktime(0,0,0,date("m"),date("d")+1,date("Y")); echo "Tomorrow is ".date("Y/m/d/", $tomorrow); ?>

A checkdate függvény
A checkdate() függvény visszatérési értéke igaz, ha az argumentumban megadott dátum érvényes, egyébként hamis. Egy dátum érvényes ha:
● ● ●

a hónap 1 és 12 közötti A day paraméter a month paramétereknek megfelelő értéket vesz fel. az év 1 és 32767 között van
checkdate(month,day,year)

Szintaxis: Példa:
<?php var_dump(checkdate(12,31,2000)); var_dump(checkdate(2,29,2003)); var_dump(checkdate(2,29,2004)); ?>

Az eredmény:
true false true

9.2.2

Az include és társai

Az include függvény használata esetén a PHP lényegében bemásolja a sor helyére a paraméterként megadott fájlt, és – ha tartalmaz PHP kódot – lefuttatja azt.

Az include függvény
A következő példa a header.php tartalmát szúrja be az include sorába.
<html> <body> <?php include("header.php"); ?> <h1>Welcome to my home page</h1> <p>Some text</p> </body> </html>

164. oldal

Web programozás (0.6. verzió)

Tegyük fel, hogy az oldalainkra ugyanazt a menüt akarjuk beszúrni:
<html> <body> <a href="default.php">Home</a> | <a href="about.php">About Us</a> | <a href="contact.php">Contact Us</a> ...

Ha mindhárom oldalra (default.php, about.php, contact.php) ugyanezt a menüt akarjuk alkalmazni, akkor hagyományos megoldással mindhárom oldalra be kell illeszteni. Ez azonban több okból sem szerencsés. Ehelyett tegyük a fenti kódot egy külön menu.php fájlba, majd minden további oldalról csak illesszük be. Például a default.php:
<?php include("menu.php"); ?> <h1>Welcome to my home page</h1> <p>Some text</p> </body> </html>

Természetesen ha megnézzük a böngészőben az állományt, akkor ott a beillesztett tartalmat fogjuk látni.

A require függvény
Ez a függvény nagyon hasonlít az előzőre: mindössze a hibakezelésben van köztük eltérés. Az include warning-ot ad (és a kód tovább fut) hiba esetén, míg a require error-t ad, és a kód futását megszakítja. Tegyük fel, hogy a wrongFile.php hibás kódot tartalmaz.
<html> <body> <?php include("wrongFile.php"); echo "Hello World!"; ?> </body> </html>

Az include miatt a futás nem szakad meg a hibánál, a hibaüzenetek után az echo is lefut:
Warning: include(wrongFile.php) [function.include]: failed to open stream: No such file or directory in C:\home\website\test.php on line 5 Warning: include() [function.include]: Failed opening 'wrongFile.php' for inclusion (include_path='.;C:\php5\pear') in C:\home\website\test.php on line 5 Hello World!

Ha az include-ot kicseréljük require-re, akkor a futás megszakad, és a következő eredményt kapjuk:
Warning: require(wrongFile.php) [function.require]: failed to open stream: No such file or directory in C:\home\website\test.php on line 5

9.PHP
Fatal error: require() [function.require]: Failed opening required 'wrongFile.php' (include_path='.;C:\php5\pear') in C:\home\website\test.php on line 5

165. oldal

Egyedi beillesztés
Van, amikor szándékosan illesztünk be egy állományt többször (pl. egy ciklus belsejében), de van, amikor a többszörös beillesztés káros lenne (pl. függvény vagy osztálydefiníció esetén), vagyis el kell kerülni. A többszörös beillesztés elkerülése végett alkalmazhatjuk az include_once és require_once függvényeket, amelyek hatására az esetleges többszörös beillesztés nem fog megtörténni.

9.2.3

Fájlkezelés

Az fopen() függvényt fájlok megnyitására használjuk a PHP-ben. A függvény első paramétere tartalmazza a megnyitandó fájl nevét, a második azt határozza meg, hogy milyen módon nyissuk meg a fájlt:
<html> <body> <?php $file=fopen("welcome.txt","r"); ?> </body> </html>

A fájl az alábbi módokban nyitható meg: Mód r r+ w Leírás Csak olvasás. A fájl elején kezdődik. Írás/Olvasás. A fájl elején kezdődik. Csak írás. Megnyitja és törli a fájl tartalmát; vagy egy új fájlt készít ha a fájl nem létezik. Olvasás/Irás. Megnyitja és törli a fájl tartalmát; vagy egy új fájlt készít ha a fájl nem létezik. Hozzáfűzés. Megnyitja a fájlt és a végére kezd írni; vagy egy új fájlt készít ha a fájl nem létezik. Olvasás/Hozzáfűzés. Megőrzi a fájl tatalmát és csak a végére ír. Csak írás. Készít egy új fájlt. Hibát jelez (false) ha már létezik. Olvasás/Írás. Készít egy új fájlt. Hibát jelez (false) ha már létezik.

w+

a

a+ x x+

"<br />". "r") or exit("Unable to open file!"). ?> </html> </body> Megjegyzés: A kód az or rövidzár kiértékelése miatt csak az fopen false visszaadott értéke esetén futtatja az exit függvényt. ?> Fájl karakterszintű beolvasása Az fgetc() függvény egy fájl egy karakterének beolvasására szolgál. while(!feof($file)) { echo fgets($file).6.txt". míg el nem éri annak végét. } fclose($file).txt".166. false-t ad vissza."r")."r") or exit("Unable to open file!"). Fájl soronkénti beolvasása Az fgets() függvényt egy fájl egy sorának beolvasására használjuk. Megjegyzés: A függvény hívása után a fájlmutató a következő karakterre mutat. //.. . oldal Web programozás (0. if (feof($file)) echo "End of file". <?php $file = fopen("test. A fájl bezárása Az fclose() függvényt fájlok bezárására használjuk. Az alábbi példa egy üzenetet ad vissza. ?> Fájlvég ellenőrzés Az feof() függvény ellenőrzi a „fájlvég” (EOF) elérését. míg el nem éri annak végét: <?php $file = fopen("welcome. Az alábbi példa sorról sorra beolvas egy fájlt. verzió) Megjegyzés: Ha az fopen() nem tudja megnyitni a fájlt. ha az fopen() nem tudja megnyitni a megadott fájlt: <html> <body> <?php $file=fopen("welcome. Az feof() függvény hasznos ismeretlen hosszúságú adatokon való iterációknál. Megjegyzés: A függvény hívása után a „fájl mutató” a következő sorra mutat.. fclose($file). Az alábbi példa karakterenként olvas be egy fájlt. Illik – más erőforrásokhoz hasonlóan – a fájlokat a lehető legkorábban „elengedni”.txt".

Például böngészőben való megjelenítéskor lesz egy Tallózás gomb a bemenet mező mellett. ha az űrlap bináris adatot vár. és feltöltés után is ellenőrizzük a fájlt. while (!feof($file)) { echo fgetc($file).php fájl tartalmazza a fájl feltöltésére szolgáló programot: .txt". egy fájl tartalma feltöltéskor.2. hogy melyik tartalom típust használjuk. amikor az űrlapot elfogadjuk. oldal <?php $file=fopen("welcome.9. 9. A multipart/form-data akkor használatos.PHP 167. Feltöltő szkript készítése Az upload_file. ● Megjegyzés: Feltöltés engedélyezése felhasználók számára nagy kockázattal jár. ?> Megjegyzés: PHP-ben nem jellemző a bináris fájlkezelés.php" method="post" enctype="multipart/form-data"> <label for="file">Filename:</label> <input type="file" name="file" id="file" /> <br /> <input type="submit" name="submit" value="Submit" /> </form> </html> </body> Jegyezzük meg a következőket a HTML űrlappal kapcsolatban: ● A form enctype attribútuma határozza meg. Az input elem file típusa határozza meg. Nézzük meg az alábbi fájl feltöltésre használt HTML űrlapot: <html> <body> <form action="upload_file. hogy a függvény bemenete fájlként legyen feldolgozva. Kizárólag megbízható felhasználók számára tegyük lehetővé fájlok feltöltést. mint pl.4 Fájl feltöltése PHP-vel lehetséges fájlok szerverre történő feltöltése is. legtöbbször szöveges állományokkal dolgozunk. } fclose($file)."r") or exit("Unable to open file!"). Fájlfeltöltő űrlap készítése Egy fájl űrlapból való feltöltése igen hasznos lehet.

} ?> . A felhasználó kizárólag .gif vagy . $_FILES["file"]["error"] . ($_FILES["file"]["size"] / 1024) . A feltöltés korlátozása Ebben a szkriptben a fájlfeltöltést korlátokhoz kötjük. a következőképpen: $_FILES["file"]["name"] $_FILES["file"]["type"] $_FILES["file"]["size"] a feltöltött fájl neve a feltöltött fájl típusa a feltöltött fájl mérete byte-okban $_FILES["file"]["tmp_name"] a szerveren tárolt fájl másolatának átmeneti neve $_FILES["file"]["error"] a fájl feltöltése során kapott hibakód Ez a fájlfeltöltés egy nagyon egyszerű módja. "<br />". tmp_name vagy error. $_FILES["file"]["name"] . Az első paraméter az űrlap bemenetének a neve. "<br />". echo "Stored in: " . Biztonsági okokból korlátozásokat kell bevezetni a felhasználóknál a feltöltésekre vonatkozóan. $_FILES["file"]["type"] . $_FILES["file"]["tmp_name"]. size. verzió) <?php if ($_FILES["file"]["error"] > 0) { echo "Error: " . "<br />". $_FILES["file"]["error"] . ($_FILES["file"]["size"] / 1024) .168. } else { echo "Upload: " . "<br />". $_FILES["file"]["tmp_name"]. echo "Type: " . echo "Size: " .6. $_FILES["file"]["name"] . } ?> A $_FILES globális PHP tömb használatával fájlokat tölthetünk fel egy kliens gépről a távoli szerverre. } } else { echo "Invalid file". echo "Stored in: " . és a fájlméretnek 20 kb alatt kell maradnia: <?php if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Error: " .jpeg fájlokat tölthet fel. echo "Size: " . echo "Type: " . } else { echo "Upload: " . oldal Web programozás (0. $_FILES["file"]["type"] . a második lehet name. " Kb<br />". "<br />". " Kb<br />". "<br />". type.

bemásolja azt a megadott mappába. "<br />". $_FILES["file"]["name"]). oldal A fenti példák elkészítik a szerveren a feltöltött fájlok egy-egy átmeneti másolatát a PHP temp mappában. $_FILES["file"]["name"]. " Kb<br />". $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . Hogyan készítsünk sütit? Süti készítésére a setcookie() függvényt használhatjuk. $_FILES["file"]["type"] . "<br />". ha pedig nem. 9. létezik-e már a fájl. } } } else { echo "Invalid file". } else { echo "Upload: " . amint a szkript futása véget ér.ini beállításától függ. ténylegesen a php. ". Megjegyzés: a temp mappa egy logikai kifejezés. Ahhoz. át kell másolnunk máshová: <?php if (($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/pjpeg") && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . echo "Type: " . Az átmeneti fájlok törlésre kerülnek. . $_FILES["file"]["error"] . hogy a fájlt eltároljuk. } ?> A fenti szkript leellenőrzi.9. "upload/" . ami a felhasználó azonosítására szolgál. echo "Size: " . echo "Stored in: " . ($_FILES["file"]["size"] / 1024) . PHP segítségével készíthetünk sütit. "upload/" . $_FILES["file"]["tmp_name"] .5 Sütik kezelése A sütiket (cookie) általában a felhasználó azonosítására használjuk. valamint a meglévőket kiolvashatjuk. Megjegyzés: Ez a példa lementi a fájlt az upload nevű mappába.PHP A feltöltött fájl elmentése 169. $_FILES["file"]["name"] . "<br />". echo "Temp file: " . } else { move_uploaded_file($_FILES["file"]["tmp_name"]. " already exists. Mi is az a süti? A süti a szerver által a kliens gépen tárolt adat. A böngésző a sütit minden kérés alkalmával elküldi a kiszolgálónak. if (file_exists("upload/" .2. "<br />".

Az alábbi példában létrehozunk egy user nevű sütit és az Alex Porter értéket rendeljük hozzá. és automatikusan dekódolódik kiértékeléskor. Példa törlésre (az érvényesség lejártának beállítása egy órával ezelőttre): <?php setcookie("user". egy elválasztó üres sor után. <?php setcookie("user". "Alex Porter". majd az egész tömb tartalmát írjuk ki a képernyőre. Az alábbi példában a user nevű süti értékét. ?> </body> </html> Süti törlése A süti törlése gyakorlatilag azt jelenti. expire. hogy a sütit lejártnak állítjuk be. hogy érkezett e süti. print_r($_COOKIE). time()-3600). akkor már nem küldhetünk fejlécet. ?> <html> <body> </body> </html> Megjegyzés: a süti értéke automatikusan kódolásra kerül küldéskor. time()+3600). verzió) Fontos: a setcookie() függvénynek még a<html> tag előtt meg kell jelennie. ?> A következő kódrészletben az isset() függvény segítségével ellenőrizzük. továbbá az érvényességi időt egy órában határozzuk meg. "". <?php echo $_COOKIE["user"]. Ha tehát akár egyetlen betűt is elküldünk az oldalból. ?> Ha a böngésző nem támogatja a sütiket Amennyiben a böngésző nem támogatja a sütiket. $_COOKIE["user"] . oldal Web programozás (0. <html> <body> <?php if (isset($_COOKIE["user"])) echo "Welcome " . path. domain). A süti kiolvasása A süti értéke a $_COOKIE tömbben kerül tárolásra. "!<br />". Szintaxis: setcookie(name.6. Kódolás nélküli küldéshez a setrawcookie() függvény használható. Megjegyzés: A HTTP protokoll szerint a szerver először ún. else echo "Welcome guest!<br />". űrlapokkal kell továbbítani az adatokat. ennek a fejlécnek lesz része a sütink is. A HTML oldal a fejléc után kerül küldése.170. value. . fejlécet küld.

?> years old. A session információk ideiglenesek.PHP 171. vagy annak megváltozásáról. amikor elindítjuk az alkalmazást. </body> </html> 9. majd bezárjuk. Tudja. vásárlási tételek.6 Munkamenet-kezelés A munkamenet-kezelést (session) arra használjuk. ?>. vagy az URL-ben kerül továbbításra. oldal Az alábbi példában a felhasználói bemenet a welcome.<br /> You are <?php echo $_POST["age"]. mert a HTTP protokoll nem tartja meg a kérések közt az állapotát.php): <html> <body> Welcome <?php echo $_POST["name"]. és az UID-t továbbítja a felhasználó számára. A PHP session (munkamenet) kezelés megoldja ezt a problémát. A számítógép tudja. <html> <body> <form action="welcome. és változókban tároljuk. A session-ök úgy működnek. Megjegyzés: Úgy is mondjuk. el kell indítani a munkamenetet.). miután a felhasználó elhagyta az oldalt.php oldalnak kerül elküldésre a submit gomb megnyomására. ?> <html> <body> </body> </html> Az előbbi kód regisztrálja a session-t a szerveren. hogy ki végzi a műveletet.php" method="post"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> Az elküldött adatok kiolvasása az alábbi módon történik (welcome. hogy létrehozunk egy egyedi azonosítót (UID) minden látogatónak. és törlődnek. engedélyezi a felhasználói információk mentését.9. hogy információt tároljon a felhasználó beállításairól. stb. Engedélyezi a felhasználókra vonatkozó információk tárolását a szerveren (felhasználó név. Az UID vagy cookie-ban. . Munkamenet indítása Mielőtt információkat tárolnánk. Amikor egy asztali (desktop) alkalmazással dolgozunk. De az interneten ez nem így van. akkor az adatokat adatbázisba kell elmenteni. hogy kik vagyunk és mit csinálunk. hogy a HTTP protokoll állapotmentes. megnyitjuk. Ha állandó tárolásra van szükség. változtatunk valamit. A webszerver nem tudja.2. és amikor bezárjuk. Megjegyzés: A session_start() függvénynek a <html> tag előtt kell szerepelnie: <?php session_start().

Megjegyzés: korábban a session_register és a session_unregister függvények voltak használatosak a munkamenet-változók kezelésére. verzió) A session változók tárolása és visszaolvasása a PHP $_SESSION változóval lehetséges: <?php session_start(). Ez azonban elavultnak tekinthető. hogy közvetlenül szkriptből küldjünk e-maileket. A PHP mail() függvényt arra használják. használjuk mindig közvetlenül a $_SESSION tömböt. hogy segítségével szkripten belül e-maileket küldjenek. és az összes tárolt session adatot elveszítjük. ?> <html> <body> <?php echo "Pageviews=".6. 9. Az isset() függvény ellenőrzi.7 Levélküldés A PHP lehetővé teszi. Ha igen. $_SESSION['views']. Az unset() függvényt a session változó törlésére használjuk: <?php unset($_SESSION['views']). $_SESSION['views']=1.2. $_SESSION['views']. if(isset($_SESSION['views'])) $_SESSION['views']=$_SESSION['views']+1. Szintaxis: . ?> </body> </html> Kimenet: Pageviews=1 Az előző példában készítettünk egy egyszerű oldal látogatottság számlálót. akkor létrehozzuk. Ha a views nem létezik. echo "Views=". ?> A session teljes törlése a session_destroy() függvénnyel lehetséges: <?php session_destroy(). hogy a views munkamenet-változó kapott-e már értéket. és beállítjuk 1-re: <?php session_start(). else $_SESSION['views']=1. ?> Megjegyzés: a session_destroy() függvény újraindítja a session-t. ?> A session törlése A session adatok törlése az unset() vagy a session_destroy() függvényekkel történik. akkor növeljük eggyel.172. oldal A session változó tárolása Web programozás (0.

headers.parameters) 173. Az elküldendő üzenetet határozza meg. További információt a PHP levél referencia részben találhatunk. További fejléceket adhatunk meg.$message. A következő példában egy szöveges üzenetet küldünk el a megadott email címre. Minden új sort LF (\n) karakterrel kell elválasztani. $message = "Hello! This is a simple email message. $from = "someonelse@example.ini fájl konfigurációs beállításai határozzák meg. $subject. $from.message. mint például From.com". Az alábbi példában először deklaráljuk a változókat ($to. oldal paraméter leírás to subject Kötelezően megadandó. Kötelezően megadandó. Megjegyzés: Ez a paraméter nem tartalmazhat újsor (newline) karaktereket. PHP levélküldés egyszerűen A legegyszerűbb levélküldési mód PHP-ben a szöveges levél küldése. ?> PHP levél űrlapból A PHP segítségével létre tudunk hozni egy visszajelző űrlapot weboldalunkon. echo "Mail Sent. majd a mail függvényben felhasználjuk ezeket a változókat e-mailküldésre: <?php $to = "someone@example.". $message. Kötelezően megadandó. Egy sor terjedelme nem haladhatja meg a 70 karaktert.$subject. $headers). Cc és Bcc.". $headers = "From: $from".$headers).subject. mail($to. $subject = "Test mail". Az e-mail címzettjét/címzetteit határozza meg. . Az email témája. Opcionális.9. A további fejléceket CRLF (\r\n) karakterrel kell elválasztani. Opcionális.com". További paramétereket adhatunk meg a sendmail programnak message headers parameters Megjegyzés: A mail függvény használatához a PHP-nek szüksége van egy feltelepített és működő levelezőrendszerre.PHP mail(to. A használandó programot a php.

Amikor a felhasználó az elküld (Submit) gombra kattint.com %0ABcc:person3@example.person3@example. Bcc:. "From: $email" ). echo "Thank you for using our mail form". és így a fejléc többlet Cc:.com %0ABTo:person6@example.174. elküldjük az űrlapból az emailt. Ha nincs kitöltve (például ha ez az első látogatás az oldalon). verzió) <html> <body> <?php if (isset($_REQUEST['email'])) $email = $_REQUEST['email'] . megnézi. és To: mezőket tartalmaz. a fenti összes címre elküldi a levelet. "Subject: $subject". } else { echo "<form method='post' action='mailform.6. ha a felhasználó a következő szöveget írja be az email beviteli mezőbe az űrlapon? someone@example. mail( "someone@example. Mi történik. a lap újratöltődik.com. majd elküldi az e-mailt. } ?> </body> </html> A példa működése a következő: Először megvizsgáljuk. $message = $_REQUEST['message'] . hogy illetéktelen felhasználok be tudnak szúrni adatokat a levél fejlécébe a beviteli űrlapon keresztül. $subject = $_REQUEST['subject'] .com. akkor megjelenítjük a HTML űrlapot. $message. A probléma a fent bemutatott kóddal. hogy az email beviteli mező ki van-e töltve. Befecskendezéses támadás meggátolása A legjobb módja az e-mail-befecskendezéses támadás megállításának a bevitt adatok ellenőrzése. Biztonságos levélküldés Az előző fejezetben bemutatott mail függvénynek van egy gyenge pontja: lehetőséget ad befecskendezéses támadás (injection) megvalósítására.com.com A mail függvény a szokott módon a fenti szöveget helyezi el a levél fejlécében. anotherperson4@example.person5@example. oldal Web programozás (0. de most ellenőrizzük az email mezőt: . hogy az email beviteli mező ki van-e töltve.com%0ACc:person2@example. Ha ki van töltve (miután az űrlap kitöltésre került).com". mint a korábbi.php'> Email: <input name='email' type='text' /><br /> Subject: <input name='subject' type='text' /><br /> Message:<br /> <textarea name='message' rows='15' cols='40'> </textarea><br /> <input type='submit' /> </form>". Ha az űrlap kitöltése után nyomják meg az elküld (submit) gombot. Az alábbi kód majdnem ugyanaz.

PHP <html> <body> <?php function spamcheck($field) { return eregi("to:". echo "Thank you for using our mail form". "Subject: $subject".8 PHP hibakezelés Amikor webalkalmazásokat készítünk. mely egy szövegfájlt nyit meg: <?php $file=fopen("welcome. Ez a fejezet a PHP-ben leggyakrabban alkalmazott hibakezelő módszereket mutatja be: ● ● ● egyszerű die kifejezés szokásos hibák és hiba triggerek hibajelentések Alapvető hibakezelés: a die függvény használata Az első példa egy egyszerű szkriptet mutat be. } ?> </body> </html> 175.txt". a hibakezeléssel nagyon fontos törődni.php'> Email: <input name='email' type='text' /><br /> Subject: <input name='subject' type='text' /><br /> Message:<br /> <textarea name='message' rows='15' cols='40'> </textarea><br /> <input type='submit' /> </form>". } else { $email = $_REQUEST['email'] .com". az oldal nagyon szakszerűtlennek néz ki és biztonsági réseket tartalmazhat.$field) || eregi("cc:". mail("someone@example. if ($mailcheck==TRUE) { echo "Invalid input". $message.$field). "From: $email" ). Ha az alkalmazásunk híján van az ellenőrzésnek."r"). $subject = $_REQUEST['subject'] . ?> Ha a fájl nem létezik. akkor egy ehhez hasonló hibaüzenetnek kell megjelennie: . oldal 9.2. $message = $_REQUEST['message'] .9. } if (isset($_REQUEST['email'])) { $mailcheck = spamcheck($_REQUEST['email']). } } else { echo "<form method='post' action='mailform.

verzió) Warning: fopen(welcome. Egyszerűen egy speciális függvényt kell létrehozni. Opcionális. a sor száma és a hibakörnyezete. Megadja a hibaüzenetet.php on line 2 Ennek elkerülésére tesztelnünk kell. mert a szkript további futásának megakadályozására egy egyszerű hibakezelő eljárást alkalmaz.) Szintaxis: error_function(error_level."r"). Ennek a függvénynek tudnia kell kezelni legalább két paramétert (hiba szintje és hibaüzenet). (Az opcionálisak: fájl.txt")) { die("File not found").txt". hogy a fájl valóban létezik-e. } ?> Ha a fájl nem létezik. hogy olyan információkat szivárogtassunk ki. akkor egy ehhez hasonló hibaüzenetet fogunk kapni: File not found A fenti kódrészlet sokkal hatékonyabb az előzőnél.error_context) Paraméter error_level error_message error_file error_line error_context Leírás Kötelező. oldal Web programozás (0. amiben benne van minden változó és annak értéke.6. ahol a hiba felmerült.176. Opcionális. Megadja. . amikor a hiba felmerült. Kötelező. Egy tömböt tartalmaz. mielőtt megpróbálnánk hozzáférni: <?php if(!file_exists("welcome. melyek használatban voltak. ami meghívható. hogy milyen súlyos hibákat tekintsünk errornak Egy számértéknek kell lennie. error_file. Opcionális. } else { $file=fopen("welcome.error_line. ahol a hiba felmerült.error_message. Másrészt megakadályozható vele. Vessünk egy pillantást pár alternatív hibakezelő PHP funkcióra. ha hiba merül fel futás közben. de elfogadhat maximum öt paramétert.txt) [function.fopen]: failed to open stream: No such file or directory in C:\webfolder\test. A fájlnevet írja le. amelyek rosszindulatú támadásokhoz adhatnak támpontot A szkript leállítása nem mindig a megfelelő út. A sor számát határozza meg. Alapértelmezett hibakezelő függvény készítése Egy alapértelmezett hibakezelő függvény készítése meglehetősen egyszerű.

ha a szkript hibamentesen fut. Elkapható végzetes hiba. Ez olyan. ami lehetséges hibaforrás. megkapja a hiba szintjét és egy hiba üzenetet. A szkript talált valamit. echo "Ending Script". milyen esetekben legyen meghívva. Ezután a kimenetre küldi a hibaszintet és üzenetet. mint egy E_WARNING.9. Ez olyan. . 256 E_USER_ERROR 512 E_USER_WARNING 1024 E_USER_NOTICE 4096 E_RECOVERABLE_ERROR 8191 E_ALL Hozzunk létre egy függvényt a hibák kezelésére: function customError($errno. die(). mint egy E_ERROR. Ez olyan. mint egy E_ERROR. melyet a programozó állít be a trigger_error() függvényt használva. melyet a programozó állít be a trigger_error() függvényt használva. } A fenti kódrészlet egy egyszerű hibakezelő függvény. A szkript végrehajtása nem lesz megszakítva. Most tehát. de ez elkapható egy felhasználó által definiált hibakezelővel. el kell döntenünk. és a szkript futása befejeződik. Amikor megkapja a vezérlést. melyek orvoslására a különböző felhasználó által létrehozott hibakezelőket használni lehet: Érték 2 8 Konstans E_WARNING E_NOTICE Leírás Nem végzetes futásidejű hibák. Futásidejű figyelmeztetés. Felhasználó által generált értesítés. Nem végzetes felhasználó által generált figyelmeztetés. $errstr) { echo "<b>Error:</b> [$errno] $errstr<br />". miután írtunk egy hibakezelő függvényt.PHP Hiba értesítési szintek 177. de az értesítés akkor is előfordulhat. melyet a programozó állít be a trigger_error() függvényt használva. kivéve a E_STRICT szintet. mint egy E_NOTICE. Ez olyan. Minden hiba és figyelmeztetés. oldal Ezek a hiba értesítési szintek azok a hibafajták. Végzetes felhasználó által generált hiba.

ha a test változó nagyobb. A szkript végrehajtása nem áll le. Mivel azt akarjuk. Lehetséges hiba típusok: ● E_USER_ERROR – Fatális felhasználó által generált futásidejű hiba. Lehetséges úgy megváltoztatni a hibakezelőt. ● ● . ?> echo($test). verzió) Az alapértelmezett hibakezelő a PHP-ban egy beépített függvény. } set_error_handler("customError"). hogy csak bizonyos hibákra vonatkozzon. és a szkript különböző hibákat különbözőképpen tudjon kezelni. hogy milyen hiba szintet akarunk előidézni. de az értesítés akkor is előfordulhat. amikor egy nem megfelelő bevitel adódik. és a hiba szintjét határozza meg.php on line 6 Egy hibát meg lehet hívni bárhol a szkripten belül. melyeket nem lehet kijavítani. hasznos lehet a hibák előidézése. hogy a hibakezelő függvényünk minden hibát kezeljen. A szkript végrehajtása leáll. Felhasználó által generált futásidejű értesítés. A PHP-ban ez a trigger_error() által van kezelve. $errstr) { echo "<b>Error:</b> [$errno] $errstr". A kód kimenete valami ehhez hasonló lesz: Error: [8] Undefined variable: test Hiba előidézése Egy szkriptben. E_USER_NOTICE – Alapértelmezett. mint 1: <?php $test=2. Teszteljük a hibakezelőt. E_USER_WARNING .Nem fatális felhasználó által generált futásidejű figyelmeztetés. melybe a felhasználók adatokat vihetnek be. ami nem létezik: <?php function customError($errno. } ?> A kód kimenete valami ehhez hasonló lesz: Notice: Value must be 1 or below in C:\webfolder\test. Most azonban a beépített megoldás helyett a fenti függvényt fogjuk használni. ami lehetséges hibaforrás. a set_error_handler() csak egy paramétert kívánt. Mi most ebben a példában a szokásos hibakezelőt fogjuk használni az összes hiba esetén: set_error_handler("customError"). és egy második paraméter hozzáadásával meg lehet határozni.6. A szkript talált valamit. ha a szkript hibamentesen fut. oldal A hibakezelő beállítása Web programozás (0. Ebben a példában hiba történik. a második csak opcionális. olyan változót megpróbálva kiíratni.178. Hibák. if ($test>1) { trigger_error("Value must be 1 or below").

E_USER_WARNING)."From: webmaster@example. } ?> A kód kimenete valami ehhez hasonló lesz: Error: [512] Value must be 1 or below Webmaster has been notified A levél. "someone@example. Egy ilyen esetben a szokásos hibakezelőnket használjuk. Hiba naplózása A php. mint 1. die(). echo "Webmaster has been notified".9.ini error_log konfigurációjában beállított módon lehetőség van a hiba naplózásának finomhangolására. Hibaüzenetek a saját email címre küldése egy jó módszer arra. Egy hiba üzenet elküldése e-mailben Az alábbi példában egy e-mailt fogunk elküldeni egy hibaüzenettel. hogy értesítve legyünk a különböző hibákról.E_USER_WARNING).E_USER_WARNING). és leállítjuk a szkriptet. if ($test>1) { trigger_error("Value must be 1 or below". $test=2. hogy megtanultunk saját hibakezelőt készíteni. és befejezzük a szkript futtatását: <?php function customError($errno. if ($test>1) { trigger_error("Value must be 1 or below". amit kapunk.com"). } set_error_handler("customError". error_log("Error: [$errno] $errstr". $errstr) { echo "<b>Error:</b> [$errno] $errstr<br />". és hogy hogyan lehet meghívni őket. vessünk egy pillantást a hiba naplózásra. ha egy bizonyos hiba megjelenik: <?php function customError($errno.com".1. } set_error_handler("customError". $test=2. oldal Ebben a példában egy E_USER_WARNING üzenet jelenik meg. valami ehhez hasonló lesz: . ha a test változó nagyobb. echo "Ending Script". } ?> A kód kimenete valami ehhez hasonló lesz: Error: [512] Value must be 1 or below Ending Script Most.PHP 179. $errstr) { echo "<b>Error:</b> [$errno] $errstr<br />".E_USER_WARNING).

Dobjunk egy kivételt anélkül.6. A kivételek használata Mikor kivétel keletkezik. Mi is a kivétel A PHP 5-tel egy új objektum orientált lehetőség is adott a hibák kezelésére. Ha egy kivétel nincs elkapva. és nem lehet arra használni. egy hiba fog keletkezni.180.php:6 Stack trace: #0 C:\webfolder\test. vagy pedig meghatározhatjuk a parancsvégrehajtást. verzió) Ezt nem tanácsos használni minden hiba esetén. } return true. hogyha egy meghatározott hiba bekövetkezik. A helyzettől függően a kezelő folytathatja a munkát a lementett állapottól. oldal Error: [512] Value must be 1 or below Web programozás (0. hogy elkapnánk: <?php function checkNum($number) { if($number>1) { throw new Exception("Value must be 1 or below"). ha egy meghatározott hiba (kivétel) feltétel bekövetkezik. A rendszeres hibákat inkább a szerveren naplózzuk.php(12): checkNum(28) #1 {main} thrown in C:\webfolder\test.php on line 6 . 9. ha meg akarjuk változtatni az utasítások végrehajtásának normál menetét. az azt követő kód nem hajtódik végre. ?> A fenti kód a következő hibát fogja generálni: Fatal error: Uncaught exception 'Exception' with message 'Value must be 1 or below' in C:\webfolder\test. illetve folytathatjuk a kód egy másik helyétől. hogy a kód egy másik helyére ugorjunk velük.2. és a PHP megpróbálja megtalálni a hozzá tartozó catch blokkot. ● Megjegyzés: A kivételeket csak a hibák felmerülésekor kell lekezelni. A kód végrehajtása átkapcsol egy előre meghatározott kivétel kezelési metodikára. Ezt a feltételt kivételnek nevezzük.9 Kivételkezelés Akkor kell a kivételt használni. A kivételkezelés használatakor az megváltoztatja az utasítások végrehajtásának normál menetét. Általában a következő történik kivétel kiváltódásánál: ● ● A jelenlegi állapot lementődik. } checkNum(2). egy "Uncaught Exception" („Lekezeletlen kivétel!”) üzenettel. a PHP alapértelmezett naplózási rendszerét használva.

létre kell hoznunk a megfelelő kódot. Minden egyes throw-hoz kell lennie legalább egy catch-nek catch . Az ezen keresztülcsúszott hibák lekezelésére egy felsőbb szintű kivételkezelést tudunk beállítani. az a szabály. hogy kezelni tudja a kivételt.A catch blokk elkapja a hibát és egy objektumot készít. kivétel lekezelése esetén kivétel fog keletkezni throw – Így kapjuk el a kivételt. } try { checkNum(2). A kivételkezelő kódnak tartalmaznia kell a következőket: ● try – Egy függvénynek. Azonban. akkor a kivétel dobódik. throw és catch Ha el szeretnénk kerülni a fenti hibát. . } catch(Exception $e) { echo 'Message: ' . } ?> ● ● Próbáljunk megjeleníteni egy kivételt egy érvényes kóddal: A fenti kód a következő hibát fogja okozni: Message: Value must be 1 or below A fenti kód dob egy kivételt. A checkNum() függvény meg van hívva a "try" blokk-ban. ● ● ● ● Azonban. a kód normális módon fog folytatódni. echo 'If you see this. ami tartalmazza a kivétel információit. hogy a szám nagyobb-e 1-nél.9. Ha nagyobb. hogy „minden throw-hoz kell lennie egy catch-nek" csak egyfajta megközelítése a kivétel lekezelésének. the number is 1 or below'. A kivétel a checkNum() függvényen belül dobódik A catch blokk lekezeli a kivételt. és el is kapja azt: ● A checkNum() függvény azt nézi. oldal try. ami kivételt alkalmaz. <?php function checkNum($number) { if($number>1) { throw new Exception("Value must be 1 or below").PHP 181. benne kell lennie egy try blokkban. és egy objektumot kreál. mely a kivételről tartalmaz információkat. } return true. – (ha nem jelenik meg kivételként) ha nincs kivétel dobva. A hiba üzenet a kivételtől megjelenik a $e->getMessage() meghívása által a kivétel objektumból.$e->getMessage().

mivel az e-mail cím érvénytelen. oldal Web programozás (0.$this->getFile(). Ez utóbbi különböző kivétel osztályok használatát fogja jelenteni. ● ● ● ● Többféle kivétel használata Lehetséges.com". try { if(filter_var($email. Készíteni kell egy olyan osztályt. Az errorMessage() függvény visszatér egy hibaüzenettel.182. olyan metódusokat is tudunk használni. verzió) Kivétel osztály készítése Kivétel osztályt készíteni elég egyszerű.else blokkokat. } } $email = "someone@example. return $errorMsg.$this->getLine(). és további lehetőségeket tudunk hozzárendelni. és megjeleníti a hibaüzenetet.. mint: getLine() és getFile() vagy getMessage(). Természetesen ezt az osztályt az Exception osztály leszármazottjaként hozzuk létre.6. de célszerűbb lehet többféle kivétel használata. amely olyan függvényeket tartalmaz. } ?> Az új leszármazott osztály az errorMessage() függvénnyel kibővíti az ősét. FILTER_VALIDATE_EMAIL) === FALSE) { throw new CustomException($email). amelyek különböző hibaüzenetekkel fognak visszatérni: . Készítsünk egy példa osztályt: <?php class CustomException extends Exception { public function errorMessage() { $errorMsg = 'Error on line '. Ez magába foglalja a metódusokat és annak tulajdonságait az ős osztálynak. ha az e-mail cím érvénytelen. Programozástechnikailag lehetne alkalmazni if.$this->getMessage() . } } catch (CustomException $e) { echo $e->errorMessage(). amiket meg lehet hívni.': <b>'.ami egy sztring .'</b> is not a valid E-Mail address'. switch szerkezetet is. amikor kivételek keletkeznek a PHPben. és kivétel dobódik. Mivel ez egy leszármazottja az ősosztálynak. és a CustomException osztállyal kapja el: ● A CustomException() osztály valójában az ős osztály kiterjesztése.nem tekinthető érvényes e-mail címnek. hogy egy szkript többféle kivételt használ.. Az $email változó .' in ' . A catch blokk elkapja a kivételt. A try blokk végrehajtódik. A fenti kód egy kivételt dob. Az általános kivétel osztály örökli a PHP Exception osztály tagjait. hogy kezelni tudjon többféle hibalehetőséget.

PHP <?php class customException extends Exception { public function errorMessage() { $errorMsg = 'Error on line '. "example") !== FALSE) { throw new Exception("$email is an example e-mail").' in ' .$this->getFile().9. A szkriptnek el kell rejtenie a rendszer hibáit a felhasználótól. Az errorMessage() függvény egy hibaüzenetet ad vissza. } } $email = "someone@example. A második feltétel dob egy kivételt.$this->getLine(). } if(strpos($email. } ?> A fenti kód a két lehetséges hibát teszteli és egy kivételt dob. } } catch (customException $e) { echo $e->errorMessage(). A catch blokkon belül lehetséges kivételt dobni másodszorra is. oldal try { if(filter_var($email. ● ● ● ● Ha a kódunk nem kapta volna el a CustomException kivételeket. Rendszerhibák fontosak a kódoló számára. hogyha nem felel meg valamelyik feltételnek: ● ● A CustomException osztály az Exception osztály kiterjesztése. A catch blokk elkapja a kivételt. de a felhasználónak nem. Kivételek dobása Néha mikor egy kivétel dobódik. másképp kezelnéd le.'</b> is not a valid E-Mail address'. } catch(Exception $e) { echo $e->getMessage(). Hogy a felhasználó dolgát megkönnyítsük.$this->getMessage() . ha az e-mail cím érvénytelen. újra kivétel tudunk dobni egy felhasználóbarát üzenetként: . csak az általános kivételeket. FILTER_VALIDATE_EMAIL) === FALSE) { throw new customException($email). talán az általánostól eltérően.': <b>'. és megjeleníti a helyes hibaüzenetet. 183. return $errorMsg.com". mivel az e-mail tartalmazza az example sztringet. akkor a hibaüzenetet az Exception osztálytól kaptuk volna meg.egy érvényes e-mail cím. A $email változó . de tartalmazza az example sztring A try blokk végrehajtódik. és a kivétel az első feltételnél nem dobódik ki.ami egy sztring .

$exception->getMessage(). de tartalmazza az example sztringet. mivel az e-mail tartalmazza az example sztringet. } ?> A fenti kód azt teszteli. } } $email = "someone@example. a kivétel újradobódik: ● A customException() osztály az ős osztályból kerül kiterjesztésre. A kivétel keletkezik.6. ami lekezel minden eddig nem elkapott kivételt. try { try { if(strpos($email. így megkapja annak tulajdonságait és metódusait. magasabb szinten fog egy catch blokkot keresni. ● ● ● ● ● ● Ha a kivétel nincs lekezelve a jelenlegi try blokkban. throw new Exception('Uncaught Exception occurred'). verzió) <?php class customException extends Exception { public function errorMessage() { $errorMsg = $this->getMessage() . és újra kidobja. Az errorMessage() függvény visszatér egy hibaüzenettel ha az e-mail cím érvényes A $email változó . hogy a kivétel újra kidobódjon. A try blokk egy másik try blokkot tartalmaz. Amennyiben igen. "example") !== FALSE) { throw new Exception($email). } } catch (customException $e) { echo $e->errorMessage(). ami lehetségessé teszi. oldal Web programozás (0. egy érvényes e-mail cím.' is not a valid E-Mail address. és megjelenik egy hibaüzenetet.ami egy sztring . hogy az e-mail cím tartalmazza-e az example sztringet. Felsőbb szintű kivételkezelés A set_error_handler() függvény meghatároz egy felhasználó által definiált függvényt. return $errorMsg. A customException el van kapva. } set_exception_handler('myException'). ?> .com".'.184. <?php function myException($exception) { echo "<b>Exception:</b> " . A catch blokk elkapja a kivételt.. mint customException. } } catch(Exception $e) { throw new customException($email).

9. oldal A fenti kódban nem volt catch blokk használva. hogy le tudjuk kezelni a különböző osztályú kivételeket.PHP A kód kimenetele a következő lesz: Exception: Uncaught Exception occurred 185. 9. Minden egyes try blokknak vagy throw –nak rendelkeznie kell legalább egy catch blokkal. A legalapvetőbb szabály: Ha kivételt dobunk.1 MySQL alapok A MySQL a legnépszerűbb71 nyílt forrású adatbázis szerver. A kivételkezelés szabályai • • • • A kód egy try blokkban kell hogy legyen. Összetett (többszörös) catch blokkokat arra használjuk. Kivételek dobódhatnak (vagy újradobódhatnak) egy catch blokkban. Ezért ebben a fejezetben a MySQL használatának alapjait fogjuk áttekinteni. és City). a lehetséges kivételek lekezelését elősegítve.: "Vásárlók" vagy "Rendelések"). Minden tábla tartalmaz rekordokat (sorokat) melyek adat(oka)t tartalmaznak. Adatbázis-kapcsolat kezelése PHP-ben A PHP fejlesztők leggyakrabban MySQL adatbázisszervert alkalmaznak.3. amivel a MySQL jövőjét – a szerző véleménye szerint – még inkább erősítette.9. Egy példa a táblákra. 71 A MySQL-t 2008 elején felvásárolta a SUN. azt el is kell kapnunk. Person néven: LastName Hansen Svendson Pettersen FirstName Ola Tove Kari Address Timoteivn 10 Borgvn 23 Storgt 20 City Sandnes Sandnes Stavanger A fenti tábla három rekordot tartalmaz (egy minden személyre) és négy oszlopot. Ezzel a függvénnyel el tudjuk kapni az eddig le nem kezelt kivételeket. FirstName. Address. Adatbázis táblák Egy adatbázis többnyire egy vagy több táblát tartalmaz. Minden egyes táblának van neve (pl. .3. Helyette egy felsőbb szintű kivétel kezelés volt beállítva. vagy más néven mezőt (LastName.

Paraméter servername Leírás Opcionális. a kapcsolatot kell létrehozni az adatbázishoz. Szintaxis: mysql_connect(servername.186. A lekérdezés eredménye egy rekordhalmaz lesz. Először az előbbivel foglalkozunk. Meghatározza a MySQL felhasználó jelszavát . Opcionális.password). amivel bejelentkezünk. Meghatározza a MySQL felhasználói nevet. de a fentiek a legfontosabbak.2 Kapcsolódás egy MySQL adatbázishoz Mielőtt hozzáférnél és dolgoznál adatokkal az adatbázisban. Az alapbeállítás: "" (üres sztring). PHP-ben ezt a mysql_connect() függvénnyel lehet megvalósítani. A die rész akkor fog végrehajtódni. A következő példában elmentjük a kapcsolatot egy változóba ($con) későbbi használatra. Az alapbeállítás a következő: localhost:3306 Opcionális. Meghatározza azt a szervert.3. verzió) Lekérdezések Egy lekérdezés lehet információkérés (lekérdezés) vagy az adatokat megváltoztató parancs. username password Megjegyzés: Több paraméter is megadható. ha a kapcsolódás nem sikerül: .6. oldal Web programozás (0. Nézzük meg a következő lekérdezést: SELECT LastName FROM Person A fenti lekérdezés kiválaszt minden adatot a Person tábla LastName oszlopában és viszszaadja azt: LastName Hansen Svendson Pettersen 9.username. A MySQL-től le tudunk kérdezni az adatbázisból információkat. amihez kapcsolódni akarunk.

} // . mysql_error()). ?> 9. akkor a mysql_close függvényt használva tehetjük meg. Ez elküld egy lekérdezést vagy parancsot a MySQL szervernek. ahogy a szkript véget ér.."abc123")...3."abc123"). mysql_error()). Ha ezelőtt szeretnénk bontani a kapcsolatot."peter". mysql_close($con).$con)) { echo "Database created".9."peter". ?> Tábla létrehozása A CREATE TABLE parancs használatával létre tudunk hozni egy táblát a MySQL adatbázisban. } mysql_close($con).PHP <?php $con = mysql_connect("localhost". if (!$con) { die('Could not connect: ' . } else { echo "Error creating database: " . ?> 187. használnunk kell a mysql_query() függvényt. mysql_error().3 Adatbázisok és táblák létrehozása Egy adatbázis egy vagy több táblát tartalmazhat. Szintaxis: CREATE DATABASE database_name Hogy a PHP végrehajtsa a fenti parancsot. } // . if (!$con) { die('Could not connect: ' .. <?php $con = mysql_connect("localhost". mysql_error()). A következő példában létrehozunk egy adatbázist my_db néven: <?php $con = mysql_connect("localhost". if (!$con) { die('Could not connect: ' . A CREATE DATABASE parancsot használhatjuk adatbázis létrehozására a MySQL-ben. } if (mysql_query("CREATE DATABASE my_db"."peter". oldal A kapcsolat bontása A kapcsolat bontásra kerül. Szintaxis: ."abc123").

$con)) { echo "Database created". mysql_error()). ?> Figyelem! Az adatbázist ki kell választani. MySQL adattípusok A különböző MySQL adattípusok a következő táblázatban láthatóak: Numerikus adattípus int(size) smallint(size) tinyint(size) mediumint(size) bigint(size) decimal(size. A következő példa megmutatja. $con).d) Csak egész számokat tartalmaz.d) float(size. A maximális számjegyek számát meg lehet határozni a size paraméterben Tizedesvesszőt tartalmazó számok. A mezők nevei: FirstName. mysql_close($con). hogy a parancs végrehajtódjon."abc123"). hogyan lehet egy person nevű táblát létrehozni három mezővel.. mielőtt a táblát létrehozzuk. A maximális számjegyek számát meg lehet határozni a size paraméterben A tizedesvesszőtől jobbra lévő számjegyek maximális számát a d paraméterben lehet megadni.d) double(size.6. } else { echo "Error creating database: " . LastName és Age: <?php $con = mysql_connect("localhost". ) Web programozás (0. } mysql_select_db("my_db". Age int )". oldal CREATE TABLE table_name ( column_name1 data_type.188. $con). $sql = "CREATE TABLE person ( FirstName varchar(15). mysql_error(). ."peter". verzió) Hozzá kell adni a CREATE TABLE parancssort a mysql_query() függvényhez. . column_name2 data_type. column_name3 data_type. LastName varchar(15). mysql_query($sql. Az adatbázist a mysql_select_db függvénnyel tudjuk kiválasztani. } if (mysql_query("CREATE DATABASE my_db".. if (!$con) { die('Could not connect: ' .

value2.ect) Dátumot és/vagy időt tartalmaz ENUM az ENUMERATED lista rövid formája. . ami 65535 karakter Változó sztringet tartalmaz egy megadott maximális hoszszúsággal. Azonban a SET 64 listázott tételet tartalmazhat több mint egy választási lehetőséggel set Elsődleges kulcsok és autoincrement mezők Minden egyes táblának tartalmaznia kell egy elsődleges kulcs mezőt. számok és speciális karakterek). mert az adatbázis (működése?) megkíván egy értéket. 1-65535 értéket tud raktározni listázva a ( ) zárójelben. ami nincs a listában.9. számok és speciális karakterek). úgy egy üres érték fog beszúródni. ami 4294967295 karakter. Ha egy olyan értéket akarunk beszúrni. Minden elsődleges kulcs értékének egyedinek kell lennie a táblán belül.PHP Szöveges adattípusok char(size) 189. Az elsődleges kulcs arra szolgál. Továbbá az elsődleges kulcsú mező nem lehet null. ami 255 karakter. hogy egyedileg azonosítani lehessen a sorokat a táblában. varchar(size) tinytext text blob mediumtext mediumblob longtext longblob Dátum típusú adatok date(yyyy-mm-dd) datetime(yyyy-mm-dd hh:mm:ss) timestamp(yyyymmddhhmmss) time(hh:mm:ss) Összetett típusok enum(value1. oldal Fix hosszúságú sztringet tartalmaz (betűk. Változó sztringet tartalmaz egy megadott maximális hoszszúsággal. A fix hosszúságot zárójelben lehet megadni. Változó sztringet tartalmaz egy megadott maximális hoszszúsággal. ami 16777215 karakter. Változó hosszúságú sztringet tartalmaz (betűk. A SET (halmaz) hasonló az ENUM-hoz. A maximális hosszúságot zárójelben lehet megadni Változó sztringet tartalmaz egy megadott maximális hoszszúsággal. amely azonosítja a rekordot.

három oszloppal: Firstname. melyet új adat bevitelére fogunk használni a Person táblába. PRIMARY KEY(personID).) Ezt a formát akkor érdemes használni.$con). value2.. Hogy biztosítva legyen. a mysql_query() függvényt kell meghívni. Age) VALUES ('Peter'. verzió) Az elsődleges kulcsú mező mindig indexelve van. Age) VALUES ('Glenn'. hogy az elsődleges kulcs mező nem nulla. A következő példa két új rekordot visz be a Person táblába: <?php $con = mysql_connect("localhost". mysql_query("INSERT INTO person (FirstName. Az előző fejezetben egy Person nevű táblát hoztunk létre. mysql_error()). ?> Adatok beillesztése űrlapról egy adatbázisba Most egy HTML űrlapot fogunk készíteni. } mysql_select_db("my_db".4 Adatok bevitele adatbázisba INSERT INTO table_name VALUES (value1. hogy melyik oszlopba akarjuk az adatot beilleszteni: INSERT INTO table_name (column1.. Példa: $sql = "CREATE TABLE person ( personID int NOT NULL AUTO_INCREMENT. value2. mysql_query("INSERT INTO person (FirstName. Ugyanezt a táblát használjuk ebben a fejezetben is.190.. 'Griffin'. 9.. Ahhoz.. '33')").6. LastName varchar(15). mysql_close($con). ha egy új rekord adódik hozzá az eddigiekhez.. ha nem minden mezőnek akarunk értéket adni. Lastname és Age. hogy a PHP végrehajthassa a fenti parancsokat."abc123"). 'Quagmire'. mint insert into."peter". Ez alól a szabály alól nincs kivétel! A következő példa beállítja a personID mezőt elsődleges kulcsként... column2.. LastName.) Az INSERT INTO paranccsal adatokat illeszthetünk be egy adatbázis táblába. mysql_query($sql.. oldal Web programozás (0. . LastName. if (!$con) { die('Could not connect: ' . Megjegyzés: az SQL parancsok nem érzékenyek a kis és nagybetűkre: az. Age int )". FirstName varchar(15). Az elsődleges kulcsú mező gyakran egy ID (azonosító) szám és gyakran van használva az AUTO_INCREMENT beállítással.. $con).3. Ez automatikusan növeli a mező értékét. '35')"). Szintaxis: Azt is meghatározhatjuk.) VALUES (value1. INSERT INTO ugyanaz. vagy nem ugyanabban a sorrendben akarjuk az értékeket felsorolni. kötelezően hozzá kell adni a NOT NULL beállítást a mezőhöz.

$con)) { die('Error: ' . mysql_error()).'$_POST[age]')". } echo "1 record added". $sql="INSERT INTO person (FirstName. az adatok elküldésre kerülnek az insert. Az insert."abc123"). és az új adat beszúrásra kerül az adatbázis táblába. mysql_error()).php oldal kódja a következő: <?php $con = mysql_connect("localhost".PHP Íme a HTML űrlap: <html> <body> <form action="insert. Ellenőrzés nélkül soha nem szabad az adatokat felhasználnunk! 9. Age) VALUES ('$_POST[firstname]'. mysql_error()). if (!$con) { die('Could not connect: ' .php" method="post"> Firstname: <input type="text" name="firstname" /> Lastname: <input type="text" name="lastname" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body> </html> 191.3. Alapvető (nem teljes) szintaxis: SELECT column_name(s) FROM table_name WHERE conditions Ahhoz.5 Lekérdezés A SELECT parancs adatok kiválasztására szolgál egy adatbázisból. } . if (!$con) { die('Could not connect: ' . if (!mysql_query($sql. $con)."peter"."abc123"). oldal Amikor egy felhasználó az Elküld gombra kattint a HTML űrlapon. mysql_close($con) ?> Megjegyzés: A példa nem foglalkozik a biztonsági kérdésekkel. Az alábbi példa kiválasztja az összes adatot. a mysql_query() függvényt kell meghívni. LastName. a mysql_query() függvény végrehajtja az INSERT INTO parancsot. Az insert.9.php fájlnak.php fájl egy adatbázishoz kapcsolódik. mely a Person táblában van tárolva (A * karakter kiválasztja az összes adatot a táblában): <?php $con = mysql_connect("localhost".'$_POST[lastname]'."peter". } mysql_select_db("my_db". hogy a PHP végrehajthassa a fenti parancsokat.

$row['LastName']. Megjegyzés: a mysql_fetch_array függvény false értéket ad. Minden későbbi meghívás a mysql_fetch_array-ra a következő sorral tér vissza az adathalmazból. } mysql_close($con). Ahhoz. "</td>". mysql_close($con). A példánkban a $row['FirstName'] helyett $row[1]-et is írhattunk volna. Ezért is alkalmazható ilyen egyszerűen egy while ciklusban. mysql_error()). verzió) mysql_select_db("my_db". echo " <td>" . "</td>".6. ha már nincs több rekord. $con). a $row PHP változót használjuk ($row['FirstName'] és $row['LastName'])."abc123"). A fenti kód kimenete a következő lesz: Peter Griffin Glenn Quagmire Eredmények ábrázolása HTML Táblában A következő példa kiválasztja ugyanazokat az adatokat. echo " <td>" ."peter". while($row = mysql_fetch_array($result)) { echo "<tr>".} mysql_select_db("my_db". $con). Ezzel az erőforrással érhetőek el a lekérdezés eredményeként kapott rekordok. $result = mysql_query("SELECT * FROM person"). " " . $row['LastName'] . while($row = mysql_fetch_array($result)) { echo $row['FirstName'] . mint a fenti példa. echo "<br />". hogy kiírjuk az összes sort. ?> A fenti kód kimenete a következő lesz: Firstname Glenn Lastname Quagmire . ?> A mysql_query függvény által visszaadott erőforrást a $result változóban tároljuk. echo "</tr>".192. A következő példában a mysql_fetch_array függvényt használjuk. hogy az első sort megkapjuk tömbként az adathalmazból. $row['FirstName'] . } echo "</table>". if (!$con) { die('Could not connect: ' . A mysql_fetch_array függvény a rekord mezőit asszociatív indexekkel és sorszámokkal is elérhetővé teszi. oldal Web programozás (0. echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> </tr>". $result = mysql_query("SELECT * FROM person"). de az eredményeket HTML táblában fogja ábrázolni: <?php $con = mysql_connect("localhost".

ami valamilyen feltételeknek megfelel. mint a where.6 A WHERE záradék Ha olyan adatokat szeretnénk kiválasztani. $con). akkor a SELECT-hez hozzá kell adnunk egy WHERE záradékot. ahol FirstName=’Peter’: <?php $con = mysql_connect("localhost". mysql_error()). Tehát a WHERE ugyanaz."abc123"). } ?> Eredmény: Peter Griffin . " " . while($row = mysql_fetch_array($result)) { echo $row['FirstName'] . vagy egyenlő Kisebb. } mysql_select_db("my_db". Az SQL parancs PHP-ben való futtatásához a mysql_query függvényt kell használnunk. oldal 9. echo "<br />".3. Szintaxis: SELECT column FROM table WHERE condition(s) A következő operátorok használhatók a WHERE-rel: Operátor = != > < >= <= BETWEEN LIKE Leírás Egyenlő Nem egyenlő Nagyobb Kisebb Nagyobb. vagy egyenlő Tartományba esés Mintával való egyezés Megjegyzés: Az SQL kifejezések nem tesznek különbséget kis."peter". if (!$con) { die('Could not connect: ' . $result = mysql_query("SELECT * FROM person WHERE FirstName='Peter'").9. A következő példa kiválasztja az összes sort a Person táblából.és nagybetűk között.PHP Peter Griffin 193. $row['LastName'].

column_name2 9. Tehát az ORDER BY ugyanaz. Ilyenkor a második (és az esetleges további) oszlopot csak akkor vesszük figyelembe. 9 után 1 és „p” után „a”): SELECT column_name(s) FROM table_name ORDER BY column_name DESC Rendezés két vagy több oszlop alapján A rendezés lehetséges egynél több oszlop alapján is. $con). ?> Eredmény: Glenn Quagmire 33 Peter Griffin 35 Rendezés növekvő és csökkenő sorrendben Ha az ORDER BY kulcsszót használjuk. } mysql_close($con). mysql_error()). echo " " .7 Az ORDER BY kulcsszó SELECT column_name(s) FROM table_name ORDER BY column_name Az ORDER BY kulcsszó a lekérdezett adatok rendezésére szolgál.194. $row['LastName']. echo " " . Szintaxis: .és nagybetűk között. if (!$con) { die('Could not connect: ' . A következő példa az eredményt rendezi az Age mező szerint: <?php $con = mysql_connect("localhost".8 Adatok módosítása Az UPDATE utasítás az adatok módosítására szolgál az adatbázis táblában. while($row = mysql_fetch_array($result)) { echo $row['FirstName']."abc123").3. ha az első azonos: SELECT column_name(s) FROM table_name ORDER BY column_name1. $result = mysql_query("SELECT * FROM person ORDER BY age"). mint az order by. $row['Age']. verzió) 9."peter". a rendezés alapértelmezetten növekvő (pl. oldal Web programozás (0. } mysql_select_db("my_db".3. 1 után 9 és „a” után „p”). echo "<br />".6. A csökkenő sorrendbe való rendezéshez használjuk a DESC szót (pl. Szintaxis: Megjegyzés: Az SQL kifejezések nem tesznek különbséget a kis.

9.3. } mysql_select_db("my_db". } . oldal Megjegyzés: Az SQL utasításoknál nem számít a kis és nagy betű. mysql_close($con). A fenti példa PHP szkriptből való végrehajtására a mysql_query függvényt használhatjuk.és nagybetűket. Az alábbi kódrészlet töröl minden olyan sort a táblából. mint az update."abc123"). ?> A feltöltés után a Person tábla kinézete ilyen lesz: FirstName Peter Glenn LastName Griffin Quagmire Age 36 33 Megjegyzés: a tábla többi rekordját nem akartuk megváltoztatni. Végzetes következménye lenne.9 Adatok törlése az adatbázisból A DELETE FROM kifejezés használatos sorok törlésére az adatbázis egy adott táblájából. mysql_query("UPDATE Person SET Age = '36' WHERE FirstName = 'Peter' AND LastName = 'Griffin'").9.PHP UPDATE table_name SET oszlop_nev = uj_ertek WHERE oszlop_nev = valamilyen_ertek 195. UPDATE ugyanaz."abc123"). Az előbbi utasítássorozat lefordítására PHP-ben a mysql_query függvényt kell használnunk. if (!$con){ die('Could not connect: ' ."peter". mysql_error()). $con). ahol a LastName mező értéke Griffin. ebből következően a DELETE FROM és delete from kifejezések egyenértékűek. Példa A következő példa feltölt pár adatot a Person táblába: <?php $con = mysql_connect("localhost". mysql_error()). if (!$con) { die('Could not connect: ' . Szintaxis: DELETE FROM table_name WHERE column_name = some_value Megjegyzés: az SQL nyelv nem különbözteti meg a kis. <?php $con = mysql_connect("localhost"."peter". ha a where záradékot lefelejtenénk.

és a kurzor típusa. 1. $rs=odbc_exec($conn. $con). Kapcsolódás ODBC adatforráshoz ODBC adatforráshoz az odbc_connect() függvény segítségével csatlakozhatunk. 7.$sql). Az alábbi kódrészlet egy northwind nevű DSN-hez kapcsolódik. $conn=odbc_connect('northwind'. verzió) mysql_select_db("my_db". ahol a weboldal található. . 6. A függvény négy paramétert vár: adatforrás neve. felhasználónév és jelszó nélkül. valamint végrehajt egy lekérdezést. magunk is végrehajthatjuk azokat. akkor a gép adminisztrátorát kell megkérni. Válasszuk a Rendszer DSN fület. SQL utasítást az odbc_exec() függvénnyel hajthatunk végre. hogy készítse el a DSN-t. 4. A következő ablakban válasszuk a Kiválaszt gombot az adatbázis megadásához. 3. jelszó. ?> A végrehajtás után a tábla tartalma: FirstName Glenn LastName Quagmire Age 33 9.3. Adjuk meg az adatforrás nevét. A vezérlőpultban nyissuk meg a Felügyeleti eszközökön belül található ODBC adatforrásokat.''. Az ok gombbal zárjuk le a műveletet. Az ODBC egy olyan API. Amennyiben a saját számítógépünkön futtatjuk a webszervert.''). ha van megjeleníthető sor. Visszatérési értéke true. A fenti beállításokat azon a számítógépen kell elvégezni. melynek segítségével sokféle adatforráshoz (pl MS Access adatbázis) csatlakozhatunk.196.10 ODBC kapcsolat létesítése Megjegyzés: ODBC kapcsolat csak Windows operációs rendszer alatt használható. Ez utóbbi paraméter elhagyható. 5. egyébként false. $sql="SELECT * FROM customers". Rekordok kiolvasása Az odbc_fetch_row() függvény használatos rekordok kiolvasására egy eredménytáblából. Kattintsunk a Hozzáadásra. 2. felhasználó név. mysql_query("DELETE FROM Person WHERE LastName='Griffin'").6. mysql_close($con). azonban ha egy távoli gép a kiszolgáló. MS Access adatbázishoz az alábbi módon hozhatunk létre kapcsolatot. oldal Web programozás (0. Válasszuk ki a Microsoft Access driver-t.

majd kiíratjuk egy tábláját egy HTML táblázatban. echo "<th>Contactname</th></tr>". <html> <body> <?php $conn=odbc_connect('northwind'. } echo "<table><tr>". $rs=odbc_exec($conn."CompanyName"). odbc_fetch_row($rs) Mezők kiolvasása Egy rekord adott mezőjét az odbc_result() függvény segítségével olvashatjuk ki. while (odbc_fetch_row($rs)) { $compname=odbc_result($rs. de ez elhagyható.PHP 197. a második kért sor száma. echo "<td>$conname</td></tr>". ODBC kapcsolat lezárása ODBC kapcsolat lezárására az odbc_close() függvény használatos."CompanyName"). oldal Két paramétert vár. odbc_close($conn).1).9. A következő sor pedig a CompanyName nevű mező értékét: $compname=odbc_result($rs. echo "</table>". Paraméterei az eredménytábla azonosítója valamint a keresett mező neve vagy sorszáma."ContactName"). if (!$conn) { exit("Connection Failed: " .'').''. echo "<th>Companyname</th>".$sql). ?> </body> </html> . az egyik az eredménytábla azonosítója. Az alábbi sor a rekord első mezőjének tartalmát adja meg: $compname=odbc_result($rs. if (!$rs) { exit("Error in SQL"). } odbc_close($conn). } $sql="SELECT * FROM customers". Egy ODBC példa Az alábbi példában kapcsolódunk egy ODBC adatforráshoz. $conname=odbc_result($rs. echo "<tr><td>$compname</td>". $conn).

és így a szabványos DOM eszközeivel könnyedén hozzá tudunk férni az elemeihez. 9. ● 9.4.4. szint: XML dokumentum 2. Nézzük a következő XML dokumentum részletet: <?xml version="1.0" encoding="ISO-8859-1"?> <from>Jani</from> Az XML DOM megnézi XML alatti rész fa struktúráját: 1.4. hív egy függvényt és lekezeli azt. Esemény alapú elemzők: Megnézi az XML dokumentum eseménysorozatát. verzió) 9. Mikor különös esemény előfordulást talál.2 XML DOM A W3C DOM egy alap objektumhalmazt biztosít a HTML és XML dokumentumoknak és standard interfészt a hozzáféréshez és módisításhoz.6. Core(mag)) és különböző szintek-ből (DOM Szintek 1/2/3): ● Core DOM – standard objektumhalmazt definiál bármilyen strukturális dokumentumhoz XML DOM .standard objektumhalmazt definiál XML dokumentumhoz HTML DOM . olvasni és módosítani az XML állományainknak.198. fejleszteni. Tudnunk kell létrehozni. Két alap típusuk van az XML elemzőknek: ● A fa bázisú elemzők: Ez az elemző átalakítja az XML dokumentumotfa struktúrájuvá. szint: szöveg összetevők: Jani . Ebben a fejezetben ezek használatával fogunk megismerkedni. HTML. XML kezelés A PHP beépítve tartalmaz több XML kezelési könyvtárat is.standard objektumhalmazt definiál HTML dokumentumhoz ● ● XML elemző XML dokumentumot olvasni. Elemzi a teljes dokumentumot és bejárást biztosít a fa elemeihez. oldal Web programozás (0. készíteni vagy módosítani akkor neked szükséged lesz egy XML elemzőre (parser). ● A DOM elemző fa bázisú. A W3C DOM több különböző részből áll (XML. szint: gyökér tag: from 3. Az eseménybázisú értelmezők az XML dokumentumot események sorozataként tekintik.1 Expat XML elemező Az XML állományok kezelésének több fontos része van. Az XML elemzőknek két fő fajtájuk van: ● A fa megközelítésű értelmezők az XML állományt fává transzformálják.

"<br />". ?> A fenti példa kimenete: Tove Jani Reminder Don't forget me this weekend! A példaprogramunk készít egy DOM dokumentum-objektumot. Példa XML fájl <?xml version="1. foreach ($x->childNodes AS $item) { print $item->nodeName . $xmlDoc->load("note.xml"). . töltsük be az XML-t és a kimenetet.xml-ből. $x = $xmlDoc->documentElement. A saveXML() függvény átalakítja a belső XML-dokumentumot sztringgé. } ?> A példa kimenete: #text = to = Tove #text = from = Jani #text = heading = Reminder #text = body = Don't forget me this weekend! #text = A fölül lévő példában az összes tagnál üres a text elem. Példa: <?php $xmlDoc = new DOMDocument(). Dokumentum bejárása <?php $xmlDoc = new DOMDocument().PHP 199. és betölti az XML-t a note. oldal Installálás A DOM XML elemző függvényei a PHP mag részei. " = " . $xmlDoc->load("note.0" encoding="ISO-8859-1"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> XML betöltése és kiírása Ha inicializálni akarjuk az XML elemzőt. print $xmlDoc->saveXML().9. $item->nodeValue .xml"). Nem kell installálni ha használni szeretnénk ezeket a függvényeket.

gyakran tartalmaz üres helyeket a csomópontok között. Listázzuk ki a gyermek elemek nevét és az adatát Példa: $xml = simplexml_load_file("test. Az XML DOM elemző általános elemeknek kezeli. és ha nem vagyunk tudatában akkor hibát fog okozni. "<br />". tulajdonságok szerkesztése ● ● A SimpleXML gyors és könnyen használható például a következő egyszerű esetekben: ● ● ● Bonyolultabb esetekben (pl. mint egy elemet tartalmaz.xml"). $child . verzió) Mikor az XML generálódik. ● Az elemeket SimpleXMLElement objektumokká alakítja. 1.6. 9. Ha több. echo $xml->getName() . A SimpleXML használata Tegyük fel. } A fenti kód eredménye lesz: note to: Tove from: Jani heading: Reminder body: Don't forget me this weekend! .4. XML fájlok olvasása Adatok kiolvasása az XML fájlokból Elemek.3 SimpleXML A SimpleXML a PHP 5-ös verziója óta használható. Töltjük be az XML fájlt 2. hogy használni lehessen ezeket a funkciókat. ": " . A SimpleXML az XML dokumentumot egy objektummá alakítja át. hogy információt tudjunk kinyerni XML dokumentumból. hogy ki akarjuk nyerni az alábbi adatokat a fenti XML fájlból. akkor tömbben fognak tárolódni. Egyszerű megoldás arra.200. Az elemek adatát szövegként kaphatjuk meg. foreach($xml->children() as $child) { echo $child->getName() . oldal Web programozás (0. Installálás Nem szükséges installáció ahhoz. névterek alkalmazása) jobb az Expat Parsert vagy az XML DOM-ot használni. Nézzük meg a gyökérelem nevét 3. "<br />". A tulajdonságokat asszociatív tömbben érhetjük el.

A felhasználói jogosultságkezelés egyik része a felhasználó azonosítása (legegyszerűbben egy név-jelszó párossal).evolt.n. Adatbázis A felhasználók adatainak tárolásához (legegyszerűbb esetben) egyetlen táblára van szükségünk.PHP 201.5. Egy sokkal komolyabb. A regisztrált látogatók számára több lehetőséget szoktunk nyújtani. (A jelszavakat nem szokás visszaadni. 9. A feladat másik fele a felhasználók jogosultságainak kezelése. mint a névtelen látogatók számára. hogy az adminisztrációs feladatokat ellátó személy (ú.org/PHP-Login-System-with-Admin-Features . Néha a felhasználók jogosultságai feladatokhoz. amit több esetben is include-olni fogunk: <? $dbhost $dbuser $dbpass $dbname = = = = "localhost". A regisztrációs oldalt fel kell arra készíteni.segedletek.html http://www. Ennek szerkezete a következő SQL paranccsal kialakítható: CREATE TABLE users( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY. oldal 9.9. Itt most ezzel a részfeladattal fogunk foglalkozni.) Az ilyen típusú feladatok megoldásához 72 73 http://www. hogy a lehetséges hibák miatt az adatokat a regisztráló megfelelő hibaüzenet kíséretében visszakapja. nick VARCHAR(30). és tudja azokat korrigálni. azokat ismét ki kell tölteni. Esettanulmányok Ebben a fejezetben néhány összetettebb alkalmazási példát fogunk megvizsgálni. felhasználói jogosultságokat is kezelő megoldás található PHP Login System with Admin Features73 címmel jpmaster77 tollából. jelszo VARCHAR(32).hu/segedletek/php/php_p_mysql_alapu_belepteto_rendszer. Az itt következő nagyon egyszerű megoldás a segedletek.1 Beléptető-rendszer A felhasználó azonosítása a legtöbb esetben szükséges szolgáltatás. csoportokba tartozáshoz is köthető. Az adatbázis-kapcsolat kiépítéséhez szükséges információk a config. csupán egy kiinduló állapotnak tekintendő. ?> Regisztráció A felhasználók a regisztrációs oldalon tudják magukat regisztráltatni.5. "***". "root".php állományba kerülnek.hu oldalon bemutatott Php + mysql alapú beléptető rendszer című cikk72 alapján készült. A megoldás nem teljes. adminisztrátor) számára a megfelelő lehetőségeket biztosítsuk. ebben az önálló változatban nem lesz szerepe. Az id mező igazából csak a továbbfejlesztéshez szükséges. "test". Szinte minden esetben szükség van arra. email VARCHAR(60) ).

md5($_POST['pass1']).'".w3.nick."'. oldal Web programozás (0.202.php".1//EN" "http://www. A register.$_POST['email']. Ha sikeres volt a regisztráció. egyszerűen jelezzük a regisztrált felhasználónak: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. akkor azok be is kerülnek az adatbázisba: if ($reg_check_result === true) { $sql = "INSERT INTO belepteto_users (id. Az ellenőrzést a reg_check függvény végzi. "VALUES(''. $reg_check_result = reg_check($_POST).email) " .org/TR/xhtml11/DTD/xhtml11. } } ?> Ez után következik az oldal HTML kódja."')". (Később következik.").php tartalma: <? if (isset($_POST['regisztracio'])) { include "config.php">Kezdő oldal</a></p> <? } else { ?> Ha nem volt sikeres."'. verzió) egy olyan forrásállományt szokás írni.jelszo. vagy még ez az oldal első letöltése.php".6.$_POST['nick']. $query = mysql_query($sql) or die ("Valami baj van az adatbázissal. include "reg_check. közbe ékelve a megfelelő PHP betétekkel.'".dtd"> <html xmlns="http://www. amelyik először az elküldött adatokat ellenőrzi – ha voltak egyáltalán.) Ha jók az adatok. akkor következik az űrlap kódja: .w3.'" .org/1999/xhtml" xml:lang="hu"> <head> <title>Regisztráció</title> </head> <body> <h1>Regisztráció</h1> <? if ($reg_check_result === true) { ?> <p>Sikeres regisztráció!</p> <p><a href="index.

hogy akár 5-6-szor letöltse ugyanazt az oldalt.php kódját. rákényszerítve ezzel a felhasználót. JavaScript ellenőrizhetné a feltételek teljesülését. pl. A hibaüzeneteket a reg_check függvény állította elő. Nézzük a reg_chech. A hibákat egy tömbben gyűjtjük. A név ellenőrzésekor a foglaltságra is figyelni kell. A megoldás teljesebb lenne kliens oldali ellenőrzéssel. hogy a POST adatok közül visszaküldjük a korábban kitöltött nevet és e-mail jelszót. hogy több mező hibáját is tudja egyszerre jelezni. Az ellenőrzés során jó néhány hibaesetre fel kell készülnünk.PHP 203. amelyik a hibaüzeneteket egyesével adja. Megjegyzés: A felhasználó kényelme érdekében semmiképpen nem érdemes olyan megoldást alkalmazni.9. oldal <form method="post" action="<?= $_SERVER['PHP_SELF']?>"> <table> <tr> <td>Nick:<br /> <small>legalább 4 betű</small></td> <td><input type="text" name="nick" <? if ($_POST['nick']) { ?> value="<?= $_POST['nick'] ?>"<? } ?> /></td> <td><?= $reg_check_result['nick'] ?></td> </tr> <tr> <td>E-mail cím:<br /> <small>kötelező</small></td> <td><input type="text" name="email" <? if ($_POST['email']) { ?> value="<?= $_POST['email'] ? >"<? } ?> /></td> <td><?= $reg_check_result['email'] ?></td> </tr> <tr> <td>Jelszó:<br /> <small>legalább 5 betű</small></td> <td><input type="password" name="pass1" /></td> <td><?= $reg_check_result['pass1'] ?></td> </tr> <tr> <td>Jelszó mégegyszer:</td> <td><input type="password" name="pass2" /></td> <td></td> </tr> <tr> <td colspan="2"><input type="submit" name="regisztracio" value="regisztrálok" /> </td> </tr> </table> </form> <? } ?> </body> </html> Érdemes megfigyelni. Érdekessége. . a felhasználónév foglaltságát akár AJAX-xal is.

6}$'."). illetve a _ és .és nagybetűi. verzió) <? function reg_check($adatok){ $hibak = array().php". '"'. $query = mysql_query($sql) or die ("Valami baj van az adatbázissal.$adatok['email']))) { $hibak['email'] = 'Hibás e .)+[a-z]{2. else return true. mysql_select_db($dbname). } ?> A kezdőoldal (index. ' WHERE nick="' .$dbuser. } if ($hibak) return $hibak. $adatok['nick'].mail cím'. if(strlen($adatok['nick']) < 4) { $hibak['nick'] = 'A nick legalább 4 betűs legyen'. } } Ehhez képest a többi adat ellenőrzése nem túl bonyolult: if($adatok['email'] == '') { $hibak['email'] = 'Az e-mail cím kitöltése kötelező'. $sql = 'SELECT * FROM belepteto_users' .php) csupán a bejelentkezést és a védett tartalom elérését teszi lehetővé: . if (mysql_num_rows($query) !== 0) { $hibak['nick'] = 'A nick már foglalt'.6. $adatok['nick' ])) { $hibak['nick'] = 'A nickben csak a magyar ábécé kis . } else if ($adatok['email'] == (!eregi('^[_\.204. mysql_connect($dbhost. a számok. } else if ($adatok['pass1'] == '' || $adatok['pass2']==''){ $hibak['pass1'] = 'A jelszavak kitöltése kötelező'. } if (strlen($adatok['pass1']) < 5) { $hibak['pass1'] = 'A jelszó legalább 5 betűs legyen'. } if ($adatok['pass1'] !== $adatok['pass2']) { $hibak['pass1'] = 'A két jelszó nem egyezik'. oldal Web programozás (0. } else if (!ereg('^[a-zA-Z0-9\-\_áéíóöüóűÁÉÍÓÖÜŐŰ]+$'.jelek engedélyezettek'. } else { include "config.0-9a-z-]+@([0-9az][0-9a-z-]+\.$dbpass).

PHP <? 205.php">Védett rész</a></p> </body> </html> <? ob_end_flush().$_SERVER['PHP_SELF']).$dbuser.dtd"> <html xmlns="http://www. include "config. mysql_connect($dbhost. ?> <p>Ez itt a mindenki számára elérhető rész </p> <p><a href="vedett. $pass = md5($_POST['jelszo']).php". ob_start().w3. "WHERE (nick='". ?> A login. if (mysql_num_rows($query) !== 0) { $_SESSION['nick'] = addslashes($_POST['nev']). } else { ?> <p>Hibás nick/jelszó</p> <? } } ?> .$dbpass). $query = mysql_query($sql). " AND jelszo='".9.php csak akkor kér azonosítási adatokat. ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ha a belépést jelző munkamenet-változónak nincs értéke."'" .1//EN" "http://www.org/TR/xhtml11/DTD/xhtml11. oldal session_start().org/1999/xhtml" xml:lang="hu"> <head> <title>Beléptető rendszer</title> </head> <body> <h1>Beléptető rendszer</h1> <?php include "login.$nick. Ha már újbóli betöltés. header("Location: ".$pass. $sql = "SELECT * FROM belepteto_users " . és POST adatok feldolgozása szükséges.w3.php". $_SESSION['belepett'] = true."')". mysql_select_db($dbname). akkor azt is megtesszük: <? if ($_SESSION['belepett']!== true) { if (isset($_POST['login'])) { $nick = addslashes($_POST['nev']).

. sikerült belépned. amit csak a jogosult felhasználók használhatnak. verzió) <form action="<?= $_SERVER['PHP_SELF'].php alapján: <? session_start(). ob_start(). unset($_SESSION['belepett']).w3..?>" method="post"> <table> <tr> <td>nick:</td> <td><input type="text" name="nev" /></td> </tr><tr> <td>jelszó:</td> <td><input type="password" name="jelszo" /></td> </tr><tr> <td colspan="2" align="center"><input type="submit" name="login" value="Belépés" /></td> </tr> </table> </form> <p><a href="register. gratulálok</p> <p><a href="index.org/TR/xhtml11/DTD/xhtml11.1//EN" "http://www.dtd"> <html xmlns="http://www. ha ezt olvasod.org/1999/xhtml" xml:lang="hu"> <head> <title>Védett tartalom</title> </head> <body> <? if($_SESSION['belepett'] == true) { ?> <p>Védett tartalom.6. ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.php">kezdő oldal</a></p> <? } else { ?> <p>Csak szeretnéd.php"). A $_SESSION['belepett'] változó vizsgálatával állapítható meg. oldal Web programozás (0.206.php">kijelentkezés</a></p> <? } ?> A vedett. unset($_SESSION['nick']). ?> .w3. :)</p> <? } ?> </body> </html> <? ob_end_flush(). header("location: index.php oldal lehet a sémája minden olyan oldanak. hogy belépett felhasználó szeretné-e letölteni az oldalt. <? session_start().php">regisztráció</a></p> <? } else { ?> <p>Bejelentkezve: <?= $_SESSION['nick'] ?></p> <p><a href="logout. ?> Végül a kilépés lehetőségét nézzük meg a logout.

2 Könyvtári kölcsönző rendszer A Pannon Egyetem Információs Rendszerek Tanszékén található74 egy nagyon tömör PHP-MySQL bevezetés. A tag kereshet a könyvek között (legalább a címtöredék alapján).net/manual 74 http://www.6. 9. Visszavitelkor leveszi a kölcsönzött könyvek listájáról az adott tételt. További források ● PHP kézikönyv http://hu.irt.vein. nagyrészt egy könyvtári kölcsönző rendszer fejlesztésének példáján bemutatva.PHP 207.9. oldal 9.hu/~bvegso/php_doc/ . Feladat Egy könyvtári nyilvántartó rendszer létrehozása. Először is nézzük meg az alkalmazás adatbázis-tervét: A fenti honlapról letölthető kész alkalmazás navigációs és szerkezeti vázlata: A nyilak az egyes PHP oldalak közötti átmeneteket jelképezik: vékonnyal a felhasználói művelet. vastaggal a két oldal között átadott információ látható. ami egy tag-szám alapján azonosítja a könyvtári tagot. majd kölcsönözheti azokat.php.5. majd megmutatja a kölcsönzéseit. A példa alkalmazásból itt csak néhány tervezési lépést említünk meg.

A feladat elkészítése után érdemes megnézni két megoldást.6. (Az adatbázis feltöltéséhez nem kell programot írni.7. amelyek a fenti célok mellett a validálást is megvalósítják: ● ● Building a PHP 5 Form Processor: Coding the Form Generator Module75 Clonefish76 75 http://www. A megvalósításnál a fő szempont a modularitás.) A legenerált űrlapot HTML fájlként mentsük. Schlossnagle: PHP fejlesztés felsőfokon Kiskapu Kiadó 9.208. az űrlap action paramétere. Az űrlapot és a mezőket beágyazott CSS segítségével formázzuk. sorszám (hányadikként jelenjen meg) mező leírása (az űrlap elem előtt megjelenő szöveg) mezőnév (az elem name paramétere) mező hossza (szöveges mező esetén) – hosszú szöveg esetén sorok és oszlopok száma mező típusa Az űrlapon megjelenő mezők adatai: ● ● ● ● ● A mező típusa szöveges (text). az űrlapon megjelenő mezők adatai. oldal ● Web programozás (0. Írjunk olyan űrlap generáló osztályt.com/page/index . hosszú szöveg (textarea) vagy checkbox lehet.com/c/a/PHP/Building-a-PHP-5-Form-Processor-Coding-the-Form-GeneratorModule/ 76 http://www. A feladat egy dinamikus űrlap generáló osztály elkészítése. objektum orientál felépítés és paraméterezhetőség. Az űrlap paraméterei: ● ● ● ● ● ● az űrlap címe. Az űrlap legeneráláshoz szükséges adatokat adatbázisban tároljuk. működő HTML űrlapot. ami megadott bemenő paraméterek alapján legenerál egy komplett.phpformclass. a submit gomb felirata.devshed. Feladat A következő feladat egy elég komplex összefoglalását adja a webfejlesztés eddigi témáinak. az űrlap metódusa (get vagy post). verzió) George S. az űrlap bevezető szövege.

php').phppatterns. (A Front Controller nagyon közel áll az MVC minta Controller eleméhez. a következő: <?php // index. case 'delete': include ('actions/delete. break. Mi a tervezési minta? Ha egy feladat újra előkerül a fejlesztés folyamán. case 'post': include ('actions/post. E fejezetben néhány alapvetőbb tervezési mintát fogunk megvizsgálni.) Statikus példa A statikus megoldás lehet pl. fájlrendszer.1.php').zend.com/ http://devzone. break.Tervezési minták A webfejlesztés során használt tervezési minták (design patterns) nagyban segíthetik a munkánkat. jobban újrahasznosítható alkalmazásokat készíthetünk. A szerző véleménye szerint az egyik legjobb oldal a phpPatterns77 oldala.php'). Ezen kívül a Zend PHPPatterns: Instructions78 cikke is nagyon hasznos. Front Controller A Front Controller minta a weboldalhoz érkezett kérés feldolgozásához és a kérések kiszolgálásának vezérléséhez használt módszer.com/node/view/id/3 .php'). mint csupán a saját ötleteinkre és tapasztalatainkra támaszkodva. adatbázis. A weben igen sok (angol nyelvű) forrás található a témakörben.Tervezési minták 209. akkor valószínűleg a megoldás hasonló lesz a korábbihoz. konfigurációs adatok) deríti ki az érvényes kérések körét. hanem valamely más forrásból (pl. break. 10. A tervezési minták olyan objektumközpontú megoldásokat jelentenek. break. amelyek már bizonyítottak a gyakorlatban.php switch ( @$_GET['action'] ) { case 'edit': include ('actions/edit. } ?> Dinamikus példa A dinamikus megoldás nem igényli a lehetőségek (az előző példában akciók) felsorolását.10. hiszen mások bevált ötletei alapján valószínűleg gyorsabb és hatékonyabb alkalmazást készíthetünk. Ezek felhasználása rugalmasabban módosítható és könnyebben. oldal 10. A következő dinamikus példa a PHP-Nuke megoldása: 77 78 http://www. case 'default': include ('actions/view.

uk http://www. } . } else { die ("Sorry. dirname(__FILE__) . } Objektumorientált példa Chris Corbyn79 megoldása80 egy egyszerű vendégkönyv alkalmazás vázlatát mutatja be.co.php oldal kapja meg a vezérlést. hogy miért nem a konstruktort használjuk a példányosításhoz: <?php class FrontController { public static function createInstance() { if (!defined("PAGE_DIR")) { exit("Critical error: Cannot proceed without PAGE_DIR.. Először az index."). majd próbáljuk betölteni: 79 80 http://www.. Az osztály lényege a következő dispatch metódusban van.php-t vizsgálva láthatjuk. verzió) if (!isset($file)) { $file="index".").210.php?page=guestbook&action=index http://localhost/index.uk/a-lightweight-and-flexible-front-controller-for-php-5 . Először nézzük meg. "/pages"). FrontController::createInstance()->dispatch(). if (file_exists($modpath)) { include($modpath).php". a második egy új bejegyzés létrehozása esetén lesz használatos. Az URL page és action értékeit kinyerjük.w3style.6.. such file doesn't exist. } A példányosítás csak definiált PAGE_DIR esetén hajtódik végre. return $instance. require_once "FrontController. milyen URL-eket kellene feldolgoznunk: http://localhost/index.w3style.= "modules/$name/$file. Összeállítjuk az osztályt tartalmazó PHP oldal nevét ($class). $action = !empty($_GET["action"]) ? $_GET["action"] : "index".. oldal Web programozás (0. A FrontController osztály betöltésén túl a példányosítás (createInstance) és az oldal feldolgozása (dispatch) is megtörténik: <?php define("PAGE_DIR".php?page=guestboook&action=createPost Az első kérés a bejegyzések listázását.php". } $instance = new self(). ?> A FrontController. illetve az alapértelmezett értéket töltjük be: public function dispatch() { $page = !empty($_GET["page"]) ? $_GET["page"] : "home".co. $modpath .

nem túl praktikus megközelítést: 81 A példa a http://www. if (!method_exists($controller.Tervezési minták 211.php". ". exit(0). $page . az öröklődés miatt pedig a stratégia könnyen lecserélhető egy másikra. Nézzünk egy hagyományos.2. Validátor példa A fejezet példája81 segítségével az űrlap által küldött adatok érvényességének ellenőrzését (validálását) fogjuk elvégezni. } $controller->$actionMethod(). és – ellenőrzötten – meghívja az akciót végrehajtó metódust: $actionMethod = "do" . oldal $class = ucfirst($page) . 10. "/" . } require_once $file. Végül betölti az oldalnak megfelelő osztályt. ucfirst($action). Az egységbezárás miatt az algoritmus jól elkülöníthető a kód más részeitől.10. példányosírja. } } Érdemes tovább nézni Chris Corbyn példáját. $actionMethod)) { exit("Page not found"). $class . "Actions".php fájlt tölti be. és meghívja a két példa metódusunkat: <?php class GuestbookActions { public function doIndex() { echo "Index action called…". if (!is_file($file)) { exit("Page not found").phppatterns.com/docs/design/strategy_pattern oldalról származik . } } A két korábbi példa URL-ünk esetén a pages/guestbook/GuestbookActions. $controller = new $class(). konplex MVC megoldáshoz közelít. $file = PAGE_DIR . Strategy A stratégia egy objektumba zárt algoritmus. "/" . } public function doCreatePost() { echo "CreatePost action called…".

Validator::Validator(). $this->validate(). class Validator { var $errorMsg. } } Látszik. } 82 A PHP 4-es verziója még nem ismeri az absztrakt osztály fogalmát . } function isValid () { if ( isset ($this->errorMsg) ) { return false. } else { return true..212. oldal Web programozás (0. function Validator () { $this->errorMsg=array(). verzió) if ( isset ($_POST['submit']) ) { if ( $_POST['user'] < '6' ) { echo ('Username is too short'). } } Jól látszik. } else if ( $_POST['fullmoon'] == true ) { // . function ValidateUser ($user) { $this->user=$user. } else if ( $_POST['pass'] != $conf ) { echo ('Passwords do not match'). A Validator (logikailag82) egy absztrakt osztály. Nézzük meg egy jobb megoldást. hogy az ellenőrzés során a hibák felismerése a hibaüzenetek megfogalmazását is jelenti. A következő osztály a felhasználónév érvényességét ellenőrzi: class ValidateUser extends Validator { var $user. a lényegi munka a leszármazottakban fog történni. } function validate() { } function setError ($msg) { $this->errorMsg[]=$msg. A hibák az $errorMsg tömbben gyűlnek. nehezen áttekinthető és módosítható. hogy a kód kissé zavaros. } } function getError () { return array_pop($this->errorMsg).6..

hogy ez a kód épít a PHP 4-es verziójának azon specialitására. } . } if (strlen($this->user) < 6 ) { $this->setError('Username is too short'). function ValidatePassword ($pass. (Ebben az esetben az osztály logikája nem is működne. } if (strlen($this->user) > 20 ) { $this->setError('Username is too long').$conf) { $this->pass=$pass.$this->pass )) { $this->setError( 'Password contains invalid characters'). $this->conf=$conf. var $conf. ami szerint az ősosztály konstruktorát nem hívja meg automatikusan a leszármazott konstruktora.Tervezési minták 213.10. } } } class ValidateEmail extends Validator { var $email. function ValidateEmail ($email){ $this->email=$email. oldal function validate() { if (!preg_match('/^[a-zA-Z0-9_]+$/'.) A jelszó és az e-mail cím ellenőrzése hasonló logikára épül: class ValidatePassword extends Validator { var $pass. } function validate() { if ($this->pass!=$this->conf) { $this->setError('Passwords do not match').$this->user )) { $this->setError( 'Username contains invalid characters'). } if (!preg_match('/^[a-zA-Z0-9_]+$/'. } if (strlen($this->pass) > 20 ) { $this->setError('Password is too long'). } } } Érdemes megfigyelni. } if (strlen($this->pass) < 6 ) { $this->setError('Password is too short'). Validator::Validator(). Validator::Validator().

if(!preg_match($pattern."</ul>"). } else { print ('<h2>Form Valid!</h2>'). } } else { ?> <h2>Create New Account</h2> <form action="<?php echo ($_SERVER['PHP_SELF']). Data Access Object Az adatbázis elérés megvalósítása nem triviális feladat.com/wiki/Strategy 10. ?>" method="post"> <p>Username: <input type="text" name="user"></p> <p>Password: <input type="password" name="pass"></p> <p>Confirm: <input type="password" name="conf"></p> <p>Email: <input type="text" name="email"></p> <p><input type="submit" name="register" value="Register"></p> </form> <?php } ?> Általános eseménynaplózás Nagyon szép példa található a Patterns For PHP oldalán: http://www. } } } if (isset($errorMsg)) { print ( "<p>There were errors:<ul>n".[a-zA-Z0-9_-]+)+/". Sokféle megoldás létezik.$_POST['conf']).$error. oldal Web programozás (0.patternsforphp. } } } Az ellenőrzés megvalósítása az osztályaink felhasználásával már egyszerű: <?php if ( $_POST['register'] ) { require_once('lib/Validator. verzió) function validate() { $pattern= "/^([a-zA-Z0-9])+([\. } if (strlen($this->email)>100){ $this->setError('Address is too long').a-zA-Z0-9_-])*@([a-zAZ0-9_-])+(\.php'). $v['e']=new ValidateEmail($_POST['email']).6.3. $v['u']=new ValidateUser($_POST['user']).="<li>". foreach($v as $validator) { if (!$validator->isValid()) { while ($error=$validator->getError()) { $errorMsg."</li>n".$this->email)){ $this->setError('Invalid email address').$errorMsg.214. ezért sokszor nem könnyű a választás sem. A DAO tervezési minta egy igen sokrétű megoldá- . $v['p']=new ValidatePassword($_POST['pass'].

Nézzük először az adatbázis-kapcsolat felépítéséért és az SQL parancsok futtatásáért felelős DataAccess osztályt: class DataAccess { var $db. } } Nézzük meg a névadó osztályt.$pass).mysql_query($sql.$db) { $this->db=mysql_pconnect($host. if (!empty($error)) return $error.10.$query) { $this->da=& $da. function DataAccessResult(& $da. mysql_select_db($db. else return false.MYSQL_ASSOC) ) return $row. $this->query=$query. A teljes példa megtalálható a phpPatterns oldalán83.$user. } } Érdemes megfigyelni. } function isError () { return mysql_error($this->db). } function isError () { $error=$this->da->isError(). amely a lekérdezések típusai között is különbséget tesz: 83 http://www. var $query.Tervezési minták 215. oldal sának csupán egy részével fogunk foglalkozni. else return false. } function rowCount () { return mysql_num_rows($this->query).com/docs/design/data_access_object_pattern_more_widgets . class DataAccessResult { var $da. A visszaadott objektumból kinyerhető a lekérdezés hibái vagy eredményei is. } function & fetch($sql) { return new DataAccessResult( $this. } function getRow () { if ( $row=mysql_fetch_array( $this->query. function DataAccess ($host. hogy SQL lekérdezés futtatása esetén DataAccessResult típusú objektumot fog kiszolgálni a fetch metódus.$user.$pass.phppatterns.$this->db)).$this->db).

} } } A DAO osztály leszármazottai képesek arra.216.6. if ($error=$result->isError()) { trigger_error($error). function Dao ( & $da ) { $this->da=$da. oldal class Dao { var $da. A tábla szerkezete: CREATE TABLE log ( id int(11) NOT NULL auto_increment. Példánk utolsó bemutatott osztálya (LogDAO) egy konkrét feladatot lát el: log információkat tartalmazó táblával tud kommunikálni. agent char(100) NOT NULL default ''. KEY id (id) ) TYPE=MyISAM. } Web programozás (0. } else { return true. date datetime default NULL. majd (mivel SELECT típusú lekérdezésre van szükség) az őse retrieve függvényét kéri a tényleges munkavégzésre. os char(50) NOT NULL default ''. . Például a teljes listázást (esetleg intervallum megadással) végző searchAll függvény a paraméterei alapján összeállítja az SQL parancsot. country char(50) NOT NULL default ''. } A további függvények a konkrét feladathoz szükséges lekérdezés-típusokat rejtik el a kód további részétől. if ($error=$result->isError()) { trigger_error($error). address char(100) NOT NULL default ''. wb char(50) NOT NULL default ''. } } function update ($sql) { $result=$this->da->fetch($sql). } else { return $result. PRIMARY KEY (id). return false. host char(100) NOT NULL default ''. provider char(100) NOT NULL default ''. verzió) function & retrieve ($sql) { $result=& $this->da->fetch($sql). hogy az egyes konkrét feladatok esetén a saját igényeiknek megfelelő adatbázis-eléréseket valósítsanak meg. A leszármazott először is az ős konstruktorát hívja: class LogDao extends Dao { function LogDao ( & $da ) { Dao::Dao($da). return false.

linkeket. és ha szükséges. if ( $start ) { $sql.10. Feladatunk egy felmérés eredményeinek megjelenítése táblázatban.Tervezési minták function & searchAll ($start=false. oldal Az áttekintett négy osztály közül az első kettő (DataAccess és DataAccessResult) tartalmazza az adatbázisszerver-típusából (jelen esetben MySQL) adódó specialitásokat. hogy éppen születésnapja van-e ennek a vevőnek. Az elsődleges cél az. vagy a nézetek megváltozását. A DAO osztály leszármazottai pedig a konkrét problémákra tudnak koncentrálni. A Model tudja. A phpPatterns eredeti példája teljes MVC integrációt is tartalmaz. hogy melyik vevő fogja kifizetni a számlát. majd az adatokat egy ciklussal kiírja egy táblázatba. Parancsokká és függvényhívásokká képezi le azokat. akkor létrehozunk egy másik fájlt. gombokat. azt is. A nézet feladata a felhasználói felület megjelenítése. kipróbált módszer arra. további érdekes megoldásokkal egy komplex honlap-motor fejlesztéséhez.$start. Ezek a parancsok fogják előidézni az adatok módosítását. vagy megismétlését. A módszer lényege az. ". szövegeket jelent.$rows=false) { $sql="SELECT * FROM log ORDER BY date DESC". Hagyományos módszerrel a PHP forrásunk tartalmaz egy SQL lekérdezést.=". 10.vezérlő) egy jól használható.=" LIMIT ". hogy ennek hatására mi is történjen. Például ha a felhasználó kiválasztja a menü egyik elemét. feladata értelmet adni a nyers adatoknak. ami szintén tartalmazni fogja az SQL kérést. azonban ha egy Java nyelvű alkalmazásról van szó. modell – nézet . Ez az egység felelős pl. táblázatokat. 84 Barkóczi Roland szakdolgozata (http://blog. Ezek az elemek megjelenhetnek egy szabványos HTML oldalon. hogy hogyan válasszuk szét a felhasználói felületet és az üzleti logikát. } 217. hogy a felhasználói felület megjelenítéséért felelős kódot teljesen elkülönítsük.aer. hogy a hagyományos eljárás alapú programok adatbevitel-adatfeldolgozás-eredmény megjelenítése feladatokat leképezzék a grafikus felhasználói felülettel rendelkező programokban: adatbevitel→ Controller (Vezérlő) → adatfeldologzás→ Model (Modell) → eredmény megjelenítése View (Nézet) A vezérlő dolgozza fel a felhasználói adatbevitelt.4. törlését. if ( $rows ) $sql. és az adatok megjelenítését. } return $this->retrieve($sql). A modell reprezentálja az üzleti logikát.hu/) alapján . akkor egy controller fogja meghatározni.$rows. Ez az űrlapokat. egy számla áfa tartalmának és végösszegének kiszámolásáért. de a további osztályoknak már ezzel nem kell foglalkozni. Vegyük egy konkrét gyakorlati PHP fejlesztői példát. akkor az AWT vagy a Swing könyvtárra épülő grafikus felületet jelent. Ha az ügyfelünk ugyanezen adatokat egy grafikonon is látni szeretné. kiegészítése nem vonja maga után az üzleti logikát megtestesítő kód módosítását. MVC Az MVC84 (model – view – controller. Ezáltal annak módosítása.

oldal Web programozás (0. showTitlePage($title).php'). Simple-Non-OO-MVC-Controller.1 Nem objektum-orientált megvalósítás Bár az MVC mintát objektum-orientált módon szokás megvalósítani. A SmallTalk MVC nagy sikert aratott.4. Természetesen az MVC hármas felépítése így is tökéletesen bemutatható. include_once('Simple-Non-OO-MVC-View.php A másik két „tag” betöltése után a vezérlő a Front Controller-hez hasonlóan működik: // copyright Lawrence Truett and FluffyCat.fluffycat. $page = getPage().php').6. ami felelős az adatbázis kezeléséért. a megértésben segíthet egy nagyon egyszerű (már-már primitív) megvalósítás85. if ("TITLE" == $page) { $title = getTitle().com 2006. amikor grafikus felületű SmallTalk alkalmazásokon dolgozott a Xerox-nál. } elseif ("AUTHOR" == $page) { $author = getAuthor(). rengeteg grafikus keretrendszerben került felhasználásra. hogy melyik nézetet kell megjeleníteni. a vezérlő dönti el a felhasználó kívánsága szerint. amelyek a modellből származó adatokat használják fel. 10. Ezt a tervezési mintát Trygve Reenskaug írta le 1979-ben. verzió) Az MVC tervezési minta ezzel szemben tartalmazni fog egy modellt. } 85 http://www. és két nézetet. ami felelős az adatok megjelenítéséért. // all rights reserved include_once('Simple-Non-OO-MVC-Model. akkor csak a megfelelő nézetfájlokat kell elkészíteni.com/PHP-Design-Patterns/Non-OO-MVC/ . kördiagramm vagy esetleg egy szöveges magyarázatokkal ellátott kimutatásra). Ha további nézetekre van szükségünk (pl.218. Azt. showAuthorPage($author).

'TITLE: '.'/BODY><'. 10.'HTML><'. } A nézet a kapott adatok és a változatlan szövegek felhasználásával a kimenetet állítja elő. oldal } } else { $page = "TITLE".4. echo $page.Tervezési minták function getPage() { if (isset($_GET["page"])) { $pageIn = $_GET["page"]. break. } Simple-Non-OO-MVC-Model.php function getAuthor() {return 'Larry Truett'.php function showAuthorPage($authorIn) { $page = htmlBegin() . } function htmlBegin() { return '<'.$authorIn.htmlEnd().2 Objektum-orientált megvalósítás Az MVC elvét számtalan (többé-kevésbé eltérő) módon megvalósították már.'HEAD><'. case "author": $page = "AUTHOR".htmlEnd(). switch($pageIn) { case "title": $page = "TITLE". Simple-Non-OO-MVC-View. } function showTitlePage($titleIn) { $page = htmlBegin() . A jegyzet jelen verziójában nincs lehetőségünk ezek alaposabb megismerésére :-( . } return $page.10.$titleIn. 'AUTHOR: '. } function htmlEnd() { return '<'.'BODY>'.} A modell függvények akár adatbázisból is olvashatnának. 219. echo $page.'/HTML>'.'/HEAD><'.} function getTitle() {return 'PHP for Cats'. default: $page = "TITLE". break.'TITLE><' '/TITLE><'. break.

com/PHP-Design-Patterns/ Stig Bakken. verzió) 10.com/ PHP Design Patterns http://www.220. További források ● Patterns for PHP http://www. Andi Gutmans.com/articles/article.informit. oldal Web programozás (0.fluffycat.aspx?p=346958&seqNum=4 ● ● .6.5. Derick Rethans: PHP 5 Advanced OOP and Design Patterns http://www.patternsforphp.

nincs szükség a programozó beavatkozására. mint hátrányos. vagy a nézet felépítését is a sablonozásra bízhatjuk. Az alkalmazás logika és a megjelenítési kód szétválasztásának további előnye. Természetesen ez a lehetőség finoman konfigurálható. tehát a „probléma” áthidalható. Gyorstárazott A Smarty lehetőséget nyújt az oldalaink lefordított állapotának eltárolására két különböző szinten is. hogy az alkalmazás logikáját megvalósító kódon dolgozó fejlesztő. talán pontosabb lenne sablon-keretrendszernek nevezni. 86 http://smarty.php.net/ . Ráadásul van arra is lehetőség. hogy ellenőrzött módon kiterjesszük a Smarty lehetőségeit. helyette egy (a HTML-hez sok tekintetben közelebb álló) sablon-nyelvet kell alkalmazni. hanem egyes oldalakra nézve is ki-be kapcsolható. Ennek lényege. A mai változata már több mint egy sablonmotor. hogy az alkalmazás logikát és a megjelenítési kódot a lehető legtisztábban válasszuk el egymástól. vagy egyáltalán nem kell hozzányúlni. Biztonságos A sablonok nem tartalmaznak PHP kódot. A webfejlesztésben sokszor egy ennél egyszerűbb módszert alkalmazunk. Ráadásul a konfigurációs beállításokat a dizájner önállóan is menedzselni tudja. Jellemzők Bevezetésül a Smarty néhány fontos jellemzőjét fogjuk megvizsgálni.Sablonrendszerek 221. Ezzel csökkentjük ugyan a dizájner lehetőségeinek körét. és az oldal megjelenésével foglalkozó dizájner akár párhuzamosan.1. de ez a legtöbb esetben inkább előnyös. egymás zavarása nélkül is végezheti a dolgát. Smarty A Smarty86 az elmúlt években méltán vált az első számú (és legtöbb fejlesztő számára az egyetlen) sablon-motorrá. 11. Sablonrendszerek Köszönet: E fejezet jelentősen épít Boda Csaba PHP alapú sablon rendszerek áttekintése című szakdolgozatára. Így bármelyik komponens változása esetén a másik komponenshez csak kis részben. Könnyen kezelhető és fenntartható A dizájnernek nem kell a PHP bonyolult szintaxisával megismerkedni.11. oldal 11. Konfigurációs állományok Egy vagy több oldalon is felhasználhatók a külön állományokban tárolt konfigurációs információk. Ráadásul egymás munkáját is elég alapfokon ismerni az együttműködéshez. nem csak globálisan. Az asztali alkalmazásfejlesztésben az 1980-as évektől kezdve meghonosodott a MVC (Modell-View-Controller) tervezési minta.

6. Ez után a kisebb (vagyis az interfészt nem befolyásoló) változások keretén belül a programozó és a dizájner ismét egymástól függetlenül végezheti a feladatát. Szűrők A programozó teljesen kontroll alatt tudja tartani a kimenetet. A Smarty a sablon fájl alapján egy PHP állományt fog előállítani. ● 11. megjelenési dátuma. Mivel ez költséges művelet. Telepítés A Smarty futtatásához PHP 4-es változata is elegendő. hogy ez HTML (vagy akár WAP) kód szintjén hogyan fog megvalósulni. a JavaScript fejezetben bemutatott e-mail cím elrejtés csak akkor működőképes. címe. Pl.vagy utószűrők segítségével teheti meg. Az egyes cikkeket megjelenítő oldalak szerkezete hasonló lesz. Például nagybetűssé konvertálás. Ráér majd a dizájner azzal foglalkozni. lábléce. Egy utószűrővel meg lehet oldani. hogy az esetleg a szövegben levő @ karaktereket automatikusan – a korábbiakban leírtaknak megfelelően – elkódolja. szóközök szűrése stb. Kettőjük kommunikációjából előáll a dizájn és az üzleti logika csatolófelülete (interfésze). Lesz az oldalnak fejléce. írója. és alkalmazható. Ezt elő. ha a @ karakter nem jelenik meg a kimenetben. Nézzünk példaként egy cikkeket publikáló honlapot. csonkítás. esztétikai részéről. Sablon függvények A sablon függvények segítségével összetettebb lehetőségeket is kap a dizájner az egyszerű megjelenítés helyett. Nem beszélt table és p elemekről.1. A programozó PHP-ben megvalósítja az üzleti logikát (alkalmazás logikát). se a megjelenítés vizuális. Érdemes megfigyelni.222.1 Smarty alapok A Smarty fő célja az üzleti logika és a prezentációs logika szétválasztása. verzió) A használt változók értékét könnyedén módosíthatjuk a felhasználásuk előtt. . tartalma stb. hogy az előző példa logikailag fogalmazta meg az oldalt alkotó elemeket. vagy akár magunk is fejleszthetünk kiegészítőt. Munkafolyamat Smartyval A dizájner és a programozó sablonrendszer használatával nagyjából a következő módon dolgozhatnak a követelményspecifikáció elkészítése után: ● ● ● A dizájner minden egyes oldaltípushoz készít egy tisztán HTML mintát. Kiegészítések Az alaprendszerhez sokféle kiegészítő tölthető le a webről. oldal Változó módosítás Web programozás (0. hogy a későbbi kérések gyorsabban kiszolgálhatók legyenek. érdemes gyorstárazni az eredményt. ami a változók formájában megjelenő adatok és a dizájn-elemek kapcsolatát fejezi ki.

hogy amikor először tekintünk meg egy sablont. A könyvtár tartalmát soha ne módosítsuk! A Smarty lib könyvtárában található állományait az alkalmazásunkból el kell tudni érnünk.class. és menti az eredményt. Éppen ezért vagy egy globálisan elérhető helyre.11. akkor egy tömörített állományt találunk. A második szint. A SMARTY_DIR változó használatával a példánk így néz ki: <? define('SMARTY_DIR'. 'c:/webroot/libs/Smarty-v.e. Ez a tárolási lépés megakadályozza. Nézzük meg a lehető legegyszerűbb példát: <? require_once('Smarty.class.r/libs/').net/download.php').php').Sablonrendszerek A Smarty magja 223. működő alkalmazásunkhoz. Megjegyzés: A Smarty belsőleg kétszintű átmeneti tárolást tartalmaz.class. 'Smarty. Ennek a könyvtárnak a rendszerünkbe másolása jelenti a telepítés első lépését. Az osztály kódja pedig (a beszédes nevű) Smarty. Fontos szerepet tölt még be a SMARTY_DIR változó is. oldal Ha letöltjük a Smarty legfrissebb változatát a letöltési oldalról87. ?> További könyvtárak A Smarty számára további négy könyvtárra lesz még szükség: templates/ templates_c/ configs/ cache/ Ezek a könyvtárak tipikusan a weboldalunk gyökérmappájába kerülnek. vagy pl. A templates és configs könyvtárak állományait tipikusan a dizájner hozza létre: sablonok és konfigurációs állományok kerülnek beléjük. hogy a Smarty az éppen megjelenített (jellemzően HTML) tartalom átmeneti tárolását is megengedi. hogy a sablonkódokat az első kérelem után is minden alkalommal fel kelljen dolgozni. ha létrehozunk egy példányt a Smarty osztályból.tpl): 87 http://smarty. require_once(SMARTY_DIR . Az első szintet az jelenti. $smarty = new Smarty().php. Hello Világ! Eljutottunk az első teljes.php . ugyanis ezekben tárolja a sablon állományokból fordított PHP állományokat. Nézzük először a sablon állományt (templates/index. a portál gyökérmappájába célszerű helyeznünk.php nevű állományban található. Szokás szerint ez a változó tartalmazza a Smarty telepítés helyét. a Smarty tiszta PHP kódra fordítja azt. valamint a gyorstárazott HTML oldalainkat. ?> A Smarty használatáról csak akkor beszélhetünk. A webszervert futtató felhasználónak írási joggal kell rendelkezni a templates_c és cache könyvtárakra. Ennek libs alkönyvtára tartalmazza a rendszer magját. $smarty = new Smarty().

php'). strtotime('-1 day')). A sablon állomány feldolgozása és a sablonváltozók beillesztgetése történik meg a display metódus segítségével. $smarty->assign('valtozo'.class. $smarty->assign('valtozo'. 'következő film. $smarty->display('index. {$valtozo|count_characters} 22 date_format Különböző dátum és idő formátumok. verzió) A sablont megjelenítő kód: <?php require_once(SMARTY_DIR . .now|date_format} {$smarty.2 Változó módosítók Nemcsak kiírathatjuk a változók tartalmát. 2006 03/21/06 default Ha a használt változó üres vagy olyan változóra hivatkozunk ami nem létezik.now|date_format:"%I:%M %p"} Mar 21.1. $smarty->assign('name'. Próbálkozás.224. hanem meg is lehet változtatni a kiíratás előtt azokat. {$valtozo|capitalize} Következő Film. x3'). akkor ennek a tartalma lesz felhasználva. oldal {* Smarty *} Hello {$name}. Erre a smarty objektum assign metódusánál láthatunk egy hozzárendelést: az objektum tulajdonképpen gyűjti az ilyen típusú hozzárendeléseket.').'Ned'). ?> A példán már látszik is a sablonelvű fejlesztés legalapvetőbb eleme: a sablon oldal {$name} változóját szeretnénk kicserélni egy aktuális névre. welcome to Smarty! Web programozás (0. 'Tegnap nagyon hideg volt. a sablon állományt és az eredményt mutatják. $smarty->assign('tegnap'.tpl'). {$smarty. A teljesség igénye nélkül néhány módosító: Megjegyzés: a fejezet következő példái sorrendben a PHP állományt. próbálkozás. Az érthetőség kedvéért mindegyik módosítót egy rövid példával ismerhetjük meg.6. 'Smarty. x3 count_characters Egy adott változó változóban megszámolja a karakterek számát. 11. capitalize Ez a módosító minden szó első betűjét átteszi nagybetűvé. $smarty = new Smarty().

3 Vezérlési szerkezetek Az egyszerű változóbehelyettesítés használata a Smarty-t látszatra rendkívül erőteljessé teszi. "Ez lesz a következő <font face=\"helvetica\">nagy terv</font>"). .1. $smarty->assign( 'valtozo'. {$valtozo|strip_tags} Ez lesz a következő nagy terv. "'Ez Lesz A Következő NAgY Terv!'"). {$valtozo|lower} 'ez lesz a következő nagy terv!' nl2br A „\n”-et átalakítja a HTML nyelvben használatos <br /> elemre. A sablonok világosak és egyszerűek. "Ez lesz a következő nagy terv!"). 11. {$valtozo|escape:"url"} %27Ez%20lesz%20a%20k%F6vetkez%F5%20nagy%20terv%21%27 lower Minden karaktert kisbetűsé alakít. "'Ez lesz a következő\n nagy terv!'"). $smarty->assign('valtozo'. {$email|default:'No email address available'} No email address available 225. ''). $smarty->assign('valtozo'. $smarty->assign('valtozo'. oldal escape A szöveget különböző kódolásnak megfelelően lehet konvertálni. {$valtozo|replace:'nagy':'kis'} Ez lesz a következő kis terv! strip_tags Az formázó tagokat kicseréli helyközre vagy teljesen eltünteti őket. "'Ez lesz a következő nagy terv!'"). $smarty->assign('valtozo'. és a háttérkód sem bonyolult.11. amelyet megvalósítok az elkövetkező évben.Sablonrendszerek $smarty->assign('email'. {$valtozo|nl2br} 'Ez lesz a következő<br /> nagy terv!' replace A megadott a stringet megkeresi és kicseréli.

verzió) Elágazások Nézzünk egy szituációt: Ha webhelyünk látogatójától csak az első alkalommal akarunk bejelentkezést kérni. A második megoldás.tpl'). hogy megjeleníti-e a bejelentkezési hivatkozást.6.tpl').$name). $smarty->assign('name'. ami lehet. és ha igen. a későbbiekben (szütitől függően) már nem. $name = array_key_exists('name'. hogy be sincs állítva: <html> <body> Helló {$name}. akkor két lehetőségünk van. hogyan: A hello3.php').class.tpl tartalma: <html> <body> Hello {$name}. $smarty->display('hello2.php\">belépés</a>". } else { $login_link = ' '.php">Belépés</a> { /if } </body> </html> A hello3... $name = array_key_exists ( 'name' . Az első.<br> {php}{$login_link. $_COOKIE) ? $_COOKIE['name'] : 'Stranger'. $name).class.<br> { if $name == "Stranger" } <a href="/login. $_COOKIE) ? $_COOKIE ['name' ] : 'Stranger'. if($name == 'Stranger') { $login_link = "<a href=\"/login. oldal Web programozás (0. hogy ezt a PHP kódban végezzük el. } $smarty->assign('name'.php').php tartalma: require('.}{/php} </body> </html> Ez a módszer sajnos megsérti az alkalmazási és megjelenítési kód szétválasztásának elvét. $smarty = new Smarty. $smarty->display('hello3.226./smarty/Smarty. Ezután a sablonnal meg kell jelentetnünk a $login_link-et./smarty/Smarty. az alábbihoz hasonló módon: require('. $smarty = new Smarty. hogy a megjelenítési rétegre bízzuk a döntést. $smarty->assign('login_link'. . $login_link).

class.cookie. hogy elválasszák a megjelenítést az alkalmazástól. illetve a Smarty beállítási változóit. hogy a kimenet előállításához valójában nem tartozik logika. $smarty->display('getenv. Egy egyszerű sablon.11./smarty/Smarty. hogy a sablonok bonyolulttá válnak. tartjuk magunkat az MVC mintához. A getenv.Sablonrendszerek 227. formában történhet. Amíg ez a megjelenítésre korlátozódik.tpl'). . hogy beépített. A fenti példában láthatjuk a $smarty változót is. hogy a nézetből eltávolítunk minden logikát . Mindazonáltal a sablonokban logikát elhelyezni sok veszélyt rejt. hogy maga az oldal tartalmazzon nagy mennyiségű kódot. hogy jó. ami egy asszociatív tömb.env key=key item=value } <trxtd>{$key}</tdxtd>{$value}</tdx/tr> {/foreach} </table> </body> </html> A getenv. hogy mindkét említett helyzetet elkerüljük. Minél több szolgáltatás érhető el a sablonokban.a cél az. hanem az. mint az alkalmazáslogika beépítése a megjelenítési kódba.php tartalma: require('.get stb. A szuperglobálisok elérése a $smarty. Az MVC nem arról szól.tpl tartalma: <html> <body> <table> {foreach from=$smarty. A Smarty ezt a problémát nem oldja meg. oldal Ciklusok A teljes feltételrendszert nyújtó if-elseif-else utasításokon kívül a Smarty a foreach-en keresztül a tömbök ciklussal való feldolgozását is támogatja. A megjelenítési kódnak az alkalmazásba helyezése pedig nem jobb. Ez nagyobb rugalmasságot ad abban. Számos fejlesztő számára nem csupán az a cél. A sablonrendszerek használatának éppen az a célja. ha a megjelenítésből teljesen kivonjuk a logikát. Hol legyen a logika? Egyesek ez ellen azzal érvelhetnek. illetve felhasználói függvényeket hívjunk meg. hogy magában a sablonban egyáltalán nem ajánlott működési logikát elhelyezni. Az nem biztos.php'). A megjelenítési és működési kód között azonban nem minden esetben könnyű különbséget tenni.. $smarty = new Smarty. $smarty. de az az ára. hogy az területre jellemző működési kódot vegyük ki belőle. hogy mit tehetünk meg magán a sablonkódon belül. hogy a megjelenítési kód is minél kisebb legyen. annál nagyobb a kísértés. melynek segítségével elérhetjük a PHP szuperglobálisait (például $_GET). vagy azt jelenti. Függvények Az alapvető vezérlési szerkezetek mellett a Smarty lehetőséget ad arra is. amely kiírja az éppen érvényes környezeti változókat.

tpl tartalma: <br> </body> </html> Ha ezután egy sablonban fejlécre vagy láblécre van szükség. Például közös fejlécet és láblécet adjunk a sablonokhoz. Külső függvények A külső függvényeket nem a Smarty fejlesztői készítették. de a telepítőcsomag is tartalmaz néhányat. Egy tömbben meg kell adni az értékét. Az include2. Feleslegesen bonyolítja az alkalmazást. A PHP include függvényével azonos módon azt teszi lehetővé.tpl tartalma: <html> <head> <title>{$title}</title> {if $css} <link rel="stylesheet" type="text/css" href="{$css}" /> {/if} </head> <body> <br> A lablec. a következőképpen építjük be azokat.tpl"} Hello {$name}.228. amelyre használhatjuk. Az egyéni függvények az összetett feladatokat automatizáló segéd-függvények készítésében lehetnek segítségünkre.tpl tartalma: {include file="fejlec. De ez csak egy a sok tucat esetből. és megnehezíti. melynek segítségével sablonon belüli PHP-kódot írhatunk.6. .tpl tartalma: {include file="fejlec. oldal include Web programozás (0. hogy egy sablonba egy másikat építsünk be. hogy megállapítsuk.{/php} {include file="lablec. verzió) A leghasznosabb beépített függvény az include.tpl"} A programozási nyelvek keverése egyetlen dokumentumon belül szinte soha nem jó ötlet. {include file="lablec. hol található egy adott szolgáltatás megvalósítása. és a szerint létrehozza őket.tpl"} php A Smarty támogatja a php függvényt is. Az include. mint az alábbi egyszerű példában: A fejlec. Ismét a teljesség igénye nélkül következzék néhány függvény. A Smarty támogatja az egyéni függvényeket és változómódosítókat is. amelyik űrlatok tömbből való generálását könnyítik meg: Html_checkboxes Jelölőnégyzetetek állíthatunk elő vele.tpl"} Helló {php}print $_GET['name'].

Ha feltételekkel szeretnénk tárolni az adatokat.tpl').1003)). A legtöbb oldalon a beágyazott PHP program igényli a legtöbb időt. A Smarty-ban a tartalom átmeneti tárolásához először engedélyeznünk kell a tárolást az objektumban.Sablonrendszerek $smarty->assign('cust_ids'. array('Joe Schmoe'. $smarty->assign('cust_names'. így a sablont egyáltalán nem kell végrehajtani. Ezt a tárolási rendszer kulcsként használja.'Jane Johnson'. caching) általában véve is igen hatékony módszer.tpl')) { /* beállítás */ } $smarty->display('index. mégpedig a következő sorral: $smarty->cache = true. ez a módszer számunkra nem megfelelő. az oldal teljes kimenete $smarty->cache_lifetime ideig (ez általában 3600 másodperc) tárolódik. hogy azonos kulccsal rendelkező kérelem esetén visszaadhassa a tárolt tartalmat. 'Charlie Brown')). és minden további felhasználó ugyanazt kapja. A PHP programon belül ez a következőképpen történik: $smarty = new Smarty. Ha a sajatoldal.tpl sablont például . Megjegyzés: Még pontosabban fogalmazva az ezen az időintervallumon belül érkező újabb kérések az eltárolt kimenetet fogják kapni. mert csak az első felhasználóra vonatkozó információk tárolódnak. hogy az oldalnak létezik-e tárolt másolata. A folyamatot rövidre zárhatjuk. if(!is_cached('index. $smarty->assign('customer_id'. Ezután amikor csak meghívjuk a display függvényt.4 Gyorstárazás A lefordított sablonok használatánál is gyorsabb a sablonok kimenetének átmeneti tárolása. oldal {html_checkboxes name="id" values=$cust_ids output=$cust_names selected=$customer_id separator="<br />"} A kimenet: <label><input type="checkbox" name="id[]" value="1000" />Joe Schmoe</label><br /> <label><input type="checkbox" name="id[]" value="1001" checked="checked" />Jack Smith</label><br /> <label><input type="checkbox" name="id[]" value="1002" />Jane Johnson</label><br /> <label><input type="checkbox" name="id[]" value="1003" />Charlie Brown</label><br /> 11.11. a display -nek egy második paramétert kell átadnunk. Ha az oldal bármilyen felhasználóhoz köthető információt tartalmaz.1.1001. 1001). 229.1002. Az átmeneti tárolás (gyorstárazás. array(1000. hiszen az adatokból elő kell állítani az oldalt.'Jack Smith'. ha az is_cached függvénnyel ellenőrizzük.

com/php/articles/template_engines/ . További források http://smarty. csak át kell neki adni az azonosítót is. amikor is tárolt oldalak ezrei gyűlnek fel a rendszerben.php 11.massassi. (Ez az osztály massassi88 megoldása alapján egy kissé testreszabott megoldás. Érdemes itt megjegyezni. verzió) 10 percig minden kérelmező számára egyedileg szeretnénk tárolni.php. }$ smarty->display('sajatoldal.tpl'. md5($_C00KIE['name'])) ) { /* beállítás */ $smarty->assign('name'.net/crashcourse. Legyünk óvatosak: a Smarty nem rendelkezik beépített szemétgyűjtéssel. amelyek a Smarty bonyolultsága. hogy tartalomkezelő rendszer a Smartyt használja beépített módon. hogy az is_cached továbbra is használható. de ezután akár egy sablonnyelv. felesleges lehet egy külön sablonnyelvet megtanulni és alkalmazni. oldal Web programozás (0. hogy pl. ha megismerjük pl. akár a PHP is alkalmas lehet a feladat megoldására. Láthatjuk. md5($_COOKIE['name' ] )) . $_C00KIE['name']). a felhasználókat a nevük alapján előállított MD5 kivonat alapján azonosíthatjuk: $smarty = new Smarty. A Smarty mellett sok kisebb rendszer is létezik. így minden tárolt oldal egy fájlt jelent a tároló fájlrendszerben. ha a fejlesztők fegyelmezetten külön tudják választani a megjelenítési és alkalmazási kódot. Ez lehetőséget teremt a véletlen vagy szándékos túlterhelésre. amikor a dizájner ismeri a PHP nyelvet.230. hanem csupán a külön sablon nyelv szükségességét kérdőjelezzük meg.php http://smarty.2.tpl'. Van azonban arra is példa.1 Sablon osztály Ha PHP alapokon akarunk sablon-elvű módon programozni. hogy a sablonrendszerek nagyon fontos szereket töltenek be a webfejlesztésben.php. Ezzel nem a sablon logika különválasztásának.6. mint sablonnyelv Vitathatatlan. akik szerint olyan esetben. Ehelyett azt javasoljuk. a Drupal és a Wordpress tartalomkezelő rendszerek estén is lehetőség van PHP alapú sablon (vagy más néven smink) kezelésre. akkor nagyon hasznos lehet számunkra a következő Sablon osztály. 88 http://www. A tanulás szempontjából tehát igenis nagyon hasznos.net/manual/en/ http://smarty.2.php.net/sampleapp/sampleapp_p1. hogy viszonylag kevés értéket felvehető kulcs alapján válasszuk ki a tárolandó tartalmat. 11. vagy éppen egy más típusú sablonnyelv igénye miatt más utakon járnak. A PHP.) <? class Sablon { var $dir = 'sablon/'. Vannak azonban olyan fejlesztők is – köztük a szerző is -. if(!is_cached('sajatoldal. a Smartyt.

mennyire egyszerűvé teszi a kódot a kimenet pufferelése (ob_ függvények). A következő sablon állomány (ujBejegyzesekBlokk.2 Blogbejegyzés Nézzünk egy konkrét példát a nagygusztav. function berak($nev. $this -> fajl . $cimsor. '. var $fajl.11. } } Hasznos függvény. function torol() { $this -> cserek = array(). ob_start(). több azonos sablon alapján gyártott blokk generálására. pl. function cserel() { extract($this -> cserek).hu oldal 2006-os kódjából.tpl. function berakTomb($tomb) { if (is_array($tomb)) { $this -> cserek = ($this -> cserek) + $tomb.2. function Sablon ($f) { $this -> fajl = $f. $tartalom = ob_get_contents(). 11. } A konstruktor mindössze a fájl nevét tárolja el. hiszen ezzel definiálhatók a cserélendő párok. ha a cserélendő párok már eleve tömbben helyezkednek el. } else { $this -> cserek[$nev] = $ertek.php) egy blogbejegyzés előzetest fog készíteni a kezdőoldalra. $ertek) { if (is_object($ertek)) { $this -> cserek[$nev] = $ertek->cserel(). include($this -> dir .Sablonrendszerek A sablon állományok helye a fájlrendszerben. .php'). oldal A sablon fájl neve és a cserélendő párok. } A tényleges sablon műveletet. ob_end_clean(). return $tartalom.tpl. var $cserek = array(). a cserék megvalósítását végzi. } } A leggyakrabban használt metódus. hogy újabb sablon objektum példányosítása nélkül is újra használhassuk a sablonállományunkat. } } ?> Végül a töröl függvény lehetővé teszi. Érdemes megfigyelni. 231.

} $sablon = new Sablon('ujBejegyzesekBlokk'). $ujBejegyzesek). mint sablonnyelv (http://deadlime.kiskapu. Források ● George S.6. <? }?> </p> <? } ?> </div> A következő kód használja a sablont: $ujBejegyzesek = $this -> adatbazis -> ujBejegyzesek(10). Schlossnagle: PHP fejlesztés felsőfokon (http://www.232. $sablon -> berak('ujBejegyzesek'.= $sablon -> cserel(). verzió) <? /* Csak az előzetes megjelenítésére.hu/) deadlime: PHP. oldal Web programozás (0.</a> <? }?> <? if ($lehethozza) { ?> Eddig <? if ($hozzaszolasSzam == 0) { ?> nincs <? } else {?> <?= $hozzaszolasSzam ?> <? } ?> <a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>#hozza">hozzászólás</a>. $szoveg .hu/2006/07/28/php-mint-sablonnyelv/) ● . hozzászólások számával */ ?> <div class="hir"> <? if ($lehethozza || $tartalom) { ?> <h2><a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>"><?= $hirCim ?></a></h2> <? } else { ?> <h2><?= $hirCim ?></h2> <? }?> <? if ($datum) {?> <acronym class="datum" title="<?= $datum['hosszu'] ?>"> <span class="honap"><?= $datum['honap'] ?></span> <span class="nap"><?= $datum['nap'] ?></span> </acronym> <? } ?> <?= $hirSzoveg ?> <? if ($lehethozza || $tartalom) { ?> <p class="hozzaszolasszam"> <? if ($tartalom) { ?> <a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>"> Teljes bejegyzés&raquo. foreach ($ujBejegyzesek as $k => $e) { $ujBejegyzesek[$k]['blogcim'] = $this -> joOldalak[$e['blognev']]['cim']. $sablon -> berakTomb($GLOBALS['portal_adatok']).

oldal phpPatterns: PHP and Templates (http://www.Sablonrendszerek ● 233.phppatterns.com/php/articles/template_engines/) ● .11.com/docs/design/templates_and_template_engines) massassi: Template Engines (http://www.massassi.

A legtöbben a Ruby on Rails90 alapötletét másolják.phpwact. amelyek a fejlesztő munkáját nagyban egyszerűsíteni tudják. Ha egy rendszer nem váltja be a hozzá fűzött reményeket. Megjegyzés: Erről egy kis képet kaphatunk a WACT oldalán 89 található listából: a közel 50 keretrendszer közül 20 valamelyik másik rendszer logikájára épül. hanem inkább az.Keretrendszerek A webfejlesztők szóhasználatában a keretrendszerek (frameworks) olyan kódgyűjteményt jelentenek. és nem is „veszélytelen”: egy keretrendszer felépítésének és API-jának megismerése felérhet egy új nyelv megtanulásának költségeivel. munkamenet-kezelés. sok munka mehet veszendőbe. Az összes keretrendszer bemutatása helyett csak kettőre.rubyonrails. amelyek esetén a nyújtott szolgáltatások csak lazán kapcsolódnak egymáshoz (esetleg teljesen függetlenek egymástól). amely a PHP alapú webfejlesztést komoly eszközökkel támogatja.234. A választás nem könnyű. Manapság nem az a fő kérdés.hu/ http://codeigniter. A keretrendszerek között találunk olyanokat. hogy a keretrendszerek sokszor másolják a nagy elődök bevált ötleteit. 12. Érdemes megfigyelni. amelyek kimondottan MVC alapokra épülnek. 89 90 91 http://www. gyorstárazás. Vannak rendszerek. verzió) 12. a Code Igniter-re és a CakePHP-re fogunk koncentrálni. mivel gyakran előforduló problémákra kész megoldásokat nyújtanak. míg más esetekben egy egységes rendszert alkotva.com/ . stb. oldal Web programozás (0. felhasználó-kezelés. amelyek a kliens és szerver oldal közötti AJAX alapú kommunikációt helyezik a középpontba.6.1. a saját kódunkat csak mint „dekorációt” ráaggatva kell elhelyeznünk. A „másolás” többnyire más platformbeli rendszerről történik. hogy használjunk-e keretrendszert. és vannak. sablonkezelés. A keretrendszerek tipikus szolgáltatásai közé tartozik az adatbázis-kezelés absztrakciója. Code Igniter A Code Igniter91 fejlesztői egy olyan webalkalmazás fejlesztő keretrendszert hoztak létre. hogy melyiket alkalmazzuk a sok elérhető közül. A fontosabb jellemzői: ● ● ● ● ● ● ● ● ● ● ingyenes nyílt forrású PHP 4 vagy 5 alatt is működik könnyűsúlyú gyors MVC alapú tiszta URL-eket alkalmaz kiegészíthető nem szükséges hozzá külön sablonrendszer jól dokumentált.org/php/mvc_frameworks http://www. így a Code Igniter és a CakePHP is.

2 Az URL-ek felépítése Az URL-ek felépítése lehetővé teszi. Megjegyzés: az index. A rendszert egyetlen tömörített fájlként letölthetjük. mind a keresőrobotok számára beszédes címeink legyenek. tömören szeretnénk bemutatni a Cake-ben is megvalósított MVC koncepciót.php/news/article/my_article 12.php mellett csak a system alkönyvtár nélkülözhetetlen.12. hogyan is lett megvalósítva az MVC a CakePHP-ban.com/news/article/my_article Az URL elemei a következő logikára épülnek: www. Elsődleges célunk hogy lehetővé tegyük a rendezett és gyors munkát – a rugalmasság elvesztése nélkül. MS SQL. Az URL nagyon jól olvasható módon mutatja az oldal tartalmi hierarchián belüli pozícióját: www. a user_guide a használathoz szükséges súgót tartalmazza. A megfelelő osztály betöltése. de ezt a felhasználók elől szeretnénk elrejteni.your-site. MySQLi. www. nyílt forráskódú. vagy ODBC) szükséges.Keretrendszerek 235.your-site. oldal 12. Igazság szerint az URL tartalmaz egy index.hu/ (A fejezet tartalma a CakePHP dokumentációja alapján készült. hogyan lehet alkalmazni. osztályok struktúrája és run-time infrastruktúra azon webes alkalmazásokat készítő programozók számára. hogy mind az emberi látogatók. és általában véve jobb kód készítését. A fájl tartalmát kell az oldal gyökérkönyvtárába másolnunk.1 Alapkoncepció Ebben a fejezetben röviden. Postgre. 12.2. majd néhány egyszerű CakePHP példán keresztül megnézzük.your-site. elősegítvén az újrahasznosítást. példányosítása és a függvény paraméteres meghívása mind a Code Igniter feladata.2. gyors fejlesztői keretrendszer PHP-hez.com/index.1 Telepítés A Code Igniter alkalmazásához PHP és adatbázis-szerver (MySQL. CakePHP A CakePHP92 egy ingyenes. akiket megihletett a Ruby on Rails keretrendszer. amely paraméterként megkapja az ID értéket. Könyvtárak. Oracle.com/class/function/ID Ez a szerkezet tehát mutatja.) .php elemet is. a karbantarthatóságot. Az MVC tervezési minta A Model-View-Controller (Modell Nézet Vezérlő) tervezési minta segítségével logikailag csoportosíthatjuk a kódot.1. 92 http://cakephp. a fejlesztőnek ezzel már nem kell törődnie. 12.1. hogy a kérés a class osztály function nevű függvényének szól. Az MVC általános bemutatása után megnézzük. SQLite.

feldolgozás és output feladatok leképezzék a grafikus interfésszel rendelkező alkalmazásokban. Nem kell aggódnunk amiatt. Azért. és végül megjelenítendő adatokat küld a megfelelő View fájloknak. A későbbiekben részletesen ismertetjük ezeket. és máris másolhatjuk a cake könyvtárba. hogy több app könyvtár osztozzon egyetlen cake könyvtárrendszeren.6. A vendor könyvtárban a mások által fejlesztett alkalmazásokat tároljuk. A Cake terminológiájában a Model jelképezi az egyes adatbázis táblákat/rekordokat. Emiatt a CakePHP frissítése is egyszerűvé válik: csak le kell tölteni a Cake legfrissebb válozatát.php lehetővé teszi. Az app könyvtárban fognak elhelyezkedni az alkalmazásunk fájljai. a szerveren a következő három könyvtárat találjuk: app cake vendors A cake mappában találhatók a rendszer magjához tartozó könyvárak. Lássuk egyben a fájlszerkezet fontosabb elemeit: /app /config config fájlokat tartalmaz az adatbázishoz. hogy a saját alkalmazásunk fájljait cseréljük ki. ACL-hez. A Cake Controllere kezeli a szerver felőli kéréseket.236. A Cake fájlszerkezetének áttekintése Amikor kicsomagoljuk a Cake-t. stb /controllers vezérlők helye /components komponensek helye /index. A View a Cake nézet fájljait jelenti. Ez a modul fogadja a felhasználói adatbevitelt (GET vagy POST adatokon keresztül). hogy a cake a /app könyvtárat DocumentRoot-ként kezelje /models modellek /plugins Pluginek /tmp cache és log fájlok helye /vendors külső alkalmazások helye . elöljáróban csak annyit. amelyek PHP kóddal beágyazott szabvány HTML fájlok. oldal Web programozás (0. és azok kapcsolatait más táblákhoz/rekordokhoz. hogy a Cake vendor() függvényének segítségével érhetjük el az itt elhelyezett osztályokat. hogy az alapötlet az. A cake és app mappa különválasztásával lehetővé válik. valamint ez az egység tartalmazza az adat-érvényességi szabályokat. hogy alkalmazásainkat a lehető legegyszerűbben építhessük fel. verzió) Az MVC-t eredetileg arra tervezték. megvalósítja az üzleti logikát. Ezt a könyvtárat sosem kell módosítani. a Model-t felhasználva írja/olvassa az adatbázis és más adatforrások adatait. hogy a hagyományos input. melyeket az adatok bevitelekor vagy frissítésekor kell figyelembe venni. a Cake az alkalmazáson belüli objektumok interakciójának kezelésén felül a fájok tárolásának megszervezésére is használja az MVC mintát. felülírva a régi fájlokat.

Ebben az esetben a teljes domain. amivel a CakePHP-t beállítjuk.) Fejlesztői telepítés Fejlesztéskor a teljes Cake telepítési könyvtárstruktúráját közvetlenül a webelérési útra be lehet másolni. a kevésbé biztonságos volta miatt.txt nézetek elemek. csak fejlesztési környezetre ajánlott.php /vendors VERSION.htaccess index. ezért az URL-jeink a következőképpen néznek ki (mod_rewrite használata esetén): www.com/cake/controllerName/actionName/param1/param2 Végleges telepítés A végleges telepítés testreszabásához szükségesek a DocumentRoot-hoz való jogok a szerveren. (Linux szerver esetén az apache-nek kell tudnia írni ezt a könyvtárat.Keretrendszerek /views /elements /errors /helpers /layouts /pages /webroot /css /files /img /js /cake index. 12. mint egy teljes CakePHP alkalmazás működik.12.php A fejlesztői telepítéskor a wwwroot könyvtár mint a web gyökérkönyvtára funkcionál. a telepített Cake rendszer verziószáma. Megjegyzés: az /app/tmp elérési útnak írhatónak kell annak a felhasználónak.2 A CakePHP telepítése A következő módszer. kis nézet-darabok testreszabott hibaüzenet oldalak helperek helye az alkalmazás layout fájljai statikus nézetlapok az alkalmazás documentRoot-ja 237. amelyen fut a webszerver. A végleges telepítés a következő felépítéssel bír: .example.2. oldal cake rendszerkönyvtár szerveroldali külső alkalmazásokhoz használt könyvtár. mint ahogyan látható: /wwwroot /cake /app /cake /vendors .

php fájlt. 'project_name'.238.6. verzió) /útvonal_a_cake_fájlokhoz /app /config /controllers /models /plugins /tmp /vendors /views /webroot <-. Cseréld ki az alapból megadott információkat az adatbázisodhoz való kapcsolódáshoz szükséges adatokra. az alábbiakat fogod látni (app/config/database. Ennél a pontnál a CakePHP alapoldala fog megjelenni. amely az adatbázis-kapcsolat státuszát mutatja.htaccess index. 'localhost'.php /cake /vendors .Ennek az elérési útnak kell lennie a DocumentRoot-nak . amikor a táblákkal dolgozol. 12. Ugyancsak megengedi.htaccess index. Amint elkészítetted a másolatot és átnevezted. minden SQL híváshoz meg lesz adva. ezáltal nem szükséges máshol megadnod.com/controllerName/actionName/param1/param2 Bizonyosodjunk meg a helyes működésről Rendben.php) var $default = array('driver' 'connect' 'host' 'login' 'password' 'database' 'prefix' => => => => => => => 'mysql'.php fájlban található. nézzük mit csináltunk. ha olyan hoszton vagy. .conf ajánlott beállításai DocumentRoot /útvonal_a_cakehez/app/webroot Ilyen beállítások esetén a webroot könyvtár. Az új telepítés nem tartalmazza a database.php httpd. Itt határozod meg egyszer.example. Megjegyzés az előtaggal (prefix) kapcsolatban: a karaktersor amit megadsz. 'password'. hogy kövesd a Cake tábla elnevezési konvencióját. oldal Web programozás (0.com/cake elrési útra kell beállítani. ). a böngésződ http://www. így létre kell hoznod egy másolatot a database.php.example. ami csak egy adatbázisnevet enged meg. mint web gyökérkönyvtára érhető el és az URL-ek a következőképpen néznek ki (mod_rewrite használata esetén): http://www. Attól függően melyik telepítést választottuk. 'mysql_connect'.example. 'user'. amit a Cake készít az adatbázisodhoz.2.com vagy http://www. és egy üzenetet kapunk.default fájlról.3 Konfiguráció Adatbázis konfiguráció Az adatbázis konfigurációd az app/config/database.

hogy a database. Az adatbázis tábláinak az alábbi konvenciókat kell követniük: ● A Cake által használt táblaneveknek az angol többes számot kell használniuk pl. Az egyik modelleden belül. a kulcsot a táblanév mögé írd. hogy az adatbázis kapcsolatot állandóra állítsd vagy sem. stb. Vedd figyelembe.thtml állományban felülbírálható. hogy a megfelelő modelleknek egyes számú nevük van. majd az 'id' követ.default fájlban az adatbázishoz kapcsolódási módok megadásában való segítséghez. pear-mysql-t) adodb-meghajtónév A connect kulcs az alap ($default) kapcsolatnál lehetővé teszi. "users". . Olvasd el a megjegyzéseket a database. a Cake meg fog jeleníteni bizonyos generált hibaoldalakat. úgymint "Missing Controller" (Hiányzó Vezérlő). amit alsó aláhúzás. a Cake automatikusan kitölti a mezőt. amit meg tudsz változtatni itt. a következő sort elhelyezve: var $useDbConfig = 'test'. "Missing Action" (Hiányzó akció). amikor debug módban vagyunk (amikor a DEBUG változó 1 vagy magasabb értékre van állítva). oldal Megjegyzés: HABTM kapcsolt táblákhoz csak egyszer add meg a prefixet: prefix_apples_bananas. ha helyes. essünk túl rajta. 2-es vagy magasabb értékre állítva.12. az SQL utasítások megjelenését eredményezi a lap alján. ● ● ● Láthatod. Mivel igazán nem kedveljük a konfigurációs fileokat. Nullától különböző értékre állítva. és megakadályozza a felvillanó üzenetek az automatikus átirányításról. így: 'article_id'. Amennyiben belefoglalod a létrejött és/vagy módosított oszlopokat a táblába. és ezeknek a beállításoknak a leírását a kommenteken belül megtalálod a core. hasonlóan formázott konfigurációkat) és ezt használd az alkalmazásodban. hogy.php. DEBUG: Ezt különböző értékekre állítva.Keretrendszerek 239. (amikor a DEBUG 0-ra van állítva). segít téged az alkalmazásod fejlesztése közben a hibakeresésben. hogy jelenítse meg a pr( ) és a debug( ) függvényhívások eredményét. "authors" or "articles". A táblanév egyes szám. A tábláknak tartalmazniuk kell egy elsődleges kulcsot: 'id'. Szintén. A CakePHP az alábbi adatbázis meghajtókat támogatja: ● ● ● ● ● mysql postgres sqlite pear-drivername (így írhatsz pl. nem pedig prefix_apples_prefix_bananas. Cake a "Not Found" oldalt jeleníti meg. Töltsd ki ezt a konfigurációt (vagy adj hozzá egy másik.php fileban.php fájl magában foglalja a $test kapcsolat beállítást. kényszeríteni fogja a Cake-et. Globális konfiguráció A CakePHP globális konfigurációja a app/config/core. Van itt néhány dolog.php állományban található. ami az app/views/errors/error404. Éles rendszer esetén. Amennyiben össze szeretnéd kapcsolni a táblákat. Ezen a módon bármennyi további kapcsolati beállítást is adhatsz hozzá.

240. és hogy elválaszszák tőlünk a mod_rewrite szükségességét. amit hívni szeretnél. verzió) CAKE_SESSION_COOKIE: Változtasd meg ennek az értékét annak a cookie-nak a névre. amit használni szeretnél a felhasználói session-ök kezelésére a Cake alkalmazásodban. amit megadtál. Útvonal konfiguráció A "Routing" egy leegyszerűsített. tisztán PHP alapú.6. 'action'=>'actionname'. cake: A session adat a tmp/-be kerül elmentésre a Cake telepítésedben 2. database: A session adat a 'default' kulccsal megadott adatbázis-kapcsolatnak megfelelően lesz elmentve. oldal Web programozás (0. szintén elküldésre kerülnek a vezérlő akciójához/függvényéhez. Habár a mod_rewrite a címsort sokkal rendezetteben tartja. Az útvonalak az app/config/routes. amit szeretnél hívni. a controllername a vezérlő neve. 'firstparam') ). mod_rewrite-szerű valami. ?> Ahol: ● ● ● ● URL a szabályos kifejezéssel a Cake URL. CAKE_SECURITY: Változtasd meg ennek az értékét az általad kedvelt session-ellenőrzés jelölésére. amit szeretnél leképezni. array('controller'=>'controllername'. php: A session adat a php. actionname a vezérlő akciójának/függvényének a neve. A Cake gondoskodni fog az időtúllépésről. és a session id-k minden kérés után újragenerálódnak medium (közepes): a session 20 perc inaktivitás után lejár low (alacsony): a session 30 perc inaktivitás után lejár ● ● CAKE_SESSION_SAVE: Határozd meg. hogy hogyan szeretnéd a session adatokat elmenteni. új session id-k generálásáról. amik leképezik az illeszkedő URL-eket a meghatározott vezérlőkre és akciókra. A lehetséges értékeke a következők: ● high (magas): a session 10 perc inaktivitás után lejár. Az útvonalak egyedi szabályok. és a firstparam az akció/függvény első paramétere. és a régi session file-ok törléséről az általad itt megadott beállításoknak megfelelően. Ezeket így lehet beállítani: Útvonal Minta <?php $Route->connect ( 'URL'.ini-ben meghatározott módon kerül elmentésre 3.php file-ban konfigurálhatóak. hogy a szép URL-ek még konfigurálhatóbbak legyenek. Ezt adták hozzá a Cake-hez. Minden paraméter. . Lehetséges értékeke: 1. ami képes leképezni az URL-eket a controller/action/params között oda-vissza. ami a firstparam-ot követi.

Egy projekt kezdeti stádiumában egy jó adag tudást kell összeszednünk. hogy beállítson egy útvonalat a PagesController::display('home')-ra. valamint .12. hozzáad. mint GyorsVáz. amelyeknek nincs tényleges haszna. $month=null) { // . Egy webes alkalmazás első felében nagy segítséget nyújt a GyorsVáz. 'action'=>'index')). ?> Egy /blog/history/05/june -hoz hasonló URL eztuán a következőképpen kezelhető: Útvonal kezelése egy Vezérlőben <?php class BlogController extends AppController { function history ($year. array('controller'=>'Blog'. Ennek van egy hátránya: a webfejlesztő nem szívesen készít űrlapokat. A *-gal illesztett URL elemek az aktív vezérlő kezelő függvényének vannak továbbadva paraméterként.2. ?> 12. analizálja az adatbázis tábláit. Az alapértelmezett útvonal megadása <?php $Route->connect ('/'. array('controller'=>'Pages'. de a GyorsVáz nem más. Nos. ami teljesen természetes egy tervezési folyamat elején. illetve a űrlapokat. nem pedig.thtml file létrehozásával felülbírálhatunk. 'action'=>'display'. oldal A következő példa illeszti az összes URL-t a /blog-ban a BlogController-hez. Útvonal Példa <?php $Route->connect ('/blog/:action/*'. és állandóan változnak. A kezdeti adatbázissémák nagyon képlékenyek. A /blog/history/05 URL-lel meghívva. ami arra van használva. töröl. és módosít gombokkal. hogy jó. eljön az ideje elvetni a GyorsVáz képességeket. és egy listát készít szerkesztés céljából. a history()-nak csak egy paramétert kell átadnia: 05. A Home egy nézet. A következő példa egy alapértelmezett CakePHP útvonal. és saját kódot kell készíteni. Az alapértelmezett akció a BlogController::index() lesz. A fejlesztő erőlködésének könnyítése végett lett a scaffolding képesség a Cake-be beépítve.. mi is azt gondoljuk.4 GyorsVáz azaz Scaffolding képességek A Cake GyorsVáz (Scaffolding) képességei nagyon jók Annyira jó. A megjeleníti megfelelő tartalmat } } ?> A 'history' az URL-ből a :action-nel volt illesztve a Blog útvonalából. Amennyiben az alkalmazásunk logikáját és nézeteit testre szeretnénk szabni. hogy teljesen rugalmas legyen. itt a $year és $month. 'home')). hogy éles alkalamzásokban is szeretnénk használni. Ennek elősegítésére szolgál.Keretrendszerek 241. amit a /app/views/pages/home. A GyorsVáz folyamat megvizsgálja.

scaffold. ha van egy beágyazott kategória.thtml /app/views/posts/scaffold/show. amit a GyorsVázzal kapcsolatban érdemes megjegyezni: a tábla minden olyan mezője. Például. } ?> Egy fontos dolog. a $scaffold változót a vezérlőhöz kell adnunk: <?php class CategoriesController extends AppController { var $scaffold.thtml /app/views/scaffold/edit. amelyeket a kapcsolt táblából (category) vesz a show/edit/new nézetekben. ha átneveznénk parentidnek. Ha GyorsVáz képességet szeretnénk alkalmazásunkhoz adni. .thtml /app/views/posts/scaffold/edit. } ?> Nem ajánljuk ezt a technikát éles alkalmazások esetén. a saját nézeteinket kell feltölteni: Tetszőleges Scaffolding nézet egy egyszerű vezérlőhöz A PostsController szokványos scaffolding nézetét ehhez hasonlóan kell elhelyezni: /app/views/posts/scaffold/index. Amennyiben meg szeretnénk változtatni a GyorsVáz nézeteit. A kapcsolt táblából választandó mező beállításához a $displayField változót kell a kapcsolt modellben beállítani. var $displayField = 'title'. oldal Web programozás (0.thtml /app/views/scaffold/show. amelynek neve megegyezik az aláhúzás jelet megelőző karaktersorral.scaffold.scaffold.scaffold. Ebben az esetben. Akkor is.scaffold.thtml /app/views/posts/scaffold/new. az külső kulcs egy táblához. A kategória (category) példánk folytatásaként beállítjuk a címek modellt: <?php class Title extends AppModel { var $name = 'Title'. melyekkel az egyes adatbáziselemeket lehet vizsgálni. és a modelljeink megfelelően vannak összekapcsolva. A Bake megcsinálja nekünk a GyorsVáz kódokat.6.thtml Ha ennél a pontnál a vezérlőlogikát is meg szeretnénk változtatni. akkor feltehetően van egy mező parent_id elnevezéssel. amikor egy tábla egy külső kulccsal rendelkezik (például a címek tábla egy category_id mezőt tartalmaz). és elkezdeni magunk felépíteni.scaffold.242.scaffold. minden vezérlő számára: /app/views/scaffold/index.thtml /app/views/scaffold/new. de egy nézet ilyen jellegű testreszabása nagyon hasznos lehet egyszerűbb esetekben. a legjobb megoldás az lenne. A Cake kódgenerátorának nagyon hasznos képessége a Bake. verzió) nézeteket.scaffold. amit magunk is testre szabhatunk az alkalmazásunkhoz illesztve. egy lenyíló menü automatikusan fel lesz töltve adatokkal. itt az ideje a GyorsVáz elvetésének. amely _id-vel végződik.thtml Szokásos Scaffolding nézetek az egész alkalmazás számára Szokásos scaffolding nézetet így kell megadni.

hanem a „Honlap” feliratnak.dtd"> <html xmlns="http://www. azért ne feledjük. A legtöbb nézetekben használható függvényt ilyen segítők szolgáltatják. A Cake rengeteg segítővel érkezik. hogy a nézet bármilyen módon ábrázolhat egy bizonyos adathalmazt. A további részletek megtalálhatók a Segítők fejezetben. hogy személyes honkapra mutató linket is kap a nézet. a renderElement().org/TR/xhtml1/DTD/xhtml1-transitional.org/1999/xhtml"> <head> <title><?php echo $title_for_layout?></title> <link rel="shortcut icon" href="favicon. az Oldaltervbe kell legyen pakolva. Egy hasznos azonban akad. formában is. Az Oldalterv fájlok itt találhatóak: /app/views/layouts. A Cake alapértelmezett Oldaltervét felül lehet bírálni a /app/views/layouts/default.0 Transitional//EN" "http://www. oldal 12.w3.5 Nézetek A Nézet egy oldal sablonja.12. Mivel a nézeteknek nem szabadna semmiféle alkalmazáslogikát tartalmazniuk. nincs túl sok közvetlenül használható (publikus) függvény a nézet osztályban. képek. A nézet sablonban hozzáférhetünk a hozzátartozó modell adataihoz. A Cake nézetek sima PHP fájlok. a vezérlő nézetének kódja ebbe kerül. hogy egy oktató adatait megkapva nem biztos. amikor az oldal generálásra megtörténik.w3. a Cake-nek tudnia kell. Ekkor nem csak a link elemnek. szintén elérhető. hisz a nézetekben ez a leginkább használt segítő. Amint az alapértelmezett Oldalterv elérhető. A modell adatai egy $data nevű tömbben érhetőek el. Megjegyzés: nem szabad összekeverni az alkalmazáslogikát és a megjelenítési logikát. A megjelenítéslogikára példa az. stb. Szóval bizonyosodjunk meg róla. Amikor egy Oldaltervet készítünk. amit a következő részben tárgyalunk részletesebben. általában az esemény (action) alapján elnevezve. Bár a legtöbb nézet fájl leginkább HTML kódot fog tartalmazni.thtml. Egy HTML segítő (helper) minden nézetből automatikusan elérhető. Ezen felül bármilyen extra adat. sőt akár egy bejegyzésnek is hiányozni kell.ico" type="image/x-icon"> </head> . akár XML. Íme egy példa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. amit a nézetnek a set() függvénnyel adtunk át a vezérlőben. Oldaltervek (Layouts) Az Oldalterv tartalmazza az összes megjelenítéssel kapcsolatos kódot.Keretrendszerek 243. Ez nagyon hasznos űrlapok készítésénél.2. ami egy nézet köré épül. szóval bármilyen PHP kódot használhatunk bennük. hogy hova tegye ezen belül a vezérlő a nézet kódját. valamint link készítésénél és az űrlap ellenőrzésénél.thtml módosításával. Bármi. hogy az Oldalterv tartalmazza a $content_for_layout (és esetleg a $title_for_layout) változókat. és mi is megírhatjuk a sajátunkat. beleértve a szkripteket és egyéb médiákat. amit minden egyes nézetedben látni szeretnénk. Például a PostsController::add() nézete itt lenne megtalálható: /app/views/posts/add.

Ezek után pedig a vezérlőben kapcsolgathatunk köztük a vezérlő $layout változójával. .."))... Egy alapelem tulajdonképpen egy mini-nézet. Az alapelemek összességében a nézetet sokkal átláthatóbbá tehetik.</div> </div> <?php echo $content_for_layout ?> <div id="footer">. verzió) Az Oldalterv címét a legegyszerűbb a vezérlőben beállítani. Bizonyos sűrűn használt tartalmi részeket ide helyezve is segíthetnek még. Alapelemek Sok alkalmazás apróbb prezentációs kódot tartalmaz. } } Annyi Oldaltervet készíthetünk a Cake alkalmazásunkhoz. vagy a setLayout() függvényt használva. segítő szövegek.thtml a kiterjesztésük. amit a többi nézetben fel lehet használni. Az ismétlődő.. A szükséges adatokat egy hash-tömbként adhatjuk át neki. navigációs elemek. amennyit csak szeretnénk. amit oldalról-oldalra meg kell ismételni. extra menük gyakran vannak Cake alapelemekként megvalósítva. Mindegyiket a app/views/layouts könyvtárba kell tenni. A Cake segítségével ezeket az ismétlődő kódrészleteket könnyedén lehet kezelni.thtml használhatja a $helptext változót. oldal <body> <div id="header"> <div id="menu">. és . az ismétlődő részeket egy külön fájlba áthelyezve.244. Reklámok. úgy. A fenti példában a /app/views/elements/helpbox. Az alapelemek a /app/views/elements/ könyvtárban találhatóak. array("helptext" => "Oh. ?> Az alapelem-ben az átadott változókat a hash kulcsainak segítségével érhetjük el (kb.6. ?> Alapelem hívása adatokkal: <?php echo $this->renderElement('helpbox'. Egy alapelemnek kiinduláskor nincs hozzáférése semmilyen adathoz. többször használatos részeket alapelemeknek nevezzük. class UsersController extends AppController { function viewActive() { $this->pageTitle = 'View Active Users'. a $pageTitle változót használva. néha az Oldalterv más és más részén.</div> </body> </html> Web programozás (0. mint ahogy a vezérlő set() függvénye működik a nézetekkel). this text is very helpful. Alapelem hívása paraméterek nélkül: <?php echo $this->renderElement('helpbox').

prezentációs. mint a segítő a nézetnek. A fő cél az újrafelhasználhatóság.szóval ez egy komponens kell legyen.. ami megfelel a fájl nevének (hozzáfűzve a 'Component' végződést). vagy mindkét logikát használja-e X? Ha üzleti logikát. amik meghatározzák.php nevű fájlt. törlés) .akkor komponens is és segítő is egyben. Saját komponens készítése Komponens készítéséhez készítsünk egy új fájlt az app/controllers/components/ könyvtárban.. oldal 12. amikor egy felhasználó be van jelentkezve . hogy készítettünk egy foo. A lényegi különbség az. korlátozni az erőforrásokhoz való hozzáférést (egy esemény: szerkesztés. akkor segítő.ez pedig prezentációs logika. hozzáadás. Ebben az esetben ezt kell írnunk: class FooComponent extends Object { var $someVar = null. Tételezzük fel. Ebben a fájlban készítenünk kell egy osztályt. } function doFoo() { $this->someVar = 'foo'. A komponenst most már használhatjuk is így: $this->Foo->doFoo(). Ez rögtön a Controller::beforeFilter() lefutása után hívódik meg.mindez üzleti logika .2. amikor az újrafelhasználhatóságot próbálják elérni: X dolgot próbálok megvalósítani.12. . ha be/ki lehetne lépni. most ez komponens vagy segítő legyen? A válasz egész egyszerű: Mit csinál? Üzleti. akkor komponens. } } Hogy ezt használni is tudjuk. ahogy fentebb láthattuk. gyakori kérdés. Egy kis analógiával a komponens az a vezérlőnek. A Cake belső könyvtárainak bővítése helyett speciális funkcionalitásokat komponensekké alakíthatunk. var $controller = true. míg a segítők prezentációs logikát tartalmaznak.Keretrendszerek 245. . Egy komponens hozzáférhet az őt betöltő vezérlőhöz a startup() metódus segítségével. Ha mindkettőt. hogy a komponensek üzleti logikát.6 Komponensek A kompenenseket a vezérlők bizonyos körülmények közötti segítésére használjuk. Szeretnénk. function startup(&$controller) { //. Ugyanakkor szeretnénk néhány bejegyzést hozzáadni a főmenühöz. A komponensek kis megosztható "vezérlőcskék". mi történjen majd a startup() metódusban. Ha prezentációs logikát. Az újdonsült fejlesztők (Baker-ek) számára. Egy példa lenne az utóbbira egy hitelesítő (autentikációs) rendszer. a vezérlődhöz hozzá kell adni az alábbi kódot: var $components = array('Foo'). Így a beforeFilter()-ben beállíthatunk különféle komponens tulajdonságokat.

6. egy nap a fő Cake disztribúcióban is benne lehet.phpwact.246. hozzáadhatjuk a CakeForge-hoz.org/php/mvc_frameworks http://www. verzió) Ha a modelleinket szeretnénk a komponenseinkben használni. Egy komponens. milyen más komponenseket szeretnénk elérni: var $components = array('Session').wikipedia.org/wiki/List_of_web_application_frameworks#Pseudo-frameworks http://www.mustap. Források A keretrendszerek közötti választáshoz néhány forrás: ● http://en. oldal Web programozás (0.com/phpzone_post_73_top-10-php-mvc-frameworks http://ajaxpatterns. Komponenseink publikálása Ha úgy érezzük. hogy komponensünk hasznos lehet mások számára is. Ellenőrizzük a snippet (kódmorzsák) archívumot is a felhasználók által beküldött komponensekért. Használhatunk más komponenseket egy komponensen belül is.org/PHP_Ajax_Frameworks ● ● ● . létrehozhatunk egy új példányt így: $foo =& new Foo(). ami egyre több ember számára hasznos a közösségben. Pusztán deklarálnunk kell.

Nem fogunk szót ejteni a szemlátomást hanyatlóban lévő vagy nem túl sok jövővel kecsegtető alternatívákról. .ro/~bittologatok/ JavaServer Pages programozóknak http://javasite. A . természetesen több más platformnak is jelentős szerepe van az iparban.inf.1 A . J2EE A Java kliens oldali (asztali alkalmazásokhoz szükséges) alapszolgáltatásokat nyújtó J2SE csomagja mellett a szerver oldali J2EE csomag is rendkívül fontossá vált az ipari alkalmazások tekintetében.pdf Bilicki Vilmos: Fejlett Programozási Technológiák II. szabvány a Web szolgáltatások keresésére és feltárására 13. (Hogy 5-10-20 év múlva milyen platformon fogunk fejleszteni.2. ma lényegében megjósolhatatlan. Egy olyan új infrastruktúrát és keretrendszert jelent. hanem kimondottan nagy méretű alkalmazások esetén a legkomolyabb piaci szereplők között szerepel.hu/dokument/jsp/JsvsServerPages.) 13.NET Keretrendszer A .bme.13.cs. Ebben a fejezetben mindössze rövid bevezetést fogunk adni a ma jelentősebb platformokról. telepítésére és futtatására.NET felület számára.További szerver platformok 247. Források ● Bittologatók: Java tanfolyam http://www. a cserélődő adatok formátuma az internetes alkalmazások között SOAP.1. Elsősorban nem kis méretű.2. kommunikációs protokoll az internetes alkalmazások között XML.html ● ● 13. http://www. hogy a webfejlesztő többféle platform esetén is megállja a helyét. A .NET A .ubbcluj.NET a Microsoft web-stratégiája.NET a következő Internetes szabványokra épül: ● ● ● ● HTTP.u-szeged. amellyel hagyományos webalkalmazások fejlesztése mellett webszolgáltatások kiszolgálását is célul tűzik ki. Így tehát szükséges.NET keretrendszer egy közös környezet a web szolgáltatások és web alkalmazások megalkotására. Microsoft .NET keretrendszer egy infrastruktúra az új Microsoft .További szerver platformok Bár a webfejlesztéssel ismerkedők számára ma legnépszerűbb a PHP nyelv és platformmal való ismerkedés. oldal 13.hu/~bilickiv/fpt_2006_1/index. szabványos formátum a web szolgáltatások kiszolgálására UDDI.

Jelenleg a következő nyelveket támogatja: C++. Perl. amit dinamikusan újra konfigurálhatunk.NET építőkövei internet szolgáltatások halmaza Web Szolgáltatások Web Szolgáltatások adatokat és szolgáltatásokat biztosítanak más alkalmazások számára.NET keretrendszer tartalmaz olyan közös osztálykönyvtárakat.6.NET keretrendszer számára.2. hogyan is van maga a web szolgáltatás megvalósítva.NET egy közös fejlesztői környezet az új . SOAP) fognak használni annak leírására. Cobol.NET támogatni fogja a gyors alkalmazásfejlesztést. Végrehajtási környezetet biztosít a tulajdonságokban gazdag alkalmazásoknak és az egyszerűsített fejlesztéseknek. Továbbá könnyű egységbe rendezést biztosít számos különböző fejlesztési nyelv között. A . Internet dinamikus szállítás Megbízható automatikus igény szerinti frissítés és telepítés az alkalmazástól függetlenül.NET. "Third-party" programozási nyelvek.NET keretrendszer egy semleges nyelvezet. . JScript (a Microsoft verziójú JavaScript). Internet tárolás . Szabványos Kommunikáció Hivatalos web szabványokat (XML. hogy mi az internetről jövő adat. A jövöbeli alkalmazások a webes szolgáltatásokat szabványos web formátumokon (HTML. Webszolgáltatások a fő építoelemei a Microsoft .NET építőkövei A .XML és SOAP) keresztül érik majd el. UDDI. 13.NET programozási modellnek. verzió) A .úgy mint az ADO. hogy tudniuk kéne.. SQL Server és Exchange technológiájára épülnek.NET és a Windows Forms-t . Python. anélkül. mint az Eiffel. Ezek a webszolgáltatások a Microsoft létező NTFS. ASP. A jövöbeli webes alkalmazások olyan rugalmas szolgáltatásokra épülnek majd.2 A . A . Visual Basic.248. oldal Web programozás (0.szintén rendelkezésre állnak majd a jövöbeni .NET keretrendszerű alkalmazásokhoz. Smalltalk stb. amik az adatok sértetlensége nélkül tudnak majd információt cserélni. Az új Visual Studio. C#. és hogy milyen webszolgáltatás tudja megvalósítani.amelyel támogatja azokat az alapvető szolgáltatásokat amik különböző számítógépes rendszerekbe épülhetnek be.NET biztonságos és elérhető helyeket kínál az adatok és alkalmazások weben való tárolására.

A Windows. Office. 13.NET több különböző szintű hitelesítési szolgáltatást támogat.2. A Windows. Ezek a szolgáltatások UDDI szabványra épülnek.NET támogatja az új fajta könyvtárszolgáltatásokat amik válaszolni tudnak XML alapú kérdésekre az internet szolgáltatásokról. Internetes könyvtár szolgáltatások A . mint például a jelszó. Ezek szolgáltatások a már létezõ Outlook és Hotmail technológiákra épülnek. ami internetes klienseken és web szolgálatásokon alapszik. Internetes üzenettovábbítás A .NET építőkőre és .NET öntámogató rendszerű lesz az Internet frissitések révén a felhasználók igényei szerint.3 .voice-mail és fax egy egységes internet szolgáltatásban egyesül megcélozva ezzel a pc-ket és minden internet elérésre alkalmas "smart" eszközt. Ezek a szolgáltatások a már létező Hotmail. Internetes Naptár A .NET a következő generációs Windows.NET szabványok. . desktop és szerver termékbe be lesz integrálva. palmtopok. valamit engedélyezi ezeknek az elérését minden internet elérésére alkalmas eszköz álltal (pck.13. sokkal pontosabban mint a kereső motorok vagy a "yellow pages". a "wallet" vagy a mágneskártya.NET infrastruktúrája a Microsoft minden operációs rendszerébe. oldal Internetes azonosítás A . telefonok). Ezek a szolgáltatások a már létező Microsoft Passport és Windows Hitelesítési technológiákra épülnek.NET. Exchange és Instant Messenger technológiákra épülnek. Támogatást biztosít minden . Az e-mail.NET gerincét. A jövöben a .NET A Microsoft Office egy új verziója az Office.További szerver platformok 249.NET architektúrával rendelkezik.NET Ma a Windows 2000 és a Windows XP formálja a .NET támogatja a munkahelyi. technológiák és fejlesztőeszközök összessége Windows. ami egy olyan új . a társas és magán naptárak internetes egyesítését.NET digitális média részére.NET Szoftver .NET támogatja az üzenetek egyesülését.

Web Services.4 SQL Server 2000 SQL Server 2000 egy teljesen webes adatbázis rendszer. Visual Basic. Tartalmaz alkalmazásokhoz kötődő web szolgáltatásokat.NET A Visual Basic.NET.2.NET-t Visual Studio.NET ASP. dokumentum kezelés és jogosultság kezelés egy XML alapú környezetbe lesz beintegrálva. Néhány a legfontosabb SQL Server jellemző közül: közvetlen adatbázis elérés böngészőből. HTML. XML és SOAP technológiát használnak.NET.NET két fő infrastruktúrális technológiáját képviselik. kommunikáció. ami által egy teljesen objektum-orientált programozási nyelvvé vált. ADO. Újdonságok az ASP.NET-ben: ● ● ● ● ● ● ● ● ● ● ● ● új nyelv támogatás programozható vezérlők esemény vezérelt programozás XML alapú komponensek Felhasználó hitelesítés Felhasználói profilok Magas skálázhatóság Fordítási kód Könnyű konfigurálhatóság Könnyű telepíthetőség ASP-n kívűli kompatibilitás tartalmazza az ADO. Web Forms. ASP. amik a .NET A legutóbbi kiadása a Visual Studionak.NET. A fejlesztő eszközök erős XML támogatással rendelkeznek valamint XML alapú programozási modelt és új objektum-orientált programozási lehetőséget kínálnak. relációs adatok lekérdezése XML-ből és XML-be való kiírása relációs formában.magába foglalja az ASP. verzió) A Office.250. valamint nyelvi újításokat a Visual Basic részére. hogy az interneten raktározzák el a dokumentumaikat.NET nyelvi erősítést kapott.NET segítségével a böngészés. SQL Server 2000 erős XML és HTTP támogatással rendelkezik.6. amely lehetővé teszi a felhasználók részére.a Visual Studio. oldal Web programozás (0. szolgálatásokat és eszközöket amik a HTTP. . 13.NET a legfrissebb verziója az ASP-nek.

hu/ ● 13.További szerver platformok 251.hu/node/41 Gérard Swinnen : Tanuljunk meg programozni Python nyelven http://learnpython.4. szerveren működtethető programozási nyelvet támogat. hogy bármilyen platformon és bármilyen böngészőben fussanak.0 több. mellyel a legtöbb hasonló keretrendszerhez képest élvezetesebben és tömörebben készíthetünk webalkalmazásokat.hu/2006/09/01/ruby-ruby-on-rails-konyvek/ Bácsi László: Hasznos Ruby és Ruby on Rails linkek http://lackac.0 IIS 6.13.hu/cikkek/rubyonrails Lénárd Gábor: Ruby. Ruby on Rails „A Ruby on Rails egy integrált. Python Források ● Web alkalmazások Python nyelven – alapok http://www.lenard.openproject.gluon.hu/articles/2007/08/08/ruby_es_ruby_on_rails_forrasok ● ● . így képessé téve az új web alkalmazásokat. Ruby nyelvű webes keretrendszer. nyílt forrású. Ruby on Rails – könyvek http://gaba. 13. Források ● ● http://www.3. oldal Internet Information Services 6.” A RoR filozófiája ma a leggyakrabban másolt webalkalmazás-logika.rubyonrails.hu/ Bártházi András: Ruby on Rails http://weblabor.

vagy éppen saját fejlesztésű keretrendszert. Magyar nyelven a Drupal93 és a Joomla94 talán a legjobban dokumentált.hu/ http://opensourcecms.com/ Ez utóbbi oldal mind az átlag felhasználó. Napjainkban a legtöbb fejlesztő cég nyílt forrású. az ismerkedést érdemes talán ezekkel kezdeni.hu/ . vagy éppen CMS rendszert alkalmaz az újrafelhasználhatóság jegyében. amely a Drupal alapjairól szól.hu/ http://nagygusztav. és a legnagyobb közösséggel rendelkező CMS.6.252. hogy a szerző honlapjáról95 a Webes tartalomkezelő rendszerek című tárgy jegyzete is elérhető. programozási tudást nem.lap. verzió) 14. Az alkalmazás jellegéből adódóan a weboldal rövid idő alatt összeáll. hogy szinte bárki öszszetett weboldalt birtokoljon. vagy egészen keveset igényel. oldal Web programozás (0. 93 94 95 http://drupal. magyarul: tartalomkezelő rendszer) általában kevés szaktudást igénylő internetes alkalmazás. Végül érdemes megemlíteni. mind az adminisztrációs felület működésébe betekintést nyújt működő demók formájában.Tartalomkezelő rendszerek A CMS (Content Management System. mely lehetővé teszi. A további ingyenes CMS-ek érdekében érdemes a következő oldalakat meglátogatni: ● ● http://cms.hu/ http://joomla.

Sign up to vote on this title
UsefulNot useful