📝 Notatki o uczniu

Brak zapisanych notatek.

Plan na dziś — 27 września 2026

90 minut na Google Meet. Zakres szkolnego sprawdzianu: tablice, CheckBox, RadioButton. Java, projekt Tablice (com.example.tablice) w Android Studio. Sesja kończy się sprawdzianem próbnym na 20 punktów.

Rozkład minut

Jak odbierać odpowiedzi

Pięć pytań na diagnozę (blok 0–8)

1. Co wstawi do XML-a pozycja Plain Text z palety? (EditText — nazwa w palecie to nie nazwa klasy)
2. Od jakiego indeksu zaczyna się tablica i jaki ma ostatni? (0 oraz length - 1)
3. length czy length() — kiedy które? (tablica bez nawiasów, String z nawiasami)
4. Kiedy CheckBox, a kiedy RadioButton? (wiele odpowiedzi vs dokładnie jedna)
5. Po co RadioButtonom RadioGroup? (bez niej da się zaznaczyć wszystkie naraz)
6. Co zwraca getCheckedRadioButtonId(), gdy nic nie wybrano? (-1, nie null)

Zadanie domowe — do wklejenia na koniec sesji

Przed sprawdzianem:
1. Przepisz ankietę od zera, bez zaglądania w kod - z pamięci. Jeśli
   utkniesz, zajrzyj, zamknij i zacznij ten fragment jeszcze raz.
2. Zadania 11.3 i 11.6 (znajdź błąd, referencje tablic) - zrób ponownie
   na kartce. To dwa najczęstsze pytania "na myślenie".
3. Trzy zdania do zapamiętania na pamięć:
   - ostatni indeks to length - 1
   - getCheckedRadioButtonId() zwraca -1, gdy nic nie zaznaczono
   - tablica przypisana do drugiej zmiennej to ta sama tablica, nie kopia
4. Nazwy z palety: Plain Text = EditText (pole do wpisywania),
   TextView = tylko wyświetla, CheckBox i RadioButton siedzą
   w kategorii Buttons.

Czego dziś nie robimy

• ArrayList i RecyclerView — poza zakresem sprawdzianu, a mieszanie size() z length tydzień przed testem tylko zaszkodzi.
• Spinnera — też wybiera jedną opcję, ale nauczyciel wymienił RadioButton; wraca przy okazji ćwiczenia #04.
• Materiału maturalnego (teoria + SQL) przygotowanego na tę sesję — leży gotowy w module Matura, wraca po sprawdzianie.

Poprzednie sesje

Plan na 4 października 2026

90 minut na Google Meet, w całości na algorytmikę: sortowania, wyszukiwanie binarne, złożoność obliczeniowa — kamień milowy planu rocznego, przesuwany dwukrotnie. Pracujecie w jednym notatniku Colab, który sam sprawdza odpowiedzi — nie na kartce pokazywanej w kamerze.

Wiadomość do ucznia przed sesją

Cześć, wracamy do matury: sortowania, wyszukiwanie binarne i złożoność
obliczeniowa. To dział, w którym na maturze trzeba umieć dwie rzeczy:
prześledzić algorytm krok po kroku i napisać go w Pythonie.

Pracujemy w jednym notatniku Colab - wyślę Ci link na czacie przed
sesją. Otwierasz go w przeglądarce, piszemy w nim obaj naraz, a kod
uruchamiasz jednym skrótem Ctrl+Enter. Nic nie instalujesz, nie musisz
mieć Pythona u siebie.

Notatnik sam sprawdza odpowiedzi: wpisujesz tablicę po każdym przebiegu
i od razu widzisz, który wiersz się nie zgadza.

Przygotuj:
1. Okno obok Meeta na notatnik (przy jednym ekranie podziel go na pół).
2. Kartka i długopis pomocniczo - wyniki i tak wpisujemy do notatnika,
   bo zostaje Ci po lekcji jako materiał do powtórki.

Rozkład minut

Gdy zabraknie czasu

Zadanie 4.7 (bąbelkowe z flagą) i tak idzie do domu — nie wrzucaj go do sesji, nawet jeśli zostanie pięć minut. Lepiej wykorzystać je na powtórzenie wyniku 15 / 9 / 5 z pamięci.

Jedno narzędzie na całą sesję: notatnik Colab

Kartka pokazywana w kamerze ma trzy wady przy lekcji zdalnej: źle widać, nie da się nic poprawić bez przepisywania całości i nie zostaje po niej ślad. Wszystko, co dziś robicie „na papierze", wchodzi do jednego notatnika, w którym pracujecie równocześnie — jak w dokumencie Google, tylko że komórki z kodem dają się uruchomić.

Notatnik ma komplet zadań 4.1–4.7 i sprawdza odpowiedzi automatycznie: uczeń wpisuje stan tablicy po każdym przebiegu, naciska Ctrl+Enter i od razu widzi, który wiersz się nie zgadza. Ty nie musisz sprawdzać ręcznie, a uczeń dostaje informację zwrotną w sekundę, nie po dwóch minutach czekania.

Przygotowanie — raz, pięć minut przed pierwszą sesją

Link do konkretnego zadania

Colab obsługuje kotwice: dopisanie #scrollTo= i identyfikatora komórki otwiera notatnik dokładnie w tym zadaniu. Dzięki temu nie mówisz „przewiń niżej, jeszcze niżej" — wklejasz link i uczeń jest na miejscu.

https://colab.research.google.com/drive/TWOJ_IDENTYFIKATOR#scrollTo=zad41

Rysunki (kurczący się zakres przy wyszukiwaniu binarnym, w październiku drzewa) robisz na udostępnionym ekranie w dowolnym edytorze — to jedyna rzecz, której notatnik nie zastąpi, i jedyny moment, gdy sięgasz po coś poza nim.

Czego pilnować w tym dziale

• Liczba porównań a liczba zamian to dwie różne odpowiedzi. W bąbelkowym i przez wybór porównań jest tyle samo (15 dla sześciu elementów), zamian 9 kontra 5. Uczeń, który podaje jedną liczbę na oba pytania, traci punkt.
• „Po przebiegu" nie znaczy „po zamianie". Najczęstszy błąd w rozpisywaniu: uczeń notuje tablicę po każdej zamianie i gubi się w połowie.
• Binarne tylko na posortowanych — na nieposortowanych nie wyrzuci błędu, tylko zwróci złą odpowiedź.
• Nie wchodź w quicksort z implementacją. Dziś wystarczy idea dziel i zwyciężaj oraz złożoność. Implementacja rekurencyjna ma sens dopiero po module o rekurencji.

Materiał, który czeka gotowy

Poprzednie sesje

Plan na 15 listopada 2026

90 minut na Google Meet. Cały arkusz INF.04-01-25.01-SG ze stycznia 2025: część I (klasa z tablicą w Pythonie) i część II (galeria zdjęć w React). Uczeń pisze u siebie i udostępnia ekran. Każdą część zamyka sprawdzarką. Cel: obie aplikacje działające i sprawdzone, zrzuty i zipy mogą przejść do domu.

Wiadomość do ucznia na start

Dziś cały arkusz INF.04 ze stycznia 2025, ten z maila: najpierw
część I w Pythonie, potem część II w React. Pobierz dwie sprawdzarki:
1. https://moretutor.domoresoft.com/sprawdz_tablice.py
   (do folderu z main.py, uruchamiasz: python sprawdz_tablice.py main.py)
2. https://moretutor.domoresoft.com/sprawdz_galeria.js
   (wklejasz do konsoli przeglądarki przy otwartej galerii)

Rozkład minut

Gdy zabraknie czasu

Czego pilnować w tym arkuszu

• Pola z dwoma podkreśleniami. Jedno podkreślenie nie blokuje klasy potomnej, a arkusz wymaga tego wprost.
• Pętle po self.__liczba_elementow. Nigdy len, nigdy sum.
• Metody liczące zwracają, program główny wypisuje. Przy -1 program główny milczy.
• Zielony przycisk i przełączniki w rzędzie. Oba wynikają z ilustracji, nie z listy wymagań.
• Nowa tablica w setZdjecia. Mutacja wygląda prawie dobrze i dlatego jest groźna.

Pliki

Poprzednie sesje

Plan na 8 listopada 2026

90 minut na Google Meet. Egzamin zawodowy INF.04, czerwiec 2026, część I: aplikacja konsolowa, czyli generator bezpiecznych haseł w Pythonie. Uczeń pisze u siebie w PyCharm albo VS Code, tak jak na egzaminie, i udostępnia ekran. Program sprawdza sprawdzarką, która wywołuje jego funkcję 10 000 razy. Cel sesji: część I razem z dokumentacją w 40 minut, samodzielnie.

Wiadomość do ucznia przed sesją

Cześć, dziś robimy egzamin zawodowy INF.04 z czerwca 2026, część I:
aplikację konsolową, czyli generator bezpiecznych haseł. Piszesz u siebie,
w PyCharm albo VS Code, tak jak na egzaminie, i udostępniasz mi ekran.

Przed sesją pobierz dwa pliki:
1. https://moretutor.domoresoft.com/Web1.7z
   (to archiwum z egzaminu, hasło dostaniesz na lekcji, tak jak na egzaminie)
2. https://moretutor.domoresoft.com/sprawdz_hasla.py
   (sprawdzarka, która testuje Twój program)

Przygotuj:
- działającego Pythona i środowisko: sprawdź, że pusty plik z print("test")
  się uruchamia
- program do rozpakowania .7z z hasłem: na Macu Keka albo The Unarchiver

Rozkład minut

Gdy zabraknie czasu

Kroku 5 (wstawianie w losowe miejsce) nie skracaj do pokazania gotowego kodu. To jedyny fragment zadania, którego nie da się zrobić „na pamięć z lekcji o pętlach”, i na nim najczęściej przepada punkt.

Czego pilnować w tym zadaniu

• Dwa randint, dwa różne zakresy. Indeks znaku: 0 .. len(zbior) - 1. Pozycja w haśle: 0 .. len(haslo). Uczeń, który „na wszelki wypadek” wszędzie odejmuje jedynkę, wywala program na pierwszym obrocie.
• return, nie print. Funkcja zwraca hasło, a program główny je wypisuje. Na ekranie wygląda to identycznie, w punktacji nie.
• Żadnego shuffle, sample, choices, secrets. Sprawdzarka zgłasza je jako błąd.
• Polskie znaki kopiowane z znaki.txt. Jeden ź zamiast ż i zbiór nie zgadza się z arkuszem.
• Pisze uczeń. Gdy zaczynasz dyktować, przerwij i zapytaj, co ma się wydarzyć w następnej linijce.

Pliki

Poprzednie sesje

1. Co to jest React?

Stary sposób vs React

<div id="licznik">0</div>
<button onclick="zwieksz()">Kliknij</button>
<script>
  let wartosc = 0;
  function zwieksz() {
    wartosc++;
    document.getElementById('licznik').textContent = wartosc;
  }
</script>

import { useState } from 'react';
function Licznik() {
  const [wartosc, setWartosc] = useState(0);
  return (
    <div>
      <p>{wartosc}</p>
      <button onClick={() => setWartosc(wartosc + 1)}>Kliknij</button>
    </div>
  );
}

Virtual DOM

Zmiana danych → React tworzy nowy Virtual DOM
→ Porównuje: stary vs nowy → Aktualizuje TYLKO zmienione elementy

Architektura komponentowa

Strona
├── Navbar (Logo + Menu)
├── Treść (Post × 3)
└── Footer

1. Virtual DOM to lekka kopia prawdziwego DOM-u trzymana w pamięci.
   Gdy stan się zmienia, React tworzy nową wersję Virtual DOM,
   porównuje ją ze starą (diffing) i aktualizuje w prawdziwym DOM
   tylko te elementy, które faktycznie się zmieniły.

2. Architektura komponentowa polega na dzieleniu interfejsu na
   niezależne, wielokrotnego użytku kawałki (np. Nagłówek, Przycisk,
   Karta). Każdy komponent odpowiada za jedną rzecz — to ułatwia
   pisanie, testowanie i utrzymanie aplikacji.

2. Środowisko

Sprawdzenie Node.js

node --version   # potrzebne v18+
npm --version

Tworzenie projektu Vite

cd ~/Desktop
npm create vite@latest egzamin -- --template react
cd egzamin
npm install
npm install bootstrap
mkdir -p public/assets
npm run dev

Struktura projektu

egzamin/
├── node_modules/       ← pakiety (NIE dotykamy)
├── public/assets/      ← obrazy galerii
├── src/
│   ├── App.css         ← style
│   ├── App.jsx         ← główny komponent
│   └── index.js        ← punkt wejścia
├── index.html
└── package.json

Punkt wejścia

// src/index.js
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(<App />)

npm create vite@latest moj-projekt -- --template react
cd moj-projekt
npm install
npm run dev

3. JSX

JSX = JavaScript XML — składnia HTML-podobna wewnątrz JS.

Transformacja

const el = <h1 className="tytul">Cześć!</h1>;
// kompiluje się do:
const el = React.createElement("h1", { className: "tytul" }, "Cześć!");

5 zasad JSX

// ❌ return ( <h1>A</h1> <p>B</p> );
// ✅ return ( <> <h1>A</h1> <p>B</p> </> );

// ❌ <br>    ✅ <br />

<p style={{ color: 'red', fontSize: '16px' }}>Tekst</p>

Wyrażenia w klamrach {}

const imie = 'Maks';
return (
  <div>
    <h1>Cześć, {imie}!</h1>
    <p>Wynik: {2 + 2}</p>
    {zalogowany ? 'Tak' : 'Nie'}
    {show && <p>Widoczne!</p>}
  </div>
);

function Wizytowka() {
  return (
    <div>
      <h1 class="tytul">Jan Kowalski</h1>
      <img src="foto.jpg">
      <label for="email">Email:</label>
    </div>
  );
}

function Wizytowka() {
  return (
    <div>
      <h1 className="tytul">Jan Kowalski</h1>
      <img src="foto.jpg" />
      <label htmlFor="email">Email:</label>
    </div>
  );
}
// Błąd 1: class → className
// Błąd 2: <img> zamknięty → <img />
// Błąd 3: for → htmlFor

function Powitanie() {
  const imie = "Maks";
  const godzina = new Date().getHours();
  return <p>Cześć, {imie}! Jest godzina {godzina}.</p>;
}

4. Komponenty

Komponent = funkcja JS zwracająca JSX. Nazwa od wielkiej litery.

function Naglowek() {
  return <header><h1>Moja Aplikacja</h1></header>;
}
function App() {
  return <div><Naglowek /><p>Treść</p></div>;
}

Podział na pliki

// src/components/Naglowek.jsx
export default function Naglowek() {
  return <header><h1>App</h1></header>;
}
// src/App.jsx
import Naglowek from './components/Naglowek';

function Karta() {
  return (
    <div className="karta">
      <h2>Mój projekt</h2>
      <p>To jest opis mojego projektu.</p>
      <button>Szczegóły</button>
    </div>
  );
}
export default Karta;

5. Props

Props = dane przekazywane do komponentu z zewnątrz.

<Karta nazwa="Laptop" cena={3999} />
function Karta({ nazwa, cena }) {
  return <div><h3>{nazwa}</h3><p>{cena} zł</p></div>;
}

function Produkt({ nazwa, cena }) {
  return (
    <div className="produkt">
      <h3>{nazwa}</h3>
      <p>Cena: {cena} zł</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Produkt nazwa="Laptop" cena={3500} />
      <Produkt nazwa="Myszka" cena={89} />
      <Produkt nazwa="Klawiatura" cena={249} />
    </div>
  );
}

6. State (useState)

import { useState } from 'react';
const [wartosc, setWartosc] = useState(0);
//     ↑             ↑                ↑
// aktualna      setter         start

Licznik

function Licznik() {
  const [n, setN] = useState(0);
  return (
    <div>
      <p>{n}</p>
      <button onClick={() => setN(n + 1)}>+</button>
    </div>
  );
}

Controlled input

const [imie, setImie] = useState('');
<input value={imie} onChange={(e) => setImie(e.target.value)} />

Zasady Hooks

• Tylko na górze komponentu
• Konwencja: [coś, setCoś]
• Można mieć wiele useState

import { useState } from "react";

function Licznik() {
  const [liczba, setLiczba] = useState(0);
  return (
    <div>
      <button onClick={() => setLiczba(liczba - 1)}>−</button>
      <span> {liczba} </span>
      <button onClick={() => setLiczba(liczba + 1)}>+</button>
      <br />
      <button onClick={() => setLiczba(0)}>Reset</button>
    </div>
  );
}
export default Licznik;

7. Eventy (onClick, onChange, onSubmit)

React obsługuje zdarzenia przez camelCase propsy: onClick, onChange, onSubmit, onFocus, onKeyDown…

Klik — handler inline vs referencyjna

// inline (krótka akcja)
<button onClick={() => console.log('klik')}>Klik</button>

// referencyjna (lepsza czytelność)
function App() {
  function handleClick() {
    alert('Kliknięto!');
  }
  return <button onClick={handleClick}>Klik</button>;
}

onChange — wartość inputa

function Szukaj() {
  const [q, setQ] = useState('');
  return (
    <input
      value={q}
      onChange={(e) => setQ(e.target.value)}
      placeholder="Szukaj…"
    />
  );
}

onSubmit — formularze

function Form() {
  function handleSubmit(e) {
    e.preventDefault();          // ← blokuje przeładowanie
    console.log('wysłano!');
  }
  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button type="submit">Wyślij</button>
    </form>
  );
}

Przekazywanie argumentów do handlera

// Gdy potrzebujesz przekazać id lub inne dane:
<button onClick={() => usunElement(id)}>Usuń</button>

Lista ważnych eventów

import { useState } from "react";

function Podglad() {
  const [tekst, setTekst] = useState("");
  return (
    <div>
      <input
        type="text"
        value={tekst}
        onChange={(e) => setTekst(e.target.value)}
        placeholder="Wpisz coś..."
      />
      <p>Podgląd: {tekst}</p>
    </div>
  );
}
export default Podglad;

8. Tablice i .map()

Renderowanie list w React = .map() na tablicy + key na każdym elemencie.

Podstawowy .map()

const owoce = ['Jabłko', 'Banan', 'Gruszka'];

function Lista() {
  return (
    <ul>
      {owoce.map((owoc, i) => (
        <li key={i}>{owoc}</li>
      ))}
    </ul>
  );
}

.map() z obiektami

const uzytkownicy = [
  { id: 1, imie: 'Jan', wiek: 25 },
  { id: 2, imie: 'Ola', wiek: 22 },
];

function Uzytkownicy() {
  return (
    <div>
      {uzytkownicy.map(u => (
        <div key={u.id}>
          <h3>{u.imie}</h3>
          <p>Wiek: {u.wiek}</p>
        </div>
      ))}
    </div>
  );
}

.filter() — filtrowanie listy

// Pełnoletni użytkownicy
{uzytkownicy
  .filter(u => u.wiek >= 18)
  .map(u => <p key={u.id}>{u.imie}</p>)}

.find() — jeden element

const jan = uzytkownicy.find(u => u.imie === 'Jan');
// → { id: 1, imie: 'Jan', wiek: 25 }

.reduce() — agregacja

const suma = zamowienia.reduce((acc, z) => acc + z.kwota, 0);

[...new Set()] — unikalne wartości

const kategorie = [...new Set(produkty.map(p => p.kategoria))];
// → ['elektronika', 'ubrania', 'jedzenie']

.sort() — sortowanie

// numeryczne rosnąco
[...tablica].sort((a, b) => a.cena - b.cena)

// alfabetyczne
[...tablica].sort((a, b) => a.nazwa.localeCompare(b.nazwa))

const produkty = [
  { id: 1, nazwa: "Laptop", cena: 3500 },
  { id: 2, nazwa: "Telefon", cena: 1200 },
  { id: 3, nazwa: "Słuchawki", cena: 150 },
  { id: 4, nazwa: "Ładowarka", cena: 45 },
];

function ListaProduktow() {
  const produkty = [
    { id: 1, nazwa: "Laptop", cena: 3500 },
    { id: 2, nazwa: "Telefon", cena: 1200 },
    { id: 3, nazwa: "Słuchawki", cena: 150 },
    { id: 4, nazwa: "Ładowarka", cena: 45 },
  ];
  return (
    <ul>
      {produkty.map((p) => (
        <li key={p.id}>{p.nazwa} — {p.cena} zł</li>
      ))}
    </ul>
  );
}

function DrogieProdukty() {
  const produkty = [
    { id: 1, nazwa: "Laptop", cena: 3500 },
    { id: 2, nazwa: "Telefon", cena: 1200 },
    { id: 3, nazwa: "Słuchawki", cena: 150 },
    { id: 4, nazwa: "Ładowarka", cena: 45 },
  ];
  return (
    <ul>
      {produkty
        .filter((p) => p.cena > 100)
        .map((p) => (
          <li key={p.id}>{p.nazwa} — {p.cena} zł</li>
        ))}
    </ul>
  );
}

9. Warunkowy rendering

W React decydujesz co wyświetlić w zależności od stanu. Trzy główne techniki:

Ternary operator (? :)

function Status({ zalogowany }) {
  return (
    <p>
      {zalogowany ? 'Witaj z powrotem!' : 'Proszę się zalogować'}
    </p>
  );
}

Short-circuit &&

function Alert({ wiadomosc }) {
  return (
    <div>
      {wiadomosc && <p className="alert">{wiadomosc}</p>}
    </div>
  );
}
// Jeśli wiadomosc = '' lub null → nic nie renderuje

Wczesny return

function Karta({ dane }) {
  if (!dane) return <p>Ładowanie...</p>;

  return (
    <div>
      <h2>{dane.tytul}</h2>
      <p>{dane.opis}</p>
    </div>
  );
}

Klasy warunkowe

// Dynamiczna klasa CSS
<div className={`karta ${aktywna ? 'aktywna' : ''}`}>
  ...
