Web Programozás

Nagy Gusztv Web programozs alapismeretek
Web programozs alapismeretek
Nagy Gusztv
Ad Librum Kiad
Budapest, 2011
A mnek erre a vltozatra a Nevezd meg!-Ne add el!-Ne vltoztasd! licenc felttelei1 rvnyesek: a mvet a felhasznl msolhatja, tbbszrzheti, tovbbadhatja, amennyiben feltnteti a szerz nevt s a m cmt, de kereskedelmi clra nem hasznlhatja fel. A knyv elektronikus vltozata, a fontosabb pldaprogramok s webcmek elrhetek a http://nagygusztav.hu/ oldalrl. A szerz a lehetsgei szerinti legnagyobb gondossggal jrt el a knyv rsa kzben. De ettl mg szmtani kell szerkeszti pontatlansgra, st nem zrhat ki a trgyi tveds sem. Mindezzel egytt a knyv alkalmas az alapismeretek megszerzsre. A kiadvny ltrejttt a Kecskemti Fiskola2 Gpipari s Automatizlsi Mszaki Fiskolai Kara3 tmogatta
Szakmai s nyelvi lektor: Dr. Pap-Szigeti Rbert4
Kiad: Ad Librum Kft. 1107 Budapest, Mzsa tr 2-6.

http://www.adlibrum.hu info@adlibrum.hu
ISBN: 978-615-5110-26-9
Nyomda: Litofilm Kft. Bort terv: Vrhegyi Attila E knyv megrendelhet a kiadtl a http://www.adlibrum.hu/Webprogramozas cmen.
1 2 3 4
http://creativecommons.org/licenses/by-nc-nd/2.5/hu/ http://www.kefo.hu/ http://www.gamf.hu/ http://pap-szigeti.hu/
Bevezets
Ezzel a knyvvel arra vllalkozom, hogy a Kecskemti Fiskola GAMF Karn tanul mszaki informatikus hallgatk kezbe olyan rsos anyagot adjak, amely az eladsok s gyakorlatok mellett tovbbi segtsget ad a web kliens s szerver oldali nyelvei, alapvetbb technolgii megismersre. A knyv felttelezi az alapvet programozsi s hlzati alapismeretek megltt. Ennek hinyban az anyag elsajttsra tbb idt kell fordtani.
A knyvkiadsrl
A knyv elkszlst ngy tanv oktatsi tapasztalatai s hat jegyzetknt kzreadott verzi elzte meg. Az elz verzihoz kpest a kisebb javtsok s kiegsztsek mellett a HTML 5, a CSS 3 s a PHP 5-s verzi nhny fontosabb jdonsga is bekerlt. Ezek mg nem mindig hasznlhatk a munka sorn, de hamarosan szksgnk lesz az ismeretkre. A PDF formtum jegyzeteimet eddig 10-20.000 alkalommal tltttk le, elg sok weboldalon ajnljk, s tbb egyetemen (pl. ELTE, BME, budai Egyetem, Debreceni Egyetem, Szegedi Egyetem) is hasznljk ktelez vagy ajnlott irodalomknt.
A knyv ra
3.600 Ft, ha a kiadtl rendeli meg a papr alap verzit 0 Ft a GAMF nappali vagy levelez tanrend, a jegyzethez tartoz kurzust felvev hallgatja 0 Ft annak szmra, aki ugyan letlti, de nem tallja hasznosnak egy kszn e-mail a nagy.gusztav@gmail.com cmre azok szmra, aki ugyan hasznosnak tartja, de fizetni nem tud rte 2.500 Ft annak szmra, aki hasznosnak tallja s tud is rte fizetni Ez utbbi esetben a nagy.gusztav@gmail.com cmre kldtt e-mailben lehet jelezni a fizetsi szndkot a szmlzsi cm megadsval. Akik inspirltak abban, hogy ezt az zleti modellt alkalmazzam: Jzus Krisztus, akitl (kzvetve vagy kzvetlen) mindent kaptam, A szabad szoftveres kzssg Kecskemt, 2011. jnius a szerz
1
1. Az alapok
Ezzel a knyvvel nem vllalkozhatunk arra, hogy minden szksges elismeretet bemutassunk s minden hatrterlettel foglalkozzunk. De felvzolunk nhny olyan terletet, amely a weboldalak kszti szmra ismert kell legyen. Egyes tmkat alaposabban meg fogunk vizsglni, ms tmkhoz pedig tovbbi anyagok forrsait fogjuk megnzni.
1.1. A web s a ltogat viszonya

Webfejlesztknt magunk is ltogatk vagyunk. Nap mint nap klnbz weboldalakat ltogatunk meg. Ahhoz azonban, hogy j weboldalakat tudjunk kszteni, olyan mdon kell ltnunk a weboldalakat, ahogy azt korbban nem tettk. Folyamatosan szem eltt kell tartanunk mrnki szempontokat is.
1.1.1. Webes tipograi alapismeretek

Sokunkkal prbltk jl-rosszul megtantani a szvegszerkesztsi alapismereteket. Azonban a papralap szvegszerkesztssel kapcsolatos tanulmnyaink htrnyunkra vlhatnak, ha nem rtjk meg a papr s a weboldal mint klnbz mdik kztti klnbsgeket.
A webes tipogra korltai5

A nyomdszoknak sokfle lehetsg ll a rendelkezskre, amikor szba kerl a tipogra, mint pldul a betkszletek puszta szma vagy az elrendezsi lehetsgek szles sklja. A webes tipogra ennl sokkal korltozottabb, mivel olyan tpusokkal s elrendezssel kell dolgozzunk, amelyrl tudjuk, hogy elrhet s hasznlhat lesz azokon a gpeken is, amelyeken az olvask megnyitjk a lapot, hiszen senki nem fejleszt csak sajt magnak weboldalt.
5 Paul Haine: Tipogra a weben cm cikke alapjn http://dev.opera.com/articles/view/11-tipografia-a-weben/
8. oldal
A webes tipogra korltai tbbek kztt a kvetkezk: Korltozott betkszlet
1. Az alapok
Nincs elvlaszts, gy a sorkizrt elrendezs csnya lesz keskenyebb oszlopok esetn Nem lehet tudni, hogy hol s hogyan nzik majd meg a munkt, gy a dizjnereknek minden kpernymretre, felbontsra s krnyezetre gondolniuk kell Ennek megrtsre a kvetkezk olvassa javasolt: Paul Haine: Tipogra a weben
http://dev.opera.com/articles/view/11-tipografia-a-weben/
rrd (Radharadhya dasa): Web tipogra 1, 2, 3

http://webmania.cc/web-tipografia-1/ http://webmania.cc/web-tipografia-2/ http://webmania.cc/web-tipografia-3/
1.1.2. Hogyan olvasunk a weben?

Ha weboldal ksztsre adjuk a fejnket, akkor j, ha tisztban vagyunk a ltogati szoksokkal. E tmt egyre tbben s egyre tfogbban kutatjk. Itt most csak egy rvid ajnl erejig foglalkozunk a tmval. Legalbb a kvetkez cikkek elolvassa clszer a tovbbhalads eltt: Hogyan olvasunk a weben?
http://www.agent.ai/main.php?folderID=4&articleID=2217&ctag=articlelist&iid=1
Kmn Veronika: A jelen forradalma: olvass a weben

http://krono.inaplo.hu/index.php/inter/weblibrary/816-a-jelen-forradalma-olvasas-a-weben
Kovcs Balzs: rs s olvass a weben

http://www.carnation.hu/hirl_cikk.php?id=47&cid=1
1.1.3. Keres(re) optimalizls

Ha egy weboldalt fradsgos munkval elksztnk, szeretnnk, ha minl tbb ltogat megtalln az oldalunkat. Aki elolvassa a cikkeinket, hozzszl a blogunkhoz, vsrol a termkeink kzl. A ltogat szerzse minden honlapnak clja. Ezrt e tmval is foglalkozunk nhny ajnlott irodalom elejig. A ltogatszerzs klasszikus mdja a keresmotorokban (pl. Google) val megjelens, mgpedig minl elkelbb helyen az ltalunk hn htott keresszavakra.
1.1. A web s a ltogat viszonya
9. oldal
Br a tmval foglalkoz rsok, weboldalak, vllalkozsok nem mindig tesznek klnbsget a keresoptimalizls s keresmarketing kztt, itt ezt megtesszk. A keresre optimalizls a sajt oldalunk fejlesztsvel trtnik. Emiatt minden weboldal-tulajdonosnak szksge van r. Mi itt erre tudunk koncentrlni. A keresmarketing sok egyb eszkzt (pl. hrlevl, zetett hirdetsek) is felhasznl, amelyek nem kpezik a weboldalunk rszt. (Ez a terlet nem tmja a knyvnek.) Nhny hasznos informciforrs: Google keresmotor-optimalizlsi tmutat kezdknek
http://googlewebmastercentral.blogspot.com/2009/06/seo-starter-guide-now-available-in-40.html
Jroli Jzsef: Mi a keresoptimalizls (Keresmarketing)?

http://webni.innen.hu/Keres_c5_91optimaliz_c3_a1l_c3_a1s
Longhand: Keresoptimalizls
http://longhand.hu/keresooptimalizalas
rdemes azonban megjegyezni, hogy a keresmarketing terletn sok tvhit kering, s sok minsgen aluli cg knlja szolgltatsait. A tvhitekkel kapcsolatban kt gondolatbresztt emltnk meg: Kungl Istvn: SEO mtoszok
http://www.seotools.hu/blog/seo-mitoszok
Katona Zsuzsa: Rangsorolsi tvhitek

http://seo-training.eu/szakirodalom/google_ranking_tevhitek
1.2. A web mkdse

Az 1. bra sokat segthet a tovbbi informcik megrtsben.
10. oldal
1. Az alapok
1. bra. A kliens-szerver architektra A felhasznl, aki a web szolgltatsait ki akarja hasznlni, megteheti ezt egy tetszleges modern webbngszvel. (E kt szereplt egyttesen a kliens oldalnak tekintjk.) A felhasznl a bngszt hasznlva kezdemnyezheti egyes weboldalak letltst. A web kezdeti idszakban a webszerver azokat az llomnyokat tudta kiszolglni, amiket a httrtrain elhelyeztek. (Ez tulajdonkppen statikus tartalmat eredmnyez, vagyis az ilyen tartalom jellemzen nem vltozik.) Bizonyos esetekben ez ma is gy van: pldul egy honlapba illesztett kp nem fog megvltozni, akrhnyszor tltjk is le, ezrt a webszervernek a bngsz krsre vlaszul mindssze vissza kell azt adni. Ksbb egyre nagyobb igny lett a dinamikus tartalmak irnt, amikor a tartalom mr a ltogat tevkenysgei, vagy ms okok miatt sznesebb, vltozbb lehet. Ebben az esetben a webszerver nem nmaga vlaszol a bngsz krsre, hanem PHP, vagy ms nyelv program lltja el a vlaszt, amit a webszerver csak tovbbt. Tovbb nvelheti az oldal dinamizmust, ha a tartalmak ellltshoz szksges adatokat (legalbb rszben) adatbzisban troljuk. Ekkor a PHP nyelv forrsprogram az adatbzisszerverrel kapcsolatot pt fel, s adatbzisbl szrmaz informcikat is felhasznl a vlasz elksztshez, illetve a felhasznlk vlaszait is eltrolja az adatbzisban.
1.2.1. Webszerver
A webkiszolgl/webszerver egy kiszolgl, amely elrhetv teszi a rajta trolt weblapokat a HTTP protokollon keresztl. A webszerverekhez webbngszkkel lehet kapcsoldni.
1.2. A web mkdse
11. oldal
Br a webszerverek sok mindenben klnbznek, az alapvet funkciik azonosak. Minden webszerver HTTP krseket fogad a hlzatrl, s HTTP vlaszokat kld vissza. A HTTP vlasz az esetek tbbsgben egy HTML dokumentum, de lehet mg egyszer szveges fjl, kp, vagy ms tpus fjl is.
Krs
A webszerverek a klienstl kapott krsekben tbbek kztt URL cmet kapnak, melyet aztn ktflekppen rtelmezhet a szerver a belltsaitl fggen: 1. A tartomnynv utn ll relatv mappa s fjl struktrt hozzrendelik egy gykrmapphoz. (A gykrmappa a webszerver belltsaiban van megadva, s az adatokat kr kliens szmra lthatatlan. Tovbbi informcik a 3.1.1. fejezetben.) 2. A tartomnynv utn ll relatv mappa s fjlstruktra (vagy akr mg a tartomnynv is) teljesen fggetlen a krt cmben szerepl struktrtl. Ebben az esetben szerver meghatrozott szablyok szerint formzza a krt cmet. Ennek segtsgvel egy mappra irnyul krs teljesen ms mappra vagy akr egy fjlra is mutathat s fordtva. A kliens pldul az albbi URL-t kri: http://www.pelda.com/utvonal/fajl.html A kliens webbngszje ezt rtelmezve ltrehoz egy kapcsolatot a www.pelda.com kiszolglval, s elkldi a kvetkez HTTP 1.1 krst:
GET /utvonal/fajl.html HTTP 1.1 Host: www.pelda.com
Vlasz
1. A www.pelda.com cmet megfelelteti a webszerver az adott gykrmapphoz (pl. /var/www/pelda), amelyhez hozzfzi a /utvonal/fajl.html elrst ezzel megtrtnt a megfeleltets a fjlrendszer erforrshoz. A krt eredmny a szerveren teht: /var/www/pelda/utvonal/fajl.html. Ezt kveten a webszerver ellenrzi, hogy kiszolglhat-e az adott krs, ill. hogy ltezik-e. Ha nem ltezett, akkor 404-es hibakddal tr vissza, ha hozzfrhet, akkor beolvassa, elvgzi rajta az esetleges tovbbi mveleteket, majd elkldi a kliensnek. A vlasz termszetesen szintn magban foglalja a megfelel fejlcet. 2. A msodik megolds esetben, az erforrsokhoz trtn megfeleltets eltt a cmet tformzza. Pldul:
www.pelda.com/toplista/kutyak+es+macskak
URL krst a kvetkezkppen alakthatja t:

/var/www/pelda/toplista.php?cim=kutyak+es+macskak
12. oldal
1. Az alapok
Modulok
Lehetsg van a vlaszok feldolgozsa eltt, az esetlegesen a krsben rkezett adatok feldolgozsra s ennek eredmnynek visszakldsre. Ilyenkor a szerver oldalon fut webszerver-modulok illetve a webszerver ltal meghvott CGI rutinok vgzik el ezt a feladatot. A programrszletek (webszerver-modulok) rendszerint a HTML kdba vannak begyazva s maga a webszerver-program hajtja ezeket vgre. Ilyenek pldul a PHP, ASP, JSP.
1.2.2. Webtrhely
A mai weboldalak kis hnyada ignyli, hogy egy vagy esetleg tbb (n. dediklt) szerver teljes egszben a weboldal kiszolglst vgezze. ppen ezrt a legtbb honlap ms honlapokkal osztozik egy webtrhely erforrsain. A virtulis webtrhely szolgltats alatt egy olyan internetes szolgltatst rtnk, ahol egy webszerver erforrsait tbb felhasznl/honlap kztt osztjk fel. Minden felhasznl egy a rendszer ltal dediklt trhelyet foglal el, aminek nyilvnos tartalma egyedi domn nven rhet el. Kisebb forgalm weboldalt kltsghatkonyan lehet brelt webtrhelyen zemeltetni. Trhelyet n. trhelyszolgltatktl6 brelhetnk. A webtrhely szolgltats ltalban tartalmaz egy adminisztrcis felletet (pl. cPanel7), hogy a brl a trhelyt menedzselni tudja. Osztott trhelyszolgltatk rendszerint az egyes szolgltatsokat zikailag elklntett kiszolgl rendszereken oldjk meg, az gyflkiszolgl s adminisztrcis rendszer, a levelez kiszolgl, az adatbzis szerver, a webszerver zikailag elklntett kiszolglkon mkdik. A legtbb webkiszolgl alacsony kltsg Linux vagy BSD alap LAMP szerver. (A LAMP a Linux, Apache, MySQL, PHP szavak rvidtst jelenti.) Az egyes opercis rendszerekre ptett szolgltatsok lnyegben meghatrozzk a felhasznl ltal elrhet technolgik csoportjt is. Windows alap webtrhely esetn a felhasznl vlaszthat ASP.NET s Microsoft SQL Server, de akr PHP s MySQL Server tmogatst is; mg LAMP szerver esetn csak PHP nyelv weboldalakat kszthetnk MySQL Server tmogatssal.
1.2.3. Virtulis szerver

A hagyomnyos osztott webtrhelyek helyett egyre npszerbb megolds a virtulis szerver alkalmazsa. A virtulis szerver, ms nven VPS (Virtual Private Server) a vals szerver erforrsainak egy bizonyos rszt hasznlhatja. Ezek az erforrsok lehetnek dedikltak, azaz kizrla6 7 http://tarhely.lap.hu/ http://www.cpanel.net/
1.2. A web mkdse
13. oldal
gosan az adott virtulis szerver veheti ignybe a neki kiosztott erforrsokat, fizikai hardver elemeket, vagy megosztottak: pl. kt virtulis szerver hasznlhatja az egyik proceszszort, azaz osztoznak a teljestmnyn, de lehetsgk van nagyobb kapacits kihasznlsra is, amennyiben a msik fl kevsb terheli (2. bra).
2. bra. VPS architektra A szerver virtualizcival teljestmnyben s hardver felptsben is (ezek virtulis hardverek, amik az egyes fizikai hardverekbl vagy azok bizonyos hnyadbl llnak) fizikai gphez mlt konfigurcit hozhatunk ltre, melynek kezelse gyakorlatilag megegyezik a vals szerverekvel, ugyanakkor rengeteg elnnyel br velk szemben.
1.2.4. HTTP protokoll

A HTTP (HyperText Transfer Protocol) egy informcitviteli protokoll a vilghln. Az eredeti clja a HTML lapok publiklsa s fogadsa volt. A HTTP egy krs-vlasz alap protokoll kliensek s szerverek kztt. A kommunikcit mindig a kliens kezdemnyezi. A HTTP klienseket gyjtnven user agent-nek is nevezik. A user agent jellemzen, de nem felttlenl webbngsz. A HTTP ltalban a TCP/IP rteg felett helyezkedik el, de nem fgg tle.
HttpFox
A gyakorlatban a HTTP megismershez a Firefox bngsz HttpFox 8 nev kiegsztje nagyszer lehetsget nyjt.
8 https://addons.mozilla.org/en-us/firefox/addon/httpfox/
14. oldal
1. Az alapok
A 3. brn ltszik, hogy a weboldal letltshez (fell az els sor) milyen HTTP krst kldtt el a bngsz (lent balra), s milyen vlaszt kapott a webszervertl (lent jobbra). A tovbbi sorok (fent) a HTML feldolgozsa utn szksges CSS, JavaScript s kp llomnyok letltst is mutatjk.
3. bra. A HttpFox mkds kzben
Krs (request)
Egy HTTP krs els sora mindig metdus erforrs verzi alak, pldul gy:
GET /images/logo.gif HTTP/1.1
Ezt a sort kvetheti tetszleges szm fejlc sor kulcs: rtk alakban, pldul gy:
Accept: text/plain,text/html Accept-Language: en
A fejlc sorok vgt egy res sor jelzi, melyet az opcionlis zenettest kvet. A sorokat a CRLF (azaz kocsi vissza + soremels) karakterprral kell elvlasztani. A fejlc vgt jelz res sor csak ezt a kt karaktert tartalmazhatja, nem lehet benne szkz s tabultor sem.
Metdusok
HTTP protokoll nyolcfle metdust definil. A metdusok a megadott erforrson vgzend mveletet hatrozzk meg.
1.2. A web mkdse

HEAD
15. oldal
Ugyanazt adja vissza, mint a GET, csak magt az zenettestet hagyja ki a vlaszbl. A megadott erforrs letltst kezdemnyezi. Ez messze a leggyakrabban hasznlt metdus. Feldolgozand adatot kld fel a szerverre. Pldul HTML rlap tartalmt. Az adatot az zenettest tartalmazza. Feltlti a megadott erforrst. Trli a megadott erforrst. Visszakldi a kapott krst. Ez akkor hasznos, ha a kliens oldal arra kvncsi, hogy a kztes gpek vltoztatnak-e illetve mit vltoztatnak a krsen. Visszaadja a szerver ltal tmogatott HTTP metdusok listjt. talaktja a krst transzparens TCP/IP tunnell. Ezt a metdust jellemzen SSL kommunikci megvalstshoz hasznljk.
GET
POST
PUT DELETE TRACE
OPTIONS CONNECT
1. tblzat. HTTP metdusok

Biztonsgosnak azokat a metdusokat nevezzk, amelyek csak informci lehvsra szolglnak s elvben nem vltoztatjk meg a szerver llapott. Ms szval mellkhats nlkliek. Ilyenek pldul a HEAD, a GET, az OPTIONS s a TRACE. Fontos megjegyezni, hogy a gyakorlatban lehetnek a biztonsgos metdusoknak is szerveroldali mellkhatsai.
Vlasz (response)
A HTTP vlasz els sora a sttuszsor, amely verzi sttuszkd indokls alak. A sttuszkd egy hrom szmjegy szm, az indokls egy angol nyelv zenet. Az elbbit inkbb gpi, az utbbit inkbb emberi feldolgozsra szntk. Egy egyszer plda sttuszsorra:
HTTP/1.1 200 OK
A sttuszkdok jelentst az RFC 26169 tartalmazza rszletesen, az albbi lista egy ttekint osztlyozst ad a kezd szmjegy alapjn:
http://rfc-ref.org/RFC-TEXTS/2616/index.html
16. oldal
1xx 2xx 3xx 4xx 5xx
1. Az alapok
Informatv Krs megkapva. Siker A krs megrkezett; rtelmezve, elfogadva. tirnyts A krs megvlaszolshoz tovbbi mveletre van szksg. Kliens hiba A krs szintaktikailag hibs vagy nem teljesthet. Szerver hiba A szerver nem tudta teljesteni az egybknt helyes krst.
2. tblzat. HTTP vlasz kdok

A sttuszsor utn fejlc sorok kvetkezhetnek a HTTP krsnl ltott mdon, pldul gy:
Date: Mon, 23 May 2005 22:38:34 GMT Server: Apache/1.3.27 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Accept-Ranges: bytes Content-Length: 438 Connection: close Content-Type: text/html; charset=UTF-8
A fejlc sorokat itt is res sor zrja, melyet az opcionlis zenettest kvet.
Munkamenet (session)
A HTTP egy llapot nlkli protokoll. Az llapot nlkli protokollok elnye, hogy a szer vernek nem kell nyilvntartania felhasznli informcikat az egyes krsek kiszolglsa kztt. A HTTP eredetileg nem arra kszlt, hogy felhasznlk jelentkezzenek be rajta keresztl szerverekre s ott munkamenetet (session-t) indtsanak. Trtnetileg azonban gy alakult, hogy a HTTP terjedt el szles krben ms, felhasznli bejelentkezst tmogat protokollok helyett, ami arra knyszertette a webfejlesztket, hogy kerlutakon jrva troljk a felhasznlk munkamenet-llapotait, ha arra szksg van.
1.2.5. FTP protokoll

A File Transfer Protocol, a TCP/IP hlzatokon trtn llomnytvitelre szolgl szabvny. Gyakran van szksg arra, hogy valamilyen llomnyt hlzaton keresztl tltsnk le sajt gpnkre, vagy egy llomnyt msok szmra hozzfrhetv tegynk. Erre alkalmas az FTP, ami lehetv teszi a klnbz opercis rendszer gpek kztt is az informcicsert. A hozzfrsi jog alapjn ktfle kapcsolattpus ltezik: letlts, vagy feltlts nyilvnosan hozzfrhet llomnyokbl vagy llomnyokba, letlts, vagy feltlts olyan gprl, ahol azonostval rendelkeznk.
1.2. A web mkdse
17. oldal
Azt a folyamatot, amikor egy tvoli szmtgprl fjlt mentnk a sajt szmtgpnk httrtrra, letltsnek nevezzk; feltltsnek nevezzk, ha a folyamat fordtott irnyban zajlik, s mi tltnk fjlt ms gpre. Az FTP kapcsolat gyfl/kiszolgl alap, vagyis szksg van egy kiszolgl (szerver) s egy gyflprogramra (kliens). Elterjedt protokoll, a legtbb modern opercis rendszerhez ltezik FTP-szerver s kliens program, sok webbngsz is kpes FTP-kliensknt mkdni.
1.2.6. Webcm (URL)

A webcm, ms nven URL (amely a Uniform Resource Locator, vagyis egysges erforrsazonost rvidtse), az Interneten megtallhat bizonyos erforrsok (pldul szvegek, kpek) szabvnyostott cme. Elszr Tim Berners-Lee alkotta meg a World Wide Weben val hasznlatra. A jelenleg hasznlt formtumot rszletesen lerja az IETF RFC 1738 10 szabvnya. A webcm az Internet trtnetnek alapvet jtsa. Egyetlen cmben sszefoglalja a dokumentum megtallshoz szksges ngy alapvet informcit: a protokollt, amit a clgppel val kommunikcihoz hasznlunk; a szban forg gp vagy tartomny nevt; a hlzati port szmt, amin az ignyelt szolgltats elrhet a clgpen; a fjlhoz vezet elrsi utat a clgpen bell. Egy tipikus, egyszer webcm gy nz ki:
http://hu.wikipedia.org:80/wiki
Ennek rszei: A http hatrozza meg a hasznland protokollt. A protokoll neve utn kettspont (:) rand. A hu.wikipedia.org adja meg a clgp tartomnynevt. Ez el kt perjel ( //) rand. A 80 adja meg a clgp azon hlzati portszmt, amin krsnket vrja; ez el kettspont (:) rand. Ezt a rszt gyakran teljesen elhagyhatjuk, pldul esetnkben a HTTP protokoll alaprtelmezett portszma a 80. A /wiki/Bit a krt elrsi t a clgpen. Ez a rsz mindig a per-jellel (/) kezddik. A legtbb bngsz nem is ignyli, hogy a http:// rszt begpeljk egy weblap elrshez, hiszen az esetek dnt tbbsgben gyis ezt hasznljuk. Egyszeren begpelhetjk a
10 http://tools.ietf.org/html/rfc1738
18. oldal
1. Az alapok
lap cmt, pldul: hu.wikipedia.org/wiki/Bit. A cmlap megtekintshez ltalban elg a tartomny nevt berni, pldul hu.wikipedia.org. A webcmek egyb rszeket is tartalmazhatnak, http esetben pldul az elrsi t utn, egy krdjel (?) mg helyezve keressi krds szerepelhet, ami egy get metdus HTML rlapbl vagy specilis mdon sszelltott hiperhivatkozsbl szrmazik. Az elrsi t utn, attl egy ketts kereszttel (#) elvlasztva szerepelhet a hiperszveg egy rszre hivatkoz azonost. Ez az azonost nem rsze a webcmnek, de gyakran szerepel vele kapcsolatban. Pldk:
http://hu.wikipedia.org/w/wiki.phtml?title=Bit&action=history http://hu.wikipedia.org/wiki/1999#Esemnyek
A webcm az URI11 egy olyan fajtja, ahol az azonosts a dokumentum helye alapjn trtnik. Ha egy weblapot egyrtelmen meghatroz egy webcm, akkor r mutat hivatkozst hozhatunk ltre. Ez a helyzet nem mindig ll fenn, pl. egy menpont megvltoztathatja a lapon bell az egyik keret 12 tartalmt anlkl, hogy ennek az j kombincinak kln webcme lenne. Ezen kvl egy weblap fgghet ideiglenesen trolt informcitl is. Mg ha van is egy weblapnak vagy keretnek nll webcme, ez nem mindig nyilvnval annak a szmra, aki r mutat hivatkozst kvn ltrehozni. Egy keret webcme nem ltszik a cmsvban, s ltrehozhat cmsv nlkli ablak is. A webcm ilyenkor a lap forrsa, illetve egyes rszeinek tulajdonsga alapjn meghatrozhat. Azon kvl, hogy r mutat hivatkozst hozzunk ltre, egyb okokbl is kvncsiak lehetnk egy lap webcmre: ha tartalmt nllan akarjuk megjelenteni, illetve, ha bizonyos megszortsokat (eszkztr nlkli, vagy kicsi, mretezhetetlen ablak) meg akarunk kerlni.
1.3. A tervezs folyamata

Mint minden mrnki feladat, a webfejleszts sem kpzelhet el tervezs nlkl egy bizonyos mret felett. Elszr is tisztznunk kell a cljainkat.
1.3.1. A honlap clja

A szerz a megrendelvel val kommunikcit egy interj formjban javasolja kezdeni, az albbi krdsekkel. A krdsekre adott vlaszok kztt persze nagy lehet az tfeds, az
11 Az URI az erforrst ktflekpp azonosthatja: hely szerint (URL) vagy nv szerint (URN). 12 A keretek (frame-ek) segtsgvel az ablak tbb tglalapra felbonthat, s minden rszben nll HTML llomny lesz megjelentve. Ma mr elavult s kerlend techniknak szmt.
19. oldal
interj clja az elrend clok teljes kr feltrkpezse. Egy konkrt esetben teht bizonyos krdseket ki is hagyhatunk, ha azok feleslegesnek, rtelmetlennek tnnek. Ms esetben tovbbi krdsek is szksgess vlhatnak. Mi a clunk a honlappal? Kik lesznek a ltogatink? Mit szeretnnk bemutatni? Mik a kulcsfontossg funkcik? Milyen visszajelzseket vrunk a ltogatinktl? Rszt vesznek-e a ltogatink a tartalom ellltsban? Miben fog a tartalom s a szolgltats fejldni (pl. 1 hnap, 1 v mlva)? Ki fogja az oldalt karbantartani? Milyen csoportos s szemlyes jogosultsgi krkre lesz szksg? Hol s hogyan szeretnk a honlapot az interneten reklmozni? Ltogatottsgi statisztikkat szeretnnk-e megismerni? Termszetesen a krdsek akkor is alkalmazhatk, ha a sajt vagy cgnk honlapjt szeretnnk elkszteni. Tovbbi rszletek a szerz honlapjn tallhatak: http://nagygusztav.hu/honlap-interju-mi-az-oldal-celja Nhny hasonl forrs: Kanga Design Gyakori krdsek
http://kangadesign.hu/honlap-keszites-gyakori-kerdesek.html
Wolf Gbor: Top 10 honlap hiba s hogyan javtsd ki?

http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html
7even: Mit gondoljon t Weboldal indts eltt

http://www.7even.hu/weboldal-keszites/weboldal-inditas-elott
1.3.2. A honlap megtervezse

Ha mr tudjuk, mi a clunk a honlapunkkal, akkor kezdjnk bele az oldal megtervezsbe. Ehhez meg kell vlaszolnunk mg a kvetkez krdseket.
20. oldal
1. Az alapok
Milyen oldalaink lesznek?

A vlasz egy konkrt, tteles lista legyen. Pldul: kezdoldal (hrekkel) kapcsolat termkkategrik tartalomjegyzke termkkategrik oldalai termkek oldalai vendgknyv oldal stb.
Milyen viszonyban llnak az oldalak egymssal?

Itt az al-fl rendeltsgi viszonyon kvl gyakori a mellrendelt kapcsolat is. A vlasz az oldal navigcijnak kitallsban fog segteni. Illusztrciknt nzznk meg egy zenei egyttes honlapjnak oldaltrkpt 13 (4. bra).
13 Forrs: http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/
21. oldal
4. bra. Oldaltrkp Ezutn nevezzk el az oldalainkat, s rjuk hozz rvid tartalmi sszefoglalkat.
Hogyan pljenek fel az oldalaink?

Az oldal funkcionlis ltvnytervt tervezve el kell dntennk, hogy a klasszikus 1, 2 s 3 oszlopos oldalelrendezs kzl melyiket vlasztjuk, hova kerljn a log, fcm, lblc stb. hogyan pljn fel a navigcis struktra (fels men, bal oldali men, kenyrmorzsa men14, cmkefelh, stb.) a menk egy vagy tbbszintek legyenek melyik szls oszlopban milyen tartalm dobozok s milyen sorrendben szerepeljenek
14 A kenyrmorzsa men a felhasznli felleteken hasznlt navigcis eszkz, amely a kiindulponttl a felhasznl jelenlegi tartzkodsi helyig vezet utat mutatja. Pl.: Cmlap ECDL Vizsgakzpontok GAMF Kar
22. oldal
1. Az alapok
Jl t kell gondolnunk, hogy a ltogatink szmra a leglogikusabb, legttekinthetbb struktrt tudjuk nyjtani. Az oldalelrendezs megtervezshez igen hasznos a Paper prototyping mdszere (5. bra).
5. bra. Paper prototyping plda Ezen kvl egyre elterjedtebb a drtvz (wireframe, mockup) eszkzk hasznlata is. Pldaknt a MockFlow egy Youtube tervt15 nzzk meg (6. bra).
6. bra. Drtvz bra a MockFlow oldalrl

15 Forrs: http://www.mockflow.com/samples/

Tovbbi informcik: http://dev.opera.com/articles/view/6-informacios-architektura-egy-website-t/ http://weblabor.hu/blog/20100901/jo-weboldal-terv http://www.alistapart.com/articles/paperprototyping http://ergomania.blog.hu/2010/09/28/drotvaz_vagy_szoveg http://opendir.hu/?freedom=/
tartalom/weboldal_tervezes/drotvazas_weboldal_tervezes_online_eszkozzel
23. oldal
http://arth2o.com/blog/honlap-drotvaz-es-gui-prototipus
1.4. A fejlesztkrnyezet kialaktsa

ltalnos esetben a szerverkrnyezet kialaktsa a rendszergazda feladatkrhez tartozik, mgis fontos, hogy alapszinten tlssuk a feladatokat, lehetsgeket. Msrszt a sajt fejleszti gpnkn alkalmazott szoftverek is nagyban befolysoljk a munknkat, gy errl is ejtnk nhny szt.
1.4.1. Szerver opercis rendszer

Elszr is nzzk meg, melyek ma a webkiszolglkban gyakran hasznlt opercis rendszerek.
Linux
Az elterjedtebb, s nem kimondottan asztali (desktop) hasznlatra sznt Linux16 disztribcik teleptsvel mkd web-, s adatbzis szervert kapunk. Akr rgebbi, ms felhasznlsok szmra rtktelen hardverre is telepthetnk Linuxot. Egy kisebb forgalm honlapot tkletesen kpes kiszolglni. A nagy nev disztribcik friss verzii a mai cscsgpek meghajtsra s cscs ignyek kiszolglsra alkalmas, szintn knnyen telepthet lehetsget nyjtanak a rendszergazdknak. nll szerver zemeltetse nlkl, web-hosting szolgltats 17 ignybe vtelvel is tbbnyire Linux alap szerverekkel tallkozhatunk.
16 http://www.linux.hu/ 17 http://tarhely.lap.hu/
24. oldal
1. Az alapok
BSD
Kevsb kzismert, de egyes rendszergazdk krben stabilitsa miatt nagy npszersgnek rvend Unix18 opercis rendszerek. Az alapvet vltozatok szerver feladatokra optimalizltak, gy nagyszeren alkalmasak a webes krsek kiszolglshoz.
Windows
Br les webes krnyezetben nem jelents a rszesedse, azrt elfordul az alkalmazsa. A tanuls szakaszban azonban sokszor a legkzenfekvbb megolds az egyetlen (tbbnyire Windows opercis rendszerrel mkd) szmtgpnket szerverr alaktani. A fejezet tovbbi rszben ezzel a tmval fogunk foglalkozni. Ha a fejlesztshez Windows opercis rendszert alkalmazunk, akkor rdemes nhny technikai dologra figyelni. Elszr is az llomnynevekben a Windows nem tesz klnbsget kis-, s nagybet kztt, ezrt ha pl. HTML-ben vagy CSS-ben nem vagyunk kvetkezetesek, akkor Windows alatt mg mkdni fog az oldal, de ha a ksz munkt ms opercis rendszert futtat gpre kell tvinni, akkor az problms lesz. Javasolhat, hogy webes fjl esetn nagybet soha ne szerepeljen a fjlnvben. Az FTP kliens alkalmazsok az ilyen jelleg hibk elkerlse rdekben ltalban lehetv teszik az FTP-vel tvitt llomnyaink kisbetstst is. Hasonl okok miatt nem clszer az llomnynevekben kezetes betket vagy egyb specilis karaktereket alkalmazni. Vgl szintn fontos, hogy a knyvtrnevek megadsnl a \ helyett mindig a / jelet hasznljuk, s soha ne adjunk meg Windows alatt rvnyes teljes elrsi utat, pl. kerlend a <img src="C:\www\kep.gif"> forma.
1.4.2. Szerver alkalmazsok

Linux s BSD alatti teleptst most nem trgyaljuk, a hasznlt disztribci dokumentcijt rdemes fellapozni19. Itt a Windows alatti szerver krnyezet kialaktst fogjuk trgyalni.
XAMPP integrlt telept csomag

Mivel a szerver alkalmazsok teleptse nem mindig egyszer feladat, prblkozhatunk elre csomagolt, s minden szksges alkalmazst telept s bekonfigurl programokkal
18 http://www.bsd.hu/ 19 Pl. LAMP szerver: http://sugo.ubuntu.hu/community-doc/jaunty/universe/apps/lamp-server.html
25. oldal
is. Ezek kzl csak egyet mutatunk be rszletesen, a tbbi alkalmazsa hasonl. A szolgltatsok krben lehetnek jelentsebb eltrsek is.
A telept-csomagok htrnya, hogy br tbbnyire mkdnek, egy esetleges hiba elllsa esetn a hiba megszntetse elgg bajos lehet, mivel kevsb tudunk a csomag mkdsbe beleltni.
A szerz ltal leginkbb ajnlott integrlt telept csomag az XAMPP20. Az XAMP for Windows 1.7.3 vltozata tbbek kztt a kvetkez szoftvereket telepti s konfigurlja: Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l MySQL 5.1.41 + PBXT engine PHP 5.3.1 phpMyAdmin 3.2.4 A letlttt teleptprogram a Windows alatti teleptsek szoksos krdseit teszi fel. Legfontosabb a telepts helye. A telepts utn a Start menbl s parancssorbl is vezrelhetjk az alkalmazsokat, de legegyszerbb az XAMPP Control Panel alkalmazsa (7. bra). A webszerver mkdst a bngsz cm sorba rt localhost cm lekrsvel tudjuk tesztelni. Ekkor az It works! szveg a mkds bizonytka. A PHP s a MySQL mkdst legegyszerbben a localhost/phpmyadmin lekrsvel tesztelhetjk.
20 http://www.apachefriends.org/en/xampp-windows.html
26. oldal
1. Az alapok
7. bra. XAMPP Control Panel
1.4.3. A fejleszt gpe

Szerverknt akr a sajt gpnket hasznljuk, akr egy tvoli szervert, a kvetkez szoftverekre szksgnk lesz.
Bngsz
A weboldalt ltogatk igen sokfle bngszt hasznlnak. Emiatt a webfejlesztnek legalbbis az elterjedtebb tpusokat ismernie s hasznlnia kell tesztelsi clokbl.
Hogy pontosan milyen arnyban hasznljk a ltogatk az egyes bngszket s azok verziit, igen sok vita trgya. A szerz a weboldal jelenlegi adatait a Google Analytics alapjn szokta figyelni, ltalnos informciknt pedig a http://www.w3schools.com/browsers/browsers_stats.asp statisztikit.
Ezen kvl fejlesztknt sem mindegy, melyik bngsz mennyi tmogatst ad a fejlesztsi folyamat gyorstshoz. Ebbl a szempontbl legjobb vlaszts a Firefox, amelyhez j nhny fejlesztshez hasznlhat kiegszt tlthet le21. A szerz ltal gyakrabban hasznlt kiegsztk:
21 https://addons.mozilla.org/hu/firefox/extensions/web-development/
1.4. A fejlesztkrnyezet kialaktsa HTML Validator22
27. oldal
A 8. brn lthat, ahogy a sznkiemels alatt a szintaktikai hibk s a hibk rszletes lersa is megtekinthetk. Kis gyessggel (Oldal javtsa gomb) akr a hibk egy rsztl is megszabadulhatunk.
8. bra. Forrs megtekintse a HTML Validator megjelentsvel
FireBug23
A 9. brn lthat kiterjeszts az oldalt s a forrskdjt teljesen szimultn mutatja, rdemes megfigyelni az egrkurzorral irnythat kk dobozokat.
22 http://users.skynet.be/mgueury/mozilla/ 23 http://getfirebug.com/
28. oldal
1. Az alapok
9. bra. A Firebug mkds kzben A kvetkez videkkal alaposabban megismerhetjk a Firebug szolgltatsait: rrd (Radharadhya dasa): Firebug 10 percben
http://webmania.cc/firebug-10-percben/ http://webmania.cc/firebug-10-percben-2/ http://webmania.cc/firebug-10-percben-3/
Web Developer24
A Web Developer segtsgvel szintn rengeteg informcit gyjthetnk az oldalrl (10. bra), de akr tesztelhetjk is CSS, JavaScript vagy kpek nlkl az oldal kinzett, mkdst.
24 https://addons.mozilla.org/hu/firefox/addon/60/
29. oldal
10. bra. Web developer div informcik
HTML Validator25
A HTML Validator az oldalunk HTML s CSS szabvnyossgt tudja ellenrizni.
Fjlkezel
A webfejleszts kzben igen gyakran van szksg llomnykezelsi feladatokra. Ehhez a Windows intz helyett clszer valamelyik kt paneles szoftvert alkalmaznunk. Az llomnyok msolsa, szinkronizlsa, biztonsgi mentsek kezelse napi szint feladat. Legismertebb manapsg a Total Commander26, Linux alatt a Krusader27, de vannak szp szmmal tovbbi szoftverek is.
FTP kliens
Szksgnk lesz valamilyen FTP kliensre az llomnyok szerverre feltltshez. Erre a clra megolds lehet a Total Commander, de clszer inkbb megismerni a FileZilla28 alkalmazst. A FileZilla egy szabad FTP kliens, amely knnyen hasznlhat, tbb szlon is kpes fel-, s letlteni, folytatja a megszakadt letltseket, tbb opercis rendszeren s nyelven mkdik. Az egyre gyakoribb SFTP-hozzfrs miatt j megolds a WinSCP29 hasznlata is.
Programozi editor, IDE

A webfejleszts sorn idnk j rszben forrskdok begpelst fogjuk vgezni. Ezrt nagyon nem mindegy, milyen tmogatst kapunk ehhez az editorunktl. Nem igazn alkal25 26 27 28 29 https://addons.mozilla.org/hu/firefox/addon/249/ http://www.totalcommander.hu/ http://www.krusader.org/ http://filezilla-project.org/ http://winscp.net/
30. oldal
1. Az alapok
mas a feladatra a Jegyzettmb. De nem nagyon alkalmasak az n. WYSIWYG (What You See Is What You Get) editorok sem, mert tlsgosan megktik a keznket. A szerz vlemnye szerint a webfejlesztnek olyan eszkzkre van szksge, amelyek gy adnak tmogatst, hogy a folyamatot a fejleszt, s nem a program vezrli. Ezen szoftverek egyik legjobbika a Komodo Edit30, amelyik a kdsznezs mellett kdkiegsztssel s l (FTP feletti) szerkesztssel is megbirkzik.
Kpszerkeszt program
A fejleszt a vals letben tbbnyire kp(ek) formjban kapja meg az oldal ltvnytervt, valamilyen szveges formtumban a szveges rszt, s nyers formban a tartalomhoz kapcsold fnykpeket. Ebben az esetben a fejleszt feladata az, hogy a ltvnyterv alapjn elksztse az oldal HTML s CSS kdjt, s rhzza minderre a dizjnt, a szveget s a fnykpeket. A grafikus programok szempontjbl ez azt jelenti, hogy a dizjnt alkot kpet tglalap alak rszekre kell vgni, a fnykpeket pedig mretre hozni, javtani, sznkorrekcit, vilgostst stb. vgrehajtani. E feladatok elltsra rszben a Paint is megfelel, de rdemes valamivel komolyabb szoftvert alkalmazni. A Paint.NET31 olyan ingyenes kpszerkeszt, amely a szmtalan hagyomnyos rajzeszkz mellett tbb klnleges rajzszerszmmal rendelkezik Ilyenek a varzsplca, az utmunklatra hasznlhat tsznez ecset vagy a klnblyeg. A beptett, ltvnyos effektusai segtsgvel egyszerv vlik a retusls. Tovbbi rdekessge a rtegkezels, a lapolvask, a digitlis fnykpezgpek s rajzpadok kezelse. Linux alatt a GIMP-et alkalmazhatjuk vals idej ktegfeldolgoz rendszerknt, vagy mint nagy teljestmny kpszmol, de hasznlhatjuk egyszeren kpkonverternek is. A GIMP hihetetlenl jl bvthet. gy lett tervezve, hogy plug-in bvtsekkel brmire kpes legyen. Fejlett script-fellete lehetv teszi, hogy a legegyszerbb feladatoktl a legbonyolultabb kpfeldolgozsi eljrsokig minden knnyen elrhet legyen parancsfjlokbl is.
30 http://www.activestate.com/komodo-edit 31 http://www.getpaint.net/
2
2. A tartalom s a kinzet
A weboldalak eredeti, s mig legfontosabb clja a tartalmak kzzttele. Erre a HTML mellett a CSS nyelvet hasznljuk. A HTML a tartalom szerkezett, a CSS pedig a kinzett rja le. E kett szorosan sszefgg, de megfelel tervezssel preczen el is vlaszthat egymstl.
A szerz kedvenc illusztrcis pldja a CSS Garden 32 oldala, ahol ugyanazt a HTML struktrt ezernyi klnbz mdon lehet megtekinteni, pusztm a dizjn (CSS llomnyok s a kpek) cserjvel.
2.1. HTML alapok

A HTML nyelv az az alap, amivel minden webfejlesztnek elszr meg kell ismerni, s alaposan tisztban kell lenni. Ez a fejezet segtsget ad a HTML lehetsgeinek megismershez, de tbb nyelvi elem bemutatstl is eltekint. Ennek fbb okai: Bizonyos HTML jellemzk a mai napra elavultnak tekinthetk. Itt elssorban a kinzet eszttikai megjelensre kell gondolni. A CSS hasznlatval ugyanis sokkal tbb s jobb lehetsgnk lesz a kinzet lersra. A HTML a mai gyakorlatban mr tisztn csak az informcira, s annak struktrjra figyel. Ezt szemantikus kdolsnak is nevezzk. Bizonyos tagok, tulajdonsgok a bngszk ltal nem egysgesen tmogatottak, gy ezeket a gyakorlatban is csak kevesen hasznljk.
2.1.1. Mi az a HTML?
A HTML a Hyper Text Markup Language rvidtse A HTML llomny egyszer szvegllomny, amely rvid jell tagokat tartalmaz A jell tagok alapjn tudja a bngsz, hogyan kell megjelentenie az oldalt
32 http://www.csszengarden.com/tr/magyar/
32. oldal
A HTML llomny html kiterjesztssel rendelkezik
A HTML llomnyt egyszer szveges (editor) programokkal (pl. Jegyzettmb) is ltrehozhatunk
2.1.2. Hogyan kezdjnk neki?

Windows opercis rendszer alatt indtsuk el a Jegyzettmbt (vagy inkbb egy komolyabb editort, 1.4.3. fejezet), majd gpeljk be a kvetkez szveget:
<html> <head> <title>Az oldal cme</title> </head> <body> Ez az els honlapom. <strong>Ez a szveg kiemelt.</strong> </body> </html>
Mentsk el a szveget oldal.html nven!

Ebben s a kvetkez nhny fejezetben mg nincs felttlen szksgnk webszerver elrsre a tanulshoz. Ksbb majd FTP kapcsolaton keresztl a webszerverre fogjuk az oldalainkat feltlteni, majd webszerver elrsvel tesztelni azokat.
Nyissuk meg a bngsznket, majd a Fjl men Webcm megnyitsa parancst vlasztva keressk meg az elbb elmentett oldal.html llomnyt! (Tovbbi lehetsgnk, hogy a Windows Intzben, vagy Total Commanderben dupln kattintunk az llomny nevre. De az llomny bngszre vonszolsval is clt rhetnk.) A 11. brhoz hasonlt kell ltnunk a bngsznkben:
11. bra. Az els HTML oldal a bngszben
A plda magyarzata
A dokumentum els tagja a <html>. A bngsz errl fogja tudni, hogy hol kezddik a HTML oldal. Az utols tag a </html>, itt r vget a dokumentum a bngsz szmra. A <head> s </head> tagok kztti rsz a fejlc informci. Az itt lert szveget a bngsz nem jelenti meg kzvetlenl.
2.1. HTML alapok
33. oldal
A <title> tagok kztti szveget a bngsz a cmsorban jelenti meg, ahogy az brn is lttuk. A <body> tagok kztti szveg jelenik meg a bngsz ablakban. A <strong> s </strong> tagok hatsra a szveg kiemelten (alaprtelmezetten flkvren) jelenik meg.
2.1.3. HTML szerkesztk

Lteznek olyan szerkesztprogramok, amelyekkel tnyleges HTML ismeretek nlkl is lehet HTML oldalakat ltrehozni. Ezeket a programokat WYSIWYG (what you see is what you get) editoroknak hvjuk. Ezek azonban kerlendk, ha minsgi HTML oldalakat szeretnnk ltrehozni. (Legalbbis a tanuls kezdeti fzisban.) Ezek a programok ugyanis kisebb-nagyobb mrtkben teleszemetelik a kdot. rdemes inkbb olyan szerkesztprogramot vlasztani, ahol a HTML kd fltt teljes ellenrzssel brunk, ugyanakkor kiegszt szolgltatsokkal (pl. sznkiemels, tagok beszrsa gombnyomsra stb.) gyorstani lehet a munkt. (Lsd. 1.4.3. fejezetben.)
2.1.4. Hogy nzzk meg egy oldal HTML kdjt?

Gyakran elfordul, hogy a weben bngszve megtetszik egy oldal, s szeretnnk megnzni a forrst. (A szerz vlemnye szerint ez az egyik legjobb mdszer a tanulsra.) Hogyan tehetjk ezt meg? Keressk meg a bngsznk Nzet menjt, majd Forrs, vagy Oldal forrsa (vagy valami hasonl nev, bngsz fgg) menpontot. A szerz javasolja a fejlesztshez a Firefox nev bngszt, amely eleve webfejlesztk szmra lett kifejlesztve, s tbb ezer kiterjesztse (plug-in) kzl j nhny a HTML forrs knnyen ttekinthet megjelentst szolglja. (Az 1.4.3. fejezetben bemutattuk a legjobbakat.)
2.1.5. HTML tagok

A HTML llomny egyszer szvegllomny, amely rvid jell tagokat tartalmaz. A HTML tagok segtsgvel elemek definilhatk.
HTML tagok jellemzi

A HTML tagok jellik ki a HTML elemeket
34. oldal
A HTML tagot a < s > rsjelek veszik krl (ezek az rsjelek az egyszer szvegekben nem engedlyezettek) A HTML tagok ltalban prban vannak, mint a <html> s </html> A pr els tagja a kezd, a msodik a zr tag A szveg (tartalom) a kezd s a zr tag kztt helyezkedik el A HTML tagok kis-, s nagybetvel is rhatk
2.1.6. HTML elemek

A korbbi pldban a kvetkez plda egy elem:
<strong>Ez a szveg kiemelt.</strong>
A HTML elem kezd tagja <strong>, az Ez a szveg kiemelt. a tartalom, s </strong> a zr tag. A kvetkez is egy HTML elem:
<body> Ez az els honlapom. <strong>Ez a szveg kiemelt.</strong> </body>
Az elem kezd tagja <body> s a zr tagja </body>
2.1.7. Tag tulajdonsgok

A tagok tartalmazhatnak tulajdonsgokat (ms nven attribtumokat, jellemzket) is. Ezek a jellemzk jrulkos informcik az elem egszre nzve. Az img tag segtsgvel kpet tudunk az oldalunkkal beilleszteni. Ehhez azonban meg kell mondanunk, hogy hol tallja a bngsz a kp llomnyt. Pldul, ha szeretnnk egy logt (logo.png) megjelenteni a weboldalunkon, a kvetkez szveget kell begpelnnk:
<img src="logo.png">
A tulajdonsgok nv-rtk prokkal (src="logo.png") adhatk meg, egymstl szkzzel elvlasztva akr tbb is.
Melyik idzjelet alkalmazzuk?

A nyelv elssorban a (dupla) idzjel alkalmazst rja el. A bngszk az aposztrf jelet is elfogadjk, mgis rdemes inkbb a hagyomnyos idzjelet alkalmazni.
2.1. HTML alapok
35. oldal
2.1.8. ltalnos tulajdonsgok

A HTML tagoknak klnbz tulajdonsgaik lehetnek. Ksbb meg fogjuk ismerni a klnbz HTML tagok specilis tulajdonsgait. Ebben a fejezetben az ltalnosan hasznlhat tulajdonsgok kerlnek a kzppontba.
Alaptulajdonsgok
class: az elem osztlya, tbb tagnak lehet ugyanaz az rtke. Clja, hogy tbb elemet is azonos kinzetre formzhassunk. id: a tag egyedi azonostja, ugyanazon rtk nem fordulhat el tbbszr. style: soron belli stlus definci.
title:
rvid sg szveg (n. tooltip) definilsa.
Nyelvi tulajdonsgok
dir: az rs irnyt definilja lang: a nyelvet adja meg Ezek segtsgvel akr egy bekezdsnek, vagy ms elemnek is adhatunk egyedi informcit a weboldal alaprtelmezshez kpest. (Pl. egy magyar oldalon idznk egy francia verset.)
Billenty tulajdonsgok
accesskey: gyorsbillentyt rendel az elemhez. tabindex: tabultorral trtn elemvlts sorrendjt befolysolja. (rlapok esetn hasznlhat.)
2.1.9. Megjegyzsek
A megjegyzs tagot megjegyzsek elhelyezsre hasznljuk. A bngsz nem veszi figyelembe a megjegyzsbe rt szveget. (Termszetesen a megjegyzs megtekinthet a forrskdban.)
<!Ez egy megjegyzs -->
A megjegyzsben nem fordulhat el kt ktjel a > nlkl.
36. oldal
2.1.10. Karakter entitsok

Bizonyos karakterek (mint pldul a < s >) specilis jelentsek a HTML-ben, ezrt nem hasznlhatk a foly szvegben. Ezenkvl vannak olyan specilis rsjelek, amelyek hagyomnyos billentyzetrl nem vihetek be, vagy nem is szerepelnek az ASCII kdtblban.(Pl. a jel.) Ha egy ilyen specilis karaktert akarunk megjelenteni, akkor karakter entitst kell alkalmaznunk. A karakter entits hrom rszbl ll: & az elejn, ; a vgn, a kett kztt pedig egy entits nv, vagy # s szmkd. Ha pldul a < jelet szeretnnk megjelenteni, akkor a dokumentumba az < vagy a < karaktersorozatot kell gpelnnk. Az entitsok kis-nagybet rzkenyek.
Nem trhet szkz

A gyakorlatban taln a legtbbet alkalmazott karakter entits a nem trhet szkz. A HTML a tbb egymst kvet elvlaszt (n. white space) karaktert csak egy szkzknt jelenti meg. Ilyen esetekben szoks a entitst egyms utn tbbszr alkalmazni, ugyanis ezeket tnylegesen figyelembe veszi a bngsz. Ez azonban nem felel meg a HTML eredeti cljnak, s a mai technikai lehetsgeknek sem. (Stlus formzsok segtsgvel ezek a problmk sokkal elegnsabban oldhatk meg.) Ennek az entitsnak eredetileg az a clja (s a szerz vlemnye szerint csak ilyen esetben szabadna alkalmazni), hogy a tbb szbl ll kifejezsek (pldul tulajdonnv) esetn a sor vgn ne trje szt a bngsznk a kifejezst, hanem mindenkppen egy sorba kerljenek. Pldul a kvetkez nv mindig egy sorba, trdels nlkl fog kerlni:
Nagy Gusztv
kezetes karakterek
Az angol abc-ben nem szerepl karakterek (gy a magyar nyelv kezetes karakterei is) sokig problmt okoztak a HTML szerkeszts sorn. Ezrt korbban szoks volt az kezetes karaktereket is entitsok segtsgvel megadni. A mai napra azonban ezek a problmk lnyegben megszntek, ezrt a szerz vlemnye szerint teljesen indokolatlan az entitsok alkalmazsa. Helyette inkbb a pontos karakterkdolsra rdemes figyelmet fordtani.
A karakterkdols megadsra elszr HTML meta tagok lehetsgt fogjuk megismerni. Ksbb a PHP-bl kldtt HTTP header alkalmazsa mg jobb megolds lesz. Tovbbi informcik a 3.1.5. fejezetben tallhatak.
2.1. HTML alapok
37. oldal
Tovbbi karakter entitsok

Lers
< > & " '
Jelents nem trhet szkz kisebb, mint nagyobb, mint s idzjel aposztrf bekezds copyright
Entits nv
< > & " ' § ©
Entits szmkd
< > & " ' § ©
3. tblzat. Tovbbi karakter entitsok

Az entitsok teljes listjt a HTML referenciban rdemes33 keresni.
2.1.11. Szemantikus HTML

A szemantikus HTML nem ms, mint a HTML tagok jelentsnek betartsa, rendeltetsszer hasznlata. Pldul, egy bekezdst nem hasznlunk fel men kialaktshoz. Azrt fontos ez, mert a keresgpek, automatikus katalgusok, HTML rtelmezk ez alapjn tudjk kategorizlni az oldal tartalmait. Pldul egy felolvasprogram egy cmsort ki tud emelni felolvass kzben is, vagy egy keresgp tud idzetekre keresni egy bizonyos szerztl, ha jl meg van formzva a HTML. A gyakrabban elfordul hibkkal szemben nhny j megkzelts: A cmsorokat a <h*> elemekkel adjuk meg, gy ahogy a tartalom strukturldik; a <h1>-el kezdjk, ez az oldal cme, majd jnnek a tovbbiak Az oldalnak egyedi cmet adunk a fejlcben (title): az egsz webhely cme + oldal cme). A bekezdsek szvegeit <p> elemekbe tagoljuk, az j bekezdsnl nem csak a kurzort visszk j sorba egy <br> elemmel, hanem valban jelezzk a bekezds vgt s egy j kezdett.
33 Egy olvasmnyosabb sszefoglal tallhat a http://htmlhelp.com/reference/html40/entities/latin1.html cmen.
38. oldal
A klnbz listkat a lista elemekkel definiljuk. (<ul>, <ol>, <dl>). Taln nem trivilis, de a menket is <ul>, <li> elemmel rdemes megadni. (A menpontok is egyfajta listt jelentenek.) Ide tartozik mg, hogy a HTML 5 tovbb ersti a szemantikus HTML kialakts lehetsgeit. Ezekrl ksbb lesz sz, pl. a 2.4.7. fejezetben.
2.1.12. Szabvnyossg
A HTML nyelv a kezdetektl fogva szigor szablyokra plt. A Microsoft Internet Explorer s a Netscape Navigator34 harcnak egyik mellktermke, hogy a bngszk felismernek, rtelmeznek olyan HTML oldalakat is, amelyek nem felelnek meg a szabvnynak. St a webfejlesztk ezekre a pontatlansgokra r is szoktak, s ebbl a korszakbl sok mig is elrhet de elavult szemllet, ismertet tallhat a weben. A HTML nyelv minden verzija, vltozata egy gynevezett Document Type Definition (DTD) segtsgvel definilt. A bngszk szmra segtsg, ha a dokumentum elejn pontosan lerjuk, hogy melyik verzihoz tartjuk magunkat. A HTML 4.01 vltozata 3 fle DTD-vel rvnyesthet. A legpontosabb (strict) vltozat nem engedlyezi az elavult rszek (tbbnyire formz elemek s tulajdonsgok) hasznlatt, valamint a kereteket. A kvetkez elemet kell a dokumentum els elemeknt elhelyezni:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Az tmeneti (transitional) DTD megengedi az elavult rszek hasznlatt is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Keretek hasznlata esetn hasznlhat harmadik DTD-t gyakorlatilag nem fogjuk hasznlni.
A HTML 5-s verzija leegyszersti a DTD hasznlatot. Csupn ennyit r el:

<!DOCTYPE html>
Az oldalunk HTML szabvnyossgnak ellenrzsre tbb lehetsgnk van: http://validator.w3.org/ online hasznlata Firefox bngszbe bepl HTML Validator35.
34 A Netscape 2007 utols heteiben hossz haldokls utn befejezte plyjt. tadta helyt a pusztn ksrleti clokbl ltrehozott, de villmgyorsan felemelked Mozilla Firefoxnak. 35 http://users.skynet.be/mgueury/mozilla/
2.1. HTML alapok
39. oldal
2.1.13. HTML 5
Br a HTML 5-s vltozata36 mg nem vgleges szabvny, folyamatosan ersdik a tmogatsa. Emiatt mindenkppen rdemes megismerkednnk a mg fejleszts alatt ll, de holnap mr szabadon hasznlhat megoldsokkal. Tbbek kztt a 2.4.7., 2.7.3. s 2.10.2. fejezetekben olvashatnak ennek rszleteirl.
2.1.14. XHTML
Az XHTML nyelvet a HTML 4 levltsra hoztk ltre egy vtizede, de ez nem terjedt el a gyakorlatban. A HTML 5 jelenlegi fejldsnek fnyben gy tnik, hogy nem is fogunk vele a jvben sokat tallkozni. Ezt azonban csak ksbb tudhatjuk meg. Nem felesleges azonban, ha tudunk a kvetkez nhny alapelvrl. St, akr mg hasznos is lehet az alkalmazsuk. A kvetkez sorokban nhny pontban megnzzk, miben tr el egy XHTML dokumentum a HTML-tl.
Egymsba gyazs
Az elemek csak megfelelen egymsba gyazva s mindig lezrva lehetnek. A kvetkez pldban az egymsba gyazssal van problma:
<b><i>Ez egy flkvr s dlt szveg</b></i>
A helyes megolds:
<b><i>Ez egy flkvr s dlt szveg</i></b>
A tagok neveit kisbetvel kell rni

A tagok neveit kisbetvel kell rni, ezrt a kvetkez hibs:
<BODY> <P>Ez egy bekezds.</P> </BODY>
A helyes vltozat:
<body> <p>Ez egy bekezds.</p> </body>
Elemek lezrsa
A HTML elemeket le kell zrni. Hibs:
36 http://www.w3.org/TR/html5/
40. oldal
<p>Ez egy bekezds. <p>Ez egy msik bekezds.
A helyes:
<p>Ez egy bekezds.</p> <p>Ez egy msik bekezds.</p>
Zr pr nlkli elemek
Zr pr nlkli elemek esetn is le kell zrni. Itt azonban egy rvidtett rsmd is alkalmazhat:
Sortrs<br /> Elvlaszt vonal<hr /> Kp <img src="happy.gif" alt="Happy face" />
A / eltti szkz csak a visszafele kompatibilits miatt kell, az XHTML nem ignyli. Teht azrt kell szkz, hogy a csak HTML-t ismer bngszk is meg tudjk jelenteni az oldalt.
A tulajdonsg-rtkeket mindig idzjelbe kell tenni

Ez praktikus HTML-nl is, ha a tulajdonsg rtke pl. szkzt tartalmaz. XHTML-ben azonban mindig ktelez:
<table width="100%">
A tulajdonsgok ktelezen tartalmaznak rtket is

Ha a HTML nem r el rtket (vagyis a tulajdonsg lnyegben logikai jelzknt mkdik), akkor az rtk megegyezik a tulajdonsg nevvel.
<input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" />
A name tulajdonsg helyett az id hasznland

Hibs teht:
<img src="picture.gif" name="kep" />
Helyes:
<img src="picture.gif" id="kep" />
A rgebbi bngszkkel val kompatibilits miatt mindkettt is szoktk alkalmazni:

<img src="picture.gif" id="kep" name="kep" />
2.2. CSS alapok
41. oldal
2.2. CSS alapok

2.2.1. Mi a CSS?
A CSS a Cascading Style Sheets rvidtse A stlusok a HTML megjelentsi elemei s attribtumai helyett hasznlhatk, azoknl jval tbb lehetsget biztostva A stlusok meghatrozzk, hogy hogyan jelenjenek meg vizulisan a HTML elemek A stluslapok segtsgvel knnyen szt lehet vlasztani az oldal tartalmt annak kinzettl (a dizjntl) A stlusokat ltalban kln llomnyban troljuk (.css kiterjesztssel) Kls stluslapokkal gyorstani tudjuk a munkavgzst Tbb stlus is hatssal lehet egy elem megjelensre
Kedvcsinl
Mieltt a CSS alapos megismershez kezdennk, mindenkppen clszer a CSS Zen Garden37 oldalt megltogatni. Ez az oldal azzal a cllal jtt ltre, hogy a CSS-sel szembeni ellenrzseket lerombolja, s bemutassa, milyen risi lehetsgek vannak a dizjner kezben, ha a CSS-t komolyan s szakszeren hasznlja. Ezen az oldalon ugyanazt a HTML ol dalt lthatjuk sok-sok klnbz dizjnn formlva csupn a CSS llomny (s termszetesen a dekorcis kpek) cserjvel. A teljessg ignye nlkl nhny kpernykp (1215. bra):
37 Magyar oldal: http://www.csszengarden.com/tr/magyar/
42. oldal
12. bra. CSS Zen Garden plda
A stlusok hasznlatnak okai

A HTML tagok eredetileg arra lettek megalkotva, hogy a dokumentum tartalmt definiljk. Amikor egy cmet, bekezdst vagy tblzatot akarunk ltrehozni, akkor hasznlhatjuk pl. a h1, p s table tagokat. A tnyleges megjelents a bngszre van bzva, eldntheti, hogy mit hogyan jelentsen meg a tagok, az ablakmret, a felhasznl belltsai alapjn.
2.2. CSS alapok
43. oldal
Ksbb a kt nagy bngsz (a Netscape Navigator s az Internet Explorer) jabb s jabb HTML tagokat s tulajdonsgokat adott a bngsz ltal felismert HTML nyelvhez (pl. a font tag, vagy a color tulajdonsg). gy belekeveredtek a HTML nyelvbe a megjelentst befolysol elemek. (Radsul a bngszk csak rszben s ksbb tmogattk a vetlytrs jtsait.) A problmt a World Wide Web Consortium 38 (W3C), egy non-profit, szabvnyokat alkot szervezet oldotta meg. A HTML 4.0-s verzijval s a vele prhuzamosan fejlesztett CSS segtsgvel ltrejtt egy jl hasznlhat eszkzpros a webfejlesztk rszre. Mra minden jelentsebb bngsz tmogatja a CSS-t, br a tmogatottsg mrtkben vannak eltrsek.
A Microsoft (s tbb ms, magt a sajt terletn monopolhelyzetben tud cg) mdszere, hogy a fggetlen szabvnyokat (a szerz vlemnye szerint) tudatosan s szndkosan figyelmen kvl hagyja azt remlve, hogy a versenytrsak helyzett ezzel lehetetlenn teszi. Egszen a Firefox megjelensig s a felhasznlk krben val viharos sebessg elterjedsig (kb. 2005-ig) ez a taktika sikeresnek ltszott. Ksbb azonban knytelen volt vltoztatni hozzllsn, az gretek szerint az IE 9-es megelzi a ms bngszket HTML 5 s CSS 3 tmogatottsgban. Kb. 2009-tl a Google Chrome is komoly rszesedst rt el. Ebben a felgyorsult versenyben az igazi gyztesek mi, a felhasznlk vagyunk.
A stluslapokkal munkt sprolhatunk

A stluslapok azt definiljk, hogy hogyan jelenjenek meg az egyes HTML elemek. A stluslapokat kln .css kiterjeszts llomnyban szoks elhelyezni. gy knnyedn lehet ugyanazt a megjelentst adni a honlap sszes oldalhoz, mindssze egyetlen CSS llomny szerkesztsvel. Ha brmit vltoztatni kell a dizjnon, lnyegben csak ezt az egyetlen llomnyt kell mdostanunk.
Egy elemre tbb stlusdefinci is hatssal van

A stlusok egy vagy tbb elemre, vagy akr az egsz oldalra is hatssal lehetnek (ez utbbi a body elem formzsval). Megfordtva: egy elemre hatssal lehet a soron belli stlusa, a head elembeli formzs s akr kls CSS llomny is. St egy HTML oldalhoz akr tbb kls CSS llomnyt is rendelhetnk.
Lpcss elrendezs
Melyik stlus fog rvnyeslni, ha tbb stlust is definilunk ugyanahhoz a HTML elemhez? A kvetkez ngy bellts rvnyesl egyre nagyobb prioritssal (teht tkzs esetn a ksbbi fellrja az elzt). 1. a bngsz alapbelltsa 2. kls stluslap
38 http://www.w3.org/
44. oldal
3. head elemben definilt stlus 4. soron belli stlus
Teht a soron belli stlus a legmagasabb priorits, s fellr minden alacsonyabb szint formzst. Ezen kvl fontos mg figyelembe venni egy ltalban jl hasznlhat klszablyt: az a stlusdefinci fog rvnyeslni, amelyik a legszkebb hatkrrel rendelkezik. Pl. ha minden bekezdst barna sznre lltunk, de egy egyedi azonostval rendelkez bekezdst zldre, akkor az utbbi szably rendelkezik szkebb hatkrrel. gy ennl a bekezdsnl zld lesz a szn.
Kezd (st kzphalad) CSS hasznlat esetn is nagyszeren lehet boldogulni az igen bonyolult szablyok precz ismerete nlkl, erre az klszablyra s a jzan paraszti szre alapozva. Egy bevezett azonban mgis figyelmkbe ajnlunk Tommy Olsson tollbl39.
2.2.2. Hol legyenek a stlusdefincik?

A stlus informcikat hromfle mdon rendelhetjk hozz a HTML dokumentumunkhoz. Clszer azonban les krnyezetben a kls stluslapokat alkalmazni.
Kls stluslap
A kls stluslap alkalmazsa a legidelisabb eset. Ekkor a HTML llomny az oldal informatv rszt tartalmazza, a kls CSS llomny pedig sszegyjtve a megjelentsre vonatkoz formzsokat. A HTML oldalhoz a head elemben elhelyezett <link> tag segtsgvel csatolhatunk kls CSS llomnyt:
<head> <link rel="stylesheet" type="text/css" href="stilus.css"> ... </head>
A CSS egy jabb megkzeltse az @import hasznlata:

<head> <style type="text/css"> @import url("stilus.css"); </style> ... </head>
Ezzel a szintaxissal akr a CSS llomnyba is importlhatunk tovbbi CSS llomnyokat, a C vagy PHP nyelvek include megoldsaihoz hasonlan.
39 http://dev.opera.com/articles/view/28-inheritance-and-cascade/#thecascade
2.2. CSS alapok
45. oldal
Kls stluslap fjlt nem HTML oldalanknt kln-kln, hanem akr egy egsz portlhoz egyetlen (vagy nhny) fjlknt szoks kszteni. gy a tovbbi oldalak ltogatsa esetn nincs szksg a CSS fjl jbli letltsre.
Begyazott stluslap
Begyazott stluslapot ksz oldalnl akkor szoks alkalmazni, ha az oldal egyedi (a kls stluslapot nem lehetne msik oldalhoz felhasznlni), vagy nagyon egyszer stlusrl van sz. Persze a dizjn kialaktsnak fzisban is j megolds lehet. Begyazott stluslapot a head elemben szerepl style tag segtsgvel definilhatunk.
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> ... </head>
Soron belli stlus

Soron belli stlust esetleg akkor szoks alkalmazni, ha olyan egyedi stlusrl van sz, amelyik sehol mshol nem fordul el.
A szerz vlemnye szerint mg ilyen esetekben sem rdemes ezt alkalmazni, a CSS alapos megismersvel s gyes szervezssel ezt el lehet kerlni.
Soron belli stlus alkalmazshoz a kivlasztott elemet kell style tulajdonsggal elltni. A kvetkez plda csak e bekezds megjelentst vltoztatja meg:
<p style="color: red; margin-left: 20px">Ez egy bekezds</p>
2.2.3. A CSS nyelvtana

A nyelvtan hrom elemet klnbztet meg: kivlaszt, tulajdonsg s rtk:
kivlaszt {tulajdonsg: rtk}
A kivlaszt legegyszerbb esetben egy HTML tag, a tulajdonsg azt hatrozza meg, hogy milyen jellemzt akarunk mdostani, mg az rtk a vltozst hatrozza meg. A tulajdonsgot s az rtket egy kettsponttal kell egymstl elvlasztani, s a kettt egytt kapcsos zrjelbe tenni:
body {color: black}
Ha az rtk tbb szbl ll, idzjelbe kell tenni:

p {font-family: "sans serif"}
46. oldal
Ha egy kivlaszt esetn tbbfle tulajdonsgot is mdostani szeretnnk, knnyedn megtehetjk, mindssze pontosvesszvel kell elvlasztani a tulajdonsg-rtk prokat.
p {text-align:center; color:red}
A stlusdefincik jobb olvashatsga rdekben inkbb tbb sorba rdemes tagolni:

p { text-align: center; color: black; font-family: arial }
Egyszerre akr tbb kivlasztra is rvnyesthetjk a formzst. Ekkor a kivlasztkat vesszvel elvlasztott listaknt kell felsorolni. A pldban minden cmet zlden szeretnnk megjelenteni:
h1, h2, h3, h4, h5, h6 { color: green }
Osztly alap kivlaszts

Osztly kivlaszt segtsgvel ms-ms mdon tudjuk megjelenteni az egyes osztlyokba sorolt elemek tartalmt. A pldban a kt klnbz osztlyhoz tartoz bekezdsek msms formzst kapnak:
p.right {text-align: right} p.center {text-align: center}
Ez a kt stlus a kvetkez kt bekezds megjelensre hatssal lesz:

<p class="right"> Ez egy jobbra igaztott bekezds. </p> <p class="center"> Ez egy kzpre igaztott bekezds. </p>
A p tagoknak nem ktelez megadni class tulajdonsgot, vagy akr ms is lehet a class rtke, de ezekben az esetekben a fenti stlusoknak nem lesz hatsa a bekezdsekre. Az osztly szint kivlasztst nem ktelez taghoz ktni, lehet tagoktl fggetlen, ltalnos osztly kivlasztt is definilni. A plda minden center osztly elemet kzpre igazt. (Mr amelyik HTML elemnl egyltaln van rtelme a kzpre igaztsnak.)
.center { text-align: center }
A formzs minden center osztly tagot kzpre igazt:
2.2. CSS alapok

<h1 class="center"> Ez egy kzpre igaztott cm. </h1> <p class="center"> Ez egy kzpre igaztott bekezds. </p>
47. oldal
rdemes megemlteni, hogy a class tulajdonsg tbb rtket is kaphat, egymstl szkzzel elvlasztva:
<h1 class="center alahuz">
Ilyen esetben mr az egyik kivlaszt (.center) hasznlata esetn is tallat lesz. Ha csak azokat a tagokat akarjuk kivlasztani, amelyek tbb class tulajdonsgot is tartalmaznak, akkor a .center.alahuz szintaxist kell hasznlnunk. Ekkor az egyik osztlyba igen, de a msikba nem tartoz elemek nem lesznek kivlasztva.
Azonost alap kivlaszts

A HTML elemeknek megadhatjuk az egyedi id tulajdonsgot. gy az egyedi id-vel rendelkez elemhez specilis formzst hatrozhatunk meg. CSS-ben a # segtsgvel tudunk elemet id alapjn kivlasztani. A kvetkez pldban a menu azonostj elem betsznt zldre lltjuk:
#menu {color: green}
A para1 azonostj bekezdst kzpre igaztva s piros sznnel definiljuk:

p#para1 { text-align: center; color: red }
Univerzlis kivlaszt
A * szelektorral minden elemet egysgesen tudunk formzni:
* { border: 1px solid #000000; }
Tulajdonsg kivlaszt
A kvetkez plda csak azokra a kpekre fog vonatkozni, amelyek alt tulajdonsga meg van adva:
img[alt] { border: 1px solid #000000; }
A kvetkez plda mg a tulajdonsg rtkt is figyelembe veszi:

img[src="alert.gif"] { border: 1px solid #000000; }
48. oldal
Gyermek kivlaszt
Gyakori, hogy az elemek tlzott id s class tulajdonsggal val elltsa helyett inkbb az elemek hierarchijra (ms megfogalmazsban leszrmazsra, mint a csaldfnl) ptnk. Pl. a kvetkez plda csak a h3 elemen bell kzvetlenl elhelyezked strong tagra lesz rvnyes. Teht nem vonatkozik a h3 elem ms rszeire, s nem vonatkozik a nem kzvetlenl h3-ban lev strong elemekre sem.
h3 > strong { color: blue; }
Leszrmazott kivlaszt
Az elzhz igen hasonl lehetsg nem csak a kzvetlen szl-gyermek kapcsolatra, hanem az akr tbb szint rkldsre, vagy mshogy fogalmazva a tartalmazsra pt. Nzznk egy pldt:
<div> <em>Szia!</em> <p>Ez a bekezds <em>ksznt</em> tged. </p> </div>
Ekkor a div > em kivlaszt csak az els, mg a div em kivlaszt mindkt em tagot formzza.
Testvr kivlaszt
Gyakran van szksg arra, hogy egymst kzvetlen kvet elemek (vagyis testvrek) irnybl fogalmazzuk meg a kivlasztsunkat. Pl. egy h2-es cmet kvet bekezdsek kzl az elst mshogy szeretnnk formzni, mint a tovbbiakat. Ekkor j megolds lehet a h2 + p kivlaszt, amely a h2 utni p tagot cmzi meg.
Megjegyzs
A CSS fjlba azrt szoktunk megjegyzseket tenni, hogy a ksbbi megrtst s mdostst knnyebb tegye. CSS megjegyzsknt egyedl a C nyelvbl ismert /*...*/megjegyzs hasznlhat:
/* Ez itt egy megjegyzs */ p { text-align: center; /* Ez itt egy msik megjegyzs */ color: black; font-family: arial }
2.2. CSS alapok
49. oldal
A gyakorlatban szoktuk mg arra is hasznlni a megjegyzseket, hogy egyes formzsokat ideiglenesen kikapcsoljunk vele.
2.2.4. Szervezsi elvek

Egy komolyabb dizjn kialaktsakor igen sszetett CSS kdunk lesz. Nem egyszer gy lerni a kdot, hogy az egy ksbbi tovbbfejleszts esetn, esetleg ms fejleszt szmra is jl olvashat, egyrtelm lesz. De nfegyelemmel, s hasznos alapelvek kialaktsval, betartsval mgis elrhet. Nzznk meg nhny tletet ezzel kapcsolatban.
A CSS lpcss formzsa

Br a gyakorlatban mg nem terjedt el, nagyobb CSS llomnyok esetn az ttekinthetsget jelentsen javtani tudja a CSS forrs (a C nyelven megszokotthoz hasonl) behzsa. Pldul:
body {...} p {...} p.balra {...} table {...} table#egyik td {...}
Termszetesen ez a lersi md nem teljesen mechanikus, tbbflekppen is lehet a logikai csoportostst szervezni.
Tematikus sztvlaszts
Bonyolultabb esetekben szoks a CSS llomnyokat tipogrfiai (a szvegekhez szorosan kapcsold) s dizjn (a menk, blokkok, stb. megjelentshez kapcsold) szempontok mentn kln llomnyokra bontani.
CSS keretrendszerek
Egyesek ltal felmagasztalt, msok ltal lenzett megolds a CSS keretrendszerek alkalmazsa. A tmogati az jrafelhasznlhat megoldsokkal indokoljk dntseiket. Sokszor tnyleg egyszerbb egy jl sszelltott alapra pteni, mint egy j rendszert kipteni. A sok lehetsg kzl a 960 Grid System40 az egyik leggretesebb megolds. Jl mutatja, hogy a tervezs a kiadvnyszerkesztsnl szoksos gondolkozsmdra pt. Ezt demonstrlja a kvetkez bra41 is:
40 http://960.gs/ 41 Forrs: http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-gridsystem/
50. oldal
16. bra. 960 Grid System plda
2.2.5. Mdia tpusok

Ma mr egy weboldalt tbbfle krnyezetben hasznlhatunk. Egy weboldalt megnzhetnk kpernyn, kzi-szmtgpen, mobiltelefonon, vagy akr kinyomtatva is. Clszer minden mdihoz a hozz legjobban ill formzst elkszteni. Pl. nyomtatsban a talpas, kpernyn a talp nlkli betket tartjuk olvashatbbnak. Bizonyos elemeket (pl. menket) felesleges kinyomtatni, mg weblaprl kifel mutat linkek href rtkt nagyon hasznos megolds. Nzznk pldt a bettpusok eltr kezelsre. Nyomtatsban s kpernyn ms-ms mretet s bettpust alkalmazhatunk a kvetkez stlusokkal:
@media screen { p.test {font-family: verdana, sans-serif; font-size: 14px} } @media print { p.test {font-family: times, serif; font-size: 10px} } @media screen, print { p.test {font-weight: bold} }
Msik gyakran alkalmazott lehetsg, amikor a HTML kdhoz kln-kln stluslap llomnyokat ksztnk:
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">
2.2. CSS alapok
51. oldal
Nzznk nhny gondolatot Matkovsk Pter CSS lpsrl-lpsre: nyomtats cikke42 alapjn. Ne nyomtassunk ki felesleges rszeket:
#header, #footer, #menu { display: none; }
Az oldal fix szlessg rszei is gondot okozhatnak, hasznljunk %-os megadst:

#container, #main { width: 100%; }
Cmsorok utn soha, de h1 eltt mindig legyen oldaltrs:

h1, h2, h3, h4, h5, h6 {page-break-after: avoid;} h1 {page-break-before: always;}
Nyomtassunk ki a kifel mutat linkeket:

a:after {content: " [" attr(href) "] ";}
Ltszdjon a link a nyomtatsban (min egyfajta kiemelt szveg):

a:link, a:visited, a:hover, a:active { text-decoration: underline; color: black; }
Gondoljunk a sznekre is:

body {color: black; background: white;}
A fontosabb mdiatpusok:
all aural handheld print projection screen
minden eszkz felolvas szoftver kzi megjelent lapozhat (nyomtats) vetts (mint egy kirakati reklm, vagy az S543 mdszer) kperny
4. tblzat. Mdiatpusok
42 http://weblabor.hu/cikkek/cssnyomtatas 43 http://meyerweb.com/eric/tools/s5/
52. oldal
2.2.6. Validtor
A CSS kd ellenrzsre az online is hasznlhat W3C CSS Validation Service 44 egy nagyon j eszkz. Arra azrt figyelni kell, hogy csak rvnyes HTML kddal lehet a CSS r vnyessgt vizsglni.
2.2.7. CSS 3
Az elmlt vekben a HTML-hez hasonlan a CSS terletn sem volt sok vltozs. A CSS 2 ta megszoktuk, hogy a weboldalak szpek is lehetnek. Nagyon szpek. Hamarosan kialakultak olyan technikk, amelyek ersen ptettek a grafikus szoftverek tudsra s a kisebb-nagyobb egyedi trkkkre. Ma ezek (mint pl. a lekerektett sarkok, szntmenetek, rnykok stb.) mr annyira ltalnosan hasznltak, hogy a laikus internetez nem is sejti, mennyi kreativits s munka szksges ezek hasznlathoz. Ma a CSS 3 terletn is a vltozs kort ljk. Egyre-msra jelennek meg az jabb verzik, javtsok a nagyobb bngszkbl. Sokat grnek, s egyre tbbet meg is valstanak a CSS 3 lehetsgeibl. Egyelre mg csak jtk, de hamarosan napi munkv vlhat, ezrt nem hagyhatjuk ki a tmink kzl. A 2.12. fejezetben rszletesen megnznk nhny jdonsgot.
2.3. Cmsorok s formzsuk

A cmek a h1 h2 h3 h4 h5 h6 tagok segtsgvel adhatk meg. h1 a legnagyobb (legfelsbb szint) cmet jelenti, h6 pedig a legkisebbet. (ltalban egy oldalon 2-4 szintet indokolt alkalmazni, ekkor pl. a h1, h2, h3 s h4 alkalmazhat.) A kvetkez plda bemutatja a cmek szoksos strukturlst.
<!DOCTYPE html> <html> <head> <title>Nagy Gusztv oldala</title> </head> <body> <h1>Nagy Gusztv oldala</h1> <h2>Drupal 6 alapismeretek</h2> <p>Megjelent els knyvem, melyet szeretettel ajnlok ...</p> <h2>iuste.biz Tisztessges vllalkozs mozgalom</h2> <p>Fl ve csatlakoztam a Tisztessges vllalkozs mozgalomhoz.</p> <p>Szmomra ez nem csak egy plecsni. Jl kifejezi, milyen alapokra ptem a vllalkozsomat. Szmlt adok, szeretek adzni, s nem csapom be az gyfeleimet.</p> </body> </html>
44 http://jigsaw.w3.org/css-validator/
53. oldal
ltalban egyszer alkalmazzuk a h1-es cmet, ezutn nhnyszor a h2-est, szksg esetn a tovbbi szintekkel. A 17. bra jelzsei jl mutatjk, hogy szemantikus rtelemben minden cmhez tartozik egy tartalmi, kifejt rsz. A tartalmi rszben a cmek egy szinttel alacsonyabbak a fcmknl, s mindig tartalmaznak foly szveget (ami mr nem cm), pl. p elemeket.
17. bra. Cmek szemantikus hasznlata A cmsorokhoz a bngsz alaprtelmezetten trkzket is kapcsol, amit majd CSS segtsgvel mdosthatunk. A kvetkez CSS formzsok nem csak cmekre, hanem sokfle ms tagra is alkalmazhatak lesznek.
2.3.1. Httr
Egy elem httert httrszn s httrkp segtsgvel vltozatosan formzhatjuk. A httrkp ismtldhet is fgglegesen, vzszintesen, s lehet a bngszablakhoz vagy a grgetett tartalomhoz ragasztott.
54. oldal
Httrszn
A background-color tulajdonsg segtsgvel meghatrozhatjuk az elemek httrsznt. A korbban megismert sznmegadsi mdok kzl itt is tetszlegesen vlaszthatunk. Tovbbi lehetsg a transparent megadsa, ami tltsz htteret fog jelenteni.
body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}
Az eredmny:
18. bra. Httrsznek alkalmazsa
Httrkp
Az egyszn httr helyett akr ltvnyos httrkpet is elhelyezhetnk az elemek httereknt a background-image tulajdonsg segtsgvel.
background-image: url('bgdesert.jpg')
Ismtlds
A httrkp alaprtelmezs szerint kitaptzva jelenik meg, ha az elem mrete ezt szksgess teszi. Termszetesen ez megvltoztathat, mind vzszintes, mind fggleges irnyban megtilthatjuk az ismtldst. A kvetkez pldban csak y irnyban ismtldik a httrkp:
background-image: url('bgdesert.jpg'); background-repeat: repeat-y;
A mindkt irny ismtlds kikapcsolshoz a no-repeat rtket kell adnunk.
55. oldal
Pozci
A httrkp pozcija is megvltoztathat: az alaprtelmezett bal fels sarok helyett mshol is lehet a httrkp.
Ennek mg akkor is van jelentsge, ha a teljes htteret kitaptzva ltjuk, ugyanis a kezd taptt van rtelme mshol s mshol megadni.
Az rtk megadsnl elszr a fggleges, majd a vzszintes pozcit kell megadnunk. A 33 konstans (top, center, bottom s left, center, right) mellett szzalkos s pixeles pozicionls is lehetsges. A kvetkez pldban az ablak fels rszn, kzpen jelenik meg a kp.
body{ background-image: url('nagygusztav.jpg'); background-repeat: no-repeat; background-position: top center; }
Az eredmny:
19. bra. Httrkp Mg a kett kzl az egyiket is elhagyhatjuk, ha az egyetlen megadott rtk egyrtelmv teszi a fejleszt szndkt.
Httrkp ragasztva
Elssorban hosszabb grgethet tartalom esetn van jelentsge annak, hogy a httrkp nem csak a grgetsvval egytt mozogva, hanem fixen pozicionlva is krhet. Sok rdekes megolds rhet el ezzel az apr trkkel.
background-image: url('nagygusztav.jpg'); background-repeat: no-repeat; background-attachment: fixed;
56. oldal
Mindent bele
Ha tbbfle httrtulajdonsgot is lltunk, tmrebb rsmdot eredmnyez az sszevont background tulajdonsg. gy egyszerre akr mindent is bellthatunk.
background: #00ff00 url('nagygusztav.jpg') no-repeat fixed center;
2.3.2. Szeglyek
A CSS border tulajdonsgaival szeglyeket rajzolhatunk az elemek kr. A kvetkez plda nhny fontosabb vonalstlust mutat be.
Nem minden bngsz az elrsoknak megfelelen rajzolja a szeglystlust.
h1 {border-style: dotted} h2 {border-style: double} p {border-style: solid}
Az eredmny:
20. bra. Seglyek hasznlata Az elemek szeglyt nem csak egysgesen llthatjuk be. Tbbfle lehetsgnk van az eltr megadsra. Egyrszt egyenknt is llthatjuk a szeglyek stlust a border-top-style, borderright-style, border-bottom-style s border-left-style segtsgvel. Msrszt a fenti megadsnl nem csak egy rtket, hanem 2, 3 vagy 4-et is hozzrendelhetnk a defincihoz. Ennek logikjt a kvetkez rszben, a sznekkel kapcsolatban fejtjk ki.
Szeglyszn
A szneket tbbfle mdon kzelthetjk meg. Itt most a monitorok kpmegjelentsnl hasznlatos, ppen ezrt a webfejlesztsben is ltalnos RGB megkzeltst alkalmazzuk. Az RGB sznek hrom sszetevbl llnak, mint piros (red), zld (green), s kk (blue). Mindhrom rtk egy bjton trolt eljel nlkli szmknt hatrozhat meg, vagyis rtke

0
57. oldal
s 255 kztt (hexadecimlisan 00 s FF kztt) lehet. Ezzel a mdszerrel teht a 3 bjton brzolhat 16 milli szn kzl brmelyik kivlaszthat. Ezen kvl 16 alapszn nvvel is rendelkezik (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, s yellow). A szeglyek sznt bellthatjuk a border-color tulajdonsggal. Az albbi pldk minden oldal szeglyt meghatrozzk. Minden oldal egyforma szn:
border-color: #0000ff;
A fenti s lenti szegly #ff0000 szn , mg a bal s jobb oldali #0000ff szn:
border-color: #ff0000 #0000ff;
A fenti szegly #ff0000, az oldalsk #00ff00 s a lenti #0000ff sznek:

border-color: #ff0000 #00ff00 #0000ff;
A ngy oldal az ramutat jrsnak megfelelen (kezdve a fenti szegllyel) a felsorolt 4 rtket veszi fel:
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)};
Vgl rdemes megemlteni, hogy ilyen specilis RGB szneknl lehetsg van a sznkd felezsre is. Ennek felttele, hogy mindhrom sznkd dupla jel legyen. gy az utols pldnkat gy is rhatnnk:
border-color: #f00 #0f0 #00f rgb(250,0,255)};
A szegly vastagsga
A szegly vastagsgt a border-width tulajdonsggal llthatjuk be. A kvetkez plda folyamatos vonallal szeglyezi a bekezdst, de a szegly vastagsgt megnveli az alaprtelmezett 1px-hez kpest:
p { border-style: solid; border-width: 15px }
A ngy oldal szeglyeit nem csak egyszerre, hanem akr kln-kln is lehet lltani, pldul a bal oldalit. Itt a szegly minden oldalon folyamatos lesz, de csak a bal oldalon lesz vastagabb:
p { border-style: solid; border-left-width: 15px }
58. oldal
Kzs deklarci
Az eddigi szegly tulajdonsgok (hasonlan a korbbi tulajdonsgcsoportokhoz) sszevonhatk a border, vagy a border-top, border-right, border-bottom s a border-left tulajdonsg segtsgvel. Pldul az als szegly tbb tulajdonsgnak belltsa:
p {border-bottom: medium solid #ff0000}
2.3.3. Trkzk a szeglyen bell s kvl

A CSS szintaktikailag kt nagyon hasonl tulajdonsg-csoportot tartalmaz. A margin tulajdonsggal a szeglyen (border) kvli, a padding tulajdonsggal pedig a tartalom s a szegly kztti bels margt lehet belltani. A szintaktikai hasonlsg miatt ebben az alfejezetben csak a kls marg (margin) szintaxisa fog kvetkezni, de minden plda hasonlan lerhat lenne a bels margra (padding) is. Margk esetn is van lehetsgnk, hogy egyszerre mind a ngy oldal rtkt, akr klnbzre is bellthassuk, vagy csak egyetlen oldalt vltoztassuk meg. A teljessg ignye nlkl kvetkezzk nhny plda. Csak a bal oldali margt definilja:
margin-left: 2cm;
Minden oldalt definilja, de ms-ms rtkkel:

margin: 2cm 5px 2em 5%;
Minden oldali margt egysgesen nullz:

margin: 0;
Az egyes bngszk bizonyos alaprtelmezett margbelltsokat eltren rtelmezhetnek. Az ebbl ered kellemetlensgek s bosszsgok elkerlse rdekben a szerz szoksa, hogy egy j oldal CSS llomnyt vala hogy gy kezdi:
body, p, h1, h2, h3, table, tr, th, td, img { margin: 0; padding: 0; }
Eric Meyer Reset CSS45 megoldsa mg tovbb megy. Mindenkppen rdemes tgondolni.
45 http://meyerweb.com/eric/tools/css/reset/
2.4. Az oldalszerkezet kialaktsa
59. oldal

Ha a tervezs sorn kidolgoztuk az oldalunk funkcionlis elemeit (5. s 6. bra), akkor olyan oldalszerkezetet kell kialaktanunk, amely a terveknek megfelel. Ebben a fejezetben ennek az alapvetbb eszkzeit fogjuk bemutatni.
A div s span tagok

A div s span tagok clja az, hogy r lehessen akasztani valamilyen CSS formzst, ha nincs ms alkalmas tag (vagy az tl erltetett lenne) a HTML kdban. A kt tag kztt egyetlen klnbsg, hogy a div blokk szint (mint pl. a p vagy a table), mg a span soron belli (mint pl. a strong vagy az a) elem. Az oldal kialaktsakor a HTML 4-gyel bezrlag a div tag tmeges hasznlata szmtott szakszer megoldsnak. A HTML 5 trnyersvel erre mr sok esetben nincs szksg, pontosabban van jobb (szemantikusabb) megoldsunk is. Erre a 2.4.7. fejezetben visszatrnk.
2.4.1. Mretek
Az elemek szlessg (width) s magassg (height) tulajdonsga segtsgvel az elem mrete befolysolhat. Elssorban doboz-jelleg elemeknl van rtelme hasznlni: pldul egy kp mrett, vagy a navigcis sv szlessgt gyakran lltjuk be ilyen mdon. A width s a padding megadsa esetn a width a tartalom (content) tnyleges szlessgt jelenti. Nzznk egy pldt:
div#doboz { width: 200px; padding: 10px; }
A szabvny szerint ebben az esetben a tnyleges szlessg 200 pixel lesz. (Egyes korbbi bngszk itt ms logikt alkalmaztak.)
2.4.2. Megjelents
A display tulajdonsg egy elem ms elemekhez viszonytott megjelenst befolysolja. A tulajdonsg hrom legalapvetbb rtke a block, inline s none. Egyes HTML elemeknek (pl. h1..h6, p, ul, ol, div) a block az alaprtelmezse, mg msoknak (pl. small, img, span) az inline.
60. oldal
Nzznk egy egyszer pldt a bekezdsek inline-knt val hasznlatra, s a div elemek eltntetsre:
p {display: inline} div {display: none} <p>Els bekezds.</p> <p>Msodik bekeds.</p> <div>Nem lthat div elem.</div>
Az eredmny:
21. bra. Soron belli formzs Egy msik gyakorlati szempontbl rdekes plda, ami szerint az oldal fmenjt felsorolt listval is szoks ltrehozni, s a CSS szintjn inline listaelemekkel megoldani a menpontok egyms mell kerlst. Ezt a pldt a 2.4.3. fejezetben mg alaposabban megvizsgljuk. Felmerlhet a krds, hogy mi rtelme van egy elem lthatsgt kikapcsolni. Sok rdekes eset kzl csak egy faszerkezet navigcis szitucit gondoljunk t. (A Windows Intz bal oldali panelre rdemes gondolni.) Itt praktikus, ha egyes faelemeket, vagy akr nagyobb rszeket is be lehet csukni, hogy a navigci ttekinthetbb legyen. Ezt JavaScripttel tmogatva egyszeren meg lehet tenni: kattints hatsra egy bizonyos elem display tulajdonsgt kell none vagy block rtkre vltani az eltntetshez vagy megjelentshez.
2.4.3. A lebegtets
Eredetileg a kpeknl alkalmazott, de az oldalkialaktsnl is nlklzhetetlen lehetsg a float tulajdonsg alkalmazsa. Ennek segtsgvel a soron bell megjelen elemet ki tudjuk emelni a sor-folytonossgbl, s a krnyez tartalom krl tudja futni az elemet.
61. oldal
Kp lebegtetse
Nzznk egy kpes pldt elszr CSS nlkl. A kp a bekezds belsejben, sor-folytonosan szerepel (pontosan gy, mintha egy nagy mret bet lenne a szvegben):
<p> Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. <img src="logocss.gif" width="95" height="84"> Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. Ez egy szveg. ...
Az eredmny:
22. bra. Kp lebegtets nlkl Ha a kp elem megkapja a float: right formzst, a kp jobb oldalt jelenik meg, krbefuttatva a kvetkez tartalommal:
23. bra. Kp lebegtetve Ha a kp s a krbefuttatott tartalom kzt nagyobb helyet szeretnnk kihagyni, akkor ezt a kp margin tulajdonsgaival tehetjk meg. Ha a kphez feliratot is szeretnnk trstani, akkor ez egy apr trkkel megvalsthat. A megolds lnyege, hogy nem kzvetlenl a kpet lebegtetjk, hanem egy div elem segtsgvel egysgbe zrjuk a kpet s a feliratt, s ezt a csoportost div elemet lebegtetjk.
62. oldal
div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; }
<div> <img src="logocss.gif" width="95" height="84"><br> A CSS szuper! </div> <p>Ez egy szveg. Ez egy szveg. ...
Az eredmny:
24. bra. Lebegtets alrssal Az eddigiek alapjn egy inicil lebegtetse egyszer feladat. Tipp: a bekezds els betjt tegyk egy span elembe, hogy tudjunk formzst hozzkapcsolni.
Horizontlis men
Nzzk most meg a korbban begrt mens pldt. 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 kvetkez eredmnyt szeretnnk ltni. (A kpen nem ltszik, hogy az egrkurzor a Men 1 felett van.)
25. bra. Horizontlis men Nzzk meg kzelebbrl a plda fontosabb pontjait.

ul { float:left; width:100%;
63. oldal
A men az alatta lev szvegtl elvlik, birtokolja a teljes vzszintes svjt.

padding:0; margin:0; list-style-type:none;
Csak maga a szveg felesleges trkzk s jell nlkl.

a { float:left; width:6em;
Fix szlessg gombok rhetk el. rdemes azonban vigyzni ezzel a mdszerrel, mert ha a szveg nem fr ki, a dizjn sztesik.
text-decoration:none;
Ne legyen alhzva a link.

color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; }
A menn kvli httrszn s a jobb oldali szegly szne itt meg kell, hogy egyezzen.
a:hover { background-color:#ff3300}
Az egrkurzorra sznvltssal reagl a menpont. rdemes megfigyelni, hogy a link a teljes li terlett elfoglalja, ezrt a teljes li elem linkknt mkdik.
li { display:inline }
Ez a sor oldja meg, hogy a menpontok egyms mell kerljenek.
Felesleges tblzatok nlkli oldalkialakts

A webfejleszts elmlt veiben sok zskutct megjrtak a szakma mveli. A keretek indokolatlan hasznlatnl taln mr csak a tblzatos oldalkialakts okozott tbb bonyodalmat s felesleges munkt. Rgi jl bevlt, s sokak ltal mg a mai napig is legjobbnak tlt mdszer a menk oldalra, fejlc fellre, lblc alulra stb. pozicionlshoz a tblzatok hasznlata. A mdszer rvidesen elkezdett burjnzani, megjelentek a 2-3-4 szinten egymsba gyazott tblzatok, az egyestett cellk, a csak trkz kialaktshoz ltrehozott sorok s oszlopok vagy ami mg ennl is rosszabb a tvtart gif-ek. Aki mr megprblt egyszer egy ilyen szerkezet oldalt megrteni, esetleg a dizjnt megvltoztatni, az lehet, hogy nhny sz hajszl-
64. oldal
lal gazdagodott. A CSS 2-es verzija ta semmi szksg az ilyen elavult s rtelmetlen technikkra. Pldaknt nzznk egy alap oldalelrendezst fejlccel, lblccel s baloldali (pldul men kialaktsra alkalmas) svval. A kvetkezt szeretnnk elrni:
26. bra. Tipikus kt hasbos oldalszerkezet A HTML szerkezet kialaktsnl alapveten a fentrl lefel, azon bell balrl jobbra halad tervezst rdemes kvetni. (Termszetesen sszetettebb esetben ez a sorrend nem ilyen egyszer, s legtbb esetben tbbfle megolds is adhat. Msrszt az is egy fontos szempont, hogy a lnyegi informcitl haladjunk a kevsb lnyeges fel.) Az oldal HTML szerkezete:
<body> <div class="container"> <div class="header"> <h1 class="header">Praesent...</h1> </div> <div class="left"> <p>Phasellus wisi nulla...</p> </div> <div class="content"> <h2>Aenean nummy odio orci</h2> <p>Phasellus wisi nulla...</p> <p>Adipiscing elit praesent...</p> </div> <div class="footer">Praesent...</div> </div> </body>
65. oldal
A container nevet gyakran alkalmazzk az oldal f troljnak azonostshoz. rdemes mg azt is megfigyelni, hogy a left s content doboz nincsenek egy kzs dobozba szszefogva, br bizonyos esetekben ez is szksges lehet.
div.container { width: 100%; margin: 0px; border: 1px solid gray; line-height: 150%; }
A container szlessge alapveten az egsz oldal szlessgt hatrozza meg. Ltszik, hogy az oldal ki fogja tlteni a teljes ablakszlessget. A margin s border tulajdonsgok mr ismersek, csak erre a dobozra lesznek hatssal, mg a line-height rkldni fog a tartalmazott dobozok irnyba. Ehhez hasonlan szneket, bettpusokat szoks ilyen mdon, egysgesen megadni.
div.header, div.footer { padding: 0.5em; color: white; background-color: gray; clear: left; }
Az utols sor megakadlyozza, hogy a kt doboz bal oldaln lebeg (float) elem legyen.
h1.header { padding: 0; margin: 0; } div.left { float: left; width: 160px; margin: 0; padding: 1em; } div.content { margin-left: 190px; border-left: 1px solid gray; padding: 1em; }
A plda taln legrdekesebb rszhez rtnk: a left s content egyms mell helyezshez. Alap tulajdonsgokkal ez a kt doboz egyms al kerlne, de a left elem float formzsa lehetv teszi, hogy a forrskdban utna kvetkez content doboz ne alatta, hanem mellette (is) jelenjen meg. Ezen kvl mg fontos, hogy a content elem bal margja (margin-left) is be lett lltva, gy a left s content dobozok soha nem fogjk egymst zavarni. A megrtshez rdemes a mkd pldt a FireBug kiegszt Layout nzetvel is megnzni. Az bra azt a pillanatot mutatja, amikor a content doboz van kijellve (ez a bal als rszen jl ltszik). Megfigyelhet a 190 pixel szles, srgval sznezett bal oldali margin terlet, s a konkrt szmrtk is a jobb als Layout elemben.
66. oldal
27. bra. Az oldal felpts vizsglata Firebug-gal

A tblzatos oldalkialaktsi mdszer utn a tisztn CSS-re pt megolds logikja furcsa, nehzkes lehet. Hossz tvon azonban bussan meg fogja hllni a befektetett energit. Az elz pldnl maradva taln az szokta a legtbb nehzsget okozni, hogy a tblzat cellinl megszokott httrbelltsok itt nem gy mkdnek, hiszen itt nem kt egyforma magassg cellrl van sz. Ilyen jelleg problma esetn van egy egyszer megolds: az egyms mell kerl dobozokat egy kzs tartalmaz dobozba helyezzk, s a httr gyes belltsval el lehet azt a hatst rni, amit szeretnnk. Teht nem az egyms melletti dobozok, hanem az ket kzsen tartalmaz doboz httert kell belltanunk. Vgl rdemes megjegyezni, hogy gyakran mindkt (vagy mindhrom) egyms mell kerl dobozt lebegtetjk. Ekkor nem szksges a nagy marg alkalmazsa. Htrnya viszont, hogy a dobozok elbb emltett kzs httert nehezebb formzni.
2.4.4. Pozicionlsi smk

A position tulajdonsg segtsgvel az alaprtelmezett statikus bellts helyett relatv s abszolt pozicionlst is krhetnk.
67. oldal
Relatv pozci
Az elemeket alaprtelmezett (static) helyzetktl el tudjuk mozgatni a relatv pozicionls segtsgvel vzszintes s fggleges irnyban. A relatv eltols mrtkt a left, right, top s bottom tulajdonsgokkal hatrozhatjuk meg. Az gy eltolt elem eredeti helye resen marad, oda ms elem nem fog becsszni. (Ez lnyeges eltrs a lebegtetett elemekhez kpest.) A kvetkez rnykkal elltott cm plda szemantikusan ugyan nem szerencss, de jl szemllteti a relatv pozicionls lehetsgeit. A megolds lnyege, hogy a cm szvege kt pldnyban szerepel a HTML forrsban, de vizulisan majdnem egymst elfedve, s ms sznnel jelennek meg. Nzzk a pldt:
<h1 class="shadow">Fcm</h1> <h1 class="main">Fcm</h1> <p> Bekezds. Bekezds. Bekezds... </p> h1 { font-size: } h1.main { color: position: top: left: } h1.shadow { color: }
2em;
black; relative; -1.9em; -0.1em; #bbb;
Az eredmny:
28. bra. Relatv pozicionls A megolds htrnya is jl ltszik a kpen: a cmet kvet bekezds nem kveti kzvetlenl a cmet. Termszetesen ez a htrny tovbbi trkkkkel kikszblhet.
68. oldal
Abszolt pozci
A relatv pozci esetn csak eltoltuk az elemet a helyrl, de az eltols a krnyezetre nem volt ms hatssal. Ezzel szemben az abszolt mdon pozicionlt elem nem tart fenn egy terletet. A megadott pozcik itt a tartalmaz dobozon belli abszolt pozcik, s a kvetkez elemek szmra nem is lteznek. Az elz plda gy megoldhat abszolt pozicionlssal is a korbbi htrny nlkl.
h1 { font-size: } h1.main { color: top: left: position: } h1.shadow { color: margin: } 2em; black; 6px; 6px; absolute; #bbb; 2px;
Az eredmny:
29. bra. Abszolt pozicionls rdemes mg kln kiemelni, hogy az abszolt pozci a szlk hierarchijban a hozz legkzelebb es, abszolt vagy relatv pozicionlt elemhez kpest pozicionl, ennek hinyban pedig a body-hoz. Teht ha a szlje nem rendelkezik position tulajdonsggal, de annak szlje igen, akkor a szl szljhez kpest szmt a top, left, right vagy bottom eltols. Emiatt nem ritka, hogy a kvnt szlt a kvetkez formzssal ltjuk el.
#valamelyikszulo { position: relative; top: 0; left: 0; }
t nem akarjuk mdostani, de kiindulsi alapknt szmtunk r.
Fix pozci
A fix pozci az elz specilis esete. Az elem itt is kikerl a pozicionlsi smbl, de itt nem a tartalmaz doboz, hanem a lttr (kperny) a viszonytsi pont.

Nagyszeren alkalmazhat pl. a hagyomnyos keretek (frame-ek) kivltsra46.
Az Internet Explorer korbbi verzii nem tmogatjk a fix pozicionlst.
69. oldal
2.4.5. Z-index
Sok esetben az elemek nem takarjk egymst. Ha mgis, akkor alaprtelmezetten a (HTML forrskdban) ksbbi elem takarja el a korbbit. Ha ez nem megfelel, akkor a z-index rtkek meghatrozsval manipullhatjuk a vizulis takarst.
2.4.6. Begyazott keretek

Az oldalszerkezet kialaktsnak ltalban kerlend, de idnknt hasznos megoldsa az inline frame, vagyis az iframe tag hasznlata. Az iframe segtsgvel egy tglalap alak terlet forrskdjt kln llomnyban kezelhetjk az oldal egyb rszeitl.
<iframe src="masikoldal.html" width="80%" height="110"></iframe>
A masikoldal.html nmagban is hasznlhat HTML oldal kell legyen. Youtube47 videt gy gyazhatunk a sajt weboldalunkba:
<iframe width="425" height="349" src="http://www.youtube.com/embed/Cy5ZZFIRY50" frameborder="0" allowfullscreen></iframe>
2.4.7. A HTML 5 jdonsgai

A struktra kialaktsa terletn igen sok jdonsggal kszl a HTML 5-s. Nzznk meg 48 nhny fontosabb megoldst. A HTML 4 hasznlata esetn igen gyakori a kvetkez brn is lthat elrendezs. Jl megfigyelhet, hogy a div elemek, valamint a class s id attribtumok sora szksges az oldal kialaktshoz.
46 Egy nagyon szp megolds: http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/ 47 http://www.youtube.com/ 48 A fejezet tbb pldja A List Apart: Articles: A Preview of HTML 5 oldalrl (http://www.alistapart.com/articles/previewofhtml5) szrmazik.
70. oldal
30. bra. Tipikus kt hasbos oldalelrendezs A HTML 5 hasznlatval ezt a furcsa torldst megszntethetjk, ha a kvetkezkppen terveznk:
31. bra. A div elemek helyett header, nav, section, article, aside s footer Ez a kvetkez HTML kddal valsthat meg:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
71. oldal
Szekci
A szekci (section elem) egy olyan strukturlis elem, amely akr egymsba is gyazva rhatja le a tartalmi struktrt. Termszetesen cmek ( h1-h6 elemek) a szekci cmt is megadhatjk.
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> ... </section> </section> ... </section>
Fejrsz
A header elem navigcis clokat szolgl. Alkalmazhat egy szekci vagy az egsz oldal (body) fejrsznek lershoz. Tartalmazhat h1..h6 elemeket is. A teljes weboldal fejlce:
<body> <header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> ...
Egy kisebb egysg fejrsze lehet:

<header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
Lbrsz
A footer elem a lbrsz lershoz hasznlhat.
<footer>© 2011 Example Inc.</footer>
Navigci
A menket ul-li listaknt volt clszer eddig is kszteni. Most mr rdemes a nav elemet is alkalmazni:
72. oldal
<nav> <ul> <li><a <li><a <li><a <li><a </ul> </nav>
href="/">Home</a></li> href="/products">Products</a></li> href="/services">Services</a></li> href="/about">About</a></li>
Oldalsvok
A legtbb honlap tartalmaz egy vagy tbb oldalsvot. A HTML 5 az aside elemet javasolja alkalmazni ilyen esetekben.
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>
A f tartalom
A weboldalak f tartalmi elemeinek (pl. blog esetn egy blogbejegyzs, az egyes kommentek) kialaktshoz a HTML 5 az article elemet javasolja.
<article id="comment-2"> <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O'Niell</a></h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time></p> </header> <p>That's another great article!</p> </article>
Vgezetl elmondhatjuk, hogy a HTML 5 komoly vltozsokat hoz ezen a terleten.
2.5. Szvegek ksztse

Br egyre kevesebbet olvasunk a weben, a jl megfogalmazott s clszeren megjelentett szvegre mg mindig szksgnk van. A kvetkezkben az 1.1.1. fejezet elveit tudjuk megvalstani a HTML s CSS eszkzeivel.
2.5.1. Bekezdsek
Bekezdseket a p taggal lehet definilni:
2.5. Szvegek ksztse
73. oldal
<p>Fl ve csatlakoztam a Tisztessges vllalkozs mozgalomhoz.</p> <p>Szmomra ez nem csak egy plecsni. Jl kifejezi, milyen alapokra ptem a vllalkozsomat. Szmlt adok, szeretek adzni, s nem csapom be az gyfeleimet.</p>
Ugyangy, mint a papr alap szvegszerkeszts esetn, itt sem soronknt, hanem gondolati egysgenknt szoks a bekezdseinket szttagolni.
A bekezdsek hosszra a ltogat nagyon rzkeny, gy legalbb 2-3 bekezdsenknt rdemes egy cmmel kiemelni a lnyeget, illetve a bekezds se legyen hosszabb 6-8 sornl.
A bekezdsek trdelsrl ltalban nem neknk kell gondoskodnunk, hanem hagyhatjuk a bngsz hatskrben. A kvetkez pldban hiba szerepel a forrskdban az jsor s tbb szkz karakter, a bngsz minden elvlaszt karakter-sorozatot (az n. white spaceeket) egy szkzknt rtelmez s jelent meg, a 17. bra szerint.
<p>Fl ve csatlakoztam a Tisztessges vllalkozs mozgalomhoz.</p> <p>Szmomra ez nem csak egy plecsni. Jl kifejezi, milyen alapokra ptem a vllalkozsomat. Szmlt adok, szeretek adzni, s nem csapom be az gyfeleimet.</p>
A tnyleges trdelst mindig a bngsz ablakmrete s a benne lev szveg hatrozza meg.
2.5.2. Sortrsek
A br tag hasznlhat, ha szeretnnk j sort, de nem akarunk j bekezdst kezdeni. A br kiknyszerti a sortrst. Hibs gyakorlat viszont a bekezdsekre bonts helyett 2-2 br tagot rni. Pl. a kvetkez vers esetn szabad hasznlni:
<p> Mikor trsz mr az eszedre, te Sndor?<br> Tivornya jjeled s napod;<br> Az istenrt! hisz az rdg elvisz,<br> Ha mg sok gy folytatod. </p>
rdemes megfigyelni, hogy az utols sor utn mr nincs szksg a br tagra.
74. oldal
32. bra. Sortrs alkalmazsa A br elem res, s nincs zr tagja sem.
2.5.3. Kiemelsi lehetsgek

A HTML a trtnete sorn felszedett olyan tagokat, amelyek ma mr nem ajnlottak, st a HTML 5-be bele se kerltek. Ezrt a hagyomnyos, kinzettel foglalkoz formz tagok helyett a szemantikailag rtelmezhet tagokat kell hasznlnunk.
Szvegkiemels
em strong sub sup ins del Kiemeli a szveget Ersebb kiemels Als indexet definil Fels indexet definil Beszrt szveget jell Trlt szveget jell
Az utols kt tag hasznlatra rdemes egy kis magyarzatot adni. Egy olyan weboldalnl, ahol a szvegen kisebb de annl lnyegesebb vltoztatsokat ejtnk, nem fog feltnni azoknak a ltogatknak, akik korbban mr lttk a tartalmat. De ha a del taggal jelljk
2.5. Szvegek ksztse
75. oldal
a trlt, s szksg esetn ins taggal az jonnan beszrt szveget, akkor teljesen egyrtelm lesz minden olvas szmra. Nzznk egy pldt a del hasznlatra:
<h4>Idpont:</h4> <p>2010. <del>jnius 21</del> jnius 20 - <del>jlius 2</del> jlius 1. (2 hten t htftl pntekig) dleltt 9.00-11.00 vagy dlutn 18.00-20.00 rig.</p>
Az eredmny:
33 bra. A del tag hasznlata
Szmtgp kimenet
code Forrskdot definil pre Elformzott szveget definil: az elvlaszt (white space) karaktereket nem a HTML-ben szoksos, hanem direkt mdon rtelmezi
Idzet, kiemels s defincis tagok

abbr acronym address bdo blockquote q cite dfn Rvidtst definil Mozaikszt definil Cm elemet definil Szveg rsirnyt hatroz meg Hossz (akr tbb bekezdses) idzetet jell Rvid (bekezdsen belli) idzetet jell Idzetet jell Defincit jell
Nhny egyszerbb plda a tagok hasznlathoz:

<address> Nagy Gusztv<br> Kecskemt </address> <abbr title= "United Nations">UN</abbr>
76. oldal
<acronym title="World Wide Web">WWW</acronym> <bdo dir="rtl"> Ez a szveg jobbrl olvashat </bdo> <blockquote> Az ilyen hosszabb idzeteket a bngsz trkzkkel is kiemeli </blockquote>
2.5.4. Szvegek megjelentse

A CSS szvegtulajdonsgai segtsgvel a szvegek vizulis megjelentst lehet testre szabni.
A szveg szne
A szveg sznt a color tulajdonsg hatrozza meg:
h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)}
Bettvolsg
A betk kztti tvolsg a letter-spacing tulajdonsggal mdosthat. A pozitv rtk ritktst eredmnyez, a negatv pedig srtst:
h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm}
Sztvolsg
A bettvolsghoz hasonl mdon adhat meg a word-spacing tulajdonsg segtsgvel.
A szveg igaztsa
A kvetkez plda bemutatja, hogyan lehet a szveget balra, kzpre, jobbra vagy sorkizrtan igaztani:
h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} p {text-align: justify}
2.5. Szvegek ksztse
77. oldal
Termszetesen az igazts meghatrozsnak csak blokk szint elem esetn van rtelme. Az alaprtelmezett a balra igazts.
A sorkizrt igaztssal rdemes csnjn bnni, mivel az automatikus elvlaszts hinya miatt a szkzk nagyon csnyn megnylhatnak. Keskeny szvegblokk esetn klnsen kerlend. A kzpre zrt igaztst is csak indokolt esetekben szabad alkalmazni. Pl. cmek, bra feliratok esetn.
A szveg dekorcija
A kvetkez plda bemutatja, hogy hogyan lehet a szvegnket fl hzott, thzott, alhzott vonallal megjelenteni:
h1 h2 h3 a {text-decoration: {text-decoration: {text-decoration: {text-decoration: overline} line-through} underline} none}
A szveg behzsa
A bekezds els sort a kvetkez mdon tudjuk 1 cm-el behzni:
p {text-indent: 1cm}
Kis-, s nagybet formzs

A kvetkez plda a nagybets, kisbets, majd kis-kapitlis formzst mutatja be:
p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize}
Elvlaszt karakterek rtelmezse

Ahogy mr a korbbiakban volt sz rla, a HTML oldalakon az n. elvlaszt karakterek (white-spaces) szmtl s tpustl (szkz, tabultor vagy jsor) fggetlenl mindig egy szkznek szmtanak. Ez all HTML szintjn az egyetlen kivtel a pre tag alkalmazsval rhet el. Praktikus, hogy az elvlaszt karakterek rtelmezst ennl finomabban is tudjuk szablyozni a CSS white-space tulajdonsg segtsgvel. Az alaprtelmezett kikapcsolt (none) mellett lehetsg van az elformzott rtelmezs ( pre) s a tbb sorra trdelst megtilt (nowrap) belltsra. Az eddigi lehetsgeken tl az rsirnyt is bellthatjuk a direction tulajdonsggal.
Bettpus megadsa
A kvetkez pldban a h3 cmeknek s a bekezdseknek ms-ms bettpust hasznlunk.
78. oldal
h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif}
A bettpusok kzl rdemes ltalnosan hasznlt, a kpernyn jl olvashat tpusokat megadni. Kevsb elterjedt bettpus esetn rdemes elterjedtebb alternatvkat is felsorolni, hogy a bngsz nem ismert tpus esetn is tudjon hasonlt vlasztani.
Betmret
A betk mrett a font-size tulajdonsggal llthatjuk be. A megadsnl ktelez mrtkegysget is alkalmazni, s ltalban rdemes relatv megadsi mdot alkalmazni, hogy a felhasznl a sajt ignyei szerint tudja azt kicsinyteni vagy nagytani.
p {font-size: 1,1em} h1 {font-size: 130%}
A szmszer megadson tl szvegesen is megadhatjuk a mretet: xx-small, x-small, small, medium, large, x-large, xx-large, smaller s larger. Az gy megadott mretek is relatvak.
Betstlus
A dlt betstlus alkalmazsra lthatunk egy pldt:
p {font-style: italic}
Betvastagsg
A betk vastagsga a font-weight tulajdonsggal befolysolhat. Szveges konstansok (normal, bold, bolder s lighter) mellett 100, 200, 900 rtkek hasznlhatk.
p.normal {font-weight: normal} p.vastagabb {font-weight: bold} p.legvastagabb {font-weight: 900}
Betformzsok sszevonsa
Az sszes betformzs sszevonhat akr egyetlen deklarciv:
p {font: italic small-caps 900 12px arial}
Els gyermek
A :first-child ltszlagos osztly egy adott elem els gyermekt kpes kivlasztani. Nzzk a kvetkez pldt:
a:first-child { text-decoration:none }
2.5. Szvegek ksztse
79. oldal
Ennek hatsra minden els gyermekknt elfordul a elemre rvnyes lesz a fenti formzs. Pldul:
<p>Nzze meg a <a href="http://www.gamf.hu">GAMF</a> s az <a href="http://informatika.gamf.hu"> Informatika tanszk</a> honlapjt!</p>
Ha az adott elemben (itt p) nem link (a) az els gyermek elem, akkor az adott krnyezetben ennek a formzsnak semmilyen hatsa nem lesz. A kvetkez verziban a strong elem tvette az els gyermek szerept, ezrt a formzsnak itt nem lesz hatsa:
<p> <strong>Nzze meg</strong> a <a href="http://www.gamf.hu">GAMF</a> ...
Els bet s els sor

A :first-letter kivlaszt segtsgvel az els bet, mg a :first-line segtsgvel az els sor kaphat specilis formzst. Nzznk pldaknt egy inicilt, valamint egy flkvr els sort:
<p> Tetszleges szveg bekezds </p> p:first-letter { color: #ff0000; font-size:300%; vertical-align: top; float: left; } p:first-line { font-variant: small-caps; }
2.6. Linkek
A HTML linkeket (hivatkozsokat) hasznl arra, hogy az oldalunkhoz ms tartalmakat kapcsolhassunk.
2.6.1. HTML szintaxis

A link (a) tag s a href tulajdonsg
Egy link hivatkozni tud egy tetszleges webes erforrsra, pl. egy HTML oldalra, egy kpre, zenre stb.
80. oldal
A link szintaxisa a kvetkez:
<a href="url">Megjelen szveg</a>
A href tulajdonsghoz rendelt rtk hatrozza meg, hogy a bngsz hogyan reagljon a link kivlasztsra. (Itt nem csak kattints jhet szba, hiszen billentyzetrl is lehet linket kivlasztani a TAB segtsgvel, s akr gyorsbillenty (accesskey) is rendelhet egy linkhez.) A kezd s a zr tag kztti szveg (vagy akr bonyolultabb tartalom) lesz kattinthat, s (alaprtelmezetten) kk sznnel alhzott link. A kvetkez plda egy linket definil a Weblabor honlapjra:
<p>A <a href="http://weblabor.hu/">Weblabor</a> honlapja.</p>
A target tulajdonsg
Alaprtelmezetten egy link kivlasztsa esetn az j oldal az aktulis helyett jelenik meg. Ez azonban mdosthat. A kvetkez link egy j ablakban nyitja meg a Weblabor honlapjt:
<a href="http://weblabor.hu/" target="_blank">Weblabor</a>
A name tulajdonsg
Egy hivatkozs alaprtelmezetten a HTML oldal tetejt jelenti. Nha azonban praktikus, ha egy oldalon bell is pontostani tudjuk a link cljt. Erre szolgl ez a tulajdonsg. A kvetkez mdon tudunk ltrehozni egy ugrsi clpontot:
<a name="term107">PHP</a>
Ez az elem vizulisan nem fog megjelenni (pl. alhzssal), hiszen ez a kapcsolat vgpontja lehet, s nem a kezdpontja. Ha erre a pontra akarunk hivatkozni egy linkkel, akkor a kvetkez mdon kell alkalmaznunk:
<a href="http://weblabor.hu/szojegyzek#term107">
Termszetesen akr az oldalon bell is lehet ilyen linkeket alkalmazni:

<a href="#tipp">Ugrs</a>
Hasznos tippek
Ha egy alknyvtrra akarunk hivatkozni, az URL vgre tegyk ki a / karaktert. gy a webkiszolgl egy felesleges prblkozst megsprolva gyorsabban fogja megtallni a keresett knyvtr tartalmt. (Elszr a knyvtrnevet llomnynvknt prblja rtelmezni, ha nincs mgtte / karakter.)
2.6. Linkek
81. oldal
Hossz oldal esetn tegynk az elejre egy tartalomjegyzket a fontosabb fejezetekre mutat bels linkekkel. Ezen kvl szoks az oldal vgn (vagy akr tbb helyen is) az oldal tetejre (elejre) mutat linket alkalmazni (erre a href="#" hasznlhat). Ennek a megoldsnak az a htrnya, hogy a vissza gomb hatsra is az oldalon bell fog a felhasznl ugrlni.
2.6.2. Linkek formzsa

Valsznleg legismertebb ltszlagos osztlyok a linkekhez kapcsoldnak. Hagyomnyosan ms-ms sznnel szoks jelezni az egyszer linkeket, a mr megltogatott linkeket, az ppen az egrkurzor alatt lev s a kattints kzben lev linkeket:
a:link a:visited a:hover a:active {color: {color: {color: {color: #FF0000} #00FF00} #FF00FF} #0000FF}
Ma taln a :hover ltszlagos kivlasztval tallkozhatunk a legtbbszr, s nem is csupn a betsznek, hanem akr komolyabb viselkeds is megvalsthat vele.
Kimen linkek formzsa

Ma mr egyre tbb weboldal segt abban, hogy a weboldalrl kifel mutat linkek knynyen felismerhetek legyenek a mgtte tallhat kis kp alapjn. Ekkor termszetesen nem clszer a HTML img tagot hasznlni. Nzznk egy konkrt pldt:
<a title="" class="ext" target="_blank">Kecskemti Fiskola</a> a.ext { background: url("nyil.gif") no-repeat right center; padding-right: 15px; }
2.7. Multimdia
A HTML trtnete a szvegek strukturlt megjelentsnl indult. Ma mr nem olvasni, hanem hallani s ltni szeretnnk a weben. Ezrt a kpek mellett az audio s vide tartalmak beillesztse mindennapos feladatnak szmt.
2.7.1. Kpek
A HTML nyelvben az img tag segtsgvel tudunk kpeket definilni. Ez az elem res, s nincs zr tagja sem (hasonlan a br elemhez).
82. oldal
A kp megjelentshez elszr is meg kell adni a src tulajdonsgot, vagyis a kp llomny helyt s nevt. A szintaxis a kvetkez:
<img src="url">
Az url lehet abszolt vagy relatv megads is. Abszolt:

<img src="http://valami.hu/kep.gif">
Abszolt, a base href-ben megadott helytl, ennek hinyban a domain gykerben keres:
<img src="/kep.gif">
Relatv, a HTML llomny knyvtrban keresi:

<img src="kep.gif">
Az alt tulajdonsg
Az alt tulajdonsg alternatv szveg definilst teszi lehetv. A szabvny szerint teht ennek a szvegnek akkor kell a bngszben lthatv vlni, ha a kp valamilyen oknl fogva nem jelenthet meg (pl. mg nem tltdtt le, nem rhet el, vagy eleve ki van kapcsolva a kpek letltse).
A Microsoft Internet Explorer akkor is megjelenti ezt a szveget, ha az egrkurzort visszk a kp fl, de ez eltr a HTML eredeti cljtl. Erre a szabvny a title tulajdonsgot rja el.
<img src="hajo.gif" alt="1 rbcos vitorls haj">
Mret megadsa
A bngsz ugyan a mret megadsa nlkl is meg tudja jelenteni a kpet, mgis clszer a width s height tulajdonsgokat megadni. Lass kapcsolat vagy sok nagy kp esetn kimondottan zavar lehet, amikor egy jabb kp letltdsekor az ekkor ismertt vlt mret adatok alapjn a flig megjelent oldal ugrl.
<img src="hajo.gif" width="144" height="50">
Termszetesen a kp fizikai mrettl eltr mretek is megadhatk, ekkor kicsinyts, nagyts, vagy akr torzts is lehet az eredmny. Ezt azonban nem szabad a kpszerkesz program alternatvjaknt hasznlni. Rendkvl illetlen magatarts a 10-20 KB-os blyegkpek helyett tbb MB-os kpeket letltetni a ltogatval, majd 100px-es mretben megjelenteni.
Kp hasznlata linkknt
Link aktv fellethez szveg mellett vagy helyett kp is rendelhet. Erre mutat pldt a kvetkez kd:
2.7. Multimdia
<p> <a href="lastpage.htm"> <img border="0" src="kovetkezo.gif" width="65" height="38"> </a> </p>
83. oldal
2.7.2. Flash lejtsz begyazsa

Multimdia tartalmak kzzttelre legegyszerbb megolds, ha elhelyezzk a webszerveren, s valahol az oldalon egy linket ksztnk r. Ekkor a ltogat kattintsra az llomny teljes egszben letltdik a sajt gpre, s elindul a zene- vagy mdialejtsz. Ennek nhny elnye mellett inkbb a htrnyt szoktuk rezni: sokat kell vrni a lejtszs elindulsra, s lehet, hogy nem is akarjuk az egszet megnzni. Ma mr teljesen ltalnos megolds, hogy a legtbb ltogat szmtgpn rendelkezsre ll Flash bepl alkalmazst hasznljuk erre az esetre. Ekkor a weboldalunkhoz egy ingyenesen hasznlhat, vagy megvsrolt Flash alap lejtszt kell illesztennk a weboldalunkba.
Az object s param tagok

Az object tag begyazott objektumot definil. Az object tipikusan multimdia tartalom begyazsra hasznlhat. A param tag segtsgvel futsidej paramtereket adhatunk t a begyazott objektumnak. Az object tagok akr egymsba is gyazhatk, a bels object tag akkor lesz figyelembe vve, ha a kls object nem futtathat. (Pl. letiltott Flash lejtsz esetn egy llkp jelenjen meg.
Flowplayer
A mltn npszer Flowplayer49 lejtsz dokumentcija alapjn pl. a kvetkezhz hasonl kd hasznlhat:
49 http://flowplayer.org/
84. oldal
<object width="500" height="375" type="application/x-shockwave-flash" id="swf12970890251" data="/flowplayer3/flowplayer-3.2.5.swf"> <param name="swliveconnect" value="default"> <param name="play" value="true"> <param name="loop" value="true"> <param name="menu" value="false"> <param name="quality" value="autohigh"> <param name="scale" value="showall"> <param name="align" value="l"> <param name="salign" value="tl"> <param name="wmode" value="opaque"> <param name="bgcolor" value="#FFFFFF"> <param name="version" value="9"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="sameDomain"> <param name="base" value="/files/"> <param name="src" value="/flowplayer3/flowplayer-3.2.5.swf"> <param name="width" value="500"> <param name="height" value="375"> ... </object>
Termszetesen nem mindig szksges ennyi paramter tadsra. A pontos jelents pedig az adott lejtsz dokumentcijbl olvashat ki.
A kdban ltsz redundancik oka a bngszk klnbzsgben keresend.
JW Player
A szintn npszer JW Player50 a kvetkez begyaz kdot javasolja:
<embed flashvars="file=/data/bbb.mp4&autostart=true" allowfullscreen="true" allowscripaccess="always" id="player1" name="player1" src="player.swf" width="480" height="270" />
Videmegoszt kd begyazsa
Igen gyakori, hogy nem a sajt trhelynkn, hanem valamelyik videmegoszt oldalon elhelyezett videkat szeretnnk az oldalunkba begyazni. Pldaknt nzzk meg a Ustream51 ltal nyjtott kd felptst:
50 http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5 51 http://www.ustream.tv/
2.7. Multimdia
85. oldal
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="296" id="utv32777" name="utv_n_585188"><param name="flashvars" value="loc= %2F&autoplay=false&vid=12499218&locale=en_US&hasticket=fals e&id=12499218&v3=1"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="src" value="http://www.ustream.tv/flash/viewer.swf"><embed flashvars="loc= %2F&autoplay=false&vid=12499218&locale=en_US&hasticket=fals e&id=12499218&v3=1" width="480" height="296" allowfullscreen="true" allowscriptaccess="always" id="utv32777" name="utv_n_585188" src="http://www.ustream.tv/flash/viewer.swf" type="application/x-shockwaveflash"></object>
A npszer Youtube52 videmegoszt egy teljesen ms megoldst nyjt a szmunkra. Erre lthattunk egy pldt a 2.4.6. fejezetben.
2.7.3. HTML 5 jdonsgok

Manapsg igen gyakori a weboldalakban elhelyezett vide vagy hang llomny. A letlts nlkli lejtszshoz eddig elengedhetetlenek voltak a Flash alap lejtsz alkalmazsok. A HTML 5 clul tzte ki a mdia llomnyok natv tmogatst. A teljessg ignye nlkl nhny plda. Vide beillesztse:
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
Audio beillesztse:
<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>
Vide begyazsa vezrl gombokkal:

<video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p><button type="button" onclick="video.play();">Play</button> <button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;"> << Rewind</button>
A HTML 5 multimdia szolgltatsai mg nagyon kplkenyek. De a bngszgyrtk folyamatos vetlkedse szemltomst jt tesz a fejldsnek.
52 http://youtube.com/
86. oldal
2.8. Listk
A listkat igen szles krben alkalmazhatjuk a weblapok struktrjnak kialaktsnl.

A HTML tmogatja a szmozott, felsorolt s definci-listk ltrehozst.
Felsorolt lista
A felsorolt listk olyan elemeket tartalmaznak, amelyeket nem kell szmozssal azonostanunk, ehelyett egy felsorolsi szimblum (alaprtelmezetten egy fekete kr) jelzi vizulisan a listaelemek kezdett. Teht ilyenkor a felsorolt elemek sorrendje nem lnyeges, nem hordoz informcit. A felsorolt lista az ul elemmel rhat le, a lista elem pedig az li elemmel.
<ul> <li>a macska nyvog, szrs llat</li> <li>kutya ugar, szrs llat, kergeti a macskt</li> </ul>
Az eredmny:
34. bra. Felsorolt lista
Szmozott lista
A szmozott listk elemei (tbbnyire) szmmal azonostottak. A szmozott listt ol taggal kell ltrehozni, a lista elemek az elzhz hasonlan li-vel definilhatk.
<p>Hogy lehet hrom mozdulattal betenni egy elefntot a htbe?</p> <ol> <li>Kinyitod az ajtt,</li> <li>beteszed az elefntot,</li> <li>becsukod az ajtt.</li> </ol>
Az eredmny:
2.8. Listk
87. oldal
35. bra. Szmozott lista
Defincis lista
A defincis lista nem csupn egy felsorols, hanem a definilt elemek s a definciik sorozata. Egy defincihoz akr tbb elem is megadhat. A defincis lista dl taggal, a definilt elem dt taggal, maga a definci pedig dd taggal definilhat.
<dl> <dt>macska</dt> <dd>nyvog, szrs llat</dd> <dt>kutya</dt> <dt>eb</dt> <dd>ugar, szrs llat, kergeti a macskt</dd> </dl>
Az eredmny:
36. bra. Defincis lista
Tovbbi pldk
Felsorolt s szmozott listk esetn a szimblumok vlaszthatk. A kvetkez lista az angol abc kisbetit rja ki:
<ol type="a"> <li>alma</li> <li>bann</li> <li>citrom</li> </ol>
88. oldal
A szmozsnl megadhatjuk a kezd rtket is a start attribtum segtsgvel.

<ol start="4">
A listk egymsba is gyazhatk, gy hierarchikus szerkezeteket is kialakthatunk.

<ul type="square"> <li>Kv</li> <li>Tea <ul> <li>Fekete tea</li> <li>Zld tea</li> </ul> </li> <li>Tej</li> </ul>
rdemes azonban megfigyelni, hogy a bels lista nem kt li elem kztt, hanem egy li elem belsejben, a /li tag eltt szerepel. Vagyis az egymsba gyazott tagok lnca:
ul
li ul li.
2.8.2. Listk formzsa

A CSS lista formzsai segtsgvel a lista eltti trkzk, a lista elem vagy lista kp llthat be.
Lista jellk
Felsorolt listk esetn az egyes listaelemek sorrendisge nem jelent informcit, ezrt minden listaelem eltt ugyanazt a jellt szoks alkalmazni. rdemes megfigyelni a kvetkez pldban, hogy a formzs a lista (ul) s nem az egyes listaelemek ( li) tekintetben trtnik.
ul.disc ul.circle ul.square ul.none {list-style-type: {list-style-type: {list-style-type: {list-style-type: disc} circle} square} none}
Szmozott listk esetn jval tbb lehetsgnk van, br ezek kzl is csak nhny tartozik a gyakrabban hasznltak kz.
ol.decimal ol.lroman ol.uroman ol.lalpha ol.ualpha {list-style-type: {list-style-type: {list-style-type: {list-style-type: {list-style-type: decimal} lower-roman} upper-roman} lower-alpha} upper-alpha}
Az elre adott lehetsgeket magunk is tovbb bvthetjk azzal, hogy tetszleges kpet alkalmazhatunk listajellnek:
list-style-image: url('arrow.gif')
2.8. Listk
89. oldal
A listajell pozcija
A listajell a szveg belsejben, vagy az eltt is szerepelhet:
ul.inside { list-style-position: inside } ul.outside { list-style-position: outside }
Kzs deklarci
A listaelemek esetn is hasznlhat a mr jl megszokott, rvidebb rsmdot lehetv tev kzs deklarci. Erre is lthatunk egy pldt:
list-style: square inside url('arrow.gif')
2.9. Tblzatok
A tblzatok segtsgvel mtrix-szer, ktdimenzis adathalmazt tudunk megjelenteni. rdemes azonban figyelemmel lenni arra, hogy nagy mret tblzatok kezelse mg nagy monitoron se egyszer, ezrt rdemes tesztelni kisebb felbonts esetn is. Nagy tblzatok helyett rdemesebb lehet tbb kisebb tblzatot, vagy felsorolst hasznlni.

Tblzatokat a table tag segtsgvel lehet ltrehozni. Egy tbla sorokat tartalmaz (tr tag), s minden sor cellkat (th vagy td tag). A tbla celli szveget, kpet, bekezdst, listt, rlapokat, jabb tblzatokat is tartalmazhatnak. Nzznk egy egyszer, 2x2 cells tblzatot:
<table border="1"> <tr> <td>1. sor, 1. <td>1. sor, 2. </tr> <tr> <td>2. sor, 1. <td>2. sor, 2. </tr> </table> cella</td> cella </td> cella </td> cella </td>
Az eredmny:
90. oldal
37. bra. Tblzat
Tblzat szeglyek
Alaprtelmezetten a tblzatok szeglyek nlkl jelennek meg. Van azonban lehetsg arra, hogy szeglyek is megjelenjenek az oldalon: az elz pldban is lthat border tulajdonsggal lehet belltani a szegly szlessgt. (A szm kppontban rtend.)
Hamarosan ltni fogjuk, hogy CSS-ben ennl jobb lehetsgeink lesznek a kinzet befolysolsra.
Tblzat fejlc
A tblzat els (nhny) sorba, els (nhny) oszlopba szoks fejlc informcikat elhelyezni. Ez magyarzza az alatta vagy mellette tallhat rtkek jelentst. Ebben az esetben az els sort cellit a th tagokkal kell megadni:
<table border="1"> <tr> <th>1. fejlc</th> <th>2. fejlc</th> </tr> <tr> <td>1. sor, 1. cella</td> <td>1. sor, 2. cella</td> </tr> <tr> <td>2. sor, 1. cella</td> <td>2. sor, 2. cella</td> </tr> </table>
Az eredmny:
38. bra. Tblzat fejlc
Tblzat cm
Mltatlanul keveset hasznlt elem a caption, amivel a tblzat cmt tudjuk korrekt mdon megadni. Lehetsg van annak kivlasztsra is, hogy a ngy lehetsges oldal kzl hol jelenjen meg a cm. A caption elemnek meg kell elznie a sorokat:
2.9. Tblzatok
<table border="1"> <caption>Tblzat cme</caption> <tr> <th>1. fejlc</th> <th>2. fejlc</th> </tr> ...
91. oldal
Az eredmny:
39. bra. Tblzat cmmel
Cellk sszevonsa
A colspan s rowspan tulajdonsgok segtsgvel cellkat lehet egyesteni:
<table border="1"> <tr> <th>Nv</th> <th colspan="2">Telefon</th> </tr> ...
Az eredmny:
40. bra. sszevont cellk
Tippek
A thead, tbody s tfoot elemek a cljuk szerint nagyon hasznos elemek lennnek, de sajnos a bngszk igen vltoz mdon tmogatjk ket, ezrt a gyakorlatban nem is szoks alkalmazni. A tblzat cellk tovbbi tblzatokat is tartalmazhatnak, amivel sszetett szerkezetek alakthatk ki.
92. oldal
2.9.2. Tblzatok formzsa

A tblzatok formzsra hasznlhatak a korbban mr megismert szegly, httr, trkz formzsokat igen gyakran hasznljuk. Itt csak nhny specialitsra trnk ki.
Szeglyek
A HTML border tulajdonsg helyett ltalban a kvetkez mdon szoktuk a szeglyt formzni:
table, th, td { border: 1px solid black; }
Ezen kvl szinte minden esetben alkalmazzuk a table tag border-collapse attribtumt, amivel a szokatlan kinzet (pl. 40. bra) nll cellaszeglyek helyett a szvegszerkesztkben megszokott kinzetet rhatjuk el.
table { border-collapse:collapse; }
Mretek
A tblzatok alaprtelmezs szerint csak azt a minimlis helyet foglaljk el, amely szksges a tartalom megjelentshez. A knnyebb olvashatsg rdekben a cellkon szoks bels szeglyt (padding) belltani, illetve egyb mdokon is befolysolni a tblzat mrett. Nhny szoksos megolds:
table { width:100%; } th { height:50px; } td {line-height: 24px; }
Cella igazts
A cellk tartalmt mind vzszintes, mind fggleges irnyban igazthatjuk. rdemes azonban egysges kinzetet tervezni, s nem a tarkasgra trekedni. Nzznk itt is nhny megoldst:
td { text-align:right; vertical-align:bottom; }
2.9. Tblzatok
93. oldal
Zebra tblk
Az alap formzsok lehetsgein tl tovbbi segtsget adhatunk a ltogatknak, hogy a tblzatot knnyebben tudjk olvasni. Ennek igen elterjedt pldja a zebra tblk alkalmazsa. Nzznk egy rvid pldt53.
<table> <tr class="paratlan"> td>1. sor, 1. cella</td> <td>1. sor, 2. cella</td> </tr> <tr class="paros"> td>2. sor, 1. cella</td> <td>2. sor, 2. cella</td> </tr> <tr class="paratlan"> td>3. sor, 1. cella</td> <td>3. sor, 2. cella</td> </tr> <tr class="paros"> td>4. sor, 1. cella</td> <td>4. sor, 2. cella</td> </tr> </table> table { border-collapse:collapse; border: 1px solid #aaa; } td { border: 1px solid #aaa; padding: 2px; } tr.paros td { background-color: #eee; } tr.paratlan td { background-color: #fff; }
Az eredmny:
53 Forrs: A List Apart Magazine, http://www.alistapart.com/articles/zebratables/
94. oldal
41. bra. Zebra tbla formzs
2.10. rlapok
Az rlapokat arra hasznlhatjuk, hogy klnbz mdokon lehetsget adjunk a ltogatnak visszajelzsre, vagyis adatok megadsra.

A form elem ms rlap elemeket tartalmaz. Ezek az rlap elemek teszik lehetv az adatbevitelt. A leggyakrabban hasznlt elem az input. A type tulajdonsgval llthat be, hogy pontosan milyen adatbeviteli mdot szeretnnk.
Szveges mezk
A szveges mezk lehetv teszik, hogy betkbl, szmokbl, rsjelekbl ll karaktersorozatot lehessen begpelni.
<form> Vezetknv: <input type="text" name="vezeteknev"> <br> Keresztnv: <input type="text" name="keresztnev"> </form>
Az eredmny:
42. bra. rlap
2.10. rlapok
95. oldal
Az rlap elemek soron belli (inline) elemek. Ha egyms al akarjuk tenni, akkor azt valamilyen mdon kln meg kell adnunk a HTML, vagy mg szebb, ha a CSS segtsgvel. rdemes megfigyelni, hogy maga a form elem vizulisan nem lthat, csak a benne elhelyezett elemek. Ha (ahogy ebben a pldban is) nem adjuk meg a mezk szlessgt, a legtbb bngsz alaprtelmezetten 20 karakter szlesen jelenti meg. Ez azonban nem korltozza a tnylegesen begpelhet szveg hosszt. Jelszavak begpelshez password tpus (type="password") beviteli mezt szoks ltrehozni. Ez viselkedsben csak annyiban tr el a text tpustl, hogy a begpelt szveg helyett * (egyes bngszkben vagy opercis rendszerek alatt ) karakterek jelennek meg, s vglapra nem lehet kimsolni a tartalmt.
Az elrejts csak a kpernyre vonatkozik, a hlzaton egyszer adatknt utazik a jelsz.
Rdigombok
A rdigombokat akkor hasznlhatjuk, ha a ltogatnak nhny vlaszthat elem kzl kell vlasztsi lehetsget adni. Az elemek kzl mindig csak az egyik lehet aktv. rdemes megfigyelni a kvetkez listban, hogy a name tulajdonsg azonossga rendeli a rdigombokat logikailag egy csoportt, vagyis egymst kizr vlasztsi lehetsgekk. Teht ebbl a szempontbl sem a vizulis elrendezs szmt.
<form> <input type="radio" name="nem" value="no">N</input> <br> <input type="radio" name="nem" value="ferfi">frfi</input> </form>
Az eredmny:
43. bra. Rdigombok Az brn ltszik, hogy alaprtelmezetten egyik elem sincs kivlasztva. Ha valamelyik vlasztsi lehetsget alaprtelmezettnek tekintjk, akkor ezzel knnythetjk is az rlap kitltst:
<input type="radio" name="nem" value="no" checked>N</input>
Jellngyzetek
A jellngyzetek arra szolglnak, hogy a felhasznl egy vagy tbb elemet is ki tudjon vlasztani a rendelkezsre ll lehetsgek kzl. Ms megkzeltsben gy is lehetne fogalmazni, hogy egy jellngyzet ki- vagy bekapcsolt llapotban lehet, fggetlenl ms beviteli elemektl.
96. oldal
<form> <input type="checkbox" name="bicikli"> Van biciklim <br> <input type="checkbox" name="auto"> Van autm </form>
Az eredmny:
44. bra. Jellngyzetek Itt is van lehetsgnk az alaprtelmezetten ki nem vlasztott llapot helyett bejellve megjelenteni a jellngyzetet:
<input type="checkbox" checked name="bicikli">
A label elem
rdemes megfigyelni, hogy rdigomb s jellngyzet esetn a kattinthat terlet a kr, illetve ngyzet alak terletre korltozdik. Az elemek mellett megjelen szvegek a bngsz szmra fggetlenek a jell elemektl, csupn a vizulis helyzet jelzi neknk az sszefggst. A label elem hasznlatval ez a fggetlensg megszntethet: a szveget a jellelemmel aktv kapcsolatba hozhatjuk. Ez azt jelenti, hogy lehet kattintani a szvegre is.
<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">frfi</label>
Az elz verzihoz kpest fontos kiegszts, hogy a value mellett az id is megkapta az azonost szvegeket, mivel a label tag for tulajdonsga az id alapjn azonostja az elemeket.
rlap adatok elkldse

Az esetek jelents rszben a felhasznl azrt tlt ki egy rlapot, hogy adatokat tudjon a szerver fel kldeni valamilyen hats rdekben. Az eddigi pldkbl kt fontos rsz kimaradt. Elszr is a felhasznl szmra szoks biztostani egy klds (vagy valami hasonl felirat) gombot, hogy erre kattintva kezdemnyezhesse az adatok elkldst. Msrszt a form tag egybknt ktelezen kitltend action tulajdonsga hatrozza meg, hogy melyik oldalnak kell a krst feldolgoznia.
2.10. rlapok
<form name="input" action="feldolgoz.php" method="get"> Felhasznli nv: <input type="text" name="nev"> <input type="submit" value="Klds"> </form>
97. oldal
Az eredmny:
45. bra. Nyomgomb Ha a felhasznl begpeli a nevet, majd kattint a Klds gombra, akkor a szveg tovbbtsra kerl a feldolgoz.php szmra. Nyomgombokat a button taggal is ltre lehet hozni.
Lenyl lista
Bizonyos esetekben rdigombok helyett clszer inkbb a lenyl listk alkalmazsa. (Elssorban terjedelmi, ttekinthetsgi okokra kell gondolni.) Kt tag hasznlatra lesz mindenkppen szksg: elszr is a select tag adja meg a lista kereteit, mg az option tagok a vlaszthat elemeket.
<form> <select name="autok"> <option value="audi">Audi</option> <option value="fiat">Fiat</option> <option value="skoda">Skoda</option> <option value="suzuki" selected>Suzuki</option> </select> </form>
A selected tulajdonsg lehetv teszi az alaprtelmezett elem kijellst. Ha ez nem szerepel a forrsban, akkor az els elem lesz a kivlasztott betltdskor. Lehetsg van olyan lista ltrehozsra is, ahol egyszerre akr tbb elem is kivlaszthat:
<select name="autok" multiple>
A size attribtum segtsgvel a lenyl lista tbb soros listv alakthat.

<select name="autok" size="5">
Vgl megemltjk a hosszabb, csoportostssal ttekinthetv tehet listk esetn hasznos optgroup tagot. Az albbi plda a ngy vlasztsi lehetsget kt vizulis csoportba sorolja.
98. oldal
<select> <optgroup label="Olasz autk"> <option value="fiat">Fiat</option> <option value="ferrari">Ferrari</option> </optgroup> <optgroup label="Nmet autk"> <option value="vw">VW</option> <option value="audi">Audi</option> </optgroup> </select>
Tbb soros szveges mezk

Lehetsg van hosszabb szveg begpelst, szerkesztst lehetv tev beviteli mezt is ltrehozni. Erre szolgl a textarea elem. A kvetkez pldn a mretek megadsn tl a kezdszveg is definilt:
<textarea rows="10" cols="30">Kezdszveg</textarea>
Mezcsoportok
Hosszabb rlapok esetn hasznos lehetsg, hogy az egyes mezket vizulisan csoportosthatjuk a fieldset, s akr cmmel is ellthatjuk a legend taggal. Nzznk egy rvid pldt egyetlen csoporttal. (A gyakorlatban egyms utn tbb csoportot szoktunk ltrehozni.)
<form> <fieldset> <legend>Szemlyes</legend> Nv: <input type="text" size="30"><br> E-mail cm: <input type="text" size="30"><br> Szletsi v: <input type="text" size="10"> </fieldset> </form>
Az eredmny:
46. bra. Mezcsoport hosszabb rlapokhoz
2.10.2. j lehetsgek a HTML 5-ben

A HTML 5 sok hinyt ptol ezen a rendkvl fontoss vlt terleten. A HTML 5 nlkl klnbz kliens s szerver oldali megoldsokkal prbltuk ptolni azokat a hinyossgokat,
2.10. rlapok
99. oldal
amelyek a jelenlegi rlapok hasznlata esetn mutatkoznak. De nzzk meg, melyek azok a lehetsgek, amelyek knnythetik a munknkat. Kezdjk elszr az jfajta rlap elemekkel.
Szm mez
Gyakran van szksgnk arra, hogy szmadatot krjnk be a ltogattl. A kvetkez plda mutatja, hogy milyen lehetsgeink vannak.
<input type="number" min="10" max="20" step="2">
Jl ltszik, hogy az intervallum hatrait s a lpskzt is megadhatjuk.
47. bra. Szm mez
Csszka hasznlata
Akr szmadatok esetn, akr ms szituciban rdekes megolds lehet a csszka hasznlata.
<input type="range" min="0" max="10" step="2" value="6">
Arra azonban rdemes figyelni, hogy itt a csszka szmszer rtke nem jelenik meg kzvetlenl. JavaScript segtsgvel viszont sszekthetjk a csszka mkdst ms rlap elemekkel.
48. bra. Csszka
Dtum/id megadsa
Nagyon krlmnyes megoldsokat kellett alkalmaznunk a dtum s idpont megadsokhoz a korbbiakban. De erre is van egy nagyszer megoldsunk:
<input type="date" > <input type="time" >
Az eredmny:
100. oldal
49. bra. Date s time bemenet Ezen kvl hasznlhat a datetime, month s week tpus mez is.
Szn megadsa
A szn megadsra is j lehetsgnk van:
<input type="color">
Tovbbi lehetsgek
A kvetkez pldk jl mutatjk az ignyeket. A bngszk megoldsa mr nem ilyen egyrtelm.
<input type="tel"> <input type="email"> <input type="url">
Automatikus fkusz
Automatikusan megkapja a fkuszt a kvetkez elem:
<input type="text" autofocus >
Validls
A JavaScript hasznlata helyett tovbbi lehetsgeket is kaptunk. Ktelez kitlteni a kvetkez mezt:
<input type="text" required >
Lehetsg van regulris kifejezsek hasznlatra is:
2.10. rlapok
<input type="text" pattern="[az]{3}[0-9]{3}" >
101. oldal
2.10.3. rlapok formzsa

Az rlapok formzsnl nem az j technikai lehetsgeket, hanem a szemlletmdot rdemes hangslyozni. Nzznk meg egy rvid, de szemlletes pldt Antonio Lupetti tollbl54. Ezt szeretnnk elrni:
50. bra. Form dizjn A HTML kd:
54 http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
102. oldal
<div id="stylized" class="myform"> <form id="form" name="form" method="post" action="index.html"> <h1>Sign-up form</h1> <p>This is the basic look of my form without table</p> <label>Name <span class="small">Add your name</span> </label> <input type="text" name="name" id="name"> <label>Email <span class="small">Add a valid address</span> </label> <input type="text" name="email" id="email"> <label>Password <span class="small">Min. size 6 chars</span> </label> <input type="text" name="password" id="password"> <button type="submit">Sign-up</button> <div class="spacer"></div> </form> </div>
A CSS kd:
body { font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } p, h1, form, button { border:0; margin:0; padding:0; } .spacer { clear:both; height:1px; } .myform { margin:0 auto; width:400px; padding:14px; } #stylized { border:solid 2px #b7ddf2; background:#ebf4fb; } #stylized h1 { font-size:14px; font-weight:bold; margin-bottom:8px; }
2.10. rlapok
#stylized p { font-size:11px; color:#666666; margin-bottom:20px; border-bottom:solid 1px #b7ddf2; padding-bottom:10px; } #stylized label { display:block; font-weight:bold; text-align:right; width:140px; float:left; } #stylized .small { color:#666666; display:block; font-size:11px; font-weight:normal; text-align:right; width:140px; } #stylized input { float:left; font-size:12px; padding:4px 2px; border:solid 1px #aacfe4; width:200px; margin:2px 0 20px 10px; } #stylized button{ clear:both; margin-left:150px; width:125px; height:31px; background:#666666 url(img/button.png) no-repeat; text-align:center; line-height:31px; color:#FFFFFF; font-size:11px; font-weight:bold; }
103. oldal
Termszetesen sok ms megolds is hasznos s megfelelen ltvnyos lehet. A tmban rdemes mg tutorialokat55 megismerni, s hasznos lehet a Wufoo Form Gallery56 megismerse is. Vgl a pForm57 automata generlsi lehetsgeit is rdemes kiprblni.
55 Pl. http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ 56 http://wufoo.com/gallery/ 57 http://www.phpform.org/
104. oldal
2.11. Fejrsz
A head elem olyan informcikat tartalmaz, amelyek a HTML dokumentum egszre vonatkoznak. A fejrsz a base, link, meta, title, style s script tagokat tartalmazhatja. A base elem az oldal relatv linkjeinek mkdsre lesz hatssal. Ha nincs a base elem href tulajdonsga megjellve, akkor a relatv hivatkozsok az aktulis HTML fjl knyvtrhoz kpest lesznek rtelmezve. A href megadsa esetn a megadott URL lesz az indulsi hely. A meta elem meta-informcit definil az oldalhoz. Nhny plda:
<meta name="keywords" content="HTML, CSS, XHTML, JavaScript">
A keres robotok szmra fontos kulcsszavakat emeli ki.

<meta name="description" content="Web programozs jegyzet">
Rvid sszefoglal az oldaltl. Ezeknek az informciknak korbban igen nagy jelentsgk volt a keresoptimalizls szempontjbl. A keresoldalak egy korbbi genercija (a Google eltti korszak) lnyegben a meta tagokra ptette a keressi szolgltatst. Ezt a fejlesztk egy id utn arra hasznltk, hogy az oldalak hamis kpet mutassanak magukrl, s ezzel jobb helyet rjenek el a tallati listkon. A Google nagy tlete volt, hogy nem erre a knnyen manipullhat informcira, hanem a bejv linkekre pt. gy ma a meta tagok jelentsge jval kisebb, mint ahogy azt sokan gondoljk.
<meta name="revised" content="Hege Refsnes, 6/10/99">
Az utols mdosts napja. Vgl a karakterkdols megadsa:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
2.12. A CSS3 nhny megoldsa

A CSS3 fejldse jelentsen felgyorsult. De gy is nehz megjsolni, hogy mikor hasznlhatjuk ezeket a megoldsokat teljes rtken. Most csak nhny alapvetbb pldt fogunk megnzni.
Lekerektett sarkok
-moz-border-radius: 5px; -webkit-border-radius: 5px;
2.12. A CSS3 nhny megoldsa
105. oldal
Szegly kppel
border-image: url('image-border.png')29 29 29 29 round round; border: double orange 1em;
Szveg rnyk
text-shadow: 2px 2px 2px #000;
Doboz rnyk
box-shadow:10px 10px 20px #000000;
tltszsg
<img src="opacity.png" style="margin: 10px; opacity:0.25; width:179px; height:76px;"/> <img src="opacity.png" style="margin: 10px; opacity:0.50; width:179px; height:76px;"/> <img src="opacity.png" style="margin: 10px; opacity:0.75; width:179px; height:76px;"/>
Tbb httrkp
background: url(top.png) top left no-repeat, url(banner.png) 11px 11px no-repeat, url(bottom.png) bottom left no-repeat, url(middle.png) left repeat-y;
Tbb hasb
-moz-column-gap: 2em; -moz-column-count: 3;
A sokfle forrs kzl taln az Opera tutorialjait 58 s a Modern CSS3: Alapvet jellemzk59 cm cikket rdemes elolvasni.
58 http://dev.opera.com/articles/tags/css3/ 59 http://www.webragacs.hu/2010/05/modern-css3-1-resz-alapveto-jellemzok/
3
3. Szerver oldali mkds
Ennek a fejezetnek a clja, hogy a dinamikus weboldalak ellltshoz szksges alapismereteket bemutassa. A fejezet tanulmnyozshoz szksges lehet, hogy az 1.2. s 1.4. fejezeteket ismt tnzzk. Szerver oldali krnyezetekben igen nagy a vlasztk, de tbb ok miatt is a klasszikus Apache-PHP-MySQL alap webfejlesztssel fogunk ismerkedni e knyvben. Termszetesen ms krnyezetek hasznlata esetn is hasonl mdon kell megismernnk a krnyezetet, s hasonl lpseket kell megtennnk a weboldal fejlesztse sorn.
3.1. A szerver konfigurlsa

Akr az 1.4.2. fejezetben bemutatott XAMPP-ot hasznljuk, akr Linux alap szerverrel kell dolgoznunk, hasonl konfigurcis lpsek megttelre lesz lehetsgnk s szksgnk. Sajt gp esetn rendszergazdai jogosultsgokkal nem okozhat problmt a szksges konfigurcis lpsek elvgzse. Ms esetben (pl. megosztott, brelt trhelyszolgltats esetn) a rendszergazda, illetve szolgltat tudja a szksges lpseket elvgezni. A teljessg ignye nlkl nzznk meg nhny fontosabb konfigurcis lehetsget.
3.1.1. Az Apache konfigurlsa

Az Apache webszerver legfontosabb konfigurcis llomnya a httpd.conf. Ez XAMPP esetn az xampp/apache/conf/httpd.conf tvonalon rhet el. Ezt az llomnyt kell megnyitnunk egy programozi editorral, s szerkesztennk. Az llomny elmentse utn pedig jra kell indtanunk a webszervert, hogy a vltoztatsok rvnyesljenek.
XAMPP esetn ezt az XAMPP Control Panel segtsgvel clszer megoldani (7. bra).
Nzznk bele, hogyan is kell szerkesztennk. Az llomny els sorai:
108. oldal
# # # # # # #

This is the main Apache HTTP server configuration file. It contains the configuration directives that give the server its instructions. See <URL:http://httpd.apache.org/docs/2.2/> for detailed information. In particular, see <URL:http://httpd.apache.org/docs/2.2/mod/directives.html > for a discussion of each configuration directive.
Jl ltszik, hogy Unixos szoksnak megfelelen a konfigurcis llomny is sok informcit tartalmaz, de a http://httpd.apache.org/docs/2.2/mod/directives.html weboldalt is megltogathatjuk tovbbi informcikrt. A pldbl azt is rdemes mg megfigyelni, hogy a # karakterrel kezdd sorok megjegyzseket tartalmaznak az Apache szempontjbl, vagyis ezekkel a sorokkal az Apache nem fog foglalkozni. Ezrt lthatjuk azt a ksbbiekben is, hogy egybknt korrekt belltsokat kikommentlva tallunk. Ezzel az Apache szmra azt mondjuk, hogy ne foglalkozzon az adott sorokkal. A kvetkezkben nhny vltoz jelentst nzzk meg.
ServerRoot
A ServerRoot meghatrozza, hogy mi az Apache szerver teleptsi tvonala. rdemes a pldn megfigyelni, hogy az elrsi utakat (Windows esetn is) / jelekkel kell lerni.
ServerRoot "C:/xampp/apache"
LoadModule
A LoadModule sorok betltik azokat az opcionlis Apache modulokat, amelyekre ppen szksgnk van az oldal mkdshez. Pl. A kvetkez sor a knyvtrstruktra direkt hasznlata helyett egy logikai tvonaltervezst is lehetv tesz a .htaccess llomnyok hasznlatval.
LoadModule rewrite_module modules/mod_rewrite.so
Ezt a megoldst szoks beszdes URL-nek is nevezni. rdemes Nullstring Beszdes URL-ek .htaccess, mod_rewrite azaz a rewrite engine ereje 1. cikkt60 is elolvasni.
DocumentRoot
A DocumentRoot-ba kell azokat az llomnyokat tennnk, amelyeket a webszerver ltal elrhetv akarunk tenni.
DocumentRoot "C:/xampp/htdocs"
60 http://nullstring.blog.hu/2008/01/23/beszedes_url_ek_htaccess_mod_rewrite_azaz_a_rewrite_engine_ ereje_1
109. oldal
Pl. XAMPP esetn az ebbe a knyvtrba helyezett proba.html llomnyt a http://localhost/proba.html tvonalon tudunk elrni a bngsznkbl.
Directory
A Directory rszben mr nem csak egyszer vltozmegadst lthatunk. Azt hatrozzuk meg, hogy a megadott knyvtr tartalmt hogyan szolglja ki a webszerver. Pl. XAMPP esetn az alapbellts:
<Directory "C:/xampp/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory>
Ezek a belltsok a teljes knyvtrstruktra (pl. a C:\xampp\htdocs s alknyvtrai) alaprtelmezett belltsai lesznek. az Indexes miatt kilistzza egy knyvtr llomnyait, ha az nem tartalmaz index.html vagy index.php llomnyt az AllowOverride All megengedi, hogy az alknyvtrakban fellrjuk az alapbelltsokat
IfModule
Az IfModule konfigurcis sorok csak akkor lesznek figyelembe vve, ha az adott modult az Apache betlttte. Pl.
<IfModule dir_module> ...</IfModule>
DirectoryIndex
A DirectoryIndex azt hatrozza meg, hogy egy knyvtr (pl. http://localhost/ a C:\xampp\htdocs knyvtr, mg a http://localhost/xampp a C:\xampp\htdocs\xampp knyvtr) lekrsekor mi trtnjen. A kvetkez plda esetn elszr az index.php majd az index.php4, majd a tbbi nev llomnyt prblja betlteni a webszerver.
DirectoryIndex index.php index.php4 index.php3 index.cgi index.pl index.html index.htm index.shtml index.phtml
Ha brmelyiket megtallja, akkor a keress abbamarad. De ha egyiket se tallja meg, akkor vagy kilistzza a knyvtr llomnyait (Indexes bellts esetn), vagy hibazenetet kapunk (403-as HTTP hiba: Forbidden). Tovbbi informcik olvashatk pl. SzabiLinux oldaln61.
61 http://szabilinux.hu/apache2/konfig.html
110. oldal
3.1.2. A PHP konfigurlsa

Ha az XAMPP megfelelen teleptve van, a http://localhost/xampp/phpinfo.php cmen alapvet informcikat tudhatunk meg az Apache, PHP s egyb konfigurcirl. Ha tvoli trhelyszolgltatt hasznlunk, akkor clszer pl. egy i.php nev llomnyt ltrehozni a kvetkez tartalommal, s FTP-vel feltlteni a trhely gykr (vagy public_html) knyvtrba:
<?php phpinfo() ?>
Termszetesen a hasznlat utn trljk a szerverrl ezt az llomnyt.
Ekkor a bngszben a http://azendomainem.hu/i.php cmen ugyanezeket az informcikat lthatjuk:
51. bra. A phpinfo() eredmnye (rszlet) Igen sok hasznos informcit tallhatunk, de most legrdekesebb a szmunkra az bra utols sora. Ebben ltszik, hogy hol tallhat a php.ini llomny, amelyet a PHP konfigurlshoz szerkesztennk kell. A php.ini nem az egyetlen, de a legfontosabb konfigurcis lehetsgnk. Nzzk meg nhny kezd sort:

[PHP]
111. oldal
;;;;;;;;;;; ; WARNING ; ;;;;;;;;;;; ; This is the default settings file for new PHP installations. ; By default, PHP installs itself with a configuration suitable for ; development purposes, and *NOT* for production purposes. ; For several security-oriented considerations that should be taken ; before going online with your site, please consult php.ini-recommended ; and http://php.net/manual/en/security.php.
Jl ltszik, hogy itt a ; jelzi a megjegyzseket, rszletes dokumentcit pedig a http://php.net/manual/en/security.php cmen tallhatunk. Az llomny nhny belltsa kvetkezik, itt is vltoz-szer szintaxissal.
short_open_tag
A short_open_tag meghatrozza, hogy a <?php kezd karaktersorozat helyett hasznlhat-e a <? is. Egy esetleges jvbeli kltzs miatt rdemes inkbb a mindenhol hasznlhat hosszabb szintaxist alkalmazni, teht nem pteni erre a belltsra.
short_open_tag = On
safe_mode
A safe_mode egy prblkozs a PHP futtatkrnyezet egyes biztonsgi problminak kikszblsre. Ha megoldhat, kapcsoljuk ki:
safe_mode = Off
disable_functions
A disable_functions sorral megadhatjuk, hogy melyik PHP fggvnyek ne legyenek elrhetek a fut PHP kd szmra. Trhelyszolgltatk elszeretettel alkalmazzk, biztonsgi okokra hivatkozva. Egyes esetekben tiltani szoktk pl. a show_source, system, shell_exec, passthru, exec, phpinfo, popen, proc_open fggvnyeket.
max_execution_time
A max_execution_time belltsa meghatrozza, hogy meddig futhat a PHP kdunk. Ha ezt az idkeretet tllpjk, a futs meg lesz szaktva. Tipikus a 30-60 msodperc krli bellts:
max_execution_time = 60
112. oldal
memory_limit
A memory_limit belltsa meghatrozza, hogy mennyi memrit hasznlhat maximlisan a PHP rtelmez a kdunk futtatshoz. Ha ezt tllpjk, a futs meg lesz szaktva. Ti pikus a 32-256Mb krli bellts:
memory_limit = 32M
Az error_reporting bellts azt befolysolja, hogy milyen jelleg hibazeneteket fogunk a bngszben ltni a kdunk futsa kzben. Fejleszts kzben rdemes mindent bekapcsolni:
error_reporting = E_ALL & ~E_NOTICE
l krnyezetben viszont inkbb kapcsoljuk ki a publikus hibazeneteket, s inkbb a log fjlokat figyeljk.
post_max_size
s upload_max_filesize
A post_max_size az egyetlen krskor, POST metdussal kldtt maximlisan elfogadhat adatmennyisget rja le. Az upload_max_filesize egyetlen feltltend llomny maximlis mrett hatrozza meg. Az alapbelltsok:
post_max_size = 64M upload_max_filesize = 64M
A kt rtk kztt van ugyan kapcsolat, de azrt nem trivilis. Pl. egy tbb llomny feltltst lehetv tev rlap esetn lehet, hogy llomnyonknt csak 8Mb-ot engedlyeznk, de sszessgben egy 32MB-os korltot is szabunk:
post_max_size = 32M upload_max_filesize = 8M
extension_dir
s extension
Az extension_dir megadja, hogy hol tallhatak a PHP-hez teleptett bepl csomagok.

extension_dir = "C:\xampp\php\ext\"
Az extension-k a betltend beplket adja meg. Nhny gyakori bepl:

extension=php_gd2.dll extension=php_mbstring.dll extension=php_mysql.dll
session.save_path
s session.auto_start
A session.save_path belltsa a munkamenetek trolsra szolgl llomnyok helyt hatrozza meg. A session.auto_start a munkamenetek automatikus indtst tiltja le a kvetkez kdban:

session.save_path = "C:\xampp\tmp" session.auto_start = 0
113. oldal
3.1.3. A phpMyAdmin konfigurlsa

XAMPP esetn a http://localhost/phpmyadmin cmen tudjuk elrni a MySQL adatbzisok konfigurlsra szolgl adminisztrtori felletet. XAMPP esetn klnlegesebb konfigurlsra nincs szksg. De ha mgis, akkor az xampp\phpMyAdmin\config.inc.php cmen tudjuk megtenni. Egy rvid plda elejig nzznk bele ebbe a PHP nyelv kdba:
/* Authentication type and info */ $cfg['Servers'][$i]['auth_type'] = 'config'; $cfg['Servers'][$i]['user'] = 'root'; $cfg['Servers'][$i]['password'] = ''; $cfg['Servers'][$i]['AllowNoPasswordRoot'] = true;
Jl ltszik, hogy a phpMyAdmin az alaprtelmezetten ltrejv root nev, s jelsz nlkl hasznlhat felhasznlt hasznljuk.
3.1.4. A MySQL konfigurlsa, jogosultsgkezels

A MySQL legalapvetbb konfigurcijt XAMPP esetn a c:\xampp\mysql\bin\my.ini llomny szerkesztsvel, majd a MySQL (jra)indtsval rhetjk el. Kvetkezzen nhny bellts pldaknt. Ezen a porton lesz elrhet a MySQL szerver:
port = 3306
Itt troldnak az adatbzisok:

datadir="C:/xampp/mysql/data"
Hova logolja a hibazeneteket:

log_error="mysql_error.log"
Jogosultsgkezels
A MySQL jogosultsgkezelse rendkvl fontos szerepet tlt be. Adataink biztonsga nagy jelentsg brmilyen adatbzisrl s alkalmazsrl legyen is sz. A MySQL jogosultsgkezelse az automatikusan telepl, mysql nev adatbzis tartalmra pl. Ez alapjn minden kapcsolds sorn figyelembe veszi a kvetkezket: honnan kapcsoldunk
114. oldal
kik vagyunk mit tehetnk Az adatbzis tblinak a kvetkez szerepe van:
user: Ki s honnan kapcsoldhat. Definilja a globlis jogokat is. db: Melyik adatbzishoz ki frhet hozz. Definilja az adatbzis szint jogokat is. host: Melyik adatbzishoz honnan lehet csatlakozni. tables_priv s columns_priv: Tbla s mez szint jogosultsgokat definil. Ez alapjn a hitelests kt lpsben trtnik. 1. A MySQL megllaptja, hogy van-e jogunk csatlakozni a megadott nvvel, jelszval s helyrl a kvnt adatbzishoz. 2. Minden SQL parancs esetn megvizsglja, hogy van-e jogunk az adott parancsot lefuttatni.
Adatbzisok s felhasznlk
Trhelyszolgltatk esetben igen gyakori, hogy egyetlen adatbzisunk lehet, s hozz egyetlen felhasznlnk. Ebben az esetben teht az adatbzishoz az egy felhasznlval csatlakozunk, s a felhasznl is csak ehhez az egy adatbzishoz kapott jogosultsgokat. Ezt a szokst ms esetben is clszer hasznlni. Olyankor is, ha egybknt lenne lehetsgnk tbb adatbzishoz ugyanazt a MySQL felhasznli azonostt hasznlni.
3.1.5. Karakterkdols: Hasznljunk mindenhol UTF-8-at

Mivel a magyar nyelv hasznlata weboldalak ksztsnl nem trivilis, rdemes bevezetknt ezzel a tmval is foglalkoznunk. Mivel ma, 2011-ben az UTF-8 karakterkdols egyre dominnsabbnak (br kzel sem problmamentesnek) tekinthet, rdemes egyre inkbb megismerni, mg ha a korltaival is kell mg szembeslnnk.
Hodicska Gergely 2006-os nagyszer cikke Karakterkdolsi problmk kikszblse62 cmmel mg nem az UTF-8-rl szl, de az alapelvek miatt mindenkppen rdemes elolvasni.
Bevezetknt mg rdemes azt elmondani, hogy a PHP jelenlegi legfrissebb (5.3.x) verzija sem kezeli jl az UTF-8 krdst. Ha azonban kvetjk a kvetkez alapelveket, tbbnyire kzben tarthatjuk a problmt.
62 http://weblabor.hu/cikkek/karakterkodolasiproblemakkikuszobolese
115. oldal
Konfigurcis llomnyok
A httpd.conf-hoz adjuk hozz:
AddDefaultCharset UTF-8
A php.ini-hez adjuk hozz:

default_charset = "utf-8"
A my.ini-hez adjuk hozz:

[client] default-character-set=utf8 [mysqld] character-set-server=utf8 default-character-set=utf8 default-collation=utf8_unicode_ci init-connect='SET NAMES utf8' character-set-client = utf8
Minden szerver alkalmazst (szolgltatst) indtsunk jra, s mr hasznlhatjuk is.
HTML, PHP forrskd mentse

A forrskd ksztsekor az editorunkkal tudatnunk kell, hogy milyen karakterkdolssal kell elmentenie az llomnyt. Ez Komodo Edit esetn kt mdon tehetjk meg: Az Edit / Preferences / Internationalization / Custom encoding trke legyen UTF-8. Ez minden tovbbi llomny alaprtelmezse lesz.
116. oldal
52. bra. UTF-8 alaprtelmezett belltsa Komodo Edit esetn Ha egy megnyitott llomnyt, akarunk UTF-8 kdolssal menteni, akkor az Edit / Current File Settings / Properties / Encoding rtkt lltsuk UTF-8-ra, BOM (byte order mark) nlkl, s mentsk az llomnyt.
Egyes Windows-os programok a fjl elejre rt 0xEF,0xBB,0xBF bjtsorozattal jelzik, hogy UTF-8 kdols fjlrl van sz; ezt nha UTF-8 BOM kdolsnak hvjk. [] UTF-8-ban ennek a karakternek elmletileg nincs jelentse, gy hasznlhat a kdols jelzsre, azonban ez megtri az ASCII-kompatibilitst, gy nem javasolt. Az gy kdolt PHP fjlok pldul a weboldal elejn megjelen karaktersorozatot eredmnyeznek. 63
63 Forrs: http://hu.wikipedia.org/wiki/UTF-8#BOM
117. oldal
53. bra. UTF-8 belltsa az aktulis llomnyra, Komodo Edit esetn Ha azt akarjuk, hogy a bngsz UTF-8-knt dolgozza fel a vlaszt, a korbban mr ltott meta tagot hasznlhatjuk:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Ennl mg jobb megolds, ha a forrskd legelejn, mg a doctype s a html tag eltt kikldjk a kvetkez header fggvnyt:
<?php header('Content-Type: text/html; charset=utf-8'); ?><!DOCTYPE html>
118. oldal
Problmk a sztringek kezelsvel

Ha UTF-8 kdolst hasznlunk, a hagyomnyos karakter-kezelsi funkcik (pl. az indexels) nem megfelelen fognak mkdni. De gondban lesznk az strlen, strtoupper, strpos s hasonl fggvnyekkel is. Jelenleg megoldst kiegsztk formjban tallhatunk. Pl. a Multibyte String hasznlata esetn az mb_strlen s hasonl fggvnyeket64 kell hasznlnunk. Emellett egyre inkbb elterjed megoldsnak tnik az iconv65.
FTP feltlts
Arrl sem rdemes megfeledkeznnk, hogy rdemes az llomnyainknl garantlni, hogy az FTP feltlts sorn se vltozzon semmi a forrskdunkban. Ezrt az FTP alkalmazsunkat rdemes gy belltani, hogy az binris mdban tltse fel az llomnyokat. Total Commander esetn a Belltsok / ltalnos belltsok / Mkds / FTP / Alaprtelmezett tviteli md a Binris legyen.
54. bra. Binris tviteli md belltsa a Total Commanderben Ezekkel a belltsokkal az UTF-8 kdols tbbnyire elrhet.
Adatbzis-kapcsolat
Adatbzis-hasznlat esetn az adatbzis ltrehozsa s a PHP-MySQL kommunikci sorn is rdemes belltani az utf-8-at.
64 Tovbbi informcik: http://www.php.net/manual/en/ref.mbstring.php 65 http://www.php.net/manual/en/ref.iconv.php
3.2. PHP alapok
119. oldal
3.2. PHP alapok

A PHP (PHP: Hypertext Preprocessor) erteljes szerver-oldali szkriptnyelv, jl alkalmazhat dinamikus s interaktv weboldalak elksztshez. A versenytrsakkal szemben (mint pldul az ASP) szles krben alkalmazott s alkalmazhat, szabad s hatkony alternatva. A PHP hasznlata esetn a PHP kdot kzvetlenl a HTML kdba gyazhatjuk be. A nyelv szintaxisa nagyon hasonlt a C/C++, Java, Javascript vagy Perl nyelvekhez. Leggyakrabban az Apache webszerverrel hasznljuk egytt klnbz opercis rendszerek alatt. Egy PHP llomny szveget, HTML tagokat s PHP kdokat (szkripteket) tartalmazhat. A PHP kd mg a szerveren lefut, mieltt a webszerver a ltogat krst kiszolgln. A ltogat krsre egyszer HTML llomnnyal vlaszol. Futsa sorn kommuniklhat adatbzis-szerverrel (pl. MySQL, Informix, Oracle, Sybase, PostgreSQL, ODBC) is. A PHP llomny szoks szerint .php kiterjeszts, br a webszerver belltsai akr ettl eltr megoldsokat is lehetv tesznek. (Elfordul pl., hogy az ppen aktulis belltsok szerint a .html llomnyokat is rtelmezi a PHP motor.) A PHP szabadon letlthet s hasznlhat.
3.2.1. Szintaxis
Egy weboldal PHP forrst nem tudjuk a bngsznk segtsgvel megnzni. Ott mindig csak a PHP ltal ellltott HTML kimenet lthat.
A fejezet pldaprogramjai helytakarkossgi okokbl a legtbb esetben nem teljes vagy nem szabvnyos HTML oldalakat ksztenek.
A HTML oldalba gyazott PHP kd kezdett s vgt egyrtelmen jellni kell a PHP rtelmez szmra. Ennek tbbfle mdja kzl leginkbb a kvetkez ajnlhat:
<?php ... ?>
Szoks mg hasznlni egy rvidebb jellst is, de ez nem biztos, hogy minden konfigurci esetn mkdik. A 3.1.2. fejezetben olvashattunk a short-open-tag-rl.
<? ... ?>
A kvetkez Hello World plda jl mutatja, hogyan gyazzuk be a PHP kdot a HTML oldalba:
120. oldal
<html> <body> <?php echo "Hello World"; ?> </body> </html>
Majdnem minden PHP utastsnak ;-vel kell vgzdnie. Kivtel: a PHP zr tag eltt elhagyhat. Kt egyszer lehetsgnk van arra, hogy a HTML llomnyba kimenetet szrjunk be: echo s print. A kt fggvny kzl szabadon vlaszthatunk, de az olvashatsg kedvrt nem illik keverni a kettt egy kdon bell. Emellett egy ettl eltr megkzeltst is hasznlhatunk:
Sablonszer megkzelts
A sablonrendszerekrl szl 3.11. fejezet pldi elssorban a kvetkez pldhoz hasonlan, print s echo nlkl kezelik a kimenetet:
<acronym class="datum" title="<?= $datum['hosszu'] ?>"> <span class="honap"><?= $datum['honap'] ?></span> <span class="nap"><?= $datum['nap'] ?></span> </acronym>
A plda lnyege, hogy nem a PHP-be illesztjk a HTML-t kszt kdsorokat, hanem fordtva: a fix HTML szvegbe szrjuk be a PHP kifejezseket (elssorban vltozk beillesztshez szksges utastsokat). Ehhez az rtk kirsra szolgl szintaxis hasznlhat:
<?= kifejezs ?>
A kifejezs kirtkeldik, s rtke a tag helyre kerl beszrsra.

Ez a szintaxis csak akkor hasznlhat, ha a php.ini-ben a short_open_tag be van kapcsolva (3.1.2. fejezet).
3.2.2. Megjegyzsek
A PHP kdban egysoros (sorvgi) s tbbsoros megjegyzseket is hasznlhatunk:
<html> <body> <?php // Egy soros megjegyzs /* Ez egy tbb soros megjegyzs blokk */ ?> </body> </html>
Nem szabad sszekeverni a HTML s a PHP megjegyzsek szerept. A HTML megjegyzs a kliens gpn is megjelenik, fogyasztja a svszlessget, ltalban nem javasolt. Ezzel
3.2. PHP alapok
121. oldal
szemben a PHP megjegyzsek nem kerlnek el a klienshez, az ilyen megjegyzseket a PHP nem tovbbtja a kimenetre. Clja a forrskd ksbbi knnyebb megrtse. Egy plda a szerz korbbi honlapjrl:
<? /* Az elzetes megjelentsre, a hozzszlsok szmval */ ?> <div class="hir"> <? if ($lehethozza || $tartalom) { ?> <h2><a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>"> <?= $hirCim ?></a></h2> <? } else { ?> <h2><?= $hirCim ?></h2> <? }?>
3.2.3. Vltozk
A PHP nyelvben minden vltoz neve $ karakterrel kezddik. A vltozk alapveten szvegeket, szmokat s tmbket tartalmazhatnak. A kvetkez plda a $txt vltozt hasznlja a kirand szveg trolsra:
<html> <body> <?php $txt="Hello World"; echo $txt; ?> </body> </html>
Ha kt vagy tbb szveges kifejezst (sztringet) ssze akarunk fzni, akkor a . (pont) opertor hasznlhat:
<html> <body> <?php $txt1="Hello World"; $txt2="1234"; echo $txt1 . " " . $txt2; ?> </body> </html>
A programunk a kvetkez kimenetet lltja el:

Hello World 1234
Vltoznevek
A vltoznevek az ABC betibl, szmokbl s az alhzs karakterbl llhatnak, de nem kezddhetnek szmmal. A nevek szkzt nem tartalmazhatnak, gy az sszetett vltoznevek esetn az alhzs karaktert ($my_string) , vagy a kzbls sz nagy kezdbetjt ($myString) alkalmazzuk.
122. oldal
Vltozk tpusai
A PHP nyelv a kvetkez tpusok hasznlatt teszi lehetv: logikai (boolean), rtke true (igaz) vagy false (hamis) lehet egsz szmok (integer), pl. 5, -23 lebegpontos szmok (double), pl. 3.14, 2.0 sztringek (string), pl. "alma" tmbk (array), amik kulcsok s rtkek rendezett sorozata objektumok (object), amik egy osztly pldnyai erforrsok, pl. egy adatbzis vagy llomny azonostja NULL, ami egy rtk nlkli vltoz A PHP nyelv gyengn tpusos, gy nincs szksg a vltoz tpusnak elzetes megadsra. A tpus legtbbszr az rtkads pillanatban lltdik be, az rtkads sorn hasznlt rtk tpustl fggen.
gettype
A gettype fggvny segtsgvel lekrdezhetjk egy vltoz tpust. A kvetkez pldnkban ezt egyszeren kirjuk:
$a = 5; $b = 6.2; print gettype($a); print gettype($b);
A futs eredmnye:
integer double
Implicit tpuskonverzi
Bizonyos mveletek vgzse kzben automatikus tpuskonverzi trtnhet. Pl. a kvetkez kdban az sszeads elvgzse rdekben az egsz vltoz rtke 3.0 vals rtkk konvertldik, hogy az sszeads kt azonos tpus kztt tudjon megtrtnni. gy a vgeredmny 5.4 vals rtk lesz.
$a = 3; $b = 2.4; print $a + $b;
rdemes itt kln kihangslyozni, hogy az $a vltoz rtke vagy tpusa ettl nem vltozik meg, a konverzi az rtknek egy ideiglenes msolatn trtnik.
3.2. PHP alapok
123. oldal
Kln rdemes megemlteni egy specilis esetet. Ha sszeadsnl sztring operandust hasznlunk, akkor nem kapunk hibazenetet. Ehelyett szmm prblja konvertlni azokat, hogy az sszeadst el tudja vgezni rajtuk. gy a kvetkez kd kimenete integer tpus s 5 rtk lesz:
print '2 alma' + '3 krte';
Explicit tpuskonverzi
Ha egy kifejezs tpusa nem megfelel a szmunkra, direkt mdon is elrhatjuk a konverzit. A kvetkez pldban az sszeads eltt a $ vltoz rtke (egszen pontosan a msolata) egssz konvertldik, s az sszeads kt egsz szm kztt trtnik meg. gy az eredmny is 5 egsz szm lesz.
print $a + (integer)$b;
A kvetkez pldban explicit s implicit tpuskonverzi is trtnik. A plda kd 2 tizedesjegyre kerekti az $a vals szmot:
$a = 0.33333333; print (integer)($a*100) / 100.0;
Nzzk sorba a kirtkels lpseit: 1. $a*100: a 100 implicit vals szmm konvertldik 2. (integer) 33.333333: explicit egsz szmm konvertldik 3. 33 / 100.0: a 33 implicit vals szmm konvertldik A vgeredmny 0.33 vals rtk lesz. rdemes vgl megjegyezni, hogy az $a s $b vltozk itt sem vltoztak meg. A kvetkez megolds viszont a vltoz tpust is megvltoztatja.
settype
Idnknt szksg lehet arra, hogy egy vltoz tpust megvltoztassuk. Mivel ez sokszor automatikusan megtrtnik, ritkn van szksg a settype hasznlatra. De nzznk mgis egy pldt:
$a = 5.2; settype($a, 'integer');
Mivel a double tpus vltoz tpust egszre lltottuk, kerekts trtn, s a vltoz rtke 5 lesz.
Vltoz vltozk
rdemes mg egy rdekes pldn keresztl megnzni, hogy mit is jelent a vltozk kirtkelse.
124. oldal
$a = 'b'; $$a = 'alma';
A msodik sor ekvivalens ezzel:

$b = 'alma';
Ltezs vizsglata, s megszntetse

Idnknt szksg lehet arra, hogy megvizsgljuk: a vltoz ltezik-e. Erre hasznlhat az isset fggvny. Ms esetben megszntetni szeretnnk egy vltozt. Erre az unset fggvny alkalmazhat.
3.2.4. Sztringek hasznlata

A PHP nyelvben nagyon nagy jelentsge van a szvegek kezelsnek, hiszen a PHP kd futtatsnak vgclja egy szvegkimenet ellltsa.
Sztring ltrehozsa aposztrffal

A legknnyebben gy adhatunk meg egy egyszer sztringet, hogy aposztrfok (' karakterek) kz tesszk.
echo 'Arnold egyszer azt mondta: "I\'ll be back"'; echo 'You deleted C:\\*.*?';
Jl megfigyelhet, hogy ilyenkor az idzjeleknek nincs klns hatsa, az aposztrf lershoz viszont a \ specilis (n. escape) karakter hasznlata ktelez. A \ karakter az utna kvetkez karakterrel specilis jelentst hordoz, ezrt a C:\ kirsa rdekben is hasznlnunk kell. A kimenet:
Arnold egyszer azt mondta: "I'll be back" You deleted C:\*.*?
Sztring ltrehozsa idzjellel

Az idzjeles sztringek legfontosabb jellemzje az, hogy a vltozk behelyettestsre kerlnek. Ha dollr ($) jelet tall a PHP egy sztringben, megkeresi az sszes ezt kvet azonostban is hasznlhat karaktert, hogy egy rvnyes vltoznevet alkosson. Ezrt kapcsos zrjeleket kell hasznlnunk, ha pontosan meg szeretnnk hatrozni, meddig tart egy vltoz.
3.2. PHP alapok
125. oldal
$ingatlan = 'hz'; echo "kertes $ingatlan kertssel"; // mkdik, szkz nem lehet vltoznvben echo "pros $ingatlanszm"; // nem mkdik, az 's' s tovbbi karakterek lehetnek vltoznvben echo "pros ${ingatlan}szm"; // mkdik, mert pontosan meg van adva a nv echo "pros {$ingatlan}szm"; // mkdik, mert pontosan meg van adva a nv
Sztring ltrehozsa 'heredoc' szintaxissal

Egy msfajta mdszer a sztringek megadsra a heredoc szintaxis. A <<< jelzs utn egy azonostt kell megadni, majd a sztringet, s vgl az azonostt mg egyszer, ezzel zrva le a sztringet. A lezr azonostnak mindenkppen a sor legels karaktern kell kezddnie. Ugyancsak figyelni kell arra, hogy ez az azonost is az ltalnos PHP elemek elnevezsi korltai al tartozik.
$str = <<<VAS Plda egy stringre, amely tbb sorban van, s heredoc szintaxis VAS;
Pldnkban a Vge A Stringnek kezdbetit, csupa nagy betvel alkalmaztuk.
Sztring karaktereinek elrse s mdostsa

A string karaktereire nulltl szmozott indexekkel lehet hivatkozni, a string neve utn megadott kapcsos zrjelek kztt.
$str = 'Ez egy teszt.'; $first = $str{0}; $third = $str{2};
Ezzel a mdszerrel nem csak kiolvasni, hanem mdostani is tudjuk a sztring karaktereit:
$str{0} = 'A';
Ennek hatsra az $str szting 0. karaktert rjuk fell. Vgl rdemes itt ismt megemlteni, hogy UTF-8 karakterkdols hasznlata esetn az indexels nem fog megfelelen mkdni. Helyette a Multibyte String fggvnyeket66 vagy az iconv fggvnyeket67 hasznlhatjuk.
66 http://www.php.net/manual/en/ref.mbstring.php 67 http://www.php.net/manual/en/ref.iconv.php
126. oldal
3.2.5. Opertorok s kifejezsek

Az opertorok mveleteket vgeznek az operandusaikkal. Pl. a 4 + 5 kifejezsben a + az opertor, a 4 s 5 pedig az operandus, az eredmny pedig 9. Operandus lehet egy vltoz is. A mvelet eredmnye maga is lehet jabb operandus valamelyik msik opertor mveletben. Pl 2 * 3 + 4 esetn a szorzs eredmnye (6) az sszeads bal operandusa lesz. A fenti pldink mind kifejezsek is egyben, de kifejezs nmagban egy konstans (mg pontosabban literl) is. A kifejezsekkel sok helyen tallkozhatunk a programozsban, egyelre az rtkad opertorok jobb oldaln fogunk legtbbszr. Pl. a kvetkez pldnkban $b + $c egy kifejezs, ennek kiszmtsa utn pedig az eredmny (vagyis a kifejezs rtke) az $a vltozban kerl trolsra.
$a = $b + $c;
Kvetkezzen egy gyors sszefoglal az opertorokrl.
rtkad opertorok
Az rtkad opertorok a bal oldali operandus rtkt vltoztatjk meg. Az els ( =) opertor j rtke nem fgg a korbbi rtktl, mg a tbbi opertor a korbbi rtkhez kpest szmolja ki az j rtket. Opertor
= += -= *= /= %= .=
Plda
$x=$y; $x+=$y; $x-=$y; $x*=$y; $x/=$y; $x%=$y; $x.=$y;
Jelents
$x=$y; $x=$x+$y; $x=$x-$y; $x=$x*$y; $x=$x/$y; $x=$x%$y; $x=$x.$y;
5. tblzat. rtkad opertorok

Ha a kt operandus tpusa nem egyezik meg, a jobb oldal megfelel konvertlt msolata fog rtkl addni.
Aritmetikai opertorok
Az aritmetikai opertorok a matematikbl ismert feladatukat ltjk el. Tbbnyire egsz vagy vals tpus operandusokkal szoktuk ket hasznlni.
3.2. PHP alapok

Opertor
+ * / %
127. oldal
Mvelet Plda
$x=2; $x+2 $x=2; 5-$x $x=4; $x*5 15/5 5/2
Eredmn y
4 3 20 3.0 2.5 1 2 0 $x=6
sszeads kivons szorzs oszts
maradkos oszts 5%2 10%8 maradka 10%2 nvels cskkents

$x=5; $x++ ++$x $x=5; $x---$x
++
--
$x=4
6. tblzat. Aritmetikai opertorok

Bizonyos esetekben automatikus tpuskonverzi trtnhet. Ez tbbnyire akkor fordul el, ha a kt operandus nem azonos tpus. Ekkor olyan automatikus (implicit) konverzi trtnik, amely nem jr adatvesztssel. Pl. az $x=4; $x*5 esetben nincs, de az $x=4; $x*5.2 esetben mr van szksg konverzira. Ilyenkor az eredmny se egsz, hanem vals tpus lesz. Az oszts esetn akkor lesz vals az eredmny, ha mindkt operandus egsz. Vagyis a C nyelvtl eltren nem maradkos oszts trtnik. A nvels s cskkents opertor csak egsz tpus vltoz operandussal hasznlhat. Az opertor mind a vltoz eltt, mind utna rhat. A kt rsmd eredmnye kztt akkor van klnbsg, amikor az opertort egy sszetett kifejezs rszeknt szerepel.
$a = 2; $b = 3; $c = $a++ + $b++;
Ekkor $a s $b rtke is n, de mindkett csak az sszeads elvgzse utn. gy $c rtke 5 lesz. Ha mdostjuk a $c = $a++ + ++$b; alakra, akkor $b nvelse mg az sszeads elvgzse eltt megtrtnik, gy $c rtke 6 lesz. Vgeredmnyben teht az opertor helye a nvels/cskkents idbelisgt befolysolja.
128. oldal
sszehasonlt opertorok
Gyakran van szksgnk arra, hogy kt kifejezs viszonyt (relcijt) meg tudjuk hatrozni. Az sszehasonlt mveleteket eredmnye mindig logikai rtk (true vagy false). Leggyakrabban feltteles elgazsoknl, ciklusok feltteleknt tallkozhatunk velk. Opertor
== != > < >= <= ===
Mvelet egyenl nem egyenl nagyobb kisebb nagyobb-egyenl kisebb-egyenl tpus s rtk egyenl
Plda
5==8 5!=8 5>8 5<8 5>=8 5<=8 '5'===5
Eredmny
false true false true false true false
7. tblzat. sszehasonlt opertorok

A nagyobb, kisebb, nagyobb-egyenl s kisebb-egyenl mveletek szmok vagy sztringek esetn rtelmezhetek.
Sztringek esetn az eredmny karakterkszlet-fgg.
Az egyenl s nem egyenl opertorok brmilyen, akr klnbz tpus operandusokon is elvgezhetek. Ilyenkor implicit tpuskonverzi trtnik, ami nha meglep eredmnyt produkl. Ha az ilyen meglepetseket el szeretnnk kerlni, jl jhet a tpus s rtk egyenl opertor. Ez csak akkor ad igaz eredmnyt, ha eleve megegyez tpusokkal hasznljuk, s az rtk is megegyezik.
Logikai opertorok
A logikai opertorok bonyolultabb felttelek felptse sorn elengedhetetlenek lesznek. ltalban az operandusok eleve logikai tpusak. Ha mgsem, akkor konverzi fog trtnni. Logikai false rtkk konvertldik pl. 0, 0.0 szmok res sztring ('') res tmb res objektum Nzzk meg a logikai opertorokat:
3.2. PHP alapok

Opertor
&& and
129. oldal
Plda
$x=6 $y=3 ($x < 10 && $y > 1) ($x < 10 and $y > 1) $x=6 $y=3 ($x==5 || $y==5) ($x==5 or $y==5) $x=6 $y=3 !($x==$y)
Mvelet s
Eredmny
true true
|| or
vagy
false false
nem
true
8. tblzat. Logikai opertorok
Az opertorok precedencija
Az opertorok vgrehajtsi sorrendjt az eddig megismerteken kvl az erssgk s a vgrehajts irnya hatrozza meg. Nzzk meg a sorrendet a legersebbtl a leggyengbb irnyba: 1. ++, --, (tpuskonverzi) 2. /, *, % 3. +, 4. <, <=, >, >= 5. ==, !=, === 6. && 7. || 8. =, +=, -=, /=, *=, %=, .= 9. and 10. or Ha teht egy kifejezsben klnbz szint opertorokat alkalmazunk, akkor a fenti sorrendben fogja ket a PHP kirtkelni. Az azonos csoportba tartoz opertorok egyforma erssgnek tekinthetk, kzttk nem tesznk klnbsget. Ilyenkor ltalban balrl jobbra haladva haladunk a mveletvgzsben. A zrjelek segtsgvel a fenti sorrend manipullhat.
130. oldal
Rvidzr kirtkels
Bizonyos esetekben a logikai opertor msodik operandusa nem rtkeldik ki. Pldul a kvetkez esetben:
($a < 3) && ($b == 5)
Az && opertor csak akkor ad vissza true-t, ha mindkt operandus true. Teht, ha $a < 3 false, akkor && bal oldala false, s a kifejezs eredmnye ( false) a jobb oldali operandus kirtkelse nlkl szletik meg. Ilyen esetekben a PHP nem rtkeli ki a jobb oldali operandust. Ehhez hasonlan, ha a || opertor bal oldali operandusa true, felesleges a jobboldalt kirtkelni, gy az nem is fog megtrtnni.
3.2.6. Tmbk
A tmb egy vagy tbb rtket trolhat egyetlen vltoznvvel. Ha PHP-vel dolgozunk, akkor elbb vagy utbb valsznleg szeretnnk tbb hasonl vltozt ltrehozni. Tbb vltoz hasznlata helyett az adatokat egy tmb elemeiknt is trolhatjuk. A tmb minden elemnek egyedi azonostja (indexe, kulcsa) van, gy knnyen hozzfrhet. A tmbknek hrom klnbz tpusa van: Sorszmozott tmb Olyan tmb, amelynek egyedi numerikus (vagyis szm) azonostkulcsai vannak Asszociatv tmb Olyan tmb, amelynek egyedi szveg (vagyis sztring) azonostkulcsai vannak Tbbdimenzis tmb Olyan tmb, amely egy vagy tbb tmbt (is) tartalmaz
Hamarosan pontostani fogjuk: igazbl egyfle tmb van, de hromfle tipikus felhasznlsi eset szokott elfordulni.
Sorszmozott tmbk
A sorszmozott tmb minden elemhez egy numerikus azonostkulcsot trol. A sorszmozott tmb ltrehozsnak tbb mdja van. Nzznk kt pldt, amelyek ugyanazt a tmbt hozzk ltre. Az els pldban az azonostkulcsok (indexek) automatikusan kerlnek hozzrendelsre az elemekhez:
$names = array("Peter","Quagmire","Joe");
A msodik pldban azonostkulcsot manulisan rendelnk hozz:
3.2. PHP alapok

$names[0] = "Peter"; $names[1] = "Quagmire"; $names[2] = "Joe";
131. oldal
Az azonostkulcsokat felhasznlhatjuk szkriptekben:

echo $names[1] . " and " . $names[2] . " are ". $names[0] . "'s neighbors";
Az elz kdrszlet kimenete:

Quagmire and Joe are Peter's neighbors
Tmbk feltltsekor az index megadsa sem ktelez. Ha elhagyjuk, akkor a legnagyobb hasznlt index utn folytatja a szmozst. Az elz pldt folytatva a 3-as index al kerl Jack:
$names[] = "Jack";
Ahogy az eddigiek alapjn sejthet, az index-szmok nem csak folytonosak lehetnek.
Asszociatv tmbk
Az asszociatv tmb minden azonostkulcshoz egy rtket rendelnk hozz. Ha egyedi rtkeket szeretnnk trolni, nem felttlenl a sorszmozott tmb a legjobb megolds erre. Az asszociatv tmb rtkeit kulcsknt hasznlhatjuk, s rtkeket rendelhetnk a kulcsokhoz.
Az asszociatv tmbkre elszr az rlapbl kapott adatok feldolgozsakor merlt fel igny (3.5. fejezet).
Ebben a pldban tmbt hasznlunk, hogy klnbz szemlyekhez az letkorukat rendeljnk:

$ages = array("Peter"=>32, "Quagmire"=>30, "Joe"=>34);
Ez a plda az elzvel azonos rtk, de a tmb ltrehozsnak ms mdjt mutatja:

$ages['Peter'] = "32"; $ages['Quagmire'] = "30"; $ages['Joe'] = "34";
Az azonostkulcsot gy hasznlhatjuk szkriptben:

echo "Peter is " . $ages['Peter'] . " years old.";
Az elz kd kimenete:
Peter is 32 years old.
Bizonyos rtelemben pontosabb lenne gy fogalmazni, hogy a PHP csak az asszociatv tmbket ismeri, s a kulcs lehet szm is.
132. oldal
Tbbdimenzis tmbk
Egy tbbdimenzis tmbben a f tmb minden eleme lehet maga is egy tmb. Az altmb minden eleme lehet (de nem ktelezen) tmb, s gy tovbb. Ebben a pldban olyan tbbdimenzis tmbt hozunk ltre, melynek azonostkulcsai automatikus hozzrendelssel rendelkeznek:
$families = array ( "Griffin"=>array ( "Peter", "Lois", "Megan" ), "Quagmire"=>array ( "Glenn" ), "Brown"=>array ( "Cleveland", "Loretta", "Junior" ) );
A fenti tmb gy nz ki a kimenetre rva (print_r($families)):

Array ( [Griffin] => Array ( [0] => Peter [1] => Lois ), [Quagmire] => Array ( [0] => Glenn ), [Brown] => Array ( [0] => Cleveland [1] => Loretta [2] => Junior ) )
A pldbl jl ltszik, hogy az egyes altmbk elemszmnak se kell egyenlnek lenni. A 3.6.2. fejezetben rszletesebben bemutatsra kerl plda oldal alapja, hogy a kvetkez tmb alapjn generldik a fels men:
3.2. PHP alapok

$oldalak = array( '/' => array('fjl' => 'kezdo', 'szoveg' => 'Kezdlap'), 'magamrol' => array('fjl' => 'magamrol', 'szoveg' => 'Magamrl'), 'szakmai_oneletrajz' => array('fjl' => 'szakmai_oneletrajz', 'szoveg' => 'Szakmai nletrajz'), 'galeriak' => array('fjl' => 'galeriak', 'szoveg' => 'Galrik'), 'kapcsolat' => array('fjl' => 'kapcsolat', 'szoveg' => 'Kapcsolat'), );
133. oldal
A kls tmb kulcsai az URL rszletei, a bels tmbk kulcsai pedig a szveges oldalt tartalmaz llomny nevt, s a menpontok cmt tartalmazzk.
3.2.7. Szuper-globlis vltozk

A 3.3.3. fejezetben ltni fogjuk, hogy egy kdblokkban ltalban a helyben ltrehozott vltozkat szoktuk hasznlni. De a kivtel itt is ersti a szablyt: egyes vltozk globlisak ugyan, de nem kell felttlenl a global kulcsszt hasznlnunk, hogy brhol hasznlni tudjuk ket. Ezeket a mindenhonnan egyformn ltez vltozkat csupa nagybetvel elnevezve, kszen kapjuk a PHP rtelmeztl. Ksbb a tbbsgkkel meg is fogunk ismerkedni:
$GLOBALS, $_SERVER, $_GET, $_POST, $_FILES, $_COOKIE, $_SESSION, $_REQUEST, $_ENV.
3.3. Vezrlsi szerkezetek

Egy komolyabb programozsi feladat nem oldhat meg oly mdon, hogy elre lerjuk egyenknt az egyms utn vgrehajtand sszes lpst. E fejezet bemutatja, hogy hogyan tudjuk a kdot tmrteni a ciklusok segtsgvel s hogyan tudunk szitucitl fggen msknt reaglni az elgazsok segtsgvel. Vgl megnzzk, hogyan tudunk jrahasznosthat kdrszeket ltrehozni fggvnyek segtsgvel.
3.3.1. Elgazsok
Az if, elseif s else kulcsszavak hasznlatosak a PHP-ben felttelhez kttt utastsok vgrehajtsra. Sok esetben merl fel egy-egy programozsi feladat kapcsn annak szksgessge, hogy klnfle lehetsgekhez ms-ms viselkedst rendeljnk. Ennek megoldsra hasznlhatjuk a feltteles kifejezseket.
134. oldal
if-else elseif
- Akkor hasznljuk, ha a felttel igaz volta esetn egy adott kdot, hamis volta esetn egy msik kdot szeretnnk futtatni. - Az if-else kifejezssel egytt hasznljuk, ha azt szeretnnk, hogy egy adott kdrszlet akkor fusson, ha tbb felttel kzl csak egy teljesl.
Az if-else szerkezet
Egy felttel teljeslse esetn futtat egy kdrszletet, amennyiben a felttel nem teljesl, akkor egy msikat. Szintaxis:
if (felttel) vgrehajtand kd, ha a felttel teljesl; else vgrehajtand kd, ha a felttel nem teljesl;
A kvetkez plda kimenete a Have a nice weekend! szveg lesz, ha pp pntek van, egybknt pedig a Have a nice day!:
$d=date("D"); if ($d=="Fri") echo "Have a nice weekend!"; else echo "Have a nice day!";
Ha egy utastsnl tbbet szeretnnk futtatni a felttel teljeslse/nem teljeslse esetn, az utastsokat kapcsos zrjelek kz kell rnunk:
$d=date("D"); if ($d=="Fri") { echo "Hello!<br>"; echo "Have a nice weekend!"; echo "See you on Monday!"; } ?>
Az elseif szerkezet
Ha tbb felttelbl egy teljeslse esetn szeretnnk ms-ms kdot futtatni, az elseif szerkezetet hasznljuk. Szintaxis:
if (felttel1) vgrehajtand kd, ha a felttel1 teljesl; elseif (feltte2l) vgrehajtand kd, ha a felttel2 teljesl; else vgrehajtand kd, ha egyik felttel sem teljesl;
A kzps elseif szakasz akr tbbszr is szerepelhet. Az albbi plda kimenete Have a nice weekend! ha ma pntek van, Have a nice Sunday! ha ma vasrnap van, egybknt pedig Have a nice day!

$d=date("D"); if ($d=="Fri") echo "Have a nice weekend!"; elseif ($d=="Sun") echo "Have a nice Sunday!"; else echo "Have a nice day!";
135. oldal
Feltteles opertor
Nha elfordul, hogy az if-else szerkezet helyett egyetlen opertort, a feltteles opertort hasznljuk. Ez csak akkor lehet alternatvja az if-else hasznlatnak, ha mindkt gon valamilyen rtket akarunk ellltani, s azt a tovbbiakban felhasznlni. Nzznk egy egyszer pldt. A kvetkez kd a $bar logikai vltoz rtkt szvegesen lltja el tesztelsi clokbl.
$bar = true; $str = "TEST ". ($bar ? 'true' : 'false') ." TEST";
A switch szerkezet
A switch utastst a PHP-ben akkor hasznljuk, hogyha ms-ms kdot szeretnnk vgrehajtani egy vltoz vagy kifejezs lehetsges rtkei alapjn. A switch hasznlatval bizonyos esetekben elkerlhetek a hossz if-elseif-else blokkok. A switch utasts ltalnos formja:
switch (kifejezs) { case cimke1: a vgrehajtand kd, ha a kifejezs = cimke1 break; case cimke2: a vgrehajtand kd, ha a kifejezs = cimke2 break; default: a vgrehajtand kd ha a kifejezs klnbzik cimke1 s cimke2-tl; }
Mkdse: egy egyszer kifejezs (leggyakrabban egy vltoz) egyszer kirtkeldik a kifejezs rtke sszehasonltsra kerl mindegyik case kifejezssel a blokkon bell ha egyezst tall, akkor az adott case-ben tallhat kd vgrehajtdik miutn ez megtrtnt, a break utasts lelltja az utastsok vgrehajtst a default utasts arra hasznlhat, hogy le tudjuk kezelni azokat a kifejezseket, rtkeket is, amelyek egy case utastsban sem voltak kezelve
136. oldal
Egy plda:
switch ($x) { case 1: echo "Number 1"; break; case 2: echo "Number 2"; break; case 3: echo "Number 3"; break; default: echo "No number between 1 and 3"; }
Figyelni kell arra, hogy minden egyes case gat zrjunk le egy break-kel, klnben a kvetkez case g is lefut. Ms nyelvektl eltren a case rtkei nem kell, hogy konstansok legyenek. Tetszleges kifejezs alkalmazhat.
Alternatv szintaxis
A PHP a kapcsos zrjelek helyett egy alternatv szintaxist is biztost. Elssorban akkor szoks hasznlni, ha keverni akarjuk a PHP s HTML kdot. A kvetkez plda kzps sora csak akkor fog a kimenetre kerlni, ha a felttel igaz.
<?php if ($a == 5): ?> A is equal to 5 <?php endif; ?>
Persze hasznlhatjuk tisztn PHP kdban is:

<?php if ($a echo echo elseif echo echo else: echo endif; ?> == 5): "a equals 5"; "..."; ($a == 6): "a equals 6"; "!!!"; "a is neither 5 nor 6";
Egy msik plda a switch hasznlatra:

<div> <?php switch($variable): case 1: ?> <div>Newspage</div> <?php break;?> <?php case 2: ?> <div>Forum</div> <?php break;?> <?php endswitch;?> </div>
137. oldal
3.3.2. Ciklusok
Mikor programozunk, nagyon gyakran fordul el, hogy egy adott programrszt (a ciklusmagot) tbbszr szeretnnk lefuttatni. Ezt elrhetjk ciklusok hasznlatval. PHP-ben a kvetkez ciklusok hasznlhatk: while amg a felttel igaz, lefuttatja a programrszt do-while elszr lefuttatja az adott programrszt, s addig ismtli, amg a felttel igaz for az adott programrszt meghatrozott szmban futtatja le foreach az adott programrszt a tmb minden elemre lefuttatja Az ismtelten lefuttatott programrszt ciklusmagnak nevezzk.
A while ciklus
A while utasts lefuttatja a ciklusmagot, amg az adott felttel igaz. Szintaxis:
while (felttel) ciklusmag
Az albbi plda egy olyan ciklust mutat be, amely addig fut, amg az $i vltoz kisebb vagy egyenl, mint 5. Az $i rtke a ciklusmag minden lefutsa vgn 1-el nvekszik:
$i=1; while($i<=5) { echo "The number is " . $i . "<br>"; $i++; }
A do-while ciklus
A do-while utasts legalbb egyszer lefuttatja az adott ciklusmagot, majd annyiszor ismtli azt, amg a felttel igaz. Szintaxis:
138. oldal
do { ciklusmag; } while (felttel);
Az albbi pldaprogram legalbb egyszer nveli az $i vltoz rtkt, majd addig nveli $i-t, amg annak rtke kisebb, mint 5.
$i=0; do { $i++; echo "The number is " . $i . "<br>"; } while ($i<5);
A for ciklus
A for utastst akkor hasznljuk, amikor elre tudjuk, hnyszor kell futtatni egy adott utastst vagy utasts listt. Szintaxis:
for (inicializls; felttel; nvels) { ciklusmag; }
A for utastsnak hrom eleme van. Az els ad rtket a vltozknak, a msodik tartalmazza a felttelt s a harmadikban van az inkrementl (nvel) utasts, ami a ciklust vezrli. Ha tbb mint egy vltoz is szerepel az rtkadsban vagy az inkrementl rszben, vesszvel vlasszuk el ket. A felttel igaznak vagy hamisnak bizonyul a futs sorn. Az albbi plda tszr rja a kpernyre a Hello World! szveget:
for ($i=1; $i<=5; $i++) { echo "Hello World!<br>"; }
rdemes tgondolni, hogy a fenti plda knnyedn trhat while cikluss is:
$i=1; while ( $i<=5) { echo "Hello World!<br>"; $i++; }
rdemes mg megemlteni, hogy a for ciklus nem csak ebben a specilis, ciklusvltozhoz ktd esetben hasznlhat. Brmilyen while ciklus is trhat for cikluss.
A foreach ciklus
A foreach utastst tmbelemekre alkalmazzuk. A $value minden ciklusban az adott tmbelem rtkt kapja meg, s a tmb mutat egygyel tovbblp gy a kvetkez ciklusban mr a kvetkez tmbelemre mutat. Szintaxis:
foreach ($array as $value) { ciklusmag }
139. oldal
A $value rtke alaprtelmezetten egy msolata a tmb elemnek. gy annak mdostsa nem fogja a tmb adott elemt megvltoztatni. A kvetkez plda azt a ciklust mutatja be, amely a kpernyre rja az adott tmb rtkeit.
$arr=array("one", "two", "three"); foreach ($arr as $value) echo "Value: " . $value . "<br>";
Bizonyos esetekben szksgnk lehet nemcsak a tmb elemeire, hanem a kulcsokra is. Ekkor a kvetkez szintaxis alkalmazhat:
foreach (tmb as kulcs => tmbelem) { ciklusmag }
Ebben az esetben a kulcs hasznlatval az eredeti tmbelem is elrhet, akr mdosthat is. A korbban bemutatott $oldalak nev ktdimenzis tmb (3.2.6. fejezet) alapjn a kvetkez kd generlja a ment. Az if utasts az aktv menpont esetn plusz class tulajdonsgot is generl.
<div id="topnav"> <ul> <? foreach ($oldalak as $url => $oldal) { ?> <li<?= (($oldal == $keres) ? ' class="aktiv"' : '') ?>> <a href="<?= ($url == '/') ? '.' : ('?oldal=' . $oldal['fjl']) ?>"><?= $oldal['szoveg'] ?></a> </li> <? } ?> </ul> </div>
A tmbk mlyebb kezelse

E knyv lehetsgein tlmutat, de mindenkppen rintennk kell a tmbk mlyebb szszefggseit, bels mkdst. Most egyetlen pldn keresztl pillantsunk bele abba, hogy a tmbk bejrsa igazbl sokkal tbb lehetsget rejteget, mint az eddigi pldink. Az albbi kt ciklus teljesen ekvivalens:
$arr = array("one", "two", "three"); reset($arr); while (list($key, $value) = each($arr)) { echo "Key: $key; Value: $value<br>\n"; } foreach ($arr as $key => $value) { echo "Key: $key; Value: $value<br>\n"; }
A reset fggvny a tmbmutatt az elejre lltja, az each a kvetkezre lpteti. A list fggvny tbbszrs rtkadst tesz lehetv egy tmb alapjn.
140. oldal
A pldban nem szerepel, de rdekes lehetsgeket tartogat a key, current, next s prev fggvny is.
Referencia hasznlata
Ha a tmb aktulis elemt szeretnnk mdostani, akkor referencival is bejrhatjuk a tmbt:
$arr = array(1, 2, 3, 4); foreach ($arr as &$value) { $value = $value * 2; }
A futs utn a tmb elemei a dupljukra nttek.

A referencia nlkl csak a tmbelem egy ideiglenes msolatn trtnne meg a mdosts.
Kilps a ciklusbl
A break utastssal ki lehet lpni egy ciklusbl, a hagyomnyostl eltr mdon is. A ciklusmag tetszleges pontjn, ha rfut a vezrls a break utastsra, akkor egy vagy tbb ciklusbl is kilphetnk.
foreach($products as $product) { foreach($product['Data'] as $data) { ... break 2; ... } }
A 2-es szm azt jelzi, hogy mindkt ciklusbl ki kell lpnie.
A ciklusmag vgrehajtsnak megszaktsa

A ciklus teljes megszaktsa helyett idnknt csak az aktulis ciklusmag futtatst akarjuk megszaktani. A continue utasts tugorja a ciklusmag htralev rszt. A kvetkez kd az $i 2-es rtke esetn nem fut r a print fggvnyre:
for ($i = 0; $i < 5; ++$i) { if ($i == 2) continue print "$i\n"; }
Termszetesen itt is van lehetsg tbbszrs ciklus esetn tbbszrs ciklusmagbl kiugrani:

$i = 0; while ($i++ < 5) { echo "Outer<br>\n"; while (1) { echo " Middle<br>\n"; while (1) { echo " Inner<br>\n"; continue 3; } echo "This never gets output.<br>\n"; } echo "Neither does this.<br>\n"; }
141. oldal
3.3.3. Fggvnyek hasznlata

A PHP-ben kzel ezer beptett fggvny rhet el. Ebben a fejezetben megmutatjuk, hogyan ksztsnk sajt fggvnyeket.
Fggvnyek ltrehozsa
Egy fggvny tulajdonkppen egy kd blokk, amit akkor futtathatunk, amikor szksgnk van r. Minden fggvny ltrehozsa a function kulcsszval kezddik. A fggvny nevt lehetleg gy vlasszuk meg, hogy utaljon r, milyen feladatot vgez el. Egy egyszer fggvny, amely a szerz nevt rja ki, ha meghvjuk:
function nevKiiras() { echo "A nevem Nagy Gusztv."; }
Fggvnyek hasznlata
A fggvnyt a PHP kd tetszleges ksbbi pontjn meghvhatjuk:
function nevKiiras() { echo "A nevem Nagy Gusztv."; } nevKiiras();
Fggvnyek paramterezse
Els fggvnynk (nevKiiras) egy igen egyszer fggvny. Pusztn egy egyszer szveget r ki. Ha szeretnnk tbb funkcival elltni egy fggvnyt, paramtereket adhatunk hozz. A paramter olyan mint egy vltoz. A paramtereket a zrjelen bell adhatjuk meg.
142. oldal
A kvetkez plda klnbz keresztneveket r ki azonos vezetknevek utn.

function nevKiiras($nev) { echo "A nevem Nagy $nev.<br>"; } nevKiiras("Gusztv"); nevKiiras("Dniel"); nevKiiras("bel");
A kd kimenete a kvetkez:
A nevem Nagy Gusztv.<br> A nevem Nagy Dniel.<br> A nevem Nagy bel.<br>
A kvetkez fggvnynek kt paramtere van:

function nevEsFoglalozasKiiras($nev,$foglalozas) { echo "A nevem Nagy $nev, $foglalozas vagyok.<br>"; } nevEsFoglalozasKiiras("Gusztv", "tanszki mrnk"); nevEsFoglalozasKiiras("Dniel", "tanul"); nevEsFoglalozasKiiras("bel", "tanul");
A kd kimenetet a kvetkez lesz:

A nevem Nagy Gusztv, tanszki mrnk vagyok.<br> A nevem Nagy Dniel, tanul vagyok.<br> A nevem Nagy bel, tanul vagyok.<br>
Paramtertads alaprtelmezett rtkkel

A fggvnyek paramterei kzl egyet vagy tbbet elhagyhatunk, ha a kvetkez mdon hasznljuk:
function nevEsFoglalozasKiiras($nev,$foglalozas = "tanul") { echo "A nevem Nagy $nev, $foglalozas vagyok.<br>"; } nevEsFoglalozasKiiras("Gusztv", "tanszki mrnk"); // 1 nevEsFoglalozasKiiras("Dniel"); // 2 nevEsFoglalozasKiiras("bel"); // 3
Ha a hvskor megadjuk a 2. ($foglalozas) paramtert (1), akkor az lesz az rtke. Ha nem adjuk meg (2 s 3) , akkor pedig az alaprtelmezett "tanul" rtket veszi fel. A kd kimenete a korbbival megegyezik.
Paramtertads referencival
Ha meghvunk egy fggvnyt, akkor a paramterknt tadott rtk msolatt hasznlhatjuk. Nzznk egy szm faktorilist kiszmol s kir fggvnyt:

function faktorKiir($n) { $fakt = 1; while ($n > 1) $fakt *= $n--; echo $fakt; } faktorKiir(5);
143. oldal
Ha meghvskor 5-t adunk t neki, akkor a fggvnyen bell $ n elszr 5 lesz, majd a ciklusmagban folyamatosan cskken, amg el nem ri az 1-es rtket. Ekzben pedig $fakt rtke 1*5*4*3*2, azaz 120 lesz. Ha a faktorilisok sorozatt szeretnnk kirni, akr egy ciklusban is hvogathatjuk a fggvnynket:
for ($i = 1; $i<5; $i++) { echo $i . " faktorialisa: " . faktorKiir($i) . "<br>"; }
Termszetesen ez nem tl hatkony a megolds szempontjbl, de jl mkdik, s jl illusztrlja a paramtertads mechanizmust: A $i vltoznak mindig csak egy msolata lesz elrhet a fggvnyen bell, s ott az $n mdostsa nem lesz hatssal az $i rtkre. Nha azonban elnys lenne, ha mgse egy msolatot, hanem az eredeti vltozt rnnk el. Pldaknt nzznk egy (nem szokvnyos) abszolt rtk fggvnyt. A paramterknt kapott vltozt talaktja az abszolt rtkre:
function abszolut(&$szam) { if ($szam < 0) $szam = -$szam; } $a = 23; abszolut($a); $b = -12; abszolut($b); abszolut(-8); // hibs!
Ekkor $a rtke nem fog vltozni, de $b rtke igen. Vgl rdemes megjegyezni, hogy az utols sor fordtsi hibt fog okozni.
Fggvnyek visszatrsi rtke

A fggvnyek hasznlhatnak visszatrsi rtkeket is.
function osszead($x,$y) { $osszeg = $x + $y; return $osszeg; } echo "1 + 16 = " . osszead(1,16)
A fenti kd kimenete ez lesz:

1 + 16 = 17
144. oldal
A korbbi faktorilis szmt fggvnynk helyett rdemes a kvetkez verzit hasznlnunk, mert nem mindig egybl a kimenetre sznjuk a szmts eredmnyt. Segtsgvel pl. kiszmthatjuk az ismtls nlkli kombincik szmt. A kvetkez kd kiszmtja, hogy 5 klnbz krtyalapbl hny flekppen tudunk 3-at kivlasztani, ha a kivlaszts sorrendje nem vltozik:
function faktor($n) { $fakt = 1; while ($n > 1) $fakt *= $n--; return $fakt; } echo faktor(5) / (faktor(3) * faktor(5 - 3));
rvnyessgi kr
Egy fggvnyen bell ltrehozott vltoz loklis a fggvnyre nzve. A vltoz teht a fggvnybl kilpve nem ltszik. De meglep mdon a fordtottja is igaz: egy fggvnyben nem ltszanak a fggvnyen kvl ltrehozott (globlis, vagy ms fggvnybeli loklis) vltozk sem. A globlis vltozkat mgis elrhetv tudunk tenni a global kulcssz hasznlatval.
$a = 1; $b = 2; function Sum() { global $a, $b; $b = $a + $b; }
A global sor nlkl a loklisan ltrejv $a s $b vltozval trtnne meg az rtkads, majd a fggvnybl kilpve ezek rtke el is veszne. Egy msik megolds a $GLOBALS vltoz hasznlata. Ez ugyanis a globlisan ltrehozott sszes vltozt tartalmazza, s brhonnan elrhet, a kvetkez pldnak megfelelen. A kdnak ugyanaz a hatsa, mint az elznek.
$a = 1; $b = 2; function Sum() { $GLOBALS['b'] = $GLOBALS['a'] + $GLOBALS['b']; }
A globlis elrsek rontjk a program ttekinthetsgt, ezrt nem rdemes a paramtertadst ezzel helyettesteni.
Statikus vltozk
A fggvnyen bell ltrejv loklis vltoz norml esetben nem rzi meg az rtkt. A static kulcssz hasznlatval azonban pont ezt tudjuk elrni.

function hivasSzamol( ) { static $db = 0; $db++; echo "Ezt a fggvnyt $db alkalommal hvtuk meg.<br>"; } hivasSzamol(); hivasSzamol(); hivasSzamol();
145. oldal
A fggvny kimenete:
Ezt a fggvnyt 1 alkalommal hvtuk meg.<br> Ezt a fggvnyt 2 alkalommal hvtuk meg.<br> Ezt a fggvnyt 3 alkalommal hvtuk meg.<br>
3.4. Adatbzis-kapcsolat
A PHP fejlesztk leggyakrabban MySQL adatbzis-szervert alkalmaznak. Ezrt ebben a fejezetben a MySQL hasznlatnak alapjait fogjuk ttekinteni. A tma megismershez mindenkppen szksgesek az adatbzis-kezelsi alapismeretek68.
3.4.1. MySQL alapok

A MySQL ma a legnpszerbb, br nem az egyetlen nylt forrs adatbzis szerver alkalmazs. A szintaxis ugyan eltr, de a logikai httr hasonl ms rendszerek esetn is. A fejezet vgn nhny ms megoldst is bemutatunk.
Kapcsolds egy MySQL adatbzishoz

Mieltt hozzfrnnk s dolgoznnk az adatbzis adataival, egy kapcsolatot kell ltrehozni az adatbzishoz. PHP-ben ezt a mysql_connect() fggvnnyel lehet megvalstani. Szintaxis:
mysql_connect(servername, username, password);
servername: Opcionlis. Meghatrozza azt a szervert, amihez kapcsoldni akarunk. Az alapbellts a kvetkez: localhost:3306 username: Opcionlis. Meghatrozza a MySQL felhasznli nevet, amivel bejelentkeznk. password: Opcionlis. Meghatrozza a MySQL felhasznl jelszavt. Az alapbellts: "" (res sztring).
68 A szerz a tmban nagyra becslt tanra, Dr. Katona Endre Adatbzisok c. eladsjegyzett ajnlja az olvask figyelmbe. Letlthet: http://www.inf.u-szeged.hu/~katona/adatb.htm
146. oldal
Tbb paramter is megadhat, de a fentiek a legfontosabbak.
A kvetkez pldban elmentjk a kapcsolatot egy vltozba ( $con) ksbbi hasznlatra. A die rsz akkor fog vgrehajtdni, ha a kapcsolds nem sikerl:
$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } // ...
A kapcsolat bontsa
A kapcsolat bontsra kerl, ahogy a szkript futsa vget r. Ha ezeltt szeretnnk bontani a kapcsolatot, akkor a mysql_close fggvnyt hasznlva tehetjk meg.
mysql_close($con);
3.4.2. Adatbzisok s tblk ltrehozsa

Egy adatbzis egy vagy tbb tblt tartalmazhat. A CREATE DATABASE parancsot hasznlhatjuk adatbzis ltrehozsra a MySQL-ben. Szintaxis:
CREATE DATABASE database_name
Hogy a PHP vgrehajtsa a fenti parancsot, hasznlnunk kell a mysql_query fggvnyt. Ez elkld egy lekrdezst vagy parancsot a MySQL szervernek.
A lekrdezs szt az SQL SELECT utastsa esetn, a parancs szt pedig minden ms utasts esetn szoks hasznlni.
A kvetkez pldban ltrehozunk egy adatbzist my_db nven:

$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } if (mysql_query("CREATE DATABASE my_db",$con)) { echo "Database created"; } else { echo "Sikertelen adatbazis letrehozas: " . mysql_error(); } mysql_close($con);
A mysql_query fggvny msodik paramtere opcionlis. Akkor kell felttlenl hasznlnunk, ha egyszerre tbb adatbzis-kapcsolatot kell ignybe vennnk.
147. oldal
Tbla ltrehozsa
A CREATE TABLE parancs hasznlatval ltre tudunk hozni egy tblt a MySQL adatbzisban. Szintaxis:
CREATE TABLE table_name ( column_name1 data_type, column_name2 data_type, column_name3 data_type, ... )
A mysql_query fggvnynek paramterknt kell tadni a CREATE TABLE parancssort. Az adatbzist ki kell vlasztani, mieltt a tblt ltrehozzuk. Az adatbzist a mysql_select_db fggvnnyel tudjuk kivlasztani. A kvetkez plda megmutatja, hogyan lehet egy person nev tblt ltrehozni hrom mezvel. A mezk nevei: FirstName, LastName s Age:
mysql_select_db("my_db", $con); $sql = "CREATE TABLE person ( FirstName varchar(15), LastName varchar(15), Age int )"; mysql_query($sql, $con); mysql_close($con);
MySQL adattpusok
A klnbz MySQL adattpusok legfontosabb jellemzivel folytatjuk:
Numerikus adattpusok
int(size), smallint(size), tinyint(size), mediumint(size), bigiynt(size)
Csak egsz szmokat tartalmaz. A maximlis szmjegyek szmt meg lehet hatrozni a size paramterrel:
decimal(size,d), double(size,d), float(size,d)
Tizedesvesszt tartalmaz szmok. A maximlis szmjegyek szmt meg lehet hatrozni a size paramterben. A tizedesvessztl jobbra lv szmjegyek maximlis szmt a d paramterben lehet megadni.
Szveges adattpusok
char(size)
Fix hosszsg sztringet tartalmaz (betk, szmok s specilis karakterek). A fix hosszsgot zrjelben lehet megadni.
148. oldal
varchar(size)
Vltoz hosszsg sztringet tartalmaz (betk, szmok s specilis karakterek). A maximlis hosszsgot zrjelben lehet megadni
tinytext
Vltoz sztringet tartalmaz egy megadott maximlis hosszsggal, ami 255 karakter.
text, blob
mediumtext, mediumblob
longtext, longblob
Dtum tpus adatok

date(yyyy-mm-dd), datetime(yyyy-mm-dd hh:mm:ss), timestamp(yyyymmddhhmmss), time(hh:mm:ss)
Dtumot s/vagy idt tartalmaz
sszetett tpusok
enum(value1, value2, ect)
ENUM az ENUMERATED lista rvid formja. 1-65535 rtket tud raktrozni listzva a ( ) zrjelben. Ha egy olyan rtket akarunk beszrni, ami nincs a listban, gy egy res rtk fog beszrdni.
set
A SET (halmaz) hasonl az ENUM-hoz. Azonban a SET 64 listzott ttelt tartalmazhat tbb vlasztsi lehetsggel.
Elsdleges kulcsok s autoincrement mezk

A legtbb tblnak clszer tartalmaznia egy elsdleges kulcs mezt.
Tipikus kivtel a kizrlag tbb-tbb kapcsolatot megvalst n. kapcsol tblk.
Az elsdleges kulcs arra szolgl, hogy egyedileg azonostani lehessen a sorokat a tblban. Minden elsdleges kulcs rtknek egyedinek kell lennie a tbln bell. Tovbb az elsdleges kulcs mez nem lehet null, mert az adatbzis (ltalban) megkvn egy rtket, amely azonostja a rekordot.
149. oldal
Az adattblk azon mezit, amelyek alapjn gyakran kell a mezket visszakeresni, indexelni szoks. Az elsdleges kulcs mez mindig indexelve van. A kvetkez plda belltja a personID mezt elsdleges kulcsknt. Az elsdleges kulcs mez gyakran egy ID (azonost) szm s gyakran van hasznlva az AUTO_INCREMENT belltssal. Ez automatikusan nveli a mez rtkt, ha egy j rekord addik hozz az eddigiekhez. Hogy biztostva legyen, hogy az elsdleges kulcs mez nem res, ktelezen hozz kell adni a NOT NULL belltst a mezhz. Plda:
$sql = "CREATE TABLE person ( personID int NOT NULL AUTO_INCREMENT, PRIMARY KEY(personID), FirstName varchar(15), LastName varchar(15), Age int )"; mysql_query($sql,$con);
3.4.3. Adatok bevitele adatbzisba

Az INSERT INTO paranccsal adatokat illeszthetnk be egy adatbzis tblba. Szintaxis:
INSERT INTO table_name VALUES (value1, value2,...)
Azt is meghatrozhatjuk, hogy melyik oszlopba akarjuk az adatot beilleszteni:

INSERT INTO table_name (column1, column2,...) VALUES (value1, value2,...)
Az utbbi a formt akkor rdemes hasznlni, ha nem minden meznek akarunk rtket adni, vagy nem ugyanabban a sorrendben akarjuk az rtkeket felsorolni. Az itt rtket nem kap mezk automatikusan nvelt (auto increment) vagy alaprtelmezett (default) rtket is kaphatnak. Ha ilyen elrs nem trtnt a tbla ltrehozsakor, akkor NULL (definilatlan) rtket kap. Ahhoz, hogy a PHP vgrehajthassa a fenti parancsokat, a mysql_query fggvnyt kell meghvni. Az elz fejezetben egy Person nev tblt hoztunk ltre, hrom oszloppal: Firstname, Lastname s Age. Ugyanezt a tblt hasznljuk ebben a fejezetben is. A kvetkez plda kt j rekordot fz a Person tblhoz:
mysql_query("INSERT INTO person (FirstName, LastName, Age) VALUES ('Peter', 'Griffin', '35')"); mysql_query("INSERT INTO person (FirstName, LastName, Age) VALUES ('Glenn', 'Quagmire', '33')"); mysql_close($con);
150. oldal
Adatok beillesztse rlaprl egy adatbzisba

Most egy HTML rlapot fogunk kszteni, melyet j adat bevitelre fogunk hasznlni a Person tblba. me a HTML rlap:
<html> <body> <form action="insert.php" method="post"> Firstname: <input type="text" name="firstname"> Lastname: <input type="text" name="lastname"> Age: <input type="text" name="age"> <input type="submit" value="Elkld"> </form> </body> </html>
Amikor egy felhasznl az Elkld gombra kattint a HTML rlapon, az adatok elkldsre kerlnek az insert.php fjlnak. Az insert.php fjl egy adatbzishoz kapcsoldik, a mysql_query fggvny vgrehajtja az INSERT INTO parancsot, s az j adat beszrsra kerl az adatbzis tblba. Az insert.php oldal kdja a kvetkez:
$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } mysql_select_db("my_db", $con); $sql="INSERT INTO person (FirstName, LastName, Age) VALUES ('$_POST[firstname]','$_POST[lastname]','$_POST[age]')"; if (!mysql_query($sql,$con)) { die('Hiba: ' . mysql_error()); } echo "1 rekord ltrejtt"; mysql_close($con)
Ez a plda mg nem foglalkozik a biztonsgi krdsekkel. Ellenrzs nlkl soha nem szabad az adatokat felhasznlnunk! A 3.5.3. fejezetben ezekkel a problmkkal is megismerkednk.
3.4.4. Lekrdezs
A SELECT parancs adatok kivlasztsra szolgl egy adatbzisbl. Alapvet (nem teljes) szintaxis:
SELECT column_name(s) FROM table_name WHERE conditions
151. oldal
Ahhoz, hogy a PHP vgrehajthassa a fenti parancsokat, a mysql_query fggvnyt kell meghvni. Az albbi plda kivlasztja az sszes adatot, amely a Person tblban van trolva (A * karakter kivlasztja az sszes adatot a tblban):
$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } mysql_select_db("my_db", $con); $result = mysql_query("SELECT * FROM person"); while($row = mysql_fetch_array($result)) { echo $row['FirstName'] . " " . $row['LastName']; echo "<br>"; } mysql_close($con);
A mysql_query fggvny ltal visszaadott erforrst a $result vltozban troljuk. Ezzel az erforrssal rhetek el a lekrdezs eredmnyeknt kapott rekordok. A kvetkez pldban a mysql_fetch_array fggvnyt hasznljuk, hogy az els sort megkapjuk tmbknt az adathalmazbl. Minden ksbbi meghvs a mysql_fetch_arrayra a kvetkez sorral tr vissza az adathalmazbl. Ahhoz, hogy kirjuk az sszes sort, a $row vltozt hasznljuk ($row['FirstName'] s $row['LastName']). A mysql_fetch_array fggvny false rtket ad, ha mr nincs tbb rekord. Ezrt is alkalmazhat ilyen egyszeren egy while ciklusban. A mysql_fetch_array fggvny a rekord mezit asszociatv indexekkel s sorszmokkal is elrhetv teszi. A pldnkban a $row['FirstName'] helyett $row[1]-et is rhattunk volna. Ez a megolds azonban kevsb javasolt. A fenti kd kimenete a kvetkez lesz:
Peter Griffin Glenn Quagmire
Eredmnyek megjelentse HTML tblban

A kvetkez plda kivlasztja ugyanazokat az adatokat, mint a fenti plda, de az eredmnyeket HTML tblban fogja megjelenteni:
152. oldal
$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error());} mysql_select_db("my_db", $con); $result = mysql_query("SELECT * FROM person"); echo "<table border='1'> <tr> <th>Vezeteknev</th> <th>Keresztnev</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo " <td>" . $row['FirstName'] . "</td>"; echo " <td>" . $row['LastName'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con);
3.4.5. Rekord felttelek

Ha olyan adatokat szeretnnk kivlasztani, ami valamilyen feltteleknek megfelel, akkor a SELECT-hez hozz kell adnunk egy WHERE zradkot. Szintaxis:
SELECT column FROM table WHERE condition(s)
A kvetkez opertorok hasznlhatk a WHERE-rel: Opertor

= != > < >= <= BETWEEN LIKE
Lers Egyenl Nem egyenl Nagyobb Kisebb Nagyobb, vagy egyenl Kisebb, vagy egyenl Tartomnyba ess Mintval val egyezs
9. tblzat. SQL opertorok
153. oldal
Az SQL parancs PHP-ben val futtatshoz a mysql_query fggvnyt kell hasznlnunk. A kvetkez plda kivlasztja az sszes sort a Person tblbl, ahol FirstName=Peter:
$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } mysql_select_db("my_db", $con); $result = mysql_query("SELECT * FROM person WHERE FirstName='Peter'"); while($row = mysql_fetch_array($result)) { echo $row['FirstName'] . " " . $row['LastName']; echo "<br>"; }
Eredmny:
Peter Griffin
3.4.6. A rekordok rendezse

Az ORDER BY kulcssz a lekrdezett adatok rendezsre szolgl. Szintaxis:
SELECT column_name(s) FROM table_name ORDER BY column_name
A kvetkez plda az eredmnyt rendezi az Age mez szerint:

$con = mysql_connect("localhost","peter","abc123"); if (!$con) { die('Nem sikerult kapcsolatot kiepiteni: ' . mysql_error()); } mysql_select_db("my_db", $con); $result = mysql_query("SELECT * FROM person ORDER BY age"); while($row = mysql_fetch_array($result)) { echo $row['FirstName']; echo " " . $row['LastName']; echo " " . $row['Age']; echo "<br>"; } mysql_close($con);
Eredmny:
Glenn Quagmire 33 Peter Griffin 35
Rendezs nvekv s cskken sorrendben

Ha az ORDER BY kulcsszt hasznljuk, a rendezs alaprtelmezetten nvekv (pl. 1 utn 9 s a utn p). A cskken sorrendbe val rendezshez hasznljuk a DESC szt (pl. 9 utn 1 s p utn a):
154. oldal
SELECT column_name(s) FROM table_name ORDER BY column_name DESC
Rendezs kt vagy tbb oszlop alapjn

A rendezs lehetsges egynl tbb oszlop alapjn is. Ilyenkor a msodik (s az esetleges tovbbi) oszlopot csak akkor lesz figyelembe vve, ha az els mez szerint sorrend nem dnthet el (azaz azonos rtkek).
SELECT column_name(s) FROM table_name ORDER BY column_name1, column_name2
3.4.7. Adatok mdostsa

Az UPDATE utasts az adatok mdostsra szolgl az adatbzis tblban. Szintaxis:
UPDATE table_name SET oszlop_nev = uj_ertek WHERE oszlop_nev = valamilyen_ertek
Az elbbi utastssorozat lefordtsra a mysql_query fggvnyt kell hasznlnunk. A kvetkez plda mdost pr adatot a Person tblban:
mysql_query("UPDATE Person SET Age = '36' WHERE FirstName = 'Peter' AND LastName = 'Griffin'"); mysql_close($con);
A feltlts utn a Person tbla kinzete ilyen lesz: FirstName Peter Glenn LastName Griffin Quagmire Age 36 33
10. tblzat. A Person tbla

A tbla tbbi rekordjt nem akartuk megvltoztatni. Adatvesztssel jrna, ha a where zradkot lefelejtennk, vagy hibsan adnnk meg.
3.4.8. Adatok trlse az adatbzisbl

A DELETE FROM kifejezs hasznlatos sorok trlsre az adatbzis egy adott tbljbl. Szintaxis:
DELETE FROM table_name WHERE column_name = some_value
155. oldal
A fenti plda PHP szkriptbl val vgrehajtsra a mysql_query fggvnyt hasznlhatjuk. Az albbi kdrszlet trl minden olyan sort a tblbl, ahol a LastName mez rtke Griffin.
mysql_query("DELETE FROM Person WHERE LastName='Griffin'"); mysql_close($con);
A vgrehajts utn a tbla tartalma: FirstName Glenn

where
LastName Quagmire 33
Age
zradk
A where zradkban gyakran hasznlt logikai opertor mg az in, ritkbban az all, any, exists (ezek fleg begyazott select-nl) az is null s a not is.
3.4.9. Adatbzis absztrakci

Ha a trhelyszolgltat nem nyjt MySQL szolgltatst, vagy a MySQL nem tudja megfelelen kiszolglni a nagy terhelst, megolds lehet msik adatbzis-kezel szerver hasznlata. Tbbnyire a PostgreSQL69, Microsoft SQL Server70, vagy az Oracle Database71 szokott a megolds lenni. Esetleg a msik irnyban, a mg szernyebb szint szolgltats esetn is szksges lehet a vlts: ekkor az SQLite 72 megoldsa is helyettestheti az adatbzisszervert. Ezekhez is hasznlhatunk PHP-ben natv illeszt eszkzket, a PHP Manual hosszasan sorolja73 a lehetsgeket. Ma azonban egyre elterjedtebb megolds az adatbzis absztrakci alkalmazsa. Nzznk t az absztrakci nhny fontos elnyt: fggetleneds az adatbzis-kezel rendszertl (pl. MySQL helyett Oracle hasznlata) fggetleneds az adatbzis-kezel verzitl (az jabb verzi elnyeinek kihasznlshoz nem kell lemondani a rgebbi verzikkal val kompatibilitsrl sem) az egyes rendszerek specialitsaival nem kell foglalkoznunk, nem kell specialistv vlnunk
69 70 71 72 73 http://www.postgresql.org/ http://www.microsoft.com/sqlserver http://www.oracle.com/us/products/database/index.html http://www.sqlite.org/ http://hu.php.net/manual/en/refs.database.vendors.php
156. oldal
az alkalmazs tisztbb logikai felptse (knnyebb tervezs, kdols, karbantarts)
Az adatbzis absztrakcis rteg

Az adatbzis absztrakci lnyege az adatbzis absztrakcis rteg fogalmn keresztl rthet meg. Enlkl egy adatbzis alap alkalmazs a forrskd tetszleges rszein sztszrva tartalmaz olyan kdrszeket, amelyek az adott natv adatbzissal val kommunikcirt felelsek. Ezzel szemben az adatbzis absztrakcis rteg segtsgvel a kommunikci kzpontilag menedzselve valsulhat meg.
55. bra. Adatbzis absztrakcis rteg Erre is ltezik tbbfle megolds, de taln a legelterjedtebb a PDO (PHP Data Objects).
PDO
Nhny pldn keresztl nzzk meg az alapvetbb PDO74 szolgltatsokat.
A megrtshez szksges lehet a PHP objektumorientlt lehetsgeinek (3.8. fejezet) ismeretre.
Kapcsolds adatbzishoz:
$db = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
Rekordszint bejrs:
foreach($db->query('select * from products') as $row) { // ... }
Rekord beszrsa, s az j ID kiolvassa:

$db->exec("insert into products (name) values ('Sample')"); $id = $db->lastInsertId();
74 http://www.php.net/manual/en/intro.pdo.php
Rekordok mdostsa:
$db->exec("update products set name = 'Sample' where id = 3");
157. oldal
Preparlt lekrdezsek
Preparlt lekrdezs vza:
$statement = $db->prepare('select * from products'); $statement->execute(); $row = $statement->fetch();
A kvetkez pldk az SQL befecskendezses tmads (SQL injection75) elleni vdelem lehetsgeit mutatjk be. Alap technika a preparlt lekrdezsek hasznlata. Preparlt lekrdezs :
$statement = $db->prepare( 'select * from products where id = ? and category = ?'); $statement->execute( array($_GET['id'], $_GET['category'])); while($statement->fetch() as $row) { // ... }
Preparlt beszrs:
$statement = $db->prepare( 'insert into products (name) values(:name)'); $statement->execute( array('name' => $_POST['name'])); $newProductId = $db->lastInsertId();
Preparlt mdosts:
$statement = $db->prepare( 'update products set name=:name where id=:id'); $statement->execute( array('name' => $_POST['name'], 'id' => 123));
A PDO hasznlatval kapcsolatban tovbbi pldkat fogunk megnzni a 3.12. fejezet pldiban.
3.5. rlapok hasznlata

Az rlapok a felhasznltl rkez informcik klasszikus, s legfontosabb forrsai. A PHP $_GET s $_POST vltozi hasznlatosak az informci rlapokbl val tovbbtsra.
75 Bevezetknt a Weboldalak biztonsga 1: SQL Injection cikket ajnljuk. Forrs: http://pezia.hu/content/2009/03/08/weboldalak_biztonsga_1_sql_injection
158. oldal
Minden HTML oldalon tallhat rlapelem automatikusan elrhet a PHP szkriptek szmra.
3.5.1. A GET paramtertads

A $_GET vltozt arra hasznljuk, hogy rtkeket gyjtsnk az rlaprl a GET metdussal. A GET-tel mindenki szmra lthat mdon tudunk adatokat kldeni az rlapbl (megjelenik a bngsz cmsorban, az URL-ben). Az elkldhet informci mennyisge korltozva van.
A pontos korlt tbb szoftvertl is fgg, de maximum 2.000 karakterrel rdemes szmolni 76.
Plda:
<form action="welcome.php" method="get"> Nv: <input type="text" name="name"> letkor: <input type="text" name="age"> <input type="submit"> </form>
Amikor a felhasznl a submit gombra kattint, az URL-ben megjelennek az adatok:

http://azenoldalam/welcome.php?name=Peter&age=37
A welcome.php fjl arra hasznlja a $_GET vltozt, hogy elrje az rlap adatait. Az rlap mezk nevei automatikusan a $_GET tmb azonosti lesznek:
<html> <body> dvzllek, <?php echo $_GET["name"]; ?>!<br> Te <?php echo $_GET["age"]; ?> ves vagy. </body> </html>
Mirt hasznljuk a $_GET-et?

Amikor hasznljuk a $_GET vltozt, akkor az sszes vltoz neve s rtke megjelenik az URL-ben. Teht ennek a metdusnak a hasznlata nem ajnlott jelsz s egyb bizalmas informcik kldsekor. Viszont pont emiatt lehetsges knyvjelz elhelyezse. Ez sok esetben hasznos, mskor kifejezetten htrnyos lehet.
A $_GET rlap nlkl

Elsre taln meglepnek tnik, de a $_GET tmb elemei nem csak rlap kitltsvel jhetnek ltre. Semmi akadlya annak, hogy az URL eleve tartalmazzon kulcs-rtk prokat, pldul a kvetkez link eleve ilyen:
<a href=index.php?id=23>Msik oldal</a>
76 Konkrtabb informcik: http://www.boutell.com/newfaq/misc/urllength.html

Ebben az esetben rlap nlkl is lesz tartalma a $_GET tmbnek.
159. oldal
Hasonl okokbl szoks rlapba rejtett (hidden) mezt elhelyezni. A kitlttt adatokkal egytt ezek az adatok is el fognak jutni a $_GET tmbbe.
URL-kdols
Az URL egy erforrsok megcmzsre alkalmas eszkz kttt karakterkszlettel. Bizonyos karakterek (pl. kezetes betk, egyes rsjelek) kzvetlenl nem szerepelhetnek az URLben, de kdolt formban mr igen. A kdolt karakterek egy % jellel s a kt szmjeggyel lert hexadecimlis rtkkkel rhatk le. Pldul a szkz kdolva %20. rlapok adatainak GET metdussal val elkldse esetn az rlap adatok az URL-ben kerlnek tovbbtsra. Ilyen esetben is fontos szerepet kap a kdols, hiszen egy begpelt rlapmezben brmilyen karakter elfordulhat.
A $_REQUEST vltoz
A PHP $_REQUEST tartalmazza a $_GET, $_POST s $_COOKIE vltozk elemeit. Arra hasznljuk, hogy megkapja a GET s POST metdussal trtnt adatklds eredmnyt. Plda:
dvzllek, <?php echo $_REQUEST["name"]; ?>!<br> Te <?php echo $_REQUEST["age"]; ?> ves vagy.
Biztonsgi okokbl a $_REQUEST hasznlata ltalban kerlend. Meg kell ugyanis gyzdnnk arrl, hogy a fontos adatok tnyleg onnan rkeztek-e, ahonnan mi vrjuk, s nem valahonnan mshonnan.
3.5.2. A POST paramtertads

A $_POST vltoz neveket s rtkeket tartalmaz tmb, melyek a HTTP POST metdussal lettek tovbbtva. Az az informci, melyet egy rlaprl kldenek POST metdussal, lthatatlan a tbbi felhasznl rszre, s nincs korltozva az informci mennyisgt illeten. Plda:
<form action="welcome.php" method="post"> Nv: <input type="text" name="name"> letkor: <input type="text" name="age"> <input type="submit"> </form>
Amikor a felhasznl a submit gombra kattint, az URL nem fog semmilyen rlap adatot tartalmazni, s a valahogy gy fog kinzni:
160. oldal
http://azenoldalam/welcome.php
gy a welcome.php fjl most mr hasznlhatja a $_POST vltozt, hogy az rlap adatokat elrhesse. Az rlap mezk nevei automatikusan a $_POST tmb azonost kulcsai lesznek:
<html> <body> dvzllek, <?php echo $_POST["name"]; ?>!<br> Te <?php echo $_POST["age"]; ?> ves vagy. </body> </html>
Mirt hasznljunk $_POSTot?

A HTTP POST-al kldtt vltozk nem lthatk az URL-ben A vltozknak nincs hosszsgi korltjuk Egybknt, mivel az URL-ben nem lthatk a vltozk, nem lehetsges az oldalakat knyvjelzvel elltni. (Ez ltalban nem is lenne praktikus.)
3.5.3. Adatfeldolgozs
A felhasznl ltal bevitt adatok rvnyessgt minden esetben vizsglni kell. A kliens oldali vizsglat (4.9.1. fejezet) a ltogat szmra gyorsabb, s cskkenti a szerver terheltsgt, de nmagban sosem elegend, hiszen egy rosszindulat felhasznl azt knnyedn ki tudja jtszani. Ezrt az adatok szerver oldali vizsglata is szksges, klnsen, ha az rlapnak egy adatbzishoz kell hozzfrnie.
Mit is kaptunk?
Az egyes meztpusok esetn taln nem mindig trivilis, hogy minek is kellene lennie az egyes szitucikban. Ezrt egy egyszer tesztelsi lehetsg a print_r fggvny hasznlata:
<pre> <?php print_r($_GET); ?> </pre>
Tbbes adatok
A select tpus rlap elem s multiple tulajdonsg hasznlata esetn nem csak egy egyszer rtket kellene visszakapunk, hanem egy tmbt. Ilyen esetben az rlapot gy rdemes felptennk:

<form action="form.php" method="post"> <select name="test[]" multiple="multiple"> <option value="one">egy</option> <option value="two">kett</option> <option value="three">hrom</option> <option value="four">ngy</option> <option value="five">t</option> </select> <input type="submit" value="Klds"> </form>
161. oldal
Ekkor a szerver oldalon minden adatot megkapunk, egy tmbknt:

$test=$_POST['test']; if ($test){ foreach ($test as $t) echo 'Kivlasztva: ',$t,'<br>'; }
Ha get paramtertadst hasznlunk, az URL gy fog kinzni:

form.php?test[]=two&test[]=three
rlapok kdolsa
Ha UTF-8 karakterkdolssal kldjk ki az oldalainkat, akkor clszer az rlapok esetn is megadni ezt az informcit:
<form action="..." method="post" accept-charset="UTF-8">
Adatok rvnyestse
A felhasznltl rkez adatokban soha nem bzhatunk meg. Emiatt tbbfle ellenrzst kell vgeznnk a teljes biztonsg rdekben. Nzznk meg egy egyszer rlapot:
<form action="myform.php" method="post"> <p>Your Name: <input type="text" name="yourname"><br> E-mail: <input type="text" name="email"></p> <p>Do you like this website? <input type="radio" name="likeit" value="Yes" checked="checked"> Yes <input type="radio" name="likeit" value="No"> No <input type="radio" name="likeit" value="Not sure"> Not sure</p> <p>Your comments:<br> <textarea name="comments" rows="10" cols="40"></textarea></p> <p><input type="submit" value="Send it!"></p> </form>
Ha az rlap adatokat egyszeren eltroljuk s/vagy ksbb felhasznljuk, meglepetseket tapasztalhatunk. Nzzk meg a myform.php egyszer verzijt:
162. oldal
<html> <body> Your name is: <?php echo $_POST['yourname']; ?><br> Your e-mail: <?php echo $_POST['email']; ?><br> <br> Do you like this website? <?php echo $_POST['likeit']; ?><br> <br> Comments:<br> <?php echo $_POST['comments']; ?> </body> </html>
Ekkor ilyen eredmnyre szmtunk:

Your name is: John Doe Your email: john@doe.com Do you like this website? Yes Comments: This is my comment...
De mi trtnik akkor, ha a ltogat egy kis JavaScript kdot r be a beviteli mezbe:

<script>location.href('http://www.SPAM.com')</script>
Ha ezt kirjuk a fenti myform.php kddal, az sszes ltogatt elkldjk a fenti webcmre. Ez megengedhetetlen. A kvetkez kd a htmlspecialchars fggvnyt hasznlja a tmadsok kivdsre:
<?php $yourname = htmlspecialchars($_POST['yourname']); $email = htmlspecialchars($_POST['email']); $likeit = htmlspecialchars($_POST['likeit']); $comments = htmlspecialchars($_POST['comments']); ?> <html> <body> Your name is: <?php echo $yourname; ?><br> Your e-mail: <?php echo $email; ?><br> <br> Do you like this website? <?php echo $likeit; ?><br> <br> Comments:<br> <?php echo $comments; ?> </body> </html>
Ekkor a fenti JavaScript kdbl ez a kzmbstett kd lesz:

<script>location.href('http://www.SPAM.com')</script>
Ezen kvl tovbbi fggvnyek is szba jhetnek az adatok megtiszttsra. Ezek egysges hasznlatra nzznk egy pldt:

function check_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); return $data; } $yourname = check_input($_POST['yourname']); $email = check_input($_POST['email']); ...
163. oldal
Ktelez mezk kezelse

Fejlesszk tovbb a check_input fggvnyt. Ha egy mezt ktelezen ki akarjuk tltetni, akkor ezt az opcit egy msodik paramterrel bepthetjk a fggvnybe: ha tadjuk a szveges paramtert, akkor ezzel jelezzk, hogy ktelez a kitlts, s ekkor ez lesz a kiadand hibazenet is:
function check_input($data, $problem='') $data = trim($data); $data = stripslashes($data); $data = htmlspecialchars($data); if ($problem && strlen($data) == 0) die($problem); } return $data; }
A kvetkez felhasznls esetn az els s negyedik mez kitltse ktelez, a kzpsk nem:
$yourname $email $likeit $comments = = = = check_input($_POST['yourname'], "Enter your name"); check_input($_POST['email']); check_input($_POST['likeit']); check_input($_POST['comments'], "Write your comments");
Persze a hibazenetek lekezelsre (die fggvny) ez csak egy els megolds, tovbb kell fejlesztennk.
Regulris kifejezsek
A szintaxis-ellenrzs rgi bevlt mdszere a regulris kifejezsek hasznlata. Itt most nhny pldt fogunk megnzni. A hangsly nem a regulris kifejezsek mkdsn, hanem azok PHP felhasznlsn lesz. Az e-mail cm ellenrzsre egy lehetsges megolds:
$email = htmlspecialchars($_POST['email']); if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/",$email)) { die("E-mail address not valid"); }
URL ellenrzse:
164. oldal
$url = htmlspecialchars($_POST['website']); if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i",$url)) { die("URL address not valid"); }
Szmjegyek:
if (preg_match("/\D/",$age)) { die("Please enter numbers only!"); }
Angol abc beti:

if (preg_match("/[^a-zA-Z]/",$text)) { die("Please enter letters a-z and A-Z only!"); }
rlapok feldolgozsa helyben

Az adatok ellenrzsre bevett mdszer, hogy az rlap adatait az rlapot is tartalmaz szkript dolgozza fel, gy nincs szksg arra, hogy az adatokat egy jabb oldalra kldjk. Ebben az esetben a felhasznl a hibazeneteket ugyanazon az oldalon lthatja, ahol az rlap tallhat, gy megknnytve a hiba felfedezst s kijavtst. Nzzk az alapokat. Legyen az oldal neve form-action.php.
<?php if(isset($_POST['submit'])) { $name = $_POST['name']; echo "User Has submitted the form and entered this name : <b> $name </b>"; echo "<br>You can use the following form again to enter a new name."; } ?> <html> <head><title>Using PHP_SELF</title></head> <body> <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <input type="text" name="name"><br> <input type="submit" name="submit" value="Submit Form"><br> </form> </body> </html>
Elszr is meglep, hogy nem az rlappal kezdjk a forrskdot. Itt a httrben mr krvonalazdik az a ksbb egyre fontosabb vl logika, ami szerint a lehet legjobban vlasszuk szt a program logikjt a megjelentsi rszektl. A kd elejn el kell dntennk, hogy most elszr akarja ltni a ltogat az oldalt, s res rlappal kell vrnunk, vagy pedig az rlap mr kitltve rkezett vissza a ltogattl. Az els esetben nem fog semmilyen POST adat rkezni. A msodik esetben viszont igen: a Submit Form gomb lenyomsakor mr a POST adatok is elkldsre kerltek. Emiatt az isset fggvny alkalmas a kt eset megklnbztetsre.
165. oldal
A form action paramtert szoks a fenti mdon kitlteni. A $_SERVER['PHP_SELF'] ugyanannak az oldalnak a cme, amely a fenti PHP kdot tartalmazza. Itt is szmtanunk kell azonban egy betrsi lehetsgre. Ha a ltogat a bngszje cm sorba berja a kvetkez cmet, a $_SERVER['PHP_SELF'] vltoz egy gyesen elhelyezett tmadkdot tartalmaz.
http://www.yourdomain.com/form-action.php/%22%3E%3Cscript%3Ealert('xss') %3C/script%3E%3Cfoo%22
A PHP futs eredmnye ekkor:

<form name="test" method="post" action="form-action.php"/> <script>alert('xss')</script><foo"">
Az XSS tmads elkerlse rdekben inkbb gy hasznljuk:

<form name="test" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
Hibazenetek s javtsi lehetsgek

A ltogatk sokszor nem tudjk hiba nlkl kitlteni az rlapot. Emiatt fontos az albbi elvek figyelembe vtele: 1. az rlap eleve tartalmazzon minden informcit, ami a kitltssel kapcsolatos 2. kliens oldalon ellenrizzk az adatokat JavaScript segtsgvel 3. beszdes hibazenetekkel lssuk el a ltogatt, a hiba helyt knnyen beazonosthat mdon 4. adjuk vissza a ltogatnak a megadott adatait, hogy ne kelljen mindent ellrl kezdenie A korbbi pldink a hibazeneteket elgg mostohn kezeltk. Tbbszr hasznltunk olyan kdot, amely az els hibnl lell. De a hasznlhatsg miatt inkbb ssze kell gyjtennk a hibazeneteket, s a megfelel helyen kirni. Nzznk egy minimlis pldt a hibazenetek sszegyjtsre. A vltozk az rlaprl rkez adatokat tartalmazzk:
$errorMessage = ''; if(empty($varMovie)) { $errorMessage .= "<li>You forgot to enter a movie!</li>"; } if(empty($varName)) { $errorMessage .= "<li>You forgot to enter a name!</li>"; } if(empty($varGender)) { $errorMessage .= "<li>You forgot to select your Gender!</li>"; }
166. oldal
Jl ltszik, hogy a futs vgre az $errorMessage vagy res marad, s ekkor nem volt problma, vagy nem marad res, s felsorolsknt tartalmazza a hibazeneteket, s mr csak ki kell rnunk egy ul elembe. Mg szebb megolds lenne, ha kzvetlenl a mez mellett jelenne meg a hibazenet. (A 3.10.1. fejezetben ltni fogunk erre is pldt.) Ha az rlap feldolgozsa sorn azt lttuk, hogy nem tkletes, s jbl a ltogat fel kell tovbbtani, akkor vissza kell kldennk a korbban kitlttt adatokat. Erre egy egyszer plda:
<input type="text" name="Coal" <?php if (isset($_POST['Coal'])) { ?> value="<?php echo $_POST['Coal']; ?>" <?php } ?> />
Ha a ltogat mr kitlttte a Coal mezt, az isset($_POST['Coal']) igaz lesz, s kirjuk a value rtkeknt. rdemes azt is tgondolni, hogy az if-nek inkbb olvashatsgi jelentsge van, nlkle is megfelel lenne a kimenet: ha a felttel teljeslne, akkor nincs vltozs, ha a felttel nem teljesl, akkor a value res rtkkel jelenik meg.
3.5.4. llomnyok feltltse

PHP-vel lehetsges fjlok szerverre trtn feltltse is. Leggyakrabban kpeket szoks feltlteni, amelyek a szvegbe illesztve fognak fontos szerepet betlteni. De fjlmegoszts cljbl (pl. egy PDF dokumentumot), vagy adminisztrcis clokbl (adatok tmeges importlsa CSV llomnybl) trtn fjlfeltlts is elfordulhat.
Fjlfeltlt rlap ksztse

Nzzk meg az albbi fjl feltltsre hasznlt HTML rlapot:
<html> <body> <form action="upload_file.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>
Jegyezzk meg a kvetkezket a HTML rlappal kapcsolatban:
167. oldal
A form enctype attribtuma hatrozza meg, hogy melyik tartalom tpust hasznljuk, amikor az rlapot elfogadjuk. A multipart/form-data akkor hasznlatos, ha az rlap binris adatot vr, mint pl. egy fjl tartalma feltltskor. Az input elem file tpusa hatrozza meg, hogy a fggvny bemenete fjlknt legyen feldolgozva. Pldul bngszben val megjelentskor lesz egy Tallzs gomb a bemenet mez mellett.
Feltlts engedlyezse felhasznlk szmra nagy kockzattal jr. Kizrlag megbzhat felhasznlk szmra tegyk lehetv fjlok feltltst, s feltlts utn is ellenrizzk a fjlt.
Feltlt szkript ksztse

Az upload_file.php fjl tartalmazza a fjl feltltsre s az ellenrzsre szolgl programot:
if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br>"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br>"; echo "Stored in: " . $_FILES["file"]["tmp_name"]; }
A $_FILES globlis PHP tmb hasznlatval fjlokat tlthetnk fel egy kliens gprl a tvoli szerverre. Az els index az rlap mez neve, a msodik lehet name, type, size, tmp_name vagy error, a kvetkezkppen: $_FILES["file"]["name"]: a feltlttt fjl neve $_FILES["file"]["type"]: a feltlttt fjl tpusa $_FILES["file"]["size"]: a feltlttt fjl mrete byte-okban $_FILES["file"]["tmp_name"]: a szerveren trolt fjl msolatnak tmeneti neve $_FILES["file"]["error"]: a fjl feltltse sorn kapott hibakd Ez a fjlfeltlts egy nagyon egyszer mdja. Biztonsgi okokbl korltozsokat kell bevezetni a felhasznlknl a feltltsekre vonatkozan.
A feltlts korltozsa
Ebben a szkriptben a fjlfeltltst korltokhoz ktjk. A felhasznl kizrlag .gif vagy .jpeg fjlokat tlthet fel, s a fjlmretnek 20 Kb alatt kell maradnia:
168. oldal
if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br>"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br>"; echo "Stored in: " . $_FILES["file"]["tmp_name"]; } } else { echo "Invalid file"; }
A feltlttt fjl elmentse

A fenti pldk elksztik a szerveren a feltlttt fjlok egy-egy tmeneti msolatt a PHP temp mappban. A temp mappa egy logikai kifejezs, tnylegesen a php.ini belltstl fgg. XAMPP esetn c:\xampp\tmp. Az tmeneti fjlok trlsre kerlnek, amint a szkript futsa vget r. Ahhoz, hogy a fjlt eltroljuk, t kell msolnunk mshov. Ehhez a move_uploaded_file fggvnyt kell hasznlnunk:
if (($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/pjpeg") && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Return Code: " . $_FILES["file"]["error"] . "<br>"; } else { echo "Upload: " . $_FILES["file"]["name"] . "<br>"; echo "Type: " . $_FILES["file"]["type"] . "<br>"; echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br>"; echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]); echo "Stored in: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "Invalid file"; }
A fenti szkript leellenrzi, ltezik-e mr a fjl, ha pedig nem, bemsolja azt upload nev mappba.

Ezzel a feltlts folyamata eredmnyess vlt.
169. oldal
3.5.5. Levlklds
A PHP lehetv teszi, hogy kzvetlenl szkriptbl kldjnk e-maileket. Nhny ok, amirt e-mailt szoktunk kldeni egy weboldalrl: regisztrci, hrlevl feliratkozs stb. esetn megerst levl hrlevl a feliratkozott ltogatknak rtests valamilyen esemny bekvetkezsrl A PHP mail fggvnyt arra hasznljk, hogy segtsgvel szkripten bell e-maileket kldjenek. Szintaxis:
mail(to, subject, message, headers, parameters)
to: Ktelezen megadand. Az e-mail cmzettjt/cmzetteit hatrozza meg. subject: Ktelezen megadand. Az email tmja. Ez a paramter nem tartalmazhat j sor (LF, \n) karaktereket. Message: Ktelezen megadand. Az elkldend zenetet hatrozza meg. Minden j sort LF (\n) karakterrel kell elvlasztani. Egy sor terjedelme nem haladhatja meg a 70 karaktert. headers: Opcionlis. Tovbbi fejlceket adhatunk meg, mint pldul From, Cc s Bcc. A tovbbi fejlceket CRLF (\r\n) karakterrel kell elvlasztani. parameters: Opcionlis. Tovbbi paramtereket adhatunk meg a sendmail programnak A mail fggvny hasznlathoz a PHP-nek szksge van egy felteleptett s mkd levelezrendszerre, vagy SMTP kapcsolatra. A hasznland programot a php.ini fjl konfigurcis belltsai hatrozzk meg (3.1.2. fejezet).
Egyszer megolds
A legegyszerbb levlkldsi md PHP-ben a szveges levl kldse. Az albbi pldban elszr deklarljuk a vltozkat ( $to, $subject, $message, $from, $headers), majd a mail fggvnyben felhasznljuk ezeket a vltozkat e-mailkldsre:
170. oldal
$to = "valaki@levele.com"; $subject = "Teszt levl"; $message = "Szia! Ez egy egyszer levl."; $from = "valakimas@levele.com"; $headers = "From: $from"; mail($to,$subject,$message,$headers); echo "A levl elment.";
PHP levl rlapbl

A PHP segtsgvel ltre tudunk hozni egy visszajelz (ms nven kapcsolatfelvteli) rlapot weboldalunkon. A kvetkez pldban egy szveges zenetet kldnk el a megadott email cmre.
<html> <body> <?php if (isset($_POST['email'])) { $email = $_POST['email'] ; $subject = $_POST['subject'] ; $message = $_POST['message'] ; mail( "valaki@levele.com", "Subject: $subject", $message, "From: $email" ); echo "Ksznjk zenett."; } else { echo "<form method='post' action='mailform.php'> Email: <input name='email' type='text'><br> Trgy: <input name='subject' type='text'><br> zenet:<br> <textarea name='message' rows='15' cols='40'> </textarea><br> <input type='submit'> </form>"; } ?> </body> </html>
Elszr megvizsgljuk, hogy az email beviteli mez ki van-e tltve. Ha nincs (pldul ha ez az els ltogats az oldalon), akkor megjelentjk a HTML rlapot. Ha ki van tltve, elkldjk az rlapbl az emailt. Ha az rlap kitltse utn nyomjk meg az elkld gombot, a lap jratltdik, megnzi, hogy az email beviteli mez ki van-e tltve, majd elkldi az e-mailt.
Biztonsgos levlklds
Az elz fejezetben bemutatott mail fggvnynek van egy gyenge pontja: lehetsget ad befecskendezses tmads (injection) megvalstsra. A problma a fent bemutatott kddal, hogy illetktelen felhasznlok be tudnak szrni adatokat a levl fejlcbe a beviteli rlapon keresztl. Mi trtnik, ha a felhasznl a kvetkez szveget rja be az email beviteli mezbe az rlapon?

someone@example.com%0ACc:person2@example.com %0ABcc:person3@example.com,person3@example.com, anotherperson4@example.com,person5@example.com %0ABTo:person6@example.com
171. oldal
A mail fggvny a szokott mdon a fenti szveget helyezi el a levl fejlcben, s gy a fejlc tbblet Cc:, Bcc:, s To: mezket tartalmaz. Amikor a felhasznl az elkld gombra kattint, a fenti sszes cmre elkldi a levelet. gy a tmad olyan helyrl kldtt e-mailt, amely eddig nem volt letiltva spam gyan miatt. Emiatt mindenkppen clszer regulris kifejezsekkel ellenrizni, hogy az egyes mezk megfelelnek-e a kvnalmaknak.
3.6. llomnykezels
Mint minden programozsi krnyezetben, PHP-ben is igen gyakori, hogy egyszerre tbb llomnnyal dolgozunk. Egyrszt a forrskdot szoks kln llomnyokba szervezni, msrszt igen gyakran dolgozunk binris vagy szveges adatllomnyokkal is.
3.6.1. Forrskd beillesztse

Az include fggvny hasznlata esetn a PHP lnyegben bemsolja a sor helyre a paramterknt megadott fjlt, s ha tartalmaz PHP kdot lefuttatja azt.
Az include fggvny
Tegyk fel, hogy az oldalainkra ugyanazt a ment akarjuk beszrni:
<html> <body> <a href="default.php">Cmlap</a> | <a href="about.php">Magamrl</a> | <a href="contact.php">Kapcsolat</a> ...
Ha mindhrom oldalra (default.php, about.php, contact.php) ugyanezt a ment akarjuk alkalmazni, akkor hagyomnyos megoldssal mindhrom oldalra kzzel be kell illesztennk. Ez azonban tbb okbl sem szerencss. Ehelyett tegyk a fenti kdot egy kln menu.php fjlba, majd minden tovbbi oldalrl csak illesszk be. Pldul a default.php:
<?php include("menu.php"); ?> <h1>dvzlm honlapomon!</h1> <p>Tovbbi szveg...</p> </body> </html>
172. oldal
Termszetesen ha megnzzk a bngszben az llomnyt, akkor ott a beillesztett tartalmat fogjuk ltni:
<html> <body> <a href="default.php">Cmlap</a> | <a href="about.php">Magamrl</a> | <a href="contact.php">Kapcsolat</a> <h1>dvzlm honlapomon!</h1> <p>Tovbbi szveg...</p> </body> </html>
A require fggvny
Ez a fggvny nagyon hasonlt az elzre: mindssze a hibakezelsben van kztk eltrs. Az include warning-ot, vagyis figyelmeztetst ad, ha a beszrt llomnyban szintaktikai hiba van, de a hvs utni kd tovbb fut, mg a require error-t, vagyis hibt ad, s a hv kd futst is megszaktja. Tegyk fel, hogy a wrongFile.php hibs kdot tartalmaz.
<html> <body> <?php include("wrongFile.php"); echo "Hello World!"; ?> </body> </html>
Az include miatt a futs nem szakad meg a hibnl, a hibazenetek utn 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 kicserljk require-re, akkor a futs megszakad, s a kvetkez eredmnyt 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 Fatal error: require() [function.require]: Failed opening required 'wrongFile.php' (include_path='.;C:\php5\pear') in C:\home\website\test.php on line 5
3.6. llomnykezels
173. oldal
A cljainknak megfelelen kell eldntennk, hogy melyik megoldsra van szksgnk. Pl. ha az llomnyban a ksbbiekben szksges fggvny- vagy osztlydefincik tallhatak, akkor a require hasznlata clszer.
Egyedi beilleszts
Van, amikor szndkosan illesztnk be egy llomnyt tbbszr (pl. egy ciklus belsejben), de van, amikor a tbbszrs beilleszts kros lenne (pl. fggvny- vagy osztlydefinci esetn), vagyis el kell azt kerlni. A tbbszrs beilleszts elkerlse vgett alkalmazhatjuk az include_once s require_once fggvnyeket, amelyek hatsra az esetleges tbbszrs beilleszts nem fog megtrtnni.
3.6.2. Egyszer Front Controller megoldsok

A Front Controller tervezsi minta a weboldalhoz rkezett krs feldolgozshoz s a krsek kiszolglsnak vezrlshez hasznlt mdszer. (A Front Controller nagyon kzel ll az MVC minta Controller elemhez.)
A tervezsi mintkrl bvebben a 3.10. fejezetben beszlnk. A 3.10.2. fejezetben egy komplexebb Front Controller megoldst is bemutatunk.
Statikus megolds
A statikus megolds lehet pl. a kvetkez:
<?php // index.php switch ( @$_GET['action'] ) { case 'edit': include ('actions/edit.php'); break; case 'post': include ('actions/post.php'); break; case 'delete': include ('actions/delete.php'); break; case 'default': include ('actions/view.php'); break; } ?>
Jl lthat, hogy itt a lehetsgeket elre belegetjk a forrskdba.

Persze ez nem mindig problma, tovbbi paramterezssel j megolds lehet. A 3.12. fejezet pldja is hasonl.
Dinamikus megolds
A dinamikus megolds nem ignyli a lehetsgek (az elz pldban akcik) felsorolst, hanem valamely ms forrsbl (pl. fjlrendszer, adatbzis, konfigurcis adatok) derti ki az rvnyes krsek krt.
174. oldal
Nzznk meg egy egyszer vltozatot, ami konfigurcis fjlban, tmbben trolja az egyes oldalak adatait. (A plda knnyen tovbbfejleszthet abba az irnyba, hogy tmb helyett adatbzisbl olvassuk ki az oldalaink adatait.) A plda 3 egyedi s tbb hasonl forrsfjlbl pl fel. Az 56. bra a forrsllomnyok include struktrjt, s a beillesztsek sorrendjt (1-3) mutatja.
56. bra. A forrsllomnyok include-olsa
A config.inc.php
Ebben a fjlban olyan konfigurcis adatokat helyeznk el, amelyek minden oldallekrs esetn szksgesek lesznek. A fejlc a title s az oldal fcme szmra is tartalmaz informcit:
$fejlc = array( 'cm' => 'Nagy Gusztv', 'mott' => 'Szakmai s szemlyes oldal' );
Az $oldalak tmb a fmenben szerepl menpontokat s a hozzjuk tartoz oldalak adatait tartalmazza. Els eleme a kezdoldalra utal.
$oldalak = array( '/' => array('fjl' => 'kezdo', 'szoveg' => 'Kezdlap'), 'magamrol' => array('fjl' => 'magamrol', 'szoveg' => 'Magamrl'), 'szakmai_oneletrajz' => array('fjl' => 'szakmai_oneletrajz', 'szoveg' => 'Szakmai nletrajz'), 'galeriak' => array('fjl' => 'galeriak', 'szoveg' => 'Galrik'), 'kapcsolat' => array('fjl' => 'kapcsolat', 'szoveg' => 'Kapcsolat'), );
Vgl a hibaoldal szmra is definilunk informcikat:
3.6. llomnykezels
$hiba_oldal = array ('fjl' => '404', 'szoveg' => 'A keresett oldal nem tallhat');
175. oldal
Termszetesen ha tovbbi, a fmenn kvli oldalak is lesznek a honlapunkon, akkor jabb tmb segtsgvel azon is definilhatk lennnek. (Persze ekkor az index.php is sszetettebb kell legyen.)
Az index.php
Az index.php feladata a honlap feldolgozsi folyamatnak indtsa, vezrlse. Elszr is a konfigurcis adatokat tltjk be:
include('config.inc.php'); // 1.
A $keres vltozba lltjuk el, hogy melyik oldal lekrse is trtnt. Elszr az oldal GET paramter hinyra kszlnk fel, majd az $oldal tmb alapjn rvnyestjk a krst. A current tmbfggvny az $oldalak aktulis elemt adja vissza. Mivel a tmbt nem jrtuk be, az aktulis elem a tmb legels eleme, vagyis a cmlap.
$keres = current($oldalak); if (isset($_GET['oldal'])) { if (isset($oldalak[$_GET['oldal']])) { $keres = $oldalak[$_GET['oldal']]; } else { $keres = $hiba_oldal; header("HTTP/1.0 404 Not Found"); } }
Ltszik, hogy hibs krsre is fel kell kszlnnk. Vgl az index.tpl.php sablon fjl fejezi be a feladatot:
include('index.tpl.php'); // 2.
Az index.tpl.php
Az index.tpl.php fjl a honlap oldalrl oldalra vltozatlan sablonjt, valamint a vltoz rszek logikjt valstja meg. A kvetkez head rsz pldja jl mutatja a kt rsz egyttest:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> <?= $fejlc['cm'] . ( (isset($fejlc['mott'])) ? ('|' . $fejlc['mott']) : '' ) ?> </title> <link rel="stylesheet" href="style.css" type="text/css"> </head>
176. oldal
A minden oldalon egyformn megjelen HTML tagok kztt szerepl PHP rsz a config.inc.php-bl szrmaz adatokat helyettesti be. Persze egyszer behelyettests mellett a PHP valamivel sszetettebb feladatot is megoldhat. Pldul a kvetkez ciklus s feltteles utastsokkal pont az ignyeknek megfelel eredmnyt produklhatunk:
<div id="header"> <h1> <?= $fejlc['cm'] ?> </h1>
Ha a mott is meg van adva, akkor kirjuk a h2 tagokkal egytt:

<? if (isset($fejlc['mott'])) { ?> <h2> <?= $fejlc['mott'] ?> </h2> <? } ?> </div>
A fels ment az $oldalak tmb alapjn generljuk. Ha az aktulis tmbelem ( $oldal) egyenl a krsben ($keres) szerepl oldallal, akkor a kimenetbe az aktiv class tulajdonsgot is belegenerljuk:
<div id="topnav"> <ul> <? foreach ($oldalak as $url => $oldal) { ?> <li<?= (($oldal == $keres) ? ' class="aktiv"' : '') ?>> <a href="<?= ($url == '/') ? '.' : ('?oldal=' . $oldal['fjl']) ?>"> <?= $oldal['szoveg'] ?></a> </li> <? } ?> </ul> </div>
Az egyes oldalak
Az egyes oldalak vltoz trzse jelen pldnkban az oldal knyvtrban tallhat. Az index.tpl.php kvetkez rsze illeszti be az oldalba:
<div id="body"> <? include("oldal/{$keres['fjl']}.tpl.php"); ?> </div>
Pldnk vgn rdemes tgondolni e verzi sablon elv megkzeltst. Termszetesen rdemes a plda hinyossgait is ttekinteni: az adatok nem adatbzisbl, hanem fjlrendszerbl szrmaznak, s csak egyszer foldal s fmen struktrt valst meg.
3.6. llomnykezels
177. oldal
rdemes a tmban Chris Corbyn objektumorientlt megoldst (3.10.2. fejezet) is tanulmnyozni, amely egy egyszer vendgknyv alkalmazs vzlatt mutatja be.
3.6.3. Fjlok egszknt kezelse

A PHP igen sok lehetsget nyjt arra, hogy az llomny egszvel kapcsolatos mveletet vgezznk. A teljessg ignye nlkl nhny fontosabb plda kvetkezik.
llomnyok vizsglata
A file_exists fggvny segtsgvel lekrdezhetjk, hogy egy llomny ltezik-e:
$filename = '/path/to/foo.txt'; if (file_exists($filename)) { echo "The file $filename exists"; } else { echo "The file $filename does not exist"; }
A kvetkez fggvnyek is hasonl mdon informci lekrdezsre hasznlhatak: is_dir: az llomny knyvtr-e is_file: az llomny llomny-e (vagyis nem knyvtr) is_readable: az llomny olvashat-e is_writable: az llomny rhat-e
llomnyok trlse
Az unlink segtsgvel egy llomnyt trlhetnk a fjlrendszerbl.
Itt rdemes kicsit elidznnk azon, hogy a Unix filozfija szerint egy llomnynak tbb egyenrtk neve (s ezzel egytt elrsi tvonala) lehet egy fjlrendszeren bell. Ha egy tbb nvvel rendelkez llomny egyik nevt trljk, akkor a tbbi nevn mg elrhet marad. Emiatt nem biztos, hogy fizikai trls lesz a fggvny hasznlatnak kvetkezmnye.
$file = "test.txt"; if (!unlink($file)) echo ("Error deleting $file"); else echo ("Deleted $file");
Knyvtrkezels
Knyvtrat ltrehozni az mkdir, trlni az rmdir fggvnnyel tudunk:
mkdir("testing");
178. oldal
A knyvtr nevnek megadsn kvl egyb paramtereket is hasznlhatunk a jogosultsgok megadsra s rekurzv ltrehozsra:
mkdir("/path/to/my/dir", 0700);
Knyvtrak bejrsa
Ha szksgnk van arra, hogy egy knyvtrban tallhat sszes llomnyrl tudomst szerezznk, az opendir, readdir s closedir fggvnyekre lesz szksgnk.
$dir = opendir("images"); while (($file = readdir($dir)) !== false) echo "filename: " . $file . "<br>"; closedir($dir);
Sikeres megnyits esetn a $dir erforrs vltozt adja vissza az opendir fggvny. Ezutn a readdir fggvnyt addig hvogatjuk, amg sztringet, s nem false rtket ad viszsza. Vgl a closedir szabadtja fel a foglalt erforrsokat.
3.6.4. Fjlok tartalmnak kezelse

PHP-ben a fjlkezels logikja a hagyomnyos C (s nem a C++) nyelvre pl. Az fopen fggvnyt fjlok megnyitsra hasznljuk a PHP-ben. A fggvny els paramtere tartalmazza a megnyitand fjl nevt, a msodik azt hatrozza meg, hogy milyen mdon nyissuk meg a fjlt.
<html> <body> <?php $file=fopen("welcome.txt","r"); ?> </body> </html>
A fontosabb megnyitsi mdok: Md r w a Lers Csak olvass. A fjl elejn kezddik. Csak rs. Megnyitja s trli a fjl tartalmt; vagy egy j fjlt kszt ha a fjl nem ltezik. Hozzfzs. Megnyitja a fjlt s a vgre kezd rni; vagy egy j fjlt kszt ha a fjl nem ltezik.
11. tblzat. Az fopen megnyitsi mdjai

Ha az fopen nem tudja megnyitni a fjlt, false-t ad vissza.
3.6. llomnykezels
179. oldal
Az albbi plda egy zenetet ad vissza, ha az fopen nem tudja megnyitni a megadott fjlt:
<html> <body> <?php $file=fopen("welcome.txt","r") or exit("Unable to open file!"); ?> </html> </body>
A kd az or rvidzr kirtkelse (3.2.5. fejezet) miatt csak az fopen false visszaadott rtke esetn futtatja az exit fggvnyt.
A fjl bezrsa
Az fclose fggvnyt fjlok bezrsra hasznljuk. Illik ms erforrsokhoz hasonlan a fjlokat a lehet legkorbban elengedni.
<?php $file = fopen("test.txt","r"); //... fclose($file); ?>
Fjlvg ellenrzs
Az feof fggvny ellenrzi a fjlvg (EOF) elrst. Az feof fggvny hasznos ismeretlen hosszsg llomnyon val munknl.
if (feof($file)) echo "End of file";
Fjl soronknti beolvassa

Az fgets fggvnyt egy fjl egy sornak beolvassra hasznljuk. A fggvny hvsa utn az n. fjl mutat a kvetkez sorra mutat. Az albbi plda sorrl sorra beolvas egy fjlt, mg el nem ri annak vgt:
$file = fopen("welcome.txt", "r") or exit("Unable to open file!"); while(!feof($file)) { echo fgets($file). "<br>"; } fclose($file);
Fjl karakterenknti beolvassa

Az fgetc fggvny egy fjl egy karakternek beolvassra szolgl. A fggvny hvsa utn a fjlmutat a kvetkez karakterre mutat. Az albbi plda karakterenknt olvas be egy fjlt, mg el nem ri annak vgt.
180. oldal
$file=fopen("welcome.txt","r") or exit("Unable to open file!"); while (!feof($file)) { echo fgetc($file); } fclose($file);
Binris fjlkezels
PHP-ben viszonylag ritka a kzvetlen binris fjlkezels, legtbbszr szveges llomnyokkal dolgozunk. Amikor mgis szksg van r, akkor pl. a GD Library-t77 hasznljuk kpek ltrehozsra, manipullsra. (Pl. blyegkp kszts, kpek vzjelezse, stb.) Ms feladatokra hasonl magasabb szint megoldsok lteznek. Pldaknt nzznk meg egy egyszer kpkonvertl GD kdot:
$png_image = imagecreatefrompng( "input.png" ); imagejpeg( $png_image, "output.jpg" ); imagedestroy( $png_image );
3.7. Felhasznlkezels
Amita dinamikus weboldalakat fejlesztnk, nagy jelentsge lett annak, hogy a ltogatk szemlyt be tudjuk azonostani. Nem mindegy, hogy egy kls ltogat, vagy a weboldal tulajdonosa, adminisztrtora, vagy szerkesztje ltogatja az oldalt. Ebben a fejezetben megnznk nhny alapvet technikt a tmval kapcsolatban.
3.7.1. Stik kezelse

A sti (cookie) egy informcicsomag, amelyet a szerver kld a bngsznek, majd a bngsz visszakld a szervernek minden, a szerver fel irnytott krs alkalmval. A sti brmilyen, a kiszolgl ltal meghatrozott informcitartalmat hordozhat. Az eljrs clja az llapot bevezetse az alapveten llapotmentes HTTP tranzakciba. Stik hinyban minden egyes weboldal (vagy erforrs) lekrse elszigetelt esemny, gyakorlatilag fggetlen a honlap tbbi oldalnak lekrstl. Ha a bngsz visszakld egy stit, a szerver oldali kdnak lehetsge van sszekapcsolni az aktulis krst a korbbiakkal. Leggyakrabban egy adott weboldal regisztrlt felhasznlinak azonostsra, bevsrlkosr nyilvntartsra vagy ltogatk nyomonkvetsre hasznljk.
77 http://php.net/manual/en/book.image.php
181. oldal
A legtbb bngsz egyszer szveges fjlban vagy fjlokban trolja a stik tartalmt, hogy azok a bngsz kikapcsolsa s jraindtsa utn is elrhetek maradjanak. Ezeket stifjloknak nevezik.
Hogyan ksztsnk stit?

Sti ksztsre a setcookie fggvnyt hasznlhatjuk. Fontos megrtennk, hogy a setcookie fggvnyt mg a doctype s a html tag eltt kell meghvnunk.
A HTTP protokoll szerint a szerver elszr n. fejlcet kld, ennek a fejlcnek lesz rsze a stink is. A HTML oldal a fejlc utn kerl kldse, egy elvlaszt res sor utn. Ha teht akr egyetlen bett is elkldnk az ol dalbl, akkor mr nem kldhetnk fejlcet. Ha mgis megtesszk, a kvetkez figyelmeztetst kapjuk:
Warning: Cannot modify header information headers already sent ...
Nzznk egy kommunikcis pldt. A bngsz HTTP krst kld a szerver fel:
GET /index.html HTTP/1.1 Host: www.oldalam.com
A szerver vlasza:
HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT <!DOCTYPE html ...
Ezutn egy jabb HTTP krs esete:

GET /spec.html HTTP/1.1 Host: www.oldalam.com Cookie: name=value; name2=value2
Nzzk a PHP szintaxist:

setcookie(name, value, expire, path, domain);
Az albbi pldban ltrehozunk egy user nev stit s az Alex Porter rtket rendeljk hozz, tovbb az rvnyessgi idt egy rban hatrozzuk meg.
<?php setcookie("user", "Alex Porter", time()+3600); ?> <html> <body> </body> </html>
A sti rtke automatikusan kdolsra kerl kldskor, s automatikusan dekdoldik kirtkelskor. Kdols nlkli kldshez a setrawcookie fggvny hasznlhat.
182. oldal
A sti kiolvassa
A sti rtke a $_COOKIE tmbben kerl trolsra. Az albbi pldban a user nev sti rtkt, majd az egsz tmb tartalmt rjuk ki a kpernyre.
<?php echo $_COOKIE["user"]; print_r($_COOKIE); ?>
A kvetkez kdrszletben az isset fggvny segtsgvel ellenrizzk, hogy rkezett e sti.

<html> <body> <?php if (isset($_COOKIE["user"])) echo "Welcome " . $_COOKIE["user"] . "!<br>"; else echo "Welcome guest!<br>"; ?> </body> </html>
Sti trlse
A sti trlse gyakorlatilag azt jelenti, hogy a stit lejrtnak lltjuk be. Plda trlsre (az rvnyessg lejrtnak belltsa egy rval ezelttire):
<?php setcookie("user", "", time()-3600); ?>
3.7.2. Munkamenet-kezels
A munkamenet-kezelst (session) arra hasznljuk, hogy informcit troljon a felhasznl belltsairl, vagy annak megvltozsrl. Amikor egy asztali (desktop) alkalmazssal dolgozunk, megnyitjuk, vltoztatunk valamit, majd bezrjuk. A szmtgp tudja, hogy ki vgzi a mveletet. Tudja, amikor elindtjuk az alkalmazst, s amikor bezrjuk. De az interneten ez nem gy van. A webszerver nem tudja, hogy kik vagyunk s mit csinlunk, mert a HTTP protokoll nem tartja meg a krsek kzt az llapott. gy is mondjuk, hogy a HTTP protokoll llapotmentes. A munkamenet-kezels megoldja ezt a problmt. Engedlyezi a felhasznlkra vonatkoz informcik trolst a szerveren (felhasznl nv, vsrlsi ttelek, stb.). A session informcik ideiglenesek, s trldnek, miutn a felhasznl elhagyta az oldalt. Ha lland trolsra van szksg, akkor az adatokat adatbzisba kell elmenteni.
183. oldal
Stik s/vagy munkamenet?

A munkamenetek gy mkdnek, hogy ltrehozunk egy egyedi azonostt (UID) minden ltogatnak, s vltozkban troljuk. Az UID tbbnyire stiben, esetleg az URL-ben kerl tovbbtsra GET paramterknt. Itt rdemes azt is kiemelni, hogy a stik segtsgvel minden adatot oda-vissza kellene kldzgetni a kliens s a szerver kztt. Munkamenet-kezels esetn elegend egy munkamenet-azonostt kldeni, a tbbi adat a szerveren kerl trolsra.
Munkamenet indtsa
Mieltt informcikat trolnnk, el kell indtani a munkamenetet. A session_start fggvnynek a doctype s a html tag eltt kell szerepelnie:
<?php session_start(); ?> <html> <body> </body> </html>
Az elbbi kd regisztrlja a session-t a szerveren, engedlyezi a felhasznli informcik mentst, s az UID-t tovbbtja a felhasznl szmra.
Adatments munkamenetbe
A session vltozk trolsa s visszaolvassa a $_SESSION vltozval lehetsges:
<?php session_start(); $_SESSION['views']=1; ?> <html> <body> <?php echo "Pageviews=". $_SESSION['views']; ?> </body> </html>
Kimenet:
Pageviews=1
Az elz pldban ksztettnk egy egyszer oldal ltogatottsg szmllt: megszmoljuk, hogy ugyanaz a felhasznl ugyanazon az oldalon hnyszor jrt. Az isset fggvny ellenrzi, hogy a views munkamenet-vltoz kapott-e mr rtket. Ha igen, akkor nveljk eggyel. Ha a views nem ltezik, akkor ltrehozzuk, s belltjuk 1-re:
184. oldal
session_start(); if(isset($_SESSION['views'])) $_SESSION['views']=$_SESSION['views']+1; else $_SESSION['views']=1; echo "Views=". $_SESSION['views'];
A session trlse
A session adatok trlse az unset vagy a session_destroy fggvnyekkel trtnik. Az unset fggvnyt egy session vltoz trlsre hasznljuk. Ekkor a munkamenet egyb adatai megmaradnak.
unset($_SESSION['views']);
A session teljes trlse a session_destroy fggvnnyel lehetsges:

session_destroy();
A session_destroy fggvny jraindtja a session-t, s az sszes trolt session adatot elvesztjk.

Korbban a session_register s a session_unregister fggvnyek voltak hasznlatosak a munkamenet-vltozk kezelsre. Ez azonban elavultnak tekinthet, hasznljuk mindig kzvetlenl a $_SESSION tmbt.
3.8. Objektumorientlt PHP

Az elmlt vek fejldsi irnya nem csak a hagyomnyos, hanem a webes fejleszts terletn is az objektumorientlt tervezs s programozs. A PHP nyelv ugyan lemaradva, de ma mr lehetv teszi az OOP magas szint hasznlatt is. Azon olvask kedvrt, akik az OOP-vel mg nem tallkoztak, mindenkppen rdemes egy kis bevezetvel kezdennk.
Mivel a PHP objektumorientlt kpessgei ersen a Java 5-s megoldsaira ptenek, tovbbi bevezetsknt rdemes elolvasni a szerz Java programozs78 cm knyvnek 2. fejezett is.
A fejezet Tim Huegdon nagyszer cikksorozata79 alapjn kszlt.
3.8.1. Az OOP alapjai

Az OOP egy olyan paradigma, amely a hagyomnyosnak tekinthet procedurlis megkzelts tovbbfejlesztse. A korbbi programtervezsi mdszerekkel megterveztk az algoritmust, s az adatszerkezetet, de a kett kztt gyakran elg laza kapcsolat volt. Az OOP
78 http://nagygusztav.hu/java-programozas 79 http://nefariousdesigns.co.uk/archive/2006/05/object-oriented-concepts/
185. oldal
legalapvetbb jellemzje az egysgbezrs, amely a kd s adat sokkal szorosabb egysgt fejezi ki. Az egysgbezrs az objektumok s osztlyok szintjn is megvalsul.
Objektumok s osztlyok
Egy objektumorientlt program tulajdonkppen objektumokbl ll ssze. Az objektum llapott adattagokkal, viselkedst pedig metdusokkal (tagfggvnyekkel) tudjuk lerni. Az objektumok egymssal kommuniklni elssorban a metdusaikon keresztl tudnak. Az osztly az egyes objektumok elvi tervrajzt, mkdst definilja. Az elnevezs onnan. szrmazik, hogy az egyes objektumok hasonlsgait a tervezs sorn felismerhetjk. Ezt szoktuk osztlyozsnak is hvni. A programkdban teht elszr ltre hozzuk az osztlyok forrskdjt, majd az osztly pldnyai ltrehozva, az objektumokat hlzatknt hasznlhatjuk a feladat megoldsa rdekben. Az objektumok ltrehozst pldnyostsnak hvjuk. A pldny ltrejttekor automatikusan meghvd fggvny neve konstruktor. Az objektum lettartamnak vgn szksges takartst elvgz fggvnyt destruktornak hvjuk.
rklds
Az objektumok, s maguk az osztlyok is kapcsolatban lehetnek egymssal. Az rklds azt fejezi ki, hogy a leszrmazott megfelel az snek, de tovbb finomtja (specializlja) az shez kpest a lehetsgeit. Pldaknt nzzk egy pr gymlcst:
az alma gymlcs a narancs gymlcs a bann gymlcs
Ebben az esetben a 3 fajta gymlcs rendelkezik minden tulajdonsggal s viselkedsi lehetsggel, ami minden ms gymlcsre jellemz, de vannak csak r jellemz tulajdonsgai is. Vagyis a gymlcs osztly leszrmazottai specilisabbak, mint az seik. Nzznk egy msik egyszer pldt. Egy rlap lehetsges mezit szeretnnk modellezni. Egy egyszer (pszeudo) nyelven ezt gy is lerhatnnk:
186. oldal
class formElement { Attributes: id name class } class input extends formElement { Attributes: value type } class textarea extends formElement { Attributes: cols rows }
Pldnkban az input s textarea a formElement leszrmazottai.
Objektumok kztti relcik

Az egyes objektumok kztti kapcsolatokra is vessnk nhny pillantst. Az asszocici azt jelenti, hogy az egyes osztlyok kztt fggsgek vannak. Irnytatlan asszocici esetn mindkt fl tud a msikrl. A gyakorlatban gyakrabban elfordul irnytott asszocici esetn csak az egyik fl tud a msikrl. A kvetkez (pszeudo nyelv) plda jl kifejezi, hogy a kapcsolat a tulajdonos irnyban lland, nem hinyozhat.
class person { } class car { Attributes: driver Methods: // Konstruktor: car(driver) { this.driver = driver; } } me = new person(); myMotor = new car(me);
Tbbalaksg
A tbbalaksg (vagy polimorfizmus) azt jelenti, hogy az egyes osztlyok pldnyai msknt viselkedhetnek egy adott helyzetben. Pldaknt a kvetkez kd ms-ms HTML kimenetet gyrt az egyes rlap elemek esetn:

class formElement { Attributes: id name class Methods: getHtml() { // alap HTML kimenet } } class textarea extends formElement { Attributes: cols rows Methods: getHtml() { // specilis textarea kimenet } }
187. oldal
Ebben a pldban a leszrmazott osztly fellrja az sosztlyban meglv viselkedst.
3.8.2. Osztlyok hasznlat

Nzzk meg PHP szintjn is nhny pldn keresztl az alapfogalmakat, alapvetbb technikkat. PHP-ben elszr ltre kell hoznunk (definilnunk kell) az osztlyt, hogy utna abbl pldnyostva az objektumok is ltrejhessenek.
class myClass { var $attribute1; var $attribute2; function method1() { // trzs return $something; } function method2() { // trzs } }
A fenti osztlybl pldnyt ltrehozni a new opertorral tudunk:

$myObject = new myClass(); $myObject2 = new myClass(); $myObject3 = new myClass(); $myObject4 = new myClass();
A fenti objektumok tagjaihoz (akr adattag, akr tagfggvny) csak a nevk lersval nem tudunk hozzfrni. Minden esetben minstett nevet kell alkalmaznunk:
188. oldal
// Tulajdonsgok $myObject->attribute1 = 'Sonic'; $myObject->attribute2 = 'Knuckles'; // Metdusok: $returned = $myObject->method1(); $myObject->method2();
A fenti, PHP 4-es verzijnak megfelel plda mg nem tartalmaz lthatsgi informcikat, vagyis minden publikusan lthat az osztlyon kvlrl is.
A $this vltoz
Ha nem kvl, hanem az osztly trzsn bell szeretnnk a tagokra utalni, akkor ms nyelvekhez kpest meglep mdon szintn ktelez a minstett hivatkozs alkalmazsa. Ilyenkor a $this vltoz segtsgvel rhetjk el a tagokat.
class myClass { var $attribute1; function method1() { // attribute1 rtkt adja vissza return $this->attribute1; }
A konstruktor
A konstruktor egy olyan specilis metdus, amely automatikusan meghvdik az objektum pldnyostsa sorn, s bellthatja az objektum indul llapott. A kvetkez osztly az adatbzissal val kapcsolatot kezeli. A konstruktor megkapja a csatlakozshoz szksges informcikat.
class database { var $str_schema; var $str_host; var $str_user; var $str_password; // Konstruktor: function database($str_schema, $str_host, $str_user, $str_password) { // Adattagok belltsa a paramterek alapjn $this->str_schema = (string) $str_schema; // J szoks a tpusknyszerts alkalmazsa $this->str_host = (string) $str_host; $this->str_user = (string) $str_user; $this->str_password = (string) $str_password; } }
A fenti plda szintn a PHP 4-es logikjt kveti. Az 5-s verziban a konstruktor neve ms lesz.
Az objektum pldnyostsa gy trtnhet:

$db = new database('myschema', 'localhost', 'username', 'password');
PHP 5-ben mr inkbb a kvetkez szintaxist hasznljuk a konstruktor ltrehozsra:

function __construct($str_schema, $str_host, $str_user, $str_password) { // Adattagok belltsa a paramterek alapjn $this->str_schema = (string) $str_schema; // J szoks a tpusknyszerts alkalmazsa $this->str_host = (string) $str_host; $this->str_user = (string) $str_user; $this->str_password = (string) $str_password; }
189. oldal
A destruktor
PHP-ben viszonylag ritkn hasznljuk a destruktort, amely az objektum felszabadtsa eltt hvdik meg. PHP 5-ben gy hasznlhatjuk:
function __destruct() { // A mysql kapcsolat bezrsa if ($this->res_connection) { mysql_close($this->res_connection); } }
3.8.3. rklds
Az rklds a kd jrahasznostsnak egy gyakori mdja. Az albbi formElement osztly adattagjait s tagfggvnyt rkli a leszrmazott dateInput osztly.
class formElement { var $str_id; var $str_name; var $str_class; function isRequired() { // rvnyest kd } } class dateInput extends formElement { var $str_value; // Specilisabb rvnyests function isValidDate() { // rvnyest kd } }
gy a myDate objektum tagjai kztt elrhetk mind a sajt, mind az stl rklt tagok.
$myDate = new dateInput(); $myDate->str_id = 'mydate'; $myDate->str_name = 'mydate'; $myDate->str_value = '2006/06/09'; $myDate->isRequired(); $myDate->isValidDate();
190. oldal
A konstruktorok futsa
rklds esetn a leszrmazott konstruktorbl meg kell hvnunk a szl valamelyik konstruktort. PHP 4-es esetn:
class fruit { // Konstruktor: function fruit() { } } class apple extends fruit { function apple() { // A szl osztly konstruktornak hvsa $this->fruit(); } }
PHP 5-s esetn az sosztly konstruktort a parent hatkrben tudjuk elrni:

class fruit { // Konstruktor: function __construct() { } } class apple extends fruit { function __construct() { // Szl osztly konstruktornak hvsa parent::__construct(); } }
3.8.4. Asszocici
Az egyes objektumok kztt gyakori a tartalmazsi vagy hasonl kapcsolat. Pl. a fal tglkbl ll:
class brick { var $sample_attribute; } class wall { var $brick1; var $brick2; var $brick3; var $brick4; // Konstruktor: function wall() { $this->brick1 = new brick(); $this->brick2 = new brick(); $this->brick3 = new brick(); $this->brick4 = new brick(); } }
A tartalmazsi kapcsolat onnan is ltszik, hogy a fal objektum ltrejttekor automatikusan ltrejnnek a tartalmazott tglk is. Akr egybl hasznlhatjuk is ket:

$myWall = new wall(); echo $myWall->brick1->sample_attribute; echo $myWall->brick2->sample_attribute; echo $myWall->brick3->sample_attribute; echo $myWall->brick4->sample_attribute;
191. oldal
Nzznk egy msik pldt. Az aut objektumhoz szksges a vezet, nlkle nem jhet ltre:
class person { // ... } class car { var $driver; // Konstruktor: function car(&$driver) { $this->driver = (object) $driver; } } // A person pldnyostsa $me = new person(); // car ltrehozsa a vezet megadsval $myCar = new car($me);
rdemes megfigyelni a konstruktor referencia szerinti paramtertadst. gy a car konstruktor nem egy msolatot kap a vezetbl, hanem a referencijt (lnevt).
3.8.5. Lthatsg
A PHP 5-s objektummodellje abban is jdonsgot hozott, hogy hromfle lthatsgot vezetett be a tagokra nzve: public: kvlrl korltlanul elrhet (ez a PHP 4-es hozzllsa is, a var sz is ezt jelenti) private: csak a sajt osztlyon bell lthat, mg a leszrmazottakban sem protected: a sajt s a leszrmazott osztlybl lthat Adattagokat alapveten privt, esetleg vgett, mg konstruktorokat, metdusokat ltalban publikus lthatsggal hozunk ltre. Nzznk egy egyszer pldt:
192. oldal
class myClass { public $public = 'Public'; protected $protected = 'Protected'; private $private = 'Private'; function printHello() { echo $this->public; echo $this->protected; echo $this->private; } } $obj = new myClass(); echo $obj->public; // Mkdik echo $obj->protected; // Hiba! echo $obj->private; // Hiba! // Public, Protected s Private kirsa: $obj->printHello(); class myClass2 extends myClass { protected $protected = 'Protected2'; function printHello() { echo $this->public; echo $this->protected; echo $this->private; } } $obj2 = new myClass2(); echo $obj->public; // Mkdik echo $obj2->private; // Definilatlan echo $obj2->protected; // Hiba! // Public, Protected2, s nem Private $obj2->printHello();
A tovbbiakban mr lesz lehetsgnk arra is, hogy a ma egyre elterjedtebb objektumorientlt megkzeltst alkalmazzuk a gyakorlatban is.
3.9. Hibakezels
Amikor webalkalmazsokat ksztnk, a hibakezelssel nagyon fontos trdni. Ha az alkalmazsunk nem vgez korrekt ellenrzseket, az oldal hibsan fog mkdni, s biztonsgi rseket tartalmazhat. Ez a fejezet a PHP-ben leggyakrabban alkalmazott hibakezel mdszereket mutatja be: egyszer die kifejezs hibakezel fggvnyek kivtelkezels
3.9.1. Alapvet hibakezels: a die fggvny hasznlata

Az els plda egy egyszer szkriptet mutat be, amely egy szvegfjlt nyit meg:
3.9. Hibakezels
$file=fopen("welcome.txt","r");
193. oldal
Ha a fjl nem ltezik, akkor egy ehhez hasonl hibazenetnek kell megjelennie:
Warning: fopen(welcome.txt) [function.fopen]: failed to open stream: No such file or directory in C:\webfolder\test.php on line 2
Ennek elkerlsre tesztelnnk kell, hogy a fjl valban ltezik-e, mieltt megprblnnk hozzfrni:
if (!file_exists("welcome.txt")) { die("File not found"); } else { $file=fopen("welcome.txt","r"); }
Ha a fjl nem ltezik, akkor egy hibazenetet fogunk kapni:

File not found
A fenti mdon megakadlyozhat vele, hogy olyan informcikat szivrogtassunk ki, amelyek rosszindulat tmadsokhoz adhatnak tmpontot. A szkript lelltsa nem mindig a megfelel t. Vessnk egy pillantst kt alternatv hibakezel megoldsa. Az els fggvny alap, a msodik objektumorientlt megkzeltst alkalmaz.
3.9.2. Alaprtelmezett hibakezel fggvny ksztse

A hibakezelssel kapcsolatban az egyik legnagyobb veszly, hogy elfeledkeznk egyes hibalehetsgek lekezelsrl. Ezrt praktikus, ha minden lehetsges hibt egysgesen kezelnk le. Az alaptlet az, hogy megkrjk a futtatkrnyezetet: minden hiba esetn hvja meg ugyanazt a fggvnyt. Ezt a hibakezel fggvnyt teht nem a mi kdunk fogja kzvetlenl meghvni. Az ilyen fggvnyt callback fggvnynek szoks hvni. Egy alaprtelmezett hibakezel fggvny ksztse meglehetsen egyszer. Egyszeren egy specilis fggvnyt kell ltrehozni, ami meghvhat, ha hiba merl fel futs kzben. Ennek a fggvnynek tudnia kell kezelni legalbb kt paramtert (hiba szintje s hibazenet), de elfogadhat maximum t paramtert. (Az opcionlisak: fjl, a sor szma s a hibakrnyezete.) Szintaxis:
error_function (error_level,error_message, error_file, error_line, error_context)
A paramterek jelentse: error_level: Ktelez. Megadja, hogy milyen hibkat akarunk lekezelni. Egy szmrtknek kell lennie a 12. tblzatnak megfelelen.
194. oldal
error_message: Ktelez. A hibazenetet tartalmazza.
error_file: Opcionlis. A fjlnevet tartalmazza, ahol a hiba felmerlt. error_line: Opcionlis. A sor szmt tartalmazza, ahol a hiba felmerlt. error_context: Opcionlis. Egy tmbt tartalmaz, amiben benne van minden vltoz s annak rtke, melyek hasznlatban voltak, amikor a hiba felmerlt.
Hiba rtestsi szintek

Ezek a hiba rtestsi szintek azok a hibafajtk, melyek orvoslsra a felhasznl ltal ltrehozott hibakezelket hasznlni lehet: rtk 2 8 Konstans
E_WARNING
Lers Nem vgzetes futsidej hibk. A szkript vgrehajtsa nem lesz megszaktva. Futsidej figyelmeztets. A szkript tallt valamit, ami lehetsges hibaforrs, de az rtests akkor is elfordulhat, ha a szkript hibamentesen fut. Vgzetes felhasznl ltal generlt hiba. Ez olyan, mint egy E_ERROR, melyet a programoz llt be a trigger_error fggvnyt hasznlva. Nem vgzetes felhasznl ltal generlt figyelmeztets. Ez olyan, mint egy E_WARNING, melyet a programoz llt be a trigger_error fggvnyt hasznlva. Felhasznl ltal generlt rtests. Ez olyan, mint egy E_NOTICE, melyet a programoz llt be a trigger_error fggvnyt hasznlva. Elkaphat vgzetes hiba. Ez olyan, mint egy E_ERROR, de ez elkaphat egy felhasznl ltal definilt hibakezelvel. Minden hiba s figyelmeztets, kivve a E_STRICT szintet.
E_NOTICE
256
E_USER_ERROR
512
E_USER_WARNING
1024
E_USER_NOTICE
4096
E_RECOVERABLE_ERROR
8191
E_ALL
12. tblzat. Hiba rtestsi szintek
3.9. Hibakezels
Hozzunk ltre egy fggvnyt a hibk kezelsre:
function customError($errno, $errstr) { echo "<b>Error:</b> [$errno] $errstr<br>"; echo "Ending Script"; die(); }
195. oldal
A fenti kdrszlet egy egyszer hibakezel fggvny. Amikor megkapja a vezrlst, megkapja a hiba szintjt s egy hiba zenetet. Ezutn a kimenetre kldi a hibaszintet s zenetet, s a szkript futsa befejezdik. Termszetesen ez csak egy vzlatos megolds. Ilyen esetben clszer lehet egy log fjlba rni a hibakezelshez szksges informcikat. Most teht, miutn rtunk egy hibakezel fggvnyt, el kell dntennk, milyen esetekben legyen meghvva.
A hibakezel belltsa
Az alaprtelmezett hibakezel a PHP-ban egy beptett fggvny. Most azonban a beptett megolds helyett a fenti fggvnyt fogjuk hasznlni. Lehetsges gy megvltoztatni a hibakezelt, hogy csak bizonyos hibkra vonatkozzon, s a szkript klnbz hibkat klnbzkppen tudjon kezelni. Mi most ebben a pldban a sajt hibakezelt fogjuk hasznlni az sszes hiba esetn:
set_error_handler("customError");
Mivel azt akarjuk, hogy a hibakezel fggvnynk minden hibt kezeljen, a set_error_handler csak egy paramtert kvnt, a msodik csak opcionlis, s a hiba szintjt hatrozza meg. Teszteljk a hibakezelt, olyan vltozt megprblva kiratni, ami nem ltezik:
function customError($errno, $errstr) { echo "<b>Error:</b> [$errno] $errstr"; } set_error_handler("customError"); echo($test);
A kd kimenete ehhez hasonl lesz:

Error: [8] Undefined variable: test
Hiba elidzse
Egy szkriptben, melyben a felhasznlk adatokat vihetnek be, hasznos lehet a hibk elidzse, amikor egy nem megfelel bevitel addik. A PHP-ban ezt a trigger_error-ral lehetsges. Ebben a pldban hiba trtnik, ha a test vltoz nagyobb, mint 1:
196. oldal
$test=2; if ($test>1) { trigger_error("Value must be 1 or below"); }
A kd kimenete ehhez hasonllesz:

Notice: Value must be 1 or below in C:\webfolder\test.php on line 6
Egy hibt meg lehet hvni brhol a szkripten bell, s egy msodik paramter hozzadsval meg lehet hatrozni, hogy milyen hiba szintet akarunk elidzni. Ebben a pldban egy E_USER_WARNING zenet jelenik meg, ha a test vltoz nagyobb, mint 1. Egy ilyen esetben a szoksos hibakezelnket hasznljuk, s befejezzk a szkript futtatst:
function customError($errno, $errstr) { echo "<b>Error:</b> [$errno] $errstr<br>"; echo "Ending Script"; die(); } set_error_handler("customError",E_USER_WARNING); $test=2; if ($test>1) { trigger_error("Value must be 1 or below",E_USER_WARNING); }

Error: [512] Value must be 1 or below Ending Script
Most, hogy megtanultunk sajt hibakezelt kszteni, s hogy hogyan lehet meghvni ket, vessnk egy pillantst a hiba naplzsra.
Hiba naplzsa
A php.ini error_log konfigurcijban belltott mdon lehetsg van a hiba naplzsnak finomhangolsra. Hibazenetek a sajt email cmre kldse egy j mdszer arra, hogy rtesljnk a klnbz hibkrl.
Egy hiba zenet elkldse e-mailben

Az albbi pldban egy e-mailt fogunk elkldeni egy hibazenettel, s lelltjuk a szkriptet, ha egy bizonyos hiba megjelenik:
3.9. Hibakezels
function customError($errno, $errstr) { echo "<b>Error:</b> [$errno] $errstr<br>"; echo "Webmaster has been notified"; error_log("Error: [$errno] $errstr",1, "someone@example.com","From: webmaster@example.com"); } set_error_handler("customError",E_USER_WARNING); $test=2; if ($test>1) { trigger_error("Value must be 1 or below",E_USER_WARNING); }
197. oldal

Error: [512] Value must be 1 or below Webmaster has been notified
A levl, amit kapunk, ehhez hasonl lesz:

Error: [512] Value must be 1 or below
Ezt nem tancsos hasznlni minden hiba esetn. A rendszeres hibkat inkbb a szerveren naplzzuk, a PHP alaprtelmezett naplzsi rendszert hasznlva.
3.9.3. Kivtelkezels
A kivtelkezels objektumorientlt nyelvek esetn gyakran hasznlt hibakezelsi megolds. A fejezet megrtshez szksges a 3.8. fejezet ismerete.
Mi is a kivtel?
A PHP 5-tel egy j objektumorientlt lehetsg is adott a hibk kezelsre. A kivtelkezels hasznlatakor az megvltoztatja az utastsok vgrehajtsnak norml menett, ha egy meghatrozott hiba bekvetkezik. Ezt a felttelt kivtelnek nevezzk. ltalban a kvetkez trtnik kivtel kivltdsnl: A jelenlegi llapot mentsre kerl. A kd vgrehajtsa taddik egy elre meghatrozott kivtelkezel kdra.
A kivteleket csak a hibk felmerlsekor kell lekezelni, s nem lehet arra hasznlni, hogy a kd egy msik he lyre ugorjunk velk.
A kivtelek hasznlata
Amikor kivtel keletkezik, az azt kvet kd nem hajtdik vgre, s a PHP megprblja megtallni a hozz tartoz kivtelkezel catch blokkot.
198. oldal
Ha egy kivtelt egyetlen kezel sem kap el, egy hiba fog keletkezni, egy "Uncaught Exception" (Lekezeletlen kivtel) zenettel. Dobjunk (throw) egy kivtelt anlkl, hogy elkapnnk:
function checkNum($number) { if($number>1) { throw new Exception("Value must be 1 or below"); } return true; } checkNum(2);
A fenti kd a kvetkez hibt fogja generlni:

Fatal error: with message Stack trace: checkNum(28) Uncaught exception 'Exception' 'Value must be 1 or below' in C:\webfolder\test.php:6 #0 C:\webfolder\test.php(12): #1 {main} thrown in C:\webfolder\test.php on line 6
try, throw s catch

Ha el szeretnnk kerlni a fenti hibt, ltre kell hoznunk a megfelel kdot, hogy kezelni tudja a kivtelt. Nem csak a sajt, hanem a futtatkrnyezetet ltal eldobott kivtelek esetn is. A kivtelkezel kdnak tartalmaznia kell a kvetkezket: A try blokkba kell helyezni azt a kdot, amelyikben a kivtel ltrejhet. Pl. egy fggvnyhvsnak, ami kivtelt dobhat, benne kell lennie egy try blokkban. Ha nincs kivtel dobva, a kd normlis mdon fog folytatdni. Azonban kivtel keletkezse esetn a kivtelkezel catch blokk fog lefutni. A throw utastssal tudunk egy kivtel objektumot eldobni, jelezve ezzel a hiba bekvetkezst. A catch blokk elkapja a kivtel objektumot, amivel elrhetv vlik a hiba helye s jellege. A kvetkez pldban a checkNum fggvnyben kivtelt dobunk:
function checkNum($number) { if($number>1) { throw new Exception("Value must be 1 or below"); } return true; } try { checkNum(2); echo 'If you see this, the number is 1 or below'; } catch(Exception $e) { echo 'Message: ' .$e->getMessage(); }
3.9. Hibakezels
A fenti kd a kvetkez hibt fogja okozni:
Message: Value must be 1 or below
199. oldal
A fenti kd dob egy kivtelt, s el is kapja azt: 1. A checkNum fggvny azt nzi, hogy a szm nagyobb-e 1-nl. Ha nagyobb, akkor kivtelt dob. 2. A checkNum fggvnyt meghvjuk a try blokkban. 3. A checkNum fggvny kivtelt dob. 4. A catch blokk lekezeli a kivtelt, s elrhetv teszi a kivtel informciit. 5. A hibazenet megjelenik az $e->getMessage() meghvsa alapjn. A legalapvetbb szably: Ha kivtelt dobunk, azt el is kell kapnunk. Tovbbi bevezetsknt rdemes elolvasni a szerz Java programozs80 cm knyvnek 18. fejezett is.
3.10. Tervezsi mintk

A webfejleszts sorn hasznlt tervezsi mintk (design patterns) nagyban segthetik a munknkat, hiszen msok bevlt tletei alapjn valsznleg gyorsabb s hatkonyabb alkalmazst kszthetnk, mint csupn a sajt tleteinkre s tapasztalatainkra tmaszkodva. A weben igen sok (angol nyelv) forrs tallhat a tmakrben. A szerz vlemnye szerint az egyik legjobb a phpPatterns81 oldala. Ezen kvl a Zend PHPPatterns: Instructions82 cikke is nagyon hasznos.
Mi a tervezsi minta?
Ha egy feladat jra elkerl a fejleszts folyamn, akkor valsznleg a megolds hasonl lesz a korbbihoz. A tervezsi mintk olyan objektumkzpont megoldsokat jelentenek, amelyek mr bizonytottak a gyakorlatban. Ezek felhasznlsa rugalmasabban mdosthat s knnyebben, jobban jrahasznosthat alkalmazsokat kszthetnk.
Mivel jelen knyv nem vllalkozhat az objektum-orientlt programozs s tervezs komolyabb lehetsgeit bemutatni, elssorban az alapelvek s nhny egyszerbb megolds kvetkezik. A fejezet megrtshez szksges a 3.8. fejezet ismeretre.
A 3.6.2. fejezetben mr megismerkedtnk a Front Controller minta alapjaival. E fejezetben nhny tovbbi tervezsi mintt fogunk megvizsglni.
80 http://nagygusztav.hu/java-programozas 81 http://www.phppatterns.com 82 http://devzone.zend.com/node/view/id/3
200. oldal
3.10.1. Stratgia
A Strategy egy objektumba zrt algoritmus. Az egysgbezrs miatt az algoritmus jl elklnthet a kd ms rszeitl, az rklds miatt pedig a stratgia knnyen lecserlhet egy msikra.
Validtor plda
A fejezet pldja83 segtsgvel az rlap ltal kldtt adatok rvnyessgnek ellenrzst (validlst) fogjuk elvgezni. Nzznk egy hagyomnyos, nem tl praktikus megkzeltst:
if ( isset ($_POST['submit']) ) { if ( $_POST['user'] < '6' ) { echo ('Username is too short'); } else if ( $_POST['pass'] != $conf ) { echo ('Passwords do not match'); } else if ( $_POST['fullmoon'] == true ) { // ... } }
Ltszik, hogy a kd kiss zavaros, nehezen ttekinthet s mdosthat. Ezen kvl a hibazeneteket is azonnal megjelenti. (Ezt clszerbb lenne az rlap elem kzelben megtenni.) Nzzk meg egy jobb megoldst. A Validator (logikailag84) egy absztrakt osztly, a lnyegi munka a leszrmazottakban fog trtnni.
class Validator { var $errorMsg; function Validator () { $this->errorMsg=array(); $this->validate(); } function validate() { } function setError ($msg) { $this->errorMsg[]=$msg; } function isValid () { if ( isset ($this->errorMsg) ) { return false; } else { return true; } } function getError () { return array_pop($this->errorMsg); } }
83 A plda a http://www.phppatterns.com/docs/design/strategy_pattern oldalrl szrmazik. 84 A plda rsakor elterjedt 4-es PHP verzi mg nem ismeri az absztrakt osztly fogalmt.
201. oldal
Jl ltszik, hogy az ellenrzs sorn a hibk felismerse a hibazenetek megfogalmazst is jelenti. A hibk az $errorMsg tmbben gylnek. A kvetkez osztly a felhasznlnv rvnyessgt ellenrzi:
class ValidateUser extends Validator { var $user; function ValidateUser ($user) { $this->user=$user; Validator::Validator(); } function validate() { if (!preg_match('/^[a-zA-Z0-9_]+$/',$this->user )) { $this->setError( 'Username contains invalid characters'); } if (strlen($this->user) < 6 ) { $this->setError('Username is too short'); } if (strlen($this->user) > 20 ) { $this->setError('Username is too long'); } } }
rdemes megfigyelni, hogy ez a kd pt a PHP azon specialitsra, ami szerint az sosztly konstruktort nem hvja meg automatikusan a leszrmazott konstruktora. (Ebben az esetben az osztly logikja nem is mkdne.) A jelsz s az e-mail cm ellenrzse hasonl logikra pl:
class ValidatePassword extends Validator { var $pass; var $conf; function ValidatePassword ($pass,$conf) { $this->pass=$pass; $this->conf=$conf; Validator::Validator(); } function validate() { if ($this->pass!=$this->conf) { $this->setError('Passwords do not match'); } if (!preg_match('/^[a-zA-Z0-9_]+$/',$this->pass )) { $this->setError( 'Password contains invalid characters'); } if (strlen($this->pass) < 6 ) { $this->setError('Password is too short'); } if (strlen($this->pass) > 20 ) { $this->setError('Password is too long'); } } }
202. oldal
class ValidateEmail extends Validator { var $email; function ValidateEmail ($email){ $this->email=$email; Validator::Validator(); } function validate() { $pattern= "/^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+ (\.[a-zA-Z0-9_-]+)+/"; if(!preg_match($pattern,$this->email)){ $this->setError('Invalid email address'); } if (strlen($this->email)>100){ $this->setError('Address is too long'); } } }
Az ellenrzs megvalstsa az osztlyaink felhasznlsval mr egyszer:

<?php if ( $_POST['register'] ) { require_once('lib/Validator.php'); $v['u']=new ValidateUser($_POST['user']); $v['p']=new ValidatePassword($_POST['pass'],$_POST['conf']); $v['e']=new ValidateEmail($_POST['email']); foreach($v as $validator) { if (!$validator->isValid()) { while ($error=$validator->getError()) { $errorMsg.="<li>".$error."</li>n"; } } } if (isset($errorMsg)) { print ( "<p>There were errors:<ul>n".$errorMsg."</ul>"); } else { print ('<h2>Form Valid!</h2>'); } } else { ?> <h2>Create New Account</h2> <form action="<?php echo ($_SERVER['PHP_SELF']); ?>" 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 } ?>
3.10.2. Front controller

A 3.6.2. fejezet egyszerbb megoldsa utn nzznk a Front controller tervezsi mintrl is egy korszerbb, objektumorientlt megoldst. Jelen fejezet pldja Chris Corbyn A lightweight and flexible front controller for PHP 5 cikkbl85 szrmazik.
85 http://www.w3style.co.uk/a-lightweight-and-flexible-front-controller-for-php-5

Pldaknt egy egyszer vendgknyv jelleg alkalmazst fogunk megismerni.
203. oldal
index.php
Objektumorientlt megkzeltsben a Front controller ltalban egy osztly szokott lenni. Ez az osztly vgzi a teljes vezrlst. Az index.php tulajdonkppen csak ennek elksztsre szolgl, hosszabb kdot nem szokott tartalmazni:
<?php define("PAGE_DIR", dirname(__FILE__) . "/pages"); require_once "FrontController.php"; FrontController::createInstance()->dispatch();
FrontController.php
A FrontController osztly pldnyostsa nem a szoksos mdon, az osztlyon kvl, hanem egy gyrt metdussal (createInstance) valsul meg.
<?php class FrontController { public static function createInstance() { if (!defined("PAGE_DIR")) { exit("Critical error: Cannot proceed without PAGE_DIR."); } $instance = new self(); return $instance; }
A dispatch fggvny adja az osztly tnyleges logikjt. Elszr is jl ltszik, hogy a get paramterek kztt page s action rtkekre szmt. Az alaprtelmezett page rtk home lesz, az alaprtelmezett action pedig index.
public function dispatch() { $page = !empty($_GET["page"]) ? $_GET["page"] : "home"; $action = !empty($_GET["action"]) ? $_GET["action"] : "index";
sszelltja a $page paramter alapjn a betltend osztly nevt. A kezdbett nagybetsti az objektumorientlt konvenciknak megfelelen.
$class = ucfirst($page) . "Actions";
sszelltja a $file vltozba a betltend llomnynevet (pl. pages/home/HomeActions.php), majd megnyitja.

$file = PAGE_DIR . "/" . $page . "/" . $class . ".php"; if (!is_file($file)) { exit("Page not found"); } require_once $file;
Szintn a paramterek alapjn ll ssze a meghvand metdus neve. Ha ltezik, meghvjuk (pl. $controller->doIndex()), s ezzel az osztly befejezte mkdst.
204. oldal

$actionMethod = "do" . ucfirst($action); $controller = new $class(); if (!method_exists($controller, $actionMethod)) { exit("Page not found"); } $controller->$actionMethod(); exit(0);
} }
pages/guestbook/GuestbookActions.php
Pldaknt nzzk a vendgknyv funkcionalitst megvalst kd vzlatt.
<?php class GuestbookActions { public function doIndex() { // index (listzs) megvalsts } public function doCreatePost() { // bejegyzs ltrehozsa megvalsts } }
Nzznk 1-1 pldt a kt akci meghvsra: http://localhost/index.php?page=guestbook&action=index http://localhost/index.php?page=guestboook&action=createPost
3.10.3. MVC
A fejezet elejn meg kell jegyeznnk, hogy a 3. fejezet htralev rsze jelentsen komplexebb a knyv egyb rszeinl. Ha az Olvas szmra nehezen vagy nem rthet, akkor rdemes egy tolvass utn az alaposabb megismerst elhalasztani, s ksbb visszatrni r.
Az MVC86 (model view controller, modell nzet - vezrl) egy jl hasznlhat, kiprblt mdszer arra, hogy hogyan vlasszuk szt a felhasznli felletet s az alkalmazs logikt. Az elsdleges cl az, hogy a felhasznli fellet megjelentsrt felels kdot teljesen elklntsk. Ezltal annak mdostsa, kiegsztse nem vonja maga utn az alkalmazs logikt megtestest kd mdostst, vagy megismtlst. A mdszer lnyege az, hogy a hagyomnyos eljrs alap programok adatbevitel-adatfeldolgozs-eredmny megjelentse feladatokat lekpezzk a grafikus felhasznli fellettel rendelkez programokban: adatbevitel controller adatfeldologzs model eredmny megjelentse view
86 Barkczi Roland szakdolgozata (http://blog.aer.hu/) alapjn
205. oldal
A vezrl dolgozza fel a felhasznli adatbevitelt. Fggvnyhvsokk kpezi le azokat. Ezek fogjk elidzni az adatok mdostst, trlst, vagy a nzetek megvltozst. Pldul ha a felhasznl kivlasztja a men egyik elemt, akkor egy vezrl fogja meghatrozni, hogy ennek hatsra mi is trtnjen. A modell reprezentlja az alkalmazs logikt, feladata az adatok kezelsvel kapcsolatos feladatok elvgzse. Ez az egysg felels pl. egy szmla fa tartalmnak s vgsszegnek kiszmolsrt. A modell tudja, hogy melyik vev fogja kifizetni a szmlt, s ha szksges, azt is, hogy ppen szletsnapja van-e ennek a vevnek. A nzet feladata a felhasznli fellet megjelentse. Ez az rlapokat, tblzatokat, linkeket, gombokat, szvegeket jelent. Ezek az elemek megjelenhetnek egy szabvnyos HTML oldalon, de akr egy RSS csatornn is. Vegyk egy konkrt gyakorlati PHP fejleszti pldt. Feladatunk egy felmrs eredmnyeinek megjelentse tblzatban. Hagyomnyos mdszerrel a PHP forrsunk tartalmaz egy SQL lekrdezst, majd az adatokat egy ciklussal kirja egy tblzatba. Ha az gyfelnk ugyanezen adatokat egy grafikonon is ltni szeretn, akkor ltrehozunk egy msik fjlt, ami szintn tartalmazni fogja az SQL krst, s az adatok megjelentst. Az MVC tervezsi minta ezzel szemben tartalmazni fog egy modellt, ami felels az adatbzis kezelsrt, s kt nzetet, ami felels az adatok megjelentsrt. Azt, hogy melyik nzetet kell megjelenteni, a vezrl dnti el a felhasznl krse alapjn. Ha tovbbi nzetekre van szksgnk (pl. krdiagramm vagy esetleg egy szveges magyarzatokkal elltott kimutatsra), akkor csak a megfelel nzetfjlokat kell elkszteni, amelyek a modellbl szrmaz adatokat hasznljk fel.
206. oldal
57. bra. Az MVC felptse
Egy vzlatos megolds

Sajnos e knyv terjedelme s a tma komplexitsa nem teszi lehetv, hogy egy komolyabb megoldst alaposan bemutassunk. Ezrt egy vzlatos megoldst fogunk megismerni Henrique Barroso How to create a simple MVC framework in PHP87 cikke alapjn. A kvetkezkben egy egyszer blog oldal vzlatt fogjuk ltni.
Fjlstruktra
Az MVC megoldsoknl nagy jelentsge van az alkalmazs knyvtr s llomnystruktrjnak. Nzzk elszr a megoldsunk knyvtrszerkezett. Gykrknyvtrknt a my_mvc knyvtrat fogjuk hasznlni. gy a bngsznkben a http://localhost/my_mvc/ tvonalon tudjuk elrni. ./my_mvc ./my_mvc/application ./my_mvc/application/controller ./my_mvc/application/model ./my_mvc/application/view
.htaccess
tirnytjuk az sszes krst az index.php-nek:
87 http://www.henriquebarroso.com/how-to-create-a-simple-mvc-framework-in-php/

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase /my_mvc/ RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] </IfModule> <IfModule !mod_rewrite.c> ErrorDocument 404 /index.php </IfModule>
207. oldal
Termszetesen a mod_rewrite modult engedlyezni kell az Apache belltsainl (3.1.1. fejezet).
index.php
Az index.php ltja el az alapvet vezrlsi feladatokat. A .htaccess miatt minden krs ide fog rkezni, s ez alapjn tlti be a tovbbi llomnyokat, s hozza ltre az MVC meg felel objektumait. Definiljuk az oldal url-jt s a szerveren belli alap tvonalt:
define("BASE_PATH", "http://localhost"); $path = "/my_mvc";
Az $url vltozba kinyerjk a $path nlkli URL-t.

$url = $_SERVER['REQUEST_URI']; $url = str_replace($path,"",$url);
Az $url-bl tmbb szeleteljk a / s \ jelek mentn.

$array_tmp_uri = preg_split('[\\/]', $url, -1, PREG_SPLIT_NO_EMPTY);
Az $url hrom szelete fontos szerepet tlt be az URL MVC szerinti kezelshez. Az els a pldnyostand osztly neve, a msodik az objektum fggvnye, a harmadik pedig az tadott tovbbi paramter.
$array_uri['controller'] = $array_tmp_uri[0]; $array_uri['method'] = $array_tmp_uri[1]; $array_uri['var'] = $array_tmp_uri[2];
A kvetkez sorok a vezrl felptst s bezemelst valstjk meg:

require_once("application/base.php"); $application = new Application($array_uri); $application->loadController($array_uri['controller']);
application/base.php
Az Application osztly a vezrlk sosztlya. rdekes mdon nem csak a leszrmazottaibl fogunk pldnyt ltrehozni, hanem belle is. A megfelel leszrmazott pldnyostst is valstja meg. Ezt a megoldst a Builder (pt) tervezsi mintra hasonlt.
208. oldal
Az Application pldnya a paramterek tmbjt s a modell objektumot tartalmazza majd.

class Application var $uri; var $model;
A konstruktor csupn a paramtereket menti el:

function __construct($uri) { $this->uri = $uri; }
A $class vltoz szintn a paramterbl szrmazik. A plda kd blog lesz, de tovbbfejleszthet tovbbi vezrlkel. Elszr is betlti a vezrl osztlyt.
function loadController($class) { $file = "application/controller/".$this->uri['controller'].".php"; if(!file_exists($file)) die(); require_once($file); $controller = new $class();
Ekkorra mr van vezrl pldnyunk is. Ha a 2. paramter is korrekt, meghvjuk a neki megfelel metdust. Klnben az alaprtelmezetten index mkds lesz. Itt az add s az index mkdsek lesznek elrhetek, ahogy a Blog osztly kdjban hamarosan ltni fogjuk.
if(method_exists($controller, $this->uri['method'])) { $controller->{$this->uri['method']}($this->uri['var']); } else { $controller->index(); } }
A nzet a paramter alapjn tltdik be. De eltte a 2. paramter wddx eltaggal nll vltozkk lesz bontva, hogy a betlttt sablon llomny ez alapjn vgezhesse a behelyettestst.
function loadView($view,$vars="") { if(is_array($vars) && count($vars) > 0) extract($vars, EXTR_PREFIX_SAME, "wddx"); require_once('view/'.$view.'.php'); }
A modell betltse s pldnyostsa is a paramtertl fggen trtnik. Pldnkban model_blog paramterrel fogjuk meghvni.
function loadModel($model) { require_once('model/'.$model.'.php'); $this->$model = new $model; }
3.10. Tervezsi mintk application/controller/blog.php

A Blog oszts specializlja az s lehetsgeit. Itt a modell betltst lthatjuk:
class Blog extends Application { function __construct() { $this->loadModel('model_blog'); }
209. oldal
Az index az alkalmazsunk blog vagy blog/index tvonalon lesz elrhet. A modell a teljes listzst szimullja. (Az adatbzissal val kommunikci mr nem lesz rsze a pldnak.)
function index() { $articles = $this->model_blog->select(); $data['articles'] = $articles; $this->loadView('view_blog',$data); }
Az add egy j blog bekldst valstja meg. Ez is csak a megolds vzt fogja tartalmazni: az rlapot igen, de az adatok elmentst mr nem tartalmazza.
function add($title="") { $data['title'] = $title; $this->loadView('view_blog_add',$data); }
application/model/model_blog.php
A modell ahogy emltettk igen vzlatos:
class model_blog extends Application { function __construct() { // ide az adatbzis kapcsolat, stb. jhet } function select() { // ide adatbzisbl trtn lekrsek kerlhetnnek return array("title 1","title 2","title3"); } }
application/view/view_blog.php
A sablon llomny blogok (jelenleg csak cmek) listzshoz:
210. oldal
<html> <head> <title>My Blog</title> </head> <body> <h1>My Blog</h1> <?foreach($articles as $article):?> <h3><?=$article?></h3> <?endforeach?> </body> </html>
application/view/view_blog_add.php
A sablon llomny j blog beszrshoz:
<html> <head> <title>My Blog</title> </head> <body> <h1>My Blog</h1> <h3>Title:</h3> <input type="text" value="<?=$title?>"> </body> </html>
Ahogy lthatjuk, egy vzlatos, de ugyanakkor az MVC logikjt jl bemutat pldt ismerhettnk meg. rdemes azonban azt is elmondani, hogy a PHP rugalmassga s a fejlesztk fantzija miatt ugyanezen alapelveket jelentsen eltr ms megkzeltsekben is megvalsthatak.
3.11. Sablonrendszerek
A webfejlesztsben sokszor az MVC-nl egyszerbb mdszert alkalmazunk, vagy a nzet felptst is a sablonozsra bzhatjuk. Ennek lnyege, hogy az alkalmazs logikt s a megjelentsi kdot a lehet legtisztbban vlasszuk el egymstl. gy brmelyik komponens vltozsa esetn a msik komponenshez csak kis rszben, vagy egyltaln nem kell hozznylni. Az alkalmazs-logika s a megjelentsi kd sztvlasztsnak tovbbi elnye, hogy az alkalmazs logikjt megvalst kdon dolgoz fejleszt, s az oldal megjelensvel foglalkoz dizjner akr prhuzamosan, egyms zavarsa nlkl is vgezheti a dolgt. Radsul egyms munkjt is elg alapfokon ismerni az egyttmkdshez.
211. oldal
3.11.1. Smarty
A Smarty88 az elmlt vekben mltn vlt az els szm (s sok fejleszt szmra az egyetlen) sablon-motorr. A mai vltozata mr tbb mint egy sablonmotor, taln pontosabb lenne sablon-keretrendszernek nevezni.
Jellemzk
Bevezetsl a Smarty nhny fontos jellemzjt fogjuk megvizsglni.
Gyorstrazott
A Smarty lehetsget nyjt az oldalaink lefordtott llapotnak eltrolsra kt klnbz szinten is. Termszetesen ez a lehetsg finoman konfigurlhat, nem csak globlisan, hanem egyes oldalakra nzve is ki-be kapcsolhat.
Konfigurcis llomnyok
Egy vagy tbb oldalon is felhasznlhatk a kln llomnyokban trolt konfigurcis informcik. Radsul a konfigurcis belltsokat a dizjner nllan is menedzselni tudja, nincs szksg a programoz beavatkozsra.
Biztonsgos
A sablonok nem tartalmaznak PHP kdot. Ezzel cskkentjk ugyan a dizjner lehetsgeinek krt, de ez a legtbb esetben inkbb elnys, mint htrnyos. Radsul van arra is lehetsg, hogy ellenrztt mdon kiterjesszk a Smarty lehetsgeit, teht a problma thidalhat.
Knnyen kezelhet s fenntarthat

A dizjnernek nem kell a PHP bonyolult szintaxisval megismerkedni, helyette egy (a HTML-hez sok tekintetben kzelebb ll) sablon-nyelvet kell alkalmazni.
Vltoz mdosts
A hasznlt vltozk rtkt knnyedn mdosthatjuk a felhasznlsuk eltt. Pldul nagybetss konvertls, csonkts, szkzk szrse stb.
Sablon fggvnyek
A sablon fggvnyek segtsgvel sszetettebb lehetsgeket is kap a dizjner az egyszer megjelents helyett.
88 http://www.smarty.net/
212. oldal Szrk
A programoz teljesen kontroll alatt tudja tartani a kimenetet. Ezt el- vagy utszrk segtsgvel teheti meg. Pl. a 4.7.4. fejezetben bemutatott e-mail cm elrejts csak akkor mkdkpes, ha a @ karakter nem jelenik meg a kimenetben. Egy utszrvel meg lehet oldani, hogy az esetleg a szvegben lev @ karaktereket automatikusan a korbbiakban lertaknak megfelelen elkdolja.
Kiegsztsek
Az alaprendszerhez sokfle kiegszt tlthet le a webrl, s alkalmazhat, vagy akr magunk is fejleszthetnk kiegsztt.
Munkafolyamat Smartyval
A dizjner s a programoz sablonrendszer hasznlatval nagyjbl a kvetkez mdon dolgozhatnak a kvetelmnyspecifikci elksztse utn: A dizjner minden egyes oldaltpushoz kszt egy tisztn HTML mintt. A programoz PHP-ben megvalstja az alkalmazs logikt. Kettjk kommunikcijbl elll a dizjn s az alkalmazs logika csatolfellete (interfsze), ami a vltozk formjban megjelen adatok s a dizjn-elemek kapcsolatt fejezi ki. Ez utn a kisebb (vagyis az interfszt nem befolysol) vltozsok keretn bell a programoz s a dizjner ismt egymstl fggetlenl vgezheti a feladatt.
Smarty alapok
A Smarty f clja az alkalmazs logika s a prezentcis logika sztvlasztsa. Nzznk pldaknt egy cikkeket publikl honlapot. Az egyes cikkeket megjelent oldalak szerkezete hasonl lesz. Lesz az oldalnak fejlce, lblce, cme, rja, megjelensi dtuma, tartalma stb. rdemes megfigyelni, hogy az elz plda logikailag fogalmazta meg az oldalt alkot elemeket. Nem beszlt table s p elemekrl, se a megjelents vizulis, eszttikai rszrl. Rr majd a dizjner azzal foglalkozni, hogy ez HTML (vagy akr RSS, WAP) kd szintjn hogyan fog megvalsulni. A Smarty a sablon fjl alapjn egy PHP llomnyt fog ellltani. Mivel ez kltsges mvelet, gyorstrazza az eredmnyt, hogy a ksbbi krsek gyorsabban kiszolglhatk legyenek.
213. oldal
Telepts
A Smarty magja
Ha letltjk a Smarty legfrissebb vltozatt a letltsi oldalrl 89, akkor egy tmrtett llomnyt tallunk. Ennek libs alknyvtra tartalmazza a rendszer magjt. Ennek a knyvtrnak a rendszernkbe msolsa jelenti a telepts els lpst. A knyvtr tartalmt soha ne mdostsuk! A Smarty libs knyvtrban tallhat llomnyait az alkalmazsunkbl el kell tudni rnnk. ppen ezrt vagy egy globlisan elrhet helyre, vagy pl. a portl gykrmappjba clszer helyeznnk. Fontos szerepet tlt mg be a SMARTY_DIR vltoz is. Szoks szerint ez a vltoz tartalmazza a Smarty telepts helyt. Nzzk meg a lehet legegyszerbb pldt:
require_once('Smarty.class.php'); $smarty = new Smarty();
A Smarty hasznlatrl csak akkor beszlhetnk, ha ltrehozunk egy pldnyt a Smarty osztlybl.
Tovbbi knyvtrak
A Smarty szmra tovbbi ngy knyvtrra lesz mg szksg: templates/ templates_c/ configs/ cache/ Ezek a knyvtrak tipikusan a weboldalunk gykrmappjba kerlnek. A templates s configs knyvtrak llomnyait tipikusan a dizjner hozza ltre: sablonok s konfigurcis llomnyok kerlnek beljk. A webszervert futtat felhasznlnak rsi joggal kell rendelkezni a templates_c s cache knyvtrakra, ugyanis ezekben trolja a sablon llomnyokbl fordtott PHP llomnyokat, valamint a gyorstrazott HTML oldalainkat.
A Smarty belsleg ktszint tmeneti trolst tartalmaz. Az els szintet az jelenti, hogy amikor elszr tekin tnk meg egy sablont, a Smarty tiszta PHP kdra fordtja azt, s menti az eredmnyt. Ez a trolsi lps meg akadlyozza, hogy a sablonkdokat az els krelem utn is minden alkalommal fel kelljen dolgozni. A msodik szint, hogy a Smarty az ppen megjelentett (jellemzen HTML) tartalom tmeneti trolst is megvalstja.
89 http://www.smarty.net/download
214. oldal
Hello Vilg!
Eljutottunk az els teljes, mkd alkalmazsunkhoz. Nzzk elszr a sablon llomnyt (templates/index.tpl):
<html> <head> <title>Info</title> </head> <body> <pre> User Information: Name: {$name} Address: {$address} </pre> </body> </html>
A sablont megjelent kd:

require_once(SMARTY_DIR . 'Smarty.class.php'); $smarty = new Smarty(); $smarty->assign('name','Nagy Gusztv'); $smarty->assign('address', 'F u. 15.'); $smarty->display('index.tpl');
A pldn mr ltszik is a sablonelv fejleszts legalapvetbb eleme: a sablon oldal {$name} s {$address} vltozjt szeretnnk kicserlni az aktulis nvre s cmre. Erre a smarty objektum assign metdusnl lthatunk kt hozzrendelst: az objektum tulajdonkppen gyjti az ilyen tpus hozzrendelseket. A sablon llomny feldolgozsa s a sablonvltozk beillesztgetse trtnik meg a display metdus segtsgvel. A kimenet a kvetkez lesz:
<html> <head> <title>Info</title> </head> <body> <pre> User Information: Name: Nagy Gusztv Address: F u. 15. </pre> </body> </html>
Hol legyen a logika?

Jelen knyvben nem rszletezzk, hogyan, de a Smarty-ban elgazsokat, ciklusokat is hasznlhatunk. Egyesek a vezrlsi szerkezetek ellen azzal rvelhetnek, hogy magban a sablonban egyltaln nem ajnlott mkdsi logikt elhelyezni. Az nem biztos, hogy j, ha a megjelents-
215. oldal
bl teljesen kivonjuk a logikt, vagy azt jelenti, hogy a kimenet ellltshoz valjban nem tartozik logika. A megjelentsi kdnak az alkalmazsba helyezse pedig nem jobb, mint az alkalmazslogika beptse a megjelentsi kdba. A sablonrendszerek hasznlatnak ppen az a clja, hogy mindkt emltett helyzetet elkerljk. Mindazonltal a sablonokban logikt elhelyezni sok veszlyt rejt. Minl tbb szolgltats rhet el a sablonokban, annl nagyobb a ksrts, hogy maga az oldal tartalmazzon nagy mennyisg kdot. Amg ez a megjelentsre korltozdik, tartjuk magunkat az MVC minthoz. Az MVC nem arrl szl, hogy a nzetbl eltvoltunk minden logikt a cl az, hogy az terletre jellemz mkdsi kdot vegyk ki belle. A megjelentsi s mkdsi kd kztt azonban nem minden esetben knny klnbsget tenni. Szmos fejleszt szmra nem csupn az a cl, hogy elvlasszk a megjelentst az alkalmazstl, hanem az, hogy a megjelentsi kd is minl kisebb legyen. A Smarty ezt a problmt nem oldja meg.
3.11.2. A PHP mint sablonnyelv

Vitathatatlan, hogy a sablonrendszerek nagyon fontos szereket tltenek be a webfejlesztsben. A Smarty mellett sok kisebb rendszer is ltezik, amelyek a Smarty bonyolultsga, vagy ppen egy ms tpus (pl. XML alap) sablonnyelv ignye miatt ms utakon jrnak. Vannak azonban olyan fejlesztk is kztk a szerz is , akik szerint olyan esetben, amikor a dizjner ismeri a PHP nyelvet, felesleges lehet egy kln sablonnyelvet megtanulni s alkalmazni. Ezzel nem a sablon logika klnvlasztsnak, hanem csupn a kln sablon nyelv szksgessgt krdjelezzk meg. A tanuls szempontjbl teht igenis nagyon hasznos, ha megismerjk pl. a Smartyt, de ezutn akr egy sablonnyelv, akr a PHP is alkalmas lehet a feladat megoldsra, ha a fejlesztk fegyelmezetten kln tudjk vlasztani a megjelentsi s alkalmazsi kdot. rdemes itt megjegyezni, hogy pl. a Drupal s a Wordpress tartalomkezel rendszerek estn is lehetsg van PHP alap sablon (vagy ms nven smink) kezelsre. Van azonban arra is plda90, hogy tartalomkezel rendszer a Smartyt hasznlja beptett mdon.
Egy minimlis megolds

A 3.6.2. fejezet index.tpl.php sablon llomnya mr megmutatta, mi a legegyszerbb mdja a PHP sablonnyelvknt val hasznlatnak. A vltozk mr lteznek, amikor include-oljuk a sablon llomnyt.
90 A legjelentsebb plda: CMS Made Simple. http://www.cmsmadesimple.hu/
216. oldal
A kimenet pufferelse
A kvetkez plda megrtshez szksgnk lesz a kimenet pufferels mkdsnek megrtsre. Ahogy azt mr tbbszr emltettk, a HTTP header kikldse utn automatikusan elkldsre kerlnek a kliens oldalra a sznt (kimeneti) karakterek. Bizonyos esetekben praktikus lehet ezt a folyamatot manipullni. A kimenet ilyenkor egy tmeneti pufferben gylik, ahonnan a pufferels befejezsvel tnyleg elkldjk a kimenetet a kliens oldalra, esetleg eldobjuk, ha nincs r szksgnk. A tlzott hasznlata nem igazn j programozi magatartst alakt ki, de tudatos alkalmazsa hasznos s megengedhet.
Sablon osztly
Az elz minimlis pldnl valamivel tbbet nyjt a kvetkez sablon osztly. Ez az osztly massassi91 megoldsa alapjn egy kiss testre szabott megolds.
class Sablon { var $dir = 'sablon/';
A sablon llomnyok helye a fjlrendszerben.

var $fajl; var $cserek = array();
A sablon fjl neve s a cserlend prok.

function Sablon ($f) { $this -> fajl = $f; }
A konstruktor mindssze a fjl nevt trolja el.

function berak($nev, $ertek) { if (is_object($ertek)) { $this -> cserek[$nev] = $ertek->cserel(); } else { $this -> cserek[$nev] = $ertek; } }
A leggyakrabban hasznlt metdus, hiszen ezzel definilhatk a cserlend prok.

function berakTomb($tomb) { if (is_array($tomb)) { $this -> cserek = ($this -> cserek) + $tomb; } }
Hasznos fggvny, ha a cserlend prok mr eleve tmbben helyezkednek el.

91 http://www.massassi.com/php/articles/template_engines/
function cserel() { extract($this -> cserek); $cimsor; ob_start(); include($this -> dir . $this -> fajl . '.tpl.php'); $tartalom = ob_get_contents(); ob_end_clean(); return $tartalom; }
217. oldal
A tnyleges sablon mveletet, a cserk megvalstst vgzi. rdemes megfigyelni, menynyire egyszerv teszi a kdot a kimenet pufferelse (ob_* fggvnyek).
function torol() { $this -> cserek = array(); } }
Vgl a trl fggvny lehetv teszi, hogy jabb sablon objektum pldnyostsa nlkl is jra hasznlhassuk a sablonllomnyunkat, pl. tbb azonos sablon alapjn gyrtott blokk generlsra.
Blogbejegyzs
Nzznk egy konkrt pldt a nagygusztav.hu oldal 2006-os verzijbl. A kvetkez sablon llomny (ujBejegyzesekBlokk.tpl.php) egy blogbejegyzs elzetest fog kszteni a kezdoldalra.
<? /* Csak az elzetes megjelentsre, hozzszlsok szmval */ ?> <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 bejegyzs»</a> <? }?>
218. oldal
<? if ($lehethozza) { ?> Eddig <? if ($hozzaszolasSzam == 0) { ?> nincs <? } else {?> <?= $hozzaszolasSzam ?> <? } ?> <a href="<?= $index ?>?<?= $blognev ?>/<?= $url ?>#hozza">hozzszls</a>. <? }?> </p> <? } ?> </div>
A kvetkez kd hasznlja a sablont:

$ujBejegyzesek = $this -> adatbazis -> ujBejegyzesek(10); foreach ($ujBejegyzesek as $k => $e) { $ujBejegyzesek[$k]['blogcim'] = $this -> joOldalak[$e['blognev']]['cim']; } $sablon = new Sablon('ujBejegyzesekBlokk'); $sablon -> berakTomb($GLOBALS['portal_adatok']); $sablon -> berak('ujBejegyzesek', $ujBejegyzesek); $szoveg .= $sablon -> cserel();
Ezzel el is jutottunk egy jl hasznlhat sablonkezels alapjaihoz. Vgl Medovarszki Mihly: PHP, mint sablonmotor egyszeren cm cikkt92 is ajnljuk a tma kapcsn.
3.12. Tartalomkezel rendszerek

Ma a weboldal-tulajdonosok ltalban fontosnak tartjk, hogy a weboldaluk tartalmt, st akr a strukturlis felptst is maguk tudjk kezelni, mindenfle fejleszti beavatkozs nlkl. Ilyen esetekben j megkzelts lehet a tartalomkezel rendszerek alkalmazsa. A Wikipdia93 szerint a tartalomkezel rendszer (angolul Content Management System, CMS) olyan szoftverrendszer, amely nem strukturlt informcik, mint pldul az internetes portlok, akr tbb felhasznl ltali elksztst, kezelst, s trolst segti. Tovbb gondoskodik a tartalmak strukturlt megjelentsrl, statisztikk ksztsrl, kiegszt funkcik integrlsrl. Ma mr sokszor nincs arra szksg, hogy sajt webalkalmazs, vagy tartalomkezel rendszer fejlesztsvel elgtsk ki a megrendel ignyeit. Hiszen vannak nylt forrs, nagyszeren bevlt tartalomkezel rendszerek. (A szerz a Drupalt94 ajnlja a keresk szmra,
92 http://medovarszki.blog.prog.hu/archives/10-PHP,-mint-sablonmotor-egyszeruen.html 93 http://hu.wikipedia.org/wiki/Tartalomkezel_rendszer 94 Http://drupal.hu
219. oldal
s a Drupal 6 alapismeretek95 cm knyvt.) De sok esetben az is j megolds, ha egy ltalnos cl s nagy tuds (ezzel egytt nagyobb erforrs-igny) rendszer helyett egy pehelysly, az adott feladatra tervezett CMS-t hasznlunk. Jelen fejezet clja, hogy egy rvid betekintst nyjtson a tartalomkezel rendszerek fejlesztsbe. Erre a clra Matt Doyle: Build a CMS in an Afternoon with PHP and MySQL cm nagyszer cikkt96 vesszk alapul. A forrskd letlthet Matt honlapjrl is. A fejezet sorn nhny alapvet tovbbfejlesztsi lehetsgre is ki fogunk trni.
3.12.1. Clok
Kezdjk a clok megfogalmazsval. A mini tartalomkezel rendszernknek a kvetkezket kell tudnia. A publikus fellet (front end): Kezdoldal az 5 legfrissebb cikkel Listz oldal az sszes cikkel Egy cikk megtekintsre szolgl oldal Az adminisztrcis fellet (back end): Adminisztrtor belps, kilps Cikkek listja j cikkek listja Ltez cikk szerkesztse j cikk ltrehozsa Az egyes cikkeknek legyen cmk, sszefoglaljuk, trzsk s bekldsi dtumuk. Vgl nhny tovbbfejlesztsi lehetsg: Hozzszlsok lehetsge Ltogatk regisztrcija Tbb szerz kezelse
95 http://nagygusztav.hu/drupal-6-alapismeretek 96 http://www.elated.com/articles/cms-in-an-afternoon-php-mysql/
220. oldal
3.12.2. Adatbzis felptse

Minden alkalmazsnak, gy egy tartalomkezel rendszernek is szksge van arra, hogy az adatokat hossz tvon meg tudjuk rizni. Erre ma a legelterjedtebb megolds a 3.4. fejezetben bemutatott relcis adatbzis-kezelk hasznlata. Az alkalmazsunkat rdemes nll adatbzisba helyezni. Pl. loklis gpen hozzuk ltre a PhpMyAdmin segtsgvel egy cms nev adatbzist a localhost/phpmyadmin webcmen:
58. bra. Adatbzis ltrehozsa Jelen verziban egyetlen articles adattblt hasznlunk, melyben a cikkeket fogjuk trolni. Ennek ltrehozsra hasznlhatjuk a kvetkez SQL parancsot:
CREATE TABLE articles ( id smallint unsigned NOT NULL PRIMARY KEY auto_increment, publicationDate date NOT NULL, title varchar(255) NOT NULL, summary text NOT NULL, content mediumtext NOT NULL );
Nzzk sorba a mezk jelentst: Az id mezt minden olyan tblnl ltre szoks hozni elsdleges kulcsknt, amelyik alapvet adattrolsra szolglt. (Pl. a tbb-tbb kapcsolatot megvalst tblknl nem szoks.) A jelen verzinkban az id-nek mg nincs akkora jelentsge, de ha pl. a hozzszlsok lehetsgt is be akarjuk pteni, akkor a hozzszlsok trolsra szolgl comments tblban egy articles_id nev mezt vezethetnk be kls kulcsknt.
221. oldal
A publicationDate csak a kzzttel dtumt tartalmazza. Ha pontos idpontot is szeretnnk trolni, a datetime tpust rdemes hasznlnunk. A title mez a cikk cmt fogja trolni. Ezt a listz oldalakon, de az egyes cikkek oldalain is fel fogjuk hasznlni. A summary mez a front-end listz oldalakon fog a cm alatt megjelenni. A content mez a bejegyzs szvegt tartalmazza. Tbb lehetsgnk is van, hogy a tblnkat ltrehozzuk.
SQL futtats
A localhost/phpmyadmin cmen kivlasztjuk az adatbzisunkat, majd az SQL fln futtatjuk az SQL parancsot (59. bra)
59. bra. SQL parancs futtatsa
Varzsl hasznlata
A localhost/phpmyadmin cmen kivlasztjuk az adatbzisunkat, majd a Szerkezet fln az j tbla nevt s a Mezk szmt megadva elindtjuk a varzslt (60. bra). Mivel itt igen sok lehetsg van, csak megfelel hozzrts esetn vlasszuk ezt a mdot.
222. oldal
60. bra. Adattbla ltrehozsa varzsval Az 61. bra a mezk belltsait mutatja. (Az bra csak a belltand oszlopokat tartalmazza.)
61. bra. Tbla mezinek ltrehozsa
PHP futtats
A 3.4.2. forrskdjnak megfelelen futtathatjuk is az SQL parancsot.
3.12.3. Konfigurci
Webalkalmazsok ksztsnl ltalban ltre szoktunk hozni egy konfigurcis llomnyt, ahol a futtatsi krnyezet alap informciit helyeznk el a programunk szmra. Ha esetleg kltztetni kell az alkalmazst, elegend ehhez az llomnyhoz hozznylni.

A config.php tartalma a kvetkez legyen. A fejleszts idejre kapcsoljuk be a figyelmeztetseket:
ini_set( "display_errors", true );
223. oldal
A kvetkez define utastsok konstansokat hoznak ltre, hogy a forrskdok tovbbi rszben mr ne kelljen vltoztatni egy esetleges szerver kltztets esetn. Elszr az adatbzishoz kapcsolds rszletei kvetkeznek. Felhasznlnv s jelsz az XAMPP alaprtelmezse szerint:
define( "DB_DSN", "mysql:host=localhost;dbname=cms" ); define( "DB_USERNAME", "root" ); define( "DB_PASSWORD", "" );
A kvetez konstansok az osztlyokat s a sablonokat tartalmaz knyvtrak helyt definiljk:

define( "CLASS_PATH", "classes" ); define( "TEMPLATE_PATH", "templates" );
Mennyi cikk legyen a cmlapon:

define( "HOMEPAGE_NUM_ARTICLES", 5 );
Az adminisztrtor felhasznlneve s jelszava:

define( "ADMIN_USERNAME", "admin" ); define( "ADMIN_PASSWORD", "mypass" );
Abban az esetben, ha tbb felhasznlt is szeretnnk megklnbztetni, akkor majd egy users nev tblt rdemes hasznlni a felhasznlk adatainak trolsra.
Biztonsgi szempontbl nem kzvetlenl a jelszt, hanem valamilyen kdolt vltozatt szoks trolni. Ma a legelterjedtebb megolds az md5 fggvny hasznlata, esetleg tovbbi komplexitsnvel, egyedi tletek beptsvel. Ezekre szp pldkat lthatunk az md5 fggvny dokumentcijban97. Amikor a belpskor bekrjk a jelszt, ugyanazt a kdolst vgezzk el a kapott jelszval, s vgl ezt hason ltjuk a trolt kdolt alakkal. Egyezs esetn a jelsz helyessgt biztosnak vehetjk.
Vgl az Article osztly defincijt futtatjuk. Erre minden esetben szksg lesz a jelenlegi verziban:
require( CLASS_PATH . "/Article.php" );
3.12.4. Az Article osztly

A cikkek kezelse, az adatbzissal val kommunikci egyetlen osztly felelssge. Ez az osztly fogja megoldani egy j cikk esetn az adatbzisba trtn mentst, a cikkek lekrst adatbzisbl, stb.
97 http://php.net/manual/en/function.md5.php
224. oldal
A ksbbi front-end s back-end kd ezt az osztlyt fogja hasznlni.
Adattagok
A classes/Article.php kdja:
<?php class Article
Az osztly adattagjai az adatbzis mezinek felelnek meg:

public public public public public $id = null; $publicationDate = null; $title = null; $summary = null; $content = null;
Magyarzatra egyedl az $id szorul. Ennek rtke arra utal, hogy az objektumnak megfelel rekord az adatbzisban mr ltezik-e. Akkor lesz null-tl eltr, ha a rekord ltezik.
A konstruktor
A konstruktor vagy az adatbzisbl, vagy a felhasznltl szrmaz adatokat alapul vve hoz ltre egy objektumot. Az adatokat a $data tmbben kapja, s megfelel ellenrzst vgez rajtuk.
public function __construct( $data=array() ) { if ( isset( $data['id'] ) ) $this->id = (int) $data['id']; if ( isset( $data['publicationDate'] ) ) $this->publicationDate = (int) $data['publicationDate']; if ( isset( $data['title'] ) ) $this->title = preg_replace ("/[^\.\,\-\_\'\"\@\?\!\:\$ a-zA-Z0-9()]/", "", $data['title'] ); if ( isset( $data['summary'] ) ) $this->summary = preg_replace ( "/[^\.\,\-\_\'\"\@\?\!\:\$ a-zA-Z0-9()]/", "", $data['summary'] ); if ( isset( $data['content'] ) ) $this->content = $data['content']; }
Az rlapbl szrmaz adatokkal hvjuk a konstruktort:

public function storeFormValues ( $params ) { $this->__construct( $params );
Ha a dtum beviteli mez ki lett tltve, akkor a szvegbl dtumot prblunk ellltani:
225. oldal
if ( isset($params['publicationDate']) ) { $publicationDate = explode ( '-', $params['publicationDate'] ); if ( count($publicationDate) == 3 ) { list ( $y, $m, $d ) = $publicationDate; $this->publicationDate = mktime ( 0, 0, 0, $m, $d, $y ); } }
Egy cikk betrlse

A getById fggvny az $id alapjn tlti be az adatbzis megfelel rekordjt egy j objektumba.
public static function getById( $id ) {
A PDO (PHP Data Objects 98) segtsgvel adatbzis tpustl fggetlenl tudjuk a kommunikcit megvalstani. A $conn objektum a PDO osztly egy pldnya lesz.
$conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD );
Az SQL parancs sszelltsnl igen fontos, hogy a vltoz rszek ne nyers adatknt, hanem ellenrztten kerljenek az adatbzisba. Itt egsz szmknt a preparlt lekrdezs hasznlata szp megolds:
$sql = "SELECT *, UNIX_TIMESTAMP(publicationDate) AS publicationDate FROM articles WHERE id = :id"; $st = $conn->prepare( $sql ); $st->bindValue( ":id", $id, PDO::PARAM_INT );
A preparlt lekrdezs ksz a futtatsra (execute). Lekrjk az els tallatot a fetch fggvnnyel. (Itt az SQL lekrdezsnek csak egy rekord kimenete lehet.)
$st->execute(); $row = $st->fetch(); $conn = null;
Vgl ltrehozzuk az objektumot:

if ( $row ) return new Article( $row ); }
Cikkek listzsa
A getList fggvny lekri a cikkek listjt az adatbzisbl. A kt paramtere opcionlis. Az els a cikkek darabszmt korltozza, a msodik a rendezettsgre van hatssal.
public static function getList( $numRows=1000000, $order="publicationDate DESC" ) { $conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD );
98 http://php.net/manual/en/book.pdo.php
226. oldal
Az SQL lekrdezs sszelltsnl a mysql_escape_string fggvnyt hasznljuk az SQL injection tmadsok elkerlse rdekben.
$sql = "SELECT SQL_CALC_FOUND_ROWS *, UNIX_TIMESTAMP(publicationDate) AS publicationDate FROM articles ORDER BY " . mysql_escape_string($order) . " LIMIT :numRows"; $st = $conn->prepare( $sql ); $st->bindValue( ":numRows", $numRows, PDO::PARAM_INT ); $st->execute();
A $list tmbbe fogjuk gyjteni az egyes cikkek objektumait.

$list = array(); while ( $row = $st->fetch() ) { $article = new Article( $row ); $list[] = $article; }
Vgl lekrdezzk a tallt sorok szmt, lezrjuk az adatbzis-kapcsolatot, s egy tmbknt visszaadjuk az objektumokat s a tallatok szmt.
$sql = "SELECT FOUND_ROWS() AS totalRows"; $totalRows = $conn->query( $sql )->fetch(); $conn = null; return ( array ( "results" => $list, "totalRows" => $totalRows[0] ) ); }
Egy j cikk beszrsa

Az insert fggvny egy objektum adatait rja ki az adatbzisba.
public function insert() {
Ha az objektum mr rendelkezik $id-vel, akkor nem szabad beszrni, mert az $id-t csak adatbzisbl kaphatta, s akkor nem szabad jbl beszrni.
if ( !is_null( $this->id ) ) trigger_error ( "Article::insert(): Attempt to insert an Article object that already has its ID property set (to $this->id).", E_USER_ERROR );
sszelltjuk s lefuttatjuk az SQL lekrdezst.

$conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD ); $sql = "INSERT INTO articles ( publicationDate, title, summary, content ) VALUES ( FROM_UNIXTIME(:publicationDate), :title, :summary, :content )"; $st = $conn->prepare ( $sql ); $st->bindValue( ":publicationDate", $this->publicationDate, PDO::PARAM_INT ); $st->bindValue( ":title", $this->title, PDO::PARAM_STR ); $st->bindValue( ":summary", $this->summary, PDO::PARAM_STR ); $st->bindValue( ":content", $this->content, PDO::PARAM_STR ); $st->execute();

Vgl a beszrskor kapott id-t eltrioljuk.
$this->id = $conn->lastInsertId(); $conn = null; }
227. oldal
Cikk mdostsa
Az update fggvny segtsgvel az objektum llapotban trtnt vltozsokat az adatbzisba is visszavezethetjk. Ha az id mg nincs kitltve, akkor nincs a cikk az adatbzisban, nincs mit fellrni:
public function update() { if ( is_null( $this->id ) ) trigger_error ( "Article::update(): Attempt to update an Article" . " object that does not have its ID property set.", E_USER_ERROR );
Adatbzis kapcsolat, SQL parancs sszelltsa hasonlan a korbbi pldkhoz:

$conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD ); $sql = "UPDATE articles SET" . " publicationDate=FROM_UNIXTIME(:publicationDate)," . " title=:title, summary=:summary, content=:content" . " WHERE id = :id"; $st = $conn->prepare ( $sql ); $st->bindValue( ":publicationDate", $this->publicationDate, PDO::PARAM_INT ); $st->bindValue( ":title", $this->title, PDO::PARAM_STR ); $st->bindValue( ":summary", $this->summary, PDO::PARAM_STR ); $st->bindValue( ":content", $this->content, PDO::PARAM_STR ); $st->bindValue( ":id", $this->id, PDO::PARAM_INT ); $st->execute(); $conn = null;
Cikk trlse
A delete fggvny trli a cikket az adatbzisbl az id alapjn.
public function delete() { if ( is_null( $this->id ) ) trigger_error ( "Article::delete(): Attempt to delete an Article" . " object that does not have its ID property set.", E_USER_ERROR ); $conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD ); $st = $conn->prepare ( "DELETE FROM articles WHERE id = :id LIMIT 1" ); $st->bindValue( ":id", $this->id, PDO::PARAM_INT ); $st->execute(); $conn = null; }
} ?>
Ezzel az Article osztly kdjt ttekintettk.
228. oldal
3.12.5. Front-end
Nzzk meg, hogyan tallkozik a ltogat a weboldal publikus rszvel. A kvetkez index.php llomny pt az Article osztlyra, s a kimenetet sablonok segtsgvel lltja el. Elszr is a Front Controller mintt (3.6.2. fejezet) valstja meg:
<?php require( "config.php" ); $action = isset( $_GET['action'] ) ? $_GET['action'] : ""; switch ( $action ) { case 'archive': archive(); break; case 'viewArticle': viewArticle(); break; default: homepage(); }
Archvum
URL: index.php?action=archive Az archive fggvny betlti az sszes cikk bevezet adatait az Article::getList fggvnnyel, majd az archive.php sablont hvja be (62. bra).
function archive() { $results = array(); $data = Article::getList(); $results['articles'] = $data['results']; $results['totalRows'] = $data['totalRows']; $results['pageTitle'] = "Article Archive | Widget News"; require( TEMPLATE_PATH . "/archive.php" ); }
229. oldal
62. bra. Archv cikkek
Cikk megjelentse
URL plda: index.php?action=viewArticle&articleId=7 A viewArticle fggvny egy cikk megjelentst (63. bra) oldja meg, ha megfelel GET paramtert kapott. Klnben a cmlapot jelenti meg.
function viewArticle() { if ( !isset($_GET["articleId"]) || !$_GET["articleId"] ) { homepage(); return; } $results = array(); $results['article'] = Article::getById( (int)$_GET["articleId"] ); $results['pageTitle'] = $results['article']->title . " | Widget News"; require( TEMPLATE_PATH . "/viewArticle.php" ); }
230. oldal
63. bra. Cikk megjelentse
A cmlap
URL: index.php A homepage fggvny a cmlap szmra kri le legfrissebb nhny cikk adatait, s jelenti meg a homepage.php sablon segtsgvel (64. bra).
function homepage() { $results = array(); $data = Article::getList( HOMEPAGE_NUM_ARTICLES ); $results['articles'] = $data['results']; $results['totalRows'] = $data['totalRows']; $results['pageTitle'] = "Widget News"; require( TEMPLATE_PATH . "/homepage.php" ); }
231. oldal
64. bra. A cmlap nhny cikkel A ltogatk lehetsgeit ezzel ttekintettk.
3.12.6. Back-end
Az adminisztrtori fellet hasonlan mkdik a publikus fellethez. Az admin.php vgzi a vezrlst. Fontos eltrs a felhasznl kezelse, a kilps, belps, stb. A felhasznl belpett llapott a username munkamenet vltoz jelzi.
<?php require( "config.php" ); session_start(); $action = isset( $_GET['action'] ) ? $_GET['action'] : ""; $username = isset( $_SESSION['username'] ) ? $_SESSION['username'] : "";
Ha a felhasznl nincs mg belpve, s nem a kilps vagy belps folyamatban van, akkor tirnytjuk a belptetsre, a login rlapra.
if ( $action != "login" && $action != "logout" && !$username ) { login(); exit; }
Ha a felhasznl mr belpett, akkor foglalkozunk a GET paramter alapjn a krsvel.
232. oldal
switch ( $action ) { case 'login': login(); break; case 'logout': logout(); break; case 'newArticle': newArticle(); break; case 'editArticle': editArticle(); break; case 'deleteArticle': deleteArticle(); break; default: listArticles(); }
Belptets
URL: admin.php?action=login A login fggvny vgzi az rlap megjelentst (65. bra) s feldolgozst is.
function login() { $results = array(); $results['pageTitle'] = "Admin Login | Widget News";
65. bra. Login rlap Ha a ltogat mr visszakldte az rlapot, akkor ellenrizzk a nevet s jelszt. Ha korrekt adatokat kapott, a munkamenetbe bejegyzi a felhasznlnevet, s tkldi az adminisztrcis oldalra.
if ( isset( $_POST['login'] ) ) { if ( $_POST['username'] == ADMIN_USERNAME && $_POST['password'] == ADMIN_PASSWORD ) { $_SESSION['username'] = ADMIN_USERNAME; header( "Location: admin.php" ); }

Ha nem jk az adatok, hibazenet ksretben jelenti meg az rlapot.
else { $results['errorMessage'] = "Incorrect username or password. Please try again."; require( TEMPLATE_PATH . "/admin/loginForm.php" ); }
233. oldal
Elszr resen jelenti meg a belptet rlapot a ltogat eltt:

else { require( TEMPLATE_PATH . "/admin/loginForm.php" ); }}
Kilptets
URL: admin.php?action=logout A kilps linkre kattintva a logout fggvny trli a felhasznl nevt a munkamenetbl, gy a tovbbiakban nem tekintjk belpett felhasznlnak.
function logout() { unset( $_SESSION['username'] ); header( "Location: admin.php" ); }
j cikk bekldse
URL: admin.php?action=newArticle A newArticle fggvny vezrli a folyamat minden lpst. legelszr a legutols else g fog lefutni, s ltrehozni az res rlapot (66. bra). rdemes megfigyelni, hogy az editArticle.php sablont hasznlja az j cikk bevitelhez is.
234. oldal
66. bra. Cikk bekldse A $results['formAction'] rtke az rlap action paramtereknt lesz felhasznlva. Ebbl tudja majd ksbb, hogy nem szerkeszteni, hanem bekldeni szeretnnk egy j cikket.
function newArticle() { $results = array(); $results['pageTitle'] = "New Article"; $results['formAction'] = "newArticle";
Ha menthetek az adatok, menti az insert fggvnnyel, majd tirnytja a

if ( isset( $_POST['saveChanges'] ) ) { $article = new Article; $article->storeFormValues( $_POST ); $article->insert(); header( "Location: admin.php?status=changesSaved" ); }
Ha a Cancel gombra kattint, akkor eldobjuk az oldalt.

elseif ( isset( $_POST['cancel'] ) ) { header( "Location: admin.php" ); }
Vgl itt kvetkezik az res rlap, amit elszr lt az adminisztrtor.

else { $results['article'] = new Article; require( TEMPLATE_PATH . "/admin/editArticle.php" ); } }
235. oldal
Cikk szerkesztse
URL plda: admin.php?action=editArticle&articleId=1 Az editArticle fggvny a megadott kd cikket engedi szerkeszteni a 66. bra rlapjn. termszetesen ekkor a cm ms, s az rlap mezk eleve kitltttek.
function editArticle() { $results = array(); $results['pageTitle'] = "Edit Article"; $results['formAction'] = "editArticle";
Ha mr visszakldte a ltogat az rlapot mentsi szndkkal, elszr betltjk az adatbzisbl a jelenlegi llapotot. Sikertelensg esetn hiba oldalra kldjk az adminisztrtort. Egybknt mentnk.
if ( isset( $_POST['saveChanges'] ) ) { if ( !$article = Article::getById( (int)$_POST['articleId'] ) ) { header( "Location: admin.php?error=articleNotFound" ); return; } $article->storeFormValues( $_POST ); $article->update(); header( "Location: admin.php?status=changesSaved" ); }
Ha a Cancel gombra kattint, akkor eldobjuk az oldalt.

elseif ( isset( $_POST['cancel'] ) ) { header( "Location: admin.php" ); }
Vgl itt kvetkezik az res rlap, amit elszr lt az adminisztrtor.

else { $results['article'] = Article::getById( (int)$_GET['articleId'] ); require( TEMPLATE_PATH . "/admin/editArticle.php" ); } }
Cikk trlse
URL: admin.php?action=deleteArticle&articleId=1 A deleteArticle fggvny trli a megkapott azonostval rendelkez cikket. Ellenrzsknt itt is betlti a cikkel az adatbzisbl.
236. oldal
function deleteArticle() { if ( !$article = Article::getById( (int)$_GET['articleId'] ) ) { header( "Location: admin.php?error=articleNotFound" ); return; } $article->delete(); header( "Location: admin.php?status=articleDeleted" ); }
Cikkek listzsa
URL: admin.php A listArticles fggvny a listzs mellett adminisztrcis zeneteket s llapotinformcikat is megjelent.
function listArticles() { $results = array(); $data = Article::getList(); $results['articles'] = $data['results']; $results['totalRows'] = $data['totalRows']; $results['pageTitle'] = "All Articles";
Hibazenet esetn megjelenti:

if ( isset( $_GET['error'] ) ) { if ( $_GET['error'] == "articleNotFound" ) $results['errorMessage'] = "Error: Article not found."; }
llapotinformci esetn megjelenti:

if ( isset( $_GET['status'] ) ) { if ( $_GET['status'] == "changesSaved" ) $results['statusMessage'] = "Your changes have been saved."; if ( $_GET['status'] == "articleDeleted" ) $results['statusMessage'] = "Article deleted."; }
Vgl a sablon llomny vgzi a tnyleges kirst.

require( TEMPLATE_PATH . "/admin/listArticles.php" ); } ?>
3.12.7. A kinzet
A mini CMS-nk szp megoldsai kzl nem hinyozhat a jl kitallt sablonkezels sem. Terjedelmi okokbl a sablon llomnyok teljes kdjt nem tudjuk itt idzni. Azok rtelmezst is az olvasra bzzuk. Az eddigi forrskdok ismeretben a sablonok feldolgozsa knnyen ttekinthet.
237. oldal
3.12.8. Nylt forrs tartalomkezel rendszerek

A fejezet eddigi rszben egy vzlatos, de a fontos alapfunkcikat ellt CMS rendszert ismerhettnk meg. Jl ltszik, hogy ez az llapot nagyon messze van meg attl, hogy komplex weboldalakat ksztsnk vele. rdemes azonban megismerkedni a jelenleg is elrhet, azonnal felhasznlhat, nylt forrs tartalomkezel rendszerekkel. A szerz mindenkppen ajnlja bevezetsknt a Drupal 6 alapismeretek99 cm knyvt.
3.13. Keretrendszerek
A tartalomkezel rendszerek mellett igen hasznos megismernnk egy vagy tbb keretrendszer (framework) hasznlatt is. Elszr is nzzk, mi a klnbsg a tartalomkezel rendszerek s a keretrendszerek kztt. Tartalomkezel rendszer vgfelhasznlnak kszl Keretrendszer programoznak kszl
programozsi ismeret nlkl is hasznlhat ers programozsi ismeretek szksgesek gyors megolds, azonnal hasznlhat alap feladatokra van kitallva igen komoly programozi munka szksges hozz brmilyen feladatra alkalmas lehet
13. tblzat. A tartalomkezel rendszerek s keretrendszerek sszehasonltsa
3.13.1. Yii
Terjedelmi okokbl itt csak azt tudjuk ajnlani, hogy a ma egyik legkorszerbbnek szmt, s Mhsz Imre100 nagyszer munkssgnak ksznheten magyar szakirodalommal is rendelkez Yii framework101 tanulmnyozsval kezdje a tmt e sorok olvasja.
Mi is a Yii?102
A Yii egy nagyteljestmny, komponens alap PHP keretrendszer nagyszabs webalkalmazsok fejlesztshez. Maximlis jrahasznosthatsgot tesz lehetv a webprogramozs tern, s a fejlesztsi folyamatot is jelentsen meggyorstja.
99 Letlthet a http://nagygusztav.hu/drupal-6-alapismeretek cmrl. 100 http://mehesz.net/ 101 http://www.yiiframework.com/ 102 http://yiihun.blogspot.com/2011/01/mi-is-yii.html alapjn
238. oldal
A Yii egy ltalnos webprogramozsi keretrendszer, ami voltakppen felhasznlhat brmilyen webalkalmazs fejlesztshez. Mivel knnysly (light-weighted) s kifinomult gyorsttrazsi megoldsokat nyjt, kifejezetten alkalmas nagy forgalm alkalmazsok, gy mint portlok, frumok, tartalomkezelk (CMS), e-kereskedelmi rendszerek, stb. fejlesztsre. Mint a legtbb PHP keretrendszer, a Yii egy MVC kertrendszer. A Yii fellmlja a tbbi a keretrendszert a kvetkezkben: hatkony, kpessgekben gazdag, s vilgosan dokumentlt. A Yii a kezdetektl fogva komoly webalkalmazsok fejlesztsre lett tervezve. Nem egy projekt mellktermke vagy netn harmadik fltl szrmaz kdok sszefrcelt vltozata, hanem a szerzk webalkalmazsok fejlesztsben s vizsglatban szerzett tekintlyes tapasztalatnak eredmnye s a legnpszerbb webprogramozsi keretrendszerek s alkalmazsok tkrzdse.
A Yii megismershet t forrst ajnlunk:

Mhsz Imre: Wiki la Yii
http://weblabor.hu/cikkek/wiki-a-la-yii
A Yii (PHP) keretrendszer, magyarul

http://yiihun.blogspot.com/
4
4. Kliens oldali mkds
A JavaScript egy olyan kliens oldali szkriptnyelv, amely mra lehetv tette az n. RIA (Rich Internet Application), vagyis a hagyomnyos asztali (desktop) alkalmazsokhoz hasonlan hatkony s knyelmes alkalmazsok fejlesztst.
Pldaknt rdemes pl. a Google nhny szolgltatsval megismerkedni. A Gmail, a Google naptr vagy a Google dokumentumok funkcionalitsa a JavaScript nlkl elkpzelhetetlen lenne.
Termszetesen nem minden weboldal kell, hogy RIA legyen. De a weboldalak millii hasznljk rlapok helyes kitltsnek ellenrzshez, stik kezelshez, a felhasznli lmny nvelshez.
4.1. Alapok
Mi a JavaScript? Szkriptnyelv (teht rtelmezett, a bngsz rtelmezi) Interaktivitst (mkdst) ad a weboldalhoz HTML forrskdba pthet, vagy attl elszeparlhat a kd Esemnyek kezelsre alkalmazhat A neve ellenre nincs szoros kapcsolatban a Java nyelvvel C++ s Java szintaxisra alapoz A szabvny lerst az ECMAScript specifikci tartalmazza
4.1.1. Beilleszts a HTML kdba

A script elem segtsgvel tudunk a HTML oldalba szkripteket elhelyezni. Ennek type tulajdonsgban kell megadni, hogy milyen szkriptnyelvet szeretnnk hasznlni.
240. oldal
<html> <body> <script type="text/javascript"> document.write("Hello Vilg!") </script> </body> </html>
Az oldalt bngszben megjelentve a Hello Vilg! szveg jelenik meg a kpernyn. Ha megnzzk a bngszben az oldalunk forrst, akkor lthat, hogy ott az eredeti, a webszerverrl letlttt verzi ltszik, s nem a JavaScript ltal mdostott. Jl ltszik a pldn, hogy JavaScriptben elhagyhatjuk a sorokat lezr pontosvesszket. A document.write mdszert a mai korszer megkzeltsben nem illik alkalmazni. Nagyon egyszer kdok kivtelvel nem szoks a JavaScript kdot a body tagba tenni. sszetettebb mkdst inkbb nll fggvnyek formjban szoktunk elhelyezni a head tagba, vagy mg inkbb kls JavaScript llomnyba. Nzzk meg ezek mdjait:
<head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> ... </body>
A pldn ltszik, hogy a body tag betltdsekor (onload esemny) fog lefutni a message nev fggvny, ami egy figyelmeztet dialgusablakot dob fel. Ha a message fggvny kdjt egy message.js llomnyban helyeztk volna, akkor a head rszbe a kvetkez kd lenne szksges:
<script type="text/javascript" src="message.js"></script>
A noscript tag
Ha a bngsz valamilyen ok miatt nem tudja vgrehajtani a script elem tartalmt (pl. a JavaScript ki van kapcsolva), akkor a noscript elem tartalma fog megjelenni.
<script type="text/javascript"> document.write("A bngsz tmogatja a JavaScriptet.") </script> <noscript> A JavaScript nem tmogatott. </noscript>
4.1. Alapok
241. oldal
4.1.2. Hogyan kezdjnk neki?

A JavaScript tanulshoz nincs felttlenl szksg a webszerver hasznlatra. Ezrt a bngsz (pl. Firefox) s a programozi editor (pl. Komodo Edit) elegend hozz. Az elmentett HTML oldalt ugyangy megnyithatjuk a bngszben, mint korbban a HTML s CSS tanulsa sorn. rdemes azonban arra is gondolni, hogy JavaScript futsa kzben szintaktikai hibt is tallhat a bngsz. Ilyen esetben jl jn, ha a Firefoxot hasznljuk. Itt ugyanis az Eszkzk / Hibakonzol menponttal (67. bra) egy nagyon jl hasznlhat segtsget kapunk. A futsi hibazeneteket is visszakereshetjk, de akr egyszerbb kdot is lefuttathatunk a segtsgvel.
67. bra. Firefox hibakonzol mkdse Ezen kvl a Firebug kiegszt Konzol fle mg tbb szolgltatst nyjt. Termszetesen ms bngszk esetn is elrhetek hasonl megoldsok.
4.1.3. Esemny tulajdonsgok

A bngsz programok lehetsget adnak arra, hogy klnbz (tbbnyire felhasznli) esemnyek esetn szkriptek segtsgvel programozhat tevkenysget lehessen definilni. Pldul egy HTML elemen val kattints hatsra az oldal egy rsze megvltozik.
Ablak esemnyek
Egyedl a body elem esetn hasznlhatk. onload: akkor fut le a szkript, ha az oldal betltdtt onunload: akkor fut le a szkript, ha a felhasznl az oldalt bezrja, vagy ms oldalra lp tovbb
rlap elemek esemnyei

Egyedl rlap elemek esetn hasznlhatk.
242. oldal
onchange: akkor fut le a szkript, ha az elem tartalma megvltozott onsubmit: akkor fut le a szkript, ha az rlap elkldst kri a felhasznl onreset: akkor fut le a szkript, ha az rlap kezdllapotba ll onselect: akkor fut le a szkript, ha az elemet kivlasztja a felhasznl onfocus: akkor fut le a szkript, ha az elem megkapja a fkuszt onblur: akkor fut le a szkript, ha az elem elveszti a fkuszt
Billentyzet esemnyek
onkeydown: akkor fut le a szkript, ha egy billentyt lenyomott a felhasznl onkeyup: akkor fut le a szkript, ha egy billentyt felengedett a felhasznl onkeypress: akkor fut le a szkript, ha egy billentyt lenyomott s felengedett a felhasznl (Folyamatos nyomva tarts esetn nem csak egy, hanem tbb esemny is bekvetkezhet, az opercis rendszer belltsainak fggvnyben.)
Egr esemnyek
onclick: akkor fut le a szkript, ha egrkattints trtnt ondblclick: akkor fut le a szkript, ha dupla egrkattints trtnt onmousedown: akkor fut le a szkript, ha az egrgombot lenyomta a felhasznl onmousemove: akkor fut le a szkript, ha a felhasznl az adott elem felett mozgatja a kurzort onmouseover: akkor fut le a szkript, ha a felhasznl az adott elemre mozgatja a kurzort onmouseout: akkor fut le a szkript, ha a felhasznl az adott elemrl elmozgatja a kurzort onmouseup: akkor fut le a szkript, ha az egrgombot felengedi a felhasznl
4.1.4. Dialgusablakok
Idnknt szksgnk lehet egy honlapon arra, hogy a felhasznl figyelmt rirnytsuk valamilyen fontos informcira, vagy valamilyen reakcit vrjunk egy dialgusablak segtsgvel. Ezek a dialgusablakok tpusuktl fggen ms-ms fggvnnyel rhetk el. Nzzk meg a fontosabb lehetsgeket pldkon keresztl.
4.1. Alapok
243. oldal
zenetablak
Az zenetablak csupn egy egyszer informcit kzl, ezrt az alert fggvnynek is csak egy paramtert kell megadnunk. A felhasznl mindssze tudomsul veheti a kzlt 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>
Az eredmny:
68. bra. zenetablak plda
Krds
Bizonyos esetekben hasznos, ha a felhasznltl kln dialgusablakbl krnk vlaszt egy eldntend krdsre. Bizonyos esetekben ez praktikusabb, mint egy oldalon elhelyezett rlap. rdemes azonban arra is figyelni, hogy csak tnyleg indokolt esetben alkalmazzunk zenetablakokat! A confirm fggvny visszatrsi rtke jelzi, hogy a felhasznl melyik gombot vlasztotta.
244. oldal
<head> <script type="text/javascript"> function disp_confirm() { if (confirm("Krds")) { document.write("OK") } else { document.write("Mgse") } } </script> </head> <body> <form> <input type="button" onclick="disp_confirm()" value="Gomb"> </form> </body>
Az eredmny:
69. bra. Krds ablak plda
Egyszer adatbevitel
A prompt fggvnnyel egy egysoros szveg bevitelt krhetjk a felhasznltl. A fggvny els paramtere az zenet szvege, a msodik pedig az alaprtelmezett vlasz (nem ktelez megadni). Itt is a fggvny visszatrsi rtkn keresztl juthatunk a felhasznl vlaszhoz. (Ha a felhasznl a Mgse gombot vlasztotta, null a visszaadott rtk.)
<head> <script type="text/javascript"> function disp_prompt() { var name=prompt( "Add meg a neved","Nvtelen") if (name!=null && name!=""){ document.write( "Szia " + name + "!") } } </script> </head>
4.1. Alapok
<body> <form> <input type="button" onclick="disp_prompt()" value="Gomb"> </form> </body>
245. oldal
Az eredmny:
70. bra. Egyszer adatbevitel plda
Dialgusablakok dinamikus ltrehozsa

A kvetkez plda a dialgusablakok tesztelst teszi lehetv. Nzzk elszr a mkdst. Bemutatunk egy rlapot, amelyik segtsgvel klnbz dialgusablakok hozhatk ltre, majd a vlasz is rtelmezhet lesz.
71. bra. Dialgusablakok dinamikus ltrehozsa A Tpus segtsgvel a 3 -fle dialgus-tpus kzl vlaszthatunk, az zenet szvege kerl a dialgusablakba, a Vlasz mez pedig a fggvny visszatrsi rtkt jelenti majd meg. Nzzk az rlap kdjt:
246. oldal
<h1>Dialgusablak</h1> <form name="urlap" method="get" action="#"> <fieldset> <legend>Tpus</legend> <label><input checked="checked" type="radio" name="tipus" value="alert">Figyelmeztets</label> <label><input type="radio" name="tipus" value="confirm">Krds</label> <label><input type="radio" name="tipus" value="prompt"> Adatbevitel</label> </fieldset> <fieldset> <legend>Szveg</legend> <label>zenet szvege: <input type="text" name="szoveg" value=""></label> <label>Vlasz: <input type="text" name="valasz" value="Vlasz"></label> </fieldset> <input onclick="uzenet();" type="button" name="gomb" value="Dialgus ablak" ></input> </form>
Az rdemi JavaScript kd a head rszben tallhat uzenet fggvnyben lesz:

function uzenet() { switch (true) { case document.urlap.tipus[0].checked: document.urlap.valasz.value = alert(document.urlap.szoveg.value) break case document.urlap.tipus[1].checked: document.urlap.valasz.value = confirm(document.urlap.szoveg.value) break case document.urlap.tipus[2].checked: document.urlap.valasz.value = prompt(document.urlap.szoveg.value) break } }
Annak vizsglsra, hogy melyik rdigomb is a kivlasztott, a rdigomb checked tulajdonsgnak figyelst kell megoldanunk. rdemes megfigyelni, hogy milyen logika szerint rjk el az egyes rlapelemeket:
document.urlap.tipus[0].checked
A fggvnyek vlasza hasonlan rugalmasan elhelyezhet a vlasz mezben:

document.urlap.valasz.value = alert(document.urlap.szoveg.value)
A 4.7.1. fejezetben mg tovbbi magyarzatot lthatunk e kdok mkdsre.
4.2. Vltozk
247. oldal
4.2. Vltozk
A vltozk olyan trolk, amelyekbe adatokat helyezhetnk. A vltoz rtkt meg tudjuk vltoztatni a szkript futsa sorn. A vltozra a nevvel tudunk hivatkozni, s az rtkt brmikor lekrdezni vagy mdostani. A vltoz nevek (mint ahogy az egsz JavaScript nyelv) kis-nagybet rzkenyek, s betvel vagy alhzs karakterrel kezddnek. A tovbbi karakterek kztt szm is lehet. ltalban treksznk a rvid, de kifejez nevek hasznlatra, pl. carname.
4.2.1. Vltoz deklarci

A var kulcssz segtsgvel a kvetkez mdon tudunk vltozt ltrehozni:
var x; var carname;
Ebben az esetben a vltozknak mg nincs rtke, vagyis a specilis undefined rtket veszi fel. A deklarcit kezdrtkadssal (inicializlssal) egytt is rhatjuk:
var x=5; var carname="Volvo";
Vltozk lettartalma, lthatsga

Ha egy vltozt fggvnyen bell hozunk ltre, a vltoz csak a fggvnyen bell rhet el. Ha kilpnk a fggvnybl, a vltoz megsznik. Ezeket a vltozkat loklis vltozknak nevezzk. Ha tbb klnbz fggvnyben hasznljuk ugyanazt a vltoznevet, akkor azok egymstl fggetlen vltozk lesznek, mindegyik csak abban a fggvnyben lthat, ahol ltrehoztuk. Ha egy vltozt a fggvnyeinken kvl deklarlunk, akkor az oldal minden fggvnybl el tudjuk rni azt. A vltoz akkor jn ltre, amikor deklarljuk, s akkor sznik meg, ha az oldalt bezrja a felhasznl. Az ilyen vltozkat globlis vltozknak nevezzk. Vgl mg egy rdekessg: ha a vltozt a var kulcssz nlkl deklarljuk, akkor minden esetben globlis lesz. Ezt azonban rdemes kerlni.
Konstansok
Tbb ms nyelvhez hasonlan a JavaScriptben is a const kulcsszval van lehetsgnk arra, hogy egy vltoz rtke csak egyszer bellthat legyen.
conts PI = 3.14;
248. oldal
4.2.2. Tpusok
Egyszer pldk esetn nem tl sokat kell foglalkoznunk a tpusok krdsvel, hiszen a JavaScript ms szkriptnyelvekhez hasonlan dinamikus tpusrendszer, vagyis a vltoz aktulis rtke hatrozza meg a tpust, ami brmikor megvltoztathat, pl. egy ms tpus kifejezs rtkadsval. A vltozk tpusa lehet objektum, primitv rtk (undefined, null, boolean, string, number) vagy metdus (fggvny objektum). Nzznk nhny pldt: a 43 vagy 3.14 szm (Number) tpus a true s a false logikai (Boolean) tpus a "Hello" sztring (String) tpus a null s az undefined specilis esetekben szerepet kap rtkek A sztringek tulajdonkppen objektumok, pl. lekrdezhetjk a sztring hosszt:
var s = "alma" var h = s.length
Tpuskonverzi s tpus lekrdezs

A JavaScript nyelvben is szksgnk van idnknt arra, hogy tpuskonverzit hajtsunk vgre. Egy gyakori eset, hogy valamilyen input (pl. a prompt fggvny ltal visszaadott) szveget kell szmm konvertlnunk. Erre a kvetkez megoldst hasznlhatjuk:
var szoveg = "23" var szam = Number(szoveg)
Ha tudni szeretnnk egy vltoz tpust, akkor a typeof opertort hasznlhatjuk:

document.write(typeof(szoveg)) // string document.write(typeof(szam)) // number
Az opertor a kvetkez sztringek valamelyikt adja vissza: number, string, boolean, object, function, undefined.
4.2.3. Literlok
Konkrt rtkeket a kvetkez mdon tudunk JavaScriptben lerni.
Szmok
Egsz szmokat tbbnyire 10-es szmrendszerben adunk meg. Pl.
4.2. Vltozk
var a = 0 var b = 123 var c = -5000
249. oldal
Lebegpontos szmok esetn a tizedes pont nem hagyhat el:

var pi = 3.14 var p = .2
Logikai tpus csak ktfle rtket vehet fel:

var szemuveges = true var kellfolytatni = false
Tmb
Tmb literlok a kvetkez mdon hozhatak ltre: var szamok = [2, 3, 3, , 5] A pldbl ltszik, hogy a tmb elemei kihagyhatk, ezen rtkk undefined lesz.
Szrting
Szringeket idzjelekkel vagy aposztrfokkal tudunk ltrehozni. Hasznlhatak a szoksos specilis karakterek is.
var s1 = 'alma' var s2 = "korte" var s3 = "c:\\temp"
Objektum
Objektum literlok kulcs-rtk prok felsorolsval adhatak meg:
var myRotator = { path: 'images/', speed: 4500, images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"] }
Ez gy a C nyelv struktrinak felel meg, komplexebb pldkat ksbb, a 4.6. fejezetben fogunk megnzni.
4.3. Kifejezsek s opertorok

A kifejezsek valamilyen rtkel lltanak el s/vagy valamilyen mveletet hajtanak vgre. Nzznk kt egyszer opertort, amelyeket gyakran hasznlunk: Az = opertor (rtkad opertor) rtket rendel egy vltozhoz.
250. oldal
Az + opertor (sszead opertor) sszeadja a kt operandus rtkt. A kvetkez kd kiszmolja a 7-es rtket, s eltrolja az x vltozban:
y=5; z=2; x=y+z;
4.3.1. Opertorok
Nzzk meg a fontosabb opertorokat. Ez nagyrszt csak ismtls lesz a PHP opertorok ismeretben.
Aritmetikai opertorok
Az aritmetikai opertorok matematikai mveleteket hajtanak vgre. opertor + nv sszeads plda
x=2 y=2 x+y 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--
eredmny
4
kivons
szorzs
20
/ %
oszts maradk kpzs
3 2.5 1 2 0 x=6
++ --
nvels 1-el cskkents 1-el
x=4
251. oldal
rtkad opertorok
Az rtkad opertorok a bal oldali operandus rtkt vltoztatjk meg a jobb oldali kifejezs rtkre (els sor), vagy mdostja a jobb oldali rtkkel (tovbbi sorok). Ha x=10 s y=5, akkor: opertor
= += -= *= /= %=
plda
x=y x+=y x-=y x*=y x/=y x%=y
eredmny
x=5 x=15 x=5 x=50 x=2 x=0
sszehasonlt opertorok
Az sszehasonlt opertorok logikai kifejezst lltanak el. opertor
== ===
nv egyenl egyenl tpus s rtk
plda
5==8 X=5; y="5"; x==y x===y 5!=8 5>8 5<8 5>=8 5<=8
eredmny
false
true false true false true false true
!= > < >= <=
nem egyenl nagyobb, mint kisebb, mint nagyobb, vagy egyenl, mint kisebb, vagy egyenl, mint
252. oldal
Logikai opertorok
A logikai opertorok logikai rtkekbl jabb logikai rtket lltanak el. opertor
&&
nv s
plda
x=6 y=3 (x < 10 && y > 1) (x==5 || y==5) !(x==y)
eredmny
true false true
|| !
vagy nem
Sztring opertor
Sztringek sszefzsre a + opertor egyszeren alkalmazhat:
txt1="Ez egy nagyon " txt2="szp nap!" txt3=txt1+txt2
Ekkor txt3 rtke: Ez egy nagyon szp nap!
Sztringek s szmok sszeadsa, kivonsa

Szveg s szm vegyes sszeadsa esetn (eltren a PHP nyelvtl) a konverzi sztring irnyban trtnik, s az eredmny is sztring lesz.
x=5+5; document.write(x);
Az eredmny: 10.
x="5"+"5"; document.write(x);
Az eredmny: 55 (sztring tpus).

x=5+"5"; document.write(x);
Az eredmny: 55 (sztring tpus).

x="5"+5; document.write(x);
Az eredmny: 55 (sztring tpus). Hogy mg rdekesebb legyen, a kivons esetn a PHP-nl megszokott konverzi trtnik:

x="5"-2; document.write(x);
253. oldal
Az eredmny: 3 (szm tpus).
Feltteles opertor
A hromoperandus feltteles opertor egyszer esetekben egy if-else utastst is kivlthat. Szintaxis:
vltoznv = (felttel) ? kifejezshaigaz : kifejezshahamis
A felttel teljeslse esetn vltoznv rtke kifejezshaigaz rtke lesz, klnben pedig kifejezshahamis rtke. A kvetkez plda a J reggelt jabb verzija:
var d=new Date() var time=d.getHours() var message = "J " + ((time<9)?"reggelt":"napot") + "!" document.write(message)

Egy egyszer lineris kd csak nagyon egyszer feladatokat tud megoldani. Legtbbszr szksgnk lesz klnbz vezrlsi szerkezetekre, hogy a kdunk megoldhassa a feladatt. A JavaScript nyelv alapveten a megszokott vezrlsi szerkezeteket nyjtja.
4.4.1. Elgazsok
Kd rsa kzben nagyon gyakran alkalmazunk elgazsokat, hogy klnbz esetek kztt klnbsgeket tudjunk tenni. A JavaScript a C-hez s Javhoz hasonlan tbbfle elgazst ismer.
if
utasts
Akkor hasznljuk, ha egy adott felttel beteljeslse esetn szeretnnk valamit vgrehajtani. Szintaxis:
if (felttel) { utasts }
A kvetkez kd J reggelt kvn, ha mg nincs 9 ra.
254. oldal
var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>J reggelt!</ strong >") }
A kvetkez plda az ebdidre figyelmeztet.

var d=new Date() var time=d.getHours() if (time==12) { document.write("<strong >Ebdid!</ strong >") }
if-else
utasts
Akkor van szksgnk erre az utastsra, ha a felttelnk teljeslse mellett a nem teljesls esetn is kell valamilyen feladatot elltni. Szintaxis:
if (felttel) { utasts ha igaz } else { utasts ha hamis }
Egsztsk ki a J reggelt pldnkat:

var d=new Date() var time=d.getHours() if (time<9) { document.write("<strong>J reggelt!</ strong >") } else { document.write("J napot!") }
switch
utasts
Ez az utasts akkor alkalmazhat nagyszeren, ha egy adott kifejezs klnbz rtkei esetn ms-ms feladatot kell a kdnak vgrehajtani. Szintaxis:
switch(n) { case 1: utasts 1 break case 2: utasts 2 break default: utasts }
Elszr az n kifejezs kirtkelse trtnik meg, majd a lehetsges case esetek kztt prbl a bngsz megegyezt tallni. Ha esetleg nincs, akkor a default cmke fog aktivldni. A break pedig azrt szksges, hogy a programunk ne tudjon a msik esetre rcsorogni.
255. oldal
A kvetkez plda a ht napjtl fggen a munkahelyi hangulatot kpes megjelenteni.

var d=new Date() theDay=d.getDay() switch (theDay) { case 5: document.write("Vgre pntek!") break case 6: case 0: document.write("J kis htvge!") break default: document.write("Mikor lesz htvge?") }
4.4.2. Ciklusok
A ciklusok lehetv teszik, hogy egy kdot tbbszr vgrehajtsunk.
for
ciklus
A for ciklust akkor szoks alkalmazni, ha a ciklus elkezdse eltt lehet tudni, hnyszor kell majd a ciklusnak lefutnia. Jellemz szintaxis:
for (vltoz=kezdrtk; vltoz <= vgrtk; vltoz++) { ciklusmag }
Fontos szerepet tlt be a vltoz, amelyet ciklusvltoznak is szoks hvni. A ciklusmag lefutsnak szma a ciklusvltoz kezd s vgrtktl, valamint a vltoz nvelsi mdjtl fgg. A kvetkez plda egy szmkitall jtk alapja lehet.
for (i = 1; i <= 10; i++) { document.write("<input type=button value=" + i + " onclick=\"alert("+ i +")\"> ") }
Az eredmny:
256. oldal
72. bra. Dinamikus nyomgombok

while
s do-while ciklusok
Ezeket a ciklusokat akkor szoks alkalmazni, ha nem tudjuk elre, hnyszor kell a ciklusmagnak lefutnia. Sokszor ciklusvltozra nincs is szksg, a ciklus futsi felttele valamilyen ms mdon ll ssze. A while ciklus magja addig fut, amg a felttel igaz. (Akr vgtelen ciklus is lehet logikailag. A gyakorlatban a bngsz egy id utn lelltja a tl sokig fut szkriptet.)
while (felttel) { cikusmag }
A do-while ciklus logikja csak abban ms, hogy mindenkppen lefut egyszer a ciklusmag, s csak ez utn rtkeldik ki a felttel:
do { cikusmag } while (felttel);
Vezrlstads
Nem kevs fejtrst okozott a programozs trtnetben a strukturlatlan nyelvek goto utastsa. Ezrt a strukturlt nyelvek szk keretek kztt teszik csak lehetv a vezrlstad utastsok hasznlatt. A C alap nyelvekben a break s continue utastsok hasznlhatk a ciklus teljes, vagy csak az aktulis ciklusmag futs megszaktsra. (A break a switch-case szerkezetben mr bemutatta kiugrsi feladatt.) A kvetkez plda a korbbihoz hasonlan gombokat hoz ltre, de a 3-al oszthat szmokat kihagyja:
for (i = 1; i <= 10; i++) { if (i%3 == 0) continue; document.write("<input type=button value=" + i + " onclick=\"alert("+ i +")\"> ") }
Az eredmny:
257. oldal
73. bra. Dinamikus nyomgombok

for-in
ciklus
A for ciklust gyakran hasznljuk arra, hogy valamilyen trol elem, pldul tmb minden elemvel csinljunk valamit. Ilyen esetekben a szintaxist egyszersteni tudja a for-in ciklus. Szintaxis:
for (vltoz in objektum) { ciklusmag }
A ciklusmag annyiszor fog lefutni, amennyi az objektum elemeinek szma. St a ciklusmagban a vltoz kifejezssel kzvetlenl hivatkozhatunk az ppen bejrt elemre. A kvetkez plda egy tmb elemeit rja ki egyms al:
var mycars = new Array() var x mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + "<br>") }
4.5. Fggvnyek
A fggvnyek103 az jra felhasznlhat kd egyszer eszkzei. Egy egyszer megrt fggvnyt a kd klnbz helyein tetszlegesen sokszor meghvhatjuk. (Egy jl megrt fggvnyt akr egymstl jelentsen eltr weboldalakon is hasznlhatunk.) Msrszt a fggvnyek teszik lehetv, hogy a HTML kdtl minl jobban elvlasszuk a viselkedsi rteget megvalst JavaScriptet. (Hasonlan, mint ahogy a megjelentst meghatroz CSS-t is elklntjk.) A fggvnyek hasznlatnak egyik legegyszerbb esete, amikor valamilyen esemny bekvetkeztekor egy esemnykezel fggvnynek adjuk t a vezrlst. A korbbi pldk is jl mutatjk ezt a megkzeltst. rdemes azonban kitrni arra is, hogy a Javascript nyelv meglep jdonsgokat tartalmaz az objektum-orientlt nyelvek ismeri szmra is. Ez a jelents eltrs taln itt, a fggvnyek tmjtl kezdve mutathat ki leginkbb. A Javascript fggvnyeit hozzrendelhet103 A fejezet ksztsnl hasznlt, s tovbbi informcikrt ajnlott Galiba Pter: JavaScript fggvnyek cm nagyszer cikke. http://weblabor.hu/cikkek/javascript-fuggvenyek
258. oldal
jk vltozkhoz s objektum tulajdonsgokhoz, tadhatjuk ket paramterknt ms fggvnyeknek, valamint egy fggvny illetve metdus is trhet vissza fggvnnyel.
Fggvnydeklarci
A fggvnyek ltrehozsra leginkbb ismert megolds a fggvnydeklarci. A deklarci szintaxisa:
function fggvnynv(par1,par2,...,parX) { fggvnytrzs }
A function kulcssz a PHP nyelvhez hasonlan nem elhagyhat. A kerek zrjelek kztt a fggvnyek paramtereit adhatjuk meg. (Termszetesen paramter nlkli fggvnyeket is kszthetnk, de a zrjeleket ekkor is alkalmaznunk kell.) A fggvnydeklarci a globlis szinten, de akr egy msik fggvny trzsben is szerepelhet. Ez utbbira egy plda:
function kulso () { function belso () { // fggvny trzs } }
A belso fggvny akkor jn ltre, amikor a kulso fggvny lefut.
Fggvnykifejezs
A fggvnyek ltrehozsnak msik lehetsgvel is gyakran tallkozhatunk. Brhol hasznlhatjuk, ahol vltoz szerepelhet. Radsul gyakran nem is adunk neki fggvnynevet, mert nincs r szksg. A kvetkez nv nlkli fggvny akkor fog lefutni, ha az oldal teljes egszben betltdik:
window.onload=function(){ ..// kd ... }
Visszatrsi rtk
Egyes fggvnyek visszatrsi rtket is elllthatnak. A visszatrsi rtk a return utastssal adhat meg. A kd a return hatsra a fggvnybl kilpve a vezrlst is visszaadja az t hv kdnak. A kvetkez egyszer fggvny a kt paramtere szorzatt adja vissza:
function prod(a,b) { return a*b }
A fggvnyt pldul a kvetkez mdon tudjuk meghvni:
4.5. Fggvnyek
var product=prod(2,3)
259. oldal
A fggvny 6-os visszatrsi rtke bekerl a product vltozba.
Vltoz szm paramter

Vannak olyan esetek, amikor egy fggvnyt kevesebb vagy tbb paramterrel meghvva is mkdkpes kdot szeretnnk kszteni. Erre az esetre a fggvnyen bell elrhet arguments objektum ad j megoldst. A C nyelv main fggvnyhez hasonl megolds:
function foo() { var argv = foo.arguments; var argc = argv.length; for (var i = 0; i < argc; i++) { alert("Argument " + i + " = " + argv[i]); } }
4.6. Objektumok
A JavaScript objektumorientlt nyelv. Mieltt azonban a rszletekbe mennnk, rdemes megjegyezni, hogy a C++, Java, PHP stb. nyelvekkel szemben itt valdi objektumorientltsgrl beszlhetnk, mg az elbb emltett nyelveket taln pontosabb lenne osztly-orientlt nyelveknek nevezni. A JavaScript nyelvet szoks mg objektum szemlletnek is nevezni.
4.6.1. Alapok
A bngsz JavaScript kd futtatsakor j nhny objektumot bocsjt a rendelkezsnkre, amiken keresztl a weboldal egyes jellemzit, rszeit rhetjk el, vagy akr manipullhatjuk is. Kezd JavaScript programozknt teht nem sokban fog klnbzni a dolgunk ms nyelvi krnyezetekhez kpet, komoly feladatok megoldshoz mr igen mly JavaScriptes OOP ismeretekre lesz szksgnk. Az objektum klnbz adatok gyjtemnye. Tulajdonsgokkal s metdusokkal rendelkezik.
Tulajdonsgok
A kvetkez plda bemutatja, hogy hogyan lehet egy objektum tulajdonsgt lekrdezni:
var txt="Hello World!" document.write(txt.length)
260. oldal
A futs eredmnye 12.
Metdusok
A metdusok valamilyen tevkenysget hajtanak vgre az objektumon. A kvetkez plda egy sztring objektum toUpperCase metdust hasznlja a nagybets kirs rdekben:
var str="Hello world!" document.write(str.toUpperCase())
Az eredmny: Hello world!
4.6.2. Objektumok ltrehozsa

Egy objektum nv-rtk prok gyjtemnye, ahol a nv a ms nyelvekben megszokott adattag vagy tagfggvny neve, az rtke pedig egy primitv rtk, objektum, vagy akr egy fggvny is lehet. Objektum pldnyt is tbb mdszerrel hozhatunk ltre.
Objektum inicializl
Ez a lehetsg a C nyelv struktrjhoz vagy a PHP nyelv asszociatv tmbjhez hasonlt a leginkbb.
var motor = {szin: "piros", kerek: 2}
Konstruktor fggvny
A JavaScriptben nincsenek klasszikus rtelemben vett osztlyok. Az objektumokat kzvetlenl hozzuk ltre a new opertor segtsgvel. Minden objektum az Object tpusra vezethet vissza, gy egy res objektumot pl. gy hozhatunk ltre:
var objektum = new Object();
Az objektumokat a konstruktor fggvnyek pldnyostsval hozhatjuk ltre. A kvetkez kd egy egyetlen adattaggal rendelkez objektumok hoz ltre.
function tipus(tul) { this.tulajdonsag = tul; } var objektum = new tipus(5); // objektum pldnyostsa alert(objektum.tulajdonsag);
A PHP-bl is ismert this kifejezssel hoztuk ltre az objektum egyetlen adattagjt. A ltrehozott objektum vltoz tpusa Object.
Metdus ltrehozsa
A metdus az objektum egy olyan tagja, amely fggvny tpus.
4.6. Objektumok
261. oldal
Metdust akr a konstruktorban, akr utlag is hozzrendelhetjk egy objektumhoz. Pldul egy nvtelen fggvny formjban:
motor.f = function() { /*...*/ }
4.6.3. Objektumknt viselked vltozk

A JavaScript nyelv j nhny beptett tpust tesz elrhetv. Ebben a fejezetben nhny fontosabbal ismerkednk meg.
Tmbk
A JavaScript nyelvben a tmbk is objektumok. Ez tbb helyen is tetten rhet a kvetkez pldnkban. Hozzunk ltre hrom tmbt:
var arrayOne = new Array("One","Two","Three","Four","Five"); var arrayTwo = new Array("ABC","DEF","GHI"); var arrayThree = new Array("John","Paul","George","Ringo");
A tmbk a PHP-hez hasonlan szvegeket is elfogadnak indexknt:

var anArray = new Array(); anArray[0] = "Fruit"; anArray["CostOfApple"] = 0.75;
A new opertor mellett az is rulkodik, hogy a tmbknek ltezik concat metdusuk a tmbk sszefzsre, s length tagjuk a mretk lekrdezsre.
var joinedArray = arrayOne.concat(arrayTwo, arrayThree); document.write("joinedArray has " + joinedArray.length + " elements<br>"); document.write(joinedArray[0] + "<br>") document.write(joinedArray[11] + "<br>")
A tmb objektumoknak igen sok hasznos szolgltatsuk van. Pl. egy tmbt rendezhetnk, majd megfordthatjuk az elemeit:
var arrayToSort = new Array("Cabbage", "Lemon", "Apple","Pear","Banana"); var sortedArray = arrayToSort.sort(); var reverseArray = sortedArray.reverse();
A tmbket nem csak sszefzni, hanem szeletelni is tudjuk a slice metdussal:

var fullArray = new Array("One","Two","Three","Four","Five"); var sliceOfArray = fullArray.slice(1,4); document.write(sliceOfArray[0] + "<br>");
262. oldal
Dtumok
A kvetkez pldnkban a beolvasott szveget dtumm konvertljuk a Date pldnyostsval, s gy lehetsgnk lesz a dtumokkal val mveletekre is. rdemes a getDate s a setDate fggvny hasznlatt megfigyelni.
var input = prompt("Drum (nap hnap v)", "31 Dec 2003"); var originalDate = new Date(input); var addDays = Number(prompt("Eltelt napok","1")) originalDate.setDate(originalDate.getDate() + addDays) document.write(originalDate.toString())
Nem csak az egsz dtumot, hanem egyes rszeit is manipullhatjuk:

var someDate = new Date("31 Jan 2003 11:59"); document.write("Perc = " + someDate.getMinutes() + "<br>"); document.write("v = " + someDate.getFullYear() + "<br>"); document.write("Hnap = " + someDate.getMonth() + "<br>"); document.write("Dtum = " + someDate.getDate() + "<br>");
Csak a percet vltoztatjuk:

someDate.setMinutes(34); document.write("Minutes = " + someDate.getMinutes() + "<br>");
Matematikai mveletek
A JavaScript nyelvben a Math objektum sokfle esetben lehet hasznos segtsg. Hromfle kerekt algoritmus:
var numberToRound = prompt("Please enter a number","") document.write("round() = " + Math.round(numberToRound)); document.write("<br>"); document.write("floor() = " + Math.floor(numberToRound)); document.write("<br>"); document.write("ceil() = " + Math.ceil(numberToRound));
A kvetkez plda egy kockadobst szimull:

var diceThrow = Math.round(Math.random() * 5) + 1; document.write("A dobas: " + diceThrow);
4.7. A dokumentum elrse s mdostsa

A JavaScript szhasznlatban a dokumentum elssorban a HTML oldalt, illetve a HTML forrskdbl felptett bels adatstruktrt jelenti. A bngszmotor a HTML forrskd alapjn felpt egy olyan adatstruktrt, amely alapjn a kpernyn vagy egyb mdia eszkzn megjelenti az oldal tartalmt. Ez az adatstruktra a DOM nvre hallgat, s jelents fejldsen ment keresztl. A JavaScript korai
263. oldal
megkzeltse a dinamikus HTML (rviden DHTML) kifejezssel rta le azt, hogy ezt az adatszerkezet nem csak lekrdezhet, hanem manipullhat is. Nzzk elszr ezt a hagyomnyos megkzeltst. (Egyes terleteit ma is gyakran hasznljuk.) Majd utna trnk ki a DOM-ban rejl mai lehetsgekre.
4.7.1. Dinamikus HTML

A bngszk a JavaScript kdunk szmra specilis objektumokon keresztl teszik elrhetv a dokumentum egyes rszeinek elrst, manipullst. Ennek egy nagyon egyszer pldjval mr tbbszr tallkoztuk. A document objektum a HTML forrskdbl felptett adatszerkezetet jelenti. gy annak write metdusa be fogja szrni a dokumentum megadott pontjra a paramtereknt kapott szveget:
<script type="text/javascript"> document.write(Date()); </script>
Ha nem szveget adunk t a metdusnak, akkor szvegg lesz konvertlva.
A kvetkez objektumhierarchia nhny elemvel fogjuk folytatni:
74. bra. JavaScript objektumhierarchia

Window
objektum
A Window objektum az aktulis bngszablakot (vagy bngszflet) reprezentlja. Ezzel tudunk pl. j felugr ablakot nyitni:
window.open ("http://oldalam.hu","oldalam"); window.open ("http://oldalam.hu","oldalam","status=1,toolbar=1");
Ezt ma ritkn hasznljuk, mert a bngszk, vagy kiegsztik ltalban blokkoljk a kretlen reklmok miatt.
264. oldal
Document
objektum
A document objektum a HTML body tagjnak tartalmt reprezentlja. A title tulajdonsg az oldal cmt tartalmazza. Ezt akr meg is vltoztathatjuk JavaScript kddal. A lastModified vltoz a dokumentum utols mdostsnak idpontjt tartalmazza. Termszetesen dinamikusan (pl. PHP-vel) generlt oldal esetn a generls idpontja fog szerepelni. A location csak olvashat mez tartalmazza a dokumentum teljes URL-jt. A referrer tulajdonsg szintn csak olvashat mez. Annak az oldalnak az URLjt tartalmazza, amelyrl a ltogat egy linket kvetve rkezett. Ha nem linken keresztl rkezett, akkor res a mez. A forms s a links tmbk a dokumentum rlap s hivatkozs objektumait tartalmazzk. A name attribtummal rendelkez elemeket kzvetlenl is elrhetjk a tartalmazsi hierarchinak megfelelen. Nzznk egy pldt az utolsra. A 71. bra forrskdjnak egy rszlete jl mutatja, hogy urlap a form name tulajdonsga, ami tartalmaz tipus nev rdigombokat, valamint valasz s szoveg nev input mezket.
switch (true) { case document.urlap.tipus[0].checked: document.urlap.valasz.value = alert(document.urlap.szoveg.value)
History
objektum
A history objektum az elzleg megltogatott oldalakat tartalmazza. A kvetkez plda a sokak ltal szeretett, de nem a legszerencssebb Vissza linket hozza ltre:
<a href="javascript:history.go(-1)">Vissza</a>
Navigator
objektum
A navigator objektum a bngsznkrl tud informcikat kinyerni. Pl. a navigator.appName a bngsz nevt, a navigator.cookieEnabled a stik hasznlhatsgt tartalmazza. A bngsz pontos tpusnak meghatrozsra is alkalmazhat, br ez mai szemmel elg trkks mdon104.
104 Egy rdekes pldt lthatunk Peter-Paul Koch: Browser detect cm cikkben. Forrs: http://www.quirksmode.org/js/detect.html
265. oldal
Ahogy emltettk, az eddigi technikkat ma mr ritkbban hasznljuk, inkbb a kvetkez megkzelts alkalmazand.
4.7.2. DOM
A Document Object Model egy olyan szabvny, amelynek segtsgvel a bngsz a HTML dokumentum struktrjt faszerkezetben brzolja s teszi elrhetv, manipullhatv a JavaScript szmra.
A DOM hrom rszre oszthat: Core DOM, XML DOM s HTML DOM. Ezen kvl megklnbztetnk Level 1/2/3 DOM-okat. Mi azonban csak egy nagyon rvid bevezetssel fogunk a tmra pillantani.
A fastruktra minden pontja egy objektum, ami egy elemet reprezentl. Az elemek tartalmazhatnak szveget s tulajdonsgokat is, amit az objektumokbl ki is lehet nyerni. A kvetkez plda az oldalon val kattints hatsra srga htteret llt be:
<head> <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } </script> </head> <body onclick="ChangeColor()"> Klikkeljen az oldalon! </body>
A document objektum tartalmazza az sszes tovbbi objektumot, amelyek egyttesen a HTML dokumentumot reprezentljk. A document.body objektum a body tagnak felel meg. Az objektumok tulajdonsgai egyszeren elrhetk, illetve manipullhatk. Az elz pldban ltott document.body.bgColor az oldal (body) httrsznt kpviseli. A kvetkez plda eredmnyben ugyanazt nyjtja, mint az elz, azonban a megkzeltse ms. A style tulajdonsg a CSS-ben bellthat tulajdonsgokat foglalja ssze:
document.body.style.background="yellow"
getElementById
Az egyik leggyakrabban alkalmazott metdus, hiszen ennek segtsgvel lehet a HTML dokumentum egy adott elemt elrni, azon pldul valamilyen manipulcit elrni. A kvetkez pldbl fontos megfigyelni, hogy csak az id-vel rendelkez elemeket rhetjk el a segtsgvel. A kvetkez plda egy link elemet keres meg, majd tbb jellemzjt megvltoztatja:
<a id="micro" href="http://www.microsoft.com"> Microsoft</a>
A JavaScript kd:
266. oldal
var link = document.getElementById('micro') link.innerHTML="Visit W3Schools" link.href="http://www.w3schools.com" link.target="_blank"
A getElementById metdussal megkapott objektum a HTML forrskd alapjn plt fel, amibl lekrdezhetnk informcikat, vagy akr mdosthatjuk is a mezit.
Az innerHTML mez segtsgvel a kezd s zr tag kztt szerepl teljes HTML kdot lekrdezhetjk vagy mdosthatjuk. Br hasznos lehetsg, csak egyszerbb esetekben, fleg tiszta szveg csernl rdemes hasznlni.
Tovbbi rdekes szolgltatsok: pldul egy elem megkaphatja a fkuszt a focus metdus meghvsval, vagy ppen elvesztheti a blur metdus hatsra. A focus praktikus lehet, ha a JavaScriptet rlap adatok ellenrzsre hasznljuk. Ekkor a hibazenet megjelentse utn vissza lehet kldeni a kurzort, a hibt tartalmaz beviteli mezre, gy egy kattintst megsprol a felhasznl.
Taln feleslegesnek tnik az ilyen aprlkos kdols, de sokszor az ilyen apr praktikus segtsgek miatt rzi azt a felhasznl, hogy ez egy bartsgos oldal.
Vgl nzznk meg egy kicsit komplexebb DOM pldt 105, amely az innerHTML helyett korszerbb megkzelts a dokumentum dinamikus megvltoztatsra. A kvetkez kd betmret vlaszt gombokat (div elemet, s abban a elemeket) hoz ltre.
function fontresizeShow() { var div = document.createElement("div"); div.id = "fontresize"; var aSmall = document.createElement("a"); var aNormal = document.createElement("a"); var aLarge = document.createElement("a"); aSmall.onclick = function() { StyleActivate('small'); return(false); }; aSmall.href = "#"; aSmall.className = "small"; aSmall.appendChild(document.createTextNode('A')); aNormal.onclick = function() { StyleActivate('normal'); return(false); }; aNormal.href = "#"; aNormal.className = "normal"; aNormal.appendChild(document.createTextNode('A')); aLarge.onclick = function() { StyleActivate('large'); return(false); }; aLarge.href = "#"; aLarge.className = "large"; aLarge.appendChild(document.createTextNode('A')); div.appendChild( aSmall ); div.appendChild( aNormal ); div.appendChild( aLarge ); document.body.appendChild( div ); }
105 Brthzi Andrs: Dinamikus betmret vlaszt cm cikke nagyszer rs a tmban. Forrs: http://weblabor.hu/cikkek/betumeretvalaszto
267. oldal
4.7.3. DOM megoldsok

Ebben a fejezetben nhny olyan fggvnyt fogunk megismerni, amely a DOM korszer hasznlatt mutatja be. Ezen kdok brmely weboldalon felhasznlhatk ltalban vltoztats nlkl.
getElementsByClass
A getElementById DOM fggvny mintjra hasznos lenne, ha egy adott osztly elemeket knnyen ki tudnnk gyjteni, akr elemtpusokra (pl. p vagy h3) szktve is. A kvetkez egyszer verzi csak a keresett osztly nevt vrja. Lehetne szkteni a keresst, pldul csak egy tpus elemekre, vagy adott azonostj elem leszrmazottaiban, stb.
function getElementsByClass(name, element = "*") { var found = 0; var elems = new Array();
Tallatok megszmolshoz s trolshoz kt segdvltoz.

var alltags = document.getElementsByTagName(element);
Ha a msodik paramtert is megadjuk a hvskor, az alaprtelmezett * helyett csak bizonyos elemekben keres. A visszaadott rtk lehet null is, ezrt ezt ki kell szrni:
if (alltags) { for (i=0; i < alltags.length; i++) { if (alltags[i].className==name) { elems[found++]=alltags[i]; } } } return(elems);
addEvent
Ez a fggvny egy adott bngsz objektum egy adott esemnyhez csatol hozz egy adott fggvnyt, melyeket paramterl kap.
function addEvent(obj, evType, fn) { if (obj.addEventListener) { obj.addEventListener(evType, fn, true); return true; } else if (obj.attachEvent) { var r = obj.attachEvent("on"+evType, fn); return r; } else { return false; } }
Br a megolds bngszfgg, azrt knnyen tlthat. (A DOM az addEventListener-t tartalmazza, szoks szerint az Internet Explorer jr kln utakon.)
268. oldal
addLoadEvent
Ez a metdus az elz problma specilis esetnek is tekinthet. Az elz ugyanis a body tagra nem minden bngsz alatt mkdik, mg a kvetkez megolds igen.
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; }
Elszr is megnzzk, hogy van-e esemnykezel rendelve az onload-hoz. Ha nem, egyszer a dolgunk.
else { window.onload = function() { oldonload(); func(); } } }
Ellenkez esetben egy j fggvnybe kell sszefoglalni az eddigi s az j kdot, hogy az j fggvnyt esemnykezelv tve mindkettt futtassa.
4.7.4. Diszkrt JavaScript

A JavaScript segtsgvel sok hasznos funkcionalitst adhatunk hozz oldalainkhoz. Vannak azonban olyan szempontok is, amelyek az okos hasznlatra sztnznek. Ha a JavaScript fut a fejleszt oldaln, akkor hajlamos azt felttelezni, hogy mindenki msnl is futni fog, pedig ez nincs gy. Sok felhasznl fl a biztonsgi kockzatoktl, a mobin bngszje nem tmogatja, vagy valami ms ok miatt kapcsolja ki a JavaScriptet. Ezen kvl a keres robotok sem rtelmezik a JavaScript kdokat, gy pldul a JavaScripttel megoldott navigcit a Google nem fogja figyelembe venni, vagyis az oldal nem lesz kereshet a Google-lel. A Diszkrt JavaScript kifejezs azt az alapelvet jelenti, hogy a csak JavaScripttel hasznlhat (tolakod) szolgltatsok helyett olyan oldalakat ksztsnk, amelyek JavaScript nlkl is mkdnek, esetleg knyelmetlenebbl, extrk nlkl, de mgis mkdnek. A JavaScript csak a plusz knyelmi szolgltatsokat adja.
Elugr ablak plda

A tma rvid bevezetseknt nzznk meg egy feladat tbbfle megoldst. A feladat egy elugr (popup) ablak nyitsa lesz. Az els megolds kzenfekvnek tnek, de az elz megfontolsok miatt nem clravezet:

<a href="javascript:window.open('popup.html','popup');"> popup nyits</a>
269. oldal
A kvetkez megolds szintn elrhetetlen JavaScript nlkl:

<a href="#" onclick="window.open('popup.html','popup');return(false);"> popup nyits</a>
A link a dokumentum elejre mutat ( #). JavaScript hasznlata esetn az elugr ablak megnylik (window.open), majd a return(false) miatt a bngsz nem fogja a tnyleges link clt (#) figyelembe venni. JavaScript nlkl azonban az oldal elejre ugrik a bngsz. Egy j megolds lehet a kvetkez:
<a href="popup.html" onclick="window.open('popup.html','popup');return(false);"> popup nyits</a>
Ekkor a JavaScript gondoskodik az elugr ablak megnyitsrl, s false visszatrsi rtkkel megakadlyozza, hogy a foldal a popup.html-re ugorjon. JavaScript nlkl pedig a fablak jelenti meg a popup.html-t.
Mg diszkrtebb
A diszkrt JavaScript elvvel mg ennl is tovbb mehetnk. A JavaScript kd HTML oldalba keverse ugyangy nem praktikus, mint ahogy a HTML tartalom s a megjelents mikntjt definil CSS sszekeverse sem az. Clszer teht a JavaScriptet a lehet legjobban elklnteni a HTML dokumentumtl.
Ennek az elvnek megnyilvnulsa az a clunk is, hogy a JavaScript kdunk jelents rsze fggvnyekben s osztlyokban, azok pedig kln .js llomnyokban legyenek.
A kvetkez verzi ugyan feleslegesen bonyolultnak tnhet, de nem szabad elfelejteni, hogy a megolds gerinct alkot elveket s fggvnyeket mr msok kidolgoztk, neknk elg felhasznlni az munkjukat, s htradlni a karosszknkben. :) A HTML kdon nem is ltszik, hogy itt JavaScriptrl lenne sz:
<a href="popup.html" class="popup">popup nyits</a>
Az egsz HTML kdban csak a .js llomny betltse mutatja, hogy itt JavaScript kd fog futni. A feladatot megold JavaScript llomny tartalmaz tbb fggvnyt, s a kvetkez sort:
addEvent(window, 'load', classPopupHandler);
Ennek a sornak az a feladata, hogy a window objektum load esemnyhez hozzkapcsoljuk a classPopupHandler metdust. (Ennek kevsb szp megoldsa lenne a body onload="classPopupHandler" a HTML kdban).
270. oldal
Az addEvent metdus s egy segdmetdusa a fejezet ksbbi rszben kerlnek bemutatsra, itt csak az esemnykezel fggvnyt minden egyes popup osztly linkhez kapcsol classPopupHandler metdus s a tnyleges esemnykezel doPopup metdus kvetkezik.
function classPopupHandler() { var elems=getElementsByClass('popup'); for(i=0;i<elems.length;i++) { if (elems[i].href && elems[i].href!='') { addEvent(elems[i],'click',doPopup); } } }
Elszr is a (korbban bemutatott) getElementsByClass metdus egy tmbbe kigyjti a popup osztly elemeket. A ciklusban a megadott href rtkkel br tagokat szrjk, s hozzrendeljk a click esemnyhez a doPopup metdust.
A kevsb diszkrt megolds ugye pont azt jelenten, hogy a HTML kd tartalmazza minden helyen az onc-lick="" szveget.
Kvetkezzk a tnyleges esemnykezel, ami a kattintskor fog lefutni:

function doPopup(ev) { ev || (ev = window.event);
Az ev esemny objektum elvileg a fggvny paramtereknt ll rendelkezsre, de Internet Explorer alatt ezt nem kapjuk meg, ezrt a window objektumbl kell kinyerni.
var source; if (typeof ev.target != 'undefined') { source = ev.target; } else if (typeof ev.srcElement != 'undefined') { source = ev.srcElement; } else { return(true); }
Megprbljuk kiderteni, hogy melyik objektum vltotta ki az esemnyt. A tbbfle prblkozs itt is a klnbz bngszk miatt szksges.
window.open(source.href,'popup');
A tnyleges feladat, az ablak megnyitsa.

if (ev.preventDefault) { ev.preventDefault(); ev.stopPropagation(); } else { ev.cancelBubble = true; ev.returnValue = false; } return false; }
Vgl arrl is gondoskodnunk kell, hogy az esemnyt mg egyszer ne kezelje le a bngsz, vagyis a fablak maradjon eredeti llapotban.
271. oldal
E-mail cm elrejtse
Nagyon feleltlen dolog egy e-mail cmet kitenni egy weboldalra. Az n. spam robotok pont azt keresik, hogy a weben hol vannak kint lev e-mail cmek, s a tallatokat egy kzponti szerverre gyjtik. Az ilyen e-mail gyjtemnyeket aztn eladjk, s jn a megszmllhatatlanul sok kretlen levl. Webfejlesztknt gondoskodnunk kell teht az illetktelen hozzfrs megakadlyozsrl. Korbban elterjedt megolds volt a kpek alkalmazsa: a kpszerkesztvel elksztett email cmet a ltogat el tudja olvasni, de a spam robot nem (hacsak nem foglalkozik karakterfelismerssel). Msik elterjedt megolds a szveges kdols, ahol a pont s kukac rsjelek szvegesen jelennek meg. Itt a biztonsg ugyan megvan, de knyelmetlen egy ilyen esetben begpelni az e-mail cmet, fennll a tveszts lehetsge. Ebben a krnyezetben jn jl a kvetkez megolds, ami szintn diszkrt JavaScriptre pt. A megolds lnye, hogy az e-mail cmet egy meghatrozott algoritmus szerint kdoljuk, amit a bngszben fut JavaScript visszaalakt eredeti formjra. Arra is gondolva, hogy a ltogat nem biztos, hogy engedlyezi a JavaScript alkalmazst, a kdolt cmnek az emberi felhasznl szmra rtelmezhetnek kell lenni. A HTML kd teht lehet pldul:
<a href="mailto:nagy.gusztav#KUKAC#gamf.kefo.hu"> nagy.gusztav#KUKAC#gamf.kefo.hu</a>
Ha a bngszben fut a JavaScript, akkor a #KUKAC# karaktersorozat minden elfordulst visszacserljk a @ karakterre.
function whatCorrector() { var replaces = 0; while (document.body.innerHTML.indexOf('#'+'KUKAC#')!=-1 && replaces<10000) {
Az innerHTML hozzfr a teljes body szveghez. Az indexOf a cserlend karaktersorozatot kutatja. Egy biztonsgi intzkeds az esetleg valami problma miatt fennll vgtelen ciklus elkerlse rdekben, hogy legfeljebb 10.000 futtats engedlyezett.
document.body.innerHTML = document.body.innerHTML.replace( '#'+'KUKAC#',String.fromCharCode(64));
A replace a tnyleges csert vgzi, br egy tovbi trkk, hogy a @ karakter nem szerepel a kdban, hanem a String.fromCharCode(64) segtsgvel lltjuk el.
} } replaces++;
Vgl a csere elindtsa:

addLoadEvent(whatCorrector);
272. oldal
4.8. Esemnykezels
JavaScript segtsgvel kszthetnk dinamikus weblapokat. Alapveten ez azt jelenti, hogy a honlap klnbz felhasznli (s bngsz) esemnyeket kpes rzkelni, s azokra valamilyen mdon reaglni. Jellemz esemnyek a kvetkezk: egrkattints a weboldal betltdtt, s a feldolgozsa megtrtnt az egeret rzkeny terleten mozgatjuk listbl egy elem kivlasztsra kerl rlap elklds billentylets Az egyes esemnyek bekvetkezse esetn egy fggvnnyel szoks a szksges funkcit vgrehajtani.
Az Event objektum
Egrrel vagy billentyvel kivltott felhasznli esemnyek kezelsekor az esemnykezel fggvny egy esemny objektumot kap paramterknt. Ebbl az objektumbl lehet kinyerni pldul, hogy melyik egrgomb volt lenyomva, vagy ppen milyen koordintkon van az egrkurzor.
4.8.1. onload s onUnload

Ezek az esemnyek akkor kvetkeznek be, ha az oldal betltse befejezdtt, illetve mikor a felhasznl az oldal elhagyst kezdemnyezi. Nzznk nhny hasznos pldt (haszontalant, feleslegeset sajnos sokat tallhatunk a weben): A stikben trolt felhasznli belltsokat (pl. a felhasznl ltal preferlt betmret) szeretnnk betlteni s elmenteni. Oldal elhagysa eltt ellenrizhetjk, hogy az rlapban trtnt-e vltozs. (Ha van begpelt adat, s vletlen kattintunk egy linkre, elveszhet a begpelt szvegnk.) Ha van vltozs, csak krds utn engedjk el az oldalrl a felhasznlt.
4.8. Esemnykezels
273. oldal
Oldal betltdse utn (onload) a spammer robotok miatt elkdolt e-mail cmeket visszakdolhatjuk. (Ha sajt, egyedi elkdolst alkalmazunk, a spammer robot programok nem fogjk azt ismerni, teht a kitett e-mail cmet nem tudjk ellopni.)
4.8.2. onFocus, onBlur s onChange

Ezek az esemnyek elssorban rlapok ellenrzsre, vagy az rlapok hasznlatnak knyelmesebb ttelre szolglnak. Az onFocus akkor kvetkezik be, ha az elem megkapja a fkuszt (pldul kattints vagy a tab billenty hatsra). Az onBlur az elem elhagysakor, az onChange pedig brmilyen, a bevitt adatban trtn vltozs esetn kvetkezik be. Nzznk egy pldt az e-mail cm helyes szintaxisnak ellenrzsre:
<input type="text" size="30" id="email" onchange="checkEmail()">
sszetettebb logikj rlapokon hasznos lehet, ha az sszefggseket vizulisan is jelezzk a felhasznlnak. Pldul ha a felhasznl egy jellngyzeten kattintva jelzi, hogy van munkja, adjunk lehetsget a munkahely mez kitltsre. Egy ehhez hasonl esetben megolds lehet a kvetkez plda:
<input type="checkbox" onchange= "document.getElementById('info').style.visibility = this.checked ? 'visible' : 'hidden'"> Dologozok <br> <div id="info" style="visibility:hidden"> Munkahely: <input name="munkahely" type="text"> </div>
Az eredmny:
75. bra. onchange esemny plda
4.8.3. onSubmit
rlap elkldse eltt az sszes ellenrzst el lehet vgezni ennek az esemnykezelnek a segtsgvel. Az esemnykezel logikai rtkvel jelezhetjk a bngsznek, hogy az rlap elkldhet-e:
<form method="post" action="check.php" onsubmit="return checkForm()">
274. oldal
A checkForm fggvny visszatrsi rtkt az rlap adatai rvnyessgnek fggvnyben kell belltanunk.
4.8.4. onClick, onMouseDown s onMouseUp

Az onClick esemny akkor kvetkezik be, ha a felhasznl kattint az elemen. Csak akkor rdemes ezt az esemnyt kezelni, ha tnyleg a kattintshoz kell ktni egy feladatot, pldul egy Tili-toli jtknl a mozgatand kp kijellsre, vagy egy fnykpalbum esetn a mozaikkpre kattintva egybl megjelenjen a nagy mret kp a nzke dobozban. Az utbbi plda vzlata:
<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">
Mg specilisabban alkalmazhat az onMouseDown s onMouseUp esemny kezelse, ami az egrgomb lenyomsakor s felengedsekor kvetkezik be. Erre ma tipikus plda a vonszols esete, amikor az egrgombbal trtn megragadskor s elengedskor kell valamit tenni.
Korbban sok helyen alkalmazott felesleges s rossz gyakorlat, hogy a HTML link ( a tag) helyett is valamelyik esemnyt alkalmazzk. Szintn elavult megolds az oldalunk menpontjait kpekkel megvalstani s a kpeket az onMouseDown s onMouseUp esemnyek esetn cserlgetni. (CSS-el is megoldhat a csere, msrszt az aktivitst jelz kp lass kapcsolat esetn nem jelenik meg azonnal, ami nagyon zavar.)
4.9. Felhasznli lmny

A felhasznli lmny elrse a JavaScript korszer hasznlatnak egyik legfontosabb oka. E fejezetben nhny egyszerbb pldn keresztl megvizsgljuk, milyen mdon lehet a felhasznl munkjt knnyebb, akr lmnyszerv tenni.
4.9.1. Kliens oldali rlap ellenrzs

Felhasznlknt rendkvl kibrndt tud lenni, ha egy komolyabb rlap kitrlse rtelmetlenl felesleges munkt okoz.
275. oldal
Egy rlap ttekinthet megtervezse, a magyarz szvegek pontos megfogalmazsa gyakran nehz feladat. De mg jl megtervezett rlapok esetn is elfordulhat, hogy a felhasznl hibt kvet el, egy hosszabb rlap esetn akr tbbet is. Rendkvl rontja a felhasznli lmnyt, ha a hibkat csak hosszas procedra utn lehet kijavtani: pl. az elkldtt adatokban lev els hibt a webalkalmazs hibazenettel jelzi, s gy a felhasznl akr j nhnyszor knytelen az adatokat javtani-jrakldeni, hogy egyltaln a hibazenetekkel szembeslhessen. Ez a ltogat szmra nagyon knyelmetlen. Egy rlap esetn az a minimum, hogy az sszes hibazenetet egyszerre (s a beviteli elem krnykn) mutatjuk meg, de mg jobb a megoldsunk, ha az adatok elkldse eltt jelezzk a hibkat. A jelzsre egy praktikus lehetsg, ha a beviteli elem krnykn pl. egy pipa megjelensvel, vagy ppen a httrszn vagy a szegly ms sznre lltsval jelezzk az adott elem helyes kitltst. Az itt kvetkez plda a szerz honlapjnak egy 2006-os vltozatn a hozzszls bekldsre szolgl rlap lesz. Elszr is rdemes megfigyelni, hogy a felhasznlval nem egy kitalls jtkot jtszunk, hanem a lehet legrszletesebb magyarzatot adjuk a beviteli mezkhz:
76. bra. j hozzszls rlap Az brn taln nem egyrtelmen ltszik, hogy a Klds gomb indul llapotban nem hasznlhat, szrke szn. Csak akkor vlik hasznlhatv, ha a felhasznl minden szksges mezt korrekten kitlttt.
276. oldal
HTML kd
<h2>j hozzszls</h2> <form id="hozzaszolas" action="index.php" method="post"> <label for="szoveg">(ktelez, minimum 10 bet):</label> <textarea id="szoveg" name="szoveg"></textarea> <label for="nev"><strong>Nv</strong> (ktelez, minimum 3 bet):</label> <input id="nev" name="nev" type="text" size="20" value=""> <label for="email"><strong>E-mail cm</strong>:</label> <p>(Az e-mail cm megadsa nem ktelez. Megadsa esetn megjelenik az oldalon, de nem lesz kiszolgltatva a spam robotok szmra.</p> <input id="email" name="email" type="text" size="20" value=""> <label for="human">Humn ellenrzs. <strong>Negyvenht</strong> szmmal:</label> <input id="human" name="human" type="text" size="5" value=""> <button name="hozzaszolaskuld" id="hozzaszolaskuld" type="submit" value="kuld">Klds</button> </form>
rdemes megfigyelni, hogy a JavaScript kd diszkrt, nem is ltszik kzvetlenl a HTML kdban. Ha a JavaScript nincs engedlyezve, akkor a knyelmi szolgltats nlkl ugyan, de az rlap elkldhet. A diszkrt mkds rdekben a gomb alaprtelmezetten lenyomhat, a kvetkez JavaScript kd teszi hasznlhatatlann (disabled):
document.getElementById('hozzaszolaskuld').disabled = true;
Ezen kvl minden billentyfelengedsre beregisztrljuk az urlapEllenoriz fggvnyt:

addEvent(document.getElementById('szoveg'), 'keypress', urlapEllenoriz); addEvent(document.getElementById('nev'), 'keypress', urlapEllenoriz); addEvent(document.getElementById('human'), 'keypress', urlapEllenoriz);
A kvetkez fggvny csak a minimlis szveghosszakat ellenrzi, zls szerint tovbbfejleszthet pl. e-mail cm szintaxis-ellenrzsre.
function urlapEllenoriz() { document.getElementById('hozzaszolaskuld').disabled = (document.getElementById('szoveg').value.length<10) || (document.getElementById('nev').value.length<3) || (document.getElementById('human').value.length<1); }
277. oldal
4.9.2. Hossz listk bngszse helyett

A GAMF-on mkd BME Nyelvvizsgahely korbbi honlapjn minden nyelvvizsga eltt tjkozdniuk kell a vizsgzknak, hogy pontosan milyen krlmnyek kztt (mikor, hol stb.) fog lezajlani a vizsga. Mivel elg sok vizsgz volt, nem trivilis, hogy az informcit hogyan is nyjtsuk a vizsgzknak. (A 77. brn csak az informcik tredke ltszik.)
77. bra. Vizsga eredmnyek Nhny hagyomnyos megoldsi lehetsg: valamilyen offline mdium hasznlata (pl. egy Excel tblzat), ebben trtnik a szervezsi informcik ellltsa s publiklsa is hossz tblzatos oldal kialaktsa, amiben mr lehet szvegesen is keresni (nagyon hossz tartalom esetn a lapozs szksgess vlhat, ami szintn nem tl szp megolds) Az itt kvetkez megolds az elz megkzeltsek nehzsgeit prblja kikszblni. A Vgeredmny mkds kzben:
278. oldal
78. bra. Dinamikus lista A vizsgznak elegend a neve kt-hrom bets rszt bernia ahhoz, hogy a sok nv kzl csak azt a nhnyat lssa, amelyikbl mr knnyedn ki tudja vlasztani a sajt nevt. (A 78. brn a Kov begpelse ltszik.) Msodik lpsknt egyetlen kattints elegend, hogy a szmra fontos informcik jelenjenek meg az oldalon (idpont, helyszn stb.).
Az rlap felptse
A megolds logikja rviden az, hogy a nv minden egyes karakternek letse vagy trlse utn automatikusan meghvdik a gepel fggvny, ami a tallati lista megjelentsrt felels. A nvlistn val kattints esetn a valaszt fggvny gondoskodik a keresett adatok megjelentsrl.
A kvetkez kdrszletek nem a forrskdban elfordul sorrendben, hanem a vgrehajts sorrendjben kerlnek bemutatsra.
<form method="get" action="#" onSubmit="return false;">
Az rlap tnyleges adatkldst nem fog megvalstani. Errl az onSubmit="return false;" gondoskodik.

<label accesskey="n"> Nv:<br> <input type="text" id="nev" name="nev" value="" onKeyUp="gepel();"></input> </label><br>
279. oldal
Minden karakter felengedsre (onKeyUp) meghvdik a gepel fggvny.

<select size="10" id="lista" name="lista" onChange="valaszt();"> </select> </form>
A listra kattintskor a valaszt fut le. Szksges mg bemutatni, hogy hol is fognak megjelenni a keresett adatok. Pldul az rsbeli vizsga adatai:
<div id="irasbeli" style="display: none"> <h2>rsbeli vizsga</h2> <p>Idpont: <span id="iido"></span><br> Hely: <span id="ihely"></span></p> </div>
Alaprtelmezetten a doboz nem jelenik meg (display: none), hiszen nem biztos, hogy a vizsgzknak lesz egyltaln rsbeli vizsgja. Msrszt rdemes megfigyelni a (most mg) res span elemeket: itt fognak megjelenni a keresett adatok.
Adatok trolsa
Mieltt a gepel fggvnyt megvizsglnnk, t kell gondolnunk, hogy honnan fogja venni a kdunk a megjelentend adatokat. Tbb megkzelts is szba jhet, mi itt csak a JavaScript vltoz hasznlatt vizsgljuk meg. Egyszerbb esetekben s kisebb adatmennyisg (nhny kb) esetn tkletesen megfelel az adatok tmbben val trolsa. Jelen megolds ezt az egyszer mdszert alkalmazza:
var vizsgazok = new Array( new Array("Antal Alma","a","a","C","7","1","8:45","8"), new Array("Bera Berta","n","k","B","","",""," "), ... )
Jelen fejezetben azzal nem foglalkozunk, hogy ezt a tmbt hogyan is lltjuk el. Mint lehetsg, meg kell azonban emlteni, hogy szerver oldalon nem csak HTML, hanem akr JavaScript kdot is generlhatunk, gy nincs annak sem akadlya, hogy PHP-vel az adatbzisbl szrmaz adatokat JavaScript tmbb rjuk ki, hogy a fenti eredmnyt kapjuk. Mg egyszerbb esetekben a tmb kzi mdszerekkel is elllthat. Komolyabb adatmennyisg esetn a 4.10. fejezetben bemutatsra kerl AJAX alap megolds jhet szba.
A gepel fggvny
A gepel fggvny nhny fontosabb rszlete:
280. oldal
function gepel(){ var nev = document.getElementById('nev') var lista = document.getElementById('lista')
Kinyerjk a nv begpelsre s a nvlista megjelentsre szolgl objektumot.

var str = ''
Az str vltozban fogjuk felpteni a nvsort. Ha nem res a nv mez, listt generlunk:
if (nev.value.length>0) { for (i=0; i<vizsgazok.length; i++) { var vnev = vizsgazok[i][0];
Ha az aktulis nv tartalmazza a minta szveget (nev.value), akkor j nevet talltunk:

if (vnev.indexOf(nev.value) != -1) { str += '<option value="o' + i + '">' + vnev + '<' + '/option>\n' } }
Ha res a nv mez, trlni kell mindent:

} else { var szobeli = document.getElementById('szobeli') szobeli.style.display = 'none' var irasbeli = document.getElementById('irasbeli') irasbeli.style.display = 'none' }
Vgl egy technikai rdekessg: Az Internet Explorer hibsan mkdik, ha az innerHTML adattagot select elemre hasznljuk. Ezrt a nem szabvnyos outerHTML-t kell alkalmaznunk helyette:
if (lista.outerHTML) { lista.outerHTML = '<select size="10" id="lista" name="lista"' .' onChange="valaszt();">' + str + '</select>' } else { lista.innerHTML = str }
A valaszt fggvny
Az elz fggvny alapjn sok rszfeladat mr knnyen elkszthet. A kivlasztott nv kinyerse:
var nev = lista.options[lista.selectedIndex].text
Megkeressk, hogy a tmb melyik indexn tallhatak a keresett adatok:

for (i=0; i<vizsgazok.length; i++) { if (vizsgazok[i][0] == nev) { break } }
281. oldal
A pldn jl ltszik, hogy a kd csak egyedi nevek esetn mkdik hibtlanul.
A fggvny tovbbi rsze a tallt adatok megfelel beillesztsre szolgl.
4.10. AJAX bevezet

Jesse James Garrett 2005 elejn publiklt cikkben 106 alkalmazta elszr az AJAX kifejezst. A JavaScript trtnetben mrfldknek szmt az AJAX technolgia megalkotsa s robbansszer elterjedse. Ha nem ismers ez a fogalom, akkor elszr rdemes pl. a GMail hagyomnyos nzetet s az egyszer HTML mdjt sszehasonltani.
Sajnos ez a papr alap mdia nem kpes rzkeltetni megfelelen a hasznlhatsgi s felhasznli lmnybeli klnbsgeket.
Az AJAX az Asynchronous JavaScript and XML kifejezs rvidtseknt jtt ltre. Nagyon egyszeren fogalmazva az AJAX lehetv teszi, hogy az oldal gy reagljon a felhasznli interakcikra, hogy nem kell hozz (mindig) jratlteni az egsz weboldalt. A ltogat nem fog msodpercekig vrni 1-1 kattints utn, hogy az elbb a szerveren, majd a kliensen is rvnyesljn. Ehelyett a kliens l, mozog, reagl, s kzben a szerverrel is kommunikl. Nzznk meg egy nagyon egyszer helyzetet. A ltogat regisztrlni szeretne, s ezrt felhasznli nevet vlaszt magnak. Hagyomnyos JavaScript mdszerrel itt annyi knyelmi szolgltatst adhatunk, hogy a szintaxis ellenrzst elvgezhetjk (pldul a minimum hosszsg megvan-e, s csak megengedett karaktereket adott-e meg). Azt azonban, hogy a nv mr foglalt, csak az rlap elkldse utn tudjuk jelezni. AJAX segtsgvel akr azonnal jelezhet a foglaltsg.
AJAX kommunikci
A hagyomnyos webalkalmazsok a felhasznl ltal bevitt adatokat egy rlap formjban kldik el a kiszolglnak. Miutn az feldolgozta az adatokat, egy teljesen j oldalt kld vissza a bngsznek. Mivel minden felhasznli adatbevitel utn a kiszolgl j oldalt kld, ezek az alkalmazsok ltalban lassak s kevsb felhasznlbartok. AJAX-szal azonban a weboldalak gy kldhetnek s fogadhatnak adatokat a kiszolglnak, hogy nem szksges az egsz oldalt jra letlteni. Ez gy lehetsges, hogy az oldal a httrben kld egy HTTP krst a kiszolgl fel, majd JavaScript segtsgvel csak a weboldal egy rszt mdostjuk, ha megrkezik a vlasz.
106 http://www.adaptivepath.com/publications/essays/archives/000385.php
282. oldal
Habr brmilyen formtumot hasznlhatunk az adatok kldsre/fogadsra (akr egyszer szveget is), legelterjedtebb az XML hasznlata. (Br a JSON 107 npszersge is egyre nvekszik.)
4.10.1. Bevezet plda

A kvetkez plda azt mutatja be, hogyan tud egy weboldal kommuniklni a szerverrel az oldal teljes jratltse nlkl. Nzznk egy egyszer szveges beviteli mezt, amelyik egy nv begpelst teszi lehetv.
HTML
A kezdetben res javaslatlista a txtHint span mezbe fog kerlni, az ppen begpelt szvegnek megfelelen. (Pldul az A begpelsre megjelenik az sszes A betvel kezdd nv.)
<form> Keresztnv: <input type="text" id="txt1" onkeyup="showHint(this.value)"> </form> <p>Javaslat: <span id="txtHint"></span></p>
showHint
Minden egyes billentylets (pontosabban felengeds: onkeyup) esetn lefut a showHint JavaScript fggvny. rdemes megfigyelni az tadott paramtert: a this.value az aktulis input elem (this) begpelt rtkt (value). A fggvny nhny ktelez ellenrzssel kezd, a lnyegi kd a fggvny vgn tallhat:
function showHint(str) { if (str.length==0){ document.getElementById("txtHint").innerHTML="" return } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="gethint.php" url=url+"?q="+str xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }
Ha a beviteli mez res (str.length==0), akkor nincs javaslat (innerHTML="").
107 http://www.json.org/
4.10. AJAX bevezet
283. oldal
Ha ilyenkor a teljes listt kiadn, akkor a lnyeg veszne el. Egy ilyen helyzetben pont az az AJAX megolds elnye, hogy nem kell elre letlteni a tbb ezer vlasztsi lehetsget egy select tagba, hanem minden esetben csak egy jval szkebb tallati listt.
Kvetkez lps az AJAX mkds lelkt ad (pldnkban xmlHttp) objektum ltrehozsa. (Mivel ez a lps bngszfgg, ksbb rszletesen visszatrnk erre.) Ha ltrejtt a kommunikcis objektum, akkor az URL sszelltsa kvetkezik. Itt egyelre annyi lnyeges, hogy a megszltsra kerl gethint.php a paramterek alapjn tud arrl, hogy itt mi a krs: az A bet begpelse esetn az url a kvetkez lesz:
gethint.php?q=A
Termszetesen itt a tnyleges kdols eltt az sszes lehetsges helyzet alapjn rgzteni kell valamilyen paramtertadsi mdszert, s ehhez kell alkalmazkodni a krs kliens oldali sszelltsakor s szerver oldali feldolgozsakor is. (Ezt gy is mondhatjuk, hogy a kliens s szerver kzti kommunikcira egy interfszt vagy protokollt dolgozunk ki.) A pldban jl ltszik, hogy a szerver oldalon a q paramter rtke alapjn kell a javaslatokat sszelltani.
A szerver oldalon pldul egy adatbzis tblban trolt nevek esetn egy egyszer, a kvetkezhz hasonl lekrdezsre lesz szksg:
SELECT nev FROM nevek WHERE nev like "A%"
Az utols hrom sor kicsit tbb magyarzatot ignyel. Az AJAX aszinkron mkdse azt jelenti, hogy a szerver fel kldtt krsre a JavaScript nem vrja (nem is vrhatja) meg a vlaszt, hanem a felhasznlt hagyja tovbb dolgozni (esetnkben gpelni). A kommunikcis objektumunk szmra teht egy n. callback (visszahvhat) fggvny nevt adja meg az xmlHttp.onreadystatechange=stateChanged sor. Amikor a szervertl visszarkezik a vlasz, akkor a JavaScript kdunk errl gy fog rteslni, hogy a stateChanged fggvny kapja meg a vezrlst. Msknt fogalmazva: a stateChanged fggvnyt kell kpess tennnk arra, hogy a visszarkez vlaszt feldolgozza. Az xmlHttp.open fggvny a krst rja le: GET metdussal szeretnnk a krst kldeni az url szmra, a true paramter pedig az aszinkronitst rja el.
Aszinkronits nlkl a bngsz lemerevedne a vlasz megrkezsig. Ez (klnsen lassabb hlzati kapcsolat esetn) nem a felhasznli lmnyt nveln, hanem inkbb korltozn a munkt.
Vgl az xmlHttp.send fggvny vgzi a krs tnyleges elkldst.

stateChanged
function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("txtHint").innerHTML= xmlHttp.responseText } }
284. oldal
A fggvny tbbszr is meghvdik a vlasz teljes megrkezsig, de az esetek tlnyom tbbsgben elg akkor foglalkozni vele, amikor a teljes vlasz megrkezett (readyState==4). Ahogy eddig is ltszott, ez a plda az alapok rvid ttekintst tzi ki clul, s nem a teljes s komplex megoldst. A vlasz esetn is lthat, hogy itt nem XML vlasz rkezik a szer vertl, hanem szveges (akr HTML). Egyszerbb esetekben ez tkletes megolds lehet.
4.10.2. A bngszk AJAX tmogatsa

Az XMLHttpRequest objektum nlkl nincs AJAX. Sajnos a bngszk nem teljesen egysgesen kezelik az (egybknt szabvnyban rgztett) XMLHttpRequest objektumot. Ez azonban nem olyan nagy problma, a kvetkezhz hasonl kddal a problma jl kzben tarthat:
function GetXmlHttpObject(handler) { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }
A fggvny elszr a Mozilla alap bngszkn alkalmazhat megoldssal kezd, majd Explorerben ActiveX vezrlt prbl ltrehozni. A kdbl az is kvetkezik, hogy az AJAX hasznlathoz a JavaScripten tl az ActiveX engedlyezsre is szksg van Explorer esetn. Az elz plda egyszer szveges (AHAH108) kommunikcit valstott meg. sszetettebb esetekben tbbnyire XML vagy JSON alap kommunikci szksges.
108 Asychronous HTML and HTTP
5. Tartalomjegyzk
1. Az alapok............................................................7 1.1. A web s a ltogat viszonya.......................7 1.1.1. Webes tipograi alapismeretek........7 1.1.2. Hogyan olvasunk a weben?...............8 1.1.3. Keres(re) optimalizls......................8 1.2. A web mkdse............................................9 1.2.1. Webszerver..........................................10 1.2.2. Webtrhely...........................................12 1.2.3. Virtulis szerver..................................12 1.2.4. HTTP protokoll...................................13 1.2.5. FTP protokoll.......................................16 1.2.6. Webcm (URL).....................................17 1.3. A tervezs folyamata...................................18 1.3.1. A honlap clja.....................................18 1.3.2. A honlap megtervezse.....................19 1.4. A fejlesztkrnyezet kialaktsa................23 1.4.1. Szerver opercis rendszer...............23 1.4.2. Szerver alkalmazsok........................24 1.4.3. A fejleszt gpe...................................26 2. A tartalom s a kinzet..................................31 2.1. HTML alapok................................................31 2.1.1. Mi az a HTML?..................................31 2.1.2. Hogyan kezdjnk neki?....................32 2.1.3. HTML szerkesztk.............................33 2.1.4. Hogy nzzk meg egy oldal HTML kdjt?............................................................33 2.1.5. HTML tagok........................................33 2.1.6. HTML elemek.....................................34 2.1.7. Tag tulajdonsgok...............................34 2.1.8. ltalnos tulajdonsgok....................35 2.1.9. Megjegyzsek......................................35 2.1.10. Karakter entitsok............................36 2.1.11. Szemantikus HTML.........................37 2.1.12. Szabvnyossg..................................38 2.1.13. HTML 5..............................................39 2.1.14. XHTML..............................................39 2.2. CSS alapok.....................................................41 2.2.1. Mi a CSS?............................................41 2.2.2. Hol legyenek a stlusdefincik?......44 2.2.3. A CSS nyelvtana.................................45 2.2.4. Szervezsi elvek..................................49 2.2.5. Mdia tpusok......................................50 2.2.6. Validtor...............................................52 2.2.7. CSS 3.....................................................52 2.3. Cmsorok s formzsuk.............................52 2.3.1. Httr....................................................53 2.3.2. Szeglyek.............................................56 2.3.3. Trkzk a szeglyen bell s kvl 58 2.4. Az oldalszerkezet kialaktsa.....................59 2.4.1. Mretek................................................59 2.4.2. Megjelents........................................59 2.4.3. A lebegtets.........................................60 2.4.4. Pozicionlsi smk...........................66 2.4.5. Z-index.................................................69 2.4.6. Begyazott keretek.............................69 2.4.7. A HTML 5 jdonsgai.......................69 2.5. Szvegek ksztse.......................................72 2.5.1. Bekezdsek...........................................72 2.5.2. Sortrsek............................................73 2.5.3. Kiemelsi lehetsgek........................74 2.5.4. Szvegek megjelentse.....................76 2.6. Linkek.............................................................79 2.6.1. HTML szintaxis..................................79 2.6.2. Linkek formzsa...............................81 2.7. Multimdia....................................................81 2.7.1. Kpek....................................................81 2.7.2. Flash lejtsz begyazsa..................83 2.7.3. HTML 5 jdonsgok..........................85 2.8. Listk..............................................................86 2.8.1. HTML szintaxis..................................86 2.8.2. Listk formzsa.................................88 2.9. Tblzatok......................................................89 2.9.1. HTML szintaxis..................................89 2.9.2. Tblzatok formzsa........................92 2.10. rlapok........................................................94 2.10.1. HTML szintaxis................................94 2.10.2. j lehetsgek a HTML 5-ben.......98 2.10.3. rlapok formzsa.........................101 2.11. Fejrsz........................................................104 2.12. A CSS3 nhny megoldsa.....................104 3. Szerver oldali mkds................................107 3.1. A szerver konfigurlsa............................107 3.1.1. Az Apache konfigurlsa................107 3.1.2. A PHP konfigurlsa.......................110 3.1.3. A phpMyAdmin konfigurlsa......113 3.1.4. A MySQL konfigurlsa, jogosultsgkezels......................................113 3.1.5. Karakterkdols: Hasznljunk mindenhol UTF-8-at..................................114 3.2. PHP alapok..................................................119 3.2.1. Szintaxis.............................................119 3.2.2. Megjegyzsek....................................120 3.2.3. Vltozk..............................................121 3.2.4. Sztringek hasznlata........................124 3.2.5. Opertorok s kifejezsek...............126 3.2.6. Tmbk...............................................130 3.2.7. Szuper-globlis vltozk.................133 3.3. Vezrlsi szerkezetek..................................133 3.3.1. Elgazsok.........................................133 3.3.2. Ciklusok.............................................137 3.3.3. Fggvnyek hasznlata...................141 3.4. Adatbzis-kapcsolat...................................145
286. oldal
3.4.1. MySQL alapok..................................145 3.4.2. Adatbzisok s tblk ltrehozsa.146 3.4.3. Adatok bevitele adatbzisba...........149 3.4.4. Lekrdezs.........................................150 3.4.5. Rekord felttelek...............................152 3.4.6. A rekordok rendezse......................153 3.4.7. Adatok mdostsa...........................154 3.4.8. Adatok trlse az adatbzisbl......154 3.4.9. Adatbzis absztrakci......................155 3.5. rlapok hasznlata....................................157 3.5.1. A GET paramtertads..................158 3.5.2. A POST paramtertads................159 3.5.3. Adatfeldolgozs................................160 3.5.4. llomnyok feltltse......................166 3.5.5. Levlklds........................................169 3.6. llomnykezels........................................171 3.6.1. Forrskd beillesztse......................171 3.6.2. Egyszer Front Controller megoldsok..................................................173 3.6.3. Fjlok egszknt kezelse................177 3.6.4. Fjlok tartalmnak kezelse............178 3.7. Felhasznlkezels.....................................180 3.7.1. Stik kezelse....................................180 3.7.2. Munkamenet-kezels.......................182 3.8. Objektumorientlt PHP............................184 3.8.1. Az OOP alapjai.................................184 3.8.2. Osztlyok hasznlat.........................187 3.8.3. rklds...........................................189 3.8.4. Asszocici........................................190 3.8.5. Lthatsg.........................................191 3.9. Hibakezels..................................................192 3.9.1. Alapvet hibakezels: a die fggvny hasznlata....................................................192 3.9.2. Alaprtelmezett hibakezel fggvny ksztse.......................................................193 3.9.3. Kivtelkezels....................................197 3.10. Tervezsi mintk.......................................199 3.10.1. Stratgia...........................................200 3.10.2. Front controller...............................202 3.10.3. MVC..................................................204 3.11. Sablonrendszerek.....................................210 3.11.1. Smarty..............................................211 3.11.2. A PHP mint sablonnyelv..............215 3.12. Tartalomkezel rendszerek.....................218 3.12.1. Clok.................................................219 3.12.2. Adatbzis felptse.......................220 3.12.3. Konfigurci....................................222
5. Tartalomjegyzk
3.12.4. Az Article osztly...........................223 3.12.5. Front-end.........................................228 3.12.6. Back-end..........................................231 3.12.7. A kinzet..........................................236 3.12.8. Nylt forrs tartalomkezel rendszerek....................................................237 3.13. Keretrendszerek........................................237 3.13.1. Yii......................................................237 4. Kliens oldali mkds..................................239 4.1. Alapok..........................................................239 4.1.1. Beilleszts a HTML kdba..............239 4.1.2. Hogyan kezdjnk neki?..................241 4.1.3. Esemny tulajdonsgok...................241 4.1.4. Dialgusablakok...............................242 4.2. Vltozk........................................................247 4.2.1. Vltoz deklarci............................247 4.2.2. Tpusok...............................................248 4.2.3. Literlok.............................................248 4.3. Kifejezsek s opertorok.........................249 4.3.1. Opertorok.........................................250 4.4. Vezrlsi szerkezetek..................................253 4.4.1. Elgazsok.........................................253 4.4.2. Ciklusok.............................................255 4.5. Fggvnyek.................................................257 4.6. Objektumok.................................................259 4.6.1. Alapok................................................259 4.6.2. Objektumok ltrehozsa..................260 4.6.3. Objektumknt viselked vltozk. 261 4.7. A dokumentum elrse s mdostsa...262 4.7.1. Dinamikus HTML............................263 4.7.2. DOM...................................................265 4.7.3. DOM megoldsok.............................267 4.7.4. Diszkrt JavaScript...........................268 4.8. Esemnykezels..........................................272 4.8.1. onload s onUnload.........................272 4.8.2. onFocus, onBlur s onChange........273 4.8.3. onSubmit............................................273 4.8.4. onClick, onMouseDown s onMouseUp.................................................274 4.9. Felhasznli lmny..................................274 4.9.1. Kliens oldali rlap ellenrzs.........274 4.9.2. Hossz listk bngszse helyett...277 4.10. AJAX bevezet.........................................281 4.10.1. Bevezet plda................................282 4.10.2. A bngszk AJAX tmogatsa...284 5. Tartalomjegyzk............................................285 6. Hogyan tovbb?............................................287
6. Hogyan tovbb?
287. oldal
6. Hogyan tovbb?
Ha eddig eljutottl s nem csak htralapoztl , kedves Olvas, akkor nyakig benne vagy a webfejleszts mocsarban. Mert aki belekstol s beleszeret az alkot munka rmeibe, azt fogva tartja, magval ragadja ez a fantasztikus vilg. n pedig veszem a btorsgot, s nem tiszteletlensgbl, hanem mint szakmabelit tegezni foglak e rvid fejezet erejig. Az alapok megismerse utn jl ltszik, hogy az ismeretlen nem cskkent, hanem mg nagyobb terleteket sejtet az ismeret hatrain tl. Ha csak szmba vesszk a ngy alaptmnk kvetkez lpseit, ltszik, hogy sok fel van mit bvteni a tudsunkon. A HTML 5 s a CSS3 szabvny mg nem vgleges, de nap mint nap jabb tutorialok, trk kk, megoldsok jelennek meg a szakmai kzssg tollbl. Taln soha nem volt ilyen ltvnyos verseny a bngszk fejleszti kztt, szinte hetente jelennek meg az jabb buildek valamelyik bngsz hza tjrl. A szabvnyok rengeteg jdonsgval kell a kzeljvben megismerkednnk. A JavaScript terletn is jelents verseny zajlik a bngsz gyrtk kztt. Nem csak a teljestmnyben, hanem a verziszmokban is nagy a prgs. Ezen kvl az elmlt 5-6 vben a Prototype109, jQuery110 s trsai nagyban gyorstjk, ltvnyoss s lvezetess teszik a fejlesztk munkjn kvl a ltogatk tevkenysgt is. Itt is sok tovbblpsi lehetsg van a tanulsban. A szerver oldalon a bemutatott keretrendszerek, tartalomkezel rendszerek, a tervezsi mintk mellett mg a PHP-n kvli vilg is htra van: a Perl, Ruby, Python, Java s .Net brmelyike vekre elegend tanulni valt nyjt. Vgl kt szemlyes javaslatot hagy adjak a szakmai tovbblpshez: Napi szinten olvasd a Weblabort111, csatlakozz a szakmai kzssg letbe a sajt aktivitsoddal is. Ismerd meg kzelebbrl a Drupalt112! A Drupal ismeret s az eddig elsajttott webfejlesztsi alapismeretek nagyszer szakmai htteret adnak a munkakeresshez, a karrierptshez vagy a vllalkozshoz, cg alaptshoz. Sok sikert kvnok! Nagy Gusztv
109 http://www.prototypejs.org/ 110 http://jquery.com/ 111 http://weblabor.hu/ 112 http://drupal.hu/

Web Programozás

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programozás

Uploaded by

Copyright:

Available Formats

Nagy Gusztv Web programozs alapismeretek

Web programozs alapismeretek

Szakmai s nyelvi lektor: Dr. Pap-Szigeti Rbert4

Kiad: Ad Librum Kft. 1107 Budapest, Mzsa tr 2-6.

http://creativecommons.org/licenses/by-nc-nd/2.5/hu/ http://www.kefo.hu/ http://www.gamf.hu/ http://pap-szigeti.hu/

1.1. A web s a ltogat viszonya

1.1.1. Webes tipograi alapismeretek

A webes tipogra korltai5

rrd (Radharadhya dasa): Web tipogra 1, 2, 3

1.1.2. Hogyan olvasunk a weben?

Kmn Veronika: A jelen forradalma: olvass a weben

Kovcs Balzs: rs s olvass a weben

1.1.3. Keres(re) optimalizls

1.1. A web s a ltogat viszonya

Jroli Jzsef: Mi a keresoptimalizls (Keresmarketing)?

Katona Zsuzsa: Rangsorolsi tvhitek

1.2. A web mkdse

1.2. A web mkdse

URL krst a kvetkezkppen alakthatja t:

1.2.3. Virtulis szerver

1.2. A web mkdse

1.2.4. HTTP protokoll

3. bra. A HttpFox mkds kzben

1.2. A web mkdse

PUT DELETE TRACE

1. tblzat. HTTP metdusok

2. tblzat. HTTP vlasz kdok

1.2.5. FTP protokoll

1.2. A web mkdse

1.2.6. Webcm (URL)

1.3. A tervezs folyamata

1.3.1. A honlap clja

1.3. A tervezs folyamata

Wolf Gbor: Top 10 honlap hiba s hogyan javtsd ki?

7even: Mit gondoljon t Weboldal indts eltt

1.3.2. A honlap megtervezse

Milyen oldalaink lesznek?

Milyen viszonyban llnak az oldalak egymssal?

1.3. A tervezs folyamata

Hogyan pljenek fel az oldalaink?

6. bra. Drtvz bra a MockFlow oldalrl

1.3. A tervezs folyamata

1.4. A fejlesztkrnyezet kialaktsa

1.4.1. Szerver opercis rendszer

1.4.2. Szerver alkalmazsok

XAMPP integrlt telept csomag

1.4. A fejlesztkrnyezet kialaktsa

7. bra. XAMPP Control Panel

1.4.3. A fejleszt gpe

1.4. A fejlesztkrnyezet kialaktsa HTML Validator22

8. bra. Forrs megtekintse a HTML Validator megjelentsvel

1.4. A fejlesztkrnyezet kialaktsa

10. bra. Web developer div informcik

Programozi editor, IDE

2.1. HTML alapok

A HTML llomnyt egyszer szveges (editor) programokkal (pl. Jegyzettmb) is ltrehozhatunk

2.1.2. Hogyan kezdjnk neki?

Mentsk el a szveget oldal.html nven!

11. bra. Az els HTML oldal a bngszben

2.1. HTML alapok

2.1.3. HTML szerkesztk

2.1.4. Hogy nzzk meg egy oldal HTML kdjt?

2.1.5. HTML tagok