Přehled VAP témat
VAP Téma 1

Téma 1 – Algoritmizace

1. Co je algoritmus

Algoritmus je přesný, konečný a jednoznačný postup řešení úlohy. Musí splňovat:

  • Konečnost – musí skončit.
  • Determinovanost – každý krok je jasný.
  • Obecnost – řeší celou třídu problémů.
  • Správnost – dává správné výsledky.
Algoritmus: 1. Načti vstup 2. Zpracuj podle pravidel 3. Vrať výstup

2. Způsoby zápisu algoritmu

2.1 Pseudokód

Nezávislý na programovacím jazyce, čitelný pro člověka.

vstup: n vystup: faktoriál n f ← 1 pro i od 1 do n: f ← f * i vypiš f

2.2 Vývojový diagram

  • Začátek/konec – ovál
  • Instrukce – obdélník
  • Podmínka – kosočtverec
  • Vstup/výstup – paralelogram

2.3 Strukturovaný zápis

Podobný programovacím jazykům.

3. Řídicí struktury

3.1 Sekvence

Příkazy jdou za sebou.

3.2 Větvení

if (podmínka) { ... } else { ... }

3.3 Cykly

for (i = 0; i < n; i++) { ... } while (podmínka) { ... } do { ... } while (podmínka);

3.4 Vnořené struktury

Podmínky a cykly uvnitř sebe.

4. Datové struktury

  • Pole – pevná velikost.
  • Seznam – dynamická velikost.
  • Fronta – FIFO.
  • Zásobník – LIFO.
  • Strom – hierarchie.
  • Graf – uzly a hrany.

5. Složitost algoritmů

5.1 Časová složitost

  • O(1) – konstantní
  • O(n) – lineární
  • O(n²) – kvadratická
  • O(log n) – logaritmická
  • O(n log n) – třídicí algoritmy

5.2 Prostorová složitost

Kolik paměti algoritmus potřebuje.

Složitost se zapisuje pomocí asymptotické notace – Big O.

6. Základní algoritmy

6.1 Třídění

  • Bubble sort – O(n²)
  • Insertion sort – O(n²)
  • Merge sort – O(n log n)
  • Quick sort – O(n log n)

6.2 Vyhledávání

  • Lineární – O(n)
  • Binární – O(log n)

6.3 Práce s grafy

  • BFS – prohledávání do šířky
  • DFS – prohledávání do hloubky
  • Dijkstra – nejkratší cesta

7. Návrh algoritmu

7.1 Analýza problému

  • Co je vstup?
  • Co je výstup?
  • Jaké jsou podmínky?

7.2 Návrh řešení

  • Rozdělení na kroky
  • Volba datových struktur
  • Volba řídicích struktur

7.3 Testování

  • Hraniční hodnoty
  • Extrémní vstupy
  • Chybové stavy

8. Shrnutí

  • Algoritmus je přesný postup řešení úlohy.
  • Zapisuje se pseudokódem, diagramem nebo kódem.
  • Řídicí struktury: sekvence, větvení, cykly.
  • Složitost popisuje náročnost algoritmu.
  • Datové struktury ovlivňují efektivitu.
Algoritmizace je základ programování – bez ní není možné psát kvalitní kód.
VAP Téma 2

Téma 2 – Jazyk Java

1. Charakteristika jazyka Java

  • Objektově orientovaný jazyk – vše je objekt nebo třída.
  • Multiplatformní – běží na JVM, ne přímo na OS.
  • Silné typování – typy jsou kontrolovány při kompilaci.
  • Garbage Collector – automatická správa paměti.
  • Bezpečný jazyk – sandbox, absence pointerů.
  • Rozšířený – backend, Android, enterprise systémy.
public class Main { public static void main(String[] args) { System.out.println("Ahoj světe!"); } }

2. Java platforma

2.1 JVM – Java Virtual Machine

  • Spouští bajtkód (.class soubory).
  • Abstrakce nad operačním systémem.
  • Obsahuje JIT kompilátor (Just-In-Time).

2.2 JDK – Java Development Kit

  • Kompilátor javac
  • Nástroje (javadoc, jdb, jar)
  • Knihovny

2.3 JRE – Java Runtime Environment

  • Obsahuje JVM
  • Obsahuje standardní knihovny
  • Slouží ke spouštění aplikací

3. Základní syntaxe

3.1 Datové typy

Primitivní typy

  • byte – 8 bitů
  • short – 16 bitů
  • int – 32 bitů
  • long – 64 bitů
  • float – 32 bitů
  • double – 64 bitů
  • char – Unicode znak
  • boolean – true/false

Referenční typy

  • String
  • Objekty tříd
  • Pole

3.2 Proměnné

int vek = 18; double cena = 19.99; boolean aktivni = true; String jmeno = "David";

3.3 Operátory

  • Aritmetické: + - * / %
  • Porovnávací: == != > < >= <=
  • Logické: && || !
  • Přiřazovací: = += -= *= /=

3.4 Podmínky

if (vek >= 18) { System.out.println("Dospělý"); } else { System.out.println("Nedospělý"); }

3.5 Cykly

for (int i = 0; i < 10; i++) { System.out.println(i); } while (podminka) { ... } do { ... } while (podminka);

4. Třídy a objekty

4.1 Definice třídy

public class Osoba { String jmeno; int vek; void pozdrav() { System.out.println("Ahoj, já jsem " + jmeno); } }

4.2 Vytvoření objektu

Osoba o = new Osoba(); o.jmeno = "David"; o.vek = 18; o.pozdrav();

4.3 Konstruktor

public Osoba(String j, int v) { jmeno = j; vek = v; }

4.4 this

Odkazuje na aktuální objekt.

4.5 static

Patří třídě, ne instanci.

5. Balíčky a importy

package mojeapp; import java.util.Scanner;
  • Balíčky organizují kód.
  • Importy zpřístupňují třídy z jiných balíčků.

6. Výjimky

6.1 try/catch

try { int x = 5 / 0; } catch (Exception e) { System.out.println("Chyba: " + e.getMessage()); }

6.2 finally

Vykoná se vždy.

6.3 throws

Předání výjimky volající metodě.

7. Vstup a výstup

7.1 Scanner

Scanner sc = new Scanner(System.in); int cislo = sc.nextInt();

7.2 System.out

Výpis na konzoli.

8. Shrnutí

  • Java je objektový, multiplatformní jazyk.
  • Běží na JVM, kompiluje se do bajtkódu.
  • Má silné typování a automatickou správu paměti.
  • Obsahuje třídy, objekty, konstruktory, výjimky.
  • Je vhodná pro backend, Android i enterprise aplikace.
Java je stabilní, robustní a univerzální jazyk – ideální pro velké projekty.
VAP Téma 3

Téma 3 – Java: Řídicí struktury

1. Podmíněné konstrukce

1.1 if

Základní podmíněná konstrukce.

int x = 10; if (x > 5) { System.out.println("x je větší než 5"); }

1.2 if – else

if (x > 5) { System.out.println("x > 5"); } else { System.out.println("x <= 5"); }

1.3 else if

if (x > 10) { ... } else if (x > 5) { ... } else { ... }

1.4 Ternární operátor

String vysledek = (x > 0) ? "kladné" : "záporné";

2. switch

2.1 Klasický switch

int den = 3; switch (den) { case 1: System.out.println("Pondělí"); break; case 2: System.out.println("Úterý"); break; case 3: System.out.println("Středa"); break; default: System.out.println("Neznámý den"); }

2.2 Moderní switch (Java 14+)

String text = switch (den) { case 1 -> "Pondělí"; case 2 -> "Úterý"; case 3 -> "Středa"; default -> "Neznámý den"; };

2.3 switch – výhody

  • Přehlednější než mnoho if/else.
  • Rychlejší při velkém množství větví.
  • Moderní syntaxe je bezpečnější (bez fall-through).

3. Cykly

3.1 for

for (int i = 0; i < 10; i++) { System.out.println(i); }

3.2 while

int i = 0; while (i < 5) { System.out.println(i); i++; }

3.3 do-while

int i = 0; do { System.out.println(i); i++; } while (i < 5);

3.4 for-each

int[] cisla = {1,2,3,4}; for (int c : cisla) { System.out.println(c); }

3.5 Nekonečné cykly

while (true) { ... }

4. Řízení toku programu

4.1 break

Ukončí cyklus nebo switch.

for (int i = 0; i < 10; i++) { if (i == 5) break; }

4.2 continue

Přeskočí aktuální iteraci.

for (int i = 0; i < 10; i++) { if (i % 2 == 0) continue; System.out.println(i); }

4.3 return

Ukončí metodu.

if (x < 0) return;

5. Vnořené struktury

5.1 Vnořené cykly

for (int i = 0; i < 5; i++) { for (int j = 0; j < 5; j++) { System.out.println(i + ", " + j); } }

5.2 Vnořené podmínky

if (a > 0) { if (b > 0) { ... } }

5.3 Kombinace cyklů a podmínek

Nejčastější konstrukce v algoritmech.

6. Typické chyby

  • Nekonečný cyklus (zapomenuté inkrementace).
  • Chybné porovnání řetězců (== místo equals()).
  • Chybné hranice cyklů.
  • Chybějící break ve switchi.
Nejčastější chyba začátečníků: while(true) bez podmínky ukončení.

7. Shrnutí

  • Řídicí struktury určují tok programu.
  • Podmínky rozhodují mezi větvemi.
  • Cykly opakují blok kódu.
  • switch je vhodný pro více možností.
  • break/continue mění průběh cyklu.
Řídicí struktury jsou základ logiky programu – bez nich by Java byla jen sada proměnných.
VAP Téma 4

Téma 4 – Java: Objekty

1. Základní pojmy OOP v Javě

  • Třída – šablona (návrh) objektu.
  • Objekt – konkrétní instance třídy.
  • Atribut – proměnná patřící objektu.
  • Metoda – funkce patřící objektu.
  • Stav – hodnoty atributů.
  • Chování – co objekt umí (metody).
Osoba: stav: jméno = "David", věk = 18 chování: pozdrav(), oslavNarozeniny()

2. Definice třídy v Javě

2.1 Základní struktura

public class Osoba { // atributy String jmeno; int vek; // metody void pozdrav() { System.out.println("Ahoj, já jsem " + jmeno); } }

2.2 Vytvoření objektu (instance)

Osoba o = new Osoba(); o.jmeno = "David"; o.vek = 18; o.pozdrav();
  • new – vytvoření nové instance.
  • o – odkaz na objekt v paměti.

3. Atributy a metody

3.1 Atributy

Proměnné definované uvnitř třídy, ale mimo metody.

public class Auto { String znacka; int rychlost; }

3.2 Metody

Definují chování objektu.

public class Auto { String znacka; int rychlost; void zrychli() { rychlost += 10; } void zpomal() { rychlost -= 10; } }

3.3 Parametry a návratové hodnoty

int secti(int a, int b) { return a + b; }

4. Konstruktor

4.1 Co je konstruktor

  • Speciální metoda volaná při vytvoření objektu.
  • Má stejné jméno jako třída.
  • Nemá návratový typ.

4.2 Příklad konstruktoru

public class Osoba { String jmeno; int vek; public Osoba(String j, int v) { jmeno = j; vek = v; } }
Osoba o = new Osoba("David", 18);

4.3 Přetížení konstruktorů

public Osoba(String j) { jmeno = j; vek = 0; } public Osoba(String j, int v) { jmeno = j; vek = v; }

5. Zapouzdření (encapsulation)

5.1 private atributy

Atributy se typicky označují jako private a přistupuje se k nim přes metody.

public class BankovniUcet { private int zustatek; public void vloz(int castka) { if (castka > 0) { zustatek += castka; } } public int getZustatek() { return zustatek; } }

5.2 Getter a setter

public class Osoba { private String jmeno; public String getJmeno() { return jmeno; } public void setJmeno(String jmeno) { this.jmeno = jmeno; } }
Zapouzdření chrání vnitřní stav objektu a umožňuje kontrolu nad změnami.

6. Klíčové slovo this

this odkazuje na aktuální objekt (instanci třídy).

public class Osoba { private String jmeno; public Osoba(String jmeno) { this.jmeno = jmeno; // this.jmeno = atribut, jmeno = parametr } }

7. static vs. instance

7.1 static atributy

Patří třídě, ne konkrétnímu objektu.

public class Pocitadlo { public static int pocet = 0; public Pocitadlo() { pocet++; } }

7.2 static metody

Lze je volat bez vytvoření objektu.

public class Matika { public static int secti(int a, int b) { return a + b; } } // použití: int vysledek = Matika.secti(3, 5);

8. equals(), toString() a hashCode()

8.1 toString()

Vrací textovou reprezentaci objektu.

@Override public String toString() { return jmeno + " (" + vek + ")"; }

8.2 equals()

Porovnání objektů podle obsahu, ne podle reference.

@Override public boolean equals(Object o) { if (this == o) return true; if (!(o instanceof Osoba)) return false; Osoba osoba = (Osoba) o; return vek == osoba.vek && jmeno.equals(osoba.jmeno); }

8.3 hashCode()

Nutné při použití v hash strukturách (HashMap, HashSet).

9. Životní cyklus objektu

