Helló Világ! Témakörök. a.) feladat. b.) feladat. c.) feladat. Határidő: szerint

Átírás

1 Határidő: szerint Témakörök a.) feladat Helló Világ! A gyakorlaton megtanulja, 1. hogyan kell PHP parancsokat ágyazni egy HTML kódot tartalmazó fájlba; 2. hogyan kell űrlapot készíteni (HTML); 3. hogyan kell táblázatot készíteni (HTML); 4. hogyan kell programelágazást szervezni (PHP); Készítsen egy PHP-oldalt, amely a böngészőbe a Helló Világ! üdvözletet írja! Mivel ez lesz az első php programja, segítségképpen talál működőképes kódokat a 2. és 3. oldalon. Vizsgálja meg, hogy a böngészőben milyen forráskód jelenik meg! Másolja be mindkét kódot (az Ön által megírt és a böngésző által megjelenítettet) a feladatot készre jelentő be! A forráskódhoz 1. ábra: Helló Világ! kapcsolódóan helyezzen el egy, a php-oldalra mutató linket is! Válaszolja meg a következő kérdést: 1 Hasonlítsa össze a két kódot, és magyarázza meg, hogy mit is jelent a szerver oldali programozás kifejezés! (A válaszadás megkönnyítésére a megjegyzések között talál segítséget.) b.) feladat Módosítsa úgy az előző PHP-oldalt, hogy az a napszaknak megfelelően köszönjön! 5:00 7:59: Jó reggelt! 8:00 18:59: Jó napot! 19:00 22:59: Jó estét! 23:00 4:59: Helló világ! A működő kód eredményét megtekintheti a oldalon. Másolja be az be az Ön által megírt kódot, és magyarázza el működését! A forráskódhoz kapcsolódóan helyezzen el egy, a php-oldalra mutató linket is! c.) feladat Módosítsa az előzőekben elkészített HelloVilag.php kódot olymódon, hogy a felhasználó maga állíthassa be a háttér és a betű színét! A színeket egy legördülő listából lehessen kiválogatni. A működő kód eredményét megtekintheti a oldalon. Másolja be a forráskódot az be, és magyarázza el annak működését! A forráskódhoz kapcsolódóan helyezzen el egy, a php-oldalra mutató linket is! Próbálja ki a 2. ábra: Színes Helló Világ! kódot a method=get és a method=post beállításokkal is! 2 Milyen különbséget tapasztal a két metódus működésében? Válaszának helyességét képernyőshotok készítésével, és azoknak az hez történő csatolásával bizonyítsa!

2 d.) feladat Módosítsa az előző kódot oly módon, hogy ne fordulhasson elő az azonos háttér- és betűszín. Ha véletlenül valaki azonos színeket állít be, akkor állítódjon be a fekete háttér- és fehér betűszín. A weboldal a hibás beállításról tájékoztassa is a felhasználót. A működő kód eredményét megtekintheti a oldalon. Másolja be az be a forráskódot, és magyarázza el működését! A forráskódhoz kapcsolódóan helyezzen el egy, a php-oldalra mutató linket is! Néhány megjegyzés Figyeljen arra, hogy behúzásokkal tegye áttekinthetővé, könnyen olvashatóvá a phpkódot! Alkalmazza az előző gyakorlaton létrehozott stíluslapot! Mint a kezdő előadások egyikén szó volt róla, a php-állományok végeredményként egy html-kódot generálnak, mégpedig oly módon, hogy egy webszerver és egy phpszerver együttműködik. Ha a html-fájl feldolgozására érkezik kérelem, akkor csak a webszerver dolgozik, de ha php-állomány a feldolgozandó, akkor a kérelmet a webszerver továbbítja a php-szerver fele, majd a php-szerver által generált html-kódot küldi vissza az igénylő böngészőprogramnak (3. ábra). php php Egy php-fájlban vegyesen fordulnak elő html tagek és php utasítások. Nézzük meg az a.) feladat egy lehetséges megoldását: <html> <head> <title>.:: Helló Világ! ::.</title> <link rel= styleshhet type= text/css href=../osztott/gwj7t7.css > </head> <body><bb> <?php ❶ print( Helló Világ! );?> </bb> </body> </html> A php utasításokat a <?php?> határolójelek között kell elhelyeznünk, olyasféleképpen, mintha egy páratlan tag volna, melynek paraméterei a php parancsok. Hogy ezek felismerhetőek legyenek, le kell zárnunk őket pontosvesszővel (;). A html (<?php?>-n kivüli) rész egyszerűen átfolyik a php szerveren, nem csinál vele semmit. A php parancsokat viszont a php szerver feldolgozweb web index.html index.php 3. ábra: Egy html- és egy php-kérelem feldolgozása 2

