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

Hasonló dokumentumok
PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT

Forráskód formázási szabályok

PHP-MySQL. Adatbázisok gyakorlat

PHP. Adatbázisok gyakorlat

Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés

ReszlAd fájl, kitöltési útmutató:

Multimédia 2017/2018 II.

PHP. Telepítése: Indítás/újraindítás/leállítás: Beállítások: A PHP nyelv

Webtárhely létrehozása a helyen. Lépések Teendő 1. Böngészőbe beírni: 2. Jobb oldalon regisztrálni (tárhelyigénylés).

WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok

Weblap készítése. Fapados módszer

Cikktípusok készítése a Xarayában


Webprogramozás szakkör

Regionális forduló november 18.

Objektumorientált Programozás III.

HTML é s wéblapféjlészté s

Információs technológiák 1. Gy: HTML alapok

GPRS Remote. GPRS alapú android applikáció távvezérléshez. Kezelési útmutató

Youtube videó letöltés és konvertálás Linuxon

Felhasználói kézikönyv

Egyszerűbb a Google keresőbe beírni a Sharepoint Designer 2007 letöltés kulcsszavakat és az első találat erre a címre mutat.

openbve járműkészítés Leírás az openbve-hez kapcsolódó extensions.cfg fájl elkészítéséhez

Információs technológiák 2. Gy: CSS, JS alapok

Tájékoztató. Használható segédeszköz: -

Internet technológiák

BASH script programozás II. Vezérlési szerkezetek

PHP MySQL, Java JDBC MySQL. Adatbázisok az iskolában 2012 Dr. Balázs Péter Palatinus Endre és Erdőhelyi Balázs diái alapján

1. Alapok. #!/bin/bash

A függvény kód szekvenciáját kapcsos zárójelek közt definiáljuk, a { } -ek közti részt a Bash héj kód blokknak (code block) nevezi.

Információ és kommunikáció

Webes kurzus kezelés folyamata Oktatói felületek

Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.

A C# programozási nyelv alapjai

Szkriptnyelvek. 1. UNIX shell

1.1.1 Dátum és idő függvények

PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig

Webkezdő. A modul célja

Belépés a GroupWise levelező rendszerbe az Internet felől

InFo-Tech emelt díjas SMS szolgáltatás. kommunikációs protokollja. Ver.: 2.1

Az alábbiakban a portál felépítéséről, illetve az egyes lekérdező funkciókról kaphat részletes információkat.

OKTATÁSKUTATÓ ÉS FEJLESZTŐ INTÉZET TÁMOP-3.1.5/ Pedagógusképzés támogatása

Alapvető beállítások elvégzése Normál nézet

Jelentkezési lap képző szervek részére

Inczédy György Középiskola, Szakiskola és Kollégium Nyíregyháza, Árok u. 53. TANMENET. Informatika szakmacsoport

Végrehajtói Nyilvántartó Rendszerbe illeszkedő Postázási modul ismertetése

Felhasználói segédlet

Gyakorló 9. feladat megoldási útmutató

Ingyenes PDF nyomtató alkalmazás használata terminál szerverrel / felhős rendszerrel

Titkosított kommunikáció. Mindenkivel. Egyszerűen.

TESZ INTERNET ÉS KOMMUNIKÁCIÓ M7

Területi elemzések. Budapest, április

Operációs rendszerek. 9. gyakorlat. Reguláris kifejezések - alapok, BASH UNIVERSITAS SCIENTIARUM SZEGEDIENSIS UNIVERSITY OF SZEGED

Programozási technológia

Képek és grafikák használata

A leírás bemutatja hogy mint minden másra, Favicon készítésre is alkalmas az ingyenes Gimp rajzolóprogram.

Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

A Google űrlap (form) használata

Hiteles Elektronikus Postafiók

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

DebitTray program Leírás

file./script.sh > Bourne-Again shell script text executable << tartalmat néz >>

3. Osztályok II. Programozás II

Mikroszámla. Interneten működő számlázóprogram. Kézikönyv

Tájékoztató. Használható segédeszköz: -

Számítástechnika I. BMEKOKAA152 BMEKOKAA119 Infokommunikáció I. BMEKOKAA606. Dr. Bécsi Tamás 3. előadás

ADATSZOLGÁLTATÁS webes metaadat-szerkesztővel

Dusza Árpád Országos WEB Programozói Emlékverseny 2017

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

Minőségellenőrzési kérdőív kitöltő program Felhasználói kézikönyv

Változók. Mennyiség, érték (v. objektum) szimbolikus jelölése, jelentése Tulajdonságai (attribútumai):

ContractTray program Leírás

Access gyakorlati feladatok lépésről lépésre

Oktatási segédanyag. Weboldalszerkesztési gyakorlatok

Használati utasítás.

Szoftvertechnolo gia gyakorlat

TUDNIVALÓK A WEB-FEJLESZTÉS I. KURZUSRÓL

Hatodéves jelentkezés a Moduloban

Web alapú támogatási kérelem generáló rendszer Felhasználói leírás foglalkoztatók számára

Ügyfélforgalom számlálás modul

ServiceTray program Leírás

Javacript alapismeretek

AWK programozás, minták, vezérlési szerkezetek

Útmutató a pályázási rendszer használatához

Felhasználói segédlet

ONLINE SZAKÉRTŐI KERETRENDSZER

BASH SCRIPT SHELL JEGYZETEK

O365 és felhő szolgáltatások igénybevételéhez szükséges beállítások

Vezérlési szerkezetek

HelpDesk. A lista felett szűrési lehetőségek találhatóak, amelyek alapértelmezetten szűrhetik a listát minden belépéskor, és át is állíthatók:

C programozási nyelv

Web programozás. 3. előadás

A számítógép beállításainak megváltoztatása

Rajz 06 gyakorló feladat

S z á m í t ó g é p e s a l a p i s m e r e t e k

Memeo Instant Backup Rövid útmutató. 1. lépés: Hozza létre ingyenes Memeo fiókját. 2. lépés: Csatlakoztassa a tárolóeszközt a számítógéphez

Felhasználói kézikönyv

EDInet Connector telepítési segédlet

Operációs rendszerek. 9. gyakorlat. BASH recap, reguláris kifejezések UNIVERSITAS SCIENTIARUM SZEGEDIENSIS UNIVERSITY OF SZEGED

Dr. Pál László, Sapientia EMTE, Csíkszereda WEB PROGRAMOZÁS 6.ELŐADÁS. Fájlkezelés PHP-ben

Átírás:

Határidő: http://ffacsko.emk.nyme.hu/index.php?id=10664 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ő e-mailbe! 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 http://quercus.emk.nyme.hu/php/koszonoviszony.php oldalon. Másolja be az e-mailbe 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 http://quercus.emk.nyme.hu/php/szineshello.php oldalon. Másolja be a forráskódot az e-mailbe, é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 e-mailhez történő csatolásával bizonyítsa!

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 http://quercus.emk.nyme.hu/php/helyesszines.php oldalon. Másolja be az e-mailbe 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

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

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

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 e-mailbe, é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 (http:// ffacsko.emk.nyme.hu/index.php?id=10664) tartalmazza. Az e-mail tárgyaként a feladat sorszámát adja meg! Az elküldött e-mail 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

A levél elküldésének időpontja után ne módosítsa a weboldalak fájljait. Az e-mailben helyezze el az önálló munkavégzést igazoló nyilatkozatot: http://www.nym e.hu/index.php?id=10665! Az e-mailt 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 e-mail 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