📝 Notatki o uczniu

Brak zapisanych notatek.

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 — Galeria zdjęć

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

#01 — Instrukcja z arkusza egzaminacyjnego

INF.04-01-25.01-SG · Styczeń 2025 · Czas: 180 min · Część II: Aplikacja webowa

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="x">
  <label class="form-check-label" for="x">Label</label>
</div>
<!-- Inline: dodaj .form-check-inline -->
<button class="btn btn-primary">Primary</button>

#01 — Wprowadzenie dla nauczyciela

1. Otwarcie

2. Diagnoza wiedzy

3. Architektura

App:
  state: galeria    → tablica 12 obiektów
  state: kwiaty     → true/false
  state: zwierzeta  → true/false
  state: samochody  → true/false
  computed: widoczne = galeria.filter(...)
  JSX: h1 + 3× switch + flex-wrap { widoczne.map(...) }

4. Zasady prowadzenia

5. Częste blokady

6. Po zbudowaniu

#01 — Wymagania — checklist

#01 — Budowa krok po kroku

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

egzamin/public/assets/obraz1.jpg … obraz12.jpg

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

function App() {
  return (
    <div className="container mt-3">
      <h1>Kategorie zdjęć</h1>
    </div>
  )
}
export default App

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 },
]

const [galeria, setGaleria] = useState(zdjecia)

const [kwiaty, setKwiaty] = useState(true)
const [zwierzeta, setZwierzeta] = useState(true)
const [samochody, setSamochody] = useState(true)

<div className="mb-4">
  <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>

const widoczne = galeria.filter((z) => {
  if (z.category === 1) return kwiaty
  if (z.category === 2) return zwierzeta
  if (z.category === 3) return samochody
})

<div className="d-flex flex-wrap">
  {widoczne.map((z) => (
    <div key={z.id} className="zdjecie-blok">
      <img src={`/assets/${z.filename}`} alt={z.alt} />
      <h4>Pobrań: {z.downloads}</h4>
      <button className="btn btn-primary btn-sm">Pobierz</button>
    </div>
  ))}
</div>

.zdjecie-blok { text-align: center; margin: 10px; }
.zdjecie-blok img { margin: 5px; border-radius: 10px; }

function pobierz(id) {
  setGaleria(galeria.map((z) =>
    z.id === id ? { ...z, downloads: z.downloads + 1 } : z
  ))
}

<button className="btn btn-primary btn-sm"
  onClick={() => pobierz(z.id)}>Pobierz</button>

#01 — Gotowy kod

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 [galeria, setGaleria] = useState(zdjecia)
  const [kwiaty, setKwiaty] = useState(true)
  const [zwierzeta, setZwierzeta] = useState(true)
  const [samochody, setSamochody] = useState(true)

  const widoczne = galeria.filter((z) => {
    if (z.category === 1) return kwiaty
    if (z.category === 2) return zwierzeta
    if (z.category === 3) return samochody
  })

  function pobierz(id) {
    setGaleria(galeria.map((z) =>
      z.id === id ? { ...z, downloads: z.downloads + 1 } : z
    ))
  }

  return (
    <div className="container mt-3">
      <h1>Kategorie zdjęć</h1>
      <div className="mb-4">
        <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>
      <div className="d-flex flex-wrap">
        {widoczne.map((z) => (
          <div key={z.id} className="zdjecie-blok">
            <img src={`/assets/${z.filename}`} alt={z.alt} />
            <h4>Pobrań: {z.downloads}</h4>
            <button className="btn btn-primary btn-sm" onClick={() => pobierz(z.id)}>Pobierz</button>
          </div>
        ))}
      </div>
    </div>
  )
}
export default App

App.css

.zdjecie-blok { text-align: center; margin: 10px; }
.zdjecie-blok img { margin: 5px; border-radius: 10px; }

📝 Sprawdzian — Galeria zdjęć

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

Wymagane komponenty

🏗️ Kalkulator — Budowa UI

Krok 1: Utwórz projekt

1. File → New Project → JavaFX FXML Application
2. Nazwa: Kalkulator
3. Otwórz FXMLDocument.fxml w Scene Builder

Krok 2: Struktura layoutu

1. Usuń domyślny AnchorPane, dodaj VBox
2. W VBox dodaj TextField (wyświetlacz)
3. Pod TextField dodaj GridPane (4 kolumny × 4 wiersze)

Krok 3: Dodaj przyciski

Wiersz 0: [7] [8] [9] [/]
Wiersz 1: [4] [5] [6] [*]
Wiersz 2: [1] [2] [3] [-]
Wiersz 3: [0] [C] [=] [+]

Krok 4: Ustaw fx:id

W Inspector → Code ustaw fx:id dla każdej kontrolki:

• TextField: txtWyswietlacz
• Przyciski: btn0, btn1, ... btn9
• Operacje: btnDodaj, btnOdejmij, btnMnoz, btnDziel
• Specjalne: btnRowna, btnCzysc

Krok 5: Ustaw onAction

• Wszystkie cyfry: #handleCyfra
• Wszystkie operacje: #handleOperacja
• btnRowna: #handleRowna
• btnCzysc: #handleCzysc

💻 Kalkulator — Kod