  • Vytvoření – new + konstruktor.
  • Používání – volání metod, práce s atributy.
  • Uvolnění – když na objekt neexistuje odkaz, garbage collector může paměť uvolnit.

10. Shrnutí

  • Třída je šablona, objekt je instance.
  • Atributy definují stav, metody chování.
  • Konstruktor inicializuje objekt.
  • Zapouzdření chrání data pomocí private + getter/setter.
  • this odkazuje na aktuální objekt.
  • static patří třídě, ne instanci.
Pochopení objektů je základ pro další témata: dědičnost, polymorfismus a návrhové vzory.
VAP Téma 5

Téma 5 – Java: Pole a kolekce

1. Pole v Javě

1.1 Deklarace a vytvoření pole

int[] cisla = new int[5]; // pole 5 prvků cisla[0] = 10; cisla[1] = 20; String[] jmena = {"Adam", "Bára", "Cyril"};
  • Pevná délka – po vytvoření nelze měnit.
  • Indexování od 0.
  • Všechny prvky mají stejný typ.

1.2 Práce s polem

for (int i = 0; i < cisla.length; i++) { System.out.println(cisla[i]); } for (String j : jmena) { System.out.println(j); }

1.3 Vícedimenzionální pole

int[][] matice = new int[3][3]; matice[0][0] = 1; matice[1][2] = 5;

2. Kolekce – přehled

Kolekce jsou flexibilnější než pole – dynamická velikost, bohaté API.

  • List – seznam (indexovaný, může obsahovat duplicity).
  • Set – množina (bez duplicit).
  • Map – mapa (klíč → hodnota).
Kolekce jsou v balíčku java.util – např. ArrayList, HashSet, HashMap.

3. List – seznam

3.1 ArrayList

import java.util.ArrayList; import java.util.List; List seznam = new ArrayList<>(); seznam.add("Ahoj"); seznam.add("Svět"); seznam.add("!"); System.out.println(seznam.get(0)); // Ahoj System.out.println(seznam.size()); // 3

3.2 Průchod seznamem

for (int i = 0; i < seznam.size(); i++) { System.out.println(seznam.get(i)); } for (String s : seznam) { System.out.println(s); }

3.3 Odstranění prvků

seznam.remove(1); // podle indexu seznam.remove("Ahoj"); // podle hodnoty seznam.clear(); // vyprázdnění

3.4 Další implementace List

  • LinkedList – vhodný pro časté vkládání/mazání uprostřed.
  • Vector – starší, synchronizovaný.

4. Set – množina

4.1 HashSet

import java.util.HashSet; import java.util.Set; Set mnozina = new HashSet<>(); mnozina.add("Ahoj"); mnozina.add("Ahoj"); mnozina.add("Svět"); System.out.println(mnozina.size()); // 2 – duplicity se neukládají

4.2 Vlastnosti Set

  • Neobsahuje duplicity.
  • Pořadí prvků není garantováno (u HashSet).

4.3 Další implementace Set

  • LinkedHashSet – zachovává pořadí vložení.
  • TreeSet – tříděný set.

5. Map – klíč/hodnota

5.1 HashMap

import java.util.HashMap; import java.util.Map; Map veky = new HashMap<>(); veky.put("Adam", 20); veky.put("Bára", 22); System.out.println(veky.get("Adam")); // 20

5.2 Průchod mapou

for (String klic : veky.keySet()) { System.out.println(klic + " → " + veky.get(klic)); } for (Map.Entry entry : veky.entrySet()) { System.out.println(entry.getKey() + " = " + entry.getValue()); }

5.3 Vlastnosti Map

  • Klíče jsou unikátní.
  • Hodnoty se mohou opakovat.
  • get() vrací null, pokud klíč neexistuje.

5.4 Další implementace Map

  • LinkedHashMap – zachovává pořadí vložení.
  • TreeMap – tříděná podle klíče.

6. Arrays a Collections utility

6.1 Třída Arrays

import java.util.Arrays; int[] pole = {3, 1, 4, 1, 5}; Arrays.sort(pole); System.out.println(Arrays.toString(pole));

6.2 Třída Collections

import java.util.Collections; Collections.sort(seznam); // seřazení Listu Collections.reverse(seznam); // otočení pořadí Collections.shuffle(seznam); // náhodné promíchání

7. Generika v kolekcích

Kolekce používají generika – typ v ostrých závorkách.

List jmena = new ArrayList<>(); jmena.add("Adam"); // jmena.add(123); // chyba – typ je String
  • Zajišťují typovou bezpečnost.
  • Odpadá nutnost přetypování.

8. Shrnutí

  • Pole mají pevnou délku, kolekce jsou dynamické.
  • List – indexovaný seznam, může obsahovat duplicity.
  • Set – množina bez duplicit.
  • Map – klíč → hodnota.
  • Generika zajišťují typovou bezpečnost kolekcí.
Správná volba mezi polem a kolekcí výrazně ovlivňuje čitelnost i efektivitu kódu.
VAP Téma 6

Téma 6 – Java: Soubory

1. Třída File

Třída File reprezentuje cestu k souboru nebo složce.

1.1 Základní operace

import java.io.File; File f = new File("data.txt"); System.out.println(f.exists()); // true/false System.out.println(f.getName()); // data.txt System.out.println(f.getAbsolutePath()); System.out.println(f.length()); // velikost v bytech

1.2 Vytvoření souboru

File f = new File("novy.txt"); f.createNewFile(); // vytvoří soubor, pokud neexistuje

1.3 Mazání souboru

File f = new File("stary.txt"); f.delete();

1.4 Práce se složkami

File dir = new File("soubory"); dir.mkdir(); // vytvoří složku String[] obsah = dir.list(); // vypíše obsah složky

2. Čtení textových souborů

2.1 Scanner – jednoduché čtení

import java.io.File; import java.util.Scanner; Scanner sc = new Scanner(new File("data.txt")); while (sc.hasNextLine()) { String radek = sc.nextLine(); System.out.println(radek); } sc.close();

2.2 BufferedReader – rychlé čtení

import java.io.BufferedReader; import java.io.FileReader; BufferedReader br = new BufferedReader(new FileReader("data.txt")); String radek; while ((radek = br.readLine()) != null) { System.out.println(radek); } br.close();

2.3 Files.readString / readAllLines (Java 11+)

import java.nio.file.*; String obsah = Files.readString(Path.of("data.txt")); List radky = Files.readAllLines(Path.of("data.txt"));

2.4 Try-with-resources (doporučené)

try (BufferedReader br = new BufferedReader(new FileReader("data.txt"))) { String r; while ((r = br.readLine()) != null) { System.out.println(r); } }
Try-with-resources automaticky zavře soubor – není nutné volat close().

3. Zápis do textových souborů

3.1 FileWriter

import java.io.FileWriter; FileWriter fw = new FileWriter("vystup.txt"); fw.write("Ahoj světe!"); fw.close();

3.2 Přidávání textu (append)

FileWriter fw = new FileWriter("log.txt", true); // append = true fw.write("Nový záznam\n"); fw.close();

3.3 BufferedWriter

import java.io.BufferedWriter; import java.io.FileWriter; try (BufferedWriter bw = new BufferedWriter(new FileWriter("data.txt"))) { bw.write("První řádek"); bw.newLine(); bw.write("Druhý řádek"); }

3.4 Files.write (Java 11+)

import java.nio.file.*; Files.writeString(Path.of("out.txt"), "Hello!");

4. Práce s binárními soubory

4.1 FileInputStream – čtení binárních dat

import java.io.FileInputStream; try (FileInputStream fis = new FileInputStream("obrazek.png")) { int bajt; while ((bajt = fis.read()) != -1) { System.out.println(bajt); } }

4.2 FileOutputStream – zápis binárních dat

import java.io.FileOutputStream; try (FileOutputStream fos = new FileOutputStream("kopie.png")) { fos.write(65); // zapíše znak 'A' }

4.3 Kopírování souboru

try (FileInputStream in = new FileInputStream("a.png"); FileOutputStream out = new FileOutputStream("b.png")) { byte[] buffer = new byte[1024]; int n; while ((n = in.read(buffer)) > 0) { out.write(buffer, 0, n); } }

5. Serializace objektů

Serializace = uložení objektu do souboru.

5.1 Serializace

import java.io.*; class Osoba implements Serializable { String jmeno; int vek; } Osoba o = new Osoba(); o.jmeno = "David"; o.vek = 18; ObjectOutputStream out = new ObjectOutputStream(new FileOutputStream("osoba.dat")); out.writeObject(o); out.close();

5.2 Deserializace

ObjectInputStream in = new ObjectInputStream(new FileInputStream("osoba.dat")); Osoba o2 = (Osoba) in.readObject(); in.close();
Serializace vyžaduje implements Serializable.

6. Výjimky při práci se soubory

  • FileNotFoundException – soubor neexistuje.
  • IOException – chyba při čtení/zápisu.
  • SecurityException – zákaz přístupu.
try { FileReader fr = new FileReader("neexistuje.txt"); } catch (IOException e) { System.out.println("Chyba: " + e.getMessage()); }

7. Shrnutí

  • Třída File reprezentuje cestu k souboru.
  • Scanner a BufferedReader slouží pro čtení textu.
  • FileWriter a BufferedWriter zapisují text.
  • FileInputStream / FileOutputStream pracují s binárními daty.
  • Serializace ukládá objekty do souboru.
  • Try-with-resources je nejlepší způsob práce se soubory.
Práce se soubory je klíčová pro ukládání dat, logování i konfiguraci aplikací.
VAP Téma 7

Téma 7 – Java: OOP vlastnosti

1. Co je OOP

OOP = objektově orientované programování. Základní principy:

  • Zapouzdření (Encapsulation)
  • Dědičnost (Inheritance)
  • Polymorfismus (Polymorphism)
  • Abstrakce (Abstraction)
OOP umožňuje psát přehledný, znovupoužitelný a udržovatelný kód.

2. Zapouzdření (Encapsulation)

Zapouzdření znamená, že vnitřní stav objektu je chráněný a přístupný jen přes metody.

2.1 private atributy

public class Osoba { private String jmeno; private int vek; public String getJmeno() { return jmeno; } public void setJmeno(String jmeno) { this.jmeno = jmeno; } }

2.2 Výhody zapouzdření

  • Chrání data před neplatnými hodnotami.
  • Umožňuje kontrolu nad změnami.
  • Odděluje implementaci od použití.
Zapouzdření = bezpečnost + kontrola + čistý design.

3. Dědičnost (Inheritance)

Dědičnost umožňuje vytvořit novou třídu na základě jiné třídy.

3.1 extends

public class Zvire { void jez() { System.out.println("Jím..."); } } public class Pes extends Zvire { void stekej() { System.out.println("Haf!"); } }

3.2 Vytvoření objektu

Pes p = new Pes(); p.jez(); // zděděná metoda p.stekej(); // vlastní metoda

3.3 Přepisování metod (override)

public class Pes extends Zvire { @Override void jez() { System.out.println("Pes jí granule."); } }

3.4 super

public class Pes extends Zvire { @Override void jez() { super.jez(); // zavolá metodu rodiče System.out.println("A pak si dá pamlsek."); } }

3.5 Typy dědičnosti v Javě

  • Jednoduchá dědičnost – každá třída má jen jednoho rodiče.
  • Vícenásobná dědičnost – není podporována (řeší se přes rozhraní).

4. Polymorfismus (Polymorphism)

Polymorfismus = jedna metoda, různé implementace.

4.1 Přepisování metod (runtime polymorphism)

Zvire z = new Pes(); z.jez(); // zavolá se verze z Pes, ne ze Zvire

4.2 Přetěžování metod (compile-time polymorphism)

void vypis(int x) { ... } void vypis(String s) { ... } void vypis(double d) { ... }

4.3 Výhody polymorfismu

  • Umožňuje psát obecný kód.
  • Umožňuje měnit chování bez změny rozhraní.
  • Je základ návrhových vzorů.

5. Abstrakce (Abstraction)

Abstrakce skrývá detaily implementace a ukazuje jen to, co je důležité.

5.1 Abstraktní třída

public abstract class Tvar { abstract double obsah(); }

5.2 Implementace

public class Kruh extends Tvar { double r; public Kruh(double r) { this.r = r; } @Override double obsah() { return Math.PI * r * r; } }

5.3 Rozhraní (interface)

public interface Zvuk { void hraj(); } public class Kytara implements Zvuk { public void hraj() { System.out.println("Brnk!"); } }
Rozhraní umožňují vícenásobnou „dědičnost“ chování.

6. Přístupové modifikátory

  • private – přístup jen v rámci třídy.
  • default – v rámci balíčku.
  • protected – třída + potomci.
  • public – všude.
public class A { private int a; protected int b; public int c; }

7. Shrnutí

  • Zapouzdření chrání data a poskytuje kontrolu.
  • Dědičnost umožňuje znovupoužití kódu.
  • Polymorfismus umožňuje různé implementace stejného rozhraní.
  • Abstrakce skrývá detaily a zjednodušuje návrh.
  • OOP je základní stavební kámen moderní Javy.
OOP vlastnosti tvoří páteř celé Javy – bez nich nelze psát větší aplikace.
VAP Téma 8

Téma 8 – Java GUI: AWT a Swing

1. Úvod do GUI v Javě

Java nabízí dvě hlavní GUI knihovny:

  • AWT (Abstract Window Toolkit) – starší, závislé na OS.
  • Swing – novější, nezávislé na OS, bohatší komponenty.
Swing je postavený na AWT, ale je modernější a používá tzv. lightweight komponenty.

2. AWT – základní komponenty

2.1 Frame – hlavní okno

import java.awt.*; public class OknoAWT { public static void main(String[] args) { Frame f = new Frame("Moje AWT okno"); f.setSize(400, 300); f.setVisible(true); } }

2.2 Tlačítko, popisek, textové pole

Button b = new Button("Klikni"); Label l = new Label("Ahoj"); TextField t = new TextField("Text");

2.3 Layouty v AWT

  • FlowLayout
  • BorderLayout
  • GridLayout
f.setLayout(new FlowLayout()); f.add(b); f.add(l); f.add(t);

3. Swing – moderní GUI knihovna

3.1 JFrame – hlavní okno

import javax.swing.*; public class OknoSwing { public static void main(String[] args) { JFrame okno = new JFrame("Moje Swing okno"); okno.setSize(400, 300); okno.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); okno.setVisible(true); } }

3.2 Základní Swing komponenty

  • JButton
  • JLabel
  • JTextField
  • JTextArea
  • JCheckBox
  • JRadioButton
  • JComboBox
  • JPanel
JButton tl = new JButton("Klikni"); JLabel lbl = new JLabel("Ahoj"); JTextField tf = new JTextField(20);

4. Layout manažery ve Swingu

4.1 FlowLayout

okno.setLayout(new FlowLayout()); okno.add(new JButton("A")); okno.add(new JButton("B"));

4.2 BorderLayout

okno.setLayout(new BorderLayout()); okno.add(new JButton("Sever"), BorderLayout.NORTH); okno.add(new JButton("Jih"), BorderLayout.SOUTH);

4.3 GridLayout

okno.setLayout(new GridLayout(2, 2)); okno.add(new JButton("1")); okno.add(new JButton("2")); okno.add(new JButton("3")); okno.add(new JButton("4"));

5. Události (Event Handling)

GUI aplikace reagují na události – kliknutí, psaní, pohyb myši…

5.1 ActionListener

JButton tl = new JButton("Klikni"); tl.addActionListener(e -> { System.out.println("Klik!"); });

5.2 Anonymní třída

tl.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("Klik!"); } });

5.3 WindowListener

okno.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.out.println("Zavírá se okno"); } });

