Web programozás I. 4. előadás
CSS Pozícionálás http://www.brainjar.com/css/positioning/def ault.asp Design kialakívása http://www.albinoblacksheep.com/livedesign/ http://www.dynamicdrive.com/style/ http://www.opendesigns.org/ Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 2
4. XHTML Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 3
XHTML EXtensible HyperText Markup Language - kiterjeszthető HTML HTML 4.01 leváltására hozták létre felülről (nagyjából) kompatibilis a HTML 4.01- el az XML egy alkalmazása Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 4
XML alapok EXtensible Markup Language a HTML-hez hasonló jelölőnyelv adatok leírására szolgál nincsenek előre definiált tagok a nyelvtani szabályai Document Type Definition (DTD) vagy XML Schema segítségével írhatók le nem a HTML helyett jött létre Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 5
Mire használjuk az XML-t? platform és alkalmazás-független módon írja le az adatokat heterogén rendszerek közötti információcsere B2B (Business To Business) alkalmazások Webszolgáltatások RSS, RDF Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 6
XML szintaxis <?xml version="1.0" encoding="iso-8859-1"?> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 7
Jól formázott (well formed) dokumentum minden tagnak van záró párja a tagok kisbetű-nagybetű érzékenyek az egymásba ágyazás korrekt egy gyökér eleme van a tulajdonság értékek mindig idézőjelek között szerepelnek, és mindig megadotta Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 8
Érvényes (valid) doumentum jól formázott a DTD (Document Type Definition) szabályainak megfelel <!DOCTYPE note SYSTEM "InternalNote.dtd"> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 9
Belső DTD példa <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE note [ <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> ]><note>... Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 10
XHTML a gyakorlathoz képest korrekt egymásba ágyazás tagok kisbetűvel elemek lezárása önálló elemek: pl. <br /> a tulajdonság-értékeket idézőjelbe kell tenni a tulajdonságok kötelezően tartalmaznak értéket is name helyett (mellett) id DTD kötelező Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 11
DTD változatok XHTML 1.0 Transitional Frameset Strict XHTML 1.1 (csak egyféle) Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 12
Visszafelé kompatibilitás önálló tag esetén szóköznek kell a / jelet megelőzni önálló tag nem mindig alkalmazható (pl. bekezdés esetén nem) külső stíluslapot, szkript fájlt kell alkalmazni, ha nem használható karaktereket tartalmaz (pl. <, két -) lang és xml:lang is megadható karakterkódolást: HTTP content-type (vagy XML deklaráció és meta elem) Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 13
8. PHP http://www.php.net/manual/hu/ Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 14
PHP: Hypertext Preprocessor szerver oldali szkriptnyelv dinamikus és interaktív weboldalak elkészítéséhez széles körben alkalmazott szabad hatékony Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 15
8.1. Alapok C/C++ család tagja HTML-el vegyesen alkalmazzuk a forrásfájl.php kiterjesztésű a webszerver vezényel kommunikálhat adatbázis-szerverrel is Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 16
Kliens-szerver elvű működés Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 17
Saját gépre: XAMPP for Windows Apache 2.2.2, MySQL 5.0.21, PHP 5.1.4 + PHP 4.4.2-pl1 + PEAR, PHP-Switch win32 1.0, XAMPP Control Version 2.3, XAMPP Security 1.0, SQLite 2.8.15, OpenSSL 0.9.8b, phpmyadmin 2.8.1, ADOdb 4.80, Mercury Mail Transport System v4.01b, FileZilla FTP Server 0.9.16c, Webalizer 2.01-10, Zend Optimizer 3.0.0 van Lite változat vannak további Plug-in-ek Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 18
Szintaxis A PHP és egyéb kód szétválasztása: <?php...?> <?...?> [DEMO: Helló világ!] echo, print Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 19
Sablonszerű megközelítés <?= kifejezés?> <acronym class="datum" title="<?= $datum['hosszu']?>"> <span class="honap"><?= $datum['honap']?></span> <span class="nap"><?= $datum['nap']?></span> </acronym> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 20
<? /* Az előzetes megjelenítésére, a hozzászólások számával */?> <div class="hir"> <? if ($lehethozza $tartalom) {?> <h2><a href="<?= $index?>?<?= $blognev?>/<?= $url?>"> <?= $hircim?></a></h2> <? } else {?> <h2><?= $hircim?></h2> <? }?> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 21
Változók dinamikus típusrendszer $txt="hello World"; echo $txt; $txt1="hello World"; $txt2="1234"; echo $txt1. " ". $txt2; Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 22
Változók típusai Logikai Egész számok Lebegőpontos számok Sztringek Tömbök Objektumok Erőforrások NULL Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 23
Sztringek létrehozása aposztróffal echo 'Arnold egyszer azt mondta: "I\'ll be back"'; echo 'You deleted C:\\*.*?'; idézőjellel heredoc szintaxissal Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 24
Idézőjellel változó behelyettesítés történik $ingatlan = 'ház'; echo "kertes $ingatlan kerítéssel"; // működik echo "páros $ingatlanszám"; // nem működik echo "páros ${ingatlan}szám"; // működik echo "páros {$ingatlan}szám"; // működik Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 25
Heredoc szintaxis $str = <<<VAS Példa egy stringre, amely több sorban van, és heredoc szintaxisú VAS; Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 26
Sztring karaktereinek elérése és módosítása $str = 'Ez egy teszt.'; $first = $str{0}; $harmadik = $str{2}; Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 27
Operátorok szokásos osztás 5/2 = 2.5 === 5 === 5 = false Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 28
Elágazások elseif switch case: nem csak konstans lehet Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 29
Tömbök első megközelítés Numerikus tömb Asszociatív tömb Többdimenziós tömb igazából nincs különbség Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 30
Tömbök létrehozása $names = array("peter","quagmire","joe"); ekvivalens: $names[0] = "Peter"; $names[1] = "Quagmire"; $names[2] = "Joe"; Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 31
Tömbök indexelése a következő indexet nem kötelező megadni $names[] = "Jack"; nem csak folytonos lehet Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 32
Asszociatív tömbök $ages = array("peter"=>32, "Quagmire"=>30, "Joe"=>34); ekvivalens: $ages['peter'] = "32"; $ages['quagmire'] = "30"; $ages['joe'] = "34"; Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 33
Többdimenziós tömbök $families = array ( ); "Griffin"=>array ("Peter", "Lois", "Megan"), "Quagmire"=>array ("Glenn"), "Brown"=>array ("Cleveland", "Loretta", "Junior") Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 34
Tömb kiírása print_r($families) Array ( [Griffin] => Array ( [0] => Peter [1] => Lois ), [Quagmire] => Array ( [0] => Glenn ), [Brown] => Array ( [0] => Cleveland [1] => Loretta [2] => Junior ) ) Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 35
Ciklusok szokásos + foreach egyszerűbb foreach ($array as [$key =>]$value) { ciklusmag } $arr=array("one", "two", "three"); foreach ($arr as $value) { echo "Value: ". $value. "<br />"; } Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 36
<? foreach ($fomenu as $cim => $menublokk) {?> <h2><?= $cim?></h2> <ul> <? foreach ($menublokk as $azon => $menupont) {?> <? if ($aktualisfomenu == $azon) {?> <li><?= $menupont['cim']?></li> <? } else {?> <li><a <? if ($menupont['felirat']) {?>title="<?= $menupont['felirat']?>" <? }?> href="<?= $index?>?<?= $azon?>"><?= $menupont['cim']?></a></li> <? }?> <? }?> </ul> <? }?> </div> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 37
Függvények function writemyname($fname) { echo $fname. " Refsnes.<br />"; } echo "My name is "; writemyname("kai Jim"); echo "My name is "; writemyname("hege"); Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 38
Űrlapok és felhasználói adatbevitel <html><body> <form action="welcome.php" method="post"> Name: <input type="text" name="name" /> Age: <input type="text" name="age" /> <input type="submit" /> </form> </body></html> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 39
Adatok feldolgozása: welcome.php <html> <body> Welcome <?php echo $_POST["name"];? >.<br /> You are <?php echo $_POST["age"];?> years old. </body> </html> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 40
GET vagy POST? GET a paraméterek megjelennek az URL-ben korlátozott a mérete POST könyvjelzők esetén nem használható Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 41
$_GET űrlap nélkül is használatos oldalak közötti navigáció megoldása: index.php?id=23 ehhez a linket eleve így kell gyártani : <a href= index.php?id=23 >Masik oldal</a> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 42
Adatok érvényessége a szerver oldalon mindig kell ellenőrizni! [később komplex példát nézünk] Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 43
Dátumok kezelése unix időbélyeg formázott kiírás date(format[,timestamp]) echo date("y/m/d"); echo date("y.m.d"); echo date("y-m-d"); mktime - időbélyeget képes előállítani $tomorrow = mktime(0,0,0,date("m"),date("d") +1,date("Y")); Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 44
Az include és társai a PHP bemásolja és lefuttatja a fájlt <html> <body> <?php include("header.php");?> <h1>welcome to my home page</h1> <p>some text</p> </body> </html> Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 45
4 lehetőség include require hiba esetén leáll include_once, require_once csak egyszer Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 46
Front Controller tervezési minta 1. verzió [DEMO] index.php: vezérlés config.inc.php: konfigurálás oldal könyvtár: oldalak Web programozás I - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév 47