3 za, és a print() eljárással átadja a webszervernek. A fenti példában egy karaktersorozatot küldött át. Egy másik lehetséges némileg megbolondított, de működőképes megoldás: <html> <?php print( <he ); );?><?php print( ad> ); );?> <?php print( <title>.:: Helló Világ! ::.</title> ); print( <link rel= styleshhet type= text/css href=../osztott/gwj7t7.css > );?> <?php print( ( </head> ); );?> <b<?php <?php print( od ); );?>y> ❷ <?php print( <bb>helló ); );?> Világ!</bb> <?php echo </body> ; print( </html> ); );?> A ❷ megoldás azt próbálja bemutatni, hogy a <?php?> taget bármikor megszakíthatjuk (akár egy html-tagen belül is!), majd újra folytathatjuk. Az echo ugyanazt csinálja, mint a print, csak nem eljárásként, hanem utasításként kell használni. Ez a feladat nem valódi PHP alkalmazás. Igazából semmi jelentősége nincs a php-blokknak, a html-tagek között, kiírható lenne az üdvözlet anélkül is. Ami miatt érdekes ez az egyszerű példa, az az, hogy tanulmányozhatjuk, milyen kódsorozat áramlik át az internet vezetékein. Tegye föl valamelyik megoldást (talán az ❶-t célszerű ) a webre, majd vizsgálja meg, hogy a böngészőben milyen forráskód jelenik meg! Hogy könnyebb legyen válaszolni az a.) feladat kérdésére, készítse el kliens oldali nyelven megírt kódot. Az ❶-es <?php?> tagjét cserélje le a következő, jawascript nyelven megírt kódrészletre: <script> document.write( Helló Világ! ); </script script> A b.) feladat megoldása már nem lehetséges php-szerver nélkül. A kód nem statikus, a megjelenítendő üzenet a gép állapotának (a rendszeridőnek) függvénye. A PHP-ben rendelkezésre áll getdate() eljárás, ami a rendszerdátumot egy úgynevezett asszociatív tömbbe helyezi. A tömb olyan változó, ami nem egy, hanem több adatot tartalmaz, vagyis ugyanazzal a névvel tudunk hivatkozni több adatra. Az egyes értékeket egymással a tömbnévhez illesztett indexszel különböztetjük el egymástól. A normál tömböknél ez az index egy egész szám, az asszociatív tömböknél pedig egy megnevezés. A kiírt üdvözlőszöveg a rendszeridő óra-értékétől függ. Ezt az adatot a következő módon szerezhetjük meg: $datum=getdate(); $ora=$datum[ hours ]; Az első utasítás a rendszer időbélyegzőjét elhelyezi a $datum nevezetű tömbben. A második utasítás az időbélyegző óra-részét kiveszi a $datum-ból és elhelyezi az $ora egyszerű változónkba. Az óra-érték $datum tömbből a hours index adja ki. Mivel rendszerértékről van szó, az indexeket nem választhatjuk meg szabadon, hanem az előre definiáltakat kell használnunk. (Az hours egyébként órát jelent angolul.) A programot több esetre kell felkészítenünk: az óra-érték függvényében JóReggelt-et, JóNapot-ot, JóEstét-et vagy HellóVilág-ot kell mondania. Mivel a megkülönböztetendő esetek száma nagyobb, mint kettő, ezért a switch utasítást célszerű használni: switch (változó) {case érték 1: [utasítássorozat 1] case érték 2: [utasítássorozat 2] [default:utasítássorozat d] } A switch kulcsszó mögött kerek zárójelek között meg kell adni annak a változónak a nevét, a- melynek tartalmától, értékétől tesszük függővé, hogy mit kell csinálnia a gépnek. A switch blokkját kapcsos zárójelek határolják. Az egyes eseteket a case szócska vezeti be, mögötte konstansként meg kell adni egy értéket, majd kettőspontot követően azokat az utasításokat, amelye- 3