FXMLDocumentController.java

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 FXMLDocumentController implements Initializable {

    @FXML private TextField txtWyswietlacz;
    
    private double liczba1 = 0;
    private String operacja = "";
    private boolean nowaLiczba = true;
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        txtWyswietlacz.setEditable(false);
        txtWyswietlacz.setText("0");
    }
    
    @FXML
    private void handleCyfra(ActionEvent event) {
        Button btn = (Button) event.getSource();
        String cyfra = btn.getText();
        
        if (nowaLiczba) {
            txtWyswietlacz.setText(cyfra);
            nowaLiczba = false;
        } else {
            txtWyswietlacz.setText(txtWyswietlacz.getText() + cyfra);
        }
    }
    
    @FXML
    private void handleOperacja(ActionEvent event) {
        Button btn = (Button) event.getSource();
        operacja = btn.getText();
        
        try {
            liczba1 = Double.parseDouble(txtWyswietlacz.getText());
            nowaLiczba = true;
        } catch (NumberFormatException e) {
            txtWyswietlacz.setText("Błąd");
        }
    }
    
    @FXML
    private void handleRowna(ActionEvent event) {
        try {
            double liczba2 = Double.parseDouble(txtWyswietlacz.getText());
            double wynik = 0;
            
            switch (operacja) {
                case "+": wynik = liczba1 + liczba2; break;
                case "-": wynik = liczba1 - liczba2; break;
                case "*": wynik = liczba1 * liczba2; break;
                case "/":
                    if (liczba2 == 0) {
                        txtWyswietlacz.setText("Nie dziel przez 0!");
                        return;
                    }
                    wynik = liczba1 / liczba2;
                    break;
            }
            
            txtWyswietlacz.setText(String.valueOf(wynik));
            nowaLiczba = true;
            
        } catch (NumberFormatException e) {
            txtWyswietlacz.setText("Błąd");
        }
    }
    
    @FXML
    private void handleCzysc(ActionEvent event) {
        txtWyswietlacz.setText("0");
        liczba1 = 0;
        operacja = "";
        nowaLiczba = true;
    }
}

✅ Kalkulator — Sprawdzian

Testy do wykonania

Kryteria oceny (INF.04)

• ☐ Interfejs zgodny z wymaganiami (wszystkie przyciski)
• ☐ Cyfry dopisują się do wyświetlacza
• ☐ Operacje działają poprawnie
• ☐ Obsłużone dzielenie przez zero
• ☐ Przycisk C czyści kalkulator
• ☐ Kod kompiluje się bez błędów

🔥 Lista zadań — Rozgrzewka

Mini Quiz

📋 Lista zadań — Instrukcja

Treść zadania

🏗️ Lista zadań — Budowa UI

Struktura

<VBox spacing="10" style="-fx-padding: 20;">
    <HBox spacing="10">
        <TextField fx:id="txtZadanie" promptText="Nowe zadanie..." HBox.hgrow="ALWAYS"/>
        <Button text="Dodaj" onAction="#handleDodaj"/>
    </HBox>
    <ListView fx:id="listZadania" VBox.vgrow="ALWAYS"/>
    <HBox spacing="10">
        <Button text="Usuń zaznaczone" onAction="#handleUsun"/>
        <Button text="Wyczyść wszystko" onAction="#handleWyczysc"/>
    </HBox>
</VBox>

💻 Lista zadań — Kod

package listaZadan;

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 FXMLDocumentController implements Initializable {

    @FXML private TextField txtZadanie;
    @FXML private ListView<String> listZadania;
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // Opcjonalnie: przykładowe zadania
        listZadania.getItems().addAll(
            "Nauczyć się JavaFX",
            "Zdać egzamin INF.04"
        );
    }
    
    @FXML
    private void handleDodaj(ActionEvent event) {
        String zadanie = txtZadanie.getText().trim();
        
        if (zadanie.isEmpty()) {
            pokazAlert("Błąd", "Wpisz treść zadania!");
            return;
        }
        
        listZadania.getItems().add(zadanie);
        txtZadanie.clear();
        txtZadanie.requestFocus();
    }
    
    @FXML
    private void handleUsun(ActionEvent event) {
        String wybrany = listZadania.getSelectionModel().getSelectedItem();
        
        if (wybrany == null) {
            pokazAlert("Błąd", "Zaznacz zadanie do usunięcia!");
            return;
        }
        
        listZadania.getItems().remove(wybrany);
    }
    
    @FXML
    private void handleWyczysc(ActionEvent event) {
        listZadania.getItems().clear();
    }
    
    private void pokazAlert(String tytul, String tresc) {
        Alert alert = new Alert(Alert.AlertType.WARNING);
        alert.setTitle(tytul);
        alert.setHeaderText(null);
        alert.setContentText(tresc);
        alert.showAndWait();
    }
}

✅ Lista zadań — Sprawdzian

Testy

🔥 Rejestr produktów — Rozgrzewka

Mini Quiz

📋 Rejestr produktów — Instrukcja

Treść zadania

🏗️ Rejestr produktów — Budowa UI

Struktura layoutu