</div>

// Styl inline warunkowy
<p style={{ color: blad ? 'red' : 'green' }}>{tekst}</p>

Renderowanie listy z warunkiem

// Pokaż "brak wyników" gdy lista pusta
{elementy.length === 0
  ? <p>Brak wyników</p>
  : elementy.map(el => <Karta key={el.id} {...el} />)
}

function StatusZamowienia({ oplacone }) {
  return (
    <p style={{ color: oplacone ? "green" : "red" }}>
      {oplacone
        ? "✅ Zamówienie opłacone"
        : "❌ Oczekuje na płatność"}
    </p>
  );
}
// Użycie:
// <StatusZamowienia oplacone={true} />
// <StatusZamowienia oplacone={false} />

10. useEffect

useEffect obsługuje efekty uboczne: pobieranie danych, subskrypcje, timery, zmiana tytułu strony.

Składnia

import { useEffect } from 'react';

useEffect(() => {
  // kod efektu
  return () => {
    // cleanup (opcjonalny)
  };
}, [zależności]);

Tablica zależności

Przykład: tytuł strony

useEffect(() => {
  document.title = `Masz ${count} wiadomości`;
}, [count]);

Przykład: fetch danych

function Posty() {
  const [posty, setPosty] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(data => {
        setPosty(data.slice(0, 10));
        setLoading(false);
      });
  }, []); // pusta tablica = raz na mount

  if (loading) return <p>Ładowanie...</p>;
  return (
    <ul>{posty.map(p => <li key={p.id}>{p.title}</li>)}</ul>
  );
}

Cleanup — sprzątanie

useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  return () => clearInterval(timer); // ← cleanup
}, []);

import { useState, useEffect } from "react";

function TytulStrony() {
  const [licznik, setLicznik] = useState(0);

  useEffect(() => {
    document.title = `Kliknięcia: ${licznik}`;
  }, [licznik]);

  return (
    <div>
      <p>Licznik: {licznik}</p>
      <button onClick={() => setLicznik(licznik + 1)}>+</button>
    </div>
  );
}
export default TytulStrony;

11. Formularze

W React formularze opierają się na controlled components — wartość pola jest w state, a zmiany obsługuje onChange.

Input tekstowy

const [imie, setImie] = useState('');
<input
  type="text"
  value={imie}
  onChange={(e) => setImie(e.target.value)}
  placeholder="Wpisz imię"
/>

Select (dropdown)

const [kolor, setKolor] = useState('niebieski');
<select value={kolor} onChange={(e) => setKolor(e.target.value)}>
  <option value="niebieski">Niebieski</option>
  <option value="zielony">Zielony</option>
  <option value="czerwony">Czerwony</option>
</select>

Dynamiczny select

const opcje = ['A', 'B', 'C'];
<select value={wybrany} onChange={(e) => setWybrany(e.target.value)}>
  {opcje.map(o => <option key={o} value={o}>{o}</option>)}
</select>

Textarea

const [opis, setOpis] = useState('');
<textarea value={opis} onChange={(e) => setOpis(e.target.value)} />

Checkbox

const [zgoda, setZgoda] = useState(false);
<label>
  <input
    type="checkbox"
    checked={zgoda}
    onChange={(e) => setZgoda(e.target.checked)}
  />
  Akceptuję regulamin
</label>

Kompletny formularz

function Formularz() {
  const [dane, setDane] = useState({ imie: '', email: '', wiadomosc: '' });

  function handleChange(e) {
    setDane({ ...dane, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    console.log(dane);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="imie" value={dane.imie} onChange={handleChange} />
      <input name="email" value={dane.email} onChange={handleChange} />
      <textarea name="wiadomosc" value={dane.wiadomosc} onChange={handleChange} />
      <button type="submit">Wyślij</button>
    </form>
  );
}

Prosta walidacja

const [blad, setBlad] = useState('');

function handleSubmit(e) {
  e.preventDefault();
  if (!dane.imie.trim()) {
    setBlad('Imię jest wymagane');
    return;
  }
  setBlad('');
  // wyślij dane...
}

{blad && <p style={{color:'red'}}>{blad}</p>}

import { useState } from "react";

function Rejestracja() {
  const [imie, setImie] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ imie, email });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Imię:
        <input type="text" value={imie}
          onChange={(e) => setImie(e.target.value)} />
      </label><br />
      <label>Email:
        <input type="email" value={email}
          onChange={(e) => setEmail(e.target.value)} />
      </label><br />
      <button type="submit">Zarejestruj się</button>
    </form>
  );
}
export default Rejestracja;

12. Struktura projektu React

Dobra organizacja plików to klucz do utrzymywalnego kodu. Oto standard Vite + React:

Typowa struktura

moj-projekt/
├── node_modules/        ← zależności (nie ruszać)
├── public/              ← pliki statyczne (favicon, obrazy)
├── src/
│   ├── assets/          ← obrazy, czcionki, dane
│   ├── components/      ← komponenty (.jsx)
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Card.jsx
│   ├── App.jsx          ← główny komponent
│   ├── App.css          ← style główne
│   ├── index.js         ← punkt wejścia
│   └── index.css        ← style globalne
├── index.html           ← szablon HTML
├── package.json         ← zależności + skrypty
└── vite.config.js       ← konfiguracja Vite

Cykl życia plików

Import komponentu

// App.jsx
import Header from './components/Header';
import Card from './components/Card';

function App() {
  return (
    <>
      <Header />
      <Card title="Hello" />
    </>
  );
}

Import danych z pliku

// src/assets/dane.js (eksport)
export const produkty = [
  { id: 1, nazwa: 'Laptop', cena: 3500 },
  { id: 2, nazwa: 'Mysz', cena: 120 },
];

// App.jsx (import)
import { produkty } from './assets/dane';

Import CSS

import './App.css';          // ← import globalny
// albo CSS Modules:
import styles from './Card.module.css';
<div className={styles.card}>...</div>

Komendy do zapamiętania

Spread operator w React

// Kopiowanie tablicy (immutable update)
const nowa = [...stara, nowyElement];

// Kopiowanie obiektu
const nowy = { ...stary, imie: 'Nowe' };

// Usunięcie elementu
const bez = lista.filter(el => el.id !== idDoUsuniecia);

// Aktualizacja jednego elementu
const zaktualizowane = lista.map(el =>
  el.id === id ? { ...el, gotowe: true } : el
);

src/
  App.jsx
  components/
    Naglowek.jsx
    Stopka.jsx
    ui/
      Przycisk.jsx

// components/Naglowek.jsx
function Naglowek() {
  return <header>Nagłówek strony</header>;
}
export default Naglowek;

// components/Stopka.jsx
function Stopka() {
  return <footer>Stopka strony</footer>;
}
export default Stopka;

// components/ui/Przycisk.jsx
function Przycisk() {
  return <button>Kliknij</button>;
}
export default Przycisk;

// App.jsx
import Naglowek from "./components/Naglowek";
import Stopka from "./components/Stopka";
import Przycisk from "./components/ui/Przycisk";

function App() {
  return (
    <>
      <Naglowek />
      <Przycisk />
      <Stopka />
    </>
  );
}
export default App;

13. React Router

React to SPA (Single Page Application) — cała strona to jeden plik HTML. React Router pozwala robić wiele "podstron" bez przeładowania strony.

Po co router?

Instalacja

npm install react-router-dom

To jedyna dodatkowa paczka — React nie ma routera wbudowanego (w odróżnieniu od Angulara).

Konfiguracja w index.js

import { BrowserRouter } from 'react-router-dom';
import App from './App';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Definiowanie tras w App.js

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <div>
      <h1>Moja strona</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

Nawigacja — <Link> zamiast <a>

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Strona główna</Link>
      <Link to="/about">O nas</Link>
      <Link to="/contact">Kontakt</Link>
    </nav>
  );
}

Strona 404 — gdy nic nie pasuje

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<h2>404 — Nie znaleziono strony</h2>} />
</Routes>

path="*" — łapie wszystkie adresy które nie pasują do żadnej trasy.

Aktywny link — NavLink

import { NavLink } from 'react-router-dom';

<NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
  Strona główna
</NavLink>

NavLink działa jak Link, ale wie czy jest aktywny. Dzięki temu możesz podświetlić aktualny link w menu.

useEffect + Router — tytuł strony

Częsty pattern: zmiana document.title po wejściu na podstronę. Do tego potrzebujemy useEffect + hooka useLocation:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function About() {
  const location = useLocation();

  useEffect(() => {
    document.title = "O nas — MiniStrona";
  }, []);  // [] = tylko przy montowaniu

  return <h2>O nas</h2>;
}

useEffect + fetch — dane z API

Na podstronie możesz pobrać dane z zewnętrznego API przy wejściu:

import { useState, useEffect } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Ładowanie...</p>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Podsumowanie

1. npm install react-router-dom
2. Opakowac <App /> w <BrowserRouter> w index.js
3. W App.js:
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/products" element={<Products />} />
     <Route path="/contact" element={<Contact />} />
   </Routes>
4. Uzyc <Link to="/products">Produkty</Link> zamiast <a>

14. Biblioteki w React + CRUD (axios)

W tej lekcji nauczysz się instalować biblioteki z npm i używać ich w React, oraz wykonać kompletny CRUD — czyli 4 operacje na danych z serwera (Create, Read, Update, Delete).

Co to jest biblioteka?

Biblioteka to gotowy kod który ktoś napisał i udostępnił przez npm (Node Package Manager). Zamiast pisać wszystko od zera — instalujesz paczkę i jej używasz.

Instalacja biblioteki

npm install nazwa-biblioteki

Po instalacji biblioteka pojawia się w package.json w sekcji dependencies. Importujemy ją w plikach .js:

import axios from 'axios';

Co to jest API?

API (Application Programming Interface) to "punkt kontaktu" z serwerem. Wysyłamy zapytanie HTTP i dostajemy dane w formacie JSON.

Twoja apka  ──── GET /posts ────►  Serwer
            ◄──── [JSON dane] ────

Mock API — JSONPlaceholder

Do nauki używamy JSONPlaceholder — darmowe fałszywe API, które udaje że ma dane. Idealne do ćwiczeń:

https://jsonplaceholder.typicode.com/posts

Można robić wszystkie operacje CRUD — serwer odpowiada tak jakby zapisał, ale w rzeczywistości nic nie zmienia. Idealny do nauki.

CRUD — 4 operacje

CRUD to skrót od 4 podstawowych operacji na danych:

axios vs fetch — czemu axios?

Operacja READ — GET (axios.get)

import axios from 'axios';
import { useState, useEffect } from 'react';