6. Vlastní komponenty a kreslení

6.1 JPanel + paintComponent()

class Platno extends JPanel { @Override protected void paintComponent(Graphics g) { super.paintComponent(g); g.drawLine(10, 10, 200, 200); g.drawOval(50, 50, 100, 100); } }

6.2 Použití

okno.add(new Platno());

7. Dialogová okna

7.1 Message dialog

JOptionPane.showMessageDialog(null, "Ahoj!");

7.2 Input dialog

String jmeno = JOptionPane.showInputDialog("Zadej jméno:");

7.3 Confirm dialog

int volba = JOptionPane.showConfirmDialog(null, "Pokračovat?");

8. Shrnutí

  • AWT je starší GUI knihovna, Swing je modernější a bohatší.
  • Swing používá komponenty jako JButton, JLabel, JTextField…
  • Layout manažery určují rozmístění prvků.
  • Události se řeší pomocí listenerů (ActionListener, WindowListener…).
  • Vlastní kreslení se provádí v paintComponent().
  • Dialogy poskytuje JOptionPane.
Swing je základní GUI technologie Javy – ideální pro školní i menší desktopové aplikace.
VAP Téma 9

Téma 9 – Java: grafika, práce s databází

Java Grafika JDBC AWT Swing Java2D SQL

1. Úvod – co toto téma řeší

Téma kombinuje dvě oblasti: grafiku v Javě (kreslení do okna, tvary, text, obrázky) a práci s databází pomocí rozhraní JDBC. Cílem je umět vysvětlit principy a ukázat jednoduché příklady kódu.

  • Java grafika: AWT/Swing, třída Graphics, Graphics2D, vykreslování tvarů a obrázků.
  • Databáze: připojení k databázi, SQL dotazy, Statement, PreparedStatement, ResultSet.

2. Java grafika – základní principy

2.1 AWT a Swing

Pro klasickou desktopovou grafiku se v Javě používají hlavně knihovny AWT a Swing. Kreslení probíhá do komponent (např. JPanel) pomocí objektu Graphics.

  • AWT (Abstract Window Toolkit) – základní okna, komponenty, třída Graphics.
  • Swing – novější GUI knihovna, komponenty jako JFrame, JPanel, JButton
  • Kreslení se typicky provádí v metodě paintComponent(Graphics g) u potomka JPanel.

2.2 Kreslení v paintComponent(Graphics g)

Pro vlastní kreslení vytvoříme třídu, která dědí z JPanel, a přepíšeme metodu paintComponent. Vždy voláme super.paintComponent(g), aby se panel správně vyčistil.

import javax.swing.*;
import java.awt.*;

public class Platno extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g); // vyčištění pozadí

        // základní tvary
        g.drawLine(10, 10, 200, 200);
        g.drawRect(50, 50, 100, 80);
        g.drawOval(50, 150, 100, 100);

        // změna barvy a vyplněný obdélník
        g.setColor(Color.RED);
        g.fillRect(200, 50, 120, 80);

        // text
        g.setColor(Color.BLACK);
        g.drawString("Ahoj grafiko!", 50, 280);
    }
}

2.3 Vytvoření okna a přidání plátna

Pro zobrazení grafiky vytvoříme JFrame, nastavíme velikost, přidáme instanci našeho panelu a okno zobrazíme.

public class OknoGrafika {

    public static void main(String[] args) {
        JFrame okno = new JFrame("Grafika v Javě");
        okno.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        okno.setSize(400, 400);

        okno.add(new Platno()); // naše třída s paintComponent

        okno.setLocationRelativeTo(null); // vycentrování
        okno.setVisible(true);
    }
}
Princip: Swing se stará o překreslování komponent. Kdykoli je potřeba překreslit okno, zavolá se metoda paintComponent(), kde máme vlastní kreslení.

3. Základní grafické operace

3.1 Základní metody třídy Graphics

Metoda Popis
drawLine(x1, y1, x2, y2) nakreslí úsečku mezi dvěma body
drawRect(x, y, w, h) obrys obdélníku
fillRect(x, y, w, h) vyplněný obdélník
drawOval(x, y, w, h) elipsa vepsaná do obdélníku
drawString(text, x, y) vykreslení textu
setColor(Color c) nastavení aktuální barvy kreslení
setFont(Font f) nastavení písma pro text

3.2 Double buffering

Double buffering znamená, že se kreslí nejdříve do skrytého bufferu a až hotový obraz se překreslí na obrazovku. Tím se zabrání blikání. Swing to ve výchozím stavu řeší automaticky, takže programátor se o to většinou starat nemusí.

4. Java2D – rozšířená grafika

4.1 Graphics2D

Třída Graphics2D je rozšířením Graphics a umožňuje pokročilejší operace: tloušťka čáry, transformace, antialiasing, složitější tvary.

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);

    Graphics2D g2 = (Graphics2D) g;

    // tlustší čára
    g2.setStroke(new BasicStroke(5));
    g2.setColor(Color.BLUE);
    g2.drawLine(20, 20, 200, 20);
}

4.2 Transformace – rotace, škálování, posun

Pomocí transformací můžeme objekt otočit, zvětšit/zmenšit nebo posunout.

Graphics2D g2 = (Graphics2D) g;

// rotace o 45° kolem bodu (100, 100)
g2.rotate(Math.toRadians(45), 100, 100);
g2.drawRect(80, 80, 100, 50);

4.3 Antialiasing

Antialiasing vyhlazuje hrany tvarů a textu, aby nebyly „zubaté“.

Graphics2D g2 = (Graphics2D) g;

g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON);

5. Práce s obrázky v Javě

5.1 Načtení obrázku

Obrázky lze načítat pomocí třídy ImageIO do objektu BufferedImage.

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;

BufferedImage img = ImageIO.read(new File("obrazek.png"));

5.2 Vykreslení obrázku

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawImage(img, 0, 0, null); // vykreslení v původní velikosti
}

5.3 Změna velikosti při vykreslení

g.drawImage(img, 0, 0, 200, 200, null); // šířka 200, výška 200

6. Práce s databází v Javě – JDBC

6.1 Co je JDBC

JDBC (Java Database Connectivity) je rozhraní, které umožňuje Javě komunikovat s relačními databázemi (MySQL, PostgreSQL, SQLite, Oracle…). Programátor používá jednotné API, konkrétní databáze dodává svůj JDBC driver.

Myšlenka: Java aplikace posílá SQL dotazy přes JDBC driver do databáze a získává výsledky jako ResultSet.

6.2 Základní kroky práce s JDBC

  1. Načtení JDBC driveru (většinou automaticky přes knihovnu).
  2. Vytvoření připojení – objekt Connection.
  3. Vytvoření SQL dotazu – Statement nebo PreparedStatement.
  4. Provedení dotazu – executeQuery() nebo executeUpdate().
  5. Zpracování výsledků – objekt ResultSet.
  6. Uzavření připojení a uvolnění zdrojů.

7. Připojení k databázi

7.1 Připojení k MySQL

Příklad připojení k databázi skola na lokálním MySQL serveru:

import java.sql.*;

public class PripojeniMySQL {
    public static void main(String[] args) throws Exception {
        String url  = "jdbc:mysql://localhost:3306/skola";
        String user = "root";
        String pass = "";

        Connection con = DriverManager.getConnection(url, user, pass);
        System.out.println("Připojeno k databázi!");

        con.close();
    }
}

7.2 Připojení k SQLite

U SQLite se připojujeme k souboru databáze:

Connection con = DriverManager.getConnection("jdbc:sqlite:moje.db");
Pozor: Aby připojení fungovalo, musí být v projektu správně přidán JDBC driver (např. mysql-connector-j pro MySQL, sqlite-jdbc pro SQLite).

8. SQL dotazy přes JDBC

8.1 SELECT – načtení dat

Pro dotazy, které vrací data (SELECT), používáme metodu executeQuery(), která vrací ResultSet.

String sql = "SELECT * FROM studenti";

Statement st = con.createStatement();
ResultSet rs = st.executeQuery(sql);

while (rs.next()) {
    String jmeno = rs.getString("jmeno");
    int vek      = rs.getInt("vek");
    System.out.println(jmeno + " (" + vek + ")");
}

8.2 INSERT – vložení dat

Pro změnové dotazy (INSERT, UPDATE, DELETE) používáme executeUpdate(), která vrací počet ovlivněných řádků.

String sql = "INSERT INTO studenti (jmeno, vek) VALUES ('Adam', 20)";
int radky = st.executeUpdate(sql);
System.out.println("Vloženo řádků: " + radky);

8.3 UPDATE – úprava dat

String sql = "UPDATE studenti SET vek = 21 WHERE jmeno = 'Adam'";
st.executeUpdate(sql);

8.4 DELETE – smazání dat

String sql = "DELETE FROM studenti WHERE jmeno = 'Adam'";
st.executeUpdate(sql);

9. PreparedStatement – bezpečnější dotazy

Třída PreparedStatement umožňuje používat v SQL dotazu parametry (otazníky) a hodnoty doplňovat až v kódu. Je to:

  • bezpečnější – chrání proti SQL injection,
  • přehlednější – oddělení SQL a dat,
  • efektivnější – databáze může dotaz znovu použít.

9.1 Příklad INSERT s PreparedStatement

String sql = "INSERT INTO studenti (jmeno, vek) VALUES (?, ?)";

PreparedStatement ps = con.prepareStatement(sql);
ps.setString(1, "Karel");
ps.setInt(2, 19);

ps.executeUpdate();

9.2 Příklad SELECT s parametrem

String sql = "SELECT * FROM studenti WHERE vek > ?";

PreparedStatement ps = con.prepareStatement(sql);
ps.setInt(1, 18);

