WEBFEJLESZTÉS 2. PHP NYELVI ALAPOK, HTML KIMENET, PHP BEMENET, ŰRLAPOK

Átírás

1 WEBFEJLESZTÉS 2. PHP NYELVI ALAPOK, HTML KIMENET, PHP BEMENET, ŰRLAPOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, Tel: (1) /1816

2 2 Ismétlés

3 Kliensoldali webprogramozás 3 Kliens-szerver architektúra Statikus kliens Dinamikus kliens Nem érdekes a szerver, csak az onnan érkező tartalom Nem is kell szerver, dolgozhatunk lokálisan Programozás a böngészőben JavaScript, DOM, stb. Szerver Kliens

4 4 Szerveroldali dinamizmus

5 Kliens-szerver architektúra 5 Érdekes a szerver is, sőt most vele foglalkozunk Két komponens: szerver és kliens mindkettőre figyelni kell térben és időben elválhatnak Csatorna: hálózat Kommunikáció: HTTP Szerver Kliens

6 Statikus állományok 6 Kérés pillanatában a szerveren megtalálható az a tartalom, amely leküldésre kerül a válaszban Fájlkiszolgálás Kiterjesztés alapján.html.jpg,.png,.gif.css.js Szerver Kliens

7 7 Szerveroldali webprogramozás

8 Szerveroldali webprogramozás 8 Az állományok nem egyszerűen visszaküldésre kerülnek Szerver egy programnak adja át a vezérlést A leküldendő tartalmat egy program állítja elő. A program kimenetét a szerver elküldi a kliensnek. Szerver Kliens Program

9 Hogyan indul el a program? 9 Common Gateway Interface Protokoll: egy webszerver hogyan indíthat el egy programot és milyen módon kommunikál vele. Mi alapján dönti el a webszerver? útvonal: cgi-bin könyvtár futtatható állományok csak ezen belül kiterjesztés.cgi.php

10 Milyen program lehet? 10 Bármilyen program lehet Bináris C++ Freepascal Szkript Shell szkript Perl PHP Python

11 Szerveroldali webprogramozás 11 Program célja, kimenete HTML generálás (általában) HTTP protokoll betartásával Program helyességét a generált tartalom, a megkapott oldal forrása alapján ellenőrizhetjük.

12 Példa C++ 12 #include <iostream> using namespace std; int main() { cout << "Content-Type: text/html" << endl; cout << endl; cout << "<!doctype html>" << endl; cout << "<html>" << endl; cout << " <head>" << endl; cout << " <meta charset=\"utf-8\">" << endl; cout << " <title></title>" << endl; cout << " </head>" << endl; cout << " <body>" << endl; cout << " <p>hello vilag!</p>" << endl; cout << " </body>" << endl; cout << "</html>" << endl; } return 0;

13 Példa C++ 13 Egyszerűen futtatva Content-Type: text/html <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>hello vilag!</p> </body> </html>

14 Példa C++ 14 Böngészőből futtatva

15 Példa C++ 15 int main() { cout << "Content-Type: text/html" << endl; cout << endl; cout << "<!doctype html>" << endl; cout << "<html>" << endl; cout << " <head>" << endl; cout << " <meta charset=\"utf-8\">" << endl; cout << " <title></title>" << endl; cout << " </head>" << endl; cout << " <body>" << endl; for (int i = 1; i<=10; i++) { cout << " <p>hello vilag!</p>" << endl; } } cout << " </body>" << endl; cout << "</html>" << endl; return 0;

16 Példa C++ 16 Content-Type: text/html <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> <p>hello vilag!</p> </body> </html>

17 Példa C++ 17 cout << " ifstream f("lista.txt"); while (!f.eof()) { string sor; getline(f, sor); cout << " } f.close(); cout << " <ul>" << endl; <ul>" << endl; <li>" << sor << "</li>" << endl; alma korte szilva

18 18 PHP Mi a PHP? Nyelvi alapok

19 PHP 19 PHP Personal Home Page PHP: Hypertext Preprocesszor Jellemzői nyílt forráskódú általános célú szkriptnyelv HTML-be ágyazható

20 PHP hivatkozások 20 Főoldal Referencia függvényreferencia nyelvi referencia kódolási tanácsok telepítés

21 PHP használata 21 Általános célú szkriptnyelv, nincsen a webhez kötve Szerveroldali dinamikus webprogramozás CGI: cgi-bin mappában Szerver modul: tetszőleges helyen CLI Command Line Interfész PHP szkriptek parancssori futtatása PHP-GTK Grafikus asztali programok írása

22 PHP a webprogramozásban 22.php kiterjesztésű állomány kérése esetén webszerver kikeresi az állományt Átadja a PHP értelmezőnek A program kimenetét a böngésző a kliens felé továbbítja Szerver PHP Kliens