<VBox spacing="10" style="-fx-padding: 20;">
    <HBox spacing="10">
        <TextField fx:id="txtNazwa" promptText="Nazwa"/>
        <TextField fx:id="txtCena" promptText="Cena" prefWidth="80"/>
        <TextField fx:id="txtIlosc" promptText="Ilość" prefWidth="80"/>
        <Button text="Dodaj" onAction="#handleDodaj"/>
    </HBox>
    <TableView fx:id="tabProdukty" VBox.vgrow="ALWAYS">
        <columns>
            <TableColumn fx:id="colNazwa" text="Nazwa" prefWidth="150"/>
            <TableColumn fx:id="colCena" text="Cena" prefWidth="80"/>
            <TableColumn fx:id="colIlosc" text="Ilość" prefWidth="80"/>
            <TableColumn fx:id="colWartosc" text="Wartość" prefWidth="100"/>
        </columns>
    </TableView>
    <HBox spacing="10">
        <Button text="Usuń zaznaczony" onAction="#handleUsun"/>
        <Label text="Suma: "/>
        <Label fx:id="lblSuma" text="0.00 zł"/>
    </HBox>
</VBox>

💻 Rejestr produktów — Kod

Klasa Produkt.java

package rejestr;

public class Produkt {
    private String nazwa;
    private double cena;
    private int ilosc;
    
    public Produkt(String nazwa, double cena, int ilosc) {
        this.nazwa = nazwa;
        this.cena = cena;
        this.ilosc = ilosc;
    }
    
    // Gettery (wymagane przez PropertyValueFactory!)
    public String getNazwa() { return nazwa; }
    public double getCena() { return cena; }
    public int getIlosc() { return ilosc; }
    public double getWartosc() { return cena * ilosc; }
}

Controller

package rejestr;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import java.net.URL;
import java.util.ResourceBundle;

public class FXMLDocumentController implements Initializable {

    @FXML private TextField txtNazwa, txtCena, txtIlosc;
    @FXML private TableView<Produkt> tabProdukty;
    @FXML private TableColumn<Produkt, String> colNazwa;
    @FXML private TableColumn<Produkt, Double> colCena, colWartosc;
    @FXML private TableColumn<Produkt, Integer> colIlosc;
    @FXML private Label lblSuma;
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // Powiązanie kolumn z polami klasy Produkt
        colNazwa.setCellValueFactory(new PropertyValueFactory<>("nazwa"));
        colCena.setCellValueFactory(new PropertyValueFactory<>("cena"));
        colIlosc.setCellValueFactory(new PropertyValueFactory<>("ilosc"));
        colWartosc.setCellValueFactory(new PropertyValueFactory<>("wartosc"));
    }
    
    @FXML
    private void handleDodaj(ActionEvent event) {
        try {
            String nazwa = txtNazwa.getText().trim();
            double cena = Double.parseDouble(txtCena.getText());
            int ilosc = Integer.parseInt(txtIlosc.getText());
            
            if (nazwa.isEmpty()) {
                pokazAlert("Podaj nazwę produktu!");
                return;
            }
            
            tabProdukty.getItems().add(new Produkt(nazwa, cena, ilosc));
            obliczSume();
            wyczyscPola();
            
        } catch (NumberFormatException e) {
            pokazAlert("Cena i ilość muszą być liczbami!");
        }
    }
    
    @FXML
    private void handleUsun(ActionEvent event) {
        Produkt wybrany = tabProdukty.getSelectionModel().getSelectedItem();
        if (wybrany != null) {
            tabProdukty.getItems().remove(wybrany);
            obliczSume();
        }
    }
    
    private void obliczSume() {
        double suma = 0;
        for (Produkt p : tabProdukty.getItems()) {
            suma += p.getWartosc();
        }
        lblSuma.setText(String.format("%.2f zł", suma));
    }
    
    private void wyczyscPola() {
        txtNazwa.clear();
        txtCena.clear();
        txtIlosc.clear();
        txtNazwa.requestFocus();
    }
    
    private void pokazAlert(String tresc) {
        Alert alert = new Alert(Alert.AlertType.WARNING);
        alert.setContentText(tresc);
        alert.showAndWait();
    }
}

✅ Rejestr produktów — Sprawdzian

Testy

🔥 Dziennik ocen — Rozgrzewka

Mini Quiz

📋 Dziennik ocen — Instrukcja

Treść zadania

🏗️ Dziennik ocen — Budowa UI

Struktura

<VBox spacing="10" style="-fx-padding: 20;">
    <HBox spacing="10">
        <TextField fx:id="txtUczen" promptText="Imię ucznia"/>
        <ComboBox fx:id="cmbPrzedmiot" promptText="Przedmiot"/>
        <ComboBox fx:id="cmbOcena" promptText="Ocena"/>
        <Button text="Dodaj" onAction="#handleDodaj"/>
    </HBox>
    <HBox spacing="10">
        <Label text="Filtruj:"/>
        <ComboBox fx:id="cmbFiltr" promptText="Wszystkie" onAction="#handleFiltr"/>
    </HBox>
    <TableView fx:id="tabOceny" VBox.vgrow="ALWAYS">
        <columns>
            <TableColumn fx:id="colUczen" text="Uczeń" prefWidth="150"/>
            <TableColumn fx:id="colPrzedmiot" text="Przedmiot" prefWidth="120"/>
            <TableColumn fx:id="colOcena" text="Ocena" prefWidth="80"/>
        </columns>
    </TableView>
    <HBox spacing="10">
        <Label text="Średnia:"/>
        <Label fx:id="lblSrednia" text="0.00"/>
        <Button text="Usuń zaznaczoną" onAction="#handleUsun"/>
    </HBox>
</VBox>

