Programozás szakkör óratervei
(webfejlesztő informatikus)

Foglalkozások vázlata


1. 2. 3. 4. 5. 6. 7. 8.



1. Alapozás - HTML5+CSS3 a/ Bevezetés nyelvek: HTML5,(CSS3), PHP, SCRATCH párhuzamosan!!! weboldalam: burcsi.hu/prog (lásd: Informatikusok/Webfejlesztő) internet: linkek.html munkaállomások: NotePad++ ellenőrzése, munkakönyvtár b/ Könyvek + fényképezőgép HTML és CSS (Parragh Miklós: Visual Basic) c/ Csapjunk bele a lecsóba weboldal (statikus - HTML/CSS, dinamikus - PHP) nyers HTML ->
vaz.html (tartalom nélküli) DOCTYPE; html, head, body; charset='utf-8', title megtekintés böngészővel, forrás (CTRL+U) alap HTML tag-ek -> susu.html (apránként! összerakni) h1,h2, p, br (címsorok, bekezdés, sortörés, kép) img (burcsi.hu/prog/susu.html) <!-- szöveg --> többsoros megjegyzés CSS tulajdonságok egyesével - style body { margin-left:30%; margin-right:30%; } h1 { color:red; text-align:center; text-transform:uppercase; } p { padding-left:200px; } d/ Nagyon jó online szerkesztők www.w3schools.com/html www.w3schools.com/css Házi feladat: az 1.


2. Változók, kiírás/output - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése a/ Könyvek, internet PHP5 Bevezetés ... php.net - eredeti dokumentáció keresés: phpversion site:php.net !!! fordítás magyarra !!! b/ Kiírás/output a PHP-ben - PHP betét a "susu.html" fájlba -> "susu.php" print 'Készítő: ...'; sztring kiírása echo date('y.m.d'); PHP függvény c/ Változók a PHP-ben - tiszta PHP programba -> "var.php" PHP program szerkezete <?php ..... ?> megjegyzések // egysoros /* ... többsoros */ $változónév (ékezetest ne!) $vnev $knev2 (ez hibátlan) $vnév (ez hibás! ékezet nem lehet!) $2knev (ez is rossz! számmal nem kezdődhet!) változók típusai: logikai, numerikus (egész,valós), string $log = 11<8; $num = 10.6; $nev = 'Ubul'; értékadás (deklaráció nélkül eldől a típus) lásd fenn! d/ Nagyon jó online szerkesztő
www.w3schools.com/php Házi feladat: a 2.


