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

Foglalkozások vázlata


1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.



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.


9. Elágazás, kétirányú elágazás - Scratch a/ Házi feladatok megbeszélése vagy QUIZ (php4_) b/ Kifejezések, műveletek, függvények relációk (
nem   és   vagy   =   <   > ) ... ... ... logikai ( nem   és   vagy   =   <   > ) ... ... ... 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. Dobjunk véletlenszámot, amely -1, 0 vagy +1 lehet csak! A dobott számtól függően rajzoljunk szabályos háromszöget, négyszöget vagy hatszöget! 2. Kérjünk be egy mondatot, majd írjuk ki, hogy kijelentő, kérdő vagy óhajtó,felszólító,felkiáltó mondat! (* Ha nincs a végén írásjel, reklamáljunk vagy kérjük be újra!) 3. Dobjunk egy véletlenszámot -99 és 99 közt! Írjuk ki az "előjelét" (pozitív, zérus, negatív) majd a hosszát (1 illetve 2 jegyű)! Nehezítés: két "ha" utasítással oldjuk meg! (a -99 kétjegyű) 4. Kérjük be az "a" és a "b" egészeket! Írjuk ki: "a" osztható "b"-vel, ill. "a" nem osztható "b"-vel! (* Ellenőrizhetjük a számok egész voltát.) *. Töltsünk fel egy tömböt/listát egész számokkal! Írjuk ki a legnagyobb sorszámát/indexét és az elemet is! Házi feladat: a 9.


10. Gyakorlás II. - HTML5 + CSS3 + PHP a/ Házi feladatok megbeszélése vagy QUIZ () b/ Feladatok 1. Keressük meg az x3 - 8x2 -243x -630 = 0 harmadfokú egyenlet egész megoldásait a [-50, +50] intervallumon! Javaslatok: - írjunk algoritmust (legalább fejben) - prg. előtt írassunk ki ellenőrzésként néhány fv. értéket, hogy a baloldal = x*x*x - ... képlet hibátlan legyen (pl. x=0,+1,-1) - osszuk végig az egyenletet 10-el, mi változik (?!) - javítsuk vissza és írjuk át a hatványozást így: x^3 -> x**3 - hogy módosítanánk, ha a gyökök nem egészek (pl. írjuk át a -630-at -631-re) - *hogy oldanánk meg a 2x+3y=-5 illetve -x+7y=45 egyenletrendszert, ha tudjuk, hogy egész megoldásai vannak? 2. Kérjünk be egy pozitív egészet, váltsuk át kettes számrendszerbe, majd majd írjuk ki! Javaslatok: - először dec = 50-re - írjunk algoritmust - tényleg kérjük be a decimális számot ($_GET[dec]) (hívás: a2.php?dec=25) - hogy módosítanánk, ha négyes számrendszerbe kéne váltani? Házi feladat: a
10.


11. Hátultesztelő ciklus - PHP a/ Házi feladatok megbeszélése vagy QUIZ () b/ Hátultesztelő ciklus do { utasítások mindig belép utasítások addig ismétli a ciklusmagot, amíg a feltétel igaz ... } while (feltétel); c/ Feladatok 1. Keressük meg az "a", "b" pozitív egész számok legnagyobb közös osztóját! Javaslatok: - írjunk algoritmust - először értékadással oldjuk meg - Be: a ---> $a = $_GET['a']; - *nehezíthetnénk úgy, hogy az adatbekérést ellenőrizzük (a,b léteznek-e, pozitívak-e) Algoritmus: a = 84 b = 108 Ciklus Ha a > b akkor a = a-b Ha a < b akkor b = b-a Ciklus, míg a <> b Ki: "LNKO",a 2. Az angol katonai hírszerzés dróntámadásról értesült és elfogott egy emailhez csatolt fájlt (prog/ORA/titok.txt). Ezenkívül a következő információkkal rendelkezik: - a támadás helye (London vagy Leeds vagy Bristol) a fájlban van elrejtve - a támadás napja a találat "sorszáma" a mai naptól számítva (azaz hányadik sorban van a szó, 0,1,2, ... ) - a támadás órája a találat "szósorszáma" (azaz hányadik szó a sorban, 0,1,2, ... - 24-el való osztási maradéka) Írjuk ki, hogy mely városban, hány nap múlva és hány órakor lesz a dróntámadás! Példa: ---- --- ---- - - --- -- -- -- --- -- --- - --- --- --- - Leeds ----- ---- --- ---- ------ ----- Leeds városában, 3 nap múlva, hajnali 4 órakor Javaslatok: - Lépésenként, de hátultesztelő ciklussal (teszteléshez tegyük a várost egy ismert sor ismert helyére): Írjuk ki az összes sor első két betűjét, elé a sorszámot (13. Wh) Írjuk ki az összes sor kilencedik szavát, elé a sorszámot (13. service); ha nincs ennyi szó, akkor "?!" Írjuk ki minden sor utolsó szavát, elé a sorszámot és a szó mondatbeli sorszámát (40-4. Choices); Keressünk a sorban "for" ciklussal, írjuk ki a találatot (pl. 54.nap, 23.óra - Leeds), és álljunk le (exit) * Ehelyett is legyen hátultesztelő ciklus! 3. Kérjünk be két pozitív egészet (a,b és a<b legyen), majd írjuk ki a köztük lévő (határok nélkül) héttel osztható számokat! Algoritmus: Be: a, b a7 = az "a" utáni első héttel osztható szám Ciklus Ki: a7 a7 = a7 + 7 Ciklus, míg a7 < b Javaslatok: - először értékadással oldjuk meg - Be: a ---> $a = $_GET['a']; - *nehezíthetnénk úgy, hogy az adatbekérést ellenőrizzük (a,b léteznek-e, pozitívak-e, a valóban kisebb?) 4. Keressük meg az 0,2x^3 - 0,5x^2 - 20x + 50 = 0 harmadfokú egyenlet egyik egész gyökét! Házi feladat: a
11.