23 PHP mint programozási nyelv 23 Gyengén típusos változók típusa a benne tárolt értéktől függ automatikus típuskonverziók Értelmezett PHP értelmező Szkriptnyelv Sok minden igaz, amit JavaScriptnél tanultunk szintaxis vezérlési szerkezetek, operátorok viselkedés

24 További jellemzők 24 Kis- és nagybetű érzékeny Utasításokat pontosvessző zárja le Objektumorientált nyelv (OOP) C alapú szintaxis (ismerős lesz) Nincs főprogram

25 Típusok 25 Négy elemi típus logikai egész lebegőpontos szöveg Két összetett típus tömb osztály Speciális típusok erőforrás NULL callbacks

26 Változók 26 $valtozo Hatókör globális változók függvényen belül lokális változók Szuperglobális változók (ld. függvények) Változó változók $a = 'hello'; $$a = 12; //$hello === 12

27 Literálok 27 //Logikai true false TRUE FALSE //Például $l = true; $i = -23; $d = 23.65; //Egész 12 //decimális //oktális 0x0F //hexadecimális 0b0101 //bináris //Lebegőpontos e12-7E-2

28 Szövegliterál 28 aposztróf macskaköröm heredoc nowdoc Változók behelyettesítése $a = 12; $s1 = 'alma\t{$a} alma'; //alma\t{$a} alma $s1 = 'Több sor is lehet benne'; $s2 = "alma\t{$a} alma"; //alma 12 alma $s2 = "Ez egy több soros szöveg"; $s3 = <<<EOT //behelyettesít Több soros {$a} szöveg EOT; $s4 = <<<'EOT' //nem helyettesít be Ez is lehet {$a} több soros. EOT;

29 Típusokkal kapcsolatos fontos 29 függvények Kiírás echo var_dump() print_r() Típusbeállítás cast (int)$a settype() Típuslekérdezés gettype() is_integer() is_float() is_numeric() is_string() is_bool()

30 Kiírások, típusműveletek 30 $l = true; $i = -23; $d = 23.65; $s = 'alma'; echo $l; //1 echo $i; //-23 echo $d; //23.65 echo $s; //alma var_dump($l); //bool(true) var_dump($i); //int(-23) var_dump($d); //float(23.65) var_dump($s); //string(4) "alma" //Típuslekérdezés echo gettype($l); //'boolean' echo gettype($i); //'integer' echo gettype($d); //'double' echo gettype($s); //'string' //Típusbeállítás $sd1 = (string)$d; $sd2 = $d; settype($sd2, 'string'); echo gettype($sd1); //'string' echo gettype($sd2); //'string' print_r($l); //1 print_r($i); //-23 print_r($d); //23.65 print_r($s); //alma

31 Típusokkal kapcsolatos fontos 31 függvények Speciális függvények isset() is_null() empty() Automatikus konverziók Típusok összehasonlítása

32 Összehasonlítás 32 Expression gettype() empty() is_null() isset() boolean : if($x) $x = ""; string TRUE FALSE TRUE FALSE $x = null NULL TRUE TRUE FALSE FALSE var $x; NULL TRUE TRUE FALSE FALSE $x is undefined NULL TRUE TRUE FALSE FALSE $x = array(); array TRUE FALSE TRUE FALSE $x = false; boolean TRUE FALSE TRUE FALSE $x = true; boolean FALSE FALSE TRUE TRUE $x = 1; integer FALSE FALSE TRUE TRUE $x = 42; integer FALSE FALSE TRUE TRUE $x = 0; integer TRUE FALSE TRUE FALSE $x = -1; integer FALSE FALSE TRUE TRUE $x = "1"; string FALSE FALSE TRUE TRUE $x = "0"; string TRUE FALSE TRUE FALSE $x = "-1"; string FALSE FALSE TRUE TRUE $x = "php"; string FALSE FALSE TRUE TRUE $x = "true"; string FALSE FALSE TRUE TRUE $x = "false"; string FALSE FALSE TRUE TRUE

33 Összehasonlítás 33 TRUE FALSE "1" "0" "-1" NULL array() "php" "" TRUE TRUE FALSE TRUE FALSE TRUE TRUE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE TRUE FALSE TRUE FALSE FALSE TRUE FALSE TRUE TRUE FALSE TRUE 1 TRUE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE FALSE FALSE 0 FALSE TRUE FALSE TRUE FALSE FALSE TRUE FALSE TRUE FALSE TRUE TRUE -1 TRUE FALSE FALSE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE "1" TRUE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE FALSE FALSE "0" FALSE TRUE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE FALSE "-1" TRUE FALSE FALSE FALSE TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE NULL FALSE TRUE FALSE TRUE FALSE FALSE FALSE FALSE TRUE TRUE FALSE TRUE array() FALSE TRUE FALSE FALSE FALSE FALSE FALSE FALSE TRUE TRUE FALSE FALSE "php" TRUE FALSE FALSE TRUE FALSE FALSE FALSE FALSE FALSE FALSE TRUE FALSE "" FALSE TRUE FALSE TRUE FALSE FALSE FALSE FALSE TRUE FALSE FALSE TRUE