💻 Dziennik ocen — Kod

Klasa Ocena.java

package dziennik;

public class Ocena {
    private String uczen;
    private String przedmiot;
    private int ocena;
    
    public Ocena(String uczen, String przedmiot, int ocena) {
        this.uczen = uczen;
        this.przedmiot = przedmiot;
        this.ocena = ocena;
    }
    
    public String getUczen() { return uczen; }
    public String getPrzedmiot() { return przedmiot; }
    public int getOcena() { return ocena; }
}

Controller

package dziennik;

import javafx.collections.*;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import java.net.URL;
import java.util.ResourceBundle;

public class FXMLDocumentController implements Initializable {

    @FXML private TextField txtUczen;
    @FXML private ComboBox<String> cmbPrzedmiot, cmbFiltr;
    @FXML private ComboBox<Integer> cmbOcena;
    @FXML private TableView<Ocena> tabOceny;
    @FXML private TableColumn<Ocena, String> colUczen, colPrzedmiot;
    @FXML private TableColumn<Ocena, Integer> colOcena;
    @FXML private Label lblSrednia;
    
    private ObservableList<Ocena> wszystkieOceny = FXCollections.observableArrayList();
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // Przedmioty
        String[] przedmioty = {"Matematyka", "Fizyka", "Informatyka", "Polski", "Angielski"};
        cmbPrzedmiot.getItems().addAll(przedmioty);
        cmbFiltr.getItems().add("Wszystkie");
        cmbFiltr.getItems().addAll(przedmioty);
        cmbFiltr.setValue("Wszystkie");
        
        // Oceny 1-6
        cmbOcena.getItems().addAll(1, 2, 3, 4, 5, 6);
        
        // Kolumny tabeli
        colUczen.setCellValueFactory(new PropertyValueFactory<>("uczen"));
        colPrzedmiot.setCellValueFactory(new PropertyValueFactory<>("przedmiot"));
        colOcena.setCellValueFactory(new PropertyValueFactory<>("ocena"));
    }
    
    @FXML
    private void handleDodaj(ActionEvent event) {
        String uczen = txtUczen.getText().trim();
        String przedmiot = cmbPrzedmiot.getValue();
        Integer ocena = cmbOcena.getValue();
        
        if (uczen.isEmpty() || przedmiot == null || ocena == null) {
            pokazAlert("Wypełnij wszystkie pola!");
            return;
        }
        
        Ocena nowaOcena = new Ocena(uczen, przedmiot, ocena);
        wszystkieOceny.add(nowaOcena);
        handleFiltr(null);  // Odśwież tabelę
        obliczSrednia();
        
        txtUczen.clear();
    }
    
    @FXML
    private void handleFiltr(ActionEvent event) {
        String filtr = cmbFiltr.getValue();
        
        if (filtr == null || filtr.equals("Wszystkie")) {
            tabOceny.setItems(wszystkieOceny);
        } else {
            ObservableList<Ocena> przefiltrowane = FXCollections.observableArrayList();
            for (Ocena o : wszystkieOceny) {
                if (o.getPrzedmiot().equals(filtr)) {
                    przefiltrowane.add(o);
                }
            }
            tabOceny.setItems(przefiltrowane);
        }
    }
    
    @FXML
    private void handleUsun(ActionEvent event) {
        Ocena wybrana = tabOceny.getSelectionModel().getSelectedItem();
        if (wybrana != null) {
            wszystkieOceny.remove(wybrana);
            handleFiltr(null);
            obliczSrednia();
        }
    }
    
    private void obliczSrednia() {
        if (wszystkieOceny.isEmpty()) {
            lblSrednia.setText("0.00");
            return;
        }
        
        double suma = 0;
        for (Ocena o : wszystkieOceny) {
            suma += o.getOcena();
        }
        double srednia = suma / wszystkieOceny.size();
        lblSrednia.setText(String.format("%.2f", srednia));
    }
    
    private void pokazAlert(String tresc) {
        Alert alert = new Alert(Alert.AlertType.WARNING);
        alert.setContentText(tresc);
        alert.showAndWait();
    }
}

✅ Dziennik ocen — Sprawdzian

Testy

📜 JavaFX — Ściąga

Podstawowe kontrolki

Layouty

Obsługa zdarzeń

// W FXML: onAction="#metodaNazwa"
@FXML
private void metodaNazwa(ActionEvent event) {
    Button btn = (Button) event.getSource();  // Który element wywołał
}

Konwersja typów

// String → int/double (z obsługą błędów!)
try {
    int liczba = Integer.parseInt(txt.getText());
    double wartosc = Double.parseDouble(txt.getText());
} catch (NumberFormatException e) {
    // Obsługa błędu
}

// int/double → String
lbl.setText(String.valueOf(liczba));
lbl.setText(String.format("%.2f", wartosc));  // 2 miejsca po przecinku

Alert (komunikaty)

Alert alert = new Alert(Alert.AlertType.WARNING);  // lub INFORMATION, ERROR
alert.setTitle("Tytuł");
alert.setHeaderText(null);
alert.setContentText("Treść komunikatu");
alert.showAndWait();

ListView operacje

list.getItems().add("element");           // Dodaj
list.getItems().remove(obiekt);           // Usuń
list.getItems().clear();                  // Wyczyść
list.getSelectionModel().getSelectedItem(); // Zaznaczony