function ListaPostow() {
  const [posty, setPosty] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setPosty(response.data));
  }, []);

  return (
    <ul>
      {posty.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Operacja CREATE — POST (axios.post)

function dodajPost() {
  const nowy = {
    title: "Mój nowy post",
    body: "Treść posta",
    userId: 1
  };

  axios.post('https://jsonplaceholder.typicode.com/posts', nowy)
    .then(response => {
      console.log("Utworzono:", response.data);
      // response.data ma wszystko + nowe id z serwera
      setPosty([...posty, response.data]);
    });
}

Drugi argument (nowy) to dane do wysłania. Serwer odpowiada utworzonym zasobem (z dodanym id).

Operacja UPDATE — PUT (axios.put)

function edytujPost(id) {
  const zmieniony = {
    title: "Zmieniony tytuł",
    body: "Nowa treść",
    userId: 1
  };

  axios.put(`https://jsonplaceholder.typicode.com/posts/${id}`, zmieniony)
    .then(response => {
      // Zaktualizuj listę lokalnie
      setPosty(posty.map(p => p.id === id ? response.data : p));
    });
}

Operacja DELETE — DELETE (axios.delete)

function usunPost(id) {
  axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`)
    .then(() => {
      // Usuń lokalnie z listy
      setPosty(posty.filter(p => p.id !== id));
    });
}

DELETE nie wysyła danych — tylko URL z ID. Serwer odpowiada pustą odpowiedzią (status 200).

Loading state — pokaż "Ładowanie..."

Zapytania do API trwają czas. Powinniśmy pokazać użytkownikowi że coś się dzieje:

const [posty, setPosty] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      setPosty(response.data);
      setLoading(false);  // koniec ładowania
    });
}, []);

if (loading) return <p>Ładowanie...</p>;
return <ul>{posty.map(...)}</ul>;

Obsługa błędów — try / catch (async/await)

Jeśli serwer padnie albo nie ma internetu — zapytanie wywali błąd. Trzeba go obsłużyć:

// Wersja z .then().catch()
axios.get(url)
  .then(response => setPosty(response.data))
  .catch(error => alert("Błąd: " + error.message));

// Wersja z async/await + try/catch
async function pobierz() {
  try {
    const response = await axios.get(url);
    setPosty(response.data);
  } catch (error) {
    alert("Błąd: " + error.message);
  }
}

Pełen wzorzec CRUD

// READ
axios.get(URL).then(r => setPosty(r.data));

// CREATE
axios.post(URL, dane).then(r => setPosty([...posty, r.data]));

// UPDATE
axios.put(`${URL}/${id}`, dane).then(r =>
  setPosty(posty.map(p => p.id === id ? r.data : p))
);

// DELETE
axios.delete(`${URL}/${id}`).then(() =>
  setPosty(posty.filter(p => p.id !== id))
);

Podsumowanie

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(r => setUsers(r.data));
  }, []);

  function dodajUsera() {
    axios.post('https://jsonplaceholder.typicode.com/users', {
      name: "Jan Kowalski"
    }).then(r => setUsers([...users, r.data]));
  }

  return (
    <div>
      <button onClick={dodajUsera}>Dodaj</button>
      {users.map(u => <p key={u.id}>{u.name}</p>)}
    </div>
  );
}

Rozgrzewka — Mini-strona (Router)

Szybkie pytania na początek lekcji — kliknij pytanie, żeby zobaczyć odpowiedź.

Mini-strona — Instrukcja

Treść zadania

Mini-strona — Budowa

npm create vite@latest mini-strona -- --template react
cd mini-strona
npm install
npm install react-router-dom bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import { useEffect } from 'react';

function Home() {
  useEffect(() => {
    document.title = "Home — MiniStrona";
  }, []);

  return (
    <div>
      <h2>Strona główna</h2>
      <p>Witaj na naszej stronie! Używamy React Router.</p>
    </div>
  );
}
export default Home;

import { useState, useEffect } from 'react';

function About() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    document.title = "O nas — MiniStrona";

    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h2>O nas</h2>
      <p>Jesteśmy zespołem uczącym się Reacta!</p>
      <h3>Nasz zespół</h3>
      {loading ? <p>Ładowanie...</p> : (
        <ul className="list-group">
          {users.slice(0, 5).map(u => (
            <li key={u.id} className="list-group-item">
              <strong>{u.name}</strong> — {u.email}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
export default About;

function NotFound() {
  return (
    <div className="text-center mt-5">
      <h2>404</h2>
      <p>Nie znaleziono strony!</p>
    </div>
  );
}
export default NotFound;

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
      <div className="container">
        <span className="navbar-brand">MiniStrona</span>
        <div className="navbar-nav">
          <NavLink to="/" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Home</NavLink>
          <NavLink to="/about" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>O nas</NavLink>
          <NavLink to="/contact" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Kontakt</NavLink>
        </div>
      </div>
    </nav>
  );
}
export default Navbar;

import { useState, useEffect } from 'react';

function Contact() {
  const [dane, setDane] = useState({ imie: '', email: '', wiadomosc: '' });
  const [wyslano, setWyslano] = useState(false);

  useEffect(() => {
    document.title = "Kontakt — MiniStrona";
  }, []);

  function handleChange(e) {
    setDane({ ...dane, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setWyslano(true);
  }

  if (wyslano) {
    return (
      <div className="alert alert-success">
        Dziękujemy, {dane.imie}! Wiadomość została wysłana.
      </div>
    );
  }

  return (
    <div>
      <h2>Kontakt</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label className="form-label">Imię</label>
          <input type="text" className="form-control" name="imie"
            value={dane.imie} onChange={handleChange} required />
        </div>
        <div className="mb-3">
          <label className="form-label">Email</label>
          <input type="email" className="form-control" name="email"
            value={dane.email} onChange={handleChange} required />
        </div>
        <div className="mb-3">
          <label className="form-label">Wiadomość</label>
          <textarea className="form-control" name="wiadomosc" rows="4"
            value={dane.wiadomosc} onChange={handleChange} required />
        </div>
        <button type="submit" className="btn btn-primary">Wyślij</button>
      </form>
    </div>
  );
}
export default Contact;

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <div>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </div>
  );
}
export default App;

npm run dev

Mini-strona — Gotowy kod

Struktura plików

src/
├── components/
│   └── Navbar.js
├── pages/
│   ├── Home.js
│   ├── About.js
│   ├── Contact.js
│   └── NotFound.js
├── App.js
└── index.js

index.js

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.js

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <div>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </div>
  );
}
export default App;

components/Navbar.js

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
      <div className="container">
        <span className="navbar-brand">MiniStrona</span>
        <div className="navbar-nav">
          <NavLink to="/" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Home</NavLink>
          <NavLink to="/about" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>O nas</NavLink>
          <NavLink to="/contact" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Kontakt</NavLink>
        </div>
      </div>
    </nav>
  );
}
export default Navbar;

pages/Home.js

import { useEffect } from 'react';

function Home() {
  useEffect(() => {
    document.title = "Home — MiniStrona";
  }, []);

  return (
    <div>
      <h2>Strona główna</h2>
      <p>Witaj na naszej stronie! Używamy React Router.</p>
    </div>
  );
}
export default Home;

pages/About.js

import { useState, useEffect } from 'react';

function About() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    document.title = "O nas — MiniStrona";

    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <h2>O nas</h2>
      <p>Jesteśmy zespołem uczącym się Reacta!</p>
      <h3>Nasz zespół</h3>
      {loading ? <p>Ładowanie...</p> : (
        <ul className="list-group">
          {users.slice(0, 5).map(u => (
            <li key={u.id} className="list-group-item">
              <strong>{u.name}</strong> — {u.email}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
export default About;

pages/Contact.js

import { useState, useEffect } from 'react';

function Contact() {
  const [dane, setDane] = useState({ imie: '', email: '', wiadomosc: '' });
  const [wyslano, setWyslano] = useState(false);

  useEffect(() => {
    document.title = "Kontakt — MiniStrona";
  }, []);

  function handleChange(e) {
    setDane({ ...dane, [e.target.name]: e.target.value });
  }

  function handleSubmit(e) {
    e.preventDefault();
    setWyslano(true);
  }

  if (wyslano) {
    return (
      <div className="alert alert-success">
        Dziękujemy, {dane.imie}! Wiadomość została wysłana.
      </div>
    );
  }

  return (
    <div>
      <h2>Kontakt</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label className="form-label">Imię</label>
          <input type="text" className="form-control" name="imie"
            value={dane.imie} onChange={handleChange} required />
        </div>
        <div className="mb-3">
          <label className="form-label">Email</label>
          <input type="email" className="form-control" name="email"
            value={dane.email} onChange={handleChange} required />
        </div>
        <div className="mb-3">
          <label className="form-label">Wiadomość</label>
          <textarea className="form-control" name="wiadomosc" rows="4"
            value={dane.wiadomosc} onChange={handleChange} required />
        </div>
        <button type="submit" className="btn btn-primary">Wyślij</button>
      </form>
    </div>
  );
}
export default Contact;

pages/NotFound.js

function NotFound() {
  return (
    <div className="text-center mt-5">
      <h2>404</h2>
      <p>Nie znaleziono strony!</p>
    </div>
  );
}
export default NotFound;

Sprawdzian — Mini-strona (Router)

5 pytań · 5 minut · minimum 60% żeby zdać

Rozgrzewka — Hodowla świnek morskich

Szybkie pytania na początek lekcji — kliknij pytanie, żeby zobaczyć odpowiedź.

Hodowla świnek morskich — Instrukcja

Treść zadania

Schemat bazy danych (z hodowla.sql)

Strony aplikacji (Router)

Czego się nauczysz

Hodowla świnek morskich — Budowa

npx create-react-app hodowla
cd hodowla
npm install axios bootstrap react-router-dom

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

htdocs/hodowla-api/
├── db.php           ← połączenie z MySQL (PDO)
├── swinki.php       ← CRUD na tabeli swinki
└── rasy.php         ← READ na tabeli rasy

<?php
$host = '127.0.0.1';
$db   = 'hodowla';
$user = 'root';
$pass = '';   // domyślnie XAMPP nie ma hasła
$dsn  = "mysql:host=$host;dbname=$db;charset=utf8mb4";

try {
    $pdo = new PDO($dsn, $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    http_response_code(500);
    header('Content-Type: application/json');
    echo json_encode(['error' => $e->getMessage()]);
    exit;
}

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

require 'db.php';

$method = $_SERVER['REQUEST_METHOD'];
$id     = $_GET['id'] ?? null;

switch ($method) {
    case 'GET':
        if ($id) {
            $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
            $stmt->execute([$id]);
            echo json_encode($stmt->fetch());
        } else {
            $stmt = $pdo->query('SELECT * FROM swinki');
            echo json_encode($stmt->fetchAll());
        }
        break;

    case 'POST':
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare('INSERT INTO swinki (rasy_id, data_ur, miot, opis, imie, cena) VALUES (?, ?, ?, ?, ?, ?)');
        $stmt->execute([$data['rasy_id'], $data['data_ur'], $data['miot'], $data['opis'], $data['imie'], $data['cena']]);
        $newId = $pdo->lastInsertId();
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$newId]);
        echo json_encode($stmt->fetch());
        break;

    case 'PUT':
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare('UPDATE swinki SET rasy_id=?, data_ur=?, miot=?, opis=?, imie=?, cena=? WHERE id=?');
        $stmt->execute([$data['rasy_id'], $data['data_ur'], $data['miot'], $data['opis'], $data['imie'], $data['cena'], $id]);
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode($stmt->fetch());
        break;

    case 'DELETE':
        $stmt = $pdo->prepare('DELETE FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode(['ok' => true]);
        break;
}

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
require 'db.php';
$stmt = $pdo->query('SELECT * FROM rasy ORDER BY rasa');
echo json_encode($stmt->fetchAll());

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
      <div className="container">
        <span className="navbar-brand">🐹 Hodowla</span>
        <div className="navbar-nav">
          <NavLink to="/" end className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Home</NavLink>
          <NavLink to="/swinki" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Świnki</NavLink>
          <NavLink to="/rasy" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>Rasy</NavLink>
          <NavLink to="/swinki/dodaj" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")
          }>+ Dodaj</NavLink>
        </div>
      </div>
    </nav>
  );
}
export default Navbar;

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import ListaSwinek from './pages/ListaSwinek';
import DodajSwinke from './pages/DodajSwinke';
import EdytujSwinke from './pages/EdytujSwinke';
import Rasy from './pages/Rasy';
import NotFound from './pages/NotFound';

const API_URL = 'http://localhost/hodowla-api';

function App() {
  return (
    <div>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/swinki" element={<ListaSwinek />} />
          <Route path="/swinki/dodaj" element={<DodajSwinke />} />
          <Route path="/swinki/:id/edytuj" element={<EdytujSwinke />} />
          <Route path="/rasy" element={<Rasy />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </div>
  );
}

export { API_URL };
export default App;

import { useState, useEffect } from 'react';
import axios from 'axios';
import { API_URL } from '../App';

function Home() {
  const [swinki, setSwinki] = useState([]);
  const [rasy, setRasy] = useState([]);

  useEffect(() => {
    axios.get(`${API_URL}/swinki.php`).then(r => setSwinki(r.data));
    axios.get(`${API_URL}/rasy.php`).then(r => setRasy(r.data));
  }, []);

  const sredniaCena = swinki.length === 0 ? 0 :
    swinki.reduce((suma, s) => suma + s.cena, 0) / swinki.length;

  return (
    <div>
      <h1>🐹 Hodowla świnek morskich</h1>
      <p className="lead">Witaj w panelu zarządzania hodowlą.</p>
      <div className="row">
        <div className="col-md-4">
          <div className="card text-center p-3">
            <h2>{swinki.length}</h2>
            <p className="text-muted">świnek w hodowli</p>
          </div>
        </div>
        <div className="col-md-4">
          <div className="card text-center p-3">
            <h2>{rasy.length}</h2>
            <p className="text-muted">dostępnych ras</p>
          </div>
        </div>
        <div className="col-md-4">
          <div className="card text-center p-3">
            <h2>{sredniaCena.toFixed(0)} zł</h2>
            <p className="text-muted">średnia cena</p>
          </div>
        </div>
      </div>
    </div>
  );
}
export default Home;

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { API_URL } from '../App';

function ListaSwinek() {
  const [swinki, setSwinki] = useState([]);
  const [rasy, setRasy] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      axios.get(`${API_URL}/swinki.php`),
      axios.get(`${API_URL}/rasy.php`)
    ]).then(([s, r]) => {
      setSwinki(s.data);
      setRasy(r.data);
      setLoading(false);
    });
  }, []);

  // "JOIN" przez find — szukamy rasy po rasy_id
  function nazwaRasy(rasy_id) {
    const r = rasy.find(x => x.id === rasy_id);
    return r ? r.rasa : '?';
  }

  function usunSwinke(id) {
    if (!window.confirm('Na pewno usunąć?')) return;
    axios.delete(`${API_URL}/swinki.php?id=${id}`)
      .then(() => setSwinki(swinki.filter(s => s.id !== id)));
  }

  if (loading) return <p>Ładowanie...</p>;

  return (
    <div>
      <div className="d-flex justify-content-between align-items-center mb-3">
        <h2>Lista świnek</h2>
        <Link to="/swinki/dodaj" className="btn btn-success">+ Dodaj świnkę</Link>
      </div>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Imię</th><th>Rasa</th><th>Data ur.</th><th>Miot</th><th>Cena</th><th></th>
          </tr>
        </thead>
        <tbody>
          {swinki.map(s => (
            <tr key={s.id}>
              <td><strong>{s.imie}</strong></td>
              <td>{nazwaRasy(s.rasy_id)}</td>
              <td>{s.data_ur}</td>
              <td>{s.miot}</td>
              <td>{s.cena} zł</td>
              <td>
                <Link to={`/swinki/${s.id}/edytuj`} className="btn btn-sm btn-warning me-2">Edytuj</Link>
                <button className="btn btn-sm btn-danger" onClick={() => usunSwinke(s.id)}>Usuń</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
export default ListaSwinek;

import { useState, useEffect } from 'react';
import axios from 'axios';
import { API_URL } from '../App';

function Rasy() {
  const [rasy, setRasy] = useState([]);

  useEffect(() => {
    axios.get(`${API_URL}/rasy.php`).then(r => setRasy(r.data));
  }, []);

  return (
    <div>
      <h2>Dostępne rasy świnek morskich</h2>
      <ul className="list-group">
        {rasy.map(r => (
          <li key={r.id} className="list-group-item">
            <strong>#{r.id}</strong> — {r.rasa}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default Rasy;

import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div className="text-center mt-5">
      <h1>404</h1>
      <p>Nie znaleziono strony!</p>
      <Link to="/" className="btn btn-primary">Wróć do Home</Link>
    </div>
  );
}
export default NotFound;

Hodowla świnek morskich — Gotowy kod

Struktura projektu (2 części)

FRONTEND (React):
hodowla/
├── package.json
└── src/
    ├── index.js               ← BrowserRouter
    ├── App.js                 ← Routes + Navbar
    ├── components/
    │   └── Navbar.js
    └── pages/
        ├── Home.js
        ├── ListaSwinek.js
        ├── DodajSwinke.js
        ├── EdytujSwinke.js
        ├── Rasy.js
        └── NotFound.js

BACKEND (PHP w htdocs):
htdocs/hodowla-api/
├── db.php                    ← połączenie PDO z MySQL
├── swinki.php                ← CRUD na tabeli swinki
└── rasy.php                  ← READ na tabeli rasy

BACKEND — db.php

<?php
$host = '127.0.0.1';
$db   = 'hodowla';
$user = 'root';
$pass = '';
$dsn  = "mysql:host=$host;dbname=$db;charset=utf8mb4";

try {
    $pdo = new PDO($dsn, $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    http_response_code(500);
    header('Content-Type: application/json');
    echo json_encode(['error' => $e->getMessage()]);
    exit;
}

BACKEND — swinki.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json; charset=utf-8');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

require 'db.php';

$method = $_SERVER['REQUEST_METHOD'];
$id     = $_GET['id'] ?? null;

switch ($method) {
    case 'GET':
        if ($id) {
            $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
            $stmt->execute([$id]);
            echo json_encode($stmt->fetch());
        } else {
            $stmt = $pdo->query('SELECT * FROM swinki');
            echo json_encode($stmt->fetchAll());
        }
        break;

    case 'POST':
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare('INSERT INTO swinki (rasy_id, data_ur, miot, opis, imie, cena) VALUES (?, ?, ?, ?, ?, ?)');
        $stmt->execute([$data['rasy_id'], $data['data_ur'], $data['miot'], $data['opis'], $data['imie'], $data['cena']]);
        $newId = $pdo->lastInsertId();
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$newId]);
        echo json_encode($stmt->fetch());
        break;

    case 'PUT':
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare('UPDATE swinki SET rasy_id=?, data_ur=?, miot=?, opis=?, imie=?, cena=? WHERE id=?');
        $stmt->execute([$data['rasy_id'], $data['data_ur'], $data['miot'], $data['opis'], $data['imie'], $data['cena'], $id]);
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode($stmt->fetch());
        break;

    case 'DELETE':
        $stmt = $pdo->prepare('DELETE FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode(['ok' => true]);
        break;
}

BACKEND — rasy.php

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');
require 'db.php';
$stmt = $pdo->query('SELECT * FROM rasy ORDER BY rasa');
echo json_encode($stmt->fetchAll());

FRONTEND — src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

FRONTEND — src/App.js

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import ListaSwinek from './pages/ListaSwinek';
import DodajSwinke from './pages/DodajSwinke';
import EdytujSwinke from './pages/EdytujSwinke';
import Rasy from './pages/Rasy';
import NotFound from './pages/NotFound';

const API_URL = 'http://localhost/hodowla-api';

function App() {
  return (
    <div>
      <Navbar />
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/swinki" element={<ListaSwinek />} />
          <Route path="/swinki/dodaj" element={<DodajSwinke />} />
          <Route path="/swinki/:id/edytuj" element={<EdytujSwinke />} />
          <Route path="/rasy" element={<Rasy />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </div>
  );
}

export { API_URL };
export default App;

FRONTEND — src/components/Navbar.js

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
      <div className="container">
        <span className="navbar-brand">🐹 Hodowla</span>
        <div className="navbar-nav">
          <NavLink to="/" end className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")}>Home</NavLink>
          <NavLink to="/swinki" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")}>Świnki</NavLink>
          <NavLink to="/rasy" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")}>Rasy</NavLink>
          <NavLink to="/swinki/dodaj" className={({ isActive }) =>
            "nav-link" + (isActive ? " active" : "")}>+ Dodaj</NavLink>
        </div>
      </div>
    </nav>
  );
}
export default Navbar;

FRONTEND — src/pages/Home.js

import { useState, useEffect } from 'react';
import axios from 'axios';
import { API_URL } from '../App';

function Home() {
  const [swinki, setSwinki] = useState([]);
  const [rasy, setRasy] = useState([]);

  useEffect(() => {
    axios.get(`${API_URL}/swinki.php`).then(r => setSwinki(r.data));
    axios.get(`${API_URL}/rasy.php`).then(r => setRasy(r.data));
  }, []);

  const sredniaCena = swinki.length === 0 ? 0 :
    swinki.reduce((s, x) => s + x.cena, 0) / swinki.length;

  return (
    <div>
      <h1>🐹 Hodowla świnek morskich</h1>
      <p className="lead">Witaj w panelu zarządzania hodowlą.</p>
      <div className="row">
        <div className="col-md-4"><div className="card text-center p-3">
          <h2>{swinki.length}</h2><p className="text-muted">świnek</p>
        </div></div>
        <div className="col-md-4"><div className="card text-center p-3">
          <h2>{rasy.length}</h2><p className="text-muted">ras</p>
        </div></div>
        <div className="col-md-4"><div className="card text-center p-3">
          <h2>{sredniaCena.toFixed(0)} zł</h2><p className="text-muted">średnia cena</p>
        </div></div>
      </div>
    </div>
  );
}
export default Home;

FRONTEND — src/pages/ListaSwinek.js

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { API_URL } from '../App';

function ListaSwinek() {
  const [swinki, setSwinki] = useState([]);
  const [rasy, setRasy] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      axios.get(`${API_URL}/swinki.php`),
      axios.get(`${API_URL}/rasy.php`)
    ]).then(([s, r]) => {
      setSwinki(s.data);
      setRasy(r.data);
      setLoading(false);
    });
  }, []);

  function nazwaRasy(rasy_id) {
    const r = rasy.find(x => x.id === rasy_id);
    return r ? r.rasa : '?';
  }

  function usunSwinke(id) {
    if (!window.confirm('Na pewno usunąć?')) return;
    axios.delete(`${API_URL}/swinki.php?id=${id}`)
      .then(() => setSwinki(swinki.filter(s => s.id !== id)));
  }

  if (loading) return <p>Ładowanie...</p>;

  return (
    <div>
      <div className="d-flex justify-content-between align-items-center mb-3">
        <h2>Lista świnek</h2>
        <Link to="/swinki/dodaj" className="btn btn-success">+ Dodaj świnkę</Link>
      </div>
      <table className="table table-striped">
        <thead><tr>
          <th>Imię</th><th>Rasa</th><th>Data ur.</th><th>Miot</th><th>Cena</th><th></th>
        </tr></thead>
        <tbody>
          {swinki.map(s => (
            <tr key={s.id}>
              <td><strong>{s.imie}</strong></td>
              <td>{nazwaRasy(s.rasy_id)}</td>
              <td>{s.data_ur}</td>
              <td>{s.miot}</td>
              <td>{s.cena} zł</td>
              <td>
                <Link to={`/swinki/${s.id}/edytuj`} className="btn btn-sm btn-warning me-2">Edytuj</Link>
                <button className="btn btn-sm btn-danger" onClick={() => usunSwinke(s.id)}>Usuń</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
export default ListaSwinek;

FRONTEND — src/pages/DodajSwinke.js

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { API_URL } from '../App';

function DodajSwinke() {
  const [rasy, setRasy] = useState([]);
  const [dane, setDane] = useState({
    imie: '', rasy_id: 1, data_ur: '', miot: '', opis: '', cena: 0
  });
  const navigate = useNavigate();

  useEffect(() => {
    axios.get(`${API_URL}/rasy.php`).then(r => setRasy(r.data));
  }, []);

  function handleChange(e) {
    const { name, value } = e.target;
    // rasy_id i cena to liczby
    const wartosc = (name === 'rasy_id' || name === 'cena') ? Number(value) : value;
    setDane({ ...dane, [name]: wartosc });
  }

  function handleSubmit(e) {
    e.preventDefault();
    axios.post(`${API_URL}/swinki.php`, dane).then(() => {
      navigate('/swinki');
    });
  }

  return (
    <div>
      <h2>Dodaj nową świnkę</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-2">
          <label className="form-label">Imię</label>
          <input name="imie" value={dane.imie} onChange={handleChange}
            className="form-control" required />
        </div>
        <div className="mb-2">
          <label className="form-label">Rasa</label>
          <select name="rasy_id" value={dane.rasy_id} onChange={handleChange}
            className="form-select">
            {rasy.map(r => (
              <option key={r.id} value={r.id}>{r.rasa}</option>
            ))}
          </select>
        </div>
        <div className="mb-2">
          <label className="form-label">Data urodzenia</label>
          <input type="date" name="data_ur" value={dane.data_ur}
            onChange={handleChange} className="form-control" required />
        </div>
        <div className="mb-2">
          <label className="form-label">Miot</label>
          <input name="miot" value={dane.miot} onChange={handleChange}
            className="form-control" />
        </div>
        <div className="mb-2">
          <label className="form-label">Opis</label>
          <textarea name="opis" value={dane.opis} onChange={handleChange}
            className="form-control" rows="2" />
        </div>
        <div className="mb-3">
          <label className="form-label">Cena (zł)</label>
          <input type="number" name="cena" value={dane.cena}
            onChange={handleChange} className="form-control" />
        </div>
        <button type="submit" className="btn btn-success me-2">Zapisz</button>
        <button type="button" className="btn btn-secondary"
          onClick={() => navigate('/swinki')}>Anuluj</button>
      </form>
    </div>
  );
}
export default DodajSwinke;

FRONTEND — src/pages/EdytujSwinke.js

import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
import { API_URL } from '../App';

function EdytujSwinke() {
  const { id } = useParams();          // czyta :id z URL (string!)
  const navigate = useNavigate();
  const [rasy, setRasy] = useState([]);
  const [dane, setDane] = useState(null);

  useEffect(() => {
    Promise.all([
      axios.get(`${API_URL}/swinki.php?id=${id}`),
      axios.get(`${API_URL}/rasy.php`)
    ]).then(([s, r]) => {
      setDane(s.data);
      setRasy(r.data);
    });
  }, [id]);

  function handleChange(e) {
    const { name, value } = e.target;
    const wartosc = (name === 'rasy_id' || name === 'cena') ? Number(value) : value;
    setDane({ ...dane, [name]: wartosc });
  }

  function handleSubmit(e) {
    e.preventDefault();
    axios.put(`${API_URL}/swinki.php?id=${id}`, dane).then(() => {
      navigate('/swinki');
    });
  }

  if (!dane) return <p>Ładowanie...</p>;

  return (
    <div>
      <h2>Edytuj świnkę: {dane.imie}</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-2">
          <label className="form-label">Imię</label>
          <input name="imie" value={dane.imie} onChange={handleChange}
            className="form-control" required />
        </div>
        <div className="mb-2">
          <label className="form-label">Rasa</label>
          <select name="rasy_id" value={dane.rasy_id} onChange={handleChange}
            className="form-select">
            {rasy.map(r => (
              <option key={r.id} value={r.id}>{r.rasa}</option>
            ))}
          </select>
        </div>
        <div className="mb-2">
          <label className="form-label">Data urodzenia</label>
          <input type="date" name="data_ur" value={dane.data_ur}
            onChange={handleChange} className="form-control" />
        </div>
        <div className="mb-2">
          <label className="form-label">Miot</label>
          <input name="miot" value={dane.miot} onChange={handleChange}
            className="form-control" />
        </div>
        <div className="mb-2">
          <label className="form-label">Opis</label>
          <textarea name="opis" value={dane.opis} onChange={handleChange}
            className="form-control" rows="2" />
        </div>
        <div className="mb-3">
          <label className="form-label">Cena</label>
          <input type="number" name="cena" value={dane.cena}
            onChange={handleChange} className="form-control" />
        </div>
        <button type="submit" className="btn btn-primary me-2">Zapisz zmiany</button>
        <button type="button" className="btn btn-secondary"
          onClick={() => navigate('/swinki')}>Anuluj</button>
      </form>
    </div>
  );
}
export default EdytujSwinke;

FRONTEND — src/pages/Rasy.js

import { useState, useEffect } from 'react';
import axios from 'axios';
import { API_URL } from '../App';

function Rasy() {
  const [rasy, setRasy] = useState([]);

  useEffect(() => {
    axios.get(`${API_URL}/rasy.php`).then(r => setRasy(r.data));
  }, []);

  return (
    <div>
      <h2>Dostępne rasy</h2>
      <ul className="list-group">
        {rasy.map(r => (
          <li key={r.id} className="list-group-item">
            <strong>#{r.id}</strong> — {r.rasa}
          </li>
        ))}
      </ul>
    </div>
  );
}
export default Rasy;

FRONTEND — src/pages/NotFound.js

import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div className="text-center mt-5">
      <h1>404</h1>
      <p>Nie znaleziono strony!</p>
      <Link to="/" className="btn btn-primary">Wróć do Home</Link>
    </div>
  );
}
export default NotFound;

Co warto rozszerzyć (zadania domowe)

• Dodaj filtrowanie świnek po rasie (select w nagłówku tabeli)
• Sortowanie po cenie (rosnąco/malejąco)
• Walidacja: cena nie może być ujemna, imię min. 2 znaki
• Strona szczegółów świnki /swinki/:id (cały opis + duże zdjęcie)
• CRUD też dla ras (dodaj/edytuj/usuń rasę)
• Wynieś logikę API do src/api.js — funkcje getSwinki(), dodajSwinke() itd.
• Backend w innym języku (Node+Express, Python+Flask) — React zostaje bez zmian, tylko API_URL

Backend PHP + MySQL — szczegóły i debugging

Główne kroki budowy zawierają już pełen kod PHP. Tutaj znajdziesz diagram architektury, tabelę typowych błędów i głębsze wyjaśnienia. Otwórz tę sekcję jeśli coś nie działa albo chcesz lepiej zrozumieć co się dzieje pod spodem.

Architektura — kto z kim gada

[React :3000]  ──HTTP──►  [Apache/PHP :80]  ──SQL──►  [MySQL :3306]
  (frontend)              (pośrednik)                (baza)

      axios.get('/swinki')
                ↓
        swinki.php (PHP czyta tabelę)
                ↓
        SELECT * FROM swinki
                ↓
        zwraca JSON do React

Wymagania (XAMPP — uczeń już ma)

• Apache uruchomiony (XAMPP Control Panel → Start)
• MySQL uruchomiony (XAMPP Control Panel → Start)
• Baza hodowla z tabelami rasy i swinki (już jest)
• Folder Apache: C:\xampp\htdocs\ — tu trafią pliki PHP

htdocs/hodowla-api/
├── db.php           ← połączenie z MySQL (PDO)
├── swinki.php       ← CRUD na tabeli swinki
└── rasy.php         ← READ na tabeli rasy

<?php
$host = '127.0.0.1';
$db   = 'hodowla';
$user = 'root';
$pass = '';   // domyślnie XAMPP nie ma hasła
$dsn  = "mysql:host=$host;dbname=$db;charset=utf8mb4";

try {
    $pdo = new PDO($dsn, $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    http_response_code(500);
    header('Content-Type: application/json');
    echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]);
    exit;
}

<?php
// CORS — pozwól Reactowi (z portu 3000) gadać do Apache (port 80)
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Content-Type: application/json; charset=utf-8');

// Preflight (przeglądarka wysyła OPTIONS przed PUT/DELETE — odpowiadamy 204)
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

require 'db.php';

$method = $_SERVER['REQUEST_METHOD'];
$id     = $_GET['id'] ?? null;

switch ($method) {
    case 'GET':
        if ($id) {
            // GET /swinki?id=5 — jedna świnka
            $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
            $stmt->execute([$id]);
            echo json_encode($stmt->fetch());
        } else {
            // GET /swinki — wszystkie
            $stmt = $pdo->query('SELECT * FROM swinki');
            echo json_encode($stmt->fetchAll());
        }
        break;

    case 'POST':
        // POST /swinki — dodaj nową
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare(
            'INSERT INTO swinki (rasy_id, data_ur, miot, opis, imie, cena)
             VALUES (?, ?, ?, ?, ?, ?)'
        );
        $stmt->execute([
            $data['rasy_id'], $data['data_ur'], $data['miot'],
            $data['opis'], $data['imie'], $data['cena']
        ]);
        $newId = $pdo->lastInsertId();
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$newId]);
        echo json_encode($stmt->fetch());
        break;

    case 'PUT':
        // PUT /swinki?id=5 — edytuj
        $data = json_decode(file_get_contents('php://input'), true);
        $stmt = $pdo->prepare(
            'UPDATE swinki SET rasy_id=?, data_ur=?, miot=?, opis=?, imie=?, cena=?
             WHERE id=?'
        );
        $stmt->execute([
            $data['rasy_id'], $data['data_ur'], $data['miot'],
            $data['opis'], $data['imie'], $data['cena'], $id
        ]);
        $stmt = $pdo->prepare('SELECT * FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode($stmt->fetch());
        break;

    case 'DELETE':
        // DELETE /swinki?id=5 — usuń
        $stmt = $pdo->prepare('DELETE FROM swinki WHERE id = ?');
        $stmt->execute([$id]);
        echo json_encode(['ok' => true]);
        break;

    default:
        http_response_code(405);
        echo json_encode(['error' => 'Method not allowed']);
}

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json; charset=utf-8');

require 'db.php';

$stmt = $pdo->query('SELECT * FROM rasy ORDER BY rasa');
echo json_encode($stmt->fetchAll());

// było (json-server):
const API_URL = 'http://localhost:3001';

// teraz (PHP + MySQL):
const API_URL = 'http://localhost/hodowla-api';

npm start

Typowe błędy i jak je naprawić

Co teraz wiesz

• Jak React + axios łączy się z dowolnym backendem REST (json-server, PHP, Node, Python — wszystkie identycznie)
• Jak napisać REST API w PHP używając PDO (bezpiecznie, bez SQL injection)
• Co to CORS i czemu PHP musi go ustawić
• Czemu query string (?id=) jest pewniejszy niż URL rewrite (.htaccess)
• Architektura 3-warstwowa: Frontend → Backend → Baza
• Możesz teraz spiąć React z dowolną tabelą MySQL — schemat zawsze taki sam

Sprawdzian — Hodowla świnek (CRUD + Router)

5 pytań · 5 minut · minimum 60% żeby zdać

Rozgrzewka — Menedżer haseł

Pięć pytań, każde o jedną linijkę dzisiejszego komponentu. Kliknij pytanie, żeby zobaczyć odpowiedź.

Menedżer haseł — Instrukcja

Druga część tego samego arkusza co generator haseł w Pythonie. Jeden komponent React z formularzem i podsumowaniem, ostylowany Bootstrapem na podstawie szablon.txt z archiwum Web1.7z. Na egzaminie można wybrać Angular albo React. Robimy React, bo uczeń zna go z wcześniejszych ćwiczeń.

Jak ma wyglądać (ilustracje z arkusza)

Pierwszy akapit jest niebieski i większy (text-primary lead). Etykieta pola wyboru brzmi „Wygeneruj hasło”. Tego tekstu nie ma w wymaganiach, jest tylko na ilustracji.

Wymagania i gdzie są w kodzie

Pliki: Web1.7z (hasło *LoGiny&H@sla8) i sprawdz_web.js, czyli sprawdzarka z kroku 7.

Menedżer haseł — Budowa krok po kroku

Uczeń pisze u siebie i udostępnia ekran. Cel na egzamin to część II w około 60 minut razem ze zrzutami. Z 180 minut zostaje wtedy zapas na poprawki.

npm create vite@latest web -- --template react
cd web
npm install
npm install bootstrap
npm run dev

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  const [adres, setAdres] = useState('');
  const [login, setLogin] = useState('');
  const [haslo, setHaslo] = useState('');
  const [generuj, setGeneruj] = useState(true);
  const [zapisane, setZapisane] = useState({ adres: '', login: '', haslo: '', generuj: true });

  return (
    <div>
      <h1>Menedżer haseł - wykonał 00000000000</h1>
    </div>
  );
}

export default App;

<form>
  <div class="form-group m-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group m-4">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn ... m-2">Submit</button>
</form>

<form onSubmit={zapisz}>
  <div className="form-group m-4">
    <label htmlFor="adres">Adres WWW:</label>
    <input type="text" className="form-control" id="adres" placeholder="Adres strony WWW"
      value={adres} onChange={(e) => setAdres(e.target.value)} />
  </div>
  <div className="form-group m-4">
    <label htmlFor="login">Login:</label>
    <input type="text" className="form-control" id="login" placeholder="Twój login"
      value={login} onChange={(e) => setLogin(e.target.value)} />
  </div>

  <div className="form-group m-4">
    <input type="checkbox" id="generuj"
      checked={generuj} onChange={(e) => setGeneruj(e.target.checked)} />
    <label htmlFor="generuj" className="ms-1">Wygeneruj hasło</label>
    <br />
    <label htmlFor="haslo">Hasło:</label>
    <input type="password" className="form-control" id="haslo" disabled={generuj}
      value={haslo} onChange={(e) => setHaslo(e.target.value)} />
  </div>
  <button type="submit" className="btn btn-primary m-2">Zapisz</button>
</form>

  function zapisz(e) {
    e.preventDefault();
    setZapisane({ adres: adres, login: login, haslo: haslo, generuj: generuj });
  }

<div>
  <p className="p-2 text-primary lead">Adres: {zapisane.adres}</p>
  <p className="p-2">Login: {zapisane.login}</p>
  <p className="p-2">
    {zapisane.generuj ? 'Hasło automatycznie generowane' : 'Hasło: ' + zapisane.haslo}
  </p>
</div>

OK    nagłówek h1 „Menedżer haseł - wykonał” + numer zdającego
OK    etykieta „Adres WWW:” powiązana z polem
...
OK    podsumowanie NIE zmienia się w trakcie pisania
OK    zaznaczone: „Hasło automatycznie generowane”
OK    po odznaczeniu pole hasła aktywne
OK    odznaczone: „Hasło: <hasło>”
Wynik: 21/21 wymagań spełnionych

System operacyjny: Windows 11 Pro
Środowisko programistyczne: PyCharm Community, Visual Studio Code
Języki programowania: Python, JavaScript (React)

Menedżer haseł — Gotowy kod

Kompletny komponent. Daje 21/21 w sprawdzarce i odtwarza ilustracje 1–3 z arkusza. Pokazujesz go po samodzielnej próbie ucznia.

src/App.jsx

import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  const [adres, setAdres] = useState('');
  const [login, setLogin] = useState('');
  const [haslo, setHaslo] = useState('');
  const [generuj, setGeneruj] = useState(true);
  const [zapisane, setZapisane] = useState({ adres: '', login: '', haslo: '', generuj: true });

  function zapisz(e) {
    e.preventDefault();
    setZapisane({ adres: adres, login: login, haslo: haslo, generuj: generuj });
  }

  return (
    <div>
      <div>
        <h1>Menedżer haseł - wykonał 00000000000</h1>
        <form onSubmit={zapisz}>
          <div className="form-group m-4">
            <label htmlFor="adres">Adres WWW:</label>
            <input type="text" className="form-control" id="adres" placeholder="Adres strony WWW"
              value={adres} onChange={(e) => setAdres(e.target.value)} />
          </div>
          <div className="form-group m-4">
            <label htmlFor="login">Login:</label>
            <input type="text" className="form-control" id="login" placeholder="Twój login"
              value={login} onChange={(e) => setLogin(e.target.value)} />
          </div>
          <div className="form-group m-4">
            <input type="checkbox" id="generuj"
              checked={generuj} onChange={(e) => setGeneruj(e.target.checked)} />
            <label htmlFor="generuj" className="ms-1">Wygeneruj hasło</label>
            <br />
            <label htmlFor="haslo">Hasło:</label>
            <input type="password" className="form-control" id="haslo" disabled={generuj}
              value={haslo} onChange={(e) => setHaslo(e.target.value)} />
          </div>
          <button type="submit" className="btn btn-primary m-2">Zapisz</button>
        </form>
      </div>

      <div>
        <p className="p-2 text-primary lead">Adres: {zapisane.adres}</p>
        <p className="p-2">Login: {zapisane.login}</p>
        <p className="p-2">
          {zapisane.generuj ? 'Hasło automatycznie generowane' : 'Hasło: ' + zapisane.haslo}
        </p>
      </div>
    </div>
  );
}

export default App;

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Jak to czytać

• Pięć stanów: cztery dla pól formularza i jeden (zapisane) dla tego, co pokazuje podsumowanie.
• zapisz() blokuje przeładowanie strony i kopiuje bieżące pola do zapisane.
• Checkbox steruje dwiema rzeczami: disabled pola hasła teraz i treścią trzeciego akapitu po zapisie.

Menedżer haseł — Sprawdzian

5 pytań · 5 minut · minimum 60%, żeby zdać

Rozgrzewka — Galeria zdjęć

Pięć pytań, każde o jedną linijkę dzisiejszego komponentu. Kliknij pytanie, żeby zobaczyć odpowiedź.

Galeria zdjęć — Instrukcja

Druga część tego samego arkusza co klasa z tablicą w Pythonie. Jeden komponent React: trzy przełączniki kategorii i bloki zdjęć z licznikiem pobrań. Na egzaminie można wybrać Angular albo React. Robimy React.

Treść zadania

Jak ma wyglądać (ilustracje z arkusza)

Kolor przycisku arkusz pokazuje tylko na ilustracjach: to btn-success. Zdjęcia mają w archiwum 400 × 266 px, więc trzy mieszczą się w rzędzie bez żadnego skalowania.

Wymagania i gdzie są w kodzie

Pliki: pliki3.zip z maila (hasło K@tegorie)) i sprawdz_galeria.js, czyli sprawdzarka z kroku 7.

Galeria zdjęć — Budowa krok po kroku

Uczeń pisze u siebie i udostępnia ekran. Cel na egzamin: część II w około 45 minut razem ze zrzutami.

npm create vite@latest egzamin -- --template react
cd egzamin
npm install
npm install bootstrap
npm run dev

egzamin/
├── public/
│   └── assets/        <- tu 12 plików obraz1.jpg ... obraz12.jpg
└── src/
    ├── App.jsx        <- cały komponent
    ├── App.css        <- styl zdjęć
    └── main.jsx       <- usunąć import './index.css'

import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';

const ZDJECIA = [
  { id: 0, alt: 'Mak', filename: 'obraz1.jpg', category: 1, downloads: 35 },
  { id: 1, alt: 'Bukiet', filename: 'obraz2.jpg', category: 1, downloads: 43 },
  // ... pozostałe 10 linii z dane.txt
];

function App() {
  const [zdjecia, setZdjecia] = useState(ZDJECIA);
  const [kwiaty, setKwiaty] = useState(true);
  const [zwierzeta, setZwierzeta] = useState(true);
  const [samochody, setSamochody] = useState(true);

  return (
    <div>
      <h1>Kategorie zdjęć</h1>
    </div>
  );
}

export default App;

<div className="form-check form-switch form-check-inline">
  <input className="form-check-input" type="checkbox" id="kwiaty"
    checked={kwiaty} onChange={(e) => setKwiaty(e.target.checked)} />
  <label className="form-check-label" htmlFor="kwiaty">Kwiaty</label>
</div>

  function czyWidoczne(kategoria) {
    if (kategoria === 1) return kwiaty;
    if (kategoria === 2) return zwierzeta;
    if (kategoria === 3) return samochody;
    return false;
  }

<div className="d-flex flex-wrap">
  {zdjecia.map((zdjecie) => czyWidoczne(zdjecie.category) && (
    <div key={zdjecie.id}>
      <img src={'/assets/' + zdjecie.filename} alt={zdjecie.alt} />
      <h4>Pobrań: {zdjecie.downloads}</h4>
      <button className="btn btn-success">Pobierz</button>
    </div>
  ))}
</div>

img {
  margin: 5px;
  border-radius: 8px;
}

  function pobierz(id) {
    setZdjecia(zdjecia.map((zdjecie) =>
      zdjecie.id === id ? { ...zdjecie, downloads: zdjecie.downloads + 1 } : zdjecie
    ));
  }

<button className="btn btn-success" onClick={() => pobierz(zdjecie.id)}>Pobierz</button>

OK    nagłówek h1 „Kategorie zdjęć”
OK    przełączniki w jednym rzędzie, jak na obrazie 2
OK    wszystkie obrazy się wczytują
OK    zdjęcia: margines zewnętrzny 5 px
OK    przycisk zielony jak na obrazach 2-4 (btn-success)
Wyłączam „Zwierzęta” (obraz 3)
OK    zostają kwiaty i samochody (5 zdjęć)
...
OK    po ukryciu i pokazaniu liczba pobrań zostaje (zapisana w tablicy zdjęć)
Wynik: 24/24 wymagań spełnionych

Galeria zdjęć — Gotowy kod

Kompletny komponent. Daje 24/24 w sprawdzarce i odtwarza obrazy 2–4 z arkusza. Pokazujesz go po samodzielnej próbie ucznia.

src/App.jsx

import { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';

const ZDJECIA = [
  { id: 0, alt: 'Mak', filename: 'obraz1.jpg', category: 1, downloads: 35 },
  { id: 1, alt: 'Bukiet', filename: 'obraz2.jpg', category: 1, downloads: 43 },
  { id: 2, alt: 'Dalmatyńczyk', filename: 'obraz3.jpg', category: 2, downloads: 2 },
  { id: 3, alt: 'Świnka morska', filename: 'obraz4.jpg', category: 2, downloads: 53 },
  { id: 4, alt: 'Rottweiler', filename: 'obraz5.jpg', category: 2, downloads: 43 },
  { id: 5, alt: 'Audi', filename: 'obraz6.jpg', category: 3, downloads: 11 },
  { id: 6, alt: 'kotki', filename: 'obraz7.jpg', category: 2, downloads: 22 },
  { id: 7, alt: 'Róża', filename: 'obraz8.jpg', category: 1, downloads: 33 },
  { id: 8, alt: 'Świnka morska', filename: 'obraz9.jpg', category: 2, downloads: 123 },
  { id: 9, alt: 'Foksterier', filename: 'obraz10.jpg', category: 2, downloads: 22 },
  { id: 10, alt: 'Szczeniak', filename: 'obraz11.jpg', category: 2, downloads: 12 },
  { id: 11, alt: 'Garbus', filename: 'obraz12.jpg', category: 3, downloads: 321 },
];

function App() {
  const [zdjecia, setZdjecia] = useState(ZDJECIA);
  const [kwiaty, setKwiaty] = useState(true);
  const [zwierzeta, setZwierzeta] = useState(true);
  const [samochody, setSamochody] = useState(true);

  function czyWidoczne(kategoria) {
    if (kategoria === 1) return kwiaty;
    if (kategoria === 2) return zwierzeta;
    if (kategoria === 3) return samochody;
    return false;
  }

  function pobierz(id) {
    setZdjecia(zdjecia.map((zdjecie) =>
      zdjecie.id === id ? { ...zdjecie, downloads: zdjecie.downloads + 1 } : zdjecie
    ));
  }

  return (
    <div>
      <h1>Kategorie zdjęć</h1>

      <div className="form-check form-switch form-check-inline">
        <input className="form-check-input" type="checkbox" id="kwiaty"
          checked={kwiaty} onChange={(e) => setKwiaty(e.target.checked)} />
        <label className="form-check-label" htmlFor="kwiaty">Kwiaty</label>
      </div>
      <div className="form-check form-switch form-check-inline">
        <input className="form-check-input" type="checkbox" id="zwierzeta"
          checked={zwierzeta} onChange={(e) => setZwierzeta(e.target.checked)} />
        <label className="form-check-label" htmlFor="zwierzeta">Zwierzęta</label>
      </div>
      <div className="form-check form-switch form-check-inline">
        <input className="form-check-input" type="checkbox" id="samochody"
          checked={samochody} onChange={(e) => setSamochody(e.target.checked)} />
        <label className="form-check-label" htmlFor="samochody">Samochody</label>
      </div>

      <div className="d-flex flex-wrap">
        {zdjecia.map((zdjecie) => czyWidoczne(zdjecie.category) && (
          <div key={zdjecie.id}>
            <img src={'/assets/' + zdjecie.filename} alt={zdjecie.alt} />
            <h4>Pobrań: {zdjecie.downloads}</h4>
            <button className="btn btn-success" onClick={() => pobierz(zdjecie.id)}>Pobierz</button>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

src/App.css

img {
  margin: 5px;
  border-radius: 8px;
}

src/main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

Jak to czytać

• Cztery stany: tablica zdjęć i trzy przełączniki.
• map rysuje blok dla każdego zdjęcia, a czyWidoczne(...) && pomija zdjęcia z wyłączonej kategorii.
• pobierz buduje nową tablicę z nowym obiektem klikniętego zdjęcia, więc licznik zmienia się od razu i zostaje po ukryciu kategorii.

Wariant na powtórkę w domu

Dopisz pod przełącznikami akapit „Widocznych zdjęć: N, łącznie pobrań: M”, liczony z aktualnie widocznych bloków. Bez nowego stanu: obie liczby wynikają z zdjecia i trzech przełączników.

Galeria zdjęć — Sprawdzian

5 pytań · 5 minut · minimum 60%, żeby zdać

🔥 Rozgrzewka — Lista zadań

Szybkie pytania na początek lekcji — kliknij pytanie, żeby zobaczyć odpowiedź.

#02 — Lista zadań (Todo App)

Ćwiczenie autorskie w stylu egzaminacyjnym — uczy nowych koncepcji brakujących w #01.

Nowe umiejętności (vs #01 Galeria)

const poczatkowe = [
  { id: 1, tytul: 'Kupić mleko',        priorytet: 1, zrobione: false },
  { id: 2, tytul: 'Zrobić projekt React', priorytet: 3, zrobione: false },
  { id: 3, tytul: 'Odpowiedzieć na maila', priorytet: 2, zrobione: true },
  { id: 4, tytul: 'Posprzątać biurko',  priorytet: 1, zrobione: false },
]

<table class="table table-striped">
<span class="badge bg-success">niski</span>
<span class="badge bg-warning text-dark">średni</span>
<span class="badge bg-danger">wysoki</span>
<input class="form-control" type="text">
<select class="form-select">
<button class="btn btn-success btn-sm">
<button class="btn btn-danger btn-sm">

#02 — Wprowadzenie dla nauczyciela

1. Otwarcie

2. Diagnoza — co pamięta z #01

3. Architektura

App:
  state: zadania     → tablica obiektów {id, tytul, priorytet, zrobione}
  state: nowyTytul   → string (controlled input)
  state: nowyPriorytet → number (controlled select)

  dodaj()   → [...zadania, nowyObiekt]  ← NOWE
  usun(id)  → zadania.filter(...)       ← NOWE
  toggle(id)→ zadania.map(z => ...)     ← jak pobierz() w galerii

  JSX: h1 + formularz + tabela { zadania.map(...) } + licznik

4. Częste blokady

5. Po zbudowaniu

#02 — Wymagania — checklist

#02 — Budowa krok po kroku

# Jeśli nowy projekt:
npm create vite@latest todo -- --template react
cd todo
npm install
npm install bootstrap
npm run dev

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css'

const poczatkowe = [
  { id: 1, tytul: 'Kupić mleko',          priorytet: 1, zrobione: false },
  { id: 2, tytul: 'Zrobić projekt React',   priorytet: 3, zrobione: false },
  { id: 3, tytul: 'Odpowiedzieć na maila',  priorytet: 2, zrobione: true  },
  { id: 4, tytul: 'Posprzątać biurko',      priorytet: 1, zrobione: false },
]

function App() {
  const [zadania, setZadania] = useState(poczatkowe)

  return (
    <div className="container mt-3">
      <h1>Lista zadań</h1>
    </div>
  )
}
export default App

const [nowyTytul, setNowyTytul] = useState('')
const [nowyPriorytet, setNowyPriorytet] = useState(2)

<div className="d-flex gap-2 mb-4">
  <input
    className="form-control"
    type="text"
    placeholder="Wpisz zadanie..."
    value={nowyTytul}
    onChange={(e) => setNowyTytul(e.target.value)}
  />
  <select
    className="form-select"
    style={{ width: '180px' }}
    value={nowyPriorytet}
    onChange={(e) => setNowyPriorytet(Number(e.target.value))}
  >
    <option value={1}>Niski</option>
    <option value={2}>Średni</option>
    <option value={3}>Wysoki</option>
  </select>
  <button className="btn btn-primary">Dodaj</button>
</div>

function dodaj() {
  if (nowyTytul.trim() === '') return

  const nowe = {
    id: Date.now(),
    tytul: nowyTytul,
    priorytet: nowyPriorytet,
    zrobione: false,
  }

  setZadania([...zadania, nowe])
  setNowyTytul('')
}

<button className="btn btn-primary" onClick={dodaj}>Dodaj</button>

<table className="table table-striped">
  <thead>
    <tr>
      <th>Zadanie</th>
      <th>Priorytet</th>
      <th>Status</th>
      <th>Akcje</th>
    </tr>
  </thead>
  <tbody>
    {zadania.map((z) => (
      <tr key={z.id} className={z.zrobione ? 'zrobione' : ''}>
        <td>{z.tytul}</td>
        <td>
          {z.priorytet === 1 && <span className="badge bg-success">niski</span>}
          {z.priorytet === 2 && <span className="badge bg-warning text-dark">średni</span>}
          {z.priorytet === 3 && <span className="badge bg-danger">wysoki</span>}
        </td>
        <td>{z.zrobione ? 'Zrobione' : 'Do zrobienia'}</td>
        <td>
          <button className="btn btn-success btn-sm me-1">✓</button>
          <button className="btn btn-danger btn-sm">✕</button>
        </td>
      </tr>
    ))}
  </tbody>
</table>

function toggle(id) {
  setZadania(zadania.map((z) =>
    z.id === id ? { ...z, zrobione: !z.zrobione } : z
  ))
}

function usun(id) {
  setZadania(zadania.filter((z) => z.id !== id))
}

<button className="btn btn-success btn-sm me-1"
  onClick={() => toggle(z.id)}>✓</button>
<button className="btn btn-danger btn-sm"
  onClick={() => usun(z.id)}>✕</button>

.zrobione td {
  text-decoration: line-through;
  opacity: 0.5;
}

<p className="mt-3 text-muted">
  Zrobione: {zadania.filter((z) => z.zrobione).length} z {zadania.length}
</p>

#02 — Gotowy kod

App.jsx

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css'

const poczatkowe = [
  { id: 1, tytul: 'Kupić mleko',            priorytet: 1, zrobione: false },
  { id: 2, tytul: 'Zrobić projekt React',     priorytet: 3, zrobione: false },
  { id: 3, tytul: 'Odpowiedzieć na maila',    priorytet: 2, zrobione: true  },
  { id: 4, tytul: 'Posprzątać biurko',        priorytet: 1, zrobione: false },
]

function App() {
  const [zadania, setZadania] = useState(poczatkowe)
  const [nowyTytul, setNowyTytul] = useState('')
  const [nowyPriorytet, setNowyPriorytet] = useState(2)

  function dodaj() {
    if (nowyTytul.trim() === '') return
    const nowe = {
      id: Date.now(),
      tytul: nowyTytul,
      priorytet: nowyPriorytet,
      zrobione: false,
    }
    setZadania([...zadania, nowe])
    setNowyTytul('')
  }

  function toggle(id) {
    setZadania(zadania.map((z) =>
      z.id === id ? { ...z, zrobione: !z.zrobione } : z
    ))
  }

  function usun(id) {
    setZadania(zadania.filter((z) => z.id !== id))
  }

  return (
    <div className="container mt-3">
      <h1>Lista zadań</h1>

      <div className="d-flex gap-2 mb-4">
        <input className="form-control" type="text" placeholder="Wpisz zadanie..."
          value={nowyTytul} onChange={(e) => setNowyTytul(e.target.value)} />
        <select className="form-select" style={{ width: '180px' }}
          value={nowyPriorytet} onChange={(e) => setNowyPriorytet(Number(e.target.value))}>
          <option value={1}>Niski</option>
          <option value={2}>Średni</option>
          <option value={3}>Wysoki</option>
        </select>
        <button className="btn btn-primary" onClick={dodaj}>Dodaj</button>
      </div>

      <table className="table table-striped">
        <thead>
          <tr><th>Zadanie</th><th>Priorytet</th><th>Status</th><th>Akcje</th></tr>
        </thead>
        <tbody>
          {zadania.map((z) => (
            <tr key={z.id} className={z.zrobione ? 'zrobione' : ''}>
              <td>{z.tytul}</td>
              <td>
                {z.priorytet === 1 && <span className="badge bg-success">niski</span>}
                {z.priorytet === 2 && <span className="badge bg-warning text-dark">średni</span>}
                {z.priorytet === 3 && <span className="badge bg-danger">wysoki</span>}
              </td>
              <td>{z.zrobione ? 'Zrobione' : 'Do zrobienia'}</td>
              <td>
                <button className="btn btn-success btn-sm me-1" onClick={() => toggle(z.id)}>✓</button>
                <button className="btn btn-danger btn-sm" onClick={() => usun(z.id)}>✕</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <p className="mt-3 text-muted">
        Zrobione: {zadania.filter((z) => z.zrobione).length} z {zadania.length}
      </p>
    </div>
  )
}
export default App

App.css

.zrobione td {
  text-decoration: line-through;
  opacity: 0.5;
}

📝 Sprawdzian — Lista zadań

5 pytań · 5 minut · minimum 60% żeby zdać

🔥 Rozgrzewka — Tracker wydatków

Szybkie pytania na początek lekcji — kliknij pytanie, żeby zobaczyć odpowiedź.

#03 — Tracker Wydatków (Expense Tracker)

Ćwiczenie autorskie w stylu egzaminacyjnym — uczy nowych koncepcji brakujących w #01 i #02.

Nowe umiejętności (vs #01 + #02)

const poczatkowe = [
  { id: 1, nazwa: 'Zakupy spożywcze',     kwota: 127.50, kategoria: 'jedzenie'  },
  { id: 2, nazwa: 'Bilet miesięczny',      kwota: 99.00,  kategoria: 'transport' },
  { id: 3, nazwa: 'Netflix',               kwota: 43.00,  kategoria: 'rozrywka'  },
  { id: 4, nazwa: 'Obiad w restauracji',   kwota: 65.00,  kategoria: 'jedzenie'  },
  { id: 5, nazwa: 'Książka React',         kwota: 89.00,  kategoria: 'edukacja'  },
]

<div class="card">
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>
<div class="alert alert-warning">Uwaga!</div>
<input class="form-control" type="number" step="0.01">
<span class="badge bg-success">jedzenie</span>

#03 — Wprowadzenie dla nauczyciela

1. Otwarcie

2. Diagnoza — co pamięta z #01 i #02

3. Architektura

App:
  state: wydatki      → tablica obiektów {id, nazwa, kwota, kategoria}
  state: nowaNazwa    → string (controlled input)
  state: nowaKwota    → string (controlled input type number)
  state: nowaKategoria → string (controlled select)
  state: szukaj       → string (wyszukiwarka)

  computed: widoczne  = wydatki.filter(w => w.nazwa.toLowerCase().includes(...))
  computed: suma      = wydatki.reduce((s, w) => s + w.kwota, 0)  ← NOWE!
  computed: srednia   = suma / wydatki.length

  dodaj()  → [...wydatki, nowy] + parseFloat(nowaKwota)
  usun(id) → wydatki.filter(...)

  JSX: h1 + card(suma) + wyszukiwarka + formularz + tabela + alert(suma>1000)

4. Mini-lekcja: .reduce()

// Pseudokod:
[10, 20, 30].reduce((suma, el) => suma + el, 0)
// Krok 1: suma=0,  el=10 → return 10
// Krok 2: suma=10, el=20 → return 30
// Krok 3: suma=30, el=30 → return 60
// Wynik: 60

5. Częste blokady

6. Po zbudowaniu

#03 — Wymagania — checklist

#03 — Budowa krok po kroku

# Jeśli nowy:
npm create vite@latest tracker -- --template react
cd tracker
npm install
npm install bootstrap
npm run dev

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css'

const poczatkowe = [
  { id: 1, nazwa: 'Zakupy spożywcze',   kwota: 127.50, kategoria: 'jedzenie'  },
  { id: 2, nazwa: 'Bilet miesięczny',    kwota: 99.00,  kategoria: 'transport' },
  { id: 3, nazwa: 'Netflix',             kwota: 43.00,  kategoria: 'rozrywka'  },
  { id: 4, nazwa: 'Obiad w restauracji', kwota: 65.00,  kategoria: 'jedzenie'  },
  { id: 5, nazwa: 'Książka React',       kwota: 89.00,  kategoria: 'edukacja'  },
]

function App() {
  const [wydatki, setWydatki] = useState(poczatkowe)

  return (
    <div className="container mt-3">
      <h1>Tracker wydatków</h1>
    </div>
  )
}
export default App

const [nowaNazwa, setNowaNazwa] = useState('')
const [nowaKwota, setNowaKwota] = useState('')
const [nowaKategoria, setNowaKategoria] = useState('jedzenie')

<div className="d-flex gap-2 mb-4">
  <input className="form-control" type="text" placeholder="Nazwa wydatku..."
    value={nowaNazwa} onChange={(e) => setNowaNazwa(e.target.value)} />
  <input className="form-control" type="number" step="0.01" placeholder="Kwota"
    style={{ width: '150px' }}
    value={nowaKwota} onChange={(e) => setNowaKwota(e.target.value)} />
  <select className="form-select" style={{ width: '180px' }}
    value={nowaKategoria} onChange={(e) => setNowaKategoria(e.target.value)}>
    <option value="jedzenie">Jedzenie</option>
    <option value="transport">Transport</option>
    <option value="rozrywka">Rozrywka</option>
    <option value="edukacja">Edukacja</option>
  </select>
  <button className="btn btn-primary">Dodaj</button>
</div>

function dodaj() {
  if (nowaNazwa.trim() === '') return
  if (!nowaKwota || parseFloat(nowaKwota) <= 0) return

  const nowy = {
    id: Date.now(),
    nazwa: nowaNazwa,
    kwota: parseFloat(nowaKwota),
    kategoria: nowaKategoria,
  }

  setWydatki([...wydatki, nowy])
  setNowaNazwa('')
  setNowaKwota('')
}

<button className="btn btn-primary" onClick={dodaj}>Dodaj</button>

function usun(id) {
  setWydatki(wydatki.filter((w) => w.id !== id))
}

function kolorBadge(kat) {
  if (kat === 'jedzenie')  return 'bg-success'
  if (kat === 'transport') return 'bg-primary'
  if (kat === 'rozrywka')  return 'bg-purple'
  if (kat === 'edukacja')  return 'bg-warning text-dark'
  return 'bg-secondary'
}

<table className="table table-hover">
  <thead>
    <tr><th>Nazwa</th><th>Kwota</th><th>Kategoria</th><th>Akcje</th></tr>
  </thead>
  <tbody>
    {wydatki.map((w) => (
      <tr key={w.id}>
        <td>{w.nazwa}</td>
        <td>{w.kwota.toFixed(2)} zł</td>
        <td><span className={`badge ${kolorBadge(w.kategoria)}`}>{w.kategoria}</span></td>
        <td><button className="btn btn-danger btn-sm" onClick={() => usun(w.id)}>Usuń</button></td>
      </tr>
    ))}
  </tbody>
</table>

const [szukaj, setSzukaj] = useState('')

const widoczne = wydatki.filter((w) =>
  w.nazwa.toLowerCase().includes(szukaj.toLowerCase())
)

<input className="form-control mb-3" type="text" placeholder="🔍 Szukaj wydatku..."
  value={szukaj} onChange={(e) => setSzukaj(e.target.value)} />

const suma = wydatki.reduce((s, w) => s + w.kwota, 0)
const srednia = wydatki.length > 0 ? suma / wydatki.length : 0

<div className="card mb-4">
  <div className="card-body d-flex justify-content-around text-center">
    <div>
      <h5 className="card-title">Suma</h5>
      <p className="card-text fs-4">{suma.toFixed(2)} zł</p>
    </div>
    <div>
      <h5 className="card-title">Pozycji</h5>
      <p className="card-text fs-4">{wydatki.length}</p>
    </div>
    <div>
      <h5 className="card-title">Średnia</h5>
      <p className="card-text fs-4">{srednia.toFixed(2)} zł</p>
    </div>
  </div>
</div>

{suma > 1000 && (
  <div className="alert alert-warning">
    ⚠️ Uwaga! Przekroczono budżet 1000 zł — suma: {suma.toFixed(2)} zł
  </div>
)}

.bg-purple {
  background-color: #6f42c1;
  color: white;
}

#03 — Gotowy kod

App.jsx

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import './App.css'

const poczatkowe = [
  { id: 1, nazwa: 'Zakupy spożywcze',   kwota: 127.50, kategoria: 'jedzenie'  },
  { id: 2, nazwa: 'Bilet miesięczny',    kwota: 99.00,  kategoria: 'transport' },
  { id: 3, nazwa: 'Netflix',             kwota: 43.00,  kategoria: 'rozrywka'  },
  { id: 4, nazwa: 'Obiad w restauracji', kwota: 65.00,  kategoria: 'jedzenie'  },
  { id: 5, nazwa: 'Książka React',       kwota: 89.00,  kategoria: 'edukacja'  },
]

function App() {
  const [wydatki, setWydatki] = useState(poczatkowe)
  const [nowaNazwa, setNowaNazwa] = useState('')
  const [nowaKwota, setNowaKwota] = useState('')
  const [nowaKategoria, setNowaKategoria] = useState('jedzenie')
  const [szukaj, setSzukaj] = useState('')

  const widoczne = wydatki.filter((w) =>
    w.nazwa.toLowerCase().includes(szukaj.toLowerCase())
  )

  const suma = wydatki.reduce((s, w) => s + w.kwota, 0)
  const srednia = wydatki.length > 0 ? suma / wydatki.length : 0

  function dodaj() {
    if (nowaNazwa.trim() === '') return
    if (!nowaKwota || parseFloat(nowaKwota) <= 0) return
    const nowy = {
      id: Date.now(),
      nazwa: nowaNazwa,
      kwota: parseFloat(nowaKwota),
      kategoria: nowaKategoria,
    }
    setWydatki([...wydatki, nowy])
    setNowaNazwa('')
    setNowaKwota('')
  }

  function usun(id) {
    setWydatki(wydatki.filter((w) => w.id !== id))
  }

  function kolorBadge(kat) {
    if (kat === 'jedzenie')  return 'bg-success'
    if (kat === 'transport') return 'bg-primary'
    if (kat === 'rozrywka')  return 'bg-purple'
    if (kat === 'edukacja')  return 'bg-warning text-dark'
    return 'bg-secondary'
  }

  return (
    <div className="container mt-3">
      <h1>Tracker wydatków</h1>

      <div className="card mb-4">
        <div className="card-body d-flex justify-content-around text-center">
          <div>
            <h5 className="card-title">Suma</h5>
            <p className="card-text fs-4">{suma.toFixed(2)} zł</p>
          </div>
          <div>
            <h5 className="card-title">Pozycji</h5>
            <p className="card-text fs-4">{wydatki.length}</p>
          </div>
          <div>
            <h5 className="card-title">Średnia</h5>
            <p className="card-text fs-4">{srednia.toFixed(2)} zł</p>
          </div>
        </div>
      </div>

      {suma > 1000 && (
        <div className="alert alert-warning">
          ⚠️ Uwaga! Przekroczono budżet 1000 zł — suma: {suma.toFixed(2)} zł
        </div>
      )}

      <input className="form-control mb-3" type="text" placeholder="🔍 Szukaj wydatku..."
        value={szukaj} onChange={(e) => setSzukaj(e.target.value)} />

      <div className="d-flex gap-2 mb-4">
        <input className="form-control" type="text" placeholder="Nazwa wydatku..."
          value={nowaNazwa} onChange={(e) => setNowaNazwa(e.target.value)} />
        <input className="form-control" type="number" step="0.01" placeholder="Kwota"
          style={{ width: '150px' }}
          value={nowaKwota} onChange={(e) => setNowaKwota(e.target.value)} />
        <select className="form-select" style={{ width: '180px' }}
          value={nowaKategoria} onChange={(e) => setNowaKategoria(e.target.value)}>
          <option value="jedzenie">Jedzenie</option>
          <option value="transport">Transport</option>
          <option value="rozrywka">Rozrywka</option>
          <option value="edukacja">Edukacja</option>
        </select>
        <button className="btn btn-primary" onClick={dodaj}>Dodaj</button>
      </div>

      <table className="table table-hover">
        <thead>
          <tr><th>Nazwa</th><th>Kwota</th><th>Kategoria</th><th>Akcje</th></tr>
        </thead>
        <tbody>
          {widoczne.map((w) => (
            <tr key={w.id}>
              <td>{w.nazwa}</td>
              <td>{w.kwota.toFixed(2)} zł</td>
              <td><span className={`badge ${kolorBadge(w.kategoria)}`}>{w.kategoria}</span></td>
              <td><button className="btn btn-danger btn-sm" onClick={() => usun(w.id)}>Usuń</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
export default App

App.css

.bg-purple {
  background-color: #6f42c1;
  color: white;
}

📝 Sprawdzian — Tracker wydatków

5 pytań · 5 minut · minimum 60% żeby zdać

🔥 Rozgrzewka — Dziennik ocen

Szybkie pytania na początek lekcji — kliknij pytanie, żeby zobaczyć odpowiedź.

#04 — Dziennik ocen

📄 Instrukcja egzaminacyjna

Treść zadania

Napisz aplikację Dziennik ocen w React + Bootstrap. Aplikacja wyświetla listę ocen w tabeli, pozwala dodawać nowe, edytować istniejące, usuwać, sortować po kolumnach i filtrować po przedmiocie.

Dane początkowe

const poczatkowe = [
  { id: 1, uczen: 'Anna Kowalska',    przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-15' },
  { id: 2, uczen: 'Jan Nowak',        przedmiot: 'Fizyka',      ocena: 2, data: '2025-01-16' },
  { id: 3, uczen: 'Anna Kowalska',    przedmiot: 'Informatyka', ocena: 5, data: '2025-01-17' },
  { id: 4, uczen: 'Marta Wiśniewska', przedmiot: 'Matematyka',  ocena: 3, data: '2025-01-18' },
  { id: 5, uczen: 'Jan Nowak',        przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-20' },
  { id: 6, uczen: 'Marta Wiśniewska', przedmiot: 'Informatyka', ocena: 5, data: '2025-01-22' },
]

Wymagania funkcjonalne

1. Wyświetlanie ocen w tabeli z kolumnami: Uczeń, Przedmiot, Ocena (badge kolorowy), Data, Akcje
2. Dodawanie nowej oceny — formularz: imię ucznia (text), przedmiot (text), ocena (select 1-6)
3. Edycja istniejącej oceny — kliknięcie ✎ wypełnia formularz, przycisk zmienia tekst na „Zapisz"
4. Usuwanie oceny przyciskiem ✕
5. Sortowanie — kliknięcie w nagłówek kolumny sortuje rosnąco/malejąco (▲/▼)
6. Filtrowanie po przedmiocie — select z dynamicznie generowanymi opcjami
7. Karta podsumowania — liczba ocen, średnia (.toFixed(2)), liczba przedmiotów
8. Alert ostrzegawczy gdy średnia < 3.0

Przykłady Bootstrap do użycia

#04 — Wprowadzenie do lekcji

Diagnoza — co już umiesz z #01–#03

Co nowego w #04

Mini-lekcja: .find()

const oceny = [
  { id: 1, uczen: 'Anna', ocena: 4 },
  { id: 2, uczen: 'Jan',  ocena: 5 },
]

const znaleziony = oceny.find(o => o.id === 2)
// { id: 2, uczen: 'Jan', ocena: 5 }

Mini-lekcja: .sort()

const liczby = [3, 1, 4, 1, 5]

// ⚠️ .sort() MUTUJE oryginalną tablicę!
// Dlatego zawsze robimy kopię: [...tablica].sort()

const rosnaco = [...liczby].sort((a, b) => a - b)   // [1, 1, 3, 4, 5]
const malejaco = [...liczby].sort((a, b) => b - a)   // [5, 4, 3, 1, 1]

// Sortowanie stringów:
const imiona = ['Jan', 'Anna', 'Marta']
const posortowane = [...imiona].sort((a, b) => {
  if (a < b) return -1
  if (a > b) return 1
  return 0
})

Mini-lekcja: [...new Set()]

const przedmioty = ['Matma', 'Fizyka', 'Matma', 'Informatyka', 'Fizyka']

const unikalne = [...new Set(przedmioty)]
// ['Matma', 'Fizyka', 'Informatyka']

Architektura aplikacji

App
├── state: oceny[], nowyUczen, nowyPrzedmiot, nowaOcena, edytowanyId
├── state: sortKolumna, sortRosnaco, filtrPrzedmiot
├── computed: przedmioty = [...new Set(oceny.map(...))]
├── computed: przefiltrowane = oceny.filter(...)
├── computed: posortowane = [...przefiltrowane].sort(...)
├── computed: srednia = oceny.reduce(...) / oceny.length
├── dodaj()     → add NEW  or  SAVE EDIT (based on edytowanyId)
├── edytuj(id)  → .find() → fill form → set edytowanyId
├── usun(id)    → .filter() → clear edit if needed
├── zmienSort() → toggle direction or change column
└── kolorOceny()→ badge class by grade

#04 — Lista wymagań

#04 — Budowa krok po kroku

npm create vite@latest dziennik -- --template react
cd dziennik
npm install
npm install bootstrap

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'

function App() {
  return (
    <div className="container mt-3">
      <h1>Dziennik ocen</h1>
      <p>Zaraz tu będzie apka!</p>
    </div>
  )
}

export default App

const poczatkowe = [
  { id: 1, uczen: 'Anna Kowalska',    przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-15' },
  { id: 2, uczen: 'Jan Nowak',        przedmiot: 'Fizyka',      ocena: 2, data: '2025-01-16' },
  { id: 3, uczen: 'Anna Kowalska',    przedmiot: 'Informatyka', ocena: 5, data: '2025-01-17' },
  { id: 4, uczen: 'Marta Wiśniewska', przedmiot: 'Matematyka',  ocena: 3, data: '2025-01-18' },
  { id: 5, uczen: 'Jan Nowak',        przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-20' },
  { id: 6, uczen: 'Marta Wiśniewska', przedmiot: 'Informatyka', ocena: 5, data: '2025-01-22' },
]

function App() {
  // Dane
  const [oceny, setOceny] = useState(poczatkowe)
  const [nowyUczen, setNowyUczen] = useState('')
  const [nowyPrzedmiot, setNowyPrzedmiot] = useState('')
  const [nowaOcena, setNowaOcena] = useState(3)

  // Na razie return ze szkieletem
  return (
    <div className="container mt-3">
      <h1>Dziennik ocen</h1>
      <p>Ocen: {oceny.length}</p>
    </div>
  )
}

<div className="d-flex gap-2 mb-3">
  <input className="form-control" type="text" placeholder="Uczeń..."
    value={nowyUczen} onChange={(e) => setNowyUczen(e.target.value)} />

  <input className="form-control" type="text" placeholder="Przedmiot..."
    value={nowyPrzedmiot} onChange={(e) => setNowyPrzedmiot(e.target.value)} />

  <select className="form-select" style={{ width: '120px' }}
    value={nowaOcena} onChange={(e) => setNowaOcena(Number(e.target.value))}>
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
    <option value={4}>4</option>
    <option value={5}>5</option>
    <option value={6}>6</option>
  </select>

  <button className="btn btn-primary" onClick={dodaj}>Dodaj</button>
</div>

function dodaj() {
  if (nowyUczen.trim() === '' || nowyPrzedmiot.trim() === '') return

  const nowy = {
    id: Date.now(),
    uczen: nowyUczen,
    przedmiot: nowyPrzedmiot,
    ocena: nowaOcena,
    data: new Date().toISOString().slice(0, 10),
  }

  setOceny([...oceny, nowy])
  setNowyUczen('')
  setNowyPrzedmiot('')
  setNowaOcena(3)
}

function kolorOceny(ocena) {
  if (ocena <= 2) return 'bg-danger'
  if (ocena === 3) return 'bg-warning text-dark'
  if (ocena <= 5) return 'bg-success'
  return 'bg-primary'
}

function usun(id) {
  setOceny(oceny.filter(o => o.id !== id))
}

<table className="table table-striped">
  <thead>
    <tr>
      <th>Uczeń</th>
      <th>Przedmiot</th>
      <th>Ocena</th>
      <th>Data</th>
      <th>Akcje</th>
    </tr>
  </thead>
  <tbody>
    {oceny.map(o => (
      <tr key={o.id}>
        <td>{o.uczen}</td>
        <td>{o.przedmiot}</td>
        <td><span className={`badge ${kolorOceny(o.ocena)}`}>{o.ocena}</span></td>
        <td>{o.data}</td>
        <td>
          <button className="btn btn-danger btn-sm" onClick={() => usun(o.id)}>✕</button>
        </td>
      </tr>
    ))}
  </tbody>
</table>

const [edytowanyId, setEdytowanyId] = useState(null)

function edytuj(id) {
  const o = oceny.find(o => o.id === id)
  setNowyUczen(o.uczen)
  setNowyPrzedmiot(o.przedmiot)
  setNowaOcena(o.ocena)
  setEdytowanyId(id)
}

function dodaj() {
  if (nowyUczen.trim() === '' || nowyPrzedmiot.trim() === '') return

  if (edytowanyId !== null) {
    // TRYB EDYCJI — aktualizuj istniejący obiekt
    setOceny(oceny.map(o =>
      o.id === edytowanyId
        ? { ...o, uczen: nowyUczen, przedmiot: nowyPrzedmiot, ocena: nowaOcena }
        : o
    ))
    setEdytowanyId(null)
  } else {
    // TRYB DODAWANIA — nowy obiekt
    const nowy = {
      id: Date.now(),
      uczen: nowyUczen,
      przedmiot: nowyPrzedmiot,
      ocena: nowaOcena,
      data: new Date().toISOString().slice(0, 10),
    }
    setOceny([...oceny, nowy])
  }

  setNowyUczen('')
  setNowyPrzedmiot('')
  setNowaOcena(3)
}

function usun(id) {
  setOceny(oceny.filter(o => o.id !== id))
  if (edytowanyId === id) setEdytowanyId(null)
}

<button className={`btn ${edytowanyId ? 'btn-warning' : 'btn-primary'}`}
  onClick={dodaj}>
  {edytowanyId ? 'Zapisz' : 'Dodaj'}
</button>

{edytowanyId && (
  <button className="btn btn-secondary" onClick={() => {
    setEdytowanyId(null); setNowyUczen(''); setNowyPrzedmiot(''); setNowaOcena(3);
  }}>Anuluj</button>
)}

<td>
  <button className="btn btn-warning btn-sm me-1" onClick={() => edytuj(o.id)}>✎</button>
  <button className="btn btn-danger btn-sm" onClick={() => usun(o.id)}>✕</button>
</td>

const [sortKolumna, setSortKolumna] = useState('data')
const [sortRosnaco, setSortRosnaco] = useState(true)

function zmienSort(kolumna) {
  if (sortKolumna === kolumna) {
    setSortRosnaco(!sortRosnaco)
  } else {
    setSortKolumna(kolumna)
    setSortRosnaco(true)
  }
}

const posortowane = [...oceny].sort((a, b) => {
  if (a[sortKolumna] < b[sortKolumna]) return sortRosnaco ? -1 : 1
  if (a[sortKolumna] > b[sortKolumna]) return sortRosnaco ? 1 : -1
  return 0
})

{posortowane.map(o => (...))}

<thead>
  <tr>
    <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('uczen')}>
      Uczeń {sortKolumna === 'uczen' ? (sortRosnaco ? '▲' : '▼') : ''}
    </th>
    <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('przedmiot')}>
      Przedmiot {sortKolumna === 'przedmiot' ? (sortRosnaco ? '▲' : '▼') : ''}
    </th>
    <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('ocena')}>
      Ocena {sortKolumna === 'ocena' ? (sortRosnaco ? '▲' : '▼') : ''}
    </th>
    <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('data')}>
      Data {sortKolumna === 'data' ? (sortRosnaco ? '▲' : '▼') : ''}
    </th>
    <th>Akcje</th>
  </tr>
</thead>

const [filtrPrzedmiot, setFiltrPrzedmiot] = useState('')

const przedmioty = [...new Set(oceny.map(o => o.przedmiot))]

const przefiltrowane = oceny.filter(o =>
  filtrPrzedmiot === '' || o.przedmiot === filtrPrzedmiot
)

const posortowane = [...przefiltrowane].sort((a, b) => {
  if (a[sortKolumna] < b[sortKolumna]) return sortRosnaco ? -1 : 1
  if (a[sortKolumna] > b[sortKolumna]) return sortRosnaco ? 1 : -1
  return 0
})

const srednia = oceny.length > 0
  ? oceny.reduce((s, o) => s + o.ocena, 0) / oceny.length
  : 0

<div className="card mb-4">
  <div className="card-body d-flex justify-content-around text-center">
    <div>
      <h5 className="card-title">Ocen</h5>
      <p className="card-text fs-4">{oceny.length}</p>
    </div>
    <div>
      <h5 className="card-title">Średnia</h5>
      <p className="card-text fs-4">{srednia.toFixed(2)}</p>
    </div>
    <div>
      <h5 className="card-title">Przedmiotów</h5>
      <p className="card-text fs-4">{przedmioty.length}</p>
    </div>
  </div>
</div>

<select className="form-select mb-3" style={{ width: '220px' }}
  value={filtrPrzedmiot} onChange={(e) => setFiltrPrzedmiot(e.target.value)}>
  <option value="">Wszystkie przedmioty</option>
  {przedmioty.map(p => (
    <option key={p} value={p}>{p}</option>
  ))}
</select>

{oceny.length > 0 && srednia < 3 && (
  <div className="alert alert-danger">
    ⚠️ Uwaga! Średnia ocen poniżej 3.0 — potrzebna poprawa!
  </div>
)}

#04 — Gotowy kod

App.jsx

import { useState } from 'react'
import 'bootstrap/dist/css/bootstrap.css'

const poczatkowe = [
  { id: 1, uczen: 'Anna Kowalska',    przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-15' },
  { id: 2, uczen: 'Jan Nowak',        przedmiot: 'Fizyka',      ocena: 2, data: '2025-01-16' },
  { id: 3, uczen: 'Anna Kowalska',    przedmiot: 'Informatyka', ocena: 5, data: '2025-01-17' },
  { id: 4, uczen: 'Marta Wiśniewska', przedmiot: 'Matematyka',  ocena: 3, data: '2025-01-18' },
  { id: 5, uczen: 'Jan Nowak',        przedmiot: 'Matematyka',  ocena: 4, data: '2025-01-20' },
  { id: 6, uczen: 'Marta Wiśniewska', przedmiot: 'Informatyka', ocena: 5, data: '2025-01-22' },
]

function App() {
  const [oceny, setOceny] = useState(poczatkowe)
  const [nowyUczen, setNowyUczen] = useState('')
  const [nowyPrzedmiot, setNowyPrzedmiot] = useState('')
  const [nowaOcena, setNowaOcena] = useState(3)
  const [edytowanyId, setEdytowanyId] = useState(null)

  const [sortKolumna, setSortKolumna] = useState('data')
  const [sortRosnaco, setSortRosnaco] = useState(true)
  const [filtrPrzedmiot, setFiltrPrzedmiot] = useState('')

  const przedmioty = [...new Set(oceny.map(o => o.przedmiot))]

  const przefiltrowane = oceny.filter(o =>
    filtrPrzedmiot === '' || o.przedmiot === filtrPrzedmiot
  )

  const posortowane = [...przefiltrowane].sort((a, b) => {
    if (a[sortKolumna] < b[sortKolumna]) return sortRosnaco ? -1 : 1
    if (a[sortKolumna] > b[sortKolumna]) return sortRosnaco ? 1 : -1
    return 0
  })

  const srednia = oceny.length > 0
    ? oceny.reduce((s, o) => s + o.ocena, 0) / oceny.length
    : 0

  function dodaj() {
    if (nowyUczen.trim() === '' || nowyPrzedmiot.trim() === '') return

    if (edytowanyId !== null) {
      setOceny(oceny.map(o =>
        o.id === edytowanyId
          ? { ...o, uczen: nowyUczen, przedmiot: nowyPrzedmiot, ocena: nowaOcena }
          : o
      ))
      setEdytowanyId(null)
    } else {
      const nowy = {
        id: Date.now(),
        uczen: nowyUczen,
        przedmiot: nowyPrzedmiot,
        ocena: nowaOcena,
        data: new Date().toISOString().slice(0, 10),
      }
      setOceny([...oceny, nowy])
    }

    setNowyUczen('')
    setNowyPrzedmiot('')
    setNowaOcena(3)
  }

  function edytuj(id) {
    const o = oceny.find(o => o.id === id)
    setNowyUczen(o.uczen)
    setNowyPrzedmiot(o.przedmiot)
    setNowaOcena(o.ocena)
    setEdytowanyId(id)
  }

  function usun(id) {
    setOceny(oceny.filter(o => o.id !== id))
    if (edytowanyId === id) setEdytowanyId(null)
  }

  function zmienSort(kolumna) {
    if (sortKolumna === kolumna) {
      setSortRosnaco(!sortRosnaco)
    } else {
      setSortKolumna(kolumna)
      setSortRosnaco(true)
    }
  }

  function kolorOceny(ocena) {
    if (ocena <= 2) return 'bg-danger'
    if (ocena === 3) return 'bg-warning text-dark'
    if (ocena <= 5) return 'bg-success'
    return 'bg-primary'
  }

  return (
    <div className="container mt-3">
      <h1>Dziennik ocen</h1>

      <div className="card mb-4">
        <div className="card-body d-flex justify-content-around text-center">
          <div>
            <h5 className="card-title">Ocen</h5>
            <p className="card-text fs-4">{oceny.length}</p>
          </div>
          <div>
            <h5 className="card-title">Średnia</h5>
            <p className="card-text fs-4">{srednia.toFixed(2)}</p>
          </div>
          <div>
            <h5 className="card-title">Przedmiotów</h5>
            <p className="card-text fs-4">{przedmioty.length}</p>
          </div>
        </div>
      </div>

      <div className="d-flex gap-2 mb-3">
        <input className="form-control" type="text" placeholder="Uczeń..."
          value={nowyUczen} onChange={(e) => setNowyUczen(e.target.value)} />
        <input className="form-control" type="text" placeholder="Przedmiot..."
          value={nowyPrzedmiot} onChange={(e) => setNowyPrzedmiot(e.target.value)} />
        <select className="form-select" style={{ width: '120px' }}
          value={nowaOcena} onChange={(e) => setNowaOcena(Number(e.target.value))}>
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
          <option value={6}>6</option>
        </select>
        <button className={`btn ${edytowanyId ? 'btn-warning' : 'btn-primary'}`}
          onClick={dodaj}>
          {edytowanyId ? 'Zapisz' : 'Dodaj'}
        </button>
        {edytowanyId && (
          <button className="btn btn-secondary" onClick={() => {
            setEdytowanyId(null); setNowyUczen(''); setNowyPrzedmiot(''); setNowaOcena(3);
          }}>Anuluj</button>
        )}
      </div>

      <select className="form-select mb-3" style={{ width: '220px' }}
        value={filtrPrzedmiot} onChange={(e) => setFiltrPrzedmiot(e.target.value)}>
        <option value="">Wszystkie przedmioty</option>
        {przedmioty.map(p => (
          <option key={p} value={p}>{p}</option>
        ))}
      </select>

      <table className="table table-striped">
        <thead>
          <tr>
            <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('uczen')}>
              Uczeń {sortKolumna === 'uczen' ? (sortRosnaco ? '▲' : '▼') : ''}
            </th>
            <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('przedmiot')}>
              Przedmiot {sortKolumna === 'przedmiot' ? (sortRosnaco ? '▲' : '▼') : ''}
            </th>
            <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('ocena')}>
              Ocena {sortKolumna === 'ocena' ? (sortRosnaco ? '▲' : '▼') : ''}
            </th>
            <th style={{ cursor: 'pointer' }} onClick={() => zmienSort('data')}>
              Data {sortKolumna === 'data' ? (sortRosnaco ? '▲' : '▼') : ''}
            </th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody>
          {posortowane.map(o => (
            <tr key={o.id}>
              <td>{o.uczen}</td>
              <td>{o.przedmiot}</td>
              <td><span className={`badge ${kolorOceny(o.ocena)}`}>{o.ocena}</span></td>
              <td>{o.data}</td>
              <td>
                <button className="btn btn-warning btn-sm me-1" onClick={() => edytuj(o.id)}>✎</button>
                <button className="btn btn-danger btn-sm" onClick={() => usun(o.id)}>✕</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {oceny.length > 0 && srednia < 3 && (
        <div className="alert alert-danger">
          ⚠️ Uwaga! Średnia ocen poniżej 3.0 — potrzebna poprawa!
        </div>
      )}
    </div>
  )
}

export default App

📝 Sprawdzian — Dziennik ocen

5 pytań · 5 minut · minimum 60% żeby zdać

📝 Ściąga React

npm create vite@latest app -- --template react
cd app; npm install

import { useState } from 'react'

const [x, setX] = useState(0)
setX(x + 1)

const [l, setL] = useState([])
setL([...l, nowy])

setL(l.map(el =>
  el.id === id
    ? { ...el, pole: nowa }
    : el
))

setL(l.filter(el =>
  el.id !== id
))

const w = arr.filter(el =>
  el.category === 1
)

{lista.map(el => (
  <div key={el.id}>{el.x}</div>
))}

<input value={x}
  onChange={e => setX(e.target.value)} />

<input type="checkbox"
  checked={on}
  onChange={e => setOn(e.target.checked)} />

<select value={x}
  onChange={e => setX(Number(e.target.value))}>
  <option value={1}>A</option>
</select>

{warunek ? <A /> : <B />}

{warunek && <A />}

const n = { ...stary, pole: 'x' }
const a2 = [...a1, nowy]

className={ok ? 'done' : ''}
className={`base ${ok ? 'done' : ''}`}

<div className="form-check form-switch">
  <input className="form-check-input"
    type="checkbox" checked={x}
    onChange={e => setX(e.target.checked)} />
  <label className="form-check-label">
    Label</label>
</div>

🐛 Typowe błędy

// ❌ <div class="box">  ✅ <div className="box">

// ❌ <label for="x">  ✅ <label htmlFor="x">

// ❌ onClick={pobierz(id)}       → od razu
// ✅ onClick={() => pobierz(id)} → po kliknięciu

// ❌ z.downloads++          ✅ { ...z, downloads: z.downloads + 1 }
// ❌ arr.push(x)            ✅ [...arr, x]
// ❌ arr.splice(i, 1)       ✅ arr.filter(el => el.id !== id)

// ❌ {l.map(el => <div>...</div>)}
// ✅ {l.map(el => <div key={el.id}>...</div>)}

import 'bootstrap/dist/css/bootstrap.css'

// ❌ <img src="x">  ✅ <img src="x" />

// ❌ <input checked={x} />
// ✅ <input checked={x} onChange={e => setX(e.target.checked)} />

// select/number input zwraca STRING
// ❌ setX(e.target.value)           → "2" (string)
// ✅ setX(Number(e.target.value))   → 2 (number)

1. Co to Angular?

Angular to framework od Google do budowy aplikacji SPA (Single Page Application). Używa TypeScript zamiast czystego JavaScript.

Angular vs React

Kluczowe koncepcje

• Komponenty — bloki UI z własnym HTML, CSS, TS
• Moduły — grupują komponenty, serwisy, routing
• Serwisy — logika biznesowa, pobieranie danych
• Dyrektywy — *ngIf, *ngFor, [ngClass]
• Dependency Injection — automatyczne wstrzykiwanie zależności

2. Środowisko (Angular CLI)

Angular CLI to narzędzie do tworzenia i zarządzania projektem Angular.

Wymagania

• Node.js — wersja 18+ (LTS)
• npm — menedżer pakietów
• Angular CLI — npm install -g @angular/cli

Tworzenie projektu

# Instalacja Angular CLI globalnie
npm install -g @angular/cli

# Tworzenie nowego projektu
ng new moj-projekt
# → Wybierz: CSS/SCSS, routing Yes/No

# Uruchomienie serwera dev
cd moj-projekt
ng serve
# → http://localhost:4200

Komendy CLI

Skróty CLI

ng g c header      # generate component
ng g s data        # generate service
ng g m admin       # generate module

npm install -g @angular/cli
ng new galeria-angular
cd galeria-angular
ng serve
# Otwórz http://localhost:4200

3. Komponenty

Komponent w Angular to klasa TypeScript z dekoratorem @Component.

Struktura komponentu

// header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',           // tag HTML
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  tytul = 'Moja Aplikacja';        // właściwość
  
  kliknij() {                      // metoda
    console.log('Kliknięto!');
  }
}

Szablon HTML

<!-- header.component.html -->
<header>
  <h1>{{ tytul }}</h1>
  <button (click)="kliknij()">Klik</button>
</header>

Generowanie komponentu

ng generate component header
# lub skrót:
ng g c header

# Tworzy:
# src/app/header/
#   ├── header.component.ts
#   ├── header.component.html
#   ├── header.component.css
#   └── header.component.spec.ts

Użycie komponentu

<!-- app.component.html -->
<app-header></app-header>
<main>Treść aplikacji</main>

// karta.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-karta',
  templateUrl: './karta.component.html'
})
export class KartaComponent {
  nazwa = 'Produkt';
  cena = 99;
  
  dodajDoKoszyka() {
    alert(`Dodano ${this.nazwa} do koszyka!`);
  }
}

<!-- karta.component.html -->
<div class="karta">
  <h3>{{ nazwa }}</h3>
  <p>Cena: {{ cena }} zł</p>
  <button (click)="dodajDoKoszyka()">Dodaj do koszyka</button>
</div>

4. Szablony i interpolacja

Angular używa {{ }} do wyświetlania danych w HTML (interpolacja).

Interpolacja {{ }}

// komponent
export class AppComponent {
  imie = 'Maks';
  wiek = 18;
  getPowitanie() {
    return `Cześć ${this.imie}!`;
  }
}

<!-- szablon -->
<p>Imię: {{ imie }}</p>
<p>Wiek: {{ wiek }}</p>
<p>Wynik: {{ 2 + 2 }}</p>
<p>{{ getPowitanie() }}</p>

Property binding [atrybut]

<!-- Dynamiczny atrybut -->
<img [src]="urlObrazu" [alt]="opis">
<button [disabled]="czyWylaczony">Wyślij</button>
<div [class.active]="jestAktywny"></div>
<p [style.color]="kolor">Tekst</p>

Event binding (event)

<button (click)="zapisz()">Zapisz</button>
<input (input)="onInput($event)">
<input (keyup.enter)="wyslij()">
<div (mouseenter)="pokaz()" (mouseleave)="ukryj()"></div>

Porównanie React vs Angular

<img 
  [src]="urlLogo" 
  [alt]="altText"
  (click)="kliknijLogo()">

5. Dyrektywy (*ngIf, *ngFor)

Dyrektywy strukturalne zmieniają strukturę DOM — dodają/usuwają elementy.

*ngIf — warunkowe renderowanie

<!-- Pokaż jeśli warunek true -->
<p *ngIf="zalogowany">Witaj z powrotem!</p>

<!-- if-else -->
<p *ngIf="zalogowany; else niezalogowany">
  Witaj {{ imie }}!
</p>
<ng-template #niezalogowany>
  <p>Proszę się zalogować</p>
</ng-template>

*ngFor — pętla po tablicy

// komponent
produkty = [
  { id: 1, nazwa: 'Laptop', cena: 3500 },
  { id: 2, nazwa: 'Telefon', cena: 1200 },
  { id: 3, nazwa: 'Słuchawki', cena: 150 }
];

<!-- szablon -->
<ul>
  <li *ngFor="let p of produkty">
    {{ p.nazwa }} — {{ p.cena }} zł
  </li>
</ul>

<!-- z indeksem -->
<div *ngFor="let p of produkty; let i = index">
  {{ i + 1 }}. {{ p.nazwa }}
</div>

<!-- trackBy dla wydajności -->
<div *ngFor="let p of produkty; trackBy: trackById">

trackById(index: number, item: any) {
  return item.id;
}

[ngClass] — klasy warunkowe

<div [ngClass]="{'active': jestAktywny, 'disabled': jestWylaczony}">
</div>

[ngStyle] — style warunkowe

<p [ngStyle]="{'color': blad ? 'red' : 'green'}">
  {{ wiadomosc }}
</p>

<div *ngIf="uzytkownicy.length === 0">
  Brak użytkowników
</div>

<ul *ngIf="uzytkownicy.length > 0">
  <li *ngFor="let u of uzytkownicy">
    {{ u.imie }}
  </li>
</ul>

6. Data Binding

Angular ma 4 typy data binding:

1. Interpolacja (komponent → DOM)

{{ wartosc }}

2. Property binding (komponent → DOM)

[src]="urlObrazu"
[disabled]="jestWylaczony"

3. Event binding (DOM → komponent)

(click)="zapisz()"
(input)="onInput($event)"

4. Two-way binding (obustronny)

<!-- Wymaga FormsModule! -->
<input [(ngModel)]="imie">
<p>Wpisano: {{ imie }}</p>

// app.module.ts
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule]
})

[(ngModel)] = syntax banana-in-box

<!-- To samo co: -->
<input [ngModel]="imie" (ngModelChange)="imie = $event">

Porównanie z React

// komponent
imie = '';
email = '';

<input [(ngModel)]="imie" placeholder="Imię">
<input [(ngModel)]="email" placeholder="Email">

<p>Imię: {{ imie }}</p>
<p>Email: {{ email }}</p>

7. @Input i @Output

Komunikacja między komponentami rodzic ↔ dziecko.

@Input — dane od rodzica

// dziecko: karta.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-karta',
  template: `<div>{{ nazwa }} — {{ cena }} zł</div>`
})
export class KartaComponent {
  @Input() nazwa = '';
  @Input() cena = 0;
}

<!-- rodzic -->
<app-karta [nazwa]="'Laptop'" [cena]="3500"></app-karta>
<app-karta [nazwa]="produkt.nazwa" [cena]="produkt.cena"></app-karta>

@Output — eventy do rodzica

// dziecko: karta.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-karta',
  template: `
    <div>{{ nazwa }}</div>
    <button (click)="onDodaj()">Dodaj</button>
  `
})
export class KartaComponent {
  @Input() nazwa = '';
  @Output() dodano = new EventEmitter<string>();
  
  onDodaj() {
    this.dodano.emit(this.nazwa);
  }
}

<!-- rodzic -->
<app-karta 
  [nazwa]="'Laptop'" 
  (dodano)="handleDodano($event)">
</app-karta>

// rodzic
handleDodano(nazwa: string) {
  console.log('Dodano:', nazwa);
}

Porównanie z React

// przycisk.component.ts
@Component({
  selector: 'app-przycisk',
  template: `<button (click)="onClick()">{{ tekst }}</button>`
})
export class PrzyciskComponent {
  @Input() tekst = 'Kliknij';
  @Output() kliknieto = new EventEmitter<void>();
  
  onClick() {
    this.kliknieto.emit();
  }
}

// rodzic
<app-przycisk 
  [tekst]="'Zapisz'" 
  (kliknieto)="zapisz()">
</app-przycisk>

8. Serwisy i Dependency Injection

Serwis = klasa z logiką biznesową (API, obliczenia). DI = Angular automatycznie tworzy i wstrzykuje instancje.

Tworzenie serwisu

ng generate service data
# lub: ng g s data

// data.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'  // dostępny w całej aplikacji
})
export class DataService {
  private produkty = [
    { id: 1, nazwa: 'Laptop', cena: 3500 },
    { id: 2, nazwa: 'Telefon', cena: 1200 }
  ];
  
  getProdukty() {
    return this.produkty;
  }
  
  dodajProdukt(nazwa: string, cena: number) {
    const id = this.produkty.length + 1;
    this.produkty.push({ id, nazwa, cena });
  }
}

Wstrzykiwanie do komponentu

// lista.component.ts
import { Component } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-lista',
  template: `
    <ul>
      <li *ngFor="let p of produkty">{{ p.nazwa }}</li>
    </ul>
  `
})
export class ListaComponent {
  produkty: any[] = [];
  
  constructor(private dataService: DataService) {
    this.produkty = this.dataService.getProdukty();
  }
}

Dlaczego serwisy?

• Współdzielenie danych między komponentami
• Separacja logiki od UI
• Łatwiejsze testowanie
• Singleton — jedna instancja w aplikacji

@Injectable({ providedIn: 'root' })
export class KoszykService {
  private koszyk: any[] = [];
  
  dodaj(produkt: any) {
    this.koszyk.push(produkt);
  }
  
  usun(id: number) {
    this.koszyk = this.koszyk.filter(p => p.id !== id);
  }
  
  getKoszyk() {
    return this.koszyk;
  }
  
  getSuma() {
    return this.koszyk.reduce((sum, p) => sum + p.cena, 0);
  }
}

9. Routing

Angular ma wbudowany router do nawigacji między widokami.

Konfiguracja routingu

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProduktyComponent } from './produkty/produkty.component';
import { KontaktComponent } from './kontakt/kontakt.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'produkty', component: ProduktyComponent },
  { path: 'kontakt', component: KontaktComponent },
  { path: '**', redirectTo: '' }  // 404 → home
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

router-outlet

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/produkty">Produkty</a>
  <a routerLink="/kontakt">Kontakt</a>
</nav>

<router-outlet></router-outlet>

routerLinkActive — aktywny link

<a routerLink="/produkty" routerLinkActive="active">
  Produkty
</a>

Parametry trasy

// routing
{ path: 'produkt/:id', component: ProduktDetailComponent }

// komponent
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    this.produktId = params['id'];
  });
}

Nawigacja programowa

import { Router } from '@angular/router';

constructor(private router: Router) {}

goToProdukt(id: number) {
  this.router.navigate(['/produkt', id]);
}

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'o-nas', component: ONasComponent },
  { path: 'kontakt', component: KontaktComponent }
];

<nav>
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
  <a routerLink="/o-nas" routerLinkActive="active">O nas</a>
  <a routerLink="/kontakt" routerLinkActive="active">Kontakt</a>
</nav>
<router-outlet></router-outlet>

10. Formularze

Angular ma 2 podejścia: Template-driven (proste) i Reactive (zaawansowane).

Template-driven (FormsModule)

// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({ imports: [FormsModule] })

<form #f="ngForm" (ngSubmit)="onSubmit(f)">
  <input name="imie" [(ngModel)]="imie" required>
  <input name="email" [(ngModel)]="email" required email>
  <button [disabled]="!f.valid">Wyślij</button>
</form>

Reactive Forms (ReactiveFormsModule)

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ imports: [ReactiveFormsModule] })

// komponent
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class FormComponent {
  form = new FormGroup({
    imie: new FormControl('', [Validators.required]),
    email: new FormControl('', [Validators.required, Validators.email]),
    wiek: new FormControl(18, [Validators.min(1), Validators.max(120)])
  });
  
  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="imie">
  <div *ngIf="form.get('imie')?.invalid && form.get('imie')?.touched">
    Imię jest wymagane
  </div>
  
  <input formControlName="email">
  <input type="number" formControlName="wiek">
  
  <button [disabled]="form.invalid">Wyślij</button>
</form>

Walidatory

form = new FormGroup({
  imie: new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.required, Validators.email]),
  haslo: new FormControl('', [Validators.required, Validators.minLength(6)])
});

11. HttpClient

Angular ma wbudowany HttpClient do komunikacji z API.

Konfiguracja

// app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule]
})

Serwis z HTTP

// api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private apiUrl = 'https://jsonplaceholder.typicode.com';
  
  constructor(private http: HttpClient) {}
  
  // GET
  getPosts(): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiUrl}/posts`);
  }
  
  // POST
  addPost(post: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/posts`, post);
  }
  
  // DELETE
  deletePost(id: number): Observable<any> {
    return this.http.delete(`${this.apiUrl}/posts/${id}`);
  }
}

Użycie w komponencie

export class PostyComponent implements OnInit {
  posty: any[] = [];
  loading = true;
  
  constructor(private api: ApiService) {}
  
  ngOnInit() {
    this.api.getPosts().subscribe({
      next: (data) => {
        this.posty = data;
        this.loading = false;
      },
      error: (err) => console.error(err)
    });
  }
}

Porównanie z React

// user.service.ts
getUsers(): Observable<any[]> {
  return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users');
}

// komponent
ngOnInit() {
  this.userService.getUsers().subscribe(data => {
    this.users = data;
  });
}

12. Struktura projektu Angular

Domyślna struktura

moj-projekt/
├── src/
│   ├── app/
│   │   ├── app.component.ts       # Główny komponent
│   │   ├── app.component.html
│   │   ├── app.component.css
│   │   ├── app.module.ts          # Główny moduł
│   │   └── app-routing.module.ts  # Routing
│   ├── assets/                    # Statyczne pliki
│   ├── index.html                 # Główny HTML
│   ├── main.ts                    # Entry point
│   └── styles.css                 # Globalne style
├── angular.json                   # Konfiguracja CLI
├── package.json                   # Zależności
└── tsconfig.json                  # Konfiguracja TS

Zalecana struktura dla większych projektów

src/app/
├── core/                    # Singletons, guardy, interceptory
│   ├── services/
│   │   └── auth.service.ts
│   └── guards/
│       └── auth.guard.ts
├── shared/                  # Współdzielone komponenty, pipes
│   ├── components/
│   │   └── button/
│   └── pipes/
├── features/                # Moduły funkcjonalne
│   ├── home/
│   │   ├── home.component.ts
│   │   └── home.module.ts
│   ├── produkty/
│   │   ├── produkty.component.ts
│   │   ├── produkt-detail/
│   │   └── produkty.module.ts
│   └── koszyk/
├── app.component.ts
├── app.module.ts
└── app-routing.module.ts

Moduły funkcjonalne (Feature Modules)

// produkty/produkty.module.ts
@NgModule({
  declarations: [
    ProduktyComponent,
    ProduktDetailComponent
  ],
  imports: [
    CommonModule,
    ProduktyRoutingModule
  ]
})
export class ProduktyModule {}

Lazy Loading

// app-routing.module.ts
const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'produkty', 
    loadChildren: () => import('./features/produkty/produkty.module')
      .then(m => m.ProduktyModule)
  }
];

src/app/
├── core/
│   └── services/
│       ├── auth.service.ts
│       └── api.service.ts
├── shared/
│   └── components/
│       └── navbar/
├── features/
│   ├── produkty/
│   │   ├── lista-produktow/
│   │   ├── produkt-detail/
│   │   └── produkty.module.ts
│   ├── koszyk/
│   │   ├── koszyk.component.ts
│   │   └── koszyk.module.ts
│   └── user/
│       ├── login/
│       ├── profil/
│       └── user.module.ts
├── app.module.ts
└── app-routing.module.ts

🔥 Rozgrzewka — Galeria zdjęć (Angular)

Odpowiedz na pytania przed rozpoczęciem ćwiczenia:

📋 Instrukcja — Galeria zdjęć (Angular)

Zbuduj galerię zdjęć w Angular z filtrowaniem kategorii i modalne preview.

Funkcjonalności

• Wyświetlanie siatki obrazów z *ngFor
• Filtrowanie po kategorii
• Powiększanie obrazu w modalu
• Licznik pobrań dla każdego obrazu

Technologie

• Angular 17+
• *ngFor, *ngIf, [ngClass]
• @Input, @Output
• Bootstrap 5 (opcjonalnie)

🔨 Budowa — Galeria zdjęć (Angular)

ng new galeria-angular
cd galeria-angular
ng serve

// app.component.ts
zdjecia = [
  { id: 1, url: 'assets/img1.jpg', tytul: 'Góry', kategoria: 'natura', downloads: 0 },
  { id: 2, url: 'assets/img2.jpg', tytul: 'Miasto', kategoria: 'urban', downloads: 0 },
  { id: 3, url: 'assets/img3.jpg', tytul: 'Las', kategoria: 'natura', downloads: 0 },
  { id: 4, url: 'assets/img4.jpg', tytul: 'Plaża', kategoria: 'natura', downloads: 0 }
];

aktywnaKategoria = 'wszystkie';
wybraneZdjecie: any = null;

get przefiltrowane() {
  if (this.aktywnaKategoria === 'wszystkie') {
    return this.zdjecia;
  }
  return this.zdjecia.filter(z => z.kategoria === this.aktywnaKategoria);
}

get kategorie() {
  return ['wszystkie', ...new Set(this.zdjecia.map(z => z.kategoria))];
}

setKategoria(kat: string) {
  this.aktywnaKategoria = kat;
}

<div class="container">
  <h1>Galeria</h1>
  
  <!-- Filtry -->
  <div class="filtry">
    <button *ngFor="let kat of kategorie"
            [ngClass]="{'active': kat === aktywnaKategoria}"
            (click)="setKategoria(kat)">
      {{ kat }}
    </button>
  </div>
  
  <!-- Siatka -->
  <div class="galeria">
    <div *ngFor="let z of przefiltrowane" class="karta">
      <img [src]="z.url" [alt]="z.tytul" (click)="wybraneZdjecie = z">
      <h3>{{ z.tytul }}</h3>
      <p>Pobrano: {{ z.downloads }}</p>
      <button (click)="download(z)">Pobierz</button>
    </div>
  </div>
</div>

<!-- Modal -->
<div *ngIf="wybraneZdjecie" class="modal-overlay" (click)="wybraneZdjecie = null">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <button class="close-btn" (click)="wybraneZdjecie = null">×</button>
    <img [src]="wybraneZdjecie.url" [alt]="wybraneZdjecie.tytul">
    <h2>{{ wybraneZdjecie.tytul }}</h2>
  </div>
</div>

download(zdjecie: any) {
  zdjecie.downloads++;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.karta {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}
.karta img {
  width: 100%;
  cursor: pointer;
}
.filtry button.active {
  background: #007bff;
  color: white;
}
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
}

💻 Gotowy kod — Galeria (Angular)

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  zdjecia = [
    { id: 1, url: 'assets/img1.jpg', tytul: 'Góry', kategoria: 'natura', downloads: 0 },
    { id: 2, url: 'assets/img2.jpg', tytul: 'Miasto', kategoria: 'urban', downloads: 0 },
    { id: 3, url: 'assets/img3.jpg', tytul: 'Las', kategoria: 'natura', downloads: 0 },
    { id: 4, url: 'assets/img4.jpg', tytul: 'Plaża', kategoria: 'natura', downloads: 0 }
  ];
  
  aktywnaKategoria = 'wszystkie';
  wybraneZdjecie: any = null;
  
  get przefiltrowane() {
    if (this.aktywnaKategoria === 'wszystkie') return this.zdjecia;
    return this.zdjecia.filter(z => z.kategoria === this.aktywnaKategoria);
  }
  
  get kategorie() {
    return ['wszystkie', ...new Set(this.zdjecia.map(z => z.kategoria))];
  }
  
  setKategoria(kat: string) {
    this.aktywnaKategoria = kat;
  }
  
  download(zdjecie: any) {
    zdjecie.downloads++;
  }
}

📝 Sprawdzian — Galeria (Angular)

5 pytań · 10 minut · minimum 60% żeby zdać

🔥 Rozgrzewka — Lista zadań (Angular)

📋 Instrukcja — Lista zadań (Angular)

Zbuduj aplikację Todo w Angular z dodawaniem, usuwaniem i oznaczaniem zadań.

Funkcjonalności

• Dodawanie nowych zadań
• Oznaczanie jako wykonane (checkbox)
• Usuwanie zadań
• Filtrowanie: wszystkie/aktywne/wykonane

🔨 Budowa — Lista zadań (Angular)

// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [BrowserModule, FormsModule]
})

interface Zadanie {
  id: number;
  tytul: string;
  wykonane: boolean;
}

zadania: Zadanie[] = [];
noweZadanie = '';
filtr = 'wszystkie';

dodaj() {
  if (!this.noweZadanie.trim()) return;
  this.zadania = [...this.zadania, {
    id: Date.now(),
    tytul: this.noweZadanie,
    wykonane: false
  }];
  this.noweZadanie = '';
}

usun(id: number) {
  this.zadania = this.zadania.filter(z => z.id !== id);
}

toggle(id: number) {
  this.zadania = this.zadania.map(z =>
    z.id === id ? { ...z, wykonane: !z.wykonane } : z
  );
}

get przefiltrowane() {
  switch (this.filtr) {
    case 'aktywne': return this.zadania.filter(z => !z.wykonane);
    case 'wykonane': return this.zadania.filter(z => z.wykonane);
    default: return this.zadania;
  }
}

<div class="todo-app">
  <h1>Lista zadań</h1>
  
  <form (ngSubmit)="dodaj()">
    <input [(ngModel)]="noweZadanie" name="nowe" placeholder="Nowe zadanie...">
    <button type="submit">Dodaj</button>
  </form>
  
  <div class="filtry">
    <button [ngClass]="{'active': filtr === 'wszystkie'}" (click)="filtr = 'wszystkie'">Wszystkie</button>
    <button [ngClass]="{'active': filtr === 'aktywne'}" (click)="filtr = 'aktywne'">Aktywne</button>
    <button [ngClass]="{'active': filtr === 'wykonane'}" (click)="filtr = 'wykonane'">Wykonane</button>
  </div>
  
  <ul>
    <li *ngFor="let z of przefiltrowane" [ngClass]="{'done': z.wykonane}">
      <input type="checkbox" [checked]="z.wykonane" (change)="toggle(z.id)">
      {{ z.tytul }}
      <button (click)="usun(z.id)">×</button>
    </li>
  </ul>
</div>

.done { text-decoration: line-through; opacity: 0.6; }
.filtry button.active { background: #28a745; color: white; }

💻 Gotowy kod — Lista zadań (Angular)

import { Component } from '@angular/core';

interface Zadanie {
  id: number;
  tytul: string;
  wykonane: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  zadania: Zadanie[] = [];
  noweZadanie = '';
  filtr = 'wszystkie';

  get przefiltrowane() {
    switch (this.filtr) {
      case 'aktywne': return this.zadania.filter(z => !z.wykonane);
      case 'wykonane': return this.zadania.filter(z => z.wykonane);
      default: return this.zadania;
    }
  }

  dodaj() {
    if (!this.noweZadanie.trim()) return;
    this.zadania = [...this.zadania, {
      id: Date.now(),
      tytul: this.noweZadanie,
      wykonane: false
    }];
    this.noweZadanie = '';
  }

  usun(id: number) {
    this.zadania = this.zadania.filter(z => z.id !== id);
  }

  toggle(id: number) {
    this.zadania = this.zadania.map(z =>
      z.id === id ? { ...z, wykonane: !z.wykonane } : z
    );
  }
}

📝 Sprawdzian — Lista zadań (Angular)

5 pytań · 10 minut · minimum 60% żeby zdać

🔥 Rozgrzewka — Tracker wydatków (Angular)

📋 Instrukcja — Tracker wydatków (Angular)

Zbuduj aplikację do śledzenia wydatków z kategoriami i podsumowaniem.

Funkcjonalności

• Dodawanie wydatków (opis, kwota, kategoria)
• Lista wydatków z możliwością usuwania
• Podsumowanie: suma, średnia, max
• Filtrowanie po kategorii

🔨 Budowa — Tracker wydatków (Angular)

interface Wydatek {
  id: number;
  opis: string;
  kwota: number;
  kategoria: string;
  data: Date;
}

wydatki: Wydatek[] = [];
nowyOpis = '';
nowaKwota = 0;
nowaKategoria = 'jedzenie';
filtrKategoria = 'wszystkie';

kategorie = ['jedzenie', 'transport', 'rozrywka', 'rachunki', 'inne'];

get przefiltrowane() {
  if (this.filtrKategoria === 'wszystkie') return this.wydatki;
  return this.wydatki.filter(w => w.kategoria === this.filtrKategoria);
}

get suma() {
  return this.przefiltrowane.reduce((s, w) => s + w.kwota, 0);
}

get srednia() {
  return this.przefiltrowane.length ? this.suma / this.przefiltrowane.length : 0;
}

get max() {
  return this.przefiltrowane.length 
    ? Math.max(...this.przefiltrowane.map(w => w.kwota)) 
    : 0;
}

dodaj() {
  if (!this.nowyOpis.trim() || this.nowaKwota <= 0) return;
  this.wydatki = [...this.wydatki, {
    id: Date.now(),
    opis: this.nowyOpis,
    kwota: this.nowaKwota,
    kategoria: this.nowaKategoria,
    data: new Date()
  }];
  this.nowyOpis = '';
  this.nowaKwota = 0;
}

usun(id: number) {
  this.wydatki = this.wydatki.filter(w => w.id !== id);
}

<form (ngSubmit)="dodaj()">
  <input [(ngModel)]="nowyOpis" name="opis" placeholder="Opis wydatku">
  <input type="number" [(ngModel)]="nowaKwota" name="kwota" placeholder="Kwota">
  <select [(ngModel)]="nowaKategoria" name="kategoria">
    <option *ngFor="let k of kategorie" [value]="k">{{ k }}</option>
  </select>
  <button type="submit">Dodaj</button>
</form>

<div class="podsumowanie">
  <p>Suma: {{ suma | currency:'PLN' }}</p>
  <p>Średnia: {{ srednia | currency:'PLN' }}</p>
  <p>Max: {{ max | currency:'PLN' }}</p>
</div>

<select [(ngModel)]="filtrKategoria">
  <option value="wszystkie">Wszystkie</option>
  <option *ngFor="let k of kategorie" [value]="k">{{ k }}</option>
</select>

<ul>
  <li *ngFor="let w of przefiltrowane">
    {{ w.opis }} - {{ w.kwota | currency:'PLN' }} ({{ w.kategoria }})
    <button (click)="usun(w.id)">×</button>
  </li>
</ul>

// app.module.ts
import { registerLocaleData } from '@angular/common';
import localePl from '@angular/common/locales/pl';
registerLocaleData(localePl);

@NgModule({
  providers: [{ provide: LOCALE_ID, useValue: 'pl-PL' }]
})

.podsumowanie { background: #f8f9fa; padding: 15px; border-radius: 8px; }
.podsumowanie p { margin: 5px 0; font-weight: bold; }

💻 Gotowy kod — Tracker wydatków (Angular)

import { Component } from '@angular/core';

interface Wydatek {
  id: number;
  opis: string;
  kwota: number;
  kategoria: string;
  data: Date;
}

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent {
  wydatki: Wydatek[] = [];
  nowyOpis = '';
  nowaKwota = 0;
  nowaKategoria = 'jedzenie';
  filtrKategoria = 'wszystkie';
  kategorie = ['jedzenie', 'transport', 'rozrywka', 'rachunki', 'inne'];

  get przefiltrowane() {
    if (this.filtrKategoria === 'wszystkie') return this.wydatki;
    return this.wydatki.filter(w => w.kategoria === this.filtrKategoria);
  }
  get suma() { return this.przefiltrowane.reduce((s, w) => s + w.kwota, 0); }
  get srednia() { return this.przefiltrowane.length ? this.suma / this.przefiltrowane.length : 0; }
  get max() { return this.przefiltrowane.length ? Math.max(...this.przefiltrowane.map(w => w.kwota)) : 0; }

  dodaj() {
    if (!this.nowyOpis.trim() || this.nowaKwota <= 0) return;
    this.wydatki = [...this.wydatki, {
      id: Date.now(), opis: this.nowyOpis, kwota: this.nowaKwota,
      kategoria: this.nowaKategoria, data: new Date()
    }];
    this.nowyOpis = ''; this.nowaKwota = 0;
  }
  usun(id: number) { this.wydatki = this.wydatki.filter(w => w.id !== id); }
}

📝 Sprawdzian — Tracker wydatków (Angular)

5 pytań · 10 minut · minimum 60% żeby zdać

🔥 Rozgrzewka — Dziennik ocen (Angular)

📋 Instrukcja — Dziennik ocen (Angular)

Zbuduj dziennik ocen z serwisem do zarządzania danymi.

Funkcjonalności

• Lista uczniów z przedmiotami i ocenami
• Dodawanie ocen do ucznia
• Średnia ocen ucznia
• Sortowanie po nazwisku/średniej
• Serwis do przechowywania danych

🔨 Budowa — Dziennik ocen (Angular)

ng generate service dziennik

// dziennik.service.ts
@Injectable({ providedIn: 'root' })
export class DziennikService {
  private uczniowie = [
    { id: 1, imie: 'Jan', nazwisko: 'Kowalski', oceny: [4, 5, 3, 4] },
    { id: 2, imie: 'Anna', nazwisko: 'Nowak', oceny: [5, 5, 4, 5] },
    { id: 3, imie: 'Piotr', nazwisko: 'Wiśniewski', oceny: [3, 3, 4, 3] }
  ];
  
  getUczniowie() { return this.uczniowie; }
  
  dodajOcene(id: number, ocena: number) {
    const uczen = this.uczniowie.find(u => u.id === id);
    if (uczen) uczen.oceny.push(ocena);
  }
  
  getSrednia(oceny: number[]) {
    return oceny.length ? oceny.reduce((s, o) => s + o, 0) / oceny.length : 0;
  }
}

export class AppComponent {
  uczniowie: any[] = [];
  sortowanie = 'nazwisko';
  nowaOcena = 5;
  wybranyUczen: number | null = null;
  
  constructor(private dziennik: DziennikService) {
    this.uczniowie = this.dziennik.getUczniowie();
  }
  
  get posortowani() {
    return [...this.uczniowie].sort((a, b) => {
      if (this.sortowanie === 'nazwisko') {
        return a.nazwisko.localeCompare(b.nazwisko);
      }
      return this.getSrednia(b.oceny) - this.getSrednia(a.oceny);
    });
  }
  
  getSrednia(oceny: number[]) {
    return this.dziennik.getSrednia(oceny);
  }
  
  dodajOcene(id: number) {
    this.dziennik.dodajOcene(id, this.nowaOcena);
  }
}

<h1>Dziennik ocen</h1>

<select [(ngModel)]="sortowanie">
  <option value="nazwisko">Sortuj po nazwisku</option>
  <option value="srednia">Sortuj po średniej</option>
</select>

<table>
  <tr>
    <th>Imię</th><th>Nazwisko</th><th>Oceny</th><th>Średnia</th><th>Akcje</th>
  </tr>
  <tr *ngFor="let u of posortowani">
    <td>{{ u.imie }}</td>
    <td>{{ u.nazwisko }}</td>
    <td>{{ u.oceny.join(', ') }}</td>
    <td>{{ getSrednia(u.oceny) | number:'1.2-2' }}</td>
    <td>
      <select [(ngModel)]="nowaOcena">
        <option *ngFor="let o of [1,2,3,4,5,6]" [value]="o">{{ o }}</option>
      </select>
      <button (click)="dodajOcene(u.id)">Dodaj</button>
    </td>
  </tr>
</table>

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #ddd; text-align: left; }
th { background: #f8f9fa; }

<td [ngStyle]="{'color': getSrednia(u.oceny) >= 4 ? 'green' : getSrednia(u.oceny) < 3 ? 'red' : 'orange'}">
  {{ getSrednia(u.oceny) | number:'1.2-2' }}
</td>

// Rozszerz serwis
dodajUcznia(imie: string, nazwisko: string) {
  this.uczniowie.push({
    id: Date.now(),
    imie, nazwisko,
    oceny: []
  });
}

💻 Gotowy kod — Dziennik ocen (Angular)

// dziennik.service.ts
@Injectable({ providedIn: 'root' })
export class DziennikService {
  private uczniowie = [
    { id: 1, imie: 'Jan', nazwisko: 'Kowalski', oceny: [4, 5, 3, 4] },
    { id: 2, imie: 'Anna', nazwisko: 'Nowak', oceny: [5, 5, 4, 5] },
    { id: 3, imie: 'Piotr', nazwisko: 'Wiśniewski', oceny: [3, 3, 4, 3] }
  ];
  
  getUczniowie() { return this.uczniowie; }
  dodajOcene(id: number, ocena: number) {
    const u = this.uczniowie.find(x => x.id === id);
    if (u && ocena >= 1 && ocena <= 6) u.oceny.push(ocena);
  }
  getSrednia(oceny: number[]) {
    return oceny.length ? oceny.reduce((s, o) => s + o, 0) / oceny.length : 0;
  }
}

// app.component.ts
export class AppComponent {
  uczniowie: any[] = [];
  sortowanie = 'nazwisko';
  nowaOcena = 5;
  
  constructor(private dziennik: DziennikService) {
    this.uczniowie = this.dziennik.getUczniowie();
  }
  
  get posortowani() {
    return [...this.uczniowie].sort((a, b) =>
      this.sortowanie === 'nazwisko'
        ? a.nazwisko.localeCompare(b.nazwisko)
        : this.getSrednia(b.oceny) - this.getSrednia(a.oceny)
    );
  }
  
  getSrednia(oceny: number[]) { return this.dziennik.getSrednia(oceny); }
  dodajOcene(id: number) { this.dziennik.dodajOcene(id, this.nowaOcena); }
}

📝 Sprawdzian — Dziennik ocen (Angular)

5 pytań · 10 minut · minimum 60% żeby zdać

📋 Ściąga Angular

ng new nazwa
ng serve

ng g c nazwa    # component
ng g s nazwa    # service
ng g m nazwa    # module

{{ wartosc }}
{{ metoda() }}
{{ a + b }}

[src]="url"
[disabled]="x"
[class.active]="y"

(click)="fn()"
(input)="onInput($event)"
(keyup.enter)="submit()"

[(ngModel)]="wartosc"
// Wymaga FormsModule!

<p *ngIf="warunek">...</p>
*ngIf="x; else other"
<ng-template #other>

*ngFor="let x of arr"
*ngFor="let x of arr; let i = index"
trackBy: trackFn

[ngClass]="{'active': x, 'disabled': y}"

@Input() nazwa = '';
// rodzic: [nazwa]="'X'"

@Output() ev = new EventEmitter();
this.ev.emit(data);
// rodzic: (ev)="fn($event)"

@Injectable({providedIn:'root'})
constructor(private srv: XService)

🐛 Typowe błędy Angular

Can't bind to 'ngModel' since it isn't a known property
→ Dodaj FormsModule do imports w module

// ❌ *ngFor="x of arr"
// ✅ *ngFor="let x of arr"

Component X is not part of any NgModule
→ Dodaj do declarations w @NgModule

// ❌ this.arr.push(x)
// ✅ this.arr = [...this.arr, x]

No provider for XService
→ Dodaj @Injectable({providedIn:'root'})

// ❌ <app-Header> (wielkość liter!)
// ✅ <app-header>

// ❌ *ngFor="let x of data$"
// ✅ *ngFor="let x of data$ | async"

// ✅ trackById(index: number, item: any) {
//      return item.id;
//    }

🖥️ Co to JavaFX?

Czym jest JavaFX?

JavaFX to nowoczesny framework GUI dla Javy, który zastąpił starszy Swing. Pozwala tworzyć aplikacje okienkowe z przyciskami, polami tekstowymi, tabelami i innymi kontrolkami.

Porównanie z innymi technologiami

Dlaczego JavaFX na egzaminie?

Zalety JavaFX

• Scene Builder — wizualne projektowanie interfejsu (drag & drop)
• FXML — oddzielenie wyglądu (XML) od logiki (Java)
• CSS — możesz stylować kontrolki jak w HTML
• Nowoczesny — animacje, efekty, multimedia

Podstawowe pojęcia

Pierwszy program

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class HelloFX extends Application {
    @Override
    public void start(Stage stage) {
        Label label = new Label("Witaj w JavaFX!");
        Scene scene = new Scene(label, 300, 200);
        stage.setTitle("Moja aplikacja");
        stage.setScene(scene);
        stage.show();
    }

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

📝 Zadanie do teorii

🛠️ NetBeans + Scene Builder

NetBeans IDE

NetBeans to darmowe IDE do Javy, które jest standardem na egzaminie INF.04. Ma wbudowane wsparcie dla JavaFX.

Tworzenie projektu JavaFX

1. File → New Project
2. Wybierz JavaFX → JavaFX FXML Application
3. Podaj nazwę projektu (np. Kalkulator)
4. NetBeans utworzy 3 pliki: Main.java, FXMLDocument.fxml, FXMLDocumentController.java

Scene Builder

Scene Builder to wizualny edytor FXML — projektujesz interfejs metodą drag & drop.

Otwieranie Scene Builder

1. Kliknij prawym na plik .fxml
2. Wybierz Open in Scene Builder
3. Przeciągaj kontrolki z lewego panelu na scenę

Główne sekcje Scene Buildera

Łączenie FXML z Controllerem

// W FXMLDocumentController.java:
public class FXMLDocumentController implements Initializable {

    @FXML
    private Label lblWynik;    // Połączenie z fx:id="lblWynik"
    
    @FXML
    private TextField txtLiczba;
    
    @FXML
    private void handleButtonClick(ActionEvent event) {
        // Obsługa kliknięcia przycisku
        lblWynik.setText("Kliknięto!");
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // Kod uruchamiany przy starcie
    }
}

📝 Zadanie do teorii

📁 Struktura projektu JavaFX

Typowa struktura

MojProjekt/
├── src/
│   └── mojprojekt/
│       ├── MojProjekt.java      # Klasa główna (main)
│       ├── FXMLDocument.fxml    # Układ interfejsu
│       └── FXMLDocumentController.java  # Logika
├── build/
└── nbproject/                   # Pliki NetBeans

Opis plików

Plik główny (Main)

package mojprojekt;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MojProjekt extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        // Ładowanie pliku FXML
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
        
        Scene scene = new Scene(root);
        stage.setTitle("Moja Aplikacja");
        stage.setScene(scene);
        stage.show();
    }

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

Plik FXML

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns:fx="http://javafx.com/fxml" 
      fx:controller="mojprojekt.FXMLDocumentController"
      spacing="10" alignment="CENTER">
    
    <Label text="Witaj!" fx:id="lblPowitanie"/>
    <Button text="Kliknij" onAction="#handleKlik"/>
    
</VBox>

📝 Zadanie do teorii

📐 Layouty (VBox, HBox, GridPane)

Najważniejsze layouty

VBox — układ pionowy

<VBox spacing="10" alignment="CENTER" padding="20">
    <Label text="Formularz"/>
    <TextField promptText="Imię"/>
    <TextField promptText="Nazwisko"/>
    <Button text="Zapisz"/>
</VBox>

HBox — układ poziomy

<HBox spacing="10" alignment="CENTER">
    <Button text="OK"/>
    <Button text="Anuluj"/>
    <Button text="Pomoc"/>
</HBox>

GridPane — siatka

<GridPane hgap="10" vgap="10">
    <Label text="Login:" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <TextField GridPane.rowIndex="0" GridPane.columnIndex="1"/>
    
    <Label text="Hasło:" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
    <PasswordField GridPane.rowIndex="1" GridPane.columnIndex="1"/>
    
    <Button text="Zaloguj" GridPane.rowIndex="2" GridPane.columnIndex="1"/>
</GridPane>

BorderPane

<BorderPane>
    <top><MenuBar>...</MenuBar></top>
    <left><VBox>Menu boczne</VBox></left>
    <center><TextArea/></center>
    <bottom><Label text="Status"/></bottom>
</BorderPane>

📝 Zadanie do teorii

🔘 Button i Label

Label — etykieta tekstowa

<!-- W FXML -->
<Label text="Witaj!" fx:id="lblWynik"/>
<Label text="Pogrubiony" style="-fx-font-weight: bold; -fx-font-size: 18px;"/>

// W Controller
@FXML private Label lblWynik;

// Zmiana tekstu
lblWynik.setText("Nowy tekst");

// Pobranie tekstu
String tekst = lblWynik.getText();

Button — przycisk

<!-- W FXML -->
<Button text="Kliknij mnie" fx:id="btnAkcja" onAction="#handleKlik"/>

// W Controller
@FXML private Button btnAkcja;

@FXML
private void handleKlik(ActionEvent event) {
    System.out.println("Kliknięto przycisk!");
    lblWynik.setText("Kliknięto!");
    
    // Wyłączenie przycisku
    btnAkcja.setDisable(true);
}

Właściwości Button

Stylowanie CSS

<Button text="Zielony" 
        style="-fx-background-color: #4CAF50; -fx-text-fill: white; -fx-font-size: 14px;"/>

<Label style="-fx-text-fill: red; -fx-font-weight: bold;"/>

📝 Zadanie do teorii

@FXML private TextField txtImie;
@FXML private Label lblWynik;

@FXML
private void handlePowitaj(ActionEvent event) {
    String imie = txtImie.getText();
    lblWynik.setText("Witaj " + imie + "!");
}

✏️ TextField i TextArea

TextField — pole jednoliniowe

<TextField fx:id="txtImie" promptText="Wpisz imię..."/>
<TextField fx:id="txtLiczba" prefWidth="100"/>
<PasswordField fx:id="txtHaslo" promptText="Hasło"/>

// Pobranie tekstu
String imie = txtImie.getText();

// Ustawienie tekstu
txtImie.setText("Jan");

// Wyczyszczenie
txtImie.clear();

// Konwersja na liczbę (UWAGA: może rzucić wyjątek!)
int liczba = Integer.parseInt(txtLiczba.getText());
double wartosc = Double.parseDouble(txtLiczba.getText());

TextArea — pole wieloliniowe

<TextArea fx:id="txtOpis" 
          promptText="Wpisz opis..." 
          prefRowCount="5" 
          prefColumnCount="30"
          wrapText="true"/>

// Pobranie całego tekstu
String opis = txtOpis.getText();

// Dodanie tekstu na końcu
txtOpis.appendText("\nNowa linia");

// Zaznaczenie całego tekstu
txtOpis.selectAll();

Walidacja liczb

@FXML
private void handleOblicz(ActionEvent event) {
    try {
        double liczba = Double.parseDouble(txtLiczba.getText());
        lblWynik.setText("Wynik: " + (liczba * 2));
    } catch (NumberFormatException e) {
        lblWynik.setText("Błąd: podaj liczbę!");
    }
}

📝 Zadanie do teorii

☑️ CheckBox i RadioButton

CheckBox — wielokrotny wybór

<CheckBox fx:id="chkSer" text="Ser"/>
<CheckBox fx:id="chkSzynka" text="Szynka"/>
<CheckBox fx:id="chkPieczarki" text="Pieczarki" selected="true"/>

// Sprawdzenie czy zaznaczony
if (chkSer.isSelected()) {
    System.out.println("Wybrano ser");
}

// Zaznaczenie programowe
chkSzynka.setSelected(true);

// Lista wybranych
String dodatki = "";
if (chkSer.isSelected()) dodatki += "ser ";
if (chkSzynka.isSelected()) dodatki += "szynka ";
if (chkPieczarki.isSelected()) dodatki += "pieczarki";

RadioButton — pojedynczy wybór

<!-- Grupowanie przez ToggleGroup -->
<ToggleGroup fx:id="grupaRozmiar"/>

<RadioButton fx:id="rbMala" text="Mała" toggleGroup="$grupaRozmiar"/>
<RadioButton fx:id="rbSrednia" text="Średnia" toggleGroup="$grupaRozmiar" selected="true"/>
<RadioButton fx:id="rbDuza" text="Duża" toggleGroup="$grupaRozmiar"/>

@FXML private ToggleGroup grupaRozmiar;
@FXML private RadioButton rbMala, rbSrednia, rbDuza;

// Sprawdzenie który wybrany
if (rbMala.isSelected()) {
    System.out.println("Mała pizza");
}

// Alternatywnie - przez grupę
RadioButton wybrany = (RadioButton) grupaRozmiar.getSelectedToggle();
String rozmiar = wybrany.getText();  // "Mała", "Średnia" lub "Duża"

📝 Zadanie do teorii

📋 ComboBox i ChoiceBox

ComboBox — lista rozwijana

<ComboBox fx:id="cmbMiasto" promptText="Wybierz miasto">
    <items>
        <FXCollections fx:factory="observableArrayList">
            <String fx:value="Warszawa"/>
            <String fx:value="Kraków"/>
            <String fx:value="Gdańsk"/>
        </FXCollections>
    </items>
</ComboBox>

@FXML private ComboBox<String> cmbMiasto;

// Inicjalizacja w kodzie (łatwiejsze!)
@Override
public void initialize(URL url, ResourceBundle rb) {
    cmbMiasto.getItems().addAll("Warszawa", "Kraków", "Gdańsk", "Wrocław");
    cmbMiasto.setValue("Warszawa");  // Domyślna wartość
}

// Pobranie wybranej wartości
String miasto = cmbMiasto.getValue();

// Obsługa zmiany wyboru
cmbMiasto.setOnAction(e -> {
    System.out.println("Wybrano: " + cmbMiasto.getValue());
});

ChoiceBox — prostsza alternatywa

@FXML private ChoiceBox<String> chbKategoria;

@Override
public void initialize(URL url, ResourceBundle rb) {
    chbKategoria.getItems().addAll("Elektronika", "AGD", "Meble");
    chbKategoria.setValue("Elektronika");
}

Różnice ComboBox vs ChoiceBox

📝 Zadanie do teorii

cmbMiasto.getItems().add("Poznań");           // Na końcu
cmbMiasto.getItems().add(0, "Łódź");          // Na początku
cmbMiasto.getItems().addAll("A", "B", "C");   // Wiele naraz

⚡ Obsługa zdarzeń

Sposób 1: onAction w FXML

<Button text="Kliknij" onAction="#handleKlik"/>

@FXML
private void handleKlik(ActionEvent event) {
    System.out.println("Kliknięto!");
}

Sposób 2: setOnAction w kodzie

@Override
public void initialize(URL url, ResourceBundle rb) {
    btnOblicz.setOnAction(event -> {
        // kod obsługi
        lblWynik.setText("Obliczono!");
    });
}

Typy zdarzeń

Przykład: walidacja przy Enter

txtLiczba.setOnKeyPressed(event -> {
    if (event.getCode() == KeyCode.ENTER) {
        oblicz();
    }
});

private void oblicz() {
    try {
        double x = Double.parseDouble(txtLiczba.getText());
        lblWynik.setText("Kwadrat: " + (x * x));
    } catch (NumberFormatException e) {
        lblWynik.setText("Błąd!");
    }
}

Źródło zdarzenia

@FXML
private void handlePrzycisk(ActionEvent event) {
    Button btn = (Button) event.getSource();
    String tekst = btn.getText();  // Który przycisk kliknięto
    
    if (tekst.equals("Dodaj")) {
        // ...
    } else if (tekst.equals("Usuń")) {
        // ...
    }
}

📝 Zadanie do teorii

@FXML
private void handleCyfra(ActionEvent event) {
    Button btn = (Button) event.getSource();
    txtWyswietlacz.appendText(btn.getText());
}

🔗 FXML + Controller

Anatomia pliku FXML

<?xml version="1.0" encoding="UTF-8"?>

<!-- Importy (jak import w Java) -->
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<!-- Główny kontener + wskazanie controllera -->
<VBox xmlns:fx="http://javafx.com/fxml" 
      fx:controller="kalkulator.KalkulatorController"
      spacing="10" alignment="CENTER" style="-fx-padding: 20;">
    
    <!-- fx:id = nazwa pola w controllerze -->
    <TextField fx:id="txtWynik" editable="false"/>
    
    <!-- onAction = nazwa metody z # -->
    <Button text="Oblicz" onAction="#handleOblicz"/>
    
</VBox>

Anatomia Controllera

package kalkulator;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import java.net.URL;
import java.util.ResourceBundle;

public class KalkulatorController implements Initializable {

    // Pola połączone z FXML (fx:id)
    @FXML private TextField txtWynik;
    @FXML private Button btnOblicz;
    
    // Metoda uruchamiana przy starcie
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // Inicjalizacja, np. wypełnienie ComboBox
        txtWynik.setText("0");
    }
    
    // Metoda obsługi zdarzenia (onAction)
    @FXML
    private void handleOblicz(ActionEvent event) {
        // Logika
    }
}

Diagram połączeń

FXML                          Controller
─────────────────────         ─────────────────────
fx:controller="..."     ───►  public class ... implements Initializable
fx:id="txtWynik"        ───►  @FXML private TextField txtWynik
onAction="#handleOblicz"───►  @FXML private void handleOblicz(...)

📝 Zadanie do teorii

🔥 Kalkulator — Rozgrzewka

Mini Quiz

📋 Kalkulator — Instrukcja

Treść zadania