ResultSet rs = ps.executeQuery();
while (rs.next()) {
    System.out.println(rs.getString("jmeno"));
}
SQL injection: Pokud skládáme SQL dotaz řetězcem z uživatelského vstupu (např. "... WHERE jmeno = '" + vstup + "'" ), může útočník vložit škodlivý SQL kód. PreparedStatement tomu brání tím, že parametry posílá odděleně.

10. ResultSet a uzavření zdrojů

10.1 Čtení hodnot z ResultSet

Z ResultSet čteme hodnoty podle názvu sloupce nebo indexu (od 1).

while (rs.next()) {
    String jmeno = rs.getString("jmeno");
    int vek      = rs.getInt("vek");
    double prumer = rs.getDouble("prumer");
    boolean aktivni = rs.getBoolean("aktivni");
}

10.2 Uzavření zdrojů

Po skončení práce je nutné zavřít všechny zdroje – ResultSet, Statement a Connection.

rs.close();
st.close();
con.close();
Dobrá praxe: V moderní Javě se často používá konstrukce try-with-resources, která se postará o automatické zavření zdrojů.

11. Shrnutí tématu 9

Java grafika

  • AWT/Swing – kreslení do JPanel v metodě paintComponent().
  • Třída Graphics – čáry, obdélníky, elipsy, text.
  • Graphics2D – tloušťka čáry, transformace, antialiasing.
  • Práce s obrázky – BufferedImage, ImageIO.read(), drawImage().

Práce s databází (JDBC)

  • JDBC – rozhraní pro komunikaci s databází.
  • Připojení přes DriverManager.getConnection().
  • SQL dotazy – Statement, executeQuery(), executeUpdate().
  • PreparedStatement – parametry, bezpečnost proti SQL injection.
  • ResultSet – čtení výsledků, uzavření zdrojů.
VAP Téma 10

Téma 10 – JavaFX

JavaFX Scene Stage FXML Controller Layouts

1. Co je JavaFX

JavaFX je moderní framework pro tvorbu grafických aplikací v Javě. Je nástupcem Swingu a nabízí:

  • moderní vzhled a stylování pomocí CSS,
  • FXML – deklarativní popis GUI,
  • scénografii (Stage, Scene),
  • layouty pro rozložení prvků,
  • události a binding (vazby hodnot),
  • multimédia, animace, grafiku.

2. Základní architektura JavaFX

2.1 Stage

Stage = hlavní okno aplikace. Vytváří ho JavaFX runtime.

2.2 Scene

Scene = obsah okna. Obsahuje kořenový uzel (root node).

2.3 Node

Node = každý vizuální prvek (Button, Label, Pane…).

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        Button btn = new Button("Klikni");
        Scene scene = new Scene(btn, 300, 200);

        stage.setTitle("JavaFX okno");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

3. Layouty (rozložení prvků)

JavaFX používá tzv. layout panely:

  • HBox – prvky vedle sebe
  • VBox – prvky pod sebou
  • BorderPane – 5 oblastí (top, left, center, right, bottom)
  • GridPane – tabulka
  • StackPane – prvky přes sebe
VBox root = new VBox(10);
root.getChildren().addAll(new Label("Jméno:"), new TextField());

Scene scene = new Scene(root, 300, 200);

4. Ovládací prvky (Controls)

  • Label
  • Button
  • TextField, TextArea
  • CheckBox, RadioButton
  • ComboBox, ListView, TableView
  • Slider, ProgressBar
Button b = new Button("Uložit");
TextField t = new TextField();
CheckBox c = new CheckBox("Souhlasím");

5. Události

Každý prvek může reagovat na události, např. kliknutí.

Button btn = new Button("Klikni");

btn.setOnAction(e -> {
    System.out.println("Klik!");
});
Události v JavaFX používají lambda výrazy → jednoduchý a přehledný kód.

6. FXML – oddělení logiky a vzhledu

FXML je XML soubor, který popisuje vzhled aplikace. Logika je v Controlleru.

6.1 Příklad FXML

<VBox spacing="10" xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="app.Controller">

    <Label text="Jméno:" />
    <TextField fx:id="txtJmeno" />
    <Button text="Uložit" onAction="#ulozit" />

</VBox>

6.2 Controller

public class Controller {

    @FXML
    private TextField txtJmeno;

    @FXML
    private void ulozit() {
        System.out.println("Ukládám: " + txtJmeno.getText());
    }
}

6.3 Načtení FXML