TableView setup

// W initialize():
colNazwa.setCellValueFactory(new PropertyValueFactory<>("nazwa"));
// "nazwa" = getNazwa() w klasie modelu

🐛 JavaFX — Typowe błędy

NullPointerException na kontrolce

// ✅ Poprawnie:
@FXML private TextField txtPole;  // fx:id="txtPole" w FXML

NumberFormatException

// ✅ Zawsze używaj try-catch:
try {
    double x = Double.parseDouble(txt.getText());
} catch (NumberFormatException e) {
    pokazAlert("Podaj liczbę!");
}

onAction nie działa

RadioButton nie grupują się

<!-- ✅ Poprawnie: -->
<fx:define>
    <ToggleGroup fx:id="grupa"/>
</fx:define>
<RadioButton toggleGroup="$grupa" text="A"/>
<RadioButton toggleGroup="$grupa" text="B"/>

TableView nie pokazuje danych

// Klasa: getNazwa() → PropertyValueFactory("nazwa")
// ✅ "nazwa" = getNazwa (bez "get", małą literą)

Brak fx:controller

<!-- ✅ Na początku głównego kontenera: -->
<VBox xmlns:fx="http://javafx.com/fxml"
      fx:controller="pakiet.NazwaController">

📱 Android Studio — Podstawy

Co to Android?

Android to system operacyjny dla urządzeń mobilnych (telefony, tablety). Aplikacje pisze się w Java lub Kotlin.

Porównanie z innymi technologiami

Android Studio

Android Studio to IDE oparte na IntelliJ IDEA. Oferuje:

• Edytor layoutów — wizualne projektowanie UI (jak Scene Builder)
• Emulator — testowanie bez fizycznego telefonu
• Gradle — system budowania projektu
• Logcat — logi i debugowanie

Tworzenie projektu

1. File → New Project
2. Wybierz Empty Activity
3. Podaj nazwę (np. MojaAplikacja)
4. Language: Java (lub Kotlin)
5. Minimum SDK: API 21 (Android 5.0)

📝 Zadanie do teorii

📁 Struktura projektu Android

Typowa struktura

app/
├── src/main/
│   ├── java/com/example/mojaaplikacja/
│   │   └── MainActivity.java       # Główna aktywność
│   ├── res/
│   │   ├── layout/
│   │   │   └── activity_main.xml   # Layout głównego ekranu
│   │   ├── values/
│   │   │   ├── strings.xml         # Teksty
│   │   │   └── colors.xml          # Kolory
│   │   └── drawable/               # Obrazki
│   └── AndroidManifest.xml         # Konfiguracja aplikacji
└── build.gradle                    # Zależności

Opis kluczowych plików

Activity — co to jest?

Activity to pojedynczy ekran aplikacji. Każda Activity ma:

• Plik .java — logika
• Plik .xml — layout (wygląd)

Cykl życia Activity

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);  // Ładowanie layoutu
        // Tu inicjalizacja kontrolek
    }
}

📝 Zadanie do teorii

📐 Layouty XML

Najważniejsze layouty

LinearLayout — pionowy

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Witaj!"/>

    <EditText
        android:id="@+id/txtImie"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Wpisz imię"/>

    <Button
        android:id="@+id/btnPowitaj"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Powitaj"/>

</LinearLayout>

Wymiary

📝 Zadanie do teorii

✏️ TextView i EditText

TextView — wyświetlanie tekstu

<TextView
    android:id="@+id/txtWynik"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Witaj świecie!"
    android:textSize="18sp"
    android:textColor="#333333"
    android:textStyle="bold"/>

// W MainActivity.java
TextView txtWynik = findViewById(R.id.txtWynik);

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

// Pobranie tekstu
String tekst = txtWynik.getText().toString();

EditText — pole tekstowe

<EditText
    android:id="@+id/edtImie"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Wpisz imię..."
    android:inputType="text"/>

<!-- Dla liczb: -->
<EditText
    android:id="@+id/edtLiczba"
    android:inputType="number"/>

<!-- Dla hasła: -->
<EditText
    android:id="@+id/edtHaslo"
    android:inputType="textPassword"/>

EditText edtImie = findViewById(R.id.edtImie);

// Pobranie tekstu
String imie = edtImie.getText().toString();

// Ustawienie tekstu
edtImie.setText("Jan");

// Wyczyszczenie
edtImie.setText("");

inputType — typy klawiatury

📝 Zadanie do teorii

try {
    double liczba = Double.parseDouble(edtLiczba.getText().toString());
    // użyj liczby
} catch (NumberFormatException e) {
    txtWynik.setText("Błąd: wpisz liczbę!");
}

🔘 Button i ImageView

Button

<Button
    android:id="@+id/btnOblicz"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Oblicz"
    android:onClick="oblicz"/>

// Sposób 1: android:onClick="oblicz" w XML
public void oblicz(View view) {
    // obsługa kliknięcia
    txtWynik.setText("Kliknięto!");
}

// Sposób 2: setOnClickListener w Java
Button btnOblicz = findViewById(R.id.btnOblicz);
btnOblicz.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        txtWynik.setText("Kliknięto!");
    }
});

// Sposób 3: Lambda (krótsza wersja)
btnOblicz.setOnClickListener(v -> {
    txtWynik.setText("Kliknięto!");
});

ImageView