12. Elöltesztelő ciklus - PHP a/ Házi feladatok megbeszélése vagy QUIZ () b/ Elöltesztelő ciklus while (feltétel) { utasítások akkor lép be, ha a feltétel igaz utasítások addig ismétli a ciklusmagot, amíg a feltétel igaz ... } c/ Oldjuk meg az előző foglalkozás feladatait elöltesztelő/elölvizsgáló ciklussal! Feladatok: 0. Mit csinál a következő algoritmus? sorok <-- viccek.txt fájlból a tömbbe utsoelotti = a fájl utolsó előtti üres sorának indexe (a 0. és az utolsó sor is üres legyen) i = véletlenszám(0,utsoelotti) Ciklus, míg soroki ≠ "" i növelése Ciklus vége Ciklus Ki: soroki i növelése Ciklus, míg soroki ≠ "" 1. Keressük meg az "a", "b" pozitív egész számok legnagyobb közös osztóját! Fejlesszünk rajt annyit, hogy írja ki, ha reletív prímek! 2. Keressük meg az 0,2x3 - 0,5x2 - 20x + 50 = 0 harmadfokú egyenlet egyik egész gyökét! Először a "jobboldali" gyököt keressük meg! 3. Kérjünk be két pozitív egészet (a,b és a<b legyen), majd írjuk ki a köztük lévő (határok nélkül) héttel osztható számokat! Oldjuk meg mindhárom tanult ciklussal! 4. Az angol katonai hírszerzés dróntámadásról értesült és elfogott egy emailhez csatolt fájlt (prog/ORA/titok.txt). Ezenkívül a következő információkkal rendelkezik: - a támadás helye (London vagy Bristol) a fájlban van elrejtve /Leeds megúszta/ - a támadás napja a találat "sorszáma" a mai naptól számítva (azaz hányadik sorban van a szó, 0,1,2, ... ) - a támadás órája a találat "szósorszáma" (azaz hányadik szó a sorban, 0,1,2, ... - 24-el való osztási maradéka) Írjuk ki, hogy mely városban, hány nap múlva és hány órakor lesz a dróntámadás! Házi feladat: a
12.


13. Egy fiktív iskola weboldala (1.) - HTML5, CSS, PHP a/ Házi feladatok megbeszélése vagy QUIZ ()
b/ Alapstruktúra - a HTML5 "modern" tag-jei H E A D E R kép NAV   tartalom link link F O O T E R c/ Fejlesszük az iskola weboldalát a következőképpen: - nézzük meg a forrásprogramot - "élesítsük" az index.php-ben az include betéteket - (nézzük meg időnként a forrásprogramot és mindig frissítsünk) - tegyünk háttérképet (bg-main.gif) a "main" mögé is - tegyünk 20-20px kitöltést az "aside" elé és fölé - tegyünk 20px kitöltést a tartalom (section) fölé, alá, elé (egy css "paranccsal") - formázzuk meg a tartalom címét (section h2) - formázzuk meg a tartalom szövegét (section p) - toljuk 20px-el jobbra a menüt (aside nav) - tegyük a menü fölé a "img-eler,img-smap,img-link" .png képeket (formázásuk: aside img) - tegyük a menü alá a "naptar.png" képet (vagy az "index.php" vagy a "menu.inc" fálba) (formázni külön kell: <img ... style='width:100%;border:none;'> ) - formázzuk meg a mintakép alapján a "header" ill. "footer" tag-ekben lévő szövegeket - tegyünk egy háttérképet a "header"-be (0.jpg,1.jpg, ... méretük:960x200px, azaz épp jó) * legyen e háttérkép véletlenszerű (<style>-ba header{ }, ebbe php progi) d/ Linkek: - 1.0 verzió (tömörítve) suli1.zip - Piripócs nem Kukutyin - Ondrej Sekora: Piripócs város krónikája - CSS anyagok és linkek Házi feladat: a 13.



Vissza a főoldalra