Web programozás I. 4. előadás

Átírás

1 Web programozás I. 4. előadás

2 CSS Pozícionálás ault.asp Design kialakívása Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 2

3 4. XHTML Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 3

4 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 el az XML egy alkalmazása Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 4

5 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, tanév, őszi félév 5

6 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, tanév, őszi félév 6

7 XML szintaxis <?xml version="1.0" encoding="iso "?> <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, tanév, őszi félév 7

8 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, tanév, őszi félév 8

9 É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, tanév, őszi félév 9

10 Belső DTD példa <?xml version="1.0" encoding="iso "?> <!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, tanév, őszi félév 10

11 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, tanév, őszi félév 11

12 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, tanév, őszi félév 12

13 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, tanév, őszi félév 13

14 8. PHP Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 14

15 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, tanév, őszi félév 15

16 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, tanév, őszi félév 16

17 Kliens-szerver elvű működés Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 17

18 Saját gépre: XAMPP for Windows Apache 2.2.2, MySQL , PHP PHP pl1 + PEAR, PHP-Switch win32 1.0, XAMPP Control Version 2.3, XAMPP Security 1.0, SQLite , OpenSSL 0.9.8b, phpmyadmin 2.8.1, ADOdb 4.80, Mercury Mail Transport System v4.01b, FileZilla FTP Server c, Webalizer , Zend Optimizer van Lite változat vannak további Plug-in-ek Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 18

19 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, tanév, őszi félév 19

20 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, tanév, őszi félév 20

21 <? /* 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, tanév, őszi félév 21

22 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, tanév, őszi félév 22

23 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, tanév, őszi félév 23

24 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, tanév, őszi félév 24

25 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, tanév, őszi félév 25

26 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, tanév, őszi félév 26

27 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, tanév, őszi félév 27

28 Operátorok szokásos osztás 5/2 = 2.5 === 5 === 5 = false Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 28

29 Elágazások elseif switch case: nem csak konstans lehet Web programozás I - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév 29

30 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, tanév, őszi félév 30

31 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, tanév, őszi félév 31

32 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, tanév, őszi félév 32

33 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, tanév, őszi félév 33

34 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, tanév, őszi félév 34

35 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, tanév, őszi félév 35

36 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, tanév, őszi félév 36

37 <? 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, tanév, őszi félév 37

38 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, tanév, őszi félév 38

39 Ű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, tanév, őszi félév 39

40 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, tanév, őszi félév 40

41 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, tanév, őszi félév 41

42 $_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, tanév, őszi félév 42

43 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, tanév, őszi félév 43

44 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, tanév, őszi félév 44

45 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, tanév, őszi félév 45

46 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, tanév, őszi félév 46

47 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, tanév, őszi félév 47