<ImageView
    android:id="@+id/imgLogo"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/logo"
    android:contentDescription="Logo aplikacji"/>

ImageView imgLogo = findViewById(R.id.imgLogo);

// Zmiana obrazka
imgLogo.setImageResource(R.drawable.inny_obrazek);

📝 Zadanie do teorii

⚡ onClick — praktyka

Przykład: Powitanie

Aplikacja pobiera imię i wyświetla powitanie po kliknięciu przycisku.

activity_main.xml

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

    <EditText
        android:id="@+id/edtImie"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Wpisz imię"/>

    <Button
        android:id="@+id/btnPowitaj"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Powitaj"/>

    <TextView
        android:id="@+id/txtWynik"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:textStyle="bold"/>

</LinearLayout>

MainActivity.java

package com.example.powitanie;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.*;

public class MainActivity extends AppCompatActivity {

    private EditText edtImie;
    private Button btnPowitaj;
    private TextView txtWynik;

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

        // Pobieranie referencji do kontrolek
        edtImie = findViewById(R.id.edtImie);
        btnPowitaj = findViewById(R.id.btnPowitaj);
        txtWynik = findViewById(R.id.txtWynik);

        // Obsługa kliknięcia
        btnPowitaj.setOnClickListener(v -> {
            String imie = edtImie.getText().toString().trim();
            
            if (imie.isEmpty()) {
                txtWynik.setText("Wpisz imię!");
            } else {
                txtWynik.setText("Witaj, " + imie + "!");
            }
        });
    }
}

📝 Zadanie do teorii

📦 Zasoby (Resources)

Folder res/

strings.xml

<!-- res/values/strings.xml -->
<resources>
    <string name="app_name">Moja Aplikacja</string>
    <string name="btn_oblicz">Oblicz</string>
    <string name="hint_liczba">Wpisz liczbę...</string>
    <string name="error_empty">Pole nie może być puste!</string>
</resources>

<!-- Użycie w layout XML: -->
<Button android:text="@string/btn_oblicz"/>
<EditText android:hint="@string/hint_liczba"/>

// Użycie w kodzie Java:
String blad = getString(R.string.error_empty);
txtWynik.setText(blad);

colors.xml

<!-- res/values/colors.xml -->
<resources>
    <color name="primary">#6200EE</color>
    <color name="error">#B00020</color>
    <color name="success">#00C853</color>
</resources>

<!-- Użycie: -->
<TextView android:textColor="@color/error"/>

dimens.xml

<!-- res/values/dimens.xml -->
<resources>
    <dimen name="text_size_large">24sp</dimen>
    <dimen name="padding_standard">16dp</dimen>
</resources>

📝 Zadanie do teorii

<!-- W XML: -->
android:textColor="@color/primary"

// W Java:
int color = getResources().getColor(R.color.primary);
txtWynik.setTextColor(color);

🔗 ConstraintLayout

Podstawowe ograniczenia (constraints)

Przykład: Formularz logowania

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <EditText
        android:id="@+id/edtLogin"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Login"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="100dp"/>

    <EditText
        android:id="@+id/edtHaslo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Hasło"
        android:inputType="textPassword"
        app:layout_constraintTop_toBottomOf="@id/edtLogin"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

    <Button
        android:id="@+id/btnZaloguj"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Zaloguj"
        app:layout_constraintTop_toBottomOf="@id/edtHaslo"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

📝 Zadanie do teorii

<Button
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

📋 ListView i RecyclerView

ListView — podstawowa lista

<ListView
    android:id="@+id/listZadania"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

ListView listZadania = findViewById(R.id.listZadania);

// Lista danych
ArrayList<String> zadania = new ArrayList<>();
zadania.add("Nauczyć się Androida");
zadania.add("Zdać egzamin");

// Adapter = most między danymi a widokiem
ArrayAdapter<String> adapter = new ArrayAdapter<>(
    this,
    android.R.layout.simple_list_item_1,
    zadania
);

listZadania.setAdapter(adapter);

// Obsługa kliknięcia elementu
listZadania.setOnItemClickListener((parent, view, position, id) -> {
    String wybrany = zadania.get(position);
    Toast.makeText(this, "Wybrano: " + wybrany, Toast.LENGTH_SHORT).show();
});

Dodawanie i usuwanie elementów

// Dodaj element
zadania.add("Nowe zadanie");
adapter.notifyDataSetChanged();  // WAŻNE!

// Usuń element
zadania.remove(position);
adapter.notifyDataSetChanged();

Toast — szybki komunikat

Toast.makeText(this, "Tekst komunikatu", Toast.LENGTH_SHORT).show();
// LENGTH_SHORT = krótki, LENGTH_LONG = dłuższy

📝 Zadanie do teorii

☕ Java vs Kotlin

Porównanie składni

Ten sam kod — Java vs Kotlin

Java:

public class MainActivity extends AppCompatActivity {
    private EditText edtImie;
    private Button btnPowitaj;
    private TextView txtWynik;

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

        edtImie = findViewById(R.id.edtImie);
        btnPowitaj = findViewById(R.id.btnPowitaj);
        txtWynik = findViewById(R.id.txtWynik);

        btnPowitaj.setOnClickListener(v -> {
            String imie = edtImie.getText().toString();
            txtWynik.setText("Witaj " + imie + "!");
        });
    }
}