4 ket az adott érték esetében végre kell hajtani. Legutolsóként megadható a default sor is: ha egyik felsorolt konstanssal sem egyenlő a változó értéke, akkor az itt megadott utasítások lépnek működésbe. A switch működéséről tudni kell, hogy minden esetben minden case-sorát megvizsgálja. Ha üres utasítássorozatot talál, akkor az utána következő első, utasítássort fogja végrehajtani. Az a.) feladatnál olyan kódot készítettünk, amely mindig ugyanazt a html-kódot állította elő tulajdonképpen nem is kell hozzá PHP, a b.) feladat megoldása már időben változó pontosabban időfüggő webkódot generál, azonban egyik alkalommal sem kellett a felhasználónak működés közben beavatkoznia. Gyakran szükséges, hogy a gépet használó személy által megadott adatoktól (kívánságától) függ a generált weboldal tartalma, formája. A gépet kezelő személytől a szükséges adatokat úgynevezett űrlap (form) használatával lehet megszerezni. Egy űrlap elemeit a <form action= [FeldolgozóFájl] method= {get post} > </form> html-tagek közé kell zárni. Az action értékeként megadott fájl fogja kiértékelni a get vagy post metódus szerint továbbított adatokat. Ha nem adunk meg fájlnevet, a fájl önmagát hajtja végre ismételten. A <form > </form> tagek között helyezendők el az űrlap elemei: listák, jelölődobozok, rádiógombok, beviteli mezők, jóváhagyó nyomógomb. Egy weblapon több űrlap is elhelyezhető, de ezek közül mindig csak egy hajtható végre. A felhasználó adtamegadási szabadságát korlátozhatjuk (ezáltal a hibázás esetét kizárhatjuk) abban az esetben, ha előre tudjuk mely értékek lehetséges egy adott helyzetben. Ha ezek mennyisége véges, de sok, akkor célszerű listát szervezni: <select name= változónév [size=hossz]> <option value= érték 1 [selected]>listaelem 1 <option value= érték 2 [selected]>listaelem 2 </select> A name értékeként megadott változóban találjuk majd a kiválasztott értéket. A size azt határozza meg, hogy hány sorban jelenjenek meg a választható értékek. Magadásával gördíthető, elhagyásával legördülő lista készíthető. Annyi <option > sor szükséges, ahány elemet a listában szerepeltetnünk kell. A value mögött megadott érték adódik át feldolgozásra a name tartalmaként. Az <option > tag mögött leírt karaktersorozat lesz látható majd a listában. Nem feltétlenül szükséges, hogy az érték n és a listaelem n karaktersorozat megegyezzen. Hasznos tipp: az <option> tagben a value paraméternek azt az értéket célszerű megadni, amit a későbbiekben közvetlenül felhasználunk, így a feldolgozásnál egy újabb utasítással nem kell bonyolítani a phpkódot. Tehát például: <select name= color > <option value= green >zöld <option value= red >piros </selcet> Az <option selected> formájú tag adja meg az alapértelmezett választást. Ezen az értéken fog állni a lista az oldal meghívásakor. Elegáns, ha a kiválasztott színről tud a php-kódunk, és a beállított színeket adja viszsza alapértelmezettként a kód végrehajtása után: vagyis valamelyik <option > tagbe el kell helyezni a selected szót is. De melyikbe? Ezt a kód írásakor még nem tudjuk, ez csak a program végrehajtása során derül ki. Az ilyen események lekezelésére találták ki az if utasítást: if (feltétel) {utasítások}; Az if szócska a feltételes végrehajtásra utal. A kerek zárójelben megfogalmazott, logikai értéket szolgáltató feltétel igaz értéke esetén végrehajtódnak a kapcsos zárójelek között elhelyezett utasítások. 4

