1 / 81

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

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 ). Előzmények.

torin
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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?

More Related