Parent root = FXMLLoader.load(getClass().getResource("okno.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);

7. Stylování pomocí CSS

JavaFX podporuje CSS podobné webovému.

Příklad CSS

Button {
    -fx-background-color: #2563eb;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}

Načtení CSS

scene.getStylesheets().add("styl.css");

8. Binding – vazby hodnot

Binding umožňuje automaticky aktualizovat hodnoty mezi prvky.

label.textProperty().bind(textField.textProperty());
Když uživatel píše do TextFieldu, Label se automaticky mění.

9. Animace a grafika

JavaFX obsahuje třídy pro animace:

  • FadeTransition
  • TranslateTransition
  • RotateTransition
  • Timeline
FadeTransition ft = new FadeTransition(Duration.seconds(2), btn);
ft.setFromValue(1.0);
ft.setToValue(0.0);
ft.play();

10. Shrnutí

  • JavaFX = moderní GUI framework pro Javu.
  • Stage = okno, Scene = obsah, Node = prvek.
  • Layouty: VBox, HBox, GridPane, BorderPane…
  • Události pomocí lambda výrazů.
  • FXML odděluje vzhled a logiku.
  • Stylování pomocí CSS.
  • Binding propojuje hodnoty mezi prvky.
  • Podpora animací a grafiky.
VAP Téma 11

Téma 11 – Android: XML, architektura aplikace, tvorba aplikace

Android XML Activity Manifest Lifecycle UI

1. Co je Android a jak funguje aplikace

Android je operační systém založený na Linuxu. Aplikace jsou psané v Javě nebo Kotlinu a běží v prostředí ART (Android Runtime).

  • Každá aplikace má vlastní sandbox (oddělené prostředí).
  • UI se popisuje pomocí XML layoutů.
  • Logika je v třídách jako Activity nebo Fragment.
  • Každá aplikace má soubor AndroidManifest.xml.

2. XML layouty

XML popisuje vzhled obrazovky. Každý layout má kořenový prvek (např. LinearLayout, ConstraintLayout).

2.1 Příklad jednoduchého layoutu

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="20dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Jméno:"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/txtJmeno"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btnUlozit"
        android:text="Uložit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

2.2 Běžné layouty

  • LinearLayout – prvky pod sebou nebo vedle sebe
  • RelativeLayout – prvky relativně k sobě
  • ConstraintLayout – moderní, flexibilní
  • FrameLayout – vrstvení prvků

3. Activity – základní stavební prvek

Activity = jedna obrazovka aplikace. Každá má svůj životní cyklus.

3.1 Jednoduchá Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btn = findViewById(R.id.btnUlozit);
        btn.setOnClickListener(v -> {
            System.out.println("Klik!");
        });
    }
}

3.2 Životní cyklus Activity

  • onCreate() – inicializace
  • onStart()
  • onResume() – aplikace je viditelná a aktivní
  • onPause()
  • onStop()
  • onDestroy() – ukončení
Android může Activity kdykoliv zničit (např. při otočení obrazovky). Proto se data ukládají do Bundle.

4. AndroidManifest.xml

Manifest definuje základní informace o aplikaci:

  • název aplikace, ikona
  • povolení (permissions)
  • seznam aktivit
  • minimální verze Androidu

Příklad

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <application
        android:label="Moje aplikace"
        android:icon="@mipmap/ic_launcher">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

    </application>

</manifest>

5. Události a práce s prvky

5.1 Najití prvku

EditText txt = findViewById(R.id.txtJmeno);

5.2 Kliknutí na tlačítko

btn.setOnClickListener(v -> {
    String jmeno = txt.getText().toString();
    Toast.makeText(this, "Ahoj " + jmeno, Toast.LENGTH_SHORT).show();
});

6. Tvorba jednoduché aplikace – shrnutí kroků

  1. Vytvořit projekt v Android Studiu.
  2. Navrhnout layout v XML.
  3. Vytvořit Activity a propojit ji s layoutem.
  4. Najít prvky pomocí findViewById().
  5. Napojit události (kliknutí, změna textu…).
  6. Otestovat na emulátoru nebo telefonu.
Android Studio nabízí vizuální editor layoutů, emulátor zařízení a nástroje pro ladění.

7. Shrnutí tématu 11

  • Android používá XML pro popis UI.
  • Activity je základní obrazovka aplikace.
  • Manifest definuje strukturu aplikace.
  • Události se řeší pomocí listenerů.
  • Vývoj probíhá v Android Studiu.
VAP Téma 12

Téma 12 – Testování, výjimky

Testování Výjimky JUnit try/catch throw assert

1. Co je testování

Testování ověřuje, že program funguje správně. Cílem je najít chyby dříve, než se aplikace dostane k uživatelům.

  • zvyšuje kvalitu kódu,
  • odhaluje chyby,
  • zjednodušuje údržbu,
  • umožňuje bezpečné refaktoringy.

2. Typy testů

2.1 Jednotkové testy (Unit tests)

Testují jednotlivé metody nebo malé části programu. Rychlé, izolované, automatizované.

2.2 Integrační testy

Testují spolupráci více částí systému (např. aplikace + databáze).

2.3 Systémové testy

Testují celý systém jako celek.

2.4 Testy uživatelského rozhraní

Ověřují chování GUI (např. Selenium, Espresso).

2.5 Testování černé a bílé skříňky

  • Black-box – neznáme vnitřní implementaci, testujeme vstupy/výstupy.
  • White-box – známe kód, testujeme větve, podmínky, cykly.

3. JUnit – testování v Javě

JUnit je nejpoužívanější framework pro jednotkové testy v Javě.

3.1 Jednoduchý test

import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;

class KalkulatorTest {

    @Test
    void testScitani() {
        assertEquals(5, 2 + 3);
    }
}

3.2 Assert metody

  • assertEquals(ocekavane, skutecne)
  • assertTrue(podminka)
  • assertFalse(podminka)
  • assertThrows(Vyjimka.class, () -> ...)

3.3 Test výjimky

@Test
void testDeleniNulou() {
    assertThrows(ArithmeticException.class, () -> {
        int x = 5 / 0;
    });
}

4. Výjimky v Javě

Výjimky slouží k ošetření chybových stavů. Pokud nastane chyba, program vyhodí výjimku a může ji zachytit.

4.1 Hierarchie výjimek

  • Throwable
    • Error – chyby JVM (OutOfMemoryError)
    • Exception
      • RuntimeException – nečekané chyby (NullPointerException)
      • Checked exceptions – musí se ošetřit (IOException)

4.2 try/catch

try {
    int x = 5 / 0;
} catch (ArithmeticException e) {
    System.out.println("Chyba: " + e.getMessage());
}

4.3 finally

Blok finally se provede vždy – i když nastane výjimka.

try {
    FileReader fr = new FileReader("data.txt");
} catch (IOException e) {
    System.out.println("Soubor nenalezen");
} finally {
    System.out.println("Ukončuji operaci");
}

4.4 throw – vyhození výjimky

if (vek < 0) {
    throw new IllegalArgumentException("Věk nesmí být záporný");
}

4.5 throws – předání výjimky dál

public void nactiSoubor() throws IOException {
    FileReader fr = new FileReader("data.txt");
}

5. Vlastní výjimky

Můžeme vytvořit vlastní výjimku děděním z Exception nebo RuntimeException.

class MojeVyjimka extends Exception {
    public MojeVyjimka(String msg) {
        super(msg);
    }
}
throw new MojeVyjimka("Nastala chyba v aplikaci");

6. Dobré praktiky při práci s výjimkami

  • nezachytávat obecnou Exception,
  • používat konkrétní typy výjimek,
  • nezneužívat výjimky pro běžné řízení programu,
  • logovat chyby,
  • používat try-with-resources pro práci se soubory a databází.

6.1 try-with-resources

try (FileReader fr = new FileReader("data.txt")) {
    // práce se souborem
} catch (IOException e) {
    e.printStackTrace();
}

7. Shrnutí tématu 12

  • Testování ověřuje správnost programu.
  • JUnit je nejpoužívanější framework pro jednotkové testy v Javě.
  • Výjimky řeší chybové stavy programu.
  • try/catch zachytává výjimky, throw je vyhazuje, throws je předává dál.
  • Vlastní výjimky umožňují přesnější popis chyb.
VAP Téma 13

Téma 13 – Verzování aplikací (Git)

Git GitHub Commit Branch Merge Version Control

1. Co je verzování

Verzování (Version Control) je způsob, jak sledovat změny v kódu. Umožňuje:

  • vrátit se ke starší verzi,
  • pracovat v týmu bez přepisování změn,
  • vytvářet větve (branch) pro nové funkce,
  • sledovat historii projektu.
Nejrozšířenější systém verzování dnes je Git.

2. Co je Git

Git je distribuovaný verzovací systém. Každý vývojář má kompletní kopii repozitáře včetně historie.

Výhody Gitu

  • rychlost,
  • bezpečnost dat,
  • možnost offline práce,
  • větve a slučování (merge),
  • snadná spolupráce přes GitHub/GitLab/Bitbucket.

3. Základní pojmy

3.1 Repozitář (repository)

Složka projektu, ve které Git sleduje změny.

3.2 Commit

Zaznamenaná změna v projektu. Obsahuje:

  • popis změny (commit message),
  • autora,
  • čas,
  • unikátní hash.

3.3 Branch (větev)

Oddělená vývojová linie. Umožňuje pracovat na nové funkci bez ovlivnění hlavní větve.

3.4 Merge

Sloučení dvou větví dohromady.

3.5 Konflikt

Nastane, když dvě větve upraví stejný řádek kódu. Vývojář musí ručně vybrat správnou verzi.

4. Základní Git příkazy

4.1 Inicializace repozitáře

git init

4.2 Přidání souborů

git add soubor.txt
git add .

4.3 Commit

git commit -m "Popis změny"

4.4 Stav repozitáře

git status

4.5 Historie commitů

git log

4.6 Vytvoření větve

git branch nova-vetev

4.7 Přepnutí větve

git checkout nova-vetev

4.8 Sloučení větví

git merge nova-vetev

4.9 Stažení změn z GitHubu

git pull

4.10 Odeslání změn na GitHub

git push

5. Vzdálené repozitáře (GitHub)

GitHub je platforma pro ukládání Git repozitářů online. Umožňuje:

  • spolupráci v týmu,
  • pull requesty,
  • code review,
  • issues (hlášení chyb),
  • automatizace (GitHub Actions).

5.1 Přidání vzdáleného repozitáře

git remote add origin https://github.com/uzivatel/projekt.git

5.2 Odeslání první verze

git push -u origin main

6. Branching model

6.1 Hlavní větve

  • main – stabilní verze
  • develop – vývojová verze

6.2 Pomocné větve

  • feature – nové funkce
  • hotfix – opravy chyb
  • release – příprava nové verze

7. Konflikty a jejich řešení

Konflikt nastane, když dva vývojáři upraví stejný řádek. Git označí konflikt takto:

<<<<<<< HEAD
moje verze
=======
verze z jiné větve
>>>>>>> nova-vetev

Vývojář musí ručně vybrat správnou verzi a commitnout opravený soubor.

8. Shrnutí tématu 13

  • Git je nejpoužívanější verzovací systém.
  • Commit ukládá změny v projektu.
  • Branch umožňuje paralelní vývoj.
  • Merge slučuje větve, konflikty se řeší ručně.
  • GitHub slouží pro sdílení repozitářů a týmovou spolupráci.
VAP Téma 14

Téma 14 – HTML

HTML Tagy Atributy Formuláře Tabulky Struktura

1. Co je HTML

HTML (HyperText Markup Language) je značkovací jazyk pro tvorbu webových stránek. Popisuje strukturu obsahu pomocí značek (tagů).

  • není to programovací jazyk,
  • popisuje obsah, ne vzhled,
  • vzhled řeší CSS, chování JavaScript.

2. Základní struktura HTML dokumentu

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Název stránky</title>
</head>

<body>
    Obsah stránky
</body>
</html>

2.1 Důležité části

  • <head> – metadata, název, odkazy na CSS/JS
  • <body> – viditelný obsah stránky
  • <meta charset="UTF-8"> – správné kódování češtiny

3. Základní HTML elementy

3.1 Nadpisy

<h1>Hlavní nadpis</h1>
<h2>Podnadpis</h2>

3.2 Odstavce

<p>Toto je odstavec.</p>

3.3 Odkazy

<a href="https://example.com">Klikni zde</a>

3.4 Obrázky

<img src="obrazek.jpg" alt="Popis obrázku">

3.5 Seznamy

<ul>
  <li>Položka</li>
</ul>

<ol>
  <li>První</li>
</ol>

4. Atributy

Atributy doplňují informace o elementu.

  • id – jednoznačný identifikátor
  • class – třída pro CSS
  • src – zdroj obrázku
  • href – odkaz
  • alt – text obrázku
<img src="logo.png" alt="Logo firmy" class="logo">

5. Tabulky

<table>
  <tr>
    <th>Jméno</th>
    <th>Věk</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>20</td>
  </tr>
</table>

6. Formuláře

<form action="odeslat.php" method="post">

  <label>Jméno:</label>
  <input type="text" name="jmeno">

  <input type="submit" value="Odeslat">

</form>

6.1 Typy inputů

  • text
  • password
  • email
  • number
  • checkbox
  • radio
  • submit

7. Sémantické HTML

Moderní HTML používá sémantické tagy pro lepší strukturu:

  • <header>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <footer>

8. Multimédia

8.1 Video

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

8.2 Audio

<audio controls>
  <source src="zvuk.mp3" type="audio/mpeg">
</audio>

9. Shrnutí tématu 14

  • HTML je značkovací jazyk pro strukturu webu.
  • Dokument má části head a body.
  • Elementy mají tagy a atributy.
  • Formuláře slouží pro sběr dat.
  • Sémantické HTML zlepšuje přístupnost a SEO.
VAP Téma 15

Téma 15 – CSS

CSS Selektory Box model Flexbox Grid Responzivita

1. Co je CSS

CSS (Cascading Style Sheets) je jazyk pro popis vzhledu HTML dokumentu. Odděluje obsah (HTML) od prezentace (CSS).

  • určuje barvy, fonty, velikosti, rozložení,
  • umožňuje responzivní design,
  • umožňuje animace a efekty.

2. Způsoby vložení CSS

2.1 Externí soubor

<link rel="stylesheet" href="styl.css">

2.2 Interní styl

<style>
  p { color: red; }
</style>

2.3 Inline styl

<p style="color: blue;">Text</p>
Inline styly se nedoporučují – špatně se udržují.

3. Selektory

3.1 Základní selektory

p { color: red; }          /* element */
#hlavicka { ... }          /* id */
.nadpis { ... }            /* class */

3.2 Kombinátory

div p { ... }      /* potomek */
div > p { ... }     /* přímý potomek */
p + span { ... }    /* sousední prvek */

3.3 Pseudo-třídy

a:hover { color: red; }
input:focus { border: 2px solid blue; }

3.4 Pseudo-elementy

p::first-line { font-weight: bold; }

4. Box model

Každý HTML prvek je box složený z:

  • content
  • padding
  • border
  • margin
div {
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

5. Barvy a jednotky

5.1 Barvy

color: red;
color: #2563eb;
color: rgb(20, 100, 200);

5.2 Jednotky

  • px – pixely
  • % – procenta
  • em – relativní k fontu rodiče
  • rem – relativní k rootu
  • vh/vw – výška/šířka okna

6. Pozicování

  • static – výchozí
  • relative – relativní posun
  • absolute – absolutní pozice
  • fixed – pevné na obrazovce
  • sticky – lepivé
div {
  position: absolute;
  top: 20px;
  left: 50px;
}

7. Flexbox

Moderní způsob rozložení prvků.

.container {
  display: flex;
  gap: 20px;
}
  • zarovnání prvků,
  • rozložení prostoru,
  • flex-direction, justify-content, align-items.

8. CSS Grid

Pokročilý layout systém pro mřížky.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

9. Responzivní design

Media queries

@media (max-width: 600px) {
  body { font-size: 14px; }
}
Responzivita umožňuje, aby web vypadal dobře na mobilech i počítačích.

10. Animace

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fade 2s ease-in-out;
}

11. Shrnutí tématu 15

  • CSS určuje vzhled HTML stránky.
  • Selektory vybírají prvky, vlastnosti určují styl.
  • Box model definuje strukturu prvku.
  • Flexbox a Grid jsou moderní layout systémy.
  • Media queries umožňují responzivní design.
VAP Téma 16

Téma 16 – SEO

SEO On‑page Off‑page Indexace Metadata Technické SEO Google Crawling

1. Co je SEO

SEO (Search Engine Optimization) je proces optimalizace webových stránek tak, aby se zobrazovaly co nejvýše ve výsledcích vyhledávání (Google, Seznam). Cílem je zvýšit organickou návštěvnost bez placené reklamy.

  • zlepšuje viditelnost webu,
  • zvyšuje důvěryhodnost,
  • přivádí relevantní návštěvníky,
  • má dlouhodobý efekt.
SEO není jednorázová činnost — je to dlouhodobý proces, který vyžaduje pravidelnou aktualizaci obsahu a technických parametrů webu.

2. On‑page SEO

On‑page SEO zahrnuje všechny úpravy přímo na stránce, které pomáhají vyhledávačům pochopit obsah a uživatelům zlepšují orientaci.

2.1 Titulek stránky (title)

Jeden z nejdůležitějších faktorů.

<title>Levné notebooky – e‑shop</title>

2.2 Meta description

Krátký popis stránky zobrazovaný ve výsledcích vyhledávání.

<meta name="description" content="Prodej notebooků za nejlepší ceny.">
Meta description neovlivňuje přímo pozici, ale ovlivňuje míru prokliku (CTR).

2.3 Nadpisy a struktura

  • H1 – hlavní nadpis (1× na stránce)
  • H2–H6 – podnadpisy
  • logická hierarchie obsahu

2.4 Kvalitní obsah

Vyhledávače preferují originální, relevantní a užitečný obsah. Důležitá je délka textu, struktura, přehlednost a přidaná hodnota.

2.5 URL adresy

/produkty/notebooky/lenovo

2.6 Interní odkazy

Pomáhají vyhledávačům procházet web a zlepšují uživatelskou navigaci.

2.7 Obrázky a alt texty

<img src="notebook.jpg" alt="Notebook Lenovo 15">
Alt text pomáhá vyhledávačům pochopit obsah obrázku a zlepšuje přístupnost.

2.8 Strukturovaná data (schema.org)

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Notebook Lenovo",
  "price": "14999"
}

3. Off‑page SEO

Off‑page SEO zahrnuje faktory mimo samotný web, které ovlivňují jeho autoritu a důvěryhodnost.

  • zpětné odkazy – nejdůležitější faktor,
  • autorita domény,
  • sdílení na sociálních sítích,
  • zmínky o značce,
  • recenze a hodnocení.
Kvalitní zpětné odkazy jsou cennější než velké množství nekvalitních.

3.1 Typy zpětných odkazů

  • dofollow – předávají autoritu,
  • nofollow – nepředávají autoritu, ale mohou přivést návštěvnost,
  • UGC – odkazy z komentářů, fór,
  • sponzorované odkazy.

3.2 Linkbuilding

  • guest‑posting,
  • PR články,
  • katalogy firem,
  • spolupráce s influencery,
  • výměna odkazů.

4. Technické SEO

Technické SEO řeší technické parametry webu, které ovlivňují indexaci, rychlost a použitelnost.

4.1 Rychlost načítání

  • optimalizace obrázků,
  • minifikace CSS/JS,
  • cache,
  • CDN.

4.2 Mobilní verze

Google používá mobile‑first indexing.

4.3 HTTPS

Bezpečnostní certifikát je nutností.

4.4 Sitemap

/sitemap.xml

4.5 Robots.txt

User-agent: *
Disallow: /admin/

4.6 Canonical tag

<link rel="canonical" href="https://example.com/clanek">

4.7 Core Web Vitals

  • LCP – Largest Contentful Paint
  • FID – First Input Delay
  • CLS – Cumulative Layout Shift
Core Web Vitals jsou klíčové pro uživatelský komfort a Google je hodnotí jako důležitý signál kvality.

5. Indexace

Aby se stránka zobrazila ve výsledcích vyhledávání, musí být nejprve procházená a uložená do indexu.

5.1 Crawling

Robot prochází web a sleduje odkazy.

5.2 Index

Vyhledávač ukládá obsah do své databáze.

5.3 Ranking

Vyhledávač řadí výsledky podle relevance a kvality.

Google Search Console umožňuje kontrolovat indexaci a odesílat sitemapu.

6. Klíčová slova

Klíčová slova jsou fráze, které uživatelé vyhledávají. Je důležité je přirozeně začlenit do obsahu.

6.1 Analýza klíčových slov

  • Google Keyword Planner,
  • Ahrefs,
  • Semrush,
  • Collabim.

6.2 Typy klíčových slov

  • short‑tail – obecná,
  • long‑tail – specifická, méně konkurenční.

6.3 Keyword stuffing

Nadměrné používání klíčových slov vede k penalizaci.

