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
Szerver
.css
.js
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ó
kiterjesztés .cgi .php
állományok csak ezen belül
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
using namespace std; int main() { cout << "Content-Type: text/html" << endl; cout << endl; cout cout cout cout cout cout cout cout cout cout
<< << << << << << << << << <<
"" << endl; "" << endl; " " << endl; " <meta charset=\"utf-8\">" << endl; " " << endl; " " << endl; " " << endl; " Hello vilag!
" << endl; " " << endl; "" << endl;
return 0; }
Példa – C++ 13
Egyszerűen futtatva Content-Type: text/html <meta charset="utf-8"> Hello vilag!
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 cout cout cout cout cout cout
<< << << << << << <<
"" << endl; "" << endl; " " << endl; " <meta charset=\"utf-8\">" << endl; " " << endl; " " << endl; " " << endl;
for (int i = 1; i<=10; i++) { cout << " Hello vilag!
" << endl; }
cout << " " << endl; cout << "" << endl; return 0; }
Példa – C++ 16
Content-Type: text/html <meta charset="utf-8"> Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Hello vilag!
Példa – C++ 17
cout << " " << endl; ifstream f("lista.txt"); while (!f.eof()) { string sor; getline(f, sor); cout << " - " << sor << "
" << endl; } f.close(); cout << " " << 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
Kliens
PHP
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
Két összetett típus
logikai
tömb
egész
osztály
lebegőpontos
szöveg
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 //Egész 12 //decimális -34 0123 //oktális 0x0F //hexadecimális 0b0101 //bináris //Lebegőpontos 3.1415 5.6e12 -7E-2
//Például $l = true; $i = -23; $d = 23.65;
Szövegliterál 28
aposztróf macskaköröm heredoc nowdoc Változók behelyettesítése
$a = 12; $s1 = 'alma\t{$a} alma'; $s1 = 'Több sor is lehet benne';
//alma\t{$a} alma
$s2 = "alma\t{$a} alma"; $s2 = "Ez egy több soros szöveg";
//alma
12 alma
$s3 = <<<EOT Több soros {$a} szöveg EOT;
//behelyettesít
$s4 = <<<'EOT' Ez is lehet {$a} több soros. EOT;
//nem helyettesít be
Típusokkal kapcsolatos fontos függvények 29
Kiírás
Típuslekérdezés
echo
gettype()
var_dump()
is_integer()
print_r()
is_float()
Típusbeállítás
is_numeric()
cast
is_string()
(int)$a
settype()
is_bool()
…
Kiírások, típusműveletek 30
$l $i $d $s
= = = =
echo echo echo echo
//Típuslekérdezés echo gettype($l); echo gettype($i); echo gettype($d); echo gettype($s);
true; -23; 23.65; 'alma'; $l; $i; $d; $s;
//1 //-23 //23.65 //alma
var_dump($l); var_dump($i); var_dump($d); var_dump($s);
//bool(true) //int(-23) //float(23.65) //string(4) "alma"
print_r($l); print_r($i); print_r($d); print_r($s);
//1 //-23 //23.65 //alma
//'boolean' //'integer' //'double' //'string'
//Típusbeállítás $sd1 = (string)$d; $sd2 = $d; settype($sd2, 'string'); echo gettype($sd1); //'string' echo gettype($sd2); //'string'
Típusokkal kapcsolatos fontos függvények 31
Speciális függvények isset() is_null() empty()
Automatikus konverziók http://www.php.net/manual/en/language.types.type-
juggling.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 = ""; $x = null var $x;
string NULL NULL
TRUE TRUE TRUE
FALSE TRUE TRUE
TRUE FALSE FALSE
FALSE 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; $x = 42; $x = 0; $x = -1;
integer integer integer integer
FALSE FALSE TRUE FALSE
FALSE FALSE FALSE FALSE
TRUE TRUE TRUE TRUE
TRUE TRUE FALSE 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
TRUE
FALSE 1
0
TRUE
FALSE TRUE
FALSE TRUE
FALSE FALSE TRUE
FALSE TRUE
FALSE TRUE
-1
"1"
"0"
TRUE
FALSE TRUE
FALSE FALSE TRUE
1
TRUE
FALSE FALSE TRUE
0
FALSE TRUE
-1
TRUE
FALSE FALSE FALSE TRUE
"1"
TRUE
FALSE TRUE
"0"
FALSE TRUE
"-1"
TRUE
FALSE TRUE
""
FALSE FALSE TRUE
FALSE
FALSE TRUE FALSE TRUE
FALSE FALSE TRUE
TRUE
FALSE TRUE
FALSE TRUE
TRUE
FALSE FALSE FALSE FALSE
FALSE FALSE FALSE FALSE FALSE FALSE
FALSE FALSE TRUE
FALSE FALSE FALSE TRUE
NULL array() "php"
FALSE FALSE FALSE FALSE FALSE FALSE
FALSE FALSE TRUE
FALSE FALSE TRUE
FALSE TRUE
"-1"
FALSE FALSE FALSE FALSE FALSE
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 TRUE
FALSE TRUE
FALSE FALSE FALSE FALSE FALSE FALSE TRUE FALSE FALSE FALSE FALSE TRUE
FALSE
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 tagek közötti részt futtatja a PHP értelmező
Ezeken kívüli rész automatikusan kiírásra kerül Több PHP blokk is lehet
Példa 47
Sima szöveg Megint sima szöveg Csak ha igaz, akkor íródik ki. 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 echo echo echo echo echo echo echo echo echo
''; ''; ' '; ' <meta charset="utf-8">'; ' '; ' '; ' '; ' Hello vilag!
'; ' '; '';
Példa 51
echo << <meta charset="utf-8"> VEGE;
Példa 52
<meta charset="utf-8">
Példa 53
<meta charset="utf-8"> Hello vilag!"; } ?>
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
Kliens
PHP
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
Ezt követik a fejlécsorok tetszőleges számban FEJLÉC:
ERŐFORRÁS VERZIÓ
É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ó
HEAD Ld.
GET, de csak a válasz fejléceket kéri le
PUT Feltölt
adat felküldése
a megadott erőforrást
DELETE Törli
a megadott erőforrást
HTTP kérés – metódusok 62
TRACE Visszaküldi
OPTIONS A
a kapott kérést
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Ó
Fejlécsorok tetszőleges számban FEJLÉC:
STÁTUSZKÓD INDOKLÁS É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 ...
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 > telnet webprogramozas.inf.elte.hu 80 HTTP kérés sorai (beírva, bemásolva) HTTP válasz sorai
Böngésző kiegészítők Live
HTTP headers HTTPFox
HTTP – eszközök példa 68
HTTP – eszközök példa 69
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 Szerver PHP Kérés
adatai
Standard input és output Kéréshez
kapcsolat adat Kliens
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] => Apache/2.2.10 (Linux/SUSE) Server at webprogramozas.inf.elte.hu Port 80 [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] => [email protected] [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>://:<port>/<path>?#
Ezek leképezése környezeti változókra SERVER_PROTOCOL SERVER_NAME <port> SERVER_PORT <path> SCRIPT_NAME (PATH_INFO) QUERY_STRING <scheme>
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
Kliens
PHP
CGI összefoglalás 78
HTTP kérés részei kerülnek átadásra a programnak környezeti változók Üzenettörzs standard bemenet Egyéb adatok környezeti változók URL
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 <scheme>://:<port>/<path>?#
Például
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
Valami
Űrlapok 84