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

Foglalkozások vázlata


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



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 - 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 c/ Kiírás/output - változó/lista létrehozása, értékadás: mondd,gondold, 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 (
suli1) - 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, köré pedig egy vékony szegélyt - 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, tegyünk 10-10px-t fölé és alá (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.


14. Egy fiktív iskola weboldala (
suli2) - HTML5, CSS, PHP a/ Házi feladatok megbeszélése vagy QUIZ () b/ Alapstruktúra - a HTML5 "modern" tag-jei div ..... H E A D E R div ..... ASIDE SECTION képlinkek változó NAV   link tartalom link F O O T E R c/ Fejlesszük tovább az iskola weboldalát a következőképpen: - nézzük meg a forrásprogramot (Ctrl+U) - helyezzünk két 30px magas zöld csíkot a "header" fölé és alá HTML: <div class='zoldcsik30'> </div> CSS: .zoldcsik30 { ... } - tegyünk át az alsóba (<div> és </div> közé) a gördülő szöveget és formázzuk ezt HTML: <marquee ... > szöveg </marquee> CSS: marquee { ... } * készítsünk el egy többszintű, ki/lenyíló JavaScript menüt: Részletesen kifejtve: Látszik a fenti suli2.png fájlon, hogy megszámoztuk a "főmenü" elemeit (a "Dokumentumok" és a "Fényképgaléria" kivételével). A számozottakat az "index.php"
(a galériát majd az "lbox.php") fogja vezérelni, a "Dokumentumok" PDF fájljait a böngésző maga is ügyesen megjeleníti. Az ötlet az, hogy a tartalmat (section) paraméteresen bekérjük ($_GET), és ha ismerjük a szükséges include fájl nevét és helyét, betöltjük a jobboldalra (most itt az "aktualis.inc" van éppen). Az include modulok könyvtárai célszerűen (nézzük is meg a könyvtárakat!): felső képlinkeké - 0 - incl könyvtár (elerhetoseg.inc, sitemap.inc, linkek.inc) hírek havonta - 1 - hirek könyvtár (2020-01.inc, 2020-02.inc, ..., ide került az aktualis.inc is) iskolánkról szólók - 2 - incl könyvtár (isk-nevado,inc, isk-tortenet.inc, isk-alapitvany.inc) a többi majd - 3,4,5 - egy későbbi text könyvtárban lesz Nézzük meg a "menu.inc" fájlt: a könyvtárra utaló sorszámot és a jobboldalra beszúrandó include fájl nevét (.inc nélkül) egyszerre kérjük be, majd ha kell, szétválasztjuk! Uccu neki: - nézzük meg az "index.php" fájlt: az elején fenn a $_GET sora - kódoljuk lépésenként a "section"-ban lévő algoritmust (először csak írjuk ki a $menu, $fnev változók tartalmát) - a "main.css" alá írjuk be az alábbit (nézzük is meg a meglétét a "css" könyvtárban): <link rel='stylesheet' href='css/dropdown-menu.css'> - a "/style" alatt két "JavaScript" programra hivatkozunk, nézzük is meg a meglétüket a "js" könyvtárban, majd javítsuk ki a hibákat - formázzuk meg a tartalom listáit a képlinkeknél (section ul, section ol) - formázzuk a februári hírekben szereplő képet (a januári mintájára) stílussal balra, félképernyő szélesre, szöveggel a jobboldalán (.img-l50) - alakítsuk képlinkké a januári hírekben szereplő képet, hiszen alig látható (<a href='...'><img src='...'></a>) * nézzük meg a "dropdown-menu.css" és a "dropdown-menu.js" fájlokat, a kettő "összjátéka" biztosítja a lehulló menüt a .css fájl első hasznos sora: #menu .dropdown-menu { nézzünk utána, hogy mi a különbség a # és a . kezdetű stílusdefiníciók között (vagy kérdezzük meg a következő foglalkozáson)! d/ Linkek: - 2.0 verzió (tömörítve) suli2.zip - Piripócs nem Kukutyin - Ondrej Sekora: Piripócs város krónikája - CSS anyagok és linkek Házi feladat: a 14.


15. Egy fiktív iskola weboldala (
suli3) - HTML5, CSS, PHP a/ Házi feladatok megbeszélése vagy QUIZ () b/ Mi a különbség a # és a . kezdetű stílusdefiníciók között? - azonosító típusú CSS definíció és hivatkozás – egy HTML elemre (pl. "menu" a "dropdown-menu.css" és "menu.inc" fájlokban): #menu { ...; width:205px; } <nav id='menu'> ... - osztály típusú CSS definíció és hivatkozás – több HTML elemre (pl. "zoldcsik30" a "main.css" és "index.php" fájlokban): .zoldcsik30 { ...; background-color:DarkGreen; } <div class='zoldcsik30'> ... c/ Fejlesszük tovább az iskola weboldalát a következőképpen: - töltsük le a suli3.zip fájlt (előtte töröljük a régieket)! - tegyük "többszintűvé" a 3. menüpontot, "Az iskola tanulói" (lásd baloldali ábra) - menu.inc módosítása - index.php fejlesztése - először csak egy "include(...)" PHP függvénnyel hívjuk - másodszor "file(..)" és "print_r(...)" (főcím-h2, alcím-h3) - végül ciklussal (lista-ol,li, kép-img) - tegyük "többszintűvé" a 4. menüpontot, "Az iskola dolgozói" (lásd középső ábra) - menu.inc módosítása - index.php fejlesztése - először csak egy "include(...)" PHP függvénnyel hívjuk - másodszor "file(..)" és "print_r(...)" (főcím-h2, alcím-h3) - végül ciklussal (táblázat-table,tr,th,td, kép-img) - tegyük "működővé" a 5. menüpontot, "Órarendek" (lásd jobboldali ábra) - menu.inc módosítása - index.php fejlesztése - először csak egy "include(...)" PHP függvénnyel hívjuk - másodszor "file(..)" és "print_r(...)" (főcím-h2, alcím-h3) - végül kettős ciklussal (táblázatok elágazással) * jóval nehezebb variáció az "orarend2.txt"-vel való táblázatok elkészítése (a belső ciklus az üres sort figyeli) d/ Linkek: - 3.0 verzió (tömörítve) suli3.zip - CSS anyagok és linkek


16. Egy fiktív iskola weboldala (
suli4) - HTML5, CSS, PHP, JavaScript - LightBox a/ Házi feladatok megbeszélése (lásd suli3/index.php - órarendek) b/ Töröljük a "suli" korábbi verzióját, töltsük le és csomagoljuk ki a "suli4.zip" fájlt, majd nézzük meg az újdonságokat! - 404.html (kész) - nézzük meg a "gyerekaneten.hu/index.php" weboldalt !!! - lbox.php (félkész) - css könyvtárban - js könyvtárban - album könyvtárban (00.txt szerepe, "szakkor"-ben megcsinálni) c/ Módosítsuk a "menu.inc" fájl, hogy a "lbox.php"-t meghívja majd a három képkönyvtárra! d/ Az "lbox.php" elkészítése - nézzük meg a "suli43.png" képet - ilyet kell csinálni - az "lbox.php" felépítése Be: dir // képkönyvtár helye, neve txt = ... // információs fájl helye, neve Ha van txt akkor előkészítés Ki: HTML egyébként Ki: HIBA Ha vége - lépésenként haladjunk - $sor listázása (print_r) - főcím, alcím, fotós kiírása (h1,h2,h3) - Vissza ... (<a ...> ... </a>) - stb. e/ Linkek: - 4.0 verzió (tömörítve) suli4.zip - LighBox2 (Doku, Demo, Download) - Gyerek a neten - az internet veszélyei - Fiktív iskola weboldala (leírás) - Fiktív iskola weboldala (működés)



Vissza a főoldalra