34 Operátorok 34 Ugyanaz, mint JavaScriptben Különbség + kizárólag összeadás szövegösszefűzés:. "piros"."alma"

35 Tömb 35 Gyűjtemények általános objektuma Összetett adatszerkezet megvalósítása rekord indexelt tömb asszociatív tömb többdimenziós tömb fa, sor, verem, stb. Asszociatív tömb: kulcs-érték párokból áll kulcs: integer vagy string érték: bármilyen típusú lehet

36 Tömb 36 //Üres tömb $urestomb = array(); //Indexelt tömb $indtomb = array('alma', 'korte', 'szilva'); echo $indtomb[0]; //'alma' print_r($indtomb); /* Array ( [0] => alma [1] => korte [2] => szilva ) */ //Indexelt tömb vegyes értékekkel $indtombvegyes = array('alma', 12, true, ); print_r($indtombvegyes); /* Array ( [0] => alma [1] => 12 [2] => 1 [3] => ) */

37 Tömb 37 //Indexelt tömb egyesével hozzáadva $indtombkezi = array(); $indtombkezi[0] = 'alma'; $indtombkezi[1] = 'korte'; $indtombkezi[2] = 'szilva'; print_r($indtombkezi); /* Array ( [0] => alma [1] => korte [2] => szilva ) */ //Indexelt tömb egyesével hozzáadva $indtombkezi2 = array(); $indtombkezi2[] = 'alma'; $indtombkezi2[] = 'korte'; $indtombkezi2[] = 'szilva'; print_r($indtombkezi2); /* Array ( [0] => alma [1] => korte [2] => szilva ) */

38 Asszociatív tömb 38 //Asszociatív tömb $assztomb = array( 'alma' => 'piros', 'korte' => 'sarga', 'szilva' => 'kek', ); echo $assztomb['alma']; //piros print_r($assztomb); /* Array ( [alma] => piros [korte] => sarga [szilva] => kek ) */ //Asszociatív tömb kézzel $assztombkezi = array(); $assztombkezi['alma'] = 'piros'; $assztombkezi['korte'] = 'sarga'; $assztombkezi['szilva'] = 'kek'; print_r($assztombkezi); /* Array ( [alma] => piros [korte] => sarga [szilva] => kek ) */

39 Mátrix 39 Tömbök tömbje Lehet vegyesen használni indexeltben indexelt indexeltben asszociatív //Mátrix $matrix = array( array(1, 2, 3), array(4, 5, 6), array(7, 8, 9), );

40 Tömbök bejárása 40 foreach reset(), next(), prev(), current(), key(), each() foreach ($t as $key => $value) { echo $key.$value; } foreach ($t as $value) { echo $value; } $fruit = array('a' => 'apple', 'b' => 'banana', 'c' => 'cranberry'); reset($fruit); while (list($key, $val) = each($fruit)) { echo "$key => $val\n"; }

41 Vezérlési szerkezetek 41 Ugyanaz, mint C++-ban vagy JavaScriptben Elágazások if if-else switch Ciklusok for foreach (ld. tömbök) while do-while

42 Függvények 42 Szintaxisban hasonlít a JavaScriptes függvényekre Változók láthatósága más A globális változók nem látszódnak a függvényeken belül $GLOBALS[] tömb global kulcsszó szuperglobális változók (mindenhol látszódnak) Érték és referencia szerinti paraméterátadás mint C++-ban