7. Shrnutí tématu 16

  • SEO zlepšuje viditelnost webu ve vyhledávačích.
  • On‑page řeší obsah, strukturu a metadata.
  • Off‑page řeší zpětné odkazy a autoritu.
  • Technické SEO zajišťuje rychlost, bezpečnost a správnou indexaci.
  • Kvalitní obsah je nejdůležitější faktor.
VAP Téma 17

Téma 17 – JavaScript

JavaScript Proměnné Funkce Objekty DOM Události ES6

1. Co je JavaScript

JavaScript je programovací jazyk, který umožňuje dynamické chování webových stránek. Běží v prohlížeči a umožňuje reagovat na události, měnit obsah stránky, pracovat s daty a komunikovat se serverem.

  • je interpretovaný,
  • je dynamicky typovaný,
  • je multiplatformní,
  • je nejpoužívanější jazyk na světě.
JavaScript je jedním ze tří základních pilířů webu: HTML (struktura), CSS (vzhled), JavaScript (chování).

2. Základní syntaxe

2.1 Výpis do konzole

console.log("Ahoj světe");

2.2 Komentáře

// jednořádkový komentář
/* víceřádkový
   komentář */

2.3 Proměnné

let x = 10;
const PI = 3.14;
var y = 20; // starší způsob
var se dnes nedoporučuje — má neintuitivní chování (hoisting, funkční scope).

2.4 Datové typy

  • string
  • number
  • boolean
  • null
  • undefined
  • object
  • symbol
  • bigint

2.5 Operátory

+, -, *, /, %, **

2.6 Porovnání

==   // porovnání s konverzí
===  // striktní porovnání
Používej === — vyhneš se chybám způsobeným automatickou konverzí typů.

3. Funkce

3.1 Deklarace funkce

function soucet(a, b) {
  return a + b;
}

3.2 Anonymní funkce

const f = function() {
  console.log("Ahoj");
};

3.3 Arrow funkce

const soucet = (a, b) => a + b;

3.4 Parametry a návratová hodnota

Funkce může mít libovolný počet parametrů a vracet libovolný typ.

3.5 Callback funkce

setTimeout(() => {
  console.log("Hotovo");
}, 1000);
Callback funkce jsou základem asynchronního programování v JavaScriptu.

4. Objekty

4.1 Vytvoření objektu

const osoba = {
  jmeno: "Adam",
  vek: 20,
  pozdrav() {
    console.log("Ahoj");
  }
};

4.2 Přístup k vlastnostem

osoba.jmeno;
osoba["vek"];

4.3 Třídy (ES6)

class Clovek {
  constructor(jmeno) {
    this.jmeno = jmeno;
  }
  pozdrav() {
    console.log("Ahoj, já jsem " + this.jmeno);
  }
}

4.4 Dědičnost

class Student extends Clovek {
  constructor(jmeno, obor) {
    super(jmeno);
    this.obor = obor;
  }
}

5. Pole

5.1 Vytvoření pole

const pole = [1, 2, 3];

5.2 Metody polí

  • push()
  • pop()
  • shift()
  • unshift()
  • map()
  • filter()
  • reduce()

5.3 map()

const dvojnasobky = pole.map(x => x * 2);

5.4 filter()

const sude = pole.filter(x => x % 2 === 0);

5.5 reduce()

const soucet = pole.reduce((a, b) => a + b, 0);

6. DOM – Document Object Model

6.1 Výběr prvků

document.getElementById("id");
document.querySelector(".trida");
document.querySelectorAll("p");

6.2 Změna obsahu

element.textContent = "Nový text";

6.3 Změna stylu

element.style.color = "red";

6.4 Vytváření prvků

const div = document.createElement("div");
div.textContent = "Ahoj";
document.body.appendChild(div);
DOM umožňuje dynamicky měnit obsah stránky bez jejího znovunačtení.

7. Události

7.1 Kliknutí

button.addEventListener("click", () => {
  console.log("Klik!");
});

7.2 Klávesnice

document.addEventListener("keydown", e => {
  console.log(e.key);
});

7.3 Formuláře

form.addEventListener("submit", e => {
  e.preventDefault();
});

8. Asynchronní JavaScript

8.1 setTimeout()

setTimeout(() => console.log("Hotovo"), 1000);

8.2 Promises

const p = new Promise(resolve => {
  resolve("OK");
});

8.3 async/await

async function nacti() {
  const data = await fetch("data.json");
}
async/await výrazně zjednodušuje práci s asynchronním kódem.

9. Fetch API

9.1 Základní použití

fetch("data.json")
  .then(r => r.json())
  .then(data => console.log(data));

9.2 async/await

const data = await fetch("data.json").then(r => r.json());

10. ES6+ funkce

10.1 Destrukturalizace

const { jmeno, vek } = osoba;

10.2 Spread operátor

const kopie = { ...osoba };

10.3 Template stringy

`Ahoj ${jmeno}`

11. Shrnutí tématu 17

  • JavaScript je jazyk pro dynamické webové aplikace.
  • Pracuje s proměnnými, funkcemi, objekty a poli.
  • Umožňuje manipulaci s DOM.
  • Reaguje na události.
  • Podporuje asynchronní programování.
  • Moderní ES6 přináší mnoho vylepšení.
VAP Téma 18

Téma 18 – JavaScript DOM

DOM Selektory Manipulace Události Atributy Styly Tvorba prvků

1. Co je DOM

DOM (Document Object Model) je objektová reprezentace HTML dokumentu. Prohlížeč převede HTML do stromové struktury, kde každý prvek je objekt, se kterým lze pracovat pomocí JavaScriptu.

  • umožňuje číst a měnit obsah stránky,
  • umožňuje reagovat na události,
  • umožňuje dynamicky vytvářet prvky,
  • umožňuje měnit styly a atributy.
DOM je základ pro interaktivní webové aplikace — bez něj by JavaScript nemohl měnit obsah stránky.

2. Výběr prvků

2.1 getElementById()

const el = document.getElementById("hlavicka");

2.2 getElementsByClassName()

const prvky = document.getElementsByClassName("box");

2.3 getElementsByTagName()

const odstavce = document.getElementsByTagName("p");

2.4 querySelector()

const el = document.querySelector(".menu li a");

2.5 querySelectorAll()

const polozky = document.querySelectorAll("li");
querySelector a querySelectorAll jsou nejpoužívanější — podporují CSS selektory.

3. Manipulace s obsahem

3.1 textContent

element.textContent = "Nový text";

3.2 innerHTML

element.innerHTML = "<b>Tučný text</b>";
innerHTML může být nebezpečné — umožňuje vložit škodlivý kód (XSS).

3.3 value (formuláře)

input.value = "Ahoj";

4. Manipulace se styly

4.1 Inline styly

element.style.color = "red";

4.2 Přidání třídy

element.classList.add("aktivni");

4.3 Odebrání třídy

element.classList.remove("aktivni");

4.4 Přepínání třídy

element.classList.toggle("dark-mode");
classList je moderní a bezpečný způsob práce s CSS třídami.

5. Atributy

5.1 getAttribute()

const odkaz = element.getAttribute("href");

5.2 setAttribute()

element.setAttribute("src", "obrazek.png");

5.3 removeAttribute()

element.removeAttribute("disabled");

5.4 dataset (data-* atributy)

element.dataset.id = "123";

6. Tvorba prvků

6.1 createElement()

const div = document.createElement("div");

6.2 Nastavení obsahu

div.textContent = "Ahoj";

6.3 Přidání do stránky

document.body.appendChild(div);

6.4 insertBefore()

parent.insertBefore(novy, existujici);

6.5 insertAdjacentHTML()

element.insertAdjacentHTML("beforeend", "<p>Text</p>");
insertAdjacentHTML je rychlejší než innerHTML — nepřepisuje celý obsah.

7. Mazání prvků

7.1 remove()

element.remove();

7.2 removeChild()

parent.removeChild(element);

8. Události

8.1 addEventListener()

button.addEventListener("click", () => {
  console.log("Klik!");
});

8.2 Události myši

  • click
  • dblclick
  • mouseover
  • mouseout

8.3 Události klávesnice

document.addEventListener("keydown", e => {
  console.log(e.key);
});

8.4 Události formulářů

form.addEventListener("submit", e => {
  e.preventDefault();
});
Nikdy nepoužívej onclick="..." v HTML — je to zastaralé a nepřehledné.

9. Traversing – pohyb ve stromu

9.1 Rodič

element.parentElement;

9.2 Děti

element.children;

9.3 Sourozenci

element.nextElementSibling;
element.previousElementSibling;

10. DOM a CSS

10.1 getComputedStyle()

const styl = getComputedStyle(element);
console.log(styl.color);

10.2 Dynamické animace

element.style.transition = "all 0.3s";
element.style.opacity = "0";

11. DOM a šablony

11.1 template tag

<template id="tpl">
  <li>Položka</li>
</template>

11.2 Klonování

const tpl = document.getElementById("tpl");
const clone = tpl.content.cloneNode(true);
ul.appendChild(clone);

12. Shrnutí tématu 18

  • DOM je stromová struktura HTML dokumentu.
  • JavaScript umožňuje vybírat prvky pomocí selektorů.
  • Lze měnit obsah, styly, atributy i strukturu stránky.
  • Události umožňují reagovat na akce uživatele.
  • DOM je základ interaktivních webových aplikací.
VAP Téma 19

Téma 19 – JavaScript: Události a funkce

Události Funkce Callbacky Arrow funkce Asynchronní JS Event Loop

1. Co jsou události

Události jsou akce, které se stanou na stránce — kliknutí, pohyb myši, stisk klávesy, odeslání formuláře, načtení stránky atd. JavaScript může na tyto události reagovat pomocí tzv. event listenerů.

  • umožňují interaktivitu,
  • umožňují reagovat na uživatele,
  • umožňují dynamicky měnit DOM,
  • jsou základem moderních webových aplikací.
Události jsou klíčové pro dynamické weby — bez nich by JavaScript neměl kdy reagovat.

2. addEventListener()

2.1 Základní použití

button.addEventListener("click", () => {
  console.log("Klik!");
});

2.2 Struktura

element.addEventListener(typUdálosti, funkce);

2.3 Více listenerů na jednom prvku

button.addEventListener("click", f1);
button.addEventListener("click", f2);
addEventListener je moderní způsob — nikdy nepoužívej onclick="..." v HTML.

3. Typy událostí

3.1 Události myši

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout

3.2 Události klávesnice

document.addEventListener("keydown", e => {
  console.log(e.key);
});

3.3 Události formulářů

form.addEventListener("submit", e => {
  e.preventDefault();
});

3.4 Události okna

  • load
  • resize
  • scroll

4. Funkce v JavaScriptu

4.1 Deklarace funkce

function pozdrav() {
  console.log("Ahoj");
}

4.2 Anonymní funkce

const f = function() {
  console.log("Ahoj");
};

4.3 Arrow funkce

const soucet = (a, b) => a + b;

4.4 Parametry a návratová hodnota

Funkce může mít libovolný počet parametrů a vracet libovolný typ.

4.5 Defaultní parametry

function ahoj(jmeno = "host") {
  console.log("Ahoj " + jmeno);
}

5. Callback funkce

Callback je funkce předaná jako argument jiné funkci. Používá se hlavně u událostí a asynchronního kódu.

setTimeout(() => {
  console.log("Hotovo");
}, 1000);
Callbacky jsou základ asynchronního JavaScriptu.

6. Scope – rozsah platnosti

6.1 Globální scope

let x = 10; // dostupné všude

6.2 Lokální scope

function f() {
  let y = 20; // dostupné jen uvnitř funkce
}

6.3 Block scope

{
  let z = 30; // dostupné jen v bloku
}
var ignoruje block scope — proto se dnes nepoužívá.

7. Closures

Closure je funkce, která si pamatuje proměnné z místa svého vzniku, i když se volá jinde.

function counter() {
  let x = 0;
  return () => {
    x++;
    console.log(x);
  };
}

const c = counter();
c(); // 1
c(); // 2
Closures umožňují vytvářet soukromé proměnné.

8. Asynchronní funkce

8.1 Promises

const p = new Promise(resolve => {
  resolve("OK");
});

8.2 async/await

async function nacti() {
  const data = await fetch("data.json");
}

8.3 Event Loop

Event Loop řídí pořadí vykonávání kódu — synchronní kód má přednost, asynchronní se zařazuje do fronty.

Díky Event Loop může JavaScript působit jako vícevláknový, i když běží v jednom vlákně.

9. Funkce jako objekt

Funkce v JavaScriptu jsou objekty — mohou mít vlastnosti, metody a lze je ukládat do proměnných.

function f() {}
f.x = 10;

10. Rekurze

function faktorial(n) {
  if (n === 1) return 1;
  return n * faktorial(n - 1);
}
Rekurze musí mít podmínku ukončení — jinak způsobí pád programu.