5 A feltétel három részre oszlik. A két oldalon álló kifejezéseket relációjellel kötjük össze. Mivel az összes matematikai, logikai relációjel nem található meg a szabványos ASCII kódtáblában, ezért a php összetett karaktersorozatokat is használ a reláció leírására: egyenlő = == (dupla egyenlőségjel!) nem egyenlő <> vagy!= kisebb < < kisebb vagy egyenlő <= nagyobb > > nagyobb vagy egyenlő >= A fentebb említett problémát a következő módon tudjuk megoldani: <select name= color > <option value= green <?php if ($color== green {print( selected )?> >zöld <option value= red <?php if ($color== red {print( selected )?> >piros </selcet> Mivel egyetlen színt választottunk ki, ezért egy és csakis egy esetben jelenik meg a selected szó a html-kódban. Az adatok bevitelének végét jeleznünk kell a php-szerver számára. Erre a célra szolgál a minden űrlapon kötelezően és egyetlen példányban elhelyezendő submit-mező: <input type= submit [value= felirat ]> A tag egy nyomógombot generál az űrlapon, amelynek felirata beállítható a value értékeként. Ha elhagyjuk, akkor a nyomógomb a Submit felirat lesz olvasható. A c.) program által generált oldal alsó része egy űrlap (form), ami három elemet tartalmaz: két legördülő listát, és egy nyomógombot. A két lista segítségével a betűk és a háttér színét lehet kiválasztani. A [Beállít] nyomógombon való kattintással érvényesíthetjük a választásunkat. A legördülő listáknál a kategória megnevezéseinek és a lista értékeinek illesztése (keret nélküli) táblázattal oldható meg. Néhány szín angol megnevezése: piros red zöld green kék blue barna brown sárga yellow rózsaszín pink olajzöld olive fekete black narancs orange Másolja át a forráskódot az be, és magyarázza el annak működését! A d.) feladat esetében is az if utasítást célszerű használni, de kiterjesztett módon: if (feltétel) {utasítások} else {utasítások}; Az if-fel nemcsak arról tudunk gondoskodni, hogy mi történjen akkor, ha a feltétel igaz-nak bizonyul, hanem azt is elmondhatjuk, hogy mi történjen, ha a kiértékelés eredménye hamis. Az ilyen esetben elvégzendő teendőket az else mögött adjuk meg, szintén kapcsos zárójelek között. Másolja át a forráskódot a word dokumentumba és magyarázza el annak működését! A forráskódhoz kapcsolódóan helyezzen el egy, a php-oldalra mutató linket is! Feladat leadása A feladat készre jelentésének határidejét és az e-amil címet a tantárgy honlapja ( ffacsko.emk.nyme.hu/index.php?id=10664) tartalmazza. Az tárgyaként a feladat sorszámát adja meg! Az elküldött egy példányát a szemeszter végéig őrizze meg az elküldött levelek mappájában. Bármilyen probléma, vita esetén ez a mentett levél lesz a döntő bizonyíték. 5

6 A levél elküldésének időpontja után ne módosítsa a weboldalak fájljait. Az ben helyezze el az önálló munkavégzést igazoló nyilatkozatot: e.hu/index.php?id=10665! Az t olyan postafiókból küldje, melyben a regisztrációkor a valódi nevét adta meg, és az látszódjon a feladó rovatban. Az oldalak egységes megjelenését (saját, egyéni) stíluslapokkal biztosítsa! Az oldalak szerkesztéséhez nem használhat html-szerkesztő célprogramot vagy az office programcsomag Mentés weblapként funkcióját. Az oldalakat a quercus.emk.nyme.hu szerveren helyezze el! Feladat értékelése Az a.) feladat kérdésének megválaszolása: 10 pont A b.) feladat kérdésének megválaszolása: 5 pont A b.) feladat megoldása: 20 pont A c.) feladat megoldása: 20 pont A d.) feladat megoldása: 10 pont Saját stíluslap használata: 10 pont Megfelelően tagolt forráskódok: 20 pont Magyar helyesírás szabályainak betartása: 5 pont 0 pontot ér a feladat, ha a weboldalak nem a quercus.emk.nyme.hu szerveren találhatóak. 0 pontot ér a feladat, ha a forráskód valamilyen html-szerkesztővel vagy Mentés weblapként funkcióval készült. 0 pontot ér a feladat, ha az nem tartalmazza az önálló munkavégzést igazoló nyilatkozatot. 30 ponttal csökken a feladat értéke, ha a feladó nem azonosítható be a levél fejlécéből. 30 ponttal csökken a feladat értéke, ha a levél tárgyából a feladat nem azonosítható be. A késve leadott feladatoknál naponta csökken az összpontszám 10 ponttal. Facskó Ferenc egyetemi adjunktus 6