43 Függvények 43 $a = 12; function fv($par1 = 'korte', &$par2) { echo $par1; echo $a; //Hiba echo $GLOBALS['a']; $par2 += 10; return $par1; } $b = 10; echo fv('alma', $b); //alma echo $b; //20

44 45 PHP futtatása Parancssor, HTML-be ágyazva

45 PHP kód elhelyezése 46.php kiterjesztésű fájl <?php és?> tagek közötti részt futtatja a PHP értelmező <?php //PHP kód?> Ezeken kívüli rész automatikusan kiírásra kerül Több PHP blokk is lehet

46 Példa 47 Sima szöveg <?php echo "PHP generálta szöveg";?> Megint sima szöveg <?php echo "Még egy blokk"; if (true) {?> Csak ha igaz, akkor íródik ki. <?php }?> Vége

47 Parancssori futtatás 48 Lehetőség van egy PHP szkriptet parancssorban futtatni php pelda1.php

48 Böngészőből meghívva 49 Célja általában: HTML generálása De lehet programmal előállítani: képek css js Kiíró utasítás: echo

49 Példa 50 echo '<!doctype html>'; echo '<html>'; echo ' <head>'; echo ' <meta charset="utf-8">'; echo ' <title></title>'; echo ' </head>'; echo ' <body>'; echo ' <p>hello vilag!</p>'; echo ' </body>'; echo '</html>';

50 Példa 51 echo <<<VEGE <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </html> VEGE; </body>

51 Példa 52 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </html> </body>

52 Példa 53 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <?php for ($i = 1; $i <=10; $i++) { echo "<p>hello vilag!</p>"; }?> </body> </html>

53 Megoldási lépések 54 Adatszerkezetek megadása Elvárt HTML leírása (statikus) Az adatszerkezet alapján PHP-val az elvárt HTML-t generálni.

54 Összefoglalás 55 Dinamikus szerveroldali webprogramozás: program állítja elő a tartalmat (HTML) Bármilyen nyelv PHP nyelv Szerver PHP Kliens

55 56 HTTP protokoll

56 HTTP protokoll 57 Kérés-válasz alapú protokoll a kliens és szerver között Mindig a kliens kezdeményez Kliens: kérés kérést küld a 80-as TCP portra jellemzően böngésző (hivatkozások, formok) Szerver: válasz TCP/IP réteg feletti protokoll

57 HTTP protokoll 58 W3C szabvány RFC-k 0.9 verzió (1991) 1.0 verzió (1996) RFC verzió (1999) RFC 2086, RFC ml

58 HTTP kérés 59 Első sora METÓDUS ERŐFORRÁS VERZIÓ Ezt követik a fejlécsorok tetszőleges számban FEJLÉC: ÉRTÉK Üres sor Opcionális üzenettest

59 HTTP kérés példa 60 GET /index.html HTTP/1.1 Host: webprogramozas.inf.elte.hu GET / HTTP/1.1 Host: webprogramozas.inf.elte.hu User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:19.0) Gecko/ Firefox/19.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: hu-hu,hu;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Cookie: utma= ; utma= ; utmz= utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided) Connection: keep-alive

60 HTTP kérés metódusok 61 GET Megadott erőforrás letöltése POST Feldolgozandó adat felküldése HEAD Ld. GET, de csak a válasz fejléceket kéri le PUT Feltölt a megadott erőforrást DELETE Törli a megadott erőforrást

61 HTTP kérés metódusok 62 TRACE Visszaküldi a kapott kérést OPTIONS A szerver által támogatott HTTP metódusok listája CONNECT Kérést transzparens tunnellé alakítja (SSL-hez kell)

62 HTTP válasz 64 Első sora: státuszsor VERZIÓ STÁTUSZKÓD INDOKLÁS Fejlécsorok tetszőleges számban FEJLÉC: ÉRTÉK Üres sor Opcionális üzenettest

63 HTTP válasz státuszsor 65 Státuszkód 1xx: Informatív (kérés megkapva) 2xx: Siker (kérés megérkezett, elfogadva) 200 OK 3xx: Átirányítás (további műveletre van szükség) 4xx: Kliens hiba (kérés hibás, nem teljesíthető) 404 Not found 404 Nem található 5xx: Szerver hiba (nem tudja teljesíteni a kérést) 500 Internal Server Error

64 HTTP válasz példa 66 HTTP/ OK Date: Wed, 03 Apr :11:56 GMT Server: Apache/ (Linux/SUSE) Last-Modified: Wed, 20 Feb :39:44 GMT ETag: "fe8438-6d6-4d623e65e9400" Accept-Ranges: bytes Content-Length: 1750 Content-Type: text/html <!DOCTYPE html> <html>... </html>

65 HTTP eszközök 67 telnet TCP alapú, kétirányú, általánosan elérhető, nyolcbites byte-alapú kommunikációs protokoll Kérést tudunk vele küldeni tetszőleges TCP portra Böngésző kiegészítők Live HTTP headers HTTPFox > telnet webprogramozas.inf.elte.hu 80 HTTP kérés sorai (beírva, bemásolva) HTTP válasz sorai

66 68 HTTP eszközök példa

67 69 HTTP eszközök példa

68 70 Szerveroldali input Szerveroldali input és output, Common Gateway Interface

69 Input? 71 Hogyan kapnak a programok (PHP) bemeneti adatokat? kliens webszerver programozási nyelv (PHP)

70 Common Gateway Interface (CGI) 72 Azt határozza meg, hogy egy webszerver hogyan indíthat el egy programot és milyen módon kommunikál vele. Környezeti változók Kérés adatai Standard input és output Kéréshez kapcsolat adat Szerver Kliens PHP

71 Környezeti változók 73 AUTH_TYPE CONTENT_LENGTH CONTENT_TYPE GATEWAY_INTERFACE HTTP_* PATH_INFO PATH_TRANSLATED QUERY_STRING REMOTE_ADDR REMOTE_HOST REMOTE_IDENT REMOTE_USER REQUEST_METHOD SCRIPT_NAME SERVER_NAME SERVER_PORT SERVER_PROTOCOL SERVER_SOFTWARE

