I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Vyšší odborná škola ekonomická a zdravotnická a Střední škola, Boskovice
INOVACE PŘEDMĚTŮ ICT MODUL 11: PROGRAMOVÁNÍ WEBOVÝCH APLIKLACÍ Metodika
Zpracoval:
Jaroslav Kotlán srpen 2009s
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Úvod Modul Programování webových aplikací Výuka tohoto předmětu bude probíhat prezenční formou v počítačových učebnách. Programování je také součástí předmětu, který se na něj specializuje, proto vynecháme kapitoly týkající se algoritmizace. Dalším aspektem je silná mezipředmětová provázanost a spolupráce mezi vyučujícími. Nebudeme se zabývat do hloubky principy programování, ale zaměříme se na praktické příklady. Výuka bude rozdělena do čtyř částí, které se budou vyučovat ve 2. a 3. ročníku. Ve 4. ročníku se všechny vědomosti spojí do celku a absolvent modulu bude schopný naprogramovat menší webovou aplikaci, která bude spolupracovat s databází.
Cíle modulu • Zopakování základních znalostí o internetu • Zvládnutí tvorby WWW stránek pomocí HTML o Syntaxe o Formátování textu o Odkazy o Odrážky o Tabulky o Obrázky o Formuláře o Základy grafiky na WWW Zoner Calisto Zoner GifAnimator o CSS Princip tvorby stránek pomocí CSS Možnosti zápisu do HTML Popis základních vlastností Kaskáda Pozicování pomocí
Absolutní Relativní o Využití Java skriptu na stránkách Začlenění skriptu do stránek Základy syntaxe
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Proměnné a datové typy Výrazy a operátory Větvení Cykly Objekty Události Propojení s formulářem Funkce Pole Objektový model
• Využití jazyka PHP jako základ pro programování webových aplikací o Statické a dynamické stránky o Verze PHP o Nastavení PHP na počítači o Vložení PHP kódu do HTML o Proměnné Základní datové typy Konstanty o Příkaz echo o Podmínky a větvení If Case o Cykly For While Do .. While o Pole o Funkce o Integrované funkce v PHP Řetězcové funkce Funkce pro práci s datem a časem o Formuláře Vytvoření formuláře s odesláním dat Přenášení dat mezi formuláři • Napojení databáze MySQL pomocí PHP o Databáze
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
o o o o
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Úvod do databází Relační databáze Instalace a konfigurace MySQL Práce s phpMyAdmin Dotazy SQL Select, Insert, Delete, Update Propojení s PHP Zpracování výsledků dotazu
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Hodnocení a klasifikace Hodnocení a klasifikace žáka bude stanoveno dle školního klasifikačního řádu. Známka se bude skládat z následujících částí: - teoretická znalost hodnocené problematiky (váha 20%) - praktické dovednosti (váha 80%)
Plán modulu a činností Modul Služby informační sítě je koncipován na 99 výukových hodin (99 x 45 minut) Výuka bude rozdělena do následujících částí: 1. úvod, vstupní diagnostika Rozsah: 2 vyučovací hodiny Obsah: Zjištění vstupní úrovně znalostí a dovedností studentů. Případné doplnění základních informací nutných pro další studium. 2. tvorba www stránek Rozsah: 31 vyučovacích hodin (1. Pololetí druhého ročníku) Obsah: Student se seznámí se základy tvorby www stránek. Naučí se vytvářet www stránky pomocí HTML kódu. Dále zvládne navrhovat vzhled stránek pomocí kaskádových stylů (CSS). Dále využije znalosti z předmětu „Grafika na PC“ pro vytvoření uživatelsky přívětivého rozhraní. Nakonec vytvoří vlastní, pokud možno validní internetové stránky a umístí je na web. 3. JavaScript Rozsah: 33 vyučovacích hodin (2. Pololetí druhého ročníku) Obsah: Student se seznámí s principem fungování skriptovacích jazyků. Uvědomí si možnosti využití při tvorbě internetových stránek. Bude schopen zvážit úskalí spojená s použitím scriptování na straně uživatele. Vytvoří menší projekt, kde využije JavaScript. 4. PHP Rozsah: 33 vyučovacích hodin (1. Pololetí třetího ročníku) Obsah: Student pochopí rozdíl mezi vykonáváním kódu na straně Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
uživatele a na straně serveru. Zvládne základy PHP, což opět prokáže vytvořením vlastního projektu. 5. MySQL Rozsah: 33 vyučovacích hodin (2. Pololetí třetího ročníku) Obsah: Student využije znalosti z předmětu „APC“, ve kterém se seznámí s principem fungování relačních databází. 6. Spojení znalostí o tvorbě stránek, PHP a MySQL Rozsah: 66 vyučovacích hodin (čtvrtý ročník) Obsah: Student si vybere téma dle vlastního uvážení odpovídající náročnosti pro vytvoření menší, ale zároveň plně funkční webové aplikace. Využije zde znalosti z předchozích ročníků a použije v něm nabyté znalosti.
Rozpis jednotlivých lekcí modulu 1. úvod, vstupní diagnostika Rozsah • 2 vyučovací hodiny Cíl • Cílem je zjistit vstupní znalosti studentů. Po této fázi učitel se žáky formou řízené diskuse shrne všeobecně známé pojmy spojené s internetem a tvorbou webových stránek. Pomůcky • PC s MS Windows, internetový prohlížeč, internet: pro studenty • PC s MS Windows, internet, internetový prohlížeč, dataprojektor: pro učitele Postup • Seznámení s cílem výuky • Řízená diskuse na téma internet a tvorba webových stránek • Zhodnocení, jestli byly cíle lekce splněny Obsah výuky • Připomenutí běžně známých termínů používaných v internetu Metody výuky • Přednáška • Projekce • Diskuse
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Forma výuky • Individuální výuka • Frontální výuka • Práce ve skupinách Hodnocení a klasifikace • Ústní hodnocení 2. Tvorba www stránek Rozsah • 31 vyučovacích hodin Cíl • Cílem je zvládnout základy tvorby www stránek pomocí HTML kódu a CSS. Nedílnou součástí bude příprava grafiky pomocí programu Zoner Calisto. Na závěr žák vytvoří vlastní internetové stránky, které vystaví na internetu. Stránky budou validní a budou se stejně zobrazovat ve všech běžně používaných prohlížečích. Pomůcky • PC s MS Windows, internetový prohlížeč, internet, Zoner Calisto, editor HTML: pro studenty • PC s MS Windows, internet, internetový prohlížeč, editor HTML, Zoner Calisto, dataprojektor: pro učitele Postup • Zopakování základních pojmů, které se týkají internetu • Vysvětlení principu zobrazování webových stránek a upozornění na některá úskalí plynoucí z existence různých prohlížečů • Základy HTML ° Co to je HTML dokument ° Základy syntaxe ° Základní tagy (značky) ° Kostra HTML dokumentu • Test • Vyhodnocení testu • Pokročilejší HTML ° Formátování textu
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
• • •
• • • • • •
• • •
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
° Formátování odstavce ° Odrážky a číslování ° Odkazy ° Tabulky ° Obrázky Test Vyhodnocení testu Zoner Calisto ° Vytvoření grafiky pro www ° Vyhodnocení práce v Zoneru Calisto Formuláře a formulářové prvky Test Vyhodnocení testu Diskuse se studenty Studenti si vyberou téma, které bude nosné pro vytvoření vlastních internetových stránek Kaskádové styly (CSS) ° Vysvětlení principu používání CSS ° Jak rozvrhnout stránku ° Jak nadefinovat různé oblasti ° Výběr základních vlastností a vysvětlení možnosti jejich použití Test Vyhodnocení testu Tvorba vlastní stránky ° Konzultace s vyučujícím ° Vyhodnocení práce studentů
Obsah výuky • Viz cíle výuky a postup Metody výuky • Přednáška • Projekce • Diskuse • Domácí úkoly • Samostatná práce Forma výuky
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
• • • •
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Individuální výuka Frontální výuka Práce ve skupinách E-learning
Hodnocení a klasifikace • Hodnocení proběhne formou testů přímo v hodině, které se budou vykonávat na PC formou zvládnutí praktických příkladů. 3. JavaScript Rozsah • 33 vyučovacích hodin Cíl • Cílem je zvládnout základy JavaScriptu, jako jedné z možností, jak „oživit“ internetové stránky. Mimo zvládnutí samotného jazyka bude student schopen uvážit rizika, která sebou přináší použití scriptování na www stránkách. Výuka bude zakončena vytvořením JavaScriptové aplikace. Pomůcky • PC s MS Windows, internetový prohlížeč, internet, editor HTML: pro studenty • PC s MS Windows, internet, internetový prohlížeč, editor HTML, dataprojektor: pro učitele Postup • Vysvětlení rozdílu mezi spouštěním kódu na straně uživatele a na straně serveru • Zopakování základních principů programování • Java Script ° Začlenění skriptu do stránek ° Základy syntaxe ° Proměnné a datové typy ° Výrazy a operátory ° Test ° Vyhodnocení testu ° Větvení
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
° ° ° ° ° ° ° ° ° ° ° ° ° ° ° ° ° °
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Test Vyhodnocení testu Cykly Test Vyhodnocení testu Objekty Události Test Vyhodnocení testu Propojení s formulářem Zadání závěrečného projektu Funkce Test Vyhodnocení testu Pole Objektový model Konzultace k projektu Vyhodnocení projektu
Obsah výuky • Viz cíle výuky a postup Metody výuky • Přednáška • Projekce • Diskuse • Domácí úkoly • Samostatná práce Forma výuky • Individuální výuka • Frontální výuka • Práce ve skupinách • E-learning Hodnocení a klasifikace • Hodnocení proběhne formou testů přímo v hodině, které se budou vykonávat na PC formou zvládnutí praktických příkladů. Důležitým
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
aspektem bude zdárné zvládnutí závěrečného projektu. 4. PHP Rozsah • 33 vyučovacích hodin Cíl • Cílem je zvládnout programovací jazyk PHP. PHP je serverový skriptovací jazyk, proto je nutné zvládnout nejenom programování samotné, ale také instalace PHP a webového serveru a jejich nastavení. Aby mohli studenti pracovat plnohodnotně jako administrátoři, budou pracovat na virtuálním PC se svým operačním systémem. Pomůcky • PC s MS Windows, internetový prohlížeč, internet, editor HTML, virtuální PC: pro studenty • PC s MS Windows, internet, internetový prohlížeč, editor HTML, dataprojektor: pro učitele Postup • Zopakování základních programátorských dovedností • Teoretická příprava pro instalaci PHP a webového serveru • Test • Vyhodnocení testu • Instalace webového serveru • Instalace PHP PHP Statické a dynamické stránky Verze PHP Vložení PHP kódu do HTML Proměnné • Základní datové typy • Konstanty Příkaz echo Zadání projektu Test
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Vyhodnocení testu Podmínky a větvení • If • Case Test Vyhodnocení testu Cykly • For • While • Do .. While Test Vyhodnocení testu Pole Funkce Test Vyhodnocení testu Integrované funkce v PHP • Řetězcové funkce • Funkce pro práci s datem a časem Formuláře • Vytvoření formuláře s odesláním dat • Přenášení dat mezi formuláři Konzultace projektu Vyhodnocení projektu Obsah výuky • Viz cíle výuky a postup Metody výuky • Přednáška • Projekce • Diskuse • Domácí úkoly • Samostatná práce Forma výuky • Individuální výuka • Frontální výuka
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
• Práce ve skupinách • E-learning
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Hodnocení a klasifikace • Hodnocení proběhne formou testů přímo v hodině, které se budou vykonávat na PC formou zvládnutí praktických příkladů. Důležitým aspektem bude zdárné zvládnutí závěrečného projektu. 5. MySQL Rozsah • 33 vyučovacích hodin Cíl • Cílem je zvládnout propojení databáze s programem napsaným v PHP. Opět je nutné na PC nainstalovat databázi a rozhraní, pomocí kterého budeme databázi spravovat. Tím bude MySQLAdmin. Dále žák použije znalosti z databázových systémů. Pomůcky • PC s MS Windows, internetový prohlížeč, internet, editor HTML, virtuální PC: pro studenty • PC s MS Windows, internet, internetový prohlížeč, editor HTML, dataprojektor: pro učitele Postup • Zopakování základních programátorských dovedností • Zopakování znalostí o databázích • Test • Vyhodnocení testu • Zadání projektu • MySQL ° Instalace a konfigurace MySQL ° Práce s phpMyAdmin ° Dotazy SQL ♦ Select, Insert, Delete, Update ° Test ° Vyhodnocení testu
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
°
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Propojení s PHP ♦ Zpracování výsledků dotazu ° Test ° Vyhodnocení testu • Konzultace k projektu • Vyhodnocení projektu Obsah výuky • Viz cíle výuky a postup Metody výuky • Přednáška • Projekce • Diskuse • Domácí úkoly • Samostatná práce Forma výuky • Individuální výuka • Frontální výuka • Práce ve skupinách • E-learning Hodnocení a klasifikace • Hodnocení proběhne formou testů přímo v hodině, které se budou vykonávat na PC formou zvládnutí praktických příkladů. Důležitým aspektem bude zdárné zvládnutí závěrečného projektu. 6. Spojení znalostí o tvorbě stránek, PHP a MySQL Rozsah • 66 vyučovacích hodin Cíl • Cílem je propojit znalosti z tvorby stránek, PHP a Mysql. Student bude umět analyzovat daný problém a vytvořit funkční aplikaci. V rámci práce bude zároveň probíhat příprava k maturitní zkoušce z oblastí, které se
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
vyučovaly v průběhu studia. Pomůcky • PC s MS Windows, internetový prohlížeč, internet, editor HTML, virtuální PC: pro studenty • PC s MS Windows, internet, internetový prohlížeč, editor HTML, dataprojektor: pro učitele Postup • Zopakování tvorby www stránek • Test • Vyhodnocení testu • Zopakování JavaScriptu • Test • Vyhodnocení testu • Zopakování PHP • Test • Vyhodnocení testu • Zopakování MySQL • Test • Vyhodnocení testu • Zadání ztečného projektu • Konzultace projektu • Průběžné opakování k maturitě • Vyhodnocení projektu Obsah výuky • Viz cíle výuky a postup Metody výuky • Přednáška • Projekce • Diskuse • Domácí úkoly • Samostatná práce Forma výuky • Individuální výuka
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
I N V E S T I C E
• Frontální výuka • Práce ve skupinách • E-learning
D O
R O Z V O J E
V Z D Ě L Á V Á N Í
Hodnocení a klasifikace • Hodnocení proběhne formou testů přímo v hodině, které se budou vykonávat na PC formou zvládnutí praktických příkladů. Důležitým aspektem bude zdárné zvládnutí závěrečného projektu a výsledky testů z opakování k maturitě.
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky.