Kotlin:

class MainActivity : AppCompatActivity() {
    private lateinit var edtImie: EditText
    private lateinit var btnPowitaj: Button
    private lateinit var txtWynik: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        edtImie = findViewById(R.id.edtImie)
        btnPowitaj = findViewById(R.id.btnPowitaj)
        txtWynik = findViewById(R.id.txtWynik)

        btnPowitaj.setOnClickListener {
            val imie = edtImie.text.toString()
            txtWynik.text = "Witaj $imie!"
        }
    }
}

📝 Zadanie do teorii

🔥 Kalkulator — Rozgrzewka

Mini Quiz

📋 Kalkulator — Instrukcja

Treść zadania

Układ przycisków

┌──────────────────────┐
│                    0 │  ← wyświetlacz
│ [ 7 ][ 8 ][ 9 ][ / ]│
│ [ 4 ][ 5 ][ 6 ][ * ]│
│ [ 1 ][ 2 ][ 3 ][ - ]│
│ [ C ][ 0 ][ = ][ + ]│
└──────────────────────┘

Kolory

🏗️ Kalkulator — Budowa UI

activity_main.xml

Kluczowe zasady:

• Root: LinearLayout (vertical) z padding="16dp"
• Wyświetlacz: TextView z textSize="48sp", wyrównanie do prawej
• 4 rzędy po 4 przyciski (siatka 4×4)
• Każdy rząd: LinearLayout (horizontal) z layout_height="0dp" + layout_weight="1"
• Każdy przycisk: layout_width="0dp" + layout_weight="1" (równa szerokość)

private TextView wyswietlacz;
private int liczbaA = 0;
private int liczbaB = 0;
private String operacja = "";
private boolean nowaLiczba = true;

// w onCreate:
wyswietlacz = findViewById(R.id.wyswietlacz);
Button btn0 = findViewById(R.id.btn0);
// ... btn1-btn9
Button btnDodawanie = findViewById(R.id.btnDodawanie);
Button btnOdejmowanie = findViewById(R.id.btnOdejmowanie);
Button btnMnozenie = findViewById(R.id.btnMnozenie);
Button btnDzielenie = findViewById(R.id.btnDzielenie);
Button btnRowna = findViewById(R.id.btnRowna);
Button btnC = findViewById(R.id.btnC);

// Jeden listener dla cyfr 0-9
View.OnClickListener kliknijCyfre = v -> {
    String cyfra = ((Button) v).getText().toString();
    String tekst = wyswietlacz.getText().toString();
    if (nowaLiczba || tekst.equals("0")) {
        wyswietlacz.setText(cyfra);
        nowaLiczba = false;
    } else {
        wyswietlacz.setText(tekst + cyfra);
    }
};
btn0.setOnClickListener(kliknijCyfre);
btn1.setOnClickListener(kliknijCyfre);
// ... btn2-btn9

// Operacje
View.OnClickListener kliknijOp = v -> {
    liczbaA = Integer.parseInt(wyswietlacz.getText().toString());
    operacja = ((Button) v).getText().toString();
    nowaLiczba = true;
};
btnDodawanie.setOnClickListener(kliknijOp);
btnOdejmowanie.setOnClickListener(kliknijOp);
btnMnozenie.setOnClickListener(kliknijOp);
btnDzielenie.setOnClickListener(kliknijOp);

// Równa się
btnRowna.setOnClickListener(v -> {
    liczbaB = Integer.parseInt(wyswietlacz.getText().toString());
    int wynik = 0;
    switch (operacja) {
        case "+": wynik = liczbaA + liczbaB; break;
        case "-": wynik = liczbaA - liczbaB; break;
        case "*": wynik = liczbaA * liczbaB; break;
        case "/":
            if (liczbaB == 0) { wyswietlacz.setText("Błąd"); return; }
            wynik = liczbaA / liczbaB; break;
    }
    wyswietlacz.setText(String.valueOf(wynik));
    nowaLiczba = true;
});

// Czyszczenie
btnC.setOnClickListener(v -> {
    wyswietlacz.setText("0");
    liczbaA = 0; operacja = ""; nowaLiczba = true;
});

💻 Kalkulator — Gotowy kod