72 Környezeti változók példa 74 [HTTP_HOST] => webprogramozas.inf.elte.hu [HTTP_USER_AGENT] => Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/ Firefox/19.0 [HTTP_ACCEPT] => text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 [HTTP_ACCEPT_LANGUAGE] => hu-hu,hu;q=0.8,en-us;q=0.5,en;q=0.3 [HTTP_ACCEPT_ENCODING] => gzip, deflate [HTTP_REFERER] => [HTTP_COOKIE] => WACID= A ; utma= ; utmz= utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided) [HTTP_CONNECTION] => keep-alive [PATH] => /usr/sbin:/bin:/usr/bin:/sbin [SERVER_SIGNATURE] => <address>apache/ (Linux/SUSE) Server at webprogramozas.inf.elte.hu Port 80</address> [SERVER_SOFTWARE] => Apache/ (Linux/SUSE) [SERVER_NAME] => webprogramozas.inf.elte.hu [SERVER_ADDR] => [SERVER_PORT] => 80 [REMOTE_ADDR] => [DOCUMENT_ROOT] => /srv/www/webprog [SERVER_ADMIN] => [SCRIPT_FILENAME] => /home/gyozke/public_html/wf2/temp/getpost.php [REMOTE_PORT] => [GATEWAY_INTERFACE] => CGI/1.1 [SERVER_PROTOCOL] => HTTP/1.1 [REQUEST_METHOD] => GET [QUERY_STRING] => [REQUEST_URI] => /~gyozke/wf2/temp/getpost.php [SCRIPT_NAME] => /~gyozke/wf2/temp/getpost.php [PHP_SELF] => /~gyozke/wf2/temp/getpost.php [REQUEST_TIME] =>

73 HTTP kérésből környezeti változó 75 Kérés URL-je <scheme>://<host>:<port>/<path>?<query>#<fragment> Ezek leképezése környezeti változókra <scheme> SERVER_PROTOCOL <host> SERVER_NAME <port> SERVER_PORT <path> SCRIPT_NAME (PATH_INFO) <query> QUERY_STRING

74 Kéréshez tartozó adat 76 Ha a HTTP kérés törzsében további adat érkezik (pl. POST esetén) Program standard bemenetén jelenik meg CONTENT_LENGTH byte hosszúságban

75 A program eredménye 77 A program eredményének a standard outputon kell megjelennie Ezt továbbítja a webszerver a kliens felé Szerver PHP Kliens

76 CGI összefoglalás 78 HTTP kérés részei kerülnek átadásra a programnak URL környezeti változók Üzenettörzs standard bemenet Egyéb adatok környezeti változók Információ hol érkezhet QUERY_STRING HTTP üzenettörzs Többi a kérés körülményeit írja le!

77 79 Kliensoldali input Hogyan küldünk adatot a szerverre?

78 CGI 80 CGI URL csatolt adatok Kliens milyen egy URL? hogyan csatolunk adatot? kik indíthatnak kérést?

79 URL 81 Általános formája Például <scheme>://<host>:<port>/<path>?<query>#<fragment>

80 Kérésindítási lehetőségek 82 Cím beírása (GET) Linkre kattintás (GET) Űrlap elküldése (GET, POST) JavaScript (GET, POST) oldal újratöltés űrlap elküldés AJAX (bármilyen HTTP metódus)

81 Navigálás 83 Cím beírása, linkek A megadott URL kerül elküldésre <a href="

82 Űrlapok 84 <form> elem beállításai Interaktív űrlapelemek Elküldés módja

83 <form> elem 85 Attribútumok action: szerveroldali erőforrás megjelölése method: HTTP metódus enctype: a formadatok kódolása a küldés során Enctype application/x-www-form-urlencoded (alapértelmezett) multipart/form-data (fájlfeltöltés, csak POST esetén) text/plain (levélküldés)

84 Űrlap elküldése 86 Elküldés submit gomb megnyomása JavaScript: form.submit() meghívása Elküldhető elemek kiválasztása name attribútum (nagyon fontos) nem disabled bejelölt checkbox bejelölt radio kiválasztott select

85 Űrlap elküldése (folytatás) 87 Kérési adatok összeállítása Elküldhető formelemekből név=érték párokat készít ezeket & jellel fűzi össze Kérési adatok kódolása ld. enctype attribútum Query String

86 Űrlap elküldése (folytatás) 88 A kódolt kérési adatok elküldése GET az action-ben megadott URL mögé fűzi egy?-lel A Query String az URL adatokat tárolására szolgáló <query> részben jelenik meg limitált méret az URL mérete miatt (2 kb) POST a HTTP kérés üzenettörzsében utazik a Query String sok adat küldhető

