A programozás oktatása WEB-es alkalmazásfejlesztő eszközök segítségével

1. A programozás oktatása WEB-es alkalmazásfejlesztő eszközök segítségével Fábián Zoltán 2006 (az anyag itt elérhető: http://www.szily.hu/photoalbum/2006_Roadshow/2006_suli_webkonferencia_2.ppt)

2. Előzmények • 1982 – Commodore Plusz4 – Basic, AssemblySzámítástechnika tanítás (C-64 – BASIC), Pascal, Logo, ELAN, CLipper, C, Java, FazztScript nyelvek • 1992 – Világbanki project, programozás oktatása a Szilyben – Pascal nyelv • 1999 – Ismerkedés a PHP 3-mal, MySql-lel • 2000 – PHP oktatás kezdete a számítástechnikai programozók évfolyamán – szakdolgozatok (PHP+MySQL)

3. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Sok diák jelentkezik informatikára az általános iskola után. Miért? • A számítógép játék • A számítógép egy elvarázsolt világ, • A számítógép „titkai” megtanulhatók • A családban van informatikus, esetleg programozó • Korábbi elhivatott tanár Van megfelelő motiváció, de kevés az ismeret

4. Az informatikus diákok csekély része lesz programozó. Miért? • Hozott képességek. Kell • algoritmizálási képesség, • kreativitás, • alkalmazni kell tudni a tanultakat, • Motiváltság • szorgalom – otthoni munka • kitartás – sokáig tart, amíg látványos eredményeket ér el az ember.

5. Az alkotás vágya az alapvető motiváció a programozásra? Mikor marad fent ez a motiváció? • Vannak viszonylag gyors sikerek, látványos előrehaladás • Olyan alkalmazások készítésének a képessége, amelyeket nap, mint nap használ • Látványos alkalmazások elkészítésének képessége

6. Mi a helyzet középiskolában és az OKJ-s szakmákban? Mi info tanárok mindannyian a Pascalon szocializálódtunk! • A középszintű Informatika érettséginek nem része a programozás, emelt szinten elegendő a Pascal nyelv ismerete • Informatikai alapismeretek érettségihez középszinten és emelt szinten elegendő a Pascal ismerete • OKJ középfokú programozó vizsgát lehet tenni Pascallal (Igaz kellene még egy nyelv, de a pontszám elegendő) • A képzési idő nem elég a jó programozási gyakorlat elsajátítására

7. Ma már a Pascal nem motivál eléggé • Nem grafikus – csak Delphi esetén vagy BGI grafikával • Nincs képkezelés, gombok, stb... • Kevés ahhoz, hogy olyan játékot írjon a gyerek, mint amit szokott játszani • Nincs köze az Internethez • A számítógép szerepe mára megváltozott, ablak egy kitágult világra

8. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás MegoldásInternetes technológiák használata!

9. Vannak gyors sikerek! <?php print(”A hello World!”); ?> • Gyorsan fejleszthető • A változók használata a típusok keveredése miatt nem túl szigorú • Elágazások, ciklusok használata érthető, világos

10. Látványos előrehaladás • Az alkalmazásokkal egyszerűen HTML és PHP keverésével látványos megoldások érhetők el

11. Olyan alkalmazások készítésének a képessége, amelyeket nap, mint nap használ • Az internet használata során a diákok látják, hogy a site-ok jelentős része php alapú. • Viszonylag könnyen lehet készíteni alkalmazásokat, amelyek hasonlítanak nagy példaképekre.

12. Látványos alkalmazások elkészítésének képessége • Ha egy diák az Internetről levesz egy-egy ingyenes DHTML megoldást, akkor látványossá teheti az oldalt.

13. Milyen rendszer felel meg az oktatás követelményeinek? • Lehessen interaktív programot írni • Legyenek alapvető struktúrák (szekvencia, iteráció, szelekció) • Függvény, eljárás hívás • Sokféle egyszerű adattípus • Összetett adattípusok: tömbök, rekordok • Globális és lokális változók • Paraméterátadás: cím és érték szerint is • Szövegkezelő függvények • Fájlkezelés • OOP

14. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Esélyes technológiák • Java (kliens és szerver oldal is) • Javascript (kliens oldal) • PHP (szerver oldal)

15. JAVA • Appletekre és kliens alkalmazásokra tökéletesen alkalmas • Adattípusok széles választéka áll rendelkezésre • Globális, lokális változók használhatók • Paraméterátadás: cím és érték szerint is • Függvény és eljárás • Szigorú programszerkezet. csak formai megfelelőség esetén fordul le a program • Fájlkezelés kliens alkalmazások esetén • Grafika, képkezelés • Vezérlési szerkezetek széles választéka • OOP Kezdőnyelvnek nehéz, mert teljesen OOP centrikus!

16. Javascript • Majdnem mindenben megfelel • Fájlkezelés nincs a böngészőben • A tömbök kissé „furcsán” viselkednek • Futási idejű hibaellenőrzés nehézkes

17. PHP • Mindennek megfelel, kivéve • Nem túl szigorú a programszerkezet, futási időben történik a hibaellenőrzés • Nem interaktív –azért ez megoldható • Szerveroldali (majdnem csak) • OOP majdnem teljes a PHP5-ben • Erősségek • Sok szövegkezelő függvény • Sok fájlkezelő függvény Jó választás

18. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Jó-e a PHP kezdőnyelvnek? <?php print(”Hello Word!”); ?> • Az elején egyszerű, természetes, a tanulással együtt lehet összetett alkalmazásokat írni. • Alapesetben nem interaktív

19. Milyen feltételek kellenek a tanításhoz (ha lehet olcsón)? • HardverEgy mai átlagos PC, lehet kicsit régibb is. • MS Windows 2000, Windows XP vagy Linux op. rendszer, azaz platform független rendszer. Az eszközök ingyenesek • Jegyzettömb, vagy valami erősebb ASCII editor vagy komolyabb alkalmazásként, PSPad • Apache és később MySQL • Böngésző – IE6 vagy Firefox 1.5+

20. Komolyabb eszközök • WAMP – Windows Apache MySQL PHP (XAMP, BigApache, Uniserver, stb) • PHP Eclipse platformfüggetlen IDE – JAVA-ra épül • Zend IDE – minden ami a fejlesztéshez kell (Editor, Debugger, Profiler) • CodeCharge – későbbi előadás

21. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Előismeretek • Stabil, de egyszerű HTML alapok kellenek • A HTML oldal szerkezete • Néhány alapvető tag: • <p>,<br>, <table>,<th>,<tr>,<td>, • A formázáshoz szükséges paraméterek • <FORM> • Jó, ha van stíluslap, CSS tudás A fenti dolgokat megtanítjuk, vagy átvesszük az oktatás előtt

22. A kliens-szerver architektúra koncepció lényegét elmagyarázom • A fejlesztői gépen a kliens és szerver egy és ugyanaz lehet

23. Első lépések – a PHP kód, és a HTML kód viszonya • A PHP program kimenete HTML kód, amit a böngésző értelmez! • Sulykolni kell egyszerű kiírást és formázást létrehozó példákon keresztül • Ezalatt szintaktikai alapismeretek a PHP-ban. • Ha második nyelv, akkor jelmondat: Mint a C-ben (majdnem)! Lássunk néhány példát!

24. A majdnem „Hello world!” PHP-ben. Majdnem_Hello_world.php <html> <head> <title>Hello world</title> </head> <body> Hello world! </body> </html> Ha a PHP fájl csak HTML kódból áll, akkor, mintha nem is lenne PHP. A PHP értelmező beolvassa a fájlt, majd kiküldi a szervernek változatlan formában.

25. A „Hello world!” PHP-ben. helloworld1.php <html> <head> <title>Hello world</title> </head> <body> <?php echo ”Hello world!”; ?> </body> </html> A PHP nyitó tagtől a zárótagig az interpreter értelmezi a kódot. A kimenet a webszerverhez kerül.

26. Alternatív kiíró utasítások helloworld2.php <html> <head> <title>Hello world</title> </head> <body> <?php echo ”Ez is jó lesz kiírásra”; print (”Hello world!<br>”); printf (”%6d a sorszáma”, 1984); ?> </body> </html> A print() többször használatos, sőt van a c-hez hasonló printf() is, ugyanolyan formázó stringek használatával. Az egyszerű példákban megjelenítünk HTML tag-eket is a PHP segítségével

27. Változók és típusok bevezetése • Ha a változók és adattípusok fogalmát ismerik a diákok, akkor átismételjük a PHP-ben lévőket. • Ha nem ismerik azokat, akkor bevezetjük az egyszerű típusokat. • A String típus hová soroljuk? Szerintem az egyszerűek közé. • Változók használatának szintaktikai szabályai • A középiskolás korosztály esetén célszerű a példákon keresztül megközelíteni a programozás tanulását, és így eljutni az elméletig.

28. A PHP típusos nyelv, de … • A változó neve mindig $ jellel kezdődik. A név kis és nagybetű érzékeny! • A változó típusa értékadáskor dől el. Pl.: $s = ”Szia, ez egy string”; // string $d = 123; // egész szám $f = 123.23457; // float $b = true; // logikai típus $t = array(); // Tömb típus $fp = fopen(”C:/valami.txt”,”r”); // erőforrás típus $o = new semmi(); // osztályokról később Gyakori az automatikus típuskonverzió: Echo $s . ” : ” . $d; // Stringre konvertál minden kiírandót // . A stringek összefűzésére használt jel

29. Operátorok használata • Stringek összefűzése • Matematikai alapműveletek <?php $x = 5; $y = 10; $z = $x.”*”.$y.” eredménye:”.($x*$y).” lesz”; print($z); ?>

30. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Szelekció Az elején nem törekszünk minden vezérlési szerkezet megismertetésére <?php $x = rand(0,100); if($x <50){ print(” Nem nyert”); }else{ print(” Ön nyert!”); } ?>

31. Szelekció 2. Persze a többi szerkezetet is megtanítjuk később if( feltétel){ utasíás1; Utasítás2; }elseif(feltétel){ alternatív_utasítás1; alternatív_utasítás2; }else{ alternatív_2utasítás1; alternatív_2utasítás2; } Switch(ertek){ case kons1 : utasítás; break; case konst2 : ……. default utasítás; }

32. Konstansok, default értékek • Konstans definiálása Define(”KNEV”, érték); • Ha nem tudom, hogy korábban már definiáltam-e egy konstanst, akkor adok neki egy default értéket if( !defined(”KNEV”) ) define(”KNEV”, ”default érték”); • Ha nem tudom, hogy egy változó már létezik-e, azt is megvizsgálhatom és adhatok neki default értéket. if(!isset($a) ) $a = 1112; // default érték; Ha tudni akarom hogy létezik-e a változó vagy az értéke ... if (!isset($a) || ( $a == 0 ) ) $a = 1;

33. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Iteráció Mintapélda a ciklus használatának bemutatására <?php for($i=0; $i< 100; $i++){ print($i.”<br>”); } print(”<table>”); for($i=0; $i< 100; $i++){ print(”<tr>”); print(”<td>”.$i.”</td>”); print(”<td>”.($i+100).”</td>”); print(”</tr>”); } print(”</table>”); ?>

34. Iteráció Mintapélda ciklusok alkalmazására: $i = 0; $x = 0; while( $x> 80 && $i < 100 ){ $x = rand(1,100) print($i.” : ”.$x); $i++; } $i = 0 do{ echo $i; } while ($i > 0); Ezekre a ciklusokra a tanulás során a programozási tételeknél lesz szükség

35. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Tömbök • Bevezetem a tömböket, mint egyszerű adatok sorozatát. • Index, tömbelem van stb... • Csak egy dimenziós tömbök • Példák a for ciklus és a tömbök együttműködésére ... itt most nem részletezem

36. Iteráció II. A foreach speciális ciklus, később van jelentősége $t = array("Pista", "géza"); foreach($t AS $i => $e){ print("index: "); print($i); print(", Érték: "); print($e); print("<br>"); } A futás eredménye: Index: 0, Érték: PistaIndex: 1, Érték: géza

37. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Eljárások, függvények • Hol deklarálhatom, és mikor érhetem el. • Paraméterátadás (Érték szerinti, default érték, cím szerint) • Eljárás a PHP-ban paraméterekkel function procnev($a, $b = 123){ echo $a . $b; } • Függvény átadott paraméterekkel function fnev($a){ $a = $a +2; return $a; } • Eljárás cím szerinti paraméterátadással function fnev ( &$a ){ $a = $a *2; }

38. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Változók hatásköre és globalitása • A php oldalon létrejövő változók globálisak • A függvények/eljárásokon belül deklarált minden változó lokális. • Ha a globális névtérből importálhatok változókat • Léteznek szuperglobális változók, amelyek a PHP kód minden részérő elérhetők.

39. Nézzünk egy példát <?php $a = 1118; //Globális változók $b = 123; $c = 9999; $GLOBALS[”hello”] = ”Ez szuperglobális” //Mi ez tömb? Function fn(){ global $a; // Importálom a globális névtérből, // tehát használhatom a függvényen belül $c = ”Ez lokális változó”; $a ++; //A globális változó értékét növeltem $szoveg = $GLOBALS[”hello”]; echo $szoveg. } ?>

40. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Egy kis kitérő - GET metódus • Ha egy HTML oldalon van egy link, és arra kattintasz, akkor paramétert adsz át a következő PHP oldalnak: <a href=”http://localhost/getpelda.php?sz=123&ok=sziamiau”> Ez itt a link </a> Ez a paraméterátadás GET metódussal zajlik. A meghívott oldalon automatikusan létrejön az alábbi változó: $_GET[”sz”] és értéke 123 lesz! getpelda.php <?php Echo ”Ezt kaptam: ” . $_GET[”sz”] . ”<br>”; echo ”Meg ezt: ” . $_GET[”ok”] ?>

41. POST metódus bevezetése - interaktivitás A HTML oldalon lévő űrlap elküldi az adatokat egy másik oldalnak POST metódussal. Index.html <form action=”postpelda.php” method=”POST”> <input type=”text” name=”name”> <input type=”checkbox” name=”chk”> <input type=”submit” name=”ok” value=”ok”> </form> A meghívott oldalon létrejön automatikusan a $_POST tömb és azt feldolgozzuk postpelda.php <?php foreach( $_POST AS $i => $e){ echo ”index: ” . $i . ”, Érték: ”. $e . ”<br>”; } ?> Önmagukat meghívó oldalakat alkalmazhatunk!

42. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Asszociatív tömbök, típusok keveredése • A tömbelemeket tetszőleges típusú értékekkel indexelhetem. • A tömb elemeinek indexét tetszőlegesen keverhetem. • A tömbökben tárolt adatok típusa keveredhet! $a[”gj”] = 123; $a[1] = ”Ez fura”; • A tömbökben tárolhatok tömböket • A tömbök mérete dinamikusan változhat. $b = array(”Hi”, 1, true, array(11, 22) ); $b[4] = ”Ez is bekerül!”; • A foreach ciklust igazából arra lehet jól használni, hogy feldolgozzunk asszociatív tömböket!

43. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Szövegkezelés • A bőség zavara (97 függvény) • A fontosabbak: substr(), str_replace(), strlen(), pos(), strpos() reguláris kifejezések... • Mintafeladatok: • Állapítsa meg, hogy egy szövegben szerepel-e egy adott karakter, és ha igen, akkor hol szerepel? • Cserélje ki egy szövegben előforduló minden email címben a @ jelet #-ra

44. Tartalom • Motiváció • Irány az internet • Eszközválasztás • Jó-e a PHP • PHP oktatási tematika • Első lépések • Szelekció • Iteráció • Tömbök • Eljárás, Függ. • Változók • GET, POST • Assz. tömbök • Szövegkezelés • Fájlkezelés • Folytatás Fájlkezelés • Fájlok kezelése C szintaktika szerint, • fopen(),fclose(), feof(),fgets(), fgetc() • fseek(), fwrite() • Fájlok ahogy én szeretem • $str = file_get_contents(”file.txt”) • file_put_contents(”file.txt”,$str) • File() => array • Fájlrendszer műveletek • is_file(), is_dir(), file_exists(), dir() • dirname(), pathinfo() • WEB-es fájlműveletek, relatív címzés sulykolása, • $_SERVER["DOCUMENT_ROOT"] • $_SERVER[”PHP_SELF"] • __FILE__

45. Fájlkezelés mintafeladatok • Készíts programot, amely a szerveren elmenti minden letöltő IP címét, és a böngészőjének típusát, majd készíts programot, amely kiértékeli a látogatottsági adatokat • Készítsd el egy könyvtárban lévő fájlok listáját! Jelenítsd meg a fájlok méretét is! • Készítsd el egy könyvtárban lévő fájlok listáját úgy hogy a fájlokat az internetről le lehessen tölteni. A fájl típusának megfelelő ikonok jelenjenek meg a fájl neve mellett! • Egy speciálisan formázott szövegfájlban tároljuk a könyvtárban lévő fényképek leírásait. Írj programot, amely kiírja a képeket egy weboldalra és hozzájuk fűzi a szövegeket. • Készíts programot, amellyel rekurzívan be lehet járni a szerver könyvtárstruktúráját

46. Fájlok includolása • Miért kell – újrafelhasználható kód, struktúrált programozás • include(), include_once() • require(), require_once()

47. A szuperglobális tömbök Ez a téma átvezet a következő év anyagára. $_GET – A GET metódussal átadott paraméterek tömbje $_POST – a POST-tal átadott paraméterek tömbje $_COOKIE – a php oldal meghívásakor a böngészőktől érkező cookie-k tömbje $_SESSION – a munkamenet azonosítók tömbje (később) $_SERVER – a webszerver környezeti paramétereit tároló tömb $_ENV – az operációs rendszer környezeti változóit tároló tömb $_FILES – A html űrlapról feltöltött file adatait tároló tömb $_REQUEST – A böngésző által elküldött kérés paramétereit tartalmazó tömb $GLOBALS – ebben minden benne van

48. Egy nagyon sűrű tanév vége • Körülbelül idáig juthatnak el egy tanév alatt a diákok egy tanév alatt heti 3-4 órában tanulva a programozást a semmiről • A tanév alatt természetesen algoritmusokat írunk, amikor csak lehet • Programozási tételek szerepelnek azután, miután a ciklusok, eljárások és függvények már ismertek • Otthoni munka fontos. Ma már a diákok jelentős részének van otthon számítógépe – lehet HF-et adni nekik. Akinek nincsen, az iskolában kaphat gépidőt.

49. Folytatás – a második év • Programok tervezésének ismerete - • A tanévben adatbázisokkal kapcsolatos ismeretek • OOP programozás, és azok alkalmazása • Modern programozási módszertan • Kliens oldali megoldások (CSS, DOM, Javascript, Java, XML, AJAX)

50. Köszönöm figyelmüket!Várom kérdéseiket?