3. Műveletek, függvények - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése vagy QUIZ (html1) b/ XAMPP használata -
telepítés (videó is) indítás (Apache - Start) mentés (C:\xampp\htdocs\fajlnev.php vagy C:\xampp\htdocs\belsokonyvtar/fajlnev.php) megtekintés (localhost/fajlnev.php vagy localhost/belsokonyvtar/fajlnev.php) c/ Műveletek, függvények numerikus műveletek alapműveletek – + - * / hatványozás – pow(alap,kitevő) string műveletek konkatenáció (pl.: "Bródy".' '."Gimnázium") változó behelyettesítés (pl. $nev='Ödön'; echo "$nev ke"; !echo "$nevke"; !echo '$nev';) néhány numerikus függvény (https://www.php.net/manual/en/ref.math.php) karakter kódja – ord(karakter) [ pl.: ord('A')->65 ,ord('a')->97, ord('á')->195! ), véletlenszám – mt_rand(ettől,eddig) [ pl.: mt_rand(1,45) egy hatos lottó szám ] néhány string-függvény (https://www.php.net/manual/en/ref.strings.php) string hossza – strlen(string) kódnak megfelel karakter – chr(kód) d/ Feladatok Készítsük el a képen látható 31.php weboldalt ! Tervezzük meg az oldal elkészítését (változók, értékadás, kiírás)! Készítsük el a képen látható 32.php weboldalt ! Tervezzük meg az oldal elkészítését (változók, értékadás, kiírás)! Készíts egy vegyes PHP programot, amely megoldja az "ax + b = c" típusú elsőfokú egyenletet! $a = 1; $b = 3; $c = -10; // -13 $a = 4; $b = -11; $c = -3; // 2 $a = 4; $b = -4; $c = 1; // 1.25 $a = 3; $b = -3; $c = 10; // 4.333 (Több variáció esetén az utolsó értékadás lesz érvényes!) Készítsük el a képen látható 33.php weboldalt ! e/ Gyakorlásul - QUIZ (html1) f/ Továbbfejlesztés, ötletek Ctrl+U forrásprogram megtekintése - egy sorban az egész !!! sorvégjeleket kitenni \n Házi feladat: a 3.


4. Tömbváltozók, számlálós/for ciklus - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése vagy QUIZ (php1) b/ Tömbváltozók változók típusai: egyszerű változók (logikai, numerikus, string) tömbváltozók deklaráció - kiírás $lotto = array(9,29,56,70,82); // 41. hét ötöslottó nyerőszámai rendezve echo $lotto[1]; print_r($lotto); feltöltés $lotto[] = mt_rand(1,90); print_r($lotto); string és tömb $str = "Magyarpolány"; echo $str[5]; // r echo $str[9]; // nem á !!! c/ Számolós/megszámlálható/for ciklus szintaktikája for (1.kifejezés; 2.kifejezés; 3.kifejezés ) { utasítások (ciklusmag) } 1. kifejezés: a ciklusváltozó kezdőértéket kap ($pl: $i=100) 2. kifejezés: feltétel, ami a kilépésről gondoskodik - addig ismétlődik a ciklusmag, amíg a feltétel igaz (pl: $i<=999) 3. kifejezés: ciklusváltozó növelése vagy csökkentése (pl: $i++, $i+=5 vagy $i--, $i-=4) utasítás/ok - ciklusmag, ezeket hajtja végre ismétlődően d/ Feladatok Írjuk ki 100 db kockadobás eredményét úgy, hogy elöl álljon a dobás sorszáma (1., 2., ..., 100.), utána a dobott szám (1,2,...,6)!
futtatás   (forrás) Írjuk ki 100-tól visszafelé a 4-el osztható kétjegyű számokat vesszővel elválasztva! Írjuk ki az "Indul a pap aludni." mondatot visszafelé! (Mi lenne a "Géza kék az ég." mondattal?) futtatás   (forrás) futtatás   (forrás) Töltsük fel egy ciklussal a "BIG" tömböt az angol ABC nagybetűivel! Írjuk ki a tömböt a print_r függvénnyel! Töltsük fel egy másik tömböt is az angol ABC kisbetűivel! Írjuk ki a tömböt egy ciklussal! Próbáljuk meg a feltöltéseket egyetlen ciklussal megoldani! futtatás   (forrás) * "Dobjunk" 50 darab véletlenszerű magyar rendszámot! Írjuk is ki ezeket! futtatás   (forrás) Házi feladat: a 4.


5. Változók, bekérés/input, kiírás/output, számlálós/for ciklus - HTML5+CSS3+PHP + Scratch
a/ Scratch könyvek, házi feladatok megbeszélése    A MIT weboldala: scratch.mit.edu b/ Bekérés/input - kérdezd meg ... és várj,válasz, mondd,gondold c/ Kiírás/output - változó/lista létrehozása, értékadás: legyen d/ Számlálós/for ciklus - ismételd e/ Feladatok Kérj be egy pozitív egész számot (poz_egesz)! Írd ki a négyzetgyökét, négyzetét! Oldjuk meg az "ax + b = c" elsőfokú egyenletet! Az együtthatókat kérjük be, számítsuk ki ezekből az "x"-et, majd írjuk ki! Oldjuk meg "próbálgatással" az "x2 - 2x - 15 = 0" másodfokú egyenletet a [-5;10] intervallum egész helyein! Számítsuk ki és írjuk ki az egész helyeken a balodali kifejezés értékét! Rajzolj egy piros négyzetet! Rajzolj az előzőnél vastagabb vonalakkal egy zöld szabályos háromszöget! * Az előbbiek felhasználásával rajzold meg egy négyzetalapú szabályos gúla palástját, amelynek minden éle egyenlő! * Oldjuk meg megoldóképlettel az "ax2 + bx + c = 0" másodfokú egyenletet! Az együtthatókat kérjük be, majd számítsuk ki a diszkriminást és a gyököket! Írjuk is ki ezeket! Házi feladat: az 5.


6. Szövegfájlok kezelése - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése vagy Quiz (Scratch1) b/ Szövegfájlok felépítése, kódolása
felépítés (szöveg-sorvégjel,szöveg-sorvégjel,...) sorvégjel (Linux: 0D, Windows: 0D0A) kódolás (közép európai ISO-8859-2, unikód UTF-8) vaz.html (Linux)   vaz.html (Windows)       vaz.html (Linux-hexa)   vaz.html (Windows-hexa) nevsor.txt (Linux)   nevsor.txt (Linux-hexa1)   nevsor.txt (Linux-hexa2)   c/ Szövegfájl tömbbe olvasása, sorok száma, kilistázása $sorok = file('minta.txt'); // a szövegfájl sorai a "$sorok" tömb elemei lesznek $drb = count($sorok); // sorok darabszáma (az üres sorokat is beleszámítva) print_r($sorok); // kilistázza a tömbelemeket és indexeiket (lehet ciklussal is) print "<pre>"; print_r($sorok); print "</pre>"; // elegánsabb listát kapunk d/ Sorok tördelése (mezőkre) list($vnev,$knev) = explode(" ",$sor[$i]); // a sorbeli neveket a " "-nél kettétörjük, s belekerülnek a "list" utáni változókba $tomb = explode("\t",$sor[$i]); // másik variáció: a tabulátor a határolójel, ementén tördeljük a "$tomb" tömbbe e/ Feladatok Adott a nevsor.txt szövegfájl, benne soronként egy-egy név. Írjuk ki ezeket fordított sorrendben (tehát az első nevet utoljára)! futtatás     (forrás) Gyűjtsük az előbbi fájlból a "$vnevek" illetve a "$knevek" tömbbe a vezeték- illetve keresztneveket! Írjuk ki a tömbelemeket! futtatás     (forrás) A matdoga.txt szövegfálban a diákok neve és matekdoga pontszámai vannak tabulátor jellel elválasztva. Számítsuk ki és írjuk ki az összpontszámukat! futtatás     (forrás) Házi feladat: a 6.


7. Gyakorlás I. - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése vagy Quiz (php3_) b/ tervezés - A magyar férfi "A" válogatott / 2019. november (fényképalbum - vegyes PHP) főcím alcím +---+---+---+---+---+ | |kép| | | | | | |kép| | | +---+---+---+---+---+ | | | | | | | | | | | | +---+---+---+---+---+ | | | | | | | | | | +---+---+---+---+ design, dátum c/ HTML - fejlesztés szövegszerkesztőben (jót menteni), időnként átemelni a w3schools-ba - váz (HTML,CSS helye,PHP helye) - egész lap stílusa (body - text-align,font-family,background-color,color) - főcím, alcím, szerző (h1,h2, ... - margin,padding,font-size) - egy kép megjelenítése, köré szegély (img - width,height,border) (http://burcsi.hu/prog/alb-foci/06.png) d/ PHP - sok kép megjelenítése - képek tömb ciklussal (array,file,count,for) - szöveg/magyarázat a képekhez (explode,list,title) - napi dátum beszúrása Házi feladat: az
7.


8. Elágazás, kétirányú elágazás - HTML5+CSS3 + PHP a/ Házi feladatok megbeszélése vagy QUIZ (php4_)
b/ Kifejezések, műveletek, függvények szöveges/string ( .   strlen   char chop ) numerikus ( +   -   *   /   %   pow   ord   mt_rand ) logikai ( not   and   or   !   ==   !=   <   >   <=   >= ) tömb ( array   tmb[]=   count ) c/ Egyszerű elágazás ... if ( logikai kifejezés ) { utasítások // ha a kifejezés igaz, csak akkor hajtódnak végre } ... d/ Kétirányú elágazás ... if ( logikai kifejezés ) { utasítások // ha a kifejezés igaz, akkor ezek } else { utasítások // ha a kifejezés hamis, akkor pedig ezek hajtódnak végre } ... e/ Feladatok 1. Adott néhány egész szám egy tömbben. Írjuk ki a pozitív számok után a "pozitív" szöveget! 2. Adott néhány egész szám egy tömbben. Írjuk ki a számok után a "páros" ill. "páratlan" szöveget! 3. Dobjunk véletlenszámot -200 és +200 közt, majd írjuk ki, hogy ez hány jegyű! 4. Dobjuk egy kétjegyű pozitív egészet, majd írjuk ki, hogy "Osztható 10-el" ill. "Nem osztható 10-el"! 5. Melyik az a háromjegyű szám, amelynek a jegyei egyformák, és 8-cal osztva 1 maradékot ad? 6. Írjuk ki az öttel valamint a héttel osztható kétjegyű számokat! 7. Írjuk ki többféleképpen a tízzel osztható háromjegyű számokat! 8. Dobjuk két pozitív egész számot: "a"-t és "b"-t! Ha "b" a nagyobb, cseréljük fel a számokat! Ezután döntsük le, hogy "a" osztható-e "b"-vel!
9. A vizsga.txt egy vizsga eredményeit tartalmazza. Minden sora a következőképpen néz ki:
vizsgázó neve tabulátor(\t) vizsgaeredmény (%-ban)
   Listázzuk ki az eredményeket úgy, hogy akinek 60%-nál jobb az eredménye az "Megfelelt", a többi "Nem felelt meg"! Házi feladat: a 8.



Vissza a főoldalra