87 Űrlap elküldése példa 89 Űrlap: <form action=" method="post"> <input type="text" name="alma" value="piros"> <input type="password" value="kek"> <input type="hidden" name="jelszo" value="titkos"> <input type="checkbox" name="check1" value="ertek1" checked> <input type="checkbox" name="check2" checked> <input type="submit"> </form> Query string alma=piros&jelszo=titkos&check1=ertek1&check2=on

88 Űrlapelemek 90 Szöveges elemek <input> type: text, password, hidden <textarea> mindig elküldésre kerülnek akár üres szöveggel is textareánál vigyázni kell: minden elküldésre kerül, ami a <textarea></textarea> elem között van

89 Űrlapelemek 91 checkbox, radio csak bejelölve kerül elküldésre ha nincs value on érték select csak bejelölve kerül elküldésre ha nincs value option szövege az érték size>1 esetén ha nincs kiválasztva nem küldi el multiple esetén ugyanazon névvel több név=érték pár (pl. sel=alma&sel=szilva)

90 Űrlapelemek 92 submit ha van neve elküldésre kerül az értékével (felirat) file enctype="multipart/form-data method="post"

91 Összefoglalás 93 GET beírás, link: megfelelő URL kézi előállítása form: automatikusan állnak elő a név=érték párok POST method="get", action=" form: automatikusan állnak elő a név=érték párok a Query String az üzenettörzsben utazik

92 95 CGI programok

93 CGI 96 CGI kommunikációja környezeti változók standard bemenet és kimenet Programoknak tudnia kell környezeti változók értékeit lekérdezni olvasni a standard bemenetről írni a standard kimenetre

94 Adatok tipikus beolvasása 97 REQUEST_METHOD GET vagy POST GET QUERY_STRING POST CONTENT_LENGTH hosszan standard inputról olvasni QUERY_STRING is töltve lehet (URL függő)

95 Példa C++ program 98 Környezeti változó olvasása getenv(str) Standard bemenetről olvasás karakterenként fgetc(stdin) Szövegműveletek

96 Példa C++ program 99 request_method = getenv("request_method"); content_length_str = getenv("content_length"); content_length = atoi(content_length_str); query_string_get = getenv("query_string"); string query_string_post = ""; if (strcmp(request_method, "POST") == 0) { int db = 0; char c; while (db < content_length && EOF!= (c = fgetc(stdin))) { query_string_post += c; db++; } }

97 100 PHP inputolása

98 Szuperglobális tömbök 101 $_GET: QUERY_STRINGben érkező név=érték pároknak megfelelő tömb, ahol a név az a kulcs. $_POST: a standard inputon érkező név=érték pároknak megfelelő tömb, ahol a név az a kulcs. $_SERVER: az összes környezeti változót tartalmazza $_FILES: a feltöltött fájlok helyét tartalmazza $_COOKIES: a kliensről érkező sütik jelennek meg benne

99 Gyakorlatilag 102 Kliensen egy link $_GET['alma'] == 'piros' Kliens űrlapbeli elemek $_GET $_POST Ha inputot várunk, mindig írassuk ki a $_GET és $_POST függvényt!

100 $_GET és $_POST példa 103 <form action="kiir.php?korte=sarga" method="post"> <input type="text" name="alma" value="piros"> <input type="text" name="szilva" value="kek"> <input type="submit"> </form> <?php print_r($_get); print_r($_post); Array ( [korte] => sarga ) Array ( [alma] => piros [szilva] => kek )

101 Példa 104 Kör kerületének kiszámítása Input: sugár Kötelező Output: kerület Valid oldalon jelenjen meg

102 1. megoldás 105 Az URL-ben adjuk át paraméterként <?php print_r($_get); print_r($_post); //beolvasás $sugar = $_GET['sugar']; //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; //kiiras echo "<p>sugár = {$sugar}</p>"; echo "<p>kerulet = {$ker}</p>";

103 megoldás Valid oldal, megfelelő karakterkódolás <?php print_r($_get); print_r($_post);?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <?php //beolvasás $sugar = $_GET['sugar']; //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; //kiiras echo "<p>sugár = {$sugar}</p>"; echo "<p>kerulet = {$ker}</p>";?> </body> </html>

104 megoldás Feldolgozás kivétele a kiírásból <?php print_r($_get); print_r($_post); //beolvasás $sugar = $_GET['sugar']; //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; //kiiras?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <?php echo "<p>sugár = {$sugar}</p>"; echo "<p>kerulet = {$ker}</p>";?> </body> </html>

105 megoldás Kiírás csiszolása Csak a valóban dinamikus tartalom legyen PHP-ban <?php print_r($_get); print_r($_post); //beolvasás $sugar = $_GET['sugar']; //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; //kiiras?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <p>sugár = <?php echo $sugar;?></p> <p>kerület = <?php echo $ker;?></p> </body> </html>

