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, 2.420 Tel: (1) 372-2500/1816
2 Ismétlés
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 Szerveroldali dinamizmus
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
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 Szerveroldali webprogramozás
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
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
Milyen program lehet? 10 Bármilyen program lehet Bináris C++ Freepascal Szkript Shell szkript Perl PHP Python
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.
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;
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>
Példa C++ 14 Böngészőből futtatva http://localhost/cgi-bin/hello.exe
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;
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>
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 PHP Mi a PHP? Nyelvi alapok
PHP 19 PHP Personal Home Page PHP: Hypertext Preprocesszor Jellemzői nyílt forráskódú általános célú szkriptnyelv HTML-be ágyazható
PHP hivatkozások 20 Főoldal http://www.php.net/ Referencia http://www.php.net/manual/en/ függvényreferencia nyelvi referencia kódolási tanácsok telepítés
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
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
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
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
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
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
Literálok 27 //Logikai true false TRUE FALSE //Például $l = true; $i = -23; $d = 23.65; //Egész 12 //decimális -34 0123 //oktális 0x0F //hexadecimális 0b0101 //bináris //Lebegőpontos 3.1415 5.6e12-7E-2
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;
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()
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
Típusokkal kapcsolatos fontos 31 függvények Speciális függvények isset() is_null() empty() Automatikus konverziók http://www.php.net/manual/en/language.types.typejuggling.php Típusok összehasonlítása http://www.php.net/manual/en/types.comparisons.php
Ö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
Összehasonlítás 33 TRUE FALSE 1 0-1 "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
Operátorok 34 Ugyanaz, mint JavaScriptben Különbség + kizárólag összeadás szövegösszefűzés:. "piros"."alma"
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
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, -23.34); print_r($indtombvegyes); /* Array ( [0] => alma [1] => 12 [2] => 1 [3] => -23.34 ) */
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 ) */
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 ) */
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), );
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"; }
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
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
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
45 PHP futtatása Parancssor, HTML-be ágyazva
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
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
Parancssori futtatás 48 Lehetőség van egy PHP szkriptet parancssorban futtatni php pelda1.php
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
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>';
Példa 51 echo <<<VEGE <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </html> VEGE; </body>
Példa 52 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </html> </body>
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>
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.
Összefoglalás 55 Dinamikus szerveroldali webprogramozás: program állítja elő a tartalmat (HTML) Bármilyen nyelv PHP nyelv Szerver PHP Kliens
56 HTTP protokoll
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
HTTP protokoll 58 W3C szabvány RFC-k 0.9 verzió (1991) 1.0 verzió (1996) RFC 1945 1.1 verzió (1999) RFC 2086, RFC2616 http://tools.ietf.org/html/rfc2616 http://www.w3.org/protocols/rfc2616/rfc2616.ht ml
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
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/20100101 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=159741371.1255432553.1308299517.1308299517.1308299517.1; utma=32143338.2145495546.1326532899.1361177845.1362134456.25; utmz=32143338.1361177845.24.12.utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided) Connection: keep-alive
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
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)
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
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
HTTP válasz példa 66 HTTP/1.1 200 OK Date: Wed, 03 Apr 2013 07:11:56 GMT Server: Apache/2.2.10 (Linux/SUSE) Last-Modified: Wed, 20 Feb 2013 08:39:44 GMT ETag: "fe8438-6d6-4d623e65e9400" Accept-Ranges: bytes Content-Length: 1750 Content-Type: text/html <!DOCTYPE html> <html>... </html>
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
68 HTTP eszközök példa
69 HTTP eszközök példa
70 Szerveroldali input Szerveroldali input és output, Common Gateway Interface
Input? 71 Hogyan kapnak a programok (PHP) bemeneti adatokat? kliens webszerver programozási nyelv (PHP)
Common Gateway Interface (CGI) 72 http://tools.ietf.org/html/draft-robinson-wwwinterface-00 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
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
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/20100101 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://webprogramozas.inf.elte.hu/~gyozke/wf2/temp/ [HTTP_COOKIE] => WACID=1263304129000A11327866; utma=32143338.519822639.1361532995.1362426295.1363347264.4; utmz=32143338.1362426295.3.3.utmcsr=google utmccn=(organic) utmcmd=organic utmctr=(not%20provided) [HTTP_CONNECTION] => keep-alive [PATH] => /usr/sbin:/bin:/usr/bin:/sbin [SERVER_SIGNATURE] => <address>apache/2.2.10 (Linux/SUSE) Server at webprogramozas.inf.elte.hu Port 80</address> [SERVER_SOFTWARE] => Apache/2.2.10 (Linux/SUSE) [SERVER_NAME] => webprogramozas.inf.elte.hu [SERVER_ADDR] => 157.181.161.8 [SERVER_PORT] => 80 [REMOTE_ADDR] => 188.142.184.197 [DOCUMENT_ROOT] => /srv/www/webprog [SERVER_ADMIN] => root@webprogramozas.inf.elte.hu [SCRIPT_FILENAME] => /home/gyozke/public_html/wf2/temp/getpost.php [REMOTE_PORT] => 49323 [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] => 1365626159
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
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
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
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!
79 Kliensoldali input Hogyan küldünk adatot a szerverre?
CGI 80 CGI URL csatolt adatok Kliens milyen egy URL? hogyan csatolunk adatot? kik indíthatnak kérést?
URL 81 Általános formája Például <scheme>://<host>:<port>/<path>?<query>#<fragment> http://localhost/cgi-bin/cgi.exe http://webprogramozas.inf.elte.hu/~gyozke/getpost.php http://webprogramozas.inf.elte.hu/~gyozke/getpost.php?elte http://webprogramozas.inf.elte.hu/~gyozke/getpost.php?adat=elte http://tools.ietf.org/html/rfc3986#section-3.4 http://www.w3.org/tr/rec-html40/interact/forms.html#h-17.13
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)
Navigálás 83 Cím beírása, linkek A megadott URL kerül elküldésre <a href="http://server.hu/index.php?adat=elte">valami</a>
Űrlapok 84 <form> elem beállításai Interaktív űrlapelemek Elküldés módja
<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)
Ű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
Ű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
Ű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ő http://www.w3.org/tr/rechtml40/interact/forms.html#h-17.13
Űrlap elküldése példa 89 Űrlap: <form action="http://localhost/cgi-bin/cgi.exe" 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
Ű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
Ű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)
Űrlapelemek 92 submit ha van neve elküldésre kerül az értékével (felirat) file enctype="multipart/form-data method="post"
Összefoglalás 93 GET beírás, link: megfelelő URL kézi előállítása http://pelda.com/index.php?alma=piros&korte=sarga form: automatikusan állnak elő a név=érték párok POST method="get", action="http://pelda.com/index.php" http://pelda.com/index.php?alma=piros&korte=sarga form: automatikusan állnak elő a név=érték párok a Query String az üzenettörzsben utazik
95 CGI programok
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
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ő)
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
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++; } }
100 PHP inputolása
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
Gyakorlatilag 102 Kliensen egy link http://pelda.com/index.php?alma=piros $_GET['alma'] == 'piros' Kliens űrlapbeli elemek $_GET $_POST Ha inputot várunk, mindig írassuk ki a $_GET és $_POST függvényt!
$_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 )
Példa 104 Kör kerületének kiszámítása Input: sugár Kötelező Output: kerület Valid oldalon jelenjen meg
1. megoldás 105 Az URL-ben adjuk át paraméterként http://pelda.hu/kerulet.php?sugar=10 <?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>";
106 2. 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>
107 3. 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>
108 4. 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>
Input hiánya 109 http://pelda.hu/kerule t.php Kezelni kell az input hiányát Alapértelmezett érték Hibaüzenet
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);
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>
112 6. 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; }
114 Űrlapok
Ű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
Tervezés 116 kerulet.html kerulet.php Hiba Űrlap Megoldás
Ű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>
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>
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
Tervezés oldalak 120 Hiba 1 Űrlap* Űrlap 2 3, 4, Űrlap* Megoldás
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)
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>
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 //... } }
124 Képernyőképek
Ű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']; //... }
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); } }
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 kód --> <html>
Ö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
131 PHP nyelv
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', ), );
Tömb műveletek 133 http://hu1.php.net/manual/en/book.array.php foreach ciklus in_array(mit, miben) sort, shuffle array_keys, array_values, array_key_exists
Szövegműveletek 134 http://hu1.php.net/manual/en/ref.strings.php szöveg: karakterek tömbje explode, implode substr trim, ltrim, rtrim strstr, strpos, strrpos preg_match
Dátum és idő 135 http://hu1.php.net/manual/en/ref.datetime.php date time, localtime strtotime getdate date_*
136 Fejlesztői környezet
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
Szerver oldal 138 webprogramozas.inf.elte.hu Felhasználónév: NEPTUNKOD Jelszó: almafa1 SSH klienssel bejelentkezve passwd paranccsal változtatható meg
Webszerver 139 Apache 2 Dokumentumok gyökérkönyvtára: http://webprogramozas.inf.elte.hu/~neptunkod/ Ez a szerveren a következő mappa: ~/public_html/
PHP 140 Modulként telepítve nem processként, hanem threadként fut phpinfo()
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
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
Otthoni fejlesztéshez 143 XAMPP telepítőcsomag http://www.apachefriends.org/en/xampp.html Multiplatform XAMPP 1.7.3 tartalmazza Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l MySQL 5.1.41 + PBXT engine PHP 5.3.1 phpmyadmin 3.2.4 Perl 5.10.1 FileZilla FTP Server 0.9.33 Mercury Mail Transport System 4.72
144 XAMPP telepítés
145 XAMPP kezdőlap (http://localhost/)
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
147 XAMPP biztonsági beállítások (Security)
148 XAMPP biztonsági beállítások (Security)
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