11. Shrnutí tématu 19

  • Události umožňují reagovat na akce uživatele.
  • addEventListener je moderní způsob registrace událostí.
  • Funkce jsou základní stavební prvek JavaScriptu.
  • Callbacky umožňují asynchronní chování.
  • Scope určuje platnost proměnných.
  • Closures umožňují soukromé proměnné.
  • Asynchronní funkce zjednodušují práci s Promise.
VAP Téma 20

Téma 20 – PHP

PHP Server Formuláře Databáze Soubory Funkce Pole

1. Co je PHP

PHP (Hypertext Preprocessor) je serverový skriptovací jazyk používaný pro tvorbu dynamických webových aplikací. Kód se vykonává na serveru a výsledek (HTML) se odešle do prohlížeče.

  • běží na serveru,
  • generuje HTML, JSON, XML…,
  • pracuje s databázemi,
  • zpracovává formuláře,
  • umí pracovat se soubory.
PHP je stále jedním z nejpoužívanějších jazyků pro backend — používá ho WordPress, Facebook (původně), Wikipedia a mnoho dalších.

2. Základní syntaxe

2.1 PHP blok

<?php
echo "Ahoj světe";
?>

2.2 Komentáře

// jednořádkový
# také jednořádkový
/* víceřádkový */

2.3 Proměnné

$x = 10;
$jmeno = "Adam";

2.4 Datové typy

  • string
  • int
  • float
  • bool
  • array
  • object
  • null

2.5 Konkatenace

$text = "Ahoj " . "světe";

2.6 Výpis

echo "Text";
print "Text";

3. Podmínky a cykly

3.1 if

if ($x > 10) {
  echo "Větší";
}

3.2 else

if ($x > 10) {
  ...
} else {
  ...
}

3.3 switch

switch ($x) {
  case 1: echo "Jedna"; break;
  default: echo "Jiné";
}

3.4 for

for ($i = 0; $i < 10; $i++) {
  echo $i;
}

3.5 foreach

foreach ($pole as $prvek) {
  echo $prvek;
}

4. Pole

4.1 Indexované pole

$pole = [1, 2, 3];

4.2 Asociativní pole

$osoba = [
  "jmeno" => "Adam",
  "vek" => 20
];

4.3 Víceúrovňová pole

$matice = [
  [1, 2],
  [3, 4]
];

4.4 Užitečné funkce

  • count()
  • array_push()
  • array_merge()
  • in_array()
  • array_keys()

5. Funkce

5.1 Deklarace

function soucet($a, $b) {
  return $a + $b;
}

5.2 Defaultní parametry

function pozdrav($jmeno = "host") {
  echo "Ahoj $jmeno";
}

5.3 Anonymní funkce

$f = function($x) {
  return $x * 2;
};

5.4 Funkce jako argument

function vypis($f) {
  echo $f(10);
}

6. Formuláře

6.1 GET

<form method="get">
  <input name="jmeno">
</form>
$jmeno = $_GET["jmeno"];

6.2 POST

<form method="post">
  <input name="email">
</form>
$email = $_POST["email"];
Vstupy je nutné validovat — jinak hrozí XSS a SQL injection.

7. Práce se soubory

7.1 Čtení

$obsah = file_get_contents("soubor.txt");

7.2 Zápis

file_put_contents("soubor.txt", "Text");

7.3 Otevření souboru

$f = fopen("soubor.txt", "r");

8. Práce s databází (MySQLi)

8.1 Připojení

$conn = new mysqli("localhost", "root", "", "test");

8.2 Dotaz

$result = $conn->query("SELECT * FROM uzivatele");

8.3 Výpis

while ($row = $result->fetch_assoc()) {
  echo $row["jmeno"];
}
Nikdy nevkládej proměnné přímo do SQL — používej prepared statements.

9. Sessions

9.1 Start session

session_start();

9.2 Uložení hodnoty

$_SESSION["user"] = "Adam";

9.3 Smazání session

session_destroy();

10. Cookies

10.1 Nastavení

setcookie("jmeno", "Adam", time() + 3600);

10.2 Čtení

$jmeno = $_COOKIE["jmeno"];

11. Základy OOP v PHP

11.1 Třída

class Clovek {
  public $jmeno;

  function __construct($jmeno) {
    $this->jmeno = $jmeno;
  }
}

11.2 Dědičnost

class Student extends Clovek {
  public $obor;
}

12. Shrnutí tématu 20

  • PHP je serverový jazyk pro tvorbu dynamických webů.
  • Pracuje s proměnnými, poli, funkcemi a formuláři.
  • Umí pracovat se soubory a databázemi.
  • Podporuje sessions a cookies.
  • Má podporu OOP.
VAP Téma 21

Téma 21 – PHP: Objekty (OOP)

OOP Třídy Objekty Dědičnost Rozhraní Abstrakce Magické metody

1. Co je OOP v PHP

OOP (Object-Oriented Programming) je způsob programování, který používá objekty — struktury obsahující data (vlastnosti) a funkce (metody).

  • zlepšuje přehlednost kódu,
  • umožňuje znovupoužití,
  • umožňuje dědičnost,
  • umožňuje zapouzdření,
  • umožňuje polymorfismus.
PHP podporuje OOP od verze 5.0 — dnes je to standardní způsob psaní větších aplikací.

2. Třídy a objekty

2.1 Definice třídy

class Clovek {
  public $jmeno;
  public $vek;

  public function pozdrav() {
    echo "Ahoj, já jsem $this->jmeno";
  }
}

2.2 Vytvoření objektu

$c = new Clovek();
$c->jmeno = "Adam";
$c->pozdrav();

2.3 $this

Klíčové slovo $this odkazuje na aktuální objekt.

3. Vlastnosti (properties)

3.1 Deklarace

class Auto {
  public $barva = "červená";
}

3.2 Viditelnost

  • public – přístupné odkudkoliv
  • protected – přístupné v třídě a potomcích
  • private – přístupné pouze v třídě
private chrání data před nechtěnou změnou — je to základ zapouzdření.

4. Metody

4.1 Deklarace

public function vypis() {
  echo "Text";
}

4.2 Parametry

public function nastavVek($vek) {
  $this->vek = $vek;
}

4.3 Návratová hodnota

public function getVek() {
  return $this->vek;
}

5. Konstruktory a destruktory

5.1 Konstruktor

class Clovek {
  public function __construct($jmeno) {
    $this->jmeno = $jmeno;
  }
}

5.2 Destruktor

public function __destruct() {
  echo "Objekt zničen";
}
Konstruktor se volá při vytvoření objektu, destruktor při jeho zničení.

6. Dědičnost

6.1 extends

class Student extends Clovek {
  public $obor;
}

6.2 Přepisování metod

class Student extends Clovek {
  public function pozdrav() {
    echo "Ahoj, já jsem student $this->jmeno";
  }
}

6.3 parent::

parent::__construct($jmeno);
Dědičnost umožňuje vytvářet specializované třídy bez duplikace kódu.

7. Abstraktní třídy

7.1 Definice

abstract class Zvire {
  abstract public function zvuk();
}

7.2 Implementace

class Pes extends Zvire {
  public function zvuk() {
    echo "Haf!";
  }
}
Abstraktní třídy nemohou být instancovány — slouží jako základ pro potomky.

8. Rozhraní (interfaces)

8.1 Definice

interface Tvar {
  public function obsah();
}

8.2 Implementace

class Kruh implements Tvar {
  public function obsah() {
    return 3.14 * 5 * 5;
  }
}
Třída může implementovat více rozhraní — PHP nepodporuje vícenásobnou dědičnost tříd.

9. Statické vlastnosti a metody

9.1 static

class Matika {
  public static $pi = 3.14;
}

9.2 Přístup

echo Matika::$pi;

9.3 Statická metoda

public static function soucet($a, $b) {
  return $a + $b;
}

10. Magické metody

  • __construct() – konstruktor
  • __destruct() – destruktor
  • __toString() – převod na string
  • __get() – čtení neexistující vlastnosti
  • __set() – zápis neexistující vlastnosti
  • __call() – volání neexistující metody

10.1 __toString()

public function __toString() {
  return $this->jmeno;
}

11. Namespaces

11.1 Definice

namespace App\Models;

11.2 Použití

use App\Models\User;
Namespaces zabraňují kolizím názvů tříd v rozsáhlých aplikacích.

12. Autoloading

12.1 spl_autoload_register()

spl_autoload_register(function($class) {
  include $class . ".php";
});

12.2 Composer autoload

composer dump-autoload

13. Shrnutí tématu 21

  • OOP v PHP umožňuje strukturovaný a přehledný kód.
  • Třídy obsahují vlastnosti a metody.
  • Dědičnost umožňuje znovupoužití kódu.
  • Rozhraní definují povinné metody.
  • Abstraktní třídy slouží jako základ.
  • Magické metody umožňují speciální chování.
  • Namespaces zabraňují kolizím názvů.
VAP Téma 22

Téma 22 – PHP: Přenos dat (GET, POST, SESSION, COOKIES)

GET POST SESSION COOKIES Formuláře Superglobální pole

1. Přenos dat v PHP

PHP používá několik způsobů, jak přenášet data mezi klientem (prohlížečem) a serverem. Nejčastější jsou:

  • GET – data v URL,
  • POST – data v těle požadavku,
  • SESSION – data uložená na serveru,
  • COOKIES – data uložená v prohlížeči.
GET a POST slouží ke krátkodobému přenosu dat, SESSION a COOKIES k dlouhodobému uchování.

2. GET

2.1 Co je GET

GET posílá data v URL. Používá se pro:

  • vyhledávání,
  • filtrování,
  • přechod mezi stránkami,
  • necitlivá data.

2.2 Příklad formuláře

<form method="get">
  <input name="jmeno">
  <button>Odeslat</button>
</form>

2.3 Zpracování v PHP

$jmeno = $_GET["jmeno"];

2.4 URL příklad

page.php?jmeno=Adam&vek=20
GET není bezpečný — data jsou vidět v URL.

3. POST

3.1 Co je POST

POST posílá data v těle HTTP požadavku. Používá se pro:

  • přihlašování,
  • registrace,
  • odesílání formulářů,
  • citlivá data.

3.2 Příklad formuláře

<form method="post">
  <input name="email">
  <button>Odeslat</button>
</form>

3.3 Zpracování v PHP

$email = $_POST["email"];
POST je bezpečnější než GET, ale stále vyžaduje validaci.

4. SESSION

4.1 Co je SESSION

Session ukládá data na serveru. Každý uživatel má unikátní session ID uložené v cookie.

4.2 Start session

session_start();

4.3 Uložení hodnoty

$_SESSION["user"] = "Adam";

4.4 Čtení hodnoty

echo $_SESSION["user"];

4.5 Smazání session

session_destroy();
Session je ideální pro přihlášení uživatele.

5. COOKIES

5.1 Co jsou cookies

Cookies jsou malé textové soubory uložené v prohlížeči uživatele.

5.2 Nastavení cookie

setcookie("jmeno", "Adam", time() + 3600);

5.3 Čtení cookie

$jmeno = $_COOKIE["jmeno"];

5.4 Smazání cookie

setcookie("jmeno", "", time() - 3600);
Cookies jsou viditelné uživateli — nikdy do nich neukládej hesla.

6. Bezpečnost

6.1 XSS

echo htmlspecialchars($text);

6.2 SQL injection

$stmt = $conn->prepare("SELECT * FROM uzivatele WHERE jmeno = ?");
$stmt->bind_param("s", $jmeno);

6.3 Validace vstupů

  • filter_input()
  • ctype_digit()
  • preg_match()
Nikdy nevěř vstupům od uživatele — vždy validuj a filtruj.

7. Shrnutí tématu 22

  • GET posílá data v URL.
  • POST posílá data v těle požadavku.
  • SESSION ukládá data na serveru.
  • COOKIES ukládají data v prohlížeči.
  • Bezpečnost je klíčová — validace, filtrování, prepared statements.
VAP Téma 23

Téma 23 – PHP: Bezpečnost aplikací

Bezpečnost XSS SQL Injection CSRF Hesla Session Cookies

1. Proč je bezpečnost důležitá

PHP aplikace pracují s citlivými daty — hesla, e‑maily, osobní údaje, platební informace. Útočníci se snaží tyto aplikace zneužít pomocí různých technik.

  • krádež dat,
  • získání přístupu k účtům,
  • poškození databáze,
  • zneužití serveru,
  • vložení škodlivého kódu.
Nejčastější příčinou útoků je špatná validace vstupů a neznalost bezpečnostních zásad.

2. Validace a filtrování vstupů

2.1 Proč validovat

Uživatel může poslat jakákoliv data — i škodlivá. Nikdy nevěř vstupům od uživatele.

2.2 htmlspecialchars()

echo htmlspecialchars($text);

2.3 filter_input()

$email = filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);

2.4 preg_match()