106 Input hiánya t.php Kezelni kell az input hiányát Alapértelmezett érték Hibaüzenet

107 5. megoldás 110 Alapértelmezett érték //beolvasás $sugar = 0; if (isset($_get['sugar'])) { $sugar = $_GET['sugar']; } //beolvasás $sugar = (isset($_get['sugar'])? $_GET['sugar'] : 0);

108 6. megoldás 111 Hibaüzenet Kimenet <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <?php if ($hiba) {?> <p><?php echo $hiba;?></p> <?php } else {?> <p>sugár = <?php echo $sugar;?></p> <p>kerület = <?php echo $ker;?></p> <?php }?> </body> </html>

109 megoldás Hibaüzenet Beolvasás Ellenőrzés megadták? kitöltötték? szám? Több input esetén hibalista (PHP tömb) hibalista (HTML ul) //beolvasás $sugar = null; if (isset($_get['sugar'])) { $sugar = $_GET['sugar']; } //előfeltétel ellenőrzése $hiba = ''; if (is_null($sugar)) { $hiba = 'Sugár hiányzik!'; } else if ($sugar == '') { $hiba = 'Sugár üres!'; } else if (!is_numeric($sugar)) { $hiba = 'Sugár nem szám!'; } if (!$hiba) { //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; }

110 114 Űrlapok

111 Űrlapok 115 Előző megoldás nem felhasználóbarát böngésző címsora URL Input megadás a felhasználó részéről általában űrlapokon keresztül történik

112 Tervezés 116 kerulet.html kerulet.php Hiba Űrlap Megoldás

113 Űrlap 117 kerulet.html statikus oldal <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <form action="kerulet.php" method="get"> Sugár: <input type="text" name="sugar"> <input type="submit"> </form> </body> </html>

114 Feldolgozó szkript 118 kerulet.php (ld. korábban) <?php print_r($_get); print_r($_post); //beolvasás $sugar = $_GET['sugar']; //előfeltétel ellenőrzése $hiba = ''; if (is_null($sugar)) { $hiba = 'Sugár hiányzik!'; } else if ($sugar == '') { $hiba = 'Sugár üres!'; } else if (!is_numeric($sugar)) { $hiba = 'Sugár nem szám!'; } if (!$hiba) { //feldolgozás $pi = pi(); $ker = 2 * $sugar * $pi; } //kiiras?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>kerulet</title> </head> <body> <?php if ($hiba) {?> <p><?php echo $hiba;?></p> <?php } else {?> <p>sugár = <?php echo $sugar;?></p> <p>kerület = <?php echo $ker;?></p> <?php }?> <a href="kerulet.html">vissza az űrlapra</a> </body> </html>

115 Ergonómiai megfontolások 119 Az alkalmazás funkcionálisan teljesíti az elvárásokat De nem ergonomikus a használata Felhasználó nem tudja, mit írt be Külön kattintásra (vissza) tud javítani újra számolni Jó lenne ott jelezni a hibát, ahol az űrlap van Jó lenne az űrlapon jelezni a megoldást is

116 Tervezés oldalak 120 Hiba 1 Űrlap* Űrlap 2 3, 4, Űrlap* Megoldás

117 Tervezés állomány szint 121 PHP kód 1: nincs input kiírás (űrlap) 1 kerulet.php PHP kód 2, 3, 4, : 2, 3, 4, beolvasás ellenőrzés feldolgozás kiírás (űrlap) Eldöntés Van-e POST adat REQUEST_METHOD Hiba (opc) Űrlap* Megoldás (opc)

118 HTML rész 122 POST-ra átírva! <body> <?php if ($hiba) {?> <p><?php echo $hiba;?></p> <?php }?> <form action="kerulet.php" method="post"> Sugár: <input type="text" name="sugar"> <input type="submit"> </form> <?php if (isset($ker)) {?> <p>sugár = <?php echo $sugar;?></p> <p>kerület = <?php echo $ker;?></p> <?php }?> </body>