activity_main.xml

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

    <!-- Wyświetlacz -->
    <TextView
        android:id="@+id/wyswietlacz"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="0"
        android:textSize="48sp"
        android:textAlignment="textEnd"
        android:padding="20dp"
        android:layout_marginBottom="16dp"/>

    <!-- Rząd 1: 7 8 9 / -->
    <LinearLayout android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:gravity="center">
        <Button android:id="@+id/btn7" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="7" android:textSize="24sp"/>
        <Button android:id="@+id/btn8" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="8" android:textSize="24sp"/>
        <Button android:id="@+id/btn9" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="9" android:textSize="24sp"/>
        <Button android:id="@+id/btnDzielenie" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="/" android:textSize="24sp"
            android:backgroundTint="#FF9500" android:textColor="#FFFFFF"/>
    </LinearLayout>

    <!-- Rząd 2: 4 5 6 * -->
    <LinearLayout android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:gravity="center">
        <Button android:id="@+id/btn4" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="4" android:textSize="24sp"/>
        <Button android:id="@+id/btn5" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="5" android:textSize="24sp"/>
        <Button android:id="@+id/btn6" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="6" android:textSize="24sp"/>
        <Button android:id="@+id/btnMnozenie" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="*" android:textSize="24sp"
            android:backgroundTint="#FF9500" android:textColor="#FFFFFF"/>
    </LinearLayout>

    <!-- Rząd 3: 1 2 3 - -->
    <LinearLayout android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:gravity="center">
        <Button android:id="@+id/btn1" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="1" android:textSize="24sp"/>
        <Button android:id="@+id/btn2" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="2" android:textSize="24sp"/>
        <Button android:id="@+id/btn3" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="3" android:textSize="24sp"/>
        <Button android:id="@+id/btnOdejmowanie" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="-" android:textSize="24sp"
            android:backgroundTint="#FF9500" android:textColor="#FFFFFF"/>
    </LinearLayout>

    <!-- Rząd 4: C 0 = + -->
    <LinearLayout android:layout_width="match_parent" android:layout_height="0dp"
        android:layout_weight="1" android:gravity="center">
        <Button android:id="@+id/btnC" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="C" android:textSize="24sp"
            android:backgroundTint="#A5A5A5"/>
        <Button android:id="@+id/btn0" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="0" android:textSize="24sp"/>
        <Button android:id="@+id/btnRowna" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="=" android:textSize="24sp"
            android:backgroundTint="#FF9500" android:textColor="#FFFFFF"/>
        <Button android:id="@+id/btnDodawanie" android:layout_width="0dp" android:layout_height="match_parent"
            android:layout_weight="1" android:layout_margin="4dp" android:text="+" android:textSize="24sp"
            android:backgroundTint="#FF9500" android:textColor="#FFFFFF"/>
    </LinearLayout>

</LinearLayout>

MainActivity.java

package com.example.kalkulator;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private TextView wyswietlacz;
    private int liczbaA = 0;
    private String operacja = "";
    private boolean nowaLiczba = true;

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

        wyswietlacz = findViewById(R.id.wyswietlacz);

        Button btn0 = findViewById(R.id.btn0);
        Button btn1 = findViewById(R.id.btn1);
        Button btn2 = findViewById(R.id.btn2);
        Button btn3 = findViewById(R.id.btn3);
        Button btn4 = findViewById(R.id.btn4);
        Button btn5 = findViewById(R.id.btn5);
        Button btn6 = findViewById(R.id.btn6);
        Button btn7 = findViewById(R.id.btn7);
        Button btn8 = findViewById(R.id.btn8);
        Button btn9 = findViewById(R.id.btn9);
        Button btnDodawanie = findViewById(R.id.btnDodawanie);
        Button btnOdejmowanie = findViewById(R.id.btnOdejmowanie);
        Button btnMnozenie = findViewById(R.id.btnMnozenie);
        Button btnDzielenie = findViewById(R.id.btnDzielenie);
        Button btnRowna = findViewById(R.id.btnRowna);
        Button btnC = findViewById(R.id.btnC);

        // Cyfry 0-9 — jeden listener
        View.OnClickListener kliknijCyfre = v -> {
            String cyfra = ((Button) v).getText().toString();
            String tekst = wyswietlacz.getText().toString();
            if (nowaLiczba || tekst.equals("0")) {
                wyswietlacz.setText(cyfra);
                nowaLiczba = false;
            } else {
                wyswietlacz.setText(tekst + cyfra);
            }
        };
        btn0.setOnClickListener(kliknijCyfre);
        btn1.setOnClickListener(kliknijCyfre);
        btn2.setOnClickListener(kliknijCyfre);
        btn3.setOnClickListener(kliknijCyfre);
        btn4.setOnClickListener(kliknijCyfre);
        btn5.setOnClickListener(kliknijCyfre);
        btn6.setOnClickListener(kliknijCyfre);
        btn7.setOnClickListener(kliknijCyfre);
        btn8.setOnClickListener(kliknijCyfre);
        btn9.setOnClickListener(kliknijCyfre);

        // Operacje + - * /
        View.OnClickListener kliknijOp = v -> {
            liczbaA = Integer.parseInt(wyswietlacz.getText().toString());
            operacja = ((Button) v).getText().toString();
            nowaLiczba = true;
        };
        btnDodawanie.setOnClickListener(kliknijOp);
        btnOdejmowanie.setOnClickListener(kliknijOp);
        btnMnozenie.setOnClickListener(kliknijOp);
        btnDzielenie.setOnClickListener(kliknijOp);

        // = (równa się)
        btnRowna.setOnClickListener(v -> {
            int liczbaB = Integer.parseInt(wyswietlacz.getText().toString());
            int wynik = 0;
            switch (operacja) {
                case "+": wynik = liczbaA + liczbaB; break;
                case "-": wynik = liczbaA - liczbaB; break;
                case "*": wynik = liczbaA * liczbaB; break;
                case "/":
                    if (liczbaB == 0) {
                        wyswietlacz.setText("Błąd");
                        nowaLiczba = true;
                        return;
                    }
                    wynik = liczbaA / liczbaB;
                    break;
            }
            wyswietlacz.setText(String.valueOf(wynik));
            nowaLiczba = true;
        });

        // C — wyczyść
        btnC.setOnClickListener(v -> {
            wyswietlacz.setText("0");
            liczbaA = 0;
            operacja = "";
            nowaLiczba = true;
        });
    }
}

Kalkulator — Sprawdzian

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