if (preg_match("/^[0-9]+$/", $cislo)) { ... }
Validace je první obranná linie proti XSS a SQL injection.

3. XSS – Cross‑Site Scripting

3.1 Co je XSS

Útočník vloží JavaScript do stránky, který se spustí u ostatních uživatelů.

3.2 Nebezpečný příklad

<input name="jmeno">
echo $_GET["jmeno"];

3.3 Bezpečný příklad

echo htmlspecialchars($_GET["jmeno"]);

3.4 Typy XSS

  • Reflected XSS
  • Stored XSS
  • DOM‑based XSS
XSS umožňuje ukrást session, přesměrovat uživatele nebo manipulovat s obsahem stránky.

4. SQL Injection

4.1 Co je SQL injection

Útočník vloží do SQL dotazu škodlivý kód.

4.2 Nebezpečný příklad

$sql = "SELECT * FROM uzivatele WHERE jmeno = '$jmeno'";

4.3 Bezpečný příklad – prepared statements

$stmt = $conn->prepare("SELECT * FROM uzivatele WHERE jmeno = ?");
$stmt->bind_param("s", $jmeno);
$stmt->execute();
Prepared statements jsou jediný správný způsob práce s databází.

5. CSRF – Cross‑Site Request Forgery

5.1 Co je CSRF

Útočník přiměje uživatele odeslat požadavek, který nechtěl.

5.2 Ochrana pomocí tokenu

$_SESSION["token"] = bin2hex(random_bytes(32));

5.3 Ověření tokenu

if ($_POST["token"] !== $_SESSION["token"]) die("CSRF!");
CSRF je nebezpečné hlavně u formulářů typu „změna hesla“, „smazání účtu“.

6. Bezpečné ukládání hesel

6.1 Nikdy neukládej hesla v plaintextu

6.2 password_hash()

$hash = password_hash($heslo, PASSWORD_DEFAULT);

6.3 Ověření hesla

if (password_verify($heslo, $hash)) { ... }
password_hash používá moderní algoritmy (bcrypt/argon2).

7. Bezpečné session

7.1 session_regenerate_id()

session_regenerate_id(true);

7.2 Nastavení cookie pro session

session_set_cookie_params([
  "httponly" => true,
  "secure" => true,
  "samesite" => "Strict"
]);
HttpOnly zabrání JavaScriptu číst session cookie — ochrana proti XSS.

8. Bezpečné cookies

8.1 Nastavení bezpečných cookies

setcookie("token", $token, [
  "expires" => time() + 3600,
  "secure" => true,
  "httponly" => true,
  "samesite" => "Strict"
]);

8.2 Nebezpečí cookies

  • mohou být ukradeny XSS útokem,
  • uživatel je může měnit,
  • nejsou vhodné pro citlivá data.

9. Bezpečnostní zásady

  • validuj všechny vstupy,
  • používej prepared statements,
  • používej htmlspecialchars,
  • používej CSRF tokeny,
  • ukládej hesla pomocí password_hash,
  • používej bezpečné session,
  • neukládej citlivá data do cookies,
  • skrývej chyby před uživatelem,
  • používej HTTPS.
Největší bezpečnostní riziko je programátor, který nevaliduje vstupy.

10. Shrnutí tématu 23

  • Bezpečnost je klíčová součást PHP aplikací.
  • XSS řešíme pomocí htmlspecialchars.
  • SQL injection řešíme pomocí prepared statements.
  • CSRF řešíme pomocí tokenů.
  • Hesla ukládáme pomocí password_hash.
  • Session a cookies musí být správně nastavené.
  • Validace vstupů je základ.
VAP Téma 24

Téma 24 – PHP: Externí data (soubory, databáze)

Soubory Databáze MySQL PDO MySQLi Prepared

1. Externí data v PHP

PHP umí pracovat s externími daty z různých zdrojů:

  • soubory (textové, CSV, JSON),
  • adresáře,
  • databáze (MySQL, PostgreSQL, SQLite),
  • API (REST, JSON),
  • vzdálené servery.
Externí data jsou klíčová pro dynamické webové aplikace — ukládání uživatelů, produktů, objednávek, logů atd.

2. Práce se soubory

2.1 file_get_contents()

$obsah = file_get_contents("soubor.txt");

2.2 file_put_contents()

file_put_contents("soubor.txt", "Nový obsah");

2.3 fopen(), fread(), fwrite()

$f = fopen("soubor.txt", "r");
$obsah = fread($f, filesize("soubor.txt"));
fclose($f);

2.4 Přidání do souboru

file_put_contents("log.txt", "Záznam\n", FILE_APPEND);

2.5 Kontrola existence

if (file_exists("data.txt")) { ... }

2.6 Mazání souboru

unlink("soubor.txt");
Při práci se soubory vždy kontroluj oprávnění a existenci souboru.

3. Práce s adresáři

3.1 Vytvoření adresáře

mkdir("uploads");

3.2 Výpis souborů

$soubory = scandir("uploads");

3.3 Smazání adresáře

rmdir("uploads");
PHP umožňuje vytvářet i mazat celé adresářové struktury.

4. JSON

4.1 Čtení JSON

$json = file_get_contents("data.json");
$data = json_decode($json, true);

4.2 Zápis JSON

$json = json_encode($data, JSON_PRETTY_PRINT);
file_put_contents("data.json", $json);

5. Databáze – MySQL

5.1 Co je databáze

Databáze ukládá strukturovaná data — tabulky, řádky, sloupce.

5.2 Připojení pomocí MySQLi

$conn = new mysqli("localhost", "root", "", "test");

5.3 Kontrola připojení

if ($conn->connect_error) die("Chyba DB");

5.4 SELECT

$result = $conn->query("SELECT * FROM uzivatele");

5.5 Výpis dat

while ($row = $result->fetch_assoc()) {
  echo $row["jmeno"];
}

5.6 INSERT

$conn->query("INSERT INTO uzivatele (jmeno) VALUES ('Adam')");

5.7 UPDATE

$conn->query("UPDATE uzivatele SET vek = 20 WHERE id = 1");

5.8 DELETE

$conn->query("DELETE FROM uzivatele WHERE id = 1");
Nikdy nevkládej proměnné přímo do SQL — hrozí SQL injection.

6. Prepared statements (MySQLi)

6.1 Bezpečný SELECT

$stmt = $conn->prepare("SELECT * FROM uzivatele WHERE jmeno = ?");
$stmt->bind_param("s", $jmeno);
$stmt->execute();

6.2 Bezpečný INSERT

$stmt = $conn->prepare("INSERT INTO uzivatele (jmeno, vek) VALUES (?, ?)");
$stmt->bind_param("si", $jmeno, $vek);
$stmt->execute();
Prepared statements jsou jediný správný způsob práce s databází.

7. PDO – moderní způsob práce s DB

7.1 Připojení

$pdo = new PDO("mysql:host=localhost;dbname=test", "root", "");

7.2 SELECT

$stmt = $pdo->prepare("SELECT * FROM uzivatele WHERE vek > ?");
$stmt->execute([18]);
$data = $stmt->fetchAll();

7.3 INSERT

$stmt = $pdo->prepare("INSERT INTO uzivatele (jmeno) VALUES (?)");
$stmt->execute([$jmeno]);

7.4 Výhody PDO

  • podpora více databází,
  • jednotné API,
  • bezpečné prepared statements,
  • snadné zpracování výsledků.

8. Bezpečnost při práci s externími daty

8.1 Validace vstupů

filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);

8.2 Ochrana proti XSS

htmlspecialchars($text);

8.3 Ochrana proti SQL injection

Používej prepared statements.

8.4 Oprávnění souborů

chmod("soubor.txt", 0644);
Externí data jsou nejčastější zdroj útoků — validace je nutnost.

9. Shrnutí tématu 24

  • PHP umí pracovat se soubory, adresáři, JSON a databázemi.
  • MySQLi a PDO jsou hlavní způsoby práce s databází.
  • Prepared statements chrání před SQL injection.
  • file_get_contents a file_put_contents jsou nejjednodušší práce se soubory.
  • PDO je moderní a univerzální řešení.
  • Bezpečnost je klíčová — validace, filtrování, oprávnění.
VAP Téma 25

Téma 25 – Frameworky při vývoji webu

Frameworky MVC Frontend Backend Full‑stack Laravel React

1. Co je framework

Framework je sada nástrojů, knihoven a pravidel, která usnadňuje a zrychluje vývoj aplikací. Místo psaní všeho od nuly využíváme připravenou kostru aplikace.

  • definuje strukturu projektu,
  • obsahuje hotové komponenty (router, šablony, ORM…),
  • prosazuje osvědčené postupy (best practices),
  • zvyšuje bezpečnost a udržovatelnost kódu.
Framework není kouzlo — je to organizovaný balík kódu, který ti šetří čas a nutí tě psát systematicky.

2. Proč používat frameworky

  • rychlejší vývoj (hotové moduly),
  • méně chyb (ověřený kód),
  • lepší bezpečnost (ochrana proti XSS, CSRF, SQL injection),
  • standardizovaná struktura projektu,
  • snadnější týmová spolupráce,
  • velká komunita a dokumentace.
Na maturitě můžeš zdůraznit: „Frameworky šetří čas, zvyšují bezpečnost a sjednocují strukturu projektu.“

3. Typy frameworků

3.1 Frontend frameworky / knihovny

  • React – knihovna pro tvorbu UI, komponentový přístup, JSX, virtuální DOM.
  • Angular – plnohodnotný framework, TypeScript, dependency injection, routing.
  • Vue.js – lehký, jednoduchý na naučení, komponenty, reaktivita.

3.2 CSS frameworky

  • Bootstrap – grid systém, komponenty (buttony, navbary, modaly), responzivita.
  • Tailwind CSS – utility‑first, třídy typu flex, p-4, text-center.

3.3 Backend frameworky

  • Laravel (PHP) – MVC, routing, Blade šablony, Eloquent ORM, migrace.
  • Symfony (PHP) – modulární, robustní, používá ho i Laravel uvnitř.
  • Express (Node.js) – minimalistický, REST API, middleware.

3.4 Full‑stack frameworky

  • Next.js (React + Node) – SSR, SSG, routing.
  • Nuxt.js (Vue) – podobně jako Next, ale pro Vue.

4. MVC architektura

Mnoho backend frameworků používá architekturu MVC (Model–View–Controller).

4.1 Model

Práce s daty a databází (např. třída User reprezentuje tabulku users).

4.2 View

Šablony – HTML s proměnnými, které se vykreslí uživateli.

4.3 Controller

Logika – přijímá požadavky, volá modely, vrací view.

MVC odděluje logiku, data a prezentaci — kód je přehlednější a lépe se testuje.

5. Laravel – příklad PHP frameworku

5.1 Routing

// routes/web.php
Route::get("/users", [UserController::class, "index"]);

5.2 Controller

class UserController extends Controller {
  public function index() {
    $users = User::all();
    return view("users.index", compact("users"));
  }
}

5.3 Model (Eloquent)

class User extends Model {
  protected $table = "users";
}

5.4 View (Blade)

@foreach($users as $user)
  <p>{{ $user->name }}</p>
@endforeach
Laravel má vše: routing, ORM, šablony, migrace, autentizaci, validaci, fronty, mailing…

6. React – příklad frontend knihovny

6.1 Komponenta

function Button(props) {
  return <button>{props.text}</button>;
}

6.2 Stav (state)

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

React umožňuje tvořit UI jako strom komponent, které mají stav a props.

7. Výhody a nevýhody frameworků

7.1 Výhody

  • rychlejší vývoj,
  • méně chyb,
  • lepší bezpečnost,
  • standardizovaná struktura,
  • snadnější údržba a rozšiřování.

7.2 Nevýhody

  • křivka učení (hodně konceptů najednou),
  • overkill pro malé projekty,
  • závislost na konkrétním frameworku (lock‑in),
  • může být pomalejší než čistý kód, pokud se použije špatně.
Na malé statické stránky je framework zbytečný, ale pro větší aplikace je téměř nutnost.

8. Kdy framework použít a kdy ne

8.1 Kdy ano

  • větší projekt,
  • týmová práce,
  • potřeba autentizace, databáze, API, administrace,
  • dlouhodobě udržovaný projekt.

8.2 Kdy ne

  • jednoduchá statická stránka,
  • malý školní projekt, kde jde jen o HTML/CSS/JS,
  • když se učíš úplné základy jazyka.

9. Shrnutí tématu 25

  • Framework je kostra aplikace s hotovými nástroji.
  • Existují frontend, backend, CSS i full‑stack frameworky.
  • MVC je typická architektura backend frameworků.
  • Laravel je příklad PHP frameworku, React frontend knihovny.
  • Frameworky zrychlují vývoj a zvyšují bezpečnost, ale mají křivku učení.
  • Pro větší projekty jsou téměř nutností, pro malé mohou být zbytečné.