webtartalomfejlesztesgyakjegyzet

49
1 Web Tartalomfejlesztés Gyakorlati jegyzet Készítette: Michnay Balázs [email protected] http://www.inf.u-szeged.hu/~michnay 2004 Előszó E jegyzet a Szegedi Tudományegyetem Web Tartalomfejlesztés c. kurzus gyakorlati anyagát fogalja össze. Annak ellenére, hogy a jegyzet gyakorlati jellegű, a példák könnyebb megértése érdekében találhatunk benne némi elméleti anyagot is. Az egyes példaprogramok/példadokumentumok többsége hozzáférhető és letölthető a következő oldalról: http://www.inf.u-szeged.hu/~michnay/webfejl.php. A hivatkozott, letölthető programok/dokumentumok azonosítóit mindenhol []-jelek között találjuk. Ha a példák szerint szeretnénk keresni, akkor használjuk a jegyzet végén található tartalomjegyzéket, mely a példákra való hivatkozások helyét sorolja fel. Tartalomjegyzék ELŐSZÓ .................................................................................................................................................. 1 A HTML ALAPJAI ................................................................................................................................... 4 A HTML-RŐL ÁLTALÁBAN ....................................................................................................................... 4 AZ ELSŐ HTML DOKUMENTUM ................................................................................................................ 5 Tag-ek HTML-ben ............................................................................................................................ 5 Kezdő-, és záró tag-ek ..................................................................................................................... 5 Megjegyzések .................................................................................................................................. 5 EGY HTML DOKUMENTUM FELÉPÍTÉSE, ELEMEI ....................................................................................... 6 A <HTML> tag .................................................................................................................................. 6 A <HEAD> tag .................................................................................................................................. 6 További tag-ek a HEAD-ben ............................................................................................................ 6 A <TITLE> tag .................................................................................................................................. 6 A <BODY> tag.................................................................................................................................. 7 SZÖVEGFORMÁZÁSI LEHETŐSÉGEK ......................................................................................................... 7 Elválasztók és bekezdések, avagy „bekezdésszintű” formázások .................................................. 7 Címsorok .......................................................................................................................................... 8 Karakterek megjelenítése, avagy „karakterszintű” formázások ....................................................... 8 Speciális karakterek ......................................................................................................................... 9 NÉHÁNY PÉLDADOKUMENTUM ............................................................................................................... 10 URL .................................................................................................................................................... 11 NÉHÁNY TOVÁBBI FONTOS HTML TAG ................................................................................................. 11 <A> (Anchor) .................................................................................................................................. 11 <IMG> (Image) ............................................................................................................................... 11 Néhány hasznos <IMG> attribútum: .......................................................................................................... 11

Upload: api-3760752

Post on 07-Jun-2015

449 views

Category:

Documents


2 download

DESCRIPTION

Web TartalomfejlesztésGyakorlati jegyzetKészítette:Michnay Balá[email protected]://www.inf.u-szeged.hu/~michnay2004ElőszóE jegyzet a Szegedi Tudományegyetem Web Tartalomfejlesztés c. kurzus gyakorlati anyagát fogaljaössze. Annak ellenére, hogy a jegyzet gyakorlati jellegű, a példák könnyebb megértése érdekébentalálhatunk benne némi elméleti anyagot is. Az egyes példaprogramok/példadokumentumok többségehozzáférhető és letölthető a következő oldalról: http://www.inf.u-szeged

TRANSCRIPT

Page 1: WebTartalomfejlesztesGyakjegyzet

1

Web Tartalomfejlesztés Gyakorlati jegyzet

Készítette: Michnay Balázs

[email protected] http://www.inf.u-szeged.hu/~michnay

2004

Előszó E jegyzet a Szegedi Tudományegyetem Web Tartalomfejlesztés c. kurzus gyakorlati anyagát fogalja össze. Annak ellenére, hogy a jegyzet gyakorlati jellegű, a példák könnyebb megértése érdekében találhatunk benne némi elméleti anyagot is. Az egyes példaprogramok/példadokumentumok többsége hozzáférhető és letölthető a következő oldalról: http://www.inf.u-szeged.hu/~michnay/webfejl.php. A hivatkozott, letölthető programok/dokumentumok azonosítóit mindenhol []-jelek között találjuk. Ha a példák szerint szeretnénk keresni, akkor használjuk a jegyzet végén található tartalomjegyzéket, mely a példákra való hivatkozások helyét sorolja fel.

Tartalomjegyzék

ELŐSZÓ .................................................................................................................................................. 1

A HTML ALAPJAI................................................................................................................................... 4

A HTML-RŐL ÁLTALÁBAN ....................................................................................................................... 4 AZ ELSŐ HTML DOKUMENTUM ................................................................................................................ 5

Tag-ek HTML-ben ............................................................................................................................ 5 Kezdő-, és záró tag-ek ..................................................................................................................... 5 Megjegyzések .................................................................................................................................. 5

EGY HTML DOKUMENTUM FELÉPÍTÉSE, ELEMEI ....................................................................................... 6 A <HTML> tag .................................................................................................................................. 6 A <HEAD> tag.................................................................................................................................. 6 További tag-ek a HEAD-ben ............................................................................................................ 6 A <TITLE> tag .................................................................................................................................. 6 A <BODY> tag.................................................................................................................................. 7

SZÖVEGFORMÁZÁSI LEHETŐSÉGEK ......................................................................................................... 7 Elválasztók és bekezdések, avagy „bekezdésszintű” formázások .................................................. 7 Címsorok .......................................................................................................................................... 8 Karakterek megjelenítése, avagy „karakterszintű” formázások ....................................................... 8 Speciális karakterek ......................................................................................................................... 9

NÉHÁNY PÉLDADOKUMENTUM ............................................................................................................... 10 URL .................................................................................................................................................... 11 NÉHÁNY TOVÁBBI FONTOS HTML TAG ................................................................................................. 11

<A> (Anchor) .................................................................................................................................. 11 <IMG> (Image) ............................................................................................................................... 11

Néhány hasznos <IMG> attribútum: .......................................................................................................... 11

Page 2: WebTartalomfejlesztesGyakjegyzet

2

<TABLE>........................................................................................................................................ 12 Néhány fontosabb <TABLE> attribútum: ................................................................................................... 12

Számozott, nem számozott, illetve definíciós felsorolás (<UL>, <OL>, <DL>).............................. 13 <FORM>......................................................................................................................................... 14 Űrlapvezérlők............................................................................................................................................. 14

FRAME-EK HASZNÁLATA........................................................................................................................ 16 Egyszerű frame-ek létrehozása ..................................................................................................... 16 Frame-ek egymásba ágyazása...................................................................................................... 17

WEBLAPSZERKESZTÉS A FRONTPAGE SZERKESZTŐVEL ......................................................................... 19 PHP ALAPOK ....................................................................................................................................... 21

PHP BLOKKOK ..................................................................................................................................... 21 MEGJEGYZÉSEK PHP PROGRAMBAN ..................................................................................................... 21 VÁLTOZÓK, KIFEJEZÉSEK, OPERÁTOROK................................................................................................ 22

Változók.......................................................................................................................................... 22 Konstansok..................................................................................................................................... 22 A PHP4 adattípusai ........................................................................................................................ 23 Érték hozzárendelése változóhoz .................................................................................................. 23 Összehasonlító operátorok ............................................................................................................ 24 Logikai operátorok.......................................................................................................................... 24 Tömbök........................................................................................................................................... 24

Az array() függvény ................................................................................................................................... 24 A szögletes-zárójel, mint a tömb létrehozásának eszköze ........................................................................ 25 Asszociatív tömbök.................................................................................................................................... 25 Többdimenziós tömbök.............................................................................................................................. 25 Tömbök bejárása....................................................................................................................................... 26

VEZÉRLÉSI SZERKEZETEK PHP-BEN...................................................................................................... 27 Többszörös szelekciós vezérlés: ................................................................................................... 27 Esetkiválasztásos szelekciós vezérlés........................................................................................... 27 Elöltesztelő ismétléses vezérlés .................................................................................................... 28 Hátultesztelő ismétléses vezérlés .................................................................................................. 28 Számlálásos ismétléses vezérlés .................................................................................................. 29

FÜGGVÉNYEK, ELJÁRÁSOK.................................................................................................................... 29 DINAMIKUS FÜGGVÉNYHÍVÁSOK............................................................................................................. 29 VÁLTOZÓK HATÓKÖRE .......................................................................................................................... 30 AZ INCLUDE() FÜGGVÉNY ...................................................................................................................... 31 FÁJLOK KEZELÉSE ................................................................................................................................ 31

Fájlok létrehozása .......................................................................................................................... 31 Fájlok törlése .................................................................................................................................. 31 Fájlok megnyitása .......................................................................................................................... 32 Olvasás fájlból ................................................................................................................................ 32 Írás fájlba, hozzáfűzés fájlhoz ........................................................................................................ 33 Kölcsönös kizárás .......................................................................................................................... 33

TOVÁBBI HASZNOS FÜGGVÉNYEK FÁJLOK HASZNÁLATAKOR..................................................................... 34 Fájl vagy könyvtár?.................................................................................................................................... 34 Fájl létezésének ellenőrzése ..................................................................................................................... 34 Fájlméret lekérdezése ............................................................................................................................... 34 Fájlállapot lekérdezése .............................................................................................................................. 34

EGY KONKRÉT PÉLDA – WEBOLDAL GENERÁLÁSA ................................................................................... 35 A megjelenit.php............................................................................................................................. 36 A procedures.php ........................................................................................................................... 37

ŰRLAPOK HASZNÁLATA ......................................................................................................................... 38 Önmeghívó HTML kód ................................................................................................................... 38

EGY KONKRÉT PÉLDA – ŰRLAPFELDOLGOZÁS......................................................................................... 39

Page 3: WebTartalomfejlesztesGyakjegyzet

3

MÁSIK PÉLDA – SZÁMKITALÁLÓS JÁTÉK .................................................................................................. 40 SZÁMKITALÁLÓS JÁTÉK HA A REGISTER_GLOBALS ENGEDÉLYEZETT......................................................... 41 SZÁMKITALÁLÓS JÁTÉK ÁTIRÁNYÍTÁSSAL................................................................................................ 41 ŰRLAP FELDOLGOZÁSA KÜLSŐ PHP PROGRAMMAL ................................................................................ 42

Vendégkönyv program megvalósítása........................................................................................... 42 ŰRLAP GENERÁLÁSA PHP PROGRAMMAL............................................................................................... 43 ÁLLAPOTOK TÁROLÁSA PHP SEGÍTSÉGÉVEL .......................................................................................... 44

Sütik................................................................................................................................................ 44 A sütik felépítése ....................................................................................................................................... 44 Sütik létrehozása PHP-vel ......................................................................................................................... 44 Sütik törlése............................................................................................................................................... 45

Munkamenet sütik .......................................................................................................................... 45 Lekérdező karakterláncok használata............................................................................................ 46

Lekérdező karakterláncok készítése.......................................................................................................... 46 Adat továbbítása lekérdező karakterláncok segítéségével – példa ........................................................... 46 A lekérdező karakterláncok feldolgozása – példa folytatása ..................................................................... 47 Lekérdező karakterláncok létrehozása függvénnyel .................................................................................. 47 A függvény megvalósítása:........................................................................................................................ 48

IRODALOM ........................................................................................................................................... 49

TARTALOMJEGYZÉK A PÉLDÁKHOZ .............................................................................................. 49

Page 4: WebTartalomfejlesztesGyakjegyzet

4

A HTML alapjai

A HTML-ről általában

Mi az a HTML? Ahhoz, hogy az Interneten közzétett információk világszerte mindenhol megtekinthetők legyenek szükség van egy egységes nyelvre. A World Wide Web által használt ilyen nyelv a HTML (HyperText Markup Language), mely egy leíró nyelv. Definiálja a megjelenítendő információk megjelenítési módját, hiperhivatkozások által interaktivitást tesz lehetővé (dokumentumok közötti kapcsolat), mely lehet helyi vagy távoli dokumentum is vagy akár egy más Internetes szolgáltatás (pl. FTP).

Ami nem a HTML Fontos figyelmet szentelni a HTML korlátaira is. Fontos megjegyezni, hogy a HTML:

- nem egy fajta szövegszerkesztő eszköz, hiszen elsődleges cél a dokumentum struktúrájának és megjelenésének definiálása

- nem egy programozási nyelv, hiszen segítségével egyetlen vezérlési szerkezet sem valósítható meg

Tartalom vagy megjelenés? Hatékony, eredményes HTML dokumentumok készítéséhez tisztában kell lennünk azzal, hogy az alapvető cél nem a megjelenítés, hanem a „publikálandó” adatok struktúrájának létrehozása a legszéleskörűbb hozzáférhetőség céljából. Habár sok lehetőség adódik különböző formázásokra: betűformázások, sortörés, táblázatok, hasábok, stb… amire azért fontos figyelmet szentelni, mert hátrányára [vagy előnyére] is válhat a dokumentumnak. De a HTML-nél a tartalom elsődleges, a megjelenés másodlagos, mivel ez kevésbé kiszámítható a sokféle böngészőprogramok miatt.

A struktúra létrehozására a HTML – természetesen – számos lehetőséget biztosít, például a címsorok, felsorolás (számozás), bekezdések, beágyazott képek, stb… mind a HTML által definiáltak, függetlenül attól, hogy ezek milyen módon kerülnek megjelenítésre egy böngészőprogram által.

Ha a HTML-re úgy tekintünk mint „dokumentum-szerkesztőre”, sok csalódással kell majd szembenézzünk, mert a HTML nem rendelkezik minden olyan formázási lehetőséggel, amivel például a FrameMaker vagy a Word igen. Használjuk ki inkább a HTML által nyújtott TAG-ek bőséges választékát, jelölvén a dokumentum szemantikáját (amely hiányzik mind a Word-ből és FrameMaker-ből). A struktúra létrehozására kínált elemek formázásra való felhasználása nem kívánt eredményekhez vezethet, olyan dokumentumot eredményezhet, mely megjelenése böngészőfüggő lesz.

Konklúzióként: sose erőltessünk a HTML-t olyan dolgok létrehozására, melyre azt sosem tervezték.

Milyen lehetőségek vannak HTML dokumentumok készítéséhez? HTML dokumentumok szerkesztéséhez egy egyszerű szövegszerkesztő is elég. Szükségünk lesz emellé még egy böngészőprogramra, mely megjeleníti az elkészített dokumentumot.

Rengeteg HTML szerkesztő áll rendelkezésre, mi gyakorlaton a következő alkalmazásokkal fogunk megismerkedni:

- Jegyzettömb

- MS FrontPage

- Macromedia Dreamweaver 4.0

Page 5: WebTartalomfejlesztesGyakjegyzet

5

Az első HTML dokumentum [elso.htm]