119 Feldolgozó rész 123 Lényeg: if ($_POST) { } $hiba kiemelve az elágazás elé $hiba = ''; if ($_POST) { //beolvasás //... //előfeltétel ellenőrzése //... if (!$hiba) { //feldolgozás //... } }

120 124 Képernyőképek

121 Űrlap állapottartása 125 Írjuk vissza a kitöltött adatokat, legalább hiba esetén! <form action="kerulet.php" method="post"> Sugár: <input type="text" name="sugar" value="<?php echo $sugar;?>"> <input type="submit"> </form> $hiba = ''; $sugar = ''; if ($_POST) { //beolvasás $sugar = $_POST['sugar']; //... }

122 Feldolgozó rész kiemelése 126 Függvénybe zárjuk a lényegi részt Elkülönítjük az adatok beolvasásától és kiírásától function kerulet($sugar) { $pi = pi(); $ker = 2 * $sugar * $pi; return $ker; } //... if ($_POST) { //... if (!$hiba) { //feldolgozás $ker = kerulet($sugar); } }

123 Szkript szerkezete 127 Három nagy részből áll Adatszerkezetek és ezeket feldolgozó függvények A kérés fogadásáért, beolvasásért, ellenőrzésért és kiírásért felelős rész Megjelenítendő HTML sablonja <?php //Adatok és függvények // //Beolvasás //Ellenőrzés //Feldolgozás meghívása // ?> <!doctype html> <html>  <html>

124 Összefoglalás 128 Adatok átadása URL? utáni része $_GET tömbbe kerül formok, name attribútum az elemeknél $_GET, $_POST tömbökbe, ahol a name attribútum a kulcs Űrlapok feldolgozása Önmaguknak küldik if ($_POST) megkülönböztetni az első hívást a többitől Minden szkript három részből áll: adat, beolv, HTML

125 131 PHP nyelv

126 Adatszerkezetek 132 //Rekord $rekord = array( 'mezo1' => 'ertek1', 'mezo2' => 'ertek2', 'mezo3' => 'ertek3', ); //Tömb $indtomb = array( 'ertek1', 'ertek2', 'ertek3', ); //Rekordok tömbje $rektomb = array( array( 'mezo1' => 'ertek1', 'mezo2' => 'ertek2', ), array( 'mezo1' => 'ertek1', 'mezo2' => 'ertek2', ), array( 'mezo1' => 'ertek1', 'mezo2' => 'ertek2', ), );

127 Tömb műveletek foreach ciklus in_array(mit, miben) sort, shuffle array_keys, array_values, array_key_exists

128 Szövegműveletek szöveg: karakterek tömbje explode, implode substr trim, ltrim, rtrim strstr, strpos, strrpos preg_match

129 Dátum és idő date time, localtime strtotime getdate date_*

130 136 Fejlesztői környezet

131 Fejlesztői környezet részei 137 Szerver oldalon webszerver PHP Kliens oldalon böngésző Fejlesztői környezet Szerkesztő program (HTML, PHP, CSS) SFTP, SCP kliens az állományok webszerverre töltéséhez

132 Szerver oldal 138 webprogramozas.inf.elte.hu Felhasználónév: NEPTUNKOD Jelszó: almafa1 SSH klienssel bejelentkezve passwd paranccsal változtatható meg

133 Webszerver 139 Apache 2 Dokumentumok gyökérkönyvtára: Ez a szerveren a következő mappa: ~/public_html/

134 PHP 140 Modulként telepítve nem processként, hanem threadként fut phpinfo()

135 Böngésző 141 Bármelyik kurrens böngésző választható Kényelmesen és gyorsan lehessen fejlesztésre használni Kiegészítő modulok: http figyelése, validátorok Fejlesztőeszközök Forrás színezése Keresés a forrásban is Sütik, képek kezelése Funkciók letiltása Gyorsítótár ürítése

136 IDE 142 Kényelmi funkciók PHP, HTML és CSS szerkesztése szintaxis alapján színezés kódkiegészítés blokkok jelölése, össszecsukása behúzások intelligens kezelése nyomkövetés támogatása utasítások szignatúrája, leírása projektek kezelése állományok szerverre feltöltése verziókövető rendszerek integrálása kódrészletek definiálása pluginek kezelése Notepad++ Netbeans IDE Eclipse Aptana

137 Otthoni fejlesztéshez 143 XAMPP telepítőcsomag Multiplatform XAMPP tartalmazza Apache (IPv6 enabled) + OpenSSL 0.9.8l MySQL PBXT engine PHP phpmyadmin Perl FileZilla FTP Server Mercury Mail Transport System 4.72

138 144 XAMPP telepítés

139 145 XAMPP kezdőlap (

140 XAMPP Biztonsági figyelmeztetés 146 A feltelepült rendszerben A MYSQL adminisztrátornak nincs jelszó beállítva MYSQL démon a hálózaton elérhető phpmyadmin elérhető a hálózaton A XAMPP kezdőlap elérhető a hálózaton A Mercury és FileZilla alkalmazások alapértelmezett felhasználói adatai ismertek Ha nyilvános webszervert készítünk, akkor biztonságossá kell tenni

141 147 XAMPP biztonsági beállítások (Security)

142 148 XAMPP biztonsági beállítások (Security)

143 XAMPP portable 149 Nem kell telepíteni, pendrive-ról is működik Lépések Mappa létrehozása XAMPP ZIP változatának letöltése, kitömörítése a mappába setup_xampp.bat elindítása xampp-control.exe elindítása és a vezérlőpulton elindítható a kívánt szolgáltatás