<HTML> <HEAD> <TITLE>Elso HTML dokumentum</TITLE> </HEAD> <BODY> <H2>Elso HTML dokumentum</H2> Hello, </I>World Wide Web</I> <!-- a "Hello Vilag" mar unalmas --> <P>A Google kereso cime: <BR> <A HREF="http://www.google.com">Kattints ide!</A> <P>A dokumentumot keszitette: <CITE>(ide ird a sajat neved)</CITE> <BR>&copy;2004 </BODY> </HTML>

Tag-ek HTML-ben Bizonyára feltűnt, hogy a forrásban található szöveg nagy részét a böngésző nem jelenítette meg. Ha jobban megnézzük, akkor láthatjuk, hogy mindössze a „<” és „>” jelek közötti szöveg nem került megjelenítésre, minden más igen. A HTML a tag [teg]-eket állítja rendelkezésünkre annak definiálására, hogy a tartalmat hogyan kezelje, vagy jelenítse meg a böngésző program. Például a forrásban található <I> tag arra utasítja a böngészőprogramot, hogy az azt következő szöveget dőlt stílusban jelenítse meg. A tag kis- és nagybetűkkel is írható. A tag első része egy szó, ami általában utal annak funkciójára. Minden ezt követő (de a > jelet megelőző) szöveg a tag speciális attribútumai, melyek egy kulcsszóból egy = jelből és egy „” jelek között megadott értékből állnak. Ilyen a példadokumentumban is található:

<A HREF="http://www.google.com">

Kezdő-, és záró tag-ek A HTML kulcsszavak túlnyomó része csak a dokumentum egy adott részen fejtik ki hatásukat. Ez a rész a kezdő kulcsszó (kezdő tag) és a záró kulcsszó (záró tag) között helyezkedik el. A záró kulcsszó a kezdő kulcsszó maga, melyet egy / jel előz meg. Például a <I> kezdő kulcsszó „bezáró fele” a </I>, tehát a dőlt stílus csak az ezen kulcsszavak között megadott szövegrészre vonatkozik.

Bezáró kulcsszavak sosem rendelkeznek attribútumokkal és léteznek olyan kulcsszavak is, melyek nem rendelkeznek záró kulcsszóval.

Megjegyzések A forrásdokumentumban elhelyezhetünk megjegyzéseket is, ezt egyáltalán nem veszi figyelembe a böngészőprogram.

<!-- ez itt egy megjegyzes -->

HTML kulcsszó (tag) Attribútum Attribútum értéke

Megjegyzés kezdődik

Megjegyzés vége

Page 6: WebTartalomfejlesztesGyakjegyzet

6

Egy HTML dokumentum felépítése, elemei

A <HTML> tag Egy HTML dokumentum a <HTML> kulcsszóval kezdődik. Ez jelzi a böngészőnek, hogy a jelen dokumentum a HTML leíró nyelv szabályaihoz igazodik. A szabvány HTML megköveteli ezt a kulcsszót a dokumentumban, de a böngészők nagy része e nélkül is képes azt megjeleníteni.

A HTML kulcsszó lehetséges attribútumai: DIR LANG VERSION

A <HEAD> tag Mint ahogy a példánkban is látszik, egy HTML dokumentum 2 fő részre oszlik: HEAD-re és BODY-ra. A HEAD a „fejrész információkat” tartalmazza. A HTML és a BODY (illetve FRAMESET kulcsszavak között helyezzük el. Mind a kezdő, mind pedig a záró kulcsszavak elhagyhatók, mert a böngészők számára egyértelmű, hogy az ezek között megadott kulcsszavak a HEAD elemei, de megadása a könnyebb olvashatóság és a szabványhoz való legjobb egyezés miatt erősen ajánlott.

A HEAD kulcsszó lehetséges attribútumai: DIR LANG PROFILE

További tag-ek a HEAD-ben A HEAD maga is további kulcsszavakat is tartalmazhat a jobb tartalomkezelés segítésére. Ilyenek lehetnek például a következők: <BASE>

Egy dokumentumon belüli hivatkozások lehetnek abszolútak vagy relatívak. Relatív hivatkozások esetén a kiindulási címet a <BASE> kulcsszóval definiálhatjuk. Kötelezően a fejrészben kell megadni!

<META>

Segítségével a dokumentummal kapcsolatos további hasznos információkat adhatunk meg. A META kulcsszónak nincs tartalma, az információk megadása attribútumain keresztül történik. Mint már korábban láttuk, az attribútum név/érték (name/content) párokból áll. A HTML nem állít rendelkezésünkre semmilyen előre definiált név értéket, bármit használhatunk, ami hasznos lehet a dokumentumforrásunk olvasóinak. Gyakran használt név például a keywords, melynek érték-párja olyan kulcsszavakat tartalmaz, mely az adott dokumentumra jellemző. Például egy olyan weboldal, mely különböző zeneszerzők életrajzait tartalmazza, forrásszinten tartalmazhatja a következő sort is a HEAD-en belül:

<meta name="keywords" content="composer, classical, music, biography, memoir">

Számos Internetes keresőmotor új lapot a keywords név tartalma segítségével regisztrálja.

<SCRIPT>

Lehetőséget ad egy vagy több script definiálására, melyet a dokumentum elemei felhasználhatnak. <STYLE>

A dokumentum alapvető jellemzőit a CSS segítségével (Cascading Style Sheet) befolyásolhatjuk, melyet a STYLE-on belül definiálhatunk.

A <TITLE> tag A TITLE a dokumentum címét határozza meg. Ez a cím a böngészőablak címsorában (vagy néhány böngésző esetében a státussorban) fog megjelenni. A TITLE záró részét sosem hagyhatjuk el és közöttük csak szöveg adható meg. Bármi, a szövegtől eltérő tartalmat (hivatkozás, kép, stb…) a böngésző ignorálja.

A TITLE kulcsszó lehetséges attribútumai: DIR LANG

Page 7: WebTartalomfejlesztesGyakjegyzet

7

A <BODY> tag Magát a tartalmat BODY tag-en belül helyezzük el. Számos attribútuma segítségével könnyedén alakíthatjuk dokumentumunk alapvető megjelenítési tulajdonságait. Néhány böngészőprogram kibővített tag-készlettel rendelkezik, mely további segítséget nyújt a megjelenés pontosításában. Egy nagyon egyszerű HTML dokumentum tartalmazhat csak szöveget a BODY tag-en belül, de egy összetettebb dokumentum tartalmazhat bonyolult formázást, grafikát, táblázatokat, stb…

Mivel a böngésző számára egyértelmű a BODY tag dokumentumon belüli helye, ezért mind a kezdő, mind pedig a záró tag következmény nélkül elhagyható, de mindig érdemes megadni.

A BODY attribútumait három csoportba sorolhatjuk:

- Egyes attribútumok a dokumentum megjelenéséért felelősek. Ilyenek például a következők:

ALINK, BACKGROUND, BGCOLOR, LINK, VLINK, TEXT, stb…

- A második kategóriába a programozható komponenseket sorolhatjuk, ezek gyakorlatilag eseménykezelők. Néhány ezek közül:

ONKEYPRESS, ONKEYUP, ONMOUSEMOVE, ONMOUSEOVER, stb…

Eseménykezelőkre későbbi gyakorlatokon fogunk példát nézni!

- A harmadik kategória a BODY azonosításáért felelős későbbi hivatkozások esetére. Ezekből kettő létezik:

ID, TITLE

Ezek többségére később példát is nézünk!

Szövegformázási lehetőségek

Elválasztók és bekezdések, avagy „bekezdésszintű” formázások A böngészőprogram a megjelenítendő szöveg szélességét az ablak szélességéhez igazítja. Az ablak szélességének változtatása a szöveg egyes sorainak változtatását vonja maga után. A folyó szöveg elhelyezkedését, igazítását a HTML a

- <DIV> (a dokumentum egyértelmű részekre tagolása),

- a <P> (bekezdés definiálása)

- és a <BR> (sortörés) segítségével szabályozza.

<DIV>

A DIV a HTML 3.2 során vált elérhetővé. Különálló egységekbe szervezés céljából került a leíró nyelvbe, ugyanis segítségével önálló részekre tagolhatjuk a dokumentumot. Attribútumai segítségével az egységbe zárt szöveg megjelenését, azonosítását, különböző eseményekre való reagálását vezérelhetjük. Néhány az attribútumok közül:

ALIGN

Az attribútum értéke a szövegblokk igazítását határozza meg. Lehetséges értékei:

LEFT (balra igazítás, ez az alapértelmezett)

CENTER (középre igazítás)

RIGHT (jobbra igazítás)

JUSTIFY (sorkizárt)

Erre példát lentebb láthatunk.

ONCLICK, ONKEYDOWN, ONKEYPRESS,stb… (avagy eseménykezelő attribútumok)

Szerepe megegyezik a már ismertetett eseménykezelőkkel. Egy DIV-en belüli eseménykezelő természetesen csak az érintett szövegrészre vonatkozik.

Page 8: WebTartalomfejlesztesGyakjegyzet

8

<P>

A <P> egy bekezdés elejét jelöli. A kezdő TAG az első bekezdés előtt, a bezáró (</P>) pedig akár mindenhol elhagyható. Két bekezdést egy üres sorral és még valamennyi üres területtel választja el a böngészőprogram. Bekezdésen belüli új sort pedig a <BR> segítségével tudunk kezdeni. Akárcsak a DIV-nek, a P-nek is vannak ALIGN és eseménykezelő attribútumai (és még persze sok más is) ugyanazokkal az értékekkel.

<BR>

A <BR> (break) sortörésre kényszeríti a böngészőprogramot.

Címsorok A címsorok folyó szöveg hierarchikus felépítését teszik lehetővé. A HTML hat szintű hierarchiával (hat különböző TAG-el) segíti a címsorok létrehozását:

<H1> Címsor 1 </H1>

<H2> Címsor 2 </H2>

<H6> Címsor 6 </H6>

Számos attribútuma biztosítja a pontos testreszabhatóságot. (ALIGN, eseménykezelők, stb…)

Karakterek megjelenítése, avagy „karakterszintű” formázások Ezt a kategóriát két részre osztjuk:

- Jelentésalapú formázás

A Jelentésalapú formázás használatakor nem maga a formázás lebegjen előttünk, mint inkább a formázandó szöveg „típusa” mondanivalója. Például szeretnénk ha a dokumentumunkon belül minden idézet vagy matematikai definíció ugyanúgy jelenjen meg. Segítségével könnyebb konzisztensek maradjunk ezen előre definiált formázási lehetőségekkel.

A következő táblázat néhány jelentésalapú formázást és azok jelentését foglalja össze:

TAG Megjelenés IE-ben Megjelenés Netscape-ben

<CITE> Idézet, döntve jelenik meg Idézet, döntve jelenik meg

<DFN> Definíció, döntött stílusú Nem támogatja

<STRONG> Lényeg kiemelése, vastagított stílusú Lényeg kiemelése, vastagított stílusú

<VAR> Változó név, döntött stílusú Változó név, döntött stílusú

- Karakteralapú formázás

Itt nem fektetünk hangsúlyt arra, hogy az adott szöveg milyen mondanivalóval rendelkezik. Az egyetlen lényeg, hogy a szöveg milyen formában fog megjelenni. Az összes ilyen formázó TAG-hez záró TAG-et is kötelező megadni! Fontos megjegyezni, hogy ezen formázások csak a megadott szövegrészt formázzák, ha dokumentum szintű lehetőséget keresünk formázásra, alkalmazzunk Style Sheet-eket.

...

Page 9: WebTartalomfejlesztesGyakjegyzet

9

A következő táblázat néhány karakteralapú formázást és azok jelentését foglalja össze:

TAG Jelentés / Megjelenés

<B> Félkövér stílus

<BIG> Megnövelt betűméret <BLINK> Villogó szöveg

<I> Dőlt stílus

<SMALL> Csökkentett betűméret

<S>,<STRIKE> Áthúzott szöveg

<SUB> Süllyesztett

<SUP> Emelt

<TT> Írógép stílus

<U> Aláhúzott stílus

Speciális karakterek Gyakran előfordulnak olyan szituációk, hogy olyan karaktereket kéne beszúrni a dokumentumba, melyek valamilyen más jelentéssel bírnak a HTML számára. Ilyen lehet például a következő matematikai kifejezés:

A + B > C < D – E

Ha a relációs jeleket önmagunkban írnánk bele a forrásba, akkor az megzavarná a böngészőt, ezért speciális módon kell megadjuk ezeket – és még számos más – karaktert.

Az alábbi táblázat néhány speciális karaktert (beleértve a magyar ékezetes betűket) és annak forrásban való megadási módját foglalja össze:

Karakter HTML kód Másképpen

" &quot; &#34;

& &amp; &#38;

< &lt; &#60;

> &gt; &#62;

szóköz &nbsp; &#160;

¦ &brvbar; &#166;

§ &sect; &#167;

¨ &uml; &#168;

© &copy; &#169;

« &laquo; &#171;

® &reg; &#174;

° &deg; &#176;

± &plusmn; &#177;

¶ &para; &#182;

» &raquo; &#187;

Á &Aacute; &#193;

É &Eacute; &#201;

Í &Iacute; &#205;

Ó &Oacute; &#211;

Ő &Otilde; &#213;

Ö &Ouml; &#214;

Ú &Uacute; &#218;

Ű &Ucirc; &#219;

Ü &Uuml; &#220;

á &aacute; &#225;

é &eacute; &#233;

í &iacute; &#237;

ó &oacute; &#243;

ő &otilde; &#245;

ö &ouml; &#246;

ú &uacute; &#250;

ű &ucirc; &#251;

ü &uuml; &#252;

Page 10: WebTartalomfejlesztesGyakjegyzet

10

Így a fenti kifejezés HTML forrásba írható változata a következő:

A + B &gt; C &lt; D – E

Miért lehet szükség az ékezetes betűk ilyen formában való megadására, ahelyett, hogy egyszerűen begépelnénk őket? Mert azokon a gépeken, melyek nem rendelkeznek a megfelelő kódlappal, képtelenek megjeleníteni a mi ékezetes betűinket. A kódolt forma segít kiküszöbölni ezt a problémát. Számos weblapszerkesztő ékezetes betű bevitelekor automatikusan átalakítja azt a megfelelő kódra. Ilyen például a Macromedia Dreamweaver.

Néhány példadokumentum Az első dokumentumnak adjunk meg háttérszínt, majd a szöveg egy részét tegyük félkövérré:

<HTML>

<HEAD>

<TITLE> Hatterszin </TITLE>

</HEAD>

<BODY BGCOLOR="#AABBEE"> Ez a dokumentum <STRONG>kék</STRONG> háttérrel rendelkezik.<BR> </BODY>

</HTML>

A második dokumentum tartalmazzon három bekezdést, melyek legyenek rendre balra, középre és jobbra igazítottak:

<HTML>

<HEAD>

<TITLE> Bekezdesek </TITLE>

</HEAD>

<BODY BGCOLOR="#AABBEE"> Ebben a dokumentumban <I>három</I> bekezdés található!<BR> Ez egy balra igazított bekezdés, <P ALIGN=CENTER> Ez egy középre igazított,</P> <P ALIGN=RIGHT> Ez pedig egy jobbra igazított bekezdés.</P> </BODY>

</HTML>

A fenti forrásokat a helyi gép böngészőprogramjával vagy a következő weboldal segítségével egyaránt megnézheted: http://htmlspec.web.elte.hu/gyakorlas/index.html

Page 11: WebTartalomfejlesztesGyakjegyzet

11

URL Az Interneten található dokumentumok mindegyikének az egyértelmű azonosíthatóság érdekében teljesen egyedi azonosító címmel kell rendelkezzen. Ez az URL (Uniform Resource Locator). Az URL három részből álló:

• Protokoll • Kiszolgáló domain neve • Dokumentum teljes elérési útja.

Pl:

http://www.inf.u-szeged.hu/~michnay/images/kep.jpg ftp://ftp.software.com/pub

Néhány további fontos HTML TAG

<A> (Anchor) Segítségével egy hiperlink forrását, illetve célját határozhatjuk meg. Leggyakrabban a HREF attribútummal fordul elő, melynek értéke a cél URL-je. A link kiválasztásához a kulcsszó tartalmában megadott szövegre, képre, stb… kell kattintsunk. Egy link a forrás és cél megadásával a következőképpen néz ki:

<A HREF="http://www.inf.u-szeged.hu"> Az Informatika Tanszék oldala </A>

A böngészőben a kulcsszavak közti rész kiemelten jelenik meg és a rajta való kattintás során az attribútum értékében megadott URL-re ugrik a böngészőprogram.

<IMG> (Image) [img-ol-ul-dd.htm]

Képek beágyazásához az <IMG>-t használjuk, melynek SRC attribútuma határozza meg a kép URL-jét (amely természetesen egy helyi file elérési útja is lehet). Ezek a képek a folyó szöveg részévé válnak, olyanok, mintha egy nagy karaktert képeznének. Lényeges attribútum az ALIGN, mely a szöveg, képhez képesti pozícióját határozza meg. A tag-nek nincs tartalma, így záró-fele sincsen. Lehetőségünk van arra, hogy egy kép különböző részeihez különböző linkeket társítsunk. Ezt nevezzük a képek MAP-elésének, melyre példát későbbi gyakorlatokon fogunk látni.

Néhány hasznos <IMG> attribútum: ALT

Egy magyarázó szöveg, mely az egérkurzor kép fölé való mozgatása során jelenik meg.

WIDTH

Megjelenítés szélessége (különbözhet a kép tényleges szélességétől).

HEIGHT

Megjelenítés magassága (különbözhet a kép tényleges magasságától).

BORDER

A kép köré rajzolt keret vastagsága pixelben.

Pl:

Ez a sz&ouml;veg a k&eacute;p <IMG SRC="kep.jpg" ALIGN=TOP> tetej&eacute;hez igazodik.

<P ALIGN=CENTER> Ez a sz&ouml;veg a k&eacute;p <IMG SRC="kep.jpg" ALIGN=MIDDLE> k&ouml;zep&eacute;hez igazodik.

Page 12: WebTartalomfejlesztesGyakjegyzet

12

<P ALIGN=RIGHT> Ez a sz&ouml;veg a k&eacute;p <IMG SRC="kep.jpg" ALIGN=BOTTOM> alj&aacute;hoz igazodik.

Ennek eredménye:

<TABLE> [table.htm]

Táblázatok létrehozására öt tag áll rendelkezésünkre:

• <TABLE> – Minden táblázat ezzel kell kezdődjön. A táblázat végét a </TABLE> jelzi. • <CAPTION> – Táblázat leírása. • <TR> (Table Row) – a táblázat egyetlen sorát definiálja. • <TH> (Table Header) – a táblázat fejléc sorát adja meg. • <TD> (Table Data) – a táblázat egyetlen cellájának értéke, amely szöveg, kép vagy akár egy

másik táblázat is lehet.

Néhány fontosabb <TABLE> attribútum: BORDER

A táblázat vonalainak vastagsága pixelben. 0 érték esetében a táblázat vonalai láthatatlanok.

BORDERCOLOR

A Táblázat keretszínét határozza meg, mely megadása ugyanolyan módon történik, mint azt már korábban láttuk. (#RRGGBB színkóddal)

BGCOLOR

A táblázat háttérszínét határozza meg a megszokott #RRGGBB színkóddal.

VALIGN

A táblázat celláiban a függőleges igazítást határozza meg

ALIGN

A táblázat celláiban a vízszintes igazítást határozza meg.

A könnyebb érthetőség kedvéért vizsgáljuk a következő példát:

<TABLE BORDER=1 BORDERCOLOR="#AAAAAA" BGCOLOR="#AADDEE"> <TR> <TH>Igaz&iacute;t&aacute;s</TH> <TH>Top</TH> <TH>Baseline</TH>

Három bekezdés, mindhárom máshova igazítva: (LEFT, CENTER, RIGHT)

Mindhárom kép esetében a szöveg pozíciója különböző: (TOP, MIDDLE, BOTTOM)

Page 13: WebTartalomfejlesztesGyakjegyzet

13

<TH>Center</TH> <TH>Bottom</TH> </TR> <TR ALIGN=CENTER> <TH><H1>Ez is &lt;TH&gt;<BR>K&eacute;t sorban</H1></TH> <TD VALIGN=TOP>Alma</TD> <TD VALIGN=BASELINE>K&ouml;rte</TD> <TD VALIGN=MIDDLE>Szilva</TD> <TD VALIGN=BOTTOM>Barack</TD> </TR> </TABLE>

Ennek eredménye:

Számozott, nem számozott, illetve definíciós felsorolás (<UL>, <OL>, <DL>) [img-ol-ul-dd.htm]

Háromféle felsorolási típust különböztetünk meg

• Számozott (Ordered List - <OL>) • Nem számozott (Unordered List - <UL>) • Definíció felsorolást (Definition List - <DL>)

A listaelemek definiálásához a definíció felsorolás kivételével az <LI> (List Item) tag-et használjuk, melynek nincs záró fele. A következő példa a számozott és nem számozott felsorolásra mutat példát:

<UL> <LI>Egy <LI>kett&ocirc; <LI>H&aacute;rom </UL> <OL> <LI>Egy <LI>kett&ocirc; <LI>H&aacute;rom </OL>

Ennek eredménye:

A definíció felsorolás egy kicsit komplikáltabb. Segítségével olyan felsorolást hozhatunk létre, mely egy „címsorból” (Definition Title - <DT>) és annak kifejtéséből áll (Definition Definition - <DD>).

Pl:

<DL> <DT>K&ouml;r

<TR> (egész sor)

<TH> (címet tartalmazó cella)

<TD> (a cella tartalma)

<UL> és benne 3 db <LI>

<OL> és benne 3 db <LI>

Page 14: WebTartalomfejlesztesGyakjegyzet

14

<DD>A k&ouml;r azon pontok halmaza a s&iacute;kban, mely egy adott pontt&oacute;l azonos t&aacute;vols&aacute;gra vannak. <DT>G&ouml;mb <DD>A g&ouml;mb azon pontok halmaza a t&eacute;rben, mely egy adott pontt&oacute;l azonos t&aacute;vols&aacute;gra vannak. </DL>

Ennek eredménye:

<FORM> [form.htm]

Adatok bekérésére felhasználótól alapvető szükség lehet. A <FORM> elemei többféle módon történő adatbevitelt tesznek lehetővé. Az ezen elemekből felépített, a felhasználó által kitöltött űrlapot egy gomb lenyomása után a böngészőprogram a szervernek küldi, mely feldolgozza azt. (űrlapok feldolgozására is fogunk majd példát nézni). Mi a helyzet azon szerverek esetében, melyeknél a script nyelv feldolgozást (például biztonsági okok miatt) letiltották? A böngészőprogramok túlnyomó része képes az űrlap adatait közvetlenül egy megadott email címre elküldeni. Ilyenkor az ACTION attribútum nem a feldolgozó program URL-je, hanem egy „mailto:” utáni email cím.

A <FORM> tag attribútumai közül kettőt kötelező megadni. Az egyik (ACTION) az űrlapot feldolgozó program URL-je (nálunk ez egy PHP program lesz), a másik (METHOD) pedig az űrlap adatainak elküldési módját határozzák meg (GET vagy POST). A GET és POST közti különbségekkel a PHP kapcsán fogunk foglalkozni.

Űrlapvezérlők <INPUT>

Segítségével számos adatbevitelre alkalmas vezérlőt hozhatunk létre. Habár nagyon sok attribútummal rendelkezik az <INPUT>, ezek közül csak kettőt kötelező megadni: TYPE, NAME

A TYPE attribútum értékével határozhatjuk meg milyen típusú vezérlőt szeretnénk létrehozni. Ezen értékeket és a HTML forrás eredményét a következő példa szemlélteti. Természetesen a példában szereplő attribútumok mellett még sok más attribútum is szerepelhetne. Csak a kötelezőeket tüntettem fel.

<DT> <DD>

Page 15: WebTartalomfejlesztesGyakjegyzet

15

<FORM ACTION="mailto:[email protected]" METHOD="POST">

INPUT TYPE=BUTTON<BR> <INPUT TYPE=BUTTON NAME=gomb VALUE="Gomb"> <BR><BR> INPUT TYPE=CHECKBOX<BR> 1: <INPUT TYPE=CHECKBOX CHECKED NAME=valaszto1 VALUE="Valaszto1"><BR> 2: <INPUT TYPE=CHECKBOX NAME=valaszto2 VALUE="Valaszto2"> <BR><BR> INPUT TYPE=FILE<BR> <INPUT TYPE=FILE NAME=file VALUE="file"> <BR><BR> INPUT TYPE=IMAGE<BR> <INPUT TYPE=IMAGE SRC="kep.jpg"> <BR><BR> INPUT TYPE=PASSWORD<BR> <INPUT TYPE=PASSWORD NAME=passwd VALUE="passwd"> <BR><BR> INPUT TYPE=RADIO<BR> 1: <INPUT TYPE=RADIO CHECKED NAME=radio VALUE="radio1"><BR> 2: <INPUT TYPE=RADIO NAME=radio VALUE="radio2"> <BR><BR> INPUT TYPE=TEXT<BR> <INPUT TYPE=TEXT NAME=text> <BR><BR> INPUT TYPE=RESET<BR> <INPUT TYPE=RESET> <BR><BR> INPUT TYPE=SUBMIT<BR> <INPUT TYPE=SUBMIT> <BR><BR>

</FORM>

Természetesen nincs idő minden HTML tag tárgyalására. A szintén letölthető [html.hlp] egy HTML referencia (angol nyelven), további leírások abban találhatók.

Az erre való kattintás megegyezik a SUBMIT-ra való kattintással, azaz elküldi az űrlapot.

Minden vezérlő az alapértelmezett állapotába kerül

Page 16: WebTartalomfejlesztesGyakjegyzet

16

Frame-ek használata A frame-ek használatával lehetőségünk van olyan oldalak létrehozására, mely a böngészőablakunkat több, egymástól független részekre osztja. Ezek mindegyikében más-más dokumentumot jeleníthetünk meg.

Fontos dolog a frame-ekkel kapcsolatban, hogy ezek létrehozását egy, a bennük megjelenő dokumentumoktól független HTML dokumentum végzi. Az ilyen dokumentum mást nem is tartalmaz.

Frame-ek létrehozásához kettő HTML tag-et fogunk felhasználni: <FRAMESET> és <FRAME>. A <FRAMESET> kulcsszó a megfelelő attribútumokkal és azok értékeivel magát az elválasztás módját, a <FRAME> pedig az elválasztott részek további tulajdonságait határozza meg (a <FRAMESET> kulcsszó rendelkezik bezáró résszel is, a <FRAME> nem). Ezek együttesen bármilyen struktúrájú részekre bontást képesek megvalósítani. A frame „definícióját” a </HEAD> és a <BODY> között végezzük el.

Egyszerű frame-ek létrehozása Használatukat legkönnyebb példákon keresztül érthetjük meg. Hozzunk létre egy olyan dokumentumot, mely három egyenlő magasságú részre („sorra”) osztja a böngészőablakot:

<HTML> <HEAD>Frame példa 1</HEAD>

A következő sor frame létrehozását írja elő. A ROWS attribútum „sorok” létrehozását írja elő. Az, hogy hány sor lesz, az az attribútum értékétől függ. Jelen példa három sort hoz létre. A * minden esetben a fennmaradó helyet jelenti, így a *,*,* három egyenlő nagyságú részt jelöl.

<FRAMESET ROWS=”*,*,*”>

A <FRAMESET> kulcsszót az egyes részeket meghatározó <FRAME> kulcsszavak követik. Összességében a létrehozott részek száma és a <FRAME> kulcsszavak száma meg kell egyezzen. Vízszintes részekre osztás esetén a <FRAME> megadások fentről lefelé haladó sorrendben, függőleges részekre osztás esetén balról jobbra történik. Tehát a következő sor a vízszintesen elosztott frame-ek közül a legfelsőt definiálja, jelen esetben megadja, hogy ebbe a részben a valami.htm dokumentumot kell megjeleníteni.

<FRAME SRC=”valami.htm”>

A középső rész és a legalsó rész is ugyanazt a dokumentumot tartalmazzák:

<FRAME SRC=”valami.htm”> <FRAME SRC=”valami.htm”>

Frame létrehozásának vége:

</FRAMESET> <BODY> </BODY>

Ennek eredménye kb. így nézne ki, feltételezve, hogy a valami.htm a „Hello” szöveget tartalmazza:

Ha a <FRAMESET> kulcsszó ROWS helyett a COLS attribútumot tartalmazza, akkor a felosztás oszloposan történik és az eredmény ehhez hasonló lenne:

Hello

Hello

Hello

Page 17: WebTartalomfejlesztesGyakjegyzet

17

Ha azt szeretnénk, hogy egy adott rész mérete pontos érték legyen, akkor a COLS (vagy ROWS) attribútum értéke legyen egy konkrét érték. A ROWS=”50,100,*” azt jelenti, hogy a vízszintes felosztás legfelső része legyen 50 pont magas, a középső legyen 100 pont magas, a legalsó pedig a fennmaradó rész. A felosztás mértékét %-os arányokban is kifejezhetjük: ROWS=”10%,70%,20%”.

Frame-ek egymásba ágyazása [frame.htm] [frame2.htm]

Képzeljük el a következő felosztásokat:

Az ilyen felosztások létrehozása előtt azok létrehozásának sorrendjét érdemes átgondolni. Az első esetben először vízszintesen osztjuk két részre az ablakot, majd a lenti részt 2 oszlopra, a második esetben pont fordítva: először létrehozunk két függőleges részt, majd a második oszlopot két vízszintes részre osztjuk. Ezek ismeretében a létrehozás egyszerű, a megfelelő helyen újabb frame létrehozását kérjük.

Az első ábra megvalósítása:

<HTML> <HEAD> <TITLE>Első példa</TITLE> </HEAD> <FRAMESET ROWS="110,*"> <FRAME NAME="fent" SRC="fent.htm"> <FRAMESET COLS="100,*" > <FRAME NAME="bal" SRC="bal.htm"> <FRAME NAME="jobb" SRC="jobb.htm"> </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML>

Maradék (*)

Maradék (*)

100 pt

Hello Hello Hello

Vízszintes felosztás felső része

A vízszintes felosztás alsó része egy újabb, most oszlopokra osztást tartalmaz

110 pt

100 pt 110 pt

Maradék (*)

Maradék (*)

Page 18: WebTartalomfejlesztesGyakjegyzet

18

A második ábra megvalósítása:

<HTML> <HEAD> <TITLE>Második példa</TITLE> </HEAD> <FRAMESET COLS="110,*"> <FRAME NAME="bal" SRC="bal.htm"> <FRAMESET ROWS="100,*"> <FRAME NAME="fent" SRC="fent.htm"> <FRAME NAME="lent" SRC="lent.htm"> </FRAMESET> </FRAMESET> <BODY> </BODY> </HTML>

Függőleges felosztás bal oldali része

A függőleges felosztás jobb része egy újabb, most vízszintes osztást tartalmaz

Page 19: WebTartalomfejlesztesGyakjegyzet

19

Weblapszerkesztés a FrontPage szerkesztővel A FrontPage weblapszerkesztő „ereje” a könnyű, gyorsan tanulható kezelésben rejlik. Segítségével összetett dokumentumokat is gyorsan el tudunk készíteni. Ennek viszont ára van: a piacon hozzáférhető professzionális weblapszerkesztő programok (pl. Macromedia Dreamweaver, Xara Webstyle, stb…) által nyújtott szolgáltatások több lehetőséget tartogatnak.

A FrontPage elindítása után a következő képernyőt kapjuk: (az ábrák a FrontPage 2002-es verziójából származnak)

Új weblap készítéséhez kattintsunk a Fájl/Létrehozás/Lap vagy webhely menüpontra, mely hatására a jobb oldalon a következő menü jelenik meg:

Új dokumentum létrehozásakor egy üres oldal jelenik meg. A programablak alján három gomb jelenik meg, mely segítségével a weblapszerkesztés nagyon könnyűvé válik:

A bal oldalon található „Nézetek” nagy segítséget nyújtanak a dokumentumunk jól strukturáltságának fenntartásához.

Emellett persze a szokásos menüsorok is megtalálhatók.

Itt már korábban létrehozott dokumentumokat nyithatunk meg, újakat hozhatunk létre, amely lehet üres is, vagy sablon alapján is történhet.

Lehetővé teszi a weblap vizuális megszerkesztését. Az itt elvégzett módosítások hatással vannak a másik két nézetre.

A weboldal HTML forrását mutatja. Az ebben végrehajtott módosítások is hatással vannak a többi nézetre.

Ez a nézet böngészőként funkcionál. A HTML oldal végleges (aktuális) állapotának képét mutatja. Itt lehetőségünk van például az esetleges SCRIPT-ek tesztelésére. Az oldal ebben a nézetben nem módosítható.

Page 20: WebTartalomfejlesztesGyakjegyzet

20

A FrontPage használatát legkönnyebben példákon keresztül tudjuk elsajátítani.

Hozzuk létre a következő oldalt a FrontPage használatával:

[frontpage01.htm]

A szerkesztő – lévén, hogy Office tag – sokban hasonlít a Word-höz (Formátum menüben itt is megvannak a betűtípus, bekezdés és felsorolás, számozás menüpontok).

Második feladatként egy űrlapot tartalmazó weboldalt hozunk létre:

[frontpage02.htm]

Page 21: WebTartalomfejlesztesGyakjegyzet

21

PHP alapok A PHP egy kiszolgálóoldali szkriptnyelv. Kiszolgálóoldali, mert a PHP interpreter a szerveren fut, amely csak a program által szolgáltatott kimenetet továbbítja a kliens gép(ek)nek. Egy PHP program HTML oldalba ágyazható.

Tekintsük a következő egyszerű példát:

[elso.php]

<HTML> <HEAD> <TITLE>PHP p&eacute;lda</TITLE> </HEAD> <BODY> <?php print(’En egy PHP szkript kimenete vagyok!’); ?> </BODY> </HTML>

Mentéskor fontos, hogy a fájl kiterjesztésének mit adunk meg, ugyanis a szerver nem minden fájlban keres PHP szkriptet. Alapértelmezésben a HTML-ben nem keres, így érdemes a fájlt .php kiterjesztéssel elmenteni.

A BODY-ban található egysoros PHP program kimenete egy egyszerű szöveg. A szerver a neki megadott kiterjesztésű állományokban keresi a PHP kódot tartalmazó blokkot, mely többféle lehet.

PHP blokkok

Blokk kezdetének jelölése Blokk végének jelölése

<?php ?>

<? ?>

<% %>

<SCRIPT LANGUAGE=”PHP”> </SCRIPT>

Jelen példánkban a PHP blokkban található utasítás egy print(); parancs, mely kimenete a paraméterben megadott karakterlánc. Mivel az interpreter a szerveren működik, ezért a kliens gépeken futó böngészőprogramok nem tudnak arról, hogy az érintett weboldal tartalma statikus vagy például egy PHP szkript lefutásának eredménye. Ha a fenti példát megnyitjuk egy böngészőprogrammal (melyet egy webszerveren keresztül érünk el), akkor a böngésző már csak a következő egyszerű HTML forrást kapja meg, mivel a PHP blokkot a szerver már feldolgozta:

<HTML> <HEAD> <TITLE>PHP p&eacute;lda</TITLE> </HEAD> <BODY> En egy PHP szkript kimenete vagyok! </BODY> </HTML>

Így gyakran mi sem tudjuk, hogy egy valószínűleg dinamikusan generált oldalt milyen program generálta, hiszen a program forrása a kliens oldalon már nem látszik.

Megjegyzések PHP programban Egysoros megjegyzések:

// ez egy megjegyzés # Ez is egy megjegyzés

Page 22: WebTartalomfejlesztesGyakjegyzet

22

Többsoros megjegyzés:

/* Ez egy megjegyzés, mely akár több soros is lehet! */

Változók, kifejezések, operátorok

Változók A PHP nyelvben a változók egy $ jelből és egy azonosítóból állnak. Az azonosítók betűket, számokat és _-jelet tartalmazhatnak és számmal nem kezdődhet.

Érvényes változónevek például a következők:

$alma $_aaa $_256

a PHP nem típusos nyelv, a változók értéke bármikor, bármilyen típusú értékre módosítható, ugyanazon változó tárolhat számot, karakterláncot, logikai értéket vagy akár egy objektumot is.

A változóhivatkozások nagyon rugalmasak. Tegyük fel, hogy van egy $szoveg nevű, „Hello” karakterláncot tartalmazó változónk. Ennek kiírására használhatjuk a következő kifejezést is:

print ”A változó értéke: $szoveg, de még ez is a karakterláncon belül van”;

Vegyük észre, hogy a változóra való hivatkozás a print() paraméterében megadott karakterláncon belül van. Más nyelveken kénytelenek vagyunk konkatenációt alkalmazni, de erre itt nincs szükség.

A konkatenációra később még visszatérünk, addig is egy példa:

$x="Hello"; $y=" Világ"; print $x.$y;

Konstansok Konstanst PHP programban a define segítségével hozhatunk létre. Például:

define("KONSTANS", "hello");

Értéke természetesen nem változtatható meg és nem is kötelező nagy betűkkel írni, de ne térjünk el a szokásos írásmódtól. További eltérés a változóhoz képest, hogy nem kezdődik $-jellel. A konstansra hivatkozni a nevének megadásával tudunk:

print KONSTANS; hello

A PHP rendelkezik néhány beépített konstanssal is:

PHP_VERSION A PHP verziószámát tartalmazza __FILE__ A feldolgozás alatt levő fájl neve __LINE__ A feldolgozás alatt álló sor számát tartalmazza

Ennek eredménye: Hello Világ

Page 23: WebTartalomfejlesztesGyakjegyzet

23

A PHP4 adattípusai

[gettype.php]

A következő táblázat a PHP 4-es verziója által támogatott adattípusokat foglalja össze:

Típus Leírás

Integer Egész szám, pl: 10

Double Lebegőpontos szám, pl: 3,205

String Karakterlánc, pl: ”Hello”

Boolean Logikai érték, kétféle lehet: true, false

Array Tömb

Object Objektum

Mivel a PHP nyelv nem típusos nyelv, ezért előfordulhat, hogy nem vagyunk biztosak abban, hogy egy változó milyen típusú értéket tárol. Ennek lekérdezésére való a gettype() függvény, melynek visszatérési értéke a paraméterben megadott változó típusa. Például:

$szam=10; $szoveg="Hello"; $lebegopontos=2.5; print gettype($szam) . "<br>\n"; integer print gettype($szoveg) . "<br>\n"; string print gettype($lebegopontos); double

A settype() függvénnyel lehetőségünk van egy változó típusának megváltoztatására. Bizonyos esetekben ez persze adatcsonkítással is járhat (például a 3,205 egésszé alakítása 3-at eredményez).

Érték hozzárendelése változóhoz

A következő táblázat azon operátorokat foglalja össze, melyekkel értéket rendelhetünk egy változóhoz:

Operátor Példa Hatás

= $x=5; Értékadás

+= $x += 10; $x = $x + 10;

-= $x -= 10; $x = $x - 10;

*= $x *= 10; $x = $x * 10;

/= $x /= 10; $x = $x / 10;

%= $x %= 10; $x = $x % 10; (modulusképzés)

.= $x .= "szoveg"; $x = $x . "szoveg";

Page 24: WebTartalomfejlesztesGyakjegyzet

24

Összehasonlító operátorok

A következő táblázat a logikai operátorokat foglalja össze:

Operátor Jelentés

== Igaz, ha a két kifejezés értéke megegyezik

!= Igaz, ha a két kifejezés érték különböző

=== Igaz, ha a két kifejezés értéke és típusa megegyezik

!== Igaz, ha a kér kifejezés értéke és típusa nem egyezik meg

> Igaz, ha a bal oldali kifejezés nagyobb, mint a jobb oldali

>= Igaz, ha a bal oldali kifejezés nagyobb vagy egyenlő, mint a jobb oldali

< Igaz, ha a bal oldali kifejezés kisebb, mint a jobb oldali

<= Igaz, ha a bal oldali kifejezés kisebb vagy egyenlő, mint a jobb oldali

Logikai operátorok

Operátor Jelentés || vagy or Logikai „vagy” művelet && vagy and Logikai „és” művelet xor Kizáró vagy művelet ! Tagadás

Tömbök Tömbök létrehozására többféle lehetőségünk is adódik.

Az array() függvény

[szamindex_tomb.php]

Számmal indexelt tömbök létrehozására alkalmas függvény, működését egyszerűbb egy példán megvizsgálni. Hozzunk létre egy hetnapjai nevű tömböt, mely elemei a hét napjait tartalmazza:

$hetnapjai = array("Hétfő","Kedd","Szerda","Csütörtök","Péntek","Szombat","Vasárnap");

Ennek eredményeképpen – mivel a tömböket a PHP 0-tól indexeli – a $hetnapjai[4] a „Péntek” karakterláncot tartalmazza.

Ellenőrzésképpen használhatjuk a PHP print_r() függvényét, mely egy változó tartalmával – jelen esetben egy tömb értékeivel – tér vissza. A print_r($hetnapjai); eredménye:

Page 25: WebTartalomfejlesztesGyakjegyzet

25

Array ( [0] => "Hétfő" [1] => "Kedd" [2] => "Szerda" [3] => "Csütörtök" [4] => "Péntek" [5] => "Szombat" [6] => "Vasárnap" )

A szögletes-zárójel, mint a tömb létrehozásának eszköze

A fenti tömböt a következő utasítássorozattal is létrehozhattuk volna:

$hetnapjai[] = "Hétfő"; $hetnapjai[] = "Kedd"; $hetnapjai[] = "Szerda"; $hetnapjai[] = "Csütörtök"; $hetnapjai[] = "Péntek"; $hetnapjai[] = "Szombat"; $hetnapjai[] = "Vasárnap";

A [] új elem hozzáfűzésére is alkalmas már létező tömb esetén. Újabb elem hozzáfűzéséhez a fenti módon kell eljárni:

$hetnapjai[] = "Új nap";

Ezt követően a print_r($hetnapjai); visszatérési értéke a már bővített tömb lesz:

Array ( [0] => "Hétfő" [1] => "Kedd" [2] => "Szerda" [3] => "Csütörtök" [4] => "Péntek" [5] => "Szombat" [6] => "Vasárnap" [7] => "Új nap" )

Asszociatív tömbök

[asszoc_tomb.php]

Az asszociatív tömböket nem számmal, hanem karaktersorozatokkal indexeljük, ezért szokás szótáraknak is nevezni őket. Ilyen tömbök létrehozásához is használhatjuk az array() függvényt:

$alkalmazott = array ( "nev" => "István", "eletkor" => 25, "szulhely" => "Szeged" );

Ezen tömb elemeire az $alkalmazott[nev], $alkalmazott[eletkor] és az $alkalmazott[szulhely] segítségével hivatkozhatunk.

Többdimenziós tömbök

[tobbdim_tomb.php]

Page 26: WebTartalomfejlesztesGyakjegyzet

26

Az egyes dimenziók számát a []-párok száma, és azok méretét a bennük levő számok határozzák meg. Egy 4x4-es mátrixot a következőképpen hozhatnánk létre:

$matrix = array(array(1,2,3,4), array(5,6,7,8), array(9,10,11,12), array(13,14,15,16) );

Hivatkozni egy elemre a már más nyelvekből jól megszokott módon tudunk:

$matrix[2][3]; 12

Tömbök bejárása

[foreach.php] [foreach_asszoc.php]

Tömbök bejárására a PHP nyelv a foreach() szerkezetet biztosítja, mely számokkal indexelt tömbök esetén általánosan a következőképpen néz ki:

foreach($tombnev as $ideiglenes){ /* minden iterációs lépésben ez a kódrészlet fut le, az aktuális tömbelemre az $ideiglenes változóval hivatkozhatunk. */ }

A fenti példatömbünket a következőképpen járhatjuk be a foreach() segítségével: $hetnapjai = array(”Hétfő”,”Kedd”,”Szerda”,”Csütörtök”,”Péntek”,”Szombat”,”Vasárnap”); foreach ($hetnapjai as $ideiglenes){ print $ideiglenes; print "<br>\n"; }

Ennek eredménye:

”Hétfő”<br> ”Kedd”<br> ”Szerda”<br> ”Csütörtök”<br> ”Péntek”<br> ”Szombat”<br> ”Vasárnap”<br>

Asszociatív tömbök bejárása is lehetséges a foreach() segítségével. Ekkor a szerkezet általánosan a következőképpen néz ki:

foreach( $tomb as $kulcs => $ertek ){ // a tömbelem feldolgozása }

Az asszociatív példatömbünk bejárása a foreach() segítségével:

$alkalmazott = array ( "nev" => "István", "eletkor" => 25, "szulhely" => "Szeged" ); foreach ($alkalmazott as $kulcs => $ertek){ print $kulcs; print " = "; print $ertek; print "<br>\n"; }

Page 27: WebTartalomfejlesztesGyakjegyzet

27

Ennek eredménye:

nev = István<br> eletkor = 25<br> szulhely = Szeged<br>

Többdimenziós tömböket egymásba ágyazott foreach() szerkezetekkel tudunk bejárni.

Vezérlési szerkezetek PHP-ben

Többszörös szelekciós vezérlés: [if.php]

if (feltétel){

Igaz ág

} else{

Hamis ág

}

Pl:

Az if vezérlés else ága további elágazásokat tartalmazhat, ilyenkor else helyett elseif-et használunk.

Esetkiválasztásos szelekciós vezérlés [switch.php]

switch (kifejezés) { case érték_1: //ha a kifejezés értéke érték_1, akkor a vezérlés ide kerül break; case érték_2: //ha a kifejezés értéke érték_2, akkor a vezérlés ide kerül break;

… case érték_n: //ha a kifejezés értéke érték_n, akkor a vezérlés ide kerül break; }

<?php $header=true; if($header){ print("<h1>Hello</h1>"); } else{ print("<h4>Hello</h4>"); } ?>

A $header változó értékétől függően a PHP program kimenete vagy egy <h1>-es, vagy egy <h4>-es címsor.

Page 28: WebTartalomfejlesztesGyakjegyzet

28

Pl:

<?php $honap="Julius"; switch ($honap){ case "Januar": print "Születésnapom van ebben a hónapban"; break; case "Februar": case "Marcius": print "Ezekben a hónapokban nagyon hideg van!"; break; case "Junius": case "Julius": case "Augusztus": print "Nyár van, nyaralni megyek!"; break; case "December": print "Közeleg a karácsony és a szilveszter"; break; default: print "A $honap hónap nem szerepel a fenti listában..."; } ?>

A $honap változó határozza meg, hogy melyik utasítás(ok)ra kerül a vezérlés. Ha a változó olyan értéket tartalmaz, mely nem szerepel a switch értékei között, akkor a default utáni kód fut le.

A fenti példa eredménye $honap="Februar" esetén:

Ezekben a hónapokban nagyon hideg van!

A fenti példa eredménye $honap="Majus" esetén:

A Majus hónap nem szerepel a fenti listában...

Elöltesztelő ismétléses vezérlés [while.php]

while (feltétel){ //ciklusmag }

Pl:

<?php $szamlalo=1; while ($szamlalo <= 10){ print "A számláló változó értéke: $szamlalo<br>"; $szamlalo++; } ?>

A feltétel minden egyes ellenőrzésekor ha a feltétel teljesül, a vezérlés a ciklusmagra kerül. A fenti példában szereplő számlálót a ciklus természetesen nem növeli automatikusan, így azt magunk kell növeljük a ciklusmagon belül. Konkrétan ebben a példában a növelés elhagyása végtelen ciklushoz vezetne.

Hátultesztelő ismétléses vezérlés [dowhile.php]

do{ //ciklusmag } while (feltétel);

Page 29: WebTartalomfejlesztesGyakjegyzet

29

Pl:

<?php $ertek = 1; do{ print "A ciklus ennyiszer lefutott: $ertek"; $ertek++; } while ( $ertek > 10 ); ?>

A hátultesztelő ciklus sajátossága, hogy a feltételt először csak a ciklusmag egyszeri lefutása után ellenőrzi. Ez a példából is kiderül, mert az $ertek változó értéke 1, ami nem nagyobb 10-nél, így egy elöltesztelő ciklus esetében a ciklusmag egyszer sem futna le. A ciklusmag további lefutására akkor kerül sor, ha a feltétel teljesül.

Számlálásos ismétléses vezérlés [for.php]

for ( ciklusváltozó=kezdőérték; feltétel; ciklusváltozó értékmódosítása){ //ciklusmag }

Pl:

<?php for ($szamlalo=1; $szamlalo<=10; $szamlalo++){ print "A számláló változó értéke: $szamlalo<br>\nÉs annak duplája: ".($szamlalo*2)."<br><br>\n\n"; } ?>

A példában egy növekvő számlálásos ismétléses vezérlésre látunk példát, de a feltétel és a harmadik paraméter megfelelő változtatásával könnyen szervezhetünk csökkenő számlálásos vezérlést is.

Függvények, eljárások

A függvények osztályát két részre oszthatjuk. Az egyik csoportba tartoznak azok a függvények, melyeket már többször is használtunk ezek az előre definiált, a PHP nyelvbe beépített függvények. Ilyen volt például a print() függvény. A másik csoportba az általunk létrehozott függvények tartoznak. Egy függvény definíciója általánosan a következőképpen néz ki:

funcion fuggvenyazonosító ( $param_1, $param_2, ..., $param_n ){ // függvénytörzs }

Függően attól, hogy ezt függvényként vagy eljárásként definiáljuk, a törzs tartalmazhat egy

return <visszatérési érték>;

kifejezést is. Amennyiben ez egy eljárás, nincs return, mivel visszatérési érték sincsen.

Hozzunk létre egy olyan függvényt, mely visszatér a paraméterekben érkező két szám szorzatával. Ekkor a függvény definíciója a következőképpen néz ki:

function szoroz( $szam1, $szam2 ){ $szorzat = $szam1 * $szam2; return $szorzat; }

A függvényt az azonosítójával és a megfelelő paraméterezéssel hívhatjuk meg:

print szoroz(5, 6); //Kiírja, hogy 30

Dinamikus függvényhívások Egy függvény azonosítóját egy karakterláncba is tehetjük és a függvényt ezen karakterlánc segítségével hívhatjuk meg. Pl:

Page 30: WebTartalomfejlesztesGyakjegyzet

30

function hello(){ print "Hello"; }

$fuggveny = "hello"; $fuggveny(); //Meghívja a hello() eljárást

Miért jó ez? Hiszen ezt kevesebb munkából is elérhettünk volna egy egyszerű hello(); hívással. Sokszor szeretnénk azt, hogy bizonyos feltételektől függően más és más függvények kerüljenek meghívásra. Vagy hasznos lehet számos előre beépített függvény használatakor is. Tömbök bejárására létezik egy array_walk() függvény, mely a paraméterében megadott tömböt bejárja és a tömbelemekre egy adott eljárást hajt végre, melyet szintén paraméterként kap meg. Ez a paraméter egy karakterlánc típusú paraméter, tehát a dinamikus függvényhívás szintén hasznos lehet.

Változók hatóköre

Egy adott (nem globális) változó láthatósága korlátozódik annak blokkjára és ezen blokkon belül definiált további blokkokra. Tehát egy függvényen belül definiált változó a függvényen kívülről nem látható. De ez általában fordítva is igaz. Függvényen kívül definiált változót alapértelmezésben nem érhetjük el. Ahhoz, hogy egy függvényen kívül definiált változót mégis elérjünk a függvényen belül használnunk kell a global kulcsszót. Erre mutat példát a következő program:

$kedv = "Jó kedvem van! ";

function hangulat(){ global $kedv; //a $kedv változó mostantól itt is látható print "A mai hangulatom: $kedv"; }

Sokszor hasznos lehet, hogy az egyes függvényhívások között elérjünk egy „állapotváltozót”, mely valamilyen mértékben befolyásolják a függvény által szolgáltatott kimenetet. A következő példában egy globális változó segítségével nyomon követjük, hogy az adott függvényt hányszor hívtuk meg:

$allapotvaltozo = 0;

function felsorolas( $cimsor ){ global $allapotvaltozo; $allapotvaltozo++; print "<H1>$allapotvaltozo. $cimsor</H1>"; }

felsorolas("Programozzunk PHP-ben"); print "Ez a könyv nagyon hasznos!<br><br>";

felsorolas("A HTML alapjai"); print "Ezt sem árt jól ismerni! <br><br>";

felsorolas("Dreamweaver 4"); print "Ez egy kiváló weboldal szerkesztő program! <br><br>";

Ennek eredménye a következő lesz:

Page 31: WebTartalomfejlesztesGyakjegyzet

31

Ez a megoldás lehetővé teszi, hogy több függvény hozzáférjen ugyanahhoz a globális változóhoz, hiszen csak annyi a dolgunk, hogy az érintett függvények törzsében globálissá tesszük az adott változót.

Megjegyzés: A globális változókat – a programon belül bárhol – a $GLOBALS változó segítségével is elérhetjük, mely egy asszociatív tömb. Például az $allapotvaltozo globális változó értékéhez a $GLOBALS["allapotvaltozo"] által is hozzáférhetünk.

Mi a helyzet olyankor, ha azt szeretnénk, hogy a függvény „emlékezzen” a változó korábbi értékére, de nem szeretnénk azt, hogy ez a változó más függvények számára, kívülről is látható legyen? Ekkor a static módosítót kell alkalmazzuk. Írjuk meg a fenti függvény úgy, hogy az állapotváltozót static-ként, a függvényen belül hozzuk létre:

function felsorolas( $cimsor ){ static $allapotvaltozo = 0; $allapotvaltozo++; print "<H1>$allapotvaltozo. $cimsor</H1>"; }

Ilyenkor minden egyes függvényhíváskor a függvény „emlékszik” az $allpotvaltozo értékére.

Az include() függvény

Az include() függvény segítésével külső fájlokat szúrhatunk be a programunkba. Hasznos lehet, ha egy program által használt eljárásokat/függvényeket egy külső fájlban tároljuk, mert így ezeket más programok is fel tudják használni. Az include() futási időben ágyazza be a paraméterében megadott fájlt:

include("fuggvenykonyvtar.php");

Mivel az include() az adott fájl tartalmát szövegszerűen helyettesíti be a megadott helyre, ezért ha a beillesztésre került fájl tartalmaz például egy print "hello"; kifejezést, akkor a „hello” karakterlánc kiírásra kerül.

Fájlok kezelése

Fájlok létrehozása Fájlokat a touch() függvény segítségével hozhatunk létre. Ha a fájl már létezik, nem törli annak tartalmát, de az utolsó módosítás dátumát megváltoztatja. Pl:

touch("uj_file.txt");

Fájlok törlése Fájlokat az unlink() függvénnyel törölhetünk. Egyetlen paramétere a törlendő fájl elérési útja:

unlink("torlendo.txt");

Page 32: WebTartalomfejlesztesGyakjegyzet

32

Fájlok megnyitása Fájlok megnyitására az fopen() függvényt használjuk. Paramétereként át kell adni a megnyitandó fájl elérési útját/azonosítóját, illetve a megnyitás módját. A leggyakoribb megnyitási módok:

Megnyitás olvasásra: "r" //read

Megnyitás írásra: "w" //write

Megnyitás hozzáfűzésre: "a" //append

A függvény visszatérési értéke sikeres megnyitás esetén egy egész szám, mely a megnyitott fájlt azonosítja. Ezt az azonosítót fájlműveletek végrehajtásakor kell majd használjuk. Sikertelen megnyitás esetén a visszatérési érték: false. Ez lehetővé teszi, hogy a fájl megnyitását egy feltételes vezérlés feltételében hajtsuk végre, megelőzve az esetleges fájlműveletek által szolgáltatott hibákat sikertelen megnyitás esetén. Példa fájl megnyitására:

if ($f_id = fopen("beolvas.txt", "r")){ //fájlműveletek }

Egy másik gyakran használt megnyitási séma, amikor sikertelen megnyitás esetén megszakítjuk a program további futását. Erre a die() függvényt használjuk:

( $f_id = fopen( "ir.txt", "w" ) ) or die ("A fájl megnyitása sikertelen!");

Amennyiben a fájl írásra való megnyitása sikertelen, akkor a die() függvény kiírja a paraméterében megadott karakterláncot, majd megszakítja a program további futását.

Miután befejeztük a fájllal való műveletvégzést, le kell zárjuk azt. Erre való az fclose() függvény, melynek egyetlen paramétere a bezárandó fájl azonosítója. Pl:

fclose($f_id);

Olvasás fájlból Fájlból való olvasást többféleképpen is elvégezhetjük. Háromféle megközelítést vizsgálunk meg:

• Olvasás soronként

• Olvasás byte-onként

• Olvasás karakterenként

Olvasás soronként

Soronként beolvasáshoz két függvényt fogunk felhasználni: fgets() és feof(). Az fgets() függvény első paramétere azon fájl azonosítója, melyből ki szeretnénk olvasni egy sort. A második paramétert elhagyhatjuk, ekkor az fgets() a sor vége jelig olvas. Az egész fájl soronkénti beolvasásához a feof() függvényt is használjuk, mely akkor ad igaz értéket, ha a fájl végéhez értünk. Feltételezve, hogy egy szöveges fájlt megnyitottunk olvasásra és a fájlazonosítót az $f_id változóba kaptuk, akkor a teljes tartalom soronként beolvasása a következőképpen néz ki:

while (!feof($f_id) ){ //A $sor változó a szöveges file egy sorát tartalmazza $sor = fgets($f_id); //a $sor változó feldolgozása }

Olvasás byte-onként

Byte-onkénti olvasáshoz az fread() függvényt használjuk. Első paramétere azon fájl azonosítója, melyből olvasni szeretnénk, második paramétere a kiolvasandó mennyiség byte-ban. Olvassunk ki 8 byte-ot az $f_id által azonosított, olvasásra már korábban megnyitott fájlból:

Page 33: WebTartalomfejlesztesGyakjegyzet

33

$adat = fread($f_id,8);

Az $adat változó tartalmazza a megadott adatmennyisséget (ha közben nem értünk el a fájl végére).

Ennél a megközelítésnél alapvető szükséglet lehet megadni azt, hogy hányadik byte-tól kezdődően olvassunk. Ennek megadására való az fseek() függvény, mely első paramétere szintén egy fájlazonosító, a második pedig meghatározza, hogy a fájlmutató hányadik byte-ra mutasson. A következő kifejezés a fájlmutatót a 32. byte-ra állítja:

fseek($f_id, 32);

Az ezután meghívott fread() függvény a paraméterében megadott byte mennyiséget a 32. byte-tól kezdődően olvasná.

Olvasás karakterenként

Egyetlen karakter olvasásához az fgetc() függvényt használjuk. Mivel egy karakter egy byte-os, ezért csak egyetlen paramétere van, a fájl azonosítója. A következő példa karakterenként olvassa be az $f_id által azonosított szöveges fájlt:

while (!feof($f_id) ){ //A $sor változó a szöveges file egy sorát tartalmazza $karakter = fgetc($f_id); //a $karakter változó feldolgozása }

Írás fájlba, hozzáfűzés fájlhoz Az, hogy egy fájl elejére (írás fájlba) vagy végére írunk (hozzáfűzés fájlhoz) az attól függ, hogy a fájlt milyen módon nyitjuk meg. Az fopen() második paramétere meghatározza a fájl megnyitásának módját. Amennyiben a második paraméter "w", akkor ha már létezett ilyen fájl, törli annak tartalmát, egyébként létrehozza azt. Mindkét esetben a fájl megnyitásra kerül – írásra.

Ha megnyitáskor a második paraméter az "a" értéket kapja, írásra nyílik meg a fájl, a kiírt adatok a fájl végéhez fűződnek hozzá – feltéve, hogy más létezett ilyen fájl korábban. Ha nem létezett, akkor a PHP létrehozza azt.

Fájlba írás az fputs() és fwrite() függvényekkel

Mindkét függvény két megegyező paraméterrel rendelkezik. Az első paraméter egy írásra megnyitott fájl azonosítója, a második egy karakterlánc, melyet a fájlba szeretnénk írni:

fwrite( $f_id, "Ezt írjuk ki." ); fputs( $f_id, "Ezt írjuk ki." );

Kölcsönös kizárás Mivel közzétett weboldalunk bárki számára hozzáférhető, ezért ezt a problémát szem elől tévesztve számolnunk kell annak veszélyével, hogy egy írási művelet után a fájlunk használhatatlanná válik. Tegyük fel ugyanis, hogy egy fájlba egyszerre többen is szeretnének írni. Ez természetesen nem lehetséges. Az egyes írási folyamatok kölcsönös kizárását az flock() függvénnyel valósíthatjuk meg. Az flock() két paraméterrel rendelkezik. Az első a zárolandó fájl azonosítóját, a második a zárolás módját adja meg. Egy zárolt fájlhoz egyszerre csak egy folyamat férhet hozzá. A második paraméter háromféle értéket vehet fel:

flock() paraméter értéke Zárolás típusa

1 Megosztott hozzáférés. Több folyamat is hozzáférhet a fájlhoz, de csak olvasásra.

2 Kölcsönös kizárás. Íráskor használjuk, egyszerre csak egy folyamat használhatja a fájlt.

3 Zárolás feloldása.

Page 34: WebTartalomfejlesztesGyakjegyzet

34

A következő példában zároljuk az adott fájlt, írunk bele, majd feloldjuk a zárolást:

flock( $f_id, 2 ); // kölcsönös kizárás fwrite( $f_id, "hello"); flock( $f_id, 3 ); // zárolás feloldása

További hasznos függvények fájlok használatakor

Fájl vagy könyvtár? is_file("beolvas.txt");

A függvény paramétere egy karakterlánc. A függvény visszatérési értéke igaz, ha a karakterláncban megadott név egy fájlt azonosít.

is_dir("MUNKA");

Az előzővel megegyezik annyi különbséggel, hogy könyvtár létezését vizsgálja.

Fájl létezésének ellenőrzése file_exists("beolvas.txt");

Egy paramétert vár, egy karakterláncot. Visszatérési értéke igaz, ha létezik ilyen fájl, egyébként hamis. A fájlt annak teljes elérési útvonalával együtt is megadhatjuk.

Fájlméret lekérdezése filesize("beolvas.txt");

A függvény visszatérési értéke a paraméterben megadott fájl mérete byte-ban. Ha a művelet során hiba lép fel, a false értéket kapjuk.

Fájlállapot lekérdezése is_readable("beolvas.txt");

A függvény visszatérési értéke igaz, ha a fájl olvasható, egyébként hamis. UNIX rendszerekben ugyanis előfordulhat, hogy egy fájlt látunk, de annak jogosultsága nem engedélyezi annak olvasását.

is_writable("beolvas.txt");

A fentivel megegyező függvény annyi kivétellel, hogy írási engedélyt vizsgál.

is_executable("beolvas.txt");

Visszatérési értéke igaz, ha a paraméterben megadott fájl futtatható, egyébként hamis. Ez a jogosultágtól és a kiterjesztéstől egyaránt függ.

Page 35: WebTartalomfejlesztesGyakjegyzet

35

Egy konkrét példa – weboldal generálása

[megjelenit.php] [procedures.php] [tartalom.txt]

A következő példában olyan PHP programo(ka)t fogunk írni, mely egy szöveges fájl tartalmától függően fog HTML oldalt készíteni.

Legyen adott egy tartalom.txt fájl, mely két „típusú” értéket tartalmazhat külön-külön sorokban. Az egyik típus link létrehozását, a másik táblázat létrehozását írja elő. Mind a link, mind pedig a táblázat legyen valamilyen mértékben testreszabható. Az egyes tulajdonságokat egy „*” karakter válassza el. Például egy olyan link, mely HREF attribútumának értéke a <http://www.google.hu> URL és az <A> tag tartalma <A Google kereső> karakterlánc, a tartalom.txt fájl következő sorával legyen ekvivalens:

link*http://www.google.hu*A Google kereso

Az egyes elemeket egy „*” karakter válassza el egymástól.

A másik típusú elem táblázat készítését írja elő, melyet a tablazat karakterlánc jelez. Ezt követően két szám következik. A első szám a sorok, a második szám az oszlopok számát jelzik. Itt is az elkülönítés céljából minden egyes érték között „*” karakter szerepel. A táblázat celláit töltsük fel 100 és 999 közé eső véletlen számokkal.

Ezek alapján a tartalom.txt egy lehetséges tartalma, majd annak eredménye: [tartalom.txt]

link*http://www.inf.u-szeged.hu* tablazat*3*4

A megvalósításhoz két PHP fájlt hozunk létre. Egyikben (megjelenit.php) beolvassuk a tartalom.txt fájl tartalmát, feldolgozzuk azt, majd a tartalomtól függően más és más eljárást hívunk meg, melyeket egy másik PHP fájlban írunk meg (procedures.php). Ahhoz, hogy egy külső fájlban található eljárást/függvényt meg tudjunk hívni, be kell szúrjuk azt az include() segítségével.

Link létrehozását jelzi A link erre a címre mutat Az <A> tag tartalma (melyen a link szerepel)

Page 36: WebTartalomfejlesztesGyakjegyzet

36

A megjelenit.php <HTML> <HEAD> </HEAD> <BODY BGCOLOR="#AAAADD"> <?php include("procedures.php"); $f = fopen("tartalom.txt","r"); while(!feof($f)){ $sor = fgets($f); $sor_tartalom = explode("*",$sor); switch ($sor_tartalom[0]){ case "link": keszit_link($sor_tartalom[1],$sor_tartalom[2]); break; case "tablazat": keszit_tablazat($sor_tartalom[1],$sor_tartalom[2]); break; } } ?> </BODY> </HTML>

A tartalom.txt fájlból kiolvasott sort az explode() függvény segítségével értelmezzük. Az explode() két paramétert vár. Visszatérési értéke egy tömb, melynek elemei a függvény első paraméterben megadott karakterek által elválasztott karakterláncok. Jelen esetben az elválasztó karakter a „*” karakter. Mind link, mind pedig táblázat létrehozása esetén a tömbnek három eleme lesz.

A keszit_link() és keszit_tablazat() függvények egy külső (procedures.php) fájlban vannak.

Be-include-oljuk az eljárásokat tartalmazó PHP fájl-t:

Beolvassuk a információkat tartalmazó fájl tartalmát soronként

A $sor változó a szöveges fájl egy sorát tartalmazza

Feldaraboljuk a karakterláncot a "*" karaktereknél

A $sor_tartalom[0] tartalmától függően meghívjuk a megfelelő eljárást. Két eset lehetséges: „link” vagy „tablazat”

Page 37: WebTartalomfejlesztesGyakjegyzet

37

A procedures.php

<?php

function keszit_link($url,$szoveg){ print "<A HREF='$url' TARGET='_BLANK'>$szoveg</A><BR><BR>\n\n"; }

function keszit_tablazat($sorszam,$oszlopszam){ settype($sorszam,"integer"); settype($oszlopszam,"integer");

print "<TABLE BORDER='1' BORDERCOLOR='#770000' CELLPADDING=4>\n";

for ($i=1; $i<=$sorszam; $i++){40

print "<TR>\n";

for ($j=1; $j<=$oszlopszam; $j++){ print "<TD><STRONG>".rand(100,999)."</STRONG></TD>"; }

print "</TR>\n"; }

print "</TABLE><BR>\n\n"; } ?>

A fenti példában található settype() függvény segítségével egy változó típusát átalakíthatjuk egy másik típusra. Első paramétere az átalakítandó változó (jelen esetben a $sorszam és $oszlopszam), második paramétere pedig egy karakterlánc, mely a céltípus nevét tartalmazza (jelen esetben az integer).

Link kiírásakor az <A> HTML tag-et írjuk ki a fájlba a megfelelő attribútummal és tartalommal. A függvény átveszi a két paramétert, az URL-t és az <A> tagtartalmát.

A paraméterben string érkezik, ezért a for ciklusok miatt integer-re kell átalakítsuk mindkét változó típusát

Táblázat kezdő tag-jének kiírása, jelen esetben most csak a BORDERattribútummal

A két egymásba ágyazott for ciklus a táblázat sorait / oszlopait járja be (és hozza azokat létre a megfelelő tag-ek segítségével)

A táblázat celláiba most 100-tól 999-ig véletlen számokat írunk, de a cella tartalmát máshonnan (pl. egy adatbázisból) is nyerhetnénk

Táblázat egy sorának befejezése, a belső for ciklus ciklusváltozójától függően még további sorok kerülnek kiírásra.

Mindkét for ciklus befejeződött, lezárjuk a táblázatot, majd sort törünk.

Page 38: WebTartalomfejlesztesGyakjegyzet

38

Űrlapok használata

[urlap.htm]

Az űrlapok felhasználótól való adatbekérése szolgálnak. Mint ahogy már korábban láttuk, az űrlapok létrehozása független a PHP-tól, hiszen ez a HTML segítségével megoldható. Amire a PHP-t használni fogjuk az az űrlapok feldolgozása lesz. Űrlapok létrehozását már korábban tárgyaltuk, de ismétlés gyanánt tekintsük a következő egyszerű űrlapot tartalmazó HTML kódot: <HTML> <HEAD> <TITLE>ŰRLAP PÉLDA</TITLE> </HEAD> <BODY> <FORM ACTION="feldolgoz.php" METHOD="POST"> Neve: <INPUT TYPE="TEXT" NAME="NEV"><BR> Címe: <INPUT TYPE="TEXT" NAME="CIM"><BR> <INPUT TYPE="SUBMIT" VALUE=”ELKÜLD”> </FORM> </BODY> </HTML>

Ez az űrlap két szövegmezőt és egy, az elküldésre szolgáló gombot tartalmaz, eredménye:

Az űrlap kezdetét definiáló FORM HTML tag rendelkezik két kötelezően megadandó attribútummal. Az egyik a feldolgozásért felelős PHP kód elérési útját (ACTION), a másik az űrlap elküldésének módját (METHOD) adja meg. A fenti példában az űrlapot a „feldolgoz.php” fájl végzi el, az elküldés módja pedig POST. A METHOD attribútum a POST mellett még felveheti a GET értéket is. GET esetén az adatok a böngésző címsorán keresztül kerülnek elküldésre, a POST esetén nem. Mi az űrlapjaink a POST elküldési módot fogják használni.

Az űrlapfeldolgozás tárgyalását két részre fogjuk osztani. Az egyik esetben az űrlapot létrehozó HTML kód és az azt feldolgozó PHP kód egyetlen fájlban található (önmeghívó HTML kód), a másik esetben ezeket külön tároljuk.

Ha a feldolgozást végző PHP kód szemszögéből tekintünk az űrlapokra, akkor szintén két irányba haladhatunk tovább. A webszerveren működő PHP beállításait a php.ini fájl tartalmazza, mely rendelkezik egy register_globals beállítással is, mely egy logikai értéket tárol. Ha az értéke igaz, akkor az űrlapadatok globális változókon keresztül érhetők el a feldolgozó PHP programban. Hamis érték esetén egy asszociatív tömb áll rendelkezésünkre, mely POST küldés esetében a $HTTP_POST_VARS, GET küldés esetében a $HTTP_GET_VARS tömb. Mivel biztonsági okokból ezt a szolgáltatást általában kikapcsolják (mint ahogy az SZTE-s szervereken is), ezért a tömbalapú űrlapfeldolgozásra is (és többnyire erre) fogunk példát nézni. A tömbön keresztüli űrlapfeldolgozás másik hatalmas előnye, hogy nem kell ismerje az űrlapvezérlők azonosítóit, így például egy program képes lehet több, más-más azonosítóval ellátott különböző vezérlőket tartalmazó űrlap feldolgozására is.

Önmeghívó HTML kód Jogosan merül fel a kérdés, hogy miért hasznos, ha egy fájlban tárolom az űrlapot és a feldolgozást végző PHP kódot, hiszen az olvasgatóság nagyon romlik és ezáltal a módosíthatóság is. De abban az esetben, ha ugyanazt az űrlapot többször is át szeretnénk adni a felhasználónak, ezt a megoldást érdemes használni.

Page 39: WebTartalomfejlesztesGyakjegyzet

39

Milyen értéket adjunk az ACTION attribútumnak, ha az űrlapot feldolgozó fájl megegyezik a megjelenítést végző fájllal? Globális változókkal már korábban foglalkoztunk. A globális változókat a $GLOBALS asszociatív tömbön keresztül érjük el. A $GLOBALS[”PHP_SELF”] az éppen futó program elérési útját tartalmazza, mely értéket a $PHP_SELF változóból is megtudhatjuk. Mivel az éppen futó program az űrlap megjelenítését és feldolgozását egyaránt tartalmazza, ezért ezt a változót fogjuk használni az ACTION attribútum megadásakor. Egy ilyen űrlap FORM tag-je tehát a következőképpen néz ki:

<FORM ACTION=”<?php print $PHP_SELF ?>” METHOD=”POST”>

Egy konkrét példa – űrlapfeldolgozás

[urlapfeldolgozas.php]

Példaként készítsünk egy olyan oldalt, mely egy űrlapról adatot kér a felhasználótól. Ha a felhasználó elküldi az adatokat, akkor az általa megadott értékeket jelenítsük meg táblázatos formában ugyanazon az oldalon (az űrlap felett), biztosítva azt a lehetőséget, hogy a felhasználó módosításokat végezhessen. Mivel a register_globals PHP beállítás ki van kapcsolva, ezért az adatokat a $HTTP_POST_VARS tömbből fogjuk kinyerni. Az oldalt úgy készítsük el, hogy a felhasználót legelső látogatásakor üdvözöljük, az űrlap adatait csak azután jelenítsük meg, miután azt kitöltötték. Honnan tudjuk, hogy a felhasználó már kitöltötte az űrlapot? Mivel az adatok az űrlap elküldésekor a $HTTP_POST_VARS tömbbe kerülnek, ezért ha a tömb üres, az űrlapot még biztos nem küldték el, ellenkező esetben az űrlapvezérlők azonosítójával indexelhető, a kitöltött értékekkel rendelkező tömböt kapunk.

Az oldal teljes forrása a következőképpen néz ki:

<html> <head> <title>Form értékek kiírása</title> </head> <body> <?php

if (count($HTTP_POST_VARS)){

print "Az űrlapot előzőleg az alábbi értékekkel töltötted ki:<br><br>";

print "<TABLE BORDER='1' CELLPADDING='3'>\n"; print "<TR><TD><B>Űrlapvezérlők azonosítója</B></TD><TD><B>Űrlapvezérlő

értéke</B></TD></TR>\n";

foreach ($HTTP_POST_VARS as $kulcs => $ertek){ print "<TR><TD>$kulcs</TD><TD>$ertek</TD></TR>\n"; }

print "</TABLE><BR>\n"; print "A módosításhoz töltsd ki újra az űrlapot!<br>"; } else { print "Üdvözöllek! Töltsd ki az alábbi űrlapot!<br>"; } ?> <form name="form1" method="post" action="<?php print $PHP_SELF?>"> <p><strong>Név:</strong><br> <input name="nev" type="text" id="text13" value="Név">

Mivel az űrlap method attribútuma "post" ezért a $HTTP_POST_VARS-ban kapjuk az űrlap értékeit Ha "get"-el csinálnánk, akkor a böngésző címsorában is láthatóak lennének az űrlapvezérlők értéke (ezt nem akarjuk!)

Ha a $HTTP_POST_VARS tömb elemszáma nem 0, akkor az űrlapot már korábban kitöltötték

Az elemeket táblázatba írjuk ki, ehhez kell a táblázat kezdő tag-je két attribútummal

Bejárjuk a tömböt és táblázatos formában megjelenítjük

A táblázatnak vége

Az űrlap önmagát hívja

Page 40: WebTartalomfejlesztesGyakjegyzet

40

</p> <p><strong>Előadás címe:</strong><br> <input name="ea_cim" type="text" id="text1" value="Cím"> </p> <p><strong>Foglalkozás:</strong><br> Infomatikus <input name="foglalkozas" type="radio" value="1" checked> <br> Biológus <input name="foglalkozas" type="radio" value="2"> <br> Fizikus <input name="foglalkozas" type="radio" value="3"> </p> <p> <strong>Előadás rövid ismertetése:</strong><br> <textarea name="ea_leiras" cols="30" rows="5"

id="ea_leiras">Ismertető</textarea> </p> <p> <input name="submit" type="submit" id="submit" value="Elk&uuml;ld"> </p> </form> </body> </html>

Másik példa – számkitalálós játék

[szamkitalalos_reg_glob_off.php]

Ez az oldal szintén egy önmeghívó HTML oldal lesz. Egy általunk előre megadott számot kell a felhasználó kitaláljon, melyet az egyszerűség kedvéért egy változóban tárolunk le. Az űrlap egyetlen szövegmezőből fog állni, melybe a felhasználó tippjét várjuk. Arról, hogy a tippelt szám kisebb vagy nagyobb, mint amire gondoltunk, tájékoztassuk a felhasználót. Ha eltalálta, akkor gratuláljunk neki ☺ és írjuk ki hányadik tippre sikerült eltalálnia. A tippek számát egy rejtett mezőben tároljuk. A rejtett mező egy olyan űrlapvezérlő, mely szövegmezőként funkciónál, csak a felhasználó számára „elvileg” láthatatlan. Látható viszont akkor, ha a felhasználó megnézi HTML oldalunk forrását.

A program ezen változatánál feltesszük, hogy a register_globals PHP beállítás nem engedélyezett, ahogy általában…

A PHP forrás a következőképpen néz ki:

<html> <head> <title>Számkitalálós játék</title> </head> <body> <?php $kitalalando = 56; $probalkozasok = (count($HTTP_POST_VARS)) ? ++$HTTP_POST_VARS[probalkozasok] : 0;

if (count($HTTP_POST_VARS)){

if ($HTTP_POST_VARS[tipp]>$kitalalando) { $uzenet = "Ez túl nagy!\n"; } elseif ($HTTP_POST_VARS[tipp]<$kitalalando){ $uzenet = "Ez túl kicsi!\n"; } else { $uzenet = "Eltaláltad! Próbálkozásaid száma: $probalkozasok"; } } else {

Ha már létezik a $probalkozasok változó, akkor hozzárendeljük az eggyel megnövelt értékét, egyébként 0 értéket adunk neki.

Ide akkor kerül a vezérlés, ha már volt korábbi tipp, egyébként nem.

Page 41: WebTartalomfejlesztesGyakjegyzet

41

$uzenet = "Ez itt a számkitalálós játék! Tippelj melyik számra gondoltam!<BR>\n"; } ?>

<form method="post" action="<?php print $PHP_SELF ?>"> <H2><?php print $uzenet?></H2> <p>Tipp:<br> <input name="tipp" type="text" id="tipp" value="<?php print $tipp ?>"></p> <p> <input name="probalkozasok" type="hidden" id="probalkozasok"

value="<?php print $probalkozasok ?>"> </p> </form> </body> </html>

Számkitalálós játék ha a register_globals engedélyezett [szamkitalalos.php]

Ha a register_globals értéke TRUE, akkor, az egyes vezérlők értékeit a vezérlők azonosítójával megegyező azonosítóval rendelkező globális változókon keresztül érhetjük el. Tehát ha egy szövegmező a „nev” azonosítóval rendelkezik, akkor a PHP-ban a $nev globális változóban kapjuk meg a vezérlőbe írt adatot. A program valamelyest egyszerűsödik, de olyan programot eredményez, mely az esetek túlnyomó részében nem fog működni (a register_globals FALSE értéke miatt). Így egy nem biztonságos, nem hordozható programot kapunk, ezért ezen megközelítés használata nem javasolt, de egyszer érdemes ilyet is látni:

Az oldal teljes forrása a következőképpen néz ki (HTML kód nélkül):

<?php $kitalalando = 56;

$probalkozasok = (count($HTTP_POST_VARS)) ? ++$HTTP_POST_VARS[probalkozasok] : 0; if (count($HTTP_POST_VARS)){

if ($HTTP_POST_VARS[tipp]>$kitalalando) {$uzenet = "Ez túl nagy!\n";} elseif ($HTTP_POST_VARS[tipp]<$kitalalando){ $uzenet = "Ez túl kicsi!\n"; } else { $uzenet = "Eltaláltad! Próbálkozásaid száma: $probalkozasok"; } } else { $uzenet = "Ez itt a számkitalálós játék! Tippelj melyik számra gondoltam!<BR>\n"; } ?>

Számkitalálós játék átirányítással

[szamkitalalos_atiranyit.php] [grat.htm]

Finomítsuk tovább az oldalunkat. Oldalunk „hibája”, hogy az űrlapot akkor is megjeleníti amikor a számot már kitalálták. Módosítsuk az oldalunkat úgy, hogy helyes szám megadása esetén a felhasználót átirányítjuk egy másik oldalra, mondjuk egy – már létező – grat.html oldalra. Ehhez a PHP header() függvényét fogjuk használni. Ha a böngészőnkkel kapcsolódunk egy szerverhez, akkor a szerver információkat küld az általunk kért oldalról. Ezen információkat mi is manipulálhatjuk a header() függvény segítségével. Mivel a PHP ezt automatikusan megteszi helyettünk, ezért használatakor ügyelnünk kell arra, hogy a PHP programunk ne adjon semmit a kimenetre a header() előtt, ugyanis a PHP bármiféle adatszolgáltatást előíró kifejezés (legyen akár egy sortörés

Ha már létezik a $probalkozasok változó, akkor hozzárendeljük az eggyel megnövelt értékét, egyébként 0 értéket adunk neki.

Ide akkor kerül a vezérlés, ha már volt korábbi tipp, egyébként nem

Rejtett űrlapmező. Ezt a felhasználó csak akkor látja, ha megnézi az oldal forrását.

Page 42: WebTartalomfejlesztesGyakjegyzet

42

kiírása) előtt elküld egy alapértelmezett fejlécet. Átirányítás a „Location” fejléc segítségével történhet. Például a

header(”http://www.inf.u-szeged.hu”);

kifejezés a böngésző, a paraméterben megadott URL-re való átirányítását írja elő.

Mivel a fejléc információk elküldése szintén függ az aktuális PHP beállításoktól, ezért elképzelhető, hogy néhány webszerveren a következő megoldás nem működik. Ahhoz, hogy működhessen, az output_buffering PHP logikai környezeti változót TRUE értékre kell állítsuk. A továbbiakban feltételezzük, hogy ez a változó TRUE.

Az átirányítást végző header() kifejezést a forráskód melyik részében fogjuk használni? Változást csak a tipp és a gondolt szám egyenlősége esetén levő forráskódnál találunk. Ha egyenlők, nem az $uzenet változónak adunk értéket, hanem elvégezzük az átirányítást.

Így most csak a kód egy részét írjuk ide. Az if (count($HTTP_POST_VARS)) feltétel igaz ága:

if ($HTTP_POST_VARS[tipp]>$kitalalando) { $uzenet = "Ez túl nagy!\n"; } elseif ($HTTP_POST_VARS[tipp]<$kitalalando){ $uzenet = "Ez túl kicsi!\n"; } else { header( "Location: grat.html" ); exit; } } else { $uzenet = "Ez itt a számkitalálós játék! Tippelj melyik számra gondoltam!<BR>\n"; } ?>

Űrlap feldolgozása külső PHP programmal

Vendégkönyv program megvalósítása [Vendegkonyv\index.htm] [Vendegkonyv\kitolt.htm] [Vendegkonyv\main.htm] [Vendegkonyv\menu.htm] [Vendegkonyv\teteje.htm] [Vendegkonyv\kitolt.php] [Vendegkonyv\megnez.php]

Ha az űrlapot nem szeretnénk többször is átadni a felhasználónak, akkor a könnyebb áttekinthetőség és módosíthatóság érdekében érdemes a feldolgozást végző PHP programot az űrlaptól függetlenül tárolni. Ilyenkor a FORM tag ACTION attribútuma egy PHP program konkrét elérési útját tartalmazza. Példánkban egy szöveges fájl alapú vendégkönyvet írunk meg. Mivel a program megírása a korábbiakon kívül nem igényel új ismeretet, ezért a forráskód és annak magyarázata nem kerül a jegyzetbe. Magyarázatot a forráskódban megjegyzésként találunk.

[megjelenit.php]

[_feldolgoz_.php]

Átirányítás a grat.html oldalra. A header() függvényt az exit kifejezés kell kövesse, hogy az oldal befejezze az űrlap vizsgálatát.

Page 43: WebTartalomfejlesztesGyakjegyzet

43

Űrlap generálása PHP programmal [form_keszit.php] [options.txt]

Egy olyan PHP programot fogunk írni, amely egy legördülő menüt egy adott text fájl soraival tölt fel. Új ismeretet e feladat megoldása sem igényel, ismerni kell a legördülő menüt létrehozó HTML tag-et (<SELECT>), annak felépítését és tudnunk kell szöveges fájlt kezelni PHP-ben.

A <SELECT> és </SELECT> kulcsszavak között megadott <OPTION> </OPTION> párok segítségével adhatjuk meg a menü elemeit. Ahány <OPTION> </OPTION> pár szerepel, annyi eleme lesz a menünek. Egy olyan legördülő menüt, amely az „egy”, „kettő” és „három” elemeket tartalmazza a következőképpen tudjuk létrehozni:

<FORM> <SELECT> <OPTION> egy </OPTION> <OPTION> kettő </OPTION> <OPTION> három </OPTION> </SELECT> </FORM>

A programunk tehát nem kell mást csináljon, mint soronként beolvasnia a szöveges fájlt (options.txt), majd minden egyes sor kiolvasása után a sor tartalmát a megfelelő helyre, <OPTION> </OPTION> párok között a kimenetre írnia.

Az oldal forráskódja:

<html> <head> <title>Form gener&aacute;l&aacute;sa</title> </head> <body> <form name="form1" method="post" action="feldolgoz.php"> <select name="select">

A PHP rész itt kezdődik. Megnyitjuk az „options.txt” fájlt, majd soronként beolvassa azt.

<?php if ($f_id = fopen("options.txt", "r")){ while (!feof($f_id) ){ $sor = fgets($f_id); print "<OPTION>$sor</OPTION>"; } } ?> </select> </form> </body>

</html>

Page 44: WebTartalomfejlesztesGyakjegyzet

44

Állapotok tárolása PHP segítségével

Az állapotok tárolását két részre osztva fogjuk tárgyalni:

1. Állapotokat tárolhatunk sütikkel (cookie),

2. Vagy munkamenet változókkal (session)

Sütik Mi az a süti?! A süti egy maximálisan 4Kb méretű adat, melyet a böngésző tárol, melyet például egy PHP program vagy maga a kiszolgáló is egyaránt kérhet. Egy gép maximálisan 20 sütit tárolhat a böngészőben. A felhasználó „biztonságát” (nem komoly védelem) elősegítve egy sütit csak az a gép olvashatja, amely létrehozta azt.

A sütik használatával óvatosan kell bánjunk, mivel egyáltalán nem biztos, hogy ez a funkció engedélyezve van a felhasználó böngészőjében vagy hogy egyáltalán létezik ilyen funkció. A felhasználó úgy is beállíthatja böngészőjét, hogy csak az ő engedélyével lehessen egy süti tárolását végrehajtani.

De mindezekkel együtt a sütik alkalmasak lehetnek kis mennyiségű információ tárolására, melyet felhasználhatunk az oldalaink lépkedése közben azok közti adatcsere céljából.

A sütik felépítése

A sütik név-érték párokat, egy lejárati időpontot, egy elérési utat és egy tartományt tartalmaz. Pl: szin; kék; expires-Monday, 29-Nov-04 20:00:00 GMT; path-/; domain=www.u-szeged.hu

• A név-érték pár URL felépítésű kell, hogy legyen (a példán keresztül ez világosabb lesz)

• A lejárat (expires) előírja a böngészőnek, hogy az adott süti mikor veszti érvényét.

• Az elérési út (path) jelöli a weboldalunk azon részét, ahol a sütit vissza kell küldeni a kiszolgálónak

• A tartomány mező azokaz az internetes tartományokat jelölik, ahová a sütik elküldésre kerülnek. Mivel ez a cím nem különbözhet azon címtől ahonnan a sütit küldték, ezért ez csak minimális rugalmasságot jelent. (a fenti példában definiált sütit a böngésző elküldi mind a www.inf.u-szeged.hu és www.math.u-szeged.hu kiszolgálónak)

A név-érték páron kívül egyik paraméter megadása sem kötelező (de ajánlott).

Ha a böngésző egy olyan oldalra jut, mellyel egy sütit tároltunk le, és az elérési út, tartomány, illetve a lejárati idő is stimmel, akkor a böngésző a sütit a kiszolgálónak küldi (egy fejléc létrehozásával). Nyilvánvalóan ehhez az adathoz kiszolgáló oldalon hozzáférhetünk a PHP segítségével, melyhez a beépített $HTTP_COOKIE_VARS globális asszociatív tömböt használhatjuk.

Megjegyzés: használhatnánk a süti nevével azonosított változóazonosítót, de a mivel a PHP környezet register_globals értéke általában FALSE, ezért ez a megoldás nem mindig, sőt általában nem működik.

A fenti példában létrehozott sütihez a következő PHP programmal férhetünk hozzá:

<?php //Itt a PHP program feltételezi, hogy már korábban létrehoztuk a fenti példában megadott sütit //A következő kifejezés kiírja, hogy kék print $HTTP_COOKIE_VARS[szin]; ?>

Sütik létrehozása PHP-vel

[setcookie.php]

Sütik létrehozására többféle megoldás kínálkozik. Használhatjuk a más megismer header() függvényt (mivel a sütit is a fejlécben hozzuk létre), de egyszerűbb erre a beépített setcookie() függvényt használni, mely a süti létrehozását előíró fejléc sort állítja elő. Mivel fejlécről van szó, ezért most is figyelnünk kell arra, hogy a setcookie() függvényt azelőtt hívjuk meg, mielőtt bármit is kiírtunk volna a böngészőbe, ugyanis ekkor a PHP létrehoz egy alapértelmezett fejlécet, melyet persze azonnal el is küld.

Page 45: WebTartalomfejlesztesGyakjegyzet

45

A következő példa létrehoz egy sütit a setcookie() függvény segítségével, majd megnézi, hogy létezik-e süti ilyen néven. Ha létezik kiírja azt, ha nem üdvözöl, mivel ez volt a legelső látogatásunk, így a PHP-nek még lehetőség sem volt azt létrehozni.

<?php setcookie( "szin", "kék", time()+3600, "/", "www.u-szeged.hu"); ?> <html> <head> <title>Süti tesztelése</title> </head> <body> <?php

A feltétel helyett azért nem az if(isset($szin)) feltételt írtuk, mert az csak akkor működne, ha a register_globals PHP környezeti változó értéke "true" lenne.

if ( isset( $HTTP_COOKIE_VARS[szin] ) ) print "<p>A Te színed a $HTTP_COOKIE_VARS[szin]</p>"; else

Ha nem létezett ez a süti, akkor a következő rész fut le, de a legközelebbi lefutáskor már a feltétel igaz ágára kerül a vezérlés.

print "<p>Üdvözöllek az oldalon, ez az első látogatásod!</p>"; ?> </body> </html>

A süti létrehozásakor a szin és kék rendre a név-érték párokat adják meg, a lejárati idő a jelen időponttól számított 1 órát (3600 másodpercet) jelenti, az elérési út (/) itt azt jelenti, hogy a süti a webhely összes oldaláról elérhető lesz, a tartomány pedig a www.u-szeged.hu, melynek minden kiszolgálja fogadhatja a sütit.

Előfordulhat az is, hogy a sütihez hozzáférő kiszolgálót szeretnénk korlátozni arra a kiszolgálóra, melyet az azt létrehozó programot futtatta. Ilyenkor a tartomány helyett használhatunk konkrét címet vagy a nagyobb hordozhatóság érdekében a $SERVER_NAME beépített környezeti változót.

Mint említettük a név-érték párokon kívül más értékek megadása nem kötelező, de vannak böngészők, melyek csak teljesen definiált sütiket képesek helyesen kezelni.

Sütik törlése

Ismét többféle megoldás adódik, de csak a legbiztosabb megoldást említjük. A legbiztosabb megoldás, ha a törlendő sütit ismét beállítjuk ugyanazokkal a paraméterekkel mint amivel azt létrehoztuk, de a lejárati időt állítsuk egy már elmúlt időpontra. Például:

setcookie( "szin", "kék", time()-10, "/", "www.u-szeged.hu");

Ügyelnünk kell arra, hogy a két setcookie() kifejezés paraméterezése a lejárati időn kívül teljesen meg kell egyezzen!

Munkamenet sütik [munkamenet_suti.php]

Fontos igény lehet az, hogy a süti csak addig létezzen, ameddig a böngészőprogramot a felhasználó be nem zárja. Ezt úgy érhetjük el, hogy a süti élettartamát 0-ra állítjuk. Ezen fajta süti egyik legfőbb alkalmazása felhasználók azonosítása. Belépéskor létrehozzuk a sütit és minden „védett” oldalon visszaküldjük azt a kiszolgálónak és elvégezzük az azonosítást. A böngésző bezárásakor a süti (munkamenet sütik esetén) automatikusan törlődnek, de kilépéskor „manuálisan” is törölhetjük a lejárati időpont megfelelő beállításával. Példa munkamenet süti létrehozására:

setcookie( "session_cookie", 12345, 0);

Page 46: WebTartalomfejlesztesGyakjegyzet

46

Lekérdező karakterláncok használata A sütik sok hátránnyal rendelkeznek:

• Nem minden böngésző támogatja

• Az ezt támogató böngészők sem egységesen valósítják meg őket

• A felhasználó letilthatja használatukat

Így tekintsünk egy hagyományosabb megoldást. Ezen megoldás hátránya viszont, hogy csak egyetlen látogatás „állapotát (állapotait)” képes tárolni.

Ezt a megoldást kapcsolatba hozhatjuk az űrlapfeldolgozás kapcsán említett GET típusú űrlapküldési móddal. Ha van egy egyszerű űrlapunk, mely két szövegmezőt tartalmaz, akkor ezek elküldésekor (method="GET" esetben) a feldolgozást végző PHP program az URL-ben kapja meg a szövegmezőkbe beírt értékeket. Tegyük fel, hogy az egyik szövegmező azonosítója „nev” („Pista” értékkel), a másik szövegmező azonosítója „cím” („Szeged” értékkel). Ekkor a feldolgozást végző PHP program (legyen feldolgoz.php) az URL-ből kapja a megfelelő értékeket:

http://localhost/feldolgoz.php?nev=Pista&cím=Szeged

Az egyes azonosító = érték alakú párokat &-jel választja el egymástól. A PHP ezeket az értékeket a $HTTP_GET_VARS asszociatív tömbben teszi számunkra elérhetővé:

print $HTTP_GET_VARS[nev]; Kiírja, hogy Pista

Ezen analógia alapján mi magunk is készíthetünk ilyen, az URL-hez fűzhető karakterláncokat, melyek alkalmasak egyetlen látogatás állapotainak tárolására.

Lekérdező karakterláncok készítése

Az alapprobléma annak megoldása, hogy a szükséges karakterláncot olyan formára alakítsuk, hogy az hozzáfűzhető legyen az URL-hez. Ehhez a beépített urlencode() függvény használhatjuk, mely egy karakterláncot vár paraméterként és visszatérési értéke az átalakított karakterlánc. Ha például egy weboldal címét szeretnénk átadni egy másik oldalnak (ezzel a megoldással), akkor a

urlencode("http://www.inf.u-szeged.hu");

visszatérési értéke:

http%3A%2F%2Fwww.inf.u-szeged.hu

amely már használható URL-hez fűzéshez.

Adat továbbítása lekérdező karakterláncok segítéségével – példa

[lekerkezo_karakterlancok.php]

Példaként tekintsük a következő programot, mely két változóból előállít egy lekérdező karakterláncot, majd egy linken keresztül átadja egy másik oldalnak (egy másik PHP programnak), mely a $HTTP_GET_VARS tömb segítéségével kiolvassa a megfelelő értékeket.

<html> <head> <title>Lekérdező karakterláncok tesztelése</title> </head> <body> <?php

Itt létrehozzuk a két változót, amikből a lekérdező karakterláncokat fogjuk előállítani:

$weboldal = "http://www.inf.u-szeged.hu"; $id = "SZTE Informatikai Tanszékcsoport";

A következő kifejezés a „weboldal=” karakterlánchoz konkatenálja a $weboldal változóval paraméterezett urlencode() függvény visszatérési értékét:

$lekerdez = "weboldal=".urlencode("$weboldal");

Page 47: WebTartalomfejlesztesGyakjegyzet

47

A következő kifejezés hozzáfűz egy „&” karaktert a lekérdező karakterlánchoz (jelezvén, hogy egy újabb név-érték pár következik) és az $id változón ez előzővel megegyező lépéseket is végrehajtja, azaz hozzáfűzi az „id=” karakterláncot és annak értékét, melyet most is az urlencode() függvény kimenete szolgáltat.

$lekerdez .= "&id=".urldecode("$id"); //A következő kifejezés kiírná a teljes lekérdező karakterláncot: //print $lekerdez; ?>

Egy linket hozunk létre, mely egy másik oldalra (PHP programra) mutat, mely az URL-en keresztül megkapja az általunk létrehozott értékeket:

<A HREF="ertelmez.php?<?php print $lekerdez ?>">Következő oldal</A> </body> </html>

A lekérdező karakterláncok feldolgozása – példa folytatása

[ertelmez.php]

A feldolgozást végző ertelmez.php a már megszokott módon tetszőlegesen használhatja az URL-ből átvett értékeket, jelen példa csak kiírja az általa fogadott értékeket tartalmazó tömbbel kapcsolatos információkat:

<html> <head> <title>A lekérdező karakterláncok feldolgozása</title> </head> <body> <?php

A print_r() függvény a paraméterében megadott változóval kapcsolatos információkkal tér vissza. Jelen példában egy asszociatív tömb kulcsait és értékeit írja ki.

print_r($HTTP_GET_VARS); ?> </body> </html>

Hasonló módon a feldolgozást végző PHP program is hozhatna létre további linkeket további oldalak megnyitásához, mely során az adatok oldalról oldalra való továbbítása a fenti példa alapján könnyedén megoldható.

Programunk viszont még mindig nem a legtökéletesebb, mert a lekérdező karakterláncok fent bemutatott létrehozása nem eredményez hordozható kódot, egy másik programba való átültetése nem lenne egy könnyen, de inkább gyorsan elvégezhető feladat. Ezért Bővítsük ki programunkat egy olyan függvénnyel, mely egy asszociatív tömböt vár paraméterként és az ezekből felépített lekérdező karakterlánccal tér vissza. Az eljárásra általános megoldást adunk a $QUERY_STING használatával.

Lekérdező karakterláncok létrehozása függvénnyel

[lekerkezo_karakterlancok_fuggvennyel.php]

Tehát célunk egy asszociatív tömb lekérdező karakterlánccá alakítását végző függvény megírása.

Példa inputra:

tomb[nev] = "Pista" tomb[web] = "http://www.pista.hu" tomb[erdeklodes] = "Filmek"

Az ehhez tartozó output legyen:

nev=Pista&web=http%3A%2F%2Fwww.pista.hu&erdeklodes=Filmek

Page 48: WebTartalomfejlesztesGyakjegyzet

48

A függvény megvalósítása:

function lekerdezo_gyart($tomb){

Az általánosságra törekszünk, melyet a következő két sor biztosít. Amennyiben a paraméterben kapott tömb üres, akkor a jelenlegi lekérdező karakterlánccal térünk vissza (ezt a $QUERY_STRING változó tartalmazza). Ezzel érhetjük el azt, hogy a függvényt bárhol a programon belül használva „sosem rontjuk el” a lekérdező karakterláncot, mert ha valami miatt is üres lenne a paraméterben szereplő tömb, akkor a függvény visszatérési értéke a jelenlegi lekérdező karakterlánccal teljesen megegyező, attól változatlan lesz.

global $QUERY_STRING; if ( ! $tomb ) return $QUERY_STRING;

Ha nem üres a tömb tartalma, elkezdjük annak feldolgozását.

$lek_string = "";

A foreach() a már megszokott módon bejárja a tömböt és az urlencode() függvénnyel létrehozza a lekérdező karakterláncot:

foreach( $tomb as $kulcs => $ertek ){ if ( strlen( $lek_string ) ) $lek_string .= "&"; $lek_string .= urlencode( $kulcs ) . "=" . urlencode( $ertek ); } return $lek_string; }

Tesztelésként hozzunk létre egy asszociatív tömböt:

$EbbolGyartokLekerdezest = array ( "nev" => "Balázs", "web" => "http://www.inf.u-szeged.hu/~michnay", "erdeklodes" => "Zene, Informatika, Filmek, stb..."

);

Az oldalon belül „bárhol” létrehozhatok egy linket, mely a fent létrehozott tömb átalakított változatát kapja, mint lekérdező karakterláncot:

<A HREF="ertelmez.php?

<?php print lekerdezo_gyart($EbbolGyartokLekerdezest)

?>">

Következő oldal </A>

Az ertelmez.php persze most is a $HTTP_GET_VARS tömb segítségével jut hozzá a továbbított adatokhoz.

Page 49: WebTartalomfejlesztesGyakjegyzet

49

Irodalom

O’Reilly – Using HTML

Rasmus Lerdorf – PHP Pocket Reference

http://www.zend.com

Matt Zandstra – Tanuljuk meg a PHP használatát 24 óra alatt

Tartalomjegyzék a példákhoz

HTML

elso.htm ......................................................... 5 form.htm......................................................... 14 frame.htm....................................................... 17 frame2.htm..................................................... 17 frontpage01.htm ............................................ 20 frontpage02.htm ............................................ 20 img-ol-ul-dd.htm............................................. 11 table.htm........................................................ 12

PHP asszoc_tomb.php................................................25 dowhile.php.........................................................28 elso.php ..............................................................21 ertelmez.php .......................................................47 for.php.................................................................29 foreach.php .........................................................26 foreach_asszoc.php............................................26 form_keszit.php...................................................43 gettype.php .........................................................23 (grat.htm) ............................................................42 if.php ...................................................................27 lekerkezo_karakterlancok.php ............................46 lekerkezo_karakterlancok_fuggvennyel.php ......47 megjelenit.php.....................................................34 munkamenet_suti.php.........................................45 (options.txt) .........................................................43 procedures.php ...................................................35 setcookie.php......................................................44 switch.php ...........................................................27 szamindex_tomb.php..........................................24 szamkitalalos.php ...............................................41 szamkitalalos_atiranyit.php.................................41 szamkitalalos_reg_glob_off.php .........................40 (tartalom.txt)........................................................35 tobbdim_tomb.php ..............................................25 (urlap.htm)...........................................................38 urlapfeldolgozas.php...........................................39 Vendegkonyv\index.htm ..................................... Vendegkonyv\kitolt.htm....................................... Vendegkonyv\kitolt.php....................................... Vendegkonyv\main.htm ......................................42 Vendegkonyv\megnez.php ................................. Vendegkonyv\menu.htm ..................................... Vendegkonyv\teteje.htm ..................................... while.php.............................................................28

Michnay Balázs [email protected] http://www.inf.u-szeged.hu/~michnay 2004